/* ========================================================================= app.css - layout and components. Load order: glass.css -> theme.css -> app.css glass.css the material: three optical layers driven by --lg-* theme.css tokens, the animated scene, the baked --lg-* presets app.css this file: layout, typography, components, responsive This file is written against the HTML that tools/build.js actually emits (read the built pages under dist/, not a spec). Class names are the templates' own semantic names, not a vocabulary invented here. Where ui.js renders its own markup at runtime, its class names are added to the same selector lists rather than given parallel rules. ========================================================================= TWO HARD RULES FOR ANY CSS TOUCHING A .lg ELEMENT ========================================================================= 1. Never write ::before or ::after on a .lg element. glass.css owns both (::before is the refracted, blurred, tinted backdrop; ::after is the specular rim). Redefining either deletes an optical layer. Add a child element, or use the material's own highlight control: --lg-spec with --lg-spec-x / --lg-spec-y. Adding a *property* to those pseudo-elements is fine (see .dropzone::after, which only adds an outline); redeclaring `content` is what breaks them. 2. Never set border-radius on a .lg element. Set --lg-radius, so the rim mask and the refraction lens map agree with the visible corner. ========================================================================= MARKUP CONTRACT (as built) ========================================================================= document (build / theme.js) (theme.js) is the FIRST element in body and carries the id itself: glass.js appends nodes into it, and a inside a
never applies. It is positioned off-screen inline; this file does not restyle it. a.skip-link[href="#main"] header.site-header.lg.glass-bar nav.site-nav a.brand > span.brand-name + span.brand-tagline ul.nav-links > li > a (aria-current="page" marks the active one) div.nav-toggles a.lang-toggle.lg.glass-pill.lg--live[data-lang-toggle][lang][hreflang] span.flag (contains a flag emoji; see the .flag rule) + span.lang-code button.theme-toggle.lg.glass-pill.lg--live[data-theme-toggle][aria-pressed] svg.icon.icon-sun + svg.icon.icon-moon main#main <- the page container: max-width, gutters and vertical rhythm article.hero | article.tool | article.native (one per page) section.howto, section.faq, nav.crosslinks (shared tail) home h1, p.lede, p.hero-subhead, div.cards > a.card.lg.glass-card.lg--live > h2 + p + span.card-cta section.angle > h2 + p + p.hero-note section.trust > h2 + ul.trust-list > li.lg.glass-card tool h1, p.lede, p.tool-subtitle section.workbench div.dropzone.lg.glass-panel.lg--live[data-dropzone] p.dz-idle, p.dz-hint, label.dz-pick.lg.glass-cta.lg--live[for=file-input], input#file-input.visually-hidden[data-file-input], p.dz-formats div.warnings.lg.glass-panel[data-warnings][hidden] section.probe.lg.glass-panel[data-probe-panel][hidden] h3 + dl.probe-grid > div > dt + dd[data-probe-field] form.options.lg.glass-panel[data-options] h3 fieldset.opt.opt-factor|.opt-mode|.opt-audio|.opt-quality legend label.chip.lg.glass-pill.lg--live input[type=radio][name][value] span.chip-label + span.chip-caption p.opt-note (audio group only) details.opt.opt-advanced > summary label.check > input[type=checkbox] + span.check-label + span.check-caption section.plan.lg.glass-panel[data-plan][hidden] h3 + dl.plan-grid > div > dt + dd[data-plan-field] div.actions button.lg.glass-cta.lg--live[data-start] button.lg.glass-pill.lg--live[data-cancel][hidden] section.progress.lg.glass-panel[data-progress][hidden] h3, progress[data-progress-bar][max][value], p.progress-phase, p.progress-counter, p.progress-eta, p.progress-keep section.result.lg.glass-panel[data-result][hidden] h3, p.result-summary, video.result-preview, p.result-actions > a.lg.glass-cta.lg--live[data-result-download] + button.lg.glass-pill.lg--live[data-result-again] section.angle > h2 + p + p.angle-links > a, a local h1, p.lede, p.native-intro, p.native-varshint div.os-switch[data-native-tabs] > button.lg.glass-pill[data-os][aria-pressed] p.native-copyhint section.native-section > h2 + p div.cmd[data-os-panel][data-os-active?] h3.cmd-os div.cmd-line(.cmd-vars) pre.lg.glass-code > code[data-native] button.lg.glass-pill.lg--live[data-copy] p.cmd-note section.angle > h2 + p + p.native-note + p.angle-links shared section.howto > h2 + p.howto-intro + ol.howto-steps > li.howto-step.lg.glass-card > h3 + p section.faq > h2 + div.faq-list > article.faq-item.lg.glass-card > h3 + p nav.crosslinks > ul > li > a + span footer.site-footer p.footer-privacy nav.mirrors > h2 + ul > li > a + span p.footer-made, p.footer-rights > small, p.footer-build > small > time i18n hooks (owned by i18n.js, styled nowhere): [data-i18n="key"] [data-i18n-attr="attr:key"] [data-native="path"] ui.js runtime classes, rendered inside the panels above and folded into the same rules: .cvs-facts(__row|__key|__val) .cvs-seg(__item) .cvs-switch .cvs-field(__label|__caption|__note) .cvs-panel__title .cvs-progress__(phase|pct|track|bar|meta|engine|fallback|keep) .cvs-result__(video|summary|name|actions) .cvs-btn(--primary|--ghost) .cvs-warnings__(list|item[data-warning]) .cvs-error(__text) State classes: .is-dragover .is-busy .is-locked .is-selected .is-disabled .is-on .is-copied .is-hidden ========================================================================= */ /* ------------------------------------------------------------------------- Reset ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; /* clears the sticky header on anchor jumps */ } body { margin: 0; min-height: 100svh; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-1); background: transparent; /* the scene lives on , see theme.css */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* NOTE: never add isolation / transform / filter / opacity to . Any of them makes it a stacking context and buries the scene layers, which sit at negative z-index in the root stacking context. */ } h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend, pre { margin: 0; padding: 0; } ul, ol { list-style: none; } fieldset { border: 0; min-width: 0; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--selection-bg); color: var(--text-1); } /* ui.js hides panels with the attribute AND the class; several of them are flex or grid containers, which would otherwise beat plain [hidden]. */ [hidden] { display: none !important; } .is-hidden { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- Focus. One ring for the whole site, drawn outside the box: an inset ring would be swallowed by the specular rim on glass. Modern engines follow the element's own border-radius, so nothing here restates a radius. ------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .skip-link { position: fixed; top: var(--sp-3); left: 50%; translate: -50% -200%; z-index: var(--z-modal); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-weight: 650; transition: translate var(--dur-2) var(--ease-out); } .skip-link:focus-visible { translate: -50% 0; } /* ------------------------------------------------------------------------- The page container and the vertical rhythm. The templates emit no wrapper div, so
itself is the container: it owns the max width, the gutters and the spacing between page sections. Every section-level block is a flex column with a gap, which keeps the rhythm consistent and sidesteps margin collapsing entirely. ------------------------------------------------------------------------- */ main { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 104px); width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(24px, 5vw, 64px) clamp(64px, 9vw, 120px); } .hero, .tool, .native, .workbench, .angle, .trust, .howto, .faq, .native-section, .crosslinks { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; } /* the tool stack breathes a little more: each panel is its own step */ .workbench { gap: clamp(16px, 2.4vw, 24px); } .hero, .tool, .native { gap: clamp(20px, 3vw, 32px); } /* ------------------------------------------------------------------------- Typography. Headings have no classes in the templates, so they are styled by element inside
and inside the glass cards that contain them. ------------------------------------------------------------------------- */ main h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 760; max-width: 18ch; text-wrap: balance; } main h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 720; max-width: 26ch; text-wrap: balance; } main h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 680; letter-spacing: -0.012em; } main p { max-width: 72ch; text-wrap: pretty; } /* The panel headings inside the workbench are labels, not titles: they are small, uppercase and quiet so the controls under them lead. */ .probe > h3, .options > h3, .plan > h3, .progress > h3, .result > h3, .cvs-panel__title { font-size: var(--fs-xs); font-weight: 730; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3); max-width: none; } /* The opening paragraph of every page. */ .lede { font-size: var(--fs-lead); color: var(--text-2); max-width: 64ch; } /* Secondary standfirsts, all the same weight of voice. */ .hero-subhead, .tool-subtitle, .howto-intro, .native-intro { font-size: var(--fs-lead); color: var(--text-2); max-width: 62ch; } /* Two full sentences defining INPUT / OUTPUT / F / FPS for the 89 command blocks below it. It is body prose, not a caption: it needs three lines at 360px and two on desktop, so it gets body size and a normal measure. */ .native-varshint { color: var(--text-2); max-width: 70ch; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: rgba(var(--accent-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .18); } /* Asides: quieter than body copy, never the first thing read. */ .hero-note, .native-note, .native-copyhint, .opt-note, .cmd-note, .progress-keep, .cvs-field__note { font-size: var(--fs-sm); color: var(--text-3); max-width: 68ch; } /* Prose links are the one documented exception to the 44px target rule: they are inline runs inside a sentence, where a forced block height would break the line box. Every navigational and control link is 44px. */ main a:not([class]) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--accent-rgb), .45); transition: text-decoration-color var(--dur-2) var(--ease-out); } main a:not([class]):hover { text-decoration-color: var(--accent); } /* ------------------------------------------------------------------------- Header. The glass is on
itself, so the sticky element and the material are the same box. It is inset from the viewport rather than full bleed: a zero-inset sticky panel with a backdrop-filter reads as a hard band cutting the page, which is the opposite of a floating functional layer. ------------------------------------------------------------------------- */ .site-header { position: sticky; top: var(--sp-3); z-index: var(--z-header); width: calc(100% - var(--gutter) * 2); max-width: var(--container); margin: var(--sp-3) auto var(--sp-2); padding: var(--sp-2) var(--sp-3); } .site-nav { display: flex; align-items: center; gap: var(--sp-4); min-height: 48px; } .brand { display: flex; flex-direction: column; gap: 1px; justify-content: center; min-width: 0; min-height: 44px; padding: var(--sp-2) var(--sp-3); margin-left: calc(var(--sp-1) * -1); border-radius: var(--r-md); transition: color var(--dur-2) var(--ease-out); } .brand-name { font-size: 1rem; font-weight: 720; letter-spacing: -0.015em; white-space: nowrap; transition: color var(--dur-2) var(--ease-out); } .brand:hover .brand-name { color: var(--accent); } /* The tagline is a full sentence: it is useful markup for search engines and too long for the bar, so it is shown only where there is real room. */ .brand-tagline { display: none; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; } .nav-links { display: flex; align-items: center; gap: var(--sp-1); margin-inline: auto; min-width: 0; } .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 550; color: var(--text-2); white-space: nowrap; transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .nav-links a:hover { color: var(--text-1); background: rgba(var(--accent-rgb), .12); } .nav-links a[aria-current="page"] { color: var(--text-1); background: rgba(var(--accent-rgb), .18); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); } .nav-toggles { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex: none; } /* --- language pill ------------------------------------------------------- The span holds a flag emoji, which Windows refuses to render as a flag (it shows the two regional-indicator letters instead). So the glyph is collapsed to zero font-size and a real SVG flag is painted behind it: the emoji stays in the DOM for assistive tech and copy-paste, and every platform sees the same picture. Which flag is chosen from the toggle's own lang attribute, which is the language the link leads TO. */ .lang-toggle, .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; min-width: 44px; padding: 0 var(--sp-3); color: var(--text-1); flex: none; } .lang-toggle { padding-inline: var(--sp-2) var(--sp-3); } .flag { display: block; flex: none; width: 24px; height: 17px; font-size: 0; line-height: 0; color: transparent; border-radius: 3px; background-size: cover; background-position: center; background-repeat: no-repeat; /* a hairline stops the white band of either flag bleeding into the glass */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .35); } .lang-toggle[lang="ru"] .flag { background-image: var(--flag-ru); } .lang-toggle[lang="en"] .flag { background-image: var(--flag-en); } .lang-code { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .06em; color: var(--text-2); } .lang-toggle:hover .lang-code { color: var(--text-1); } /* --- theme toggle -------------------------------------------------------- Both icons live in the DOM at once and are stacked; the swap is a rotate plus a fade, so the control reads as a physical dial rather than a re-render. theme.js adds .is-swapping for the length of the change. */ .theme-toggle { position: relative; } .theme-toggle .icon { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; transition: opacity var(--dur-3) var(--ease-glass), rotate var(--dur-3) var(--ease-glass), scale var(--dur-3) var(--ease-glass); } /* dark shows the moon, light shows the sun */ .icon-sun { opacity: 0; rotate: -75deg; scale: .55; } .icon-moon { opacity: 1; rotate: 0deg; scale: 1; } [data-appearance="light"] .icon-sun { opacity: 1; rotate: 0deg; scale: 1; } [data-appearance="light"] .icon-moon { opacity: 0; rotate: 75deg; scale: .55; } .theme-toggle.is-swapping { animation: theme-pop var(--dur-3) var(--ease-glass); } @keyframes theme-pop { 0% { scale: 1; } 38% { scale: .88; } 100% { scale: 1; } } /* ------------------------------------------------------------------------- Buttons. The templates carry no .btn class: an actionable control is simply an or