/* ============================================================================
Shadow Particle / HeyU 3.0 — Design System
Dependency-free. One editorial design language (poetic.com-inspired) in two
palettes: the DEFAULT theme is "ink editorial" (near-black paper, off-white
ink, one indigo accent) used by the HeyU / app pages; body.company remaps
the tokens to the light "paper editorial" twin for the company pages.
========================================================================== */
/* ---------------------------------------------------------------------------
Fonts — self-hosted (latin subset, variable weight files). The site's only
third-party dependency (Google Fonts) was removed 2026-07-14; the woff2
files live in /fonts/ and cover every weight the tokens use.
------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-tight-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------------------------------------------------------------------------
Tokens — ink editorial (dark default)
------------------------------------------------------------------------- */
:root {
/* Surfaces — warm near-black "ink paper" */
--bg: #0a0a0a;
--bg-1: #151514;
--bg-2: #1d1d1b;
--bg-3: #262624;
--surface: rgba(253, 253, 252, 0.05);
--surface-2: rgba(253, 253, 252, 0.09);
--hairline: rgba(253, 253, 252, 0.12);
--hairline-2: rgba(253, 253, 252, 0.24);
/* Brand (from HeyU Accent / Unlimited / Plus) */
--accent: #6b5ef6; /* HeyU indigo — reads on ink; company remaps to the SP blue #1a5cff */
--accent-2: #8b7bff; /* stronger (lighter) on dark */
--violet: #6e5dff; /* Unlimited */
--plus: #00c0e8; /* Plus */
/* Feed action colors (Like / Save / Pass / Rewind) — these mirror the
in-app action buttons; the consumable brand colors below are a
separate pair and deliberately don't have to match them */
--like: #30d158;
--save: #0a84ff;
--pass: #ff453a;
--rewind: #af52de;
/* Consumable brand colors (the Saves / Rewinds packs) */
--saves: #0088ff;
--rewinds: #00c3d0;
/* Text — paper-white ink; mute/faint stay >= 4.5:1 on the ink background */
--text: #fdfdfc;
--text-soft: rgba(253, 253, 252, 0.78);
--text-mute: rgba(253, 253, 252, 0.62);
--text-faint: rgba(253, 253, 252, 0.55);
/* Legacy gradient tokens — collapsed to the single accent */
--grad-brand: linear-gradient(0deg, #6b5ef6, #6b5ef6);
--grad-brand-2: linear-gradient(0deg, #6b5ef6, #6b5ef6);
--grad-text: linear-gradient(0deg, #fdfdfc, #fdfdfc);
/* Effects */
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
--radius-pill: 999px; /* editorial pills are fully round, both themes */
--shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
--shadow-glow: 0 0 0 1px var(--hairline), 0 30px 80px -40px rgba(107, 94, 246, 0.35);
--ring: 0 0 0 3px rgba(139, 123, 255, 0.45);
/* Rhythm — poetic-style: near-full-bleed content with slim side padding
(~30px desktop, 20px mobile) instead of a narrow centered column */
--maxw: 1680px;
--gutter: clamp(1.25rem, 2vw, 1.875rem);
--section-y: clamp(4rem, 9vw, 7.5rem);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* ---------------------------------------------------------------------------
Reset & base
------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Anchored sections land below the fixed header, not underneath it */
[id] { scroll-margin-top: 6.5rem; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.65;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Flat editorial background — no aurora, no grid overlay */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -2;
background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection { background: rgba(139, 123, 255, 0.35); color: #fff; }
/* ---------------------------------------------------------------------------
Typography
------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.display {
font-size: clamp(2.9rem, 7.6vw, 6rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 0.95;
}
.h-section {
font-size: clamp(2.1rem, 4.8vw, 3.4rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.0;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
}
.lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 500; color: var(--text-soft); max-width: 56ch; }
.muted { color: var(--text-mute); }
/* single solid accent — the old gradient text treatments are retired */
.gradient-text,
.accent-text { color: var(--accent-2); }
a.inline { color: var(--accent-2); border-bottom: 1px solid rgba(139, 123, 255, 0.4); }
a.inline:hover { color: var(--text); }
/* ---------------------------------------------------------------------------
Layout primitives
------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: 1rem; }
.section-head.center .lede { margin-inline: auto; }
.stack-sm > * + * { margin-top: 0.75rem; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--hairline), transparent); border: 0; }
/* ---------------------------------------------------------------------------
Buttons
------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.72rem 1.35rem;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 0.98rem;
font-family: inherit;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }
/* Primary pill: solid ink-inverse (paper-white on dark; company flips to black) */
.btn-primary {
background: var(--text);
color: var(--bg);
box-shadow: none;
}
.btn-primary:hover { background: #fff; box-shadow: none; }
.btn-ghost {
background: var(--surface-2);
border-color: transparent;
color: var(--text);
}
.btn-ghost:hover { background: rgba(253, 253, 252, 0.14); border-color: transparent; }
.btn-lg { padding: 0.82rem 1.45rem; font-size: 1.02rem; }
.btn-store { gap: 0.7rem; }
.btn-store small { display: block; font-size: 0.66rem; font-weight: 500; opacity: 0.85; letter-spacing: 0.04em; line-height: 1; }
.btn-store strong { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.15; }
.btn-store .store-label { text-align: left; }
/* App Store CTA — the one accent-filled pill */
.btn-appstore { background: var(--accent); color: #fff; border-color: transparent; box-shadow: none; }
.btn-appstore:hover { background: var(--accent-2); box-shadow: none; }
/* App Store-blue variant (matches the listing tile's Download pill) */
.btn-appstore.btn-blue { background: #007aff; }
.btn-appstore.btn-blue:hover { background: #0071e8; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
/* ---------------------------------------------------------------------------
Badges / chips
------------------------------------------------------------------------- */
.chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-pill);
font-size: 0.82rem;
font-weight: 600;
background: var(--surface);
border: 1px solid var(--hairline);
color: var(--text-soft);
}
.chip-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-2); }
.chip-accent { color: var(--accent-2); background: rgba(107,94,246,0.14); border-color: rgba(107,94,246,0.35); }
/* ---------------------------------------------------------------------------
Header / nav — bold transparent editorial bar. Wordmark + a location
breadcrumb ("Shadow Particle / HeyU", desktop only) on the left; two
dropdown groups (HeyU / Company) + the pill CTA on the right. Gains a
translucent blur once scrolled. On mobile the menu is a full-screen ink
panel that opens with the intro loader's staggered blue veil sweep.
------------------------------------------------------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1000;
display: flex;
justify-content: center;
transition: transform 0.4s var(--ease);
}
.site-header.hide { transform: translateY(-160%); }
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
padding: 1.05rem var(--gutter);
background: transparent;
border: 0;
transition: padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Tighter and translucent once the page has scrolled */
.site-header.scrolled .navbar {
padding-block: 0.65rem;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
box-shadow: inset 0 -1px 0 rgba(253, 253, 252, 0.14);
}
/* Brand — bold ink wordmark, all caps, plus the location breadcrumb */
.brand-group { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.brand {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-display);
font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
text-transform: uppercase;
transition: color 0.18s ease 0.1s;
}
.brand .mark {
width: 25px; height: 25px;
color: currentColor;
flex: none;
}
/* Breadcrumb trail — "you are here", desktop only (hidden below 1024px).
Accent slash separators; ancestor segments are muted links, the current
segment is full ink. Slides in once on load. */
.brand-trail { display: none; }
@media (min-width: 1024px) {
.brand-trail {
display: inline-flex; align-items: baseline; gap: 0.6rem;
font-family: var(--font-display);
font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
white-space: nowrap;
animation: crumb-in 0.6s var(--ease) 0.2s both;
}
.brand-trail .sep { color: var(--accent-2); font-weight: 700; }
.brand-trail a { color: var(--text-mute); transition: color 0.2s; }
.brand-trail a:hover { color: var(--accent-2); }
.brand-trail .here { color: var(--text); }
}
@keyframes crumb-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* Menu container — a flex row of dropdown groups + CTA on desktop; the
full-screen panel on mobile */
.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-item { position: relative; }
/* Group triggers — bold display-font labels with a rotating chevron and the
thin underline indicator (hover / open / current-section) */
.nav-drop-btn {
position: relative;
display: inline-flex; align-items: center; gap: 0.42rem;
padding: 0.55rem 0.95rem;
border: 0; border-radius: var(--radius-pill);
background: transparent;
font-family: var(--font-display);
font-weight: 700; font-size: 0.97rem; letter-spacing: -0.01em;
color: var(--text);
cursor: pointer;
transition: color 0.22s var(--ease);
}
.nav-drop-btn .chev { width: 10px; height: 10px; flex: none; opacity: 0.7; transition: transform 0.28s var(--ease); }
.nav-drop-btn::after {
content: '';
position: absolute;
left: 50%; bottom: 0.28rem;
width: 0; height: 2px;
transform: translateX(-50%);
background: var(--text);
border-radius: 2px;
transition: width 0.28s var(--ease);
}
.nav-drop-btn:hover { color: var(--accent-2); }
.nav-drop-btn:hover::after,
.nav-item.open .nav-drop-btn::after,
.nav-drop-btn.is-current::after { width: 46%; }
.nav-item.open .nav-drop-btn .chev { transform: rotate(180deg); }
/* Mobile-only group label (the triggers collapse away in the panel) */
.nav-group-label { display: none; }
/* Dropdown panels — desktop only. A translucent blurred sheet (not a flat
solid) with an accent bar that draws across its top as it opens — the
intro loader's cursor-bar echo. Items are hairline editorial rows wearing
the site's slash-hover motif (breadcrumb / footer links / doc-toc): the
accent "/" slides in while the row steps aside for it. A quiet
hairline-topped .nav-drop-foot link closes each panel. Row styles target
DIRECT children (.nav-drop > a) so they can't bleed into the foot link. */
@media (min-width: 769px) {
.nav-drop {
position: absolute;
top: calc(100% + 0.55rem); left: 50%;
z-index: 1001;
min-width: 300px;
padding: 0.55rem 0 0;
background: rgba(18, 18, 17, 0.86);
backdrop-filter: blur(18px) saturate(130%);
-webkit-backdrop-filter: blur(18px) saturate(130%);
border: 1px solid var(--hairline);
border-radius: 16px;
box-shadow: var(--shadow);
transform: translateX(-50%) translateY(-10px) scale(0.97);
transform-origin: top center;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.26s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
/* invisible bridge so the pointer can travel trigger -> panel */
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
/* the accent bar draws across the panel top as it opens */
.nav-drop::after {
content: '';
position: absolute; top: 0; left: 1.1rem; right: 1.1rem;
height: 2px;
background: var(--accent-2);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1);
}
.nav-item.open .nav-drop {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
.nav-item.open .nav-drop::after { transform: scaleX(1); transition-delay: 0.08s; }
/* the open trigger holds the hover color while its panel is up */
.nav-item.open .nav-drop-btn { color: var(--accent-2); }
.nav-drop > a {
position: relative;
display: block;
padding: 0.72rem 1.35rem 0.72rem 1.1rem;
transition: padding 0.28s var(--ease);
}
/* hairline between rows — an editorial list, not floating pills */
.nav-drop > a + a { border-top: 1px solid var(--hairline); }
.nav-drop > a strong {
display: block;
font-family: var(--font-display);
font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em;
line-height: 1.35;
color: var(--text);
transition: color 0.2s var(--ease);
}
.nav-drop > a span { display: block; margin-top: 0.14rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-mute); }
/* the slash motif: aligned to the title line; the row indents for it */
.nav-drop > a::before {
content: '/';
position: absolute; left: 1.1rem; top: 0.72rem;
font-family: var(--font-display);
font-weight: 700; font-size: 1.02rem; line-height: 1.35;
color: var(--accent-2);
opacity: 0; transform: translateX(-8px);
transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.nav-drop > a:hover, .nav-drop > a:focus-visible { padding-left: 2.05rem; }
.nav-drop > a:hover::before, .nav-drop > a:focus-visible::before { opacity: 1; transform: none; }
.nav-drop > a:hover strong { color: var(--accent-2); }
.nav-drop > a[aria-current="page"] strong { color: var(--accent-2); }
.nav-drop > a[aria-current="page"] strong::after {
content: '';
display: inline-block;
width: 5px; height: 5px;
margin-left: 0.45rem;
border-radius: 50%;
background: var(--accent-2);
vertical-align: 0.14em;
}
/* quiet footer link (App Store / support) closing the panel */
.nav-drop-foot { margin-top: 0.55rem; padding: 0.15rem 0; border-top: 1px solid var(--hairline); }
.nav-drop-foot a {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
padding: 0.6rem 1.1rem;
font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
color: var(--text-mute);
transition: color 0.2s var(--ease);
}
.nav-drop-foot a::after { content: '\2192'; font-size: 1.05em; line-height: 1; transition: transform 0.25s var(--ease); }
.nav-drop-foot a:hover { color: var(--accent-2); }
.nav-drop-foot a:hover::after { transform: translateX(3px); }
/* content cascades in as the panel opens — the stagger delay (--d) is
scoped to the entrance properties so hover transitions stay instant */
.nav-drop > a, .nav-drop-foot { opacity: 0; transform: translateY(6px); }
.nav-item.open .nav-drop > a {
opacity: 1; transform: none;
transition: opacity 0.3s var(--ease) var(--d, 0s), transform 0.3s var(--ease) var(--d, 0s), padding 0.28s var(--ease);
}
.nav-item.open .nav-drop > a:nth-child(1) { --d: 0.04s; }
.nav-item.open .nav-drop > a:nth-child(2) { --d: 0.08s; }
.nav-item.open .nav-drop > a:nth-child(3) { --d: 0.12s; }
.nav-item.open .nav-drop > a:nth-child(4) { --d: 0.16s; }
.nav-item.open .nav-drop-foot { opacity: 1; transform: none; transition: opacity 0.3s var(--ease) 0.2s, transform 0.3s var(--ease) 0.2s; }
}
/* CTA — compact pill with a nudging arrow */
.nav-cta { margin-left: 0.45rem; padding: 0.55rem 1.1rem; font-size: 0.93rem; font-weight: 700; }
.nav-cta::after { content: '\2192'; font-size: 1.05em; line-height: 1; transition: transform 0.25s var(--ease); }
.nav-cta:hover::after { transform: translateX(3px); }
/* Menu ornaments (mobile only) */
.menu-veils, .menu-meta { display: none; }
/* Borderless — just the three lines on the bar (hover gets a soft fill) */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
background: transparent;
border: 0;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 0.2s;
}
.hamburger:hover { background: var(--surface); }
.hamburger span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s, background 0.18s ease 0.1s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---- Mobile menu — full-screen ink panel, opened by the intro loader's
choreography: three Shadow Particle-blue veils sweep across the screen
(light -> dark, 80 ms apart), the ink panel lands under their cover, then
the grouped links cascade in. ALWAYS ink, on both palettes — same rule as
the intro curtain: the brand beat is one consistent moment. -------------- */
@media (max-width: 768px) {
.hamburger { display: flex; }
/* the full-screen panel lives INSIDE the header, so brand + hamburger
need to stack above it within the header's own context */
.brand-group, .hamburger { position: relative; z-index: 1060; }
.nav-links {
position: fixed; inset: 0;
z-index: 1040;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: calc(env(safe-area-inset-top, 0px) + 6.2rem) clamp(1.5rem, 7vw, 2.5rem) calc(env(safe-area-inset-bottom, 0px) + 1.4rem);
overflow-y: auto;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.25s var(--ease), visibility 0s 0.25s;
}
.nav-links.active { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
/* closing — site.js adds .closing and sweeps the veils back over the
panel (menu-veil-out below); the panel state (.active, menu-open)
flips under their full cover at ~0.38s, then .closing lifts once the
veils have exited. The container must stay visible through it — the
veils are its own children. */
.nav-links.closing { opacity: 1; visibility: visible; pointer-events: none; transition: none; }
/* the ink ground — snaps on while the veils cover the screen */
.nav-links::before {
content: '';
position: fixed; inset: 0;
z-index: 0;
background: #0a0a0a;
opacity: 0;
}
.nav-links.active::before { animation: menu-bg 0.12s linear 0.32s both; }
/* the veil sweep — light leads, dark trails, ink lands last. 0.6s with a
70ms stagger: the last veil clears at ~0.74s, JUST before the content
cascade begins — text must never show mid-sweep. */
.menu-veils { display: block; }
.menu-veils span {
position: fixed; inset: 0;
transform: translateX(103%);
pointer-events: none;
}
.menu-veils span:nth-child(1) { z-index: 6; background: #6e97ff; }
.menu-veils span:nth-child(2) { z-index: 5; background: #1a5cff; }
.menu-veils span:nth-child(3) { z-index: 4; background: #0f3ecc; }
.nav-links.active .menu-veils span { animation: menu-veil 0.6s cubic-bezier(0.7, 0, 0.3, 1) both; }
.nav-links.active .menu-veils span:nth-child(2) { animation-delay: 0.07s; }
.nav-links.active .menu-veils span:nth-child(3) { animation-delay: 0.14s; }
/* the mirrored close sweep — back across, left to right */
.nav-links.closing .menu-veils span { animation: menu-veil-out 0.6s cubic-bezier(0.7, 0, 0.3, 1) both; }
.nav-links.closing .menu-veils span:nth-child(2) { animation-delay: 0.07s; }
.nav-links.closing .menu-veils span:nth-child(3) { animation-delay: 0.14s; }
/* grouped links — eyebrow label over giant display-font links */
.nav-item { position: relative; z-index: 1; padding-block: 1.05rem; }
.nav-item + .nav-item { border-top: 1px solid rgba(253, 253, 252, 0.12); }
.nav-drop-btn { display: none; }
.nav-group-label {
display: block;
margin-bottom: 0.55rem;
font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(253, 253, 252, 0.5);
}
.nav-drop { display: flex; flex-direction: column; }
/* the desktop panels' footer links have no place in the full-screen
menu — the meta row + CTA pill already carry them */
.nav-drop-foot { display: none; }
.nav-drop a {
display: block;
padding: 0.32rem 0;
font-family: var(--font-display);
/* medium, not the display-heading 650 — at this size the heavier cut
read too fat (Marcus, 2026-08-21) */
font-weight: 500; font-size: clamp(1.65rem, 7.5vw, 2.1rem);
letter-spacing: -0.03em; line-height: 1.15;
color: #fdfdfc;
}
.nav-drop a span { display: none; }
.nav-drop a:active strong,
.nav-drop a[aria-current="page"] strong { color: #8b7bff; }
/* CTA — always a paper pill on the ink panel (both palettes; the
body.company selector outguns the theme's black-pill override) */
.nav-links .nav-cta,
body.company .nav-links .nav-cta {
position: relative; z-index: 1;
margin: auto 0 0.9rem;
width: 100%; justify-content: center;
padding: 1rem; font-size: 1.05rem;
background: #fdfdfc; color: #0a0a0a;
}
.nav-links .nav-cta:hover,
body.company .nav-links .nav-cta:hover { background: #fff; }
/* quiet meta row at the very bottom */
.menu-meta {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
font-size: 0.84rem;
color: rgba(253, 253, 252, 0.55);
}
.menu-meta a { color: rgba(253, 253, 252, 0.72); }
.menu-meta a:active { color: #fdfdfc; }
.menu-social { display: flex; gap: 1rem; }
/* content cascades in only once the last veil has cleared (0.74s) — an
earlier start showed half-faded text on the already-uncovered side
of the screen mid-sweep */
.nav-links .nav-item, .nav-links .nav-cta, .nav-links .menu-meta { opacity: 0; }
.nav-links.active .nav-item,
.nav-links.active .nav-cta,
.nav-links.active .menu-meta { animation: menu-item 0.45s var(--ease) both; }
/* NOT nth-of-type: .menu-veils is a div sibling too, so it takes type
slot 1 — the old :nth-of-type(1)/(2) rules matched only the first
item (as slot 2) and left the second with NO delay, flashing its text
in before the veils (the bug Marcus reported) */
.nav-links.active .nav-item { animation-delay: 0.72s; }
.nav-links.active .nav-item + .nav-item { animation-delay: 0.8s; }
.nav-links.active .nav-cta { animation-delay: 0.88s; }
.nav-links.active .menu-meta { animation-delay: 0.94s; }
/* the fixed header rides above the panel while the menu is open, its bar
goes transparent, and brand + hamburger flip to paper (delayed so the
flip happens under the veil cover) */
body.menu-open .site-header { z-index: 1100; }
body.menu-open .site-header.hide { transform: none; }
body.menu-open .navbar,
body.menu-open .site-header.scrolled .navbar {
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.menu-open .brand { color: #fdfdfc; transition-delay: 0.35s; }
body.menu-open .hamburger span { background: #fdfdfc; transition-delay: 0s, 0s, 0.35s; }
body.menu-open .hamburger:hover { background: rgba(253, 253, 252, 0.08); }
/* compact scrolled bar on small screens */
.site-header.scrolled .navbar { padding-block: 0.55rem; }
.site-header.scrolled .brand { font-size: 0.98rem; }
.site-header.scrolled .brand .mark { width: 22px; height: 22px; }
.site-header.scrolled .hamburger { width: 40px; height: 40px; }
.brand .mark, .site-header.scrolled .hamburger { transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.2s; }
.brand { transition: color 0.18s ease 0.1s, font-size 0.3s var(--ease); }
}
@keyframes menu-veil { from { transform: translateX(103%); } to { transform: translateX(-103%); } }
@keyframes menu-veil-out { from { transform: translateX(-103%); } to { transform: translateX(103%); } }
@keyframes menu-bg { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-item { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Reduced motion: no veils, no cascade — a plain fade */
@media (prefers-reduced-motion: reduce) {
.menu-veils { display: none !important; }
.nav-links.active::before { animation: none; opacity: 1; }
.nav-links.active .nav-item,
.nav-links.active .nav-cta,
.nav-links.active .menu-meta { animation: none; opacity: 1; }
.brand-trail { animation: none; }
/* desktop dropdowns appear without the sweep/cascade choreography */
.nav-drop, .nav-drop::after, .nav-drop > a, .nav-drop-foot { transition: none; }
}
/* ---------------------------------------------------------------------------
Hero — a huge left-aligned statement inside generous whitespace.
(The aurora / particles ornaments are retired; any leftover .hero-aurora /
.particles element renders as nothing.)
------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(9rem, 17vw, 13rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero-aurora, .particles { display: none; }
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.hero-copy { max-width: 36rem; }
.hero-copy .display { margin: 1.1rem 0 1.3rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.2rem; color: var(--text-mute); font-size: 0.9rem; }
.hero-meta strong { color: var(--text); }
/* Poetic-style hero tail: a big pause, a small semibold intro line, then a
full-width ink rule leading into the stat cells */
.hero-sub { margin-top: clamp(4rem, 13vw, 11rem); max-width: 31rem; }
.hero-sub p { font-size: clamp(1.05rem, 1.7vw, 1.375rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--text); }
.hero-sub .caps { text-transform: uppercase; }
.hero-rule { margin: 1.9rem 0 0; height: 1px; border: 0; background: var(--text); }
/* stays LEFT-aligned when stacked — editorial idiom on both themes */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-stage { order: -1; }
}
/* ---------------------------------------------------------------------------
App screenshot placeholder — a labelled 9:19.5 box marking where a real
device screenshot will go. Drop an ![]()
inside and it fills the frame;
until then the dashed outline + .media-placeholder label show the slot.
------------------------------------------------------------------------- */
.hero-stage { position: relative; display: grid; place-items: center; }
.shot-frame {
position: relative;
width: clamp(230px, 30vw, 320px);
aspect-ratio: 9 / 19.5;
border-radius: 34px;
border: 1.5px dashed var(--hairline-2);
background: var(--bg-1);
display: grid; place-items: center;
overflow: hidden;
}
.shot-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ---------------------------------------------------------------------------
Cards — flat editorial panels
------------------------------------------------------------------------- */
.card {
position: relative;
background: var(--bg-1);
border: 1px solid transparent;
border-radius: var(--radius);
padding: clamp(1.3rem, 2.5vw, 1.9rem);
transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
overflow: hidden;
}
.card:hover { transform: translateY(-3px); background: var(--bg-2); }
.card-glow::before { display: none; }
.icon-tile {
width: 52px; height: 52px; border-radius: 15px;
display: grid; place-items: center; margin-bottom: 1.1rem;
background: var(--surface); border: 1px solid var(--hairline);
color: var(--accent-2);
}
.icon-tile svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.card p { color: var(--text-mute); font-size: 0.96rem; }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------------------
Feature deep-dive rows (alternating)
------------------------------------------------------------------------- */
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 6vw, 5rem);
align-items: center;
padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.feature-row + .feature-row { border-top: 1px solid var(--hairline); }
.feature-row.flip .feature-media { order: 2; }
@media (max-width: 860px) {
.feature-row { grid-template-columns: 1fr; }
.feature-row.flip .feature-media { order: 0; }
}
.feature-copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0.8rem 0 1rem; }
.feature-list { margin-top: 1.4rem; display: grid; gap: 0.8rem; }
/* ticks render inline so mixed text/ content flows as one line */
.feature-list li { display: block; color: var(--text-soft); }
.feature-list .tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(107, 94, 246, 0.15); color: var(--accent-2); margin-right: 0.55rem; vertical-align: -5px; }
.feature-list .tick svg { width: 13px; height: 13px; }
.feature-media { position: relative; display: grid; place-items: center; }
.media-frame {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
background: var(--bg-1);
border: 1px solid transparent;
display: grid; place-items: center;
overflow: hidden;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--text-faint); }
.media-placeholder svg { width: 44px; height: 44px; }
.media-placeholder span { font-size: 0.8rem; letter-spacing: 0.04em; }
/* ---------------------------------------------------------------------------
Safety band — unboxed; pure typography on the page
------------------------------------------------------------------------- */
.band {
border: 0;
border-radius: 0;
background: none;
padding: 0;
}
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
@media (max-width: 860px) { .safety-grid { grid-template-columns: 1fr; } }
.safety-item { display: flex; gap: 0.9rem; }
.safety-item .icon-tile { margin: 0; flex: none; width: 44px; height: 44px; }
.safety-item h3 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.safety-item p { color: var(--text-mute); font-size: 0.92rem; }
/* ---------------------------------------------------------------------------
Pricing
------------------------------------------------------------------------- */
/* Plan comparison table — features as rows, the three tiers as columns, so
what each plan includes reads across a single line. Real markup
(it is tabular data); token-driven, so it renders on either palette. */
.plan-table-wrap { margin-top: clamp(2rem, 4vw, 2.8rem); }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.plan-table th, .plan-table td { text-align: left; vertical-align: top; }
/* head — one column per tier: name + tagline, nothing else */
.plan-table thead th { padding: 0 0 clamp(1.2rem, 2.5vw, 1.8rem); vertical-align: bottom; }
.plan-corner { width: 30%; min-width: 13rem; }
.plan-table thead .plan-col { width: 23.33%; padding-left: clamp(1rem, 2.2vw, 2rem); }
.plan-name {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 650;
letter-spacing: -0.03em; line-height: 1;
}
.plan-name.plus { color: var(--plus); }
.plan-name.unlimited { color: var(--violet); }
.plan-tagline { color: var(--text-mute); font-size: 0.86rem; font-weight: 400; max-width: 22ch; margin-top: 0.45rem; }
/* body — one hairline row per feature */
.plan-table tbody th, .plan-table tbody td { padding: 0.95rem 0; border-top: 1px solid var(--hairline); }
.plan-table tbody td { padding-left: clamp(1rem, 2.2vw, 2rem); }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: 1px solid var(--hairline); }
.plan-feat { color: var(--text-soft); font-size: 0.93rem; font-weight: 500; padding-right: 1.2rem; }
.plan-feat small { display: block; margin-top: 0.15rem; color: var(--text-faint); font-size: 0.8rem; font-weight: 400; }
.plan-yes { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(107, 94, 246, 0.16); color: var(--accent-2); }
.plan-yes svg { width: 11px; height: 11px; }
/* each tier owns its colour down its column: Default neutral, Plus cyan,
Unlimited the violet base above */
.plan-table .col-default .plan-yes { background: var(--surface-2); color: var(--text-mute); }
.plan-table .col-plus .plan-yes { background: color-mix(in srgb, var(--plus) 18%, transparent); color: var(--plus); }
.plan-table .col-plus .plan-save { color: var(--plus); }
.plan-no { display: inline-block; width: 20px; text-align: center; color: var(--text-faint); }
.plan-val { color: var(--text); font-size: 0.88rem; font-weight: 600; }
.plan-val small { display: block; color: var(--text-faint); font-size: 0.78rem; font-weight: 400; }
/* price rows — every billing period is a row, so the saving is visible
rather than hidden behind a toggle */
.plan-grouplabel {
padding-top: 1.5rem !important; padding-bottom: 0.5rem !important;
color: var(--text-faint); font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
}
.plan-money > small { display: block; margin-top: 0.15rem; color: var(--text-faint); font-size: 0.78rem; }
.plan-money .plan-val { font-size: 1.05rem; }
.plan-table .plan-free { vertical-align: middle; }
.plan-save {
display: inline-block; margin-top: 0.4rem;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent-2);
}
.plan-best {
display: inline-block; margin-left: 0.4rem; vertical-align: 1px;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.16rem 0.45rem; border-radius: var(--radius-pill);
background: rgba(107, 94, 246, 0.16); color: var(--accent-2);
}
/* narrow screens — the table fits in place (no sideways scroll): taglines
drop, the feature column gives up its reserved width, and the type steps
down so three tier columns share the remaining space */
@media (max-width: 700px) {
.plan-corner { width: auto; min-width: 0; }
.plan-table thead .plan-col { width: auto; padding-left: 0.7rem; }
.plan-table tbody td { padding-left: 0.7rem; }
.plan-tagline { display: none; }
.plan-name { font-size: 1.02rem; }
.plan-feat { font-size: 0.85rem; padding-right: 0.7rem; }
.plan-feat small { font-size: 0.72rem; }
.plan-best { display: block; margin: 0.3rem 0 0; width: fit-content; }
}
/* the nowrap value cells set the table's intrinsic minimum — on the
narrowest phones the column padding is what has to give */
@media (max-width: 430px) {
.plan-table thead .plan-col, .plan-table tbody td { padding-left: 0.5rem; }
.plan-feat { padding-right: 0.5rem; }
}
.pricing-fine { text-align: center; margin-top: 1.6rem; color: var(--text-faint); font-size: 0.84rem; }
/* Consumable packs */
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: 1.6rem; }
@media (max-width: 700px) { .packs { grid-template-columns: 1fr; } }
.pack { border: 1px solid transparent; border-radius: var(--radius); padding: 1.4rem 1.6rem; background: var(--bg-1); --pack-tint: var(--accent); }
.pack-saves { --pack-tint: var(--saves); }
.pack-rewinds { --pack-tint: var(--rewinds); }
.pack h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.1rem; }
.pack h3 .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--pack-tint); }
.pack p { color: var(--text-mute); font-size: 0.9rem; margin: 0.7rem 0 0; }
.pack-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.1rem; }
.pack-tier {
display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
padding: 0.6rem 0.9rem; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--hairline);
}
.pack-tier .qty { font-weight: 700; font-size: 0.95rem; }
.pack-tier .qty small { font-weight: 500; color: var(--text-faint); font-size: 0.72rem; }
.pack-tier .cost { color: var(--text-soft); font-size: 0.85rem; font-weight: 600; }
/* ---------------------------------------------------------------------------
FAQ accordion
------------------------------------------------------------------------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline-2); }
.faq-q {
width: 100%; text-align: left; cursor: pointer;
background: transparent; border: 0; color: var(--text);
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em;
padding: 1.5rem 2.5rem 1.5rem 0;
position: relative; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq-q .plus-ic { position: relative; flex: none; width: 20px; height: 20px; }
.faq-q .plus-ic::before, .faq-q .plus-ic::after {
content: ''; position: absolute; inset: 0; margin: auto; background: var(--text);
border-radius: 2px; transition: transform 0.3s var(--ease);
}
.faq-q .plus-ic::before { width: 16px; height: 2px; }
.faq-q .plus-ic::after { width: 2px; height: 16px; }
.faq-item.open .plus-ic::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.faq-a-inner { padding: 0 2.5rem 1.4rem 0; color: var(--text-mute); font-size: 1.02rem; }
/* ---------------------------------------------------------------------------
CTA — unboxed; a huge closing statement with pills
------------------------------------------------------------------------- */
.cta {
position: relative; text-align: center;
background: none;
border: 0;
padding: clamp(2rem, 6vw, 4rem) 0;
}
.cta .display { margin-bottom: 1rem; font-size: clamp(3rem, 8vw, 5.5rem); }
.cta .lede { margin-inline: auto; margin-bottom: 2rem; }
.cta .btn-row { justify-content: center; }
/* ---------------------------------------------------------------------------
Footer — poetic-style full-bleed band. On the HeyU / app pages (default
theme) it's the HeyU-accent indigo band with white text; the company pages
override it back to the ink band with paper text (see body.company below).
Bold column headings, quiet links that dim on hover, a small legal row,
then a giant full-width wordmark over the Monolog-style three-part meta
row: place + live clock + date on the left, back to top in the middle, ©
on the right. Hovering the wordmark tints it: company blue on the company
band, ink on the HeyU band.
------------------------------------------------------------------------- */
.site-footer {
margin-top: var(--section-y);
background: var(--accent);
color: #fff;
padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(1.2rem, 2.4vw, 1.8rem);
overflow: hidden;
}
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.5rem; } }
.footer-col h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 0.9rem; }
/* Footer links share the breadcrumb's slash motif: a leading slash slides
in on hover while the link steps aside for it. */
.footer-col a {
position: relative;
display: block; font-size: 0.95rem; font-weight: 500;
padding: 0.22rem 0; opacity: 0.82; overflow-wrap: anywhere;
transition: opacity 0.22s ease-out, padding-left 0.28s var(--ease);
}
.footer-col a::before {
content: '/';
position: absolute; left: 0;
font-weight: 700;
opacity: 0; transform: translateX(-8px);
transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.footer-col a:hover { opacity: 1; padding-left: 1.05em; }
.footer-col a:hover::before { opacity: 1; transform: none; }
/* the support email breaks only at its (after the @) — anywhere-wrap
would split it mid-word on narrow columns */
.footer-col a[href^="mailto:"] { overflow-wrap: normal; }
/* small legal row */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: clamp(2.4rem, 5vw, 3.5rem); font-size: 0.85rem; font-weight: 500; }
.footer-legal a {
position: relative;
opacity: 0.75;
transition: opacity 0.22s ease-out, padding-left 0.28s var(--ease);
}
.footer-legal a::before {
content: '/';
position: absolute; left: 0;
font-weight: 700;
opacity: 0; transform: translateX(-8px);
transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.footer-legal a:hover { opacity: 1; padding-left: 1.05em; }
.footer-legal a:hover::before { opacity: 1; transform: none; }
/* giant full-width wordmark — site.js rescales it to span the container's
full width on one line (the clamp() below is only the no-JS fallback);
hover shows the brand tint */
.footer-wordmark {
margin-top: clamp(2.2rem, 5vw, 3.6rem);
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.045em;
line-height: 0.82;
white-space: nowrap;
font-size: clamp(2.15rem, 9.9vw, 7.7rem);
user-select: none;
transition: color 0.3s var(--ease);
will-change: transform; /* site.js drifts it during the footer reveal */
}
.footer-wordmark:hover { color: #0a0a0a; }
/* Monolog-style bottom meta row — place + live clock + full date stacked on
the left, back-to-top in the middle, © on the right */
.footer-bottom {
display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
justify-content: space-between; align-items: flex-start;
margin-top: clamp(1.4rem, 2.6vw, 2rem);
font-size: 0.88rem; font-weight: 500;
}
.fb-place { display: grid; gap: 0.18rem; }
.footer-bottom [data-date], .footer-bottom .fb-copy { opacity: 0.78; }
/* the live Stockholm clock (filled by site.js) — tabular digits so the
minute flip doesn't jiggle the line */
.footer-bottom [data-clock] { font-variant-numeric: tabular-nums; }
/* Footer reveal (poetic-style) — the footer sits FIXED behind the page and is
revealed as the content scrolls up off it. site.js enables it by adding
body.footer-reveal and setting body's padding-bottom to the footer height
(skipped when the footer is taller than the viewport — a fixed footer can't
scroll). Without JS the footer stays in normal flow, so nothing is lost. */
body.footer-reveal main { position: relative; z-index: 1; background: var(--bg); }
body.footer-reveal .site-footer {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 0;
margin-top: 0;
}
/* circular social buttons — used on the contact page body */
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline); color: var(--text-soft); transition: color 0.2s, transform 0.2s, border-color 0.2s; }
.footer-social a:hover { color: var(--text); transform: translateY(-3px); border-color: var(--hairline-2); }
/* ---------------------------------------------------------------------------
Scroll reveal
------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
/* ---------------------------------------------------------------------------
Hero load-in — the hero opts OUT of the scroll-reveal system and plays a
one-time choreography instead (headline rises, sub follows, the rule draws
across), timed so it finishes as the covering veils exit. --hero-delay is
resolved per entry context: the intro playing (first page of a session,
neither html attribute set), a veiled page-transition arrival
(data-page-enter), or a plain load (data-intro-seen). data-page-enter
pages also carry data-intro-seen — equal specificity, so keep the
page-enter rule LAST.
------------------------------------------------------------------------- */
:root { --hero-delay: 1.95s; }
html[data-intro-seen] { --hero-delay: 0.1s; }
html[data-page-enter] { --hero-delay: 0.3s; }
.hero .reveal {
opacity: 1; transform: none; transition: none;
animation: hero-in 0.85s var(--ease) var(--hero-delay) both;
}
.hero .reveal[data-delay="1"] { animation-delay: calc(var(--hero-delay) + 0.15s); }
.hero .reveal[data-delay="2"] { animation-delay: calc(var(--hero-delay) + 0.3s); }
.hero .reveal[data-delay="3"] { animation-delay: calc(var(--hero-delay) + 0.45s); }
/* the rule draws across instead of rising */
.hero .hero-rule.reveal { animation-name: hero-rule-in; transform-origin: left center; }
@keyframes hero-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes hero-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ---------------------------------------------------------------------------
Editorial section marker — a bare accent "/" prefixes each .section-head's
eyebrow (the numbered /01 /02 counter was dropped 2026-07-15; .feat-head
has its own eyebrow style and stays unmarked).
------------------------------------------------------------------------- */
/* Short pages must still fill the viewport, so the (reveal-fixed) footer
never dominates the first screen — content always pushes it below the fold */
main { min-height: 100vh; min-height: 100svh; }
.section-head .eyebrow::before {
content: '/';
font-family: var(--font-display);
font-weight: 700;
color: var(--accent-2);
}
body.company .section-head .eyebrow::before { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero .reveal { animation: none; }
.btn:hover, .card:hover { transform: none; }
}
/* ---------------------------------------------------------------------------
Legal / long-form content (guidelines + future legal pages)
------------------------------------------------------------------------- */
.doc { max-width: 760px; margin-inline: auto; padding-top: clamp(7rem, 14vw, 9rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.doc-header { margin-bottom: 2.5rem; }
.doc-header h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.6rem; }
.doc-updated { color: var(--text-faint); font-size: 0.85rem; }
.doc h2 { font-size: 1.4rem; margin: 2.4rem 0 0.8rem; }
.doc h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; color: var(--text); }
.doc p, .doc li { color: var(--text-soft); }
.doc p { margin-bottom: 1rem; }
.doc ul { margin: 0 0 1.2rem 0; display: grid; gap: 0.55rem; }
/* block + absolute dot so inline spans flow without flex-item gaps */
.doc ul li { display: block; position: relative; padding-left: 1.35rem; }
.doc ul li::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
/* tick lists carry their own markers — no doc bullet on top */
.doc ul.feature-list li { display: block; }
.doc ul.feature-list li::before { content: none; }
.doc .callout {
border: 1px solid rgba(255,69,58,0.35);
background: rgba(255,69,58,0.08);
border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.6rem 0;
}
.doc .callout strong { color: #fff; }
.doc a.inline { color: var(--accent-2); border-bottom: 1px solid rgba(139,123,255,0.4); }
.doc a.inline:hover { color: #fff; }
.doc ol { margin: 0 0 1.2rem 1.3rem; display: grid; gap: 0.55rem; color: var(--text-soft); }
.doc ol li { padding-left: 0.2rem; }
.doc blockquote {
border: 1px solid rgba(255,69,58,0.35);
background: rgba(255,69,58,0.08);
border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.6rem 0;
color: var(--text-soft);
}
.doc blockquote strong { color: #fff; }
.doc code { background: var(--surface-2); border: 1px solid var(--hairline); padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.9em; }
.doc hr { margin: 2.2rem 0; }
/* News articles (.doc-news) — editorial extras the legal docs don't get:
a cover band from front-matter `image:`, blockquotes as display pull
quotes instead of the red callout box, a topic label in the meta line,
and a hairline newer/older nav closing the article. */
.doc-cover { margin: 0 0 2.6rem; }
.doc-cover img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.doc-news blockquote {
border: 0; background: none; border-radius: 0;
margin: 2.4rem 0; padding: 0.2rem 0 0.2rem 1.5rem; position: relative;
font-family: var(--font-display);
font-size: clamp(1.35rem, 3.2vw, 1.8rem); font-weight: 600;
letter-spacing: -0.025em; line-height: 1.3; color: var(--text);
}
.doc-news blockquote::before {
content: ''; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem;
width: 3px; background: var(--accent);
}
.doc-news blockquote strong { color: inherit; }
.news-topic { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.news-topic.t-heyu { color: #6b5ef6; }
.news-topic.t-studio { color: var(--accent); }
.post-nav {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
margin-top: 3.2rem; padding-top: 1.8rem; border-top: 1px solid var(--hairline);
}
.post-nav .pn-older { text-align: right; }
@media (max-width: 560px) {
.post-nav { grid-template-columns: 1fr; }
.post-nav .pn-older { text-align: left; }
}
.post-nav .pn-label {
display: block; margin-bottom: 0.45rem;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-faint);
}
.post-nav strong {
font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
letter-spacing: -0.02em; line-height: 1.2;
transition: color 0.25s ease;
}
.post-nav a:hover strong, .post-nav a:focus-visible strong { color: var(--accent); }
/* The "More news" section follows the article directly — the article
provides the breathing room, the section adds none of its own on top. */
.doc-news { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.news-more { padding-top: 0; }
/* All-news pill — nav-cta's nudging-arrow idiom: back arrow on article
pages, forward on the homepage strip; fills with the company accent on
hover (specificity beats body.company .btn-ghost:hover). */
.btn-news::before { content: '\2190'; font-size: 1.05em; line-height: 1; transition: transform 0.25s var(--ease); }
.btn-news.fwd::before { content: none; }
.btn-news.fwd::after { content: '\2192'; font-size: 1.05em; line-height: 1; transition: transform 0.25s var(--ease); }
.btn-news:hover::before { transform: translateX(-3px); }
.btn-news.fwd:hover::after { transform: translateX(3px); }
body.company .btn.btn-news:hover { background: var(--accent); border-color: transparent; color: #fff; }
/* Release-note tags — bullets prefixed [feature]/[fix]/[change]/[removed]
in content/release-notes/*.md render as a small chip before the item
(build-content.mjs adds .rn-list to any list carrying tagged items) */
.doc ul.rn-list li { padding-left: 0; display: flex; align-items: baseline; gap: 0.65rem; }
.doc ul.rn-list li::before { content: none; }
.rn-tag {
flex: none;
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
padding: 0.16rem 0.55rem; border-radius: var(--radius-pill);
border: 1px solid;
}
.rn-feature { color: var(--accent-2); background: rgba(107,94,246,0.14); border-color: rgba(107,94,246,0.35); }
.rn-fix { color: #5dd39e; background: rgba(93,211,158,0.12); border-color: rgba(93,211,158,0.32); }
.rn-change { color: #6e97ff; background: rgba(110,151,255,0.12); border-color: rgba(110,151,255,0.32); }
.rn-removed { color: #ff7a7a; background: rgba(255,122,122,0.12); border-color: rgba(255,122,122,0.3); }
/* Contents — generated by build-legal.mjs for docs with enough sections.
Hairline-topped two-column index; each row carries the accent slash
marker (the doc headings number themselves, so no counter here). */
.doc-toc { margin: 2.4rem 0 3.2rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.doc-toc-label {
display: block;
font-size: 0.76rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-faint);
}
.doc-toc ol { list-style: none; margin: 0.9rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 2.4rem; }
@media (max-width: 640px) { .doc-toc ol { grid-template-columns: 1fr; } }
.doc-toc a {
position: relative;
display: block;
padding: 0.32rem 0 0.32rem 1.15em;
font-size: 0.95rem; font-weight: 500;
color: var(--text-soft);
transition: color 0.2s;
}
.doc-toc a::before {
content: '/';
position: absolute; left: 0;
font-family: var(--font-display); font-weight: 700;
color: var(--accent-2);
opacity: 0.75;
transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.doc-toc a:hover { color: var(--text); }
.doc-toc a:hover::before { opacity: 1; transform: translateX(3px); }
/* ---------------------------------------------------------------------------
Utilities
------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--accent); color: #fff; padding: 0.7rem 1rem; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }
/* ---------------------------------------------------------------------------
Intro — the site-loading animation (poetic.com replica): an ink curtain
with the wordmark fading in while an accent bar sweeps across it and then
blinks like a text cursor; finally the curtain wipes away to the right,
trailed by three staggered Shadow Particle-blue veils (dark → light,
80 ms apart — poetic's exact choreography). The whole timeline is pure
CSS, so it always completes even if JS never runs. A tiny inline
script sets html[data-intro-seen] from the second page of a browser
session onward, so navigating around the site doesn't replay it. The
curtain is ALWAYS ink with the company-blue bar — on both palettes — so
the load moment is one consistent brand beat. Hidden under reduced motion.
------------------------------------------------------------------------- */
.intro {
position: fixed; inset: 0; z-index: 1900;
pointer-events: none;
}
/* the ink curtain carries the lockup and leads the wipe */
.intro-curtain {
position: absolute; inset: 0; z-index: 4;
display: flex; align-items: center; justify-content: center;
background: #0a0a0a;
will-change: transform;
animation: intro-wipe 0.72s cubic-bezier(0.7, 0, 0.3, 1) 1.75s both;
}
/* the accent veils trail the curtain off-screen (darkest sits just behind it) */
.intro-veil {
position: absolute; inset: 0;
will-change: transform;
animation: intro-wipe 0.72s cubic-bezier(0.7, 0, 0.3, 1) both;
}
.intro-veil-1 { z-index: 3; background: #0f3ecc; animation-delay: 1.83s; }
.intro-veil-2 { z-index: 2; background: #1a5cff; animation-delay: 1.91s; }
.intro-veil-3 { z-index: 1; background: #6e97ff; animation-delay: 1.99s; }
.intro-lockup {
position: relative;
display: flex; align-items: center; justify-content: center; gap: 0.65rem;
width: 260px; height: 48px;
color: #fdfdfc;
font-family: var(--font-display);
font-size: 1.24rem; font-weight: 700; letter-spacing: -0.01em;
text-transform: uppercase; white-space: nowrap;
}
/* only the mark + word fade in — the sweeping bar stays at full strength */
.intro-lockup svg, .intro-word { animation: intro-logo 1s linear 0.35s both; }
.intro-lockup svg { width: 27px; height: 27px; flex: none; }
/* the clip is one bar wider than the lockup, so the bar parks just past the
wordmark and blinks there like a cursor */
.intro-clip { position: absolute; top: -14px; bottom: -14px; left: 0; width: 308px; overflow: hidden; }
.intro-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 48px; background: #1a5cff; animation: intro-bar 1s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both; }
@media (max-width: 560px) { .intro-lockup { transform: scale(0.8); } }
@keyframes intro-logo { 0% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } }
@keyframes intro-bar {
0% { opacity: 0; transform: translateX(-48px); }
12% { opacity: 1; }
50% { opacity: 1; transform: translateX(260px); }
78% { opacity: 1; transform: translateX(260px); }
80% { opacity: 0; transform: translateX(260px); }
83% { opacity: 0; transform: translateX(260px); }
85% { opacity: 1; transform: translateX(260px); }
88% { opacity: 1; transform: translateX(260px); }
90% { opacity: 0; transform: translateX(260px); }
93% { opacity: 0; transform: translateX(260px); }
95% { opacity: 1; transform: translateX(260px); }
98% { opacity: 1; transform: translateX(260px); }
100% { opacity: 0; transform: translateX(260px); }
}
@keyframes intro-wipe { from { transform: translateX(0); } to { transform: translateX(100%); } }
html[data-intro-seen] .intro { display: none; }
/* ---------------------------------------------------------------------------
Page transitions — internal navigations get the intro's veil sweep.
Departure: site.js intercepts same-origin link clicks, appends a
.pt-leave overlay whose three veils sweep in from the right (light ->
dark, so the darkest lands on top), then navigates. Arrival: the inline
script sees the sessionStorage flag and stamps
html[data-page-enter], which re-shows the .intro element in a veils-only
form (no curtain, no delay) — the page loads already covered by the dark
veil and the stack wipes off to the right. Reduced motion skips both.
------------------------------------------------------------------------- */
.pt-leave {
position: fixed; inset: 0; z-index: 1900;
pointer-events: none;
}
.pt-leave span {
position: absolute; inset: 0;
transform: translateX(103%);
will-change: transform;
animation: pt-in 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
}
.pt-leave span:nth-child(1) { z-index: 1; background: #6e97ff; }
.pt-leave span:nth-child(2) { z-index: 2; background: #1a5cff; animation-delay: 0.07s; }
.pt-leave span:nth-child(3) { z-index: 3; background: #0f3ecc; animation-delay: 0.14s; }
@keyframes pt-in { from { transform: translateX(103%); } to { transform: none; } }
/* Arrival — veils only, immediately (the intro's own veil order already has
the darkest on top, so it continues seamlessly from the departure cover) */
html[data-page-enter][data-intro-seen] .intro { display: block; }
html[data-page-enter] .intro-curtain { display: none; }
html[data-page-enter] .intro-veil { animation-duration: 0.6s; }
html[data-page-enter] .intro-veil-1 { animation-delay: 0s; }
html[data-page-enter] .intro-veil-2 { animation-delay: 0.08s; }
html[data-page-enter] .intro-veil-3 { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
/* !important: the html[data-page-enter][data-intro-seen] re-show above
outguns a bare class selector */
.intro { display: none !important; }
.pt-leave { display: none; }
}
/* ===========================================================================
Company theme — paper editorial (body.company)
The default theme above is the DARK twin of this one ("ink editorial",
used by the HeyU / app pages); both share one poetic.com-inspired design
language: huge tight Inter Tight headlines, ONE indigo accent, full-round
pills, hairline lists, flat panels, generous whitespace. The company site
(index, about, contact, faq, 404) flips to warm off-white paper with
near-black ink by REMAPPING the shared tokens here — components are
token-driven, so only value-specific overrides follow the remap.
=========================================================================== */
body.company {
/* token remap — paper surfaces, ink text, electric indigo accent */
--bg: #fdfdfc;
--bg-1: #f6f6f3;
--bg-2: #efefeb;
--bg-3: #e7e7e1;
--surface: rgba(10, 10, 10, 0.045);
--surface-2: rgba(10, 10, 10, 0.08);
--hairline: rgba(10, 10, 10, 0.10);
--hairline-2: rgba(10, 10, 10, 0.22);
--accent: #1a5cff; /* Shadow Particle electric blue on paper */
--accent-2: #0f3ecc; /* stronger (darker) on light, unlike the dark theme */
--text: #0a0a0a;
--text-soft: rgba(26, 25, 21, 0.78);
/* mute/faint stay >= 4.5:1 on the paper background (WCAG AA small text) */
--text-mute: rgba(26, 25, 21, 0.66);
--text-faint: rgba(26, 25, 21, 0.62);
/* brand gradients collapse to solids on paper */
--grad-brand: linear-gradient(0deg, #1a5cff, #1a5cff);
--grad-brand-2: linear-gradient(0deg, #1a5cff, #1a5cff);
--grad-text: linear-gradient(0deg, #0a0a0a, #0a0a0a);
--radius-pill: 999px; /* company pills are fully round */
--shadow: 0 24px 60px -28px rgba(10, 10, 10, 0.22);
--shadow-glow: 0 0 0 1px var(--hairline), 0 30px 80px -44px rgba(26, 92, 255, 0.35);
--ring: 0 0 0 3px rgba(26, 92, 255, 0.35);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
}
/* Paper selection + link accents */
body.company ::selection { background: rgba(26, 92, 255, 0.18); color: var(--text); }
body.company .accent-text,
body.company .gradient-text { color: var(--accent); }
body.company a.inline { color: var(--accent); border-bottom: 1px solid rgba(26, 92, 255, 0.35); }
body.company a.inline:hover { color: var(--accent-2); border-bottom-color: rgba(26, 92, 255, 0.7); }
/* Pills: solid ink primary, quiet gray secondary */
body.company .btn-primary { background: var(--text); color: var(--bg); }
body.company .btn-primary:hover { background: #000; }
body.company .btn-ghost { background: rgba(10, 10, 10, 0.07); }
body.company .btn-ghost:hover { background: rgba(10, 10, 10, 0.12); }
body.company .btn-appstore { background: var(--accent); }
body.company .btn-appstore:hover { background: #0f3ecc; }
body.company .chip-dot { background: var(--accent); }
body.company .chip-accent { color: var(--accent); background: rgba(26, 92, 255, 0.08); border-color: rgba(26, 92, 255, 0.25); }
/* Nav on paper: hover + scrolled-blur values differ from the ink default.
(The mobile menu panel needs no override — it is always ink, like the
intro curtain, and its colors are hardcoded for that.) */
body.company .nav-drop-btn:hover { color: var(--accent); }
body.company .site-header.scrolled .navbar {
background: rgba(253, 253, 252, 0.88);
box-shadow: inset 0 -1px 0 rgba(10, 10, 10, 0.08);
}
@media (min-width: 769px) {
body.company .nav-drop { background: rgba(253, 253, 252, 0.9); }
body.company .nav-drop::after { background: var(--accent); }
body.company .nav-drop > a::before { color: var(--accent); }
body.company .nav-item.open .nav-drop-btn { color: var(--accent); }
body.company .nav-drop > a:hover strong,
body.company .nav-drop > a[aria-current="page"] strong { color: var(--accent); }
body.company .nav-drop > a[aria-current="page"] strong::after { background: var(--accent); }
body.company .nav-drop-foot a:hover { color: var(--accent); }
body.company .brand-trail .sep { color: var(--accent); }
body.company .brand-trail a:hover { color: var(--accent); }
}
/* Paper-specific surfaces */
body.company .icon-tile { background: var(--bg); border-color: var(--hairline); color: var(--accent); }
body.company .flagship .shot-frame { width: clamp(200px, 22vw, 272px); }
body.company .flagship .hero-stage::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(48% 42% at 54% 46%, rgba(26, 92, 255, 0.10), transparent 70%);
}
/* Company footer: back to the poetic ink band (paper text), wordmark hovers
to the Shadow Particle blue; company.css layers the ink-monolith voice on
top */
body.company .site-footer { background: var(--text); color: var(--bg); }
body.company .footer-wordmark:hover { color: var(--accent); }
/* ---------------------------------------------------------------------------
HeyU band — the section of the company page that presents HeyU. Full-bleed
ink with HEYU'S indigo accent: it remaps the shared tokens to the dark app
palette, so every token-driven component inside (chips, cap cards, buttons,
shot-frame) renders exactly like the app pages. Scoped to body.company so
the remap can't fight the app pages' own tokens.
------------------------------------------------------------------------- */
body.company .band-heyu {
--bg: #0a0a0a;
--bg-1: #151514;
--bg-2: #1d1d1b;
--bg-3: #262624;
--surface: rgba(253, 253, 252, 0.05);
--surface-2: rgba(253, 253, 252, 0.09);
--hairline: rgba(253, 253, 252, 0.12);
--hairline-2: rgba(253, 253, 252, 0.24);
--accent: #6b5ef6; /* HeyU indigo, not the company blue */
--accent-2: #8b7bff;
--text: #fdfdfc;
--text-soft: rgba(253, 253, 252, 0.78);
--text-mute: rgba(253, 253, 252, 0.62);
--text-faint: rgba(253, 253, 252, 0.55);
background: var(--bg);
color: var(--text);
}
/* value-specific company overrides that would misfire on the dark band */
body.company .band-heyu .accent-text { color: var(--accent-2); }
body.company .band-heyu .btn-primary:hover { background: #fff; }
body.company .band-heyu .icon-tile { background: transparent; }
body.company .band-heyu .flagship .hero-stage::before {
background: radial-gradient(48% 42% at 54% 46%, rgba(107, 94, 246, 0.16), transparent 70%);
}
/* HeyU mentions outside the band keep HeyU's indigo (not the company blue) */
.heyu-accent { color: #6b5ef6; }
/* Paper word-highlight colours (component itself is shared, below).
The lit state must be restated here: the scoped ghost rule out-specifies
the shared `.w.on` rule, so without it words would never resolve to ink. */
body.company [data-words] .w { color: rgba(10, 10, 10, 0.16); }
body.company [data-words] .w.on { color: var(--text); }
body.company [data-words] .w.acc.on { color: var(--accent); }
body.company .statement p span:not(.w) { color: var(--accent); }
body.company .rows-num, body.company .p-num { color: var(--accent); }
/* ===========================================================================
Editorial components — shared by both themes (token-driven)
=========================================================================== */
/* Unboxed statement — huge ink type; key words resolve to the accent.
With [data-words], site.js splits the text into .w spans and reveals them
word by word as the block scrolls through the viewport (poetic-style). */
.statement { position: relative; }
.statement-label {
display: block;
color: var(--text);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 1.4rem;
}
.statement p {
font-family: var(--font-display);
color: var(--text);
font-size: clamp(2rem, 5vw, 3.6rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.06;
max-width: 24ch;
}
/* no-JS fallback: marked words still read in the accent */
.statement p span:not(.w) { color: var(--accent-2); }
/* scroll word-highlight (ghost colour is per-theme; see body.company above) */
[data-words] .w { color: rgba(253, 253, 252, 0.18); transition: color 0.3s linear; }
[data-words] .w.on { color: var(--text); }
[data-words] .w.acc.on { color: var(--accent-2); }
/* Giant stats: big tight number over a tiny label, hairline rule on top */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact {
display: block;
padding: 1.1rem 0 0;
border-top: 1px solid var(--hairline-2);
}
.fact-num {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4.6vw, 3.6rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
}
.fact-label { margin-top: 0.55rem; font-size: 0.9rem; font-weight: 500; color: var(--text-mute); }
/* Editorial hairline list — the poetic "roles" pattern: /N, title, description */
.rows { border-top: 1px solid var(--hairline-2); }
.rows-item {
display: grid;
grid-template-columns: 3.4rem 1fr 1.15fr;
gap: clamp(1rem, 3vw, 2.5rem);
align-items: baseline;
padding: clamp(1.4rem, 3vw, 2rem) 0;
border-bottom: 1px solid var(--hairline);
}
.rows-num { font-size: 0.92rem; font-weight: 600; color: var(--accent-2); }
.rows-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; transition: color 0.2s var(--ease); }
.rows-desc { color: var(--text-mute); font-size: 1rem; }
/* linked rows get a hover/focus affordance */
a.rows-item:hover .rows-title,
a.rows-item:focus-visible .rows-title { color: var(--accent); }
@media (max-width: 720px) {
.rows-item { grid-template-columns: 2.4rem 1fr; row-gap: 0.5rem; }
.rows-desc { grid-column: 2; }
}
/* Capability columns: naked, ink top rule, accent icon — no card box */
.card.cap {
background: transparent;
border: 0;
border-top: 2px solid var(--text);
border-radius: 0;
padding: 1.3rem 0 0;
overflow: visible;
}
.card.cap:hover { transform: none; background: transparent; }
.card.cap .icon-tile {
width: 34px; height: 34px;
margin-bottom: 0.9rem;
background: transparent;
border: 0;
border-radius: 0;
color: var(--accent-2);
}
body.company .card.cap .icon-tile { color: var(--accent); }
.cap .icon-tile svg { width: 28px; height: 28px; }
.cap p { font-size: 0.96rem; }
/* Numbered principles: hairline rows, small accent /N markers */
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--hairline-2); }
@media (max-width: 720px) { .principles { grid-template-columns: 1fr; } }
.principle { display: flex; gap: 1.2rem; padding: 1.7rem 0; border-bottom: 1px solid var(--hairline); }
.p-num { font-size: 0.92rem; font-weight: 600; color: var(--accent-2); min-width: 2.6rem; line-height: 1.6; }
.principle h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.principle p { color: var(--text-mute); font-size: 0.98rem; }
/* ---------------------------------------------------------------------------
Stat cells — poetic's hero stat tiles: dark inverse cells (aspect 400/440),
a giant numeral top-left, the caption pinned bottom-left, and (optionally)
a tiny accent square in the bottom-right corner (.cell-mark). Type scales
with the cell via container-query units.
------------------------------------------------------------------------- */
.stat-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 1000px) { .stat-cells { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-cells { grid-template-columns: 1fr; } }
.stat-cell {
position: relative;
aspect-ratio: 400 / 440;
background: var(--text);
color: var(--bg);
overflow: hidden;
container-type: inline-size;
transition: transform 0.35s var(--ease);
}
/* Whole-cell anchors (the HeyU hero's link cells) lift on hover */
a.stat-cell { display: block; }
a.stat-cell:hover, a.stat-cell:focus-visible { transform: translateY(-4px); }
/* the one solid-accent cell — the primary CTA of a cell row */
.stat-cell.cell-accent { background: var(--accent); color: #fff; }
/* an icon can sit in the numeral slot (e.g. the Apple mark) */
.stat-num svg { display: block; width: 13cqw; height: 13cqw; }
.stat-num {
position: absolute; top: 2.75cqw; left: 3cqw;
font-family: var(--font-display);
font-size: 16cqw; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
}
.stat-label {
position: absolute; bottom: 3.2cqw; left: 3cqw; width: 70cqw;
font-size: 5.6cqw; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em;
}
.stat-cell .cell-mark { position: absolute; right: 0; bottom: 0; width: 5cqw; height: 5cqw; background: var(--accent); }
/* three-cell rows (the 404) — hold 3-up through tablet widths (the base
2-col step would orphan a cell), then straight to one column on phones */
.stat-cells.cells-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .stat-cells.cells-3 { grid-template-columns: 1fr; } }
/* The 404's giant code — display numerals with one accent glyph */
.err-code {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(6.5rem, 24vw, 15rem);
letter-spacing: -0.06em;
line-height: 0.85;
}
.err-code span { color: var(--accent); }
/* Principle cells — the same hero-cell look carrying a /NN marker plus a
bold title over a smaller description in the bottom-left caption */
.principle-cells .stat-label { font-size: 4.6cqw; font-weight: 500; line-height: 1.4; width: 76cqw; }
.principle-cells .stat-label strong {
display: block;
font-family: var(--font-display);
font-size: 8.5cqw; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
margin-bottom: 2.4cqw;
}
/* Rearranged cell anatomy (the HeyU hero + news cells): a bold display
title pinned top-left, an optional centered middle element (.cell-ic),
and the .stat-label caption staying pinned bottom-left */
.stat-cell .cell-title {
position: absolute; top: 2.75cqw; left: 3cqw; right: 3cqw;
font-family: var(--font-display);
font-size: 8.5cqw; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
}
.stat-cell .cell-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.stat-cell .cell-ic svg { display: block; width: 16cqw; height: 16cqw; }
/* HeyU hero link cells wear the bento's Plans-card skin — rounded --bg-1
panels with token ink (the shared .stat-cell stays token-inverse for the
company pages). The accent CTA cell keeps its solid fill. */
.hero-cells .stat-cell { background: var(--bg-1); color: var(--text); border-radius: var(--radius-lg); }
.hero-cells .stat-cell.cell-accent { background: var(--accent); color: #fff; }
.hero-cells a.stat-cell:hover:not(.cell-accent), .hero-cells a.stat-cell:focus-visible:not(.cell-accent) { background: var(--bg-2); }
.hero-cells .cell-ic { color: var(--accent-2); }
.hero-cells .cell-accent .cell-ic { color: #fff; }
.hero-cells .stat-label,
.news-cells .stat-label { font-size: 4.6cqw; font-weight: 500; line-height: 1.4; width: 80cqw; }
/* News cells — flex column so nothing overlaps whatever the title/summary
lengths are: title top, an optional full-width image band filling the
middle (front-matter `image:`; no image leaves calm empty space), and the
date + summary caption pinned to the bottom */
/* min-width: 0 lets the 1fr tracks shrink below an image's intrinsic width
— without it a wide source image blows the grid out of the container.
will-change promotes each cell to its own compositor layer: some Chromium
builds mis-raster a container-type cell sharing a tile with a neighboring
large image (and the cells animate transform on hover anyway). */
.news-cells .stat-cell { display: flex; flex-direction: column; min-width: 0; will-change: transform; }
.news-cells .cell-title { position: static; margin: 2.75cqw 3cqw 0; }
.news-cells .cell-media { flex: 1; min-height: 0; margin: 2.6cqw 0 0; overflow: hidden; }
.news-cells .cell-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-cells .stat-label { position: static; margin: auto 3cqw 3.2cqw; padding-top: 2.6cqw; width: auto; }
.news-cells .cell-media + .stat-label { margin-top: 0; }
.news-cells .cell-date { display: block; font-size: 3.6cqw; font-weight: 500; opacity: 0.55; margin-bottom: 1.8cqw; }
/* All news cells share the same width (one column each). A post with media
(.has-media — an image band or a centered accent icon) keeps the full
cell height; text-only posts hug their content: no fixed aspect, no grid
stretch, caption right under the title instead of pinned to the far
bottom. */
.news-cells .cell-ic { color: var(--accent); }
.news-cells .stat-cell:not(.has-media) { aspect-ratio: auto; align-self: start; }
.news-cells .stat-cell:not(.has-media) .stat-label { margin-top: 0; padding-top: 5cqw; }
/* Topic label above the title — HeyU indigo vs Studio blue, light tints
tuned for the ink cell fill. The index's newest post takes the
solid-accent fill via .cell-accent (same one-column width as every other
cell — hierarchy by color, never by span). */
.news-cells .cell-topic {
margin: 3cqw 3cqw 0;
font-size: 3.1cqw; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.news-cells .cell-topic.t-heyu { color: #8b7bff; }
.news-cells .cell-topic.t-studio { color: #6e97ff; }
.news-cells .cell-topic + .cell-title { margin-top: 1cqw; }
.news-cells .cell-accent .cell-topic { color: rgba(255, 255, 255, 0.85); }
.news-cells .cell-accent .cell-ic { color: #fff; }
/* ---------------------------------------------------------------------------
Feature cells — poetic's Features section: a centered dot-eyebrow + heading
(give the h2 [data-words] for the scroll word-reveal), then a 3-up grid of
dark inverse cells with tight padding: title top-left, /N top-right, an
accent square glued to the top-right corner, an illustration area centered,
and a small description at the bottom.
------------------------------------------------------------------------- */
.feat-head { max-width: 680px; margin: 0 auto clamp(2.6rem, 6vw, 4.2rem); display: grid; justify-items: center; gap: 1.2rem; text-align: center; }
.feat-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.feat-eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.feat-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.0; }
.feat-sub { color: var(--text-mute); font-size: 0.98rem; max-width: 44ch; }
.feat-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 960px) { .feat-cells { grid-template-columns: 1fr; } }
.feat-cell {
position: relative;
display: flex; flex-direction: column; gap: 1.6rem;
min-height: clamp(420px, 40vw, 520px);
background: var(--text);
color: var(--bg);
padding: 10px;
overflow: hidden;
}
.feat-cell::after { /* the accent square glued to the top-right corner */
content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: var(--accent);
}
.feat-cell-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 8px 8px 0 10px; }
.feat-cell-top h3 { max-width: 78%; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
.feat-num { margin-top: 1.7rem; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.feat-fig { flex: 1; display: grid; place-items: center; padding: 1.2rem; }
.feat-desc { padding: 0 10px 10px; font-size: 0.94rem; font-weight: 500; line-height: 1.5; max-width: 36ch; }
/* Illustration panels — paper cards with abstract skeleton UI (CSS only) */
.fig-panel { background: #fdfdfc; color: #0a0a0a; border-radius: 22px; box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.55); }
.fig-phone { width: clamp(130px, 12vw, 160px); aspect-ratio: 9 / 18; border-radius: 26px; padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.fig-phone .sk-block { flex: 1; border-radius: 14px; background: rgba(10, 10, 10, 0.07); }
.fig-phone .sk-tabbar { align-self: center; display: flex; gap: 7px; padding: 7px 12px; border-radius: 99px; background: rgba(10, 10, 10, 0.08); }
.fig-phone .sk-tabbar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(10, 10, 10, 0.28); }
.fig-phone .sk-tabbar i.on { background: var(--accent); }
.fig-stack { width: min(100%, 290px); display: grid; gap: 9px; }
.fig-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; }
.fig-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.fig-row .sk-bar { height: 8px; border-radius: 99px; background: rgba(10, 10, 10, 0.14); flex: 1; }
.fig-row .sk-bar.short { flex: 0 0 26%; background: rgba(10, 10, 10, 0.08); }
.fig-type { width: min(100%, 250px); padding: 1.6rem 1.5rem 1.3rem; display: grid; gap: 1rem; justify-items: start; }
.fig-type .aa { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.fig-type .swatches { display: flex; gap: 8px; }
.fig-type .swatches i { width: 22px; height: 22px; border-radius: 50%; }
/* Skeleton bars usable inside any fig panel */
.sk-bar { height: 8px; border-radius: 99px; background: rgba(10, 10, 10, 0.14); }
.sk-bar.w60 { width: 60%; }
.sk-bar.w80 { width: 80%; }
/* App action legend (Like / Save / Pass / Rewind) used in the HeyU showcase */
.action-legend { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; }
.action-legend span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.9rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--hairline); font-weight: 600; font-size: 0.88rem; }
.action-legend b { font-size: 1.05rem; line-height: 1; color: var(--accent); }
/* the app's real feed action colors, in legend order (Like/Save/Pass/Rewind) */
.action-legend span:nth-child(1) b { color: var(--like); }
.action-legend span:nth-child(2) b { color: var(--save); }
.action-legend span:nth-child(3) b { color: var(--pass); }
.action-legend span:nth-child(4) b { color: var(--rewind); }
/* ---------------------------------------------------------------------------
App-page extras: opacity-only reveal (pairs with JS parallax), the bento
grid, and the download CTA app-icon.
------------------------------------------------------------------------- */
/* Opacity-only reveal so a JS parallax transform can own `transform` */
.reveal-fade { opacity: 0; transition: opacity 0.7s var(--ease); }
.reveal-fade.in { opacity: 1; }
[data-parallax], [data-parallax-x] { will-change: transform; }
/* ---------------------------------------------------------------------------
Bento — reusable, composable grid of varied-size tiles. Used across the
site (Why HeyU, What we do, ...). Compose with:
.bento the grid (4-col, collapses responsively)
.span-2 / .span-3 / .span-4 widen a tile (columns)
.tall / .tall-3 heighten a tile (rows)
.bento-tile base tile; variants .tile-gradient /
.tile-accent; add .lead for a big heading
.tile-ic .tile-pill .tile-stat .tile-foot (push content to bottom)
Tiles are flat, token-driven panels: dark on app pages, paper on company
pages. .tile-gradient is the single solid-accent filled tile.
------------------------------------------------------------------------- */
.bento {
/* One shared column measure keeps EVERY tile's aspect ratio constant at
any viewport: rows are sized from the real column width, so a 1×1 cell
is always 400/440 (the company stat-cell ratio), a tall is 400/~900,
a span-2 is ~820/440 — at 4-up and at 2-up alike. minmax(…, auto) is
the safety valve: a row only grows if its content would clip. */
--bento-gap: clamp(0.85rem, 1.8vw, 1.35rem);
--bento-col: calc((min(100vw, var(--maxw)) - 2 * var(--gutter) - 3 * var(--bento-gap)) / 4);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(calc(var(--bento-col) * 1.1), auto);
gap: var(--bento-gap);
grid-auto-flow: dense;
}
.bento .span-2 { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .tall { grid-row: span 2; }
.bento .tall-3 { grid-row: span 3; }
@media (max-width: 1080px) {
.bento { --bento-col: calc((min(100vw, var(--maxw)) - 2 * var(--gutter) - var(--bento-gap)) / 2); grid-template-columns: repeat(2, 1fr); }
.bento .span-2, .bento .span-3, .bento .span-4 { grid-column: span 2; }
}
/* Phones collapse to ONE full-width column (poetic's mobile treatment) so the
1×1 cell keeps its 400/440 ratio at every size instead of squeezing text
into half-width cells. */
@media (max-width: 560px) {
/* Every tile is full width here, so its SHAPE is carried by aspect-ratio
rather than a fixed row height: a wide 2×1 stays wide (no tall empty
gap under sparse content), a 1×2 stays portrait, and a 2×2 reads as a
1×1 square. Rows are auto — one tile per row, sized by its own ratio —
so a tile whose content needs more room still grows past its ratio
instead of clipping. Ratios mirror the desktop grid (gap included):
1 col ≈ 400, 2 cols ≈ 820; 1 row ≈ 440, 2 rows ≈ 900, 3 rows ≈ 1360. */
.bento { --bento-col: calc(min(100vw, var(--maxw)) - 2 * var(--gutter)); grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0.7rem; }
.bento .span-2, .bento .span-3, .bento .span-4 { grid-column: span 1; }
.bento .tall, .bento .tall-3 { grid-row: span 1; }
/* Shape via min-height, NOT aspect-ratio: .bento-tile is overflow:hidden,
which collapses a grid item's automatic minimum to 0, so a ratio would
silently CLIP a content-heavy tile. A floor lets the tile grow instead.
Multipliers are the desktop height÷width of each shape (gaps included):
1×1 1.1, 2×1 0.535, 1×2 2.255, 2×2 1.097, 1×3 3.411, 2×3 1.66. */
.bento-tile { min-height: calc(var(--bento-col) * 1.1); padding: 1.05rem; gap: 0.6rem; }
.bento .span-2, .bento .span-3, .bento .span-4 { min-height: calc(var(--bento-col) * 0.535); }
.bento .tall { min-height: calc(var(--bento-col) * 2.255); }
.bento .tall-3 { min-height: calc(var(--bento-col) * 3.411); }
.bento .span-2.tall, .bento .span-3.tall, .bento .span-4.tall { min-height: calc(var(--bento-col) * 1.097); }
.bento .span-2.tall-3, .bento .span-3.tall-3, .bento .span-4.tall-3 { min-height: calc(var(--bento-col) * 1.66); }
/* Art sized for a full-height tile has to shrink inside a wide one. */
.bento .span-2:not(.tall) .tile-illust { max-width: 44%; max-height: calc(var(--bento-col) * 0.20); margin-bottom: 0.35rem; }
.bento .span-2:not(.tall) .tile-ic.lg { width: 52px; height: 52px; }
.bento .span-2:not(.tall) .tile-ic.lg svg { width: 34px; height: 34px; }
.bento-tile h3 { font-size: 1.02rem; }
.bento-tile p { font-size: 0.88rem; }
.tile-ic { width: 40px; height: 40px; }
.tile-ic svg { width: 26px; height: 26px; }
.tile-ic.lg { width: 84px; height: 84px; }
.tile-app-icon { width: 104px; }
.tile-chips > span { font-size: 0.74rem; padding: 0.26rem 0.55rem; }
}
/* Tiles wear the card skin the pricing plans used before they became rows:
rounded --radius-lg corners on a flat --bg-1 panel with token ink. Inner
chips/pills/placeholders draw on the shared surface/hairline/accent-2
tokens, so a bento renders correctly on either palette. */
.bento-tile {
position: relative; display: flex; flex-direction: column; gap: 0.85rem;
border: 0; border-radius: var(--radius-lg);
background: var(--bg-1);
color: var(--text);
padding: clamp(1.1rem, 2vw, 1.6rem); overflow: hidden;
transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
/* Static tiles do NOT lift — the hover lift is reserved for a.bento-tile
links (see "Linked bento tiles" below) so hover feedback means clickable */
.bento-tile h3 { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.2; transition: color 0.2s var(--ease); }
.bento-tile p { color: var(--text-mute); font-size: 0.96rem; line-height: 1.55; }
.bento-tile.lead h3 { font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -0.03em; line-height: 1.07; }
.tile-foot { margin-top: auto; }
/* Tile icons float free — no chip box, no background/border: bold strokes
with a layered drop-shadow for lift. The .tile-ic element remains purely
a layout/centering box. */
.tile-ic { width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent-2); flex: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); }
.tile-ic svg { width: 32px; height: 32px; stroke-width: 2.4; }
/* Hero-scale icon — .tile-ic.lg fills a tile's empty middle with a large
centered floating icon (above the .tile-foot text, reference-style).
margin:auto self-centers it on both axes inside the flex column, so the
markup stays icon → foot with no wrappers. Variants (.tile-gradient /
.tile-light) recolor only; geometry and shadow come from here. */
.tile-ic.lg { width: clamp(88px, 9.5vw, 118px); height: clamp(88px, 9.5vw, 118px); margin: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
.tile-ic.lg svg { width: 62%; height: 62%; stroke-width: 2.2; }
/* Real app-icon artwork in tiles (HeyU icon, App Store badge). The PNGs
carry their own corners and shadows — render as-is, never in a .tile-ic
chip. margin:auto centers like .tile-ic.lg; override to 0 inside
already-centered flex tiles. */
.tile-app-icon { display: block; margin: auto; width: clamp(108px, 12vw, 150px); height: auto; }
.tile-pill { align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.32rem 0.7rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid transparent; color: var(--text-soft); }
.tile-stat { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tile-stat span { display: block; font-size: 0.9rem; font-weight: 500; color: var(--text-mute); letter-spacing: 0; margin-top: 0.45rem; }
/* Solid accent tile (the one filled tile per composition) */
.tile-gradient {
background: var(--accent);
color: #fff; border-color: transparent;
box-shadow: none;
}
.tile-gradient:hover { background: var(--accent); border-color: transparent; }
.tile-gradient h3, .tile-gradient .tile-stat { color: #fff; }
.tile-gradient p { color: #fff; }
.tile-gradient .tile-ic { color: #fff; }
.tile-gradient .tile-pill { background: rgba(0, 0, 0, 0.22); border-color: transparent; color: #fff; }
.tile-accent { background: var(--bg-1); box-shadow: inset 0 0 0 1px rgba(107, 94, 246, 0.45); }
.tile-accent .tile-stat { color: var(--accent-2); }
/* Light tile — pale lavender with dark text; pops on the dark page */
.tile-light { background: linear-gradient(155deg, #efeefe 0%, #e4dffb 100%); color: #16131f; border-color: transparent; }
a.bento-tile.tile-light:hover { background: linear-gradient(155deg, #f4f3ff 0%, #e9e4fc 100%); border-color: transparent; }
.tile-light h3 { color: #16131f; }
.tile-light p { color: rgba(22, 19, 31, 0.66); }
.tile-light .tile-ic { color: var(--accent); }
.tile-light .tile-pill { background: rgba(107, 94, 246, 0.12); border-color: rgba(107, 94, 246, 0.25); color: var(--accent); }
.tile-light .tile-stat { color: var(--accent); }
.tile-light .tile-chips > span { background: rgba(107, 94, 246, 0.1); border-color: rgba(107, 94, 246, 0.22); color: #16131f; }
/* Media tile — fills with an ![]()
, or shows a labelled placeholder */
.tile-media { padding: 0; }
.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
/* Isolated device renders keep the whole device: contain, never cover (cover
slices the bezels). Their transparent margins vanish on the tile fill. */
.tile-media img.fit { object-fit: contain; }
.tile-media .media-ph { width: 100%; height: 100%; min-height: 190px; display: grid; place-content: center; justify-items: center; gap: 0.55rem; color: var(--text-faint);
background: radial-gradient(120% 90% at 0% 0%, rgba(107, 94, 246, 0.14), transparent 55%), var(--surface); }
.tile-media .media-ph svg { width: 40px; height: 40px; }
.tile-media .media-ph span { font-size: 0.8rem; letter-spacing: 0.04em; }
/* Device tile — a bento's product-shot centerpiece. Takes an ISOLATED,
angled device render (transparent PNG in /media/heyu/), standing on the
solid accent fill: bottom-anchored, centered, and cropped a little below
the tile edge so the phone reads grounded rather than pasted on. This IS
the accent-filled tile of its composition — don't pair it with a
.tile-gradient in the same grid. NOT a screenshot slot: flat screenshots
keep going into .tile-media; this takes the framed device itself. An
optional .tile-pill pins top-left in white tints. */
.tile-device { background: var(--accent); padding: 0; }
.tile-device::before { /* soft lift behind the device */ content: ''; position: absolute; left: 50%; bottom: -14%; width: 96%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 62%); }
.tile-device img { /* explicit width — an abs-positioned replaced element ignores the right inset and collapses to its intrinsic ratio, which would left-pin the render */ position: absolute; left: 5%; bottom: 7%; width: 92%; height: 104%; object-fit: contain; object-position: center bottom; z-index: 1; filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.38)); }
.tile-device .tile-pill { position: absolute; top: clamp(1.1rem, 2vw, 1.6rem); left: clamp(1.1rem, 2vw, 1.6rem); z-index: 2; background: rgba(0, 0, 0, 0.22); border-color: transparent; color: #fff; }
/* Variant for renders that are cut flush at their own bottom edge (e.g. the
in-hand shot): pin the cut edge to the tile bottom — the base 7% lift would
float it and expose a hard horizontal cut. Shadow is baked into the art. */
.tile-device.device-hand img { left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; filter: none; }
/* Floating illustration artwork (transparent PNG, shadow baked in) in the
tile's empty space above .tile-foot — the img sibling of .tile-ic.lg.
Sits low (auto top margin) so it hovers just above the text. Heights are
capped in --bento-col units (the measure rows derive from), so the artwork
can never grow its row past the uniform tile height. */
.tile-illust { position: relative; z-index: 1; margin: auto auto 0.9rem; max-width: 72%; max-height: calc(var(--bento-col) * 0.36); object-fit: contain; }
.tile-illust.sm { max-height: calc(var(--bento-col) * 0.24); } /* tiles already dense with content (stat + button) */
.tile-illust.md { max-height: calc(var(--bento-col) * 0.46); } /* roomier 1×1 icon */
/* Side-by-side wide tile: art left, copy right (e.g. Feed filters). */
.tile-row { flex-direction: row; align-items: center; gap: clamp(1rem, 2.2vw, 1.8rem); }
.tile-row > img { flex: none; width: clamp(96px, 32%, 176px); height: auto; }
.tile-row .row-copy { min-width: 0; }
.tile-row .row-copy h3 { margin-bottom: 0.35rem; }
.tile-row.row-lg > img { width: clamp(120px, 40%, 230px); } /* art-forward variant */
.tile-illust.lg { max-width: 86%; max-height: calc(var(--bento-col) * 0.58); }
.tile-illust.xl { max-width: 88%; max-height: calc(var(--bento-col) * 1.3); } /* 2-row (tall) tiles only */
.tile-illust.wide { max-width: 94%; max-height: calc(var(--bento-col) * 0.46); } /* strip art: chip rows, action rows */
.tile-illust.big { max-width: 96%; max-height: calc(var(--bento-col) * 0.52); } /* a wide tile's dominant art, text tucked below. NOT named "hero" — bare .hero is the page hero section, and a shared class name would drown the img in its padding-block */
/* On phones a spanning tall tile collapses to a single square row (see the
1-col bento block), so xl artwork has one row's worth of space, not two.
Must sit AFTER the base rule — equal specificity, later wins. */
@media (max-width: 560px) { .tile-illust.xl { max-width: 62%; max-height: calc(var(--bento-col) * 0.28); margin-bottom: 0.5rem; } }
/* Background artwork — art that fills the tile behind the copy, top-anchored
and CONTAINed so nothing is cropped at any tile size. DARK tiles only: the
.tile-foot copy stays light, so the art must fade to the tile's own ground
(#151514) where the text sits — matched art leaves no visible edge, which
is what makes the top-anchored band read as a real background. */
.tile-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; z-index: 0; }
/* Scrim: invisible where the art has already faded to the tile ground, and
the backstop at small sizes, where the copy rides higher up the art. */
.tile-bg::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(transparent 36%, rgba(10, 10, 10, 0.55) 66%, rgba(10, 10, 10, 0.9)); }
.tile-bg > *:not(img) { position: relative; z-index: 1; }
.tile-bg .tile-foot h3 { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.tile-bg .tile-foot p { color: rgba(253, 253, 252, 0.72); }
/* Scrim-less sibling of .tile-bg — for art whose baked ground already matches
its tile's own fill (the /04 triptych fades into dark / accent / lavender),
where the dark scrim would stain the match. Works on any tile color. */
.tile-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; z-index: 0; }
.tile-art > *:not(img) { position: relative; z-index: 1; }
/* Home-screen render — full-bleed artwork that exits the tile's bottom-right
corner, so it pins there and crops on the other sides. */
.tile-homescreen { padding: 0; }
.tile-homescreen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
/* App Store listing row — icon, name / subtitle / price, blue Download pill.
Meant for a light whole-tile link (a.bento-tile.tile-light.tile-appstore);
the pill is a span (never nest a real button in a link tile). */
.tile-appstore { flex-direction: row; align-items: center; align-content: center; flex-wrap: wrap; gap: clamp(0.9rem, 2vw, 1.4rem); }
.tile-appstore .as-icon { width: clamp(104px, 32%, 184px); height: auto; flex: none; }
.tile-appstore .as-meta { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 12ch; min-width: 0; }
.tile-appstore .as-meta strong { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.tile-appstore .as-sub { font-size: 0.95rem; color: rgba(22, 19, 31, 0.66); }
.tile-appstore .as-price { font-size: 0.8rem; font-weight: 500; color: rgba(22, 19, 31, 0.45); }
.tile-appstore .as-get { align-self: flex-start; margin-top: 0.55rem; background: #007aff; color: #fff; font-weight: 700; font-size: 0.95rem; padding: 0.5rem 1.5rem; border-radius: var(--radius-pill); transition: background 0.25s var(--ease); }
.tile-appstore:hover .as-get, .tile-appstore:focus-visible .as-get { background: #0071e8; }
/* Phone collapse (1-col bento): icon stacks on top of the listing text. */
@media (max-width: 560px) {
.tile-appstore { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 1.1rem; }
.tile-appstore .as-meta { flex: none; }
}
/* Trend pill (+X%) and inline chip cluster for stat / tag tiles */
.tile-trend { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; color: var(--like); background: rgba(48, 209, 88, 0.14); border: 1px solid rgba(48, 209, 88, 0.3); padding: 0.18rem 0.55rem; border-radius: var(--radius-pill); }
.tile-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tile-chips > span { font-size: 0.8rem; padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--hairline); }
/* Glow treatment — a soft indigo corner glow + a solid accent icon chip.
(Tiles are token-driven, so both themes render them correctly.) */
.tile-glow::after { content: ''; position: absolute; top: -28%; right: -16%; width: 66%; height: 66%; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, var(--glow, rgba(107, 94, 246, 0.22)), transparent 70%); }
.tile-glow > * { position: relative; z-index: 1; }
/* Caption overlay for image/media tiles (sits above the photo) */
.tile-media .tile-cap {
position: absolute; inset: auto 0 0 0; z-index: 2;
/* Tall, eased fade — starts well above the copy so device renders dim
gradually into the caption instead of hitting a hard gradient edge. */
padding: 4.5rem 1.2rem 1.15rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0.62) 64%, rgba(0, 0, 0, 0.82));
font-family: var(--font-display); font-weight: 650; font-size: 1.08rem; letter-spacing: -0.02em;
color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.tile-media .tile-cap small { display: block; font-family: var(--font); font-weight: 500; font-size: 0.82rem; letter-spacing: 0; line-height: 1.45; color: rgba(255, 255, 255, 0.8); margin-top: 0.2rem; }
/* Chips on the solid-accent tile (feature bentos) — white tints for legibility */
.tile-gradient .tile-chips > span { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
/* ---------------------------------------------------------------------------
Linked bento tiles — whole-tile anchors (a.bento-tile). Only real links
play the lift/whiten hover, so hover feedback means "clickable". Each link
tile carries a .tile-cue label pinned top-right wearing the site's slash +
nudging-arrow motif; the title tints to the accent on hover/focus. Keep
the .tile-cue LAST in the anchor's DOM so the h3 leads the accessible
name, and mark it aria-hidden (the cue is a visual affordance only).
------------------------------------------------------------------------- */
a.bento-tile:hover { transform: translateY(-3px); background: var(--bg-2); }
a.bento-tile:focus-visible { outline: none; box-shadow: var(--ring); }
a.bento-tile:hover h3, a.bento-tile:focus-visible h3 { color: var(--accent-2); }
.tile-cue {
position: absolute; top: clamp(1.1rem, 2vw, 1.6rem); right: clamp(1.1rem, 2vw, 1.6rem);
z-index: 2;
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent-2);
}
.tile-cue::before { content: '/'; opacity: 0; transform: translateX(-8px); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }
.tile-cue::after { content: '\2192'; font-size: 1.1em; line-height: 1; transition: transform 0.25s var(--ease); }
a.bento-tile:hover .tile-cue::before, a.bento-tile:focus-visible .tile-cue::before { opacity: 1; transform: none; }
a.bento-tile:hover .tile-cue::after, a.bento-tile:focus-visible .tile-cue::after { transform: translateX(3px); }
/* ---------------------------------------------------------------------------
Tile figures — CSS-only abstract app skeletons inside bento tiles (the
homepage .fig-panel idiom adapted to the token-inverse tile fill). Tints
derive from currentColor / the accent so they stay legible if a bento ever
lands on the other palette. Markup contract:
…
with the tile's text in .tile-foot. Entrance animations key on
.bento-tile.reveal.in (per-tile reveals) and only run under
prefers-reduced-motion: no-preference.
------------------------------------------------------------------------- */
.tile-fig { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0.4rem 0; }
.tile-fig .sk-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); }
.tile-fig .a-like { background: var(--like); }
.tile-fig .a-save { background: var(--save); }
.tile-fig .a-pass { background: var(--pass); }
/* Feed profile card with the real action colors (the deferred-decision tile) */
.fig-card { width: min(58%, 210px); padding: 9px; border-radius: 18px; background: color-mix(in srgb, currentColor 5%, transparent); border: 1px solid color-mix(in srgb, currentColor 11%, transparent); display: flex; flex-direction: column; gap: 8px; }
.fig-card .sk-photo { aspect-ratio: 5 / 3; border-radius: 12px; background: color-mix(in srgb, currentColor 9%, transparent); }
.fig-card .sk-chips { display: flex; gap: 5px; }
.fig-card .sk-chips i { width: 34px; height: 13px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fig-card .sk-actions { display: flex; justify-content: center; gap: 12px; margin-top: 2px; }
.fig-card .sk-actions i { width: 28px; height: 28px; font-style: normal; font-size: 0.72rem; color: #fff; border-radius: 50%; display: grid; place-items: center; }
/* Nearby radar — rings + accent "you" dot; one 3-cycle ping on reveal */
.fig-radar { position: relative; width: min(46%, 180px); aspect-ratio: 1; }
.fig-radar .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.fig-radar .ring:nth-child(2) { inset: 17%; }
.fig-radar .ring:nth-child(3) { inset: 34%; }
.fig-radar .dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, currentColor 38%, transparent); }
.fig-radar .dot.me { width: 15px; height: 15px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
/* Feed-filter sliders — thumb position per slider via inline --w */
.fig-filters { width: min(72%, 250px); display: grid; gap: 18px; }
.fig-filters .sk-slider { position: relative; height: 4px; border-radius: 99px; background: color-mix(in srgb, currentColor 12%, transparent); }
.fig-filters .sk-slider::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 60%); border-radius: 99px; background: var(--accent); }
.fig-filters .sk-slider::after { content: ''; position: absolute; top: 50%; left: var(--w, 60%); width: 15px; height: 15px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
/* Rewind — a ghost card behind the front card + accent badge */
.fig-rewind { position: relative; width: min(52%, 150px); }
.fig-rewind .sk-card { aspect-ratio: 9 / 13; border-radius: 16px; background: color-mix(in srgb, currentColor 6%, transparent); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.fig-rewind .sk-card.back { position: absolute; inset: 0; transform: translate(-11%, -8%) rotate(-6deg); opacity: 0.55; }
.fig-rewind .sk-badge { position: absolute; right: -13px; bottom: -13px; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.25rem; }
/* Push-notification banner with an accent app-icon square */
.fig-notif { width: min(82%, 240px); display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 15px; background: color-mix(in srgb, currentColor 6%, transparent); border: 1px solid color-mix(in srgb, currentColor 11%, transparent); }
.fig-notif .sk-appicon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); flex: none; }
.fig-notif .sk-lines { flex: 1; display: grid; gap: 6px; }
/* Inbound chat bubble; with .fig-typing its dots bounce while revealed */
.fig-bubble { display: inline-flex; gap: 6px; padding: 14px 18px; border-radius: 18px 18px 18px 5px; background: color-mix(in srgb, currentColor 8%, transparent); }
.fig-bubble i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, currentColor 45%, transparent); }
/* Outbound accent bubble + riding reaction pill + "Read" label */
.fig-receipt { display: grid; justify-items: end; gap: 7px; width: min(60%, 200px); }
.fig-receipt .sk-out { position: relative; width: 100%; height: 42px; border-radius: 18px 18px 5px 18px; background: var(--accent); }
.fig-receipt .sk-out::after { content: '❤️'; position: absolute; left: -9px; bottom: -11px; font-size: 0.8rem; padding: 3px 7px; border-radius: 99px; background: var(--bg-1); border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.fig-receipt .sk-read { font-size: 0.72rem; font-weight: 600; opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
/* radar ping — three sweeps once the tile reveals */
.bento-tile.reveal.in .fig-radar .ring:first-child { animation: fig-ping 2.6s var(--ease) 3; }
@keyframes fig-ping { 0% { transform: scale(0.72); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
/* typing dots — the animation IS the feature being described */
.bento-tile.reveal.in .fig-typing i { animation: fig-type 1.2s var(--ease) infinite both; }
.bento-tile.reveal.in .fig-typing i:nth-child(2) { animation-delay: 0.15s; }
.bento-tile.reveal.in .fig-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fig-type { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
/* chip clusters settle in with a 60ms cascade when their tile reveals */
.bento-tile.reveal .tile-chips > span { opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.bento-tile.reveal.in .tile-chips > span { opacity: 1; transform: none; }
.bento-tile.reveal.in .tile-chips > span:nth-child(2) { transition-delay: 0.06s; }
.bento-tile.reveal.in .tile-chips > span:nth-child(3) { transition-delay: 0.12s; }
.bento-tile.reveal.in .tile-chips > span:nth-child(4) { transition-delay: 0.18s; }
.bento-tile.reveal.in .tile-chips > span:nth-child(5) { transition-delay: 0.24s; }
.bento-tile.reveal.in .tile-chips > span:nth-child(6) { transition-delay: 0.3s; }
.bento-tile.reveal.in .tile-chips > span:nth-child(7) { transition-delay: 0.36s; }
/* device render settles up into place as its tile reveals (it starts
deeper into the bottom crop, so the phone rises out of the edge) */
.bento-tile.tile-device.reveal img { transform: translateY(18px); transition: transform 0.9s var(--ease) 0.15s; }
.bento-tile.tile-device.reveal.in img { transform: none; }
}
/* feature-list checkmarks adapt to gradient/light tiles */
.tile-gradient .feature-list li { color: rgba(255, 255, 255, 0.92); }
.tile-gradient .feature-list .tick { background: rgba(255, 255, 255, 0.22); color: #fff; }
.tile-light .feature-list li { color: rgba(22, 19, 31, 0.72); }
.tile-light .feature-list .tick { background: rgba(107, 94, 246, 0.16); color: var(--accent); }
/* ---------------------------------------------------------------------------
Feature module — groups one feature's header + bento. No box/frame: features
are separated by whitespace and a numbered header, so each can still carry
its own bento composition (more cells = a taller feature).
------------------------------------------------------------------------- */
.feature + .feature { margin-top: clamp(3rem, 6.5vw, 5.5rem); }
.feature-head { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: clamp(0.95rem, 2vw, 1.35rem); padding-top: 1.1rem; border-top: 1px solid var(--hairline-2); }
.feature-num { font-size: 0.92rem; font-weight: 600; color: var(--accent-2); }
.feature-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
/* Hero app icon — the real HeyU icon artwork (an ![]()
; the PNG carries
its own squircle corners and shading, so no fill or radius here) */
.app-icon {
width: 104px; height: 104px; margin: 0 auto 1.6rem;
display: block;
}
/* In the hero it sits left-aligned above the headline */
.hero .app-icon { margin: 0 0 2.4rem; }
@media (prefers-reduced-motion: reduce) {
.reveal-fade { opacity: 1; }
[data-parallax] { transform: none !important; }
}
/* ---------------------------------------------------------------------------
Print — for the legal docs people save as PDF. Chrome (nav, footer,
intro/transition overlays) disappears, ink inverts to black-on-white,
and the jump-link TOC (useless on paper) is dropped.
------------------------------------------------------------------------- */
@media print {
.site-header, .site-footer, .intro, .pt-leave, .skip-link, .doc-toc { display: none !important; }
body, body.company { background: #fff; color: #000; }
body::before { display: none; }
body.footer-reveal { padding-bottom: 0 !important; }
main { position: static; }
.doc { max-width: 100%; padding-top: 1rem; }
.doc-header h1 { color: #000; }
.doc h2, .doc h3, .doc p, .doc li, .doc blockquote, .doc blockquote strong { color: #000; }
.doc-updated { color: #555; }
.doc ul li::before { background: #000; }
.doc blockquote { background: #fff; border: 1px solid #999; }
.doc code { background: #fff; border-color: #bbb; color: #000; }
a.inline { color: #000; border-bottom: 1px solid #999; }
}