/* ============================================================ CONCRETE LIFT CO — all styles for every page. Single source of truth. Do NOT add a second global style block; splitting markup from styles is exactly what drifted on WordPress. Fonts are loaded via in each page's , not @import here — an @import inside the stylesheet serialises the font fetch behind it. ⚠️ Change this file, bump ?v=YYYYMMDD in EVERY html file that links it. Cloudflare Pages serves root assets max-age=14400 and ignores the Cache-Control in _headers for root-level paths. The version query is the only thing that forces a refetch. See _headers and README. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --slate: #2E2828; --slate-mid: #4A3F3F; --oxide: #C86A2E; --oxide-lt: #E08A50; --concrete: #A89880; --offwhite: #F2EDE6; --cream: #FAF7F2; --navy: #1E2D45; --text-dark: #1C1818; --text-mid: #5C5050; --text-lt: #8C7E7E; --rule: rgba(60,52,52,0.12); --rule-solid:#E0D8D0; /* opaque rule, for borders over the cream/offwhite panels */ --error: #E07070; /* Site-wide horizontal padding. .service-areas referenced this on WordPress but nothing ever defined it, so its padding shorthand was invalid and dropped. Defined here. */ --pad: 5%; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'Barlow', sans-serif; background: var(--cream); color: var(--text-dark); -webkit-font-smoothing: antialiased; } /* The keyword paragraph above the nav. On WordPress this was hidden only as a side effect of the rule that killed WP's injected

