/* ============================================================ * site-chrome.css: what the static pages of shieldwave.io share * with the landing (src/pages/landing/landing.css, read-only * reference): the tokens, the header, the footer, the buttons. * * Linked by the blog (frontend/scripts/build-blog.mjs), the plugin * page (public/wordpress-plugin.html), the transparency page * (public/transparency/index.html), the legal pages (legalHtml() * in server/server.js) and the documentation page /bot * (scripts/build-pages.mjs, with public/site-page.css). * The page's own stylesheet comes after it. * * Dark by default, whatever the system prefers. Light when the * visitor picked it with the switch: /site-theme.js sets * data-theme="light" on and remembers the choice under the * same keys the landing uses. * * Token names are the landing's, so a page reads them the same way. * Class names start with sc- and touch nothing else. * Every size is in rem, so the page grows with the screen as the * landing does. * ============================================================ */ :root { /* colour */ --color-bg: #08090a; --color-surface: #0f1011; --color-surface-2: #141516; --color-surface-3: #1c1d1f; --color-line: rgb(255 255 255 / 0.08); --color-line-strong: rgb(255 255 255 / 0.14); --color-hover: rgb(255 255 255 / 0.04); --color-ink: #f7f8f8; --color-ink-2: #d0d6e0; --color-ink-3: #8a8f98; /* ShieldWave mint, the one brand colour. */ --color-brand: #5ad6b5; --color-brand-hover: #7fe2c8; --color-brand-soft: rgb(90 214 181 / 0.18); --color-button: #5ad6b5; --color-button-hover: #7fe2c8; --color-on-button: #062a20; --color-head: rgb(8 9 10 / 0.82); --color-focus: #f7f8f8; /* Mint as the colour of a link (text): 4.5:1 or more on every surface. */ --color-link: #62dcbd; --color-link-hover: #7fe2c8; /* Verified states: the tick, the "opt-in" tag. */ --color-ok: #4cb782; --color-ok-bg: rgb(90 214 181 / 0.1); --color-ok-line: rgb(90 214 181 / 0.3); /* The planet's light, where the header borrows it (the owner's exception to the rule against glow, 2026-09-29): the header's line, the soft light under it, the light under a link pointed at, and under the primary button in the header. */ --glow-line: rgb(90 214 181 / 0.5); --glow-soft: rgb(90 214 181 / 0.1); --glow-hover: rgb(90 214 181 / 0.2); --glow-under: rgb(90 214 181 / 0.6); /* The mark of the logo. */ --color-mark: var(--color-brand); --shadow-window: 0 0 0 1px rgb(0 0 0 / 0.6), 0 40px 80px -30px rgb(0 0 0 / 0.8); /* type */ --font-sans: 'Inter', 'IBM Plex Sans Arabic', 'PingFang SC', 'Noto Sans SC', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --w-medium: 510; --w-semibold: 590; /* shape and motion */ --gutter: clamp(1rem, 4vw, 2.5rem); --wrap: 75rem; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-short: 150ms; color-scheme: dark; } /* Light: the same system on paper. The page is a touch darker than the white surfaces on it, so panels stand out. The mark and the header's line take the darker green, or they would not be seen. */ :root[data-theme='light'] { --color-bg: #f4f6f5; --color-surface: #ffffff; --color-surface-2: #eceeed; --color-surface-3: #dfe3e1; --color-line: rgb(12 13 15 / 0.13); --color-line-strong: rgb(12 13 15 / 0.24); --color-hover: rgb(12 13 15 / 0.05); --color-ink: #0d0e10; --color-ink-2: #23262a; --color-ink-3: #52565d; --color-head: rgb(244 246 245 / 0.9); --color-focus: #0d0e10; --color-link: #067556; --color-link-hover: #045a44; --color-ok: #1f9d68; --color-ok-bg: rgb(11 138 106 / 0.08); --color-ok-line: rgb(11 138 106 / 0.35); --glow-line: rgb(11 138 106 / 0.5); --glow-soft: rgb(90 214 181 / 0.26); --glow-hover: rgb(90 214 181 / 0.3); --glow-under: rgb(31 158 124 / 0.42); --color-mark: #0b8a6a; --shadow-window: 0 0 0 1px rgb(12 13 15 / 0.04), 0 30px 70px -30px rgb(12 13 15 / 0.28); color-scheme: light; } /* Large screens: every size is in rem, so the page grows with the screen instead of staying a narrow column in an empty field (16px up to 2200px wide, 24px at 3840px), as the landing does. */ @media (min-width: 2200px) { :root { font-size: clamp(100%, 100% + (100vw - 2200px) * 0.0049, 150%); } } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--color-bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-feature-settings: 'cv01', 'ss03'; line-height: 1.6; letter-spacing: -0.011em; font-optical-sizing: auto; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--color-ink-2); color: var(--color-bg); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } .sc-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; } .sc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Buttons ── */ .sc-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.125rem; background: var(--color-button); color: var(--color-on-button); border: 1px solid var(--color-button); border-radius: 999px; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 1rem; line-height: 1; letter-spacing: -0.011em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow 220ms var(--ease-out); } .sc-button:hover { background: var(--color-button-hover); border-color: var(--color-button-hover); color: var(--color-on-button); } .sc-button--sm { height: 2rem; padding: 0 0.875rem; font-size: 0.8125rem; } /* ── Header ── */ .sc-head { position: sticky; top: 0; z-index: 30; background: var(--color-head); border-bottom: 1px solid var(--color-line); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); } /* A little of the planet's light on the header, on the planet's side: its bottom line turns to the brand colour there and a faint light falls under it. Mirrored on right-to-left pages. */ .sc-head::before, .sc-head::after { content: ''; position: absolute; inset-inline: 0; pointer-events: none; } .sc-head::before { bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 30%, var(--glow-line) 72%, transparent 100%); } .sc-head::after { top: 100%; height: 3.5rem; background: radial-gradient(42% 100% at 74% 0%, var(--glow-soft), transparent 72%); } [dir='rtl'] .sc-head::before, [dir='rtl'] .sc-head::after { transform: scaleX(-1); } .sc-head-in { position: relative; display: flex; align-items: center; gap: 2rem; height: 4rem; } .sc-brand { display: inline-flex; flex: 0 0 auto; color: var(--color-ink); text-decoration: none; } /* The logo: the mark in the brand colour beside the name. */ .sc-logo { display: inline-flex; align-items: center; gap: 0.625rem; flex: 0 0 auto; } .sc-logo-mark { flex: 0 0 auto; width: 1.875rem; aspect-ratio: 153.28 / 132; background: var(--color-mark); -webkit-mask: url('/shieldwave-sygnet.svg') center / contain no-repeat; mask: url('/shieldwave-sygnet.svg') center / contain no-repeat; } .sc-logo-name { font-size: 1.1875rem; font-weight: var(--w-semibold); letter-spacing: -0.025em; line-height: 1; color: var(--color-ink); } /* The links touch each other, so the pointer going from one to the next never leaves the menu. Each spans the header's full height. */ .sc-nav { display: flex; margin-inline: auto -0.75rem; font-size: 0.8125rem; } .sc-nav a { position: relative; display: inline-flex; align-items: center; height: 4rem; padding-inline: 0.75rem; color: var(--color-ink-3); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); } .sc-nav a:hover, .sc-nav a:focus-visible { color: var(--color-ink); } .sc-nav a:focus-visible { outline-offset: -0.5rem; border-radius: 0.75rem; } /* Pointed at, or reached with the keyboard, a link draws the header's light to itself (the landing moves one light with script; here it is CSS on the link). The header's line brightens under the word, fading out to both sides as the line itself does, and a soft light rises from it a little way into the header, behind the word. Nothing hangs under the header. */ .sc-nav a::before, .sc-nav a::after { content: ''; position: absolute; bottom: -1px; pointer-events: none; opacity: 0; transition: opacity 220ms var(--ease-out); } .sc-nav a::before { z-index: -1; inset-inline: -1.5rem; height: 1.875rem; background: radial-gradient(50% 100% at 50% 100%, var(--glow-hover), transparent 70%); } .sc-nav a::after { inset-inline: -0.375rem; height: 1px; background: linear-gradient(90deg, transparent, var(--color-mark) 28%, var(--color-mark) 72%, transparent); } .sc-nav a:hover::before, .sc-nav a:hover::after, .sc-nav a:focus-visible::before, .sc-nav a:focus-visible::after { opacity: 1; } .sc-head-actions { display: flex; align-items: center; gap: 1.5rem; padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--color-line); } .sc-theme { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: 999px; background: transparent; border: 1px solid var(--color-line); color: var(--color-ink-3); cursor: pointer; font: inherit; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } .sc-theme[hidden] { display: none; } .sc-theme:hover { color: var(--color-ink); border-color: var(--glow-line); background: var(--color-hover); } .sc-theme svg { width: 0.9375rem; height: 0.9375rem; } /* The sun on the dark page, the moon on the light one. */ .sc-theme-moon { display: none; } :root[data-theme='light'] .sc-theme-sun { display: none; } :root[data-theme='light'] .sc-theme-moon { display: block; } .sc-head .sc-button:hover { box-shadow: 0 0.5rem 1.75rem -0.5rem var(--glow-under); } /* Narrow screens, as on the landing: the links go into the menu. */ @media (max-width: 1100px) { .sc-nav { display: none; } .sc-head-actions { margin-inline-start: auto; padding-inline-start: 0; border-inline-start: 0; gap: 1rem; } } /* ── The menu, on a narrow screen ── A button at the end of the header opens the header's links in a panel under it, with the header's button (made by /site-theme.js, as SiteMenu does on the landing). The panel covers the page from the header down and the page stays still while it is open. Plain surfaces and lines. */ .sc-menu-btn, .sc-menu { display: none; } @media (max-width: 1100px) { .sc-head-in { position: static; } .sc-menu-btn { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; margin-inline-end: -0.5rem; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--color-ink); cursor: pointer; } .sc-menu-btn svg { width: 20px; height: 20px; overflow: visible; } .sc-menu-line { transform-origin: 10px 10px; transition: transform 320ms var(--ease-out); } .sc-menu-btn[aria-expanded='true'] .sc-menu-line--1 { transform: rotate(45deg) translateY(3px); } .sc-menu-btn[aria-expanded='true'] .sc-menu-line--2 { transform: rotate(-45deg) translateY(-3px); } .sc-menu { display: block; position: absolute; top: 100%; inset-inline: 0; z-index: 1; height: calc(100dvh - var(--menu-top, 4rem) + 2px); overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg); border-top: 1px solid var(--color-line); visibility: hidden; opacity: 0; transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms; } .sc-menu.is-open { visibility: visible; opacity: 1; transition: opacity 220ms var(--ease-out); } :root:has(.sc-menu.is-open) { overflow: hidden; } .sc-head:has(.sc-menu.is-open) { background: var(--color-bg); } .sc-head:has(.sc-menu.is-open)::before, .sc-head:has(.sc-menu.is-open)::after { opacity: 0; } .sc-head:has(.sc-menu.is-open) .sc-head-actions > .sc-button--sm { visibility: hidden; } .sc-menu-in { display: flex; flex-direction: column; gap: 2rem; padding-block: 0.5rem 3rem; } .sc-menu-nav { display: flex; flex-direction: column; } .sc-menu-nav a { display: flex; align-items: center; min-height: 3.5rem; border-bottom: 1px solid var(--color-line); font-size: 1.375rem; font-weight: var(--w-medium); letter-spacing: -0.02em; line-height: 1.2; color: var(--color-ink); text-decoration: none; transition: color var(--dur-short) var(--ease-out); } .sc-menu-nav a:hover { color: var(--color-link-hover); } .sc-menu-nav a:focus-visible { outline-offset: -2px; border-radius: 6px; } .sc-menu-acts { display: flex; } .sc-head-actions > .sc-theme { display: none; } .sc-menu-set { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); font-size: 1rem; color: var(--color-ink-2); } .sc-menu-acts .sc-button { flex: 1 1 auto; height: 3rem; } .sc-head .sc-menu-acts .sc-button:hover { box-shadow: none; } } /* On a phone the header is the landing's: the brand with its name, the button that leads to the scan and the menu; the theme is in the menu. Only on the narrowest screens does the name give way to the mark. */ @media (max-width: 600px) { .sc-head-in { gap: 1rem; } .sc-head-actions { gap: 0.75rem; } } @media (max-width: 349px) { .sc-head .sc-logo-name { display: none; } } /* ── Footer ── */ .sc-foot { border-top: 1px solid var(--color-line); padding-block: 2rem; font-size: 0.8125rem; line-height: 1.6; color: var(--color-ink-3); } .sc-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; } .sc-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; } .sc-foot a, .sc-foot-btn { color: var(--color-ink-3); text-decoration: none; transition: color var(--dur-short) var(--ease-out); } .sc-foot a:hover, .sc-foot-btn:hover { color: var(--color-ink); } .sc-foot-btn { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; cursor: pointer; } .sc-foot-btn[hidden] { display: none; } /* ── A document: the legal pages ── */ .sc-doc { width: min(42rem, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(3rem, 8vw, 5rem) clamp(4rem, 8vw, 6rem); font-size: 1rem; line-height: 1.7; color: var(--color-ink-2); overflow-wrap: anywhere; } .sc-doc h1 { margin: 0 0 1.5rem; font-size: clamp(2rem, 1.3rem + 2.4vw, 2.75rem); font-weight: var(--w-medium); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-ink); text-wrap: balance; } .sc-doc h2, .sc-doc h3 { text-wrap: balance; } .sc-doc h2 { margin: 2.5rem 0 0.75rem; font-size: 1.5rem; font-weight: var(--w-medium); line-height: 1.25; letter-spacing: -0.02em; color: var(--color-ink); } .sc-doc h3 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; font-weight: var(--w-semibold); line-height: 1.4; color: var(--color-ink); } .sc-doc p { margin: 0 0 1rem; text-wrap: pretty; } .sc-doc ul { margin: 0 0 1.25rem; padding-inline-start: 1.4rem; } .sc-doc li { margin: 0.35rem 0; } .sc-doc hr { margin: 2.25rem 0; border: 0; border-top: 1px solid var(--color-line); } .sc-doc strong { font-weight: var(--w-semibold); color: var(--color-ink); } .sc-doc a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; } .sc-doc a:hover { color: var(--color-link-hover); } /* Arabic: no negative tracking, it pulls joined letters apart. */ [dir='rtl'], [dir='rtl'] * { letter-spacing: 0 !important; } @media (prefers-reduced-motion: reduce) { .sc-head *, .sc-foot * { transition: none !important; } }