/* ============================================================ Tradechology homepage, Zoom design language Tokens sampled from zoom.com on 2026-09-21. ============================================================ */ :root{ --blue:#0B5CFF; --blue-deep:#0847CC; --blue-ink:#011067; --navy:#00053D; --navy-deep:#00031D; --tint:#E6F0FF; --tint-soft:#F3F8FF; --steel:#D1DEF2; --offwhite:#F8F8F8; --grey:#696B6E; --grey-on-dark:#9AA3B2; /* --grey is 3.61 on navy, below AA */ --line:rgba(0,5,61,.12); --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --shell:1312px; --ff-display:"Newsreader",Georgia,serif; --ff-body:"Inter",Helvetica,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:#fff;color:var(--navy); font-family:var(--ff-body);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;font-family:var(--ff-display);font-weight:500;letter-spacing:-.01em} p{margin:0} .shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- type ---------- */ .display{font-size:clamp(34px,5vw,54px);line-height:1.12} .h2{font-size:clamp(28px,3.6vw,40px);line-height:1.18;text-wrap:balance} .h3{font-size:clamp(19px,2.1vw,25px);line-height:1.25} .eyebrow{font-family:var(--ff-body);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--blue);margin-bottom:14px} .lede{font-size:clamp(16px,1.5vw,18px);color:var(--grey);line-height:1.6} .on-dark .lede,.hero .lede{color:rgba(255,255,255,.78)} .center{text-align:center} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--ff-body);font-size:15px;font-weight:600;line-height:1; padding:14px 22px;border-radius:var(--r-md);border:1px solid transparent; cursor:pointer;white-space:nowrap; transition:background .18s ease,color .18s ease,border-color .18s ease; } .btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:var(--blue-deep)} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:#0a1259} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-white{background:#fff;color:var(--navy)} .btn-white:hover{background:var(--tint)} .btn-tint{background:var(--tint);color:var(--navy)} .btn-tint:hover{background:#d6e6ff} .btn-sm{padding:10px 18px;font-size:14px;border-radius:var(--r-sm)} /* ============================================================ NAV ============================================================ */ .topbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:28px;height:68px} .brand{display:flex;align-items:center;gap:9px;flex-shrink:0} .brand img{width:30px;height:30px} .brand span{font-size:21px;font-weight:700;letter-spacing:-.035em;color:var(--navy)} .nav-links{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500} .nav-links a{color:var(--navy);padding:6px 0;border-bottom:2px solid transparent} .nav-links a:hover{border-bottom-color:var(--blue);color:var(--blue)} .nav-right{display:flex;align-items:center;gap:16px;margin-left:auto;font-size:15px;font-weight:500} .nav-right .plain:hover{color:var(--blue)} .grid-dots{ width:22px;height:22px;flex-shrink:0;opacity:.75; background-image:radial-gradient(circle,var(--navy) 1.6px,transparent 1.7px); background-size:7.5px 7.5px;background-position:1px 1px; } .navtoggle{display:none;background:none;border:0;padding:8px;cursor:pointer} .navtoggle i{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease} .navtoggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)} .navtoggle[aria-expanded="true"] i:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mobilemenu{display:none;border-top:1px solid var(--line);background:#fff} .mobilemenu.open{display:block} .mobilemenu a{display:block;padding:14px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)} .mobilemenu a:last-child{border-bottom:0} @media (min-width:1101px){.mobilemenu{display:none!important}} /* ---------- announcement ---------- */ .announce{background:var(--tint-soft);border-bottom:1px solid var(--line)} .announce .row{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 24px;font-size:14px;flex-wrap:wrap;text-align:center} .pill-link{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px} .pill-link:hover{background:var(--blue-deep)} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;overflow:hidden;color:#fff;text-align:center;padding:100px 0 0; /* zoom.com verbatim. The bare percentages are colour HINTS (interpolation midpoints), not stops, and every stop is opaque. Substituting transparent stops here washes the whole hero out. */ background:radial-gradient(400% 240% at 50% 100%, #ffffff 0%, #ffffff 10%, 15%, #C7C5FD 16%, rgba(154,103,250,.6) 17%, 21%, #264CAB 28%, 35%, var(--navy-deep) 45%, var(--navy-deep) 100%); } .hero .display{max-width:30ch;margin:0 auto;text-wrap:balance} /* A hero with no product rail under it is only ~420px tall, so the glow's bright core reaches the subline and washes it out. Pushing the ellipse centre below the element restores the same dark band the homepage has. */ .hero.short{ padding:96px 0 104px; background:radial-gradient(400% 240% at 50% 145%, #ffffff 0%, #ffffff 10%, 15%, #C7C5FD 16%, rgba(154,103,250,.6) 17%, 21%, #264CAB 28%, 35%, var(--navy-deep) 45%, var(--navy-deep) 100%); } @media (max-width:640px){ .hero.short{padding:64px 0 76px} } .hero .lede{max-width:60ch;margin:22px auto 0} .hero-cta{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap} .hero-note{margin-top:18px;font-size:13px;color:rgba(255,255,255,.55)} /* ---------- product rail ---------- */ .rail-wrap{position:relative;z-index:3;margin-top:70px;padding-bottom:60px} .rail{ display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity; padding:0 max(24px,calc((100vw - var(--shell))/2 + 24px)) 8px; scrollbar-width:none; } .rail::-webkit-scrollbar{display:none} .rail.is-auto{scroll-snap-type:none} .card.is-clone{pointer-events:none} /* the duplicate set is scenery, not targets */ .rnd.is-play{font-size:12px;line-height:1} .card{ flex:0 0 264px;height:378px;border-radius:var(--r-lg);overflow:hidden; scroll-snap-align:start;position:relative;padding:20px; display:flex;flex-direction:column;text-align:left; transition:transform .22s ease; } .card:hover{transform:translateY(-4px)} .card-head{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;margin-bottom:6px} .card-head .ico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0} .card-sub{font-size:13px;line-height:1.42;opacity:.74;margin-bottom:14px} .card-art{flex:1;border-radius:var(--r-md);overflow:hidden;position:relative;background:rgba(255,255,255,.6)} .card-art img{width:100%;height:100%;object-fit:cover;object-position:top left} .c-dark{background:linear-gradient(360deg,var(--blue-ink),var(--blue));color:#fff} .c-dark .ico{background:rgba(255,255,255,.22);color:#fff} .c-navy{background:linear-gradient(346deg,var(--navy) 40%,#000111 102%);color:#fff} .c-navy .ico{background:rgba(255,255,255,.18);color:#fff} .c-lav,.c-sky,.c-mint,.c-sand{color:var(--navy)} .c-lav{background:#E9E7FE} .c-lav .ico{background:#7A46E3;color:#fff} /* 4.17 -> 5.24 at 11px, AA */ .c-sky{background:var(--tint)} .c-sky .ico{background:var(--blue);color:#fff} .c-mint{background:#E2F5E9} .c-mint .ico{background:#0E7338;color:#fff} /* 4.42 -> 5.45 at 11px, AA */ .c-sand{background:#FCF2D9} .c-sand .ico{background:#9A6B00;color:#fff} /* ---------- benefit cards ---------- Marcus 2026-09-25: "there are no benefit driven cards. Meaning yes this is what any trade journal could do but what makes us different. What about the live sessions/community." Right, and the human layer was the one thing the rail never mentioned. These three carry it: the rooms, the re-grade, and the cohort. Facts taken from live-sessions.html, not invented here. The photo-with-a-panel-over-it is Zoom's own card pattern (their BrightHire card). Faces in these photos are never presented as our members or our clinician: the Unsplash licence carries no model release. */ .card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .card-art.is-photo{background:var(--navy)} .card-art.is-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,5,61,0) 30%,rgba(0,5,61,.55) 68%,rgba(0,5,61,.9) 100%)} .card-panel{position:absolute;left:10px;right:10px;bottom:10px;z-index:2; background:rgba(255,255,255,.96);border-radius:10px;padding:9px 10px; box-shadow:0 6px 18px rgba(0,5,61,.22);color:var(--navy)} .card-panel .pk{font-size:7.5px;font-weight:700;letter-spacing:.12em;color:var(--blue);margin-bottom:6px} .card-panel .pr{display:flex;align-items:center;justify-content:space-between; font-size:10.5px;line-height:1.5;border-top:1px solid rgba(0,5,61,.09);padding-top:4px;margin-top:4px} .card-panel .pr:first-of-type{border-top:0;padding-top:0;margin-top:0} .card-panel .pr b{font-weight:600} .card-panel .pr i{font-style:normal;font-size:9px;color:var(--grey)} .c-plum{background:#F0E7FA;color:var(--navy)} .c-plum .ico{background:#6B2FA8;color:#fff} .c-teal{background:#DFF3F4;color:var(--navy)} .c-teal .ico{background:#00646E;color:#fff} .rail-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px} .rnd{ /* these sit in the bright core of the hero glow, so they must read as dark */ width:40px;height:40px;border-radius:999px;border:1px solid rgba(0,5,61,.22); background:rgba(255,255,255,.72);color:var(--navy);cursor:pointer;display:grid;place-items:center; font-size:17px;line-height:1;transition:background .18s ease;font-family:var(--ff-body); } .rnd:hover{background:#fff;border-color:var(--blue);color:var(--blue)} /* ---------- mini mockups inside cards ---------- */ .mock{position:absolute;inset:0;padding:12px;font-family:var(--ff-body);color:var(--navy);background:#fff} .mock .bar{height:7px;border-radius:4px;background:var(--steel);margin-bottom:7px} .mock .bar.s{width:56%} .mock .bar.m{width:78%} .split-mock{display:flex;flex-direction:column;justify-content:center;height:100%;gap:10px} .split-row{display:flex;align-items:baseline;gap:8px} .split-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--grey)} .split-val{font-family:var(--ff-display);font-size:30px;line-height:1;font-weight:500} .split-val.edge{color:#128A45} .split-val.disc{color:#C2410C} .meter{height:6px;border-radius:999px;background:var(--steel);overflow:hidden} .meter i{display:block;height:100%;border-radius:999px} .grade-chips{display:flex;flex-wrap:wrap;gap:5px;padding:12px} .chip{font-size:10px;font-weight:700;padding:4px 7px;border-radius:5px;background:var(--tint);color:var(--blue)} .chip.a{background:#DFF3E6;color:#0E6B37} .chip.d{background:#FDE7D6;color:#9A3412} /* ============================================================ SPOTLIGHT ============================================================ */ .spotlight{padding:96px 0} .spot-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:36px} .spot-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(360deg,var(--blue-ink),var(--blue));display:grid;place-items:center;margin-bottom:16px} .spot-mark img{width:30px;height:30px} .two-tone{font-family:var(--ff-display);font-size:clamp(28px,3.6vw,42px);line-height:1.15;font-weight:500} .two-tone .k{display:block;color:var(--blue)} .frame{ border-radius:var(--r-xl);overflow:hidden;padding:clamp(16px,4vw,52px); background:linear-gradient(160deg,#9FC7F5 0%,#5D8FD6 38%,#1E3C78 100%); position:relative; } .frame::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.28),transparent 55%); } .frame img{border-radius:var(--r-md);box-shadow:0 30px 70px rgba(0,5,61,.42);position:relative;z-index:1} .frame-cap{position:relative;z-index:1;margin-top:14px;font-size:12px;color:rgba(255,255,255,.8);text-align:center} /* ============================================================ SPLIT SECTION ============================================================ */ .band{background:var(--offwhite);padding:96px 0} .band-tint{background:var(--tint-soft)} .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .score-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:0 18px 44px rgba(0,5,61,.07)} .score-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px} .score-name{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--grey)} .score-num{font-family:var(--ff-display);font-size:44px;line-height:1;font-weight:500} .score-num small{font-size:17px;color:var(--grey)} .score-q{font-size:13px;color:var(--grey);margin:8px 0 20px} .score-div{height:1px;background:var(--line);margin:24px 0} .axes{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px} .axes span{font-size:11px;font-weight:600;color:var(--grey);background:var(--offwhite);border:1px solid var(--line);padding:4px 8px;border-radius:6px} .checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px} .checks li{display:flex;gap:11px;font-size:15px;line-height:1.45} .checks .tick{width:20px;height:20px;border-radius:999px;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:2px} /* ============================================================ PROOF CARDS + STATS ============================================================ */ .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pcard{border-radius:var(--r-lg);padding:28px;min-height:290px;display:flex;flex-direction:column;justify-content:flex-end} .pcard .h3{margin-bottom:10px} .pcard p{font-size:14px;line-height:1.5} .p-blue{background:linear-gradient(360deg,var(--blue-ink),var(--blue));color:#fff} .p-blue p{color:rgba(255,255,255,.82)} .p-navy{background:linear-gradient(346deg,var(--navy) 40%,#000111 102%);color:#fff} .p-navy p{color:rgba(255,255,255,.8)} .p-out{background:#fff;border:1px solid var(--steel)} .p-out p{color:var(--grey)} .pcard .top{margin-bottom:auto;font-size:12px;font-weight:700;letter-spacing:.1em;opacity:.7} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center} .stat{padding:8px 24px} .stat + .stat{border-left:1px solid var(--line)} .stat b{display:block;font-family:var(--ff-display);font-size:clamp(30px,3.6vw,44px);font-weight:500;line-height:1.1} .stat span{display:block;font-size:13px;color:var(--grey);margin-top:8px} .stat em{display:block;font-style:normal;font-size:11px;color:#6B7280;margin-top:6px} /* ============================================================ ARCHETYPES ============================================================ */ .arch-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-auto-rows:minmax(216px,auto);gap:16px} .arch{ border-radius:var(--r-lg);position:relative;overflow:hidden; display:flex;flex-direction:column;color:#fff; transition:transform .22s ease; } /* header band cropped from the illustration set. The captions were baked into the source composite, so only the top of each tile is text-free; these are bands by necessity, not by choice. */ .arch-img{width:100%;flex:0 0 auto;overflow:hidden;background:rgba(0,0,0,.25)} .arch-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block} .arch .body{padding:20px 22px 22px;display:flex;flex-direction:column;justify-content:flex-end;flex:1} .arch.big .arch-img{height:250px} .arch .arch-img{height:116px} .arch:hover{transform:translateY(-4px)} .arch h3{font-size:19px;line-height:1.2} .arch p{font-size:13px;color:rgba(255,255,255,.76);margin-top:6px} .arch.big{grid-row:span 2} .arch.big h3{font-size:clamp(22px,2.4vw,30px)} .a1{background:linear-gradient(200deg,#1E3C78,#00031D)} .a2{background:linear-gradient(200deg,#0B5CFF,#011067)} .a3{background:linear-gradient(200deg,#6D3BD6,#2A1268)} .a4{background:linear-gradient(200deg,#B3341F,#3D0F08)} .a5{background:linear-gradient(200deg,#0E6B57,#04231D)} .a6{background:linear-gradient(200deg,#8A6B00,#2B2100)} .a7{background:linear-gradient(200deg,#3C4A66,#0B1220);grid-column:span 2} /* ============================================================ NEWS TILES ============================================================ */ /* What's New tiles. Three faults were visible at once and they had one root between them: the grid was built for six short feature blurbs and the copy is now real release detail. 1. grid-auto-rows was a FIXED 168px, so longer copy was clipped mid-word. 2. .go sat absolute at bottom:16px with no reserved space, so the arrow printed straight over the last line of text. 3. every tile drew the same gradient, so a six-card grid read as one blue slab. Rows now grow with their content, the arrow has a lane of its own, and the palette rotates. */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(190px,auto);gap:16px} .tile{ border-radius:var(--r-lg);padding:24px 24px 66px;position:relative;color:#fff; background:linear-gradient(360deg,var(--blue-ink),var(--blue)); display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease; } .tile:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,5,61,.22)} .tile.deep{background:linear-gradient(346deg,var(--navy) 40%,#000111 102%)} .tile.tall{grid-row:span 2} .tile.wide{grid-column:span 2} .tile h3{font-size:17.5px;line-height:1.25;margin-bottom:9px} .tile p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);margin:0} .tile .go{ position:absolute;right:20px;bottom:20px;width:32px;height:32px;border-radius:999px; background:#fff;color:var(--blue);display:grid;place-items:center;font-size:15px;font-weight:700; } /* rotating palette, all AA against white text */ .tile.t1{background:linear-gradient(360deg,#00053D,#0B5CFF)} .tile.t2{background:linear-gradient(360deg,#0A2A6B,#1E6FE8)} .tile.t3{background:linear-gradient(360deg,#0E2A57,#2F6FD0)} .tile.t4{background:linear-gradient(360deg,#123A6E,#3B7BD6)} .tile.t5{background:linear-gradient(360deg,#071B45,#134FB8)} .tile.t6{background:linear-gradient(360deg,#0A1F4D,#1B5FC9)} @media (max-width:1000px){ .tiles{grid-template-columns:repeat(2,1fr)} } /* ============================================================ STORIES ============================================================ */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column} .quote p{font-family:var(--ff-display);font-size:18px;line-height:1.45;margin-bottom:auto} .who{display:flex;align-items:center;gap:12px;margin-top:24px} .av{width:38px;height:38px;border-radius:999px;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0} .who b{display:block;font-size:14px} .who span{display:block;font-size:12px;color:var(--grey)} /* .who span above is class+element and so OUTRANKS .av, which is class only. It was overriding display:grid with block (killing place-items:center, so the initial sat in the top-left), 14px with 12px, and the blue with grey. Marcus, twice: "Initials are still very small on the testimonials section." Scoped here so it wins, and sized up while we are at it. */ .who .av{display:grid;place-items:center;width:46px;height:46px; font-size:18px;font-weight:700;line-height:1; color:var(--blue);background:var(--tint);flex-shrink:0} /* ---------- trustpilot badge ---------- Static, and static on purpose. The live TrustBox mounts but renders logo-only for business unit 61c237305256cbf05a57e90f, while a control (TradeZella, same page, same script, same template) renders in full. So the block is on the Trustpilot account, not on our markup. If the account is ever unblocked, swap .tp for the TrustBox and delete this. Figures verified at source 2026-09-25: TrustScore 4.6, 25 reviews, Trustpilot's own star display for that score is 4.5 of 5. No square-lockup logo is reproduced here; the name is text and links to the live profile so any visitor can check the number themselves. */ .tp-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px} .tp{display:inline-flex;align-items:center;gap:14px;background:var(--tint-soft); border:1px solid var(--steel);border-radius:999px;padding:11px 22px; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} .tp:hover,.tp:focus-visible{border-color:var(--blue);box-shadow:0 3px 16px rgba(11,92,255,.13);transform:translateY(-1px)} .tp-stars{display:block;flex-shrink:0} .tp-txt{font-size:14.5px;color:var(--grey);white-space:nowrap;line-height:1.3} .tp-txt b{color:var(--navy);font-weight:600} .tp-note{font-size:13px;color:var(--grey);text-align:center;max-width:56ch;line-height:1.5} /* ---------- photography ---------- Unsplash License: commercial use, no fee, no attribution required. It does NOT include a model release, so a face here must never sit beside a testimonial quote or any caption implying the person is an OTIS customer. These are atmosphere, never evidence. Provenance in assets/photos/MANIFEST.json. Brief, Marcus 2026-09-25: composure, not celebration. No fists in the air, no six-monitor dens, no crypto screens. What we sell is a trader who stopped leaking, and that looks calm, not triumphant. */ .photo-band{position:relative;min-height:400px;display:grid;align-items:center;overflow:hidden;background:var(--navy)} .photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%} .photo-band::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,5,61,.94) 0%,rgba(0,5,61,.88) 38%,rgba(0,5,61,.55) 68%,rgba(0,5,61,.3) 100%)} .photo-band .shell{position:relative;z-index:2;padding-top:64px;padding-bottom:64px} .pb{max-width:38ch;color:#fff} .pb .eyebrow{color:#fff;opacity:.72} .pb h2{color:#fff;margin:10px 0 16px} .pb p{color:#D8E2F5;font-size:17px;line-height:1.6} .photo-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .photo-split>*{min-width:0} .photo-split figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--offwhite)} .photo-split figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block} @media (max-width:860px){ .photo-split{grid-template-columns:1fr;gap:30px} .photo-band{min-height:0} .photo-band>img{object-position:65% 30%} .photo-band::after{background:linear-gradient(180deg,rgba(0,5,61,.82) 0%,rgba(0,5,61,.93) 55%)} .pb{max-width:none} } @media (max-width:640px){ .tp{gap:10px;padding:10px 16px} .tp-txt{font-size:13px;white-space:normal} } /* ============================================================ CLOSER + FOOTER ============================================================ */ /* zoom.com's closing block is a LIGHT section, not a second dark hero. A top-anchored glow can never reach navy inside its own element, so white text over it is unreadable by construction. */ .closer{background:var(--tint-soft);color:var(--navy);text-align:center;padding:104px 0} .closer .lede{max-width:56ch;margin:20px auto 0} .closer .hero-note{color:var(--grey)} footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:64px 0 36px;font-size:14px} .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px} .fcol h4{font-size:13px;font-weight:700;letter-spacing:.06em;color:#fff;margin:0 0 14px} .fcol a{display:block;padding:5px 0;color:rgba(255,255,255,.68)} .fcol a:hover{color:#fff} .fbrand{display:flex;align-items:center;gap:9px;margin-bottom:14px} .fbrand img{width:28px;height:28px} .fbrand span{font-size:19px;font-weight:700;letter-spacing:-.035em;color:#fff} .legal{margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;line-height:1.65;color:rgba(255,255,255,.5)} .legal a{color:rgba(255,255,255,.68);text-decoration:underline} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1100px){ .nav-links{display:none} .navtoggle{display:block} .tiles{grid-template-columns:repeat(2,1fr)} .tile.wide{grid-column:span 1} .arch-grid{grid-template-columns:1fr 1fr} .arch.big{grid-row:span 1} .a7{grid-column:span 2} } @media (max-width:900px){ .split-grid{grid-template-columns:1fr;gap:36px} .trio,.quotes{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr;gap:28px} .spotlight,.band{padding:64px 0} } @media (max-width:640px){ .shell{padding:0 16px} .hero{padding:64px 0 0} /* The nav overflowed the viewport by ~76px at 375px, which put a sideways scrollbar on every page on a phone. .hide-sm only removed Sign in and Talk to us; the brand, the CTA, the decorative dot grid and the burger still did not fit. The dots are ornament and go first. */ .nav{gap:12px;height:60px} .nav-right{gap:10px} .nav-right .hide-sm{display:none} .grid-dots{display:none} .brand span{font-size:18px} .brand img{width:26px;height:26px} .nav-right .btn-sm{padding:8px 13px;font-size:14px} .stats{grid-template-columns:1fr} .stat + .stat{border-left:0;border-top:1px solid var(--line);margin-top:20px;padding-top:24px} .arch-grid,.tiles{grid-template-columns:1fr} .a7,.arch.big{grid-column:span 1} .fgrid{grid-template-columns:1fr} .rail{padding-left:16px;padding-right:16px} .card{flex:0 0 240px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ================= FEATURES DROPDOWN (all pages) ================= Zoom's own pattern: the top-level item stays a link to the hub page, and the panel opens on hover and on focus. Keyboard users get it via focus-within, so it needs no script. */ .has-menu{position:relative} .has-menu > a::after{content:"";display:inline-block;margin-left:6px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)} .navmenu{ position:absolute;top:100%;left:-18px;min-width:326px;padding:12px;margin-top:9px; background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:0 18px 44px rgba(0,5,61,.14); opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease,visibility .14s; z-index:70; } .has-menu:hover .navmenu,.has-menu:focus-within .navmenu{opacity:1;visibility:visible;transform:translateY(0)} .navmenu a{display:block;padding:10px 14px;border-radius:9px;border-bottom:0 !important;font-size:15px;font-weight:500;color:var(--navy);line-height:1.35} .navmenu a:hover{background:var(--tint);color:var(--blue)} .navmenu a i{display:block;font-style:normal;font-size:12.5px;color:var(--grey);margin-top:2px} .navmenu a:hover i{color:var(--blue)} .navmenu .navmenu-sep{height:1px;background:var(--line);margin:8px 6px} .mobilemenu .sub{display:block;padding-left:18px;font-size:15px;opacity:.82} @media (max-width:900px){ .navmenu{display:none} } /* FAQ accordion. Moved out of pricing.css 2026-09-22 so the feature pages share one definition; pricing.html still gets it from here. */ .faq{max-width:780px;margin:0 auto} .faq details{border-bottom:1px solid var(--line);padding:20px 0} .faq summary{ font-family:var(--ff-display);font-size:19px;font-weight:500;cursor:pointer; list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--ff-body);font-size:22px;color:var(--blue);font-weight:400;line-height:1} .faq details[open] summary::after{content:"\2013"} .faq p{margin-top:13px;font-size:15px;line-height:1.6;color:var(--grey)} /* ===== PROGRAMME ARC (cohort.html, coaching.html) ===================== Marcus 2026-09-22: "the 6 weeks and 12 weeks leave a lot to be desired. Can we format these better so it looks like something people will actually want to sign up for vs just a list of things that no one cares about." ROOT CAUSE FIRST: both pages used .tl / .tl-step / .tl-n / .tl-b, which are defined in science.css, and NEITHER PAGE LOADS science.css. The markup was copied over without its stylesheet, so six weeks and four phases were rendering as raw stacked text with no cards, no numbers and no rail. It was not a formatting preference, it was missing CSS. Rather than bolt science.css onto two more pages, this is a component that belongs to the programmes: a rail you can see, a week label on every card, and the two things a buyer is actually scanning for pulled out as milestone chips (the Edge Finder Interviews, and Graduation). Lives in styles.css because both pages need it, same call as .faq. */ .arc{display:grid;gap:18px;margin-top:34px} .arc-6{grid-template-columns:repeat(3,1fr)} .arc-4{grid-template-columns:repeat(4,1fr)} .arc-step{ position:relative;background:#fff;border:1px solid var(--steel); border-radius:var(--r-lg);padding:26px 24px 24px;display:flex;flex-direction:column; } .arc-step::before{ content:"";position:absolute;top:-1px;left:24px;right:24px;height:3px; border-radius:0 0 3px 3px;background:var(--steel); } .arc-step.is-key{border-color:var(--blue)} .arc-step.is-key::before{background:var(--blue)} .arc-step.is-end{border-color:#128A45} .arc-step.is-end::before{background:#128A45} .arc-wk{ font-family:var(--ff-body);font-size:11.5px;font-weight:700;letter-spacing:.11em; color:var(--grey);margin-bottom:14px; } .arc-step.is-key .arc-wk{color:var(--blue)} .arc-step.is-end .arc-wk{color:#128A45} .arc-step h3{font-size:20px;line-height:1.24;margin-bottom:10px} .arc-step p{font-size:14.5px;color:var(--grey);line-height:1.6;margin-bottom:14px} .arc-step p:last-child{margin-bottom:0} /* the thing a buyer scans for: what they physically get that week */ .arc-out{ margin-top:auto;padding-top:14px;border-top:1px solid var(--line); font-size:13px;line-height:1.5;color:var(--navy);display:flex;gap:9px;align-items:flex-start; } .arc-out::before{ content:"";flex:none;margin-top:4px;width:13px;height:7px; border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg); } .arc-step.is-end .arc-out::before{border-color:#128A45} .arc-foot{ margin-top:22px;padding:16px 20px;background:var(--tint);border-radius:var(--r-md); font-size:14.5px;line-height:1.6;color:var(--navy); } .arc-foot b{font-weight:600} @media (max-width:1100px){ .arc-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .arc-6{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ .arc-6,.arc-4{grid-template-columns:1fr} } /* Archetype cards that link now need the anchor to behave like the old div. */ /* Linked archetype cards. NOTE color:inherit is deliberately absent: .arch sets color:#fff for the dark artwork, and an anchor rule with color:inherit beat it on specificity and pulled the titles down to the section's dark body colour, which made four of the seven unreadable. Same reason the hover tint is not var(--blue): blue on a navy card is no better. The affordance is a lift, a ring and a brighter title. */ a.arch{display:flex;flex-direction:column;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease} a.arch,a.arch h3,a.arch p{color:#fff} a.arch p{color:rgba(255,255,255,.76)} a.arch:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,5,61,.22)} a.arch:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px} a.arch:focus-visible{outline:3px solid var(--blue);outline-offset:3px} /* ---- Consent banner, mobile ------------------------------------------------ The banner is inline-styled and inlined on every page. Its button row carries flex-shrink:0 and each button white-space:nowrap, so at 375px the three buttons force a 407px row that will neither wrap nor shrink. These overrides stack it instead. Targeted by id because the markup is inline and shared, so this is the only place it can be fixed once. */ @media (max-width:640px){ #tc-cc-main{padding:16px !important} #tc-cc-main > div{flex-direction:column !important;align-items:stretch !important;gap:14px !important} #tc-cc-main > div > div:last-child{flex-shrink:1 !important;width:100%;display:grid !important; grid-template-columns:1fr 1fr;gap:8px !important} #tc-cc-manage{grid-column:1 / -1} #tc-cc-manage,#tc-cc-essential,#tc-cc-accept{padding:11px 10px !important;font-size:13.5px !important; white-space:normal !important;width:100%} #tc-cc-prefs{padding:0 16px 16px !important} } /* Skip link. First thing in the tab order, invisible until focused. A site with a sticky header and a long nav is unusable by keyboard without one. */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff; padding:12px 20px;border-radius:0 0 10px 0;font-size:15px;font-weight:600;text-decoration:none} .skip:focus{left:0} /* Secondary button for LIGHT sections. .btn-ghost is white text on a transparent background, which is correct on the dark hero and invisible on .closer, which uses --tint-soft. The closing CTA on 11 pages was unreadable. */ .btn-outline{background:transparent;color:var(--navy);border-color:var(--steel)} .btn-outline:hover{background:#fff;border-color:var(--blue);color:var(--blue)} /* The loop repeats every (card + gap) x 8. If that period is shorter than the viewport, a card sits beside its own twin and the seam shows. Marcus spotted it: "we would need one more card so that one is off the screen". The period can be lengthened without inventing filler cards by growing the cards on the screens where the problem exists, which also stops eight small cards looking lost on a very wide display. 8 x (392+16) = 3264px of period. */ @media (min-width:2100px){ .card{flex:0 0 392px;height:520px;padding:26px} .card-head{font-size:18px} .card-head .ico{width:26px;height:26px;font-size:13px} .card-sub{font-size:15px;margin-bottom:18px} } /* 21:9 displays. 8 x (440+16) = 3648px of period, past any real window. */ @media (min-width:3200px){ .card{flex:0 0 440px;height:560px} } /* ---------- homepage video ---------- preload="none" means the 7.5MB file is not fetched until someone presses play, so the section costs one 21KB poster on load and nothing else. Self hosted rather than embedded on purpose: a third-party player would set cookies we would then have to gate behind the consent banner, and its branding would undercut the thing the video exists to demonstrate. */ .vid{padding:20px 0 76px;background:#fff} .vid .shell{max-width:1040px} .vid-head{text-align:center;margin-bottom:26px} .vid-head .eyebrow{justify-content:center} .vid-head h2{margin:10px 0 10px} .vid-head p{color:var(--grey);max-width:56ch;margin:0 auto} .vid-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,5,61,.13);background:#F4F7FC} .vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .vid-cap{text-align:center;font-size:13px;color:var(--grey);margin-top:16px} @media (max-width:640px){ .vid{padding:8px 0 56px} } /* ---------- the everything panel ---------- The grid-dots in the header were a decorative