/* Pro Star Detailing — homepage styles (from the live site) */ :root { --cyan: #D81820; --cyan-dark: #7E0D12; --cyan-glow: #EF3B42; --blue: #A81218; --blue-deep: #5A090D; --silver: #C0C8D0; --silver-light: #F8D2D4; --black: #050608; --black-light: #0E1014; --black-mid: #14171D; --navy: #0D1B2A; --white: #FFFFFF; --gray: #888888; --text-light: #CCCCCC; /* Pro Star Detailing gold aliases (used by booking modal CSS) */ --gold: #D81820; --gold-dark: #A81218; --gold-light: #EF3B42; --gold-bg: rgba(216,24,32,0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 19px; } /* bumped up base font */ @media (max-width: 1024px) { html { font-size: 18.5px; } } @media (max-width: 768px) { html { font-size: 18px; } } body { font-family: 'Sora', sans-serif; background: var(--black); color: var(--white); overflow-x: hidden; line-height: 1.7; } @media (max-width: 767px) { body { padding-bottom: 70px; } } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 900; } .mobile-gift-card-link { color: var(--gold) !important; font-weight: 800 !important; } /* Phone view: hide CTA fully, give phone number full visibility, prevent any overflow */ @media (max-width: 720px) { .header-cta { display: none !important; } .sticky-header { padding: 0 14px; gap: 10px; } .header-logo { min-width: 0; flex-shrink: 1; } .header-logo img { height: 46px; max-width: 110px; object-fit: contain; } .header-phone-btn { padding: 0 12px; height: 38px; font-size: 0.88rem; gap: 6px; flex-shrink: 1; min-width: 0; } .header-phone-btn span { display: inline; white-space: nowrap; } .hamburger-menu { padding: 6px; margin-left: 0; flex-shrink: 0; } .hamburger-menu span { width: 22px; } } /* HERO */ .hero { position: relative; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; padding: 0; background: var(--black); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(0.85) contrast(1.08) saturate(1.15); opacity: 1; transition: opacity 0.6s ease; background: var(--black); } .hero-video.video-failed { opacity: 0; } .hero-bg-image { position: absolute; inset: 0; z-index: 1; background-image: url('../../../uploads/2026/07/mercedes-g-wagon-detailing.jpg'); background-size: cover; background-position: center; opacity: 0; /* fallback only — shown by JS if the video fails */ transition: opacity 0.6s; } /* Only show bg-image if video errors out */ .hero-video.video-failed ~ .hero-bg-image { opacity: 0.65; } .hero-bg-overlay { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 25% 30%, rgba(216,24,32,0.30) 0%, transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(229,194,0,0.32) 0%, transparent 60%), linear-gradient(180deg, rgba(5,6,8,0.55) 0%, rgba(10,18,32,0.40) 50%, rgba(5,6,8,0.85) 100%); } .hero-grid { position: absolute; inset: 0; z-index: 3; background-image: linear-gradient(rgba(216,24,32,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(216,24,32,0.06) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } .hero-bottom-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; z-index: 4; background: linear-gradient(to bottom, transparent, var(--black)); pointer-events: none; } .hero-wrapper { position: relative; z-index: 5; width: 100%; max-width: 1400px; margin: 0 auto; padding: 150px 80px 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; } .hero-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 30px; opacity: 0; animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.08s; } .hero-eyebrow-line { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); } .hero-eyebrow-text { font-family: 'Chakra Petch', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 12px rgba(216,24,32,0.5); padding-left: 0.45em; padding-right: 0.45em; } .hero-eyebrow-text .eb-line { display: inline; white-space: nowrap; } @media (max-width: 720px) { .hero-eyebrow { flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: center; } .hero-eyebrow-line { width: 28px; flex-shrink: 0; } .hero-eyebrow-text { display: flex !important; flex-direction: column; align-items: center; gap: 6px; line-height: 1.15; padding-left: 0.2em !important; padding-right: 0.2em !important; font-size: 0.8rem; letter-spacing: 0.35em; } .hero-eyebrow-text .eb-line { display: block; } } @media (max-width: 380px) { .hero-eyebrow-text { font-size: 0.72rem; letter-spacing: 0.28em; gap: 4px; } .hero-eyebrow-line { width: 18px; } } .hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .hero-logo { margin-bottom: 30px; opacity: 0; animation: heroFadeUp 0.9s ease forwards; animation-delay: 0.16s; position: relative; } .hero-logo img { height: 180px; width: auto; filter: drop-shadow(0 0 30px rgba(216,24,32,0.4)); } .hero-headline { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: clamp(2.6rem, 6.5vw, 5.4rem); line-height: 0.95; letter-spacing: 0.02em; color: var(--white); margin-bottom: 32px; } .hero-headline-line1, .hero-headline-line2 { display: block; opacity: 0; animation: heroFadeUp 1s ease forwards; } .hero-headline-line1 { animation-delay: 0.7s; } .hero-headline-line2 { animation-delay: 0.30s; } .hero-cyan-word { background: linear-gradient(135deg, var(--cyan-glow) 0%, var(--cyan) 30%, #FFFFFF 50%, var(--cyan) 70%, var(--blue) 100%); background-size: 250% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: chromeShift 5s ease-in-out infinite; } @keyframes chromeShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } .hero-tagline { font-family: 'Chakra Petch', sans-serif; font-size: 1.55rem; font-weight: 500; color: var(--silver-light); letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 24px; opacity: 0; animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.30s; } .hero-tagline-img { display: block; max-width: 400px; width: 100%; height: auto; } .hero-tagline-divider { display: inline-block; margin: 0 14px; color: var(--cyan); font-weight: 700; } .hero-copy { font-family: 'Sora', sans-serif; font-size: 1.18rem; font-weight: 400; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; margin-bottom: 48px; opacity: 0; animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.34s; max-width: 680px; line-height: 1.65; } .hero-cta-row { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; opacity: 0; animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.40s; } .hero-cta { display: inline-flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%); color: #FFFFFF; padding: 20px 46px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; border: none; cursor: pointer; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: transform 0.25s, box-shadow 0.25s, filter 0.25s; } .hero-cta:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 12px 40px rgba(216,24,32,0.5); } .hero-phone-pill { display: inline-flex; align-items: center; gap: 14px; background: rgba(216,24,32,0.06); border: 1.5px solid rgba(216,24,32,0.4); padding: 16px 28px; text-decoration: none; transition: background 0.25s, border-color 0.25s; backdrop-filter: blur(8px); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .hero-phone-pill:hover { background: rgba(216,24,32,0.12); border-color: var(--cyan); box-shadow: 0 0 20px rgba(216,24,32,0.3); } .hero-phone-pill svg { fill: var(--cyan); flex-shrink: 0; } .hero-phone-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.18rem; color: var(--cyan); letter-spacing: 0.04em; } .hero-phone-sub { font-family: 'Chakra Petch', sans-serif; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 2px; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .seo-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 1200px) { .hero-wrapper { padding: 130px 50px 110px; } } @media (max-width: 768px) { .hero-wrapper { padding: 100px 22px 80px; } .hero-logo img { height: 130px; } .hero-headline { font-size: clamp(2rem, 8.5vw, 3.4rem); margin-bottom: 18px; } .hero-tagline { font-size: 1.05rem; letter-spacing: 0.22em; } .hero-tagline-img { max-width: 260px; } .hero-copy { font-size: 1.08rem; margin-bottom: 36px; } .hero-tagline-divider { margin: 0 8px; } .hero-cta-row { gap: 14px; } .hero-cta { padding: 18px 32px; font-size: 1rem; } .hero-phone-pill { padding: 14px 20px; } .hero-phone-num { font-size: 1.1rem; } .hero-phone-sub { display: none; } } /* TRUST BAR */ .trust-bar { background: linear-gradient(180deg, var(--navy) 0%, var(--black-light) 100%); padding: 56px 60px; border-top: 1px solid rgba(216,24,32,0.15); border-bottom: 1px solid rgba(216,24,32,0.08); position: relative; } .trust-bar::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); } .trust-bar-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: center; align-items: flex-end; gap: 100px; flex-wrap: wrap; } .trust-item { text-align: center; } .trust-item .number { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: 3.6rem; line-height: 1; background: linear-gradient(135deg, var(--cyan-glow) 0%, var(--cyan) 50%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .trust-item .label { font-family: 'Chakra Petch', sans-serif; font-size: 0.98rem; font-weight: 600; color: var(--text-light); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 10px; } /* PRICING / BOOKING */ #pricingPage { background: linear-gradient(180deg, var(--black-light) 0%, var(--black) 100%); position: relative; } #pricingPage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(216,24,32,0.05) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(229,194,0,0.05) 0%, transparent 40%); pointer-events: none; } .pp-hero { padding: 90px 24px 60px; text-align: center; position: relative; z-index: 1; } .pp-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(216,24,32,0.08); border: 1px solid rgba(216,24,32,0.4); color: var(--cyan); font-family: 'Chakra Petch', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; padding: 10px 22px; border-radius: 30px; margin-bottom: 24px; } .pp-hero-title { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: clamp(2.2rem, 5.2vw, 3.8rem); color: var(--white); line-height: 1.1; margin-bottom: 18px; letter-spacing: 0.02em; } .pp-hero-title span { background: linear-gradient(135deg, var(--cyan-glow) 0%, var(--cyan) 50%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pp-hero-sub { font-family: 'Sora', sans-serif; font-size: 1.15rem; color: var(--text-light); font-weight: 400; line-height: 1.7; max-width: 680px; margin: 0 auto; } .pp-section { padding: 40px 20px 0; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .pp-section-title { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 1.35rem; font-weight: 900; color: var(--white); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 10px; } .pp-section-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 2px; margin-bottom: 14px; box-shadow: 0 0 12px rgba(216,24,32,0.4); } .pp-section-sub { font-family: 'Sora', sans-serif; font-size: 1.02rem; color: var(--text-light); font-weight: 400; margin-bottom: 26px; line-height: 1.65; } @media (min-width: 700px) { .pp-cards.pp-cards-two { grid-template-columns: 1fr 1fr; max-width: 800px; } } .pp-cards { display: flex; flex-direction: column; gap: 20px; padding: 0 20px 8px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .pp-row-label { max-width: 1200px; margin: 32px auto 14px; padding: 0 20px; } .pp-row-label span { display: inline-flex; align-items: center; gap: 8px; font-family: 'Chakra Petch', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--cyan); background: rgba(216,24,32,0.08); border: 1px solid rgba(216,24,32,0.3); padding: 9px 20px; border-radius: 4px; } .pp-row-label-exec span { color: var(--silver-light); background: rgba(192,200,208,0.06); border-color: rgba(192,200,208,0.3); } .pp-row-label-extras span { color: #FFB347; background: rgba(255,179,71,0.08); border-color: rgba(255,179,71,0.3); } .pp-card { background: linear-gradient(160deg, var(--black-mid) 0%, var(--black-light) 100%); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; display: flex; flex-direction: column; position: relative; } .pp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,24,32,0.4), transparent); opacity: 0; transition: opacity 0.3s; } .pp-card:hover { border-color: rgba(216,24,32,0.6); box-shadow: 0 16px 50px rgba(216,24,32,0.22), 0 0 0 1px rgba(216,24,32,0.25); transform: translateY(-6px); } .pp-card:hover::before { opacity: 1; } .pp-card.popular { border-color: rgba(216,24,32,0.5); box-shadow: 0 0 0 1px rgba(216,24,32,0.3), 0 8px 30px rgba(216,24,32,0.15); } .pp-card.popular::before { opacity: 1; } .pp-card-header { display: flex; align-items: stretch; min-height: 130px; position: relative; overflow: hidden; } .pp-card-img { width: 130px; object-fit: cover; flex-shrink: 0; background: var(--navy); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* Divider between header (image+price) and description */ .pp-card-divider { height: 2px; margin: 0 18px; background: linear-gradient(90deg, transparent 0%, var(--cyan) 25%, var(--blue) 50%, var(--cyan) 75%, transparent 100%); opacity: 0.5; transition: opacity 0.4s, transform 0.5s; transform: scaleX(0.7); transform-origin: center; } .pp-card:hover .pp-card-divider { opacity: 1; transform: scaleX(1); } /* Image grows on hover */ .pp-card:hover .pp-card-img { transform: scale(1.06); } /* Price gets a soft glow on hover */ .pp-card-price { transition: filter 0.4s, transform 0.4s; } .pp-card:hover .pp-card-price { filter: drop-shadow(0 0 12px rgba(216,24,32,0.5)); transform: translateX(2px); } .pp-card-info { padding: 20px 20px 16px; flex: 1; } .pp-popular-badge { display: inline-block; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #FFFFFF; font-family: 'Chakra Petch', sans-serif; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; padding: 5px 12px; border-radius: 3px; margin-bottom: 10px; } .pp-card-name { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 1.28rem; font-weight: 800; color: var(--white); margin-bottom: 8px; letter-spacing: 0; line-height: 1.25; } .pp-card-price { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 2rem; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--cyan-glow) 0%, var(--cyan) 60%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pp-card-price-from { font-family: 'Chakra Petch', sans-serif; font-size: 0.82rem; color: var(--gray); font-weight: 600; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.1em; } .pp-card-surcharge { font-family: 'Sora', sans-serif; font-size: 0.82rem; color: var(--gray); font-weight: 500; margin-top: 6px; } .pp-card-desc { font-family: 'Sora', sans-serif; font-size: 1rem; color: var(--text-light); line-height: 1.6; font-weight: 400; } .pp-card-body { padding: 0 20px 24px; display: flex; flex-direction: column; flex: 1; } .pp-feats { list-style: none; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .pp-feat { display: flex; align-items: flex-start; gap: 11px; font-family: 'Sora', sans-serif; font-size: 1rem; color: rgba(255,255,255,0.88); font-weight: 400; line-height: 1.5; } .pp-feat::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; margin-top: 5px; background: linear-gradient(135deg, var(--cyan), var(--blue)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .pp-feat.highlight { color: var(--cyan-glow); font-weight: 500; } .pp-feat.highlight::before { background: var(--cyan-glow); box-shadow: 0 0 8px var(--cyan); } .pp-card-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } /* SCHEDULE ONLINE BUTTON — angled clip, blue gradient default, fades to outline on hover */ button.pp-schedule-btn, a.pp-schedule-btn { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 100%; padding: 18px 24px !important; background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%) !important; color: #FFFFFF !important; font-family: 'Chakra Petch', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; transition: filter 0.25s, transform 0.25s, box-shadow 0.25s; text-decoration: none !important; margin-top: auto; border: none !important; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); -webkit-clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); overflow: hidden; box-shadow: 0 6px 20px rgba(216,24,32,0.25); } button.pp-schedule-btn::before, a.pp-schedule-btn::before { content: ''; position: absolute; inset: 0; background: var(--black); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); z-index: 0; } button.pp-schedule-btn > span, a.pp-schedule-btn > span { position: relative; z-index: 1; transition: color 0.25s; } button.pp-schedule-btn:hover, a.pp-schedule-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(216,24,32,0.35); } button.pp-schedule-btn:hover::before, a.pp-schedule-btn:hover::before { transform: translateY(0); } button.pp-schedule-btn:hover > span, a.pp-schedule-btn:hover > span { color: var(--cyan); } .pp-learn-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px; font-family: 'Chakra Petch', sans-serif; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); transition: color 0.2s; text-decoration: none; } .pp-learn-link:hover { color: var(--cyan); } .pp-learn-link svg { width: 14px; height: 14px; fill: currentColor; } @media (min-width: 700px) { .pp-hero { padding: 110px 40px 70px; } .pp-section { padding: 56px 32px 0; } .pp-row-label { padding: 0 32px; } .pp-card-img { width: 150px; } .pp-card-name { font-size: 1.28rem; } .pp-card-price { font-size: 2.2rem; } .pp-feat { font-size: 1.02rem; } } @media (min-width: 1100px) { .pp-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding: 0 32px 8px; } } /* SECTION COMMON */ .section-header { text-align: center; margin-bottom: 64px; } .section-tag { font-family: 'Chakra Petch', sans-serif; color: var(--cyan); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 18px; } .section-tag::before, .section-tag::after { content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); } .section-tag::after { background: linear-gradient(90deg, var(--cyan), transparent); } .section-title { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: 3.6rem; letter-spacing: 0.02em; margin-bottom: 24px; color: var(--white); line-height: 1.05; } .section-subtitle { color: var(--text-light); font-size: 1.18rem; max-width: 660px; margin: 0 auto; line-height: 1.7; } /* GALLERY */ .gallery-section { padding: 110px 60px; background: linear-gradient(180deg, var(--black) 0%, var(--navy) 100%); position: relative; overflow: hidden; } .gallery-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; z-index: 0; } .gallery-section > * { position: relative; z-index: 1; } .gallery-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 220px; gap: 16px; } .gallery-item { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid rgba(216,24,32,0.15); background: var(--black-light); transition: transform 0.4s, border-color 0.3s, box-shadow 0.3s; } .gallery-item:hover { transform: translateY(-4px); border-color: rgba(216,24,32,0.5); box-shadow: 0 12px 36px rgba(216,24,32,0.15); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; display: block; } .gallery-item:hover img { transform: scale(1.06); } .gallery-item .gallery-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.95)); padding: 36px 18px 16px; color: var(--white); font-family: 'Chakra Petch', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .gallery-item:nth-child(1) { grid-column: span 6; grid-row: span 2; } .gallery-item:nth-child(2) { grid-column: span 3; } .gallery-item:nth-child(3) { grid-column: span 3; } .gallery-item:nth-child(4) { grid-column: span 3; } .gallery-item:nth-child(5) { grid-column: span 3; } @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; } .gallery-item:nth-child(1) { grid-column: span 6; grid-row: span 2; } .gallery-item:nth-child(2), .gallery-item:nth-child(3) { grid-column: span 3; } .gallery-item:nth-child(4), .gallery-item:nth-child(5) { grid-column: span 3; } } @media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } .gallery-item { grid-column: span 1 !important; grid-row: span 1 !important; } } /* SETUP CTA ROW (under mobile setup gallery) */ .setup-cta-row { display: flex; gap: 16px; justify-content: center; align-items: stretch; max-width: 720px; margin: 56px auto 0; padding: 0 16px; } .setup-cta-phone, .setup-cta-book { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 28px; font-family: 'Chakra Petch', sans-serif; font-weight: 800; font-size: 0.98rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 4px; transition: filter 0.2s, transform 0.2s, box-shadow 0.2s; white-space: nowrap; } .setup-cta-phone { background: rgba(216,24,32,0.08); border: 2px solid var(--gold); color: var(--gold); } .setup-cta-phone:hover { background: var(--gold); color: #0A0A0A; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(216,24,32,0.3); } .setup-cta-book { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #0A0A0A; border: 2px solid var(--gold); box-shadow: 0 6px 18px rgba(216,24,32,0.25); } .setup-cta-book:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(216,24,32,0.4); } .setup-cta-phone svg, .setup-cta-book svg { fill: currentColor; flex-shrink: 0; } @media (max-width: 600px) { .setup-cta-row { flex-direction: column; gap: 12px; margin-top: 40px; } .setup-cta-phone, .setup-cta-book { padding: 16px 22px; font-size: 0.92rem; } } /* REVIEWS */ .reviews-section { padding: 110px 60px; background: linear-gradient(180deg, var(--navy) 0%, var(--black) 100%); position: relative; } .reviews-placeholder { text-align: center; padding: 70px 32px; background: rgba(216,24,32,0.03); border: 1px dashed rgba(216,24,32,0.25); border-radius: 12px; max-width: 1400px; margin: 0 auto; } .reviews-stars { font-size: 2.5rem; color: var(--cyan); letter-spacing: 0.5em; margin-bottom: 22px; text-shadow: 0 0 20px rgba(216,24,32,0.5); } .reviews-link { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #FFFFFF; padding: 15px 34px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 30px; transition: filter 0.2s, transform 0.2s; } .reviews-link:hover { filter: brightness(1.1); transform: translateY(-2px); } .reviews-text { color: var(--text-light); font-size: 1.08rem; max-width: 580px; margin: 0 auto 28px; line-height: 1.7; } /* ABOUT / SHOWCASE */ .mobile-showcase { background: linear-gradient(180deg, #D81820 0%, #F5C800 100%); padding: 110px 60px; position: relative; overflow: hidden; } .mobile-showcase::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); } .mobile-showcase-container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; } .mobile-showcase-header { text-align: center; margin-bottom: 64px; } .mobile-showcase-badge { display: inline-flex; align-items: center; gap: 14px; background: #0A0A0A; border: 1px solid #0A0A0A; color: var(--gold); padding: 13px 30px; font-family: 'Chakra Petch', sans-serif; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 30px; border-radius: 30px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); } .mobile-showcase-badge svg { width: 22px; height: 22px; fill: currentColor; } .mobile-showcase-title { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: 4.2rem; color: #0A0A0A; line-height: 1; margin-bottom: 22px; letter-spacing: 0.02em; } .mobile-showcase .mobile-showcase-title, .mobile-showcase .section-title, .mobile-showcase .section-tag, .mobile-showcase .section-subtitle { color: #0A0A0A !important; } .mobile-showcase .section-tag::before { background: #0A0A0A; } .mobile-showcase-subtitle { font-size: 1.22rem; color: #1a1a1a; max-width: 760px; margin: 0 auto; line-height: 1.7; font-weight: 500; } .mobile-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 56px; } .mobile-feature { background: #0A0A0A; padding: 38px 28px; text-align: center; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.18); } .mobile-feature:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.3); } .mobile-feature::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gold); } .mobile-feature-icon { width: 60px; height: 60px; margin: 0 auto 20px; background: linear-gradient(135deg, #D81820, #A81218); display: flex; align-items: center; justify-content: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 20px rgba(216,24,32,0.45); } .mobile-feature-icon svg { width: 30px; height: 30px; fill: #0A0A0A; } .mobile-feature h4 { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; color: #FFFFFF; margin-bottom: 14px; letter-spacing: 0.02em; } .mobile-feature p { font-family: 'Sora', sans-serif; color: #CCCCCC; font-size: 1rem; line-height: 1.7; } .mobile-cities { background: #0A0A0A; padding: 38px 42px; text-align: center; border: 1px solid rgba(0,0,0,0.18); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.22); } .mobile-cities-label { font-family: 'Chakra Petch', sans-serif; color: var(--gold); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 20px; } .mobile-cities-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; } .mobile-cities-list a { font-family: 'Chakra Petch', sans-serif; color: #FFFFFF; font-size: 1.12rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.2s; } .mobile-cities-list a:hover { color: var(--gold); } .mobile-cities-list .divider { color: var(--gold); font-size: 0.6rem; } .mobile-cities-tagline { color: #CCCCCC; font-size: 1rem; margin-top: 20px; } /* WHY CHOOSE US */ .why-choose-section { padding: 130px 60px; position: relative; background: linear-gradient(180deg, var(--black) 0%, var(--black-light) 100%); overflow: hidden; } .why-choose-section::before { content: ''; position: absolute; top: 50%; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(216,24,32,0.08) 0%, transparent 70%); transform: translateY(-50%); pointer-events: none; } .why-choose-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .why-choose-content { padding-right: 40px; } .why-choose-tag { font-family: 'Chakra Petch', sans-serif; color: var(--cyan); font-size: 1rem; font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; margin-bottom: 22px; display: flex; align-items: center; gap: 18px; } .why-choose-tag::before { content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); } .why-choose-title { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: 3.6rem; line-height: 1; margin-bottom: 40px; color: var(--white); letter-spacing: 0.02em; } .why-choose-list { list-style: none; margin-bottom: 48px; } .why-choose-list li { margin-bottom: 28px; padding-left: 32px; position: relative; } .why-choose-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; background: linear-gradient(135deg, var(--cyan), var(--blue)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 10px rgba(216,24,32,0.5); } .why-choose-list li strong { display: block; font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .why-choose-list li span { color: var(--text-light); font-size: 1.05rem; line-height: 1.7; } .why-choose-cta { display: inline-flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #FFFFFF; padding: 20px 46px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; border: none; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: filter 0.2s, transform 0.2s, box-shadow 0.2s; text-decoration: none; } .why-choose-cta:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(216,24,32,0.4); } .why-choose-visual { position: relative; aspect-ratio: 4/3; border: 1px solid rgba(216,24,32,0.3); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 60px rgba(216,24,32,0.15); } .why-choose-visual img { width: 100%; height: 100%; object-fit: cover; display: block; } .why-choose-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(216,24,32,0.18) 0%, transparent 50%, rgba(229,194,0,0.18) 100%); mix-blend-mode: overlay; pointer-events: none; } /* SERVICE AREAS */ .locations-section { padding: 110px 60px; background: var(--black-light); position: relative; } .locations-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1200px; margin: 0 auto; } .location-tag { background: var(--black); border: 1px solid rgba(255,255,255,0.08); padding: 17px 32px; font-family: 'Chakra Petch', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--white); letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.3s; cursor: pointer; border-radius: 4px; text-decoration: none; } .location-tag:hover { border-color: var(--cyan); background: rgba(216,24,32,0.06); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(216,24,32,0.15); color: var(--cyan); } .location-tag.featured { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #FFFFFF; border-color: transparent; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; } .location-tag.featured:hover { filter: brightness(1.1); color: #FFFFFF; } .locations-cta { text-align: center; margin-top: 48px; } .locations-cta a { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 2px solid var(--cyan); color: var(--cyan); padding: 16px 40px; font-family: 'Chakra Petch', sans-serif; font-size: 0.98rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; border-radius: 30px; transition: all 0.25s; } .locations-cta a:hover { background: var(--cyan); color: #FFFFFF; } /* BLOG */ .blog-section { padding: 110px 60px; background: var(--black); } .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 1280px; margin: 0 auto; } .blog-card { display: flex; flex-direction: column; } .blog-card .blog-image { aspect-ratio: 16/10; min-height: 220px; } @media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; gap: 24px; } .blog-card .blog-image { min-height: 200px; aspect-ratio: 16/10; } } /* No staggered alternating layout — keep cards uniform in 2-col grid */ .blog-card { background: linear-gradient(160deg, var(--black-mid) 0%, var(--black-light) 100%); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 8px; } .blog-card:hover { transform: translateY(-6px); border-color: rgba(216,24,32,0.4); box-shadow: 0 12px 36px rgba(216,24,32,0.12); } .blog-image { aspect-ratio: 16/10; overflow: hidden; } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .blog-card:hover .blog-image img { transform: scale(1.06); } .blog-content { padding: 28px 26px; flex: 1; display: flex; flex-direction: column; } .blog-category { display: inline-block; background: rgba(216,24,32,0.08); border: 1px solid rgba(216,24,32,0.3); color: var(--cyan); padding: 5px 12px; font-family: 'Chakra Petch', sans-serif; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; border-radius: 3px; } .blog-content h4 { font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 700; margin-bottom: 14px; line-height: 1.4; color: var(--white); text-transform: none; letter-spacing: 0; } .blog-content h4 a { color: inherit; transition: color 0.2s; } .blog-content h4 a:hover { color: var(--cyan); } .blog-content p { color: var(--text-light); font-size: 0.98rem; line-height: 1.7; margin-bottom: 20px; } .blog-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); } .blog-read-more { font-family: 'Chakra Petch', sans-serif; color: var(--cyan); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.12em; } /* CTA */ .cta-section { padding: 140px 60px; background: linear-gradient(135deg, var(--cyan-dark) 0%, var(--blue-deep) 100%); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); } .cta-section > * { position: relative; z-index: 1; } .cta-section h2 { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: 4.2rem; color: var(--white); margin-bottom: 24px; letter-spacing: 0.02em; } .cta-section p { color: rgba(255,255,255,0.94); font-size: 1.3rem; margin-bottom: 48px; max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.6; } .cta-section-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--black); color: var(--cyan); padding: 24px 58px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; border: 1.5px solid rgba(216,24,32,0.5); transition: all 0.3s; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); text-decoration: none; } .cta-section-btn:hover { background: var(--cyan); color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(216,24,32,0.5); } /* FAQ */ .faq-section { padding: 120px 60px; background: linear-gradient(180deg, #D81820 0%, #F5C800 100%); position: relative; overflow: hidden; } .faq-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%); pointer-events: none; } .faq-section > * { position: relative; z-index: 1; } .faq-section .section-title, .faq-section .section-tag, .faq-section .section-subtitle { color: #0A0A0A !important; } .faq-section .section-tag::before { background: #0A0A0A !important; } .faq-section .section-subtitle { color: #1a1a1a !important; } .faq-container { max-width: 920px; margin: 0 auto; } .faq-item { border: 1px solid rgba(0,0,0,0.15); margin-bottom: 16px; background: #0A0A0A; border-radius: 8px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; box-shadow: 0 6px 18px rgba(0,0,0,0.18); } .faq-item:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.28); transform: translateY(-2px); } .faq-item.active { box-shadow: 0 10px 32px rgba(0,0,0,0.32); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 26px 30px; background: none; border: none; cursor: pointer; text-align: left; color: #FFFFFF; font-family: 'Chakra Petch', sans-serif; font-size: 1.18rem; font-weight: 600; transition: color 0.25s, padding-left 0.25s; gap: 22px; letter-spacing: 0.04em; } .faq-question:hover { color: var(--gold); padding-left: 36px; } .faq-question.active { color: var(--gold); padding-left: 36px; } .faq-toggle-btn { position: relative; width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: rgba(216,24,32,0.15); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .faq-question:hover .faq-toggle-btn { background: var(--gold); transform: scale(1.08); box-shadow: 0 0 16px rgba(216,24,32,0.5); } .faq-question.active .faq-toggle-btn { background: var(--gold); transform: rotate(180deg); box-shadow: 0 0 16px rgba(216,24,32,0.5); } .faq-toggle-btn::before, .faq-toggle-btn::after { content: ''; position: absolute; background: var(--gold); border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .faq-toggle-btn::before { width: 18px; height: 2.5px; } .faq-toggle-btn::after { width: 2.5px; height: 18px; } .faq-question:hover .faq-toggle-btn::before, .faq-question:hover .faq-toggle-btn::after { background: #0A0A0A; } .faq-question.active .faq-toggle-btn::before { background: #0A0A0A; } .faq-question.active .faq-toggle-btn::after { opacity: 0; transform: rotate(90deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-answer.active { max-height: 600px; } .faq-answer-content { padding: 0 32px 28px; color: #CCCCCC; font-family: 'Sora', sans-serif; font-size: 1.06rem; line-height: 1.78; } .faq-answer-content a { color: var(--gold); border-bottom: 1px solid rgba(216,24,32,0.4); } .faq-answer-content a:hover { border-bottom-color: var(--gold); } @media (max-width: 768px) { .faq-question { padding: 22px 22px; font-size: 1.06rem; gap: 14px; } .faq-question:hover, .faq-question.active { padding-left: 26px; } .faq-toggle-btn { width: 38px; height: 38px; min-width: 38px; } .faq-toggle-btn::before { width: 16px; } .faq-toggle-btn::after { height: 16px; } .faq-answer-content { padding: 0 24px 24px; font-size: 1rem; } } /* YOUTUBE */ .youtube-section { padding: 110px 60px; background: linear-gradient(135deg, #1F1F1F 0%, #2A2A2A 35%, #1A1A1A 65%, #2A1516 100%); position: relative; overflow: hidden; } .youtube-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(216,24,32,0.05) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(216,24,32,0.04) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(0,0,0,0.3) 0%, transparent 60%); pointer-events: none; z-index: 0; } .youtube-section::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(216,24,32,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(216,24,32,0.025) 1px, transparent 1px); background-size: 90px 90px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; z-index: 0; } .youtube-section > * { position: relative; z-index: 1; } .youtube-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .youtube-card { background: linear-gradient(160deg, var(--black-mid) 0%, var(--black-light) 100%); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; display: block; } .youtube-card:hover { transform: translateY(-6px); border-color: rgba(216,24,32,0.4); box-shadow: 0 16px 40px rgba(216,24,32,0.15); } .youtube-thumbnail { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--navy); } .youtube-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .youtube-card:hover .youtube-thumbnail img { transform: scale(1.06); } .youtube-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(255,0,0,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.5); transition: transform 0.3s, background 0.3s; } .youtube-card:hover .youtube-play { transform: translate(-50%, -50%) scale(1.12); background: #ff0000; } .youtube-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; } .youtube-info { padding: 22px 24px 26px; } .youtube-info h4 { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.3; letter-spacing: 0.02em; text-transform: none; } .youtube-info p { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; margin: 0; } .youtube-channel-btn { display: inline-flex; align-items: center; gap: 12px; background: #ff0000; color: #fff; padding: 18px 38px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 4px; text-decoration: none; transition: filter 0.2s, transform 0.2s, box-shadow 0.2s; } .youtube-channel-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,0,0,0.4); } .youtube-channel-btn svg { width: 22px; height: 22px; fill: currentColor; } @media (max-width: 1100px) { .youtube-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .youtube-section { padding: 70px 22px; } } /* GIFT CARD SECTION */ .giftcard-section { padding: 100px 60px; background: #FFFFFF; position: relative; overflow: hidden; } .giftcard-section::before { content: ''; position: absolute; top: -150px; right: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(216,24,32,0.15) 0%, transparent 70%); pointer-events: none; } .giftcard-section::after { content: ''; position: absolute; bottom: -150px; left: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(13,27,42,0.06) 0%, transparent 70%); pointer-events: none; } .giftcard-container { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; position: relative; z-index: 2; } .giftcard-image-wrap { position: relative; transform: rotate(-3deg); transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); } .giftcard-image-wrap:hover { transform: rotate(0deg) scale(1.02); } .giftcard-image-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #D81820 0%, transparent 60%); border-radius: 18px; transform: translate(15px, 15px); opacity: 0.35; z-index: 0; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); } .giftcard-image-wrap:hover::before { transform: translate(20px, 20px); } .giftcard-image-wrap img { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 30px 60px rgba(10,10,10,0.25), 0 10px 25px rgba(216,24,32,0.2); } .giftcard-badge { position: absolute; top: -22px; right: -22px; background: var(--black); color: var(--gold); width: 110px; height: 110px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: 'Bebas Neue', 'Sora', 'Segoe UI', system-ui, sans-serif; border: 3px solid var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 2; transform: rotate(8deg); animation: giftcardPulse 2.5s ease-in-out infinite; } @keyframes giftcardPulse { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.05); } } .giftcard-badge-top { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--white); line-height: 1; margin-bottom: 4px; font-weight: 700; } .giftcard-badge-mid { font-size: 1.7rem; line-height: 1; color: var(--gold); font-weight: 900; letter-spacing: 0.04em; } .giftcard-badge-bot { font-size: 0.65rem; letter-spacing: 0.15em; color: var(--white); line-height: 1; margin-top: 4px; font-weight: 700; } .giftcard-content { color: #0A0A0A; } .giftcard-tag { display: inline-flex; align-items: center; gap: 12px; color: #0A0A0A; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 20px; font-family: 'Chakra Petch', sans-serif; } .giftcard-tag::before { content: ''; width: 3px; height: 20px; background: var(--gold); } .giftcard-headline { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 3.4rem; line-height: 1.05; letter-spacing: 0.02em; color: #0A0A0A; margin: 0 0 20px; font-weight: 900; text-transform: uppercase; } .giftcard-headline span { background: linear-gradient(90deg, #C8900A 0%, #D81820 50%, #C8900A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } .giftcard-subhead { font-size: 1.05rem; line-height: 1.65; color: #444; margin-bottom: 30px; max-width: 520px; font-weight: 500; } .giftcard-features { list-style: none; padding: 0; margin: 0 0 36px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .giftcard-features li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 600; color: #1a1a1a; } .giftcard-features li svg { flex-shrink: 0; width: 22px; height: 22px; fill: var(--gold); background: var(--black); border-radius: 50%; padding: 4px; } .giftcard-cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .giftcard-cta-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--black); color: var(--gold); padding: 18px 38px; font-family: 'Chakra Petch', sans-serif; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; border: 2px solid var(--black); text-decoration: none; transition: all 0.25s ease; position: relative; overflow: hidden; } .giftcard-cta-btn::before { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform 0.3s ease; z-index: 0; } .giftcard-cta-btn span, .giftcard-cta-btn svg { position: relative; z-index: 1; transition: color 0.25s, fill 0.25s; } .giftcard-cta-btn:hover { color: #FFFFFF; } .giftcard-cta-btn:hover::before { transform: translateX(0); } .giftcard-cta-btn:hover svg { fill: var(--black); } .giftcard-cta-btn svg { fill: var(--gold); width: 18px; height: 18px; } .giftcard-amounts { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: #555; font-family: 'Chakra Petch', sans-serif; } .giftcard-amounts strong { color: #FFFFFF; font-weight: 800; letter-spacing: 0.05em; } @media (max-width: 960px) { .giftcard-section { padding: 70px 30px; } .giftcard-container { grid-template-columns: 1fr; gap: 50px; max-width: 560px; } .giftcard-image-wrap { transform: rotate(-2deg); max-width: 460px; margin: 0 auto; } .giftcard-headline { font-size: 2.6rem; } .giftcard-badge { width: 95px; height: 95px; top: -18px; right: -10px; } .giftcard-badge-mid { font-size: 1.5rem; } } @media (max-width: 600px) { .giftcard-section { padding: 60px 20px; } .giftcard-headline { font-size: 2.1rem; } .giftcard-subhead { font-size: 0.98rem; } .giftcard-features { grid-template-columns: 1fr; gap: 12px; } .giftcard-cta-btn { padding: 16px 28px; font-size: 0.82rem; width: 100%; justify-content: center; } .giftcard-cta-row { flex-direction: column; align-items: flex-start; gap: 18px; } .giftcard-badge { width: 80px; height: 80px; top: -14px; right: -6px; } .giftcard-badge-top, .giftcard-badge-bot { font-size: 0.55rem; } .giftcard-badge-mid { font-size: 1.25rem; } } /* AFFILIATE LINKS SECTION */ .ts-aff-section { padding: 64px 60px; background: var(--black); position: relative; border-top: 1px solid rgba(216,24,32,0.06); } .ts-aff-section .section-header { margin-bottom: 32px; } .ts-aff-container { max-width: 1100px; margin: 0 auto; } .ts-aff-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; } .ts-aff-banner { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 20px 24px; border-radius: 12px; border: 1px solid rgba(216,24,32,0.22); background: linear-gradient(150deg, rgba(216,24,32,0.07), rgba(13,27,42,0.55)); transition: border-color 0.25s, transform 0.25s; } .ts-aff-banner:hover { border-color: rgba(216,24,32,0.55); transform: translateY(-3px); } .ts-aff-banner h3 { font-family: 'Sora', sans-serif; font-weight: 900; font-size: 1.2rem; color: #FFFFFF; margin: 0 0 5px; line-height: 1.2; } .ts-aff-banner p { color: var(--text-light); font-size: 0.9rem; line-height: 1.5; margin: 0; } .ts-aff-banner .ts-aff-eyebrow { font-family: 'Chakra Petch', sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; } .ts-aff-banner-btn { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; background: var(--gold); color: #0A0A0A; padding: 11px 22px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-radius: 6px; transition: background 0.2s, transform 0.2s; } .ts-aff-banner-btn:hover { background: var(--gold-dark); transform: translateX(2px); } .ts-aff-banner-btn svg { width: 15px; height: 15px; fill: #0A0A0A; } .ts-aff-disclosure { text-align: center; color: #888; font-size: 0.8rem; font-style: italic; margin: 0 auto 22px; max-width: 720px; line-height: 1.5; } .ts-aff-accordion { display: flex; flex-direction: column; gap: 9px; } .ts-aff-cat { border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; background: var(--black-light); overflow: hidden; transition: border-color 0.25s; } .ts-aff-cat.open { border-color: rgba(216,24,32,0.4); } .ts-aff-cat-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 22px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: 'Sora', sans-serif; transition: background 0.2s; } .ts-aff-cat-head:hover { background: rgba(216,24,32,0.04); } .ts-aff-cat-emoji { font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .ts-aff-cat-title { flex: 1; font-size: 1.08rem; font-weight: 800; color: #FFFFFF; letter-spacing: 0.01em; } .ts-aff-cat-count { font-family: 'Chakra Petch', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); background: rgba(216,24,32,0.1); border: 1px solid rgba(216,24,32,0.25); padding: 4px 11px; border-radius: 20px; flex-shrink: 0; } .ts-aff-chevron { width: 22px; height: 22px; flex-shrink: 0; fill: var(--gold); transition: transform 0.3s; } .ts-aff-cat.open .ts-aff-chevron { transform: rotate(180deg); } .ts-aff-cat-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .ts-aff-cat.open .ts-aff-cat-body { max-height: 4000px; } .ts-aff-items { padding: 2px 22px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ts-aff-item { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; background: rgba(255,255,255,0.015); transition: border-color 0.2s, background 0.2s; } .ts-aff-item:hover { border-color: rgba(216,24,32,0.35); background: rgba(216,24,32,0.03); } .ts-aff-item-name { font-size: 0.94rem; font-weight: 700; color: #FFFFFF; line-height: 1.3; } .ts-aff-item-desc { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; flex: 1; } .ts-aff-item-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 2px; background: transparent; border: 1.5px solid rgba(216,24,32,0.5); color: var(--gold); padding: 9px 18px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 6px; transition: background 0.2s, color 0.2s, border-color 0.2s; } .ts-aff-item-btn:hover { background: var(--gold); color: #0A0A0A; border-color: var(--gold); } .ts-aff-item-btn svg { width: 13px; height: 13px; fill: currentColor; } .ts-aff-section .section-title { font-size: 2.6rem; margin-bottom: 16px; } .ts-aff-section .section-subtitle { font-size: 1.05rem; } @media (max-width: 900px) { .ts-aff-section { padding: 48px 28px; } .ts-aff-banners { grid-template-columns: 1fr; gap: 14px; } .ts-aff-items { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ts-aff-section { padding: 40px 18px; } .ts-aff-section .section-title { font-size: 2.1rem; } .ts-aff-cat-head { padding: 14px 16px; gap: 11px; } .ts-aff-cat-title { font-size: 0.98rem; } .ts-aff-items { padding: 2px 14px 16px; } } /* SERVICE AREA MAP */ @media (max-width: 1024px) { .map-grid { grid-template-columns: 1fr !important; } .map-section { padding: 70px 22px !important; } } /* SERVICE LOCATIONS BAR PILLS */ .service-loc-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(216,24,32,0.08); border: 1.5px solid rgba(216,24,32,0.4); color: var(--gold); padding: 13px 26px; font-family: 'Chakra Petch', sans-serif; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-radius: 30px; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; } .service-loc-pill:hover { background: var(--gold); color: #FFFFFF; border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(216,24,32,0.3); } /* RESPONSIVE */ @media (max-width: 1200px) { .mobile-features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .why-choose-container { grid-template-columns: 1fr; gap: 56px; } .why-choose-content { padding-right: 0; order: 2; } .why-choose-visual { order: 1; } .mobile-showcase-title { font-size: 3.2rem; } } @media (max-width: 1100px) { .mobile-features { grid-template-columns: 1fr; } } @media (max-width: 768px) { .section-title, .why-choose-title { font-size: 2.6rem; } .cta-section h2 { font-size: 2.6rem; } .mobile-showcase-title { font-size: 2.6rem; } .trust-bar { padding: 40px 22px; } .trust-bar-content { gap: 40px; } .trust-item .number { font-size: 2.4rem; } } @media (max-width: 480px) { .section-title { font-size: 2.1rem; } } html, body { overflow-x: hidden; max-width: 100vw; } a, button, input, select { -webkit-tap-highlight-color: rgba(216,24,32,0.15); } @media (max-width: 768px) { input, textarea, select { font-size: max(16px, 1rem); } } /* SCROLL REVEAL */ /* ============ SCROLL ENTRANCE ANIMATIONS ============ */ /* Generic baseline — visible by default if JS doesn't run */ .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .reveal-rise { opacity: 1; transform: none; filter: none; transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } /* Hide-state once JS marks them ready */ .reveal.animate-ready { opacity: 0; transform: translateY(50px); } .reveal-left.animate-ready { opacity: 0; transform: translateX(-60px); } .reveal-right.animate-ready { opacity: 0; transform: translateX(60px); } .reveal-scale.animate-ready { opacity: 0; transform: scale(0.92); } .reveal-blur.animate-ready { opacity: 0; filter: blur(14px); transform: translateY(20px); } .reveal-rise.animate-ready { opacity: 0; transform: translateY(80px) scale(0.97); } /* Visible state */ .reveal.animate-ready.visible, .reveal-left.animate-ready.visible, .reveal-right.animate-ready.visible, .reveal-scale.animate-ready.visible, .reveal-blur.animate-ready.visible, .reveal-rise.animate-ready.visible { opacity: 1; transform: none; filter: none; } /* Stagger children — when applied to a parent, its direct children animate in sequence */ .stagger.animate-ready > * { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .stagger.animate-ready.visible > * { opacity: 1; transform: none; } .stagger.animate-ready.visible > *:nth-child(1) { transition-delay: 0.0s; } .stagger.animate-ready.visible > *:nth-child(2) { transition-delay: 0.08s; } .stagger.animate-ready.visible > *:nth-child(3) { transition-delay: 0.16s; } .stagger.animate-ready.visible > *:nth-child(4) { transition-delay: 0.24s; } .stagger.animate-ready.visible > *:nth-child(5) { transition-delay: 0.32s; } .stagger.animate-ready.visible > *:nth-child(6) { transition-delay: 0.40s; } .stagger.animate-ready.visible > *:nth-child(7) { transition-delay: 0.48s; } .stagger.animate-ready.visible > *:nth-child(8) { transition-delay: 0.56s; } /* Honor reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .reveal-rise, .stagger > * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } } /* ===== BOOKING MODAL CSS ===== */ body.modal-open{overflow:hidden;} .bm-box{background:#fff;width:100%;max-width:540px;height:calc(100vh - 40px);max-height:calc(100vh - 40px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;animation:bBoxIn .3s cubic-bezier(.34,1.2,.64,1);position:relative;} @keyframes bBoxIn{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}} .bm-top-bar{height:5px;flex-shrink:0;background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-glow) 50%,var(--blue) 100%);} .bm-header{flex-shrink:0;padding:10px 16px 8px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid #f0f0f0;background:#fff;} .bm-header-left h3{font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:900;color:#0A0A0A;margin-bottom:1px;letter-spacing:-.2px;line-height:1.3;} .bm-header-left p{font-size:.82rem;color:#888;font-weight:600;margin-top:2px;} .bm-close{width:30px;height:30px;border-radius:50%;background:#f0f0f0;border:none;cursor:pointer;font-size:1.05rem;font-weight:700;color:#555;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s;} .bm-close:hover{background:#D81820;color:#000;} /* Scroll collapse removed — header always visible */ .bm-dots-row{flex-shrink:0;padding:6px 20px 0;background:#fff;} .bm-dots{display:flex;gap:6px;margin-bottom:4px;} .bm-dot{flex:1;height:5px;border-radius:3px;background:#e0e0e0;transition:background .3s,flex .3s;} .bm-dot.active{background:#D81820;} .bm-dot.done{background:#A81218;} .bm-svc-pill{flex-shrink:0;margin:7px 20px 0;padding:9px 14px;background:#F5F5F5;border:1.5px solid #D81820;border-radius:8px;display:flex;align-items:center;justify-content:space-between;font-size:.9rem;font-weight:800;color:#0A0A0A;} .bm-svc-pill span{font-size:.78rem;font-weight:600;color:#888;} .bm-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:14px 20px 8px;} .bm-footer{flex-shrink:0;padding:8px 20px 10px;padding-bottom:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid #eee;background:#fff;} .bm-footer-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:10px;width:100%;} .bm-footer .btn-continue{-webkit-flex:1;flex:1;min-width:0;padding:16px;border-radius:30px;font-size:1rem;} .bm-footer .btn-back{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:700;color:#888;letter-spacing:.05em;text-transform:uppercase;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:5px;padding:0;white-space:nowrap;-webkit-flex-shrink:0;flex-shrink:0;} .bm-body .form-group{margin-bottom:14px;} .bm-body .form-input,.bm-body .form-select{padding:14px 15px;font-size:1.05rem;} .bm-body .form-label{font-size:.85rem;margin-bottom:5px;} .bm-body .vtype-grid{gap:8px;} .bm-body .vtype-label{font-size:.9rem;} .bm-body .vtype-card{padding:16px 8px;} .bm-body .addon-card{padding:14px 14px;} .bm-body .addon-img{width:76px;height:64px;} .bm-body .addon-name{font-size:1.02rem;} .bm-body .addon-desc{font-size:.88rem;} .bm-body .pethair-card{padding:16px 10px;} .bm-body .pethair-label{font-size:1rem;} .bm-body .pethair-price{font-size:.88rem;} .bm-body .tier-card{margin-bottom:2px;} .bm-body .tier-img{width:100px;} .bm-body .tier-name{font-size:1rem;} .bm-body .tier-price{font-size:1.1rem;} .bm-body .tier-desc{font-size:.88rem;} .bm-body .svc-area-grid{gap:10px;} .bm-body .svc-area-img{height:80px;} .bm-body .svc-area-name{font-size:1rem;} .bm-body .svc-area-desc{font-size:.88rem;} .bm-body .specialty-img{width:76px;height:66px;} .bm-body .step-title{font-size:1.45rem;margin-bottom:8px;} .bm-body .step-sub{font-size:.95rem;margin-bottom:16px;} .bm-body .divider{margin:14px 0;} .bm-body .notice{font-size:.82rem;padding:10px 14px;} .bm-body .summary-card{font-size:.9rem;} .bm-body .sum-row{font-size:.92rem;} .bm-body .cal-day{min-height:44px;font-size:.9rem;} .bm-body .time-slot{font-size:.88rem;padding:11px 6px;} .bm-phone-wrap{margin-bottom:14px;} .bm-phone-wrap input{width:100%;padding:16px 18px;background:#f7f7f7;border:2px solid #ccc;border-radius:12px;color:#111;font-family:inherit;font-size:1.15rem;font-weight:700;letter-spacing:.5px;} .bm-phone-wrap input:focus{outline:none;border-color:#D81820;box-shadow:0 0 0 3px rgba(216,24,32,.2);} .bm-phone-wrap input::placeholder{color:#bbb;} .bm-disc{font-size:.7rem;color:#aaa;text-align:center;margin-top:4px;line-height:1.4;} @media(min-width:600px){ .bm-box{max-width:560px;} .bm-body{padding:16px 28px 8px;} .bm-header{padding:14px 28px 10px;} .bm-dots-row{padding:10px 28px 0;} .bm-svc-pill{margin:0 28px 0;} .bm-footer{padding:8px 28px 10px;padding-bottom:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));} .bm-body .vtype-grid{grid-template-columns:repeat(3,1fr);} .bm-body .time-slots{grid-template-columns:repeat(3,1fr);} } /* ===== BOOKING MODAL CORE POSITIONING ===== */ #bookingModal{ display:none;position:fixed;inset:0;z-index:10000; background:rgba(0,0,0,.72); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); align-items:center;justify-content:center; padding:20px 16px;overflow-y:auto; min-height:100vh;min-height:-webkit-fill-available; } #bookingModal.open{display:flex;animation:bModalIn .25s ease;} @keyframes bModalIn{from{opacity:0;}to{opacity:1;}} body.modal-open{overflow:hidden;} .bm-box{ background:#fff; width:100%; max-width:540px; height:min(720px, calc(100vh - 40px)); max-height:calc(100vh - 40px); display:flex; flex-direction:column; border-radius:20px; overflow:hidden; animation:bBoxIn .3s cubic-bezier(.34,1.2,.64,1); position:relative; box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(216,24,32,.2); } @keyframes bBoxIn{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}} .bm-top-bar{height:5px;flex-shrink:0;background:linear-gradient(90deg,var(--cyan),var(--blue));} @media(max-width:480px){ #bookingModal{padding:0!important;align-items:flex-start!important;justify-content:flex-start!important;overflow:hidden!important;} .bm-box{border-radius:0!important;height:100vh!important;height:-webkit-fill-available!important;max-height:100vh!important;max-height:-webkit-fill-available!important;max-width:100%!important;width:100%!important;animation:none!important;flex:1;} .bm-body{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;} .bm-footer{flex-shrink:0!important;padding-bottom:max(20px,env(safe-area-inset-bottom,20px))!important;} } /* Form, calendar, addon, summary shared styles */ #bookingModal{--gold:#D81820;--gold-light:#EF3B42;--gold-bg:#F5F5F5;--text:#0A0A0A;--text2:#1A1A1A;--text3:#444;--border:#cbd2d8;--border2:#7d8a96;--green:#16a34a;--green-bg:#f0fdf4;--red:#dc2626;--red-bg:#fef2f2;--radius:14px;--radius-sm:10px;--shadow:0 2px 8px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);--shadow-md:0 6px 24px rgba(0,0,0,.12);} .form-group{margin-bottom:16px;} .form-label{display:block;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text2);margin-bottom:7px;} .form-label em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text3);} .form-input,.form-select{width:100%;padding:15px 16px;background:#fff;border:2px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:1rem;font-weight:600;transition:border-color .2s,box-shadow .2s;} .form-input:focus,.form-select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,24,32,.18);} .form-input::placeholder{color:#999;font-weight:500;} .form-input.invalid{border-color:var(--red)!important;background:#fff8f8;} .pethair-grid.invalid .pethair-card:not(.selected){border-color:var(--red);} .form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%23444' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media(max-width:400px){.form-row{grid-template-columns:1fr;}} .pethair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:4px;} .pethair-card{background:#fff;border:2px solid var(--border);border-radius:var(--radius-sm);padding:13px 11px;cursor:pointer;transition:all .2s;text-align:center;position:relative;} .pethair-card:hover{border-color:var(--gold);} .pethair-card.selected{border-color:var(--gold);background:var(--gold-bg);} .pethair-card.selected::after{content:'✓';position:absolute;top:5px;right:7px;font-size:11px;font-weight:900;color:#0A0A0A;background:#D81820;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;} .pethair-label{font-size:1rem;font-weight:900;color:var(--text);} .pethair-price{font-size:.9rem;font-weight:900;color:#0A0A0A;margin-top:5px;} .vtype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;} @media(max-width:400px){.vtype-grid{grid-template-columns:repeat(2,1fr);}} .vtype-card{background:#fff;border:2.5px solid var(--border);border-radius:var(--radius-sm);padding:18px 10px;cursor:pointer;transition:all .2s;text-align:center;position:relative;} .vtype-card:hover{border-color:var(--gold);} .vtype-card.selected{border-color:var(--gold);background:var(--gold-bg);} .vtype-card.selected::after{content:'✓';position:absolute;top:5px;right:8px;font-size:11px;font-weight:900;color:#0A0A0A;background:#D81820;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;} .vtype-label{font-size:.95rem;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.3px;line-height:1.3;} .addon-list{display:flex;flex-direction:column;gap:14px;} .addon-card{background:#fff;border:2.5px solid var(--border);border-radius:var(--radius-sm);padding:15px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;} .addon-card:hover{border-color:var(--gold);} .addon-card.selected{border-color:var(--gold);background:var(--gold-bg);} .addon-img{width:82px;height:68px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#eee;} .addon-body{flex:1;} .addon-name{font-size:1.05rem;font-weight:900;color:var(--text);margin-bottom:5px;} .addon-desc{font-size:.9rem;color:var(--text2);line-height:1.45;font-weight:700;} .addon-right{text-align:right;flex-shrink:0;} .addon-price{font-size:1.15rem;font-weight:900;color:#0A0A0A;} .addon-mins{font-size:.82rem;color:var(--text3);margin-top:4px;font-weight:800;} .addon-select-btn{display:block;margin-top:8px;width:100%;padding:9px 0;background:#f0f0f0;border:none;border-radius:20px;font-family:inherit;font-size:.82rem;font-weight:900;color:#555;cursor:pointer;text-align:center;transition:background .1s,color .1s;text-transform:uppercase;letter-spacing:.05em;} .addon-card.selected .addon-select-btn{background:var(--gold);color:#000;} .addon-card:hover .addon-select-btn{background:#e8e8e8;} .upgrade-select-btn{display:block;margin-top:10px;width:100%;padding:11px 0;background:var(--gold);border:none;border-radius:20px;font-family:inherit;font-size:.88rem;font-weight:900;color:#000;cursor:pointer;text-align:center;text-transform:uppercase;letter-spacing:.06em;animation:upgradeGlow 2s ease-in-out infinite;} .upgrade-select-btn.selected{background:#16a34a;color:#fff;animation:none;} @keyframes upgradeGlow{0%,100%{box-shadow:0 0 0 0 rgba(216,24,32,.4);transform:scale(1);}50%{box-shadow:0 0 14px 4px rgba(216,24,32,.5);transform:scale(1.02);}} @keyframes confirmPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.01);box-shadow:0 0 0 5px rgba(220,38,38,.2);}} .upgrade-card{background:#fff;border:2.5px solid var(--gold);border-radius:var(--radius-sm);padding:15px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;position:relative;margin-top:8px;} .upgrade-card:hover{background:var(--gold-bg);box-shadow:0 0 0 1px var(--gold);} .upgrade-card.selected{background:var(--gold-bg);} .upgrade-card .addon-check{width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--gold-light);color:#000;font-size:11px;font-weight:900;align-items:center;justify-content:center;display:none;order:-1;flex-shrink:0;} .upgrade-card.selected .addon-check{display:flex;} .bm-body .upgrade-card{padding:12px 14px;margin-top:8px;} .addon-card.selected .addon-check{display:flex;} .summary-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:15px;} .summary-heading{font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--text2);margin-bottom:14px;} .sum-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:2px solid #e8e8e8;font-size:1rem;} .sum-row:last-of-type{border-bottom:none;} .sum-row .lbl{color:var(--text2);font-weight:700;} .sum-row .val{font-weight:900;color:var(--text);} .sum-total{display:flex;justify-content:space-between;align-items:center;border-top:2.5px solid var(--gold-light);padding-top:13px;margin-top:9px;} .sum-total .lbl{font-size:1rem;font-weight:900;} .sum-total .val{font-size:1.5rem;font-weight:900;color:#0A0A0A;} .sum-time{font-size:.88rem;color:var(--text2);text-align:right;margin-top:6px;font-weight:800;} .notice{background:var(--gold-bg);border:2px solid rgba(201,168,0,.4);border-left:6px solid var(--gold-light);border-radius:var(--radius-sm);padding:15px 17px;font-size:.95rem;color:var(--text2);line-height:1.6;margin-bottom:18px;font-weight:700;} .notice strong{color:var(--text);} .notice.warn{background:var(--red-bg);border-color:rgba(220,38,38,.25);border-left-color:var(--red);} .notice.info{background:#e8eeff;border:2px solid rgba(45,74,138,.3);border-left:6px solid #4f7adc;color:#152e70;} .divider{display:flex;align-items:center;gap:12px;margin:22px 0 16px;} .divider span{font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--text3);white-space:nowrap;} .divider::before,.divider::after{content:'';flex:1;height:2px;background:var(--border);} .btn-continue{flex:1;padding:17px 22px;background:var(--gold-light);border:none;border-radius:30px;color:#000;font-family:inherit;font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s;} .btn-continue:hover:not(:disabled){background:#7E0D12;transform:translateY(-1px);box-shadow:0 4px 14px rgba(216,24,32,.35);} .btn-continue.green-pulse{background:#16a34a;color:#fff;animation:ctaPulse 1.8s ease-in-out infinite;} .btn-continue.green-pulse:hover{background:#15803d;} @keyframes ctaPulse{0%,100%{transform:scale(1);box-shadow:0 4px 14px rgba(22,163,74,.3);}50%{transform:scale(1.025);box-shadow:0 6px 20px rgba(22,163,74,.5);}} @keyframes phoneBtnPulse{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}} .step-title{font-size:1.75rem;font-weight:900;color:var(--text);margin-bottom:10px;line-height:1.2;} .step-sub{font-size:1.05rem;color:var(--text2);margin-bottom:24px;font-weight:700;line-height:1.5;} .confirm-hero{text-align:center;padding:22px 0 18px;} .confirm-check{width:66px;height:66px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin:0 auto 14px;box-shadow:0 0 28px rgba(22,163,74,.25);} .confirm-title{font-size:1.6rem;font-weight:900;margin-bottom:8px;} .confirm-sub{font-size:.95rem;color:var(--text2);line-height:1.6;font-weight:600;} .appt-detail{display:flex;justify-content:space-between;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border);} .appt-detail:last-child{border-bottom:none;} .appt-lbl{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--text2);margin-bottom:4px;} .appt-val{font-size:1rem;font-weight:800;color:var(--text);} .cal-wrap{background:#fff;border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:4px;} .cal-header{background:#000;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;} .cal-month-label{font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:.5px;} .cal-nav{background:rgba(216,24,32,.15);border:1.5px solid rgba(216,24,32,.3);color:var(--gold-light);font-size:1rem;font-weight:900;width:34px;height:34px;border-radius:50%;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;} .cal-nav:hover:not(:disabled){background:var(--gold-light);color:#000;} .cal-nav:disabled{opacity:.3;cursor:not-allowed;} .cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);background:#f5f5f5;} .cal-grid-head span{text-align:center;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);padding:10px 4px;} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-top:1px solid var(--border);} .cal-day{background:#fff;min-height:52px;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;color:var(--text3);cursor:default;transition:all .15s;position:relative;} .cal-day.empty{background:#fafafa;} .cal-day.past{color:#ddd;} .cal-day.available{color:var(--text);cursor:pointer;font-weight:800;} .cal-day.available:hover{background:var(--gold-bg);color:#0A0A0A;} .cal-day.selected{background:var(--gold-light)!important;color:#000!important;font-weight:900;} .cal-day.today{font-weight:900;} .cal-day.today::after{content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold);} .cal-day.available.has-dot::before{content:'';position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--green);} .cal-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:24px;font-size:.95rem;color:var(--text2);font-weight:700;} .cal-spinner{width:18px;height:18px;border:2.5px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} .time-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;} @media(max-width:400px){.time-slots{grid-template-columns:repeat(2,1fr);}} .time-slot{background:#fff;border:2.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 8px;text-align:center;cursor:pointer;font-size:.95rem;font-weight:800;color:var(--text2);transition:all .2s;} .time-slot:hover{border-color:var(--gold);color:#0A0A0A;background:var(--gold-bg);} .time-slot.selected{background:var(--gold-light);border-color:var(--gold);color:#000;font-weight:900;} .time-slot.loading-slots{pointer-events:none;color:#ccc;} .tier-list{display:flex;flex-direction:column;gap:14px;} .tier-card{background:#fff;border:2.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s;overflow:hidden;position:relative;box-shadow:var(--shadow);} .tier-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md);} .tier-card.selected{border-color:var(--gold);} .tier-card.selected::after{content:'✓';position:absolute;top:12px;right:12px;width:26px;height:26px;background:var(--gold-light);border-radius:50%;font-size:13px;font-weight:900;color:#000;display:flex;align-items:center;justify-content:center;line-height:26px;z-index:2;} .tier-card-top{display:flex;align-items:stretch;} .tier-img{width:120px;object-fit:cover;flex-shrink:0;background:#eee;} .tier-info{padding:16px 44px 16px 16px;flex:1;} .tier-name{font-size:1.05rem;font-weight:900;color:var(--text);margin-bottom:5px;} .tier-price{font-size:1.2rem;font-weight:900;color:#0A0A0A;margin-bottom:8px;} .tier-desc{font-size:.9rem;color:var(--text2);line-height:1.5;font-weight:600;} .tier-feats{padding:12px 16px 16px;border-top:2px solid #eee;display:flex;flex-wrap:wrap;gap:7px;} .tf{font-size:.78rem;font-weight:800;color:var(--text2);background:#e8e8e8;border-radius:20px;padding:5px 12px;} .tf.gold{background:var(--gold-bg);color:#0A0A0A;border:1px solid #D81820;} .tier-popular{position:absolute;top:0;left:0;background:var(--gold-light);color:#000;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;padding:5px 12px;border-bottom-right-radius:8px;} .tier-section-title{font-size:.9rem;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:var(--text2);margin-bottom:12px;} .tier-section-sub{font-size:.88rem;color:var(--text2);font-weight:600;margin-bottom:14px;line-height:1.5;} .vehicle-tab{padding:7px 14px;border-radius:20px;border:2px solid var(--border);background:#fff;font-family:inherit;font-size:.78rem;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .2s;color:var(--text2);} .vehicle-tab.active{border-color:var(--gold);background:var(--gold-bg);color:var(--text);} .price-info-btn{width:16px;height:16px;border-radius:50%;border:1.5px solid #aaa;background:transparent;color:#888;font-size:.68rem;font-weight:700;cursor:pointer;flex-shrink:0;padding:0;font-family:sans-serif;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle;} .make-option{padding:11px 16px;font-size:.92rem;color:#111;cursor:pointer;transition:background .12s;border-bottom:1px solid #f0f0f0;} .make-option:last-child{border-bottom:none;} .make-option:hover{background:#F5F5F5;} .make-option-other{border-top:1px solid #e8e8e8;background:#fafafa;color:#555;} /* MOBILE SHOWCASE */ .mobile-feature::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gold); } /* SECTION COMMON */ /* SERVICES */ .service-bullets { list-style: none; padding: 0; margin: 0 0 25px 0; } .service-bullets li { color: var(--gold); font-size: 0.95rem; font-weight: 600; padding: 8px 0; display: flex; align-items: center; justify-content: center; gap: 10px; } .service-bullets li::before { content: '★'; font-size: 0.8rem; } /* REVIEWS */ .reviews-container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 2; } .trustindex-reviews-wrapper { max-width: 1400px; margin: 0 auto; } /* LOCATIONS */ /* WHY CHOOSE US */ /* YOUTUBE */ .youtube-card { background: var(--black); overflow: hidden; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.1); } .youtube-card:hover { transform: translateY(-10px); border-color: var(--gold); } .youtube-thumbnail { position: relative; aspect-ratio: 16/9; overflow: hidden; } .youtube-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .youtube-card:hover .youtube-thumbnail img { transform: scale(1.1); } .youtube-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .youtube-play svg { width: 28px; height: 28px; fill: var(--white); margin-left: 4px; } .youtube-info { padding: 25px; } .youtube-info h4 { font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600; text-transform: none; margin-bottom: 10px; color: var(--white); } .youtube-info p { color: var(--text-light); font-size: 0.85rem; } .youtube-channel-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: var(--white); padding: 16px 35px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 50px; transition: all 0.3s ease; border: none; cursor: pointer; font-family: 'Sora', sans-serif; } .youtube-channel-btn:hover { background: #CC0000; transform: translateY(-3px); } .youtube-channel-btn svg { width: 24px; height: 24px; fill: var(--white); } /* FAN SHOP */ .fanshop-container { max-width: 1400px; margin: 0 auto; width: 100%; } .fanshop-motto { text-align: center; margin-bottom: 20px; } .fanshop-view-all { display: inline-block; background: var(--gold); color: #FFFFFF; padding: 18px 50px; font-weight: 700; font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s ease; cursor: pointer; border: none; font-family: 'Sora', sans-serif; margin-top: 50px; } .woocommerce-products-wrapper { min-height: 320px; } .ts-shop-slider-wrap { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 30px; } .ts-slider-btn { position: absolute; top: 40%; transform: translateY(-50%); background: #D81820; color: #0A0A0A; border: none; width: 44px; height: 44px; font-size: 1.4rem; font-weight: 700; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } .ts-slider-btn:hover { background: #7E0D12; } .ts-slider-btn.prev { left: -22px; } .ts-slider-btn.next { right: -22px; } /* BLOG */ .blog-date { color: var(--gray); font-size: 0.8rem; } /* CTA */ /* FAQ */ /* CONTACT FORM */ .contact-form-container { max-width: 560px; margin: 0 auto; } .contact-form-header { text-align: center; margin-bottom: 22px; } .contact-form-header h3 { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 2.4rem; color: #0A0A0A; margin-bottom: 6px; line-height: 1.1; letter-spacing: 0.04em; } .contact-form-header p { color: #666666; font-size: 0.82rem; letter-spacing: 0.05em; } /* MODAL */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal-content { background: var(--white); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; position: relative; } .modal-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: #f5f5f5; border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #FFFFFF; z-index: 10; } .modal-close:hover { background: var(--gold); } .form-container { padding: 50px 40px; } .form-header { text-align: center; margin-bottom: 30px; } .form-header h3 { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 2.5rem; color: #FFFFFF; margin-bottom: 10px; } .form-header p { color: var(--gray); font-size: 0.95rem; } @keyframes dropIn { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* SCROLL ANIMATIONS */ .stagger > * { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; } .stagger.animate-ready > * { opacity: 0; transform: translateY(30px); } .stagger.animate-ready.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0s; } .stagger.animate-ready.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.1s; } .stagger.animate-ready.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.2s; } .stagger.animate-ready.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.3s; } .stagger.animate-ready.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.4s; } .stagger.animate-ready.visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:0.5s; } /* RESPONSIVE */ @media (max-width: 1200px) { .services-grid, .youtube-grid { grid-template-columns: repeat(2, 1fr); } .mobile-features { grid-template-columns: repeat(2, 1fr); } .mobile-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .mobile-gallery-item { grid-column: span 1 !important; height: 250px; } } @media (max-width: 1100px) { .youtube-grid { grid-template-columns: 1fr; } .mobile-features { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .why-choose-container { grid-template-columns: 1fr; gap: 50px; } .why-choose-content { padding-right: 0; order: 2; } .why-choose-video { order: 1; } .mobile-showcase-title { font-size: 3rem; } } @media (max-width: 480px) { .section-title { font-size: 2rem; } .mobile-showcase-title { font-size: 2rem; } } .inline-svc-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;} .inline-svc-card:hover,.inline-svc-card.selected{border-color:var(--gold);background:var(--gold-bg);} .inline-svc-card.selected::after{content:'✓';color:var(--gold);font-weight:900;font-size:.85rem;margin-left:auto;flex-shrink:0;} .inline-svc-card.invalid{border-color:#dc2626!important;background:#fff5f5!important;} .inline-svc-card.invalid .inline-svc-card-name{color:#dc2626;} .inline-svc-card-img{width:52px;height:44px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#eee;} .inline-svc-card-name{font-size:.88rem;font-weight:900;color:#0A0A0A;line-height:1.3;} .inline-svc-card-desc{font-size:.72rem;color:#777;font-weight:600;margin-top:2px;line-height:1.4;} .inline-svc-card-price{font-size:.85rem;font-weight:900;color:var(--gold);white-space:nowrap;margin-left:auto;flex-shrink:0;padding-left:8px;} /* Mobile Call CTA Bars */ @media (max-width: 767px) { } @media (max-width: 1024px) { footer > div > div:first-child { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { footer { padding: 60px 25px 40px !important; } footer > div > div:first-child { grid-template-columns: 1fr !important; gap: 40px !important; } } /* ===== MOBILE / PHONE — CENTER ALL CONTENT ===== */ @media (max-width: 768px) { .pp-hero, .pp-section, .section-header, .mobile-showcase-header, .why-choose-content, .reviews-placeholder, .cta-section, .footer-bottom, .mobile-cities { text-align: center !important; } .why-choose-content { padding-right: 0 !important; } .why-choose-list li { text-align: left; padding-left: 28px; max-width: 480px; margin-left: auto !important; margin-right: auto !important; } .why-choose-tag, .section-tag { justify-content: center !important; } .why-choose-tag::before { width: 24px !important; } .pp-section-divider { margin-left: auto !important; margin-right: auto !important; } .hero-wrapper { align-items: center !important; text-align: center !important; } .hero-eyebrow-text { padding-left: 0.3em !important; padding-right: 0.3em !important; } } /* ===== MOBILE PRICING CARDS — better description spacing ===== */ @media (max-width: 520px) { .pp-card-header { flex-direction: column; min-height: auto; } .pp-card-img { width: 100% !important; height: 180px; } .pp-card-info { padding: 18px 18px 14px !important; } .pp-card-name { font-size: 1.3rem !important; } .pp-card-price { font-size: 2.4rem !important; } .pp-card-desc { font-size: 1.02rem; line-height: 1.65; } .pp-card-divider { margin: 4px 18px; } } /* Reviews widget wrapper — frames the Trustindex output */ .reviews-widget-wrap { max-width: 1400px; margin: 0 auto 50px; padding: 30px 24px; background: rgba(216,24,32,0.025); border: 1px solid rgba(216,24,32,0.15); border-radius: 16px; position: relative; overflow: hidden; } .reviews-widget-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); } /* Soften default Trustindex card backgrounds so they sit well on dark theme */ .reviews-widget-wrap .ti-widget, .reviews-widget-wrap .ti-widget * { color: inherit; } /* Reviews CTA row below the widget */ .reviews-cta-row { max-width: 700px; margin: 0 auto; text-align: center; padding: 30px 24px; background: linear-gradient(160deg, var(--black-mid) 0%, var(--black-light) 100%); border: 1px solid rgba(216,24,32,0.2); border-radius: 12px; } .reviews-cta-text { color: var(--text-light); font-size: 1.08rem; margin: 0 0 18px; line-height: 1.6; } @media (max-width: 768px) { .reviews-widget-wrap { padding: 20px 14px; margin-bottom: 36px; } .reviews-cta-row { padding: 24px 18px; } } /* ===== BOOKING MODAL — visual hardening / scoped overrides ===== */ /* Make sure body's white text never bleeds into the modal */ #bookingModal { color: #1A1A1A; line-height: 1.5; } #bookingModal .bm-body { font-family: 'Sora', sans-serif; } /* Resolve duplicate step-title/step-sub rules — pin to readable sizes inside modal */ #bookingModal .step-title { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif !important; font-size: 1.4rem !important; font-weight: 900; color: #0A0A0A !important; margin-bottom: 6px !important; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; } #bookingModal .step-sub { font-family: 'Sora', sans-serif !important; font-size: 0.95rem !important; color: #555 !important; margin-bottom: 18px !important; font-weight: 500 !important; line-height: 1.55; letter-spacing: 0; text-transform: none; } /* Phone input — clean and prominent */ #bookingModal .bm-phone-wrap input { background: #F7FAFC !important; border: 2px solid #cbd2d8 !important; color: #0A0A0A !important; font-family: 'Sora', sans-serif !important; font-size: 1.2rem !important; font-weight: 700; letter-spacing: 0.04em; padding: 16px 18px; border-radius: 10px; } #bookingModal .bm-phone-wrap input:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px rgba(216,24,32,0.2) !important; background: #fff !important; } #bookingModal .bm-disc { color: #888; font-size: 0.78rem; text-align: center; margin-top: 10px; line-height: 1.5; } /* Form labels and inputs */ #bookingModal .form-label { font-family: 'Chakra Petch', sans-serif !important; font-size: 0.82rem !important; font-weight: 700 !important; color: #1A1A1A !important; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px !important; display: block; } #bookingModal .form-input, #bookingModal .form-select { background: #fff !important; border: 2px solid #cbd2d8 !important; color: #0A0A0A !important; font-family: 'Sora', sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; border-radius: 10px; padding: 14px 15px !important; } #bookingModal .form-input:focus, #bookingModal .form-select:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px rgba(216,24,32,0.2) !important; outline: none; } #bookingModal .form-input::placeholder { color: #aab2bc !important; font-weight: 400 !important; } #bookingModal .form-group { margin-bottom: 14px !important; } /* Divider with text inside */ #bookingModal .divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; } #bookingModal .divider::before, #bookingModal .divider::after { content: ''; flex: 1; height: 1px; background: rgba(216,24,32,0.35); } #bookingModal .divider span { font-family: 'Chakra Petch', sans-serif; font-size: 0.78rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; } /* Vehicle type cards — keep them light-themed inside the white modal */ #bookingModal .vtype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } @media (max-width: 420px) { #bookingModal .vtype-grid { grid-template-columns: repeat(2, 1fr); } } #bookingModal .vtype-card { background: #F7FAFC !important; border: 2px solid #cbd2d8 !important; border-radius: 10px; padding: 18px 8px !important; cursor: pointer; transition: all 0.2s; text-align: center; color: #0A0A0A !important; } #bookingModal .vtype-card:hover { border-color: var(--cyan) !important; background: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(216,24,32,0.15); } #bookingModal .vtype-card.selected { border-color: var(--cyan) !important; background: #F5F5F5 !important; box-shadow: 0 0 0 1px var(--cyan), 0 4px 12px rgba(216,24,32,0.18); } #bookingModal .vtype-label { font-family: 'Chakra Petch', sans-serif !important; font-size: 0.95rem !important; font-weight: 700 !important; color: #0A0A0A !important; letter-spacing: 0.04em; } /* Pet hair cards */ #bookingModal .pethair-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } #bookingModal .pethair-card { background: #F7FAFC !important; border: 2px solid #cbd2d8 !important; border-radius: 10px; padding: 14px 10px !important; cursor: pointer; transition: all 0.2s; text-align: center; color: #0A0A0A !important; } #bookingModal .pethair-card:hover { border-color: var(--cyan) !important; background: #fff !important; } #bookingModal .pethair-card.selected { border-color: var(--cyan) !important; background: #F5F5F5 !important; } #bookingModal .pethair-label { font-family: 'Chakra Petch', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; color: #0A0A0A !important; } #bookingModal .pethair-price { font-family: 'Sora', sans-serif !important; font-size: 0.85rem !important; font-weight: 700 !important; color: var(--cyan) !important; margin-top: 4px; } /* Header: title and subtitle */ #bookingModal .bm-header h3 { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif !important; font-size: 1.05rem !important; font-weight: 900 !important; color: #0A0A0A !important; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } #bookingModal .bm-header p { font-family: 'Sora', sans-serif !important; font-size: 0.82rem !important; color: #888 !important; font-weight: 500 !important; margin-top: 2px; text-transform: none; letter-spacing: 0; } /* Service pill at top */ #bookingModal .bm-svc-pill { background: linear-gradient(135deg, #F5F5F5 0%, #F7FAFC 100%) !important; border: 1.5px solid var(--cyan) !important; color: #0A0A0A !important; font-family: 'Sora', sans-serif !important; } #bookingModal .bm-svc-pill span { font-family: 'Chakra Petch', sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; color: #555 !important; text-transform: uppercase; letter-spacing: 0.14em; } #bookingModal .bm-svc-pill strong { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif !important; font-size: 0.92rem !important; font-weight: 900 !important; color: #0A0A0A !important; letter-spacing: 0.02em; } /* Continue button at footer */ #bookingModal .btn-continue { background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%) !important; color: #0A0A0A !important; font-family: 'Chakra Petch', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.16em; border: none; border-radius: 30px; padding: 16px 24px; cursor: pointer; transition: filter 0.25s, transform 0.25s, box-shadow 0.25s; box-shadow: 0 4px 16px rgba(216,24,32,0.3); } #bookingModal .btn-continue:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(216,24,32,0.4); } #bookingModal .btn-continue:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } /* Back button */ #bookingModal .btn-back { color: #888 !important; font-family: 'Chakra Petch', sans-serif !important; font-weight: 700 !important; font-size: 0.85rem !important; text-transform: uppercase; letter-spacing: 0.1em; } #bookingModal .btn-back:hover { color: var(--cyan) !important; } /* Active vehicle header (Vehicle 1, Vehicle 2 indicator) */ #bookingModal #activeVehicleFormHeader { background: linear-gradient(135deg, #0A1220 0%, #14243A 100%) !important; border: 1px solid rgba(216,24,32,0.25); } #bookingModal #activeVehicleNum { color: var(--cyan) !important; font-family: 'Sora', 'Segoe UI', system-ui, sans-serif !important; letter-spacing: 0.12em !important; } /* Add-on vehicle header card */ #bookingModal #addonVehicleHeader { background: linear-gradient(135deg, #0A1220 0%, #14243A 100%) !important; border: 1px solid rgba(216,24,32,0.25); } #bookingModal #addonVehicleCount { color: var(--cyan) !important; font-family: 'Chakra Petch', sans-serif !important; } #bookingModal #addonVehicleLabel { color: #fff !important; font-family: 'Sora', 'Segoe UI', system-ui, sans-serif !important; } /* Notice / warning blocks */ #bookingModal .notice { border-radius: 8px; padding: 12px 14px; font-size: 0.88rem; line-height: 1.5; } #bookingModal .notice.warn { background: #EAF6FB !important; border: 1px solid var(--cyan); color: #0A4D5C !important; } /* Close button — keep visible against white */ #bookingModal .bm-close { background: #f0f0f0; color: #555 !important; } #bookingModal .bm-close:hover { background: var(--cyan); color: #0A0A0A !important; } /* Service-pill price-info button */ #bookingModal .price-info-btn { background: var(--cyan) !important; color: #0A0A0A !important; border: none; border-radius: 50%; font-family: 'Sora', sans-serif !important; font-weight: 900 !important; font-size: 0.7rem !important; line-height: 1; cursor: pointer; } /* Step dots */ #bookingModal .bm-dot.active { background: var(--cyan) !important; } #bookingModal .bm-dot.done { background: var(--blue) !important; } /* Step body sections — completed vehicle list cards */ #bookingModal #completedVehiclesList > div { background: #F7FAFC !important; border: 1.5px solid #cbd2d8 !important; } /* Make sure the body resets line-height/letter-spacing inside form */ #bookingModal .bm-body * { letter-spacing: normal; } #bookingModal .bm-body .step-title, #bookingModal .bm-body .vtype-label, #bookingModal .bm-body .pethair-label, #bookingModal .bm-body .form-label, #bookingModal .bm-body .divider span { letter-spacing: 0.06em; } /* ===== BIZLAUNCH PROMO ===== */ .bizlaunch-promo { max-width: 1100px; margin: 0 auto 36px; padding: 28px 36px; background: linear-gradient(135deg, rgba(216,24,32,0.06) 0%, rgba(229,194,0,0.06) 100%); border: 1px solid rgba(216,24,32,0.22); border-radius: 14px; position: relative; overflow: hidden; } .bizlaunch-promo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent); } .bizlaunch-promo-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .bizlaunch-promo-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; } .bizlaunch-eyebrow { font-family: 'Chakra Petch', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--cyan); letter-spacing: 0.22em; text-transform: uppercase; } .bizlaunch-brand { font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; font-size: 1.35rem; font-weight: 900; color: #fff; letter-spacing: 0.04em; line-height: 1.1; margin-top: 2px; } .bizlaunch-tagline { font-family: 'Sora', sans-serif; font-size: 0.92rem; color: var(--text-light); line-height: 1.5; margin: 8px 0 0; font-weight: 400; } .bizlaunch-cta { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 14px 28px; background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%); color: #FFFFFF; font-family: 'Chakra Petch', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); -webkit-clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: filter 0.25s, transform 0.25s, box-shadow 0.25s; box-shadow: 0 6px 18px rgba(216,24,32,0.3); position: relative; overflow: hidden; flex-shrink: 0; } .bizlaunch-cta:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(216,24,32,0.45); } @media (max-width: 768px) { .bizlaunch-promo { padding: 24px 22px; margin: 0 auto 28px; } .bizlaunch-promo-inner { flex-direction: column; text-align: center; gap: 20px; } .bizlaunch-promo-text { align-items: center; } .bizlaunch-cta { width: 100%; max-width: 320px; } } /* ===== MODAL BODY MUST FILL SPACE ===== */ #bookingModal .bm-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #bookingModal .bm-step { min-height: 100%; } .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; z-index: 1; } .ps-consent { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; cursor: pointer; font-family: 'Sora', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; } .ps-consent input { width: auto; margin-top: 2px; accent-color: #D81820; transform: scale(1.1); flex-shrink: 0; } .ps-consent span { color: #9A8A8B; font-size: 0.68rem; line-height: 1.5; font-family: 'Sora', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; } .ps-consent a { color: #EF3B42; } .hero-top-shade { position: absolute; top: 0; left: 0; right: 0; height: 240px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(5,6,8,0.95) 0%, rgba(5,6,8,0.55) 45%, transparent 100%); } .hero-red-flash { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; } .hero-red-flash::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; background: linear-gradient(100deg, transparent 0%, rgba(216,24,32,0.22) 40%, rgba(239,59,66,0.42) 50%, rgba(216,24,32,0.22) 60%, transparent 100%); transform: translateX(-140%) skewX(-14deg); animation: psRedSweep 6.5s ease-in-out infinite; } @keyframes psRedSweep { 0% { transform: translateX(-140%) skewX(-14deg); opacity: 0; } 6% { opacity: 1; } 16% { transform: translateX(300%) skewX(-14deg); opacity: 0.9; } 17% { opacity: 0; } 100% { transform: translateX(300%) skewX(-14deg); opacity: 0; } } .hero-cta { animation: psCtaPulse 2.6s ease-in-out infinite; } @keyframes psCtaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(216,24,32,0.55); } 50% { box-shadow: 0 0 26px 6px rgba(216,24,32,0.35); } } @keyframes psExtrasIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } /* Failsafe: hero entrance must never leave the CTAs unclickable/invisible. If an animation is interrupted or never runs, force the end state. */ @keyframes psHeroSafety{to{opacity:1;transform:none}} .hero-eyebrow,.hero-logo,.hero-headline-line1,.hero-headline-line2, .hero-tagline,.hero-copy,.hero-cta-row{animation-fill-mode:both} .hero-cta-row{animation-duration:.5s} @media (prefers-reduced-motion:reduce){ .hero-eyebrow,.hero-logo,.hero-headline-line1,.hero-headline-line2, .hero-tagline,.hero-copy,.hero-cta-row{animation:none!important;opacity:1!important;transform:none!important} } /* ================= BADASS THEME UPGRADE — angled seams, steel + navy depth ================= */ :root { --seam: 56px; --steel-hi: #E8EAEE; --steel-mid: #C9CCD3; --navy-ink: #0F1A2E; } /* --- angled section seams (alternating direction) --- */ .ps-quote-section, #pricingPage, .reviews-section, .mobile-showcase, .locations-section, .why-choose-section, .cta-section, .faq-section, .site-footer, .trust-bar { position: relative; } .trust-bar { clip-path: polygon(0 var(--seam), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(40px + var(--seam)); z-index: 2; } #pricingPage { clip-path: polygon(0 0, 100% var(--seam), 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: var(--seam); z-index: 3; } .reviews-section { clip-path: polygon(0 var(--seam), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(110px + var(--seam)) !important; z-index: 4; } .mobile-showcase { clip-path: polygon(0 0, 100% var(--seam), 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(110px + var(--seam)) !important; z-index: 5; } .locations-section { clip-path: polygon(0 var(--seam), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(110px + var(--seam)) !important; z-index: 6; } .why-choose-section { clip-path: polygon(0 0, 100% var(--seam), 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(110px + var(--seam)) !important; z-index: 7; } .cta-section { clip-path: polygon(0 var(--seam), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(140px + var(--seam)) !important; z-index: 8; } .faq-section { clip-path: polygon(0 0, 100% var(--seam), 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(110px + var(--seam)) !important; z-index: 9; } .site-footer { clip-path: polygon(0 var(--seam), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--seam) * -1); padding-top: calc(100px + var(--seam)) !important; z-index: 11; } @media (max-width: 767px) { :root { --seam: 28px; } } /* --- section backgrounds: navy depth, diagonal texture, red glows --- */ .ps-quote-section { background: radial-gradient(900px 420px at 85% 0%, rgba(216,24,32,0.14), transparent 60%), repeating-linear-gradient(115deg, rgba(255,255,255,0.022) 0 2px, transparent 2px 16px), linear-gradient(180deg, #0D1322 0%, #070A12 100%); } .trust-bar { background: linear-gradient(160deg, var(--steel-hi) 0%, var(--steel-mid) 45%, #DFE2E7 100%) !important; border-top: none !important; border-bottom: none !important; } .trust-bar::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(15,26,46,0.045) 0 2px, transparent 2px 12px); pointer-events: none; } .trust-bar .number { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #D81820 !important; color: #D81820 !important; text-shadow: none; } .trust-bar .label { color: var(--navy-ink) !important; opacity: 0.85; } #pricingPage { background: radial-gradient(1100px 520px at 12% 0%, rgba(216,24,32,0.12), transparent 55%), repeating-linear-gradient(115deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 18px), linear-gradient(180deg, #0C111E 0%, #050608 40%, #0A0D16 100%); } .reviews-section { background: radial-gradient(800px 400px at 90% 8%, rgba(216,24,32,0.13), transparent 60%), repeating-linear-gradient(-115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 16px), linear-gradient(180deg, #0D1322 0%, #070A12 100%) !important; } .mobile-showcase { background: radial-gradient(1000px 500px at 8% 12%, rgba(216,24,32,0.1), transparent 55%), linear-gradient(180deg, #05070C 0%, #0B101C 100%) !important; } .locations-section { background: repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 16px), linear-gradient(180deg, #0D1322 0%, #070A12 100%) !important; } .why-choose-section { background: radial-gradient(900px 460px at 92% 10%, rgba(216,24,32,0.14), transparent 60%), linear-gradient(180deg, #05070C 0%, #0B101C 100%) !important; } .cta-section { background: radial-gradient(1000px 480px at 50% 20%, rgba(216,24,32,0.28), transparent 65%), repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px), linear-gradient(135deg, #1A0D0E 0%, #0C0708 100%) !important; } .faq-section { background: repeating-linear-gradient(-115deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 18px), linear-gradient(180deg, #0D1322 0%, #070A12 100%) !important; } .site-footer { background: radial-gradient(900px 400px at 50% 0%, rgba(216,24,32,0.1), transparent 60%), linear-gradient(180deg, #0B101C 0%, #050608 100%) !important; } /* --- angled parallelogram buttons (reference style) --- */ .hero-cta, .header-cta, .ps-q-submit, .pp-schedule-btn, .cta-section-btn, .why-choose-cta, .ps-pop-done, .mobile-call-cta-btn, .mobile-nav-cta, .reviews-link { clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); border-radius: 0 !important; } /* --- skewed accent labels --- */ .pp-row-label span, .section-tag, .why-choose-tag { transform: skewX(-14deg); display: inline-flex !important; padding: 6px 22px; border-left: 3px solid #D81820; border-right: 3px solid #D81820; background: linear-gradient(90deg, rgba(216,24,32,0.14), rgba(216,24,32,0.03)); } .pp-row-label span > *, .section-tag > * { transform: skewX(14deg); } /* --- card corner cuts + red top edge --- */ .pp-card { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); border-top: 2px solid rgba(216,24,32,0.55); border-radius: 0 !important; } .ps-q-panel { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); border-top: 2px solid #D81820; } .ps-pop { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); border-top: 2px solid #D81820; } /* --- why-choose visual: skewed red frame --- */ .why-choose-visual { position: relative; } .why-choose-visual::after { content: ''; position: absolute; inset: -14px 14px 14px -14px; border: 2px solid rgba(216,24,32,0.6); transform: skewY(-2deg); pointer-events: none; z-index: -1; } /* --- mobile add-on rows: price under the description --- */ .ps-addon-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px 14px; } @media (max-width: 640px) { .ps-addon-row { grid-template-columns: 64px 1fr; } .ps-addon-row .ps-addon-price { grid-column: 2; justify-self: start; font-size: 1.05rem; } } /* --- dark-theme contrast fixes for sections that were light in the template --- */ .mobile-showcase .mobile-showcase-title, .mobile-showcase .section-title, .mobile-showcase .section-subtitle, .mobile-showcase-subtitle { color: #FFFFFF !important; } .mobile-showcase-subtitle, .mobile-showcase .section-subtitle { color: #C9BFBF !important; } .mobile-showcase-badge { background: rgba(216,24,32,0.12) !important; border: 1px solid rgba(216,24,32,0.65) !important; color: #FFFFFF !important; } .mobile-showcase-badge svg { fill: #EF3B42 !important; } .mobile-showcase .mobile-feature h4 { color: #FFFFFF !important; } .mobile-showcase .mobile-feature p { color: #C9BFBF !important; } .mobile-showcase .mobile-cities-label, .mobile-showcase .mobile-cities-tagline { color: #EF3B42 !important; } .mobile-showcase .mobile-cities-list a { color: #FFFFFF !important; } .faq-section .section-title { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: none !important; } .faq-section .section-subtitle { color: #C9BFBF !important; } .faq-section .section-tag { color: #EF3B42 !important; } .ps-connect-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } @media (max-width: 640px) { .ps-connect-grid { grid-template-columns: 1fr; } } .ps-connect-card { display: flex; align-items: center; gap: 18px; background: linear-gradient(160deg, var(--black-mid) 0%, var(--black-light) 100%); border: 1px solid rgba(216,24,32,0.3); border-radius: 8px; padding: 26px 28px; text-decoration: none; transition: border-color .25s, transform .25s; } .ps-connect-card:hover { border-color: rgba(216,24,32,0.75); transform: translateY(-3px); } .ps-connect-card svg { width: 34px; height: 34px; fill: var(--cyan); flex-shrink: 0; } .ps-connect-name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; font-size: 1.05rem; } .ps-connect-sub { color: var(--gray); font-size: 0.85rem; margin-top: 3px; }