/* ============================================================================ AMAADOR SUITE — DESIGN 2.0 · "OBSIDIAN → MATTE" Single source of truth. Copy this file into each site's assets/css/ and load it AFTER the site's own stylesheet. It redefines the shared design tokens (--bg, --window, --ink, --acc, --line, --grain, --r*, --font*, --ease …) so any token-driven site re-skins instantly, and it ships the suite-level chrome (cinematic intro, network switcher, "part of AMAADOR SUITE" badge). PALETTE true matte black #0A0A0B–#12 · warm off-white #F5F4F0 SURFACES hairline 1px borders · frosted low-opacity glass · soft fog (no neon) TYPE Fraunces (display) · Sora (UI) · Inter (body) · Tajawal (AR) MODE dark-first, with a complete light variant (data-theme="light") ACCENT per-site, set via (map below) ============================================================================ */ :root{ /* ---- structural tokens (DARK, default) ---- */ --bg:#0a0a0b; --bg2:#0f0f12; --bg3:#141417; --window:rgba(255,255,255,.032); --surface:rgba(255,255,255,.045); --surface2:rgba(255,255,255,.065); --glass:rgba(20,20,24,.55); --glass-strong:rgba(24,24,29,.72); --ink:#f5f4f0; --ink2:#d3d1c8; --txt:#cbc9c0; --muted:#8f8d84; --mut:#8f8d84; --faint:#605e57; --line:rgba(245,244,240,.09); --line2:rgba(245,244,240,.15); --line3:rgba(245,244,240,.24); --hair:rgba(245,244,240,.07); --navy:var(--acc); --navy2:var(--acc2); --on-navy:#0a0a0b; --acc-dim:rgba(var(--acc-rgb),.14); --acc-soft:rgba(var(--acc-rgb),.08); --good:#43c489; --bad:#e87070; --r:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-pill:999px; --pill:999px; --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -22px rgba(0,0,0,.8); --shadow:0 2px 10px rgba(0,0,0,.5), 0 30px 70px -36px rgba(0,0,0,.85); --shadow-lg:0 40px 100px -40px rgba(0,0,0,.9); --glow:0 0 0 1px rgba(var(--acc-rgb),.28), 0 22px 60px -20px rgba(var(--acc-rgb),.38); --grain:.05; --maxw:1200px; --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-display:'Fraunces','Georgia',serif; --font-title:'Fraunces','Georgia',serif; --font-head:'Sora',system-ui,sans-serif; --font-mono:'JetBrains Mono','Space Mono',ui-monospace,Menlo,Consolas,monospace; --tracking:.26em; --dur-fast:180ms; --dur:420ms; --dur-slow:900ms; --ease:cubic-bezier(.16,1,.3,1); /* ---- UNIFIED SUITE ACCENT — platinum, identical on all 10 sites ---- */ --acc:#c9ceda; --acc2:#9aa0bb; --acc-rgb:201,206,218; } /* (per-site accent map removed 2026-07-01 — the suite now shares ONE platinum accent) */ /* ---- light variant (structural only — accent stays per-site) ---- */ html[data-theme="light"]{ --bg:#f5f4f0; --bg2:#faf9f6; --bg3:#efede8; --window:rgba(18,18,20,.022); --surface:#ffffff; --surface2:#f1efea; --glass:rgba(255,255,255,.66); --glass-strong:rgba(255,255,255,.86); --ink:#121214; --ink2:#33322f; --txt:#3b3a37; --muted:#6d6b64; --mut:#6d6b64; --faint:#a3a09a; --line:rgba(18,18,20,.10); --line2:rgba(18,18,20,.16); --line3:rgba(18,18,20,.24); --hair:rgba(18,18,20,.07); --on-navy:#f5f4f0; --shadow-sm:0 1px 2px rgba(17,17,16,.05), 0 8px 24px -18px rgba(17,17,16,.28); --shadow:0 2px 6px rgba(17,17,16,.06), 0 24px 60px -30px rgba(17,17,16,.32); --shadow-lg:0 30px 80px -32px rgba(17,17,16,.36); --grain:.03; color-scheme:light; } :root{color-scheme:dark;} /* dark-token AUTHORITY: also bind the dark palette to html[data-theme="dark"] so it OUT-RANKS any site's own [data-theme="dark"] block (e.g. Academy's ATELIER layer), which a bare :root cannot. Light stays in [data-theme="light"]. */ :root, html[data-theme="dark"]{ --bg:#0a0a0b; --bg2:#0f0f12; --bg3:#141417; --window:rgba(255,255,255,.032); --surface:rgba(255,255,255,.045); --surface2:rgba(255,255,255,.065); --glass:rgba(20,20,24,.55); --glass-strong:rgba(24,24,29,.72); --ink:#f5f4f0; --ink2:#d3d1c8; --txt:#cbc9c0; --muted:#8f8d84; --mut:#8f8d84; --faint:#605e57; --line:rgba(245,244,240,.09); --line2:rgba(245,244,240,.15); --line3:rgba(245,244,240,.24); --hair:rgba(245,244,240,.07); --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -22px rgba(0,0,0,.8); --shadow:0 2px 10px rgba(0,0,0,.5), 0 30px 70px -36px rgba(0,0,0,.85); --shadow-lg:0 40px 100px -40px rgba(0,0,0,.9); --grain:.05; --navy:var(--acc); --navy2:var(--acc2); --on-navy:#0a0a0b; --acc-dim:rgba(var(--acc-rgb),.14); --acc-soft:rgba(var(--acc-rgb),.08); --good:#43c489; --bad:#e87070; /* accent AUTHORITY — re-assert the unified platinum inside the themed blocks so per-site theme layers (e.g. Academy's neon.css [data-theme] accents) cannot out-rank the :root declaration */ --acc:#c9ceda; --acc2:#9aa0bb; --acc-rgb:201,206,218; } html[data-theme="light"]{ --acc:#5a6274; --acc2:#7c86a0; --acc-rgb:90,98,116; } html[lang="ar"], [dir="rtl"]{ --font:'Tajawal','Inter',system-ui,sans-serif; --font-display:'Tajawal','Georgia',serif; --font-title:'Tajawal','Georgia',serif; } /* ===================== CANVAS + ATMOSPHERE ===================== */ html{scroll-behavior:smooth;} body{ color:var(--ink); background:var(--bg); transition:background .5s var(--ease), color .5s var(--ease); } /* soft fog — light bleeding through, not neon. Fixed, cheap, behind everything. */ .d2-atmos{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background: radial-gradient(60vw 46vw at 18% -8%, rgba(var(--acc-rgb),.16), transparent 60%), radial-gradient(52vw 42vw at 92% 4%, rgba(var(--acc-rgb),.08), transparent 62%), radial-gradient(70vw 60vw at 50% 116%, rgba(255,255,255,.04), transparent 60%); filter:blur(24px); opacity:.9; } html[data-theme="light"] .d2-atmos{ opacity:.7; mix-blend-mode:multiply; } /* film grain — SVG turbulence data-URI (no extra request), matte de-banding */ .d2-grain{ position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } html[data-theme="light"] .d2-grain{ mix-blend-mode:multiply; } /* re-skin the motion.js FX overlays that live sites already inject */ #neon-grid{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; animation:none !important; background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px); background-size:52px 52px,52px 52px; -webkit-mask-image:radial-gradient(120% 82% at 50% 0%, #000 28%, transparent 86%); mask-image:radial-gradient(120% 82% at 50% 0%, #000 28%, transparent 86%); } #neon-scan{ display:none !important; } .neon-grain{ display:none !important; } /* superseded by .d2-grain */ /* ===================== SUITE BAR — identical on all 10 sites ===================== The single strongest "one entity" signal: a thin corporate strip above every site's own header. Built by suite.js as body's first child. */ .d2-bar{ position:relative; z-index:9100; height:44px; display:flex; align-items:center; gap:14px; padding:0 clamp(16px,3vw,32px); background:rgba(10,10,11,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); font-family:var(--font-head); } html[data-theme="light"] .d2-bar{ background:rgba(245,244,240,.9); } .d2-bar .b-mark{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); } .d2-bar .b-mark svg{ width:19px; height:19px; color:var(--acc); } .d2-bar .b-mark b{ font-weight:600; font-size:.78rem; letter-spacing:.14em; } .d2-bar .b-mark span{ font-weight:500; font-size:.62rem; letter-spacing:.34em; color:var(--muted); text-transform:uppercase; } .d2-bar .b-here{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:8px; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .d2-bar .b-here i{ font-style:normal; color:var(--acc); font-weight:600; } .d2-bar .b-dot{ width:5px; height:5px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px 1px rgba(var(--acc-rgb),.7); } .d2-bar .b-switch{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid var(--line); background:var(--window); color:var(--ink); font-family:var(--font-head); font-weight:600; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.5em 1em; border-radius:var(--pill); transition:border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); } .d2-bar .b-switch:hover{ border-color:rgba(var(--acc-rgb),.55); box-shadow:0 0 0 3px rgba(var(--acc-rgb),.1); } @media(max-width:640px){ .d2-bar .b-here span.hide-sm{ display:none; } .d2-bar{ height:40px; } } /* ===================== TYPOGRAPHY AUTHORITY — one voice on all 10 sites ========= Sites load their own legacy families (Plus Jakarta, Manrope, Jost, Lora…); identity demands one system: Fraunces display · Sora UI · Inter body. Guarded to skip icon fonts / code. */ h1,h2,h3, .h1,.h2,.h3{ font-family:var(--font-display) !important; font-weight:600; letter-spacing:-.01em; } h4,h5,h6, .h4,.h5,.h6, nav, button:not([class*="icon"]):not([class*="fab"]), .btn, [class*="btn-"], input, select, textarea, label, th{ font-family:var(--font-head) !important; } body, p, li, dd, dt, td, figcaption{ font-family:var(--font); } code, pre, kbd, samp{ font-family:var(--font-mono) !important; } /* ===================== SUITE CHROME ===================== */ /* "part of AMAADOR SUITE" badge */ .d2-badge{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding:.42em .8em; border:1px solid var(--line); border-radius:var(--pill); background:var(--window); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-decoration:none; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .d2-badge:hover{ color:var(--ink); border-color:var(--line2); } .d2-badge .d2-spark{ width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px 1px rgba(var(--acc-rgb),.8); } /* Network switcher FAB + panel */ .d2-net-fab{ position:fixed; right:20px; bottom:20px; z-index:9000; width:54px; height:54px; border:0; cursor:pointer; border-radius:50%; display:grid; place-items:center; color:var(--on-navy); background:linear-gradient(140deg,var(--acc),var(--acc2)); box-shadow:var(--glow); transition:transform var(--dur) var(--ease), box-shadow var(--dur); } .d2-net-fab:hover{ transform:translateY(-3px) scale(1.05); } .d2-net-fab svg{ width:22px; height:22px; } .d2-net{ position:fixed; inset:0; z-index:9500; display:none; place-items:center; padding:24px; background:rgba(4,4,6,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .d2-net[data-open]{ display:grid; animation:d2fade var(--dur) var(--ease); } .d2-net-card{ width:min(720px,96vw); max-height:88vh; overflow:auto; padding:30px clamp(20px,4vw,40px); border:1px solid var(--line2); border-radius:var(--r-xl); background:var(--glass-strong); -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); box-shadow:var(--shadow-lg); } .d2-net-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; } .d2-net-hd h3{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; margin:0; } .d2-net-hd p{ color:var(--muted); font-size:.9rem; margin:.15rem 0 0; } .d2-net-x{ background:var(--window); border:1px solid var(--line); color:var(--ink); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1; } .d2-net-grid{ margin-top:1.4rem; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } .d2-net-item{ display:flex; gap:12px; align-items:center; padding:14px; border-radius:var(--r-md); text-decoration:none; color:var(--ink); border:1px solid var(--line); background:var(--window); transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); } .d2-net-item:hover{ transform:translateY(-3px); border-color:rgba(var(--acc-rgb),.5); box-shadow:var(--glow); } .d2-net-item .ic{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; font-size:1.15rem; color:var(--acc); background:linear-gradient(165deg,var(--surface2),var(--surface) 62%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .d2-net-item .ic svg{ width:17px; height:17px; } .d2-net-item b{ font-family:var(--font-head); font-weight:600; font-size:.9rem; display:block; } .d2-net-item span{ color:var(--muted); font-size:.72rem; } .d2-net-item.current{ border-color:rgba(var(--acc-rgb),.6); background:var(--acc-soft); } .d2-net-item.current .ic{ background:linear-gradient(140deg,var(--acc),var(--acc2)); color:var(--on-navy); border-color:transparent; } /* footer network row (crawlable) */ .d2-fnet{ display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center; font-family:var(--font-head); font-size:.84rem; } .d2-fnet a{ color:var(--muted); text-decoration:none; transition:color var(--dur-fast); } .d2-fnet a:hover{ color:var(--acc); } .d2-fnet a.current{ color:var(--ink); } /* ===== MASTER LOGO (aperture mark + AMAADOR wordmark) — same on every site ===== */ .d2-suite-logo{ display:inline-flex; align-items:center; gap:.6em; color:var(--ink); text-decoration:none; } .d2-suite-logo .glyph{ width:34px; height:34px; color:var(--acc); flex:0 0 auto; display:inline-flex; } .d2-suite-logo .glyph svg{ width:100%; height:100%; } .d2-suite-logo .wm{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; letter-spacing:.01em; line-height:1; } .d2-suite-logo .wm small{ display:block; font-family:var(--font-head); font-weight:600; font-size:.56rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin-top:3px; } .d2-suite-logo:hover .glyph{ filter:drop-shadow(0 0 10px rgba(var(--acc-rgb),.5)); } /* colour any site's existing header brand glyph slot in the suite accent. html-prefixed twins out-rank per-site dark overrides like `html[data-theme="dark"] .brand-cap{color:#fff}` (Academy). */ .brand-cap, .brand .mark, [data-d2-logo], html[data-theme="dark"] .brand-cap, html[data-theme="light"] .brand-cap{ color:var(--acc); background:transparent; box-shadow:none; } /* ===== COMPONENT PATCHES — legacy per-site chrome pulled into Design 2.0 ===== (safe no-ops on sites that don't ship the component) */ /* live visitor counter (Academy .sc-* / Workshop .swc-* / shared .amc-*) — kill the hardcoded violet/white glass, re-dress in matte tokens */ .sc-float, html[data-theme="dark"] .sc-float, .swc-float, html[data-theme="dark"] .swc-float{ background:var(--glass); border:1px solid var(--line2); box-shadow:var(--shadow); } .sc-num, .swc-num{ background:linear-gradient(135deg,var(--ink),var(--acc2)); -webkit-background-clip:text; background-clip:text; } .sc-ring, .swc-ring{ background:conic-gradient(from var(--sc-ang,0deg),var(--acc),var(--acc2),var(--good),var(--acc)); opacity:.3; } .sc-ic, .swc-ic{ filter:none; } /* lift per-site FAB stacks clear of the d2 network FAB (same corner) */ .acad-fab{ bottom:88px; } /* retire the legacy injected corp links — the unified header lockup replaces them */ a.amaador-brand-logo:not(.d2-suite-logo), img.amaador-brand-logo{ display:none !important; } /* ===== CONSISTENT FOOTER BAND — same construction on every site ===== */ .d2-footer{ margin-top:var(--space-section); border-top:1px solid var(--line); background:var(--bg2); padding:clamp(2.4rem,4vw,3.6rem) 0 2.4rem; } .d2-footer .d2-fin{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,40px); display:flex; flex-direction:column; gap:1.5rem; align-items:center; text-align:center; } .d2-footer .tag{ color:var(--muted); font-size:.9rem; max-width:54ch; margin:0; } .d2-footer .legal{ color:var(--muted); font-size:.76rem; margin:0; } /* --faint fails WCAG on --bg2 */ /* ===================== SUITE CONSTELLATION (homepage band) ===================== Two glass panels: [A] the ten-site orbit — nodes revolve around the AMAADOR aperture (pure CSS transforms, 70s) with a cycling caption naming each site; [B] "You are here" — the current site's mark + what it offers. */ .d2-orbit-band{ position:relative; overflow:hidden; padding:clamp(3rem,6vw,5.5rem) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--bg2); } /* wrapper class is d2-orbit-in (NOT `.in` — the reveal system adds a state class named `in`, which would make the panels themselves match a `.in` layout rule) */ .d2-orbit-band .d2-orbit-in{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,40px); display:grid; gap:clamp(20px,3vw,34px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:stretch; } @media(max-width:920px){ .d2-orbit-band .d2-orbit-in{ grid-template-columns:minmax(0,1fr); } } /* layout-critical props carry !important: this component ships into 10 foreign stylesheets and must not be re-flowed by any site's generic card/grid rules */ .d2-orbit-band .d2-orbit-panel{ position:relative; overflow:hidden; padding:clamp(24px,3.4vw,40px); display:flex !important; flex-direction:column; float:none; column-count:auto !important; background:var(--glass); border:1px solid var(--line); border-radius:var(--r-xl); text-align:start; -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); box-shadow:var(--shadow); } .d2-orbit-panel .hd{ display:block; } .d2-orbit-panel .d2-eyebrow{ display:block; margin-bottom:.6rem; } .d2-orbit-panel h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.3vw,2.05rem); line-height:1.14; margin:0; color:var(--ink); letter-spacing:-.01em; max-width:24ch; } .d2-orbit-panel h2 i{ font-style:italic; background:linear-gradient(120deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* --- [A] the orbit --- */ .d2-op-a::before{ content:""; position:absolute; inset:auto -20% -45% -20%; height:90%; background:radial-gradient(50% 50% at 50% 50%, rgba(var(--acc-rgb),.10), transparent 70%); pointer-events:none; } .d2-orbit{ position:relative; width:min(350px,72vw); aspect-ratio:1/1; margin:clamp(1.4rem,3vw,2.4rem) auto .8rem; flex:0 0 auto; align-self:center; --orbR:calc(min(350px,72vw)/2 - 26px); } .d2-orbit .ring{ position:absolute; inset:6%; border:1px solid var(--hair); border-radius:50%; opacity:.9; } .d2-orbit .ring.r2{ inset:26%; border-style:dashed; border-color:var(--line2); opacity:.45; } /* precision dial (static engraved rings + tick bezel) and rotating spokes */ .d2-orbit svg.dial{ position:absolute; inset:0; width:100%; height:100%; color:var(--ink); pointer-events:none; } .d2-orbit .spin svg.spokes{ position:absolute; inset:0; width:100%; height:100%; color:var(--acc); opacity:.4; pointer-events:none; } .d2-orbit .core{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:var(--acc); } .d2-orbit .core svg{ width:56px; height:56px; filter:drop-shadow(0 0 14px rgba(var(--acc-rgb),.35)); } .d2-orbit .core b{ display:block; font-family:var(--font-head); font-weight:600; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:.35rem; } .d2-orbit .spin{ position:absolute; inset:0; animation:d2spin 70s linear infinite; } .d2-orbit .node{ position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; transform:rotate(var(--a)) translateY(calc(var(--orbR)*-1)); } .d2-orbit .node>a{ display:grid; place-items:center; gap:2px; width:52px; height:52px; text-decoration:none; transform:rotate(calc(var(--a)*-1)); animation:d2spinCC 70s linear infinite; } /* counter-spin keeps each node upright: the keyframes must carry the node's own -a offset, because an animation REPLACES the static transform entirely */ @keyframes d2spinCC{ from{ transform:rotate(calc(var(--a)*-1)); } to{ transform:rotate(calc(var(--a)*-1 - 360deg)); } } /* circular medallions — engraved double-ring, graphite radial body, platinum glyph */ .d2-orbit .node .n-ic{ width:48px; height:48px; display:grid; place-items:center; font-size:1.05rem; color:var(--acc); background:radial-gradient(120% 120% at 32% 22%, var(--surface2), var(--bg3) 72%); border:1px solid var(--line2); border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 2px 8px rgba(0,0,0,.55), 0 12px 26px -14px rgba(0,0,0,.9); transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast), box-shadow var(--dur-fast); } .d2-orbit .node .n-ic svg{ width:21px; height:21px; } .d2-orbit .node .n-lb{ font-family:var(--font-head); font-size:.52rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .d2-orbit .node>a:hover .n-ic, .d2-orbit .node>a:focus-visible .n-ic{ transform:scale(1.16); border-color:rgba(var(--acc-rgb),.6); box-shadow:var(--glow); } .d2-orbit .node.current .n-ic{ background:linear-gradient(150deg,var(--acc),var(--acc2)); color:var(--on-navy); border-color:transparent; box-shadow:0 0 0 5px rgba(var(--acc-rgb),.14), 0 0 28px rgba(var(--acc-rgb),.35), inset 0 1px 0 rgba(255,255,255,.35); } .d2-orbit .node.current .n-lb{ color:var(--acc); } .d2-orbit-band:hover .spin, .d2-orbit-band:hover .node>a{ animation-play-state:paused; } @keyframes d2spin{ to{ transform:rotate(360deg); } } /* cycling caption */ .d2-orbit-cap{ position:relative; min-height:3em; width:100%; text-align:center; margin:.5rem auto 0; max-width:52ch; align-self:center; } .d2-orbit-cap span{ position:absolute; inset:0; width:100%; display:block; opacity:0; transform:translateY(6px); transition:opacity .6s var(--ease), transform .6s var(--ease); font-size:.92rem; line-height:1.5; color:var(--muted); } .d2-orbit-cap span b{ color:var(--ink); font-family:var(--font-head); font-weight:600; } .d2-orbit-cap span.on{ opacity:1; transform:none; } /* --- [B] you are here --- */ .d2-here{ gap:1.1rem; } .d2-here .ttl{ display:flex; align-items:center; gap:16px; margin-top:.2rem; } .d2-here .mark{ width:54px; height:54px; flex:0 0 auto; color:var(--acc); } .d2-here .mark svg{ width:100%; height:100%; filter:drop-shadow(0 0 16px rgba(var(--acc-rgb),.3)); } .d2-here p.desc{ margin:0; color:var(--txt); font-size:1.02rem; line-height:1.75; max-width:44ch; } .d2-here .ft{ margin-top:auto; padding-top:1.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:14px; } .d2-here::after{ content:""; position:absolute; right:-12%; bottom:-16%; width:56%; aspect-ratio:1/1; background:radial-gradient(50% 50% at 50% 50%, rgba(var(--acc-rgb),.09), transparent 70%); pointer-events:none; } @media(prefers-reduced-motion:reduce){ .d2-orbit .spin, .d2-orbit .node>a{ animation:none !important; } .d2-orbit-cap span{ position:static; opacity:1; transform:none; display:none; } .d2-orbit-cap span.on{ display:block; } } /* ===================== CINEMATIC INTRO ===================== */ .d2-intro{ position:fixed; inset:0; z-index:10000; background:var(--bg); display:grid; place-items:center; overflow:hidden; transition:transform 620ms var(--ease), opacity 620ms var(--ease); } .d2-intro.done{ transform:translateY(-102%); opacity:0; pointer-events:none; } .d2-intro canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; } .d2-intro .d2-fallback{ position:absolute; inset:0; background:radial-gradient(60vw 46vw at 50% 30%, rgba(var(--acc-rgb),.22), transparent 62%), var(--bg); animation:d2fog 3s var(--ease) infinite alternate; } @keyframes d2fog{ to{ transform:scale(1.12) translateY(-3%); opacity:.8; } } .d2-intro-mark{ position:relative; z-index:2; text-align:center; padding:20px; } .d2-intro-mark .em{ display:block; font-family:var(--font-head); letter-spacing:.42em; text-transform:uppercase; font-size:.7rem; color:var(--acc); opacity:0; transform:translateY(8px); animation:d2up .8s var(--ease) .15s forwards; } .d2-intro-mark .wm{ display:block; font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-size:clamp(2.6rem,8vw,6rem); line-height:1; color:var(--ink); margin:.15em 0 0; opacity:0; transform:translateY(16px); animation:d2up 1s var(--ease) .3s forwards; } .d2-intro-mark .wm i{ font-style:italic; background:linear-gradient(120deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .d2-intro-mark .ln{ display:block; width:0; height:1px; margin:1.1em auto 0; background:linear-gradient(90deg,transparent,var(--acc),transparent); animation:d2line 1.1s var(--ease) .7s forwards; } .d2-skip{ position:absolute; right:20px; bottom:18px; z-index:3; font-family:var(--font-head); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--window); border:1px solid var(--line); border-radius:var(--pill); padding:.55em 1.1em; cursor:pointer; transition:color var(--dur-fast), border-color var(--dur-fast); } .d2-skip:hover{ color:var(--ink); border-color:var(--line2); } @keyframes d2up{ to{ opacity:1; transform:none; } } @keyframes d2line{ to{ width:min(240px,60vw); } } @keyframes d2fade{ from{ opacity:0; } } /* ===================== SHARED PROTOTYPE / PAGE PRIMITIVES (d2-*) ===================== */ .d2-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,40px); } .d2-glass{ background:var(--glass); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); } .d2-btn{ font-family:var(--font-head); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.5em; padding:14px 26px; border-radius:var(--pill); font-size:.98rem; cursor:pointer; border:1px solid transparent; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur), border-color var(--dur); } .d2-btn:hover{ transform:translateY(-2px); } .d2-btn.primary{ background:linear-gradient(135deg,var(--acc),var(--acc2)); color:var(--on-navy); box-shadow:var(--glow); } .d2-btn.ghost{ color:var(--ink); border-color:var(--line2); background:var(--window); } /* primary-CTA unification: base sites often hardcode a light/ink pill button; loading last, these win by specificity+order and repaint primary CTAs in the site accent (matte-safe). */ .d2-btn.primary, a.btn.primary, button.btn.primary, .btn.btn-lg:not(.ghost):not(.btn-ghost):not(.btn-outline):not(.btn-secondary){ background:linear-gradient(135deg,var(--acc),var(--acc2)); color:var(--on-navy); border-color:transparent; } .d2-eyebrow{ font-family:var(--font-head); letter-spacing:var(--tracking); text-transform:uppercase; font-size:.72rem; color:var(--acc); font-weight:600; } .reveal,[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.in,[data-reveal].in{ opacity:1; transform:none; } /* ===================== PREMIUM FINISH (suite-wide) ===================== Selection, focus, scrollbars, glass edge-light, button sheen, core glow. */ ::selection{ background:rgba(var(--acc-rgb),.3); color:var(--ink); } :focus-visible{ outline:2px solid rgba(var(--acc-rgb),.65); outline-offset:2px; } html{ scrollbar-width:thin; scrollbar-color:#26262c transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:#232329; border-radius:99px; border:3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover{ background:#33333b; } ::-webkit-scrollbar-track{ background:transparent; } html[data-theme="light"]{ scrollbar-color:#c9c7c0 transparent; } html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#cfcdc6; } /* glass panes get a 1px top edge-light — reads as machined, not flat */ .d2-orbit-band .d2-orbit-panel, .d2-net-card, .d2-glass{ box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.055); } html[data-theme="light"] .d2-orbit-band .d2-orbit-panel, html[data-theme="light"] .d2-net-card, html[data-theme="light"] .d2-glass{ box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.8); } /* buttons: inner hairline + primary sheen */ .d2-btn.ghost{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .d2-btn.primary{ box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.34); } /* aperture core breathes softly */ .d2-orbit .core svg, .d2-here .mark svg{ animation:d2breathe 5.5s var(--ease) infinite alternate; } @keyframes d2breathe{ from{ filter:drop-shadow(0 0 10px rgba(var(--acc-rgb),.22)); } to{ filter:drop-shadow(0 0 24px rgba(var(--acc-rgb),.5)); } } /* current-node halo ring */ .d2-orbit .node.current .n-ic{ box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16), inset 0 1px 0 rgba(255,255,255,.28); } /* refined display-type rhythm for the band headline */ .d2-orbit-panel h2{ font-variation-settings:"opsz" 40; } @media(prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } .reveal,[data-reveal]{ opacity:1 !important; transform:none !important; } .d2-intro{ display:none !important; } }