/* ============================================================================ Teriara — landing page (index.html). Dedicated stylesheet for the 2026 editorial redesign. styles.css is SHARED with Teriara-print.html and keeps the old class vocabulary, so this page gets its own file. Brand tokens mirror styles.css (warm cream + deep plum + purple accent); type is Fraunces (display) + Hanken Grotesk (text), declared in the page . Motion is opt-out via prefers-reduced-motion. ============================================================================ */ :root { /* Warm paper base */ --paper: #FAF7F0; /* warm cream (brand-mark background) */ --paper-2: #F3EFE6; --paper-3: #E8E2D6; --line: #E5DFD3; --line-2: #D5CFC0; /* Deep plum bands */ --deep: #14102A; --deep-2: #1B1638; --deep-3: #221C45; --deep-line: #2D2854; --deep-line-2:#3D386A; /* Ink (on paper) / light fg (on deep) */ --ink: #2C2745; /* deep plum, near-black */ --ink-2: #4A436A; --ink-dim: #756E92; --fg: #F8F4FB; --fg-dim: #C4BEDA; --fg-faint: #8B85A8; /* Accent — purple primary, pink + blue counterpoints (logo gradient) */ --accent: #7B6FE0; --accent-2: #6A5DD3; --accent-3: #5A4FBE; --accent-pink:#F2A5C8; --accent-blue:#9FC9F0; --accent-soft:rgba(123, 111, 224, 0.12); --glow: rgba(123, 111, 224, 0.28); --ok: #5BC07A; --warn: #E89A4A; --crit: #E55B6B; --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --container: 1180px; --gutter: clamp(20px, 5vw, 56px); --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --band-pad: clamp(72px, 11vw, 132px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: #fff; } /* ---- Accessibility helpers ---------------------------------------------- */ .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: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(-160%); background: var(--ink); color: var(--fg); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---- Layout primitives -------------------------------------------------- */ .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 720px; } .band { padding-block: var(--band-pad); } .band-paper { background: var(--paper); color: var(--ink); } .band-deep { background: var(--deep); color: var(--fg); } .band-deep .body { color: var(--fg-dim); } /* ---- Type --------------------------------------------------------------- */ .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 18px; } .band-deep .eyebrow { color: var(--fg-faint); } .eyebrow-accent { color: var(--accent); } .band-deep .eyebrow-accent { color: var(--accent-pink); } .section-head { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 22px; color: inherit; } .body { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.62; color: var(--ink-2); margin: 0 0 18px; max-width: 62ch; } .lede { font-size: clamp(18px, 2.2vw, 22px); } .detail { font-size: 16px; color: var(--ink-dim); margin: 0; max-width: 58ch; } .band-deep .detail { color: var(--fg-faint); } .detail-dim { color: var(--ink-dim); font-style: italic; } .band-deep .detail-dim { color: var(--fg-faint); } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; font-family: var(--sans); font-weight: 600; font-size: 16px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; box-shadow: 0 10px 26px -12px var(--glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--glow); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); } /* ---- Top nav ------------------------------------------------------------ */ .site-nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--container); margin-inline: auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { width: 30px; height: 30px; color: var(--accent); } .brand-name { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .18s ease; } .nav-links a:hover { color: var(--accent-2); } .nav-cta { padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--fg) !important; font-weight: 600; } .nav-cta:hover { background: var(--accent-3); } /* ---- Hero --------------------------------------------------------------- */ .hero { background: radial-gradient(120% 90% at 50% -10%, var(--accent-soft), transparent 60%), var(--paper); padding-block: clamp(72px, 12vw, 140px) clamp(56px, 9vw, 104px); text-align: center; } .hero-inner { max-width: 860px; margin-inline: auto; padding-inline: var(--gutter); } .hero-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 7vw, 76px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 26px; color: var(--ink); } .hero-sub { margin: 0 auto 34px; max-width: 62ch; color: var(--ink-2); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* animated word "cracks" — decorative, aria-hidden */ .word-swap { position: relative; display: inline-block; white-space: nowrap; } .word-swap .word { display: inline-block; } .word-before { position: absolute; inset: 0; color: var(--ink); text-decoration: line-through; text-decoration-color: var(--crit); text-decoration-thickness: 3px; animation: wordOut 3.6s cubic-bezier(.6,0,.2,1) 1s forwards; } .word-after { color: var(--accent); opacity: 0; animation: wordIn 3.6s cubic-bezier(.6,0,.2,1) 1s forwards; } @keyframes wordOut { 0%,38% { opacity: 1; transform: translateY(0); } 62%,100% { opacity: 0; transform: translateY(-.14em); } } @keyframes wordIn { 0%,38% { opacity: 0; transform: translateY(.16em); } 62%,100% { opacity: 1; transform: translateY(0); } } /* ---- Demo surface ("hold a Tuesday") ------------------------------------ */ .demo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(32px, 5vw, 68px); align-items: center; } .demo-intro { align-self: center; } .surface { background: linear-gradient(180deg, #fff, var(--paper-2)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 30px); box-shadow: 0 40px 80px -46px rgba(44, 39, 69, 0.5), 0 2px 6px rgba(44, 39, 69, 0.05); display: flex; flex-direction: column; gap: 14px; } .surface-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .surface-loop { width: 22px; height: 22px; color: var(--accent); } .surface-day { font-weight: 600; font-size: 15px; color: var(--ink-dim); letter-spacing: .02em; } .moment { margin: 0; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .moment-risk { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--warn) 8%, #fff)); border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); } .moment-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-dim); } .moment-quote { margin: 0; font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.5; color: var(--ink); } .moment-task { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); } .moment-cold { margin: 0; font-size: 16px; color: var(--ink-2); } .moment-foot { margin: 12px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--ink-dim); } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot-good { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); } .dot-risk { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); } .act { font-weight: 600; color: var(--accent-2); cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .act:hover { color: var(--accent-3); } .demo-cta { margin-top: clamp(40px, 6vw, 68px); text-align: center; } /* staggered entrance of the moments when the surface reveals */ .surface .moment { opacity: 1; } .reveal:not(.is-in) .moment { opacity: 0; transform: translateY(10px); } .surface.reveal .moment { transition: opacity .5s ease, transform .5s ease; } .surface.is-in .moment:nth-of-type(1) { transition-delay: .12s; } .surface.is-in .moment:nth-of-type(2) { transition-delay: .26s; } .surface.is-in .moment:nth-of-type(3) { transition-delay: .40s; } .surface.is-in .moment { opacity: 1; transform: none; } /* ---- Breadth list ------------------------------------------------------- */ .breadth-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); } .breadth-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .breadth-item { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--deep-2); border: 1px solid var(--deep-line); border-radius: var(--radius); transition: border-color .2s ease, transform .2s ease, background .2s ease; } .breadth-item:hover { border-color: var(--accent-3); transform: translateY(-3px); background: var(--deep-3); } .breadth-label { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-pink); } .breadth-moment { font-size: 16px; line-height: 1.5; color: var(--fg-dim); } /* ---- Coach note --------------------------------------------------------- */ .coach-note { margin: clamp(28px, 4vw, 40px) 0 0; } .coach-note blockquote { margin: 0; padding: 22px 28px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.45; color: var(--ink); } /* ---- Fork --------------------------------------------------------------- */ .fork-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 52px); } .fork-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 28px); } .fork-col { padding: clamp(26px, 3vw, 38px); background: var(--deep-2); border: 1px solid var(--deep-line); border-radius: var(--radius-lg); } .fork-col-lead { background: linear-gradient(165deg, var(--deep-3), var(--deep-2)); border-color: var(--accent-3); box-shadow: 0 30px 70px -46px var(--glow); } .fork-label { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-pink); } .fork-copy { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fg-dim); } .fork-cta { margin-top: clamp(30px, 4vw, 44px); text-align: center; } /* ---- Final CTA ---------------------------------------------------------- */ .close-inner { max-width: 640px; margin-inline: auto; text-align: center; } .close-head { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 20px; color: var(--ink); } .close-body { margin-inline: auto; } .form-shell { margin-top: 30px; } .cta-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 500px; margin: 0 auto; } .cta-form input { flex: 1 1 260px; min-width: 0; padding: 15px 18px; font-family: var(--sans); font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px; transition: border-color .18s ease, box-shadow .18s ease; } .cta-form input::placeholder { color: var(--ink-dim); } .cta-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .cta-form button { flex: none; padding: 15px 28px; font-family: var(--sans); font-weight: 600; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-3)); border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 26px -12px var(--glow); transition: transform .16s ease, box-shadow .2s ease; } .cta-form button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--glow); } .cta-form button:disabled { opacity: .7; cursor: default; transform: none; } .cta-thanks { margin: 18px 0 0; font-weight: 600; color: var(--accent-2); } .form-reassure { margin: 16px 0 0; font-size: 14px; color: var(--ink-dim); } /* ---- Footer ------------------------------------------------------------- */ .site-footer { background: var(--deep); color: var(--fg-dim); padding-block: 48px; border-top: 1px solid var(--deep-line); } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .footer-brand { display: inline-flex; align-items: center; gap: 11px; } .footer-brand .brand-mark { width: 26px; height: 26px; color: var(--accent-pink); } .footer-tagline { font-family: var(--serif); font-size: 17px; color: var(--fg); } .footer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--fg-faint); } .footer-meta a { color: var(--accent-pink); } .footer-meta a:hover { color: var(--accent-blue); } .footer-dot { color: var(--deep-line-2); } /* ---- Reveal-on-scroll (JS toggles .is-in; respects reduced-motion) ------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 860px) { .demo-layout { grid-template-columns: 1fr; } .breadth-list { grid-template-columns: 1fr; } .fork-cols { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { body { font-size: 16px; } .nav-links { gap: 14px; } .nav-links a:not(.nav-cta) { display: none; } .hero-actions .btn, .cta-form button { width: 100%; } .cta-form input { flex-basis: 100%; } } /* ---- Motion opt-out ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .word-before { opacity: 0; } .word-after { opacity: 1; } }