.elementor-kit-8{--e-global-color-primary:#E6F306;--e-global-color-secondary:#38E56C;--e-global-color-text:#FFFFFF;--e-global-color-accent:#2E7CF6;--e-global-color-qgblack:#0A0A0B;--e-global-color-qgink:#0F0F12;--e-global-color-qgcharcoal:#16161A;--e-global-color-qgsurface:#1D1D22;--e-global-color-qgsurface2:#26262D;--e-global-color-qggrey300:#C7C7CE;--e-global-color-qggrey400:#A1A1AB;--e-global-color-qggrey500:#71717C;--e-global-color-qglimebr:#F2FF3D;--e-global-color-qglimedp:#C4CF00;--e-global-color-qgred:#FF3D57;--e-global-color-qgamber:#F5A524;--e-global-color-qgborder:#2C2C34;--e-global-color-qgborders:#3B3B45;--e-global-typography-primary-font-family:"Chakra Petch";--e-global-typography-primary-font-size:44px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.08em;--e-global-typography-primary-letter-spacing:-0.01em;--e-global-typography-secondary-font-family:"Chakra Petch";--e-global-typography-secondary-font-size:22px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-secondary-letter-spacing:0em;--e-global-typography-text-font-family:"Barlow";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Chakra Petch";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0.04em;--e-global-typography-qgh1-font-family:"Chakra Petch";--e-global-typography-qgh1-font-size:72px;--e-global-typography-qgh1-font-weight:700;--e-global-typography-qgh1-text-transform:uppercase;--e-global-typography-qgh1-line-height:1.02em;--e-global-typography-qgh1-letter-spacing:-0.02em;--e-global-typography-qgh2-font-family:"Chakra Petch";--e-global-typography-qgh2-font-size:44px;--e-global-typography-qgh2-font-weight:700;--e-global-typography-qgh2-text-transform:uppercase;--e-global-typography-qgh2-line-height:1.08em;--e-global-typography-qgh2-letter-spacing:-0.01em;--e-global-typography-qgh3-font-family:"Chakra Petch";--e-global-typography-qgh3-font-size:24px;--e-global-typography-qgh3-font-weight:600;--e-global-typography-qgh3-text-transform:uppercase;--e-global-typography-qgh3-line-height:1.3em;--e-global-typography-qgh3-letter-spacing:0.01em;--e-global-typography-qglead-font-family:"Chakra Petch";--e-global-typography-qglead-font-size:21px;--e-global-typography-qglead-font-weight:600;--e-global-typography-qglead-text-transform:none;--e-global-typography-qglead-line-height:1.3em;--e-global-typography-qglead-letter-spacing:0em;--e-global-typography-qgsmall-font-family:"Barlow";--e-global-typography-qgsmall-font-size:15px;--e-global-typography-qgsmall-font-weight:400;--e-global-typography-qgsmall-text-transform:none;--e-global-typography-qgsmall-line-height:1.6em;--e-global-typography-qgsmall-letter-spacing:0em;--e-global-typography-qgeyebrow-font-family:"Chakra Petch";--e-global-typography-qgeyebrow-font-size:12px;--e-global-typography-qgeyebrow-font-weight:600;--e-global-typography-qgeyebrow-text-transform:uppercase;--e-global-typography-qgeyebrow-line-height:1.2em;--e-global-typography-qgeyebrow-letter-spacing:0.18em;--e-global-typography-qgnav-font-family:"Chakra Petch";--e-global-typography-qgnav-font-size:13px;--e-global-typography-qgnav-font-weight:600;--e-global-typography-qgnav-text-transform:uppercase;--e-global-typography-qgnav-line-height:1.2em;--e-global-typography-qgnav-letter-spacing:0.14em;background-color:#0F0F12;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:37px;--e-global-typography-secondary-font-size:19px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:14px;--e-global-typography-qgh1-font-size:61px;--e-global-typography-qgh2-font-size:37px;--e-global-typography-qgh3-font-size:20px;--e-global-typography-qglead-font-size:18px;--e-global-typography-qgsmall-font-size:13px;--e-global-typography-qgeyebrow-font-size:10px;--e-global-typography-qgnav-font-size:11px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:32px;--e-global-typography-secondary-font-size:16px;--e-global-typography-text-font-size:12px;--e-global-typography-accent-font-size:12px;--e-global-typography-qgh1-font-size:52px;--e-global-typography-qgh2-font-size:32px;--e-global-typography-qgh3-font-size:17px;--e-global-typography-qglead-font-size:15px;--e-global-typography-qgsmall-font-size:11px;--e-global-typography-qgeyebrow-font-size:9px;--e-global-typography-qgnav-font-size:9px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== QUIZ GAME Nantes brand stylesheet ===== Source of truth: wp-content/themes/hello-theme-child-master/assets/css/quizgame.css ============================================ */ /* ========================================================================== QUIZ GAME Nantes — brand component stylesheet (part 1/2) Scoped to .qg-* classes applied from Elementor. Safe to load site-wide. Source of truth: "Quiz Game Nantes homepage" design folder. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root{ --qg-black:#0A0A0B; --qg-ink:#0F0F12; --qg-charcoal:#16161A; --qg-surface:#1D1D22; --qg-surface-2:#26262D; --qg-surface-3:#31313A; --qg-white:#FFFFFF; --qg-off-white:#F4F4F3; --qg-grey-300:#C7C7CE; --qg-grey-400:#A1A1AB; --qg-grey-500:#71717C; --qg-grey-600:#4B4B55; --qg-lime:#E6F306; --qg-lime-bright:#F2FF3D; --qg-lime-deep:#C4CF00; --qg-green:#38E56C; --qg-blue:#2E7CF6; --qg-red:#FF3D57; --qg-warning:#F5A524; --qg-border:#2C2C34; --qg-border-strong:#3B3B45; --qg-border-lime:rgba(230,243,6,.55); --qg-shadow-sm:0 1px 2px rgba(0,0,0,.5); --qg-shadow-card:0 2px 6px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.4); --qg-shadow-raised:0 8px 20px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.45); --qg-shadow-pop:0 20px 60px rgba(0,0,0,.6); --qg-glow-lime:0 0 20px rgba(230,243,6,.45),0 0 48px rgba(230,243,6,.22); --qg-glow-lime-soft:0 0 16px rgba(230,243,6,.30); --qg-glow-green:0 0 20px rgba(56,229,108,.45),0 0 48px rgba(56,229,108,.20); --qg-glow-blue:0 0 20px rgba(46,124,246,.45),0 0 48px rgba(46,124,246,.20); --qg-glow-red:0 0 20px rgba(255,61,87,.45),0 0 48px rgba(255,61,87,.20); --qg-glow-cta-hover:0 0 0 1px var(--qg-lime-deep),0 0 24px rgba(230,243,6,.5),0 10px 28px rgba(0,0,0,.5); --qg-ring:0 0 0 3px rgba(230,243,6,.55); --qg-scrim-bottom:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.55) 55%,rgba(10,10,11,.92) 100%); --qg-blur-glass:saturate(140%) blur(14px); --qg-ease-out:cubic-bezier(.22,.61,.36,1); --qg-ease-in-out:cubic-bezier(.65,.05,.36,1); --qg-ease-pop:cubic-bezier(.34,1.56,.64,1); --qg-dur-fast:120ms; --qg-dur:200ms; --qg-dur-slow:360ms; --qg-radius-sm:6px; --qg-radius-md:10px; --qg-radius-lg:16px; --qg-radius-pill:999px; --qg-chamfer:12px; --qg-font-display:"Chakra Petch","Barlow",system-ui,sans-serif; --qg-font-body:"Barlow",system-ui,-apple-system,sans-serif; } /* -------------------------------------------------------------------------- 2. KEYFRAMES -------------------------------------------------------------------------- */ @keyframes qgStreak{ 0%{transform:translateX(-30%) skewX(-18deg);opacity:0} 40%{opacity:.55} 100%{transform:translateX(130%) skewX(-18deg);opacity:0} } @keyframes qgPulse{ 0%,100%{opacity:.55} 50%{opacity:1} } /* -------------------------------------------------------------------------- 3. BASE / SELECTION / FOCUS -------------------------------------------------------------------------- */ body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:var(--qg-lime);color:var(--qg-black)} .qg-page a:focus-visible, .qg-page button:focus-visible, .qg-page input:focus-visible, .qg-page textarea:focus-visible, .qg-page select:focus-visible{ outline:none; box-shadow:var(--qg-ring); border-radius:var(--qg-radius-sm); } .qg-chamfer{ clip-path:polygon(var(--qg-chamfer) 0,100% 0,100% calc(100% - var(--qg-chamfer)), calc(100% - var(--qg-chamfer)) 100%,0 100%,0 var(--qg-chamfer)); } /* -------------------------------------------------------------------------- 4. BUTTONS -------------------------------------------------------------------------- */ .qg-btn-primary .elementor-button, .qg-btn-secondary .elementor-button, .qg-btn-ghost .elementor-button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--qg-font-display); font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; border-radius:0; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); text-decoration:none; user-select:none; transition:background var(--qg-dur) var(--qg-ease-out), color var(--qg-dur) var(--qg-ease-out), box-shadow var(--qg-dur) var(--qg-ease-out), transform var(--qg-dur-fast) var(--qg-ease-out), border-color var(--qg-dur) var(--qg-ease-out); } .qg-btn-sm .elementor-button{height:42px;padding:0 18px;font-size:.9rem} .qg-btn-md .elementor-button{height:52px;padding:0 26px;font-size:1rem} .qg-btn-lg .elementor-button{height:60px;padding:0 36px;font-size:1.12rem} .qg-btn-primary .elementor-button{ background-color:var(--qg-lime); color:var(--qg-black); box-shadow:var(--qg-glow-lime-soft); } .qg-btn-primary .elementor-button:hover, .qg-btn-primary .elementor-button:focus{ background-color:var(--qg-lime-bright); color:var(--qg-black); box-shadow:var(--qg-glow-cta-hover); transform:translateY(-1px); } .qg-btn-primary .elementor-button:active{transform:translateY(1px) scale(.985)} .qg-btn-secondary .elementor-button{ background-color:transparent; color:var(--qg-lime); border-color:rgba(230,243,6,.55); box-shadow:none; } .qg-btn-secondary .elementor-button:hover, .qg-btn-secondary .elementor-button:focus{ background-color:rgba(230,243,6,.10); color:var(--qg-lime); border-color:var(--qg-lime); box-shadow:var(--qg-glow-lime-soft); transform:translateY(-1px); } .qg-btn-secondary .elementor-button:active{transform:translateY(1px) scale(.985)} .qg-btn-ghost .elementor-button{ background-color:transparent; color:var(--qg-white); border-color:var(--qg-border-strong); } .qg-btn-ghost .elementor-button:hover, .qg-btn-ghost .elementor-button:focus{ background-color:var(--qg-surface-2); color:var(--qg-white); transform:translateY(-1px); } .qg-btn-ghost .elementor-button:active{transform:translateY(1px) scale(.985)} .qg-btn-block, .qg-btn-block .elementor-button{width:100%} .qg-btn-glow .elementor-button{box-shadow:var(--qg-glow-lime)} /* Fill-up hover: the outlined button fills with lime from the bottom. Applied as an extra class on the Button widget — no wrapper element needed. */ .qg-fill .elementor-button{position:relative;overflow:hidden;isolation:isolate} .qg-fill .elementor-button::before{ content:""; position:absolute; inset:0; background:var(--qg-lime); transform:scaleY(0); transform-origin:bottom; transition:transform 280ms var(--qg-ease-out); z-index:0; pointer-events:none; } .qg-fill .elementor-button:hover::before{transform:scaleY(1)} .qg-fill .elementor-button .elementor-button-content-wrapper, .qg-fill .elementor-button .elementor-button-text{position:relative;z-index:1} .qg-fill .elementor-button:hover{ color:var(--qg-black)!important; background-color:transparent!important; border-color:var(--qg-lime)!important; box-shadow:var(--qg-glow-lime-soft); } /* -------------------------------------------------------------------------- 5. EYEBROW / LABELS -------------------------------------------------------------------------- */ .qg-eyebrow, .qg-eyebrow .elementor-heading-title{ font-family:var(--qg-font-display); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--qg-lime); } .qg-eyebrow-live .elementor-heading-title::before{ content:""; display:inline-block; width:8px;height:8px; margin-right:10px; vertical-align:middle; border-radius:50%; background:var(--qg-green); box-shadow:var(--qg-glow-green); animation:qgPulse 2.2s infinite; } .qg-hl{color:var(--qg-lime);text-shadow:0 0 28px rgba(230,243,6,.45)} /* Layout helpers */ .qg-maxch{max-width:58ch} .qg-maxch-sm{max-width:52ch} .qg-push-right{margin-left:auto!important} .qg-relative{position:relative} /* -------------------------------------------------------------------------- 6. CARD HOVER + NEON BORDER -------------------------------------------------------------------------- */ .qg-card-hover{ transition:transform var(--qg-dur) var(--qg-ease-out), box-shadow var(--qg-dur) var(--qg-ease-out), border-color var(--qg-dur) var(--qg-ease-out); box-shadow:var(--qg-shadow-card); } .qg-card-hover:hover{ transform:translateY(-4px); box-shadow:var(--qg-shadow-raised); } .qg-neon-border{border:1px solid var(--qg-border-lime)!important;box-shadow:var(--qg-glow-lime-soft)} .qg-tone-lime.qg-card-hover:hover {border-color:rgba(230,243,6,.5)!important} .qg-tone-green.qg-card-hover:hover {border-color:rgba(56,229,108,.5)!important} .qg-tone-blue.qg-card-hover:hover {border-color:rgba(46,124,246,.5)!important} .qg-tone-red.qg-card-hover:hover {border-color:rgba(255,61,87,.5)!important} .qg-tone-amber.qg-card-hover:hover {border-color:rgba(245,165,36,.5)!important} .qg-tone-grey.qg-card-hover:hover {border-color:rgba(199,199,206,.45)!important} /* -------------------------------------------------------------------------- 7. ICON TILES -------------------------------------------------------------------------- */ .qg-icon-tile .elementor-icon{ width:52px;height:52px; display:inline-flex;align-items:center;justify-content:center; border-radius:var(--qg-radius-md); border:1px solid rgba(230,243,6,.35); background:rgba(230,243,6,.10); color:var(--qg-lime); transition:box-shadow var(--qg-dur) var(--qg-ease-out); } .qg-icon-tile-sm .elementor-icon{width:46px;height:46px;background:rgba(230,243,6,.08);border-color:rgba(230,243,6,.3)} .qg-icon-tile-xs .elementor-icon{width:44px;height:44px} .qg-tone-lime .elementor-icon{color:var(--qg-lime); background:rgba(230,243,6,.10); border-color:rgba(230,243,6,.35)} .qg-tone-green .elementor-icon{color:var(--qg-green); background:rgba(56,229,108,.10);border-color:rgba(56,229,108,.35)} .qg-tone-blue .elementor-icon{color:var(--qg-blue); background:rgba(46,124,246,.10);border-color:rgba(46,124,246,.35)} .qg-tone-red .elementor-icon{color:var(--qg-red); background:rgba(255,61,87,.10); border-color:rgba(255,61,87,.35)} .qg-tone-amber .elementor-icon{color:var(--qg-warning);background:rgba(245,165,36,.10);border-color:rgba(245,165,36,.35)} .qg-tone-grey .elementor-icon{color:var(--qg-grey-300);background:rgba(199,199,206,.08);border-color:rgba(199,199,206,.3)} .qg-card-hover.qg-tone-lime:hover .elementor-icon{box-shadow:0 0 18px rgba(230,243,6,.35)} .qg-card-hover.qg-tone-green:hover .elementor-icon{box-shadow:0 0 18px rgba(56,229,108,.35)} .qg-card-hover.qg-tone-blue:hover .elementor-icon{box-shadow:0 0 18px rgba(46,124,246,.35)} .qg-card-hover.qg-tone-red:hover .elementor-icon{box-shadow:0 0 18px rgba(255,61,87,.35)} .qg-card-hover.qg-tone-amber:hover .elementor-icon{box-shadow:0 0 18px rgba(245,165,36,.35)} .qg-icon-inline .elementor-icon{width:auto;height:auto;background:none;border:none;border-radius:0} /* -------------------------------------------------------------------------- 8. CTA ARROW -------------------------------------------------------------------------- */ .qg-cta-arrow .elementor-heading-title{ font-family:var(--qg-font-display); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; } .qg-cta-arrow .elementor-heading-title::after{ content:"2192"; display:inline-block; transition:transform var(--qg-dur) var(--qg-ease-out); } .qg-card-hover:hover .qg-cta-arrow .elementor-heading-title::after{transform:translateX(3px)} .qg-event-card:hover .qg-cta-arrow .elementor-heading-title::after{transform:translateX(4px)} /* -------------------------------------------------------------------------- 9. HERO DECOR + SPOTLIGHTS -------------------------------------------------------------------------- */ .qg-hero{position:relative;overflow:hidden} .qg-hero::after{ content:""; position:absolute; top:0;bottom:0;left:0; width:22%; background:linear-gradient(90deg,transparent,rgba(230,243,6,.10),transparent); animation:qgStreak 7s var(--qg-ease-in-out) infinite; pointer-events:none; z-index:1; } .qg-spotlight-hero::before{ content:""; position:absolute;inset:0; background:radial-gradient(45% 55% at 12% 20%,rgba(230,243,6,.16) 0%,transparent 70%), radial-gradient(50% 60% at 88% 85%,rgba(56,229,108,.20) 0%,transparent 70%); pointer-events:none;z-index:1; } .qg-spotlight-tl::before{ content:""; position:absolute;inset:0; background:radial-gradient(50% 50% at 15% 0%,rgba(230,243,6,.09) 0%,transparent 70%); pointer-events:none;z-index:0; } .qg-spotlight-br::before{ content:""; position:absolute;inset:0; background:radial-gradient(55% 60% at 85% 100%,rgba(46,124,246,.12) 0%,transparent 70%); pointer-events:none;z-index:0; } .qg-spotlight-cta::before{ content:""; position:absolute;inset:0; background:radial-gradient(60% 80% at 50% 0%,rgba(230,243,6,.18) 0%,transparent 70%), radial-gradient(50% 70% at 20% 100%,rgba(56,229,108,.14) 0%,transparent 70%); pointer-events:none;z-index:0; } .qg-spotlight-tl,.qg-spotlight-br,.qg-spotlight-cta,.qg-spotlight-hero{position:relative;overflow:hidden} .qg-hero > .e-con-inner, .qg-spotlight-tl > .e-con-inner, .qg-spotlight-br > .e-con-inner, .qg-spotlight-cta > .e-con-inner, .qg-spotlight-hero > .e-con-inner{position:relative;z-index:2} /* -------------------------------------------------------------------------- 10. SCOREBOARD PANEL -------------------------------------------------------------------------- */ .qg-scoreboard{ background-color:rgba(22,22,26,.82); -webkit-backdrop-filter:var(--qg-blur-glass); backdrop-filter:var(--qg-blur-glass); border:1px solid rgba(230,243,6,.22)!important; border-radius:var(--qg-radius-lg); box-shadow:var(--qg-shadow-raised),var(--qg-glow-lime-soft); } .qg-score-row{ background-color:var(--qg-surface); border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-sm); } .qg-score-row--lead{border-color:rgba(230,243,6,.35)!important} .qg-score-label .elementor-heading-title{ font-family:var(--qg-font-display);font-weight:600; letter-spacing:.06em;text-transform:uppercase; } .qg-score-value .elementor-heading-title{font-family:var(--qg-font-display);font-weight:700;font-size:1.15rem} .qg-buzzer{display:inline-block;border-radius:50%} .qg-buzzer-lg{width:34px;height:34px} .qg-buzzer-sm{width:16px;height:16px} .qg-buzzer-green{background:var(--qg-green);box-shadow:var(--qg-glow-green)} .qg-buzzer-blue {background:var(--qg-blue); box-shadow:var(--qg-glow-blue)} .qg-buzzer-red {background:var(--qg-red); box-shadow:var(--qg-glow-red)} .qg-buzzer-lime {background:var(--qg-lime); box-shadow:var(--qg-glow-lime)} /* -------------------------------------------------------------------------- 11. VIDEO PANEL -------------------------------------------------------------------------- */ .qg-video-panel{ border:1px solid rgba(56,229,108,.35)!important; border-radius:var(--qg-radius-lg); box-shadow:var(--qg-glow-green),var(--qg-shadow-raised); overflow:hidden; } .qg-live-tag .elementor-heading-title{ display:inline-block; padding:6px 12px; background:rgba(10,10,11,.75); border:1px solid rgba(56,229,108,.5); border-radius:var(--qg-radius-pill); font-family:var(--qg-font-display); font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--qg-green); } /* -------------------------------------------------------------------------- 12. FEATURE CHIPS -------------------------------------------------------------------------- */ .qg-chip{ background-color:var(--qg-surface); border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-sm); } .qg-chip .elementor-icon-box-title, .qg-chip .elementor-icon-box-title span{ font-family:var(--qg-font-display); font-weight:600;font-size:.82rem; letter-spacing:.06em;text-transform:uppercase; color:var(--qg-white); } /* -------------------------------------------------------------------------- 13. PRICING -------------------------------------------------------------------------- */ .qg-price-card{ background-color:var(--qg-surface); border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-lg); } .qg-price-card--featured{ background-image:linear-gradient(180deg,rgba(230,243,6,.07),var(--qg-surface)); border:1px solid var(--qg-lime)!important; box-shadow:var(--qg-glow-lime-soft),var(--qg-shadow-raised); } .qg-price-amount .elementor-heading-title{font-family:var(--qg-font-display);font-weight:700;font-size:3.4rem;line-height:1} .qg-ribbon .elementor-heading-title{ display:inline-block; padding:5px 11px; font-family:var(--qg-font-display);font-weight:700;font-size:.66rem; letter-spacing:.12em;text-transform:uppercase; color:var(--qg-black); background:var(--qg-lime); border-radius:var(--qg-radius-pill); } /* -------------------------------------------------------------------------- 14. EVENT CARDS (photo + scrim + neon underline) -------------------------------------------------------------------------- */ .qg-event-card{ position:relative; overflow:hidden; border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-lg); box-shadow:var(--qg-shadow-card); transition:transform var(--qg-dur) var(--qg-ease-out), box-shadow var(--qg-dur) var(--qg-ease-out), border-color var(--qg-dur) var(--qg-ease-out), background-size var(--qg-dur-slow) var(--qg-ease-out); background-size:cover; background-position:center; } .qg-event-card:hover{ transform:translateY(-4px); border-color:var(--qg-border-strong)!important; box-shadow:var(--qg-shadow-raised); background-size:auto 112%; } .qg-event-card::before{ content:""; position:absolute;inset:0; background:var(--qg-scrim-bottom); pointer-events:none;z-index:1; } .qg-event-card::after{ content:""; position:absolute;left:0;right:0;bottom:0; height:3px;opacity:0; transition:opacity var(--qg-dur) var(--qg-ease-out); pointer-events:none;z-index:3; } .qg-event-card:hover::after{opacity:1} .qg-event-card.qg-tone-lime::after {background:var(--qg-lime); box-shadow:0 0 16px var(--qg-lime)} .qg-event-card.qg-tone-green::after{background:var(--qg-green);box-shadow:0 0 16px var(--qg-green)} .qg-event-card.qg-tone-blue::after {background:var(--qg-blue); box-shadow:0 0 16px var(--qg-blue)} .qg-event-card.qg-tone-red::after {background:var(--qg-red); box-shadow:0 0 16px var(--qg-red)} .qg-event-card > .e-con-inner{position:relative;z-index:2} .qg-tag .elementor-heading-title{ display:inline-block; padding:6px 12px; font-family:var(--qg-font-display);font-weight:600;font-size:.72rem; letter-spacing:.12em;text-transform:uppercase; color:var(--qg-black); border-radius:var(--qg-radius-pill); } .qg-tag-lime .elementor-heading-title{background:var(--qg-lime)} .qg-tag-green .elementor-heading-title{background:var(--qg-green)} .qg-tag-blue .elementor-heading-title{background:var(--qg-blue)} .qg-tag-red .elementor-heading-title{background:var(--qg-red)} /* -------------------------------------------------------------------------- 15. STEP CARDS -------------------------------------------------------------------------- */ .qg-step-card{ background-color:var(--qg-surface); border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-lg); } .qg-step-num .elementor-heading-title{ font-family:var(--qg-font-display);font-weight:700;font-size:2.6rem;line-height:1; color:var(--qg-lime); text-shadow:var(--qg-glow-lime-soft); } /* -------------------------------------------------------------------------- 16. GIFT CARD MOCKUP -------------------------------------------------------------------------- */ .qg-giftband{ position:relative; overflow:hidden; border:1px solid rgba(230,243,6,.28)!important; border-radius:var(--qg-radius-lg); background-image:linear-gradient(120deg,rgba(29,29,34,.95) 0%,rgba(15,15,18,.95) 60%), radial-gradient(60% 90% at 100% 0%,rgba(230,243,6,.22),transparent 70%); box-shadow:var(--qg-glow-lime-soft),var(--qg-shadow-raised); } .qg-giftcard{ position:relative; overflow:hidden; background-image:linear-gradient(150deg,#2E2E36 0%,#1A1A1F 42%,#0F0F12 100%); border:1px solid rgba(230,243,6,.32)!important; border-radius:var(--qg-radius-md); box-shadow:var(--qg-shadow-pop),var(--qg-glow-lime-soft); clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); } .qg-giftcard::before{ content:""; position:absolute;inset:0; background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 46%,transparent 58%); pointer-events:none;z-index:1; } .qg-giftcard::after{ content:""; position:absolute;right:-40px;bottom:-60px; width:180px;height:180px;border-radius:50%; background:radial-gradient(circle,rgba(230,243,6,.16),transparent 68%); pointer-events:none;z-index:1; } .qg-giftcard > .e-con-inner{position:relative;z-index:2} .qg-gift-title .elementor-heading-title{ font-family:var(--qg-font-display);font-weight:700;font-size:1.5rem;line-height:1; text-transform:uppercase;color:var(--qg-lime); text-shadow:0 0 22px rgba(230,243,6,.35); } .qg-gift-dash{ height:1px;width:100%; background:repeating-linear-gradient(90deg,rgba(230,243,6,.45) 0 6px,transparent 6px 12px); } .qg-gift-pill .elementor-heading-title{ display:inline-block; padding:5px 10px; font-family:var(--qg-font-display);font-weight:600;font-size:.62rem; letter-spacing:.2em;text-transform:uppercase; color:var(--qg-grey-400); border:1px solid var(--qg-border-strong); border-radius:var(--qg-radius-pill); white-space:nowrap; } /* -------------------------------------------------------------------------- 17. FAQ ACCORDION -------------------------------------------------------------------------- */ .qg-faq .e-n-accordion-item{ background-color:var(--qg-surface); border:1px solid var(--qg-border); border-radius:var(--qg-radius-md); overflow:hidden; margin-bottom:10px; transition:border-color var(--qg-dur) var(--qg-ease-out); } .qg-faq .e-n-accordion-item[open]{border-color:rgba(230,243,6,.45)} .qg-faq .e-n-accordion-item-title{ font-family:var(--qg-font-display)!important; font-weight:600!important; font-size:1.02rem!important; text-transform:uppercase; letter-spacing:.01em; color:var(--qg-white); padding:18px 20px!important; cursor:pointer; } .qg-faq .e-n-accordion-item-title-icon{ width:30px;height:30px;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; border-radius:50%; background:var(--qg-surface-2); color:var(--qg-lime); transition:background var(--qg-dur) var(--qg-ease-out), color var(--qg-dur) var(--qg-ease-out), transform var(--qg-dur) var(--qg-ease-out); } .qg-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon{ background:var(--qg-lime); color:var(--qg-black); } .qg-faq .e-n-accordion-item > .e-con{ padding:0 20px 20px!important; color:var(--qg-grey-400); font-size:.9375rem; line-height:1.65; } /* -------------------------------------------------------------------------- 18. CONTACT BLOCK -------------------------------------------------------------------------- */ .qg-contact-row{border-bottom:1px solid var(--qg-border)!important} .qg-contact-row--last{border-bottom:none!important} .qg-contact-label .elementor-heading-title{ font-family:var(--qg-font-display);font-weight:600;font-size:.74rem; letter-spacing:.14em;text-transform:uppercase;color:var(--qg-grey-500); } .qg-hours-panel{ background-color:var(--qg-surface); border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-md); } .qg-hours-title .elementor-heading-title{ font-family:var(--qg-font-display);font-weight:700;font-size:.78rem; letter-spacing:.14em;text-transform:uppercase;color:var(--qg-lime); } .qg-hours-row{display:flex;justify-content:space-between;font-size:.9375rem;color:var(--qg-grey-400)} .qg-hours-row strong{font-weight:600;color:var(--qg-white)} .qg-hours-row.is-closed,.qg-hours-row.is-closed strong{color:var(--qg-grey-500)} /* -------------------------------------------------------------------------- 19. FORMS (Elementor Pro Form widget) -------------------------------------------------------------------------- */ .qg-form .elementor-field-group > label{ font-family:var(--qg-font-display);font-weight:600;font-size:.78rem; letter-spacing:.14em;text-transform:uppercase;color:var(--qg-grey-300); margin-bottom:8px; } .qg-form .elementor-field-textual{ background-color:var(--qg-surface-2); border:1px solid var(--qg-border); border-radius:var(--qg-radius-sm); color:var(--qg-white); font-family:var(--qg-font-body); font-size:1.0625rem; min-height:52px; padding:0 14px; } .qg-form textarea.elementor-field-textual{padding:12px 14px;min-height:130px;line-height:1.65} .qg-form .elementor-field-textual::placeholder{color:var(--qg-grey-500)} .qg-form .elementor-field-textual:focus{ outline:none; border-color:var(--qg-border-lime); box-shadow:var(--qg-ring); } .qg-form .elementor-button[type="submit"]{ width:100%; min-height:52px; background-color:var(--qg-lime); color:var(--qg-black); font-family:var(--qg-font-display);font-weight:700;font-size:1rem; letter-spacing:.04em;text-transform:uppercase; border:1px solid transparent; border-radius:0; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); box-shadow:var(--qg-glow-lime-soft); transition:background var(--qg-dur) var(--qg-ease-out), box-shadow var(--qg-dur) var(--qg-ease-out), transform var(--qg-dur-fast) var(--qg-ease-out); } .qg-form .elementor-button[type="submit"]:hover{ background-color:var(--qg-lime-bright); box-shadow:var(--qg-glow-cta-hover); transform:translateY(-1px); } .qg-form .elementor-button[type="submit"]:active{transform:translateY(1px) scale(.985)} /* -------------------------------------------------------------------------- 20. HEADER -------------------------------------------------------------------------- */ .qg-header{ background-color:rgba(15,15,18,.9)!important; -webkit-backdrop-filter:var(--qg-blur-glass); backdrop-filter:var(--qg-blur-glass); border-bottom:1px solid rgba(255,255,255,.08)!important; } .qg-nav .elementor-item{ font-family:var(--qg-font-display)!important; font-weight:600!important; font-size:.82rem!important; letter-spacing:.14em!important; text-transform:uppercase; color:var(--qg-grey-300); padding:8px 2px!important; border-bottom:2px solid transparent; transition:color var(--qg-dur) var(--qg-ease-out),border-color var(--qg-dur) var(--qg-ease-out); } .qg-nav .elementor-item:hover, .qg-nav .elementor-item:focus{color:var(--qg-lime);border-bottom-color:rgba(230,243,6,.6)} .qg-nav .elementor-item.elementor-item-active, .qg-nav .elementor-item.highlighted{color:var(--qg-lime);border-bottom-color:var(--qg-lime)} .qg-nav .elementor-nav-menu--dropdown{ background-color:rgba(10,10,11,.97)!important; -webkit-backdrop-filter:var(--qg-blur-glass); backdrop-filter:var(--qg-blur-glass); } .qg-nav .elementor-nav-menu--dropdown a.elementor-item{ font-family:var(--qg-font-display)!important; font-weight:700!important; font-size:1.35rem!important; letter-spacing:.02em!important; text-transform:uppercase; color:var(--qg-white); padding:14px 20px!important; border-bottom:1px solid var(--qg-border); } .qg-nav .elementor-nav-menu--dropdown a.elementor-item:hover, .qg-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{color:var(--qg-lime)} .qg-nav .elementor-menu-toggle{ width:44px;height:44px; background-color:var(--qg-lime)!important; color:var(--qg-black)!important; border-radius:var(--qg-radius-md); } .qg-icon-btn .elementor-icon{ width:44px;height:44px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--qg-border-strong); border-radius:var(--qg-radius-md); color:var(--qg-lime); transition:border-color var(--qg-dur) var(--qg-ease-out),color var(--qg-dur) var(--qg-ease-out); } .qg-icon-btn:hover .elementor-icon{border-color:var(--qg-border-lime)} /* -------------------------------------------------------------------------- 21. FOOTER -------------------------------------------------------------------------- */ .qg-footer-heading .elementor-heading-title{ font-family:var(--qg-font-display);font-weight:700;font-size:.8rem; letter-spacing:.16em;text-transform:uppercase;color:var(--qg-white); } .qg-footer-links .elementor-icon-list-item a{ color:var(--qg-grey-300); font-size:.9375rem; transition:color var(--qg-dur) var(--qg-ease-out); } .qg-footer-links .elementor-icon-list-item a:hover{color:var(--qg-lime)} .qg-social .elementor-social-icon{ width:40px;height:40px; background-color:transparent!important; border:1px solid var(--qg-border); border-radius:var(--qg-radius-sm); color:var(--qg-grey-300)!important; transition:color var(--qg-dur) var(--qg-ease-out),border-color var(--qg-dur) var(--qg-ease-out); } .qg-social .elementor-social-icon:hover{ color:var(--qg-lime)!important; border-color:var(--qg-border-lime); } .qg-legal .elementor-icon-list-item a{color:var(--qg-grey-500);font-size:.9375rem} .qg-legal .elementor-icon-list-item a:hover{color:var(--qg-lime)} /* -------------------------------------------------------------------------- 22. STICKY MOBILE BOOKING BAR -------------------------------------------------------------------------- */ .qg-sticky-bar{ position:fixed!important; left:0;right:0;bottom:0; z-index:90; background-color:rgba(15,15,18,.82)!important; -webkit-backdrop-filter:var(--qg-blur-glass); backdrop-filter:var(--qg-blur-glass); border-top:1px solid var(--qg-border-strong)!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important; } @media (min-width:961px){ .qg-sticky-bar{display:none!important} } @media (max-width:960px){ body{padding-bottom:78px} } /* -------------------------------------------------------------------------- 23. RESPONSIVE REFINEMENTS -------------------------------------------------------------------------- */ @media (max-width:1024px){ .qg-price-amount .elementor-heading-title{font-size:3rem} .qg-step-num .elementor-heading-title{font-size:2.2rem} } @media (max-width:767px){ .qg-btn-lg .elementor-button, .qg-btn-md .elementor-button{width:100%;min-height:52px;height:auto;font-size:1rem;padding:14px 18px;white-space:normal;text-align:center;line-height:1.15} .qg-btn-block{width:100%} .qg-fill{width:100%;display:block} .qg-price-amount .elementor-heading-title{font-size:2.8rem} .qg-gift-title .elementor-heading-title{font-size:1.25rem} .qg-hero::after{display:none} .qg-event-card{min-height:300px} .qg-faq .e-n-accordion-item-title{font-size:.95rem!important;padding:16px!important} .qg-scoreboard{width:100%} } /* -------------------------------------------------------------------------- 24. REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .qg-hero::after, .qg-eyebrow-live .elementor-heading-title::before{animation:none} .qg-fill::before, .qg-card-hover, .qg-event-card, .qg-btn-primary .elementor-button, .qg-btn-secondary .elementor-button, .qg-btn-ghost .elementor-button{transition-duration:.001ms!important} } /* -------------------------------------------------------------------------- 25. HELPERS + CLASSIC ACCORDION + HEADER/STICKY-BAR REFINEMENTS -------------------------------------------------------------------------- */ .qg-push-top{margin-top:auto!important} /* Visibility helpers (desktop ≥ 1025px is the design's "desktop") */ @media (max-width:1024px){ .qg-hide-mobile{display:none!important} } @media (min-width:1025px){ .qg-only-mobile{display:none!important} } /* Header: on tablet/mobile put the CTA cluster before the burger, as in the design */ @media (max-width:1024px){ .qg-header .qg-nav{order:3;flex-grow:0!important;width:auto!important} .qg-header .qg-header-cta{order:2;margin-left:auto} } /* Classic Elementor accordion — FAQ skin */ .qg-faq .elementor-accordion{display:flex;flex-direction:column;gap:10px} .qg-faq .elementor-accordion-item{ background-color:var(--qg-surface); border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-md); overflow:hidden; transition:border-color var(--qg-dur) var(--qg-ease-out); } .qg-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active){border-color:rgba(230,243,6,.45)!important} .qg-faq .elementor-tab-title{ display:flex;align-items:center;gap:16px; padding:18px 20px!important; background:transparent!important; border:none!important; font-family:var(--qg-font-display)!important; font-weight:600!important; font-size:1.02rem!important; text-transform:uppercase; letter-spacing:.01em; color:var(--qg-white)!important; cursor:pointer; } .qg-faq .elementor-tab-title a, .qg-faq .elementor-tab-title .elementor-accordion-title{flex:1;color:inherit!important;text-decoration:none} .qg-faq .elementor-accordion-icon{ order:2; width:30px;height:30px;flex:0 0 auto; display:inline-flex!important;align-items:center;justify-content:center; border-radius:50%; background:var(--qg-surface-2); color:var(--qg-lime)!important; font-size:13px; transition:background var(--qg-dur) var(--qg-ease-out),color var(--qg-dur) var(--qg-ease-out); } .qg-faq .elementor-tab-title.elementor-active .elementor-accordion-icon{ background:var(--qg-lime); color:var(--qg-black)!important; } .qg-faq .elementor-accordion-icon svg{width:13px;height:13px} .qg-faq .elementor-tab-content{ padding:0 20px 20px!important; background:transparent!important; border:none!important; color:var(--qg-grey-400); font-family:var(--qg-font-body); font-size:.9375rem; line-height:1.65; } .qg-faq .elementor-tab-content p{margin:0} /* Sticky mobile booking bar internals */ .qg-sb-phone .elementor-icon{ width:52px;height:52px; display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(230,243,6,.5); border-radius:var(--qg-radius-md); color:var(--qg-lime); } .qg-sb-book .elementor-button{ width:100%; height:52px; min-height:52px; padding:0 18px; font-size:1.02rem; } /* Contact rows: icon-box link colour should not turn the value lime */ .qg-contact-row a, .qg-contact-row .elementor-icon-box-description{color:inherit;text-decoration:none} /* Icon-list links inherit the configured text colour rather than the theme link colour */ .qg-footer-links .elementor-icon-list-text, .qg-footer-links .elementor-icon-list-item > a{text-decoration:none} /* Hours rows */ .qg-hours-panel .elementor-widget-text-editor p{margin:0} /* Event card links should not tint the inner text */ .qg-event-card a{text-decoration:none} /* -------------------------------------------------------------------------- 26. SPECIFICITY LAYER Elementor prints its per-page stylesheet after the theme stylesheet, so the brand rules below are re-declared with the widget/element class chained in to win on specificity rather than on source order. -------------------------------------------------------------------------- */ /* ---- Buttons ---- */ .elementor-widget.qg-btn-primary .elementor-button{ background-color:var(--qg-lime); color:var(--qg-black); border-color:transparent; box-shadow:var(--qg-glow-lime-soft); } .elementor-widget.qg-btn-primary .elementor-button:hover, .elementor-widget.qg-btn-primary .elementor-button:focus{ background-color:var(--qg-lime-bright); color:var(--qg-black); box-shadow:var(--qg-glow-cta-hover); transform:translateY(-1px); } .elementor-widget.qg-btn-primary .elementor-button:active{transform:translateY(1px) scale(.985)} .elementor-widget.qg-btn-secondary .elementor-button{ background-color:transparent; color:var(--qg-lime); border-color:rgba(230,243,6,.55); box-shadow:none; } .elementor-widget.qg-btn-secondary .elementor-button:hover, .elementor-widget.qg-btn-secondary .elementor-button:focus{ background-color:rgba(230,243,6,.10); color:var(--qg-lime); border-color:var(--qg-lime); box-shadow:var(--qg-glow-lime-soft); transform:translateY(-1px); } .elementor-widget.qg-btn-secondary .elementor-button:active{transform:translateY(1px) scale(.985)} .elementor-widget.qg-btn-ghost .elementor-button{ background-color:transparent; color:var(--qg-white); border-color:var(--qg-border-strong); } .elementor-widget.qg-btn-ghost .elementor-button:hover, .elementor-widget.qg-btn-ghost .elementor-button:focus{ background-color:var(--qg-surface-2); color:var(--qg-white); transform:translateY(-1px); } /* Fill-up hover wins over the per-page rules too */ .elementor-widget.qg-fill .elementor-button:hover{ color:var(--qg-black); background-color:transparent; border-color:var(--qg-lime); } /* Form submit */ .elementor-widget.qg-form .elementor-button[type="submit"]{ background-color:var(--qg-lime); color:var(--qg-black); } .elementor-widget.qg-form .elementor-button[type="submit"]:hover{background-color:var(--qg-lime-bright)} /* ---- Containers ---- */ .elementor-element.qg-price-card{ background-color:var(--qg-surface); border:1px solid var(--qg-border); border-radius:var(--qg-radius-lg); } .elementor-element.qg-price-card--featured{ background-image:linear-gradient(180deg,rgba(230,243,6,.07),var(--qg-surface)); border:1px solid var(--qg-lime); box-shadow:var(--qg-glow-lime-soft),var(--qg-shadow-raised); } .elementor-element.qg-step-card{ background-color:var(--qg-surface); border:1px solid var(--qg-border); border-radius:var(--qg-radius-lg); } .elementor-element.qg-card-hover{box-shadow:var(--qg-shadow-card)} .elementor-element.qg-card-hover:hover{box-shadow:var(--qg-shadow-raised);transform:translateY(-4px)} .elementor-element.qg-scoreboard{ background-color:rgba(22,22,26,.82); border:1px solid rgba(230,243,6,.22); border-radius:var(--qg-radius-lg); box-shadow:var(--qg-shadow-raised),var(--qg-glow-lime-soft); } .elementor-element.qg-score-row{ background-color:var(--qg-surface); border:1px solid var(--qg-border); border-radius:var(--qg-radius-sm); } .elementor-element.qg-score-row--lead{border-color:rgba(230,243,6,.35)} .elementor-element.qg-video-panel{ border:1px solid rgba(56,229,108,.35); border-radius:var(--qg-radius-lg); box-shadow:var(--qg-glow-green),var(--qg-shadow-raised); } .elementor-element.qg-giftband{ border:1px solid rgba(230,243,6,.28); border-radius:var(--qg-radius-lg); box-shadow:var(--qg-glow-lime-soft),var(--qg-shadow-raised); } .elementor-element.qg-giftcard{ border:1px solid rgba(230,243,6,.32); border-radius:var(--qg-radius-md); box-shadow:var(--qg-shadow-pop),var(--qg-glow-lime-soft); } .elementor-element.qg-event-card{ border:1px solid var(--qg-border); border-radius:var(--qg-radius-lg); box-shadow:var(--qg-shadow-card); } .elementor-element.qg-event-card:hover{border-color:var(--qg-border-strong);box-shadow:var(--qg-shadow-raised)} .elementor-element.qg-hours-panel{ background-color:var(--qg-surface); border:1px solid var(--qg-border); border-radius:var(--qg-radius-md); } .elementor-element.qg-header{ background-color:rgba(15,15,18,.9); border-bottom:1px solid rgba(255,255,255,.08); } .elementor-element.qg-sticky-bar{ background-color:rgba(15,15,18,.82); border-top:1px solid var(--qg-border-strong); } .elementor-element.qg-buzzer{border-radius:50%} /* ---- Icon tiles / lists ---- */ .elementor-widget.qg-icon-tile .elementor-icon, .elementor-widget.qg-icon-tile .elementor-icon-box-icon .elementor-icon{ width:52px;height:52px; border-radius:var(--qg-radius-md); border:1px solid rgba(230,243,6,.35); background-color:rgba(230,243,6,.10); } .elementor-widget.qg-icon-tile-sm .elementor-icon{width:46px;height:46px} .elementor-widget.qg-icon-tile-xs .elementor-icon{width:44px;height:44px} .elementor-widget.qg-icon-inline .elementor-icon{width:auto;height:auto;background:none;border:none;border-radius:0} .elementor-widget.qg-chip{ background-color:var(--qg-surface); border:1px solid var(--qg-border); border-radius:var(--qg-radius-sm); } /* ---- FAQ ---- */ .elementor-widget.qg-faq .elementor-accordion-item{ background-color:var(--qg-surface); border:1px solid var(--qg-border); border-radius:var(--qg-radius-md); } /* -------------------------------------------------------------------------- 27. BRAND OVERRIDE LAYER Elementor emits its per-page stylesheet after the theme stylesheet and sets colours/borders on the same elements. These declarations are marked !important so the brand surface always wins. Scoped strictly to .qg-* classes, so nothing outside QUIZ GAME components is affected. -------------------------------------------------------------------------- */ /* Buttons */ .qg-btn-primary .elementor-button{ background-color:var(--qg-lime)!important; color:var(--qg-black)!important; border-color:transparent!important; } .qg-btn-primary .elementor-button:hover, .qg-btn-primary .elementor-button:focus{ background-color:var(--qg-lime-bright)!important; color:var(--qg-black)!important; } .qg-btn-secondary .elementor-button{ background-color:transparent!important; color:var(--qg-lime)!important; border-color:rgba(230,243,6,.55)!important; } .qg-btn-secondary .elementor-button:hover, .qg-btn-secondary .elementor-button:focus{ background-color:rgba(230,243,6,.10)!important; color:var(--qg-lime)!important; border-color:var(--qg-lime)!important; } .qg-btn-ghost .elementor-button{ background-color:transparent!important; color:var(--qg-white)!important; border-color:var(--qg-border-strong)!important; } .qg-btn-ghost .elementor-button:hover, .qg-btn-ghost .elementor-button:focus{ background-color:var(--qg-surface-2)!important; color:var(--qg-white)!important; } .qg-fill .elementor-button:hover{ background-color:transparent!important; color:var(--qg-black)!important; border-color:var(--qg-lime)!important; } .qg-form .elementor-button[type="submit"]{ background-color:var(--qg-lime)!important; color:var(--qg-black)!important; } .qg-form .elementor-button[type="submit"]:hover{background-color:var(--qg-lime-bright)!important} /* Surfaces */ .qg-price-card{ background-color:var(--qg-surface)!important; border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-lg)!important; } .qg-price-card--featured{ background-image:linear-gradient(180deg,rgba(230,243,6,.07),var(--qg-surface))!important; border:1px solid var(--qg-lime)!important; box-shadow:var(--qg-glow-lime-soft),var(--qg-shadow-raised)!important; } .qg-step-card{ background-color:var(--qg-surface)!important; border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-lg)!important; } .qg-chip{ background-color:var(--qg-surface)!important; border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-sm)!important; } .qg-scoreboard{ background-color:rgba(22,22,26,.82)!important; border:1px solid rgba(230,243,6,.22)!important; border-radius:var(--qg-radius-lg)!important; } .qg-score-row{ background-color:var(--qg-surface)!important; border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-sm)!important; } .qg-score-row--lead{border-color:rgba(230,243,6,.35)!important} .qg-video-panel{ border:1px solid rgba(56,229,108,.35)!important; border-radius:var(--qg-radius-lg)!important; } .qg-hours-panel{ background-color:var(--qg-surface)!important; border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-md)!important; } .qg-header{ background-color:rgba(15,15,18,.9)!important; border-bottom:1px solid rgba(255,255,255,.08)!important; } .qg-sticky-bar{ background-color:rgba(15,15,18,.82)!important; border-top:1px solid var(--qg-border-strong)!important; } .qg-buzzer{border-radius:50%!important} .qg-buzzer-green{background-color:var(--qg-green)!important} .qg-buzzer-blue{background-color:var(--qg-blue)!important} .qg-buzzer-red{background-color:var(--qg-red)!important} .qg-buzzer-lime{background-color:var(--qg-lime)!important} .qg-gift-dash{background-image:repeating-linear-gradient(90deg,rgba(230,243,6,.45) 0 6px,transparent 6px 12px)!important} /* Icon tiles */ .qg-icon-tile .elementor-icon{ width:52px!important;height:52px!important; border-radius:var(--qg-radius-md)!important; border:1px solid rgba(230,243,6,.35)!important; background-color:rgba(230,243,6,.10)!important; } .qg-icon-tile-sm .elementor-icon{width:46px!important;height:46px!important} .qg-icon-tile-xs .elementor-icon{width:44px!important;height:44px!important} .qg-icon-inline .elementor-icon{width:auto!important;height:auto!important;background:none!important;border:none!important;border-radius:0!important} .qg-tone-green .elementor-icon{background-color:rgba(56,229,108,.10)!important;border-color:rgba(56,229,108,.35)!important} .qg-tone-blue .elementor-icon{background-color:rgba(46,124,246,.10)!important;border-color:rgba(46,124,246,.35)!important} .qg-tone-red .elementor-icon{background-color:rgba(255,61,87,.10)!important;border-color:rgba(255,61,87,.35)!important} .qg-tone-amber .elementor-icon{background-color:rgba(245,165,36,.10)!important;border-color:rgba(245,165,36,.35)!important} .qg-tone-grey .elementor-icon{background-color:rgba(199,199,206,.08)!important;border-color:rgba(199,199,206,.3)!important} .qg-sb-phone .elementor-icon{ width:52px!important;height:52px!important; border:1px solid rgba(230,243,6,.5)!important; border-radius:var(--qg-radius-md)!important; background:transparent!important; } /* FAQ */ .qg-faq .elementor-accordion-item{ background-color:var(--qg-surface)!important; border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-md)!important; } .qg-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active){border-color:rgba(230,243,6,.45)!important} /* Event cards */ .qg-event-card{ border:1px solid var(--qg-border)!important; border-radius:var(--qg-radius-lg)!important; } .qg-event-card:hover{border-color:var(--qg-border-strong)!important} /* Gift band / card */ .qg-giftband{border:1px solid rgba(230,243,6,.28)!important;border-radius:var(--qg-radius-lg)!important} .qg-giftcard{border:1px solid rgba(230,243,6,.32)!important} /* -------------------------------------------------------------------------- 28. NEON GLOW LAYER Colours, borders and radii are set natively in Elementor so they stay editable in the UI. Only the neon glows, chamfers, scrims and motion — which Elementor cannot express — are declared here. -------------------------------------------------------------------------- */ .qg-buzzer-green{box-shadow:var(--qg-glow-green)!important} .qg-buzzer-blue{box-shadow:var(--qg-glow-blue)!important} .qg-buzzer-red{box-shadow:var(--qg-glow-red)!important} .qg-buzzer-lime{box-shadow:var(--qg-glow-lime)!important} .qg-scoreboard{box-shadow:var(--qg-shadow-raised),var(--qg-glow-lime-soft)!important} .qg-video-panel{box-shadow:var(--qg-glow-green),var(--qg-shadow-raised)!important} .qg-giftband{box-shadow:var(--qg-glow-lime-soft),var(--qg-shadow-raised)!important} .qg-giftcard{box-shadow:var(--qg-shadow-pop),var(--qg-glow-lime-soft)!important} .qg-price-card--featured{box-shadow:var(--qg-glow-lime-soft),var(--qg-shadow-raised)!important} .qg-price-card{box-shadow:var(--qg-shadow-card)!important} .qg-step-card{box-shadow:none!important} .qg-card-hover{box-shadow:var(--qg-shadow-card)!important} .qg-card-hover:hover{box-shadow:var(--qg-shadow-raised)!important;transform:translateY(-4px)} .qg-event-card{box-shadow:var(--qg-shadow-card)!important} .qg-event-card:hover{box-shadow:var(--qg-shadow-raised)!important} .qg-btn-primary .elementor-button{box-shadow:var(--qg-glow-lime-soft)} .qg-btn-primary .elementor-button:hover{box-shadow:var(--qg-glow-cta-hover)} .qg-btn-secondary .elementor-button:hover{box-shadow:var(--qg-glow-lime-soft)} .qg-form .elementor-button[type="submit"]{box-shadow:var(--qg-glow-lime-soft)} /* Glass blur on floating chrome */ .qg-header, .qg-sticky-bar, .qg-scoreboard{ -webkit-backdrop-filter:var(--qg-blur-glass); backdrop-filter:var(--qg-blur-glass); } /* Gift-card / gift-band gradients (Elementor cannot layer two backgrounds) */ .qg-giftband{ background-image:linear-gradient(120deg,rgba(29,29,34,.95) 0%,rgba(15,15,18,.95) 60%), radial-gradient(60% 90% at 100% 0%,rgba(230,243,6,.22),transparent 70%)!important; } .qg-giftcard{ background-image:linear-gradient(150deg,#2E2E36 0%,#1A1A1F 42%,#0F0F12 100%)!important; } .qg-price-card--featured{ background-image:linear-gradient(180deg,rgba(230,243,6,.07),#1D1D22)!important; } /* Chamfered submit button + form field height */ .qg-form .elementor-field-textual{min-height:52px} .qg-form textarea.elementor-field-textual{min-height:130px} /* -------------------------------------------------------------------------- 29. FINAL POLISH High-specificity fixes for the few places where the parent theme or Elementor's per-page stylesheet still wins. Classes are doubled up purely to raise specificity; the rules remain scoped to QUIZ GAME components. -------------------------------------------------------------------------- */ /* Footer + legal links must not inherit the theme's default link colour */ .qg-footer-links.qg-footer-links .elementor-icon-list-item a, .qg-footer-links.qg-footer-links .elementor-icon-list-item a .elementor-icon-list-text{ color:var(--qg-grey-300)!important; text-decoration:none!important; } .qg-footer-links.qg-footer-links .elementor-icon-list-item a:hover, .qg-footer-links.qg-footer-links .elementor-icon-list-item a:hover .elementor-icon-list-text{ color:var(--qg-lime)!important; } .qg-legal.qg-legal .elementor-icon-list-item a, .qg-legal.qg-legal .elementor-icon-list-item a .elementor-icon-list-text{ color:var(--qg-grey-500)!important; text-decoration:none!important; } .qg-legal.qg-legal .elementor-icon-list-item a:hover, .qg-legal.qg-legal .elementor-icon-list-item a:hover .elementor-icon-list-text{ color:var(--qg-lime)!important; } /* Phone / e-mail rows in the footer keep their brand colours */ .qg-footer-links.qg-footer-links .elementor-icon-list-icon i{color:inherit!important} /* Body copy links inside the page */ .qg-page a, .elementor-widget-text-editor a{color:var(--qg-lime)} .elementor-widget-text-editor a:hover{color:var(--qg-lime-bright)} /* Layered gradients Elementor cannot express as a single background */ .qg-giftband.qg-giftband.qg-giftband{ background-image:linear-gradient(120deg,rgba(29,29,34,.95) 0%,rgba(15,15,18,.95) 60%), radial-gradient(60% 90% at 100% 0%,rgba(230,243,6,.22),transparent 70%)!important; } .qg-giftcard.qg-giftcard.qg-giftcard{ background-image:linear-gradient(150deg,#2E2E36 0%,#1A1A1F 42%,#0F0F12 100%)!important; } .qg-price-card--featured.qg-price-card--featured.qg-price-card--featured{ background-image:linear-gradient(180deg,rgba(230,243,6,.07) 0%,#1D1D22 100%)!important; } /* Contact rows: value text stays white, label stays muted */ .qg-contact-row.qg-contact-row .elementor-icon-box-description, .qg-contact-row.qg-contact-row .elementor-icon-box-description a{color:var(--qg-white)!important;text-decoration:none!important} .qg-contact-row.qg-contact-row .elementor-icon-box-title, .qg-contact-row.qg-contact-row .elementor-icon-box-title a{color:var(--qg-grey-500)!important} /* Event / audience cards: the whole card is a link — keep inner text on-brand */ .qg-event-card a,.qg-card-hover a{text-decoration:none} /* FAQ title link colour */ .qg-faq.qg-faq .elementor-tab-title a{color:var(--qg-white)!important;text-decoration:none} .qg-faq.qg-faq .elementor-tab-title.elementor-active a{color:var(--qg-white)!important} /* Hours list rows */ .qg-hours-panel .qg-hours-row{display:flex;justify-content:space-between;gap:16px;font-size:.9375rem;color:var(--qg-grey-400)} .qg-hours-panel .qg-hours-row strong{font-weight:600;color:var(--qg-white)} .qg-hours-panel .qg-hours-row.is-closed, .qg-hours-panel .qg-hours-row.is-closed strong{color:var(--qg-grey-500)} /* Mobile: full-width CTA pairs, never side-by-side and cramped */ @media (max-width:767px){ .qg-fill{width:100%} .qg-fill .elementor-button{width:100%} } /* -------------------------------------------------------------------------- 30. TYPOGRAPHY LOCK The global heading preset applies to every Heading widget, including the eyebrows and step numbers that need their own tracking and size. -------------------------------------------------------------------------- */ .qg-eyebrow .elementor-heading-title{ font-family:var(--qg-font-display)!important; font-weight:600!important; font-size:.78rem!important; letter-spacing:.18em!important; line-height:1.2!important; text-transform:uppercase!important; color:var(--qg-lime)!important; } .qg-step-num .elementor-heading-title{ font-size:2.6rem!important; letter-spacing:0!important; line-height:1!important; color:var(--qg-lime)!important; } .qg-cta-arrow .elementor-heading-title{ font-size:.82rem!important; letter-spacing:.08em!important; line-height:1.2!important; } .qg-tag .elementor-heading-title{ font-size:.72rem!important; letter-spacing:.12em!important; line-height:1.2!important; } .qg-ribbon .elementor-heading-title{ font-size:.66rem!important; letter-spacing:.12em!important; line-height:1.2!important; } .qg-gift-pill .elementor-heading-title{ font-size:.62rem!important; letter-spacing:.2em!important; line-height:1.2!important; } .qg-live-tag .elementor-heading-title{ font-size:.7rem!important; letter-spacing:.16em!important; line-height:1.2!important; } .qg-hours-title .elementor-heading-title, .qg-footer-heading .elementor-heading-title{ letter-spacing:.15em!important; line-height:1.2!important; } @media (max-width:1024px){ .qg-step-num .elementor-heading-title{font-size:2.2rem!important} } /* -------------------------------------------------------------------------- 31. REVIEW FIXES -------------------------------------------------------------------------- */ /* --- Header: nav spacing + centring, and breathing room before the CTAs --- */ .qg-header .qg-nav{flex-grow:1!important} .qg-header .qg-nav .elementor-nav-menu--main{justify-content:center!important;width:100%} .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{padding:8px 18px!important} .qg-header .qg-header-cta{margin-left:24px} @media (max-width:1024px){ .qg-header .qg-nav{flex-grow:0!important} .qg-header .qg-header-cta{margin-left:auto} } /* --- Arrow glyph: use the literal character (the CSS escape was being rendered as the text "2192") --- */ .qg-cta-arrow .elementor-heading-title::after{content:"→"!important} /* --- Tag pills and the pricing ribbon always take black text -------------- Inside a linked card the headings otherwise inherit the lime link colour, which made lime pills read as empty. --- */ .qg-tag .elementor-heading-title, .qg-tag .elementor-heading-title a, .qg-ribbon .elementor-heading-title, .qg-ribbon .elementor-heading-title a{color:#0A0A0B!important} /* --- Footer column headings: small tracked labels, not display headings --- */ .qg-footer-heading .elementor-heading-title{ font-family:var(--qg-font-display)!important; font-weight:700!important; font-size:.8rem!important; letter-spacing:.16em!important; line-height:1.3!important; text-transform:uppercase!important; color:var(--qg-white)!important; margin-bottom:4px; } /* --- FAQ chevron: a true circle, not a squashed ellipse --- */ .qg-faq .elementor-accordion-icon{ width:30px!important; height:30px!important; min-width:30px!important; flex:0 0 30px!important; padding:0!important; border-radius:50%!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; line-height:1!important; } .qg-faq .elementor-accordion-icon i{font-size:12px!important;line-height:1!important;width:auto!important;height:auto!important} .qg-faq .elementor-accordion-icon svg{width:12px!important;height:12px!important} /* --- Icon glyphs sit proportionally inside their tiles --- */ .qg-icon-tile .elementor-icon i, .qg-icon-tile .elementor-icon svg{font-size:24px!important;width:24px!important;height:24px!important} .qg-icon-tile-xs .elementor-icon i, .qg-icon-tile-xs .elementor-icon svg{font-size:20px!important;width:20px!important;height:20px!important} .qg-icon-tile-sm .elementor-icon i, .qg-icon-tile-sm .elementor-icon svg{font-size:20px!important;width:20px!important;height:20px!important} .qg-icon-inline .elementor-icon i, .qg-icon-inline .elementor-icon svg{font-size:16px!important;width:16px!important;height:16px!important} /* --- Value strip: align the icon tile with the first line of the title --- */ .qg-icon-tile.elementor-position-left .elementor-icon-box-icon{margin-top:2px} /* -------------------------------------------------------------------------- 32. HERO SPOTLIGHT / COMPACT NAV / PRIMARY BUTTON FILL -------------------------------------------------------------------------- */ /* --- 32a. Hero corner spotlights ----------------------------------------- Elementor's own background overlay already occupies the container's ::before, which is why the lime/green glows never appeared. They are moved onto ::after (above the dark scrim, below the content) and the animated light streak moves onto the inner wrapper. --- */ .qg-hero::after{ content:""; position:absolute; inset:0; left:0;top:0;right:0;bottom:0; width:auto; background:radial-gradient(45% 55% at 12% 18%,rgba(230,243,6,.20) 0%,transparent 70%), radial-gradient(50% 60% at 88% 85%,rgba(56,229,108,.20) 0%,transparent 70%); animation:none; pointer-events:none; z-index:1; } .qg-hero > .e-con-inner{position:relative;z-index:2} .qg-hero > .e-con-inner::before{ content:""; position:absolute; top:0;bottom:0;left:0; width:26%; background:linear-gradient(90deg,transparent,rgba(230,243,6,.10),transparent); animation:qgStreak 7s var(--qg-ease-in-out) infinite; pointer-events:none; z-index:0; } .qg-hero > .e-con-inner > *{position:relative;z-index:1} @media (max-width:767px){ .qg-hero > .e-con-inner::before{display:none} } /* --- 32b. Compact, responsive header navigation --------------------------- */ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{ padding:8px 12px!important; font-size:12.5px!important; letter-spacing:.12em!important; } @media (max-width:1500px){ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{padding:8px 10px!important;font-size:12px!important;letter-spacing:.10em!important} } @media (max-width:1300px){ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{padding:8px 8px!important;font-size:11.5px!important;letter-spacing:.08em!important} .qg-header{padding-left:24px!important;padding-right:24px!important} } @media (max-width:1100px){ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{padding:8px 6px!important;font-size:11px!important;letter-spacing:.06em!important} } /* Burger view keeps generous, tappable rows */ .qg-header .qg-nav .elementor-nav-menu--dropdown .elementor-item{ padding:14px 20px!important; font-size:1.25rem!important; letter-spacing:.02em!important; } /* --- 32c. Primary button: dark panel fills upward on hover ---------------- */ .qg-btn-primary .elementor-button, .qg-form .elementor-button[type="submit"], .qg-sb-book .elementor-button{ position:relative; overflow:hidden; isolation:isolate; } .qg-btn-primary .elementor-button::before, .qg-form .elementor-button[type="submit"]::before, .qg-sb-book .elementor-button::before{ content:""; position:absolute; inset:0; background:#1D1D23; transform:scaleY(0); transform-origin:bottom; transition:transform 280ms var(--qg-ease-out); z-index:0; pointer-events:none; } .qg-btn-primary .elementor-button:hover::before, .qg-btn-primary .elementor-button:focus-visible::before, .qg-form .elementor-button[type="submit"]:hover::before, .qg-sb-book .elementor-button:hover::before{transform:scaleY(1)} .qg-btn-primary .elementor-button .elementor-button-content-wrapper, .qg-btn-primary .elementor-button .elementor-button-text, .qg-form .elementor-button[type="submit"] .elementor-button-content-wrapper, .qg-form .elementor-button[type="submit"] .elementor-button-text, .qg-sb-book .elementor-button .elementor-button-content-wrapper{position:relative;z-index:1} .qg-btn-primary .elementor-button:hover, .qg-btn-primary .elementor-button:focus, .qg-form .elementor-button[type="submit"]:hover, .qg-sb-book .elementor-button:hover{ background-color:var(--qg-lime)!important; color:#FFFFFF!important; border-color:var(--qg-lime)!important; box-shadow:var(--qg-glow-lime-soft)!important; transform:translateY(-1px); } .qg-btn-primary .elementor-button:active, .qg-form .elementor-button[type="submit"]:active, .qg-sb-book .elementor-button:active{transform:translateY(1px) scale(.985)} @media (prefers-reduced-motion:reduce){ .qg-btn-primary .elementor-button::before, .qg-form .elementor-button[type="submit"]::before, .qg-sb-book .elementor-button::before{transition:none} } /* -------------------------------------------------------------------------- 32. HERO SPOTLIGHT / COMPACT NAV / PRIMARY BUTTON FILL -------------------------------------------------------------------------- */ /* --- 32a. Hero corner spotlights ----------------------------------------- Elementor's own background overlay already occupies the container's ::before, which is why the lime/green glows never appeared. They move onto ::after (above the dark scrim, below the content) and the animated light streak moves onto the inner wrapper. --- */ .qg-hero::after{ content:""; position:absolute; left:0;top:0;right:0;bottom:0; width:auto; background:radial-gradient(45% 55% at 12% 18%,rgba(230,243,6,.20) 0%,transparent 70%), radial-gradient(50% 60% at 88% 85%,rgba(56,229,108,.20) 0%,transparent 70%); animation:none; pointer-events:none; z-index:1; } .qg-hero > .e-con-inner{position:relative;z-index:2} .qg-hero > .e-con-inner::before{ content:""; position:absolute; top:0;bottom:0;left:0; width:26%; background:linear-gradient(90deg,transparent,rgba(230,243,6,.10),transparent); animation:qgStreak 7s var(--qg-ease-in-out) infinite; pointer-events:none; z-index:0; } .qg-hero > .e-con-inner > *{position:relative;z-index:1} @media (max-width:767px){ .qg-hero > .e-con-inner::before{display:none} } /* --- 32b. Compact, responsive header navigation --------------------------- */ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{ padding:8px 12px!important; font-size:12.5px!important; letter-spacing:.12em!important; } @media (max-width:1500px){ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{padding:8px 10px!important;font-size:12px!important;letter-spacing:.10em!important} } @media (max-width:1300px){ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{padding:8px 8px!important;font-size:11.5px!important;letter-spacing:.08em!important} .qg-header{padding-left:24px!important;padding-right:24px!important} } @media (max-width:1100px){ .qg-header .qg-nav .elementor-nav-menu--main .elementor-item{padding:8px 6px!important;font-size:11px!important;letter-spacing:.06em!important} } .qg-header .qg-nav .elementor-nav-menu--dropdown .elementor-item{ padding:14px 20px!important; font-size:1.25rem!important; letter-spacing:.02em!important; } /* --- 32c. Primary button: dark panel fills upward on hover ---------------- */ .qg-btn-primary .elementor-button, .qg-form .elementor-button[type="submit"], .qg-sb-book .elementor-button{ position:relative; overflow:hidden; isolation:isolate; } .qg-btn-primary .elementor-button::before, .qg-form .elementor-button[type="submit"]::before, .qg-sb-book .elementor-button::before{ content:""; position:absolute; inset:0; background:#1D1D23; transform:scaleY(0); transform-origin:bottom; transition:transform 280ms var(--qg-ease-out); z-index:0; pointer-events:none; } .qg-btn-primary .elementor-button:hover::before, .qg-btn-primary .elementor-button:focus-visible::before, .qg-form .elementor-button[type="submit"]:hover::before, .qg-sb-book .elementor-button:hover::before{transform:scaleY(1)} .qg-btn-primary .elementor-button .elementor-button-content-wrapper, .qg-btn-primary .elementor-button .elementor-button-text, .qg-form .elementor-button[type="submit"] .elementor-button-content-wrapper, .qg-form .elementor-button[type="submit"] .elementor-button-text, .qg-sb-book .elementor-button .elementor-button-content-wrapper{position:relative;z-index:1} .qg-btn-primary .elementor-button:hover, .qg-btn-primary .elementor-button:focus, .qg-form .elementor-button[type="submit"]:hover, .qg-sb-book .elementor-button:hover{ background-color:var(--qg-lime)!important; color:#FFFFFF!important; border-color:var(--qg-lime)!important; box-shadow:var(--qg-glow-lime-soft)!important; transform:translateY(-1px); } .qg-btn-primary .elementor-button:active, .qg-form .elementor-button[type="submit"]:active, .qg-sb-book .elementor-button:active{transform:translateY(1px) scale(.985)} @media (prefers-reduced-motion:reduce){ .qg-btn-primary .elementor-button::before, .qg-form .elementor-button[type="submit"]::before, .qg-sb-book .elementor-button::before{transition:none} } /* -------------------------------------------------------------------------- 33. MOBILE MENU SAFETY + PRIMARY BUTTON HOVER (white fill) -------------------------------------------------------------------------- */ /* --- 33a. The dropdown must never paint while it is semantically closed. Elementor toggles aria-hidden on the dropdown nav, so this holds even if the widget re-initialises inside the sticky header on scroll. --- */ .qg-header .elementor-nav-menu--dropdown[aria-hidden="true"], .qg-header .elementor-nav-menu__container[aria-hidden="true"]{ display:none!important; } .qg-header .elementor-menu-toggle{display:none} @media (max-width:1024px){ .qg-header .elementor-menu-toggle{ display:inline-flex!important; width:44px;height:44px; align-items:center;justify-content:center; border-radius:var(--qg-radius-md); } /* Opened panel sits below the bar, full width, on the dark glass */ .qg-header .elementor-nav-menu--dropdown{ background-color:rgba(10,10,11,.97)!important; -webkit-backdrop-filter:var(--qg-blur-glass); backdrop-filter:var(--qg-blur-glass); border-top:1px solid var(--qg-border); } } @media (min-width:1025px){ .qg-header .elementor-menu-toggle{display:none!important} .qg-header .elementor-nav-menu--dropdown{display:none!important} } /* --- 33b. Primary button hover: white panel fills upward, dark text ------- */ .qg-btn-primary .elementor-button::before, .qg-form .elementor-button[type="submit"]::before, .qg-sb-book .elementor-button::before{ background:#FFFFFF; } .qg-btn-primary .elementor-button:hover, .qg-btn-primary .elementor-button:focus, .qg-form .elementor-button[type="submit"]:hover, .qg-sb-book .elementor-button:hover{ background-color:var(--qg-lime)!important; color:#1D1D23!important; border-color:#FFFFFF!important; box-shadow:var(--qg-glow-lime-soft)!important; } /* -------------------------------------------------------------------------- 34. SUB-MENU FIX Elementor reuses the class .elementor-nav-menu--dropdown for BOTH the mobile panel (a