/* ═══════════════════════════════════════════════════════════════════════════
premium.css — the "Lit Paper" layer (mockup 1b).
Load this AFTER site.css on every page:
It only overrides; it deletes nothing. Remove the one and the site
is exactly as it was. Every value here comes from an existing token, so
all three themes follow along automatically.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* Lighting, pushed. --edge is site.css's own "light from above" token;
1b's surfaces just use more of it, plus a second, tighter shadow so
cards read as sheets ON the page rather than holes IN it. */
--edge:inset 0 1px 0 rgba(255,255,255,.07);
--lift:0 12px 26px -18px rgba(0,0,0,.5);
--lift-hi:0 34px 60px -30px rgba(0,0,0,.45);
--r-card:16px; /* one radius for the whole card family */
--r-pill:999px;
}
html[data-theme="light"]{
--edge:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(60,50,30,.06);
--lift:0 12px 26px -18px rgba(60,50,30,.3);
--lift-hi:0 34px 60px -30px rgba(60,50,30,.4);
}
/* ── 1. The floating pill nav ──────────────────────────────────────────────
The header keeps its sticky behaviour and its markup; only the bar inside
it becomes a capsule. Works on every page, since every page shares #hdr. */
#hdr{background:transparent!important;border-bottom-color:transparent!important;
padding-block:.9rem}
#hdr.stuck{border-bottom-color:transparent!important}
#hdr .bar{
width:auto;max-width:calc(100% - 2rem);
padding:.6rem .7rem .6rem 1.1rem;
background:color-mix(in srgb,var(--surface) 82%,transparent);
-webkit-backdrop-filter:blur(14px) saturate(1.4);
backdrop-filter:blur(14px) saturate(1.4);
border:1px solid var(--border);border-radius:var(--r-pill);
box-shadow:var(--edge),0 14px 34px -18px rgba(0,0,0,.34);
transition:box-shadow .5s var(--settle),background-color .5s var(--ease);
}
#hdr.stuck .bar{box-shadow:var(--edge),0 18px 44px -20px rgba(0,0,0,.42)}
#hdr .links{gap:1.5rem}
#hdr .links a{font-family:var(--sans);font-size:.86rem;letter-spacing:0;
text-transform:none;color:var(--muted)}
#hdr .links a:hover{color:var(--text)}
/* The glass needs more body on the dark themes, or it reads as grey haze. */
html[data-theme="dark"] #hdr .bar,
html[data-theme="oled"] #hdr .bar{
background:color-mix(in srgb,var(--card) 76%,transparent);
border-color:var(--border-strong)}
/* ── 2. Gold foil buttons ──────────────────────────────────────────────────
Vertical two-stop ramp instead of the 140° three-stop: it reads as a
pressed foil edge rather than a sheen. Pill geometry throughout. */
.btn{border-radius:var(--r-pill)}
.btn.gold{
background:linear-gradient(var(--gold-light),var(--gold-deep));
box-shadow:0 18px 34px -16px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.gold:hover{box-shadow:0 22px 42px -14px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.line{background:color-mix(in srgb,var(--surface) 70%,transparent);
color:var(--text);box-shadow:var(--edge)}
.ghost{border-radius:var(--r-pill)}
/* ── 2b. The DOWNLOAD pill in the nav ──────────────────────────────────────
The last nav link becomes the gold capsule from the mockup. Matches both
"#download" (on index) and "index.html#download" (on every other page),
so the pill is present sitewide with no markup change. */
#hdr .links a[href*="#download"]{
padding:.55rem 1.15rem;border-radius:var(--r-pill);
background:linear-gradient(var(--gold-light),var(--gold-deep));
color:var(--on-gold);font-size:.82rem;
box-shadow:0 8px 18px -8px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.4);
transition:transform .4s var(--settle),box-shadow .4s var(--settle);
}
#hdr .links a[href*="#download"]:hover{
color:var(--on-gold);transform:translateY(-1px);
box-shadow:0 12px 24px -8px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.5)}
/* It sits at the end of the row, past the theme + palette buttons. */
#hdr .links{align-items:center}
/* ── 3. Chip badges ────────────────────────────────────────────────────────
From mono hairline tags to raised sans chips. The dot goes green — it is
stating a fact (no account, no server), and gold is for emphasis. */
.badge{
font-family:var(--sans);font-size:.79rem;font-weight:300;letter-spacing:0;
color:var(--text);background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-pill);
padding:.5rem .9rem;box-shadow:var(--edge);
}
.badge i{background:var(--aurum)}
/* ── 4. The gradient italic ────────────────────────────────────────────────
One rule, and every serif italic accent on the site picks it up: the hero,
the wiki headings, the record. Falls back to flat gold where
background-clip:text is unsupported. */
.h-title em,h2 em,.sheet-card h2 em{
background:linear-gradient(100deg,var(--gold-deep),var(--gold-light) 55%,var(--gold-deep));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
.h-title em,h2 em{background:none;-webkit-text-fill-color:var(--gold)}
}
/* ── 5. The card family, lit ───────────────────────────────────────────────
.mod, .dl, .tcard, .widget, #teaser and .priv all become the same material:
one radius, one edge highlight, one settle on hover. */
.mod,.dl,.tcard,.widget,#teaser{
border-radius:var(--r-card);
background:var(--surface);
box-shadow:var(--edge),var(--lift);
transition:transform .5s var(--settle),box-shadow .5s var(--settle),
border-color .4s var(--ease);
}
.mod:hover,.dl:hover,.tcard:hover,.widget:hover,#teaser:hover{
transform:translateY(-6px);
box-shadow:var(--edge),var(--lift-hi);
}
.widget{border-radius:var(--r-card)}
/* The module card's colour, moved from the glyph to a foil bar at the top —
the accent states itself before you read the name. --c is already set
per-card by site.js. */
.mod::after{
content:"";position:absolute;top:1.35rem;left:1.35rem;
width:34px;height:3px;border-radius:2px;background:var(--c);
transition:width .5s var(--settle);
}
.mod:hover::after{width:52px}
.mod .glyph{margin-top:1.1rem}
.mod h3{color:var(--text)}
.mod .plain{opacity:1;font-size:.6rem;color:var(--faint)}
/* ── 6. The stats, as one floating panel ───────────────────────────────────
Was a hairline grid sitting in the page; now a single lit sheet with
internal rules. */
#stats{
background:color-mix(in srgb,var(--surface) 72%,transparent);
border:1px solid var(--border);border-radius:18px;
box-shadow:var(--edge),0 20px 44px -28px rgba(0,0,0,.34);
gap:0;overflow:hidden;
}
.stat{background:transparent;box-shadow:none;border-right:1px solid var(--border)}
.stat:last-child{border-right:0}
.stat b{color:var(--text)}
.stat:nth-child(3) b,.stat:nth-child(4) b{color:var(--gold)}
/* ── 7. Download tiles ─────────────────────────────────────────────────────
Gold-bordered on a dark band, matching 1b's closing section. */
.dl{border-color:var(--gold-border)}
.dl:hover{border-color:var(--gold)}
/* ── 8. Footer ─────────────────────────────────────────────────────────────
The footer bar is NOT a pill — it is the page's baseline. Left alone
deliberately; #hdr .bar is scoped so this stays as it was. */
/* ── 9. The layered hero stack (index.html only) ───────────────────────────
Needs the two extra wrappers shown in the comment below; without
them these rules simply never match, so this is safe on every page.
In index.html, replace the .h-visual contents with:
data-base is what site.js reads to swap in the -paper variants, so the two
new devices follow the theme switch exactly like the hub already does. */
#stack{position:relative;display:flex;justify-content:center}
#stack #phone{position:relative;z-index:2}
#stack .side{position:absolute;width:58%;border-radius:22px;overflow:hidden;
border:1px solid var(--border);box-shadow:var(--lift-hi);z-index:1}
#stack .side.left{bottom:6%;left:-2%;rotate:-6deg}
#stack .side.right{top:2%;right:-2%;rotate:5deg}
@media(max-width:900px){#stack .side{display:none}}
@media(prefers-reduced-motion:reduce){
.mod,.dl,.tcard,.widget,#teaser,#hdr .bar{transition:none}
.mod:hover,.dl:hover,.tcard:hover,.widget:hover,#teaser:hover{transform:none}
}
@media(max-width:720px){
#hdr .bar{padding:.5rem .55rem .5rem .9rem;gap:.6rem}
#hdr .links{display:none} /* the ··· palette already covers this */
}
/* ══════════════ PREMIUM EDITION — THE HOUSE, LIT ═══════════════════════
The first premium pass established the materials: paper, foil, a raised
edge. This layer gives those materials a place to live in. The visual
idea is a private house after dark: lit rooms receding into a quiet
backdrop, with the product screens doing the speaking. Nothing here adds
ornamental imagery or a new palette; it lets the app's own captures and
module colours carry the spectacle.
Cursor effects only receive two CSS variables from site.js. They never
measure or animate layout, and every animated property below is transform
or opacity. The site remains still for reduced-motion visitors. */
:root{
--premium-hairline:color-mix(in srgb,var(--gold) 24%,var(--border));
--premium-glass:color-mix(in srgb,var(--surface) 68%,transparent);
--premium-shadow:0 40px 90px -54px rgba(0,0,0,.78);
}
html[data-theme="light"]{
--premium-glass:color-mix(in srgb,#fff 76%,transparent);
--premium-shadow:0 38px 72px -54px rgba(72,54,24,.36);
}
/* A narrow, double-rule interruption makes each chapter feel placed in a
sequence. It is deliberately attached to the existing eyebrow rather than
added as new copy, so it supports the writing instead of decorating it. */
main>section>.eyebrow{
display:flex;align-items:center;gap:.9rem;
}
main>section>.eyebrow::before,
main>section>.eyebrow::after{
content:"";height:1px;width:clamp(1.35rem,4vw,3.6rem);
background:linear-gradient(90deg,transparent,var(--gold-border));
}
main>section>.eyebrow::after{
width:1.5rem;background:linear-gradient(90deg,var(--gold-border),transparent);
}
/* The hero is the doorway. The existing aurora stays atmospheric; these two
stationary pools give the device stack a believable pool of light, so the
captures read as objects on a stage rather than images in a column. */
#hero::before,#hero::after{
content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%;
}
#hero::before{
width:34rem;aspect-ratio:1;right:-12rem;top:2rem;
background:radial-gradient(circle,color-mix(in srgb,var(--gold) 14%,transparent),transparent 67%);
filter:blur(7px);
}
#hero::after{
width:18rem;aspect-ratio:1;right:17%;bottom:-9rem;
border:1px solid color-mix(in srgb,var(--gold) 18%,transparent);
box-shadow:0 0 0 2.2rem color-mix(in srgb,var(--gold) 3%,transparent),
0 0 0 5.4rem color-mix(in srgb,var(--gold) 2%,transparent);
}
#hero>div:not(#aurora),#hero .h-visual{position:relative;z-index:1}
/* The three screens now feel collected as a small exhibition. The fine
outline behind them is a CSS-only device plinth, not a fake product shot. */
#stack{isolation:isolate;padding:1.2rem 1.8rem 1.7rem}
#stack::before{
content:"";position:absolute;inset:8% 7% 5%;z-index:-1;border-radius:34px;
border:1px solid var(--premium-hairline);
background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 48%,transparent),transparent 62%);
box-shadow:var(--premium-shadow),inset 0 1px 0 rgba(255,255,255,.08);
}
#stack::after{
content:"";position:absolute;z-index:-2;width:66%;aspect-ratio:1;left:17%;top:13%;
border-radius:50%;background:radial-gradient(circle,var(--tod-glow),transparent 66%);
filter:blur(16px);opacity:.9;
}
#stack #phone{box-shadow:var(--edge),0 36px 76px -38px rgba(0,0,0,.85),0 0 0 1px var(--gold-border)}
#stack .side{opacity:.92;filter:saturate(.84) brightness(.86);transition:transform .9s var(--settle),filter .7s var(--ease),opacity .7s var(--ease)}
#stack:hover .side{filter:saturate(1) brightness(1);opacity:1}
#stack:hover .side.left{transform:translate(-.8rem,-.5rem) rotate(-1deg)}
#stack:hover .side.right{transform:translate(.8rem,.5rem) rotate(1deg)}
/* The stats have information density, but should not look like a dashboard.
A small gold keyline lets them read as the house's brass nameplate. */
#stats{position:relative;border-color:var(--premium-hairline);box-shadow:var(--edge),var(--premium-shadow)}
#stats::before{content:"";position:absolute;z-index:2;top:0;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.72}
.stat{transition:background-color .5s var(--ease),transform .5s var(--settle)}
@media(hover:hover){.stat:hover{background:color-mix(in srgb,var(--gold-glow) 70%,var(--surface));transform:translateY(-2px)}}
/* Every interactive surface gets one shared response to a nearby pointer.
The light is intentionally vague — a crisp flashlight reads as a cheap
novelty. Module colours remain visible through it, which keeps each room
recognisable before it has been opened. */
.lux-surface{--lux-x:50%;--lux-y:0%;--lux-rx:0deg;--lux-ry:0deg;will-change:transform}
#mods-grid .mod.lux-surface{
background:radial-gradient(26rem circle at var(--lux-x) var(--lux-y),color-mix(in srgb,var(--c) 12%,transparent),transparent 42%),var(--card);
}
.widget.lux-surface,.dl.lux-surface,.tcard.lux-surface,#teaser.lux-surface,.shot.lux-surface{
background:radial-gradient(29rem circle at var(--lux-x) var(--lux-y),color-mix(in srgb,var(--gold) 10%,transparent),transparent 43%),var(--surface);
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
#mods-grid .mod.lux-surface:hover{transform:translateY(-7px) rotateX(var(--lux-rx)) rotateY(var(--lux-ry));}
.widget.lux-surface:hover,.dl.lux-surface:hover,.tcard.lux-surface:hover,#teaser.lux-surface:hover,.shot.lux-surface:hover{
transform:translateY(-7px) rotateX(var(--lux-rx)) rotateY(var(--lux-ry));
}
}
/* Screenshots are evidence, not thumbnails. A quiet frame, a warm reflected
edge, and a slower hover make the real app captures feel as carefully made
as the words around them. */
.widget,.shot{border-color:var(--premium-hairline)}
.widget::after,.shot::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 28%,transparent 70%,rgba(201,169,110,.08));
opacity:.55;
}
.shot figcaption{z-index:1}
.widget{overflow:hidden;position:relative}
.widget img,.shot img{transition:transform 1s var(--settle),filter .8s var(--ease)}
@media(hover:hover){.widget:hover img,.shot:hover img{transform:scale(1.025);filter:saturate(1.06)}}
/* The gallery's existing rail becomes an intentional procession: nearby
captures remain present but defer to the centred, hovered one. */
@media(hover:hover){
#rail:hover .shot:not(:hover){opacity:.62;filter:saturate(.76) brightness(.86);transform:scale(.975)}
#rail .shot{transition:transform .65s var(--settle),opacity .55s var(--ease),filter .55s var(--ease),box-shadow .55s var(--settle)}
}
/* The closing install cards receive a restrained foil seam. The different
platform marks stay the subject; the treatment simply says "keepsake". */
.dl{position:relative;overflow:hidden}
.dl::after{content:"";position:absolute;top:0;left:1.2rem;right:1.2rem;height:1px;
background:linear-gradient(90deg,transparent,var(--gold-light),transparent);opacity:.62}
@media(max-width:900px){
#hero::before{right:-16rem;opacity:.7}
#hero::after{display:none}
#stack{padding-inline:0}
#stack::before{inset:6% 3% 4%}
}
@media(max-width:560px){
main>section>.eyebrow::after{display:none}
#stack::before{border-radius:25px}
#stats::before{left:18%;right:18%}
}
@media(prefers-reduced-motion:reduce){
#stack .side,.stat,.widget img,.shot img{transition:none}
.lux-surface{will-change:auto}
}
