/* ========================================================================== Pass the Written — stylesheet -------------------------------------------------------------------------- Consolidated from seven per-page mockup stylesheets that had been concatenated. Each of those repeated :root, the reset, the nav and the footer verbatim, so the last copy in the file silently won every conflict (that is why the homepage's intended 96px section rhythm was rendering at 72px, and why several later fixes needed !important to land). Order below is cascade order: tokens -> base -> primitives -> layout -> components -> page-scoped -> motion -> utilities. Nothing here relies on source-order accidents; page-scoped blocks only touch selectors unique to that page. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root{ /* --- Surfaces & ink ------------------------------------------------- */ --paper:#F1EFE2; /* page ground — sectional chart paper */ --paper-deep:#E7E3D0; /* recessed bands, table headers */ --paper-raised:#F8F6EE; /* hairline-raised surface above --paper */ --white:#FFFFFF; /* card ground */ --ink:#1B2A40; /* primary text, dark panels */ --ink-deep:#111D2E; /* pressed / hover state of --ink */ --ink-soft:#46566D; /* secondary text on light — 6.5:1 on paper */ --line:#C9C4AC; --line-soft:#DEDACA; /* interior rules inside cards */ /* --- Accents --------------------------------------------------------- */ --magenta:#A8324A; /* 5.6:1 on paper */ /* The magenta a Garmin GNS/GTN draws an active GPS course in. Deliberately hotter than brand magenta so it separates from the sectional's own dusty magenta airspace rings instead of disappearing into them. */ --gps-magenta:#E0218A; --magenta-lift:#D9738A; /* same hue, lifted for use ON --ink (4.7:1) */ --amber:#D89A38; /* 5.0:1 on --ink, 5.0:1 on --ink + 6% paper wash */ --olive:#6E7F58; /* graphics only — 4.3:1 on white, under AA */ --olive-text:#5F6E4B; /* text-safe olive — 5.5:1 on white */ /* --- Text on dark panels --------------------------------------------- */ --on-ink:#E4E8F0; --on-ink-soft:#C2CAD8; --on-ink-mute:#9AA7BD; --on-ink-line:rgba(241,239,226,0.18); --on-ink-fill:rgba(241,239,226,0.06); /* --- Type ------------------------------------------------------------ */ /* Archivo: variable-width American gothic, signage/document lineage. Public Sans: US federal design system face, Franklin Gothic bones. Overpass Mono: descended from Highway Gothic — ties the technical labels to the navigation theme rather than to a code editor. */ --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --font-body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-mono:'Overpass Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Display widths. Archivo's wdth axis is what keeps headlines feeling like chart lettering instead of another default grotesque. */ --wdth-display:88; --wdth-heading:92; --step--1:13.5px; --step-0:16px; --step-1:clamp(17px,1.1vw,18px); --step-2:clamp(19px,1.5vw,21px); --step-3:clamp(22px,2vw,25px); --step-4:clamp(26px,3vw,32px); --step-5:clamp(29px,3.6vw,40px); --step-6:clamp(36px,5.4vw,62px); /* --- Space ----------------------------------------------------------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --section-y:clamp(64px,7vw,96px); /* --- Shape & elevation ------------------------------------------------ */ --radius:2px; --radius-lg:4px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(27,42,64,0.05); --shadow-md:0 1px 2px rgba(27,42,64,0.04),0 8px 20px -10px rgba(27,42,64,0.16); --shadow-lg:0 2px 6px rgba(27,42,64,0.05),0 24px 56px -16px rgba(27,42,64,0.24); /* --- Motion ----------------------------------------------------------- */ --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms; /* --- Chrome ------------------------------------------------------------ */ --nav-h:68px; --grid-line:rgba(27,42,64,0.05); } /* ========================================================================== 2. BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box;} html{ scroll-behavior:smooth; /* Keep in-page anchors clear of every sticky bar, not just the nav. The courses page stacks a filter bar under it, whose height varies with how many chip rows wrap; site.js measures it into --sticky-extra. */ scroll-padding-top:calc(var(--nav-h) + var(--sticky-extra,0px) + 16px); -webkit-text-size-adjust:100%; } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:var(--step-0); line-height:1.6; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } h1,h2,h3,h4,.display{ font-family:var(--font-display); font-variation-settings:'wdth' var(--wdth-heading); color:var(--ink); margin:0; line-height:1.12; letter-spacing:-0.015em; /* stops the single-word orphan the old hero produced at every width */ text-wrap:balance; } p{text-wrap:pretty;} a{color:inherit;text-decoration:none;} img,svg,video{max-width:100%;} img{height:auto;} ::selection{background:rgba(168,50,74,0.18);color:var(--ink);} /* One visible, consistent focus ring. The old sheet set outline:none on every input and signalled focus with a border colour change only, which is invisible to anyone tabbing through at speed. */ :focus-visible{ outline:2.5px solid var(--magenta); outline-offset:2px; border-radius:1px; } .nav a:focus-visible,.footer-links a:focus-visible{outline-offset:4px;} /* Numerals that don't jitter: prices, stats, countdowns, table figures. */ .mono,.card-price,.price,.stat .num,.hero-stat .num,.testimonial-stat .num, table td,table th{font-variant-numeric:tabular-nums;} .mono{font-family:var(--font-mono);letter-spacing:0.01em;} /* ========================================================================== 3. LAYOUT PRIMITIVES ========================================================================== */ .wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-6);} @media(max-width:640px){.wrap{padding:0 20px;}} /* --section-y is the rhythm BETWEEN sections, not each section's own padding. Applying it whole to both neighbours stacked it into a gap of twice the intended size, which is what made the page feel loose. Half from each section adds up to exactly one unit. Sections that paint their own band are the exception: there the padding is read as the band's internal breathing room, not as a gap, so it stays whole. */ section{padding-block:calc(var(--section-y) / 2);} section.alt-bg{padding-block:var(--section-y);} .section-head{max-width:660px;margin-bottom:var(--space-7);} .section-eyebrow{ font-family:var(--font-mono); font-size:12px;font-weight:600; color:var(--magenta); text-transform:uppercase;letter-spacing:0.1em; margin-bottom:var(--space-3);display:block; } .section-head h2{font-size:var(--step-5);font-weight:700;font-variation-settings:'wdth' var(--wdth-heading);} .section-head p{margin-top:var(--space-4);color:var(--ink-soft);font-size:var(--step-1);line-height:1.65;} /* Heading with controls alongside it. The plain .section-head is capped at a readable measure, so a flex row inside it wrapped the controls onto their own line and stranded them under the text. */ .section-head-split{ max-width:none; display:flex;align-items:flex-end;justify-content:space-between; gap:var(--space-5);flex-wrap:wrap; margin-bottom:var(--space-6); } .section-head-text{max-width:660px;} .section-head-split .slider-controls{margin-bottom:0;} /* Asides and caveats under a section heading. Prose set in the mono face is slow to read and is one of the things that made the page look generated. */ .section-note{ margin-top:10px; font-size:13.5px;line-height:1.6; color:var(--ink-soft);opacity:0.85; max-width:60ch; } .alt-bg{background:var(--paper-deep);} /* Chart-paper grid used behind heroes and page headers. */ .gridpaper,.hero,.pageheader{ background-image: repeating-linear-gradient(0deg,transparent,transparent 39px,var(--grid-line) 39px,var(--grid-line) 40px), repeating-linear-gradient(90deg,transparent,transparent 39px,var(--grid-line) 39px,var(--grid-line) 40px); } /* ========================================================================== 4. BUTTONS ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); min-height:50px; padding:0 26px; border-radius:var(--radius); font-family:var(--font-body); font-weight:600;font-size:15px; line-height:1.2; border:1.5px solid transparent; white-space:nowrap; cursor:pointer; transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease; } .btn-primary{ background:var(--ink);color:var(--paper);border-color:var(--ink); box-shadow:var(--shadow-sm); } .btn-primary:hover{background:var(--ink-deep);transform:translateY(-1px);box-shadow:var(--shadow-md);} .btn-primary:active{transform:translateY(0);box-shadow:none;} .btn-secondary{ background:transparent;color:var(--ink);border-color:var(--ink); } .btn-secondary:hover{background:rgba(27,42,64,0.06);transform:translateY(-1px);} .btn-secondary:active{transform:translateY(0);} .hero-ctas{display:flex;gap:14px;margin-top:var(--space-6);flex-wrap:wrap;align-items:center;} .hero-ctas .btn{margin:0;} /* On a narrow phone two differently-sized stacked buttons read as a mistake. */ @media(max-width:480px){ .hero-ctas{gap:10px;} .hero-ctas .btn{width:100%;} } /* ========================================================================== 5. NAV ========================================================================== */ .nav{ position:sticky;top:0;z-index:50; background:rgba(241,239,226,0.92); backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1); border-bottom:1px solid var(--line); transition:box-shadow var(--dur-base) ease,border-color var(--dur-base) ease; } /* set by site.js once the page has scrolled — lifts the bar off the content */ .nav.is-stuck{box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(27,42,64,0.5);} .nav-inner{ display:flex;align-items:center;justify-content:space-between; min-height:var(--nav-h); padding-top:10px;padding-bottom:10px; flex-wrap:nowrap; } .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;margin-right:var(--space-6);flex:0 1 auto;min-width:0;} @media(max-width:880px){.logo{margin-right:0;}} .logo-mark{width:30px;height:30px;flex:none;} /* The wordmark is 8.6:1, so sizing it by height makes its width explode on a phone — 34px tall is 292px wide, more than a 375px viewport can hold beside the CTA and the menu toggle. Size by width and let the height follow. */ .logo-img{width:250px;max-width:100%;height:auto;display:block;} @media(max-width:880px){.logo-img{width:215px;}} @media(max-width:560px){.logo-img{width:150px;}} @media(max-width:400px){.logo-img{width:126px;}} .nav-links{display:flex;gap:var(--space-6);font-size:14.5px;font-weight:500;color:var(--ink-soft);} .nav-links a{position:relative;padding:2px 0;transition:color var(--dur-fast) ease;} .nav-links a:hover,.nav-links a.active{color:var(--ink);} .nav-links a.active{color:var(--magenta);} /* underline grows from the left rather than snapping in */ .nav-links a::after{ content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px; background:currentColor; transform:scaleX(0);transform-origin:left; transition:transform var(--dur-base) var(--ease-out); } .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);} .nav-cta-group{display:flex;align-items:center;gap:10px;flex:none;} .nav-cta,.nav-login{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-mono); font-size:13px;font-weight:600;letter-spacing:0.01em; border-radius:var(--radius); white-space:nowrap;line-height:1.2; min-height:40px; transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out); } .nav-cta{background:var(--ink);color:var(--paper);padding:0 18px;} .nav-cta:hover{background:var(--ink-deep);transform:translateY(-1px);} .nav-login{border:1.5px solid var(--ink);color:var(--ink);padding:0 16px;} .nav-login:hover{background:rgba(27,42,64,0.06);} .nav-mobile-hide{display:flex;} .nav-toggle{ display:none; background:none;border:none;cursor:pointer; width:44px;height:44px; align-items:center;justify-content:center; color:var(--ink);margin-left:6px;padding:0; } .nav-toggle svg{width:24px;height:24px;} .nav-link-login-mobile{display:none;} @media(max-width:880px){ .nav-mobile-hide{display:none;} .nav-toggle{display:inline-flex;} .nav-login{display:none;} .nav.nav-open .nav-links.nav-mobile-hide{ display:flex;flex-direction:column;gap:0; position:absolute;left:0;right:0;top:100%; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 32px 16px; box-shadow:var(--shadow-md); } .nav{position:sticky;} .nav-inner{position:relative;} .nav-links.nav-mobile-hide a{ padding:14px 4px; border-bottom:1px solid rgba(27,42,64,0.08); min-height:48px;display:flex;align-items:center; } .nav-links.nav-mobile-hide a::after{display:none;} .nav-links.nav-mobile-hide a:last-child{border-bottom:none;} .nav-link-login-mobile{display:flex;} } @media(max-width:560px){ .nav-cta-group{gap:6px;} .nav-cta{padding:0 12px;font-size:11.5px;} } @media(max-width:400px){ .nav-cta{padding:0 9px;font-size:10.5px;} .nav-toggle{width:40px;margin-left:2px;} } /* ========================================================================== 6. HERO / PAGE HEADER ========================================================================== */ .hero{position:relative;overflow:hidden;padding:clamp(56px,7vw,88px) 0 clamp(48px,6vw,64px);} .hero-grid{display:grid;grid-template-columns:1.18fr 0.82fr;gap:var(--space-7);align-items:center;} @media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:var(--space-6);}} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-mono); font-size:12px;font-weight:600; color:var(--magenta); letter-spacing:0.11em;text-transform:uppercase; margin-bottom:var(--space-5); } .eyebrow::before{ content:"";width:8px;height:8px;background:currentColor; clip-path:polygon(50% 0%,0% 100%,100% 100%); flex:none; } .hero h1{ font-size:var(--step-6); line-height:1.02; font-weight:700; font-variation-settings:'wdth' var(--wdth-display); letter-spacing:-0.025em; max-width:17ch; } .hero h1 em{font-style:normal;color:var(--magenta);} .hero p.sub{ margin-top:var(--space-5); font-size:var(--step-1);line-height:1.6; color:var(--ink-soft); max-width:46ch; } .hero-trust{ margin-top:var(--space-6); display:flex;gap:var(--space-5);flex-wrap:wrap; font-family:var(--font-mono); font-size:12.5px;color:var(--ink-soft); } .hero-trust span{display:flex;align-items:center;gap:8px;} .dot{width:5px;height:5px;border-radius:50%;background:var(--olive);flex:none;} /* Bare dots carried no meaning here; a check reads as "included". Scoped so the sectional-chart waypoint dots are untouched. */ .hero-trust .dot{ width:14px;height:14px;border-radius:0;background:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6E4B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:14px 14px; } .hero-stat-row{display:flex;gap:var(--space-6);margin-top:var(--space-6);flex-wrap:wrap;} .hero-stat .num{ font-family:var(--font-display);font-variation-settings:'wdth' var(--wdth-display); font-size:28px;font-weight:700;color:var(--magenta);display:block;line-height:1; } .hero-stat .lbl{ font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft); text-transform:uppercase;letter-spacing:0.07em;margin-top:6px;display:block; } .hero-visual{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:10px;box-shadow:var(--shadow-md);} .hero-visual img{width:100%;border-radius:3px;display:block;} .hero-visual-cap{font-size:13px;line-height:1.5;color:var(--ink-soft);padding:12px 6px 4px;} .pageheader{padding:clamp(48px,6vw,60px) 0 clamp(36px,5vw,48px);border-bottom:1px solid var(--line);} .pageheader h1{font-size:clamp(31px,4.6vw,48px);font-weight:700;font-variation-settings:'wdth' var(--wdth-display);letter-spacing:-0.022em;max-width:20ch;} .pageheader p{margin-top:var(--space-4);color:var(--ink-soft);font-size:var(--step-1);max-width:62ch;line-height:1.65;} .crumb{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin-bottom:var(--space-4);} .crumb a{transition:color var(--dur-fast) ease;} .crumb a:hover{color:var(--ink);} .header-notes{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-5);font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);} .header-notes span{display:flex;align-items:center;gap:7px;} /* --- directional gyro ---------------------------------------------------- Modelled on a panel-mount vacuum DG: chamfered case, fine white card, an outlined swept-wing aircraft and a chartreuse heading bug. The card rotates behind the fixed aircraft, which is the point of the instrument, and the HDG knob at the bottom right actually works. -------------------------------------------------------------------------- */ :root{--dg-bug:#E9F94A;--dg-mark:#F2F3F1;} /* Capped to the same width as the instrument it holds, so the knob can be placed in percentages that line up with the drawing's own geometry. */ .hi-wrap{position:relative;width:100%;max-width:376px;margin-inline:auto;} .hi-wrap > svg{ width:100%;height:auto;display:block; filter:drop-shadow(0 18px 34px rgba(12,16,22,0.34)); } @media(max-width:880px){.hi-wrap{display:none;}} .dg-case{fill:url(#dgCase);} .dg-case-bevel{fill:none;stroke:#6C7176;stroke-width:1.1;opacity:0.4;} .dg-bezel{fill:#101214;stroke:#4E5257;stroke-width:1.4;stroke-opacity:0.5;} .dg-screw-body{fill:#1B1E21;} .dg-screw-rim{fill:none;stroke:#6A7078;stroke-width:0.9;opacity:0.5;} .dg-screw-slot{stroke:#828992;stroke-width:1.8;opacity:0.7;stroke-linecap:round;} /* fine markings — the whole point of this reference is that it reads light */ .dg-tick{stroke:var(--dg-mark);stroke-width:1.5;opacity:0.85;} .dg-tick-med{stroke:var(--dg-mark);stroke-width:2;opacity:0.95;} .dg-tick-major{stroke:#FFFFFF;stroke-width:2.6;opacity:1;} .dg-num{ font-family:var(--font-display);font-size:23px;font-weight:600; font-variation-settings:'wdth' 76; fill:var(--dg-mark);letter-spacing:0.01em; } .dg-cardinal{ font-family:var(--font-display);font-size:25px;font-weight:600; font-variation-settings:'wdth' 76; fill:#FFFFFF; } .dg-bug{fill:var(--dg-bug);} .dg-index{fill:var(--dg-mark);opacity:0.9;} .dg-plane{fill:none;stroke:var(--dg-mark);stroke-width:2.2;stroke-linejoin:round;} .dg-nose-index{stroke:var(--dg-mark);stroke-width:2;opacity:0.9;} .hi-card{transform-origin:200px 200px;} .hi-bug-g{transform:rotate(var(--bug,45deg));transform-origin:200px 200px;} /* a gyro erecting: swings past, settles, then precesses almost imperceptibly */ .hi-wrap[data-animate] .hi-card{ animation:hi-settle 2800ms var(--ease-out) both, hi-drift 20s ease-in-out 2800ms infinite; } @keyframes hi-settle{ 0%{transform:rotate(-52deg);} 46%{transform:rotate(10deg);} 70%{transform:rotate(-4deg);} 87%{transform:rotate(1.5deg);} 100%{transform:rotate(0deg);} } @keyframes hi-drift{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-1.4deg);} } /* --- heading bug knob ---------------------------------------------------- A working control, so it is a real focusable slider rather than part of the decorative drawing — which is also why the drawing carries aria-hidden and this does not. -------------------------------------------------------------------------- */ .hi-knob{ position:absolute; left:88%;top:89%; width:15%;aspect-ratio:1; transform:translate(-50%,-50%); cursor:grab; touch-action:none; /* rotation is driven from pointer events */ -webkit-user-select:none;user-select:none; filter:drop-shadow(0 4px 9px rgba(8,11,15,0.55)); transition:filter var(--dur-fast) ease; } .hi-knob:active{cursor:grabbing;} .hi-knob:hover{filter:drop-shadow(0 5px 13px rgba(8,11,15,0.7));} .hi-knob-face{display:block;width:100%;height:100%;transform:rotate(var(--knob,0deg));} .hi-knob-face svg{width:100%;height:100%;display:block;overflow:visible;} .hi-knob .hi-knurl-dark{fill:none;stroke:#0C0E10;stroke-width:9;stroke-dasharray:4.1 4.1;opacity:0.9;} .hi-knob .hi-knurl-light{fill:none;stroke:#6A7078;stroke-width:9;stroke-dasharray:4.1 4.1;opacity:0.3;} .hi-knob-text{ font-family:var(--font-display);font-size:19px;font-weight:700; font-variation-settings:'wdth' 82; fill:#FFFFFF;letter-spacing:0.04em; } .hi-knob:focus-visible{outline:2.5px solid var(--gps-magenta);outline-offset:5px;border-radius:50%;} /* once the knob is touched the card is under script control, so the intro settle and the idle precession have to get out of the way */ .hi-wrap.is-manual .hi-card{animation:none !important;} /* ========================================================================== 7. STAT LINE ========================================================================== */ .statline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-deep);} .statline-inner{display:grid;grid-template-columns:repeat(4,1fr);position:relative;} @media(max-width:760px){.statline-inner{grid-template-columns:repeat(2,1fr);}} .stat{padding:30px 24px;text-align:left;border-left:1px solid var(--line);} .stat:first-child{border-left:none;} @media(max-width:760px){ .stat{border-left:1px solid var(--line);} .stat:nth-child(odd){border-left:none;} .stat:nth-child(n+3){border-top:1px solid var(--line);} } .stat .num{ font-family:var(--font-display);font-variation-settings:'wdth' var(--wdth-display); font-size:clamp(26px,2.6vw,32px);font-weight:700;color:var(--magenta); display:block;line-height:1;letter-spacing:-0.02em; } .stat .lbl{ font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft); text-transform:uppercase;letter-spacing:0.07em;margin-top:8px;display:block;line-height:1.4; } /* ========================================================================== 8. SECTIONAL CHART STRIP -------------------------------------------------------------------------- The waypoints are the FAA test codes, and each one links to that exam. Previously the strip said nothing about that, and the "your path to success" caption sat on top of the PAR waypoint at every viewport, so the caption now lives in a plate line beneath the image instead. ========================================================================== */ .chart-strip{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .chart-media{ position:relative; width:100%; height:clamp(260px,30vw,360px); overflow:hidden; background:var(--ink); } .chart-media img{ width:100%;height:100%; object-fit:cover;object-position:50% 38%; display:block; } .chart-overlay{ position:absolute;inset:0; /* lift the chart so the route and pins read, and vignette the edges so the full-bleed strip has a defined top and bottom rather than a hard crop */ background: linear-gradient(to bottom,rgba(241,239,226,0.62) 0%,rgba(241,239,226,0.40) 24%,rgba(241,239,226,0.40) 76%,rgba(241,239,226,0.62) 100%), rgba(255,255,255,0.42); } .chart-route{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible;} .chart-route path{fill:none;stroke-linecap:round;stroke-linejoin:round;} /* Before site.js remaps the viewBox to the strip's pixel box, the route is drawn in a stretched 0-100 square, so the stroke needs protecting from the non-uniform scale. Afterwards the mapping is 1:1 and it must come off — non-scaling-stroke makes the UA measure dashes in screen space, which is what turns a draw-on animation into scattered fragments. */ .chart-route:not([data-mapped]) path{vector-effect:non-scaling-stroke;} .route-casing{stroke:rgba(248,246,238,0.92);stroke-width:7.5;} .route-line{stroke:var(--gps-magenta);stroke-width:3;} /* --route-len is written by site.js as the route's real length in px */ .js .route-casing,.js .route-line{ stroke-dasharray:var(--route-len,4000px); stroke-dashoffset:var(--route-len,4000px); } .chart-media.is-flying .route-casing, .chart-media.is-flying .route-line{animation:route-draw var(--route-dur,4200ms) cubic-bezier(0.65,0,0.35,1) forwards;} .chart-media.is-flown .route-casing, .chart-media.is-flown .route-line{stroke-dashoffset:0;} @keyframes route-draw{to{stroke-dashoffset:0;}} .chart-plane{ position:absolute;top:0;left:0;z-index:2; width:30px;height:30px; margin:-15px 0 0 -15px; color:var(--ink); opacity:0; pointer-events:none; transform:rotate(var(--rot,0deg)); filter:drop-shadow(0 1px 3px rgba(255,255,255,0.9)); transition:opacity 520ms ease; } .chart-media.is-flying .chart-plane{opacity:1;} .chart-media.is-flown .chart-plane{opacity:0;} .chart-plane svg{width:100%;height:100%;display:block;} /* The course line is drawn to each waypoint's data-x/data-y, so the airport symbol has to sit centred on that point the way it would on a moving map. Centring the whole element instead put the middle of the pin-plus-label stack on the fix, which left the line running below the symbol. --wpt-anchor is the distance from the element's top edge to the centre of the pin: its own padding plus half the pin. Shifting up by exactly that puts the pin's centre on the fix, whatever the label below it does. */ .chart-wpt{ --wpt-pin-size:27px; --wpt-anchor:calc(6px + var(--wpt-pin-size) / 2); --wpt-shift:calc(-1 * var(--wpt-anchor)); position:absolute;z-index:3; transform:translate(-50%,var(--wpt-shift)); transform-origin:50% var(--wpt-anchor); display:flex;flex-direction:column;align-items:center;gap:6px; /* comfortably past the 24px CSS-px pointer-target minimum */ padding:6px; cursor:pointer; transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); } .js .chart-wpt{opacity:0;} .js .chart-media.is-flown .chart-wpt, .js .chart-wpt.is-lit{opacity:1;} .chart-wpt.is-lit{animation:wpt-in 520ms var(--ease-out) both;} /* Fixes that carry a holding pattern need their identifier plate on the other side of the symbol — the racetrack sits where the plate normally would. With the stack reversed the pin is the bottom child, so the anchor is measured up from the element's bottom edge instead. */ .chart-wpt[data-label="above"]{ flex-direction:column-reverse; --wpt-shift:calc(-100% + var(--wpt-anchor)); transform-origin:50% calc(100% - var(--wpt-anchor)); } @keyframes wpt-in{ from{opacity:0;transform:translate(-50%,var(--wpt-shift)) scale(0.6);} 60%{opacity:1;transform:translate(-50%,var(--wpt-shift)) scale(1.12);} to{opacity:1;transform:translate(-50%,var(--wpt-shift)) scale(1);} } .wpt-pin{ position:relative; width:var(--wpt-pin-size);height:var(--wpt-pin-size); display:flex;align-items:center;justify-content:center; color:var(--ink); filter:drop-shadow(0 1px 3px rgba(255,255,255,0.95)); transition:transform var(--dur-base) var(--ease-out); } .wpt-pin svg{width:100%;height:100%;display:block;} /* radar ring that expands once as the route reaches the waypoint */ .chart-wpt.is-lit .wpt-pin::after{ content:'';position:absolute;inset:-4px;border-radius:50%; border:1.5px solid var(--gps-magenta); animation:wpt-ping 900ms var(--ease-out) 120ms forwards; } @keyframes wpt-ping{ from{transform:scale(0.5);opacity:0.9;} to{transform:scale(2.1);opacity:0;} } .wpt-code{ /* squared identifier plate, the way an avionics map labels a flight-plan fix */ font-family:var(--font-mono);font-size:12px;font-weight:700; color:var(--paper);background:rgba(20,31,49,0.94); border:1px solid rgba(224,33,138,0.55); padding:3px 9px;border-radius:var(--radius);letter-spacing:0.09em; white-space:nowrap; transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease; } .wpt-name{ position:absolute;top:100%;margin-top:5px; font-family:var(--font-body);font-size:11.5px;font-weight:600; color:var(--ink);background:rgba(248,246,238,0.95); border:1px solid var(--line); padding:3px 9px;border-radius:var(--radius); white-space:nowrap; opacity:0;transform:translateY(-3px); transition:opacity var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out); pointer-events:none; } .chart-wpt:hover .wpt-pin,.chart-wpt:focus-visible .wpt-pin{transform:translateY(-2px) scale(1.1);} .chart-wpt:hover .wpt-code,.chart-wpt:focus-visible .wpt-code{background:var(--gps-magenta);border-color:var(--gps-magenta);} .chart-wpt:hover .wpt-name,.chart-wpt:focus-visible .wpt-name{opacity:1;transform:translateY(0);} .chart-wpt:focus-visible{outline:2.5px solid var(--magenta);outline-offset:3px;border-radius:var(--radius);} /* Off-route airports: courses you can pick up without being on the career track. Drawn with the CUG's plain "public use" circle and a chart-style plain-text identifier rather than a flight-plan label plate, so they read as scenery next to the magenta route instead of competing with it. */ .chart-apt{ --apt-pin-size:19px; position:absolute;z-index:2; /* row layout, so the pin's centre is measured in from the left edge */ transform:translate(calc(-6px - var(--apt-pin-size) / 2),-50%); display:flex;align-items:center;gap:5px; padding:6px; cursor:pointer; transition:opacity var(--dur-slow) var(--ease-out); } .js .chart-apt{opacity:0;} .js .chart-apt.is-lit{opacity:1;} .apt-pin{ width:var(--apt-pin-size);height:var(--apt-pin-size);flex:none; color:#4A3D57; filter:drop-shadow(0 1px 2px rgba(255,255,255,0.95)); transition:transform var(--dur-base) var(--ease-out),color var(--dur-fast) ease; } .apt-pin svg{width:100%;height:100%;display:block;} .apt-code{ font-family:var(--font-mono);font-size:11px;font-weight:700; color:#40334C;letter-spacing:0.08em;white-space:nowrap; text-shadow:0 0 3px #F7F5EC,0 0 7px #F7F5EC,0 0 11px #F7F5EC,0 1px 2px #F7F5EC; transition:color var(--dur-fast) ease; } .chart-apt .wpt-name{left:50%;transform:translate(-50%,-3px);} .chart-apt[data-label="above"] .wpt-name{top:auto;bottom:100%;margin:0 0 5px;transform:translate(-50%,3px);} .chart-apt:hover .wpt-name,.chart-apt:focus-visible .wpt-name{opacity:1;transform:translate(-50%,0);} .chart-apt:hover .apt-pin,.chart-apt:focus-visible .apt-pin{transform:scale(1.12);color:var(--gps-magenta);} .chart-apt:hover .apt-code,.chart-apt:focus-visible .apt-code{color:var(--gps-magenta);} .chart-apt:focus-visible{outline:2.5px solid var(--gps-magenta);outline-offset:3px;border-radius:var(--radius);} /* Plate line — a publication figure caption, which is also what finally gets the strip to explain itself. */ /* full-bleed ground, content held to the page measure */ .chart-plate{border-top:1px solid var(--line);background:var(--paper-deep);} .chart-plate-inner{ display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap; padding-top:14px;padding-bottom:14px; } .chart-plate-inner .fig{ font-family:var(--font-mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:0.12em;color:var(--magenta); flex:none; } .chart-plate-inner .cap{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0;} .chart-plate-inner .cap strong{color:var(--ink);font-weight:600;} @media(max-width:640px){ .chart-media{height:265px;} .chart-wpt{--wpt-pin-size:21px;} .chart-apt{--apt-pin-size:15px;} .wpt-code{font-size:9.5px;padding:2px 6px;letter-spacing:0.06em;} .wpt-name{display:none;} .chart-plane{width:22px;height:22px;margin:-11px 0 0 -11px;} .apt-code{font-size:9px;} } /* ========================================================================== 9. HOW IT WORKS / FLOW ========================================================================== */ .flow{ display:grid;grid-template-columns:repeat(3,1fr); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--white);box-shadow:var(--shadow-sm); } @media(max-width:760px){.flow{grid-template-columns:1fr;}} .flow-step{padding:34px 30px;border-left:1px solid var(--line);position:relative;} .flow-step:first-child{border-left:none;} @media(max-width:760px){ .flow-step{border-left:none;border-top:1px solid var(--line);} .flow-step:first-child{border-top:none;} } .flow-code{ font-family:var(--font-mono);font-size:11.5px;font-weight:600; color:var(--olive-text);letter-spacing:0.09em; } .flow-step h3{font-size:var(--step-2);margin-top:var(--space-3);font-weight:600;} .flow-step p{margin-top:10px;color:var(--ink-soft);font-size:14.5px;line-height:1.6;} /* ========================================================================== 10. FEATURE GRID ========================================================================== */ .feat-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); } @media(max-width:880px){.feat-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.feat-grid{grid-template-columns:1fr;}} .feat{background:var(--white);padding:30px 26px;transition:background var(--dur-base) ease;} .feat:hover{background:var(--paper-raised);} /* Single ink colour on a 24px/1.5px stroke grid (Lucide, ISC). The originals mixed navy and magenta arbitrarily and sat on no common grid, which is what made them read as amateurish. */ .feat-icon{width:26px;height:26px;margin-bottom:18px;color:var(--ink);opacity:0.9;} .feat-wpt{ font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:0.09em; color:var(--ink-soft);display:flex;align-items:center;gap:7px;margin-bottom:var(--space-3); } .feat-wpt svg{width:10px;height:10px;flex:none;} .feat h3{font-size:17.5px;font-weight:600;} .feat p{margin-top:9px;font-size:14px;color:var(--ink-soft);line-height:1.6;} /* ========================================================================== 11. SCREENSHOT SLIDER ========================================================================== */ .slider-row{ display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; padding:4px 4px 8px;margin:0 -4px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; overscroll-behavior-x:contain; } .slide{flex:0 0 auto;width:300px;scroll-snap-align:start;} .device-frame{ background:var(--ink);border-radius:10px;padding:10px 10px 14px; box-shadow:var(--shadow-md); transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) ease; } .slide:hover .device-frame{transform:translateY(-3px);box-shadow:var(--shadow-lg);} .device-frame .screen{background:var(--white);border-radius:4px;overflow:hidden;aspect-ratio:16/10.4;} .device-frame .screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;cursor:zoom-in;} .device-dot{width:6px;height:6px;border-radius:50%;background:var(--paper);opacity:0.4;margin:0 auto 8px;} /* Full sentences were set in mono here, which is slow to read and is one of the things that made the page look machine-generated. Label stays mono. */ .slide-caption{margin-top:14px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;} .slide-caption strong{ display:block; font-family:var(--font-mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:0.1em; color:var(--olive-text);margin-bottom:4px; } .slider-controls{display:flex;justify-content:flex-end;gap:10px;margin-bottom:var(--space-5);} .slider-btn{ width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink); display:flex;align-items:center;justify-content:center;cursor:pointer;background:none; color:var(--ink); transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out); } .slider-btn:hover{background:rgba(27,42,64,0.06);transform:translateY(-1px);} .slider-btn:active{transform:translateY(0);} .slider-btn[disabled]{opacity:0.35;cursor:not-allowed;transform:none;} /* --- lightbox --- */ .lightbox{ position:fixed;inset:0;z-index:200; background:rgba(17,29,46,0.9); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center; padding:40px 20px;cursor:zoom-out; } .lightbox.open{display:flex;animation:fade-in var(--dur-base) ease both;} .lightbox img{max-width:min(900px,92vw);max-height:88vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.4);} .lightbox-close{ position:absolute;top:18px;right:22px; width:44px;height:44px;border-radius:50%; background:rgba(241,239,226,0.12);color:var(--paper); border:1px solid rgba(241,239,226,0.3); font-size:18px;line-height:1;cursor:pointer; } .lightbox-close:hover{background:rgba(241,239,226,0.22);} @keyframes fade-in{from{opacity:0;}to{opacity:1;}} /* ========================================================================== 12. DARK PANELS (course finder, military, system requirements, notice) ========================================================================== */ .finder,.reqs,.notice-panel{ background:var(--ink);color:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); } .finder{padding:52px 48px;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:center;} @media(max-width:880px){.finder{grid-template-columns:1fr;padding:36px 26px;gap:var(--space-6);}} .finder h2,.reqs h2,.notice-panel h2{color:var(--paper);font-size:var(--step-4);} .finder p{color:var(--on-ink-soft);margin-top:var(--space-4);font-size:15.5px;line-height:1.65;} .finder strong{color:var(--paper);} /* magenta at full strength is only 3.2:1 on navy — the lifted tint clears AA */ .finder .section-eyebrow,.reqs .section-eyebrow{color:var(--magenta-lift);} .notice-panel .section-eyebrow{color:var(--amber);} .finder-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-5);} .chip{ font-family:var(--font-mono);font-size:12.5px; border:1px solid var(--on-ink-line);color:var(--on-ink-soft); padding:8px 14px;border-radius:var(--radius-pill); } .finder-right{ background:var(--on-ink-fill); border:1px solid var(--on-ink-line); border-radius:var(--radius); padding:28px; } .finder-price-row{ display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4); padding:13px 0;border-bottom:1px solid rgba(241,239,226,0.14); } .finder-price-row:last-of-type{border-bottom:none;} .finder-price-row .name{font-size:14.5px;font-weight:500;} .finder-price-row .price{font-family:var(--font-mono);color:var(--amber);font-weight:600;} .finder-cta{ margin-top:var(--space-5);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); background:var(--paper);color:var(--ink); min-height:48px;padding:0 22px;border-radius:var(--radius); font-weight:600;font-size:14.5px;width:100%; transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out); } .finder-cta:hover{background:var(--white);transform:translateY(-1px);} .reqs{padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:44px;} @media(max-width:880px){.reqs{grid-template-columns:1fr;padding:36px 26px;gap:var(--space-6);}} .reqs p{color:var(--on-ink-soft);margin-top:var(--space-4);font-size:15px;line-height:1.65;} .platform-row{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:26px;} .platform-chip{ display:flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:12.5px;color:var(--on-ink-soft); border:1px solid var(--on-ink-line);padding:8px 14px;border-radius:var(--radius-pill); } .platform-chip svg{width:14px;height:14px;flex:none;} .reqs-note{ background:var(--on-ink-fill);border:1px solid var(--on-ink-line); border-radius:var(--radius);padding:24px;font-size:14px;color:var(--on-ink-soft);line-height:1.65; } .reqs-note strong{color:var(--paper);} .notice-panel{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;padding:48px 46px;} @media(max-width:880px){.notice-panel{grid-template-columns:1fr;gap:var(--space-6);padding:36px 28px;}} .notice-panel h2{margin:0 0 var(--space-4);} .notice-panel p{margin:0 0 var(--space-4);color:var(--on-ink-soft);font-size:15.5px;line-height:1.65;} .notice-sub{font-size:14.5px;color:var(--on-ink-mute);} .notice-panel .btn-primary{ margin-top:10px; background:var(--paper);color:var(--ink);border-color:var(--paper); } .notice-panel .btn-primary:hover{background:var(--white);} .notice-dates{ border-left:1px solid var(--on-ink-line);padding-left:34px; display:flex;flex-direction:column;gap:var(--space-5);justify-content:center; } @media(max-width:880px){ .notice-dates{border-left:none;border-top:1px solid var(--on-ink-line);padding-left:0;padding-top:28px;} } .notice-date .d{ display:block;font-family:var(--font-mono); font-size:12.5px;font-weight:600;color:var(--amber); letter-spacing:0.08em;margin-bottom:6px; } .notice-date .t{display:block;font-size:14px;line-height:1.55;color:var(--on-ink-soft);} /* ========================================================================== 13. COMPARISON TABLE -------------------------------------------------------------------------- Own column is promoted: tinted ground, full-height rule either side and a sticky first column on small screens. Markers stay per-cell rather than per-column, so the rows where Company K genuinely matches us are left unmarked and the table stays honest — which is what makes it persuasive. ========================================================================== */ .table-wrap{ border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;background:var(--white);overflow-x:auto; box-shadow:var(--shadow-sm); -webkit-overflow-scrolling:touch; } table{width:100%;border-collapse:collapse;min-width:720px;} th,td{padding:16px 18px;text-align:left;font-size:14px;border-bottom:1px solid var(--line-soft);} thead th{ font-family:var(--font-mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:0.09em;color:var(--ink-soft); background:var(--paper-deep); border-bottom:1px solid var(--line); } tbody tr:last-child td{border-bottom:none;} tbody tr{transition:background var(--dur-fast) ease;} tbody tr:hover{background:var(--paper-raised);} th:first-child,td:first-child{font-weight:600;} /* Promote our own column — only on a comparison table. Informational tables share this markup and must not inherit an emphasis that means "this is us". */ .table-compare thead th:nth-child(2){ color:var(--ink);background:#DCD8C2; box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line); } .table-compare tbody td:nth-child(2){ background:rgba(110,127,88,0.07); box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line); } .table-compare tbody tr:hover td:nth-child(2){background:rgba(110,127,88,0.12);} /* Inline-block ::before elements sit on the text's own line box; a background-image on the cell pins to the cell box instead, which floats the icon above the text on any padded or multi-line row. */ td.us::before,td.lim::before,td.part::before{ content:'';display:inline-block; width:14px;height:14px;margin-right:9px;vertical-align:-2px; background-repeat:no-repeat;background-position:center;background-size:contain; } td.us{font-weight:600;color:var(--olive-text);} td.us::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6E4B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } td.lim{color:var(--ink-soft);} td.lim::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8324A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } td.part{color:var(--ink-soft);} td.part::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE8A2E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } /* ========================================================================== 14. TESTIMONIALS & PROOF ========================================================================== */ .testimonial-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-bottom:var(--space-7);} @media(max-width:760px){.testimonial-stats{grid-template-columns:1fr;}} .testimonial-stat{ background:var(--white);border:1px solid var(--line); border-radius:var(--radius);padding:32px 28px; box-shadow:var(--shadow-sm); } .testimonial-stat .num{ display:block; font-family:var(--font-display);font-variation-settings:'wdth' var(--wdth-display); font-size:clamp(36px,4vw,46px);font-weight:700;color:var(--magenta); line-height:1;margin-bottom:var(--space-3);letter-spacing:-0.03em; } .testimonial-stat .lbl{display:block;font-size:14.5px;color:var(--ink-soft);line-height:1.55;} .testimonial-quote{ position:relative; max-width:700px;margin:0 auto; background:var(--ink);color:var(--paper); border-radius:var(--radius-lg);padding:44px 46px 36px; text-align:center; box-shadow:var(--shadow-md); } @media(max-width:640px){.testimonial-quote{padding:32px 26px 26px;}} /* an actual typographic quote mark, set in the display face */ .testimonial-quote::before{ content:'\201C'; position:absolute;top:6px;left:24px; font-family:var(--font-display);font-size:76px;line-height:1; color:var(--magenta-lift);opacity:0.35; pointer-events:none; } .testimonial-quote p{ margin:0;position:relative; font-size:clamp(18px,2vw,21px);line-height:1.55;font-weight:400; color:var(--paper); } .testimonial-quote cite{ display:block;margin-top:var(--space-5); font-family:var(--font-mono);font-size:12px; font-style:normal;color:var(--on-ink-mute); letter-spacing:0.06em;text-transform:uppercase; } /* The Airman Knowledge Test Report artwork carries its own paper, shadow and transparency, so it needs no card around it — a frame here would just draw a second, competing edge. */ .aktr-proof{ max-width:700px;margin:var(--space-7) auto 0; } .aktr-proof img{width:100%;display:block;} /* ========================================================================== 15. FAQ ========================================================================== */ .faq-list{max-width:780px;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{ width:100%;text-align:left;background:none;border:none;cursor:pointer; padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4); font-family:var(--font-display);font-variation-settings:'wdth' var(--wdth-heading); font-size:17px;font-weight:600;color:var(--ink); transition:color var(--dur-fast) ease; } .faq-q:hover{color:var(--magenta);} .faq-q .plus{ font-family:var(--font-mono);font-weight:400;color:var(--magenta); font-size:20px;line-height:1;flex:none; transition:transform var(--dur-base) var(--ease-out); } .faq-item.open .plus{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-in-out);} .faq-a p{padding:0 0 24px;color:var(--ink-soft);font-size:15px;line-height:1.7;max-width:64ch;margin:0;} .faq-cross-link{margin-top:var(--space-6);font-size:15px;color:var(--ink-soft);} .faq-cross-link a{color:var(--magenta);font-weight:600;} .faq-cross-link a:hover{text-decoration:underline;} /* ========================================================================== 16. FOOTER CTA & FOOTER ========================================================================== */ .footer-cta{ text-align:center;padding:clamp(64px,8vw,96px) 0 clamp(56px,7vw,76px); border-top:1px solid var(--line); background:var(--paper-deep); } .footer-cta h2{font-size:var(--step-5);max-width:18ch;margin:0 auto;font-variation-settings:'wdth' var(--wdth-display);letter-spacing:-0.022em;} .footer-cta p{margin-top:var(--space-4);color:var(--ink-soft);font-size:16px;} .footer-cta .hero-ctas{justify-content:center;margin-top:var(--space-6);} @media(max-width:480px){.footer-cta .hero-ctas .btn{width:auto;min-width:min(100%,280px);}} footer{ border-top:1px solid var(--line); padding:var(--space-7) 0 var(--space-6); font-size:13px;color:var(--ink-soft); background:var(--paper); } .footer-inner{display:flex;justify-content:space-between;width:100%;flex-wrap:wrap;gap:var(--space-3);align-items:center;} .footer-links{display:flex;gap:var(--space-5);flex-wrap:wrap;} .footer-links a{transition:color var(--dur-fast) ease;} .footer-links a:hover{color:var(--ink);} /* Structured footer: link columns, contact, app links, legal line. */ .footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--space-7) var(--space-6); padding-bottom:var(--space-7); } @media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6);}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:var(--space-6);}} .footer-brand .logo-img{width:200px;height:auto;margin-bottom:var(--space-4);} .footer-brand p{margin:0 0 var(--space-4);font-size:13.5px;line-height:1.65;max-width:34ch;color:var(--ink-soft);} .footer-col h2{ font-family:var(--font-mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:0.11em;color:var(--ink); margin:0 0 var(--space-4); } .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;} .footer-col a{font-size:13.5px;color:var(--ink-soft);transition:color var(--dur-fast) ease;} .footer-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;} .footer-bottom{ display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:var(--space-3); border-top:1px solid var(--line);padding-top:var(--space-5); font-size:12.5px; } .footer-codes{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.04em;color:var(--ink-soft);} .app-links{display:flex;gap:10px;flex-wrap:wrap;} .app-badge{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--line);background:var(--white); min-height:44px;padding:0 16px;border-radius:6px; font-size:13.5px;font-weight:600;color:var(--ink); transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out); } .app-badge:hover{border-color:var(--ink);background:var(--paper-raised);transform:translateY(-1px);} .app-badge svg{width:17px;height:17px;flex:none;} /* ========================================================================== 17. COURSES PAGE ========================================================================== */ .banner{ margin:var(--space-6) 0 0; background:var(--ink);color:var(--paper); border-radius:var(--radius-lg);padding:20px 26px; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4); box-shadow:var(--shadow-md); } .banner p{margin:0;font-size:14.5px;color:var(--on-ink-soft);} .banner strong{color:var(--paper);} .banner .code{ font-family:var(--font-mono);background:rgba(241,239,226,0.14); padding:3px 9px;border-radius:3px;font-size:13px;color:var(--paper); } .amex-notice{ margin-top:var(--space-4);display:inline-flex;align-items:center;gap:8px; font-size:13px;color:var(--magenta); background:rgba(168,50,74,0.07);border:1px solid rgba(168,50,74,0.25); padding:8px 14px;border-radius:var(--radius-pill); } .amex-notice svg{flex:none;width:15px;height:15px;} .filter-bar{ position:sticky;top:var(--nav-h);z-index:40; background:rgba(241,239,226,0.94); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:16px 0; } .filter-row{display:flex;gap:10px;align-items:center;} .filter-chips{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0;} .search-field{display:contents;} .filter-label{ font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--ink-soft); text-transform:uppercase;letter-spacing:0.1em;margin-right:6px;flex:none; } .chip-btn{ font-family:var(--font-mono);font-size:12.5px; border:1px solid var(--line);background:var(--white);color:var(--ink-soft); min-height:38px;padding:0 15px;border-radius:var(--radius-pill);cursor:pointer; transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease,background var(--dur-fast) ease; } .chip-btn:hover{border-color:var(--ink);color:var(--ink);} .chip-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper);} .search-input{ margin-left:auto;font-family:var(--font-body);font-size:14px; border:1px solid var(--line);background:var(--white); min-height:38px;padding:0 15px;border-radius:var(--radius-pill);min-width:210px;color:var(--ink); } .search-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,42,64,0.1);} .search-input:focus-visible{outline:none;} /* On a phone the wrapped chip rows made this sticky bar 407px tall — 59% of the viewport permanently occupied. Search takes its own full-width row and the chips become one horizontally scrollable rail, which is the standard mobile filter pattern and brings the bar back to roughly 110px. */ @media(max-width:880px){ .filter-row{flex-wrap:wrap;} .search-field{display:block;width:100%;order:-1;} .search-input{margin-left:0;width:100%;min-width:0;min-height:44px;font-size:16px;} .filter-chips{ flex-wrap:nowrap;width:100%; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* bleed the rail to the screen edges so the last chip isn't clipped mid-scroll against the wrap's padding */ margin:0 -20px;padding:2px 20px; } .filter-chips::-webkit-scrollbar{display:none;} .chip-btn{flex:none;scroll-snap-align:start;min-height:40px;} .filter-label{display:none;} } .courses-section{padding:var(--space-7) 0 90px;} .group-heading{display:flex;align-items:baseline;gap:var(--space-3);margin:var(--space-7) 0 var(--space-5);} .group-heading:first-child{margin-top:0;} .group-heading h2{font-size:var(--step-3);font-weight:600;} .group-heading .count{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);} .group-note{font-size:13.5px;color:var(--ink-soft);line-height:1.65;margin:-8px 0 var(--space-5);max-width:72ch;} .notice-callout{ display:flex;gap:var(--space-3);align-items:flex-start; background:rgba(206,138,46,0.08);border:1px solid rgba(206,138,46,0.28); border-radius:var(--radius);padding:16px 18px;margin:-8px 0 var(--space-5);max-width:80ch; } .notice-callout svg{flex:none;width:17px;height:17px;margin-top:2px;} .notice-callout p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.65;} .notice-callout strong{color:var(--ink);} .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);} @media(max-width:920px){.course-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.course-grid{grid-template-columns:1fr;}} .course-card{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius); padding:22px;display:flex;flex-direction:column; box-shadow:var(--shadow-sm); transition:border-color var(--dur-base) ease,box-shadow var(--dur-base) ease,transform var(--dur-base) var(--ease-out); } .course-card:hover{border-color:var(--ink);box-shadow:var(--shadow-md);transform:translateY(-2px);} .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;} .card-code{ font-family:var(--font-mono);font-size:11px;font-weight:700; color:var(--olive-text);background:#EDF0E6;padding:4px 9px;border-radius:3px;letter-spacing:0.07em; } .card-price{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--magenta);white-space:nowrap;} .card-title{font-family:var(--font-display);font-variation-settings:'wdth' var(--wdth-heading);font-size:17px;font-weight:600;margin-top:var(--space-3);line-height:1.25;} .card-sub{font-size:13px;color:var(--ink-soft);margin-top:4px;} .card-blurb{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-top:10px;flex-grow:1;} details.card-details{margin-top:var(--space-3);border-top:1px solid var(--line-soft);padding-top:var(--space-3);} details.card-details summary{ cursor:pointer;font-family:var(--font-mono);font-size:11px;font-weight:600; color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.09em; list-style:none;display:flex;align-items:center;gap:7px; min-height:24px; } details.card-details summary::-webkit-details-marker{display:none;} details.card-details summary::before{content:"+";font-family:var(--font-mono);color:var(--magenta);font-size:14px;} details.card-details[open] summary::before{content:"–";} details.card-details ul{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--ink-soft);line-height:1.75;} .card-cta{ margin-top:var(--space-4);display:flex;align-items:center;justify-content:center;gap:8px; background:var(--ink);color:var(--paper); min-height:46px;padding:0 18px;border-radius:var(--radius);font-weight:600;font-size:14px; transition:background var(--dur-fast) ease; } .card-cta:hover{background:var(--ink-deep);} .card-detail-link{ display:flex;align-items:center;justify-content:center; min-height:34px;margin-top:6px; font-size:13px;font-weight:600;color:var(--magenta); } .card-detail-link:hover{text-decoration:underline;text-underline-offset:3px;} .fineprint{ margin-top:80px;padding-top:var(--space-6);border-top:1px solid var(--line); font-size:12.5px;color:var(--ink-soft);line-height:1.75;max-width:80ch; } .fineprint h3{font-size:14px;margin-bottom:10px;} .empty-state{display:none;text-align:center;padding:60px 20px;color:var(--ink-soft);font-size:14.5px;} .empty-state.show{display:block;} /* ========================================================================== 18. FEATURES PAGE ========================================================================== */ .checklist{ display:grid;grid-template-columns:repeat(2,1fr); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--white);box-shadow:var(--shadow-sm); } @media(max-width:760px){.checklist{grid-template-columns:1fr;}} .check-item{ display:flex;gap:var(--space-3);align-items:flex-start;padding:18px 22px; border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft); } .check-item:nth-child(2n){border-right:none;} @media(max-width:760px){.check-item{border-right:none;}} .check-item svg{flex:none;width:16px;height:16px;margin-top:3px;} .check-item p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.55;} .check-item .footnote{display:block;font-size:12px;color:var(--ink-soft);opacity:0.75;margin-top:4px;} /* ========================================================================== 19. SCHOOLS PAGE ========================================================================== */ .benefit-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); } @media(max-width:920px){.benefit-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.benefit-grid{grid-template-columns:1fr;}} .benefit{background:var(--white);padding:28px 24px;transition:background var(--dur-base) ease;} .benefit:hover{background:var(--paper-raised);} .benefit-icon{width:26px;height:26px;margin-bottom:16px;color:var(--ink);opacity:0.9;} .benefit h3{font-size:16px;font-weight:600;} .benefit p{margin-top:8px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;} .panel-row{ display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--line);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); } @media(max-width:820px){.panel-row{grid-template-columns:1fr;}} .panel{background:var(--white);padding:36px;} .panel .tag{ font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--olive-text); text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--space-3);display:block; } .panel h3{font-size:19px;font-weight:600;} .panel p{margin-top:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.65;} .panel ul{margin:var(--space-3) 0 0;padding-left:18px;font-size:14px;color:var(--ink-soft);line-height:1.75;} /* ========================================================================== 20. FORMS (shared: schools, support, question feedback) ========================================================================== */ .form-shell{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius); padding:40px;max-width:760px;box-shadow:var(--shadow-sm); } @media(max-width:640px){.form-shell{padding:26px;}} /* Grid and flex items default to a min-width from their content's intrinsic size, so a