/** * Site chrome — load last on every page so header and footer match index.html. * Imports canonical layout/nav rules after page-specific stylesheets. */ @import url("../csth-footer-layout.css"); @import url("csth-site-ui.css"); @import url("../csth-header-nav.css"); /* * Sticky header on subpages — mockup CSS sets overflow-x: hidden on .page-shell, * which breaks position: sticky for the header inside it. Index keeps the header * on , so sticky works there. clip preserves horizontal bleed control. */ .page-shell.breakdance { overflow-x: clip; } /* Match index header compositing on subpages (.page-shell wrapper). */ .page-shell.breakdance > .bde-header-builder-143-100, body.breakdance > .bde-header-builder-143-100, body.page-csth-home > .bde-header-builder-143-100 { isolation: isolate; transform: translate3d(0, 0, 0); backface-visibility: hidden; } /* Sticky header site-wide — same behavior as index.html */ .bde-header-builder.bde-header-builder--sticky, .bde-header-builder.bde-header-builder--sticky-scroll, .bde-header-builder.bde-header-builder--sticky-scroll-slide { position: sticky; top: 0; z-index: var(--bde-z-index-header, 1000); } /* * Section intro bands: stack body copy under the heading (not beside it). */ .section-header { grid-template-columns: 1fr; row-gap: 1rem; } .section-header h2 { max-width: none; } .section-header p { max-width: min(70ch, 100%); align-self: start; justify-self: start; } #coverage .section-header > p, #coverage-dynamic-trucks .section-header > p, #coverage-mixer-types .section-header > p, #coverage-refuse-types .section-header > p { padding-top: 0; } .page-towing-sub .section-header, .page-towing-sub .towing-network-header { grid-template-columns: 1fr; align-items: start; row-gap: 1rem; } .page-towing-sub .towing-network-header h2 { max-width: none; } /* OSP parts lane pages — match downloads band to product theme */ .page-main-sub[data-osp-subpage="mixer"] { --brand: #2051a0; --brand-deep: #183d78; } .page-main-sub[data-osp-subpage="refuse"], .page-main-sub[data-osp-subpage="shop-all-refuse"] { --brand: #1b8f54; --brand-deep: #126b3f; } .page-main-sub[data-osp-subpage="towing"] { --brand: #cc4749; --brand-deep: #9e2d30; } /* OSP parts lane heroes — white button labels on brand fills */ .page-main-sub[data-osp-subpage] .page-hero .button, .page-main-sub[data-osp-subpage] .page-hero .button:hover, .page-main-sub[data-osp-subpage] .page-hero .button:focus-visible { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } /* Bottom-of-page CTA bands — black instead of slate gray */ body .page-shell .cta-band, body .page-shell .cta-band--team, body .page-shell .cta-band--multi { background: #000000; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45); } /* Hub mockup contact panels (#contact) */ body .page-shell.breakdance #contact .newsletter-panel { background: #000000 !important; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Hero text readability — drop shadows on photo/video backgrounds */ :is(.page-hero, .team-hero) :is(.eyebrow, h1, .page-hero-lead, .team-hero-kicker, p, li), .page-hero-inner :is(.eyebrow, h1, .page-hero-lead, .team-hero-kicker, p, li) { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.4); } :is(.page-hero, .team-hero) h1, .page-hero-inner h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65), 0 8px 28px rgba(0, 0, 0, 0.5); } .page-shell .hero :is(.hero-copy, .hero-copy-lead, .hero-copy-body) :is(.eyebrow, h1, p, li, strong) { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.4); } .page-shell .hero :is(.hero-copy, .hero-copy-lead) h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65), 0 8px 28px rgba(0, 0, 0, 0.5); } /* Hero side panels (coverage cards) sit on white/glass — no text shadow */ .page-shell .hero .hero-panel, .page-shell .hero .hero-panel * { text-shadow: none; } .page-csth-home .bde-section-14-100 :is(h1, p) { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.4); } .page-csth-home .bde-section-14-100 h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65), 0 8px 28px rgba(0, 0, 0, 0.5); } /* Hero left-column copy — heavier weight and tracking for readability */ :is(.page-hero, .team-hero) .eyebrow, .page-hero-inner .eyebrow { font-weight: 800; letter-spacing: 0.18em; } :is(.page-hero, .team-hero) h1, .page-hero-inner h1 { font-weight: 700; letter-spacing: 0.025em; } :is(.page-hero, .team-hero) :is(.page-hero-lead, .team-hero-kicker), .page-hero-inner :is(.page-hero-lead, .team-hero-kicker) { font-weight: 600; letter-spacing: 0.018em; line-height: 1.62; } .page-shell .hero :is(.hero-copy, .hero-copy-lead, .hero-copy-body) .eyebrow { font-weight: 800; letter-spacing: 0.18em; } .page-shell .hero :is(.hero-copy, .hero-copy-lead) h1 { font-weight: 700; letter-spacing: 0.025em; } .page-shell .hero :is(.hero-copy, .hero-copy-body) p { font-weight: 600; letter-spacing: 0.018em; line-height: 1.62; } .page-csth-home .bde-section-14-100 :is(h1, .bde-heading-14-102) { font-weight: 700 !important; letter-spacing: 0.025em; } .page-csth-home .bde-section-14-100 :is(.bde-text-14-101, .bde-text-14-101 p) { font-weight: 600 !important; letter-spacing: 0.018em; line-height: 1.62; } /* Hero overlays — darker black gradient on the left for copy readability */ .page-hero::after, .page-csth-about .page-main-sub .page-hero::after { background: linear-gradient( 100deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.48) 38%, rgba(0, 0, 0, 0.16) 52%, transparent 66%, transparent 100% ) !important; } .team-page .team-hero::after { background: linear-gradient( 120deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.68) 24%, rgba(0, 0, 0, 0.36) 46%, transparent 66%, transparent 100% ) !important; } .page-shell .hero-scrim { background: linear-gradient( 100deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.48) 38%, rgba(0, 0, 0, 0.16) 52%, transparent 66%, transparent 100% ) !important; } .page-csth-home .bde-section-14-100 { position: relative; } .page-csth-home .bde-section-14-100::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 100deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.48) 38%, rgba(0, 0, 0, 0.16) 52%, transparent 66%, transparent 100% ); } .page-csth-home .bde-section-14-100 .section-container { position: relative; z-index: 2; } /* Hero left-column copy — white text (not hero-panel cards) */ :is(.page-hero, .team-hero) :is(.eyebrow, h1, .page-hero-lead, .team-hero-kicker, p, li, strong), .page-hero-inner :is(.eyebrow, h1, .page-hero-lead, .team-hero-kicker, p, li, strong), .page-hero-inner a:not(.button):not(.button-secondary) { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .page-shell .hero :is(.hero-copy, .hero-copy-lead, .hero-copy-body) :is(.eyebrow, h1, p, li, strong), .page-shell .hero :is(.hero-copy, .hero-copy-body) a:not(.button):not(.button-secondary) { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .page-csth-home .bde-section-14-100 :is(h1, p, .bde-heading-14-102, .bde-text-14-101, .bde-text-14-101 p) { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } /* Hero filled buttons — black fill, glass-matched outline */ .page-csth-who-we-are .page-main-sub .page-hero .button, .page-csth-team .page-main-sub .page-hero .button, .page-csth-home .bde-section-14-100 .bde-button-14-103 .bde-button__button { background: #000000 !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; transition: transform 200ms ease, background 160ms ease, color 160ms ease, box-shadow 200ms ease, border-color 160ms ease !important; } .page-csth-who-we-are .page-main-sub .page-hero .button:hover, .page-csth-team .page-main-sub .page-hero .button:hover, .page-csth-who-we-are .page-main-sub .page-hero .button:focus-visible, .page-csth-team .page-main-sub .page-hero .button:focus-visible, .page-csth-home .bde-section-14-100 .bde-button-14-103 .bde-button__button:hover, .page-csth-home .bde-section-14-100 .bde-button-14-103 .bde-button__button:focus-visible { background: #1a1a1a !important; border-color: rgba(255, 255, 255, 0.42) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } /* Hero outline buttons — glassmorphism */ :is(.page-hero, .team-hero) .hero-actions .button-secondary, .page-main-sub .page-hero .button-secondary, .page-shell .hero .hero-actions .button-secondary, .page-csth-home .bde-section-14-100 .bde-button-14-104 .bde-button__button { background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14); color: #ffffff !important; -webkit-text-fill-color: #ffffff; } :is(.page-hero, .team-hero) .hero-actions .button-secondary:hover, :is(.page-hero, .team-hero) .hero-actions .button-secondary:focus-visible, .page-main-sub .page-hero .button-secondary:hover, .page-main-sub .page-hero .button-secondary:focus-visible, .page-shell .hero .hero-actions .button-secondary:hover, .page-shell .hero .hero-actions .button-secondary:focus-visible, .page-csth-home .bde-section-14-100 .bde-button-14-104 .bde-button__button:hover, .page-csth-home .bde-section-14-100 .bde-button-14-104 .bde-button__button:focus-visible { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.42) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } /* * Footer copyright — equal padding above/below text site-wide. * Footer shell has top padding only; bottom spacing lives in .footer-legal * so mockup CSS (hub / osp-mockup-shared) cannot add extra space below the line. */ .footer { padding-bottom: 0 !important; } .footer-legal { margin: 0 !important; padding: 1rem 0 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } /* * Mobile coverage rows — flex children with min-height: 0 collapse to invisible * when the layout stacks on phones. Give media blocks an explicit height. */ @media (max-width: 900px) { .coverage.coverage--media-rows .coverage-row-media { flex: none; min-height: clamp(180px, 52vw, 280px); aspect-ratio: 16 / 10; } .coverage.coverage--media-rows .coverage-row-media img { flex: none; width: 100%; height: 100%; min-height: clamp(180px, 52vw, 280px); object-fit: cover; } }