/* Google Fonts: Oi (display titles) + Teko (categories/prices) + Rubik (text) */ @import url('https://fonts.googleapis.com/css2?family=Oi&family=Rubik:wght@400;500;700;800;900&family=Teko:wght@400;500;600;700&display=swap'); /* ============================================================================ TYPOGRAPHY SYSTEM — single source of truth for every text role on the site ============================================================================ HOW TO USE ---------- All text styles are driven by the CSS variables below (PART 1). Change a variable here and the change applies everywhere that role is used. Example: make all category titles bigger and white --t-category-title-size: 24px; --t-category-title-color: #ffffff; PART 2 defines utility classes (.t-hero-title, ...) for any NEW elements. PART 3 maps the EXISTING site elements to the tokens (selector lists per role). The token values below reproduce the current design exactly, so loading this file changes nothing visually — it only centralizes control. Variants: a few elements of a role intentionally differ from the canonical token (kept to preserve the current design). They are pinned in PART 4 with scoped overrides — delete a pin to make that element follow the main token. ============================================================================ */ /* =========================== PART 1 — TOKENS =========================== */ :root { /* Shared font stacks — the three brand fonts: Oi → big display titles Teko → category headings, prices, label-style titles Rubik → all reading text, nav, forms, buttons */ --t-font-display: 'Oi', var(--restaurant-font-display, Georgia, "Times New Roman", serif); --t-font-body: 'Rubik', var(--restaurant-font-body, Inter, Arial, sans-serif); --t-font-nav: 'Rubik', var(--restaurant-font-nav, Inter, Arial, sans-serif); --t-font-accent: 'Teko', 'Rubik', Inter, Arial, sans-serif; /* 1. hero-title — big titles on hero/strong visual sections (Commandez en ligne, checkout heading) */ --t-hero-title-family: var(--t-font-display); --t-hero-title-size: clamp(40px, 7vw, 78px); /* desktop (fluid) */ --t-hero-title-size-mobile: clamp(40px, 7vw, 78px); /* phones */ --t-hero-title-weight: 400; /* Oi only ships weight 400 — 700 forced ugly faux-bold */ --t-hero-title-line: .95; --t-hero-title-spacing: 0; --t-hero-title-transform: none; --t-hero-title-color: var(--pdi-cream, #fff2d8); --t-hero-title-shadow: 0 4px 28px rgba(0, 0, 0, .58); /* 2. hero-subtitle — paragraph under the hero titles */ --t-hero-subtitle-family: var(--t-font-body); --t-hero-subtitle-size: 17px; --t-hero-subtitle-size-mobile: 17px; --t-hero-subtitle-weight: 400; --t-hero-subtitle-line: 1.7; --t-hero-subtitle-spacing: 0; --t-hero-subtitle-transform: none; --t-hero-subtitle-color: rgba(255, 242, 216, .76); --t-hero-subtitle-shadow: 0 2px 18px rgba(0, 0, 0, .54); /* 3. section-title — big titles of important sections (Réservez votre table, Notre maison, menu statement) */ --t-section-title-family: var(--t-font-display); --t-section-title-size: clamp(30px, 3.2vw, 56px); --t-section-title-size-mobile: clamp(30px, 3.2vw, 56px); --t-section-title-weight: 400; --t-section-title-line: .88; --t-section-title-spacing: 0; --t-section-title-transform: none; --t-section-title-color: #fff8ea; --t-section-title-shadow: none; /* 4. section-subtitle — kickers / eyebrows above section titles (MENU & COMMANDER, RÉSERVATION, MENU MAISON, ...) */ --t-section-subtitle-family: var(--t-font-accent); --t-section-subtitle-size: clamp(18px, 1.5vw, 27px); --t-section-subtitle-size-mobile: clamp(18px, 1.5vw, 27px); --t-section-subtitle-weight: 800; --t-section-subtitle-spacing: .18em; --t-section-subtitle-transform: uppercase; --t-section-subtitle-color: rgba(255, 242, 216, .76); /* 5. category-title — menu category headings (BURGERS, SIDES, ...) */ --t-category-title-family: var(--t-font-accent); --t-category-title-size: clamp(15px, 1.3vw, 20px); --t-category-title-size-mobile: clamp(15px, 1.3vw, 20px); --t-category-title-weight: 900; --t-category-title-spacing: .16em; --t-category-title-transform: uppercase; --t-category-title-color: var(--pdi-gold, #dba94f); /* 6. product-name — dish names in the order menu */ --t-product-name-family: var(--t-font-body); --t-product-name-size: 15px; --t-product-name-size-mobile: 15px; --t-product-name-weight: 700; --t-product-name-line: 1.2; --t-product-name-spacing: 0; --t-product-name-transform: none; --t-product-name-color: var(--pdi-paper, #fff5e6); /* 7. product-description — ingredients / descriptions */ --t-product-description-family: var(--t-font-body); --t-product-description-size: 12px; --t-product-description-size-mobile: 12px; --t-product-description-weight: 400; --t-product-description-line: 1.32; --t-product-description-spacing: 0; --t-product-description-transform: none; --t-product-description-color: rgba(233, 216, 187, .72); /* 8. product-price */ --t-product-price-family: var(--t-font-accent); --t-product-price-size: 14px; --t-product-price-size-mobile: 13px; --t-product-price-weight: 800; --t-product-price-spacing: 0; --t-product-price-transform: none; --t-product-price-color: var(--pdi-cream, #fff2d8); /* 9. button-text — CTA buttons (Ajouter, Passer à l'étape suivante, Panier) */ --t-button-text-family: var(--t-font-body); --t-button-text-size: 14px; --t-button-text-size-mobile: 14px; --t-button-text-weight: 800; --t-button-text-spacing: 0; --t-button-text-transform: none; --t-button-text-color: var(--pdi-ink, #1a1110); /* on gold buttons */ /* 10. nav-text — header navigation links + brand */ --t-nav-text-family: var(--t-font-nav); --t-nav-text-size: clamp(14px, 1vw, 18px); --t-nav-text-size-mobile: clamp(14px, 1vw, 18px); --t-nav-text-weight: 500; --t-nav-text-spacing: .1em; --t-nav-text-transform: uppercase; --t-nav-text-color: var(--pdi-cream, #fff2d8); /* 11. badge-text — small decorative labels (tags: poulet, épicé, promo...) */ --t-badge-text-family: var(--t-font-body); --t-badge-text-size: clamp(14px, 1.05vw, 17px); --t-badge-text-size-mobile: clamp(14px, 1.05vw, 17px); --t-badge-text-weight: 400; --t-badge-text-line: 1; --t-badge-text-spacing: 0; --t-badge-text-transform: none; --t-badge-text-color: rgba(255, 242, 216, .72); /* 12. cart-title — headings inside the cart panel (PANIER, TOTAL ESTIMÉ) */ --t-cart-title-family: var(--t-font-accent); --t-cart-title-size: 12px; --t-cart-title-size-mobile: 12px; --t-cart-title-weight: 800; --t-cart-title-spacing: .14em; --t-cart-title-transform: uppercase; --t-cart-title-color: var(--pdi-gold, #dba94f); /* 13. cart-item-text — product lines inside the cart */ --t-cart-item-family: var(--t-font-body); --t-cart-item-size: 14px; --t-cart-item-size-mobile: 14px; --t-cart-item-weight: 700; --t-cart-item-color: var(--pdi-paper, #fff5e6); --t-cart-item-muted-size: 13px; /* qty × price line */ --t-cart-item-muted-color: rgba(255, 242, 216, .68); /* 14. form-label — labels of all forms (NOM COMPLET, TÉLÉPHONE, ...) */ --t-form-label-family: var(--t-font-body); --t-form-label-size: clamp(14px, 1vw, 18px); --t-form-label-size-mobile: clamp(14px, 1vw, 18px); --t-form-label-weight: 700; --t-form-label-spacing: .32em; --t-form-label-transform: uppercase; --t-form-label-color: rgba(42, 33, 27, .74); /* on the light panel */ /* 15. form-placeholder — input placeholders */ --t-form-placeholder-family: var(--t-font-body); --t-form-placeholder-size: 14px; --t-form-placeholder-color: rgba(42, 33, 27, .42); /* 16. footer-title — footer column headings (NAVIGATION, CONTACT, ...) */ --t-footer-title-family: var(--t-font-accent); --t-footer-title-size: clamp(18px, 1.5vw, 27px); --t-footer-title-size-mobile: clamp(18px, 1.5vw, 27px); --t-footer-title-weight: 500; --t-footer-title-line: 1; --t-footer-title-spacing: .02em; --t-footer-title-transform: uppercase; --t-footer-title-color: rgba(244, 221, 179, .62); /* 17. footer-text — links and values in the footer columns */ --t-footer-text-family: var(--t-font-nav); --t-footer-text-size: clamp(18px, 1.22vw, 24px); --t-footer-text-size-mobile: clamp(15px, 5vw, 19px); --t-footer-text-weight: 500; --t-footer-text-line: 1.25; --t-footer-text-spacing: .01em; --t-footer-text-transform: uppercase; --t-footer-text-color: #fff3d2; /* 18. legal-text — legal bar links, copyright, small secondary texts */ --t-legal-text-family: var(--t-font-nav); --t-legal-text-size: clamp(13px, .95vw, 16px); --t-legal-text-size-mobile: clamp(13px, .95vw, 16px); --t-legal-text-weight: 700; --t-legal-text-spacing: .08em; --t-legal-text-transform: none; --t-legal-text-color: rgba(255, 243, 210, .72); --t-legal-text-muted-color: rgba(244, 221, 179, .46); /* copyright */ } /* Mobile sizes — every role swaps to its mobile size below 768px */ @media (max-width: 767px) { :root { --t-hero-title-size: var(--t-hero-title-size-mobile); --t-hero-subtitle-size: var(--t-hero-subtitle-size-mobile); --t-section-title-size: var(--t-section-title-size-mobile); --t-section-subtitle-size: var(--t-section-subtitle-size-mobile); --t-category-title-size: var(--t-category-title-size-mobile); --t-product-name-size: var(--t-product-name-size-mobile); --t-product-description-size: var(--t-product-description-size-mobile); --t-product-price-size: var(--t-product-price-size-mobile); --t-button-text-size: var(--t-button-text-size-mobile); --t-nav-text-size: var(--t-nav-text-size-mobile); --t-badge-text-size: var(--t-badge-text-size-mobile); --t-cart-title-size: var(--t-cart-title-size-mobile); --t-cart-item-size: var(--t-cart-item-size-mobile); --t-form-label-size: var(--t-form-label-size-mobile); --t-footer-title-size: var(--t-footer-title-size-mobile); --t-footer-text-size: var(--t-footer-text-size-mobile); --t-legal-text-size: var(--t-legal-text-size-mobile); } } /* ==================== PART 2 — UTILITY CLASSES (new elements) ==================== */ .t-hero-title { font-family: var(--t-hero-title-family); font-size: var(--t-hero-title-size); font-weight: var(--t-hero-title-weight); line-height: var(--t-hero-title-line); letter-spacing: var(--t-hero-title-spacing); text-transform: var(--t-hero-title-transform); color: var(--t-hero-title-color); text-shadow: var(--t-hero-title-shadow); } .t-hero-subtitle { font-family: var(--t-hero-subtitle-family); font-size: var(--t-hero-subtitle-size); font-weight: var(--t-hero-subtitle-weight); line-height: var(--t-hero-subtitle-line); letter-spacing: var(--t-hero-subtitle-spacing); text-transform: var(--t-hero-subtitle-transform); color: var(--t-hero-subtitle-color); text-shadow: var(--t-hero-subtitle-shadow); } .t-section-title { font-family: var(--t-section-title-family); font-size: var(--t-section-title-size); font-weight: var(--t-section-title-weight); line-height: var(--t-section-title-line); letter-spacing: var(--t-section-title-spacing); text-transform: var(--t-section-title-transform); color: var(--t-section-title-color); text-shadow: var(--t-section-title-shadow); } .t-section-subtitle { font-family: var(--t-section-subtitle-family); font-size: var(--t-section-subtitle-size); font-weight: var(--t-section-subtitle-weight); letter-spacing: var(--t-section-subtitle-spacing); text-transform: var(--t-section-subtitle-transform); color: var(--t-section-subtitle-color); } .t-category-title { font-family: var(--t-category-title-family); font-size: var(--t-category-title-size); font-weight: var(--t-category-title-weight); letter-spacing: var(--t-category-title-spacing); text-transform: var(--t-category-title-transform); color: var(--t-category-title-color); } .t-product-name { font-family: var(--t-product-name-family); font-size: var(--t-product-name-size); font-weight: var(--t-product-name-weight); line-height: var(--t-product-name-line); letter-spacing: var(--t-product-name-spacing); text-transform: var(--t-product-name-transform); color: var(--t-product-name-color); } .t-product-description { font-family: var(--t-product-description-family); font-size: var(--t-product-description-size); font-weight: var(--t-product-description-weight); line-height: var(--t-product-description-line); letter-spacing: var(--t-product-description-spacing); text-transform: var(--t-product-description-transform); color: var(--t-product-description-color); } .t-product-price { font-family: var(--t-product-price-family); font-size: var(--t-product-price-size); font-weight: var(--t-product-price-weight); letter-spacing: var(--t-product-price-spacing); text-transform: var(--t-product-price-transform); color: var(--t-product-price-color); } .t-button-text { font-family: var(--t-button-text-family); font-size: var(--t-button-text-size); font-weight: var(--t-button-text-weight); letter-spacing: var(--t-button-text-spacing); text-transform: var(--t-button-text-transform); color: var(--t-button-text-color); } .t-nav-text { font-family: var(--t-nav-text-family); font-size: var(--t-nav-text-size); font-weight: var(--t-nav-text-weight); letter-spacing: var(--t-nav-text-spacing); text-transform: var(--t-nav-text-transform); color: var(--t-nav-text-color); } .t-badge-text { font-family: var(--t-badge-text-family); font-size: var(--t-badge-text-size); font-weight: var(--t-badge-text-weight); line-height: var(--t-badge-text-line); letter-spacing: var(--t-badge-text-spacing); text-transform: var(--t-badge-text-transform); color: var(--t-badge-text-color); } .t-cart-title { font-family: var(--t-cart-title-family); font-size: var(--t-cart-title-size); font-weight: var(--t-cart-title-weight); letter-spacing: var(--t-cart-title-spacing); text-transform: var(--t-cart-title-transform); color: var(--t-cart-title-color); } .t-cart-item-text { font-family: var(--t-cart-item-family); font-size: var(--t-cart-item-size); font-weight: var(--t-cart-item-weight); color: var(--t-cart-item-color); } .t-form-label { font-family: var(--t-form-label-family); font-size: var(--t-form-label-size); font-weight: var(--t-form-label-weight); letter-spacing: var(--t-form-label-spacing); text-transform: var(--t-form-label-transform); color: var(--t-form-label-color); } .t-footer-title { font-family: var(--t-footer-title-family); font-size: var(--t-footer-title-size); font-weight: var(--t-footer-title-weight); line-height: var(--t-footer-title-line); letter-spacing: var(--t-footer-title-spacing); text-transform: var(--t-footer-title-transform); color: var(--t-footer-title-color); } .t-footer-text { font-family: var(--t-footer-text-family); font-size: var(--t-footer-text-size); font-weight: var(--t-footer-text-weight); line-height: var(--t-footer-text-line); letter-spacing: var(--t-footer-text-spacing); text-transform: var(--t-footer-text-transform); color: var(--t-footer-text-color); } .t-legal-text { font-family: var(--t-legal-text-family); font-size: var(--t-legal-text-size); font-weight: var(--t-legal-text-weight); letter-spacing: var(--t-legal-text-spacing); text-transform: var(--t-legal-text-transform); color: var(--t-legal-text-color); } /* ============== PART 3 — MAPPING: existing elements → tokens ============== */ /* 1. hero-title */ .pdi-order-hero h1, .pdi-order-checkout h2 { font-family: var(--t-hero-title-family); font-size: var(--t-hero-title-size); font-weight: var(--t-hero-title-weight); line-height: var(--t-hero-title-line); letter-spacing: var(--t-hero-title-spacing); text-transform: var(--t-hero-title-transform); color: var(--t-hero-title-color); text-shadow: var(--t-hero-title-shadow); } /* 2. hero-subtitle (the :not() keeps the kicker out — it is section-subtitle) */ .pdi-order-hero p:not(.pdi-order-kicker), .pdi-order-checkout-copy p:not(.pdi-order-kicker) { font-family: var(--t-hero-subtitle-family); font-size: var(--t-hero-subtitle-size); font-weight: var(--t-hero-subtitle-weight); line-height: var(--t-hero-subtitle-line); letter-spacing: var(--t-hero-subtitle-spacing); text-transform: var(--t-hero-subtitle-transform); color: var(--t-hero-subtitle-color); text-shadow: var(--t-hero-subtitle-shadow); } /* Order checkout is a compact form panel, not a hero. Keep it readable over video. */ .pdi-order-page .pdi-order-checkout h2 { max-width: 300px; font-size: clamp(26px, 2.25vw, 36px); line-height: 1.04; letter-spacing: 0; overflow-wrap: normal; text-wrap: balance; } .pdi-order-page .pdi-order-checkout-copy p:not(.pdi-order-kicker) { max-width: 300px; font-size: 14px; line-height: 1.55; } @media (max-width: 980px) { .pdi-order-page .pdi-order-checkout h2 { max-width: 100%; font-size: clamp(25px, 7vw, 32px); line-height: 1.06; } .pdi-order-page .pdi-order-checkout-copy p:not(.pdi-order-kicker) { max-width: 100%; } } @media (max-width: 720px) { .pdi-order-page .pdi-order-checkout h2 { font-size: clamp(24px, 8vw, 30px); } } /* 3. section-title */ .pdi-reservation-title, .pdi-resa-title, .pdi-menu-paragraph, .pdi-menu-mobile-heading, .pdi-menu-mobile-subheading, .pdi-menu-desktop-heading, .pdi-menu-desktop-subheading, .pdi-cookie-title, .pdi-legal-title, #specialites .text-2xl { font-family: var(--t-section-title-family); font-size: var(--t-section-title-size); font-weight: var(--t-section-title-weight); line-height: var(--t-section-title-line); letter-spacing: var(--t-section-title-spacing); text-transform: var(--t-section-title-transform); color: var(--t-section-title-color); text-shadow: var(--t-section-title-shadow); } /* 3b. ABOUT section ("Notre maison" panels + floating card): statement paragraphs follow the body font token (Rubik); their sizes/colors/layout are untouched. */ .pdi-about-text-panel .text-2xl, .pdi-resa-text { font-family: var(--t-font-body); } /* 4b. ABOUT section eyebrows ("NOTRE MAISON", "Une passion, le burger"): follow the accent font token (Teko); scale/colors untouched. */ .pdi-about-text-panel .text-xs, [data-config-text$=".title"].text-xs, [data-config-text$=".secondaryTitle"].text-xs { font-family: var(--t-section-subtitle-family); } /* 4. section-subtitle (kickers/eyebrows). font-size !important matches the existing sizing rule it replaces (pdi-rtl), which also used !important. */ .pdi-order-kicker, .pdi-reservation-kicker, .pdi-menu-mobile-eyebrow, .pdi-menu-desktop-title, [data-config-text$=".kicker"], [data-config-text$=".mobileEyebrow"] { font-family: var(--t-section-subtitle-family); font-size: var(--t-section-subtitle-size) !important; font-weight: var(--t-section-subtitle-weight); letter-spacing: var(--t-section-subtitle-spacing); text-transform: var(--t-section-subtitle-transform); color: var(--t-section-subtitle-color); } /* 5. category-title */ .pdi-order-cat-title { font-family: var(--t-category-title-family); font-size: var(--t-category-title-size); font-weight: var(--t-category-title-weight); letter-spacing: var(--t-category-title-spacing); text-transform: var(--t-category-title-transform); color: var(--t-category-title-color); } /* 6. product-name */ .pdi-order-row-name { font-family: var(--t-product-name-family); font-size: var(--t-product-name-size); font-weight: var(--t-product-name-weight); line-height: var(--t-product-name-line); letter-spacing: var(--t-product-name-spacing); text-transform: var(--t-product-name-transform); color: var(--t-product-name-color); } /* 7. product-description */ .pdi-order-row-desc { font-family: var(--t-product-description-family); font-size: var(--t-product-description-size); font-weight: var(--t-product-description-weight); line-height: var(--t-product-description-line); letter-spacing: var(--t-product-description-spacing); text-transform: var(--t-product-description-transform); color: var(--t-product-description-color); } /* 8. product-price */ .pdi-order-row-price, .pdi-order-price { font-family: var(--t-product-price-family); font-size: var(--t-product-price-size); font-weight: var(--t-product-price-weight); letter-spacing: var(--t-product-price-spacing); text-transform: var(--t-product-price-transform); color: var(--t-product-price-color); } /* 9. button-text (color stays per-button: gold buttons use ink, ghosts cream) */ .pdi-order-primary, .pdi-order-secondary, .pdi-order-mobile-cart, .pdi-order-qty button { font-family: var(--t-button-text-family); font-size: var(--t-button-text-size); font-weight: var(--t-button-text-weight); letter-spacing: var(--t-button-text-spacing); text-transform: var(--t-button-text-transform); } /* 10. nav-text */ .navbar a, .navbar .text-xs { font-family: var(--t-nav-text-family); color: var(--t-nav-text-color); } .nav_links .text-xs { font-size: var(--t-nav-text-size); font-weight: var(--t-nav-text-weight); letter-spacing: var(--t-nav-text-spacing); text-transform: var(--t-nav-text-transform); } /* 10b. MOBILE nav overlay (open menu): the big nav links use the DISPLAY brand font (Oi) — same as the hero/section titles — not the body/nav font, so they read as bold brand headings instead of generic text. The brand wordmark also uses display. */ .nav_mobile[data-nav-menu-open] .nav_links .text-xs.is-1::after, .nav_mobile.w--open .nav_links .text-xs.is-1::after { font-family: var(--t-font-display) !important; } .navbar:has(.menu-button.w--open) .navbar_logo-link .text-xs { font-family: var(--t-font-display) !important; } /* 11. badge-text */ .pdi-order-tags span { font-family: var(--t-badge-text-family); font-size: var(--t-badge-text-size); font-weight: var(--t-badge-text-weight); line-height: var(--t-badge-text-line); letter-spacing: var(--t-badge-text-spacing); text-transform: var(--t-badge-text-transform); color: var(--t-badge-text-color); } /* 12. cart-title */ .pdi-order-cart-head p, .pdi-order-total span { font-family: var(--t-cart-title-family); font-size: var(--t-cart-title-size); font-weight: var(--t-cart-title-weight); letter-spacing: var(--t-cart-title-spacing); text-transform: var(--t-cart-title-transform); color: var(--t-cart-title-color); } /* 13. cart-item-text */ .pdi-order-line strong, .pdi-order-cart-head strong, .pdi-order-total strong { font-family: var(--t-cart-item-family); font-size: var(--t-cart-item-size); font-weight: var(--t-cart-item-weight); color: var(--t-cart-item-color); } .pdi-order-line span, .pdi-order-cart-note { font-family: var(--t-cart-item-family); font-size: var(--t-cart-item-muted-size); color: var(--t-cart-item-muted-color); } /* 14. form-label */ .pdi-field span, .pdi-reservation-form label span { font-family: var(--t-form-label-family); font-size: var(--t-form-label-size); font-weight: var(--t-form-label-weight); letter-spacing: var(--t-form-label-spacing); text-transform: var(--t-form-label-transform); color: var(--t-form-label-color); } .pdi-order-form label { font-family: var(--t-form-label-family); } /* 15. form-placeholder */ .pdi-field input::placeholder, .pdi-field textarea::placeholder, .pdi-order-form input::placeholder, .pdi-order-form textarea::placeholder { font-family: var(--t-form-placeholder-family); color: var(--t-form-placeholder-color); } /* 16. footer-title (font-size !important matches the rule it replaces) */ .pdi-footer-label { font-family: var(--t-footer-title-family); font-size: var(--t-footer-title-size) !important; font-weight: var(--t-footer-title-weight); line-height: var(--t-footer-title-line); letter-spacing: var(--t-footer-title-spacing); text-transform: var(--t-footer-title-transform); color: var(--t-footer-title-color); } /* 17. footer-text */ .pdi-footer-nav a, .pdi-footer-column a, .pdi-footer-column div:not(.pdi-footer-label) { font-family: var(--t-footer-text-family); font-size: var(--t-footer-text-size); font-weight: var(--t-footer-text-weight); line-height: var(--t-footer-text-line); letter-spacing: var(--t-footer-text-spacing); text-transform: var(--t-footer-text-transform); color: var(--t-footer-text-color); } /* 18. legal-text */ .pdi-footer-legal-links a, .pdi-footer-legal-links span, .pdi-footer-copyright { font-family: var(--t-legal-text-family); font-size: var(--t-legal-text-size); font-weight: var(--t-legal-text-weight); letter-spacing: var(--t-legal-text-spacing); text-transform: var(--t-legal-text-transform); color: var(--t-legal-text-color); } .pdi-footer-copyright { color: var(--t-legal-text-muted-color); text-transform: uppercase; letter-spacing: .1em; } /* ========= PART 4 — PINNED VARIANTS (preserve today's exact design) ========= These keep elements that intentionally differ from their role's canonical token. Delete a block to make that element follow the main token instead. */ /* section-title variants */ .pdi-resa-title { /* NOTRE MAISON card: bigger, pure white */ --t-section-title-size: clamp(44px, 4.4vw, 80px); --t-section-title-line: .92; --t-section-title-color: #ffffff; --t-section-title-shadow: 0 2px 30px rgba(0, 0, 0, .8); } .pdi-menu-paragraph { /* menu statement: body font, fluid size */ --t-section-title-family: var(--t-font-body); --t-section-title-size: clamp(1.75rem, 2.45vw, 3.25rem); --t-section-title-line: 1.12; --t-section-title-color: rgba(255, 248, 238, .92); --t-section-title-shadow: 0 2px 24px rgba(0, 0, 0, .58); } #specialites .text-2xl { /* specialties = a long statement, not a title: use the body font (Rubik) so it doesn't overflow */ --t-section-title-line: 1.18; font-family: var(--t-font-body) !important; } /* Mobile safety: the display font (Oi) has very wide glyphs — make sure no big-text role can push past the viewport edge (the "cropped on the sides" bug). */ @media (max-width: 767px) { .pdi-resa-title, .pdi-reservation-title, .pdi-menu-mobile-heading, .pdi-menu-mobile-subheading, #specialites .text-2xl, .pdi-menu-paragraph { max-width: 100%; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } } @media (max-width: 767px) { .pdi-menu-paragraph { --t-section-title-size: clamp(.92rem, 4.15vw, 1.08rem); --t-section-title-line: 1.2; } } /* section-subtitle variants */ .pdi-reservation-kicker { /* wider tracking, its own cream */ --t-section-subtitle-weight: 700; --t-section-subtitle-spacing: .32em; --t-section-subtitle-color: rgba(255, 246, 223, .82); } .pdi-menu-desktop-title, .pdi-menu-mobile-eyebrow { /* menu eyebrow: lighter, warm gold */ --t-section-subtitle-weight: 500; --t-section-subtitle-spacing: .14em; --t-section-subtitle-color: #f7dfb7; } /* form-label variant — the order page labels are not letterspaced/uppercase */ .pdi-order-form label, .pdi-order-form label span { --t-form-label-weight: 800; --t-form-label-spacing: 0; --t-form-label-transform: none; --t-form-label-color: rgba(255, 242, 216, .75); font-weight: var(--t-form-label-weight); letter-spacing: var(--t-form-label-spacing); text-transform: var(--t-form-label-transform); color: var(--t-form-label-color); } /* ============================================================================ OOBAMINT — /commander (fond PARCHEMIN) : regle lisibilite. Tout le TEXTE devient brun fonce ; l'or ne sert JAMAIS de couleur de texte (ornement seulement). Place en FIN de fichier pour battre les overrides #FFBE8E !important du bloc oobamint (meme specificite, source plus tard). Nav/kicker scopes a la page commander via body:has(.pdi-order-hero) — la nav de l'accueil (fond sombre) reste claire. ============================================================================ */ html.resto-oobamint body:has(.pdi-order-hero) .pdi-order-kicker { color: #2A1F1A !important; } html.resto-oobamint body:has(.pdi-order-hero) .nav_links .text-xs, html.resto-oobamint body:has(.pdi-order-hero) .nav_links a { color: #2A1F1A !important; font-weight: 500 !important; } html.resto-oobamint .pdi-order-cat-head, html.resto-oobamint .pdi-order-cat-title { color: #8B2015 !important; /* rouge laque fonce (accent) */ font-weight: 700 !important; } html.resto-oobamint .pdi-order-row-price, html.resto-oobamint .pdi-order-row-price .pdi-price-num, html.resto-oobamint .pdi-order-row-price .pdi-price-cur { color: #8B2015 !important; /* prix : or pale illisible -> rouge laque gras */ font-weight: 700 !important; } /* oobamint : le passage du footer-bottom en align-items:baseline (fix alignement letterize) cale le contenu en HAUT de la rangee -> on le redescend de 30px (demande client). */ html.resto-oobamint .pdi-footer-bottom { padding-top: 30px !important; } /* ===== DINEORA FONT-FX (generated per-site, ChatGPT) — START ===== */ /* --- _global-fx.css --- */ /* ---- GLOBAL : le canvas vidéo multiply doit rester SOUS les titres ---- pdi-order-page.css:210 donne z-index:1 à TOUS les enfants directs de .pdi-order-page, y compris .pdi-order-footer-video (la section qui héberge le canvas multiply plein écran). Comme elle vient APRÈS dans le DOM, à z égal elle peint PAR-DESSUS le hero/contenu z:1 → le multiply assombrit le remplissage texture des titres. Design d'origine (pdi-order-page.css:229) : la vidéo est censée être z:0 SOUS le contenu z:1. On la remet à z:0 : l'ambiance multiply continue de teinter le FOND (z-auto), les titres z:1 (hero, .pdi-order-content) y échappent. */ .pdi-order-page > .pdi-order-footer-video { z-index: 0 !important; } /* ================= redrooster homepage : nettoyage structurel (user 2026-07-17) ================= Avant : 25.6 scrolls. Après : 10.1 scrolls. Gardé : hero(pin-spacer) + #menu(poster) + #reservation(titre+paragraphe+FORMULAIRE) + section vide + footer. */ /* 1) DESKTOP : enlever l'image (avec l'effet) qui apparaît après le menu = .menu-library-card (l'image food atlas_gi_03_FOOD, celle avec le bouton MENU). */ @media (min-width:769px){ html.resto-redrooster #menu .menu-library-card, html.pdi-v2 #menu .menu-library-card{ display: none !important; } } /* redrooster DESKTOP : HERO = le poster complet (user 2026-07-18). L'ancien hero = .section_hero (fixed parallax, 1 écran, cover+center) dont le JS pose l'image en INLINE !important depuis media.heroBackgroundImage → impossible a overrider en CSS, et GSAP re-fixe .pdi-hero-parallax a 953px. Solution : on MASQUE .section_hero (le calque fixe) et on pose le poster directement en fond du .pin-spacer (le conteneur in-flow qui reserve deja l'espace de scroll du hero). aspect-ratio 2560/2880 = ratio EXACT du poster → cover affiche le poster ENTIER depuis le haut, ZERO deformation. Le pin-spacer etant in-flow, GSAP ne le re-fixe pas → ca tient au scroll. */ @media (min-width:769px){ html.resto-redrooster .main-wrapper > .pin-spacer, html.pdi-v2 .main-wrapper > .pin-spacer{ aspect-ratio: var(--pdi-v2-hero-d-ar, 2560 / 2880) !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; background: var(--pdi-v2-hero-d, url("https://dineora.b-cdn.net/site-assets/Redrooster_Rabat_Maroc/hero_poster_top30_2026-07-18.jpg")) center center / cover no-repeat !important; } html.resto-redrooster .main-wrapper > .pin-spacer > .section_hero, html.pdi-v2 .main-wrapper > .pin-spacer > .section_hero{ display: none !important; } } /* redrooster MOBILE : HERO = version verticale du poster (1280x3840) (user 2026-07-18). Meme technique que desktop mais ratio 1280/3840 (portrait tres haut, adapte au mobile etroit). */ @media (max-width:768px){ html.resto-redrooster .main-wrapper > .pin-spacer, html.pdi-v2 .main-wrapper > .pin-spacer{ aspect-ratio: var(--pdi-v2-hero-m-ar, 1280 / 3840) !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; background: var(--pdi-v2-hero-m, url("https://dineora.b-cdn.net/site-assets/Redrooster_Rabat_Maroc/hero_poster_mobile_2026-07-18.jpg")) center center / cover no-repeat !important; } html.resto-redrooster .main-wrapper > .pin-spacer > .section_hero, html.pdi-v2 .main-wrapper > .pin-spacer > .section_hero{ display: none !important; } } /* redrooster DESKTOP : FOOTER = image pleine (user 2026-07-17). L'image footer_full (1920x1080) contient tout le footer cuit (nav, contact, adresse, horaires, service, logo, socials, copyright). On masque le panel HTML et on pose l'image ; aspect-ratio 1920/1080 = ZÉRO déformation. */ @media (min-width:769px){ html.resto-redrooster .pdi-footer-reveal, html.pdi-v2 .pdi-footer-reveal{ width: 100% !important; aspect-ratio: var(--pdi-v2-footer-d-ar, 1920 / 1080) !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; background: var(--pdi-v2-footer-d, url("https://dineora.b-cdn.net/site-assets/Redrooster_Rabat_Maroc/footer_nosocial_2026-07-18.jpg")) center / 100% 100% no-repeat !important; } html.resto-redrooster .pdi-footer-reveal .pdi-footer-panel, html.pdi-v2 .pdi-footer-reveal .pdi-footer-panel{ display: none !important; } } /* redrooster MOBILE : FOOTER = version verticale HAUTE 1:3 (user 2026-07-18, remplace la 9:16). */ @media (max-width:768px){ html.resto-redrooster .pdi-footer-reveal, html.pdi-v2 .pdi-footer-reveal{ width: 100% !important; aspect-ratio: var(--pdi-v2-footer-m-ar, 1280 / 3840) !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; background: var(--pdi-v2-footer-m, url("https://dineora.b-cdn.net/site-assets/Redrooster_Rabat_Maroc/footer_mobile_tall_2026-07-18.jpg")) center / 100% 100% no-repeat !important; } html.resto-redrooster .pdi-footer-reveal .pdi-footer-panel, html.pdi-v2 .pdi-footer-reveal .pdi-footer-panel{ display: none !important; } /* MOBILE : section réservation = board vertical 1:3, champs calés sur les 7 slots pleine largeur (mesurés : left 15.94%, w 68.28%, h ~4%, tops réguliers). Même mécanique que desktop. */ html.resto-redrooster #reservation, html.pdi-v2 #reservation{ width: 100% !important; aspect-ratio: var(--pdi-v2-resa-m-ar, 1280 / 3840) !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; position: relative !important; margin: 0 !important; padding: 0 !important; background: var(--pdi-v2-resa-m, url("https://dineora.b-cdn.net/site-assets/Redrooster_Rabat_Maroc/reservation_board_mobile_2026-07-18.jpg")) center / 100% 100% no-repeat !important; } html.resto-redrooster #reservation .pdi-reservation-layout > :not(.pdi-reservation-form), html.pdi-v2 #reservation .pdi-reservation-layout > :not(.pdi-reservation-form){ display: none !important; } /* .pdi-reservation-content (mobile) = wrapper relative à 72% de hauteur → il devenait le containing block du form et tassait tous les slots (top × 0.72). On le met static pleine hauteur. */ html.resto-redrooster #reservation .pdi-reservation-content, html.pdi-v2 #reservation .pdi-reservation-content{ position: static !important; height: 100% !important; min-height: 0 !important; top: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; } html.resto-redrooster #reservation .pdi-reservation-layout, html.pdi-v2 #reservation .pdi-reservation-layout{ position: static !important; display: block !important; max-width: none !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html.resto-redrooster #reservation .pdi-reservation-form, html.pdi-v2 #reservation .pdi-reservation-form{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; background: none !important; border: none !important; box-shadow: none !important; transform: none !important; } html.resto-redrooster #reservation .pdi-reservation-form::before, html.pdi-v2 #reservation .pdi-reservation-form::before, html.resto-redrooster #reservation .pdi-reservation-form::after, html.pdi-v2 #reservation .pdi-reservation-form::after{ display:none !important; content:none !important; } html.resto-redrooster #reservation .pdi-field, html.pdi-v2 #reservation .pdi-field{ position: absolute !important; margin: 0 !important; padding: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } html.resto-redrooster #reservation .pdi-field input, html.pdi-v2 #reservation .pdi-field input, html.resto-redrooster #reservation .pdi-field textarea, html.pdi-v2 #reservation .pdi-field textarea{ visibility: visible !important; opacity: 1 !important; } html.resto-redrooster #reservation .pdi-field > span, html.pdi-v2 #reservation .pdi-field > span{ display: none !important; } html.resto-redrooster #reservation .pdi-field::before, html.pdi-v2 #reservation .pdi-field::before, html.resto-redrooster #reservation .pdi-field::after, html.pdi-v2 #reservation .pdi-field::after{ display:none !important; content:none !important; } html.resto-redrooster #reservation .pdi-field:has(input[name="name"]), html.pdi-v2 #reservation .pdi-field:has(input[name="name"]){ left:15.94% !important; top:38.33% !important; width:68.28% !important; height:3.96% !important; } html.resto-redrooster #reservation .pdi-field:has(input[name="phone"]), html.pdi-v2 #reservation .pdi-field:has(input[name="phone"]){ left:15.94% !important; top:44.82% !important; width:68.28% !important; height:4.09% !important; } html.resto-redrooster #reservation .pdi-field:has(input[name="email"]), html.pdi-v2 #reservation .pdi-field:has(input[name="email"]){ left:15.94% !important; top:51.48% !important; width:68.28% !important; height:4.09% !important; } html.resto-redrooster #reservation .pdi-field:has(input[name="date"]), html.pdi-v2 #reservation .pdi-field:has(input[name="date"]){ left:15.94% !important; top:58.28% !important; width:68.28% !important; height:3.96% !important; } html.resto-redrooster #reservation .pdi-field:has(input[name="time"]), html.pdi-v2 #reservation .pdi-field:has(input[name="time"]){ left:15.94% !important; top:64.87% !important; width:68.28% !important; height:3.96% !important; } html.resto-redrooster #reservation .pdi-field:has(input[name="guests"]), html.pdi-v2 #reservation .pdi-field:has(input[name="guests"]){ left:15.94% !important; top:71.35% !important; width:68.28% !important; height:4.09% !important; } html.resto-redrooster #reservation .pdi-field:has(textarea[name="request"]), html.pdi-v2 #reservation .pdi-field:has(textarea[name="request"]){ left:15.94% !important; top:78.12% !important; width:68.28% !important; height:3.93% !important; } html.resto-redrooster #reservation .pdi-field input, html.pdi-v2 #reservation .pdi-field input, html.resto-redrooster #reservation .pdi-field textarea, html.pdi-v2 #reservation .pdi-field textarea{ width: 100% !important; height: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--pdi-v2-field-ink, #2a1208) !important; -webkit-text-fill-color: var(--pdi-v2-field-ink, #2a1208) !important; font-size: 16px !important; padding: 0 12px !important; outline: none !important; } html.resto-redrooster #reservation .pdi-field textarea, html.pdi-v2 #reservation .pdi-field textarea{ resize: none !important; padding-top: 6px !important; } html.resto-redrooster #reservation .pdi-reservation-submit, html.pdi-v2 #reservation .pdi-reservation-submit{ position: absolute !important; left: 50% !important; bottom: 1.2% !important; top: auto !important; right: auto !important; transform: translateX(-50%) !important; z-index: 6 !important; margin: 0 !important; width: 60% !important; height: auto !important; aspect-ratio: 3 / 1 !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } } /* redrooster : SUPPRESSION de la section vide 1-scroll avant le footer (user 2026-07-18, annule la demande précédente) — desktop ET mobile, plus aucun espace vide entre sections. */ html.resto-redrooster .pdi-resa-section,html.pdi-v2 .pdi-resa-section{ display: none !important; } /* ================= redrooster DESKTOP : section réservation = BOARD pleine image (user 2026-07-17) ================= L'image reservation_board_full (2560x1440) contient TOUT le texte cuit (titre Réservations, kicker, paragraphe, contacts, labels des champs). On garde la structure/logique du formulaire (mêmes inputs, même submit) : la section devient UN écran (100vh, rien ne déborde), le board en fond étiré 100%/100%, les .pdi-field posés en absolu sur les slots blancs MESURÉS au pixel (masque luminance>185 sat<40) : rangée nom y39.1% h6.6% ; tél/email y49.0% ; date/heure y58.6% ; couverts/demande y68.5% ; colonnes x28.12% (w20.86%) et x50.98% (w20.9%), nom pleine largeur w43.75%. */ @media (min-width:769px){ /* la section suit le RATIO EXACT de l'image (2560/1440 = 56.25vw de haut) → zéro déformation, et background 100% 100% devient un rendu natif ; les % des slots restent exacts. */ html.resto-redrooster #reservation, html.pdi-v2 #reservation{ width: 100% !important; aspect-ratio: var(--pdi-v2-resa-d-ar, 2560 / 1440) !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; position: relative !important; margin: 0 !important; padding: 0 !important; background: var(--pdi-v2-resa-d, url("https://dineora.b-cdn.net/site-assets/Redrooster_Rabat_Maroc/reservation_board_2026-07-18.jpg")) center / 100% 100% no-repeat !important; } /* tout le contenu texte/déco disparaît (il est cuit dans l'image) — on ne garde que le formulaire */ html.resto-redrooster #reservation .pdi-reservation-layout > :not(.pdi-reservation-form), html.pdi-v2 #reservation .pdi-reservation-layout > :not(.pdi-reservation-form){ display: none !important; } html.resto-redrooster #reservation .pdi-reservation-layout, html.pdi-v2 #reservation .pdi-reservation-layout{ position: static !important; display: block !important; max-width: none !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html.resto-redrooster #reservation .pdi-reservation-form, html.pdi-v2 #reservation .pdi-reservation-form{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; background: none !important; border: none !important; box-shadow: none !important; transform: none !important; } html.resto-redrooster #reservation .pdi-reservation-form::before, html.pdi-v2 #reservation .pdi-reservation-form::before, html.resto-redrooster #reservation .pdi-reservation-form::after, html.pdi-v2 #reservation .pdi-reservation-form::after{ display:none !important; content:none !important; } /* champs = calés sur les slots du board ; labels HTML cachés (cuits dans l'image). transform:none = tue le translateY(24px) de l'animation reveal GSAP qui décalait tous les slots de +2.7% */ html.resto-redrooster #reservation .pdi-field, html.pdi-v2 #reservation .pdi-field{ position: absolute !important; margin: 0 !important; padding: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } html.resto-redrooster #reservation .pdi-field input, html.pdi-v2 #reservation .pdi-field input, html.resto-redrooster #reservation .pdi-field textarea, html.pdi-v2 #reservation .pdi-field textarea{ visibility: visible !important; opacity: 1 !important; } /* les .pdi-field SONT des