/* ============================================================================= Bio Lotus — Theme Stylesheet Design tokens, typography, global utilities, header / footer skeletons. Design system source: bio-lotus-second-attempt/project/theme-tokens.jsx Default palette: Sauge & Argile (as finalised in chat2.md) ============================================================================= */ /* ── 1. DESIGN TOKENS ──────────────────────────────────────────────────────── */ :root { /* Typography */ --bl-font-serif: 'Cormorant Garamond', Georgia, serif; --bl-font-sans: 'Jost', system-ui, sans-serif; --bl-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Sauge & Argile palette (default) */ --bl-bg: #F2F0E6; --bl-bg-alt: #E4E0D0; --bl-bg-section: #D4D0BC; --bl-bg-dark: #1C1C14; --bl-accent: #5C6E50; --bl-accent-soft: #E0E8D8; --bl-bold: #7A4830; --bl-bold-soft: #EAD8CC; --bl-text: #1C1C14; --bl-text-mid: #4A4A38; --bl-text-faint: #7A7A68; --bl-line: #C4C0A8; --bl-surface: #FAFAF0; --bl-footer-text: #E8E4D4; --bl-footer-muted: rgba(232, 228, 212, 0.42); /* Layout */ --bl-max-width: 1400px; --bl-padding-x: clamp(20px, 4vw, 48px); /* Header heights (promo banner + main nav) */ --bl-banner-h: 36px; --bl-nav-h: 72px; --bl-header-h: calc(var(--bl-banner-h) + var(--bl-nav-h)); /* 108px */ } /* ── 2. GLOBAL RESET LAYER ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bl-bg); color: var(--bl-text); font-family: var(--bl-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Blocksy may inject padding-top on for its own sticky header via --theme-headerHeight. We use our own sticky stack, so force it to zero. */ html body { padding-top: 0 !important; } /* Suppress any Blocksy sticky-header spacer or notification-bar elements that may be injected by blocksy:header:before / blocksy:header:after hooks. */ .ct-header-spacer, [data-id="spacer"], .blocksy-before-header-content { display: none !important; height: 0 !important; } em { font-style: italic; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--bl-accent); text-decoration: none; transition: color 180ms var(--bl-ease); } a:hover { color: var(--bl-bold); } button { font-family: inherit; cursor: pointer; } input, textarea { font-family: inherit; } input::placeholder, textarea::placeholder { color: inherit; opacity: 0.45; } /* Slim scrollbar matching design */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: #C4B090; border-radius: 0; } ::-webkit-scrollbar-track { background: transparent; } /* ── 3. TYPOGRAPHY OVERRIDES (Blocksy baseline) ─────────────────────────── */ /* Give headings Cormorant Garamond so every h-tag in WP content inherits it */ h1, h2, h3, h4, h5, h6 { font-family: var(--bl-font-serif); font-weight: 300; letter-spacing: 0.02em; line-height: 1.1; color: var(--bl-text); } /* ── 4. LAYOUT CONTAINER ────────────────────────────────────────────────── */ .bl-container { max-width: var(--bl-max-width); margin-inline: auto; padding-inline: var(--bl-padding-x); } /* ── 5. SECTION-RULE COMPONENT ──────────────────────────────────────────── */ /* Numbered eyebrow ──────────── label (from SectionRule in tokens.jsx) */ .bl-section-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .bl-section-rule__num { font-family: var(--bl-font-sans); font-size: 10px; letter-spacing: 0.22em; color: var(--bl-text); font-weight: 500; flex-shrink: 0; } .bl-section-rule__line { flex: 1; height: 1px; background: var(--bl-text); opacity: 0.18; } .bl-section-rule__label { font-family: var(--bl-font-sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bl-text-faint); white-space: nowrap; flex-shrink: 0; } /* ── 6. BUTTON COMPONENTS ────────────────────────────────────────────────── */ /* Primary — filled bold colour, flat rectangle (no pill, no radius) */ .bl-btn-primary, .bl-btn-primary:visited { display: inline-flex; align-items: center; gap: 10px; background: var(--bl-bold); color: #FDFAF2; border: none; padding: 16px 36px; border-radius: 2px; font-family: var(--bl-font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 200ms var(--bl-ease), box-shadow 200ms var(--bl-ease); white-space: nowrap; } .bl-btn-primary:hover { background: #623A26; box-shadow: 0 10px 26px rgba(60, 38, 16, 0.32); color: #FDFAF2; } .bl-btn-primary .bl-icon { margin-inline-start: 2px; } /* Ghost — underline link style */ .bl-btn-ghost, .bl-btn-ghost:visited { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0 0 2px; border-bottom: 1px solid rgba(28, 18, 7, 0.4); font-family: var(--bl-font-sans); font-size: 12px; letter-spacing: 0.08em; color: var(--bl-text); font-weight: 500; text-decoration: none; transition: border-color 200ms var(--bl-ease), color 200ms var(--bl-ease); } .bl-btn-ghost:hover { border-color: var(--bl-text); color: var(--bl-text); } /* Outline — bordered, no fill */ .bl-btn-outline, .bl-btn-outline:visited { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--bl-line); padding: 11px 22px; border-radius: 0; font-family: var(--bl-font-sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-text); text-decoration: none; transition: border-color 200ms var(--bl-ease), background 200ms var(--bl-ease), color 200ms var(--bl-ease); } .bl-btn-outline:hover { border-color: var(--bl-accent); background: var(--bl-accent-soft); color: var(--bl-text); } /* ── 7. ICON UTILITY ─────────────────────────────────────────────────────── */ .bl-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } /* ── 8. STAR RATING ─────────────────────────────────────────────────────── */ .bl-stars { display: flex; align-items: center; gap: 3px; } .bl-stars svg { fill: var(--bl-accent); } /* ── 9. FADE-IN ANIMATION ────────────────────────────────────────────────── */ /* JS adds .is-visible when element enters the viewport */ .bl-fade-in { opacity: 0; transform: translateY(20px); transition: opacity 650ms var(--bl-ease), transform 650ms var(--bl-ease); } .bl-fade-in.is-visible { opacity: 1; transform: translateY(0); } /* Staggered delays for children */ .bl-fade-in[data-delay="100"] { transition-delay: 100ms; } .bl-fade-in[data-delay="200"] { transition-delay: 200ms; } .bl-fade-in[data-delay="300"] { transition-delay: 300ms; } /* ── 10. PHOTO-ZONE PLACEHOLDER ──────────────────────────────────────────── */ .bl-photo-zone { background: linear-gradient(155deg, #D4B898 0%, #C0A07A 100%); position: relative; overflow: hidden; } .bl-photo-zone img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ── 11. PROMO BANNER ────────────────────────────────────────────────────── */ /* 36px dark strip that sticks to the top of the viewport. Blocksy's sticky header sits below it via .site-header { top: var(--bl-banner-h) }. */ .bl-promo-banner { background: var(--bl-bg-dark); height: var(--bl-banner-h); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 var(--bl-padding-x); border-bottom: 1px solid rgba(196, 192, 168, 0.15); position: sticky; top: 0; z-index: 400; } .bl-promo-banner__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bl-accent); flex-shrink: 0; } .bl-promo-banner__msg-primary { font-family: var(--bl-font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bl-footer-text); font-weight: 500; white-space: nowrap; } .bl-promo-banner__msg-secondary { font-family: var(--bl-font-serif); font-style: italic; font-size: 13px; color: rgba(240, 229, 206, 0.55); letter-spacing: 0.03em; white-space: nowrap; } /* Language switcher — right side of the banner */ .bl-lang-switcher { position: absolute; top: 0; bottom: 0; inset-inline-end: var(--bl-padding-x); display: flex; align-items: center; gap: 2px; } .bl-lang-switcher__btn { background: none; border: none; padding: 4px 8px; font-family: var(--bl-font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; color: rgba(240, 229, 206, 0.55); transition: color 180ms var(--bl-ease); line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; } .bl-lang-switcher__btn[lang="ar"] { font-size: 14px; letter-spacing: 0.02em; } .bl-lang-switcher__btn.is-active, .bl-lang-switcher__btn:hover, .bl-lang-switcher__btn[aria-current="page"] { color: var(--bl-accent); } .bl-lang-switcher__divider { width: 1px; height: 11px; background: rgba(240, 229, 206, 0.22); } /* ── 12. CUSTOM SITE HEADER ──────────────────────────────────────────────── */ /* We render our own header markup (.bl-site-header) via wp_body_open priority 5. Blocksy's native header is hidden below so only ours shows. */ /* Hide ALL of Blocksy's native header — wide net to catch every version. Our .bl-site-header uses none of these selectors, so it is never affected. */ header[id="header"], header[data-id="header"], header.site-header, .ct-header, .ct-header-wrap, .ct-header-row, .ct-header-content { display: none !important; } /* Our header: sticky directly below the promo banner. */ .bl-site-header { position: sticky; top: var(--bl-banner-h); z-index: 399; background: var(--bl-surface); border-bottom: 1px solid var(--bl-line); height: var(--bl-nav-h); transition: background 300ms var(--bl-ease), border-color 300ms var(--bl-ease), backdrop-filter 300ms var(--bl-ease); } /* ── Hero-page transparency ────────────────────────────────────────────────── When body.bl-has-hero is present (added by PHP body_class filter), the header starts transparent so the hero image shows through it. The CSS body class is set server-side so there is no JS-timing flash. theme.js adds body.bl-hero-scrolled once the user has scrolled past the hero, switching the header back to opaque. */ body.bl-has-hero .bl-site-header { background: rgba(250, 250, 240, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: transparent; } body.bl-has-hero.bl-hero-scrolled .bl-site-header { background: var(--bl-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--bl-line); } /* Header also turns opaque while hovered or while the mega-dropdown is open (body.bl-mega-open is toggled by header.js), so menu labels and the panel always sit on a readable surface — even at the very top of the hero. :has(:focus-visible) (not :focus-within) — a mouse click on the dark-mode toggle leaves focus inside the header and must NOT pin it opaque; only keyboard navigation should. */ body.bl-has-hero .bl-site-header:hover, body.bl-has-hero .bl-site-header:has(:focus-visible), body.bl-has-hero.bl-mega-open .bl-site-header { background: var(--bl-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--bl-line); } .bl-site-header__container { height: 100%; display: flex; align-items: center; gap: 32px; } /* Logo */ .bl-site-header__logo { text-decoration: none; display: inline-flex; align-items: center; } .bl-site-header__logo .custom-logo, .bl-site-header__logo img { max-height: 44px; width: auto; display: block; } .bl-site-header__logo-text { font-family: var(--bl-font-serif); font-style: italic; font-weight: 300; font-size: 26px; letter-spacing: 0.04em; color: var(--bl-text); line-height: 1; } /* Primary nav — flex:1 lets it expand and push actions to the far right */ .bl-site-header__nav { flex: 1; min-width: 0; display: flex; justify-content: center; } .bl-site-header__menu { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; } .bl-site-header__menu > li > a { font-family: var(--bl-font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bl-text-mid); text-decoration: none; font-weight: 500; transition: color 180ms var(--bl-ease); padding: 8px 0; display: inline-block; } .bl-site-header__menu > li > a:hover, .bl-site-header__menu > li.current-menu-item > a, .bl-site-header__menu > li.current-menu-ancestor > a { color: var(--bl-accent); } /* Right actions — flex-shrink:0 keeps them on the same row as the nav */ .bl-site-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .bl-site-header__action { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--bl-text-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 180ms var(--bl-ease), color 180ms var(--bl-ease); position: relative; text-decoration: none; padding: 0; } .bl-site-header__action:hover, .bl-site-header__action:focus-visible { background: rgba(28, 28, 20, 0.06); color: var(--bl-text); outline: none; } .bl-site-header__cart .bl-cart-count { position: absolute; top: 2px; inset-inline-end: 2px; background: var(--bl-accent); color: #FDFAF2; font-family: var(--bl-font-sans); font-size: 9px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 999px; min-width: 16px; text-align: center; display: inline-flex; align-items: center; justify-content: center; } .bl-site-header__cart .bl-cart-count[hidden] { display: none; } /* Social icon cluster in header — separated from utility icons */ .bl-site-header__socials { display: flex; align-items: center; gap: 2px; padding-inline-start: 10px; margin-inline-start: 4px; border-inline-start: 1px solid rgba(28, 28, 20, 0.12); } /* Mobile burger — hidden on desktop */ .bl-site-header__burger { display: none; } /* Mobile nav drawer (off-screen by default) */ .bl-mobile-nav { position: fixed; inset: 0; background: var(--bl-surface); z-index: 500; transform: translateY(-100%); visibility: hidden; transition: transform 280ms var(--bl-ease), visibility 0ms 280ms; padding: 24px var(--bl-padding-x) 32px; overflow-y: auto; } .bl-mobile-nav.is-open { transform: translateY(0); visibility: visible; transition: transform 280ms var(--bl-ease), visibility 0ms 0ms; } .bl-mobile-nav__head { display: flex; justify-content: flex-end; margin-bottom: 24px; } .bl-mobile-nav__close { background: transparent; border: none; width: 40px; height: 40px; cursor: pointer; color: var(--bl-text); display: inline-flex; align-items: center; justify-content: center; } .bl-mobile-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .bl-mobile-nav__menu li a { font-family: var(--bl-font-serif); font-style: italic; font-weight: 300; font-size: 28px; color: var(--bl-text); text-decoration: none; padding: 12px 0; display: block; border-bottom: 1px solid var(--bl-line); } .bl-mobile-nav__menu li a:hover { color: var(--bl-accent); } /* Social links row at foot of mobile nav drawer */ .bl-mobile-nav__socials { display: flex; gap: 12px; padding-top: 24px; margin-top: 20px; border-top: 1px solid var(--bl-line); } .bl-mobile-nav__social { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bl-text-mid); border: 1px solid var(--bl-line); text-decoration: none; transition: color 180ms var(--bl-ease), border-color 180ms var(--bl-ease); } .bl-mobile-nav__social:hover, .bl-mobile-nav__social:focus-visible { color: var(--bl-text); border-color: var(--bl-text); outline: none; } /* Responsive — hide desktop nav, show burger */ @media (max-width: 900px) { .bl-site-header__container { grid-template-columns: auto 1fr auto; gap: 16px; } .bl-site-header__nav { display: none; } .bl-site-header__burger { display: inline-flex; flex-direction: column; gap: 5px; background: transparent; border: none; width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center; cursor: pointer; } .bl-site-header__burger span { display: block; width: 20px; height: 1.5px; background: var(--bl-text); transition: background 200ms var(--bl-ease); } .bl-site-header .bl-lang-switcher { display: none; /* moved to mobile nav drawer if needed */ } /* Hide social cluster in header on mobile — shown in mobile nav + footer */ .bl-site-header__socials { display: none; } } @media (max-width: 640px) { .bl-site-header__logo .custom-logo, .bl-site-header__logo img { max-height: 36px; } .bl-site-header__logo-text { font-size: 22px; } .bl-site-header__action { width: 36px; height: 36px; } } /* Padding top for pages so body content clears the fixed/sticky header stack */ body:not(.page-template-page-fullscreen) .site-main { padding-top: 0; /* Blocksy handles scroll offset internally */ } /* ── 13. FOOTER OVERRIDES (Blocksy) ──────────────────────────────────────── */ /* Override Blocksy footer with the design's dark footer */ .site-footer { background: var(--bl-bg-dark) !important; border-top: 1px solid var(--bl-line); color: var(--bl-footer-text); } .site-footer a, .site-footer .ct-footer-link { color: var(--bl-footer-muted); transition: color 180ms var(--bl-ease); } .site-footer a:hover, .site-footer .ct-footer-link:hover { color: var(--bl-footer-text); } /* Footer widget title override */ .site-footer .widget-title, .site-footer .ct-widget-title { font-family: var(--bl-font-sans) !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--bl-accent) !important; margin-bottom: 20px !important; } /* Footer brand block */ .bl-footer-brand .site-name { font-family: var(--bl-font-serif); font-style: italic; font-weight: 300; font-size: 24px; letter-spacing: 0.06em; color: var(--bl-footer-text); line-height: 1; } .bl-footer-brand .site-tagline { font-family: var(--bl-font-sans); font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bl-accent); margin-top: 4px; margin-bottom: 16px; } /* Footer copyright bar */ .site-footer .ct-footer-copyright, .site-footer .ct-copyright { font-family: var(--bl-font-sans); font-size: 10px; color: var(--bl-footer-muted); letter-spacing: 0.06em; } /* ── 14. HOMEPAGE — shared section rules ─────────────────────────────────── */ /* All sections must have consistent outer padding */ .bl-homepage section, .bl-homepage .bl-section { position: relative; } .bl-homepage .bl-section-inner { max-width: var(--bl-max-width); margin-inline: auto; padding-inline: var(--bl-padding-x); } /* Dark section (Philosophy, Newsletter): cream text */ .bl-section--dark { background: var(--bl-bg-dark); color: #F0E5CE; } .bl-section--dark h2, .bl-section--dark h3, .bl-section--dark blockquote, .bl-section--dark cite { color: #F0E5CE; } /* Alt section (Categories, Values) */ .bl-section--alt { background: var(--bl-bg-alt); } /* Section background */ .bl-section--section { background: var(--bl-bg-section); } /* ── 15. FOOTER CONTACT BLOCK ───────────────────────────────────────────── */ /* * Dark zone rendered via blocksy:footer:before hook (priority 5). * background matches --bl-bg-dark used by the Blocksy footer below it so * the two regions appear as one seamless footer area. */ .bl-footer-contact { background: var(--bl-bg-dark, #1C1C14); color: var(--bl-footer-text, #E8E4D4); padding-block: 64px; } .bl-footer-contact__inner { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); /* brand + 4 symmetric page columns */ gap: 40px; align-items: start; } /* ── Zone 1: newsletter band (hidden on home — section exists there) ───── */ .bl-footer-nlband { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 48px; padding-bottom: 40px; margin-bottom: 56px; border-bottom: 1px solid rgba(232, 228, 212, 0.14); } .bl-footer-nlband__title { font-family: var(--bl-font-serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 24px); letter-spacing: 0.03em; color: var(--bl-footer-text, #E8E4D4); margin: 0 0 6px; } .bl-footer-nlband__text { font-family: var(--bl-font-sans, 'Jost', sans-serif); font-size: 13px; font-weight: 300; color: var(--bl-footer-muted, rgba(232, 228, 212, 0.42)); margin: 0; } /* ── Footer newsletter form (compact, lives in the band) ───────────────── */ .bl-footer-nl { margin: 0; width: min(420px, 100%); } .bl-footer-nl__row { display: flex; border: 1px solid rgba(232, 228, 212, 0.24); border-radius: 2px; } .bl-footer-nl__input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 10px 12px; font-size: 12px; color: var(--bl-footer-text, #E8E4D4); outline-offset: -2px; } .bl-footer-nl__input::placeholder { color: var(--bl-footer-muted, rgba(232, 228, 212, 0.42)); opacity: 1; } .bl-footer-nl__submit { background: var(--bl-accent, #5C6E50); color: #FDFAF2; border: 0; padding: 10px 16px; font-family: var(--bl-font-sans, 'Jost', sans-serif); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: opacity 180ms; } .bl-footer-nl__submit:hover { opacity: 0.88; } .bl-footer-nl__hint { margin: 8px 0 0; font-size: 10.5px; font-weight: 300; color: var(--bl-footer-muted, rgba(232, 228, 212, 0.42)); } /* ── Cookie-settings trigger (Complianz) — button styled as footer link ── */ .bl-footer-cookie-btn { background: none; border: 0; padding: 0; text-align: start; cursor: pointer; } /* ── Brand column ──────────────────────────────────────────────────────── */ /* (.bl-footer-contact__brand-name / __brand-tag removed — no longer in markup) */ .bl-footer-contact__brand-logo { display: block; width: 160px; height: auto; margin-bottom: 16px; } /* Social links in footer brand column */ .bl-footer-socials { display: flex; gap: 10px; margin-top: 20px; } .bl-footer-social { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bl-footer-muted, rgba(232, 228, 212, .42)); border: 1px solid rgba(232, 228, 212, 0.16); text-decoration: none; transition: color 180ms var(--bl-ease), border-color 180ms var(--bl-ease), background 180ms var(--bl-ease); } .bl-footer-social:hover, .bl-footer-social:focus-visible { color: var(--bl-footer-text, #E8E4D4); border-color: rgba(232, 228, 212, 0.45); background: rgba(232, 228, 212, 0.06); outline: none; } /* ── Column headings ───────────────────────────────────────────────────── */ .bl-footer-contact__col-title { font-family: var(--bl-font-sans, 'Jost', sans-serif); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-footer-muted, rgba(232, 228, 212, 0.42)); margin: 0 0 20px; } /* ── Link list ─────────────────────────────────────────────────────────── */ .bl-footer-contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .bl-footer-contact__link { font-family: var(--bl-font-sans, 'Jost', sans-serif); font-size: 13px; font-weight: 300; color: var(--bl-footer-text, #E8E4D4); text-decoration: none; transition: color 160ms; } .bl-footer-contact__link:hover { color: #fff; } /* ── Address ───────────────────────────────────────────────────────────── */ .bl-footer-contact__address { font-family: var(--bl-font-sans, 'Jost', sans-serif); font-size: 13px; font-weight: 300; color: var(--bl-footer-text, #E8E4D4); font-style: normal; line-height: 1.7; } /* ── Responsive: laptop → 4 link columns under full-width brand row ────── */ @media (max-width: 1100px) { .bl-footer-contact__inner { grid-template-columns: repeat(4, 1fr); } .bl-footer-contact__col--brand { grid-column: 1 / -1; } } /* ── Responsive: tablet → 2 symmetric columns ─────────────────────────── */ @media (max-width: 900px) { .bl-footer-contact__inner { grid-template-columns: 1fr 1fr; } .bl-footer-contact__col--brand { grid-column: 1 / -1; } } /* ── Responsive: mobile → single column ───────────────────────────────── */ @media (max-width: 600px) { .bl-footer-contact { padding-block: 48px; } .bl-footer-contact__inner { grid-template-columns: 1fr; gap: 36px; } } /* ── 16. BLOCKSY WP ADMIN TOOLBAR OFFSET ────────────────────────────────── */ /* When the WP toolbar is showing (logged-in users), WP Core adds html { margin-top: 32px } which shifts the whole viewport down. The banner already has top:32px for this. The site header must add that same 32px on top of --bl-banner-h so it sticks just below the banner and never gets covered by it. */ .admin-bar .bl-promo-banner { top: 32px; } .admin-bar .bl-site-header { top: calc(32px + var(--bl-banner-h)); } @media (max-width: 782px) { .admin-bar .bl-promo-banner { top: 46px; } .admin-bar .bl-site-header { top: calc(46px + var(--bl-banner-h)); } } /* ── 17. ACCESSIBILITY UTILITIES ─────────────────────────────────────────── */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background: var(--bl-surface); clip: auto !important; color: var(--bl-text); display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Focus visible — override Blocksy where needed */ a:focus-visible, button:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; } /* ── 18. RESPONSIVE ─────────────────────────────────────────────────────── */ @media (max-width: 768px) { .bl-promo-banner__msg-secondary { display: none; } .bl-promo-banner { gap: 10px; } :root { --bl-banner-h: 36px; --bl-nav-h: 60px; --bl-header-h: calc(var(--bl-banner-h) + var(--bl-nav-h)); } } @media (max-width: 480px) { .bl-promo-banner__dot:last-of-type { display: none; } .bl-promo-banner__msg-primary { font-size: 9px; letter-spacing: 0.1em; } } /* ═══════════════════════════════════════════════════════════════════════════ 19. MODERN POLISH LAYER Additive refinements — same palette, softer geometry, better feedback. Desktop + mobile. Safe to remove as a block to roll back. ═══════════════════════════════════════════════════════════════════════════ */ :root { --bl-radius: 10px; /* cards, panels */ --bl-radius-sm: 6px; /* buttons, inputs, chips */ --bl-shadow-soft:0 6px 24px rgba(28, 23, 16, 0.08), 0 2px 6px rgba(28, 23, 16, 0.05); --bl-brass: #B08D57; /* Laiton doux — hairlines, eyebrow rules, stars. ≤5% of any view */ } /* ── Accessible, modern focus states ────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; } /* ── Body scroll lock (mobile nav + cart drawer) ───────────────────────── Defined here (sitewide) — cart-drawer.css also defines it but is not loaded on checkout, where the mobile burger menu still needs it. */ body.bl-no-scroll { overflow: hidden; } /* ── Primary button: soft radius + gentle lift ──────────────────────────── */ .bl-btn-primary, .bl-btn-primary:visited { border-radius: var(--bl-radius-sm); transition: background 200ms var(--bl-ease), box-shadow 200ms var(--bl-ease), transform 200ms var(--bl-ease); } .bl-btn-primary:hover { transform: translateY(-1px); } .bl-btn-primary:active { transform: translateY(0); } /* ── Sticky header: soft elevation when opaque ──────────────────────────── */ .bl-site-header { box-shadow: 0 2px 14px rgba(28, 23, 16, 0.06); } body.bl-has-hero .bl-site-header { box-shadow: none; } body.bl-has-hero.bl-hero-scrolled .bl-site-header, body.bl-has-hero .bl-site-header:hover, body.bl-has-hero .bl-site-header:has(:focus-visible), body.bl-has-hero.bl-mega-open .bl-site-header { box-shadow: 0 2px 14px rgba(28, 23, 16, 0.08); } /* ── Footer links: animated underline on hover ──────────────────────────── */ .bl-footer-contact__link { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; transition: color 160ms var(--bl-ease), background-size 240ms var(--bl-ease); } .bl-footer-contact__link:hover { background-size: 100% 1px; } /* Comfortable tap targets on touch devices */ .bl-footer-contact__list .bl-footer-contact__link { display: inline-block; padding-block: 2px; } /* ── Footer newsletter field: rounded group + focus glow ────────────────── */ .bl-footer-nl__row { border-radius: var(--bl-radius-sm); overflow: hidden; transition: border-color 200ms var(--bl-ease), box-shadow 200ms var(--bl-ease); } .bl-footer-nl__row:focus-within { border-color: rgba(232, 228, 212, 0.55); box-shadow: 0 0 0 3px rgba(92, 110, 80, 0.25); } .bl-footer-nl__input:focus-visible { outline: none; } /* group glow replaces it */ /* ── Footer socials: round, soft hover ──────────────────────────────────── */ .bl-footer-social { border-radius: 50%; transition: color 180ms var(--bl-ease), background 180ms var(--bl-ease), transform 180ms var(--bl-ease); } .bl-footer-social:hover { transform: translateY(-2px); } /* ── Cookie-settings footer button inherits the link underline ──────────── */ .bl-footer-cookie-btn { font-size: 13px; font-weight: 300; font-family: var(--bl-font-sans, 'Jost', sans-serif); color: var(--bl-footer-text, #E8E4D4); } /* ── Footer spacing rhythm on mobile ────────────────────────────────────── */ @media (max-width: 600px) { .bl-footer-nlband { padding-bottom: 32px; margin-bottom: 40px; } .bl-footer-nlband__copy { width: 100%; } .bl-footer-nl { width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ 20. BRAND CONSISTENCY — kill Blocksy's default blue everywhere Blocksy ships a blue default palette; any element the child theme does not explicitly style (Blocksy buttons, links, Woo "alt" buttons, blocks) falls back to it. These variables remap Blocksy's palette to the Bio Lotus tokens. html:root outranks Blocksy's inline :root declarations. ═══════════════════════════════════════════════════════════════════════════ */ html:root { /* Blocksy palette slots (1 = accent, 2 = accent hover) */ --theme-palette-color-1: #5C6E50; /* olive accent */ --theme-palette-color-2: #7A4830; /* warm brown */ --theme-palette-color-3: #1C1C14; /* dark ink */ --theme-palette-color-4: #4A4A38; /* mid text */ --theme-palette-color-5: #C4C0A8; /* line */ --theme-palette-color-6: #E4E0D0; /* alt background */ --theme-palette-color-7: #F2F0E6; /* page background */ --theme-palette-color-8: #FAFAF0; /* surface */ /* Blocksy semantic tokens */ --theme-text-color: var(--bl-text-mid); --theme-headings-color: var(--bl-text); --theme-link-initial-color: var(--bl-accent); --theme-link-hover-color: var(--bl-bold); --theme-selection-background-color: var(--bl-accent); --theme-selection-text-color: #FDFAF2; /* Blocksy buttons (used by its own UI + many block buttons) */ --theme-button-background-initial-color: var(--bl-bold); --theme-button-background-hover-color: #623A26; --theme-button-text-initial-color: #FDFAF2; --theme-button-text-hover-color: #FDFAF2; --theme-button-font-weight: 500; /* Forms */ --theme-form-field-border-focus-color: var(--bl-accent); } /* WooCommerce buttons not covered elsewhere (alt/anchor/place-order) and block-editor buttons — brand brown, never default blue. */ .woocommerce a.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce #place_order, .wp-element-button, .wp-block-button__link, .wc-block-components-button { background-color: var(--bl-bold); color: #FDFAF2; border: none; border-radius: var(--bl-radius-sm, 6px); transition: background-color 200ms var(--bl-ease), transform 200ms var(--bl-ease), box-shadow 200ms var(--bl-ease); } .woocommerce a.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit:hover, .woocommerce #place_order:hover, .wp-element-button:hover, .wp-block-button__link:hover, .wc-block-components-button:hover { background-color: #623A26; color: #FDFAF2; transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════════ 21. DARK MODE — opt-in, never automatic Light is the default for everyone (prefers-color-scheme is deliberately ignored). html[data-bl-theme="dark"] is set before paint by inc/dark-mode.php when the visitor chose dark via the header toggle; the choice lives in localStorage only — same URLs, same HTML, zero SEO impact. Warm "evening atelier" palette: deep olive-ink, never cold grey/black. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Header toggle: pill switch with sliding knob ──────────────────────── Light mode: sun visible at the start, knob at the end. Dark mode: knob slides to the start, moon visible at the end. Logical (inset-inline) positioning — mirrors automatically in RTL. */ .bl-theme-toggle { background: none; border: none; padding: 8px 4px; /* generous touch target around the small pill */ cursor: pointer; display: inline-flex; align-items: center; } .bl-theme-toggle__track { position: relative; width: 46px; height: 24px; border-radius: 999px; background: var(--bl-bg-alt, #E4E0D0); border: 1px solid var(--bl-line, #C4C0A8); transition: background 280ms var(--bl-ease), border-color 280ms var(--bl-ease); } .bl-theme-toggle__knob { position: absolute; top: 50%; inset-inline-start: calc(100% - 21px); /* light mode: knob at the end */ transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--bl-text, #1C1C14); box-shadow: 0 1px 3px rgba(28, 23, 16, 0.30); transition: inset-inline-start 260ms var(--bl-ease), background 280ms var(--bl-ease); } .bl-theme-toggle__sun, .bl-theme-toggle__moon { position: absolute; top: 50%; transform: translateY(-50%); transition: opacity 220ms var(--bl-ease); } .bl-theme-toggle__sun { inset-inline-start: 5px; color: var(--bl-bold, #7A4830); opacity: 1; } .bl-theme-toggle__moon { inset-inline-end: 5px; color: var(--bl-text-mid, #4A4A38); opacity: 0; } /* Dark state: track deepens, knob slides to the start, moon appears */ html[data-bl-theme="dark"] .bl-theme-toggle__track { background: #14130D; border-color: #3B392C; } html[data-bl-theme="dark"] .bl-theme-toggle__knob { inset-inline-start: 2px; background: #EDE9DB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } html[data-bl-theme="dark"] .bl-theme-toggle__sun { opacity: 0; } html[data-bl-theme="dark"] .bl-theme-toggle__moon { opacity: 1; color: var(--bl-brass, #C9A876); } /* Hover: subtle invitation */ .bl-theme-toggle:hover .bl-theme-toggle__track { border-color: var(--bl-text-faint, #7A7A68); } /* ── Dark token set ──────────────────────────────────────────────────────── */ html[data-bl-theme="dark"] { --bl-bg: #161510; --bl-bg-alt: #1E1C14; --bl-bg-section: #232117; --bl-bg-dark: #100F0A; /* footer / dark bands — deeper than the page */ --bl-accent: #8FA37F; /* sage lifted for contrast on dark */ --bl-accent-soft: #2A3122; --bl-bold: #A06A45; /* CTA brown lifted for contrast on dark */ --bl-bold-soft: #3A2A1E; --bl-text: #EDE9DB; --bl-text-mid: #C6C1AC; --bl-text-faint: #8E8A77; --bl-line: #3B392C; --bl-surface: #201E15; --bl-footer-text: #E8E4D4; --bl-footer-muted: rgba(232, 228, 212, 0.42); --bl-shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --bl-brass: #C9A876; /* brass lifted for dark surfaces */ /* Blocksy palette follows */ --theme-palette-color-1: #8FA37F; --theme-palette-color-2: #A06A45; --theme-palette-color-3: #EDE9DB; --theme-palette-color-4: #C6C1AC; --theme-palette-color-5: #3B392C; --theme-palette-color-6: #1E1C14; --theme-palette-color-7: #161510; --theme-palette-color-8: #201E15; --theme-text-color: var(--bl-text-mid); --theme-headings-color: var(--bl-text); --theme-link-initial-color: var(--bl-accent); --theme-link-hover-color: #C18A60; --theme-button-background-initial-color: var(--bl-bold); --theme-button-background-hover-color: #B07A52; --theme-form-field-border-focus-color: var(--bl-accent); } /* ── Logo swap: light variant in dark mode (both pre-rendered, no JS) ────── Scoped under .bl-site-header__logo to outrank the generic ".bl-site-header__logo img { display:block }" rule in §12. */ .bl-site-header__logo .bl-logo--light { display: none; } html[data-bl-theme="dark"] .bl-site-header__logo .bl-logo--dark { display: none; } html[data-bl-theme="dark"] .bl-site-header__logo .bl-logo--light { display: block; } /* ── Button hovers brighten instead of darken on dark surfaces ──────────── */ html[data-bl-theme="dark"] .bl-btn-primary:hover, html[data-bl-theme="dark"] .woocommerce a.button:hover, html[data-bl-theme="dark"] .woocommerce button.button:hover, html[data-bl-theme="dark"] .woocommerce input.button:hover, html[data-bl-theme="dark"] .woocommerce #place_order:hover, html[data-bl-theme="dark"] .wp-element-button:hover, html[data-bl-theme="dark"] .wp-block-button__link:hover { background-color: #B07A52; } html[data-bl-theme="dark"] .bl-footer-nl__submit:hover, html[data-bl-theme="dark"] .bl-newsletter__submit:hover { opacity: 1; filter: brightness(1.1); } /* ── Transparent hero header: dark glass instead of light glass ─────────── */ html[data-bl-theme="dark"] body.bl-has-hero .bl-site-header { background: rgba(22, 21, 16, 0.30); } /* This §21 rule outranks the §12 opaque states by cascade order, so the scroll / hover / mega-open opaque states must be restated for dark mode — otherwise the dark header stays transparent while scrolling. */ html[data-bl-theme="dark"] body.bl-has-hero.bl-hero-scrolled .bl-site-header, html[data-bl-theme="dark"] body.bl-has-hero .bl-site-header:hover, html[data-bl-theme="dark"] body.bl-has-hero .bl-site-header:has(:focus-visible), html[data-bl-theme="dark"] body.bl-has-hero.bl-mega-open .bl-site-header { background: var(--bl-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--bl-line); } /* ── Hero background: same composition, evening light ────────────────────── */ html[data-bl-theme="dark"] .bl-hero__bg-grad { background: linear-gradient(125deg, #262215 0%, #2A2415 35%, #2E2715 70%, #332B16 100%); } html[data-bl-theme="dark"] .bl-hero__bg-wash { background: linear-gradient(95deg, rgba(22, 21, 16, 0.60) 0%, rgba(22, 21, 16, 0.30) 40%, transparent 70%); } html[data-bl-theme="dark"] .bl-hero__bg-fade { background: linear-gradient(to bottom, transparent, rgba(22, 21, 16, 0.65)); } /* ── Photography: gently dimmed for evening comfort (logos excluded) ─────── */ html[data-bl-theme="dark"] .bl-hero__img-overlay img, html[data-bl-theme="dark"] .woocommerce ul.products li.product a img, html[data-bl-theme="dark"] .bl-mega-drop__cat-img, html[data-bl-theme="dark"] .bl-mega-drop__feat-img, html[data-bl-theme="dark"] .bl-cart-drawer__item-thumb img { filter: brightness(0.9); } /* ── Scrollbar follows the palette ───────────────────────────────────────── */ html[data-bl-theme="dark"] ::-webkit-scrollbar-thumb { background: #4A4636; } /* ── Cross-fade only during a deliberate toggle (not on every hover) ─────── */ html.bl-theme-switching body, html.bl-theme-switching .bl-site-header, html.bl-theme-switching .bl-footer-contact, html.bl-theme-switching main { transition: background-color 320ms var(--bl-ease), color 320ms var(--bl-ease); } /* ═══════════════════════════════════════════════════════════════════════════ 22. BRASS ACCENT LAYER (Laiton doux) Jewelry-level warm metallic accents — hairlines, eyebrow rules, stars. Deliberately scarce: if you notice it, it's overused. ═══════════════════════════════════════════════════════════════════════════ */ /* Hero eyebrow rule */ .bl-hero__eyebrow-rule { background: var(--bl-brass, #B08D57); } /* Philosophy section rules */ .bl-philosophy__rule { background: var(--bl-brass, #B08D57); } /* Footer column titles: short brass hairline above */ .bl-footer-contact__col-title::before { content: ''; display: block; width: 22px; height: 1px; background: var(--bl-brass, #B08D57); margin-bottom: 12px; opacity: 0.75; } /* Mega-dropdown + page eyebrows: brass instead of olive for the micro-labels */ .bl-mega-drop__eyebrow, .bl-page-hero__eyebrow { color: var(--bl-brass, #B08D57); }