/* Plum Noir — site-factory theme.py film, wine, late-night brands, perfume, moody editorial Regenerating overwrites this file. */ :root{ color-scheme: dark; --ink: #f7eef6; --surface: #140a16; --raised: #241128; --muted: #b79cb8; --border: #3a1f40; --accent: #e85aa8; --accent-ink: #16081a; --font-display: 'Bodoni Moda', 'Didot', Georgia, serif; --font-body: 'Jost', -apple-system, system-ui, sans-serif; --font-mono: 'DM Mono', ui-monospace, Menlo, monospace; --radius: 3px; --rule: 1px; --measure: 58ch; --maxw: 70rem; --space: 1.3rem; --split: 1fr 1.2fr; --section-pad: clamp(4rem, 9vw, 7rem); --t-display: clamp(2.8rem, 1.4rem + 5.6vw, 5.4rem); --t-h2: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem); --t-h3: 1.1rem; --t-lede: clamp(1.08rem, 1rem + .5vw, 1.3rem); --t-body: 1.05rem; --t-small: .8rem; --lh: 1.74; --lh-head: 1.04; --track-display: -.016em; --weight-display: 500; --head-case: none; --bloom: radial-gradient(70% 50% at 50% -6%,rgba(232,90,168,.22) 0%,rgba(232,90,168,0) 70%); --grid: rgba(232,90,168,.08); --glow: rgba(232,90,168,.38); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface);color:var(--ink); font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh); text-wrap:pretty;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-display); line-height:var(--lh-head);letter-spacing:var(--track-display); text-transform:var(--head-case);text-wrap:balance;margin:0 0 .45em} h1{font-size:var(--t-display)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);letter-spacing:0;text-transform:none} p{max-width:var(--measure);margin:0 0 1.15em} a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px} a:hover{text-decoration-thickness:2px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} img,svg,video{max-width:100%;height:auto;display:block} ::selection{background:var(--accent);color:var(--accent-ink)} hr,.rule{border:0;border-top:var(--rule) solid var(--border); margin:calc(var(--space)*2) 0} .wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto} section{padding-block:var(--section-pad)} /* ── LAYOUT ARCHETYPES ───────────────────────────────────────────────────── Each register declares the composition it wants in `composition.prefer`. These are the structures that honour it. They differ in ALIGNMENT and HIERARCHY, not just in colour: a register is not a voice if every page built from it has the same skeleton. Apply one to . */ /* split-editorial — display type in a narrow left column, prose right. Asymmetric on purpose: the eye lands on the head, then crosses. */ .L-split .lay{display:grid;gap:1.6rem;grid-template-columns:1fr} @media(min-width:56rem){ .L-split .lay{grid-template-columns:minmax(16rem,.85fr) minmax(0,1.15fr); gap:3.5rem;align-items:start} .L-split .lay > .lead{position:sticky;top:2rem} .L-split h1{font-size:calc(var(--t-display) * 1.05)} } /* stacked-rhythm — one centred column, every block full width. Nothing sits beside anything; pace comes from vertical spacing alone. */ .L-stack .lay{max-width:44rem;margin-inline:auto;text-align:center} .L-stack .lay p{margin-inline:auto} .L-stack .lay .btn-row{justify-content:center} .L-stack h1,.L-stack h2{text-align:center} .L-stack .block{padding-block:calc(var(--space)*2); border-top:var(--rule) solid var(--border)} .L-stack .block:first-child{border-top:none} /* table-forward — a real sidebar. Data is the page; navigation is furniture. */ .L-table .lay{display:grid;gap:1.5rem;grid-template-columns:1fr} @media(min-width:60rem){ .L-table .lay{grid-template-columns:13rem minmax(0,1fr);gap:2.5rem} .L-table .side{position:sticky;top:2rem;align-self:start; border-right:var(--rule) solid var(--border);padding-right:1.5rem; min-height:20rem} } .L-table .side nav{display:flex;flex-direction:column;gap:.55rem; font-family:var(--font-mono);font-size:var(--t-small)} .L-table .side a{color:var(--muted);text-decoration:none} .L-table .side a[aria-current]{color:var(--accent)} /* specimen — one object, enormous margins, centred. The luxury move: whitespace carries the value, so the content column is deliberately narrow. */ .L-specimen .lay{max-width:38rem;margin-inline:auto;text-align:center} .L-specimen .lay p{margin-inline:auto} .L-specimen section{padding-block:calc(var(--section-pad) * 1.5)} .L-specimen .object{margin:calc(var(--space)*2.5) auto; border:var(--rule) solid var(--border);border-radius:var(--radius); padding:calc(var(--space)*2.5) calc(var(--space)*2);background:var(--raised)} .L-specimen .btn-row{justify-content:center} /* index-list — a numbered document. Hanging numerals in the margin. */ .L-index .lay{max-width:58rem} .L-index .entry{display:grid;grid-template-columns:3.2rem 1fr;gap:.2rem 1.2rem; padding:1.2rem 0;border-bottom:var(--rule) solid var(--border)} .L-index .entry:first-of-type{border-top:var(--rule) solid var(--border)} .L-index .entry .n{font-family:var(--font-mono);font-size:var(--t-small); color:var(--muted);padding-top:.35rem} /* hero-product — centred hero, then a band of cards. Consumer default, used ONLY where a register asks for it. */ .L-hero .lay{text-align:center} .L-hero .lay > p{margin-inline:auto} .L-hero .btn-row{justify-content:center} .L-hero h1{max-width:18ch;margin-inline:auto} /* manual-spread — two columns of body text with notes in the outer margin, the way a field manual or a critical edition sets a page. */ .L-manual .lay{display:grid;gap:1.4rem;grid-template-columns:1fr} @media(min-width:58rem){ .L-manual .lay{grid-template-columns:minmax(0,1fr) 14rem;gap:2.75rem} .L-manual .marginalia{border-left:var(--rule) solid var(--border); padding-left:1.1rem} } .L-manual .cols{column-gap:2.5rem} @media(min-width:44rem){.L-manual .cols{column-count:2}} .L-manual .cols p{max-width:none;break-inside:avoid} .btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem} /* Authored details — the things that read as designed rather than defaulted. */ .kicker{font-family:var(--font-mono);font-size:var(--t-small); text-transform:uppercase;letter-spacing:.14em;color:var(--muted); display:block;margin-bottom:.85rem} .lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink); max-width:var(--measure);opacity:.88} .caption{font-family:var(--font-mono);font-size:var(--t-small); color:var(--muted);margin-top:.5rem} .marginnote{font-family:var(--font-mono);font-size:var(--t-small); color:var(--muted);border-left:var(--rule) solid var(--border); padding-left:.9rem;margin:1.3rem 0;max-width:38ch} .index-row{display:grid;grid-template-columns:3.4rem 1fr;gap:.15rem 1rem; padding:1.05rem 0;border-top:var(--rule) solid var(--border)} .index-row .n{font-family:var(--font-mono);font-size:var(--t-small); color:var(--muted);padding-top:.3rem} .index-row h3{margin:0 0 .2rem} .index-row p{margin:0;color:var(--muted);font-size:.95em} .split{display:grid;gap:calc(var(--space)*1.5);grid-template-columns:1fr} @media(min-width:52rem){.split{grid-template-columns:var(--split); gap:calc(var(--space)*2.6);align-items:start}} .specimen{background:var(--raised);border:var(--rule) solid var(--border); border-radius:var(--radius);padding:calc(var(--space)*1.6)} .tag{display:inline-block;font-family:var(--font-mono);font-size:var(--t-small); padding:.2rem .55rem;border:var(--rule) solid var(--border); border-radius:var(--radius);color:var(--muted)} table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} th,td{text-align:left;padding:.7rem .8rem; border-bottom:var(--rule) solid var(--border)} th{font-family:var(--font-mono);font-size:var(--t-small);font-weight:500; text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .btn{display:inline-flex;align-items:center;gap:.5rem;min-height:46px; padding:0 1.3rem;background:var(--ink);color:var(--surface); border:var(--rule) solid var(--ink);border-radius:var(--radius); font-family:var(--font-body);font-weight:600;text-decoration:none; cursor:pointer;transition:transform .12s ease,background .12s ease} .btn:hover{transform:translateY(-1px)} .btn--accent{background:var(--accent);border-color:var(--accent); color:var(--accent-ink)} .btn--quiet{background:transparent;color:var(--ink);border-color:var(--border)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important}} /* ── ONCHAIN LAYER ───────────────────────────────────────────────────────── Measured off 10 live crypto sites. The four mechanisms that do the work: a radial bloom behind the hero, a faint dot grid, edges that fade into the background, and a COLOURED GLOW in place of a drop shadow. Surfaces stay achromatic; all colour lives in the light. */ /* Bloom: one radial wash behind the FIRST SCREEN ONLY. Anchored to the document (absolute + fixed height), NOT to the viewport. `position:fixed` looks right on a short page and wrong the moment you scroll — the wash follows you down and reappears behind the footer. */ body{position:relative} body::before{content:"";position:absolute;top:0;left:0;right:0;height:min(980px,105vh); background:var(--bloom);pointer-events:none;z-index:0} body > *{position:relative;z-index:1} /* Dot grid. 2 of 10 sites used exactly this; it adds texture at almost no visual cost. Masked so it fades out rather than tiling to the footer. */ .grid-bg{position:relative} .grid-bg::before{content:"";position:absolute;inset:0; background-image:radial-gradient(var(--grid) 1px, transparent 1px); background-size:22px 22px;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%); mask-image:linear-gradient(180deg,#000 0%,transparent 88%)} /* Glow, not shadow. On dark surfaces a drop shadow is invisible; a coloured glow is what actually reads. */ .glow{box-shadow:0 0 0 1px var(--border), 0 12px 48px -12px var(--glow)} .btn{box-shadow:none} .btn--accent{box-shadow:0 8px 28px -10px var(--glow)} .btn--accent:hover{box-shadow:0 10px 34px -10px var(--glow); transform:translateY(-1px)} .card{background:var(--raised);border:var(--rule) solid var(--border); border-radius:var(--radius);padding:calc(var(--space)*1.35)} .card-grid{display:grid;gap:var(--space);grid-template-columns:1fr} @media(min-width:44rem){.card-grid{grid-template-columns:1fr 1fr}} @media(min-width:68rem){.card-grid--4{grid-template-columns:repeat(4,1fr)}} /* Glass. 5 of 10 sites used backdrop-filter, almost always on a sticky nav. */ .glass{background:color-mix(in srgb, var(--raised) 62%, transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:var(--rule) solid var(--border)} .nav-sticky{position:sticky;top:0;z-index:20} .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .8rem; border-radius:999px;border:var(--rule) solid var(--border); background:var(--raised);font-family:var(--font-mono); font-size:var(--t-small);color:var(--muted)} .chip b{color:var(--ink)} .chip--live::before{content:"";width:.45rem;height:.45rem;border-radius:50%; background:var(--accent);box-shadow:0 0 8px var(--glow)} /* Numbers are the content on these sites. Tabular so they never jitter. */ .stat-strip{display:flex;flex-wrap:wrap;gap:.6rem 2rem; font-family:var(--font-mono);font-size:var(--t-small);color:var(--muted); font-variant-numeric:tabular-nums} .stat-strip b{color:var(--ink);font-weight:600} .stat-row{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr); font-variant-numeric:tabular-nums} @media(min-width:44rem){.stat-row{grid-template-columns:repeat(4,1fr)}} .stat-row .v{font-family:var(--font-display);font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); font-weight:var(--weight-display);letter-spacing:var(--track-display); line-height:1.05;display:block} .stat-row .k{font-family:var(--font-mono);font-size:var(--t-small); color:var(--muted);text-transform:uppercase;letter-spacing:.1em} .ticker{overflow:hidden;border-block:var(--rule) solid var(--border); padding:.6rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ticker__track{display:flex;gap:2.5rem;width:max-content; animation:slide 30s linear infinite;font-family:var(--font-mono); font-size:var(--t-small);color:var(--muted);white-space:nowrap} .ticker__track b{color:var(--ink)} .ticker:hover .ticker__track{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} /* Edges that dissolve instead of stopping. Used by 3 of 10 sites. */ .fade-b{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 62%,transparent 100%)} @media(prefers-reduced-motion:reduce){ .ticker__track{animation:none}}