/* ============================================ */
/* TOKENS */
/* Concrete palette + semantic theme tokens. The semantic tokens at
the bottom of :root flip in dark mode (data-theme="dark"); the
concrete tokens stay constant so we can still address the warm
cream / brand mint when we mean exactly that. */
/* ============================================ */
:root{
/* Tell the browser this page renders both schemes — without this
embedded WebViews often force light regardless of the OS toggle. */
color-scheme:light dark;
/* Concrete palette — shared by both themes */
--cream:#FCF9F2; --cream-soft:#FEFDF7; --charcoal:#171713;
--mint:#BFE0CC; --mint-bright:#D7EFDF; --mint-pale:#EBF5EE;
--mint-cool:#A8DCC9; --mint-cool-deep:#3F8C7E;
--teal:#6CA8A4; --teal-soft:#7ED1CD; --teal-ink:#3D7672;
--green-vivid:#5ECB88; --yellow-vivid:#F2C42A; --amber-vivid:#F18620;
--coral-vivid:#E63C28; --coral-deep:#C73F32;
--ink:#1A1A1C; --ink-2:#4A4A4E; --ink-3:#787676; --ink-4:#A09E9A;
--hairline:rgba(0,0,0,0.06);
--shadow-soft:0 1px 2px rgba(60,40,20,.04), 0 8px 24px rgba(60,40,20,.06);
--shadow-pop:0 2px 6px rgba(60,40,20,.08), 0 30px 80px rgba(60,40,20,.12);
--ease-soft:cubic-bezier(.22,1,.36,1);
--ease-cross:cubic-bezier(.4,0,.2,1);
/* Semantic theme tokens — LIGHT defaults */
--bg:#FCF9F2;
--bg-soft:#FEFDF7;
--bg-deep:#F4EEDF;
--surface:#FFFFFF;
--surface-soft:rgba(255,255,255,.7);
--surface-raised:#FFFFFF;
--text:#1A1A1C;
--text-soft:#4A4A4E;
--text-muted:#787676;
--text-faint:#A09E9A;
--accent:#A8DCC9;
--accent-deep:#3F8C7E;
--accent-soft:#BFE0CC;
--accent-glow:rgba(155,217,200,.45);
--accent-text:#1F5C53;
--border:rgba(0,0,0,.08);
--border-strong:rgba(0,0,0,.14);
--hairline-soft:rgba(0,0,0,.06);
}
/* Dark theme — colours pulled directly from the macOS app's
ShinyTheme (DesignSystem.swift). Warm near-black ground (the
app's settings/popover background is #171713), elevation inverts
(cards come forward by being LIGHTER than the parent — white at
low opacity), off-white text #F2F2F7 (never pure white), brand
mint and teal-soft as accents. */
[data-theme="dark"]{
--bg:#141412; /* warm near-black, matches app popover */
--bg-soft:#1B1B19;
--bg-deep:#0C0C0A;
--surface:rgba(255,255,255,.06); /* cards = lighter than parent */
--surface-soft:rgba(255,255,255,.04);
--surface-raised:rgba(255,255,255,.08);
--text:#F2F2F7; /* app's primary text colour */
--text-soft:rgba(242,242,247,.66);
--text-muted:rgba(242,242,247,.44);
--text-faint:rgba(242,242,247,.30);
--accent:#BFE0CC; /* Palette.mint */
--accent-deep:#7ED1CD; /* Palette.tealSoft */
--accent-soft:#D7EFDF;
--accent-glow:rgba(126,209,205,.55);
--accent-text:#0F1A15;
--border:rgba(255,255,255,.10);
--border-strong:rgba(255,255,255,.18);
--hairline-soft:rgba(255,255,255,.06);
--shadow-soft:0 1px 2px rgba(0,0,0,.50), 0 12px 28px rgba(0,0,0,.55);
--shadow-pop:0 2px 6px rgba(0,0,0,.60), 0 30px 80px rgba(0,0,0,.65);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme]){
--bg:#141412;
--bg-soft:#1B1B19;
--bg-deep:#0C0C0A;
--surface:rgba(255,255,255,.06);
--surface-soft:rgba(255,255,255,.04);
--surface-raised:rgba(255,255,255,.08);
--text:#F2F2F7;
--text-soft:rgba(242,242,247,.66);
--text-muted:rgba(242,242,247,.44);
--text-faint:rgba(242,242,247,.30);
--accent:#BFE0CC;
--accent-deep:#7ED1CD;
--accent-soft:#D7EFDF;
--accent-glow:rgba(126,209,205,.55);
--accent-text:#0F1A15;
--border:rgba(255,255,255,.10);
--border-strong:rgba(255,255,255,.18);
--hairline-soft:rgba(255,255,255,.06);
--shadow-soft:0 1px 2px rgba(0,0,0,.50), 0 12px 28px rgba(0,0,0,.55);
--shadow-pop:0 2px 6px rgba(0,0,0,.60), 0 30px 80px rgba(0,0,0,.65);
}
}
/* ============================================ */
/* BASE */
/* ============================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
margin:0;padding:0;background:var(--bg);color:var(--text);
font-family:'Geist',-apple-system,system-ui,sans-serif;font-size:16px;line-height:1.5;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
transition:background-color .5s ease, color .5s ease;
/* Firefox scrollbar styling — slim, brand-tinted thumb on a
transparent track so it never feels like a system widget. */
scrollbar-width:thin;
scrollbar-color:rgba(63,140,126,.35) transparent;
}
[data-theme="dark"] html,
[data-theme="dark"] body{
scrollbar-color:rgba(155,217,200,.32) transparent;
}
/* WebKit / Chromium scrollbar — same idea, finer control. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
background:rgba(63,140,126,.30);
border-radius:100px;
border:2px solid transparent;
background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(63,140,126,.55);background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-corner{background:transparent}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(155,217,200,.28);background-clip:padding-box;border:2px solid transparent}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(155,217,200,.55);background-clip:padding-box;border:2px solid transparent}
/* (intro previously hid the OS cursor in favour of the mint cursor;
keeping the OS cursor visible is friendlier — users can still
click anywhere or skip the intro at will.) */
.hero-bg{
position:fixed;inset:0;z-index:-2;
background:radial-gradient(ellipse 80% 60% at 50% 40%, var(--bg-soft) 0%, var(--bg) 55%, var(--bg-deep) 100%);
transition:background .6s ease;
}
/* ============================================ */
/* TIRED WASH — subtle warm desaturation overlay */
/* applied while the page is in the tense state */
/* ============================================ */
.tired-wash{
position:fixed;inset:0;pointer-events:none;z-index:1;
background:linear-gradient(180deg, rgba(170,140,90,.05), rgba(170,140,90,.10));
opacity:0;
transition:opacity 2.2s var(--ease-soft);
}
body.tense .tired-wash{opacity:1}
/* ============================================ */
/* MINT KISS — viewport-wide mint flash at celebration peak */
/* ============================================ */
.mint-kiss{
position:fixed;inset:0;pointer-events:none;z-index:1;
/* Toned down ~25% */
background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(155,217,200,.20) 0%, rgba(195,224,210,.08) 38%, transparent 72%);
opacity:0;
transition:opacity 1.4s var(--ease-soft);
}
.mint-kiss.flash{opacity:1}
/* ============================================ */
/* MOTES — slow drifting mint particles, gentle ambient life */
/* ============================================ */
.motes{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.mote{
position:absolute;width:5px;height:5px;border-radius:50%;
background:radial-gradient(circle, rgba(191,224,204,.85), rgba(126,209,205,.25) 60%, transparent 100%);
filter:blur(1px);
opacity:0;
will-change:transform, opacity;
}
@keyframes moteDrift{
0% {opacity:0; transform:translate(0,0)}
18% {opacity:var(--mo,.55)}
82% {opacity:var(--mo,.55)}
100% {opacity:0; transform:translate(var(--dx,80px), var(--dy,-100px))}
}
/* ============================================ */
/* GRAIN — subtle paper grain overlay */
/* ============================================ */
.grain{
position:fixed;inset:0;pointer-events:none;z-index:7;
opacity:.06;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
background-size:200px 200px;
}
/* ============================================ */
/* COMET TRAIL — short fading mint glow following the cursor */
/* ============================================ */
.comet-dot{
position:fixed;
width:10px;height:10px;border-radius:50%;
background:radial-gradient(circle, rgba(191,224,204,.85), rgba(126,209,205,.25) 55%, transparent 100%);
filter:blur(2px);
pointer-events:none;z-index:99;
transform:translate(-50%,-50%);
will-change:opacity, transform;
animation:cometFade 420ms ease-out forwards;
}
@keyframes cometFade{
0% {opacity:.85; transform:translate(-50%,-50%) scale(1)}
100% {opacity:0; transform:translate(-50%,-50%) scale(.4)}
}
/* ============================================ */
/* TREMOR — applied to the hero while body.tense */
/* ============================================ */
body.tense .hero{animation:tremor .42s ease-in-out infinite alternate}
@keyframes tremor{
0% {transform:translate(0,0)}
100%{transform:translate(.5px, -.4px)}
}
/* Heavier, slower edge breath while tense */
body.tense .edge-frame.breathing{animation-duration:7s}
/* ============================================ */
/* VIEWPORT EXHALE — soft full-page scale at the celebration peak */
/* ============================================ */
body.exhale{animation:exhale 1.4s ease-in-out 1}
@keyframes exhale{
0%,100%{transform:scale(1)}
45%{transform:scale(1.0055)}
}
/* ============================================ */
/* EDGE GLOW — 4 stacked layers, crossfaded */
/* ============================================ */
.edge-stack{
position:fixed;inset:0;pointer-events:none;z-index:1;
transition:opacity .35s ease;
}
/* Once the user has scrolled past the hero, every hero-only fixed
visual layer (edge-glow, ambient phrases, tired wash, mint-kiss
flash, drifting motes) is hidden. They're position:fixed so they
would otherwise bleed into the viewport at every scroll position
when the page reloads mid-scroll. */
body.past-hero .edge-stack,
body.past-hero .ambient,
body.past-hero .tired-wash,
body.past-hero .mint-kiss,
body.past-hero .motes{
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
}
.edge-frame{
position:absolute;inset:0;opacity:0;
transition-property:opacity;
transition-duration:3.2s;
transition-timing-function:cubic-bezier(.42,0,.58,1);
will-change:opacity;
}
.edge-frame.active{opacity:1}
.edge-frame .edge{position:absolute;will-change:opacity}
.edge-frame .edge.top {top:0;left:0;right:0;height:200px}
.edge-frame .edge.bottom{bottom:0;left:0;right:0;height:200px}
.edge-frame .edge.left {top:0;left:0;bottom:0;width:200px}
.edge-frame .edge.right {top:0;right:0;bottom:0;width:200px}
/* SUBTLE — barely-there amber whisper */
.edge-frame[data-tone="subtle"] .edge.top {background:linear-gradient(to bottom, rgba(241,160,80,.10) 0%, rgba(241,160,80,.04) 45%, transparent 100%)}
.edge-frame[data-tone="subtle"] .edge.bottom {background:linear-gradient(to top, rgba(241,160,80,.10) 0%, rgba(241,160,80,.04) 45%, transparent 100%)}
.edge-frame[data-tone="subtle"] .edge.left {background:linear-gradient(to right, rgba(241,160,80,.10) 0%, rgba(241,160,80,.04) 45%, transparent 100%)}
.edge-frame[data-tone="subtle"] .edge.right {background:linear-gradient(to left, rgba(241,160,80,.10) 0%, rgba(241,160,80,.04) 45%, transparent 100%)}
/* WARMER — orange mid-stop, smooths the walk from amber to coral */
.edge-frame[data-tone="warmer"] .edge.top {background:linear-gradient(to bottom, rgba(238,134,55,.20) 0%, rgba(238,134,55,.10) 40%, rgba(238,134,55,.04) 70%, transparent 100%)}
.edge-frame[data-tone="warmer"] .edge.bottom {background:linear-gradient(to top, rgba(238,134,55,.20) 0%, rgba(238,134,55,.10) 40%, rgba(238,134,55,.04) 70%, transparent 100%)}
.edge-frame[data-tone="warmer"] .edge.left {background:linear-gradient(to right, rgba(238,134,55,.20) 0%, rgba(238,134,55,.10) 40%, rgba(238,134,55,.04) 70%, transparent 100%)}
.edge-frame[data-tone="warmer"] .edge.right {background:linear-gradient(to left, rgba(238,134,55,.20) 0%, rgba(238,134,55,.10) 40%, rgba(238,134,55,.04) 70%, transparent 100%)}
/* TENSE — warm coral, max state (still soft, not alarming) */
.edge-frame[data-tone="tense"] .edge.top {background:linear-gradient(to bottom, rgba(225,100,55,.30) 0%, rgba(225,100,55,.16) 40%, rgba(225,100,55,.05) 70%, transparent 100%)}
.edge-frame[data-tone="tense"] .edge.bottom {background:linear-gradient(to top, rgba(225,100,55,.30) 0%, rgba(225,100,55,.16) 40%, rgba(225,100,55,.05) 70%, transparent 100%)}
.edge-frame[data-tone="tense"] .edge.left {background:linear-gradient(to right, rgba(225,100,55,.30) 0%, rgba(225,100,55,.16) 40%, rgba(225,100,55,.05) 70%, transparent 100%)}
.edge-frame[data-tone="tense"] .edge.right {background:linear-gradient(to left, rgba(225,100,55,.30) 0%, rgba(225,100,55,.16) 40%, rgba(225,100,55,.05) 70%, transparent 100%)}
/* BLOOM — softer mint (toned down ~25%) */
.edge-frame[data-tone="bloom"] .edge.top {background:linear-gradient(to bottom, rgba(155,217,200,.28) 0%, rgba(155,217,200,.14) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
.edge-frame[data-tone="bloom"] .edge.bottom {background:linear-gradient(to top, rgba(155,217,200,.28) 0%, rgba(155,217,200,.14) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
.edge-frame[data-tone="bloom"] .edge.left {background:linear-gradient(to right, rgba(155,217,200,.28) 0%, rgba(155,217,200,.14) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
.edge-frame[data-tone="bloom"] .edge.right {background:linear-gradient(to left, rgba(155,217,200,.28) 0%, rgba(155,217,200,.14) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
/* HINT — faint mint kiss, softest fade */
.edge-frame[data-tone="hint"] .edge.top {background:linear-gradient(to bottom, rgba(191,224,204,.16) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
.edge-frame[data-tone="hint"] .edge.bottom {background:linear-gradient(to top, rgba(191,224,204,.16) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
.edge-frame[data-tone="hint"] .edge.left {background:linear-gradient(to right, rgba(191,224,204,.16) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
.edge-frame[data-tone="hint"] .edge.right {background:linear-gradient(to left, rgba(191,224,204,.16) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
/* ============================================ */
/* AMBIENT PHRASES */
/* ============================================ */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.phrase{
position:absolute;
font-family:'Geist Mono',ui-monospace,Menlo,Monaco,monospace;
font-style:normal;font-weight:400;
color:rgba(61,118,114,0);
letter-spacing:-0.005em;
/* Start small so the entrance pops with overshoot — feels like a task
bursting into existence rather than a steady fade. */
transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.55) rotate(var(--rot,0deg));
transform-origin:center;
transition:
opacity .35s var(--ease-soft),
color .35s var(--ease-soft),
transform .55s cubic-bezier(.34, 1.56, .64, 1),
filter .35s var(--ease-soft);
white-space:nowrap;user-select:none;
will-change:opacity, transform;
}
.phrase.visible{
color:rgba(61,118,114,.34);
transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(1) rotate(var(--rot,0deg));
animation:phraseBreath var(--breath-dur, 5.2s) ease-in-out infinite;
animation-delay:var(--breath-delay, 0s);
}
.phrase.sweep{
color:rgba(191,224,204,0);
transform:translate(calc(-50% + var(--sx,0px)), calc(-50% + var(--sy,0px))) scale(1.04) rotate(var(--srot,0deg));
filter:blur(2.4px);
transition-duration:1.1s;
animation:none;
}
.ambient.recede .phrase.visible{
/* Pushed lighter + softly blurred when Meet Shiny arrives so the
existing phrases read as faint background texture rather than
competing legible text behind the headline. */
color:rgba(61,118,114,.07);
filter:blur(1.5px);
transition:color 1.4s var(--ease-soft), filter 1.4s var(--ease-soft);
}
@keyframes phraseBreath{
0%, 100% {opacity:1}
50% {opacity:.78}
}
/* Soft cream halo behind Meet Shiny — locally washes ambient phrases */
.meet-spotlight{
position:absolute;left:50%;top:50%;
width:clamp(500px, 88vw, 920px);
height:clamp(420px, 70vh, 720px);
transform:translate(-50%, -50%);
border-radius:50%;
background:radial-gradient(ellipse, rgba(252,249,242,.78) 0%, rgba(252,249,242,.42) 38%, transparent 72%);
filter:blur(40px);
opacity:0;
transition:opacity 1.2s var(--ease-soft);
pointer-events:none;
}
.meet-spotlight.show{opacity:1}
/* ============================================ */
/* HERO STAGE */
/* ============================================ */
.hero{
min-height:100vh;width:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:6rem 2rem;position:relative;z-index:3;text-align:center;
}
/* Beat lines — per-word reveal */
.beat-line{
position:absolute;left:50%;top:50%;
transform:translate(-50%, -50%);
width:90%;max-width:18ch;text-align:center;text-wrap:balance;
font-family:'Fraunces',Georgia,serif;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:clamp(40px, 6.4vw, 80px);
line-height:1.05;letter-spacing:-0.028em;
color:var(--ink);margin:0;
pointer-events:none;
opacity:1;
}
.beat-line em{font-style:italic;font-weight:300;color:var(--teal-ink)}
.beat-line .word{
display:inline-block;
opacity:0;
transform:translateY(10px) scale(.94);
filter:blur(6px);
transition:
opacity .8s var(--ease-soft),
transform .8s var(--ease-soft),
filter .8s var(--ease-soft);
transition-delay:calc(var(--i, 0) * 70ms);
will-change:opacity, transform, filter;
}
.beat-line.show .word{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
.beat-line.exited .word{
opacity:0;
transform:translateY(-12px) scale(1);
filter:blur(4px);
transition-delay:0ms;
transition-duration:.5s;
}
/* Meet stage — headline + subtitle + pillow as one vertical column */
.meet-stage{
position:absolute;left:50%;top:50%;
transform:translate(-50%, -50%);
width:min(92%, 760px);
display:flex;flex-direction:column;align-items:center;
gap:88px;
pointer-events:none;
}
.meet{
text-align:center;
opacity:0;
transform:translateY(10px);
transition-property:opacity, transform;
transition-duration:.9s;
transition-timing-function:var(--ease-soft);
}
.meet.show{opacity:1;transform:translateY(0)}
.meet h1{
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-variation-settings:"opsz" 144;
font-size:clamp(56px, 8.4vw, 116px);
line-height:1;letter-spacing:-0.04em;
color:var(--teal-ink);margin:0 0 18px;
text-wrap:balance;
transition:font-variation-settings 1100ms var(--ease-soft);
}
.meet h1.refined{font-variation-settings:"opsz" 96}
/* Letter-by-letter reveal — JS wraps each character in a .ltr span
with style="--i:N". When the parent .meet gains .show, each letter
eases in with a per-letter delay (overshoot easing for a slight
"drop into place" feel). Inline-block so transforms apply. */
.meet h1 .ltr{
display:inline-block;
opacity:0;
transform:translateY(14px);
transition:
opacity .55s var(--ease-soft) calc(var(--i, 0) * 42ms),
transform .55s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * 42ms);
will-change:opacity, transform;
}
.meet h1 .ltr.space{width:.28em}
.meet.show h1 .ltr{opacity:1;transform:translateY(0)}
.word-shiny{display:inline-block;transition:text-shadow .9s ease}
.meet h1.shimmering .word-shiny{
animation:shinyShimmer 2.4s cubic-bezier(.4,0,.2,1);
}
@keyframes shinyShimmer{
0% {text-shadow:0 0 0 transparent}
35% {text-shadow:0 0 12px rgba(126,209,205,.7), 0 0 26px rgba(191,224,204,.55), 0 0 48px rgba(126,209,205,.3)}
65% {text-shadow:0 0 14px rgba(126,209,205,.85), 0 0 28px rgba(191,224,204,.6), 0 0 56px rgba(126,209,205,.35)}
100% {text-shadow:0 0 0 transparent}
}
.meet p{
font-family:'Fraunces',serif;font-weight:300;
font-size:clamp(18px, 2vw, 22px);
color:var(--ink-2);margin:0;line-height:1.4;
text-wrap:balance;
}
/* Pillow zone */
.pillow-zone{
position:relative;
width:280px;height:280px;
display:flex;align-items:center;justify-content:center;
opacity:0;transform:scale(.92);
transition-property:opacity, transform;
transition-duration:.9s;
transition-timing-function:var(--ease-soft);
pointer-events:auto;
}
.pillow-zone.show{opacity:1;transform:scale(1)}
.pillow-floor{
position:absolute;left:50%;top:50%;
width:200px;height:200px;
margin-left:-100px;margin-top:-100px;
border-radius:50%;
background:radial-gradient(circle, rgba(191,224,204,.30), transparent 70%);
filter:blur(20px);
opacity:0;
transition-property:opacity, background;
transition-duration:1.2s;
transition-timing-function:var(--ease-cross);
pointer-events:none;
}
.pillow-zone.show .pillow-floor{opacity:1}
.pillow{
position:relative;z-index:5;
width:144px;height:144px;border-radius:50%;
background:
radial-gradient(circle at 30% 26%, rgba(255,255,255,.78), transparent 58%),
linear-gradient(180deg, #fefdf7 0%, #f3efe5 100%);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.85),
inset 0 -1px 1px rgba(0,0,0,.05),
inset 0 0 0 1px rgba(255,255,255,.4),
0 1px 2px rgba(60,40,20,.08),
0 6px 14px rgba(60,40,20,.08),
0 22px 48px rgba(60,40,20,.14);
display:flex;align-items:center;justify-content:center;
cursor:pointer;border:none;
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-size:30px;color:var(--teal-ink);letter-spacing:-0.01em;
transition-property:transform, box-shadow;
transition-duration:.36s;
transition-timing-function:var(--ease-soft);
user-select:none;
}
.pillow:hover{
transform:translateY(-3px);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.85),
inset 0 -1px 1px rgba(0,0,0,.05),
inset 0 0 0 1px rgba(255,255,255,.4),
0 2px 4px rgba(60,40,20,.10),
0 10px 20px rgba(60,40,20,.10),
0 30px 60px rgba(60,40,20,.18);
}
/* Anticipation — pillow gently grows as the cursor approaches it,
like the surface is reaching to meet the press. */
.pillow.anticipating{
transform:scale(1.04);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.9),
inset 0 -1px 1px rgba(0,0,0,.05),
inset 0 0 0 1px rgba(155,217,200,.45),
0 0 32px rgba(155,217,200,.45),
0 2px 4px rgba(60,40,20,.10),
0 18px 36px rgba(60,118,114,.20);
}
[data-theme="dark"] .pillow.anticipating{
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.24),
inset 0 0 0 1px rgba(155,217,200,.35),
0 0 50px rgba(155,217,200,.70),
0 0 110px rgba(155,217,200,.32),
0 4px 10px rgba(0,0,0,.55),
0 22px 50px rgba(0,0,0,.55);
}
/* Squish + recoil keyframe: 1.04 (entered from anticipation) → squish
(1.06×.92) → bounce (.98×1.04) → overshoot (1.03) → settle (1).
Replaces the previous static .pressed transform. */
.pillow.pressed{
animation:pillowPress 480ms cubic-bezier(.22,1,.36,1);
}
@keyframes pillowPress{
0% {transform:scale(1.04)}
18% {transform:scaleX(1.06) scaleY(.92)}
38% {transform:scaleX(.98) scaleY(1.04)}
60% {transform:scale(1.03)}
100% {transform:scale(1)}
}
.pillow.celebrating{
background:
radial-gradient(circle at 30% 26%, rgba(255,255,255,.85), transparent 58%),
radial-gradient(circle at 50% 55%, rgba(191,224,204,.34) 0%, transparent 72%),
linear-gradient(180deg, #fefdf7 0%, #f4f7f3 100%);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.85),
inset 0 -1px 1px rgba(0,0,0,.05),
inset 0 0 0 1px rgba(155,200,200,.32),
0 0 22px rgba(155,217,210,.32),
0 1px 2px rgba(60,40,20,.06),
0 22px 48px rgba(60,118,114,.14);
transition:background 1.2s var(--ease-soft), box-shadow 1.2s var(--ease-soft);
}
@keyframes calmBreath{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-1px) scale(1.014)}
}
.pillow.celebrating.calm-breathing{
animation:calmBreath 4.5s ease-in-out infinite;
}
/* Concentric mint ripples — three rings expand outward from the
pillow centre on Polish, staggered ~110ms apart. Each ring fades
as it grows, like a stone in mint water. */
.ripple-stack{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
pointer-events:none;z-index:4;
}
.ripple-stack .ripple{
position:absolute;
width:144px;height:144px;border-radius:50%;
border:2px solid rgba(126,209,205,.55);
opacity:0;
}
.ripple-stack .ripple.go{
animation:rippleOut 1.05s cubic-bezier(.22,.85,.30,1) forwards;
}
.ripple-stack .ripple.r2.go{animation-delay:.11s}
.ripple-stack .ripple.r3.go{animation-delay:.24s}
@keyframes rippleOut{
0% {transform:scale(.7); opacity:.85; border-width:2px}
60% {opacity:.45; border-width:1.4px}
100% {transform:scale(2.6); opacity:0; border-width:.6px}
}
[data-theme="dark"] .ripple-stack .ripple{
border-color:rgba(155,217,200,.75);
}
/* Aurora layers behind the pillow */
.aurora-layer{
position:absolute;left:50%;top:50%;
pointer-events:none;
will-change:transform, opacity, filter;
}
.aurora-warm{
width:340px;height:340px;margin-left:-170px;margin-top:-170px;
border-radius:50%;
background:radial-gradient(circle, rgba(241,134,32,.55) 0%, rgba(230,60,40,.32) 50%, transparent 88%);
filter:blur(32px);
transform:scale(1);opacity:0;
transition:background 1.4s var(--ease-cross), opacity .8s var(--ease-soft);
}
.pillow-zone.show .aurora-warm{opacity:.0}
.aurora-warm.calm{
background:radial-gradient(circle, rgba(108,168,164,.55) 0%, rgba(126,209,205,.32) 50%, transparent 88%);
}
.aurora-cool{
width:340px;height:340px;margin-left:-170px;margin-top:-170px;
border-radius:50%;
/* Reduced vibrancy ~25% — feels softer, less saturated */
background:radial-gradient(circle, rgba(170,217,205,.46) 0%, rgba(195,224,210,.32) 48%, rgba(215,239,223,.14) 72%, transparent 92%);
filter:blur(18px);
transform:scale(.4);opacity:0;
}
.aurora-leak{
width:240px;height:240px;margin-left:-120px;margin-top:-120px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(191,224,204,.6) 35%, transparent 78%);
filter:blur(14px);
transform:scale(.3);opacity:0;
}
/* Sparks */
.spark{
position:absolute;left:50%;top:50%;
width:3.6px;height:3.6px;border-radius:50%;background:white;
box-shadow:0 0 8px rgba(255,255,255,.9), 0 0 16px rgba(191,224,204,.55);
opacity:0;pointer-events:none;
transform:translate(0,0) scale(.35);z-index:6;
}
/* ============================================ */
/* MINT CURSOR — modern macOS arrow */
/* ============================================ */
.mint-cursor{
position:fixed;left:0;top:0;
width:22px;height:28px;
pointer-events:none;z-index:100;opacity:0;
transform:scale(.88);
transform-origin:0 0;
transition-property:opacity, transform, filter;
transition-duration:.4s;
transition-timing-function:var(--ease-soft);
will-change:left, top, transform, opacity;
filter:
drop-shadow(0 0 2.5px rgba(255,255,255,.95))
drop-shadow(0 0 9px rgba(255,255,255,.6))
drop-shadow(0 0 18px rgba(191,224,204,.55))
drop-shadow(0 2px 5px rgba(60,118,114,.22));
}
.mint-cursor svg{display:block;width:100%;height:100%;overflow:visible}
.mint-cursor svg path{
fill:url(#mintCursorGrad);
stroke:rgba(108,168,164,.45);
stroke-width:.6;
stroke-linejoin:round;
stroke-linecap:round;
transition:fill .25s var(--ease-soft);
}
.mint-cursor.visible{opacity:1;transform:scale(1)}
.mint-cursor.pressing{
transform:scale(.94);
filter:
drop-shadow(0 0 4px rgba(255,255,255,1))
drop-shadow(0 0 16px rgba(255,255,255,.85))
drop-shadow(0 0 30px rgba(191,224,204,.85))
drop-shadow(0 0 48px rgba(126,209,205,.55))
drop-shadow(0 2px 6px rgba(60,118,114,.32));
}
.mint-cursor.pressing svg path{fill:#FFFFFF}
/* ============================================ */
/* SKIP */
/* ============================================ */
.skip{
position:fixed;bottom:24px;right:28px;z-index:50;
font-family:'Geist',sans-serif;font-size:11px;
color:var(--ink-4);letter-spacing:0.12em;text-transform:uppercase;
background:transparent;border:none;cursor:pointer;
opacity:0;
transition:opacity .8s ease, color .2s ease;
padding:10px 14px;
min-width:40px;min-height:40px;
}
.skip.show{opacity:.85}
.skip:hover{color:var(--teal-ink);opacity:1}
/* Scroll cue */
.hero-scroll-cue{
position:absolute;bottom:36px;left:50%;
transform:translateX(-50%);
font-family:'Geist',sans-serif;font-size:10px;
color:var(--ink-4);letter-spacing:0.2em;text-transform:uppercase;
opacity:0;transition:opacity 1s ease;z-index:5;
}
.hero-scroll-cue.show{opacity:1}
.hero-scroll-cue::after{
content:'';display:block;width:1px;height:18px;background:var(--ink-4);
margin:8px auto 0;opacity:.5;
}
/* ============================================ */
/* STICKY NAV — pill-shaped, glass on scroll */
/* (matches Solace convention, mint Buy button) */
/* ============================================ */
.nav-bar{
position:fixed;top:0;left:0;right:0;z-index:100;
display:flex;justify-content:center;
padding:1.1rem 1.25rem;
pointer-events:none;
}
.nav-pill{
position:relative;
display:flex;align-items:center;
gap:.25rem;
padding:.45rem .5rem .45rem .85rem;
border-radius:100px;
pointer-events:auto;
opacity:0;
transform:translateY(-10px);
transition:
opacity .8s var(--ease-soft),
transform .8s var(--ease-soft),
background .6s var(--ease-soft),
backdrop-filter .6s var(--ease-soft),
border-color .6s var(--ease-soft),
box-shadow .6s var(--ease-soft);
background:rgba(252,249,242,0);
backdrop-filter:blur(0);
-webkit-backdrop-filter:blur(0);
border:1px solid rgba(255,255,255,0);
box-shadow:none;
}
body.scrolled .nav-pill,
body.legal-page .nav-pill,
body.download-page .nav-pill{
opacity:1;
transform:translateY(0);
background:rgba(252,249,242,.78);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.65);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
0 1px 2px rgba(60,40,20,.04),
0 8px 24px rgba(60,40,20,.10);
}
.nav-logo{
display:flex;align-items:center;
gap:.5rem;
text-decoration:none;
color:var(--ink);
white-space:nowrap;
padding:.2rem .35rem;
border-radius:100px;
transition:opacity .2s ease;
}
.nav-logo:hover{opacity:.82}
.nav-logo-icon{
width:28px;height:28px;
border-radius:7px;
flex-shrink:0;
}
.nav-logo-text{
font-family:'Fraunces',serif;
font-style:italic;font-weight:300;
font-size:1.25rem;
letter-spacing:-0.02em;
color:var(--mint-cool-deep);
}
.nav-links{
display:flex;align-items:center;
gap:.125rem;
margin-left:.25rem;
}
.nav-link{
display:block;
padding:.4rem .85rem;
border-radius:100px;
color:var(--ink-2);
text-decoration:none;
font-family:'Geist',sans-serif;
font-size:.875rem;
font-weight:500;
white-space:nowrap;
transition:color .2s ease, background .2s ease;
}
.nav-link:hover{
color:var(--ink);
background:rgba(0,0,0,.04);
}
/* Active state — the page you're on. */
.nav-link.is-active{
color:var(--mint-cool-deep);
font-weight:600;
}
/* Right-aligned "strong" variant — used for the Download link.
Pushed to the right edge via margin-left:auto. Coloured to echo
the Buy Shiny pillow button (deep teal #1F5C53 text on a soft
mint tint), so it reads as a quieter cousin of the button —
visually paired with it rather than with the active-state mint
used for "the page you're on". */
.nav-link-strong{
margin-left:auto;
color:#1F5C53;
background:rgba(168,220,201,.22);
font-weight:600;
}
.nav-link-strong:hover{
color:#1F5C53;
background:rgba(168,220,201,.42);
}
.nav-sep{
width:1px;height:18px;
background:rgba(0,0,0,.12);
margin:0 .375rem;
flex-shrink:0;
}
.nav-buy{
display:flex;align-items:center;
padding:.45rem 1.05rem;
border-radius:100px;
background:var(--mint-cool);
color:#1F5C53;
text-decoration:none;
font-family:'Geist',sans-serif;
font-size:.875rem;
font-weight:600;
letter-spacing:.005em;
white-space:nowrap;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(0,0,0,.04),
0 1px 2px rgba(60,120,110,.10),
0 4px 12px rgba(60,120,110,.16);
transition:transform .25s ease, box-shadow .25s ease;
}
.nav-buy:hover{
transform:translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(0,0,0,.04),
0 2px 4px rgba(60,120,110,.16),
0 10px 20px rgba(60,120,110,.22);
}
.nav-buy:active{transform:translateY(0) scale(.97)}
@media (max-width:720px){
.nav-links, .nav-sep{display:none}
.nav-pill{padding:.4rem .4rem .4rem .8rem}
}
/* ============================================ */
/* SECTIONS BELOW HERO */
/* ============================================ */
.section{
width:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:5rem 2rem;position:relative;z-index:2;
}
.eyebrow{font-family:'Geist',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-4);margin-bottom:12px}
.display{font-family:'Fraunces',Georgia,serif;font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-0.02em;color:var(--ink);line-height:1.05;text-align:center;text-wrap:balance}
.lede{font-family:'Fraunces',serif;font-weight:300;font-size:20px;color:var(--ink-2);max-width:42ch;text-align:center;line-height:1.5;margin-top:18px;text-wrap:pretty}
.menubar{width:520px;max-width:90vw;height:30px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(28px) saturate(160%);border-radius:8px;display:flex;align-items:center;padding:0 12px;gap:18px;box-shadow:var(--shadow-soft);margin-bottom:64px}
.menubar-app{font-size:12px;font-weight:600;color:var(--ink-2)}
.menubar-item{font-size:12px;color:var(--ink-3)}
.menubar-spacer{flex:1}
.menubar-icons{display:flex;align-items:center;gap:14px;color:var(--ink-3)}
.ring-wrap{position:relative;width:22px;height:22px}
.ring-wrap::before{content:'';position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle, rgba(126,209,205,.45) 0%, transparent 70%);animation:ringBreathe 3.5s ease-in-out infinite alternate}
@keyframes ringBreathe{from{transform:scale(.92);opacity:.5}to{transform:scale(1.12);opacity:1}}
.apps-card{width:380px;max-width:92vw;padding:8px;background:var(--cream-soft);border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-soft)}
.apps-card-header{padding:14px 14px 10px;display:flex;align-items:center;justify-content:space-between}
.apps-card-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-3)}
.apps-card-sort{font-size:10px;color:var(--ink-4);letter-spacing:0.08em}
.app-row{display:flex;gap:12px;padding:13px 14px;border-top:1px solid var(--hairline);align-items:flex-start}
.app-icon{width:38px;height:38px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Geist',sans-serif;font-weight:600;font-size:16px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.08)}
.app-meta{flex:1;min-width:0}
.app-name-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.app-name{font-size:13.5px;font-weight:500;color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:500;letter-spacing:0.02em;font-family:'Geist',sans-serif}
.pill::before{content:'';width:5px;height:5px;border-radius:50%}
.pill-known{background:rgba(94,203,136,.16);color:#2d7048}
.pill-known::before{background:var(--green-vivid)}
.pill-hidden{background:rgba(144,197,227,.20);color:#3a6680}
.pill-hidden::before{background:#90c5e3}
.app-desc{font-size:12px;color:var(--ink-2);line-height:1.5;margin-bottom:6px}
.app-foot{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
.app-foot .dot{width:6px;height:6px;border-radius:50%;background:var(--green-vivid)}
.app-foot .dot.amber{background:var(--amber-vivid)}
.price-row{display:flex;align-items:baseline;justify-content:center}
.price{font-family:'Fraunces',serif;font-weight:300;font-size:148px;line-height:.95;letter-spacing:-0.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.price-once{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:38px;color:var(--teal-ink);margin-left:14px}
.buy-btn{margin-top:36px;padding:14px 32px;border:none;background:var(--mint);color:#1f4f47;font-family:'Geist',sans-serif;font-weight:600;font-size:14px;letter-spacing:0.01em;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.04),0 1px 2px rgba(60,120,100,.12),0 8px 20px rgba(60,120,100,.18);cursor:pointer;text-decoration:none;display:inline-block;transition:transform .25s ease, box-shadow .25s ease}
.buy-btn:hover{transform:translateY(-2px)}
.buy-btn:active{transform:translateY(0) scale(.96)}
/* (legacy footer rules removed — see new .footer-section block below) */
/* ==================================================================
PRODUCTION SECTIONS — bento, testimonials, FAQ, statement, about
================================================================== */
/* Section content wrapper — caps width and centres content */
.section-content{
width:100%;
max-width:1200px;
margin:0 auto;
}
.section-content.centered-content{
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.eyebrow.centered{margin-left:auto;margin-right:auto;text-align:center;display:block}
.display.centered{margin-left:auto;margin-right:auto}
/* ----- ABOUT (Meet Shiny) ----- */
.about-section{padding:10rem 2rem 8rem}
.about-content{display:flex;flex-direction:column;align-items:center;text-align:center}
.about-headline{
font-family:'Fraunces',Georgia,serif;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:clamp(40px, 5.6vw, 76px);
line-height:1.05;letter-spacing:-0.028em;
color:var(--ink);margin:0;
max-width:18ch;text-wrap:balance;
}
.about-lede{margin-top:24px;max-width:54ch}
.about-visual{
margin-top:80px;
width:100%;
display:flex;justify-content:center;
}
/* ----- Mac window mock ----- */
.mac-window{
width:100%;max-width:840px;
background:rgba(254,253,247,.85);
border-radius:14px;
border:1px solid rgba(0,0,0,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 1px 2px rgba(60,40,20,.04),
0 18px 48px rgba(60,40,20,.10),
0 4px 12px rgba(60,40,20,.06);
overflow:hidden;
position:relative;
}
.mac-menubar{
height:30px;display:flex;align-items:center;
padding:0 14px;gap:18px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid rgba(0,0,0,.04);
font-family:-apple-system,'Geist',system-ui,sans-serif;
}
.apple-mark{
display:inline-flex;align-items:center;color:var(--ink-2);
margin-right:2px;
}
.apple-mark svg{width:13px;height:15px}
.mb-app-name{font-size:13px;font-weight:600;color:var(--ink)}
.mb-item{font-size:13px;color:var(--ink-2)}
.mb-spacer{flex:1}
.mb-tray-icon{
width:14px;height:14px;border-radius:3px;
background:rgba(0,0,0,.08);
display:inline-block;
}
.mb-ring{position:relative;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.mb-ring::before{
content:'';position:absolute;inset:-10px;border-radius:50%;
background:radial-gradient(circle, rgba(126,209,205,.4) 0%, transparent 70%);
animation:ringBreathe 3.5s ease-in-out infinite alternate;
}
.mb-time{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-left:4px}
/* The "window body" — soft cream area below the menu bar */
.mac-window-body{
height:280px;position:relative;
background:
radial-gradient(ellipse 60% 40% at 100% 0%, rgba(126,209,205,.10), transparent 60%),
linear-gradient(135deg, #FCF9F2, #F0EBDA);
}
.about-popover{
position:absolute;top:14px;right:14px;
width:230px;padding:18px 16px 16px;
background:rgba(254,253,247,.88);
backdrop-filter:blur(40px) saturate(160%);
border:1px solid rgba(255,255,255,.7);
border-radius:12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.06),
0 14px 32px rgba(60,40,20,.14);
display:flex;flex-direction:column;align-items:center;gap:14px;
}
.ap-header{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:18px;color:var(--ink)}
.ap-sentence{font-family:'Fraunces',serif;font-weight:300;font-size:12.5px;text-align:center;color:var(--ink-2);line-height:1.4}
.ap-pillow{
width:64px;height:64px;border-radius:50%;
background:
radial-gradient(circle at 30% 26%, rgba(255,255,255,.78), transparent 58%),
linear-gradient(180deg,#fefdf7 0%,#f3efe5 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -1px 1px rgba(0,0,0,.05),
0 1px 2px rgba(60,40,20,.08),
0 8px 18px rgba(60,40,20,.12);
display:flex;align-items:center;justify-content:center;
font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:16px;
color:var(--teal-ink);
}
/* ----- BENTO SECTION ----- */
.bento-section{padding:10rem 2rem 10rem}
.bento-grid{
display:grid;
grid-template-columns:repeat(6, 1fr);
grid-auto-rows:minmax(220px, auto);
gap:18px;
margin-top:64px;
}
.bento-1{grid-column:span 4;grid-row:span 2}
.bento-2{grid-column:span 2;grid-row:span 2}
.bento-3{grid-column:span 2;grid-row:span 1}
.bento-4{grid-column:span 2;grid-row:span 1}
.bento-5{grid-column:span 2;grid-row:span 1}
.bento-6{grid-column:span 2;grid-row:span 1}
.bento-7{grid-column:span 2;grid-row:span 1}
.bento-8{grid-column:span 2;grid-row:span 1}
@media (max-width:900px){
.bento-grid{grid-template-columns:repeat(2, 1fr)}
.bento-1{grid-column:span 2;grid-row:span 1;min-height:340px}
.bento-2{grid-column:span 2;grid-row:span 1;min-height:340px}
.bento-3, .bento-4, .bento-5, .bento-6, .bento-7, .bento-8{grid-column:span 2;grid-row:span 1}
}
/* On true mobile (≤560px), every bento card stacks in one column with
identical width and a unified minimum height, so the section reads as
a tidy stack rather than a ladder of varying card sizes. The 1/2 hero
override is reset so cards 3–8 are not visually shorter than 1 and 2. */
@media (max-width:560px){
.bento-grid{grid-template-columns:1fr}
.bento-1, .bento-2, .bento-3, .bento-4, .bento-5, .bento-6, .bento-7, .bento-8{
grid-column:span 1;
min-height:340px;
}
.bento-card{min-height:340px}
}
.bento-card{
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid rgba(0,0,0,.05);
border-radius:24px;
padding:36px;
position:relative;overflow:hidden;
display:flex;flex-direction:column;justify-content:space-between;gap:24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.04),
0 12px 32px rgba(60,40,20,.06);
transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.bento-card:hover{
transform:translateY(-4px);
border-color:rgba(126,209,205,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 1px rgba(126,209,205,.18),
0 0 32px rgba(126,209,205,.16),
0 4px 8px rgba(60,40,20,.08),
0 24px 56px rgba(60,40,20,.12);
}
.bento-text{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.bento-eyebrow{
font-family:'Geist',sans-serif;font-size:11px;font-weight:600;
letter-spacing:0.16em;text-transform:uppercase;
color:var(--teal-ink);
}
.bento-headline{
font-family:'Fraunces',serif;font-weight:300;
font-size:clamp(20px, 1.9vw, 26px);
line-height:1.2;letter-spacing:-0.02em;
color:var(--ink);margin:0;text-wrap:balance;
}
.bento-1 .bento-headline{font-size:clamp(26px, 2.4vw, 34px)}
.bento-body{
font-family:'Geist',sans-serif;
font-size:14.5px;line-height:1.55;
color:var(--ink-2);margin:0;
max-width:42ch;text-wrap:pretty;
}
/* Bento card visuals */
.bento-visual{margin-top:auto}
/* For "From anywhere" (hotkey) and "Yours alone" (containment circle),
centre the graphic vertically in the space below the text rather than
pinning it to the bottom of the card. */
.bento-4 .bento-visual,
.bento-7 .bento-visual{
flex:1;
display:flex;
align-items:center;
justify-content:center;
margin-top:0;
}
/* Card 1: stylised storage indicator with PASTEL colour palette.
Bar has integrated timeline labels at its endpoints (Day 1 / Three
years later) — the bar IS the timeline, no separate strip needed. */
.storage-visual{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.storage-bar{
position:relative;
width:100%;height:26px;border-radius:7px;
background:linear-gradient(180deg, #ECE7DA, #DDD7C7);
border:.5px solid rgba(0,0,0,.06);
box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
display:flex;overflow:visible;
margin-top:14px;
}
.storage-bar > .storage-seg, .storage-bar > .storage-sweep{overflow:hidden}
.storage-tick{
position:absolute;
font-family:'Geist',sans-serif;font-size:10px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;
white-space:nowrap;
}
.tick-day{
top:-22px;left:0;
color:var(--teal-ink);
}
.tick-now{
top:-22px;right:0;
color:rgba(180,90,40,.85);
}
.storage-seg{
height:100%;
transition:width 1.2s var(--ease-soft);
}
/* Pastel palette — softer, less vibrant */
.seg-apps {background:linear-gradient(180deg, #B6CFF7, #9BB5E5); animation:segGrow1 9s ease-in-out infinite}
.seg-photos {background:linear-gradient(180deg, #F8B8B8, #E89A9A); animation:segGrow2 9s ease-in-out infinite}
.seg-mail {background:linear-gradient(180deg, #F8D2A1, #E5B97D); animation:segGrow3 9s ease-in-out infinite}
.seg-docs {background:linear-gradient(180deg, #F4E08C, #DCC76A); animation:segGrow4 9s ease-in-out infinite}
.seg-system {background:linear-gradient(180deg, #DDC4F2, #BFA0E2); animation:segGrow5 9s ease-in-out infinite}
.seg-other {background:linear-gradient(180deg, #D4CFC2, #B8B2A2); animation:segGrow6 9s ease-in-out infinite}
.seg-music {background:linear-gradient(180deg, #B5DCBE, #95C29F); animation:segGrow7 9s ease-in-out infinite}
.seg-free {flex:1;background:transparent}
/* Round the first/last segment corners so the bar reads as one unit */
.storage-bar .seg-apps{border-radius:7px 0 0 7px}
.storage-bar .seg-free{border-radius:0 7px 7px 0}
@keyframes segGrow1{0%,100%{width:5%} 70%,82%{width:14%}}
@keyframes segGrow2{0%,100%{width:4%} 70%,82%{width:18%}}
@keyframes segGrow3{0%,100%{width:3%} 70%,82%{width:9%}}
@keyframes segGrow4{0%,100%{width:3%} 70%,82%{width:11%}}
@keyframes segGrow5{0%,100%{width:6%} 70%,82%{width:13%}}
@keyframes segGrow6{0%,100%{width:2%} 70%,82%{width:10%}}
@keyframes segGrow7{0%,100%{width:2%} 70%,82%{width:8%}}
/* Mint sweep that passes across the bar during the polish */
.storage-sweep{
position:absolute;top:0;bottom:0;left:-30%;
width:24%;
background:linear-gradient(90deg,
rgba(155,217,200,0) 0%,
rgba(155,217,200,.85) 50%,
rgba(155,217,200,0) 100%);
filter:blur(2px);
pointer-events:none;
animation:storageSweep 9s ease-in-out infinite;
}
@keyframes storageSweep{
0%, 80% {left:-30%; opacity:0}
82% {left:-10%; opacity:1}
92% {left:90%; opacity:1}
96%,100% {left:130%; opacity:0}
}
/* Legend below the bar */
.storage-legend{
display:flex;flex-wrap:wrap;gap:14px 18px;
font-family:'Geist',sans-serif;font-size:11px;color:var(--ink-3);
}
.legend-item{display:inline-flex;align-items:center;gap:6px}
.legend-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06)}
/* Pastel swatches */
.sw-apps {background:#B6CFF7}
.sw-photos{background:#F8B8B8}
.sw-mail {background:#F8D2A1}
.sw-docs {background:#F4E08C}
.sw-system{background:#DDC4F2}
.sw-other {background:#D4CFC2}
/* Card 2: mini app rows — one line per row, real brand icons */
.apps-visual{display:flex;flex-direction:column;gap:10px}
.mini-app-row{
display:flex;align-items:center;gap:10px;
padding:10px 12px;
background:rgba(255,255,255,.55);
border:1px solid rgba(0,0,0,.05);
border-radius:10px;
}
.mini-app-icon{
width:28px;height:28px;border-radius:7px;
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;overflow:hidden;
background:transparent;
box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.mini-app-icon img, .mini-app-icon svg{width:100%;height:100%;display:block;object-fit:cover}
.mini-app-meta{flex:1;min-width:0;display:flex;align-items:center}
.mini-app-name{
font-family:'Geist',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink);
display:flex;align-items:center;gap:7px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mini-pill{
display:inline-flex;align-items:center;
font-family:'Geist',sans-serif;
font-size:9px;font-weight:600;letter-spacing:.04em;
padding:1px 6px;border-radius:999px;
text-transform:uppercase;
}
.mini-pill-known{background:rgba(94,203,136,.18);color:#2d7048}
.mini-pill-hidden{background:rgba(144,197,227,.22);color:#3a6680}
/* Card 3 — Menu bar dial.
Mirrors MenuBarRingRenderer.swift: 12 radial ticks. Filled ticks
lit clockwise from 12 with a 70%→100% alpha trail, colour shifts
teal (healthy) → amber (warming) → red (critical), then a soft
mint flash on the Polish and reset back to teal. Sized to match
the auto-clear gauge in the adjacent bento card (96×96). */
.dial-visual{display:flex;align-items:center;justify-content:center}
.menu-dial{
position:relative;
width:96px;height:96px;
display:flex;align-items:center;justify-content:center;
}
.menu-dial-svg{
width:100%;height:100%;display:block;
position:relative;z-index:1;
/* State-band colour palette — overridden by [data-theme="dark"]. */
--c-healthy:#2E7A4D;
--c-warming:#D28025;
--c-critical:#C8381E;
--c-clear:#7DC2A8;
--tick-color:var(--c-healthy);
transition:--tick-color .35s ease;
}
.menu-dial-svg[data-state="healthy"] {--tick-color:var(--c-healthy)}
.menu-dial-svg[data-state="warming"] {--tick-color:var(--c-warming)}
.menu-dial-svg[data-state="critical"]{--tick-color:var(--c-critical)}
.menu-dial-svg[data-state="clear"] {--tick-color:var(--c-clear)}
.md-tick{
/* Empty ticks are a neutral hairline regardless of state, just
like the app's emptyColour (Color.black/white at 22% alpha). */
stroke:rgba(0,0,0,.22);
stroke-linecap:round;
stroke-width:2.6;
transition:stroke-width .15s ease, stroke .35s ease, opacity .15s ease;
}
.md-tick.lit{
/* Lit ticks pick up the active state colour. JS sets per-tick
opacity inline (70%→100%) for the comet-tail. */
stroke:var(--tick-color);
stroke-width:5;
}
/* Soft radial flash behind the dial at the polish moment. JS adds
.flashing for the brief window matching the gauge's polish phase. */
.menu-dial-flash{
position:absolute;inset:-14px;
border-radius:50%;
background:radial-gradient(circle, rgba(155,217,200,.55) 0%, rgba(155,217,200,.18) 45%, transparent 75%);
filter:blur(6px);
opacity:0;
pointer-events:none;
z-index:0;
transform:scale(.85);
transition:opacity .55s ease, transform .55s ease;
}
.menu-dial.flashing .menu-dial-flash{
opacity:1;
transform:scale(1.08);
}
/* Card 3 (legacy clear-visual selectors are kept below for the
abandoned pillow design — unused now but harmless). */
/* Card 3: One-tap Polish — mini pillow with aurora glow + sparks */
.clear-visual{
display:flex;align-items:center;justify-content:center;
height:100%;min-height:120px;
}
.clear-stage{
position:relative;width:140px;height:120px;
display:flex;align-items:center;justify-content:center;
}
.clear-aurora{
position:absolute;width:140px;height:140px;border-radius:50%;
background:radial-gradient(circle, rgba(155,217,200,.55) 0%, rgba(195,224,210,.22) 50%, transparent 80%);
filter:blur(14px);
animation:clearAuroraBreath 4.5s ease-in-out infinite;
}
@keyframes clearAuroraBreath{
0%, 100% {transform:scale(.85);opacity:.7}
50% {transform:scale(1.05);opacity:1}
}
.mini-pillow{
position:relative;z-index:2;
width:80px;height:80px;border-radius:50%;
background:
radial-gradient(circle at 30% 26%, rgba(255,255,255,.92), transparent 58%),
radial-gradient(circle at 50% 55%, rgba(191,224,204,.34) 0%, transparent 72%),
linear-gradient(180deg, #fefdf7 0%, #f4f7f3 100%);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.85),
inset 0 0 0 1px rgba(155,200,200,.32),
0 0 22px rgba(155,217,210,.4),
0 1px 2px rgba(60,40,20,.06),
0 14px 28px rgba(60,118,114,.14);
display:flex;align-items:center;justify-content:center;
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-size:19px;color:var(--teal-ink);
}
.clear-spark{
position:absolute;width:4px;height:4px;border-radius:50%;
background:#fff;
box-shadow:0 0 6px rgba(255,255,255,.9), 0 0 14px rgba(155,217,200,.6);
z-index:3;opacity:0;
animation:clearSparkFly 4.5s ease-out infinite;
}
.clear-spark.s1{top:8%;left:50%;animation-delay:.4s}
.clear-spark.s2{top:50%;right:0;animation-delay:.6s}
.clear-spark.s3{bottom:8%;right:30%;animation-delay:.8s}
.clear-spark.s4{bottom:25%;left:5%;animation-delay:1.0s}
.clear-spark.s5{top:30%;left:5%;animation-delay:1.2s}
@keyframes clearSparkFly{
0%, 80%, 100% {opacity:0;transform:translate(0,0) scale(.4)}
10% {opacity:1;transform:translate(0,0) scale(1)}
20%, 60% {opacity:.8}
70% {opacity:0;transform:translate(var(--sx,0),var(--sy,0)) scale(1.2)}
}
/* Card 4: Auto-Polish — circular percentage gauge */
.auto-visual{display:flex;align-items:center;justify-content:center}
.auto-gauge{
position:relative;width:96px;height:96px;
display:flex;align-items:center;justify-content:center;
}
.auto-gauge svg{width:100%;height:100%}
.auto-progress{
animation:autoProgress 5.5s ease-in-out infinite;
transition:stroke .4s var(--ease-soft);
}
@keyframes autoProgress{
0% {stroke-dashoffset:185; stroke:url(#autoGaugeWarm)}
60% {stroke-dashoffset:21; stroke:url(#autoGaugeWarm)}
64% {stroke:#F8B8B8}
72% {stroke-dashoffset:21; stroke:url(#autoGaugeMint)}
88% {stroke-dashoffset:170; stroke:url(#autoGaugeMint)}
100% {stroke-dashoffset:185; stroke:url(#autoGaugeWarm)}
}
.auto-pct{
position:absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-variation-settings:"opsz" 24;
font-size:22px;color:var(--ink);
letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
text-align:center;
animation:autoPct 5.5s ease-in-out infinite;
}
@keyframes autoPct{
0% {content:"8%"; color:var(--ink)}
/* JS-free: just animate the visible color through the cycle. */
60% {color:#A65A30}
72% {color:var(--teal-ink)}
88% {color:var(--teal-ink)}
100% {color:var(--ink)}
}
/* Card 6: Knows the culprits.
A single featured leaky-app row. Memory grows + idle climbs while
the user "isn't looking", a warm border tint intensifies; on the
clear beat the row mint-flashes and a "Paused" pill briefly fades
in before everything resets. JS drives the numbers (see
startCulpritTicker in hero.js). */
.culprit-visual{
display:flex;align-items:center;justify-content:center;
min-height:140px;
padding:6px 0 4px;
}
.culprit-card{
position:relative;
width:100%;max-width:280px;
display:flex;flex-direction:column;gap:0;
padding:14px 16px;
border-radius:14px;
background:rgba(254,253,247,.78);
/* The warm-tint progression lives on the border (intensifies)
and the box-shadow ring (grows). Both fade softly back when
--warm drops to 0. The mint clear state overrides both. */
--warm:0;
border:1px solid color-mix(in srgb, rgba(0,0,0,.06), rgba(228,124,52,.85) calc(var(--warm) * 100%));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 calc(var(--warm) * 1.4px) rgba(238,134,55, calc(.42 * var(--warm))),
0 0 calc(var(--warm) * 28px) rgba(238,134,55, calc(.28 * var(--warm))),
0 1px 2px rgba(60,40,20,.05),
0 8px 22px rgba(60,40,20,.08);
transition:border-color .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.culprit-card.clearing{
border-color:rgba(126,209,205,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 1.5px rgba(126,209,205,.45),
0 0 28px rgba(155,217,200,.45),
0 8px 22px rgba(60,120,110,.16);
}
.culprit-row{
position:relative;z-index:1;
display:flex;align-items:center;gap:12px;
}
.culprit-icon{
width:34px;height:34px;flex-shrink:0;
border-radius:8px;overflow:hidden;
display:inline-flex;
box-shadow:
inset 0 0 0 .5px rgba(0,0,0,.08),
0 1px 2px rgba(60,40,20,.10),
0 4px 10px rgba(60,40,20,.10);
}
.culprit-icon svg,
.culprit-icon img{width:100%;height:100%;display:block;object-fit:cover}
.culprit-info{
flex:1;min-width:0;
display:flex;flex-direction:column;gap:1px;
}
.culprit-name{
font-family:'Geist',sans-serif;font-size:13.5px;font-weight:600;
color:var(--ink);
line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.culprit-idle{
font-family:'Geist',sans-serif;font-size:11.5px;font-weight:500;
color:var(--ink-3);
line-height:1.2;
font-variant-numeric:tabular-nums;
transition:color .35s var(--ease-soft);
}
.culprit-card.clearing .culprit-idle{color:var(--teal-ink)}
.culprit-mem{
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-variation-settings:"opsz" 24;
color:var(--ink);
font-variant-numeric:tabular-nums;
letter-spacing:-0.015em;
line-height:1;
display:inline-flex;align-items:baseline;
flex-shrink:0;
}
.culprit-mem-num{font-size:22px}
.culprit-mem-unit{
font-family:'Geist',sans-serif;font-style:normal;font-weight:500;
font-size:11px;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-2);
margin-left:3px;
}
.culprit-card.clearing .culprit-mem-num,
.culprit-card.clearing .culprit-mem-unit{color:var(--teal-ink)}
/* (The corner "Paused" pill was removed — the mint card flash plus
"Just paused" replacing the idle text already tells the story
without overlapping the memory number.) */
/* Dark-mode variant. */
[data-theme="dark"] .culprit-card{
background:rgba(255,255,255,.05);
border:1px solid color-mix(in srgb, rgba(255,255,255,.08), rgba(255,140,80,.85) calc(var(--warm) * 100%));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 0 0 calc(var(--warm) * 1.4px) rgba(255,140,80, calc(.55 * var(--warm))),
0 0 calc(var(--warm) * 30px) rgba(255,140,80, calc(.35 * var(--warm))),
0 1px 2px rgba(0,0,0,.45),
0 8px 22px rgba(0,0,0,.45);
}
/* Photoshop icon — its warm-brown shadow is invisible on dark glass.
Replace with a subtle white-glass inset + deeper drop. */
[data-theme="dark"] .culprit-icon{
box-shadow:
inset 0 0 0 .5px rgba(255,255,255,.10),
0 1px 2px rgba(0,0,0,.5),
0 4px 10px rgba(0,0,0,.45);
}
/* (.culprit-glow removed — warm progression now lives on the
card's own border + ring, not an inner radial gradient.) */
[data-theme="dark"] .culprit-name{color:var(--text)}
[data-theme="dark"] .culprit-idle{color:var(--text-muted)}
[data-theme="dark"] .culprit-mem,
[data-theme="dark"] .culprit-mem-num{color:var(--text)}
[data-theme="dark"] .culprit-mem-unit{color:var(--text-soft)}
[data-theme="dark"] .culprit-card.clearing{
border-color:rgba(155,217,200,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 1.5px rgba(155,217,200,.45),
0 0 30px rgba(155,217,200,.45),
0 10px 26px rgba(0,0,0,.5);
}
[data-theme="dark"] .culprit-card.clearing .culprit-idle,
[data-theme="dark"] .culprit-card.clearing .culprit-mem-num,
[data-theme="dark"] .culprit-card.clearing .culprit-mem-unit{color:var(--accent)}
[data-theme="dark"] .culprit-pause{
background:rgba(155,217,200,.22);
color:var(--accent);
box-shadow:inset 0 0 0 .5px rgba(155,217,200,.45);
}
/* Card 6 (legacy focus-notification selectors below are kept for the
abandoned design — they're harmless without their markup.) */
/* Card 6: Focus mode — three notification cards appear, hold, fade.
Larger and more prominent. No moon — just the silencing. */
.focus-visual{display:flex;align-items:flex-start;justify-content:center;min-height:160px;padding-top:6px}
.focus-stack{
position:relative;width:100%;max-width:240px;
display:flex;flex-direction:column;align-items:stretch;gap:8px;
}
.focus-notif{
display:flex;align-items:center;gap:10px;
padding:10px 14px;border-radius:12px;
background:rgba(255,255,255,.92);
border:1px solid rgba(0,0,0,.06);
box-shadow:0 1px 2px rgba(60,40,20,.06), 0 6px 14px rgba(60,40,20,.08);
animation:focusFade 6s ease-in-out infinite;
}
.fn1{animation-delay:0s}
.fn2{animation-delay:.25s}
.fn3{animation-delay:.5s}
.fn-app{
width:30px;height:30px;border-radius:8px;
flex-shrink:0;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.fn-app img{width:100%;height:100%;display:block;object-fit:cover}
.fn-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fn-title{
font-family:'Geist',sans-serif;font-size:13px;font-weight:600;color:var(--ink);
line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fn-msg{
font-family:'Geist',sans-serif;font-size:11px;color:var(--ink-3);
line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@keyframes focusFade{
0%, 28% {opacity:1;transform:translateY(0)}
46%, 100% {opacity:0;transform:translateX(28px) scale(.94);filter:blur(2px)}
}
/* Card 8 (Subtle warning) — small Finder window in centre.
On hover, the bento card itself runs the actual Shiny edge-glow
sequence: orange (strain) → mint (cleared) → fade. */
/* Two stacked overlay layers, each pre-painted with its inset glow.
We crossfade between them to get the colour transition. */
.card-edge-warm,
.card-edge-mint{
position:absolute;inset:0;border-radius:24px;
pointer-events:none;
opacity:0;
z-index:1;
transition:opacity 1.2s var(--ease-soft);
}
.card-edge-warm{
/* Even softer, more diffuse — barely there */
box-shadow:
inset 0 60px 30px -28px rgba(228,116,50,.20),
inset 0 -60px 30px -28px rgba(228,116,50,.20),
inset 60px 0 30px -28px rgba(228,116,50,.20),
inset -60px 0 30px -28px rgba(228,116,50,.20);
}
.card-edge-mint{
box-shadow:
inset 0 60px 30px -28px rgba(155,217,200,.22),
inset 0 -60px 30px -28px rgba(155,217,200,.22),
inset 60px 0 30px -28px rgba(155,217,200,.22),
inset -60px 0 30px -28px rgba(155,217,200,.22);
}
.bento-8:hover .card-edge-warm{animation:bentoEdgeWarm 4.5s ease-in-out infinite}
.bento-8:hover .card-edge-mint{animation:bentoEdgeMint 4.5s ease-in-out infinite}
/* Orange holds, then crossfades quickly into mint (only ~4% gap),
instead of the slow 16% lull the previous timing had. */
@keyframes bentoEdgeWarm{
0%, 100% {opacity:0}
12%, 36% {opacity:.5}
44% {opacity:0}
}
@keyframes bentoEdgeMint{
0%, 36% {opacity:0}
44%, 68% {opacity:.5}
82%, 100% {opacity:0}
}
/* Override the generic mint-border hover for bento-8 — it's noisy
alongside the custom edge-glow story. */
.bento-card.bento-8:hover{
border-color:rgba(0,0,0,.05);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 4px 8px rgba(60,40,20,.08),
0 24px 56px rgba(60,40,20,.12);
}
/* ============================================================
Subtle warning — stack of three Finder windows that appear
sequentially. The front window is fully detailed (modeled on
the real macOS Finder list view); the two behind it show only
their chrome peeking out from the corner, like windows piling
up on a desk that hasn't been tidied.
============================================================ */
.finder-stack-visual{
position:relative;
display:flex;align-items:center;justify-content:center;
min-height:160px;
padding:18px 24px 14px;
z-index:2;
}
.finder-stack{
position:relative;
width:212px;height:152px;
/* Visually 75% size; internal layout stays at native pixels so the
sidebar/rows/traffic lights don't compress unevenly. */
transform:scale(.75);
transform-origin:center;
}
/* Each window is the same size; .fm-pos-N positions them in the stack.
The front (.fm-pos-1) sits at (0,0); deeper windows drift up-left
with subtle tilt so the stack reads as a real desktop pile. */
.finder-mini{
position:absolute;inset:0;
background:#FFFFFF;
border:.5px solid rgba(0,0,0,.14);
border-radius:9px;
overflow:hidden;
box-shadow:
0 .5px 1px rgba(0,0,0,.06),
0 3px 8px rgba(0,0,0,.08),
0 14px 30px rgba(0,0,0,.12);
font-family:-apple-system,'SF Pro Text','Geist',system-ui,sans-serif;
display:flex;flex-direction:column;
transform-origin:50% 50%;
opacity:0;
will-change:transform, opacity;
}
/* Default (out-of-view) state — windows are hidden until the stack
scrolls into view, at which point each animates to its resting
transform with a staggered delay. */
.finder-stack:not(.in-view) .fm-pos{opacity:0}
.finder-stack.in-view .fm-pos-1{
animation:fmAppear1 .9s cubic-bezier(.34,1.4,.64,1) .2s both;
}
.finder-stack.in-view .fm-pos-2{
animation:fmAppear2 .9s cubic-bezier(.34,1.4,.64,1) 1.6s both;
}
.finder-stack.in-view .fm-pos-3{
animation:fmAppear3 .9s cubic-bezier(.34,1.4,.64,1) 3.0s both;
}
@keyframes fmAppear1{
0% {opacity:0; transform:translate(34px, 28px) rotate(5deg) scale(.94)}
100% {opacity:1; transform:translate(0, 0) rotate(0deg) scale(1)}
}
@keyframes fmAppear2{
0% {opacity:0; transform:translate(28px, 22px) rotate(6deg) scale(.94)}
100% {opacity:.95; transform:translate(-14px, -10px) rotate(-1.6deg) scale(1)}
}
@keyframes fmAppear3{
0% {opacity:0; transform:translate(22px, 18px) rotate(7deg) scale(.94)}
100% {opacity:.88; transform:translate(-28px, -22px) rotate(-3.4deg) scale(1)}
}
/* Top toolbar — combined title bar + toolbar (modern macOS Finder).
Traffic lights, back/forward, centred title, view-mode segmented
control, action icons, then a search field — all in one row. */
.finder-mini-bar{
height:22px;display:flex;align-items:center;
padding:0 7px;gap:4px;
background:linear-gradient(180deg, #F6F6F6 0%, #ECECEC 100%);
border-bottom:.5px solid rgba(0,0,0,.10);
position:relative;
flex-shrink:0;
}
.finder-mini-tl{
width:6px;height:6px;border-radius:50%;display:inline-block;
box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);
}
.tl-red{background:#FF5F57}
.tl-yellow{background:#FEBC2E}
.tl-green{background:#28C840}
.finder-mini-bar > .finder-mini-tl + .finder-mini-tl{margin-left:2px}
.fmt-arrows{
display:inline-flex;gap:1.5px;margin-left:4px;
}
.fmt-arrow{
width:8px;height:8px;border-radius:2px;
display:inline-flex;align-items:center;justify-content:center;
font-size:7px;font-weight:600;color:rgba(0,0,0,.45);
background:rgba(0,0,0,.04);
line-height:1;
}
.finder-mini-title{
position:absolute;left:50%;top:50%;
transform:translate(-50%, -50%);
font-size:6.5px;font-weight:600;color:rgba(0,0,0,.82);
letter-spacing:-0.005em;pointer-events:none;
white-space:nowrap;
}
/* View-mode segmented control: 4 little icons. Hidden at this mini
scale because they overlap the centered window title — the toolbar
reads cleaner with just traffic lights + arrows + title. */
.fmt-views,.fmt-acts,.fmt-search{display:none}
.fmt-views.show{
display:inline-flex;margin-left:auto;
background:rgba(0,0,0,.05);border-radius:2.5px;
padding:1px;gap:1px;
}
.fmt-view{
width:9px;height:8px;border-radius:1.5px;
background:rgba(0,0,0,.06);
position:relative;
}
.fmt-view.active{
background:rgba(255,255,255,.9);
box-shadow:0 .5px 1px rgba(0,0,0,.10);
}
/* Tiny glyph hint per view mode */
.fmt-view-icon::before{
content:'';position:absolute;inset:1.5px;
background-image:
radial-gradient(circle, rgba(0,0,0,.32) .6px, transparent .7px),
radial-gradient(circle, rgba(0,0,0,.32) .6px, transparent .7px);
background-size:3px 3px;
background-position:0 0, 3px 0;
}
.fmt-view-list::before{
content:'';position:absolute;left:1.5px;right:1.5px;top:1.5px;height:1px;
background:rgba(0,0,0,.55);
box-shadow:0 1.5px 0 rgba(0,0,0,.55), 0 3px 0 rgba(0,0,0,.55);
}
.fmt-view-col::before{
content:'';position:absolute;top:1.5px;bottom:1.5px;left:1.5px;width:1px;
background:rgba(0,0,0,.32);
box-shadow:1.5px 0 0 rgba(0,0,0,.32), 3px 0 0 rgba(0,0,0,.32);
}
.fmt-view-gal::before{
content:'';position:absolute;left:1.5px;right:1.5px;top:1.5px;bottom:3px;
background:rgba(0,0,0,.30);border-radius:.5px;
}
.fmt-view-gal::after{
content:'';position:absolute;left:1.5px;right:1.5px;bottom:1.5px;height:1px;
background:rgba(0,0,0,.30);
}
/* Action icons (tag, share, more) */
.fmt-acts{display:inline-flex;gap:1.5px;margin-left:3px}
.fmt-act{
width:8px;height:8px;border-radius:50%;
background:rgba(0,0,0,.06);
}
/* Search field */
.fmt-search{
display:inline-flex;align-items:center;gap:2px;
height:10px;padding:0 3px;
margin-left:3px;
border-radius:2px;
background:rgba(255,255,255,.7);
border:.5px solid rgba(0,0,0,.10);
width:36px;
}
.fmt-search-glass{
width:3px;height:3px;border-radius:50%;
border:.5px solid rgba(0,0,0,.45);
flex-shrink:0;
position:relative;
}
.fmt-search-glass::after{
content:'';position:absolute;right:-1.5px;bottom:-1.5px;
width:2px;height:.5px;
background:rgba(0,0,0,.45);
transform:rotate(45deg);
}
.fmt-search-label{
font-size:5px;color:rgba(0,0,0,.4);font-weight:400;
}
/* Body — sidebar + list content */
.finder-mini-body{
display:flex;flex:1;min-height:0;
background:rgba(255,255,255,1);
}
.finder-mini-sidebar{
width:62px;flex-shrink:0;
padding:5px 3px;
background:linear-gradient(180deg, #F4F4F5 0%, #EDEDEE 100%);
border-right:.5px solid rgba(0,0,0,.07);
display:flex;flex-direction:column;gap:.5px;
overflow:hidden;
}
.fms-section{
font-size:4.5px;font-weight:600;letter-spacing:.04em;
color:rgba(0,0,0,.38);
padding:2px 3px .5px;
}
.fms-section + .fms-section,
.fms-item + .fms-section{margin-top:2px}
.fms-item{
display:flex;align-items:center;gap:3px;
padding:1px 3px;border-radius:2.5px;
font-size:5px;color:rgba(0,0,0,.78);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.3;
}
.fms-item.active{
background:rgba(0,122,255,.18);
color:rgba(0,0,0,.92);font-weight:500;
}
.fms-dot{
width:5px;height:5px;border-radius:1.2px;flex-shrink:0;display:inline-block;
background:rgba(0,0,0,.42)!important;
box-shadow:none;
}
.fms-item.active .fms-dot{background:#0A84FF!important}
/* List view content — header + rows */
.finder-mini-content{
flex:1;padding:0;
display:flex;flex-direction:column;
background:#fff;
overflow:hidden;
}
.fmc-row{
display:grid;
grid-template-columns:1fr 30px 28px;
gap:4px;
padding:1.5px 5px;
font-size:5px;color:rgba(0,0,0,.82);
border-bottom:.5px solid rgba(0,0,0,.04);
align-items:center;
line-height:1.2;
}
.fmc-row-head{
background:linear-gradient(180deg, #F6F6F6, #EDEDED);
font-size:4.5px;font-weight:600;color:rgba(0,0,0,.5);
letter-spacing:0;
padding:2px 5px;
border-bottom:.5px solid rgba(0,0,0,.10);
}
.fmc-row:nth-child(even):not(.fmc-row-head){background:rgba(0,0,0,.025)}
.fmc-row-empty{min-height:8px;padding:0}
.fmc-col{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
display:flex;align-items:center;gap:3px;
}
.fmc-col-size,.fmc-col-kind{color:rgba(0,0,0,.55)}
.fmc-col-size{justify-content:flex-end}
/* File-type icons — small coloured badges per kind */
.fmc-icn{
width:6px;height:7.5px;flex-shrink:0;border-radius:.8px;
position:relative;
box-shadow:0 .5px 0 rgba(0,0,0,.06);
}
.fmc-png{background:linear-gradient(180deg, #6FB7FF, #4A93D8)}
.fmc-png::after{content:'';position:absolute;top:0;right:0;
border-top:1.5px solid #FFFFFF;border-left:1.5px solid transparent;
border-bottom:1.5px solid transparent;border-right:1.5px solid #FFFFFF;
width:0;height:0;}
.fmc-pdf{background:linear-gradient(180deg, #FF7A6E, #E0473C)}
.fmc-ppt{background:linear-gradient(180deg, #FFB04F, #E58820)}
.fmc-doc{background:linear-gradient(180deg, #5FA9FF, #3D7EBE)}
/* Path bar at the bottom */
.finder-mini-pathbar{
display:flex;align-items:center;gap:2px;
height:10px;padding:0 5px;
background:linear-gradient(180deg, #F4F4F4, #EAEAEA);
border-top:.5px solid rgba(0,0,0,.07);
font-size:4.5px;color:rgba(0,0,0,.55);
flex-shrink:0;
}
.fmpb-mac{
width:4.5px;height:3.5px;border-radius:.5px;
background:linear-gradient(180deg, #BFC0C2, #8A8C8F);
position:relative;flex-shrink:0;
}
.fmpb-mac::after{
content:'';position:absolute;left:1px;right:1px;bottom:-.5px;height:.5px;
background:rgba(0,0,0,.22);
}
.fmpb-crumb{font-weight:500}
.fmpb-sep{color:rgba(0,0,0,.35);font-weight:400}
/* Card 8: Local only — abstract circle with arrows bouncing back */
.bento-8 .bento-visual{display:flex;align-items:center;justify-content:center}
.local-stage{
position:relative;
width:160px;height:140px;
display:flex;align-items:center;justify-content:center;
}
.local-perimeter{
position:absolute;
width:120px;height:120px;
border-radius:50%;
border:1.5px dashed rgba(126,209,205,.55);
background:radial-gradient(circle, rgba(126,209,205,.10), transparent 70%);
animation:perimeterBreath 4.5s ease-in-out infinite;
}
@keyframes perimeterBreath{
0%, 100% {transform:scale(.96);opacity:.75}
50% {transform:scale(1.04);opacity:1}
}
.local-core{
position:relative;z-index:2;
width:36px;height:36px;border-radius:50%;
background:radial-gradient(circle, rgba(155,217,200,.85) 0%, rgba(126,209,205,.5) 60%, transparent 100%);
box-shadow:0 0 18px rgba(155,217,200,.5);
animation:perimeterCore 4.5s ease-in-out infinite;
}
@keyframes perimeterCore{
0%, 100% {transform:scale(.92);opacity:.85}
50% {transform:scale(1.05);opacity:1}
}
/* Arrows live entirely inside the perimeter — they push outward from
the core, taper as they near the dashed boundary, and retreat without
ever breaching it. */
.local-arrow{
position:absolute;
top:50%;left:50%;
width:0;height:1.5px;
background:linear-gradient(90deg, rgba(228,116,50,0), rgba(228,116,50,.7));
border-radius:1px;
/* Pivot at the inner (left) end so growth + rotation both originate
at the centre of the circle. */
transform-origin:0% 50%;
}
.local-arrow::after{
content:'';position:absolute;right:-1px;top:-3px;
width:0;height:0;
border-left:6px solid rgba(228,116,50,.7);
border-top:3.5px solid transparent;
border-bottom:3.5px solid transparent;
}
/* Each arrow points outward along one of the four cardinal directions.
The inner end starts 16px from centre; growth + retreat happens
within a 38px reach, so the tip never exceeds 54px (perimeter is
58px). Staggered delays keep the field feeling alive without ever
showing all four at peak together. */
.la1{transform:rotate(-90deg) translateX(16px); animation:localArrowReach 4s ease-in-out infinite}
.la2{transform:rotate(0deg) translateX(16px); animation:localArrowReach 4s ease-in-out infinite 1s}
.la3{transform:rotate(90deg) translateX(16px); animation:localArrowReach 4s ease-in-out infinite 2s}
.la4{transform:rotate(180deg) translateX(16px); animation:localArrowReach 4s ease-in-out infinite 3s}
@keyframes localArrowReach{
0% {opacity:0; width:0}
18% {opacity:1; width:18px}
42% {opacity:1; width:38px}
56% {opacity:.85; width:30px}
72% {opacity:.4; width:14px}
85%, 100% {opacity:0; width:0}
}
/* Sneaky Apps card — Known rows breathe mint, Hidden rows breathe pink.
Logi Options + Adobe Updater are both Hidden, so they pulse together
to reinforce that they belong to the same category. */
.bento-2 .mini-app-row{position:relative;overflow:hidden}
.bento-2 .mini-app-row:nth-child(1){animation:rowGlowKnown 6s ease-in-out infinite}
.bento-2 .mini-app-row:nth-child(2),
.bento-2 .mini-app-row:nth-child(3){animation:rowGlowHidden 6s ease-in-out infinite 3s}
@keyframes rowGlowKnown{
0%, 100% {background:rgba(255,255,255,.55)}
50% {background:rgba(155,217,200,.20)}
}
@keyframes rowGlowHidden{
0%, 100% {background:rgba(255,255,255,.55)}
50% {background:rgba(248,184,184,.22)}
}
/* Polish-pillow card — pillow gently pulses with mint glow */
.clear-visual .mini-pillow{animation:pillowBreath 4.5s ease-in-out infinite}
@keyframes pillowBreath{
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 0 0 1px rgba(155,200,200,.32),
0 0 18px rgba(155,217,210,.32),
0 1px 2px rgba(60,40,20,.06),
0 14px 28px rgba(60,118,114,.14);
transform:translateY(0);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 0 0 1px rgba(155,200,200,.42),
0 0 28px rgba(155,217,210,.55),
0 1px 2px rgba(60,40,20,.06),
0 18px 34px rgba(60,118,114,.18);
transform:translateY(-2px);
}
}
/* Hotkey card — keys press in sequence */
.kbd-row .kbd{transition:transform .25s var(--ease-soft), background .25s var(--ease-soft)}
.kbd-row .kbd:nth-child(1){animation:kbdPress 4.5s ease-in-out infinite}
.kbd-row .kbd:nth-child(3){animation:kbdPress 4.5s ease-in-out infinite .5s}
.kbd-row .kbd:nth-child(5){animation:kbdPress 4.5s ease-in-out infinite 1.0s}
@keyframes kbdPress{
0%, 28%, 100% {
transform:translateY(0);
background:linear-gradient(180deg, #fff 0%, #f4f1e8 100%);
border-bottom-width:2px;
}
10%, 18% {
transform:translateY(2px);
background:linear-gradient(180deg, #f4f1e8 0%, #ebebe0 100%);
border-bottom-width:1px;
box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
}
/* Big ring card already breathes via .breathing-ring::before pulse */
/* Card 5: keyboard chips */
.kbd-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kbd{
display:inline-flex;align-items:center;justify-content:center;
min-width:38px;height:38px;
padding:0 10px;
background:linear-gradient(180deg, #fff 0%, #f4f1e8 100%);
border:1px solid rgba(0,0,0,.08);
border-bottom-color:rgba(0,0,0,.16);
border-bottom-width:2px;
border-radius:8px;
font-family:'Geist',sans-serif;font-size:15px;font-weight:600;
color:var(--ink);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.kbd-plus{
font-family:'Geist',sans-serif;font-size:13px;font-weight:400;
color:var(--ink-3);margin:0 2px;
}
/* ----- STATEMENT SECTION ----- */
.statement-section{
padding:10rem 2rem 10rem;
text-align:center;
}
.statement-headline{
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-variation-settings:"opsz" 144;
font-size:clamp(44px, 6vw, 88px);
line-height:1.04;letter-spacing:-0.035em;
color:var(--teal-ink);
margin:0 auto 28px;max-width:18ch;
text-wrap:balance;
}
.statement-sub{
font-family:'Fraunces',serif;font-weight:300;
font-size:clamp(18px, 1.8vw, 22px);
color:var(--ink-2);
max-width:48ch;margin:0 auto;
line-height:1.5;text-wrap:balance;
}
.statement-sub em{font-style:italic;color:var(--teal-ink)}
/* ----- TESTIMONIALS ----- */
.testimonials-section{padding:10rem 2rem 10rem}
.testimonials-grid{
display:grid;
grid-template-columns:repeat(6, 1fr);
grid-auto-rows:minmax(180px, auto);
gap:18px;
margin-top:56px;
}
.testimonial-card{
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid rgba(0,0,0,.05);
border-radius:20px;
padding:32px;
display:flex;flex-direction:column;justify-content:space-between;gap:24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.04),
0 12px 32px rgba(60,40,20,.06);
transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
grid-column:span 2;
}
.testimonial-card{transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft)}
.testimonial-card:hover{
transform:translateY(-3px);
border-color:rgba(126,209,205,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 1px rgba(126,209,205,.18),
0 0 32px rgba(126,209,205,.16),
0 4px 8px rgba(60,40,20,.08),
0 22px 48px rgba(60,40,20,.10);
}
.t-hero{grid-column:span 4;grid-row:span 2;position:relative;overflow:hidden;padding:48px 56px;display:flex;flex-direction:column;justify-content:center}
.t-quote{
font-family:'Fraunces',serif;font-weight:300;
font-size:17px;line-height:1.5;
color:var(--ink);
margin:0;letter-spacing:-0.005em;
text-wrap:pretty;
/* Smart curly quotes wrap each testimonial. */
quotes:"\201C" "\201D" "\2018" "\2019";
}
.t-quote::before{content:open-quote}
.t-quote::after {content:close-quote}
.t-hero .t-quote{
position:relative;z-index:1;
font-size:clamp(28px, 3.2vw, 44px);
font-style:italic;
line-height:1.18;
letter-spacing:-0.022em;
color:var(--teal-ink);
text-wrap:balance;
}
/* Hero card: oversized hanging opening quote in mint accent. */
.t-hero .t-quote::before{
content:"\201C";
position:absolute;
top:-.18em;left:-.32em;
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:1.6em;line-height:1;
color:var(--mint-cool-deep);
opacity:.45;
pointer-events:none;
}
.t-hero .t-quote::after{content:"\201D"}
.t-author{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.t-name{font-family:'Geist',sans-serif;font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.t-flag{font-size:14px;line-height:1}
.t-role{font-family:'Geist',sans-serif;font-size:11.5px;color:var(--ink-3)}
.t-hero .t-name{font-size:14px}
@media (max-width:900px){
.testimonials-grid{grid-template-columns:repeat(2, 1fr)}
.t-hero, .testimonial-card{grid-column:span 2;grid-row:span 1}
}
@media (max-width:560px){
.testimonials-grid{grid-template-columns:1fr}
.t-hero, .testimonial-card{grid-column:span 1}
}
/* ============================================================
MINT-BOTTOM REGION — pricing → FAQ → footer share a continuous
mint gradient that fades in over the pricing section then
stays mint-pale all the way to the bottom of the page.
============================================================ */
.mint-bottom{
position:relative;
/* Mint fade now stays clear through pricing, FAQ, catalogue.
Only the footer + the catalogue tail get the mint wash. */
background:linear-gradient(180deg,
transparent 0%,
transparent 70%,
rgba(235, 245, 238, .35) 86%,
var(--mint-pale) 100%
);
}
/* ----- PRICING (receipt-style) ----- */
.pricing-section{
padding:10rem 2rem 9rem;
background:transparent;
}
.receipt{
position:relative;
width:100%;max-width:520px;
background:#FEFDF7;
border:1px solid rgba(0,0,0,.05);
border-radius:14px;
padding:48px 44px 36px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 1px 2px rgba(60,40,20,.04),
0 24px 60px rgba(60,40,20,.10),
0 6px 18px rgba(60,40,20,.06);
}
/* Soft perforation effect at top + bottom — receipt feel */
.receipt-perforation{
position:absolute;left:0;right:0;height:14px;
background:radial-gradient(circle at 8px 0, transparent 6px, #FEFDF7 6.5px) repeat-x;
background-size:16px 14px;
pointer-events:none;
}
.receipt-perforation-top{top:-7px}
.receipt-perforation-bottom{bottom:-7px;transform:scaleY(-1)}
.receipt-head{
display:flex;flex-direction:column;align-items:center;gap:10px;
margin-bottom:6px;
}
.receipt-logo-wrap{
width:44px;height:44px;border-radius:11px;
display:inline-flex;overflow:hidden;flex-shrink:0;
box-shadow:0 1px 2px rgba(60,40,20,.06), 0 6px 14px rgba(60,40,20,.10);
}
.receipt-logo{
width:100%;height:100%;display:block;
object-fit:cover;
}
.receipt-brand{
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-size:30px;color:var(--ink);letter-spacing:-0.02em;
}
.receipt-tagline{
font-family:'Geist',sans-serif;font-size:11px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.receipt-divider{
height:0;border:0;
border-top:1.5px dashed rgba(0,0,0,.18);
margin:24px 0;
}
.receipt-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:14px;
}
.receipt-list li{
display:flex;align-items:baseline;justify-content:space-between;
gap:12px;
font-family:'Geist',sans-serif;font-size:14.5px;
}
.receipt-list .r-item{color:var(--ink)}
.receipt-list .r-value{color:var(--ink-2);font-weight:500}
.receipt-list .r-strike .r-item{
color:var(--ink-4);
text-decoration:line-through;
text-decoration-thickness:1px;
text-decoration-color:rgba(0,0,0,.25);
}
.receipt-list .r-strike .r-value{
color:var(--teal-ink);font-style:italic;font-family:'Fraunces',serif;font-weight:300;
}
.receipt-total{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
margin-bottom:24px;
}
.r-total-label{
font-family:'Geist',sans-serif;font-size:15px;font-weight:600;color:var(--ink);
}
.r-total-once{font-family:'Geist',sans-serif;font-size:12px;font-weight:400;color:var(--ink-3);margin-left:4px}
.r-total-amount{
font-family:'Fraunces',serif;font-weight:300;
font-size:42px;line-height:1;letter-spacing:-0.03em;
color:var(--ink);font-variant-numeric:tabular-nums;
}
/* The receipt CTA — editorial typography on a piece of mint glass.
Layout: small uppercase tracked "GET" + larger Fraunces italic
"Shiny." wordmark + a chevron-arrow that slides in on hover.
Surface: stationary glass-reflection highlight at top, soft pooled
under-highlight, hover lifts and blooms a mint halo. */
.receipt-btn{
position:relative;
display:flex;align-items:baseline;justify-content:center;gap:11px;
width:100%;text-align:center;
margin-top:18px;
padding:20px 32px;border-radius:999px;
background:linear-gradient(180deg, #CFE9D8 0%, #A8DCC9 100%);
color:#1A4A42;
text-decoration:none;border:none;cursor:pointer;
overflow:hidden;
isolation:isolate;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1.5px 1px rgba(40,90,75,.12),
0 1px 2px rgba(60,120,100,.10),
0 8px 22px rgba(60,120,100,.20);
transition:
transform .45s var(--ease-soft),
box-shadow .45s var(--ease-soft),
background .45s var(--ease-soft);
}
/* "GET" — Geist uppercase, tracked, secondary tone. */
.receipt-btn-label{
font-family:'Geist',sans-serif;
font-size:15px;font-weight:600;
letter-spacing:.20em;text-transform:uppercase;
color:rgba(26,74,66,.62);
position:relative;z-index:2;
align-self:center;
transition:color .35s var(--ease-soft), letter-spacing .35s var(--ease-soft);
}
/* "Shiny" — full Fraunces italic wordmark, optical-size 144 for the
display-cut serif details, set deeper teal-ink. */
.receipt-btn-mark{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:36px;line-height:1;letter-spacing:-0.02em;
color:#1A4A42;
position:relative;z-index:2;
}
.receipt-btn-dot{
font-style:normal;
color:var(--mint-cool-deep);
margin-left:1px;
}
/* Arrow chevron — fades in and slides on hover. */
.receipt-btn-arrow{
width:18px;height:12px;
position:relative;z-index:2;
align-self:center;
color:rgba(26,74,66,.55);
opacity:0;
transform:translateX(-6px);
transition:opacity .35s var(--ease-soft), transform .45s var(--ease-soft), color .35s var(--ease-soft);
}
/* (Removed) Earlier the button had a top-arc glass reflection here.
It read as cheap candy-shine, so we let the gradient speak for itself
and rely on the inset top highlight in the box-shadow alone. */
.receipt-btn::before{content:none}
/* Soft pooled highlight at the bottom for body. */
.receipt-btn::after{
content:'';
position:absolute;
left:18%;right:18%;bottom:6%;height:32%;
border-radius:50%;
background:radial-gradient(ellipse,
rgba(255,255,255,.32) 0%,
rgba(255,255,255,.08) 55%,
transparent 80%);
filter:blur(4px);
pointer-events:none;
z-index:1;
opacity:0;
transition:opacity .45s var(--ease-soft);
}
.receipt-btn:hover{
transform:translateY(-2px);
background:linear-gradient(180deg, #DDEFE5 0%, #A8DCC9 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.92),
inset 0 -1.5px 1px rgba(40,90,75,.12),
0 2px 4px rgba(60,120,100,.18),
0 14px 32px rgba(60,120,100,.26),
0 0 0 6px rgba(155,217,200,.16),
0 0 24px rgba(155,217,200,.40);
}
.receipt-btn:hover .receipt-btn-label{
color:rgba(26,74,66,.86);
letter-spacing:.24em;
}
.receipt-btn:hover .receipt-btn-arrow{
opacity:1;
transform:translateX(0);
color:#1A4A42;
}
.receipt-btn:hover::before{
opacity:1;
transform:scale(1.02);
}
.receipt-btn:hover::after{opacity:1}
.receipt-btn:active{
transform:translateY(0) scale(.992);
transition-duration:.12s;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
inset 0 -1.5px 1px rgba(40,90,75,.12),
0 1px 2px rgba(60,120,100,.12),
0 4px 12px rgba(60,120,100,.22);
}
[data-theme="dark"] .receipt-btn-label{color:rgba(15,38,32,.66)}
[data-theme="dark"] .receipt-btn-mark{color:#0F2620}
[data-theme="dark"] .receipt-btn:hover .receipt-btn-label{color:rgba(15,38,32,.92)}
[data-theme="dark"] .receipt-btn:hover .receipt-btn-arrow{color:#0F2620}
.receipt-fineprint{
margin-top:20px;text-align:center;
font-family:'Geist',sans-serif;font-size:11px;font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
/* ============================================================
FAQ — uniform 3×2 bento with watermark numerals.
Deliberately uniform (not asymmetric like features/testimonials),
each card with its own subtle tonal background + giant italic
Fraunces numeral as a quiet design element.
============================================================ */
.faq-section{padding:10rem 2rem 10rem;background:transparent}
.faq-bento{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
margin:0 auto;
max-width:1200px;
}
@media (max-width:900px){.faq-bento{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.faq-bento{grid-template-columns:1fr}}
.faq-card{
position:relative;
padding:32px 28px 30px;
border-radius:20px;
border:1px solid rgba(0,0,0,.05);
display:flex;flex-direction:column;gap:14px;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.04),
0 12px 32px rgba(60,40,20,.06);
transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
min-height:240px;
}
.faq-card{transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft)}
.faq-card:hover{
transform:translateY(-3px);
border-color:rgba(126,209,205,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 1px rgba(126,209,205,.18),
0 0 32px rgba(126,209,205,.16),
0 4px 8px rgba(60,40,20,.08),
0 22px 48px rgba(60,40,20,.10);
}
/* All FAQ cards use the same cream-glass background as the features bento — no extra mint */
.faq-tone-1, .faq-tone-2, .faq-tone-3,
.faq-tone-4, .faq-tone-5, .faq-tone-6{
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
}
.faq-stamp{
display:inline-block;
font-family:'Geist',sans-serif;font-size:10px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);
padding:4px 9px;border-radius:5px;
background:rgba(126,209,205,.14);
border:1px solid rgba(126,209,205,.22);
align-self:flex-start;
z-index:1;
}
.faq-q{
font-family:'Fraunces',serif;font-weight:300;
font-size:clamp(18px, 1.7vw, 22px);
letter-spacing:-0.018em;line-height:1.18;
color:var(--ink);margin:0;text-wrap:balance;
z-index:1;
}
.faq-a{
font-family:'Geist',sans-serif;
font-size:13.5px;line-height:1.6;
color:var(--ink-2);margin:0;text-wrap:pretty;
z-index:1;
}
/* ----- FAQ connected search hub (under the bento) ----- */
.faq-hub{
max-width:780px;
margin:88px auto 0;
}
.faq-line{
text-align:center;margin:0 auto 28px;
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 60;
font-size:clamp(20px,2.2vw,26px);line-height:1.3;
color:var(--teal-ink);letter-spacing:-0.012em;
text-wrap:balance;max-width:32ch;
}
.faq-search{
position:relative;margin-bottom:18px;
}
.faq-search input{
width:100%;padding:18px 20px 18px 52px;
font-family:'Geist',sans-serif;font-size:15px;
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);border-radius:20px;
color:var(--ink);
transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-soft),background .25s var(--ease-soft);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.04);
}
.faq-search input:focus{
outline:none;border-color:rgba(155,217,200,.50);
background:rgba(254,253,247,.95);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 4px rgba(155,217,200,.18);
}
.faq-search input::placeholder{color:var(--ink-4)}
.faq-search-icon{
position:absolute;left:20px;top:50%;transform:translateY(-50%);
color:var(--ink-4);pointer-events:none;
display:inline-flex;
}
.faq-chips{
display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
margin:0 0 28px;
}
/* On mobile (≤680px), 5 pills in a 3-col grid leaves an awkward 3+2
layout. Hide the Compatibility chip on mobile so the remaining four
form a clean 2×2 grid. The Compatibility FAQs themselves stay
visible — they just aren't filterable through this chip on phones.
Search still works for any term. */
@media (max-width:680px){
.faq-chips{grid-template-columns:repeat(2,1fr)}
.faq-chip[data-cat="compat"]{display:none}
}
.faq-chip{
font-family:'Geist',sans-serif;font-weight:500;font-size:11.5px;
letter-spacing:.04em;text-align:center;
padding:11px 8px;border-radius:10px;
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);
color:var(--ink-3);cursor:pointer;
transition:all .2s var(--ease-soft);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.faq-chip:hover{
background:rgba(155,217,200,.14);
color:var(--teal-ink);
border-color:rgba(155,217,200,.40);
}
.faq-chip.is-active{
background:linear-gradient(180deg,#CFE9D8 0%,#A8DCC9 100%);
color:#1A4A42;border-color:transparent;font-weight:600;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(60,120,100,.10);
}
.faq-results{
display:flex;flex-direction:column;gap:0;
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border-radius:20px;
padding:0 18px;
border:1px solid var(--hairline);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.04),
0 12px 32px rgba(60,40,20,.06);
}
.faq-row{
border-top:1px solid var(--hairline-soft);
transition:background .35s var(--ease-soft);
}
.faq-row:first-of-type{border-top:none}
.faq-row[open]{background:rgba(155,217,200,.06)}
.faq-row > summary{
padding:18px 6px;cursor:pointer;
list-style:none;display:flex;align-items:flex-start;gap:14px;
font-family:'Fraunces',serif;font-weight:300;
font-size:18px;letter-spacing:-0.012em;line-height:1.3;
color:var(--ink);
transition:color .25s var(--ease-soft);
}
.faq-row > summary::-webkit-details-marker{display:none}
.faq-row > summary:hover{color:var(--teal-ink)}
.faq-toggle{
flex-shrink:0;width:18px;height:18px;
display:inline-flex;align-items:center;justify-content:center;margin-top:5px;
color:var(--mint-cool-deep);
transition:transform .35s var(--ease-soft);
}
.faq-row[open] .faq-toggle{transform:rotate(45deg)}
.faq-row-body{
padding:0 6px 22px 46px;
font-family:'Geist',sans-serif;font-size:14px;line-height:1.65;
color:var(--ink-2);text-wrap:pretty;
}
.faq-row-body a{color:var(--teal-ink);text-decoration:none;border-bottom:1px solid rgba(45,90,80,.20)}
.faq-row-body a:hover{color:var(--mint-cool-deep);border-bottom-color:currentColor}
.faq-empty{
text-align:center;padding:40px 16px;
font-family:'Fraunces',serif;font-style:italic;color:var(--ink-3);
font-size:16px;
}
/* ----- CATALOGUE CTA — "From the Theodore catalogue" ----- */
.catalogue-section{
padding:10rem 2rem 9rem;
background:transparent;
position:relative;
}
.catalogue-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:18px;
margin-top:48px;
max-width:1100px;
margin-left:auto;margin-right:auto;
}
@media (max-width:760px){
.catalogue-grid{grid-template-columns:1fr}
}
/* Catalogue cards — use each product's actual brand fonts/colours.
Plus Jakarta Sans is the typeface both Solace and Charm use on
their websites. Hover lights up a brand-coloured glow border.
All rules scoped under .catalogue-grid because the blog landing
page reuses .cat-card / .cat-icon / .cat-name for its category
deck — without this scope, those rules cascade-clobber these. */
.catalogue-grid .cat-card{
display:flex;flex-direction:column;gap:18px;
padding:36px 36px;
border-radius:22px;
text-decoration:none;
position:relative;overflow:hidden;
border:1px solid rgba(0,0,0,.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 1px 2px rgba(60,40,20,.04),
0 16px 40px rgba(60,40,20,.08);
transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
font-family:'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
min-height:auto;
}
.catalogue-grid .cat-card:hover{
transform:translateY(-5px);
}
/* SOLACE — dark navy site palette, warm amber hover glow */
.catalogue-grid .cat-solace{
background:
radial-gradient(circle at 100% 0%, rgba(255,180,90,.20), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(74,158,255,.16), transparent 55%),
linear-gradient(135deg, #1C1C1E 0%, #2A2D3A 60%, #1F2438 100%);
color:#EBEBF5;
}
.catalogue-grid .cat-solace .cat-tag{color:rgba(235,235,245,.72)}
.catalogue-grid .cat-solace .cat-cta{color:#FFB87A}
.catalogue-grid .cat-solace:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 0 0 1.5px rgba(255,180,90,.7),
0 0 36px rgba(255,180,90,.45),
0 4px 8px rgba(0,0,0,.18),
0 28px 60px rgba(0,0,0,.30);
}
/* CHARM — cream paper background, soft blue hover glow */
.catalogue-grid .cat-charm{
background:
radial-gradient(circle at 100% 0%, rgba(74,158,255,.20), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(168,85,247,.12), transparent 55%),
linear-gradient(135deg, #FAF7F0 0%, #F2EEE5 100%);
color:#1A1A1A;
}
.catalogue-grid .cat-charm .cat-tag{color:rgba(26,26,26,.66)}
.catalogue-grid .cat-charm .cat-cta{color:#3B82F5}
.catalogue-grid .cat-charm:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 0 0 1.5px rgba(74,158,255,.65),
0 0 36px rgba(74,158,255,.40),
0 4px 8px rgba(60,40,20,.08),
0 28px 60px rgba(60,40,20,.14);
}
.catalogue-grid .cat-brand{
display:flex;align-items:center;gap:14px;
}
/* Wrap that crops any built-in icon padding so we don't see a white border */
.catalogue-grid .cat-icon-wrap{
width:46px;height:46px;border-radius:11px;
flex-shrink:0;overflow:hidden;display:inline-flex;
box-shadow:
0 1px 2px rgba(0,0,0,.12),
0 8px 20px rgba(0,0,0,.18);
}
.catalogue-grid .cat-icon{
width:108%;height:108%;
margin:-4%;
object-fit:cover;
display:block;
color:inherit; /* defeat blog .cat-icon mint tint */
}
.catalogue-grid .cat-name{
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:800;font-style:normal;
font-size:clamp(22px, 2vw, 28px);
line-height:1;letter-spacing:-0.025em;
margin:0;
color:inherit;
}
.catalogue-grid .cat-tag{
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:400;
font-size:14.5px;line-height:1.55;
margin:0;
max-width:46ch;
text-wrap:pretty;
}
.catalogue-grid .cat-tag strong{font-weight:700}
.catalogue-grid .cat-tag + .cat-tag{margin-top:-2px}
/* ============================================================
ABOUT-SECTION LIVE DEMO POPOVER
Pixel-faithful to the app's PopoverView.swift — same carved-glass
material, same Fraunces wordmark, same halo-breathing pillow.
============================================================ */
.about-demo{
margin-top:56px;
width:100%;
display:flex;justify-content:center;
position:relative;
min-height:320px;
}
.demo-popover{
position:relative;
width:320px;max-width:100%;
padding:14px 18px 18px;
border-radius:14px;
background:linear-gradient(180deg, rgba(255,253,247,.82) 0%, rgba(252,249,242,.66) 100%);
backdrop-filter:blur(40px) saturate(160%);
-webkit-backdrop-filter:blur(40px) saturate(160%);
border:0.5px solid rgba(0,0,0,.09);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 0 0 .5px rgba(255,255,255,.45),
0 1px 2px rgba(60,40,20,.06),
0 28px 70px rgba(60,40,20,.14),
0 6px 16px rgba(60,40,20,.07);
display:flex;flex-direction:column;align-items:center;
overflow:hidden;
transition:padding .5s var(--ease-soft);
}
/* Carved-glass details — bevel highlights & specular reflections */
.dp-glass-edge{
position:absolute;inset:4px;border-radius:11px;
pointer-events:none;
border:0.5px solid rgba(255,255,255,.32);
z-index:1;
}
.dp-glass-specular{
position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:14px;
background:radial-gradient(ellipse 60% 55% at 5% 0%, rgba(255,255,255,.18), transparent 60%);
mix-blend-mode:plus-lighter;
}
.dp-glass-glint{
position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:14px;
background:radial-gradient(ellipse 50% 50% at 100% 100%, rgba(255,255,255,.10), transparent 60%);
mix-blend-mode:plus-lighter;
}
/* Header row — Shiny wordmark + cog */
.dp-header-row{
width:100%;
display:flex;align-items:center;justify-content:space-between;
padding:0 0 4px;
z-index:5;
}
.dp-mark{
font-family:'Fraunces',serif;font-weight:400;font-style:italic;
font-variation-settings:"opsz" 24;
font-size:15px;letter-spacing:-0.015em;
color:rgba(28,25,20,.86);
text-shadow:0 .5px 0 rgba(255,255,255,.7), 0 -.5px 0 rgba(80,55,30,.05);
}
.dp-cog{
width:26px;height:26px;border-radius:7px;
display:inline-flex;align-items:center;justify-content:center;
background:transparent;border:0;color:var(--ink-3);
cursor:pointer;
transition:background .2s ease, transform .4s cubic-bezier(.3,.2,.2,1.4), color .2s ease;
}
.dp-cog:hover{background:rgba(0,0,0,.05);color:var(--ink);transform:rotate(48deg)}
.dp-cog svg{width:13px;height:13px}
/* Pillow wrapper — holds halo + dial ring + button */
.dp-pillow-wrap{
position:relative;
width:122px;height:122px;
display:flex;align-items:center;justify-content:center;
margin:10px 0 8px;
z-index:5;
}
/* Dial ring around the pillow — the diagnostic ring as it appears
in the popover (24 tick marks, gradient stroke, breathes subtly) */
.dp-dial{
position:absolute;width:100%;height:100%;
pointer-events:none;
animation:dpDialBreath 5.5s ease-in-out infinite;
}
.dp-dial-ticks line{
stroke:url(#dpDialGrad);
stroke-width:2.4;
}
.demo-popover.dp-calm .dp-dial-ticks line{stroke:url(#dpDialGradMint)}
.demo-popover.dp-clearing .dp-dial-ticks line{stroke:url(#dpDialGradMint)}
@keyframes dpDialBreath{
0%, 100% {transform:scale(.97);opacity:.85}
50% {transform:scale(1.02);opacity:1}
}
.dp-halo{
position:absolute;width:140px;height:140px;border-radius:50%;
background:radial-gradient(circle, rgba(241,134,32,.32) 0%, rgba(241,134,32,.14) 45%, transparent 78%);
filter:blur(5px);pointer-events:none;
animation:dpHaloBreath 5.5s ease-in-out infinite;
transition:background 1s var(--ease-soft);
}
@keyframes dpHaloBreath{
0%, 100% {transform:scale(.97);opacity:.85}
50% {transform:scale(1.04);opacity:1}
}
.demo-popover.dp-calm .dp-halo{
background:radial-gradient(circle, rgba(126,209,205,.30) 0%, rgba(126,209,205,.12) 45%, transparent 78%);
}
.demo-popover.dp-busy .dp-halo{
background:radial-gradient(circle, rgba(238,134,55,.36) 0%, rgba(238,134,55,.16) 45%, transparent 78%);
}
.demo-popover.dp-clearing .dp-halo{
background:radial-gradient(circle, rgba(155,217,200,.50) 0%, rgba(155,217,200,.20) 45%, transparent 78%);
}
.dp-aurora-leak{
position:absolute;width:160px;height:160px;border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.92), rgba(195,224,210,.5) 35%, transparent 80%);
filter:blur(12px);pointer-events:none;
opacity:0;transform:scale(.3);
z-index:1; /* keep this BEHIND the pillow so it doesn't blob over the Polish text */
}
.demo-popover.dp-clearing .dp-aurora-leak{
animation:dpLeakFlash 900ms ease-out forwards;
}
@keyframes dpLeakFlash{
0% {opacity:0;transform:scale(.3)}
40% {opacity:1;transform:scale(1)}
100% {opacity:0;transform:scale(1.7)}
}
/* The pillow itself — multi-layer carved glass dome */
.dp-pillow{
position:relative;z-index:5;
width:80px;height:80px;border-radius:50%;
background:
radial-gradient(circle at 30% 28%, #ffffff 0%, #fbf7ee 55%, #f2ecdf 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 3px rgba(80,60,30,.06),
0 2px 6px rgba(40,30,20,.08),
0 12px 24px -8px rgba(40,30,20,.18);
display:flex;align-items:center;justify-content:center;
cursor:pointer;border:none;
transition:transform .32s cubic-bezier(.32,.72,.24,1), box-shadow .28s ease, background .8s var(--ease-soft);
}
.dp-pillow::before{display:none}
.dp-pillow:hover{transform:translateY(-2.5px)}
.dp-pillow.pressed{transform:translateY(-.5px) scale(.96);transition-duration:.12s}
.dp-pillow-label{
font-family:'Fraunces',serif;font-style:italic;font-weight:400;
font-variation-settings:"opsz" 24;
font-size:16px;color:var(--teal-ink);
letter-spacing:-0.01em;
}
.demo-popover.dp-clearing .dp-pillow{
background:
radial-gradient(circle at 30% 28%, #ffffff 0%, #fbf9f4 55%, #eff5ee 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 0 0 1px rgba(155,200,200,.32),
0 0 18px rgba(155,217,210,.34),
0 12px 24px -8px rgba(60,118,114,.16);
}
/* State sentence — Fraunces, calm centred (sits BELOW the pillow) */
.dp-sentence{
font-family:'Fraunces',serif;font-weight:400;
font-variation-settings:"opsz" 24;
font-size:14.5px;line-height:1.4;
text-align:center;color:var(--ink);
max-width:236px;
z-index:5;
min-height:38px;
margin-top:6px;
transition:opacity .5s ease;
}
.dp-sentence.fading{opacity:0}
/* Culprit card — sits BELOW the sentence when busy.
Layout matches the app: bold app names on top, soft suffix below. */
.dp-culprit-card{
width:calc(100% - 4px);margin-top:12px;
padding:11px 16px;
background:rgba(255,253,247,.62);
border:.6px solid rgba(80,55,30,.10);
border-radius:10px;
text-align:center;
z-index:5;
opacity:0;max-height:0;overflow:hidden;
transition:opacity .5s var(--ease-soft), max-height .6s var(--ease-soft);
}
.demo-popover.dp-busy .dp-culprit-card,
.demo-popover.dp-quitting .dp-culprit-card{
opacity:1;max-height:120px;
}
.dp-culprit-line{
font-family:'Geist',sans-serif;font-size:12px;color:var(--ink-2);line-height:1.5;
display:flex;flex-direction:column;align-items:center;gap:3px;
}
.dp-culprit-apps{
font-family:'Geist',sans-serif;font-size:13px;font-weight:600;color:var(--ink);
}
.dp-culprit-suffix{
font-family:'Geist',sans-serif;font-size:11.5px;color:var(--ink-2);
}
.dp-app-chip{
display:inline-block;
font-family:'Geist',sans-serif;font-size:13px;font-weight:600;
color:var(--ink);
padding:0 2px;border-radius:4px;margin:0;
background:transparent;border:none;cursor:pointer;
transition:background .2s ease, transform .25s var(--ease-soft);
}
.dp-app-chip:hover, .dp-app-chip.cursor-over{
background:rgba(60,118,114,.12);transform:scale(1.04);
}
.dp-app-chip.quitting{
text-decoration:line-through;
text-decoration-color:rgba(0,0,0,.35);
opacity:.4;
}
/* Demo cursor — same arrow style as hero. Bumped to 17×22 with a
darker stroke + light dark-ground shadow so it stays clearly
visible against the cream popover. Mint gradient retained but
pushed deeper at the tip (see #mintCursorGrad in index.html). */
.dp-cursor{
position:absolute;
width:17px;height:22px;
pointer-events:none;
z-index:20;opacity:0;
transform-origin:0 0;
transition:opacity .4s ease, top .9s var(--ease-soft), left .9s var(--ease-soft), transform .25s var(--ease-soft);
filter:
drop-shadow(0 1px 1.5px rgba(20,55,50,.22))
drop-shadow(0 0 2.5px rgba(255,255,255,.95))
drop-shadow(0 0 8px rgba(255,255,255,.40))
drop-shadow(0 0 12px rgba(126,209,205,.50));
}
.dp-cursor svg{width:100%;height:100%;display:block;overflow:visible}
.dp-cursor svg path{
fill:url(#mintCursorGrad);
stroke:rgba(31,92,83,.78);stroke-width:.85;
stroke-linejoin:round;
}
.dp-cursor.visible{opacity:1}
.dp-cursor.pressing{transform:scale(.92)}
/* ============================================================
DOWNLOAD PAGE (/download.html) — a quiet, focused destination.
Reuses the nav and footer from index. The stage is one centred
composition: gently-breathing icon + Fraunces italic "Download
Shiny." mark + status line + the same Get-Shiny pill restyled as
"Download" + system requirements.
============================================================ */
.download-page{min-height:100vh;display:flex;flex-direction:column}
.download-nav{position:fixed} /* keep nav floating */
.download-section{
flex:1;
display:flex;align-items:center;justify-content:center;
padding:9rem 2rem 7rem;
position:relative;
}
.download-stage{
max-width:540px;width:100%;
display:flex;flex-direction:column;align-items:center;
text-align:center;
}
/* App icon — softly breathing, sits above the title. */
.download-icon-wrap{
width:128px;height:128px;border-radius:30px;
display:inline-flex;overflow:hidden;
box-shadow:
0 1px 2px rgba(60,40,20,.06),
0 12px 28px rgba(60,40,20,.16),
0 32px 72px rgba(60,40,20,.18);
animation:downloadIconBreath 4.8s ease-in-out infinite;
}
.download-icon-img{
width:108%;height:108%;
margin:-4%;
object-fit:cover;display:block;
}
@keyframes downloadIconBreath{
0%, 100% {transform:translateY(0) scale(1)}
50% {transform:translateY(-3px) scale(1.015)}
}
.download-title{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:clamp(48px, 6vw, 76px);
line-height:1;letter-spacing:-0.025em;
color:var(--teal-ink);
margin:36px 0 16px;
}
.download-title em{font-style:italic;color:inherit}
.download-title-dot{color:var(--mint-cool-deep);font-style:normal}
.download-title-lead{
font-family:'Geist',sans-serif;font-style:normal;font-weight:500;
font-size:.62em;letter-spacing:-0.005em;
color:var(--ink-2);
margin-right:.32em;
vertical-align:.12em;
}
.download-status{
font-family:'Geist',sans-serif;font-weight:500;
font-size:14px;line-height:1.4;letter-spacing:.005em;
color:var(--ink-3);
margin:0 0 40px;
transition:color .35s var(--ease-soft);
}
.download-status:empty{margin:0 0 8px}
.download-status-fallback{color:var(--ink-2)}
/* Download CTA — a generous version of the receipt pill. */
/* Two-pill row for the download page. Each pill carries a single
Fraunces italic word ("Download" / "Buy") in the mint pillow —
no secondary label, no wordmark — so the page reads as a clear
binary choice. The pair stacks vertically on narrow screens; in
purchase mode the Buy pill is hidden and the Download pill is
centred at the same width as before. */
.download-pills{
display:flex;
gap:14px;
max-width:560px;
margin:24px auto 0;
}
.download-page[data-mode="purchase"] .download-pill-buy{display:none}
.download-page[data-mode="purchase"] .download-pills{
max-width:320px;
justify-content:center;
}
/* The pill itself. One verb in Geist (the secondary / UI font),
sentence case, balanced inside a mint pillow. Reads like a
proper button label rather than a wordmark. Shadow + hover
choreography matches the homepage receipt button so the family
feels consistent across the site. */
.download-pill{
position:relative;
display:flex;align-items:center;justify-content:center;
flex:1;width:auto;min-width:0;
padding:22px 36px;
border-radius:100px;
background:linear-gradient(180deg, #CFE9D8 0%, #A8DCC9 100%);
color:#1A4A42;
text-decoration:none;
overflow:hidden;
isolation:isolate;
font-family:'Geist',sans-serif;
font-weight:500;
font-size:clamp(15px, 1.8vw, 18px);
line-height:1;
letter-spacing:-0.003em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1.5px 1px rgba(40,90,75,.12),
0 1px 2px rgba(60,120,100,.10),
0 10px 26px rgba(60,120,100,.22);
transition:
transform .45s var(--ease-soft),
box-shadow .45s var(--ease-soft),
background .45s var(--ease-soft);
}
.download-pill:hover{
transform:translateY(-2px);
background:linear-gradient(180deg, #DDEFE5 0%, #A8DCC9 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1.5px 1px rgba(40,90,75,.14),
0 2px 4px rgba(60,120,100,.18),
0 16px 36px rgba(60,120,100,.28),
0 0 0 6px rgba(155,217,200,.16),
0 0 26px rgba(155,217,200,.42);
}
.download-pill:active{
transform:translateY(0) scale(.992);
transition-duration:.12s;
}
[data-theme="dark"] .download-pill{
background:linear-gradient(180deg, #C4E2D2 0%, #9DD3BF 100%);
color:#0F2A22;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1.5px 1px rgba(0,0,0,.10),
0 1px 2px rgba(0,0,0,.20),
0 12px 28px rgba(0,0,0,.32);
}
[data-theme="dark"] .download-pill:hover{
background:linear-gradient(180deg, #D5EBD9 0%, #A8DCC9 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 2px 4px rgba(0,0,0,.22),
0 18px 38px rgba(0,0,0,.38),
0 0 0 6px rgba(155,217,200,.18),
0 0 28px rgba(155,217,200,.44);
}
@media (max-width:560px){
.download-pills{
flex-direction:column;
gap:10px;
max-width:380px;
}
.download-pill{
padding:16px 26px;
font-size:14.5px;
}
}
/* Single combined meta line below the CTA — version, size, and
notarized status. Replaces the previous two separate lines (one
for version, one for trust) so the eye lands on one calm row
rather than two competing ones. */
.download-meta{
margin:18px 0 0;
display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
font-family:'Geist',sans-serif;font-weight:500;font-size:12.5px;
letter-spacing:.01em;
color:var(--ink-4);
}
.download-meta-shield{color:var(--mint-cool-deep);flex-shrink:0}
.download-meta-sep{
width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.35;flex-shrink:0;
}
.download-status-fired{color:var(--mint-cool-deep);font-weight:600}
@media (max-width:560px){
.download-section{padding:7rem 1.25rem 5rem}
.download-icon-wrap{width:108px;height:108px;border-radius:24px}
.download-title{font-size:clamp(40px, 11vw, 56px);margin:28px 0 12px}
.download-status{font-size:16px;margin:0 0 24px}
.download-section .receipt-btn{min-width:0;width:100%;max-width:340px}
.download-meta{margin-top:14px;font-size:12px;gap:8px}
}
/* ============================================================
DOWNLOAD PAGE — post-purchase + generic dual-mode design.
Editorial register matches the rest of the site: breathing mint
halo behind the app icon, mono receipt-style order line at top
(purchase mode only), Fraunces italic display headlines, an
inline-italic email mention in the lede (no info-card), a
footer-motif divider, and an activation walkthrough rendered as
an elegant typed-note timeline (large Fraunces italic numerals,
hairlines between rows, no SaaS-cardboard cards).
============================================================ */
/* Title swap — generic vs purchase. */
.download-title-generic{display:block}
.download-title-purchase{display:none}
.download-page[data-mode="purchase"] .download-title-generic{display:none}
.download-page[data-mode="purchase"] .download-title-purchase{display:block}
/* Order-confirmation eyebrow at the top, purchase mode only.
Uses the SAME type style as the activation guide eyebrow below
("AFTER THE DOWNLOAD") so the page has one consistent eyebrow
tone instead of competing styles. */
.download-order-line{
display:none;
font-family:'Geist',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.22em;text-transform:uppercase;
color:var(--mint-cool-deep);
margin:0 0 36px;
}
.download-page[data-mode="purchase"] .download-order-line{display:inline-flex;align-items:center;gap:14px}
.download-order-line-rule{
display:inline-block;
width:24px;height:1px;
background:currentColor;opacity:.5;
}
/* Breathing mint halo behind the app icon. The pseudo-element sits
one z-layer below the icon and pulses slowly. Generic mode keeps
the icon as-is (no halo); purchase mode wakes the halo on. */
.download-page[data-mode="purchase"] .download-icon-wrap{
position:relative;isolation:isolate;
}
.download-page[data-mode="purchase"] .download-icon-wrap::before{
content:'';position:absolute;inset:-40%;
border-radius:50%;
background:radial-gradient(circle,
rgba(168,220,201,.36) 0%,
rgba(168,220,201,.14) 36%,
transparent 64%);
filter:blur(22px);
z-index:-1;
animation:dl-halo 5.2s ease-in-out infinite;
}
@keyframes dl-halo{
0%,100%{opacity:.55;transform:scale(1)}
50% {opacity:.92;transform:scale(1.06)}
}
/* Lede variants — purchase and generic. CSS toggles which is
rendered based on data-mode. Each variant is a two-line centred
block; the
handles the line break, the parent stage
already text-aligns centre. */
.download-lede-purchase{display:none}
.download-page[data-mode="purchase"] .download-lede-purchase{display:inline}
.download-lede-generic{display:inline}
.download-page[data-mode="purchase"] .download-lede-generic{display:none}
/* Single elegant section divider: a 1px line that fades to
transparent at both ends. Replaces the earlier hairline + dot
pattern (the dot read as "random" against the otherwise calm
page). Reduced vertical margin pulls the two sections closer. */
.download-divider{
max-width:360px;
height:1px;
margin:56px auto;
background:linear-gradient(90deg,
transparent 0%,
rgba(0,0,0,.12) 50%,
transparent 100%);
}
/* ----- Activation walkthrough — an elegant typed-note timeline.
Centered header. Each row: large italic Fraunces numeral on the
left, Geist title + tag on the right, hairline between rows. No
cards. Reads like a small editorial guide tucked at the foot of
the page. */
.download-guide{
max-width:680px;margin:0 auto;padding:0 8px;
text-align:left;
}
.download-guide-header{
text-align:center;margin:0 auto 48px;max-width:480px;
}
.download-guide-eyebrow{
font-family:'Geist',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.22em;text-transform:uppercase;color:var(--mint-cool-deep);
margin:0 0 14px;
}
.download-guide-title{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:clamp(28px, 4vw, 38px);line-height:1.1;letter-spacing:-0.020em;
color:var(--ink);
margin:0;
text-wrap:balance;
}
.download-guide-list{
list-style:none;margin:0;padding:0;
}
.download-guide-row{
display:grid;
grid-template-columns:64px 1fr;
gap:24px;
align-items:baseline;
padding:28px 0 30px;
border-bottom:1px solid var(--hairline);
}
.download-guide-row:last-child{border-bottom:none}
.download-guide-num{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 60;
font-size:42px;line-height:1;letter-spacing:-0.018em;
color:var(--mint-cool-deep);
user-select:none;
text-align:left;
}
.download-guide-body{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.download-guide-row-title{
font-family:'Geist',sans-serif;font-weight:600;font-size:16.5px;
letter-spacing:-0.005em;color:var(--ink);
margin:0;
}
.download-guide-row-tag{
font-family:'Geist',sans-serif;font-weight:400;font-size:14.5px;line-height:1.6;
color:var(--ink-2);margin:0;
text-wrap:pretty;max-width:56ch;
}
.download-guide-row-tag code{
font-family:'Geist Mono','SF Mono',monospace;font-size:13px;
background:rgba(0,0,0,.04);padding:1px 5px;border-radius:4px;
color:var(--ink);
}
.download-guide-row-tag strong{color:var(--ink);font-weight:600}
/* Dark mode — keep the halo + dot, swap surfaces and ink. */
[data-theme="dark"] .download-order-line{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .download-lede-email{
background:rgba(126,209,205,.12);
border-color:rgba(126,209,205,.20);
color:var(--mint-soft, #C9E8D9);
}
[data-theme="dark"] .download-divider{
background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.10) 50%, transparent 100%);
}
[data-theme="dark"] .download-guide-title{color:var(--text)}
[data-theme="dark"] .download-guide-row{border-bottom-color:rgba(255,255,255,.06)}
[data-theme="dark"] .download-guide-num{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .download-guide-row-title{color:var(--text)}
[data-theme="dark"] .download-guide-row-tag{color:var(--text-soft)}
[data-theme="dark"] .download-guide-row-tag code{
background:rgba(255,255,255,.06);color:var(--text);
}
[data-theme="dark"] .download-guide-row-tag strong{color:var(--text)}
@media (max-width:560px){
.download-order-line{font-size:10px;letter-spacing:.20em;margin:0 0 28px}
.download-order-line-rule{width:16px;margin:0 10px 2px}
.download-divider{margin:44px auto}
.download-guide-header{margin-bottom:36px}
.download-guide-title{font-size:clamp(22px, 5.6vw, 28px)}
.download-guide-row{grid-template-columns:48px 1fr;gap:18px;padding:24px 0 22px}
.download-guide-num{font-size:34px}
.download-guide-row-title{font-size:15px}
.download-guide-row-tag{font-size:14px}
}
/* Dark mode */
[data-theme="dark"] .download-icon-wrap{
box-shadow:
0 1px 2px rgba(0,0,0,.5),
0 12px 30px rgba(0,0,0,.55),
0 32px 80px rgba(0,0,0,.55);
}
[data-theme="dark"] .download-title{
color:#BFE0CC;
filter:
drop-shadow(0 0 14px rgba(155,217,200,.36))
drop-shadow(0 0 38px rgba(155,217,200,.14));
}
[data-theme="dark"] .download-title-dot{color:#7DC79D}
[data-theme="dark"] .download-status{color:var(--text-soft)}
[data-theme="dark"] .download-status-fallback{color:var(--text-muted)}
[data-theme="dark"] .download-cta{
background:linear-gradient(180deg, #BFE0CC 0%, #9CCBB1 100%);
color:#0F1A15;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1.5px 1px rgba(0,0,0,.18),
0 1px 2px rgba(0,0,0,.35),
0 12px 30px rgba(120,200,170,.30);
}
[data-theme="dark"] .download-title-lead{color:var(--text-soft)}
[data-theme="dark"] .download-version{color:var(--text-muted)}
[data-theme="dark"] .download-trust{color:var(--text-muted)}
[data-theme="dark"] .download-trust-mark{color:#7DC79D}
[data-theme="dark"] .download-status-fired{color:#7DC79D}
[data-theme="dark"] .download-secondary a{color:var(--text-soft)}
[data-theme="dark"] .download-secondary a:hover{color:#D7EFDF}
[data-theme="dark"] .download-secondary-sep{background:rgba(255,255,255,.20)}
[data-theme="dark"] .download-cta:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
inset 0 -1.5px 1px rgba(0,0,0,.18),
0 2px 4px rgba(0,0,0,.4),
0 18px 38px rgba(0,0,0,.45),
0 0 0 6px rgba(155,217,200,.18),
0 0 30px rgba(155,217,200,.50);
}
[data-theme="dark"] .download-fineprint{color:var(--text-muted)}
[data-theme="dark"] .download-fineprint a{color:var(--accent)}
[data-theme="dark"] .download-fineprint a:hover{color:#D7EFDF}
/* ----- FOOTER -----
Quiet sign-off: a hairline meeting a single breathing mint dot,
then one row of links, then the copyright. No duplicated wordmark
or CTA — that work is already done above. */
.footer-section{
position:relative;
padding:4.5rem 2rem 3rem;
background:transparent;
}
.footer-motif{
display:flex;align-items:center;justify-content:center;
gap:18px;
max-width:560px;margin:0 auto 40px;
}
.footer-motif-line{
flex:1;height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(63,140,126,.22) 50%, transparent 100%);
}
.footer-motif-dot{
width:7px;height:7px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, #D7EFDF 0%, #A8DCC9 65%, #7DC2A8 100%);
box-shadow:
0 0 0 1px rgba(63,140,126,.18),
0 0 12px rgba(155,217,200,.50),
0 0 24px rgba(155,217,200,.26);
flex-shrink:0;
animation:footerDotBreath 4.6s ease-in-out infinite;
}
@keyframes footerDotBreath{
0%,100%{transform:scale(1); opacity:.95}
50% {transform:scale(1.16); opacity:1}
}
.footer-stage{
max-width:720px;margin:0 auto;
display:flex;flex-direction:column;align-items:center;
text-align:center;
}
.footer-links{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:0 4px;
max-width:680px;
}
.footer-links a{
display:inline-block;
padding:6px 12px;
font-family:'Geist',sans-serif;font-size:13.5px;font-weight:500;
color:var(--ink-3);
text-decoration:none;
border:none;
background:transparent;
transition:color .25s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible{
color:var(--mint-cool-deep);
background:transparent;
text-decoration:none;
border:none;
outline:none;
}
/* Right-aligned "strong" variant in the footer — matches the
Buy Shiny pillow palette (deep teal text on a soft mint tint)
to mirror its nav counterpart. */
.footer-link-strong{
margin-left:auto;
color:#1F5C53 !important;
background:rgba(168,220,201,.22) !important;
font-weight:600;
border-radius:100px;
}
.footer-link-strong:hover,
.footer-link-strong:focus-visible{
color:#1F5C53 !important;
background:rgba(168,220,201,.42) !important;
}
.footer-link-sep{display:none}
.footer-base{
margin-top:28px;
display:flex;align-items:center;justify-content:center;
flex-wrap:wrap;gap:14px;
font-family:'Geist',sans-serif;font-size:12px;
color:var(--ink-3);
}
.footer-copy{font-weight:500;color:var(--ink-3)}
.footer-base-sep{
width:1px;height:11px;background:rgba(0,0,0,.12);
}
.footer-craft{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-size:13px;
color:var(--ink-3);
}
@media (max-width:560px){
.footer-motif{margin-bottom:32px}
.footer-base{margin-top:22px;gap:8px 14px}
.footer-base-sep{display:none}
}
/* ============================================================
UNDER THE HOOD — sequential donut.
Four colored arcs trace themselves in turn (Memory blue,
Network yellow, Background orange, Pressure red), then resolve
into a single mint full ring + soft mint pulse — the "Mac feels
lighter" beat. Below sits a prominent safety statement so non-
technical readers know none of this touches their stuff.
============================================================ */
.donut-section{
padding:9rem 2rem 10rem;
position:relative;
overflow:hidden;
}
.donut-section .lede{margin-top:20px}
.donut-stage{
position:relative;
width:100%;
max-width:480px;
aspect-ratio:1/1;
margin:44px auto 0;
}
@media (max-width:520px){
.donut-stage{max-width:380px;margin-top:32px}
}
.donut-svg{
position:absolute;inset:0;
width:100%;height:100%;
overflow:visible;
}
/* Arcs (sharp colored line) and puffs (soft pastel halo behind).
Both follow the same arc path; the puff is wider with low opacity
and the arc is thinner with full opacity once active. */
.puff,.arc{
fill:none;
stroke-linecap:round;
}
.puff{stroke-width:38;opacity:0}
.arc {stroke-width:11;opacity:0}
/* Completion ring (mint full circle) + halo + celebration pulse */
.complete-puff,
.complete-ring,
.complete-burst{
fill:none;
stroke-linecap:round;
opacity:0;
transform-box:view-box;
transform-origin:0 0;
}
.complete-puff{stroke:#BFE0CC;stroke-width:44}
.complete-ring{stroke:#5BA899;stroke-width:11}
.complete-burst{stroke:rgba(155,217,200,.8);stroke-width:2}
/* Step dots beneath the ring — one per segment, one lights up at a
time. On completion, all four glow soft mint together. */
.step-dots{
position:absolute;
bottom:-44px;left:50%;transform:translateX(-50%);
display:flex;gap:9px;
}
.step-dot{
width:6px;height:6px;border-radius:50%;
background:rgba(0,0,0,.10);
transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.step-dot.active{
background:var(--mint-cool-deep);
transform:scale(1.4);
}
.step-dot.all-done{
background:#5BA899;
transform:scale(1.15);
box-shadow:0 0 8px rgba(155,217,200,.55);
}
/* Center content */
.donut-center{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
text-align:center;
width:62%;
pointer-events:none;
transition:opacity .25s ease;
}
.donut-center.fading{opacity:0}
.dc-row{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px}
.dc-dot{
width:8px;height:8px;border-radius:50%;
background:#5B92E0;
transition:background .3s ease;
}
.dc-eyebrow{
font-family:'Geist',sans-serif;
font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:0.18em;
color:var(--ink-4);
}
.dc-name{
font-family:'Fraunces',serif;
font-style:italic;font-weight:300;
font-size:clamp(26px,3vw,34px);
letter-spacing:-0.01em;color:var(--ink);line-height:1.1;
transition:font-size .3s ease, color .3s ease;
}
.dc-text{
font-family:'Fraunces',serif;
font-weight:300;font-style:italic;
font-size:15.5px;line-height:1.4;
color:var(--ink-2);margin-top:14px;text-wrap:balance;
}
/* Completion presentation: hide eyebrow + body, show only the
celebratory line, larger and mint. */
.donut-center.is-complete .dc-row,
.donut-center.is-complete .dc-text{display:none}
.donut-center.is-complete .dc-name{
font-size:clamp(28px,3.4vw,38px);
color:var(--mint-cool-deep);
}
/* Safety reassurance — prominent below the donut. Italic Fraunces
in mint-teal with a small mint check pill icon. Sits as the
calming finale of the section. */
.uh-safety-row{
margin:96px 0 0;
text-align:center;
}
.uh-safety{
display:inline-flex;align-items:center;justify-content:center;
gap:12px;
max-width:54ch;
font-family:'Fraunces',serif;
font-weight:300;font-style:italic;
font-size:17px;line-height:1.5;
color:var(--teal-ink);
text-align:left;
text-wrap:pretty;
}
.uh-safety-text{flex:0 1 auto}
.uh-safety-icon{
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;
width:26px;height:26px;
border-radius:50%;
background:linear-gradient(180deg, #C7E5D2, #9BD9CD);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
inset 0 -1px 0 rgba(60,118,114,.10),
0 1px 2px rgba(60,120,100,.18),
0 4px 10px rgba(60,120,100,.15);
color:#fff;
}
.uh-safety-icon svg{width:14px;height:14px;display:block}
/* ============================================================
DARK MODE — bespoke surface tuning, app-faithful.
Palette and treatment match the macOS app exactly:
• warm near-black ground (#141412)
• elevation INVERTS — cards lighten via white@.06–.10
• text is off-white #F2F2F7, never pure white
• pillows go DARK GLASS with cream "Polish" label
• brand mint #BFE0CC and teal-soft #7ED1CD as accents
Every illustration in the bento, popover, donut, pricing receipt,
and FAQ has its own tuned dark variant below.
============================================================ */
/* ── Body & ambient ─────────────────────────────────────────── */
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] .grain{opacity:.04;mix-blend-mode:screen}
[data-theme="dark"] .tired-wash{
background:linear-gradient(180deg, rgba(225,160,90,.04), rgba(225,160,90,.10));
}
[data-theme="dark"] .mint-kiss{
background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(155,217,200,.16) 0%, rgba(155,217,200,.06) 38%, transparent 72%);
}
/* ── Hero copy (display, lede, beat lines, ambient phrases) ───
Dark-mode hero is reframed as cosmic stillness: the canvas is
night, ambient phrases are quiet activity twinkling like distant
stars, the pillow is a luminous moon, the press releases mint
moonlight that floods the room. Each piece below contributes to
that overall feel. */
[data-theme="dark"] .beat-line,
[data-theme="dark"] .meet h1,
[data-theme="dark"] .display,
[data-theme="dark"] .display.centered{color:var(--text)}
/* "Meet Shiny." in its refined (settled) state.
The letterforms are filled with a diagonal multi-stop mint
gradient (lightest in the upper-left where ambient light catches,
deepening to mid-mint, settling to a darker brand mint at the
bottom-right). Combined with the SOFT axis on Fraunces and a slow
ambient drop-shadow breath, the type reads like polished mint
metal lit by moonlight — alive, not flat. */
[data-theme="dark"] .meet h1.refined{
font-variation-settings:"opsz" 144, "SOFT" 80;
letter-spacing:-0.03em;
color:#BFE0CC;
background:none;
-webkit-background-clip:initial;
background-clip:initial;
-webkit-text-fill-color:currentColor;
text-shadow:none;
animation:meetShinyBreathDark 6s ease-in-out infinite;
}
/* Make sure the per-letter spans inherit the mint colour (they do
by default since `color` is inheritable, but explicit guards
against any stray fill rules from the previous gradient-clip). */
[data-theme="dark"] .meet h1.refined .ltr{
color:inherit;
-webkit-text-fill-color:currentColor;
}
@keyframes meetShinyBreathDark{
0%, 100%{
filter:
drop-shadow(0 0 14px rgba(155,217,200,.36))
drop-shadow(0 0 38px rgba(155,217,200,.14));
}
50%{
filter:
drop-shadow(0 0 22px rgba(155,217,200,.58))
drop-shadow(0 0 56px rgba(126,209,205,.26));
}
}
/* Celebration beat: the existing per-word text-shadow shimmer reads
as a washed white halo on dark. Suppress it and pulse the whole
headline's drop-shadow filter instead — keeps the celebration
feeling without the cheap flash. */
[data-theme="dark"] .meet h1.shimmering .word-shiny{animation:none}
[data-theme="dark"] .meet h1.shimmering{
animation:meetShinyPulseDark 2.4s cubic-bezier(.4,0,.2,1);
}
@keyframes meetShinyPulseDark{
0%, 100%{
filter:
drop-shadow(0 0 16px rgba(155,217,200,.40))
drop-shadow(0 0 40px rgba(155,217,200,.16));
}
50%{
filter:
drop-shadow(0 0 24px rgba(155,217,200,.65))
drop-shadow(0 0 60px rgba(126,209,205,.32));
}
}
[data-theme="dark"] .beat-line em,
[data-theme="dark"] .display em,
[data-theme="dark"] .lede em{color:var(--accent)}
/* Lede + hero subtitle below the hero mark — pure off-white. The
hero copy uses a plain inside .meet, not the .lede class, so
target both. */
[data-theme="dark"] .lede,
[data-theme="dark"] .meet p{color:var(--text)}
[data-theme="dark"] .eyebrow{color:var(--text-muted)}
/* Ambient phrases — visible at a readable-but-quiet level. Slightly
warmer mint with a faint star-glow per phrase. */
[data-theme="dark"] .phrase.visible{
color:rgba(191,224,204,.40);
text-shadow:0 0 6px rgba(155,217,200,.20);
}
[data-theme="dark"] .ambient.recede .phrase.visible{
color:rgba(191,224,204,.10);
filter:blur(1.5px);
}
[data-theme="dark"] .phrase.sweep{
color:rgba(220,240,228,.55);
}
/* Hero pillow — already dark glass with a cream "Polish" label, but
crank the halo so it reads as a beacon against the dark canvas. */
[data-theme="dark"] .pillow{
background:
radial-gradient(circle at 30% 26%, rgba(255,255,255,.22), transparent 58%),
radial-gradient(circle at 50% 55%, rgba(155,217,200,.34), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 100%);
background-color:#1A1A18;
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.24),
inset 0 0 0 1px rgba(155,217,200,.20),
0 0 38px rgba(155,217,200,.55),
0 0 90px rgba(155,217,200,.22),
0 4px 10px rgba(0,0,0,.6),
0 22px 50px rgba(0,0,0,.6);
color:#E8DFD0;
}
[data-theme="dark"] .pillow.celebrating{
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.30),
inset 0 0 0 1px rgba(155,217,200,.45),
0 0 60px rgba(155,217,200,.85),
0 0 130px rgba(155,217,200,.45),
0 4px 10px rgba(0,0,0,.6),
0 22px 50px rgba(0,0,0,.6);
}
[data-theme="dark"] .pillow-floor{
background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(155,217,200,.28), transparent 65%);
}
/* Aurora layers behind the pillow — restrained on dark.
The pillow itself already glows mint via its own shadow; aurora
is a faint atmospheric breath, not a coloured spotlight. */
[data-theme="dark"] .aurora-warm{
background:radial-gradient(circle, rgba(241,134,32,.20) 0%, rgba(241,134,32,.06) 50%, transparent 80%);
filter:blur(42px);
}
[data-theme="dark"] .aurora-warm.calm{
background:radial-gradient(circle, rgba(155,217,200,.22) 0%, rgba(155,217,200,.08) 50%, transparent 80%);
}
[data-theme="dark"] .aurora-cool{
background:radial-gradient(circle, rgba(126,209,205,.20) 0%, rgba(126,209,205,.06) 50%, transparent 80%);
}
[data-theme="dark"] .aurora-leak{
background:radial-gradient(circle, rgba(191,224,204,.70), rgba(155,217,200,.32) 35%, transparent 80%);
}
/* The "meet-spotlight" wash that softens ambient phrases when Meet
Shiny appears uses a cream radial in light mode — that reads as
a white smudge on dark. Replace with a soft mint moonlight wash
so it feels native and matches the rest of the dark palette. */
[data-theme="dark"] .meet-spotlight{
background:radial-gradient(ellipse,
rgba(155,217,200,.22) 0%,
rgba(155,217,200,.10) 38%,
transparent 72%);
filter:blur(48px);
}
/* Mint kiss flash — celebration peak. Strong but not blinding. */
[data-theme="dark"] .mint-kiss{
background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(155,217,200,.30) 0%, rgba(195,224,210,.10) 38%, transparent 72%);
}
/* Motes — slight twinkle, not flares. */
[data-theme="dark"] .mote{
background:radial-gradient(circle, rgba(220,240,228,.70), rgba(155,217,200,.30) 60%, transparent 100%);
}
/* Edge-glow tones rebalanced for dark.
The arc reads: subtle warm candle → warmer amber → TENSE deep
red (subtle but present, the "your Mac is struggling" moment) →
BLOOM mint moonlight (the relief release) → quiet mint hint. */
[data-theme="dark"] .edge-frame[data-tone="subtle"] .edge.top {background:linear-gradient(to bottom, rgba(255,170,90,.08) 0%, rgba(255,170,90,.03) 45%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="subtle"] .edge.bottom {background:linear-gradient(to top, rgba(255,170,90,.08) 0%, rgba(255,170,90,.03) 45%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="subtle"] .edge.left {background:linear-gradient(to right, rgba(255,170,90,.08) 0%, rgba(255,170,90,.03) 45%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="subtle"] .edge.right {background:linear-gradient(to left, rgba(255,170,90,.08) 0%, rgba(255,170,90,.03) 45%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="warmer"] .edge.top {background:linear-gradient(to bottom, rgba(255,140,70,.18) 0%, rgba(255,140,70,.08) 40%, rgba(255,140,70,.02) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="warmer"] .edge.bottom {background:linear-gradient(to top, rgba(255,140,70,.18) 0%, rgba(255,140,70,.08) 40%, rgba(255,140,70,.02) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="warmer"] .edge.left {background:linear-gradient(to right, rgba(255,140,70,.18) 0%, rgba(255,140,70,.08) 40%, rgba(255,140,70,.02) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="warmer"] .edge.right {background:linear-gradient(to left, rgba(255,140,70,.18) 0%, rgba(255,140,70,.08) 40%, rgba(255,140,70,.02) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="tense"] .edge.top {background:linear-gradient(to bottom, rgba(245,90,80,.28) 0%, rgba(245,90,80,.14) 40%, rgba(245,90,80,.04) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="tense"] .edge.bottom {background:linear-gradient(to top, rgba(245,90,80,.28) 0%, rgba(245,90,80,.14) 40%, rgba(245,90,80,.04) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="tense"] .edge.left {background:linear-gradient(to right, rgba(245,90,80,.28) 0%, rgba(245,90,80,.14) 40%, rgba(245,90,80,.04) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="tense"] .edge.right {background:linear-gradient(to left, rgba(245,90,80,.28) 0%, rgba(245,90,80,.14) 40%, rgba(245,90,80,.04) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="bloom"] .edge.top {background:linear-gradient(to bottom, rgba(155,217,200,.38) 0%, rgba(155,217,200,.18) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="bloom"] .edge.bottom {background:linear-gradient(to top, rgba(155,217,200,.38) 0%, rgba(155,217,200,.18) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="bloom"] .edge.left {background:linear-gradient(to right, rgba(155,217,200,.38) 0%, rgba(155,217,200,.18) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="bloom"] .edge.right {background:linear-gradient(to left, rgba(155,217,200,.38) 0%, rgba(155,217,200,.18) 40%, rgba(155,217,200,.05) 70%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="hint"] .edge.top {background:linear-gradient(to bottom, rgba(191,224,204,.18) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="hint"] .edge.bottom {background:linear-gradient(to top, rgba(191,224,204,.18) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="hint"] .edge.left {background:linear-gradient(to right, rgba(191,224,204,.18) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
[data-theme="dark"] .edge-frame[data-tone="hint"] .edge.right {background:linear-gradient(to left, rgba(191,224,204,.18) 0%, rgba(191,224,204,.06) 50%, transparent 100%)}
/* ── Nav pill ───────────────────────────────────────────────── */
[data-theme="dark"] body.scrolled .nav-pill,
[data-theme="dark"] body.legal-page .nav-pill,
[data-theme="dark"] body.download-page .nav-pill{
background:rgba(28,28,26,.78);
backdrop-filter:blur(22px) saturate(150%);
-webkit-backdrop-filter:blur(22px) saturate(150%);
border:1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 1px 2px rgba(0,0,0,.45),
0 12px 32px rgba(0,0,0,.55);
}
[data-theme="dark"] .nav-logo{color:var(--text)}
[data-theme="dark"] .nav-logo-text{color:var(--accent)}
[data-theme="dark"] .nav-link{color:var(--text-soft)}
[data-theme="dark"] .nav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}
[data-theme="dark"] .nav-link.is-active{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .nav-link-strong{
color:#0E2A26;
background:var(--mint-cool, #A8DCC9);
}
[data-theme="dark"] .nav-link-strong:hover{
color:#0E2A26;
background:var(--mint-bright, #D7EFDF);
}
[data-theme="dark"] .nav-sep{background:rgba(255,255,255,.14)}
[data-theme="dark"] .nav-buy{
background:linear-gradient(180deg, #BFE0CC 0%, #9CCBB1 100%);
color:#0F1A15;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(0,0,0,.18),
0 1px 2px rgba(0,0,0,.35),
0 8px 22px rgba(155,217,200,.22);
}
/* ── About-section: live demo popover ──────────────────────────
Pixel-faithful dark glass version of PopoverView.swift. The app
uses warm near-black popover material; the pillow flips to a dark
glass disc with a cream "Polish" label. */
[data-theme="dark"] .demo-popover{
background:linear-gradient(180deg, rgba(34,33,30,.92) 0%, rgba(24,23,21,.92) 100%);
border:0.5px solid rgba(255,255,255,.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 0 0 .5px rgba(255,255,255,.05),
0 1px 2px rgba(0,0,0,.55),
0 28px 70px rgba(0,0,0,.65),
0 6px 16px rgba(0,0,0,.45);
color:var(--text);
}
[data-theme="dark"] .dp-glass-edge{border-color:rgba(255,255,255,.10)}
[data-theme="dark"] .dp-glass-specular{
background:radial-gradient(ellipse 60% 55% at 5% 0%, rgba(255,255,255,.10), transparent 60%);
}
[data-theme="dark"] .dp-glass-glint{
background:radial-gradient(ellipse 50% 50% at 100% 100%, rgba(255,255,255,.05), transparent 60%);
}
[data-theme="dark"] .dp-mark{
color:rgba(242,242,247,.86);
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
[data-theme="dark"] .dp-cog{color:var(--text-muted)}
[data-theme="dark"] .dp-cog:hover{background:rgba(255,255,255,.06);color:var(--text)}
/* Pillow goes DARK in dark mode — matches app's pillowStops gradient
(white 0.18 → 0.13 → 0.09 from app's DesignSystem). The "Polish"
label flips to a cream colour (#E8DFD0) so it reads ink-on-paper. */
[data-theme="dark"] .dp-pillow{
background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.12) 55%, rgba(255,255,255,.06) 100%), #1A1A18;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 3px rgba(0,0,0,.45),
inset 0 0 0 0.5px rgba(255,255,255,.08),
0 2px 6px rgba(0,0,0,.55),
0 12px 24px -8px rgba(0,0,0,.7);
}
[data-theme="dark"] .dp-pillow-label{color:#E8DFD0}
[data-theme="dark"] .demo-popover.dp-clearing .dp-pillow{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 0 0 1px rgba(155,217,200,.40),
0 0 28px rgba(155,217,200,.45),
0 12px 24px -8px rgba(0,0,0,.6);
}
[data-theme="dark"] .dp-sentence{color:var(--text-soft)}
[data-theme="dark"] .dp-culprit-card{
background:rgba(255,255,255,.04);
border:.6px solid rgba(255,255,255,.10);
}
[data-theme="dark"] .dp-culprit-line{color:var(--text-soft)}
[data-theme="dark"] .dp-culprit-apps{color:var(--text)}
[data-theme="dark"] .dp-culprit-suffix{color:var(--text-soft)}
[data-theme="dark"] .dp-app-chip{color:var(--text)}
[data-theme="dark"] .dp-app-chip:hover,
[data-theme="dark"] .dp-app-chip.cursor-over{
background:rgba(126,209,205,.18);
}
[data-theme="dark"] .dp-app-chip.quitting{
text-decoration-color:rgba(255,255,255,.45);
}
/* ── Bento section + cards ─────────────────────────────────── */
[data-theme="dark"] .bento-card{
background:rgba(255,255,255,.04);
backdrop-filter:blur(14px) saturate(140%);
border:1px solid rgba(255,255,255,.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 1px 2px rgba(0,0,0,.45),
0 14px 36px rgba(0,0,0,.45);
}
[data-theme="dark"] .bento-card:hover{
border-color:rgba(155,217,200,.40);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 0 0 1px rgba(155,217,200,.22),
0 0 36px rgba(155,217,200,.18),
0 4px 8px rgba(0,0,0,.55),
0 28px 64px rgba(0,0,0,.55);
}
[data-theme="dark"] .bento-headline{color:var(--text)}
[data-theme="dark"] .bento-body{color:var(--text-soft)}
[data-theme="dark"] .bento-eyebrow{color:var(--accent)}
/* Bento card 1 — storage timeline.
The light-mode bar uses a cream gradient track (#ECE7DA → #DDD7C7)
with pastel coloured segments and a subtle dark inset shadow. In
dark mode the WHOLE bar needs to flip: the empty-track portion
becomes a dark graphite groove with a light inner highlight,
pastel segments shift to deeper saturated tones, and the legend
text and tick labels go off-white. */
[data-theme="dark"] .storage-bar{
background:linear-gradient(180deg, #1F1F1D 0%, #15151D 100%);
border:.5px solid rgba(255,255,255,.06);
box-shadow:
inset 0 1px 1px rgba(0,0,0,.55),
inset 0 0 0 .5px rgba(255,255,255,.04);
}
[data-theme="dark"] .seg-apps {background:linear-gradient(180deg, #5B8DEF, #3F6CC8)}
[data-theme="dark"] .seg-photos{background:linear-gradient(180deg, #E07592, #B85470)}
[data-theme="dark"] .seg-mail {background:linear-gradient(180deg, #E89A55, #C77A35)}
[data-theme="dark"] .seg-docs {background:linear-gradient(180deg, #D8B636, #B6952A)}
[data-theme="dark"] .seg-system{background:linear-gradient(180deg, #9B7FD0, #7A5EAE)}
[data-theme="dark"] .seg-other {background:linear-gradient(180deg, #6B6960, #4F4D45)}
[data-theme="dark"] .seg-music {background:linear-gradient(180deg, #5FB777, #3E8E55)}
[data-theme="dark"] .tick-day{color:var(--accent)}
[data-theme="dark"] .tick-now{color:#E89A55}
[data-theme="dark"] .storage-legend{color:var(--text-muted)}
[data-theme="dark"] .sw-apps {background:#5B8DEF}
[data-theme="dark"] .sw-photos{background:#E07592}
[data-theme="dark"] .sw-mail {background:#E89A55}
[data-theme="dark"] .sw-docs {background:#D8B636}
[data-theme="dark"] .sw-system{background:#9B7FD0}
[data-theme="dark"] .sw-other {background:#6B6960}
[data-theme="dark"] .legend-swatch{
box-shadow:inset 0 -1px 0 rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16);
}
/* The mint sweep across the bar during the polish is fine on either
theme — keep it but slightly stronger on dark. */
[data-theme="dark"] .storage-sweep{
background:linear-gradient(90deg,
transparent 0%,
rgba(155,217,200,.35) 50%,
transparent 100%);
}
/* Bento card 2 — sneaky apps. Real macOS Activity Monitor / Apps
list in dark mode shows rows as elevated graphite tiles with a
subtle inner highlight and softened brand glyphs. Match that. */
[data-theme="dark"] .mini-app-row{
background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%);
border:1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 1px 1px rgba(0,0,0,.35);
}
[data-theme="dark"] .mini-app-icon{
/* Calm the brand icons so they sit on the dark surface rather than
screaming at the user — slight desaturation + a soft inner ring. */
background:rgba(255,255,255,.05);
box-shadow:
inset 0 0 0 .5px rgba(255,255,255,.10),
0 1px 2px rgba(0,0,0,.5);
}
[data-theme="dark"] .mini-app-icon img{filter:saturate(.92) brightness(.96)}
[data-theme="dark"] .mini-app-name{color:var(--text)}
[data-theme="dark"] .mini-pill-known{
background:rgba(155,217,200,.18);
color:#BFE0CC;
box-shadow:inset 0 0 0 .5px rgba(155,217,200,.30);
}
[data-theme="dark"] .mini-pill-hidden{
/* Pink in dark mode reads warm-pink, like macOS Stage Manager
"background" pills — not the cold blue-grey I had before. */
background:rgba(232,148,170,.18);
color:#F2A6BC;
box-shadow:inset 0 0 0 .5px rgba(232,148,170,.30);
}
/* Re-bind the row pulse animations to dark-tuned keyframes so the
background flash uses dark-glass tones instead of light pastels. */
[data-theme="dark"] .bento-2 .mini-app-row:nth-child(1){
animation:rowGlowKnownDark 6s ease-in-out infinite;
}
[data-theme="dark"] .bento-2 .mini-app-row:nth-child(2),
[data-theme="dark"] .bento-2 .mini-app-row:nth-child(3){
animation:rowGlowHiddenDark 6s ease-in-out infinite 3s;
}
@keyframes rowGlowKnownDark{
0%, 100% {background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04))}
46%, 54% {background:linear-gradient(180deg, rgba(155,217,200,.20), rgba(155,217,200,.08))}
}
@keyframes rowGlowHiddenDark{
0%, 100% {background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04))}
46%, 54% {background:linear-gradient(180deg, rgba(232,148,170,.20), rgba(232,148,170,.08))}
}
/* Bento card 3 (dark) — menu bar dial uses the brighter saturated
palette from MenuBarRingRenderer.stateColour(isDark: true). */
[data-theme="dark"] .menu-dial-svg{
--c-healthy:#5ECB88;
--c-warming:#F18620;
--c-critical:#E63C28;
--c-clear:#BFE0CC;
}
[data-theme="dark"] .md-tick{
/* Empty hairlines flip to white at 22% on dark — same as the
app's emptyColour in dark mode. */
stroke:rgba(255,255,255,.22);
}
[data-theme="dark"] .md-tick.lit{
stroke:var(--tick-color);
filter:drop-shadow(0 0 5px var(--tick-color));
}
[data-theme="dark"] .menu-dial-flash{
background:radial-gradient(circle, rgba(191,224,204,.65) 0%, rgba(155,217,200,.22) 45%, transparent 75%);
}
/* Bento card 3 — Polish pillow. Goes dark-glass to mirror the app. */
[data-theme="dark"] .mini-pillow{
background:
radial-gradient(circle at 30% 26%, rgba(255,255,255,.20), transparent 58%),
radial-gradient(circle at 50% 55%, rgba(126,209,205,.32) 0%, transparent 72%),
linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%),
#1A1A18;
color:#E8DFD0;
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.22),
inset 0 0 0 1px rgba(155,217,200,.18),
0 0 26px rgba(155,217,200,.45),
0 1px 2px rgba(0,0,0,.6),
0 14px 28px rgba(0,0,0,.55);
}
[data-theme="dark"] .clear-aurora{
background:radial-gradient(circle, rgba(155,217,200,.45) 0%, rgba(155,217,200,.16) 50%, transparent 80%);
}
[data-theme="dark"] .clear-spark{
background:#E8DFD0;
box-shadow:0 0 6px rgba(232,223,208,.85), 0 0 14px rgba(155,217,200,.7);
}
/* Bento card 4 — keyboard shortcut chips. Mirrors the dark-mode
look of an actual Magic Keyboard key: graphite top, slightly
darker slope to the bottom edge, crisp white glyph, soft inner
highlight at the top, faint shadow underneath.
The kbdPress keyframes hardcode a white background, so we re-bind
the running animation to a dark variant — otherwise the animation
timeline overrides the static rule. */
[data-theme="dark"] .kbd{
background:linear-gradient(180deg, #2E2E30 0%, #1E1E20 100%);
border:1px solid rgba(255,255,255,.10);
border-top-color:rgba(255,255,255,.16);
border-bottom-color:rgba(0,0,0,.6);
border-bottom-width:2px;
color:#F2F2F7;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -1px 0 rgba(0,0,0,.4),
0 1px 2px rgba(0,0,0,.55),
0 4px 8px rgba(0,0,0,.4);
text-shadow:0 1px 0 rgba(0,0,0,.45);
}
[data-theme="dark"] .kbd-plus{color:rgba(255,255,255,.45)}
[data-theme="dark"] .kbd-row .kbd:nth-child(1){animation:kbdPressDark 4.5s ease-in-out infinite}
[data-theme="dark"] .kbd-row .kbd:nth-child(3){animation:kbdPressDark 4.5s ease-in-out infinite .5s}
[data-theme="dark"] .kbd-row .kbd:nth-child(5){animation:kbdPressDark 4.5s ease-in-out infinite 1.0s}
@keyframes kbdPressDark{
0%, 28%, 100% {
transform:translateY(0);
background:linear-gradient(180deg, #2E2E30 0%, #1E1E20 100%);
border-bottom-width:2px;
}
10%, 18% {
transform:translateY(2px);
background:linear-gradient(180deg, #1E1E20 0%, #15151A 100%);
border-bottom-width:1px;
box-shadow:
inset 0 1px 2px rgba(0,0,0,.55),
inset 0 -1px 0 rgba(0,0,0,.4),
0 0 0 rgba(0,0,0,0);
}
}
/* Bento card 5 — auto-polish gauge.
Track ring lifted to a soft white groove (the hardcoded rgba(0,0,0,.08)
would be invisible on dark). The luminous halo lives BEHIND the SVG
as a radial-gradient on .auto-gauge::before — using filter on the
SVG path leaves a square clip at the canvas edge, which looked bad. */
[data-theme="dark"] .auto-gauge{position:relative}
[data-theme="dark"] .auto-gauge::before{
content:'';position:absolute;inset:-32px;
border-radius:50%;
background:radial-gradient(circle, rgba(155,217,200,.35) 0%, rgba(155,217,200,.10) 40%, transparent 70%);
filter:blur(6px);
pointer-events:none;
animation:gaugeHaloHueDark 5.5s ease-in-out infinite;
z-index:0;
}
[data-theme="dark"] .auto-gauge svg{z-index:1}
[data-theme="dark"] .auto-pct{z-index:2}
@keyframes gaugeHaloHueDark{
0%, 28% {background:radial-gradient(circle, rgba(155,217,200,.30) 0%, rgba(155,217,200,.10) 40%, transparent 70%)}
56%, 64% {background:radial-gradient(circle, rgba(255,140,90,.40) 0%, rgba(255,140,90,.14) 40%, transparent 70%)}
76%, 88% {background:radial-gradient(circle, rgba(155,217,200,.45) 0%, rgba(155,217,200,.16) 40%, transparent 70%)}
100% {background:radial-gradient(circle, rgba(155,217,200,.30) 0%, rgba(155,217,200,.10) 40%, transparent 70%)}
}
[data-theme="dark"] .auto-gauge svg circle:not(.auto-progress){
stroke:rgba(255,255,255,.08);
}
[data-theme="dark"] .auto-progress{
animation:autoProgressDark 5.5s ease-in-out infinite;
}
@keyframes autoProgressDark{
0% {stroke-dashoffset:185; stroke:url(#autoGaugeWarmDark)}
60% {stroke-dashoffset:21; stroke:url(#autoGaugeWarmDark)}
64% {stroke:#FF8870}
72% {stroke-dashoffset:21; stroke:url(#autoGaugeMintDark)}
88% {stroke-dashoffset:170; stroke:url(#autoGaugeMintDark)}
100% {stroke-dashoffset:185; stroke:url(#autoGaugeWarmDark)}
}
[data-theme="dark"] .auto-pct{
color:var(--text);
animation:autoPctDark 5.5s ease-in-out infinite;
}
@keyframes autoPctDark{
0% {color:#F2F2F7}
60% {color:#FFA988}
72% {color:#BFE0CC}
88% {color:#BFE0CC}
100% {color:#F2F2F7}
}
/* Bento card 6 — focus notifications. Each notification card goes
dark-glass with bright type. */
[data-theme="dark"] .focus-notif{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.45);
}
[data-theme="dark"] .fn-title{color:var(--text)}
[data-theme="dark"] .fn-msg{color:var(--text-muted)}
[data-theme="dark"] .fn-app{
box-shadow:0 1px 2px rgba(0,0,0,.5);
}
/* Bento card 8 — subtle warning, Finder windows. Real macOS Finder
IS dark in dark mode, so the windows flip to a graphite frame
with white text. */
[data-theme="dark"] .finder-mini{
background:#2C2C2E;
border:.5px solid rgba(255,255,255,.10);
box-shadow:
0 .5px 1px rgba(0,0,0,.6),
0 3px 8px rgba(0,0,0,.5),
0 14px 30px rgba(0,0,0,.55);
}
[data-theme="dark"] .finder-mini-bar{
background:linear-gradient(180deg, #3A3A3C 0%, #2C2C2E 100%);
border-bottom-color:rgba(0,0,0,.5);
}
[data-theme="dark"] .finder-mini-title{color:rgba(255,255,255,.86)}
[data-theme="dark"] .finder-mini-sidebar{
background:linear-gradient(180deg, #2A2A2C 0%, #232325 100%);
border-right-color:rgba(255,255,255,.06);
}
[data-theme="dark"] .fms-section{color:rgba(255,255,255,.42)}
[data-theme="dark"] .fms-item{color:rgba(255,255,255,.78)}
[data-theme="dark"] .fms-item.active{
background:rgba(10,132,255,.32);
color:#FFFFFF;
}
[data-theme="dark"] .fms-dot{background:rgba(255,255,255,.45)!important}
[data-theme="dark"] .fms-item.active .fms-dot{background:#0A84FF!important}
[data-theme="dark"] .finder-mini-content{background:#1F1F21}
[data-theme="dark"] .fmc-row{
color:rgba(255,255,255,.85);
border-bottom-color:rgba(255,255,255,.06);
}
[data-theme="dark"] .fmc-row-head{
background:linear-gradient(180deg, #2C2C2E, #232325);
color:rgba(255,255,255,.5);
border-bottom-color:rgba(0,0,0,.4);
}
[data-theme="dark"] .fmc-row:nth-child(even):not(.fmc-row-head){background:rgba(255,255,255,.03)}
[data-theme="dark"] .fmc-col-size,
[data-theme="dark"] .fmc-col-kind{color:rgba(255,255,255,.55)}
[data-theme="dark"] .finder-mini-pathbar{
background:linear-gradient(180deg, #2A2A2C, #232325);
border-top-color:rgba(255,255,255,.06);
color:rgba(255,255,255,.55);
}
[data-theme="dark"] .fmpb-mac{
background:linear-gradient(180deg, #6A6A6E, #45454A);
}
[data-theme="dark"] .fmpb-sep{color:rgba(255,255,255,.35)}
/* Bento card 8 hover override — keep edge-glow tints, just adapt
the no-mint-border base. */
[data-theme="dark"] .bento-card.bento-8:hover{
border-color:rgba(255,255,255,.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 4px 8px rgba(0,0,0,.55),
0 24px 56px rgba(0,0,0,.55);
}
/* ── Statement section ─────────────────────────────────────── */
[data-theme="dark"] .statement-headline{color:var(--accent)}
[data-theme="dark"] .statement-sub{color:var(--text-soft)}
[data-theme="dark"] .statement-sub em{color:var(--accent)}
/* ── Under the hood donut ──────────────────────────────────────
The whole stage gets a soft ambient mint wash that grounds the
ring on the dark canvas; arcs read more luminous (each "puff"
gets a brighter, bigger halo); the completion mint ring becomes
genuinely radiant; step dots brighter; center copy in off-white. */
[data-theme="dark"] .donut-section{
background:radial-gradient(ellipse 60% 45% at 50% 60%, rgba(126,209,205,.06) 0%, transparent 70%);
}
[data-theme="dark"] .dc-name{color:var(--text)}
[data-theme="dark"] .dc-line{color:var(--text-muted)}
[data-theme="dark"] .dc-row{color:var(--text-soft)}
[data-theme="dark"] .step-dot{
background:rgba(255,255,255,.22);
box-shadow:0 0 0 .5px rgba(255,255,255,.06);
}
[data-theme="dark"] .step-dot.active{
background:var(--accent);
box-shadow:0 0 10px rgba(155,217,200,.55);
}
[data-theme="dark"] .step-dot.all-done{
background:var(--accent);
box-shadow:0 0 14px rgba(155,217,200,.85), 0 0 28px rgba(155,217,200,.4);
}
/* The puffs (soft halos behind each colored arc) are pastel by
default which goes muddy on dark. Replace each puff with a
colour-matched low-opacity halo so the arc feels lit from within,
and add a per-segment drop-shadow glow. */
[data-theme="dark"] .arc[data-segment="0"]{
stroke:#7BB1F8;
filter:drop-shadow(0 0 6px rgba(123,177,248,.55)) drop-shadow(0 0 14px rgba(123,177,248,.30));
}
[data-theme="dark"] .arc[data-segment="1"]{
stroke:#FFD24E;
filter:drop-shadow(0 0 6px rgba(255,210,78,.55)) drop-shadow(0 0 14px rgba(255,210,78,.28));
}
[data-theme="dark"] .arc[data-segment="2"]{
stroke:#FF9A40;
filter:drop-shadow(0 0 6px rgba(255,154,64,.55)) drop-shadow(0 0 14px rgba(255,154,64,.28));
}
[data-theme="dark"] .arc[data-segment="3"]{
stroke:#F26464;
filter:drop-shadow(0 0 6px rgba(242,100,100,.55)) drop-shadow(0 0 14px rgba(242,100,100,.28));
}
/* Puff opacity is set by JS as an inline style (.65 when active, 0
when not) — we can't override that without breaking the fade-out.
Bake the alpha into the stroke colour instead so the puff reads
as a soft colour-matched glow, not a muddy pastel smear. */
[data-theme="dark"] .puff[data-segment="0"]{stroke:rgba(123,177,248,.32)}
[data-theme="dark"] .puff[data-segment="1"]{stroke:rgba(255,210,78,.30)}
[data-theme="dark"] .puff[data-segment="2"]{stroke:rgba(255,154,64,.30)}
[data-theme="dark"] .puff[data-segment="3"]{stroke:rgba(242,100,100,.32)}
/* Completion ring + halo become genuinely luminous in dark mode. */
[data-theme="dark"] .complete-puff{stroke:#9DDFB8}
[data-theme="dark"] .complete-ring{
stroke:#BFE0CC;
filter:drop-shadow(0 0 8px rgba(155,217,200,.55)) drop-shadow(0 0 20px rgba(155,217,200,.30));
}
[data-theme="dark"] .complete-burst{stroke:rgba(155,217,200,.9)}
[data-theme="dark"] .donut-center.is-complete .dc-name{
color:var(--accent);
text-shadow:0 0 16px rgba(155,217,200,.45);
}
[data-theme="dark"] .uh-safety{color:var(--accent)}
[data-theme="dark"] .uh-safety-icon{
background:linear-gradient(180deg, #BFE0CC, #7ED1CD);
color:#0F1A15;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 0 18px rgba(155,217,200,.45),
0 4px 10px rgba(0,0,0,.55);
}
/* ── Testimonials ───────────────────────────────────────────── */
[data-theme="dark"] .testimonial-card{
background:rgba(255,255,255,.04);
backdrop-filter:blur(14px) saturate(140%);
border:1px solid rgba(255,255,255,.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 1px 2px rgba(0,0,0,.45),
0 14px 36px rgba(0,0,0,.45);
}
[data-theme="dark"] .testimonial-card:hover{
border-color:rgba(126,209,205,.40);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 0 0 1px rgba(126,209,205,.22),
0 0 32px rgba(126,209,205,.18),
0 4px 8px rgba(0,0,0,.55),
0 22px 48px rgba(0,0,0,.5);
}
[data-theme="dark"] .t-quote{color:var(--text-soft)}
[data-theme="dark"] .t-hero .t-quote{color:var(--accent)}
[data-theme="dark"] .t-name{color:var(--text)}
[data-theme="dark"] .t-role{color:var(--text-muted)}
/* ── Mint-bottom region (pricing + faq + footer share) ─────── */
[data-theme="dark"] .mint-bottom{
background:radial-gradient(ellipse 120% 70% at 50% 100%, rgba(155,217,200,.07) 0%, transparent 65%);
}
/* ── Pricing receipt ────────────────────────────────────────── */
[data-theme="dark"] .receipt{
background:#1C1C1A;
border:1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 1px 2px rgba(0,0,0,.5),
0 24px 60px rgba(0,0,0,.55),
0 6px 18px rgba(0,0,0,.4);
}
[data-theme="dark"] .receipt-perforation{
background:radial-gradient(circle at 8px 0, transparent 6px, #1C1C1A 6.5px) repeat-x;
}
[data-theme="dark"] .receipt-brand{color:var(--text)}
[data-theme="dark"] .receipt-tagline{color:var(--text-muted)}
[data-theme="dark"] .receipt-divider{border-top-color:rgba(255,255,255,.18)}
[data-theme="dark"] .receipt-list .r-item{color:var(--text)}
[data-theme="dark"] .receipt-list .r-value{color:var(--text-soft)}
[data-theme="dark"] .receipt-list .r-strike .r-item{
color:var(--text-faint);
text-decoration-color:rgba(255,255,255,.30);
}
[data-theme="dark"] .receipt-list .r-strike .r-value{color:var(--accent)}
[data-theme="dark"] .r-total-label{color:var(--text)}
[data-theme="dark"] .r-total-once{color:var(--text-muted)}
[data-theme="dark"] .r-total-amount{color:var(--text)}
[data-theme="dark"] .receipt-btn{
background:linear-gradient(180deg, #BFE0CC 0%, #9CCBB1 100%);
color:#0F1A15;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(0,0,0,.18),
0 1px 2px rgba(0,0,0,.4),
0 8px 22px rgba(155,217,200,.30);
}
/* ── FAQ cards ──────────────────────────────────────────────── */
[data-theme="dark"] .faq-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:var(--text);
}
[data-theme="dark"] .faq-card:hover{
border-color:rgba(155,217,200,.30);
}
[data-theme="dark"] .faq-q{color:var(--text)}
[data-theme="dark"] .faq-a{color:var(--text-soft)}
[data-theme="dark"] .faq-num{color:rgba(255,255,255,.06)}
/* FAQ search hub — dark theme */
[data-theme="dark"] .faq-line{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .faq-search input{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.08);
color:var(--text);
}
[data-theme="dark"] .faq-search input:focus{
background:rgba(255,255,255,.06);
border-color:rgba(155,217,200,.45);
box-shadow:0 0 0 4px rgba(155,217,200,.14);
}
[data-theme="dark"] .faq-search input::placeholder{color:var(--text-faint)}
[data-theme="dark"] .faq-search-icon{color:var(--text-faint)}
[data-theme="dark"] .faq-chip{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.08);
color:var(--text-soft);
}
[data-theme="dark"] .faq-chip:hover{
background:rgba(155,217,200,.10);
color:var(--mint-soft, #C9E8D9);
border-color:rgba(155,217,200,.30);
}
[data-theme="dark"] .faq-chip.is-active{
background:linear-gradient(180deg, rgba(155,217,200,.30) 0%, rgba(155,217,200,.18) 100%);
color:#E5F4EC;
border-color:rgba(155,217,200,.35);
}
[data-theme="dark"] .faq-results{
background:rgba(255,255,255,.025);
border-color:rgba(255,255,255,.06);
}
[data-theme="dark"] .faq-row{border-top-color:rgba(255,255,255,.06)}
[data-theme="dark"] .faq-row[open]{background:rgba(155,217,200,.06)}
[data-theme="dark"] .faq-row > summary{color:var(--text)}
[data-theme="dark"] .faq-row > summary:hover{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .faq-row-body{color:var(--text-soft)}
[data-theme="dark"] .faq-row-body a{color:var(--mint-soft, #C9E8D9);border-bottom-color:rgba(155,217,200,.30)}
[data-theme="dark"] .faq-empty{color:var(--text-muted)}
/* ── Catalogue ──────────────────────────────────────────────── */
/* (catalogue-section border-top was removed; no override needed) */
[data-theme="dark"] .catalogue-grid .cat-card{border-color:rgba(255,255,255,.06)}
/* Both cards share the same warm off-white text in dark mode so the
typography reads the same on either side of the grid. The bg
palettes still differ (warm-amber vs cool-blue glow). */
[data-theme="dark"] .catalogue-grid .cat-solace,
[data-theme="dark"] .catalogue-grid .cat-charm{color:#F2F2F7}
[data-theme="dark"] .catalogue-grid .cat-solace .cat-tag,
[data-theme="dark"] .catalogue-grid .cat-charm .cat-tag{color:rgba(242,242,247,.74)}
[data-theme="dark"] .catalogue-grid .cat-solace strong,
[data-theme="dark"] .catalogue-grid .cat-charm strong{color:#FFFFFF;font-weight:700}
[data-theme="dark"] .catalogue-grid .cat-charm{
background:
radial-gradient(circle at 100% 0%, rgba(80,210,225,.28), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(50,150,200,.20), transparent 55%),
linear-gradient(135deg, #0E2630 0%, #163844 60%, #0F2A38 100%);
border-color:rgba(126,209,205,.18);
}
[data-theme="dark"] .catalogue-grid .cat-charm:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 0 1.5px rgba(126,209,205,.55),
0 0 36px rgba(80,210,225,.32),
0 4px 8px rgba(0,0,0,.5),
0 28px 60px rgba(0,0,0,.45);
}
/* ── Footer ─────────────────────────────────────────────────── */
[data-theme="dark"] .footer-motif-line{
background:linear-gradient(90deg, transparent 0%, rgba(155,217,200,.28) 50%, transparent 100%);
}
[data-theme="dark"] .footer-motif-dot{
background:radial-gradient(circle at 35% 30%, #DAF1E2 0%, #BFE0CC 65%, #7DC79D 100%);
box-shadow:
0 0 0 1px rgba(155,217,200,.40),
0 0 14px rgba(155,217,200,.65),
0 0 26px rgba(155,217,200,.30);
}
[data-theme="dark"] .footer-links a{color:var(--text-muted)}
[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] .footer-links a:focus-visible{color:var(--accent)}
[data-theme="dark"] .footer-link-strong{
color:#0E2A26 !important;
background:var(--mint-cool, #A8DCC9) !important;
}
[data-theme="dark"] .footer-link-strong:hover,
[data-theme="dark"] .footer-link-strong:focus-visible{
color:#0E2A26 !important;
background:var(--mint-bright, #D7EFDF) !important;
}
[data-theme="dark"] .footer-link-sep{background:rgba(255,255,255,.18)}
[data-theme="dark"] .footer-base{color:var(--text-muted)}
[data-theme="dark"] .footer-copy{color:var(--text-muted)}
[data-theme="dark"] .footer-base-sep{background:rgba(255,255,255,.12)}
[data-theme="dark"] .footer-craft{color:var(--text-muted)}
/* ── Hero pillow + halo + aurora (the big intro pillow) ─────── */
[data-theme="dark"] .pillow{
background:
radial-gradient(circle at 30% 28%, rgba(255,255,255,.20), transparent 58%),
radial-gradient(circle at 50% 55%, rgba(126,209,205,.28), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
background-color:#1A1A18;
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.20),
inset 0 0 0 1px rgba(155,217,200,.16),
0 0 32px rgba(155,217,200,.45),
0 4px 10px rgba(0,0,0,.55),
0 22px 50px rgba(0,0,0,.55);
color:#E8DFD0;
}
[data-theme="dark"] .pillow-floor{
background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(155,217,200,.22), transparent 65%);
}
/* ── About/menubar mock + apps card (intro-only fallback bits) ─ */
[data-theme="dark"] .menubar{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
[data-theme="dark"] .menubar-app{color:var(--text)}
[data-theme="dark"] .menubar-item,
[data-theme="dark"] .menubar-icons{color:var(--text-muted)}
[data-theme="dark"] .apps-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}
[data-theme="dark"] .apps-card-title{color:var(--text-muted)}
[data-theme="dark"] .apps-card-sort{color:var(--text-faint)}
[data-theme="dark"] .app-name{color:var(--text)}
[data-theme="dark"] .app-desc{color:var(--text-soft)}
[data-theme="dark"] .app-foot{color:var(--text-muted)}
[data-theme="dark"] .price{color:var(--text)}
/* ── About-section menubar miniatures (.mb-*) ──────────────── */
[data-theme="dark"] .mb-app-name,
[data-theme="dark"] .mb-time{color:var(--text)}
[data-theme="dark"] .mb-item{color:var(--text-soft)}
[data-theme="dark"] .ap-header{color:var(--text)}
[data-theme="dark"] .ap-sentence{color:var(--text-soft)}
/* ============================================================
MOBILE PASS — comprehensive responsive tightening for narrow
viewports. Existing per-component breakpoints handle grid
collapses; this block fixes the broad spacing/padding/typography
issues that made the page feel desktop-stuffed-into-a-phone.
============================================================ */
/* Tablet + small desktop (≤860px): trim section vertical padding so
the page doesn't feel like it's mostly empty space. */
@media (max-width:860px){
.about-section,
.bento-section,
.statement-section,
.testimonials-section,
.pricing-section,
.faq-section,
.catalogue-section,
.donut-section{
padding-top:6rem;
padding-bottom:6rem;
}
.hero{padding:5rem 1.5rem}
}
/* Phone (≤560px): tighten everything. */
@media (max-width:560px){
/* Section vertical padding — was 10rem, way too generous. */
.about-section{padding:5rem 1.25rem 4rem}
.bento-section{padding:4.5rem 1.25rem 4rem}
.statement-section{padding:5rem 1.25rem}
.testimonials-section{padding:5rem 1.25rem}
.pricing-section{padding:5rem 1.25rem 4rem}
.faq-section{padding:5rem 1.25rem 4.5rem}
.catalogue-section{padding:5rem 1.25rem 4rem}
.donut-section{padding:5rem 1.25rem 5rem}
.hero{padding:5rem 1.25rem}
/* Display headlines slightly smaller so they don't dominate. */
.display{font-size:clamp(30px, 8.4vw, 40px)}
.lede{font-size:17px;margin-top:14px}
.statement-headline{font-size:clamp(36px, 9vw, 44px);margin-bottom:20px}
.statement-sub{font-size:clamp(15px, 4vw, 18px)}
/* Bento cards — desktop padding is too heavy on a 311px-wide card. */
.bento-card{padding:24px 22px;border-radius:20px;gap:18px}
.bento-1 .bento-headline{font-size:clamp(22px, 6vw, 26px)}
.bento-headline{font-size:clamp(20px, 5.4vw, 24px)}
.bento-body{font-size:13.5px}
/* Hero testimonial card — was 48/56px = 199px content area. */
.t-hero{padding:32px 28px;grid-row:auto}
.t-hero .t-quote{font-size:clamp(22px, 6.6vw, 30px);line-height:1.22}
.t-hero .t-quote::before{font-size:1.4em;top:-.10em;left:-.18em}
/* Other testimonial cards — same generous padding issue. */
.testimonial-card{padding:28px 24px;border-radius:18px;gap:18px}
.t-quote{font-size:15.5px;line-height:1.5}
/* Pricing receipt — leave tight horizontal margins. */
.receipt{padding:36px 26px 28px;border-radius:12px}
.receipt-perforation{height:12px;background-size:14px 12px}
.r-total-amount{font-size:36px}
.receipt-btn{padding:18px 24px;gap:10px}
.receipt-btn-label{font-size:13.5px;letter-spacing:.18em}
.receipt-btn-mark{font-size:30px}
/* FAQ cards. */
.faq-card{padding:24px 22px 22px;border-radius:18px}
/* Catalogue cards — were 44/40px on narrow phones.
Scoped under .catalogue-grid to avoid clobbering the blog landing
category deck which reuses the same .cat-card / .cat-name names. */
.catalogue-grid .cat-card{padding:30px 26px;border-radius:20px}
.catalogue-grid .cat-name{font-size:clamp(20px, 5.6vw, 24px)}
.catalogue-grid .cat-tag{font-size:14px}
/* Footer — links list wrapped to 3 awkward lines with "Support"
orphaned. Reduce the per-link padding so 4 fit per row, and
allow 2-line natural wrap. */
.footer-section{padding:3.5rem 1.25rem 2.5rem}
.footer-motif{margin-bottom:32px;gap:14px}
.footer-stage{padding:0}
.footer-links{
gap:6px 2px;
max-width:100%;
}
.footer-links a{
padding:6px 10px;
font-size:13px;
}
/* Mobile: trim Blog / Privacy / Terms from the footer so Support
and Download fit cleanly on one row. Order is fixed across all
pages: 1 Features, 2 Pricing, 3 FAQ, 4 Blog, 5 Privacy, 6 Terms,
7 Support, 8 Download. */
.footer-links a:nth-of-type(4),
.footer-links a:nth-of-type(5),
.footer-links a:nth-of-type(6){
display:none;
}
/* Donut — already had a media query; just refine the safety
statement padding on narrow phones. */
.uh-safety{font-size:15.5px}
.uh-safety-row{margin-top:64px}
/* About-section live demo popover — was 320px hard-width;
already added max-width:100%, also tighten the inner padding. */
.demo-popover{padding:12px 14px 16px}
.dp-pillow-wrap{width:108px;height:108px}
/* Eyebrow generous letter-spacing reads cramped at narrow widths. */
.eyebrow{margin-bottom:8px;letter-spacing:.14em}
/* Skip-intro button — make sure it's reachable, not buried. */
.skip{font-size:11px;padding:8px 14px;bottom:18px}
}
/* Very narrow (≤400px) — final compaction. */
@media (max-width:400px){
.about-section,
.bento-section,
.pricing-section,
.faq-section,
.catalogue-section,
.testimonials-section,
.donut-section{padding-left:1rem;padding-right:1rem}
.footer-section{padding-left:1rem;padding-right:1rem}
.display{font-size:clamp(28px, 9vw, 36px)}
.statement-headline{font-size:clamp(32px, 9.5vw, 40px)}
.t-hero .t-quote{font-size:clamp(20px, 6.4vw, 26px)}
.receipt-btn-mark{font-size:28px}
.footer-links a{padding:5px 8px;font-size:12.5px}
}
/* ============================================================
LEGAL PAGES (privacy.html, terms.html)
Editorial: Fraunces title, Geist body, comfortable measure.
============================================================ */
.legal-page{min-height:100vh;display:flex;flex-direction:column}
.legal-nav{position:fixed}
.legal-section{
flex:1;display:flex;justify-content:center;
padding:9rem 2rem 7rem;position:relative;
}
.legal-stage{
width:100%;max-width:700px;
text-align:left;
}
.legal-eyebrow{
margin:0 0 12px;
font-family:'Geist',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);
}
.legal-title{
margin:0 0 18px;
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:clamp(48px, 6vw, 76px);line-height:1;
letter-spacing:-0.025em;color:var(--teal-ink);
}
.legal-title-dot{color:var(--mint-cool-deep);font-style:normal}
.legal-lede{
margin:0 0 28px;
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 36;
font-size:clamp(18px, 1.6vw, 22px);line-height:1.45;
color:var(--ink-2);max-width:55ch;text-wrap:pretty;
}
.legal-meta{
margin:0 0 36px;
font-family:'Geist',sans-serif;font-weight:500;font-size:12px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.legal-pillars{
margin:0 0 44px;
display:flex;flex-direction:column;gap:10px;
padding:22px 24px;border-radius:18px;
background:rgba(126,209,205,.08);
border:1px solid rgba(126,209,205,.20);
}
.legal-pillar{
font-family:'Geist',sans-serif;font-size:14px;line-height:1.55;color:var(--ink-2);
display:flex;align-items:flex-start;gap:10px;
}
.legal-pillar-mark{
flex-shrink:0;
width:18px;height:18px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:var(--mint-cool-deep);color:#fff;
font-size:11px;font-weight:700;margin-top:1px;
}
.legal-pillar strong{color:var(--ink);font-weight:600;margin-right:4px}
.legal-h2{
margin:36px 0 14px;
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-variation-settings:"opsz" 60;
font-size:clamp(22px, 2vw, 28px);line-height:1.2;
color:var(--teal-ink);letter-spacing:-0.012em;
text-wrap:balance;
}
.legal-p{
margin:0 0 14px;
font-family:'Geist',sans-serif;font-size:14.5px;line-height:1.7;
color:var(--ink-2);max-width:62ch;text-wrap:pretty;
}
.legal-p a{color:var(--teal-ink);text-decoration:underline;text-decoration-color:rgba(45,90,80,.30);text-underline-offset:2px}
.legal-p a:hover{color:var(--mint-cool-deep);text-decoration-color:currentColor}
.legal-p code{
font-family:'Geist Mono', ui-monospace, monospace;
font-size:.92em;padding:1px 6px;border-radius:4px;
background:rgba(0,0,0,.05);color:var(--ink);
}
.legal-p strong{color:var(--ink);font-weight:600}
@media (max-width:560px){
.legal-section{padding:7rem 1.25rem 5rem}
.legal-title{font-size:clamp(40px, 11vw, 56px)}
.legal-lede{font-size:16px}
.legal-h2{font-size:20px;margin-top:28px}
.legal-p{font-size:14px}
.legal-pillars{padding:18px 18px}
}
[data-theme="dark"] .legal-eyebrow{color:var(--accent)}
[data-theme="dark"] .legal-title{
color:#BFE0CC;
filter:drop-shadow(0 0 14px rgba(155,217,200,.32)) drop-shadow(0 0 38px rgba(155,217,200,.12));
}
[data-theme="dark"] .legal-title-dot{color:#7DC79D}
[data-theme="dark"] .legal-lede{color:var(--text-soft)}
[data-theme="dark"] .legal-meta{color:var(--text-muted)}
[data-theme="dark"] .legal-pillars{
background:rgba(125,199,157,.07);
border-color:rgba(125,199,157,.20);
}
[data-theme="dark"] .legal-pillar{color:var(--text-soft)}
[data-theme="dark"] .legal-pillar strong{color:var(--text)}
[data-theme="dark"] .legal-pillar-mark{background:#7DC79D;color:#0F1A15}
[data-theme="dark"] .legal-h2{color:#BFE0CC}
[data-theme="dark"] .legal-p{color:var(--text-soft)}
[data-theme="dark"] .legal-p a{color:var(--accent);text-decoration-color:rgba(125,199,157,.40)}
[data-theme="dark"] .legal-p a:hover{color:#D7EFDF}
[data-theme="dark"] .legal-p code{background:rgba(255,255,255,.06);color:var(--text)}
[data-theme="dark"] .legal-p strong{color:var(--text)}
/* ==========================================================================
BLOG: landing page + post template
Shared by /blog/ index and every /blog/ post.
========================================================================== */
/* ----- Stage containers ----- */
.blog-stage{padding:120px 24px 80px;position:relative;z-index:2}
.blog-stage-content{max-width:1180px;margin:0 auto}
.post-stage{padding:120px 24px 60px;position:relative;z-index:2}
.post-stage-content{max-width:680px;margin:0 auto}
/* ----- Blog hero ----- */
.blog-hero{text-align:center;margin:0 auto 80px}
.blog-eyebrow{
font-family:'Geist',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.20em;text-transform:uppercase;
color:var(--mint-cool-deep);margin:0 0 18px;
}
.blog-title{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:clamp(34px,5.6vw,72px);line-height:1.02;letter-spacing:-0.028em;
color:var(--teal-ink);margin:0 auto 28px;
white-space:nowrap;
}
@media (max-width:640px){
.blog-title{font-size:clamp(28px,7.5vw,46px);white-space:normal;text-wrap:balance}
}
.blog-lede{
font-family:'Geist',sans-serif;font-size:17px;line-height:1.65;
color:var(--ink-2);margin:0 auto;max-width:60ch;text-wrap:pretty;
}
/* ----- Category deck (4-col grid, "Slow Mac fixes" spans 2 cols) ----- */
.cat-deck-eyebrow{
text-align:center;font-family:'Geist',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.20em;text-transform:uppercase;color:var(--mint-cool-deep);
margin:0 0 28px;
}
.cat-deck{
display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
margin:0 auto 100px;
}
.cat-deck > .cat-card:nth-child(2){grid-column:span 2}
@media (max-width:980px){
.cat-deck{grid-template-columns:repeat(2,1fr)}
.cat-deck > .cat-card,
.cat-deck > .cat-card:nth-child(n){grid-column:auto}
}
@media (max-width:520px){.cat-deck{grid-template-columns:1fr}}
.cat-card{
position:relative;
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);
border-radius:20px;
padding:26px 24px 24px;
display:flex;flex-direction:column;gap:12px;
text-decoration:none;color:inherit;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.04),
0 8px 22px rgba(60,40,20,.05);
transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft),border-color .35s var(--ease-soft);
min-height:180px;
}
.cat-card:hover{
transform:translateY(-2px);
border-color:rgba(126,209,205,.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 1px rgba(126,209,205,.15),
0 0 28px rgba(126,209,205,.14),
0 4px 8px rgba(60,40,20,.06),
0 22px 48px rgba(60,40,20,.08);
}
.cat-head{display:flex;align-items:center;gap:14px}
.cat-icon{
width:22px;height:22px;color:var(--mint-cool-deep);
display:inline-flex;flex-shrink:0;margin-right:2px;
}
.cat-icon svg{display:block;width:100%;height:100%}
.cat-name{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 60;
font-size:22px;line-height:1.1;letter-spacing:-0.014em;
color:var(--teal-ink);margin:0;
}
.cat-desc{
font-family:'Geist',sans-serif;font-size:13.5px;line-height:1.55;
color:var(--ink-2);margin:0;text-wrap:pretty;
}
/* ----- Recent posts (3 cards with subtle hue washes) ----- */
.strip-eyebrow{
text-align:left;font-family:'Geist',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.20em;text-transform:uppercase;color:var(--mint-cool-deep);
margin:0 0 22px;
}
.recent-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:980px){.recent-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.recent-grid{grid-template-columns:1fr}}
.post-card{
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);border-radius:20px;
padding:26px 24px 24px;
display:flex;flex-direction:column;gap:12px;
text-decoration:none;color:inherit;
transition:transform .35s var(--ease-soft),border-color .35s var(--ease-soft),box-shadow .35s var(--ease-soft);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(60,40,20,.04),0 8px 22px rgba(60,40,20,.05);
min-height:180px;
}
.post-card:hover{
transform:translateY(-2px);
border-color:rgba(126,209,205,.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 1px rgba(126,209,205,.15),
0 0 28px rgba(126,209,205,.14),
0 4px 8px rgba(60,40,20,.06),
0 18px 36px rgba(60,40,20,.06);
}
.post-stamp{
align-self:flex-start;
font-family:'Geist',sans-serif;font-size:10px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);
padding:4px 9px;border-radius:5px;
background:rgba(126,209,205,.14);
border:1px solid rgba(126,209,205,.22);
}
.post-title{
font-family:'Fraunces',serif;font-weight:300;
font-size:22px;letter-spacing:-0.018em;line-height:1.18;
color:var(--ink);margin:0;text-wrap:balance;
}
.post-excerpt{
font-family:'Geist',sans-serif;font-size:13.5px;line-height:1.6;
color:var(--ink-2);margin:0;text-wrap:pretty;
}
.post-card--a{background:linear-gradient(180deg, rgba(254,253,247,.82) 0%, rgba(247,232,200,.22) 100%)}
.post-card--b{background:linear-gradient(180deg, rgba(254,253,247,.82) 0%, rgba(168,220,201,.22) 100%)}
.post-card--c{background:linear-gradient(180deg, rgba(254,253,247,.82) 0%, rgba(214,212,235,.22) 100%)}
/* ----- Post page: breadcrumb, header, lede ----- */
.crumb{
font-family:'Geist',sans-serif;font-size:12px;
color:var(--ink-3);margin:0 0 28px;
display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;transition:all .2s var(--ease-soft)}
.crumb a:hover{color:var(--teal-ink);border-bottom-color:rgba(45,90,80,.20)}
.crumb-sep{opacity:.5}
.crumb-here{color:var(--ink-2);font-weight:500}
.post-meta-line{
display:flex;gap:10px;align-items:center;flex-wrap:wrap;
font-family:'Geist',sans-serif;font-size:11px;font-weight:500;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
margin:0 0 22px;
}
.post-meta-line .stamp{
color:var(--teal-ink);
padding:4px 9px;border-radius:5px;
background:rgba(126,209,205,.14);
border:1px solid rgba(126,209,205,.22);
font-weight:600;letter-spacing:.18em;
}
.post-h1{
font-family:'Fraunces',serif;font-weight:300;
font-variation-settings:"opsz" 144;
font-size:clamp(36px,5vw,56px);line-height:1.04;letter-spacing:-0.024em;
color:var(--ink);margin:0 0 24px;text-wrap:balance;
}
.post-lede{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 60;
font-size:21px;line-height:1.5;letter-spacing:-0.012em;
color:var(--teal-ink);
margin:0 0 56px;
padding:24px 0 24px;
border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);
text-wrap:pretty;
}
/* ----- Post body prose ----- */
.post-body{
font-family:'Geist',sans-serif;font-size:17px;line-height:1.7;color:var(--ink-2);
}
.post-body p{margin:0 0 22px;text-wrap:pretty}
.post-body p:last-child{margin:0}
.post-body strong{color:var(--ink);font-weight:600}
.post-body a{
color:var(--teal-ink);text-decoration:none;
border-bottom:1px solid rgba(45,90,80,.30);
transition:border-color .2s var(--ease-soft),color .2s var(--ease-soft);
}
.post-body a:hover{color:var(--mint-cool-deep);border-bottom-color:currentColor}
.post-body code{
font-family:'Geist Mono', ui-monospace, SF Mono, monospace;
font-size:14.5px;
background:rgba(126,209,205,.10);
border:1px solid rgba(126,209,205,.18);
padding:1px 6px;border-radius:4px;color:var(--teal-ink);
}
.post-body h2{
font-family:'Fraunces',serif;font-weight:300;
font-size:clamp(26px,3vw,32px);line-height:1.15;letter-spacing:-0.020em;
color:var(--ink);
margin:64px 0 18px;text-wrap:balance;
}
.post-body h3{
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-size:22px;line-height:1.2;color:var(--ink);
margin:42px 0 12px;text-wrap:balance;
}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:24px}
.post-body li{margin-bottom:8px;text-wrap:pretty}
/* Pull quote */
.pull{
margin:48px 0;padding:0 0 0 24px;
border-left:3px solid var(--mint-cool-deep);
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 60;
font-size:24px;line-height:1.4;letter-spacing:-0.012em;
color:var(--teal-ink);
}
/* Annotated figure (Activity Monitor screenshot mock) */
.figure{
margin:48px -20px;
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);border-radius:18px;
padding:24px 22px 18px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(60,40,20,.04);
}
@media (max-width:720px){.figure{margin:40px 0}}
.figure-mock{
aspect-ratio:16/9;
border-radius:10px;overflow:hidden;
background:linear-gradient(135deg,#F4EFE6 0%,#E8DFCB 100%);
position:relative;
border:1px solid rgba(0,0,0,.06);
}
.figure-mock-inner{
position:absolute;inset:18px;background:#FCFAF4;border-radius:6px;
border:1px solid rgba(0,0,0,.05);
display:flex;flex-direction:column;
font-family:'Geist',sans-serif;font-size:11px;color:#3A3F3D;
overflow:hidden;
}
.figure-bar{
height:24px;background:#EFE9DC;border-bottom:1px solid rgba(0,0,0,.05);
display:flex;align-items:center;gap:6px;padding:0 10px;
}
.figure-bar .dot{width:9px;height:9px;border-radius:50%}
.figure-bar .red{background:#FF6058}
.figure-bar .yel{background:#FEC02C}
.figure-bar .grn{background:#27CA42}
.figure-bar .ttl{margin-left:8px;font-weight:500;color:#5A6160}
.figure-rows{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:0}
.figure-col{padding:14px 16px;border-right:1px solid rgba(0,0,0,.05)}
.figure-col:last-child{border-right:0}
.figure-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.08)}
.figure-row:last-child{border-bottom:0}
.figure-row span:first-child{color:#3A3F3D}
.figure-row span:last-child{color:#7A8180;font-variant-numeric:tabular-nums}
.figure-bar-graph{
height:18px;border-radius:4px;
background:linear-gradient(90deg, #67C996 0%, #67C996 60%, #F0CD5E 60%, #F0CD5E 78%, #E68672 78%, #E68672 100%);
margin:8px 0 4px;
border:1px solid rgba(0,0,0,.05);
}
.figure-tip{
position:absolute;
background:var(--teal-ink);color:#fff;
font-family:'Geist',sans-serif;font-size:10.5px;font-weight:500;
padding:5px 9px;border-radius:5px;
box-shadow:0 4px 10px rgba(0,0,0,.18);
white-space:nowrap;
}
.figure-tip::after{
content:'';position:absolute;width:0;height:0;
border:5px solid transparent;
}
.figure-tip-1{top:55%;left:46%;transform:translate(-50%,-50%)}
.figure-tip-1::after{
bottom:-9px;left:50%;transform:translateX(-50%);
border-top-color:var(--teal-ink);
}
.figure-cap{
margin:14px 4px 0;
font-family:'Geist',sans-serif;font-size:12.5px;color:var(--ink-3);
line-height:1.5;text-wrap:pretty;
}
/* ----- CTA card (text on left, two buttons stacked on right) ----- */
.cta-card{
margin:80px 0 0;
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);border-radius:22px;
padding:36px 38px;
display:flex;gap:40px;align-items:center;flex-wrap:wrap;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(60,40,20,.04),
0 12px 28px rgba(60,40,20,.06);
}
.cta-body{flex:1;min-width:280px}
.cta-body h3{
font-family:'Fraunces',serif;font-weight:300;font-style:italic;
font-variation-settings:"opsz" 60;
font-size:24px;line-height:1.25;color:var(--teal-ink);
margin:0 0 12px;letter-spacing:-0.012em;text-wrap:balance;
}
.cta-body p{
font-family:'Geist',sans-serif;font-size:14.5px;line-height:1.6;
color:var(--ink-2);margin:0;text-wrap:pretty;
}
.cta-btns{display:flex;flex-direction:column;gap:10px;flex-shrink:0;width:180px}
@media (max-width:560px){.cta-btns{width:100%}}
.cta-btn{
font-family:'Geist',sans-serif;font-weight:600;font-size:13.5px;
padding:14px 24px;border-radius:100px;cursor:pointer;
text-decoration:none;text-align:center;
transition:transform .25s var(--ease-soft),background .25s var(--ease-soft),border-color .25s var(--ease-soft);
display:inline-flex;align-items:center;justify-content:center;
border:1px solid transparent;
}
.cta-btn:hover{transform:translateY(-1px)}
.cta-btn-primary{
background:linear-gradient(180deg,#CFE9D8 0%,#A8DCC9 100%);
color:#1A4A42;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(60,120,100,.10);
}
.cta-btn-secondary{
background:rgba(255,255,255,.55);
color:var(--teal-ink);
border-color:var(--hairline);
}
.cta-btn-secondary:hover{
background:rgba(155,217,200,.12);
border-color:rgba(155,217,200,.40);
}
/* ----- Post FAQ block ----- */
.post-faq{margin:96px 0 0}
.post-faq-title{
font-family:'Fraunces',serif;font-style:italic;font-weight:300;
font-variation-settings:"opsz" 60;
font-size:clamp(26px,2.8vw,32px);line-height:1.2;
color:var(--teal-ink);
margin:0 0 32px;letter-spacing:-0.012em;text-wrap:balance;
}
.post-faq-list{display:flex;flex-direction:column;gap:10px}
.post-faq-row{
background:rgba(254,253,247,.65);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);border-radius:14px;
overflow:hidden;
transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.post-faq-row:hover{border-color:rgba(126,209,205,.35)}
.post-faq-row[open]{
background:rgba(155,217,200,.10);
border-color:rgba(155,217,200,.30);
}
.post-faq-row > summary{
padding:20px 24px;cursor:pointer;
list-style:none;display:flex;align-items:flex-start;gap:18px;
font-family:'Fraunces',serif;font-weight:300;
font-size:18px;letter-spacing:-0.012em;line-height:1.35;
color:var(--ink);text-wrap:balance;
transition:color .25s var(--ease-soft);
}
.post-faq-row > summary::-webkit-details-marker{display:none}
.post-faq-row > summary:hover{color:var(--teal-ink)}
.post-faq-row .toggle{
flex-shrink:0;width:22px;height:22px;
display:inline-flex;align-items:center;justify-content:center;margin-top:3px;
color:var(--mint-cool-deep);
background:rgba(155,217,200,.15);
border:1px solid rgba(155,217,200,.25);
border-radius:50%;
transition:transform .35s var(--ease-soft),background .25s var(--ease-soft);
}
.post-faq-row[open] .toggle{transform:rotate(45deg);background:rgba(155,217,200,.30)}
.post-faq-row .toggle svg{width:11px;height:11px}
.post-faq-body{
padding:0 24px 24px 64px;
font-family:'Geist',sans-serif;font-size:14.5px;line-height:1.7;color:var(--ink-2);
text-wrap:pretty;
}
/* ----- Related posts ----- */
.related-strip{max-width:1180px;margin:80px auto 0;padding:0 24px}
.related-eyebrow{
font-family:'Geist',sans-serif;font-weight:600;font-size:11px;
letter-spacing:.20em;text-transform:uppercase;color:var(--mint-cool-deep);
margin:0 0 22px;
}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.related-grid{grid-template-columns:1fr}}
.related-card{
background:rgba(254,253,247,.82);
backdrop-filter:blur(10px) saturate(140%);
border:1px solid var(--hairline);border-radius:18px;
padding:22px 22px 20px;
text-decoration:none;color:inherit;
display:flex;flex-direction:column;gap:10px;
transition:transform .35s var(--ease-soft),border-color .35s var(--ease-soft);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(60,40,20,.04);
}
.related-card:hover{transform:translateY(-2px);border-color:rgba(126,209,205,.45)}
.related-stamp{
align-self:flex-start;
font-family:'Geist',sans-serif;font-size:10px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);
padding:4px 9px;border-radius:5px;
background:rgba(126,209,205,.14);
border:1px solid rgba(126,209,205,.22);
}
.related-title{
font-family:'Fraunces',serif;font-weight:300;
font-size:19px;letter-spacing:-0.018em;line-height:1.18;
color:var(--ink);margin:0;text-wrap:balance;
}
.related-excerpt{
font-family:'Geist',sans-serif;font-size:13px;line-height:1.55;
color:var(--ink-2);margin:0;text-wrap:pretty;
}
/* ----- Blog: dark theme overrides ----- */
[data-theme="dark"] .blog-title{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .blog-lede{color:var(--text-soft)}
[data-theme="dark"] .cat-card,
[data-theme="dark"] .post-card{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .post-card--a{background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(247,232,200,.06) 100%)}
[data-theme="dark"] .post-card--b{background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(168,220,201,.08) 100%)}
[data-theme="dark"] .post-card--c{background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(214,212,235,.06) 100%)}
[data-theme="dark"] .cat-card:hover,
[data-theme="dark"] .post-card:hover{border-color:rgba(155,217,200,.30)}
[data-theme="dark"] .cat-name{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .cat-desc,
[data-theme="dark"] .post-excerpt{color:var(--text-soft)}
[data-theme="dark"] .post-title{color:var(--text)}
[data-theme="dark"] .post-h1,
[data-theme="dark"] .post-body h2,
[data-theme="dark"] .post-body h3,
[data-theme="dark"] .related-title{color:var(--text)}
[data-theme="dark"] .post-lede,
[data-theme="dark"] .post-faq-title,
[data-theme="dark"] .pull,
[data-theme="dark"] .cta-body h3{color:var(--mint-soft, #C9E8D9)}
[data-theme="dark"] .post-body{color:var(--text-soft)}
[data-theme="dark"] .post-body strong{color:var(--text)}
[data-theme="dark"] .post-body a{color:var(--mint-soft, #C9E8D9);border-bottom-color:rgba(155,217,200,.30)}
[data-theme="dark"] .post-body code{
background:rgba(155,217,200,.12);
border-color:rgba(155,217,200,.20);
color:var(--mint-soft, #C9E8D9);
}
[data-theme="dark"] .figure,
[data-theme="dark"] .cta-card,
[data-theme="dark"] .post-faq-list,
[data-theme="dark"] .post-faq-row,
[data-theme="dark"] .related-card{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .post-faq-row[open]{
background:rgba(155,217,200,.10);
border-color:rgba(155,217,200,.30);
}
[data-theme="dark"] .crumb,
[data-theme="dark"] .crumb a,
[data-theme="dark"] .post-meta-line,
[data-theme="dark"] .figure-cap{color:var(--text-muted)}
[data-theme="dark"] .crumb-here{color:var(--text-soft)}
[data-theme="dark"] .post-faq-row > summary{color:var(--text)}
[data-theme="dark"] .post-faq-body,
[data-theme="dark"] .cta-body p{color:var(--text-soft)}
[data-theme="dark"] .related-excerpt{color:var(--text-soft)}