/* Longhorn CR — post-export fixes. * * Loaded after Duda's own stylesheets so these win on tie-break. * Keep this file small and reasoned; it is not a place for redesign. */ /* --------------------------------------------------------------------------- * Sticky header readability. * * The header is transparent over the hero, and Duda's stylesheet already * defines a solid scrolled state (background-color: rgba(12,36,48,1) on * .scroll-responder_set). Two things stopped that working in the export: * Duda's runtime never adds the class (Scripts/sticky-header.js does that now), * and its own cascade resolved the header background to `transparent` anyway. * * Restated here at the end of the cascade so white nav text always sits on the * navy bar once the page scrolls. Colour is Duda's own scrolled-header navy. * --------------------------------------------------------------------------- */ #dm .dmInner div.dmHeader.scroll-responder_set, #dm .dmInner div.dmHeader.u_hcontainer.scroll-responder_set, #dm .dmInner div.dmHeader.p_hfcontainer.scroll-responder_set, #dm .dmInner div.dmHeader.scroll-responder_set#hcontainer, #dm .dmInner div.dmHeader.p_hfcontainer.u_hcontainer.scroll-responder_set#hcontainer { background-color: rgba(12, 36, 48, 1) !important; background-image: none !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important; } /* Duda already transitions header properties; make sure the colour change is part of that rather than an abrupt swap. */ #dm .dmInner div.dmHeader { transition: background-color 0.25s ease, box-shadow 0.25s ease; } /* --------------------------------------------------------------------------- * Sitewide invisible content. * * Every page stylesheet (57 of them) hides animated elements up front and * relies on Duda's scroll-reveal runtime to unhide them: * * .dmDesktopBody:not(.editGrid) [data-anim-extended] { visibility: hidden } * .dmDesktopBody:not(.editGrid) .dmNewParagraph[...] { visibility: hidden !important } * #dmRoot:not(.editGrid) .flex-element [data-anim-extended] { visibility: hidden } * * That runtime never initializes in a static export, so those elements stayed * invisible forever. `visibility` inherits, so hiding one animated container * blanked out everything inside it — whole sections, including the photo * galleries, rendered as empty space at full height. * * `#dmRoot` is the , so prefixing with it outranks Duda's class-only * selectors even where they use !important. The content simply appears rather * than animating in, which is the correct trade for a static site. * --------------------------------------------------------------------------- */ #dmRoot [data-anim-extended], #dmRoot [data-anim-desktop], #dmRoot [data-anim-tablet], #dmRoot [data-anim-mobile], #dmRoot .dmNewParagraph[data-anim-extended], #dmRoot .dmNewParagraph[data-anim-desktop], #dmRoot .flex-element [data-anim-extended], #dmRoot .animated, #dmRoot .photoGalleryThumbs, #dmRoot .thumbnailInnerWrapper, #dmRoot .image-container { visibility: visible !important; opacity: 1 !important; } /* The gallery keeps its thumbnails hidden until its runtime adds `.ready` to the holder. Nothing ever adds it, so neutralise that gate too. */ #dmRoot .dmPhotoGallery .dmPhotoGalleryHolder:not(.ready) li.photoGalleryThumbs, #dmRoot .dmPhotoGallery:not(.dmFacebookGallery) .dmPhotoGalleryHolder:not(.ready) li.photoGalleryThumbs { visibility: visible !important; display: inline-block !important; } /* --------------------------------------------------------------------------- * Recent work map (replaces Duda's dead cities-map-widget shell). * --------------------------------------------------------------------------- */ /* The map's own height is a variable because the loading/error overlay has to cover the canvas and ONLY the canvas. It used to be `inset: 0`, which was the same thing while the canvas was the host's only child — but the service-area panel now stacks underneath the map on narrow screens, and a full-host overlay would paint a grey block straight over it while tiles load. */ .vg-map { position: relative; width: 100%; --vg-map-h: 480px; } .vg-map__canvas { width: 100%; height: var(--vg-map-h); min-height: 320px; border-radius: 4px; background: #e8edef; z-index: 1; } .vg-map__status { position: absolute; top: 0; left: 0; right: 0; height: var(--vg-map-h); z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #e8edef; border-radius: 4px; color: #5b6b73; font-size: 15px; text-align: center; padding: 20px; } .vg-map.is-ready .vg-map__status { display: none; } .vg-map__spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(12, 36, 48, .18); border-top-color: #f26554; animation: vg-map-spin .9s linear infinite; } @keyframes vg-map-spin { to { transform: rotate(360deg); } } .vg-map__err { display: none; } .vg-map.is-error .vg-map__spinner, .vg-map.is-error .vg-map__loading { display: none; } .vg-map.is-error .vg-map__err { display: block; } .vg-map .leaflet-container { font: inherit; } @media (max-width: 700px) { .vg-map { --vg-map-h: 380px; } } /* --------------------------------------------------------------------------- * Service-area panel. * * The map is a 2.42:1 box showing data that is very nearly square, so once * Leaflet fits the bounds the seven states render in a ~510px column dead * centre and roughly three quarters of the map's width is blank tile. This * panel puts the right-hand share of that to work: the recent-city count as a * real stat, the seven city pages as links, and the one action the map makes a * visitor want — "is my building covered?". * * Above 1100px it overlays the map's right edge. Scripts/vg-service-map.js * matches this breakpoint and refits the map with `paddingBottomRight`, so the * markers are laid out inside the space the panel does NOT cover — that is why * no pin ever ends up underneath it, at any width, rather than it happening to * clear on one screen size. * * Below 1100px the map has no spare width to give, so the panel leaves the * overlay entirely and becomes a normal block underneath. * --------------------------------------------------------------------------- */ .vg-map__panel { position: relative; z-index: 4; box-sizing: border-box; background: rgba(12, 36, 48, .96); color: #fff; padding: 22px 24px 24px; border-radius: 4px; } .vg-map__eyebrow { margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f26554; } .vg-map__stat { margin: 0 0 18px; line-height: 1.1; } /* No number until the data lands. If the feed fails the map shows its error and this stays hidden — but the city links and the CTA below are still worth having, so the panel itself never hides. */ .vg-map:not(.is-ready) .vg-map__stat { display: none; } .vg-map__stat-num { display: block; font-size: 46px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .vg-map__stat-label { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .vg-map__cities { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; } .vg-map__cities li { margin: 0; } .vg-map__cities a { display: inline-block; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .9) !important; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .vg-map__cities a:hover, .vg-map__cities a:focus-visible { background: #f26554; border-color: #f26554; color: #fff !important; } .vg-map__ask { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); } .vg-map__ask a { color: #fff !important; text-decoration: underline !important; text-underline-offset: 2px; } .vg-map__ask a:hover, .vg-map__ask a:focus-visible { color: #f26554 !important; } .vg-map__cta { display: block; width: 100%; box-sizing: border-box; padding: 13px 18px; background: #f26554; border-radius: 3px; color: #fff !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } .vg-map__cta:hover, .vg-map__cta:focus-visible { background: #d9503f; transform: translateY(-1px); } .vg-map__panel a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* --- overlaid on the map's right edge --- */ @media (min-width: 1101px) { .vg-map__panel { position: absolute; z-index: 4; top: 20px; right: 20px; bottom: 20px; width: 300px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(8, 25, 34, .32); } /* Push the button to the panel's foot so the block reads top-weighted regardless of how many city chips wrap. */ .vg-map__cta { margin-top: auto; } } /* --- below the map --- Three bands reading left to right: the claim, the proof, the action. Stacking it as two columns left the button marooned at the foot of a tall left column with dead space beside it, so the CTA gets its own band and everything centres against the tallest one. */ @media (max-width: 1100px) { .vg-map__panel { margin-top: 14px; padding: 24px 26px; } @supports (display: grid) { .vg-map__panel { display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) auto; grid-template-areas: "eyebrow cities cta" "stat cities cta" "ask cities cta"; column-gap: 34px; align-content: center; } .vg-map__eyebrow { grid-area: eyebrow; margin-bottom: 10px; } .vg-map__stat { grid-area: stat; margin-bottom: 12px; } .vg-map__ask { grid-area: ask; margin-bottom: 0; } .vg-map__cities { grid-area: cities; align-content: center; margin-bottom: 0; } .vg-map__cta { grid-area: cta; align-self: center; width: auto; white-space: nowrap; padding-left: 26px; padding-right: 26px; } .vg-map__stat-num { font-size: 38px; } } } /* Between the two — enough room for the bar, not enough for the button beside it without squeezing the chips. */ @media (max-width: 900px) and (min-width: 701px) { @supports (display: grid) { .vg-map__panel { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); grid-template-areas: "eyebrow cities" "stat cities" "ask cities" "cta cta"; row-gap: 4px; } .vg-map__cta { margin-top: 18px; align-self: stretch; } } } @media (max-width: 700px) { .vg-map__panel { padding: 20px 18px 22px; } @supports (display: grid) { .vg-map__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "stat" "cities" "ask" "cta"; } .vg-map__cta { width: 100%; } .vg-map__cities { margin-bottom: 18px; } } .vg-map__stat-num { font-size: 40px; } } @media (prefers-reduced-motion: reduce) { .vg-map__cities a, .vg-map__cta { transition: none; } .vg-map__cta:hover { transform: none; } } /* --------------------------------------------------------------------------- * Design credit hover — double underline draw. * Two rules sit under the text: the lower one draws left-to-right, the upper * one follows right-to-left on a slight delay, so they cross past each other. * --------------------------------------------------------------------------- */ #dmRoot a.vg-credit { position: relative; display: inline-block; padding-bottom: 6px; color: var(--color_8, #bababa) !important; text-decoration: none !important; transition: color .3s ease; } #dmRoot a.vg-credit::before, #dmRoot a.vg-credit::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: #f26554; transform: scaleX(0); transition: transform .38s cubic-bezier(.65, 0, .35, 1); } /* lower rule: draws from the left */ #dmRoot a.vg-credit::before { bottom: 0; transform-origin: left; } /* upper rule: draws back from the right, a beat later */ #dmRoot a.vg-credit::after { bottom: 4px; transform-origin: right; transition-delay: .09s; } #dmRoot a.vg-credit:hover, #dmRoot a.vg-credit:focus-visible { color: #fff !important; } #dmRoot a.vg-credit:hover::before, #dmRoot a.vg-credit:hover::after, #dmRoot a.vg-credit:focus-visible::before, #dmRoot a.vg-credit:focus-visible::after { transform: scaleX(1); } /* on the way out, reverse each rule back the way it came */ #dmRoot a.vg-credit::before { transform-origin: right; } #dmRoot a.vg-credit::after { transform-origin: left; } #dmRoot a.vg-credit:hover::before, #dmRoot a.vg-credit:focus-visible::before { transform-origin: left; } #dmRoot a.vg-credit:hover::after, #dmRoot a.vg-credit:focus-visible::after { transform-origin: right; } @media (prefers-reduced-motion: reduce) { #dmRoot a.vg-credit, #dmRoot a.vg-credit::before, #dmRoot a.vg-credit::after { transition: none; } } /* --------------------------------------------------------------------------- * Map attribution. * OpenStreetMap's licence (ODbL) requires visible credit, so this is made * small and quiet rather than removed — deleting it outright would put the * client out of compliance with the tile licence. * --------------------------------------------------------------------------- */ .vg-map .leaflet-control-attribution { font-size: 9px !important; line-height: 1.3 !important; padding: 1px 5px !important; background: rgba(255, 255, 255, .62) !important; color: #8a949a !important; border-radius: 3px 0 0 0; } .vg-map .leaflet-control-attribution a { color: #8a949a !important; text-decoration: none !important; } .vg-map .leaflet-control-attribution:hover { background: rgba(255, 255, 255, .95) !important; } /* --------------------------------------------------------------------------- * Service-area (city) pages. * These were recovered from the live Duda site and their sections run flush to * the viewport edge, unlike the exported pages. Restore a gutter, and make the * breadcrumb trail behave like the links it always looked like. * --------------------------------------------------------------------------- */ #dmRoot[data-page-alias^="city-roofing-pages"] .dmInner .dmRespRow > .dmRespColsWrapper, #dmRoot[data-page-alias^="city-roofing-pages"] .dmInner > .dmRespRow { padding-left: 28px; padding-right: 28px; box-sizing: border-box; } /* Full-bleed bands (hero, photo strips, coloured sections) keep their edge. */ #dmRoot[data-page-alias^="city-roofing-pages"] .dmInner .dmRespRow[data-full-bleed] > .dmRespColsWrapper, #dmRoot[data-page-alias^="city-roofing-pages"] .dmInner .dmPhotoGallery .dmRespColsWrapper { padding-left: 0; padding-right: 0; } @media (max-width: 700px) { #dmRoot[data-page-alias^="city-roofing-pages"] .dmInner .dmRespRow > .dmRespColsWrapper, #dmRoot[data-page-alias^="city-roofing-pages"] .dmInner > .dmRespRow { padding-left: 16px; padding-right: 16px; } } /* Breadcrumb links — inherit the original styling, gain link affordance. */ #dmRoot a.vg-crumb { text-decoration: none !important; } #dmRoot a.vg-crumb strong { transition: color .2s ease; } #dmRoot a.vg-crumb:hover strong, #dmRoot a.vg-crumb:focus-visible strong { color: #f26554 !important; text-decoration: underline; }