/* ------------------------------------------------------------------ * * Råsta Lake — contact page * ------------------------------------------------------------------ * * Zero-build page styles. Consumes ONLY design-system tokens * (css/tokens/{primitives,semantic,gradients}.css) — no raw hex here. * carries `.dark`, so the semantic roles resolve to their * dark-surface values (see semantic.css `.dark` block). * ------------------------------------------------------------------ */ :root { /* Mirrors the --font-sans stack from the design system's theme.css. That file is a Tailwind `@theme inline` bridge and has no effect in a zero-build page, so the one token it owns is restated here. */ --font-sans: "Manrope Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; border-color: var(--border); } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; /* The official brand ink — the single flat surface the source slide uses. */ background-color: var(--rl-brand-ink); color: var(--foreground); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Accessibility fallback: keyboard focus must never be invisible (WCAG 2.4.7). */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ---------------------------------------------------------------- * * Main — brand lockup, heading, contact copy * ---------------------------------------------------------------- */ .page { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem); } .stage { width: 100%; /* 60rem = 960px, the width of the source slide. */ max-width: 60rem; text-align: center; } .stage-logo { display: block; width: min(94%, 56rem); height: auto; margin: 0 auto clamp(2.5rem, 7vw, 4.5rem); } .stage-title { margin: 0; font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--card-foreground); text-wrap: balance; } .stage-body { margin: clamp(1rem, 2.5vw, 1.5rem) auto 0; max-width: 34rem; font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem); line-height: 1.7; color: var(--muted-foreground); text-wrap: pretty; } /* ---------------------------------------------------------------- * * Email — assembled by js/contact.js, never present in the markup * ---------------------------------------------------------------- */ .contact-mail { font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.14s, text-decoration-color 0.14s; overflow-wrap: anywhere; } .contact-mail:hover { color: var(--brand); text-decoration-color: transparent; } /* Pre-hydration and no-JS state: a readable, non-harvestable spelling. */ .contact-fallback { font-weight: 600; color: var(--link); } /* ---------------------------------------------------------------- * * Footer — symbol left, wordmark right (as on the source slide) * ---------------------------------------------------------------- */ .footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 5vw, 4rem); } .footer-symbol { display: block; width: 1.5rem; height: 1.5rem; } .footer-logo { display: block; height: 1rem; width: auto; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }