/* ============================================================ AQcredix — Accreditation & Quality Excellence Design system ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ --bg:#F5F6FB; --bg-elevated:#FFFFFF; --bg-deep:#0D1130; --bg-deep-2:#161B45; --fg:#10122A; --fg-muted:#4B4F6E; --fg-faint:#6B6E8F; /* darkened from #8A8DAA: the old value was 3.25:1 on white, below WCAG AA */ --border:#E3E5F1; --border-soft:#ECEDF6; --brand:#332E96; --brand-2:#4F46E5; --brand-tint:#EEEDFC; --accent:#4F46E5; --accent-bright:#0EA5A0; --accent-bright-tint:#E1F6F4; --ok:#12805C; --ok-tint:#E2F6EC; --warn:#B0590A; --warn-tint:#FCEFDD; --nc:#C42E42; --nc-tint:#FBE7EA; --info:#3554D1; --info-tint:#E9EDFC; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --shadow-1:0 1px 2px rgba(16,18,42,.05), 0 10px 28px -12px rgba(16,18,42,.14); --shadow-2:0 4px 10px rgba(16,18,42,.06), 0 24px 48px -16px rgba(16,18,42,.22); --font-display:'Fraunces', ui-serif, Georgia, serif; --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Deep decorative surfaces. These were hardcoded indigo (#232a6b / #090b21) in the hero, CTA band, video embeds and tile borders, which meant every component using them needed its own :root[data-palette="neon"] override — and anything that got missed stayed indigo while the rest of the page went neon. As tokens they re-tint with the palette automatically, so a new component is neon-correct by default. */ --deep-1:#232a6b; /* the lit corner of a deep gradient */ --deep-2:#090b21; /* its far, darkest corner */ --border-strong:#CBD0F0; /* hover borders on tiles and live cards */ --on-deep:#ffffff; /* text on any of the above */ --wrap:1180px; } /* ---------- Dark theme (owner-only, toggled via secret shortcut) ---------- */ /* ============================================================ NEON BLUE / TRUE BLACK PALETTE Independent of the light/dark toggle — set via data-palette="neon" on . Backgrounds are pure/near black so the neon accents read as genuinely luminous. Declared after the light and dark palettes so it wins. Toggle by typing "neon", or with ?neon=1 / ?neon=0 in the URL. CONTRAST: every foreground below was checked against its background for WCAG AA (4.5:1 body text, 3:1 large text and UI borders). ============================================================ */ :root[data-palette="neon"]{ --bg:#000000; /* true black */ --bg-elevated:#04100E; /* cards lift just enough to separate, tinted teal not blue */ --bg-deep:#000000; --bg-deep-2:#02090A; --fg:#E6FFFA; /* 18.2:1 on black */ --fg-muted:#9FD8CE; /* 10.4:1 on black */ --fg-faint:#6FA79E; /* 5.9:1 on black — still comfortably readable */ --border:#10403A; --border-soft:#0A2A26; /* The whole family is the brain's teal (#5EEAD4) and its neighbours. Previously these were sky blue (#38BDF8), which is why the header, buttons and chips stayed blue while the hero canvas — which picks its own colours — glowed teal. One family everywhere means no blue survives anywhere once neon is on. */ --brand:#2DD4BF; --brand-2:#5EEAD4; /* 13.9:1 on black */ --brand-tint:rgba(94,234,212,.14); --accent:#2DD4BF; --accent-bright:#5EEAD4; /* 13.9:1 on black */ --accent-bright-tint:rgba(94,234,212,.14); --ok:#34D399; --ok-tint:rgba(52,211,153,.14); --warn:#FBBF24; --warn-tint:rgba(251,191,36,.14); --nc:#FF6B8A; /* lifted from the light-mode red so it passes on black */ --nc-tint:rgba(255,107,138,.15); --info:#5EEAD4; /* was blue; folded into the teal family */ --info-tint:rgba(94,234,212,.15); --shadow-1:0 1px 2px rgba(0,0,0,.8), 0 10px 30px -12px rgba(45,212,191,.28); --shadow-2:0 4px 12px rgba(0,0,0,.75), 0 26px 56px -18px rgba(45,212,191,.40); --hero-tint:#5EEAD4; /* Deep decorative surfaces, re-tinted from navy to a teal-lit black. */ --deep-1:#06322C; --deep-2:#000000; --border-strong:#2DD4BF; --on-deep:#E6FFFA; } /* Surfaces hand-tinted for the indigo palette, re-tinted for neon blue. */ :root[data-palette="neon"] body{background:#000;} :root[data-palette="neon"] .page-head{background:linear-gradient(180deg,rgba(94,234,212,.10),#000 88%);} :root[data-palette="neon"] .site-header{background:rgba(0,0,0,.9);border-bottom-color:var(--border);} /* ---- Home hero: the original cyan-on-deep-navy tone -------------------------- The rest of the site moved to the teal family so nothing stayed accidentally blue. The hero is the deliberate exception: its cyan against a deep navy-black is the look that was asked to stay, and it sits behind the particle canvas, whose own particles are drawn cyan in face.js — matching the surround to them keeps the artwork and its background one picture rather than two colours meeting at the canvas edge. Scoped with variable overrides on .hero rather than by restyling each child, so the eyebrow, the italic emphasis, the stat numbers and the primary button all follow from one place. Because these are plain CSS variables on a container, every breakpoint inherits them — the phone layout needs no separate rule and cannot drift out of step. */ :root[data-palette="neon"] .hero{ --brand:#22D3EE; --brand-2:#38BDF8; --brand-tint:rgba(56,189,248,.14); --accent:#22D3EE; --accent-bright:#22D3EE; --accent-bright-tint:rgba(34,211,238,.14); --hero-tint:#22D3EE; background:radial-gradient(120% 140% at 78% -10%, #06283D 0%, #010A12 55%, #000 100%); } :root[data-palette="neon"] .hero::after{background:radial-gradient(60% 50% at 90% 100%, rgba(34,211,238,.16), transparent 70%);} /* The buttons sit inside .hero, so they pick up the overrides above automatically; these only restate the glow, which is a shadow rather than a token. */ :root[data-palette="neon"] .hero .btn-primary{box-shadow:0 0 22px -4px rgba(56,189,248,.7);} :root[data-palette="neon"] .hero .btn-accent{box-shadow:0 0 24px -4px rgba(34,211,238,.75);} :root[data-palette="neon"] .acc-band{background:var(--bg-elevated);border-color:var(--border-soft);} :root[data-palette="neon"] .acc{background:var(--bg-elevated);} :root[data-palette="neon"] .acc.live{background:linear-gradient(160deg,rgba(94,234,212,.14),var(--bg-elevated));border-color:var(--border);} :root[data-palette="neon"] .lens-strip{background:#020A09;} :root[data-palette="neon"] .humor{background:#000;} :root[data-palette="neon"] .cta-band{background:linear-gradient(120deg,#01100E,#06322C 120%);} :root[data-palette="neon"] .dl{background:var(--bg-elevated);} :root[data-palette="neon"] .video-embed{background:linear-gradient(140deg,#01100E,#06322C);} :root[data-palette="neon"] ::selection{background:var(--accent-bright);color:#001512;} :root[data-palette="neon"] .code-chip{background:#06322C;color:#E6FFFA;} :root[data-palette="neon"] .tile, :root[data-palette="neon"] .kpi-card, :root[data-palette="neon"] .quiz{background:var(--bg-elevated);border-color:var(--border);} /* Dark-on-light chips need a light foreground once the surface goes black. */ :root[data-palette="neon"] .pill{background:var(--brand-tint);color:var(--brand-2);} :root[data-palette="neon"] .opt{background:var(--bg-elevated);color:var(--fg);border-color:var(--border);} :root[data-palette="neon"] .opt:hover{background:var(--brand-tint);color:var(--brand-2);border-color:var(--brand-2);} :root[data-palette="neon"] .btn-ghost{color:var(--fg);border-color:var(--border);} :root[data-palette="neon"] .btn-ghost:hover{color:var(--accent-bright);border-color:var(--accent-bright);} /* Accent buttons carry dark text on a bright fill — keep that legible. */ /* ---- Neon surface treatment ------------------------------------------------- Every panel on the site gets the same finish as the Quality Dashboard card: a near-black surface a shade above the page, a teal-tinted hairline border, and a soft teal bloom instead of a grey drop shadow. Grey shadows read as dirt on a true black background — the glow is what makes the surface look lit rather than muddy. Applied by shared selector rather than per component so a panel added later inherits it automatically; that per-component drift is exactly what left parts of the site blue while the rest went teal. Borders stay hairline and the bloom stays low — restraint is what keeps this looking like an accreditation tool and not a game UI. */ :root[data-palette="neon"] .card, :root[data-palette="neon"] .panel, :root[data-palette="neon"] .tile, :root[data-palette="neon"] .dept-tile, :root[data-palette="neon"] .kpi-card, :root[data-palette="neon"] .stat-card, :root[data-palette="neon"] .quiz, :root[data-palette="neon"] .acc, :root[data-palette="neon"] .pf-stat, :root[data-palette="neon"] .pf-sub, :root[data-palette="neon"] .pf-coverage, :root[data-palette="neon"] .pf-chip, :root[data-palette="neon"] .pf-next a, :root[data-palette="neon"] .video-embed, :root[data-palette="neon"] .qg-metric-card, :root[data-palette="neon"] .sv-opt, :root[data-palette="neon"] .hg-shell{ background:var(--bg-elevated); border:1px solid var(--border); box-shadow:0 0 0 1px rgba(45,212,191,.05), 0 18px 44px -24px rgba(45,212,191,.35); } /* Lift on hover comes from the border and the bloom, not from a colour change: the surface itself stays put so a grid of cards does not flicker as the pointer crosses it. */ :root[data-palette="neon"] .card:hover, :root[data-palette="neon"] .tile:hover, :root[data-palette="neon"] .dept-tile:hover, :root[data-palette="neon"] .pf-stat:hover, :root[data-palette="neon"] .pf-next a:hover, :root[data-palette="neon"] .sv-opt:hover{ border-color:var(--brand-2); box-shadow:0 0 0 1px rgba(45,212,191,.18), 0 22px 54px -22px rgba(45,212,191,.55); } /* Bars, rails and wells: the recessed counterparts of the cards above. */ :root[data-palette="neon"] .site-header, :root[data-palette="neon"] .aq-edition, :root[data-palette="neon"] .site-footer, :root[data-palette="neon"] .breadcrumb, :root[data-palette="neon"] .page-head{ border-color:var(--border-soft); } :root[data-palette="neon"] .btn-accent{background:var(--accent-bright);color:#001512;} :root[data-palette="neon"] .btn-primary{background:var(--brand-2);color:#001512;} /* Neon glow on primary calls to action */ :root[data-palette="neon"] .btn-primary{box-shadow:0 0 22px -4px rgba(94,234,212,.7);} :root[data-palette="neon"] .btn-accent{box-shadow:0 0 24px -4px rgba(45,212,191,.75);} :root[data-theme="dark"]{ --bg:#0A0D1E; --bg-elevated:#12162F; --fg:#F1F2FA; --fg-muted:#B7BBD8; --fg-faint:#7C81A6; --border:#272C50; --border-soft:#1C2040; --brand-tint:rgba(79,70,229,.20); --accent-bright-tint:rgba(14,165,160,.18); --ok-tint:rgba(18,128,92,.22); --warn-tint:rgba(176,89,10,.22); --nc-tint:rgba(196,46,66,.20); --info-tint:rgba(53,84,209,.22); --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.55); --shadow-2:0 4px 10px rgba(0,0,0,.45), 0 24px 48px -16px rgba(0,0,0,.6); /* Dark keeps the indigo family but sinks it, so the hero and CTA band do not glow brighter than the page around them. Without these the dark theme would inherit the light palette's values and those surfaces would sit oddly light. */ --deep-1:#1B2050; --deep-2:#05060F; --border-strong:#3A4180; } :root[data-theme="dark"] .page-head{background:linear-gradient(180deg,rgba(79,70,229,.14),var(--bg) 88%);} :root[data-theme="dark"] .site-header{background:rgba(10,13,30,.82);} :root[data-theme="dark"] .acc-band{background:var(--bg-elevated);} :root[data-theme="dark"] .acc{background:var(--bg);} :root[data-theme="dark"] .acc.live{background:linear-gradient(160deg,rgba(79,70,229,.16),var(--bg-elevated));} :root[data-theme="dark"] .dl{background:var(--bg-elevated);} :root[data-theme="dark"] ::selection{background:var(--accent-bright);color:#04241F;} *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;} button{font-family:inherit;} ::selection{background:var(--brand-2);color:#fff;} :focus-visible{ outline:2.5px solid var(--accent-bright); outline-offset:3px; border-radius:4px; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; margin:0; color:var(--fg); } h1{--h1-size:clamp(30px,3.6vw,46px);font-size:var(--h1-size);line-height:1.04;font-weight:600;} h2{font-size:clamp(24px,3vw,34px);line-height:1.12;} h3{font-size:18px;line-height:1.3;} p{margin:0 0 0;} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;} .section{padding:72px 0;} .mono{font-family:var(--font-mono);} .muted{color:var(--fg-muted);} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-mono); font-size:12px;letter-spacing:.09em;text-transform:uppercase; color:var(--brand-2);font-weight:600; } .eyebrow::before{ content:"";width:16px;height:1.5px;background:var(--accent-bright);display:inline-block; } .eyebrow.tag{color:var(--accent-bright);} .eyebrow.tag::before{background:var(--brand-2);} .lead{font-size:18px;color:var(--fg-muted);max-width:58ch;margin-top:16px;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-body);font-weight:600;font-size:14.5px; padding:13px 22px;border-radius:999px; border:1px solid var(--border);cursor:pointer; /* The base carries a real background and colour, so a button written without a variant still looks like it belongs to this site. Previously it set no background at all and the browser's default white pill showed through — which is what appeared on the 5 Why analyser, unreadable on the dark panel. Variants below override all three. */ background:var(--bg-elevated);color:var(--fg); transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; white-space:nowrap; } .btn:hover{border-color:var(--brand-2);color:var(--brand-2);} .btn:hover{transform:translateY(-1px);} .btn-accent{background:var(--accent-bright);color:#04241F;box-shadow:0 10px 24px -10px rgba(14,165,160,.55);} .btn-accent:hover{background:#0c9691;} .btn-primary{background:var(--brand-2);color:#fff;box-shadow:0 10px 24px -10px rgba(79,70,229,.5);} .btn-primary:hover{background:var(--brand);} .btn-ghost{background:transparent;border-color:var(--border);color:var(--fg);} .btn-ghost:hover{border-color:var(--brand-2);color:var(--brand-2);} .btn-ghost-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#fff;} .btn-ghost-dark:hover{background:rgba(255,255,255,.14);} .btn-sm{padding:9px 16px;font-size:13px;} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(245,246,251,.82); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--border); } .site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:15px 28px;gap:20px;} .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--fg);} .brand svg{flex-shrink:0;} .brand .full-name{display:block;font-family:var(--font-body);font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);margin-top:1px;} .brand-stack{display:flex;flex-direction:column;line-height:1.1;} .main-nav{display:flex;align-items:center;gap:2px;} .main-nav a{ padding:9px 13px;border-radius:999px;font-size:14px;font-weight:500;color:var(--fg-muted); transition:background .15s ease,color .15s ease; } .main-nav a:hover{color:var(--fg);background:var(--brand-tint);} .main-nav a.active{color:var(--brand-2);background:var(--brand-tint);font-weight:600;} .main-nav a.hot{color:var(--accent-bright);} .nav-dropdown{position:relative;display:flex;} .nav-dd-trigger{ display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer; font-family:var(--font-body);padding:9px 13px;border-radius:999px;font-size:14px;font-weight:500;color:var(--fg-muted); transition:background .15s ease,color .15s ease; } .nav-dd-trigger svg{transition:transform .15s ease;flex-shrink:0;} .nav-dd-trigger:hover{color:var(--fg);background:var(--brand-tint);} .nav-dd-trigger.active{color:var(--brand-2);background:var(--brand-tint);font-weight:600;} .nav-dropdown.open .nav-dd-trigger svg{transform:rotate(180deg);} .nav-dd-panel{ display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:200px; background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md); box-shadow:var(--shadow-2);padding:6px;flex-direction:column;gap:1px;z-index:70; } .nav-dropdown.open .nav-dd-panel{display:flex;} .nav-dd-item{padding:10px 13px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--fg-muted);white-space:nowrap;} .nav-dd-item:hover{color:var(--fg);background:var(--brand-tint);} .nav-dd-item.active{color:var(--brand-2);background:var(--brand-tint);font-weight:600;} .nav-actions{display:flex;align-items:center;gap:10px;} /* 44px is the minimum reliable touch target; 38px was small enough that a thumb press frequently landed on the header instead of the button and appeared to do nothing. touch-action:manipulation removes the 300ms double-tap-zoom delay on iOS Safari. */ .nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:10px; width:44px;height:44px;align-items:center;justify-content:center;color:var(--fg); touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;} .nav-toggle:active{background:var(--brand-tint);} .theme-toggle{display:flex;align-items:center;justify-content:center;background:none; border:1px solid var(--border);border-radius:10px;width:40px;height:40px;color:var(--fg); touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;flex-shrink:0;} .theme-toggle:hover,.theme-toggle:active{background:var(--brand-tint);color:var(--brand-2);} /* Same shape as the theme toggle so the two read as a pair of header controls. */ .profile-btn{display:flex;align-items:center;justify-content:center; border:1px solid var(--border);border-radius:10px;width:40px;height:40px;color:var(--fg); touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-shrink:0; text-decoration:none;} .profile-btn:hover,.profile-btn:active{background:var(--brand-tint);color:var(--brand-2);} .profile-btn.is-active{border-color:var(--brand-2);color:var(--brand-2);} /* Dashboard has a button in the header bar on desktop, so the in-menu copy would be a duplicate there. On a phone the bar has no room for it and this is its only route. */ .nav-mobile-only{display:none;} @media (max-width:640px){ .nav-mobile-only{display:flex;color:var(--brand-2);font-weight:600;} } @media (max-width:980px){ /* Anchored to the header with position:absolute, NOT fixed. .site-header carries backdrop-filter, and any ancestor with backdrop-filter, filter or transform becomes the containing block for fixed-position descendants — so a `position:fixed` panel in here resolves against the header box, not the viewport. With top set to the header height and bottom:0 inside a box that IS the header, the panel collapsed to zero height: it opened correctly and rendered nothing, which is indistinguishable from a dead button. top:100% sits it flush under the header and needs no measurement at all. The header is sticky, so the panel travels with it. dvh accounts for the phone address bar collapsing; the vh line above it is the fallback for browsers without dvh. */ .main-nav{position:absolute;top:100%;left:0;right:0;z-index:70; max-height:calc(100vh - var(--aq-header-h,64px)); max-height:calc(100dvh - var(--aq-header-h,64px)); background:var(--bg-elevated);flex-direction:column;align-items:stretch; padding:14px 14px calc(14px + env(safe-area-inset-bottom));gap:2px; transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease; border-top:1px solid var(--border);border-bottom:1px solid var(--border); box-shadow:0 18px 40px rgba(0,0,0,.28); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; display:none;} /* display:none while closed keeps the collapsed panel from swallowing taps meant for the page underneath; it is flipped to flex only when open. */ .main-nav.open{display:flex;transform:translateY(0);opacity:1;pointer-events:auto;} body.aq-nav-open{overflow:hidden;} .main-nav a{padding:13px 16px;border-radius:10px;} .nav-toggle{display:flex;} .nav-actions .btn{padding:9px 14px;font-size:13px;} .nav-dropdown{flex-direction:column;} .nav-dd-trigger{padding:13px 16px;width:100%;justify-content:space-between;} .nav-dd-panel{position:static;box-shadow:none;border:none;background:var(--bg);margin:2px 0 4px 12px;padding:2px;} .nav-dd-item{padding:11px 16px;} } /* ---------- Hero ---------- */ .hero{background:radial-gradient(120% 140% at 78% -10%, var(--deep-1) 0%, var(--bg-deep) 52%, var(--deep-2) 100%);color:var(--on-deep);padding:76px 0 96px;position:relative;overflow:hidden;} .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 90% 100%, rgba(14,165,160,.20), transparent 70%);pointer-events:none;} .hero-grid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:48px;align-items:center;position:relative;} @property --hero-tint { syntax: ''; inherits: true; initial-value: #0EA5A0; } .hero .em{color:var(--hero-tint);font-style:italic;transition:color .6s ease;} .hero #top .btn-accent{transition:background .6s ease, box-shadow .6s ease, transform .18s ease;} .hero-meta .n{transition:color .6s ease;} .hero .btn-accent{background:var(--hero-tint);box-shadow:0 10px 26px -10px var(--hero-tint);} .hero .hero-meta .n{color:var(--hero-tint);} .hero .eyebrow{color:var(--hero-tint);transition:color .6s ease;} .hero .eyebrow::before{background:var(--hero-tint);transition:background .6s ease;opacity:.6;} .hero .eyebrow{color:var(--accent-bright);} .hero .eyebrow::before{background:#fff;opacity:.5;} .hero h1{color:#fff;} /* Header brand without the mark. The mark moved to the hero, where it has room to be read; up here the wordmark carries the identity and the nav gets the space back. */ .brand-nomark{gap:0;} /* Hero lockup: the mark sits left of the headline and is sized off the headline's own line-height, so it spans both lines exactly rather than being a guessed pixel value that drifts as the type scales. align-items:center keeps it optically centred on the two lines instead of hanging off the cap-height of the first. */ .hero-headline{--h1-size:clamp(30px,3.6vw,46px);display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);} .hero-logo{flex:0 0 auto; /* Sized off the headline's own line-height so the mark spans exactly two lines and stays correct if the type scale ever changes. */ width:calc(var(--h1-size) * 2 * 1.04);height:calc(var(--h1-size) * 2 * 1.04);} /* The accent arc travels around the ring rather than sitting still. The open quarter reads as a gap that is always moving on — accreditation readiness is a cycle you never quite close, which is the whole idea behind the mark. transform-origin is set in the SVG's own user units (the viewBox is 0 0 40 40, so the centre is 20 20), with transform-box:fill-box as the fallback path for engines that resolve the origin against the element's bounding box instead. Without both, the arc swings around a corner rather than spinning in place. 14s is deliberate: fast enough to notice on arrival, slow enough that it never competes with the headline sitting beside it. */ .hero-logo-arc{ transform-origin:20px 20px; transform-box:view-box; animation:aq-ring-spin 14s linear infinite; } @keyframes aq-ring-spin{to{transform:rotate(360deg);}} /* The mark also brightens and speeds up on hover, so it reads as a live element rather than decoration that happens to move. */ .hero-headline:hover .hero-logo-arc{animation-duration:4.5s;} .hero-logo{transition:filter .4s ease;} .hero-headline:hover .hero-logo{filter:drop-shadow(0 0 10px var(--accent-bright));} /* Motion is opt-out. A perpetually rotating element is a genuine problem for people with vestibular disorders, so honour the OS setting rather than assuming nobody minds. */ @media (prefers-reduced-motion: reduce){ .hero-logo-arc{animation:none;} .hero-headline:hover .hero-logo{filter:none;} } .hero-headline h1{margin:0;} /* Below the two-column breakpoint the headline needs its full width, so the mark steps down to a single line's height and stops competing with the type. */ @media (max-width:720px){ .hero-logo{width:calc(var(--h1-size) * 1.75);height:calc(var(--h1-size) * 1.75);align-self:flex-start;margin-top:2px;} .hero-headline{gap:14px;} } .hero .lead{color:rgba(255,255,255,.72);} .hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;} .hero-meta{display:flex;gap:30px;margin-top:44px;flex-wrap:wrap;} .hero-meta .n{display:block;font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--accent-bright);} .hero-meta .l{display:block;font-size:12.5px;color:rgba(255,255,255,.56);margin-top:2px;} .badge-stage{display:flex;align-items:center;justify-content:center;align-self:stretch;} .hero-mark{width:100%;max-width:440px;height:auto;} .orbit-ring{transform-origin:220px 220px;animation:orbitspin 50s linear infinite;} @keyframes orbitspin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){.orbit-ring{animation:none;}} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;}.hero-mark{max-width:300px;}} /* ---------- Lens strip ---------- */ .lens-strip{background:var(--bg-deep-2);color:#fff;padding:40px 0;} .lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;} .lens-col{padding:0 28px;position:relative;} .lens-col + .lens-col{border-left:1px solid rgba(255,255,255,.12);} .lens-col .step{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.09em;color:var(--accent-bright);margin-bottom:9px;} .lens-col h3{color:#fff;font-size:17px;margin-bottom:6px;} .lens-col p{font-size:13.5px;color:rgba(255,255,255,.6);} /* Lens scrollytelling card. The three faces occupy the same box and cross-fade by stage, so the pinned card never resizes as the stage changes — a card that jumps height while pinned is far more distracting than the fade it replaces. */ .lens-strip[data-scrolly]{padding:70px 0;} .lens-card{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg); background:rgba(255,255,255,.04);padding:26px;position:relative;} .lens-card-top{display:flex;align-items:center;gap:10px;margin-bottom:18px;} .lens-code{font-family:var(--font-mono);font-weight:700;color:var(--accent-bright);font-size:13px;} .lens-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px; background:var(--warn-tint);color:var(--warn);} .lens-face{opacity:0;visibility:hidden;position:absolute;inset:auto 26px auto 26px; transition:opacity 460ms ease;} .lens-card h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em; color:rgba(255,255,255,.55);margin-bottom:12px;} [data-stage="0"] .lens-face[data-face="0"], [data-stage="1"] .lens-face[data-face="1"], [data-stage="2"] .lens-face[data-face="2"]{opacity:1;visibility:visible;position:relative;inset:auto;} .lens-verbatim{font-family:var(--font-display);font-size:16px;line-height:1.55; border-left:3px solid var(--accent-bright);padding-left:14px;margin-bottom:14px;} .lens-note,.lens-fix{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.6;} .lens-list{list-style:none;padding:0;display:grid;gap:9px;} .lens-list li{font-size:14px;padding-left:20px;position:relative;line-height:1.5;} .lens-list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px; border-radius:2px;background:var(--accent-bright);} .lens-gap{font-size:14.5px;padding:12px 14px;border-radius:var(--r-md); background:var(--nc-tint);color:var(--nc);font-weight:600;margin-bottom:14px;} .lens-fix b{color:#fff;} .scrolly-steps .step{color:var(--accent-bright);} /* Category chip and the deep-link out of the rotating card. */ .lens-cat{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px; background:rgba(255,255,255,.10);color:rgba(255,255,255,.86);} .lens-cat.cat-CORE{background:var(--nc-tint);color:var(--nc);} .lens-open{display:inline-block;margin-top:18px;font-size:13px;font-weight:700; color:var(--accent-bright);text-decoration:none;} .lens-open:hover{text-decoration:underline;} #lensTopic{color:var(--accent-bright);} @media (max-width:800px){.lens-grid{grid-template-columns:1fr;gap:22px;}.lens-col + .lens-col{border-left:none;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;}} /* ---------- Page head (interior pages) ---------- */ .page-head{background:linear-gradient(180deg,var(--brand-tint),var(--bg) 88%);padding:44px 0 40px;border-bottom:1px solid var(--border-soft);} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-faint);margin-bottom:18px;} .breadcrumb a{color:var(--fg-muted);} .breadcrumb a:hover{color:var(--brand-2);} .breadcrumb .sep{opacity:.5;} .breadcrumb .cur{color:var(--fg);font-weight:600;} .page-head h1{margin-top:10px;max-width:20ch;} .page-head .lead{margin-top:14px;} /* ---------- Section head ---------- */ .section-head{margin-bottom:34px;max-width:70ch;} .section-head h2{margin-top:10px;} .section-head p{margin-top:10px;color:var(--fg-muted);font-size:15.5px;} .section-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;} @media (max-width:700px){.section-head.row{flex-direction:column;align-items:flex-start;}} /* ---------- Grids & tiles ---------- */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} @media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}} .tile{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg); padding:26px;box-shadow:var(--shadow-1); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; display:block; } a.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--border-strong);} .tile .ico{width:42px;height:42px;border-radius:12px;background:var(--brand-tint);color:var(--brand-2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .tile h3{margin-top:2px;} .tile p{color:var(--fg-muted);font-size:14.5px;margin-top:9px;} .tile .more{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--brand-2);} a.tile:hover .more{text-decoration:underline;} .chapter-card .code{display:inline-block;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;background:var(--brand-tint);color:var(--brand-2);padding:5px 10px;border-radius:7px;} .chapter-card .meta{display:flex;gap:14px;margin-top:16px;font-size:12.5px;color:var(--fg-faint);} .chapter-card.soon{opacity:.68;} .chapter-card.soon .code{background:var(--border-soft);color:var(--fg-faint);} .dept-card{display:flex;gap:16px;align-items:flex-start;} .dept-card .ico{flex-shrink:0;margin-bottom:0;} .dept-card .persona{font-family:var(--font-mono);font-size:11.5px;color:var(--accent-bright);text-transform:uppercase;letter-spacing:.05em;margin:4px 0 8px;} /* ---------- Pills / tags / badges ---------- */ .pill{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;background:var(--brand-tint);color:var(--brand-2);font-size:12.5px;font-weight:600;border:1px solid transparent;} .type-tag{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;} .type-core{background:var(--nc-tint);color:var(--nc);} .type-comm{background:var(--warn-tint);color:var(--warn);} .type-exc{background:var(--accent-bright-tint);color:var(--accent-bright);} .code-chip{font-family:var(--font-mono);font-size:12px;font-weight:600;background:var(--bg-deep);color:#fff;padding:5px 10px;border-radius:7px;letter-spacing:.02em;} .tag-row{display:flex;gap:8px;align-items:center;} .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;} .badge-ok{background:var(--ok-tint);color:var(--ok);} .badge-soon{background:var(--warn-tint);color:var(--warn);} .badge-info{background:var(--info-tint);color:var(--info);} /* ---------- CTA band ---------- */ .cta-band{ background:linear-gradient(120deg,var(--bg-deep),var(--deep-1) 120%); color:#fff;border-radius:var(--r-xl);padding:50px 44px;text-align:left; display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:relative;overflow:hidden; } .cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,160,.35),transparent 70%);} .cta-band h2{color:#fff;font-size:clamp(22px,2.6vw,30px);} .cta-band p{color:rgba(255,255,255,.68);max-width:60ch;} /* ---------- Two column ---------- */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;} @media (max-width:860px){.two-col{grid-template-columns:1fr;}} /* ---------- Lens (home featured card) ---------- */ .lens{background:var(--brand-tint);border-radius:var(--r-md);padding:16px;} .lens-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--brand-2);margin-bottom:8px;} /* ---------- Accreditation band ---------- */ .acc-band{background:var(--bg-elevated);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);} .acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;} @media (max-width:900px){.acc-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:600px){.acc-grid{grid-template-columns:1fr;}} .acc{border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;background:var(--bg);} .acc.live{background:linear-gradient(160deg,var(--brand-tint),var(--bg-elevated));border-color:var(--border-strong);} .acc .st{display:block;margin-bottom:12px;} .acc .abbr{font-family:var(--font-display);font-weight:700;font-size:22px;} .acc .full{font-size:13px;color:var(--fg-muted);margin-top:3px;font-weight:600;} .acc .desc{font-size:13.5px;color:var(--fg-faint);margin-top:8px;} /* ---------- Humor section ---------- */ .humor{background:var(--bg-deep);color:#fff;} .humor .section-head h2{color:#fff;} .humor .section-head p{color:rgba(255,255,255,.62);} .joke{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:22px;} .joke .setup{color:rgba(255,255,255,.6);font-size:13.5px;margin-bottom:8px;} .joke .punch{font-family:var(--font-display);font-size:17px;font-weight:600;color:#fff;} .joke .foot{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:8px;} .joke .foot .pill{background:rgba(14,165,160,.18);color:var(--accent-bright);} /* ---------- KPI cards ---------- */ .kpi-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-1);} .kpi-top{display:flex;justify-content:space-between;gap:14px;} .kpi-top h3{margin-top:6px;font-size:17.5px;} .kpi-formula{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--font-mono);font-size:12px;color:var(--fg-muted);} .kpi-frac{display:flex;flex-direction:column;border-bottom:1.5px solid var(--fg-muted);padding-bottom:2px;line-height:1.35;} .kpi-frac .num{border-bottom:1.5px solid var(--fg-muted);padding-bottom:2px;margin-bottom:2px;} .kpi-metric{text-align:right;flex-shrink:0;} .kpi-metric .big{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--fg);} .kpi-metric .delta{font-size:12.5px;font-weight:700;color:var(--ok);} .kpi-metric .kpi-bench{font-size:11px;color:var(--fg-faint);margin-top:2px;} .kpi-spark{margin-top:14px;} .kpi-foot{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;} /* ---------- Download tile ---------- */ .dl{display:flex;align-items:center;gap:14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);} .ficon{display:flex;align-items:center;justify-content:center;border-radius:10px;font-family:var(--font-mono);font-weight:700;font-size:12px;} .ficon.xls{background:var(--ok-tint);color:var(--ok);} .dn{display:block;font-weight:700;} .dm{display:block;font-size:12.5px;color:var(--fg-faint);margin-top:2px;} /* ---------- Video ---------- */ .video-embed{position:relative;background:linear-gradient(140deg,var(--bg-deep),var(--deep-1));border-radius:var(--r-lg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;} .video-embed .play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:transform .18s ease, background .18s ease;} .video-embed .play:hover{transform:scale(1.08);background:var(--accent-bright);color:#04241F;} .video-embed .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(0deg,rgba(6,8,26,.86),transparent);color:#fff;display:flex;flex-direction:column;gap:2px;} .video-embed .cap b{font-family:var(--font-display);font-size:16px;} .video-embed .cap span{font-size:12.5px;color:rgba(255,255,255,.68);} /* ---------- Steps (worked example) ---------- */ .steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;} .steps li{font-size:14.5px;padding-left:16px;border-left:2px solid var(--border);} .steps li b{color:var(--brand-2);} /* ---------- Flashcards (learn.html uses inline styles primarily) ---------- */ /* ---------- Quiz ---------- */ .quiz{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-1);} .quiz .q{font-weight:700;font-size:15.5px;margin-bottom:14px;} .opt{display:block;width:100%;text-align:left;background:var(--bg-elevated);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:9px;font-size:14px;font-family:var(--font-body);cursor:pointer;transition:border-color .15s ease, background .15s ease, color .15s ease;} .opt:hover{border-color:var(--brand-2);background:var(--brand-tint);color:var(--brand-2);} .opt.correct{background:var(--ok-tint);border-color:var(--ok);color:var(--ok);font-weight:600;} .opt.wrong{background:var(--nc-tint);border-color:var(--nc);color:var(--nc);font-weight:600;} .feedback{font-size:13.5px;margin-top:6px;min-height:18px;color:var(--fg-muted);} /* ---------- Footer ---------- */ .site-footer{background:var(--bg-deep);color:rgba(255,255,255,.65);padding:56px 0 26px;margin-top:40px;} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1);} .footer-brand .brand{color:#fff;} .footer-brand .full-name{color:rgba(255,255,255,.5);} .footer-brand p{font-size:13.5px;margin-top:14px;max-width:34ch;color:rgba(255,255,255,.55);} .footer-col h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px;font-family:var(--font-body);font-weight:700;} .footer-col a{display:block;font-size:13.5px;padding:5px 0;color:rgba(255,255,255,.72);} .footer-col a:hover{color:var(--accent-bright);} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12.5px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:10px;} @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr;}} /* ============================================================ Quality Dashboard ============================================================ */ .dash-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:26px;} .dash-search{flex:1;min-width:220px;position:relative;} .dash-search input{width:100%;padding:13px 16px 13px 42px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elevated);font-size:14.5px;font-family:var(--font-body);box-shadow:var(--shadow-1);} .dash-search input:focus{outline:none;border-color:var(--brand-2);} .dash-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--fg-faint);} .dept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} @media (max-width:1000px){.dept-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:760px){.dept-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:480px){.dept-grid{grid-template-columns:1fr;}} .dept-tile{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg); padding:20px;cursor:pointer;text-align:left;box-shadow:var(--shadow-1); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; display:flex;flex-direction:column;gap:12px;position:relative; } .dept-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--border-strong);} .dept-tile.is-active{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-tint), var(--shadow-2);} .dept-tile .dt-top{display:flex;align-items:center;justify-content:space-between;} .dept-tile .dt-ico{width:38px;height:38px;border-radius:10px;background:var(--brand-tint);color:var(--brand-2);display:flex;align-items:center;justify-content:center;} .dept-tile h4{font-family:var(--font-display);font-size:16.5px;font-weight:700;} .dept-tile .dt-meta{display:flex;gap:10px;font-size:11.5px;color:var(--fg-faint);font-family:var(--font-mono);} .gauge{position:relative;width:44px;height:44px;flex-shrink:0;} .gauge svg{transform:rotate(-90deg);} .gauge .gv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--fg);} .dept-detail{ margin-top:34px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-xl); padding:36px;box-shadow:var(--shadow-2);display:none; } .dept-detail.is-open{display:block;animation:riseIn .28s ease both;} @keyframes riseIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} .dd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--border-soft);padding-bottom:22px;margin-bottom:26px;} .dd-head h2{font-size:26px;} .dd-head .persona{margin-top:6px;} .dd-close{background:var(--bg);border:1px solid var(--border);border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fg-muted);flex-shrink:0;} .dd-close:hover{color:var(--nc);border-color:var(--nc);} .dd-score{display:flex;gap:26px;flex-wrap:wrap;} .dd-score .sc{text-align:center;} .dd-score .sc .v{font-family:var(--font-display);font-size:26px;font-weight:700;} .dd-score .sc .l{font-size:11px;color:var(--fg-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;} .dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;} @media (max-width:820px){.dd-cols{grid-template-columns:1fr;}} .dd-block h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-faint);font-family:var(--font-body);font-weight:700;margin-bottom:14px;} .kra-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;} .kra-list li{display:flex;gap:10px;font-size:14px;padding:12px 14px;background:var(--bg);border-radius:10px;border:1px solid var(--border-soft);} .kra-list li .kn{font-family:var(--font-mono);font-size:11px;color:var(--brand-2);font-weight:700;flex-shrink:0;padding-top:2px;} .kpi-table{width:100%;border-collapse:collapse;font-size:13.5px;} .kpi-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);padding:0 10px 10px;font-weight:700;} .kpi-table td{padding:11px 10px;border-top:1px solid var(--border-soft);} .kpi-table tr td:first-child{font-weight:600;} .kpi-table .kt-val{font-family:var(--font-mono);font-weight:700;} .kpi-table .kt-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;} .kt-status.ok{background:var(--ok-tint);color:var(--ok);} .kt-status.watch{background:var(--warn-tint);color:var(--warn);} .kt-status.risk{background:var(--nc-tint);color:var(--nc);} .dash-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--fg-faint);font-size:14.5px;} /* Utility spacing already inline in markup preserved */ /* ---------- Site-wide scroll reveal (Gamma-style rise + fade, reversible) ---------- */ .reveal-el{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); will-change:opacity, transform; } .reveal-el.revealed{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal-el{opacity:1 !important;transform:none !important;transition:none !important;} } /* ---- Neon palette overrides for feature modules (their CSS hardcodes the indigo/teal accents, so they are re-pointed here rather than duplicated). ---- */ :root[data-palette="neon"] .qg-shell, :root[data-palette="neon"] .hg-shell{background:linear-gradient(160deg,#000,#06322C);border-color:rgba(94,234,212,.28);border-top-color:var(--accent-bright);} :root[data-palette="neon"] .qg-right, :root[data-palette="neon"] .hg-right{background:rgba(0,0,0,.7);} :root[data-palette="neon"] .qg-live .dot{background:var(--accent-bright);box-shadow:0 0 6px var(--accent-bright);} :root[data-palette="neon"] .qg-panel-cta{background:var(--accent-bright);color:#001512;} :root[data-palette="neon"] .qg-panel-cta:hover{background:var(--brand-2);} :root[data-palette="neon"] .qg-metric-card:hover, :root[data-palette="neon"] .qg-metric-card.is-active{border-color:var(--accent-bright);background:rgba(45,212,191,.10);} :root[data-palette="neon"] .qg-detail-panel, :root[data-palette="neon"] .qg-hub-tip, :root[data-palette="neon"] .hg-hub-tip, :root[data-palette="neon"] .gx-tooltip, :root[data-palette="neon"] .gx-auto-label, :root[data-palette="neon"] .kn-tip{background:rgba(2,6,12,.96);border-color:rgba(45,212,191,.4);} :root[data-palette="neon"] .qg-detail-panel h3, :root[data-palette="neon"] .qg-hub-tip, :root[data-palette="neon"] .hg-coord-val, :root[data-palette="neon"] .gx-tooltip span{color:var(--accent-bright);} :root[data-palette="neon"] .qg-zoom-controls button{background:rgba(0,0,0,.85);border-color:rgba(45,212,191,.35);color:var(--accent-bright);} :root[data-palette="neon"] .qg-zoom-controls button:hover{background:rgba(45,212,191,.18);border-color:var(--accent-bright);} :root[data-palette="neon"] .gx-wrap, :root[data-palette="neon"] .kn-wrap{background:radial-gradient(circle at 50% 45%, rgba(94,234,212,.18), transparent 70%);} :root[data-palette="neon"] .qg-loading .spin, :root[data-palette="neon"] .hg-loading .spin, :root[data-palette="neon"] .gx-loading .spin, :root[data-palette="neon"] .sv-progress-fill{border-top-color:var(--accent-bright);background:var(--accent-bright);} :root[data-palette="neon"] .face-canvas-wrap, :root[data-palette="neon"] .hg-globe-wrap{box-shadow:0 0 60px -10px rgba(45,212,191,.42), 0 0 100px -20px rgba(94,234,212,.3);} :root[data-palette="neon"] .sv-title-bar{border-bottom-color:var(--accent-bright);} :root[data-palette="neon"] .sop-page{border-color:var(--border);} :root[data-palette="neon"] .sd-title{border-bottom-color:var(--brand-2);} :root[data-palette="neon"] .sv-opt.is-picked{border-color:var(--accent-bright);background:rgba(45,212,191,.14);color:var(--accent-bright);} /* The empty-state icons now inherit colour, so give their containers one. */ .qg-panel-empty svg, .hg-panel-empty svg, .sop-empty svg{color:var(--accent-bright);} /* ---------- Site-wide search overlay ---------- */ .aq-search-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,8,20,.72);backdrop-filter:blur(4px); display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;animation:aqFade .14s ease;} @keyframes aqFade{from{opacity:0}to{opacity:1}} .aq-search-box{width:100%;max-width:620px;background:var(--bg-elevated);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden;} .aq-search-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-soft);color:var(--fg-faint);} .aq-search-input-row input{flex:1;background:none;border:none;outline:none;color:var(--fg); font-size:15.5px;font-family:var(--font-body);} .aq-search-input-row input::placeholder{color:var(--fg-faint);} .aq-search-input-row kbd{font-family:var(--font-mono);font-size:10px;color:var(--fg-faint); border:1px solid var(--border);border-radius:5px;padding:2px 6px;} .aq-search-results{max-height:56vh;overflow-y:auto;} .aq-search-empty{padding:26px 18px;text-align:center;font-size:13px;color:var(--fg-faint);} .aq-search-item{display:flex;gap:11px;align-items:flex-start;padding:11px 16px; border-bottom:1px solid var(--border-soft);text-decoration:none;} .aq-search-item:hover,.aq-search-item.is-sel{background:var(--brand-tint);} .aq-search-type{flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase; letter-spacing:.04em;padding:3px 7px;border-radius:5px;background:var(--border-soft);color:var(--fg-muted);margin-top:2px;} .aq-search-type.t-element{background:var(--brand-tint);color:var(--brand-2);} .aq-search-type.t-department{background:var(--ok-tint);color:var(--ok);} .aq-search-type.t-committee{background:var(--info-tint);color:var(--info);} .aq-search-type.t-kpi{background:var(--warn-tint);color:var(--warn);} .aq-search-main{min-width:0;} .aq-search-main b{display:block;font-size:13.5px;color:var(--fg);font-weight:600;} .aq-search-main em{display:block;font-style:normal;font-size:11.5px;color:var(--fg-faint);line-height:1.5;margin-top:2px;} .aq-sop{color:var(--warn);font-size:10px;font-style:normal;} .aq-search-btn{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border); border-radius:999px;padding:7px 12px;font-size:12.5px;color:var(--fg-faint);cursor:pointer;font-family:var(--font-body);} .aq-search-btn:hover{border-color:var(--brand-2);color:var(--brand-2);} .aq-search-btn kbd{font-family:var(--font-mono);font-size:9.5px;border:1px solid var(--border);border-radius:4px;padding:1px 4px;} @media (max-width:700px){.aq-search-btn span{display:none;} .aq-search-btn kbd{display:none;}} /* ---------- Edition banner ---------- */ .aq-edition{background:var(--brand-tint);border-bottom:1px solid var(--border); font-size:11.5px;color:var(--fg-muted);text-align:center;padding:7px 16px;font-family:var(--font-mono);} .aq-edition b{color:var(--brand-2);} /* ---------- Accessibility ---------- */ .aq-skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--brand-2);color:#fff; padding:10px 18px;border-radius:0 0 8px 0;font-size:14px;font-weight:600;text-decoration:none;} .aq-skip:focus{left:0;} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, [tabindex]:focus-visible{outline:2.5px solid var(--accent-bright);outline-offset:3px;border-radius:4px;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important;} } /* ---------- Button-based cards must set their own colour ----------