/* * Hop We Care — Design Tokens * ───────────────────────────────────────────────────────────────────────────── * Source de vérité unique pour toutes les décisions visuelles. * Ordre de chargement recommandé dans : * tokens.css → reset.css → layout.css → components/*.css * * Polices : WOFF2 auto-hébergés dans /assets/fonts/ — aucune dépendance CDN externe. * Phase 1.3 accomplie : @font-face locaux — zero dépendance Google Fonts. * ───────────────────────────────────────────────────────────────────────────── */ /* ── Polices auto-hébergées (WOFF2 locaux — aucune dépendance externe) ───── */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/playfair-display-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/playfair-display-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/roboto-slab-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/roboto-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/roboto-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/roboto-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Palette de couleurs ───────────────────────────────────────────────── * Source : mesures directes sur la baseline hopwecare.org (arch_report.md) * ─────────────────────────────────────────────────────────────────────── */ --color-teal: #247F86; /* Primaire marque — CTA, accents */ --color-teal-light: #0BA3AE; /* Bordure CTA, highlights de survol */ --color-teal-dark: #1d666b; /* État hover des CTA */ --color-navy: #12406E; /* Titres, liens forts */ --color-sky: #6EC1E4; /* Accent secondaire */ --color-dark: #1E1E1E; /* Texte primaire sur fonds clairs */ --color-text: #7A7A7A; /* Corps de texte */ --color-muted: #54595F; /* Texte secondaire / métadonnées */ --color-white-off: #FCFCFC; /* Fond page, fonds cartes */ --color-overlay: rgba(2, 1, 1, 0.58); /* Overlay hero (variante foncée) */ --color-overlay-alt: rgba(0, 0, 0, 0.47); /* Overlay hero (variante claire) */ /* ── Aliases composants ────────────────────────────────────────────────── * Permet de réutiliser header.css et hero.css sans modification. * À terme, les composants migrent vers les noms sémantiques ci-dessus. * ─────────────────────────────────────────────────────────────────────── */ --hwc-teal: var(--color-teal); --hwc-teal-dark: var(--color-teal-dark); --hwc-teal-border: var(--color-teal-light); --hwc-teal-hover: var(--color-teal-dark); --hwc-navy: var(--color-navy); --hwc-white: var(--color-white-off); --hwc-text: var(--color-dark); /* ── Image hero (remplacée par image locale Phase 1.3) ───────────────── */ --hero-img: url("../../images/hero-background.jpg"); /* ── Typographie — familles ────────────────────────────────────────────── * Roboto = corps, Roboto Slab = titres section, Playfair Display = hero, * Poppins = cartes, Helvetica = UI/CTA * ─────────────────────────────────────────────────────────────────────── */ --font-title: "Playfair Display", Georgia, serif; --font-heading: "Roboto Slab", serif; --font-body: "Roboto", sans-serif; --font-card: "Poppins", sans-serif; --font-ui: Helvetica, Arial, sans-serif; --font-nav: "Roboto Slab", Helvetica, Arial, sans-serif; /* ── Typographie — tailles ───────────────────────────────────────────────*/ --text-hero: clamp(1.7rem, 4vw, 3.375rem); /* 27 → 54px fluid */ --text-section: clamp(1.75rem, 3vw, 2.625rem); /* 28 → 42px fluid */ --text-lg: 1.25rem; /* 20px */ --text-base: 1rem; /* 16px */ --text-ui: 0.9375rem; /* 15px */ --text-nav: 0.95rem; --text-sm: 0.875rem; /* 14px */ --text-xs: 0.75rem; /* 12px */ /* ── Typographie — graisse ───────────────────────────────────────────────*/ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 900; /* ── Espacement (base 4px) ───────────────────────────────────────────────*/ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Layout ──────────────────────────────────────────────────────────────*/ --layout-max-width: 1140px; /* Wrapper contenu principal */ --layout-wide-width: 1440px; /* Sections pleine largeur */ --layout-padding-x: 1.5rem; /* Gouttière horizontale */ --header-height: 80px; --header-height-mobile: 64px; /* ── Bordures & rayon ────────────────────────────────────────────────────*/ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 50px; --radius-full: 100px; /* ── Ombres ──────────────────────────────────────────────────────────────*/ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.16); --shadow-header: 0 2px 16px rgba(0, 0, 0, 0.08); /* ── Transitions ─────────────────────────────────────────────────────────*/ --transition: 0.25s ease; --transition-slow: 0.4s ease; --transition-fast: 0.15s ease; /* ── Z-index ─────────────────────────────────────────────────────────────*/ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-header: 1000; --z-modal: 9000; --z-toast: 9999; }