/* * SmartCleanup — the product site of an on-device photo and storage cleaner. * * The app's own design decides this file: * * - ONE action colour. #249BEB is the app's AccentColor. Everything a visitor * can press is that blue; nothing that is not pressable borrows it. * - Three colours are the app's confidence labels and mean nothing else: * green "pre-selected", amber "suggested", a grey ring "info only". A green * tick for "included" or an amber border for decoration would teach the * reader a second meaning for a colour the app uses to say how sure it is. * - Red is the delete bar and the critical notice, nowhere else. * - Sizes are set in tabular figures, so "~1.6 GB" and "~0.9 GB" line up. * * Light is the base, as the app's is. The app has a dark mode and so does this, * and a visitor's own choice wins over both. */ /* ------------------------------------------------------------------------- * Colour modes — three blocks, and the order is the mechanism. * * The runtime sets `data-theme` on from an inline script in , before * first paint. It does NOT set it on the server: the preference lives in the * visitor's browser and the server has never seen it. So the theme is asked what * to do when the attribute is ABSENT, and the answer has to be "obey the OS". * * 1. `:root` — LIGHT, the base. Applies when nothing else does. * 2. `prefers-color-scheme: dark` — the OS speaking, honoured only while the * visitor has not explicitly chosen light. * 3. `[data-theme="dark"]` — an explicit choice, which beats the OS. * * The dark tokens are written twice, in 2 and 3. Plain CSS cannot name a block of * declarations and apply it under two conditions, so keep the two lists * identical — build.mjs refuses to build when they drift. * ---------------------------------------------------------------------- */ :root { --sc-accent: #249beb; --sc-accent-2: #4fb2f2; --sc-on-accent: #ffffff; --sc-radius: 16px; --sc-radius-sm: 12px; --sc-radius-lg: 24px; --sc-pill: 999px; --sc-header-h: 62px; --sc-band: clamp(48px, 5.2vw, 84px); --sc-band-sm: clamp(28px, 3vw, 44px); --sc-head-gap: clamp(24px, 2.8vw, 36px); --sc-doc-gap: 38px; --sc-bg: #f7f9fc; --sc-surface: #ffffff; --sc-panel: #ffffff; --sc-panel-2: #f1f4f8; --sc-tint: #edf2f8; --sc-line: #e2e7ee; --sc-ink: #0f1722; --sc-muted: #5f6b7a; --sc-shadow: 0 20px 48px rgba(15, 23, 34, 0.12); --sc-shadow-sm: 0 6px 18px rgba(15, 23, 34, 0.08); --sc-high: #16a34a; --sc-medium: #d99a06; --sc-info: #8a94a3; --sc-danger: #e5332a; --sc-accent-text: #0b6db3; --sc-grid: rgba(15, 23, 34, 0.05); } /* ---- DARK, from the OS, while no explicit light choice is in force ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sc-bg: #0e1116; --sc-surface: #151a21; --sc-panel: #181e26; --sc-panel-2: #222a34; --sc-tint: #131820; --sc-line: #2a323d; --sc-ink: #eef2f7; --sc-muted: #9aa6b5; --sc-shadow: 0 28px 72px rgba(0, 0, 0, 0.6); --sc-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45); --sc-high: #4ade80; --sc-medium: #f4c14d; --sc-info: #8a94a3; --sc-danger: #ff6b63; --sc-accent: #51b8ff; --sc-on-accent: #04121f; --sc-accent-text: #7ccbff; --sc-grid: rgba(220, 228, 240, 0.05); } } /* ---- DARK, chosen by the visitor. Same list as above. ---- */ :root[data-theme="dark"] { --sc-bg: #0e1116; --sc-surface: #151a21; --sc-panel: #181e26; --sc-panel-2: #222a34; --sc-tint: #131820; --sc-line: #2a323d; --sc-ink: #eef2f7; --sc-muted: #9aa6b5; --sc-shadow: 0 28px 72px rgba(0, 0, 0, 0.6); --sc-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45); --sc-high: #4ade80; --sc-medium: #f4c14d; --sc-info: #8a94a3; --sc-danger: #ff6b63; --sc-accent: #51b8ff; --sc-on-accent: #04121f; --sc-accent-text: #7ccbff; --sc-grid: rgba(220, 228, 240, 0.05); } /* ------------------------------------------------------------------------- * Base * ---------------------------------------------------------------------- */ .sc { background: var(--sc-bg); color: var(--sc-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 17px; line-height: 1.6; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } .sc *, .sc *::before, .sc *::after { box-sizing: border-box; } .sc h1, .sc h2, .sc h3 { margin: 0; line-height: 1.18; letter-spacing: -0.015em; font-weight: 800; } .sc h1 { font-size: clamp(32px, 4.4vw, 52px); } .sc h2 { font-size: clamp(25px, 2.9vw, 36px); } .sc h3 { font-size: 19px; font-weight: 700; } .sc p { margin: 0; } .sc a { color: inherit; } .sc img { max-width: 100%; height: auto; } .sc :focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 2px; border-radius: 6px; } .sc__container { width: min(1180px, 100% - 40px); margin-inline: auto; } .sc__measure { max-width: 760px; } .sc__section { padding-block: var(--sc-band); } /* The header is sticky, so anything an in-page link scrolls to has to clear it — every band with an anchor, every numbered heading on a policy page. */ .sc [id] { scroll-margin-top: calc(var(--sc-header-h) + 16px); } .sc__section--tint { background: var(--sc-tint); } .sc__skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 12px 18px; background: var(--sc-accent); color: var(--sc-on-accent); border-radius: 0 0 var(--sc-radius-sm) 0; text-decoration: none; font-weight: 700; } .sc__skip:focus { left: 0; } /* ------------------------------------------------------------------------- * Type and controls * ---------------------------------------------------------------------- */ .sc__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 26px; border-radius: var(--sc-pill); background: linear-gradient(180deg, var(--sc-accent-2), var(--sc-accent)); color: var(--sc-on-accent); font-weight: 700; font-size: 16px; text-decoration: none; border: 0; box-shadow: var(--sc-shadow-sm); } .sc__button:hover { filter: brightness(1.05); } .sc__button--ghost { background: transparent; color: var(--sc-ink); border: 1.5px solid var(--sc-line); box-shadow: none; } .sc__button--small { min-height: 42px; padding: 10px 20px; font-size: 15px; } .sc__text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--sc-accent-text); font-weight: 700; text-decoration: none; } .sc__text-link:hover { text-decoration: underline; text-underline-offset: 3px; } .sc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; } .sc__eyebrow { margin-bottom: 12px; color: var(--sc-accent-text); font-size: 13px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .sc__lead { margin-top: 16px; color: var(--sc-muted); font-size: clamp(17px, 1.5vw, 19px); } .sc__accent { color: var(--sc-accent-text); } .sc__note { margin-top: 22px; color: var(--sc-muted); font-size: 15px; } .sc__empty { padding: 40px 0; color: var(--sc-muted); text-align: center; } .sc__section-head { max-width: 720px; margin-bottom: var(--sc-head-gap); } .sc__section-head--center { margin-inline: auto; text-align: center; } .sc__icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------------------------- * Header * ---------------------------------------------------------------------- */ /* * No `backdrop-filter` here on mobile, and that is not a style choice. * * `backdrop-filter` (like `filter` and `transform`) makes an element the * containing block for its `position: fixed` descendants. With it on, the * drawer's `top: 62px; bottom: 0` resolved against the 62px-tall HEADER rather * than the viewport, and the menu opened as a 48px sliver with the close button * in it. The blur is restored at ≥900px, where the panel is static and cannot be * caught by it. */ .sc__header { position: sticky; top: 0; z-index: 30; background: var(--sc-surface); border-bottom: 1px solid var(--sc-line); } /* * The bar keeps ONE height on mobile, always. * * It used to be a wrapping flex row with the menu panel as a full-width child, * so opening the menu grew the sticky header and shoved the page under it. The * panel is now a fixed overlay (below) and the bar never wraps, which is what * makes the header a fixed, known quantity — the drawer hangs off it and every * in-page anchor offsets by it. */ .sc__header-inner { display: flex; align-items: center; gap: 12px; min-height: var(--sc-header-h); flex-wrap: nowrap; } .sc__menu-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-line); color: inherit; text-decoration: none; } /* * Three bars, drawn absolutely so the box stays 2px tall whatever the bars do. * * The earlier version put the outer two in flow with `position: relative` and * `top` nudges, which meant crossing them into an × moved the box as well as the * bars. Absolute takes the pseudo-elements out of layout entirely: the × is two * rotations and nothing shifts. */ .sc__menu-bars { position: relative; display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .sc__menu-bars::before, .sc__menu-bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .sc__menu-bars::before { top: -6px; } .sc__menu-bars::after { top: 6px; } /* Open: the middle bar goes, the outer two cross. */ .sc__menu-bars--x { background: transparent; } .sc__menu-bars--x::before { top: 0; transform: rotate(45deg); } .sc__menu-bars--x::after { top: 0; transform: rotate(-45deg); } /* * Which of the two links is showing. * * `:has()` because the buttons come BEFORE the drawer in the markup and there is * no previous-sibling combinator. It is not a new floor for this theme — the * palette already depends on `color-mix()`, which landed later than `:has()` in * every engine. Where `:has()` is missing the opener simply stays put; the menu * still opens, and still closes on any menu link or the back button. */ .sc__menu-button--close { display: none; } .sc__header-inner:has(#sc-menu:target) .sc__menu-button--open { display: none; } /* Open, and looking it: the button wears the accent while the drawer is down. */ .sc__header-inner:has(#sc-menu:target) .sc__menu-button--close { display: inline-flex; border-color: var(--sc-accent); background: color-mix(in srgb, var(--sc-accent) 12%, transparent); color: var(--sc-accent-text); } /* * The drawer. * * `position: fixed` under the bar, so opening it changes NOTHING about the * header's height or the page's layout — the defect this replaced. It scrolls * itself when a long menu meets a short phone, and `overscroll-behavior` keeps * that scroll from chaining into the page behind it. */ .sc__header-panel { display: none; position: fixed; top: var(--sc-header-h); left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: column; gap: 8px; padding: 20px; background: var(--sc-surface); border-top: 1px solid var(--sc-line); overflow-y: auto; overscroll-behavior: contain; } .sc__header-panel .sc__nav { margin-top: 4px; } .sc__header-panel:target { display: flex; } .sc__nav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .sc__nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--sc-line); font-size: 18px; font-weight: 700; text-decoration: none; } .sc__nav a:hover { color: var(--sc-accent-text); } .sc__brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; } .sc__brand img { width: 40px; height: 40px; flex: none; border-radius: 10px; } .sc__brand-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(180deg, var(--sc-accent-2), var(--sc-accent)); color: var(--sc-on-accent); } .sc__brand-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sc__brand-text { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; } .sc__brand-text strong { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc__brand-text small { color: var(--sc-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc__brand--compact img, .sc__brand--compact .sc__brand-mark { width: 38px; height: 38px; } .sc__header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .sc__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-line); background: transparent; color: inherit; cursor: pointer; } .sc__icon-btn svg { width: 20px; height: 20px; } /* ---- Language switcher ---- */ .sc__lang { position: relative; } .sc__lang summary { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-line); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; } .sc__lang summary::-webkit-details-marker { display: none; } .sc__lang summary i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } /* * A flag is a small rectangle of real-world colour, so it needs an edge of its * own: the Japanese flag is a white field, and without a rim it reads on a white * page as a floating red dot. * * The rim is an OUTSET ring, not `inset`. An inset box-shadow paints between the * element's background and its content, and each of these flags starts with a * full-bleed `` — which covered the ring exactly where it was needed. Grey * rather than black so the same value works in both colour modes. */ .sc__flag { width: 21px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.45); } .sc__lang ul { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 178px; margin: 0; padding: 6px; list-style: none; background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: var(--sc-radius-sm); box-shadow: var(--sc-shadow); } .sc__lang a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; font-size: 15px; text-decoration: none; } .sc__lang a:hover, .sc__lang a[aria-current="page"] { background: var(--sc-panel-2); } /* ------------------------------------------------------------------------- * Store buttons * ---------------------------------------------------------------------- */ .sc__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .sc .sc__store { display: inline-flex; align-items: center; gap: 11px; padding: 10px 20px 10px 16px; border-radius: var(--sc-radius-sm); background: var(--sc-ink); color: var(--sc-bg); text-decoration: none; } .sc__store svg { width: 26px; height: 26px; fill: currentColor; } .sc__store span { display: flex; flex-direction: column; line-height: 1.15; } .sc__store small { font-size: 11px; opacity: 0.75; } .sc__store strong { font-size: 17px; font-weight: 700; } .sc .sc__store--soon { background: transparent; color: var(--sc-muted); border: 1.5px dashed var(--sc-line); } /* ------------------------------------------------------------------------- * Hero * ---------------------------------------------------------------------- */ .sc__hero { position: relative; padding-block: clamp(40px, 5vw, 76px) var(--sc-band); background-image: linear-gradient(var(--sc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sc-grid) 1px, transparent 1px); background-size: 34px 34px; } .sc__hero-grid { display: grid; gap: clamp(32px, 5vw, 60px); align-items: center; } .sc__hero-notes { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; } .sc__hero-notes li { padding: 7px 14px; border-radius: var(--sc-pill); background: var(--sc-panel-2); color: var(--sc-muted); font-size: 13.5px; font-weight: 600; } /* ------------------------------------------------------------------------- * The phones * * Redrawn from the app's own screenshots, and drawn rather than screenshotted for * the usual three reasons: it is sharp at every density, it translates with the * page, and it does not go stale the day the app's type changes. * * The whole mockup scales off ONE number. `--sc-ph` is the screen width, and * every size inside is a fraction of it, so the pair shrinks to fit a 390px * viewport without a single extra media query — and without the 11px text that * a fixed-pixel mockup ends up with when it is squeezed. * ---------------------------------------------------------------------- */ .sc__phones { display: flex; align-items: stretch; gap: clamp(12px, 1.6vw, 20px); justify-content: center; justify-self: center; width: 100%; } /* * The phones FILL their column rather than sitting at a fixed width inside it. * * They used to be `width: 252px` each, centred — which left the pair 17px short * of the container on both sides, so the hero looked misaligned against the * cards below it even though every container on the page has the same edges. * Flexing to the column fixes the alignment and buys the mockup its width back * in the same change. * * `--sc-ph` is the screen width that every size inside the mockup is a fraction * of. With a flexed phone we no longer know that number up front, so the phone * becomes a container and the screen reads its OWN rendered width with `cqw`. * The px value on the line above is the fallback: where container queries are * missing the mockup is drawn slightly small rather than not at all, because a * `--sc-ph` that fails to parse would take every calc() in this file with it. */ .sc__phone { container-type: inline-size; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; max-width: 320px; } .sc__phone-screen { flex: 1; } /* * Below 620px the second phone goes, rather than stacking. * * Two full app screens stacked on a 390px viewport push the headline, the store * buttons and the whole rest of the page about a screen and a half down — and * the reader who most needs those buttons is the one holding a phone. One * screen still shows what the app looks like; two is a luxury of width. */ @media (max-width: 619px) { .sc__phone--second { display: none; } } .sc__phone-screen { --sc-ph: 264px; --sc-ph: 100cqw; display: flex; flex-direction: column; padding: calc(var(--sc-ph) * 0.028); border-radius: calc(var(--sc-ph) * 0.13); background: var(--sc-surface); border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow); font-size: calc(var(--sc-ph) * 0.049); overflow: hidden; } /* The home indicator. Two pixels of hardware that make the frame read as a phone rather than as a floating card. */ .sc__phone-bar { display: block; width: 36%; height: 4px; margin: 8px auto 0; border-radius: var(--sc-pill); background: var(--sc-line); } /* `flex: 1` so a shorter screen still fills the frame and its bottom furniture — the tab bar, the Save button — sits at the bottom, as it does in the app, rather than wherever the content happened to stop. */ .sc__app { display: flex; flex: 1; flex-direction: column; gap: calc(var(--sc-ph) * 0.038); color: var(--sc-ink); line-height: 1.3; } .sc__app b, .sc__app small { display: block; } /* ---- Status bar ---- */ .sc__status { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sc-ph) * 0.014) calc(var(--sc-ph) * 0.028) 0; font-size: calc(var(--sc-ph) * 0.045); font-weight: 700; } .sc__status-icons { display: inline-flex; align-items: center; gap: calc(var(--sc-ph) * 0.017); } .sc__status-icons svg { height: calc(var(--sc-ph) * 0.042); width: auto; fill: currentColor; } /* ---- Top bar ---- */ .sc__app-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--sc-ph) * 0.028); padding: calc(var(--sc-ph) * 0.021) calc(var(--sc-ph) * 0.014); } .sc__app-bar b { font-size: calc(var(--sc-ph) * 0.052); font-weight: 700; white-space: nowrap; } /* The title stays centred on the screen, not on the space left of the back button: the button is lifted out of the flow, as it is in the app. */ .sc__app-bar--title { min-height: calc(var(--sc-ph) * 0.13); } .sc__app-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: calc(var(--sc-ph) * 0.115); height: calc(var(--sc-ph) * 0.115); border-radius: 50%; background: var(--sc-surface); box-shadow: var(--sc-shadow-sm); color: var(--sc-ink); } .sc__app-back svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sc__app-chev { color: var(--sc-muted); font-size: calc(var(--sc-ph) * 0.075); line-height: 1; } /* ---- Dashboard: title ---- */ .sc__app-title { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sc-ph) * 0.02) calc(var(--sc-ph) * 0.028) 0; } .sc__app-title b { font-size: calc(var(--sc-ph) * 0.078); font-weight: 800; letter-spacing: -0.02em; } .sc__app-gear svg { display: block; width: calc(var(--sc-ph) * 0.07); height: calc(var(--sc-ph) * 0.07); fill: none; stroke: var(--sc-muted); stroke-width: 1.7; } /* ---- Dashboard: the storage and "can be cleaned" cards ---- */ .sc__app-card { display: flex; flex-direction: column; gap: calc(var(--sc-ph) * 0.018); padding: calc(var(--sc-ph) * 0.042); border-radius: calc(var(--sc-ph) * 0.05); background: var(--sc-panel-2); } .sc__app-card small, .sc__app-progress small, .sc__app-group small { color: var(--sc-muted); font-size: calc(var(--sc-ph) * 0.04); } .sc__app-row { display: flex; justify-content: space-between; gap: 8px; } .sc__app-figure { font-size: calc(var(--sc-ph) * 0.056); font-weight: 700; font-variant-numeric: tabular-nums; } .sc__app-track { display: flex; height: calc(var(--sc-ph) * 0.03); border-radius: var(--sc-pill); background: var(--sc-line); overflow: hidden; } .sc__app-track--thin { height: calc(var(--sc-ph) * 0.016); } .sc__app-used { width: 77%; background: var(--sc-ink); opacity: 0.75; } .sc__app-scan { width: 26%; background: var(--sc-accent); } .sc__app-card--reclaim { background: color-mix(in srgb, var(--sc-accent) 11%, var(--sc-surface)); } .sc__app-big { color: var(--sc-accent-text); font-size: calc(var(--sc-ph) * 0.105); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; } /* The stacked bar, one colour per section. These four are the ONLY place the section colours appear — a section colour anywhere else on the site would start to read as a confidence label, which it is not. */ .sc__app-stack { display: flex; gap: 2px; height: calc(var(--sc-ph) * 0.034); border-radius: var(--sc-pill); overflow: hidden; } .sc__app-seg { flex-basis: 0; } .sc__app-seg--duplicates, .sc__app-key--duplicates::before { background: var(--sc-accent); } .sc__app-seg--photos, .sc__app-key--photos::before { background: #7c5cff; } .sc__app-seg--screenshots, .sc__app-key--screenshots::before { background: #14b8a6; } .sc__app-seg--videos, .sc__app-key--videos::before { background: #f472b6; } .sc__app-legend { display: flex; flex-wrap: wrap; gap: calc(var(--sc-ph) * 0.012) calc(var(--sc-ph) * 0.03); } .sc__app-key { display: inline-flex; align-items: center; gap: calc(var(--sc-ph) * 0.014); color: var(--sc-muted); font-size: calc(var(--sc-ph) * 0.036); font-style: normal; } .sc__app-key::before { content: ""; width: calc(var(--sc-ph) * 0.024); height: calc(var(--sc-ph) * 0.024); border-radius: 50%; } .sc__app-progress { display: flex; flex-direction: column; gap: calc(var(--sc-ph) * 0.014); padding: 0 calc(var(--sc-ph) * 0.014); } /* ---- Dashboard: the category cards ---- */ .sc__app-cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--sc-ph) * 0.028); } .sc__app-cat { display: flex; flex-direction: column; gap: calc(var(--sc-ph) * 0.006); padding: calc(var(--sc-ph) * 0.035); border-radius: calc(var(--sc-ph) * 0.045); background: var(--sc-panel); border: 1px solid var(--sc-line); } .sc__app-cat b { font-size: calc(var(--sc-ph) * 0.043); font-weight: 700; line-height: 1.2; } .sc__app-cat small { color: var(--sc-muted); font-size: calc(var(--sc-ph) * 0.037); } .sc__app-cat em { font-size: calc(var(--sc-ph) * 0.046); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; } .sc__app-cat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--sc-ph) * 0.012); } .sc__app-cat-mark { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--sc-ph) * 0.1); height: calc(var(--sc-ph) * 0.1); border-radius: calc(var(--sc-ph) * 0.03); background: color-mix(in srgb, var(--sc-accent) 13%, var(--sc-surface)); color: var(--sc-accent-text); } .sc__app-cat-mark svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* The confidence label, reduced to its dot as the app's card shows it. */ .sc__app-dot { width: calc(var(--sc-ph) * 0.03); height: calc(var(--sc-ph) * 0.03); border-radius: 50%; } .sc__app-dot--high { background: var(--sc-high); } .sc__app-dot--medium { background: var(--sc-medium); } .sc__app-dot--info { background: transparent; border: 2px solid var(--sc-info); } .sc__app-total { margin: 0; color: var(--sc-muted); font-size: calc(var(--sc-ph) * 0.037); text-align: center; } /* ---- Tab bar ---- */ .sc__app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: auto; padding-top: calc(var(--sc-ph) * 0.028); border-top: 1px solid var(--sc-line); } .sc__app-tab { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sc-ph) * 0.008); color: var(--sc-muted); font-size: calc(var(--sc-ph) * 0.034); white-space: nowrap; } .sc__app-tab svg { width: calc(var(--sc-ph) * 0.07); height: calc(var(--sc-ph) * 0.07); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sc__app-tab--on { color: var(--sc-accent-text); font-weight: 700; } /* ---- Review: the title bar's second line ---- */ .sc__app-bar-text { display: flex; flex-direction: column; align-items: center; } .sc__app-bar-text small { color: var(--sc-muted); font-size: calc(var(--sc-ph) * 0.037); } /* ---- Review: the two selection chips ---- */ .sc__app-chips { display: flex; gap: calc(var(--sc-ph) * 0.022); } .sc__app-chip { padding: calc(var(--sc-ph) * 0.014) calc(var(--sc-ph) * 0.034); border-radius: var(--sc-pill); background: var(--sc-panel-2); border: 1px solid var(--sc-line); font-size: calc(var(--sc-ph) * 0.037); font-weight: 600; white-space: nowrap; } .sc__app-chip--on { background: color-mix(in srgb, var(--sc-accent) 12%, var(--sc-surface)); border-color: var(--sc-accent); color: var(--sc-accent-text); } /* ---- Review: a group, one row of thumbnails ---- */ .sc__app-group { display: flex; flex-direction: column; gap: calc(var(--sc-ph) * 0.016); } .sc__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--sc-ph) * 0.016); } /* * A photo, as a gradient. Each group shares a family of tones with a small * shift between them, because that is what a group of repeated shots IS — the * same picture four times, slightly different — and the eye reads the row as * one group before reading any label. */ .sc__thumb { position: relative; aspect-ratio: 3 / 4; border-radius: calc(var(--sc-ph) * 0.03); background: var(--sc-panel-2); overflow: hidden; } .sc__thumb--sea { background: linear-gradient(180deg, #8ecdf5 0 46%, #2f7fc1 46% 70%, #f1d7a8 70%); } .sc__thumb--sea2 { background: linear-gradient(180deg, #92d0f6 0 44%, #327fbf 44% 69%, #efd4a3 69%); } .sc__thumb--sea3 { background: linear-gradient(180deg, #88c7ee 0 48%, #2b78b8 48% 72%, #ecd0a0 72%); } .sc__thumb--sea4 { background: linear-gradient(180deg, #9ad3f5 0 45%, #3584c4 45% 71%, #f3dbad 71%); filter: blur(0.6px); } .sc__thumb--dusk { background: radial-gradient(circle at 50% 62%, #ffd27a 0 12%, transparent 13%), linear-gradient(180deg, #f59e8b 0%, #f7b267 55%, #3d3a5c 55%); } .sc__thumb--dusk2 { background: radial-gradient(circle at 52% 64%, #ffd27a 0 11%, transparent 12%), linear-gradient(180deg, #f39a88 0%, #f5ad62 57%, #3a3758 57%); } .sc__thumb--dusk3 { background: radial-gradient(circle at 48% 60%, #ffd9887a 0 13%, transparent 14%), linear-gradient(180deg, #e98f80 0%, #eea55f 53%, #36334f 53%); } .sc__thumb--leaf { background: radial-gradient(circle at 35% 40%, #9be07c 0 22%, transparent 23%), radial-gradient(circle at 70% 55%, #4caf50 0 26%, transparent 27%), linear-gradient(180deg, #d9f2d0, #2e7d32); } .sc__thumb--leaf2 { background: radial-gradient(circle at 37% 42%, #97dc78 0 21%, transparent 22%), radial-gradient(circle at 68% 56%, #48aa4c 0 25%, transparent 26%), linear-gradient(180deg, #d4efca, #2b7a30); } .sc__thumb--leaf3 { background: radial-gradient(circle at 33% 38%, #a1e384 0 23%, transparent 24%), radial-gradient(circle at 72% 53%, #51b455 0 27%, transparent 28%), linear-gradient(180deg, #ddf4d4, #317f35); filter: brightness(0.7); } /* Ticked for deletion: dimmed, with the tick where the app puts it. */ .sc__thumb--picked::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.22); } .sc__thumb-tick, .sc__thumb-ring { position: absolute; top: 6%; right: 6%; z-index: 1; width: 30%; aspect-ratio: 1; border-radius: 50%; } .sc__thumb-tick { display: flex; align-items: center; justify-content: center; background: var(--sc-accent); border: 1.5px solid #fff; } .sc__thumb-tick svg { width: 70%; height: 70%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .sc__thumb-ring { border: 1.5px solid #fff; background: rgba(0, 0, 0, 0.18); } /* The keeper's badge: never ticked, and labelled so that is visible. */ .sc__thumb-badge { position: absolute; left: 6%; right: 6%; bottom: 6%; display: flex; align-items: center; justify-content: center; gap: 2px; padding: calc(var(--sc-ph) * 0.006) 0; border-radius: var(--sc-pill); background: var(--sc-high); color: #fff; font-size: calc(var(--sc-ph) * 0.03); font-style: normal; font-weight: 800; white-space: nowrap; } .sc__thumb-badge--keep { background: #f5b400; color: #2b1d00; } .sc__thumb-badge svg { width: calc(var(--sc-ph) * 0.03); height: calc(var(--sc-ph) * 0.03); fill: currentColor; } /* The delete bar: the one red thing on the site. */ .sc__app-delete { margin-top: auto; padding: calc(var(--sc-ph) * 0.04); border-radius: calc(var(--sc-ph) * 0.045); background: var(--sc-danger); color: #fff; font-size: calc(var(--sc-ph) * 0.046); font-weight: 700; text-align: center; white-space: nowrap; } /* ------------------------------------------------------------------------- * Scenes * ---------------------------------------------------------------------- */ .sc__scene { display: block; width: 100%; height: auto; margin-bottom: 18px; border-radius: var(--sc-radius-sm); } .sc__scene-plate { fill: var(--sc-tint); } /* Photos in a scene: three muted tones, so a row reads as pictures without being any particular picture. */ .sc__scene-photo--0 { fill: color-mix(in srgb, var(--sc-accent) 38%, var(--sc-surface)); } .sc__scene-photo--1 { fill: color-mix(in srgb, #7c5cff 30%, var(--sc-surface)); } .sc__scene-photo--2 { fill: color-mix(in srgb, #14b8a6 32%, var(--sc-surface)); } .sc__scene-dim { opacity: 0.45; } .sc__scene-found { stroke: var(--sc-accent); stroke-width: 3; } .sc__scene-beam { fill: var(--sc-accent); } .sc__scene-tick { fill: var(--sc-accent); stroke: var(--sc-surface); stroke-width: 1.5; } .sc__scene-tick-mark { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sc__scene-ring { fill: none; stroke: var(--sc-surface); stroke-width: 1.5; } .sc__scene-keep { fill: var(--sc-high); } .sc__scene-card { fill: var(--sc-surface); stroke: var(--sc-line); } .sc__scene-bar { fill: var(--sc-muted); opacity: 0.55; } .sc__scene-bar--dim { opacity: 0.3; } .sc__scene-track { fill: var(--sc-line); } .sc__scene-fill { fill: var(--sc-high); } .sc__scene-fill--low { fill: var(--sc-medium); } .sc__scene-arrow, .sc__scene-undo { fill: none; stroke: var(--sc-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .sc__scene-undo { stroke: var(--sc-high); stroke-dasharray: 5 5; } .sc__scene-bin { fill: none; stroke: var(--sc-muted); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .sc__scene-code { fill: color-mix(in srgb, var(--sc-accent) 18%, var(--sc-surface)); stroke: var(--sc-accent); stroke-width: 1.5; } .sc__scene-qr { fill: var(--sc-panel-2); } .sc__scene-qr-mark { fill: var(--sc-ink); opacity: 0.7; } .sc__scene-shield { fill: var(--sc-high); } .sc__scene-play { fill: #fff; opacity: 0.9; } .sc__scene-wave { fill: none; stroke: var(--sc-muted); stroke-width: 4; stroke-linecap: round; opacity: 0.45; } .sc__scene-slash { fill: none; stroke: var(--sc-accent); stroke-width: 4; stroke-linecap: round; } .sc__scene-lock { fill: var(--sc-accent); } .sc__scene-shackle { fill: none; stroke: var(--sc-accent); stroke-width: 5; stroke-linecap: round; } /* ------------------------------------------------------------------------- * The flow * ---------------------------------------------------------------------- */ .sc__flow { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .sc__flow-step { position: relative; padding: 18px 20px 24px; border-radius: var(--sc-radius-lg); background: var(--sc-panel); border: 1px solid var(--sc-line); } .sc__flow-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: linear-gradient(180deg, var(--sc-accent-2), var(--sc-accent)); color: var(--sc-on-accent); font-size: 15px; font-weight: 700; } .sc__flow-step p { margin-top: 8px; color: var(--sc-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Features * ---------------------------------------------------------------------- */ .sc__features { display: grid; gap: 16px; } .sc__feature { padding: 22px; border-radius: var(--sc-radius-lg); background: var(--sc-panel); border: 1px solid var(--sc-line); } .sc__feature-mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; background: color-mix(in srgb, var(--sc-accent) 12%, transparent); color: var(--sc-accent-text); } .sc__feature p { margin-top: 8px; color: var(--sc-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Numbers * ---------------------------------------------------------------------- */ .sc__stats-band { padding-block: var(--sc-band); background: var(--sc-tint); } .sc__stats { display: grid; gap: 20px; margin: 0; } .sc__stat { padding: 20px; border-radius: var(--sc-radius); background: var(--sc-panel); border: 1px solid var(--sc-line); text-align: center; } .sc__stat dt { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; color: var(--sc-accent-text); font-variant-numeric: tabular-nums; } .sc__stat dd { margin: 8px 0 0; color: var(--sc-muted); font-size: 14.5px; } /* ------------------------------------------------------------------------- * Confidence labels and the category map * ---------------------------------------------------------------------- */ /* The label as a chip: a dot in the level's colour and the word beside it. The word carries the meaning; the colour only repeats it, so the chip reads the same to a reader who cannot tell green from amber. */ .sc__level { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--sc-pill); background: var(--sc-panel-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; } .sc__level::before { content: ""; width: 8px; height: 8px; border-radius: 50%; } .sc__level--high { background: color-mix(in srgb, var(--sc-high) 14%, transparent); } .sc__level--high::before { background: var(--sc-high); } .sc__level--medium { background: color-mix(in srgb, var(--sc-medium) 18%, transparent); } .sc__level--medium::before { background: var(--sc-medium); } .sc__level--info::before { border: 2px solid var(--sc-info); width: 6px; height: 6px; } .sc__legend { display: grid; gap: 10px; margin: 0 0 26px; padding: 18px 20px; border-radius: var(--sc-radius); background: var(--sc-panel); border: 1px solid var(--sc-line); list-style: none; } .sc__legend li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; } .sc__legend li span:last-child { color: var(--sc-muted); } .sc__legend .sc__level { min-width: 112px; justify-content: flex-start; } .sc__cats { display: grid; gap: 18px; align-items: start; } .sc__cat { padding: 22px 22px 8px; border-radius: var(--sc-radius-lg); background: var(--sc-panel); border: 1px solid var(--sc-line); } .sc__cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .sc__cat-head .sc__feature-mark { margin: 0; } .sc__cat-head h3 { font-size: 19px; } .sc__cat ul { margin: 0; padding: 0; list-style: none; } .sc__cat li { padding: 13px 0; border-top: 1px solid var(--sc-line); } .sc__cat li:first-child { border-top: 0; } .sc__cat-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sc__cat-line b { font-size: 15.5px; } .sc__cat li p { margin-top: 4px; color: var(--sc-muted); font-size: 14.5px; line-height: 1.5; } .sc__apk { flex-basis: 100%; font-size: 15px; } /* ------------------------------------------------------------------------- * The data list * ---------------------------------------------------------------------- */ .sc__data { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .sc__data-item { padding: 18px 20px; border-radius: var(--sc-radius); background: var(--sc-panel); border: 1px solid var(--sc-line); } .sc__data-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .sc__data-head h3 { font-size: 17px; } .sc__chip { padding: 4px 12px; border-radius: var(--sc-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; } /* * "Stays on the phone" is the good answer, and it is not green. * * Green is money in. A privacy verdict painted in the income colour would be the * second meaning the colour carries, and the first one would stop being reliable. * So the two chips separate on weight and ground: the reassuring one is the * accent tint, the one worth reading twice is amber — the same amber the app uses * for "waiting", which is exactly what "only when you export it yourself" is. */ .sc__chip--stays { background: color-mix(in srgb, var(--sc-accent) 12%, transparent); color: var(--sc-accent-text); } .sc__chip--leaves { background: color-mix(in srgb, var(--sc-medium) 20%, transparent); color: var(--sc-ink); } .sc__data-when { color: var(--sc-muted); font-size: 13.5px; } .sc__data-where { margin-top: 8px; color: var(--sc-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Notices * ---------------------------------------------------------------------- */ .sc__notice { padding-block: var(--sc-band-sm); } .sc__notice-inner { display: flex; gap: 18px; padding: 24px; border-radius: var(--sc-radius-lg); background: var(--sc-panel); border: 1px solid var(--sc-line); border-left: 4px solid var(--sc-muted); } .sc__notice--info .sc__notice-inner { border-left-color: var(--sc-accent); } .sc__notice--warn .sc__notice-inner { border-left-color: var(--sc-medium); } .sc__notice--critical .sc__notice-inner { border-left-color: var(--sc-danger); } .sc__notice-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--sc-panel-2); } .sc__notice-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sc__notice h2 { font-size: 21px; } .sc__notice p { margin-top: 8px; color: var(--sc-muted); font-size: 15.5px; } .sc__notice-list { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; } .sc__notice-list li { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 2px solid var(--sc-line); } .sc__notice-list b { font-size: 15.5px; } .sc__notice-list span { color: var(--sc-muted); font-size: 15px; } /* ------------------------------------------------------------------------- * FAQ * ---------------------------------------------------------------------- */ .sc__faq { display: grid; gap: 10px; } .sc__faq-item { padding: 4px 20px; border-radius: var(--sc-radius); background: var(--sc-panel); border: 1px solid var(--sc-line); } .sc__faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 16.5px; font-weight: 700; cursor: pointer; list-style: none; } .sc__faq-item summary::-webkit-details-marker { display: none; } .sc__faq-item summary i { flex: none; margin-right: 3px; width: 9px; height: 9px; border-right: 2.5px solid var(--sc-accent); border-bottom: 2.5px solid var(--sc-accent); transform: translateY(-3px) rotate(45deg); } .sc__faq-item[open] summary i { transform: translateY(2px) rotate(-135deg); } .sc__faq-item p { padding-bottom: 18px; color: var(--sc-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * Closing band * ---------------------------------------------------------------------- */ .sc__cta { padding-block: var(--sc-band); background: var(--sc-tint); background-image: linear-gradient(var(--sc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sc-grid) 1px, transparent 1px); background-size: 34px 34px; } .sc__cta-inner { max-width: 720px; text-align: center; } .sc__cta-inner .sc__stores, .sc__cta-inner .sc__actions { justify-content: center; } /* ------------------------------------------------------------------------- * Pages, documents and prose * ---------------------------------------------------------------------- */ .sc__page-head { padding-block: clamp(36px, 4vw, 60px) 0; } .sc__page-head h1 { max-width: 22ch; } .sc__doc-updated { margin-top: 14px; color: var(--sc-muted); font-size: 14px; } .sc__doc-lead { padding: 18px 20px; border-radius: var(--sc-radius); background: var(--sc-panel); border: 1px solid var(--sc-line); color: var(--sc-ink); } /* * A page is ONE column, whatever the blocks inside it happen to be. * * Every block draws its own full-bleed band with a container inside, and those * containers disagree on purpose: prose is set to a reading measure (760px) * while a data list takes the full 1180px, because on the HOMEPAGE that * difference is the layout. On a privacy page it is not a layout — it is text * that steps in and out by 200px on each side as the reader scrolls. So this * pins every container on such a page to one width, and the reading measure * inside it becomes a no-op. */ .sc__page--doc .sc__container { width: min(880px, 100% - 40px); } .sc__page--doc .sc__measure { max-width: none; } .sc__doc .sc__section { padding-block: 0; } .sc__doc .sc__section + .sc__section { padding-top: var(--sc-doc-gap); } /* * A block heading inside a document is a section heading like any other. * * The data list draws its heading through the theme's normal section head, which * is sized for a marketing band (up to 36px). On the privacy page that heading is * numbered and sits in the contents list beside prose headings set at 26px, so * left alone it printed one section of the document a size larger than the rest. */ .sc__doc .sc__section-head h2 { font-size: clamp(21px, 2.2vw, 26px); } .sc__doc .sc__section-head { margin-bottom: 18px; } .sc__toc { margin-top: 28px; padding: 18px 22px; border-radius: var(--sc-radius); background: var(--sc-panel-2); } .sc__toc b { display: block; margin-bottom: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-muted); } .sc__toc ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .sc__toc a { color: var(--sc-accent-text); font-size: 15px; text-decoration: none; } .sc__toc a:hover { text-decoration: underline; text-underline-offset: 3px; } .sc__prose { font-size: 17px; } .sc__prose h2 { margin-top: 38px; font-size: clamp(21px, 2.2vw, 26px); } .sc__prose h3 { margin-top: 26px; } .sc__prose h2:first-child, .sc__prose h3:first-child { margin-top: 0; } .sc__prose p, .sc__prose ul, .sc__prose ol { margin-top: 14px; } .sc__prose ul, .sc__prose ol { padding-left: 22px; } .sc__prose li { margin-top: 7px; } .sc__prose a { color: var(--sc-accent-text); text-underline-offset: 3px; } .sc__prose strong { font-weight: 700; } .sc__prose table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 15.5px; } .sc__prose th, .sc__prose td { padding: 11px 12px; border-bottom: 1px solid var(--sc-line); text-align: left; vertical-align: top; } .sc__prose blockquote { margin: 20px 0 0; padding-left: 18px; border-left: 3px solid var(--sc-accent); color: var(--sc-muted); } .sc__figure { margin: 0; } .sc__figure img { border-radius: var(--sc-radius); } .sc__figure figcaption { margin-top: 10px; color: var(--sc-muted); font-size: 14px; } /* ------------------------------------------------------------------------- * Posts * ---------------------------------------------------------------------- */ .sc__post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; color: var(--sc-muted); font-size: 14px; } .sc__post-grid { display: grid; gap: 16px; } .sc__post-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: var(--sc-radius-lg); background: var(--sc-panel); border: 1px solid var(--sc-line); } .sc__post-card h3 { margin-top: 6px; } .sc__post-card h3 a { text-decoration: none; } .sc__post-card p { margin-top: 8px; color: var(--sc-muted); font-size: 15.5px; } .sc__post-card-date { color: var(--sc-muted); font-size: 13px; } .sc__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; } .sc__pager a { min-width: 42px; padding: 9px 12px; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-line); font-weight: 700; text-align: center; text-decoration: none; } .sc__pager a[aria-current="page"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-on-accent); } /* ------------------------------------------------------------------------- * 404 / 500 * ---------------------------------------------------------------------- */ .sc__state { padding-block: clamp(60px, 9vw, 120px); text-align: center; } .sc__state .sc__measure { margin-inline: auto; } .sc__state-mark { font-size: clamp(64px, 11vw, 120px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--sc-line); } .sc__state h1 { margin-top: 12px; } .sc__state p { margin-top: 14px; color: var(--sc-muted); } .sc__state .sc__actions { justify-content: center; } /* ------------------------------------------------------------------------- * Footer * ---------------------------------------------------------------------- */ .sc__footer { padding-block: var(--sc-band) 32px; background: var(--sc-surface); border-top: 1px solid var(--sc-line); } /* * Two link columns from the narrowest screen up. * * "Product" and "More" are four or five one-word links each. Stacked one per * row on a phone they turned the footer into a column of ten items a thumb has * to scroll past; side by side they read as two short lists and the footer ends * a screen earlier. The brand block and Contact keep the full width — a * paragraph and an email address do not halve well. */ .sc__footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .sc__footer-about, .sc__footer-contact { grid-column: 1 / -1; } .sc__footer-about p { margin-top: 16px; color: var(--sc-muted); font-size: 15px; } .sc__footer-build { font-variant-numeric: tabular-nums; } .sc__footer-col h2 { margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-muted); } .sc__footer-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .sc__footer-col a { font-size: 15px; text-decoration: none; } .sc__footer-col a:hover { color: var(--sc-accent-text); } .sc__footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } /* * Centred on a phone, split to the two edges on a desktop. * * `space-between` on a narrow screen does nothing useful: both halves wrap onto * their own row and each sits hard against the left margin, which reads as two * stray lines rather than as the closing rule of the page. */ .sc__footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--sc-line); color: var(--sc-muted); font-size: 13.5px; text-align: center; } .sc__footer-bottom div { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .sc__footer-bottom a { text-decoration: none; } .sc__footer-bottom a:hover { color: var(--sc-accent-text); } .sc__builtwith { margin-left: 10px; } /* ------------------------------------------------------------------------- * Widths * * Mobile first, and the two breakpoints are where the CONTENT needs them, not * where a device happens to be: 640px is where two cards fit side by side, and * 900px is where the header stops needing a menu button and the hero can put the * phone next to the words. * ---------------------------------------------------------------------- */ @media (min-width: 640px) { .sc__flow, .sc__features, .sc__stats, .sc__cats, .sc__post-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { :root { --sc-header-h: 72px; } .sc__header { background: color-mix(in srgb, var(--sc-surface) 92%, transparent); backdrop-filter: blur(12px); } /* Above this width the menu is not a drawer at all: it is a row in the bar, always open, static, with no target to reach and no button to reach it. */ .sc__menu-button, .sc__header-inner:has(#sc-menu:target) .sc__menu-button--close { display: none; } .sc__header-panel, .sc__header-panel:target { display: flex; position: static; flex-direction: row; align-items: center; justify-content: flex-end; gap: 28px; width: auto; margin-left: auto; padding: 0; background: transparent; border-top: 0; overflow: visible; } .sc__nav ul { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; } .sc__nav a { padding: 8px 0; border-bottom: 0; font-size: 16px; font-weight: 600; } .sc__header-actions { margin-top: 0; } .sc__lang ul { top: calc(100% + 8px); bottom: auto; } .sc__brand img, .sc__brand-mark { width: 44px; height: 44px; } .sc__brand-text strong { font-size: 19px; } /* The phones get the wider half. Two app screens side by side need more room than a headline and three chips, and the headline reads fine at 500px. */ .sc__hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } .sc__flow { grid-template-columns: repeat(4, 1fr); } .sc__features { grid-template-columns: repeat(3, 1fr); } .sc__stats { grid-template-columns: repeat(4, 1fr); } .sc__post-grid { grid-template-columns: repeat(3, 1fr); } .sc__footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .sc__footer-about, .sc__footer-contact { grid-column: auto; } .sc__footer-bottom { justify-content: space-between; text-align: left; } } @media (prefers-reduced-motion: reduce) { .sc * { animation: none !important; transition: none !important; } }