/* ───────────────────────────────────────────────────────────── Garage Door Rangers — styles.css Drop into your WordPress theme and enqueue via wp_enqueue_style. ───────────────────────────────────────────────────────────── */ /* Metric-adjusted local fallback minimizes FOUT layout shift before Barlow loads */ @font-face{ font-family: "Barlow Semi Condensed Fallback"; src: local("Arial Narrow"), local("Oswald"), local("Impact"); size-adjust: 92%; ascent-override: 90%; descent-override: 22%; } :root{ --gd-bg: #0a0a0a; --gd-bg-2: #141414; --gd-ink: #0a0a0a; --gd-ink-soft: #1f2024; --gd-paper: #ffffff; --gd-paper-2: #f6f6f4; --gd-line: #e7e6e1; --gd-mute: #6b6b6b; --gd-mute-2: #9a9a99; --gd-y: #ffc10a; --gd-y-2: #f5b301; --gd-y-deep: #c98a00; --gd-red: #e0322f; --gd-green: #1aa766; --gd-radius: 14px; --gd-radius-sm: 10px; --gd-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px -12px rgba(0,0,0,.18); --gd-shadow-y: 0 10px 30px -10px rgba(255,193,10,.55); --gd-display: "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", "Oswald", "Arial Narrow", system-ui, sans-serif; --gd-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Reset + base ───────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden } body{ overflow-x:hidden } .gdr-body{ /* scope class — add to to avoid colliding with theme */ margin:0; padding:0; font-family: var(--gd-body); color: var(--gd-ink); background: var(--gd-paper); font-size:16px; line-height:1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Resets use :where() so they have zero specificity and never override component classes */ :where(.gdr-body) img{ max-width:100%; display:block } :where(.gdr-body) button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; padding:0 } :where(.gdr-body) a{ color: inherit; text-decoration:none } :where(.gdr-body) h1, :where(.gdr-body) h2, :where(.gdr-body) h3, :where(.gdr-body) h4, :where(.gdr-body) p, :where(.gdr-body) ul, :where(.gdr-body) ol{ margin:0; padding:0 } /* Display utilities */ .gd-display{ font-family: var(--gd-display); font-weight: 900; letter-spacing:-.005em; line-height:.92; text-transform:uppercase; } .gd-eyebrow{ font-family: var(--gd-body); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--gd-y-deep); } .gd-eyebrow.on-dark{ color: var(--gd-y) } .gd-stars{ display:inline-flex; gap:2px; color: var(--gd-y); font-size:14px } .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } /* Container */ .gd-wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 20px } @media (min-width:900px){ .gd-wrap{ padding:0 40px } } /* Buttons */ .gd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 22px; border-radius:10px; font-weight:700; font-size:15px; letter-spacing:.01em; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space:nowrap; } .gd-btn--y{ background: var(--gd-y); color:#0a0a0a; box-shadow: var(--gd-shadow-y) } .gd-btn--y:hover{ background: var(--gd-y-2); transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(255,193,10,.5) } .gd-btn--y:active{ transform: translateY(0); box-shadow: var(--gd-shadow-y) } .gd-btn--dark{ background:#0a0a0a; color:#fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.25) } .gd-btn--dark:hover{ background:#1a1a1a; transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(0,0,0,.35) } .gd-btn--dark:active{ transform: translateY(0); box-shadow: 0 4px 12px -4px rgba(0,0,0,.25) } .gd-btn--ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.25) } .gd-btn--ghost:hover{ border-color: var(--gd-y); color: var(--gd-y); transform: translateY(-2px) } .gd-btn--ghost:active{ transform: translateY(0) } .gd-btn--block{ width:100% } .gd-btn--lg{ height:60px; font-size:16px } .gd-btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:#0a0a0a; color: var(--gd-y); margin-left:-8px; } .gd-btn--dark .gd-btn-icon{ background: var(--gd-y); color:#0a0a0a } .gd-btn--sm{ height:40px; padding:0 14px; font-size:13px; border-radius:8px } .gd-btn--outline{ background:transparent; color:#0a0a0a; border:1.5px solid var(--gd-line) } .gd-btn--outline:hover{ border-color:#0a0a0a; background:rgba(0,0,0,.03); transform: translateY(-2px) } .gd-btn--outline:active{ transform: translateY(0) } .gd-btn--outline.current{ background:var(--gd-y); border-color:var(--gd-y); box-shadow:var(--gd-shadow-y) } /* Section base */ .gd-sec{ position: relative; padding: 64px 0 } @media (min-width:900px){ .gd-sec{ padding: 96px 0 } } .gd-sec--dark{ background: var(--gd-bg); color:#fff } .gd-sec--paper{ background: var(--gd-paper-2) } .gd-sec-head{ max-width: 760px; margin-bottom: 36px } .gd-sec-head h2{ font-family: var(--gd-display); font-weight:900; font-size: clamp(34px, 5vw, 56px); line-height:.96; letter-spacing:-.01em; text-transform: uppercase; margin: 10px 0 14px; } .gd-sec-head p{ color: var(--gd-mute); margin:0; font-size:17px; max-width: 620px } .gd-sec--dark .gd-sec-head p{ color:#b8b8b6 } /* Reveal-on-scroll utility */ .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) } .reveal.in{ opacity:1; transform: translateY(0) } .reveal-d1{ transition-delay:.08s } .reveal-d2{ transition-delay:.16s } .reveal-d3{ transition-delay:.24s } .reveal-d4{ transition-delay:.32s } /* ───────────────────────────────────────────────────────────── Header ───────────────────────────────────────────────────────────── */ .gd-header{ position: sticky; top:0; z-index:50; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); transition: box-shadow .2s ease, background .2s ease; } .gd-header[data-scrolled]{ box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 20px -10px rgba(0,0,0,.15) } .gd-header__row{ display:flex; align-items:center; gap:20px; height:76px } .gd-header__logo{ flex:0 0 auto; display:flex; align-items:center; gap:10px; line-height:1 } .gd-logo-mark{ width:42px; height:42px; flex-shrink:0 } .gd-logo-txt{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; letter-spacing:-.005em; line-height:1.02; display:flex; flex-direction:column; gap:2px; color:#0a0a0a; font-size:16px } .gd-logo-txt > span{ display:block; line-height:1.02; white-space:nowrap } .gd-logo-txt .y{ color: var(--gd-y) } .gd-header__nav{ display:none; flex:1; justify-content:center; gap:28px } .gd-header__nav a{ font-weight:600; font-size:14px; color:#222; position:relative; padding:6px 0 } .gd-header__nav a:hover{ color: var(--gd-y-deep) } .gd-header__nav a::after{ content:''; position:absolute; left:50%; bottom:0; width:0; height:2px; background: var(--gd-y); transition: width .2s ease, left .2s ease } .gd-header__nav a:hover::after{ width:100%; left:0 } .gd-header__cta{ display:flex; align-items:center; gap:12px; margin-left:auto } .gd-header__phone{ display:none; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#0a0a0a } .gd-header__phone:hover{ color: var(--gd-y-deep) } .gd-header__phone-icon{ width:36px; height:36px; border-radius:50%; background: var(--gd-y); color:#0a0a0a; display:inline-flex; align-items:center; justify-content:center } .gd-header__phone-lbl{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--gd-mute); font-weight:700 } .gd-header__phone b{ font-size:15px; letter-spacing:-.01em } .gd-header__book{ display:none; height:44px; padding:0 18px; font-size:14px } .gd-header__menu{ width:44px; height:44px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#0a0a0a; color:#fff } .gd-mobile-cta{ display:flex; align-items:center; justify-content:center; gap:10px; background: var(--gd-y); color:#0a0a0a; font-weight:800; font-size:14px; letter-spacing:.04em; text-transform:uppercase; padding:14px; border-top:1px solid rgba(0,0,0,.08); position:sticky; top:76px; z-index:49 } .gd-mobile-cta:hover{ background: var(--gd-y-2) } @media (min-width:760px){ .gd-header__phone{ display:flex } .gd-mobile-cta{ display:none } } @media (min-width:1024px){ .gd-header__nav{ display:flex } .gd-header__book{ display:inline-flex } .gd-header__menu{ display:none } } /* Mobile menu sheet */ .gd-sheet{ position:fixed; inset:0; z-index:100; background: rgba(0,0,0,.5); opacity:0; pointer-events:none; transition: opacity .25s ease } .gd-sheet.is-open{ opacity:1; pointer-events:auto } .gd-sheet__panel{ position:absolute; right:0; top:0; bottom:0; width:86%; max-width:380px; background:#0a0a0a; color:#fff; display:flex; flex-direction:column; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); padding:22px 22px 28px; overflow-y:auto } .gd-sheet.is-open .gd-sheet__panel{ transform: translateX(0) } .gd-sheet__head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08) } .gd-sheet__logo{ display:block; max-width:160px } .gd-sheet__logo img, .gd-sheet__logo svg{ height:40px; width:auto } .gd-sheet__close{ width:44px; height:44px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.08); color:#fff; flex-shrink:0 } .gd-sheet__nav{ display:flex; flex-direction:column; padding:16px 0; gap:2px; flex:1; overflow-y:auto } .gd-sheet__nav > a{ display:flex; align-items:center; justify-content:space-between; padding:12px 4px; font-family: var(--gd-display); font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; border-bottom:1px solid rgba(255,255,255,.06); color:#fff } .gd-sheet__nav > a:hover{ color: var(--gd-y) } .gd-sheet__foot{ display:flex; flex-direction:column; gap:10px; padding-top:16px } /* Mobile dropdown (services) */ .gd-mobile-dropdown{ border-bottom:1px solid rgba(255,255,255,.06) } .gd-mobile-dropdown__trigger{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 4px; font-family: var(--gd-display); font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#fff; background:none; border:none; cursor:pointer; text-align:left } .gd-mobile-dropdown__trigger:hover{ color: var(--gd-y) } .gd-mobile-dropdown__trigger .gd-mobile-chev{ transition: transform .2s ease } .gd-mobile-dropdown.is-open .gd-mobile-dropdown__trigger .gd-mobile-chev{ transform: rotate(180deg) } .gd-mobile-dropdown__content{ display:none; padding:0 0 12px 0 } .gd-mobile-dropdown.is-open .gd-mobile-dropdown__content{ display:block } .gd-mobile-dropdown__group{ margin-bottom:12px } .gd-mobile-dropdown__label{ display:block; padding:8px 4px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--gd-y); opacity:.8 } .gd-mobile-dropdown__content a{ display:block; padding:8px 12px; font-size:14px; font-weight:500; color:rgba(255,255,255,.85); border-radius:6px } .gd-mobile-dropdown__content a:hover{ background:rgba(255,255,255,.06); color:#fff } .gd-mobile-dropdown__all{ margin-top:8px; padding:10px 12px !important; background:rgba(255,255,255,.04); display:flex !important; align-items:center; justify-content:space-between; font-weight:600 !important; color: var(--gd-y) !important } /* ───────────────────────────────────────────────────────────── Hero ───────────────────────────────────────────────────────────── */ .gd-hero{ background: var(--gd-paper); padding:28px 0 56px; position:relative; overflow:hidden } .gd-hero__inner{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; position:relative; z-index:2 } .gd-hero__copy{ order:1 } .gd-hero__visual{ order:2 } /* Hero with background image */ .gd-hero--bg{ background:#0a0a0a; color:#fff; padding:60px 0 80px; min-height:85vh; display:flex; align-items:center } .gd-hero--bg .gd-hero__inner{ align-items:center } .gd-hero__bg{ position:absolute; inset:0; z-index:0 } .gd-hero__bg-img{ width:100%; height:100%; object-fit:cover; object-position:center } .gd-hero__overlay{ position:absolute; inset:0; background:linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,0.5) 100%) } .gd-hero--bg .gd-hero__badge{ background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.15); backdrop-filter:blur(8px) } .gd-hero--bg .gd-hero__lede{ color:#b8b8b6; font-size:18px; max-width:620px } .gd-hero--bg .gd-hero__trust{ border-top-color:rgba(255,255,255,0.12) } .gd-hero--bg .gd-hero__trust-mute{ color:#9a9a99 } .gd-hero--bg .gd-hero__divider{ background:rgba(255,255,255,0.15) } .gd-hero--bg .gd-hero__trust-line{ color:#cfcfcc } .gd-hero--bg .gd-hero__trust-line svg{ color: var(--gd-y) } /* Floating cards container */ .gd-hero__floating-cards{ position:relative; display:flex; flex-direction:column; gap:16px; align-items:flex-end } .gd-hero__badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:#fff7df; color:#7a5a00; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; border:1px solid #fde8a3 } .gd-hero__pulse{ width:8px; height:8px; border-radius:50%; background: var(--gd-green); box-shadow:0 0 0 0 rgba(26,167,102,.6); animation: gdrPulse 1.8s ease-out infinite } @keyframes gdrPulse{ 0%{ box-shadow:0 0 0 0 rgba(26,167,102,.6) } 70%{ box-shadow:0 0 0 10px rgba(26,167,102,0) } 100%{ box-shadow:0 0 0 0 rgba(26,167,102,0) } } .gd-hero__title{ margin:16px 0 20px; font-size: clamp(36px, 8vw, 60px); line-height:1.05; font-family: var(--gd-display); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; } .gd-hero__title span{ display:block } .gd-hero__title-y{ color: var(--gd-y); margin-top:6px } .gd-hero__bullets{ list-style:none; padding:0; margin:20px 0 18px; display:flex; flex-wrap:wrap; gap:6px 18px; font-weight:700; font-size:14px } .gd-hero__bullets li{ display:flex; align-items:center; gap:8px } .gd-hero__bullets svg{ color: var(--gd-y-deep); background:#0a0a0a; padding:3px; width:22px; height:22px; border-radius:50% } .gd-hero__lede{ color: var(--gd-mute); font-size:16px; line-height:1.6; margin:0 0 28px; max-width:560px } .gd-hero__cta{ display:flex; flex-direction:column; gap:12px } .gd-hero__trust{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px; padding-top:24px; border-top:1px dashed var(--gd-line) } .gd-hero__stars{ display:flex; align-items:center; gap:8px; font-weight:700 } .gd-hero__trust-mute{ color: var(--gd-mute); font-weight:500 } .gd-hero__divider{ display:none; width:1px; height:22px; background: var(--gd-line) } .gd-hero__trust-line{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--gd-ink-soft); font-weight:600 } .gd-hero__trust-line svg{ color: var(--gd-y-deep) } .gd-hero__badges{ display:flex; flex-wrap:wrap; gap:20px 30px; margin-top:24px } .gd-hero__badge-item{ display:flex; align-items:center; gap:12px } .gd-hero__badge-icon{ width:32px; height:32px; object-fit:contain; flex-shrink:0 } .gd-hero__badge-text{ display:flex; flex-direction:column; gap:2px } .gd-hero__badge-text strong{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff } .gd-hero__badge-text span{ font-size:12px; color:#9a9a99 } .gd-hero__photo{ position:relative; border-radius:18px; overflow:hidden; box-shadow: var(--gd-shadow); aspect-ratio:4/3; background:#eee } .gd-hero__art{ width:100%; height:100%; display:block } .gd-hero__pricecard{ background:#fff; border-radius:14px; padding:14px 18px; box-shadow:0 20px 40px -15px rgba(0,0,0,.4); width:220px; backdrop-filter:blur(10px) } .gd-hero__pricecard-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px } .gd-hero__pricecard-row b{ font-family: var(--gd-display); font-size:32px; line-height:1; color:#0a0a0a } .gd-hero__pricecard-sub{ font-size:12px; color: var(--gd-mute); margin-top:4px; line-height:1.35 } .gd-hero__stamp{ width:100px; height:100px; border-radius:50%; background: var(--gd-y); display:flex; align-items:center; justify-content:center; transform: rotate(-8deg); box-shadow:0 20px 40px -15px rgba(0,0,0,.4) } .gd-hero__stamp-inner{ text-align:center; color:#0a0a0a } .gd-hero__stamp-inner .big{ font-family: var(--gd-display); font-weight:900; font-size:17px; letter-spacing:.02em; line-height:1 } .gd-hero__stamp-inner .sub{ font-size:10px; font-weight:700; letter-spacing:.14em; margin-top:4px; text-transform:uppercase } @media (min-width:760px){ .gd-hero__cta{ flex-direction:row } .gd-hero__divider{ display:block } .gd-hero__floating-cards{ flex-direction:row; gap:20px } } @media (min-width:1024px){ .gd-hero{ padding:56px 0 92px } .gd-hero--bg{ padding:80px 0 100px; min-height:90vh } .gd-hero__inner{ grid-template-columns:1.4fr 0.6fr; gap:60px } .gd-hero__photo{ aspect-ratio:5/4 } .gd-hero__stamp{ width:120px; height:120px } .gd-hero__stamp-inner .big{ font-size:20px } .gd-hero__stamp-inner .sub{ font-size:11px } .gd-hero__pricecard{ width:260px; padding:18px 22px } .gd-hero__pricecard-row b{ font-size:38px } .gd-hero__floating-cards{ position:absolute; right:0; top:50%; transform:translateY(-50%); flex-direction:column; gap:20px } } /* ───────────────────────────────────────────────────────────── Trust bar ───────────────────────────────────────────────────────────── */ .gd-trust{ background: var(--gd-bg); color:#fff; padding:26px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06) } .gd-trust__inner{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px } .gd-trust__item{ position:relative; padding-left:18px; border-left:2px solid var(--gd-y) } .gd-trust__head{ height:16px; margin-bottom:6px; color: var(--gd-y) } .gd-trust__big{ font-family: var(--gd-display); font-weight:900; font-size:30px; line-height:1; letter-spacing:-.01em } .gd-trust__unit{ font-size:14px; margin-left:4px; color: var(--gd-mute-2) } .gd-trust__sub{ color:#b8b8b6; font-size:12px; margin-top:4px } @media (min-width:760px){ .gd-trust__inner{ grid-template-columns: repeat(5,1fr) } .gd-trust__big{ font-size:34px } } @media (min-width:1024px){ .gd-trust{ padding:36px 0 } .gd-trust__big{ font-size:40px } } /* ───────────────────────────────────────────────────────────── Services ───────────────────────────────────────────────────────────── */ .gd-services__grid{ display:grid; grid-template-columns:1fr; gap:14px } @media (min-width:600px){ .gd-services__grid{ grid-template-columns: repeat(2,1fr) } } @media (min-width:1024px){ .gd-services__grid{ grid-template-columns: repeat(4,1fr); gap:18px } } .gd-service{ position:relative; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:16px; background:#fff; border:1px solid var(--gd-line); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; overflow:hidden } .gd-service::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background: var(--gd-y); transform: scaleX(0); transform-origin:left; transition: transform .3s ease } .gd-service:hover{ transform: translateY(-3px); box-shadow:0 24px 40px -22px rgba(0,0,0,.18); border-color:#ddd9cd } .gd-service:hover::after{ transform: scaleX(1) } .gd-service__icon{ width:56px; height:56px; border-radius:14px; background:#fff7df; color: var(--gd-y-deep); display:flex; align-items:center; justify-content:center; margin-bottom:6px; transition: background .2s ease, color .2s ease } .gd-service:hover .gd-service__icon{ background: var(--gd-y); color:#0a0a0a } .gd-service h3{ font-family: var(--gd-display); font-weight:800; text-transform:uppercase; font-size:22px; margin:0; letter-spacing:-.005em } .gd-service p{ margin:0; color: var(--gd-mute); font-size:14px; line-height:1.55 } .gd-service__link{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; font-weight:700; font-size:13px; color:#0a0a0a } .gd-service__link svg{ transition: transform .2s ease } .gd-service:hover .gd-service__link svg{ transform: translateX(4px) } .gd-service__tag{ position:absolute; right:14px; top:14px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; background:#0a0a0a; color: var(--gd-y); padding:5px 9px; border-radius:999px } /* ───────────────────────────────────────────────────────────── Why us ───────────────────────────────────────────────────────────── */ .gd-why__grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px } @media (min-width:900px){ .gd-why__grid{ grid-template-columns: repeat(4,1fr); gap:22px } } .gd-why__item{ position:relative; padding:24px 18px 22px; border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.07); text-align:center; overflow:hidden; transition: transform .2s ease, border-color .2s ease, background .2s ease } .gd-why__item:hover{ transform: translateY(-2px); border-color: rgba(255,193,10,.45); background: linear-gradient(180deg, rgba(255,193,10,.08), rgba(255,255,255,.02)) } .gd-why__icon{ width:64px; height:64px; border-radius:50%; background: rgba(255,193,10,.12); color: var(--gd-y); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; border:1px solid rgba(255,193,10,.25) } .gd-why__num{ position:absolute; right:14px; top:12px; font-family: var(--gd-display); font-weight:900; font-size:16px; color: rgba(255,255,255,.18) } .gd-why__item h3{ font-family: var(--gd-display); text-transform:uppercase; font-weight:800; font-size:18px; margin:0 0 8px; color:#fff } .gd-why__item p{ margin:0; color:#b8b8b6; font-size:13.5px; line-height:1.55 } @media (min-width:900px){ .gd-why__item{ padding:32px 22px 26px } .gd-why__item h3{ font-size:22px } } /* ───────────────────────────────────────────────────────────── Emergency ───────────────────────────────────────────────────────────── */ .gd-em{ background: var(--gd-y); color:#0a0a0a; position:relative; overflow:hidden; width:100%; margin:0 } .gd-em::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 20px, transparent 20px 40px); opacity:.4 } .gd-em .gd-wrap{ width:100%; max-width:100%; padding-left:20px; padding-right:20px; margin:0 auto } @media (min-width:1280px){ .gd-em .gd-wrap{ max-width:1240px } } .gd-em__inner{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; padding:44px 0; position:relative; z-index:1 } .gd-em__art{ display:none; position:relative; justify-content:center; align-items:center } .gd-em__siren{ width:140px; height:140px; border-radius:50%; background:#0a0a0a; color: var(--gd-y); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 8px rgba(0,0,0,.08), 0 28px 60px -20px rgba(0,0,0,.45); animation: gdrEmPulse 1.6s ease-in-out infinite } @keyframes gdrEmPulse{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.06) } } .gd-em__rays{ position:absolute; inset:-20px; border-radius:50%; background: conic-gradient(from 0deg, rgba(0,0,0,.18) 0 12deg, transparent 12deg 30deg); animation: gdrSpin 12s linear infinite; opacity:.45; z-index:-1 } @keyframes gdrSpin{ to{ transform: rotate(360deg) } } .gd-em__copy h2{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; font-size: clamp(30px, 4.5vw, 50px); margin:8px 0 12px; line-height:.98 } .gd-em__copy p{ font-size:16px; color:#1f2024; max-width:560px; margin:0 0 22px } .gd-em__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:16px } .gd-em__assurance{ display:flex; align-items:center; gap:10px; font-size:13px } .gd-em__assurance b{ display:block; font-weight:800 } .gd-em__assurance span{ color:#3a3a36; font-size:12px } .gd-em__pulse{ width:10px; height:10px; border-radius:50%; background:#0a0a0a; position:relative } .gd-em__pulse::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid #0a0a0a; opacity:.4; animation: gdrRing 1.6s ease-out infinite } @keyframes gdrRing{ 0%{ transform: scale(.6); opacity:.6 } 100%{ transform: scale(1.6); opacity:0 } } @media (min-width:760px){ .gd-em__cta{ flex-direction:row; align-items:center; gap:22px } } @media (min-width:1024px){ .gd-em__inner{ grid-template-columns: 220px 1fr; gap:48px; padding:64px 0 } .gd-em__art{ display:flex } } /* ───────────────────────────────────────────────────────────── Process ───────────────────────────────────────────────────────────── */ .gd-proc{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0 } .gd-proc__step{ display:grid; grid-template-columns:64px 1fr; gap:18px; padding:8px 0 } .gd-proc__rail{ display:flex; flex-direction:column; align-items:center } .gd-proc__dot{ width:48px; height:48px; border-radius:50%; background: var(--gd-y); color:#0a0a0a; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--gd-paper-2), 0 0 0 7px var(--gd-line); position:relative; z-index:1; flex-shrink:0 } .gd-proc__line{ flex:1; width:2px; background: var(--gd-line); margin:6px 0 -6px; min-height:40px } .gd-proc__n{ font-family: var(--gd-display); font-size:12px; letter-spacing:.12em; color: var(--gd-y-deep); font-weight:800; text-transform:uppercase } .gd-proc__body h3{ font-family: var(--gd-display); text-transform:uppercase; font-weight:800; font-size:24px; margin:2px 0 8px; letter-spacing:-.005em } .gd-proc__body p{ margin:0 0 18px; color: var(--gd-mute); font-size:15px; line-height:1.55 } .gd-proc__cta{ margin-top:28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap } .gd-proc__sub{ font-size:13px; color: var(--gd-mute) } @media (min-width:900px){ .gd-proc{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px } .gd-proc__step{ grid-template-columns:1fr; gap:14px; padding:0 } .gd-proc__rail{ flex-direction:row; width:100% } .gd-proc__line{ width:auto; height:2px; margin:0 0 0 6px; min-height:0; flex:1; align-self:center } .gd-proc__body h3{ font-size:22px } } /* ───────────────────────────────────────────────────────────── Reviews ───────────────────────────────────────────────────────────── */ .gd-rev{ background:#fff } .gd-rev__head{ display:grid; grid-template-columns:1fr; gap:16px; align-items:end; margin-bottom:32px } .gd-rev__title{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; font-size: clamp(34px, 5vw, 56px); line-height:.96; margin:8px 0 0 } .gd-rev__score{ background: var(--gd-paper-2); border-radius:14px; padding:14px 16px; border:1px solid var(--gd-line) } .gd-rev__score-top{ display:flex; align-items:center; gap:14px } .gd-rev__score-top b{ font-family: var(--gd-display); font-size:36px; line-height:1; font-weight:900 } .gd-rev__score-top .gd-stars{ display:flex; gap:1px; color: var(--gd-y) } .gd-rev__score-sub{ font-size:13px; color: var(--gd-mute); margin-top:6px } .gd-rev__viewport{ overflow:hidden; margin:0 -4px } .gd-rev__track{ display:flex; gap:16px; transition: transform .55s cubic-bezier(.2,.7,.2,1); padding:4px } .gd-rev__card{ flex:0 0 100%; background:#fff; border:1px solid var(--gd-line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:0 1px 0 rgba(0,0,0,.02), 0 16px 30px -22px rgba(0,0,0,.15) } .gd-rev__card-head{ display:flex; align-items:center; gap:12px } .gd-rev__card-head b{ display:block; font-weight:800; font-size:15px } .gd-rev__card-head .meta{ display:block; font-size:12px; color: var(--gd-mute) } .gd-rev__card-head .gd-stars{ margin-left:auto } .gd-rev__avatar{ width:44px; height:44px; border-radius:50%; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; letter-spacing:.04em } .gd-rev__card p{ margin:0; font-size:15.5px; line-height:1.6; color:#1f2024 } .gd-rev__card-foot{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--gd-mute); margin-top:auto; padding-top:8px; border-top:1px dashed var(--gd-line) } .gd-rev__controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px } .gd-rev__dots{ display:flex; gap:6px } .gd-rev__dot{ width:8px; height:8px; border-radius:50%; background:#d8d6cf; transition: background .2s ease, width .2s ease } .gd-rev__dot.is-on{ background:#0a0a0a; width:22px; border-radius:4px } .gd-rev__btns{ display:flex; gap:8px } .gd-rev__btn{ width:44px; height:44px; border-radius:50%; background:#0a0a0a; color:#fff; display:inline-flex; align-items:center; justify-content:center; transition: background .2s ease } .gd-rev__btn:hover{ background: var(--gd-y); color:#0a0a0a } .gd-rev__btn.prev svg{ transform: scaleX(-1) } @media (min-width:760px){ .gd-rev__head{ grid-template-columns:1fr auto; gap:32px } .gd-rev__card{ flex-basis: calc(50% - 8px) } } @media (min-width:1024px){ .gd-rev__card{ flex-basis: calc(33.333% - 11px); padding:26px } } /* Video Reviews */ .gd-video-reviews{ margin-top:48px } .gd-video-reviews__grid{ display:grid; grid-template-columns:1fr; gap:16px } .gd-video-reviews__item{ position:relative; display:block; border-radius:16px; overflow:hidden; aspect-ratio:9/16; background:#ffc10a } .gd-video-reviews__item img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease } .gd-video-reviews__item:hover img{ transform:scale(1.03) } .gd-video-reviews__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition: transform .2s ease } .gd-video-reviews__item:hover .gd-video-reviews__play{ transform:translate(-50%,-50%) scale(1.1) } .gd-video-reviews__cta{ text-align:center; margin-top:32px } @media (min-width:600px){ .gd-video-reviews__grid{ grid-template-columns:repeat(3,1fr); gap:20px } } @media (min-width:1024px){ .gd-video-reviews__grid{ gap:24px } .gd-video-reviews__item{ border-radius:20px } } /* ───────────────────────────────────────────────────────────── Service area ───────────────────────────────────────────────────────────── */ .gd-area{ background: var(--gd-bg); color:#fff; padding:64px 0 } .gd-area__inner{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center } .gd-area__copy h2{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; font-size: clamp(34px, 5vw, 56px); margin:8px 0 14px; line-height:.96 } .gd-area__copy p{ color:#b8b8b6; margin:0 0 22px; max-width:520px } .gd-area__cities{ list-style:none; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:8px 12px } .gd-area__cities li{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:13.5px; font-weight:600 } .gd-area__cities li svg{ color: var(--gd-mute-2) } .gd-area__cities li.is-primary{ background: rgba(255,193,10,.15); border-color: rgba(255,193,10,.4); color: var(--gd-y) } .gd-area__cities li.is-primary svg{ color: var(--gd-y) } .gd-area__note{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; background: rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16); font-size:13px; color:#d4d4d2; margin-bottom:20px } .gd-area__note svg{ color: var(--gd-y); flex-shrink:0 } .gd-area__map{ border-radius:18px; overflow:hidden; aspect-ratio:1/1; background:#0e1014; box-shadow: var(--gd-shadow) } .gd-area__map svg{ width:100%; height:100%; display:block } @media (min-width:600px){ .gd-area__cities{ grid-template-columns: repeat(3,1fr) } } @media (min-width:1024px){ .gd-area{ padding:96px 0 } .gd-area__inner{ grid-template-columns:1fr 1fr; gap:60px } .gd-area__cities{ grid-template-columns: repeat(2,1fr) } } /* ───────────────────────────────────────────────────────────── FAQ ───────────────────────────────────────────────────────────── */ .gd-faq{ background: var(--gd-paper-2) } .gd-faq__inner{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start } .gd-faq__head h2{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; font-size: clamp(32px, 4.8vw, 52px); line-height:.96; margin:8px 0 12px } .gd-faq__head p{ color: var(--gd-mute); margin:0 0 22px; max-width:360px } .gd-faq__avatars{ display:flex; align-items:center; gap:12px; padding:14px; background:#fff; border:1px solid var(--gd-line); border-radius:12px; width:fit-content } .gd-faq__av{ width:34px; height:34px; border-radius:50%; color:#fff; font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; border:2px solid #fff; margin-right:-10px } .gd-faq__av:nth-child(3){ margin-right:0 } .gd-faq__av-text{ margin-left:8px; font-size:13px; line-height:1.2 } .gd-faq__av-text b{ display:block; font-weight:800 } .gd-faq__av-text span{ color: var(--gd-mute) } .gd-faq__list{ display:flex; flex-direction:column; gap:10px } .gd-faq__item{ display:grid; grid-template-columns:1fr auto; gap:8px 16px; align-items:start; text-align:left; padding:18px 20px; background:#fff; border:1px solid var(--gd-line); border-radius:12px; transition: border-color .2s ease, box-shadow .2s ease; width:100% } .gd-faq__item:hover{ border-color:#d6d3c8 } .gd-faq__item.is-open{ border-color: var(--gd-y); box-shadow:0 18px 30px -22px rgba(255,193,10,.4) } .gd-faq__q{ font-family: var(--gd-display); font-weight:800; font-size:18px; line-height:1.2; text-transform:uppercase; letter-spacing:-.005em; color:#0a0a0a } .gd-faq__toggle{ width:32px; height:32px; border-radius:50%; background: var(--gd-paper-2); color:#0a0a0a; display:inline-flex; align-items:center; justify-content:center; transition: transform .25s ease, background .2s ease, color .2s ease } .gd-faq__item.is-open .gd-faq__toggle{ transform: rotate(45deg); background: var(--gd-y); color:#0a0a0a } .gd-faq__a-wrap{ grid-column:1 / -1; display:grid; grid-template-rows:0fr; transition: grid-template-rows .3s ease } .gd-faq__item.is-open .gd-faq__a-wrap{ grid-template-rows:1fr } .gd-faq__a{ overflow:hidden; color: var(--gd-mute); font-size:14.5px; line-height:1.6 } .gd-faq__item.is-open .gd-faq__a{ padding-top:12px } @media (min-width:900px){ .gd-faq__inner{ grid-template-columns:1fr 1.4fr; gap:56px } .gd-faq__q{ font-size:20px } } /* ───────────────────────────────────────────────────────────── Final CTA / form ───────────────────────────────────────────────────────────── */ .gd-cta{ background: var(--gd-bg); color:#fff; padding:64px 0; position:relative; overflow:hidden } .gd-cta::before{ content:''; position:absolute; right:-200px; top:-200px; width:600px; height:600px; border-radius:50%; background: radial-gradient(closest-side, rgba(255,193,10,.18), transparent 70%) } .gd-cta__inner{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; position:relative; z-index:1 } .gd-cta__copy h2{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; font-size: clamp(36px, 6vw, 64px); line-height:.96; margin:8px 0 14px } .gd-cta__copy p{ color:#b8b8b6; margin:0 0 22px; max-width:460px } .gd-cta__list{ list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:8px; font-size:14px } .gd-cta__list li{ display:flex; align-items:center; gap:10px } .gd-cta__list svg{ color:#0a0a0a; background: var(--gd-y); padding:3px; width:22px; height:22px; border-radius:50% } .gd-cta__call{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:14px; background: #0a0a0a; border:1px solid rgba(255,255,255,.07); width:fit-content } .gd-cta__call-lbl{ font-size:12px; color: var(--gd-mute-2); letter-spacing:.06em; text-transform:uppercase; font-weight:700 } .gd-cta__call a{ display:flex; align-items:center; gap:10px; color:#fff } .gd-cta__call a svg{ color: var(--gd-y) } .gd-cta__call a b{ font-family: var(--gd-display); font-size:26px; font-weight:900; letter-spacing:-.01em } .gd-cta__form-wrap{ position:relative } .gd-cta__form, .gd-cta__thanks{ background:#fff; color:#0a0a0a; border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) } .gd-cta__form-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px } .gd-cta__form-head h3{ font-family: var(--gd-display); font-weight:900; font-size:26px; margin:0; text-transform:uppercase } .gd-cta__form-head span{ font-size:12px; color: var(--gd-mute) } .gd-cta__form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#444 } .gd-cta__form label em{ font-style:normal; color: var(--gd-mute); font-weight:500 } .gd-cta__form input, .gd-cta__form select, .gd-cta__form textarea{ font:inherit; padding:12px 14px; border-radius:10px; border:1px solid var(--gd-line); background:#fff; color:#0a0a0a; font-weight:500; outline:none; transition: border-color .15s ease, box-shadow .15s ease } .gd-cta__form input:focus, .gd-cta__form select:focus, .gd-cta__form textarea:focus{ border-color: var(--gd-y); box-shadow:0 0 0 3px rgba(255,193,10,.25) } .gd-cta__chips{ display:flex; flex-wrap:wrap; gap:6px } .gd-cta__chip{ padding:8px 12px; border-radius:999px; background: var(--gd-paper-2); border:1px solid var(--gd-line); font-size:13px; font-weight:600; transition: all .15s ease } .gd-cta__chip.is-on{ background:#0a0a0a; color: var(--gd-y); border-color:#0a0a0a } .gd-cta__legal{ font-size:11px; color: var(--gd-mute); text-align:center; margin-top:4px } .gd-cta__thanks{ text-align:center; padding:36px 24px; display:none } .gd-cta__thanks.is-on{ display:flex } .gd-cta__form.is-hidden{ display:none } .gd-cta__check{ width:72px; height:72px; border-radius:50%; background: var(--gd-y); color:#0a0a0a; display:flex; align-items:center; justify-content:center; margin:0 auto 14px } .gd-cta__thanks h3{ font-family: var(--gd-display); font-size:32px; font-weight:900; text-transform:uppercase; margin:0 0 8px } .gd-cta__thanks p{ color: var(--gd-mute); margin:0 0 18px } .gd-cta__reset{ font-size:12px; color: var(--gd-mute); text-decoration:underline; margin-top:10px } @media (min-width:900px){ .gd-cta{ padding:96px 0 } .gd-cta__inner{ grid-template-columns:1fr 1fr; gap:56px } .gd-cta__form, .gd-cta__thanks{ padding:32px } } /* Form validation & loading states */ .gd-cta__form input.is-error, .gd-cta__form select.is-error, .gd-cta__form textarea.is-error{ border-color:#dc3545; background:#fff5f5 } .gd-cta__form input.is-error:focus, .gd-cta__form select.is-error:focus, .gd-cta__form textarea.is-error:focus{ box-shadow:0 0 0 3px rgba(220,53,69,.25) } .gd-field-error{ color:#dc3545; font-size:12px; font-weight:500; margin-top:4px } .gd-form-error{ background:#dc3545; color:#fff; padding:12px 16px; border-radius:10px; font-size:13px; font-weight:600; text-align:center } .gd-btn.is-loading{ opacity:.8; pointer-events:none } .gd-spinner{ display:inline-block; width:16px; height:16px; border:2px solid rgba(0,0,0,.2); border-top-color:#0a0a0a; border-radius:50%; animation:gd-spin .6s linear infinite; margin-right:8px; vertical-align:middle } @keyframes gd-spin{ to{ transform:rotate(360deg) } } .gd-honeypot{ position:absolute; left:-9999px; opacity:0; pointer-events:none; height:0; overflow:hidden } /* ───────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────── */ .gd-foot{ background:#050505; color:#cfcfcc; padding:56px 0 24px } .gd-foot__top{ display:grid; grid-template-columns:1fr; gap:36px } .gd-foot__brand .gd-logo-txt{ color:#fff } .gd-foot__brand p{ color:#8e8e8b; font-size:14px; line-height:1.6; max-width:360px; margin:14px 0 18px } .gd-foot__call{ display:flex; flex-direction:column; gap:6px } .gd-foot__call a{ display:inline-flex; align-items:center; gap:10px; color: var(--gd-y); font-family: var(--gd-display); font-size:24px; font-weight:900; letter-spacing:-.01em } .gd-foot__cols{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px } .gd-foot__cols h4{ font-family: var(--gd-display); text-transform:uppercase; font-weight:800; font-size:14px; letter-spacing:.04em; color:#fff; margin:0 0 12px } .gd-foot__cols ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px } .gd-foot__cols a{ color:#9e9e9b; font-size:13.5px; font-weight:500; transition: color .15s ease } .gd-foot__cols a:hover{ color: var(--gd-y) } .gd-foot__bottom{ display:flex; flex-direction:column; gap:10px; padding-top:28px; margin-top:36px; border-top:1px solid rgba(255,255,255,.06); font-size:12px; color:#7a7a78 } .gd-foot__legal{ display:flex; gap:16px; flex-wrap:wrap; list-style:none; padding:0; margin:0 } .gd-foot__legal li{ list-style:none; margin:0; padding:0 } .gd-foot__legal a:hover{ color: var(--gd-y) } @media (min-width:760px){ .gd-foot__cols{ grid-template-columns: repeat(3,1fr) } .gd-foot__bottom{ flex-direction:row; align-items:center; justify-content:space-between } } @media (min-width:1024px){ .gd-foot__top{ grid-template-columns:1.2fr 2fr; gap:56px } } /* ───────────────────────────────────────────────────────────── INNER PAGE — shared chrome (hero, breadcrumb, prose, cards) ───────────────────────────────────────────────────────────── */ /* Compact page hero used by every non-homepage */ .gd-page-hero{ background: var(--gd-bg); color:#fff; padding: 56px 0 72px; position:relative; overflow:hidden } .gd-page-hero::before{ content:''; position:absolute; right:-180px; top:-180px; width:540px; height:540px; border-radius:50%; background: radial-gradient(closest-side, rgba(255,193,10,.16), transparent 70%); pointer-events:none } .gd-page-hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height: 60px; background: linear-gradient(180deg, transparent, var(--gd-paper)); display:none } .gd-page-hero__inner{ position:relative; z-index:1; max-width: 880px } .gd-page-hero h1{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1.04; font-size: clamp(36px, 6vw, 72px); margin: 14px 0 16px; text-wrap: balance } .gd-page-hero h1 .y{ color: var(--gd-y) } .gd-page-hero p{ color:#b8b8b6; font-size: 17px; max-width: 620px; margin: 0 0 24px } .gd-page-hero__cta{ display:flex; flex-wrap:wrap; gap: 10px } @media (min-width: 900px){ .gd-page-hero{ padding: 80px 0 100px } } /* Breadcrumb */ .gd-crumb{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--gd-mute-2); font-weight:700 } .gd-crumb a{ color: var(--gd-mute-2); transition: color .15s } .gd-crumb a:hover{ color: var(--gd-y) } .gd-crumb svg{ opacity:.5 } .gd-crumb .now{ color: var(--gd-y) } /* Reusable lined section header */ .gd-block-head{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 28px } .gd-block-head h2{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; line-height:.98; letter-spacing:-.005em; font-size: clamp(28px, 3.4vw, 40px); margin: 4px 0 0 } .gd-block-head p{ color: var(--gd-mute); max-width:600px; margin:0 } .gd-sec--dark .gd-block-head p{ color:#b8b8b6 } /* Long-form prose (blog post body) */ .gd-prose{ width: 100%; color: #1f2024; font-size: 17px; line-height: 1.7 } .gd-prose > * + *{ margin-top: 1.1em } .gd-prose h2{ font-family: var(--gd-display); font-weight:900; text-transform:uppercase; font-size: 30px; line-height: 1.1; letter-spacing: -.005em; margin-top: 2.2em } .gd-prose h3{ font-family: var(--gd-display); font-weight:800; text-transform:uppercase; font-size: 22px; line-height: 1.15; margin-top: 1.8em } .gd-prose p{ color: #2b2c30 } .gd-prose a{ color: var(--gd-y-deep); border-bottom: 1px solid currentColor; transition: color .15s } .gd-prose a:hover{ color: #0a0a0a } .gd-prose ul, .gd-prose ol{ padding-left: 22px; } .gd-prose ul li, .gd-prose ol li{ margin: .5em 0 } .gd-prose ul li::marker{ color: var(--gd-y-deep) } .gd-prose blockquote{ position: relative; margin: 1.6em 0; padding: 18px 22px; background: var(--gd-paper-2); border-left: 4px solid var(--gd-y); border-radius: 0 12px 12px 0; font-family: var(--gd-display); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1.2; color: #0a0a0a } .gd-prose hr{ border: 0; border-top: 1px dashed var(--gd-line); margin: 2em 0 } .gd-prose figure{ margin: 1.6em 0 } .gd-prose figure img{ width:100%; border-radius: 14px } .gd-prose figcaption{ margin-top: 8px; font-size: 13px; color: var(--gd-mute); text-align:center } .gd-prose code{ background: var(--gd-paper-2); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", monospace; font-size: .9em } /* "Key facts" callout box used on service detail blocks */ .gd-facts{ display:grid; grid-template-columns:1fr 1fr; gap: 12px; padding: 18px; background: var(--gd-paper-2); border: 1px solid var(--gd-line); border-radius: 14px; margin-top: 18px } .gd-facts__item{ display:flex; flex-direction:column; gap: 2px } .gd-facts__item .lbl{ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-mute); font-weight: 700 } .gd-facts__item .val{ font-family: var(--gd-display); font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.1; color: #0a0a0a } @media (min-width: 760px){ .gd-facts{ grid-template-columns: repeat(4, 1fr) } } /* Generic 2-up layout used on service/about/contact pages */ .gd-split{ display:grid; grid-template-columns:1fr; gap: 32px; align-items: start } @media (min-width: 900px){ .gd-split{ grid-template-columns: 1fr 1fr; gap: 48px } .gd-split--narrow{ grid-template-columns: 1fr 1fr } .gd-split--wide{ grid-template-columns: 1fr 1.2fr } } /* Service detail block (used on services page) */ .gd-detail{ display:grid; grid-template-columns: 1fr; gap: 24px; padding: 36px 0; border-top: 1px solid var(--gd-line) } .gd-detail:first-child{ border-top: 0; padding-top: 0 } .gd-detail__num{ font-family: var(--gd-display); font-weight: 900; font-size: clamp(80px, 14vw, 160px); line-height: 1; color: var(--gd-paper-2); -webkit-text-stroke: 1px var(--gd-line); letter-spacing: -.02em; pointer-events:none; user-select:none } .gd-detail__body h3{ font-family: var(--gd-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3.8vw, 44px); line-height: 1; letter-spacing: -.01em; margin: -8px 0 12px } .gd-detail__body p{ color: var(--gd-mute); margin: 0 0 16px; font-size: 16px; line-height: 1.6 } .gd-detail__body ul{ list-style:none; padding:0; margin: 8px 0 18px; display: grid; grid-template-columns: 1fr; gap: 8px } .gd-detail__body ul li{ display:flex; gap: 8px; font-size: 14.5px; align-items:flex-start } .gd-detail__body ul li svg{ color: var(--gd-y-deep); flex-shrink: 0; margin-top: 2px } @media (min-width: 760px){ .gd-detail{ grid-template-columns: 200px 1fr; gap: 32px } .gd-detail__body ul{ grid-template-columns: 1fr 1fr } } /* Stat row */ .gd-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px } @media (min-width: 760px){ .gd-stats{ grid-template-columns: repeat(4, 1fr) } } .gd-stats__cell{ padding: 22px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); text-align: left } .gd-sec:not(.gd-sec--dark) .gd-stats__cell{ background: #fff; border-color: var(--gd-line) } .gd-stats__cell .big{ font-family: var(--gd-display); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--gd-y) } .gd-stats__cell .sub{ color: #b8b8b6; font-size: 13px; margin-top: 6px } .gd-sec:not(.gd-sec--dark) .gd-stats__cell .big{ color: #0a0a0a } .gd-sec:not(.gd-sec--dark) .gd-stats__cell .sub{ color: var(--gd-mute) } /* Timeline (about page) */ .gd-time{ position: relative; list-style:none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 0 } .gd-time__row{ display:grid; grid-template-columns: 100px 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid var(--gd-line) } .gd-time__row:first-child{ border-top: 0 } .gd-time__year{ font-family: var(--gd-display); font-weight: 900; font-size: 38px; line-height: 1; color: var(--gd-y-deep); letter-spacing: -.01em } .gd-time__body h4{ font-family: var(--gd-display); font-weight: 800; text-transform: uppercase; font-size: 22px; margin: 0 0 6px; letter-spacing: -.005em } .gd-time__body p{ color: var(--gd-mute); font-size: 15px; margin: 0; line-height: 1.55 } /* Blog post cards */ .gd-posts{ display:grid; grid-template-columns: 1fr; gap: 18px } @media (min-width: 760px){ .gd-posts{ grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1024px){ .gd-posts{ grid-template-columns: repeat(3, 1fr); gap: 22px } } .gd-post{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--gd-line); border-radius: 16px; overflow:hidden; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease } .gd-post:hover{ transform: translateY(-3px); box-shadow: 0 24px 40px -22px rgba(0,0,0,.18); border-color: #ddd9cd } .gd-post__cover{ aspect-ratio: 16/10; background: var(--gd-paper-2); position: relative; overflow: hidden } .gd-post__cover svg, .gd-post__cover img{ width:100%; height:100%; display:block; object-fit:cover } .gd-post__tag{ position: absolute; top: 14px; left: 14px; background: var(--gd-y); color: #0a0a0a; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; padding: 6px 10px; border-radius: 999px } .gd-post__body{ padding: 22px; display:flex; flex-direction:column; gap: 10px; flex: 1 } .gd-post__meta{ font-size: 12px; color: var(--gd-mute); letter-spacing: .04em; text-transform: uppercase; font-weight: 600 } .gd-post__title{ font-family: var(--gd-display); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.1; letter-spacing: -.005em; color: #0a0a0a; margin: 0 } .gd-post__excerpt{ color: var(--gd-mute); font-size: 14.5px; line-height: 1.55; margin: 0 } .gd-post__more{ display:inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 13px; color: #0a0a0a } .gd-post__more svg{ transition: transform .2s ease } .gd-post:hover .gd-post__more svg{ transform: translateX(4px) } /* Featured post (blog index) */ .gd-feat{ display:grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; margin-bottom: 36px; background: #fff; border:1px solid var(--gd-line); border-radius: 18px; overflow: hidden } .gd-feat__cover{ aspect-ratio: 16/10; background: var(--gd-paper-2); overflow:hidden } .gd-feat__cover svg, .gd-feat__cover img{ width:100%; height:100%; display:block; object-fit:cover } .gd-feat__body{ padding: 28px; display:flex; flex-direction:column; justify-content:center; gap: 12px } .gd-feat__tag{ display:inline-flex; align-items:center; gap: 8px; background:#0a0a0a; color: var(--gd-y); font-size: 10px; letter-spacing:.14em; text-transform: uppercase; font-weight: 800; padding: 6px 10px; border-radius: 999px; width: fit-content } .gd-feat h3{ font-family: var(--gd-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; letter-spacing: -.01em; margin: 0 } .gd-feat__excerpt{ color: var(--gd-mute); font-size: 16px; line-height: 1.6; margin: 0 } .gd-feat__meta{ font-size: 13px; color: var(--gd-mute); display:flex; align-items:center; gap: 14px; flex-wrap: wrap; margin-top: 6px } .gd-feat__meta b{ font-weight: 700; color: #0a0a0a } @media (min-width: 900px){ .gd-feat{ grid-template-columns: 1.1fr 1fr; gap: 0 } .gd-feat__body{ padding: 40px } } /* Newsletter card */ .gd-newsletter{ background: var(--gd-bg); color:#fff; border-radius: 18px; padding: 28px; display:flex; flex-direction:column; gap: 14px; margin-top: 56px; position: relative; overflow:hidden } .gd-newsletter::before{ content:''; position:absolute; right:-100px; top:-100px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,193,10,.2), transparent 70%) } .gd-newsletter > *{ position: relative; z-index: 1 } .gd-newsletter h3{ font-family: var(--gd-display); font-weight: 900; text-transform: uppercase; font-size: 28px; line-height: 1; margin: 0 } .gd-newsletter p{ color: #b8b8b6; margin: 0; max-width: 480px } .gd-newsletter__form{ display:flex; gap: 8px; flex-wrap: wrap } .gd-newsletter__form input{ flex: 1; min-width: 200px; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; outline: none; font-size: 15px } .gd-newsletter__form input::placeholder{ color: rgba(255,255,255,.5) } .gd-newsletter__form input:focus{ border-color: var(--gd-y) } @media (min-width: 760px){ .gd-newsletter{ padding: 40px 44px } } /* Author / meta block on post detail */ .gd-author{ display:flex; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--gd-line); border-bottom: 1px solid var(--gd-line); margin: 28px 0 } .gd-author__av{ width: 52px; height: 52px; border-radius: 50%; background: var(--gd-y); color: #0a0a0a; font-weight: 800; display:flex; align-items:center; justify-content:center; font-size: 16px; letter-spacing: .04em } .gd-author__txt b{ display:block; font-weight: 700 } .gd-author__txt span{ display:block; font-size: 13px; color: var(--gd-mute) } /* Contact info card */ .gd-info{ display:flex; flex-direction:column; gap: 14px; padding: 24px; background: #fff; border: 1px solid var(--gd-line); border-radius: 16px } .gd-info__row{ display:flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--gd-line) } .gd-info__row:last-child{ border-bottom: 0; padding-bottom: 0 } .gd-info__row:first-child{ padding-top: 0 } .gd-info__icon{ width: 40px; height: 40px; border-radius: 10px; background: var(--gd-paper-2); color: var(--gd-y-deep); display:flex; align-items:center; justify-content:center; flex-shrink: 0 } .gd-info__txt b{ display:block; font-weight: 700; font-size: 14.5px; margin-bottom: 2px } .gd-info__txt span{ display:block; font-size: 13.5px; color: var(--gd-mute); line-height: 1.5 } .gd-info__txt a{ color: #0a0a0a; font-weight: 600 } .gd-info__txt a:hover{ color: var(--gd-y-deep) } /* Map placeholder (contact / service area) */ .gd-mapbox{ aspect-ratio: 16/10; background: #0a0a0a; border-radius: 16px; overflow: hidden; position: relative } .gd-mapbox svg{ width:100%; height: 100% } /* Reviews-page big card */ .gd-revbig{ display:grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 32px; background: #fff; border: 1px solid var(--gd-line); border-radius: 18px; margin-bottom: 36px } .gd-revbig__score{ display:flex; align-items: center; gap: 18px } .gd-revbig__score .num{ font-family: var(--gd-display); font-weight: 900; font-size: 88px; line-height: 1; letter-spacing: -.02em } .gd-revbig__score .gd-stars{ font-size: 18px } .gd-revbig__score .meta{ color: var(--gd-mute); font-size: 13px; margin-top: 4px } .gd-revbig__bars{ display:flex; flex-direction: column; gap: 8px; min-width: 260px } .gd-revbig__bar{ display:grid; grid-template-columns: 30px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; color: var(--gd-mute) } .gd-revbig__bar .track{ height: 8px; border-radius: 999px; background: var(--gd-paper-2); overflow: hidden } .gd-revbig__bar .fill{ height: 100%; background: var(--gd-y); border-radius: 999px } @media (min-width: 760px){ .gd-revbig{ grid-template-columns: 1fr 1fr; padding: 40px } } /* Reviews grid */ .gd-revgrid{ display:grid; grid-template-columns: 1fr; gap: 16px } @media (min-width: 760px){ .gd-revgrid{ grid-template-columns: repeat(2, 1fr); gap: 18px } } @media (min-width: 1024px){ .gd-revgrid{ grid-template-columns: repeat(3, 1fr) } } .gd-revgrid .gd-rev__card{ flex-basis: auto; flex: 1 } /* ───────────────────────────────────────────────────────────── MEGA MENU (animated dropdown on the Services nav item) ───────────────────────────────────────────────────────────── */ .gd-mega-wrap{ position: static; display: inline-flex; align-items: center } .gd-mega-trigger{ display:flex; align-items:center; gap:5px; font-weight:600; font-size:14px; color:#222; padding:6px 0; position:relative; } .gd-mega-trigger:hover{ color: var(--gd-y-deep) } .gd-mega-trigger::after{ content:''; position:absolute; left:50%; bottom:0; width:0; height:2px; background: var(--gd-y); transition: width .2s ease, left .2s ease; } .gd-mega-trigger:hover::after, .gd-mega-trigger[aria-expanded="true"]::after{ width:100%; left:0 } .gd-mega-trigger__chev{ transition: transform .25s ease } .gd-mega-trigger[aria-expanded="true"] .gd-mega-trigger__chev{ transform: rotate(180deg) } .gd-mega{ position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--gd-line); box-shadow: 0 28px 60px -20px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .22s ease, transform .25s cubic-bezier(.2,.7,.2,1); z-index: 49; visibility: hidden; } .gd-mega.is-open{ opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible } .gd-mega__inner{ display: grid; grid-template-columns: 1fr 1fr 1fr 0.95fr; gap: 24px; padding: 32px 40px; align-items: start; max-width: 1400px; margin: 0 auto; } .gd-mega__col{ display:flex; flex-direction:column; gap: 14px } .gd-mega__col .gd-eyebrow{ margin-bottom: 4px } .gd-mega__list{ list-style:none; padding:0; margin: 0; display:flex; flex-direction:column; gap: 2px } .gd-mega__list a{ display:flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; transition: background .15s ease; } .gd-mega__list a:hover{ background: var(--gd-paper-2) } .gd-mega__icon{ width: 42px; height: 42px; border-radius: 10px; background: #fff7df; color: var(--gd-y-deep); display:inline-flex; align-items:center; justify-content:center; transition: background .15s, color .15s; flex-shrink: 0; } .gd-mega__list a:hover .gd-mega__icon{ background: var(--gd-y); color: #0a0a0a } .gd-mega__txt{ display:flex; flex-direction:column; min-width: 0 } .gd-mega__txt b{ display:block; font-weight: 700; font-size: 14.5px; color: #0a0a0a; line-height: 1.2; margin-bottom: 3px } .gd-mega__txt span{ display:block; font-size: 12.5px; color: var(--gd-mute); line-height: 1.35 } .gd-mega__promo{ background: var(--gd-bg); color: #fff; border-radius: 14px; padding: 22px 22px 22px; display:flex; flex-direction:column; gap: 10px; position: relative; overflow: hidden; } .gd-mega__promo::before{ content:''; position:absolute; right:-80px; top:-80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,193,10,.22), transparent 70%); pointer-events:none } .gd-mega__promo > *{ position: relative; z-index: 1 } .gd-mega__promo h4{ font-family: var(--gd-display); font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1.0; margin: 4px 0 4px; letter-spacing:-.005em; } .gd-mega__promo .y{ color: var(--gd-y) } .gd-mega__promo p{ color: #b8b8b6; font-size: 13px; margin: 0 0 12px; line-height: 1.5 } .gd-mega__promo .gd-btn{ width: 100%; height: 48px; font-size: 14px } /* Stagger animation when opening */ .gd-mega__col, .gd-mega__promo{ opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease } .gd-mega.is-open .gd-mega__col, .gd-mega.is-open .gd-mega__promo{ opacity: 1; transform: translateY(0) } .gd-mega.is-open .gd-mega__col:nth-child(1){ transition-delay: .05s } .gd-mega.is-open .gd-mega__col:nth-child(2){ transition-delay: .1s } .gd-mega.is-open .gd-mega__col:nth-child(3){ transition-delay: .15s } .gd-mega.is-open .gd-mega__promo{ transition-delay: .2s } /* Hide mega on tablet/mobile — mobile uses sheet menu */ @media (max-width: 1023px){ .gd-mega{ display: none } .gd-mega-trigger__chev{ display: none } } /* ═══════════════════════════════════════════════════════════════ SERVICE PAGE STYLES ═══════════════════════════════════════════════════════════════ */ /* Page Hero Enhancements */ .gd-page-hero__badge-row { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; } .gd-page-hero__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--gd-y); color: #0a0a0a; display: inline-flex; align-items: center; justify-content: center; } .gd-page-hero__lead { font-size: 1.125rem; color: rgba(255,255,255,.8); max-width: 600px; margin: 0 0 24px; line-height: 1.6; } .gd-page-hero__badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px dashed rgba(255,255,255,.16); } .gd-page-hero__badge-item { display: flex; align-items: center; gap: 8px; color: #cfcfcc; font-size: 13px; } .gd-page-hero__badge-item b { color: #fff; } .gd-page-hero__badge-icon { color: var(--gd-y); } /* Service Content Container - left column in the split layout */ .gd-service-content { width: 100%; } .gd-service-content h2 { font-family: var(--gd-display); font-size: clamp(28px, 4vw, 42px); font-weight: 900; text-transform: uppercase; line-height: 1.05; margin: 8px 0 18px; letter-spacing: -0.01em; } .gd-service-content h3 { font-family: var(--gd-display); font-size: 20px; font-weight: 800; text-transform: uppercase; margin: 28px 0 14px; letter-spacing: -0.005em; } .gd-service-content p { color: var(--gd-mute); line-height: 1.65; margin: 0 0 16px; font-size: 16px; } /* Service Visual - right column illustration */ .gd-service-visual { position: relative; border-radius: 18px; overflow: hidden; background: #1a1a1a; aspect-ratio: 4/5; } .gd-service-visual svg { display: block; width: 100%; height: 100%; } .gd-service-visual__badge-live { position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 700; padding: 8px 14px; border-radius: 999px; display: flex; align-items: center; gap: 8px; } .gd-service-visual__badge-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gd-green); animation: gdrPulse 1.8s ease-out infinite; } .gd-service-visual__badge-sameday { position: absolute; top: 16px; right: 16px; background: var(--gd-y); color: #0a0a0a; font-family: var(--gd-display); font-size: 14px; font-weight: 900; text-transform: uppercase; text-align: center; padding: 12px 16px; border-radius: 12px; line-height: 1.1; letter-spacing: 0.02em; } @media (max-width: 899px) { .gd-service-visual { max-width: 320px; margin: 0 auto; } } /* Check List */ .check-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr; gap: 10px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #1f2024; line-height: 1.5; } .check-list li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; background: var(--gd-y-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; } @media (min-width: 1100px) { .check-list { grid-template-columns: 1fr 1fr; } } /* Keep check-list single column in service content (split layout) */ .gd-service-content .check-list { grid-template-columns: 1fr; } /* Type Cards */ .type-card { background: #fff; border: 1px solid var(--gd-line); border-radius: 16px; padding: 24px; margin-bottom: 16px; position: relative; } .type-card.featured { border-color: var(--gd-y); box-shadow: 0 8px 30px -10px rgba(255, 193, 10, 0.3); } .type-card h3 { margin-top: 0 !important; } .type-card ul { list-style: none; padding: 0; margin: 12px 0 0; } .type-card ul li { padding: 6px 0; padding-left: 24px; position: relative; font-size: 14px; color: var(--gd-mute); } .type-card ul li::before { content: '•'; position: absolute; left: 8px; color: var(--gd-y-deep); font-weight: bold; } .featured-badge { position: absolute; top: -10px; right: 20px; background: var(--gd-y); color: #0a0a0a; padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } /* Note/Tip Box */ .gd-note { background: #fff7df; border: 1px solid #fde8a3; border-left: 4px solid var(--gd-y); border-radius: 10px; padding: 16px 20px; margin-top: 24px; font-size: 14px; line-height: 1.6; color: #5a4a00; } .gd-note strong { color: #7a5a00; font-weight: 700; } /* Price Grid */ .price-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } @media (min-width: 768px) { .price-grid { grid-template-columns: repeat(3, 1fr); } } .price-card { background: #fff; border: 1px solid var(--gd-line); border-radius: 16px; padding: 28px; text-align: center; position: relative; } .price-card.featured { background: #0a0a0a; color: #fff; border-color: #0a0a0a; box-shadow: 0 20px 50px -20px rgba(0,0,0,.4); } .price-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gd-y); color: #0a0a0a; padding: 4px 14px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .price-label { display: block; font-family: var(--gd-display); font-size: 16px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; } .price-amount { display: block; font-family: var(--gd-display); font-size: 32px; font-weight: 900; margin-bottom: 8px; } .price-card.featured .price-amount { color: var(--gd-y); } .price-note { display: block; font-size: 13px; color: var(--gd-mute); } .price-card.featured .price-note { color: rgba(255,255,255,.6); } /* Service Note - Override for full-width dark section */ .service-note .service-eyebrow { color: var(--gd-y); } /* Type Cards Container */ .type-cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; } @media (min-width: 768px) { .type-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .type-cards { grid-template-columns: repeat(3, 1fr); } } /* FAQ Items */ .faq-item { background: #fff; border: 1px solid var(--gd-line); border-radius: 14px; padding: 24px; margin-bottom: 12px; } .faq-item h3 { margin: 0 0 12px !important; font-size: 17px !important; color: #0a0a0a; } .faq-item p { margin: 0 !important; font-size: 15px; } /* Compact CTA */ .gd-cta--compact { padding: 60px 0; background: #0a0a0a; } .gd-cta--compact .gd-cta__inner { text-align: center; } .gd-cta--compact .gd-cta__content { max-width: 600px; margin: 0 auto; } .gd-cta--compact h2 { font-family: var(--gd-display); font-size: clamp(28px, 4vw, 42px); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.05; margin: 8px 0 16px; } .gd-cta--compact p { color: rgba(255,255,255,.7); margin: 0 0 28px; } .gd-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Highlight text */ .highlight, .y { color: var(--gd-y); } /* ═══════════════════════════════════════════════════════════════ SERVICE ARCHIVE STYLES ═══════════════════════════════════════════════════════════════ */ /* Service Tabs */ .gd-service-tabs { background: var(--gd-paper-2); padding: 20px 0; border-bottom: 1px solid var(--gd-line); position: sticky; top: 70px; z-index: 90; } .gd-service-tabs__list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .gd-service-tabs__tab { display: inline-block; padding: 10px 20px; background: #fff; border: 1px solid var(--gd-line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gd-mute); text-decoration: none; transition: all 0.2s ease; } .gd-service-tabs__tab:hover { border-color: var(--gd-y); color: #0a0a0a; } .gd-service-tabs__tab.is-active { background: var(--gd-y); border-color: var(--gd-y); color: #0a0a0a; font-weight: 700; } /* Service Detail Cards */ .gd-detail { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--gd-line); } .gd-detail:last-child { border-bottom: none; } .gd-detail__num { font-family: var(--gd-display); font-size: 48px; font-weight: 900; color: var(--gd-y); line-height: 1; opacity: 0.3; min-width: 70px; } .gd-detail__body h3 { font-family: var(--gd-display); font-size: clamp(22px, 3vw, 28px); font-weight: 900; text-transform: uppercase; margin: 0 0 12px; letter-spacing: -0.01em; } .gd-detail__body > p { color: var(--gd-mute); font-size: 15px; line-height: 1.65; margin: 0 0 20px; max-width: 650px; } .gd-detail__body ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .gd-detail__body ul li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #1f2024; } .gd-detail__body ul li svg { flex-shrink: 0; color: var(--gd-y-deep); } /* Service Facts Grid */ .gd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; padding: 20px; background: var(--gd-paper-2); border-radius: 14px; } .gd-facts__item { display: flex; flex-direction: column; gap: 4px; } .gd-facts__item .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gd-mute); font-weight: 600; } .gd-facts__item .val { font-family: var(--gd-display); font-size: 16px; font-weight: 800; color: #0a0a0a; } /* Service Detail CTA */ .gd-detail__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* Responsive */ @media (max-width: 640px) { .gd-detail { grid-template-columns: 1fr; gap: 16px; } .gd-detail__num { font-size: 36px; min-width: auto; } .gd-service-tabs { position: static; } .gd-service-tabs__list { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .gd-service-tabs__tab { flex-shrink: 0; } } /* ═══════════════════════════════════════════════════════════════ PRICING CARDS ═══════════════════════════════════════════════════════════════ */ .gd-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 767px) { .gd-pricing-grid { grid-template-columns: 1fr; } } .gd-price-card { position: relative; padding: 28px; background: #fff; border: 1px solid var(--gd-line); border-radius: 18px; display: flex; flex-direction: column; } .gd-price-card--featured { background: #0a0a0a; color: #fff; border-color: #0a0a0a; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); } .gd-price-card__badge { position: absolute; right: 20px; top: 20px; background: var(--gd-y); color: #0a0a0a; padding: 6px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; } .gd-price-card__header { margin-bottom: 20px; } .gd-price-card__title { font-family: var(--gd-display); font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1; margin: 6px 0 8px; letter-spacing: -.005em; } .gd-price-card__price { font-family: var(--gd-display); font-weight: 900; font-size: 42px; line-height: 1; margin-top: 8px; } .gd-price-card--featured .gd-price-card__price { color: var(--gd-y); } .gd-price-card__list { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .gd-price-card__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--gd-mute); } .gd-price-card--featured .gd-price-card__list li { color: #cfcfcc; } .gd-price-card__list li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; background: var(--gd-y-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; } .gd-price-card--featured .gd-price-card__list li::before { background: var(--gd-y); } .gd-pricing-note { margin-top: 22px; padding: 14px 18px; background: var(--gd-paper-2); border: 1px dashed var(--gd-line); border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #0a0a0a; } .gd-pricing-note svg { flex-shrink: 0; color: var(--gd-y-deep); } /* ═══════════════════════════════════════════════════════════════ TESTIMONIAL SPOTLIGHT ═══════════════════════════════════════════════════════════════ */ .gd-testimonial-quote { font-family: var(--gd-display); font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 4vw, 38px); line-height: 1.1; margin: 14px 0 26px; letter-spacing: -.005em; } .gd-testimonial-author { display: inline-flex; align-items: center; gap: 14px; } .gd-testimonial-author__info { text-align: left; } .gd-testimonial-author__info b { display: block; font-size: 15px; } .gd-testimonial-author__info div { font-size: 12px; color: #9a9a99; } .gd-rev__avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; } /* Before/After Gallery Slider ───────────────────────────────────────────────────────────── */ .gd-ba-gallery { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--gd-shadow); width: 100%; } .gd-ba-slider { display: none; width: 100%; position: relative; } .gd-ba-slider.is-active { display: block; } .gd-ba-slider__images { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; cursor: ew-resize; } .gd-ba-slider__after, .gd-ba-slider__before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .gd-ba-slider__before { clip-path: inset(0 50% 0 0); z-index: 2; } .gd-ba-slider__handle { position: absolute; top: 0; left: 50%; width: 3px; height: 100%; background: #fff; transform: translateX(-50%); z-index: 3; cursor: grab; box-shadow: 0 0 8px rgba(0,0,0,.4); } .gd-ba-slider__handle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); } .gd-ba-slider__handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M8 6l-4 6 4 6M16 6l4 6-4 6'/%3E%3C/svg%3E") center/contain no-repeat; } .gd-ba-slider__handle.is-dragging { cursor: grabbing; } .gd-ba-slider__caption { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; font-size: 12px; color: #fff; background: rgba(0,0,0,.6); border-radius: 20px; backdrop-filter: blur(4px); z-index: 5; white-space: nowrap; } .gd-ba-gallery:not(:has(.gd-ba-dots)) .gd-ba-slider__caption { bottom: 12px; } .gd-ba-slider__labels { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px; pointer-events: none; z-index: 4; } .gd-ba-slider__labels span { padding: 5px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: rgba(0,0,0,.5); border-radius: 4px; backdrop-filter: blur(4px); } /* Pagination dots */ .gd-ba-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; padding: 6px 10px; background: rgba(0,0,0,.5); border-radius: 20px; backdrop-filter: blur(4px); } .gd-ba-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; } .gd-ba-dot:hover { background: rgba(255,255,255,.7); } .gd-ba-dot.is-active { background: var(--gd-y); transform: scale(1.2); } /* Focus state for accessibility */ .gd-ba-slider:focus { outline: 2px solid var(--gd-y); outline-offset: 2px; } .gd-ba-slider:focus:not(:focus-visible) { outline: none; } /* Responsive */ @media (max-width: 899px) { .gd-ba-gallery { max-width: 400px; margin: 0 auto; } } /* Thumbnail Gallery ───────────────────────────────────────────────────────────── */ .gd-thumb-gallery { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; overflow: hidden; } .gd-thumb-gallery__main { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; background: var(--gd-paper-2); box-shadow: var(--gd-shadow); } .gd-thumb-gallery__main-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } .gd-thumb-gallery__main-img.is-loading { opacity: 0.5; } .gd-thumb-gallery__thumbs { display: flex; align-items: center; gap: 8px; width: 100%; } .gd-thumb-gallery__nav { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--gd-line); color: var(--gd-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,.08); } .gd-thumb-gallery__nav:hover:not(:disabled) { background: var(--gd-y); border-color: var(--gd-y); color: #0a0a0a; } .gd-thumb-gallery__nav:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .gd-thumb-gallery__track-wrap { flex: 1; min-width: 0; overflow: hidden; } .gd-thumb-gallery__track { display: flex; gap: 8px; transition: transform 0.3s ease; } .gd-thumb-gallery__thumb { flex-shrink: 0; width: calc((100% - 24px) / 4); aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; border: 3px solid transparent; padding: 0; cursor: pointer; background: var(--gd-paper-2); transition: all .2s ease; box-shadow: 0 2px 8px rgba(0,0,0,.1); } .gd-thumb-gallery__thumb:hover { border-color: var(--gd-mute-2); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .gd-thumb-gallery__thumb.is-active { border-color: var(--gd-y); box-shadow: 0 4px 12px rgba(255,193,10,.3); } .gd-thumb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } /* Responsive */ @media (max-width: 899px) { .gd-thumb-gallery { max-width: 400px; margin: 0 auto; } .gd-thumb-gallery__thumb { width: calc((100% - 16px) / 3); } .gd-thumb-gallery__nav { width: 28px; height: 28px; } } /* Trustindex Widget ───────────────────────────────────────────────────────────── */ .gdr-trustindex-widget { max-width: 100%; margin: 0 auto; width: 100%; } .gdr-trustindex-widget iframe { max-width: 100%; border: none; } /* Fix Trustindex widget layout */ .gdr-trustindex-widget .ti-widget { font-family: var(--gd-body) !important; width: 100% !important; max-width: 100% !important; } .gdr-trustindex-widget .ti-widget-container { width: 100% !important; max-width: 100% !important; } /* Fix review cards layout */ .gdr-trustindex-widget .ti-reviews-container { width: 100% !important; max-width: 100% !important; } .gdr-trustindex-widget .ti-review-item { min-width: 300px !important; max-width: 400px !important; } .gdr-trustindex-widget .ti-review-content { word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; } .gdr-trustindex-widget .ti-review-content p, .gdr-trustindex-widget .ti-review-text { white-space: normal !important; word-break: normal !important; line-height: 1.5 !important; } /* Home page Trustindex carousel styling */ .gdr-trustindex-home { margin-top: 32px; } /* Reviews page - force proper grid layout */ .gdr-trustindex-grid .ti-widget { max-width: 100% !important; width: 100% !important; } .gdr-trustindex-grid .ti-widget-container, .gdr-trustindex-grid .ti-reviews-container-wrapper, .gdr-trustindex-grid .ti-reviews-container { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 24px !important; } .gdr-trustindex-grid .ti-review-item { width: calc(33.333% - 20px) !important; min-width: 280px !important; max-width: 380px !important; flex: 1 1 300px !important; margin: 0 !important; } /* Hide carousel navigation on grid */ .gdr-trustindex-grid .ti-controls, .gdr-trustindex-grid .ti-prev, .gdr-trustindex-grid .ti-next, .gdr-trustindex-grid .slick-arrow, .gdr-trustindex-grid .slick-dots, .gdr-trustindex-grid .ti-pagination { display: none !important; } /* Make all reviews visible on grid - disable carousel */ .gdr-trustindex-grid .slick-track { display: flex !important; flex-wrap: wrap !important; width: 100% !important; transform: none !important; transition: none !important; animation: none !important; } .gdr-trustindex-grid .slick-slide { width: calc(33.333% - 20px) !important; min-width: 280px !important; float: none !important; display: block !important; opacity: 1 !important; visibility: visible !important; } .gdr-trustindex-grid .slick-list { overflow: visible !important; height: auto !important; } /* Responsive grid */ @media (max-width: 1024px) { .gdr-trustindex-grid .ti-review-item, .gdr-trustindex-grid .slick-slide { width: calc(50% - 16px) !important; min-width: 260px !important; } } @media (max-width: 640px) { .gdr-trustindex-grid .ti-review-item, .gdr-trustindex-grid .slick-slide { width: 100% !important; max-width: 100% !important; min-width: 100% !important; } } /* ───────────────────────────────────────────────────────────── Homepage Gallery ───────────────────────────────────────────────────────────── */ .gd-gallery-sec { background: var(--gd-paper-2); } .gd-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 600px) { .gd-gallery__grid { gap: 16px; } } @media (min-width: 900px) { .gd-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .gd-gallery__item { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: var(--gd-line); box-shadow: 0 4px 20px -8px rgba(0,0,0,.15); transition: transform .3s ease, box-shadow .3s ease; } .gd-gallery__item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.25); } .gd-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gd-gallery__item:hover img { transform: scale(1.05); } .gd-gallery__overlay { position: absolute; inset: 0; background: rgba(10,10,10,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; } .gd-gallery__item:hover .gd-gallery__overlay { opacity: 1; } .gd-gallery__overlay svg { color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); } .gd-gallery__cta { text-align: center; margin-top: 36px; } /* ───────────────────────────────────────────────────────────── Gallery Page ───────────────────────────────────────────────────────────── */ .gd-gallery-page { padding: 64px 0; } @media (min-width: 900px) { .gd-gallery-page { padding: 96px 0; } } .gd-gallery-page__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 500px) { .gd-gallery-page__grid { gap: 16px; } } @media (min-width: 900px) { .gd-gallery-page__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (min-width: 1200px) { .gd-gallery-page__grid { grid-template-columns: repeat(4, 1fr); } } .gd-gallery-page__item { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--gd-line); box-shadow: 0 4px 16px -6px rgba(0,0,0,.12); transition: transform .3s ease, box-shadow .3s ease; } .gd-gallery-page__item:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -10px rgba(0,0,0,.22); } .gd-gallery-page__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gd-gallery-page__item:hover img { transform: scale(1.04); } .gd-gallery-page__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.6) 0%, transparent 50%); display: flex; align-items: flex-end; justify-content: center; padding: 16px; opacity: 0; transition: opacity .3s ease; } .gd-gallery-page__item:hover .gd-gallery-page__overlay { opacity: 1; } .gd-gallery-page__overlay svg { color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); } .gd-gallery-page__caption { color: #fff; font-size: 13px; font-weight: 600; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.4); } /* Lightbox styles */ .gd-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 10, 10, .95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; padding: 20px; } .gd-lightbox.is-open { opacity: 1; visibility: visible; } .gd-lightbox__img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .gd-lightbox__close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; } .gd-lightbox__close:hover { background: rgba(255,255,255,.2); } .gd-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; } .gd-lightbox__nav:hover { background: rgba(255,255,255,.2); } .gd-lightbox__nav--prev { left: 20px; } .gd-lightbox__nav--next { right: 20px; } .gd-lightbox__nav svg { width: 24px; height: 24px; } .gd-lightbox__nav--prev svg { transform: rotate(180deg); } /* ───────────────────────────────────────────────────────────── Video Reviews - Enhanced ───────────────────────────────────────────────────────────── */ .gd-video-reviews__name { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); color: #fff; font-size: 13px; font-weight: 600; text-align: center; opacity: 0; transition: opacity .3s ease; } .gd-video-reviews__item:hover .gd-video-reviews__name { opacity: 1; } /* ───────────────────────────────────────────────────────────── Video Modal ───────────────────────────────────────────────────────────── */ .gd-video-modal { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .gd-video-modal.is-open { opacity: 1; visibility: visible; } .gd-video-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .95); } .gd-video-modal__content { position: relative; width: 90%; max-width: 900px; z-index: 1; } .gd-video-modal__close { position: absolute; top: -50px; right: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; z-index: 2; } .gd-video-modal__close:hover { background: rgba(255,255,255,.2); } .gd-video-modal__wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .gd-video-modal__iframe, .gd-video-modal__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: #000; } .gd-video-modal__video { object-fit: contain; } @media (max-width: 600px) { .gd-video-modal__close { top: -44px; right: 0; width: 36px; height: 36px; } .gd-video-modal__content { width: 95%; } }