/* ============================================================================ B&G Drilling & Construction — "Trenchline" rugged-industrial theme Layers on top of styles.css (base kit). Brand tokens are set inline in each page AFTER styles.css so they win the cascade; this file does the bespoke design work the tokens can't (type, header, accents, signature). ============================================================================ */ /* ---- Display type: Oswald condensed for headings, Inter for body --------- */ h1, h2, h3, h4, .x-hero h1, .x-banner h1, .x-head h2, .x-bigcta h2, .x-stat .num, .nav-cta, .x-btn { font-family: 'Oswald', 'Inter', system-ui, sans-serif; } .x-hero h1, .x-banner h1, .x-head h2, .x-bigcta h2, .x-svc h3, .x-areamap-h, .x-body h2 { text-transform: uppercase; letter-spacing: -0.005em; font-weight: 700; } .x-hero h1 { letter-spacing: 0; line-height: 1.0; } .x-eyebrow, .x-head .k, .section-head .eyebrow, .x-areamap-k, .x-owner-title { font-family: 'Inter', sans-serif; } /* Squared, industrial corners everywhere */ :root { --radius: 3px; } .x-btn { border-radius: 2px; } .x-eyebrow { border-radius: 0; } /* ============================================================================ HEADER — dark charcoal bar, logo on a clean white badge plate so the color logo (red B / charcoal G) reads on the dark background. ============================================================================ */ .site-header { background: var(--brand-secondary); border-bottom: 3px solid var(--brand-primary); height: 76px; } .nav-logo img { height: 46px; max-width: 240px; background: #fff; padding: 5px 9px; border-radius: 3px; } .nav-links a { color: #EDEDEF; font-weight: 500; } .nav-links a:hover { color: #fff; } .nav-links > li > a:not(.nav-cta) { text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; font-weight: 600; } .nav-parent { color: #EDEDEF; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; font-weight: 600; } .nav-cta { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; border-radius: 2px; } .nav-toggle { color: #fff; } /* Dropdown stays light (readable) but anchored to the dark bar */ .nav-dropdown a { text-transform: none; letter-spacing: 0; font-weight: 600; } @media (max-width: 860px) { .nav-links { background: var(--brand-secondary); border-top: 1px solid rgba(255,255,255,.12); } .nav-links a { border-bottom-color: rgba(255,255,255,.1); color: #EDEDEF; } .nav-dropdown a { color: #cfd0d3; } } /* ============================================================================ HERO — punchier scrim + a hazard-stripe seam at the base for the "underground / heavy equipment" feel. ============================================================================ */ .x-hero { min-height: 88vh; } .x-hero .x-hero-scrim { background: linear-gradient(180deg, rgba(20,20,22,.55) 0%, rgba(20,20,22,.35) 35%, rgba(20,20,22,.92) 100%); } .x-hero h1 em { color: var(--brand-primary); font-style: normal; } .x-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; z-index: 3; background: repeating-linear-gradient(45deg, var(--brand-primary) 0 22px, #1b1b1e 22px 44px); } /* Eyebrow gets a harder edge */ .x-eyebrow { background: var(--brand-primary); border-left: 0; } /* ============================================================================ STAT STRIP — add a thin red rule between the hero seam and the numbers ============================================================================ */ .x-stats .container { padding-top: 44px; padding-bottom: 44px; } .x-stat .num { font-weight: 700; } /* ============================================================================ SIGNATURE SECTION — "The Trenchless Advantage" split band. Charcoal panel + cutaway image, with a measured-spec list. ============================================================================ */ .bg-advantage { background: var(--brand-secondary); color: #fff; overflow: hidden; } .bg-advantage .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: var(--space-12); padding-bottom: var(--space-12); } .bg-advantage h2 { color: #fff; } .bg-advantage .x-head { margin-bottom: 22px; } .bg-advantage .lead { color: rgba(255,255,255,.82); font-size: 1.12rem; margin-bottom: 26px; } .bg-adv-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .bg-adv-specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); } .bg-adv-specs .k { font-weight: 600; color: #fff; } .bg-adv-specs .v { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--brand-primary); font-size: .95rem; text-align: right; } .bg-adv-media { position: relative; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 4/5; } .bg-adv-media img { width: 100%; height: 100%; object-fit: cover; } .bg-adv-media::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: repeating-linear-gradient(45deg, var(--brand-primary) 0 18px, #1b1b1e 18px 36px); } @media (max-width: 860px) { .bg-advantage .container { grid-template-columns: 1fr; gap: 34px; } .bg-adv-media { aspect-ratio: 16/10; } } /* ============================================================================ SERVICES — flat-bottom tiles, heavier headings already handled by Oswald. Tighten the gradient so the trade photos read. ============================================================================ */ .x-svc { border-radius: 4px; } .x-svc h3 { font-weight: 700; letter-spacing: 0; } /* Service icon chip used on the services index / why band */ .bg-svc-ic { width: 56px; height: 56px; padding: 11px; border-radius: 4px; background: var(--brand-secondary); margin-bottom: 16px; } .bg-svc-ic img { width: 100%; height: 100%; object-fit: contain; filter: none; } /* ============================================================================ WHY / FEATURES — squared icon plates ============================================================================ */ .x-feat .ic { border-radius: 4px; background: color-mix(in srgb, var(--brand-primary) 14%, transparent); } .x-feat h4 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .01em; font-weight: 600; } /* Process step numbers in the display face */ .x-step .n { font-family: 'Oswald', sans-serif; } .x-step h4 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .01em; font-weight: 600; } /* ============================================================================ COUNTY / AREA accents ============================================================================ */ .x-county-block h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .02em; } /* Big CTA: keep the hazard seam motif on top */ .x-bigcta { position: relative; } .x-bigcta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(45deg, #1b1b1e 0 18px, rgba(0,0,0,.25) 18px 36px); } /* FAQ summary in display face */ .x-faq summary { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .01em; font-size: 1.05rem; } /* Footer logo plate */ .site-footer .foot-logo { background:#fff; padding:6px 10px; border-radius:3px; display:inline-block; margin-bottom:14px; } .site-footer .foot-logo img { height: 40px; width: auto; display:block; } /* Service-area in-body photo — framed job photo with hazard seam + caption */ .bg-areaphoto { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-2); } .bg-areaphoto img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .bg-areaphoto::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2; background: repeating-linear-gradient(45deg, var(--brand-primary) 0 18px, #1b1b1e 18px 36px); } .bg-areaphoto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; color: #fff; font-size: .92rem; font-weight: 600; letter-spacing: .01em; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); } /* Quote form panel framing */ .x-instaquote .embed-wrap, .x-instaquote-form { max-width: 760px; margin: 0 auto; } /* On-page quote form section (injected on every page) */ .bg-quote-panel { max-width: 720px; margin: 0 auto; } .bg-quote-panel iframe { width: 100%; border: 0; display: block; min-height: 560px; } .bg-quote-fallback { padding: 40px 28px; text-align: center; } .bg-quote-fallback p { color: var(--brand-text-muted); margin: 0 0 18px; font-size: 1.05rem; } /* ============================================================================ FLARE PASS — richer buttons, hover micro-interactions, and entrance motion. All CSS-only so it propagates to every page from this one file. ============================================================================ */ /* ---- Buttons: gradient fill + animated shine sweep + lift ---------------- */ .x-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .15s ease, box-shadow .25s ease, background .25s ease; } .x-btn svg { transition: transform .25s ease; } .x-btn:hover svg { transform: translateX(4px); } /* diagonal light sweep that flies across on hover */ .x-btn::before { content: ''; position: absolute; top: 0; left: -130%; z-index: -1; width: 65%; height: 100%; transform: skewX(-22deg); background: linear-gradient(120deg, transparent, rgba(255,255,255,.38), transparent); transition: left .55s cubic-bezier(.4,.1,.2,1); } .x-btn:hover::before { left: 145%; } .x-btn-primary { background: linear-gradient(135deg, #D63A2F 0%, #B5291F 100%); box-shadow: 0 8px 22px rgba(200,51,42,.32); border: none; } .x-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(200,51,42,.45); color: #fff; } .x-btn-primary:active { transform: translateY(-1px); } .x-btn-ghost { transition: transform .15s ease, background .25s ease, border-color .25s ease; } .x-btn-ghost:hover { transform: translateY(-3px); background: var(--brand-primary); border-color: var(--brand-primary); } .x-btn-white { box-shadow: 0 8px 22px rgba(0,0,0,.18); } .x-btn-white:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.28); } /* Header CTA: gradient + lift to match */ .nav-cta { background: linear-gradient(135deg, #D63A2F, #B5291F); box-shadow: 0 4px 14px rgba(200,51,42,.3); transition: transform .15s ease, box-shadow .25s ease, opacity .2s ease; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,51,42,.42); opacity: 1; } /* ---- Eyebrow tick: short red rule before section kickers ----------------- */ .x-head .k::before { content: ''; display: inline-block; width: 26px; height: 2px; background: var(--brand-primary); vertical-align: middle; margin: -3px 11px 0 0; } .x-head.center .k::before { margin-left: 0; } /* ---- Cards: animated top accent bar + heading shift ---------------------- */ .card { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.4,.1,.2,1); } .card:hover { border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--brand-border)); } .card:hover::before { transform: scaleX(1); } .card h3 { transition: color .2s ease; } .card:hover h3 { color: var(--brand-primary); } /* ---- Service tiles: growing bottom accent + arrow slide ------------------ */ .x-svc::before { content: ''; position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: 4px; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4,.1,.2,1); } .x-svc:hover::before { transform: scaleX(1); } .x-svc .x-svc-body { transition: transform .3s ease; } .x-svc:hover .x-svc-body { transform: translateY(-4px); } .x-svc .x-arrow span { display: inline-block; transition: transform .25s ease; } .x-svc:hover .x-arrow span { transform: translateX(6px); } /* ---- Why-us icon plates: subtle pop on hover ----------------------------- */ .x-feat .ic { transition: transform .2s ease, background .2s ease; } .x-feat:hover .ic { transform: translateY(-3px) scale(1.05); background: color-mix(in srgb, var(--brand-primary) 22%, transparent); } /* ---- Desktop nav: animated underline on hover ---------------------------- */ @media (min-width: 861px) { .nav-links > li > a:not(.nav-cta) { position: relative; } .nav-links > li > a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .nav-links > li > a:not(.nav-cta):hover::after { transform: scaleX(1); } } /* ---- Stat numbers: subtle weight/shadow for punch ------------------------ */ .x-stat .num { text-shadow: 0 2px 14px rgba(200,51,42,.35); } /* ---- In-body area photo: gentle zoom on hover ---------------------------- */ .bg-areaphoto img { transition: transform .5s ease; } .bg-areaphoto:hover img { transform: scale(1.04); } /* ---- Hero / banner entrance: staggered fade-up on load ------------------- */ @keyframes bgRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .x-hero .container > *, .x-banner .container > * { animation: bgRise .7s cubic-bezier(.2,.7,.2,1) both; } .x-hero .container > *:nth-child(1), .x-banner .container > *:nth-child(1) { animation-delay: .02s; } .x-hero .container > *:nth-child(2), .x-banner .container > *:nth-child(2) { animation-delay: .10s; } .x-hero .container > *:nth-child(3), .x-banner .container > *:nth-child(3) { animation-delay: .18s; } .x-hero .container > *:nth-child(4) { animation-delay: .26s; } .x-hero .container > *:nth-child(5) { animation-delay: .34s; } @media (prefers-reduced-motion: reduce) { .x-hero .container > *, .x-banner .container > * { animation: none; } .x-btn, .x-btn::before, .card, .x-svc .x-svc-body, .x-feat .ic, .bg-areaphoto img { transition: none; } }