/* ============================================================ TakuraTech — Design tokens THEMES — every colour the site paints with is declared here and nowhere else, so a theme is a token swap rather than a second stylesheet. :root is LIGHT, which makes light the default in the truest sense: it is what the page renders as before a single line of JavaScript runs, and what it renders as if none ever does. The [data-theme="dark"] block below re-states the same names, and js/script.js writes that attribute onto when the visitor picks dark. The inline snippet in each page's replays a stored choice before first paint, so neither theme ever flashes. ============================================================ */ :root{ color-scheme:light; /* ---- surfaces ---- */ --bg: #F6F8FC; --bg-elev: #FFFFFF; --bg-elev-2: #F0F4FA; --bg-elev-3: #E3E9F4; --line: #DCE3EF; --line-soft: #E8EEF7; /* ---- accent ---- */ --blue: #2358E0; --blue-bright: #1B49C4; --blue-dim: #B9CCF5; --blue-glow: rgba(35,88,224,.22); --blue-hover: #1B49C4; --green: #0E7A4A; /* the "live / done" accent — used sparingly */ --green-glow: rgba(14,122,74,.16); --red: #D8453F; --red-text: #BE2F2A; --red-glow: rgba(216,69,63,.18); /* ---- text ---- --text-faint carries the small mono labels, so it is set by contrast rather than by eye: the dark theme's #57607C inverted lands around 3.5:1 on #F6F8FC — legible on a good monitor and not on a phone in daylight. #616E88 clears 4.5:1 and still reads as the quiet tier. */ --text: #0C1526; --text-muted: #4C5871; --text-faint: #616E88; /* ---- translucent chrome ---- Bars, pills and scrims that sit over the page. These cannot be derived from --bg with an alpha: a white wash over a navy page reads as a bug, so each theme states its own. */ --nav-bg: rgba(246,248,252,.86); --glass: rgba(255,255,255,.9); --glass-strong: rgba(255,255,255,.78); --backdrop: rgba(16,26,46,.34); --scrim: rgba(246,248,252,.94); --scrim-0: rgba(246,248,252,0); --select-bg: #C9DAFF; --select-fg: #0C1526; /* ---- atmosphere: the fixed grid + glow behind everything ---- The glow is what carries the brand across both themes; the grid is what would turn into hatching on white, so on light it is the opacity that drops while --line-soft stays a real, visible line. */ --glow-1: rgba(46,107,255,.11); --glow-2: rgba(46,107,255,.06); --glow-panel: rgba(46,107,255,.10); --grid-op: .85; /* ---- blue washes behind cards and selected states ---- Alpha over whatever surface is underneath, so both themes share them. */ --blue-tint: rgba(46,107,255,.08); --blue-tint-2: rgba(46,107,255,.10); /* ---- depth ---- A black shadow on a white page reads as dirt, so light tints its shadows blue-grey. Dark re-states all five as near-black below. */ --shadow-card: 0 24px 60px -22px rgba(19,32,60,.20); --shadow-panel: -24px 0 60px -20px rgba(19,32,60,.16); --shadow-modal: 0 40px 90px -30px rgba(19,32,60,.26); --shadow-toast: 0 20px 50px -18px rgba(19,32,60,.22); --shadow-pill: 0 12px 34px rgba(19,32,60,.16); /* type */ --f-display: 'Space Grotesk', sans-serif; --f-body: 'Inter', sans-serif; --f-mono: 'JetBrains Mono', monospace; /* layout */ --maxw: 1180px; --pad: clamp(20px, 5vw, 64px); --radius: 14px; --radius-sm: 8px; /* ---- motion ---- One scale, used everywhere. Hover/state changes resolve inside 200ms so the UI feels answered rather than animated; entrances get more room. */ --ease: cubic-bezier(.22,.9,.32,1); --ease-out: cubic-bezier(.16,1,.3,1); /* entrances — decelerating */ --ease-snap: cubic-bezier(.34,.8,.36,1); /* hover — quick off the mark */ --t-fast: 140ms; /* colour, border, opacity */ --t-base: 200ms; /* hover transforms, small state */ --t-slow: 320ms; /* drawers, modals, nav chrome */ --t-reveal: 520ms; /* scroll entrances */ --t-page: 440ms; /* page-to-page slide */ } /* ============================================================ Dark theme — the same token names, re-stated. Deep navy + electric blue: the studio's original identity, kept as the opt-in. Nothing below this block knows which theme is on. The accent brightens rather than repeats — #1B49C4 reads as an accent on white and disappears into navy. ============================================================ */ :root[data-theme="dark"]{ color-scheme:dark; --bg: #070B14; --bg-elev: #0D1424; --bg-elev-2: #121B30; --bg-elev-3: #16203A; --line: #1D2740; --line-soft: #151E33; --blue: #2E6BFF; --blue-bright: #6C93FF; --blue-dim: #16337A; --blue-glow: rgba(46,107,255,.35); --blue-hover: #3D78FF; --green: #45D48A; --green-glow: rgba(69,212,138,.18); --red: #FF6B6B; --red-text: #FF8585; --red-glow: rgba(255,107,107,.22); --text: #EEF2FA; --text-muted: #8E98B3; --text-faint: #57607C; --nav-bg: rgba(7,11,20,.82); --glass: rgba(13,20,36,.9); --glass-strong: rgba(7,11,20,.72); --backdrop: rgba(3,6,14,.66); --scrim: rgba(7,11,20,.88); --scrim-0: rgba(7,11,20,0); --select-bg: var(--blue-dim); --select-fg: #fff; --glow-1: rgba(46,107,255,.16); --glow-2: rgba(46,107,255,.08); --glow-panel: rgba(46,107,255,.18); --grid-op: .5; --shadow-card: 0 30px 80px -20px rgba(0,0,0,.55); --shadow-panel: -24px 0 60px -20px rgba(0,0,0,.6); --shadow-modal: 0 40px 100px -30px rgba(0,0,0,.8); --shadow-toast: 0 20px 50px -18px rgba(0,0,0,.75); --shadow-pill: 0 12px 34px rgba(0,0,0,.5); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:104px; /* keeps the gutter reserved so locking the scroll for the menu/modal cannot shift the page sideways. --sbw is the JS fallback for engines without scrollbar-gutter; it stays 0 everywhere else. */ scrollbar-gutter:stable; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } /* Zeroing the delays matters as much as zeroing the durations: an instant animation that still waits 190ms behind animation-delay, or a stagger that still waits its transition-delay, is exactly the drip-feed the setting asks us not to do. */ *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; } } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* faint grid + glow atmosphere behind everything */ body::before{ content:""; position:fixed; inset:0; background-image: radial-gradient(600px 400px at 85% -5%, var(--glow-1), transparent 60%), radial-gradient(500px 350px at 5% 15%, var(--glow-2), transparent 60%), linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size:auto, auto, 56px 56px, 56px 56px; background-position:0 0,0 0,-1px -1px,-1px -1px; opacity:var(--grid-op); pointer-events:none; z-index:0; /* four stacked gradients behind every scroll frame — pinning it to its own layer keeps it out of the repaint path while the page moves */ will-change:transform; transform:translateZ(0); } h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; margin:0; color:var(--text); } p{ margin:0; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } img,svg{ display:block; max-width:100%; } button{ font-family:inherit; } .container{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); position:relative; z-index:1; } .section{ padding:96px 0; position:relative; z-index:1; } .section-head{ max-width:640px; margin-bottom:56px; } .section-head h2{ font-size:clamp(28px,4vw,42px); } .section-head p{ color:var(--text-muted); margin-top:14px; font-size:17px; } /* -------- buttons -------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-body); font-weight:600; font-size:15px; padding:13px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform var(--t-base) var(--ease-snap), box-shadow var(--t-base) var(--ease-snap), background var(--t-fast) linear, border-color var(--t-fast) linear, color var(--t-fast) linear; white-space:nowrap; } .btn-primary{ background:var(--blue); color:#fff; box-shadow:0 0 0 0 var(--blue-glow); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -6px var(--blue-glow); background:var(--blue-hover); } .btn-ghost{ background:transparent; border-color:var(--line); color:var(--text); } .btn-ghost:hover{ border-color:var(--blue); color:var(--blue-bright); transform:translateY(-2px); } .btn-block{ width:100%; } /* pressed state — declared after both variants so it outranks their :hover transform. The small physical acknowledgement most sites skip. */ .btn:active{ transform:translateY(0) scale(.97); transition-duration:60ms; } /* -------- navbar -------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:130; padding:18px 0; transition:background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), padding var(--t-slow) var(--ease), opacity var(--t-base) var(--ease), visibility 0s linear 0s; border-bottom:1px solid transparent; } .nav.is-scrolled{ background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line); padding:12px 0; } .nav .container{ display:flex; align-items:center; justify-content:space-between; } .brand{ display:flex; align-items:center; gap:0; font-family:var(--f-mono); font-weight:500; font-size:17px; color:var(--text); z-index:120; } .brand .mark{ width:34px; height:34px; margin-right:10px; display:flex; align-items:center; justify-content:center; } .brand .mark svg, .brand .mark img{ width:100%; height:100%; } .brand strong{ color:var(--text); font-weight:600; } .brand span.dim{ color:var(--blue-bright); } .nav-links{ display:flex; align-items:center; gap:36px; } .nav-links a{ font-size:14.5px; font-weight:500; color:var(--text-muted); position:relative; padding:4px 0; transition:color var(--t-fast) linear; } .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--blue-bright); transform:scaleX(0); transform-origin:0 50%; transition:transform var(--t-base) var(--ease-snap); } .nav-links a:hover, .nav-links a.active{ color:var(--text); } .nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); } .nav-cta{ display:flex; align-items:center; gap:22px; } /* hamburger — three lines */ .burger{ display:none; position:relative; width:32px; height:32px; background:none; border:none; cursor:pointer; z-index:120; padding:0; } .burger span{ position:absolute; left:4px; right:4px; height:2px; border-radius:2px; background:var(--text); transition:transform var(--t-base) var(--ease-snap), background var(--t-fast) linear; } .burger:hover span{ background:var(--blue-bright); } /* the lines pinch together on press — the only feedback this button had was the drawer arriving, which is a whole frame too late to feel connected */ .burger:active span:nth-child(1){ transform:translateY(2px); } .burger:active span:nth-child(3){ transform:translateY(-2px); } .burger span:nth-child(1){ top:10px; } .burger span:nth-child(2){ top:15px; } .burger span:nth-child(3){ top:20px; } /* -------- theme toggle -------- Shows the theme it will switch TO, not the one you are in — the button is a destination, not a status light. Both icons stay in the DOM and trade places, because a swapped-out icon gives the press nothing to answer with. */ .theme-toggle{ position:relative; flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--bg-elev); color:var(--text-muted); cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent; transition:color var(--t-fast) linear, border-color var(--t-fast) linear, background var(--t-fast) linear, transform var(--t-base) var(--ease-snap); } .theme-toggle:hover{ color:var(--blue-bright); border-color:var(--blue-dim); background:var(--bg-elev-2); } .theme-toggle:active{ transform:scale(.92); transition-duration:60ms; } .theme-toggle svg{ position:absolute; width:17px; height:17px; transition:transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease); } .theme-toggle .ico-moon{ opacity:1; transform:none; } .theme-toggle .ico-sun { opacity:0; transform:rotate(-90deg) scale(.4); } :root[data-theme="dark"] .theme-toggle .ico-moon{ opacity:0; transform:rotate(90deg) scale(.4); } :root[data-theme="dark"] .theme-toggle .ico-sun { opacity:1; transform:none; } /* the drawer's copy rides next to the close button rather than being spaced away from it by the header's justify-content */ .mobile-panel-head .theme-toggle{ margin-left:auto; } /* -------- theme switch cross-fade -------- Only while the switch is actually happening: JS adds .theme-anim, then drops it when the transition is done, so no element carries an extra transition for the rest of the visit. Gradients are background-image and cannot tween — they land on the first frame, which is why only the flat colour properties are listed here. */ @media (prefers-reduced-motion: no-preference){ :root.theme-anim, :root.theme-anim *, :root.theme-anim *::before, :root.theme-anim *::after{ transition:background-color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease), fill var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease) !important; } } /* open state: the drawer carries its own logo + close button, so the whole fixed bar steps aside instead of stacking a second X over the panel */ body.nav-open .nav{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base); } .mobile-backdrop{ position:fixed; inset:0; background:var(--backdrop); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:105; opacity:0; visibility:hidden; transition:opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow); } .mobile-backdrop.is-open{ opacity:1; visibility:visible; transition:opacity var(--t-slow) var(--ease), visibility 0s linear 0s; } .mobile-panel{ position:fixed; top:0; right:0; bottom:0; width:min(86vw, 340px); background:var(--bg); z-index:110; display:flex; flex-direction:column; align-items:stretch; padding:0; overflow-y:auto; box-shadow:var(--shadow-panel); border-left:1px solid var(--line); visibility:hidden; transform:translateX(100%); will-change:transform; transition:transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow); } .mobile-panel::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(400px 300px at 100% 0%, var(--glow-panel), transparent 60%), linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size:auto, 44px 44px, 44px 44px; opacity:.6; pointer-events:none; } .mobile-panel.is-open{ visibility:visible; transform:translateX(0); transition:transform var(--t-slow) var(--ease-out), visibility 0s linear 0s; } /* drawer header — carries the logo the hidden nav bar would have shown */ .mobile-panel-head{ position:relative; flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px 16px 22px; border-bottom:1px solid var(--line); opacity:0; transform:translateY(-8px); transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .mobile-panel.is-open .mobile-panel-head{ opacity:1; transform:translateY(0); transition-delay:40ms; } .mobile-brand{ font-size:16px; gap:9px; } .mobile-brand .mark{ width:30px; height:30px; } .mobile-brand .mark img{ width:100%; height:100%; } /* links + CTA sit just under the logo header, centred on the drawer axis; only the meta block is pushed to the bottom */ .mobile-nav{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:34px 24px 0; } .mobile-nav a{ position:relative; font-family:var(--f-display); font-size:clamp(20px,5.8vw,26px); font-weight:600; letter-spacing:-.01em; color:var(--text); padding:9px 4px; opacity:0; transform:translateY(12px); transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), color var(--t-fast) linear; } .mobile-nav a::after{ content:""; position:absolute; left:50%; bottom:2px; width:26px; height:1.5px; margin-left:-13px; transform:scaleX(0); background:var(--blue-bright); transition:transform var(--t-base) var(--ease-snap); } .mobile-nav a:hover, .mobile-nav a.active{ color:var(--blue-bright); } .mobile-nav a:hover::after, .mobile-nav a.active::after{ transform:scaleX(1); } .mobile-panel.is-open .mobile-nav a{ opacity:1; transform:translateY(0); } .mobile-panel.is-open .mobile-nav a:nth-of-type(1){ transition-delay:60ms; } .mobile-panel.is-open .mobile-nav a:nth-of-type(2){ transition-delay:105ms; } .mobile-panel.is-open .mobile-nav a:nth-of-type(3){ transition-delay:150ms; } .mobile-panel.is-open .mobile-nav a:nth-of-type(4){ transition-delay:195ms; } .mobile-panel .mobile-cta{ position:relative; align-self:center; margin:28px 24px 0; padding:15px 32px; font-size:15px; line-height:1.2; opacity:0; transform:translateY(12px); transition:opacity var(--t-slow) var(--ease-out) 240ms, transform var(--t-slow) var(--ease-out) 240ms; } .mobile-panel.is-open .mobile-cta{ opacity:1; transform:translateY(0); } .mobile-panel .mobile-meta{ position:relative; margin-top:auto; padding:26px 24px 30px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-family:var(--f-mono); font-size:11.5px; color:var(--text-faint); } /* --sbw is set by JS only on engines that lack scrollbar-gutter; everywhere else it stays unset and both of these resolve to 0. The navbar needs it too: it is position:fixed, so it is measured against the viewport rather than against the padded body. */ body.menu-open{ overflow:hidden; padding-right:var(--sbw, 0px); } body.menu-open .nav{ padding-right:var(--sbw, 0px); } /* -------- footer -------- */ .footer{ border-top:1px solid var(--line); padding:56px 0 28px; position:relative; z-index:1; } .footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:40px; } .footer-brand{ max-width:280px; } .footer-brand .brand{ margin-bottom:14px; } .footer-brand p{ color:var(--text-muted); font-size:14.5px; } .footer-cols{ display:flex; gap:64px; flex-wrap:wrap; } .footer-col h4{ font-family:var(--f-mono); font-size:12.5px; color:var(--text-faint); font-weight:500; margin-bottom:16px; letter-spacing:.02em; } .footer-col a{ display:block; font-size:14.5px; color:var(--text-muted); padding:6px 0; transition:color var(--t-fast) linear; } .footer-col a:hover{ color:var(--blue-bright); } .footer-bottom{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--text-faint); font-family:var(--f-mono); } .footer-social{ display:flex; gap:18px; } .footer-social a{ color:var(--text-muted); transition:color var(--t-fast) linear; } .footer-social a:hover{ color:var(--blue-bright); } /* -------- scroll reveal -------- Scoped to .js, which the inline snippet in sets before first paint and removes again if script.js never arrives — so a failed script leaves a readable page rather than a column of invisible sections. 24px/700ms read as "waiting for the page"; 18px/520ms reads as the content settling. Short travel is what makes a reveal feel smooth, not long easing. */ .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); } .js .reveal.is-visible{ opacity:1; transform:none; } /* Promoted only while the entrance is actually running: JS adds .is-animating just before revealing and drops it on transitionend, so idle sections don't each hold a compositor layer for the life of the page. */ .js .reveal.is-animating{ will-change:opacity, transform; } .reveal-stagger.is-visible > *{ transition-delay:calc(var(--i, 0) * 60ms); } /* -------- misc shared -------- */ .pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12.5px; color:var(--text-muted); border:1px solid var(--line); background:var(--bg-elev); padding:6px 14px; border-radius:999px; } .pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-glow); } .divider{ height:1px; background:var(--line); border:none; margin:0; } ::selection{ background:var(--select-bg); color:var(--select-fg); } /* scrollbar (webkit) */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--bg); } ::-webkit-scrollbar-thumb{ background:var(--bg-elev-3); border-radius:8px; } ::-webkit-scrollbar-thumb:hover{ background:var(--blue-dim); } @media (max-width:900px){ .nav-links{ display:none; } .nav-cta .btn-ghost, .nav-cta .btn-primary{ display:none; } .burger{ display:block; } /* with the two CTAs gone the bar is just toggle + burger; 22px between two icon buttons reads as a gap rather than a pair */ .nav-cta{ gap:10px; } } /* ============================================================ Accessibility, chrome & feedback ============================================================ */ /* -------- visible keyboard focus (was completely missing) -------- */ :focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:4px; } .btn:focus-visible, .filter-btn:focus-visible, .burger:focus-visible{ outline-offset:4px; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{ outline:none; } /* -------- skip link -------- */ .skip-link{ position:fixed; top:12px; left:12px; z-index:200; background:var(--blue); color:#fff; font-size:14px; font-weight:600; padding:10px 18px; border-radius:999px; transform:translateY(-160%); transition:transform var(--t-base) var(--ease-out); } .skip-link:focus{ transform:translateY(0); } /* -------- reading-progress bar in the navbar -------- */ .scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:140; pointer-events:none; } .scroll-progress span{ display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); transform:scaleX(0); transform-origin:0 50%; } /* -------- mobile panel close button -------- */ .mobile-close{ flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); background:var(--bg-elev); color:var(--text-muted); cursor:pointer; transition:color var(--t-fast) linear, border-color var(--t-fast) linear, background var(--t-fast) linear; } .mobile-close:hover{ color:var(--text); border-color:var(--blue-dim); background:var(--bg-elev-2); } /* -------- back to top -------- */ .to-top{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--text-muted); cursor:pointer; z-index:90; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base), color var(--t-fast) linear, border-color var(--t-fast) linear; } .to-top.is-shown{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear 0s, color var(--t-fast) linear, border-color var(--t-fast) linear; } .to-top:hover{ color:var(--blue-bright); border-color:var(--blue-dim); } body.menu-open .to-top{ opacity:0; visibility:hidden; } /* -------- toasts -------- */ .toast-host{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:180; display:flex; flex-direction:column; gap:10px; align-items:center; width:max-content; max-width:min(92vw,420px); pointer-events:none; } .toast{ background:var(--bg-elev-2); border:1px solid var(--line); border-left:3px solid var(--blue); color:var(--text); font-size:14px; padding:12px 18px; border-radius:10px; box-shadow:var(--shadow-toast); opacity:0; transform:translateY(14px); transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .toast.is-in{ opacity:1; transform:none; } .toast--ok{ border-left-color:var(--green); } .toast--error{ border-left-color:var(--red); } /* -------- text link button (used inside form status) -------- */ .link-btn{ font-family:var(--f-mono); font-size:12.5px; color:var(--blue-bright); background:none; border:none; border-bottom:1px solid transparent; padding:0; cursor:pointer; transition:border-color var(--t-fast) linear; } .link-btn:hover{ border-bottom-color:var(--blue-bright); } /* -------- print -------- */ @media print{ body::before, .nav, .mobile-panel, .mobile-backdrop, .to-top, .scroll-progress, .skip-link, .toast-host, .hero-visual{ display:none !important; } body{ background:#fff; color:#000; } .reveal{ opacity:1 !important; transform:none !important; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; } }