/* Concept "Betoon" (nordic-3) Salvei ja betoon Only the tokens change — the system is in ../nordic-base.css. This concept also carries the live theme picker. Six palettes are defined below as [data-theme="…"] blocks on ; theme.js swaps the attribute and remembers the choice. That is the whole mechanism: no stylesheet is swapped, no class is added to any component, nothing in nordic-base.css knows a theme exists. It is here to show the client that "can we see it in our red?" is a one-line change, not a redesign. Adding a seventh palette = copying one block and adding one button to index.html. Keep the token names identical across blocks. */ :root, [data-theme="salvei"] { --bg:#f2f5f3; --surface:#ffffff; --surface-2:#e8ece9; --text:#0c1b15; --muted:#5d6b64; --line:#dde3df; --accent:#3a6351; --accent-ink:#ffffff; --accent-deep:#2f5142; --cta:#142820; --cta-text:#ffffff; --dark:#142820; --calc-bg:#142820; --topbar-bg:#142820; --topbar-text:#c4d2cb; --r:14px; --r-btn:12px; --font-serif:'Playfair Display',Georgia,serif; --hero-ser:#3a6351; } /* The client's own brand red (#CC0000 on the current site), pulled back to a deeper tone that survives being used at body-text contrast. */ [data-theme="punane"] { --bg:#faf7f6; --surface:#ffffff; --surface-2:#f3eae8; --text:#1c1211; --muted:#6c5b58; --line:#e7dbd8; --accent:#c0221c; --accent-ink:#ffffff; --accent-deep:#95160f; --cta:#1c1211; --cta-text:#ffffff; --dark:#1c1211; --calc-bg:#1c1211; --topbar-bg:#1c1211; --topbar-text:#d8c4c1; --hero-ser:#c0221c; } /* Graphite and amber — the most "contractor" of the six. */ [data-theme="merevaik"] { --bg:#f8f8f7; --surface:#ffffff; --surface-2:#eeeeec; --text:#14161a; --muted:#61666e; --line:#e2e3e1; --accent:#e08a12; --accent-ink:#1b1204; --accent-deep:#9a5c05; --cta:#14161a; --cta-text:#ffffff; --dark:#14161a; --calc-bg:#14161a; --topbar-bg:#14161a; --topbar-text:#b9bec6; --hero-ser:#b06a08; } /* Deep navy and ice — reads as engineering rather than decoration. */ [data-theme="sinine"] { --bg:#f5f8fc; --surface:#ffffff; --surface-2:#e7eef7; --text:#0a1c33; --muted:#546882; --line:#dbe4ef; --accent:#1d5fbf; --accent-ink:#ffffff; --accent-deep:#16488f; --cta:#0a1c33; --cta-text:#ffffff; --dark:#0a1c33; --calc-bg:#0a1c33; --topbar-bg:#0a1c33; --topbar-text:#b3c6dd; --hero-ser:#1d5fbf; } /* Terracotta and clay — the warmest option, closest to the photography. */ [data-theme="terrakota"] { --bg:#faf6f2; --surface:#ffffff; --surface-2:#f0e6de; --text:#22150f; --muted:#7a6558; --line:#e8dbd0; --accent:#b4553a; --accent-ink:#ffffff; --accent-deep:#8b3d26; --cta:#2b1a12; --cta-text:#ffffff; --dark:#2b1a12; --calc-bg:#2b1a12; --topbar-bg:#2b1a12; --topbar-text:#d5c1b2; --hero-ser:#b4553a; } /* Night: the same page on a dark substrate. Everything reads off the same token names, which is exactly the point — the system did not change. --tag-bg is the one place the base file needed a token to make this work (the photo caption pill was a hardcoded white). */ [data-theme="ooine"] { --bg:#10151a; --surface:#181f26; --surface-2:#1f272f; --text:#eef3f7; --muted:#9aa7b2; --line:#2a333c; --accent:#4fb08a; --accent-ink:#06120d; --accent-deep:#7fd0ae; --cta:#4fb08a; --cta-text:#06120d; --dark:#070b0e; --calc-bg:#070b0e; --topbar-bg:#070b0e; --topbar-text:#8fa0ad; --tag-bg:rgba(24,31,38,.94); --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); --shadow:0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5); --hero-ser:#4fb08a; } /* ========================================================= The picker itself ========================================================= */ .themebar { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: 1rem; z-index: 87; display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .55rem; box-shadow: var(--shadow-sm); } .themebar > span { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-left: .35rem; } .themebar__set { display: flex; gap: .3rem; } .themebar button { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid rgba(0, 0, 0, .18); background: linear-gradient(135deg, var(--sw1) 0 50%, var(--sw2) 50% 100%); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .themebar button:hover { transform: scale(1.12); } .themebar button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); } /* On a phone the call bar owns the bottom of the screen, so the picker sits above it rather than on top of it. */ @media (max-width: 900px) { .themebar { bottom: calc(78px + env(safe-area-inset-bottom)); padding: .35rem .45rem; } .themebar > span { display: none; } .themebar button { width: 24px; height: 24px; } } /* ========================================================= PHONE HERO — lead with a project photo ========================================================= Stacked, the hero opened with the badge, headline, lead, two buttons and the 2x2 stat block before any photograph: the rotating showcase, which is this concept's signature, only arrived after a full screen of copy. Below the two-column breakpoint it moves to the top, so a phone opens on a renovated room that changes every few seconds — and the copy that follows has something to be about. These rules live here rather than in nordic-base.css on purpose: the other nordic-* folders still share that file and are no longer in the offer. Trade-off, accepted knowingly: the showcase dots are now reachable by keyboard before the hero's own buttons. They drive a decorative showcase that auto-advances anyway, and nothing else in that column is focusable, so the order still reads sensibly. */ @media (max-width: 960px) { /* `display: contents` dissolves the cluster into the grid, so the photo and the "0 EUR hidden costs" note can be placed independently: photo first, note after the copy. Stacked directly, the note wedged a coloured block between the picture and the headline. It costs the cluster its reveal animation on phones — an element with `display: contents` generates no box, so its own opacity and transform do nothing — which is moot here because the photo is on screen at first paint anyway. */ .cluster { display: contents; } /* both are grid items now, so the hero grid's own row gap spaces them — the note's default margin-top would double it */ .cluster__main { order: -1; } .cluster__note { order: 1; margin-top: 0; } /* landscape rather than 4:3 — a phone screen is short and the headline, lead, buttons and stats all still have to fit under it */ .cluster__main img { aspect-ratio: 16/9; } /* The caption moves onto the photo. Below it, it cost about 100px between the picture and the headline, which is the difference between the first button being on the screen or under it. z-index is load-bearing for the same reason as .cluster__tag: the active slide's image carries a transform, so it makes a stacking context and paints over an absolutely positioned sibling that has z-index: auto. */ .cluster__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; border-top: 0; padding: 2rem .95rem .85rem; background: linear-gradient(to top, rgba(8, 20, 14, .9), rgba(8, 20, 14, .55) 55%, transparent); } .cluster__cap b { color: #fff; } .cluster__cap span { color: rgba(255, 255, 255, .8); } }