/* ══════════════════════════════════════════════════════════════ MR CANDIDATE — new mockup-derived layout & components Loaded AFTER styles.css — wins on any class-name conflict, which is how new sections override legacy ones as each view is migrated. Only add a component here once its matching HTML actually exists — an unused-but-colliding rule here would silently break an old, not-yet-migrated section elsewhere on the site. Filled in per phase: Phase 2 — header/tabs, view switcher, about-grid/pull/stats/band/closer Phase 3 — door, doors, door-card, replay Phase 4 — grid, cand card, controls, chips (hire view) Phase 5 — ticker, route/step, two-col, form-card, aside-card, phones (work view) Phase 7 — contact view ══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;} /* ── view switcher ── */ .hidden{display:none!important;} .wrap{max-width:1240px;margin:0 auto;padding:0 44px;} /* ── editorial section colors (Part 2) ────────────────────────── Each full-bleed section color needs its OWN correct text pairing — lime is too light for light text, ink is too dark for dark text. Use one of these on any section wrapper instead of picking bg/color separately, so the pairing is never picked wrong. */ body{background:var(--paper);color:var(--ed-ink);font-family:var(--sans);} .section-paper{background:var(--paper);color:var(--ed-ink);} .section-teal{background:var(--teal);color:#fff;} .section-lime{background:var(--lime);color:var(--ed-ink);} .section-ink{background:var(--ed-ink);color:#f5f8fb;} .section-teal a,.section-ink a{color:var(--lime);} .section-paper a,.section-lime a{color:var(--teal-ink);} /* full-bleed editorial section wrapper + the "chapter" spacing rhythm */ .ed-section{padding:96px 0;} .ed-sec-in{max-width:900px;} .ed-sec-in .ed-cap{display:block;margin-bottom:18px;} .ed-sec-in .ed-mega,.ed-sec-in .ed-display{margin-bottom:6px;} .ed-sec-in .ed-mega em{font-style:italic;} /* hand-drawn-border pill CTA — irregular corner radii + a slight rotation + an offset second outline fake a sketched/imperfect ink line rather than a crisp machine-drawn rounded-rect (Agents of Ishq's "hatched double-line border" pill, reinterpreted without hand-authored SVG path data). */ .ed-pill{position:relative;margin-top:28px;display:inline-flex;align-items:center; height:48px;padding:0 26px;background:transparent;border:2.5px solid currentColor; border-radius:22px 26px 20px 28px;font-family:var(--sans);font-size:14px;font-weight:700; color:inherit;cursor:pointer;transform:rotate(-0.6deg);transition:transform .15s ease;} .ed-pill::before{content:'';position:absolute;inset:-6px;border:1.5px solid currentColor; border-radius:26px 20px 28px 22px;opacity:.35;pointer-events:none;} .ed-pill:hover{transform:rotate(-0.6deg) translateY(-2px);} @media(max-width:640px){ .ed-section{padding:64px 0;} } /* ── flat-illustration hero (Part 3, current direction) — full-bleed video banner with a light content panel over the left side (not white text on a dark curtain), matching the manager's v3.html reference: badge, big two-tone italic wordmark, underline rule, lede, inline stat cards, CTAs. ── */ body:has(#view-home:not(.hidden)){background:var(--bg-light);} .fi-hero-banner{background:var(--bg-light);} /* dvh, not vh. On phones 100vh is the viewport with the URL bar RETRACTED, so a 100vh-tall hero extends underneath the browser chrome and the CTAs end up hidden behind it. 100dvh tracks the actually-visible height. The vh line stays first as the fallback for browsers without dvh. */ .fi-hero-stage{position:relative;overflow:hidden;width:100%; height:calc(100vh - 64px); height:calc(100dvh - 64px); min-height:560px;background:var(--bg-light-tint);} .fi-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 50%;display:block;} /* corner treatment: copy sits in the bottom-left corner of the full-page video instead of a mid-height left panel, so the video reads as the dominant full-bleed image; a dark bottom-up scrim + white text (was a light scrim + dark text) keeps the corner legible against footage without washing the video out. */ .fi-hero-tint{position:absolute;inset:0;background:transparent;pointer-events:none;} .fi-hero-scrim{position:absolute;inset:0; background:linear-gradient(to right,rgba(10,108,176,.3) 0%,rgba(10,108,176,.1) 30%,rgba(10,108,176,0) 45%),linear-gradient(to top,rgba(10,108,176,.5) 0%,rgba(10,108,176,.22) 22%,rgba(10,108,176,0) 40%); pointer-events:none;} .fi-hero-copy{position:absolute;left:6vw;right:6vw;bottom:8vh;max-width:560px;color:#fff;text-shadow:0 1px 3px rgba(4,30,56,.75),0 2px 18px rgba(4,30,56,.6);} .fi-hero-copy .hero-door,.fi-hero-copy button,.fi-hero-copy a{text-shadow:none;} .fi-hero-badge{display:inline-flex;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1px; text-transform:uppercase;color:#fff;background:var(--teal);padding:9px 18px;border-radius:24px;margin-bottom:24px;} .fi-h1{font-family:var(--hero-display);font-style:italic;font-weight:700;font-size:clamp(46px,6.4vw,80px); line-height:1;margin:0 0 14px;letter-spacing:-.5px;color:#fff;} .fi-h1 em{color:inherit;font-style:italic;} .fi-hero-rule{width:72px;height:3px;background:var(--lime);border-radius:2px;margin-bottom:18px;} .fi-lede{font-family:var(--sans);font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.86); margin:0 0 22px;max-width:460px;} /* Three facts, not three cards. These were solid white panels with borders and drop shadows sitting on top of the video, which made them compete with the two doors right above them -- five boxes stacked down one side of the hero. They are now just the numbers, divided by hairlines, reading straight off the footage. */ .fi-hero-stats{display:flex;align-items:stretch;margin-bottom:24px;flex-wrap:wrap;row-gap:12px;} .fi-hero-stat{padding:0 20px;border-left:1px solid rgba(255,255,255,.22);} .fi-hero-stat:first-child{padding-left:0;border-left:none;} .fi-hero-stat-n{font-family:var(--hero-display);font-style:italic;font-weight:700;font-size:23px; color:var(--lime);line-height:1;margin-bottom:4px;} .fi-hero-stat-l{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.7px; text-transform:uppercase;color:rgba(255,255,255,.62);} /* The two doors on the hero: "For youth" and "For employers", side by side, each with its own line of copy and its own button. Replaces a paragraph that had to describe both audiences in prose and a button row that gave no clue which button was meant for whom. Translucent rather than solid: they sit over the hero video, and a solid panel here would read as a card pasted on top of the film. */ .hero-doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;max-width:548px;} .hero-door{background:rgba(8,88,150,.78);border:1px solid rgba(255,255,255,.16); border-radius:11px;padding:15px 15px 16px;backdrop-filter:blur(6px);} .hero-door h4{font-family:var(--serif);font-size:15px;font-weight:700;color:#fff;margin:0 0 5px;} .hero-door p{font-family:var(--sans);font-size:12.5px;line-height:1.55; color:rgba(255,255,255,.78);margin:0 0 12px;} .hero-door-btn{display:inline-flex;align-items:center;gap:8px;height:37px;padding:0 15px; background:transparent;border:1.5px solid #fff;border-radius:8px;color:#fff; font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s;} .hero-door-btn:hover{background:rgba(255,255,255,.16);} .hero-door-btn.lime{background:var(--lime);border-color:var(--lime);color:#0b2e4a;} .hero-door-btn.lime:hover{background:#f0a800;border-color:#f0a800;} /* One above the other on a phone, where two columns would leave each door about twenty characters wide. Everything else here is about height. Most people open this on a phone, and stacked full-size doors pushed the second one, the stats and "Backed by" below the fold -- so the type steps down and the gaps close up until the whole hero fits on one screen. */ @media (max-width:640px){ .fi-h1{font-size:clamp(38px,11vw,52px);margin-bottom:11px;} .fi-hero-rule{width:58px;margin-bottom:14px;} .fi-lede{font-size:14px;line-height:1.6;margin-bottom:18px;} .hero-doors{grid-template-columns:1fr;gap:9px;max-width:none;margin-bottom:18px;} .hero-door{padding:13px 14px 14px;} .hero-door h4{font-size:14.5px;margin-bottom:3px;} .hero-door p{font-size:12px;margin-bottom:10px;} .hero-door-btn{height:35px;font-size:12px;padding:0 14px;} .fi-hero-stats{margin-bottom:18px;} .fi-hero-stat{padding:0 14px;} .fi-hero-stat-n{font-size:20px;} } .fi-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;} .fi-cta{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;background:var(--lime); color:#0b2e4a;border:none;border-radius:8px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;} .fi-cta:hover{background:#f0a800;} .fi-cta.ghost{background:transparent;border:1.5px solid #fff;color:#fff;} .fi-cta.ghost:hover{background:rgba(255,255,255,.14);} .fi-hero-foot{font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.8);} @media(max-width:860px){ /* 64px, not 56px -- the header is 64px tall at EVERY width, so subtracting 56 made the hero 8px too tall and pushed header+hero 8px past the viewport, giving the landing screen a permanent stray scroll. */ .fi-hero-stage{height:calc(100vh - 64px); height:calc(100dvh - 64px); min-height:520px;} .fi-hero-copy{left:22px;right:22px;bottom:28px;max-width:none;} .fi-h1{font-size:clamp(38px,11vw,56px);} } /* extreme-contrast editorial type, for use inside any .section-* */ .ed-mega{font-family:var(--serif);font-style:italic;font-weight:700;font-size:var(--size-mega); line-height:.98;letter-spacing:-2px;margin:0;text-wrap:balance;} .ed-display{font-family:var(--serif);font-weight:700;font-size:var(--size-display); line-height:1.04;letter-spacing:-1px;margin:0;text-wrap:balance;} .ed-h2{font-family:var(--serif);font-weight:700;font-size:var(--size-h2);line-height:1.14;margin:0;} .ed-dek{font-family:var(--sans);font-size:var(--size-body);line-height:1.6;font-weight:500; opacity:.82;margin:10px 0 0;max-width:640px;} .ed-cap{font-family:var(--mono);font-size:var(--size-caption);letter-spacing:.02em; text-transform:uppercase;opacity:.62;} /* ── header (editorial: light paper chrome, not the old dark bar) ── */ .hdr{height:64px;border-bottom:1.5px solid var(--ed-ink);display:flex;align-items:center;gap:28px; padding:0 44px;background:var(--paper);position:sticky;top:0;z-index:300;} .brand{background:none;border:none;padding:0;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;color:inherit;font-family:inherit;} .brand-name{font-family:var(--serif);font-style:italic;font-weight:700;font-size:19px;line-height:1;color:var(--ed-ink);} .brand-name span{color:var(--teal-ink);} .brand-sub{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ed-ink-2);margin-top:3px;} .tabs{display:flex;gap:4px;scrollbar-width:none;} .tabs::-webkit-scrollbar{display:none;} .tab{background:transparent;border:none;font-size:13px;font-weight:600;color:var(--ed-ink-2);white-space:nowrap;flex-shrink:0; padding:7px 15px;border-radius:var(--r-sm);font-family:var(--sans);cursor:pointer;transition:color .15s,background .15s;} .tab:hover{color:var(--ed-ink);} .tab[aria-current="true"]{background:transparent;color:var(--ed-ink);font-weight:700; box-shadow:inset 0 -3px 0 0 var(--lime);} .hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px;} .hdr-label{font-family:var(--mono);font-size:11px;color:var(--ed-ink-2);text-transform:uppercase;} .pill-count{min-width:26px;height:26px;padding:0 8px;display:flex;align-items:center;justify-content:center; background:var(--paper);border:1.5px solid var(--ed-ink);border-radius:13px; font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ed-ink);} .pill-count.on{background:var(--lime);border-color:var(--ed-ink);color:var(--ed-ink);} .btn-ghost{height:34px;padding:0 16px;background:none;border:1.5px solid var(--ed-ink); border-radius:7px;font-size:12px;font-weight:600;color:var(--ed-ink);font-family:var(--sans);cursor:pointer;} .btn-ghost:hover{background:var(--ed-ink);color:var(--paper);} /* hamburger + dropdown — keeps the main nav row down to the handful of links that matter (matches the manager's v3.html reference), tucking candidate count / HR login / contact into one menu instead of crowding the bar. */ .hdr-menu-btn{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center; background:none;border:1.5px solid var(--ed-ink);border-radius:9px;color:var(--ed-ink);cursor:pointer;flex-shrink:0;} .hdr-menu-btn:hover{background:var(--bg-light-tint);} .hdr-menu{position:absolute;top:calc(100% + 10px);right:44px;min-width:200px;background:var(--surface-1); border:1px solid rgba(11,46,74,.1);border-radius:12px;box-shadow:0 12px 32px rgba(11,46,74,.14); padding:8px;display:none;flex-direction:column;gap:2px;z-index:400;} .hdr-menu.open{display:flex;} .hdr-menu-label{font-family:var(--mono);font-size:11px;color:var(--fi-ink-2);text-transform:uppercase; padding:8px 12px 6px;letter-spacing:.4px;} .hdr-menu-item{background:none;border:none;text-align:left;padding:9px 12px;border-radius:7px; font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--fi-ink);cursor:pointer; text-decoration:none;display:block;} .hdr-menu-item:hover{background:var(--bg-light-tint);} .lang-switch{display:flex;gap:4px;padding:4px 4px 8px;margin-bottom:4px;border-bottom:1px solid var(--line);} .lang-switch button{flex:1;background:none;border:1.5px solid var(--line-d);border-radius:7px;padding:6px 4px; font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--fi-ink-2);cursor:pointer;transition:all .15s;} .lang-switch button:hover{border-color:var(--teal);color:var(--fi-ink);} .lang-switch button.active{background:var(--teal);border-color:var(--teal);color:#fff;} @media(max-width:700px){ .hdr{padding:0 16px;height:auto;flex-wrap:wrap;gap:12px;padding-top:10px;padding-bottom:10px;} .hdr-right{width:100%;margin-left:0;} .tabs{overflow-x:auto;max-width:100%;} } /* ── shared type (used across views) ── */ .page-h1{font-family:var(--serif);font-size:56px;font-weight:700;line-height:1.06; letter-spacing:-.8px;margin:0 0 20px;color:var(--ed-ink);max-width:990px;} .page-h1 em{font-style:italic;color:var(--teal-ink);} .lede{font-size:16.5px;line-height:1.72;color:var(--ed-ink-2);margin:0;max-width:790px;} .h2{font-family:var(--serif);font-size:40px;font-weight:700;line-height:1.14;margin:0 0 24px; color:var(--ed-ink);max-width:760px;} .quote{font-family:var(--serif);font-size:30px;font-weight:400;font-style:italic;line-height:1.5; color:var(--ed-ink);margin:0;max-width:900px;} /* ── about page ── This whole block used to assume a dark ambient page background (white/ pale text, lime accents that pop on dark) — but "Our story" actually renders on the light --paper background, which made most of its text render near-invisible (a genuine bug, not a caching artifact — confirmed against the live site with an automated contrast scan, not just eyeballed). .band/.closer/.why-cta-card are unaffected: those set their own dark background locally, so white text there is correct as-is. ── */ .about-grid{display:grid;grid-template-columns:minmax(0,700px) 1fr;gap:60px;padding-top:38px;} .about-grid p{font-size:17px;line-height:1.78;color:var(--ed-ink-2);margin:0;} .about-grid p.lead{color:var(--ed-ink);} .pull{font-family:var(--serif);font-size:27px;font-style:italic;line-height:1.5; color:var(--teal-ink)!important;margin:6px 0!important;} .stats{border-left:1px solid rgba(11,46,74,.12);padding-left:26px;display:flex; flex-direction:column;gap:24px;} .stat-n{font-family:var(--serif);font-style:italic;font-size:34px;color:var(--teal-light);line-height:1;} .stat-l{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ed-ink-2);margin-top:5px;} .band{margin:50px 0 0;padding:44px;background:var(--band); border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);} .band p{max-width:960px;margin:0 auto;font-family:var(--serif);font-size:29px;font-style:italic; line-height:1.55;color:#fff;} .closer{background:var(--card);border:1.5px solid rgba(255,181,17,.26);border-radius:var(--r-xl); padding:38px 42px;display:flex;align-items:center;gap:38px;} .closer p{flex:1;font-family:var(--serif);font-size:26px;font-style:italic;line-height:1.55; color:#fff;margin:0;} .closer button{flex:none;height:44px;padding:0 24px;background:var(--lime);border:none; border-radius:var(--r-md);font-size:13.5px;font-weight:700;color:#0b2e4a;font-family:var(--sans);cursor:pointer;} .closer button:hover{opacity:.9;} .about-wrap-new{max-width:1240px;margin:0 auto;padding:74px 44px 0;} .why-cta{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .why-cta-card{background:var(--card);border:1.5px solid rgba(95,180,240,.24);border-radius:14px;padding:26px 24px;} .why-cta-card.lime{border-color:rgba(255,181,17,.26);} .why-cta-card h4{font-family:var(--serif);font-size:16px;font-weight:700;color:#fff;margin:0 0 8px;} .why-cta-card p{font-size:13px;line-height:1.65;margin:0;color:var(--text-2);} .why-cta-card .btn-add{height:32px;padding:0 16px;border-radius:var(--r-sm);font-size:11.5px;border:none;font-family:var(--sans);cursor:pointer;background:var(--teal);color:#fff;font-weight:700;} .why-cta-card .btn-add:hover{opacity:.88;} /* ── door (landing) ── */ .door{position:relative;height:840px;overflow:hidden;background:var(--ink);} .door-shutter-holder{position:absolute;inset:0;z-index:1;} .door-shutter-holder pk-shutter{display:block;width:100%;height:840px;} .door-overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column; justify-content:space-between;padding:56px 44px 44px;pointer-events:none; background:linear-gradient(100deg,rgba(5,22,40,.96) 0%,rgba(5,22,40,.8) 30%,rgba(5,22,40,.16) 58%,rgba(5,22,40,.1) 100%), linear-gradient(180deg,rgba(5,22,40,0) 58%,rgba(5,22,40,.9) 100%);} .eyebrow{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:20px; background:var(--lime);font-size:10.5px;font-weight:800;letter-spacing:1.2px; text-transform:uppercase;color:#0b2e4a;font-family:var(--sans);} .door h1{font-family:var(--serif);font-size:92px;font-weight:700;font-style:italic;line-height:.94; letter-spacing:-2.5px;margin:20px 0 0;color:#fff;} .door h1 em{color:var(--lime);font-style:italic;} .door p{font-size:17px;line-height:1.6;color:#bcd2e3;margin:18px 0 0;max-width:430px;} .doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;pointer-events:auto;} .door-card{text-align:left;background:rgba(6,30,56,.9);border:1.5px solid rgba(95,180,240,.34); border-radius:var(--r-xl);padding:30px 32px;transition:transform .16s ease,border-color .16s ease; cursor:pointer;font-family:var(--sans);color:inherit;} .door-card:hover{transform:translateY(-4px);border-color:var(--teal-light);} .door-card.lime{border-color:rgba(255,181,17,.34);} .door-card.lime:hover{border-color:var(--lime);} .rule{width:32px;height:4px;background:var(--teal-light);border-radius:2px;} .rule.lime{background:var(--lime);} .door-card h2{font-family:var(--serif);font-size:30px;font-weight:700;color:#fff;margin:18px 0 8px;} .door-card p{font-size:13.5px;line-height:1.65;color:var(--text-2);margin:0 0 18px;max-width:none;} .door-card .go{font-size:13px;font-weight:700;color:var(--teal-light);} .door-card.lime .go{color:var(--lime);} .replay{position:absolute;right:44px;top:26px;z-index:5;height:32px;padding:0 15px; background:rgba(6,30,56,.8);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm); font-size:11.5px;font-weight:600;color:#dcebf7;font-family:var(--sans);cursor:pointer;} .replay:hover{border-color:var(--lime);color:var(--lime);} @media(max-width:1100px){ .door h1{font-size:64px;letter-spacing:-1.5px;} } @media(max-width:720px){ .door{height:auto;} .door-shutter-holder pk-shutter{height:460px;} .door-overlay{position:static;padding:28px 20px;background:none;} .door h1{font-size:44px;letter-spacing:-1px;} .doors{grid-template-columns:1fr;margin-top:28px;} .replay{top:auto;bottom:16px;right:16px;} } /* ── how-it-works, 3D scene (Part 1, parked/unused — kept working, not deleted, in case 3D comes back later) ── */ .hiw3d-section{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:64px 0 72px;} .hiw3d-section .hiw-p{color:var(--text-2)!important;} .hiw3d-stage{position:relative;max-width:1000px;margin:0 auto 40px;padding:0 40px;} pk-hiw3d{display:block;width:100%;height:340px;cursor:default;} pk-hiw3d.hot{cursor:pointer;} .hiw3d-hint{position:absolute;left:56px;bottom:14px;font-size:11px;font-weight:600; letter-spacing:.4px;color:var(--text-3);pointer-events:none;} @media(max-width:640px){ .hiw3d-stage{padding:0 20px;} pk-hiw3d{height:260px;} .hiw3d-hint{left:26px;} } /* ── how-it-works, flat-illustration (Part 3, current) — light, matches the door view's hero treatment. Page 2 of "the journey": getting found. ── */ .fi-hiw{background:var(--bg-light);border-top:1px solid var(--bg-light-tint);border-bottom:1px solid var(--bg-light-tint); padding:64px 0 72px;} .fi-hiw .hiw-p{color:var(--fi-ink-2)!important;} .fi-hiw-stage{position:relative;max-width:1000px;height:420px;margin:0 auto 40px;padding:0 40px;} .fi-hiw-stage svg{width:100%;height:100%;overflow:visible;} @media(max-width:640px){ .fi-hiw-stage{padding:0 20px;height:320px;} } .fi-hiw-label{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.2px; text-transform:uppercase;color:var(--fi-ink-2);margin-bottom:16px;} .fi-steps{position:relative;max-width:1180px;margin:0 auto 48px;padding:0 40px;display:grid; grid-template-columns:repeat(4,1fr);gap:20px;} /* connecting "journey" rail across the 4 steps, matching the manager's v3.html reference — a threaded line with a dot animating step-to-step, not just static numbered cards. Only makes sense at the 4-col layout. */ .fi-steps-rail{position:absolute;top:-14px;left:74px;right:74px;height:2px; background:var(--bg-light-tint);z-index:0;pointer-events:none;} .fi-steps-dot{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%; background:var(--lime);transform:translate(-50%,-50%); box-shadow:0 0 0 5px var(--lime-soft); animation:fiStepsDotMove 7s cubic-bezier(.65,0,.35,1) infinite;} @keyframes fiStepsDotMove{ 0%,6%{left:0%;} 27%,33%{left:33.33%;} 60%,66%{left:66.66%;} 94%,100%{left:100%;} } @media(prefers-reduced-motion:reduce){.fi-steps-dot{animation:none;left:0%;}} @media(max-width:1000px){.fi-steps-rail{display:none;}} .fi-step{background:var(--surface-1);border:1px solid var(--surface-line);border-radius:14px;padding:18px 18px 22px; box-shadow:0 4px 20px rgba(11,46,74,.06);position:relative;min-width:0;} .fi-step-art{border-radius:8px;overflow:hidden;background:var(--bg-light-tint);margin-bottom:14px;aspect-ratio:5/3;} .fi-step-art svg{width:100%;height:100%;display:block;} .fi-step-art img{width:100%;height:100%;display:block;object-fit:cover;} .fi-step-num{position:absolute;top:-14px;left:14px;width:28px;height:28px;border-radius:50%; background:var(--teal);color:#fff;font-family:var(--sans);font-weight:800;font-size:13px; display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(11,46,74,.25);} .fi-step-num.lime{background:var(--lime);color:var(--fi-ink);} .fi-step h3{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--fi-ink);margin:6px 0 6px;} .fi-step p{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--fi-ink-2);margin:0;} @media(max-width:1000px){ .fi-steps{grid-template-columns:1fr 1fr;} } @media(max-width:640px){ .fi-steps{grid-template-columns:1fr;padding:0 20px;} } /* ── Training Journey page ── a real narrative path, not a static grid: a bold hero states the offer, then a single connecting rail runs top to bottom through all 5 sessions with a milestone break where the story's actual turning point happens (getting selected) -- that break is content, not decoration: it's the one thing that changes what training you're even eligible for. */ .jt-hero{background:linear-gradient(135deg,var(--teal) 0%,#0a5f9c 100%);color:#fff;padding:72px 0 60px;} .jt-eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--lime);margin-bottom:16px;} .jt-h1{font-family:var(--serif);font-size:clamp(38px,5.4vw,58px);font-weight:700;line-height:1.05;margin:0 0 18px;} .jt-h1 em{font-style:italic;color:var(--lime);} .jt-lede{font-family:var(--sans);font-size:16px;line-height:1.85;color:rgba(255,255,255,.86);max-width:62ch;} .jt-timeline-section{background:var(--bg-light);padding:64px 0 20px;} .jt-timeline{position:relative;max-width:760px;margin:0 auto;padding-left:68px;} .jt-rail{position:absolute;left:23px;top:6px;bottom:60px;width:2px;background:var(--bg-light-tint);} .jt-item{position:relative;margin-bottom:36px;} .jt-node{position:absolute;left:-68px;top:0;width:48px;height:48px;border-radius:50%;background:var(--teal);color:#fff; display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:21px;font-weight:700; box-shadow:0 6px 16px rgba(14,144,232,.35);z-index:1;} .jt-node.lime{background:var(--lime);color:var(--fi-ink);box-shadow:0 6px 16px rgba(255,181,17,.5);} .jt-card{background:var(--surface-1);border:1px solid var(--surface-line);border-radius:16px;padding:26px 28px; box-shadow:0 6px 24px rgba(11,46,74,.07);border-left:4px solid var(--teal);} .jt-card.lime{border-left-color:var(--lime);} .jt-card-icon{width:42px;height:42px;border-radius:50%;background:var(--bg-light-tint);color:var(--teal-ink); display:flex;align-items:center;justify-content:center;margin-bottom:14px;} .jt-card-icon svg{width:21px;height:21px;} .jt-card h3{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--fi-ink);margin:0 0 8px;} .jt-card p{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--fi-ink-2);margin:0;} .jt-milestone{position:relative;margin:-6px 0 30px -68px;padding-left:68px;} .jt-milestone::before{content:'';position:absolute;left:15px;top:50%;width:18px;height:18px;border-radius:50%; background:var(--fi-ink);border:3px solid var(--bg-light);z-index:1;transform:translateY(-50%);} .jt-milestone span{display:inline-block;background:var(--fi-ink);color:#fff;font-family:var(--sans); font-weight:700;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;padding:9px 18px;border-radius:20px;} @media(max-width:640px){ .jt-hero{padding:52px 0 44px;} .jt-timeline{padding-left:52px;} .jt-rail{left:15px;} .jt-node{left:-52px;width:36px;height:36px;font-size:16px;} .jt-card{padding:20px 18px;} .jt-milestone{margin-left:-52px;padding-left:52px;} .jt-milestone::before{left:7px;} } /* ── sectors band — "the range of first jobs", three vignettes (retail / office & data entry / technical & healthcare). Was flat-vector SVG illustrations; swapped for the manager's own reference photos. The technical & healthcare card gets two images side by side, matching the two-figure layout that card always had. ── */ .fi-sectors{background:var(--bg-light-tint);padding:64px 0 72px;} .fi-sectors-in{max-width:1180px;margin:0 auto 32px;padding:0 40px;} .fi-sectors-in h2{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--fi-ink);margin:6px 0 8px;} .fi-sectors-in p{font-family:var(--sans);font-size:14.5px;color:var(--fi-ink-2);margin:0;max-width:560px;} .fi-sectors-grid{max-width:1180px;margin:0 auto;padding:0 40px;display:grid; grid-template-columns:repeat(3,1fr);gap:22px;} .fi-sector-card{background:var(--surface-1);border-radius:14px;overflow:hidden; box-shadow:0 4px 20px rgba(11,46,74,.06); opacity:0;transform:translateY(28px);filter:blur(6px); transition:opacity .7s ease,transform .7s ease,filter .7s ease;} .fi-sector-card.in-view{opacity:1;transform:translateY(0);filter:blur(0);} .fi-sector-card:nth-child(2){transition-delay:.1s;} .fi-sector-card:nth-child(3){transition-delay:.2s;} /* Hover lift. Scoped to .in-view because the reveal above animates the same transform property -- unscoped, hovering a not-yet-revealed card would yank it to its lifted position and skip the reveal entirely. The transition is re-declared short here so the lift feels immediate (.22s) rather than inheriting the .7s reveal easing; releasing settles back over the reveal duration, which reads as intentional rather than sluggish. -4px matches the lift already used elsewhere in the codebase (views.css .card:hover, styles.css line 164) instead of inventing a new one. */ .fi-sector-card.in-view:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(11,46,74,.14); transition:transform .22s ease,box-shadow .22s ease;} @media(prefers-reduced-motion:reduce){ .fi-sector-card{opacity:1;transform:none;filter:none;transition:none;} /* Keep the shadow cue on hover, drop the movement. */ .fi-sector-card.in-view:hover{transform:none;transition:box-shadow .22s ease;} } /* Generic scroll-reveal -- fade + rise + soften into focus. Applied via the .reveal class + the shared IntersectionObserver in boot() (see script.js) to whatever section wants this treatment, not just sectors. */ .reveal{opacity:0;transform:translateY(26px);filter:blur(5px); transition:opacity .65s ease,transform .65s ease,filter .65s ease;} .reveal.in-view{opacity:1;transform:translateY(0);filter:blur(0);} .reveal-stagger>*{opacity:0;transform:translateY(26px);filter:blur(5px); transition:opacity .65s ease,transform .65s ease,filter .65s ease;} .reveal-stagger.in-view>*{opacity:1;transform:translateY(0);filter:blur(0);} .reveal-stagger.in-view>*:nth-child(1){transition-delay:0s;} .reveal-stagger.in-view>*:nth-child(2){transition-delay:.08s;} .reveal-stagger.in-view>*:nth-child(3){transition-delay:.16s;} .reveal-stagger.in-view>*:nth-child(4){transition-delay:.24s;} @media(prefers-reduced-motion:reduce){ .reveal,.reveal-stagger>*{opacity:1;transform:none;filter:none;transition:none;} } .fi-sector-art{aspect-ratio:4/3;background:var(--bg-light);overflow:hidden;} .fi-sector-art img{width:100%;height:100%;object-fit:cover;display:block;} .fi-sector-art--split{display:flex;} .fi-sector-art--split img{width:50%;} .fi-sector-body{padding:16px 18px 20px;} .fi-sector-tag{display:inline-flex;font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.6px;text-transform:uppercase;color:var(--teal-ink);background:var(--bg-light-tint); padding:4px 10px;border-radius:20px;margin-bottom:10px;} .fi-sector-card h3{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--fi-ink);margin:0 0 6px;} .fi-sector-card p{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--fi-ink-2);margin:0;} @media(max-width:1000px){ .fi-sectors-grid{grid-template-columns:1fr 1fr;} } @media(max-width:640px){ .fi-sectors-in{padding:0 20px;} .fi-sectors-grid{grid-template-columns:1fr;padding:0 20px;} } @media(max-width:1100px){ .about-grid{grid-template-columns:1fr;gap:28px;} .page-h1{font-size:42px;} } @media(max-width:720px){ .wrap,.hdr{padding-left:20px;padding-right:20px;} .about-wrap-new,.why-in-new{padding-left:20px;padding-right:20px;} .closer{flex-direction:column;align-items:flex-start;gap:22px;} } /* ── legal pages (Privacy / Terms / Grievance) — same prose treatment as the About page (page-h1, wrap, editorial ink tokens), plus a few small components these three actually need that About doesn't: dated-version meta, a jump nav, callout asides, and a grievance contact table. ── */ .legal-wrap{max-width:760px;margin:0 auto;padding:0 44px 90px;} .legal-meta{font-family:var(--sans);font-size:12.5px;color:var(--ed-ink-2);margin-top:10px;} .legal-nav{display:flex;gap:18px;flex-wrap:wrap;margin:28px 0 8px;padding-bottom:20px;border-bottom:1px solid var(--ed-line);} .legal-nav a{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--teal-ink);text-decoration:none;} .legal-nav a:hover{text-decoration:underline;} .legal-wrap h2{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ed-ink);margin:34px 0 10px;} .legal-wrap h2:first-of-type{margin-top:8px;} .legal-wrap p{font-family:var(--sans);font-size:15px;line-height:1.75;color:var(--ed-ink-2);margin:0 0 14px;max-width:64ch;} .legal-wrap ul{margin:0 0 14px;padding-left:22px;} .legal-wrap li{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--ed-ink-2);margin-bottom:8px;max-width:60ch;} .legal-wrap strong{color:var(--ed-ink);} .legal-callout{background:var(--bg-light-tint);border-left:3px solid var(--lime);border-radius:0 10px 10px 0; padding:14px 18px;margin:16px 0 20px;font-family:var(--sans);font-size:13.5px;line-height:1.65;color:var(--fi-ink-2);} .legal-callout strong{color:var(--fi-ink);} .grievance-table{border:1px solid var(--ed-line);border-radius:12px;overflow:hidden;margin:20px 0 28px;background:var(--surface-1);} .grievance-row{display:flex;justify-content:space-between;gap:16px;padding:14px 18px; border-bottom:1px solid var(--ed-line);font-family:var(--sans);font-size:14px;} .grievance-row:last-child{border-bottom:none;} .grievance-row .k{color:var(--ed-ink-2);font-weight:600;} .grievance-row .v{color:var(--ed-ink);font-weight:700;text-align:right;} .legal-track{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 28px;} .legal-track-card{border:1.5px solid var(--ed-line);border-radius:12px;padding:18px;} .legal-track-card h4{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ed-ink);margin:0 0 6px;} .legal-track-card p{font-size:13.5px;margin:0;} @media(max-width:640px){ .legal-wrap{padding:0 20px 70px;} .legal-track{grid-template-columns:1fr;} } /* ── grievance dashboard (team only) ── */ .admin-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:12.5px;min-width:880px;} .admin-table th{text-align:left;padding:10px 12px;background:var(--bg-light-tint);color:var(--fi-ink); font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-bottom:2px solid var(--line);} .admin-table td{padding:12px;border-bottom:1px solid var(--line);color:var(--fi-ink-2);vertical-align:top;} .admin-table tr:last-child td{border-bottom:none;} .admin-table select{font-family:var(--sans);font-size:12px;padding:5px 8px;border-radius:6px;border:1px solid var(--line-d);background:var(--surface-1);} /* ── candidate profile page — was a modal, now a real page ── */ .pf-wrap{max-width:1080px;margin:0 auto;padding:32px 40px 90px;} .pf-back{background:none;border:1px solid var(--line);border-radius:20px;padding:9px 18px; font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--fi-ink-2);cursor:pointer;margin-bottom:28px;} .pf-back:hover{border-color:var(--teal);color:var(--teal-ink);} .pf-grid{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;} .pf-header{display:flex;align-items:center;gap:20px;margin-bottom:18px;} .pf-avatar{width:76px;height:76px;border-radius:50%;background:var(--teal);color:#fff; display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:30px;font-weight:700;flex-shrink:0;} .pf-name{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--fi-ink);margin:0 0 4px;} .pf-location{font-size:13.5px;color:var(--fi-ink-2);} .pf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;} .pf-tags span{display:inline-flex;background:var(--bg-light-tint);color:var(--teal-ink); font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:20px;} .pf-card{background:var(--surface-1);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:18px;} .pf-card-label{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--fi-ink-2);margin-bottom:10px;} .pf-summary{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--fi-ink);line-height:1.5;} .pf-training{background:var(--bg-light-tint);border-color:transparent;} .pf-training-head{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--fi-ink);margin-bottom:12px;} .pf-training ul{margin:0;padding-left:20px;} .pf-training li{font-size:13.5px;color:var(--fi-ink-2);line-height:1.8;} .pf-similar-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--fi-ink-2);font-weight:700;margin-bottom:16px;} .pf-similar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .pf-similar-grid button{text-align:left;background:var(--surface-1);border:1.5px solid var(--line);border-radius:11px; padding:15px 16px;font-family:var(--sans);cursor:pointer;transition:transform .16s ease,border-color .16s ease;} .pf-similar-grid button:hover{transform:translateY(-3px);border-color:var(--teal-mid);} .pf-similar-grid .sm-name{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--fi-ink);} .pf-similar-grid .sm-sector{font-size:11.5px;color:var(--fi-ink-2);margin-top:5px;} .pf-similar-grid .sm-loc{font-size:10.5px;color:var(--ink-4);margin-top:5px;} .pf-side-card{background:var(--surface-1);border:1.5px solid var(--line);border-radius:16px;padding:26px;position:sticky;top:84px;} .pf-side-card h3{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--fi-ink);margin:0 0 9px;} .pf-side-card p{font-size:13px;line-height:1.65;color:var(--fi-ink-2);margin:0 0 20px;} .pf-outline-btn{width:100%;height:44px;background:var(--surface-1);border:1.5px solid var(--teal);border-radius:9px; font-family:var(--sans);font-size:13px;font-weight:700;color:var(--teal-ink);cursor:pointer;margin-bottom:10px;transition:background .15s;} .pf-outline-btn:hover{background:var(--bg-light-tint);} .pf-ghost-btn{width:100%;height:44px;background:none;border:1.5px solid var(--line-d);border-radius:9px; font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--fi-ink-2);cursor:pointer;transition:border-color .15s,color .15s;} .pf-ghost-btn:hover{border-color:var(--teal);color:var(--teal-ink);} .pf-info-list{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;} .pf-info-list div{display:flex;justify-content:space-between;font-size:12.5px;} .pf-info-list span:first-child{color:var(--ink-4);} .pf-info-list span:last-child{color:var(--fi-ink);font-weight:600;} /* — account page: sidebar + panel, like a real settings page — */ .acct-shell{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start;} .acct-side{background:var(--surface-1);border:1px solid var(--line);border-radius:14px;padding:28px 22px;text-align:center;position:sticky;top:90px;} .acct-avatar{width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;display:flex; align-items:center;justify-content:center;font-size:22px;font-weight:700;margin:0 auto 14px;font-family:var(--sans);} .acct-name{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--fi-ink);} .acct-sub{font-size:12.5px;color:var(--fi-ink-2);margin-top:2px;} .acct-email{font-size:11px;color:var(--ink-4);margin-top:4px;word-break:break-all;} .acct-nav{display:flex;flex-direction:column;gap:2px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:left;} .acct-nav-item{background:none;border:none;text-align:left;padding:10px 12px;border-radius:8px; font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--fi-ink-2);cursor:pointer;transition:all .15s;} .acct-nav-item:hover{background:var(--bg-light-tint);color:var(--fi-ink);} .acct-nav-item.active{background:var(--teal-soft,rgba(14,144,232,.12));color:var(--teal-ink);} .acct-signout{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);width:100%;background:none; border:none;font-family:var(--sans);font-size:12px;color:var(--ink-4);cursor:pointer;text-align:center;} .acct-signout:hover{color:var(--fi-ink);} .acct-main{min-width:0;} .acct-panel{background:var(--surface-1);border:1px solid var(--line);border-radius:14px;padding:30px 32px;} .acct-panel+.acct-panel{margin-top:20px;} .acct-panel h2{font-family:var(--serif);font-size:19px;margin:0 0 4px;color:var(--fi-ink);} .acct-panel-sub{font-size:12.5px;color:var(--ink-4);margin-bottom:22px;} .acct-hr{border:none;border-top:1px solid var(--line);margin:26px 0;} .acct-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .acct-danger{border-color:rgba(197,64,54,.3);} .acct-danger h2{color:#c54036;} .acct-nav-item .aci{margin-right:9px;font-size:14px;} .acct-crumb{font-size:12px;color:var(--ink-4);margin-bottom:6px;} .acct-crumb a{color:var(--ink-4);cursor:pointer;text-decoration:none;} .acct-crumb a:hover{color:var(--teal-ink);} .acct-crumb .cur{color:var(--fi-ink);font-weight:600;} .acct-section{display:grid;grid-template-columns:230px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--line);} .acct-section:first-of-type{padding-top:0;} .acct-section:last-of-type{border-bottom:none;} .acct-section-head h3{font-family:var(--serif);font-size:16px;margin:0 0 6px;color:var(--fi-ink);} .acct-section-head p{font-size:12.5px;color:var(--ink-4);line-height:1.55;margin:0;} .acct-section-fields{display:flex;flex-direction:column;gap:14px;align-items:flex-start;} .acct-section-fields>.acct-field-row,.acct-section-fields>div:not(.acct-field-row){width:100%;} @media(max-width:700px){.acct-section{grid-template-columns:1fr;gap:10px;}} @media(max-width:800px){ .acct-shell{grid-template-columns:1fr;} .acct-side{position:static;text-align:left;display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .acct-side .acct-nav{flex-direction:row;flex-wrap:wrap;margin-top:0;padding-top:0;border-top:none;width:100%;order:3;} .acct-side .acct-avatar{margin:0;} .acct-signout{width:auto;margin-top:0;padding-top:0;border-top:none;order:4;} .acct-panel{padding:22px 20px;} .acct-field-row{grid-template-columns:1fr;} } @media(max-width:860px){ .pf-grid{grid-template-columns:1fr;} .pf-similar-grid{grid-template-columns:1fr 1fr;} .pf-side-card{position:static;} } @media(max-width:640px){ .pf-wrap{padding:24px 20px 70px;} .pf-similar-grid{grid-template-columns:1fr;} } /* ══════════════════════════════════════════════════════════════════════ RESPONSIVE HEADER FIX Measured before: @800px .hdr-right ran to x=999 in an 800px viewport — the Upload CTA and hamburger were 199px off-screen and unreachable. @375px the bar wrapped to 3 rows / 147px (18% of screen) and showed the tab strip AND the hamburger, with 342px of nav scrolled off behind a hidden scrollbar. Appended (not edited in place) so these override the earlier max-width:700px block by source order. ══════════════════════════════════════════════════════════════════════ */ /* 1 — Collapse primary nav into the hamburger before it can overflow. Was 1000px for 6 tabs. Adding "Training Journey" made a 7th, and at 1001px that pushed the CTA 119px off-screen -- measured, not guessed. Seven tabs need ~1120px at the old 15px padding; trimming the tab padding to 11px buys back most of that, so the nav returns at 1076px instead of being hidden until 1120. Boundaries measured, not guessed: 1076 is clean, 1075 falls back to the hamburger, both with 0 overflow. */ .hdr-menu-nav{display:none;flex-direction:column;gap:2px; padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line-d);} @media(min-width:1076px) and (max-width:1300px){ /* Only tighten where space is actually short; roomy screens keep the original, more generous rhythm. */ .tab{padding-left:11px;padding-right:11px;} } @media(max-width:1075px){ .tabs{display:none;} .hdr-menu-nav{display:flex;} } /* 2 — Hard guarantee that nothing escapes the bar horizontally. */ .hdr{min-width:0;} .brand{min-width:0;flex-shrink:1;} .brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .hdr-right{flex-shrink:0;} /* 3 — One row at a constant 64px at every width. */ @media(max-width:700px){ .hdr{padding:0 16px;height:64px;flex-wrap:nowrap;gap:14px;} .hdr-right{width:auto;margin-left:auto;} .hdr-menu{right:16px;left:16px;min-width:0;} } /* 4 — Reclaim width on phones: the decorative sub-line goes; the brand name and the CTA both stay. Measured at 360px in en/hi/mr: "Mr Candidate" renders at its full width untruncated even against the widest CTA label (Marathi, 174px), so there is no width justification for hiding it. Guard 2 above ellipsizes it if a narrower device ever does run out of room. */ @media(max-width:560px){ /* .brand-sub was hidden here; it's now hidden at every width (rule 6 below). */ .btn-add{padding:0 12px;font-size:12.5px;} } /* 5 — Logo steps with the device instead of a flat 28px everywhere. The logo is the round Mr Candidate badge (1:1), so both axes are set. flex-shrink:0 keeps the nav from compressing it on narrow screens. */ .wm-logo{height:40px;width:40px;flex-shrink:0;border-radius:50%;} @media(max-width:560px){.wm-logo{height:34px;width:34px;}} @media(min-width:1001px){.wm-logo{height:44px;width:44px;}} /* 6 — The badge's own lettering is too small to read in the header, so the name is set beside it. The strapline stays hidden. */ .brand-sub{display:none;} /* ══ cookie consent ═══════════════════════════════════════════════════════ Sits at 350: above the sticky header (300), below modals (400+) so it can never cover a sign-in dialog. Nothing here tracks anyone — the analytics script is only injected after an explicit Accept. */ /* Explicit #fff, NOT var(--card) — that token is #0b2e4a, a leftover from the legacy dark theme, and it puts near-black ink on a near-black bar. */ .ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:350; background:var(--surface-1);border-top:1.5px solid var(--ed-ink); box-shadow:0 -6px 28px rgba(11,46,74,.10);} .ck-in{max-width:1240px;margin:0 auto;padding:16px 44px; display:flex;align-items:center;gap:20px;} .ck-mark{flex-shrink:0;width:30px;height:30px;color:var(--teal-ink);} .ck-copy{flex:1;min-width:0;} .ck-copy p{margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.6; color:var(--ed-ink);max-width:78ch;} .ck-copy a{color:var(--teal-ink);font-weight:700;text-decoration:underline; text-underline-offset:2px;cursor:pointer;} .ck-copy a:hover{color:var(--ed-ink);} .ck-acts{flex-shrink:0;display:flex;align-items:center;gap:10px;} .ck-btn{height:40px;padding:0 20px;border-radius:22px;font-family:var(--sans); font-size:12.5px;font-weight:700;letter-spacing:.3px;cursor:pointer; white-space:nowrap;transition:background .14s,color .14s,transform .14s;} .ck-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;} .ck-ghost{background:transparent;border:1.5px solid var(--ed-ink);color:var(--ed-ink);} .ck-ghost:hover{background:var(--ed-ink);color:#fff;} .ck-solid{background:var(--teal);border:1.5px solid var(--teal);color:#fff;} .ck-solid:hover{background:var(--ed-ink);border-color:var(--ed-ink);transform:translateY(-1px);} /* preferences drawer — collapsed until "Manage preferences" */ .ck-prefs{border-top:1px solid var(--ed-line);background:var(--paper);} .ck-prefs[hidden]{display:none;} .ck-prefs-in{max-width:1240px;margin:0 auto;padding:18px 44px 20px;} .ck-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;} .ck-row+.ck-row{border-top:1px solid var(--ed-line);} .ck-row-txt{flex:1;min-width:0;} .ck-row-h{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ed-ink);} .ck-row-d{font-family:var(--sans);font-size:12.5px;line-height:1.55; color:var(--ed-ink-2);margin-top:3px;max-width:72ch;} .ck-tag{font-family:var(--mono);font-size:10px;letter-spacing:1px; text-transform:uppercase;color:var(--ed-ink-2);flex-shrink:0;padding-top:2px;} /* switch */ .ck-sw{flex-shrink:0;position:relative;width:44px;height:26px;} .ck-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;} .ck-sw span{position:absolute;inset:0;border-radius:13px;background:#cfcabd; border:1.5px solid var(--ed-ink);transition:background .16s;pointer-events:none;} .ck-sw span::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px; border-radius:50%;background:#fff;border:1.5px solid var(--ed-ink); transition:transform .16s;} .ck-sw input:checked+span{background:var(--lime);} .ck-sw input:checked+span::after{transform:translateX(18px);} .ck-sw input:disabled+span{opacity:.55;} .ck-sw input:disabled{cursor:not-allowed;} .ck-sw input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px;} @media(max-width:860px){ .ck-in{padding:14px 20px;flex-wrap:wrap;gap:12px;} .ck-mark{width:24px;height:24px;} .ck-copy{flex-basis:100%;order:2;} .ck-mark{order:1;} .ck-acts{flex-basis:100%;order:3;} /* 46px, not the desktop 40 — a mis-tap here sets the wrong consent, so these clear the 44px touch minimum comfortably. */ .ck-btn{flex:1;padding:0 12px;height:46px;} .ck-prefs-in{padding:16px 20px 18px;} } @media(max-width:560px){ /* Reject and Accept share a row; "Manage preferences" takes its own above them. Three stacked full-width pills pushed the bar to ~half the screen. */ .ck-acts{flex-wrap:wrap;} .ck-in .ck-btn{flex:1 1 calc(50% - 5px);} .ck-in #ck-prefs-btn{flex-basis:100%;} .ck-row{flex-wrap:wrap;} } @media(prefers-reduced-motion:reduce){ .ck-btn,.ck-sw span,.ck-sw span::after{transition:none;} .ck-solid:hover{transform:none;} } /* ══ backed-by credit ══════════════════════════════════════════════════ Appears at the foot of the home page and inside Our story. Separated by a hairline rather than a colour band, because the two pages sit on different grounds -- home is --bg-light (white), Our story is --paper (cream) -- and a filled band would be invisible on one of them. */ .tm-backed{padding:60px 24px;text-align:center;border-top:1px solid var(--ed-line);} .tm-backed-in{max-width:600px;margin:0 auto;display:flex;flex-direction:column; align-items:center;gap:22px;} .tm-backed img{width:172px;height:auto;display:block;} .tm-backed p{font-family:var(--sans);font-size:15px;line-height:1.7; color:var(--ed-ink-2);margin:0;max-width:50ch;text-wrap:pretty;} .tm-backed strong{color:var(--ed-ink);font-weight:700;} @media(max-width:640px){ .tm-backed{padding:44px 20px;} .tm-backed-in{gap:18px;} .tm-backed img{width:142px;} .tm-backed p{font-size:14.5px;} } /* Backed-by credit inside the hero, under the CTAs. Sits on the dark video scrim, so it uses the white logo variant and the same muted white as .fi-hero-foot rather than the page's ink colours. */ .fi-hero-backed{display:flex;align-items:center;gap:10px;margin-top:4px;} .fi-hero-backed span{font-family:var(--sans);font-size:12px;font-weight:600; letter-spacing:.4px;color:rgba(255,255,255,.72);white-space:nowrap;} .fi-hero-backed img{height:19px;width:auto;display:block;opacity:.92;} @media(max-width:640px){ .fi-hero-backed{gap:8px;} .fi-hero-backed span{font-size:11px;} .fi-hero-backed img{height:17px;} } /* Footer links are 19px tall -- fine with a mouse, under the 44px touch minimum on a phone, and these are the links that matter most to a jobseeker: Report a concern, Grievance Redressal, the contact email. Padding rather than a taller font, so nothing reflows on desktop. */ @media(max-width:700px){ .ft-col{gap:2px;} .ft-col a{padding:11px 0;min-height:44px;display:flex;align-items:center;} .ft-contact-email{word-break:break-all;} } /* ══ success stories ══════════════════════════════════════════════════════ The quote is the card, not a footnote under the facts. That is the whole point of a testimonial page: what the person said leads, and the facts attribute it. The first pass had it the other way round -- name, role, date, then the quote in small grey text at the bottom -- which reads as a database row with a comment attached. Two treatments, because only some placements have a quote: .st-feature someone actually said something. Large type, their words carry the card, attribution beneath a divider. .st-card a placement with no quote yet. Deliberately quieter and more compact, so the ones with a voice lead the page and the rest do not look like they are missing something. Both wrap; neither is a fixed column count, which is what broke the original on a phone. */ .st-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;margin-bottom:34px;} .st-feature{ display:flex;flex-direction:column; padding:30px 28px; background:var(--surface-1,#fff); border:1px solid var(--line-d); border-radius:16px; } /* The quote glyph sits above the text as a mark, not wrapped around it -- decorative quotes either side of a real sentence fight the punctuation the speaker already used. */ .st-feature-mark{ font-family:Georgia,'Times New Roman',serif; font-size:44px;line-height:1;color:var(--lime); margin-bottom:6px; } .st-feature .st-feature-q{ margin:0 0 22px; font-size:19px;line-height:1.5;font-weight:600; letter-spacing:-.01em;color:var(--ink-1); text-wrap:pretty; } .st-feature-by{ display:flex;align-items:center;gap:12px; margin-top:auto;padding-top:18px; border-top:1px solid var(--line-d); } .st-avatar{ width:42px;height:42px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--teal-soft);color:var(--teal-ink); font-weight:700;font-size:15px;letter-spacing:.02em; } .st-by-name{font-size:14.5px;font-weight:700;color:var(--ink-1);line-height:1.3;} .st-by-role{font-size:12.5px;color:var(--ink-4);line-height:1.45;margin-top:2px;} /* Placements without a quote. */ .st-more-h{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);margin:0 0 14px;} .st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:28px;} .st-card{ display:flex;flex-direction:column;gap:6px; padding:18px 18px; background:var(--bg); border:1px solid var(--line-d); border-radius:12px; } .st-name{font-size:15.5px;font-weight:700;color:var(--ink-1);margin:0;line-height:1.3;} .st-placed{font-size:12.5px;line-height:1.5;color:var(--teal-ink);font-weight:600;} .st-placed .st-co{color:var(--ink-4);font-weight:500;} .st-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-5);} .st-card .st-note{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:4px 0 0;} @media(max-width:560px){ .st-features{grid-template-columns:1fr;gap:16px;} .st-feature{padding:24px 20px;} .st-feature .st-feature-q{font-size:17.5px;} .st-grid{grid-template-columns:1fr;gap:12px;} } /* ══ free resources, end of the training journey ══════════════════════════ One block at the end, not a dropdown hanging off every session. Nine links repeated five times down a timeline made the page read as five lists rather than five steps; the journey is the page, and the resources are what you take away from it. Three groups, because nine flat links is a pile. Grouped by what you are trying to get better at, which is how someone actually arrives here. */ .jt-res-section{background:var(--bg-light-tint);padding:56px 0 64px;} .jt-res-head{max-width:760px;margin:0 auto 30px;} .jt-res-eyebrow{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:2px; text-transform:uppercase;color:var(--teal-ink);margin-bottom:10px;} .jt-res-h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);font-weight:700;line-height:1.15; color:var(--fi-ink);margin:0 0 10px;} .jt-res-sub{font-family:var(--sans);font-size:14.5px;line-height:1.7;color:var(--fi-ink-2);margin:0;max-width:60ch;} .jt-res-groups{max-width:760px;margin:0 auto;display:grid;gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));} .jt-res-group{background:var(--surface-1);border:1px solid var(--surface-line);border-radius:14px;padding:22px 22px 20px;} .jt-res-group h3{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; color:var(--teal-ink);margin:0 0 14px;} .jt-res-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;} .jt-res-group li{display:flex;flex-direction:column;gap:3px;} .jt-res-group a{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--fi-ink);text-decoration:none; line-height:1.35;} .jt-res-group a:hover{color:var(--teal-ink);text-decoration:underline;} .jt-res-group .jt-res-d{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--fi-ink-2);} /* Marks a link as leaving the site, without an icon font. */ .jt-res-group a::after{content:'\2197';margin-left:5px;font-weight:600;opacity:.5;} @media(max-width:560px){ .jt-res-section{padding:40px 0 46px;} .jt-res-groups{grid-template-columns:1fr;} } /* ── training journey, tightened ────────────────────────────────────────── The cards were tall and airy: a 42px icon on its own line above the heading pushed every card down and left a lot of empty white to the right of two short lines of text. The icon now sits beside the heading, which is what it is labelling, so a session reads as one unit and five of them fit on a screen instead of two. Padding and gaps come down with it; nothing about the timeline itself changes. */ .jt-card{padding:20px 24px;} .jt-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;} .jt-card-head .jt-card-icon{width:34px;height:34px;margin-bottom:0;flex-shrink:0;} .jt-card-head .jt-card-icon svg{width:17px;height:17px;} .jt-card-head h3{margin:0;font-size:19px;line-height:1.25;} .jt-card p{font-size:13.5px;line-height:1.6;} .jt-item{margin-bottom:24px;} .jt-node{width:42px;height:42px;font-size:18px;} .jt-timeline{padding-left:62px;} .jt-node{left:-62px;} .jt-rail{left:20px;} .jt-milestone{margin:-2px 0 24px -62px;padding-left:62px;} .jt-milestone::before{left:12px;} .jt-timeline-section{padding:52px 0 16px;} @media(max-width:560px){ .jt-timeline{padding-left:52px;} .jt-node{left:-52px;width:36px;height:36px;font-size:16px;} .jt-rail{left:17px;} .jt-milestone{margin-left:-52px;padding-left:52px;} .jt-card{padding:16px 18px;} .jt-card-head h3{font-size:17px;} } /* ══ success stories page ═════════════════════════════════════════════════ The page used two different centred columns -- the heading in .about-wrap-new (1240px) and everything under it in .legal-wrap (760px) -- so the intro and the cards appeared shoved to the right of the title, and at 760px a card could only ever be full width, which is why nothing sat in a row the way the references do. One container now holds the lot. */ .st-page{max-width:1080px;margin:0 auto;padding:74px 44px 90px;} .st-head{text-align:center;max-width:680px;margin:0 auto 42px;} .st-head .page-h1{margin:0 0 12px;} .st-tagline{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--teal-ink);margin:0 0 16px;} .st-intro{font-family:var(--sans);font-size:15.5px;line-height:1.75;color:var(--ed-ink-2);margin:0;} /* Quoted stories sit side by side; placements without a quote go three across underneath, so the page reads as one block rather than a stack. */ .st-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin:0 0 46px;} .st-more-h{text-align:center;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ed-ink-2);margin:0 0 18px;} .st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:0;} @media(max-width:640px){ .st-page{padding:48px 20px 64px;} .st-head{margin-bottom:30px;} .st-features{grid-template-columns:1fr;gap:16px;} .st-grid{grid-template-columns:1fr;gap:12px;} } .st-next{background:var(--teal-soft);border:1.5px solid var(--teal-mid);border-radius:14px; padding:26px 28px;margin-top:40px;text-align:center;} .st-next h3{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--teal-dark);margin:0 0 8px;} .st-next p{font-family:var(--sans);font-size:14px;line-height:1.7;color:var(--teal-dark);margin:0 auto;max-width:62ch;} @media(max-width:640px){ .st-next{padding:20px 18px;margin-top:28px;} } /* ── header language picker ───────────────────────────────────────── Always visible next to Sign in, on every page and at every width, so nobody has to find it inside the ☰ menu. A native