/* Thème Wingstop — démo Merim (merim.tereza.fr, center 309, scope « merim ») ---------------------------------------------------------------------------- Source : « International Technology Digital Design Guide » v2.01 (N. Heim, 14/10/2025), le guide technique que WRI remet à ses Brand Partners internationaux. Les numéros de page cités ci-dessous renvoient à ce PDF. NOUVEAU fichier : il ne remplace pas merim/custom-colors.css (thème rouge actuel de la démo). Pour basculer la démo, il faut pointer centers.css du center 309 sur cette feuille — cf. docs/backoffice/sql/2026-10-14-merim-theme-wingstop.sql. Deux choses que ce fichier ne peut PAS faire, et qui demandent le Brand Marketing Team : - les IMAGES et ICÔNES (logo, bandeau, icônes de saveur). Le guide l'interdit explicitement (p. 16, 18, 106) : « Do not capture assets or images from this guide ». Les surfaces concernées sont donc traitées en aplat/dégradé de marque, pas en image. - la POLICE Roc Grotesk Condensed (p. 11), sous licence. Elle est déclarée en tête de pile ; en attendant les fichiers, le repli est Oswald (grotesque condensée libre, servie par fonts.bunny.net déjà préconnecté dans app.blade.php). */ @import url('https://fonts.bunny.net/css?family=oswald:300,400,500,600,700&display=swap'); :root { /* ========================================================================== PALETTE PRIMAIRE — p. 14-15. Valeurs reprises telles quelles du guide. « Buttons, logos, and legal text should always display in Primary Wingstop colors » (p. 14). Le vert Wingstop porte l'identité : c'est lui le --main-color, pas un rouge. ========================================================================== */ --ws-green: #036A38; /* Wingstop Green RGB 3,106,56 */ --ws-green-rollover: #004324; /* Rollover — BOUTONS UNIQUEMENT (p. 15, 107) */ --ws-green-medium: #62A176; /* Medium Green RGB 98,161,118 */ --ws-green-light: #A1C59F; /* Light Green RGB 161,197,159 */ --ws-gray-medium: #AAAAAA; /* Medium Gray RGB 170,170,170 */ --ws-gray-light: #CCCCCC; /* Light Gray RGB 204,204,204 */ --ws-burgundy: #9B0700; /* Burgundy RGB 155,7,0 */ --ws-red: #F93F32; /* Red RGB 249,63,50 */ --ws-black: #000000; --ws-white: #FFFFFF; /* Neutres de confort, dérivés des deux gris de la palette : le guide ne fixe pas de fond de page, et les écrans e-commerce du guide sont « black on white background » (p. 107-111). #F4F4F4 est un éclairci de Light Green/Gray pour détacher les cartes blanches du fond. */ --ws-surface: #F4F4F4; --ws-ink-secondary: #595959; /* Medium Gray assombri : #AAAAAA sur blanc = 2,3:1, sous le seuil WCAG 2.2 AA exigé p. 102. 595959 = 7:1. */ /* Échelle de saveur — p. 25 et 83 : « Use green (mild) to red (hot) icons as visual cues », « plain should always be listed last ». Les 5 crans sont pris dans la palette primaire, du plus doux au plus fort. Consommés par le composant custom « flavor-scale » (lot 2). */ --heat-0: var(--ws-gray-light); /* Plain / sans saveur — listé en dernier */ --heat-1: var(--ws-green-light); --heat-2: var(--ws-green-medium); --heat-3: var(--ws-green); --heat-4: var(--ws-red); --heat-5: var(--ws-burgundy); /* Atomic */ /* Typographie — p. 11-12. Hiérarchie du guide : Titres RGC Extra Bold 42 pt, sous-titres RGC Medium 24 pt, corps RGC Medium ou Light 20 pt, bandeaux promo RGC Black. Converti en rem sur une base 16 px. */ --font-brand: 'Roc Grotesk Condensed', 'Roc Grotesk', 'Oswald', 'Helvetica Neue Condensed', sans-serif; --ws-weight-title: 800; /* Extra Bold */ --ws-weight-banner: 700; /* Black (Oswald s'arrête à 700) */ --ws-weight-medium: 500; --ws-weight-light: 300; --ws-size-title: 2.625rem; /* 42 pt */ --ws-size-subhead: 1.5rem; /* 24 pt */ --ws-size-body: 1.25rem; /* 20 pt */ /* ========================================================================== JETONS DU FRONT — contrat consommé par global.css / common/custom-trz.css. Tous les jetons lus par le front sont renseignés, pour qu'aucun ne retombe sur une valeur de repli hors charte. ========================================================================== */ /* Couleur de marque (151 usages dans global.css) */ --main-color: var(--ws-green); --main-color-rgb: 3, 106, 56; --primary: var(--ws-green); --secondary-color: var(--ws-black); --main-bo-color: var(--ws-green); /* Promos / LTO : « Banner or Sales » en RGC Black (p. 12), et le rouge de la palette primaire pour l'accroche. */ --main-promo-color: var(--ws-red); /* Fonds et surfaces */ --main-bg-color: var(--ws-surface); --bg-page: var(--ws-surface); --bg-surface: var(--ws-white); --bg-hover: #EDEDED; --content-bg-color: var(--ws-white); --card-bg: var(--ws-white); --header-bg: var(--ws-white); /* toolbar : noir sur blanc (p. 107-111) */ --header-shadow: #00000029; --header-height: 64px; /* Texte */ --main-text: var(--ws-black); --text-primary: var(--ws-black); --text-secondary: var(--ws-ink-secondary); --text-accent: var(--ws-green); --button-text: var(--ws-white); --main-button-text: var(--ws-white); --circle-button-text: var(--ws-white); --selectable-button-text: var(--ws-black); --text-on-accent: var(--ws-white); /* Bordures et rayons — « Shape: Rectangle, round corners » (p. 107) */ --border-radius: 8px; --border-radius-sm: 6px; --card-radius: 10px; --card-radius-lg: 14px; --border-color: var(--ws-gray-light); --border-ui: var(--ws-gray-light); --border-subtle: rgba(0, 0, 0, 0.08); --border-divider: rgba(0, 0, 0, 0.06); --gray-light: rgb(229, 231, 235); --input-border: var(--ws-gray-medium); --shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* États */ --available: var(--ws-green); --unavailable: var(--ws-burgundy); /* Erreurs en Burgundy et non en Red : #F93F32 sur blanc = 3,6:1, insuffisant pour du texte au regard de WCAG 2.2 AA (p. 102). Burgundy = 8,6:1. */ --error: var(--ws-burgundy); --disabled: var(--ws-gray-medium); --order-info: var(--ws-ink-secondary); --allergens-color: var(--ws-burgundy); --allergens-bg-color: #FDECEB; /* Menu et catégories */ --menu-item-background: var(--ws-green); --menu-item-hover: var(--ws-white); --category-bg-color: var(--ws-ink-secondary); --category-item-height: 22px; --category-item-line-height: 22px; /* Produits */ --product-bg: var(--ws-surface); --product-section-line-border: var(--ws-green); --product-section-line-active-text: var(--ws-white); --product-qty-bg: var(--ws-green); --product-qty-text: var(--ws-white); --qty-selector-bg: var(--ws-green-light); --qty-selector-bg-active: var(--ws-green); --qty-selector-text: var(--ws-black); /* Panier et navigation */ --cart-amount-bg: var(--ws-green); --cart-border: var(--ws-white); --navigation-button-bg: var(--ws-black); --navigation-button-text: var(--ws-white); --btn-dark-bg: var(--ws-black); --btn-dark-text: var(--ws-white); --step-resume-amount: var(--ws-black); /* Comptes et PDV */ --google-background: var(--ws-black); --google-text: var(--ws-white); --logout-bg: var(--ws-black); --logout-text: var(--ws-white); --shop-link-bg: var(--ws-green); --shop-link-text: var(--ws-white); --shop-address: var(--ws-ink-secondary); --address-input-text: var(--ws-black); --address-input-border: var(--ws-gray-light); --address-input-item-bg: var(--ws-white); /* Bandeau de choix de PDV : aplat de marque, pas d'image — cf. en-tête. */ --banner-shop-select-image: linear-gradient(135deg, #036A38 0%, #004324 100%); } /* ============================================================================ TYPOGRAPHIE (p. 11-12) global.css impose 'Montserrat' via un sélecteur `*` et 'Plus Jakarta Sans' sur les classes .confirmation-*. On repasse au-dessus : `html *` (spécificité 0,0,2) bat le `*` quel que soit l'ordre de chargement des feuilles, et les classes sont reprises nommément. ============================================================================ */ html, body, html * { font-family: var(--font-brand); } .confirmation-title, .confirmation-subtitle, .confirmation-label, .confirmation-order-number, .confirmation-pickup-label, .confirmation-pickup-time, .confirmation-status-text, .confirmation-progress-label, .confirmation-location-label, .confirmation-location-name, .confirmation-btn-outline, .confirmation-btn-primary, .legal-body { font-family: var(--font-brand); } /* Hiérarchie du guide. Roc Grotesk est condensée : on desserre très légèrement l'interlettrage des gros titres pour rester lisible à l'écran. */ h1, .page-title, .product-title { font-family: var(--font-brand); font-weight: var(--ws-weight-title); letter-spacing: 0.01em; text-transform: uppercase; } h2, h3, .section-title { font-weight: var(--ws-weight-medium); letter-spacing: 0.01em; } body { font-weight: var(--ws-weight-light); color: var(--text-primary); background-color: var(--bg-page); } /* ============================================================================ BOUTONS (p. 107-108) « Wingstop green, white letters. Shape: Rectangle, round corners. » « Rollover: Button color changes from Wingstop green to rollover green, RGB 0, 67, 36. » Le rollover ne sert QUE pour les boutons (p. 15). ============================================================================ */ .main-button, .btn-primary, .confirmation-btn-primary, button.main-color-bg { background-color: var(--ws-green); color: var(--ws-white); border-radius: var(--border-radius); font-weight: var(--ws-weight-medium); } .main-button:hover, .btn-primary:hover, .confirmation-btn-primary:hover, button.main-color-bg:hover { background-color: var(--ws-green-rollover); color: var(--ws-white); } /* Focus visible : exigence WCAG 2.2 (p. 102), qui renforce justement le critère « Focus Appearance ». Le contour noir reste visible sur vert comme sur blanc. */ :focus-visible { outline: 3px solid var(--ws-black); outline-offset: 2px; } /* ============================================================================ REPRISES DE L'EXISTANT Ces deux règles viennent du thème merim actuel : sans elles, les visuels produits se recadrent et les produits indisponibles réapparaissent. ============================================================================ */ .product-image, .product-section-line-image { background-color: var(--main-bg-color); background-size: contain !important; background-repeat: no-repeat !important; } .product-card.disabled:not(.reward-card), .product-section-line.disabled { display: none; } /* Bandeau : aplat de marque tant que les visuels officiels ne sont pas fournis. */ .banner-wrapper { background-image: var(--banner-shop-select-image); }