/* ============================================================ RANDOCOOL — SYSTÈME DE DESIGN variables.css — Tokens de design globaux Auvergne, sentiers volcaniques, forêts profondes. ============================================================ */ :root { /* ---------------------------------------------------------- PALETTE COULEURS ---------------------------------------------------------- */ /* Verts — Forêt profonde Massif Central */ --color-forest: #2D4A3E; /* Vert forêt profond — couleur principale */ --color-forest-mid: #3D5E50; /* Vert moyen — hover, accents */ --color-forest-light: #5A8A72; /* Vert clair — badges, highlights */ --color-forest-mist: #E8EFE9; /* Vert brume — fonds légers */ --color-forest-glow: rgba(45, 74, 62, 0.10); /* Vert transparent */ /* Jaune balisage GR — accent vif */ --color-ochre: #F5DC4A; /* Jaune GR — CTA, accents vifs */ --color-ochre-gold: #D4B82B; /* Jaune foncé — états actifs */ --color-ochre-pale: #FEF9D7; /* Jaune pâle — fonds chauds */ /* Granit — La pierre et le ciel */ --color-granite: #7A8A82; /* Granit — texte secondaire */ --color-granite-light: #E8E5DC; /* Granit clair — bordures, séparateurs */ --color-granite-pale: #F5F3EC; /* Granit très clair — fonds alternatifs */ /* Blancs & Fonds */ --color-cream: #FDFCF7; /* Blanc lin — fond principal */ --color-white: #ffffff; --color-dark-bg: #1A2E25; /* Fond sombre — footer, hero overlay */ --color-dark-surface: #243D2E; /* Surface sombre — cards sur fond noir */ /* Sémantique */ --color-primary: var(--color-forest); --color-primary-hover: var(--color-forest-mid); --color-secondary: var(--color-ochre); --color-secondary-hover: var(--color-ochre-gold); --color-text: #14201A; /* Presque noir verdâtre */ --color-text-soft: var(--color-granite); --color-text-on-dark: #E8F0E9; /* Texte lisible sur fond sombre */ --color-border: var(--color-granite-light); --color-bg: var(--color-cream); --color-surface: var(--color-white); --color-error: #c0392b; --color-success: var(--color-forest-mid); /* ---------------------------------------------------------- BADGES KM — Échelle de progression des randocooleurs ---------------------------------------------------------- */ --badge-km-500: #F5DC4A; /* Jaune GR — 500+ km */ --badge-km-1000: #e74c3c; /* Rouge — 1 000+ km */ --badge-km-2000: #27ae60; /* Vert — 2 000+ km */ --badge-km-3000: #3498db; /* Bleu — 3 000+ km */ --badge-km-4000: #1a1a1a; /* Noir — 4 000+ km */ --badge-km-5000-a: #D4AF37; /* Or dégradé — 5 000+ km */ --badge-km-5000-b: #FFF9E3; --badge-km-5000: linear-gradient(135deg, #D4AF37 0%, #FFF9E3 50%, #D4AF37 100%); /* ---------------------------------------------------------- TYPOGRAPHIE ---------------------------------------------------------- */ --font-title: 'Bricolage Grotesque', sans-serif; --font-body: 'Geist', 'Nunito', sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 0.70rem; /* 11.2px */ --text-sm: 0.80rem; /* 12.8px */ --text-base: 0.95rem; /* 15.2px */ --text-md: 1.05rem; /* 16.8px */ --text-lg: 1.20rem; /* 19.2px */ --text-xl: 1.50rem; /* 24px */ --text-2xl: 2.00rem; /* 32px */ --text-3xl: 2.80rem; /* 44.8px */ --text-4xl: 3.80rem; /* 60.8px */ --text-hero: 5.50rem; /* 88px */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-loose: 1.8; --tracking-tight: -0.04em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.14em; /* ---------------------------------------------------------- ESPACEMENT — Échelle 4px ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 9999px; /* ---------------------------------------------------------- OMBRES — De subtiles à dramatiques ---------------------------------------------------------- */ --shadow-xs: 0 1px 3px rgba(26, 46, 10, 0.06), 0 1px 2px rgba(26, 46, 10, 0.04); --shadow-sm: 0 4px 6px rgba(26, 46, 10, 0.07), 0 2px 4px rgba(26, 46, 10, 0.05); --shadow-md: 0 10px 25px rgba(26, 46, 10, 0.10), 0 4px 10px rgba(26, 46, 10, 0.06); --shadow-lg: 0 20px 50px rgba(26, 46, 10, 0.14), 0 8px 20px rgba(26, 46, 10, 0.08); --shadow-xl: 0 35px 70px rgba(26, 46, 10, 0.20), 0 12px 30px rgba(26, 46, 10, 0.12); --shadow-glow-forest: 0 0 30px rgba(74, 124, 40, 0.35); --shadow-glow-ochre: 0 0 30px rgba(196, 114, 42, 0.35); --shadow-card-hover: 0 28px 60px rgba(26, 46, 10, 0.18), 0 10px 25px rgba(26, 46, 10, 0.10); /* ---------------------------------------------------------- Z-INDEX — Hiérarchie des couches ---------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 1000; --z-modal: 2000; --z-toast: 3000; --z-top: 9999; /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Décélération douce */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Légère élasticité */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --transition-base: var(--duration-base) var(--ease-inout); --transition-smooth: var(--duration-slow) var(--ease-out); --transition-spring: var(--duration-slow) var(--ease-spring); --transition-color: color var(--duration-base) var(--ease-inout), background-color var(--duration-base) var(--ease-inout), border-color var(--duration-base) var(--ease-inout); --transition-transform: transform var(--duration-slow) var(--ease-out); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --max-width: 1280px; --max-width-narrow: 780px; --max-width-mid: 960px; --header-height: 72px; --footer-height: auto; /* ---------------------------------------------------------- OVERLAYS HERO — Dégradés pour lisibilité sur photos ---------------------------------------------------------- */ --hero-overlay-dark: linear-gradient( to bottom, rgba(26, 46, 10, 0.30) 0%, rgba(26, 46, 10, 0.55) 60%, rgba(26, 46, 10, 0.85) 100% ); --hero-overlay-side: linear-gradient( to right, rgba(26, 46, 10, 0.82) 0%, rgba(26, 46, 10, 0.50) 50%, rgba(26, 46, 10, 0.00) 100% ); --hero-overlay-top: linear-gradient( to bottom, rgba(26, 46, 10, 0.65) 0%, rgba(26, 46, 10, 0.00) 60% ); } /* ---------------------------------------------------------- MODE SOMBRE — Optionnel, prêt pour l'avenir ---------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --color-bg: var(--color-dark-bg); --color-surface: var(--color-dark-surface); --color-text: var(--color-text-on-dark); --color-border: rgba(255, 255, 255, 0.10); } }