/* ========================================================================== eIndiaJobs.com — design system -------------------------------------------------------------------------- This is the single source of truth for how the platform looks. All four panels (Candidate, Employer, HR, Admin) and the public site load this file, which is what stops them drifting into five different-looking products. HOW IT WORKS Bootstrap 5.3 is built on CSS variables, so we do NOT need to recompile Bootstrap or run a build step. We redefine its variables in :root below, and Bootstrap picks up our colours and shapes everywhere automatically. TO RESTYLE THE WHOLE PLATFORM, change the values in :root. Nothing else. -------------------------------------------------------------------------- THE PALETTE COMES FROM THE LOGO (refreshed). Blue (#0E63C0), green (#2FA636), orange (#F5851F) and navy (#0B2E5E) are all sampled from the eIndiaJobs mark itself -- the blue figure, the green figure, the orange "Jobs", and the deep navy wordmark. Blue leads (calm, trustworthy, interactive). Green is the good news -- hired, paid, joined. Orange is the one hero call-to-action, used sparingly. Navy carries authority in headings and dark surfaces. Together they read as one brand instead of a generic blue hiring site. ========================================================================== */ :root { /* Tells the browser to render NATIVE controls (the city/skills dropdown popups, scrollbars, date pickers) in the light scheme. The dark theme flips this to 'dark' so those popups stop appearing as a white box on a dark page. */ color-scheme: light; /* ---- Brand: blue ------------------------------------------------------ The interactive colour, taken straight from the big blue figure and the arc in the logo. Buttons, links, the active menu item, focus rings. White text on --eij-primary scores 5.4:1, past the 4.5:1 guideline. */ --eij-primary: #0E63C0; --eij-primary-hover: #0A54A8; --eij-primary-active: #094A93; --eij-primary-subtle: #E7F0FB; /* tinted backgrounds: selected rows, chips */ --eij-primary-border: #C6DDF6; /* The focus ring / glow. A token so it always tracks the primary blue -- it used to be a hardcoded rgba of the OLD blue, which drifted the moment the brand changed. Kept fairly strong so keyboard focus is unmistakable. */ --eij-ring: rgba(14, 99, 192, 0.30); /* ---- Brand: navy ------------------------------------------------------ The deep navy of the "eIndia" wordmark. Used for dark surfaces (the footer, the hero) and for headings. */ --eij-navy: #0B2E5E; --eij-navy-700: #103F7A; --eij-navy-soft: #1E4374; /* hairlines and dividers ON navy */ /* ---- Brand: orange (the accent) -------------------------------------- Used DELIBERATELY and SPARINGLY: the one hero call-to-action, "new" and "featured" markers, the active tab underline. If orange starts appearing on every third element it stops meaning anything. IMPORTANT -- white text on this orange is unreadable (fails contrast). So an orange button carries NAVY text (passes). That is why --eij-accent-on exists, and why you must never swap it for white. This is the orange of "Jobs" in the logo. */ --eij-accent: #F5851F; --eij-accent-hover: #DE760F; --eij-accent-on: var(--eij-navy); /* the ONLY text colour allowed on orange */ --eij-accent-ink: #9A3412; /* dark orange, for TEXT on a pale orange bg */ --eij-accent-subtle: #FEF0E0; --eij-accent-border: #FBD5A6; /* ---- Neutrals --------------------------------------------------------- Tinted very slightly towards the brand's own navy rather than towards grey, so the greys sit with the blues instead of fighting them. */ --eij-ink: #0B1F3A; /* headings + body text: 15.6:1 on white */ --eij-ink-soft: #33455E; /* secondary body text: 9.1:1 */ /* Muted text. Nudged a touch darker (#4B5563) so it stays past 4.5:1 even on the clearly-grey page background below (#CED5D9) -- ~5:1 there, ~7:1 on a white card. */ --eij-muted: #4B5563; /* Decorative ONLY -- disabled controls, an icon inside an empty state. It is too light for text a human is expected to read. Placeholders do NOT use this; see .form-control::placeholder below. */ --eij-faint: #94A3B8; --eij-border: #E3E8EF; --eij-border-strong: #CBD5E1; /* The page. Deliberately a clear step darker than white. White cards sit on top of it, so if the page is near-white too (the old #F5F7FA), the cards and their thin borders vanish into the background -- exactly the "I can't see the card edges" problem. This clear blue-grey (the value asked for) is a decisive step below white, so white cards float unmistakably on top of it. */ --eij-bg: #CED5D9; --eij-surface: #FFFFFF; /* cards sit on top of the page */ --eij-surface-2: #F8FAFC; /* a second layer: table headers, inset panels */ /* The "chrome" -- the navbar and the sidebar. Same grey as the page, so the shell reads as one calm canvas and only the white cards stand out. */ --eij-chrome: #CED5D9; --eij-navbar-bg: rgba(206, 213, 217, 0.88); /* the frosted top bar */ /* ---- Semantic status -------------------------------------------------- Never rely on colour alone to carry meaning -- always pair with a word or an icon. Roughly 1 in 12 men cannot reliably tell red from green. */ /* Green, from the logo's green figure. Success, "joined", "paid". This darker tone keeps white text on it readable; the bright logo green is used only as a fill behind a tick or a label, never under white text. */ --eij-success: #1E7D2E; --eij-success-subtle: #E7F5E9; --eij-success-border: #BEE6C2; /* The bright logo green -- for a FILL behind a tick or a label only (e.g. the "Joined" timeline node), never under white body text. */ --eij-brand-green: #2FA636; --eij-warning: #B45309; --eij-warning-subtle: #FFF8EB; --eij-warning-border: #FCD9A0; /* Darker than the usual #DC2626. That one is fine on white (4.8:1) but drops to 4.4:1 -- a fail -- the moment it is used as TEXT on its own pale red panel, which is exactly where danger text always ends up. This passes on both, and white still reads cleanly on it as a button. */ --eij-danger: #C81E1E; --eij-danger-subtle: #FEF2F2; --eij-danger-border: #FCC5C5; --eij-info: #0369A1; --eij-info-subtle: #EFF8FF; --eij-info-border: #B9E0FB; /* ---- Spacing (a 4px rhythm) ------------------------------------------ */ --eij-space-1: 0.25rem; --eij-space-2: 0.5rem; --eij-space-3: 0.75rem; --eij-space-4: 1rem; --eij-space-5: 1.5rem; --eij-space-6: 2rem; --eij-space-7: 3rem; --eij-space-8: 4rem; /* ---- Corners ---------------------------------------------------------- Deliberately restrained. Very round corners (24px+) on a card read as a toy, and this platform is asking people to trust it with a job. */ --eij-radius-sm: 0.5rem; /* inputs, buttons, chips */ --eij-radius: 0.75rem; /* cards */ --eij-radius-lg: 1rem; /* big panels, the hero search bar */ --eij-radius-pill: 999px; /* badges and tags only */ /* ---- Elevation -------------------------------------------------------- A card gets EITHER a border and a tight shadow, OR no border and a wide soft one. Both at once is the tell-tale "AI card": it looks like it is hovering and outlined at the same time, which nothing real does. */ --eij-shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 1px rgba(11, 31, 58, 0.04); --eij-shadow-sm: 0 1px 3px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.05); --eij-shadow-md: 0 4px 12px rgba(11, 31, 58, 0.08); --eij-shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.12); /* ---- Motion ----------------------------------------------------------- One easing curve for the whole product, so nothing feels like it came from a different app. It decelerates hard: fast at the start, gentle at the end, which is how physical objects actually stop. No bounce, no elastic. This is a hiring platform, not a game. */ --eij-ease: cubic-bezier(0.22, 1, 0.36, 1); --eij-fast: 140ms; --eij-base: 200ms; --eij-slow: 320ms; /* ---- Stacking order --------------------------------------------------- Named, so nobody ever has to write z-index: 9999 and hope. */ --eij-z-sticky: 100; --eij-z-dropdown: 200; --eij-z-backdrop: 300; --eij-z-modal: 400; --eij-z-toast: 500; /* ---- Type ------------------------------------------------------------- ONE family, in many weights. Product interfaces do not need a display font paired with a body font -- that is a brand-site move, and here it would just make the labels and the buttons disagree with each other. Hierarchy comes from weight and size instead. */ --eij-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---- Hand our tokens to Bootstrap ------------------------------------- */ --bs-primary: var(--eij-primary); --bs-primary-rgb: 14, 99, 192; /* the RGB of --eij-primary #0E63C0 */ --bs-body-color: var(--eij-ink); --bs-body-bg: var(--eij-bg); --bs-border-color: var(--eij-border); /* * Links need the -rgb form as well as the plain one. * * Bootstrap 5.3 does NOT colour an from --bs-link-color. It writes * color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) * so if you only override --bs-link-color, every link on the site silently * stays Bootstrap's default blue (#0d6efd) -- which is a different blue from * ours, and scores 4.19:1 on our page background, i.e. it fails WCAG AA. * * Nothing on screen screams about this; the links just look "blue enough". * It was found by measuring the rendered colour in a real browser. */ --bs-link-color: var(--eij-primary); --bs-link-color-rgb: 14, 99, 192; --bs-link-hover-color: var(--eij-primary-hover); --bs-link-hover-color-rgb: 10, 66, 159; --bs-border-radius: var(--eij-radius); --bs-font-sans-serif: var(--eij-font); /* * The semantic colours have to be handed over in BOTH forms. * * Bootstrap builds .btn-outline-danger, .text-danger and friends from * --bs-danger / --bs-success / etc. Overriding only the -rgb variants leaves * those components on Bootstrap's OWN red (#dc3545) -- a different red from * ours, and one that scores 4.22:1 on our page background, i.e. it fails. * * The page still looked "red enough" to the eye. It was caught by measuring * the rendered colour of a "Close job" button in a real browser. */ --bs-success: var(--eij-success); --bs-success-rgb: 21, 128, 61; --bs-danger: var(--eij-danger); --bs-danger-rgb: 200, 30, 30; --bs-warning: var(--eij-warning); --bs-warning-rgb: 180, 83, 9; --bs-info: var(--eij-info); --bs-info-rgb: 3, 105, 161; } /* ========================================================================== DARK THEME -------------------------------------------------------------------------- The whole platform is built on the tokens above, so a dark theme is just those tokens redefined -- every card, button, badge, table and form follows along on its own. The attribute is set by a tiny script in the page (partials/assets.blade.php) before the first paint, from the user's saved choice or their operating system, so there is no white flash. The brand colours are LIGHTENED for a dark ground (a mid blue reads muddy on dark); the neutrals become a navy-charcoal ramp rather than an inverted grey. ========================================================================== */ :root[data-theme="dark"] { /* Native dropdown popups, scrollbars and date pickers render dark now. */ color-scheme: dark; /* Brand blue -- lifted so it stays vivid on a dark surface. */ --eij-primary: #4C9AF5; --eij-primary-hover: #6EB0F8; --eij-primary-active: #3B82F6; --eij-primary-subtle: #24333F; /* charcoal with a blue lean, for active/selected */ --eij-primary-border: #38505F; --eij-ring: rgba(76, 154, 245, 0.42); /* Navy stays only for the always-dark brand surfaces (the hero, the employer band). A neutral charcoal-navy, not a vivid blue. */ --eij-navy: #141A1F; --eij-navy-700: #1E2830; --eij-navy-soft: #33424B; --eij-accent: #F79A3C; --eij-accent-hover: #F5851F; --eij-accent-on: #24170A; /* dark text on orange, still readable */ --eij-accent-ink: #F7B173; /* light orange TEXT on a dark orange panel */ --eij-accent-subtle: #2A1D0E; --eij-accent-border: #4A3418; /* NEUTRALS: a CHARCOAL ramp, not a navy-blue one -- the dark theme was reading as "all blue" because every surface was blue-tinted. Blue now appears only on the things that are actually interactive (buttons, links, the active menu). #36454F and #5B5E66 are the greys asked for. */ --eij-ink: #E9EDEF; --eij-ink-soft: #BAC3C9; --eij-muted: #8C959B; --eij-faint: #5B5E66; --eij-border: #36454F; --eij-border-strong: #4B5A63; --eij-bg: #191F23; /* the page -- dark charcoal, neutral */ --eij-surface: #232B30; /* cards */ --eij-surface-2: #2B343A; /* insets, table headers */ --eij-chrome: #171D21; /* navbar + sidebar: a touch darker than cards */ --eij-navbar-bg: rgba(23, 29, 33, 0.85); --eij-success: #37C24A; --eij-success-subtle: #10261A; --eij-success-border: #22492E; --eij-brand-green: #3ACB4D; --eij-warning: #F0A93A; --eij-warning-subtle: #2A2010; --eij-warning-border: #4A3818; --eij-danger: #F76F6F; --eij-danger-subtle: #2A1414; --eij-danger-border: #552A2A; --eij-info: #4C9AF5; --eij-info-subtle: #24333F; --eij-info-border: #38505F; /* Shadows barely register on dark, so they are deepened to keep cards lifted. */ --eij-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30); --eij-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35); --eij-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --eij-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.62); /* ---- Bootstrap bridges for dark ---- */ --bs-primary-rgb: 76, 154, 245; --bs-link-color-rgb: 76, 154, 245; --bs-body-color: var(--eij-ink); --bs-body-bg: var(--eij-bg); --bs-border-color: var(--eij-border); --bs-emphasis-color: var(--eij-ink); --bs-secondary-color: var(--eij-muted); --bs-secondary-bg: var(--eij-surface-2); --bs-tertiary-bg: var(--eij-surface-2); --bs-success-rgb: 55, 194, 74; --bs-danger-rgb: 247, 111, 111; --bs-warning-rgb: 240, 169, 58; --bs-info-rgb: 76, 154, 245; /* Bootstrap components that default to a white surface -- the mobile menu drawer, modals, dropdowns, cards -- pointed at our dark surface so nothing stays a white box on the dark theme. */ --bs-offcanvas-bg: var(--eij-surface); --bs-offcanvas-color: var(--eij-ink); --bs-modal-bg: var(--eij-surface); --bs-modal-color: var(--eij-ink); --bs-dropdown-bg: var(--eij-surface); --bs-dropdown-link-color: var(--eij-ink-soft); --bs-card-bg: var(--eij-surface); --bs-card-color: var(--eij-ink); } /* ========================================================================== 1. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--bs-font-sans-serif); background-color: var(--eij-bg); color: var(--eij-ink); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* A fixed rem scale, not a fluid clamp() one. Product screens are read at a consistent size, and a heading that shrinks because it happens to sit in a narrow column looks broken rather than responsive. The LANDING PAGE is the exception -- see .eij-display further down. */ h1, .h1 { font-size: 1.75rem; } h2, .h2 { font-size: 1.375rem; } h3, .h3 { font-size: 1.125rem; } h4, .h4 { font-size: 1rem; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--eij-ink); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; /* Evens out the line lengths of a wrapped heading instead of leaving one lonely word on the last line. */ text-wrap: balance; } p { text-wrap: pretty; /* stops single-word orphans at the end of a paragraph */ } .text-muted { color: var(--eij-muted) !important; } /* Prose must not run wider than the eye can comfortably track back from. */ .eij-prose { max-width: 68ch; } a { text-decoration-thickness: 1px; text-underline-offset: 2px; } /* ========================================================================== 2. Accessibility -------------------------------------------------------------------------- Never remove the focus ring. A keyboard user without one is a user who has no idea where they are on the page. ========================================================================== */ :focus-visible { outline: 2px solid var(--eij-primary); outline-offset: 2px; border-radius: 2px; } .btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 3px var(--eij-ring); border-color: var(--eij-primary); outline: none; } .form-check-input:checked { background-color: var(--eij-primary); border-color: var(--eij-primary); } /* ========================================================================== 3. Buttons ========================================================================== */ .btn { --bs-btn-padding-y: 0.5625rem; --bs-btn-padding-x: 1.125rem; --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--eij-radius-sm); /* 44px is the smallest target a finger reliably hits. Below that, people mis-tap, and on a form that means they mis-tap "Delete". */ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; line-height: 1.3; transition: background-color var(--eij-fast) var(--eij-ease), border-color var(--eij-fast) var(--eij-ease), transform var(--eij-fast) var(--eij-ease), box-shadow var(--eij-fast) var(--eij-ease); } /* A press should feel like a press. 1px is enough -- any more and it reads as a bug rather than a button. */ .btn:active { transform: translateY(1px); } .btn-lg { --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1rem; min-height: 52px; } .btn-sm { --bs-btn-padding-y: 0.375rem; --bs-btn-padding-x: 0.75rem; --bs-btn-font-size: 0.875rem; min-height: 36px; } /* ...but 36px is a MOUSE size, not a finger size. A pointer that is "coarse" is a fingertip -- a touchscreen, in other words. On those, .btn-sm goes back up to the 44px floor the rest of the system keeps. This is not hypothetical tidiness: .btn-sm is what the page-header action is built from, so on a phone it is the *main* button on several screens -- "Browse jobs" on the candidate dashboard, "Post a job" for an employer. Those were the smallest targets in the product, which is exactly backwards. Keyed to the input device rather than the screen width on purpose: a small window on a laptop still has a mouse driving it and does not need 44px, while a large tablet has fingers and does. */ @media (pointer: coarse) { .btn-sm { min-height: 44px; } } .btn-primary { --bs-btn-bg: var(--eij-primary); --bs-btn-border-color: var(--eij-primary); --bs-btn-hover-bg: var(--eij-primary-hover); --bs-btn-hover-border-color: var(--eij-primary-hover); --bs-btn-active-bg: var(--eij-primary-active); --bs-btn-active-border-color: var(--eij-primary-active); --bs-btn-disabled-bg: var(--eij-primary); --bs-btn-disabled-border-color: var(--eij-primary); } /* THE ACCENT BUTTON. Reserved for the single most important action on a page -- realistically, the one in the hero. Navy text on orange, never white: white on this orange is 2.7:1 and genuinely hard to read. */ .btn-accent { --bs-btn-color: var(--eij-accent-on); --bs-btn-bg: var(--eij-accent); --bs-btn-border-color: var(--eij-accent); --bs-btn-hover-color: var(--eij-accent-on); --bs-btn-hover-bg: var(--eij-accent-hover); --bs-btn-hover-border-color: var(--eij-accent-hover); --bs-btn-active-color: var(--eij-accent-on); --bs-btn-active-bg: var(--eij-accent-hover); font-weight: 700; } .btn-outline-primary { --bs-btn-color: var(--eij-primary); --bs-btn-border-color: var(--eij-primary-border); --bs-btn-hover-bg: var(--eij-primary); --bs-btn-hover-border-color: var(--eij-primary); --bs-btn-active-bg: var(--eij-primary-active); } /* The quiet button: secondary actions, "Cancel", toolbar controls. */ .btn-soft { --bs-btn-color: var(--eij-ink); --bs-btn-bg: var(--eij-surface); --bs-btn-border-color: var(--eij-border-strong); --bs-btn-hover-bg: var(--eij-surface-2); --bs-btn-hover-border-color: var(--eij-border-strong); --bs-btn-hover-color: var(--eij-ink); --bs-btn-active-bg: var(--eij-bg); } /* Sits on a dark surface (the hero, the footer). */ .btn-on-dark { --bs-btn-color: #FFFFFF; --bs-btn-bg: rgba(255, 255, 255, 0.1); --bs-btn-border-color: rgba(255, 255, 255, 0.35); --bs-btn-hover-bg: rgba(255, 255, 255, 0.18); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.6); --bs-btn-hover-color: #FFFFFF; } .btn-success { --bs-btn-bg: var(--eij-success); --bs-btn-border-color: var(--eij-success); --bs-btn-hover-bg: #126933; --bs-btn-hover-border-color: #126933; } /* * The destructive buttons -- close a job, reject an application, delete an * account. * * These have to be spelled out rather than left to --bs-danger, because * Bootstrap COMPILES its button variants with literal hex codes: * * .btn-outline-danger { --bs-btn-color: #dc3545; ... } * * So overriding --bs-danger in :root does nothing for them. They quietly keep * Bootstrap's own red -- a different red from ours, and one that scores 4.22:1 * on our page background, which fails. Every "Close job" button on the platform * was that red until it was measured. */ .btn-danger { --bs-btn-bg: var(--eij-danger); --bs-btn-border-color: var(--eij-danger); --bs-btn-hover-bg: #A81919; --bs-btn-hover-border-color: #A81919; --bs-btn-active-bg: #A81919; --bs-btn-active-border-color: #A81919; --bs-btn-disabled-bg: var(--eij-danger); --bs-btn-disabled-border-color: var(--eij-danger); } .btn-outline-danger { --bs-btn-color: var(--eij-danger); --bs-btn-border-color: var(--eij-danger-border); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--eij-danger); --bs-btn-hover-border-color: var(--eij-danger); --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #A81919; --bs-btn-active-border-color: #A81919; } /* A disabled button must LOOK unusable, not merely be unusable. */ .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ========================================================================== 4. Cards & surfaces ========================================================================== */ .card { /* A clearly-visible border (border-STRONG, not the hairline) so a white card reads as a distinct object even on a light page -- the "I can't see the card edges" report. Paired with the darker page background and a soft shadow. */ --bs-card-border-color: var(--eij-border-strong); --bs-card-border-radius: var(--eij-radius); --bs-card-bg: var(--eij-surface); box-shadow: var(--eij-shadow-sm); } .card-header { background-color: var(--eij-surface); border-bottom: 1px solid var(--eij-border); font-weight: 600; padding: var(--eij-space-4) var(--eij-space-5); } .card-body { padding: var(--eij-space-5); } /* No border, a wide soft shadow. For things that should feel like they float: the login card, a modal-ish panel. */ .eij-card-elevated { border: 0; box-shadow: var(--eij-shadow-lg); border-radius: var(--eij-radius-lg); background: var(--eij-surface); } /* A card you can click. The lift is small on purpose -- a card that leaps up under the cursor is distracting when there are twenty of them on a page. */ .eij-card-link { transition: border-color var(--eij-base) var(--eij-ease), box-shadow var(--eij-base) var(--eij-ease), transform var(--eij-base) var(--eij-ease); } .eij-card-link:hover { border-color: var(--eij-primary-border); box-shadow: var(--eij-shadow-md); transform: translateY(-2px); } /* Lets the whole card be one big click target while keeping ONE link in the markup -- so a screen reader announces one link, not eight. */ .eij-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ========================================================================== 5. Forms -------------------------------------------------------------------------- Visible labels, always. A placeholder vanishes the moment somebody types, leaving them staring at a box with no idea what it was for. ========================================================================== */ .form-label { font-weight: 600; color: var(--eij-ink); margin-bottom: 0.375rem; font-size: 0.9375rem; } .form-control, .form-select { border-color: var(--eij-border-strong); border-radius: var(--eij-radius-sm); padding: 0.625rem 0.875rem; /* 16px exactly. Any smaller and iOS Safari zooms the whole page in when the field is tapped, which is horrible on a phone. */ font-size: 1rem; min-height: 44px; color: var(--eij-ink); background-color: var(--eij-surface); transition: border-color var(--eij-fast) var(--eij-ease), box-shadow var(--eij-fast) var(--eij-ease); } /* A placeholder is TEXT. People read it, and on a search box it is often the only instruction there is. The usual pale grey (#94A3B8) scores 2.6:1, which is unreadable in daylight on a phone -- so placeholders get the same properly contrasted colour as any other secondary text. */ .form-control::placeholder { color: var(--eij-muted); opacity: 1; /* Firefox dims placeholders by default; undo that. */ } .form-label .req { color: var(--eij-danger); margin-left: 2px; } /* An error belongs directly under the field it is about, never only in a summary at the top of the page. */ .invalid-feedback { font-size: 0.875rem; font-weight: 500; } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--eij-danger); } .form-text { color: var(--eij-muted); font-size: 0.875rem; } .input-group-text { background: var(--eij-surface-2); border-color: var(--eij-border-strong); color: var(--eij-muted); } /* ========================================================================== 6. The role picker (registration) -------------------------------------------------------------------------- The single most consequential choice on the sign-up form, so it gets the most visual weight: big tappable cards, not a cramped dropdown. ========================================================================== */ .eij-role-option { display: block; cursor: pointer; height: 100%; } .eij-role-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .eij-role-card { border: 1.5px solid var(--eij-border-strong); border-radius: var(--eij-radius); padding: var(--eij-space-4); height: 100%; background: var(--eij-surface); transition: border-color var(--eij-fast) var(--eij-ease), background-color var(--eij-fast) var(--eij-ease), box-shadow var(--eij-fast) var(--eij-ease); } .eij-role-option:hover .eij-role-card { border-color: var(--eij-primary-border); box-shadow: var(--eij-shadow-sm); } /* Selected: border + tint + a tick. Three signals, not one -- somebody who cannot distinguish the colours still sees the tick and the bold label. */ .eij-role-option input[type="radio"]:checked + .eij-role-card { border-color: var(--eij-primary); background-color: var(--eij-primary-subtle); } .eij-role-option input[type="radio"]:focus-visible + .eij-role-card { box-shadow: 0 0 0 3px var(--eij-ring); } .eij-role-card .eij-role-check { visibility: hidden; color: var(--eij-primary); } .eij-role-option input[type="radio"]:checked + .eij-role-card .eij-role-check { visibility: visible; } /* ========================================================================== 7. The shell: top bar, sidebar ========================================================================== */ .eij-navbar { background: var(--eij-navbar-bg); /* The bar stays legible while content scrolls under it. This is the one place a blur earns its keep -- it is not decoration, it is what keeps the navigation readable over whatever happens to be beneath it. */ backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--eij-border); z-index: var(--eij-z-sticky); } .eij-logo { max-width: 100%; height: auto; display: block; /* The logo artwork has a white background baked into the PNG, which shows as a hard white rectangle on any non-white bar (the dark theme especially). Sitting it on a clean white rounded chip makes that white read as intentional -- a logo badge -- instead of a leftover box. On a white/light bar it is invisible. (For the real fix, a transparent-background or SVG logo would remove the need for this entirely.) */ background: #FFFFFF; border-radius: 8px; padding: 4px 9px; } /* The public site's top-level links. */ .eij-navbar .nav-link { color: var(--eij-ink-soft); font-weight: 600; border-radius: var(--eij-radius-sm); padding: 0.5rem 0.75rem; transition: color var(--eij-fast) var(--eij-ease), background-color var(--eij-fast) var(--eij-ease); } .eij-navbar .nav-link:hover { color: var(--eij-primary); background: var(--eij-primary-subtle); } /* Theme switch: show the moon in light mode, the sun in dark. Driven purely by the data-theme attribute so the icon can never fall out of sync. */ .eij-theme-toggle { display: inline-flex; align-items: center; justify-content: center; } .eij-theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .eij-theme-toggle .ic-moon { display: none; } :root[data-theme="dark"] .eij-theme-toggle .ic-sun { display: inline; } .eij-sidebar { background: var(--eij-chrome); border-right: 1px solid var(--eij-border); min-height: 100%; padding: var(--eij-space-4) var(--eij-space-3); } .eij-sidebar .nav-link { color: var(--eij-ink-soft); border-radius: var(--eij-radius-sm); padding: 0.625rem 0.75rem; font-weight: 600; font-size: 0.9375rem; display: flex; align-items: center; gap: 0.625rem; min-height: 44px; position: relative; transition: background-color var(--eij-fast) var(--eij-ease), color var(--eij-fast) var(--eij-ease); } .eij-sidebar .nav-link:hover { background: var(--eij-surface-2); color: var(--eij-ink); } /* The current page has to be unmistakable. Tint + colour + weight, and a solid marker down the left -- three signals rather than a colour swap alone. */ .eij-sidebar .nav-link.active { background: var(--eij-primary-subtle); color: var(--eij-primary); font-weight: 700; } .eij-sidebar .nav-link.active::before { content: ""; position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%); width: 3px; height: 1.25rem; border-radius: 0 3px 3px 0; background: var(--eij-primary); } /* The section label above a menu ("Candidate", "Agency HR"). It uses --eij-muted, NOT --eij-faint. This is small, uppercase and tracked -- which is to say it is already the hardest text on the page to read -- so making it pale as well takes it to 2.6:1, well under the 4.5:1 minimum. Small text is where a "subtle" grey does the most damage, not the least. */ .eij-sidebar-heading { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--eij-muted); padding: 0 0.75rem; margin-bottom: var(--eij-space-2); } /* The little count that says "3 people are waiting in this queue". */ .eij-sidebar .badge { margin-left: auto; font-weight: 700; font-size: 0.6875rem; } /* ========================================================================== 8. Badges, chips, tags ========================================================================== */ .eij-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: var(--eij-radius-pill); border: 1px solid transparent; white-space: nowrap; } .eij-badge-pending { background: var(--eij-warning-subtle); color: var(--eij-warning); border-color: var(--eij-warning-border); } .eij-badge-active { background: var(--eij-success-subtle); color: var(--eij-success); border-color: var(--eij-success-border); } .eij-badge-suspended{ background: var(--eij-danger-subtle); color: var(--eij-danger); border-color: var(--eij-danger-border); } .eij-badge-info { background: var(--eij-info-subtle); color: var(--eij-info); border-color: var(--eij-info-border); } .eij-badge-neutral { background: var(--eij-surface-2); color: var(--eij-ink-soft);border-color: var(--eij-border); } /* The accent badge. Dark orange text on pale orange -- 6.1:1, readable. */ .eij-badge-accent { background: var(--eij-accent-subtle); color: var(--eij-accent-ink); border-color: var(--eij-accent-border); } /* A neutral fact about a job: "Full time", "2-5 years", "Mumbai". */ .eij-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; font-weight: 500; color: var(--eij-ink-soft); background: var(--eij-surface-2); border: 1px solid var(--eij-border); border-radius: var(--eij-radius-sm); padding: 0.25rem 0.5rem; white-space: nowrap; } /* A one-click phrase (salary notes, quick picks). */ .eij-chip { display: inline-flex; align-items: center; background: var(--eij-surface); border: 1px solid var(--eij-border-strong); border-radius: var(--eij-radius-pill); padding: 0.25rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--eij-ink-soft); cursor: pointer; transition: background-color var(--eij-fast) var(--eij-ease), color var(--eij-fast) var(--eij-ease), border-color var(--eij-fast) var(--eij-ease); /* A chip is a shortcut sitting right beside the field it fills, so it is allowed to be smaller than the 44px finger minimum. */ min-height: 32px; } .eij-chip:hover, .eij-chip:focus-visible { background: var(--eij-primary-subtle); border-color: var(--eij-primary); color: var(--eij-primary); } /* ========================================================================== 8b. The status timeline () -------------------------------------------------------------------------- ONE picture of "where is this application up to", shared by the candidate, the employer and HR so all three read progress in the same visual language. See resources/views/components/status-timeline.blade.php for the reasoning. LAYOUT: vertical on phones (the default below), horizontal from the "md" breakpoint up. Candidates in this market are overwhelmingly on phones, so the phone layout is the one written first and the desktop one is the override. THE COLOUR STORY (matches the status badges on purpose): filled brand blue = a milestone reached / passed blue ring, pale = the milestone we are on right now grey outline = still ahead red = the end-cap, when the application is closed Colour is never the only signal: a reached node shows a tick, the current node is larger and bolder, and every node keeps its label. ========================================================================== */ .eij-timeline { display: flex; flex-direction: column; /* phone: a vertical rail */ } .eij-timeline-step { display: flex; gap: 0.875rem; position: relative; } /* The node + its connector, kept together in one column so the line always lines up under the circle whatever the label length. */ .eij-timeline-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .eij-timeline-node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--eij-border-strong); background: var(--eij-surface); color: var(--eij-faint); flex-shrink: 0; transition: background var(--eij-base) var(--eij-ease), border-color var(--eij-base) var(--eij-ease); } .eij-timeline-line { flex: 1 1 auto; width: 2px; min-height: 16px; background: var(--eij-border-strong); margin: 2px 0; border-radius: 2px; } .eij-timeline-line.is-filled { background: var(--eij-primary); } /* No trailing line hanging off the last node (be it the final milestone or the closed end-cap). */ .eij-timeline > .eij-timeline-step:last-child .eij-timeline-line { display: none; } .eij-timeline-body { padding-top: 4px; /* nudge the label to the node's centre line */ padding-bottom: 1.25rem; /* the gap between one step and the next */ min-width: 0; } .eij-timeline > .eij-timeline-step:last-child .eij-timeline-body { padding-bottom: 0; } .eij-timeline-label { display: block; font-weight: 600; color: var(--eij-ink-soft); line-height: 1.2; } .eij-timeline-desc { display: block; font-size: 0.8125rem; color: var(--eij-muted); margin-top: 0.125rem; } /* ---- The three states ---- */ .eij-timeline-step.is-done .eij-timeline-node { background: var(--eij-primary); border-color: var(--eij-primary); color: #FFFFFF; } .eij-timeline-step.is-current .eij-timeline-node { background: var(--eij-primary-subtle); border-color: var(--eij-primary); color: var(--eij-primary); box-shadow: 0 0 0 4px var(--eij-primary-subtle); } .eij-timeline-step.is-current .eij-timeline-label { color: var(--eij-ink); font-weight: 700; } /* upcoming keeps the default grey node set on .eij-timeline-node above */ /* ---- The closed end-cap (rejected / withdrawn) ---- */ .eij-timeline-endcap .eij-timeline-node { background: var(--eij-danger-subtle); border-color: var(--eij-danger-border); color: var(--eij-danger); } .eij-timeline-endcap .eij-timeline-label { color: var(--eij-danger); } /* When the whole line is closed, the milestones themselves read as "never got there" -- dim their labels so the red end-cap is the thing that stands out. */ .eij-timeline-closed .eij-timeline-step:not(.eij-timeline-endcap) .eij-timeline-label { color: var(--eij-muted); font-weight: 600; } /* ---- Compact variant: smaller nodes, no descriptions, tighter rhythm ---- */ .eij-timeline-compact .eij-timeline-node { width: 26px; height: 26px; } .eij-timeline-compact .eij-timeline-body { padding-bottom: 0.75rem; } .eij-timeline-compact .eij-timeline-label { font-size: 0.875rem; } .eij-timeline-compact .eij-timeline-step { gap: 0.625rem; } /* ======================= DESKTOP: go horizontal ======================= */ /* ONLY the FULL timeline goes horizontal, and only when there is room for it (a full-width page). The COMPACT variant lives inside narrow cards (the employer's applicant card, the candidate's offer card), where five labels laid side by side simply do not fit and collide -- so compact stays VERTICAL at every width. That is why every rule below is scoped to :not(.eij-timeline-compact). (Session 18: fixes the overlapping labels reported on the employer applicant card.) */ @media (min-width: 768px) { .eij-timeline:not(.eij-timeline-compact) { flex-direction: row; } .eij-timeline:not(.eij-timeline-compact) .eij-timeline-step { flex: 1 1 0; /* equal-width columns, so connectors line up */ flex-direction: column; align-items: center; text-align: center; gap: 0; min-width: 0; } /* The marker no longer carries the connector down a column; on desktop the connector is drawn ACROSS to the next node as an absolute bar. */ .eij-timeline:not(.eij-timeline-compact) .eij-timeline-marker { flex-direction: row; width: 100%; justify-content: center; } .eij-timeline:not(.eij-timeline-compact) .eij-timeline-line { position: absolute; top: 16px; /* node centre = half of the 34px node */ left: 50%; /* from the centre of THIS node ... */ width: 100%; /* ... to the centre of the next (equal columns) */ height: 2px; min-height: 0; margin: 0; z-index: 0; } .eij-timeline:not(.eij-timeline-compact) .eij-timeline-node { position: relative; z-index: 1; } .eij-timeline:not(.eij-timeline-compact) .eij-timeline-body { padding-top: 0.5rem; padding-bottom: 0; padding-inline: 0.25rem; } /* Give a little breathing room so long labels ("Shortlisted") don't collide. */ .eij-timeline:not(.eij-timeline-compact) .eij-timeline-label { font-size: 0.875rem; } } /* ========================================================================== 9. Tables ========================================================================== */ .table { --bs-table-border-color: var(--eij-border); margin-bottom: 0; } .table > thead th { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eij-muted); background: var(--eij-surface-2); border-bottom: 1px solid var(--eij-border); padding: 0.75rem 1rem; white-space: nowrap; } .table > tbody td { padding: 0.875rem 1rem; vertical-align: middle; border-color: var(--eij-border); } .table > tbody tr:last-child td { border-bottom: 0; } .table-hover > tbody tr:hover > * { background-color: var(--eij-surface-2); } /* A wide table scrolls inside its own box rather than making the entire page slide sideways on a phone. */ .eij-table-scroll { overflow-x: auto; border-radius: var(--eij-radius); } /* Numbers line up in a column only if the digits are all the same width. */ .eij-num { font-variant-numeric: tabular-nums; } /* ========================================================================== 10. Empty states -------------------------------------------------------------------------- Never show a blank screen. Say what is missing, why, and what to do next -- an empty state is the best chance you get to teach somebody the product. ========================================================================== */ .eij-empty { text-align: center; padding: var(--eij-space-7) var(--eij-space-4); color: var(--eij-muted); } .eij-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--eij-radius-lg); background: var(--eij-primary-subtle); color: var(--eij-primary); margin-bottom: var(--eij-space-4); } /* The headline of an empty state ("No applications yet"). It exists because the four panels had each invented their own: Employer used an

, Candidate a

, HR and Admin a

with an inline colour. Same situation, three different sizes -- and the two that used a

gave screen-reader users no heading to jump to. One class, and the markup underneath it is always a real heading. Size is set here, so the heading LEVEL can be chosen to fit the page outline (h2 under a page heading, h3 inside a card) without changing how it looks. */ .eij-empty-title { font-size: 1.125rem; font-weight: 600; color: var(--eij-ink); margin-bottom: var(--eij-space-2); } /* ========================================================================== 11. Alerts / flash messages ========================================================================== */ .alert { border-radius: var(--eij-radius-sm); border-width: 1px; display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.875rem 1rem; font-size: 0.9375rem; } /* Text colours use the semantic tokens so they lighten correctly in dark mode instead of staying a dark ink that would vanish on a dark panel. */ .alert-success { background: var(--eij-success-subtle); border-color: var(--eij-success-border); color: var(--eij-success); } .alert-danger { background: var(--eij-danger-subtle); border-color: var(--eij-danger-border); color: var(--eij-danger); } .alert-warning { background: var(--eij-warning-subtle); border-color: var(--eij-warning-border); color: var(--eij-warning); } .alert-info { background: var(--eij-info-subtle); border-color: var(--eij-info-border); color: var(--eij-info); } /* ========================================================================== 12. Stats -------------------------------------------------------------------------- The number a dashboard exists to show. Big, tabular, and always carrying a label -- a number on its own is a riddle. ========================================================================== */ .eij-stat { background: var(--eij-surface); border: 1px solid var(--eij-border); border-radius: var(--eij-radius); padding: var(--eij-space-5); box-shadow: var(--eij-shadow-xs); } .eij-stat-label { font-size: 0.8125rem; font-weight: 600; color: var(--eij-muted); margin-bottom: 0.375rem; } .eij-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--eij-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .eij-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--eij-radius-sm); background: var(--eij-primary-subtle); color: var(--eij-primary); flex-shrink: 0; } /* ========================================================================== 13. The profile page's section navigator ========================================================================== */ .eij-section-nav { position: sticky; top: 5.5rem; } .eij-section-nav .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--eij-radius-sm); color: var(--eij-muted); font-size: 0.9375rem; font-weight: 600; transition: background-color var(--eij-fast) var(--eij-ease), color var(--eij-fast) var(--eij-ease); } .eij-section-nav .nav-link:hover { background: var(--eij-surface-2); color: var(--eij-ink); } .eij-section-nav .nav-link.active { background: var(--eij-primary-subtle); color: var(--eij-primary); font-weight: 700; } /* Jumping to a section must not tuck its heading up behind the sticky bar. */ .eij-section { scroll-margin-top: 6rem; } .eij-section-done { color: var(--eij-success); } /* ========================================================================== 14. "Choose several of these" tick grid (languages, skills) ========================================================================== */ .eij-tick-card { border: 1px solid var(--eij-border-strong); border-radius: var(--eij-radius-sm); padding: 0.75rem; height: 100%; background: var(--eij-surface); transition: border-color var(--eij-fast) var(--eij-ease), background-color var(--eij-fast) var(--eij-ease); } /* :has() lets the CARD respond to its own checkbox being ticked, with no JavaScript whatsoever. Supported in every current browser. */ .eij-tick-card:has(input[type="checkbox"]:checked) { border-color: var(--eij-primary); background: var(--eij-primary-subtle); } .eij-tick-card:hover { border-color: var(--eij-primary-border); } /* The job-post skills grid: the whole card ticks the skill, not just the small checkbox square (support issue, 2026-07-30) -- the pointer cursor says so before the click does. */ .job-skill-row .eij-tick-card { cursor: pointer; } /* Hide the browser's own built-in clear "x" on a -- see the note in _form.blade.php. Our own button replaces it. */ .eij-no-native-search-clear::-webkit-search-cancel-button, .eij-no-native-search-clear::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .eij-no-native-search-clear::-ms-clear { display: none; } /* ========================================================================== 15. Tom Select (the searchable dropdowns) — match our own form controls ========================================================================== */ .ts-wrapper .ts-control { border-color: var(--eij-border-strong); border-radius: var(--eij-radius-sm); padding: 0.5rem 0.875rem; min-height: 44px; font-size: 1rem; /* Tom Select's own CSS hardcodes a white control/dropdown. Point them at our surface token so the searchable dropdowns follow light AND dark themes instead of sitting as white boxes on a dark form. */ background: var(--eij-surface); color: var(--eij-ink); } .ts-wrapper .ts-control input, .ts-wrapper .ts-control input::placeholder { color: var(--eij-ink); } .ts-dropdown, .ts-dropdown .option { background: var(--eij-surface); color: var(--eij-ink); } .ts-dropdown .option:hover { background: var(--eij-surface-2); } .ts-wrapper.focus .ts-control { border-color: var(--eij-primary); box-shadow: 0 0 0 3px var(--eij-ring); } .ts-wrapper.multi .ts-control > div { background: var(--eij-primary-subtle); color: var(--eij-primary); border-radius: var(--eij-radius-sm); font-weight: 600; } .ts-dropdown { border-color: var(--eij-border-strong); border-radius: var(--eij-radius-sm); box-shadow: var(--eij-shadow-md); z-index: var(--eij-z-dropdown); } .ts-dropdown .active { background: var(--eij-primary-subtle); color: var(--eij-primary); } .ts-dropdown .optgroup-header { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eij-muted); } /* ========================================================================== 16. Dropdown menus ========================================================================== */ .dropdown-menu { /* Own the background/text so the menu follows dark mode instead of staying on Bootstrap's default white. */ background: var(--eij-surface); color: var(--eij-ink); border-color: var(--eij-border); border-radius: var(--eij-radius); box-shadow: var(--eij-shadow-lg); padding: 0.375rem; z-index: var(--eij-z-dropdown); } .dropdown-item { color: var(--eij-ink-soft); border-radius: var(--eij-radius-sm); padding: 0.5rem 0.75rem; font-weight: 500; } .dropdown-item:hover, .dropdown-item:focus { background: var(--eij-surface-2); color: var(--eij-ink); } /* ========================================================================== 17. The public site: hero, search, categories, steps, footer -------------------------------------------------------------------------- This is the one part of the platform that is MARKETING rather than TOOL, so it is allowed to be louder than the panels: a fluid display size, a dark navy hero, the orange accent. ========================================================================== */ /* Fluid, because a marketing headline SHOULD grow on a big screen. Capped at 3.5rem: past that a headline stops being confident and starts shouting. Tracking bottoms out at -0.03em -- any tighter and the letters collide. */ .eij-display { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; } .eij-lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.6; } /* The hero. A navy that deepens into brand blue, with soft blooms of all three logo colours (blue, orange, green) behind the content so it reads as depth, not a flat rectangle. */ .eij-hero { position: relative; background: linear-gradient(165deg, var(--eij-navy) 0%, #0C356B 60%, #0E4A8E 100%); color: #FFFFFF; overflow: hidden; } .eij-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58rem 30rem at 88% -12%, rgba(14, 99, 192, 0.55), transparent 60%), radial-gradient(40rem 24rem at 2% 112%, rgba(245, 133, 31, 0.20), transparent 64%), radial-gradient(34rem 22rem at 60% 120%, rgba(47, 166, 54, 0.16), transparent 66%); pointer-events: none; } .eij-hero > * { position: relative; } .eij-hero h1, .eij-hero h2 { color: #FFFFFF; } /* Light text on a dark background reads thinner than it is, so it needs more room to breathe than the same text would on white. */ .eij-hero p { color: rgba(255, 255, 255, 0.82); line-height: 1.7; } /* The search bar that sits in the hero and overlaps its bottom edge. It is ALWAYS white -- the hero behind it is navy in both light and dark themes, and a white bar reads best there. So its text is a fixed dark, and its native city dropdown is forced to the light scheme (dark text on a light popup) rather than following the page theme -- which is what made it a white box before. */ .eij-searchbar { background: #FFFFFF; color-scheme: light; border-radius: var(--eij-radius-lg); box-shadow: var(--eij-shadow-lg); padding: var(--eij-space-3); } .eij-searchbar .form-control, .eij-searchbar .form-select { border: 0; min-height: 48px; background: transparent; color: #0B1F3A; } .eij-searchbar .form-control::placeholder { color: #5A6880; } .eij-searchbar .form-control:focus, .eij-searchbar .form-select:focus { box-shadow: none; } /* The city picker inside the searchbar is a Tom Select (type-to-search). The bar is always white, so its control is transparent with fixed dark text and its dropdown is white -- in BOTH themes, so it never becomes a dark box in the bar. */ .eij-searchbar .ts-wrapper .ts-control { background: transparent; color: #0B1F3A; border: 0; box-shadow: none; min-height: 48px; padding: 0.5rem 0; } .eij-searchbar .ts-control input, .eij-searchbar .ts-control input::placeholder { color: #0B1F3A; } .eij-searchbar .ts-dropdown, .eij-searchbar .ts-dropdown .option { background: #FFFFFF; color: #0B1F3A; } .eij-searchbar .ts-dropdown .option.active, .eij-searchbar .ts-dropdown .option:hover { background: #E7F0FB; color: #0E63C0; } /* The divider between the two search fields -- vertical on a desktop, gone on a phone where the fields stack. Fixed light grey, since the bar is always white. */ .eij-searchbar-divider { width: 1px; background: #E3E8EF; align-self: stretch; margin: 0.25rem 0; } @media (max-width: 767.98px) { .eij-searchbar-divider { width: auto; height: 1px; margin: 0.25rem 0.5rem; } } /* A job category tile on the landing page. */ .eij-category { display: flex; align-items: center; gap: 0.875rem; padding: var(--eij-space-4); background: var(--eij-surface); border: 1px solid var(--eij-border); border-radius: var(--eij-radius); color: var(--eij-ink); text-decoration: none; font-weight: 600; transition: border-color var(--eij-base) var(--eij-ease), box-shadow var(--eij-base) var(--eij-ease), transform var(--eij-base) var(--eij-ease); } .eij-category:hover { border-color: var(--eij-primary-border); box-shadow: var(--eij-shadow-md); transform: translateY(-2px); color: var(--eij-primary); } .eij-category-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--eij-radius-sm); background: var(--eij-primary-subtle); color: var(--eij-primary); flex-shrink: 0; transition: background-color var(--eij-base) var(--eij-ease); } .eij-category:hover .eij-category-icon { background: var(--eij-accent-subtle); color: var(--eij-accent-ink); } /* The numbered "how it works" steps. Numbers are used here because this genuinely IS a sequence -- the order is the information. */ .eij-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--eij-radius-pill); background: var(--eij-navy); color: #FFFFFF; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* A band of navy for the employer call-to-action, so the page has a second dark anchor and does not just fade out into white. */ .eij-band-navy { background: var(--eij-navy); color: #FFFFFF; } .eij-band-navy h2 { color: #FFFFFF; } .eij-band-navy p { color: rgba(255, 255, 255, 0.82); } .eij-footer { background: var(--eij-navy); color: rgba(255, 255, 255, 0.72); } .eij-footer h3 { color: #FFFFFF; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--eij-space-4); } .eij-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color var(--eij-fast) var(--eij-ease); } .eij-footer a:hover { color: #FFFFFF; text-decoration: underline; } .eij-footer hr { border-color: var(--eij-navy-soft); opacity: 1; } /* ========================================================================== 17b. Spacing utilities Bootstrap does not ship -------------------------------------------------------------------------- Bootstrap's spacing scale stops at 5 (3rem), which is fine inside a panel but too tight for the bands of a landing page -- sections need room to breathe or they read as one continuous wall. These add a 6th step, and it shrinks on phones, where 5rem of white space is just scrolling. ========================================================================== */ .py-6 { padding-top: var(--eij-space-7); padding-bottom: var(--eij-space-7); } .pt-6 { padding-top: var(--eij-space-7); } .pb-6 { padding-bottom: var(--eij-space-7); } .mb-6 { margin-bottom: var(--eij-space-7); } @media (min-width: 992px) { .py-6 { padding-top: 5rem; padding-bottom: 5rem; } .pt-6 { padding-top: 5rem; } .pb-6 { padding-bottom: 5rem; } .mb-6 { margin-bottom: 5rem; } } /* ========================================================================== 18. Motion -------------------------------------------------------------------------- Everything here is an ENHANCEMENT of an already-visible page. Nothing is hidden until JavaScript decides to show it: if the animation never runs -- because JS failed, or the tab was in the background, or a crawler is reading the page -- the content is simply there, which is the only safe way to build a reveal. ========================================================================== */ @keyframes eij-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .eij-rise { animation: eij-rise var(--eij-slow) var(--eij-ease) both; } /* Stagger, for a list whose items should arrive one after another rather than all at once. Used on the hero only -- not on every section of every page, which is the tic that makes a site feel machine-made. */ .eij-rise-1 { animation-delay: 60ms; } .eij-rise-2 { animation-delay: 120ms; } .eij-rise-3 { animation-delay: 180ms; } html { scroll-behavior: smooth; } /* Some people get genuinely motion-sick. If they have asked their operating system for less movement, they get none: everything simply appears. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .eij-card-link:hover, .btn:active { transform: none; } } /* ========================================================================== 17c. Toasts (the AJAX confirmation, public/js/eij-ajax.js) -------------------------------------------------------------------------- When a small action runs in the background there is no page reload, so the green flash bar at the top of the page never appears -- the user would press "Save" and see nothing at all happen. A toast gives that feedback back. Bottom-centre on a phone (thumb-height, out of the way of the content) and bottom-right on a laptop. It never covers the thing you just clicked. ========================================================================== */ .eij-toasts { position: fixed; z-index: var(--eij-z-toast); bottom: 1rem; left: 1rem; right: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; /* The container spans the screen so toasts can centre, but it must not swallow clicks meant for the page underneath it. */ pointer-events: none; } @media (min-width: 576px) { .eij-toasts { left: auto; right: 1.25rem; bottom: 1.25rem; align-items: flex-end; max-width: 24rem; } } .eij-toast { pointer-events: auto; max-width: 100%; padding: 0.75rem 1rem; border-radius: var(--eij-radius-sm); border: 1px solid transparent; font-size: 0.9375rem; font-weight: 500; box-shadow: var(--eij-shadow-lg); /* Starts just below its resting place and invisible; .is-in brings it up. */ opacity: 0; transform: translateY(8px); transition: opacity var(--eij-base) var(--eij-ease), transform var(--eij-base) var(--eij-ease); } .eij-toast.is-in { opacity: 1; transform: none; } .eij-toast-success { background: var(--eij-success-subtle); border-color: var(--eij-success-border); color: var(--eij-success); } .eij-toast-error { background: var(--eij-danger-subtle); border-color: var(--eij-danger-border); color: var(--eij-danger); } /* A row that has just been actioned (an approved account) leaves gently rather than blinking out of existence. */ .eij-fade-out { opacity: 0; transition: opacity 200ms var(--eij-ease); } /* A button mid-request. Still readable, clearly not pressable again. */ .btn.eij-busy { opacity: 0.65; cursor: progress; } /* A list fetching new results. Dimmed just enough to read as "working", not so much that the old results become unreadable -- they are still valid until the new ones arrive. */ .eij-loading { opacity: 0.5; pointer-events: none; transition: opacity var(--eij-fast) var(--eij-ease); } /* ========================================================================== 18b. Mobile safety nets -------------------------------------------------------------------------- Catch the whole CLASS of "it looks bad on my phone" bugs generically, so we are not depending on every single Blade view being hand-tuned. The number one symptom on a phone is the WHOLE PAGE sliding sideways: one long unbreakable string (an email, a pasted URL, a long job title, a payment ID) or one too-wide element pushes the body wider than the screen, and now everything scrolls left-right. These rules stop that at the source. ========================================================================== */ /* Nothing is allowed to make the page itself scroll sideways. `clip` (not `hidden`) is used so it does NOT create a scroll container that would break `position: sticky` on the navbar. */ html, body { max-width: 100%; overflow-x: clip; } /* A long, unbroken word (email address, URL, hashed id, "reference number") must wrap onto the next line instead of forcing the column wider than the phone. This is the single most common cause of a sideways-scrolling page. */ body { overflow-wrap: break-word; word-wrap: break-word; } /* Media never overflows its column. */ img, svg, video, canvas, iframe { max-width: 100%; height: auto; } /* Preformatted blocks (the occasional code / log snippet) scroll inside their own box rather than stretching the page. */ pre { max-width: 100%; overflow-x: auto; } /* Phone-only tightening. Panels use a lot of `d-flex justify-content-between` headers -- a title on the left, an action on the right. On a wide screen that is perfect; below 576px the two halves fight for the same few hundred pixels and collide. Letting those flex rows wrap turns a collision into a clean two-line stack, with no change to the desktop layout at all. Scoped to a small-screen media query AND to `.eij-wrap-sm` so it never surprises a row that genuinely must stay on one line -- add the class where you want the behaviour, and card/page headers get it by default below. */ @media (max-width: 575.98px) { /* Card headers and page-header action rows: wrap instead of overflow. */ .card-header.d-flex, .eij-wrap-sm { flex-wrap: wrap; gap: 0.5rem; } /* Cards sit edge-to-edge with a little less inner padding on a phone, so the actual content gets the width instead of the margins. */ .card-body { padding: var(--eij-space-4); } /* A big dashboard number can be a touch smaller on a phone; it is still the biggest thing in its card. */ .eij-stat-value { font-size: 1.5rem; } /* The landing-page hero search bar stacks its fields; give them room. */ .eij-searchbar .btn { width: 100%; } } /* ========================================================================== 19. Print -------------------------------------------------------------------------- Invoices and offer letters get printed. Do not make people print a sidebar. ========================================================================== */ @media print { .eij-navbar, .eij-sidebar, .offcanvas, .eij-footer, .btn { display: none !important; } body { background: #FFFFFF; } .card { border: 1px solid #999; box-shadow: none; } }