/* ===================================================================== 01 · TOKENS — identité visuelle du site --------------------------------------------------------------------- ★ SEUL FICHIER À MODIFIER pour adapter le thème à un nouveau client. Tous les autres fichiers de assets/css/ lisent ces variables : ils ne contiennent (presque) aucune couleur ni police en dur. Client actuel : Top Pizza (Langres) — couleurs relevées sur le logo. Section 1 « Marque » → à changer pour chaque client. Section 2 « Interface » → rôle de chaque couleur. Optionnel : par défaut tout découle de la section 1. Polices : les familles déclarées ici doivent aussi être chargées → constante WOOFOOD_BISTRO_GOOGLE_FONTS dans functions.php. ===================================================================== */ :root { /* ------------------------------------------------------------------- 1. MARQUE ------------------------------------------------------------------- */ /* Couleur principale — boutons, bandeaux de catégories, éléments actifs */ --brand-primary: #C3261A; /* rouge du lettrage « Top Pizza » */ --brand-primary-dark: #9C1C12; /* survol + texte rouge sur fond clair */ --brand-on-primary: #FFFFFF; /* texte posé sur la couleur principale */ /* Accent — badges, codes promo, petits détails. Couleur claire : ne jamais l'utiliser pour du texte sur fond blanc. */ --brand-accent: #F4B35A; /* croûte dorée */ --brand-on-accent: #3A2313; /* Textes et fonds */ --brand-ink: #3A2313; /* brun du trait d'illustration */ --brand-ink-soft: #6F5B4B; /* texte secondaire (descriptions) */ --brand-bg: #FBF3E6; /* fond de page (couleur pâte) */ --brand-surface: #FFFFFF; /* cartes, panneaux, fenêtres */ --brand-surface-alt: #FFF8EE; /* fonds doux, survols */ --brand-border: #EADCC6; /* États */ --brand-success: #3F7A2E; /* basilic : « Ouvert », confirmations */ --brand-danger: #B3261E; /* erreurs */ /* Polices */ --brand-font-display: "Lobster", "Brush Script MT", cursive; --brand-font-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Formes */ --brand-radius: 14px; /* cartes et panneaux */ --brand-radius-sm: 8px; /* champs, images, petits blocs */ --brand-radius-btn: 999px; /* boutons — 999px = pilule, 8px = rectangle arrondi */ /* Motif signature (nappe vichy) sous l'en-tête et au-dessus du pied de page. Pour le retirer : --brand-pattern: none; */ --brand-pattern-height: 12px; /* hauteur de la bande = 2 rangées de carreaux */ --brand-pattern: repeating-conic-gradient(var(--brand-primary) 0 25%, var(--brand-surface) 0 50%) 0 0 / var(--brand-pattern-height) var(--brand-pattern-height); /* ------------------------------------------------------------------- 2. INTERFACE — réglages fins (optionnel) ------------------------------------------------------------------- */ /* Texte */ --ui-text: var(--brand-ink); --ui-text-soft: var(--brand-ink-soft); --ui-heading: var(--brand-ink); --ui-title: var(--brand-primary); /* grands titres en police display */ --ui-link: var(--brand-primary-dark); --ui-link-hover: var(--brand-primary); --ui-price: var(--brand-ink); /* En-tête */ --ui-header-bg: var(--brand-surface); --ui-header-text: var(--brand-ink); --ui-header-active: var(--brand-primary); --ui-logo-height: 72px; --ui-logo-height-mobile: 52px; /* Pied de page */ --ui-footer-bg: var(--brand-ink); --ui-footer-text: var(--brand-bg); --ui-footer-link-hover: var(--brand-accent); /* Bandeaux : catégorie OUVERTE du menu + titres de widgets (« Panier ») */ --ui-band-bg: var(--brand-primary); --ui-band-bg-hover: var(--brand-primary-dark); --ui-band-text: var(--brand-on-primary); /* Catégories FERMÉES du menu — Top Pizza : bandeaux pleins, comme les ouvertes. Variante « cartes claires avec liseré » (autre client) : --ui-band-closed-bg: var(--brand-surface); --ui-band-closed-bg-hover: var(--brand-surface-alt); --ui-band-closed-text: var(--brand-ink); --ui-band-closed-accent: var(--brand-primary); --ui-band-closed-edge: var(--brand-primary); --ui-band-closed-icon-bg: var(--brand-surface-alt); --ui-band-closed-border: var(--brand-border); */ --ui-band-closed-bg: var(--ui-band-bg); --ui-band-closed-bg-hover: var(--ui-band-bg-hover); --ui-band-closed-text: var(--ui-band-text); --ui-band-closed-accent: var(--ui-band-text); /* icône « + » */ --ui-band-closed-edge: transparent; /* liseré gauche (transparent = aucun) */ --ui-band-closed-icon-bg: var(--brand-surface); /* pastille de l'icône */ --ui-band-closed-border: var(--ui-band-bg); /* contour de la carte */ /* Boutons — principal (plein) et secondaire (contour) */ --ui-btn-bg: var(--brand-primary); --ui-btn-bg-hover: var(--brand-primary-dark); --ui-btn-text: var(--brand-on-primary); --ui-btn2-color: var(--brand-ink); /* Barre « panier » collée en bas sur mobile — volontairement d'une autre couleur que les bandeaux pour être repérée tout de suite */ --ui-cartbar-bg: var(--brand-accent); --ui-cartbar-text: var(--brand-on-accent); --ui-cartbar-badge-bg: var(--brand-primary); /* pastille du nombre d'articles */ --ui-cartbar-badge-text: var(--brand-on-primary); /* Teintes dérivées automatiquement (rien à changer) */ --ui-primary-soft: color-mix(in srgb, var(--brand-primary) 9%, var(--brand-surface)); --ui-success-soft: color-mix(in srgb, var(--brand-success) 12%, var(--brand-surface)); --ui-danger-soft: color-mix(in srgb, var(--brand-danger) 9%, var(--brand-surface)); --ui-accent-soft: color-mix(in srgb, var(--brand-accent) 25%, var(--brand-surface)); --ui-border-strong: color-mix(in srgb, var(--brand-border) 55%, var(--brand-ink)); /* bord des champs : contraste ≥ 3:1 */ --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 30%, transparent); --ui-shadow-sm: 0 1px 3px color-mix(in srgb, var(--brand-ink) 10%, transparent); --ui-shadow-md: 0 6px 18px color-mix(in srgb, var(--brand-ink) 12%, transparent); --ui-shadow-lg: 0 20px 48px color-mix(in srgb, var(--brand-ink) 22%, transparent); /* Mise en page et animations */ --ui-container: 1240px; --ui-speed: .18s; --ui-ease: cubic-bezier(.2, .7, .2, 1); /* Bas de page caché par l'interface du navigateur (voir juste en dessous) */ --ui-bottom-overlap: 0px; } /* Chrome sur iPhone : sa nouvelle barre du bas (« Posez une question ») recouvre environ 37 px du bas de la page (mesuré sur captures, sept. 2026). Ce qui est collé en bas — barre panier, bouton « Ajouter au panier » — prolonge son fond dessous et garde son contenu dans la partie visible. Classe posée par woofood_bistro_flag_chrome_ios() dans functions.php. */ .is-chrome-ios { --ui-bottom-overlap: 44px; }