/* ============================================================================= DEVOXX FRANCE — DESIGN « SIGNAL » tokens.css · source de vérité unique du design ----------------------------------------------------------------------------- Toutes les valeurs primitives (couleurs, typo, espacements, rayons, ombres) vivent ici. Les pages NE redéfinissent jamais ces valeurs en dur : elles référencent les variables ci-dessous via var(--…). Modifier une ligne ici met à jour tout le site. Sommaire : 1. Polices (@font-face) 2. Couleurs — primitives (la palette brute) 3. Couleurs — rôles (à utiliser dans les pages) 4. Typographie — familles, échelle, graisses, interlignage 5. Espacements 6. Rayons, bordures, ombres 7. Mise en page & layout 8. Mouvement 9. Mode sombre (optionnel — sections type bannière CFP) ============================================================================= */ /* ----------------------------------------------------------------------------- 1. POLICES ----------------------------------------------------------------------------- • Open Sans (titres) et Plus Jakarta Sans (textes) : chargées via Google Fonts dans le des pages : https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap • Pirulen (wordmark « Devoxx ») : police propriétaire, non disponible sur le web. Tant que le fichier n'est pas hébergé, le navigateur retombe sur la doublure définie dans --ff-wordmark (Orbitron / sans-serif). ▸ POUR ACTIVER LE VRAI PIRULEN : 1. Place pirulen.woff2 (et .woff) à côté de ce fichier, p.ex. /fonts/ 2. Décommente le bloc @font-face ci-dessous et ajuste le chemin src. Aucune autre modification nécessaire : tout le wordmark suivra. ----------------------------------------------------------------------------- */ /* @font-face { font-family: 'Pirulen'; src: url('/fonts/pirulen.woff2') format('woff2'), url('/fonts/pirulen.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; } */ :root { /* --------------------------------------------------------------------------- 2. COULEURS — PRIMITIVES (palette AdobeColor Devoxx France) Ne pas utiliser directement dans les pages : passer par les rôles (§3). --------------------------------------------------------------------------- */ --c-noir: #141414; /* noir d'encre (titres, footer, fonds sombres) */ --c-gris-fonce: #383838; /* #383838 — gris foncé de la palette */ --c-gris: #969696; /* #969696 — gris moyen (uniquement gros texte */ /* ou usage non-textuel, contraste faible)*/ --c-gris-50: #F6F5F3; /* fond très clair (surfaces alternées) */ --c-gris-100: #ECECEC; /* gris clair (filets, bordures) */ --c-gris-500: #5A5A5A; /* gris lisible (~7:1 sur blanc) pour petit texte */ --c-blanc: #FFFFFF; /* #FFFFFF */ --c-orange: #FF9521; /* #FF9521 — orange signal (accent principal) */ --c-orange-pale: #BF8D55; /* #BF8D55 — orange pâle / bronze (accent 2) */ /* --------------------------------------------------------------------------- 3. COULEURS — RÔLES (à utiliser partout dans les pages) L'accent orange sert d'élément GRAPHIQUE (barres, points, soulignés, fonds). En TEXTE sur blanc il échoue au contraste : pour du petit texte, utiliser --texte ou --texte-secondaire. L'orange en texte n'est valide que sur fond sombre (--surface-inverse). --------------------------------------------------------------------------- */ --accent: var(--c-orange); /* accent principal */ --accent-2: var(--c-orange-pale); /* accent secondaire / bronze */ --texte: var(--c-noir); /* texte principal */ --texte-secondaire: var(--c-gris-500); /* libellés, légendes, méta */ --texte-tertiaire: var(--c-gris); /* gros texte discret uniquement */ --texte-inverse: var(--c-blanc); /* texte sur fond sombre */ --surface: var(--c-blanc); /* fond par défaut */ --surface-alt: var(--c-gris-50); /* sections alternées */ --surface-inverse: var(--c-noir); /* footer, bannières sombres */ --surface-bandeau: var(--c-gris-fonce); /* topbar */ --bordure: var(--c-gris-100); /* filets, séparateurs, cartes */ --bordure-forte: var(--c-noir); /* filets marqués (grilles) */ /* états dérivés de l'accent (calculés, pas dans la palette brute) */ --accent-hover: #ED8312; /* orange au survol */ --accent-voile: rgba(255,149,33,.25); /* halo / focus ring */ --accent-glow: rgba(255,149,33,.40); /* lueur sur fond sombre */ /* --------------------------------------------------------------------------- 4. TYPOGRAPHIE --------------------------------------------------------------------------- */ /* familles */ --ff-wordmark: 'Pirulen', 'Orbitron', sans-serif; /* « Devoxx » */ --ff-titre: 'Open Sans', sans-serif; /* titres */ --ff-texte: 'Plus Jakarta Sans', sans-serif; /* corps de texte */ --ff-mono: 'JetBrains Mono', ui-monospace, monospace; /* labels, méta */ /* échelle de tailles (fluide pour les titres de hero) */ --t-display: clamp(36px, 5vw, 62px); /* h1 de hero */ --t-h2: 32px; /* titres de section */ --t-h3: 26px; /* sous-titres */ --t-h4: 18px; /* titres de carte */ --t-lead: 18px; /* chapô / sous-titre de hero */ --t-body: 16px; /* texte courant */ --t-small: 14px; /* texte secondaire */ --t-label: 12.5px; /* eyebrows, libellés mono */ --t-micro: 11px; /* tags, légendes */ /* graisses */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* interlignage */ --lh-tight: 1.05; /* gros titres */ --lh-snug: 1.2; /* titres de carte */ --lh-normal: 1.6; /* texte courant */ --lh-loose: 1.7; /* paragraphes longs */ /* interlettrage */ --ls-wordmark: .16em; /* wordmark Pirulen */ --ls-label: .18em; /* eyebrows */ --ls-titre: -.02em; /* resserrement des titres */ /* --------------------------------------------------------------------------- 5. ESPACEMENTS (échelle de base 4px) --------------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 40px; --sp-8: 54px; --sp-section: 84px; /* respiration verticale entre sections */ /* --------------------------------------------------------------------------- 6. RAYONS · BORDURES · OMBRES --------------------------------------------------------------------------- */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 14px; --r-pill: 999px; --bw: 1px; /* filet standard */ --bw-accent: 3px; /* liseré d'accent (barre) */ --shadow-card: 0 14px 30px rgba(0,0,0,.08); /* survol de carte */ --shadow-cta: 0 6px 18px var(--accent-glow); /* survol du bouton orange */ --shadow-glow: 0 0 30px rgba(255,149,33,.18); /* lueur sur fond sombre */ /* signature « Signal » : barre d'accent devant les eyebrows */ --bar-w: 24px; --bar-h: var(--bw-accent); /* --------------------------------------------------------------------------- 7. MISE EN PAGE --------------------------------------------------------------------------- */ --max-contenu: 1180px; /* largeur max du contenu */ --gouttiere: 34px; /* marge interne gauche/droite */ --rail-w: 64px; /* largeur du rail-lanyard du hero */ --header-h: 72px; /* hauteur du header */ /* --------------------------------------------------------------------------- 8. MOUVEMENT --------------------------------------------------------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: .16s; --dur-normal: .3s; --dur-compteur: 1000ms; /* durée d'animation des compteurs */ } /* ----------------------------------------------------------------------------- 9. MODE SOMBRE PONCTUEL ----------------------------------------------------------------------------- « Signal » est un thème clair. Les zones sombres (footer, bannière CFP) sont ponctuelles : applique la classe .surface-sombre sur un conteneur pour basculer les rôles de texte/surface sans réécrire de couleurs. ----------------------------------------------------------------------------- */ .surface-sombre { --texte: var(--texte-inverse); --texte-secondaire: #BDBDBD; --texte-tertiaire: var(--c-gris); --surface: var(--surface-inverse); --surface-alt: #1C1C1C; --bordure: #2A2A2A; background: var(--surface); color: var(--texte); } /* ----------------------------------------------------------------------------- EXEMPLES D'USAGE (à supprimer une fois intégré — ici pour mémoire) ----------------------------------------------------------------------------- .eyebrow { font-family: var(--ff-mono); font-size: var(--t-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--texte); // texte foncé lisible… } .eyebrow::before { // …et l'orange en barre graphique content: ""; display: inline-block; width: var(--bar-w); height: var(--bar-h); background: var(--accent); vertical-align: middle; margin-right: var(--sp-3); border-radius: 1px; } .wordmark { font-family: var(--ff-wordmark); letter-spacing: var(--ls-wordmark); } .cta { background: var(--accent); color: var(--c-noir); border-radius: var(--r-md); } .cta:hover{ box-shadow: var(--shadow-cta); } ----------------------------------------------------------------------------- */