/* * ================================================================ * HESSE INTERNATIONAL - MASTER DESIGN TOKENS * theme-variables.css * * PREFIX: --hs-* (all variables) | .hs-* (all utility classes) * ================================================================ */ :root { /* ================================================================ 01. BRAND COLOUR PALETTE ================================================================ */ --hs-palette-navy-900: #060F22; --hs-palette-navy-800: #0A1F44; --hs-palette-navy-700: #0E2751; --hs-palette-navy-600: #112F5F; --hs-palette-navy-500: #1A3D77; --hs-palette-navy-400: #2451A0; --hs-palette-navy-300: #3A6BC2; --hs-palette-navy-100: #C8D8F0; --hs-palette-navy-050: #EBF0FA; --hs-palette-grey-950: #0F0F14; --hs-palette-grey-900: #1A1A2E; --hs-palette-grey-800: #2E2E42; --hs-palette-grey-700: #44445A; --hs-palette-grey-600: #5C6280; --hs-palette-grey-500: #7A80A0; --hs-palette-grey-400: #9EA3B8; --hs-palette-grey-300: #C4C8D8; --hs-palette-grey-200: #D9DCE8; --hs-palette-grey-100: #EFF0F6; --hs-palette-grey-050: #F5F6FA; --hs-palette-grey-000: #FFFFFF; /* Accent family - derived from the Hesse logo */ --hs-palette-accent-700: #0A6BC7; --hs-palette-accent-600: #17A8E5; --hs-palette-accent-500: #2BC5F1; --hs-palette-accent-400: #71E2FB; --hs-palette-accent-100: #E6F8FE; --hs-palette-green-600: #128C7E; --hs-palette-green-500: #25D366; --hs-palette-green-100: #D5F5E3; --hs-palette-red-700: #922B21; --hs-palette-red-600: #C0392B; --hs-palette-red-500: #E74C3C; --hs-palette-red-100: #FDECEA; --hs-palette-amber-600: #D97706; --hs-palette-amber-100: #FEF3C7; /* ================================================================ 02. SEMANTIC COLOUR TOKENS ================================================================ */ --hs-color-text-primary: var(--hs-palette-grey-900); --hs-color-text-secondary: var(--hs-palette-grey-600); --hs-color-text-tertiary: var(--hs-palette-grey-500); --hs-color-text-inverse: var(--hs-palette-grey-000); --hs-color-text-inverse-muted: rgba(255, 255, 255, 0.65); --hs-color-text-accent: var(--hs-palette-accent-700); --hs-color-text-brand: var(--hs-palette-navy-800); --hs-color-text-link: var(--hs-palette-navy-400); --hs-color-text-link-hover: var(--hs-palette-navy-300); --hs-color-text-danger: var(--hs-palette-red-600); --hs-color-text-success: var(--hs-palette-green-600); --hs-color-text-warning: var(--hs-palette-amber-600); --hs-color-text-logo: #000000; --hs-color-bg-page: var(--hs-palette-grey-000); --hs-color-bg-subtle: var(--hs-palette-grey-050); --hs-color-bg-card: var(--hs-palette-grey-000); --hs-color-bg-card-hover: var(--hs-palette-grey-050); --hs-color-bg-elevated: var(--hs-palette-grey-000); --hs-color-bg-brand: var(--hs-palette-navy-800); --hs-color-bg-brand-deep: var(--hs-palette-navy-900); --hs-color-bg-brand-mid: var(--hs-palette-navy-700); --hs-color-bg-accent: var(--hs-palette-accent-600); --hs-color-bg-accent-subtle: var(--hs-palette-accent-100); --hs-color-bg-urgency: var(--hs-palette-red-700); --hs-color-bg-overlay: rgba(6, 15, 34, 0.72); --hs-color-bg-glass: rgba(10, 31, 68, 0.55); --hs-color-bg-glass-light: rgba(255, 255, 255, 0.07); --hs-color-bg-danger: var(--hs-palette-red-100); --hs-color-bg-success: var(--hs-palette-green-100); --hs-color-bg-warning: var(--hs-palette-amber-100); --hs-color-bg-whatsapp: var(--hs-palette-green-600); --hs-color-bg-whatsapp-hover: var(--hs-palette-green-500); --hs-color-border-default: var(--hs-palette-grey-200); --hs-color-border-subtle: var(--hs-palette-grey-100); --hs-color-border-strong: var(--hs-palette-grey-300); --hs-color-border-brand: var(--hs-palette-navy-800); --hs-color-border-accent: var(--hs-palette-accent-600); --hs-color-border-accent-subtle: rgba(23, 168, 229, 0.28); --hs-color-border-inverse: rgba(255, 255, 255, 0.12); --hs-color-border-inverse-strong: rgba(255, 255, 255, 0.25); --hs-color-border-focus: var(--hs-palette-navy-400); --hs-color-border-danger: var(--hs-palette-red-500); --hs-color-icon-default: var(--hs-palette-grey-600); --hs-color-icon-brand: var(--hs-palette-navy-800); --hs-color-icon-accent: var(--hs-palette-accent-600); --hs-color-icon-inverse: var(--hs-palette-grey-000); --hs-color-icon-success: var(--hs-palette-green-600); --hs-color-icon-danger: var(--hs-palette-red-600); /* ================================================================ 03. GRADIENTS ================================================================ */ --hs-gradient-hero: linear-gradient(135deg, var(--hs-palette-navy-900) 0%, var(--hs-palette-navy-800) 40%, var(--hs-palette-navy-700) 75%, var(--hs-palette-navy-800) 100%); --hs-gradient-hero-radial: radial-gradient(ellipse at 70% 30%, rgba(43, 197, 241, 0.16) 0%, transparent 60%), var(--hs-gradient-hero); --hs-gradient-dark-section: linear-gradient(160deg, var(--hs-palette-navy-800) 0%, var(--hs-palette-navy-900) 100%); --hs-gradient-cta: linear-gradient(135deg, var(--hs-palette-navy-900) 0%, var(--hs-palette-navy-700) 50%, var(--hs-palette-navy-900) 100%); --hs-gradient-accent: linear-gradient(90deg, var(--hs-palette-accent-700) 0%, var(--hs-palette-accent-600) 50%, var(--hs-palette-accent-500) 100%); --hs-gradient-accent-shimmer: linear-gradient(90deg, var(--hs-palette-accent-700) 0%, var(--hs-palette-accent-400) 30%, var(--hs-palette-accent-600) 60%, var(--hs-palette-accent-700) 100%); --hs-gradient-accent-vertical: linear-gradient(180deg, var(--hs-palette-accent-500) 0%, var(--hs-palette-accent-700) 100%); --hs-gradient-card-featured: linear-gradient(145deg, var(--hs-palette-navy-800) 0%, var(--hs-palette-navy-700) 100%); --hs-gradient-grid-overlay: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); --hs-gradient-urgency: linear-gradient(135deg, var(--hs-palette-red-700) 0%, var(--hs-palette-red-600) 100%); --hs-gradient-text-accent: linear-gradient(90deg, var(--hs-palette-accent-700) 0%, var(--hs-palette-accent-500) 50%, var(--hs-palette-accent-600) 100%); --hs-gradient-band-accent: linear-gradient(90deg, var(--hs-palette-accent-700) 0%, var(--hs-palette-accent-600) 50%, var(--hs-palette-accent-700) 100%); --hs-gradient-orb-accent: radial-gradient(circle, rgba(43, 197, 241, 0.18) 0%, transparent 68%); --hs-gradient-orb-navy: radial-gradient(circle, rgba(26, 61, 119, 0.75) 0%, transparent 68%); --hs-gradient-fade-left: linear-gradient(to right, var(--hs-palette-grey-000), transparent); --hs-gradient-fade-right: linear-gradient(to left, var(--hs-palette-grey-000), transparent); --hs-gradient-fade-left-dark: linear-gradient(to right, var(--hs-palette-navy-800), transparent); --hs-gradient-fade-right-dark: linear-gradient(to left, var(--hs-palette-navy-800), transparent); /* ================================================================ 03b. LIVING SKY — Ambient Orb Tokens ================================================================ */ /* Orb colours: Prismatic Lens palette — vibrant enough to refract through glass */ --hs-sky-orb-a: rgba(43, 197, 241, 0.26); /* top-right — vivid cyan, primary */ --hs-sky-orb-b: rgba(120, 80, 220, 0.14); /* bottom-left — soft indigo */ --hs-sky-orb-c: rgba(10, 107, 199, 0.18); /* mid-right — deep medical blue */ --hs-sky-orb-d: rgba(20, 210, 190, 0.12); /* top-left — soft teal echo */ /* Orb blur radius — token so it can be tuned without touching sky.css */ --hs-sky-orb-blur: 55px; /* Animation: very slow drift — imperceptible at a glance */ --hs-sky-anim-dur-a: 28s; --hs-sky-anim-dur-b: 36s; --hs-sky-anim-dur-c: 44s; --hs-sky-anim-dur-d: 52s; /* Sky base colour — pure white */ --hs-sky-bg: #FFFFFF; /* ================================================================ 03c. GLASS CARD TOKENS — Phase 2 ================================================================ */ /* Card surface — lower alpha so prismatic sky bleeds through vividly */ --hs-glass-bg: rgba(255, 255, 255, 0.58); --hs-glass-bg-hover: rgba(255, 255, 255, 0.72); /* Frosted blur — stronger so coloured orbs refract visibly */ --hs-glass-blur: blur(28px); --hs-glass-blur-hover: blur(34px); /* Outer border — barely visible hairline, just enough structure */ --hs-glass-border: rgba(255, 255, 255, 0.55); --hs-glass-border-hover: rgba(255, 255, 255, 0.78); /* Edge-light: tinted cyan so the rim feels iridescent, not flat white */ --hs-glass-edge-top: rgba(200, 245, 255, 0.72); --hs-glass-edge-bottom: rgba(255, 255, 255, 0.00); --hs-glass-edge-left: rgba(180, 225, 255, 0.50); /* Diffused glow shadow — softer and wider than the old hard drop */ --hs-glass-shadow: 0 8px 48px rgba(43, 197, 241, 0.10), 0 4px 20px rgba(10, 31, 68, 0.09), 0 1px 3px rgba(10, 31, 68, 0.06); --hs-glass-shadow-hover: 0 16px 64px rgba(43, 197, 241, 0.14), 0 8px 28px rgba(10, 31, 68, 0.12), 0 1px 4px rgba(10, 31, 68, 0.07); /* Urgency stat card variant — slightly lighter so it floats more */ --hs-glass-stat-bg: rgba(255, 255, 255, 0.68); --hs-glass-stat-bg-hover: rgba(255, 255, 255, 0.82); --hs-glass-stat-shadow: 0 8px 40px rgba(43, 197, 241, 0.09), 0 4px 16px rgba(10, 31, 68, 0.08), 0 1px 2px rgba(10, 31, 68, 0.05); --hs-glass-stat-shadow-hover: 0 16px 56px rgba(43, 197, 241, 0.13), 0 8px 24px rgba(10, 31, 68, 0.11), 0 1px 3px rgba(10, 31, 68, 0.06); /* ================================================================ 03d. PHASE 3 — Living Headline & Button Upgrade Tokens ================================================================ */ /* ================================================================ 03e. STICKY NOTE TOKENS — Social Proof Section ================================================================ */ --hs-note-bg-1: #FDFBF4; --hs-note-bg-2: #FAF6E8; --hs-note-bg-3: #F6F0D8; --hs-note-shadow: 0 2px 6px rgba(10, 31, 68, 0.07), 0 8px 28px rgba(10, 31, 68, 0.10), 0 1px 2px rgba(10, 31, 68, 0.05); --hs-note-shadow-hover: 0 4px 12px rgba(10, 31, 68, 0.09), 0 16px 48px rgba(10, 31, 68, 0.13), 0 1px 3px rgba(10, 31, 68, 0.06); --hs-note-stack-offset-x: clamp(8px, 1vw, 13px); --hs-note-stack-offset-y: clamp(8px, 1vw, 13px); --hs-note-width: clamp(280px, 38vw, 540px); --hs-note-min-height: clamp(300px, 28vw, 380px); --hs-note-pad-x: var(--hs-space-10); --hs-note-pad-y: var(--hs-space-10); --hs-note-radius: var(--hs-radius-lg); /* Headline accent underline — the "signature stroke" under DHA Exam */ --hs-hero-underline-color: var(--hs-palette-accent-700); --hs-hero-underline-height: 3px; --hs-hero-underline-radius: var(--hs-radius-full); --hs-hero-underline-offset: 0.12px; /* gap between text baseline and line */ /* WhatsApp CTA — Deep emerald/teal gradient that fits the prismatic world */ /* Retains the WhatsApp identity but feels like a native premium element */ --hs-btn-wa-gradient: linear-gradient(135deg, #0f5449 0%, /* Deep, premium teal/emerald */ #128c7e 55%, /* WhatsApp brand dark green */ #0f5449 100%); --hs-btn-wa-gradient-hover: linear-gradient(135deg, #128c7e 0%, #25d366 55%, /* WhatsApp bright green for conversion pop */ #128c7e 100%); /* Shimmer — faint white sweep that rewards waiting */ --hs-btn-wa-shimmer: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%); /* Ghost-accent — accent-blue bordered button for hero secondary CTA */ --hs-btn-ghost-accent-bg: transparent; --hs-btn-ghost-accent-bg-hover: rgba(23, 168, 229, 0.07); --hs-btn-ghost-accent-color: var(--hs-palette-navy-800); --hs-btn-ghost-accent-border: var(--hs-palette-accent-600); --hs-btn-ghost-accent-shadow-hover: 0 0 0 3px rgba(23, 168, 229, 0.16), 0 4px 18px rgba(23, 168, 229, 0.18); /* ================================================================ 04. TYPOGRAPHY - FAMILIES ================================================================ */ --hs-font-display: 'Sora', sans-serif; --hs-font-body: 'DM Sans', sans-serif; --hs-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --hs-font-logo: 'Amiko', sans-serif; /* ================================================================ 05. TYPOGRAPHY - SIZE SCALE ================================================================ */ --hs-text-xs: 0.75rem; --hs-text-sm: 0.8125rem; --hs-text-base: 0.9375rem; --hs-text-md: 1rem; --hs-text-lg: 1.0625rem; --hs-text-xl: 1.1875rem; --hs-text-2xl: 1.375rem; --hs-text-3xl: 1.625rem; --hs-text-4xl: 2rem; --hs-text-5xl: 2.5rem; --hs-text-6xl: 3rem; --hs-text-7xl: 3.75rem; --hs-text-8xl: 5rem; /* WITH THIS */ --hs-text-hero: clamp(2.25rem, 4.5vw + 0.5rem, 5rem); --hs-text-section-h: clamp(1.625rem, 2.5vw + 0.75rem, 2.75rem); --hs-text-card-h: clamp(1rem, 1vw + 0.5rem, 1.375rem); --hs-text-eyebrow: clamp(0.6875rem, 0.5vw + 0.25rem, 0.8125rem); /* ================================================================ 06. TYPOGRAPHY - WEIGHTS & LINE HEIGHTS ================================================================ */ --hs-font-light: 300; --hs-font-normal: 400; --hs-font-medium: 500; --hs-font-semibold: 600; --hs-font-bold: 700; --hs-font-extrabold: 800; --hs-leading-none: 1; --hs-leading-tight: 1.1; --hs-leading-snug: 1.25; --hs-leading-normal: 1.5; --hs-leading-relaxed: 1.65; --hs-leading-loose: 1.8; --hs-leading-display: 1.06; --hs-leading-heading: 1.15; --hs-leading-subhead: 1.3; --hs-leading-body: 1.7; --hs-leading-caption: 1.5; /* ================================================================ 07. TYPOGRAPHY - LETTER SPACING ================================================================ */ --hs-tracking-tighter: -0.04em; --hs-tracking-tight: -0.02em; --hs-tracking-normal: 0em; --hs-tracking-wide: 0.03em; --hs-tracking-wider: 0.06em; --hs-tracking-widest: 0.12em; --hs-tracking-ultra: 0.18em; /* ================================================================ 08. SPACING SCALE ================================================================ */ --hs-space-0: 0; --hs-space-px: 1px; --hs-space-0-5: 0.125rem; --hs-space-1: 0.25rem; --hs-space-1-5: 0.375rem; --hs-space-2: 0.5rem; --hs-space-2-5: 0.625rem; --hs-space-3: 0.75rem; --hs-space-3-5: 0.875rem; --hs-space-4: 1rem; --hs-space-5: 1.25rem; --hs-space-6: 1.5rem; --hs-space-7: 1.75rem; --hs-space-8: 2rem; --hs-space-10: 2.5rem; --hs-space-12: 3rem; --hs-space-14: 3.5rem; --hs-space-16: 4rem; --hs-space-20: 5rem; --hs-space-24: 6rem; --hs-space-28: 7rem; --hs-space-32: 8rem; --hs-space-36: 9rem; --hs-space-40: 10rem; /* ================================================================ 09. SECTION PADDING ================================================================ */ --hs-section-pad-y: clamp(3.5rem, 5vw + 1rem, 7rem); --hs-section-pad-y-sm: clamp(2rem, 3vw + 0.75rem, 4rem); --hs-section-pad-y-lg: clamp(4rem, 6vw + 1rem, 9rem); --hs-section-pad-y-xl: clamp(5rem, 7vw + 1.5rem, 11rem); --hs-container-pad-x: clamp(1rem, 3vw, 2rem); /* ================================================================ 10. LAYOUT & GRID ================================================================ */ --hs-container-sm: min(640px, 90vw); --hs-container-md: min(768px, 90vw); --hs-container-lg: min(1024px, 92vw); --hs-container-xl: min(1200px, 92vw); --hs-container-2xl: min(1400px, 94vw); --hs-container-default: var(--hs-container-xl); --hs-gap-xs: 0.75rem; --hs-gap-sm: 1rem; --hs-gap-md: 1.5rem; --hs-gap-lg: 2rem; --hs-gap-xl: 3rem; --hs-gap-2xl: 4rem; --hs-cols-2: repeat(2, 1fr); --hs-cols-3: repeat(3, 1fr); --hs-cols-4: repeat(4, 1fr); /* ================================================================ 11. BORDER RADIUS ================================================================ */ --hs-radius-none: 0; --hs-radius-xs: 0.1875rem; --hs-radius-sm: 0.375rem; --hs-radius-md: 0.625rem; --hs-radius-lg: 0.875rem; --hs-radius-xl: 1.25rem; --hs-radius-2xl: 1.75rem; --hs-radius-3xl: 2.5rem; --hs-radius-full: 9999px; /* ================================================================ 12. BORDER WIDTHS ================================================================ */ --hs-border-0: 0; --hs-border-1: 1px; --hs-border-2: 1.5px; --hs-border-3: 2px; --hs-border-4: 3px; /* ================================================================ 13. SHADOWS ================================================================ */ --hs-shadow-xs: 0 1px 2px rgba(10, 31, 68, 0.06); --hs-shadow-sm: 0 1px 3px rgba(10, 31, 68, 0.08), 0 1px 2px rgba(10, 31, 68, 0.06); --hs-shadow-md: 0 4px 12px rgba(10, 31, 68, 0.10), 0 2px 4px rgba(10, 31, 68, 0.06); --hs-shadow-lg: 0 10px 32px rgba(10, 31, 68, 0.13), 0 4px 10px rgba(10, 31, 68, 0.08); --hs-shadow-xl: 0 20px 60px rgba(10, 31, 68, 0.16), 0 8px 20px rgba(10, 31, 68, 0.10); --hs-shadow-2xl: 0 30px 80px rgba(10, 31, 68, 0.20), 0 12px 32px rgba(10, 31, 68, 0.12); --hs-shadow-accent-sm: 0 2px 12px rgba(23, 168, 229, 0.22); --hs-shadow-accent-md: 0 4px 24px rgba(23, 168, 229, 0.30), 0 2px 8px rgba(23, 168, 229, 0.18); --hs-shadow-accent-lg: 0 8px 40px rgba(23, 168, 229, 0.38), 0 4px 14px rgba(23, 168, 229, 0.22); --hs-shadow-navy-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(6, 15, 34, 0.50); --hs-shadow-inset: inset 0 2px 4px rgba(10, 31, 68, 0.08); --hs-shadow-inset-strong: inset 0 2px 8px rgba(10, 31, 68, 0.14); --hs-shadow-whatsapp: 0 4px 20px rgba(18, 140, 126, 0.35); --hs-shadow-btn-primary: 0 4px 16px rgba(10, 31, 68, 0.30), 0 1px 4px rgba(10, 31, 68, 0.18); --hs-shadow-btn-accent: 0 4px 16px rgba(23, 168, 229, 0.35), 0 1px 4px rgba(23, 168, 229, 0.20); --hs-shadow-btn-urgency: 0 4px 20px rgba(146, 43, 33, 0.40); /* ================================================================ 14. TRANSITIONS & EASING ================================================================ */ --hs-ease-linear: linear; --hs-ease-in: cubic-bezier(0.4, 0, 1, 1); --hs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --hs-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); --hs-ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1); --hs-ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --hs-duration-instant: 80ms; --hs-duration-fast: 150ms; --hs-duration-normal: 300ms; --hs-duration-slow: 500ms; --hs-duration-slower: 700ms; --hs-duration-slowest: 1000ms; --hs-transition-colors: color var(--hs-duration-fast) var(--hs-ease-out), background var(--hs-duration-fast) var(--hs-ease-out), border-color var(--hs-duration-fast) var(--hs-ease-out), opacity var(--hs-duration-fast) var(--hs-ease-out); --hs-transition-transform: transform var(--hs-duration-normal) var(--hs-ease-out); --hs-transition-shadow: box-shadow var(--hs-duration-normal) var(--hs-ease-out); --hs-transition-all: color var(--hs-duration-normal) var(--hs-ease-out), background var(--hs-duration-normal) var(--hs-ease-out), border-color var(--hs-duration-normal) var(--hs-ease-out), transform var(--hs-duration-normal) var(--hs-ease-out), box-shadow var(--hs-duration-normal) var(--hs-ease-out), opacity var(--hs-duration-normal) var(--hs-ease-out); --hs-transition-card: transform var(--hs-duration-normal) var(--hs-ease-out), box-shadow var(--hs-duration-normal) var(--hs-ease-out), border-color var(--hs-duration-normal) var(--hs-ease-out); --hs-transition-nav: background var(--hs-duration-slow) var(--hs-ease-out), padding var(--hs-duration-slow) var(--hs-ease-out), box-shadow var(--hs-duration-slow) var(--hs-ease-out); /* ================================================================ 15. Z-INDEX LAYERS ================================================================ */ --hs-z-below: -1; --hs-z-base: 0; --hs-z-raised: 10; --hs-z-dropdown: 100; --hs-z-sticky: 200; --hs-z-fixed: 300; --hs-z-overlay: 400; --hs-z-modal: 500; --hs-z-toast: 600; --hs-z-tooltip: 700; --hs-z-top: 999; /* ================================================================ 16. ANIMATION DURATIONS ================================================================ */ --hs-anim-stagger-fast: 0.06s; --hs-anim-stagger-normal: 0.10s; --hs-anim-stagger-slow: 0.16s; --hs-anim-dur-xs: 0.3s; --hs-anim-dur-sm: 0.5s; --hs-anim-dur-md: 0.8s; --hs-anim-dur-lg: 1.2s; --hs-anim-dur-xl: 2.0s; --hs-lenis-duration: 1.2; --hs-lenis-easing: "expo"; --hs-scrub-fast: 0.5; --hs-scrub-normal: 1; --hs-scrub-slow: 2; /* ================================================================ 17. COMPONENT TOKENS - BUTTONS ================================================================ */ --hs-btn-height-sm: clamp(2rem, 2.5vw, 2.25rem); --hs-btn-height-md: clamp(2.5rem, 3vw, 2.875rem); --hs-btn-height-lg: clamp(2.875rem, 3.5vw, 3.375rem); --hs-btn-height-xl: clamp(3.25rem, 4vw, 4rem); --hs-btn-pad-x-sm: clamp(0.75rem, 1.5vw, 1rem); --hs-btn-pad-x-md: clamp(1.125rem, 2vw, 1.5rem); --hs-btn-pad-x-lg: clamp(1.5rem, 2.5vw, 2rem); --hs-btn-pad-x-xl: clamp(1.875rem, 3vw, 2.5rem); --hs-btn-font-size-sm: var(--hs-text-xs); --hs-btn-font-size-md: var(--hs-text-base); --hs-btn-font-size-lg: var(--hs-text-md); --hs-btn-font-size-xl: var(--hs-text-lg); --hs-btn-font-weight: var(--hs-font-semibold); --hs-btn-font-family: var(--hs-font-body); --hs-btn-tracking: var(--hs-tracking-wide); --hs-btn-radius: var(--hs-radius-full); --hs-btn-primary-bg: var(--hs-palette-navy-800); --hs-btn-primary-bg-hover: var(--hs-palette-navy-600); --hs-btn-primary-color: var(--hs-palette-grey-000); --hs-btn-primary-border: transparent; --hs-btn-primary-shadow: var(--hs-shadow-btn-primary); --hs-btn-accent-bg: var(--hs-palette-accent-600); --hs-btn-accent-bg-hover: var(--hs-palette-accent-500); --hs-btn-accent-color: var(--hs-palette-navy-800); --hs-btn-accent-border: transparent; --hs-btn-accent-shadow: var(--hs-shadow-btn-accent); --hs-btn-ghost-bg: transparent; --hs-btn-ghost-bg-hover: var(--hs-palette-navy-050); --hs-btn-ghost-color: var(--hs-palette-navy-800); --hs-btn-ghost-border: var(--hs-palette-navy-800); --hs-btn-ghost-dark-bg: transparent; --hs-btn-ghost-dark-bg-hover: rgba(255, 255, 255, 0.10); --hs-btn-ghost-dark-color: var(--hs-palette-grey-000); --hs-btn-ghost-dark-border: rgba(255, 255, 255, 0.35); --hs-btn-whatsapp-bg: var(--hs-palette-green-600); --hs-btn-whatsapp-bg-hover: var(--hs-palette-green-500); --hs-btn-whatsapp-color: var(--hs-palette-grey-000); --hs-btn-whatsapp-shadow: var(--hs-shadow-whatsapp); --hs-btn-urgency-bg: var(--hs-palette-red-600); --hs-btn-urgency-bg-hover: var(--hs-palette-red-700); --hs-btn-urgency-color: var(--hs-palette-grey-000); --hs-btn-urgency-shadow: var(--hs-shadow-btn-urgency); /* ================================================================ 18. COMPONENT TOKENS - CARDS ================================================================ */ --hs-card-bg: var(--hs-color-bg-card); --hs-card-bg-hover: var(--hs-color-bg-card-hover); --hs-card-bg-featured: var(--hs-palette-navy-800); --hs-card-border: var(--hs-color-border-default); --hs-card-border-hover: transparent; --hs-card-radius: var(--hs-radius-xl); --hs-card-radius-sm: var(--hs-radius-lg); --hs-card-pad-md: var(--hs-space-8); --hs-card-pad-lg: var(--hs-space-12); --hs-card-shadow: none; --hs-card-shadow-hover: var(--hs-shadow-lg); --hs-card-transition: var(--hs-transition-card); --hs-card-accent-height: 3px; /* ================================================================ 19. COMPONENT TOKENS - NAVIGATION ================================================================ */ --hs-nav-height: clamp(60px, 5.5vw, 72px); --hs-nav-bg: rgba(10, 31, 68, 0.96); --hs-nav-blur: blur(14px); --hs-nav-border: rgba(255, 255, 255, 0.07); --hs-nav-z: var(--hs-z-fixed); --hs-nav-transition: var(--hs-transition-nav); --hs-nav-logo-width: clamp(32px, 3vw, 42px); --hs-nav-cta-font-size: var(--hs-text-sm); /* ================================================================ 20. COMPONENT TOKENS - FORMS ================================================================ */ --hs-input-bg: var(--hs-palette-grey-000); --hs-input-bg-focus: var(--hs-palette-grey-000); --hs-input-border: var(--hs-color-border-default); --hs-input-border-hover: var(--hs-color-border-strong); --hs-input-border-focus: var(--hs-color-border-focus); --hs-input-border-error: var(--hs-color-border-danger); --hs-input-radius: var(--hs-radius-md); --hs-input-height: var(--hs-btn-height-md); --hs-input-pad-x: var(--hs-space-5); --hs-input-font-size: var(--hs-text-base); --hs-input-color: var(--hs-color-text-primary); --hs-input-placeholder: var(--hs-color-text-tertiary); --hs-input-shadow-focus: 0 0 0 3px rgba(10, 31, 68, 0.15); --hs-input-shadow-error: 0 0 0 3px rgba(192, 57, 43, 0.15); --hs-input-transition: var(--hs-transition-colors); --hs-label-font-size: var(--hs-text-sm); --hs-label-font-weight: var(--hs-font-medium); --hs-label-color: var(--hs-color-text-primary); --hs-label-gap: var(--hs-space-2); /* ================================================================ 21. BREAKPOINTS ================================================================ */ --hs-bp-xs: 480px; --hs-bp-sm: 640px; --hs-bp-md: 768px; --hs-bp-lg: 1024px; --hs-bp-xl: 1280px; --hs-bp-2xl: 1536px; } .hs-text-accent { background: var(--hs-gradient-text-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hs-focus-ring:focus-visible { outline: 2px solid var(--hs-color-border-focus); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }