/* ========================================================= PRINTCOLIC — DESIGN TOKENS Concept: "inktdruk & messing" — de wereld van professionele stempels: donker inktzwart, warm messing/koper accent, perkament-tint tekst, een zegel-rood voor nadruk. Signature element: de "stempelafdruk" ring (.stamp-ring) en de "press" interactie op knoppen (.btn-primary). ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* Ink — achtergronden */ --ink-950: #14110d; --ink-900: #1c170f; --ink-850: #221c13; --ink-800: #2a2318; --ink-700: #362d1f; /* Brass — primair accent */ --brass-300: #e6c08a; --brass-400: #d3a468; --brass-500: #c08a4e; --brass-600: #a1713d; /* Wax red — nadruk / fouten */ --wax-500: #b0402f; --wax-400: #c65847; /* Sage — succes */ --sage-500: #7c9b74; --sage-400: #93b189; /* Paper — tekst op donker */ --paper-050: #faf6ee; --paper-100: #f4ecdd; --paper-300: #d8cbb2; --paper-500: #a4977f; --paper-700: #756b58; --line: rgba(244, 236, 221, 0.10); --line-strong: rgba(244, 236, 221, 0.18); --shadow-deep: 0 20px 50px rgba(10, 8, 5, 0.45); --shadow-soft: 0 6px 20px rgba(10, 8, 5, 0.25); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', Arial, sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; } /* ========================================================= LICHT THEMA — zelfde "inktdruk & messing"-concept, maar omgekeerd: perkament-tint achtergrond, inktzwarte tekst. Geactiveerd via data-theme="light" op (theme-toggle.js). ========================================================= */ :root[data-theme="light"] { /* Achtergronden (was donker ink, nu licht perkament) */ --ink-950: #faf6ee; --ink-900: #f4ecdd; --ink-850: #ffffff; --ink-800: #ede4d0; --ink-700: #ddd0b4; /* Brass — iets dieper voor voldoende contrast op licht */ --brass-300: #a1713d; --brass-400: #96652f; --brass-500: #c08a4e; --brass-600: #a1713d; --wax-500: #b0402f; --wax-400: #a23624; --sage-500: #5f7c58; --sage-400: #4c6446; /* Tekstkleuren (was licht op donker, nu donker op licht) */ --paper-050: #1c170f; --paper-100: #221c13; --paper-300: #4a4030; --paper-500: #746a58; --paper-700: #8f8570; --line: rgba(28, 23, 15, 0.10); --line-strong: rgba(28, 23, 15, 0.16); --shadow-deep: 0 20px 50px rgba(28, 23, 15, 0.16); --shadow-soft: 0 6px 20px rgba(28, 23, 15, 0.10); } /* ---------- Signature element: stempelafdruk-ring ---------- */ .stamp-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--brass-500); box-shadow: 0 0 0 3px rgba(192, 138, 78, 0.14); } .stamp-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(192, 138, 78, 0.45); } /* ---------- Herbruikbare knoppen: "stempel-press" ---------- */ .btn-primary, .btn-main, .btn-promo { background: linear-gradient(180deg, var(--brass-400), var(--brass-600)); color: var(--ink-950); font-family: var(--font-body); font-weight: 700; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 14px rgba(0,0,0,0.25); } .btn-primary:hover, .btn-main:hover, .btn-promo:hover { filter: brightness(1.08); } .btn-primary:active, .btn-main:active, .btn-promo:active { transform: scale(0.97); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 6px rgba(0,0,0,0.3); } .knop { display: inline-block; background: linear-gradient(180deg, var(--brass-400), var(--brass-600)); color: var(--ink-950); border: none; padding: 11px 24px; border-radius: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: filter 0.15s, transform 0.12s; } .knop:hover { filter: brightness(1.08); } .knop:active { transform: scale(0.97); } .btn-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--paper-100); border-radius: var(--radius-sm); transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn-outline:hover { border-color: var(--brass-500); color: var(--brass-300); background: rgba(192, 138, 78, 0.08); } /* Scrollbar in stijl */ ::selection { background: var(--brass-500); color: var(--ink-950); } /* ---------- Toegankelijkheid: zichtbare focus-indicator voor toetsenbordgebruikers ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass-400) !important; outline-offset: 2px !important; }