/* Theme Name: Santamaria Child Theme URI: https://tonsite.com/ Description: Thème enfant Author: Ton Nom Template: hello-elementor /* <-- mets ici le dossier exact du parent */ Version: 1.0.0 Text Domain: santamaria-child */ /* === Burger (au-dessus du popup, géométrie + centrage) === */ .smt-burger{ position:relative; z-index:100011; display:inline-flex; align-items:center; justify-content:center; width:32px; height:24px; background:transparent; border:0; padding:0; cursor:pointer; } header{ position: relative; z-index: 10; } .dialog-widget-content ul li.menu-item a span{ display: inline-flex; transition: all .3s ease-in-out; position: relative; } .dialog-widget-content ul li.menu-item a span:before{ content:''; width: 100%; height: 0px; background-color: #fff; left: 0; position: absolute; bottom: -4px; } .dialog-widget-content ul li.menu-item a:hover span:before{ height: 4px; } .page-content{ overflow-x: hidden; } /* Neutraliser hover/focus/active & agrandir la zone de clic */ .smt-burger, .smt-burger:hover, .smt-burger:focus, .smt-burger:active{ background: transparent !important; box-shadow: none !important; } .smt-burger::before{ content:""; position:absolute; inset:-8px; /* +8px tout autour */ } /* Barres + animation (X) */ .smt-burger span{ position:absolute; left:0; right:0; height:4px; border-radius:2px; background:#FF0000 !important; /* rouge (fermé) */ transform-origin:50% 50%; transition:transform .3s ease, opacity .2s ease, background .3s ease; pointer-events:none; } .smt-burger span:nth-child(1){ top:0; } .smt-burger span:nth-child(2){ top:50%; transform:translateY(-50%); } .smt-burger span:nth-child(3){ bottom:0; } /* Etat ouvert => X blanc chaud */ .smt-burger.open span{ background:#FCF5F2 !important; } .smt-burger.open span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); } .smt-burger.open span:nth-child(2){ opacity:0; } .smt-burger.open span:nth-child(3){ top:50%; bottom:auto; transform:translateY(-50%) rotate(-45deg); } /* Popup sous le burger mais au-dessus du site */ .elementor-popup-modal{ z-index:100000; } /* === Popup menu plein écran === */ .smt-menu-fs{ position:relative; /* référence pour le logo en absolu */ max-width:820px; margin-inline:auto; padding-bottom:140px; /* place pour le logo bas */ } /* Logo bas centré (SVG ou image) */ .smt-menu-fs .smt-logo-fs{ position:absolute; left:50%; bottom:5%; transform:translateX(-50%); opacity:.95; z-index:1; pointer-events:none; /* ne bloque jamais les clics du menu */ } .smt-menu-fs .elementor-nav-menu a:focus, .smt-menu-fs .elementor-nav-menu a:active { outline: none !important; box-shadow: none !important; } .smt-menu-fs .elementor-nav-menu a { -webkit-tap-highlight-color: transparent; } /* Optional: remove iOS tap highlight */ .smt-menu-fs .elementor-nav-menu a { -webkit-tap-highlight-color: transparent; } /* Menu : typo / couleurs */ .smt-menu-fs .elementor-nav-menu .elementor-item{ color:#FCF5F2; /* blanc chaud */ text-transform:uppercase; letter-spacing:.12em; } .smt-menu-fs .elementor-nav-menu .elementor-item:hover{ color:#FFFFFF; } /* Focus clavier visible */ .smt-menu-fs .elementor-nav-menu a:focus{ outline:2px solid #FCF5F2; outline-offset:3px; border-radius:3px; padding:.2em .3em; } /* Responsive */ @media (max-width:767px){ .smt-menu-fs{ padding-bottom:120px; } } /* Quand le popup #50 est ouvert, on force le X via une classe sur */ body.popup-50-open .smt-burger span { background: #FCF5F2 !important; /* blanc chaud */ } body.popup-50-open .smt-burger span:nth-child(1){ top:50%; transform: translateY(-50%) rotate(45deg); } body.popup-50-open .smt-burger span:nth-child(2){ opacity: 0; } body.popup-50-open .smt-burger span:nth-child(3){ top:50%; bottom:auto; transform: translateY(-50%) rotate(-45deg); } /* Flèche SVG après le lien “OBTENIR L’ITINÉRAIRE” */ .smt-cta-link a { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; color: #FCF5F2; font-weight: 700; } .smt-cta-link a::after { content: ""; display: inline-block; width: 24px; /* ajuste selon ta taille de flèche */ height: 12px; background: url('http://santamaria-tacos.local/wp-content/uploads/2025/09/arrow.svg') no-repeat center; background-size: contain; transform: translateY(1px); transition: transform 0.2s ease; } .smt-cta-link a:hover::after { transform: translate(2px, 1px); /* effet de glissement subtil au survol */ } /* Titre héro */ .smt-hero .smt-hero-title{ font-family: var(--wp--preset--font-family--intro-rust, "Intro Rust"), Georgia, serif; font-weight:700; color:#FCF5F2; /* blanc chaud */ line-height:.9; letter-spacing:.02em; font-size: clamp(36px, 6vw, 96px); margin: 0 0 .25em; text-shadow: 0 1px 0 rgba(0,0,0,.06); } /* Sous-ligne */ .smt-hero .smt-hero-sub{ font-family: var(--wp--preset--font-family--neue-haas-display,"Neue Haas Display"), Helvetica, Arial, sans-serif; font-weight:700; color:#FF0000; /* rouge Santa Maria */ letter-spacing:.14em; text-transform:uppercase; font-size: clamp(12px, 1.3vw, 14px); margin: .25rem 0 0; } /* Confort mobile */ @media (max-width:767px){ .smt-hero{ padding-inline: 16px; } } /* Le contenu du héro colle au bas, tout en gardant le padding */ .smt-hero{ min-height: 80vh; display: flex; align-items: flex-end; /* bas */ padding-block: clamp(32px, 6vw, 96px); } /* ============================ SECTION PROMO — VERSION PROPRE ============================ */ /* Bande rouge de fond (sous la pilule) */ .smt-promo{ background:#FF0000; color:#FCF5F2; padding-block:18px; } /* Pilule bourgogne qui clippe le flux */ .smt-promo-band{ position:relative; background:#98111C; border-radius:64px; padding:26px 56px; max-width:min(1720px, calc(100% - 4vw)); margin-inline:auto; /* centrage & clip sûrs, même avec les wrappers Elementor */ display:flex; align-items:center; overflow:hidden; box-shadow:none; } /* Les wrappers Elementor à l’intérieur doivent centrer et ne pas ajouter d’espacements */ .smt-promo-band .elementor-widget, .smt-promo-band .elementor-widget-container, .smt-promo-band .elementor-widget-wrap, .smt-promo-band .elementor-container, .smt-promo-band .elementor-column, .smt-promo-band .e-con-inner, .smt-promo-band .e-con { margin:0 !important; padding:0 !important; width:100% !important; display:flex !important; align-items:center !important; min-height:0 !important; } /* Fenêtre du texte défilant */ .smt-promo-marquee{ display:block; width:100%; overflow:hidden; white-space:nowrap; margin:0; color:#FCF5F2; font-family: var(--wp--preset--font-family--neue-haas-display,"Neue Haas Display"), Arial, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.14em; line-height:1.2; } /* Si Elementor a injecté un

*/ .smt-promo-marquee p{ display:inline; margin:0; } /* === ROLLBACK: Marquee classique (une ligne animée, duplicats inline) === */ /* Neutralise toute anim parasite éventuelle sur les items */ .smt-promo-marquee .marquee{ animation: none; } /* On anime chaque item de gauche à droite, en boucle continue (utiliser deux duplicats dans le HTML) */ .smt-promo-marquee .marquee{ display:inline-block; padding-right: 2.5rem; /* espace entre items */ font-size: clamp(16px, 1.8vw, 22px); letter-spacing: .16em; line-height: 1; /* compacité */ animation: smtMarquee 9s linear infinite; will-change: transform; margin-top: 45px; } @keyframes smtMarquee{ from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Étoiles automatiques entre deux spans .marquee adjacents */ .smt-promo-marquee.smt-auto-stars{ --smt-star-size: 32px; --smt-star-gap: 1rem; --smt-star-color:#FF0000; } .smt-promo-marquee.smt-auto-stars .marquee + .marquee::before{ content: ""; display: inline-block; width: var(--smt-star-size); height: var(--smt-star-size); margin: -1px var(--smt-star-gap) 0; background: var(--smt-star-color); vertical-align: middle; -webkit-mask: url('/wp-content/uploads/2025/09/star.svg') no-repeat center/contain; mask: url('/wp-content/uploads/2025/09/star.svg') no-repeat center/contain; } /* ============================ Responsif ============================ */ @media (max-width:1024px){ .smt-promo-band{ padding:18px 32px; } } @media (max-width:767px){ .smt-promo{ padding-block:14px; } .smt-promo-band{ padding:14px 18px; max-width:calc(100% - 20px); } .smt-promo-marquee .marquee{ font-size:clamp(14px, 3.8vw, 18px); } .smt-promo-marquee.smt-auto-stars{ --smt-star-size: 14px; --smt-star-gap: .9rem; } } /* La pilule ne clippe plus => la pastille peut dépasser */ .smt-promo-band{ overflow: visible; /* au lieu de hidden */ position: relative; /* référence pour la pastille si elle est dedans */ } /* Le clipping du texte se fait ici, à l’intérieur */ .smt-promo-viewport{ overflow: hidden; border-radius: inherit; /* reprend la forme de la pilule */ width: 100%; height: 100%; display: flex; /* garde l’alignement centré */ align-items: center; } /* Pastille qui dépasse sans être coupée */ .smt-promo-badge{ position: absolute; left: -26px; /* ajuste selon ton SVG */ top: -26px; /* idem */ width: 120px; height: auto; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); } /* Si tu veux réserver de la place à gauche quand la pastille est là */ .smt-promo-band.has-badge{ padding-left: calc(56px + 120px); /* padding + largeur pastille */ } /* Sécurité : la fenêtre du track reste tout de même masquée */ .smt-marquee2{ overflow: hidden; } /* Quand la pilule a une pastille, on pousse le texte */ .smt-promo-band.has-badge{ padding-left: 160px; /* décale le track vers la droite */ } /* Ajustement fin du badge */ .smt-promo-badge{ position:absolute; left:20px; /* distance du bord gauche de la pilule */ top:50%; transform:translateY(-50%); width:100px; /* taille du badge */ height:auto; } /* Wrapper qui sert de référence pour la pastille */ .smt-promo-wrap{ position: relative; max-width: min(1720px, calc(100% - 4vw)); margin-inline: auto; } /* La pilule (ton conteneur bourgogne qui clippe le texte) */ .smt-promo-band{ position: relative; background: #98111C; border-radius: 64px; padding: 26px 56px; /* padding standard */ padding-left: 180px; /* <-- réserve l’espace pour la pastille */ overflow: hidden; /* on garde le clip du marquee */ box-shadow: none; } /* La pastille, en dehors de la pilule, superposée au bord gauche */ .smt-promo-badge{ position: absolute; left: 14px; /* distance du bord de la section rouge */ top: 50%; transform: translateY(-50%); width: 120px; /* taille du badge */ height: auto; z-index: 3; /* au-dessus de la pilule */ pointer-events: none; /* elle ne bloque pas les clics du marquee */ } /* Responsive : badge plus petit et moins de padding réservé */ @media (max-width: 1024px){ .smt-promo-badge{ width: 96px; left: 10px; } .smt-promo-band{ padding-left: 150px; } } @media (max-width: 767px){ .smt-promo-badge{ width: 84px; left: 8px; } .smt-promo-band{ padding-left: 130px; border-radius: 48px; padding: 18px 18px 18px 130px; } } /* ==== Santa Maria Tacos — Gravity Forms hardening ==== */ /* Works with Gravity Theme, Orbital or Legacy markup. Place globally. */ /* 1) Root theme variables (Gravity Theme / Orbital). */ .gform_wrapper.gravity-theme.smt-form, .gform_wrapper.gform-theme.smt-form, .gform_wrapper.gform-theme--no-framework.smt-form { /* Colors */ --gf-color-text: #ffffff; --gf-field-label-color: #ffffff; --gf-placeholder-color: rgba(255,255,255,.55); /* Field box */ --gf-field-background-color: transparent; --gf-field-border-color: #ffffff; --gf-field-border-size: 2px; --gf-field-border-radius: 10px; --gf-input-padding-y: 18px; --gf-input-padding-x: 18px; --gf-input-height: 64px; /* Buttons */ --gf-button-bg-color: #ffffff; --gf-button-text-color: #ff0000; --gf-button-border-radius: 10px; } /* 2) Layout grid: 2 columns desktop, 1 column mobile. */ .smt-form .gform_fields, .smt-form .gform-grid, .smt-form ul.gform_fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .smt-form .gfield, .smt-form li.gfield, .smt-form .gform-grid-col { margin: 0 !important; } /* Full-width rows (textarea, long fields). */ .smt-form .gfield--type-textarea, .smt-form .gfield--width-full, .smt-form .gform-grid-col--span-12 { grid-column: 1 / -1 !important; } /* 3) Labels */ .smt-form .gfield_label { color: #ffffff !important; font-weight: 800 !important; font-size: 16px !important; line-height: 1.2 !important; margin: 0 0 10px !important; } .smt-form .gfield_required, .smt-form .gfield_required_text { display: none !important; } /* 4) Controls — make them show no matter what. */ .smt-form .ginput_container, .smt-form .gfield input, .smt-form .gfield textarea { visibility: visible !important; opacity: 1 !important; } .smt-form input[type="text"], .smt-form input[type="email"], .smt-form input[type="tel"], .smt-form input[type="number"], .smt-form input[type="date"], .smt-form input[type="url"], .smt-form input[type="search"], .smt-form input[type="password"], .smt-form textarea { display: block !important; width: 100% !important; min-width: 0 !important; height: 64px !important; background: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 10px !important; padding: 18px !important; font-size: 18px !important; line-height: 1.35 !important; box-shadow: none !important; } .smt-form textarea { height: 280px !important; resize: vertical !important; } .smt-form input::placeholder, .smt-form textarea::placeholder { color: rgba(255,255,255,.55) !important; } .smt-form input:focus, .smt-form textarea:focus { outline: none !important; border-color: #ff0000 !important; background: rgba(255,255,255,0.04) !important; } /* 5) Footer button (bottom-right white pill). */ .smt-form .gform_footer, .smt-form .gform_page_footer { display: flex !important; justify-content: flex-end !important; gap: 12px !important; margin-top: 24px !important; } .smt-form .gform_button { background: #ffffff !important; color: #ff0000 !important; text-transform: uppercase !important; font-weight: 900 !important; letter-spacing: .06em !important; border: 0 !important; border-radius: 10px !important; padding: 16px 28px !important; font-size: 16px !important; cursor: pointer !important; transition: transform .02s ease, background .2s ease, color .2s ease !important; } .smt-form .gform_button:hover { background:#ff0000 !important; color:#ffffff !important; } .smt-form .gform_button:active { transform: translateY(1px) !important; } /* 6) Validation hints */ .smt-form .gfield_error input, .smt-form .gfield_error textarea { border-color: #FF4F10 !important; } .smt-form .gfield_validation_message { background: transparent !important; color: #ffd8d8 !important; border: 0 !important; padding: 6px 0 0 !important; font-size: 14px !important; } /* 7) Mobile */ @media (max-width: 767px) { .smt-form .gform_fields, .smt-form .gform-grid, .smt-form ul.gform_fields { grid-template-columns: 1fr !important; gap: 20px !important; } } .gform-theme--framework *, .gform-theme--framework ::after, .gform-theme--framework ::before { box-sizing: border-box; color: white; } .gform-theme--framework .field_sublabel_above .gform-field-label--type-sub { --gf-local-margin-y: 0 var(--gf-label-space-tertiary); color: white; } .gform-theme--framework .gform_required_legend .gfield_required { color: #fff; } .gform-theme--framework .field_description_above .gfield_description:where([class="gfield_description"], .gfield_creditcard_warning_message, .field_validation_above .gfield_validation_message) { margin-block-end: var(--gf-desc-space); color: white; } .gform-theme--framework .field_description_above .gfield_description:where(:not([class="gfield_description"]):not(.gfield_creditcard_warning_message):not(.field_validation_above .gfield_validation_message):not(.ginput_counter_tinymce):not(.gfield_consent_description):not(.gfield_choice_limit_message)) { margin-block-start: var(--gf-desc-space); color: white; } .gform_wrapper .gfield.gfield--width-full { width: 100% !important; } /* === Gravity Forms → 100% largeur (brut, sans classes) === */ /* Limité aux pages Elementor pour éviter d’impacter l’admin */ .elementor [id^="gform_wrapper_"] .gform_fields{ display:grid !important; grid-template-columns: 1fr !important; /* 1 colonne pour tous les champs */ gap: 24px !important; } /* Chaque "colonne" GF et chaque gfield occupe toute la ligne */ .elementor [id^="gform_wrapper_"] .gform-grid-col, .elementor [id^="gform_wrapper_"] .gfield, .elementor [id^="gform_wrapper_"] li.gfield{ width:100% !important; max-width:100% !important; grid-column:1 / -1 !important; flex:0 0 100% !important; /* compat flex */ float:none !important; /* compat legacy */ clear:both !important; } /* Champs composés (Name, Address, etc.) → empilés à 100% */ .elementor [id^="gform_wrapper_"] .ginput_complex{ display:grid !important; grid-template-columns: 1fr !important; gap: 16px !important; } .elementor [id^="gform_wrapper_"] .ginput_complex > span, .elementor [id^="gform_wrapper_"] .ginput_complex > div{ width:100% !important; max-width:100% !important; grid-column:1 / -1 !important; margin:0 !important; } /* Cas particuliers de Name & Address (assure le plein-largeur) */ .elementor [id^="gform_wrapper_"] .name_first, .elementor [id^="gform_wrapper_"] .name_last, .elementor [id^="gform_wrapper_"] .name_middle, .elementor [id^="gform_wrapper_"] .address_line_1, .elementor [id^="gform_wrapper_"] .address_line_2, .elementor [id^="gform_wrapper_"] .address_city, .elementor [id^="gform_wrapper_"] .address_state, .elementor [id^="gform_wrapper_"] .address_zip, .elementor [id^="gform_wrapper_"] .address_country{ width:100% !important; max-width:100% !important; grid-column:1 / -1 !important; } /* Style du texte de la légende */ .overlay-cap .elementor-image-carousel .swiper-slide .elementor-image-carousel-caption { font-family: var(--wp--preset--font-family--intro-rust, "Intro Rust"), Georgia, serif; font-size: 40px; line-height: 1em; font-weight: 400; /* change si tu veux bold */ letter-spacing: 0.5px; /* optionnel */ font-style: normal; /* disables the italic */ padding: 0 0 20px 20px; /* increase this value for more space */ }