/* ========================================================================== Smart Clap — site.css Single stylesheet for https://smartclap.app-wizard.io Hand-authored. No frameworks, no @import, no external requests of any kind. TOKEN CONTRACT (important for every page in this project) -------------------------------------------------------- * The raw palette tokens (--ink-*, --teal-*, --cyan-400, --lime-400, --amber-400) are IMMUTABLE. They are the brand colours and never change. * The semantic tokens (--bg, --surface, --card, --line, --text, --text-dim, --link, --accent-fg, --header-bg, --tint, ...) DO change: they flip to a light document palette for privacy pages in a light OS scheme. Always style with the semantic tokens so a component works on both. PAGE CLASSES (put exactly one on ) --------------------------------------- marketing pages — committed dark in every scheme privacy pages — dark by default, light in a light OS colour scheme ========================================================================== */ /* ========================================================================== 1. Modest reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } /* Lists only lose their markers when we also drop the semantics visually. */ ul[class], ol[class] { list-style: none; padding: 0; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } a { color: inherit; } table { border-collapse: collapse; } /* Anything anchored by a #hash must clear the sticky header. */ :target { scroll-margin-top: calc(var(--header-h) + 1.25rem); } /* ========================================================================== 2. Tokens ========================================================================== */ :root { /* --- Brand palette, taken from the store creatives. Immutable. --------- */ --ink-900: #070F12; /* page background (near-black, cool) */ --ink-800: #0C171B; /* raised surface */ --ink-700: #132227; /* card surface */ --ink-600: #1C3037; /* hairline / border */ --teal-700: #0E5F5E; /* deep app teal (app header colour) */ --teal-500: #0E7C7B; --teal-300: #14A8A6; --cyan-400: #22D3D8; /* the alert-screen cyan */ --lime-400: #A6E528; /* signature clap-green from every creative headline */ --amber-400: #FFC93C; /* the yellow sound-wave glyphs */ /* --- Semantic colour, dark scheme (the default) ------------------------ */ --bg: var(--ink-900); --surface: var(--ink-800); --card: var(--ink-700); --line: var(--ink-600); --text: #E8EFF0; --text-dim: #9AAFB4; /* Accent usable as TEXT on the current background. Lime on near-black = 12.5:1. It flips to deep teal on light documents, where lime on white would be ~1.6:1 and unreadable. */ --accent-fg: var(--lime-400); /* Accent as a FILL, with the ink colour that sits on top of it. This pair is deliberately identical in both schemes — the lime CTA is the brand's one constant. */ --accent-fill: var(--lime-400); --accent-ink: var(--ink-900); --link: var(--cyan-400); --link-hover: var(--lime-400); --focus: var(--cyan-400); --header-bg: rgba(7, 15, 18, 0.82); --tint: rgba(255, 255, 255, 0.035); /* faintest raised wash */ --tint-strong: rgba(255, 255, 255, 0.06); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px -14px rgba(0, 0, 0, 0.65); --shadow-2: 0 28px 64px -28px rgba(0, 0, 0, 0.8); /* --- Fluid type scale. clamp() everywhere, so no type media queries. --- */ --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); /* 13 → 14 */ --step-0: clamp(1rem, 0.965rem + 0.18vw, 1.0625rem); /* 16 → 17 */ --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem); /* 18 → 20 */ --step-2: clamp(1.3125rem, 1.2rem + 0.58vw, 1.625rem); /* 21 → 26 */ --step-3: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem); /* 26 → 36 */ --step-4: clamp(2rem, 1.63rem + 1.85vw, 3rem); /* 32 → 48 */ --step-5: clamp(2.375rem, 1.75rem + 3.1vw, 4.125rem); /* 38 → 66 */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* --- Space, layout, shape --------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --wrap: 70rem; /* 1120px */ --gutter: clamp(1rem, 4vw, 2rem); --gap: clamp(1rem, 2.6vw, 1.75rem); --section-y: clamp(2.75rem, 6vw, 5.5rem); --measure: 68ch; /* prose reading measure */ --header-h: 3.75rem; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ========================================================================== 3. Base elements ========================================================================== */ html { background: var(--bg); } /* --- Page-level scheme commitment --------------------------------------- .landing needs no colour declarations: the :root defaults are already the dark palette and the light override below is scoped to .doc-page only. What it does declare is `color-scheme`, so the UA-painted furniture (scrollbars, spinners, form controls) is dark too and cannot flash white. */ body.landing { color-scheme: dark; } body.doc-page { color-scheme: light dark; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--step-0); line-height: 1.65; min-height: 100%; /* Safety net: a stray wide child can never scroll the page sideways. `clip` (not `hidden`) so the sticky header keeps working. */ overflow-x: clip; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; } p { text-wrap: pretty; } strong, b { font-weight: 700; } small { font-size: var(--step--1); } a { text-decoration-thickness: from-font; text-underline-offset: 2px; } ::selection { background: var(--lime-400); color: var(--ink-900); } hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-6); } /* ========================================================================== 4. Utilities ========================================================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link: off-screen until focused, then a lime chip top-left. */ .skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 200; padding: 0.6rem 1rem; border-radius: var(--r-sm); background: var(--accent-fill); color: var(--accent-ink); font-weight: 700; font-size: var(--step--1); text-decoration: none; transform: translateY(-250%); transition: transform 0.16s var(--ease); } .skip-link:focus { transform: translateY(0); } .lead { font-size: var(--step-1); line-height: 1.55; color: var(--text-dim); } .muted { color: var(--text-dim); } .center { text-align: center; } .mx-auto { margin-inline: auto; } .nowrap { white-space: nowrap; } /* Owl: vertical rhythm without touching individual children. */ .stack > * + * { margin-top: var(--flow, 1rem); } .stack-lg { --flow: 1.5rem; } /* Full-width band whose inner padding lines up with .wrap's gutters. Used by the snap gallery so it can bleed to the viewport edges without ever making the element itself wider than the viewport. */ .rail { padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2); } /* ========================================================================== 5. Focus, motion ========================================================================== */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* Never show the ring on a plain mouse click. */ :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .shots { scroll-snap-type: none; } } /* ========================================================================== 6. Layout primitives ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section-tight { padding-block: calc(var(--section-y) * 0.6); } .section-alt { background: var(--surface); border-block: 1px solid var(--line); } /* Auto-fitting grid. Override the minimum column width per instance with --col-min, or use the .grid-2 / .grid-3 presets. */ .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 17rem)), 1fr)); } .grid-2 { --col-min: 22rem; } .grid-3 { --col-min: 16rem; } /* Two-column media/prose block. */ .split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .split-media img { width: 100%; max-width: 22rem; margin-inline: auto; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-2); } @media (min-width: 52em) { .split { grid-template-columns: 1fr 1fr; } /* Puts the image first in the visual order without reordering the DOM. */ .split-flip .split-media { order: -1; } } .section-head { max-width: 58ch; margin-bottom: clamp(1.25rem, 3.5vw, 2.25rem); } .section-head h2 { margin-bottom: 0.5em; } .section-head.center { margin-inline: auto; } /* ========================================================================== 7. Text ornaments ========================================================================== */ /* Small uppercase kicker above a heading. */ .eyebrow { display: block; margin-bottom: 0.75em; color: var(--accent-fg); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; } /* The lime half of a headline — exactly how the creatives set their type. */ .accent { color: var(--accent-fg); } .badge { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.75em; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text-dim); font-size: var(--step--1); font-weight: 600; line-height: 1.4; } .badge-lime { border-color: rgba(166, 229, 40, 0.4); background: rgba(166, 229, 40, 0.1); color: var(--accent-fg); } /* ========================================================================== 8. Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.8em 1.35em; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--step-0); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.16s var(--ease), background-color 0.16s var(--ease), border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 10px 30px -14px rgba(166, 229, 40, 0.55); } .btn-primary:hover { background: #B6F03D; } .btn-ghost { background: var(--tint); border-color: var(--line); color: var(--text); } .btn-ghost:hover { background: var(--tint-strong); border-color: var(--teal-500); } .btn-sm { padding: 0.55em 1em; font-size: var(--step--1); } .btn-lg { padding: 0.95em 1.7em; font-size: var(--step-1); } .btn-block { display: flex; width: 100%; } /* Inline SVG glyph inside a button (the custom Play triangle). */ .btn-ico { flex: 0 0 auto; width: 1.05em; height: 1.05em; fill: currentColor; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; } /* ========================================================================== 9. Cards ========================================================================== */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.15rem, 3vw, 1.85rem); } .card h3 { margin-bottom: 0.5em; } .card p { color: var(--text-dim); } .card p:last-child { margin-bottom: 0; } .card-glow { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--ink-800), var(--ink-700)); } .card-glow::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%; background: radial-gradient(50% 50% at 50% 50%, rgba(20, 168, 166, 0.16), transparent 70%); pointer-events: none; } .card-glow > * { position: relative; } /* A .section-head reads tighter inside a card than it does in open space. */ .card .section-head { margin-bottom: var(--space-5); } /* Trailing button row inside a card. */ .card-actions { margin: var(--space-6) 0 0; } /* ========================================================================== 10. Site header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--bg); } } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-weight: 800; letter-spacing: -0.01em; font-size: var(--step-1); } .brand img { width: 2rem; height: 2rem; border-radius: 9px; flex: 0 0 auto; } .header-actions { display: flex; align-items: center; gap: 0.6rem; } /* EN | RU pill group. Mark the current page with aria-current="page". */ .langswitch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--tint); } .langswitch a { padding: 0.3rem 0.62rem; border-radius: var(--r-pill); color: var(--text-dim); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.03em; text-decoration: none; transition: color 0.16s var(--ease), background-color 0.16s var(--ease); } .langswitch a:hover { color: var(--text); } .langswitch a[aria-current="page"] { background: var(--teal-700); color: #FFFFFF; } /* Below ~26rem the header CTA label would wrap; drop it to the icon only. */ @media (max-width: 26em) { .header-actions .btn span { display: none; } .header-actions .btn { padding-inline: 0.8em; } } /* ========================================================================== 11. Hero -------------------------------------------------------------------------- The artwork is a full-bleed band; the headline sits on solid ink directly underneath it. Text is never laid over the photograph — every part of that scene is high-key (lamp light, skin tones, yellow waves, a glowing red screen), so an overlay could not hold 4.5:1 without erasing the picture. HERO CROP — the reason for the transform below ---------------------------------------------- hero.webp is a store creative and has its own headline burned into the bottom edge ("Need to find your phone?") plus a 2026/AI app-icon badge. Both must go, or the page would show two competing headlines. The burned-in artwork starts at source row 460 of 553, so we must clip everything below ~455 (the bottom 17.7%). How the two knobs achieve that at any viewport width: * --hero-ratio narrower than the image's own 2.894 (mobile, tablet): object-fit:cover is height-driven, so the visible source rows are 0 … 553/--hero-zoom. 553/1.215 = 455. The zoom does the clipping. * --hero-ratio equal to 1600/455 (desktop): cover is width-driven, so the visible rows are 0 … 1600/ratio = 455 on their own. Zoom stays at 1. Either way exactly rows 0–455 show, independent of screen size, and the clapping hands, the sound waves and the glowing phone all survive. ========================================================================== */ .hero { position: relative; isolation: isolate; } /* Soft lime bloom behind the headline block. */ .hero::after { content: ""; position: absolute; left: 50%; top: 46%; width: min(48rem, 94%); aspect-ratio: 2 / 1; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(166, 229, 40, 0.13), transparent 70%); z-index: 0; pointer-events: none; } .hero-media { --hero-ratio: 16 / 10; --hero-zoom: 1.215; position: relative; z-index: 1; aspect-ratio: var(--hero-ratio); overflow: hidden; /* clips the burned-in caption away */ background: var(--ink-800); border-bottom: 1px solid var(--line); } @media (min-width: 36em) { .hero-media { --hero-ratio: 2 / 1; } } @media (min-width: 60em) { .hero-media { --hero-ratio: 1600 / 455; --hero-zoom: 1; } } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; /* anchor the top of the artwork */ transform: scale(var(--hero-zoom)); transform-origin: 50% 0; } /* Vignette only. Deliberately clear over the bottom-centre, where the glowing phone is — that is the whole point of the picture. */ .hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(7, 15, 18, 0.7) 0, rgba(7, 15, 18, 0.26) 13%, rgba(7, 15, 18, 0) 33%), linear-gradient(to bottom, rgba(7, 15, 18, 0) 94%, rgba(7, 15, 18, 0.45) 100%), radial-gradient(125% 105% at 50% 22%, rgba(7, 15, 18, 0) 56%, rgba(7, 15, 18, 0.5) 100%); } /* NB: no max-width here — .hero-body is also a .wrap, and narrowing it would re-centre the block and knock the headline out of alignment with the header brand. Constrain the measure on the children instead. */ .hero-body { position: relative; z-index: 2; padding-top: clamp(1.5rem, 4vw, 2.75rem); padding-bottom: clamp(1.75rem, 5vw, 3.25rem); } .hero-title { max-width: 22ch; margin-bottom: 0.5em; } .hero-lede { font-size: var(--step-1); line-height: 1.5; color: var(--text-dim); max-width: 40ch; margin-bottom: 1.5rem; } .hero-cta { margin-bottom: 1.5rem; } /* Trust chips under the hero CTA. */ .chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem; } .chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.8em 0.35em 0.7em; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--tint); color: var(--text-dim); font-size: var(--step--1); font-weight: 600; } .chip::before { content: ""; flex: 0 0 auto; width: 0.48em; height: 0.48em; border-radius: 50%; background: var(--lime-400); box-shadow: 0 0 0 3px rgba(166, 229, 40, 0.16); } /* ========================================================================== 12. Steps ("How it works") ========================================================================== */ .steps { counter-reset: step; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .steps > li { counter-increment: step; padding-top: 3.5rem; position: relative; } .steps > li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); font-size: var(--step-1); font-weight: 800; box-shadow: 0 0 0 6px rgba(166, 229, 40, 0.1); } .steps h3 { margin-bottom: 0.4em; } .steps p { color: var(--text-dim); } /* ========================================================================== 13. Feature cards (the lifestyle creatives) -------------------------------------------------------------------------- Every feat-*.webp already carries its own English headline across the TOP of the image, so: prose goes BELOW the picture, never beside its caption, and the crop is top-anchored so that burned-in line is never clipped. The three files are 663x900, 675x900 and 600x900; forcing the widest of those ratios (3/4) means only the bottom of the tallest one is trimmed and no image is ever cropped horizontally into its text. ========================================================================== */ .feature { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .feature img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; background: var(--ink-800); } .feature-body { padding: clamp(1.1rem, 2.6vw, 1.5rem); } .feature-body h3 { margin-bottom: 0.45em; } .feature-body p { color: var(--text-dim); margin-bottom: 0; } /* ========================================================================== 14. Screenshot gallery (horizontal snap scroll) -------------------------------------------------------------------------- Height is fixed and width is left to the image, because the three shots share a 760px height but not a width (427, 427 and 469). Equal heights keep the rail tidy with no distortion and no letterboxing. The rail scrolls inside itself — it never widens the page. ========================================================================== */ .shots { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-block: 0.25rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .shots > * { flex: 0 0 auto; scroll-snap-align: center; } .shots img { height: clamp(19rem, 52vw, 28rem); width: auto; max-width: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-800); box-shadow: var(--shadow-1); } .shots figcaption { margin-top: 0.7rem; color: var(--text-dim); font-size: var(--step--1); text-align: center; } /* The rail is keyboard-scrollable, so it takes focus and must show it. */ .shots:focus-visible { outline-offset: 4px; } .shots::-webkit-scrollbar { height: 10px; } .shots::-webkit-scrollbar-track { background: transparent; } .shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); } /* ========================================================================== 15. Tick list (privacy promises) ========================================================================== */ .ticks { display: grid; gap: 0.85rem; } .ticks > li { position: relative; padding-left: 2rem; color: var(--text-dim); } .ticks > li strong { color: var(--text); } /* Checkmark drawn from two borders — no icon file, no external request. */ .ticks > li::before { content: ""; position: absolute; left: 0.2rem; top: 0.42em; width: 0.62rem; height: 0.34rem; border-left: 2.5px solid var(--accent-fg); border-bottom: 2.5px solid var(--accent-fg); transform: rotate(-45deg); } /* ========================================================================== 16. FAQ (native
) ========================================================================== */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: 1.1rem 0.15rem; cursor: pointer; font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::marker { content: ""; } .faq summary:hover { color: var(--accent-fg); } /* "+" that rotates into "x" when the answer opens. */ .faq summary::after { content: "+"; flex: 0 0 auto; color: var(--accent-fg); font-size: 1.5em; font-weight: 700; line-height: 0.8; transition: transform 0.2s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq-a { padding: 0 0.15rem 1.35rem; max-width: 68ch; color: var(--text-dim); } .faq .faq-a p + p { margin-top: 0.75em; } /* ========================================================================== 17. Closing CTA band ========================================================================== */ .cta-band { position: relative; overflow: hidden; padding: clamp(1.6rem, 5vw, 3.25rem) clamp(1.1rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--ink-800), var(--ink-700)); text-align: center; } .cta-band::before { content: ""; position: absolute; inset: auto -15% -55% -15%; height: 110%; background: radial-gradient(50% 50% at 50% 100%, rgba(166, 229, 40, 0.17), transparent 70%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { margin-bottom: 0.5em; } .cta-band p { color: var(--text-dim); max-width: 48ch; margin-inline: auto; margin-bottom: 1.75rem; } .cta-band .btn-row { justify-content: center; } /* ========================================================================== 18. Site footer ========================================================================== */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: clamp(2rem, 5vw, 3rem); font-size: var(--step--1); } .footer-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .footer-grid h2 { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.9rem; } .footer-about p { color: var(--text-dim); max-width: 34ch; margin-top: 0.75rem; } .footer-links { display: grid; gap: 0.55rem; } .footer-links a { color: var(--text-dim); text-decoration: none; } .footer-links a:hover { color: var(--text); text-decoration: underline; } .footer-bottom { margin-top: clamp(1.5rem, 4vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: var(--text-dim); } .footer-bottom p { margin: 0; } /* ========================================================================== 19. .doc — the privacy-policy pages -------------------------------------------------------------------------- Usage: ... .site-header ...
…
Wrap every in
so a wide table scrolls inside itself instead of widening the page. ========================================================================== */ .doc { max-width: var(--measure); margin-inline: auto; } .doc-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } /* A single long word can be wider than the 360px column at --step-4: "конфиденциальности" measures 350px against a 328px content box, and the tail was being clipped by the body's overflow-x guard. Hyphenate (the document declares its lang, so the UA dictionary applies) and allow a hard break as the fallback when no dictionary is available. */ .doc-head h1 { font-size: var(--step-4); margin-bottom: 0.5em; hyphens: auto; overflow-wrap: break-word; } .doc-meta { color: var(--text-dim); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; } .doc-lead { font-size: var(--step-1); line-height: 1.55; color: var(--text-dim); } .doc h2 { font-size: var(--step-2); line-height: 1.2; margin-top: 2.1em; margin-bottom: 0.55em; } .doc h3 { font-size: var(--step-1); margin-top: 1.7em; margin-bottom: 0.4em; } .doc h2:first-child, .doc h3:first-child { margin-top: 0; } .doc p { margin-bottom: 1.05em; line-height: 1.7; } .doc ul, .doc ol { margin: 0 0 1.25em; padding-left: 1.35rem; } .doc li { margin-bottom: 0.5em; line-height: 1.65; } .doc li::marker { color: var(--text-dim); } .doc ul li::marker { color: var(--accent-fg); } .doc strong { color: var(--text); font-weight: 700; } .doc a { color: var(--link); text-decoration: underline; } .doc a:hover { color: var(--link-hover); } .doc code { font-family: var(--font-mono); font-size: 0.92em; padding: 0.12em 0.4em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); word-break: break-word; } .doc blockquote { margin: 0 0 1.25em; padding: 0.75rem 0 0.75rem 1.1rem; border-left: 3px solid var(--accent-fg); color: var(--text-dim); } /* --- Tables ------------------------------------------------------------- */ .table-wrap { margin-block: 1.6em; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .doc table { width: 100%; min-width: 30rem; /* forces the scroll rather than a squeeze */ font-size: var(--step--1); line-height: 1.6; } .doc caption { padding: 0.75rem 0.9rem; text-align: left; color: var(--text-dim); font-size: var(--step--1); } .doc th, .doc td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .doc th { background: var(--surface); color: var(--text); font-weight: 700; } .doc th:last-child, .doc td:last-child { border-right: 0; } .doc tbody tr:last-child td { border-bottom: 0; } /* Belt and braces: a table that was NOT wrapped in .table-wrap still must not break the page. Browsers rebuild the internal table boxes here. */ .doc > table { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); } /* --- Light colour scheme for documents only ----------------------------- */ /* The landing () is committed dark and is untouched. :root:has(...) themes the canvas behind the page too; the body selector is the fallback for engines without :has(). */ @media (prefers-color-scheme: light) { :root:has(> body.doc-page), body.doc-page { --bg: #F7FAFA; --surface: #EDF3F4; --card: #FFFFFF; --line: #D3DFE1; --text: #0A1417; --text-dim: #47595E; --accent-fg: #0B5F5E; /* lime is unreadable on white — use teal */ --link: #0B5F5E; --link-hover: #0E7C7B; --focus: #0E7C7B; --header-bg: rgba(247, 250, 250, 0.86); --tint: rgba(7, 15, 18, 0.03); --tint-strong: rgba(7, 15, 18, 0.06); --shadow-1: 0 1px 2px rgba(10, 20, 23, 0.08), 0 10px 26px -16px rgba(10, 20, 23, 0.18); --shadow-2: 0 24px 56px -30px rgba(10, 20, 23, 0.25); } /* Keep the lime CTA legible: dark ink on lime works in both schemes, but drop the dark-mode bloom that reads as dirt on a light page. */ body.doc-page .btn-primary { box-shadow: 0 8px 22px -14px rgba(11, 95, 94, 0.5); } body.doc-page .badge-lime { border-color: rgba(11, 95, 94, 0.35); background: rgba(11, 95, 94, 0.08); } body.doc-page .langswitch a[aria-current="page"] { background: var(--teal-700); } } /* --- Print: a legal document should print cleanly ---------------------- */ @media print { .site-header, .site-footer, .skip-link, .langswitch { display: none !important; } html, body { background: #FFFFFF; color: #000000; font-size: 11pt; } .doc { max-width: none; } .doc a { color: #000000; text-decoration: underline; } .doc h2, .doc h3 { break-after: avoid; } .table-wrap, .doc table { break-inside: avoid; overflow: visible; } .doc table { min-width: 0; } .doc th, .doc td { border-color: #999999; } }