/* ========================================================================= EMPIRIAL LIVE — CSS global du site Chargé par le thème enfant, après les styles d'Elementor. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Fond de repli Le était blanc alors que tout le design est noir. La section hero ne tire son noir que de sa background-image : si screen.png ne charge pas, le H1 blanc cassé se retrouvait sur fond blanc (contraste 1,04:1). ------------------------------------------------------------------------- */ html, body { background-color: #000; } #emp-hero, #emp-services, #emp-agenda, #emp-contact, #emp-footer { background-color: #000; } /* ------------------------------------------------------------------------- 2. Focus clavier visible Hello Elementor et les widgets Royal ne posent aucun indicateur de focus. Sans ça, impossible de savoir où l'on se trouve en naviguant au clavier (WCAG 2.1 AA, critère 2.4.7). `:focus-visible` n'apparaît qu'au clavier, jamais au clic souris. ------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid #F5E11A; outline-offset: 3px; border-radius: 2px; } /* ------------------------------------------------------------------------- 3. Lien d'évitement Permet d'atteindre le contenu sans traverser toute la navigation. Le markup correspondant est injecté par le thème enfant. ------------------------------------------------------------------------- */ .emp-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 20px; background: #F5E11A; color: #000; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; } .emp-skip:focus { left: 12px; top: 12px; } /* ------------------------------------------------------------------------- 4. Mouvement réduit Royal Elementor Addons anime les entrées de section et le parallaxe. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------------- 5. Formulaires (Contact Form 7) CF7 ne fournit aucun style : sans ca, les champs heritent du navigateur (fond blanc, bordures systeme) au milieu d'un design noir. ------------------------------------------------------------------------- */ .emp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin-top: 8px; } .emp-form--inline { grid-template-columns: 1fr; max-width: 420px; } .emp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .emp-field--full { grid-column: 1 / -1; } .emp-field > label { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #969178; } .emp-form input[type="text"], .emp-form input[type="email"], .emp-form textarea, .emp-form select { width: 100%; padding: 13px 14px; background: transparent; border: 1px solid #333; border-radius: 0; color: #FFFAF5; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15px; transition: border-color .2s; } .emp-form select option { background: #0e0e0e; color: #FFFAF5; } .emp-form textarea { min-height: 130px; resize: vertical; } .emp-form input:focus, .emp-form textarea:focus, .emp-form select:focus { outline: none; border-color: #F5E11A; box-shadow: 0 0 0 1px #F5E11A; } .emp-form input::placeholder, .emp-form textarea::placeholder { color: #6a6a6a; } /* Case d'acceptation de la newsletter */ .emp-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .emp-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: #CDC7AB; text-transform: none; letter-spacing: 0; } .emp-form .wpcf7-acceptance input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: #F5E11A; flex: 0 0 auto; } /* Bouton d'envoi : reprend la charte du bouton "Book Now" */ .emp-form .emp-submit { justify-self: start; padding: 15px 40px; background: #F5E11A; color: #000; border: 0; border-radius: 0; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 21px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background .25s; } .emp-form .emp-submit:hover { background: #FFFAF5; } .emp-form .emp-submit:disabled { opacity: .5; cursor: not-allowed; } /* Messages de CF7 */ .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 16px; border: 1px solid #333; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; color: #FFFAF5; } .wpcf7 form.sent .wpcf7-response-output { border-color: #F5E11A; color: #F5E11A; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #ff6b6b; color: #ff8f8f; } .wpcf7-not-valid-tip { margin-top: 5px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 12.5px; color: #ff8f8f; } .wpcf7-form-control.wpcf7-not-valid { border-color: #ff6b6b !important; } .wpcf7-spinner { background-color: #F5E11A; } @media (max-width: 767px) { .emp-form { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 6. Agenda Rendu par le shortcode [empirial_agenda] du mu-plugin. ------------------------------------------------------------------------- */ .emp-agenda-block { max-width: 900px; } .emp-agenda__title { margin: 0 0 22px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 40px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: #E2E2E2; } .emp-agenda__title--past { margin-top: 64px; color: #969178; } .emp-agenda { list-style: none; margin: 0; padding: 0; } .emp-agenda__row { display: grid; grid-template-columns: 150px 1fr auto; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #222; } .emp-agenda__date { display: flex; flex-direction: column; gap: 2px; } .emp-agenda__day { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 34px; line-height: 1; color: #F5E11A; } .emp-agenda__month { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #969178; } .emp-agenda__artist { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; color: #FFFAF5; } .emp-agenda__venue { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: #CDC7AB; text-align: right; } .emp-agenda__zip { color: #6f6a58; } .emp-agenda__empty { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #969178; } @media (max-width: 767px) { .emp-agenda__row { grid-template-columns: 1fr; gap: 6px; } .emp-agenda__date { flex-direction: row; align-items: baseline; gap: 10px; } .emp-agenda__venue { text-align: left; } } /* ------------------------------------------------------------------------- 7. Page Booking : les noms d'artistes sont des liens vers leur fiche ------------------------------------------------------------------------- */ #emp-booking h3 a { color: inherit; text-decoration: none; transition: color .25s; } #emp-booking h3 a:hover, #emp-booking h3 a:focus-visible { color: #F5E11A; } /* ------------------------------------------------------------------------- 8. Fil d'Ariane ------------------------------------------------------------------------- */ .emp-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .emp-breadcrumb li + li::before { content: '/'; margin-right: 8px; color: #4a4738; } .emp-breadcrumb a { color: #969178; text-decoration: none; transition: color .2s; } .emp-breadcrumb a:hover { color: #F5E11A; } .emp-breadcrumb [aria-current] { color: #CDC7AB; } /* ------------------------------------------------------------------------- 9. FAQ Balisage dl/dt/dd : la relation question-reponse est portee par le HTML, pas seulement par la mise en forme. ------------------------------------------------------------------------- */ .emp-faq { max-width: 760px; } .emp-faq__title { margin: 0 0 26px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 44px; font-weight: 400; text-transform: uppercase; color: #E2E2E2; } .emp-faq dl { margin: 0; } .emp-faq__item { padding: 20px 0; border-top: 1px solid #222; } .emp-faq__item:last-child { border-bottom: 1px solid #222; } .emp-faq__q { margin: 0 0 8px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 24px; letter-spacing: .5px; text-transform: uppercase; color: #F5E11A; } .emp-faq__a { margin: 0; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: #CDC7AB; } .emp-faq__a p { margin: 0 0 10px; } .emp-faq__a p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- 10. Liens dans le corps de texte ------------------------------------------------------------------------- */ .elementor-widget-text-editor a { color: #F5E11A; text-decoration: none; border-bottom: 1px solid rgba(245, 225, 26, .35); transition: border-color .2s; } .elementor-widget-text-editor a:hover { border-bottom-color: #F5E11A; }