/** * ============================================================================ * INTIMOVERA — GRAPHIC CHARTER / DESIGN TOKENS (v1.0, official) * ============================================================================ * * SINGLE SOURCE OF TRUTH for the visual identity. Declares every design token * (colors, typography, spacing, radii, elevation, layout, z-index, motion) as * CSS custom properties on :root, with usage rules in the comments. main.css * and all components CONSUME these tokens — they must not redefine raw values. * To re-skin the whole site, edit THIS file only. * * Loaded before main.css (functions.php → intimovera_enqueue_assets()). * theme.json mirrors the palette/fonts for the block editor; keep in sync. * * --- BRAND POSITIONING ------------------------------------------------------- * Intimovera is NOT a sex shop. It is a trustworthy expert GUIDE / comparator * for intimate wellness — treated with the seriousness and elegance of a * premium skincare / parapharmacy brand. Reassuring, discreet, inclusive, * transparent. Aesthetic keywords: calm · premium · editorial · clean. * * --- HARD VISUAL BANS (charter §11) ----------------------------------------- * NO bright red, NO neon/fluo pink, NO pure black. NO neon/glossy/"cheap" * effects. NO script/fancy hard-to-read fonts. NO explicit imagery. * * --- HOW TO USE -------------------------------------------------------------- * color: var(--im-text); background: var(--im-primary); // semantic, always * Do NOT hard-code hex/px in components when a token exists. Need a new value * repeatedly? Add a token here first, then consume it. * * Token prefix: --im-. Naming is SEMANTIC over literal so a palette change * never forces renaming across components. * ============================================================================ */ :root { /* ======================================================================== * 1. COLOR — BRAND * The brand accent is Muted Gold (premium, "brushed gold"), used for CTAs, * fine borders and highlights. Pair gold backgrounds with SLATE text * (white-on-gold fails contrast). Intimo Blush is the soft skin-tone fill. * ===================================================================== */ /* Primary — Muted Gold. Use for: CTA/button backgrounds, active states, * premium accents, fine borders. Text on it must be --im-on-primary. */ --im-primary: #c5a065; /* Muted Gold */ /* Primary (dark) — "gold ink". Dark enough for AA text on white (~5:1). * Use for: links, button hover, prices, hover of primary. */ --im-primary-dark: #846a2b; /* Primary (soft) — Intimo Blush. Decorative soft fills (hero glow, CTA * band, badges background). Never for text. */ --im-primary-soft: #f4d7d4; /* Intimo Blush */ /* Gold wash — soft gold tints for highlights (featured comparison column, * wells). Decorative only; never behind body text. */ --im-primary-tint: rgba(197, 160, 101, 0.10); --im-primary-tint-2: rgba(197, 160, 101, 0.18); /* Accent — muted rose (skin family, NOT red/fluo). "Oferta" / sale badge. */ --im-accent: #cf9088; /* Soft Mint — hygiene / care / freshness accents (badges, icons). */ --im-mint: #b8d8d8; /* ======================================================================== * 2. COLOR — NEUTRALS & SURFACES * White base (charter §4.3) with a very light grey for product grids and * Intimo Blush for soft sections / footer. * ===================================================================== */ --im-bg: #ffffff; /* page background (pure white) */ --im-surface: #ffffff; /* cards, header, panels */ --im-surface-alt: #f9f9f9; /* product grids, zebra rows, table heads, nav hover */ --im-blush: #f4d7d4; /* Intimo Blush — soft sections, footer bg */ --im-blush-soft: #faece9; /* lighter blush for gradient ends */ --im-blush-border: #e8c6c2; /* hairline on blush surfaces */ --im-border: #ece7e3; /* neutral hairline borders, dividers */ --im-border-gold: #dcc7a0; /* premium fine borders (comparison table) */ /* ======================================================================== * 3. COLOR — TEXT * Vera Deep Slate (off-black, softer & more premium than #000). * ===================================================================== */ --im-text: #2d3436; /* Vera Deep Slate — body text, headings, logo */ --im-muted: #6f7679; /* secondary text: captions, meta, counts */ --im-disclosure: #8a8f91; /* legal/affiliate disclosure (discreet grey) */ --im-on-primary: #2d3436; /* text on Muted Gold (slate, for contrast) */ --im-on-dark: #ffffff; /* text on the dark slate zone (age-gate) */ /* ======================================================================== * 4. COLOR — FEEDBACK / STATE (muted, never alarming — no bright red) * ===================================================================== */ --im-success: #3f7d6b; /* in stock, validated criteria (✓) */ --im-success-tint: rgba(63, 125, 107, 0.12); --im-danger: #b06a6a; /* out of stock (muted brick, not bright red) */ --im-danger-tint: rgba(176, 106, 106, 0.12); /* ======================================================================== * 5. COLOR — DARK ZONE (age-gate interstitial) * Full-screen Vera Deep Slate with white text (charter §8.1). * ===================================================================== */ --im-dark: #2d3436; /* age-gate background */ --im-dark-text: #f1efec; /* text on dark */ --im-dark-text-soft: #c9c6c2; /* secondary text on dark */ --im-overlay: rgba(45, 52, 54, 0.97); /* near-solid slate scrim */ /* ======================================================================== * 6. TYPOGRAPHY (charter §5) * Headings: Playfair Display (serif) — premium magazine / cosmetics feel, * weight 400-500, slight negative tracking. Body/UI: Inter (sans) — highly * legible on screens, line-height 1.6 for restful reading (anti-thin). * The logo wordmark is a separate geometric sans (lowercase). * Fonts are enqueued from Google Fonts with system fallbacks. * ===================================================================== */ --im-font: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --im-font-head: "Playfair Display", Georgia, "Times New Roman", serif; --im-font-logo: "Poppins", "Montserrat", "Inter", -apple-system, sans-serif; /* Type scale (fluid where it matters). Body base 17px. */ --im-fs-base: 17px; --im-fs-sm: 0.85rem; /* captions, meta, badges, disclosure */ --im-fs-lg: 1.15rem; /* lead paragraph, card price */ --im-fs-h3: clamp(1.05rem, 2vw, 1.25rem); /* sub-section / card titles */ --im-fs-h2: clamp(1.5rem, 3vw, 2rem); /* section titles */ --im-fs-h1: clamp(1.8rem, 5vw, 2.7rem); /* page H1 */ --im-fs-hero: clamp(2.5rem, 7vw, 4.2rem); /* home hero title */ --im-lh-body: 1.72; /* generous, restful (editorial luxury) */ --im-lh-heading: 1.1; /* tight display leading */ --im-track-head: -0.03em; /* refined negative tracking on serif display */ --im-fw-heading: 400; /* light Playfair — elegant, never heavy */ --im-fw-bold: 600; /* "bold" for UI emphasis (buttons, labels) */ --im-fw-medium: 500; /* editorial medium (primary nav, refined labels) */ /* ======================================================================== * 7. SPACING (4px base rhythm) * ===================================================================== */ --im-space-2xs: 0.25rem; /* 4px */ --im-space-xs: 0.5rem; /* 8px */ --im-space-sm: 0.75rem; /* 12px */ --im-space-md: 1rem; /* 16px — default gap */ --im-space-lg: 1.5rem; /* 24px */ --im-space-xl: 2rem; /* 32px */ --im-space-2xl: 3rem; /* 48px — between major sections */ --im-section-y: clamp(2.5rem, 4.5vw, 4.25rem); --im-flow: clamp(2.25rem, 4vw, 3.25rem); /* rhythm between editorial blocks (archive / single) */ /* ======================================================================== * 8. RADII — rounded, soft, friendly (wellness, not techy/sharp). * ===================================================================== */ --im-radius-sm: 9px; /* inputs, small cards, FAQ items */ --im-radius: 14px; /* default: cards, panels, images, wells */ --im-radius-pill: 999px; /* buttons, chips, badges, stock pills */ /* ======================================================================== * 9. ELEVATION — very soft, low-contrast (charter §6.1: 0 4px 6px /.05). * ===================================================================== */ --im-shadow-xs: 0 1px 2px rgba(45, 52, 54, 0.04); /* hairline lift (sticky header) */ --im-shadow: 0 4px 10px rgba(45, 52, 54, 0.05); /* resting cards / hover */ --im-shadow-md: 0 8px 24px rgba(45, 52, 54, 0.08); /* raised cards on hover */ --im-shadow-lg: 0 10px 34px rgba(45, 52, 54, 0.12); /* modals, popovers */ --im-shadow-gold: 0 6px 18px rgba(197, 160, 101, 0.28); /* primary CTA lift (gold glow) */ /* Decorative gradients — derived from brand tokens, declared once so hero, * CTA bands and accents stay in sync. Never used behind body text. */ --im-gradient-hero: radial-gradient(46% 52% at 86% 6%, var(--im-mint), transparent 56%), radial-gradient(60% 66% at 4% 104%, var(--im-blush), transparent 60%), linear-gradient(168deg, var(--im-blush-soft) 0%, #fbf2ee 52%, var(--im-blush-soft) 100%); --im-gradient-warm: linear-gradient(150deg, var(--im-mint) 0%, var(--im-blush-soft) 55%, var(--im-blush) 100%); --im-gradient-cta: linear-gradient(135deg, var(--im-blush-soft) 0%, var(--im-primary-soft) 100%); --im-gradient-gold: linear-gradient(135deg, #d6b074 0%, var(--im-primary) 50%, #b08f54 100%); /* ======================================================================== * 10. LAYOUT & BREAKPOINTS * @media cannot read custom properties; the px below are the canonical * breakpoints, hard-coded in main.css @media. Keep in sync. * sm 600px · md 782px · lg 1024px * Touch targets ≥ 48px (charter §10.1). * ===================================================================== */ --im-maxw: 1320px; /* content container max width */ --im-maxw-prose: 70ch; /* editorial text column */ --im-tap: 48px; /* minimum touch target */ --im-header-h: 72px; /* sticky header height (kept in sync with main.css) */ /* ======================================================================== * 11. Z-INDEX SCALE * ===================================================================== */ --im-z-header: 50; --im-z-skiplink: 100000; --im-z-modal: 99999; /* ======================================================================== * 12. MOTION — subtle and quick (no heavy animations, charter §10.2). * Respect prefers-reduced-motion (handled in main.css). * ===================================================================== */ --im-transition: 0.15s ease; --im-transition-slow: 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); /* panels, drawers */ /* ======================================================================== * 13. ACCESSIBILITY CONTRACT * - Body text ≥ 4.5:1, large/UI ≥ 3:1 (WCAG AA). Verified pairs: * --im-text on white/blush; --im-primary-dark (gold ink) on white ≈ 5:1; * --im-on-primary (slate) on --im-primary (gold) ≈ 5.3:1; * white on --im-dark (slate) for the age-gate. * - NEVER put white text on Muted Gold, and never use plain --im-primary * (gold) for small text on white — use --im-primary-dark. * - Focus always visible: 3px --im-primary outline (main.css). Keep it. * - Touch targets ≥ --im-tap. Don't signal meaning by color alone. * ===================================================================== */ }