/* SkillX design system v4, research-locked premium dark. System: Linear surface ladder + Mantlr depth trio (border / surface step / inset highlight), lime rationed to actions + key signals, Geist Mono micro-labels, SVG grain, Emil Kowalski motion tokens. Self-hosted fonts. */ @font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-800.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Inter Tight';src:url('fonts/inter-tight-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Inter Tight';src:url('fonts/inter-tight-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Inter Tight';src:url('fonts/inter-tight-800.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Geist Mono';src:url('fonts/geist-mono-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Geist Mono';src:url('fonts/geist-mono-500.woff2') format('woff2');font-weight:500;font-display:swap} :root{ color-scheme:dark;/* dark is the default: tells the browser to render NATIVE UI in dark style (select dropdown menus, checkboxes, scrollbars, autofill, overscroll canvas). The light variant lives on [data-theme="light"] later in this file (CHROME-002 F1) — equal specificity, later source order, so it wins in light mode. */ --bg:#08090A; --panel:#0F1011; --panel2:#131415; --lvl3:#191A1B; --ink:#F7F8F8; --body:#D0D6E0; --mut:#8A8F98; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.055); --lime:#B6F34A; --lime2:#8EE02E; --lime-dim:rgba(182,243,74,.09); --eo:cubic-bezier(.23,1,.32,1); --enter:cubic-bezier(.22,1,.36,1); --eio:cubic-bezier(.77,0,.175,1); --award:cubic-bezier(.16,1,.3,1); --sh:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05); --track:#262626; --r:16px; /* Radius ladder (concentric corners: each nested level steps in one gap = 4px; derive, never drift — a padding change to --r cascades to every nested radius). */ --r-in:calc(var(--r) - 4px); /* 12px — nested one level inside --r surfaces */ --r-in2:calc(var(--r) - 8px); /* 8px — nested two levels (inset rows, inner chips) */ } /* Cross-document (MPA) view transitions: ordinary same-origin navigations get a native cross-fade in Chromium 126+ with zero JS, pure progressive enhancement (Safari/Firefox ignore). Wrapped in no-preference so reduced-motion users keep instant navigation. No named shared elements: header/footer/dash/cert logos render at different heights (warp risk) and index carries two .logo anchors (name-uniqueness rule). */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:72px}/* 72px keeps anchor/focus targets clear of the sticky header (WCAG 2.2 2.4.11 Focus Not Obscured) */ html,body{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--body);font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;letter-spacing:.008em;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body::after{content:'';position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.038;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='182' height='182'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='182' height='182' filter='url(%23n)'/%3E%3C/svg%3E")} ::selection{background:var(--lime);color:#0A0C04} /* CHROME-014: native scrollbar — ≥3:1 thumb/track pairs (dark 3.20/4.19/5.50, light 3.92/4.97/6.41 measured), :hover/:active states, standards layer + stable gutter (F1–F6) */ ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:#0A0B0C} ::-webkit-scrollbar-thumb{background:#5C626B;border-radius:99px;border:2px solid #0A0B0C} ::-webkit-scrollbar-thumb:hover{background:#6E747E} ::-webkit-scrollbar-thumb:active{background:#82888F} /* CHROME-014 F3/F6: standards layer for Firefox (ignores webkit rules) + stable gutter kills the ~10px content shift between scrollable and non-scrollable pages */ html{scrollbar-width:thin;scrollbar-color:#5C626B #0A0B0C;scrollbar-gutter:stable} a{color:var(--lime);text-decoration-color:rgba(182,243,74,.35);text-underline-offset:3px} [data-theme="light"] a{text-decoration-color:rgba(78,122,10,.45)}/* CHROME-007 F1: light-mode in-copy underline parity — the dark-lime .35 decoration is near-invisible on #F2F4EC; placed before a:hover so the hover var(--lime) (#4E7A0A) still wins */ a:hover{text-decoration-color:var(--lime)} img,svg,video{max-width:100%;height:auto} .wrap{max-width:1200px;margin:0 auto;padding:0 24px;width:100%} .home .wrap{max-width:1080px}/* Linear container test (homepage only): 1080px vs 1200px */ h1,h2,.logo,.stat b,.statcard b,.countdown,.date strong{font-family:'Inter Tight','Inter',system-ui,sans-serif} h1{font-size:clamp(38px,5.6vw,60px);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin:0;color:var(--ink)} h2{font-size:clamp(25px,3.6vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:0 0 8px;color:var(--ink)} /* Balanced headlines + pretty intros, 2026 typography craft (progressive enhancement; unsupported browsers keep normal wrapping) */ h1,h2,h3{text-wrap:balance} .sub,.quote-card blockquote{text-wrap:pretty} .h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0 0 10px;font-family:'Inter Tight','Inter',sans-serif;color:var(--ink)} .eyebrow{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--lime);margin:0 0 16px;display:flex;align-items:center;gap:10px} .eyebrow::after{content:'';height:1px;width:44px;background:linear-gradient(90deg,rgba(182,243,74,.5),transparent)} [data-theme="light"] .eyebrow::after{background:linear-gradient(90deg,rgba(98,145,38,.55),transparent)} section{padding:72px 0} .sub{color:var(--mut);margin:0 0 32px;max-width:660px} .sub.wide{max-width:760px}/* HP-008 F1: wide-measure token — replaces the inline max-width:760px overrides on index.php */ .mut{color:var(--mut)} .lime{color:var(--lime)} /* Scroll progress (JS-driven scaleX) */ #scrollbar-progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--lime2),var(--lime));transform-origin:0 50%;transform:scaleX(0);z-index:1200} /* Header, one of only two glass layers */ header.site{position:sticky;top:0;background:rgba(8,9,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line2);z-index:50} header.site .wrap{display:flex;align-items:center;gap:24px;max-width:1360px;height:64px;padding-top:0;padding-bottom:0;flex-wrap:nowrap} .logo{display:inline-flex;align-items:center;text-decoration:none;flex:none} .logo img{height:34px;width:auto;display:block} nav.main{margin-left:auto;display:flex;gap:2px;flex-wrap:nowrap;align-items:center} nav.main a{color:var(--mut);text-decoration:none;font-size:13.5px;font-weight:500;padding:8px 10px;border-radius:10px;white-space:nowrap;transition:color .16s var(--eo),background .16s var(--eo)} /* Primary action in the bar, a real button, not a tenth text link */ nav.main a.nav-cta{background:var(--lime);color:#141603;font-weight:600;margin-left:10px;padding:9px 18px;border-radius:99px;box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5)} nav.main a.nav-cta:hover{background:var(--lime);color:#141603;filter:brightness(1.05)} nav.main a.nav-cta:active{transform:scale(.97)} /* Mobile menu button, desktop hides it, the ≤1180px block below shows it */ .nav-toggle{display:none;margin-left:auto;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0} .nav-toggle i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s var(--eo),opacity .18s var(--eo)} .nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} nav.main a:hover{color:var(--ink);background:rgba(255,255,255,.05)} /* Nav link roll-swap hover (0.3s cubic-bezier(.76,0,.24,1)); ::after duplicate is decorative to screen readers */ nav.main a .r{display:inline-block;overflow:hidden;max-height:1.35em;line-height:1.35;vertical-align:top} nav.main a .r>span{display:block;transition:transform .3s cubic-bezier(.76,0,.24,1)} nav.main a .r>span::after{content:attr(data-t);display:block} nav.main a:hover .r>span,nav.main a:focus-visible .r>span{transform:translateY(-50%)} nav.main a sup{display:inline-flex;align-items:center;font-size:10px;line-height:1;color:var(--mut);background:rgba(255,255,255,.07);border-radius:99px;padding:3px 6px;margin-left:6px;font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.02em;vertical-align:middle} /* Nav scroll-spy "you are here" state (Raycast eval micro-adoption): lime-tinted pill, ink text; no layout change, reduced-motion safe */ nav.main a.on{color:var(--ink);background:rgba(182,243,74,.12)} /* Buttons, lime carries black text (10.44:1); press scale .97 (Emil) */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#CFFB7E,var(--lime) 58%,#A5E62E);color:#141603;font-weight:600;border:0;border-radius:10px;padding:12px 24px;text-decoration:none;cursor:pointer;font-size:15px;min-height:48px;box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .15s var(--eo),box-shadow .2s var(--eo),filter .2s var(--eo);font-family:'Inter',sans-serif;will-change:transform} .btn:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 8px 22px rgba(182,243,74,.16),inset 0 1px 0 rgba(255,255,255,.55);text-decoration:none} .btn:active{transform:scale(.97)} .btn.ghost{background:rgba(255,255,255,.03);color:var(--ink);border:1px solid var(--line);box-shadow:none} .btn.ghost:hover{border-color:rgba(182,243,74,.4);background:rgba(182,243,74,.05);box-shadow:none} .btn.small{padding:10px 18px;font-size:13.5px;min-height:44px;border-radius:9px} .btn svg{flex:none;transition:transform .18s var(--eo)} .btn:hover svg{transform:translateX(2px)} /* Magnetic CTAs: --mx/--my pull (JS-set on fine pointers) so the hover lift and the press scale compose instead of being overridden, soft elastic return via the overshoot curve (movingparts Button 01 pattern, pointer-only). */ .btn.magnet{--mx:0px;--my:0px;transform:translate(var(--mx),var(--my));transition:transform .45s cubic-bezier(.22,1.36,.36,1),box-shadow .2s var(--eo),filter .2s var(--eo)} .btn.magnet:hover{transform:translate(var(--mx),var(--my)) translateY(-1px);transition:transform .18s var(--eo),box-shadow .2s var(--eo),filter .2s var(--eo)} .btn.magnet:active{transform:translate(var(--mx),var(--my)) scale(.97)} /* Click-ripple on magnetic CTAs (Awwwards micro-interaction pattern, banked queue): press feedback radiating from the touch point, completing the button state machine (idle → hover → active → complete). 160ms per the motion budget (press/hover 100–160ms); transform + opacity only; rationed to .btn.magnet (primary CTAs). This is user-triggered press feedback, not decorative idle motion (the removed CTA shine sweep); reduced-motion is covered by the global animation:none blanket. */ .btn.magnet .ripple{position:absolute;border-radius:50%;background:rgba(20,22,3,.16);transform:scale(0);opacity:0;pointer-events:none} .btn.magnet .ripple.go{animation:rippleIn .16s var(--eo) forwards} @keyframes rippleIn{0%{transform:scale(0);opacity:.9}100%{transform:scale(1);opacity:0}} /* Button loading state (CHROME-006 F3): inline spinner + no double-submit. Reduced-motion: the global animation:none blanket (L688) stills the spinner. */ .btn.is-loading{pointer-events:none} .btn.is-loading::after{content:"";width:14px;height:14px;flex:none;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btnspin .6s linear infinite} @keyframes btnspin{to{transform:rotate(360deg)}} /* Submit feedback states (run 134, glow-kill run 165): disabled affordance for locked/in-flight buttons. Locked cases: OTP-locked "Claim My Free Seat" (enroll.php ships disabled until contact is verified) and the pre-window "Mark My Attendance" ghosts. Magnet pull is never composed over the disabled state (no lift, no filter, no glow — hover restores the resting shadow). */ .btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed} .btn:disabled:hover,.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{transform:none;filter:none;box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55)} .btn.ghost:disabled:hover,.btn.ghost[disabled]:hover,.btn.ghost[aria-disabled="true"]:hover{box-shadow:none} .btn:disabled:hover svg,.btn[disabled]:hover svg,.btn[aria-disabled="true"]:hover svg{transform:none} a,button,input,select,summary{touch-action:manipulation} :focus-visible{outline:2px solid var(--lime);outline-offset:2px}/* CHROME-011 F1: solid token ring — fixes the 1.13:1 light-mode failure of the .65 wash (light --lime #4E7A0A = 4.46:1); supersedes CHROME-007 F2's unshipped .7 override */ /* Skip link: keyboard users jump past the header/side nav straight to content (WCAG 2.4.1 Bypass Blocks). Hidden until focused; the visible lime ring lives on the link itself. */ .skip-link{position:absolute;left:12px;top:12px;z-index:100;background:var(--lime);color:#141603;font:600 14px/1.3 'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px 18px;border-radius:10px;text-decoration:none;transform:translateY(-220%);transition:transform .2s var(--eo)} .skip-link:focus-visible{transform:translateY(0)} /* The skip target is a landmark, not a control: no full-viewport ring when it receives programmatic focus */ main[tabindex="-1"]:focus{outline:none} /* Hero */ .hero{position:relative;padding:64px 0;background:radial-gradient(760px 360px at 82% -80px,rgba(182,243,74,.1),transparent 62%),#050607;color:var(--body);overflow:hidden} .hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px);background-size:24px 24px;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent)} .hero .wrap{position:relative;z-index:1;max-width:1408px} /* Hero particle field removed 2026-10-21 (audit-report conformance, owner decision): the report names particle fields as decoration that competes with the headline (§6.3/§6.19). The static dot-grid + faint radial atmosphere remain as the hero's background treatment. */ .hero-grid{display:grid;grid-template-columns:452px minmax(0,1fr);gap:32px;align-items:end} .hero-logo{width:min(320px,70vw);display:block;margin-bottom:24px} .hero h1{max-width:600px;font-weight:600}/* award-winners type pass: 700→600, Inter Tight 600 self-hosted */ .hero h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--lime);letter-spacing:-.01em} /* hero H1 word-stagger (JS progressive enhancement): server renders plain text; JS splits words, aria-label on the h1 keeps screen readers announcing the plain headline once. No base opacity on .w: with fill both the words pre-state at the from-frame; browsers without animation support just show the plain words. Reduced-motion exits the JS entirely (plain .li). */ .hero h1.js-split .w{display:inline-block;animation:wUp .75s var(--award) both;animation-delay:calc(var(--ld,.18s) + var(--wi)*.06s);will-change:transform,opacity} @keyframes wUp{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:translateY(0)}} /* Hero H1 typing skill words (progressive enhancement): .cyc is an inline-grid slot — all seven skill nouns stack in one grid cell, so the slot sizes to the longest word from first paint (zero CLS, no JS measuring). No-JS keeps the static first word. JS adds .js-type: the word spans become invisible sizers and the .cyc-type span types each word character by character with a blinking caret, holds, deletes fast, and moves on (owner directive 2026-10-22: faster rotation + typing animation). clip-path (not overflow:hidden) clips without disturbing the inline baseline. This is the hero's sustained signature effect; the one-shot wUp word-stagger above stays as the load-in choreography. */ .cyc{display:inline-grid;vertical-align:baseline;clip-path:inset(-3px 0)} .cyc-word{grid-area:1/1;white-space:nowrap;transform:translateY(110%);opacity:0;transition:transform .6s var(--award),opacity .6s var(--award)} .cyc-word:first-child{transform:translateY(0);opacity:1} .cyc-type{display:none} .js-type .cyc-word{transform:none;opacity:0;transition:none} .js-type .cyc-type{display:block;grid-area:1/1;white-space:nowrap} .js-type .cyc-type::after{content:"";display:inline-block;width:.09em;height:.82em;margin-left:.07em;background:var(--lime);vertical-align:-.08em;animation:cycBlink 1.05s steps(1) infinite} @keyframes cycBlink{0%,55%{opacity:1}56%,100%{opacity:0}} [data-theme="light"] .js-type .cyc-type::after{background:#629126} .hero h1.js-split .cyc{animation:wUp .75s var(--award) both;animation-delay:calc(var(--ld,.18s) + .06s)} /* Owner directive (2026-10-22): the hero typing rotation runs regardless of prefers-reduced-motion, same ruling as the topics marquee; only the caret blink steadies. */ @media (prefers-reduced-motion:reduce){.js-type .cyc-type::after{animation:none}} /* Section-heading word-stagger: server renders plain text; JS splits each h2 when its section first enters the viewport (scroll-owned, not load-owned, award-winners pattern). Same wUp keyframes + 50ms word step; no base delay so the reveal starts on entry. */ main section h2.js-split .w{display:inline-block;animation:wUp .75s var(--award) both;animation-delay:calc(var(--wi)*.05s);will-change:transform,opacity} .hero p.lead{color:#A9AEB8;font-size:17.5px;line-height:1.6;max-width:540px;margin:20px 0 32px} .pill{display:inline-block;border:1px solid rgba(182,243,74,.4);color:var(--lime);border-radius:999px;padding:5px 14px;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;margin-bottom:24px;background:rgba(182,243,74,.05)} /* Load choreography, staggered entrances, all inside ~1.2s */ .li{opacity:0;animation:liIn .7s var(--enter) forwards;animation-delay:var(--ld,0s)} @keyframes liIn{from{opacity:0;transform:translateY(24px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}} /* Dashboard mock (hero product visual) */ .portal-stage{max-width:880px;margin-top:24px}/* HP-009 F1: portal stage token — replaces the inline max-width:880px;margin-top:26px on index.php */ .mock{background:linear-gradient(180deg,#101213,#0B0C0D);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;transform:perspective(1200px) rotateX(calc(4deg + var(--rx,0deg))) rotateY(calc(-6deg + var(--ry,0deg)));opacity:0;animation:mockIn .9s var(--enter) .5s forwards;position:relative;transition:box-shadow .35s var(--award)} @keyframes mockIn{from{opacity:0;transform:perspective(1200px) rotateX(9deg) rotateY(-10deg) translateY(38px)}to{opacity:1;transform:perspective(1200px) rotateX(calc(4deg + var(--rx,0deg))) rotateY(calc(-6deg + var(--ry,0deg))) translateY(0)}} .mock-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line2)} .mock-bar i{width:9px;height:9px;border-radius:50%;background:#2A2C30;display:block} .mock-bar i:first-child{background:rgba(182,243,74,.55)} .mock-bar span{margin-left:8px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--mut);text-transform:uppercase} .mock-body{display:grid;grid-template-columns:104px 1fr;min-height:238px} .mock-side{border-right:1px solid var(--line2);padding:16px 12px;display:flex;flex-direction:column;gap:8px} .mock-side b{display:block;height:8px;border-radius:99px;background:#22242A} .mock-side b.on{background:rgba(182,243,74,.5);width:82%} .mock-side b:nth-child(2){width:90%}.mock-side b:nth-child(3){width:70%}.mock-side b:nth-child(4){width:78%} .mock-main{padding:16px} .mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px} .mock-stat{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:12px} .mock-stat small{display:block;font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.07em;color:var(--mut);text-transform:uppercase} .mock-stat b{font-family:'Inter Tight',sans-serif;font-size:19px;color:var(--ink);letter-spacing:-.01em} .mock-stat b i{font-style:normal;color:var(--lime)} .mock-bars{display:flex;gap:8px;align-items:flex-end;height:86px;padding:12px 4px 0;border-bottom:1px solid var(--line2);margin-bottom:12px} .mock-bars i{flex:1;background:linear-gradient(180deg,var(--lime),#5D8A1E);border-radius:5px 5px 0 0;display:block} .mock::after{content:'';position:absolute;inset:0;background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(182,243,74,.2),transparent 65%);opacity:0;transition:opacity .25s var(--eo);pointer-events:none} .mock:hover{box-shadow:0 44px 80px rgba(0,0,0,.65),0 0 0 1px rgba(182,243,74,.14),inset 0 1px 0 rgba(255,255,255,.06)} .mock:hover::after{opacity:1} .mock-bars i{transform-origin:50% 100%} @media (prefers-reduced-motion:reduce){.mock::after{display:none}} .mock-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:12px} .mock-row .pl{width:26px;height:26px;border-radius:50%;background:var(--lime-dim);border:1px solid rgba(182,243,74,.3);color:var(--lime);display:flex;align-items:center;justify-content:center;flex:none} .mock-row b{display:block;height:8px;width:46%;border-radius:99px;background:#2A2C31} .mock-row s{display:block;height:7px;width:30%;border-radius:99px;background:#1E2025;text-decoration:none;margin-top:5px} .mock-row em{margin-left:auto;font-style:normal;font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--lime);letter-spacing:.05em} /* Next class, the second (last) glass layer */ .nextclass{margin-top:32px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:24px;max-width:700px;box-shadow:0 8px 32px rgba(0,0,0,.36);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .nextclass h2,.nextclass h3{margin:0 0 4px;color:var(--ink);font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.015em} .nextclass .mut{color:#9BA08F} .nextclass .nc-class{font-family:'Inter Tight',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.015em;margin:2px 0} .nextclass .nc-join{margin:16px 0 0} /* Backlog (c): rotating conic light-beam border on the Next Class card only. @property --bg-angle makes the conic angle interpolate (learnwithjason pattern); animation sits paused at rest and runs on hover/keyboard focus. Browsers without @property or :has fall back to the plain card / a static beam, no breakage. */ @property --bg-angle{syntax:"";inherits:false;initial-value:0deg} @keyframes ncBeam{to{--bg-angle:360deg}} .nextclass:has(.countdown){ border:1px solid transparent; background: linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)) padding-box, conic-gradient(from var(--bg-angle,0deg), transparent 0deg, rgba(182,243,74,0) 285deg, rgba(182,243,74,.75) 340deg, transparent 358deg) border-box; animation:liIn .7s var(--enter) forwards,ncBeam 6s linear infinite paused; animation-delay:var(--ld,0s),0s; } .nextclass:has(.countdown):hover,.nextclass:has(.countdown):focus-within{animation-play-state:running} .countdown{font-weight:700;font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--lime);margin-top:8px} /* Run 37: Next Class card LIVE state, dual-state countdown (countdown → "class is live"). When the timer hits zero, app.js swaps the card into a live banner: lime title, pulsing LIVE dot, and the countdown becomes a one-time role=status announcement. Pulse is a scaled opacity blink, still, not motion, and dies under reduced-motion. */ .nextclass.live{border-color:rgba(182,243,74,.5)} .nextclass.live #nc-title{color:var(--lime)} .nextclass.live .countdown::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--lime);margin-right:.55em;animation:livePulse 1.6s var(--enter) infinite} @keyframes livePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.45}} @media (prefers-reduced-motion:reduce){.nextclass.live .countdown::before{animation:none}} /* Marquee (course topics ticker) */ .marquee{overflow:hidden;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:0;width:max-content;animation:mq 30s linear infinite} .marquee-track span{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:0 22px;white-space:nowrap} .marquee-track span b{color:var(--lime);font-weight:500} @keyframes mq{to{transform:translateX(-50%)}} /* Stats */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:40px 0 0} .stat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh);overflow:hidden} .stat .ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--lime-dim);border:1px solid rgba(182,243,74,.16);color:var(--lime);margin-bottom:12px} .stat b{display:block;font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums} .stat small{color:var(--mut);font-size:12.5px;font-weight:500} /* Cards & grids, spotlight hover via --x/--y (JS), border does the talking */ .grid{display:grid;gap:18px} .grid.c2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .grid.c3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} /* Mentor grid (team.php): 18 specialist cards. De-inlined from the markup (Loop C TM-004): the 16px top margin and the deliberate 17px card titles now live here so the markup carries zero inline styles. */ .mentors-grid{margin-top:16px} .mentors-grid .card h3{font-size:17px} .card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh);overflow:hidden;transition:transform .2s var(--eo),border-color .2s var(--eo),background .2s var(--eo)} .card::before,.stat::before,.statcard::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(560px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.05),transparent 65%);opacity:0;transition:opacity .25s var(--eo);pointer-events:none} .card:hover::before,.stat:hover::before,.statcard:hover::before{opacity:1} .card h3{margin:8px 0;font-size:18.5px;letter-spacing:-.015em;font-family:'Inter Tight','Inter',sans-serif;color:var(--ink);font-weight:600} /* Giveaway raffle ticket (2026-10-21): the join form rendered as a perforated ticket, the stub carries the live entry count as a big lime display numeral (reuses the established [data-n] count-up) plus the winners board. The section's signature moment; lime rationed. */ .ticket{display:grid;grid-template-columns:minmax(0,1fr) 250px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;position:relative} .ticket-main{padding:22px} .ticket-stub{position:relative;border-left:2px dashed rgba(255,255,255,.14);background:var(--panel2);padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center} .ticket-stub::before,.ticket-stub::after{content:'';position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--line)} .ticket-stub::before{top:-13px} .ticket-stub::after{bottom:-13px} .ticket-num{font-family:'Inter Tight','Inter',sans-serif;font-weight:600;font-size:58px;line-height:1;letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums} .ticket-cap{font-size:12.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;font-weight:500} .ticket-stub h3{margin:14px 0 4px;font-size:14.5px} .ticket-stub ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px} .ticket-stub .mut{font-size:13px} @media(max-width:760px){ .ticket{grid-template-columns:1fr} .ticket-stub{border-left:0;border-top:2px dashed rgba(255,255,255,.14)} .ticket-stub::before{top:-13px;left:-13px} .ticket-stub::after{top:-13px;bottom:auto;left:auto;right:-13px} } .grid .card:hover{transform:translateY(-3px);border-color:rgba(182,243,74,.28);background:var(--panel2)} /* Render-skip for the long lists (schedule: 29 cards, team: 50 cards). content-visibility:auto lets the browser skip layout+paint for far-offscreen cards; contain-intrinsic-size:auto reserves each card's real height after its first render (the estimate keeps the scrollbar stable on the first pass). Progressive enhancement: engines without support render everything normally. No motion, no reduced-motion interaction; content stays in the DOM (SEO/find-in-page and the reveal + filter JS are unaffected). */ #session-list .card.session{content-visibility:auto;contain-intrinsic-size:auto 180px} #no-results.is-hidden{display:none} #team-grid .card.team-card{content-visibility:auto;contain-intrinsic-size:auto 170px} .badge.up{background:var(--lime);color:#141603;border-color:transparent} .badge.grey{background:rgba(255,255,255,.05);color:var(--mut);border-color:var(--line2)} .badge.risk-high{background:rgba(255,107,107,.12);color:#FF9E9E;border-color:rgba(255,107,107,.35)} .badge.risk-med{background:rgba(255,196,66,.12);color:#FFD47E;border-color:rgba(255,196,66,.35)} .avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(160deg,#232D10,#161F09);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;border:1px solid rgba(182,243,74,.3);font-family:'Inter Tight',sans-serif;flex:none;transition:transform .2s var(--eo)} .card:hover .avatar{transform:scale(1.05)} .avatar.sm{width:32px;height:32px;font-size:13px} .empty{color:var(--mut);border:1px dashed rgba(255,255,255,.16);border-radius:var(--r-in);padding:16px;background:rgba(255,255,255,.015)} /* Sessions */ .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px} .filters select,.filters input{width:auto;min-width:160px} /* Schedule scroll progress line, signature effect for this section: fills in lime as the student scrolls the schedule */ #schedule{view-timeline-name:--sched;view-timeline-axis:block} .sched-progress{position:sticky;top:64px;z-index:20;height:2px;margin:0 0 14px;border-radius:99px;background:linear-gradient(90deg,var(--lime2),var(--lime));box-shadow:0 0 10px rgba(182,243,74,.35);transform-origin:0 50%;transform:scaleX(0);animation:schedFill linear;animation-timeline:--sched;animation-range:entry exit} @keyframes schedFill{to{transform:scaleX(1)}} /* Schedule "Jump to next class": one-shot lime ring on the target card (orientation feedback, not decoration) */ .session.jump-hi{animation:jumpHi 1.2s var(--eo) 1} @keyframes jumpHi{0%,55%{box-shadow:0 0 0 2px var(--lime),0 0 16px rgba(182,243,74,.25)}100%{box-shadow:var(--sh)}} @supports not (animation-timeline:view()){.sched-progress{transform:scaleX(0)}} .tfilter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px} .tfilter{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--body);cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .2s var(--eo),color .2s var(--eo),background .2s var(--eo),transform .15s var(--eo)} .tfilter:hover{border-color:rgba(182,243,74,.5);color:#fff} .tfilter:active{transform:scale(.97)} .tfilter.on{background:var(--lime);border-color:var(--lime);color:#141603;font-weight:600} .session{display:flex;gap:16px;align-items:flex-start;min-width:0} .session>div{min-width:0} .session .date{min-width:84px;text-align:center;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:var(--r-in);padding:10px 4px;color:var(--mut);font-size:13px;line-height:1.4} .session .date strong{display:block;font-size:21px;color:var(--ink);letter-spacing:-.01em} .progressbar{height:8px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden} .progressbar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime2),var(--lime));border-radius:99px;transition:width .9s var(--enter)} /* Enroll rail layout */ .enroll-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start} .rail{position:sticky;top:92px;display:grid;gap:14px} .rail .card{padding:18px} .rail ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px} .rail li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--body)} .rail li svg{flex:none;margin-top:3px;color:var(--lime)} .rail .price{font-family:'Inter Tight',sans-serif;font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.02em} .rail .price small{font-size:13px;color:var(--mut);font-family:'Inter',sans-serif;font-weight:500;letter-spacing:0} /* Support two-column layout: sticky left column (heading + bot), right column (tickets + FAQ) */ .support-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;align-items:start} .support-left{position:sticky;top:92px;display:grid;gap:20px} .support-right{display:grid;gap:22px;align-content:start} .support-right .sup-faq-h{margin:4px 0 0} .mobile-cta{position:fixed;left:12px;right:12px;bottom:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:900;display:none;align-items:center;flex-wrap:wrap;gap:8px 12px;background:rgba(10,11,12,.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 16px;box-shadow:0 16px 40px rgba(0,0,0,.5);transform:translateY(140%);visibility:hidden;transition:transform .22s var(--eo),visibility 0s .22s} .mobile-cta.show{transform:none;visibility:visible;transition:transform .22s var(--eo)} .mobile-cta b{color:var(--ink);font-size:14.5px} .mobile-cta small{display:block;color:var(--mut);font-size:12px} .mcta-text{flex:1 1 auto;min-width:0} .mobile-cta .mcta-close{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:12px;color:#B9BEC6;font-size:22px;line-height:1;cursor:pointer} .mobile-cta .mcta-close:hover{color:#F7F8F8} .mobile-cta .btn{flex:1 1 100%;margin-left:0;min-height:44px;padding:9px 18px} [data-theme="light"] .mobile-cta b{color:#F7F8F8} [data-theme="light"] .mobile-cta small{color:#B9BEC6} /* Forms */ form .row{margin-bottom:14px} label{display:block;font-size:13.5px;margin-bottom:6px;font-weight:600;color:#C3C9D4} input,select,textarea{width:100%;max-width:100%;background:#0B0C0D;border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px 14px;font-size:15px;font-family:'Inter',sans-serif;transition:border-color .18s var(--eo),box-shadow .18s var(--eo)} input::placeholder,textarea::placeholder{color:#62666E} input:focus,select:focus,textarea:focus{outline:2px solid transparent;border-color:rgba(182,243,74,.55);box-shadow:0 0 0 4px rgba(182,243,74,.12)}/* transparent outline: Windows forced-colors mode repaints it as a visible system ring; the shadow ring serves standard mode */ [data-theme="light"] input:focus,[data-theme="light"] select:focus,[data-theme="light"] textarea:focus{border-color:var(--lime);box-shadow:0 0 0 4px rgba(78,122,10,.14)}/* CHROME-011 F2: light-mode focus halo — --lime resolves #4E7A0A (4.46:1); the forced-colors transparent-outline behavior of the base rule is untouched */ .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .flash{position:relative;display:flex;align-items:flex-start;gap:12px;border-radius:var(--r-in);padding:16px 60px 16px 16px;margin:16px 0;font-weight:600;font-size:15px;animation:flash-in .2s var(--eo)}/* CHROME-013: padding 14px 17px→16px, margin 18px 0→16px 0 (token hygiene); 60px right pad clears the 44px dismiss */ .flash.ok{background:rgba(182,243,74,.08);border:1px solid rgba(182,243,74,.32);color:#DFF5BD} .flash.err{background:rgba(220,60,60,.08);border:1px solid rgba(220,60,60,.38);color:#FFC9C9} .flash-ic{flex:0 0 auto;width:18px;height:18px;margin-top:2px}/* CHROME-013 F3: 18px leading status SVG per type */ .flash-msg{flex:1 1 auto;min-width:0} .flash-x{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;color:inherit;opacity:.65;cursor:pointer;border-radius:12px}/* CHROME-013 F4: 44px dismiss target */ .flash-x:hover{opacity:1;background:rgba(255,255,255,.08)} .flash-x:focus-visible{opacity:1;outline:2px solid var(--lime);outline-offset:2px} @keyframes flash-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}/* CHROME-013 F4: 200ms entrance (reveal budget 160–240ms); killed for reduced-motion by the global blanket */ .draft-note{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--mut);margin:10px 0 0;opacity:0;transition:opacity .3s var(--eo)} .draft-note.show{opacity:1} .draft-note.show::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:8px;vertical-align:1px} .submit-row{display:flex;gap:10px} .submit-row input{flex:1;min-width:0} /* Tables */ table{width:100%;border-collapse:collapse;font-size:14.5px} th{font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:500} th,td{border-bottom:1px solid var(--line2);padding:10px 8px;text-align:left;vertical-align:top} tbody tr{transition:background .15s var(--eo)} tbody tr:hover{background:rgba(255,255,255,.025)} /* Support bot */ .botbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh)} .botlog{max-height:280px;overflow:auto;margin-bottom:14px;padding-right:4px} .botlog p{margin:8px 0} .botlog .me{text-align:right} .botlog .me span,.botlog .bot span{display:inline-block;padding:10px 14px;border-radius:16px;max-width:85%;overflow-wrap:anywhere;text-align:left;font-size:15px;line-height:1.55} .botlog .me span{background:linear-gradient(180deg,#CDFB7D,var(--lime));color:#141603;font-weight:600;border-bottom-right-radius:5px} .botlog .bot span{background:rgba(255,255,255,.045);color:var(--ink);border:1px solid var(--line2);border-bottom-left-radius:5px} /* FAQ, chevron + soft content entrance */ details.faq{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 18px;margin-bottom:10px;box-shadow:var(--sh);transition:border-color .2s var(--eo)} details.faq[open]{border-color:rgba(182,243,74,.28)} details.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink);border-radius:var(--r-in2);padding:4px 8px;margin:-4px -8px;transition:background .2s var(--eo)} details.faq summary:hover{background:rgba(255,255,255,.03)} details.faq summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(45deg);flex:none;transition:transform .25s var(--eo);margin-right:3px} details.faq[open] summary::after{transform:rotate(225deg)} details.faq p{color:var(--mut);margin:10px 0 4px;animation:faqIn .3s var(--eo)} @keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* Session recap notes (content hub): admin-written recap on aired class cards. */ details.recap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-in);margin:10px 0 0;transition:border-color .2s var(--eo)} details.recap[open]{border-color:rgba(182,243,74,.25)} details.recap summary{cursor:pointer;font-weight:600;font-size:13.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink);padding:10px 14px;border-radius:var(--r-in);transition:background .2s var(--eo)} details.recap summary:hover{background:rgba(255,255,255,.03)} details.recap summary::-webkit-details-marker{display:none} details.recap summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(45deg);flex:none;transition:transform .25s var(--award)} details.recap[open] summary::after{transform:rotate(225deg)} details.recap summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px} details.recap>div{color:var(--mut);font-size:13.5px;line-height:1.65;padding:2px 14px 12px} /* Footer + WhatsApp */ footer{position:relative;background:#040506;padding:40px 0;color:#84898F;font-size:14.5px} footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(182,243,74,.35),transparent)} footer a{color:#C3C9D4} footer a:hover{color:var(--lime)} footer .logo img{height:32px} /* Floating actions (?v=87): round WhatsApp button + SkillX Assistant launcher. WhatsApp keeps its brand green in BOTH themes (owner standard exception); the assistant button follows the site accent: lime on dark, #629126 on light. */ .float-stack{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:12px;animation:waStackIn .22s var(--eo) .4s backwards}/* CHROME-009 F2: one-time grow entrance, 400ms delay so it never pops on first paint */ @keyframes waStackIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}} .float-btn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;text-decoration:none;transition:transform .15s var(--eo),box-shadow .15s var(--eo)} .float-btn svg{width:28px;height:28px;fill:currentColor;display:block} .float-btn:active{transform:scale(.97)} .wa-btn{background:#25D366;color:#06351A;box-shadow:0 10px 26px rgba(0,0,0,.5)}/* CHROME-009 F1: dark #06351A glyph ink — white-on-#25D366 measured 1.98:1 FAIL; dark ink on #25D366 is 6.91:1 PASS */ .wa-btn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 6px rgba(37,211,102,.22),0 0 26px rgba(37,211,102,.55)} [data-theme="light"] .wa-btn{box-shadow:0 10px 26px rgba(23,68,35,.28)}/* CHROME-009 F7: soften the heavy black shadow on light bg; green kept for brand recognition */ .assistant-btn{background:linear-gradient(180deg,#CDFB7D,var(--lime));color:#141603;box-shadow:0 10px 26px rgba(0,0,0,.5)} .assistant-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 6px rgba(182,243,74,.20),0 0 26px rgba(182,243,74,.45)} [data-theme="light"] .assistant-btn{background:#629126;color:#FFFFFF} [data-theme="light"] .assistant-btn:hover{box-shadow:0 14px 30px rgba(31,46,5,.28),0 0 0 6px rgba(98,145,38,.20),0 0 26px rgba(98,145,38,.45)} .assistant-panel{position:fixed;right:18px;bottom:152px;z-index:61;width:min(362px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 180px));overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:18px;animation:assistIn .22s var(--eo)} @keyframes assistIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .assistant-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px} .assistant-head h3{margin:0;font-size:17px} .assistant-head p{margin:3px 0 0} .assistant-close{background:none;border:0;color:var(--mut);cursor:pointer;padding:6px;border-radius:var(--r-in2);line-height:0} .assistant-close:hover{color:var(--ink)} .assistant-close svg{width:18px;height:18px;fill:currentColor;display:block} .assistant-panel .botlog{max-height:240px} .assistant-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .assistant-ticket{border-top:1px solid var(--line);margin-top:14px;padding-top:14px} @media (prefers-reduced-motion:reduce){.assistant-panel{animation:none}.float-btn{transition:none}.float-stack{animation:none}} /* Footer navigation hub, Awwwards pattern: the footer is a navigation hub + trust anchor, not a dead strip */ .foot-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding:16px 0 32px} .foot-brand p{margin:12px 0 0;line-height:1.65} .foot-col h4{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9AA1AC;margin:0 0 10px;font-weight:600} .foot-col a{display:block;padding:4px 0;text-decoration:none;color:#84898F;transition:color .18s var(--eo),transform .18s var(--eo)} .foot-col a:hover{color:var(--lime);transform:translateX(3px)} .foot-col a:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:4px} .foot-base{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line2);padding:16px 0 4px;font-size:13px;color:#9AA1AC} .foot-base a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color .18s var(--eo),transform .18s var(--eo)} .foot-base a:hover{color:var(--lime);transform:translateY(-2px)} @media (max-width:720px){.foot-grid{grid-template-columns:1fr;gap:20px;padding:10px 0 22px}.foot-col a{display:flex;align-items:center;min-height:44px}.foot-base{flex-direction:column;align-items:flex-start}} /* Reveal-on-scroll, once, 550ms, Awwwards signature easing, staggered by JS-set --d; micro-interactions keep Emil --eo */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .24s var(--award),transform .24s var(--award);transition-delay:var(--d,0s)} .reveal.in{opacity:1;transform:none} /* YouTube facade */ .yt{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--r-in);overflow:hidden;background:#000;cursor:pointer;margin-top:12px;border:1px solid var(--line)} .yt:focus-visible{outline:2px solid var(--lime);outline-offset:2px}/* CHROME-011 F3: explicit ring on the focusable recording facade (role=button, tabindex=0) — intent made first-class instead of relying on the global rule alone */ .yt::after{content:'⛶ Full screen';position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.68);color:#fff;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:99px;pointer-events:none} .yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.94;transition:transform .4s var(--eo),opacity .3s} .yt:hover img{transform:scale(1.03);opacity:1} .yt-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(8,10,8,.72);border:1px solid rgba(182,243,74,.5);color:var(--lime);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);transition:background .2s var(--eo),color .2s var(--eo)} .yt:hover .yt-btn,.yt:focus-visible .yt-btn{background:var(--lime);color:#141603} .yt-tag{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.68);color:#fff;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:99px} .yt-frame{width:100%;max-width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-in);margin-top:12px;background:#000} /* Dashboard */ .dash{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0;max-width:1380px;margin:0 auto;min-height:100vh} .dash-side{background:#050607;border-right:1px solid var(--line2);color:#E8EAE0;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto} .dash-side .logo{display:block;margin-bottom:20px} .dash-side .logo img{height:36px} .dash-student{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:var(--r-in);padding:11px;margin-bottom:16px;min-width:0} .dash-student div{min-width:0;overflow-wrap:anywhere} .dash-nav{display:flex;flex-direction:column;gap:3px} .dash-nav a{color:var(--mut);text-decoration:none;padding:11px 12px;border-radius:10px;font-size:15px;font-weight:500;min-height:44px;display:flex;align-items:center;gap:9px;transition:background .18s var(--eo),color .18s var(--eo)} .dash-nav a:hover{background:rgba(182,243,74,.07);color:var(--lime)} .dash-main{padding:24px clamp(16px,3vw,32px) 64px;min-width:0} .dash-topbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .dash-topbar input{flex:1;min-width:180px;border-radius:999px} .dash-section{padding:28px 0 8px} .statcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:16px 0 20px} .statcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:17px;min-width:0;box-shadow:var(--sh);overflow:hidden} .statcard small{display:block;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600} .statcard b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:4px 0 2px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums} .statcard b.fit{font-size:22px;color:var(--lime)} .statcard span{font-size:13px;color:var(--mut)} /* Gamification lite: achievements badge grid (dashboard) */ .ach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:16px} .ach{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:transform .2s var(--eo),border-color .2s var(--eo)} .ach:hover{transform:translateY(-2px)} .ach.on{border-color:rgba(182,243,74,.35)} .ach-star{font-size:24px;line-height:1;color:var(--mut)} .ach.on .ach-star{color:var(--lime);text-shadow:0 0 12px rgba(182,243,74,.5)} .ach strong{display:block;font-size:15px;color:var(--ink)} .ach small{display:block;font-size:13px;color:var(--mut)} .ach-state{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);white-space:nowrap} .ach.on .ach-state{color:var(--lime)} .dash-cols{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:18px;align-items:start} .dash-rail-col{display:grid;gap:18px} .bars{display:flex;gap:14px;align-items:flex-end;height:170px;padding:14px 6px 0;border-bottom:1px solid var(--line2)} .bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;text-align:center} .bar{width:min(46px,70%);background:linear-gradient(180deg,var(--lime),#5D8A1E);border-radius:8px 8px 0 0;min-height:6px} .donut{display:block;margin:6px auto;width:150px} .module-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2)} .activity{list-style:none;margin:0;padding:0} .activity li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px;min-width:0} .activity li span{min-width:0;overflow-wrap:anywhere} .activity li small{flex:none;color:var(--mut)} .class-row{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px;flex-wrap:wrap;box-shadow:var(--sh)} .class-meta{min-width:74px;color:var(--mut);font-size:13.5px} .att-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px;padding:11px 15px;font-size:14px;background:var(--lime-dim);border:1px solid rgba(182,243,74,.2);border-radius:12px} .dash .countdown{font-size:19px} /* Homepage feature cards, attractive summaries that send visitors to the full detail on its own page (owner direction 2026-10-21: home stays clean) */ .feat{display:flex;flex-direction:column;gap:8px} .feat .ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--lime-dim);border:1px solid rgba(182,243,74,.16);color:var(--lime);flex:none} .feat h3{margin:4px 0 0} .feat p{margin:0;flex:1} .feat .go{color:var(--lime);font-weight:600;font-size:14.5px;text-decoration:none;margin-top:4px} .feat .go::after{content:'';position:absolute;inset:0;border-radius:inherit} .feat .flash{margin:0} /* Homepage "How it works" steps (Run 62): reuses .card.feat + .go; the numeral chip mirrors .feat .ic geometry, solid lime so it reads in both themes without overrides. */ .step-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--lime);color:#0A0C04;font:600 15px 'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;flex:none;margin-bottom:4px} /* HP-010 F1+F3 (Loop C): the three cards are an ordered sequence, so the markup is
    +
  1. — SR users hear the order. The process-rail connector is the section's sequence signature: an aria-hidden 1px hairline at chip-center height (card padding 20px + .step-n 38px/2 = 39px), drawn BEHIND the cards (their solid bg masks it, so it shows only in the 18px grid gaps) plus a chevron glyph at each gap midpoint marking the 1→2→3 flow. Desktop 3-col only: 3 cols need 3×230+2×18=726px of .home .wrap content = a 774px viewport, so below 776px the grid is 2/1-col and the numerals carry the sequence on their own. Static by construction — reduced-motion safe. */ .how-steps{position:relative;list-style:none;margin:0;padding:0} .how-steps::before{content:"";position:absolute;left:0;right:0;top:39px;height:1px;background:var(--line2);pointer-events:none} .how-steps>li{position:relative;z-index:1;overflow:visible} /* .card already sets position:relative; overflow:visible lets the chevron escape into the gap */ .how-steps>li:not(:last-child)::after{content:"›";position:absolute;top:39px;right:-9px;transform:translate(50%,-50%);color:var(--mut);font-size:18px;line-height:1;pointer-events:none} @media(max-width:776px){.how-steps::before,.how-steps>li:not(:last-child)::after{display:none}} /* Homepage "The problem" cards (Loop A Run 191): the frustration marker is deliberately muted (var(--mut)), not lime — lime stays rationed to actions. Theme-safe both modes. */ .prob-x{display:block;font:700 22px/1 'Inter Tight','Inter',sans-serif;color:var(--mut);margin-bottom:8px} /* Sample certificate preview (index #how step 3, Loop A Run 168): a compact, honest preview of the real certificate design; links to certificate.php?sample=1. Lime is rationed to the eyebrow + ribbon (the section's signature element); hover is the standard card lift, 160ms Emil token, transform-only, reduced-motion safe. */ .cert-sample{position:relative;display:block;overflow:hidden;text-decoration:none; background:linear-gradient(160deg,#101214,#0A0B0C 60%,#0D0F0A); border:1px solid rgba(182,243,74,.35);border-radius:12px; padding:22px 18px 16px;text-align:center; transition:transform .16s var(--eo),border-color .16s var(--eo),box-shadow .16s var(--eo)} .cert-sample:hover{border-color:rgba(182,243,74,.6);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 28px rgba(182,243,74,.10)} .cert-sample:focus-visible{outline:2px solid var(--lime);outline-offset:2px} @media (hover:hover) and (pointer:fine){.cert-sample:hover{transform:translateY(-2px)}} @media (prefers-reduced-motion:reduce){.cert-sample{transition:none}} .cs-ribbon{position:absolute;top:13px;right:-30px;transform:rotate(45deg); background:linear-gradient(180deg,#CFFB7E,var(--lime) 58%,#A5E62E);color:#141603; font:700 10px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;padding:7px 32px} .cs-logo{height:26px;width:auto;margin:0 auto 10px;display:block} .cs-eyebrow{display:block;font:500 10px/1.4 'Geist Mono',ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--lime)} .cs-name{display:block;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.02em;color:var(--ink);margin:8px 0 0;padding-bottom:10px;border-bottom:1px solid rgba(182,243,74,.3)} .cs-meta{display:block;margin-top:10px;font:500 10.5px/1.5 'Geist Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} /* Certificate trust card (index hero, Loop A Run 202): swaps the redundant "Featured course progress" card (HP-005 — text said 67.6%, bar said 62%) for a verifiable-certificate trust signal — net-zero element count in the hero. Mini visual mirrors the real certificate.php design language (dark surface, Instrument Serif title, lime VALID pill); no fake QR, no fabricated stats. Lime rationed to the pill + go-link; static card, standard .card hover only, reduced-motion safe; stacks on narrow screens. */ .cert-teaser{display:flex;gap:20px;align-items:center} .ct-mini{flex:0 0 208px;background:linear-gradient(160deg,#101214,#0A0B0C 60%,#0D0F0A); border:1px solid rgba(182,243,74,.35);border-radius:12px; padding:18px 14px 14px;text-align:center} .ct-eyebrow{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic; font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--ink)} .ct-title{display:block;margin-top:6px;font:500 10px/1.5 'Geist Mono',ui-monospace,monospace; letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} .ct-pill{display:inline-block;margin-top:10px;background:linear-gradient(180deg,#CFFB7E,#B6F34A 58%,#A5E62E); color:#141603;font:700 9.5px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.14em; padding:5px 10px;border-radius:999px} .ct-scan{display:block;margin-top:8px;font:500 9px/1.4 'Geist Mono',ui-monospace,monospace; letter-spacing:.22em;color:var(--mut)} .ct-body strong{display:block;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px} .ct-body p{margin:0 0 10px;color:var(--body);font-size:14.5px;line-height:1.6} @media (max-width:640px){.cert-teaser{flex-direction:column;align-items:stretch}.ct-mini{flex:none}} /* Homepage "Meet your mentors" faculty strip (Loop A Run 63): horizontal scroll-snap row of monogram mentor cards. The section wrap carries the scroll-reveal (per-section fade-up, Loop A run 159 rewire); cards inherit the .card hover tokens; the only new motion is native scroll-snap (no JS). Lime rationed: eyebrow + the single link. */ .mentor-strip{display:grid;grid-auto-flow:column;grid-auto-columns:190px;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline-end:16px;padding:4px 0 16px;scrollbar-width:thin;margin-top:16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}.mentors-cta{margin:16px 0 0}/* HP-011: proximity snap (feed not gallery), token padding, right-edge fade affordance + scroll-padding; .mentors-cta de-inlines the cta margin */ .mcard{scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px} .mcard b{font-size:15px;font-weight:600;letter-spacing:-.01em} .mcard .mut{font-size:12.5px;line-height:1.45} .card.tool{padding:16px 18px} .card.tool b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .card.tool .mut{display:block;font-size:13.5px;line-height:1.55} .go-link{color:var(--lime);font-weight:600;font-size:14.5px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}/* CHROME-007 F4: 44px touch target (was ~22px); inline-flex keeps text vertically centered */ .go-link:hover{text-decoration:underline} /* Slim contact band on the homepage */ .contact-band{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between} .contact-actions{display:flex;gap:10px;flex-wrap:wrap} /* Loop A (?v=133): terminal-trio rework — the three closing bands are no longer identical cards. #enrollcta is the page's closing conversion panel (centered; lime hairline top edge + lime-dim wash = the one signature effect for the terminal area; lime stays rationed). #teamband and #contact quiet down to borderless text rows with action links, so the finale reads as the primary moment. Hierarchy-first per the audit roadmap: conversion > secondary rows. Static glow only (no motion; --lime-dim already carries a light-mode override). */ #enrollcta .contact-band{position:relative;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:56px 28px;background:radial-gradient(130% 170% at 50% 0%,var(--lime-dim),transparent 62%),var(--panel);border-radius:calc(var(--r) + 8px)} #enrollcta .contact-band::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--lime),transparent);border-radius:calc(var(--r) + 8px) calc(var(--r) + 8px) 0 0} #enrollcta .contact-band h3{font-size:clamp(26px,4.2vw,38px);letter-spacing:-.02em;margin:0 0 10px!important} #enrollcta .contact-band .mut{max-width:56ch} #enrollcta .contact-actions{justify-content:center} #teamband .contact-band,#contact .contact-band{background:transparent;border:0;box-shadow:none;padding:30px 2px} #teamband .contact-band h3,#contact .contact-band h3{font-size:16.5px} /* Subpage header block (schedule / team / giveaway / support) */ .page-head{padding:44px 0 6px} .page-head h1{font-size:34px;margin:4px 0 8px} .page-sec{padding-top:8px} /* Responsive */ /* Header collapses to a menu button before the links can ever wrap */ @media (max-width:1180px){ .nav-toggle{display:flex} header.site nav.main{position:absolute;top:calc(100% + 8px);right:16px;left:16px;margin-left:0;flex-direction:column;align-items:stretch;gap:2px;background:#101214;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 44px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--eo),transform .18s var(--eo),visibility .18s} header.site nav.main.open{opacity:1;visibility:visible;transform:translateY(0)} header.site nav.main a{padding:11px 14px;border-radius:10px;font-size:14.5px} header.site nav.main a.nav-cta{margin:6px 0 0;text-align:center;padding:11px 14px} header.site nav.main a sup{margin-left:auto} header.site nav.main a{display:flex;align-items:center} /* CHROME-001 F3b (Loop C run 137): per-link stagger on panel open. Links rise + fade with 24ms nth-of-type steps (transform/opacity only, .18s inside the motion budget); delays live on the .open state so closing stays instant and simultaneous. nth-of-type counts only, so the JS-injected .theme-toggle button never shifts the sequence. Reduced-motion: the global blanket kills all transitions (instant). */ header.site nav.main>a{transition:opacity .18s var(--eo),transform .18s var(--eo),color .16s var(--eo),background .16s var(--eo)} header.site nav.main:not(.open)>a{opacity:0;transform:translateY(6px)} header.site nav.main.open>a{opacity:1;transform:none} header.site nav.main.open>a:nth-of-type(1){transition-delay:0ms} header.site nav.main.open>a:nth-of-type(2){transition-delay:24ms} header.site nav.main.open>a:nth-of-type(3){transition-delay:48ms} header.site nav.main.open>a:nth-of-type(4){transition-delay:72ms} header.site nav.main.open>a:nth-of-type(5){transition-delay:96ms} header.site nav.main.open>a:nth-of-type(6){transition-delay:120ms} header.site nav.main.open>a:nth-of-type(7){transition-delay:144ms} header.site nav.main.open>a:nth-of-type(8){transition-delay:168ms} header.site nav.main.open>a:nth-of-type(9){transition-delay:192ms} header.site nav.main.open>a:nth-of-type(10){transition-delay:216ms} header.site nav.main.open>a:nth-of-type(11){transition-delay:240ms} header.site nav.main.open>a:nth-of-type(12){transition-delay:264ms} } @media (max-width:1024px){ .dash-cols{grid-template-columns:minmax(0,1fr)} .dash-rail-col{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .enroll-grid{grid-template-columns:minmax(0,1fr)} .rail{position:static} .support-grid{grid-template-columns:minmax(0,1fr);gap:22px} .support-left{position:static} } @media (max-width:900px){ .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px} .mock{max-width:520px} } @media (max-width:860px){ .dash{grid-template-columns:minmax(0,1fr)} .dash-side{position:static;height:auto;padding:14px} .dash-nav{flex-direction:row;flex-wrap:wrap} .dash-nav a{padding:9px 11px;font-size:14px} .dash-student{margin-bottom:10px} } @media (max-width:640px){ section{padding:40px 0} .hero{padding:40px 0} .logo img{height:32px} .hero-logo{width:min(230px,62vw)} .mobile-cta{display:flex} .float-stack{bottom:144px;bottom:max(144px,calc(env(safe-area-inset-bottom) + 132px))} .assistant-panel{bottom:218px} .filters>*{flex:1 1 100%;min-width:0} table.stack thead{display:none} table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%} table.stack tr{border:1px solid var(--line);border-radius:var(--r-in);margin-bottom:10px;padding:6px 4px;background:var(--panel)} table.stack td{border-bottom:0;padding:6px 10px} .submit-row{flex-direction:column} .submit-row .btn{width:100%} .float-stack{right:12px} .assistant-panel{right:12px} .statcard b{font-size:25px} .bars{height:140px} .dash-topbar input{min-width:0} .stat b{font-size:27px} .mock-body{grid-template-columns:78px 1fr} .mock-stat b{font-size:16px} /* MOB-002: at ≤640px the nav re-homes from the top dropdown into a bottom-anchored sheet. The ≤1180px dropdown rules above still apply; these only re-anchor + re-motion the panel. */ header.site nav.main{position:fixed;top:auto;bottom:8px;left:8px;right:8px;max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain;border-radius:18px;padding:10px 8px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -12px 48px rgba(0,0,0,.55);transform:translateY(16px);transition:opacity .3s var(--award),transform .3s var(--award),visibility .3s} header.site nav.main::before{content:'';align-self:center;width:36px;height:4px;border-radius:99px;background:var(--line2);margin:0 0 8px} header.site nav.main a{min-height:44px} .nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .25s var(--eo),visibility .25s;z-index:940} body.nav-open .nav-scrim{opacity:1;visibility:visible} body.nav-open header.site{z-index:960} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important} html{scroll-behavior:auto} .reveal,.li,.mock{opacity:1;transform:none} .marquee-track{animation:mq 65s linear infinite!important} } /* Modules, strict 2x2, equal heights, footer-pinned teachers */ .grid.modules{grid-template-columns:repeat(2,minmax(0,1fr))} .module-card{display:flex;flex-direction:column;padding:24px} .module-card h3{margin:12px 0 4px;font-size:20px} .module-card .dates{color:var(--mut);font-size:14px;line-height:1.5} .topics{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:8px;flex:1;align-content:start} .topics li{position:relative;padding-left:19px;font-size:15px;color:var(--body);line-height:1.5} .topics li::before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--lime);opacity:.85} .taught{margin-top:auto;border-top:1px solid var(--line2);padding-top:13px;color:var(--mut);font-size:13.5px;line-height:1.55} .taught strong{color:#C9CED8;font-weight:600} @media (max-width:760px){.grid.modules{grid-template-columns:minmax(0,1fr)}} /* v4.1 craft layer, ghost numerals, footer mark, CTA shine, proof line */ section .wrap{position:relative} .secnum{position:absolute;top:-16px;right:8px;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:118px;line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.045);-webkit-text-stroke:1px rgba(255,255,255,.16);pointer-events:none;user-select:none;z-index:0} /* scroll-owned ghost-numeral drift (app.js): compositor hint only when JS drives it */ .js-parallax section .secnum{will-change:transform} section .wrap>*{position:relative;z-index:1} .proof{color:var(--mut);font-size:14px;margin:18px 0 0;line-height:1.55} .proof .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-right:9px;vertical-align:1px;animation:pulseDot 2.4s var(--eio) infinite} @keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(182,243,74,.45)}55%{box-shadow:0 0 0 7px rgba(182,243,74,0)}} .btn{overflow:hidden} /* CTA shine sweep removed 2026-10-21 (audit-report conformance): decorative motion with no informational role (§6.19 "everything moves"). Buttons keep color/transform feedback only. */ footer{overflow:hidden} .foot-mark{margin-top:32px;display:flex;justify-content:center;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 96%);mask-image:linear-gradient(180deg,#000 45%,transparent 96%)} .foot-word{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(72px,15vw,196px);line-height:.94;letter-spacing:-.03em;color:rgba(255,255,255,.05);-webkit-text-stroke:1px rgba(255,255,255,.15);pointer-events:none;user-select:none;white-space:nowrap} @media (max-width:640px){.secnum{font-size:74px;top:-6px}} @media (prefers-reduced-motion:reduce){.proof .dot{animation:none}} /* v4.2, round-2 research refinements */ .yt,.mock{outline:1px solid rgba(255,255,255,.1);outline-offset:-1px} .hero::after{content:'';position:absolute;width:720px;height:480px;right:-140px;top:-160px;background:radial-gradient(closest-side,rgba(182,243,74,.07),transparent);pointer-events:none} /* heroDrift animation removed 2026-10-21 (audit-report conformance): the radial atmosphere is now static, ambient motion behind the headline is decoration, not information (§6.3/§7). */ /* Curriculum editorial index (award pattern) */ @media (min-width:900px){section{padding:88px 0}} .mod-index{border-top:1px solid var(--line);margin-top:6px} .mod-row{border-bottom:1px solid var(--line)} .mod-head{display:flex;gap:22px;align-items:center;width:100%;background:none;border:0;color:inherit;padding:24px 8px;cursor:pointer;text-align:left;font:inherit;border-radius:6px} .mod-num{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:46px;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);min-width:78px;transition:color .24s var(--eo)} .mod-row.open .mod-num,.mod-head:hover .mod-num{color:var(--lime);-webkit-text-stroke:1px rgba(182,243,74,.0)} .mod-main{min-width:0} .mod-title{display:block;font-family:'Inter Tight',sans-serif;font-size:clamp(19px,2.6vw,24px);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.2} .mod-meta{display:block;font-family:'Geist Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:5px} .mod-plus{margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--lime);font-size:21px;font-weight:400;flex:none;transition:transform .24s var(--eo),border-color .24s var(--eo)} .mod-row.open .mod-plus{transform:rotate(45deg);border-color:rgba(182,243,74,.45)} .mod-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--eo)} .mod-row.open .mod-body{grid-template-rows:1fr} .mod-body-in{overflow:hidden;min-height:0;padding:0 8px 0 108px} .mod-body-in .topics{margin:2px 0 14px} .mod-body-in .taught{margin-bottom:24px} @media (min-width:760px){.mod-body-in .topics{grid-template-columns:1fr 1fr;column-gap:34px}} @media (max-width:640px){.mod-num{font-size:32px;min-width:54px}.mod-head{gap:14px;padding:19px 4px}.mod-body-in{padding-left:6px}} /* Audit-report conformance 2026-10-21 (owner decision: follow the report fully, tone the effects down, supersedes the same-day lime-flood hover request): the module row hover is now a SUBTLE surface change per §6.9 ("a subtle surface or border change is often enough") with lime rationed per §6.7. Rounded corners kept; the solid lime fill, dark-text flip and glow shadow are removed. The module number takes the lime active-state color, matching the row's open state. */ .mod-row{margin:0 -12px;padding:0 12px;border-radius:18px;transition:background-color .2s var(--eo),transform .2s var(--eo),border-color .2s var(--eo)} .mod-row .mod-num{transition:color .2s var(--eo)} .mod-row:hover,.mod-row:focus-within{background:var(--lime-dim);border-bottom-color:transparent;transform:translateY(-2px)} .mod-row:hover .mod-num,.mod-row:focus-within .mod-num{color:var(--lime);-webkit-text-stroke:1px transparent} @media (hover:none){.mod-row:hover{background:none;border-bottom-color:var(--line);transform:none}} /* Meet the Team (v4.4) */ .team-card{padding:16px} .team-card .avatar{width:42px;height:42px;font-size:14.5px} /* Team grid (owner redesign 2026-10-21): ONE uniform card for heads, co-heads and members, equal size, equal spacing, generous padding, group headings keep the roster scannable. No entrance animation (team.php is outside the homepage scroll-reveal scope); hover scales with a lime edge glow, hover-only so rest state stays calm. */ .team-group-h{font-family:'Inter Tight','Inter',sans-serif;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:36px 0 0} .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(235px,100%),1fr));gap:24px;margin-top:16px} .tcard{display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;min-height:240px;padding:28px 20px 24px;transition:transform .2s cubic-bezier(.23,1,.32,1),border-color .2s cubic-bezier(.23,1,.32,1),box-shadow .2s cubic-bezier(.23,1,.32,1)} .tcard .avatar{width:64px;height:64px;font-size:20px;margin:0 auto;transition:filter .2s var(--eo)} .tcard h3{font-size:17.5px;margin:14px 0 4px;min-height:48px;display:flex;align-items:flex-start;justify-content:center} .trole{color:var(--lime);font-weight:600} .tcard .trole{font-size:14px;line-height:1.35;min-height:19px} .tcard .twork{color:var(--mut);font-size:13px;margin-top:4px} .tcard:hover{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 18px 44px rgba(182,243,74,.14),0 0 36px rgba(182,243,74,.20);z-index:2}/* CHROME-011 F4: dead :focus-visible halves stripped — .tcard is a non-focusable div, the pseudo-class could never match */ /* TM-007 F8 resolution (2026-10-22): the generic .card spotlight was 5% white over a 560px circle — live cross-check found it perceptually inert on team cards even with --x/--y tracking correctly (app.js L388-397 sets both in px). Scoped override: a tighter (360px) and slightly stronger (.12) cursor-following sheen. Kept white, not lime — the lime edge glow already owns the brand moment here (restraint: one moving light per card, opacity-only transition already on the base rule, hover-gated). */ .team-grid .tcard::before{background:radial-gradient(360px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.12),transparent 65%)} @media (hover:hover) and (pointer:fine){.tcard:hover{transform:scale(1.04) translateY(-4px)}} .tcard:hover .avatar{filter:brightness(1.18)} [data-theme="light"] .tcard:hover{border-color:#629126;box-shadow:0 0 0 1px #629126,0 18px 40px rgba(98,145,38,.20),0 0 30px rgba(98,145,38,.16)} @media (prefers-reduced-motion:no-preference){.tcard{animation:tIn .24s var(--award) backwards;animation-delay:var(--d,0s)}} @keyframes tIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){.tcard:hover{transform:none}} @media (max-width:640px){.team-grid{gap:16px}} .team-card h3{font-size:15.5px;margin:9px 0 2px} .team-card .trole{font-size:13.5px;color:var(--body)} .team-card .tdept{font-size:12.5px} /* (3) Editorial leadership spread — serif-led full-width founder rows */ .monogram{width:74px;height:74px;border-radius:20px;flex:none;background:linear-gradient(160deg,#2A3612,#121806);border:1px solid rgba(182,243,74,.45);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:23px;font-family:'Inter Tight',sans-serif;letter-spacing:-.02em;transition:transform .2s var(--eo)} .ed-leads{margin:32px 0 8px;border-top:1px solid var(--line)} .ed-lead{display:flex;gap:32px;align-items:flex-start;padding:32px 0;border-bottom:1px solid var(--line)} .ed-num{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:52px;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);flex:none;min-width:66px;user-select:none} .ed-mono{width:88px;height:88px;border-radius:24px;font-size:27px} .ed-body{flex:1;min-width:0} .ed-body h3{margin:0 0 8px;font-size:30px;letter-spacing:-.02em;font-weight:700;color:var(--ink)} .ed-role{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:19px;line-height:1.4;color:var(--body);margin:0 0 16px} .ed-facts{list-style:none;margin:0;padding:0} .ed-facts li{display:flex;gap:8px;align-items:baseline;font-size:14.5px;line-height:1.55;color:var(--body);padding:12px 0;border-top:1px solid var(--line2)} .ed-facts li:first-child{border-top:0;padding-top:0} .ed-leadfact::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);align-self:center} @media(max-width:720px){.ed-lead{gap:16px;padding:24px 0}.ed-num{font-size:38px;min-width:48px}.ed-mono{width:64px;height:64px;border-radius:18px;font-size:20px}.ed-body h3{font-size:24px}.ed-role{font-size:17px;margin-bottom:12px}} /* School live banner (schools section: live school as feature card + faculty strip) */ .school-live{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;padding:32px;align-items:start}/* HP-012 F3: 36/34→32/32 token */ .school-live-fac{border-left:1px solid var(--line);padding-left:32px}/* HP-012 F3: 36→32 token */ .school-live-fac .eyebrow,.school-live-fac .mut{margin:0}/* HP-012 F3: de-inlined margin:0 (2 remaining; 2 older ones cleaned by tree evolution) */ .fac-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 12px;align-items:center}/* HP-012 F3: 14→16 token */ .fac-row .monogram{transition:none}/* HP-012 F4: dead transform transition (nothing triggers it; base rule is for .lead-panel) */ .monogram.sm{width:46px;height:46px;border-radius:14px;font-size:14px} .fac-more{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 12px;border-radius:14px;border:1px dashed rgba(182,243,74,.4);color:var(--lime);font-size:13px;font-weight:600;text-decoration:none;transition:background .2s var(--eo),border-color .2s var(--eo)} .fac-more:hover{background:rgba(182,243,74,.08);border-color:var(--lime)} [data-theme="light"] .fac-more{border-color:#629126}/* HP-012 F1: 1.13:1→3.75:1 light-mode dashed border, keeps dashed language */ [data-theme="light"] .fac-more:hover{border-color:#4E7A0A;background:rgba(98,145,38,.08)}/* HP-012 F1b: light-mode hover parity (dark hover tint is invisible on white) */ @media(max-width:900px){.school-live{grid-template-columns:1fr;gap:24px;padding:24px}.school-live-fac{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}}/* HP-012 F3: ≤900px padding 26→24 token */ /* Session feedback, dashboard 1-tap class ratings + Student Stories */ .sr{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .fb{margin:6px 0 10px;border:1px solid var(--line);border-radius:var(--r-in);background:var(--panel)} .fb summary{cursor:pointer;padding:9px 12px;font-size:14px;color:var(--ink);list-style:none;display:flex;gap:8px;align-items:center} .fb summary::-webkit-details-marker{display:none} .fb summary::before{content:'+';color:var(--lime);font-weight:700;font-size:16px;line-height:1} .fb[open] summary::before{content:'–'} .fb-form{padding:2px 12px 14px;display:flex;flex-direction:column;gap:9px} .fb-stars{unicode-bidi:bidi-override;direction:rtl;display:flex;gap:4px;justify-content:flex-end} .fb-stars label{cursor:pointer;font-size:26px;line-height:1;color:#3a3a3a;position:relative} .fb-stars input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .fb-stars label span{transition:color .15s var(--eo),transform .15s var(--eo);display:inline-block} .fb-stars label:hover span,.fb-stars label:hover~label span{color:var(--lime)} .fb-stars label:has(input:checked) span,.fb-stars label:has(input:checked)~label span{color:var(--lime)} .fb-stars label:active span{transform:scale(.9)} .fb-stars label:focus-within{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px} .fb-quote{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--mut)} .fb-quote input{width:16px;height:16px;margin-top:3px;accent-color:var(--lime);flex:none} .quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:22px} .quote-card{margin:0;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--sh);transition:transform .2s var(--eo),border-color .2s var(--eo)} .quote-card:hover{transform:translateY(-2px);border-color:rgba(182,243,74,.4)} .quote-card blockquote{margin:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:17.5px;line-height:1.55;color:#ECEFF3} .q-stars{color:var(--lime);font-size:14px;letter-spacing:2px} .q-stars .q-dim{color:#3a3a3a} .quote-card figcaption{font-size:13.5px;color:var(--body)} /* PWA, Add-to-Home-Screen install card (dashboard, shown only when installable) */ .install{border-color:rgba(182,243,74,.35)} .install .h3{margin-bottom:8px} .install .mut{margin:0 0 14px} .install .row{display:flex;gap:10px;flex-wrap:wrap} /* Courses pages (v57): list card, badges, fact chips, course detail facts grid. Governance: lime rationed to the Featured badge + existing buttons; no glow, no flood hover (the shared .card hover already handles feedback). */ .course-card{padding:28px} .course-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:99px;border:1px solid var(--line);background:var(--panel2);color:var(--body);font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase} .badge.lime{background:var(--lime);border-color:var(--lime);color:#0A0C04;font-weight:600} .course-title{font-size:clamp(26px,3.6vw,34px);margin:0 0 8px} .course-desc{max-width:720px;margin:0} .chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px} .chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;background:var(--lvl3);border:1px solid var(--line2);color:var(--body);font-size:13px} .course-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .course-next{margin:12px 0 0}.course-next strong{color:var(--ink)} .soon-card{margin-top:16px;padding:22px 28px} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .fact{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)} .fact-k{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin-bottom:4px} .fact-v{display:block;color:var(--ink);font-weight:600;font-size:15px;line-height:1.35} .course-card.soon{margin-top:16px} /* v58: published winners lists + course class list. Numbers use the lime accent (progress/results signal only, per governance). */ .winners-list{margin:6px 0 0;padding-left:24px} .winners-list li{padding:4px 0;color:var(--body)} .winners-list li::marker{color:var(--lime);font-weight:700} .class-list{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--sh);overflow:hidden} .class-row{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line2)} .class-row:last-child{border-bottom:0} .class-date{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:var(--mut);min-width:86px;flex:none} .class-main{flex:1;color:var(--body)} .class-main strong{color:var(--ink);font-weight:600} .class-tag{flex:none;font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:3px 10px} @media (max-width:560px){.class-row{flex-wrap:wrap;gap:6px 10px}.class-date{min-width:0}} /* schools catalog */ .school-head{margin:36px 0 14px}.school-head h2{margin:0 0 4px}.school-head .sub{margin:0} /* exam system */ .exam-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin:22px 0 10px;flex-wrap:wrap} .exam-clock{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-in);padding:10px 16px;text-align:right;display:flex;flex-direction:column} .exam-clock strong{font-size:26px;color:var(--lime);font-variant-numeric:tabular-nums;line-height:1.1} .exam-clock small{color:var(--mut)} .exam-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px} .exam-meta .warn{border-color:rgba(255,120,120,.5);color:#ff9c9c} .exam-q textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px;font:inherit;resize:vertical} .exam-q-head{display:flex;justify-content:space-between;align-items:center} .exam-actions{position:sticky;bottom:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-in);padding:12px 16px;margin-top:14px} .exam-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px} .exam-modal[hidden]{display:none} .exam-modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:440px;width:100%;padding:22px} .exam-rules{background:var(--lime-dim);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-top:12px} .exam-rules ul{margin:8px 0 0;padding-left:18px} .exam-rules li{margin:5px 0} .exam-list-card{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .exam-list-action{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .result-stamp{display:inline-block;font-weight:800;letter-spacing:.12em;border:2px solid var(--lime);color:var(--lime);border-radius:var(--r-in2);padding:6px 14px;margin-bottom:10px} .result-stamp.fail{border-color:#ff7b7b;color:#ff7b7b} .result-stamp.done{border-color:var(--mut);color:var(--body)} .result-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-in);padding:16px;margin:12px 0} .result-card small{display:block;color:var(--mut);margin-bottom:2px} .result-card strong{font-size:18px} .result-card .pass{color:var(--lime)} .result-card .failt{color:#ff7b7b} /* ?v=64: student portal organization, grouped sidebar, slim overview, designed right rail, profile photo */ .nav-group{display:block;padding:14px 12px 5px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5c6058} .nav-group:first-child{padding-top:2px} .dash-nav a svg{flex:none} .avatar{overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover;display:block} .dash-section>h2{padding-bottom:10px;border-bottom:1px solid var(--line2);margin-bottom:16px} .statcards.core4{grid-template-columns:repeat(4,1fr)} .statcards.core4 .statcard{min-height:118px;display:flex;flex-direction:column} .statcards.core4 .statcard .progressbar{margin-top:auto} .nextband{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:0 0 18px;box-shadow:var(--sh)} .nextband-main{display:flex;flex-direction:column;gap:2px;min-width:0} .nextband-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)} .nextband-title{font-size:20px;font-weight:700;letter-spacing:-.01em} .nextband .countdown{margin:0;font-size:24px;white-space:nowrap} .card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px} .card-head .h3{margin:0} .card-head .mut{font-size:12.5px;white-space:nowrap} .dash-main-col{display:grid;gap:18px;align-content:start} .dash-main-col .card .module-row:last-child{border-bottom:none;padding-bottom:2px} .dash-rail-col .card{padding:20px} .legend{margin-top:12px;border-top:1px solid var(--line2)} .legend div{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13.5px;color:var(--mut)} .legend div:last-child{border-bottom:none;padding-bottom:0} .legend strong{color:var(--ink);font-variant-numeric:tabular-nums} .donut{width:132px} .activity li:last-child{border-bottom:none} .dp-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line2)} .dp-preview{width:76px;height:76px;border-radius:50%;flex:none;overflow:hidden;background:rgba(182,243,74,.14);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;border:1px solid var(--line)} .dp-preview img{width:100%;height:100%;object-fit:cover;display:block} .dp-actions{display:flex;flex-direction:column;gap:8px;min-width:0} .dp-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .dp-form input[type=file]{max-width:230px;font-size:13px;color:var(--mut)} @media (max-width:900px){.statcards.core4{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.nextband{flex-direction:column;align-items:flex-start;gap:8px}.nextband .countdown{font-size:20px}.dp-row{flex-direction:column}} /* ===== Light theme (whole site) ===== Dark is the default. [data-theme="light"] on (set pre-paint from localStorage by the head script, flipped by the .theme-toggle button) swaps every token plus the hardcoded dark surfaces below. The hero mock stays a dark product graphic in both themes, by design. */ [data-theme="light"]{ --bg:#F2F4EC; --panel:#FFFFFF; --panel2:#F6F8EF; --lvl3:#E8EDDC; --ink:#151809; --body:#2D3325; --mut:#454B3B; --line:rgba(21,24,9,.16); --line2:rgba(21,24,9,.12); --lime:#4E7A0A; --lime2:#406607; --lime-dim:rgba(90,135,18,.13); --track:#C9D2B0; --sh:0 1px 2px rgba(31,42,16,.10),inset 0 1px 0 rgba(255,255,255,.6); color-scheme:light; } [data-theme="light"] header.site{background:rgba(248,250,243,.88)} [data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#FFFFFF} [data-theme="light"] footer{background:#E6EADA;color:#454B3B} [data-theme="light"] .dash-side{background:#FAFBF5;color:var(--ink)} [data-theme="light"] .badge.grey{background:rgba(21,24,9,.05)} [data-theme="light"] .flash.ok{color:#3E6210} [data-theme="light"] .flash.err{color:#8E1F1F} [data-theme="light"] .progressbar{background:rgba(21,24,9,.15)} [data-theme="light"] .quote-card blockquote{color:var(--ink)} [data-theme="light"] ::-webkit-scrollbar-track{background:#E3E7D6} [data-theme="light"] ::-webkit-scrollbar-thumb{background:#66764A} [data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#55663C} [data-theme="light"] ::-webkit-scrollbar-thumb:active{background:#46552F} [data-theme="light"] html{scrollbar-color:#66764A #E3E7D6} /* CHROME-014 F7 (run-178 fresh research, copyprogramming 2026): forced-colors mode yields scrollbars to the platform */ @media (forced-colors:active){ ::-webkit-scrollbar-thumb{background:CanvasText} html{scrollbar-width:auto;scrollbar-color:CanvasText Canvas} } [data-theme="light"] .btn{background:linear-gradient(180deg,#CFFB7E,#B6F34A 58%,#A5E62E);color:#141603} [data-theme="light"] .hero{background:radial-gradient(760px 360px at 82% -80px,rgba(120,160,40,.14),transparent 62%),#EDF1E2} [data-theme="light"] .hero p.lead{color:#3D4335} [data-theme="light"] .dash-nav a{color:#39402F} /* Owner-supplied dark-letter logo takes over everywhere in light mode */ [data-theme="light"] .logo img{content:url('logo-light-sm.webp')} [data-theme="light"] .hero-logo{content:url('logo-light-lg.webp')} @media (max-width:1180px){[data-theme="light"] header.site nav.main{background:#FFFFFF}} /* Theme toggle button (injected by app.js into the header / dashboard topbar) */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;flex:none;padding:0;transition:background .18s var(--eo),transform .15s var(--eo)} .theme-toggle:hover{background:var(--lime-dim)} .theme-toggle:active{transform:scale(.93)} .theme-toggle:focus-visible{outline:2px solid var(--lime);outline-offset:2px} .theme-toggle svg{width:19px;height:19px;display:block} .theme-toggle .ic-moon{display:none} [data-theme="light"] .theme-toggle .ic-sun{display:none} [data-theme="light"] .theme-toggle .ic-moon{display:block} .theme-toggle.floating{position:fixed;right:16px;bottom:20px;z-index:90;box-shadow:0 10px 26px rgba(0,0,0,.35)} @media (max-width:820px){.theme-toggle.floating{bottom:88px}} @media (max-width:640px){.theme-toggle.floating{bottom:144px;bottom:max(144px,calc(env(safe-area-inset-bottom) + 132px))}} /* CHROME-002 F2: at <=1180px the nav becomes a dropdown panel, so the JS re-parents the toggle into the visible bar (header.site .wrap, immediately before .nav-toggle); margin-left:auto pushes it + the hamburger to the right edge. Reduced-motion unaffected (no animation here). */ @media (max-width:1180px){header.site .wrap>.theme-toggle{margin-left:auto}} /* ===== Announcements (public page, admin composer, dashboard band) ===== */ .ann-card{margin:0 0 16px;padding:24px 26px} .ann-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--mut);font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:8px} .ann-title{font-size:24px;line-height:1.25;margin:0 0 8px;letter-spacing:-.015em} .ann-body{font-size:15.5px;line-height:1.65;color:var(--body)} .ann-body p{margin:0 0 10px} .ann-body h3{font-size:18px;margin:16px 0 6px;color:var(--ink)} .ann-body h4{font-size:16px;margin:14px 0 6px;color:var(--ink)} .ann-body ul,.ann-body ol{margin:0 0 10px;padding-left:22px} .ann-body li{margin:3px 0} .ann-body blockquote{margin:0 0 10px;padding:10px 16px;border-left:3px solid var(--lime);background:var(--lime-dim);border-radius:0 10px 10px 0} .ann-img{width:100%;height:auto;border-radius:var(--r-in);border:1px solid var(--line);margin-top:12px;display:block} .ann-empty{text-align:left;padding:26px} .rte-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .rte-bar button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-in2);padding:7px 12px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s var(--eo)} .rte-bar button:hover{background:var(--lime-dim)} .rte{min-height:150px;background:#0B0C0D;border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px 14px;font-size:15px;line-height:1.6} [data-theme="light"] .rte{background:#FFFFFF} .rte:focus{outline:2px solid var(--lime);outline-offset:1px} .rte:empty::before{content:attr(data-ph);color:var(--mut);pointer-events:none} .rte h3{font-size:18px;margin:12px 0 6px} .rte ul,.rte ol{padding-left:22px} .ann-attach{display:flex;gap:18px;flex-wrap:wrap} .ann-attach label{display:flex;gap:7px;align-items:center;font-weight:500} .ann-admin-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line2)} .ann-admin-row .ann-admin-main{flex:1;min-width:200px} .ann-admin-row form{margin:0} .announce-band{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:14px;padding:14px 18px;margin:0 0 14px;text-decoration:none;box-shadow:var(--sh);transition:background .18s var(--eo)} .announce-band:hover{background:var(--panel2)} .announce-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--lime-dim);color:var(--lime);flex:none} .announce-main{flex:1;min-width:0} .announce-main small{display:block;color:var(--mut);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .announce-main strong{display:block;color:var(--ink);font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .announce-date{color:var(--mut);font-size:13px;font-weight:600;flex:none} /* ===== Students Feed ===== */ .feed-composer{margin-bottom:18px} .feed-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .feed-body{font-size:15px;line-height:1.6;color:var(--body);margin:6px 0 4px;overflow-wrap:break-word} .feed-body.sm{font-size:14px} .feed-body .mention{color:var(--lime);font-weight:700} .mention-wrap{position:relative} .mention-pop{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-in);box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:30;overflow:hidden} .mention-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line2);color:var(--ink);padding:11px 14px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif} .mention-item:last-child{border-bottom:0} .mention-item:hover{background:var(--lime-dim)} .feed-attach{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:12px} .feed-attach label{display:flex;gap:7px;align-items:center;font-weight:500;margin:0} .feed-attach.sm{margin-top:8px} .feed-file,.feed-url{margin-top:10px} .feed-post{margin-bottom:16px;scroll-margin-top:90px} .feed-rx{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)} .rx-form{margin:0} .rx{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);color:var(--body);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s var(--eo),color .15s var(--eo),border-color .15s var(--eo)} .rx:hover{border-color:var(--lime);color:var(--ink)} .rx.on{background:var(--lime-dim);border-color:var(--lime);color:var(--lime)} /* Feed social upgrade (2026-10-21): tray, polls, Q&A, saves, levels, leaderboard */ .feed-who .lvl{font-size:11px;font-weight:700;color:var(--lime);border:1px solid rgba(182,243,74,.4);border-radius:999px;padding:1px 8px;vertical-align:2px} .feed-who .bdg{font-size:11px;font-weight:600;color:var(--body);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;vertical-align:2px} .post-tags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-self:flex-start} .tag{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;letter-spacing:.01em} .tag-pin{background:var(--lime);color:#141603} .tag-q{background:rgba(127,178,240,.16);color:#7FB2F0;border:1px solid rgba(127,178,240,.45)} .tag-solved{background:rgba(182,243,74,.14);color:var(--lime);border:1px solid rgba(182,243,74,.45)} .tag-poll{background:rgba(245,196,69,.14);color:#F5C445;border:1px solid rgba(245,196,69,.4)} .tag-sched{background:var(--panel2);color:var(--mut);border:1px dashed var(--line)} .tag-first{background:rgba(243,107,127,.13);color:#F36B7F;border:1px solid rgba(243,107,127,.4)} .feed-post.is-sched{border-style:dashed;opacity:.92} .rx-sum{display:flex;align-items:center;gap:7px;margin-top:10px} .rx-sum[hidden]{display:none} .rx-bubbles{display:inline-flex} .rx-bub{width:20px;height:20px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;margin-left:-5px} .rx-bub:first-child{margin-left:0} .rx-total{font-size:13px;color:var(--mut);font-weight:600} .rx-widget{position:relative;display:inline-block} .rx-tray{position:absolute;bottom:calc(100% + 8px);left:0;display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 8px;box-shadow:0 14px 34px rgba(0,0,0,.5);opacity:0;transform:translateY(6px) scale(.9);transform-origin:bottom left;pointer-events:none;transition:opacity .18s var(--eo),transform .22s cubic-bezier(.2,1.4,.4,1);z-index:40} .rx-tray[hidden]{display:none} .rx-widget.open .rx-tray{opacity:1;transform:none;pointer-events:auto} .rx-emo{position:relative;width:38px;height:38px;border:0;background:transparent;font-size:24px;cursor:pointer;border-radius:50%;line-height:1;padding:0;transition:transform .15s var(--eo)} .rx-widget.open .rx-emo{animation:rxPop .18s cubic-bezier(.2,1.6,.4,1) backwards} .rx-widget.open .rx-emo:nth-child(2){animation-delay:.03s}.rx-widget.open .rx-emo:nth-child(3){animation-delay:.06s}.rx-widget.open .rx-emo:nth-child(4){animation-delay:.09s}.rx-widget.open .rx-emo:nth-child(5){animation-delay:.12s}.rx-widget.open .rx-emo:nth-child(6){animation-delay:.15s} @keyframes rxPop{from{transform:translateY(12px) scale(.3);opacity:0}to{transform:none;opacity:1}} .rx-emo:hover{transform:scale(1.35) translateY(-3px)} .rx-tray:hover .rx-emo:not(:hover){transform:scale(.88)} .rx-lab{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);background:#000;color:#fff;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .12s var(--eo);white-space:nowrap;font-family:'Inter',sans-serif} .rx-emo:hover .rx-lab{opacity:.92} .save-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:color .15s var(--eo),border-color .15s var(--eo)} .save-btn:hover{color:var(--body)} .save-btn.on{color:var(--lime);border-color:var(--lime)} .poll{margin-top:12px;display:grid;gap:8px} .poll-opt{position:relative;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-in);padding:11px 14px;cursor:pointer;overflow:hidden;color:var(--body);font-family:'Inter',sans-serif;font-size:14.5px;display:flex;justify-content:space-between;gap:10px;transition:border-color .15s var(--eo)} .poll-opt:hover{border-color:var(--lime)} .poll-opt.mine{border-color:var(--lime)} .poll-fill{position:absolute;inset:0 auto 0 0;background:rgba(182,243,74,.16);transition:width .45s var(--eo);pointer-events:none} .poll-label{position:relative;font-weight:600} .poll-meta{position:relative;color:var(--mut);font-size:13px;font-weight:600;white-space:nowrap} .poll-total{font-size:12.5px} .feed-comment.solution{border:1px solid rgba(182,243,74,.55);background:rgba(182,243,74,.06);border-radius:var(--r-in);padding:8px 10px} .sol-tag{font-size:11px;font-weight:700;color:var(--lime);border:1px solid rgba(182,243,74,.5);border-radius:999px;padding:1px 8px;vertical-align:1px} .sol-btn{margin-top:6px;background:transparent;border:0;color:var(--lime);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;font-family:'Inter',sans-serif} .sol-btn:hover{text-decoration:underline} .feed-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px} .feed-filters .tfilter{text-decoration:none} .lb-card{padding:16px 18px;margin-bottom:14px} .lb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .lb-rows{display:grid;gap:5px} .lb-row{display:flex;align-items:center;gap:10px;font-size:14px;padding:5px 8px;border-radius:8px} .lb-row.me{background:rgba(182,243,74,.08);font-weight:600} .lb-rank{width:20px;height:20px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--lime);flex:none} .lb-pts{margin-left:auto;color:var(--mut);font-weight:600;font-size:13px} .chk-card{padding:16px 18px;margin-bottom:14px} .chk-x{background:transparent;border:0;color:var(--mut);font-size:18px;cursor:pointer;line-height:1;padding:0 2px} .chk-rows{display:flex;gap:8px;flex-wrap:wrap} .chk{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--mut)} .chk.done{color:var(--lime);border-color:rgba(182,243,74,.45)} .ptype-row{display:flex;gap:8px;margin-bottom:12px} .ptype{position:relative;border:1px solid var(--line);background:var(--panel2);color:var(--body);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:600;cursor:pointer} .ptype input{position:absolute;opacity:0;width:0} .ptype.on{background:var(--lime);color:#141603;border-color:var(--lime)} .poll-fields{display:grid;gap:8px;margin-top:12px} .poll-fields[hidden]{display:none} .poll-fields input{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--body);font-family:'Inter',sans-serif;font-size:14px;width:100%;box-sizing:border-box} .sched-row{display:flex;gap:12px;align-items:center;margin-top:12px;font-size:13.5px;color:var(--body);flex-wrap:wrap} .sched-input{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--body);font-family:'Inter',sans-serif} .emoji-btn{background:var(--panel2);border:1px solid var(--line);border-radius:999px;width:36px;height:36px;font-size:17px;cursor:pointer;line-height:1;flex:none} .emoji-btn.sm{width:30px;height:30px;font-size:14px} .emoji-panel{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px;display:grid;grid-template-columns:repeat(6,34px);gap:2px;box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:40} .emoji-panel[hidden]{display:none} .emoji-one{background:transparent;border:0;font-size:19px;width:34px;height:34px;cursor:pointer;border-radius:var(--r-in2);padding:0} .emoji-one:hover{background:var(--panel2)} .feed-attach{position:relative} @media (prefers-reduced-motion: reduce){.rx-widget.open .rx-emo{animation:none}.rx-tray{transition:none}.poll-fill{transition:none}} .feed-ccount{margin-left:auto;font-size:13px} .feed-comments{margin-top:14px;border-top:1px solid var(--line2);padding-top:12px} .feed-comment{display:flex;gap:9px;margin-bottom:12px} .feed-comment-main{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-in);padding:9px 13px} .feed-cimg{max-width:320px;width:100%;height:auto;border-radius:10px;margin-top:8px;display:block} .feed-cform{margin-top:6px} .feed-cform textarea{font-size:14px} .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--ink);text-decoration:none;flex:none} .bell-n{position:absolute;top:-4px;right:-4px;background:#E5484D;color:#FFFFFF;font-size:10.5px;font-weight:700;line-height:1;border-radius:99px;padding:3px 6px} .notif-row{display:flex;gap:12px;align-items:center;margin-bottom:10px;padding:16px 20px} .notif-row.unread{border-left:3px solid var(--lime)} .notif-main{flex:1;min-width:0;color:var(--body)} /* ===== Nav hover: green pill, white text (owner directive; Enroll CTA exempt) ===== */ /* Dark gradient deepened 2026-10-22 (CHROME-001 F1): #93C61E->#679B0B failed WCAG AA (2.03/3.35:1); #527F0E->#4A760A measures 4.77/5.4:1 with white text */ nav.main a:not(.nav-cta):hover{color:#FFFFFF;background:linear-gradient(180deg,#527F0E,#4A760A)} nav.main a:not(.nav-cta):hover sup{color:#FFFFFF;background:rgba(255,255,255,.22)} [data-theme="light"] nav.main a:not(.nav-cta):hover{color:#FFFFFF;background:linear-gradient(180deg,#7FB00F,#578507)} [data-theme="light"] nav.main a:not(.nav-cta):hover sup{color:#FFFFFF;background:rgba(255,255,255,.22)} /* ===== LIGHT THEME deep fix (audit pass) ===== */ [data-theme="light"] label{color:var(--ink)} [data-theme="light"] nav.main a sup{background:rgba(21,24,9,.07)} [data-theme="light"] .nav-toggle{background:rgba(21,24,9,.04)} [data-theme="light"] footer a{color:#2D3325} [data-theme="light"] .foot-col h4{color:#525A4A} [data-theme="light"] .foot-base{color:#525A4A} [data-theme="light"] .badge.risk-high{background:rgba(200,40,40,.1);color:#A82323;border-color:rgba(200,40,40,.3)} [data-theme="light"] .badge.risk-med{background:rgba(190,130,10,.12);color:#7E5600;border-color:rgba(190,130,10,.3)} [data-theme="light"] .skip-link{color:#FFFFFF} [data-theme="light"] .badge.lime{color:#FFFFFF} [data-theme="light"] .pill{color:#42660A} [data-theme="light"] .tfilter:hover{color:var(--ink)} [data-theme="light"] .tfilter{background:rgba(21,24,9,.03)} [data-theme="light"] .botlog .bot span{background:rgba(21,24,9,.05)} [data-theme="light"] .botlog .me span{color:#141603} [data-theme="light"] .nextclass{background:#FFFFFF;border-color:var(--line);box-shadow:0 10px 30px rgba(21,24,9,.08)} [data-theme="light"] .nextclass .mut{color:var(--mut)} [data-theme="light"] .ticket-stub{border-color:rgba(21,24,9,.3)} [data-theme="light"] .empty{border-color:rgba(21,24,9,.25);background:rgba(21,24,9,.02)} [data-theme="light"] .session .date{background:rgba(21,24,9,.04)} [data-theme="light"] tbody tr:hover{background:rgba(21,24,9,.03)} [data-theme="light"] details.faq summary:hover,[data-theme="light"] details.recap summary:hover{background:rgba(21,24,9,.03)} [data-theme="light"] .flash.ok{background:rgba(120,160,40,.12)} [data-theme="light"] .flash.err{background:rgba(200,40,40,.08)} [data-theme="light"] input::placeholder,[data-theme="light"] textarea::placeholder{color:#79806E} [data-theme="light"] .mention-pop{background:#FFFFFF;box-shadow:0 18px 44px rgba(21,24,9,.18)} [data-theme="light"] .rx.on{color:#4E7A0A} [data-theme="light"] .mod-num{-webkit-text-stroke:1px rgba(21,24,9,.45)} [data-theme="light"] .ed-num{-webkit-text-stroke:1px rgba(21,24,9,.45)} [data-theme="light"] .taught strong{color:var(--ink)} [data-theme="light"] .foot-col a{color:#3A4030} [data-theme="light"] .foot-word{color:rgba(21,24,9,.05);-webkit-text-stroke:1px rgba(21,24,9,.28)} [data-theme="light"] .marquee-track span{color:#39402F} [data-theme="light"] .badge.up{background:#629126;color:#FFFFFF} [data-theme="light"] .avatar,[data-theme="light"] .monogram{background:#629126;color:#FFFFFF;border-color:rgba(46,80,4,.45)} /* Owner directive 2026-10-21 (light mode): every solid green fill uses #629126 with white text, numerals and icons on it. Text-only green accents stay unchanged. */ [data-theme="light"] ::selection{background:var(--lime);color:#FFFFFF}/* CHROME-012 F1: light selection via --lime (#4E7A0A) — #629126/white measured 3.75:1 FAIL, token/white 5.11:1 PASS */ [data-theme="light"] nav.main a.nav-cta,[data-theme="light"] nav.main a.nav-cta:hover{background:#629126;color:#FFFFFF} [data-theme="light"] nav.main a:not(.nav-cta):hover{background:#629126} [data-theme="light"] .btn{background:#629126;color:#FFFFFF} [data-theme="light"] .btn.ghost:hover{border-color:rgba(98,145,38,.45);background:rgba(98,145,38,.06)} [data-theme="light"] .skip-link{background:#629126} [data-theme="light"] .badge.lime{background:#629126;border-color:#629126} [data-theme="light"] .step-n{background:#629126;color:#FFFFFF} [data-theme="light"] .tfilter.on{background:#629126;border-color:#629126;color:#FFFFFF} [data-theme="light"] .ptype.on{background:#629126;border-color:#629126;color:#FFFFFF} [data-theme="light"] .tag-pin{background:#629126;color:#FFFFFF} [data-theme="light"] .yt:hover .yt-btn,[data-theme="light"] .yt:focus-visible .yt-btn{background:#629126;color:#FFFFFF} [data-theme="light"] .topics li::before,[data-theme="light"] .proof .dot,[data-theme="light"] .draft-note.show::before,[data-theme="light"] .cd-lab::before,[data-theme="light"] .nextclass.live .countdown::before{background:#629126} /* Portal mock bar label: white on the dark mock band in both themes (owner 2026-10-21) */ .mock .mock-bar span{color:#FFFFFF} /* ===== Attendance tab ===== */ .att-sum{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:16px} .att-stat{display:flex;flex-direction:column;gap:2px} .att-stat small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600} .att-stat b{font-size:26px;font-family:'Inter Tight',sans-serif} .att-row{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line2)} .att-row:last-child{border-bottom:0} .att-date{min-width:86px;flex:none} .att-title{flex:1;min-width:140px} .att-state{flex:none;text-align:right} @media (max-width:640px){.att-row{flex-wrap:wrap}.att-state{text-align:left}} /* ===== Enrollment OTP widget ===== */ .otp-box{grid-column:1/-1;border:1px dashed var(--line2);border-radius:var(--r-in);padding:14px 16px;margin:4px 0 10px} .otp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px} .otp-row input{max-width:170px} .otp-ok-txt{color:var(--lime);font-weight:600} .otp-err-txt{color:#E5484D;font-weight:600} .otp-chs{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .otp-ch{display:flex;gap:6px;align-items:center;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font-size:13.5px;cursor:pointer} .otp-ch:has(input:checked){border-color:var(--lime);color:var(--ink);font-weight:600} /* Founders hero (owner photo, 2026-10-21): gentle 10% scale on hover, a green light that travels across the silhouette in a loop, and a soft glow hugging the body edges. */ .founders-hero{position:relative;margin:0;width:100%;align-self:end} .founders-hero img{display:block;width:100%;height:auto;transition:transform .3s cubic-bezier(.23,1,.32,1),filter .3s cubic-bezier(.23,1,.32,1)} .founders-hero .fx-edge{position:absolute;inset:0;background:url(founders.webp) center/contain no-repeat;opacity:0;pointer-events:none;filter:brightness(2.1) saturate(1.5) drop-shadow(0 0 10px rgba(182,243,74,.7));-webkit-mask-image:url(founders.webp),linear-gradient(100deg,transparent 43%,#000 50%,transparent 57%);-webkit-mask-size:contain,300% 100%;-webkit-mask-position:center,130% 0;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-image:url(founders.webp),linear-gradient(100deg,transparent 43%,#000 50%,transparent 57%);mask-size:contain,300% 100%;mask-position:center,130% 0;mask-repeat:no-repeat;mask-composite:intersect} @media (hover:hover) and (pointer:fine){ .founders-hero:hover img{transform:scale(1.10);filter:drop-shadow(0 0 14px rgba(182,243,74,.35)) drop-shadow(0 0 44px rgba(182,243,74,.16))} .founders-hero:hover .fx-edge{opacity:1;animation:fxTravel 2.4s linear infinite,fxPulse 2.4s ease-in-out infinite} } /* JS-driven twin (app.js toggles .fx-on on mouse enter/leave) so the zoom also works where the (hover:hover) media query does not match. */ .founders-hero.fx-on img{transform:scale(1.10);filter:drop-shadow(0 0 14px rgba(182,243,74,.35)) drop-shadow(0 0 44px rgba(182,243,74,.16))} .founders-hero.fx-on .fx-edge{opacity:1;animation:fxTravel 2.4s linear infinite,fxPulse 2.4s ease-in-out infinite} @keyframes fxTravel{from{mask-position:center,130% 0;-webkit-mask-position:center,130% 0}to{mask-position:center,-130% 0;-webkit-mask-position:center,-130% 0}} @keyframes fxPulse{0%,100%{filter:brightness(2.1) saturate(1.5) drop-shadow(0 0 8px rgba(182,243,74,.55))}50%{filter:brightness(2.35) saturate(1.6) drop-shadow(0 0 14px rgba(182,243,74,.85))}} @media (prefers-reduced-motion:reduce){.founders-hero img{transition:none}.founders-hero:hover img,.founders-hero.fx-on img{transform:none}.founders-hero:hover .fx-edge,.founders-hero.fx-on .fx-edge{animation:none;opacity:0}} /* Hero symmetry + widow control (owner, 2026-10-21): the founders photo takes a wider share and bleeds slightly (the hero clips overflow) so it balances the text column; lead and proof copy wrap balanced so no single word drops to its own line. */ @media (min-width:1025px){.founders-hero{transform:translateY(-32px)}/* owner 2026-10-21: nudge up for balance vs the text block */} .lead{text-wrap:balance} .proof{text-wrap:balance} /* ABOUT-001 (Loop A run 173): #about mission pull — the section's one signature element; hairline lime accent, no fill/glow (restraint). */ .mission-pull{border-left:2px solid var(--lime);padding:2px 0 2px 16px;margin:24px 0;font-size:20px;line-height:1.55;color:var(--ink);max-width:760px;text-wrap:balance} @media (max-width:1024px){.founders-hero{width:100%;margin:0 auto;max-width:560px}} /* Premium countdown (owner, 2026-10-21): glass tiles, tabular numerals, pulsing dot on the label, digit-change rise (transform/opacity only). */ .countdown{display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:normal} .cd-lab{display:inline-flex;align-items:center;gap:7px;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-right:3px} .cd-lab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);animation:cdPulse 2s ease-in-out infinite} @keyframes cdPulse{0%,100%{opacity:1}50%{opacity:.3}} .cd-u{position:relative;display:flex;flex-direction:column;align-items:center;min-width:60px;padding:8px 12px 8px;border-radius:var(--r-in);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.28)} .cd-u b{font-family:'Inter Tight',sans-serif;font-size:23px;font-weight:700;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .cd-u b.tick{animation:cdTick 160ms ease-out} @keyframes cdTick{from{transform:translateY(4px);opacity:.4}to{transform:translateY(0);opacity:1}} .cd-u small{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:3px} .countdown .cd-u[data-u="s"] b{color:var(--lime)} .countdown.nodays .cd-u[data-u="d"]{display:none} [data-theme="light"] .cd-u{background:linear-gradient(180deg,#FFFFFF,#F1F5E6);border-color:rgba(24,34,8,.13);box-shadow:inset 0 1px 0 #FFFFFF,0 8px 18px rgba(31,46,5,.10)} [data-theme="light"] .countdown .cd-u[data-u="s"] b{color:#4C7A06} @media (prefers-reduced-motion:reduce){.cd-lab::before{animation:none}.cd-u b.tick{animation:none}} .cd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ===== Admin panel (?v=84): page-per-section shell, command center, tools ===== Same design language as the student portal shell (.dash): grouped sidebar, hairline borders, lime rationed to primary actions, active states, progress. */ .adm{display:grid;grid-template-columns:264px minmax(0,1fr);gap:0;max-width:1440px;margin:0 auto;min-height:100vh} .adm-side{background:#050607;border-right:1px solid var(--line2);color:#E8EAE0;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column} .adm-side .logo{display:block;margin-bottom:18px} .adm-side .logo img{height:36px;width:auto} .adm-user{display:flex;gap:11px;align-items:center;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);margin-bottom:12px;min-width:0} .adm-user .avatar{width:40px;height:40px;flex:none} .adm-user-meta{min-width:0;overflow:hidden} .adm-user-meta strong{color:var(--ink);font-size:14.5px;white-space:nowrap} .adm-pal-btn{display:flex;align-items:center;gap:9px;width:100%;background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:11px;padding:10px 12px;font:500 13.5px 'Inter',sans-serif;cursor:pointer;margin-bottom:8px;transition:border-color .15s var(--eo),color .15s var(--eo),background .15s var(--eo)} .adm-pal-btn:hover{border-color:rgba(182,243,74,.45);color:var(--ink);background:var(--panel2)} .adm-pal-btn span:nth-child(2){flex:1;text-align:left} .kbd{display:inline-block;font:600 10.5px 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--mut);background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 6px;white-space:nowrap} .adm-nav{display:flex;flex-direction:column} .adm-nav a{display:flex;align-items:center;gap:10px;padding:8.5px 12px;border-radius:10px;color:var(--body);text-decoration:none;font-size:14.5px;font-weight:500;transition:background .15s var(--eo),color .15s var(--eo)} .adm-nav a svg{flex:none;opacity:.85} .adm-nav a:hover{background:rgba(255,255,255,.05);color:var(--ink)} .adm-nav a.on{background:var(--lime-dim);color:var(--lime)} .adm-nav a.on svg{opacity:1} .adm-nav a span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .adm-badge{margin-left:auto;background:var(--lime);color:#141603;font:700 11px 'Inter',sans-serif;border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums} .adm-side-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:2px} .adm-side-foot a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;color:var(--mut);text-decoration:none;font-size:14px;transition:background .15s var(--eo),color .15s var(--eo)} .adm-side-foot a:hover{background:rgba(255,255,255,.05);color:var(--ink)} .adm-main{padding:24px clamp(16px,3vw,34px) 70px;min-width:0} .adm-topbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .adm-search{display:flex;align-items:center;gap:9px;flex:1 1 340px;min-width:min(300px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-in);padding:5px 5px 5px 13px;transition:border-color .15s var(--eo)} .adm-search:focus-within{border-color:rgba(182,243,74,.5)} .adm-search svg{color:var(--mut);flex:none} .adm-search input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:500 14.5px 'Inter',sans-serif;padding:8px 0;outline:none} .adm-search input::placeholder{color:var(--mut)} .adm-head{margin:6px 0 18px} .adm-title{font-size:clamp(27px,3.4vw,34px);margin:0} .adm-sub{font-size:15px;margin:2px 0 0} .adm-dateline{margin:-8px 0 16px;font-size:13.5px} .adm-subhead{font:600 19px 'Inter Tight','Inter',sans-serif;letter-spacing:-.015em;color:var(--ink);margin:26px 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line2)} .adm-stats{margin:0 0 18px} a.statcard{text-decoration:none;color:inherit;transition:transform .18s var(--eo),border-color .18s var(--eo)} a.statcard:hover{transform:translateY(-2px);border-color:rgba(182,243,74,.4)} a.statcard span{color:var(--lime);font-size:12.5px;font-weight:600} .adm-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start} .adm-col{display:grid;gap:18px;align-content:start;min-width:0} .attn-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)} .attn-row:last-child{border-bottom:0;padding-bottom:2px} .attn-row>span:first-child{flex:1;font-size:14.5px} .timeline{list-style:none;margin:0;padding:0} .timeline li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px} .timeline li:last-child{border-bottom:0;padding-bottom:2px} .tl-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);flex:none;margin-top:7px;box-shadow:0 0 0 4px var(--lime-dim)} .timeline strong{color:var(--ink);font-weight:600} .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .qa{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px solid var(--line2);border-radius:13px;background:var(--panel2);color:var(--body);text-decoration:none;transition:transform .18s var(--eo),border-color .18s var(--eo),box-shadow .18s var(--eo)} .qa svg{color:var(--lime);flex:none;margin-top:2px} .qa strong{display:block;color:var(--ink);font-size:14.5px;line-height:1.3} .qa small{color:var(--mut);font-size:12.5px;line-height:1.35;display:block;margin-top:2px} .qa:hover{transform:translateY(-2px);border-color:rgba(182,243,74,.55);box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 1px rgba(182,243,74,.25)} .adm-tools{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-bottom:18px} .adm-tools label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;flex:1 1 230px} .adm-tools input,.adm-tools select{width:100%} .adm-tools-sp{flex:1} .tblwrap{max-height:72vh;overflow:auto} .tblwrap thead th,.tblwrap table tr:first-child th{position:sticky;top:0;background:var(--panel2);z-index:2} .adm tbody tr{transition:background .13s var(--eo)} .adm tbody tr:hover{background:rgba(255,255,255,.025)} .mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:12.5px;letter-spacing:.01em} .badge.st-lime{background:var(--lime);border-color:var(--lime);color:#0A0C04;font-weight:600} .badge.st-amber{background:rgba(255,196,66,.13);border-color:rgba(255,196,66,.4);color:#FFD47E} .badge.st-blue{background:rgba(127,178,240,.13);border-color:rgba(127,178,240,.4);color:#A9CCF5} .badge.st-red{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.35);color:#FF9E9E} .badge.st-grey{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--mut)} .adm-bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 13px;border:1px solid rgba(182,243,74,.3);border-radius:var(--r-in);background:var(--lime-dim);margin-bottom:14px} .att-pick{display:inline-flex;gap:7px;align-items:center;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer} .att-pick input{width:17px;height:17px;accent-color:var(--lime2);cursor:pointer} .drawer-back{position:fixed;inset:0;background:rgba(2,3,2,.55);opacity:0;transition:opacity .2s var(--eo);z-index:190} .drawer-back.open{opacity:1} .drawer{position:fixed;top:0;right:0;height:100dvh;width:min(410px,94vw);background:var(--panel);border-left:1px solid var(--line);z-index:200;padding:22px;overflow:auto;transform:translateX(106%);transition:transform .26s var(--award);box-shadow:-24px 0 60px rgba(0,0,0,.45)} .drawer.open{transform:none} .drawer-head{display:flex;gap:12px;align-items:center;margin-bottom:16px} .drawer-head .avatar{width:46px;height:46px;font-size:16px;flex:none} .drawer-title{flex:1;min-width:0} .drawer-title .h3{margin:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dr-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px} .pal-back{position:fixed;inset:0;background:rgba(2,3,2,.6);backdrop-filter:blur(3px);z-index:210;padding:12vh 16px 16px} .pal{max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden} .pal>input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line2);color:var(--ink);font:500 16px 'Inter',sans-serif;padding:16px 18px;outline:none} .pal-list{max-height:46vh;overflow:auto;padding:6px} .pal-item{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:0;border-radius:10px;padding:11px 12px;cursor:pointer;color:var(--body);font:500 14.5px 'Inter',sans-serif} .pal-item strong{color:var(--ink);font-weight:600} .pal-item small{color:var(--mut);font-size:12px;white-space:nowrap} .pal-item.sel,.pal-item:hover{background:var(--lime-dim)} .pal-foot{display:flex;gap:18px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line2);color:var(--mut);font-size:12px} .pal.help{padding:20px 22px} .avatar.lg{width:46px;height:46px} @media (max-width:1080px){.adm-cols{grid-template-columns:1fr}} @media (max-width:980px){ .adm{grid-template-columns:1fr} .adm-side{position:static;height:auto;padding:16px 14px} .adm-side .logo{margin-bottom:12px} .adm-user{margin-bottom:10px} .adm-nav{flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:2px} .adm-nav .nav-group{display:none} .adm-nav a{white-space:nowrap;padding:8px 11px} .adm-nav a span:nth-child(2){overflow:visible} .adm-side-foot{flex-direction:row;flex-wrap:wrap;margin-top:10px;padding-top:12px} .adm-main{padding:18px 14px 60px} .qgrid{grid-template-columns:1fr} .adm-jump{display:none} } [data-theme="light"] .adm-side{background:#FAFBF5;color:var(--ink)} [data-theme="light"] .adm-nav a{color:#39402F} [data-theme="light"] .adm-nav a.on{color:#3E6210} [data-theme="light"] .adm-side-foot a{color:#454B3B} [data-theme="light"] .badge.st-amber{color:#8A5A00} [data-theme="light"] .badge.st-blue{color:#1D4ED8} [data-theme="light"] .badge.st-red{color:#B3261E} [data-theme="light"] .adm tbody tr:hover{background:rgba(21,24,9,.04)} [data-theme="light"] .qa:hover{box-shadow:0 10px 26px rgba(31,46,5,.14),0 0 0 1px rgba(98,145,38,.35);border-color:rgba(98,145,38,.55)} [data-theme="light"] a.statcard:hover{border-color:rgba(98,145,38,.5)} @media (prefers-reduced-motion:reduce){ .drawer,.drawer-back,.qa,a.statcard,.adm-pal-btn,.adm-nav a{transition:none} .qa:hover,a.statcard:hover{transform:none} } /* ===== Feed media sizing (?v=87): Facebook-feed proportions ===== Post photos fill the post column but are height-capped and cover-cropped (no more full-height photo walls); the full photo opens on click via the wrapping link. Comment photos keep their smaller cap. YouTube facades in the feed keep the shared 16/9 box under the same height cap. */ .feed-media-link{display:block;border-radius:12px} .feed-media-link:focus-visible{outline:2px solid var(--lime);outline-offset:2px} img.feed-media-img{max-height:520px;object-fit:cover;cursor:zoom-in} img.feed-cimg.feed-media-img{max-height:340px} .yt.feed-media-vid{max-height:520px} /* === STUDENT PORTAL VIEWS (v85) === */ /* Page-per-section dashboard: the sidebar marks the view you are on, and the topbar bell marks the notifications view. Dark mode uses the same filled lime .on language as .tfilter.on / .ptype.on; light mode uses the owner's #629126 green with white text. No new motion is introduced, so prefers-reduced-motion behaviour is unchanged. */ .dash-nav a.on{background:var(--lime);color:#141603;font-weight:600} .dash-nav a.on:hover{background:var(--lime);color:#141603} [data-theme="light"] .dash-nav a.on{background:#629126;color:#FFFFFF} [data-theme="light"] .dash-nav a.on:hover{background:#629126;color:#FFFFFF} .bell.on{border-color:var(--lime);color:var(--lime)} [data-theme="light"] .bell.on{border-color:#629126;color:#629126} /* === END STUDENT PORTAL VIEWS (v85) === */ /* === COURSE FIT-CHECK BLOCK (Run 183): self-selection block on course-ai-pro.php. Lime checks only on the positive column (a key signal); the "not for you" column uses muted dashes — restraint: no lime decoration on the negative card. No new motion; cards inherit the shared hover/spotlight tokens. */ .fit{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px} .fit li{position:relative;padding-left:27px;font-size:15px;color:var(--body);line-height:1.55} .fit li::before{content:'';position:absolute;left:4px;top:.38em;width:10px;height:6px;border-left:2.5px solid var(--lime);border-bottom:2.5px solid var(--lime);transform:rotate(-45deg);border-radius:1px} .fit.no li::before{left:3px;top:.78em;width:12px;height:2px;border:none;background:var(--mut);border-radius:1px;transform:none}