/* ================================================================== PARENT THEME OVERRIDES (Hello Elementor) ================================================================== */ /* Kill the 1140px content constraint so sections go edge-to-edge */ html body .site-main, html body main#content, html body main.site-main { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .page-wrapper { padding: 0 !important; } html, body { margin: 0; padding: 0; overflow-x: clip; } body.home { background: #fff !important; } /* Flex-template pages also need the white backdrop so transparent-bg sections (e.g. .hp-cta when reused in the CTA Block "image" style) don't show the navy body bg through the "empty" top-left area. */ body.page-template-page-flexible { background: #fff !important; } /* Footer full-width */ .site-footer { width: 100vw !important; margin-left: calc(50% - 50vw) !important; background: var(--color-navy) !important; color: var(--color-white); } .site-footer > .container, .site-footer .site-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 60px var(--container-pad) 32px; } .site-footer__legal { max-width: var(--container-max); margin: 0 auto; padding: 16px var(--container-pad); } /* Social icons: transparent bg, 2x size */ .site-footer__socials { gap: 20px !important; } .site-footer__socials a { background: transparent !important; width: auto !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; } .site-footer__socials a svg, .site-footer__socials a img { width: 28px !important; height: 28px !important; display: block; } /* ================================================================== GLOBAL VARIABLES ================================================================== */ :root { --color-navy: #060143; --color-accent: #2E2A9E; --color-text-muted: #B0B3C7; --color-gray-50: #F5F6F8; --font-display: "commuters-sans", "Satoshi", -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Satoshi", -apple-system, "Segoe UI", Roboto, sans-serif; --color-navy-mid: #0D0A4F; --color-navy-light: #1E1B6B; --color-blue-mid: #060143; --color-white: #FFFFFF; --color-gray-100: #E8E8EE; --color-gray-700: #4A4D66; --container-max: 1280px; --container-pad: 32px; } html, body { font-family: var(--font-body) !important; color: var(--color-navy); } body.home { font-feature-settings: "ss01", "ss02"; } /* Hide default page title */ body.home .entry-title, body.home .page-title, body.home .elementor-page-title { display: none !important; } /* Inner container to box content while section stays full-width */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); width: 100%; box-sizing: border-box; } /* ================================================================== HEADER — floating pill OVER hero ================================================================== */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 32px; background: transparent; } .site-header__pill { background: var(--color-white); border-radius: 8px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--container-max); margin: 0 auto; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .site-header a, .site-header button { color: var(--color-navy); } .site-header__login, .site-header__login a { border: 1px solid var(--color-navy); border-radius: 4px !important; padding: 8px 20px; color: var(--color-navy); text-decoration: none; font-family: var(--font-body); font-weight: 500; } /* ================================================================== EYEBROW + BUTTONS ================================================================== */ .hp-eyebrow { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--color-navy); margin: 0 0 14px 0; line-height: 1; } .hp-eyebrow--light { color: rgba(255,255,255,0.7); } .hp-btn { display: inline-flex !important; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 4px; font-family: var(--font-body); font-size: 16px; font-weight: 700; text-decoration: none !important; line-height: 1; min-height: 44px; border: 1px solid transparent; transition: all 0.18s ease; cursor: pointer; } /* PRIMARY: WHITE button on navy section (the Contact Our Team in hero) */ .hp-btn--primary { background: var(--color-white) !important; color: var(--color-navy) !important; border-color: var(--color-white) !important; } .hp-btn--primary:hover { background: transparent !important; color: var(--color-white) !important; border-color: var(--color-white) !important; } .hp-btn--outline-dark { background: transparent; color: var(--color-navy); border-color: var(--color-navy); } .hp-btn--outline-dark:hover { background: var(--color-navy); color: var(--color-white); } .hp-btn--light { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); } .hp-btn--light:hover { background: transparent; color: var(--color-white); } /* ================================================================== HERO — full-width navy, extends under header ================================================================== */ .hp-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-navy); color: var(--color-white); padding: 210px 0 100px; overflow: hidden; } .hp-hero__grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; opacity: 0; transition: opacity 0.3s; } /* Grid appears on hover of hero */ .hp-hero:hover .hp-hero__grid-bg { opacity: 1; } .hp-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; } .hp-hero__content { max-width: 540px; } .hp-hero__headline { font-family: var(--font-display); font-size: 33px; font-weight: 600; line-height: 1.14; text-transform: uppercase; color: var(--color-white); margin: 0 0 22px 0; } .hp-hero__body { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.45; color: rgba(255,255,255,0.78); margin: 0 0 28px 0; max-width: 440px; } .hp-hero__visual { position: relative; display: flex; flex-direction: column; align-items: var(--hero-img-align, flex-end); justify-content: center; } .hp-hero__image { max-width: var(--hero-img-max-w, 100%); max-height: var(--hero-img-max-h, 520px); height: auto; width: auto; display: block; opacity: 1; /* image sits under the grid overlay (grid renders on top) */ } .hp-hero__callouts { list-style: none; padding: 0; margin: 18px 0 0 0; text-align: right; color: rgba(255,255,255,0.8); font-family: var(--font-body); font-size: 13px; line-height: 1.45; } /* ================================================================== ABOUT — full-width white ================================================================== */ .hp-about { width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-white); color: var(--color-navy); padding: 110px 0 120px; } .hp-about__statement { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 45px); font-weight: 600; line-height: 1.08; color: var(--color-navy); margin: 0 0 80px 0; max-width: 1100px; } .hp-about__statement-muted { color: var(--color-text-muted); } .hp-about__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .hp-about__heading { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.08; text-transform: uppercase; color: var(--color-navy); margin: 0 0 24px 0; max-width: 340px; } .hp-about__body { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--color-gray-700); margin: 0 0 16px 0; max-width: 440px; } /* FIX: CTA button needs to sit naturally, not absolute */ .hp-about__right { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; } .hp-about__right .hp-about__cta-wrap { display: flex; justify-content: flex-end; margin-bottom: 24px; height: 54px; /* matches heading height so body aligns with left body */ } .hp-about__right .hp-about__body { margin-top: 54px; } .hp-about__cta { align-self: flex-end; margin-bottom: 16px; } /* Gap between the logo strip and the columns that follow it. Applies only when the strip is present, and matches the statement's 80px margin above the strip. */ .hp-about > .flex-logos + .container { padding-top: 80px; } /* About columns: each column carries its own heading and paragraphs. The eyebrow sits above the grid, the CTA below it. min-width keeps a long word from widening a grid track. */ .hp-about__col { min-width: 0; } /* Video slot between the eyebrow and the columns: container width, 16:9. Present in the markup only when a video is set. */ .hp-about__video { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin: 0 0 48px 0; } .hp-about__video iframe, .hp-about__video video { display: block; width: 100%; height: 100%; border: 0; } /* CTA row after the columns. */ .hp-about__actions { margin-top: 48px; } .hp-about__actions .hp-about__cta { margin: 0; } /* About column headings take their column's width, like their paragraphs. Overrides the 340px cap for these two headings only. */ .hp-about__col > .hp-about__heading { max-width: none; } /* About columns side by side: the column wrappers flatten into the grid so the heading row and the two paragraph rows are shared across both columns, and each column's first paragraph starts on the same line whatever the headings' line counts. Same pattern as .flex-split. Below 769px the wrappers are ordinary blocks and the columns stack in source order with no reserved rows. */ @media (min-width: 769px) { .hp-about__columns { row-gap: 0; } .hp-about__col { display: contents; } .hp-about__col > * { min-width: 0; } .hp-about__col:nth-child(1) > * { grid-column: 1; } .hp-about__col:nth-child(2) > * { grid-column: 2; } .hp-about__col > .hp-about__heading { grid-row: 1; } .hp-about__col > .hp-about__body:nth-of-type(1) { grid-row: 2; } .hp-about__col > .hp-about__body:nth-of-type(2) { grid-row: 3; } } /* ================================================================== CAPABILITIES — 3-column grid, heading in top-left, row 2 spans full ================================================================== */ .hp-cap { width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-gray-50); padding: 100px 0 110px; } .hp-cap__inner { display: block; } .hp-cap__head { display: none; } /* Heading now part of grid cell */ .hp-cap__heading-cell { display: flex; flex-direction: column; justify-content: flex-start; padding-right: 40px; } .hp-cap__heading { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.08; text-transform: uppercase; color: var(--color-navy); margin: 14px 0 0 0; } .hp-cap__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 32px; } /* Top row: heading cell | card 1 | card 2(featured) */ .hp-cap__heading-cell { grid-column: 1; grid-row: 1; } .hp-cap__cards .hp-cap-card:nth-child(1) { grid-column: 2; grid-row: 1; } .hp-cap__cards .hp-cap-card:nth-child(2) { grid-column: 3; grid-row: 1; } /* Bottom row: cards 3,4,5 spanning cols 1,2,3 (under heading AND cards) */ .hp-cap__cards .hp-cap-card:nth-child(3) { grid-column: 1; grid-row: 2; } .hp-cap__cards .hp-cap-card:nth-child(4) { grid-column: 2; grid-row: 2; } .hp-cap__cards .hp-cap-card:nth-child(5) { grid-column: 3; grid-row: 2; } .hp-cap-card { position: relative; padding: 24px 20px 20px; background: transparent; border-radius: 8px; transition: background 0.25s, color 0.25s; cursor: default; } .hp-cap-card__icon { display: inline-flex; align-items: center; height: 60px; margin-bottom: 20px; transition: filter 0.25s; } .hp-cap-card__icon img, .hp-cap-card__icon-img { height: 52px; width: auto; display: block; } .hp-cap-card__title { font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 1.19; color: var(--color-navy); margin: 0 0 12px 0; transition: color 0.25s; } .hp-cap-card__desc { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--color-gray-700); margin: 0; transition: color 0.25s; } .hp-cap-card__arrow { position: absolute; top: 22px; right: 20px; opacity: 0; transition: opacity 0.25s; } .hp-cap-card__arrow img { width: 16px; height: 16px; display: block; } /* HOVER STATE + permanently-featured card: navy bg, white content, arrow visible */ .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover { background: var(--color-navy); } .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover .hp-cap-card__title { color: var(--color-white); } .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover .hp-cap-card__desc { color: rgba(255,255,255,0.88); } .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover .hp-cap-card__icon img { filter: brightness(0) invert(1); } .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover .hp-cap-card__arrow { opacity: 1; } /* ================================================================== MARKETS — full-width navy with slider ================================================================== */ .hp-markets { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-navy); color: var(--color-white); padding: 100px 0 140px; overflow: visible; } .hp-markets > .container { position: relative; z-index: 1; } .hp-markets__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; } .hp-markets__heading { font-family: var(--font-display); font-size: 33px; font-weight: 600; line-height: 1.14; text-transform: uppercase; color: var(--color-white); margin: 0; max-width: 620px; } .hp-markets__body { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: end; } .hp-markets__controls { display: flex; flex-direction: column; gap: 28px; } .hp-markets__pagination { display: inline-flex; gap: 8px; position: static; width: auto; } .hp-dot { width: 10px; height: 10px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; background: transparent; color: var(--color-white); padding: 0; cursor: pointer; } .hp-dot--active { background: var(--color-white); border-color: var(--color-white); } .hp-markets__text-wrap { position: relative; min-height: 180px; } .hp-markets__slider-text { overflow: hidden; } .hp-markets__slider-text .hp-market-card__title { font-family: var(--font-display); font-size: 35px; font-weight: 600; line-height: 1.0; color: var(--color-white); margin: 0 0 16px 0; } .hp-markets__slider-text .hp-market-card__desc { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.75); margin: 0; max-width: 340px; } .hp-markets__nav { display: inline-flex; gap: 8px; } .hp-markets__btn { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.5); background: transparent; color: var(--color-white); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .hp-markets__btn:hover { background: var(--color-white); color: var(--color-navy); } /* IMAGE SWIPER — must render! */ .hp-markets__slider-images { position: relative; overflow: hidden; border-radius: 4px; z-index: 2; width: 100%; margin-bottom: -140px; } .hp-markets__slider-images .swiper-wrapper, .hp-markets__slider-images .swiper-slide { width: 100%; } .hp-market-card__image { width: 100%; height: 580px; aspect-ratio: 4 / 5; background-size: cover; background-position: center; background-color: var(--color-navy-light); } .hp-market-card__image--placeholder { background: linear-gradient(135deg, #3a4a7a 0%, #1a2450 100%); } /* ================================================================== PROOF — full-width white with airplane bg ================================================================== */ .hp-proof { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background-color: var(--color-white); background-repeat: no-repeat; background-position: center center; background-size: cover; color: var(--color-navy); padding: 180px 0 130px; overflow: hidden; } .hp-proof > .container { position: relative; z-index: 1; } .hp-proof__head { margin-bottom: 64px; } .hp-proof__heading { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.08; text-transform: uppercase; color: var(--color-navy); margin: 0; max-width: 420px; } .hp-proof__timeline { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 80px 80px; max-width: none; width: 100%; margin: 0 auto; } .hp-proof__line { position: absolute; left: 20px; right: 20px; top: calc(50% - 40px); height: 1px; background: rgba(6,1,67,0.25); z-index: 0; } .hp-proof-card { position: relative; background: var(--color-navy); color: var(--color-white); padding: 24px 26px 20px; border-radius: 4px; z-index: 1; } .hp-proof-card--1, .hp-proof-card--2 { transform: translateY(-20px); } .hp-proof-card--3, .hp-proof-card--4 { transform: translateY(20px); } .hp-proof-card__badge { position: absolute; top: -16px; left: 20px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-navy); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 13px; font-weight: 600; border: 3px solid var(--color-white); } .hp-proof-card__number { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--color-white); margin: 0 0 6px 0; } .hp-proof-card__label { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; } /* ================================================================== CTA — full-width navy, pilot image extends ================================================================== */ .hp-cta { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-navy); color: var(--color-white); padding: 0; overflow: hidden; } .hp-cta__inner { position: relative; z-index: 2; } /* Card: absolute bottom-left composition, 52vw, on desktop; returns to flow at full content width at 900px and below. */ .hp-cta__content { position: absolute; left: 0; bottom: 0; top: auto; right: auto; width: 52vw; max-width: 920px; margin: 0; padding: 80px 56px 140px max(40px, calc((100vw - 1280px) / 2 + 40px)); background: var(--color-navy); z-index: 3; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); } @media (max-width: 900px) { .hp-cta__content { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; max-width: 100%; margin: 0; padding: 64px 0 40px; } } .hp-cta__heading { font-family: var(--font-display); font-size: 33px; font-weight: 600; line-height: 1.12; text-transform: uppercase; color: var(--color-white); margin: 0 0 22px 0; } .hp-cta__body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0 0 32px 0; max-width: 420px; } .hp-cta__visual { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 1; pointer-events: none; } .hp-cta__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ================================================================== RESPONSIVE ================================================================== */ @media (max-width: 1024px) { .hp-cap__cards { grid-template-columns: 1fr 1fr; } .hp-cap__cards .hp-cap-card:nth-child(n) { grid-column: auto; grid-row: auto; } .hp-cap__heading-cell { grid-column: 1 / -1; } .hp-proof__timeline { grid-template-columns: 1fr; gap: 40px; } .hp-proof-card--1, .hp-proof-card--2, .hp-proof-card--3, .hp-proof-card--4 { transform: none; } .hp-proof__line { display: none; } .hp-cta__visual { width: 45%; opacity: 0.55; } } @media (max-width: 768px) { .hp-hero { padding: 170px 0 60px; } .hp-hero__inner { grid-template-columns: 1fr; gap: 40px; } .hp-hero__visual { align-items: center; } .hp-about { padding: 140px 0 80px; } .hp-about__columns { grid-template-columns: 1fr; gap: 32px; } .hp-about__video { margin-bottom: 32px; } .hp-about__actions { margin-top: 32px; } .hp-cap { padding: 140px 0 80px; } .hp-cap__cards { grid-template-columns: 1fr; } .hp-markets { padding: 140px 0 100px; } .hp-markets__body { grid-template-columns: 1fr; } .hp-markets__controls { min-width: 0; } .hp-proof { padding: 80px 0; } .hp-cta__visual { width: 100%; height: 240px; top: auto; bottom: 0; opacity: 0.4; } } /* Correct pill class override */ .site-header .header-inner { border-radius: 8px !important; max-width: 1240px !important; } /* === v7 fixes === */ /* Footer full-width with stronger specificity */ html body footer.site-footer, html body .site-footer { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: var(--color-navy) !important; color: #fff; } .site-footer > .container { max-width: 1280px !important; margin: 0 auto !important; padding: 60px 32px 32px !important; width: 100% !important; } /* Social icons — correct class is .footer-social */ .footer-social { display: flex !important; gap: 20px !important; align-items: center !important; } .footer-social a { background: transparent !important; border: none !important; padding: 0 !important; width: auto !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; border-radius: 0 !important; } .footer-social a svg, .footer-social a img { width: 28px !important; height: 28px !important; display: block !important; fill: #fff; color: #fff; } .footer-social a svg path, .footer-social a svg * { fill: currentColor; } /* About body alignment fix — right body was 34px higher than left. Left column: eyebrow(13px+14mb) + heading(30px, 3 lines, 24mb) + body. Right column: cta (54px) + 24mb + body. Need right body to start at the same y as left body. Simplest: match top spacing. */ .hp-about__right { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; gap: 0 !important; } /* Force body row down so it aligns with left body's starting position. Left body sits after: eyebrow(13 + 14 margin) + heading(3 lines of 30px = 90 + 24 margin) ~= 141px from top of column. Right body starts after CTA (54px) + margin 24 = ~78px. Gap = 63px. */ .hp-about__right .hp-about__body { margin-top: 63px !important; } /* === v7b fixes === */ /* Stop "More About Us" button from stretching full-width. The button is inside .hp-about__right which is a grid — force the button to its natural width. */ .hp-about__right .hp-btn, .hp-about__right a.hp-btn, .hp-about__right .hp-about__cta { justify-self: flex-end !important; width: auto !important; max-width: max-content !important; display: inline-flex !important; } /* Ensure the right column's first child (button) aligns right, doesn't stretch */ .hp-about__right > *:first-child { justify-self: end !important; width: auto !important; } /* === v9 FINAL PATCHES === */ /* 1. NAV PILL: widen to match content container, aligned left edge with other sections */ .site-header { padding: 16px 0 !important; } .site-header .header-inner { max-width: 1280px !important; width: calc(100% - 64px) !important; margin: 0 auto !important; padding: 14px 28px !important; box-sizing: border-box !important; } /* 2. FOOTER LEGAL: Terms + Privacy on same line */ .site-footer .footer-legal ul, .site-footer .footer-legal ol, .site-footer .footer-legal { display: flex !important; flex-direction: row !important; list-style: none !important; padding: 0 !important; margin: 0 !important; gap: 32px !important; align-items: center !important; justify-content: flex-end !important; } .site-footer .footer-legal li { list-style: none !important; margin: 0 !important; padding: 0 !important; display: inline-block !important; } /* FOOTER LEGAL: wrap the row below 768px so no label is clipped. */ @media (max-width: 768px) { .site-footer .footer-legal ul { flex-wrap: wrap !important; gap: 8px 32px !important; } } /* 3. CAP CARD ICONS: default colored navy (not white). Only invert on hover. */ /* Reset: remove default invert if any, then explicit navy color */ .hp-cap-card .hp-cap-card__icon img, .hp-cap-card .hp-cap-card__icon-img { filter: brightness(0) saturate(100%) invert(8%) sepia(92%) saturate(3000%) hue-rotate(243deg) brightness(60%) contrast(130%) !important; /* ^ this filter-chain maps any SVG color to navy #060143 */ } /* Hover flips to white */ .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover .hp-cap-card__icon img, .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover .hp-cap-card__icon-img { filter: brightness(0) invert(1) !important; } /* 4. ABOUT body alignment — right body is 25px HIGHER than left; push it down */ .hp-about__right .hp-about__body { margin-top: 88px !important; /* was 63, +25 to match */ } /* 5. MARKETS image overflow — strategy: reduce the markets section padding-bottom AND increase the negative margin so image bottom extends BELOW markets section bottom */ .hp-markets { padding-bottom: 0 !important; } .hp-markets__slider-images { margin-bottom: -160px !important; position: relative !important; z-index: 5 !important; } /* Give proof enough padding-top to accommodate the overlap */ .hp-proof { padding-top: 200px !important; } /* 6. HERO GRID: radial dots pattern (inspired by Group.png), hover-only */ .hp-hero__grid-bg { background-image: radial-gradient(circle, rgba(255,255,255,0.45) 1.5px, transparent 2px) !important; background-size: 48px 48px !important; background-position: center center !important; opacity: 0 !important; transition: opacity 0.35s ease !important; } .hp-hero:hover .hp-hero__grid-bg { opacity: 1 !important; } /* === v10 FINAL === */ /* 1. NAV: match footer content width (1280px, left-aligned with other sections). Footer inner is max-width 1280px, padding 32px, left edge at 80px on 1440 viewport. Target: nav pill should have left=80, right=1360, width=1280. */ html body .site-header { padding: 16px 0 !important; } html body .site-header .header-inner { max-width: 1280px !important; width: calc(100% - 64px) !important; margin: 0 auto !important; padding: 14px 32px !important; box-sizing: border-box !important; } /* 2. HERO GRID: remove entirely — no hover effect at all */ .hp-hero__grid-bg { display: none !important; } .hp-hero:hover .hp-hero__grid-bg { display: none !important; } /* 4. MARKETS image overlap: HALF the previous negative margin (was -160 → -80) */ .hp-markets__slider-images { margin-bottom: -80px !important; } /* Restore markets padding-bottom so section has breathing room */ .hp-markets { padding-bottom: 40px !important; } /* Reduce proof top padding since we're overlapping less */ .hp-proof { padding-top: 120px !important; } /* 5. CTA pilot image: add -80px NEGATIVE MARGIN ON TOP so it overlaps into proof section above */ .hp-cta { overflow: visible !important; padding-top: 0 !important; } .hp-cta__visual { top: -80px !important; bottom: 0 !important; height: auto !important; } /* === v10b NAV width: override site-header parent === */ html body header.site-header, html body .site-header { max-width: none !important; width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 !important; padding: 16px 0 !important; } html body .site-header > .container { max-width: 1344px !important; width: 100% !important; padding: 0 32px !important; margin: 0 auto !important; box-sizing: border-box !important; } html body .site-header .header-inner { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 14px 24px !important; box-sizing: border-box !important; } /* === v11 === */ /* 1. NAV TEXT 18px */ .site-header .header-inner a, .site-header .header-inner nav a, .site-header .header-inner .menu a, .site-header .header-inner ul a, .site-header .header-inner li a { font-size: 18px !important; font-family: var(--font-body) !important; } /* 2. NAV width & padding to align header logo with footer logo Footer logo-left = 112 (container-left 80 + inner padding 32). Header logo currently at 104 (header-inner left=80 + inner padding 24). Fix: change header-inner padding to 32px horizontal so logo lands at 112. */ html body .site-header .header-inner { padding: 14px 32px !important; } /* 3. CAP CARD arrows: ensure arrow renders with navy color by default (hidden), then white when hovered (already in hover rule). */ .hp-cap-card .hp-cap-card__arrow { display: inline-flex !important; opacity: 0; transition: opacity 0.25s; position: absolute; top: 22px; right: 20px; } .hp-cap-card .hp-cap-card__arrow img { width: 16px !important; height: 16px !important; display: block !important; /* In navy state on hover - invert to white, but since default is hidden, doesn't matter */ filter: brightness(0) invert(1) !important; } /* On hover: show the arrow */ .hp-cap-card:not(:where(#hp-cap .hp-cap-card:not(.hp-cap-card--linked))):hover .hp-cap-card__arrow { opacity: 1 !important; } /* 4. MARKETS: move controls (dots + text + arrows) to TOP of image column. Current body is grid w/ align-items:end. Change to align-items: start so controls align with top of image. */ html body .hp-markets__body { align-items: start !important; } html body .hp-markets__controls { padding-bottom: 0 !important; padding-top: 0 !important; margin-top: 0 !important; } /* 5. PROOF section: +60px bottom padding for breathing room */ html body .hp-proof { padding-bottom: 200px !important; } /* === v12 === */ /* 1. PROOF padding: +25 top, +50 bottom */ html body .hp-proof { padding-top: 145px !important; padding-bottom: 250px !important; } /* 2. MARKETS pagination: rectangular bars on a horizontal line (like Figma) */ html body .hp-markets__pagination { position: relative !important; display: inline-flex !important; gap: 12px !important; align-items: center !important; padding: 0 !important; margin: 0 !important; min-width: 240px !important; } /* Horizontal line running through the pagination */ html body .hp-markets__pagination::after { content: "" !important; position: absolute !important; left: 0 !important; right: -120px !important; bottom: -14px !important; height: 2px !important; background: rgba(255,255,255,0.7) !important; z-index: 0 !important; } /* Override round dots -> rectangles */ html body .hp-markets__pagination .hp-dot, html body .hp-dot { width: 16px !important; height: 20px !important; border-radius: 0 !important; border: 1.5px solid rgba(255,255,255,0.7) !important; background: transparent !important; padding: 0 !important; cursor: pointer !important; position: relative !important; z-index: 1 !important; transition: background 0.2s, border-color 0.2s !important; } html body .hp-dot--active, html body .hp-dot.hp-dot--active { background: #FFFFFF !important; border-color: #FFFFFF !important; } /* === v13: PAGE TEMPLATES (About / Services / Products / Contact) === */ /* Shared page hero: navy band under header w/ page title */ .page-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-navy); color: var(--color-white); padding: 250px 0 120px; overflow: hidden; } .page-hero__inner { max-width: 900px; } .page-hero__headline { font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px); font-weight: 600; line-height: 1.08; text-transform: uppercase; color: var(--color-white); margin: 0 0 24px 0; } .page-hero__intro { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; max-width: 720px; } /* Page body: prose content section */ .page-body { width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-white); padding: 100px 0 80px; } .page-body__content { max-width: 780px; margin: 0 auto; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-gray-700); } .page-body__content p { margin: 0 0 20px 0; } .page-body__content p:last-child { margin-bottom: 0; } .page-section__heading { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.08; text-transform: uppercase; color: var(--color-navy); margin: 0 0 48px 0; } /* ABOUT: milestones timeline */ .page-milestones { width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-gray-50); padding: 100px 0 110px; } .page-milestones__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .milestone-card { background: var(--color-white); border-radius: 4px; padding: 28px 24px; border-left: 3px solid var(--color-navy); } .milestone-card__year { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--color-navy); margin-bottom: 10px; letter-spacing: 0.5px; } .milestone-card__label { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--color-gray-700); } /* SERVICES: alternating rows */ .service-section { width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-white); padding: 100px 0; } .service-section--alt { background: var(--color-gray-50); } .service-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .service-row--reverse .service-row__text { order: 2; } .service-row--reverse .service-row__image { order: 1; } .service-row__heading { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--color-navy); margin: 14px 0 24px 0; } .service-row__text p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--color-gray-700); margin: 0 0 16px 0; } .service-row__image { min-height: 380px; } .service-row__placeholder { width: 100%; height: 100%; min-height: 380px; background: linear-gradient(135deg, #1a2450 0%, #3a4a7a 100%); border-radius: 4px; } .service-row__placeholder--2 { background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-accent) 100%); } .service-row__placeholder--3 { background: linear-gradient(135deg, #0D0A4F 0%, #4a5a9e 100%); } /* PRODUCTS: grid of cards */ .products-grid-section { width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-gray-50); padding: 100px 0 120px; } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .product-card { background: var(--color-white); border-radius: 4px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; transition: transform 0.25s, box-shadow 0.25s; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(6,1,67,0.12); } .product-card--featured { background: var(--color-navy); color: var(--color-white); } .product-card--featured .product-card__title, .product-card--featured .product-card__desc, .product-card--featured .product-card__specs li { color: var(--color-white); } .product-card--featured .product-card__icon img { filter: brightness(0) invert(1); } .product-card__icon img { height: 44px; width: auto; filter: brightness(0) saturate(100%) invert(8%) sepia(92%) saturate(3000%) hue-rotate(243deg) brightness(60%) contrast(130%); } .product-card__title { font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--color-navy); margin: 0; } .product-card__desc { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--color-gray-700); margin: 0; } .product-card__specs { list-style: none; padding: 0; margin: 8px 0 0 0; display: flex; flex-direction: column; gap: 8px; } .product-card__specs li { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--color-gray-700); padding-left: 16px; position: relative; } .product-card__specs li::before { content: "_"; position: absolute; left: 0; top: -2px; font-weight: 700; } /* CONTACT */ .contact-body { width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-white); padding: 100px 0 140px; } .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .contact-info__heading, .contact-form__heading { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--color-navy); margin: 0 0 32px 0; } .contact-info__block { margin-bottom: 28px; } .contact-info__label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--color-gray-700); text-transform: uppercase; margin: 0 0 6px 0; } .contact-info__value { font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--color-navy); margin: 0; } .contact-info__value a { color: var(--color-navy); text-decoration: none; } .contact-info__value a:hover { text-decoration: underline; } .acme-contact-form .form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; } .acme-contact-form label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-navy); } .acme-contact-form input, .acme-contact-form textarea { font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border: 1px solid #d5d7e0; border-radius: 4px; background: var(--color-white); color: var(--color-navy); width: 100%; box-sizing: border-box; } .acme-contact-form input:focus, .acme-contact-form textarea:focus { outline: none; border-color: var(--color-navy); } .acme-contact-form button[type="submit"] { margin-top: 8px; } .contact-form__note { font-size: 12px; color: var(--color-gray-700); margin-top: 14px; font-style: italic; } /* RESPONSIVE (pages) */ @media (max-width: 1024px) { .page-milestones__grid { grid-template-columns: repeat(2, 1fr); } .products-grid { grid-template-columns: repeat(2, 1fr); } .service-row { grid-template-columns: 1fr; gap: 40px; } .service-row--reverse .service-row__text, .service-row--reverse .service-row__image { order: initial; } .contact-grid { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 640px) { .page-hero { padding: 210px 0 80px; } .page-milestones__grid, .products-grid { grid-template-columns: 1fr; } } /* === v14: Proof card number font override === Commuters Sans DEMO watermark substitutes '+' and '-' glyphs. Force proof card numbers to use Satoshi (no watermark) instead. */ html body .hp-proof-card__number, html body .hp-proof .hp-proof-card__number { font-family: "Satoshi", -apple-system, "Segoe UI", Roboto, sans-serif !important; font-weight: 700 !important; }html body .acme-block--markets .hp-market-card.is-active, html body .acme-block--markets .hp-market-slide.is-active { display: block !important; } /* ============================================================================ PRODUCTS ARCHIVE + SINGLE PRODUCT ============================================================================ */ /* ----- Page hero used by /products/ archive ----- */ .page-hero { background: var(--color-navy, #060143); color: #fff; padding: 150px 24px 100px; } .page-hero__inner { max-width: 1280px; margin: 0 auto; } .page-hero__eyebrow { font-family: 'Commuters Sans', sans-serif; font-size: 14px; letter-spacing: 0.12em; margin: 0 0 20px; opacity: 0.85; } .page-hero__title { font-family: 'Commuters Sans', sans-serif; font-size: clamp(32px, 4.5vw, 64px); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 28px; max-width: 880px; } .page-hero__body { font-size: 17px; line-height: 1.65; max-width: 620px; opacity: 0.92; margin: 0; } /* ===== PRODUCTS ARCHIVE ===== */ .products-archive { padding: 64px 24px 96px; background: #f7f8fa; min-height: 60vh; } .products-archive__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .products-archive__inner { grid-template-columns: 1fr; } } .products-archive__sidebar { position: sticky; top: 100px; } .acme-filters { background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .acme-filters__heading { font-family: 'Commuters Sans', sans-serif; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy, #060143); margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #e5e7eb; } .acme-filter { margin-bottom: 18px; } .acme-filter__label { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; font-weight: 600; } .acme-filter__select { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 14px; color: var(--color-navy, #060143); cursor: pointer; } .acme-filter__select:focus { outline: 2px solid var(--color-navy, #060143); outline-offset: 2px; } .acme-filters__clear { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--color-navy, #060143); text-decoration: underline; } .acme-filters__submit { margin-top: 12px; width: 100%; padding: 10px; background: var(--color-navy, #060143); color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; } .products-archive__main { min-width: 0; } .products-archive__count { font-size: 14px; color: #6b7280; margin: 0 0 24px; } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } .product-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease; } .product-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .product-card__link { display: block; color: inherit; text-decoration: none; } .product-card__image { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: #f3f4f6; } .product-card__image--placeholder { background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%); position: relative; } .product-card__image--placeholder::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 50%, rgba(6, 1, 67, 0.08) 0%, transparent 60%); } .product-card__body { padding: 20px 22px 24px; } .product-card__model { font-family: 'Commuters Sans', monospace; font-size: 12px; letter-spacing: 0.1em; color: #6b7280; margin: 0 0 6px; } .product-card__title { font-family: 'Commuters Sans', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--color-navy, #060143); margin: 0 0 10px; } .product-card__summary { font-size: 14px; line-height: 1.55; color: #4b5563; margin: 0; } .products-archive__pagination { margin-top: 48px; text-align: center; } .products-archive__pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 6px; background: #fff; color: var(--color-navy, #060143); text-decoration: none; } .products-archive__pagination .page-numbers.current { background: var(--color-navy, #060143); color: #fff; } .products-archive__empty { background: #fff; padding: 48px; border-radius: 10px; text-align: center; } .products-archive__empty h2 { font-family: 'Commuters Sans', sans-serif; color: var(--color-navy, #060143); margin: 0 0 12px; } .products-archive__empty p { color: #6b7280; margin: 0 0 16px; } /* ===== SINGLE PRODUCT ===== */ .single-product { padding: 118px 24px 96px; background: #fff; } .single-product__inner { max-width: 1200px; margin: 0 auto; } .single-product__breadcrumb { font-size: 13px; color: #6b7280; margin-bottom: 32px; } .single-product__breadcrumb a { color: var(--color-navy, #060143); text-decoration: none; } .single-product__breadcrumb span { margin: 0 8px; opacity: 0.5; } .single-product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 56px; } @media (max-width: 800px) { .single-product__grid { grid-template-columns: 1fr; gap: 32px; } } .single-product__hero-image { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background-color: #f3f4f6; object-fit: cover; } .single-product__hero-image--placeholder { background: linear-gradient(135deg, #e5e7eb, #f3f4f6); } .single-product__thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .single-product__thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; cursor: pointer; } .single-product__model { font-family: 'Commuters Sans', monospace; font-size: 13px; letter-spacing: 0.12em; color: #6b7280; margin: 0 0 8px; } .single-product__title { font-family: 'Commuters Sans', sans-serif; /* Sized down 2026-07 — real product titles carry long part numbers (e.g. "Battery Charger (218BC101-2)") and 44px wrapped badly. */ font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; color: var(--color-navy, #060143); margin: 0 0 18px; } .single-product__summary { font-size: 17px; line-height: 1.6; color: #374151; margin: 0 0 32px; } .single-product__meta { padding-top: 24px; border-top: 1px solid #e5e7eb; margin-bottom: 32px; } .single-product__meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 14px; } .single-product__meta-label { color: #6b7280; font-weight: 600; min-width: 80px; } .single-product__tag { display: inline-block; padding: 4px 12px; background: #f3f4f6; color: var(--color-navy, #060143); border-radius: 999px; font-size: 13px; text-decoration: none; } .single-product__tag:hover { background: #e5e7eb; } .single-product__datasheet { display: inline-block; padding: 14px 28px; background: var(--color-navy, #060143); color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; transition: background 0.18s ease; } .single-product__datasheet:hover { background: #0c0355; } .single-product__specs { margin-top: 48px; padding-top: 40px; border-top: 2px solid #e5e7eb; } .single-product__specs-heading { font-family: 'Commuters Sans', sans-serif; font-size: 24px; color: var(--color-navy, #060143); margin: 0 0 24px; text-transform: uppercase; letter-spacing: 0.02em; } .single-product__specs-table { width: 100%; border-collapse: collapse; } .single-product__specs-table th, .single-product__specs-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; } .single-product__specs-table th { color: #6b7280; font-weight: 600; width: 40%; } .single-product__specs-table td { color: var(--color-navy, #060143); } .single-product__content { margin-top: 48px; padding-top: 40px; border-top: 2px solid #e5e7eb; font-size: 16px; line-height: 1.7; color: #374151; } /* ===== PAGE-BODY COLUMNS (About / generic page 2-col layout) ===== Mirrors .hp-about two-column pattern for static page templates. */ .page-body--columns { background: var(--color-white, #ffffff); padding: 96px 0 112px; } .page-body__grid { display: grid; grid-template-columns: minmax(280px, 0.75fr) 1.6fr; gap: 64px; align-items: start; } @media (max-width: 900px) { .page-body__grid { grid-template-columns: 1fr; gap: 32px; } } .page-body__aside { position: sticky; top: 140px; } @media (max-width: 900px) { .page-body__aside { position: static; } } .page-body__aside .hp-eyebrow { font-family: 'Commuters Sans', sans-serif; font-size: 14px; letter-spacing: 0.12em; color: var(--color-navy, #060143); opacity: 0.75; margin: 0 0 18px; } .page-body__heading { font-family: 'Commuters Sans', sans-serif; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--color-navy, #060143); margin: 0; } .page-body__prose { font-size: 17px; line-height: 1.7; color: #374151; max-width: 680px; } .page-body__prose p { margin: 0 0 22px; } .page-body__prose p:last-child { margin-bottom: 0; } .page-body__prose strong { color: var(--color-navy, #060143); font-weight: 600; } .page-body__prose a { color: var(--color-navy, #060143); text-decoration: underline; text-underline-offset: 2px; } /* ===== LOGO GARDEN / ABOUT REBUILD + SERVICES ===== */ /* --- Logo garden --- */ .logo-garden { background: #ffffff; padding: 56px 0 64px; border-bottom: 1px solid #e5e7eb; } .logo-garden__label { font-size: 13px; letter-spacing: 0.05em; color: #6b7280; text-align: center; margin: 0 0 32px; text-transform: uppercase; } .logo-garden__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px; align-items: center; } @media (max-width: 900px) { .logo-garden__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } @media (max-width: 500px) { .logo-garden__grid { grid-template-columns: repeat(2, 1fr); } } .logo-garden__item { display: flex; align-items: center; justify-content: center; min-height: 60px; } .logo-garden__item img { max-width: 140px; max-height: 56px; width: auto; height: auto; filter: grayscale(100%); opacity: 0.65; transition: opacity 0.18s, filter 0.18s; } .logo-garden__item img:hover { opacity: 1; filter: grayscale(0); } .logo-garden__placeholder { font-family: 'Commuters Sans', sans-serif; font-size: 15px; letter-spacing: 0.04em; color: #9ca3af; text-align: center; padding: 14px 10px; border: 1px dashed #d1d5db; border-radius: 6px; width: 100%; display: block; } /* --- Page-body subhead (for legacy section) --- */ .page-body__subhead { font-size: 15px; line-height: 1.55; color: #6b7280; margin: 16px 0 0; max-width: 320px; } /* --- Leadership quote --- */ .leadership-quote { background: var(--color-navy, #060143); color: #ffffff; padding: 96px 24px 96px; } .leadership-quote__inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 0; } .leadership-quote__mark { font-family: 'Commuters Sans', Georgia, serif; font-size: 88px; line-height: 0.8; color: #ffffff; opacity: 0.3; margin: 0 0 12px; } .leadership-quote__text { font-family: 'Commuters Sans', sans-serif; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; color: #ffffff; margin: 0 0 32px; font-style: italic; } .leadership-quote__cite { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); font-style: normal; } .leadership-quote__author { font-weight: 600; color: #ffffff; margin-right: 12px; } .leadership-quote__role { opacity: 0.7; } /* --- Stats band --- */ .stats-band { background: var(--color-navy, #060143); color: #ffffff; padding: 88px 24px 96px; } .stats-band__header { text-align: center; margin-bottom: 56px; } .stats-band__headline { font-family: 'Commuters Sans', sans-serif; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; text-transform: uppercase; color: #ffffff; margin: 12px 0 0; } .stats-band__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .stats-band__grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 800px) { .stats-band__grid, .stats-band__grid--3 { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 500px) { .stats-band__grid, .stats-band__grid--3 { grid-template-columns: 1fr; } } .stat-card { text-align: left; padding: 0; border-left: 2px solid rgba(255, 255, 255, 0.25); padding-left: 24px; } .stat-card__number { font-family: 'Commuters Sans', sans-serif; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; color: #ffffff; margin: 0 0 12px; letter-spacing: 0.01em; } .stat-card__label { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); margin: 0; } /* --- Testimonials --- */ .testimonials { background: #f7f8fa; padding: 96px 24px 112px; } .testimonials__header { text-align: center; margin-bottom: 56px; max-width: 720px; margin-left: auto; margin-right: auto; } .testimonials__headline { font-family: 'Commuters Sans', sans-serif; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; text-transform: uppercase; color: var(--color-navy, #060143); margin: 12px 0 0; } .testimonials__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr; } } .testimonial-card { background: #ffffff; padding: 32px 28px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .testimonial-card__quote { font-size: 16px; line-height: 1.6; color: #374151; margin: 0; position: relative; padding-top: 28px; } .testimonial-card__quote::before { content: '\201C'; position: absolute; top: -10px; left: -4px; font-family: Georgia, serif; font-size: 56px; line-height: 1; color: var(--color-navy, #060143); opacity: 0.2; } .testimonial-card__cite { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid #e5e7eb; font-size: 13px; letter-spacing: 0.04em; } .testimonial-card__author { font-weight: 600; color: var(--color-navy, #060143); text-transform: uppercase; } .testimonial-card__role { color: #6b7280; } /* --- Next steps (combined LinkedIn + address + form) --- */ .next-steps { background: var(--color-navy, #060143); color: #ffffff; padding: 96px 24px 112px; } .next-steps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } @media (max-width: 900px) { .next-steps__grid { grid-template-columns: 1fr; gap: 56px; } } .next-steps__headline { font-family: 'Commuters Sans', sans-serif; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; text-transform: uppercase; color: #ffffff; margin: 12px 0 20px; } .next-steps__subhead { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0 0 36px; max-width: 500px; } .next-steps__meta { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 20px; } .next-steps__meta li { display: flex; flex-direction: column; gap: 4px; } .next-steps__meta-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .next-steps__meta-value, .next-steps__meta-link { font-size: 15px; line-height: 1.5; color: #ffffff; } .next-steps__meta-link { text-decoration: underline; text-underline-offset: 3px; } .next-steps__social { margin-top: 12px; } .next-steps__social-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255, 255, 255, 0.08); color: #ffffff; border-radius: 999px; text-decoration: none; transition: background 0.18s; font-size: 14px; } .next-steps__social-link:hover { background: rgba(255, 255, 255, 0.15); } .next-steps__form { background: rgba(255, 255, 255, 0.05); padding: 32px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); } .next-steps__form-heading { font-family: 'Commuters Sans', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff; margin: 0 0 24px; } .next-steps__form-placeholder { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.65); margin: 0; padding: 16px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; } .next-steps__form-fallback { display: flex; flex-direction: column; gap: 18px; } .next-steps__field { display: flex; flex-direction: column; gap: 6px; } .next-steps__field > span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .next-steps__field input, .next-steps__field textarea { font-family: inherit; font-size: 15px; line-height: 1.5; color: #ffffff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 10px 14px; resize: vertical; } .next-steps__field input:focus, .next-steps__field textarea:focus { outline: 2px solid #ffffff; outline-offset: 0; } .next-steps__submit { align-self: flex-start; margin-top: 6px; } /* ===== SERVICES PAGE sections ===== */ .svc-section { padding: 96px 24px 112px; } .svc-section--light { background: #ffffff; } .svc-section__header { max-width: 900px; margin: 0 auto 56px; text-align: left; } .svc-section__headline { font-family: 'Commuters Sans', sans-serif; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1; text-transform: uppercase; color: var(--color-navy, #060143); margin: 12px 0 0; max-width: 760px; } .svc-section__cta { margin-top: 40px; text-align: left; } .svc-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 48px; } @media (max-width: 900px) { .svc-boxes { grid-template-columns: 1fr; } } .svc-box { background: #f7f8fa; padding: 36px 32px 40px; border-radius: 10px; border-left: 3px solid var(--color-navy, #060143); } .svc-box__title { font-family: 'Commuters Sans', sans-serif; font-size: 20px; line-height: 1.25; text-transform: uppercase; color: var(--color-navy, #060143); margin: 0 0 16px; letter-spacing: 0.01em; } .svc-box__body { font-size: 15px; line-height: 1.6; color: #374151; margin: 0; } .svc-caps { margin-top: 40px; } .svc-caps--inline { margin-top: 28px; } .svc-caps__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; font-weight: 600; margin: 0 0 16px; } .svc-caps__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; } @media (max-width: 600px) { .svc-caps__grid { grid-template-columns: 1fr; } } .svc-caps__item { font-size: 15px; line-height: 1.5; color: var(--color-navy, #060143); padding-left: 22px; position: relative; } .svc-caps__item::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 2px; background: var(--color-navy, #060143); } .svc-inline-cta { margin-top: 32px; display: inline-block; } /* Outline-light button variant (used on Services hero secondary CTA) */ .hp-btn--outline-light { background: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.7); } .hp-btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; } /* Hero CTA row (About + Services) */ .page-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; } .page-hero__cta { margin-top: 32px; display: inline-block; } /* --- Section namespace overrides: each section type sits in its own band --- */ .about-intro { background: #ffffff; } .about-legacy { background: #f7f8fa; } .about-legacy .page-body__aside { position: static; } .svc-manufacturing { background: #ffffff; } .svc-aftermarket { background: #f7f8fa; } .svc-aftermarket .page-body__aside { position: static; } /* ===== BUTTON OVERRIDES (About/Services pages) ===== Explicit color rules for .hp-btn in the new page contexts to avoid whatever theme default was rendering pink/red. */ .page-hero .hp-btn, .page-hero__cta, .svc-section__cta .hp-btn, .svc-inline-cta.hp-btn, .next-steps__submit.hp-btn { background: #ffffff !important; color: var(--color-navy, #060143) !important; border: 1.5px solid #ffffff !important; padding: 14px 28px; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-decoration: none !important; border-radius: 4px; display: inline-block; transition: background 0.18s, color 0.18s; } .page-hero .hp-btn:hover, .page-hero__cta:hover, .svc-section__cta .hp-btn:hover, .svc-inline-cta.hp-btn:hover, .next-steps__submit.hp-btn:hover { background: transparent !important; color: #ffffff !important; } /* Light-backgrounded pages (svc-section--light) need inverse treatment */ .svc-section--light .hp-btn, .svc-section--light .svc-section__cta .hp-btn { background: var(--color-navy, #060143) !important; color: #ffffff !important; border: 1.5px solid var(--color-navy, #060143) !important; } .svc-section--light .hp-btn:hover, .svc-section--light .svc-section__cta .hp-btn:hover { background: #ffffff !important; color: var(--color-navy, #060143) !important; } /* White-on-white page-body inline CTAs (manufacturing/aftermarket sections) */ .svc-manufacturing .svc-inline-cta.hp-btn, .svc-aftermarket .svc-inline-cta.hp-btn { background: var(--color-navy, #060143) !important; color: #ffffff !important; border: 1.5px solid var(--color-navy, #060143) !important; } .svc-manufacturing .svc-inline-cta.hp-btn:hover, .svc-aftermarket .svc-inline-cta.hp-btn:hover { background: #ffffff !important; color: var(--color-navy, #060143) !important; } /* ========================================================================== SITE-WIDE GRID OVERLAY — Phase A (toggle via body.has-grid) All rules are scoped under body.has-grid so the grid is OFF by default. Enable for preview by appending ?grid=1 to any URL (see body_class filter in functions.php). Phase B will replace ?grid=1 with an admin toggle. Size + opacity come from CSS custom properties for future admin control. ========================================================================== */ :root { --grid-size: 48px; --grid-line-light: rgba(255, 255, 255, 0.05); --grid-line-dark: rgba(6, 1, 67, 0.04); } body.has-grid .hp-hero, body.has-grid .hp-cta, body.has-grid .hp-markets, body.has-grid .hp-about, body.has-grid .hp-cap, body.has-grid .hp-proof, body.has-grid .flex-hero, body.has-grid .flex-cta, body.has-grid .flex-stats, body.has-grid .flex-ti, body.has-grid .flex-prose, body.has-grid .flex-fg, body.has-grid .flex-testimonial, body.has-grid .flex-logos, body.has-grid .site-footer--has-grid { position: relative; } body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta::before, body.has-grid .flex-stats::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .site-footer--has-grid::before { content: ""; position: absolute; inset: 0; background-size: var(--grid-size) var(--grid-size); pointer-events: none; z-index: 0; } body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta--bg-navy::before, body.has-grid .flex-stats--bg-navy::before, body.has-grid .site-footer--has-grid::before { background-image: linear-gradient(to right, var(--grid-line-light) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-light) 1px, transparent 1px); } body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .flex-cta--bg-white::before, body.has-grid .flex-stats--bg-white::before, body.has-grid .flex-stats--bg-gray::before { background-image: linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px); } /* Replaced a buggy "> *" rule that forced position:relative on all children and thereby broke absolutely-positioned children (e.g. .hp-cta__visual). The isolation + ::before z-index:-1 pattern below achieves the same visual effect (grid behind content) without touching any child positioning. */ body.has-grid .hp-hero, body.has-grid .hp-cta, body.has-grid .hp-markets, body.has-grid .hp-about, body.has-grid .hp-cap, body.has-grid .hp-proof, body.has-grid .flex-hero, body.has-grid .flex-cta, body.has-grid .flex-stats, body.has-grid .flex-ti, body.has-grid .flex-prose, body.has-grid .flex-fg, body.has-grid .flex-testimonial, body.has-grid .flex-logos, body.has-grid .site-footer { isolation: isolate; } body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta::before, body.has-grid .flex-stats::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .site-footer--has-grid::before { z-index: -1; } /* ========================================================================== GRID OVERLAY — dots at intersections (addendum to Phase A) Adds a radial-gradient layer so every line crossing has a small filled dot. Rules here OVERRIDE the line-only background-image declarations above. ========================================================================== */ :root { --grid-dot-size: 3px; --grid-dot-light: rgba(255, 255, 255, 0.18); --grid-dot-dark: rgba(6, 1, 67, 0.12); } body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta--bg-navy::before, body.has-grid .flex-stats--bg-navy::before, body.has-grid .site-footer--has-grid::before { background-image: radial-gradient(circle at 0 0, var(--grid-dot-light) var(--grid-dot-size), transparent calc(var(--grid-dot-size) + 0.5px)), linear-gradient(to right, var(--grid-line-light) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-light) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); } body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .flex-cta--bg-white::before, body.has-grid .flex-stats--bg-white::before, body.has-grid .flex-stats--bg-gray::before { background-image: radial-gradient(circle at 0 0, var(--grid-dot-dark) var(--grid-dot-size), transparent calc(var(--grid-dot-size) + 0.5px)), linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); } /* ========================================================================== GRID OVERLAY — corrections: full dots at intersections + larger cell size Later rules override earlier ones at same specificity. This block corrects (a) the dot geometry (was showing 1/4 circles at tile corners) and (b) makes cells larger (was 48px, now 80px) per feedback "too many squares". ========================================================================== */ :root { --grid-size: 80px; } body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta--bg-navy::before, body.has-grid .flex-stats--bg-navy::before, body.has-grid .site-footer--has-grid::before { background-image: radial-gradient(circle at center, var(--grid-dot-light) var(--grid-dot-size), transparent calc(var(--grid-dot-size) + 0.5px)), linear-gradient(to right, var(--grid-line-light) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-light) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), 0 0, 0 0; } body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .flex-cta--bg-white::before, body.has-grid .flex-stats--bg-white::before, body.has-grid .flex-stats--bg-gray::before { background-image: radial-gradient(circle at center, var(--grid-dot-dark) var(--grid-dot-size), transparent calc(var(--grid-dot-size) + 0.5px)), linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), 0 0, 0 0; } /* ========================================================================== GRID OVERLAY — dot covers the line (4-layer approach) Adds an opaque eraser disk between the lines and the visible dot so the line is hidden at each intersection, giving the crisp "dot sits on top of the line" look instead of visible line-through-dot alpha blending. ========================================================================== */ body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta--bg-navy::before, body.has-grid .flex-stats--bg-navy::before, body.has-grid .site-footer--has-grid::before { background-image: radial-gradient(circle at center, var(--grid-dot-light) var(--grid-dot-size), transparent calc(var(--grid-dot-size) + 0.5px)), radial-gradient(circle at center, var(--color-navy) calc(var(--grid-dot-size) + 2px), transparent calc(var(--grid-dot-size) + 2.5px)), linear-gradient(to right, var(--grid-line-light) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-light) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), 0 0, 0 0; } body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .flex-cta--bg-white::before, body.has-grid .flex-stats--bg-white::before { background-image: radial-gradient(circle at center, var(--grid-dot-dark) var(--grid-dot-size), transparent calc(var(--grid-dot-size) + 0.5px)), radial-gradient(circle at center, var(--color-white) calc(var(--grid-dot-size) + 2px), transparent calc(var(--grid-dot-size) + 2.5px)), linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), 0 0, 0 0; } /* Gray-backgrounded sections need a gray eraser instead of white */ body.has-grid .flex-stats--bg-gray::before { background-image: radial-gradient(circle at center, var(--grid-dot-dark) var(--grid-dot-size), transparent calc(var(--grid-dot-size) + 0.5px)), radial-gradient(circle at center, var(--color-gray-50, #f5f6f8) calc(var(--grid-dot-size) + 2px), transparent calc(var(--grid-dot-size) + 2.5px)), linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), calc(var(--grid-size) / -2) calc(var(--grid-size) / -2), 0 0, 0 0; } /* ========================================================================== GRID OVERLAY — sub-pixel alignment correction Lines are 1px wide starting at x=0 of each tile, so their visual center is at x=0.5. Shifting the dot + eraser layers by +0.5px aligns the dot center with the line center, removing the off-center appearance. ========================================================================== */ body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta--bg-navy::before, body.has-grid .flex-stats--bg-navy::before, body.has-grid .site-footer--has-grid::before, body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .flex-cta--bg-white::before, body.has-grid .flex-stats--bg-white::before, body.has-grid .flex-stats--bg-gray::before { background-position: calc(var(--grid-size) / -2 + 0.5px) calc(var(--grid-size) / -2 + 0.5px), calc(var(--grid-size) / -2 + 0.5px) calc(var(--grid-size) / -2 + 0.5px), 0 0, 0 0; } /* ========================================================================== GRID OVERLAY — viewport-anchored backgrounds Anchors each section's grid to the viewport so the pattern is continuous across section boundaries (no more "restart" seam at each section's top). ========================================================================== */ body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta--bg-navy::before, body.has-grid .flex-stats--bg-navy::before, body.has-grid .site-footer--has-grid::before, body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .flex-cta--bg-white::before, body.has-grid .flex-stats--bg-white::before, body.has-grid .flex-stats--bg-gray::before { background-attachment: fixed; } /* ========================================================================== GRID OVERLAY — revert fixed attachment + add JS-driven continuity Grid now scrolls with content. assets/grid-align.js sets --grid-section-offset-y on each grid-hosting section so the pattern aligns continuously across section boundaries. background-position-y uses that variable. ========================================================================== */ body.has-grid .hp-hero::before, body.has-grid .hp-cta::before, body.has-grid .hp-markets::before, body.has-grid .flex-hero::before, body.has-grid .flex-cta--bg-navy::before, body.has-grid .flex-stats--bg-navy::before, body.has-grid .site-footer--has-grid::before, body.has-grid .hp-about::before, body.has-grid .hp-cap::before, body.has-grid .hp-proof::before, body.has-grid .flex-ti::before, body.has-grid .flex-prose::before, body.has-grid .flex-fg::before, body.has-grid .flex-testimonial::before, body.has-grid .flex-logos::before, body.has-grid .flex-cta--bg-white::before, body.has-grid .flex-stats--bg-white::before, body.has-grid .flex-stats--bg-gray::before { background-attachment: scroll; background-position-x: calc(var(--grid-size) / -2 + 0.5px), calc(var(--grid-size) / -2 + 0.5px), 0, 0; background-position-y: calc(var(--grid-section-offset-y, 0px) + var(--grid-size) / -2 + 0.5px), calc(var(--grid-section-offset-y, 0px) + var(--grid-size) / -2 + 0.5px), var(--grid-section-offset-y, 0px), var(--grid-section-offset-y, 0px); } /* ========================================================================== GRID OVERLAY — per-section opt-out (via .grid-hidden class) When a flexible section has its "Hide grid on this section" toggle set, page-flexible.php injects .grid-hidden on the
. This rule suppresses the grid overlay (::before pseudo-element) on that specific section. ========================================================================== */ body.has-grid .grid-hidden::before { content: none; } /* ========================================================================== MARKETS SLIDER prev/next buttons — polish - Kill browser default focus/tap highlight (the "red after click" artifact) - Replace the existing inline chevron SVG with the shared assets/icons/arrow.svg via CSS mask, rotated -135deg for prev (left) and +45deg for next (right). - Arrow color tracks button color (currentColor), so hover/active state swaps work automatically. ========================================================================== */ .hp-markets__btn { -webkit-tap-highlight-color: transparent; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, outline-color 0.18s ease; } .hp-markets__btn:focus { outline: none; } .hp-markets__btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.65); outline-offset: 2px; } .hp-markets__btn:active { transform: scale(0.96); background: var(--color-white); color: var(--color-navy); } /* Hide the inline chevron SVG baked into front-page.php — the CSS-masked ::before icon below replaces it for a single source of truth. */ .hp-markets__btn > svg { display: none; } /* The masked arrow — inherits button color via currentColor */ .hp-markets__btn::before { content: ""; display: block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url('icons/arrow.svg') no-repeat center / contain; mask: url('icons/arrow.svg') no-repeat center / contain; } #hp-markets-prev::before { transform: rotate(-135deg); } #hp-markets-next::before { transform: rotate(45deg); } /* ========================================================================== MARKETS SLIDER buttons — kill system button theming (the "red after click" is the OS/browser default for