/* =================================================================== METANOIA LUSTRA LED - Design Tokens Foundations: colour + typography "ODBICIE TWOJEGO STYLU" ------------------------------------------------------------------- Base brand constants (DO NOT CHANGE - from existing identity): Brand / accent #a58a71 (ciepły taupe / karmel) Body text #7f7163 (przygaszony brąz) Headings #524541 (ciemne espresso) Background #F8F5F1 (ciepła kremowa biel) Heading font Playfair Display Body font Lato Everything else is built around these values. =================================================================== */ /* Fonts are loaded from Google Fonts in each HTML file: subset=latin-ext guarantees full Polish diacritic support (ą ć ę ł ń ó ś ż ź). */ :root { /* --------------------------------------------------------------- 1. COLOUR - BRAND (taupe / karmel) anchor 500 = #a58a71 --------------------------------------------------------------- */ --brand-50: #f6f1ec; --brand-100: #ece2d8; --brand-200: #dccabb; --brand-300: #c9b09a; --brand-400: #b79d83; --brand-500: #a58a71; /* BASE brand / accent */ --brand-600: #8f745c; --brand-700: #745d49; --brand-800: #574639; --brand-900: #3b2f27; /* --------------------------------------------------------------- 2. COLOUR - TEXT (przygaszony brąz) anchor 500 = #7f7163 --------------------------------------------------------------- */ --text-50: #f3f0ec; --text-100: #e3ddd5; --text-200: #cbc1b5; --text-300: #ada093; --text-400: #948576; --text-500: #7f7163; /* BASE body text */ --text-600: #685c50; --text-700: #51473e; --text-800: #3a332d; --text-900: #25201c; /* --------------------------------------------------------------- 3. COLOUR - HEADINGS (ciemne espresso) anchor 500 = #524541 --------------------------------------------------------------- */ --head-50: #efeae8; --head-100: #d8cfcb; --head-200: #b3a6a0; --head-300: #8c7c75; --head-400: #6b5b54; --head-500: #524541; /* BASE headings */ --head-600: #443a36; --head-700: #352d2a; --head-800: #261f1d; --head-900: #171211; /* --------------------------------------------------------------- 4. COLOUR - SAND / NEUTRAL (background scale) anchor 100 = #F8F5F1 50 = paper white, 100 = brand cream, going darker into warm sand --------------------------------------------------------------- */ --sand-50: #fdfcfa; --sand-100: #F8F5F1; /* BASE background - ciepła kremowa biel */ --sand-200: #efe9e1; --sand-300: #e3dacd; --sand-400: #d2c6b5; --sand-500: #b8a890; --sand-600: #9c8a70; --sand-700: #7a6b55; --sand-800: #54493a; --sand-900: #2f281f; /* --------------------------------------------------------------- 5. COLOUR - ACCENTS --------------------------------------------------------------- */ --champagne: #c9a86a; /* szampański - nawiązanie do złotych ram */ --champagne-soft: #e4cfa3; /* light champagne wash */ --led-glow: #f5d9a8; /* ciepła poświata LED (fill / halo) */ --led-glow-core: #fff3df; /* gorący rdzeń światła */ --link: #7d5d3c; /* karmel link - AA on cream (5.52:1) */ --link-hover: #5f4628; /* darker on hover */ /* --------------------------------------------------------------- 6. COLOUR - LIGHT TEMPERATURE (identity element) perceptual swatches of the LED COB colour temperatures --------------------------------------------------------------- */ --temp-3000k: #FFD9A6; /* ciepła - warm white */ --temp-4500k: #FFF4E8; /* neutralna - neutral white */ --temp-6000k: #EAF1FA; /* zimna - cool white */ /* --------------------------------------------------------------- 7. COLOUR - STATUS (stonowane, dopasowane do palety) --------------------------------------------------------------- */ --success: #6f8c5e; --success-bg: #eef2e8; --success-fg: #41552f; --error: #b5524b; --error-bg: #f7e9e7; --error-fg: #7e352f; --warning: #c89a4a; --warning-bg: #f7efde; --warning-fg: #7c5c20; --info: #5f7d8c; --info-bg: #e8eef1; --info-fg: #3a525d; /* --------------------------------------------------------------- 8. SEMANTIC ALIASES --------------------------------------------------------------- */ --bg: var(--sand-100); --bg-elevated: var(--sand-50); --bg-sunken: var(--sand-200); --bg-inverse: var(--head-500); --fg: var(--text-500); /* body copy */ --fg-strong: var(--head-500); /* headings */ --fg-muted: var(--text-400); --fg-on-dark: var(--sand-50); --accent: var(--brand-500); --accent-strong: var(--brand-700); /* use behind white text */ --border: var(--sand-300); --border-strong: var(--brand-300); /* --------------------------------------------------------------- 9. TYPOGRAPHY - families --------------------------------------------------------------- */ --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif; --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Type scale - base 16px, ratio 1.25 (major third) Adjust --type-base / regenerate the steps to retune the whole scale. */ --type-base: 16px; /* RATIO 1.25 */ --fs-h1: 3.052rem; /* 48.8px */ --fs-h2: 2.441rem; /* 39.1px */ --fs-h3: 1.953rem; /* 31.3px */ --fs-h4: 1.563rem; /* 25.0px */ --fs-h5: 1.25rem; /* 20.0px */ --fs-h6: 1.125rem; /* 18.0px */ --fs-body-lg: 1.125rem; /* 18px lead paragraph */ --fs-body: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px */ --fs-caption: 0.75rem; /* 12px */ --fs-button: 0.9375rem;/* 15px */ /* weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* line-heights */ --lh-tight: 1.12; /* display headings */ --lh-snug: 1.3; /* sub headings */ --lh-body: 1.65; /* paragraphs */ --lh-ui: 1.4; /* compact UI */ /* letter-spacing */ --ls-display: -0.01em; /* large Playfair */ --ls-normal: 0em; --ls-eyebrow: 0.22em; /* uppercase overlines, echoes the wordmark */ --ls-button: 0.08em; --ls-wordmark:0.35em; /* METANOIA logotype tracking */ /* --------------------------------------------------------------- 10. SPACING - base 4px, 8px rhythm --------------------------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 2.5rem; /* 40 */ --sp-8: 3rem; /* 48 */ --sp-9: 4rem; /* 64 */ --sp-10: 5rem; /* 80 */ --sp-11: 6rem; /* 96 */ --sp-12: 8rem; /* 128 */ /* --------------------------------------------------------------- 11. RADII --------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 24px; --radius-pill: 999px; /* mirror-oval shape language */ --radius-circle: 50%; /* --------------------------------------------------------------- 12. ELEVATION / SHADOWS (soft, warm, low-contrast) --------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(82,69,65,0.06); --shadow-sm: 0 2px 6px rgba(82,69,65,0.08); --shadow-md: 0 6px 18px rgba(82,69,65,0.10); --shadow-lg: 0 16px 40px rgba(82,69,65,0.13); --shadow-xl: 0 28px 70px rgba(82,69,65,0.16); /* LED GLOW - signature warm halo behind mirrors / hero accents */ --glow-sm: 0 0 18px 2px rgba(245,217,168,0.55); --glow-md: 0 0 40px 6px rgba(245,217,168,0.65); --glow-lg: 0 0 90px 18px rgba(255,243,223,0.75); /* --------------------------------------------------------------- 13. LAYOUT --------------------------------------------------------------- */ --container: 1440px; --container-narrow: 760px; --gutter: var(--sp-5); /* Breakpoints (mobile-first) - for reference / JS: sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* --------------------------------------------------------------- 14. MOTION (calm, never bouncy) --------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0.0, 1, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; } /* =================================================================== BASE / SEMANTIC ELEMENT STYLES =================================================================== */ .metanoia-type { color: var(--fg); font-family: var(--font-body); } h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--fg-strong); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); } h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: var(--fw-medium); } h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); font-weight: var(--fw-medium); } p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); margin: 0 0 1em; text-wrap: pretty; } .lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-600); } small, .small { font-size: var(--fs-small); line-height: var(--lh-ui); } .caption{ font-size: var(--fs-caption); line-height: var(--lh-ui); color: var(--fg-muted); letter-spacing: 0.02em; } /* eyebrow / overline - uppercase, wide-tracked, echoes the wordmark */ .eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--brand-600); } a, .link { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent); transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } a:hover, .link:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); } .btn-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-button); letter-spacing: var(--ls-button); text-transform: uppercase; }