/* ========================================================================== NHÀ HẠT ÉTOFFE — v3.0 DESIGN TOKENS Single source of truth. Every legacy alias is mapped here so that old page-scoped variable names keep working while the new scale takes over. Loaded FIRST (before style.css consumers) and cached forever. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND PALETTE — Étoffe Atelier Cream paper canvas, espresso ink, brushed brass. Nothing else. --------------------------------------------------------------------- */ /* Espresso (ink) — warm brown-black, never pure black */ --nhe-espresso-900: #241C17; --nhe-espresso-800: #2E241D; --nhe-espresso-700: #3D3027; --nhe-espresso-600: #4A3B32; --nhe-espresso-500: #5C4A3E; --nhe-espresso-400: #7A6558; --nhe-espresso-300: #9C8778; --nhe-espresso-200: #C4B5A7; --nhe-espresso-100: #E4DAD0; /* Brass (accent) — the single accent hue */ --nhe-brass-700: #8C6A42; --nhe-brass-600: #A87F52; --nhe-brass-500: #C19A6B; --nhe-brass-400: #D2B189; --nhe-brass-300: #E2C9A9; --nhe-brass-200: #EFDFC9; --nhe-brass-100: #F7EFE3; /* Cream (canvas) */ --nhe-cream-50: #FEFDFB; --nhe-cream-100: #FAF8F5; --nhe-cream-200: #F4F0EA; --nhe-cream-300: #EBE5DC; --nhe-cream-400: #DED6CA; /* Botanical support hues — used sparingly, only for fabric taxonomy */ --nhe-sage-500: #7C8C6F; --nhe-sage-300: #A9B79C; --nhe-sage-100: #E8EDE2; --nhe-clay-500: #A9714F; --nhe-clay-100: #F5E7DE; /* Feedback / status */ --nhe-success: #4F7A45; --nhe-success-bg: #EAF3E6; --nhe-danger: #A63D2F; --nhe-danger-bg: #FBEAE6; --nhe-warning: #A87F52; --nhe-warning-bg: #FBF2E3; /* --------------------------------------------------------------------- 2. SEMANTIC ROLES — always use these in new code --------------------------------------------------------------------- */ --nhe-canvas: var(--nhe-cream-100); --nhe-canvas-raised: var(--nhe-cream-50); --nhe-canvas-sunken: var(--nhe-cream-200); --nhe-ink: var(--nhe-espresso-700); --nhe-ink-strong: var(--nhe-espresso-900); --nhe-ink-muted: var(--nhe-espresso-400); --nhe-ink-faint: var(--nhe-espresso-300); --nhe-line: rgba(74, 59, 50, 0.10); --nhe-line-strong: rgba(74, 59, 50, 0.18); --nhe-accent: var(--nhe-brass-500); --nhe-accent-deep: var(--nhe-brass-700); --nhe-accent-soft: var(--nhe-brass-100); /* --------------------------------------------------------------------- 3. LIQUID GLASS — Apple iOS inspired material system Three tiers only. Restraint is the aesthetic: glass is used for floating/overlay chrome, NEVER for body content. --------------------------------------------------------------------- */ /* tier 1 — thin: nav bars, chips, inline toolbars */ --nhe-glass-thin-bg: rgba(255, 253, 250, 0.62); --nhe-glass-thin-blur: 14px; --nhe-glass-thin-sat: 180%; /* tier 2 — regular: cards, filter rail, sticky bars */ --nhe-glass-reg-bg: rgba(255, 253, 250, 0.74); --nhe-glass-reg-blur: 24px; --nhe-glass-reg-sat: 190%; /* tier 3 — thick: modals, drawers, sheets */ --nhe-glass-thick-bg: rgba(252, 249, 245, 0.86); --nhe-glass-thick-blur: 40px; --nhe-glass-thick-sat: 200%; /* dark glass for hero/media overlays */ --nhe-glass-dark-bg: rgba(36, 28, 23, 0.42); --nhe-glass-dark-blur: 20px; /* specular edges — the "liquid" part: light catching a rounded edge */ --nhe-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(74, 59, 50, 0.06), 0 1px 2px rgba(36, 28, 23, 0.04); --nhe-glass-edge-strong: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.30), 0 1px 3px rgba(36, 28, 23, 0.06); /* --------------------------------------------------------------------- 4. ELEVATION — soft, warm, never grey --------------------------------------------------------------------- */ --nhe-shadow-xs: 0 1px 2px rgba(36, 28, 23, 0.05); --nhe-shadow-sm: 0 2px 6px rgba(36, 28, 23, 0.06), 0 1px 2px rgba(36, 28, 23, 0.04); --nhe-shadow-md: 0 8px 20px -6px rgba(36, 28, 23, 0.12), 0 2px 6px rgba(36, 28, 23, 0.05); --nhe-shadow-lg: 0 22px 48px -16px rgba(36, 28, 23, 0.18), 0 6px 16px -8px rgba(36, 28, 23, 0.08); --nhe-shadow-xl: 0 40px 80px -24px rgba(36, 28, 23, 0.24), 0 12px 28px -12px rgba(36, 28, 23, 0.10); --nhe-shadow-accent: 0 10px 28px -10px rgba(193, 154, 107, 0.45); /* --------------------------------------------------------------------- 5. RADII — squircle-leaning, Apple-flavoured --------------------------------------------------------------------- */ --nhe-r-xs: 6px; --nhe-r-sm: 10px; --nhe-r-md: 16px; --nhe-r-lg: 22px; --nhe-r-xl: 30px; --nhe-r-2xl: 40px; --nhe-r-pill: 999px; /* --------------------------------------------------------------------- 6. TYPE SCALE — fluid, clamped, 1.25 ratio Faces are the brand's own licensed fonts, self-hosted as woff2 subsets (see _tools/fontwork/build-fonts.js). Nothing is requested from fonts.googleapis.com, which removes two render-blocking stylesheets plus two extra TLS handshakes from the critical path. --------------------------------------------------------------------- */ --nhe-font-display: 'The Seasons', 'Playfair Display', Georgia, 'Times New Roman', serif; --nhe-font-body: 'Gilroy', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --nhe-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; --nhe-fs-2xs: 0.6875rem; /* 11px */ --nhe-fs-xs: 0.75rem; /* 12px */ --nhe-fs-sm: 0.8125rem; /* 13px */ --nhe-fs-md: 0.9375rem; /* 15px — body default */ --nhe-fs-lg: 1.0625rem; /* 17px */ --nhe-fs-xl: 1.25rem; /* 20px */ --nhe-fs-2xl: clamp(1.375rem, 0.9rem + 1.6vw, 1.75rem); --nhe-fs-3xl: clamp(1.625rem, 1rem + 2.2vw, 2.25rem); --nhe-fs-4xl: clamp(2rem, 1.1rem + 3.4vw, 3rem); --nhe-fs-5xl: clamp(2.5rem, 1.2rem + 5vw, 4.25rem); --nhe-fs-6xl: clamp(3rem, 1.2rem + 6.4vw, 5.5rem); --nhe-lh-tight: 1.08; --nhe-lh-snug: 1.22; --nhe-lh-normal: 1.5; --nhe-lh-relaxed:1.68; --nhe-tracking-tight: -0.022em; --nhe-tracking-normal: 0; --nhe-tracking-wide: 0.06em; --nhe-tracking-wider: 0.14em; /* --------------------------------------------------------------------- 7. SPACE — 4px base --------------------------------------------------------------------- */ --nhe-s-1: 4px; --nhe-s-2: 8px; --nhe-s-3: 12px; --nhe-s-4: 16px; --nhe-s-5: 20px; --nhe-s-6: 24px; --nhe-s-7: 32px; --nhe-s-8: 40px; --nhe-s-9: 56px; --nhe-s-10: 72px; --nhe-s-11: 96px; --nhe-s-12: 128px; /* Fluid section rhythm */ --nhe-section-y: clamp(56px, 7vw, 120px); --nhe-gutter: clamp(16px, 4vw, 40px); --nhe-maxw: 1320px; --nhe-maxw-text: 68ch; /* --------------------------------------------------------------------- 8. MOTION — Apple spring-ish curves, Material durations --------------------------------------------------------------------- */ --nhe-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* expressive decel */ --nhe-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --nhe-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */ --nhe-ease-standard:cubic-bezier(0.2, 0, 0, 1); /* Material 3 */ --nhe-dur-instant: 90ms; --nhe-dur-fast: 160ms; --nhe-dur-base: 260ms; --nhe-dur-slow: 420ms; --nhe-dur-slower: 680ms; /* --------------------------------------------------------------------- 9. Z-INDEX LADDER — one authority, no more 9999 wars --------------------------------------------------------------------- */ --nhe-z-base: 1; --nhe-z-sticky: 80; --nhe-z-header: 120; --nhe-z-dropdown: 140; --nhe-z-drawer: 200; --nhe-z-overlay: 190; --nhe-z-modal: 300; --nhe-z-toast: 400; --nhe-z-skip: 500; /* --------------------------------------------------------------------- 10. LAYOUT CONSTANTS --------------------------------------------------------------------- */ --nhe-header-h: 74px; --nhe-header-h-compact: 60px; /* Referenced by header-footer.css (legacy mobile rule). It was undefined in v2.4.6 and only worked via its 58px fallback — a latent drift bug. */ --nhe-header-h-mob-scrolled: 58px; --nhe-focus-ring: 0 0 0 3px rgba(193, 154, 107, 0.42); /* ===================================================================== LEGACY ALIASES — do NOT use in new code. These keep the ~7000 lines of existing page-scoped CSS rendering correctly while the v3 components migrate to the semantic tokens above. ===================================================================== */ --c-primary: var(--nhe-espresso-600); --c-primary-light: var(--nhe-espresso-500); --c-secondary: var(--nhe-brass-500); --c-gold: var(--nhe-brass-500); --c-gold-light: var(--nhe-brass-300); --c-text: var(--nhe-espresso-700); --c-text-muted: var(--nhe-espresso-400); --c-white: #FFFFFF; --c-bg: var(--nhe-cream-100); --c-beige-main: var(--nhe-cream-200); --c-beige-light: var(--nhe-cream-100); --c-beige-dark: var(--nhe-cream-300); --c-sage: var(--nhe-sage-500); --c-sage-light: var(--nhe-sage-100); --nhe-gold: var(--nhe-brass-500); --nhe-gold-light: var(--nhe-brass-300); --nhe-gold-subtle: var(--nhe-brass-100); --nhe-espresso: var(--nhe-espresso-600); --nhe-espresso-light: var(--nhe-espresso-500); --nhe-espresso-dark: var(--nhe-espresso-900); --nhe-cream: var(--nhe-cream-100); --nhe-text-main: var(--nhe-espresso-700); --nhe-text-sub: var(--nhe-espresso-400); --nhe-border: var(--nhe-line); --nhe-card-bg: var(--nhe-cream-50); --nhe-font-title: var(--nhe-font-display); --nhe-radius-sm: var(--nhe-r-sm); --nhe-radius-md: var(--nhe-r-md); --nhe-radius-lg: var(--nhe-r-lg); --font-display: var(--nhe-font-display); --font-heading: var(--nhe-font-display); --font-body: var(--nhe-font-body); --primary: var(--nhe-espresso-600); --accent: var(--nhe-brass-500); --bg: var(--nhe-cream-100); --bg-main: var(--nhe-cream-100); --bg-surface: var(--nhe-cream-50); --text: var(--nhe-espresso-700); --text-primary: var(--nhe-espresso-700); --text-secondary: var(--nhe-espresso-500); --text-muted: var(--nhe-espresso-400); --border: var(--nhe-line); --border-color: var(--nhe-line); --radius-sm: var(--nhe-r-sm); --radius-md: var(--nhe-r-md); --radius-lg: var(--nhe-r-lg); --radius-pill: var(--nhe-r-pill); --shadow-sm: var(--nhe-shadow-sm); --shadow-md: var(--nhe-shadow-md); --shadow-lg: var(--nhe-shadow-lg); --shadow-hover: var(--nhe-shadow-lg); --transition: var(--nhe-dur-base) var(--nhe-ease-out); --accent-sage: var(--nhe-sage-500); --accent-sage-light:var(--nhe-sage-100); --accent-terracotta:var(--nhe-clay-500); --accent-terracotta-light: var(--nhe-clay-100); } /* -------------------------------------------------------------------------- LEGACY SCOPE BRIDGE Old page templates re-declared the core palette at :root 7 separate times (~1.1KB of duplicate CSS each). Those blocks are neutralised in the v3 templates; these rules guarantee identical values for any page that is still served from an older template file dropped in by a child theme. -------------------------------------------------------------------------- */ :root { --c-primary: #4A3B32; --c-gold: #C19A6B; --c-secondary: #C19A6B; --c-text: #3D3027; --c-text-muted: #7A6558; --c-bg: #FAF8F5; } /* -------------------------------------------------------------------------- DARK-CONTEXT GLASS Applied to sections that sit on photography (hero, footer, media cards). -------------------------------------------------------------------------- */ .nhe-on-media { --nhe-glass-thin-bg: rgba(36, 28, 23, 0.34); --nhe-glass-reg-bg: rgba(36, 28, 23, 0.46); --nhe-glass-thick-bg: rgba(36, 28, 23, 0.72); --nhe-line: rgba(255, 255, 255, 0.16); --nhe-ink: #F5EFE7; --nhe-ink-muted: rgba(245, 239, 231, 0.72); } /* -------------------------------------------------------------------------- FALLBACK: browsers without backdrop-filter get solid surfaces so text contrast never depends on the blur. -------------------------------------------------------------------------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --nhe-glass-thin-bg: rgba(255, 253, 250, 0.97); --nhe-glass-reg-bg: rgba(255, 253, 250, 0.98); --nhe-glass-thick-bg: rgba(252, 249, 245, 1); } }