/* ============================================================ PROP A PROP TEU — THEME Everything about the site's look lives in this file. Change these variables and the whole site follows. ============================================================ */ :root { /* ---- BRAND COLORS ---- */ --color-bg: #f2efe8; /* soft cream-gray page background */ --color-surface: #ffffff; /* cards, panels */ --color-ink: #1b1b19; /* main text, near-black like logo strokes */ --color-muted: #6d6c67; /* secondary text */ --color-line: #e4e2dc; /* borders, rules */ --color-accent: #ff5200; /* ORANGE */ --color-accent-ink: #ffffff; /* text on top of accent */ --color-accent-dark: #d94500; /* hover state of orange */ --color-accent2: #c431d0; /* LILA */ --color-accent2-dark: #9c26a6; /* hover state of lila */ --color-accent3: #00b4b4; /* TURQUOISE */ /* ---- BADGE COLORS (product types) ---- */ --color-badge-own: var(--color-accent); /* "own design" badge = orange */ --color-badge-std: var(--color-accent3); /* "standard product" badge = turquoise */ --color-badge-tool: #1b1b19; /* "tool" badge = ink black */ /* ---- STATUS ---- */ --color-ok: var(--color-accent3); /* "in stock" = turquoise */ --color-warn: #b07716; --color-out: #8a8378; /* ---- TYPOGRAPHY ---- */ /* Display: condensed poster type. Body: clean sans. */ --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* ---- SHAPES ---- */ --radius: 3px; /* corner rounding everywhere */ --radius-img: 3px; /* product image corners */ --border-w: 1px; --shadow-card: 0 1px 3px rgba(32, 29, 24, 0.08); --shadow-hover: 0 4px 14px rgba(32, 29, 24, 0.14); /* ---- LOGO ---- */ /* Icon mark + horizontal wordmark heights in the (centered) header. Tweak these two to scale the whole brand block up or down. */ --logo-height: 92px; --wordmark-height: 74px; /* ---- LAYOUT ---- */ --max-width: 1200px; --header-height: 150px; /* approx height of the centered brand + nav header (sticky offset) */ } /* ---- OPTIONAL DARK THEME ---- To try a "dark theater" look, uncomment this block and add class="theme-dark" to the tag of every page. html.theme-dark { --color-bg: #17140f; --color-surface: #221e17; --color-ink: #f0e9dc; --color-muted: #a89e8d; --color-line: #3a352b; --color-accent: #e0a83c; --color-accent-ink: #17140f; --color-accent-dark:#c08c26; --shadow-card: 0 1px 3px rgba(0,0,0,0.4); --shadow-hover: 0 4px 14px rgba(0,0,0,0.5); } */