/** * QwikGlam — Services Page CSS Additions v5.1 * File: assets/css/qg-services-additions.css * * CHANGELOG v5.1 (over v5.0): * - NEW: .qg-skeleton-card (was referenced in JS but had ZERO CSS rules) * - NEW: .qg-first-booking-strip (new-visitor ₹200 offer) * - NEW: .qg-payment-trust (UPI/Razorpay/Visa trust row) * - NEW: .qg-wa-fab (WhatsApp floating action button) * - NEW: .qg-exit-intent (exit-intent overlay + sheet) * - NEW: .qg-t-list--six (6-column testimonial grid) * - NEW: .qg-empty-state (beautiful no-results state) * - NEW: .qg-count-up animation class * - FIX: Before/After cards — CSS gradient placeholders when images are missing * - FIX: "1 in 33" stat — wider stat box so text doesn't wrap on mobile * * CHANGELOG v5.0: * - COLOR FIX: All dark section backgrounds changed from * #1a1a2e (cold tech navy) to #1A0818 / deep plum family. * - GIFT CARD FIX: Gradient updated to plum tones. * - NEW: .qg-filter-hub (merged category + occasion bar) * - NEW: .qg-trust-strip (stat mini-strip, replaces fake logos) * - NEW: .qg-standard (merged Pledge + Feature strip) * - NEW: .qg-loyalty (loyalty programme tiers) * - NEW: .qg-city-coverage (city grid) * - NEW: .qg-refer (refer & earn banner) * - NEW: .qg-hiw-connector, .qg-hiw-time, .qg-hiw-explore-btn * - FIX: .qg-trans-meta (artist + city credit on Before/After) * - COLOR RHYTHM: Dark sections distributed. * * LOAD ORDER: enqueued AFTER qg-services.css */ /* ═══════════════════════════════════════════════════════════ GLOBAL SVG CONTAINMENT RESET Must stay first — prevents SVG defaulting to 300×150px ═══════════════════════════════════════════════════════════ */ .qg-category-btn svg, .qg-occasion-btn svg, .qg-urgency-badge svg, .qg-price-btn svg, .qg-cart-fab svg, .qg-card-wish-btn svg, .qg-points-badge svg, .qg-surge-banner-inner svg, .qg2-close-btn svg, .qg2-wishlist-btn svg, .qg2-points-earn svg, .qg2-section-label svg, .qg2-cancel-policy svg, .qg2-emi svg, .qg-hygiene-icon svg, .qg-standard-icon svg, .qg-gift-perk svg, .qg-gift-actions .qg-btn-primary svg, .qg-faq-chevron svg, .qg-artist-cred svg, .qg-feature-icon svg, .qg-hiw-icon svg, .qg-app-btn-icon svg, .qg-rv-chip svg, .qg-trust-stat svg, .qg-loyalty-tier-icon svg, .qg-city-chip svg, .qg-refer-icon svg { display: inline-block !important; flex-shrink: 0 !important; } .qg-search-icon { display: block !important; position: absolute !important; left: 1rem !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; stroke: rgba(90,46,72,.38) !important; fill: none !important; pointer-events: none !important; z-index: 2 !important; } /* ═══════════════════════════════════════════════════════════ 01 · HOW IT WORKS — ENHANCED (connector arrows, time labels) ═══════════════════════════════════════════════════════════ */ .qg-hiw-steps { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; max-width: 1100px; margin: 0 auto; } /* Step cards must grow to fill available space in the flex row */ .qg-hiw-steps .qg-hiw-step { flex: 1 1 0 !important; min-width: 0 !important; max-width: 340px !important; } .qg-hiw-connector { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 60px !important; margin-top: 80px !important; opacity: .35; } .qg-hiw-connector svg { width: 40px !important; height: 20px !important; stroke: #D4547A !important; fill: none !important; } .qg-hiw-time { display: inline-block; margin-top: .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(212,84,122,.5); background: rgba(212,84,122,.06); border: 1px solid rgba(212,84,122,.14); border-radius: 9999px; padding: .25rem .75rem; } .qg-hiw-explore-btn { background: transparent; border: 1.5px solid rgba(212,84,122,.28); color: #D4547A; font-family: "DM Sans", sans-serif; font-size: .88rem; font-weight: 600; padding: .9rem 2.2rem; border-radius: 9999px; cursor: pointer; transition: all .3s ease; letter-spacing: .02em; } .qg-hiw-explore-btn:hover { background: rgba(212,84,122,.07); border-color: rgba(212,84,122,.5); transform: translateY(-2px); } .qg-hiw-cta-row { text-align: center; margin-top: 3rem; } @media (max-width: 768px) { .qg-hiw-steps { flex-direction: column !important; align-items: center !important; gap: 1.8rem !important; } .qg-hiw-steps .qg-hiw-step { max-width: 420px !important; width: 100% !important; } .qg-hiw-connector { display: none !important; } } /* ═══════════════════════════════════════════════════════════ 02 · TRUST STAT MINI-STRIP (replaces fake press logos) ═══════════════════════════════════════════════════════════ */ .qg-trust-strip { background: #FFF9FB; border-top: 1px solid rgba(212,84,122,.08); border-bottom: 1px solid rgba(212,84,122,.08); padding: 1.4rem clamp(1.5rem,5%,4rem); } .qg-trust-strip-inner { max-width: 1100px; margin: 0 auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; flex-wrap: wrap; } .qg-trust-stat { display: flex !important; flex-direction: column !important; align-items: center !important; gap: .2rem !important; padding: .5rem 2rem !important; text-align: center; } .qg-trust-stat-num { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 700; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .qg-trust-stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(90,46,72,.5); } .qg-trust-strip-divider { width: 1px; height: 36px; background: rgba(212,84,122,.15); flex-shrink: 0; } @media (max-width: 600px) { .qg-trust-stat { padding: .5rem 1.2rem !important; } .qg-trust-strip-divider { display: none; } } /* ═══════════════════════════════════════════════════════════ 03 · MERGED FILTER HUB (category + occasion in one bar) ═══════════════════════════════════════════════════════════ */ .qg-filter-hub { background: #FFFBFD; border-bottom: 1px solid rgba(212,84,122,.1); position: sticky; /* v5.0: Use measured header height variable so the bar sticks directly under the fixed header regardless of announcement bar state. Falls back to 64px if --qg-header-h not yet set by qg-global.js */ top: var(--qg-header-h, 64px); z-index: 80; box-shadow: 0 2px 12px rgba(42,14,34,.05); } .qg-filter-hub-inner { max-width: 100%; padding: .5rem 0 .4rem; } .qg-filter-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: .3rem 1.2rem; scroll-snap-type: x mandatory; } .qg-filter-row::-webkit-scrollbar { display: none; } .qg-filter-row-divider { height: 1px; background: rgba(201,168,108,.1); margin: 0 1.2rem; } /* Category filter buttons — from qg-services.css, ensured here */ .qg-cat-icon { width: 14px !important; height: 14px !important; stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; vertical-align: -2px !important; margin-right: 4px !important; display: inline-block !important; } .qg-category-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; scroll-snap-align: start; } .qg-category-btn.active .qg-cat-icon { stroke: #fff !important; } /* Occasion bar */ .qg-filter-row--occasions { padding-top: .2rem; } .qg-occasion-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(90,46,72,.38); white-space: nowrap; flex-shrink: 0; padding-right: .5rem; } .qg-occasion-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; scroll-snap-align: start; } .qg-occasion-btn svg { width: 13px !important; height: 13px !important; stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; } @media (max-width: 600px) { .qg-occasion-label { display: none; } } /* ═══════════════════════════════════════════════════════════ 04 · URGENCY STRIP ═══════════════════════════════════════════════════════════ */ .qg-urgency-badges { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .5rem !important; flex-wrap: wrap; } .qg-urgency-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; } .qg-urgency-badge svg { width: 12px !important; height: 12px !important; stroke: currentColor !important; fill: none !important; } /* ═══════════════════════════════════════════════════════════ 05 · BEFORE/AFTER — ARTIST CREDIT META ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ TRANSFORMATION SECTION — World-Class Premium Override v6.1 Complete redesign of section atmosphere, card aesthetics, labels, handle, service pill, and meta text. ═══════════════════════════════════════════════════════════════ */ /* ── Section atmosphere: deep, cinematic dark-to-light gradient ── */ .qg-transformation { background: linear-gradient(175deg, #0E0618 0%, #1A0828 28%, #230A34 55%, #F4EFFF 100%) !important; border-top: none !important; border-bottom: none !important; padding: clamp(5rem,9vw,8rem) clamp(1.5rem,5%,4rem) !important; position: relative; overflow: hidden; } /* Cinematic orb: rose bloom top-left */ .qg-transformation::before { content: "" !important; position: absolute !important; top: -120px; left: -100px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(212,84,122,.22) 0%, rgba(176,48,96,.12) 40%, transparent 70%) !important; filter: blur(90px) !important; pointer-events: none; animation: qgRoseOrb 10s ease-in-out infinite !important; } /* Gold bloom bottom-right */ .qg-transformation::after { content: "" !important; position: absolute !important; bottom: 5%; right: -80px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,108,.2) 0%, rgba(201,168,108,.08) 45%, transparent 70%) !important; filter: blur(80px) !important; pointer-events: none; animation: qgLavOrb 14s ease-in-out infinite !important; } /* ── Section heading: white on dark, italic em in gradient ── */ .qg-trans-header { position: relative; z-index: 2; margin-bottom: 3.8rem !important; } .qg-trans-header .qg-section-eyebrow { color: rgba(201,168,108,.75) !important; } .qg-trans-header .qg-section-eyebrow::before, .qg-trans-header .qg-section-eyebrow::after { background: linear-gradient(90deg, transparent, rgba(201,168,108,.45)) !important; } .qg-trans-header h2 { color: #FFF0F8 !important; font-size: clamp(2rem, 4vw, 3.2rem) !important; margin-bottom: .8rem !important; } .qg-trans-header h2 em { font-style: italic !important; background: linear-gradient(135deg, #F0A8C4, #C9A86C) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .qg-trans-header p { color: rgba(255,220,235,.55) !important; } /* ── Grid: wider, more breathing room ── */ .qg-trans-grid { max-width: 1240px !important; gap: 2.5rem !important; } /* ── Card: cinematic shadow depth, premium border ── */ .qg-trans-card { border-radius: 28px !important; border: 1.5px solid rgba(255,255,255,.12) !important; box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.45), 0 40px 90px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06) inset !important; background: #0A0412 !important; overflow: hidden !important; cursor: ew-resize !important; transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .4s ease !important; } /* Top shimmer bar on hover */ .qg-trans-card::before { background: linear-gradient(90deg, transparent, rgba(240,168,196,.9), rgba(201,168,108,.8), rgba(155,126,200,.75), transparent) !important; } .qg-trans-card:hover { transform: translateY(-12px) scale(1.015) !important; border-color: rgba(212,84,122,.35) !important; box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 24px 60px rgba(0,0,0,.5), 0 60px 120px rgba(176,48,96,.2), 0 0 80px rgba(212,84,122,.08) !important; } /* ── Divider: thinner, more refined ── */ .qg-trans-divider { width: 1.5px !important; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 18%, rgba(201,168,108,1) 50%, rgba(255,255,255,.95) 82%, rgba(255,255,255,0) 100%) !important; } /* ── Handle: elevated jewel-cut look ── */ .qg-trans-handle { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: linear-gradient(135deg, #FAC8D8 0%, #D4547A 35%, #C9A86C 65%, #9B7EC8 100%) !important; box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.9), 0 0 0 5px rgba(201,168,108,.3), 0 0 24px rgba(212,84,122,.5) !important; transition: transform .25s ease, box-shadow .25s ease !important; } .qg-trans-card.is-dragging .qg-trans-handle { transform: translate(-50%, -50%) scale(1.3) !important; box-shadow: 0 6px 32px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.95), 0 0 0 7px rgba(212,84,122,.35), 0 0 40px rgba(212,84,122,.7) !important; } /* ── Labels: full-width frosted glass pills, elevated typography ── */ .qg-trans-labels { bottom: 0 !important; } .qg-trans-label { padding: .7rem 0 !important; font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .12em !important; } .qg-trans-label--before { background: rgba(14,6,24,.7) !important; backdrop-filter: blur(14px) saturate(1.4) !important; color: rgba(255,255,255,.7) !important; border-top: 1px solid rgba(255,255,255,.08) !important; } .qg-trans-label--after { background: linear-gradient(135deg, rgba(176,48,96,.88) 0%, rgba(201,168,108,.72) 100%) !important; backdrop-filter: blur(14px) saturate(1.6) !important; color: #fff !important; border-top: 1px solid rgba(255,255,255,.18) !important; } /* ── Service name pill: top centre, frosted gold ── */ .qg-trans-service { position: absolute !important; top: 16px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 15 !important; white-space: nowrap !important; font-family: "Playfair Display", Georgia, serif !important; font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .06em !important; color: #F0DEB8 !important; background: rgba(14,6,24,.72) !important; border: 1px solid rgba(201,168,108,.4) !important; backdrop-filter: blur(16px) saturate(1.5) !important; padding: .32rem 1.1rem !important; border-radius: 9999px !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; pointer-events: none !important; text-shadow: none !important; } /* ── Meta: artist + city credit above labels ── */ .qg-trans-meta { position: absolute !important; bottom: 60px !important; left: 0 !important; right: 0 !important; z-index: 12 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; padding: 0 1rem !important; pointer-events: none !important; } .qg-trans-artist { font-size: .7rem !important; font-weight: 600 !important; color: rgba(255,255,255,.6) !important; letter-spacing: .03em !important; text-shadow: 0 1px 6px rgba(0,0,0,.6) !important; } /* ── CTA row: sits at the bottom of the section where bg is near-white ── */ .qg-trans-cta-row { position: relative; z-index: 2; } .qg-trans-cta-row .qg-btn--ghost { color: #5A2E48 !important; border-color: rgba(90,46,72,.25) !important; background: rgba(255,255,255,.85) !important; backdrop-filter: blur(8px) !important; font-weight: 600 !important; } .qg-trans-cta-row .qg-btn--ghost:hover { background: #fff !important; color: #D4547A !important; border-color: rgba(212,84,122,.4) !important; box-shadow: 0 8px 28px rgba(212,84,122,.15) !important; } /* Vertical stagger: middle card slightly taller for visual rhythm */ @media (min-width: 901px) { .qg-trans-grid > .qg-trans-card:nth-child(2) { margin-top: -2rem; margin-bottom: -2rem; border-color: rgba(212,84,122,.25) !important; box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.5), 0 50px 100px rgba(176,48,96,.25), 0 0 0 1px rgba(212,84,122,.15) inset !important; } } /* ═══════════════════════════════════════════════════════════ 06 · THE QWIKGLAM STANDARD (merged Pledge + Feature strip) Light lavender section — color rhythm position ═══════════════════════════════════════════════════════════ */ .qg-standard { padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem); background: linear-gradient(160deg, #F5EFFF 0%, #FFF5FA 50%, #F5EFFF 100%); border-top: 1px solid rgba(155,126,200,.12); position: relative; overflow: hidden; } .qg-standard::before { content: ""; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 900px; height: 350px; background: radial-gradient(ellipse, rgba(155,126,200,.08), transparent 65%); filter: blur(60px); pointer-events: none; } .qg-standard-header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 2; } .qg-standard-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3.2rem); font-weight: 700; color: #2A0E22; margin: .65rem 0 1rem; } .qg-standard-header h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-standard-header p { font-size: 1rem; color: #9A6080; max-width: 540px; margin: 0 auto; line-height: 1.78; } .qg-standard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1080px; margin: 0 auto 3.5rem; position: relative; z-index: 2; } /* 5 cards → 3+2 on large, 2+2+1 on medium, 1 col on mobile */ @media (max-width: 1060px) { .qg-standard-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; } } @media (max-width: 560px) { .qg-standard-grid { grid-template-columns: 1fr; max-width: 380px; } } .qg-standard-card { background: rgba(255,255,255,.9); border: 1.5px solid rgba(155,126,200,.16); border-radius: 22px; padding: 2rem 1.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; position: relative; z-index: 2; overflow: hidden; min-height: 240px; box-shadow: 0 6px 28px rgba(42,14,34,.08); transition: all .45s cubic-bezier(.22,1,.36,1); } .qg-standard-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(212,84,122,.7), rgba(201,168,108,.65), transparent); opacity: 0; transition: opacity .4s; } .qg-standard-card:hover { background: #fff; border-color: rgba(212,84,122,.22); transform: translateY(-7px); box-shadow: 0 20px 55px rgba(42,14,34,.12); } .qg-standard-card:hover::before { opacity: 1; } .qg-standard-icon { width: 56px !important; height: 56px !important; border-radius: 50% !important; margin: 0 auto 1rem !important; background: linear-gradient(135deg, rgba(212,84,122,.1), rgba(201,168,108,.08)); border: 1.5px solid rgba(212,84,122,.18); display: grid !important; place-items: center !important; flex-shrink: 0; } .qg-standard-icon svg { width: 26px !important; height: 26px !important; stroke: #D4547A !important; fill: none !important; display: block !important; } .qg-standard-card h3 { font-family: "Playfair Display", Georgia, serif; font-size: .95rem; font-weight: 700; color: #2A0E22; margin: 0 0 .5rem; } .qg-standard-card p { font-size: .82rem; line-height: 1.7; color: #9A6080; margin: 0; } .qg-standard-badge { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; padding: .3rem .78rem; border-radius: 9999px; background: rgba(40,200,114,.08); border: 1px solid rgba(40,200,114,.25); font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: #1A9050; } /* Trust counter row */ .qg-standard-trust { max-width: 900px; margin: 0 auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap; gap: 0; padding: 2rem 2.5rem; background: #fff; border: 1.5px solid rgba(212,84,122,.12); border-radius: 22px; position: relative; z-index: 2; box-shadow: 0 6px 28px rgba(42,14,34,.08); } .qg-standard-trust::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(212,84,122,.7), rgba(201,168,108,.65), rgba(155,126,200,.5), transparent); border-radius: 22px 22px 0 0; } .qg-standard-trust-stat { display: flex !important; flex-direction: column !important; align-items: center !important; gap: .2rem; padding: .5rem 2rem; text-align: center; } .qg-standard-trust-num { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 700; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .qg-standard-trust-label { font-size: .78rem; font-weight: 600; color: #5A2E48; } .qg-standard-trust-divider { width: 1px; height: 40px; background: rgba(212,84,122,.15); flex-shrink: 0; } @media (max-width: 700px) { .qg-standard-trust { gap: 1rem; } .qg-standard-trust-divider { display: none; } .qg-standard-trust-stat { padding: .5rem 1rem; } } /* ═══════════════════════════════════════════════════════════ 07 · LOYALTY PROGRAMME — deep plum dark section COLOR: #1A0818 (luxury velvet, not tech navy #1a1a2e) ═══════════════════════════════════════════════════════════ */ .qg-loyalty { padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem); background: linear-gradient(160deg, #1A0818 0%, #2D1240 55%, #1A0818 100%); border-top: 1px solid rgba(212,84,122,.15); position: relative; overflow: hidden; } .qg-loyalty::before { content: ""; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 900px; height: 400px; background: radial-gradient(ellipse, rgba(212,84,122,.12), transparent 65%); filter: blur(80px); pointer-events: none; } .qg-loyalty-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } .qg-loyalty-header { text-align: center; margin-bottom: 3.5rem; } .qg-loyalty-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3.2rem); font-weight: 700; color: #FFD6E8; margin: .65rem 0 1rem; } .qg-loyalty-header h2 em { font-style: italic; background: linear-gradient(135deg, #F0A8C4, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-loyalty-header p { font-size: .96rem; line-height: 1.82; color: rgba(255,220,235,.62); max-width: 540px; margin: 0 auto; } .qg-loyalty-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } @media (max-width: 900px) { .qg-loyalty-tiers { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } } .qg-loyalty-tier { background: rgba(255,255,255,.07); border: 1.5px solid rgba(212,84,122,.28); border-radius: 24px; padding: 2.2rem 1.8rem 1.8rem; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; transition: all .45s cubic-bezier(.22,1,.36,1); position: relative; min-height: 360px; box-shadow: 0 8px 32px rgba(0,0,0,.25); } .qg-loyalty-tier:hover { background: rgba(255,255,255,.12); border-color: rgba(212,84,122,.5); transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,.35); } .qg-loyalty-tier--featured { border-color: rgba(201,168,108,.45); background: rgba(201,168,108,.06); box-shadow: 0 0 0 1px rgba(201,168,108,.25); } .qg-loyalty-tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #C9A86C, #B8924A); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .9rem; border-radius: 9999px; white-space: nowrap; } .qg-loyalty-tier-icon { width: 64px !important; height: 64px !important; border-radius: 50% !important; margin: 0 auto 1rem !important; display: grid !important; place-items: center !important; } .qg-loyalty-tier--silver .qg-loyalty-tier-icon { background: rgba(192,192,192,.12); border: 1.5px solid rgba(192,192,192,.3); } .qg-loyalty-tier--silver .qg-loyalty-tier-icon svg { stroke: #C0C0C0 !important; } .qg-loyalty-tier--gold .qg-loyalty-tier-icon { background: rgba(201,168,108,.12); border: 1.5px solid rgba(201,168,108,.35); } .qg-loyalty-tier--gold .qg-loyalty-tier-icon svg { stroke: #C9A86C !important; } .qg-loyalty-tier--platinum .qg-loyalty-tier-icon { background: rgba(212,84,122,.12); border: 1.5px solid rgba(212,84,122,.3); } .qg-loyalty-tier--platinum .qg-loyalty-tier-icon svg { stroke: #F0A8C4 !important; } .qg-loyalty-tier-icon svg { width: 30px !important; height: 30px !important; fill: none !important; display: block !important; } .qg-loyalty-tier h3 { font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; font-weight: 700; color: #FFD6E8; margin: 0 0 .35rem; } .qg-loyalty-tier--gold h3 { color: #F0DEB8; } .qg-loyalty-tier-range { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: rgba(255,220,235,.45); margin-bottom: 1.3rem; padding: .2rem .7rem; background: rgba(255,255,255,.05); border-radius: 9999px; border: 1px solid rgba(255,255,255,.08); } .qg-loyalty-benefits { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .55rem; text-align: left; width: 100%; } .qg-loyalty-benefits li { font-size: .83rem; color: rgba(255,220,235,.72); padding-left: 1.2rem; position: relative; line-height: 1.4; } .qg-loyalty-benefits li::before { content: "✦"; position: absolute; left: 0; color: rgba(212,84,122,.5); font-size: .6rem; top: .15rem; } .qg-loyalty-tier--gold .qg-loyalty-benefits li::before { color: rgba(201,168,108,.7); } .qg-loyalty-tier--platinum .qg-loyalty-benefits li::before { color: rgba(240,168,196,.7); } .qg-loyalty-redeem { margin-top: auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: rgba(212,84,122,.55); text-transform: uppercase; } .qg-loyalty-cta-row { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .qg-loyalty-note { font-size: .82rem; color: rgba(255,220,235,.45); text-align: center; max-width: 500px; } .qg-btn-primary--gold { background: linear-gradient(135deg, #C9A86C, #B8924A) !important; border-color: transparent !important; color: #fff !important; } .qg-btn-primary--gold:hover { background: linear-gradient(135deg, #D4B87C, #C9A86C) !important; } /* ═══════════════════════════════════════════════════════════ 08 · GIFT A SERVICE — COLOR FIX Gift section outer: keep deep plum Gift card: #1A0818 plum family (was #1a1a2e tech navy) ═══════════════════════════════════════════════════════════ */ .qg-gift { padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem); background: linear-gradient(160deg, #FFF5F8 0%, #FFF9F5 50%, #FFF5F8 100%); border-top: 1px solid rgba(212,84,122,.1); border-bottom: 1px solid rgba(201,168,108,.1); position: relative; overflow: hidden; } /* Soft rose orb for atmosphere */ .qg-gift::before { content: ""; position: absolute; top: -60px; right: -60px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(212,84,122,.07), transparent 65%); filter: blur(70px); pointer-events: none; } .qg-gift::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,108,.06), transparent 65%); filter: blur(60px); pointer-events: none; } /* ── Gift card: keep dark-card aesthetic, just refine ── */ .qg-gift-logo { color: #fff; } .qg-gift-tagline { color: rgba(255,220,235,.65) !important; } /* ── Text copy: now on light bg → use dark plum colours ── */ .qg-gift-copy h2 { font-family: "Playfair Display", Georgia, serif !important; font-size: clamp(2rem,4vw,3rem) !important; font-weight: 700 !important; color: #2A0E22 !important; margin: .65rem 0 1rem !important; } .qg-gift-copy h2 em { font-style: italic !important; background: linear-gradient(135deg, #D4547A, #C9A86C) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .qg-gift-copy p { color: #9A6080 !important; } .qg-gift-perk { color: #5A2E48 !important; } .qg-gift-perk svg { stroke: #C9A86C !important; } /* Ghost button: dark on light */ .qg-gift-actions .qg-btn--ghost { border-color: rgba(42,14,34,.2) !important; color: #5A2E48 !important; } .qg-gift-actions .qg-btn--ghost:hover { border-color: rgba(212,84,122,.4) !important; color: #D4547A !important; background: rgba(212,84,122,.04) !important; } .qg-gift-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 400px 1fr; gap: 5rem; align-items: center; position: relative; z-index: 2; } @media (max-width: 960px) { .qg-gift-inner { grid-template-columns: 1fr; gap: 3rem; justify-items: center; text-align: center; } } /* COLOR FIX: gift card gradient now uses deep plum not cold navy */ .qg-gift-card { width: 100%; max-width: 340px; aspect-ratio: 16/9; border-radius: 22px; padding: 1.5rem 1.8rem; background: linear-gradient(135deg, #1A0818 0%, #2D1040 50%, #3D1A58 100%); border: 1px solid rgba(201,168,108,.25); box-shadow: 0 30px 80px rgba(0,0,0,.5); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; animation: qgGiftFloat 3.5s ease-in-out infinite; } @keyframes qgGiftFloat { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } } .qg-gift-card-top { display: flex; align-items: center; justify-content: space-between; } .qg-gift-logo { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; font-weight: 700; color: #fff; } .qg-gift-badge { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C9A86C; border: 1px solid rgba(201,168,108,.35); padding: .18rem .58rem; border-radius: 9999px; } .qg-gift-amount { font-family: "Playfair Display", Georgia, serif; font-size: 2.4rem; font-weight: 700; background: linear-gradient(135deg, #F0DEB8, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: .35rem; } .qg-gift-tagline { font-size: .82rem; color: rgba(255,220,235,.5); font-style: italic; } .qg-gift-copy h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: #FFD6E8; margin: .65rem 0 1rem; } .qg-gift-copy h2 em { font-style: italic; background: linear-gradient(135deg, #F0A8C4, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-gift-copy p { font-size: .96rem; line-height: 1.82; color: rgba(255,220,235,.62); margin: 0 0 1.5rem; } .qg-gift-perks { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; } .qg-gift-perk { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .72rem; font-size: .87rem; color: rgba(255,220,235,.75); } .qg-gift-perk svg { width: 15px !important; height: 15px !important; stroke: #C9A86C !important; fill: none !important; flex-shrink: 0 !important; } .qg-gift-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .qg-gift-actions .qg-btn-primary { display: inline-flex; align-items: center; gap: .55rem; } .qg-gift-actions .qg-btn-primary svg { width: 15px !important; height: 15px !important; stroke: #fff !important; fill: none !important; } .qg-gift-actions .qg-btn--ghost { border-color: rgba(255,220,235,.22); color: rgba(255,220,235,.72); } .qg-gift-actions .qg-btn--ghost:hover { border-color: rgba(255,220,235,.5); color: #fff; background: rgba(255,255,255,.08); } @media (max-width: 960px) { .qg-gift-actions { justify-content: center; } } @media (max-width: 640px) { .qg-gift-card { max-width: 280px; } } /* ═══════════════════════════════════════════════════════════ 09 · CITY COVERAGE — NEW SECTION (pearl white) ═══════════════════════════════════════════════════════════ */ .qg-city-coverage { padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem); background: #FFFBFD; border-top: 1px solid rgba(212,84,122,.08); position: relative; overflow: hidden; } .qg-city-header { text-align: center; margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; } .qg-city-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: #2A0E22; margin: .65rem 0 1rem; } .qg-city-header h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-city-header p { font-size: .96rem; color: #9A6080; line-height: 1.72; } .qg-city-grid { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 1100px; margin: 0 auto 2rem; justify-content: center; } .qg-city-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 9999px; border: 1.5px solid rgba(212,84,122,.14); background: #fff; text-decoration: none; transition: all .3s ease; box-shadow: 0 2px 8px rgba(42,14,34,.05); cursor: pointer; } .qg-city-chip:hover { border-color: rgba(212,84,122,.38); background: rgba(212,84,122,.04); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212,84,122,.12); } .qg-city-chip--metro { border-color: rgba(212,84,122,.2); background: rgba(212,84,122,.03); } .qg-city-chip--tier1 { border-color: rgba(201,168,108,.2); } .qg-city-chip--tier2 { border-color: rgba(155,126,200,.18); } .qg-city-chip--more { border: 1.5px dashed rgba(90,46,72,.2); background: transparent; cursor: default; } .qg-city-chip--more:hover { transform: none; box-shadow: none; background: transparent; border-color: rgba(90,46,72,.2); } .qg-city-chip svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; display: inline-block !important; } .qg-city-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #D4547A; flex-shrink: 0; animation: qgCityPulse 2s ease-in-out infinite; } .qg-city-chip--tier1 .qg-city-chip-dot { background: #C9A86C; animation: none; } .qg-city-chip--tier2 .qg-city-chip-dot { background: #9B7EC8; animation: none; } .qg-city-chip--more .qg-city-chip-dot { display: none; } @keyframes qgCityPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} } .qg-city-chip-name { font-size: .82rem; font-weight: 600; color: #2A0E22; } .qg-city-chip-count { font-size: .72rem; color: rgba(90,46,72,.45); font-weight: 500; } .qg-city-cta-row { text-align: center; font-size: .88rem; color: #9A6080; } .qg-city-cta-row a { color: #D4547A; font-weight: 600; text-decoration: none; transition: color .25s; } .qg-city-cta-row a:hover { color: #B03060; } /* ═══════════════════════════════════════════════════════════ 10 · FAQ ACCORDION ═══════════════════════════════════════════════════════════ */ .qg-faq { padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem); background: #FFF0F6; border-top: 1px solid rgba(212,84,122,.08); position: relative; } .qg-faq-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; } .qg-faq-header { text-align: center; margin-bottom: 3rem; } .qg-faq-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: #2A0E22; margin: .65rem 0 0; } .qg-faq-header h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-faq-list { display: flex; flex-direction: column; gap: .6rem; } .qg-faq-item { background: #fff; border: 1.5px solid rgba(212,84,122,.1); border-radius: 16px; overflow: hidden; transition: border-color .35s, box-shadow .35s; } .qg-faq-item:hover { border-color: rgba(212,84,122,.22); box-shadow: 0 4px 20px rgba(42,14,34,.07); } .qg-faq-item.is-open { border-color: rgba(212,84,122,.28); box-shadow: 0 6px 28px rgba(42,14,34,.09); } .qg-faq-q { width: 100%; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; padding: 1.15rem 1.5rem; background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: .92rem; font-weight: 700; color: #2A0E22; transition: color .3s; } .qg-faq-q:hover, .qg-faq-item.is-open .qg-faq-q { color: #D4547A; } .qg-faq-chevron { flex-shrink: 0 !important; width: 28px !important; height: 28px !important; border-radius: 50%; background: rgba(212,84,122,.07); display: grid !important; place-items: center !important; transition: transform .35s cubic-bezier(.22,1,.36,1), background .3s; } .qg-faq-chevron svg { width: 14px !important; height: 14px !important; stroke: #D4547A !important; fill: none !important; } .qg-faq-item.is-open .qg-faq-chevron { transform: rotate(180deg); background: rgba(212,84,122,.12); } .qg-faq-a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .qg-faq-a p { padding: 0 1.5rem 1.3rem; font-size: .88rem; line-height: 1.78; color: #7A5868; margin: 0; } .qg-faq-cta { text-align: center; margin-top: 2.8rem; } .qg-faq-cta p { font-size: .9rem; color: #9A6080; margin: 0 0 1rem; } @media (max-width: 600px) { .qg-faq-q { padding: 1rem 1.15rem; font-size: .88rem; } .qg-faq-a p { padding: 0 1.15rem 1.1rem; } } /* ═══════════════════════════════════════════════════════════ 11 · REFER & EARN — NEW SECTION Light blush-tinted banner — warm and celebratory ═══════════════════════════════════════════════════════════ */ .qg-refer { padding: clamp(3rem,5vw,4rem) clamp(1.5rem,5%,4rem); background: linear-gradient(135deg, #FFF0F6 0%, #FFF8F0 50%, #FFF0F6 100%); border-top: 1px solid rgba(212,84,122,.1); border-bottom: 1px solid rgba(201,168,108,.1); position: relative; overflow: hidden; } .qg-refer::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 300px; background: radial-gradient(ellipse, rgba(212,84,122,.06), transparent 65%); filter: blur(50px); pointer-events: none; } .qg-refer-inner { max-width: 1000px; margin: 0 auto; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 3rem; position: relative; z-index: 2; } @media (max-width: 768px) { .qg-refer-inner { flex-direction: column !important; text-align: center; gap: 1.8rem; } } .qg-refer-icon { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, rgba(212,84,122,.1), rgba(201,168,108,.08)); border: 1.5px solid rgba(212,84,122,.2); display: grid; place-items: center; } .qg-refer-icon svg { width: 40px !important; height: 40px !important; stroke: #D4547A !important; fill: none !important; display: block !important; } .qg-refer-copy { flex: 1; } .qg-refer-copy h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 700; color: #2A0E22; margin: 0 0 .6rem; } .qg-refer-copy h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-refer-copy p { font-size: .9rem; color: #9A6080; line-height: 1.72; margin: 0; } .qg-refer-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; } .qg-btn-primary--refer { white-space: nowrap; } .qg-refer-note { font-size: .72rem; color: rgba(90,46,72,.45); text-align: center; max-width: 200px; } /* ═══════════════════════════════════════════════════════════ 12 · TESTIMONIALS — updated header with eyebrow ═══════════════════════════════════════════════════════════ */ .qg-testimonials-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: #2A0E22; margin: .4rem 0 .8rem; } .qg-testimonials-header h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-t-card-head { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .85rem; margin-bottom: .85rem; } .qg-t-avatar { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: linear-gradient(135deg, rgba(212,84,122,.18), rgba(201,168,108,.14)); border: 1.5px solid rgba(212,84,122,.22); display: grid !important; place-items: center !important; font-family: "Playfair Display", Georgia, serif; font-size: 1rem; font-weight: 700; color: #D4547A; flex-shrink: 0; } .qg-t-author { font-size: .82rem; font-weight: 700; color: #2A0E22; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .qg-t-verified { font-size: .68rem; font-weight: 700; color: #1A8050; background: rgba(40,200,114,.08); border: 1px solid rgba(40,200,114,.22); border-radius: 9999px; padding: .12rem .48rem; } .qg-t-service { font-size: .75rem; color: rgba(90,46,72,.52); margin-top: .1rem; } .qg-t-date { display: block; font-size: .73rem; color: rgba(90,46,72,.38); margin-top: .8rem; font-style: italic; } .qg-google-count { color: #9A6080; text-decoration: none; transition: color .25s; } .qg-google-count:hover { color: #C9A86C; } /* ═══════════════════════════════════════════════════════════ 13 · SAFETY & HYGIENE — dark section color fix Background changed to #1A0818 deep plum family ═══════════════════════════════════════════════════════════ */ .qg-hygiene { background: linear-gradient(160deg, #1A0818 0%, #2D1240 55%, #1A0818 100%) !important; } .qg-hygiene .qg-hygiene-header h2 { color: #FFD6E8 !important; } .qg-hygiene .qg-hygiene-header h2 em { font-style: italic; background: linear-gradient(135deg, #F0A8C4, #C9A86C) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .qg-hygiene .qg-hygiene-header p { color: rgba(255,220,235,.6) !important; } /* ── Full hygiene structure — defined here because the services page does not load qg-bookings-additions.css where these rules live. ── */ .qg-hygiene-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 2; } .qg-hygiene-header { text-align: center; margin-bottom: 3rem; } .qg-hygiene-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #FFD6E8; margin: .65rem 0 .8rem; } .qg-hygiene-header p { font-size: .95rem; color: rgba(255,220,235,.6); max-width: 520px; margin: 0 auto; line-height: 1.78; } .qg-hygiene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .qg-hygiene-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .qg-hygiene-grid { grid-template-columns: 1fr; } } .qg-hygiene-card { background: rgba(255,255,255,.07); border-radius: 20px; border: 1.5px solid rgba(212,84,122,.22); padding: 1.8rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12); transition: all .45s cubic-bezier(.22,1,.36,1); position: relative; overflow: hidden; } .qg-hygiene-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(212,84,122,.7), rgba(201,168,108,.65), transparent); opacity: 0; transition: opacity .4s; } .qg-hygiene-card:hover { transform: translateY(-7px); border-color: rgba(212,84,122,.45); background: rgba(255,255,255,.1); box-shadow: 0 16px 44px rgba(0,0,0,.3); } .qg-hygiene-card:hover::before { opacity: 1; } .qg-hygiene-icon { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 1.2rem; background: linear-gradient(135deg, rgba(212,84,122,.18), rgba(201,168,108,.1)); border: 1.5px solid rgba(212,84,122,.3); display: grid; place-items: center; } .qg-hygiene-icon svg { width: 26px !important; height: 26px !important; stroke: #F0A8C4 !important; fill: none !important; display: block !important; flex-shrink: 0 !important; } .qg-hygiene-card h3 { font-family: "Playfair Display", Georgia, serif; font-size: .96rem; font-weight: 700; color: #FFD6E8; margin: 0 0 .55rem; } .qg-hygiene-card p { font-size: .83rem; line-height: 1.72; color: rgba(255,220,235,.6); margin: 0 0 .9rem; } .qg-hygiene-cert { display: inline-block; padding: .24rem .75rem; border-radius: 9999px; background: rgba(40,200,114,.08); border: 1px solid rgba(40,200,114,.28); font-size: .66rem; font-weight: 700; letter-spacing: .05em; color: #5CE89A; } /* ═══════════════════════════════════════════════════════════ 14 · ICON HELPERS — SVG replaces emoji throughout ═══════════════════════════════════════════════════════════ */ .qg-hiw-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; margin: 0 auto 1.1rem !important; background: linear-gradient(135deg, rgba(212,84,122,.08), rgba(201,168,108,.06)); border: 1px solid rgba(212,84,122,.14); flex-shrink: 0 !important; } .qg-hiw-icon svg { width: 28px !important; height: 28px !important; stroke: #D4547A !important; fill: none !important; display: block !important; flex-shrink: 0 !important; } .qg-artist-cred { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: .75rem !important; } .qg-artist-cred svg { width: 18px !important; height: 18px !important; min-width: 18px !important; stroke: #D4547A !important; fill: none !important; flex-shrink: 0 !important; display: inline-block !important; margin-top: 1px; } .qg-app-btn { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: .8rem !important; } .qg-app-btn-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; flex-shrink: 0 !important; } .qg-app-btn-icon svg { width: 22px !important; height: 22px !important; fill: currentColor !important; display: block !important; } .qg-app-btn-text { display: flex !important; flex-direction: column !important; text-align: left !important; } .qg-app-btn-text small { font-size: .65rem !important; opacity: .75; } .qg-app-btn-text strong { font-size: .92rem !important; } /* ═══════════════════════════════════════════════════════════ 15 · MOBILE TAP TOGGLE (Before/After cards) ═══════════════════════════════════════════════════════════ */ .qg-trans-tap { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); z-index: 16; padding: .4rem 1.1rem; border-radius: 9999px; background: rgba(255,255,255,.82); border: 1px solid rgba(201,168,108,.3); backdrop-filter: blur(8px); font-size: .7rem; font-weight: 700; color: #7A5030; cursor: pointer; white-space: nowrap; display: none; } @media (max-width: 640px) { .qg-trans-tap { display: block; } } /* ═══════════════════════════════════════════════════════════ 16 · MODAL RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg2-avail-row, .qg2-points-earn, .qg2-emi, .qg2-cancel-policy { margin-left: 1rem !important; margin-right: 1rem !important; } .qg2-included, .qg2-datepick, .qg2-addons-section, .qg2-pairwith { padding-left: 1rem !important; padding-right: 1rem !important; } .qg2-service-title, .qg2-service-desc, .qg2-service-price-row, .qg2-price-type, .qg2-modal-topbar { padding-left: 1rem !important; padding-right: 1rem !important; } } /* ═══════════════════════════════════════════════════════════ 17 · CONTROLS ROW RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .qg-controls { flex-wrap: wrap; } .qg-search-wrap { min-width: unset; flex: 1 1 100%; order: -1; } .qg-price-filter { order: 1; } .qg-controls select { order: 2; flex: 1; min-width: 0; } .qg-badge { order: 3; } } @media (max-width: 640px) { .qg-gift-card { max-width: 280px; } } /* ═══════════════════════════════════════════════════════════════════ 18 · v5.1 PATCH — DARK PAGE OVERRIDE + STAR RATINGS + GRAIN ═══════════════════════════════════════════════════════════════════ FIXES: 1. DARK PAGE: Parent theme (TwentyTwentyFive) applies dark backgrounds. qg-services.css resets targeted body.page-template-page-services and body.page-template-default — but WordPress actually assigns body class 'wp-singular page page-id-XXX' with NO template class. Every reset was a dead selector → entire page black. Fix: body:has(#qgHero) matches universally. 2. STAR RATINGS: qg-services.js renders .qg-star--full / --half / --empty but NO CSS file ever defined them. Stars rendered as giant unstyled text, breaking card layout. 3. CARD GRAIN: .qg-card-grain texture overlay referenced in JS, never defined in CSS. ═══════════════════════════════════════════════════════════════════ */ /* ── 18a · Universal dark-mode override ── body:has(#qgHero) matches ANY body class WordPress assigns as long as #qgHero exists in the DOM (services page). */ body:has(#qgHero) { background: #FDF6F8 !important; color: #2A0E22 !important; font-family: "DM Sans", "Poppins", system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; } /* Every possible WordPress wrapper element */ body:has(#qgHero) .wp-site-blocks, body:has(#qgHero) .site-main, body:has(#qgHero) main#main, body:has(#qgHero) main, body:has(#qgHero) .entry-content, body:has(#qgHero) .post-content, body:has(#qgHero) .page-content, body:has(#qgHero) .has-global-padding, body:has(#qgHero) .is-layout-flow, body:has(#qgHero) .is-layout-constrained, body:has(#qgHero) .is-layout-flex, body:has(#qgHero) .wp-block-group, body:has(#qgHero) .wp-block-post-content, body:has(#qgHero) .wp-block-template-part, body:has(#qgHero) #page, body:has(#qgHero) #content, body:has(#qgHero) #primary, body:has(#qgHero) article.page, body:has(#qgHero) article.post, body:has(#qgHero) .type-page { background: #FDF6F8 !important; color: #2A0E22 !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } /* Services wrapper section */ body:has(#qgHero) #qgServices, body:has(#qgHero) .qg-services-wrapper { background: #FFFBFD !important; } /* TwentyTwentyFive specific: kill dark scheme inheritance */ body:has(#qgHero), body:has(#qgHero) * { color-scheme: light !important; } /* Override TT5 custom properties that force dark colours */ body:has(#qgHero) { --wp--preset--color--contrast: #2A0E22 !important; --wp--preset--color--base: #FDF6F8 !important; --wp--custom--color--contrast: #2A0E22 !important; --wp--custom--color--base: #FDF6F8 !important; } /* ── 18b · Star rating spans ── qg-services.js renders these inside .qg-ultra-rating but NO CSS file ever defined them — stars were raw giant text. */ .qg-star { display: inline-block; font-size: .82rem; line-height: 1; letter-spacing: .04em; } .qg-star--full { color: #C9A86C; } .qg-star--half { color: #C9A86C; opacity: .7; } .qg-star--empty { color: rgba(201,168,108,.25); } /* ── 18c · Card grain texture overlay ── */ .qg-card-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════ 19 · SKELETON LOADING CARDS v5.1 — PREVIOUSLY MISSING JS generates .qg-skeleton-card but no CSS existed. Caused unstyled blocks on every initial page load. ═══════════════════════════════════════════════════════════ */ @keyframes qgSkelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .qg-skeleton-card { border-radius: 22px; overflow: hidden; background: #FFF0F6; border: 1px solid rgba(212,84,122,.1); animation: none; } .qg-skel-img { width: 100%; height: 220px; background: linear-gradient( 90deg, rgba(250,200,216,.18) 25%, rgba(242,172,200,.32) 50%, rgba(250,200,216,.18) 75% ); background-size: 200% 100%; animation: qgSkelShimmer 1.5s ease-in-out infinite; } .qg-skel-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; } .qg-skel-line { border-radius: 6px; height: 12px; background: linear-gradient( 90deg, rgba(250,200,216,.18) 25%, rgba(242,172,200,.3) 50%, rgba(250,200,216,.18) 75% ); background-size: 200% 100%; animation: qgSkelShimmer 1.5s ease-in-out infinite; } .qg-skel-line--title { height: 16px; width: 68%; animation-delay: .05s; } .qg-skel-line--text { height: 11px; width: 92%; animation-delay: .1s; } .qg-skel-line--short { height: 11px; width: 44%; animation-delay: .15s; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .qg-skel-img, .qg-skel-line { animation: none; opacity: .5; } } /* ═══════════════════════════════════════════════════════════ 20 · FIRST-BOOKING OFFER STRIP v5.1 — NEW Sticky announcement-style strip for new visitors only. JS hides it once qg_has_booked is set in localStorage. ═══════════════════════════════════════════════════════════ */ .qg-first-booking-strip { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: linear-gradient(135deg, #2A0E22 0%, #3D1838 50%, #2A0E22 100%); padding: 11px 20px; position: relative; border-bottom: 1px solid rgba(201,168,108,.2); overflow: hidden; } /* Gold shimmer sweep */ .qg-first-booking-strip::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(201,168,108,.12) 50%, transparent 60%); animation: qgShineSweep 3.5s ease-in-out infinite 1s; pointer-events: none; } .qg-fbs-icon { display: flex; align-items: center; color: #C9A86C; flex-shrink: 0; } .qg-fbs-icon svg { width: 18px; height: 18px; } .qg-fbs-text { font-size: .84rem; color: rgba(255,220,235,.88); text-align: center; margin: 0; line-height: 1.5; } .qg-fbs-text strong { color: #fff; font-weight: 600; } .qg-fbs-text em { color: #C9A86C; font-style: normal; font-weight: 600; } .qg-fbs-code { display: inline-block; background: rgba(201,168,108,.18); border: 1px dashed rgba(201,168,108,.5); color: #F0DEB8; font-family: monospace; font-size: .82rem; letter-spacing: .12em; padding: 2px 8px; border-radius: 5px; cursor: pointer; user-select: all; transition: background .2s; } .qg-fbs-code:hover { background: rgba(201,168,108,.28); } .qg-fbs-cta { background: linear-gradient(135deg, #C9A86C, #B8924A); color: #1A0818; font-size: .8rem; font-weight: 700; letter-spacing: .04em; padding: 7px 16px; border-radius: 20px; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: transform .15s, box-shadow .15s; } .qg-fbs-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,108,.4); } .qg-fbs-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(255,220,235,.5); padding: 4px; display: flex; align-items: center; transition: color .2s; } .qg-fbs-close:hover { color: rgba(255,220,235,.9); } .qg-fbs-close svg { width: 12px; height: 12px; } /* Hidden state */ .qg-first-booking-strip[hidden], .qg-first-booking-strip.is-dismissed { display: none !important; } @media (max-width: 600px) { .qg-first-booking-strip { padding: 10px 36px 10px 14px; gap: 7px; } .qg-fbs-cta { font-size: .76rem; padding: 6px 12px; } } /* ═══════════════════════════════════════════════════════════ 21 · PAYMENT TRUST ROW v5.1 — NEW Inline payment method strip with SSL badge. ═══════════════════════════════════════════════════════════ */ .qg-payment-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 24px; background: #FFF8FC; border-bottom: 1px solid rgba(212,84,122,.07); font-size: .76rem; color: rgba(90,46,72,.6); } .qg-pt-label { font-weight: 500; color: rgba(90,46,72,.55); } .qg-pt-logos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qg-pt-sep { color: rgba(90,46,72,.25); } .qg-pt-method { display: inline-block; padding: 2px 8px; border: 1px solid rgba(212,84,122,.18); border-radius: 5px; background: #fff; font-size: .73rem; font-weight: 600; color: #3D1838; letter-spacing: .03em; } .qg-pt-ssl { display: inline-flex; align-items: center; gap: 4px; color: #2E7D32; font-weight: 600; font-size: .73rem; padding: 2px 8px; border-radius: 5px; background: rgba(46,125,50,.07); border: 1px solid rgba(46,125,50,.18); } .qg-pt-ssl svg { width: 11px; height: 11px; stroke: #2E7D32; flex-shrink: 0; } @media (max-width: 480px) { .qg-payment-trust { padding: 8px 16px; gap: 6px 8px; } .qg-pt-label { width: 100%; text-align: center; } } /* ═══════════════════════════════════════════════════════════ 22 · WHATSAPP FLOATING ACTION BUTTON v5.1 — NEW Fixed position above concierge FAB. Green brand color is universally understood in India. ═══════════════════════════════════════════════════════════ */ .qg-wa-fab { position: fixed; bottom: 156px; /* sits above concierge: 90px (concierge) + 52px (concierge height) + 14px gap */ right: 20px; z-index: 8400; /* just below concierge z-index: 8500 */ width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 2px 8px rgba(37,211,102,.25); text-decoration: none; transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s; overflow: hidden; } .qg-wa-fab svg { width: 26px; height: 26px; flex-shrink: 0; } /* Expanding label on hover (desktop) */ .qg-wa-fab-label { position: absolute; right: 56px; background: #1D1D1D; color: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; padding: 5px 10px; border-radius: 6px; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .2s, transform .2s; } .qg-wa-fab-label::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #1D1D1D; } @media (hover: hover) { .qg-wa-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.6), 0 2px 10px rgba(37,211,102,.3); } .qg-wa-fab:hover .qg-wa-fab-label { opacity: 1; transform: translateX(0); } } /* Pulse ring animation — draws attention on first view */ .qg-wa-fab::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37,211,102,.5); animation: qgWaPulse 2.5s ease-out infinite 2s; } @keyframes qgWaPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } } @media (max-width: 480px) { .qg-wa-fab { bottom: 144px; right: 14px; width: 48px; height: 48px; } .qg-wa-fab svg { width: 22px; height: 22px; } } /* ═══════════════════════════════════════════════════════════ 23 · EXIT-INTENT OVERLAY v5.1 — NEW Full-screen overlay with bottom-sheet on mobile. ═══════════════════════════════════════════════════════════ */ .qg-exit-intent { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .3s; } .qg-exit-intent.is-open { pointer-events: all; opacity: 1; } .qg-exit-backdrop { position: absolute; inset: 0; background: rgba(26,8,24,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .qg-exit-sheet { position: relative; z-index: 1; background: #fff; border-radius: 24px; padding: 40px 36px 36px; max-width: 420px; width: calc(100% - 40px); text-align: center; box-shadow: 0 24px 80px rgba(26,8,24,.35); transform: translateY(24px) scale(.97); transition: transform .35s cubic-bezier(.22,1,.36,1); } .qg-exit-intent.is-open .qg-exit-sheet { transform: translateY(0) scale(1); } .qg-exit-close { position: absolute; top: 14px; right: 14px; background: rgba(90,46,72,.08); border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #5A2E48; transition: background .2s; } .qg-exit-close:hover { background: rgba(90,46,72,.15); } .qg-exit-close svg { width: 14px; height: 14px; } .qg-exit-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #FAC8D8, #D4C0F0); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #2A0E22; } .qg-exit-icon svg { width: 30px; height: 30px; } .qg-exit-sheet h2 { font-size: 1.22rem; font-weight: 700; color: #2A0E22; margin-bottom: 10px; line-height: 1.35; } .qg-exit-sheet p { font-size: .88rem; color: #5A2E48; line-height: 1.6; margin-bottom: 20px; } .qg-exit-sheet p strong { color: #2A0E22; } .qg-exit-code-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; } .qg-exit-code { background: #FFF0F6; border: 2px dashed rgba(201,168,108,.6); color: #3D1838; font-family: monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: .15em; padding: 8px 18px; border-radius: 10px; } .qg-exit-copy { font-size: .78rem; font-weight: 600; color: #C9A86C; background: none; border: 1px solid rgba(201,168,108,.4); border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s; } .qg-exit-copy:hover { background: rgba(201,168,108,.12); } .qg-exit-copy.copied { color: #2E7D32; border-color: rgba(46,125,50,.4); } .qg-exit-cta { width: 100%; background: linear-gradient(135deg, #C9A86C, #B8924A); color: #1A0818; font-size: .88rem; font-weight: 700; letter-spacing: .04em; padding: 14px 24px; border-radius: 12px; border: none; cursor: pointer; margin-bottom: 12px; transition: transform .15s, box-shadow .15s; } .qg-exit-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,108,.4); } .qg-exit-disclaimer { font-size: .72rem; color: rgba(90,46,72,.45); margin: 0 !important; } /* Mobile: slide up from bottom */ @media (max-width: 600px) { .qg-exit-intent { align-items: flex-end; } .qg-exit-sheet { border-radius: 24px 24px 0 0; width: 100%; max-width: 100%; padding: 32px 24px 40px; transform: translateY(100%); } .qg-exit-intent.is-open .qg-exit-sheet { transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════ 24 · 6-TESTIMONIAL GRID v5.1 — NEW Social proof threshold requires ≥6 reviews. ═══════════════════════════════════════════════════════════ */ .qg-t-list--six { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 900px) { .qg-t-list--six { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .qg-t-list--six { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════ 25 · BEAUTIFUL EMPTY STATE v5.1 — NEW Replaces bare text when no services match filters. ═══════════════════════════════════════════════════════════ */ .qg-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; gap: 14px; } .qg-empty-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #FAC8D8, #D4C0F0); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #2A0E22; margin-bottom: 4px; } .qg-empty-state h3 { font-size: 1.1rem; font-weight: 700; color: #2A0E22; margin: 0; } .qg-empty-state p { font-size: .88rem; color: rgba(90,46,72,.65); max-width: 340px; margin: 0; line-height: 1.6; } .qg-empty-state .qg-btn { margin-top: 6px; font-size: .85rem; padding: 10px 22px; } /* ═══════════════════════════════════════════════════════════ 26 · COUNT-UP ANIMATION SUPPORT v5.1 — NEW Trust stat numbers animate on scroll-into-view. JS adds .is-counting during animation; .counted after. ═══════════════════════════════════════════════════════════ */ .qg-trust-stat-num, .qg-standard-trust-num, .qg-artist-stat-num { display: inline-block; transition: transform .15s; /* Wider min-width for "1 in 33" type stats */ min-width: max-content; } .qg-trust-stat-num.is-counting, .qg-standard-trust-num.is-counting, .qg-artist-stat-num.is-counting { transform: scale(1.04); } /* Trust stat container — wider to accommodate "1 in 33" */ .qg-trust-stat { min-width: 120px; } @media (max-width: 480px) { .qg-trust-stat { min-width: 90px; } } /* ═══════════════════════════════════════════════════════════ 27 · BEFORE/AFTER IMAGE FALLBACK v6.1 Dark cinematic gradient placeholders — premium even without images. ═══════════════════════════════════════════════════════════ */ .qg-trans-before { background: linear-gradient(160deg, #2D1240 0%, #1A0828 50%, #0E0618 100%) !important; } .qg-trans-after { background: linear-gradient(160deg, #3D1838 0%, #8A1840 50%, #D4547A 100%) !important; } .qg-trans-before img, .qg-trans-after img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Labels stay consistent with dark cinematic theme — no overrides needed, handled by the transformation section override block above */ .qg-trans-label--before { background: rgba(14,6,24,.7) !important; color: rgba(255,255,255,.7) !important; } .qg-trans-label--after { background: linear-gradient(135deg, rgba(176,48,96,.88) 0%, rgba(201,168,108,.72) 100%) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════ 28 · "PEOPLE VIEWING" SOCIAL PROOF BADGE v5.1 — NEW Rendered by JS on hot cards. Booking.com data: +7.5% CVR. ═══════════════════════════════════════════════════════════ */ .qg-viewing-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: #B03060; background: rgba(212,84,122,.08); border: 1px solid rgba(212,84,122,.18); border-radius: 20px; padding: 2px 8px; margin-top: 4px; animation: qgPulse 2.5s ease-in-out infinite; } .qg-viewing-dot { width: 6px; height: 6px; border-radius: 50%; background: #D4547A; flex-shrink: 0; animation: qgPulse 1.8s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════ 29 · HERO CTA BUTTON — SHIMMER EFFECT v5.1 — ENHANCED The CTA button deserves the same premium treatment as the rest of the page. Adds a sweep shimmer. ═══════════════════════════════════════════════════════════ */ .qg-hero__cta { position: relative; overflow: hidden; } .qg-hero__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70% ); transform: translateX(-100%) skewX(-15deg); animation: qgCTAShimmer 3.2s ease-in-out infinite 2s; } @keyframes qgCTAShimmer { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(300%) skewX(-15deg); } } /* ═══════════════════════════════════════════════════════════ 30 · SVG containment — additions for new elements ═══════════════════════════════════════════════════════════ */ .qg-fbs-icon svg, .qg-fbs-close svg, .qg-exit-close svg, .qg-exit-icon svg, .qg-wa-fab svg, .qg-pt-ssl svg { display: inline-block !important; flex-shrink: 0 !important; }/** * QwikGlam — Services Page CSS v6.0 Additions * ───────────────────────────────────────────── * APPEND this file's contents to qg-services-additions.css * * New sections styled: * 31 · Brand Partners Strip (.qg-brand-partners) * 32 · Curated Collections Row (.qg-collections, .qg-col-card) * 33 · UGC / Look-Book Gallery (.qg-ugc, .qg-ugc-card) * 34 · Beauty Blog Teaser (.qg-blog-teaser, .qg-blog-card) * * Also enhances: * - Hero CTA second button (WhatsApp) * - Service card image area (taller, better aspect ratio) * - Empty grid state (richer prompt) */ /* ═══════════════════════════════════════════════════════════ 31 · BRAND PARTNERS STRIP Infinite marquee scroll — pure CSS, no JS dependency. Gradient fade masks on edges for premium edge treatment. ═══════════════════════════════════════════════════════════ */ .qg-brand-partners { background: #FFFBFD; border-bottom: 1px solid rgba(212,84,122,.07); padding: .75rem 0; overflow: hidden; position: relative; } /* Fade edges so scroll looks infinite */ .qg-brand-partners::before, .qg-brand-partners::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(60px, 8vw, 120px); z-index: 2; pointer-events: none; } .qg-brand-partners::before { left: 0; background: linear-gradient(to right, #FFFBFD 0%, transparent 100%); } .qg-brand-partners::after { right: 0; background: linear-gradient(to left, #FFFBFD 0%, transparent 100%); } .qg-brand-partners-inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; gap: 1.4rem; padding: 0 clamp(1rem, 4vw, 3rem); } .qg-bp-label { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(90,46,72,.38); white-space: nowrap; flex-shrink: 0; } .qg-bp-track { flex: 1; overflow: hidden; position: relative; } .qg-bp-row { display: flex; align-items: center; gap: .8rem; width: max-content; animation: qgBpScroll 28s linear infinite; } .qg-bp-row:hover { animation-play-state: paused; } @keyframes qgBpScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .qg-bp-brand { font-family: "Playfair Display", Georgia, serif; font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: rgba(42,14,34,.55); white-space: nowrap; transition: color .2s; } .qg-bp-brand:hover { color: #D4547A; } .qg-bp-dot { color: rgba(201,168,108,.5); font-size: .65rem; flex-shrink: 0; } @media (max-width: 600px) { .qg-bp-label { display: none; } .qg-brand-partners::before, .qg-brand-partners::after { width: 40px; } } /* ═══════════════════════════════════════════════════════════ 32 · CURATED COLLECTIONS ROW Horizontal scroll of editorial collection cards. Each has a themed gradient BG, icon, and service count. ═══════════════════════════════════════════════════════════ */ .qg-collections { background: #FDF6F8; padding: 3rem 0 2.5rem; } .qg-collections-header { text-align: center; padding: 0 clamp(1.5rem, 5%, 3rem); margin-bottom: 2rem; } .qg-collections-title { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: #2A0E22; margin: .3rem 0 .6rem; line-height: 1.25; } .qg-collections-title em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-collections-sub { font-size: .92rem; color: rgba(90,46,72,.65); max-width: 480px; margin: 0 auto; line-height: 1.6; } /* Horizontal scroll container */ .qg-collections-scroll { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: .5rem clamp(1.5rem, 5%, 3rem) 1.5rem; } .qg-collections-scroll::-webkit-scrollbar { display: none; } /* Individual collection card */ .qg-col-card { flex-shrink: 0; width: clamp(220px, 28vw, 280px); border-radius: 20px; overflow: hidden; text-decoration: none; position: relative; padding: 1.6rem 1.4rem 1.4rem; scroll-snap-align: start; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; cursor: pointer; display: flex; flex-direction: column; gap: .6rem; min-height: 220px; box-shadow: 0 6px 28px rgba(42,14,34,.08); } .qg-col-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 18px 48px rgba(42,14,34,.14); } /* Gradient background layer — MUST use !important to survive the wildcard position:relative below, which applies to all direct children */ .qg-col-card-bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; transition: opacity .3s; border-radius: inherit; } /* All other direct children sit above the bg */ .qg-col-card > *:not(.qg-col-card-bg) { position: relative; z-index: 1; } /* Theme variants — rich deep gradients so white text is always legible Original light starts (#FAC8D8, #F0DEB8, #C8F0D8) caused invisible text. Each now starts saturated and deepens toward the bottom-right corner. */ .qg-col-card--rose .qg-col-card-bg { background: linear-gradient(135deg, #D4547A 0%, #8A1840 55%, #2A0E22 100%); } .qg-col-card--lavender .qg-col-card-bg { background: linear-gradient(135deg, #7B5CB8 0%, #4A2880 55%, #1A0838 100%); } .qg-col-card--gold .qg-col-card-bg { background: linear-gradient(135deg, #C9A86C 0%, #8A6B2A 55%, #3A2808 100%); } .qg-col-card--mint .qg-col-card-bg { background: linear-gradient(135deg, #2AB868 0%, #187840 55%, #0A3820 100%); } .qg-col-card--champagne .qg-col-card-bg { background: linear-gradient(135deg, #2A0E22 0%, #3D1838 50%, #C9A86C 100%); } /* Blush stays light — uses dark text (colour overrides applied below) */ .qg-col-card--blush .qg-col-card-bg { background: linear-gradient(135deg, #FFF0F6 0%, #FAC8D8 60%, #F2ACC8 100%); } /* Blush card — all text must be dark since background is light */ .qg-col-card--blush .qg-col-tag { color: #B03060; background: rgba(176,48,96,.1); border-color: rgba(176,48,96,.2); } .qg-col-card--blush .qg-col-title { color: #2A0E22; text-shadow: none; } .qg-col-card--blush .qg-col-sub { color: rgba(42,14,34,.6); text-shadow: none; } .qg-col-card--blush .qg-col-count { color: #D4547A; text-shadow: none; } .qg-col-card--blush .qg-col-icon { background: rgba(176,48,96,.1); border-color: rgba(176,48,96,.2); } .qg-col-card--blush .qg-col-icon svg { stroke: #D4547A !important; } /* Add text-shadow to all non-blush text for extra legibility on dark bgs */ .qg-col-card:not(.qg-col-card--blush) .qg-col-title, .qg-col-card:not(.qg-col-card--blush) .qg-col-sub, .qg-col-card:not(.qg-col-card--blush) .qg-col-count, .qg-col-card:not(.qg-col-card--blush) .qg-col-tag { text-shadow: 0 1px 6px rgba(0,0,0,.35); } .qg-col-tag { display: inline-block; background: rgba(255,255,255,.28); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.4); border-radius: 9999px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .2rem .75rem; color: #fff; align-self: flex-start; } /* Champagne card (dark bg) — tag contrast fix */ .qg-col-card--champagne .qg-col-tag { color: rgba(201,168,108,.9); } /* Icon */ .qg-col-icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); } .qg-col-icon svg { width: 24px !important; height: 24px !important; stroke: rgba(255,255,255,.95) !important; fill: none !important; } /* Body */ .qg-col-body { margin-top: auto; } .qg-col-title { font-family: "Playfair Display", Georgia, serif; font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 .3rem; line-height: 1.3; } .qg-col-sub { font-size: .73rem; color: rgba(255,255,255,.78); margin: 0 0 .6rem; line-height: 1.45; } .qg-col-count { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: .03em; } @media (max-width: 480px) { .qg-col-card { width: 200px; min-height: 200px; } } /* ═══════════════════════════════════════════════════════════ 33 · UGC / LOOK-BOOK GALLERY Masonry-style responsive photo grid. Gradient placeholders with emoji + overlay text. ═══════════════════════════════════════════════════════════ */ .qg-ugc { background: #2A0E22; padding: 4.5rem clamp(1.5rem, 5%, 3.5rem); } .qg-ugc-header { text-align: center; margin-bottom: 2.6rem; } .qg-ugc-header .qg-section-eyebrow { color: rgba(201,168,108,.7); } .qg-ugc-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: #FDF6F8; margin: .3rem 0 .6rem; } .qg-ugc-header h2 em { font-style: italic; background: linear-gradient(135deg, #FAC8D8, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-ugc-header p { font-size: .92rem; color: rgba(253,246,248,.5); max-width: 460px; margin: 0 auto .8rem; } .qg-ugc-hashtag { display: inline-block; font-size: 1rem; font-weight: 700; letter-spacing: .06em; color: #C9A86C; text-decoration: none; border-bottom: 1.5px solid rgba(201,168,108,.3); padding-bottom: 2px; transition: color .2s, border-color .2s; } .qg-ugc-hashtag:hover { color: #F0DEB8; border-color: rgba(240,222,184,.5); } /* Grid layout — proper masonry without circular dependency */ .qg-ugc-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); /* Explicit row height: each row is 260px; tall cards span 2 rows = 530px */ grid-auto-rows: 260px; gap: 10px; } @media (max-width: 900px) { .qg-ugc-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; } } @media (max-width: 600px) { .qg-ugc-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; gap: 8px; } } /* Tall every 3rd card — spans 2 rows, NO aspect-ratio override (rows provide height) */ .qg-ugc-card:nth-child(3n+1) { grid-row: span 2; } /* Individual card — NO aspect-ratio; height comes from grid-auto-rows */ .qg-ugc-card { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--ugc-bg, linear-gradient(135deg, #FAC8D8, #D4547A)); /* aspect-ratio removed — grid-auto-rows controls height */ transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; } .qg-ugc-card:hover { transform: scale(1.03); box-shadow: 0 16px 48px rgba(0,0,0,.4); } .qg-ugc-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .qg-ugc-emoji { font-size: clamp(2rem, 6vw, 3.5rem); opacity: .55; user-select: none; } /* Overlay — slides up on hover */ .qg-ugc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,8,24,.85) 0%, transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; opacity: 0; transition: opacity .3s; } .qg-ugc-card:hover .qg-ugc-overlay, .qg-ugc-card:focus .qg-ugc-overlay { opacity: 1; } .qg-ugc-service { font-size: .75rem; font-weight: 700; color: #C9A86C; letter-spacing: .04em; margin-bottom: 2px; } .qg-ugc-handle { font-size: .68rem; color: rgba(255,255,255,.7); } /* "Book this look" button — appears on hover */ .qg-ugc-book-btn { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .7rem; font-weight: 700; padding: 7px 14px; border-radius: 9999px; cursor: pointer; white-space: nowrap; opacity: 0; transition: opacity .3s, transform .3s; letter-spacing: .03em; } .qg-ugc-card:hover .qg-ugc-book-btn, .qg-ugc-card:focus .qg-ugc-book-btn { opacity: 1; transform: translateX(-50%) translateY(0); } /* Footer row */ .qg-ugc-footer { text-align: center; margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .qg-ugc-footer p { font-size: .9rem; color: rgba(253,246,248,.5); } .qg-ugc-footer p strong { color: rgba(253,246,248,.85); } .qg-ugc-ig-btn { color: #fff !important; border: 1.5px solid rgba(255,255,255,.35) !important; background: rgba(255,255,255,.08) !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: .82rem !important; font-weight: 600 !important; padding: .7rem 1.8rem !important; border-radius: 9999px !important; transition: all .2s ease !important; } .qg-ugc-ig-btn:hover { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.6) !important; color: #fff !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; } .qg-ugc-ig-btn svg { flex-shrink: 0; width: 16px !important; height: 16px !important; } /* ═══════════════════════════════════════════════════════════ 34 · BEAUTY BLOG TEASER Three editorial article cards with themed gradient hero images. ═══════════════════════════════════════════════════════════ */ .qg-blog-teaser { background: #FDF6F8; padding: 4.5rem clamp(1.5rem, 5%, 3.5rem); } .qg-blog-header { text-align: center; margin-bottom: 2.8rem; } .qg-blog-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: #2A0E22; margin: .3rem 0 .6rem; } .qg-blog-header h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-blog-header p { font-size: .92rem; color: rgba(90,46,72,.65); max-width: 460px; margin: 0 auto; } /* 3-column grid */ .qg-blog-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 860px) { .qg-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .qg-blog-grid { grid-template-columns: 1fr; max-width: 420px; } } /* Card */ .qg-blog-card { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid rgba(212,84,122,.08); box-shadow: var(--shadow-card); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; display: flex; flex-direction: column; } .qg-blog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(42,14,34,.12); } /* Hero image area — gradient placeholder */ .qg-blog-card-link { display: block; } .qg-blog-hero { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .qg-blog-card--rose .qg-blog-hero { background: linear-gradient(135deg, #FAC8D8 0%, #D4547A 100%); } .qg-blog-card--lavender .qg-blog-hero { background: linear-gradient(135deg, #D4C0F0 0%, #9B7EC8 100%); } .qg-blog-card--gold .qg-blog-hero { background: linear-gradient(135deg, #F0DEB8 0%, #C9A86C 100%); } .qg-blog-hero-emoji { font-size: 3.2rem; opacity: .6; } /* Body */ .qg-blog-body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .qg-blog-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .qg-blog-cat { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .18rem .65rem; border-radius: 9999px; background: rgba(212,84,122,.1); color: #B03060; } .qg-blog-card--lavender .qg-blog-cat { background: rgba(155,126,200,.12); color: #6B4B9A; } .qg-blog-card--gold .qg-blog-cat { background: rgba(201,168,108,.12); color: #8A6B2A; } .qg-blog-date, .qg-blog-read { font-size: .7rem; color: rgba(90,46,72,.45); } .qg-blog-date::before { content: '· '; } .qg-blog-title { font-family: "Playfair Display", Georgia, serif; font-size: 1.02rem; font-weight: 700; color: #2A0E22; margin: 0; line-height: 1.4; } .qg-blog-title a { text-decoration: none; color: inherit; transition: color .2s; } .qg-blog-title a:hover { color: #D4547A; } .qg-blog-excerpt { font-size: .82rem; color: rgba(90,46,72,.65); line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .qg-blog-read-more { margin-top: auto; padding-top: .5rem; font-size: .78rem; font-weight: 700; color: #D4547A; text-decoration: none; letter-spacing: .02em; transition: color .2s; } .qg-blog-read-more:hover { color: #B03060; } /* CTA row */ .qg-blog-cta-row { text-align: center; margin-top: 2.5rem; } /* ═══════════════════════════════════════════════════════════ 35 · SERVICE CARD ENHANCEMENTS v6.0 Better image height, refined typography. ═══════════════════════════════════════════════════════════ */ /* Taller image area — flagship luxury feel */ .qg-ultra-media { height: 235px !important; } /* Smoother card entrance animation */ .qg-ultra-card { animation: qgCardIn 0.45s cubic-bezier(.22,1,.36,1) both; } /* Artist avatar refinement */ .qg-card-artist { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .qg-card-artist-initials { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #FAC8D8, #D4547A); display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: #fff; flex-shrink: 0; } .qg-card-artist-label { font-size: .7rem; color: rgba(90,46,72,.55); font-weight: 500; } /* ═══════════════════════════════════════════════════════════ 36 · SKELETON CARD — defined here to fix invisible loader (qg-skeleton-card referenced in JS but had no CSS styles) ═══════════════════════════════════════════════════════════ */ .qg-skeleton-card { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 4px 16px rgba(42,14,34,.06); border: 1px solid rgba(212,84,122,.07); animation: qgCardIn .4s ease both; } .qg-skel-img { height: 235px; background: linear-gradient(90deg, #f5eef3 25%, #f9f3f7 50%, #f5eef3 75%); background-size: 300% 100%; animation: qgSkeletonShimmer 1.6s ease-in-out infinite; } .qg-skel-body { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .65rem; } .qg-skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f0e8ee 25%, #f7f0f5 50%, #f0e8ee 75%); background-size: 300% 100%; animation: qgSkeletonShimmer 1.6s ease-in-out infinite; } .qg-skel-line--title { width: 75%; height: 16px; } .qg-skel-line--text { width: 90%; } .qg-skel-line--short { width: 45%; } @keyframes qgSkeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ═══════════════════════════════════════════════════════════ 37 · PAYMENT TRUST ROW — enhanced v6.0 Subtle, inline — doesn't compete with CTA hierarchy. ═══════════════════════════════════════════════════════════ */ .qg-payment-trust { background: #FFFBFD; border-top: 1px solid rgba(212,84,122,.06); border-bottom: 1px solid rgba(212,84,122,.06); padding: .65rem clamp(1.5rem, 5%, 3rem); display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: center; } .qg-pt-label { font-size: .72rem; font-weight: 600; color: rgba(90,46,72,.4); letter-spacing: .04em; white-space: nowrap; } .qg-pt-logos { display: flex; align-items: center; gap: .4rem .7rem; flex-wrap: wrap; } .qg-pt-method { font-size: .72rem; font-weight: 700; color: rgba(42,14,34,.5); letter-spacing: .04em; padding: .2rem .55rem; border-radius: 6px; background: rgba(42,14,34,.04); border: 1px solid rgba(42,14,34,.08); white-space: nowrap; } .qg-pt-sep { color: rgba(42,14,34,.2); font-size: .75rem; } .qg-pt-ssl { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: rgba(40,160,90,.7); } .qg-pt-ssl svg { width: 13px; height: 13px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE overrides for all new sections ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-collections { padding: 2rem 0 1.5rem; } .qg-ugc { padding: 3rem 1rem 2.5rem; } .qg-blog-teaser { padding: 3rem 1rem 2.5rem; } .qg-ugc-card:nth-child(3n+1) { aspect-ratio: 3 / 4; grid-row: span 1; } } @media (max-width: 480px) { .qg-ugc-grid { grid-template-columns: repeat(2, 1fr); } .qg-blog-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ SECTION RESCUE BLOCK v6.1 All CSS below was only in qg-bookings-additions.css and never loaded on the services page. This block ports every missing section so all content renders correctly without requiring the bookings CSS file. ═══════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────── HIW — ensure step cards have proper flex sizing and display ────────────────────────────────────────────────────────────────── */ .qg-hiw-steps { display: flex !important; flex-wrap: nowrap !important; position: relative !important; z-index: 2 !important; } .qg-hiw-steps .qg-hiw-step { flex: 1 1 200px !important; min-width: 180px !important; max-width: 360px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .qg-hiw-step h3, .qg-hiw-step p, .qg-hiw-num, .qg-hiw-time { opacity: 1 !important; visibility: visible !important; } /* ────────────────────────────────────────────────────────────────── ARTIST SPOTLIGHT (was ONLY in qg-bookings-additions.css) ────────────────────────────────────────────────────────────────── */ .qg-spotlight { padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem); background: linear-gradient(160deg, #FFF5F8 0%, #FFFBFD 55%, #FFF5F8 100%); border-top: 1px solid rgba(212,84,122,.08); position: relative; overflow: hidden; } .qg-spotlight::before { content: ""; position: absolute; top: -80px; right: -80px; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(212,84,122,.06), transparent 65%); filter: blur(60px); pointer-events: none; } .qg-spotlight::after { content: ""; position: absolute; bottom: -60px; left: -60px; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(155,126,200,.06), transparent 65%); filter: blur(55px); pointer-events: none; } .qg-spotlight-header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 2; } .qg-spotlight-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: #2A0E22; margin: .65rem 0 .75rem; } .qg-spotlight-header h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-spotlight-header p { font-size: .95rem; color: #9A6080; max-width: 440px; margin: 0 auto; line-height: 1.72; } .qg-spotlight-grid { display: grid !important; grid-template-columns: repeat(4,1fr); gap: 1.5rem; max-width: 1160px; margin: 0 auto 2.5rem; position: relative; z-index: 2; } @media (max-width: 1100px) { .qg-spotlight-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .qg-spotlight-grid { grid-template-columns: 1fr; max-width: 380px; } } .qg-spotlight-card { background: #fff !important; border-radius: 22px; overflow: hidden; border: 1.5px solid rgba(212,84,122,.11); box-shadow: 0 6px 24px rgba(42,14,34,.09), 0 2px 6px rgba(42,14,34,.05); transition: all .5s cubic-bezier(.22,1,.36,1); position: relative; display: block !important; visibility: visible !important; opacity: 1 !important; } .qg-spotlight-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(212,84,122,.7), rgba(201,168,108,.65), transparent); opacity: 0; transition: opacity .4s; } .qg-spotlight-card:hover { transform: translateY(-10px); border-color: rgba(212,84,122,.26); box-shadow: 0 18px 50px rgba(42,14,34,.13); } .qg-spotlight-card:hover::before { opacity: 1; } .qg-spotlight-img-wrap { position: relative; height: 220px; overflow: hidden; } .qg-spotlight-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s cubic-bezier(.22,1,.36,1); } .qg-spotlight-card:hover .qg-spotlight-img-wrap img { transform: scale(1.06); } .qg-spotlight-avail { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.88); border-radius: 9999px; padding: .26rem .72rem; font-size: .67rem; font-weight: 700; color: #1A8050; border: 1px solid rgba(40,200,114,.22); backdrop-filter: blur(8px); } .qg-spot-dot { width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; animation: qgPulse 2s ease-in-out infinite; } .qg-spotlight-body { padding: 1.1rem 1.2rem 1.4rem; } .qg-spotlight-body h3 { font-family: "Playfair Display", Georgia, serif; font-size: 1rem; font-weight: 700; color: #2A0E22; margin: 0 0 .2rem; } .qg-spot-spec { font-size: .77rem; color: #9A6080; margin: 0 0 .48rem; } .qg-spot-rating { display: flex; align-items: center; gap: .38rem; margin-bottom: .48rem; } .qg-spot-stars { color: #C9A86C; font-size: .76rem; letter-spacing: .07em; } .qg-spot-rating strong { font-size: .79rem; font-weight: 800; color: #7A5030; } .qg-spot-bio { font-size: .8rem; line-height: 1.6; color: #9A6080; margin: 0 0 .55rem; } .qg-spot-meta { display: flex; align-items: center; gap: .38rem; font-size: .72rem; color: rgba(90,46,72,.48); margin-bottom: .78rem; } .qg-spot-cta { display: inline-block; font-size: .8rem; font-weight: 700; color: #D4547A; text-decoration: none; border-bottom: 1px solid rgba(212,84,122,.25); padding-bottom: 1px; transition: all .25s; } .qg-spot-cta:hover { color: #B03060; border-color: rgba(176,48,96,.5); } .qg-spotlight-cta-row { text-align: center; position: relative; z-index: 2; } /* ────────────────────────────────────────────────────────────────── HYGIENE SECTION — override to match rose/plum page palette (the original bookings version uses a blue palette — we adapt it) ────────────────────────────────────────────────────────────────── */ /* Section already gets background from earlier rule in this file. These rules add the STRUCTURE that makes cards visible. */ .qg-hygiene-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 2; } .qg-hygiene-header { text-align: center; margin-bottom: 3rem; } .qg-hygiene-grid { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 1.5rem; position: relative; z-index: 2; } @media (max-width: 900px) { .qg-hygiene-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 540px) { .qg-hygiene-grid { grid-template-columns: 1fr; } } .qg-hygiene-card { background: rgba(255,255,255,.09) !important; border-radius: 20px; border: 1.5px solid rgba(212,84,122,.28) !important; padding: 1.8rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.12); transition: all .45s cubic-bezier(.22,1,.36,1); position: relative; overflow: hidden; display: block !important; visibility: visible !important; opacity: 1 !important; } .qg-hygiene-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(212,84,122,.7), rgba(201,168,108,.65), transparent); opacity: 0; transition: opacity .4s; } .qg-hygiene-card:hover { transform: translateY(-7px); border-color: rgba(212,84,122,.5) !important; } .qg-hygiene-card:hover::before { opacity: 1; } .qg-hygiene-icon { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 1.2rem; background: rgba(212,84,122,.15); border: 1.5px solid rgba(212,84,122,.3); display: grid; place-items: center; } .qg-hygiene-icon svg { width: 26px !important; height: 26px !important; stroke: #F0A8C4 !important; fill: none !important; display: block !important; } .qg-hygiene-card h3 { font-family: "Playfair Display", Georgia, serif; font-size: .96rem; font-weight: 700; color: #FFD6E8; margin: 0 0 .55rem; } .qg-hygiene-card p { font-size: .83rem; line-height: 1.72; color: rgba(255,220,235,.65); margin: 0 0 .9rem; } .qg-hygiene-cert { display: inline-block; padding: .24rem .75rem; border-radius: 9999px; background: rgba(40,200,114,.08); border: 1px solid rgba(40,200,114,.28); font-size: .66rem; font-weight: 700; letter-spacing: .05em; color: #5CE89A; } /* ────────────────────────────────────────────────────────────────── STANDARD SECTION — force grid and cards visible ────────────────────────────────────────────────────────────────── */ .qg-standard-grid { display: grid !important; position: relative !important; z-index: 3 !important; } .qg-standard-card { display: flex !important; flex-direction: column !important; align-items: center !important; visibility: visible !important; opacity: 1 !important; } .qg-standard-card h3, .qg-standard-card p, .qg-standard-badge, .qg-standard-icon { visibility: visible !important; opacity: 1 !important; } /* ────────────────────────────────────────────────────────────────── LOYALTY TIERS — ensure cards are visible on dark background ────────────────────────────────────────────────────────────────── */ .qg-loyalty-tiers { display: grid !important; position: relative !important; z-index: 3 !important; } .qg-loyalty-tier { display: flex !important; flex-direction: column !important; align-items: center !important; visibility: visible !important; opacity: 1 !important; background: rgba(255,255,255,.09) !important; border: 1.5px solid rgba(212,84,122,.35) !important; } .qg-loyalty-tier h3, .qg-loyalty-tier-range, .qg-loyalty-benefits, .qg-loyalty-benefits li, .qg-loyalty-redeem, .qg-loyalty-tier-icon { visibility: visible !important; opacity: 1 !important; } .qg-loyalty-tier h3 { color: #FFD6E8 !important; } .qg-loyalty-tier--gold h3 { color: #F0DEB8 !important; } .qg-loyalty-tier-range { color: rgba(255,220,235,.55) !important; } .qg-loyalty-benefits li { color: rgba(255,220,235,.8) !important; } /* ────────────────────────────────────────────────────────────────── GIFT SECTION — ensure inner grid and copy render ────────────────────────────────────────────────────────────────── */ .qg-gift-inner { display: grid !important; grid-template-columns: 380px 1fr; gap: 5rem; align-items: center; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } @media (max-width: 960px) { .qg-gift-inner { grid-template-columns: 1fr; gap: 3rem; justify-items: center; text-align: center; } } .qg-gift-card { width: 100%; max-width: 340px; aspect-ratio: 16/9; border-radius: 22px; padding: 1.5rem 1.8rem; background: linear-gradient(135deg, #1a1a2e 0%, #2d1b5e 50%, #3d2060 100%); border: 1px solid rgba(201,168,108,.25); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 4px 20px rgba(201,168,108,.15); position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: space-between; animation: qgGiftFloat 3.5s ease-in-out infinite; } @keyframes qgGiftFloat { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-14px) rotate(1.5deg)} } .qg-gift-card-foil { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 30%, rgba(201,168,108,.07) 50%, transparent 70%); background-size: 200%; animation: qgShimmer 4.5s ease-in-out infinite; pointer-events: none; } .qg-gift-card-top { display: flex; align-items: center; justify-content: space-between; } .qg-gift-logo { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; font-weight: 700; color: #fff; } .qg-gift-badge { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C9A86C; border: 1px solid rgba(201,168,108,.35); padding: .18rem .58rem; border-radius: 9999px; } .qg-gift-amount { font-family: "Playfair Display", Georgia, serif; font-size: 2.4rem; font-weight: 700; background: linear-gradient(135deg, #F0DEB8, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: .35rem; } .qg-gift-tagline { font-size: .82rem; color: rgba(255,220,235,.5); font-style: italic; } .qg-gift-copy h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: #FFD6E8; margin: .65rem 0 1rem; } .qg-gift-copy h2 em { font-style: italic; background: linear-gradient(135deg, #F0A8C4, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-gift-copy p { font-size: .96rem; line-height: 1.82; color: rgba(255,220,235,.62); margin: 0 0 1.5rem; } .qg-gift-perks { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; } .qg-gift-perk { display: flex; align-items: center; gap: .72rem; font-size: .87rem; color: rgba(255,220,235,.75); } .qg-gift-perk svg { width: 15px; height: 15px; stroke: #C9A86C; fill: none; flex-shrink: 0; } .qg-gift-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .qg-gift-actions .qg-btn--ghost { border-color: rgba(255,220,235,.22); color: rgba(255,220,235,.72); } .qg-gift-actions .qg-btn--ghost:hover { border-color: rgba(255,220,235,.5); color: #fff; background: rgba(255,255,255,.08); } /* ────────────────────────────────────────────────────────────────── CITY COVERAGE — force chips visible ────────────────────────────────────────────────────────────────── */ .qg-city-grid { display: flex !important; flex-wrap: wrap !important; position: relative !important; z-index: 2 !important; } .qg-city-chip { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } .qg-city-chip-name { color: #2A0E22 !important; } .qg-city-chip-count { color: rgba(90,46,72,.5) !important; } /* ────────────────────────────────────────────────────────────────── FAQ ACCORDION — force items and question buttons visible ────────────────────────────────────────────────────────────────── */ .qg-faq { padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem); background: #FFFBFD; border-top: 1px solid rgba(212,84,122,.08); position: relative; } .qg-faq::before { content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(212,84,122,.04), transparent 70%); filter: blur(60px); pointer-events: none; } .qg-faq-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; } .qg-faq-header { text-align: center; margin-bottom: 3rem; } .qg-faq-header h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: #2A0E22; margin: .65rem 0 0; } .qg-faq-header h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-faq-list { display: flex !important; flex-direction: column !important; gap: .6rem !important; position: relative !important; z-index: 2 !important; } .qg-faq-item { background: #fff !important; border: 1.5px solid rgba(212,84,122,.1) !important; border-radius: 16px !important; overflow: hidden; display: block !important; visibility: visible !important; opacity: 1 !important; transition: border-color .35s, box-shadow .35s; } .qg-faq-item:hover { border-color: rgba(212,84,122,.22) !important; box-shadow: 0 4px 20px rgba(42,14,34,.07); } .qg-faq-item.is-open { border-color: rgba(212,84,122,.28) !important; } .qg-faq-q { width: 100%; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; padding: 1.15rem 1.5rem; background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: .92rem; font-weight: 700; color: #2A0E22 !important; line-height: 1.4; transition: color .3s; visibility: visible !important; opacity: 1 !important; } .qg-faq-q:hover, .qg-faq-item.is-open .qg-faq-q { color: #D4547A !important; } .qg-faq-chevron { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(212,84,122,.07); display: grid; place-items: center; transition: transform .35s cubic-bezier(.22,1,.36,1), background .3s; } .qg-faq-chevron svg { width: 14px !important; height: 14px !important; stroke: #D4547A !important; fill: none !important; } .qg-faq-item.is-open .qg-faq-chevron { transform: rotate(180deg); background: rgba(212,84,122,.12); } .qg-faq-a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .qg-faq-a p { padding: 0 1.5rem 1.3rem; font-size: .88rem; line-height: 1.78; color: #7A5868; margin: 0; } .qg-faq-cta { text-align: center; margin-top: 2.8rem; } .qg-faq-cta p { font-size: .9rem; color: #9A6080; margin: 0 0 1rem; } /* ────────────────────────────────────────────────────────────────── TESTIMONIAL CARDS (avatar, verified badge, date) ────────────────────────────────────────────────────────────────── */ .qg-t-card-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; } .qg-t-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, rgba(212,84,122,.18), rgba(201,168,108,.14)); border: 1.5px solid rgba(212,84,122,.22); display: grid; place-items: center; font-family: "Playfair Display", Georgia, serif; font-size: 1rem; font-weight: 700; color: #D4547A; flex-shrink: 0; } .qg-t-author { font-size: .85rem; font-weight: 700; color: #2A0E22; } .qg-t-verified { font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: #1A8050; background: rgba(40,200,114,.08); border: 1px solid rgba(40,200,114,.2); border-radius: 9999px; padding: .1rem .45rem; margin-left: .38rem; } .qg-t-service { font-size: .77rem; color: #9A6080; margin-top: .18rem; } .qg-t-date { display: block; font-size: .74rem; color: rgba(90,46,72,.38); margin-top: .6rem; } .qg-google-rating { display: flex; align-items: center; gap: .5rem; justify-content: center; margin: .6rem 0 .4rem; } .qg-google-stars { color: #C9A86C; font-size: 1rem; letter-spacing: .05em; } .qg-google-score { font-size: .92rem; font-weight: 800; color: #7A5030; } .qg-google-count { font-size: .82rem; color: #9A6080; text-decoration: none; } .qg-google-count:hover { color: #D4547A; } .qg-reviews-cta { display: inline-block; font-size: .82rem; font-weight: 600; color: #D4547A; text-decoration: none; margin-top: .4rem; border-bottom: 1px solid rgba(212,84,122,.25); } /* ────────────────────────────────────────────────────────────────── REFER & EARN (sometimes missing from services context) ────────────────────────────────────────────────────────────────── */ .qg-refer { padding: clamp(3rem,5vw,4.5rem) clamp(1.5rem,5%,4rem); background: linear-gradient(135deg, #FFF0F6 0%, #FFF8F0 50%, #FFF0F6 100%); border-top: 1px solid rgba(212,84,122,.1); border-bottom: 1px solid rgba(201,168,108,.1); } .qg-refer-inner { max-width: 900px; margin: 0 auto; display: flex !important; flex-wrap: wrap; align-items: center; gap: 2rem; justify-content: center; } .qg-refer-icon { flex-shrink: 0; color: #D4547A; } .qg-refer-icon svg { width: 56px; height: 56px; stroke: #D4547A; fill: none; } .qg-refer-copy { flex: 1; min-width: 220px; } .qg-refer-copy h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 700; color: #2A0E22; margin: 0 0 .5rem; } .qg-refer-copy h2 em { font-style: italic; background: linear-gradient(135deg, #D4547A, #C9A86C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qg-refer-copy p { font-size: .92rem; color: #9A6080; line-height: 1.72; margin: 0; } .qg-refer-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } .qg-refer-note { font-size: .76rem; color: rgba(90,46,72,.45); } .qg-btn-primary--refer { background: linear-gradient(135deg, #C9A86C, #B8924A) !important; color: #1A0818 !important; border: none !important; } /* ═══════════════════════════════════════════════════════════════ LIGHT-SECTION FINAL OVERRIDES v6.1 These come last so they beat all earlier dark-section rules. Gift section and Refer section are light-background. ═══════════════════════════════════════════════════════════════ */ /* ── GIFT SECTION: force light-mode text ── */ .qg-gift .qg-gift-copy h2 { color: #2A0E22 !important; } .qg-gift .qg-gift-copy h2 em { background: linear-gradient(135deg,#D4547A,#C9A86C) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } .qg-gift .qg-gift-copy p { color: #9A6080 !important; } .qg-gift .qg-gift-perk { color: #5A2E48 !important; } .qg-gift .qg-gift-perk svg { stroke: #C9A86C !important; } .qg-gift .qg-gift-actions .qg-btn--ghost { border-color: rgba(42,14,34,.2) !important; color: #5A2E48 !important; background: transparent !important; } .qg-gift .qg-gift-actions .qg-btn--ghost:hover { border-color: rgba(212,84,122,.4) !important; color: #D4547A !important; background: rgba(212,84,122,.04) !important; } .qg-gift .qg-section-eyebrow { color: rgba(176,48,96,.65) !important; } /* ── REFER SECTION: force light-mode — background + all text ── */ .qg-refer { background: linear-gradient(135deg, #FFF0F6 0%, #FFF8F0 50%, #FFF0F6 100%) !important; border-top: 1px solid rgba(212,84,122,.1) !important; border-bottom: 1px solid rgba(201,168,108,.1) !important; } .qg-refer .qg-refer-icon { color: #D4547A !important; } .qg-refer .qg-refer-icon svg { stroke: #D4547A !important; } .qg-refer .qg-refer-copy h2 { color: #2A0E22 !important; } .qg-refer .qg-refer-copy h2 em { background: linear-gradient(135deg,#D4547A,#C9A86C) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } .qg-refer .qg-refer-copy p { color: #9A6080 !important; } .qg-refer .qg-refer-note { color: rgba(90,46,72,.5) !important; } .qg-btn-primary--refer { background: linear-gradient(135deg, #D4547A, #B03060) !important; color: #fff !important; border: none !important; } /* ================================================================ QwikGlam — Services Page Mobile-First Premium Layer Target : ≤768px (phone + small tablet) Rule : ZERO desktop/laptop styles changed — mobile only. Design : World-class luxury beauty on-demand, mobile couture. ================================================================ */ @media (max-width: 768px) { /* ── Global section rhythm ── */ .qg-how-it-works, .qg-transformation, .qg-pledge, .qg-testimonials, .qg-hygiene, .qg-standard, .qg-loyalty, .qg-artist-strip, .qg-app-cta, .qg-refer, .qg-city-coverage { padding-top: clamp(2.8rem, 9vw, 4rem) !important; padding-bottom: clamp(2.8rem, 9vw, 4rem) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Section inner padding for contained sections */ .qg-hiw-header, .qg-trans-header, .qg-pledge-header, .qg-testimonials-header, .qg-hygiene-header, .qg-standard-header, .qg-loyalty-header, .qg-loyalty-inner > *:not(.qg-loyalty-tiers), .qg-reels-header, .qg-app-copy, .qg-city-inner > *:not(.qg-city-grid), .qg-refer-inner, .qg-artist-strip-inner, .qg-standard-inner > *:not(.qg-standard-grid), .qg-pledge-inner > *:not(.qg-pledge-grid) { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /* ================================================================ HERO — Full bleed, align bottom on mobile ================================================================ */ .qg-hero { min-height: 100svh !important; min-height: -webkit-fill-available !important; align-items: flex-end !important; place-items: unset !important; display: flex !important; } .qg-hero__content { padding: 1.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important; max-width: 100% !important; text-align: left !important; width: 100% !important; gap: .9rem !important; } .qg-hero__badge { font-size: .62rem !important; padding: .38rem 1rem !important; } .qg-hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem) !important; line-height: 1.06 !important; margin: 0 !important; text-align: left !important; } .qg-hero__subtitle { font-size: .95rem !important; line-height: 1.65 !important; text-align: left !important; margin: 0 !important; } /* Hero CTA button — full width, big touch target */ .qg-hero__cta { width: 100% !important; padding: 1.1rem 2rem !important; font-size: .9rem !important; justify-content: center !important; border-radius: 16px !important; min-height: 54px !important; } /* Remove hover transform on touch */ .qg-hero__cta:hover { transform: none !important; } /* Scroll cue: hide on mobile */ .qg-scroll-cue { display: none !important; } /* ================================================================ TRUST STAT STRIP — Compact 3-col grid ================================================================ */ .qg-trust-strip { padding: 0 !important; } .qg-trust-strip-inner { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; flex-direction: unset !important; align-items: unset !important; justify-content: unset !important; gap: 0 !important; flex-wrap: unset !important; max-width: 100% !important; } .qg-trust-strip-divider { display: none !important; } .qg-trust-stat { padding: 1rem .5rem !important; border-right: 1px solid rgba(212,84,122,.1) !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; gap: .15rem !important; } /* Last stat row — span all 3 cols and kill borders */ .qg-trust-stat:last-child { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: none !important; padding: .85rem 1rem !important; } .qg-trust-stat:nth-child(3), .qg-trust-stat:nth-child(5) { border-right: none !important; } /* Rows 1 & 2 */ .qg-trust-stat:nth-child(4), .qg-trust-stat:nth-child(5) { border-bottom: none !important; } .qg-trust-stat-num { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; } .qg-trust-stat-label { font-size: .58rem !important; letter-spacing: .04em !important; } /* ================================================================ BRAND PARTNERS MARQUEE — Already scrolling, just shrink text ================================================================ */ .qg-brand-partners { padding: .75rem 0 !important; } .qg-brand-partners-inner { gap: .75rem !important; } .qg-bp-label { font-size: .6rem !important; padding-left: 1rem !important; display: block !important; padding-bottom: .4rem !important; } .qg-bp-brand { font-size: .8rem !important; } /* ================================================================ FILTER HUB (sticky category + occasion bars) ================================================================ */ .qg-filter-hub { /* Lower the sticky top on mobile — header is shorter */ top: var(--qg-header-h-mobile, 56px) !important; } .qg-filter-hub-inner { padding: .4rem 0 .3rem !important; } .qg-filter-row { gap: .3rem !important; padding: .25rem 1rem !important; -webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%) !important; } .qg-category-btn { padding: .45rem 1rem !important; font-size: .76rem !important; min-height: 36px !important; border-radius: 9999px !important; } .qg-cat-icon { width: 12px !important; height: 12px !important; } .qg-occasion-btn { padding: .38rem .9rem !important; font-size: .72rem !important; min-height: 34px !important; } .qg-filter-row-divider { margin: 0 .75rem !important; } /* ================================================================ URGENCY STRIP ================================================================ */ .qg-urgency-strip { padding: .65rem 1rem !important; gap: .65rem !important; justify-content: flex-start !important; } .qg-urgency-divider { display: none !important; } .qg-urgency-text { font-size: .75rem !important; } .qg-urgency-badges { gap: .4rem !important; } .qg-urgency-badge { font-size: .68rem !important; padding: .26rem .65rem !important; } /* ================================================================ FIRST BOOKING PROMO STRIP ================================================================ */ .qg-first-booking-strip { flex-direction: column !important; gap: .75rem !important; padding: 1rem 1.25rem !important; text-align: center !important; } .qg-first-booking-strip .qg-btn-primary, .qg-first-booking-strip a { width: 100% !important; justify-content: center !important; text-align: center !important; } /* ================================================================ SERVICES WRAPPER + CONTROLS ================================================================ */ .qg-services-wrapper { padding: 1.5rem 1rem 2rem !important; } .qg-controls { flex-direction: column !important; gap: .75rem !important; margin-bottom: 1.8rem !important; align-items: stretch !important; } .qg-controls input, .qg-controls input[type="search"], .qg-controls input[type="text"] { min-width: unset !important; width: 100% !important; padding: .9rem 1rem .9rem 2.6rem !important; font-size: .88rem !important; } .qg-controls select { min-width: unset !important; width: 100% !important; font-size: .88rem !important; padding: .9rem 2.4rem .9rem 1rem !important; } .qg-badge { width: 100% !important; justify-content: center !important; border-radius: 14px !important; } /* ================================================================ SERVICE CARDS (qg-ultra-card) — Horizontal list layout ================================================================ */ .qg-services-grid { grid-template-columns: 1fr !important; gap: 0 !important; border-top: 1px solid rgba(212,84,122,.1) !important; } .qg-ultra-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; border-bottom: 1px solid rgba(212,84,122,.1) !important; box-shadow: none !important; animation: none !important; flex-direction: row !important; min-height: 130px !important; } /* Disable desktop hover effects on touch */ .qg-ultra-card:hover { transform: none !important; box-shadow: none !important; border-color: rgba(212,84,122,.1) !important; } .qg-ultra-card:hover::before, .qg-ultra-card:hover::after { opacity: 0 !important; } /* Active state for touch feedback */ .qg-ultra-card:active { background: rgba(253,246,248,.6) !important; } .qg-ultra-media { width: 120px !important; min-width: 120px !important; height: auto !important; flex-shrink: 0 !important; border-radius: 0 !important; } .qg-ultra-media img { transform: none !important; filter: none !important; transition: none !important; } .qg-ultra-card:hover .qg-ultra-media img { transform: none !important; filter: none !important; } .qg-ultra-duration { bottom: 8px !important; right: 8px !important; font-size: .6rem !important; padding: .22rem .55rem !important; } /* Offer badge: position under the image */ .qg-ultra-offer { display: none !important; } .qg-ultra-body { padding: .9rem 1rem 1rem !important; text-align: left !important; justify-content: center !important; flex: 1 !important; min-width: 0 !important; background: #fff !important; } .qg-ultra-title { font-size: .97rem !important; margin: 0 0 .25rem !important; text-align: left !important; } .qg-ultra-rating { justify-content: flex-start !important; margin-bottom: .3rem !important; gap: .3rem !important; } .qg-ultra-stars { font-size: .72rem !important; } .qg-ultra-rating-score { font-size: .72rem !important; } .qg-ultra-rating-count { font-size: .68rem !important; } .qg-ultra-desc { font-size: .8rem !important; -webkit-line-clamp: 2 !important; margin-bottom: .5rem !important; } .qg-ultra-meta { font-size: .95rem !important; margin-bottom: .25rem !important; text-align: left !important; } .qg-ultra-proof { justify-content: flex-start !important; margin-bottom: .65rem !important; } .qg-ultra-proof-text { font-size: .68rem !important; } /* CTA: compact pill, left-aligned */ .qg-ultra-cta { padding: .65rem 1.2rem !important; font-size: .78rem !important; width: auto !important; align-self: flex-start !important; border-radius: 9999px !important; } .qg-ultra-cta:hover { transform: none !important; box-shadow: none !important; } /* ================================================================ HOW IT WORKS — Timeline layout ================================================================ */ .qg-how-it-works { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-hiw-header { margin-bottom: 2rem !important; } .qg-hiw-header h2 { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; } .qg-hiw-header p { font-size: .9rem !important; } .qg-hiw-steps { grid-template-columns: 1fr !important; gap: 1rem !important; max-width: 100% !important; margin-bottom: 0 !important; } /* Connecting line — hidden on mobile (vertical timeline instead) */ .qg-hiw-steps::before { display: none !important; } .qg-hiw-step { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 1rem !important; padding: 1.2rem 1rem !important; text-align: left !important; border-radius: 18px !important; } .qg-hiw-step:hover { transform: none !important; box-shadow: var(--shadow-card) !important; } .qg-hiw-num { width: 50px !important; height: 50px !important; min-width: 50px !important; margin: 0 !important; font-size: 1.2rem !important; flex-shrink: 0 !important; } .qg-hiw-icon { display: none !important; } .qg-hiw-step h3 { font-size: .97rem !important; } .qg-hiw-step p { font-size: .82rem !important; } .qg-hiw-time { font-size: .65rem !important; } .qg-hiw-cta-row { margin-top: 1.5rem !important; } .qg-hiw-explore-btn { width: 100% !important; display: block !important; text-align: center !important; padding: 1rem 2rem !important; } .qg-hiw-connector { display: none !important; } /* ================================================================ TRANSFORMATION (Before / After) — Vertical scroll with wide cards ================================================================ */ .qg-transformation { padding-left: 0 !important; padding-right: 0 !important; } .qg-trans-header { padding-left: 1.25rem !important; padding-right: 1.25rem !important; margin-bottom: 1.8rem !important; } .qg-trans-header h2 { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; } .qg-trans-grid { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 16px !important; padding: 0 1.25rem 1rem !important; grid-template-columns: unset !important; margin-bottom: 1.5rem !important; scrollbar-width: none !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; } .qg-trans-grid::-webkit-scrollbar { display: none !important; } .qg-trans-card { flex: 0 0 78vw !important; max-width: 300px !important; scroll-snap-align: start !important; aspect-ratio: 3/4 !important; } /* Disable hover on touch */ .qg-trans-card:hover { transform: none !important; box-shadow: 0 12px 45px rgba(42,14,34,.1) !important; } .qg-trans-card:hover::before { opacity: 0 !important; } /* Larger drag handle for thumb */ .qg-trans-handle { width: 48px !important; height: 48px !important; } .qg-trans-cta-row { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-trans-cta-row .qg-btn--ghost { width: 100% !important; justify-content: center !important; text-align: center !important; } /* ================================================================ THE QWIKGLAM STANDARD (pledge + feature strip merged) ================================================================ */ .qg-standard { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-standard-header { margin-bottom: 1.8rem !important; } .qg-standard-header h2 { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; } .qg-standard-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; max-width: 100% !important; margin-bottom: 2rem !important; } .qg-standard-card { padding: 1.3rem 1rem !important; border-radius: 18px !important; } .qg-standard-icon { width: 44px !important; height: 44px !important; margin-bottom: .75rem !important; } .qg-standard-card h3 { font-size: .88rem !important; margin-bottom: .4rem !important; } .qg-standard-card p { font-size: .78rem !important; line-height: 1.58 !important; } /* Bottom trust stats bar */ .qg-standard-trust { flex-wrap: wrap !important; gap: 0 !important; justify-content: space-around !important; padding: 1rem !important; } .qg-standard-trust-stat { padding: .65rem .75rem !important; flex: 0 0 50% !important; border-right: none !important; } .qg-standard-trust-divider { display: none !important; } /* ================================================================ LOYALTY PROGRAMME — Horizontal snap carousel ================================================================ */ .qg-loyalty { padding-left: 0 !important; padding-right: 0 !important; } .qg-loyalty-header { padding-left: 1.25rem !important; padding-right: 1.25rem !important; margin-bottom: 2rem !important; } .qg-loyalty-header h2 { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; } .qg-loyalty-tiers { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 14px !important; padding: 0 1.25rem 1rem !important; grid-template-columns: unset !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 2rem !important; scrollbar-width: none !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-loyalty-tiers::-webkit-scrollbar { display: none !important; } .qg-loyalty-tier { flex: 0 0 78vw !important; max-width: 280px !important; scroll-snap-align: start !important; border-radius: 20px !important; } .qg-loyalty-inner > .qg-hiw-cta-row, .qg-loyalty-inner > [class*="cta"] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-loyalty-inner .qg-btn-primary { width: 100% !important; justify-content: center !important; } /* ================================================================ TESTIMONIALS — Horizontal snap carousel ================================================================ */ .qg-testimonials-header { padding-left: 1.25rem !important; padding-right: 1.25rem !important; margin-bottom: 1.8rem !important; } .qg-testimonials-header h2 { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; } /* Testimonials lists — make scrollable on mobile */ .qg-t-list, .qg-t-list--six { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 14px !important; padding: 0 1.25rem 1rem !important; flex-wrap: nowrap !important; scrollbar-width: none !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; /* Override existing grid layouts */ grid-template-columns: unset !important; } .qg-t-list::-webkit-scrollbar, .qg-t-list--six::-webkit-scrollbar { display: none !important; } /* Testimonial card — fixed scroll width */ .qg-t-list > *, .qg-t-list--six > * { flex: 0 0 82vw !important; max-width: 320px !important; min-width: 260px !important; scroll-snap-align: start !important; border-radius: 20px !important; } .qg-t-list > *:hover, .qg-t-list--six > *:hover { transform: none !important; box-shadow: var(--shadow-card) !important; } /* Aggregate rating strip */ .qg-feature-trust, .qg-testimonials-rating-strip { padding: 1rem 1.25rem !important; flex-wrap: wrap !important; justify-content: center !important; gap: .75rem !important; } /* ================================================================ SAFETY & HYGIENE — 2×3 compact grid ================================================================ */ .qg-hygiene { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-hygiene-header { margin-bottom: 1.8rem !important; } .qg-hygiene-header h2 { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; } .qg-hygiene-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .qg-hygiene-card { padding: 1.3rem 1rem !important; border-radius: 18px !important; } .qg-hygiene-icon { width: 46px !important; height: 46px !important; margin-bottom: .85rem !important; } .qg-hygiene-icon svg { width: 22px !important; height: 22px !important; } .qg-hygiene-card h3 { font-size: .85rem !important; margin-bottom: .35rem !important; } .qg-hygiene-card p { font-size: .76rem !important; line-height: 1.58 !important; margin-bottom: .6rem !important; } .qg-hygiene-cert { font-size: .6rem !important; padding: .18rem .6rem !important; } /* ================================================================ ARTIST CREDENTIALS STRIP ================================================================ */ .qg-artist-strip-inner { flex-direction: column !important; gap: 2rem !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-artist-cred-list { gap: .8rem !important; } .qg-artist-cred { gap: .6rem !important; } .qg-artist-cred svg { width: 16px !important; height: 16px !important; min-width: 16px !important; } /* ================================================================ REELS / VIDEO SECTION ================================================================ */ .qg-reels-header { margin-bottom: 1.5rem !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-reels-header h2 { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; } /* Reel cards: slightly smaller on mobile */ .qg-reel-card { min-width: 190px !important; max-width: 190px !important; height: 340px !important; border-radius: 18px !important; } /* ================================================================ APP DOWNLOAD CTA ================================================================ */ .qg-app-cta { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-app-inner { grid-template-columns: 1fr !important; gap: 2rem !important; text-align: center !important; } .qg-app-copy { padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } .qg-app-copy h2 { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; } .qg-app-features { justify-content: center !important; flex-direction: column !important; align-items: flex-start !important; max-width: 280px !important; margin: 0 auto !important; } .qg-app-stats { justify-content: center !important; gap: 1rem !important; flex-wrap: wrap !important; } .qg-app-buttons { justify-content: center !important; flex-wrap: wrap !important; gap: .75rem !important; } .qg-app-btn { flex: 0 0 calc(50% - .375rem) !important; min-width: 140px !important; justify-content: center !important; } /* Phone mockup: hidden to save space */ .qg-app-visual { min-height: 200px !important; } .qg-app-phone { width: 160px !important; height: 330px !important; } .qg-app-notif { display: none !important; } /* ================================================================ CITY COVERAGE ================================================================ */ .qg-city-inner { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-city-grid { gap: .6rem !important; justify-content: flex-start !important; padding: 0 1.25rem !important; } .qg-city-chip { padding: .4rem 1rem !important; font-size: .76rem !important; min-height: 36px !important; } /* ================================================================ REFER & EARN BANNER ================================================================ */ .qg-refer { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-refer-inner { flex-direction: column !important; text-align: center !important; gap: 1.5rem !important; padding: 1.8rem 1.5rem !important; } .qg-refer-icon { width: 64px !important; height: 64px !important; margin: 0 auto !important; } .qg-refer-copy h2 { font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important; } .qg-refer-copy p { font-size: .86rem !important; } .qg-refer-actions { width: 100% !important; align-items: stretch !important; } .qg-btn-primary--refer { width: 100% !important; text-align: center !important; justify-content: center !important; white-space: normal !important; padding: 1rem 1.5rem !important; } .qg-refer-note { max-width: 100% !important; text-align: center !important; } /* ================================================================ PAYMENT TRUST STRIP ================================================================ */ .qg-payment-trust { gap: .75rem !important; flex-wrap: wrap !important; justify-content: center !important; padding: .85rem 1.25rem !important; } .qg-payment-trust svg, .qg-payment-trust img { max-height: 20px !important; } /* ================================================================ FAQ ================================================================ */ .qg-faq-q { padding: 1.1rem 1.25rem !important; font-size: .9rem !important; min-height: 56px !important; } .qg-faq-a p { padding: 0 1.25rem 1.1rem !important; font-size: .84rem !important; line-height: 1.7 !important; } .qg-faq-chevron svg { width: 18px !important; height: 18px !important; } /* ================================================================ SKELETON LOADING CARDS ================================================================ */ .qg-skeleton-card { flex-direction: row !important; height: 130px !important; border-radius: 0 !important; } .qg-skeleton-card > *:first-child { width: 120px !important; min-width: 120px !important; flex-shrink: 0 !important; } /* ================================================================ EMPTY STATE ================================================================ */ .qg-empty-state { padding: 3rem 1.25rem !important; } /* ================================================================ MODAL — Bottom sheet on mobile ================================================================ */ .qg2-window { width: 100% !important; max-width: 100% !important; height: 94svh !important; margin: auto 0 0 !important; border-radius: 28px 28px 0 0 !important; overflow-y: auto !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; } .qg2-modal-topbar { border-radius: 28px 28px 0 0 !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } /* Drag handle indicator */ .qg2-modal-topbar::before { content: '' !important; display: block !important; width: 36px !important; height: 4px !important; background: rgba(90,46,72,.18) !important; border-radius: 99px !important; margin: 0 auto 10px !important; } /* ================================================================ CONCIERGE FAB — Safe area ================================================================ */ .qg-concierge { right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; width: 52px !important; height: 52px !important; } .qg-concierge:hover { transform: none !important; } /* Toast — full width on mobile */ .qg-toast { right: 1rem !important; left: 1rem !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; font-size: .84rem !important; } } /* end @media (max-width: 768px) */ /* ================================================================ SMALL PHONE — ≤430px overrides ================================================================ */ @media (max-width: 430px) { .qg-hero__title { font-size: clamp(2.2rem, 12vw, 2.8rem) !important; } .qg-ultra-media { width: 100px !important; min-width: 100px !important; } .qg-ultra-title { font-size: .9rem !important; } .qg-trans-card { flex: 0 0 84vw !important; } .qg-loyalty-tier { flex: 0 0 84vw !important; } .qg-t-list > *, .qg-t-list--six > * { flex: 0 0 88vw !important; } .qg-standard-grid { grid-template-columns: 1fr !important; } .qg-hygiene-grid { grid-template-columns: 1fr !important; } .qg-trust-strip-inner { grid-template-columns: 1fr 1fr !important; } .qg-trust-stat:last-child { grid-column: 1 / -1 !important; } /* App buttons: stacked full-width */ .qg-app-btn { flex: 0 0 100% !important; } .qg-hiw-step { gap: .75rem !important; padding: 1rem !important; } .qg-hiw-num { width: 44px !important; height: 44px !important; min-width: 44px !important; font-size: 1rem !important; } .qg-reel-card { min-width: 175px !important; max-width: 175px !important; height: 315px !important; } .qg2-window { height: 96svh !important; } } /* end @media (max-width: 430px) *//* ================================================================ QwikGlam — Mobile Comprehensive Fix v5 Addresses all 11 issues from screenshot review. ONLY max-width media queries — desktop untouched. ================================================================ */ @media (max-width: 768px) { /* ================================================================ 1. HEADER — Show search icon, compact header row ================================================================ */ /* Header inner: tighter gap, keep search visible */ .qg-header__inner { gap: .6rem !important; padding: 0 1rem !important; height: 58px !important; } /* Logo: slightly smaller */ .qg-logo a { font-size: 1.35rem !important; } /* City button: compact */ .qg-city-btn { padding: 4px 10px !important; font-size: .72rem !important; gap: 4px !important; } /* Search + icon buttons: always visible, properly sized */ .qg-header__actions { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; } .qg-header__search-btn, .qg-header__icon-btn { display: flex !important; width: 34px !important; height: 34px !important; flex-shrink: 0 !important; border-radius: 50% !important; } /* Hamburger: visible */ .qg-menu-toggle { display: flex !important; order: 10 !important; margin-left: 0 !important; padding: 5px !important; flex-shrink: 0 !important; } /* Prevent Book Now header btn from squishing layout */ .qg-btn--glow { display: none !important; } .qg-btn--book-now { display: none !important; } /* Announcement bar: compact single line */ .qg-announcement-bar { height: 30px !important; max-height: 30px !important; font-size: .66rem !important; } /* Header sits just below bar */ .qg-header { top: 30px !important; } body.qg-bar-hidden .qg-header { top: 0 !important; } /* ================================================================ 2. HERO — 65svh, styled text, visible content ================================================================ */ .qg-hero { min-height: 65svh !important; min-height: 65vh !important; height: 65svh !important; height: 65vh !important; display: flex !important; flex-direction: column !important; place-items: unset !important; align-items: stretch !important; justify-content: flex-end !important; overflow: hidden !important; padding-bottom: 0 !important; } /* BG layers */ .qg-hero__video, .qg-hero__overlay, .qg-hero__veil, .qg-hero__particles, .qg-hero__petals { position: absolute !important; inset: 0 !important; } .qg-hero__video { z-index: -3 !important; } .qg-hero__overlay, .qg-hero__veil { z-index: -2 !important; } .qg-hero__particles, .qg-hero__petals { z-index: -1 !important; } /* Strong dark bottom gradient so text always reads */ .qg-hero__overlay { background: linear-gradient(180deg, rgba(10,4,22,.15) 0%, rgba(10,4,22,.0) 18%, rgba(10,4,22,.5) 50%, rgba(10,4,22,.9) 76%, rgba(10,4,22,.99) 100%) !important; } .qg-hero__veil { background: linear-gradient(180deg, rgba(42,14,34,.2) 0%, rgba(42,14,34,.05) 18%, rgba(42,14,34,.5) 50%, rgba(42,14,34,.9) 76%, rgba(42,14,34,.99) 100%) !important; } .qg-hero__live-ticker { position: absolute !important; top: 66px !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 3 !important; font-size: .67rem !important; padding: 4px 12px !important; max-width: calc(100vw - 2rem) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .qg-hero__scroll, .qg-scroll-cue { display: none !important; } /* Content block: bottom-anchored, never clipped */ .qg-hero__content { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 100% !important; padding: 5.5rem 1.1rem 1.4rem !important; text-align: left !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: .6rem !important; margin-top: auto !important; overflow: visible !important; } /* Services hero */ .qg-hero__badge { font-size: .58rem !important; padding: 4px 12px !important; margin: 0 !important; } .qg-hero__title { font-size: clamp(1.95rem, 8.5vw, 2.7rem) !important; line-height: 1.07 !important; margin: 0 !important; text-align: left !important; } .qg-hero__title em { display: block !important; } .qg-hero__subtitle { font-size: .84rem !important; line-height: 1.56 !important; margin: 0 !important; color: rgba(255,230,240,.78) !important; } button.qg-hero__cta { width: 100% !important; min-height: 48px !important; border-radius: 13px !important; font-size: .87rem !important; padding: .88rem 1.4rem !important; justify-content: center !important; display: flex !important; align-items: center !important; } /* Home hero */ .qg-hero__urgency { font-size: .67rem !important; padding: 4px 10px !important; margin: 0 !important; display: inline-flex !important; } .qg-hero__content h1 { font-family: "Playfair Display", serif !important; font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; margin: 0 !important; color: #fff !important; } .qg-hero__content h1 em { display: block !important; } .qg-hero__content > p { font-size: .85rem !important; line-height: 1.55 !important; margin: 0 !important; color: rgba(255,255,255,.74) !important; max-width: 100% !important; } .qg-hero__ornament { display: none !important; } .qg-hero__cta { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; } .qg-hero__cta .qg-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px !important; padding: 12px 18px !important; font-size: .86rem !important; border-radius: 13px !important; } /* Home proof strip: 2×2 grid */ .qg-hero__proof { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding: 9px 8px !important; max-width: 100% !important; border-radius: 14px !important; } .qg-hero__proof-divider { display: none !important; } .qg-hero__proof-item { padding: 7px 6px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .qg-hero__proof-item:nth-child(1), .qg-hero__proof-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,.1) !important; } .qg-hero__proof-item:nth-child(1), .qg-hero__proof-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1) !important; } .qg-hero__proof-item strong { font-size: 1rem !important; } .qg-hero__proof-item span { font-size: .56rem !important; } /* ================================================================ 3. PAYMENT TRUST — single scrolling row, all methods visible ================================================================ */ .qg-payment-trust { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; align-items: center !important; gap: .55rem !important; padding: .6rem 1rem !important; justify-content: flex-start !important; -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%) !important; mask-image: linear-gradient(to right, black 90%, transparent 100%) !important; } .qg-payment-trust::-webkit-scrollbar { display: none !important; } .qg-pt-label { flex-shrink: 0 !important; font-size: .68rem !important; white-space: nowrap !important; } .qg-pt-logos { flex-wrap: nowrap !important; flex-shrink: 0 !important; gap: 5px !important; } .qg-pt-method { flex-shrink: 0 !important; font-size: .68rem !important; white-space: nowrap !important; } .qg-pt-ssl { flex-shrink: 0 !important; font-size: .68rem !important; white-space: nowrap !important; } .qg-pt-sep { flex-shrink: 0 !important; } /* ================================================================ 4. FILTER BAR — single tight row, horizontal scroll ================================================================ */ .qg-filter-hub { top: calc(30px + 58px) !important; /* announcement + header */ border-bottom: 1px solid rgba(212,84,122,.1) !important; } .qg-filter-hub-inner { padding: .3rem 0 .25rem !important; } .qg-filter-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; gap: .28rem !important; padding: .25rem .85rem !important; scroll-snap-type: x mandatory !important; -webkit-mask-image: linear-gradient(to right, transparent 0, black .85rem, black calc(100% - .85rem), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, black .85rem, black calc(100% - .85rem), transparent 100%) !important; } .qg-filter-row::-webkit-scrollbar { display: none !important; } .qg-category-btn, .qg-occasion-btn { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; min-height: 33px !important; } .qg-category-btn { padding: .38rem .88rem !important; font-size: .73rem !important; } .qg-occasion-btn { padding: .34rem .78rem !important; font-size: .7rem !important; } .qg-cat-icon { width: 11px !important; height: 11px !important; } .qg-filter-row-divider { margin: 0 .6rem !important; } .qg-occasion-label { display: none !important; } /* Home page filter tabs */ .qg-services-filter { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 0 1rem 5px !important; gap: 6px !important; margin-bottom: 1.1rem !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-services-filter::-webkit-scrollbar { display: none !important; } .qg-filter-tab { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; padding: 6px 15px !important; font-size: .76rem !important; min-height: 34px !important; } /* ================================================================ 5. THE PROCESS (How It Works) — 2-col premium cards ================================================================ */ .qg-how-it-works { padding: 2.5rem 1rem !important; } .qg-hiw-header { margin-bottom: 1.4rem !important; } .qg-hiw-header h2 { font-size: clamp(1.65rem, 7vw, 2.2rem) !important; } .qg-hiw-header p { font-size: .85rem !important; } /* 2-col grid for step cards */ .qg-hiw-steps { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; max-width: 100% !important; width: 100% !important; margin: 0 0 1.2rem !important; flex-direction: unset !important; align-items: stretch !important; justify-content: unset !important; flex-wrap: unset !important; } /* Step 3: full-width */ .qg-hiw-steps .qg-hiw-step:nth-child(5) { /* connector skipped, step 3 = 5th */ grid-column: 1 / -1 !important; } /* Also catch by last-child */ .qg-hiw-steps .qg-hiw-step:last-of-type { grid-column: 1 / -1 !important; } /* Step card: centred portrait */ .qg-hiw-steps .qg-hiw-step, .qg-hiw-step { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1rem .85rem !important; border-radius: 16px !important; background: rgba(255,255,255,.88) !important; border: 1.5px solid rgba(212,84,122,.1) !important; box-shadow: 0 4px 14px rgba(42,14,34,.07) !important; gap: .5rem !important; display: flex !important; max-width: 100% !important; min-width: 0 !important; flex: unset !important; } .qg-hiw-step:hover { transform: none !important; } /* Step 3: horizontal when full-width */ .qg-hiw-steps .qg-hiw-step:last-of-type { flex-direction: row !important; text-align: left !important; align-items: flex-start !important; gap: .85rem !important; } .qg-hiw-steps .qg-hiw-step:last-of-type .qg-hiw-num { flex-shrink: 0 !important; } .qg-hiw-steps .qg-hiw-step:last-of-type .qg-hiw-icon { display: none !important; } .qg-hiw-num { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important; margin: 0 !important; font-size: 1.1rem !important; flex-shrink: 0 !important; display: grid !important; place-items: center !important; } .qg-hiw-icon { display: flex !important; width: 38px !important; height: 38px !important; min-width: 38px !important; margin: 0 auto !important; } .qg-hiw-step h3 { font-size: .88rem !important; margin: 0 !important; font-weight: 700 !important; } .qg-hiw-step p { font-size: .76rem !important; margin: 0 !important; line-height: 1.52 !important; } .qg-hiw-time { font-size: .6rem !important; padding: .18rem .6rem !important; } .qg-hiw-connector { display: none !important; } .qg-hiw-cta-row { padding: 0 !important; margin-top: 1.1rem !important; } .qg-hiw-explore-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: .85rem 2rem !important; border-radius: 12px !important; font-size: .85rem !important; min-height: 46px !important; } /* Home page HIW */ .qg-how__inner { padding-inline: 1rem !important; } .qg-how__steps { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 1.1rem !important; flex-direction: unset !important; } .qg-step:last-of-type { grid-column: 1 / -1 !important; } .qg-step { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; background: #fff !important; border: 1px solid rgba(212,175,106,.14) !important; box-shadow: 0 4px 12px rgba(28,10,46,.07) !important; border-radius: 16px !important; padding: 1rem .85rem !important; gap: .5rem !important; border-bottom: none !important; } .qg-step:hover { transform: none !important; box-shadow: 0 4px 12px rgba(28,10,46,.07) !important; } .qg-step:last-of-type { flex-direction: row !important; text-align: left !important; align-items: flex-start !important; gap: .85rem !important; } .qg-step__num { font-family: "Playfair Display", serif !important; font-style: italic !important; font-size: 1.7rem !important; color: rgba(212,175,106,.55) !important; background: none !important; width: auto !important; height: auto !important; min-width: auto !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; } .qg-step__icon { display: none !important; } .qg-step h3 { font-size: .88rem !important; font-weight: 700 !important; margin: 0 !important; } .qg-step p { font-size: .76rem !important; line-height: 1.52 !important; margin: 0 !important; } .qg-step__connector { display: none !important; } .qg-how__promise { padding: 10px 1rem !important; font-size: .78rem !important; text-align: center !important; gap: 5px !important; width: 100% !important; border-radius: 12px !important; margin: 0 !important; flex-wrap: wrap !important; } /* ================================================================ 6. YOUR SAFETY — 2-col premium grid ================================================================ */ .qg-safety { padding: 2.5rem 1rem !important; } .qg-safety__inner { padding-inline: 0 !important; } .qg-safety__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .qg-safety-card { padding: 14px 11px !important; border-radius: 16px !important; } .qg-safety-card:hover { transform: none !important; } .qg-safety-card__icon { font-size: 1.3rem !important; margin-bottom: 6px !important; } .qg-safety-card h3 { font-size: .82rem !important; margin-bottom: 4px !important; } .qg-safety-card p { font-size: .72rem !important; line-height: 1.5 !important; } /* Services page hygiene - also 2-col */ .qg-hygiene { padding: 2.5rem 1rem !important; } .qg-hygiene-inner { padding: 0 !important; } .qg-hygiene-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .qg-hygiene-card { padding: 1.1rem .85rem !important; border-radius: 16px !important; text-align: center !important; } .qg-hygiene-card:hover { transform: none !important; } .qg-hygiene-icon { width: 44px !important; height: 44px !important; margin: 0 auto .8rem !important; } .qg-hygiene-icon svg { width: 20px !important; height: 20px !important; } .qg-hygiene-card h3 { font-size: .82rem !important; margin-bottom: .3rem !important; } .qg-hygiene-card p { font-size: .72rem !important; line-height: 1.52 !important; margin-bottom: .5rem !important; } .qg-hygiene-cert { font-size: .58rem !important; padding: .14rem .52rem !important; } /* ================================================================ 7. MEET YOUR ARTISTS — styled section, 2-col card grid ================================================================ */ /* Home page artist grid: 2×2 grid instead of carousel */ .qg-artists { background: var(--qg-bg, #FBF7F0) !important; } .qg-artists__inner { padding-inline: 0 !important; } .qg-artists__inner .qg-section-head { padding-inline: 1rem !important; } .qg-artists__inner .qg-center { padding-inline: 1rem !important; } .qg-artists-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 1rem 1rem !important; margin-bottom: 1rem !important; /* Remove carousel styles */ flex-direction: unset !important; overflow-x: unset !important; scroll-snap-type: unset !important; -webkit-mask-image: none !important; mask-image: none !important; } .qg-artist-card { flex: unset !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; border-radius: 18px !important; box-shadow: 0 4px 16px rgba(28,10,46,.1) !important; } .qg-artist-card:hover { transform: none !important; box-shadow: 0 4px 16px rgba(28,10,46,.1) !important; } /* Portrait image: shorter in 2-col */ .qg-artist-media { aspect-ratio: 3/4 !important; } .qg-artist-body { padding: 10px 10px 6px !important; } .qg-artist-body h3 { font-size: .83rem !important; gap: 4px !important; display: flex !important; flex-wrap: wrap !important; } .qg-artist-body > p { font-size: .72rem !important; margin-bottom: 6px !important; } .qg-artist-rating { margin-bottom: 4px !important; } .qg-artist-stars { font-size: .72rem !important; } .qg-artist-count { font-size: .65rem !important; } .qg-artist-meta { font-size: .62rem !important; } .qg-artist-profile-btn { padding: 9px 12px !important; font-size: .7rem !important; } /* Services page artist strip — vertical stack */ .qg-artist-strip { padding: 2.5rem 1rem !important; } .qg-artist-strip-inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .qg-artist-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .qg-artist-stat { padding: 1.2rem 1rem !important; } .qg-artist-stat:hover { transform: none !important; } .qg-artist-stat-num { font-size: 1.7rem !important; } /* ================================================================ 8. ARTIST SPOTLIGHT — 2-col grid ================================================================ */ .qg-spotlight { padding: 2.5rem 1rem !important; } .qg-spotlight-header { margin-bottom: 1.4rem !important; } .qg-spotlight-header h2 { font-size: clamp(1.65rem, 7vw, 2.2rem) !important; } .qg-spotlight-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; max-width: 100% !important; margin-bottom: 1.5rem !important; } .qg-spotlight-card { border-radius: 16px !important; } .qg-spotlight-card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; } .qg-spotlight-img-wrap { height: 130px !important; } .qg-spotlight-card:hover .qg-spotlight-img-wrap img { transform: none !important; } .qg-spotlight-body { padding: .9rem .85rem 1rem !important; } .qg-spotlight-body h3 { font-size: .83rem !important; } .qg-spot-spec { font-size: .72rem !important; } .qg-spot-rating { margin-bottom: .3rem !important; } .qg-spot-stars { font-size: .72rem !important; } .qg-spot-bio { font-size: .74rem !important; margin-bottom: .4rem !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-spot-avail { font-size: .6rem !important; padding: .22rem .62rem !important; } .qg-spotlight-cta-row { padding: 0 !important; } .qg-spotlight-cta-row .qg-btn-primary { width: 100% !important; justify-content: center !important; min-height: 46px !important; } /* ================================================================ 9. OUR PROMISE / PLEDGE — 2-col grid ================================================================ */ .qg-pledge { padding: 2.5rem 1rem !important; } .qg-pledge-header { margin-bottom: 1.4rem !important; } .qg-pledge-header h2 { font-size: clamp(1.65rem, 7vw, 2.2rem) !important; } .qg-pledge-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; max-width: 100% !important; margin: 0 0 1.5rem !important; } .qg-pledge-card { padding: 1.1rem .9rem !important; border-radius: 16px !important; animation: none !important; } .qg-pledge-card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; } .qg-pledge-card::before { display: none !important; } .qg-pledge-icon { font-size: 1.5rem !important; margin-bottom: .6rem !important; } .qg-pledge-card h3 { font-size: .83rem !important; margin-bottom: .35rem !important; } .qg-pledge-card p { font-size: .73rem !important; line-height: 1.52 !important; } .qg-pledge-badge { font-size: .6rem !important; padding: .2rem .6rem !important; margin-top: .65rem !important; } /* QwikGlam Standard — also 2-col */ .qg-standard { padding: 2.5rem 1rem !important; } .qg-standard-header { margin-bottom: 1.4rem !important; } .qg-standard-header h2 { font-size: clamp(1.65rem, 7vw, 2.2rem) !important; } .qg-standard-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; max-width: 100% !important; margin-bottom: 1.5rem !important; } .qg-standard-card { padding: 1.1rem .9rem !important; border-radius: 16px !important; } .qg-standard-card h3 { font-size: .83rem !important; } .qg-standard-card p { font-size: .73rem !important; } /* ================================================================ 10. GLOW GUIDE / BLOG SECTION — 2-col grid ================================================================ */ .qg-blog-teaser { padding: 2.5rem 1rem !important; } .qg-blog-header { margin-bottom: 1.4rem !important; } .qg-blog-header h2 { font-size: clamp(1.65rem, 7vw, 2.2rem) !important; } .qg-blog-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; max-width: 100% !important; } .qg-blog-card { border-radius: 16px !important; } .qg-blog-card:hover { transform: none !important; } .qg-blog-hero { height: 100px !important; } .qg-blog-hero-emoji { font-size: 2rem !important; } .qg-blog-body { padding: .9rem .85rem .95rem !important; gap: .4rem !important; } .qg-blog-cat { font-size: .58rem !important; } .qg-blog-title { font-size: .83rem !important; line-height: 1.32 !important; } .qg-blog-excerpt { font-size: .74rem !important; -webkit-line-clamp: 2 !important; } .qg-blog-read-more { font-size: .72rem !important; } .qg-blog-date, .qg-blog-read { font-size: .65rem !important; } .qg-blog-cta-row { margin-top: 1.5rem !important; } .qg-blog-cta-row .qg-btn--ghost { width: 100% !important; justify-content: center !important; min-height: 46px !important; } /* UGC gallery: 2-col on mobile */ .qg-ugc { padding: 2.5rem 1rem !important; } .qg-ugc-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 160px !important; gap: 8px !important; } .qg-ugc-card:nth-child(3n+1) { grid-row: span 2 !important; } .qg-ugc-card { border-radius: 12px !important; } .qg-ugc-card:hover { transform: none !important; } /* ================================================================ 11. CART FAB + CONCIERGE — No overlap, proper stacking ================================================================ */ /* Cart FAB: Define it as fixed if not already defined */ .qg-cart-fab { position: fixed !important; bottom: calc(62px + env(safe-area-inset-bottom, 10px)) !important; right: 14px !important; z-index: 8600 !important; width: 46px !important; height: 46px !important; border-radius: 50% !important; background: linear-gradient(135deg, #B03060, #E07AA4) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 18px rgba(176,48,96,.38) !important; text-decoration: none !important; flex-shrink: 0 !important; } .qg-cart-fab svg { width: 20px !important; height: 20px !important; stroke: #fff !important; fill: none !important; } .qg-fab-count { position: absolute !important; top: -4px !important; right: -4px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: var(--qg-gold, #D4AF6A) !important; color: var(--qg-plum, #1C0A2E) !important; font-size: .6rem !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1.5px solid rgba(253,246,248,.5) !important; } /* Concierge: stacked ABOVE cart fab with clear gap */ .qg-concierge { right: 14px !important; bottom: calc(62px + env(safe-area-inset-bottom, 10px) + 56px) !important; /* 56px = cart fab height (46px) + gap (10px) */ padding: .7rem .82rem .58rem !important; border-radius: 16px !important; gap: .2rem !important; box-shadow: 0 6px 22px rgba(10,4,22,.45) !important; z-index: 8500 !important; } .qg-concierge:hover { transform: none !important; } .qg-concierge__icon svg { width: 19px !important; height: 19px !important; } .qg-concierge__label { font-size: .48rem !important; } /* WA fab: above concierge */ .qg-wa-fab { right: 14px !important; bottom: calc(62px + env(safe-area-inset-bottom, 10px) + 56px + 62px) !important; /* above: nav + cart + concierge = 62+56+62=180px total */ width: 44px !important; height: 44px !important; } .qg-wa-fab svg { width: 22px !important; height: 22px !important; } .qg-wa-fab:hover { transform: none !important; } /* Toast: above all FABs */ .qg-toast { right: 1rem !important; left: 1rem !important; bottom: calc(68px + env(safe-area-inset-bottom, 10px)) !important; max-width: none !important; font-size: .82rem !important; } /* Back to top: left side to avoid FAB cluster */ #qgBackToTop { right: auto !important; left: 14px !important; bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; width: 38px !important; height: 38px !important; border-radius: 12px !important; } /* ================================================================ GLOBAL SPACING + SECTION HEADS ================================================================ */ section { padding-block: 2.5rem !important; } .qg-section-head { margin-bottom: 1.4rem !important; padding-inline: 1rem !important; } .qg-section-head h2 { font-size: clamp(1.65rem, 7.5vw, 2.2rem) !important; line-height: 1.1 !important; } .qg-section-head p { font-size: .86rem !important; line-height: 1.6 !important; } /* ================================================================ SERVICE CARDS — 2-col portrait grid (both pages) ================================================================ */ /* Services page ultra-card */ .qg-services-grid, #qgServicesGrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 1rem 1.5rem !important; border-top: none !important; margin-bottom: 0 !important; } .qg-services-grid .qg-ultra-card, #qgServicesGrid .qg-ultra-card { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: unset !important; max-height: unset !important; border-radius: 16px !important; border: 1.5px solid rgba(212,84,122,.12) !important; box-shadow: 0 4px 14px rgba(42,14,34,.08) !important; overflow: hidden !important; animation: none !important; background: #fff !important; } .qg-services-grid .qg-ultra-card:hover, #qgServicesGrid .qg-ultra-card:hover { transform: none !important; box-shadow: 0 4px 14px rgba(42,14,34,.08) !important; } .qg-services-grid .qg-ultra-card::before, .qg-services-grid .qg-ultra-card::after, #qgServicesGrid .qg-ultra-card::before, #qgServicesGrid .qg-ultra-card::after { display: none !important; } .qg-services-grid .qg-ultra-media, #qgServicesGrid .qg-ultra-media { width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 128px !important; min-height: 128px !important; max-height: 128px !important; flex-shrink: 0 !important; border-radius: 0 !important; position: relative !important; overflow: hidden !important; } .qg-services-grid .qg-ultra-media img, #qgServicesGrid .qg-ultra-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; transform: none !important; filter: none !important; transition: none !important; } .qg-services-grid .qg-ultra-card:hover .qg-ultra-media img, #qgServicesGrid .qg-ultra-card:hover .qg-ultra-media img { transform: none !important; } .qg-services-grid .qg-ultra-duration, #qgServicesGrid .qg-ultra-duration { bottom: 6px !important; left: 6px !important; right: auto !important; font-size: .57rem !important; padding: .17rem .45rem !important; } .qg-services-grid .qg-ultra-offer, #qgServicesGrid .qg-ultra-offer { display: none !important; } .qg-services-grid .qg-ultra-body, #qgServicesGrid .qg-ultra-body { flex: 1 !important; padding: .6rem .68rem .65rem !important; text-align: left !important; display: flex !important; flex-direction: column !important; gap: .25rem !important; background: #fff !important; overflow: hidden !important; } .qg-services-grid .qg-card-artist, .qg-services-grid .qg-card-grain, #qgServicesGrid .qg-card-artist, #qgServicesGrid .qg-card-grain { display: none !important; } .qg-services-grid .qg-ultra-title, #qgServicesGrid .qg-ultra-title { font-size: .82rem !important; font-weight: 700 !important; line-height: 1.26 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-services-grid .qg-ultra-rating, #qgServicesGrid .qg-ultra-rating { justify-content: flex-start !important; gap: .22rem !important; margin: 0 !important; } .qg-services-grid .qg-ultra-stars, #qgServicesGrid .qg-ultra-stars { font-size: .65rem !important; } .qg-services-grid .qg-ultra-rating-score, #qgServicesGrid .qg-ultra-rating-score { font-size: .65rem !important; font-weight: 700 !important; } .qg-services-grid .qg-ultra-rating-count, #qgServicesGrid .qg-ultra-rating-count { font-size: .6rem !important; } .qg-services-grid .qg-ultra-desc, #qgServicesGrid .qg-ultra-desc { display: none !important; } .qg-services-grid .qg-ultra-meta, #qgServicesGrid .qg-ultra-meta { font-size: .8rem !important; font-weight: 800 !important; margin: 0 !important; } .qg-services-grid .qg-ultra-proof, .qg-services-grid .qg-viewing-badge, .qg-services-grid .qg-points-badge, .qg-services-grid .qg-emi-tag, .qg-services-grid [class*="emi"], .qg-services-grid [class*="addons"], #qgServicesGrid .qg-ultra-proof, #qgServicesGrid .qg-viewing-badge, #qgServicesGrid .qg-points-badge, #qgServicesGrid .qg-emi-tag, #qgServicesGrid [class*="emi"], #qgServicesGrid [class*="addons"] { display: none !important; } .qg-services-grid .qg-ultra-cta, #qgServicesGrid .qg-ultra-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: .5rem .5rem !important; font-size: .7rem !important; font-weight: 700 !important; border-radius: 9px !important; min-height: 33px !important; margin-top: auto !important; } .qg-services-grid .qg-ultra-cta::before, .qg-services-grid .qg-ultra-cta::after, #qgServicesGrid .qg-ultra-cta::before, #qgServicesGrid .qg-ultra-cta::after { display: none !important; } /* Skeleton: 2-col portrait */ .qg-skeleton-card { display: flex !important; flex-direction: column !important; height: auto !important; border-radius: 16px !important; } .qg-skeleton-card > *:first-child, .qg-skel-img { width: 100% !important; min-width: 100% !important; height: 128px !important; } /* Home page service cards: 2-col portrait */ .qg-services__inner { padding-inline: 0 !important; } .qg-services__inner .qg-section-head, .qg-services__inner .qg-promo-banner, .qg-services__inner .qg-services__urgency, .qg-services__inner .qg-center, .qg-services__inner .qg-services-filter { padding-inline: 1rem !important; } .qg-services__urgency { margin-inline: 1rem !important; } .qg-services-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 1rem !important; border-top: none !important; margin-bottom: 1.5rem !important; } .qg-service-card { display: flex !important; flex-direction: column !important; border-radius: 16px !important; border: 1px solid rgba(212,175,106,.14) !important; box-shadow: 0 4px 14px rgba(28,10,46,.08) !important; overflow: hidden !important; min-height: unset !important; position: relative !important; background: #fff !important; } .qg-service-card:hover { transform: none !important; box-shadow: 0 4px 14px rgba(28,10,46,.08) !important; } .qg-service-card__link { display: flex !important; flex-direction: column !important; flex: 1 !important; text-decoration: none !important; } .qg-service-card__img { width: 100% !important; min-width: 100% !important; height: 118px !important; min-height: 118px !important; aspect-ratio: unset !important; border-radius: 0 !important; position: relative !important; overflow: hidden !important; flex-shrink: 0 !important; } .qg-service-card__img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; transition: none !important; } .qg-service-card:hover .qg-service-card__img img { transform: none !important; } .qg-service-card__badge { top: 6px !important; left: 6px !important; font-size: .55rem !important; padding: 2px 6px !important; } .qg-service-card__bookings { bottom: 6px !important; left: 6px !important; right: auto !important; font-size: .54rem !important; padding: 2px 5px !important; } .qg-service-card__body { padding: .6rem .7rem .5rem !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: .18rem !important; } .qg-service-card__icon { font-size: .82rem !important; margin-bottom: 1px !important; } .qg-service-card__body h3 { font-size: .8rem !important; font-weight: 700 !important; line-height: 1.24 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-service-card__body p { display: none !important; } .qg-service-card__price { font-size: .79rem !important; font-weight: 700 !important; } .qg-service-card__duration { font-size: .64rem !important; } .qg-service-card__book-btn { display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; width: 100% !important; padding: .58rem .5rem !important; font-size: .7rem !important; border-radius: 0 !important; border-top: 1px solid rgba(212,175,106,.15) !important; border-left: none !important; margin-top: auto !important; white-space: nowrap !important; } /* "View All" CTA */ .qg-center { padding-inline: 1rem !important; padding-top: 1rem !important; } .qg-center .qg-btn { width: 100% !important; justify-content: center !important; min-height: 46px !important; display: flex !important; } /* Promo banner: compact */ .qg-promo-banner { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; padding: 11px 13px !important; border-radius: 14px !important; margin-bottom: 1.25rem !important; } .qg-promo-banner__icon { font-size: 1.25rem !important; } .qg-promo-banner__text { min-width: unset !important; } .qg-promo-banner__text strong { font-size: .83rem !important; } .qg-promo-banner__text span { font-size: .7rem !important; } .qg-promo-banner__cta { font-size: .7rem !important; padding: 7px 12px !important; border-radius: 9px !important; } /* ================================================================ MISC — Trust bar, press, testimonials, membership etc. ================================================================ */ /* Trust bar */ .qg-trust-bar { padding-block: 0 !important; } .qg-trust-bar__inner { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; flex-wrap: unset !important; } .qg-trust-bar__divider { display: none !important; } .qg-trust-bar__item { padding: .85rem .38rem !important; border-right: 1px solid rgba(255,255,255,.07) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; } .qg-trust-bar__item:nth-child(3n) { border-right: none !important; } .qg-trust-bar__item:last-child { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: none !important; padding: .72rem 1rem !important; } .qg-trust-bar__item strong { font-size: 1.12rem !important; } .qg-trust-bar__item span { font-size: .55rem !important; } /* Trust strip (services) */ .qg-trust-strip { padding: 0 !important; } .qg-trust-strip-inner { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; flex-direction: unset !important; max-width: 100% !important; } .qg-trust-strip-divider { display: none !important; } .qg-trust-stat { padding: .78rem .38rem !important; gap: .1rem !important; border-right: 1px solid rgba(212,84,122,.1) !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; } .qg-trust-stat:nth-child(3n) { border-right: none !important; } .qg-trust-stat:nth-last-child(-n+3) { border-bottom: none !important; } .qg-trust-stat:last-child { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: none !important; } .qg-trust-stat-num { font-size: clamp(.95rem, 3.6vw, 1.2rem) !important; } .qg-trust-stat-label { font-size: .52rem !important; } /* Press strip */ .qg-press { padding-block: .8rem !important; overflow: hidden !important; } .qg-press__inner { flex-direction: column !important; gap: .48rem !important; padding: 0 1rem !important; } .qg-press__logos { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 1.5rem !important; padding-bottom: 2px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; } .qg-press__logos::-webkit-scrollbar { display: none !important; } .qg-press__logo { flex-shrink: 0 !important; } .qg-press__logo-text { font-size: .88rem !important; } /* Testimonials carousel */ .qg-testi-grid, .qg-t-list, .qg-t-list--six { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; flex-wrap: nowrap !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-testi-grid::-webkit-scrollbar, .qg-t-list::-webkit-scrollbar, .qg-t-list--six::-webkit-scrollbar { display: none !important; } .qg-testi, .qg-t-list > *, .qg-t-list--six > * { flex: 0 0 80vw !important; max-width: 300px !important; min-width: 240px !important; scroll-snap-align: start !important; border-radius: 18px !important; } .qg-testi:hover, .qg-t-list > *:hover, .qg-t-list--six > *:hover { transform: none !important; } .qg-testi__body { font-size: .88rem !important; } /* B/A carousel */ .qg-ba-grid { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; } .qg-ba-grid::-webkit-scrollbar { display: none !important; } .qg-ba-card { flex: 0 0 80vw !important; max-width: 300px !important; scroll-snap-align: start !important; } .qg-ba-handle__btn { width: 42px !important; height: 42px !important; } /* Membership carousel */ .qg-membership__cards { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-membership__cards::-webkit-scrollbar { display: none !important; } .qg-membership-plan { flex: 0 0 76vw !important; max-width: 270px !important; scroll-snap-align: start !important; border-radius: 18px !important; } .qg-plan__amount { font-size: 2.1rem !important; } .qg-membership__cta { padding-inline: 1rem !important; } .qg-membership__cta .qg-btn { width: 100% !important; justify-content: center !important; } /* Loyalty carousel */ .qg-loyalty-tiers { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; max-width: 100% !important; margin: 0 0 1.5rem !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-loyalty-tiers::-webkit-scrollbar { display: none !important; } .qg-loyalty-tier { flex: 0 0 76vw !important; max-width: 270px !important; scroll-snap-align: start !important; } /* FAQ */ .qg-faq__container, .qg-faq-inner { padding-inline: 1rem !important; } .qg-acc__header { padding: 14px 0 !important; font-size: .9rem !important; min-height: 48px !important; } .qg-faq-q { padding: .95rem 1rem !important; font-size: .86rem !important; min-height: 50px !important; } /* Referral */ .qg-referral { padding-block: 1.75rem !important; } .qg-referral__inner { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1.5rem 1.2rem !important; gap: .9rem !important; margin-inline: 1rem !important; border-radius: 20px !important; } .qg-referral__inner .qg-btn { width: 100% !important; justify-content: center !important; min-height: 46px !important; } /* Artist join */ .qg-artist-join__inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; padding-inline: 1rem !important; } .qg-artist-join__perks { grid-template-columns: 1fr 1fr !important; } .qg-artist-join__stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .qg-artist-join__content .qg-btn { width: 100% !important; justify-content: center !important; min-height: 48px !important; display: flex !important; margin-top: 1rem !important; } /* Transformation carousel */ .qg-transformation { padding: 2.5rem 0 !important; } .qg-trans-header { padding-inline: 1rem !important; margin-bottom: 1.4rem !important; } .qg-trans-grid { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 14px !important; padding: 0 1rem 1rem !important; max-width: 100vw !important; width: 100% !important; margin: 0 0 1.2rem !important; grid-template-columns: unset !important; scrollbar-width: none !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; } .qg-trans-grid::-webkit-scrollbar { display: none !important; } .qg-trans-card { flex: 0 0 76vw !important; max-width: 288px !important; scroll-snap-align: start !important; aspect-ratio: 3/4 !important; } .qg-trans-card:hover { transform: none !important; } .qg-trans-cta-row { padding-inline: 1rem !important; } .qg-trans-cta-row .qg-btn--ghost { width: 100% !important; justify-content: center !important; display: flex !important; } /* App section */ .qg-app__inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; text-align: center !important; padding-inline: 1rem !important; } .qg-app__text { text-align: center !important; } .qg-app__features { align-items: center !important; } .qg-store { justify-content: center !important; gap: 9px !important; } .qg-app__qr { display: none !important; } .qg-app-img { max-height: 190px !important; } /* Manifesto */ .qg-manifesto__inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; padding-inline: 1rem !important; } .qg-manifesto__metrics { gap: 10px !important; } .qg-metric { padding: 16px 13px !important; } /* Collections carousel */ .qg-collections { padding: 2rem 0 1.5rem !important; } .qg-collections-header { padding-inline: 1rem !important; margin-bottom: 1.2rem !important; } .qg-collections-header h2, .qg-collections-title { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; } } /* end @media (max-width: 768px) */ /* ================================================================ SMALL PHONE ≤430px ================================================================ */ @media (max-width: 430px) { /* Header */ .qg-header__inner { height: 54px !important; padding: 0 .85rem !important; } .qg-logo a { font-size: 1.25rem !important; } .qg-city-btn { font-size: .68rem !important; padding: 4px 9px !important; } /* Hero */ .qg-hero { min-height: 62svh !important; min-height: 62vh !important; height: 62svh !important; height: 62vh !important; } .qg-hero__content { padding: 5rem 1rem 1.2rem !important; gap: .52rem !important; } .qg-hero__title { font-size: clamp(1.85rem, 9.5vw, 2.5rem) !important; } .qg-hero__content h1 { font-size: clamp(1.85rem, 9.5vw, 2.5rem) !important; } /* 2-col cards: shorter image */ .qg-services-grid .qg-ultra-media, #qgServicesGrid .qg-ultra-media { height: 108px !important; min-height: 108px !important; max-height: 108px !important; } .qg-service-card__img { height: 100px !important; min-height: 100px !important; } .qg-services-grid .qg-ultra-title, #qgServicesGrid .qg-ultra-title, .qg-service-card__body h3 { font-size: .76rem !important; } /* Artist grid: smaller */ .qg-artist-media { aspect-ratio: 1/1 !important; } /* HIW 1-col on tiny screens */ .qg-hiw-steps, .qg-how__steps { grid-template-columns: 1fr !important; } .qg-hiw-steps .qg-hiw-step:last-of-type, .qg-step:last-of-type { grid-column: 1 !important; } .qg-hiw-steps .qg-hiw-step:last-of-type { flex-direction: column !important; align-items: center !important; text-align: center !important; } .qg-step:last-of-type { flex-direction: column !important; align-items: center !important; text-align: center !important; } /* Safety 1-col */ .qg-safety__grid, .qg-hygiene-grid { grid-template-columns: 1fr !important; } /* Standard/pledge 1-col */ .qg-standard-grid, .qg-pledge-grid { grid-template-columns: 1fr !important; } /* Spotlight 1-col */ .qg-spotlight-grid { grid-template-columns: 1fr !important; } .qg-spotlight-img-wrap { height: 160px !important; } /* Blog 1-col */ .qg-blog-grid { grid-template-columns: 1fr !important; } .qg-blog-hero { height: 120px !important; } .qg-blog-title { font-size: .88rem !important; } .qg-blog-excerpt { -webkit-line-clamp: 3 !important; } /* Trust bar 2-col */ .qg-trust-bar__inner, .qg-trust-strip-inner { grid-template-columns: 1fr 1fr !important; } .qg-trust-bar__item:nth-child(3n), .qg-trust-stat:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.07) !important; } .qg-trust-bar__item:nth-child(2n), .qg-trust-stat:nth-child(2n) { border-right: none !important; } .qg-trust-bar__item:last-child, .qg-trust-stat:last-child { grid-column: 1 / -1 !important; border-right: none !important; } /* FAB stack on tiny screen */ .qg-cart-fab { width: 42px !important; height: 42px !important; } .qg-concierge { bottom: calc(58px + env(safe-area-inset-bottom, 10px) + 52px) !important; } .qg-wa-fab { bottom: calc(58px + env(safe-area-inset-bottom, 10px) + 52px + 58px) !important; } /* Artist join perks: 1-col */ .qg-artist-join__perks { grid-template-columns: 1fr !important; } /* Carousels: wider cards */ .qg-testi, .qg-t-list > *, .qg-t-list--six > * { flex: 0 0 86vw !important; } .qg-membership-plan { flex: 0 0 82vw !important; } .qg-trans-card { flex: 0 0 82vw !important; } .qg-loyalty-tier { flex: 0 0 82vw !important; } } /* end @media (max-width: 430px) *//* ================================================================ QwikGlam — Mobile Definitive Patch v6 Fixes all 11 reported issues. Appended to qg-services-additions.css and qg-global.css. Desktop untouched. ================================================================ */ /* ================================================================ ISSUE 1 — HEADER: Search visible, no gap, compact bar ================================================================ */ @media (max-width: 900px) { /* Announcement bar: reduce to 32px */ .qg-announcement-bar { height: 32px !important; max-height: 32px !important; font-size: .65rem !important; } /* Header sits directly below bar, no gap */ .qg-header { top: 32px !important; } body.qg-bar-hidden .qg-header { top: 0 !important; } /* Header inner: 56px tall, tight spacing */ .qg-header__inner { height: 56px !important; padding: 0 1rem !important; gap: .5rem !important; } /* Logo: slightly smaller */ .qg-logo a { font-size: 1.3rem !important; } /* City btn: compact pill */ .qg-city-btn { padding: 4px 10px !important; font-size: .7rem !important; gap: 4px !important; } /* Actions: always flex, search ALWAYS visible */ .qg-header__actions { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; flex-shrink: 0 !important; } /* Search + icon buttons: forced visible */ .qg-header__search-btn, .qg-header__icon-btn { display: flex !important; width: 34px !important; height: 34px !important; flex-shrink: 0 !important; flex-basis: 34px !important; min-width: 34px !important; } /* Hide CTA buttons that bloat the header row */ .qg-btn--glow { display: none !important; } .qg-btn--book-now { display: none !important; } /* Hamburger: visible and ordered last */ .qg-menu-toggle { display: flex !important; order: 99 !important; margin-left: 0 !important; padding: 4px !important; flex-shrink: 0 !important; } /* Bottom nav: always shown on mobile */ .qg-bottom-nav { display: block !important; z-index: 9980 !important; } } /* end header @media */ /* ================================================================ ALL REMAINING FIXES — max-width: 768px ================================================================ */ @media (max-width: 768px) { /* ================================================================ ISSUE 1b — Hero starts right after header (no gap) header top: 32px + header height: 56px = 88px total ================================================================ */ .qg-hero { margin-top: 0 !important; padding-top: 0 !important; } /* If hero is a section inside a wrapper, kill any top-margin */ main > .qg-hero:first-child, #qg-home > .qg-hero:first-child { margin-top: 0 !important; } /* ================================================================ ISSUE 2 — HERO: Proper height, centered text, clean layout ================================================================ */ .qg-hero { min-height: 64svh !important; min-height: 64vh !important; height: 64svh !important; height: 64vh !important; display: flex !important; flex-direction: column !important; place-items: unset !important; align-items: stretch !important; justify-content: flex-end !important; overflow: hidden !important; position: relative !important; } /* BG layers */ .qg-hero__video, .qg-hero__overlay, .qg-hero__veil, .qg-hero__particles, .qg-hero__petals { position: absolute !important; inset: 0 !important; } .qg-hero__video { z-index: -3 !important; } .qg-hero__overlay, .qg-hero__veil { z-index: -2 !important; } .qg-hero__particles, .qg-hero__petals { z-index: -1 !important; } /* Strong dark overlay so text is legible */ .qg-hero__overlay { background: linear-gradient(180deg, rgba(10,4,22,.12) 0%, rgba(10,4,22,.0) 15%, rgba(10,4,22,.45) 48%, rgba(10,4,22,.88) 74%, rgba(10,4,22,.99) 100%) !important; } .qg-hero__veil { background: linear-gradient(180deg, rgba(42,14,34,.18) 0%, rgba(42,14,34,.04) 15%, rgba(42,14,34,.48) 48%, rgba(42,14,34,.9) 74%, rgba(42,14,34,.99) 100%) !important; } /* Live ticker */ .qg-hero__live-ticker { position: absolute !important; top: 68px !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 3 !important; font-size: .66rem !important; padding: 4px 12px !important; max-width: calc(100vw - 2rem) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .qg-hero__scroll, .qg-scroll-cue { display: none !important; } /* Hero content: bottom, left-aligned, premium */ .qg-hero__content { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 100% !important; padding: 5.5rem 1.15rem 1.5rem !important; text-align: left !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: .65rem !important; margin-top: auto !important; overflow: visible !important; } /* Hero badge */ .qg-hero__badge { font-size: .6rem !important; padding: 4px 13px !important; margin: 0 !important; letter-spacing: .14em !important; } /* Hero urgency pill */ .qg-hero__urgency { font-size: .68rem !important; padding: 4px 11px !important; margin: 0 !important; display: inline-flex !important; } /* Services hero H1 */ .qg-hero__title { font-size: clamp(2rem, 9vw, 2.8rem) !important; font-family: "Playfair Display", serif !important; line-height: 1.07 !important; margin: 0 !important; font-weight: 700 !important; color: #fff !important; } .qg-hero__title em { display: block !important; } /* Services hero subtitle */ .qg-hero__subtitle { font-size: .85rem !important; line-height: 1.58 !important; margin: 0 !important; color: rgba(255,230,240,.8) !important; } /* Services hero CTA */ button.qg-hero__cta, .qg-hero__cta:not(.qg-hero__cta .qg-btn) { width: 100% !important; min-height: 50px !important; border-radius: 14px !important; font-size: .88rem !important; padding: .9rem 1.5rem !important; justify-content: center !important; display: flex !important; align-items: center !important; margin: 0 !important; } /* Home hero H1 */ .qg-hero__content h1 { font-family: "Playfair Display", serif !important; font-size: clamp(2rem, 9.5vw, 2.9rem) !important; line-height: 1.06 !important; letter-spacing: -.02em !important; margin: 0 !important; color: #fff !important; font-weight: 700 !important; } .qg-hero__content h1 em { display: block !important; } /* Home hero body text */ .qg-hero__content > p { font-size: .86rem !important; line-height: 1.58 !important; margin: 0 !important; color: rgba(255,255,255,.75) !important; max-width: 100% !important; } /* Ornament divider: hide */ .qg-hero__ornament { display: none !important; } /* Home hero CTAs: stacked */ .qg-hero__cta { display: flex !important; flex-direction: column !important; gap: 9px !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; } .qg-hero__cta .qg-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; padding: 13px 20px !important; font-size: .88rem !important; border-radius: 14px !important; } /* Home proof strip: 2×2 grid */ .qg-hero__proof { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding: 10px 8px !important; max-width: 100% !important; border-radius: 14px !important; } .qg-hero__proof-divider { display: none !important; } .qg-hero__proof-item { padding: 8px 7px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .qg-hero__proof-item:nth-child(1), .qg-hero__proof-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,.1) !important; } .qg-hero__proof-item:nth-child(1), .qg-hero__proof-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1) !important; } .qg-hero__proof-item strong { font-size: 1.02rem !important; } .qg-hero__proof-item span { font-size: .56rem !important; } /* ================================================================ ISSUE 3 — PAYMENT TRUST: Single scrolling row ================================================================ */ .qg-payment-trust { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; align-items: center !important; gap: .5rem !important; padding: .55rem 1rem !important; justify-content: flex-start !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; background: #FFFBFD !important; } .qg-payment-trust::-webkit-scrollbar { display: none !important; } .qg-pt-label, .qg-pt-method, .qg-pt-ssl, .qg-pt-sep, .qg-pt-logos { flex-shrink: 0 !important; white-space: nowrap !important; } .qg-pt-label { font-size: .66rem !important; } .qg-pt-method { font-size: .66rem !important; } .qg-pt-ssl { font-size: .66rem !important; } .qg-pt-logos { display: flex !important; gap: 4px !important; flex-wrap: nowrap !important; } /* ================================================================ ISSUE 4 — FILTER: Single scrolling row ================================================================ */ /* Services page filter hub */ .qg-filter-hub { top: calc(32px + 56px) !important; background: #FFFBFD !important; border-bottom: 1px solid rgba(212,84,122,.1) !important; box-shadow: 0 2px 10px rgba(42,14,34,.05) !important; } .qg-filter-hub-inner { padding: .3rem 0 .25rem !important; } .qg-filter-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; gap: .28rem !important; padding: .22rem .85rem !important; scroll-snap-type: x mandatory !important; -webkit-mask-image: linear-gradient(to right, transparent 0, black .85rem, black calc(100% - .85rem), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, black .85rem, black calc(100% - .85rem), transparent 100%) !important; align-items: center !important; } .qg-filter-row::-webkit-scrollbar { display: none !important; } .qg-category-btn { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; padding: .38rem .88rem !important; font-size: .72rem !important; min-height: 32px !important; } .qg-occasion-btn { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; padding: .34rem .78rem !important; font-size: .7rem !important; min-height: 30px !important; } .qg-cat-icon { width: 11px !important; height: 11px !important; } .qg-occasion-label { display: none !important; } .qg-filter-row-divider { margin: 0 .5rem !important; flex-shrink: 0 !important; } /* Home page filter tabs */ .qg-services-filter { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 0 1rem 5px !important; gap: 6px !important; margin-bottom: 1.1rem !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-services-filter::-webkit-scrollbar { display: none !important; } .qg-filter-tab { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; padding: 6px 15px !important; font-size: .76rem !important; min-height: 34px !important; } /* ================================================================ ISSUE 5 — THE PROCESS / HOW IT WORKS: 2-column grid ================================================================ */ .qg-how-it-works { padding: 2.5rem 1rem !important; } .qg-hiw-header { margin-bottom: 1.4rem !important; text-align: center !important; } .qg-hiw-header h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .qg-hiw-header p { font-size: .85rem !important; } /* 2-col grid — OVERRIDE all previous single-col rules */ .qg-hiw-steps { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; gap: 10px !important; max-width: 100% !important; width: 100% !important; margin: 0 0 1.2rem !important; align-items: stretch !important; /* Kill flex overrides */ flex-direction: unset !important; flex-wrap: unset !important; justify-content: unset !important; } /* Step card */ .qg-hiw-steps .qg-hiw-step { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1rem .85rem !important; border-radius: 16px !important; background: rgba(255,255,255,.9) !important; border: 1.5px solid rgba(212,84,122,.1) !important; box-shadow: 0 4px 14px rgba(42,14,34,.07) !important; gap: .5rem !important; max-width: 100% !important; min-width: 0 !important; flex: unset !important; } .qg-hiw-steps .qg-hiw-step:hover { transform: none !important; } /* Step 3: full-width horizontal */ .qg-hiw-steps .qg-hiw-step:last-of-type { grid-column: 1 / -1 !important; flex-direction: row !important; text-align: left !important; align-items: flex-start !important; gap: .85rem !important; } .qg-hiw-steps .qg-hiw-step:last-of-type .qg-hiw-icon { display: none !important; } .qg-hiw-num { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important; margin: 0 !important; font-size: 1.1rem !important; flex-shrink: 0 !important; display: grid !important; place-items: center !important; } .qg-hiw-icon { display: flex !important; width: 38px !important; height: 38px !important; min-width: 38px !important; margin: 0 auto !important; } .qg-hiw-step h3 { font-size: .88rem !important; margin: 0 !important; font-weight: 700 !important; } .qg-hiw-step p { font-size: .76rem !important; margin: 0 !important; line-height: 1.52 !important; } .qg-hiw-time { font-size: .6rem !important; padding: .18rem .6rem !important; display: inline-block !important; } .qg-hiw-connector { display: none !important; } .qg-hiw-cta-row { padding: 0 !important; margin-top: 1.1rem !important; } .qg-hiw-explore-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: .85rem 2rem !important; border-radius: 12px !important; font-size: .85rem !important; min-height: 46px !important; } /* Home page HIW — also 2-col */ .qg-how__inner { padding-inline: 1rem !important; } .qg-how__steps { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 1.1rem !important; flex-direction: unset !important; align-items: stretch !important; } .qg-step:last-of-type { grid-column: 1 / -1 !important; } .qg-step { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; background: #fff !important; border: 1px solid rgba(212,175,106,.14) !important; box-shadow: 0 4px 12px rgba(28,10,46,.07) !important; border-radius: 16px !important; padding: 1rem .85rem !important; gap: .5rem !important; border-bottom: none !important; } .qg-step:hover { transform: none !important; } .qg-step:last-of-type { flex-direction: row !important; text-align: left !important; align-items: flex-start !important; gap: .85rem !important; } .qg-step__num { font-family: "Playfair Display", serif !important; font-style: italic !important; font-size: 1.65rem !important; color: rgba(212,175,106,.55) !important; background: none !important; width: auto !important; height: auto !important; min-width: auto !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; } .qg-step__icon { display: none !important; } .qg-step h3 { font-size: .88rem !important; font-weight: 700 !important; margin: 0 !important; } .qg-step p { font-size: .76rem !important; line-height: 1.52 !important; margin: 0 !important; } .qg-step__connector { display: none !important; } .qg-how__promise { padding: 10px 1rem !important; font-size: .78rem !important; text-align: center !important; border-radius: 12px !important; margin: 0 !important; flex-wrap: wrap !important; gap: 5px !important; width: 100% !important; } /* ================================================================ ISSUE 6 — YOUR SAFETY: 2-column grid ================================================================ */ /* Home page safety */ .qg-safety { padding: 2.5rem 1rem !important; } .qg-safety__inner { padding-inline: 0 !important; } .qg-safety__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; grid-template-columns: repeat(2, 1fr) !important; } .qg-safety-card { padding: 14px 11px !important; border-radius: 16px !important; } .qg-safety-card:hover { transform: none !important; } .qg-safety-card__icon { font-size: 1.3rem !important; margin-bottom: 6px !important; } .qg-safety-card h3 { font-size: .82rem !important; margin-bottom: 4px !important; } .qg-safety-card p { font-size: .72rem !important; line-height: 1.5 !important; } /* Services page hygiene section */ .qg-hygiene { padding: 2.5rem 1rem !important; } .qg-hygiene .qg-hygiene-inner, .qg-hygiene-inner { padding: 0 !important; max-width: 100% !important; } .qg-hygiene-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; max-width: 100% !important; } .qg-hygiene-card { padding: 1rem .85rem !important; border-radius: 16px !important; text-align: center !important; } .qg-hygiene-card:hover { transform: none !important; } .qg-hygiene-icon { width: 44px !important; height: 44px !important; margin: 0 auto .8rem !important; } .qg-hygiene-icon svg { width: 20px !important; height: 20px !important; } .qg-hygiene-card h3 { font-size: .82rem !important; margin-bottom: .3rem !important; } .qg-hygiene-card p { font-size: .72rem !important; line-height: 1.52 !important; margin-bottom: .5rem !important; } .qg-hygiene-cert { font-size: .58rem !important; padding: .14rem .52rem !important; } /* ================================================================ ISSUE 7 — MEET YOUR ARTISTS: 2-col grid (not carousel) ================================================================ */ /* Home page */ .qg-artists { background: var(--qg-bg, #FBF7F0) !important; } .qg-artists__inner { padding-inline: 0 !important; } .qg-artists__inner .qg-section-head { padding-inline: 1rem !important; } .qg-artists__inner .qg-center { padding-inline: 1rem !important; } .qg-artists-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 1rem 1rem !important; margin-bottom: 1rem !important; /* Kill all carousel overrides */ flex-direction: unset !important; overflow-x: unset !important; scroll-snap-type: unset !important; -webkit-mask-image: none !important; mask-image: none !important; -webkit-overflow-scrolling: unset !important; } .qg-artist-card { flex: unset !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; border-radius: 18px !important; box-shadow: 0 4px 16px rgba(28,10,46,.1) !important; display: flex !important; flex-direction: column !important; } .qg-artist-card:hover { transform: none !important; } .qg-artist-media { aspect-ratio: 3/4 !important; overflow: hidden !important; } .qg-artist-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; } .qg-artist-body { padding: 10px 10px 6px !important; } .qg-artist-body h3 { font-size: .83rem !important; } .qg-artist-body > p { font-size: .72rem !important; margin-bottom: 6px !important; } .qg-artist-stars { font-size: .72rem !important; } .qg-artist-count { font-size: .65rem !important; } .qg-artist-meta { font-size: .62rem !important; } .qg-artist-profile-btn { padding: 9px 12px !important; font-size: .7rem !important; } /* Services page artist strip */ .qg-artist-strip { padding: 2.5rem 1rem !important; } .qg-artist-strip-inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .qg-artist-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .qg-artist-stat { padding: 1.2rem 1rem !important; } .qg-artist-stat:hover { transform: none !important; } /* ================================================================ ISSUE 8 — ARTIST SPOTLIGHT: 2-column grid ================================================================ */ .qg-spotlight { padding: 2.5rem 1rem !important; } .qg-spotlight-header { margin-bottom: 1.4rem !important; text-align: center !important; } .qg-spotlight-header h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .qg-spotlight-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; max-width: 100% !important; margin: 0 0 1.5rem !important; /* Kill the 4-col and 2-col at 1100px from base */ grid-template-columns: repeat(2, 1fr) !important; } .qg-spotlight-card { border-radius: 16px !important; overflow: hidden !important; background: #fff !important; border: 1.5px solid rgba(212,84,122,.11) !important; box-shadow: 0 4px 14px rgba(42,14,34,.08) !important; display: block !important; } .qg-spotlight-card:hover { transform: none !important; } .qg-spotlight-card:hover .qg-spotlight-img-wrap img { transform: none !important; } .qg-spotlight-img-wrap { height: 130px !important; overflow: hidden !important; } .qg-spotlight-img-wrap img { transform: none !important; transition: none !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; } .qg-spotlight-avail { font-size: .6rem !important; padding: .22rem .62rem !important; } .qg-spotlight-body { padding: .9rem .85rem 1rem !important; } .qg-spotlight-body h3 { font-size: .83rem !important; } .qg-spot-spec { font-size: .72rem !important; } .qg-spot-bio { font-size: .74rem !important; margin-bottom: .4rem !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-spot-cta { font-size: .78rem !important; } .qg-spotlight-cta-row .qg-btn-primary { width: 100% !important; justify-content: center !important; min-height: 46px !important; } /* ================================================================ ISSUE 9 — OUR PROMISE / PLEDGE / STANDARD: 2-col grid ================================================================ */ /* QwikGlam Standard */ .qg-standard { padding: 2.5rem 1rem !important; } .qg-standard .qg-standard-header, .qg-standard-header { margin-bottom: 1.4rem !important; text-align: center !important; } .qg-standard-header h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .qg-standard-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; max-width: 100% !important; margin: 0 0 1.5rem !important; } .qg-standard-card { padding: 1.1rem .9rem !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; } .qg-standard-card h3 { font-size: .83rem !important; } .qg-standard-card p { font-size: .73rem !important; } /* Pledge */ .qg-pledge { padding: 2.5rem 1rem !important; } .qg-pledge-header { margin-bottom: 1.4rem !important; text-align: center !important; } .qg-pledge-header h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .qg-pledge-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; max-width: 100% !important; margin: 0 0 1.5rem !important; } .qg-pledge-card { padding: 1.1rem .9rem !important; border-radius: 16px !important; animation: none !important; } .qg-pledge-card:hover { transform: none !important; } .qg-pledge-card::before { display: none !important; } .qg-pledge-icon { font-size: 1.5rem !important; margin-bottom: .6rem !important; } .qg-pledge-card h3 { font-size: .83rem !important; margin-bottom: .35rem !important; } .qg-pledge-card p { font-size: .73rem !important; line-height: 1.52 !important; } .qg-pledge-badge { font-size: .6rem !important; padding: .2rem .6rem !important; margin-top: .65rem !important; } /* ================================================================ ISSUE 10 — GLOW GUIDE / BLOG: 2-col grid ================================================================ */ .qg-blog-teaser { padding: 2.5rem 1rem !important; } .qg-blog-header { margin-bottom: 1.4rem !important; text-align: center !important; } .qg-blog-header h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .qg-blog-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; max-width: 100% !important; } .qg-blog-card { border-radius: 16px !important; overflow: hidden !important; } .qg-blog-card:hover { transform: none !important; } .qg-blog-hero { height: 100px !important; } .qg-blog-hero-emoji { font-size: 2rem !important; } .qg-blog-body { padding: .9rem .85rem .95rem !important; gap: .38rem !important; } .qg-blog-cat { font-size: .58rem !important; } .qg-blog-title { font-size: .82rem !important; line-height: 1.3 !important; margin: 0 !important; } .qg-blog-excerpt { font-size: .73rem !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; } .qg-blog-read-more { font-size: .72rem !important; padding-top: .25rem !important; } .qg-blog-date, .qg-blog-read { font-size: .64rem !important; } .qg-blog-cta-row { margin-top: 1.5rem !important; } .qg-blog-cta-row .qg-btn--ghost { width: 100% !important; justify-content: center !important; min-height: 46px !important; } /* ================================================================ ISSUE 11 — CART FAB: Must be ABOVE bottom nav (z-index 9980) Bottom nav ≈ 60px tall. Cart fab needs bottom > 60px + safe area. z-index must beat 9980. ================================================================ */ /* Cart FAB: positioned cleanly above bottom nav */ .qg-cart-fab { position: fixed !important; right: 14px !important; bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; z-index: 9990 !important; /* beats bottom-nav z-index: 9980 */ width: 46px !important; height: 46px !important; border-radius: 50% !important; background: linear-gradient(135deg, #B03060, #E07AA4) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 18px rgba(176,48,96,.4) !important; text-decoration: none !important; flex-shrink: 0 !important; } .qg-cart-fab svg { width: 20px !important; height: 20px !important; stroke: #fff !important; fill: none !important; display: block !important; } .qg-fab-count { position: absolute !important; top: -4px !important; right: -4px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: var(--qg-gold, #D4AF6A) !important; color: var(--qg-plum, #1C0A2E) !important; font-size: .58rem !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1.5px solid rgba(253,246,248,.6) !important; } /* Concierge: sits above cart fab, with 10px gap */ .qg-concierge { right: 14px !important; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 56px) !important; /* 56px = cart fab (46px) + gap (10px) */ z-index: 9991 !important; padding: .65rem .78rem .55rem !important; border-radius: 16px !important; gap: .18rem !important; box-shadow: 0 6px 22px rgba(10,4,22,.4) !important; animation: none !important; } .qg-concierge:hover { transform: none !important; } .qg-concierge__icon svg { width: 19px !important; height: 19px !important; } .qg-concierge__label { font-size: .47rem !important; } /* WA fab: above concierge with 10px gap */ .qg-wa-fab { right: 14px !important; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 56px + 60px) !important; z-index: 9992 !important; width: 44px !important; height: 44px !important; } .qg-wa-fab svg { width: 22px !important; height: 22px !important; } .qg-wa-fab:hover { transform: none !important; } /* Toast: above all FABs */ .qg-toast { right: 1rem !important; left: 1rem !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; font-size: .82rem !important; z-index: 9993 !important; } /* Back to top: LEFT side to keep right side clear */ #qgBackToTop { right: auto !important; left: 14px !important; bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; width: 38px !important; height: 38px !important; border-radius: 12px !important; } /* ================================================================ GLOBAL SPACING + SECTION HEADS ================================================================ */ section { padding-block: 2.5rem !important; } .qg-section-head { margin-bottom: 1.4rem !important; padding-inline: 1rem !important; text-align: center !important; } .qg-section-head h2 { font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important; line-height: 1.1 !important; } .qg-section-head p { font-size: .86rem !important; line-height: 1.6 !important; } /* ================================================================ SERVICE CARDS — 2-col portrait grid (both pages) ================================================================ */ /* Services page ultra-card */ .qg-services-grid, #qgServicesGrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 1rem 1.5rem !important; border-top: none !important; margin-bottom: 0 !important; } .qg-services-grid .qg-ultra-card, #qgServicesGrid .qg-ultra-card { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: unset !important; max-height: unset !important; border-radius: 16px !important; border: 1.5px solid rgba(212,84,122,.12) !important; box-shadow: 0 4px 14px rgba(42,14,34,.08) !important; overflow: hidden !important; animation: none !important; background: #fff !important; } .qg-services-grid .qg-ultra-card:hover, #qgServicesGrid .qg-ultra-card:hover { transform: none !important; } .qg-services-grid .qg-ultra-card::before, .qg-services-grid .qg-ultra-card::after, #qgServicesGrid .qg-ultra-card::before, #qgServicesGrid .qg-ultra-card::after { display: none !important; } .qg-services-grid .qg-ultra-media, #qgServicesGrid .qg-ultra-media { width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 128px !important; min-height: 128px !important; max-height: 128px !important; flex-shrink: 0 !important; border-radius: 0 !important; position: relative !important; overflow: hidden !important; } .qg-services-grid .qg-ultra-media img, #qgServicesGrid .qg-ultra-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; transform: none !important; filter: none !important; transition: none !important; } .qg-services-grid .qg-ultra-offer, #qgServicesGrid .qg-ultra-offer { display: none !important; } .qg-services-grid .qg-ultra-body, #qgServicesGrid .qg-ultra-body { flex: 1 !important; padding: .62rem .68rem .65rem !important; text-align: left !important; display: flex !important; flex-direction: column !important; gap: .25rem !important; background: #fff !important; } .qg-services-grid .qg-card-artist, #qgServicesGrid .qg-card-artist, .qg-services-grid .qg-card-grain, #qgServicesGrid .qg-card-grain { display: none !important; } .qg-services-grid .qg-ultra-title, #qgServicesGrid .qg-ultra-title { font-size: .82rem !important; font-weight: 700 !important; line-height: 1.26 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-services-grid .qg-ultra-rating, #qgServicesGrid .qg-ultra-rating { justify-content: flex-start !important; gap: .2rem !important; margin: 0 !important; } .qg-services-grid .qg-ultra-stars, #qgServicesGrid .qg-ultra-stars { font-size: .65rem !important; } .qg-services-grid .qg-ultra-rating-score, #qgServicesGrid .qg-ultra-rating-score { font-size: .65rem !important; font-weight: 700 !important; } .qg-services-grid .qg-ultra-desc, #qgServicesGrid .qg-ultra-desc { display: none !important; } .qg-services-grid .qg-ultra-meta, #qgServicesGrid .qg-ultra-meta { font-size: .8rem !important; font-weight: 800 !important; margin: 0 !important; } .qg-services-grid .qg-ultra-proof, #qgServicesGrid .qg-ultra-proof, .qg-services-grid .qg-viewing-badge, #qgServicesGrid .qg-viewing-badge, .qg-services-grid .qg-points-badge, #qgServicesGrid .qg-points-badge, .qg-services-grid .qg-emi-tag, #qgServicesGrid .qg-emi-tag, .qg-services-grid [class*="emi"], #qgServicesGrid [class*="emi"], .qg-services-grid [class*="addons"], #qgServicesGrid [class*="addons"] { display: none !important; } .qg-services-grid .qg-ultra-cta, #qgServicesGrid .qg-ultra-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: .5rem .5rem !important; font-size: .7rem !important; font-weight: 700 !important; border-radius: 9px !important; min-height: 33px !important; margin-top: auto !important; } .qg-services-grid .qg-ultra-cta::before, .qg-services-grid .qg-ultra-cta::after, #qgServicesGrid .qg-ultra-cta::before, #qgServicesGrid .qg-ultra-cta::after { display: none !important; } .qg-skeleton-card { display: flex !important; flex-direction: column !important; height: auto !important; border-radius: 16px !important; } .qg-skel-img { width: 100% !important; min-width: 100% !important; height: 128px !important; } /* Home page service cards: 2-col portrait */ .qg-services__inner { padding-inline: 0 !important; } .qg-services__inner .qg-section-head, .qg-services__inner .qg-promo-banner, .qg-services__inner .qg-services__urgency, .qg-services__inner .qg-center, .qg-services__inner .qg-services-filter { padding-inline: 1rem !important; } .qg-services__urgency { margin-inline: 1rem !important; } /* Override the services-grid to be 2-col for home page cards too */ .qg-services-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 1rem !important; border-top: none !important; margin-bottom: 1.5rem !important; } .qg-service-card { display: flex !important; flex-direction: column !important; border-radius: 16px !important; border: 1px solid rgba(212,175,106,.14) !important; box-shadow: 0 4px 14px rgba(28,10,46,.08) !important; overflow: hidden !important; min-height: unset !important; background: #fff !important; } .qg-service-card:hover { transform: none !important; } .qg-service-card__link { display: flex !important; flex-direction: column !important; flex: 1 !important; } .qg-service-card__img { width: 100% !important; min-width: 100% !important; height: 118px !important; min-height: 118px !important; aspect-ratio: unset !important; border-radius: 0 !important; position: relative !important; overflow: hidden !important; flex-shrink: 0 !important; } .qg-service-card__img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; transition: none !important; } .qg-service-card:hover .qg-service-card__img img { transform: none !important; } .qg-service-card__badge { top: 6px !important; left: 6px !important; font-size: .55rem !important; padding: 2px 6px !important; } .qg-service-card__bookings { bottom: 6px !important; left: 6px !important; right: auto !important; font-size: .54rem !important; } .qg-service-card__body { padding: .6rem .7rem .5rem !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: .18rem !important; } .qg-service-card__icon { font-size: .82rem !important; margin-bottom: 1px !important; } .qg-service-card__body h3 { font-size: .8rem !important; font-weight: 700 !important; line-height: 1.24 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-service-card__body p { display: none !important; } .qg-service-card__price { font-size: .79rem !important; font-weight: 700 !important; } .qg-service-card__duration { font-size: .64rem !important; } .qg-service-card__book-btn { display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; width: 100% !important; padding: .58rem .5rem !important; font-size: .7rem !important; border-radius: 0 !important; border-top: 1px solid rgba(212,175,106,.15) !important; border-left: none !important; margin-top: auto !important; } .qg-center { padding-inline: 1rem !important; padding-top: 1rem !important; } .qg-center .qg-btn { width: 100% !important; justify-content: center !important; min-height: 46px !important; display: flex !important; } /* Promo banner */ .qg-promo-banner { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; padding: 11px 13px !important; border-radius: 14px !important; margin-bottom: 1.25rem !important; } .qg-promo-banner__icon { font-size: 1.25rem !important; } .qg-promo-banner__text { min-width: unset !important; } .qg-promo-banner__text strong { font-size: .83rem !important; } .qg-promo-banner__text span { font-size: .7rem !important; } .qg-promo-banner__cta { font-size: .7rem !important; padding: 7px 12px !important; border-radius: 9px !important; } /* ================================================================ MISC — Trust bar, press, testimonials, membership, etc. ================================================================ */ .qg-trust-bar { padding-block: 0 !important; } .qg-trust-bar__inner { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; flex-wrap: unset !important; } .qg-trust-bar__divider { display: none !important; } .qg-trust-bar__item { padding: .85rem .38rem !important; border-right: 1px solid rgba(255,255,255,.07) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; } .qg-trust-bar__item:nth-child(3n) { border-right: none !important; } .qg-trust-bar__item:last-child { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: none !important; padding: .72rem 1rem !important; } .qg-trust-bar__item strong { font-size: 1.1rem !important; } .qg-trust-bar__item span { font-size: .55rem !important; } .qg-trust-strip { padding: 0 !important; } .qg-trust-strip-inner { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; flex-direction: unset !important; max-width: 100% !important; } .qg-trust-strip-divider { display: none !important; } .qg-trust-stat { padding: .78rem .38rem !important; gap: .1rem !important; border-right: 1px solid rgba(212,84,122,.1) !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; } .qg-trust-stat:nth-child(3n) { border-right: none !important; } .qg-trust-stat:nth-last-child(-n+3) { border-bottom: none !important; } .qg-trust-stat:last-child { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: none !important; } .qg-trust-stat-num { font-size: clamp(.95rem, 3.6vw, 1.2rem) !important; } .qg-trust-stat-label { font-size: .52rem !important; } .qg-press { padding-block: .8rem !important; overflow: hidden !important; } .qg-press__inner { flex-direction: column !important; gap: .48rem !important; padding: 0 1rem !important; } .qg-press__logos { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 1.5rem !important; padding-bottom: 2px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; } .qg-press__logos::-webkit-scrollbar { display: none !important; } .qg-press__logo { flex-shrink: 0 !important; } .qg-press__logo-text { font-size: .88rem !important; } /* Testimonials carousel */ .qg-testi-grid, .qg-t-list, .qg-t-list--six { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; flex-wrap: nowrap !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-testi-grid::-webkit-scrollbar, .qg-t-list::-webkit-scrollbar, .qg-t-list--six::-webkit-scrollbar { display: none !important; } .qg-testi, .qg-t-list > *, .qg-t-list--six > * { flex: 0 0 80vw !important; max-width: 300px !important; min-width: 240px !important; scroll-snap-align: start !important; border-radius: 18px !important; } .qg-testi:hover, .qg-t-list > *:hover, .qg-t-list--six > *:hover { transform: none !important; } .qg-testi__body { font-size: .88rem !important; } /* B/A carousel */ .qg-ba-grid { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; } .qg-ba-grid::-webkit-scrollbar { display: none !important; } .qg-ba-card { flex: 0 0 80vw !important; max-width: 300px !important; scroll-snap-align: start !important; } .qg-ba-handle__btn { width: 42px !important; height: 42px !important; } /* Membership carousel */ .qg-membership__cards { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-membership__cards::-webkit-scrollbar { display: none !important; } .qg-membership-plan { flex: 0 0 76vw !important; max-width: 270px !important; scroll-snap-align: start !important; border-radius: 18px !important; } .qg-plan__amount { font-size: 2.1rem !important; } .qg-membership__cta { padding-inline: 1rem !important; } .qg-membership__cta .qg-btn { width: 100% !important; justify-content: center !important; } /* Loyalty carousel */ .qg-loyalty-tiers { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 0 1rem 1rem !important; scrollbar-width: none !important; grid-template-columns: unset !important; max-width: 100% !important; margin: 0 0 1.5rem !important; -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; mask-image: linear-gradient(to right, black 85%, transparent 100%) !important; } .qg-loyalty-tiers::-webkit-scrollbar { display: none !important; } .qg-loyalty-tier { flex: 0 0 76vw !important; max-width: 270px !important; scroll-snap-align: start !important; } /* Transformation carousel */ .qg-transformation { padding: 2.5rem 0 !important; } .qg-trans-header { padding-inline: 1rem !important; margin-bottom: 1.4rem !important; } .qg-trans-grid { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 14px !important; padding: 0 1rem 1rem !important; max-width: 100vw !important; width: 100% !important; margin: 0 0 1.2rem !important; grid-template-columns: unset !important; scrollbar-width: none !important; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; } .qg-trans-grid::-webkit-scrollbar { display: none !important; } .qg-trans-card { flex: 0 0 76vw !important; max-width: 288px !important; scroll-snap-align: start !important; aspect-ratio: 3/4 !important; } .qg-trans-card:hover { transform: none !important; } .qg-trans-cta-row { padding-inline: 1rem !important; } .qg-trans-cta-row .qg-btn--ghost { width: 100% !important; justify-content: center !important; display: flex !important; } /* Artist join */ .qg-artist-join__inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; padding-inline: 1rem !important; } .qg-artist-join__perks { grid-template-columns: 1fr 1fr !important; } .qg-artist-join__stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .qg-artist-join__content .qg-btn { width: 100% !important; justify-content: center !important; min-height: 48px !important; display: flex !important; margin-top: 1rem !important; } /* FAQ */ .qg-faq__container, .qg-faq-inner { padding-inline: 1rem !important; } .qg-acc__header { padding: 14px 0 !important; font-size: .9rem !important; min-height: 48px !important; } .qg-faq-q { padding: .95rem 1rem !important; font-size: .86rem !important; min-height: 50px !important; } /* Referral */ .qg-referral { padding-block: 1.75rem !important; } .qg-referral__inner { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1.5rem 1.2rem !important; gap: .9rem !important; margin-inline: 1rem !important; border-radius: 20px !important; } .qg-referral__inner .qg-btn { width: 100% !important; justify-content: center !important; min-height: 46px !important; } /* App section */ .qg-app__inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; text-align: center !important; padding-inline: 1rem !important; } .qg-store { justify-content: center !important; gap: 9px !important; } .qg-app__qr { display: none !important; } .qg-app-img { max-height: 190px !important; } /* Manifesto */ .qg-manifesto__inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; padding-inline: 1rem !important; } } /* end @media (max-width: 768px) */ /* ================================================================ SMALL PHONE ≤430px ================================================================ */ @media (max-width: 430px) { /* Header even smaller */ .qg-announcement-bar { height: 28px !important; max-height: 28px !important; font-size: .62rem !important; } .qg-header { top: 28px !important; } body.qg-bar-hidden .qg-header { top: 0 !important; } .qg-header__inner { height: 52px !important; padding: 0 .85rem !important; } .qg-logo a { font-size: 1.22rem !important; } /* Hero shorter */ .qg-hero { min-height: 60svh !important; min-height: 60vh !important; height: 60svh !important; height: 60vh !important; } .qg-hero__content { padding: 4.5rem 1rem 1.25rem !important; gap: .52rem !important; } .qg-hero__title, .qg-hero__content h1 { font-size: clamp(1.85rem, 9.5vw, 2.5rem) !important; } /* Cards: shorter image */ .qg-services-grid .qg-ultra-media, #qgServicesGrid .qg-ultra-media { height: 108px !important; min-height: 108px !important; max-height: 108px !important; } .qg-service-card__img { height: 100px !important; min-height: 100px !important; } .qg-services-grid .qg-ultra-title, #qgServicesGrid .qg-ultra-title, .qg-service-card__body h3 { font-size: .76rem !important; } /* Artist: square crop */ .qg-artist-media { aspect-ratio: 1/1 !important; } /* HIW/process: 1-col on tiny screens */ .qg-hiw-steps, .qg-how__steps { grid-template-columns: 1fr !important; } .qg-hiw-steps .qg-hiw-step:last-of-type, .qg-step:last-of-type { grid-column: 1 !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } /* Safety/Hygiene: 1-col */ .qg-safety__grid, .qg-hygiene-grid { grid-template-columns: 1fr !important; } /* Standard/Pledge: 1-col */ .qg-standard-grid, .qg-pledge-grid { grid-template-columns: 1fr !important; } /* Spotlight: 1-col */ .qg-spotlight-grid { grid-template-columns: 1fr !important; } .qg-spotlight-img-wrap { height: 155px !important; } .qg-spot-bio { -webkit-line-clamp: 3 !important; } /* Blog: 1-col */ .qg-blog-grid { grid-template-columns: 1fr !important; } .qg-blog-hero { height: 115px !important; } .qg-blog-title { font-size: .88rem !important; } .qg-blog-excerpt { -webkit-line-clamp: 3 !important; } /* Trust bar: 2-col */ .qg-trust-bar__inner, .qg-trust-strip-inner { grid-template-columns: 1fr 1fr !important; } .qg-trust-bar__item:nth-child(3n), .qg-trust-stat:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.07) !important; } .qg-trust-bar__item:nth-child(2n), .qg-trust-stat:nth-child(2n) { border-right: none !important; } .qg-trust-bar__item:last-child, .qg-trust-stat:last-child { grid-column: 1 / -1 !important; border-right: none !important; } /* Artists 2-col even on 430 */ .qg-artists-grid { grid-template-columns: 1fr 1fr !important; } /* FAB adjustments for smaller screens */ .qg-cart-fab { width: 42px !important; height: 42px !important; bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; } .qg-concierge { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 52px) !important; } .qg-wa-fab { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 52px + 56px) !important; } /* Carousels: wider */ .qg-testi, .qg-t-list > *, .qg-t-list--six > * { flex: 0 0 86vw !important; } .qg-membership-plan { flex: 0 0 82vw !important; } .qg-trans-card { flex: 0 0 82vw !important; } .qg-loyalty-tier { flex: 0 0 82vw !important; } /* Artist join: 1-col perks */ .qg-artist-join__perks { grid-template-columns: 1fr !important; } } /* end @media (max-width: 430px) */ /* ═══════════════════════════════════════════════════════════ MOBILE PREMIUM PATCH v1.0 — MOBILE ONLY, NO DESKTOP CHANGES Fixes: 1. Header ↔ banner gap 2. Hero text centred 3. Payment row — all methods visible 4. Filter / Sort / Search / My Bookings — 2-row layout 5. Service cards — missing duration, addon, CTA info 6. "The Process" — 2-col grid 7. "Your Safety" cards — 2-col grid 8. "Meet Your Artists" — 2-col, images properly cropped 9. "Artist Spotlight" — 2-col grid 10. "Our Promise / Standard" — 2-col grid 11. "Glow Guide / Blog" — 2-col grid ═══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ 1 · HEADER ↔ HERO — close the gap ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-hero, #qgHero { margin-top: 0 !important; } body:has(#qgHero) .wp-site-blocks > *:first-child, body:has(#qgHero) main > *:first-child { margin-top: 0 !important; padding-top: 0 !important; } } /* ══════════════════════════════════════════════════════════ 2 · HERO — centre all text on mobile ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-hero__content, #qgHero .qg-hero__content { text-align: center !important; align-items: center !important; display: flex !important; flex-direction: column !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .qg-hero__title, .qg-hero__content h1, .qg-hero__subtitle, .qg-hero__content p, .qg-hero__eyebrow { text-align: center !important; width: 100% !important; } .qg-hero__cta-row { text-align: center !important; width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; gap: .75rem !important; } .qg-hero__trust, .qg-hero-trust-row { justify-content: center !important; text-align: center !important; } .qg-hero__scroll { left: 50% !important; transform: translateX(-50%) !important; } } /* ══════════════════════════════════════════════════════════ 3 · PAYMENT TRUST ROW — all methods visible ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-payment-trust { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 12px 16px !important; text-align: center !important; } .qg-pt-label { width: 100% !important; text-align: center !important; font-size: .78rem !important; font-weight: 600 !important; color: rgba(90,46,72,.7) !important; margin-bottom: 2px !important; } .qg-pt-logos { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 6px 8px !important; } .qg-pt-method { font-size: .72rem !important; padding: 3px 9px !important; border-radius: 6px !important; } .qg-pt-sep { display: none !important; } .qg-pt-ssl { margin-top: 2px !important; font-size: .72rem !important; } } /* ══════════════════════════════════════════════════════════ 4 · FILTER / SORT / SEARCH / MY BOOKINGS — premium 2-row ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-controls { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px 14px !important; background: #FFFBFD !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; } .qg-search-wrap { grid-column: 1 / -1 !important; order: 0 !important; min-width: unset !important; flex: unset !important; } .qg-search-wrap input { width: 100% !important; height: 42px !important; font-size: .88rem !important; border-radius: 12px !important; padding-left: 2.4rem !important; background: rgba(255,255,255,.95) !important; border: 1.5px solid rgba(212,84,122,.15) !important; box-shadow: 0 2px 10px rgba(42,14,34,.04) !important; } .qg-price-filter, .qg-price-btn { order: 1 !important; width: 100% !important; height: 40px !important; border-radius: 12px !important; font-size: .82rem !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; background: rgba(255,255,255,.95) !important; border: 1.5px solid rgba(212,84,122,.15) !important; color: #5A2E48 !important; font-weight: 600 !important; cursor: pointer !important; } .qg-controls select, .qg-sort-select { order: 2 !important; width: 100% !important; height: 40px !important; border-radius: 12px !important; font-size: .82rem !important; background: rgba(255,255,255,.95) !important; border: 1.5px solid rgba(212,84,122,.15) !important; color: #5A2E48 !important; font-weight: 600 !important; padding: 0 12px !important; } .qg-badge, .qg-mybookings-badge { order: 3 !important; grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 16px !important; border-radius: 14px !important; background: linear-gradient(135deg, rgba(212,84,122,.06), rgba(201,168,108,.04)) !important; border: 1.5px solid rgba(212,84,122,.18) !important; font-size: .84rem !important; font-weight: 700 !important; color: #B03060 !important; text-decoration: none !important; box-shadow: 0 2px 10px rgba(212,84,122,.08) !important; } } /* ══════════════════════════════════════════════════════════ 5 · SERVICE CARDS — complete card anatomy on mobile ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-services-grid, #qgServicesGrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 12px !important; } .qg-ultra-card, .qg-service-card { border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 4px 18px rgba(42,14,34,.1) !important; border: 1px solid rgba(212,84,122,.1) !important; background: #fff !important; } .qg-ultra-media, .qg-service-card__img { height: 130px !important; min-height: 130px !important; max-height: 130px !important; position: relative !important; } .qg-ultra-media img, .qg-service-card__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; } .qg-ultra-dur, .qg-duration-pill { position: absolute !important; bottom: 8px !important; left: 8px !important; background: rgba(26,8,24,.72) !important; backdrop-filter: blur(8px) !important; color: #fff !important; font-size: .64rem !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 7px !important; letter-spacing: .02em !important; display: inline-block !important; } .qg-card-wish-btn { width: 30px !important; height: 30px !important; top: 8px !important; right: 8px !important; border-radius: 50% !important; background: rgba(255,255,255,.88) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(0,0,0,.14) !important; } .qg-ultra-body, .qg-service-card__body { padding: 10px 10px 12px !important; } .qg-ultra-title, .qg-service-card__body h3 { font-size: .8rem !important; font-weight: 700 !important; color: #2A0E22 !important; margin: 0 0 4px !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-ultra-rating, .qg-service-card__rating { display: flex !important; align-items: center !important; gap: 3px !important; font-size: .72rem !important; color: #9A6080 !important; margin-bottom: 5px !important; } .qg-ultra-price, .qg-service-card__price { font-size: .9rem !important; font-weight: 800 !important; color: #2A0E22 !important; margin-bottom: 4px !important; } .qg-ultra-meta, .qg-service-card__meta { font-size: .7rem !important; color: #9A6080 !important; display: flex !important; align-items: center !important; gap: 4px !important; margin-bottom: 6px !important; } .qg-ultra-addon, .qg-addon-pill { display: inline-flex !important; align-items: center !important; gap: 3px !important; font-size: .64rem !important; font-weight: 600 !important; color: #B03060 !important; background: rgba(212,84,122,.07) !important; border: 1px solid rgba(212,84,122,.18) !important; border-radius: 6px !important; padding: 2px 7px !important; margin-bottom: 7px !important; } .qg-ultra-cta, .qg-service-card__cta, .qg-card-cta { width: 100% !important; padding: 9px 10px !important; border-radius: 10px !important; font-size: .76rem !important; font-weight: 700 !important; letter-spacing: .01em !important; background: linear-gradient(135deg, #D4547A, #B03060) !important; color: #fff !important; border: none !important; cursor: pointer !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; box-shadow: 0 4px 14px rgba(176,48,96,.22) !important; text-decoration: none !important; } } /* ══════════════════════════════════════════════════════════ 6 · THE PROCESS / HOW IT WORKS — 2-col grid on mobile ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-hiw-steps, .qg-how__steps { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 14px !important; flex-direction: unset !important; align-items: unset !important; max-width: 100% !important; } .qg-hiw-step, .qg-hiw-steps .qg-hiw-step, .qg-how__steps .qg-step { flex: unset !important; max-width: 100% !important; min-width: 0 !important; background: rgba(255,255,255,.95) !important; border: 1.5px solid rgba(212,84,122,.12) !important; border-radius: 20px !important; padding: 18px 14px 16px !important; text-align: center !important; box-shadow: 0 4px 18px rgba(42,14,34,.08) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .qg-hiw-icon { width: 44px !important; height: 44px !important; border-radius: 50% !important; margin: 0 auto !important; flex-shrink: 0 !important; } .qg-hiw-step h3, .qg-step h3 { font-size: .82rem !important; font-weight: 700 !important; color: #2A0E22 !important; margin: 0 !important; line-height: 1.35 !important; } .qg-hiw-step p, .qg-step p { font-size: .73rem !important; color: #9A6080 !important; line-height: 1.55 !important; margin: 0 !important; } .qg-hiw-time { font-size: .62rem !important; padding: .18rem .6rem !important; margin-top: 4px !important; } .qg-hiw-connector { display: none !important; } .qg-hiw-cta-row { padding: 0 14px !important; margin-top: 1.5rem !important; } .qg-hiw-explore-btn { width: 100% !important; padding: .85rem 1.5rem !important; font-size: .86rem !important; } } @media (max-width: 380px) { .qg-hiw-steps, .qg-how__steps { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════════════ 7 · YOUR SAFETY CARDS — 2-col grid on mobile ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-safety__grid, .qg-hygiene-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 0 14px !important; flex-direction: unset !important; overflow-x: unset !important; scroll-snap-type: unset !important; -webkit-mask-image: none !important; mask-image: none !important; } .qg-safety-card, .qg-hygiene-card { flex: unset !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; border-radius: 18px !important; padding: 16px 12px !important; text-align: center !important; background: rgba(255,255,255,.95) !important; border: 1.5px solid rgba(155,126,200,.18) !important; box-shadow: 0 4px 16px rgba(42,14,34,.07) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 7px !important; } .qg-hygiene-icon { width: 44px !important; height: 44px !important; border-radius: 50% !important; margin: 0 auto !important; flex-shrink: 0 !important; } .qg-safety-card h3, .qg-hygiene-card h3 { font-size: .8rem !important; font-weight: 700 !important; color: #2A0E22 !important; margin: 0 !important; line-height: 1.3 !important; } .qg-safety-card p, .qg-hygiene-card p { font-size: .72rem !important; color: #9A6080 !important; line-height: 1.5 !important; margin: 0 !important; } } /* ══════════════════════════════════════════════════════════ 8 · MEET YOUR ARTISTS — 2-col, faces fully visible ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-artists-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 14px !important; flex-direction: unset !important; overflow-x: unset !important; scroll-snap-type: unset !important; -webkit-mask-image: none !important; mask-image: none !important; } .qg-artist-card { flex: unset !important; min-width: 0 !important; max-width: 100% !important; scroll-snap-align: unset !important; border-radius: 20px !important; overflow: hidden !important; background: #fff !important; border: 1px solid rgba(212,84,122,.12) !important; box-shadow: 0 6px 22px rgba(42,14,34,.1) !important; display: flex !important; flex-direction: column !important; } .qg-artist-media { width: 100% !important; aspect-ratio: 3 / 4 !important; height: auto !important; min-height: 160px !important; max-height: 220px !important; position: relative !important; overflow: hidden !important; flex-shrink: 0 !important; background: linear-gradient(135deg, #FAC8D8, #D4C0F0) !important; } .qg-artist-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 15% !important; display: block !important; } .qg-artist-avail { position: absolute !important; top: 8px !important; right: 8px !important; background: rgba(26,140,80,.9) !important; color: #fff !important; font-size: .62rem !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; gap: 4px !important; } .qg-artist-body { padding: 12px 10px 14px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .qg-artist-name { font-size: .85rem !important; font-weight: 700 !important; color: #2A0E22 !important; margin: 0 !important; line-height: 1.2 !important; } .qg-artist-speciality, .qg-artist-spec { font-size: .7rem !important; color: #9A6080 !important; margin: 0 0 4px !important; } .qg-artist-rating { display: flex !important; align-items: center !important; gap: 3px !important; font-size: .72rem !important; font-weight: 700 !important; color: #C9A86C !important; margin-bottom: 4px !important; } .qg-artist-bio { font-size: .7rem !important; color: #7A5868 !important; line-height: 1.5 !important; margin: 0 0 6px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-artist-creds { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-bottom: 8px !important; } .qg-artist-cred { font-size: .62rem !important; padding: 2px 6px !important; border-radius: 6px !important; background: rgba(212,84,122,.06) !important; color: #B03060 !important; font-weight: 600 !important; } .qg-artist-cta, .qg-artist-book-btn { display: flex !important; align-items: center !important; gap: 5px !important; font-size: .76rem !important; font-weight: 700 !important; color: #D4547A !important; text-decoration: none !important; margin-top: auto !important; padding-top: 4px !important; } } /* ══════════════════════════════════════════════════════════ 9 · ARTIST SPOTLIGHT — 2-col grid on mobile ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-spotlight-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 14px !important; flex-direction: unset !important; overflow-x: unset !important; scroll-snap-type: unset !important; -webkit-mask-image: none !important; mask-image: none !important; } .qg-spotlight-card { flex: unset !important; min-width: 0 !important; max-width: 100% !important; scroll-snap-align: unset !important; border-radius: 20px !important; overflow: hidden !important; background: #fff !important; border: 1px solid rgba(212,84,122,.12) !important; box-shadow: 0 6px 24px rgba(42,14,34,.1) !important; display: flex !important; flex-direction: column !important; } .qg-spotlight-img-wrap { width: 100% !important; height: 180px !important; min-height: 160px !important; max-height: 200px !important; overflow: hidden !important; position: relative !important; flex-shrink: 0 !important; background: linear-gradient(135deg, #FAC8D8, #D4C0F0) !important; } .qg-spotlight-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 10% !important; display: block !important; } .qg-spot-avail { top: 8px !important; right: 8px !important; font-size: .62rem !important; padding: 3px 8px !important; border-radius: 8px !important; } .qg-spotlight-body { padding: 11px 10px 13px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .qg-spot-name { font-size: .84rem !important; font-weight: 700 !important; color: #2A0E22 !important; margin: 0 !important; line-height: 1.2 !important; } .qg-spot-spec { font-size: .68rem !important; color: #9A6080 !important; margin: 0 !important; } .qg-spot-rating { display: flex !important; align-items: center !important; gap: 3px !important; font-size: .72rem !important; color: #C9A86C !important; font-weight: 700 !important; margin: 2px 0 !important; } .qg-spot-bio { font-size: .7rem !important; color: #7A5868 !important; line-height: 1.5 !important; -webkit-line-clamp: 3 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 0 6px !important; } .qg-spot-cta, .qg-spot-book { font-size: .76rem !important; font-weight: 700 !important; color: #D4547A !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 5px !important; margin-top: auto !important; padding-top: 4px !important; } } @media (max-width: 380px) { .qg-spotlight-grid { grid-template-columns: 1fr !important; max-width: 320px !important; margin: 0 auto !important; } } /* ══════════════════════════════════════════════════════════ 10 · OUR PROMISE / STANDARD — 2-col grid on mobile ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-standard-grid, .qg-pledge-grid { grid-template-columns: 1fr 1fr !important; max-width: 100% !important; padding: 0 14px !important; gap: 10px !important; margin-bottom: 2rem !important; } .qg-standard-card, .qg-pledge-card { padding: 16px 12px !important; border-radius: 18px !important; min-height: unset !important; gap: 5px !important; } .qg-standard-icon, .qg-pledge-icon { width: 44px !important; height: 44px !important; margin: 0 auto 8px !important; } .qg-standard-card h3, .qg-pledge-card h3 { font-size: .82rem !important; margin: 0 0 4px !important; } .qg-standard-card p, .qg-pledge-card p { font-size: .72rem !important; line-height: 1.55 !important; } .qg-standard-badge { font-size: .62rem !important; padding: .22rem .6rem !important; } /* Trust counter: 2×2 grid */ .qg-standard-trust { flex-wrap: wrap !important; gap: 0 !important; padding: 1.25rem 1rem !important; margin: 0 14px !important; border-radius: 18px !important; } .qg-standard-trust-stat { width: 50% !important; padding: .5rem .75rem !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; } .qg-standard-trust-stat:nth-child(odd) { border-right: 1px solid rgba(212,84,122,.08) !important; } .qg-standard-trust-stat:nth-last-child(-n+2) { border-bottom: none !important; } .qg-standard-trust-divider { display: none !important; } .qg-standard-trust-num { font-size: 1.6rem !important; } .qg-standard-trust-label { font-size: .7rem !important; } } /* ══════════════════════════════════════════════════════════ 11 · GLOW GUIDE / BLOG — 2-col grid on mobile ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .qg-blog-grid, .qg-glow-guide-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 14px !important; flex-direction: unset !important; overflow-x: unset !important; scroll-snap-type: unset !important; -webkit-mask-image: none !important; mask-image: none !important; } .qg-blog-card, .qg-glow-guide-card { flex: unset !important; min-width: 0 !important; max-width: 100% !important; scroll-snap-align: unset !important; border-radius: 18px !important; overflow: hidden !important; background: #fff !important; border: 1px solid rgba(212,84,122,.1) !important; box-shadow: 0 4px 18px rgba(42,14,34,.09) !important; display: flex !important; flex-direction: column !important; } .qg-blog-hero, .qg-blog-img { width: 100% !important; height: 110px !important; min-height: 110px !important; overflow: hidden !important; flex-shrink: 0 !important; background: linear-gradient(135deg, #FAC8D8, #D4C0F0) !important; } .qg-blog-hero img, .qg-blog-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .qg-blog-body { padding: 10px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .qg-blog-tag { font-size: .62rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #D4547A !important; margin: 0 !important; } .qg-blog-title { font-size: .8rem !important; font-weight: 700 !important; color: #2A0E22 !important; line-height: 1.3 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .qg-blog-excerpt { font-size: .7rem !important; color: #9A6080 !important; line-height: 1.5 !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; } .qg-blog-meta { font-size: .65rem !important; color: #b89aa6 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: auto !important; padding-top: 6px !important; } .qg-blog-read-link { font-size: .72rem !important; font-weight: 700 !important; color: #D4547A !important; text-decoration: none !important; } } @media (max-width: 380px) { .qg-blog-grid, .qg-glow-guide-grid { grid-template-columns: 1fr !important; max-width: 300px !important; margin: 0 auto !important; } } /* ══════════════════════════════════════════════════════════ TOUCH FEEDBACK — active states for tap interactions ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) and (hover: none) { .qg-ultra-card:active, .qg-service-card:active, .qg-artist-card:active, .qg-spotlight-card:active, .qg-standard-card:active, .qg-blog-card:active, .qg-hiw-step:active { transform: scale(0.97) !important; transition: transform .15s ease !important; } }