/* ========================================================================= Zetemata — structural styles. Colour comes entirely from theme tokens. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* overflow-x on alone does not stop the page scrolling sideways — the document element is the scroll container, so it needs the rule too. Without it the off-canvas hero artwork gave every page a horizontal scrollbar. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--sans); /* A soft shaft of light from top-centre, fading down, over a faint ambient wash. Both recolour per skin via tokens. The peak sits ON the top edge, not above it — pushed off-screen, the only part of the falloff you ever saw was its faintest tail, which read as no glow at all. Wide and slow so it stays ambient and never fights the text. */ background: radial-gradient(72% 58% at 50% 0%, var(--glow), transparent 72%), radial-gradient(120% 90% at 50% -10%, var(--bg-grain), transparent 60%), var(--bg); background-attachment: fixed; color: var(--ink); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; position: relative; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .35s ease, color .35s ease; overflow-x: clip; } /* Paper grain. Generated noise rather than a photograph: a photo would need one per skin, fight the text it sits under, and cost more bytes than the whole rest of the page. This is ~300 bytes of SVG, tiles seamlessly, and recolours itself because it only modulates whatever is beneath it. Sits above the body background and below every bit of content. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* The margin rule: a hairline down the left of the content column, where a diple would be set. The mark in the header is pointing out of this margin. On a page whose whole argument is that it does not pad, this is the one piece of decoration that is actually saying something. Fixed rather than in flow so it runs the full height like a ruled page, and dropped below the width at which the centred column stops leaving a margin wide enough to rule — at that point it would crowd the text instead. */ @media (min-width: 60rem) { body::after { content: ""; position: fixed; top: 0; bottom: 0; left: calc(50% - var(--maxw) / 2 - 2.25rem); width: 1px; background: var(--ink-faint); opacity: .13; z-index: -1; pointer-events: none; } } /* Respect a reader who has asked for less: the grain is decoration. */ @media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } } h1, h2, h3 { font-family: var(--display-font); font-weight: var(--display-weight); line-height: 1.15; letter-spacing: -0.01em; } a { color: inherit; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 100; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* ---- Header -------------------------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem clamp(1rem, 4vw, 2.4rem); max-width: 74rem; width: 100%; margin: 0 auto; } .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; } .brand-mark { display: grid; place-items: center; color: var(--accent); } .brand-mark svg { display: block; } /* fills/strokes set per-element via currentColor */ .brand-name { font-family: var(--display-font); font-weight: 640; font-size: 1.28rem; letter-spacing: -0.02em; color: var(--ink); } .site-nav { display: flex; align-items: center; gap: clamp(.8rem, 2.4vw, 1.6rem); } .site-nav > a { text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 500; padding: .35rem 0; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; } .site-nav > a:hover { color: var(--ink); border-color: var(--accent); } /* ---- Theme switch ------------------------------------------------------- */ /* A secondary control, styled like one. As a filled, bordered pill group with three labelled chips it was the highest-contrast object in the header and competed with the brand and the composer for first attention — which is the wrong order for a skin picker. The container is now transparent and the chips recede until they are approached; only the active one stays legible. */ .theme-switch { display: flex; gap: .25rem; padding: .25rem; background: transparent; border: 1px solid transparent; border-radius: 999px; opacity: .62; transition: opacity .2s, border-color .2s, background .2s; } .theme-switch:hover, .theme-switch:focus-within { opacity: 1; background: var(--surface-2); border-color: var(--border); } .theme-chip { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: .82rem; font-weight: 500; padding: .35rem .7rem; border-radius: 999px; transition: background .2s, color .2s; } .theme-chip:hover { color: var(--ink); } /* The selected skin only earns a raised chip once the group is engaged; at rest it is marked by weight alone. */ .theme-chip[aria-pressed="true"] { color: var(--ink); font-weight: 600; } .theme-switch:hover .theme-chip[aria-pressed="true"], .theme-switch:focus-within .theme-chip[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); } .theme-chip-label { display: none; } @media (min-width: 720px) { .theme-chip-label { display: inline; } } .swatch { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); } .swatch-manuscript { background: linear-gradient(135deg, #f6f1e7 45%, #b4562f 45%); } .swatch-nocturne { background: linear-gradient(135deg, #161a22 45%, #8b8cf0 45%); } .swatch-meadow { background: linear-gradient(135deg, #eef0e6 45%, #3f7d54 45%); } /* ---- Flash + footer ----------------------------------------------------- */ .flash { max-width: var(--maxw); margin: .5rem auto 0; padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .92rem; background: var(--accent-soft); color: var(--ink); border: 1px solid var(--border); } main { flex: 1 0 auto; width: 100%; } .site-footer { max-width: var(--maxw); margin: 3rem auto 2rem; padding: 1.4rem clamp(1rem, 4vw, 2rem) 0; border-top: 1px solid var(--border-soft); color: var(--ink-faint); font-size: .82rem; text-align: center; } .site-footer .disclaimer { margin-bottom: .5rem; line-height: 1.5; } .site-footer .colophon { font-size: .76rem; opacity: .85; } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; cursor: pointer; padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent; transition: transform .12s ease, box-shadow .2s, background .2s, opacity .2s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .btn-primary:hover { box-shadow: 0 6px 18px var(--ring); } .btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--border); } .btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); } /* ---- Static content pages (about / ethics) ------------------------------ */ .prose { max-width: var(--maxw); margin: 2.5rem auto; padding: 0 clamp(1rem, 4vw, 2rem); } .prose h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin-bottom: 1rem; } .prose h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; } .prose p { color: var(--ink-soft); margin-bottom: 1rem; font-size: 1.04rem; } .prose .lead { font-size: 1.2rem; color: var(--ink); font-family: var(--serif); line-height: 1.5; } .promise-list { list-style: none; display: grid; gap: .9rem; margin: 1.4rem 0; } .promise-list li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow); } .promise-list strong { color: var(--ink); display: block; margin-bottom: .2rem; } .promise-list span { color: var(--ink-soft); font-size: .96rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto; } } /* ---- Phone header ------------------------------------------------------- This block lives at the end of the file on purpose. It was previously above `.site-header { display: flex }`, and since both rules have the same specificity the later one won — so the stacked layout never applied and the header stayed a cramped single row with the theme switch running off the right edge. Position is load-bearing here; don't move it back up. */ @media (max-width: 560px) { .site-header { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .7rem; padding: .9rem 1rem .6rem; } .brand { gap: .5rem; } .brand-name { font-size: 1.2rem; white-space: nowrap; } .site-nav { width: 100%; justify-content: center; gap: clamp(.6rem, 4vw, 1.2rem); flex-wrap: wrap; } /* 44px of thumb, without making the text bigger. */ .site-nav > a { font-size: .9rem; padding: .6rem .2rem; } .theme-switch { flex-shrink: 0; } .theme-chip { padding: .55rem .6rem; } .swatch { width: 17px; height: 17px; } }