/* ========================================================================== HIND GRANITES & TILES — DESIGN TOKENS System name: "Quarried Light" -------------------------------------------------------------------------- The single source of truth for every value in the design system. Layer 1 = primitives (raw scales, never used directly in components) Layer 2 = semantic (what components actually reference) Elementor note: every value here is a plain CSS custom property on :root, so it can be pasted into Elementor > Site Settings > Custom CSS and used inside any widget's custom CSS without modification. ========================================================================== */ :root { /* ====================================================================== 1. PRIMITIVES — COLOR ====================================================================== */ /* Ink — warm near-blacks. Cool greys read "tech"; stone needs warmth. */ --hm-ink-900: #14100f; --hm-ink-800: #241e1c; --hm-ink-700: #3a312e; --hm-ink-600: #554a45; --hm-ink-500: #6e625c; --hm-ink-400: #8c807a; --hm-ink-300: #b0a69f; --hm-ink-200: #cec6c0; /* Stone — the warm off-white ground. Pure #fff is never used as a page bg; it is reserved for raised surfaces so cards separate without shadows. */ --hm-stone-0: #ffffff; --hm-stone-50: #fbf9f7; --hm-stone-100: #f5f1ed; --hm-stone-200: #ede7e1; --hm-stone-300: #e2dad2; --hm-stone-400: #d2c8be; /* Maroon — the brand primary. Deepened for contrast, but chroma kept so it reads as oxblood rather than brown-black. */ --hm-maroon-900: #3d0e18; --hm-maroon-800: #56141f; --hm-maroon-700: #6b1b29; --hm-maroon-600: #7e2233; --hm-maroon-500: #963244; --hm-maroon-200: #e8ccd2; --hm-maroon-100: #f5e6e9; /* Brass — accent. Aged metal, not yellow gold. Used sparingly: rules, eyebrow text, icon strokes, active states. Never for large fills. */ --hm-brass-800: #6f5420; --hm-brass-700: #8a6a28; --hm-brass-600: #a8832f; --hm-brass-500: #c09a3e; --hm-brass-200: #e8d9ae; --hm-brass-100: #f5edd8; /* Feedback */ --hm-success-600: #2f6b47; --hm-success-100: #e3f0e8; --hm-warning-600: #9a6b12; --hm-warning-100: #fbf0d9; --hm-error-600: #a32020; --hm-error-100: #fae4e4; /* ====================================================================== 2. SEMANTIC — COLOR ====================================================================== */ /* Surfaces */ --color-bg: var(--hm-stone-50); --color-surface: var(--hm-stone-0); --color-surface-sunken: var(--hm-stone-100); --color-surface-muted: var(--hm-stone-200); --color-surface-inverse: var(--hm-ink-900); /* Text */ --color-text: var(--hm-ink-900); --color-text-secondary: var(--hm-ink-600); --color-text-muted: var(--hm-ink-500); --color-text-subtle: var(--hm-ink-400); --color-text-inverse: var(--hm-stone-50); --color-text-on-primary: #ffffff; /* Brand */ --color-primary: var(--hm-maroon-600); --color-primary-hover: var(--hm-maroon-700); --color-primary-active: var(--hm-maroon-800); --color-primary-deep: var(--hm-maroon-900); --color-primary-tint: var(--hm-maroon-100); --color-accent: var(--hm-brass-600); --color-accent-hover: var(--hm-brass-700); --color-accent-tint: var(--hm-brass-100); /* Lines — thin architectural rules, per the blueprint metaphor */ --color-border: var(--hm-stone-300); --color-border-strong: var(--hm-stone-400); --color-border-subtle: var(--hm-stone-200); --color-border-inverse: rgba(255, 255, 255, 0.16); --color-rule-accent: var(--hm-brass-500); /* Feedback */ --color-success: var(--hm-success-600); --color-warning: var(--hm-warning-600); --color-error: var(--hm-error-600); /* Focus — must be visible on both light stone and dark imagery */ --color-focus: var(--hm-brass-600); --focus-ring: 0 0 0 3px var(--hm-stone-50), 0 0 0 5px var(--color-focus); --focus-ring-tight: 0 0 0 2px var(--color-focus); /* Image scrims — for text-over-photography legibility (WCAG) */ --scrim-ink: linear-gradient(180deg, rgba(20,16,15,0) 0%, rgba(20,16,15,.72) 100%); --scrim-hero: linear-gradient(180deg, rgba(20,16,15,.55) 0%, rgba(20,16,15,.30) 45%, rgba(20,16,15,.78) 100%); --scrim-maroon: linear-gradient(180deg, rgba(61,14,24,0) 0%, rgba(61,14,24,.80) 100%); /* ====================================================================== 3. TYPOGRAPHY ---------------------------------------------------------------------- Fraunces — display/headings. Variable, high optical contrast. Carries the "luxury architecture monograph" register. Inter — body, UI, and all technical data. Tabular figures matter: spec tables of thickness/dimensions must align. ====================================================================== */ /* Single-typeface system: Poppins throughout, per client direction. Display and body share the family; hierarchy comes from weight and size, not from a serif/sans contrast. */ --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Poppins is not a variable font here, so no custom axes. Kept as a token so every `font-variation-settings: var(--font-display-settings)` call across the CSS resolves to a harmless value. */ --font-display-settings: normal; /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Fluid type scale — clamp(min, preferred, max). Min values are the mobile size; max values the desktop size. No media queries needed, and nothing ever overflows a 320px viewport. */ --text-display-xl: clamp(2.75rem, 1.65rem + 4.6vw, 5.25rem); /* 44 → 84 */ --text-display-lg: clamp(2.25rem, 1.55rem + 3.0vw, 4rem); /* 36 → 64 */ --text-h1: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); /* 32 → 52 */ --text-h2: clamp(1.625rem,1.25rem + 1.7vw, 2.5rem); /* 26 → 40 */ --text-h3: clamp(1.3125rem,1.08rem + 1.0vw, 1.875rem);/* 21 → 30 */ --text-h4: clamp(1.125rem,1.03rem + 0.4vw, 1.375rem); /* 18 → 22 */ --text-h5: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 → 18 */ --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* 17 → 20 */ --text-body-lg: 1.125rem; /* 18 */ --text-body: 1rem; /* 16 */ --text-body-sm: 0.9375rem; /* 15 */ --text-caption: 0.8125rem; /* 13 */ --text-label: 0.75rem; /* 12 — always uppercase + tracked */ /* Line heights — tighter as type gets larger */ --lh-display: 1.04; --lh-heading: 1.14; --lh-snug: 1.32; --lh-body: 1.65; --lh-relaxed: 1.75; --lh-flat: 1; /* Letter spacing — eased for Poppins, whose geometric letterforms crowd under the heavy negative tracking a serif could carry. */ --ls-display: -0.02em; --ls-heading: -0.015em; --ls-snug: -0.008em; --ls-normal: 0; --ls-wide: 0.06em; --ls-label: 0.14em; /* eyebrow / label caps */ /* Measure — never let body copy run past a comfortable reading width */ --measure-narrow: 46ch; --measure: 68ch; --measure-wide: 80ch; /* ====================================================================== 4. SPACING — 4px base unit ====================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ --space-40: 10rem; /* 160 */ /* Section rhythm — the "room to breathe" the brand depends on. Scales down gracefully on mobile without a media query. */ --section-y: clamp(3.5rem, 2rem + 6.2vw, 7.5rem); /* 56 → 120 */ --section-y-lg: clamp(4.5rem, 2.4rem + 8.6vw, 10rem); /* 72 → 160 */ --section-y-sm: clamp(2.5rem, 1.6rem + 3.8vw, 5rem); /* 40 → 80 */ --section-gap: clamp(2rem, 1.2rem + 3.2vw, 4rem); /* 32 → 64 */ /* ====================================================================== 5. LAYOUT ====================================================================== */ --container-max: 1280px; /* default 12-col container */ --container-wide: 1480px; /* galleries, full-bleed grids */ --container-narrow: 820px; /* article + long-form copy */ --container-form: 640px; --gutter: clamp(1rem, 0.55rem + 2.2vw, 4rem); /* 16 → 64 */ --grid-gap: clamp(1rem, 0.7rem + 1.4vw, 1.5rem); /* 16 → 24 */ --grid-gap-lg: clamp(1.5rem, 1rem + 2vw, 2.5rem); /* 24 → 40 */ --grid-columns: 12; --header-height: 100px; --header-height-scroll: 76px; --header-height-mobile: 76px; /* ====================================================================== 6. SHAPE ---------------------------------------------------------------------- Restrained. Slabs are cut, not moulded — heavy rounding cheapens it. ====================================================================== */ --radius-xs: 2px; --radius-sm: 4px; /* buttons, inputs */ --radius-md: 6px; --radius-lg: 8px; /* cards framing photography */ --radius-xl: 12px; /* modals, large panels */ --radius-pill: 999px; /* tags, badges only */ --border-hairline: 1px; --border-thick: 2px; /* ====================================================================== 7. ELEVATION ---------------------------------------------------------------------- Ambient, warm-tinted, very low opacity. Depth comes from tonal layers and hairline rules first; shadow is only an interaction affordance. ====================================================================== */ --shadow-xs: 0 1px 2px rgba(36, 30, 28, 0.04); --shadow-sm: 0 2px 8px rgba(36, 30, 28, 0.05); --shadow-md: 0 8px 24px rgba(36, 30, 28, 0.07); --shadow-lg: 0 18px 48px rgba(36, 30, 28, 0.09); --shadow-xl: 0 32px 80px rgba(36, 30, 28, 0.12); --shadow-header: 0 1px 0 var(--color-border), 0 6px 24px rgba(36, 30, 28, 0.05); /* ====================================================================== 8. MOTION ---------------------------------------------------------------------- Confident and slow. Luxury moves deliberately; nothing bounces. ====================================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-subtle: cubic-bezier(0.4, 0, 0.2, 1); --duration-instant: 90ms; --duration-fast: 180ms; --duration-base: 280ms; --duration-slow: 480ms; --duration-slower: 720ms; --duration-image: 900ms; /* image scale on card hover */ --transition-base: all var(--duration-base) var(--ease-out); --transition-color: color var(--duration-fast) var(--ease-subtle), background-color var(--duration-fast) var(--ease-subtle), border-color var(--duration-fast) var(--ease-subtle); /* ====================================================================== 9. Z-INDEX — named, so nothing is ever guessed ====================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-drawer: 400; --z-overlay: 500; --z-modal: 600; --z-toast: 700; --z-float: 800; /* WhatsApp floating CTA */ /* ====================================================================== 10. ASPECT RATIOS — consistent image framing across the whole site ====================================================================== */ --ratio-square: 1 / 1; /* product swatches */ --ratio-portrait: 3 / 4; /* collection cards */ --ratio-landscape: 4 / 3; --ratio-wide: 16 / 9; /* projects, blog */ --ratio-slab: 21 / 9; /* slab / banner strips */ } /* ========================================================================== REDUCED MOTION Collapse all durations to near-zero rather than disabling rules one by one. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-slower: 1ms; --duration-image: 1ms; } }