/** * Theme Name: Blocksy Child * Description: Blocksy Child theme * Author: Creative Themes * Template: blocksy * Text Domain: blocksy */ /* ========================================================================== CHHAAP STUDIO - DESIGN TOKENS -------------------------------------------------------------------------- Step 1 of the redesign: tokens only. No component, layout or WooCommerce styles yet - those come in later steps. Direction: an Indian block-print clothing store. The section rhythm is loosely modelled on the "Vintina" reference kit (reference-design/), but inverted to a light, print-forward canvas where the prints carry the drama and the chrome stays quiet. Naming: --chp-* = Chhaap design tokens. This file is the single source of truth for the design system. Fonts: named here but NOT loaded yet - font loading (Marcellus + Palanquin, self-hosted) lands in the next step via Blocksy typography settings. The stacks below degrade gracefully in the meantime. Verified contrast (WCAG 2.1, computed): ink #1b2a4a on canvas #faf6f0 .... 13.4:1 AAA text #3a3632 on canvas ........... 10.0:1 AAA muted #6b655e on canvas ............ 5.3:1 AA white on accent #b8321f ............ 6.0:1 AA (button fills) white on accent-bright #e82e1e ..... 4.3:1 large text / UI only ========================================================================== */ :root { /* -- Brand palette (approved) ------------------------------------------ */ --chp-canvas: #faf6f0; /* base surface - unbleached-cotton ivory */ --chp-ink: #1b2a4a; /* indigo - headings, dark sections */ --chp-text: #3a3632; /* warm charcoal - body copy */ --chp-text-muted: #6b655e; /* secondary copy, meta (5.3:1) */ --chp-accent: #b8321f; /* madder red - CTAs, links (AA on white) */ --chp-accent-bright: #e82e1e; /* brand bright - hover, badges, display */ --chp-sand: #e8dccb; /* tinted sections, cards */ --chp-mustard: #d9a425; /* secondary print accent */ --chp-border: #d8d2c8; /* hairlines, dividers */ /* -- Print accents (print-specific, not Blocksy palette slots) ---------- */ --chp-leaf: #2f5d50; /* block-print leaf green */ --chp-success: #2f7d4f; --chp-sale: #c2185b; /* rani pink - sale badges */ /* -- Surfaces ---------------------------------------------------------- */ --chp-surface: #ffffff; --chp-surface-alt: var(--chp-canvas); --chp-surface-tint: var(--chp-sand); --chp-surface-dark: var(--chp-ink); --chp-on-dark: #f7f3ec; --chp-overlay: rgb(27 42 74 / 45%); /* photo overlays */ /* -- Focus ring (accessibility) ---------------------------------------- */ --chp-focus-ring: 2px solid var(--chp-accent); --chp-focus-offset: 2px; } /* -------------------------------------------------------------------------- Blocksy palette bridge Maps Blocksy's 8 palette slots onto the brand tokens above so Blocksy's own components (links, buttons, borders, WooCommerce) pick up the brand. Two notes: 1. Selector is `html:root`, one notch more specific than Blocksy's own `:root` block, so the brand wins regardless of stylesheet order. 2. ALTERNATIVE: enter the same 8 colours in Customizer -> General -> Colors and delete this block. You will need to do that anyway for the block editor palette to match, because the editor palette is generated from the Customizer, not from CSS. -------------------------------------------------------------------------- */ html:root { --theme-palette-color-1: var(--chp-canvas); --theme-palette-color-2: var(--chp-ink); --theme-palette-color-3: var(--chp-text); --theme-palette-color-4: var(--chp-accent); --theme-palette-color-5: var(--chp-accent-bright); --theme-palette-color-6: var(--chp-sand); --theme-palette-color-7: var(--chp-mustard); --theme-palette-color-8: var(--chp-border); } /* ========================================================================== TYPOGRAPHY TOKENS Option A: editorial serif display + humanist sans body. ========================================================================== */ :root { --chp-font-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif; --chp-font-body: "Palanquin", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --chp-font-eyebrow: var(--chp-font-body); --chp-weight-light: 300; --chp-weight-regular: 400; --chp-weight-medium: 500; --chp-weight-semibold: 600; /* Fluid scale: value at ~390px viewport -> value at 1440px+ */ --chp-fs-display: clamp(2.75rem, 6vw, 4.5rem); /* 44 -> 72px hero */ --chp-fs-h1: clamp(2.25rem, 4.5vw, 3.5rem); /* 36 -> 56px */ --chp-fs-h2: clamp(1.75rem, 3vw, 2.5rem); /* 28 -> 40px */ --chp-fs-h3: clamp(1.375rem, 2vw, 1.75rem); /* 22 -> 28px */ --chp-fs-h4: clamp(1.125rem, 1.5vw, 1.375rem); /* 18 -> 22px */ --chp-fs-body: clamp(1rem, 1.05vw, 1.125rem); /* 16 -> 18px */ --chp-fs-price: clamp(1rem, 1.2vw, 1.125rem); --chp-fs-small: 0.9375rem; /* 15px */ --chp-fs-caption: 0.8125rem; /* 13px */ --chp-fs-eyebrow: 0.75rem; /* 12px */ --chp-fs-button: 0.8125rem; /* 13px */ --chp-lh-display: 1.08; --chp-lh-heading: 1.2; --chp-lh-tight: 1.35; --chp-lh-body: 1.65; --chp-tracking-tight: -0.01em; --chp-tracking-heading: 0.01em; --chp-tracking-button: 0.08em; --chp-tracking-eyebrow: 0.12em; } /* ========================================================================== LAYOUT TOKENS ========================================================================== */ :root { --chp-container-narrow: 760px; --chp-container: 1240px; --chp-container-wide: 1440px; --chp-gutter: clamp(1rem, 2.5vw, 2rem); /* 4px-based spacing scale */ --chp-space-1: 0.25rem; /* 4px */ --chp-space-2: 0.5rem; /* 8px */ --chp-space-3: 0.75rem; /* 12px */ --chp-space-4: 1rem; /* 16px */ --chp-space-5: 1.5rem; /* 24px */ --chp-space-6: 2rem; /* 32px */ --chp-space-7: 2.5rem; /* 40px */ --chp-space-8: 3rem; /* 48px */ --chp-space-9: 4rem; /* 64px */ --chp-space-10: 6rem; /* 96px */ /* Section rhythm (tighter than the reference kit's 140/80) */ --chp-section-y: clamp(3rem, 7vw, 7.5rem); /* 48 -> 120px */ --chp-section-y-tight: clamp(2.5rem, 5vw, 5rem); /* 40 -> 80px */ --chp-hero-y: clamp(6rem, 14vw, 15rem); /* 96 -> 240px */ --chp-grid-gap: clamp(1rem, 2vw, 1.75rem); /* Sharp geometry echoes the carved block - no rounded cards */ --chp-radius-none: 0; --chp-radius-sm: 2px; --chp-radius-md: 4px; --chp-radius-pill: 999px; --chp-border-width: 1px; --chp-border-color: var(--chp-border); --chp-border-hairline: var(--chp-border-width) solid var(--chp-border-color); /* Product photography ratios */ --chp-ratio-product: 4 / 5; --chp-ratio-card: 3 / 4; --chp-ratio-lifestyle: 3 / 2; } /* ========================================================================== MOTION, ELEVATION, MOTIFS, LAYERS ========================================================================== */ :root { --chp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --chp-transition-fast: 150ms var(--chp-ease); --chp-transition: 250ms var(--chp-ease); --chp-transition-slow: 400ms var(--chp-ease); --chp-shadow-sm: 0 1px 2px rgb(27 42 74 / 6%); --chp-shadow-md: 0 8px 24px rgb(27 42 74 / 8%); --chp-shadow-lg: 0 18px 48px rgb(27 42 74 / 12%); /* Block-print motif system: dividers, section watermarks, card trims */ --chp-motif-color: var(--chp-ink); --chp-motif-opacity: 6%; --chp-motif-band: 16px; --chp-z-header: 100; --chp-z-drawer: 200; --chp-z-modal: 300; }