/* ========================================================================== 02 · TOKENS — single source of truth for colour, type and shape Palette reworked 2026-09-07 for the Sternensegler artwork. -------------------------------------------------------------------------- Principle: the artwork carries the colour drama. The interface answers in two families and otherwise keeps quiet. COOL = interaction. Links, hovers, filled controls, the title band. WARM = brand marks only. Dividers, underlines, widget titles. Previous palette kept in the comments so a rollback is one pass. ========================================================================== */ :root { /* --- Ground ------------------------------------------------------------ */ --sm-bg-body: #0b1a24; /* also the slider ground — one hue for every dark surface, differing only in depth */ --sm-bg-footer: #161b20; /* was #25292c */ /* --- Text -------------------------------------------------------------- Body copy sits a step below the headings on purpose. At 24px Crimson Pro, pure white flickers against the artwork. */ --sm-heading: #f4efe4; /* 15.0 : 1 */ --sm-text: #ded8cc; /* 12.9 : 1 */ --sm-meta: #9aa3a6; /* 7.1 : 1 dates, post info */ --sm-white: #f4efe4; /* light UI: borders, button labels */ --sm-ink: #2b3033; /* text on light ground (404) */ /* --- Warm: brand marks only ------------------------------------------- Consolidated from four near-identical tones. The deep step exists because the other two are too light to carry white type. */ --sm-gold: #bfa46f; /* was #a38965 / #ac8847 */ --sm-gold-light: #d9c79b; /* was #dbbc8f */ --sm-gold-deep: #7d6339; /* new — fills with white text, 5.7 : 1 */ /* --- Cool: interaction ------------------------------------------------- Rest is muted, hover is bright. The movement always runs in the same direction, so a hover reads as a reaction and not as a colour change. */ --sm-link: #8fb2c6; /* 8.2 : 1 */ --sm-link-hover: #e8f4fd; /* just short of white — a clear jump from the resting tone, with enough blue left in it to stay inside the cool family */ --sm-accent: #93a7ad; /* 7.4 : 1 cool text accent */ --sm-fill: #0d5c82; /* 7.3 : 1 with white */ --sm-fill-hover: #12759f; /* 5.2 : 1 with white */ --sm-tint: rgba(13, 92, 130, .42); /* event cards, at rest */ /* --- Signal ------------------------------------------------------------ Red keeps a home, but only for genuine warnings — not as decoration. */ --sm-signal: #c0492b; /* was #981d00 as a general accent */ /* --- Surfaces ---------------------------------------------------------- 72% instead of 50%: the bright cloud band in the artwork punched through the old veil and the text lost its footing over it. The blur turns competing detail into a glow. If it costs too much on older mobiles, drop --sm-panel-blur to none and raise the panel to .82. */ --sm-panel: rgba(11, 32, 48, .80); /* reading surfaces */ --sm-panel-soft: rgba(14, 45, 66, .38); /* sidebar widgets */ --sm-panel-blur: blur(7px) saturate(.9); --sm-panel-blur-soft: blur(10px) saturate(.95); /* carries the softer widget tint: the calm comes from the blur, not from the opacity */ --sm-outline: 1px solid rgba(191, 164, 111, .28); /* warm — the one warm element in an otherwise blue surface construction. Ties the panels to the widget titles and dividers, so warm consistently marks and divides while cool carries and reacts. */ --sm-outline-offset: 5px; --sm-hairline: rgba(241, 238, 230, .18); --sm-hairline-soft: rgba(241, 238, 230, .30); /* --- Veils over the artwork ------------------------------------------- Left untouched. These are contrast control over a photograph, not palette — they get judged against the finished background. */ --sm-veil-25: rgba(0, 0, 0, .25); --sm-veil-50: rgba(16, 21, 26, .72); --sm-veil-60: rgba(0, 0, 0, .6); --sm-veil-75: rgba(0, 0, 0, .75); --sm-veil-85: rgba(0, 0, 0, .85); --sm-veil-solid: rgba(0, 0, 0, 1); --sm-veil-header: rgba(9, 26, 39, .96); /* header, sticky, submenus — the darkest surface on the page, so the navigation frames the content instead of competing with it */ --sm-band: rgba(191, 164, 111, .30); /* title strip AND footer top — one value, shared, so the frame stays symmetric */ --sm-band-deep: rgba(191, 164, 111, .52); /* footer bottom bar */ --sm-on-sand: #2b3033; /* type on the sand bands */ --sm-on-sand-icon: #4a3a20; /* icons and footer nav at rest */ --sm-band-h: 120px; /* strip height — the title wrapper is taller than the strip, so the social row has to be sized against this value rather than against its parent */ --sm-footer-top: var(--sm-band); /* edge of the content */ --sm-footer-bottom: var(--sm-veil-header); /* closes the page, like the header — colour follows function, not position */ /* --- Spacing ----------------------------------------------------------- Two values, and the relation between them carries the meaning: 24 for what belongs together — the gutter to the page edge, panel padding, a heading to its list. 48 for what is separate — columns, widgets, posts, content against header and footer. A single value for everything would flatten that: the gap inside a block and the gap between blocks would read the same, and colour or a line would have to do the work the spacing should be doing. Below 768 both halve. Not a third value — the same relation at a smaller scale, otherwise the gaps eat the phone screen. */ --sm-gap: 48px; /* --- Typefaces --------------------------------------------------------- */ --sm-font-display: 'Cinzel', serif; --sm-font-ui: 'Crimson Pro', serif; /* --- Grid -------------------------------------------------------------- */ --sm-grid: 1600px; --sm-gutter: 48px; /* --- Shape ------------------------------------------------------------- */ --sm-radius: 24px; --sm-radius-btn: 12px; /* small controls stay evenly rounded; the asymmetric corner is reserved for large surfaces */ --sm-radius-alt: 24px 0 24px 0; /* --- Background assets ------------------------------------------------- Paths relative to /css/ metal.jpg carries the title band, gold.jpg the widget titles. silver.jpg is no longer referenced by any rule. */ --sm-artwork: url(../images/artwork-2026.jpg); --sm-artwork-size: cover; --sm-texture-display: url(../images/metal.jpg); /* #abc3d5 average */ --sm-texture-gold: url(../images/gold.jpg); /* #d7b790 — regrade */ } /* ========================================================================== TYPE SCALE — banded fluid sizing, after the TechnikPR model Four bands: flat below 480, three ramps, flat above 1600. Sizes are unitless numbers, read as px. ========================================================================== */ :root { --typo-vw-mobile-min: 480; --typo-vw-mobile-max: 768; --typo-vw-tablet-min: 768; --typo-vw-tablet-max: 1024; --typo-vw-desktop-min: 1025; --typo-vw-desktop-max: 1600; --scalefactor-font-size: 1; --scalefactor-line-height: 1.25; --scalefactor-line-height-big: 1.45; /* --- Sizes ----------------- mobile -- tablet --- mid ---- large ------- */ --base-mobile: 17; --base-tablet: 18; --base-mid: 19; --base-large: 20; --p-mobile: 19; --p-tablet: 20; --p-mid: 22; --p-large: 24; --h1-mobile: 40; --h1-tablet: 45; --h1-mid: 47; --h1-large: 50; --h2-mobile: 31; --h2-tablet: 38; --h2-mid: 40; --h2-large: 44; --h3-mobile: 25; --h3-tablet: 31; --h3-mid: 34; --h3-large: 38; --h4-mobile: 23; --h4-tablet: 25; --h4-mid: 28; --h4-large: 31; --h5-mobile: 20; --h5-tablet: 23; --h5-mid: 24; --h5-large: 28; --h6-mobile: 20; --h6-tablet: 20; --h6-mid: 21; --h6-large: 23; --sm-h1-weight: 700; --sm-text-weight: 300; --sm-para-gap: 20px; }