/* * BackHere — the product site of an app for saving places you want to return to. * * The app's own design decides this file. Four things the app does, four fixed * colours (orange: save · blue: where am I · green: back here · purple: send a * location), type one step larger than a site would normally use, and a round * colour badge with a white glyph for every category. A visitor who has seen the * app should recognise the site, and a visitor who sees the site first should * recognise the app when it opens. * * Light is the base. The app opens white with an orange button, and a product * page that opens dark would be introducing a different product — but 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 { /* Mode-independent — the app's four action colours, unchanged from `src/ui/theme.ts`. They are not decoration: each one names one of the four things the app does, and using one for anything else breaks the promise that colour alone tells you what a button will do. */ --bh-save: #f26a1b; --bh-where: #2563eb; --bh-back: #16a34a; --bh-send: #8b5cf6; /* The category badges, same values as `src/places/categories.ts`. */ --bh-cat-car: #e8443a; --bh-cat-hotel: #8b5cf6; --bh-cat-home: #2563eb; --bh-cat-food: #f97316; --bh-cat-favorite: #ec4899; --bh-cat-other: #6b7280; --bh-accent: #f26a1b; --bh-on-accent: #ffffff; --bh-radius: 16px; --bh-radius-sm: 12px; --bh-radius-lg: 24px; --bh-pill: 999px; --bh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ---- Rhythm ---- One band height for the whole site, so the page is a stack of equal beats rather than a set of sections that each guessed their own padding. */ --bh-band: clamp(48px, 5.2vw, 84px); --bh-band-sm: clamp(28px, 3vw, 44px); --bh-head-gap: clamp(24px, 2.8vw, 36px); /* ---- LIGHT (base) ---- */ --bh-bg: #f4f5f7; --bh-surface: #ffffff; --bh-panel: #ffffff; --bh-panel-2: #eef0f4; --bh-tint: #eaecf1; --bh-line: #e4e7eb; --bh-ink: #242c35; --bh-muted: #6b7280; --bh-shadow: 0 20px 48px rgba(36, 44, 53, 0.12); --bh-shadow-sm: 0 6px 18px rgba(36, 44, 53, 0.08); /* #f26a1b is ~3:1 on white — usable as a surface, not as small text. Same hue, taken down to ~7:1. */ --bh-accent-text: #a8410c; /* The faint map graticule behind the hero and the closing band. Per mode: a grid that reads as a map on a light page reads as scratches on a dark one. */ --bh-grid: rgba(36, 44, 53, 0.05); } /* ---- DARK, from the OS, while no explicit light choice is in force ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bh-bg: #101216; --bh-surface: #191c21; --bh-panel: #22262d; --bh-panel-2: #2a2f37; --bh-tint: #15181d; --bh-line: #2c313a; --bh-ink: #f2f4f7; --bh-muted: #9aa2ae; --bh-shadow: 0 28px 72px rgba(0, 0, 0, 0.55); --bh-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4); --bh-accent: #fd9202; --bh-on-accent: #1a1206; --bh-accent-text: #fda94b; --bh-grid: rgba(180, 200, 235, 0.05); } } /* ---- DARK, chosen by the visitor. Same list as above. ---- */ :root[data-theme="dark"] { --bh-bg: #101216; --bh-surface: #191c21; --bh-panel: #22262d; --bh-panel-2: #2a2f37; --bh-tint: #15181d; --bh-line: #2c313a; --bh-ink: #f2f4f7; --bh-muted: #9aa2ae; --bh-shadow: 0 28px 72px rgba(0, 0, 0, 0.55); --bh-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4); --bh-accent: #fd9202; --bh-on-accent: #1a1206; --bh-accent-text: #fda94b; --bh-grid: rgba(180, 200, 235, 0.05); } /* ------------------------------------------------------------------------- * Base * ---------------------------------------------------------------------- */ .bh { background: var(--bh-bg); color: var(--bh-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* One step larger than a site would normally set. The app is used outdoors, one-handed, and by older readers; the site says the same thing. */ font-size: 17px; line-height: 1.6; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } .bh *, .bh *::before, .bh *::after { box-sizing: border-box; } .bh h1, .bh h2, .bh h3 { margin: 0; line-height: 1.18; letter-spacing: -0.02em; font-weight: 750; } .bh h1 { font-size: clamp(29px, 4.6vw, 54px); } .bh h2 { font-size: clamp(23px, 3vw, 36px); } .bh h3 { font-size: clamp(19px, 1.7vw, 22px); } .bh p { margin: 0; } .bh a { color: inherit; } .bh img { max-width: 100%; } .bh__container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 36px); } .bh__measure { max-width: 760px; } .bh__section { padding: var(--bh-band) 0; } .bh__section--tint { background: var(--bh-tint); } .bh__section--alt { background: var(--bh-surface); border-top: 1px solid var(--bh-line); border-bottom: 1px solid var(--bh-line); } .bh__skip { position: absolute; left: -9999px; } .bh__skip:focus { left: 12px; top: 12px; z-index: 60; padding: 10px 16px; background: var(--bh-accent); color: var(--bh-on-accent); border-radius: var(--bh-pill); } .bh :focus-visible { outline: 3px solid var(--bh-where); outline-offset: 2px; } /* ------------------------------------------------------------------------- * Buttons * * The app's main action on every screen is one wide, unmissable button. The * site keeps that: a single filled button per band, everything else quieter. * ---------------------------------------------------------------------- */ .bh__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; min-height: 54px; border-radius: var(--bh-pill); background: var(--bh-accent); color: var(--bh-on-accent); font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: var(--bh-shadow-sm); transition: transform 0.12s ease, filter 0.12s ease; } .bh__button:hover { filter: brightness(1.05); transform: translateY(-1px); } .bh__button--ghost { background: transparent; color: var(--bh-ink); border: 2px solid var(--bh-line); box-shadow: none; } .bh__button--small { min-height: 44px; padding: 10px 18px; font-size: 15px; } .bh__button[aria-disabled="true"] { background: var(--bh-panel-2); color: var(--bh-muted); box-shadow: none; cursor: default; } .bh__text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--bh-accent-text); text-decoration: none; } .bh__text-link:hover { text-decoration: underline; } .bh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; } .bh__eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bh-accent-text); } .bh__lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--bh-muted); margin-top: 16px; } .bh__note { margin-top: 20px; font-size: 15px; color: var(--bh-muted); } .bh__empty { padding: 28px; border: 1px dashed var(--bh-line); border-radius: var(--bh-radius); color: var(--bh-muted); text-align: center; } .bh__section-head { display: grid; gap: 12px 40px; padding-bottom: 18px; margin-bottom: var(--bh-head-gap); border-bottom: 1px solid var(--bh-line); } @media (min-width: 900px) { .bh__section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .bh__section-head .bh__lead { margin-top: 0; } } .bh__section-head--center { text-align: center; border-bottom: none; justify-items: center; } @media (min-width: 900px) { .bh__section-head--center { grid-template-columns: minmax(0, 1fr); } } .bh__icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------------------------- * Header * ---------------------------------------------------------------------- */ .bh__header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bh-surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bh-line); } /* * The header is a phone menu that grows into a bar, not a bar that is squeezed * onto a phone. * * The first version was one flex row with `flex-wrap`, which on a 390px screen * did exactly what it was told: four menu links, a version pill, a language * menu, a mode switch and a download button wrapped into a five-row header * about 260px tall — a sticky one, so it ate two thirds of the first screen * before a visitor had read a word. * * So below `--bh-nav-break` everything except the brand moves into a panel that * is closed by default and opened by the checkbox above it. Above the break the * checkbox and its button are gone and the panel is the row it always was. */ .bh__header-inner { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } /* Visually hidden, still focusable — see the comment on the input in index.tsx. */ .bh__menu-check { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); } .bh__menu-button { display: grid; place-items: center; /* 44px is the smallest target a thumb hits reliably; the icon inside is 20px. */ width: 44px; height: 44px; margin-left: auto; border-radius: 12px; border: 1px solid var(--bh-line); color: var(--bh-ink); cursor: pointer; } .bh__menu-bars, .bh__menu-bars::before, .bh__menu-bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.15s ease, background-color 0.15s ease; } .bh__menu-bars { position: relative; } .bh__menu-bars::before, .bh__menu-bars::after { content: ""; position: absolute; left: 0; } .bh__menu-bars::before { top: -6px; } .bh__menu-bars::after { top: 6px; } /* Open: the three bars become the cross that closes it. */ .bh__menu-check:checked + .bh__menu-button .bh__menu-bars { background: transparent; } .bh__menu-check:checked + .bh__menu-button .bh__menu-bars::before { transform: translateY(6px) rotate(45deg); } .bh__menu-check:checked + .bh__menu-button .bh__menu-bars::after { transform: translateY(-6px) rotate(-45deg); } .bh__menu-check:focus-visible + .bh__menu-button { outline: 3px solid var(--bh-where); outline-offset: 2px; } /* Closed by default, and full-width when open so it lands under the brand. */ .bh__header-panel { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 12px; } .bh__menu-check:checked ~ .bh__header-panel { display: flex; } /* On a phone every link is a row of its own, at a thumb-sized height. */ .bh__header-panel .bh__nav ul { flex-direction: column; gap: 2px; } .bh__header-panel .bh__nav a { display: block; padding: 12px 14px; border-radius: 12px; font-size: 17px; color: var(--bh-ink); } .bh__header-panel .bh__header-actions { flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--bh-line); } /* The version pill is a desktop garnish. Inside an open phone menu it is one more row between the links and the download button, which is the row that matters — so it does not come along. */ .bh__header-panel .bh__version-pill { display: none; } .bh__header-panel .bh__header-actions .bh__button { flex: 1 1 100%; } /* * The bar. 960px rather than a tablet-ish 768: at 768 the four links, the * version pill, the language menu, the mode switch and the download button add * up to about 900px of content and wrap anyway — which is the exact layout this * whole block exists to avoid. */ @media (min-width: 960px) { .bh__menu-check, .bh__menu-button { display: none; } .bh__header-panel { display: flex; flex: 1; flex-basis: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 0; } .bh__header-panel .bh__nav ul { flex-direction: row; gap: 4px; } .bh__header-panel .bh__nav a { display: inline-block; padding: 8px 12px; border-radius: var(--bh-pill); font-size: 16px; color: var(--bh-muted); } .bh__header-panel .bh__header-actions { padding-top: 0; border-top: none; flex-wrap: nowrap; } .bh__header-panel .bh__version-pill { display: inline-flex; } .bh__header-panel .bh__header-actions .bh__button { flex: none; } } .bh__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .bh__brand img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; } .bh__brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--bh-save); color: #fff; } .bh__brand-mark svg { width: 24px; height: 24px; fill: currentColor; } .bh__brand-text strong { display: block; font-size: 19px; font-weight: 750; letter-spacing: -0.01em; } .bh__brand-text small { display: block; font-size: 13px; color: var(--bh-muted); } .bh__brand--compact .bh__brand-text small { display: none; } .bh__nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; } .bh__nav a { display: inline-block; padding: 8px 12px; border-radius: var(--bh-pill); font-size: 16px; font-weight: 600; text-decoration: none; color: var(--bh-muted); } .bh__nav a:hover { background: var(--bh-panel-2); color: var(--bh-ink); } .bh__header-actions { display: flex; align-items: center; gap: 10px; } .bh__version-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--bh-pill); border: 1px solid var(--bh-line); font-size: 13px; font-weight: 650; color: var(--bh-muted); } .bh__version-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--bh-back); } .bh__icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--bh-line); background: transparent; color: var(--bh-ink); cursor: pointer; } .bh__lang { position: relative; } .bh__lang summary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: var(--bh-pill); border: 1px solid var(--bh-line); font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; } .bh__lang summary::-webkit-details-marker { display: none; } .bh__lang summary i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .bh__lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 172px; margin: 0; padding: 6px; list-style: none; background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-radius-sm); box-shadow: var(--bh-shadow); z-index: 50; } .bh__lang a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 15px; text-decoration: none; } .bh__lang a:hover, .bh__lang a[aria-current="page"] { background: var(--bh-panel-2); } /* ------------------------------------------------------------------------- * Hero and the phone * ---------------------------------------------------------------------- */ .bh__hero { position: relative; padding: clamp(40px, 6vw, 84px) 0 var(--bh-band); overflow: hidden; } /* The map graticule. A site about places should sit on one, faintly. */ .bh__hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--bh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bh-grid) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 50% 15%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 15%, #000 0%, transparent 72%); pointer-events: none; } .bh__hero-grid { position: relative; display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; } @media (min-width: 960px) { .bh__hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } } .bh__accent { color: var(--bh-accent-text); } .bh__hero-notes { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; } .bh__hero-notes li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--bh-pill); background: var(--bh-panel); border: 1px solid var(--bh-line); font-size: 14px; font-weight: 600; color: var(--bh-muted); } .bh__hero-notes li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bh-back); } /* * The phone. * * Markup, not a screenshot: a screenshot is one moment in one language at one * pixel density, and it goes stale the day the app's type changes. This is * sharp on every screen, it translates, and a reader on a slow connection sees * it at the same time as the headline. */ .bh__phone { position: relative; width: min(340px, 100%); margin: 0 auto; padding: 12px; border-radius: 42px; background: var(--bh-panel); border: 1px solid var(--bh-line); box-shadow: var(--bh-shadow); } .bh__phone-screen { position: relative; border-radius: 32px; overflow: hidden; background: var(--bh-surface); aspect-ratio: 9 / 17; display: flex; flex-direction: column; } .bh__phone-map { position: relative; flex: 1; background: linear-gradient(160deg, #dfe7ee 0%, #eef2f5 55%, #e6ecef 100%); } :root[data-theme="dark"] .bh__phone-map { background: linear-gradient(160deg, #1a2029 0%, #141920 55%, #191f28 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bh__phone-map { background: linear-gradient(160deg, #1a2029 0%, #141920 55%, #191f28 100%); } } /* * The map drawing, and ONLY the map drawing. * * `>` rather than a descendant selector, and it is not a nicety: the saved-place * card sits inside this element, so the loose version also caught the category * badge's glyph and the arrow in the distance dial and stretched both of them to * `position:absolute; inset:0` over the whole map — two giant triangles in the * corner of the screen, and two empty coloured circles where the icons belong. */ .bh__phone-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .bh__map-road { fill: none; stroke: var(--bh-line); stroke-width: 7; stroke-linecap: round; opacity: 0.85; } .bh__map-road--major { stroke-width: 11; opacity: 0.95; } .bh__map-block { fill: var(--bh-panel-2); opacity: 0.55; } .bh__map-walk { fill: none; stroke: var(--bh-back); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 9; } .bh__map-me { fill: var(--bh-where); stroke: #fff; stroke-width: 3; } .bh__map-pin-body { fill: var(--bh-save); } .bh__map-pin-glyph { fill: #fff; } /* The saved-place card the app floats over the map. */ .bh__phone-card { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 14px; border-radius: 18px; background: var(--bh-panel); border: 1px solid var(--bh-line); box-shadow: var(--bh-shadow-sm); } .bh__phone-card-top { display: flex; align-items: center; gap: 10px; } .bh__badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bh-cat-other); color: #fff; flex: none; } .bh__badge svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bh__badge--car { background: var(--bh-cat-car); } .bh__badge--hotel { background: var(--bh-cat-hotel); } .bh__badge--home { background: var(--bh-cat-home); } .bh__badge--food { background: var(--bh-cat-food); } .bh__badge--favorite { background: var(--bh-cat-favorite); } .bh__badge--other { background: var(--bh-cat-other); } .bh__phone-card-title { font-weight: 700; font-size: 16px; } .bh__phone-card-sub { font-size: 13px; color: var(--bh-muted); } .bh__phone-arrow { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bh-line); } .bh__phone-arrow-dial { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--bh-back) 14%, transparent); color: var(--bh-back); flex: none; } .bh__phone-arrow-dial svg { width: 30px; height: 30px; fill: currentColor; } .bh__phone-distance { font-size: 30px; font-weight: 780; letter-spacing: -0.02em; line-height: 1.1; } .bh__phone-walk { font-size: 14px; color: var(--bh-muted); } /* The one big button, exactly as the app draws it. */ .bh__phone-button { margin: 12px; padding: 15px; border-radius: 18px; background: var(--bh-save); color: #fff; font-weight: 750; font-size: 17px; text-align: center; } .bh__phone-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 12px 14px; } .bh__phone-tile { padding: 10px 6px; border-radius: 13px; background: var(--bh-panel-2); text-align: center; font-size: 11.5px; font-weight: 650; color: var(--bh-muted); line-height: 1.3; } .bh__phone-tile i { display: block; width: 9px; height: 9px; margin: 0 auto 6px; border-radius: 50%; } .bh__phone-tile--where i { background: var(--bh-where); } .bh__phone-tile--back i { background: var(--bh-back); } .bh__phone-tile--send i { background: var(--bh-send); } /* ------------------------------------------------------------------------- * Scenes — the drawn pictures at the top of a card * * Same tokens as everything else, so they are correct in both modes without a * second asset, and they carry no text so they are correct in every language. * The map underneath is the one the phone in the hero draws, at a third of the * size and with the detail taken out — a picture that competes with the words * beside it is not helping the words. * ---------------------------------------------------------------------- */ .bh__scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, #dfe7ee 0%, #eef2f5 55%, #e6ecef 100%); } :root[data-theme="dark"] .bh__scene { background: linear-gradient(160deg, #1a2029 0%, #141920 55%, #191f28 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bh__scene { background: linear-gradient(160deg, #1a2029 0%, #141920 55%, #191f28 100%); } } .bh__scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .bh__scene-block { fill: var(--bh-panel-2); opacity: 0.62; } .bh__scene-road { fill: none; stroke: var(--bh-line); stroke-width: 5; stroke-linecap: round; opacity: 0.9; } .bh__scene-road--major { stroke-width: 9; } .bh__scene-shadow { fill: rgba(16, 18, 22, 0.16); } .bh__scene-pin { fill: var(--bh-save); } .bh__scene-pin-dot { fill: #fff; } .bh__scene-card { fill: var(--bh-panel); stroke: var(--bh-line); stroke-width: 1; } .bh__scene-bar { fill: var(--bh-ink); opacity: 0.7; } .bh__scene-bar--dim { opacity: 0.3; } .bh__scene-bar--on { fill: #fff; opacity: 0.95; } .bh__scene-dot { fill: var(--bh-cat-other); } .bh__scene-dot--save { fill: var(--bh-save); } .bh__scene-dot--where { fill: var(--bh-where); } .bh__scene-dot--back { fill: var(--bh-back); } .bh__scene-dot--send { fill: var(--bh-send); } .bh__scene-button { fill: var(--bh-save); } .bh__scene-me { fill: var(--bh-where); stroke: #fff; stroke-width: 3; } .bh__scene-accuracy { fill: color-mix(in srgb, var(--bh-where) 20%, transparent); } .bh__scene-walk { fill: none; stroke: var(--bh-back); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 8; } .bh__scene-arrow { fill: var(--bh-back); } .bh__scene-dial { fill: color-mix(in srgb, var(--bh-back) 16%, transparent); } .bh__scene-park { fill: color-mix(in srgb, var(--bh-back) 14%, transparent); } .bh__scene-water { fill: color-mix(in srgb, var(--bh-where) 16%, transparent); } .bh__scene-chip { fill: var(--bh-panel-2); } .bh__scene-chip--send { fill: var(--bh-send); } .bh__scene-chip--save { fill: var(--bh-save); } .bh__scene-photo { fill: var(--bh-panel); stroke: var(--bh-line); stroke-width: 1; } .bh__scene-photo-sky { fill: color-mix(in srgb, var(--bh-where) 16%, var(--bh-panel-2)); } .bh__scene-photo-pillar { fill: var(--bh-muted); opacity: 0.5; } .bh__scene-clock-face { fill: var(--bh-panel); stroke: var(--bh-line); stroke-width: 1; } .bh__scene-clock-hand { fill: none; stroke: var(--bh-ink); stroke-width: 2.4; stroke-linecap: round; } .bh__scene-signal rect { fill: var(--bh-muted); opacity: 0.5; } .bh__scene-strike { stroke: var(--bh-cat-car); stroke-width: 3; stroke-linecap: round; fill: none; } /* ------------------------------------------------------------------------- * Action colours — the four things the app does * ---------------------------------------------------------------------- */ .bh__actions-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); } .bh__action { position: relative; border-radius: var(--bh-radius); background: var(--bh-panel); border: 1px solid var(--bh-line); overflow: hidden; } /* The colour band moved from the left edge to the top, because the picture now occupies the top of the card and a vertical bar beside an image reads as a rendering fault rather than as a category. */ .bh__action::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 1; background: var(--bh-action, var(--bh-save)); } .bh__action .bh__scene { border-bottom: 1px solid var(--bh-line); } .bh__action-body { padding: 18px 20px 22px; } .bh__action--save { --bh-action: var(--bh-save); } .bh__action--where { --bh-action: var(--bh-where); } .bh__action--back { --bh-action: var(--bh-back); } .bh__action--send { --bh-action: var(--bh-send); } .bh__action-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--bh-action) 15%, transparent); color: var(--bh-action); } .bh__action h3 { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; } .bh__action p { color: var(--bh-muted); font-size: 16px; } /* ------------------------------------------------------------------------- * Features, steps, scenarios * ---------------------------------------------------------------------- */ .bh__feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); } .bh__feature { padding: 24px; border-radius: var(--bh-radius); background: var(--bh-panel); border: 1px solid var(--bh-line); } .bh__feature-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--bh-tone, var(--bh-accent)) 15%, transparent); color: var(--bh-tone, var(--bh-accent-text)); } /* Icon beside the title rather than above it: on a phone that is 53px saved on every card, and six cards is most of a screen. */ .bh__feature h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } /* The six category colours of the app, cycled by position. */ .bh__feature--t0 { --bh-tone: var(--bh-cat-car); } .bh__feature--t1 { --bh-tone: var(--bh-where); } .bh__feature--t2 { --bh-tone: var(--bh-back); } .bh__feature--t3 { --bh-tone: var(--bh-send); } .bh__feature--t4 { --bh-tone: var(--bh-cat-food); } .bh__feature--t5 { --bh-tone: var(--bh-cat-favorite); } .bh__feature p { color: var(--bh-muted); font-size: 16px; } .bh__steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: bh-step; } .bh__steps li { position: relative; overflow: hidden; border-radius: var(--bh-radius); background: var(--bh-panel); border: 1px solid var(--bh-line); counter-increment: bh-step; } /* The number sits ON the picture rather than above the words: it is a caption for the scene, and it costs no vertical space that way — 40px × 3 steps is a whole card's worth of height on a phone. */ .bh__steps li::before { content: counter(bh-step); position: absolute; top: 12px; left: 12px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bh-accent); color: var(--bh-on-accent); font-weight: 750; font-size: 17px; box-shadow: var(--bh-shadow-sm); } .bh__steps .bh__scene { border-bottom: 1px solid var(--bh-line); } .bh__step-body { padding: 16px 20px 20px; } .bh__steps h3 { margin-bottom: 8px; } .bh__steps p { color: var(--bh-muted); font-size: 16px; } .bh__scenarios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .bh__scenario { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; border-radius: var(--bh-radius-sm); background: var(--bh-panel); border: 1px solid var(--bh-line); } .bh__scenario strong { display: block; font-size: 16.5px; } .bh__scenario span { display: block; font-size: 14.5px; color: var(--bh-muted); } /* ------------------------------------------------------------------------- * Plans * ---------------------------------------------------------------------- */ .bh__plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); align-items: start; } .bh__plan { position: relative; padding: 28px 26px; border-radius: var(--bh-radius-lg); background: var(--bh-panel); border: 1px solid var(--bh-line); } .bh__plan--pick { border-color: var(--bh-accent); box-shadow: var(--bh-shadow); } .bh__plan-tag { position: absolute; top: -13px; left: 26px; padding: 5px 14px; border-radius: var(--bh-pill); background: var(--bh-accent); color: var(--bh-on-accent); font-size: 13px; font-weight: 700; } .bh__plan-price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; } .bh__plan-price strong { font-size: clamp(30px, 3.4vw, 40px); font-weight: 780; letter-spacing: -0.02em; } .bh__plan-price span { font-size: 15px; color: var(--bh-muted); } .bh__plan ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; } .bh__plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; } .bh__plan li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: color-mix(in srgb, var(--bh-back) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; } .bh__plan li.bh__plan-no::before { background: var(--bh-panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 13px no-repeat; color: var(--bh-muted); } .bh__plan-no { color: var(--bh-muted); } .bh__plan .bh__button { width: 100%; margin-top: 24px; } /* ------------------------------------------------------------------------- * The data table — what is stored, and whether it leaves the phone * * A table, not cards: the columns mean something together, and a reader of a * privacy page is comparing rows. On a phone it collapses to stacked records * with the column names as labels, which keeps the meaning when the alignment * can no longer carry it. * ---------------------------------------------------------------------- */ .bh__table-wrap { overflow-x: auto; border-radius: var(--bh-radius); border: 1px solid var(--bh-line); background: var(--bh-panel); } .bh__table { width: 100%; border-collapse: collapse; font-size: 16px; } .bh__table th, .bh__table td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bh-line); } .bh__table thead th { font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bh-muted); background: var(--bh-panel-2); } .bh__table tbody tr:last-child th, .bh__table tbody tr:last-child td { border-bottom: none; } .bh__chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--bh-pill); background: var(--bh-panel-2); font-size: 14px; font-weight: 650; white-space: nowrap; } .bh__chip--stays { background: color-mix(in srgb, var(--bh-back) 15%, transparent); color: var(--bh-back); } .bh__chip--leaves { background: color-mix(in srgb, var(--bh-cat-food) 18%, transparent); color: var(--bh-accent-text); } @media (max-width: 720px) { .bh__table thead { display: none; } .bh__table tr { display: block; border-bottom: 1px solid var(--bh-line); padding: 6px 0; } .bh__table tbody tr:last-child { border-bottom: none; } .bh__table th, .bh__table td { display: block; border: none; padding: 7px 16px; } .bh__table td::before { content: attr(data-label); display: block; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bh-muted); margin-bottom: 3px; } } /* ------------------------------------------------------------------------- * Notice * * The honesty band. What the app cannot do gets a block of its own, in the page * flow, at the same weight as a feature — not a footnote under one. * ---------------------------------------------------------------------- */ .bh__notice { padding: var(--bh-band-sm) 0; } .bh__notice-inner { display: flex; gap: 18px; padding: 24px; border-radius: var(--bh-radius); background: var(--bh-panel); border: 1px solid var(--bh-line); border-left: 5px solid var(--bh-where); } .bh__notice--warn .bh__notice-inner { border-left-color: var(--bh-cat-food); } .bh__notice--critical .bh__notice-inner { border-left-color: var(--bh-cat-car); } .bh__notice-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--bh-where) 16%, transparent); color: var(--bh-where); font-weight: 800; } .bh__notice--warn .bh__notice-mark { background: color-mix(in srgb, var(--bh-cat-food) 18%, transparent); color: var(--bh-accent-text); } .bh__notice--critical .bh__notice-mark { background: color-mix(in srgb, var(--bh-cat-car) 16%, transparent); color: var(--bh-cat-car); } .bh__notice h2 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 8px; } .bh__notice p { color: var(--bh-muted); } .bh__notice-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .bh__notice-list li strong { display: block; } .bh__notice-list li span { color: var(--bh-muted); font-size: 15.5px; } /* ------------------------------------------------------------------------- * FAQ * ---------------------------------------------------------------------- */ .bh__faq { display: grid; gap: 10px; } .bh__faq details { border-radius: var(--bh-radius-sm); background: var(--bh-panel); border: 1px solid var(--bh-line); } .bh__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; font-weight: 650; font-size: 17px; cursor: pointer; list-style: none; } .bh__faq summary::-webkit-details-marker { display: none; } .bh__faq summary i { flex: none; width: 11px; height: 11px; border-right: 2.4px solid var(--bh-muted); border-bottom: 2.4px solid var(--bh-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease; } .bh__faq details[open] summary i { transform: rotate(-135deg) translate(-2px, -2px); } .bh__faq-answer { padding: 0 20px 19px; color: var(--bh-muted); } /* ------------------------------------------------------------------------- * Closing band * ---------------------------------------------------------------------- */ .bh__cta { position: relative; padding: var(--bh-band) 0; background: var(--bh-surface); border-top: 1px solid var(--bh-line); overflow: hidden; } .bh__cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--bh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bh-grid) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%); pointer-events: none; } .bh__cta-inner { position: relative; display: grid; gap: 24px; align-items: center; } @media (min-width: 900px) { .bh__cta-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .bh__cta-inner .bh__actions { justify-content: flex-end; margin-top: 0; } } .bh__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .bh__store { display: inline-flex; align-items: center; gap: 11px; padding: 12px 20px; border-radius: var(--bh-radius-sm); background: var(--bh-ink); color: var(--bh-bg); text-decoration: none; min-height: 54px; } .bh__store svg { width: 24px; height: 24px; fill: currentColor; } .bh__store small { display: block; font-size: 11.5px; opacity: 0.75; line-height: 1.2; } .bh__store strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; } .bh__store--soon { background: var(--bh-panel-2); color: var(--bh-muted); cursor: default; } /* ------------------------------------------------------------------------- * Pages, posts, prose * ---------------------------------------------------------------------- */ /* * One column per document page. * * Each block sets its own container width, which is right on a homepage — a * table wants the full 1180px, a paragraph wants a reading measure — and wrong * on a privacy page, where the same page stepped between 760px and 1180px four * times on the way down: title wide, prose narrow, data table wide, notice wide, * prose narrow again. * * 820px, because that is where the reading measure and the widest thing a text * page carries (the three-column data table) both work. Below it, the container * padding takes over as before. */ /* * Both classes, one width — and they have to be in the SAME rule. * * A prose block carries both (`class="bh__container bh__measure bh__prose"`), * so two rules of equal specificity meant the later one won and re-widened * exactly the elements this is meant to pin: measured 820px for the table and * the notice, 1200px for every paragraph. */ .bh__page--doc .bh__container, .bh__page--doc .bh__measure { max-width: 820px; } /* A section head splits into heading | intro at 900px, which is right across a 1180px homepage band and wrong inside an 820px document column — there the two halves are 380px each and both read as a narrow gutter of text. */ @media (min-width: 900px) { .bh__page--doc .bh__section-head { grid-template-columns: minmax(0, 1fr); align-items: start; } .bh__page--doc .bh__section-head .bh__lead { margin-top: 4px; } } /* The page title and the text under it now share one left edge with the blocks, so the band above the article no longer looks indented from the article. */ .bh__page--doc .bh__page-head .bh__lead { max-width: 100%; } .bh__page-head { padding: clamp(30px, 4vw, 54px) 0 clamp(24px, 3vw, 36px); background: var(--bh-surface); border-bottom: 1px solid var(--bh-line); } .bh__post-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 15px; color: var(--bh-muted); } .bh__prose { font-size: 17.5px; } .bh__prose h2 { font-size: clamp(22px, 2.2vw, 27px); margin: 38px 0 12px; } .bh__prose h3 { margin: 28px 0 10px; } .bh__prose p, .bh__prose ul, .bh__prose ol { margin: 0 0 16px; } .bh__prose ul, .bh__prose ol { padding-left: 24px; } .bh__prose li { margin-bottom: 9px; } .bh__prose a { color: var(--bh-accent-text); text-underline-offset: 3px; } .bh__prose code { padding: 2px 6px; border-radius: 6px; background: var(--bh-panel-2); font-family: var(--bh-mono); font-size: 0.92em; } .bh__prose blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 4px solid var(--bh-line); color: var(--bh-muted); } .bh__prose table { width: 100%; border-collapse: collapse; margin-bottom: 16px; } .bh__prose th, .bh__prose td { padding: 11px 14px; border: 1px solid var(--bh-line); text-align: left; } .bh__figure { margin: 0; } .bh__figure figcaption { margin-top: 10px; font-size: 14.5px; color: var(--bh-muted); } .bh__post-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); } .bh__post-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; border-radius: var(--bh-radius); background: var(--bh-panel); border: 1px solid var(--bh-line); } .bh__post-card-date { font-size: 14px; color: var(--bh-muted); margin-bottom: 8px; } .bh__post-card h3 a { text-decoration: none; } .bh__post-card h3 a:hover { color: var(--bh-accent-text); } .bh__post-card p { margin-top: 8px; color: var(--bh-muted); font-size: 16px; } .bh__pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; } .bh__pager a { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--bh-radius-sm); border: 1px solid var(--bh-line); text-decoration: none; font-weight: 650; } .bh__pager a[aria-current="page"] { background: var(--bh-accent); color: var(--bh-on-accent); border-color: transparent; } /* ------------------------------------------------------------------------- * 404 / error * ---------------------------------------------------------------------- */ .bh__state { padding: clamp(50px, 8vw, 110px) 0; text-align: center; } .bh__state .bh__measure { margin: 0 auto; } .bh__state .bh__actions { justify-content: center; } .bh__state-mark { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; background: color-mix(in srgb, var(--bh-save) 14%, transparent); color: var(--bh-save); font-size: 17px; font-weight: 750; } .bh__state p { color: var(--bh-muted); margin-top: 14px; } /* ------------------------------------------------------------------------- * Footer * ---------------------------------------------------------------------- */ .bh__footer { padding: var(--bh-band) 0 30px; background: var(--bh-surface); border-top: 1px solid var(--bh-line); } .bh__footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); } .bh__footer-about p { margin-top: 14px; color: var(--bh-muted); font-size: 15.5px; max-width: 34em; } .bh__footer-build { font-size: 14px; } .bh__footer-col h2 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bh-muted); margin-bottom: 14px; } .bh__footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .bh__footer-col a, .bh__footer-contact a { text-decoration: none; font-size: 16px; } .bh__footer-col a:hover, .bh__footer-contact a:hover { color: var(--bh-accent-text); } .bh__footer-contact { display: grid; gap: 12px; align-content: start; } .bh__disclaimer { margin-top: 34px; padding: 16px 18px; border-radius: var(--bh-radius-sm); background: var(--bh-panel-2); color: var(--bh-muted); font-size: 14.5px; } .bh__footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bh-line); font-size: 14.5px; color: var(--bh-muted); } .bh__footer-bottom div { display: flex; flex-wrap: wrap; gap: 16px; } .bh__footer-bottom a { text-decoration: none; } .bh__footer-bottom a:hover { color: var(--bh-accent-text); } .bh__builtwith { margin-left: 14px; } /* ------------------------------------------------------------------------- * Phones * * Almost everything above already scales — clamp() for type and rhythm, * auto-fit for the grids — so this block is only the places where a * laptop-sized constant survived: card padding written as one number, and the * two store buttons, which at 360px are two 150px boxes plus a 12px gap plus * the container's own gutters, and lose their labels to a line break. * ---------------------------------------------------------------------- */ @media (max-width: 640px) { .bh__hero { padding-top: 26px; } /* Situations become a tile wall rather than six full-width rows: the badge is the content here, and six colours in a grid is a picture, while six rows is another list. */ .bh__scenarios { grid-template-columns: 1fr 1fr; gap: 10px; } .bh__scenario { flex-direction: column; gap: 10px; padding: 14px; } .bh__scenario strong { font-size: 15.5px; line-height: 1.3; } .bh__scenario span { font-size: 13.5px; } /* Card copy, one notch down. The app's "type a step larger" rule is about the app, where a glance happens in sunlight; a paragraph on a phone browser is read, not glanced at. */ .bh__action p, .bh__feature p, .bh__steps p { font-size: 15.5px; line-height: 1.55; } .bh__section-head .bh__lead { font-size: 16.5px; } .bh__action-body, .bh__step-body { padding: 16px 16px 18px; } .bh__phone { width: min(300px, 100%); } .bh__action, .bh__feature, .bh__steps li, .bh__plan { padding: 20px; } .bh__post-card, .bh__scenario { padding: 18px; } .bh__notice-inner { padding: 18px; gap: 14px; } .bh__plan-price strong { font-size: 30px; } .bh__faq summary { padding: 15px 16px; font-size: 16.5px; } /* One action per row, full width — the same shape as the app's own big button. */ .bh__actions { gap: 10px; } .bh__actions .bh__button { flex: 1 1 100%; } .bh__footer-grid { gap: 26px; } .bh__disclaimer { margin-top: 26px; } } @media (max-width: 420px) { .bh__store { flex: 1 1 100%; justify-content: flex-start; } .bh__brand img, .bh__brand-mark { width: 38px; height: 38px; } .bh__brand-text strong { font-size: 17.5px; } /* The tagline is the second line of a two-line brand, and on a 390px screen it is what pushes the menu button onto a row of its own. */ .bh__brand-text small { display: none; } }