/* ============================================================ Should I Surf? — static page styles (about, privacy) ------------------------------------------------------------ These pages live in public/ and are served directly, outside the Vite build, so they cannot import src/design-system.css. The tokens below are therefore a DUPLICATE of the coastal-light palette, kept deliberately small. src/design-system.css is the source of truth. When the palette changes there, it must be changed here too — the two cannot be linked, so they are kept in step by hand. Palette: Kingsbarns, East Neuk of Fife (56.3268, -2.7247). ============================================================ */ /* Fonts are ed from each page's , not @imported here: an @import can't start downloading until this file has been fetched and parsed, which on a text-only page delays the one resource that matters. */ :root { --coast-bg-1: #fafafb; /* page ground */ --coast-bg-3: #e6efec; /* raised panel — the contact box */ --coast-fg: #1d2a38; /* wordmark, strong body */ --coast-fg-2: #2b3b4b; /* prose */ --coast-fg-strong: #16202a; /* headings */ --coast-fg-4: #606d78; /* subtitles, footer — see note below */ --coast-accent: #02578e; /* section labels and links */ --coast-border-2: rgba(29,42,56,0.12); --font-headline: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-marker: "Permanent Marker", cursive; /* Note on --coast-fg-4: the app also has a fainter --coast-fg-5 (#94a1ab), but at 2.53:1 on this ground it fails as text. It is for placeholders and decoration on the app canvas only. Small print here uses fg-4 (5.09:1) instead. */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--coast-bg-1); color: var(--coast-fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { max-width: 640px; margin: 0 auto; padding: 48px 24px 80px; } header { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; } header a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } header span { font-family: var(--font-marker); font-size: 17px; font-weight: 400; color: var(--coast-fg); } header span em { color: var(--coast-accent); font-style: normal; } h1 { font-family: var(--font-headline); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--coast-fg-strong); margin-bottom: 6px; } /* Section labels — the app's eyebrow pattern: Mulish, uppercase, tracked. */ h2 { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coast-accent); margin: 36px 0 12px; } h3 { font-size: 15px; font-weight: 700; color: var(--coast-fg-strong); margin: 20px 0 6px; } p { font-size: 15px; line-height: 1.7; color: var(--coast-fg-2); margin-bottom: 12px; } ul { margin: 0 0 12px 20px; } li { font-size: 15px; line-height: 1.7; color: var(--coast-fg-2); margin-bottom: 4px; } a { color: var(--coast-accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } a:focus-visible { outline: 2px solid var(--coast-accent); outline-offset: 2px; border-radius: 2px; } /* Page-specific standfirsts: .subtitle on about, .updated on privacy. */ .subtitle, .updated { font-size: 13px; color: var(--coast-fg-4); margin-bottom: 40px; } .contact { background: var(--coast-bg-3); border-radius: 6px; padding: 20px 24px; margin-top: 40px; } .contact p { margin: 0; } footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--coast-border-2); font-size: 12px; color: var(--coast-fg-4); }