/* Hallmark · redesign · genre: playful · theme: custom "candy-violet Czech creative" * paper: oklch(20% 0.07 295) #131027 (dark default) · cream #FAF7F0 (light opt-in) * accents: violet #7C5CFF · pink #FF5CA8 · yellow #FFC940 · mint #3DDFA9 * display: Syne 800 · body: Manrope · annotation: Caveat * axes: dark paper / geometric-sans display / multi-accent * pre-emit critique: P4 H4 E4 S4 R3 V4 * * Dvojka Studio — shared theme system * Toggle themes via [data-theme] on . DARK is the default: * an unattributed renders dark; [data-theme="light"] opts in to light. */ :root, :root[data-theme="dark"] { --bg: #13102B; --bg-raised: #1B163D; --bg-overlay: #28205C; --bg-input: #110E23; --text: #F2EFFF; --text-strong: #FFFFFF; --text-muted: #A89FD6; --text-faint: #6F66A3; --border: rgba(157, 133, 255, 0.16); --border-strong: rgba(157, 133, 255, 0.30); --border-faint: rgba(157, 133, 255, 0.09); --accent: #7C5CFF; --accent-hover: #9D85FF; --accent-btn: #6A48F0; --accent-soft: rgba(124, 92, 255, 0.14); --accent-softer: rgba(124, 92, 255, 0.07); /* Confetti accents — the happy part of the system */ --pink: #FF5CA8; --pink-soft: rgba(255, 92, 168, 0.14); --yellow: #FFC940; --yellow-soft: rgba(255, 201, 64, 0.14); --mint: #3DDFA9; --mint-soft: rgba(61, 223, 169, 0.13); --coral: #FF7A59; --success: #6CE5B1; --success-strong: #2ED594; --nav-bg: rgba(19, 16, 39, 0.72); --nav-bg-scrolled: rgba(19, 16, 39, 0.92); --nav-border: rgba(157, 133, 255, 0.14); --scrollbar-track: #110E23; --scrollbar-thumb: #332A6B; --scrollbar-hover: #4A3D99; --selection-bg: rgba(255, 92, 168, 0.35); --shadow-sm: 0 1px 2px rgba(8, 5, 24, 0.5); --shadow-md: 0 8px 30px rgba(8, 5, 24, 0.45); --shadow-pop: 0 10px 32px rgba(124, 92, 255, 0.22); color-scheme: dark; } :root[data-theme="light"] { --bg: #FAF7F0; --bg-raised: #FFFFFF; --bg-overlay: #F1ECE1; --bg-input: #FFFFFF; --text: #251E4D; --text-strong: #171138; --text-muted: #5E5687; --text-faint: #948CBD; --border: rgba(37, 30, 77, 0.13); --border-strong: rgba(37, 30, 77, 0.22); --border-faint: rgba(37, 30, 77, 0.07); --accent: #6A48F0; --accent-hover: #7C5CFF; --accent-btn: #5B3DE8; --accent-soft: rgba(106, 72, 240, 0.10); --accent-softer: rgba(106, 72, 240, 0.05); --pink: #E83D8D; --pink-soft: rgba(232, 61, 141, 0.10); --yellow: #E8A200; --yellow-soft: rgba(232, 162, 0, 0.12); --mint: #0FA978; --mint-soft: rgba(15, 169, 120, 0.10); --coral: #E85B36; --success: #0E8C5C; --success-strong: #0FA978; --nav-bg: rgba(250, 247, 240, 0.82); --nav-bg-scrolled: rgba(250, 247, 240, 0.95); --nav-border: rgba(37, 30, 77, 0.10); --scrollbar-track: #EFEBE2; --scrollbar-thumb: #D4CDE8; --scrollbar-hover: #B3A8DD; --selection-bg: rgba(232, 61, 141, 0.22); --shadow-sm: 0 1px 2px rgba(37, 30, 77, 0.07); --shadow-md: 0 8px 28px rgba(37, 30, 77, 0.10); --shadow-pop: 0 10px 30px rgba(106, 72, 240, 0.16); color-scheme: light; } /* -------------------------------------------------------------------------- Smooth theme transitions on color-bearing properties -------------------------------------------------------------------------- */ html, body, nav, .nav-glass, .service-card, .contact-form-card, .contact-input, .mobile-menu, .ty-overlay, .ty-card, .gradient-line, footer, a, button, input, textarea, .nav-link, [class*="bg-surface"], [class*="bg-white"], [class*="border-white"] { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* -------------------------------------------------------------------------- Base — body / scrollbars / selection These use !important so they override per-page inline