/* 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); } html.theme-legacy .hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--acid); position: relative; /* Block on its own line, pushed to the right edge of the column — a deliberate off-balance for the second line. The glitch ::before/::after inherit the alignment, so their copies stay registered with the text. */ display: block; text-align: right; } /* ===== hero glitch ===== Three stacked copies of the second line, all reading `data-text` — which main.js re-syncs after every locale swap, so the effect survives a language change. ::before is the fill: the accent poured into the letterforms and knocked a few pixels off the outline, so the print looks out of register. ::after is the chromatic ghost. Nothing runs continuously, and 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 .outline::before, html.theme-legacy .hero h1 .outline::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; transition: opacity .18s; } /* The fill, offset from the stroke it belongs to. */ html.theme-legacy .hero h1 .outline::before { 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); } /* Combed into slivers, so this layer can never appear as a whole second copy. */ html.theme-legacy .hero h1 .outline::after { 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); } /* Hovering pours the fill in; the tearing is the animation's business. */ html.theme-legacy .hero h1:hover .outline::before { opacity: .92; animation: lg-glitch-fill 6.4s steps(1, end) infinite; } html.theme-legacy .hero h1:hover .outline::after { animation: lg-glitch-chroma 8.6s steps(1, end) infinite; } html.theme-legacy .hero h1:hover .outline { animation: lg-glitch-stroke 6.4s steps(1, end) infinite; } /* 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 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; } 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: 40px; 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: brand on the left, featured buttons on the right */ html.theme-legacy .foot-top { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: clamp(40px, 6vh, 64px) 0 34px; border-bottom: 1px solid var(--line); } html.theme-legacy .foot-word { margin-right: 0; } html.theme-legacy .foot-featured { display: flex; gap: 10px; flex-wrap: wrap; } html.theme-legacy .foot-featured a { font-family: var(--display); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); padding: 9px 15px; border: 1px solid color-mix(in srgb, var(--acid) 30%, transparent); transition: background .15s, color .15s, border-color .15s; } html.theme-legacy .foot-featured a:hover { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); } /* 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; pointer-events: none; } html.theme-legacy .feature-row:nth-child(2)::after { animation-delay: -1.75s; } html.theme-legacy .feature-row:nth-child(3)::after { animation-delay: -3.5s; } html.theme-legacy .feature-row:nth-child(4)::after { animation-delay: -5.25s; } 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 — hovering still does something, it simply holds still. */ html.theme-legacy .hero h1:hover .outline, html.theme-legacy .hero h1:hover .outline::before, html.theme-legacy .hero h1:hover .outline::after { animation: none; } html.theme-legacy .hero h1:hover .outline::after { opacity: 0; } } /* ===== 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 .foot-featured { flex-direction: column; align-items: flex-start; gap: 12px; } 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, html.theme-legacy .foot-featured a { 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 .foot-featured a, 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; left: 18px; bottom: 18px; z-index: 80; display: flex; align-items: flex-end; gap: 8px; 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 switch rail is two buttons wide now and pinned in the same corner as the snapshot's own control was — the last footer line has to step around it. */ html.theme-legacy .foot-bar { padding-left: 118px; } /* 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); }