/* ========================================================================== IT D300 Service — Design System Aesthetic: Technical Blueprint / Deep-Space Engineering Brand: Navy #0B1A38 · Cyan #22D3EE · Mint #5EEAD4 MOTION POLICY ------------- `prefers-reduced-motion` is intentionally NOT used to switch motion off. Many desktop OS setups (e.g. Windows "Show animations" = Off) report `reduce`, which would silently kill the site's animations. Instead motion is controlled by [data-motion="off"] on , driven by an in-page toggle and persisted in localStorage. Default = ON, always. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ---------- 1. Tokens ---------- */ :root{ --ink: #050B18; --ink-2: #08101F; --navy: #0B1A38; --surface: #0C1932; --surface-2: #112340; --surface-3: #162C4E; --cyan: #22D3EE; --cyan-deep: #0EA5C6; --mint: #5EEAD4; --signal: #FFC46B; --danger: #FF8A8A; --text: #E8F1FB; --text-soft: #BACCE3; --muted: #8CA2C0; --faint: #5D739A; --line: rgba(120,180,225,.14); --line-2: rgba(120,180,225,.30); --ff-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; --ff-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --shell: 1240px; --gut: clamp(20px, 5vw, 56px); --e-out: cubic-bezier(.22,1,.36,1); --e-soft: cubic-bezier(.4,0,.2,1); --e-back: cubic-bezier(.34,1.56,.64,1); --z-bg: 0; --z-body: 10; --z-nav: 60; --z-overlay: 80; --z-modal: 90; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; } body{ font-family:var(--ff-body); font-size:17px; line-height:1.65; color:var(--text-soft); background:var(--ink); overflow-x:hidden; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button,input,textarea,select{ font:inherit; color:inherit; } button{ background:none; border:none; cursor:pointer; } ul,ol{ list-style:none; } ::selection{ background:var(--cyan); color:#04101c; } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; } /* ---------- 3. Typography ---------- */ h1,h2,h3,h4{ font-family:var(--ff-display); color:var(--text); line-height:1.05; letter-spacing:-.03em; font-weight:700; text-wrap:balance; } h1{ font-size:clamp(2.6rem, 6.4vw, 5.1rem); font-weight:800; } h2{ font-size:clamp(2rem, 4.4vw, 3.3rem); } h3{ font-size:clamp(1.28rem, 2.2vw, 1.65rem); letter-spacing:-.02em; } h4{ font-size:1.05rem; letter-spacing:-.01em; } .lede{ font-size:clamp(1.04rem,1.7vw,1.22rem); color:var(--text-soft); max-width:62ch; } strong{ color:var(--text); font-weight:600; } .eyebrow{ font-family:var(--ff-mono); font-size:.7rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:''; width:26px; height:1px; flex:0 0 26px; background:linear-gradient(90deg,transparent,var(--cyan)); } .mono{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.06em; color:var(--muted); } .grad-text{ background:linear-gradient(104deg,var(--cyan) 0%,var(--mint) 46%,var(--cyan) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:sheen 7s linear infinite; } @keyframes sheen{ to{ background-position:220% 0; } } /* ---------- 4. Layout ---------- */ .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); } .section{ position:relative; padding-block:clamp(72px, 10vw, 130px); z-index:var(--z-body); } .section--tight{ padding-block:clamp(52px, 7vw, 84px); } .stack-sm > * + *{ margin-top:.7rem; } .stack > * + *{ margin-top:1.15rem; } .stack-lg > * + *{ margin-top:2rem; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .head{ max-width:66ch; } .head--center{ margin-inline:auto; text-align:center; } .head--center .eyebrow{ justify-content:center; } .head--center .lede{ margin-inline:auto; } .head h2{ margin-top:1rem; } .head p{ margin-top:1.1rem; } /* ---------- 5. Atmosphere ---------- */ .atmos{ position:fixed; inset:0; z-index:var(--z-bg); pointer-events:none; overflow:hidden; } .atmos__grid{ position:absolute; inset:-40%; background-image: linear-gradient(to right, rgba(120,180,225,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,180,225,.055) 1px, transparent 1px); background-size:66px 66px; mask-image:radial-gradient(ellipse 78% 62% at 50% 30%, #000 10%, transparent 74%); -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 30%, #000 10%, transparent 74%); animation:gridDrift 44s linear infinite; } @keyframes gridDrift{ to{ transform:translate3d(66px,66px,0); } } .atmos__blob{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.4; will-change:transform; } .atmos__blob--a{ width:640px; height:640px; top:-14%; left:-8%; background:radial-gradient(circle,#1461a8 0%,transparent 68%); animation:drift1 26s var(--e-soft) infinite alternate; } .atmos__blob--b{ width:520px; height:520px; top:24%; right:-10%; background:radial-gradient(circle,#0f8fa8 0%,transparent 68%); animation:drift2 32s var(--e-soft) infinite alternate; } .atmos__blob--c{ width:560px; height:560px; bottom:-16%; left:32%; background:radial-gradient(circle,#123a7a 0%,transparent 70%); animation:drift3 38s var(--e-soft) infinite alternate; } @keyframes drift1{ to{ transform:translate3d(120px,90px,0) scale(1.18); } } @keyframes drift2{ to{ transform:translate3d(-130px,70px,0) scale(.86); } } @keyframes drift3{ to{ transform:translate3d(90px,-110px,0) scale(1.12); } } .atmos__grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .atmos__vignette{ position:absolute; inset:0; background:radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(5,11,24,.72) 100%); } .atmos__spot{ position:absolute; width:620px; height:620px; border-radius:50%; left:0; top:0; margin-left:-310px; margin-top:-310px; transform:translate3d(var(--mx,50vw), var(--my,40vh), 0); background:radial-gradient(circle, rgba(34,211,238,.10) 0%, transparent 62%); transition:opacity .5s ease; opacity:0; will-change:transform; } body.has-pointer .atmos__spot{ opacity:1; } /* ---------- 6. Floating micro-glyphs ---------- */ .glyphs{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; } .glyph{ position:absolute; color:var(--cyan); opacity:.24; animation:glyphFloat 12s var(--e-soft) infinite alternate; } .glyph svg{ width:100%; height:100%; } .glyph--plus{ width:16px; height:16px; } .glyph--ring{ width:34px; height:34px; opacity:.16; animation-duration:17s; } .glyph--sq { width:22px; height:22px; opacity:.15; animation-duration:14s; } .glyph--tri { width:20px; height:20px; opacity:.18; animation-duration:16s; } .glyph--chev{ width:18px; height:18px; opacity:.2; animation-duration:13s; } .glyph--dot { width:6px; height:6px; border-radius:50%; background:var(--mint); opacity:.5; animation-duration:9s; } @keyframes glyphFloat{ 0% { transform:translate3d(0,0,0) rotate(0deg); } 100%{ transform:translate3d(14px,-26px,0) rotate(38deg); } } .glyph--spin{ animation:glyphSpin 18s linear infinite; } @keyframes glyphSpin{ to{ transform:rotate(360deg); } } /* ---------- 7. Navigation ---------- */ .nav{ position:fixed; z-index:var(--z-nav); top:14px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:11px 12px 11px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(8,17,33,.62); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); transition:background .35s var(--e-soft), border-color .35s var(--e-soft), box-shadow .35s var(--e-soft), transform .45s var(--e-out); animation:navIn .8s var(--e-out) both; } @keyframes navIn{ from{ opacity:0; transform:translateY(-22px); } } .nav.is-stuck{ background:rgba(6,13,26,.9); border-color:var(--line-2); box-shadow:0 18px 46px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(34,211,238,.07); } .nav.is-hidden{ transform:translateY(calc(-100% - 20px)); } .nav__links{ display:flex; align-items:center; gap:2px; } .nav__item{ position:relative; } .nav__link{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; font-size:.9rem; font-weight:500; color:var(--text-soft); transition:color .22s var(--e-soft), background .22s var(--e-soft); } .nav__link:hover{ color:var(--text); background:rgba(34,211,238,.08); } .nav__link::after{ content:''; position:absolute; left:14px; right:14px; bottom:5px; height:1.5px; background:var(--cyan); border-radius:2px; transform:scaleX(0); transform-origin:left; opacity:0; transition:transform .3s var(--e-out), opacity .3s; } .nav__link:hover::after{ transform:scaleX(1); opacity:.6; } .nav__link.is-active{ color:var(--text); } .nav__link.is-active::after{ transform:scaleX(1); opacity:1; } .nav__link .caret{ transition:transform .3s var(--e-out); } .nav__item:hover .caret, .nav__item.is-open .caret{ transform:rotate(180deg); } .nav__drop{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-8px) scale(.97); width:330px; padding:8px; background:rgba(9,19,36,.97); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:0 26px 60px -24px rgba(0,0,0,.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s var(--e-soft), transform .28s var(--e-out), visibility .2s; /* Grace period: the panel lingers instead of snapping shut the instant the pointer leaves, so it can actually be travelled to and clicked. */ transition-delay:.5s; } /* Invisible bridge across the 12px gap between the trigger and the panel — without it the pointer crosses dead space and loses :hover on the way down. */ .nav__drop::before{ content:''; position:absolute; left:0; right:0; top:-16px; height:16px; } .nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop, .nav__item.is-open .nav__drop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); transition-delay:0s; } .nav__drop a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; transition:background .2s var(--e-soft); } .nav__drop a:hover{ background:rgba(34,211,238,.09); } .nav__drop .ic{ flex:0 0 34px; height:34px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:9px; color:var(--cyan); background:rgba(34,211,238,.06); transition:transform .35s var(--e-back), border-color .3s; } .nav__drop a:hover .ic{ transform:rotate(-8deg) scale(1.08); border-color:var(--cyan); } .nav__drop .tx b{ display:block; font-size:.9rem; color:var(--text); font-weight:600; line-height:1.3; } .nav__drop .tx span{ font-size:.76rem; color:var(--muted); } .nav__side{ display:flex; align-items:center; gap:10px; } .nav__burger{ display:none; width:44px; height:44px; border-radius:11px; border:1px solid var(--line); place-items:center; transition:border-color .25s, background .25s; } .nav__burger:hover{ border-color:var(--cyan); background:rgba(34,211,238,.07); } .nav__burger span{ display:block; width:19px; height:1.7px; background:var(--text); border-radius:2px; transition:transform .35s var(--e-out), opacity .2s; } .nav__burger span + span{ margin-top:5px; } .nav__burger.is-open span:nth-child(1){ transform:translateY(6.7px) rotate(45deg); } .nav__burger.is-open span:nth-child(2){ opacity:0; } .nav__burger.is-open span:nth-child(3){ transform:translateY(-6.7px) rotate(-45deg); } .drawer{ position:fixed; inset:0; z-index:var(--z-overlay); background:rgba(4,10,20,.97); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); padding:96px var(--gut) 40px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-14px); transition:opacity .35s var(--e-soft), transform .45s var(--e-out), visibility .35s; overflow-y:auto; } .drawer.is-open{ opacity:1; visibility:visible; transform:none; } .drawer a{ font-family:var(--ff-display); font-size:1.65rem; font-weight:700; color:var(--text); letter-spacing:-.02em; padding:13px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; opacity:0; transform:translateX(-18px); } .drawer.is-open a{ animation:drawerIn .5s var(--e-out) forwards; } .drawer.is-open a:nth-child(1){ animation-delay:.05s } .drawer.is-open a:nth-child(2){ animation-delay:.10s } .drawer.is-open a:nth-child(3){ animation-delay:.15s } .drawer.is-open a:nth-child(4){ animation-delay:.20s } .drawer.is-open a:nth-child(5){ animation-delay:.25s } .drawer.is-open a:nth-child(6){ animation-delay:.30s } .drawer.is-open a:nth-child(7){ animation-delay:.35s } .drawer.is-open a:nth-child(8){ animation-delay:.40s } @keyframes drawerIn{ to{ opacity:1; transform:none; } } .drawer a span{ font-family:var(--ff-mono); font-size:.68rem; color:var(--cyan); opacity:.7; } /* ---------- 8. Logo ---------- */ .logo{ display:inline-flex; align-items:center; gap:11px; } .logo__mark{ width:38px; height:38px; flex:0 0 38px; } .logo__mark .lm-ring{ transform-origin:32px 32px; } .logo__mark .lm-r1{ animation:lmPulse 3.2s var(--e-soft) infinite; } .logo__mark .lm-r2{ animation:lmPulse 3.2s var(--e-soft) .35s infinite; } .logo__mark .lm-r3{ animation:lmPulse 3.2s var(--e-soft) .7s infinite; } @keyframes lmPulse{ 0%,100%{ opacity:.28; transform:scale(.94); } 45% { opacity:1; transform:scale(1.04); } } .logo__mark .lm-core{ animation:lmCore 3.2s var(--e-soft) infinite; transform-origin:32px 32px; } @keyframes lmCore{ 0%,100%{ transform:scale(1) } 45%{ transform:scale(1.12) } } .logo:hover .lm-spin{ animation-duration:2.2s; } .lm-spin{ transform-origin:32px 32px; animation:glyphSpin 14s linear infinite; } .logo__word{ font-family:var(--ff-display); font-weight:700; font-size:1.12rem; letter-spacing:-.03em; color:var(--text); line-height:1.05; } .logo__word b{ color:var(--cyan); font-weight:800; } .logo__word small{ display:block; font-family:var(--ff-mono); font-size:.53rem; font-weight:400; letter-spacing:.26em; color:var(--faint); text-transform:uppercase; margin-top:2px; } /* ---------- 9. Buttons ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; min-height:48px; border-radius:12px; font-size:.94rem; font-weight:600; font-family:var(--ff-body); letter-spacing:-.01em; cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .3s var(--e-out), box-shadow .3s var(--e-soft), border-color .3s, background .3s, color .3s; white-space:nowrap; } .btn svg{ flex:0 0 auto; transition:transform .35s var(--e-out); } .btn:active{ transform:translateY(1px) scale(.99); } .btn--primary{ background:linear-gradient(120deg,var(--cyan),var(--mint)); color:#04121c; font-weight:700; box-shadow:0 12px 34px -14px rgba(34,211,238,.75), inset 0 1px 0 rgba(255,255,255,.35); } .btn--primary::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,var(--mint),var(--cyan)); opacity:0; transition:opacity .35s var(--e-soft); } .btn--primary:hover{ box-shadow:0 18px 46px -14px rgba(34,211,238,.9); transform:translateY(-2px); } .btn--primary:hover::before{ opacity:1; } .btn--primary:hover svg{ transform:translateX(4px); } .btn--ghost{ border:1px solid var(--line-2); color:var(--text); background:rgba(255,255,255,.02); } .btn--ghost:hover{ border-color:var(--cyan); background:rgba(34,211,238,.09); transform:translateY(-2px); box-shadow:0 14px 34px -18px rgba(34,211,238,.6); } .btn--ghost:hover svg{ transform:translateX(4px); } .btn--sm{ padding:10px 18px; min-height:40px; font-size:.85rem; border-radius:10px; } .btn--block{ width:100%; } /* shine sweep */ .btn--primary::after, .btn--ghost::after{ content:''; position:absolute; top:0; bottom:0; width:42%; left:-60%; z-index:1; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg); } .btn--ghost::after{ background:linear-gradient(100deg,transparent,rgba(34,211,238,.28),transparent); } .btn:hover::after{ animation:btnShine .85s var(--e-soft) forwards; } @keyframes btnShine{ to{ left:120%; } } /* ripple */ .ripple{ position:absolute; border-radius:50%; pointer-events:none; z-index:2; background:rgba(255,255,255,.45); transform:translate(-50%,-50%) scale(0); animation:rippleGo .65s var(--e-out) forwards; } .btn--primary .ripple{ background:rgba(4,18,28,.28); } @keyframes rippleGo{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } } /* ---------- 10. Reveal system ---------- Hidden-until-revealed styles are scoped to html.js, which the inline head script adds. Without JavaScript the class is never set, so all content is visible by default — a failed script can never blank the page. */ html.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); transition-delay:var(--d, 0ms); will-change:opacity, transform; } html.js [data-reveal="left"] { transform:translateX(-30px); } html.js [data-reveal="right"]{ transform:translateX(30px); } html.js [data-reveal="scale"]{ transform:scale(.94); } html.js [data-reveal="blur"] { filter:blur(10px); transition:opacity .9s var(--e-out), transform .9s var(--e-out), filter .9s var(--e-out); } html.js [data-reveal].is-in{ opacity:1; transform:none; filter:none; } /* word-by-word headline */ html.js .split-word{ display:inline-block; opacity:0; transform:translateY(.75em) rotate(2.5deg); animation:wordIn .85s var(--e-out) forwards; animation-delay:var(--wd, 0ms); } @keyframes wordIn{ to{ opacity:1; transform:none; } } /* ---------- 11. Cards ---------- */ .card{ position:relative; overflow:hidden; padding:28px; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(165deg, rgba(18,35,64,.72), rgba(9,19,36,.62)); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:border-color .4s var(--e-soft), transform .5s var(--e-out), box-shadow .5s var(--e-soft), background .4s; } .card::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--cx,50%) var(--cy,0%), rgba(34,211,238,.13), transparent 68%); opacity:0; transition:opacity .45s var(--e-soft); } .card:hover{ border-color:rgba(34,211,238,.45); box-shadow:0 26px 60px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(34,211,238,.12); } .card:hover::before{ opacity:1; } /* animated corner brackets */ .card__corner{ position:absolute; width:16px; height:16px; pointer-events:none; opacity:0; transition:opacity .35s var(--e-soft), transform .45s var(--e-out); } .card__corner::before,.card__corner::after{ content:''; position:absolute; background:var(--cyan); } .card__corner::before{ width:100%; height:1.5px; } .card__corner::after { width:1.5px; height:100%; } .card__corner--tl{ top:11px; left:11px; transform:translate(-5px,-5px); } .card__corner--tr{ top:11px; right:11px; transform:translate(5px,-5px); } .card__corner--tr::before{ right:0; } .card__corner--tr::after{ right:0; } .card__corner--bl{ bottom:11px; left:11px; transform:translate(-5px,5px); } .card__corner--bl::before{ bottom:0; } .card__corner--bl::after{ bottom:0; } .card__corner--br{ bottom:11px; right:11px; transform:translate(5px,5px); } .card__corner--br::before{ bottom:0; right:0; } .card__corner--br::after{ bottom:0; right:0; } .card:hover .card__corner{ opacity:.85; transform:translate(0,0); } /* ---------- 12. Icon tile ---------- */ .itile{ position:relative; width:56px; height:56px; flex:0 0 56px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:15px; color:var(--cyan); background:linear-gradient(150deg, rgba(34,211,238,.14), rgba(34,211,238,.02)); transition:transform .5s var(--e-back), border-color .4s, box-shadow .4s; } .itile::after{ content:''; position:absolute; inset:-1px; border-radius:15px; border:1px solid var(--cyan); opacity:0; transition:opacity .4s, transform .6s var(--e-out); } .card:hover .itile, a:hover > .itile{ transform:translateY(-4px) rotate(-6deg); border-color:rgba(34,211,238,.6); box-shadow:0 14px 30px -16px rgba(34,211,238,.7); } .card:hover .itile::after{ opacity:.35; transform:scale(1.18); } /* ---------- 13. Pills / badges ---------- */ .pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px; border:1px solid var(--line-2); background:rgba(34,211,238,.06); font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); } .pill--live{ position:relative; } .led{ position:relative; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--mint); } .led::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--mint); opacity:0; animation:ledPing 2.2s var(--e-out) infinite; } @keyframes ledPing{ 0% { opacity:.85; transform:scale(.6); } 100%{ opacity:0; transform:scale(1.9); } } .tag{ display:inline-block; padding:5px 11px; border-radius:7px; border:1px solid var(--line); background:rgba(255,255,255,.025); font-family:var(--ff-mono); font-size:.7rem; color:var(--muted); transition:border-color .3s, color .3s, background .3s; } .tag:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,.07); } /* ---------- 14. Divider with travelling pulse ---------- */ .rule{ position:relative; height:1px; background:var(--line); overflow:hidden; } .rule::after{ content:''; position:absolute; top:0; left:-30%; width:30%; height:100%; background:linear-gradient(90deg,transparent,var(--cyan),transparent); animation:rulePulse 5.5s var(--e-soft) infinite; } @keyframes rulePulse{ 0%{ left:-30% } 60%,100%{ left:110% } } /* ---------- 15. Marquee ---------- */ .marquee{ position:relative; overflow:hidden; border-block:1px solid var(--line); padding-block:16px; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .marquee__track{ display:flex; width:max-content; animation:marq 34s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused; } @keyframes marq{ to{ transform:translateX(-50%); } } .marquee__item{ display:inline-flex; align-items:center; gap:12px; padding-inline:26px; font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:color .3s; } .marquee__item:hover{ color:var(--cyan); } .marquee__item i{ width:5px; height:5px; border-radius:50%; background:var(--cyan); opacity:.55; } /* ---------- 16. Scroll progress + back to top ---------- */ .progress{ position:fixed; top:0; left:0; height:2px; z-index:var(--z-modal); width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--cyan),var(--mint),var(--cyan)); box-shadow:0 0 14px var(--cyan); } .totop{ position:fixed; right:20px; bottom:20px; z-index:var(--z-nav); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--cyan); background:rgba(9,19,36,.85); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .4s var(--e-soft), transform .5s var(--e-out), visibility .4s, border-color .3s; } .totop.is-on{ opacity:1; visibility:visible; transform:none; } .totop:hover{ border-color:var(--cyan); box-shadow:0 0 26px -6px var(--cyan); } .totop svg.ring{ position:absolute; inset:-1px; transform:rotate(-90deg); } .totop .ring circle{ fill:none; stroke-width:2; } .totop .ring .bg{ stroke:rgba(120,180,225,.16); } .totop .ring .fg{ stroke:var(--cyan); stroke-linecap:round; transition:stroke-dashoffset .15s linear; } /* ---------- 17. Motion toggle ---------- */ .mtoggle{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:border-color .3s, color .3s, background .3s; } .mtoggle:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,.06); } .mtoggle__dot{ width:24px; height:13px; border-radius:100px; position:relative; background:rgba(34,211,238,.22); border:1px solid var(--line-2); transition:background .3s; } .mtoggle__dot::after{ content:''; position:absolute; top:1px; left:12px; width:9px; height:9px; border-radius:50%; background:var(--cyan); transition:left .3s var(--e-back), background .3s; } html[data-motion="off"] .mtoggle__dot::after{ left:1px; background:var(--faint); } html[data-motion="off"] .mtoggle__dot{ background:rgba(120,180,225,.1); } /* Kill-switch: ONLY the manual toggle disables motion — never the OS setting. Delays must be zeroed too: a staggered reveal still holds its start value (opacity 0) while its transition-delay is pending, which would leave content invisible after the toggle. */ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after{ animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; } html[data-motion="off"] [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; } html[data-motion="off"] .split-word{ opacity:1 !important; transform:none !important; } /* ---------- 18. Footer ---------- */ .footer{ position:relative; z-index:var(--z-body); border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(6,13,26,.4), rgba(4,9,19,.9)); padding-top:clamp(52px,7vw,84px); overflow:hidden; } .footer__grid{ display:grid; gap:44px; grid-template-columns:1.5fr 1fr 1fr 1.2fr; } .footer h4{ font-family:var(--ff-mono); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; } .footer__links li + li{ margin-top:11px; } .footer__links a{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; color:var(--muted); transition:color .25s var(--e-soft), transform .3s var(--e-out); } .footer__links a::before{ content:''; width:0; height:1px; background:var(--cyan); transition:width .3s var(--e-out); } .footer__links a:hover{ color:var(--cyan); } .footer__links a:hover::before{ width:14px; } .footer__legal{ margin-top:52px; padding-block:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; font-size:.82rem; color:var(--faint); } .footer__legal a:hover{ color:var(--cyan); } .footer__wordmark{ font-family:var(--ff-display); font-weight:800; font-size:clamp(3.2rem,15vw,11rem); line-height:.85; letter-spacing:-.05em; text-align:center; margin-top:34px; background:linear-gradient(180deg, rgba(34,211,238,.16), transparent 78%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; user-select:none; pointer-events:none; } /* ---------- 19. Cookie banner ---------- */ .cookiebar{ position:fixed; left:14px; right:14px; bottom:14px; z-index:var(--z-modal); max-width:640px; margin-inline:auto; padding:20px 22px; border:1px solid var(--line-2); border-radius:var(--r-lg); background:rgba(8,17,33,.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 30px 70px -30px rgba(0,0,0,.95); display:none; gap:16px; align-items:center; flex-wrap:wrap; transform:translateY(24px); opacity:0; transition:opacity .5s var(--e-soft), transform .6s var(--e-out); } .cookiebar.is-shown{ display:flex; } .cookiebar.is-in{ opacity:1; transform:none; } .cookiebar p{ flex:1 1 280px; font-size:.86rem; color:var(--muted); } .cookiebar p a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; } .cookiebar__actions{ display:flex; gap:9px; flex-wrap:wrap; } /* ---------- 20. Page curtain ---------- */ .curtain{ position:fixed; inset:0; z-index:200; pointer-events:none; background:var(--ink); display:grid; place-items:center; animation:curtainOut .85s var(--e-out) .15s forwards; } .curtain__bar{ width:120px; height:2px; border-radius:2px; overflow:hidden; background:rgba(120,180,225,.18); } .curtain__bar i{ display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--cyan),var(--mint)); animation:curtainLoad .9s var(--e-soft) infinite; } @keyframes curtainLoad{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(320%) } } @keyframes curtainOut{ to{ opacity:0; visibility:hidden; } } html[data-motion="off"] .curtain{ display:none; }