/* ========================================================================= Perch — landing page styles One accent (terracotta). Hairlines + whitespace do the structural work. No heavy shadows, no gradients, no glassmorphism, no second accent. ========================================================================= */ :root { /* Palette (use exactly) */ --cream: #F0EEE5; --white: #FFFFFF; --ink: #1F1E1D; --secondary: #6E6B64; --hairline: #E3DFD6; --accent: #D97757; /* terracotta — CTAs, checks, tiny labels only */ --accent-ink: #B85E42; /* darker terracotta for hover only */ --dark-card: #30302E; /* Type */ --serif: ui-serif, Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Rhythm */ --radius: 14px; --radius-sm: 10px; --pill: 999px; --maxw: 1120px; --gutter: clamp(20px, 5vw, 40px); /* Barely-there elevation */ --lift: 0 1px 2px rgba(31, 30, 29, 0.04); } /* ---------- reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `clip` prevents horizontal overflow WITHOUT turning into a scroll container (which `hidden` does), so normal page scrolling stays on the viewport. */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ---------- shared type ---------- */ .serif { font-family: var(--serif); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; margin: 0; color: var(--ink); } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; } .lead { color: var(--secondary); font-size: clamp(17px, 2.2vw, 19px); line-height: 1.55; margin: 0; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: clamp(44px, 6vw, 80px); } .section-head { max-width: 640px; margin-bottom: clamp(26px, 3.5vw, 40px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: clamp(30px, 4.6vw, 46px); } .section-head p { margin-top: 14px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 16px; font-weight: 550; line-height: 1; padding: 14px 26px; border-radius: var(--pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); } .btn-ghost:hover { border-color: var(--ink); background: rgba(31,30,29,0.02); } .btn-sm { padding: 10px 18px; font-size: 15px; } .btn-lg { padding: 16px 30px; font-size: 17px; } .btn:disabled { opacity: 0.6; cursor: progress; } .cta-meta { margin-top: 16px; font-size: 13.5px; color: var(--secondary); } .reassure { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--secondary); max-width: 42ch; } .cta-meta .dot { opacity: 0.5; padding: 0 6px; } .plat { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; } .plat + .plat { margin-left: 16px; } .plat-ico { display: block; opacity: 0.85; } .plat-soon { color: var(--secondary); } .soon-tag { margin-left: 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--hairline); color: var(--secondary); padding: 2px 6px; border-radius: var(--pill); } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 1px solid transparent; transition: border-color .25s ease, background-color .25s ease; } .nav.scrolled { border-bottom-color: var(--hairline); background: rgba(240, 238, 229, 0.86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; } .wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } .wordmark svg { display: block; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a.link { font-size: 15px; color: var(--secondary); transition: color .15s ease; } .nav-links a.link:hover { color: var(--ink); } .nav-cta { margin-left: 6px; } /* Language switcher — a native