/** * Hemppy design tokens + Blocksy mapping + accessibility (1.0.13 visual redesign). * Colours from branding.md + visual-benchmarks-redesign-2026-10-07.md. */ :root { /* Brand tokens — 1.0.13 refined natural luxury + restrained happy accent */ --hemppy-cream: #f5efe3; --hemppy-paper: #fbf8f2; --hemppy-sand: #efe6d6; --hemppy-forest: #1f3b2d; --hemppy-sage: #6f8b74; --hemppy-sage-text: #4a6352; --hemppy-sun: #e9b44c; --hemppy-coral: #d97b4a; /* distinctive happy accent — punctuation only */ --hemppy-ink: #22302a; --hemppy-ink-deep: #15241c; /* dark CTA band */ --hemppy-mist: #e8efe8; /* Focus ring (1.0.7): darker sun so the ring is >=3:1 on every light surface (cream 4.05, paper 4.38, footer #E4DDD0 3.44, sun-tint 4.09, white 4.64). The old #C9922E was only 2.4:1 on cream (WCAG 1.4.11). Inside dark Blocksy panels the light --hemppy-sun ring is used instead (see below). */ --hemppy-focus: #9c6b14; --hemppy-white: #ffffff; /* Spacing scale */ --hemppy-space-1: 0.25rem; --hemppy-space-2: 0.5rem; --hemppy-space-3: 0.75rem; --hemppy-space-4: 1rem; --hemppy-space-5: 1.5rem; --hemppy-space-6: 2rem; --hemppy-space-7: 3rem; --hemppy-space-8: 4rem; --hemppy-space-9: 5rem; /* Radius + shadow — premium but soft */ --hemppy-radius-sm: 8px; --hemppy-radius-md: 14px; --hemppy-radius-lg: 20px; --hemppy-radius-pill: 999px; --hemppy-shadow-sm: 0 1px 3px rgba(34, 48, 42, 0.06); --hemppy-shadow-md: 0 4px 20px rgba(34, 48, 42, 0.08); --hemppy-shadow-lg: 0 12px 40px rgba(34, 48, 42, 0.12); /* Type */ --hemppy-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hemppy-font-display: "Fraunces", Georgia, "Times New Roman", serif; /* * Map onto Blocksy CSS variables (verified in Blocksy 2.1.58 source: * --theme-palette-color-1..8, --theme-font-family, --theme-text-color, * --theme-button-*-color, --theme-link-*-color, --theme-headings-color). */ --theme-palette-color-1: var(--hemppy-forest); --theme-palette-color-2: var(--hemppy-sage-text); --theme-palette-color-3: var(--hemppy-ink); --theme-palette-color-4: var(--hemppy-forest); --theme-palette-color-5: var(--hemppy-mist); --theme-palette-color-6: #e4ddd0; --theme-palette-color-7: var(--hemppy-cream); --theme-palette-color-8: var(--hemppy-paper); --theme-font-family: var(--hemppy-font-body); --theme-text-color: var(--hemppy-ink); --theme-headings-color: var(--hemppy-forest); --theme-link-initial-color: var(--hemppy-sage-text); --theme-link-hover-color: var(--hemppy-forest); --theme-button-background-initial-color: var(--hemppy-forest); --theme-button-background-hover-color: var(--hemppy-sage-text); --theme-button-text-initial-color: var(--hemppy-white); --theme-button-text-hover-color: var(--hemppy-white); --theme-border-color: var(--hemppy-mist); } /* * Form-field borders (1.0.7). Blocksy prints its Customizer :root variables * inline *after* this file, so the field border (#E8EFE8 mist, 1.02:1 on * cream — empty inputs were invisible, WCAG 1.4.11) is overridden on the * fields themselves. Sage-text = 5.73:1 on cream, 6.20 on paper. */ #main :is(input, select, textarea), .ct-footer :is(input, select, textarea) { --theme-form-field-border-initial-color: var(--hemppy-sage-text); --theme-form-field-border-focus-color: var(--hemppy-forest); } /* Search modal (dark #121519): Blocksy's rgba(255,255,255,.2) border ≈ 1.8:1. */ #search-modal .ct-search-form :is(input, select) { --theme-form-field-border-initial-color: rgba(255, 255, 255, 0.6); } /* Base surfaces */ body { background-color: var(--hemppy-cream); color: var(--hemppy-ink); font-family: var(--hemppy-font-body); font-size: 1.0625rem; line-height: 1.6; } h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .wp-block-heading { font-family: var(--hemppy-font-display); color: var(--hemppy-forest); font-weight: 600; line-height: 1.3; } h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: clamp(1.625rem, 3.2vw, 2.125rem); letter-spacing: -0.015em; } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } a { color: var(--hemppy-sage-text); } a:hover, a:where(:not(.wp-element-button, .wp-block-button__link, .button, .ct-button, .wc-block-components-button)):focus-visible { color: var(--hemppy-forest); } /* * 1.0.7: keep button-styled links readable while focused. The plain * a:focus-visible colour above used to turn filled buttons (e.g. "Visit the * shop") forest-on-forest = 1:1 when tabbed to. Filled buttons keep their * button text colour; outline buttons keep forest text on the page surface. */ .wp-block-button:not(.is-style-outline) > a.wp-block-button__link:focus-visible, a.wp-element-button:not(.is-style-outline *):focus-visible, .woocommerce a.button:focus-visible, a.ct-button:focus-visible, a.wc-block-components-button:not(.is-link):focus-visible { color: var(--theme-button-text-initial-color, #ffffff); } .wp-block-button.is-style-outline > a.wp-block-button__link:focus-visible { color: var(--hemppy-forest); } /* Soft cards / elevated surfaces */ .ct-container, .hero-section [class*="container"] { /* inheritance only — no layout changes */ } /* Buttons — soft rect radius (branding: pick one) */ .button, .ct-button, .wp-block-button__link, button[type="submit"], input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { border-radius: var(--hemppy-radius-sm); font-family: var(--hemppy-font-body); font-weight: 600; letter-spacing: 0.01em; } /* Focus-visible — WCAG 2.2 AA (≥3:1 against adjacent) */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--hemppy-focus); outline-offset: 2px; } a:focus-visible, button:focus-visible, .button:focus-visible, .ct-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible { outline: 3px solid var(--hemppy-focus); outline-offset: 2px; box-shadow: none; } /* Dark Blocksy panels (off-canvas menu, search modal: ~#121519): the light sun ring is ~10:1 there, the darker light-surface ring would be ~3.9:1. */ .ct-panel :focus-visible, #offcanvas :focus-visible, #search-modal :focus-visible { outline-color: var(--hemppy-sun); } /* * Tap targets (1.0.7): Blocksy's menu trigger (18×18), header search (15×15) * and drawer close (12px icon) are icon-sized. Enlarge the hit area to 44×44 * with an invisible pseudo-element; layout and visuals are unchanged. */ .ct-header-trigger, .ct-header-search, .ct-toggle-close { position: relative; } .ct-header-trigger::after, .ct-header-search::after, .ct-toggle-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Motion — respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Product-page disclaimer (text depends on compliance class; modifiers: --cosmetic, --oral, --other, --generic) */ .hemppy-disclaimer { margin-top: var(--hemppy-space-5); padding: var(--hemppy-space-4); background: var(--hemppy-paper); border: 1px solid var(--hemppy-mist); border-radius: var(--hemppy-radius-sm); color: var(--hemppy-ink); font-size: 0.875rem; line-height: 1.5; } .hemppy-disclaimer__label { display: block; font-weight: 600; color: var(--hemppy-forest); margin-bottom: var(--hemppy-space-2); } /* Brand wordmark + navigation typography (Blocksy header elements). */ .site-title, .site-title a, [data-id="logo"] .site-title { font-family: var(--hemppy-font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--hemppy-forest); font-size: clamp(1.35rem, 2vw, 1.65rem); } .ct-header [data-id="logo"] img, .ct-header .site-logo-container img { max-height: 2.75rem; width: auto; } /* 1.0.20: Micro C Face-H lockup (SVG, inc/brand.php). 52px desktop / 40px mobile; width follows the width/height attributes (ratio 3.225) → no layout shift. Keeps Blocksy's sticky shrink (--logo-shrink-height) working. */ .ct-header [data-id="logo"] .site-logo-container:has(.hemppy-logo-svg) { height: var(--logo-shrink-height, 52px); } .ct-header [data-id="logo"] img.hemppy-logo-svg { max-height: none; height: 100%; width: auto; aspect-ratio: 774 / 240; } @media (max-width: 999.98px) { .ct-header [data-id="logo"] .site-logo-container:has(.hemppy-logo-svg) { height: var(--logo-shrink-height, 40px); } } .ct-header [data-id="menu"] > ul > li > a, .ct-header .menu > li > a { font-family: var(--hemppy-font-body); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.05em; text-transform: uppercase; padding-block: 0.5rem; color: var(--hemppy-ink); border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .ct-header [data-id="menu"] > ul > li > a:hover, .ct-header [data-id="menu"] > ul > li > a:focus-visible, .ct-header .menu > li > a:hover, .ct-header .menu > li > a:focus-visible, .ct-header [data-id="menu"] > ul > li.current-menu-item > a, .ct-header .menu > li.current-menu-item > a { color: var(--hemppy-forest); border-bottom-color: var(--hemppy-coral); } /* Header action icons — balanced presence, ≥44px hit via existing ::after */ .ct-header .ct-header-cart, .ct-header .ct-header-account, .ct-header .ct-header-search { color: var(--hemppy-forest); } .ct-header [data-row] { /* subtle presence without heavy bar */ } /* * Footer Menu (Blocksy location slug `footer`). * Injected by inc/footer-nav.php above the copyright row inside