/* Experimental theme — the landing as it looked before the shell reskin. A copy of the previous main.css with every selector scoped under html.theme-legacy and every @keyframes renamed with an lg- prefix, so both themes can live in one document (they both defined a `tape` animation). The switch at the bottom of the page flips that class. Treat this as a snapshot: its worth is being exactly what was there. Bridge rules for markup that changed after the snapshot are at the end. */ /* NextWell Lab — home page */ html.theme-legacy *, html.theme-legacy *::before, html.theme-legacy *::after { margin: 0; padding: 0; box-sizing: border-box; } /* The accent (--acid & friends) is written inline on by the head script (random palette entry per load) and rotated by main.js as PLAIN custom properties. Native animation/transition of registered @property colours on the root is what used to power this — it left descendants holding stale paint (footer headings, borders, the wordmark), forced a full-document style recalc every frame and leaked memory in Chromium, so it is gone for good. */ html.theme-legacy { --bg: #0b0b0c; --ink: #f0efe9; --ink-dim: #a5a49c; --ink-faint: #63625c; --acid: #c8ff2e; /* overridden per load by inline head script */ --acid-dark: #9ac700; --acid-ink: #0b0b0c; --line: rgba(240, 239, 233, 0.14); --line-strong: rgba(240, 239, 233, 0.3); --display: 'Science Gothic', 'Space Grotesk', 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --max-w: 1160px; } html.theme-legacy { scroll-behavior: smooth; } html.theme-legacy body { background: var(--bg); color: var(--ink); font-family: var(--display); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; overflow-x: hidden; } /* film grain */ html.theme-legacy body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .05; 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* cursor spotlight — a fixed-size halo moved with a transform, so following the pointer costs a composite instead of a full-viewport gradient repaint */ html.theme-legacy .spotlight { position: fixed; left: -560px; top: -560px; width: 1120px; height: 1120px; pointer-events: none; z-index: 1; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--acid) 7%, transparent), transparent 65%); transform: translate3d(var(--mx, 50vw), var(--my, 30vh), 0); transition: transform .12s linear; will-change: transform; } html.theme-legacy a { color: inherit; text-decoration: none; } html.theme-legacy ::selection { background: var(--acid); color: var(--acid-ink); } html.theme-legacy .mono { font-family: var(--display); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-dim); } /* reveal on scroll */ html.theme-legacy .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } html.theme-legacy .reveal.in { opacity: 1; transform: none; } /* ===== HEADER ===== */ html.theme-legacy .site-head { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 16px; padding: 0 clamp(18px, 4vw, 48px); height: 58px; background: rgba(11, 11, 12, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } html.theme-legacy .wordmark { display: flex; align-items: center; gap: 12px; margin-right: auto; font-weight: 700; font-size: 15px; letter-spacing: -.02em; } html.theme-legacy .wordmark-box { display: grid; place-items: center; width: 30px; height: 30px; background: var(--acid); color: var(--acid-ink); font-family: var(--display); font-size: 11px; font-weight: 700; transform: rotate(-4deg); transition: transform .25s cubic-bezier(.3,1.6,.4,1); } html.theme-legacy .wordmark:hover .wordmark-box { transform: rotate(4deg) scale(1.08); } html.theme-legacy .wordmark em { font-style: normal; color: var(--acid); } /* Every control in the bar is --head-control tall, so the nav, the outlined Portfolio link and the language button line up on one baseline. */ html.theme-legacy .site-head { --head-control: 34px; } html.theme-legacy .site-nav { display: flex; gap: 4px; } html.theme-legacy .site-nav a { display: inline-flex; align-items: center; height: var(--head-control); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); padding: 0 12px; border: 1px solid transparent; transition: color .15s, border-color .15s, background .15s; } html.theme-legacy .site-nav a:hover { color: var(--acid-ink); background: var(--acid); } html.theme-legacy .site-nav .nav-ext { border: 1px solid var(--line); margin-left: 8px; } /* Lang selector */ html.theme-legacy .lang-selector { position: relative; } html.theme-legacy .lang-toggle { display: flex; align-items: center; gap: 7px; height: var(--head-control, 34px); padding: 0 11px; background: none; border: 1px solid var(--line); border-radius: 0; color: var(--ink-dim); cursor: pointer; font-size: 10px; font-weight: 500; letter-spacing: .15em; transition: color .15s, border-color .15s; } html.theme-legacy .lang-toggle:hover { color: var(--ink); border-color: var(--line-strong); } html.theme-legacy .lang-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 168px; background: #131314; border: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 1px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--acid) 16%, transparent); z-index: 95; /* Kept in the DOM and folded away — so opening/closing can animate. It unfurls from the toggle (top-right), and the options below fall in one after another. */ transform-origin: top right; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.96); transition: opacity .18s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .18s; } html.theme-legacy .lang-selector.open .lang-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } html.theme-legacy .lang-option { --d: 0ms; /* per-item reveal delay; set from --i only while open (staircase) */ display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: none; border: none; cursor: pointer; font-family: var(--display); font-size: 13px; color: var(--ink-dim); text-align: left; opacity: 0; transform: translateY(-6px); /* reveal (opacity/transform) is staggered by --d; hover (background/color) never is */ transition: opacity .24s ease var(--d), transform .24s ease var(--d), background .12s ease, color .12s ease; } html.theme-legacy .lang-selector.open .lang-option { --d: calc(var(--i, 0) * 32ms); opacity: 1; transform: none; } html.theme-legacy .lang-option:hover { background: var(--acid); color: var(--acid-ink); } html.theme-legacy .lang-option.active { color: var(--ink); font-weight: 700; } html.theme-legacy .lang-option:hover.active { color: var(--acid-ink); } html.theme-legacy .flag-icon { width: 16px; height: 12px; object-fit: cover; } /* Burger (mobile) — square, and it stays square: as a flex child it would otherwise be squeezed by a long wordmark on narrow screens. */ html.theme-legacy .burger { display: none; width: 38px; height: 38px; min-width: 38px; min-height: 38px; flex: 0 0 38px; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } html.theme-legacy .burger span { display: block; width: 16px; height: 2px; background: var(--ink); transition: transform .25s, opacity .2s; } html.theme-legacy .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.theme-legacy .burger.open span:nth-child(2) { opacity: 0; } html.theme-legacy .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } html.theme-legacy .mobile-menu { position: fixed; inset: 58px 0 0 0; z-index: 85; background: var(--bg); padding: 28px clamp(18px, 6vw, 40px) 20px; display: flex; flex-direction: column; gap: 28px; overflow-y: auto; } html.theme-legacy .mobile-menu[hidden] { display: none; } html.theme-legacy .mobile-menu-group { display: flex; flex-direction: column; gap: 2px; } html.theme-legacy .mobile-menu-group .mono { margin-bottom: 12px; color: var(--acid); } html.theme-legacy .mobile-menu-group a { font-size: 24px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; padding: 7px 0; border-bottom: 1px solid var(--line); transition: color .15s, padding-left .2s; } html.theme-legacy .mobile-menu-group a:hover { color: var(--acid); padding-left: 10px; } html.theme-legacy .mobile-menu-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); padding-top: 18px; border-top: 1px solid var(--line); } html.theme-legacy .mobile-menu-foot a { color: var(--acid); } /* ===== LAYOUT ===== */ html.theme-legacy main { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); position: relative; z-index: 2; } /* ===== HERO ===== */ /* A container, so the heading can be sized against the space it actually has rather than against the viewport — see .hero h1. */ html.theme-legacy .hero { padding: clamp(56px, 10vh, 110px) 0 0; position: relative; container-type: inline-size; } html.theme-legacy .hero-eyebrow { margin-bottom: 30px; display: flex; align-items: center; gap: 14px; position: relative; } html.theme-legacy .hero-eyebrow::before { content: ''; width: 40px; height: 2px; background: var(--acid); } /* Science Gothic rather than the page face: a variable grotesk with a technical, lab-report edge that Space Grotesk doesn't have — and unlike Oswald it ships a cyrillic cut too, so ru/uk keep the same face. */ html.theme-legacy .hero h1 { font-family: 'Science Gothic', var(--display); /* The second line is one long unbreakable word, and how long depends on the locale: "experiments." measures 9.2× the font size in this face, but "экспериментов." measures 11.7×. Sizing against the container (cqi) instead of the viewport keeps the longest word inside the column at every width — the vw and px terms only cap it. */ font-size: min(9.2vw, 118px, 9.8cqi); font-weight: 700; line-height: .94; letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 34px; position: relative; } /* Cyrillic and Polish carry the longest words of the twelve locales. */ html.theme-legacy:lang(ru) .hero h1, html.theme-legacy:lang(uk) .hero h1, html.theme-legacy:lang(pl) .hero h1 { font-size: min(9.2vw, 118px, 8.5cqi); } /* ===== hero tear ===== Three stacked copies of the FIRST line, all reading `data-text` — which main.js re-syncs after every locale swap, so the effect survives a language change. It used to sit on the second line and wait for a pointer. The two lines have traded jobs since — the second one is the textured one now — and this one no longer waits: on a heading almost nobody hovers, and an effect that is the whole treatment of a line cannot live behind an interaction. So the line IS the accent print: transparent ink over a 2px stroke, with the fill sitting a few pixels out of register on top of it. ::before is that fill: the accent poured into the letterforms and knocked down and to the left, so the print reads as misaligned plates. ::after is the chromatic ghost. Nothing moves as a whole. A tear takes a single band of the line — a tenth of its height — throws it sideways for around a tenth of a second, and puts it back; the chromatic layer tears through a comb of scanlines instead, so only slivers of it ever show. The three clocks share no common factor (6.4s / 6.4s / 8.6s), so the same combination is rare. Reads as a signal dropping out, not as a broken page. */ html.theme-legacy .hero h1 .glitch { color: transparent; -webkit-text-stroke: 2px var(--acid); /* A box of its own, so the two copies below have something to register against: an inline that spans two lines — which "Одна лаборатория" does at this size in half the locales — would hand them the union of its fragments instead, and the copies would land off the text. Shrink-to-fit gives the width of the column when the line wraps and the width of the words when it does not, so either way the copies wrap exactly where the text does. */ display: inline-block; position: relative; animation: lg-glitch-stroke 6.4s steps(1, end) infinite; } html.theme-legacy .hero h1 .glitch::before, html.theme-legacy .hero h1 .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; } /* The fill, offset from the stroke it belongs to. The offset is not motion, so it survives the animation switch — with animations off the line simply holds its resting double print. */ html.theme-legacy .hero h1 .glitch::before { opacity: .92; background: linear-gradient(96deg, var(--acid) 0 0%, var(--acid-dark) 100% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transform: translate3d(-3px, 2px, 0); animation: lg-glitch-fill 6.4s steps(1, end) infinite; } /* Combed into slivers, so this layer can never appear as a whole second copy. Its opacity lives in the keyframes alone — kill the animation and the ghost is simply not there. */ html.theme-legacy .hero h1 .glitch::after { opacity: 0; color: transparent; -webkit-text-stroke: 2px #2ee6ff; mix-blend-mode: screen; -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 11px); mask-image: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 11px); animation: lg-glitch-chroma 8.6s steps(1, end) infinite; } /* ===== the second line: flat ink, one texture per glyph ===== What the first line used to be — plain ink — except that every glyph of it is filled with a pattern of its own: dots, hatch, a grid, plusses, brickwork, scales. Each one is a background clipped to the letterform (background-clip: text over a transparent fill), which is why main.js has to hand every glyph a span: a background can only be aimed at an element. Two lengths drive all sixteen — --pt is the tile, --pw the stroke — and both are in em, so a texture scales with the heading instead of collapsing into moire on a phone. Under every pattern sits a faint solid of the same ink: at the coverage these run, the letterform starts to dissolve on its own, and that ghost is what keeps the word a word. main.js numbers the glyphs across the whole line, and the order below is arranged so no two neighbours read alike. It wraps at 16, one more than the longest of the twelve locales needs, so in practice every letter of the line carries a texture no other letter has. */ html.theme-legacy .hero h1 .outline { color: var(--ink); /* Block on its own line, pushed to the right edge of the column — a deliberate off-balance for the second line. */ display: block; text-align: right; } html.theme-legacy .hero h1 .hero-glyph { --pt: .085em; --pw: .026em; color: transparent; -webkit-text-fill-color: transparent; /* At rest the solid is nearly opaque and the pattern reads as a watermark on it. Point at a letter and the solid drains away, leaving the texture alone in the letterform; the way back is slower and starts a second late, so a pointer crossing the line lights the letters up one after another instead of flickering. (The animation switch and reduced motion both kill the transition — the swap then simply snaps, like every other hover here.) */ background-color: color-mix(in srgb, var(--ink) 95%, transparent); transition: background-color 1s ease-in 1s; -webkit-background-clip: text; background-clip: text; } html.theme-legacy .hero h1 .hero-glyph:hover { background-color: color-mix(in srgb, var(--ink) 1%, transparent); transition: background-color .35s ease-out; } /* 1 · dots */ html.theme-legacy .hero-glyph[data-p="1"] { background-image: radial-gradient(circle at 50% 50%, var(--ink) calc(var(--pt) * .32), transparent calc(var(--pt) * .34)); background-size: var(--pt) var(--pt); } /* 2 · hatch, one way */ html.theme-legacy .hero-glyph[data-p="2"] { background-image: repeating-linear-gradient(45deg, var(--ink) 0 var(--pw), transparent var(--pw) calc(var(--pt) * .72)); } /* 3 · grid */ html.theme-legacy .hero-glyph[data-p="3"] { background-image: repeating-linear-gradient(90deg, var(--ink) 0 var(--pw), transparent var(--pw) var(--pt)), repeating-linear-gradient(180deg, var(--ink) 0 var(--pw), transparent var(--pw) var(--pt)); } /* 4 · rules */ html.theme-legacy .hero-glyph[data-p="4"] { background-image: repeating-linear-gradient(180deg, var(--ink) 0 var(--pw), transparent var(--pw) calc(var(--pt) * .62)); } /* 5 · rings */ html.theme-legacy .hero-glyph[data-p="5"] { background-image: radial-gradient(circle at 50% 50%, transparent calc(var(--pt) * .2), var(--ink) calc(var(--pt) * .22) calc(var(--pt) * .42), transparent calc(var(--pt) * .44)); background-size: calc(var(--pt) * 1.3) calc(var(--pt) * 1.3); } /* 6 · hatch, the other way */ html.theme-legacy .hero-glyph[data-p="6"] { background-image: repeating-linear-gradient(135deg, var(--ink) 0 var(--pw), transparent var(--pw) calc(var(--pt) * .72)); } /* 7 · checker */ html.theme-legacy .hero-glyph[data-p="7"] { background-image: conic-gradient(var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0); background-size: calc(var(--pt) * 1.4) calc(var(--pt) * 1.4); } /* 8 · pinstripe */ html.theme-legacy .hero-glyph[data-p="8"] { background-image: repeating-linear-gradient(90deg, var(--ink) 0 var(--pw), transparent var(--pw) calc(var(--pt) * .62)); } /* 9 · plusses — two thin ellipses crossing in the middle of the tile. A pair of linear gradients would have given a grid instead: a stripe always runs the whole width of its tile, and only a radial can be short in both directions. */ html.theme-legacy .hero-glyph[data-p="9"] { background-image: radial-gradient(calc(var(--pw) * .5) calc(var(--pt) * .5) at 50% 50%, var(--ink) 98%, transparent 100%), radial-gradient(calc(var(--pt) * .5) calc(var(--pw) * .5) at 50% 50%, var(--ink) 98%, transparent 100%); background-size: calc(var(--pt) * 1.5) calc(var(--pt) * 1.5); } /* 10 · brickwork — two courses of joints per tile, offset by half a brick, over a run of mortar lines. */ html.theme-legacy .hero-glyph[data-p="10"] { background-image: radial-gradient(calc(var(--pw) * .5) calc(var(--pt) * .26) at 25% 25%, var(--ink) 98%, transparent 100%), radial-gradient(calc(var(--pw) * .5) calc(var(--pt) * .26) at 75% 75%, var(--ink) 98%, transparent 100%), repeating-linear-gradient(180deg, var(--ink) 0 var(--pw), transparent var(--pw) calc(var(--pt) * .8)); background-size: calc(var(--pt) * 1.6) calc(var(--pt) * 1.6), calc(var(--pt) * 1.6) calc(var(--pt) * 1.6), 100% 100%; } /* 11 · crosshatch */ html.theme-legacy .hero-glyph[data-p="11"] { background-image: repeating-linear-gradient(45deg, var(--ink) 0 var(--pw), transparent var(--pw) calc(var(--pt) * .8)), repeating-linear-gradient(135deg, var(--ink) 0 var(--pw), transparent var(--pw) calc(var(--pt) * .8)); } /* 12 · triangles */ html.theme-legacy .hero-glyph[data-p="12"] { background-image: conic-gradient(from 135deg at 50% 0%, var(--ink) 0 90deg, transparent 0); background-size: calc(var(--pt) * 1.25) calc(var(--pt) * 1.25); } /* 13 · scatter */ html.theme-legacy .hero-glyph[data-p="13"] { background-image: radial-gradient(circle at 22% 28%, var(--ink) calc(var(--pt) * .25), transparent calc(var(--pt) * .27)), radial-gradient(circle at 72% 14%, var(--ink) calc(var(--pt) * .19), transparent calc(var(--pt) * .21)), radial-gradient(circle at 44% 66%, var(--ink) calc(var(--pt) * .3), transparent calc(var(--pt) * .32)), radial-gradient(circle at 86% 82%, var(--ink) calc(var(--pt) * .21), transparent calc(var(--pt) * .23)); background-size: calc(var(--pt) * 2) calc(var(--pt) * 2); } /* 14 · dashes */ html.theme-legacy .hero-glyph[data-p="14"] { background-image: radial-gradient(calc(var(--pt) * .45) calc(var(--pw) * .5) at 50% 50%, var(--ink) 98%, transparent 100%); background-size: calc(var(--pt) * 1.25) calc(var(--pt) * .62); } /* 15 · wedges — the checker's quadrants turned 45°, so the ink meets corner to corner instead of edge to edge. */ html.theme-legacy .hero-glyph[data-p="15"] { background-image: conic-gradient(from 45deg, var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0); background-size: calc(var(--pt) * 1.5) calc(var(--pt) * 1.5); } /* 16 · scales */ html.theme-legacy .hero-glyph[data-p="16"] { background-image: radial-gradient(circle at 50% 100%, transparent calc(var(--pt) * .42), var(--ink) calc(var(--pt) * .44) calc(var(--pt) * .58), transparent calc(var(--pt) * .6)); background-size: calc(var(--pt) * 1.3) calc(var(--pt) * 1.3); } /* On a phone the heading is a third of the size it is on a desktop, and a tile of two and a half pixels is not a pattern any more — it is grain. So the tile grows in em, faster than the type shrinks, and what survives at that size is a coarse finish rather than sixteen readable patterns. (The solid underneath needs no help here: it carries the word at every size.) */ @media (max-width: 760px) { html.theme-legacy .hero h1 .hero-glyph { --pt: .13em; --pw: .042em; } } /* The stroke barely acknowledges it — a pixel or two, twice a cycle. */ @keyframes lg-glitch-stroke { 0%, 3%, 47%, 100% { transform: none; } 1.5% { transform: translate3d(2px, -1px, 0); } 2.2% { transform: translate3d(-2px, 0, 0); } 45.5% { transform: translate3d(-1px, 1px, 0); } 46.2% { transform: translate3d(3px, 0, 0); } } /* Two tears per cycle, each confined to one band and gone inside 130ms. The rest of the time the fill just sits at its resting offset. */ @keyframes lg-glitch-fill { 0%, 3%, 47%, 100% { transform: translate3d(-3px, 2px, 0); clip-path: none; } 1% { transform: translate3d(-19px, 3px, 0); clip-path: inset(38% 0 54% 0); } 1.8% { transform: translate3d(11px, 3px, 0); clip-path: inset(16% 0 76% 0); } 2.4% { transform: translate3d(-7px, 3px, 0); clip-path: inset(64% 0 28% 0); } 45% { transform: translate3d(15px, 3px, 0); clip-path: inset(72% 0 20% 0); } 45.8% { transform: translate3d(-13px, 3px, 0); clip-path: inset(8% 0 84% 0); } 46.4% { transform: translate3d(6px, 3px, 0); clip-path: inset(50% 0 42% 0); } } /* The colour ghost keeps its own, longer clock, so it seldom tears with the fill. Between the combed mask and the band it is clipped to, only a handful of slivers ever light up at once. */ @keyframes lg-glitch-chroma { 0%, 2%, 33%, 71%, 100% { opacity: 0; } 0.6% { opacity: .8; transform: translate3d(9px, -2px, 0); clip-path: inset(26% 0 60% 0); } 1.4% { opacity: .8; transform: translate3d(-12px, 1px, 0); clip-path: inset(58% 0 24% 0); } 31.5% { opacity: .75; transform: translate3d(7px, 2px, 0); clip-path: inset(6% 0 80% 0); } 32.3% { opacity: .75; transform: translate3d(-6px, -1px, 0); clip-path: inset(44% 0 40% 0); } 69.6% { opacity: .85; transform: translate3d(-14px, 1px, 0); clip-path: inset(70% 0 16% 0); } 70.4% { opacity: .85; transform: translate3d(10px, -3px, 0); clip-path: inset(34% 0 52% 0); } } html.theme-legacy .hero-row { display: flex; gap: clamp(24px, 5vw, 72px); align-items: flex-end; flex-wrap: wrap; margin-bottom: clamp(40px, 7vh, 72px); justify-content: space-between; } html.theme-legacy .hero .lede { max-width: 488px; flex: 1 1 380px; font-size: 15px; line-height: 1.75; color: var(--ink-dim); } html.theme-legacy .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } html.theme-legacy .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1px solid var(--line-strong); font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s; } html.theme-legacy .btn:hover { border-color: var(--acid); color: var(--acid); box-shadow: 4px 4px 0 color-mix(in srgb, var(--acid) 28%, transparent); transform: translate(-2px, -2px); } html.theme-legacy .btn-primary { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); } html.theme-legacy .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--acid-ink); box-shadow: 4px 4px 0 color-mix(in srgb, var(--acid) 45%, transparent); } /* stats strip */ html.theme-legacy .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-bottom: none; } html.theme-legacy .hero-stats > div { padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s; } html.theme-legacy .hero-stats > div:hover { background: rgba(255,255,255,.02); } html.theme-legacy .hero-stats > div:nth-child(4n) { border-right: none; } @media (max-width: 680px) { html.theme-legacy .hero-stats { grid-template-columns: repeat(2, 1fr); } html.theme-legacy .hero-stats > div:nth-child(4n) { border-right: 1px solid var(--line); } html.theme-legacy .hero-stats > div:nth-child(2n) { border-right: none; } } html.theme-legacy .hero-stats dt { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); font-weight: 500; letter-spacing: -.04em; color: var(--acid); } html.theme-legacy .hero-stats dd { font-family: var(--display); font-size: 10px; color: var(--ink-dim); letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; } /* ===== MARQUEE ===== */ html.theme-legacy .lg-tape { margin: 0 calc(-50vw + 50%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; padding: 13px 0; background: #0e0e0f; } html.theme-legacy .tape-track { display: inline-block; animation: lg-tape 38s linear infinite; } html.theme-legacy .lg-tape .w, html.theme-legacy .lg-tape .d { display: inline-block; font-family: var(--display); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); margin: 0 17px; /* equal gap on both sides of every token */ } html.theme-legacy .lg-tape .d { color: var(--acid); letter-spacing: 0; } @keyframes lg-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===== BLOCKS ===== */ html.theme-legacy .block { padding: clamp(56px, 9vh, 96px) 0; } html.theme-legacy .block-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 12px; } html.theme-legacy .block-head h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; line-height: 1; } html.theme-legacy .block-sub { max-width: 560px; font-size: 14px; color: var(--ink-dim); line-height: 1.7; margin-bottom: clamp(28px, 5vh, 48px); } html.theme-legacy #featured .block-sub { max-width: 570px; } /* ===== FEATURED ===== */ html.theme-legacy .feature-list { border-top: 1px solid var(--line); } html.theme-legacy .feature-row { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(14px, 3vw, 36px); padding: clamp(20px, 3.6vh, 34px) 24px; border-bottom: 1px solid var(--line); transition: background .18s, color .18s; } html.theme-legacy .feature-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } html.theme-legacy .feature-name { font-size: clamp(20px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; } html.theme-legacy .feature-desc { font-size: 13px; color: var(--ink-dim); transition: color .18s; } /* The host line is new to the panel skin; here it is a stamped address under the name, and it has to survive the accent flood the row does on hover. */ html.theme-legacy .feature-host { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); transition: color .18s; } html.theme-legacy .feature-row:hover .feature-host { color: color-mix(in srgb, var(--acid-ink) 60%, transparent); } /* The only place the mono face is still used — it reads as a stamped label, which is exactly what this badge is. */ html.theme-legacy .feature-status { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--acid); border: 1px dashed var(--acid-dark); padding: 6px 10px; transform: rotate(-2deg); transition: color .18s, border-color .18s; } /* Not live means not accented: the dashed stamp goes grey rather than borrowing the colour that says "this is answering right now". */ html.theme-legacy .feature-status--dev, html.theme-legacy .feature-status--proto { color: var(--ink-faint); border-color: var(--line); } html.theme-legacy .feature-arrow { display: inline-flex; align-items: center; color: var(--ink-faint); transition: color .18s, transform .3s ease; } html.theme-legacy .feature-arrow .arw { overflow: visible; } /* Negative offset, so the shaft is revealed from the head backwards — the line is drawn right-to-left, growing out of the arrowhead instead of running into it. */ html.theme-legacy .feature-arrow .arw-line { stroke-dasharray: 10; stroke-dashoffset: -10; transition: stroke-dashoffset .3s ease; } html.theme-legacy .feature-arrow .arw-head { transition: transform .3s ease; } html.theme-legacy .feature-row:hover { background: var(--acid); color: var(--acid-ink); } html.theme-legacy .feature-row:hover .feature-desc { color: color-mix(in srgb, var(--acid-ink) 72%, transparent); } html.theme-legacy .feature-row:hover .feature-status { color: var(--acid-ink); border-color: color-mix(in srgb, var(--acid-ink) 50%, transparent); } html.theme-legacy .feature-row:hover .feature-arrow { color: var(--acid-ink); transform: translateX(4px); } html.theme-legacy .feature-row:hover .arw-line { stroke-dashoffset: 0; } html.theme-legacy .feature-row:hover .arw-head { transform: translateX(3px); } /* ===== SECTIONS GRID ===== */ html.theme-legacy .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; border: 1px solid var(--line); } html.theme-legacy .card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 30px); min-height: 220px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; transition: background .18s, color .18s; } html.theme-legacy .card-count { position: absolute; top: 24px; right: 24px; font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); transition: color .18s; } html.theme-legacy .card-count b { font-weight: 500; color: var(--acid); transition: color .18s; } html.theme-legacy .card h3 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; margin-top: auto; } /* Reserve 3 lines so descriptions of different length keep the bottom-anchored title / desc / tech group the same height — otherwise the titles sit at different heights across the row. */ html.theme-legacy .card p { font-size: 13px; color: var(--ink-dim); line-height: 1.65; min-height: 4.95em; transition: color .18s; } html.theme-legacy .card-tech { font-family: var(--display); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; transition: color .18s; } html.theme-legacy .card-arrow { position: absolute; bottom: 22px; right: 24px; font-size: 22px; color: var(--ink-faint); transition: transform .2s, color .18s; } html.theme-legacy .card:hover { background: var(--acid); color: var(--acid-ink); } html.theme-legacy .card:hover p { color: color-mix(in srgb, var(--acid-ink) 72%, transparent); } html.theme-legacy .card:hover .card-count, html.theme-legacy .card:hover .card-count b, html.theme-legacy .card:hover .card-tech { color: color-mix(in srgb, var(--acid-ink) 60%, transparent); } html.theme-legacy .card:hover .card-arrow { color: var(--acid-ink); transform: translate(6px, -4px); } /* ===== FOOTER ===== */ html.theme-legacy .site-foot { position: relative; z-index: 2; margin-top: 0; background: #0c0c0d; overflow: hidden; } /* top divider */ html.theme-legacy .foot-accent { position: relative; z-index: 3; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acid) 55%, transparent) 22%, color-mix(in srgb, var(--acid) 75%, transparent) 50%, color-mix(in srgb, var(--acid) 55%, transparent) 78%, transparent); } /* fine checkered grid, only near the top, fading downward in a dome */ html.theme-legacy .site-foot::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(85% 78% at 50% -6%, #000 8%, transparent 62%); mask-image: radial-gradient(85% 78% at 50% -6%, #000 8%, transparent 62%); pointer-events: none; } /* soft lamp glow spilling from the top edge (about half visible) */ html.theme-legacy .foot-glow { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 90vw); height: 440px; z-index: 1; background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--acid) 20%, transparent), transparent 70%); filter: blur(28px); opacity: .55; pointer-events: none; } html.theme-legacy .foot-inner { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); } /* top band: the brand, alone above the section columns */ html.theme-legacy .foot-top { display: flex; align-items: center; padding: clamp(40px, 6vh, 64px) 0 34px; border-bottom: 1px solid var(--line); } html.theme-legacy .foot-word { margin-right: 0; } /* section columns */ html.theme-legacy .foot-grid { padding: clamp(28px, 5vh, 44px) 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 20px; } html.theme-legacy .foot-col { display: flex; flex-direction: column; gap: 8px; } html.theme-legacy .foot-head { font-family: var(--display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--acid); margin-bottom: 6px; width: fit-content; border-bottom: 1px solid transparent; transition: border-color .15s; } html.theme-legacy .foot-head:hover { border-color: var(--acid); } html.theme-legacy .foot-col a:not(.foot-head) { font-size: 12px; color: var(--ink-dim); width: fit-content; transition: color .15s; } html.theme-legacy .foot-col a:not(.foot-head):hover { color: var(--acid); } html.theme-legacy .foot-bar { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0 26px; font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); } html.theme-legacy .foot-bar a { color: var(--acid); transition: opacity .15s; } html.theme-legacy .foot-bar a:hover { opacity: .75; } /* ===== 21st-inspired: goo gradient field in hero ===== */ html.theme-legacy .hero-goo { position: fixed; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; overflow: hidden; opacity: .35; z-index: 0; -webkit-mask-image: radial-gradient(72% 78% at 50% 42%, #000 45%, transparent 100%); mask-image: radial-gradient(72% 78% at 50% 42%, #000 45%, transparent 100%); } /* Laid out at half size and scaled ×2, so the goo filter chain runs on a quarter of the pixels; blur radii are halved to compensate (they scale with the transform), and the SVG filter's stdDeviation is halved in the markup. */ html.theme-legacy .goo-field { position: absolute; left: 0; top: 0; width: 50%; height: 50%; transform: scale(2); transform-origin: 0 0; filter: url(#goo) blur(17px); } html.theme-legacy .goo-field i { position: absolute; width: 22vmin; height: 22vmin; border-radius: 50%; mix-blend-mode: lighten; opacity: .5; } html.theme-legacy .goo-field .g1 { background: radial-gradient(circle at center, var(--goo1, var(--acid)) 0, transparent 55%); top: 4%; left: 14%; animation: lg-goo-a 17s ease-in-out infinite; } html.theme-legacy .goo-field .g2 { background: radial-gradient(circle at center, var(--goo2, var(--acid)) 0, transparent 55%); top: 26%; left: 52%; animation: lg-goo-b 23s ease-in-out infinite -6s; } html.theme-legacy .goo-field .g3 { background: radial-gradient(circle at center, var(--goo3, var(--acid)) 0, transparent 55%); top: -8%; left: 66%; animation: lg-goo-a 27s ease-in-out infinite -12s; } html.theme-legacy .goo-field .g4 { background: radial-gradient(circle at center, var(--goo4, var(--acid)) 0, transparent 55%); top: 34%; left: -4%; animation: lg-goo-b 21s ease-in-out infinite -3s; opacity: .3; } html.theme-legacy .goo-field .g-pointer { width: 15vmin; height: 15vmin; background: radial-gradient(circle at center, var(--acid) 0, transparent 55%); opacity: .45; top: 0; left: 0; will-change: transform; } /* travel distances are halved too — the ×2 scale doubles them back */ @keyframes lg-goo-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4.5vmin, 6vmin) scale(1.12); } 66% { transform: translate(-3.5vmin, 2.5vmin) scale(.9); } } @keyframes lg-goo-b { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-5.5vmin, -4vmin) scale(.94); } 66% { transform: translate(4vmin, -6vmin) scale(1.1); } } /* ===== running light along Featured row separators ===== */ html.theme-legacy #featured { position: relative; } html.theme-legacy .feature-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acid) 80%, #fff) 50%, transparent); background-size: 45% 100%; background-repeat: no-repeat; background-position: -100% 0; opacity: .5; animation: lg-sep-run 7s linear infinite; /* Same split as the panel skin, off the same inline --fi. */ animation-delay: calc(var(--fi, 0) * -7s / 12); pointer-events: none; } html.theme-legacy .feature-row:hover::after { opacity: 0; } @keyframes lg-sep-run { from { background-position: -100% 0; } to { background-position: 200% 0; } } /* ===== lg-glare slide on primary buttons (Glow Button / 5793 mechanic) ===== */ html.theme-legacy .btn { position: relative; overflow: hidden; } html.theme-legacy .btn-primary::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 36%; left: 0; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-220%) skewX(-18deg); pointer-events: none; } html.theme-legacy .btn-primary:hover::after { animation: lg-glare .7s ease-out; } @keyframes lg-glare { from { transform: translateX(-220%) skewX(-18deg); } to { transform: translateX(480%) skewX(-18deg); } } /* ===== glowing edges on default buttons (Glowing Button / 2327 mechanic) ===== */ html.theme-legacy .btn:not(.btn-primary) { isolation: isolate; } html.theme-legacy .btn:not(.btn-primary)::before, html.theme-legacy .btn:not(.btn-primary)::after { content: ''; position: absolute; z-index: -1; top: 22%; height: 56%; width: 2px; background: var(--acid); opacity: 0; transition: opacity .2s ease, transform .28s ease; pointer-events: none; } html.theme-legacy .btn:not(.btn-primary)::before { left: 0; box-shadow: 2px 0 14px 1px var(--acid); transform: translateX(-5px); } html.theme-legacy .btn:not(.btn-primary)::after { right: 0; box-shadow: -2px 0 14px 1px var(--acid); transform: translateX(5px); } html.theme-legacy .btn:not(.btn-primary):hover::before, html.theme-legacy .btn:not(.btn-primary):hover::after { opacity: .9; transform: translateX(0); } @media (max-width: 760px), (prefers-reduced-motion: reduce) { html.theme-legacy .hero-goo, html.theme-legacy .feature-row::after { display: none; } } @media (prefers-reduced-motion: reduce) { /* The tearing is decoration; without motion it is just an unreadable double image. The offset fill is not motion, so it stays — the line keeps its misregistered print, it simply holds still. (The chromatic ghost goes with the animation: its opacity is only ever set in the keyframes.) */ html.theme-legacy .hero h1 .glitch, html.theme-legacy .hero h1 .glitch::before, html.theme-legacy .hero h1 .glitch::after { animation: none; } } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { html.theme-legacy .site-nav { display: none; } html.theme-legacy .burger { display: flex; } } @media (max-width: 760px) { html.theme-legacy .feature-row { grid-template-columns: 1fr 32px; grid-template-areas: "body arrow" "status arrow"; row-gap: 12px; } html.theme-legacy .feature-num { display: none; } html.theme-legacy .feature-body { grid-area: body; } html.theme-legacy .feature-status { grid-area: status; justify-self: start; transform: none; } html.theme-legacy .feature-arrow { grid-area: arrow; align-self: center; justify-self: end; } html.theme-legacy .card { border-right: none; } html.theme-legacy .foot-grid { grid-template-columns: repeat(2, 1fr); } html.theme-legacy .spotlight { display: none; } } @media (prefers-reduced-motion: reduce) { html.theme-legacy { scroll-behavior: auto; } html.theme-legacy .tape-track { animation: none; } html.theme-legacy .reveal { opacity: 1; transform: none; transition: none; } html.theme-legacy *, html.theme-legacy *::before, html.theme-legacy *::after { transition-duration: 0.01ms !important; } } /* ===== animations on/off toggle (bottom-left) ===== */ html.theme-legacy .motion-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 80; display: flex; align-items: center; height: 44px; padding: 0; background: rgba(11, 11, 12, 0.92); border: 1px solid var(--line); border-radius: 0; color: var(--ink-dim); cursor: pointer; font-family: var(--display); overflow: hidden; } html.theme-legacy .motion-toggle:hover, html.theme-legacy .motion-toggle:focus-visible { color: var(--ink); border-color: var(--line-strong); } html.theme-legacy .motion-icon { display: flex; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 42px; flex: 0 0 42px; } html.theme-legacy .motion-icon i { width: 3px; height: 14px; background: currentColor; } /* Paused state swaps the two pause bars for a play triangle (see .no-anim below). */ html.theme-legacy .motion-icon::before { content: ""; display: none; width: 0; height: 0; margin-left: 3px; border: 8px solid transparent; border-right: 0; border-left: 13px solid var(--acid); } html.theme-legacy .motion-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; transition: max-width .35s ease, opacity .25s ease, padding-right .35s ease; } html.theme-legacy .motion-toggle:hover .motion-label, html.theme-legacy .motion-toggle:focus-visible .motion-label { max-width: 260px; opacity: 1; padding-right: 16px; } html.theme-legacy .motion-on { display: none; } html.theme-legacy.no-anim .motion-on { display: inline; } html.theme-legacy.no-anim .motion-off { display: none; } /* Paused: hide the pause bars, show the play triangle. */ html.theme-legacy.no-anim .motion-icon i { display: none; } html.theme-legacy.no-anim .motion-icon::before { display: block; } /* ===== animations disabled (.no-anim on , toggled by that button). The accent stays on the random colour picked at load; main.js stops the rotation. Everything self-moving (marquee, goo, glitch, running lights, spotlight) is off; hover states stay but snap instantly — the global animation/transition kill below is what makes them instant. ===== */ html.theme-legacy.no-anim *, html.theme-legacy.no-anim *::before, html.theme-legacy.no-anim *::after { animation: none !important; transition: none !important; } html.theme-legacy.no-anim { scroll-behavior: auto; } html.theme-legacy.no-anim .spotlight, html.theme-legacy.no-anim .hero-goo, html.theme-legacy.no-anim .feature-row::after { display: none; } html.theme-legacy.no-anim .reveal { opacity: 1; transform: none; } /* ============================================================ BRIDGE — markup that changed after this snapshot was taken ============================================================ The theme is frozen, the page is not: since it was captured, the hero's goo field was rebuilt as an aurora, the text arrows became inline SVG, the buttons grew a chevron plate, the wordmark grew glitch copies and the featured badge moved into the corner. Those live in main.css and would otherwise show through, because the snapshot has no rules to override them. Everything below either re-points an old rule at the new element or puts a new decoration back to sleep. Keep it here rather than editing the snapshot, so the two concerns stay separable. */ /* The goo field kept its geometry when it became the aurora — same half-size layout, same ×2 scale, so the pointer math in main.js still lands — only the class names and the filter changed. Re-point the old look at them. */ html.theme-legacy .hero-aurora { opacity: .35; -webkit-mask-image: radial-gradient(72% 78% at 50% 42%, #000 45%, transparent 100%); mask-image: radial-gradient(72% 78% at 50% 42%, #000 45%, transparent 100%); } html.theme-legacy .aurora-field { filter: url(#goo) blur(17px); } html.theme-legacy .aurora-field i { width: 22vmin; height: 22vmin; mix-blend-mode: lighten; opacity: .5; } /* The blobs kept their names too, so the snapshot's coordinates and its faster, two-waypoint clocks still fit them — without this the field drifts on the new skin's slow aurora timings and the pointer blob comes out at the wrong size. */ html.theme-legacy .aurora-field .g1 { background: radial-gradient(circle at center, var(--goo1, var(--acid)) 0, transparent 55%); top: 4%; left: 14%; animation: lg-goo-a 17s ease-in-out infinite; } html.theme-legacy .aurora-field .g2 { background: radial-gradient(circle at center, var(--goo2, var(--acid)) 0, transparent 55%); top: 26%; left: 52%; animation: lg-goo-b 23s ease-in-out infinite -6s; } html.theme-legacy .aurora-field .g3 { background: radial-gradient(circle at center, var(--goo3, var(--acid)) 0, transparent 55%); top: -8%; left: 66%; animation: lg-goo-a 27s ease-in-out infinite -12s; } html.theme-legacy .aurora-field .g4 { background: radial-gradient(circle at center, var(--goo4, var(--acid)) 0, transparent 55%); top: 34%; left: -4%; animation: lg-goo-b 21s ease-in-out infinite -3s; opacity: .3; } html.theme-legacy .aurora-field .g-pointer { width: 15vmin; height: 15vmin; background: radial-gradient(circle at center, var(--acid) 0, transparent 55%); opacity: .45; } /* New decorations the snapshot never knew about — off. */ html.theme-legacy .btn::before { content: none; } html.theme-legacy .btn::after { -webkit-mask: none; mask: none; background-color: transparent; width: auto; height: auto; } /* Both pseudo-elements are spoken for in this skin — on the default button they are the glowing edges (which outrank the reset above on their own), on the primary ::after is the glare band. The chevron reset takes that band's box with it, so hand it back. */ html.theme-legacy .btn-primary::after { width: 36%; height: auto; } html.theme-legacy .wordmark-box::before, html.theme-legacy .wordmark-box::after, html.theme-legacy .wordmark-text::before, html.theme-legacy .wordmark-text::after { content: none; animation: none; } html.theme-legacy .card::before, html.theme-legacy .card::after { content: none; } /* The mono ordinals over the block headings, and the corner mark on the external nav link, are the new skin's marks. Both need an id in the selector to be reached: `#featured .block-head::before` carries one. */ html.theme-legacy #featured .block-head::before, html.theme-legacy #sections .block-head::before { content: none; } html.theme-legacy .site-nav .nav-ext::after { content: none; } /* The lattice under the footer's top edge is the snapshot's own, but it is drawn from a quarter-strength ink in the new skin — at .25 it disappears. */ html.theme-legacy .site-foot::before { content: ''; opacity: 1; } /* Surfaces the new skin fills that the snapshot left bare. */ html.theme-legacy .site-nav .nav-ext { background: none; } html.theme-legacy .hero-stats { background: none; box-shadow: none; } html.theme-legacy .btn { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* …but not the primary pill: the snapshot floods that one with the accent, and an unscoped reset here would win on order and wash it out. */ html.theme-legacy .btn:not(.btn-primary) { background: none; } /* Opaque menu, so the blur behind it is a layer paid for and never seen. */ html.theme-legacy .mobile-menu { backdrop-filter: none; -webkit-backdrop-filter: none; } /* The plate is flat here and it is a flex child: a 32px basis from the new skin would stretch the snapshot's 30px square into a rectangle. */ html.theme-legacy .wordmark-box { flex: 0 0 auto; box-shadow: none; } /* The active language keeps its tick, but on the flooded hover row the accent would be drawn on itself. */ html.theme-legacy .lang-option:hover.active::after { color: var(--acid-ink); } /* The status badge sat in the flow when this snapshot was taken. */ html.theme-legacy .feature-status { position: static; height: auto; padding: 4px 10px; border-radius: 0; background: none; box-shadow: none; } html.theme-legacy .feature-status::before { content: none; } /* Arrows are SVG now. The snapshot styled a glyph, so size the icon instead and strip the chip the new skin gives the card mark. */ html.theme-legacy .card-arrow { width: auto; height: auto; border: 0; background: none; box-shadow: none; display: block; } html.theme-legacy .card-arrow svg { width: 20px; height: 20px; display: block; } html.theme-legacy .feature-arrow svg { width: 22px; height: 22px; } /* Brand voice belongs to the new skin: the snapshot set its own faces. */ html.theme-legacy .wordmark, html.theme-legacy .wordmark-box, html.theme-legacy .btn { font-family: var(--display); } /* ===== hard corners ===== Nothing in this skin is rounded except the flag thumbnails and the round blobs of the goo field — everything else is cut square. The new skin rounds a surface wherever it draws one, and none of those rules are answered by the snapshot, so they come through. Listed by name rather than swept with a universal selector, which would flatten the two round things as well. */ html.theme-legacy .wordmark-box, html.theme-legacy .site-nav a, html.theme-legacy .lang-toggle, html.theme-legacy .lang-dropdown, html.theme-legacy .lang-option, html.theme-legacy .burger, html.theme-legacy .burger span, html.theme-legacy .mobile-menu, html.theme-legacy .mobile-menu-group a, html.theme-legacy .mobile-menu-foot, html.theme-legacy .btn, html.theme-legacy .hero-stats, html.theme-legacy .feature-row, html.theme-legacy .feature-status, html.theme-legacy .card, html.theme-legacy .card-arrow, html.theme-legacy .corner-switches, html.theme-legacy .corner-btn, html.theme-legacy .motion-toggle, html.theme-legacy .theme-toggle, html.theme-legacy .motion-icon, html.theme-legacy .motion-icon i, html.theme-legacy .motion-label { border-radius: 0; } /* ===== featured rows and section cards ===== The reskin turned both into window panels: a translucent fill, a full 1px box, a lit top hairline, a raised shadow and a lift on hover, plus a pointer-tracked wash and a chevron chip. The snapshot draws them as one hard grid — hairline separators, no fill, and the accent flooding the whole row on hover with the text inverted. The snapshot's own rules above still say all of that; what it never had to say is that a panel is *not* there, so the panel is unwound here, surface by surface. */ html.theme-legacy .feature-list { display: block; /* was a 12px-gap column of separate cards */ gap: 0; } html.theme-legacy .feature-row { background: none; border-top: 0; border-right: 0; border-left: 0; /* the snapshot rails on the bottom edge only */ box-shadow: none; /* no lit top hairline */ overflow: visible; /* the running light sits at bottom: -1px, outside the box */ } html.theme-legacy .feature-row::before { content: none; } /* the corner orb */ html.theme-legacy .feature-row:hover { border-color: var(--line); transform: none; /* no lift: the flood is the whole answer here */ box-shadow: none; } html.theme-legacy .card { background: none; border-top: 0; border-left: 0; /* the grid draws each cell's right + bottom */ box-shadow: none; } html.theme-legacy .card:hover { border-color: var(--line); transform: none; box-shadow: none; } /* The card mark is a bare glyph in this skin, not a chip that charges. */ html.theme-legacy .card:hover .card-arrow { background: none; border: 0; box-shadow: none; } html.theme-legacy .card:hover .card-count, html.theme-legacy .card:hover .card-tech { transform: none; } /* ===== marquee ===== The band was renamed .lg-tape when this file was prefixed — the rename was meant for the keyframes and took the class with it, so none of it reaches the .tape in the markup and the new skin's strip shows through instead. It is re-pointed here, and on the way it gets what was asked of it in this skin: a deeper field above and below the words, and no mask at the ends, so the strip runs edge to edge instead of emerging from and vanishing into shadow. (The new skin keeps its own fade — that rule is untouched.) */ html.theme-legacy .tape { margin: 0 calc(-50vw + 50%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0e0e0f; padding: clamp(22px, 3.4vh, 34px) 0; -webkit-mask-image: none; mask-image: none; } html.theme-legacy .tape .w, html.theme-legacy .tape .d { font-family: var(--display); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); margin: 0 17px; /* equal gap on both sides of every token */ } html.theme-legacy .tape .d { color: var(--acid); letter-spacing: 0; opacity: 1; } /* ===== hero heading ===== The new heading pours a white→accent gradient through the text. The snapshot's is flat ink with the second line knocked out to an accent outline — and a background clipped to the h1 fills that outline back in, because the clip takes the descendants' glyphs too. */ html.theme-legacy .hero h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); -webkit-text-fill-color: currentColor; } /* ===== the two corner switches ===== The bottom-left control is a pair now — animations on the left, skin on the right — inside .corner-switches. The snapshot pinned its single button to the viewport itself, so the pin moves to the rail and the buttons go back into its flow; left as they were, the two would sit on top of each other. Both wear the snapshot's chrome: hairline box, hard corners, a square icon cell and a label that unrolls on hover. */ html.theme-legacy .corner-switches { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 0; max-width: calc(100vw - 36px); } html.theme-legacy .corner-btn, html.theme-legacy .corner-switches .motion-toggle, html.theme-legacy .corner-switches .theme-toggle { position: static; left: auto; bottom: auto; /* the rail carries the pin */ display: flex; align-items: center; flex: 0 1 auto; min-width: 0; height: 44px; padding: 0; background: rgba(11, 11, 12, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line); border-radius: 0; box-shadow: none; color: var(--ink-dim); cursor: pointer; font-family: var(--display); overflow: hidden; } /* Pressed = "this is the skin you are looking at"; hover still speaks over it. */ html.theme-legacy .theme-toggle[aria-pressed="true"] { color: var(--acid); border-color: color-mix(in srgb, var(--acid) 55%, transparent); } html.theme-legacy .corner-btn:hover, html.theme-legacy .corner-btn:focus-visible { color: var(--ink); border-color: var(--line-strong); } html.theme-legacy .corner-btn .motion-icon { display: flex; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 42px; flex: 0 0 42px; } /* The skin switch's cell holds a flask; the animation switch's holds the snapshot's own two bars, which become a play triangle while animations are off. Only one of them has bars, so the paused triangle is scoped to that button — the snapshot's blanket rule would sprout one on both. */ html.theme-legacy .corner-btn .motion-icon svg { display: block; } html.theme-legacy.no-anim .motion-icon::before { display: none; } html.theme-legacy.no-anim .motion-toggle .motion-icon::before { display: block; } html.theme-legacy .corner-btn .motion-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; transition: max-width .35s ease, opacity .25s ease, padding-right .35s ease; } /* One label is open at a time, and at 360px the pair plus the widest localized line still has to fit: the cap is the viewport less the collapsed sibling. */ html.theme-legacy .corner-btn:hover .motion-label, html.theme-legacy .corner-btn:focus-visible .motion-label { max-width: min(260px, calc(100vw - 150px)); opacity: 1; padding-right: 16px; } /* Both buttons carry the same .motion-off/.motion-on pair, so each label has to follow its own button's pressed state. The snapshot keyed it off html.no-anim — right for the animation switch, but it would flip the skin switch's label too every time animations went off. */ html.theme-legacy.no-anim .motion-on { display: none; } html.theme-legacy.no-anim .motion-off { display: inline; } html.theme-legacy .corner-btn[aria-pressed="true"] .motion-on { display: inline; } html.theme-legacy .corner-btn[aria-pressed="true"] .motion-off { display: none; } /* The rail sits in the bottom-right corner, so the clearance the last footer line needs is under it, not beside it — and only on the widths where the two actually meet. Sideways padding knocked the copyright out of alignment with the columns above it at every width, including the ones where the rail was nowhere near. */ @media (max-width: 1340px) { html.theme-legacy .foot-bar { padding-bottom: 60px; } } /* One rounded leftover: the CTA's chevron plate comes from main.css. */ html.theme-legacy .btn::before, html.theme-legacy .btn::after { border-radius: 0; } /* Two more glyphs of room: "ОТКЛЮЧИТЬ АНИМАЦИИ" was clipped by 2px at 360px. */ html.theme-legacy .motion-label { max-width: min(260px, calc(100vw - 146px)); } /* The motion label follows html.no-anim (it must be right before JS runs); only the theme label follows aria-pressed. Keying both off aria-pressed agreed by coincidence, not by design. */ html.theme-legacy .motion-toggle .motion-on { display: none; } html.theme-legacy .motion-toggle .motion-off { display: inline; } html.theme-legacy.no-anim .motion-toggle .motion-on { display: inline; } html.theme-legacy.no-anim .motion-toggle .motion-off { display: none; } /* The header's nav pills and language button were given a face of their own in main.css after this snapshot was taken. That face belongs to the new skin; here the bar has always spoken in the display grotesque, so it keeps it. */ html.theme-legacy .site-nav a, html.theme-legacy .lang-toggle { font-family: var(--display); }