/* ============================================================================ KLAVITY MARKETING KIT · kit.css Shared design tokens, page shell, and components for every marketing page. Source of truth for the brand: site/_walkthroughs-reference.html + site/index.html. Mobile-first · prefers-reduced-motion respected · :focus-visible styled. Each PAGE sets its phase colour via etc. ========================================================================== */ /* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────── */ :root{ /* surfaces (ink = cream paper background, paper = ink text) */ --ink:#f5f3ee; /* page background (cream) */ --ink-2:#fffdf8; /* cards / panels / screens */ --ink-3:#efeae0; /* subtle insets, chrome bars */ --paper:#19140f; /* primary text (ink) */ --paper-dim:#574f45; /* secondary text */ --paper-faint:#6b6055; /* muted text / eyebrows — WCAG AA (5.5:1 on cream) */ --line:rgba(25,20,15,.12); --line-2:rgba(25,20,15,.07); /* phase accents — each ENCODES a phase. BRIGHT vars are for fills / borders / backgrounds / icons. The *-text vars are DARKENED so the colour clears WCAG 4.5:1 when used as TEXT/links/headings/chips on cream or tinted bg. (verified ratios on cream #f5f3ee: indigo 7.13, rose 5.44, green 4.95, amber 5.64, red 5.05 on #eceef2). */ --indigo:#6366f1; /* Snap */ --indigo-deep:#4f46e5; --indigo-text:#4338ca; /* indigo as text (7.13:1 cream) */ --rose:#db2777; /* Sims */ --rose-text:#be185d; /* rose as text (5.44:1 cream) */ --green:#0f9d6b; /* AutoSim */ --green-text:#047857; /* green as text (4.95:1 cream) */ --amber:#d98324; /* heal-state */ --amber-text:#8a5410; /* amber as text (5.64:1 cream) */ --red:#d6463a; /* fail */ --red-text:#b02418; /* red as text (5.81:1 on #eceef2) */ /* per-page accent — OVERRIDE these on per phase. Defaults to Snap. --accent = BRIGHT, for fills / borders / topbar / button bg --accent-text = DARK, for the SAME accent used as TEXT (headings/links) */ --accent:var(--indigo); --accent-text:var(--indigo-text); /* type */ --display:'Fraunces',serif; --body:'Hanken Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; /* motion */ --ease:cubic-bezier(.2,.7,.2,1); } /* ── 2. RESET / BASE ──────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--ink); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } @media(min-width:760px){ body{font-size:17px} } a{color:inherit;text-decoration:none} /* Links must be distinguishable by more than colour (WCAG 1.4.1): content/prose anchors get a non-colour underline affordance. Nav, buttons, footer chrome and the decorative sim-walk anchors keep their own role cues. */ a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:2px} p a,li a,.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} .nav-links a,.nav-links a:hover,.nav-links a:focus-visible, .btn,.btn:hover,.btn:focus-visible, .foot-in a,.foot-in a:hover,.foot-in a:focus-visible, .brand,.brand:hover,.brand:focus-visible, .parc a,.path a,.waypoint a, a:has(> .sim),a:has(> .parc-sim){text-decoration:none} img,svg{display:block;max-width:100%} ul{list-style:none} button{font:inherit;cursor:pointer} /* warm ambient atmosphere on the page (very subtle grid + accent glow) */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(120% 70% at 50% -8%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 60%), radial-gradient(80% 60% at 100% 108%, rgba(217,131,36,.05), transparent 60%), linear-gradient(to right, var(--line-2) 1px, transparent 1px) 0 0/46px 46px, linear-gradient(to bottom, var(--line-2) 1px, transparent 1px) 0 0/46px 46px; opacity:.7; } .wrap{max-width:1180px;margin:0 auto;padding:0 22px;position:relative;z-index:2} @media(min-width:760px){ .wrap{padding:0 28px} } /* phase-progress topbar (uses the page accent) */ .topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:var(--accent)} /* ── 3. TYPE HELPERS / SCALE ──────────────────────────────────────────── */ .mono{font-family:var(--mono);font-weight:500} .eyebrow,.tag{ font-family:var(--mono);font-size:11.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint); } h1{ font-family:var(--display);font-weight:440; font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.025em; font-optical-sizing:auto; } h1 em{font-style:italic;color:var(--amber-text);font-variation-settings:'WONK' 1,'SOFT' 30} h1 .accent,h1 .nm{color:var(--accent-text)} /* section scaffold */ section{padding:72px 0;position:relative} @media(min-width:760px){ section{padding:90px 0} } .sec-head{max-width:680px;margin-bottom:40px} .sec-head h2{ font-family:var(--display);font-weight:460; font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.02em; margin:12px 0 14px; } .sec-head h2 em,.sec-head h2 .nm{font-style:italic;color:var(--accent-text)} .sec-head p{font-size:17px;color:var(--paper-dim);max-width:60ch} h3{font-family:var(--display);font-weight:540;letter-spacing:-.01em} /* ── 4. PAGE SHELL · STICKY NAV ───────────────────────────────────────── */ .nav{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--ink) 80%,transparent); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line-2); } .nav-in{display:flex;align-items:center;gap:18px;height:62px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em} .brand .mark{ width:28px;height:28px;border-radius:8px;flex:none; background:#161310;color:#fff;display:grid;place-items:center; box-shadow:0 4px 10px rgba(0,0,0,.15); transition:transform .45s var(--ease); } .brand:hover .mark{transform:rotate(-12deg) scale(1.08)} .nav-links{display:none;gap:4px;margin-left:14px} @media(min-width:880px){ .nav-links{display:flex} } .nav-links a{ position:relative;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em; color:var(--paper-dim);padding:6px 11px;border-radius:99px;border:1px solid transparent; transition:color .2s,border-color .2s; } .nav-links a:hover{border-color:var(--line);color:var(--paper)} .nav-links a.s-snap:hover{color:var(--indigo)} .nav-links a.s-sims:hover{color:var(--rose)} .nav-links a.s-autosim:hover{color:var(--green)} .nav-links a[aria-current="page"]{color:var(--accent-text);border-color:var(--line)} .nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center} /* ── 5. BUTTONS ───────────────────────────────────────────────────────── */ .btn{ font-family:var(--body);font-weight:600;font-size:14px; padding:10px 18px;border-radius:99px;border:1px solid transparent; display:inline-flex;align-items:center;gap:8px;white-space:nowrap; transition:transform .12s var(--ease),background .2s,border-color .2s,gap .2s,box-shadow .2s; } .btn:hover{gap:11px} .btn:active{transform:translateY(1px)} .btn-primary{ color:#fff;background:var(--accent); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent); position:relative;overflow:hidden; } .btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,#000);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 34%,transparent)} .btn-primary::after{ content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.4),transparent 75%); transform:translateX(-130%); } .btn-ghost{color:var(--paper);background:var(--ink-2);border-color:var(--line)} .btn-ghost:hover{border-color:var(--paper-faint);background:var(--ink-3)} /* ── 6. CHIPS / PILLS ─────────────────────────────────────────────────── */ .chip{ display:inline-flex;align-items:center;gap:5px; font-family:var(--mono);font-size:9.5px; padding:3px 8px;border-radius:99px;border:1px solid var(--line); background:var(--ink-2);color:var(--paper-dim);white-space:nowrap; } .chip.ok{color:var(--green-text);border-color:rgba(15,157,107,.4);background:rgba(15,157,107,.06)} .chip.amber{color:var(--amber-text);border-color:rgba(217,131,36,.45);background:rgba(217,131,36,.07)} .chip.red{color:var(--red-text);border-color:rgba(214,70,58,.4);background:rgba(214,70,58,.06)} .chip.indigo{color:var(--indigo-text);border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.06)} .chip.rose{color:var(--rose-text);border-color:rgba(219,39,119,.4);background:rgba(219,39,119,.06)} /* uppercase status pill (for tickets/dashboards) */ .pill{ font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;padding:2px 6px;border-radius:5px; } .pill.g{background:rgba(15,157,107,.13);color:var(--green)} .pill.a{background:rgba(217,131,36,.15);color:var(--amber)} .pill.r{background:rgba(214,70,58,.13);color:var(--red)} .pill.i{background:rgba(99,102,241,.13);color:var(--indigo)} /* persona trait tags (Sims) */ .trait{font-size:9.5px;font-family:var(--mono);padding:2px 7px;border-radius:5px;display:inline-block} .trait.pain{background:rgba(214,70,58,.1);color:var(--red)} .trait.want{background:rgba(99,102,241,.1);color:var(--indigo)} .trait.love{background:rgba(15,157,107,.12);color:var(--green)} /* ── 7. THE SIM CHARACTER (circle + legs) ─────────────────────────────── */ .sim{display:inline-block;position:relative;width:var(--sz,30px);height:var(--sz,30px)} .sim i{ position:absolute;inset:0;border-radius:50%; /* darken the bright accent for the fill so the small WHITE initials clear WCAG 4.5:1 on every phase colour (worst case amber ≈ 4.7:1) while keeping the playful, saturated trail look. The legs below stay bright. */ background:color-mix(in srgb,var(--sc,var(--accent)) 76%,#000); display:grid;place-items:center;color:#fff; font-family:var(--mono);font-size:calc(var(--sz,30px)*.36);font-weight:600;font-style:normal; box-shadow:0 4px 12px rgba(0,0,0,.18); } .sim::before,.sim::after{ content:"";position:absolute;bottom:calc(var(--sz,30px)*-.22); width:2px;height:calc(var(--sz,30px)*.28);background:var(--sc,var(--accent));border-radius:2px; transform-origin:top center; } .sim::before{left:38%;transform:rotate(8deg)} .sim::after{right:38%;transform:rotate(-8deg)} /* ── 8. THE TRAIL (Sim walking a line through the phases) ──────────────── */ .trail{position:relative;display:grid;grid-template-columns:1fr;gap:8px} @media(min-width:760px){ .trail{grid-template-columns:1fr 1fr 1fr} } .trail-line{ display:none;position:absolute;left:8%;right:8%;top:34px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--indigo) 0 33%,var(--rose) 33% 66%,var(--green) 66% 100%); opacity:.85;transform-origin:left center; } @media(min-width:760px){ .trail-line{display:block} } /* the line "draws in" when revealed */ .trail-line.reveal{transform:scaleX(0);opacity:0} .trail-line.reveal.in{transform:scaleX(1);opacity:.85;transition:transform 1.1s var(--ease) .1s,opacity .4s} .waypoint{position:relative;padding:0 16px;text-align:center} .waypoint .sim{margin:0 auto} .waypoint .ph{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);margin-top:14px} .waypoint h2,.waypoint h3{font-family:var(--display);font-weight:520;font-size:24px;line-height:1.1;letter-spacing:-.01em;margin:2px 0 0;color:color-mix(in srgb,var(--sc,var(--accent)) 66%,#000)} .waypoint p{font-size:13.5px;color:var(--paper-dim);margin:6px auto 0;max-width:24ch} .waypoint.a1{--sc:var(--indigo)} .waypoint.a2{--sc:var(--rose)} .waypoint.a3{--sc:var(--green)} /* ── 9. NUMBERED CRITICAL-PATH ROW (.path / .step) ────────────────────── */ .path{margin:36px 0 0;display:grid;gap:18px} @media(min-width:900px){ .path{grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch} } .path .step{position:relative;display:flex;flex-direction:column;gap:0} .path .step .n{display:flex;align-items:center;gap:9px;margin-bottom:11px} .path .step .n b{ width:23px;height:23px;border-radius:99px;background:var(--accent);color:#fff; display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600;flex:none; } .path .step .n span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint)} /* connector arrow — horizontal on desktop, stacks to vertical on mobile */ .path .step:not(:last-child)::after{content:"→";position:absolute;color:var(--accent);opacity:.5;font-size:18px} @media(min-width:900px){ .path .step:not(:last-child)::after{top:6px;right:-13px} } @media(max-width:899px){ .path{gap:30px} .path .step:not(:last-child)::after{content:"↓";left:11px;bottom:-16px} } .cap{margin:13px 2px 0} .cap h3,.cap h4{margin:0;font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:-.01em} .cap p{margin:4px 0 0;font-size:13.5px;color:var(--paper-dim);line-height:1.5} /* under-the-hood mono note */ /* ── 10. BROWSER MINI-SCREEN (.screen + chrome/body) ──────────────────── */ .screen{ background:var(--ink-2);border:1px solid var(--line);border-radius:13px;overflow:hidden; box-shadow:0 1px 0 rgba(25,20,15,.04),0 14px 30px -22px rgba(25,20,15,.5); height:188px;position:relative; } .screen .chrome{height:24px;background:var(--ink-3);border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:5px;padding:0 9px} .screen .chrome i{width:7px;height:7px;border-radius:99px;background:#d7cfc2} .screen .chrome .url{margin-left:8px;font-family:var(--mono);font-size:9px;color:var(--paper-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .screen .body{padding:12px;position:relative;height:calc(100% - 24px)} /* skeleton content lines */ .ln{height:7px;border-radius:3px;background:#eee7da} .ln.s{width:46%}.ln.m{width:70%}.ln.l{width:90%} .row{display:flex;gap:6px;align-items:center} /* right-click context menu (Snap step 1) */ .ctx{position:absolute;right:18px;top:42px;background:var(--ink-2);border:1px solid var(--line);border-radius:9px;padding:5px;box-shadow:0 16px 30px -16px rgba(25,20,15,.5);width:132px} .ctx div{font-size:11px;padding:6px 9px;border-radius:6px;display:flex;gap:7px;align-items:center;color:var(--paper-dim)} .ctx div.hot{background:rgba(99,102,241,.1);color:var(--indigo);font-weight:600} .cursor{position:absolute;right:24px;top:74px;font-size:15px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))} /* composer modal (Snap step 2) — dark sheet over the page */ .modal{position:absolute;inset:14px;background:var(--paper);color:var(--ink);border-radius:11px;padding:11px;display:flex;flex-direction:column;gap:8px} .modal .tabs{display:flex;gap:5px} .modal .tabs b{flex:1;text-align:center;font-size:10.5px;font-weight:600;padding:5px;border-radius:6px;background:rgba(245,243,238,.1);color:var(--paper-faint)} .modal .tabs b.on{background:var(--accent);color:#fff} .modal .shot{height:38px;border-radius:7px;background:linear-gradient(135deg,#3a322a,#221c16);border:1px solid rgba(245,243,238,.12);position:relative;overflow:hidden} .modal .shot::after{content:"FULL-PAGE CAPTURE";position:absolute;left:7px;bottom:5px;font-family:var(--mono);font-size:7.5px;color:rgba(245,243,238,.5)} .modal .ta{flex:1;border-radius:7px;background:rgba(245,243,238,.06);border:1px solid rgba(245,243,238,.1);font-family:var(--mono);font-size:9px;color:rgba(245,243,238,.6);padding:6px} .modal .sub{text-align:center;font-size:10.5px;font-weight:600;padding:6px;border-radius:7px;background:var(--accent);color:#fff} /* on-page reaction bubbles (Sims step 3) */ .react .bubble{position:absolute;background:var(--paper);color:var(--ink);border-radius:9px;padding:7px 8px;font-size:9px;line-height:1.35;max-width:118px;box-shadow:0 12px 26px -16px rgba(0,0,0,.6)} .react .bubble .who{font-family:var(--mono);font-size:7.5px;color:rgba(245,243,238,.6);margin-bottom:2px} .react .hi{position:absolute;border:2px solid var(--accent);border-radius:6px;background:color-mix(in srgb,var(--accent) 8%,transparent)} /* heal diff + walk rows (AutoSim) */ .diff{font-family:var(--mono);font-size:10px;display:flex;flex-direction:column;gap:5px;margin-top:4px} .diff .from{color:var(--red);text-decoration:line-through;opacity:.8} .diff .to{color:var(--green)} .walkrow{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;padding:5px 0;border-bottom:1px solid var(--line-2)} .walkrow:last-child{border:0} .walkrow .ix{width:15px;color:var(--paper-faint)} .walkrow .nm{flex:1;color:var(--paper-dim)} /* dashboard mini (AutoSim step 5) */ .dash .hd{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;color:var(--paper-faint);margin-bottom:7px} .dash .tr{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--ink-2)} .dash .tr .nm{flex:1;font-size:10px;font-weight:600} .dash .tr .sel{font-family:var(--mono);font-size:8px;color:var(--paper-faint)} /* ── 11. CARDS · TICKET · PERSONA ─────────────────────────────────────── */ .card{ background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:24px; position:relative;overflow:hidden; box-shadow:0 14px 40px rgba(17,17,19,.06); transition:transform .2s var(--ease),border-color .2s,box-shadow .2s; } .card:hover{transform:translateY(-4px);border-color:var(--paper-faint);box-shadow:0 22px 46px rgba(0,0,0,.08)} /* a filed ticket */ .tkt{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--ink-2)} .tkt .top{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8.5px;color:var(--paper-faint)} .tkt h4,.tkt h5{margin:6px 0 0;font-family:var(--body);font-size:11.5px;font-weight:600;line-height:1.3} .tkt .q{margin:6px 0 0;font-style:italic;font-size:10px;color:var(--paper-dim);border-left:2px solid var(--c,var(--accent));padding-left:7px} /* a persona row */ .pc{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:8px;background:var(--ink-2)} .pc .av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:10px;font-weight:600} .pc .nm{font-size:11px;font-weight:600;line-height:1.1} .pc .rl{font-size:9px;color:var(--paper-faint);font-family:var(--mono)} /* ── 12. FOOTER ───────────────────────────────────────────────────────── */ .footer{border-top:1px solid var(--line);padding:48px 0;color:var(--paper-faint);margin-top:40px} .foot-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px} .foot-in .brand{font-size:17px} .foot-in a{color:var(--paper-dim)} .foot-in a:hover{color:var(--paper)} .foot-in .sp{margin-left:auto} @media(max-width:620px){ .foot-in .sp{margin-left:0;width:100%} } /* ── 13. REVEAL ANIMATIONS (driven by kit.js IntersectionObserver) ────── */ /* Default = no motion: .reveal is fully visible so content is never hidden if JS fails or motion is reduced. kit.js adds `data-anim` only when motion is allowed, which arms the hidden start state below. */ .reveal[data-anim]{opacity:0;transform:translateY(18px);will-change:transform,opacity} .reveal[data-anim].in{ opacity:1;transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--d,0s); } @media (prefers-reduced-motion:no-preference){ /* hover lifts */ .card,.btn,.path .step{will-change:transform} /* the Sim character "walks" — a gentle bob + sway */ .sim.walk{animation:simWalk 1.6s ease-in-out infinite alternate} @keyframes simWalk{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)}} /* leg pump for a more lively walk */ .sim.walk::before{animation:legA .42s ease-in-out infinite alternate} .sim.walk::after{animation:legB .42s ease-in-out infinite alternate} @keyframes legA{from{transform:rotate(-2deg)}to{transform:rotate(22deg)}} @keyframes legB{from{transform:rotate(2deg)}to{transform:rotate(-22deg)}} /* ambient hero glow breathes */ .hero-ambient{animation:ambient 9s ease-in-out infinite alternate} @keyframes ambient{from{opacity:.55;transform:translate(0,0) scale(1)}to{opacity:.85;transform:translate(2%, -2%) scale(1.06)}} /* live status dot pulse */ .dot.live{animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} } /* ambient hero element (optional, place inside a hero/section). MUST be fully out of layout flow so it can never cause CLS: absolutely positioned overlay pinned to its (position:relative) container with a fixed footprint. Its entrance/breathe animation is COMPOSITED-ONLY (opacity + transform) — it never touches width/height/top/left/margin, so no reflow. */ .hero-ambient{ position:absolute;inset:0;pointer-events:none;z-index:0; /* gradient lives in the top band of the overlay; no size animation */ background:radial-gradient(60% 45% at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%); filter:blur(8px); /* start state is pure opacity so first paint never shifts layout */ opacity:.7;will-change:opacity,transform; } /* every hero/section that hosts a .hero-ambient is its positioning context */ .hero,section{position:relative} /* a small "live" status dot */ .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;flex:none} /* ── 14. ICON HELPER ──────────────────────────────────────────────────── */ /* Inline SVG icons produced by KlavityKit.icon() / icons.generated.js. display:inline-block + vertical-align match the Lucide CSS convention so icons sit on the text baseline without extra markup. */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; stroke: currentColor; } .icon[width] { width: auto; height: auto; } /* honor explicit px size from icon() */ /* ── 15. ACCESSIBILITY ────────────────────────────────────────────────── */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:5px; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:0 0 8px 0;font-weight:600; } .skip-link:focus{left:0} /* hard stop on all motion when the user asks for reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .reveal[data-anim]{opacity:1!important;transform:none!important} }