/** * ============================================================================= * HIPHEN V2 — Unified Design System Variables * ============================================================================= * Single source of truth for ALL CSS custom properties. * Merges canonical tokens (design-system-tokens.json) + legacy values * validated against the Figma maquette and the Crops reference page. * * NAMING CONVENTIONS * ────────────────── * Canonical (new development) Legacy alias (backward compat) * --color-green-500 --color-primary * --color-teal-800 --color-dark * --spacing-lg --space-12 * --gradient-radial-green --gradient-cta * * When building NEW pages, prefer canonical names. * Legacy aliases exist so existing code (Crops, header, front-page) keeps * working without modification. * * DO NOT hardcode visual values outside this file. * ============================================================================= */ :root { /* ========================================================================= * 1. PRIMITIVE COLORS * From design-system-tokens.json → colors.primitives * ========================================================================= */ /* Green family */ --color-green-500: #098446; --color-green-400: #8FBF48; --color-green-600: #22B573; --color-green-bright: #00C246; --color-green-mid: #629B2C; /* dark stop of --gradient-radial-green */ /* Teal family */ --color-teal-900: #021E29; /* deepest teal — used by solution-finder check marks */ --color-teal-800: #043041; --color-teal-700: #184455; /* Gray */ --color-gray-200: #CDD6D9; /* Neutrals */ --color-white: #FFFFFF; --color-black: #000000; /* Product primitives */ --color-red-500: #FC423C; --color-blue-500: #00A1E0; --color-blue-300: #79CCF0; --color-orange-500: #FF7000; --color-gold-500: #B18F1A; --color-navy-800: #192355; /* Extended palette (not in tokens, used by existing components) */ --color-mid-blue: #1A3F4F; --color-accent-gold: #D4AF37; /* ========================================================================= * 2. SEMANTIC COLORS * From design-system-tokens.json → colors.semantic * ========================================================================= */ /* Backgrounds */ --color-bg-page: #043041; --color-bg-surface: #184455; --color-bg-elevated: #184455; /* Text */ --color-text-primary: #FFFFFF; --color-text-secondary: #CDD6D9; --color-text-accent: #8FBF48; --color-text-dark: #043041; /* Borders */ --color-border-default: #184455; --color-border-subtle: #CDD6D9; /* Interactive */ --color-interactive-primary: #098446; --color-interactive-primary-hover: #8FBF48; --color-interactive-secondary: #FFFFFF; /* ========================================================================= * 3. LEGACY COLOR ALIASES * Maps old names → same resolved values as canonical tokens * ========================================================================= */ --color-primary: #098446; /* = --color-green-500 */ --color-light-green: #8FBF48; /* = --color-green-400 */ --color-dark: #043041; /* = --color-teal-800 */ --color-secondary: #184455; /* = --color-teal-700 */ /* Alpha variants (no token equivalent, used in glass/overlay effects) */ --color-white-90: rgba(255, 255, 255, 0.90); --color-white-70: rgba(255, 255, 255, 0.70); --color-white-50: rgba(255, 255, 255, 0.50); --color-white-40: rgba(255, 255, 255, 0.40); --color-white-30: rgba(255, 255, 255, 0.30); --color-white-20: rgba(255, 255, 255, 0.20); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-10: rgba(255, 255, 255, 0.10); --color-white-04: rgba(255, 255, 255, 0.04); --color-dark-overlay: rgba(4, 48, 65, 0.50); --color-glass-blue: rgba(24, 68, 85, 0.95); --color-glass-blue-75: rgba(24, 68, 85, 0.75); --color-glass-blue-50: rgba(24, 68, 85, 0.50); --color-glass-blue-30: rgba(24, 68, 85, 0.30); /* Teal-800 (page bg) glass overlays — used by hero overlays + card overlay backgrounds. Note: --color-glass-blue-* use teal-700 (#184455); these use teal-800 (#043041). */ --color-glass-teal-30: rgba(4, 48, 65, 0.30); --color-glass-teal-50: rgba(4, 48, 65, 0.50); --color-glass-teal-70: rgba(4, 48, 65, 0.70); --color-glass-teal-75: rgba(4, 48, 65, 0.75); --color-glass-teal-95: rgba(4, 48, 65, 0.95); /* Lime accent glass — for active/hover states tinted with the brand green */ --color-glass-lime-06: rgba(143, 191, 72, 0.06); --color-glass-lime-12: rgba(143, 191, 72, 0.12); --color-glass-lime-15: rgba(143, 191, 72, 0.15); --color-glass-lime-18: rgba(143, 191, 72, 0.18); --color-glass-lime-22: rgba(143, 191, 72, 0.22); --color-glass-lime-28: rgba(143, 191, 72, 0.28); --color-glass-lime-30: rgba(143, 191, 72, 0.30); --color-glass-lime-35: rgba(143, 191, 72, 0.35); --color-glass-lime-50: rgba(143, 191, 72, 0.50); /* Gray-200 (--color-text-secondary base) with opacity helpers — used by the solution-finder text hierarchy. */ --color-text-secondary-42: rgba(205, 214, 217, 0.42); --color-text-secondary-72: rgba(205, 214, 217, 0.72); /* ========================================================================= * 4. PRODUCT BRAND COLORS * From design-system-tokens.json → colors.product * ========================================================================= */ --product-phenoscale: #FC423C; --product-phenomobile: #00A1E0; --product-phenostation: #22B573; --product-phenoresearch: #FF7000; --product-literal: #00C246; --product-phenolite: #79CCF0; --product-flashgrappe: #B18F1A; --product-wps: #192355; --product-cloverfield: #098446; /* ========================================================================= * 5. GRADIENTS * Signature gradients from tokens + page-specific from existing code * ========================================================================= */ /* Signature — from design-system-tokens.json */ --gradient-radial-green: radial-gradient( ellipse at 40% 40%, #629B2C 9%, #8FBF48 100% ); --gradient-radial-glass: radial-gradient( ellipse at 40% 40%, rgba(255, 255, 255, 0.3) 9%, rgba(255, 255, 255, 0.1) 100% ); /* Card label "Blue-white-fade" — radial white sheen over teal-75% base. Canonical glass-morphism pattern used by all image-backed cards (crop-grid, crop-teaser, solution-card, use-case-card, use-case-grid, events-slider). Replaces the previous `var(--Blue-white-fade, …)` pattern which referenced a non-existent variable. */ --gradient-card-label-fade: radial-gradient( 100.89% 111.76% at 0% 0%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.15) 100% ), rgba(4, 48, 65, 0.75); --gradient-card-label-fade-hover: radial-gradient( 100.89% 111.76% at 0% 0%, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.20) 100% ), rgba(4, 48, 65, 0.85); /* Page-specific (used by Crops, header, front-page) */ --gradient-cta: linear-gradient( 135deg, rgba(98, 155, 44, 1) 9%, rgba(143, 191, 72, 1) 100% ); --gradient-lang-active: radial-gradient( ellipse 100% 100% at 50% 50%, rgba(98, 155, 44, 1) 9.4%, rgba(143, 191, 72, 1) 100% ); --gradient-hero-radial: radial-gradient( circle at 50% 100%, rgba(24, 68, 85, 1) 51%, rgba(14, 58, 75, 0) 100% ); --gradient-modal-bg: linear-gradient( 135deg, rgba(24, 68, 85, 0.95) 0%, rgba(4, 48, 65, 0.98) 100% ); --gradient-card-label: linear-gradient( 180deg, rgba(29, 68, 84, 0.75) 0%, rgba(19, 58, 74, 0.75) 100% ); --gradient-card-label-hover: linear-gradient( 180deg, rgba(29, 68, 84, 0.85) 0%, rgba(19, 58, 74, 0.85) 100% ); --gradient-contact-overlay: linear-gradient( 90deg, rgba(4, 48, 65, 0.50) 0%, rgba(4, 48, 65, 0.30) 50%, rgba(4, 48, 65, 0.50) 100% ); --gradient-footer-divider-l: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.20) ); --gradient-footer-divider-r: linear-gradient( 90deg, rgba(255, 255, 255, 0.20), transparent ); /* ========================================================================= * 6. TYPOGRAPHY * ========================================================================= */ /* Font stacks */ --font-gilroy: 'Gilroy', -apple-system, sans-serif; --font-inter: 'Montserrat', sans-serif; /* Font sizes — used in existing templates (legacy scale) */ --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 32px; --text-3xl: 42px; --text-4xl: clamp(32px, 5vw, 68px); --text-hero: clamp(60px, 12vw, 180px); /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Line heights */ --lh-tight: 1.06; --lh-snug: 1.1; --lh-normal: 1.4; --lh-relaxed: 1.5; --lh-loose: 1.6; /* ========================================================================= * 7. SPACING * Canonical names (--spacing-*) from design-system-tokens.json * + legacy aliases (--space-*) for existing code * ========================================================================= */ /* Canonical — 8px base scale */ --spacing-2xs: 2px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 40px; --spacing-3xl: 48px; --spacing-4xl: 64px; --spacing-5xl: 80px; --spacing-6xl: 120px; /* Legacy aliases — numeric scale used by existing components */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 20px; --space-12: 24px; --space-14: 28px; --space-16: 32px; --space-20: 40px; --space-24: 48px; --space-28: 56px; --space-30: 60px; --space-32: 64px; --space-40: 80px; --space-60: 120px; /* ========================================================================= * 8. BORDER RADIUS * Values match the Figma maquette (validated via Crops reference page). * NOTE: design-system-tokens.json defines a smaller generic scale * (4/8/12/16/24/9999). The values below are the ACTUAL radii used * in the validated design. Future reconciliation tracked separately. * ========================================================================= */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --radius-full: 50px; --radius-circle: 50%; /* ========================================================================= * 8b. BORDERS * Reusable border tokens. Pill border is the canonical 1.5px white-50 * used by all arrow/nav buttons across the design system (slider * controls, pagination arrows, card arrow pills, etc.). * ========================================================================= */ --border-pill: 1.5px solid var(--color-white-50); /* ========================================================================= * 9. SHADOWS * Values validated against existing components. Same note as radius: * design-system-tokens.json defines different multi-layer shadows. * ========================================================================= */ --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.20); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.30); --shadow-xxl: 0 2px 4px rgba(0, 38, 54, 0.98), 0 7px 7px rgba(0, 38, 54, 0.85), 0 16px 10px rgba(0, 38, 54, 0.50), 0 29px 11px rgba(0, 38, 54, 0.15), 0 45px 12px rgba(0, 38, 54, 0.02); --shadow-card-hover: 0 26px 52px rgba(0, 0, 0, 0.28); --shadow-glow-green: 0 0 20px rgba(143, 191, 72, 0.30); --shadow-glow-cta: 0 8px 20px rgba(143, 191, 72, 0.30); --shadow-inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* ========================================================================= * 10. TRANSITIONS * ========================================================================= */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); --transition-modal: 0.5s ease; /* ========================================================================= * 11. GLASS / BACKDROP-FILTER * ========================================================================= */ --blur-sm: blur(6px); --blur-md: blur(8px); --blur-lg: blur(14px); /* ========================================================================= * 12. LAYOUT & GRID * ========================================================================= */ --container-content: 1200px; --container-wide: 1440px; --grid-max-width: 1200px; --grid-columns: 4; /* Crop card grid — 4 columns */ --grid-gutter: 20px; --grid-margin: 120px; --padding-x: 120px; --padding-x-md: 40px; --padding-x-sm: 20px; /* ========================================================================= * 12b. BREAKPOINTS — CANONICAL STANDARD (reference only) * ------------------------------------------------------------------------- * CSS @media rules cannot consume custom properties, so these are a * documented convention, not live variables. ALL new @media queries should * use exactly these boundaries; migrate legacy/divergent values toward them. * * Mobile : max-width 767px (base, mobile-first) * Tablet : min-width 768px / max-width 1023px * Desktop : min-width 1024px / max-width 1439px * Wide : min-width 1440px * * Legacy/divergent values still present in some components — to reconcile * toward the scale above (with a visual check): 479→480/767, 600 & 640→767, * 900→1023, 1199→1023, 1200→1024. * ========================================================================= */ /* ========================================================================= * 13. Z-INDEX SCALE * ========================================================================= */ --z-base: 0; --z-above: 1; --z-content: 2; --z-overlay: 10; --z-dropdown: 40; --z-modal: 50; --z-header: 100; /* ========================================================================= * 14. COMPONENT TOKENS — Crop Card * (Crops page is protected — do not change these values) * ========================================================================= */ --crop-card-min-height: 280px; --crop-card-min-height-md: 240px; --crop-card-min-height-sm: 200px; --crop-card-border: 2px solid var(--color-white-20); --crop-card-border-active: 2px solid var(--color-light-green); --crop-card-border-hover: 2px solid rgba(255, 255, 255, 0.40); --crop-card-radius: var(--radius-lg); --crop-card-label-radius: 14px; /* ========================================================================= * 15. COMPONENT TOKENS — Modal * ========================================================================= */ --modal-radius: var(--radius-xl); --modal-border: 2px solid rgba(143, 191, 72, 0.30); --modal-header-pad: var(--space-16) var(--space-20); --modal-content-pad: var(--space-20); /* ========================================================================= * 16. COMPONENT TOKENS — Product Card * ========================================================================= */ --product-card-min-height: 392px; --product-card-radius: var(--radius-2xl); --product-card-bg: var(--color-mid-blue); /* ========================================================================= * 17. COMPONENT TOKENS — Forms * ========================================================================= */ --form-border-bottom: 2px solid var(--color-light-green); --form-border-bottom-focus: 3px solid var(--color-primary); --form-card-max-width: 480px; --form-card-radius: var(--radius-xl); /* ========================================================================= * 18. COMPONENT TOKENS — Header * ========================================================================= */ --header-bg: rgba(24, 68, 85, 0.98); --header-pad-y: 26px; --header-pad-x: var(--padding-x); --header-border: 1px solid var(--color-white-10); --logo-width: 200px; --nav-gap: 32px; --nav-link-size: var(--text-md); --nav-underline-h: 3px; }