/* =========================================================== Riitti — landing page Colours and typefaces live in tokens.css, which the app shares. Two palettes ship: "dark" (default) and "linen". Switch by setting data-palette="linen" on . =========================================================== */ * { box-sizing: border-box; } /* .form-stack sets display:flex, which would otherwise out-specify [hidden] */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.55; overflow-x: hidden; transition: background-color .6s ease, color .6s ease; } /* subtle film grain via SVG noise */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: var(--grain); background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } img { max-width: 100%; } .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .container { padding: 0 22px; } } /* ---------- Top bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent), transparent); transition: background .4s; } .topbar.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--rule); } .wordmark { display: inline-flex; align-items: center; line-height: 0; } .wordmark img { height: 30px; width: auto; display: block; } .topbar nav { display: flex; gap: 36px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); } .topbar nav a { color: inherit; text-decoration: none; transition: color .2s; } .topbar nav a:hover { color: var(--ink); } /* Tester entry — nav-scale, so it reads as a sibling of the links rather than competing with the hero CTA. Stays visible on mobile: testers arrive by tapping an object with their phone. */ .nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); text-decoration: none; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; transition: background .25s ease, color .25s ease, border-color .25s ease; } .nav-cta:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .nav-cta .arrow { width: 12px; height: 1px; background: currentColor; position: relative; } .nav-cta .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); } @media (max-width: 720px) { .topbar nav { display: none; } .topbar { padding: 18px 22px; } .nav-cta { padding: 8px 12px; letter-spacing: 0.18em; gap: 8px; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; padding: 160px 0 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; isolation: isolate; } .hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; } .hero-bg { position: absolute; inset: 0; z-index: -2; /* gradient underneath keeps the hero composed if the photo is missing */ background-color: var(--bg-2); background-image: url('assets/hero.jpg'), radial-gradient(ellipse at 50% 35%, var(--bg-3) 0%, var(--bg) 70%); background-size: cover, cover; background-position: center 30%, center; background-repeat: no-repeat, no-repeat; transition: filter .6s ease, opacity .6s ease; } .hero-veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 60%, transparent 0%, color-mix(in srgb, var(--bg) 70%, transparent) 80%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 25%, transparent) 35%, color-mix(in srgb, var(--bg) 55%, transparent) 75%, var(--bg) 100%); transition: background .6s ease; } [data-palette="linen"] .hero-bg { filter: sepia(0.15) saturate(0.7) brightness(1.05); } [data-palette="linen"] .hero-veil { background: radial-gradient(ellipse at 50% 60%, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 80%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent) 0%, color-mix(in srgb, var(--bg) 20%, transparent) 35%, color-mix(in srgb, var(--bg) 50%, transparent) 75%, var(--bg) 100%); } @media (max-width: 720px) { .hero { padding: 130px 0 70px; } } .hero-eyebrow { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 28px; display: inline-flex; align-items: center; gap: 14px; } .hero-eyebrow::before, .hero-eyebrow::after { content: ""; display: block; width: 28px; height: 1px; background: var(--accent); } .brand { font-family: var(--serif); font-weight: 300; font-size: clamp(72px, 13vw, 188px); line-height: 0.92; letter-spacing: 0.06em; margin: 0 0 0 -0.04em; color: var(--ink); font-feature-settings: "liga", "dlig"; } .brand .it { font-style: italic; font-weight: 300; color: var(--accent); } .brand img { width: clamp(280px, 46vw, 680px); height: auto; display: block; margin: 0 auto; } [data-palette="linen"] .brand img { filter: brightness(0.45) saturate(1.8); } .tagline { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -0.005em; margin: 36px auto 28px; color: var(--ink); max-width: 22ch; font-style: italic; } .hero-body { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 44ch; margin: 0 auto 44px; } .cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; } .btn { display: inline-flex; align-items: center; gap: 14px; padding: 16px 24px; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .btn:hover { background: var(--ink); color: var(--bg); } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn-primary:hover { background: transparent; color: var(--accent); } .btn .arrow { width: 14px; height: 1px; background: currentColor; position: relative; } .btn .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); } /* ---------- Section scaffolding ---------- */ section { padding: 120px 0; position: relative; } @media (max-width: 720px) { section { padding: 80px 0; } } .section-label { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 14px; } .section-label::before { content: ""; display: block; width: 20px; height: 1px; background: var(--accent); } .section-label--center { justify-content: center; } .h-display { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 6vw, 84px); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 32px; color: var(--ink); max-width: 18ch; } .lede { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 56ch; } /* ---------- Concept ---------- */ .concept { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; align-items: start; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } @media (max-width: 900px) { .concept { grid-template-columns: 1fr; gap: 48px; } } .pullquote { border-left: 1px solid var(--accent); padding: 8px 0 8px 32px; margin-top: 40px; } .pullquote q { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.22; color: var(--ink); quotes: none; } .pullquote .attr { margin-top: 18px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-mute); } .concept-aside { display: flex; flex-direction: column; gap: 24px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); } .concept-card { border: 1px solid var(--rule); padding: 28px 28px 26px; background: color-mix(in srgb, var(--bg-2) 85%, transparent); } .concept-card h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 12px; color: var(--ink); letter-spacing: 0.01em; } .concept-card p { margin: 0; font-size: 14px; color: var(--ink-soft); } .concept-card .meta { margin-top: 18px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); display: flex; justify-content: space-between; gap: 16px; } /* ---------- Product ---------- */ .product { padding: 160px 0; } .product-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 96px; align-items: center; } @media (max-width: 900px) { .product-inner { grid-template-columns: 1fr; gap: 56px; } } .product-meta { max-width: 38ch; } .product-name { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.01em; margin: 0 0 24px; color: var(--ink); } .product-name em { font-style: italic; color: var(--accent); font-weight: 300; } .product-lede { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 36ch; margin: 0; } .product-specs { margin-top: 48px; border-top: 1px solid var(--rule); } .product-specs .row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); } .product-specs dt { color: var(--ink-mute); letter-spacing: 0.28em; text-transform: uppercase; font-size: 10px; margin: 0; } .product-specs dd { color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 17px; margin: 0; text-align: right; } .product-figure { margin: 0; position: relative; } .product-figure img { width: 100%; height: auto; display: block; filter: brightness(0.96) contrast(1.04); } [data-palette="linen"] .product-figure img { filter: brightness(0.92) contrast(1.06) saturate(0.9); } .product-figure figcaption { margin-top: 22px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-mute); text-align: right; } /* ---------- How it works ---------- */ .how { display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: start; } @media (max-width: 900px) { .how { grid-template-columns: 1fr; gap: 48px; } } .steps { display: flex; flex-direction: column; } .step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 36px 0; border-top: 1px solid var(--rule); align-items: baseline; } .step:last-child { border-bottom: 1px solid var(--rule); } .step-num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent); font-weight: 400; } .step-title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--ink); margin: 0 0 10px; } .step-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.6; max-width: 40ch; margin: 0; } .how-aside { font-size: 14px; color: var(--ink-soft); line-height: 1.7; max-width: 36ch; } .how-aside .tag { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; } /* ---------- Two modes ---------- */ .modes { border-top: 1px solid var(--rule); padding-top: 140px; padding-bottom: 140px; } .modes-head { max-width: 760px; } .modes-intro { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); font-weight: 300; line-height: 1.6; color: var(--ink-soft); margin-top: 20px; } .modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 64px; } @media (max-width: 900px) { .modes-grid { grid-template-columns: 1fr; } } .mode { background: var(--bg); padding: 48px 44px; display: flex; flex-direction: column; gap: 18px; } .mode-name { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; line-height: 1.1; margin: 0; } .mode-name em { font-style: italic; color: var(--accent); } .mode-name .en { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-mute); margin-top: 14px; } .mode p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin: 0; } .mode-feel { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); } /* ---------- Founder ---------- */ .founder { border-top: 1px solid var(--rule); padding: 140px 0; } .founder-inner { max-width: 720px; margin: 0 auto; text-align: center; } .founder p { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.45; color: var(--ink); margin: 0 0 28px; } .founder p.first { font-style: italic; } .founder .sig { margin-top: 56px; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-mute); } .founder .sig .name { font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: 0.02em; text-transform: none; color: var(--ink); display: block; margin-bottom: 6px; } /* The name is a mailto link, but reads as a signature — no link decoration. */ .founder .sig a.name { text-decoration: none; width: fit-content; transition: color .2s; } .founder .sig a.name:hover { color: var(--accent); } /* ---------- Waitlist ---------- */ .waitlist { position: relative; background: var(--bg); isolation: isolate; overflow: hidden; padding: 44px 0; } .waitlist::before { content: ""; position: absolute; inset: 0; z-index: -1; /* scrim over the texture — the small-caps labels sit directly on it */ background-image: linear-gradient(color-mix(in srgb, var(--bg) 58%, transparent), color-mix(in srgb, var(--bg) 58%, transparent)), url('assets/riitti-texture.jpg'); background-size: cover, cover; background-position: center, center; } [data-palette="linen"] .waitlist::before { display: none; } .waitlist-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; } @media (max-width: 900px) { .waitlist-inner { grid-template-columns: 1fr; gap: 48px; } } .form-stack { display: flex; flex-direction: column; gap: 28px; align-items: stretch; } .form-row { display: flex; flex-direction: column; gap: 10px; } .form-row label { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-mute); } .form-row input, .form-row select { background: transparent; border: none; border-bottom: 1px solid var(--rule); color: var(--ink); font-family: var(--sans); font-size: 18px; padding: 10px 0 14px; outline: none; transition: border-color .25s; border-radius: 0; } .form-row input:focus, .form-row select:focus { border-color: var(--accent); } .form-row input::placeholder { color: var(--ink-mute); } .form-row select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 12px) 18px, calc(100% - 7px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; } .form-row select option { background: var(--bg); color: var(--ink); } .waitlist .btn { align-self: flex-start; margin-top: 8px; } /* Sits inside the form so it disappears with it on success. */ .form-consent { margin: -14px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-mute); } .form-error { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .success { padding: 32px 0; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--accent); line-height: 1.4; margin: 0; } .success::before { content: "✦"; display: inline-block; margin-right: 14px; color: var(--accent); } .success:focus { outline: none; } /* ---------- Footer ---------- */ footer { position: relative; padding: 120px 0 48px; background: var(--accent); isolation: isolate; overflow: hidden; } footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url('assets/riitti-texture.jpg'); background-size: cover; background-position: center; opacity: 0.14; mix-blend-mode: multiply; } [data-palette="linen"] footer::before { display: none; } .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .footer-brand { line-height: 0; } .footer-brand img { height: 40px; width: auto; display: block; filter: brightness(0.28) saturate(1.4); } /* darken the pale logo on the light palette so it stays legible */ [data-palette="linen"] .wordmark img { filter: brightness(0.45) saturate(1.8); } .footer-links { display: flex; gap: 36px; flex-wrap: wrap; } .footer-links a { color: color-mix(in srgb, #2a1418 78%, transparent); text-decoration: none; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; transition: color .2s; } .footer-links a:hover { color: #2a1418; } .footer-copy { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, #2a1418 55%, transparent); } .footer-copy a { color: inherit; text-decoration: none; transition: color .2s; } .footer-copy a:hover { color: #2a1418; } @media (max-width: 720px) { .footer-row { flex-direction: column; align-items: flex-start; gap: 24px; } .footer-links { gap: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }