/* Self-hosted display + body fonts. ABSOLUTE urls (CSS inlined in ). * Google @import was stripped by Autoptimize → rendered Arial; self-host fixes. */ @font-face { font-family: 'Space Grotesk'; src: url('/wp-content/themes/betheme-child/da-skin/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('/wp-content/themes/betheme-child/da-skin/fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Self-hosted Nunito (from topserv) — matches the family name the blocks use. * ABSOLUTE urls: this CSS is inlined into , so relative paths would * resolve against the page URL, not the da-skin dir, and 404. */ @font-face { font-family: 'Nunito Variablefont Wght'; src: url('/wp-content/themes/betheme-child/da-skin/fonts/Nunito-VariableFont_wght.ttf') format('truetype'); font-weight: 200 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'Nunito Variablefont Wght'; src: url('/wp-content/themes/betheme-child/da-skin/fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 200 1000; font-style: italic; font-display: swap; } /* * denver-skin.css — denver-appliance conversion skin (layered over denver-base.css). * * Goal: simple, clear, selling. Light off-white sections + navy headings + * single orange CTA. Anti-slop principles from Leonxlnx/taste-skill, dialed * LOW on motion/variance, applied as scoped vanilla CSS (no React/Tailwind). * * SCOPE: all rules under .da-home. ENQUEUE ORDER: block CSS → denver-base.css * → denver-skin.css (this file wins). * * STATUS: starter. The section light-flip (navy→light backgrounds, text-color * inversions per block) + button hover/active polish are authored in Phase 5 * against the rendered draft page (restyling blind = waste). This file holds * only the changes safe to set without seeing the DOM. */ /* ---- Design tokens (scoped to homepage) ---- * --da-navy is THE band background used for every dark section (reviews, * promo, our-services, service-area, brands marquee, final CTA). Change it in * one place to retint every band. Set to Betheme's header/footer blue #202D4C * so every band matches the chrome. The near-black navy #001831 is kept only as * the dark stop of the promo gradient. */ .da-home { --da-navy: #202d4c; /* type system: Space Grotesk display (mechanical, on-theme) + Hanken body. */ --da-font-display: 'Space Grotesk', Arial, sans-serif; --da-font-body: 'Hanken Grotesk', Arial, sans-serif; /* topserv defines these in main.css; denver-base doesn't ship them, so blocks * referencing them lose their colour and inherit → invisible. Define here. */ --kütüp-library--dim-grey: #6e6e6e; --kütüp-library--dark-slate-grey: #264653; --kütüp-library--dark-slate-grey-x: #2e5261; } /* ---- Typography polish (taste: tight tracking, presence) ---- */ .da-home .standart-heading { letter-spacing: -0.01em; text-wrap: balance; } .da-home .standart-paragraph, .da-home .rich-text-block { text-wrap: pretty; } /* ---- Accent: single orange CTA, flatten the topserv gradient ---- * * topserv uses linear-gradient(237deg,#ffa31b,#ffc956) on buttons. * Flatten to one calmer orange (<80% sat) in Phase 5 once button classes * are confirmed on the rendered page. */ /* ========================================================================= * PHASE 5 — denver conversion skin (navy, lightweight, breathable, selling) * ========================================================================= */ /* 1. Section heading accent: kill the big gold Webflow bar → small navy tick. * Navy headers, not orange. */ .da-home .heading-line .line { background-color: var(--da-navy); width: 44px; height: 4px; margin-left: 0; border-radius: 999px; flex: 0 0 auto; } .da-home .standart-heading { color: var(--black-blue); letter-spacing: -0.01em; font-weight: 700; text-wrap: balance; } /* 2. Breathable rhythm — more air between sections, calmer headings. */ .da-home .standart-block-100 { margin-bottom: 72px; } .da-home .heading-line { grid-column-gap: 16px; margin-bottom: 28px; } /* 3. CTA buttons: single accent + tactile feedback (no transition:all). */ .da-home .button-primary, .da-home .shedule-button { transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .da-home .shedule-button { background-image: none; background-color: var(--orange-dark); color: #fff; } .da-home .button-primary, .da-home .shedule-button, .da-home .button-primary:hover, .da-home .shedule-button:hover { text-decoration: none; } .da-home .button-primary:active, .da-home .shedule-button:active { transform: scale(0.97); } /* ---- Pass 2: light/breathable section rhythm ---- */ /* why-choose: big kitchen photo bg (set via block backgroundUrl) + navy scrim * so the 6 advantage icons + text read in white. background-size/position come * from the block's inline style; we add the dark overlay + flip text/icons. */ .da-home .block-why-us { position: relative; background-color: var(--da-navy); background-size: cover; background-position: 50%; margin-top: 0; width: 100%; } .da-home .block-why-us .div-block-27 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 24, 49, 0.84), rgba(0, 24, 49, 0.92)); z-index: 0; } .da-home .block-why-us .why-us, .da-home .block-why-us .container-1230 { position: relative; z-index: 1; } .da-home .block-why-us .what-you-get-from-us, .da-home .block-why-us .advantages-main-page-txt, .da-home .block-why-us .why-us, .da-home .block-why-us .rich-text-block, .da-home .block-why-us p, .da-home .block-why-us h2 { color: #fff; } /* monochrome line icons → white over the dark scrim */ .da-home .block-why-us .image-icons-mob { filter: brightness(0) invert(1); } /* cta-banner: strong navy closing CTA, white text, orange button stays. */ .da-home .cta-banner-section { background: var(--da-navy); } .da-home .cta-banner-overlay { background-color: transparent; } .da-home .cta-banner-title, .da-home .cta-banner-description { color: #fff; } .da-home .cta-banner-button, .da-home .cta-banner-button:hover { text-decoration: none; } /* Breathable: section backgrounds stay FULL-WIDTH; only the inner container is * constrained + padded. (Padding on the section itself crops the bg.) */ .da-home .container-1230, .da-home .w-layout-blockcontainer { max-width: 1180px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* colored full-bleed bands span the viewport, content stays centered. */ .da-home .block-why-us, .da-home .cta-banner-section { padding-left: 0; padding-right: 0; } /* gallery placeholder circles: softer than flat grey. */ .da-home .gallery-item-image, .da-home .gallery-section .gallery-item img { background: #e7edf3; } /* ---- FULL-WIDTH: break out of Betheme's content cage ---- * Betheme wraps page content in .section_wrapper / .the_content_wrapper with * max-width 1220px (708px on tablet) + auto margins, so section backgrounds * only fill that column and the page bg shows on the sides. Neutralise it ONLY * on the homepage (scoped via :has(.da-home)) so sections go edge-to-edge like * topserv.us. Other Betheme pages are untouched. */ .section.the_content:has(.da-home), .section_wrapper:has(.da-home), .the_content_wrapper:has(.da-home) { max-width: none; width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* white base so transparent sections never show the page bg */ .da-home { background-color: #fff; } /* ========================================================================= * PHASE 6 — section reconciliation (stats / awards / reviews / service-area) * Mockup sources: denverappliance.co (stats), topserv (promo), Betheme * testimonials (reviews), coldpros (map). See homepage-section-spec.md. * ========================================================================= */ /* ---- sec3b: advantages stats (icon + orange number + label) ---- */ .da-home .da-stats-section { margin-top: 0; } .da-home .da-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .da-home .da-stat { text-align: center; padding: 24px 20px; border-left: 1px solid #e7edf3; } .da-home .da-stat:first-child { border-left: 0; } .da-home .da-stat-icon { width: 40px; height: 40px; margin: 0 auto 18px; color: var(--black-blue); } .da-home .da-stat-icon svg { width: 100%; height: 100%; display: block; } .da-home .da-stat-num { font-size: 56px; line-height: 1; font-weight: 800; color: var(--orange-medium); letter-spacing: -0.02em; } .da-home .da-stat-label { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--black-blue); } /* ---- sec2: awards = WHITE band, logos centered ---- */ .da-home section:has(.awards-wrapper) { background-color: #fff; } .da-home .awards-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px; } .da-home .awards-wrapper .awards-image { max-height: 76px; width: auto; } /* opt-in "web-only" badge: visible on desktop, hidden tablet + mobile. * Tag a badge by adding `web-only` to its CSS Class field (e.g. EPA). */ @media (max-width: 991px) { .da-home .awards-wrapper .web-only { display: none; } } /* ---- sec4: reviews = navy band, white text, single-photo slider ---- */ .da-home .reviews-photo-section { background-color: var(--da-navy); padding-top: 56px; padding-bottom: 56px; } .da-home .reviews-photo-section .standart-heading { color: #fff; } .da-home .reviews-photo-section .heading-line .line { background-color: var(--orange-medium); } /* review = card: subtle lighter panel + border so it lifts off the navy band */ .da-home .reviews-photo-card { max-width: 720px; margin: 0 auto; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 44px 48px; box-sizing: border-box; } .da-home .reviews-photo-section blockquote, .da-home .reviews-photo-section .author h5, .da-home .reviews-photo-section .author { color: #fff; } .da-home .reviews-photo-section .single-photo-img img { border-radius: 999px; } .da-home .reviews-photo-section .reviews-cta { text-align: center; margin-top: 56px; } /* ---- sec8: service-area block = navy band, map iframe + town chips ---- */ .da-home .service-area-section { background-color: var(--da-navy); padding-top: 56px; padding-bottom: 56px; } .da-home .service-area-section .standart-heading, .da-home .service-area-section .standart-heading strong, .da-home .service-area-section .standart-heading .text-span { color: #fff; } .da-home .service-area-section .heading-line .line { background-color: var(--orange-medium); } .da-home .service-area-section .service-area-grid { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 40px; row-gap: 10px; margin-bottom: 28px; } .da-home .service-area-section .location-item { align-items: flex-start; gap: 8px; } .da-home .service-area-section .location-item .code-embed-3 { color: var(--orange-medium); margin-top: 3px; } .da-home .service-area-section .location { color: #fff; margin: 0; } .da-home .service-area-map-embed { width: 100%; } .da-home .service-area-map-embed iframe { width: 100%; border: 0; border-radius: 12px; display: block; } /* M6 — mobile/tablet: crop the Google My-Maps chrome (title + share/fullscreen * bar) so only the map shows. Cross-origin safe: we clip the iframe BOX with an * overflow wrapper + negative margin, never reaching into Google's frame. The * embed itself is zoomed via the &ll=&z= attr on the page-2480 mapEmbedUrl. */ @media (max-width: 991px) { .da-home .service-area-section .service-area-map-embed { height: 480px; overflow: hidden; border-radius: 12px; } .da-home .service-area-section .service-area-map-embed iframe { height: 560px; /* 480 map + 80 cropped chrome (title + "made with" band) */ margin-top: -80px; border-radius: 0; } } /* Desktop: map LEFT, town list RIGHT (2-column flex row). Heading spans the * top. Mobile/tablet stay stacked (below). */ @media (min-width: 992px) { .da-home .service-area-section .container-1230 { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 48px; } .da-home .service-area-section .heading-line { flex: 0 0 100%; } .da-home .service-area-map-embed { order: 1; flex: 1 1 64%; min-width: 0; } .da-home .service-area-section .service-area-map-embed iframe { height: 540px; } .da-home .service-area-section .service-area-grid { order: 2; flex: 1 1 30%; grid-template-columns: 1fr; align-content: start; margin-bottom: 0; } } /* ---- responsive ---- */ @media (max-width: 991px) { .da-home .da-stats-grid { grid-template-columns: repeat(2, 1fr); } .da-home .da-stat:nth-child(3) { border-left: 0; } .da-home .da-stat:nth-child(odd) { border-left: 0; } .da-home .service-area-section .service-area-grid { grid-template-columns: repeat(2, auto); } } @media (max-width: 479px) { .da-home .da-stats-grid { grid-template-columns: 1fr 1fr; } .da-home .da-stat { border-left: 0; border-top: 0; padding: 20px 12px; } .da-home .da-stat:nth-child(2n) { border-left: 1px solid #e7edf3; } .da-home .da-stat:nth-child(n + 3) { border-top: 1px solid #e7edf3; } .da-home .da-stat-num { font-size: 42px; } .da-home .da-area-list { columns: 1; } } /* ---- sec7: team gallery — fix collapsed svg (both breakpoints) ---- */ .da-home .gallery-section .gallery-arrow svg { width: 24px; height: 24px; flex: 0 0 auto; } /* DESKTOP ONLY: navy 52px arrows aligned to avatar-circle center. * On mobile the block's own CSS puts white 44px arrows BELOW the row * (matches topserv) — do NOT override that. */ @media screen and (min-width: 768px) { .da-home .gallery-section .gallery-arrow { width: 52px; height: 52px; top: 90px; border-radius: 999px; background: #fff; color: #333; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; transform: translateY(-50%); transition: transform 0.15s ease, background-color 0.2s ease; } .da-home .gallery-section .gallery-arrow:hover { background: #ffb703; border-color: #ffb703; color: #fff; } .da-home .gallery-section .gallery-arrow:active { transform: translateY(-50%) scale(0.96); } } /* ---- sec4 reviews: control contrast on navy (arrows, dots). * Arrow glyph is a ::before pseudo, so colour it too or it stays the slider's * own dark default and vanishes on the navy band. Orange to match the brand. */ .da-home .reviews-photo-section .slider_prev, .da-home .reviews-photo-section .slider_next, .da-home .reviews-photo-section .slider_prev::before, .da-home .reviews-photo-section .slider_next::before { color: var(--orange-medium); opacity: 0.85; font-size: 26px; transition: color 0.2s ease, opacity 0.2s ease; } .da-home .reviews-photo-section .slider_prev:hover, .da-home .reviews-photo-section .slider_next:hover, .da-home .reviews-photo-section .slider_prev:hover::before, .da-home .reviews-photo-section .slider_next:hover::before { color: var(--orange-dark); opacity: 1; } /* decorative 3-dot divider above author */ .da-home .reviews-photo-section .hr_dots span { background-color: var(--orange-medium); opacity: 0.9; } /* slick photo-dots pager */ .da-home .reviews-photo-section .slick-dots li a img { border-radius: 999px; opacity: 0.45; border: 2px solid transparent; transition: opacity 0.2s ease, border-color 0.2s ease; } .da-home .reviews-photo-section .slick-dots li.slick-active a img, .da-home .reviews-photo-section .slick-dots li a img:hover { opacity: 1; border-color: var(--orange-medium); } /* ---- sec5b: $25 promo card — brand gradient navy -> footer blue (was grey). * Base ships a grey gradient on .div-block-33.container-1230.promotion-block; * same 3-class selector here wins on source order (skin inlined after base). */ .da-home .div-block-33.container-1230.promotion-block { background-image: linear-gradient(180deg, var(--da-navy), #001831); } /* cta-section card shares .div-block-33 with the promo card but lacks the * .promotion-block modifier, so it kept base's grey gradient. Give it the same * brand navy gradient. */ /* cta-section card shares .div-block-33 with the promo card but lacks the * .promotion-block modifier, so it kept base's grey gradient. Give it the brand * navy gradient + centre it (no .w-container to do so) + clip rounded corners. */ .da-home .cta-section .div-block-33.container-1230 { background-image: linear-gradient(180deg, var(--da-navy), #001831); margin-left: auto; margin-right: auto; overflow: hidden; } /* cta-section technician — must grow proportionally with the card height: when * description copy is added the man scales with the banner, not stay fixed * (Ksenia). The shared block ships the topserv ABSOLUTE approach; denver had * forced it in-flow, which deadlocks — a fixed-width column can't grow, an * auto-width column squeezes the CTAs. So: absolute column (out of flow → CTAs * keep their width) + height:100% (tracks the card) + the card reserves right * padding so copy never runs under the man. Source PNG is a 940² square (man * centred, alpha side-margins) → object-fit:cover crops the empty sides so he * fills the height. Shown only ≥992 (card too narrow for two columns below). */ @media (min-width: 768px) { .da-home .cta-section .div-block-33.container-1230 { min-height: 340px; } } @media (min-width: 992px) { .da-home .cta-section .div-block-33.container-1230 { position: relative; padding-right: 300px; overflow: hidden; } .da-home .cta-section .div-block-42 { position: absolute; right: 16px; top: 0; bottom: 0; width: 280px; height: 100%; overflow: hidden; } .da-home .cta-section .div-block-43 { display: none; } #Content .da-home .cta-section .image-contact-us { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; max-height: none; } } @media (min-width: 1200px) { .da-home .cta-section .div-block-33.container-1230 { padding-right: 380px; } .da-home .cta-section .div-block-42 { width: 340px; right: 24px; } } /* Hide the technician ≤991 — card too narrow for two columns; copy + CTAs use * the full width. */ @media (max-width: 991px) { .da-home .cta-section .div-block-42 { display: none; } } /* ---- sec5a: promotion-banner = FREE Service Call pill (no block CSS shipped) ---- */ .da-home .flex-block-11 { display: flex; align-items: center; gap: 40px; max-width: none; margin: 0 auto; background: #fafbfc; border: 1px solid #e3e8ef; border-radius: 22px; padding: 48px 64px; box-shadow: 0 10px 30px rgba(0, 24, 49, 0.06); } .da-home .flex-block-11 .paragraph-13 { margin: 0; font-size: 96px; line-height: 1; font-weight: 800; color: var(--orange-medium); flex: 0 0 auto; } .da-home .flex-block-11 .flex-block-12 { display: flex; flex-direction: column; gap: 6px; } .da-home .flex-block-11 .flex-block-12 p { margin: 0; } .da-home .flex-block-11 .bold-text-13 { font-size: 46px; line-height: 1.05; color: var(--black-blue); font-weight: 800; letter-spacing: -0.01em; } .da-home .flex-block-11 .bold-text-14 { font-size: 22px; color: var(--orange-medium); font-weight: 700; } @media (max-width: 767px) { .da-home .flex-block-11 { flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 28px; } .da-home .flex-block-11 .paragraph-13 { font-size: 64px; } .da-home .flex-block-11 .bold-text-13 { font-size: 32px; } .da-home .flex-block-11 .bold-text-14 { font-size: 18px; } /* FULL-BLEED bands on mobile: Betheme caps .section_wrapper with * `max-width:700px; padding:0 33px !important` at ≤767, caging colored bands * ~33px in on each side. !important can only be beaten by !important — match * it at higher specificity (`:has(.da-home)` = 2 classes vs Betheme's 1) so * the override stays scoped to the homepage and never leaks to other pages. */ .section_wrapper:has(.da-home), .the_content_wrapper:has(.da-home) { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* cta-banner content has no .container-1230 gutter — pad it so text doesn't * glue to the screen edges once the band goes full-bleed. */ .da-home .cta-banner-content { padding-left: 24px; padding-right: 24px; box-sizing: border-box; } } /* ---- CRP guard: no horizontal overflow shoving content right on load ---- */ .da-home { overflow-x: hidden; } /* reviews pager dots are .slider_pagination li a (bg dots, not photos) — orange */ .da-home .reviews-photo-section .slider_pagination li a { background: rgba(255, 183, 3, 0.4); } .da-home .reviews-photo-section .slider_pagination li.slick-active a { background: var(--orange-medium); } /* ========================================================================= * TASTE PASS — section headers: drop generic Webflow tick, use orange * uppercase kicker + large tight heading (clean typo-hierarchy, selling). * Kicker text injected by da_section_kickers() JS (heading→kicker map). * ========================================================================= */ .da-home .heading-line { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 26px; } .da-home .heading-line .line { display: none; } .da-home .da-kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-medium); margin: 0; } .da-home .heading-line .standart-heading { font-size: 42px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0; } /* navy sections: heading white, kicker stays orange */ .da-home .reviews-photo-section .da-kicker, .da-home .service-area-section .da-kicker { color: var(--orange-medium); } @media (max-width: 767px) { .da-home .heading-line .standart-heading { font-size: 32px; } } /* padded: remove Webflow gutter so promo pill spans the full content column * (.da-home .container-1230.padded = 3 classes, beats base 2-class rule) */ .da-home .container-1230.padded, .da-home .w-layout-blockcontainer.padded { padding-left: 0; padding-right: 0; } /* reviews pager: clean orange dots, hide photo/icon thumbnails (specificity, no !important) */ .da-home .reviews-photo-section .slider_pagination li a img, .da-home .reviews-photo-section .slider_pagination li a i, .da-home .reviews-photo-section .slider_pagination li a [class^="icon-"] { display: none; } .da-home .reviews-photo-section .slider_pagination li a { background: rgba(255, 183, 3, 0.4); } .da-home .reviews-photo-section .slider_pagination li.slick-active a { background: var(--orange-medium); } /* active dot inner :after pill (Betheme paints it navy #4c629b) → orange */ .da-home .reviews-photo-section .slider_pagination li.slick-active a:after, .da-home .reviews-photo-section .slider_pagination a.selected:after { background-color: var(--orange-medium); } /* ========================================================================= * sec6 — "Our Repair Service" image-card grid (images-grid block). * Navy band, white product cards (photos sit on white), label below. Taste: * calm hover (shadow + slight image zoom, no card jump per button feedback), * uniform 4:3 image area so mixed-aspect product shots line up. * ========================================================================= */ .da-home .images-grid-section { background: var(--da-navy); } .da-home .images-grid-section .standart-heading { color: #fff; } .da-home .images-grid { gap: 22px; } .da-home .images-grid-item, .da-home .images-grid-item:hover { text-decoration: none; } .da-home .images-grid-item { border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); transition: box-shadow 0.25s ease; } .da-home .images-grid-item:hover { transform: none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); } .da-home .images-grid-image-wrapper { flex: none; aspect-ratio: 4 / 3; min-height: 0; background: #fff; } .da-home .images-grid-image { width: 100%; height: 100% !important; /* beats Betheme #Content img{height:auto} (ID specificity) */ object-fit: cover; } .da-home .images-grid-content { flex: none; padding: 16px 18px; align-items: center; } .da-home .images-grid-title { font-size: 17px; font-weight: 600; color: var(--black-blue); text-align: center; } /* promo-area rhythm: the FREE banner carried a 72px bottom margin (gap to the * $25 promo was bigger than to the navy band above it) and the $25 promo * wrapper had zero padding (its pill sat flush against the navy grid below). * Normalise both to the same 64/64 every other section uses, zero margin, so * all seams read evenly. */ .da-home .div-block-36 { padding-top: 0; padding-bottom: 64px; } .da-home .images-grid-section { padding-top: 64px; padding-bottom: 64px; } /* M8 — mobile (≤767): "Our Repair Service" cards → simple service link list. * Hide the photos, stack each card (already an to its page) as a bordered * rectangle. Navy band stays; light outline + white label = site palette. */ @media (max-width: 767px) { .da-home .images-grid-section .images-grid { grid-template-columns: 1fr; gap: 12px; width: 100%; } .da-home .images-grid-section .images-grid-item { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 8px; box-shadow: none; } .da-home .images-grid-section .images-grid-item:active { border-color: var(--orange-medium); } .da-home .images-grid-section .images-grid-image-wrapper { display: none; } .da-home .images-grid-section .images-grid-content { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; } .da-home .images-grid-section .images-grid-title { margin: 0; color: #fff; font-size: 16px; } /* M9 — chevron affordance: signal each row links to its service page. */ .da-home .images-grid-section .images-grid-content::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 1.5px solid rgba(255, 255, 255, 0.7); border-bottom: 1.5px solid rgba(255, 255, 255, 0.7); transform: rotate(-45deg); } .da-home .images-grid-section .images-grid-item:active .images-grid-content::after { border-color: var(--orange-medium); } .da-home .images-grid-section .images-grid-item-description { display: none; } } /* ========================================================================= * sec9 — "Brands We Serve" marquee (brand-marquee block). Navy band, white * heading; logos ride on white chips (chip styling ships with the block CSS). * ========================================================================= */ .da-home .brand-marquee-section { background: var(--da-navy); padding-top: 64px; padding-bottom: 64px; } .da-home .brand-marquee-section .standart-heading { color: #fff; } /* ========================================================================= * UNIFY vertical rhythm — every section identical 64/64, zero margins. * 2-class selectors placed LAST so they win on source order (no !important). * ========================================================================= */ .da-home .hero-section, .da-home .standart-block-100, .da-home .standart-block-100-100, .da-home .block-why-us, .da-home .gallery-section, .da-home .brands, .da-home .faq-section, .da-home .cta-banner-section { margin-top: 0; margin-bottom: 0; padding-top: 64px; padding-bottom: 64px; } /* ========================================================================= * MOBILE fixes (≤767): reviews fit viewport, kill floating call icon. * (Codex dropped some @media from denver-base during extraction; these * restore mobile behaviour for the navy reviews band + global float btn.) * ========================================================================= */ @media screen and (max-width: 767px) { /* floating call icon — remove on mobile, keep only the number button. * JS sets inline display:flex on it, so only !important can hide it. */ #call-to-us-btn-popup { display: none !important; } /* reviews slider: fit viewport. NOT .slick-track — slick sets its width * inline (slideCount * slideWidth); capping it stacks every slide → blank. */ .da-home .reviews-photo-section .reviews-photo-card, .da-home .reviews-photo-section .testimonials_slider, .da-home .reviews-photo-section .testimonials_slider_ul, .da-home .reviews-photo-section .slick-list { max-width: 100%; } .da-home .reviews-photo-section blockquote { font-size: 16px; line-height: 1.6; padding: 0 6px; } /* Betheme pads .bq_wrapper 30px 40px 10px + margin 0 6% — way too tight a * column on mobile. Slim it so the quote uses the card width. */ .da-home .reviews-photo-section .testimonials_slider_ul li .bq_wrapper { padding: 16px 8px 8px; margin: 0 0 12px; } .da-home .reviews-photo-section .single-photo-img img { width: 72px; height: 72px; } /* tighter card padding on mobile so the quote isn't cramped */ .da-home .reviews-photo-card { padding: 28px 18px; border-radius: 16px; } } /* ========================================================================= * hero-full-screen block (.hero-fs) — dedicated full-bleed hero. Reuses the * inner layout classes (grid / flex-left / home-img-hero / image-14 / chip / * banner-overflow) for the content look, but owns the SECTION via .hero-fs so * the shared hero-client block (.hero-section.home-hero) is never affected. * Mobile = stacked (inherits the inner classes' base rules); desktop ≥992 = * the image becomes a full-bleed background, content sits left over a scrim. * ========================================================================= */ .da-home .hero-fs { display: flex; flex-flow: column; justify-content: center; align-items: center; row-gap: 28px; } @media (min-width: 992px) { .da-home .hero-fs { position: relative; min-height: 560px; padding: 48px 0; row-gap: 0; overflow: hidden; } /* image layer fills the whole section (anchors to .hero-fs, not .grid — so * keep .grid unpositioned or the bg would clip to the 1230 container). */ .da-home .hero-fs .home-img-hero { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; z-index: 0; } .da-home .hero-fs .image-14 { object-position: right center; } .da-home .hero-fs::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0) 56% ); pointer-events: none; } .da-home .hero-fs .grid { display: grid; grid-template-columns: minmax(0, 600px) 1fr; justify-items: start; align-items: center; width: 100%; line-height: normal; } .da-home .hero-fs .flex-left { position: relative; z-index: 2; } /* $25 badge over the technicians, shifted in from the right edge (L2) */ .da-home .hero-fs .banner-overflow { left: auto; right: 10%; bottom: 20%; transform: none; width: auto; max-width: 320px; margin-bottom: 0; padding: 18px 32px; } /* badge text is 80/30px in base — too big for the full-bleed corner at * 992–1200; scale it fluidly so it never collides with the left content. */ .da-home .hero-fs .banner-overflow .paragraph-14 { font-size: clamp(34px, 3.2vw, 58px); } .da-home .hero-fs .banner-overflow .paragraph-15 { font-size: clamp(15px, 1.3vw, 24px); } } /* tablet + mobile (<992): hero image full-bleed, square corners (drop radius-25). * The .grid container is viewport-wide with 20px side padding; cancel exactly * that padding so the image reaches both edges — no 100vw (avoids the scrollbar * gap). width:auto + negative margins expand the box past its grid cell. */ @media (max-width: 991px) { .da-home .hero-fs .home-img-hero { width: 100dvw; margin-left: -20px; margin-right: -20px; border-radius: 0; } .da-home .image-14 { object-position: 50% 30%; object-fit: cover; } } /* W2: trust signals = flat blue line icons, no orange pill (cold-pros look). * Web + mobile chip copies; hero-only, so scope is .hero-fs. */ .da-home .hero-fs .chip .circle { display: none; } .da-home .hero-fs .chip .hero-icon { /* colorize black PNG icons → --da-navy (#202d4c), the section-band blue */ filter: brightness(0) saturate(100%) invert(14%) sepia(30%) saturate(1700%) hue-rotate(196deg) brightness(93%) contrast(92%); } .da-home .hero-fs .standart-p { color: var(--black); } /* chips overlay a busy photo — soft frosted backing keeps each legible, * esp. the center chip over the counter. Web overlay only; mobile is in-flow. */ @media (min-width: 992px) { .da-home .hero-fs .flex-block-3.web { justify-content: flex-start; column-gap: 16px; align-items: stretch; } .da-home .hero-fs .flex-block-3.web .chip.scale-on-hover { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 14px; padding: 16px 14px; flex: 0 0 auto; width: 168px; justify-content: center; } .da-home .hero-fs .flex-block-3.web .chip .hero-icon { height: 42px; width: auto; } } /* ============================ TYPE SYSTEM (theme-wide) ==================== * Body token everywhere, display token on headings + display numbers. * The generated base.css sets `font-family: Nunito` via `.da-home *` AND a * per-class rule (0,2,0) on every text class — so the universal below replaces * the base universal (icon fonts keep their own higher-specificity rules, * exactly as under base), and the body-class list re-asserts on the (0,2,0) * text rules. The display list (equal specificity, later source) then claims * the headings. PREVIEW via Google @import at file top — self-host before * go-live to kill FOUC. Fonts are tokens: --da-font-display / --da-font-body. */ .da-home, .da-home * { font-family: var(--da-font-body); } .da-home .button-primary, .da-home .shedule-button, .da-home .text-span, .da-home .advantages-main-page-txt, .da-home .paragraph-2, .da-home .paragraph-18, .da-home .standart-p, .da-home .rich-text-block, .da-home .rich-text-block-2, .da-home .location, .da-home .kutup-features-title, .da-home .div-block-30 { font-family: var(--da-font-body); } .da-home .hero-title, .da-home .hero-title *, .da-home .bold-text-15, .da-home .text-span-6, .da-home .standart-heading, .da-home .heading-line, .da-home .what-you-get-from-us, .da-home .paragraph-3, .da-home .paragraph-4, .da-home .paragraph-17, .da-home .paragraph-14, .da-home .paragraph-14 *, .da-home .paragraph-15, .da-home .text-span-5.banner-span { font-family: var(--da-font-display); letter-spacing: -0.01em; } /* generic Webflow `h3{letter-spacing:2px}` reads wrong with the Space Grotesk * display font — drop the tracking on every homepage h3, all widths. */ .da-home h3 { letter-spacing: normal; } /* W4 — Why-Choose rebuilt as cold-pros-style feature cards: light band, calm * white cards (drop the block's orange hover flip), brand-blue icons. */ .da-home .feature-cards-section { background: #f4f7fb; padding-top: 64px; padding-bottom: 64px; margin-bottom: 0; } .da-home .feature-cards-section .feature-cards-description p { color: var(--kütüp-library--dim-grey); } .da-home .feature-card { border-color: #e2e9f1; box-shadow: 0 1px 2px rgba(0, 24, 49, 0.04); } .da-home .feature-card::before { display: none; } .da-home .feature-card:hover { transform: translateY(-4px); border-color: var(--blue-medium); box-shadow: 0 12px 28px rgba(0, 24, 49, 0.1); } .da-home .feature-card:hover .feature-card-title { color: var(--black-blue); } .da-home .feature-card:hover .feature-card-text { color: var(--kütüp-library--dim-grey); } .da-home .feature-card-icon img { width: 48px; height: 48px; /* colorize the line icons → --da-navy (#202d4c), same recipe as hero trust icons */ filter: brightness(0) saturate(100%) invert(14%) sepia(30%) saturate(1700%) hue-rotate(196deg) brightness(93%) contrast(92%); }