/* ============================================================================ YENN · marketing site styles (deploys from /public) Built on the Yenn design system tokens (styles.css). Plain CSS, no framework. Variations driven by [data-vibe] and [data-hero] on . ============================================================================ */ html { scroll-behavior: smooth; scroll-padding-top: 76px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { overflow-x: hidden; } /* ---- Layout primitives -------------------------------------------------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 28px; } .narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 28px; } .section { padding: clamp(60px, 8.5vw, 108px) 0; } .section-tight { padding: clamp(44px, 6vw, 76px) 0; } .eyebrow-row { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; } /* ---- Scroll-reveal (safe: only hides once JS marks motion is OK) -------- */ html.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-candle), transform 0.7s var(--ease-candle); } html.reveal-on [data-reveal].in { opacity: 1; transform: none; } html.reveal-on [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; } html.reveal-on [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; } html.reveal-on [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; } /* ---- Trust spark -------------------------------------------------------- */ .spark { display: inline-block; width: 1em; height: 1em; color: var(--teal-spark); filter: drop-shadow(0 0 6px rgba(63, 225, 198, 0.55)); } .spark svg { display: block; width: 100%; height: 100%; } /* ---- Buttons ------------------------------------------------------------ */ .btn { --pad-y: 13px; --pad-x: 22px; --fs: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-ui); font-weight: var(--w-semibold); font-size: var(--fs); line-height: 1; padding: var(--pad-y) var(--pad-x); border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-candle), box-shadow var(--dur-base) var(--ease-candle), background var(--dur-base) var(--ease-candle), border-color var(--dur-base) var(--ease-candle); } .btn:active { transform: scale(0.97); } .btn-lg { --pad-y: 16px; --pad-x: 30px; --fs: 16.5px; } .btn-sm { --pad-y: 10px; --pad-x: 16px; --fs: 14px; } /* The leading 0 0 0 1px ring is the SAME hue as the glow: it gives the bright gradient edge an intermediate-brightness pixel against the dark page, so a scaled/zoomed display resolves the edge cleanly instead of splitting it into a red-left / blue-right subpixel fringe. */ .btn-primary { background: var(--grad-brand); color: var(--text-on-brand); box-shadow: 0 0 0 1px rgba(245,130,155,0.45), var(--glow-brand), var(--sheen-top); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(245,130,155,0.55), 0 10px 32px rgba(245,130,155,0.45), var(--sheen-top); } .btn-secondary { background: var(--surface-2); color: var(--cream); border-color: var(--border-strong); box-shadow: var(--sheen-top); } .btn-secondary:hover { transform: translateY(-2px); border-color: var(--border-violet); background: var(--surface-3); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--cream); } /* ---- Cards -------------------------------------------------------------- */ .card { background: var(--grad-sheen); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1), var(--sheen-top); padding: 28px; transition: transform var(--dur-base) var(--ease-candle), box-shadow var(--dur-base) var(--ease-candle); } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--elev-2), var(--sheen-top); } .card-glow-violet { box-shadow: var(--elev-1), var(--glow-violet), var(--sheen-top); border-color: var(--border-violet); } .card-glow-ember { box-shadow: var(--elev-1), var(--glow-ember), var(--sheen-top); } .card-glow-trust { box-shadow: var(--elev-1), var(--glow-trust), var(--sheen-top); border-color: var(--border-teal); } /* ---- Chip --------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 13px; font-weight: var(--w-medium); background: var(--surface-3); color: var(--ink-dim); border: 1px solid var(--border); } .chip-trust { background: rgba(79,208,176,0.12); color: var(--teal); border-color: var(--border-teal); } /* ---- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(11,10,13,0.6); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); } .brand-link { display: inline-flex; align-items: center; gap: 8px; } .brand-link .brand-mark { height: 48px; object-fit: contain; display: block; margin-left: -4px; } .brand-link .brand-word { font-family: var(--font-display); font-weight: 600; font-size: 33px; line-height: 1; color: var(--cream); letter-spacing: 0.005em; } .site-nav { display: flex; align-items: center; gap: 28px; } .site-nav a.navlink { font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-candle); } .site-nav a.navlink:hover, .site-nav a.navlink[aria-current="page"] { color: var(--cream); } .nav-toggle { display: none; background: none; border: none; color: var(--cream); cursor: pointer; padding: 6px; } .nav-toggle .material-symbols-rounded { font-size: 30px; } /* ---- HERO --------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: var(--glow-candle); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; padding: clamp(48px, 7vw, 88px) 0 clamp(60px, 8vw, 92px); } .hero-copy { max-width: 560px; } .hero-h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: var(--ls-display); color: var(--cream); font-weight: var(--w-semibold); } .hero-lead-line { display: block; color: var(--cream); } @media (min-width: 921px) { .hero-lead-line { white-space: nowrap; } } .rotate-stage { position: relative; display: block; min-height: 1.1em; } .rotate-line { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(0.3em); transition: opacity var(--dur-slow) var(--ease-candle), transform var(--dur-slow) var(--ease-candle); will-change: opacity, transform; } [data-hero="centered"] .rotate-line { left: 50%; right: auto; transform: translate(-50%, 0.3em); width: 100%; } [data-hero="centered"] .rotate-line.is-active { transform: translate(-50%, 0); } [data-hero="centered"] .rotate-line.is-leaving { transform: translate(-50%, -0.3em); } .rotate-line .em { font-style: italic; } /* italic gradient-clip glyphs get their slanted edges + glow shaved at the inline box; give them room and pull it back so layout is unchanged. */ /* extend the gradient-clip box past the baseline + sides so italic descenders and slanted edges aren't shaved; negative margin keeps layout identical. */ .rotate-line .yenn-gradient-text { display: inline-block; padding: 0.04em 0.18em 0.2em; margin: -0.04em -0.18em -0.2em; } .rotate-line.is-active { opacity: 1; transform: translateY(0); } .rotate-line.is-leaving { opacity: 0; transform: translateY(-0.3em); } .hero-sub { margin-top: 26px; font-size: var(--t-lead); line-height: 1.55; color: var(--text-secondary); max-width: 480px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .hero-note { margin-top: 20px; font-size: 14px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; } .rotate-dots { display: flex; gap: 8px; margin-top: 30px; } .rotate-dots button { position: relative; width: 26px; height: 4px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: var(--surface-3); transition: background var(--dur-base) var(--ease-candle); } .rotate-dots button::after { content: ""; position: absolute; inset: -20px -3px; } .rotate-dots button.is-active { background: var(--grad-brand); } .rotate-dots button.is-active { background: var(--grad-brand); } /* ---- Hero visual: phone (product vibe) + portrait video (editorial vibe) - */ .hero-visual { display: flex; justify-content: center; } .hero-portrait { display: none; } .phone { width: 300px; height: 600px; border-radius: 46px; padding: 10px; background: linear-gradient(160deg, #2a2422, #14110f); box-shadow: 0 50px 100px rgba(0,0,0,0.6), inset 0 0 0 1.5px rgba(246,233,219,0.08); transform: rotate(2deg); } .phone-screen { width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: var(--bg); position: relative; padding: 14px; display: flex; flex-direction: column; } .phone-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .phone-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .profile-card { position: relative; flex: 1 1 auto; min-height: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--sheen-top); } .profile-photo { position: absolute; inset: 0; } .profile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,10,13,0.86) 100%); } .profile-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; z-index: 2; } .profile-name { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--cream); } .profile-bio { font-size: 13.5px; color: var(--ink-dim); margin-top: 4px; line-height: 1.45; } .profile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .profile-chips .chip { padding: 5px 11px; font-size: 12px; background: rgba(20,17,15,0.55); backdrop-filter: blur(8px); } /* ---- Section heading ---------------------------------------------------- */ .section-head { text-align: center; max-width: 620px; margin: 0 auto clamp(40px, 5vw, 60px); } .section-head h2 { font-size: var(--t-h1); color: var(--cream); margin: 14px 0 14px; letter-spacing: var(--ls-display); } .section-head p { font-size: var(--t-lead); color: var(--text-secondary); } /* ---- Story rows --------------------------------------------------------- */ .story-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 76px; } .story-row:last-child { margin-bottom: 0; } .story-row.flip .story-text { order: 2; } .story-text h3 { font-size: var(--t-h2); line-height: 1.12; color: var(--cream); margin-bottom: 16px; } .story-text p { font-size: var(--t-web-body); line-height: 1.6; color: var(--text-secondary); } .story-quote p.q { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.4; color: var(--cream); } .story-quote p.ctx { margin-top: 14px; font-size: 13px; letter-spacing: 0.04em; } /* ---- Trust steps -------------------------------------------------------- */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; } .step-card .step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .step-icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--surface-3); display: grid; place-items: center; } .step-icon .material-symbols-rounded { font-size: 26px; color: var(--teal); } .step-num { font-family: var(--font-display); font-size: 32px; color: var(--surface-3); font-weight: 600; } .step-card h3 { font-family: var(--font-ui); font-size: 19px; font-weight: 600; color: var(--cream); margin-bottom: 8px; letter-spacing: 0; } .step-card p { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); } /* ---- Privacy statement (composed split) -------------------------------- */ .privacy-statement .ps-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(44px, 7vw, 96px); align-items: center; } .privacy-statement .ps-copy { max-width: 560px; } .privacy-statement .ps-head { font-size: var(--t-h1); color: var(--cream); letter-spacing: var(--ls-display); line-height: 1.08; margin: 14px 0 20px; } .privacy-statement .ps-lead { font-size: var(--t-lead); line-height: 1.62; color: var(--text-secondary); } .privacy-statement .ps-visual { position: relative; display: flex; justify-content: center; } .privacy-statement .ps-glow { position: absolute; inset: -12% -18%; background: var(--glow-violet); pointer-events: none; } .privacy-statement .ps-visual .video-player { position: relative; z-index: 1; width: 300px; } .ps-enc-badge { position: absolute; z-index: 3; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 12px; font-weight: var(--w-semibold); color: var(--teal); background: rgba(11,10,13,0.55); border: 1px solid var(--border-teal); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ps-enc-badge .material-symbols-rounded { font-size: 15px; } /* ---- Privacy PAGE (editorial promise layout) --------------------------- */ .pv-pull { text-align: center; max-width: 900px; margin: 0 auto; } .pv-pull h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 5vw, 58px); line-height: 1.1; color: var(--cream); letter-spacing: var(--ls-display); } .pv-pull p { margin: 20px auto 0; font-size: var(--t-lead); line-height: 1.6; color: var(--text-secondary); max-width: 560px; } .pv-rows { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 116px); } .pv-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .pv-row.flip .pv-text { order: 2; } .pv-num { font-family: var(--font-display); font-size: 19px; color: var(--rose); letter-spacing: 0.1em; } .pv-text h3 { font-size: var(--t-h2); line-height: 1.12; color: var(--cream); margin: 10px 0 16px; } .pv-text p { font-size: var(--t-web-body); line-height: 1.62; color: var(--text-secondary); } .pv-visual { display: flex; justify-content: center; } /* visual: empty sign-up form */ .pv-form { width: 100%; max-width: 380px; padding: 8px 24px; } .pv-form-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border); font-family: var(--font-ui); font-size: 15.5px; } .pv-form-row:last-child { border-bottom: 0; } .pv-form-row.struck span:first-child { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 1.5px; } .pv-form-row.struck .material-symbols-rounded { color: var(--ink-muted); font-size: 20px; opacity: 0.7; } .pv-form-row.keep { margin-top: 4px; } .pv-form-row.keep span:first-child { color: var(--cream); font-weight: var(--w-semibold); } .pv-form-row.keep .material-symbols-rounded { color: var(--teal); font-size: 21px; } /* visual: encrypted chat */ .pv-chat { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 11px; padding: 6px; } .pv-bubble { max-width: 80%; padding: 14px 17px; border-radius: 18px; } .pv-bubble span { display: block; filter: blur(5px); font-size: 15px; color: var(--cream); user-select: none; } .pv-bubble.them { align-self: flex-start; background: var(--surface-3); border-bottom-left-radius: 6px; } .pv-bubble.you { align-self: flex-end; background: var(--grad-brand); border-bottom-right-radius: 6px; } .pv-bubble.you span { color: var(--text-on-brand); } .pv-chat .chip { align-self: center; margin-top: 6px; } /* visual: photo forgets location */ .pv-photo { width: 100%; max-width: 290px; border-radius: var(--r-lg); overflow: hidden; position: relative; border: 1px solid var(--border); box-shadow: var(--elev-2), var(--sheen-top); } .pv-photo .pv-photo-img { aspect-ratio: 4 / 5; position: relative; } .pv-photo .pv-photo-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,10,13,0.8) 100%); } .pv-photo .ss-toast { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; } .pv-geo { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); background: rgba(11,10,13,0.5); border: 1px solid var(--border); padding: 5px 10px; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-decoration: line-through; text-decoration-color: var(--rose); } /* visual: erasing space */ .pv-erase { width: 100%; max-width: 360px; text-align: center; padding: 46px 30px; position: relative; } .pv-erase img { width: 66px; height: 66px; object-fit: contain; margin-bottom: 18px; -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 100%); mask-image: linear-gradient(180deg, #000 38%, transparent 100%); filter: drop-shadow(0 0 22px rgba(245,130,155,0.3)); } .pv-erase p { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--cream); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 96%); mask-image: linear-gradient(180deg, #000 30%, transparent 96%); } /* centerpiece: what never reaches us vs. the only thing we compute on */ .pv-flow-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-immersive); } .pv-ledger { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 36px); align-items: center; max-width: 920px; margin: clamp(36px, 5vw, 56px) auto 0; } .pv-ledger-card { padding: 28px; height: 100%; } .pv-ledger-card .pv-card-label { display: flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-size: 12px; font-weight: var(--w-semibold); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } .pv-ledger-card.gone .pv-card-label { color: var(--ink-muted); } .pv-ledger-card.keep .pv-card-label { color: var(--teal); } .pv-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-family: var(--font-ui); font-size: 15.5px; } .pv-line:last-child { border-bottom: 0; } .pv-line .material-symbols-rounded { font-size: 19px; flex: none; } .pv-ledger-card.gone .pv-line { color: var(--ink-muted); } .pv-ledger-card.gone .pv-line span:last-child { text-decoration: line-through; text-decoration-color: rgba(245,130,155,0.5); } .pv-ledger-card.gone .pv-line .material-symbols-rounded { color: var(--ink-dim); } .pv-ledger-card.keep { border-color: var(--border-teal); box-shadow: var(--elev-1), var(--glow-trust), var(--sheen-top); } .pv-ledger-card.keep .pv-line { color: var(--cream); } .pv-ledger-card.keep .pv-line .material-symbols-rounded { color: var(--teal); } .pv-ledger-foot { margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); } .pv-ledger-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-dim); } .pv-ledger-mid .material-symbols-rounded { font-size: 30px; } .pv-ledger-mid span { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } /* ---- Safety showcase (interactive) ------------------------------------- */ .safety-showcase .ss-head { text-align: center; max-width: 660px; margin: 0 auto clamp(40px, 5vw, 60px); } .safety-showcase .ss-head h2 { font-size: var(--t-h1); color: var(--cream); letter-spacing: var(--ls-display); margin-top: 14px; line-height: 1.08; } .ss-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; max-width: 980px; margin: 0 auto; } .ss-stage { display: flex; justify-content: center; } .ss-phone { transform: none; flex: none; } .ss-phone .phone-screen { padding: 0; } .ss-screens { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; } .ss-screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.5s var(--ease-candle), transform 0.5s var(--ease-candle); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; pointer-events: none; } .ss-screen.is-active { opacity: 1; transform: none; pointer-events: auto; } .ss-screen .ss-bg { position: absolute; inset: 0; } .ss-screen .ss-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,13,0.15) 30%, rgba(11,10,13,0.84) 100%); } .ss-icon-float { position: absolute; top: 18px; left: 18px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(11,10,13,0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); z-index: 2; } .ss-icon-float .material-symbols-rounded { color: var(--cream); font-size: 24px; } .ss-toast { position: relative; z-index: 2; background: rgba(20,17,15,0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 16px; padding: 14px 15px; display: flex; gap: 11px; align-items: flex-start; box-shadow: var(--sheen-top); } .ss-toast .material-symbols-rounded { color: var(--teal); font-size: 21px; flex: none; } .ss-toast p { font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--cream); } .ss-list { display: flex; flex-direction: column; } .ss-item { text-align: left; background: none; border: 0; border-top: 1px solid var(--border); padding: 18px 0; cursor: pointer; display: flex; flex-direction: column; width: 100%; } .ss-item:last-child { border-bottom: 1px solid var(--border); } .ss-item-head { display: flex; align-items: center; gap: 14px; } .ss-item .material-symbols-rounded { font-size: 23px; color: var(--ink-muted); transition: color var(--dur-base) var(--ease-candle); flex: none; } .ss-title { font-family: var(--font-display); font-size: clamp(23px, 2.8vw, 31px); font-weight: 600; color: var(--ink-muted); letter-spacing: var(--ls-display); transition: color var(--dur-base) var(--ease-candle); } .ss-desc { display: grid; grid-template-rows: 0fr; opacity: 0; margin-left: 37px; transition: grid-template-rows 0.45s var(--ease-candle), opacity 0.3s var(--ease-candle); } .ss-desc-inner { overflow: hidden; min-height: 0; padding-top: 12px; font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--text-secondary); } .ss-item:hover .ss-title { color: var(--text-secondary); } .ss-item:hover .material-symbols-rounded { color: var(--text-secondary); } .ss-item.is-open .ss-title { color: var(--cream); } .ss-item.is-open .material-symbols-rounded { color: var(--rose); } .ss-item.is-open .ss-desc { grid-template-rows: 1fr; opacity: 1; } /* ---- Video players ------------------------------------------------------ */ .video-band { position: relative; } .video-band .container { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .video-band.flip .video-copy { order: 2; } .video-copy h2 { font-size: var(--t-h2); color: var(--cream); margin: 14px 0 14px; } .video-copy p { font-size: var(--t-web-body); line-height: 1.6; color: var(--text-secondary); } .video-player { position: relative; width: 100%; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--border); box-shadow: var(--elev-2), var(--sheen-top); } .video-player.r-16-9 { aspect-ratio: 16 / 9; } .video-player.r-1-1 { aspect-ratio: 1 / 1; } .video-player.r-9-16 { aspect-ratio: 9 / 16; max-width: 300px; margin: 0 auto; } .video-player video, .video-player img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-ph { position: absolute; inset: 0; display: grid; place-items: center; gap: 14px; text-align: center; background-image: repeating-linear-gradient(135deg, rgba(246,233,219,0.035) 0 12px, transparent 12px 24px); } .video-ph .glow { position: absolute; inset: 0; background: var(--glow-candle); opacity: 0.7; } .video-ph .play { position: relative; width: 76px; height: 76px; border-radius: 999px; display: grid; place-items: center; background: var(--grad-brand); box-shadow: var(--glow-brand); animation: yenn-breathe 3.4s var(--ease-soft) infinite; } .video-ph .play .material-symbols-rounded { font-size: 38px; color: #fff; font-variation-settings: 'FILL' 1; margin-left: 4px; } .video-ph .meta { position: relative; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase; } .video-ratio-tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-dim); background: rgba(11,10,13,0.5); border: 1px solid var(--border); padding: 5px 10px; border-radius: var(--r-pill); backdrop-filter: blur(8px); } /* ---- Full-bleed video band (real-people brand film) -------------------- */ .video-full { position: relative; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .video-full .video-player.r-21-9 { aspect-ratio: 21 / 9; border-radius: 0; border: 0; box-shadow: none; } .video-full .film-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: clamp(28px, 5vw, 56px); background: linear-gradient(0deg, rgba(11,10,13,0.78), transparent); pointer-events: none; } .video-full .film-caption .inner { max-width: var(--container); margin: 0 auto; } .video-full .film-caption h2 { font-size: var(--t-h1); color: var(--cream); letter-spacing: var(--ls-display); max-width: 640px; } .video-full .film-caption p { margin-top: 12px; font-size: var(--t-lead); color: var(--ink-dim); max-width: 520px; } @media (max-width: 720px) { .video-full .video-player.r-21-9 { aspect-ratio: 4 / 5; } } /* ---- FAQ ---------------------------------------------------------------- */ .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--grad-sheen); box-shadow: var(--sheen-top); overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-ui); font-size: 17px; font-weight: 600; color: var(--cream); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .material-symbols-rounded { color: var(--rose); transition: transform var(--dur-base) var(--ease-candle); } .faq-item[open] summary .material-symbols-rounded { transform: rotate(45deg); } .faq-item .faq-body { padding: 0 26px 24px; font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); } /* ---- Closing CTA -------------------------------------------------------- */ .closing { position: relative; overflow: hidden; border-top: 1px solid var(--border); text-align: center; } .closing::before { content: ""; position: absolute; inset: 0; background: var(--glow-candle); pointer-events: none; } .closing .mark { width: 88px; height: 88px; object-fit: contain; margin-bottom: 6px; filter: drop-shadow(0 0 26px rgba(245,130,155,0.34)); } .closing h2 { font-size: var(--t-hero); color: var(--cream); letter-spacing: var(--ls-display); line-height: 1.06; } .closing p { font-size: var(--t-lead); color: var(--text-secondary); max-width: 460px; margin: 18px auto 34px; } /* ---- Footer ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-immersive); } .footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 48px 0 28px; } .footer-top img { height: 30px; object-fit: contain; } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; } .footer-links a { font-family: var(--font-ui); font-size: 13.5px; color: var(--text-muted); } .footer-links a:hover { color: var(--cream); } .footer-fine { padding: 0 0 max(44px, env(safe-area-inset-bottom)); font-size: 12.5px; color: var(--text-muted); text-align: center; line-height: 1.6; } /* ---- Sub-page hero & prose --------------------------------------------- */ .page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); } .page-hero::before { content: ""; position: absolute; inset: 0; background: var(--glow-violet); pointer-events: none; } .page-hero .inner { position: relative; text-align: center; padding: clamp(64px, 9vw, 110px) 0 clamp(48px, 6vw, 72px); } .page-hero h1 { font-size: var(--t-h1); color: var(--cream); letter-spacing: var(--ls-display); margin: 14px 0 16px; } .page-hero p { font-size: var(--t-lead); color: var(--text-secondary); max-width: 600px; margin: 0 auto; } .prose { max-width: 760px; margin: 0 auto; } .prose h2 { font-size: var(--t-h2); color: var(--cream); margin: 48px 0 16px; } .prose h2:first-child { margin-top: 0; } .prose p { font-size: var(--t-web-body); line-height: 1.65; color: var(--text-secondary); margin-bottom: 18px; } .prose .care-quote { border-left: 2px solid var(--rose); padding: 4px 0 4px 22px; margin: 26px 0; font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--cream); } /* ============================================================================ VARIATIONS ============================================================================ */ [data-hero="centered"] .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 40px; } [data-hero="centered"] .hero-copy { max-width: 780px; } [data-hero="centered"] .hero-sub { margin-left: auto; margin-right: auto; } [data-hero="centered"] .hero-actions { justify-content: center; } [data-hero="centered"] .rotate-dots { justify-content: center; } [data-hero="centered"] .hero-h1 { font-size: clamp(40px, 6.5vw, 78px); } [data-hero="centered"] .hero-visual .phone { transform: rotate(0deg); } /* Vibe: editorial — more air, bigger serif, real-people portrait instead of phone */ [data-vibe="editorial"] { --t-web-body: 18px; } [data-vibe="editorial"] .hero-sub { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 27px); font-style: italic; color: var(--ink-dim); line-height: 1.45; } [data-vibe="editorial"] .section { padding: clamp(76px, 10vw, 136px) 0; } [data-vibe="editorial"] .hero-h1 { font-weight: var(--w-medium); } [data-vibe="editorial"] .hero-visual .phone { display: none; } [data-vibe="editorial"] .hero-portrait { display: block; width: 320px; max-width: 100%; } [data-vibe="editorial"] .hero-portrait .video-player.r-4-5 { aspect-ratio: 4 / 5; } [data-vibe="product"] .hero-sub { font-family: var(--font-ui); } /* ============================================================================ RESPONSIVE (mobile-first priority) ============================================================================ */ @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } /* copy leads on mobile; the phone mockup follows so the headline + value prop are above the fold */ .story-row, .video-band .container { grid-template-columns: 1fr !important; gap: 32px; } .story-row.flip .story-text, .video-band.flip .video-copy { order: 0; } .steps-grid { grid-template-columns: 1fr; } .ss-grid { grid-template-columns: 1fr; gap: 36px; max-width: 440px; } .ss-stage { order: -1; } .privacy-statement .ps-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; } .privacy-statement .ps-copy { max-width: 600px; margin: 0 auto; } .privacy-statement .ps-visual { order: -1; } .pv-row { grid-template-columns: 1fr; gap: 32px; } .pv-row.flip .pv-text { order: 0; } .pv-ledger { grid-template-columns: 1fr; gap: 16px; max-width: 460px; } .pv-ledger-mid { flex-direction: row; padding: 4px 0; } .pv-ledger-mid .material-symbols-rounded { transform: rotate(90deg); } } @media (max-width: 640px) { .container, .narrow { padding: 0 20px; } .hero-grid { padding-top: 28px; } .hero-copy { max-width: 100%; } .phone { width: 270px; height: 540px; transform: rotate(0deg); } .video-full .film-caption { padding: 22px 20px; } .footer-top { flex-direction: column; align-items: flex-start; } /* mobile nav drawer */ .site-nav { display: none; } .site-nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; padding: 14px 20px 20px; background: rgba(11,10,13,0.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .site-nav.open a.navlink { padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--border); } .site-nav.open .btn { margin-top: 12px; } .nav-toggle { display: block; } } /* italic gradient-clip headings: pad the clip box so right edges + descenders are not shaved */ h1 .yenn-gradient-text, h2 .yenn-gradient-text, h3 .yenn-gradient-text { display: inline-block; padding: 0 0.14em 0.12em; margin: 0 -0.14em -0.12em; } /* ============================================================================ SAFETY PAGE (editorial, parallel to the privacy page; reuses .pv-* rows) ============================================================================ */ /* abstract gradient avatar — on-brand stand-in, never a real photo */ .sf-avatar { border-radius: 50%; flex: none; box-shadow: var(--sheen-top); } /* visual 01 · vouched in by a real person */ .sf-vouch { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 30px; } .sf-vouch-chain { display: flex; align-items: center; } .sf-vouch-chain .sf-avatar { width: 78px; height: 78px; border: 3px solid var(--surface-2); } .sf-vouch-link { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 -13px; z-index: 2; background: rgba(79,208,176,0.16); border: 1px solid var(--border-teal); color: var(--teal); box-shadow: var(--glow-trust); } .sf-vouch-link .material-symbols-rounded { font-size: 22px; } .sf-vouch .chip { margin-top: 2px; } .sf-vouch-cap { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); text-align: center; } /* visual 02 · silent, total block */ .sf-block { width: 100%; max-width: 384px; display: flex; flex-direction: column; gap: 18px; } .sf-block-row { display: flex; align-items: center; gap: 15px; padding: 4px 2px; } .sf-avatar-sm { width: 54px; height: 54px; } .sf-dim { filter: grayscale(0.75) brightness(0.55); opacity: 0.65; } .sf-block-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; } .sf-block-name { font-family: var(--font-display); font-size: 19px; color: var(--ink-dim); } .sf-block-sub { font-family: var(--font-ui); font-size: 13px; color: var(--ink-muted); } .sf-block-mark { color: var(--rose); font-size: 25px; } /* visual 03 · mutual consent */ .sf-consent { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 18px; padding: 16px; } .sf-consent-photo { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid var(--border); } .sf-consent-img { position: absolute; inset: 0; filter: blur(16px); transform: scale(1.15); } .sf-consent-photo::after { content: ""; position: absolute; inset: 0; background: rgba(11,10,13,0.4); } .sf-consent-lock { position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; z-index: 2; background: rgba(11,10,13,0.5); border: 1px solid var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sf-consent-lock .material-symbols-rounded { color: var(--cream); font-size: 23px; } .sf-consent-rows { display: flex; flex-direction: column; gap: 11px; padding: 0 2px; } .sf-consent-line { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: 14.5px; color: var(--cream); } .sf-toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); position: relative; flex: none; } .sf-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-muted); } .sf-toggle.on { background: var(--grad-brand); } .sf-toggle.on::after { left: 21px; background: #fff; } .sf-consent-note { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); padding: 0 2px; } /* boundaries · who belongs vs. what loses your place (reuses .pv-ledger-card) */ .sf-bounds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 28px); max-width: 920px; margin: clamp(36px, 5vw, 56px) auto 0; } /* care closing */ .sf-care { max-width: 680px; margin: 0 auto; text-align: center; padding: clamp(40px, 5vw, 56px) clamp(28px, 5vw, 52px); } .sf-care-icon { font-size: 42px; color: var(--peach); filter: drop-shadow(0 0 18px rgba(255,178,122,0.42)); } .sf-care h3 { font-size: var(--t-h2); color: var(--cream); margin: 14px 0 14px; line-height: 1.12; } .sf-care p { font-size: var(--t-web-body); line-height: 1.62; color: var(--text-secondary); max-width: 520px; margin: 0 auto; } @media (max-width: 920px) { .sf-bounds { grid-template-columns: 1fr; gap: 16px; max-width: 460px; } }