tags — with that layer gone it would have rendered as visible body text at the top of the page. Explicitly screen-reader-only now. */ .seo-text-block { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.8rem var(--pad); background: rgba(46,40,40,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(200,106,46,0.2); } .nav-right { display: flex; align-items: center; gap: 1.25rem; } .nav-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--offwhite); text-decoration: none; } .nav-logo span { color: var(--oxide); } .nav-phone { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; color: var(--offwhite); text-decoration: none; padding: 8px 0; } .nav-phone:hover { color: var(--oxide); } @media (max-width: 760px) { .nav-phone { display: none; } } .nav-cta { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--offwhite); background: var(--oxide); padding: 9px 22px; text-decoration: none; transition: background 0.2s; } .nav-cta:hover { background: var(--oxide-lt); } /* ── HERO ── */ .hero { min-height: 100vh; background-color: var(--slate); background-image: url('/images/hero-background.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-blend-mode: luminosity; display: flex; flex-direction: column; justify-content: center; padding: 84px var(--pad) 80px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(168,152,128,0.03) 0px, rgba(168,152,128,0.03) 1px, transparent 1px, transparent 80px), repeating-linear-gradient(0deg, rgba(168,152,128,0.03) 0px, rgba(168,152,128,0.03) 1px, transparent 1px, transparent 80px); pointer-events: none; } .hero::after { content: ''; position: absolute; right: -100px; top: 50%; transform: translateY(-50%); width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(200,106,46,0.07) 0%, transparent 70%); pointer-events: none; } .hero > * { position: relative; z-index: 1; } .hero-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oxide); margin-bottom: 1.25rem; opacity: 0; animation: fadeUp 0.6s 0.1s forwards; } .hero-eyebrow span { display: inline-block; padding: 5px 14px; border: 1px solid rgba(200,106,46,0.35); } .hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(40px, 6vw, 76px); line-height: 1.05; color: var(--offwhite); max-width: 780px; margin-bottom: 1.75rem; opacity: 0; animation: fadeUp 0.7s 0.25s forwards; } .hero h1 em { font-style: italic; color: var(--oxide); } .hero-sub { font-size: clamp(16px, 1.8vw, 19px); font-weight: 300; line-height: 1.7; color: rgba(242,237,230,0.72); max-width: 560px; margin-bottom: 2.75rem; opacity: 0; animation: fadeUp 0.7s 0.4s forwards; } .hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.7s 0.55s forwards; } .btn-primary { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--offwhite); background: var(--oxide); padding: 16px 36px; text-decoration: none; display: inline-block; transition: background 0.2s, transform 0.15s; } .btn-primary:hover { background: var(--oxide-lt); transform: translateY(-1px); } .hero-trust { font-size: 13px; color: rgba(242,237,230,0.45); display: flex; align-items: center; gap: 6px; } .hero-trust::before { content: '✓'; color: var(--oxide); font-size: 12px; } .hero-stat-row { position: absolute; bottom: 0; left: 0; right: 0; display: flex; border-top: 1px solid rgba(168,152,128,0.12); opacity: 0; animation: fadeUp 0.7s 0.7s forwards; } .hero-stat { flex: 1; padding: 1.5rem var(--pad); border-right: 1px solid rgba(168,152,128,0.12); text-align: center; } .hero-stat:last-child { border-right: none; } .hero-stat-num { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--oxide); line-height: 1; margin-bottom: 4px; white-space: nowrap; } .hero-stat-label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242,237,230,0.4); white-space: nowrap; } /* ── SHARED ── */ .section-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oxide); margin-bottom: 1rem; } /* ── PROBLEM ── */ .problem { padding: 7rem var(--pad); background: var(--offwhite); position: relative; } .problem-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: center; max-width: 100%; } @media (max-width: 760px) { .problem-grid { grid-template-columns: 1fr; gap: 3rem; } .problem-grid > div:first-child { order: 1; } .problem-grid > div:last-child { order: 2; } } .problem h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.2; color: var(--slate); margin-bottom: 1.5rem; } .problem-body { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--text-mid); margin-bottom: 1.5rem; } .problem-body strong { font-weight: 600; color: var(--text-dark); } .problem-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .problem-list li { font-size: 15px; font-weight: 400; color: var(--text-mid); padding-left: 20px; position: relative; line-height: 1.5; } .problem-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--oxide); } /* ── BEFORE & AFTER GALLERY ── */ .ba-gallery-wrap { width: 100%; } .ba-gallery-header { margin-bottom: 1.5rem; } .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } @media (max-width: 760px) { .ba-grid { grid-template-columns: 1fr; } } .ba-item { display: flex; flex-direction: column; gap: 6px; } .ba-img-wrap { position: relative; overflow: hidden; width: 100%; } .ba-img-wrap img { width: 100%; height: auto; display: block; } .ba-labels { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; } .ba-labels span { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: white; background: rgba(46,40,40,0.65); padding: 5px 10px; } .ba-caption { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-lt); } /* ── SOLUTION ── */ .solution { padding: 7rem var(--pad); background: var(--cream); } .solution-intro { max-width: 640px; margin-bottom: 4rem; } .solution-intro h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; line-height: 1.2; color: var(--slate); margin-bottom: 1.25rem; } .solution-intro p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--text-mid); } /* Benefits — feature row + pair */ .benefits-wrap { max-width: 1100px; } .benefit-feature { display: grid; grid-template-columns: auto 1fr auto; gap: 3rem; align-items: center; padding: 3rem 0; border-bottom: 1px solid var(--rule); } @media (max-width: 760px) { .benefit-feature { grid-template-columns: 1fr; gap: 1.5rem; } } .bf-num { font-family: 'Playfair Display', serif; font-size: clamp(64px, 8vw, 96px); font-weight: 900; color: var(--oxide); line-height: 1; opacity: 0.15; align-self: flex-start; padding-top: 0.1em; } .bf-body h3 { font-family: 'Playfair Display', serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--slate); line-height: 1.25; margin-bottom: 0.75rem; } .bf-body p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--text-mid); max-width: 480px; } .bf-proof { display: flex; flex-direction: column; gap: 1.5rem; padding-left: 3rem; border-left: 1px solid var(--rule); flex-shrink: 0; min-width: 130px; } @media (max-width: 760px) { .bf-proof { flex-direction: row; gap: 2.5rem; border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.5rem; } } .bf-stat-val { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--oxide); line-height: 1; margin-bottom: 4px; } .bf-stat-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-lt); } .benefit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media (max-width: 760px) { .benefit-pair { grid-template-columns: 1fr; } } .benefit-item { padding: 2.5rem 3rem 2.5rem 0; border-right: 1px solid var(--rule); } .benefit-item:last-child { padding: 2.5rem 0 2.5rem 3rem; border-right: none; } @media (max-width: 760px) { .benefit-item, .benefit-item:last-child { padding: 2rem 0; border-right: none; border-bottom: 1px solid var(--rule); } .benefit-item:last-child { border-bottom: none; } } .bi-num { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oxide); margin-bottom: 1rem; } .benefit-item h3 { font-family: 'Playfair Display', serif; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; color: var(--slate); line-height: 1.3; margin-bottom: 0.75rem; } .benefit-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--text-mid); margin-bottom: 1.25rem; } .bi-proof { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oxide); } /* ── PROCESS ── */ .process { padding: 6rem var(--pad); background: var(--slate); } .process .section-label { color: var(--oxide); margin-bottom: 0.5rem; } .process h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: var(--offwhite); margin-bottom: 3.5rem; max-width: 480px; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1100px; position: relative; } @media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } } .steps::before { content: ''; position: absolute; top: 22px; left: 22px; right: 22px; height: 1px; background: rgba(200,106,46,0.25); pointer-events: none; } .step { padding: 0 1.5rem 0 0; } .step-num { width: 44px; height: 44px; border: 1px solid rgba(200,106,46,0.4); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; color: var(--oxide); margin-bottom: 1.25rem; background: var(--slate); position: relative; z-index: 1; } .step h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--offwhite); margin-bottom: 0.6rem; } .step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(242,237,230,0.5); } /* ── SOCIAL PROOF ── */ .proof { padding: 7rem var(--pad); background: var(--offwhite); } .proof-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; } .proof-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: var(--slate); } .proof-aggregate { text-align: right; } .proof-stars { color: var(--oxide); font-size: 20px; letter-spacing: 2px; margin-bottom: 2px; } .proof-score { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: var(--slate); line-height: 1; } .proof-count { font-size: 13px; color: var(--text-lt); margin-top: 2px; } .reviews-stack { max-width: 1100px; display: flex; flex-direction: column; gap: 1.5rem; } .review { background: var(--cream); border: 1px solid rgba(60,52,52,0.08); padding: 2rem; position: relative; } .review-featured { padding: 2.5rem 3rem; overflow: hidden; } .review-featured::before { content: '\201C'; font-family: 'Playfair Display', serif; font-size: 100px; color: var(--oxide); opacity: 0.12; position: absolute; top: 0.25rem; left: 1.5rem; line-height: 1; pointer-events: none; } .review-featured .review-text { font-size: 18px; max-width: 700px; } .reviews-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 760px) { .reviews-pair { grid-template-columns: 1fr; } .review-featured { padding: 2rem 1.5rem; } .review-featured::before { font-size: 70px; } } .review-stars { color: var(--oxide); font-size: 14px; letter-spacing: 1px; margin-bottom: 1rem; } .review-text { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--text-mid); font-style: italic; margin-bottom: 1.25rem; } .review-attr { display: flex; align-items: center; gap: 10px; } .review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--slate); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--offwhite); flex-shrink: 0; } .review-name { font-size: 14px; font-weight: 600; color: var(--text-dark); line-height: 1.2; } .review-meta { font-size: 12px; color: var(--text-lt); } .verified { position: absolute; top: 1.25rem; right: 1.25rem; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oxide); display: flex; align-items: center; gap: 4px; } .verified::before { content: '✓'; width: 14px; height: 14px; background: rgba(200,106,46,0.12); display: flex; align-items: center; justify-content: center; font-size: 9px; border-radius: 50%; } .logos-row { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; } .logos-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-lt); flex-shrink: 0; } .logos-row img { height: 50px; width: auto; object-fit: contain; } /* ── CTA ── */ .cta-section { padding: 8rem var(--pad); background: var(--navy); position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -200px; right: -100px; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(200,106,46,0.1); pointer-events: none; } .cta-section::after { content: ''; position: absolute; top: -100px; right: 0px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(200,106,46,0.06); pointer-events: none; } .cta-inner { max-width: 700px; position: relative; z-index: 1; } .cta-section .section-label { color: var(--oxide); margin-bottom: 1rem; } .cta-section h2 { font-family: 'Playfair Display', serif; font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.1; color: var(--offwhite); margin-bottom: 1.5rem; } .cta-section h2 em { font-style: italic; color: var(--oxide); } .cta-phone { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; letter-spacing: 0.08em; color: var(--oxide); margin-bottom: 0.5rem; display: inline-block; text-decoration: none; } .cta-phone:hover { color: var(--oxide-lt); } .cta-section p { font-size: 17px; font-weight: 300; line-height: 1.75; color: rgba(242,237,230,0.6); margin-bottom: 2.5rem; max-width: 520px; } .cta-reassurance { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2rem; } .cta-reassurance span { font-size: 13px; color: rgba(242,237,230,0.4); display: flex; align-items: center; gap: 5px; white-space: nowrap; } .cta-reassurance span::before { content: '✓'; color: var(--oxide); font-size: 11px; } /* ── LEAD FORM ── Replaces WPForms (form ID 154, phone + email). Posts to the Pages Function at /contact. All the WPForms selector-wrangling that used to live here is gone — this markup is ours, so plain classes reach it. */ .lead-form { max-width: 520px; margin-bottom: 1.5rem; } .lead-field { margin-bottom: 1rem; } .lead-field label { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,237,230,0.5); margin-bottom: 6px; display: block; } .lead-field input { font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 300; padding: 14px 18px; background: rgba(242,237,230,0.07); border: 1px solid rgba(242,237,230,0.15); border-radius: 0; color: var(--offwhite); width: 100%; outline: none; transition: border-color 0.2s; } .lead-field input::placeholder { color: rgba(242,237,230,0.3); opacity: 1; } .lead-field input:focus { border-color: rgba(200,106,46,0.5); } .lead-field input:-webkit-autofill, .lead-field input:-webkit-autofill:hover, .lead-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #1E2D45 inset; -webkit-text-fill-color: #F2EDE6; caret-color: #F2EDE6; } .lead-field input[aria-invalid="true"] { border-color: rgba(224,112,112,0.5); } .lead-error { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--error); margin-top: 4px; display: block; min-height: 1em; } /* Honeypot — bots fill it, humans never see it. Not display:none; some bots skip hidden fields specifically. */ .lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lead-submit { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: white; background: var(--oxide); border: none; border-radius: 0; padding: 16px 32px; margin-top: 0.5rem; cursor: pointer; transition: background 0.2s, opacity 0.2s; } .lead-submit:hover:not(:disabled) { background: var(--oxide-lt); } .lead-submit:disabled { opacity: 0.55; cursor: default; } /* Confirmation — replaces the form in place on success */ .lead-confirm { background: rgba(242,237,230,0.06); border: 1px solid rgba(200,106,46,0.3); padding: 2.5rem 2rem; max-width: 520px; margin: 0 0 1.5rem; } .lead-confirm::before { content: '✓'; display: block; font-size: 28px; color: var(--oxide); margin-bottom: 1rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; } .lead-confirm p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--offwhite); margin: 0; } /* ── SERVICE AREAS ── */ .service-areas { background: var(--cream); padding: 3rem var(--pad); text-align: center; } .service-areas p { font-family: 'Barlow', sans-serif; font-size: 1rem; color: var(--text-mid); max-width: 680px; margin: 0.75rem auto 0; } .service-areas a { color: var(--oxide); text-decoration: none; font-weight: 600; } .service-areas a:hover { text-decoration: underline; } /* ── FOOTER ── */ footer { padding: 2rem var(--pad); background: var(--slate); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid rgba(168,152,128,0.1); } .footer-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(242,237,230,0.5); text-decoration: none; } .footer-logo span { color: var(--oxide); } footer p { font-size: 12px; color: rgba(242,237,230,0.25); } .footer-legal a { color: rgba(242,237,230,0.45); text-decoration: none; } .footer-legal a:hover { color: var(--oxide); text-decoration: underline; } /* ── SERVICE-AREA PAGES, e.g. /concrete-leveling-highlands-ranch/ ── Was an inline