/* ========================================================================= VELOLOD — Design tokens Une seule source de vérité pour les couleurs, la typographie, les espaces, les rayons, les ombres et les durées. Aucun composant ne code une valeur en dur : tout passe par une variable. ========================================================================= */ :root { /* ---------- Couleurs de marque --------------------------------------- Relevées sur le logo (#E5010B) et sur la bannière VTT (#FB0621). Le rouge est un accent : il ne dépasse jamais ~10 % de la surface. */ --vl-red-50: #FFF1F2; --vl-red-100: #FFDFE2; --vl-red-200: #FFC2C7; --vl-red-400: #FB2634; --vl-red-500: #E5010B; /* rouge signature — CTA, actif, badges */ --vl-red-600: #C60009; --vl-red-700: #9E0007; /* Graphite : textes, header secondaire, footer, surfaces premium */ --vl-ink-900: #14171A; /* noir doux — titres */ --vl-ink-800: #1F2328; --vl-ink-700: #30343A; /* anthracite du logo */ --vl-ink-600: #454B53; --vl-ink-500: #626973; /* texte secondaire */ --vl-ink-400: #8A9099; --vl-ink-300: #B9BEC5; --vl-ink-200: #DCDFE4; --vl-ink-100: #EDEFF2; --vl-ink-50: #F6F7F9; --vl-white: #FFFFFF; /* ---------- Ambre — la troisième voix --------------------------------- Le rouge signe, le graphite structure. Il manquait une couleur qui *appelle* : promotions, nouveautés, newsletter, chiffres clés. L'ambre est le partenaire historique du rouge et du noir dans l'univers du cycle de compétition ; il ne concurrence pas le rouge, il le relance. Sur ambre, le texte est toujours graphite : le contraste est là. */ --vl-amber-50: #FFF8E1; --vl-amber-100: #FFEDB3; --vl-amber-300: #FFD24D; --vl-amber-400: #FFC400; /* ambre signature */ --vl-amber-500: #F0B000; --vl-amber-600: #C88F00; /* Blanc chaud : le fond « respiration ». Un gris neutre rendait l'ensemble froid et clinique ; ce sable très clair réchauffe la page sans salir les packshots posés dessus. */ --vl-sand-50: #FAF8F5; --vl-sand-100: #F2EEE8; --vl-sand-200: #E6E0D6; /* États */ --vl-success-500: #16794C; --vl-success-50: #E7F5EE; --vl-warn-500: #A76A00; --vl-warn-50: #FFF6E5; --vl-info-500: #1D5FA8; --vl-info-50: #EAF2FB; /* ---------- Rôles sémantiques ---------------------------------------- */ --bg: var(--vl-white); --bg-subtle: var(--vl-sand-50); --bg-warm: var(--vl-sand-100); --bg-inverse: var(--vl-ink-900); --surface: var(--vl-white); --surface-raised: var(--vl-white); --border: var(--vl-ink-200); --border-strong: var(--vl-ink-300); --text: var(--vl-ink-900); --text-muted: var(--vl-ink-500); --text-inverse: var(--vl-white); --accent: var(--vl-red-500); --accent-hover: var(--vl-red-600); --accent-2: var(--vl-amber-400); --accent-2-hover: var(--vl-amber-500); --focus: var(--vl-red-500); /* ---------- Typographie ---------------------------------------------- Display : Archivo — grotesque robuste, excellente en italique lourde, c'est elle qui porte le ton sportif des titres de bannière. Texte : Plus Jakarta Sans — humaniste géométrique, très lisible en petites tailles, idéale pour les fiches produit et les filtres. */ --font-display: "Archivo", "Archivo Black", "Helvetica Neue", Arial, sans-serif; --font-text: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; /* Échelle typographique — ratio 1.25, fluide entre 360 px et 1440 px */ --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem); --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.94rem); /* Corps de texte ramené d'environ 18 px à 16,5 px sur grand écran : la taille précédente encombrait les descriptions produit. */ --step-0: clamp(0.92rem, 0.88rem + 0.15vw, 0.99rem); --step-1: clamp(1.20rem, 1.13rem + 0.32vw, 1.41rem); --step-2: clamp(1.44rem, 1.33rem + 0.53vw, 1.76rem); --step-3: clamp(1.73rem, 1.55rem + 0.85vw, 2.20rem); --step-4: clamp(2.07rem, 1.79rem + 1.32vw, 2.75rem); --step-5: clamp(2.49rem, 2.05rem + 2.05vw, 3.44rem); --step-6: clamp(2.99rem, 2.32rem + 3.10vw, 4.30rem); /* Pente plus forte : à 390 px, « REPOUSSEZ » débordait de la colonne du héros de 37 px et se retrouvait coupé au bord de l'écran. */ --step-7: clamp(2.60rem, 1.33rem + 7.13vw, 5.38rem); --lh-tight: 0.94; --lh-snug: 1.15; --lh-normal: 1.55; --tracking-display: -0.02em; --tracking-eyebrow: 0.28em; /* ---------- Espacement — base 4 px ------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Rythme vertical des sections. Resserré volontairement : une boutique se lit dense. Les grands vides d'un site vitrine donnent l'impression d'un catalogue pauvre. */ --section-y: clamp(2.25rem, 1.35rem + 3.1vw, 3.75rem); --section-y-lg: clamp(3rem, 1.7rem + 4.4vw, 5rem); /* ---------- Grille ---------------------------------------------------- 12 colonnes, gouttière 24 px, conteneur 1440 px, marge 20 px mobile. Élargi : le catalogue doit profiter des grands écrans et afficher cinq produits de front plutôt que quatre. */ --container: 1440px; --container-narrow: 880px; --gutter: clamp(1.25rem, 0.9rem + 1.5vw, 1.5rem); --grid-cols: 12; /* ---------- Rayons ---------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* ---------- Élévation ------------------------------------------------- Ombres neutres et basses : l'interface reste plate et technique. */ --shadow-xs: 0 1px 2px rgba(20, 23, 26, 0.06); --shadow-sm: 0 2px 8px rgba(20, 23, 26, 0.07); --shadow-md: 0 8px 24px rgba(20, 23, 26, 0.09); --shadow-lg: 0 18px 48px rgba(20, 23, 26, 0.13); --shadow-red: 0 10px 26px rgba(229, 1, 11, 0.28); /* ---------- Mouvement ------------------------------------------------- Rapide sur les micro-interactions, plus ample sur les révélations. */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --dur-reveal: 720ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- Empilement ------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-dropdown: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --header-h: 132px; --header-h-compact: 68px; } /* Le catalogue est photographique sur fond blanc : le site s'affiche en clair. On neutralise le mode sombre du navigateur plutôt que de laisser les couleurs dériver. */ :root { color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } }