/* SourPod landing — styles Tokens first; layout is one screen at every tested viewport (no body{overflow:hidden}). */ :root { --bg: #2B2A28; --cream: #EFECE6; --orange: #E8993C; --orange-hover: #D4872F; --ink: #3E2E24; /* text on cream pages (privacy.html) */ --link: #7E644F; /* links on cream pages */ --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; color: var(--cream); font-family: var(--font); } html { /* The page background lives on only: it propagates to the canvas and paints BEHIND the negative-z-index hero and shade. A background on as well would paint on top of them. */ background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: transparent; line-height: 1.5; } /* ── Hero photo ─────────────────────────────────────────────────────────────────── */ .hero { display: block; } .hero img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-landscape); z-index: -2; /* Blurred placeholder shows until the real image decodes. */ background-color: var(--bg); background-image: var(--ph-landscape); background-position: var(--focal-landscape); background-size: cover; background-repeat: no-repeat; } /* Dark gradient over the text zone only: a full-height left column in landscape (the rem floors keep it covering the 34rem text column on smaller screens) plus a low bottom-left pool under the footer, which otherwise sits on bright linen. The crumb centre (x ≈ 50 %) stays essentially clear. */ .shade { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgb(43 42 40 / .90) 0%, rgb(43 42 40 / .70) max(28%, 36rem), rgb(43 42 40 / .25) max(48%, 46rem), rgb(43 42 40 / 0) max(62%, 54rem)), radial-gradient(52rem 26rem at 0% 100%, rgb(43 42 40 / .85) 0%, rgb(43 42 40 / .55) 45%, rgb(43 42 40 / 0) 100%); } /* Squarer landscape screens (4:3 crop): the loaf fills the left half too, so the column is darker. */ @media (orientation: landscape) and (max-aspect-ratio: 3/2) { .shade { background: linear-gradient(100deg, rgb(43 42 40 / .92) 0%, rgb(43 42 40 / .80) 38%, rgb(43 42 40 / .62) 54%, rgb(43 42 40 / .22) 68%, rgb(43 42 40 / 0) 80%), radial-gradient(52rem 26rem at 0% 100%, rgb(43 42 40 / .85) 0%, rgb(43 42 40 / .55) 45%, rgb(43 42 40 / 0) 100%); } } /* ── Page frame ─────────────────────────────────────────────────────────────────── */ .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: clamp(1.25rem, 4vw, 4rem) clamp(1.25rem, 5vw, 5rem); padding-right: max(clamp(1.25rem, 5vw, 5rem), env(safe-area-inset-right)); padding-bottom: max(clamp(1rem, 3vh, 2.5rem), env(safe-area-inset-bottom)); padding-left: max(clamp(1.25rem, 5vw, 5rem), env(safe-area-inset-left)); box-sizing: border-box; } header { display: flex; } .logo { display: block; } .logo img { display: block; height: clamp(4.5rem, 11vh, 7.5rem); width: auto; } .copy { max-width: 34rem; margin-top: clamp(1.5rem, 7vh, 5rem); animation: fade .6s ease-out both; } footer { align-self: flex-start; /* shrink-wrap: the footer box is only as wide as its text */ margin-top: auto; padding-top: clamp(1rem, 3vh, 2rem); font-size: .75rem; line-height: 1.5; opacity: .9; } footer p { margin: 0; } /* ── Type ───────────────────────────────────────────────────────────────────────── */ h1 { font-weight: 600; font-size: clamp(1.875rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .75rem; text-wrap: balance; } .sub { font-size: clamp(1rem, .9rem + .35vw, 1.125rem); line-height: 1.5; margin: 0 0 1.5rem; max-width: 32rem; } .status { width: fit-content; margin: 0; font-size: .875rem; line-height: 1.5; } .status:not(:empty) { margin-top: .5rem; } .fine { width: fit-content; font-size: .875rem; line-height: 1.5; margin: .75rem 0 0; } a { color: var(--cream); text-decoration: underline; text-underline-offset: .15em; } /* ── Form ───────────────────────────────────────────────────────────────────────── */ #waitlist { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem; margin: 0; } /* script.js sets form.hidden on success; an author display:flex would otherwise beat the UA [hidden] rule. */ #waitlist[hidden] { display: none; } #email { flex: 1 1 14rem; min-width: 0; font: inherit; color: var(--cream); background: rgb(43 42 40 / .85); border: 0; box-shadow: inset 0 0 0 1px rgb(239 236 230 / .4); border-radius: .375rem; padding: .85rem 1rem; min-height: 3rem; } #email::placeholder { color: rgb(239 236 230 / .7); opacity: 1; } #waitlist button { font: inherit; font-weight: 600; background: var(--orange); color: var(--bg); border: 0; border-radius: .375rem; padding: .85rem 1.5rem; min-height: 3rem; cursor: pointer; white-space: nowrap; transition: background-color .15s; } #waitlist button:hover, #waitlist button:active { background: var(--orange-hover); } #waitlist button:disabled { opacity: .7; cursor: progress; } a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; } /* No-JS success path: Kit can redirect back to https://sourpod.com/#joined */ #joined:target ~ #waitlist { display: none; } #joined:target ~ .status { margin-top: .5rem; } #joined:target ~ .status::before { content: "You're on the list."; } /* Honeypot: off-screen, never seen by people. */ .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Motion ─────────────────────────────────────────────────────────────────────── */ @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .copy { animation: none; } } /* ── Portrait (phones, portrait tablets) ────────────────────────────────────────── */ @media (orientation: portrait) { .hero img { object-position: var(--focal-portrait); background-image: var(--ph-portrait); background-position: var(--focal-portrait); } /* Top gradient for logo + headline, plus a bottom one so the fine print and footer don't sit on bright linen. These stops are set by the SHORT phone (375×667), where the supporting line ends at ≈51 % of the height over the upper loaf; taller phones override below. */ .shade { background: linear-gradient(to bottom, rgb(43 42 40 / .88) 0%, rgb(43 42 40 / .72) 30%, rgb(43 42 40 / .56) 52%, rgb(43 42 40 / .25) 62%, rgb(43 42 40 / 0) 68%), linear-gradient(to top, rgb(43 42 40 / .82) 0%, rgb(43 42 40 / .66) 18%, rgb(43 42 40 / 0) 34%); } .logo img { height: clamp(3rem, 7vh, 4rem); } .copy { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 34rem; margin: clamp(1rem, 4vh, 3rem) auto 0; text-align: center; } .sub { margin: 0 auto 1.5rem; } #waitlist { flex-direction: column; margin-top: auto; max-width: none; } #email, #waitlist button { flex: 0 0 auto; width: 100%; } .status, .fine { width: auto; } footer { align-self: stretch; text-align: center; } } /* Taller portrait screens (390×844 and up, portrait tablets): the supporting line ends by ≈43 % of the height, so the top gradient stops sooner and the upper loaf — the focal subject — stays clear. */ @media (orientation: portrait) and (min-height: 760px) { .shade { background: linear-gradient(to bottom, rgb(43 42 40 / .88) 0%, rgb(43 42 40 / .72) 28%, rgb(43 42 40 / .54) 43%, rgb(43 42 40 / .18) 52%, rgb(43 42 40 / 0) 60%), linear-gradient(to top, rgb(43 42 40 / .82) 0%, rgb(43 42 40 / .66) 18%, rgb(43 42 40 / 0) 34%); } } /* Short phones (375×667): pull the headline up so its last line stays inside the top third. */ @media (orientation: portrait) and (max-height: 700px) { .copy { margin-top: .75rem; } } /* ── Document pages (privacy.html): cream page, brown text, no hero ───────────── */ html.doc { background: var(--cream); color: var(--ink); } .doc body { color: var(--ink); } .doc a { color: var(--link); } .doc a:focus-visible { outline-color: var(--ink); } .doc .logo img { height: clamp(4rem, 9vh, 6rem); } .doc .prose { max-width: 38rem; margin-top: clamp(1.5rem, 6vh, 4rem); font-size: 1.0625rem; line-height: 1.6; } .doc h1 { margin-bottom: 1.5rem; } .doc h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 2.25rem 0 .5rem; } .doc p { margin: 0 0 1rem; } .doc ul { margin: 0 0 1rem; padding-left: 1.25rem; } .doc li { margin-bottom: .5rem; } .doc address { font-style: normal; margin: 0 0 1rem; } .doc .updated { margin-top: 2.5rem; font-size: .875rem; } /* Footer links are #7E644F on cream (4.7:1) — that only holds at full opacity. */ .doc footer { opacity: 1; padding-top: clamp(2rem, 6vh, 4rem); } /* @generated:start — written by scripts/build-images.mjs, do not edit by hand */ :root { --ph-landscape: url("data:image/jpeg;base64,/9j/2wBDABAQEBAREBIUFBIZGxgbGSUiHx8iJTgoKygrKDhVNT41NT41VUtbSkVKW0uHal5eaoecg3yDnL2pqb3u4u7/////2wBDARAQEBAREBIUFBIZGxgbGSUiHx8iJTgoKygrKDhVNT41NT41VUtbSkVKW0uHal5eaoecg3yDnL2pqb3u4u7/////wgARCAAOABgDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFAv/EABYBAQEBAAAAAAAAAAAAAAAAAAIBA//aAAwDAQACEAMQAAAAjtZo5uePCn//xAAgEAACAQMEAwAAAAAAAAAAAAABAgMABBEFITFREhVS/9oACAEBAAE/AILO2nk+VHJr18IkDR58R3WoaeFhjaPfNWsaoqOnDjIHVFiBjG9GUojbZHVf/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAIRASH/2gAIAQIBAT8Aa0XuH//EABcRAAMBAAAAAAAAAAAAAAAAAAABITH/2gAIAQMBAT8AWDh//9k="); --ph-portrait: url("data:image/jpeg;base64,/9j/2wBDABAQEBAREBIUFBIZGxgbGSUiHx8iJTgoKygrKDhVNT41NT41VUtbSkVKW0uHal5eaoecg3yDnL2pqb3u4u7/////2wBDARAQEBAREBIUFBIZGxgbGSUiHx8iJTgoKygrKDhVNT41NT41VUtbSkVKW0uHal5eaoecg3yDnL2pqb3u4u7/////wgARCAArABgDASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAUCAwQGAf/EABgBAAMBAQAAAAAAAAAAAAAAAAABAgME/9oADAMBAAIQAxAAAADhZbWEtGMwbXRVOSs8IvRbkUdODw50T//EAB8QAAIDAAIDAQEAAAAAAAAAAAECAAMRBCESFDEFof/aAAgBAQABPwDIFhWU8Zrcz5sH5yHcaW8RgxCDciBaUCr3kVql0+Q7ENtCg9iCku3RKr/Z61Kd5uR+LSy5mAxVsZsGaDDU/wA81llKoNNwBldth3WPyX2WK5Icjue1yCRtpn//xAAbEQACAgMBAAAAAAAAAAAAAAAAAQIREBIxUf/aAAgBAgEBPwCzZYavo4RRUfD/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIREhD/2gAIAQMBAT8Aoy+J0abLkf/Z"); --focal-landscape: 50% 55%; --focal-portrait: 50% 45%; } /* @generated:end */