/* ===================================================================== MOORE CLEAN — City page styling v5 Paste into: Appearance → Customize → Additional CSS Scoped to .moore-city and .single-locations only. Fonts: enqueued via functions.php — no @import needed here. ===================================================================== */ /* ================================================================ WIDTH — single clean override via CSS variable only. We set the variable and let WordPress's own constrained layout engine apply it. No negative margins, no entry-content padding overrides — those fought Hello Elementor's container and caused the left shift and uneven alignment. ================================================================ */ .single-locations{ --wp--style--global--content-size: 1060px; --wp--style--global--wide-size: 1280px} /* Hello Elementor wraps content in .hentry which has its own max-width. Override just that one container so our variable takes effect. */ .single-locations .hentry, .single-locations .entry-content{ max-width:100% !important} /* ---- COLOUR TOKENS -------------------------------------------------- */ .moore-city{ --mc-blue: #292B74; --mc-green: #2CA558; --mc-amber: #E8A000; /* bright — hazard stripe only */ --mc-amber-btn: #B84F08; /* deep — buttons, white text 5.05:1 ✅ */ --mc-amber-hover: #9E4E09; /* button hover, white text 5.92:1 ✅ */ --mc-teal: #0F3E40; --mc-green-dark: #14532F; --mc-gray: #F4F6F8; --mc-sand: #F3EFE8; --mc-slate: #48535C; --mc-line: #E4E8EC} /* ---- TYPE ----------------------------------------------------------- */ .moore-city{ font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:15px;line-height:1.65;color:#2C3840} .moore-city h1,.moore-city h2,.moore-city h3,.moore-city h4{ font-family:'Archivo','Inter',sans-serif !important; font-weight:800 !important;letter-spacing:-.02em;line-height:1.1;color:var(--mc-blue)} .moore-city h2{font-size:clamp(1.8rem,3.2vw,2.4rem);margin-top:2rem;margin-bottom:.6rem} .moore-city h3{font-size:clamp(1.05rem,2vw,1.2rem)} .moore-city p{font-size:15px;color:#3A4750} .moore-city .eyebrow{ font-family:'JetBrains Mono',monospace !important;font-weight:600; font-size:.75rem !important;letter-spacing:.16em; text-transform:uppercase;margin-bottom:.4rem} /* ---- HERO ----------------------------------------------------------- */ /* alignfull Cover block handles its own full-width breakout natively. */ /* We only add the visual layer — no width/margin overrides here. */ .moore-city .mc-hero{position:relative;overflow:hidden} .moore-city .mc-hero::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px), repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px)} .moore-city .mc-hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:9px;z-index:3; background:repeating-linear-gradient(90deg,#111 0 18px,var(--mc-amber) 18px 36px)} .moore-city .mc-hero .wp-block-cover__inner-container{position:relative;z-index:2} .moore-city .mc-hero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);color:#fff} /* ---- BUTTONS -------------------------------------------------------- */ .moore-city .wp-block-button__link{ font-family:'Archivo',sans-serif;font-weight:700; font-size:.95rem;border-radius:8px;padding:.75rem 1.5rem; transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease; box-shadow:0 3px 0 rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.12)} .moore-city .wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 5px 0 rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.14)} .moore-city .wp-block-button__link:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.28)} /* Deep amber — white text, 5.05:1 full AA ✅ */ .moore-city .wp-block-button:not(.is-style-outline) .wp-block-button__link{ background-color:var(--mc-amber-btn) !important; color:#ffffff !important;border:0 !important} .moore-city .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{ background-color:var(--mc-amber-hover) !important} /* Hero outline button */ .moore-city .mc-hero .is-style-outline .wp-block-button__link{ background:transparent !important;color:#fff !important; border:2px solid rgba(255,255,255,.65) !important; box-shadow:0 2px 0 rgba(0,0,0,.2)} .moore-city .mc-hero .is-style-outline .wp-block-button__link:hover{ background:rgba(255,255,255,.12) !important} /* ---- SERVICE CARDS -------------------------------------------------- */ .moore-city .mc-services{ display:flex !important;flex-wrap:nowrap !important; gap:1rem !important;align-items:stretch} .moore-city .mc-services .wp-block-column{ flex:1 1 0 !important;min-width:0; background:#fff; border:1px solid var(--mc-line); border-top:3px solid var(--mc-blue); border-radius:10px;padding:1.4rem 1.2rem; box-shadow: 0 1px 2px rgba(16,40,70,.04), 0 4px 12px rgba(16,40,70,.08), 0 8px 20px rgba(16,40,70,.05); transition:transform .18s ease,box-shadow .18s ease} .moore-city .mc-services .wp-block-column:hover{ transform:translateY(-3px); box-shadow: 0 2px 4px rgba(16,40,70,.06), 0 8px 20px rgba(16,40,70,.13), 0 16px 32px rgba(16,40,70,.07)} .moore-city .mc-services h3{font-size:1rem;margin:0 0 .5rem;color:var(--mc-blue)} .moore-city .mc-services p{font-size:.9rem;color:var(--mc-slate);margin:0} @media(max-width:680px){ .moore-city .mc-services{flex-wrap:wrap !important} .moore-city .mc-services .wp-block-column{flex:1 1 100% !important}} /* ---- BUNDLED SERVICES CARD (bg: #3A5580 slate blue-gray, set in block inline style) */ .moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city){ position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.13); border-radius:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 16px rgba(0,0,0,.18), 0 8px 32px rgba(0,0,0,.10)} /* Crosshatch overlay — same pattern as Why and CTA bands */ .moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city)::before{ content:""; position:absolute;inset:0; z-index:0;pointer-events:none; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 6px), repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 6px)} /* Lift content above the crosshatch overlay */ .moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city) > *{ position:relative;z-index:1} /* ---- ACROSS THE METRO — border + shadow box ------------------------- */ .moore-city .wp-block-columns:not(.mc-services):not(.mc-stats):not(.mc-quotes){ border:1px solid var(--mc-line); border-radius:12px; padding:1.8rem !important; background:#fff; box-shadow: 0 2px 4px rgba(16,40,70,.04), 0 6px 20px rgba(16,40,70,.08)} /* Don't apply the "across the metro" box to the FAQ columns wrapper. :has() targets the columns container that contains details blocks, leaving the details blocks' own border/shadow rules untouched. */ .moore-city .wp-block-columns:has(.wp-block-details){ border:none !important; box-shadow:none !important; padding:0 !important; background:transparent !important} /* ---- WHY BAND ------------------------------------------------------- */ .moore-city .mc-why{position:relative;overflow:hidden} .moore-city .mc-why::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px), repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px)} .moore-city .mc-why > *{position:relative;z-index:1} /* Census link on teal */ .moore-city .mc-why a,.moore-city .mc-why a:visited{ color:#9FE3C4 !important;text-decoration:underline;text-underline-offset:3px} .moore-city .mc-why a:hover{color:#fff !important} /* Stat glass cards */ .moore-city .mc-stats .wp-block-column{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:10px;padding:1rem .8rem; box-shadow:0 2px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.08)} .moore-city .mc-stats h3{font-size:2.6rem;line-height:1;margin:0 0 .2rem;color:#7FD9A6} .moore-city .mc-stats p{font-size:.85rem;margin:0;color:#C4E0DC} /* ---- TESTIMONIALS -------------------------------------------------- */ .moore-city .mc-quotes .wp-block-quote{ background:var(--mc-sand); border:1px solid #E8DFD4; border-left:5px solid var(--mc-green); border-radius:10px;padding:1.5rem 1.6rem;margin:0;font-style:normal; box-shadow:0 2px 4px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.07)} .moore-city .mc-quotes .wp-block-quote p{font-style:normal;font-size:.95rem} .moore-city .mc-quotes cite{ display:block;margin-top:.8rem;font-style:normal; font-weight:600;font-size:.82rem;color:#5B6B78} /* ---- FAQ ACCORDION ------------------------------------------------- */ .moore-city .wp-block-details{ border:1px solid var(--mc-line);border-radius:8px; padding:.3rem 1.1rem;margin-bottom:.6rem;background:#fff; box-shadow:0 2px 6px rgba(16,40,70,.05),0 1px 2px rgba(16,40,70,.04); transition:box-shadow .15s ease} .moore-city .wp-block-details[open]{ border-left:3px solid var(--mc-blue); box-shadow:0 4px 12px rgba(16,40,70,.10),0 1px 3px rgba(16,40,70,.06)} .moore-city .wp-block-details summary{ font-weight:700;font-size:.95rem;color:var(--mc-blue) !important; cursor:pointer;padding:.75rem 0;list-style:none} .moore-city .wp-block-details summary::-webkit-details-marker{display:none} .moore-city .wp-block-details p{ color:var(--mc-slate);font-size:.9rem;padding-bottom:.5rem} /* ---- FINAL CTA BAND ------------------------------------------------ */ .moore-city .mc-cta{position:relative;overflow:hidden} .moore-city .mc-cta::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px), repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px)} .moore-city .mc-cta::after{ content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:2; background:repeating-linear-gradient(90deg,#111 0 18px,var(--mc-amber) 18px 36px)} .moore-city .mc-cta > *{position:relative;z-index:1} /* ---- PAGE TITLE SUPPRESSION --------------------------------------- */ .single-locations .entry-title, .single-locations .page-title, .single-locations h1.entry-title, body.single-locations .page-header{display:none !important} /* ---- HEADING COLOUR OVERRIDES ------------------------------------- */ .moore-city h2,.moore-city h3{color:var(--mc-blue)} .moore-city .mc-why h2,.moore-city .mc-why h3, .moore-city .mc-cta h2{color:#fff} .moore-city .wp-block-details summary{color:var(--mc-blue) !important} /* ---- LOCAL COVERAGE SPACING --------------------------------------- */ /* Tighten excess whitespace above/below the intro group block */ .moore-city .wp-block-group:not(.mc-why):not(.mc-cta):not(.mc-hero):not(.has-background):not(.moore-city){ padding-top:1.5rem !important; padding-bottom:.75rem !important} /* ---- CHECKMARK LISTS ----------------------------------------------- */ /* mc-checklist: green circle checkmark, used on service cards */ /* mc-checklist--light: white ghost checkmark, used on dark bg (bundled) */ .moore-city .mc-checklist{ list-style:none !important; padding-left:0 !important; margin:.7rem 0 0 !important} .moore-city .mc-checklist li{ position:relative; padding-left:1.7rem; font-size:.88rem; color:var(--mc-slate); margin-bottom:.35rem; line-height:1.4} .moore-city .mc-checklist li::before{ content:""; position:absolute; left:0;top:.12em; width:1rem;height:1rem; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%232CA558%22%2F%3E%3Cpolyline%20points%3D%224%2C8.5%206.5%2C11%2012%2C5.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-size:contain; background-repeat:no-repeat} /* Light variant — white ghost circle for dark green bundled card */ .moore-city .mc-checklist--light li{color:#C9D8CE} .moore-city .mc-checklist--light li::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.18%29%22%2F%3E%3Cpolyline%20points%3D%224%2C8.5%206.5%2C11%2012%2C5.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")} /* Bundled services columns inherit dark card context */ .moore-city .wp-block-group.has-background .mc-checklist li{color:#C9D8CE} .moore-city .wp-block-group.has-background .mc-checklist li::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.18%29%22%2F%3E%3Cpolyline%20points%3D%224%2C8.5%206.5%2C11%2012%2C5.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")} /* ---- FULL CARD CLICKABLE — stretched link technique ---------------- */ /* The heading is positioned relative so it */ /* sits above the ::after overlay. The ::after stretches to cover the */ /* entire card, making every pixel clickable. No JS needed. */ .moore-city .mc-services .wp-block-column{position:relative} .moore-city .mc-card-link{position:relative;z-index:1} .moore-city .mc-card-link::after{ content:""; position:absolute; inset:0; /* Expand ::after to cover the full card (parent column) */ top:calc(-1.4rem - 3px); /* card padding-top + border-top */ left:-1.2rem; /* card padding-left */ right:-1.2rem; /* card padding-right */ bottom:-1.4rem; /* card padding-bottom */ z-index:0; border-radius:10px} /* Lift card visually on hover (re-affirm here since ::after triggers) */ .moore-city .mc-services .wp-block-column:hover{ transform:translateY(-3px);cursor:pointer} /* ---- BUNDLED SERVICES: update dark green → deep indigo ------------- */ /* Inline style on the block already handles bg-color. This ensures */ /* any theme override is beaten and border-top reflects the new colour. */ .moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city){ border-top:1px solid rgba(255,255,255,.13); border-radius:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 16px rgba(0,0,0,.18), 0 8px 32px rgba(0,0,0,.10)} /* ---- AREAS SERVED — two-column bulleted list ----------------------- */ /* mc-area-list: clean bullet list for city/community and district cols */ .moore-city .mc-area-list{ list-style:none !important; padding-left:0 !important; margin:.4rem 0 0 !important} .moore-city .mc-area-list li{ position:relative; padding-left:1.4rem; font-size:.9rem; color:var(--mc-slate); margin-bottom:.3rem; line-height:1.5} .moore-city .mc-area-list li::before{ content:""; position:absolute; left:0;top:.35em; width:.55rem;height:.55rem; background-color:#B84F08; border-radius:50%} .moore-city .mc-area-list li a{ color:var(--mc-blue); text-decoration:underline; text-underline-offset:2px} .moore-city .mc-area-list li a:hover{color:var(--mc-green)} /* "…and more" — same style as all other list items */ /* ---- AREAS SERVED CARD --------------------------------------------- */ /* Single bordered card wrapping all three area columns */ .moore-city .mc-areas-card{ border:1px solid var(--mc-line); border-radius:12px; background:#fff; box-shadow: 0 2px 4px rgba(16,40,70,.04), 0 6px 20px rgba(16,40,70,.07)} /* Prevent the generic columns border rule from double-bordering inside */ .moore-city .mc-areas-card .wp-block-columns{ border:none !important; box-shadow:none !important; padding:0 !important; background:transparent !important}