/* Theme Name: CityWeb Pro Theme URI: https://cityweb-design.com/ Description: CityWeb's design system for local service businesses. Child theme of Hello Elementor. Design tokens plus drop-on utility classes for hero slideshows, count-up stats, sticky service cards and corner notches. Scroll reveals (cw-fly-*) for any widget. Page banner for plain and Elementor pages (Customizer > CityWeb Pro and the Page Banner box on each page). Built to work with free Elementor and the CityWeb plugin suite — no Elementor Pro required. Author: CityWeb Author URI: https://cityweb-design.com/ Template: hello-elementor Version: 1.5.1 Text Domain: cityweb-pro */ /* ============================================================ 1. TOKENS — override these per client in Elementor > Site Settings or by re-declaring :root in Additional CSS ============================================================ */ :root{ --cw-primary:#1b3a5f; /* headings, footer, primary buttons */ --cw-primary-d:#15304f; /* hover */ --cw-accent:#4a90e2; /* eyebrows, icon circles */ --cw-accent-lt:#6ba7ea; /* 1.5.1: accent for TEXT on light backgrounds (eyebrows, links, accent buttons). #4a90e2 is only ~3:1 on white; this is ~5:1 (WCAG AA needs 4.5:1). */ --cw-accent-text:color-mix(in srgb,var(--cw-accent) 72%,#000); --cw-gold:#f5a623; /* stars, ratings */ --cw-ink:#1d2026; /* body copy on light */ --cw-muted:#5c6673; --cw-line:#e4e9f0; --cw-bg:#ffffff; --cw-bg-alt:#f4f7fb; --cw-surface:#ffffff; /* 1.3.0 panels, cards, header tabs, menus */ --cw-footer-text:#c3d2e2; /* 1.3.0 footer body + links */ --cw-footer-head:#ffffff; /* 1.3.0 footer headings + link hover */ --cw-banner-glow:rgba(74,144,226,.32); /* page banner (section 15) */ --cw-banner-text:#ffffff; --cw-banner-eyebrow:#9cc4f0; --cw-banner-font:var(--cw-font); --cw-font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --cw-radius:22px; --cw-radius-lg:30px; --cw-wrap:1220px; /* 8px spacing scale */ --cw-s1:8px; --cw-s2:16px; --cw-s3:24px; --cw-s4:32px; --cw-s5:48px; --cw-s6:64px; --cw-s7:96px; } /* ============================================================ 2. BASE ============================================================ */ body{ font-family:var(--cw-font); font-size:16.5px; line-height:1.7; color:var(--cw-muted); background:var(--cw-bg); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6{ font-family:var(--cw-font); font-weight:800; color:var(--cw-primary); line-height:1.15; letter-spacing:-.02em; } h1{font-size:clamp(2.3rem,5.2vw,3.85rem)} h2{font-size:clamp(1.9rem,3.9vw,3rem)} h3{font-size:1.45rem} img{max-width:100%;height:auto} :focus-visible{outline:3px solid var(--cw-accent);outline-offset:3px;border-radius:6px} /* scrolling to an element (anchors, scrollIntoView) leaves room for the fixed header */ html{scroll-padding-top:112px} @media(max-width:620px){html{scroll-padding-top:82px}} /* Hello Elementor ships pink (#c36) links and buttons — map them to tokens */ a{color:var(--cw-accent-text)} a:hover,a:active{color:var(--cw-primary)} button,[type=button],[type=submit]{border-color:var(--cw-accent-text);color:var(--cw-accent-text)} button:hover,button:focus,[type=button]:hover,[type=button]:focus, [type=submit]:hover,[type=submit]:focus{background-color:var(--cw-accent-text);border-color:var(--cw-accent-text);color:#fff} /* ============================================================ 3. BUTTONS — add .cw-btn to an Elementor button, or use the Elementor button and let these cascade ============================================================ */ .cw-btn, .elementor-button{ display:inline-flex; /* must not be inline — a wrapped inline draws its background once per line box */ align-items:center; justify-content:center; gap:.6rem; font-family:var(--cw-font); font-weight:700; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; text-align:center; text-decoration:none; border-radius:999px; padding:1.05rem 1.9rem; background:var(--cw-primary); color:#fff; border:2px solid var(--cw-primary); transition:background .16s,border-color .16s,color .16s; } .cw-btn svg{flex:none} @media(max-width:620px){ .cw-btn{font-size:.76rem;padding:.95rem 1.4rem;width:100%} } .cw-btn:hover,.elementor-button:hover{ background:var(--cw-primary-d);border-color:var(--cw-primary-d);color:#fff; } .cw-btn--ghost{background:transparent;color:var(--cw-primary)} .cw-btn--ghost:hover{background:var(--cw-primary);color:#fff} .cw-btn--accent{background:var(--cw-accent-text);border-color:var(--cw-accent-text)} .cw-btn--gold{background:var(--cw-gold);border-color:var(--cw-gold);color:var(--cw-ink)} /* ============================================================ 4. EYEBROW — small labelled kicker above a heading Our services ============================================================ */ .cw-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:.8rem;font-weight:700;color:var(--cw-accent-text); } .cw-eyebrow::before{ content:"";width:13px;height:13px;border-radius:50%; border:3px solid var(--cw-accent);flex:none; } /* ============================================================ 5. HERO SLIDESHOW Put 2–4 images in a container, give the CONTAINER the class cw-slides. Images crossfade with a slow zoom. No JS. Set the container to position:absolute, full bleed, behind content. Timing assumes 3 images; see cw-slides--2 / --4 below. ============================================================ */ .cw-slides{position:absolute;inset:0;z-index:0;overflow:hidden} .cw-slides img, .cw-slides .elementor-widget-image{ position:absolute;inset:0;width:100%;height:100%; } .cw-slides img{ object-fit:cover;opacity:0; filter:brightness(1.12) saturate(1.05); } /* 1.1.4 — the first slide shows straight away and holds still while the page loads; the other slides stay hidden (and, with loading="lazy", aren't downloaded) until cityweb.js adds .cw-run on the first scroll/tap/mouse move (1.4.5: no timer). Faster first paint, and PageSpeed no longer measures a page that never stops changing. */ .cw-slides img:first-of-type{opacity:1;z-index:3} .cw-slides:not(.cw-run) img:not(:first-of-type){display:none} .cw-slides.cw-run img{will-change:opacity,transform;animation:cwSlide 12s infinite} /* Delays start the cycle mid-way through slide 1's visible phase so it doesn't blink. */ .cw-slides.cw-run img:nth-of-type(1){animation-delay:-1s;z-index:3} .cw-slides.cw-run img:nth-of-type(2){animation-delay:3s;z-index:2} .cw-slides.cw-run img:nth-of-type(3){animation-delay:7s;z-index:1} .cw-slides--2.cw-run img{animation-duration:9s} .cw-slides--2.cw-run img:nth-of-type(1){animation-delay:-.6s} .cw-slides--2.cw-run img:nth-of-type(2){animation-delay:3.9s} .cw-slides--4.cw-run img{animation-duration:16s} .cw-slides--4.cw-run img:nth-of-type(2){animation-delay:3s} .cw-slides--4.cw-run img:nth-of-type(3){animation-delay:7s} .cw-slides--4.cw-run img:nth-of-type(4){animation-delay:11s;z-index:0} @keyframes cwSlide{ 0% {opacity:0;transform:scale(1.00)} 3% {opacity:1} 36% {opacity:1} 44% {opacity:0;transform:scale(1.10)} 100% {opacity:0;transform:scale(1.10)} } /* reduced motion: keep the crossfade, drop the zoom */ @media (prefers-reduced-motion:reduce){ .cw-slides.cw-run img{animation-name:cwSlideFade} } @keyframes cwSlideFade{ 0%{opacity:0}3%{opacity:1}36%{opacity:1}44%{opacity:0}100%{opacity:0} } /* Dark wash so white text stays readable over photography. Add cw-hero to the hero container. */ .cw-hero{position:relative;overflow:hidden;background:var(--cw-primary)} .cw-hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg, rgba(11,24,42,.86) 0%,rgba(11,24,42,.62) 42%, rgba(11,24,42,.30) 72%,rgba(11,24,42,.22) 100%); } .cw-hero > .e-con-inner, .cw-hero > .elementor-container{position:relative;z-index:2} .cw-hero--inset{margin:0 18px;border-radius:var(--cw-radius-lg)} @media(max-width:940px){.cw-hero--inset{margin:0 12px;border-radius:24px}} /* ============================================================ 6. COUNT-UP STAT 0 Optional: data-duration (ms), data-suffix, data-prefix ============================================================ */ .cw-count{font-variant-numeric:tabular-nums} /* ============================================================ 7. STICKY STACKING CARDS Add cw-stack to each card in a sequence. They stick at increasing offsets so later cards slide over earlier ones. ============================================================ */ .cw-stack{position:sticky} .cw-stack:nth-of-type(1){top:100px} .cw-stack:nth-of-type(2){top:200px} .cw-stack:nth-of-type(3){top:300px} .cw-stack:nth-of-type(4){top:400px} .cw-stack:nth-of-type(5){top:500px} @media(max-width:940px){ .cw-stack:nth-of-type(1){top:86px} .cw-stack:nth-of-type(2){top:132px} .cw-stack:nth-of-type(3){top:178px} .cw-stack:nth-of-type(4){top:224px} .cw-stack:nth-of-type(5){top:270px} } /* sticky breaks inside an ancestor with overflow:hidden */ .cw-stack-parent{overflow:visible !important} /* ============================================================ 8. CORNER NOTCHES White panel tucked into a corner of a dark hero. ============================================================ */ .cw-notch{background:var(--cw-surface);padding:18px 30px 18px 22px} .cw-notch--tl{border-radius:0 var(--cw-radius-lg) var(--cw-radius-lg) 0} .cw-notch--tr{border-radius:var(--cw-radius-lg) 0 0 var(--cw-radius-lg)} .cw-notch--bl{position:absolute;left:0;bottom:0;z-index:4; border-radius:0 var(--cw-radius-lg) 0 var(--cw-radius-lg)} .cw-notch--br{position:absolute;right:0;bottom:0;z-index:4; border-radius:var(--cw-radius-lg) 0 var(--cw-radius-lg) 0} @media(max-width:620px){ .cw-notch{padding:12px 20px 12px 14px} .cw-notch--bl,.cw-notch--br{border-radius:0 24px 0 24px} } /* ============================================================ 9. HEADER — transparent over a hero, solid once scrolled. Easiest: Shortcode widget in the CityWeb Templates header: [cw_header menu="Menu" logo="URL" cta="Text" cta_url="/page/"] It renders the real WordPress menu (dropdowns included). Hand-written markup (.cw-nav > a) still works too. The theme JS adds .is-stuck past 40px of scroll. ============================================================ */ .cw-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent; transition:background .2s ease,box-shadow .2s ease} .cw-header.is-stuck{background:var(--cw-surface);box-shadow:0 1px 0 var(--cw-line)} .cw-header-in{display:flex;align-items:stretch;gap:1rem;min-height:96px;padding-inline:18px} /* 1.4.2: on tablets/phones the hero (.cw-hero--inset) and page banner sit 12px in, so the header panels must too — at 18px a strip of the dark hero/banner showed at the top beside the logo and menu panels. */ @media(max-width:940px){.cw-header-in{padding-inline:12px}} /* logged-in admin bar must not cover the fixed header */ body.admin-bar .cw-header{top:32px} @media(max-width:782px){body.admin-bar .cw-header{top:46px}} /* phones: WP admin bar scrolls away below 600px — let the stuck header close the gap */ @media(max-width:600px){body.admin-bar .cw-header.is-stuck{top:0}} /* spacer so pages without a hero don't slide under the fixed header. Give a hero that should sit BEHIND the header the class cw-hero--under. */ .cw-header-spacer{height:102px} body:has(.cw-hero--under) .cw-header-spacer{display:none} .cw-brand{display:flex;align-items:center;background:var(--cw-surface);border-radius:0 0 28px 0; padding:14px 30px 14px 22px;text-decoration:none; transition:border-radius .2s,padding .2s} .cw-brand img{height:74px;width:auto;display:block;transition:height .2s} .cw-navwrap{margin-left:auto;display:flex;align-items:center;gap:1.6rem;background:var(--cw-surface); border-radius:0 0 0 28px;padding:10px 22px 10px 34px; transition:border-radius .2s,padding .2s} .cw-nav{display:flex;gap:1.9rem;align-items:center} .cw-nav ul{list-style:none;margin:0;padding:0} .cw-menu{display:flex;gap:1.9rem;align-items:center} .cw-menu li{position:relative} .cw-nav a{display:block;padding:.6rem 0;font-family:var(--cw-font);font-weight:700; font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none; color:var(--cw-ink)} .cw-nav a:hover, .cw-menu .current-menu-item>a, .cw-menu .current-menu-ancestor>a{color:var(--cw-accent-text)} /* dropdown caret */ .cw-menu>li.menu-item-has-children>a::after{content:"";display:inline-block;width:6px; height:6px;margin:0 0 3px 8px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg)} /* dropdown panels — hover and keyboard focus */ .cw-menu .sub-menu{position:absolute;top:100%;left:-18px;z-index:70;min-width:240px; background:var(--cw-surface);border-radius:14px;box-shadow:0 18px 40px rgba(11,24,42,.16); padding:.6rem 0;opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .15s,transform .15s,visibility .15s} .cw-menu li:hover>.sub-menu, .cw-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none} .cw-menu .sub-menu a{padding:.55rem 1.3rem;font-size:.92rem;font-weight:600; text-transform:none;letter-spacing:0;white-space:nowrap} .cw-menu .sub-menu a:hover{background:var(--cw-bg-alt)} .cw-menu .sub-menu .sub-menu{top:-.6rem;left:100%} .cw-menu .sub-menu .menu-item-has-children>a::after{content:"›";margin-left:.5rem} .cw-btn--sm{padding:.85rem 1.5rem} .cw-header .cw-btn{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap; text-decoration:none} .cw-header.is-stuck .cw-brand, .cw-header.is-stuck .cw-navwrap{border-radius:0;padding-block:8px} .cw-header.is-stuck .cw-brand img{height:52px} @media(max-width:1280px){ .cw-nav,.cw-menu{gap:1.25rem} .cw-nav a{font-size:.76rem} } /* mobile nav */ .cw-burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer} .cw-burger svg{fill:var(--cw-primary);display:block} .cw-burger:hover,.cw-burger:focus, .cw-sub-toggle:hover,.cw-sub-toggle:focus{background:none} #cw-mnav{display:none} @media(max-width:1080px){ .cw-nav{display:none} .cw-header .cw-btn--sm{display:none} .cw-burger{display:block} .cw-navwrap{padding:6px 10px 6px 14px} #cw-mnav.open{display:block;background:var(--cw-surface);border-top:1px solid var(--cw-line); max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain} #cw-mnav ul{list-style:none;margin:0;padding:.5rem 0 1rem} #cw-mnav li{position:relative;border-bottom:1px solid var(--cw-line)} #cw-mnav li:has(> .cw-btn){border:0;padding:.9rem 22px 0} #cw-mnav a:not(.cw-btn){display:block;padding:.95rem 64px .95rem 22px;font-weight:700; font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;text-decoration:none; color:var(--cw-ink)} #cw-mnav .sub-menu{display:none;padding:0;background:var(--cw-bg-alt)} #cw-mnav li.sub-open>.sub-menu{display:block} #cw-mnav .sub-menu li:last-child{border-bottom:0} #cw-mnav .sub-menu a:not(.cw-btn){padding-left:38px;text-transform:none;letter-spacing:0; font-weight:600} #cw-mnav .sub-menu .sub-menu a:not(.cw-btn){padding-left:54px} .cw-sub-toggle{position:absolute;top:4px;right:10px;width:44px;height:44px;padding:0; background:none;border:0;cursor:pointer;display:grid;place-items:center} .cw-sub-toggle::before{content:"";width:8px;height:8px;border-right:2px solid var(--cw-ink); border-bottom:2px solid var(--cw-ink);transform:rotate(45deg);margin-top:-4px; transition:transform .15s} li.sub-open>.cw-sub-toggle::before{transform:rotate(-135deg);margin-top:4px} .cw-mcta{padding:.9rem 22px 1.2rem} .cw-mcta .cw-btn{width:100%} } @media(max-width:620px){ .cw-brand img{height:52px} .cw-brand{padding:10px 20px 10px 16px} .cw-header-spacer{height:72px} } /* ============================================================ 10. SERVICE AREA LINK LIST — crawlable text, not a map image ============================================================ */ .cw-areas{columns:2;column-gap:2.2rem;list-style:none;padding:0;margin:1.4rem 0} .cw-areas li{break-inside:avoid;padding:.4rem 0;border-bottom:1px solid var(--cw-line)} .cw-areas a{text-decoration:none;font-weight:600;color:var(--cw-primary);font-size:.98rem} .cw-areas a:hover{color:var(--cw-accent-text);text-decoration:underline} @media(max-width:620px){.cw-areas{columns:1}} /* ============================================================ 11. UTILITIES ============================================================ */ .cw-alt{background:var(--cw-bg-alt)} .cw-card{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--cw-radius)} .cw-stars{color:var(--cw-gold);letter-spacing:.1em} .cw-tabnum{font-variant-numeric:tabular-nums} /* ============================================================ 12. PAGE COMPONENTS Section markup lives in HTML widgets; all styling is here. ============================================================ */ .cw-sec{padding:90px 0} .cw-sec--tight{padding:48px 0} .cw-wrap{max-width:var(--cw-wrap);margin-inline:auto;padding-inline:22px} .cw-center{text-align:center} .cw-center p{margin-inline:auto} /* --- hero interior --- */ .cw-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .65fr; gap:3.5rem;align-items:center;width:100%} .cw-hero-grid h1{color:#fff;margin:0 0 .6rem} .cw-lede{color:#cfdbe9;font-size:1.08rem;max-width:56ch;margin-bottom:2rem} .cw-badges{display:flex;flex-wrap:wrap;gap:1.6rem;list-style:none;padding:0;margin:0 0 1.5rem} .cw-badges li{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700; font-size:.79rem;letter-spacing:.09em;text-transform:uppercase} .cw-badges svg{width:17px;height:17px;fill:var(--cw-accent-lt);flex:none} .cw-hero .cw-btn{background:var(--cw-primary);border-color:rgba(255,255,255,.28)} .cw-hero .cw-btn:hover{background:#fff;color:var(--cw-primary);border-color:#fff} .cw-rcard{background:var(--cw-primary);border-radius:var(--cw-radius);padding:2rem;color:#fff; box-shadow:0 26px 60px rgba(0,0,0,.42)} .cw-rcard .lbl{font-size:.82rem;color:#b8c9dd;line-height:1.5;margin:0 0 1.1rem} .cw-rcard .quote{font-weight:700;font-size:1.02rem;color:#fff;line-height:1.5;margin:0} .cw-rcard hr{border:0;border-top:1px solid rgba(255,255,255,.22);margin:1.4rem 0} .cw-rcard .big{display:flex;align-items:baseline;gap:.35rem} .cw-rcard .num{font-size:3.6rem;font-weight:800;line-height:1;letter-spacing:-.04em; font-variant-numeric:tabular-nums} .cw-rcard .star{color:var(--cw-gold);font-size:1.3rem} .cw-rcard .src{font-size:.85rem;color:#b8c9dd;margin:.5rem 0 0} .cw-pillbar{position:absolute;left:0;bottom:0;z-index:4;background:var(--cw-surface); border-radius:0 30px 0 30px;padding:18px 30px 18px 22px} .cw-pills{display:flex;flex-wrap:wrap;gap:.7rem;padding:0;margin:0;list-style:none} .cw-pills li{background:var(--cw-primary);color:#fff;font-size:.8rem;font-weight:700; padding:.55rem 1.2rem;border-radius:999px} @media(max-width:940px){ .cw-hero-grid{grid-template-columns:1fr;gap:2.5rem} } @media(max-width:620px){ .cw-sec{padding:56px 0} .cw-pillbar{padding:12px 20px 12px 14px;border-radius:0 24px 0 24px} .cw-pills li{font-size:.72rem;padding:.45rem .9rem} .cw-rcard{padding:1.5rem} .cw-rcard .num{font-size:2.8rem} } /* --- two column --- */ .cw-two{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center} @media(max-width:940px){.cw-two{grid-template-columns:1fr;gap:2.5rem}} .cw-figure{position:relative} .cw-figure>img{border-radius:var(--cw-radius);width:100%;height:auto;display:block} .cw-gbadge{position:absolute;left:12px;bottom:26px;background:var(--cw-primary);color:#fff; border-radius:20px;padding:1.2rem 1.5rem;text-align:center; box-shadow:0 18px 40px rgba(0,0,0,.26)} .cw-gbadge .g{font-weight:800;font-size:1.5rem} .cw-gbadge .s{color:var(--cw-gold);letter-spacing:.08em;font-size:.95rem} .cw-gbadge .t{font-size:.78rem;color:#b8c9dd;margin-top:.2rem} .cw-callout{background:var(--cw-bg-alt);border-radius:var(--cw-radius);padding:1.9rem 2rem; margin-top:1.8rem} .cw-callout h3{margin-bottom:.35rem} .cw-callout p{margin-bottom:1.2rem;font-size:.97rem} /* --- reviews --- */ .cw-revhead{display:flex;align-items:center;justify-content:center;gap:2.5rem; flex-wrap:wrap;margin-bottom:2.2rem} .cw-revhead .ex{font-weight:800;color:var(--cw-ink);font-size:1.15rem;letter-spacing:.04em} .cw-revhead .st{color:var(--cw-gold);font-size:1.5rem;letter-spacing:.12em} .cw-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} @media(max-width:860px){.cw-revs{grid-template-columns:1fr}.cw-revhead{gap:.6rem;flex-direction:column}} .cw-rev{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:18px;padding:1.6rem} .cw-rev .who{font-weight:700;color:var(--cw-ink);font-size:1rem} .cw-rev .when{font-size:.8rem;color:#98a2b0;margin-bottom:.5rem} .cw-rev .st{color:var(--cw-gold);letter-spacing:.1em;margin-bottom:.55rem} .cw-rev p{margin:0;font-size:.96rem} /* --- service rows --- */ .cw-srow{display:grid;grid-template-columns:auto 1fr 1.1fr auto;gap:2rem;align-items:center; background:var(--cw-bg-alt);border-radius:var(--cw-radius);padding:1.6rem 2rem; margin-bottom:1.5rem} .cw-srow.dark{background:var(--cw-primary)} .cw-srow.dark h2,.cw-srow.dark h3,.cw-srow.dark .idx{color:#fff} /* h2 added 1.4.3 */ .cw-srow.dark p{color:#c3d2e2} .cw-srow .idx{font-size:2.6rem;font-weight:800;color:var(--cw-primary);line-height:1; letter-spacing:-.04em} .cw-srow>img{border-radius:16px;width:100%;aspect-ratio:3/2;object-fit:cover} .cw-srow .body{max-width:46ch} .cw-srow .body p{margin:0;font-size:.97rem} .cw-sicon{width:40px;height:40px;object-fit:contain;margin-bottom:.6rem} .cw-go{width:58px;height:58px;border-radius:50%;background:var(--cw-accent);display:grid; place-items:center;text-decoration:none;flex:none;transition:transform .16s} .cw-go:hover{transform:translateX(4px)} .cw-go svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4} .cw-srow.dark .cw-go{background:#fff} .cw-srow.dark .cw-go svg{stroke:var(--cw-primary)} @media(max-width:940px){ .cw-srow{grid-template-columns:auto 1fr;gap:1rem 1.1rem;padding:1.4rem} .cw-srow>img{grid-column:1/-1;order:2} .cw-srow .body{grid-column:1/-1;order:3;max-width:none} .cw-srow .idx{font-size:2rem;order:1} .cw-go{width:46px;height:46px;order:1;justify-self:end} } /* --- info strip --- */ .cw-info{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem} @media(max-width:940px){.cw-info{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cw-info{grid-template-columns:1fr}} .cw-icard{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:18px; padding:1.5rem 1.6rem;position:relative} .cw-icard h3{font-size:1.02rem;margin-bottom:.4rem} .cw-icard p{margin:0;font-size:.95rem;line-height:1.6} .cw-icard a{text-decoration:none;color:var(--cw-muted)} .cw-icard a:hover{color:var(--cw-primary)} .cw-icard .ic{position:absolute;top:-16px;right:18px;width:44px;height:44px;border-radius:50%; background:var(--cw-accent);display:grid;place-items:center} .cw-icard .ic svg{width:19px;height:19px;fill:#fff} /* --- band --- */ .cw-band{background:var(--cw-bg-alt);border-radius:var(--cw-radius);padding:3rem 2.5rem; display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center} @media(max-width:940px){.cw-band{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1.5rem}} .cw-band h2{margin:0} .cw-small{font-size:.92rem;color:var(--cw-muted)} /* ============================================================ 13. FOOTER Markup: .cw-footer > .cw-wrap > .cw-fcols (4 cols) + .cw-legal Used by the CityWeb Templates footer template. ============================================================ */ .cw-footer{background:var(--cw-primary);color:var(--cw-footer-text);padding:76px 0 30px;font-size:.95rem} .cw-footer h2,.cw-footer h3,.cw-footer h4{color:var(--cw-footer-head);font-size:1.12rem;font-weight:800;margin:0 0 1rem} .cw-footer ul{list-style:none;padding:0;margin:0} .cw-footer li{padding:.3rem 0;display:flex;gap:.6rem;align-items:flex-start} .cw-footer a{color:var(--cw-footer-text);text-decoration:none} .cw-footer a:hover{color:var(--cw-footer-head);text-decoration:underline} /* links inside running text need more than color to stand out */ .cw-footer p a{text-decoration:underline;text-underline-offset:2px} .cw-footer li svg{width:15px;height:15px;fill:var(--cw-accent-lt);flex:none;margin-top:.42rem} /* four columns — brand column widest */ .cw-fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.5rem} @media(max-width:940px){.cw-fcols{grid-template-columns:1fr 1fr}} @media(max-width:560px){.cw-fcols{grid-template-columns:1fr}} .cw-fbrand img{height:78px;width:auto;margin-bottom:1rem;display:block} .cw-social{display:flex;gap:.7rem;margin-top:.3rem} .cw-social a{width:40px;height:40px;border-radius:50%;background:var(--cw-accent); display:grid;place-items:center} .cw-social svg{width:17px;height:17px;fill:#fff} .cw-legal{border-top:1px solid rgba(255,255,255,.16);margin-top:3rem;padding-top:1.3rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.87rem} /* ============================================================ 14. SCROLL REVEAL (1.2.0) Add to any Elementor widget/container under Advanced > CSS Classes: cw-fly-down slides in from above cw-fly-up slides in from below cw-fly-left slides in from the left cw-fly-right slides in from the right cw-fade-in fades in, no movement Optional: cw-delay-1 / -2 / -3 (0.15s steps) to stagger a row, cw-fly-far for a longer drop (240px instead of 120px). Plays once, when the element scrolls into view. Never hides anything in the Elementor editor, for visitors who ask for reduced motion, or if the script fails to run (3s failsafe). ============================================================ */ .cw-js [class*="cw-fly-"], .cw-js .cw-fade-in{ --cw-fly:120px; opacity:0; transition:transform 1.05s cubic-bezier(.18,.9,.25,1.12),opacity .75s ease; transition-delay:var(--cw-delay,0s); will-change:transform,opacity} .cw-js .cw-fly-far{--cw-fly:240px} .cw-js .cw-fly-down{transform:translateY(calc(var(--cw-fly) * -1))} .cw-js .cw-fly-up{transform:translateY(var(--cw-fly))} .cw-js .cw-fly-left{transform:translateX(calc(var(--cw-fly) * -1))} .cw-js .cw-fly-right{transform:translateX(var(--cw-fly))} .cw-js .cw-in{opacity:1;transform:none} .cw-delay-1{--cw-delay:.15s} .cw-delay-2{--cw-delay:.3s} .cw-delay-3{--cw-delay:.45s} /* failsafe: script never ran -> show everything after 3s */ @keyframes cw-reveal-failsafe{to{opacity:1;transform:none}} .cw-js:not(.cw-reveal-ready) [class*="cw-fly-"], .cw-js:not(.cw-reveal-ready) .cw-fade-in{animation:cw-reveal-failsafe 0s 3s forwards} /* never hidden while editing, or for reduced-motion visitors */ .elementor-editor-active [class*="cw-fly-"], .elementor-editor-active .cw-fade-in{opacity:1!important;transform:none!important} @media (prefers-reduced-motion:reduce){ .cw-js [class*="cw-fly-"],.cw-js .cw-fade-in{opacity:1;transform:none;transition:none} } /* stop sideways flyers from causing a horizontal scrollbar */ body:has(.cw-fly-left,.cw-fly-right){overflow-x:clip} /* ============================================================ 15. PAGE BANNER (1.3.0 plain pages · 1.4.0 any page) Dark rounded banner behind the fixed header: optional eyebrow, the page H1, optional subtext, optional photo. Turned on in Customizer > CityWeb Pro and per page in the "Page Banner" box (functions.php). Can also be hand-coded:
Services · Furnace Repair

Furnace Repair in Utah

One short line.

Lines up with the header panels and .cw-hero--inset: 18px in, 12px under 940px. Inside an Elementor HTML widget, put it in a Full Width container with padding 0. Colors: --cw-primary, --cw-banner-glow, --cw-banner-text, --cw-banner-eyebrow, --cw-banner-font. ============================================================ */ body.cw-has-banner .cw-header-spacer{display:none} .cw-banner{position:relative;overflow:hidden;text-align:center; margin:0 18px clamp(36px,5vw,60px);border-radius:var(--cw-radius-lg); padding:calc(150px + clamp(36px,5vw,64px)) 0 clamp(56px,6vw,88px); background:var(--cw-primary); background: radial-gradient(ellipse at 80% 15%,var(--cw-banner-glow),transparent 55%), linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,var(--cw-primary) 80%,#000) 78%,transparent),color-mix(in srgb,var(--cw-primary) 94%,transparent)), var(--cw-banner-img,none) center/cover no-repeat,var(--cw-primary)} .cw-banner-in{max-width:var(--cw-wrap);margin:0 auto;padding-inline:22px} .cw-banner-eyebrow{display:block;font-size:.76rem;font-weight:800;letter-spacing:.18em; text-transform:uppercase;color:var(--cw-banner-eyebrow);margin-bottom:.6rem} .cw-banner h1,.cw-banner .cw-banner-title,.page-content h1.cw-page-title{font-family:var(--cw-banner-font); color:var(--cw-banner-text);margin:0 auto;max-width:900px; font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.1} .cw-banner-sub{color:var(--cw-banner-text);opacity:.82;max-width:640px;margin:1rem auto 0;font-size:1.08rem} @media(max-width:940px){ .cw-banner{margin-inline:12px;border-radius:24px;padding-top:calc(110px + 36px)} } /* Plain pages: the banner sits inside the 780px reading column and breaks out of it. 100vw counts the scrollbar, so .site-main is a size container and 100cqw (its real width) is used where supported. */ body.cw-has-page-banner{overflow-x:clip} body.cw-has-page-banner .site-main{container-type:inline-size;max-width:none!important;width:100%!important;margin:0!important;padding:0!important} body.cw-has-page-banner .page-content{max-width:780px;margin:0 auto;padding:0 22px clamp(48px,7vw,88px); font-size:1.02rem;line-height:1.8} body.cw-has-page-banner .cw-banner{margin-inline:calc(50% - 50vw + 18px);margin-inline:calc(50% - 50cqw + 18px)} body.cw-has-page-banner .page-content a:not([class]){color:var(--cw-accent-text);font-weight:600; text-decoration:underline;text-underline-offset:2px} body.cw-has-page-banner .page-content a:not([class]):hover{color:var(--cw-primary)} @media(max-width:940px){ body.cw-has-page-banner .cw-banner{margin-inline:calc(50% - 50vw + 12px);margin-inline:calc(50% - 50cqw + 12px)} } /* ============================================================ 16. CITYWEB SINGLE TEMPLATES (1.3.0) Hello caps .site-main at 1140px on content not built with Elementor; CityWeb Single templates should run full width. ============================================================ */ body .site-main.cw-single{max-width:none!important;width:100%!important;margin:0!important;padding:0!important} /* ============================================================ 17. CONTACT FORM 7 (1.5.0, from the Husky Customizer CSS) White card, soft inputs, full-width pill submit button. Override per site in Customizer > Additional CSS. ============================================================ */ .wpcf7 form{background:#fff;border:1px solid var(--cw-line);border-radius:var(--cw-radius); padding:2.2rem;box-shadow:0 18px 40px rgba(27,58,95,.08)} .wpcf7 label{display:block;font-weight:700;font-size:.9rem;color:var(--cw-ink);margin-bottom:1.1rem} .wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel], .wpcf7 input[type=url],.wpcf7 input[type=number],.wpcf7 input[type=date], .wpcf7 select,.wpcf7 textarea{ display:block;width:100%;margin-top:.45rem;padding:.85rem 1rem; font:inherit;font-weight:400;font-size:1rem;color:var(--cw-ink); background:var(--cw-bg-alt);border:1px solid var(--cw-line);border-radius:12px; transition:border-color .15s,background .15s} .wpcf7 textarea{height:150px;resize:vertical} .wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{ outline:none;border-color:var(--cw-accent);background:#fff} .wpcf7 input[type=submit]{ display:inline-flex;width:100%;justify-content:center;cursor:pointer; font-family:var(--cw-font);font-weight:700;font-size:.85rem;letter-spacing:.03em; text-transform:uppercase;color:#fff;background:var(--cw-primary); border:2px solid var(--cw-primary);border-radius:999px;padding:1.05rem 1.9rem;margin-top:.4rem} .wpcf7 input[type=submit]:hover{background:var(--cw-primary-d)} .wpcf7 .wpcf7-spinner{display:block;margin:.8rem auto 0} .wpcf7-not-valid-tip{font-size:.82rem;font-weight:600;margin-top:.3rem} .wpcf7 form .wpcf7-response-output{border-radius:12px;margin:1rem 0 0;padding:.8rem 1rem;font-size:.92rem} @media(max-width:620px){.wpcf7 form{padding:1.4rem}} /* ============================================================ 18. CHECK LISTS (1.5.0)