/** * apb-tokens.css — Design tokens canonici Fixsalis / picopico * * SCOPO : source-of-truth unique pour palette, typographie, radius, * shadow, motion. Charge en PREMIER (priority 5) via class-plugin.php * pour que tous les autres CSS (apb-popup, apb-ai-search, apb-search-cta, * apb-bricks-widgets, apb-archive, apb-design, apb-annuaire-mockup, * landing-pro, etc.) puissent utiliser `var(--apb-*)` au lieu de * réinventer chacun leur palette. * * MIGRATION (v2.29.0) : remplace les 3 systèmes concurrents * - legacy cool blue #185FA5 / #0C447C * - modern .apb-page #0B2A4A / #143D69 * - .fxs-annuaire #0B2A4A / #143D69 * par une palette navy + amber unique. * * DIRECTION ESTHÉTIQUE : "Belgian craft editorial" * - palette navy chaud + beige cream + accent amber * - typo Inter (body) + Fraunces optionnel (display, opt-in via * `apb-fraunces.css` à enqueue séparément quand woff2 dispo) * - tape "drapeau belge" (navy / amber / red) pour les ancres marketing * - grain SVG sublimé en `--apb-grain` * * IMPORTANT : ce fichier ne style RIEN directement (pas de sélecteurs * autres que :root). Il déclare uniquement des custom properties. */ :root { /* ════════════════════════════════════════════════════════════ BRAND (navy chaud — Fixsalis) ════════════════════════════════════════════════════════════ */ --apb-brand: #0B2A4A; --apb-brand-2: #143D69; --apb-brand-3: #1E5288; --apb-brand-soft: #EEF2F8; --apb-brand-soft-2: #DDE6F1; /* ════════════════════════════════════════════════════════════ ACCENT (amber) ════════════════════════════════════════════════════════════ */ --apb-accent: #F59E0B; --apb-accent-2: #E88B05; --apb-accent-3: #C5731F; --apb-accent-soft: #FEF3D7; --apb-accent-soft-2: #FCDFA0; --apb-accent-ink: #1A1204; /* texte sur fond amber */ /* ════════════════════════════════════════════════════════════ SURFACES & BACKGROUND ════════════════════════════════════════════════════════════ */ --apb-bg: #FAFAF7; /* page background (beige cream) */ --apb-bg-soft: #F4F2EC; /* zones secondaires */ --apb-bg-deep: #EDE9DC; /* zones tertiaires + toggles inactifs */ --apb-surface: #FFFFFF; /* cards, modals, inputs */ --apb-surface-2: #FDFCF9; /* sub-surface (sidebar contact card) */ /* ════════════════════════════════════════════════════════════ INK (text scale) ════════════════════════════════════════════════════════════ */ --apb-ink: #0F172A; /* texte principal */ --apb-ink-2: #334155; /* paragraphes */ --apb-ink-3: #64748B; /* labels, muted */ --apb-ink-4: #94A3B8; /* hint, placeholder */ --apb-ink-on-brand: #FFFFFF; /* texte sur fond navy */ /* ════════════════════════════════════════════════════════════ LINES & DIVIDERS ════════════════════════════════════════════════════════════ */ --apb-line: #E7E3D9; /* beige line — standard */ --apb-line-2: #EDEAE1; /* line plus claire (subdivisions) */ --apb-line-strong: #D4CCB8; /* hover state, separation forte */ --apb-line-cool: #E2E6EA; /* legacy cool — DEPRECATED, use --apb-line */ /* ════════════════════════════════════════════════════════════ SEMANTIC COLORS ════════════════════════════════════════════════════════════ */ --apb-ok: #15803D; --apb-ok-2: #065F46; --apb-ok-soft: #ECFDF5; --apb-ok-soft-2: #DCFCE7; --apb-ok-border: #A7F3D0; --apb-warn: #B45309; --apb-warn-2: #78350F; --apb-warn-soft: #FFFBEB; --apb-warn-soft-2: #FEF3C7; --apb-warn-border: #FDE68A; --apb-danger: #DC2626; --apb-danger-2: #B91C1C; --apb-danger-soft: #FEF2F2; --apb-danger-border: #FCA5A5; --apb-info: #0369A1; --apb-info-soft: #E0F2FE; --apb-wa: #25D366; /* WhatsApp */ --apb-wa-soft: #F0FDF4; /* ════════════════════════════════════════════════════════════ LEGACY ALIASES (DEPRECATED — migration v2.29.0 → v2.30.0) ──────────────────────────────────────────────────────────── Anciennes valeurs hardcodées qui vivaient dans apb-popup.css, apb-ai-search.css, apb-search-cta.css, apb-bricks-widgets.css, apb-archive.css. Mappées sur les nouveaux tokens pour assurer une compat visuelle pendant la transition. Supprimer après audit complet de l'absence de hardcoded. ════════════════════════════════════════════════════════════ */ --apb-brand-legacy: var(--apb-brand); /* ex #185FA5 → navy */ --apb-brand-legacy-dark: var(--apb-brand-2); /* ex #0C447C → navy-2 */ --apb-bg-legacy: var(--apb-bg); /* ex #F7F8FA → beige */ --apb-text-legacy: var(--apb-ink); /* ex #1A1A2E → ink */ /* ════════════════════════════════════════════════════════════ BELGIAN FLAG TAPE (decorative — tri-color top stripe) Utilisée sur hero stats + cta-final (landing-pro.css déjà) ════════════════════════════════════════════════════════════ */ --apb-belgium-black: #0B2A4A; --apb-belgium-amber: #F59E0B; --apb-belgium-red: #EF3340; --apb-tape: linear-gradient( to right, var(--apb-belgium-black) 0%, var(--apb-belgium-black) 33%, var(--apb-belgium-amber) 33%, var(--apb-belgium-amber) 66%, var(--apb-belgium-red) 66% ); /* ════════════════════════════════════════════════════════════ TYPOGRAPHY ──────────────────────────────────────────────────────────── `--apb-display` = font pour H1/H2 hero & sections (impact). Pour activer Fraunces (serif éditorial moderne, OFL) : 1. déposer woff2 dans public/fonts/fraunces/ 2. enqueue public/css/apb-fraunces.css après apb-tokens.css 3. la cascade fera le reste — Fraunces prendra le pas sur Inter car la stack est `'Fraunces', 'Inter', ...`. Si pas dispo, Inter est utilisé (déjà self-hosté ailleurs). ════════════════════════════════════════════════════════════ */ --apb-display: 'Fraunces', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --apb-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --apb-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --apb-text-base: 16px; --apb-leading: 1.55; --apb-leading-tight: 1.25; --apb-tracking-tight: -0.025em; --apb-tracking-display: -0.03em; --apb-tracking-wide: 0.08em; /* ════════════════════════════════════════════════════════════ RADIUS scale ════════════════════════════════════════════════════════════ */ --apb-radius-xs: 6px; --apb-radius-sm: 10px; --apb-radius-md: 14px; --apb-radius-lg: 18px; --apb-radius-xl: 24px; --apb-radius-pill: 100px; /* ════════════════════════════════════════════════════════════ SHADOW scale (toutes basées sur le navy chaud, pas du gris pur) ════════════════════════════════════════════════════════════ */ --apb-shadow-1: 0 1px 2px rgba(11, 42, 74, 0.04), 0 2px 8px rgba(11, 42, 74, 0.04); --apb-shadow-2: 0 4px 14px rgba(11, 42, 74, 0.06), 0 12px 32px rgba(11, 42, 74, 0.06); --apb-shadow-3: 0 12px 24px rgba(11, 42, 74, 0.10), 0 24px 48px rgba(11, 42, 74, 0.12); --apb-shadow-amber: 0 6px 16px rgba(245, 158, 11, 0.30); --apb-shadow-amber-2: 0 12px 24px rgba(245, 158, 11, 0.40); /* ════════════════════════════════════════════════════════════ MOTION (cubic-bezier dégagés + durations) ════════════════════════════════════════════════════════════ */ --apb-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --apb-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --apb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --apb-dur-fast: 150ms; --apb-dur: 220ms; --apb-dur-slow: 350ms; --apb-dur-xslow: 700ms; /* ════════════════════════════════════════════════════════════ Z-INDEX scale ════════════════════════════════════════════════════════════ */ --apb-z-sticky: 100; --apb-z-overlay: 50; --apb-z-modal: 100000; --apb-z-popup: 100000; --apb-z-toast: 99999; /* ════════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════════ */ --apb-max-w: 1240px; --apb-max-w-prose: 720px; --apb-pad-x: clamp(20px, 5vw, 56px); --apb-gap: 20px; /* ════════════════════════════════════════════════════════════ GRAIN TEXTURE (décoratif — overlay 3% noise pour effet "magazine") Usage : background-image: var(--apb-grain); + background-blend-mode ou en pseudo-elements ::before opacity 0.04 sur sections clés. ════════════════════════════════════════════════════════════ */ --apb-grain: url("data:image/svg+xml;utf8,"); /* ════════════════════════════════════════════════════════════ RADIAL ATMOSPHERE (gradient blobs pour hero / sections marketing) Utilisation typique : .hero { background: var(--apb-radial-amber-tr), var(--apb-radial-navy-bl), var(--apb-bg); } ════════════════════════════════════════════════════════════ */ --apb-radial-amber-tr: radial-gradient(60% 50% at 100% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 60%); --apb-radial-navy-bl: radial-gradient(50% 40% at 0% 100%, rgba(11, 42, 74, 0.04) 0%, transparent 60%); } /* ════════════════════════════════════════════════════════════ REVEAL ANIMATION (utility — tagged by apb-motion.js) ──────────────────────────────────────────────────────────── Utilisée par apb-motion.js qui ajoute .apb-reveal aux .pro-card, .apb-sec, .apb-geo-page__nearby li, .apb-geo-page__faq details, etc. Stagger via var(--apb-reveal-delay) — défini par le JS au scan. Respecte prefers-reduced-motion. ════════════════════════════════════════════════════════════ */ .apb-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--apb-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 700ms var(--apb-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); transition-delay: var(--apb-reveal-delay, 0ms); will-change: opacity, transform; } .apb-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .apb-reveal { opacity: 1; transform: none; transition: none; } } /* ════════════════════════════════════════════════════════════ FOCUS RING — accessible keyboard navigation (WCAG 2.4.7) Appliqué globalement sur tout le site pour éviter que chaque composant redéfinisse son outline. Override possible via `*:focus-visible { outline: ... }` plus spécifique. ════════════════════════════════════════════════════════════ */ :where(*):focus-visible { outline: 2px solid var(--apb-brand); outline-offset: 2px; border-radius: 2px; } /* Inputs / boutons gardent un offset interne plus discret */ :where(input, select, textarea, button):focus-visible { outline-offset: 0; }