/* ============================================================================ GÜÇLÜ KAL — DESIGN TOKEN SYSTEM guclukal.com · Carmed İlaç ---------------------------------------------------------------------------- Version : 1.0 Date : 26 July 2026 Prepared by : Mustafa Özer Scope : WordPress · WooCommerce · WoodMart · Elementor ---------------------------------------------------------------------------- USAGE 1) Copy this file into the child theme: wp-content/themes/woodmart-child/assets/css/guclukal-tokens.css 2) In functions.php, enqueue it AFTER the main WoodMart stylesheet: wp_enqueue_style( 'guclukal-tokens', get_stylesheet_directory_uri() . '/assets/css/guclukal-tokens.css', array( 'woodmart-style' ), '1.0' ); 3) WoodMart and Elementor are styled from their own settings panels; this file only supplies tokens (no theme overrides). NAMING --gk-* → raw value (primitive). Do not use directly. --gk-color-* → semantic alias. Use THIS in components. The semantic layer is redefined in the dark theme; the raw layer is fixed. ============================================================================ */ /* --------------------------------------------------------------------------- 0 · BRAND CONSTANTS — never changed --------------------------------------------------------------------------- */ :root { --gk-brand-red: #ED323E; /* Güçlü Kal Red — primary digital value */ --gk-brand-graphite: #404041; /* Güçlü Kal Graphite — primary digital value */ /* Print equivalents (GucluKal_Pantone.pdf · INK TYPE: Process) */ --gk-brand-red-cmyk: "0 / 94 / 77 / 0"; --gk-brand-red-print-hex: #EE333F; /* RGB→HEX equivalent from the print sheet */ --gk-brand-red-pantone: "PANTONE Red 032 C (en yakın eşleşme — referans)"; --gk-brand-graphite-cmyk: "68 / 61 / 59 / 46"; --gk-brand-graphite-swatch: "C0 M0 Y0 K90"; } /* --------------------------------------------------------------------------- 1 · RAW COLOUR SCALES (primitive) Derived in OKLCH space with perceptually even steps; hue is locked to the brand value. All values are inside the sRGB gamut. --------------------------------------------------------------------------- */ :root { /* 1.1 Red — 500 is the brand value */ --gk-red-50: #FFF2F1; --gk-red-100: #FFE1DF; --gk-red-200: #FFC5C1; --gk-red-300: #FF9D97; --gk-red-400: #FD6664; --gk-red-500: #ED323E; /* ★ BRAND */ --gk-red-600: #D52433; /* ★ ACTION — 5.09:1 with white text (WCAG AA) */ --gk-red-700: #AE1A27; /* ★ TEXT — 7.05:1 on white (WCAG AAA) */ --gk-red-800: #86171E; --gk-red-900: #621417; --gk-red-950: #430C0D; /* 1.2 Graphite / neutral — 800 is the brand value. Imperceptibly warm. */ --gk-gray-0: #FFFDFB; --gk-gray-50: #F9F7F5; --gk-gray-100: #F3F1EF; --gk-gray-200: #E5E3E1; --gk-gray-300: #D1CFCD; --gk-gray-400: #AEACAA; --gk-gray-500: #8C8A88; --gk-gray-600: #6A6967; --gk-gray-700: #555452; --gk-gray-800: #404041; /* ★ BRAND GRAPHITE */ --gk-gray-900: #2E2D2B; --gk-gray-950: #1D1B1A; --gk-gray-1000: #0B0A09; --gk-white: #FFFFFF; --gk-black: #000000; /* 1.3 Oregano Green — natural ingredients, confirmation, stock, success */ --gk-green-50: #ECF6F0; --gk-green-100: #DAEEE2; --gk-green-200: #BADCC8; --gk-green-300: #91C5A8; --gk-green-400: #559E78; --gk-green-500: #18704A; /* ★ */ --gk-green-600: #00603C; --gk-green-700: #004E30; --gk-green-800: #003E25; --gk-green-900: #002E1A; /* 1.4 Pharmacy Petrol — B2B / dealer pharmacy channel, info */ --gk-petrol-50: #EDF5F8; --gk-petrol-100: #DBEBF0; --gk-petrol-200: #BDD8E1; --gk-petrol-300: #97BDCA; --gk-petrol-400: #5A8C9C; --gk-petrol-500: #0F4C5C; /* ★ */ --gk-petrol-600: #004050; --gk-petrol-700: #003441; --gk-petrol-800: #002832; --gk-petrol-900: #001C25; /* 1.5 Campaign Amber — discount, warning, rating star */ --gk-amber-50: #FFF5E9; --gk-amber-100: #FEEAD0; --gk-amber-200: #FAD6A7; --gk-amber-300: #F7C277; --gk-amber-400: #F7B248; --gk-amber-500: #F0A202; /* ★ fill — graphite text on top (4.87:1) */ --gk-amber-600: #CC8900; --gk-amber-700: #9D6800; --gk-amber-800: #7B5100; /* ★ text — 6.96:1 on white */ --gk-amber-900: #5D3C00; /* 1.6 Error Red — deliberately separated from the brand red. Darker and less saturated so it is not confused with the CTA red. */ --gk-danger-50: #FFEFED; --gk-danger-500: #A81622; /* ★ 7.49:1 on white */ --gk-danger-600: #940016; --gk-danger-700: #7C0011; /* 1.7 RGB channels — for rgba() needs */ --gk-red-500-rgb: 237, 50, 62; --gk-red-600-rgb: 213, 36, 51; --gk-gray-800-rgb: 64, 64, 65; --gk-gray-1000-rgb: 11, 10, 9; --gk-white-rgb: 255, 255, 255; } /* --------------------------------------------------------------------------- 2 · SEMANTIC COLOURS — LIGHT THEME (default) --------------------------------------------------------------------------- */ :root, [data-gk-theme="light"] { color-scheme: light; /* 2.1 Surfaces */ --gk-color-canvas: var(--gk-gray-50); /* page background */ --gk-color-surface: var(--gk-white); /* card, panel */ --gk-color-surface-sunken: var(--gk-gray-100); /* sunken area */ --gk-color-surface-raised: var(--gk-white); /* dropdown, modal */ --gk-color-surface-inverse: var(--gk-gray-800); /* dark block */ --gk-color-overlay: rgba(var(--gk-gray-1000-rgb), .55); /* 2.2 Text */ --gk-color-text: var(--gk-gray-800); /* body */ --gk-color-text-strong: var(--gk-gray-900); /* heading */ --gk-color-text-muted: var(--gk-gray-600); /* secondary */ --gk-color-text-subtle: var(--gk-gray-500); /* eyebrow, footnote */ --gk-color-text-inverse: var(--gk-white); --gk-color-text-brand: var(--gk-red-700); /* red text (AAA) */ --gk-color-text-link: var(--gk-red-700); --gk-color-text-link-hover: var(--gk-red-800); /* 2.3 Borders — hairline separation; works together with soft corners */ --gk-color-border: var(--gk-gray-200); /* default hairline */ --gk-color-border-strong: var(--gk-gray-300); --gk-color-border-contrast: var(--gk-gray-800); /* emphasised frame */ --gk-color-border-brand: var(--gk-red-500); /* 2.4 Action — primary (red) */ --gk-color-action: var(--gk-red-600); --gk-color-action-hover: var(--gk-red-700); --gk-color-action-active: var(--gk-red-800); --gk-color-action-text: var(--gk-white); --gk-color-action-soft: var(--gk-red-50); --gk-color-whatsapp: #128C7E; /* WhatsApp order button — the only external brand colour; white text 4.9:1 */ --gk-color-whatsapp-text: #0C6B5F; /* on the soft tint: 5.5:1 */ --gk-color-whatsapp-soft: #E8F6F3; --gk-color-whatsapp-border: #9FD9CD; --gk-color-action-soft-text: var(--gk-red-700); /* 2.5 Action — secondary (graphite) */ --gk-color-action-2: var(--gk-gray-800); --gk-color-action-2-hover: var(--gk-gray-900); --gk-color-action-2-active: var(--gk-gray-950); --gk-color-action-2-text: var(--gk-white); /* 2.6 Status */ --gk-color-success: var(--gk-green-500); --gk-color-success-soft: var(--gk-green-50); --gk-color-success-text: var(--gk-green-700); --gk-color-warning: var(--gk-amber-500); --gk-color-warning-soft: var(--gk-amber-50); --gk-color-warning-text: var(--gk-amber-800); --gk-color-danger: var(--gk-danger-500); --gk-color-danger-soft: var(--gk-danger-50); --gk-color-danger-text: var(--gk-danger-600); --gk-color-info: var(--gk-petrol-500); --gk-color-info-soft: var(--gk-petrol-50); --gk-color-info-text: var(--gk-petrol-600); /* 2.7 E-commerce states */ --gk-color-price: var(--gk-gray-900); /* current price */ --gk-color-price-old: var(--gk-gray-500); /* struck-through old price */ --gk-color-price-sale: var(--gk-red-700); /* sale price */ --gk-color-badge-sale: var(--gk-red-500); /* "%20" badge background */ --gk-color-badge-new: var(--gk-gray-800); /* "YENİ" (new) */ --gk-color-badge-bestseller: var(--gk-amber-500);/* "ÇOK SATAN" (bestseller) */ --gk-color-badge-natural: var(--gk-green-500); /* "BİTKİSEL" (herbal) */ --gk-color-badge-pharmacy: var(--gk-petrol-500); /* pharmacy channel surface; the "ECZANEDE" label itself is white + red frame */ --gk-color-badge-oos: var(--gk-gray-400); /* "TÜKENDİ" (sold out) */ --gk-color-stock-in: var(--gk-green-500); --gk-color-stock-low: var(--gk-amber-700); --gk-color-stock-out: var(--gk-gray-500); --gk-color-rating: var(--gk-amber-500); --gk-color-rating-empty: var(--gk-gray-300); /* 2.8 Focus ring — accessibility */ --gk-color-focus: var(--gk-red-600); --gk-focus-ring: 0 0 0 2px var(--gk-color-surface), 0 0 0 4px var(--gk-color-focus); /* 2.9 Shadow colours */ --gk-shadow-color: var(--gk-gray-1000-rgb); } /* --------------------------------------------------------------------------- 3 · SEMANTIC COLOURS — DARK THEME Red 500 gives 4.83:1 on dark backgrounds; the 400 tone is used for small text. --------------------------------------------------------------------------- */ [data-gk-theme="dark"] { color-scheme: dark; --gk-color-canvas: var(--gk-gray-1000); --gk-color-surface: var(--gk-gray-950); --gk-color-surface-sunken: #141312; --gk-color-surface-raised: var(--gk-gray-900); --gk-color-surface-inverse: var(--gk-gray-100); --gk-color-overlay: rgba(0, 0, 0, .70); --gk-color-text: var(--gk-gray-200); --gk-color-text-strong: var(--gk-gray-0); --gk-color-text-muted: var(--gk-gray-400); --gk-color-text-subtle: var(--gk-gray-500); --gk-color-text-inverse: var(--gk-gray-950); --gk-color-text-brand: var(--gk-red-400); --gk-color-text-link: var(--gk-red-400); --gk-color-text-link-hover: var(--gk-red-300); --gk-color-border: #302E2C; --gk-color-border-strong: #45423F; --gk-color-border-contrast: var(--gk-gray-300); --gk-color-border-brand: var(--gk-red-500); --gk-color-action: var(--gk-red-500); --gk-color-action-hover: var(--gk-red-400); --gk-color-action-active: var(--gk-red-300); --gk-color-action-text: var(--gk-gray-1000); --gk-color-action-soft: rgba(var(--gk-red-500-rgb), .14); --gk-color-action-soft-text: var(--gk-red-300); --gk-color-action-2: var(--gk-gray-200); --gk-color-action-2-hover: var(--gk-white); --gk-color-action-2-active: var(--gk-gray-300); --gk-color-action-2-text: var(--gk-gray-1000); --gk-color-success: var(--gk-green-400); --gk-color-success-soft: rgba(85, 158, 120, .16); --gk-color-success-text: var(--gk-green-300); --gk-color-warning: var(--gk-amber-400); --gk-color-warning-soft: rgba(247, 178, 72, .16); --gk-color-warning-text: var(--gk-amber-300); --gk-color-danger: var(--gk-red-400); --gk-color-danger-soft: rgba(253, 102, 100, .16); --gk-color-danger-text: var(--gk-red-300); --gk-color-info: var(--gk-petrol-300); --gk-color-info-soft: rgba(151, 189, 202, .16); --gk-color-info-text: var(--gk-petrol-200); --gk-color-price: var(--gk-gray-0); --gk-color-price-old: var(--gk-gray-500); --gk-color-price-sale: var(--gk-red-400); --gk-color-badge-sale: var(--gk-red-500); --gk-color-badge-new: var(--gk-gray-200); --gk-color-badge-bestseller: var(--gk-amber-400); --gk-color-badge-natural: var(--gk-green-400); --gk-color-badge-pharmacy: var(--gk-petrol-300); --gk-color-badge-oos: var(--gk-gray-600); --gk-color-stock-in: var(--gk-green-400); --gk-color-stock-low: var(--gk-amber-400); --gk-color-stock-out: var(--gk-gray-500); --gk-color-rating: var(--gk-amber-400); --gk-color-rating-empty: var(--gk-gray-700); --gk-color-focus: var(--gk-red-400); --gk-shadow-color: 0, 0, 0; } /* --------------------------------------------------------------------------- 4 · TYPOGRAPHY Jost — the single UI typeface (SIL OFL, Google Fonts, full Turkish support). Orenza Bold Demo — logo ONLY. Not used in the UI. Contains no numerals. --------------------------------------------------------------------------- */ :root { --gk-font-sans: "Jost", "Jost Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gk-font-display: var(--gk-font-sans); --gk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Print/office documents — falls back to Jost when Myriad Pro is missing */ --gk-font-print: "Myriad Pro", "Jost", Arial, sans-serif; /* 4.1 Weights — Jost variable axis: 100–900 */ --gk-fw-light: 300; --gk-fw-regular: 400; --gk-fw-medium: 500; --gk-fw-semibold: 600; --gk-fw-bold: 700; /* 4.2 Fluid size scale — scales between 360px → 1440px */ --gk-fs-3xs: 0.6875rem; /* 11px — eyebrow/badge only */ --gk-fs-2xs: 0.75rem; /* 12px */ --gk-fs-xs: 0.8125rem; /* 13px */ --gk-fs-sm: 0.875rem; /* 14px */ --gk-fs-md: 1rem; /* 16px — body base */ --gk-fs-lg: 1.125rem; /* 18px */ --gk-fs-xl: 1.25rem; /* 20px */ --gk-fs-2xl: clamp(1.375rem, 1.3333rem + 0.1852vw, 1.5rem); /* 22→24 */ --gk-fs-3xl: clamp(1.625rem, 1.5417rem + 0.3704vw, 1.875rem); /* 26→30 */ --gk-fs-4xl: clamp(1.875rem, 1.7083rem + 0.7407vw, 2.375rem); /* 30→38 */ --gk-fs-5xl: clamp(2.25rem, 2rem + 1.1111vw, 3rem); /* 36→48 */ --gk-fs-6xl: clamp(2.625rem, 2.25rem + 1.6667vw, 3.75rem); /* 42→60 */ --gk-fs-7xl: clamp(3.25rem, 2.75rem + 2.2222vw, 4.75rem); /* 52→76 */ --gk-fs-8xl: clamp(4rem, 3.3333rem + 2.963vw, 6rem); /* 64→96 */ /* 4.3 Line height */ --gk-lh-none: 1; --gk-lh-tight: 1.08; /* giant heading */ --gk-lh-snug: 1.18; /* heading */ --gk-lh-normal: 1.45; /* UI text */ --gk-lh-relaxed: 1.65; /* body / blog */ --gk-lh-loose: 1.8; /* long regulatory text */ /* 4.4 Letter spacing — Jost is geometric, so it is tightened at large sizes */ --gk-ls-tighter: -0.035em; --gk-ls-tight: -0.02em; --gk-ls-normal: -0.005em; --gk-ls-wide: 0.04em; --gk-ls-wider: 0.12em; /* eyebrow, UPPERCASE badge */ --gk-ls-widest: 0.2em; /* 4.5 Measure (line length) */ --gk-measure-narrow: 46ch; --gk-measure: 68ch; --gk-measure-wide: 82ch; /* 4.6 Numeric behaviour — for alignment in price tables */ --gk-num-tabular: "tnum" 1, "lnum" 1; } /* --------------------------------------------------------------------------- 5 · SPACING — 4px-based scale --------------------------------------------------------------------------- */ :root { --gk-space-0: 0; --gk-space-1: 0.25rem; /* 4px */ --gk-space-2: 0.5rem; /* 8px */ --gk-space-3: 0.75rem; /* 12px */ --gk-space-4: 1rem; /* 16px */ --gk-space-5: 1.25rem; /* 20px */ --gk-space-6: 1.5rem; /* 24px */ --gk-space-8: 2rem; /* 32px */ --gk-space-10: 2.5rem; /* 40px */ --gk-space-12: 3rem; /* 48px */ --gk-space-16: 4rem; /* 64px */ --gk-space-20: 5rem; /* 80px */ --gk-space-24: 6rem; /* 96px */ --gk-space-32: 8rem; /* 128px */ /* Section vertical rhythm — fluid */ --gk-section-y: clamp(3rem, 2rem + 4.4444vw, 6rem); /* 48→96px */ --gk-section-y-lg: clamp(4.5rem, 3rem + 6.6667vw, 9rem); /* 72→144px */ } /* --------------------------------------------------------------------------- 6 · LAYOUT — container, grid, breakpoints --------------------------------------------------------------------------- */ :root { --gk-container: 1320px; /* main container width */ --gk-container-narrow: 880px; /* blog / regulatory text */ --gk-container-wide: 1560px; /* wide product grids and galleries; the slider is full-bleed */ --gk-gutter: clamp(1rem, 0.5rem + 1.4815vw, 2rem); /* 16→32px */ --gk-grid-cols: 12; --gk-grid-gap: var(--gk-space-6); --gk-grid-gap-sm: var(--gk-space-4); /* Product grid column counts (WooCommerce archive) */ --gk-products-cols-xs: 2; --gk-products-cols-sm: 2; --gk-products-cols-md: 3; --gk-products-cols-lg: 4; --gk-products-cols-xl: 4; --gk-products-gap: var(--gk-space-4); /* soft-cornered cards sit with a gap */ /* Breakpoints — reference only; written by hand inside @media */ --gk-bp-xs: 480px; --gk-bp-sm: 576px; --gk-bp-md: 769px; /* aligned with the WoodMart mobile threshold */ --gk-bp-lg: 1025px; --gk-bp-xl: 1280px; --gk-bp-2xl: 1440px; } /* --------------------------------------------------------------------------- 7 · SHAPE LANGUAGE — soft corners, hairline borders, layered shadows Five-step radius scale. Every component takes one step from the scale; no hand-written pixel values. Single exception: the pharmacy "E" sign (square by law). --------------------------------------------------------------------------- */ :root { --gk-radius-xs: 8px; /* badge, chip, tooltip, payment icon */ --gk-radius-sm: 12px; /* form field, dropdown, notice box */ --gk-radius-md: 20px; /* card, panel, image, table wrapper */ --gk-radius-lg: 28px; /* campaign banner, section panel, modal, newsletter card */ --gk-radius-pill: 999px; /* button, label, tab, search bar */ --gk-radius-full: 50%; /* avatar, counter, radio, icon button */ --gk-radius: var(--gk-radius-md); /* default for unspecified components */ --gk-border-hairline: 1px; --gk-border: 1px; --gk-border-thick: 2px; --gk-border-heavy: 3px; --gk-rule-brand: 4px; /* red section rule */ /* 7.1 Layered shadow — card, panel, dropdown layer. Two layers: tight contact + wide soft spread. */ --gk-shadow-1: 0 1px 2px rgba(var(--gk-shadow-color), .05), 0 2px 6px rgba(var(--gk-shadow-color), .04); --gk-shadow-2: 0 2px 6px rgba(var(--gk-shadow-color), .06), 0 8px 20px rgba(var(--gk-shadow-color), .07); --gk-shadow-3: 0 4px 10px rgba(var(--gk-shadow-color), .07), 0 16px 40px rgba(var(--gk-shadow-color), .10); --gk-shadow-4: 0 8px 18px rgba(var(--gk-shadow-color), .09), 0 28px 64px rgba(var(--gk-shadow-color), .14); /* 7.2 Lift (hover) — the card moves up 2–3 px while the shadow deepens one step */ --gk-shadow-lift-sm: var(--gk-shadow-2); --gk-shadow-lift: var(--gk-shadow-3); --gk-shadow-lift-lg: var(--gk-shadow-4); --gk-shadow-brand: 0 8px 24px rgba(var(--gk-red-500-rgb), .28); /* 7.3 Layer order */ --gk-z-base: 0; --gk-z-sticky: 100; --gk-z-header: 200; --gk-z-dropdown: 300; --gk-z-overlay: 400; --gk-z-modal: 500; --gk-z-toast: 600; --gk-z-tooltip: 700; } /* --------------------------------------------------------------------------- 8 · MOTION --------------------------------------------------------------------------- */ :root { --gk-dur-instant: 80ms; --gk-dur-fast: 140ms; --gk-dur-base: 220ms; --gk-dur-slow: 360ms; --gk-dur-slower: 560ms; --gk-ease-out: cubic-bezier(.22, 1, .36, 1); /* enter — default */ --gk-ease-in: cubic-bezier(.55, 0, 1, .45); /* exit */ --gk-ease-in-out: cubic-bezier(.65, 0, .35, 1); --gk-ease-sharp: cubic-bezier(.16, 1, .3, 1); /* snappy ease-out for short UI transitions */ --gk-transition: color var(--gk-dur-fast) var(--gk-ease-out), background-color var(--gk-dur-fast) var(--gk-ease-out), border-color var(--gk-dur-fast) var(--gk-ease-out), box-shadow var(--gk-dur-fast) var(--gk-ease-out), transform var(--gk-dur-fast) var(--gk-ease-out); } @media (prefers-reduced-motion: reduce) { :root { --gk-dur-instant: 1ms; --gk-dur-fast: 1ms; --gk-dur-base: 1ms; --gk-dur-slow: 1ms; --gk-dur-slower: 1ms; } } /* --------------------------------------------------------------------------- 9 · COMPONENT TOKENS --------------------------------------------------------------------------- */ :root { /* 9.1 Button — touch target at least 44px */ --gk-btn-h-sm: 36px; --gk-btn-h: 48px; --gk-btn-h-lg: 56px; --gk-btn-px-sm: var(--gk-space-4); --gk-btn-px: var(--gk-space-6); --gk-btn-px-lg: var(--gk-space-8); --gk-btn-fs-sm: var(--gk-fs-xs); --gk-btn-fs: var(--gk-fs-sm); --gk-btn-fs-lg: var(--gk-fs-lg); --gk-btn-fw: var(--gk-fw-semibold); --gk-btn-ls: var(--gk-ls-wide); --gk-btn-transform: uppercase; /* 9.2 Form */ --gk-input-h: 48px; --gk-input-h-sm: 40px; --gk-input-px: var(--gk-space-4); --gk-input-fs: var(--gk-fs-md); /* ≥16px to prevent iOS auto-zoom */ --gk-input-bg: var(--gk-color-surface); --gk-input-border: var(--gk-color-border-strong); --gk-input-border-focus: var(--gk-color-focus); /* 9.3 Badge / label */ --gk-badge-h: 22px; --gk-badge-px: var(--gk-space-2); --gk-badge-fs: var(--gk-fs-3xs); --gk-badge-fw: var(--gk-fw-bold); --gk-badge-ls: var(--gk-ls-wider); /* 9.4 Product card */ --gk-card-pad: var(--gk-space-4); --gk-card-img-ratio: 1 / 1; --gk-card-title-lines: 2; --gk-card-border: var(--gk-color-border); /* 9.5 Header */ --gk-header-h: 88px; --gk-header-h-sticky: 64px; --gk-header-h-mobile: 60px; --gk-topbar-h: 36px; /* 9.6 Icon */ --gk-icon-stroke: 1.5px; --gk-icon-xs: 14px; --gk-icon-sm: 16px; --gk-icon-md: 20px; --gk-icon-lg: 24px; --gk-icon-xl: 32px; /* 9.7 Logo — minimum sizes and clear-space ratio Clear space = 4 modules; module = the edge of the dot on the wordmark. In the vertical lockup, 4 modules equal 17.9% of the logo height. */ --gk-logo-clearspace-ratio: 0.18; --gk-logo-min-w-vertical: 120px; --gk-logo-min-w-horizontal: 160px; --gk-logo-min-w-wordmark: 90px; --gk-logo-min-w-symbol: 24px; --gk-logo-header-h: 44px; --gk-logo-header-h-mobile: 34px; } /* --------------------------------------------------------------------------- 10 · BASE RESET AND UTILITY CLASSES (optional) Only the minimal rules that guarantee the tokens' behaviour. --------------------------------------------------------------------------- */ .gk-scope, .gk-scope * { box-sizing: border-box; } .gk-scope { font-family: var(--gk-font-sans); font-size: var(--gk-fs-md); line-height: var(--gk-lh-relaxed); letter-spacing: var(--gk-ls-normal); color: var(--gk-color-text); background-color: var(--gk-color-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Focus ring — mandatory for keyboard users, never removed */ .gk-scope :focus-visible { outline: var(--gk-border-thick) solid var(--gk-color-focus); outline-offset: 2px; } /* Prices and numeric tables — tabular figures */ .gk-num, .gk-price, .gk-scope table td[data-num] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--gk-num-tabular); } /* Eyebrow label */ .gk-eyebrow { font-size: var(--gk-fs-2xs); font-weight: var(--gk-fw-semibold); letter-spacing: var(--gk-ls-wider); text-transform: uppercase; color: var(--gk-color-text-subtle); } /* Brand rule */ .gk-rule { height: var(--gk-rule-brand); background: var(--gk-red-500); border: 0; } /* Screen reader text */ .gk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- PHARMACY / B2B CHANNEL Dealer pharmacy surfaces are set apart by the petrol colour; the buyer side stays red. Moved here from the retired guclukal-woodmart.css. --------------------------------------------------------------------------- */ .gk-b2b { --gk-color-action: var(--gk-petrol-500); --gk-color-action-hover: var(--gk-petrol-600); --gk-color-action-active: var(--gk-petrol-700); --gk-color-text-link: var(--gk-petrol-600); --gk-color-focus: var(--gk-petrol-500); } .gk-b2b .btn.btn-color-primary, .gk-b2b .button.alt { background: var(--gk-petrol-500); border-color: var(--gk-petrol-500); } .gk-b2b .btn.btn-color-primary:hover, .gk-b2b .button.alt:hover { background: var(--gk-petrol-600); border-color: var(--gk-petrol-600); }