/* ================================================================ MARINA D'ARECHI SUPERYACHT — DESIGN TOKENS v2.0 · May 2026 — Light design system (palette ufficiale cliente) Usage: Import as the very first stylesheet in the WordPress theme. All component stylesheets reference these tokens only — never hardcode a value that exists here. Sections: 1. Colors — Base Palette 2. Colors — Semantic Roles 3. Typography — Families 4. Typography — Scale 5. Typography — Weight, Leading, Tracking 6. Spacing 7. Layout 8. Motion 9. Borders & Radius 10. Z-Index ================================================================ */ :root { /* ───────────────────────────────────────────────────────── 1. COLORS — BASE PALETTE Source: palette ufficiale cliente (maggio 2026) Never use base colors directly in components — always use the semantic roles below. ───────────────────────────────────────────────────────── */ --color-navy: #13181F; /* dark sections, footer bg */ --color-blue-deep: #073556; /* heading text + dark section variant */ --color-blue-mid: #3D6F8D; /* gradient accents on images */ --color-gold: #AE8C5D; /* primary accent — beige/oro caldo */ --color-light: #EEEEEE; /* text on dark sections */ --color-white: #ffffff; /* primary page background */ --color-off-white: #f4f7f9; /* secondary page background */ --color-footer: #0d1219; /* footer bg (slightly deeper than navy) */ /* ───────────────────────────────────────────────────────── 2. COLORS — SEMANTIC ROLES Use these in all component CSS, not the base palette. ───────────────────────────────────────────────────────── */ /* Backgrounds */ --bg-primary: var(--color-white); --bg-secondary: var(--color-off-white); --bg-dark: var(--color-navy); /* dark contrast sections */ --bg-dark-secondary: var(--color-blue-deep); /* Captain's Desk header, dark strip variant */ --bg-footer: var(--color-footer); --bg-header-scrolled: rgba(255, 255, 255, 0.97); /* white header on scroll */ --bg-input: rgba(7, 53, 86, 0.05); /* subtle field background */ --bg-overlay-panel: /* left panel, 4-stop gradient over full-screen photos */ linear-gradient( to right, rgba(19, 24, 31, 0.98) 0%, rgba(19, 24, 31, 0.66) 28%, rgba(19, 24, 31, 0.22) 58%, rgba(19, 24, 31, 0.00) 100% ), linear-gradient( to top, rgba(19, 24, 31, 0.54) 0%, rgba(19, 24, 31, 0.00) 45% ); /* Accent — Gold */ --accent: var(--color-gold); --accent-muted: rgba(174, 140, 93, 0.35); --accent-subtle: rgba(174, 140, 93, 0.20); --accent-faint: rgba(174, 140, 93, 0.08); /* Text — default (on light sections) */ --text-heading: var(--color-blue-deep); /* #073556 */ --text-primary: rgba(7, 53, 86, 0.82); --text-muted: rgba(7, 53, 86, 0.62); --text-subtle: rgba(7, 53, 86, 0.48); --text-faint: rgba(7, 53, 86, 0.30); --text-ghost: rgba(7, 53, 86, 0.04); /* decorative large numbers on light */ --text-nav: rgba(7, 53, 86, 0.75); --text-nav-hover: var(--color-blue-deep); --text-footer-link: rgba(238, 238, 238, 0.82); /* footer is always dark */ --text-label: var(--color-gold); /* section/chapter labels */ /* Text — on dark sections (photo chapters, footer, dark strips) */ --text-on-dark: var(--color-white); --text-on-dark-primary: var(--color-light); --text-on-dark-muted: rgba(238, 238, 238, 0.78); --text-on-dark-subtle: rgba(238, 238, 238, 0.55); --text-on-dark-faint: rgba(238, 238, 238, 0.30); --text-on-dark-ghost: rgba(255, 255, 255, 0.04); /* decorative numbers on dark/photo */ --text-on-dark-nav: rgba(238, 238, 238, 0.75); /* Borders — on light sections */ --border-standard: rgba(7, 53, 86, 0.10); --border-subtle: rgba(7, 53, 86, 0.06); --border-gold: rgba(174, 140, 93, 0.25); --border-gold-strong: rgba(174, 140, 93, 0.42); --border-input: rgba(7, 53, 86, 0.14); --border-input-focus: var(--color-gold); /* Borders — on dark sections */ --border-on-dark: rgba(255, 255, 255, 0.10); --border-on-dark-subtle: rgba(255, 255, 255, 0.06); /* ───────────────────────────────────────────────────────── 3. TYPOGRAPHY — FAMILIES ───────────────────────────────────────────────────────── */ --font-display: 'Bodoni Moda SC', Georgia, 'Times New Roman', serif; --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif; /* ───────────────────────────────────────────────────────── 4. TYPOGRAPHY — SCALE ───────────────────────────────────────────────────────── */ --text-xs: 0.75rem; /* 12px — fine print, footnotes */ --text-sm: 0.875rem; /* 14px — nav labels, meta */ --text-base: 1rem; /* 16px — body text */ --text-md: 1.125rem; /* 18px — slightly enlarged body */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: clamp(1.8rem, 3vw, 2.8rem); --text-3xl: clamp(2.4rem, 4.5vw, 4rem); --text-hero: clamp(1.4rem, 2.5vw, 2rem); --text-stat: 3rem; /* ───────────────────────────────────────────────────────── 5. TYPOGRAPHY — WEIGHT / LEADING / TRACKING ───────────────────────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.1; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.7; --tracking-display: -0.01em; --tracking-body: 0; --tracking-wide: 0.06em; --tracking-wider: 0.10em; --tracking-widest: 0.18em; --tracking-nav: 0.14em; /* ───────────────────────────────────────────────────────── 6. SPACING — Base unit: 4px ───────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-30: 120px; --section-pad-sm: 72px; --section-pad-md: 100px; --section-pad-lg: 120px; /* ───────────────────────────────────────────────────────── 7. LAYOUT ───────────────────────────────────────────────────────── */ --container-max: 1440px; --container-wide: 1200px; --container-std: 900px; --container-form: 760px; --gutter: 48px; --gutter-md: 32px; --gutter-sm: 24px; --header-height: 80px; --header-height-sm: 64px; --header-height-compact: 48px; --grid-cols: 12; --grid-gap: var(--space-8); /* ───────────────────────────────────────────────────────── 8. MOTION ───────────────────────────────────────────────────────── */ --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-expo: cubic-bezier(0.00, 0.00, 0.20, 1.00); --ease-in-out-circ: cubic-bezier(0.45, 0.00, 0.55, 1.00); --duration-instant: 150ms; --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-reveal: 700ms; --panel-offset-y: 28px; --panel-sticky-top: 22vh; /* ───────────────────────────────────────────────────────── 9. BORDERS & RADIUS ───────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 2px; --border-width: 1px; /* ───────────────────────────────────────────────────────── 10. Z-INDEX ───────────────────────────────────────────────────────── */ --z-base: 1; --z-overlay: 2; --z-sticky: 10; --z-header: 100; --z-modal: 200; } /* ── Responsive token overrides ─────────────────────────────── */ @media (max-width: 1024px) { :root { --gutter: var(--gutter-md); --section-pad-lg: 100px; --section-pad-md: 80px; } } @media (max-width: 768px) { :root { --header-height: var(--header-height-sm); --gutter: var(--gutter-sm); --section-pad-lg: 80px; --section-pad-md: 72px; --section-pad-sm: 56px; --text-stat: 2.5rem; } } @media (max-width: 480px) { :root { --section-pad-lg: 64px; --section-pad-md: 56px; } }