/* ── CareerBank.co · Global Stylesheet ─────────────────────────────────────── */ /* Fonts — loaded via in each page's */ /* GFS Didot — self-hosted, no Google Fonts dependency */ @font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url('GFSDidot-Regular.woff2') format('woff2'); } /* ── Emoji fix: patch "Arial" so emoji code-points resolve to the system emoji font instead of Arial's notdef (question-mark) box. The global * { font-family: Arial !important } stays in place — for regular text the browser still picks real Arial; for any character whose code-point falls inside these unicode-range blocks it transparently switches to the system emoji font. Works on Windows (Segoe UI Emoji), macOS/iOS (Apple Color Emoji) and Android (Noto Color Emoji). ── */ @font-face { font-family: 'Arial'; src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Noto Color Emoji'), local('Segoe UI Symbol'); unicode-range: /* Common symbol / trademark / copyright */ U+00A9, U+00AE, U+2122, U+2139, /* Arrows (←↑→↓ and many emoji arrow variants) */ U+2190-21FF, /* Misc Technical — watches, hourglasses, media buttons */ U+2300-23FF, /* Enclosed Alphanumerics */ U+2460-24FF, /* Geometric shapes · Misc Symbols · Dingbats */ U+25A0-27BF, /* Supplemental Arrows-B */ U+2900-297F, /* Misc Symbols and Arrows (⬅➡⬆⬇★☆♥ etc.) */ U+2B00-2BFF, /* Variation Selectors — critical for emoji presentation (U+FE0F) */ U+FE00-FE0F, /* Mahjong · Playing card joker */ U+1F004, U+1F0CF, /* Enclosed Alphanumerics Supplement + CJK enclosed months */ U+1F100-1F2FF, /* Main emoji block: faces, nature, food, activities, travel, objects */ U+1F300-1F64F, /* Transport & Map Symbols (🚀✈️🗺️) */ U+1F680-1F6FF, /* Alchemical · Geometric Extended · Supplemental Arrows-C */ U+1F700-1F8FF, /* Supplemental Symbols & Pictographs (🧠🤝🔖💡) */ U+1F900-1F9FF, /* Chess · Sports · newer emoji */ U+1FA00-1FAFF, /* Tags (used in flag sequences) */ U+E0020-E007F; } /* ── Design tokens ───────────────────────────────────────────────────────────── */ :root { --brand: #18277C; /* ZUS Coffee royal blue */ --brand-2: #3D4FC2; /* ZUS lighter blue */ --brand-grad: linear-gradient(135deg, #101A5C 0%, #18277C 55%, #3D4FC2 100%); --gold: #f59e0b; --gold-light: #fef3c7; --bg: #f6f5fb; --surface: #ffffff; --surface-2: #f6f5fb; --panel: #ffffff; --border: #ececf3; --ink: #0c0d1a; --ink-2: #2a2b3d; --muted: #6b6c80; /* Aliases so var(--text-2) / var(--text-3) work in inline styles */ --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--muted); --teal: #03cfd1; /* JO1NEdu accent */ --pro-blue: #27aae2; /* JO1NPro accent */ --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(13,12,41,.04), 0 6px 24px rgba(13,12,41,.07); --shadow-lg: 0 2px 6px rgba(13,12,41,.05), 0 24px 64px rgba(13,12,41,.14); } [data-theme="dark"] { --bg: #0f0e17; --surface: #1a1829; --surface-2: #181623; --panel: #1e1c2e; --border: #2d2b45; --ink: #f0eeff; --ink-2: #c4bef5; --muted: #7b75a8; /* Re-alias so dark values cascade through */ --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--muted); } /* ── Thin overlay scrollbar ────────────────────────────────────────────────── Keeps full-bleed hero/nav flush to the viewport edge; on mobile the browser already uses overlay scrollbars so this only affects desktop. ────────────────────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.28); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.50); } /* ── Reset ───────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; /* prevent horizontal scroll on every page */ max-width: 100%; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 16px; transition: background-color 0.65s ease, color 0.5s ease; overflow-x: hidden; max-width: 100%; padding-top: 68px; /* compensate for fixed nav */ } /* ── Smooth theme transitions ───────────────────────────────────────────────── All rules here are gated by .theme-changing, which setTheme() adds to for ~850 ms during an explicit toggle. This ensures transitions ONLY fire when the user clicks the toggle — never on page load (avoids flash on first paint). ────────────────────────────────────────────────────────────────────────────── */ html.theme-changing .nav { transition: background-color 0.65s ease, border-color 0.55s ease, box-shadow 0.55s ease; } html.theme-changing .nav__brand, html.theme-changing .nav__link, html.theme-changing .nav__dd-col-title, html.theme-changing .nav__dropdown a, html.theme-changing .nav__mobile a, html.theme-changing .nav__mobile .mob-section, html.theme-changing .nav__theme-btn { transition: color 0.5s ease, border-color 0.45s ease; } html.theme-changing .nav__dropdown { transition: background-color 0.6s ease, border-color 0.5s ease, box-shadow 0.55s ease; } html.theme-changing .nav__mobile { transition: background-color 0.65s ease, border-color 0.5s ease; } html.theme-changing .nav__ham span { transition: background-color 0.45s ease; } html.theme-changing .nav__theme-btn { transition: color 0.45s ease, border-color 0.4s ease; } html.theme-changing .card { transition: background-color 0.6s ease, border-color 0.5s ease, box-shadow 0.5s ease; } html.theme-changing .badge { transition: background-color 0.5s ease, color 0.45s ease; } html.theme-changing .btn { transition: background-color 0.5s ease, color 0.45s ease, border-color 0.4s ease; } html.theme-changing h1, html.theme-changing h2, html.theme-changing h3, html.theme-changing h4, html.theme-changing h5, html.theme-changing p, html.theme-changing .muted, html.theme-changing small { transition: color 0.5s ease; } html.theme-changing .page-hero { transition: background 0.65s ease; } html.theme-changing section, html.theme-changing main, html.theme-changing .panel, html.theme-changing .section-bg { transition: background-color 0.65s ease; } html.theme-changing hr, html.theme-changing [class*="border"], html.theme-changing .divider { transition: border-color 0.5s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; } /* ── Typography ──────────────────────────────────────────────────────────────── */ h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); } h3 { font-size: 1.25rem; } p { color: var(--ink-2); } ::selection { background: rgba(61,79,194,.22); } [data-theme="dark"] ::selection { background: rgba(61,79,194,.45); } /* ── Container ───────────────────────────────────────────────────────────────── */ .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .container--wide { max-width: 1320px; margin: 0 auto; padding: 0 24px; } /* ── Nav — Rolls-Royce luxury style ─────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--brand); border-bottom: 1px solid rgba(255,255,255,0.10); } /* Dark heroes bleed under the fixed nav */ .hero-full { margin-top: -68px; padding-top: calc(100px + 68px) !important; } .listings-hero { margin-top: -68px; padding-top: calc(clamp(80px,10vw,120px) + 68px) !important; } .page-hero { margin-top: -68px; padding-top: calc(64px + 68px) !important; } .nav__inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; gap: 0; height: 68px; } /* ── Logo ── */ .nav__brand { display: flex; align-items: center; gap: 10px; font-family: 'GFS Didot', Didot, Georgia, serif; font-weight: 400; font-size: 20px; letter-spacing: 0; text-transform: none; text-decoration: none; color: rgba(255,255,255,0.90); flex-shrink: 0; } .nav__brand-mark { width: 28px; height: 28px; background: url('logo.jpg') center / cover no-repeat, var(--brand-grad); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0; /* hide the placeholder "C"; logo image shows instead */ overflow: hidden; } .nav__brand sup { font-size: 8px; opacity: .4; vertical-align: super; } /* ── Desktop links (centred) ── */ .nav__links { display: flex; align-items: center; gap: 0; list-style: none; flex: 1; justify-content: center; } .nav__item { position: relative; } .nav__link { display: flex; align-items: center; gap: 6px; padding: 10px 22px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); cursor: pointer; background: transparent; border-radius: 0; white-space: nowrap; position: relative; transition: color .22s; } /* Sliding underline — the RR signature hover */ .nav__link::after { content: ''; position: absolute; bottom: 6px; left: 22px; right: 22px; height: 1px; background: rgba(255,255,255,0.85); transform: scaleX(0); transform-origin: left center; transition: transform .32s cubic-bezier(.22,1,.36,1); } .nav__link:hover, .nav__link--active, .nav__link.active { background: transparent !important; color: rgba(255,255,255,0.95) !important; } .nav__link:hover::after, .nav__link--active::after, .nav__link.active::after { transform: scaleX(1); } .nav__link svg { width: 8px; height: 8px; opacity: .35; transition: transform .3s, opacity .22s; } .nav__item:hover > .nav__link, .nav__item.nav__item--dd-open > .nav__link { color: rgba(255,255,255,0.95); } .nav__item:hover > .nav__link::after, .nav__item.nav__item--dd-open > .nav__link::after { transform: scaleX(1); } .nav__item:hover > .nav__link svg, .nav__item.nav__item--dd-open > .nav__link svg { transform: rotate(180deg); opacity: .65; } /* ── Mega dropdown — full-width dark panel ── */ .nav__dropdown { position: fixed; top: 68px; left: 0; right: 0; background: #080808; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); border-radius: 0; box-shadow: 0 24px 64px rgba(0,0,0,.9); padding: 0; min-width: unset; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .24s ease, transform .24s ease; z-index: 999; } /* Dropdown open state — controlled by JS (.nav__item--dd-open) so the cursor can travel from the nav link down into the fixed-position panel without the hover breaking. :focus-within kept as keyboard fallback. */ .nav__item.nav__item--dd-open .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; pointer-events: all; transform: translateY(0); } /* Columns inside mega dropdown */ .nav__dd-inner { max-width: 1440px; margin: 0 auto; padding: 36px 48px; display: flex; gap: 72px; } .nav__dd-col { min-width: 160px; } .nav__dd-col-title { font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.22); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); } .nav__dropdown a { display: flex; align-items: center; gap: 11px; padding: 10px 0; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.48); border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color .2s, padding-left .2s; } .nav__dropdown a:last-child { border-bottom: none; } .nav__dropdown a:hover { background: transparent; color: rgba(255,255,255,0.95); padding-left: 5px; } .nav__dropdown a .dd-icon { flex-shrink: 0; opacity: .65; display: inline-flex; align-items: center; } .nav__dropdown a .dd-icon svg { width: 14px; height: 14px; } .nav__dropdown .dd-badge { margin-left: auto; font-size: 8px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.6); border-radius: 0; padding: 3px 8px; } .nav__dropdown .dd-divider { display: none; } /* ── Right side ── */ .nav__right { display: flex; align-items: center; gap: 14px; margin-left: auto; } .nav__theme-btn { width: 30px; height: 30px; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.45); transition: border-color .2s, color .2s; } .nav__theme-btn:hover { background: transparent; border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.9); } /* Override primary btn inside nav — RR-style square outlined CTA */ .nav__right .btn--primary { background: transparent; color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.24); border-radius: 0; font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 18px; box-shadow: none; transform: none; } .nav__right .btn--primary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.55); color: #fff; box-shadow: none; transform: none; opacity: 1; } /* ── Hamburger — 3 thin lines, no box ── */ .nav__ham { display: none; flex-direction: column; gap: 6px; width: 36px; height: 36px; align-items: center; justify-content: center; background: none; border: none; border-radius: 0; cursor: pointer; padding: 0; } .nav__ham span { display: block; width: 22px; height: 1px; background: rgba(255,255,255,0.65); border-radius: 0; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease, width .3s ease; transform-origin: center; } .nav__ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; } .nav__ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile nav — dark, luxe ── */ .nav__mobile { display: flex; flex-direction: column; background: #000; border-top: 1px solid rgba(255,255,255,0.07); padding: 0 24px; gap: 0; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1), padding .3s ease; } .nav__mobile.open { max-height: 900px; opacity: 1; pointer-events: auto; transform: translateY(0); padding: 16px 24px 24px; } /* Stagger fade-in on open */ @keyframes navItemIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .nav__mobile.open a, .nav__mobile.open .mob-section { animation: navItemIn .22s ease both; } .nav__mobile.open > *:nth-child(1) { animation-delay: .04s; } .nav__mobile.open > *:nth-child(2) { animation-delay: .07s; } .nav__mobile.open > *:nth-child(3) { animation-delay: .10s; } .nav__mobile.open > *:nth-child(4) { animation-delay: .13s; } .nav__mobile.open > *:nth-child(5) { animation-delay: .16s; } .nav__mobile.open > *:nth-child(6) { animation-delay: .19s; } .nav__mobile.open > *:nth-child(7) { animation-delay: .22s; } .nav__mobile.open > *:nth-child(8) { animation-delay: .25s; } .nav__mobile.open > *:nth-child(9) { animation-delay: .28s; } .nav__mobile.open > *:nth-child(10) { animation-delay: .31s; } .nav__mobile.open > *:nth-child(11) { animation-delay: .34s; } .nav__mobile.open > *:nth-child(12) { animation-delay: .37s; } .nav__mobile.open > *:nth-child(13) { animation-delay: .40s; } .nav__mobile.open > *:nth-child(14) { animation-delay: .43s; } .nav__mobile.open > *:nth-child(15) { animation-delay: .46s; } .nav__mobile.open > *:nth-child(16) { animation-delay: .49s; } .nav__mobile a { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.52); border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.05); transition: color .2s, padding-left .2s; } .nav__mobile a:hover { background: transparent; color: #fff; padding-left: 4px; } .nav__mobile .mob-section { font-size: 9px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.2); padding: 18px 0 8px; } /* Nav is always brand-blue — no light-mode override needed */ /* ══════════════════════════════════════════════════════════════════════════════ ROLLS-ROYCE STYLE OVERLAY NAVIGATION ══════════════════════════════════════════════════════════════════════════════ */ /* ── Retire old nav elements (overlay replaces both desktop dropdown & mobile panel) ── */ .nav__links { display: none !important; } .nav__ham { display: none !important; } .nav__mobile { display: none !important; } /* ── MENU toggle — always visible, replaces hamburger ── */ .nav__menu-toggle { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.62); font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 300; letter-spacing: 0.26em; text-transform: uppercase; padding: 6px 0; transition: color .22s; flex-shrink: 0; } .nav__menu-toggle:hover { color: rgba(255,255,255,0.95); } .nav__menu-icon { width: 34px; height: 34px; display: block; } .nav__menu-label { line-height: 1; } /* ── Full-screen overlay ── */ .nav__overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(3, 5, 18, 0.97); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0 48px; opacity: 0; pointer-events: none; transition: opacity .42s ease; } .nav__overlay.open { opacity: 1; pointer-events: auto; } /* ── Close button — mirrors MENU toggle position (top-right) ── */ .nav__overlay-close { position: absolute; top: 0; right: 48px; height: 68px; display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.55); font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 300; letter-spacing: 0.26em; text-transform: uppercase; transition: color .22s; } .nav__overlay-close:hover { color: rgba(255,255,255,0.95); } .nav__overlay-close svg { width: 34px; height: 34px; } /* ── Nav links list ── */ .nav__overlay-links { display: flex; flex-direction: column; align-items: flex-end; text-align: right; width: 100%; max-width: 640px; } /* ── Individual overlay items — start hidden/shifted, slide in on open ── */ .nav__overlay-item { display: block; font-family: 'Space Grotesk', sans-serif; font-size: clamp(14px, 2.4vw, 32px); font-weight: 200; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.40); text-decoration: none; padding: 10px 0; width: 100%; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; opacity: 0; transform: translateX(40px); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), color .22s; } .nav__overlay-item:last-child { border-bottom: none; } /* Animate in when overlay is open */ .nav__overlay.open .nav__overlay-item { opacity: 1; transform: translateX(0); } /* Stagger delays — targets ALL direct children (items + groups) by position */ .nav__overlay.open .nav__overlay-links > *:nth-child(1) { transition-delay: .04s; } .nav__overlay.open .nav__overlay-links > *:nth-child(2) { transition-delay: .08s; } .nav__overlay.open .nav__overlay-links > *:nth-child(3) { transition-delay: .12s; } .nav__overlay.open .nav__overlay-links > *:nth-child(4) { transition-delay: .16s; } .nav__overlay.open .nav__overlay-links > *:nth-child(5) { transition-delay: .20s; } .nav__overlay.open .nav__overlay-links > *:nth-child(6) { transition-delay: .24s; } .nav__overlay.open .nav__overlay-links > *:nth-child(7) { transition-delay: .28s; } .nav__overlay.open .nav__overlay-links > *:nth-child(8) { transition-delay: .32s; } .nav__overlay.open .nav__overlay-links > *:nth-child(9) { transition-delay: .36s; } .nav__overlay.open .nav__overlay-links > *:nth-child(10) { transition-delay: .40s; } .nav__overlay.open .nav__overlay-links > *:nth-child(11) { transition-delay: .44s; } /* Underline slides from right on hover / active */ .nav__overlay-item::after { content: ''; position: absolute; bottom: 9px; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.75); transform: scaleX(0); transform-origin: right center; transition: transform .32s cubic-bezier(.22,1,.36,1); } .nav__overlay-item:hover { color: rgba(255,255,255,0.92); } .nav__overlay-item:hover::after, .nav__overlay-item.active::after { transform: scaleX(1); } .nav__overlay-item.active { color: rgba(255,255,255,0.92); } /* CTA row */ .nav__overlay-item--cta { color: var(--brand) !important; font-weight: 300; border-bottom: none; margin-top: 6px; } .nav__overlay-item--cta:hover { opacity: .82; } .nav__overlay-item--cta::after { background: var(--brand); } /* ══ Opportunities group — staircase sub-menu (side layout) ══════════════════ */ /* Group: CSS grid — trigger locked right, sub-items column fans left */ .nav__overlay-group { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; opacity: 0; transform: translateX(40px); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); } .nav__overlay.open .nav__overlay-group { opacity: 1; transform: translateX(0); } /* Trigger — pinned to right column */ .nav__overlay-item--has-sub { grid-column: 2; display: flex !important; align-items: center; justify-content: flex-end; gap: 10px; cursor: pointer; user-select: none; } /* Arrow — right-pointing › rotates to ‹ when open */ .nav__overlay-arrow { width: 8px; height: 13px; flex-shrink: 0; opacity: .40; transition: transform .32s ease, opacity .22s; } .nav__overlay-group.open > .nav__overlay-item--has-sub .nav__overlay-arrow { transform: rotate(180deg); opacity: .80; } .nav__overlay-group.open > .nav__overlay-item--has-sub { color: rgba(255,255,255,0.82); } /* Sub-items column — sits to the LEFT of the trigger */ .nav__overlay-sub { grid-column: 1; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,1,.36,1); } .nav__overlay-group.open .nav__overlay-sub { max-height: 500px; pointer-events: auto; } /* Individual sub-items */ .nav__overlay-subitem { display: block; font-family: 'Space Grotesk', sans-serif; font-size: clamp(12px, 1.8vw, 24px); font-weight: 200; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.28); text-decoration: none; padding: 7px 28px 7px 0; /* right-pad = gap between text and trigger column */ white-space: nowrap; text-align: right; position: relative; opacity: 0; transform: translateX(18px); transition: opacity .4s ease, transform .4s ease, color .2s; } .nav__overlay-subitem:hover { color: rgba(255,255,255,0.82); } .nav__overlay-group.open .nav__overlay-subitem { opacity: 1; transform: translateX(0); } /* Staircase: each step goes LEFT (more right-padding) and DOWN (margin-top). Visual: FOR STUDENTS ← closest to trigger FOR EMPLOYERS ← one step left + down FOR PARTNERS ← two steps left + down */ /* group2 — flex column, auto-width, right-aligned within nav__overlay-sub */ .nav__overlay-group2 { display: flex; flex-direction: column; align-items: flex-end; opacity: 0; transform: translateX(18px); transition: opacity .4s ease, transform .4s ease; } .nav__overlay-group.open .nav__overlay-group2 { opacity: 1; transform: translateX(0); } /* Step-1: For Students group2 */ .nav__overlay-group.open .nav__overlay-group2:nth-child(1) { transition-delay: .04s; padding-right: 16px; margin-top: 0; } /* Step-2: For Employers group2 */ .nav__overlay-group.open .nav__overlay-group2:nth-child(2) { transition-delay: .09s; padding-right: 38px; margin-top: 10px; } /* Step-3: For Partners group2 */ .nav__overlay-group.open .nav__overlay-group2:nth-child(3) { transition-delay: .14s; padding-right: 60px; margin-top: 10px; } .nav__overlay-group.open .nav__overlay-subitem:nth-child(4) { transition-delay: .19s; padding-right: 136px; margin-top: 10px; } .nav__overlay-group.open .nav__overlay-subitem:nth-child(5) { transition-delay: .24s; padding-right: 172px; margin-top: 10px; } .nav__overlay-group.open .nav__overlay-subitem:nth-child(6) { transition-delay: .29s; padding-right: 208px; margin-top: 10px; } /* Underline slides from right */ .nav__overlay-subitem::after { content: ''; position: absolute; bottom: 6px; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.60); transform: scaleX(0); transform-origin: right center; transition: transform .28s cubic-bezier(.22,1,.36,1); } .nav__overlay-subitem:hover::after, .nav__overlay-subitem.active::after { transform: scaleX(1); } .nav__overlay-subitem.active { color: rgba(255,255,255,0.82); } /* ── Second-level: "For Students" → Career Segment ── */ .nav__overlay-subitem--has-sub2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(12px, 1.5vw, 19px); font-weight: 200; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.28); padding: 7px 0; white-space: nowrap; text-align: right; max-width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; cursor: pointer; user-select: none; transition: color .2s; } .nav__overlay-subitem--has-sub2:hover { color: rgba(255,255,255,0.72); } .nav__overlay-arrow2 { width: 7px; height: 11px; flex-shrink: 0; opacity: .30; transition: transform .28s ease, opacity .22s; } /* Arrow rotates down when panel expands below */ .nav__overlay-group2.open .nav__overlay-subitem--has-sub2 .nav__overlay-arrow2 { transform: rotate(90deg); opacity: .65; } /* Panel drops down below trigger — auto-width, right-aligned with trigger */ .nav__overlay-sub2 { overflow: hidden; max-height: 0; transition: max-height .42s ease; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; } .nav__overlay-group2.open .nav__overlay-sub2 { max-height: 420px; pointer-events: auto; } .nav__overlay-sub2-label { font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.16); padding: 6px 0 3px; text-align: right; white-space: nowrap; opacity: 0; transition: opacity .3s ease .05s; } .nav__overlay-group2.open .nav__overlay-sub2-label { opacity: 1; } /* Second label ("Events") fades in after Scholarships (now child 6) */ .nav__overlay-group2.open .nav__overlay-sub2-label:nth-child(6) { transition-delay: .22s; } /* No width:100% — items size to content and right-align within auto-width group2 */ .nav__overlay-sub2item { font-family: 'Space Grotesk', sans-serif; font-size: clamp(11px, 1.5vw, 20px); font-weight: 200; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.25); text-decoration: none; padding: 4px 0; text-align: right; white-space: nowrap; display: block; opacity: 0; transform: translateX(10px); transition: opacity .32s ease, transform .32s ease, color .2s; } .nav__overlay-group2.open .nav__overlay-sub2item { opacity: 1; transform: translateX(0); } /* For Students sub2: child 1 = "Career Segment" label, 2-4 = links, 5 = Scholarships, 6 = "Events" label, 7-8 = links For Employers sub2: child 1 = "Post Opportunities" link (no label) For Partners sub2: children 1-3 = links (no label) */ .nav__overlay-group2.open .nav__overlay-sub2item:nth-child(1) { transition-delay: .04s; } .nav__overlay-group2.open .nav__overlay-sub2item:nth-child(2) { transition-delay: .07s; } .nav__overlay-group2.open .nav__overlay-sub2item:nth-child(3) { transition-delay: .11s; } .nav__overlay-group2.open .nav__overlay-sub2item:nth-child(4) { transition-delay: .15s; } .nav__overlay-group2.open .nav__overlay-sub2item:nth-child(5) { transition-delay: .19s; } .nav__overlay-group2.open .nav__overlay-sub2item:nth-child(7) { transition-delay: .25s; } .nav__overlay-group2.open .nav__overlay-sub2item:nth-child(8) { transition-delay: .29s; } .nav__overlay-sub2item:hover { color: rgba(255,255,255,0.72); } /* MENU toggle always white on brand-blue nav */ /* Theme toggle item inside the overlay — desktop hides it (bar button handles it there) */ .nav__overlay-item--theme-toggle { display: none; cursor: pointer; } @media (max-width: 480px) { .nav__overlay-item--theme-toggle { display: block; } } /* ── Overlay mobile tweaks ── */ @media (max-width: 768px) { .nav__overlay { padding: 0 20px; } .nav__overlay-close { right: 20px; } .nav__overlay-links { max-width: 100%; } /* Tighten staircase padding so sub-items don't overflow narrow screens */ .nav__overlay-group.open .nav__overlay-group2:nth-child(1) { padding-right: 10px; } .nav__overlay-group.open .nav__overlay-group2:nth-child(2) { padding-right: 26px; } .nav__overlay-group.open .nav__overlay-group2:nth-child(3) { padding-right: 42px; } /* Sub2 item font: bump up slightly for tap targets */ .nav__overlay-sub2item { font-size: clamp(13px, 3.8vw, 18px); padding: 6px 0; } /* Sub2 label: readable on small screens */ .nav__overlay-sub2-label { font-size: 10px; } /* Slightly more vertical breathing room in sub2 */ .nav__overlay-group2.open .nav__overlay-sub2 { max-height: 480px; } } /* Hide sign-up CTAs for logged-in users (flag set by initAuthNav in cb.js) */ html.cb-authed .hide-when-authed { display: none !important; } /* ── Account menu (logged-in nav state) ───────────────────────────────────────── */ .nav__account { position: relative; } .nav__account-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 100px; background: var(--surface-2, rgba(0,0,0,0.04)); border: 1px solid var(--border, rgba(0,0,0,0.1)); color: var(--text, #111); cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; transition: border-color .18s, background .18s; } .nav__account-btn:hover { border-color: var(--brand, #18277C); } .nav__account-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-grad, linear-gradient(135deg,#18277C,#3D4FC2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; } .nav__account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav__account-btn svg { opacity: .5; transition: transform .2s; } .nav__account.open .nav__account-btn svg { transform: rotate(180deg); } .nav__account-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: var(--surface, #fff); border: 1px solid var(--border, rgba(0,0,0,0.1)); border-radius: 14px; padding: 8px; box-shadow: 0 18px 48px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; z-index: 1200; } .nav__account.open .nav__account-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s, transform .2s, visibility 0s linear 0s; } .nav__account-menu a, .nav__account-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; text-align: left; color: var(--text, #111); text-decoration: none; background: transparent; border: none; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; } .nav__account-menu a:hover, .nav__account-menu button:hover { background: var(--surface-2, rgba(0,0,0,0.05)); } .nav__account-menu button { border-top: 1px solid var(--border, rgba(0,0,0,0.08)); margin-top: 4px; color: #dc2626; } /* ── Account button always white-pill on the brand-blue nav ── */ .nav__right .nav__account-btn { background: #fff; color: var(--brand); border: none; } .nav__right .nav__account-btn:hover { background: rgba(255,255,255,0.90); border: none; } .nav__right .nav__account-avatar { background: var(--brand); color: #fff; } /* ── Role badge inside the account pill ── */ .nav__account-role { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 2px 7px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; } .nav__account-role--student { background: rgba(24,39,124,.10); color: #18277C; } .nav__account-role--employer { background: rgba(234,88,12,.12); color: #c2410c; } .nav__account-role--partner { background: rgba(22,163,74,.12); color: #15803d; } .nav__account-role--admin { background: rgba(124,58,237,.12); color: #7c3aed; } /* Role label stays visible on all screen sizes — it's the only identifier on mobile */ /* ── Notification bell (nav bar) ── */ .nav__bell { position: relative; background: transparent; border: 1px solid rgba(255,255,255,0.25); width: 32px; height: 32px; border-radius: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.62); cursor: pointer; flex-shrink: 0; transition: color .2s, border-color .2s; } .nav__bell:hover { color: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.55); } .nav__bell svg { width: 16px; height: 16px; pointer-events: none; } .nav__bell-dot { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; background: #f59e0b; color: #fff; border: 1.5px solid var(--brand); border-radius: 100px; font-size: 9px; font-weight: 800; display: none; align-items: center; justify-content: center; line-height: 1; } .nav__bell-dot.show { display: flex; } /* ── Nav notification dropdown panel ── */ .nav__notif { position: fixed; top: 76px; right: 16px; width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 22px 60px rgba(0,0,0,.35); z-index: 1300; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; } .nav__notif.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s, transform .2s; } .nav__notif__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .nav__notif__head h3 { font-size: 15px; font-weight: 800; color: var(--text); margin: 0; } .nav__notif__clearall { font-size: 12px; font-weight: 600; color: #dc2626; background: none; border: none; cursor: pointer; padding: 0; transition: opacity .15s; } .nav__notif__clearall:hover { opacity: .70; } .nav__notif__list { max-height: 380px; overflow-y: auto; } .nav__notif__item { display: block; padding: 13px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: background .15s; } .nav__notif__item:last-child { border-bottom: none; } .nav__notif__item:hover { background: var(--surface-2); } .nav__notif__item.unread { background: rgba(24,39,124,.05); } .nav__notif__item.unread .nav__notif__title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: middle; } .nav__notif__title { font-weight: 700; font-size: 14px; } .nav__notif__body { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; } .nav__notif__time { font-size: 11px; color: var(--text-3); margin-top: 5px; } .nav__notif__empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; } /* ── Buttons ─────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .18s, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s; border: none; text-decoration: none; white-space: nowrap; } .btn:hover { opacity: .92; transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; } .btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .btn--primary { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 16px rgba(24,39,124,.30); } .btn--primary:hover { box-shadow: 0 10px 30px rgba(24,39,124,.42); } .btn--outline { background: transparent; color: var(--brand); border: 2px solid var(--brand); } .btn--outline:hover { background: var(--brand); color: #fff; } .btn--gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 4px 16px rgba(245,158,11,.35); } .btn--white { background: #fff; color: var(--brand); box-shadow: 0 4px 16px rgba(0,0,0,.12); } .btn--sm { padding: 8px 18px; font-size: 13px; border-radius: 9px; } .btn--lg { padding: 16px 36px; font-size: 16px; border-radius: 14px; } /* ── Badge / pill ─────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; } .badge--brand { background: #dbeafe; color: #1e3a8a; } .badge--gold { background: #fef3c7; color: #92400e; } .badge--green { background: #dcfce7; color: #166534; } .badge--blue { background: #dbeafe; color: #1d4ed8; } .badge--pink { background: #fce7f3; color: #9d174d; } [data-theme="dark"] .badge--brand { background: #1e3a8a33; color: #93c5fd; } [data-theme="dark"] .badge--gold { background: #45170022; color: #fcd34d; } [data-theme="dark"] .badge--green { background: #14532d22; color: #4ade80; } [data-theme="dark"] .badge--blue { background: #1e3a5f22; color: #60a5fa; } /* ── Section spacing ─────────────────────────────────────────────────────────── */ .section { padding: 80px 0; } .section--sm { padding: 56px 0; } .section--lg { padding: 112px 0; } .section--dark { background: var(--surface); } .section__head { text-align: center; max-width: 680px; margin: 0 auto 52px; } .section__label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--brand); margin-bottom: 14px; background: rgba(61,79,194,.07); border: 1px solid rgba(61,79,194,.14); padding: 5px 16px; border-radius: 100px; } [data-theme="dark"] .section__label { color: #a5b4fc; background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.22); } .section__title { margin-bottom: 16px; } .section__sub { font-size: 17px; color: var(--muted); line-height: 1.6; } /* ── Hero ─────────────────────────────────────────────────────────────────────── */ .hero { padding: 96px 0 80px; background: linear-gradient(160deg, #f0eeff 0%, #ffffff 50%, #fff8e7 100%); overflow: hidden; position: relative; } [data-theme="dark"] .hero { background: linear-gradient(160deg, #1a1040 0%, #0f0e17 50%, #1a150a 100%); } .hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); background: #dbeafe; padding: 5px 14px; border-radius: 20px; margin-bottom: 20px; } [data-theme="dark"] .hero__label { background: #1e3a8a33; color: #93c5fd; } .hero__title { margin-bottom: 20px; } .hero__title .grad { background: var(--brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__sub { font-size: 18px; color: var(--muted); margin-bottom: 36px; line-height: 1.6; } .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero__card-stack { position: relative; width: 100%; max-width: 400px; margin: 0 auto; } .hero__stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); margin-bottom: 14px; display: flex; align-items: center; gap: 16px; } .hero__stat-icon { font-size: 28px; } .hero__stat-num { font-size: 26px; font-weight: 800; color: var(--brand); font-family: 'Space Grotesk', sans-serif; } .hero__stat-label{ font-size: 13px; color: var(--muted); } /* ── Ecosystem grid ──────────────────────────────────────────────────────────── */ .eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .eco-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 22px; text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer; text-decoration: none; color: inherit; } .eco-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand); } .eco-card__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--brand); } .eco-card__icon svg { width: 36px; height: 36px; } .eco-card__title { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--ink); } .eco-card__sub { font-size: 12px; color: var(--muted); line-height: 1.5; } .eco-card--soon { opacity: .65; } .eco-card__badge { margin-top: 10px; display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--gold-light); color: #92400e; } /* ── Feature cards ───────────────────────────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .feature-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(61,79,194,.30); } .feature-card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-grad); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 20px; box-shadow: 0 6px 18px rgba(24,39,124,.22); transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .feature-card:hover .feature-card__icon { transform: scale(1.08) rotate(-3deg); } .feature-card__icon svg { width: 26px; height: 26px; } .feature-card__title { font-size: 16px; font-weight: 700; margin-bottom: 10px; } .feature-card__desc { font-size: 14px; color: var(--muted); line-height: 1.6; } /* ── Stats bar ───────────────────────────────────────────────────────────────── */ .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; background: var(--brand-grad); border-radius: var(--radius); overflow: hidden; } .stats-bar__item { padding: 32px 24px; text-align: center; border-right: 1px solid rgba(255,255,255,.15); color: #fff; } .stats-bar__item:last-child { border-right: none; } .stats-bar__num { font-size: 2.2rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; } .stats-bar__label { font-size: 13px; opacity: .8; margin-top: 4px; } /* ── Page hero (inner pages) ─────────────────────────────────────────────────── */ .page-hero { padding: 64px 0 52px; background: linear-gradient(160deg, #f0eeff 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .page-hero::before, .page-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .page-hero::before { width: 480px; height: 480px; top: -260px; right: -120px; background: radial-gradient(circle, rgba(61,79,194,.10) 0%, transparent 68%); } .page-hero::after { width: 360px; height: 360px; bottom: -220px; left: -80px; background: radial-gradient(circle, rgba(3,207,209,.08) 0%, transparent 68%); } .page-hero .container, .page-hero .container--wide { position: relative; z-index: 1; } [data-theme="dark"] .page-hero { background: linear-gradient(160deg, #1a1040 0%, var(--bg) 100%); } .page-hero__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); background: #dbeafe; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; } [data-theme="dark"] .page-hero__label { background: #1e3a8a33; color: #93c5fd; } .page-hero__title { margin-bottom: 14px; } .page-hero__sub { font-size: 17px; color: var(--muted); max-width: 600px; margin: 0 auto; } /* Dark-background hero — force everything white */ .page-hero--dark, .page-hero--dark h1, .page-hero--dark h2, .page-hero--dark h3, .page-hero--dark p, .page-hero--dark .page-hero__title, .page-hero--dark .page-hero__sub { color: #fff !important; } .page-hero--dark .page-hero__label { background: rgba(255,255,255,0.15); color: #fff; } /* ── Card ────────────────────────────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(61,79,194,.35); } .card__body { padding: 24px; } .card__img { width: 100%; height: 180px; object-fit: cover; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 48px; } .card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); margin-bottom: 8px; } .card__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; } .card__desc { font-size: 13px; color: var(--muted); line-height: 1.55; } .card__meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; } .card__date { font-size: 12px; color: var(--muted); } /* ── Grid layouts ────────────────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } /* ── Tab switcher ────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; width: fit-content; margin-bottom: 28px; flex-wrap: wrap; } .tab-btn { padding: 9px 22px; border-radius: 9px; font-size: 14px; font-weight: 600; border: none; background: none; cursor: pointer; color: var(--muted); transition: background .18s, color .18s, box-shadow .18s; } .tab-btn:hover:not(.active) { color: var(--ink); } .tab-btn.active { background: var(--brand-grad); color: #fff; box-shadow: 0 3px 12px rgba(24,39,124,.28); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* ── Filter bar ──────────────────────────────────────────────────────────────── */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; align-items: center; } .filter-search { flex: 1; min-width: 220px; padding: 10px 16px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; background: var(--panel); color: var(--ink); outline: none; transition: border-color .18s, box-shadow .18s; } .filter-search:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(61,79,194,.12); } .filter-select { padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; background: var(--panel); color: var(--ink); outline: none; cursor: pointer; transition: border-color .18s, box-shadow .18s; } .filter-select:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(61,79,194,.12); } /* ── Job card (listings page) ────────────────────────────────────────────────── */ .job-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .2s, border-color .2s, transform .2s; position: relative; } .job-card:hover { box-shadow: var(--shadow); border-color: var(--brand); transform: translateY(-2px); } .job-card--verified::before { content: '🛡️ Verified Employer'; position: absolute; top: -1px; right: 16px; background: var(--brand-grad); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 0 0 9px 9px; } .job-card__head { display: flex; gap: 14px; align-items: flex-start; } .job-card__logo { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: var(--brand-grad); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; } .job-card__title { font-size: 16px; font-weight: 700; line-height: 1.3; } .job-card__company { font-size: 13px; color: var(--muted); margin-top: 3px; } .job-meta { display: flex; flex-wrap: wrap; gap: 6px; } .meta-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; border: 1px solid; } .meta-badge--type { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; } .meta-badge--country { background: #fef3c7; color: #92400e; border-color: #fde68a; } .meta-badge--ind { background: #f0fdf4; color: #166534; border-color: #bbf7d0; } .meta-badge--arr { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; } .meta-badge--exp { background: #fff7ed; color: #9a3412; border-color: #fed7aa; } [data-theme="dark"] .meta-badge--type { background: #1e3a8a22; color: #93c5fd; border-color: #1e3a8a; } [data-theme="dark"] .meta-badge--country { background: #45170022; color: #fcd34d; border-color: #92400e; } [data-theme="dark"] .meta-badge--ind { background: #14532d22; color: #4ade80; border-color: #166534; } [data-theme="dark"] .meta-badge--arr { background: #1e3a5f22; color: #60a5fa; border-color: #1d4ed8; } .job-salary { font-size: 14px; font-weight: 700; color: var(--ink); } .job-salary span { font-weight: 400; color: var(--muted); font-size: 12px; } .job-desc { font-size: 13px; color: var(--muted); line-height: 1.55; } .job-skills { display: flex; flex-wrap: wrap; gap: 5px; } .skill-chip { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); } .job-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); gap: 10px; flex-wrap: wrap; margin-top: auto; } /* Bookmark button */ .job-bookmark { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: all .18s; flex-shrink: 0; } .job-bookmark:hover { border-color: var(--brand); color: var(--brand); } .job-bookmark--saved { border-color: var(--brand); color: var(--brand); background: rgba(24,39,124,.08); } .job-deadline { font-size: 12px; color: var(--muted); } .job-deadline.urgent { color: #ef4444; font-weight: 600; } .job-actions { display: flex; gap: 8px; align-items: center; } /* ── CTA Banner ──────────────────────────────────────────────────────────────── */ .cta-banner { background: var(--brand-grad); border-radius: 20px; padding: 56px 48px; text-align: center; color: #fff; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .cta-banner::after { content: ''; position: absolute; width: 460px; height: 460px; top: -240px; right: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(3,207,209,.16) 0%, transparent 65%); pointer-events: none; } .cta-banner__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 14px; position: relative; } .cta-banner__sub { font-size: 16px; opacity: .85; margin-bottom: 32px; position: relative; } .cta-banner__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; } /* ── Newsletter inline form (inside CTA banners) ─────────────────────────────── */ .newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 520px; } .newsletter-email { flex: 1; min-width: 220px; padding: 13px 18px; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 10px; background: rgba(255,255,255,0.12); color: #fff; font-size: 14px; font-family: 'Inter', sans-serif; outline: none; transition: border-color .2s, background .2s; backdrop-filter: blur(4px); } .newsletter-email::placeholder { color: rgba(255,255,255,0.5); } .newsletter-email:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.18); } .newsletter-btn { white-space: nowrap; flex-shrink: 0; } .newsletter-status { width: 100%; font-size: 13px; margin-top: 2px; line-height: 1.5; min-height: 18px; } .newsletter-status--ok { color: #86efac; } .newsletter-status--err { color: #fca5a5; } @media (max-width: 480px) { .newsletter-email { min-width: 100%; } .newsletter-btn { width: 100%; justify-content: center; } } /* ── Footer ──────────────────────────────────────────────────────────────────── */ .footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 0 32px; position: relative; } .footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #18277C 18%, #03cfd1 50%, #27aae2 82%, transparent 100%); opacity: .5; pointer-events: none; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer__brand { display: flex; align-items: center; gap: 8px; font-family: 'GFS Didot', Didot, Georgia, serif; font-weight: 400; font-size: 21px; margin-bottom: 14px; } .footer__brand-mark { width: 28px; height: 28px; background: url('logo.jpg') center / cover no-repeat, var(--brand-grad); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0; overflow: hidden; } .footer__tagline { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; } .footer__col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; } .footer__links { list-style: none; display: flex; flex-direction: column; gap: 8px; } .footer__links a { font-size: 13px; color: var(--ink-2); transition: color .15s, padding-left .2s; display: inline-block; } .footer__links a:hover { color: var(--brand); padding-left: 4px; } [data-theme="dark"] .footer__links a:hover { color: #a5b4fc; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .footer__copy { font-size: 13px; color: var(--muted); } .footer__legal { display: flex; gap: 20px; } .footer__legal a { font-size: 12px; color: var(--muted); transition: color .15s; } .footer__legal a:hover { color: var(--brand); } /* ── Scroll reveal (auto-applied by initScrollReveal in cb.js) ───────────────── */ .cb-reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0s); } .cb-reveal.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .cb-reveal { opacity: 1; transform: none; transition: none; } } /* ── Misc utilities ──────────────────────────────────────────────────────────── */ .text-center { text-align: center; } .text-brand { color: var(--brand); } .text-gold { color: var(--gold); } .text-muted { color: var(--muted); } .fw-800 { font-weight: 800; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-40 { margin-bottom: 40px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } /* Coming soon overlay */ .coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; border: 2px dashed var(--border); border-radius: var(--radius); color: var(--muted); gap: 12px; } .coming-soon__icon { font-size: 48px; } .coming-soon__title { font-size: 18px; font-weight: 700; color: var(--ink); } /* ── Missing layout classes ──────────────────────────────────────────────────── */ /* Index hero: two-column on desktop, stacks on mobile */ .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero__tagline { font-style: italic; color: var(--muted); margin-bottom: 28px; font-size: 16px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; } /* Index hero: floating stat cards on the right visual */ .stat-cards { display: flex; flex-direction: column; gap: 16px; } .stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; } .stat-card__icon { font-size: 28px; flex-shrink: 0; } .stat-card__number { font-size: 26px; font-weight: 800; color: var(--brand); font-family: 'Space Grotesk', sans-serif; } .stat-card__label { font-size: 13px; color: var(--muted); } /* Eco card name / desc (HTML uses these; CSS had __title/__sub) */ .eco-card__name { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--ink); } .eco-card__desc { font-size: 12px; color: var(--muted); line-height: 1.5; } /* Stats bar label (HTML uses __lbl; CSS had __label) */ .stats-bar__lbl { font-size: 13px; opacity: .8; margin-top: 4px; } /* Stats bar inner: actual 4-column grid inside the gradient bar */ .stats-bar__inner { display: grid; grid-template-columns: repeat(4, 1fr); } /* CTA banner inner: text left, buttons right on desktop */ .cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; text-align: left; } .cta-banner__inner > div:first-child { flex: 1; min-width: 240px; } .cta-banner__inner .cta-banner__title, .cta-banner__inner .cta-banner__sub { text-align: left; } .cta-banner__inner .cta-banner__sub { margin-bottom: 0; } .cta-banner__inner .cta-banner__btns { justify-content: flex-end; flex-shrink: 0; } /* ── Responsive ──────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } .hero__grid, .hero__inner { grid-template-columns: 1fr; gap: 0; } .hero__visual { display: none; } .nav__links { display: none; } .nav__ham { display: flex; } } @media (max-width: 768px) { /* Sections */ .section, .section--sm { padding: 52px 0; } .section--lg { padding: 68px 0; } .section__sub { font-size: 15px; } .section__head { margin-bottom: 36px; } /* Hero (index) */ .hero { padding: 52px 0 40px; } .hero__sub { font-size: 16px; } .hero__ctas, .hero__cta { gap: 10px; } /* Page hero (inner pages) */ .page-hero { padding: 44px 0 32px; text-align: center; } .page-hero__sub { margin-left: auto; margin-right: auto; font-size: 15px; } /* Grids collapse to single column */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Stats bar: 2 × 2 on tablet */ .stats-bar__inner { grid-template-columns: repeat(2, 1fr); } .stats-bar__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); } /* CTA banner: stack vertically */ .cta-banner { padding: 40px 24px; } .cta-banner__inner { flex-direction: column; text-align: center; gap: 24px; } .cta-banner__inner .cta-banner__title, .cta-banner__inner .cta-banner__sub { text-align: center; } .cta-banner__inner .cta-banner__btns { justify-content: center; flex-wrap: wrap; } /* Filter bar */ .filter-bar { flex-direction: column; } .filter-search, .filter-select { width: 100%; } } @media (max-width: 480px) { /* Container edges */ .container, .container--wide { padding: 0 16px; } /* Nav: tighter side padding on small phones */ .nav__inner { padding: 0 16px; } /* Nav: hide Apply button and theme toggle — both live in the overlay menu */ .nav__right .btn--sm { display: none; } .nav__right .nav__theme-btn { display: none; } /* Account pill: hide full name but keep role badge — shows [ J ] [Student] ▾ */ .nav__right .nav__account-name { display: none; } .nav__right .nav__account-btn { padding: 4px 8px 4px 4px; gap: 4px; } /* Bell: slightly tighter */ .nav__bell { width: 28px; height: 28px; } /* Notification panel: stretch to almost full width on phones */ .nav__notif { left: 8px; right: 8px; width: auto; top: 72px; } /* Index hero: stack buttons full-width */ .hero__ctas, .hero__cta { flex-direction: column; align-items: stretch; } .hero__ctas .btn, .hero__cta .btn { width: 100%; justify-content: center; } /* Page hero buttons: full-width stack */ .page-hero .btn { width: 100%; justify-content: center; } /* Stats bar: tighten on small screens */ .stats-bar__item { padding: 20px 14px; } .stats-bar__num { font-size: 1.7rem; } /* CTA banner buttons: full-width stack */ .cta-banner__btns { flex-direction: column; width: 100%; } .cta-banner__btns .btn { width: 100%; justify-content: center; } /* Footer */ .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; } /* Tabs */ .tabs { width: 100%; } .tab-btn { flex: 1; text-align: center; font-size: 13px; } /* Buttons */ .btn--lg { padding: 14px 24px; font-size: 15px; } /* Cards */ .feature-card { padding: 24px 20px; } .section, .section--sm { padding: 44px 0; } } /* ── Form styles ─────────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink-2); } .form-input, .form-select, .form-textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--panel); color: var(--ink); outline: none; transition: border-color .15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--brand); } .form-textarea { resize: vertical; min-height: 100px; } .form-error { font-size: 13px; color: #ef4444; margin-top: 6px; display: none; } .form-error.show { display: block; } .form-success { font-size: 13px; color: #16a34a; margin-top: 6px; } /* Form card */ .form-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 40px; max-width: 520px; } @media (max-width: 560px) { .form-card { padding: 28px 20px; border-radius: 16px; } } /* ── Page transitions ────────────────────────────────────────────────────────── */ @keyframes pageEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes pageExit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-14px); } } body.page-enter { animation: pageEnter .42s cubic-bezier(.22, 1, .36, 1) both; will-change: opacity, transform; } body.page-exit { animation: pageExit .28s cubic-bezier(.4, 0, .2, 1) both; pointer-events: none; will-change: opacity, transform; } /* ── Mobile hero padding overrides ─────────────────────────────────────────── The global nav-bleed rules above use !important, so mobile breakpoints that don't also use !important get silently ignored. These rules fix that so hero sections aren't excessively tall on phones. ────────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Reduce padding-top on every full-bleed hero — keeps content from being pushed far down by the oversized desktop top-space */ .hero-full { padding-top: calc(32px + 68px) !important; } .listings-hero { padding-top: calc(32px + 68px) !important; padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 28px !important; } .page-hero { padding-top: calc(28px + 68px) !important; } } /* ── Mobile typography: Arial Bold site-wide ─────────────────── */ @media (max-width: 768px) { * { font-family: Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; font-weight: 700 !important; } /* Keep inputs, selects, small text at normal weight so they're legible */ input, select, textarea, .filter-select, .filter-search .form-input, .badge, .nav__mobile a, .footer__links a, .card__desc, .eco-card__sub, .job-card__company, p { font-weight: 400 !important; } /* Brand logos stay light (Didot regular weight) */ .nav__brand, .dash-logo { font-weight: 400 !important; } /* Nav items stay medium */ .nav__link, .mob-section { font-weight: 600 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ BRAND LOGO — used across the site beyond the nav bar ═══════════════════════════════════════════════════════════════════════════ */ /* Footer — bigger logo badge */ .footer__brand-mark { width: 42px !important; height: 42px !important; border-radius: 11px !important; } .footer__brand { font-size: 22px !important; gap: 11px !important; } /* Inner-page heroes — logo badge above the heading (left on desktop, centred on mobile to match the hero text alignment). */ .page-hero .container::before { content: ''; display: block; width: 58px; height: 58px; margin: 0 0 18px; background: url('logo.jpg') center / cover no-repeat, var(--brand-grad); border-radius: 14px; box-shadow: 0 8px 24px rgba(24,39,124,.28); } .page-hero--dark .container::before { box-shadow: 0 8px 24px rgba(0,0,0,.4); } @media (max-width: 768px) { /* Hide the decorative logo badge on mobile — nav bar already shows the brand */ .page-hero .container::before { display: none; } } /* Homepage hero — logo badge above the eyebrow label (hero is centred) */ .hero-full__content::before { content: ''; width: 66px; height: 66px; margin-bottom: 26px; background: url('logo.jpg') center / cover no-repeat, var(--brand-grad); border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.45); } /* Listings hero — small logo before the eyebrow text */ .listings-hero__eyebrow::before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 9px; vertical-align: -4px; background: url('logo.jpg') center / contain no-repeat; border-radius: 5px; } /* Pulsing logo loader + branded empty state (used in JS-rendered states) */ .brand-loader { width: 56px; height: 56px; margin: 0 auto 14px; background: url('logo.jpg') center / cover no-repeat, var(--brand-grad); border-radius: 14px; animation: brandPulse 1.4s ease-in-out infinite; } .empty-logo { width: 64px; height: 64px; margin: 0 auto 16px; background: url('logo.jpg') center / cover no-repeat, var(--brand-grad); border-radius: 16px; opacity: .9; } @keyframes brandPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.88); opacity: .55; } } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL TYPOGRAPHY — Arial site-wide · Arial Black titles · medium sub-text ═══════════════════════════════════════════════════════════════════════════ */ /* 1) Every wording uses Arial (overrides Space Grotesk / Inter everywhere, including inline font-family styles). Emoji fonts are listed last so the browser can still fall back to them — without these, !important on Arial blocks emoji rendering entirely. */ * { font-family: Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } /* 2) TITLES — Arial Black (heavy, blocky), large */ h1, h2, .page-hero__title, .section__title, .cta-banner__title, .hero-full__title, .listings-hero__title, .feature-card__title, .spotlight-card__title, .why-card__title, .eco-card__name { font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; font-weight: 900 !important; } /* Primary page / section titles — large */ h1, .page-hero__title, .section__title, .cta-banner__title { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; } /* Showpiece full-bleed hero titles — extra large */ .hero-full__title, .listings-hero__title { font-size: clamp(2.8rem, 8.5vw, 7rem) !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; } /* Secondary titles — large, a step down */ h2, .feature-card__title, .spotlight-card__title { font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important; line-height: 1.18 !important; } /* 3) SUB-WORDINGS — regular Arial, medium size */ .page-hero__sub, .section__sub, .cta-banner__sub, .hero-full__sub, .listings-hero__sub, .section__label, .page-hero__label { font-size: clamp(1rem, 1.5vw, 1.18rem) !important; /* ~16–19px medium */ font-weight: 500 !important; line-height: 1.6 !important; } /* Keep form controls + small UI text at a sensible weight */ input, select, textarea, .badge { font-weight: 400 !important; } /* ═══════════════════════════════════════════════════════════════════════════ UI STANDARDS — site-wide consistency layer Applied AFTER all page-specific styles so the look feels uniform. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Page heroes: same spacing, centered alignment, consistent label pill ── */ .page-hero { text-align: center; padding: 72px 0 60px !important; } .page-hero .container { display: flex; flex-direction: column; align-items: center; } .page-hero__sub { max-width: 640px; margin-left: auto !important; margin-right: auto !important; } .page-hero__label { background: rgba(24, 39, 124, .08) !important; border: 1px solid rgba(24, 39, 124, .14); padding: 6px 14px !important; border-radius: 100px !important; } [data-theme="dark"] .page-hero__label { background: rgba(147,197,253,.10) !important; border-color: rgba(147,197,253,.18); } /* ── Section heads: consistent center alignment + spacing ── */ .section { padding: 72px 0 !important; } .section--sm { padding: 48px 0 !important; } .section__head { text-align: center; max-width: 720px; margin: 0 auto 40px !important; } .section__label { display: inline-block !important; margin-bottom: 12px !important; } .section__title { margin-bottom: 14px !important; } /* ── Cards: unified radius, padding, hover ── */ .card, .eco-card, .feature-card, .why-card, .spotlight-card, .job-card { border-radius: 18px !important; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease; } .card:hover, .eco-card:hover, .feature-card:hover, .job-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(13,12,41,.10); border-color: var(--brand); } /* ── Buttons: consistent height, padding, weight ── */ .btn { padding: 12px 26px !important; border-radius: 12px !important; font-weight: 700 !important; letter-spacing: 0; } .btn--sm { padding: 8px 18px !important; font-size: 13px !important; } .btn--lg { padding: 14px 30px !important; font-size: 15px !important; } /* ── CTA banners: same rounded shape everywhere ── */ .cta-banner { border-radius: 24px !important; padding: 48px clamp(24px, 5vw, 56px) !important; } /* ── Footer: tidy the brand area + links ── */ .footer { padding-top: 64px !important; padding-bottom: 24px !important; } .footer__grid { gap: 36px !important; } .footer__col-title { margin-bottom: 12px !important; } /* ── Mobile alignment tweaks already in cb.css stay, but make sure heroes stay centered on every viewport ── */ @media (max-width: 768px) { /* page-hero has margin-top: -68px so padding-top must clear the 68px fixed nav. calc(68px + 28px) = 96px keeps the title visibly below the nav bar. */ .page-hero { padding: calc(68px + 28px) 0 36px !important; text-align: center; } /* Reduce section vertical rhythm on mobile — avoids large blank gaps */ .section { padding: 44px 0 !important; } .section--sm { padding: 28px 0 !important; } .section__head { margin-bottom: 28px !important; } .cta-banner { padding: 36px 22px !important; border-radius: 20px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVENESS — Comprehensive polish (all pages, all breakpoints) Placed last so these rules win over everything above. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Brand font: GFS Didot wins over the global Arial !important ────────────── The global * { font-family: Arial !important } (specificity 0,0,0) is beaten by any class selector with !important (specificity 0,1,0 or higher). Adding !important here locks the Didot typeface on both nav and footer brand. ────────────────────────────────────────────────────────────────────────────── */ .nav__brand, .nav__brand sup, .dash-logo, .dash-logo sup { font-family: 'GFS Didot', Didot, Georgia, serif !important; font-weight: 400 !important; } .footer__brand { font-family: 'GFS Didot', Didot, Georgia, serif !important; } /* ── Tablet mid-range (769–1024px): tighten nav inner padding ──────────────── */ @media (max-width: 1024px) { .nav__inner { padding: 0 28px !important; } } /* ── Phablet + tablet (≤ 768px) ───────────────────────────────────────────── */ @media (max-width: 768px) { /* Nav bar ----------------------------------------------------------------- */ .nav__inner { padding: 0 20px !important; } /* Hide "MENU" text — the circle icon is universally understood on touch */ .nav__menu-label { display: none !important; } /* Overlay nav: larger tap targets on touch screens */ .nav__overlay-item { padding: 9px 0 !important; min-height: 44px; } .nav__overlay-sub2item { padding: 7px 0 !important; min-height: 36px; } /* Job cards --------------------------------------------------------------- */ .job-card { padding: 16px !important; gap: 10px !important; } .job-card__logo { width: 42px !important; height: 42px !important; } .job-card__title { font-size: 14px !important; } .job-footer { gap: 6px !important; } /* Stats bar: 2×2 grid — drop right border on right-column items */ .stats-bar__item:nth-child(even) { border-right: none !important; } /* Footer: keep 2-col on tablet, single col handled at 480px */ .footer__grid { grid-template-columns: 1fr 1fr !important; } .footer__bottom { justify-content: center !important; text-align: center !important; } .footer__legal { justify-content: center !important; flex-wrap: wrap !important; } /* Eco grid: 2 columns on tablet */ .eco-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Tab strip: scrollable instead of wrapping to multiple lines */ .tabs { overflow-x: auto !important; flex-wrap: nowrap !important; width: 100% !important; -webkit-overflow-scrolling: touch; } .tab-btn { flex-shrink: 0 !important; } /* Filter inputs: always full-width */ .filter-search, .filter-select { min-width: unset !important; } /* Grid helpers: grid-3, grid-4 collapse to 2-col before single-col */ .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Phones (≤ 480px) ──────────────────────────────────────────────────────── */ @media (max-width: 480px) { /* Nav */ .nav__inner { padding: 0 14px !important; } /* Job cards: most compact */ .job-card { padding: 14px !important; } .job-card__logo { width: 38px !important; height: 38px !important; font-size: 17px !important; } .job-card__title { font-size: 13px !important; } .job-actions .btn--sm { padding: 7px 12px !important; font-size: 12px !important; } /* Stats bar */ .stats-bar__item { padding: 18px 12px !important; } .stats-bar__num { font-size: 1.6rem !important; } /* Footer: single column */ .footer__grid { grid-template-columns: 1fr !important; } /* Feature cards */ .feature-card { padding: 22px 18px !important; } /* Section head spacing */ .section__head { margin-bottom: 24px !important; } /* Grids: everything single column on phones */ .grid-3, .grid-4 { grid-template-columns: 1fr !important; } } /* ── Very small phones (≤ 380px) ───────────────────────────────────────────── */ @media (max-width: 380px) { /* Container: minimal horizontal padding */ .container, .container--wide { padding: 0 12px !important; } /* Overlay nav: ultra-tight on tiny screens */ .nav__overlay { padding: 0 14px !important; } .nav__overlay-close { right: 14px !important; } .nav__overlay-item { font-size: clamp(12px, 5.5vw, 20px) !important; padding: 8px 0 !important; } /* Staircase: collapse right-padding so sub-items never overflow */ .nav__overlay-group.open .nav__overlay-group2:nth-child(1) { padding-right: 4px !important; } .nav__overlay-group.open .nav__overlay-group2:nth-child(2) { padding-right: 12px !important; } .nav__overlay-group.open .nav__overlay-group2:nth-child(3) { padding-right: 18px !important; } /* Stats bar: collapse to 1 column on tiny phones */ .stats-bar__inner { grid-template-columns: 1fr !important; } .stats-bar__item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.15) !important; } .stats-bar__item:last-child { border-bottom: none !important; } /* Eco grid: single column */ .eco-grid { grid-template-columns: 1fr !important; } /* Sections: minimal padding */ .section, .section--sm { padding: 36px 0 !important; } /* CTA banner */ .cta-banner { padding: 28px 16px !important; } /* Buttons: ensure touch targets are ≥ 44px */ .btn { min-height: 44px; } .btn--sm { min-height: 36px; } }