/* * Fanki design tokens. * Every color, spacing, radius, shadow, and type value used anywhere in the * theme (or the static design reference) reads from this file. A new client * project re-skins Fanki by editing these values only — never by editing * markup or per-page CSS. * * Customizer overlap: --fanki-color-primary, --fanki-color-secondary, and * --fanki-font-family-base/-heading can ALSO be changed per-site from the * WordPress Customizer (see inc/customizer.php's fanki_customizer_inline_css()), * which injects an inline :root override on top of whatever is defined * here. The values below are what a site falls back to before anyone * touches the Customizer, and what a developer edits directly for anything * the Customizer doesn't expose (every other token in this file — spacing, * radius, shadows, the feedback colors, etc.). * * Breakpoints (documented here for consistency; CSS custom properties cannot * be read inside @media conditions, so these exact px values are hardcoded * wherever a media query is used): * sm: 480px md: 768px lg: 1024px xl: 1280px */ :root { /* Color — brand. Primary drives buttons, links, active/selected states, and focus rings; secondary drives the header top-bar and dark UI surfaces. -dark/-light are hover and tint shades of primary — when changed via the Customizer these two are derived automatically (fanki_adjust_color_lightness() in inc/customizer.php); if editing primary directly here instead, update -dark/-light to match by hand. */ --fanki-color-primary: #2563eb; --fanki-color-primary-dark: #1d4ed8; --fanki-color-primary-light: #dbeafe; --fanki-color-primary-contrast: #ffffff; /* Checkout form section background (Delivery Details / Additional information cards) — Primary Color at a low alpha rather than a fixed tint, so the Customizer's Checkout Page > Form Background Color Transparency (0-100) control can fade it from invisible to a fully solid Primary Color. rgba() form matches primary's own default hex (#2563eb) above at the control's 10 default. */ --fanki-checkout-form-bg: rgba(37, 99, 235, 0.1); /* Secondary is a dark UI-surface tone (header top bar, footer, cookie banner, the auth-page brand panel) that also seeds .fanki-btn-- secondary's default look below. Deliberately a dark navy rather than a plain near-black, both so it reads as a chosen brand tone (relates to -primary's blue) and so it no longer accidentally matches --fanki-color-text below — the two used to share the exact same #111827 by coincidence, not by relationship (2026-08-11 design audit); they're still independently editable, just no longer numerically identical by accident. */ --fanki-color-secondary: #101b30; --fanki-color-secondary-dark: #0a1220; --fanki-color-secondary-contrast: #ffffff; /* A distinct hue from -warning below (both used to default to the exact same #f59e0b, an accidental collision — 2026-08-11 design audit). */ --fanki-color-accent: #db2777; /* Color — feedback. Fixed semantic meaning (success/danger/warning/info) — not exposed in the Customizer since swapping these away from their conventional meaning (e.g. green = success) would confuse shoppers; edit directly here only if a client's brand guidelines require it. */ --fanki-color-success: #16a34a; --fanki-color-success-light: #dcfce7; --fanki-color-danger: #dc2626; --fanki-color-danger-light: #fee2e2; --fanki-color-warning: #f59e0b; --fanki-color-warning-light: #fef3c7; --fanki-color-info: #0ea5e9; --fanki-color-info-light: #e0f2fe; /* Color — third-party brand marks (WhatsApp/Messenger click-to-chat buttons, inc/woocommerce/wc-whatsapp.php + wc-messenger.php; Facebook/ X share buttons, fanki_post_share_buttons(), inc/template-tags.php). Each value was previously hardcoded as raw hex 3x independently in product.css instead of living here once (2026-08-11 design audit). */ --fanki-color-whatsapp: #25d366; --fanki-color-messenger: #0084ff; --fanki-color-facebook: #1877f2; --fanki-color-x: #000000; /* Color — neutrals. Background/surface/border/text grays used across every template — rarely need changing per project beyond a straight light/dark-theme swap. */ --fanki-color-bg: #ffffff; --fanki-color-surface: #f9fafb; --fanki-color-surface-alt: #f3f4f6; --fanki-color-border: #e5e7eb; --fanki-color-text: #111827; --fanki-color-text-muted: #6b7280; --fanki-color-text-subtle: #9ca3af; --fanki-color-text-inverse: #ffffff; /* De-emphasized text ON a dark surface (footer, cookie banner) — the inverse-side counterpart to -text-muted/-subtle above, which only work on a light surface. Previously every dark-surface template picked its own one-off rgba(255,255,255,X) for this (0.6, 0.7, 0.7 across 3 different rules) instead of sharing one value (2026-08-11 design audit). */ --fanki-color-text-inverse-muted: rgba(255, 255, 255, 0.7); /* Color — overlays. A 3-step scale for tinting an image/photo (dark base) or a dark UI surface (light base) — e.g. gallery play-button scrims, modal/lightbox backdrops, glassy buttons on the dark footer. Replaces 15+ ad-hoc rgba() opacities that had accumulated across base.css/home.css/product.css/account.css, each file picking its own number for what was functionally the same handful of intents (2026-08-11 design audit). Not used for shadows — --fanki-shadow-* below already covers those with its own, already-consistent scale. */ --fanki-overlay-dark-subtle: rgba(17, 24, 39, 0.4); --fanki-overlay-dark-medium: rgba(17, 24, 39, 0.7); --fanki-overlay-dark-strong: rgba(17, 24, 39, 0.9); --fanki-overlay-light-subtle: rgba(255, 255, 255, 0.1); --fanki-overlay-light-medium: rgba(255, 255, 255, 0.3); --fanki-overlay-light-strong: rgba(255, 255, 255, 0.5); /* Typography. The Customizer's "Font Style" control (Fanki: Branding > Typography, inc/customizer.php) only switches between safe system-font stacks — no custom webfont files are bundled with the theme yet. To add a real self-hosted webfont for a project: drop the .woff2 file(s) in assets/fonts/, add an @font-face rule in base.css, then update both this default value and the matching entry in inc/customizer.php's fanki_customizer_inline_css() $fanki_font_stacks. */ --fanki-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fanki-font-family-heading: var(--fanki-font-family-base); /* Rebuilt 2026-08-11 (design audit) on one consistent ×1.2 ratio anchored at -base (16px = the browser default, left untouched). The previous scale stepped by a flat +2px for 5 straight sizes (xs through -lg, 12→14→16→18→20) then abruptly switched to a much larger, unrelated jump for the remaining 4 (24→30→36→48) — two different progressions spliced together, which read as arbitrary rather than a deliberate scale. This version accelerates smoothly the whole way up and down (deltas: 2,3,3,4,5,5,7,8px — each step at least as big as the last), and 4xl still lands on exactly 3rem/48px, so it and -font-size-display below stay numerically aligned. h1–h6 below were rebuilt to match. -2xs (10px) is new — it's deliberately below -xs, existing only for the small header/order-summary count badges, which previously hardcoded 10px raw independently in two different files instead of sharing one sub-scale token (2026-08-11 design audit). */ --fanki-font-size-2xs: 0.625rem; /* 10px */ --fanki-font-size-xs: 0.6875rem; /* 11px, was 12px */ --fanki-font-size-sm: 0.8125rem; /* 13px, was 14px */ --fanki-font-size-base: 1rem; /* 16px, unchanged */ --fanki-font-size-md: 1.1875rem; /* 19px, was 18px */ --fanki-font-size-lg: 1.4375rem; /* 23px, was 20px */ --fanki-font-size-xl: 1.75rem; /* 28px, was 24px */ --fanki-font-size-2xl: 2.0625rem; /* 33px, was 30px */ --fanki-font-size-3xl: 2.5rem; /* 40px, was 36px */ --fanki-font-size-4xl: 3rem; /* 48px, unchanged */ /* Deliberately independent of both the generic scale above and the admin's H1 Size slider (--fanki-h1-size, below) — the homepage hero title has its own fixed display size by design. */ --fanki-font-size-display: 3rem; --fanki-font-weight-regular: 400; --fanki-font-weight-medium: 500; --fanki-font-weight-semibold: 600; --fanki-font-weight-bold: 700; --fanki-line-height-tight: 1.2; --fanki-line-height-base: 1.5; --fanki-line-height-relaxed: 1.75; --fanki-letter-spacing-tight: -0.02em; --fanki-letter-spacing-snug: -0.01em; --fanki-letter-spacing-wide: 0.03em; /* Spacing (4px base scale). Every margin/padding/gap in the theme uses one of these steps — change the scale here (e.g. bump space-5 up) to make a project feel airier/denser without touching any template. */ --fanki-space-1: 0.25rem; --fanki-space-2: 0.5rem; --fanki-space-3: 0.75rem; --fanki-space-4: 1rem; --fanki-space-5: 1.5rem; --fanki-space-6: 2rem; --fanki-space-7: 2.5rem; --fanki-space-8: 3rem; --fanki-space-9: 4rem; --fanki-space-10: 5rem; /* Radius. -full is used for pills/badges/avatars/circular icon buttons; -sm/-md/-lg cover everything else (inputs through cards). Set all three to 0 for a squared-off brand, or raise -lg for a softer one. */ --fanki-radius-sm: 4px; --fanki-radius-md: 8px; --fanki-radius-lg: 16px; --fanki-radius-full: 9999px; /* Button-specific overrides (Fanki: Branding > Buttons in the Customizer). Separate from --fanki-radius-md/-full so a project can restyle buttons without affecting cards/inputs/badges that share those tokens. */ --fanki-button-radius: var(--fanki-radius-md); --fanki-button-text-transform: none; /* Unified button text size (Fanki: Branding > Typography > Button Text Size) — every button-styled element site-wide, from card-level Add to Cart/Order Now up through Place Order/Proceed to Checkout, reads this one token, decoupled from --fanki-font-size-sm/-base so it's independently adjustable. Default (13px) matches the small button tier's PRE-EXISTING size exactly, so nothing changes for most buttons out of the box — but the few big page-level CTAs (single-product Add to Cart, Proceed to Checkout, Place Order, the 2 shop-filter buttons) previously read 16px and now default to 13px too, a deliberate, one-time visual change from unifying the two tiers into one control (2026-08-30). */ --fanki-button-font-size: 0.8125rem; /* 13px */ /* Decoupled from --fanki-font-size-sm (2026-08-30) so a product card's title can be resized independently of the many other things that token also governs (meta text, table cells, form labels, footer text, …). Default matches the current effective size exactly. */ --fanki-product-card-title-size: 0.8125rem; /* 13px */ /* .fanki-btn--primary's look (Fanki: Branding > Buttons > Button Style — solid/outline/ghost/soft/3d). Defaults below match the original hardcoded "solid" appearance exactly, so picking nothing changes nothing; fanki_customizer_inline_css() (inc/customizer.php) overrides these when a non-default style is chosen, or when an individual Advanced Styling field is filled in (Fanki: Branding > Buttons > Advanced Styling — off by default). */ --fanki-btn-primary-bg: var(--fanki-color-primary); --fanki-btn-primary-color: var(--fanki-color-text-inverse); --fanki-btn-primary-border-color: transparent; --fanki-btn-primary-border-width: 1px; --fanki-btn-primary-font-weight: var(--fanki-font-weight-semibold); --fanki-btn-primary-shadow: none; --fanki-btn-primary-shadow-active: none; --fanki-btn-primary-hover-bg: var(--fanki-color-primary-dark); --fanki-btn-primary-hover-color: var(--fanki-color-text-inverse); --fanki-btn-primary-hover-border-color: transparent; /* .fanki-btn--secondary's look (the product-card "Order Now"/"Buy Now" button — woocommerce/content-product.php). Defaults match the original hardcoded appearance exactly; overridable per-property via Advanced Styling, same mechanism as Primary above. No preset system (unlike Primary) — Advanced Styling is the only way to customize these beyond the site-wide Secondary Color picker. */ --fanki-btn-secondary-bg: var(--fanki-color-secondary); --fanki-btn-secondary-color: var(--fanki-color-secondary-contrast); --fanki-btn-secondary-border-color: transparent; --fanki-btn-secondary-border-width: 1px; --fanki-btn-secondary-font-weight: var(--fanki-font-weight-semibold); --fanki-btn-secondary-hover-bg: var(--fanki-color-secondary-dark); --fanki-btn-secondary-hover-color: var(--fanki-color-secondary-contrast); --fanki-btn-secondary-hover-border-color: transparent; /* .fanki-btn--outline's look (the paired secondary CTA next to a primary button, e.g. "Continue Shopping" — woocommerce/checkout/ thankyou.php). Not to be confused with Button Style's "Outline" PRESET above, which reshapes .fanki-btn--primary instead — two separate systems that happen to share the word "outline". Defaults match the original hardcoded appearance; overridable via Advanced Styling, same mechanism as Primary/Secondary above. */ --fanki-btn-outline-bg: transparent; --fanki-btn-outline-color: var(--fanki-color-text); --fanki-btn-outline-border-color: var(--fanki-color-border); --fanki-btn-outline-border-width: 1px; --fanki-btn-outline-font-weight: var(--fanki-font-weight-semibold); --fanki-btn-outline-hover-bg: transparent; --fanki-btn-outline-hover-color: var(--fanki-color-primary); --fanki-btn-outline-hover-border-color: var(--fanki-color-primary); /* Per-heading sizes (Fanki: Branding > Typography > Heading Sizes in the Customizer). Defaults match the -font-size-4xl…-md rungs of the type scale above, extended down to a full H1–H6 ladder so raw editor content (the_content()) gets real, consistent hierarchy instead of relying on browser UA defaults. Rebuilt 2026-08-11 alongside the type scale above (same audit): h6 previously equaled -font-size-base (16px) exactly — the same size as a plain paragraph — so it read as "not a heading at all," distinguished only by font-weight (base.css). It now sits on -font-size-md (19px), a real, distinct step between body text and h5. */ --fanki-h1-size: 48px; --fanki-h2-size: 40px; --fanki-h3-size: 33px; --fanki-h4-size: 28px; --fanki-h5-size: 23px; --fanki-h6-size: 19px; /* Header icon size (Fanki: Branding > Icons in the Customizer). Applies to every icon inside .fanki-header__icons/.fanki-menu-toggle uniformly — a single site-wide control rather than a per-icon setting. */ --fanki-icon-size: 20px; /* Shadow */ --fanki-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05); --fanki-shadow-md: 0 4px 6px rgba(17, 24, 39, 0.07); --fanki-shadow-lg: 0 10px 25px rgba(17, 24, 39, 0.10); /* Layout. --fanki-header-height must stay in sync with the header's real rendered height — several sticky-positioned elements (filter sidebar, order summary, account nav) offset themselves from it. */ --fanki-container-max-width: 1280px; --fanki-container-padding: 1rem; --fanki-header-height: 72px; /* Motion */ --fanki-transition-fast: 150ms ease; --fanki-transition-base: 250ms ease; /* Z-index scale */ --fanki-z-header: 100; --fanki-z-overlay: 200; --fanki-z-modal: 300; --fanki-z-toast: 400; } /* ---------- Dark mode ---------- --fanki-color-primary/-secondary/-accent and the semantic feedback colors (success/danger/warning/info, including their -light tints) are NOT overridden here — those stay project/brand-driven regardless of light/dark, same as the rest of this file. Only the neutral surface/text/border tokens flip, since those are what actually need to invert for a readable dark background; badge/notice chips keep their light-tinted backgrounds even in dark mode (still legible as small isolated elements, just not a full semantic dark repaint — a reasonable scope line for a toggle, not a from-scratch dark theme). Applied automatically when the OS is in dark mode (unless the shopper explicitly picked "Light" via the header toggle), or explicitly via [data-fanki-theme="dark"] — assets/js/dark-mode.js sets that attribute plus localStorage['fankiTheme'] on toggle; a tiny inline script in header.php applies the stored choice before first paint so there's no flash of the wrong theme. -bg/-surface/-surface-alt/-border below are one consistent Tailwind "slate" ramp (900/800/700/600) — 2026-08-11 design audit found -surface/ -surface-alt previously borrowed from the unrelated "gray" family instead (a different, slightly warmer neutral than slate), so a card sitting on the page background picked up a faint, unintended hue mismatch against it in dark mode. -text/-text-muted/-text-subtle were already a clean slate ramp (100/400/500) and are unchanged. */ @media (prefers-color-scheme: dark) { :root:not([data-fanki-theme="light"]) { --fanki-color-bg: #0f172a; --fanki-color-surface: #1e293b; --fanki-color-surface-alt: #334155; --fanki-color-border: #475569; --fanki-color-text: #f1f5f9; --fanki-color-text-muted: #94a3b8; --fanki-color-text-subtle: #64748b; /* Unlike WhatsApp-green/Messenger-blue/Facebook-blue, X's brand color is literal black — invisible against this dark palette's own near-black backgrounds without an override. */ --fanki-color-x: #ffffff; } } :root[data-fanki-theme="dark"] { --fanki-color-bg: #0f172a; --fanki-color-surface: #1e293b; --fanki-color-surface-alt: #334155; --fanki-color-border: #475569; --fanki-color-text: #f1f5f9; --fanki-color-text-muted: #94a3b8; --fanki-color-text-subtle: #64748b; --fanki-color-x: #ffffff; }