/* ===================================================================== niklashawener v5 — design tokens & shared components Source of truth for the 6 user-switchable palettes (Claude Design: Header.dc.html themeDefs). Creme is the :root default; the others apply via [data-theme] on , set pre-paint by the head snippet. ===================================================================== */ /* ---- fonts ---- Achtung: reparierte Fassungen der Foundry-Dateien (Charstrings geflattet, Dieresis-Punkte im Semibold rekonstruiert) — die Originale rendern Umlaute im Browser kaputt. Nicht durch v2-Dateien ersetzen! */ @font-face { font-family: 'ATC Arquette'; src: url('../fonts/ATCArquette-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'ATC Arquette'; src: url('../fonts/ATCArquette-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'ATC Arquette'; src: url('../fonts/ATCArquette-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'ATC Arquette'; src: url('../fonts/ATCArquette-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* ---- theme tokens ---- */ :root { --bg: #f3ece5; --panel: #ece1d8; --card: #faf5f0; --line: #ddd2c7; --ink: #3c3733; --body: #4d463f; --sub: #6d645c; --faint: #74685c; /* AA: >=4.5:1 auf --bg und --card (Lighthouse) */ --accent: #8a5a3c; /* non-palette constants */ --radius-card: 14px; --radius-pill: 999px; --shadow-card: 0 2px 10px rgba(60, 40, 20, .07); --shadow-pop: 0 10px 30px rgba(60, 40, 20, .16); --w-page: 1100px; --w-col: 680px; } :root[data-theme="sand"] { --bg: oklch(0.93 0.024 90); --panel: oklch(0.895 0.032 90); --card: oklch(0.97 0.012 90); --line: oklch(0.86 0.032 90); --ink: #3b362c; --body: #4e473a; --sub: #6e6553; --faint: #71664f; --accent: oklch(0.5 0.09 70); } :root[data-theme="rose"] { --bg: oklch(0.93 0.018 25); --panel: oklch(0.895 0.024 25); --card: oklch(0.97 0.01 25); --line: oklch(0.86 0.024 25); --ink: #3e332f; --body: #514440; --sub: #71615c; --faint: #76635c; --accent: oklch(0.5 0.1 25); } :root[data-theme="salbei"] { --bg: oklch(0.93 0.014 150); --panel: oklch(0.895 0.02 150); --card: oklch(0.97 0.008 150); --line: oklch(0.855 0.02 150); --ink: #333a34; --body: #454f48; --sub: #5e6a61; --faint: #606a62; --accent: oklch(0.45 0.09 150); } :root[data-theme="abendgrau"] { --bg: oklch(0.92 0.012 260); --panel: oklch(0.88 0.016 260); --card: oklch(0.965 0.006 260); --line: oklch(0.84 0.014 260); --ink: #33363c; --body: #454a53; --sub: #5c626d; --faint: #5f6670; --accent: oklch(0.45 0.08 260); } :root[data-theme="dunkel"] { --bg: oklch(0.23 0.012 60); --panel: oklch(0.28 0.014 60); --card: oklch(0.31 0.014 60); --line: oklch(0.37 0.014 60); --ink: oklch(0.93 0.012 80); --body: oklch(0.84 0.014 80); --sub: oklch(0.7 0.016 80); --faint: oklch(0.68 0.016 80); --accent: oklch(0.75 0.09 60); } /* ---- base ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'ATC Arquette', Helvetica, sans-serif; font-size: 15px; line-height: 1.7; transition: background .35s ease; -webkit-text-size-adjust: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* links inside prose (kirbytext output) are always underlined, so they don't rely on color alone — Lighthouse/axe "link-in-text-block" */ .beitrag-text a, .post-card__teaser a, .home-intro__bio a, .rezension-text a, .rezension-fazit__text a, .legoset-text a, .legoset-fazit__text a, .legal__text a { text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; } button { font: inherit; color: inherit; } h1, h2, h3 { margin: 0; font-weight: 700; } /* ---- layout ---- */ .wrap { max-width: var(--w-page); margin: 0 auto; padding: 36px 24px 80px; } .col { width: var(--w-col); max-width: 100%; margin-left: auto; margin-right: auto; } /* ---- keyframes ---- */ @keyframes popIn { from { opacity: 0; transform: scale(.4) translateY(8px); } to { opacity: 1; transform: none; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- site header (nav pill + theme picker) ---- */ .site-header { position: sticky; top: 14px; z-index: 20; display: flex; justify-content: center; gap: 8px; align-items: center; flex-wrap: wrap; } .nav-pill { position: relative; display: flex; gap: 4px; background: color-mix(in oklab, var(--panel) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-pill); padding: 4px; } .nav-pill__indicator { position: absolute; top: 4px; bottom: 4px; background: var(--card); border-radius: var(--radius-pill); transition: left .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1); } .nav-pill__indicator[hidden] { display: none; } .nav-pill__item { position: relative; z-index: 1; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13.5px; color: var(--sub); font-weight: 400; transition: color .18s ease; text-align: center; } /* invisible semibold ghost of the label (data-label) reserves the bold width, so items don't shift when hover/active changes the weight */ .nav-pill__item::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; } .nav-pill__item:hover { text-decoration: none; } .nav-pill__item.is-active, .nav-pill__item.is-hovered { color: var(--ink); font-weight: 600; } /* mobile nav dropdown — replaces the pill below 600px; a native
so it also works without JS (header.js only adds outside-click closing) */ .nav-drop-wrap { display: none; } .nav-drop { position: relative; } .nav-drop__toggle { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; background: color-mix(in oklab, var(--panel) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-pill); padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .nav-drop__toggle::-webkit-details-marker { display: none; } .nav-drop__caret { font-size: 10px; color: var(--sub); transition: transform .2s ease; } .nav-drop[open] .nav-drop__caret { transform: rotate(180deg); } .nav-drop__menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 6; min-width: 176px; display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 6px; box-shadow: var(--shadow-pop); } .nav-drop__item { padding: 9px 14px; border-radius: 9px; font-size: 14px; color: var(--sub); animation: popIn .3s cubic-bezier(.34, 1.56, .64, 1) backwards; } .nav-drop__item:hover { background: var(--panel); color: var(--ink); text-decoration: none; } .nav-drop__item.is-active { background: var(--panel); color: var(--ink); font-weight: 600; } .theme-picker { position: relative; } .theme-picker__toggle { display: flex; align-items: center; background: color-mix(in oklab, var(--panel) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: none; border-radius: var(--radius-pill); padding: 9px 13px; cursor: pointer; } .theme-picker__swatch { display: block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .14); } .theme-picker__popover { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 11px 9px; box-shadow: var(--shadow-pop); } .theme-picker__popover[hidden] { display: none; } .theme-picker__option { width: 16px; height: 16px; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid rgba(0, 0, 0, .14); transition: transform .15s ease; animation: popIn .35s cubic-bezier(.34, 1.56, .64, 1) backwards; } .theme-picker__option:hover { transform: scale(1.2); } /* "Dunkler Ring" active indicator */ .theme-picker__option.is-active { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink); } /* ---- footer ---- */ .site-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; padding-bottom: 40px; margin-top: 72px; font-size: 12.5px; color: var(--faint); } .site-footer a { color: var(--faint); } .site-footer nav { display: flex; gap: 14px; } /* ---- shared bits ---- */ .section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); } .card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .meta { font-size: 12px; color: var(--faint); } /* rating pips (bricks/mushrooms/generic dots) */ .pips { display: inline-flex; gap: 4px; align-items: center; } .pips__pip { width: 12px; height: 12px; border-radius: 3px; background: var(--line); } .pips__pip.is-filled { background: var(--accent); } /* theme-aware image treatment (client logos, product shots on cards) */ .img-blend { mix-blend-mode: multiply; opacity: .6; } :root[data-theme="dunkel"] .img-blend { mix-blend-mode: screen; opacity: .8; filter: grayscale(1) invert(1) brightness(1.6); } /* ---- reduced motion ---- */ /* ---- "Offen für Projekte" störer (Kontakt + Startseite) ---- */ @keyframes stoerer-in { from { opacity: 0; transform: scale(.4) translateY(8px) rotate(-1.5deg); } to { opacity: 1; transform: rotate(-1.5deg); } } @keyframes stoerer-pulse { 0% { box-shadow: 0 0 0 0 oklch(0.6 0.13 150 / .5); } 70% { box-shadow: 0 0 0 7px oklch(0.6 0.13 150 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.6 0.13 150 / 0); } } .stoerer { /* inverted panel: ink on light themes, card on "Dunkel" */ --st-bg: var(--ink); --st-fg: var(--bg); position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 248px; background: var(--st-bg); color: var(--st-fg); border: 1px solid transparent; border-radius: 16px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transform: rotate(-1.5deg); transition: transform .2s ease; animation: stoerer-in .45s cubic-bezier(.34, 1.56, .64, 1) .25s backwards; } :root[data-theme="dunkel"] .stoerer { --st-bg: var(--card); --st-fg: var(--ink); border-color: var(--line); } .stoerer:hover { transform: rotate(0deg); } /* head is a