/* Theme Name: Dynamic Concrete Pumping Theme URI: https://dynamicpumpingtx.com/ Author: AB Digital Author URI: https://www.abdigitaltx.com/ Description: Single-page landing theme for Dynamic Concrete Pumping — boom concrete pumping, greater Houston. Version: 1.0.9 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: dcp */ /* ============================================================ DYNAMIC CONCRETE PUMPING — Site Revamp Two design directions, switched via A = Hi-Vis Industrial (dark graphite + safety amber) B = Steel Blue (light concrete + steel blue, corporate) ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&family=Archivo:wght@400;500;600;700;800;900&display=swap'); /* ---------- Tokens / theming ---------- */ :root { --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); /* defaults overridable by tweaks */ --radius: 4px; --ease: cubic-bezier(.2, .7, .2, 1); } /* DIRECTION A — Hi-Vis Industrial */ html[data-dir="a"] { --bg: oklch(0.19 0.006 256); --bg-2: oklch(0.23 0.008 256); --surface: oklch(0.25 0.009 256); --surface-2: oklch(0.29 0.01 256); --line: oklch(0.36 0.012 256); --line-soft: oklch(0.30 0.01 256); --ink: oklch(0.97 0.004 90); --ink-2: oklch(0.78 0.008 256); --ink-3: oklch(0.62 0.01 256); --accent: oklch(0.80 0.165 78); /* hi-vis amber */ --accent-ink: oklch(0.20 0.04 80); /* text on accent */ --accent-2: oklch(0.62 0.21 27); /* alert red */ --hero-overlay: linear-gradient(180deg, oklch(0.16 0.006 256 / .72), oklch(0.15 0.006 256 / .92)); --card-shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 18px 40px -24px oklch(0 0 0 / .8); --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; --display-tracking: .01em; --display-transform: uppercase; --display-weight: 700; } /* DIRECTION B — Steel Blue Corporate */ html[data-dir="b"] { --bg: oklch(0.95 0.004 248); --bg-2: oklch(0.92 0.006 248); --surface: oklch(0.99 0.002 248); --surface-2: oklch(0.97 0.004 248); --line: oklch(0.84 0.01 248); --line-soft: oklch(0.89 0.008 248); --ink: oklch(0.24 0.02 252); --ink-2: oklch(0.42 0.02 252); --ink-3: oklch(0.56 0.018 252); --accent: oklch(0.32 0.012 256); /* graphite — monochrome, matches B&W logo */ --accent-ink: oklch(0.99 0.002 256); --accent-2: oklch(0.58 0.16 32); /* warm brick */ --hero-overlay: linear-gradient(180deg, oklch(0.20 0.02 252 / .58), oklch(0.16 0.02 252 / .86)); --card-shadow: 0 1px 0 oklch(1 0 0 / .6) inset, 0 18px 40px -28px oklch(0.2 0.03 252 / .35); --font-display: 'Archivo', sans-serif; --font-body: 'Archivo', sans-serif; --display-tracking: -.015em; --display-transform: none; --display-weight: 800; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; padding: 0; } /* ---------- Type ---------- */ .display { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); line-height: 0.96; text-wrap: balance; } .eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-weight: 600; font-size: 13px; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } .eyebrow.center::after { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } .eyebrow.center { justify-content: center; } .section-title { font-size: clamp(34px, 5.2vw, 62px); } .lede { color: var(--ink-2); font-size: clamp(17px, 2vw, 20px); text-wrap: pretty; } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } section { position: relative; } .section-pad { padding-block: clamp(64px, 10vw, 128px); } .section-head { max-width: 720px; } .section-head .section-title { margin-top: 18px; } .section-head .lede { margin-top: 20px; } /* ---------- Buttons ---------- */ .btn { --btn-py: 15px; --btn-px: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: var(--btn-py) var(--btn-px); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; border-radius: var(--radius); transition: transform .15s var(--ease), background .2s, color .2s, box-shadow .2s; white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -12px var(--accent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--accent); } .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); transform: translateY(-2px); } .btn-block { width: 100%; } .btn-lg { --btn-py: 18px; --btn-px: 32px; font-size: 16px; } /* ---------- Image placeholders ---------- */ .ph { position: relative; background-color: var(--surface-2); background-image: repeating-linear-gradient(135deg, oklch(0.5 0.02 256 / .10) 0 2px, transparent 2px 11px); overflow: hidden; isolation: isolate; } html[data-dir="b"] .ph { background-color: var(--bg-2); background-image: repeating-linear-gradient(135deg, oklch(0.4 0.03 252 / .09) 0 2px, transparent 2px 11px); } .ph::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: 'Barlow', monospace; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .ph::before { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--line); pointer-events: none; } /* Real image inside a placeholder container fills it and hides the dashed/label chrome. */ .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ph:has(> img)::before, .ph:has(> img)::after { display: none; } html[data-dir="a"] .ph:has(> img), html[data-dir="b"] .ph:has(> img) { background-image: none; } .ph.ph-contain, html[data-dir="a"] .ph.ph-contain, html[data-dir="b"] .ph.ph-contain { background-color: #fff; } .ph.ph-contain > img { object-fit: contain; padding: 18px; } /* ============================================================ DARK CONTRAST BANDS — re-map tokens locally so all child components (cards, eyebrows, text) recolor automatically. Used to break up the rhythm between light sections. ============================================================ */ section.band-dark { background: oklch(0.205 0.008 256); color: oklch(0.96 0.004 256); --accent: oklch(0.92 0.02 84); /* warm off-white accent so eyebrows/specs read on dark */ --ink: oklch(0.97 0.004 256); --ink-2: oklch(0.76 0.01 256); --ink-3: oklch(0.60 0.012 256); --surface: oklch(0.25 0.009 256); --surface-2: oklch(0.285 0.01 256); --line-soft: oklch(0.31 0.01 256); --line: oklch(0.38 0.012 256); --card-shadow: 0 1px 0 oklch(1 0 0 / .05) inset, 0 22px 44px -26px oklch(0 0 0 / .85); } html[data-dir="a"] section.band-dark { background: oklch(0.165 0.006 256); } /* keep the contained reach diagram readable on dark */ section.band-dark .ph.ph-contain { background-color: #fff; } /* ============================================================ HEADER ============================================================ */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 60; padding-top: clamp(14px, 2.2vw, 26px); } .nav { display: flex; align-items: center; gap: 28px; height: 92px; } .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .brand-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-family: var(--font-display); font-weight: 800; font-size: 22px; position: relative; overflow: hidden; } .brand-mark::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, oklch(0 0 0 / .16) 0 4px, transparent 4px 8px); mix-blend-mode: multiply; opacity: .5; } .brand-text { line-height: 1.05; } .brand-text b { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; display: block; } .brand-text span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; transition: color .2s, background .2s; } .nav-links a:hover { color: var(--ink); background: var(--surface); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-phone { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; } .nav-phone svg { width: 17px; height: 17px; color: var(--accent); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); } .nav-toggle svg { width: 26px; height: 26px; } /* --- Logo badge + header-over-hero contrast --- */ .brand-badge { width: 46px; height: 46px; flex: none; padding: 5px; background: #fff; border-radius: 50%; object-fit: contain; box-shadow: 0 1px 3px oklch(0 0 0 / .22); } .brand-logo { height: 58px; width: auto; flex: none; display: block; } .foot-logo { height: 58px; width: auto; } /* The DCP lockup is two-tone, so it can't flat-knockout to white cleanly. Over the dark hero (and on the dark scrolled header in dir A) we sit it on a small white plate; on the light scrolled header (dir B) it shows as-is. */ .brand { border-radius: 7px; transition: background .3s, padding .3s, box-shadow .3s; } .site-header:not(.scrolled) .brand, html[data-dir="a"] .site-header.scrolled .brand { background: #fff; padding: 8px 13px; box-shadow: 0 4px 16px -6px oklch(0 0 0 / .4); } /* Header is transparent over the dark hero until scrolled: force light chrome. */ .site-header:not(.scrolled) .brand-text b { color: #fff; } .site-header:not(.scrolled) .brand-text span { color: rgba(255,255,255,.65); } .site-header:not(.scrolled) .nav-links a { color: rgba(255,255,255,.82); } .site-header:not(.scrolled) .nav-links a:hover { color: #fff; background: rgba(255,255,255,.12); } .site-header:not(.scrolled) .nav-phone { color: #fff; } .site-header:not(.scrolled) .nav-phone svg { color: #fff; } .site-header:not(.scrolled) .nav-toggle { color: #fff; } html[data-dir="b"] .site-header:not(.scrolled) .btn-primary { background: #fff; color: oklch(0.22 0.01 256); box-shadow: 0 8px 22px -12px oklch(0 0 0 / .6); } /* Footer logo: dark bg in A (white), light bg in B (black). */ html[data-dir="a"] .foot-logo { filter: brightness(0) invert(1); } html[data-dir="b"] .foot-logo { filter: none; } /* mobile drawer */ .mobile-drawer { position: fixed; inset: 0; z-index: 70; background: color-mix(in oklab, var(--bg) 97%, transparent); backdrop-filter: blur(8px); display: flex; flex-direction: column; padding: 24px var(--gutter); transform: translateX(100%); transition: transform .35s var(--ease); visibility: hidden; } .mobile-drawer.open { transform: translateX(0); visibility: visible; } .mobile-drawer .md-top { display: flex; align-items: center; justify-content: space-between; } .mobile-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; } .mobile-drawer nav a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-weight: 700; font-size: 30px; padding: 12px 0; color: var(--ink); border-bottom: 1px solid var(--line-soft); } .mobile-drawer .md-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: clamp(96px, 11vw, 124px); min-height: min(92vh, 880px); display: flex; align-items: stretch; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media .ph { position: absolute; inset: 0; } .hero-media .ph::before { display: none; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(96deg, oklch(0.16 0.006 256 / .88) 0%, oklch(0.16 0.006 256 / .60) 42%, oklch(0.16 0.006 256 / .20) 100%), var(--hero-overlay); } html[data-dir="a"] .hero { color: oklch(0.98 0.004 90); } html[data-dir="b"] .hero { color: oklch(0.98 0.004 90); } .hero .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(48px, 9vw, 96px); width: 100%; } .hero-inner { max-width: 880px; } .hero h1 { font-size: clamp(44px, 8.2vw, 110px); margin-top: 22px; color: #fff; } .hero h1 .hl { background: var(--accent); color: var(--accent-ink); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero .lede { color: oklch(0.92 0.01 256); margin-top: 26px; max-width: 620px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .hero .eyebrow { color: var(--accent); } .hero .eyebrow::before { background: var(--accent); } html[data-dir="b"] .hero .eyebrow { color: rgba(255,255,255,.88); } html[data-dir="b"] .hero .eyebrow::before { background: rgba(255,255,255,.88); } /* Hero sits on dark imagery: ghost button light in both directions; primary inverts to white in mono B. */ .hero .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); } .hero .btn-ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; } html[data-dir="b"] .hero .btn-primary { background: #fff; color: oklch(0.2 0.01 256); box-shadow: 0 12px 28px -12px oklch(0 0 0 / .55); } html[data-dir="b"] .hero .btn-primary:hover { background: oklch(0.95 0.004 248); } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid oklch(1 0 0 / .18); } .hero-stats .stat { padding: 22px 22px 0 0; } .hero-stats .stat b { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1; color: #fff; display: block; } .hero-stats .stat span { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.85 0.01 256); margin-top: 8px; display: block; } /* ============================================================ MARQUEE / TRUST STRIP ============================================================ */ .marquee { background: var(--accent); color: var(--accent-ink); overflow: hidden; border-block: 1px solid oklch(0 0 0 / .12); } .marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee .item { display: inline-flex; align-items: center; gap: 16px; padding: 14px 28px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; white-space: nowrap; } .marquee .item::after { content: "✦"; opacity: .5; font-size: 12px; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ============================================================ VALUE PROPS ============================================================ */ .props { background: var(--bg); } .props-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .prop { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px 30px 34px; box-shadow: var(--card-shadow); position: relative; overflow: hidden; transition: transform .25s var(--ease), border-color .25s; } .prop:hover { transform: translateY(-4px); border-color: var(--accent); } .prop .num { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent); letter-spacing: .14em; } .prop .ic { width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center; margin: 8px 0 20px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); } .prop .ic svg { width: 26px; height: 26px; } .prop h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 24px; font-weight: 700; } .prop p { color: var(--ink-2); margin-top: 12px; font-size: 16px; } /* ============================================================ SPLIT / ABOUT ============================================================ */ .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split.flip .split-media { order: -1; } .split-media { position: relative; } .split-media .ph { aspect-ratio: 4/5; border-radius: var(--radius); } .split-badge { position: absolute; left: -18px; bottom: -18px; z-index: 3; background: var(--accent); color: var(--accent-ink); padding: 20px 24px; border-radius: var(--radius); box-shadow: 0 20px 40px -18px oklch(0 0 0 / .6); } .split-badge b { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: .9; display: block; } .split-badge span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; } .checklist { display: grid; gap: 14px; margin-top: 28px; } .checklist li { display: flex; gap: 14px; align-items: flex-start; } .checklist .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); display: grid; place-items: center; margin-top: 2px; } .checklist .ck svg { width: 15px; height: 15px; } .checklist b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-weight: 700; font-size: 17px; } .checklist p { color: var(--ink-2); font-size: 15.5px; } /* ============================================================ FLEET ============================================================ */ .fleet { background: var(--bg-2); } .fleet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; } .pump-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); display: flex; flex-direction: column; transition: transform .25s var(--ease), border-color .25s; } .pump-card:hover { transform: translateY(-4px); border-color: var(--accent); } .pump-card .ph { aspect-ratio: 16/10; } .pump-card .ph.ph-tall { aspect-ratio: 1 / 1; } @media (max-width: 860px) { .pump-card .ph.ph-tall { aspect-ratio: 4 / 3; } } /* Two diagrams shown side by side, each fully visible on white */ .ph.ph-duo { display: flex; align-items: center; justify-content: center; gap: 1.5%; padding: 14px; background-color: #fff; } html[data-dir="a"] .ph.ph-duo, html[data-dir="b"] .ph.ph-duo { background-color: #fff; } .ph.ph-duo > img { position: static; inset: auto; width: 49%; height: 100%; object-fit: contain; padding: 0; } .ph.ph-duo > img + img { border-left: 1px solid var(--line-soft); padding-left: 2%; } /* Full-width diagrams card: two labeled pump columns, each a reach + outrigger pair */ .pump-card.pump-card-wide { grid-column: 1 / -1; } .diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-soft); } .diag-col { padding: 24px clamp(20px, 3vw, 32px) 28px; } .diag-col + .diag-col { border-left: 1px solid var(--line-soft); } .diag-label { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 14px; } .diag-pair { display: flex; gap: 2%; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius); padding: 16px; height: clamp(220px, 22vw, 300px); } .diag-pair img { position: static; inset: auto; height: 100%; width: auto; max-width: 49%; object-fit: contain; } @media (max-width: 860px) { .diag-grid { grid-template-columns: 1fr; } .diag-col + .diag-col { border-left: 0; border-top: 1px solid var(--line-soft); } } .pump-card .pc-body { padding: 26px 28px 30px; } .pump-card .tag { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--accent); } .pump-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 27px; font-weight: 700; margin-top: 8px; } .pump-card p { color: var(--ink-2); margin-top: 10px; font-size: 15.5px; } .spec-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .spec { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; padding: 7px 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-2); } .spec b { color: var(--ink); } /* ============================================================ SERVICES ============================================================ */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; } .svc { position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px 26px 30px; background: var(--surface); transition: transform .25s var(--ease), border-color .25s, background .25s; overflow: hidden; } .svc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--ease); } .svc:hover { transform: translateY(-4px); border-color: var(--line); } .svc:hover::before { transform: scaleY(1); } .svc .svc-ic { width: 46px; height: 46px; color: var(--accent); margin-bottom: 18px; } .svc .svc-ic svg { width: 100%; height: 100%; } .svc h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em; font-size: 21px; font-weight: 700; } .svc p { color: var(--ink-2); margin-top: 10px; font-size: 15px; } /* ============================================================ PROCESS ============================================================ */ .process { background: var(--bg-2); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; counter-reset: step; } .step { position: relative; } .step .sn { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--accent); display: block; } .step h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; font-weight: 700; margin-top: 14px; } .step p { color: var(--ink-2); margin-top: 10px; font-size: 15px; } .step:not(:last-child)::after { content: ""; position: absolute; top: 26px; right: -10px; width: 20px; height: 2px; background: var(--line); } /* ============================================================ PROJECTS GALLERY ============================================================ */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; margin-top: 48px; } .gallery .gi { border-radius: var(--radius); overflow: hidden; position: relative; padding: 0; border: 0; background: var(--surface-2); cursor: pointer; text-align: left; font: inherit; color: inherit; display: block; } .gallery .gi img { transition: transform .5s var(--ease); } .gallery .gi:hover img { transform: scale(1.06); } .gallery .gi:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .gallery .gi .gzoom { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: oklch(0.15 0.01 256 / .6); color: #fff; backdrop-filter: blur(4px); opacity: 0; transform: scale(.85); transition: .25s var(--ease); } .gallery .gi .gzoom svg { width: 17px; height: 17px; } .gallery .gi:hover .gzoom, .gallery .gi:focus-visible .gzoom { opacity: 1; transform: scale(1); } .gallery .gi .ph { position: absolute; inset: 0; } .gallery .gi.span2c { grid-column: span 2; } .gallery .gi.span2r { grid-row: span 2; } .gallery .gi .gcap { display: none; } /* ============================================================ WHY US (dark band, dir-agnostic) ============================================================ */ .whyus { background: var(--bg); } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } .why { padding: 32px 28px; border-right: 1px solid var(--line-soft); background: var(--surface); } .why:last-child { border-right: 0; } .why .wn { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 13px; letter-spacing: .14em; } .why h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 19px; font-weight: 700; margin-top: 16px; } .why p { color: var(--ink-2); margin-top: 10px; font-size: 14.5px; } /* ============================================================ CTA BAND ============================================================ */ .cta-band { position: relative; overflow: hidden; background: var(--accent); color: var(--accent-ink); } .cta-band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, oklch(0 0 0 / .05) 0 14px, transparent 14px 28px); pointer-events: none; } .cta-band .wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-block: clamp(48px, 7vw, 80px); } .cta-band h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(30px, 4.5vw, 56px); line-height: .98; letter-spacing: -.01em; max-width: 16ch; } .cta-band .cta-right { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .cta-phone { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); display: inline-flex; align-items: center; gap: 14px; } .cta-phone svg { width: 34px; height: 34px; } .cta-band .btn-primary { background: var(--accent-ink); color: var(--accent); box-shadow: none; } .cta-band .btn-primary:hover { background: oklch(0.1 0.01 256); } .cta-sub { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; opacity: .85; } /* ============================================================ SISTER COMPANIES ============================================================ */ .family { background: var(--bg-2); } .fam-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; } .fam { display: flex; gap: 22px; align-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 28px; transition: border-color .25s, transform .25s var(--ease); } .fam:hover { border-color: var(--accent); transform: translateY(-3px); } .fam .fam-logo { width: 64px; height: 64px; flex: none; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line-soft); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--accent); } .fam h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; font-weight: 700; } .fam p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; } .fam .fam-go { margin-left: auto; color: var(--accent); flex: none; } .fam .fam-go svg { width: 24px; height: 24px; } /* ============================================================ CONTACT / QUOTE ============================================================ */ .contact { background: var(--bg); } .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 60px); } .contact-info .ci-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); } .contact-info .ci-item:first-of-type { border-top: 1px solid var(--line-soft); } .contact-info .ci-ic { flex: none; width: 44px; height: 44px; border-radius: var(--radius); background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; } .contact-info .ci-ic svg { width: 20px; height: 20px; } .contact-info .ci-item > div { display: flex; flex-direction: column; } .contact-info .ci-item .lbl { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; color: var(--ink-3); } .contact-info .ci-item .val { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-top: 4px; line-height: 1.25; } .contact-info .ci-item .val a:hover { color: var(--accent); } .map-embed { margin-top: 26px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); height: 220px; filter: grayscale(.3) contrast(1.05); } html[data-dir="a"] .map-embed { filter: grayscale(.6) invert(.9) hue-rotate(180deg) contrast(.9); } .map-embed iframe { width: 100%; height: 100%; border: 0; } .quote-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(26px, 4vw, 40px); box-shadow: var(--card-shadow); } .quote-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; font-weight: 700; } .quote-card .qsub { color: var(--ink-2); font-size: 15px; margin-top: 8px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } .field { display: flex; flex-direction: column; gap: 7px; } .field.full { grid-column: 1 / -1; } .field label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 600; color: var(--ink-3); } .field input, .field select, .field textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; transition: border-color .2s, box-shadow .2s; } .field textarea { resize: vertical; min-height: 96px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .form-foot { margin-top: 20px; } .form-note { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; text-align: center; } .form-success { display: none; text-align: center; padding: 30px 10px; } .form-success.show { display: block; } .form-success .fs-ic { width: 60px; height: 60px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 20%, transparent); color: var(--accent); display: grid; place-items: center; margin: 0 auto 18px; } .form-success h3 { margin-bottom: 8px; } .form-success p { color: var(--ink-2); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--line-soft); padding-block: 64px 28px; } .foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; } .foot-brand .brand { margin-bottom: 18px; } .foot-brand p { color: var(--ink-2); font-size: 14.5px; max-width: 36ch; } .foot-col h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--ink-3); margin-bottom: 16px; } .foot-col ul { display: grid; gap: 10px; } .foot-col a, .foot-col li { color: var(--ink-2); font-size: 14.5px; } .foot-col a:hover { color: var(--accent); } .foot-bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-soft); } .foot-bottom p { color: var(--ink-3); font-size: 13px; } .foot-bottom a { color: var(--ink-2); } .foot-bottom a:hover { color: var(--accent); } /* ============================================================ QUOTE MODAL ============================================================ */ .modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; } .modal.open { display: flex; } .modal-backdrop { position: absolute; inset: 0; background: oklch(0.1 0.01 256 / .7); backdrop-filter: blur(4px); } .modal-card { position: relative; z-index: 2; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; animation: modalIn .3s var(--ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } .modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; z-index: 3; } .modal-close:hover { color: var(--ink); background: var(--surface); } .modal-close svg { width: 20px; height: 20px; } /* ============================================================ LIGHTBOX ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); } .lightbox.open { display: flex; } .lightbox-backdrop { position: absolute; inset: 0; background: oklch(0.08 0.008 256 / .92); backdrop-filter: blur(6px); } .lightbox-stage { position: relative; z-index: 2; max-width: min(1400px, 96vw); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: lbIn .32s var(--ease); } @keyframes lbIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } .lightbox-img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 40px 90px -30px oklch(0 0 0 / .9); background: var(--bg-2); } .lightbox-cap { display: none; } .lightbox-count { color: oklch(0.62 0.01 256); letter-spacing: .14em; } .lightbox-close { position: absolute; top: -10px; right: -10px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: oklch(0.2 0.01 256); display: grid; place-items: center; box-shadow: 0 8px 24px -8px oklch(0 0 0 / .6); } .lightbox-close:hover { transform: scale(1.06); } .lightbox-close svg { width: 22px; height: 22px; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 54px; height: 54px; border-radius: 50%; background: oklch(1 0 0 / .12); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background .2s, transform .2s; } .lightbox-nav:hover { background: oklch(1 0 0 / .24); } .lightbox-nav svg { width: 26px; height: 26px; } .lightbox-prev { left: clamp(8px, 2vw, 24px); } .lightbox-next { right: clamp(8px, 2vw, 24px); } .lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); } .lightbox-next:hover { transform: translateY(-50%) translateX(3px); } @media (max-width: 640px) { .lightbox-nav { width: 44px; height: 44px; } .lightbox-close { top: 4px; right: 4px; } } /* ============================================================ REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Kill transitions during a live theme/direction switch so var()-based colors recompute instantly (works around stale-transition value bug). */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1040px) { .props-grid, .svc-grid, .why-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .step:nth-child(2)::after { display: none; } .why-grid .why { border-bottom: 1px solid var(--line-soft); } .why-grid .why:nth-child(2) { border-right: 0; } .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; } .gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .nav-links, .nav-phone { display: none; } .nav-toggle { display: flex; } .nav-cta .btn { display: none; } .split { grid-template-columns: 1fr; } .split.flip .split-media { order: 0; } .split-media .ph { aspect-ratio: 16/11; } .contact-grid { grid-template-columns: 1fr; } .fleet-grid, .fam-grid { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: repeat(2, 1fr); gap-row: 8px; } .hero-stats .stat:nth-child(n+3) { border-top: 1px solid oklch(1 0 0 / .12); margin-top: 8px; } } @media (max-width: 560px) { .props-grid, .svc-grid, .why-grid, .steps, .gallery, .form-grid { grid-template-columns: 1fr; } .why { border-right: 0; } .cta-band .wrap { flex-direction: column; align-items: flex-start; } .gallery .gi.span2c, .gallery .gi.span2r { grid-column: auto; grid-row: auto; } } /* ============================================================ CONTACT FORM 7 — adapt to the quote card styling ============================================================ */ /* CF7 wraps the form; strip its default margins so the card padding controls spacing */ .quote-card .wpcf7, .modal-card .wpcf7 { margin: 0; } .quote-card .wpcf7-form, .modal-card .wpcf7-form { margin: 0; } /* Inputs CF7 generates inherit the same look as the native form fields */ .quote-card .wpcf7 .field input, .quote-card .wpcf7 .field select, .quote-card .wpcf7 .field textarea, .modal-card .wpcf7 .field input, .modal-card .wpcf7 .field select, .modal-card .wpcf7 .field textarea { width: 100%; } /* CF7 wraps each control in a span.wpcf7-form-control-wrap — make it block so it fills the field */ .wpcf7-form-control-wrap { display: block; } /* Submit button keeps theme button styling via class:btn etc.; ensure full width */ .wpcf7 .btn-block { width: 100%; } .wpcf7-spinner { margin: 14px auto 0; display: block; } /* Validation + response messages */ .wpcf7 .wpcf7-not-valid-tip { font-family: var(--font-body); font-size: 12.5px; color: var(--accent-2); margin-top: 6px; display: block; } .wpcf7-form-control.wpcf7-not-valid { border-color: var(--accent-2) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-2) 22%, transparent) !important; } .wpcf7 .wpcf7-response-output { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 13px; line-height: 1.5; margin: 22px 0 0; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); } .wpcf7 form.sent .wpcf7-response-output { border-color: color-mix(in oklab, var(--accent) 60%, var(--line)); background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--ink); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: color-mix(in oklab, var(--accent-2) 55%, var(--line)); background: color-mix(in oklab, var(--accent-2) 12%, transparent); color: var(--ink); }