/* ============================================================
LABCLONE v4 · "AEDES" · design tokens
The temple of things you keep: white marble, ivory, gold leaf,
one colour per app inside its niche. Read DIRECTION.md first.
Prototype only. Not loaded by the live site.
Pricing: €19.99 per app, €39.99 per kit, paid once. No strike-through prices.
Fonts (one request, Google Fonts, all OFL):
============================================================ */
/* Metric-matched fallbacks (LECONS 16/10: CLS 0.15 → 0.01). Re-measure Castoro in Chrome before shipping. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial Black"), local("Arial-Black"), local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; font-stretch: 100% 125%; size-adjust: 117%; }
@font-face { font-family: "Archivo Fallback"; src: local("Impact"); font-weight: 100 900; font-stretch: 50% 99%; size-adjust: 84%; }
@font-face { font-family: "Castoro Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; } /* TO MEASURE */
:root {
color-scheme: light;
/* ---------- 1. STONE AND INK ([n] = WCAG contrast, computed) ---------- */
--marble: #FBFAF7; /* page base, Statuario white [ink 16.8] */
--ivory: #F5F1E8; /* bands, cards, inputs, the counter [ink 15.5] */
--pentelic: #ECE3D2; /* warm stone: pressed, skeletons [ink 13.8] */
--travertine: #DDD0B8; /* hairline ornaments, disabled (no small text) */
--vein: #B9B3AA; /* 1px rules, input borders, piers' shade edge (decorative, 2.0) */
--ink: #1C1915; /* text + primary button: bronze-black */
--ink-2: #4F473E; /* ledes [8.7 marble · 8.1 ivory] */
--ink-3: #6B6258; /* captions >= 14px [5.7 marble · 4.7 pentelic] */
--on-ink: #FBFAF7; /* text on the ink button [16.8] */
--minium: #A3301F; /* errors, the PAID ONCE stamp (Roman red) [6.7 marble] */
--ok: #3E6B4F; /* success tick + text [5.9 marble · 5.5 ivory] */
--hair: rgb(28 25 21 / .10);
--scrim: linear-gradient(to top, rgb(251 250 247 / .88), rgb(251 250 247 / 0)); /* copy over renders */
/* ---------- 2. GOLD (material only: never a button, never body text) ---------- */
--gold: #B8913A; /* seams, gold hairlines (2.8 on marble: NOT text) */
--gold-hi: #E6C77C; /* burnish highlight */
--gold-lo: #7A5A1C; /* leaf shadow side */
--gold-text: #7D5E1E; /* the only gold allowed as text: numerals, plates >= 12px [5.8 marble] */
--gold-tex: url("assets/tex-gold-leaf.avif");
--gold-leaf: linear-gradient(168deg, #7A5A1C 0%, #B8913A 20%, #E6C77C 36%, #C9A24A 50%, #9E7A2C 72%, #D4B061 100%);
--raking: linear-gradient(110deg, transparent 38%, rgb(255 246 220 / .75) 50%, transparent 62%); /* swept via mask-position */
/* ---------- 3. RAFAEL'S SWATCH STRIP: one per app, inside niches only ----------
Ink on every fresco tone >= 6.4. Inside a niche use --ink only (ink-2 fails on cobalt/pervenche). */
--sw-lime: #D3DF8A; /* I Mot du jour (word-game) */
--sw-tendre: #86BB6F; /* II Parla (language-trainer) · Wellbeing kit */
--sw-feuille: #5CA361; /* III Fernly (budget) */
--sw-jade: #4B9A72; /* IV Carnet (notes) */
--sw-ciel: #6AD0E6; /* V Saywell (dictation, veiled until published) · Student kit */
--sw-azur: #50A6CD; /* VI Paperkit (pdf-tools) */
--sw-cobalt: #306FA6; /* VII Paperlane (invoice-maker) */
--sw-pervenche: #5072BE; /* VIII Cursus (resume-builder) */
--sw-mauve: #9E7BBB; /* IX Recto (flashcards) */
--sw-rose: #E494B5; /* X Pagelight (journal) */
--sw-corail: #E67A4D; /* XI Footnote (email-signature) */
--sw-orange: #EB9D45; /* XII Lapse (time-tracker) */
--sw-abricot: #F3B54E; /* XIII Kindling (habit-tracker) · Freelance kit */
/* The current niche's colour. Set per niche with [data-app], or by the palette picker. */
--app: var(--sw-azur);
--fresco-rim: color-mix(in oklab, var(--app) 62%, var(--ivory)); /* ink >= 6.4 on all 13 */
--fresco-back: var(--app);
--fresco: radial-gradient(120% 90% at 50% 38%, var(--fresco-back) 0%, var(--fresco-rim) 78%);
/* ---------- 4. MATERIALS (files in ASSET-LIST) ---------- */
--tex-slab: url("assets/tex-marble-slab.avif");
--tex-mosaic: url("assets/mosaic-meander.png");
--niche-narrow: url("assets/niche-narrow.png");
--niche-narrow-m: url("assets/niche-narrow-mask.png");
--niche-wide: url("assets/niche-wide.png");
--niche-wide-m: url("assets/niche-wide-mask.png");
--votive: radial-gradient(60% 55% at 50% 0%, rgb(236 244 255 / .55), transparent 70%); /* screen spill on the plinth top */
/* ---------- 5. TYPE ---------- */
--font-carve: "Castoro Titling", "Castoro Fallback", Georgia, serif; /* sight: inscriptions, names, numerals, Latin */
--font-sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, sans-serif; /* touch: UI, body, prices, the wordmark */
--font-till: "Courier Prime", ui-monospace, Menlo, monospace; /* the receipt only */
--track-carve: .08em;
--track-plate: .16em;
--track-mega: -.03em;
--wdth-mega: 68; /* finale + nav wordmark, weight 900 (geometry unchanged since v2) */
--wdth-plate: 125; /* plate labels, weight 600 */
/* 375 → 1440, fluid between */
--fs-carve-1: clamp(36px, 2.6vw + 26px, 72px);
--fs-carve-2: clamp(30px, 2.1vw + 22px, 52px);
--fs-carve-3: clamp(17px, .5vw + 15px, 22px);
--fs-numeral: clamp(13px, .2vw + 12px, 15px);
--fs-lede: clamp(17px, .3vw + 16px, 20px);
--fs-body: clamp(16px, .1vw + 15.6px, 17px);
--fs-price: clamp(28px, .6vw + 26px, 34px);
--fs-small: 14px;
--fs-plate: clamp(10.5px, .05vw + 10.3px, 11px);
--fs-till: clamp(14px, .1vw + 13.6px, 15px);
--fs-mega-max: 520px; /* fit() cap */
--lh-carve: 1.05;
--lh-body: 1.6;
/* ---------- 6. SPACE, GRID, RADII ---------- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
--s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 240px;
--margin: clamp(16px, 4.5vw, 64px);
--gutter: clamp(12px, 1.7vw, 24px);
--max: 1312px;
--scene-gap: clamp(96px, 9vw, 160px);
--pier: 24px; /* marble pier between niches */
--r-stone: 0; /* stone is cut square */
--r-arch: 999px 999px 0 0; /* niche heads */
--r-input: 12px;
--r-card: 20px; /* floating ivory cards (form, counter) */
--r-pill: 999px;
--nav-h: 64px;
--nav-h-m: 56px;
--btn-h: 52px;
--btn-h-m: 56px;
--tap: 44px;
/* ---------- 7. LIGHT (one sun, upper left; shadows fall lower right, warm-grey, never black) ---------- */
--shadow-stone: rgb(58 54 49 / .14);
--sh-contact: 0 1px 0 rgb(255 255 255 / .8) inset, 0 -1px 0 rgb(58 54 49 / .06) inset;
--sh-lift: 6px 10px 24px -12px var(--shadow-stone), 1px 2px 4px -2px var(--shadow-stone);
--sh-card: 8px 16px 40px -24px rgb(58 54 49 / .22);
--glass: rgb(251 250 247 / .72); /* the floating nav bar: the only glass */
--glass-blur: blur(20px) saturate(1.2);
/* ---------- 8. MOTION (stone does not move; light does) ---------- */
--e-out: cubic-bezier(.16, 1, .3, 1);
--e-in: cubic-bezier(.7, 0, .84, 0);
--e-stone: cubic-bezier(.55, .06, .25, 1); /* the curtain's feel; skip cross-fade */
--e-light: cubic-bezier(.4, 0, .2, 1); /* raking light */
--d-hover: 220ms;
--d-state: 320ms;
--d-reveal: 600ms;
--d-skip: 360ms;
--d-sweep: 1600ms;
--d-carve: 160ms;
--d-line: 70ms;
--d-stamp: 260ms;
--d-page: 360ms;
--rise: 12px;
--lift: -4px;
/* curtain timings (CURTAIN.md §1, §5.3) */
--curtain-copy-at: 2400ms;
--curtain-wait: 1500ms; /* max wait for canplay */
--curtain-timeout: 2500ms; /* then fall back to the still plate */
/* ---------- 9. LAYERS ---------- */
--z-stage: 0; --z-copy: 2; --z-skip: 3; --z-nav: 20; --z-sheet: 30; --z-toast: 40;
/* ---------- 10. FOCUS ---------- */
--focus: 0 0 0 3px var(--marble), 0 0 0 5px var(--ink), 0 0 0 6px var(--gold);
}
/* Per-app niche colour */
[data-app="word-game"] { --app: var(--sw-lime); }
[data-app="language-trainer"] { --app: var(--sw-tendre); }
[data-app="budget"] { --app: var(--sw-feuille); }
[data-app="notes"] { --app: var(--sw-jade); }
[data-app="dictation"] { --app: var(--sw-ciel); }
[data-app="pdf-tools"] { --app: var(--sw-azur); }
[data-app="invoice-maker"] { --app: var(--sw-cobalt); }
[data-app="resume-builder"] { --app: var(--sw-pervenche); }
[data-app="flashcards"] { --app: var(--sw-mauve); }
[data-app="journal"] { --app: var(--sw-rose); }
[data-app="email-signature"] { --app: var(--sw-corail); }
[data-app="time-tracker"] { --app: var(--sw-orange); }
[data-app="habit-tracker"] { --app: var(--sw-abricot); }
/* Palette picker on the product page: app palette → swatch */
[data-palette="ember"] { --app: var(--sw-orange); }
[data-palette="forest"] { --app: var(--sw-jade); }
[data-palette="mint"] { --app: var(--sw-tendre); }
[data-palette="ocean"] { --app: var(--sw-azur); }
[data-palette="graphite"] { --app: var(--sw-pervenche); }
[data-palette="grape"] { --app: var(--sw-mauve); }
[data-palette="rose"] { --app: var(--sw-rose); }
[data-palette="sun"] { --app: var(--sw-abricot); }
/* Kits */
[data-kit="student"] { --app: var(--sw-ciel); }
[data-kit="freelance"] { --app: var(--sw-abricot); }
[data-kit="wellbeing"] { --app: var(--sw-tendre); }
/* ============================================================
PRIMITIVES (just enough to show how the tokens are meant to be used)
============================================================ */
html { background: var(--marble); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); font-stretch: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marble); overflow-x: clip; }
::selection { background: color-mix(in oklab, var(--gold-hi) 55%, var(--marble)); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: inherit; }
/* Sight: the inscription voice */
.carve { font-family: var(--font-carve); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-carve); line-height: var(--lh-carve); text-wrap: balance; }
.carve-1 { font-size: var(--fs-carve-1); }
.carve-2 { font-size: var(--fs-carve-2); }
.carve-3 { font-size: var(--fs-carve-3); }
.numeral { font-family: var(--font-carve); font-size: var(--fs-numeral); letter-spacing: .12em; color: var(--gold-text); }
.vcut { filter: url("#vcut"); } /* the inline SVG filter (DIRECTION §8) */
/* Touch: the interface voice */
.plate { font: 600 var(--fs-plate)/1.3 var(--font-sans); font-stretch: 125%; letter-spacing: var(--track-plate); text-transform: uppercase; color: var(--ink-2); }
.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); max-width: 34em; }
.price { font: 600 var(--fs-price)/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--btn-h); padding: 0 var(--s-6); border-radius: var(--r-pill); font: 600 17px/1 var(--font-sans); border: 1px solid transparent; cursor: pointer; transition: box-shadow var(--d-hover) var(--e-out), background-color var(--d-hover) var(--e-out); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 767px) { .btn { min-height: var(--btn-h-m); } }
.field { min-height: var(--tap); padding: 12px 14px; border-radius: var(--r-input); border: 1px solid var(--vein); background: var(--ivory); color: var(--ink); font: 400 var(--fs-body)/1.3 var(--font-sans); }
.field[aria-invalid="true"] { border-color: var(--minium); }
.error { color: var(--minium); font-size: var(--fs-small); }
/* The gold seam (divider) */
.seam { width: 96px; height: 1px; margin-inline: auto; background: var(--gold); box-shadow: 0 1px 0 rgb(255 255 255 / .9); border: 0; }
/* The niche: plaster render × fresco, masked to the plaster */
.niche { position: relative; isolation: isolate; aspect-ratio: 250 / 420; border-radius: var(--r-arch); background: var(--niche-narrow) center / cover; }
.niche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fresco); mix-blend-mode: multiply; -webkit-mask: var(--niche-narrow-m) center / cover; mask: var(--niche-narrow-m) center / cover; border-radius: inherit; transition: filter var(--d-hover) var(--e-out); }
.niche.is-wide { aspect-ratio: 432 / 400; background-image: var(--niche-wide); }
.niche.is-wide::before { -webkit-mask-image: var(--niche-wide-m); mask-image: var(--niche-wide-m); }
.niche .device { transition: transform var(--d-hover) var(--e-out); }
.niche .votive { position: absolute; inset: auto 8% 18% 8%; height: 22%; background: var(--votive); mix-blend-mode: screen; opacity: .55; transition: opacity var(--d-hover) var(--e-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
a:hover > .niche .device, a:focus-visible > .niche .device { transform: translateY(var(--lift)); }
a:hover > .niche .votive, a:focus-visible > .niche .votive { opacity: .85; }
a:hover > .niche::before { filter: brightness(1.04); }
}
/* The finale: geometry unchanged since v2 (fit() sets font-size) */
.mega { font-family: var(--font-sans); font-weight: 900; font-stretch: 68%; text-transform: uppercase; letter-spacing: var(--track-mega); line-height: .8; white-space: nowrap; margin: 40px 0 -.2em; color: var(--gold); background: var(--gold-leaf), var(--gold-tex); background-blend-mode: multiply; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.finale { background: var(--tex-slab) center / cover, var(--marble); overflow: hidden; }
/* Raking light: one pass when a gilded word enters (add .is-lit) */
.raking { position: relative; }
.raking::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; background: var(--raking) 0 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; background-position: 140% 0; mix-blend-mode: soft-light; pointer-events: none; }
.raking.is-lit::after { transition: background-position var(--d-sweep) var(--e-light); background-position: -40% 0; }
/* The receipt */
.till { font: 400 var(--fs-till)/1.5 var(--font-till); color: #2B2925; font-variant-numeric: tabular-nums; }
.stamp { font: 700 var(--fs-till)/1 var(--font-till); color: var(--minium); border: 2px solid currentColor; padding: 6px 10px; transform: rotate(-5deg); display: inline-block; }
/* Floating glass nav (after the hero) */
.nav.is-floating { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 1px 0 var(--hair); }
/* Curtain modes, set in before first paint (CURTAIN §5.2) */
html[data-curtain="open"] .stage-poster, html[data-curtain="open"] .stage-film, html[data-curtain="open"] .curtain-skip { display: none; }
html[data-curtain="play"] .threshold-copy, html[data-curtain="play"] .nav { opacity: 0; }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
:root { --d-hover: 0ms; --d-state: 120ms; --d-reveal: 150ms; --d-sweep: 0ms; --d-carve: 0ms; --d-line: 0ms; --d-stamp: 0ms; --d-page: 0ms; --rise: 0px; --lift: 0px; }
.raking::after { display: none; }
.stage-poster, .stage-film, .curtain-skip { display: none !important; }
.threshold-copy, .nav { opacity: 1 !important; }
}