/* ══════════════════════════════════════════════════════════════════════════ Yardis — thème clair du tunnel /order (vague 1, 2026-09). Spec : docs/superpowers/specs/2026-09-08-yardis-order-light-design.md Activation : layouts/base.html pose data-surface="order" sur pour la seule route pages.order et charge cette feuille APRÈS le :root doré. TOUTES les règles vivent sous html[data-surface="order"] — le test tests/test_order_light_scope.py::test_order_yardis_css_is_fully_scoped refuse toute règle qui fuirait vers une autre page. Doctrine (déjà celle d'input.css au passage warm-dark) : les NOMS des jetons du moteur ne bougent pas, leurs VALEURS changent ici. Dans ce scope, bg-ink peint donc du PAPIER et text-bone de l'ENCRE. Voir docs/yardis/ordering/DESIGN.md, « Implémentation vague 1 ». Cette feuille est hors layer : n'importe laquelle de ses règles gagne sur les utilitaires Tailwind (layer utilities). C'est voulu pour les jetons et les accroches ; c'est un PIÈGE pour les classes d'état (border-saffron, border-success, …) que la section « champs » ré-affirme explicitement, dans l'ordre de priorité. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Jetons ──────────────────────────────────────────────────────────── */ html[data-surface="order"] { color-scheme: light; /* Surfaces */ --color-ink: #faf8f4; /* papier : fond de page (body), voile des onglets */ --color-graphite: #ffffff; /* bandeau collant du checkout : panneau blanc */ --color-slate: #ffffff; /* cartes, champs, options, feuille */ --color-slate-2: #eee9e2; /* piste neutre : survols, poignée de la feuille */ --color-rule: #e9e2d9; /* filets décoratifs */ --color-rule-2: #e9e2d9; /* Texte */ --color-bone: #292320; /* encre */ --color-bone-muted: #625a54; /* secondaire — AA sur blanc, papier, fond teinté, piste */ --color-stone: #625a54; /* Action (surfaces). Le TEXTE accent utilise --yardis-accent-text. */ --color-saffron: #c84530; --color-saffron-h: #c2432f; --color-saffron-p: #b83f2c; /* Sémantique — error / noche-error / warning gardent les valeurs du moteur */ --color-success: #366044; --color-noche-success: #366044; /* Ombres chaudes du proposal : segment choisi / toast, cartes / feuille, barre */ --shadow-noche-sm: 0 2px 4px #34200c09; --shadow-noche-md: 0 7px 22px #38200f1c; --shadow-noche-lg: 0 -8px 34px #3021140c; /* Rayons : actions / cartes et photos / champs */ --radius-btn: 16px; --radius-card: 18px; --radius-input: 12px; /* Typo : plus de mono — prix et codes en Manrope à chiffres tabulaires */ --font-mono: var(--font-body); /* Propres à ce thème (pas des jetons du moteur) */ --yardis-accent-text: #a83a28; /* tomate foncée : texte accent (prix, liens) */ --yardis-field-border: #958a80; /* bordure de champ au repos, ≥ 3:1 (WCAG 1.4.11) */ --yardis-veil: rgba(41, 35, 32, .55); /* voiles : feuille d'options, tiroir de nav */ /* Stripe Elements (iframe) — lus en JS par islands/src/lib/stripeTheme.ts */ --stripe-text: #292320; --stripe-placeholder: #625a54; --stripe-invalid: #B83B3B; --stripe-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ── 2. Fondations ──────────────────────────────────────────────────────── */ html[data-surface="order"] .font-mono { font-variant-numeric: tabular-nums; letter-spacing: 0; } /* Anneau de focus du proposal : remplace l'anneau or de site-yardis.css sur cette seule surface (spécificité supérieure). */ html[data-surface="order"] :focus-visible { outline: 3px solid #8c2f20; outline-offset: 3px; border-radius: 4px; } html[data-surface="order"] .emoji { display: none; } /* ── 3. Texte accent : le texte n'est pas une surface ───────────────────── */ /* text-saffron sert aussi de couleur de TEXTE (prix, liens, pastilles, nudge d'envoi gratuit), parfois sur un fond teinté tomate à 10 % où la tomate des boutons plafonne à 3,97:1. Tomate foncée pour le texte (5,2:1), tomate pour les surfaces — même partage que 480 (--page-accent-text). */ html[data-surface="order"] .text-saffron { color: var(--yardis-accent-text); } /* ── 4. Champs : bordure taupe au repos, puis les états — l'ORDRE fait la priorité (la feuille est hors layer, elle écraserait sinon tous les utilitaires d'état basculés par Svelte et Alpine). ───────────────── */ /* 4a. Repos. :where() garde la spécificité au plus bas (0,1,1). */ html[data-surface="order"] :where( input, textarea, select, [role="listbox"], label:has(input[type="radio"]), label:has(input[type="checkbox"]), [data-testid="when-asap"], [data-testid="when-schedule"], [data-testid="time-grid"] > button ) { border-color: var(--yardis-field-border); } /* 4a bis. Le champ carte est un
hôte : Stripe monte son iframe dedans, aucun sélecteur d'élément ne l'atteint, et son filet décoratif (1,28:1 sur blanc) reste pourtant le SEUL repère de ce champ — constaté à la passe visuelle T9 sur yardis-393-card.png. Ancré sur l'écran stable et sur l'iframe qu'il héberge, jamais sur un utilitaire ; le combinateur enfant écarte l'enveloppe interne de Stripe, elle aussi porteuse de l'iframe. */ html[data-surface="order"] [data-testid="stripe-screen"] > div:has(iframe) { border-color: var(--yardis-field-border); } /* 4b. Survol des boutons d'option. */ html[data-surface="order"] :where([data-testid="time-grid"] > button):hover { border-color: var(--color-saffron); } /* 4c. États portés par le vocabulaire du moteur — ré-affirmés PAR LEUR NOM (seul endroit où cette feuille s'ancre sur des utilitaires : ce sont les noms d'état du tunnel, pas des choix de mise en page). */ html[data-surface="order"] .border-saffron { border-color: var(--color-saffron); } html[data-surface="order"] .border-success { border-color: var(--color-success); } html[data-surface="order"] .border-error { border-color: var(--color-error); } html[data-surface="order"] .border-warning { border-color: var(--color-warning); } html[data-surface="order"] label:has(input:checked) { border-color: var(--color-saffron); } /* 4d. Focus : l'anneau (focus:ring-*, un box-shadow que la bordure ne touche pas) porte l'état ; la bordure d'un champ au REPOS passe tomate, celle d'un champ validé ou en erreur garde sa couleur d'état. */ html[data-surface="order"] :where(input, textarea, select):focus:not(.border-success):not(.border-error) { border-color: var(--color-saffron); } /* 4e. Désactivé : rien à faire, disabled:opacity-60 du moteur s'applique. */ /* ── 5. Pièges d'inversion (couleurs qui suivaient un jeton sans le vouloir) ─ */ /* Bouton WhatsApp de la confirmation : fond #25D366 en dur, texte en --color-ink devenu papier → 1,9:1. Encre sombre forcée ; le test e2e de contraste (test_e2e_transaction_audit.py) le vérifie. */ html[data-surface="order"] .confirmation-support { color: #14100C; } /* Menu déroulant Google Places (styles inline d'order.html en jetons) : texte des items en encre, surbrillance sur la piste, police du site. */ html[data-surface="order"] .pac-container { font-family: var(--font-body); } html[data-surface="order"] .pac-item, html[data-surface="order"] .pac-item-query { color: var(--color-bone); } html[data-surface="order"] .pac-item:hover { background-color: var(--color-slate-2); } html[data-surface="order"] .pac-matched { color: var(--yardis-accent-text); } /* Voiles : bg-ink/60 et bg-ink/70 deviendraient une crème translucide. */ html[data-surface="order"] .sheet-backdrop, html[data-surface="order"] .nav-veil { background-color: var(--yardis-veil); } /* ── 6. Contexte ────────────────────────────────────────────────────────── */ /* Barre de progression : les segments inactifs (bg-slate → blanc) seraient invisibles sur papier. */ html[data-surface="order"] .tunnel-progress > .bg-slate { background-color: var(--color-rule-2); } /* Envío / Recoger : contrôle segmenté du proposal — piste neutre, segment choisi blanc avec l'ombre « selected-mode ». Alpine bascule bg-saffron (choisi) / bg-slate (repos) : on s'en sert comme marqueur d'état. */ html[data-surface="order"] .mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; background: var(--color-slate-2); border-radius: 15px; } html[data-surface="order"] .mode-option { min-height: 44px; background: transparent; color: var(--color-bone); border-radius: 12px; box-shadow: none; } html[data-surface="order"] .mode-option.bg-saffron { background: #ffffff; color: var(--color-bone); box-shadow: var(--shadow-noche-sm); } /* ── 7. Menu ────────────────────────────────────────────────────────────── */ /* Recherche : champ rempli discret, 46 px, texte 16 px. */ html[data-surface="order"] #menu-search { background: var(--color-slate-2); border-color: transparent; min-height: 46px; font-size: 16px; } html[data-surface="order"] #menu-search:focus { background: #ffffff; border-color: var(--color-saffron); } /* Catégories : onglets texte, filet bas, soulignement tomate. Les 44 px (min-h-11) et le défilement (snap-x) restent ceux du moteur. */ html[data-surface="order"] .menu-tabs { gap: 23px; padding-bottom: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--color-rule-2); } html[data-surface="order"] .menu-tab { background: transparent; border-radius: 0; padding: 10px 0; margin-bottom: -1px; color: var(--color-bone-muted); border-bottom: 2px solid transparent; } html[data-surface="order"] .menu-tab:hover { background: transparent; color: var(--color-bone); } html[data-surface="order"] .menu-tab.is-active { color: var(--color-bone); border-bottom-color: var(--color-saffron); } /* Produits : règle des lignes ouvertes — pas de carte, un filet entre les lignes, vignette 88 px à coins 14 px. La tuile émoji sans photo disparaît : « une photo manquante donne une ligne soignée sans image ». */ html[data-surface="order"] .menu-grid { gap: 0; } html[data-surface="order"] .menu-card { background: transparent; box-shadow: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--color-rule-2); } html[data-surface="order"] .menu-grid > .menu-card:last-child { border-bottom: 0; } html[data-surface="order"] .menu-card-media { border-radius: 14px; } html[data-surface="order"] [data-testid="menu-placeholder"] { display: none; } @media (min-width: 768px) { html[data-surface="order"] .menu-grid { column-gap: 28px; } /* Sur deux colonnes, « dernière ligne sans filet » veut dire dernière RANGÉE : quand la catégorie compte un nombre pair de produits, l'avant-dernière carte partage la rangée de la dernière et son filet pendait seul sous la colonne de gauche (constaté sur yardis-1280-menu.png). Un nombre impair laisse au contraire une carte seule en dessous : son filet doit rester. */ html[data-surface="order"] .menu-grid > .menu-card:nth-last-child(2):nth-child(odd) { border-bottom: 0; } } /* ── 8. Barre panier et feuille d'options ───────────────────────────────── */ /* La barre est bg-ink (→ papier) avec du texte blanc : elle disparaîtrait. Action principale du proposal : tomate, 54 px, blanc. */ html[data-surface="order"] .cart-bar-cta { background: var(--color-saffron); color: #ffffff; min-height: 54px; box-shadow: var(--shadow-noche-md); } html[data-surface="order"] .cart-bar-cta:hover { background: var(--color-saffron-h); } html[data-surface="order"] .cart-bar-error { background: #ffffff; color: var(--color-bone); border-color: var(--color-error); } html[data-surface="order"] .cart-bar-error button { border-color: var(--yardis-field-border); color: var(--color-bone); } /* Pied de la feuille : ombre « sheet » à la place du halo blanc du sombre. */ html[data-surface="order"] .sheet-footer { box-shadow: var(--shadow-noche-lg); } /* ── 9. Vague 2 : feuilles (zone et fiche produit) ─────────────────────── */ html[data-surface="order"] .context-sheet-panel, html[data-surface="order"] [role="dialog"] > .bg-slate { border-top-left-radius: 26px; border-top-right-radius: 26px; box-shadow: var(--shadow-noche-lg); transition: transform 250ms cubic-bezier(.16, 1, .3, 1), opacity 250ms ease; } html[data-surface="order"] .context-sheet-panel:focus { outline: none; } html[data-surface="order"] .context-sheet-body label:has(input[type="radio"]) { min-height: 51px; } @media (min-width: 768px) { html[data-surface="order"] .context-sheet-panel, html[data-surface="order"] [role="dialog"] > .bg-slate { border-radius: 18px; max-width: 640px; } } @media (prefers-reduced-motion: reduce) { html[data-surface="order"] .context-sheet-panel, html[data-surface="order"] [role="dialog"] > .bg-slate, html[data-surface="order"] .tunnel-progress > div { transition: none; } } /* Suivi (/o/, /r/) et 404 rendus SOUS ce scope : les boutons du gabarit partagé portent des couleurs de nuit en repli (invisibles sur papier : 1,74:1 pour « Cancelar mi reservación », bordure blanche sur blanc pour « Volver al menú »). On les rebase ici, en hex à six chiffres — les tests de contraste ne lisent que cette forme. Le repli du gabarit reste la valeur historique : 480 ne bouge pas d'un bit. */ html[data-surface="order"] { --follow-up-danger-bg: #f5e6e0; /* tomate à 10 % sur papier */ --follow-up-danger-text: #a83a28; /* = --yardis-accent-text */ --follow-up-danger-border: #c84530; /* = --color-saffron */ --follow-up-ghost-bg: #ffffff; --follow-up-ghost-border: #958a80; /* = --yardis-field-border */ --follow-up-ghost-text: #292320; /* = --color-bone (encre) */ /* Les notes en 12 px (« Esta página se actualiza… », « Si ya no asistirás… ») tombaient à 3,3:1 avec l'opacité de nuit à 70 % : sur papier, le texte secondaire se lit à pleine opacité (paire déjà gardée). */ --follow-up-note-opacity: 1; } /* /reservar (formulaire, erreurs, confirmation) rendu SOUS ce scope : le gabarit partagé est un hybride de nuit — page crème (`--color-bone`), carte graphite, textes en dur — que le remappage des jetons inverserait en sombre. Ses couleurs passent par des variables à repli historique ; on les pose ici en papier, en hex à six chiffres pour les tests de contraste. Le bouton « Volver al inicio » reprend --follow-up-ghost-*. */ html[data-surface="order"] { --reserva-page-bg: #faf8f4; /* = --color-ink (papier) */ --reserva-title: #292320; /* = --color-bone (encre) */ --reserva-text: #292320; --reserva-label: #292320; --reserva-muted: #625a54; /* = --color-bone-muted */ --reserva-accent-text: #a83a28; /* = --yardis-accent-text */ --reserva-card-bg: #ffffff; --reserva-card-border: #e9e2d9; /* = --color-rule */ --reserva-card-rule: #e9e2d9; --reserva-field-border: #958a80; /* = --yardis-field-border */ } /* Pastilles de la carte (« − », préfixe +52) : `bg-slate` devient blanc sur une carte blanche — la piste neutre les détache. */ html[data-surface="order"] .resa-chip { background-color: var(--color-slate-2); } /* ── 10. Vague 2 : titre, ligne de contexte, dock ───────────────────────── */ html[data-surface="order"] .order-headline { font-size: 29px; font-weight: 750; letter-spacing: -1.05px; line-height: 1.15; } html[data-surface="order"] .brand-accent { color: var(--yardis-accent-text); } html[data-surface="order"] #order-context { color: var(--color-bone-muted); } /* Le contexte confirmé est UN bouton : l'encre secondaire porte le libellé, la tomate foncée porte le chevron (la paire que « Cambiar » portait avant lui). La troncature du libellé reste à l'utilitaire de l'îlot. */ html[data-surface="order"] #order-context .context-label { color: var(--color-bone-muted); } html[data-surface="order"] #order-context .context-chevron { color: var(--yardis-accent-text); } /* Barre haute : sans entête de site sur cette route, le tunnel commence sous la zone sûre ; le logo tient dans 36 px, la barre de progression se resserre — la maquette met le titre à un pouce du haut de l'écran. */ html[data-surface="order"] #order-tunnel { padding-top: max(10px, env(safe-area-inset-top)); } html[data-surface="order"] #order-topbar { min-height: 44px; margin-bottom: 8px; } html[data-surface="order"] .order-brand img { display: block; height: 36px; width: auto; } html[data-surface="order"] .tunnel-progress { margin-bottom: 16px; } html[data-surface="order"] #context-dock, html[data-surface="order"] #cart-bar-wrapper { background: var(--color-ink); border-top: 1px solid var(--color-rule-2); } html[data-surface="order"] #context-dock { padding-bottom: max(24px, env(safe-area-inset-bottom)); } /* ── 11. Vague 2 : menu — visuel de catégorie, lignes ───────────────────── */ html[data-surface="order"] .menu-feature { border-radius: 18px; max-height: 212px; } html[data-surface="order"] .menu-feature img { height: 212px; } html[data-surface="order"] .menu-feature-badge { background: #fff9ebf5; color: var(--color-bone); border-radius: 7px; } html[data-surface="order"] .menu-card-media { width: 94px; height: 90px; border-radius: 14px; } html[data-surface="order"] .menu-card-name { white-space: normal; } html[data-surface="order"] .menu-card-desde { font-size: 12px; color: var(--color-bone-muted); } html[data-surface="order"] .menu-card-qty { background: #fff9eb; color: var(--yardis-accent-text); } html[data-surface="order"] .menu-skeleton-row { background: var(--color-slate-2); } html[data-surface="order"] [data-testid="zone-preview"] { background: #e8f0ea; border-color: #c7d9cc; } /* ── 12. Vague 2 : fiche produit et checkout (accroches des îlots) ──────── */ html[data-surface="order"] .sheet-qty { border: 1px solid #dbd2c8; border-radius: 13px; } html[data-surface="order"] .sheet-qty button { min-width: 44px; min-height: 48px; } html[data-surface="order"] [data-testid="checkout-headline"] { font-size: 27px; font-weight: 750; letter-spacing: -.8px; } html[data-surface="order"] .co-section { border-bottom: 1px solid var(--color-rule-2); padding: 14px 0; } html[data-surface="order"] .co-section-edit, html[data-surface="order"] .co-section-done, html[data-surface="order"] .line-remove { color: var(--yardis-accent-text); } html[data-surface="order"] [data-testid="section-payment"] { background: #ffffff; border: 1px solid #d7c9b8; border-radius: 16px; padding: 14px; } /* Ces deux règles vivent hors layer : elles gagnent sur les utilitaires responsives de l'îlot. Le palier de 360 px est donc réaffirmé ici, sinon la vignette resterait à 72 px sur un écran de 320 — mesuré au navigateur, le « − » du stepper y tombait à 18,5 px de large (44 exigés), et 41 px encore à 375. */ html[data-surface="order"] .line-media { width: 56px; height: 60px; border-radius: 13px; object-fit: cover; } html[data-surface="order"] .line-media-empty { width: 56px; height: 60px; border-radius: 13px; background: var(--color-rule-2); } @media (min-width: 360px) { html[data-surface="order"] .line-media, html[data-surface="order"] .line-media-empty { width: 72px; height: 75px; } } html[data-surface="order"] .free-ship { color: var(--color-success); } html[data-surface="order"] [data-testid="total"] { font-size: 20px; font-weight: 750; }