/* ========================================================================== ViewPort — webové studio Built on wisprflow-design.md. Tokens live in tokens.css. Component inheritance note: this page takes the system's *grammar* — chambers, 2px ink borders, oversized radii, pill and square badges, flat fills — but not its two product-specific ornaments. The waveform visualiser and the chat-bubble phone encode "speech product"; on an agency site they would be decoration standing in for content. The device frame is kept and repurposed to show responsive work, where it carries meaning. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset and base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchor targets clear the floating nav pill. */ scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface-cream-canvas); color: var(--color-vast-ink); font-family: var(--font-figtree); font-size: var(--text-body-sm); font-weight: var(--font-weight-regular); line-height: var(--leading-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Czech hyphenation. Needs lang="cs" on to pick the right dictionary. */ hyphens: manual; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } svg[aria-hidden="true"][width="0"] { position: absolute; width: 0; height: 0; overflow: hidden; } button, input, textarea, select { font: inherit; color: inherit; } /* -------------------------------------------------------------------------- 2. Browser surfaces The parts not drawn by hand still carry the design. Shipping these with browser defaults is the cheapest tell that a page was assembled, not built. -------------------------------------------------------------------------- */ ::selection { background: var(--color-lavender-whisper); color: var(--color-vast-ink); } .chamber--dark ::selection { /* Ember is legal here (9.13:1 on ink) and illegal on cream (1.88:1). */ background: var(--color-ember-glow); color: var(--color-vast-ink); } html { scrollbar-color: var(--color-fog-muted) var(--color-lumen-cream); scrollbar-width: thin; } :where(input, textarea) { caret-color: var(--color-forest-ink); } /* Focus. The spec never defines one, and its own "active state" colour (ember) measures 1.88:1 on cream — invisible on the dominant surface. So the ring is drawn in ink on light ground and cream on dark ground, both 17.2:1, with an offset so it reads against the 2px component borders. */ :focus-visible { outline: 3px solid var(--color-vast-ink); outline-offset: 3px; } .chamber--dark :focus-visible, .chamber--forest :focus-visible { outline-color: var(--color-lumen-cream); } :focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ .display, .heading-lg, .heading, .heading-sm { font-family: var(--font-eb-garamond); /* The doc is emphatic: authority comes from scale, never weight. */ font-weight: var(--font-weight-regular); text-wrap: balance; hyphens: none; /* never hyphenate a Czech headline */ } .display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); } .heading-lg { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-display); } .heading { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); } .heading-sm { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading); } /* Two-tone display: the doc's hero device — fog fading into ink to give the headline a cadence. Fog is legal here and only here; at this size it is "large text" and clears the 3:1 bar. */ .display .is-muted { color: var(--color-fog); } .lede { font-size: var(--text-body); line-height: var(--leading-prose); max-width: 62ch; text-wrap: pretty; } .prose { font-size: var(--text-body-sm); line-height: var(--leading-prose); max-width: 68ch; /* craft floor: 65-75ch measure */ text-wrap: pretty; hyphens: auto; /* body copy only, cs dictionary via lang="cs" */ } .label { font-family: var(--font-figtree); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); line-height: var(--leading-ui); letter-spacing: 0.02em; } .muted { color: var(--color-fog-muted); } .chamber--dark .muted { color: var(--color-cream-muted); } /* Prices and any figure the reader compares vertically. */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--page-gutter); } .section { padding-block: var(--section-gap); } /* A chamber is the doc's "rounded inset room": a fill that spans nearly the full viewport, inset from the edges, with an oversized radius. */ .chamber { margin-inline: var(--page-gutter); border-radius: var(--radius-chamber); padding-block: clamp(48px, 7vw, 104px); overflow: hidden; /* keeps fills inside the oversized corner */ } .chamber--dark { background: var(--surface-dark-chamber); color: var(--color-lumen-cream); } .chamber--lavender { background: var(--surface-lavender-accent); color: var(--color-vast-ink); } .chamber .shell { max-width: calc(var(--page-max-width) - 2 * var(--page-gutter)); } /* Vertical rhythm: the doc asks for more space above a heading than below. One rule, applied once, rather than per-section margins. */ .stack > * + * { margin-block-start: var(--spacing-16); } .stack-lg > * + * { margin-block-start: var(--spacing-32); } .section-head { margin-block-end: clamp(32px, 5vw, 64px); max-width: 44ch; } .section-head > * + * { margin-block-start: var(--spacing-16); } /* -------------------------------------------------------------------------- 5. Buttons Spec: 2px ink border is non-negotiable; 12px radius; Figtree 500 / 16px. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--spacing-8); padding: 16px 24px; border: var(--border-ink); border-radius: var(--radius-buttons); font-family: var(--font-figtree); font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); line-height: var(--leading-ui); text-decoration: none; cursor: pointer; background: transparent; transition: transform var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) linear, color var(--dur-fast) linear; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--color-lavender-whisper); color: var(--color-vast-ink); } .btn--primary:hover { background: var(--color-vast-ink); color: var(--color-lavender-whisper); } .btn--secondary { background: var(--color-lumen-cream); color: var(--color-vast-ink); } .btn--secondary:hover { background: var(--color-vast-ink); color: var(--color-lumen-cream); } /* On dark ground the border flips to cream — the doc's own note in its agent-prompt examples. */ .chamber--dark .btn--secondary { border-color: var(--color-lumen-cream); background: var(--color-lumen-cream); color: var(--color-vast-ink); } .chamber--dark .btn--secondary:hover { background: transparent; color: var(--color-lumen-cream); } .chamber--dark .btn--ghost { color: var(--color-lumen-cream); } .btn--ghost { border-color: transparent; padding-inline: 0; font-weight: var(--font-weight-regular); } .btn--ghost:hover { text-decoration: underline; transform: none; } .btn--compact { padding: 12px 18px; } /* -------------------------------------------------------------------------- 6. Badges -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--spacing-8); padding: 8px 16px; font-family: var(--font-figtree); font-size: var(--text-caption); font-weight: var(--font-weight-medium); line-height: var(--leading-ui); } .badge--teal { background: var(--surface-forest-panel); color: var(--color-lumen-cream); border-radius: var(--radius-badges); } .badge--outline { background: transparent; color: var(--color-lumen-cream); border: 1px solid var(--color-pure-white); border-radius: var(--radius-badges); } /* The doc's deliberate geometric counterpoint: 8px against a page of pills. */ .badge--square { background: var(--color-vast-ink); color: var(--color-lumen-cream); border-radius: var(--radius-square-badge); } .chamber--dark .badge--square { background: var(--color-lumen-cream); color: var(--color-vast-ink); } .badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ember-glow); flex: none; } /* -------------------------------------------------------------------------- 7. Cards Spec: 32px radius on cream cards, 40-80px on dark. No shadow, ever. -------------------------------------------------------------------------- */ .card { padding: var(--card-padding); border-radius: var(--radius-cards); background: var(--color-lumen-cream); border: var(--border-ink); } .card--plain { border: none; } .card--lavender { background: var(--color-lavender-whisper); } .card--dark { background: var(--color-vast-ink); color: var(--color-lumen-cream); border: none; border-radius: var(--radius-section-min); padding: clamp(32px, 4vw, 56px); } .card--forest { background: var(--surface-forest-panel); color: var(--color-lumen-cream); border: none; } /* -------------------------------------------------------------------------- 8. Navigation — floating cream pill -------------------------------------------------------------------------- */ .nav-wrap { position: sticky; top: var(--spacing-16); z-index: 50; padding-inline: var(--page-gutter); margin-block-start: var(--spacing-16); } .nav { position: relative; /* positioning context for the mobile menu panel */ display: flex; align-items: center; gap: var(--spacing-24); max-width: var(--page-max-width); margin-inline: auto; padding: 10px 10px 10px 20px; background: var(--color-lumen-cream); border: var(--border-ink); border-radius: var(--radius-badges); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .brand__mark { width: 26px; height: 26px; flex: none; } .brand__name { font-family: var(--font-figtree); font-weight: var(--font-weight-semibold); font-size: 17px; letter-spacing: -0.01em; } /* The descriptor is the mitigation for an English name in a Czech market: "ViewPort" tells a bakery owner nothing; "webové studio" tells them everything in two words. */ .brand__descriptor { font-size: var(--text-caption); color: var(--color-fog-muted); border-left: 1px solid var(--color-lumen-stone); padding-left: 10px; margin-left: 2px; } .nav__links { display: flex; align-items: center; gap: var(--spacing-24); margin-left: auto; } .nav__links a { font-size: var(--text-body-sm); color: var(--color-charcoal); text-decoration: none; } .nav__links a:hover { text-decoration: underline; } .nav__cta { flex: none; } /* Mobile menu.

so it works with JavaScript unavailable and stays keyboard operable without any scripted focus management. */ .nav__menu { display: none; margin-left: auto; } .nav__menu > summary { list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border: var(--border-ink); border-radius: var(--radius-buttons); cursor: pointer; } .nav__menu > summary::-webkit-details-marker { display: none; } .nav__menu[open] > summary { background: var(--color-vast-ink); color: var(--color-lumen-cream); } .nav__menu-panel { position: absolute; top: calc(100% + 12px); left: 0; right: 0; min-width: 0; display: grid; gap: 2px; padding: var(--spacing-16); background: var(--color-lumen-cream); border: var(--border-ink); border-radius: var(--radius-cards); } .nav__menu-panel a { padding: 10px 12px; border-radius: var(--radius-inputs); text-decoration: none; font-size: var(--text-body); } .nav__menu-panel a:hover { background: var(--color-lumen-stone); } .nav__cta-short { display: none; } /* -------------------------------------------------------------------------- 9. Hero -------------------------------------------------------------------------- */ .hero { padding-block: clamp(48px, 9vw, 112px) clamp(40px, 6vw, 80px); } .hero__badge { margin-block-end: var(--spacing-32); } .hero__title { max-width: 16ch; } .hero__lede { margin-block-start: var(--spacing-32); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-16); margin-block-start: var(--spacing-40); } .hero__note { margin-block-start: var(--spacing-24); font-size: var(--text-caption); color: var(--color-fog-muted); } /* The doc's hand-drawn lavender underline, sitting under one or two words. Drawn as an inline SVG so the stroke irregularity is real, not a CSS approximation of one. */ .underlined { position: relative; display: inline-block; } .underlined > svg { position: absolute; left: 0; right: 0; bottom: -0.10em; width: 100%; height: 0.18em; overflow: visible; pointer-events: none; } .underlined > svg path { fill: none; stroke: var(--color-lavender-whisper); stroke-width: 4; stroke-linecap: round; } /* -------------------------------------------------------------------------- 10. Client strip -------------------------------------------------------------------------- */ .clients { padding-block: var(--spacing-48); border-block: var(--border-hairline); } .clients__row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 5vw, 64px); margin-block-start: var(--spacing-24); } .clients__row span { font-family: var(--font-eb-garamond); font-size: var(--text-subheading); color: var(--color-fog-muted); } /* -------------------------------------------------------------------------- 11. Comparison pair — the doc's signature two-card device -------------------------------------------------------------------------- */ .compare { display: grid; gap: var(--spacing-24); grid-template-columns: 1fr; } @media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } } .compare__stat { font-family: var(--font-eb-garamond); font-weight: var(--font-weight-regular); font-size: var(--text-heading); line-height: 1; letter-spacing: var(--tracking-heading); display: block; margin-block-start: var(--spacing-24); } .compare__list { margin-block-start: var(--spacing-24); display: grid; gap: 10px; } .compare__list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-body-sm); line-height: var(--leading-prose); } .compare__list svg { flex: none; margin-block-start: 3px; } /* -------------------------------------------------------------------------- 12. Services — deliberately not a grid of identical cards One large panel carries the primary service; the rest are a ruled list. Varying the density is what keeps this from reading as a template. -------------------------------------------------------------------------- */ .services { display: grid; gap: var(--spacing-32); grid-template-columns: 1fr; } @media (min-width: 960px) { .services { grid-template-columns: 1.05fr 1fr; align-items: stretch; } } /* Feature panel: copy at the top, device pinned to the bottom-right so the panel does not grow a void under a tall mockup. */ .service-feature { display: grid; gap: var(--spacing-32); grid-template-rows: auto 1fr; } .service-feature__inner { display: grid; gap: var(--spacing-16); align-content: start; } .service-feature .device { justify-self: end; align-self: end; } .service-list { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .service-list > li { display: grid; grid-template-columns: 28px 1fr; gap: var(--spacing-16); flex: 1; align-content: center; padding-block: var(--spacing-24); border-block-end: 1px solid rgb(255 255 235 / 0.18); } .service-list > li:first-child { padding-block-start: 0; } .service-list > li:last-child { border-block-end: none; padding-block-end: 0; } .service-list h3 { margin-block-end: 6px; } .service-list .icon { margin-block-start: 2px; } /* -------------------------------------------------------------------------- 13. Process Numbered because the sequence itself is the information: the whole point is showing a nervous buyer what happens and in what order. -------------------------------------------------------------------------- */ .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-24); align-items: start; padding-block: var(--spacing-32); border-block-start: 1px solid var(--color-lumen-stone); } .step:last-child { border-block-end: 1px solid var(--color-lumen-stone); } @media (min-width: 760px) { .step { grid-template-columns: auto 1fr auto; gap: var(--spacing-40); } } .step__num { font-variant-numeric: tabular-nums; } .step__body { max-width: 56ch; } .step__dur { font-size: var(--text-caption); color: var(--color-fog-muted); white-space: nowrap; } /* -------------------------------------------------------------------------- 14. Work — asymmetric, first item featured -------------------------------------------------------------------------- */ .work { display: grid; gap: var(--spacing-24); grid-template-columns: 1fr; } @media (min-width: 960px) { .work { grid-template-columns: 1fr 1fr; } .work > :first-child { grid-column: 1 / -1; } } .work__item { display: grid; gap: var(--spacing-24); } @media (min-width: 960px) { .work > :first-child.work__item { grid-template-columns: 1fr 1fr; align-items: center; } } /* Placeholder plate. Flat geometry in the palette — not a fake screenshot, not a gradient, and honest about being empty. */ .plate { aspect-ratio: 16 / 10; border-radius: var(--spacing-24); background: var(--color-forest-ink); display: grid; place-items: center; position: relative; overflow: hidden; } .plate--lavender { background: var(--color-lavender-whisper); } .plate--stone { background: var(--color-lumen-stone); } .plate__tag { font-size: var(--text-caption); font-weight: var(--font-weight-medium); color: var(--color-lumen-cream); border: 1px dashed rgb(255 255 235 / 0.5); border-radius: var(--radius-square-badge); padding: 6px 12px; } .plate--lavender .plate__tag, .plate--stone .plate__tag { color: var(--color-vast-ink); border-color: rgb(26 26 26 / 0.35); } /* Device frame, repurposed from the spec's phone mockup: here it shows that the work is responsive, which is a real claim an agency makes. */ .device { width: 150px; aspect-ratio: 9 / 16; border-radius: var(--radius-section-min); background: var(--color-vast-ink); border: 2px solid var(--color-lumen-cream); padding: 10px; flex: none; } .device__screen { height: 100%; border-radius: 28px; background: var(--color-lumen-cream); display: grid; gap: 6px; align-content: start; padding: 14px 10px; } .device__bar { height: 8px; border-radius: 4px; background: var(--color-lumen-stone); } .device__bar--accent { background: var(--color-lavender-whisper); width: 60%; } .device__bar--wide { width: 85%; } .device__block { height: 44px; border-radius: 10px; background: var(--color-lumen-stone); margin-block-start: 4px; } /* -------------------------------------------------------------------------- 15. Testimonial -------------------------------------------------------------------------- */ .quote { padding: clamp(32px, 5vw, 64px); border-radius: var(--radius-cards); } .quote blockquote { font-family: var(--font-eb-garamond); font-weight: var(--font-weight-regular); font-size: var(--text-heading); line-height: 1.15; letter-spacing: var(--tracking-heading); max-width: 24ch; text-wrap: balance; } .quote figcaption { margin-block-start: var(--spacing-32); font-size: var(--text-body-sm); /* Tinted from the surface hue, not gray — craft floor rule for text on a coloured ground. Teal on lavender measures 7.18:1. */ color: var(--color-forest-ink); } /* -------------------------------------------------------------------------- 16. Pricing -------------------------------------------------------------------------- */ .pricing { display: grid; gap: var(--spacing-24); grid-template-columns: 1fr; } @media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, 1fr); } } .price-card { display: flex; flex-direction: column; } /* Reserved on all three cards, occupied on one, so the headings sit on a single optical line instead of the featured card dropping by a badge. */ .price-card__flag { min-height: 34px; margin-block-end: var(--spacing-16); } .price-card__amount { font-family: var(--font-eb-garamond); font-weight: var(--font-weight-regular); font-size: var(--text-heading); line-height: 1; letter-spacing: var(--tracking-heading); display: block; margin-block: var(--spacing-16) 4px; } .price-card__features { display: grid; gap: 10px; margin-block: var(--spacing-24); font-size: var(--text-body-sm); line-height: var(--leading-prose); } .price-card__features li { display: flex; gap: 10px; align-items: flex-start; } .price-card__features svg { flex: none; margin-block-start: 4px; } .price-card .btn { margin-block-start: auto; justify-content: center; } /* -------------------------------------------------------------------------- 17. FAQ —

, so it works with JavaScript unavailable -------------------------------------------------------------------------- */ .faq { max-width: 820px; } .faq details { border-block-end: 1px solid var(--color-lumen-stone); } .faq details:first-of-type { border-block-start: 1px solid var(--color-lumen-stone); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-24); padding-block: var(--spacing-24); cursor: pointer; list-style: none; font-size: var(--text-subheading); font-weight: var(--font-weight-medium); } .faq summary::-webkit-details-marker { display: none; } .faq__chev { transition: transform var(--dur-base) var(--ease-out-expo); } .faq details[open] .faq__chev { transform: rotate(180deg); } .faq details > .prose { padding-block-end: var(--spacing-32); } /* -------------------------------------------------------------------------- 18. About -------------------------------------------------------------------------- */ .about { display: grid; gap: var(--spacing-40); grid-template-columns: 1fr; } @media (min-width: 860px) { .about { grid-template-columns: 300px 1fr; align-items: start; } } .about__portrait { aspect-ratio: 4 / 5; border-radius: var(--radius-cards); border: var(--border-ink); background: var(--color-lumen-stone); display: grid; place-items: center; text-align: center; padding: var(--spacing-24); } /* -------------------------------------------------------------------------- 19. Closing CTA and footer -------------------------------------------------------------------------- */ .cta-close { text-align: left; } .cta-close__title { max-width: 18ch; } .cta-close__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-16); margin-block-start: var(--spacing-40); } /* Lavender fill on a lavender surface erases the primary button: only its border would survive, and it would read the same as the secondary beside it. On lavender ground the primary inverts to ink, keeping it the single loudest thing in the section (13.15:1). */ .chamber--lavender .btn--primary, .card--lavender .btn--primary { background: var(--color-vast-ink); color: var(--color-lavender-whisper); } .chamber--lavender .btn--primary:hover, .card--lavender .btn--primary:hover { background: var(--color-lumen-cream); color: var(--color-vast-ink); } .chamber--lavender .btn--secondary { background: transparent; } .chamber--lavender .btn--secondary:hover { background: var(--color-lumen-cream); } .footer { background: var(--surface-dark-chamber); color: var(--color-lumen-cream); margin-block-start: var(--section-gap); padding-block: clamp(48px, 6vw, 80px) var(--spacing-32); } .footer__grid { display: grid; gap: var(--spacing-40); grid-template-columns: 1fr; } @media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } } .footer a { color: var(--color-lumen-cream); text-decoration: none; } .footer a:hover { text-decoration: underline; } .footer h3 { font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-cream-muted); margin-block-end: var(--spacing-16); font-weight: var(--font-weight-semibold); } .footer__list { display: grid; gap: 10px; font-size: var(--text-body-sm); } .footer__bottom { margin-block-start: var(--spacing-48); padding-block-start: var(--spacing-24); border-block-start: 1px solid rgb(255 255 235 / 0.18); display: flex; flex-wrap: wrap; gap: var(--spacing-16); justify-content: space-between; font-size: var(--text-caption); color: var(--color-cream-muted); } .footer .brand__name { color: var(--color-lumen-cream); } .footer .brand__descriptor { color: var(--color-cream-muted); border-left-color: rgb(255 255 235 / 0.28); } /* -------------------------------------------------------------------------- 20. Icons — one stroke weight throughout -------------------------------------------------------------------------- */ /* HugeIcons (stroke-rounded) draw on a 24 viewBox at stroke-width 1.5. A 24px icon therefore renders a 1.5px stroke; an 18px one would render 1.125px and read lighter than its neighbours. Small sizes get a scaled stroke-width so every icon on the page lands on the same optical weight. */ .icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 18px; height: 18px; stroke-width: 2; } /* -------------------------------------------------------------------------- 21. Motion — one authored moment Sections rise slightly as they enter, from an already-visible default so nothing depends on JavaScript or on the animation completing. -------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { animation: reveal-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } @keyframes reveal-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } } } /* -------------------------------------------------------------------------- 22. Placeholder marker Every unverified claim on this page carries .ph so the user can find them all at once. Visible in a debug view, invisible in normal rendering. -------------------------------------------------------------------------- */ .ph { /* no visual treatment: placeholders must not ship as broken-looking text */ } /* Add class="debug-ph" to to reveal every placeholder at once. */ body.debug-ph .ph { background: rgb(255 169 70 / 0.28); outline: 1px dashed var(--color-ember-glow); outline-offset: 1px; border-radius: 2px; } /* -------------------------------------------------------------------------- 23. Small screens -------------------------------------------------------------------------- */ @media (max-width: 820px) { .nav__links { display: none; } .brand__descriptor { display: none; } .nav { padding-left: 16px; gap: var(--spacing-16); } .nav__menu { display: block; } .nav__cta { margin-left: 0; } } /* Below ~400px the full CTA label alone is wider than the pill. */ @media (max-width: 400px) { .nav__cta-long { display: none; } .nav__cta-short { display: inline; } .nav { gap: var(--spacing-8); padding: 8px 8px 8px 14px; } .brand__name { font-size: 16px; } } @media (max-width: 520px) { .hero__actions .btn { width: 100%; justify-content: center; } .device { width: 150px; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--page-gutter); top: -100px; z-index: 100; background: var(--color-vast-ink); color: var(--color-lumen-cream); padding: 12px 20px; border-radius: var(--radius-buttons); text-decoration: none; transition: top var(--dur-fast) var(--ease-out-expo); } .skip-link:focus { top: var(--spacing-16); }