/* SciNTech — one design system for the hub and every app (spec 0069 §5). Colour tokens are named --c-*; every --c-* set for the light theme is set again for the dark theme, twice: under prefers-color-scheme (unless the visitor chose light) and under [data-theme="dark"] (the visitor chose dark). tools/check_site.py fails if the two dark blocks differ or miss a token, and measures WCAG contrast of the text pairs. Per-app accent: or on an app page; any element may carry data-app to take that app's accent (hub app cards). None = hub accent. Components (class → use): .site-header/.nav shared header: brand, app switcher, hub links, theme toggle .app-nav second bar inside an app: Home · How it works · Examples · Compatibility · Privacy + .button.primary[data-cta] (S2/S3) .button.primary|.secondary[data-cta="wmr|looper"] 50 px CTAs (§5.4 cmp-cta) .card, .app-card, .value, .note-band, .callout, .faq, .table-wrap, .breadcrumb .site-footer .footer-rights ownership line F1 — Watermark Remover pages only .ex-card/.cmp/.cmp-layer measured examples: in assets/examples.css, linked only by the two pages that show examples, so no other page pays for it (S4) */ :root { color-scheme: light; --c-bg: #f6f4ef; --c-surface: #ffffff; --c-surface-2: #ebe8e0; --c-edge: #d6d1c4; --c-shadow: #d4cebf; --c-text: #1d1e22; --c-muted: #4d5058; --c-band-bg: #26272c; --c-band-text: #f3f1ea; --c-header: rgba(246, 244, 239, .9); --c-accent: #34438a; --c-accent-bg: #34438a; --c-accent-ink: #ffffff; --c-accent-soft: #e2e5f2; --c-mint: #1b6d3d; --c-orange: #9a4b17; --radius: 12px; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --serif: ui-serif, Georgia, "Times New Roman", serif; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-synthesis: none; } [data-app="wmr"] { --c-accent: #1b6d3d; --c-accent-bg: #1b6d3d; --c-accent-ink: #ffffff; --c-accent-soft: #dcefe1; } [data-app="looper"] { --c-accent: #9a4b17; --c-accent-bg: #a54810; --c-accent-ink: #ffffff; --c-accent-soft: #f7e4d0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-bg: #15161a; --c-surface: #1e1f24; --c-surface-2: #29292e; --c-edge: #383a41; --c-shadow: #0a0b0d; --c-text: #f1efe9; --c-muted: #b4b6be; --c-band-bg: #29292e; --c-band-text: #f1efe9; --c-header: rgba(21, 22, 26, .9); --c-accent: #aab6ff; --c-accent-bg: #aab6ff; --c-accent-ink: #15161a; --c-accent-soft: #262a3f; --c-mint: #89d99f; --c-orange: #f69536; } :root:not([data-theme="light"]) [data-app="wmr"] { --c-accent: #89d99f; --c-accent-bg: #89d99f; --c-accent-ink: #15161a; --c-accent-soft: #1f3326; } :root:not([data-theme="light"]) [data-app="looper"] { --c-accent: #f69536; --c-accent-bg: #f69536; --c-accent-ink: #15161a; --c-accent-soft: #3a2a1d; } } :root[data-theme="dark"] { color-scheme: dark; --c-bg: #15161a; --c-surface: #1e1f24; --c-surface-2: #29292e; --c-edge: #383a41; --c-shadow: #0a0b0d; --c-text: #f1efe9; --c-muted: #b4b6be; --c-band-bg: #29292e; --c-band-text: #f1efe9; --c-header: rgba(21, 22, 26, .9); --c-accent: #aab6ff; --c-accent-bg: #aab6ff; --c-accent-ink: #15161a; --c-accent-soft: #262a3f; --c-mint: #89d99f; --c-orange: #f69536; } :root[data-theme="dark"] [data-app="wmr"] { --c-accent: #89d99f; --c-accent-bg: #89d99f; --c-accent-ink: #15161a; --c-accent-soft: #1f3326; } :root[data-theme="dark"] [data-app="looper"] { --c-accent: #f69536; --c-accent-bg: #f69536; --c-accent-ink: #15161a; --c-accent-soft: #3a2a1d; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: 320px; background: var(--c-bg); color: var(--c-text); line-height: 1.65; } img, svg, picture { display: block; max-width: 100%; } a { color: var(--c-accent); text-underline-offset: .2em; } p { margin: 0 0 1rem; } h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 7vw, 5.2rem); max-width: 15ch; } h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); max-width: 22ch; } h3 { font-size: 1.18rem; letter-spacing: -.01em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); padding: .7rem 1rem; background: var(--c-accent-bg); color: var(--c-accent-ink); font-weight: 700; text-decoration: none; border-radius: 8px; } .skip-link:focus { transform: none; } .wrap { width: min(1140px, calc(100% - 32px)); margin-inline: auto; } .narrow { width: min(760px, calc(100% - 32px)); margin-inline: auto; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 30; background: var(--c-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-edge); } .nav { min-height: 68px; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding-block: 8px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); font-weight: 780; font-size: 1.08rem; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; } .brand img { width: 32px; height: 32px; flex: none; border-radius: 8px; } .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; } .nav-links a { min-height: 44px; display: inline-flex; align-items: center; padding: .4rem .7rem; color: var(--c-muted); font-size: .92rem; font-weight: 620; text-decoration: none; border-radius: 8px; } .nav-links a:hover { color: var(--c-text); background: var(--c-surface-2); } .nav-links a[aria-current="page"] { color: var(--c-text); box-shadow: inset 0 -3px 0 var(--c-accent); border-radius: 8px 8px 2px 2px; } .nav-app::before { content: ""; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; transform: skewX(-18deg); background: var(--app-dot, var(--c-accent)); } .nav-app[data-app-link="wmr"] { --app-dot: var(--c-mint); } .nav-app[data-app-link="looper"] { --app-dot: var(--c-orange); } .nav-sep { width: 1px; height: 22px; margin-inline: 8px; background: var(--c-edge); } .theme-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: 10px; cursor: pointer; } .theme-toggle[hidden] { display: inline-grid; visibility: hidden; } /* reserves space: no layout shift when JS reveals it */ .theme-toggle:hover { background: var(--c-surface-2); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .i-sun { display: none; } .theme-toggle[aria-pressed="true"] .i-sun { display: block; } .theme-toggle[aria-pressed="true"] .i-moon { display: none; } /* App bar (S2/S3):