/* ========================================================================== Design tokens The single source of truth. Nothing else in this theme hard-codes a colour, a font stack, or a spacing value. The idea behind the palette: a chandelier is only ever beautiful as light against dark. So the site has two moods, and they alternate deliberately - deep "night" sections where crystal photography glows, and bright "alabaster" sections where the catalogue reads cleanly like modern retail. ========================================================================== */ :root { /* --- Ink: the dark mood. Cool, near-black, never flat #000, which kills the sense of depth behind a product shot. ------------------------- */ --lb-ink: #0b0d12; --lb-ink-raised: #12151d; --lb-ink-soft: #1b1f29; --lb-ink-line: #2a2f3b; /* --- Alabaster: the light mood. Warm, so it reads as stone and paper rather than as a default white screen. ---------------------------- */ --lb-alabaster: #fbfaf7; --lb-bone: #f2eee5; --lb-bone-line: #e3ddd0; /* --- Champagne gold. Restrained: hairlines, small caps, focus rings. Large gold fills read as costume jewellery, not crystal. ---------- */ --lb-gold: #c7a461; --lb-gold-bright: #e6cf9b; --lb-gold-deep: #7f6230; /* --- Crystal: the cool refracted highlight. Used for glows and for the thin prism gradient, never as a surface colour. ------------------- */ --lb-crystal: #dce6f0; --lb-crystal-cool: #a9c4dd; /* --- Text ---------------------------------------------------------- */ --lb-text: #1a1d24; --lb-text-muted: #62666f; --lb-text-on-ink: #ece9e2; --lb-text-on-ink-muted: #9aa0ad; /* --- Semantic surface roles. Sections flip these values and every component below inherits the right colours automatically. The page default is light. An all-ink site sounds right for crystal photography and is wrong in practice: the catalogue images carry their own near-black backgrounds, so on an ink page every product dissolved into the surface it sat on. Light ground with dark plinths under the photography inverts that — the object is the only dark shape in a bright field, which is what a showroom does with a spotlit piece. Ink is now reserved for the set pieces: hero, showpiece, close, header and footer. --------------------------------------------- */ --lb-surface: var(--lb-bone); --lb-on-surface: var(--lb-text); --lb-on-surface-muted: var(--lb-text-muted); --lb-rule: var(--lb-bone-line); /* Gold has to change value with the ground under it. The champagne tone is legible on ink and nearly invisible on alabaster, so light surfaces take the deep tone and dark surfaces the bright one. Components use --lb-accent and stop caring which mood they are in. */ --lb-accent: var(--lb-gold-deep); /* One step off the current surface, in whichever direction that surface is. Panels that need to sit slightly proud of the page — notices, the note aside, the product stage — ask for this instead of naming an ink value, which is what left the cart's "Coșul tău este gol" as #1a1d24 type on a #12151d panel once the page went light. */ --lb-raised: var(--lb-alabaster); /* Native controls follow the ground they sit on. Selects, date pickers and scrollbars inside a section are painted by the browser, not by this stylesheet, and the only way to tell it which way to paint them is color-scheme. Setting it per mood here is what stops a select rendering dark-on-dark the moment a form moves to a light section. */ color-scheme: light; /* --- Type ---------------------------------------------------------- Cormorant Garamond: high-contrast old-style serif. The thin strokes are the point - they echo the drawn glass. Inter for anything the eye has to work through quickly (specs, nav, buttons). */ --lb-font-display: "Cormorant Garamond", "Iowan Old Style", Garamond, "Times New Roman", serif; --lb-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fluid scale, 320px -> 1600px viewport. */ --lb-size-display: clamp(2.5rem, 1.5rem + 4.6vw, 5rem); --lb-size-h1: clamp(2.25rem, 1.3rem + 4.7vw, 4.25rem); --lb-size-h2: clamp(1.75rem, 1.2rem + 2.8vw, 3rem); --lb-size-h3: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); --lb-size-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --lb-size-small: 0.8125rem; --lb-size-micro: 0.6875rem; --lb-tracking-eyebrow: 0.22em; --lb-tracking-display: -0.015em; --lb-leading-display: 1.12; --lb-leading-body: 1.7; /* --- Space. A geometric-ish scale; luxury layouts breathe. --------- */ --lb-space-2xs: 0.25rem; --lb-space-xs: 0.5rem; --lb-space-sm: 0.875rem; --lb-space-md: 1.5rem; --lb-space-lg: 1.875rem; --lb-space-xl: 2.25rem; --lb-space-2xl: 3.25rem; --lb-space-3xl: clamp(2.75rem, 2rem + 2.2vw, 4.25rem); --lb-container: 1340px; --lb-container-text: 68ch; /* --- Motion. Slow and eased. Hurried animation reads as cheap; the whole brand argument is that these objects took months to make. --- */ --lb-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --lb-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lb-dur-fast: 240ms; --lb-dur: 460ms; --lb-dur-slow: 900ms; /* --- Elevation. Shadows are warm-neutral and very soft; hard drop shadows fight the diffuse light a chandelier actually casts. ------ */ --lb-shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.04), 0 4px 12px rgba(11, 13, 18, 0.04); --lb-shadow-md: 0 2px 6px rgba(11, 13, 18, 0.05), 0 18px 40px rgba(11, 13, 18, 0.07); --lb-shadow-lg: 0 4px 12px rgba(11, 13, 18, 0.06), 0 40px 80px rgba(11, 13, 18, 0.10); /* The prism: a hairline that catches colour like a cut edge. Kept to 1px rules and small accents - at any larger size it stops being refraction and starts being a rainbow. */ --lb-prism: linear-gradient(90deg, transparent 0%, rgba(199, 164, 97, 0.55) 18%, rgba(220, 230, 240, 0.85) 38%, rgba(169, 196, 221, 0.60) 52%, rgba(230, 207, 155, 0.75) 72%, transparent 100%); --lb-radius-sm: 2px; --lb-radius: 3px; } /* Phones and tablets: the two smallest steps grow by about a pixel and a half. Astra sets the root size to 14.592px rather than the browser's 16px, so 0.8125rem came out at 11.9px and 0.6875rem at 10px. Fine under a mouse on a large screen, too small at arm's length on a phone. Desktop keeps the values above; 60rem is where Astra switches to its phone header. */ @media (max-width: 60rem) { :root { --lb-size-small: 0.9rem; --lb-size-micro: 0.78rem; } } /* The dark mood, and now a genuine flip again rather than a half-step. The two full-bleed set pieces and the site furniture are listed here so their descendants inherit ink colours without each component special-casing. */ .lb-on-ink, .lb-hero, .lb-showpiece, .site-header, .ast-main-header-wrap, .ast-mobile-header-wrap, .site-footer, .lb-footer, /* The whole catalogue is ink, end to end: listings and product pages alike. An earlier version kept light chrome on the archives, on the reasoning that a customer there is scanning and sorting rather than looking. In practice that put a band of alabaster above a band of ink on every listing page and the two never resolved into one design. Where the products are, the page is dark — the same rule as the front page, applied without exception. Cart and checkout are deliberately absent from this list. They are forms where somebody types an address and card details, and light is easier to read and to fill in; consistency is not worth a lost order. */ body.single-product .site-content, body.woocommerce-shop .site-content, body.post-type-archive-product .site-content, body.tax-product_cat .site-content, body.tax-product_tag .site-content, body.woocommerce-page.search-results .site-content { --lb-surface: var(--lb-ink); --lb-on-surface: var(--lb-text-on-ink); --lb-on-surface-muted: var(--lb-text-on-ink-muted); --lb-rule: var(--lb-ink-line); --lb-accent: var(--lb-gold-bright); --lb-raised: var(--lb-ink-raised); /* Astra's palette has to flip here too, and this is the only place it can be done without a specificity war. Astra styles its own components with selectors like `.ast-builder-menu-1 .menu-item > .menu-link` (0,3,0) and `.ast-site-identity .site-title a` (0,2,1), both of which outrank this theme's `.site-header a` at (0,1,1) — so overriding the colour loses, but redefining the variable those rules resolve *through* wins for free. Repointing the global bridge to the light palette (correct for page content) is what turned the header's own links and wordmark near-black on ink. The bridge stays light; ink contexts re-flip it locally. */ --ast-global-color-0: var(--lb-gold-bright); --ast-global-color-2: var(--lb-text-on-ink); --ast-global-color-3: var(--lb-text-on-ink); --ast-global-color-4: var(--lb-ink); --ast-global-color-5: var(--lb-ink-raised); --ast-global-color-6: var(--lb-ink-line); --ast-border-color: var(--lb-ink-line); color-scheme: dark; background-color: var(--lb-surface); color: var(--lb-on-surface); } /* The element behind everything, on a page that is ink end to end. The content area already paints itself, but is what shows through when the viewport is taller than the content, and on an elastic scroll at the top or bottom of the page — so without this a product page flashes alabaster at its edges. */ body.single-product, body.woocommerce-shop, body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body.woocommerce-page.search-results { background-color: var(--lb-ink); } /* The second light tone. Two light sections in a row need separating, and a rule between them is the crude way to do it — bone against alabaster is a step the eye reads as structure without any line being drawn. */ .lb-on-bone { --lb-surface: var(--lb-bone); --lb-on-surface: var(--lb-text); --lb-on-surface-muted: var(--lb-text-muted); --lb-rule: var(--lb-bone-line); --lb-accent: var(--lb-gold-deep); --lb-raised: var(--lb-alabaster); color-scheme: light; background-color: var(--lb-surface); color: var(--lb-on-surface); } /* Retained as an explicit opt-in for anything sitting inside an ink section that needs to come back to paper — long legal prose, print stylesheets. */ .lb-on-light { --lb-surface: var(--lb-alabaster); --lb-on-surface: var(--lb-text); --lb-on-surface-muted: var(--lb-text-muted); --lb-rule: var(--lb-bone-line); --lb-accent: var(--lb-gold-deep); --lb-raised: var(--lb-bone); background-color: var(--lb-surface); color: var(--lb-on-surface); } /* ========================================================================== Astra bridge Astra generates its own stylesheet from Customizer settings and paints it through --ast-global-color-0..8. Those rules frequently carry a class selector (.ast-page-builder-template, .ast-separate-container, .ast-button and so on), which outranks a plain element selector here - so overriding Astra one component at a time is a losing game. Re-pointing Astra's own variables instead means Astra's generated CSS produces the Lustre Bohemia palette everywhere it already works: the Customizer, block colour pickers, and any Astra component this theme has not explicitly styled. tokens.css loads after Astra's inline CSS, so these win on source order at equal specificity. Astra's roles, in its own order: 0 accent 1 accent-hover 2 heading 3 body text 4 background 5 alt background 6 border 7-8 extra surfaces ========================================================================== */ :root { /* Re-pointed to the light palette along with the rest of the site. These were still the ink values, and Astra paints WordPress content with them: its rule is `.entry-content :where(h1, h2, ...)`, and because :where() contributes no specificity of its own the `.entry-content` class still does — (0,1,0) — which outranks this theme's plain `h1, h2, ...` at (0,0,1) no matter what order they load in. The visible result was that every legal page rendered its headings in #ece9e2 on alabaster, a contrast ratio of 1.16, so the whole of Retur, Garanție, Termeni and the GDPR pages had invisible section headings. The theme's own sections were unaffected, because none of them sit inside .entry-content — which is exactly why it went unnoticed. */ --ast-global-color-0: var(--lb-gold-deep); --ast-global-color-1: var(--lb-gold); --ast-global-color-2: var(--lb-text); --ast-global-color-3: var(--lb-text); --ast-global-color-4: var(--lb-bone); --ast-global-color-5: var(--lb-bone); --ast-global-color-6: var(--lb-bone-line); /* 7 and 8 are left at Astra's own values on purpose. Astra derives --ast-border-color from --ast-global-color-7, so pointing 7 at an ink colour turned every border Astra draws - tables, inputs, separators, the spec sheet - near-black. Where a specific Astra token is needed, set that token directly, as with --ast-border-color below, rather than moving a palette slot whose full set of consumers is unknown. */ --ast-border-color: var(--lb-bone-line); /* Deliberately NOT overriding --ast-global-color-primary / --ast-global-color-secondary. Their names suggest text colours, but Astra uses them as SURFACE colours - .ast-primary-header-bar resolves its background from --ast-global-color-primary. Pointing them at a text colour turns the header near-black. Only the documented numbered palette above is safe to re-point. */ } /* Astra paints the page-builder and plain containers from color-4. With the bridge above that is already correct, but state it explicitly so the page background does not depend on which Astra layout the template resolves to. */ .ast-page-builder-template, .ast-plain-container, .ast-separate-container, .site, #content, .site-content { background-color: var(--lb-surface); }