/* ============================================================================ CITY LUXURY THEME — shared premium dark/gold design for ALL city pages. Activated by adding class="city-luxury" to . Scope: every selector is prefixed .city-luxury so it ONLY affects city pages that opt in (never the homepage or service pages). Content stays 100% dynamic/page-specific — this file changes appearance only. Generated from the approved Dedham design. ============================================================================ */ /* ---------------------------------------------------------------------------- Design system below. .city-luxury scopes everything; page content unchanged. ---------------------------------------------------------------------------- */ /* ---------- Local design tokens (scoped) ---------- */ .city-luxury{ --ded-bg: #08080a; --ded-panel: rgba(24,21,17,0.55); --ded-panel-2: rgba(16,15,13,0.66); --ded-gold: #FACC15; --ded-gold-deep: #D4A50F; --ded-gold-soft: #FFE07A; --ded-line: rgba(250,204,21,0.18); --ded-line-strong: rgba(250,204,21,0.42); --ded-text: rgba(255,255,255,0.82); --ded-text-strong: #FFFFFF; --ded-glow: 0 18px 50px rgba(0,0,0,0.45); color: var(--ded-text); /* Page canvas: a deep dark base with a soft gold glow up top. The literal chimney photo lives in the hero (top), the service-area band (middle) and the final CTA band (bottom), so the cinematic visual carries through the page; everything between is dark glass over this canvas — cohesive, readable and lightweight (no extra image downloads, same cached URL). */ background-color: var(--ded-bg); background-image: radial-gradient(120% 70% at 84% -8%, rgba(250,204,21,0.10) 0%, rgba(250,204,21,0) 52%), linear-gradient(180deg, #0e0e12 0%, #09090b 46%, #060608 100%); background-repeat: no-repeat; } /* =========================================================================== CINEMATIC PAGE BACKGROUND — opt-in, matches the homepage 1:1. City HUB pages add `cg-home-bg` to and get the SAME fixed full-page chimney photo + dark overlay + gold glow the homepage uses (assets/images/services/chimney-repair-hero-bg.webp via ../images/services/…), so the cinematic image carries through every section behind the dark-glass content — visually connected to the homepage. Fixed pseudo-element (no background-attachment:fixed → smooth on iOS); pointer-events:none so it never blocks taps/scroll. The page's own hero photo stays on top (z-index:-2). Scoped to .cg-home-bg only → service pages and light city-service pages are untouched. =========================================================================== */ body.cg-home-bg::before{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background: radial-gradient(120% 60% at 84% -6%, rgba(250,204,21,0.08) 0%, rgba(250,204,21,0) 50%), linear-gradient(180deg, rgba(8,8,10,0.60) 0%, rgba(8,8,10,0.70) 42%, rgba(8,8,10,0.86) 100%), url("../images/services/chimney-repair-hero-bg.webp") center center / cover no-repeat, #08080a; } /* Match the homepage brightness: the single fixed overlay above does the darkening, so drop the per-section gradient veils and the service-area photo band — the one continuous photo reads through every section like the homepage. Decorative-only changes (pointer-events already none). */ .cg-home-bg .svc-detail::before, .cg-home-bg .svc-related::before, .cg-home-bg .svc-faq::before, .cg-home-bg .form-section::before{ background:transparent !important; } .cg-home-bg .gmb-section{ background:transparent !important; } /* =========================================================================== FULL-PAGE SERVICE BACKGROUND — opt-in via class="svc-page-bg" on . Continues the page's hero photo behind EVERY section (one fixed image layer + dark overlay + gold glow) so the cinematic background reads top→bottom instead of stopping after the hero. The image defaults to the shared city-luxury hero photo and is overridable per page with --svc-bg-image (e.g. Chimney Repair points it at its own hero photo). The image is the same one already loaded by the hero → no extra download. Fixed (NOT background-attachment:fixed → smooth on iOS); pointer-events:none → the layers never block taps/scroll/clicks. Each page keeps its OWN background: pages that don't override --svc-bg-image simply carry their existing hero photo (city-hero-bg.jpg) full-page. =========================================================================== */ body.svc-page-bg::before{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background-image: var(--svc-bg-image, url("../images/cities/city-hero-bg.jpg")); background-position:center center; background-size:cover; background-repeat:no-repeat; background-color:#08080a; /* fallback while/if the image is missing */ } body.svc-page-bg::after{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(120% 60% at 84% -6%, rgba(250,204,21,0.09) 0%, rgba(250,204,21,0) 50%), linear-gradient(180deg, rgba(8,8,10,0.52) 0%, rgba(8,8,10,0.68) 46%, rgba(8,8,10,0.84) 100%); } /* The single fixed photo carries through the hero too: drop the hero's own photo layer and keep a left-dark gradient so the H1/lede stay legible while the right side of the photo still reads (cinematic). Higher specificity than the per-page hero rules so it neutralises any hero-only photo (e.g. Chimney Repair) → one seamless image, no hero seam. */ body.svc-page-bg .svc-hero{ background:transparent !important; } body.svc-page-bg .svc-hero::before{ background:linear-gradient(90deg, rgba(8,8,9,0.78) 0%, rgba(8,8,9,0.50) 46%, rgba(8,8,9,0.12) 100%) !important; } /* Strong text-shadow keeps the gold H1 + lede crisp over the brighter photo. */ body.svc-page-bg .svc-hero h1, body.svc-page-bg .svc-hero .lede{ text-shadow:0 2px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.55) !important; } /* Mid + bottom bands: lighter veils so the photo reads through while the dark glass cards keep copy high-contrast. */ body.svc-page-bg .gmb-section{ background:linear-gradient(180deg, rgba(8,8,10,0.52) 0%, rgba(8,8,10,0.66) 100%) !important; } body.svc-page-bg .cta-band{ background: linear-gradient(180deg, rgba(8,8,10,0.60) 0%, rgba(8,8,10,0.78) 100%), radial-gradient(60% 100% at 30% 30%, rgba(250,204,21,0.12) 0%, rgba(250,204,21,0) 60%) !important; } /* Mobile: a touch more dimming so text stays high-contrast over the photo. */ @media (max-width:760px){ body.svc-page-bg::after{ background: radial-gradient(130% 50% at 84% -6%, rgba(250,204,21,0.07) 0%, rgba(250,204,21,0) 48%), linear-gradient(180deg, rgba(8,8,10,0.60) 0%, rgba(8,8,10,0.74) 45%, rgba(8,8,10,0.88) 100%); } /* Hero: stack the dark toward the bottom on portrait so the H1 reads while the photo still shows at the top of the hero. */ body.svc-page-bg .svc-hero::before{ background:linear-gradient(180deg, rgba(8,8,9,0.30) 0%, rgba(8,8,9,0.52) 60%, rgba(8,8,9,0.72) 100%) !important; } } /* =========================================================================== HERO — keep the tuned cinematic photo treatment (already strong) =========================================================================== */ .city-luxury .svc-hero::before { background: linear-gradient(90deg, rgba(8,8,9,0.93) 0%, rgba(8,8,9,0.80) 32%, rgba(8,8,9,0.46) 60%, rgba(8,8,9,0.28) 100%), linear-gradient(180deg, rgba(8,8,9,0.22) 0%, rgba(8,8,9,0.04) 38%, rgba(8,8,9,0.52) 100%), url("../images/cities/city-hero-bg.jpg") center right / cover no-repeat; z-index: -2; } .city-luxury .svc-hero::after { opacity: 0.3; } .city-luxury .svc-hero .urgency { background: rgba(8,8,9,0.40); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .city-luxury .svc-hero h1, .city-luxury .svc-hero .lede { text-shadow: 0 2px 18px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.45); } .city-luxury .svc-hero .lede { color: rgba(255,255,255,0.93); } /* premium gold lift on the hero primary CTA */ .city-luxury .svc-hero .btn-primary{ box-shadow: 0 14px 36px rgba(212,165,15,0.40); } @media (max-width: 760px) { .city-luxury .svc-hero::before { background: linear-gradient(180deg, rgba(8,8,9,0.72) 0%, rgba(8,8,9,0.62) 30%, rgba(8,8,9,0.66) 55%, rgba(8,8,9,0.92) 100%), url("../images/cities/city-hero-bg.jpg") 65% center / cover no-repeat; } } /* =========================================================================== CHROME — utility bar + nav become dark frosted glass with gold accents =========================================================================== */ .city-luxury .utility-bar{ background: rgba(8,8,10,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ded-text); border-bottom: 1px solid var(--ded-line); } .city-luxury .utility-bar .dot{ color: var(--ded-gold); } .city-luxury .utility-bar .phone{ color: var(--ded-text-strong); } .city-luxury .utility-bar .phone:hover{ color: var(--ded-gold); } .city-luxury .utility-bar .pulse{ background: var(--ded-gold); box-shadow: 0 0 0 4px rgba(250,204,21,0.18); } .city-luxury .nav{ background: rgba(10,10,12,0.66); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--ded-line); } /* logo has black artwork → give it the same light chip the dark mobile-nav uses */ .city-luxury .nav .brand img{ background: #F6F2EA; padding: 6px 11px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); } .city-luxury .nav .links a{ color: rgba(255,255,255,0.86); } .city-luxury .nav .links a:hover{ color: var(--ded-gold); } .city-luxury .nav .right .phone-link{ color: var(--ded-text-strong); } .city-luxury .nav .right .phone-link:hover{ color: var(--ded-gold); } .city-luxury .hamburger{ background: rgba(255,255,255,0.08); } .city-luxury .hamburger span, .city-luxury .hamburger span::before, .city-luxury .hamburger span::after{ background: #fff; } .city-luxury .nav .nav-dropdown .dropdown-menu{ background: rgba(16,15,14,0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--ded-line); box-shadow: 0 24px 60px rgba(0,0,0,0.6); } .city-luxury .nav .nav-dropdown .dropdown-menu a{ color: rgba(255,255,255,0.82); } .city-luxury .nav .nav-dropdown .dropdown-menu a:hover{ color: var(--ded-gold); background: rgba(250,204,21,0.08); } /* ---------- Ghost-dark buttons must invert for a dark background ---------- */ .city-luxury .btn-ghost-dark{ color: #fff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .city-luxury .btn-ghost-dark:hover{ background: var(--ded-gold); color: #0B0B0C; border-color: var(--ded-gold); } /* =========================================================================== SECTION BANDS — make the light shared sections transparent so the cinematic backdrop continues, with a soft dark wash + thin gold dividers for depth =========================================================================== */ .city-luxury .svc-detail, .city-luxury .svc-related, .city-luxury .svc-faq, .city-luxury .form-section{ background: transparent; position: relative; } .city-luxury .svc-detail::before, .city-luxury .svc-related::before, .city-luxury .svc-faq::before, .city-luxury .form-section::before{ content:""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,10,0.34) 0%, rgba(8,8,10,0.64) 100%); } /* Service-area band: chimney photo continuation, heavily dark-overlaid */ .city-luxury .gmb-section{ position: relative; background: linear-gradient(180deg, rgba(8,8,10,0.84) 0%, rgba(8,8,10,0.90) 100%), url("../images/cities/city-hero-bg.jpg") center / cover no-repeat; } .city-luxury .svc-related, .city-luxury .svc-faq, .city-luxury .form-section, .city-luxury .gmb-section, .city-luxury .cta-band{ border-top: 1px solid var(--ded-line); } /* shared accents on dark */ .city-luxury .eyebrow{ color: var(--ded-gold); } .city-luxury .eyebrow::before{ background: var(--ded-gold); } .city-luxury em{ color: var(--ded-gold-soft); } /* =========================================================================== OVERVIEW =========================================================================== */ .city-luxury .svc-detail h2{ color: var(--ded-text-strong); } .city-luxury .svc-detail .copy p{ color: rgba(255,255,255,0.74); } .city-luxury .svc-detail .copy p strong{ color: var(--ded-text-strong); } .city-luxury .svc-detail .signs{ background: var(--ded-panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--ded-line); border-radius: 18px; padding: clamp(22px, 3vw, 32px); box-shadow: var(--ded-glow); } .city-luxury .signs h3{ color: var(--ded-text-strong); } .city-luxury .signs p{ color: rgba(255,255,255,0.66) !important; } .city-luxury .signs li{ color: rgba(255,255,255,0.82); } .city-luxury .signs li::before{ background: var(--ded-gold); box-shadow: 0 0 0 3px rgba(250,204,21,0.18); } /* =========================================================================== SERVICES GRID — dark glass cards, thin gold border, soft glow, hover lift =========================================================================== */ .city-luxury .related-head h2{ color: var(--ded-text-strong); } .city-luxury .related-card{ background: var(--ded-panel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--ded-line); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.35); transition: transform .22s ease, box-shadow .3s ease, border-color .25s ease, background .25s ease; } .city-luxury .related-card .name{ color: var(--ded-text-strong); } .city-luxury .related-card .arrow{ color: var(--ded-gold); } .city-luxury .related-card:hover{ transform: translateY(-4px); border-color: var(--ded-line-strong); background: rgba(32,28,20,0.66); box-shadow: 0 18px 44px rgba(0,0,0,0.50), 0 0 0 1px rgba(250,204,21,0.10); } /* =========================================================================== SERVICE AREA / MAP (unstyled by default → full premium dark layout) =========================================================================== */ .city-luxury .gmb-section .section-header{ display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); } @media (max-width: 860px){ .city-luxury .gmb-section .section-header{ grid-template-columns: 1fr; align-items: start; } } .city-luxury .gmb-section .section-eyebrow{ display: inline-flex; align-items: center; } .city-luxury .gmb-section .section-eyebrow .rule{ display: inline-block; width: 28px; height: 1px; background: var(--ded-gold); margin-right: 10px; } .city-luxury .gmb-section .section-eyebrow .text{ color: var(--ded-gold); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; } .city-luxury .gmb-section h2{ color: var(--ded-text-strong); } .city-luxury .gmb-section .quincy-map-sub{ color: rgba(255,255,255,0.72); margin-top: 14px; max-width: 60ch; line-height: 1.6; } .city-luxury .gmb-section .quincy-map-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .city-luxury .gmb-section .section-header .right{ color: rgba(255,255,255,0.72); font-size: 0.95rem; line-height: 1.6; } .city-luxury .gmb-section .section-header .right strong{ color: var(--ded-text-strong); } .city-luxury .embed-map{ position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--ded-line); box-shadow: var(--ded-glow); aspect-ratio: 16 / 7; background: #111; margin-top: 8px; } @media (max-width: 760px){ .city-luxury .embed-map{ aspect-ratio: 4 / 3; } } .city-luxury .embed-map iframe{ width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2) brightness(0.9); } .city-luxury .map-open-pill{ position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(10,10,12,0.85); color: #fff; border: 1px solid var(--ded-line); padding: 9px 16px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s; } .city-luxury .map-open-pill:hover{ background: var(--ded-gold); color: #0B0B0C; border-color: var(--ded-gold); } .city-luxury .areas-v2{ margin-top: clamp(28px, 4vw, 44px); } .city-luxury .areas-v2-title{ color: var(--ded-text-strong); font-size: 1.25rem; } .city-luxury .areas-v2-sub{ color: rgba(255,255,255,0.6); margin-top: 6px; font-size: 0.9rem; } .city-luxury .areas-v2-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .city-luxury .areas-v2-chips a{ display: inline-flex; align-items: baseline; padding: 10px 18px; border-radius: 999px; background: var(--ded-panel); border: 1px solid var(--ded-line); color: var(--ded-text-strong); font-weight: 600; font-size: 0.9rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, border-color .2s, transform .2s, color .2s; } .city-luxury .areas-v2-chips a:hover{ background: var(--ded-gold); color: #0B0B0C; border-color: var(--ded-gold); transform: translateY(-2px); } .city-luxury .areas-v2-chips .region{ opacity: 0.6; font-weight: 500; } .city-luxury .areas-v2-chips a:hover .region{ color: #0B0B0C; opacity: 0.8; } /* =========================================================================== FAQ — glass container, gold open-state, light type =========================================================================== */ .city-luxury .svc-faq-head h2{ color: var(--ded-text-strong); } .city-luxury .svc-faq-list{ background: var(--ded-panel-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--ded-line); border-radius: 18px; padding: clamp(6px, 1.5vw, 14px) clamp(20px, 3vw, 32px); box-shadow: var(--ded-glow); } .city-luxury .faq-item{ border-bottom: 1px solid rgba(255,255,255,0.10); } .city-luxury .faq-item:last-child{ border-bottom: none; } .city-luxury .faq-item summary{ color: var(--ded-text-strong); } .city-luxury .faq-item .answer{ color: rgba(255,255,255,0.70); } .city-luxury .faq-item summary .icon{ background: rgba(255,255,255,0.08); color: var(--ded-text-strong); border: 1px solid var(--ded-line); } .city-luxury .faq-item[open] summary .icon{ background: var(--ded-gold); color: #0B0B0C; border-color: var(--ded-gold); } /* =========================================================================== QUOTE FORM — dark glass card, gold focus, readable inputs =========================================================================== */ .city-luxury .form-card{ background: var(--ded-panel-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--ded-line); box-shadow: 0 30px 70px rgba(0,0,0,0.55); color: var(--ded-text); } .city-luxury .form-card h2{ color: var(--ded-text-strong); } .city-luxury .form-card .label-top{ color: var(--ded-gold); } .city-luxury .form-card .form-lede{ color: rgba(255,255,255,0.70); } .city-luxury .field .lbl{ color: rgba(255,255,255,0.60); } .city-luxury .field input, .city-luxury .field select, .city-luxury .field textarea{ background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--ded-text-strong); } .city-luxury .field input::placeholder, .city-luxury .field textarea::placeholder{ color: rgba(255,255,255,0.40); } .city-luxury .field input:focus, .city-luxury .field select:focus, .city-luxury .field textarea:focus{ border-color: var(--ded-gold); background: rgba(255,255,255,0.08); box-shadow: 0 0 0 4px rgba(250,204,21,0.16); } .city-luxury .field select option{ color: #0B0B0C; } .city-luxury .submit-row .micro{ color: rgba(255,255,255,0.55); } /* =========================================================================== FINAL CTA BAND — translucent so the backdrop shows through =========================================================================== */ .city-luxury .cta-band{ background: linear-gradient(180deg, rgba(8,8,10,0.84) 0%, rgba(8,8,10,0.90) 100%), radial-gradient(60% 100% at 30% 30%, rgba(250,204,21,0.16) 0%, rgba(250,204,21,0) 60%), url("../images/cities/city-hero-bg.jpg") center / cover no-repeat; } /* =========================================================================== FOOTER — dark premium (scoped to Dedham only) =========================================================================== */ .city-luxury .footer{ background: linear-gradient(180deg, rgba(10,10,12,0.92) 0%, rgba(6,6,8,0.96) 100%); border-top: 1px solid var(--ded-line); color: var(--ded-text); } .city-luxury .footer .top{ border-bottom: 1px solid rgba(255,255,255,0.08); } .city-luxury .footer .brand-col img{ background: #F6F2EA; padding: 14px 16px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.40); } .city-luxury .footer .brand-col .contact a, .city-luxury .footer .brand-col .contact span{ color: rgba(255,255,255,0.78); } .city-luxury .footer .brand-col .contact a:hover{ color: var(--ded-gold); } .city-luxury .footer h5{ color: var(--ded-gold); } .city-luxury .footer ul a, .city-luxury .footer ul span{ color: rgba(255,255,255,0.74); } .city-luxury .footer ul a:hover{ color: var(--ded-gold); } .city-luxury .footer .footer-cities-2col li a strong{ color: var(--ded-gold); } .city-luxury .footer .chip{ color: rgba(255,255,255,0.80); background: rgba(255,255,255,0.05); border: 1px solid var(--ded-line); } .city-luxury .footer .bottom{ color: rgba(255,255,255,0.55); } .city-luxury .footer .bottom .links a{ color: rgba(255,255,255,0.70); } .city-luxury .footer .bottom .links a:hover{ color: var(--ded-gold); } .city-luxury .footer .brand-col .footer-map{ border: 1px solid var(--ded-line); background: #111; box-shadow: 0 8px 24px rgba(0,0,0,0.40); } .city-luxury .footer .brand-col .footer-map iframe{ filter: grayscale(0.2) brightness(0.9); } .city-luxury .footer .brand-col .footer-map .footer-map-cta{ background: rgba(10,10,12,0.85); color: #fff; border: 1px solid var(--ded-line); } .city-luxury .footer .brand-col .footer-map .footer-map-cta:hover{ background: var(--ded-gold); color: #0B0B0C; border-color: var(--ded-gold); } /* ---------- Sticky mobile call bar: subtle gold edge ---------- */ .city-luxury .mobile-bar{ border: 1px solid var(--ded-line); } /* =========================================================================== MOBILE — service cards stay 2 PER ROW (override shared 1-col @≤540px) =========================================================================== */ @media (max-width: 540px){ .city-luxury .related-grid{ grid-template-columns: 1fr 1fr; gap: 12px; } .city-luxury .related-card{ padding: 16px 14px; } .city-luxury .related-card .name{ font-size: 1rem; line-height: 1.25; } .city-luxury .related-card .arrow{ font-size: 0.8rem; } } @media (max-width: 380px){ .city-luxury .related-grid{ gap: 10px; } .city-luxury .related-card{ padding: 14px 12px; } .city-luxury .related-card .name{ font-size: 0.9rem; } } /* =========================================================================== PROJECT GALLERY — Dedham-only premium image strip (real project photos). Image-only (no new copy). Glass cards, thin gold border, rounded corners, soft shadow, object-fit cover with fixed aspect (no layout shift), elegant hover zoom on desktop. Desktop = 3-up; mobile = 1 feature on top + 2 below. =========================================================================== */ .city-luxury .dedham-gallery{ position: relative; border-top: 1px solid var(--ded-line); background: linear-gradient(180deg, rgba(8,8,10,0.42) 0%, rgba(8,8,10,0.70) 100%); } .city-luxury .dedham-gallery-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); } .city-luxury .dedham-gallery-item{ position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--ded-line); box-shadow: var(--ded-glow); background: var(--ded-panel-2); aspect-ratio: 4 / 5; transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease; } .city-luxury .dedham-gallery-item::after{ content:""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,10,0) 52%, rgba(8,8,10,0.46) 100%); transition: opacity .3s ease; } .city-luxury .dedham-gallery-item img{ width: 100%; height: 100%; object-fit: contain; object-position: center; /* show the whole photo */ background: #0e0e10; /* clean dark backdrop */ display: block; transition: transform .6s cubic-bezier(0.22,0.61,0.36,1); } @media (hover: hover){ .city-luxury .dedham-gallery-item:hover{ transform: translateY(-4px); border-color: var(--ded-line-strong); box-shadow: 0 24px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(250,204,21,0.12); } .city-luxury .dedham-gallery-item:hover img{ transform: scale(1.05); } .city-luxury .dedham-gallery-item:hover::after{ opacity: 0.65; } } /* Mobile / tablet: 1 feature image on top, 2 below — all kept portrait so the full chimney is always visible (no awkward cropping). */ @media (max-width: 860px){ .city-luxury .dedham-gallery-grid{ grid-template-columns: 1fr 1fr; grid-template-areas: "feature feature" "left right"; gap: 12px; } .city-luxury .dedham-gallery-item:nth-child(1){ grid-area: feature; aspect-ratio: 4 / 5; } .city-luxury .dedham-gallery-item:nth-child(2){ grid-area: left; aspect-ratio: 3 / 4; } .city-luxury .dedham-gallery-item:nth-child(3){ grid-area: right; aspect-ratio: 3 / 4; } .city-luxury .dedham-gallery-item{ border-radius: 14px; } } /* ============================================================================ Mobile service-page project gallery → ONE-CARD SWIPE CAROUSEL (≤560px) Desktop keeps the existing masonry columns untouched. On phones the same

cards become a native horizontal scroll-snap carousel: one card visible, swipe left/right, caption stays under each image. Native overflow = vertical page scroll is NEVER blocked, no touch JS, no overlay (freeze-safe). Higher specificity (body .cgr-gallery …) overrides the per-page `.-page .cgr-gallery-grid` rules without !important. quicknav.js adds the 1/N counter + dots. ============================================================================ */ .cgr-carousel-nav{ display: none; } /* hidden on desktop — no carousel there */ @media (max-width: 560px){ body .cgr-gallery .cgr-gallery-grid{ display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 4px; margin: 0 0 12px; } body .cgr-gallery .cgr-gallery-grid::-webkit-scrollbar{ display: none; } body .cgr-gallery .cgr-gallery-item{ flex: 0 0 100%; width: 100%; margin: 0; scroll-snap-align: center; } body .cgr-gallery .cgr-gallery-item img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; /* show the whole photo */ background: #0e0e10; /* clean dark backdrop */ } .cgr-carousel-nav{ display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 4px; } .cgr-carousel-counter{ font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 600; color: var(--ded-gold); letter-spacing: .04em; background: rgba(8,8,10,0.55); border: 1px solid var(--ded-line); border-radius: 999px; padding: 4px 12px; } .cgr-carousel-dots{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 60%; } .cgr-carousel-dots button{ width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,0.32); cursor: pointer; transition: background .2s, transform .2s; -webkit-tap-highlight-color: transparent; } .cgr-carousel-dots button.active{ background: var(--ded-gold); transform: scale(1.3); } } /* =========================================================================== STAGE 2 — City service-page project image strip (.csg). Self-contained, matches the dark/gold theme. Masonry columns -> full images (no crop), stacks cleanly on mobile, never causes horizontal scroll. Only affects .csg. =========================================================================== */ .csg{ position:relative; padding:clamp(34px,5vw,64px) 0; } .csg .csg-head{ max-width:760px; margin:0 auto clamp(16px,3vw,26px); text-align:center; } .csg .csg-eyebrow{ display:inline-block; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ded-gold); } .csg .csg-grid{ columns:3; column-gap:16px; } @media (max-width:900px){ .csg .csg-grid{ columns:2; } } @media (max-width:560px){ .csg .csg-grid{ columns:1; } } .csg .csg-item{ break-inside:avoid; margin:0 0 16px; border-radius:16px; overflow:hidden; border:1px solid var(--ded-line); background:var(--ded-panel-2); box-shadow:0 10px 30px rgba(0,0,0,0.4); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .csg .csg-item img{ width:100%; height:auto; display:block; } @media (hover:hover){ .csg .csg-item:hover{ transform:translateY(-4px); border-color:var(--ded-line-strong); box-shadow:0 20px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(250,204,21,0.12); } }