/* * ACME Flexible Layouts CSS * Styles for all layouts rendered by page-flexible.php via ACF Flexible Content. * Design tokens inherited from :root in style.css (--color-navy, --font-display, etc.) */ /* ========================================================================== Shared: image wrapper with aspect-ratio + object-fit + vertical alignment Applied to any .flex-img element via .flex-img--aspect-*, --fit-*, --align-*. ========================================================================== */ .flex-img { display: block; width: 100%; overflow: hidden; border-radius: 12px; background: var(--color-gray-50, #f5f6f8); } .flex-img img { width: 100%; height: 100%; display: block; } .flex-img--aspect-16-9 { aspect-ratio: 16 / 9; } .flex-img--aspect-4-3 { aspect-ratio: 4 / 3; } .flex-img--aspect-3-2 { aspect-ratio: 3 / 2; } .flex-img--aspect-1-1 { aspect-ratio: 1 / 1; } .flex-img--aspect-21-9 { aspect-ratio: 21 / 9; } .flex-img--fit-cover img { object-fit: cover; } .flex-img--fit-contain img { object-fit: contain; } .flex-img--align-top img { object-position: center top; } .flex-img--align-center img { object-position: center center; } .flex-img--align-bottom img { object-position: center bottom; } /* Per-section padding lives on each section rule below; no blanket rule here. */ /* ========================================================================== BUTTON VARIANTS (scoped by flexible layout) .hp-btn base class only defines structure; color/bg comes from these context-scoped rules so buttons inside each layout get the correct variant. ========================================================================== */ /* Hero is navy bg → white-filled button */ .flex-hero .hp-btn { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); } .flex-hero .hp-btn:hover, .flex-hero .hp-btn:focus-visible { background: transparent; color: var(--color-white); border-color: var(--color-white); } /* Text + Image is light bg → navy outline button */ .flex-ti .hp-btn { background: transparent; color: var(--color-navy); border-color: var(--color-navy); } .flex-ti .hp-btn:hover, .flex-ti .hp-btn:focus-visible { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); } /* CTA Band — match button color to its background */ .flex-cta--bg-navy .hp-btn { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); } .flex-cta--bg-navy .hp-btn:hover, .flex-cta--bg-navy .hp-btn:focus-visible { background: transparent; color: var(--color-white); border-color: var(--color-white); } .flex-cta--bg-white .hp-btn { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); } .flex-cta--bg-white .hp-btn:hover, .flex-cta--bg-white .hp-btn:focus-visible { background: transparent; color: var(--color-navy); border-color: var(--color-navy); } /* Prose layout — buttons inside prose render as outline-dark */ .flex-prose .hp-btn { background: transparent; color: var(--color-navy); border-color: var(--color-navy); } .flex-prose .hp-btn:hover { background: var(--color-navy); color: var(--color-white); } /* ========================================================================== HERO ========================================================================== */ .flex-hero { position: relative; background: var(--color-navy); color: var(--color-white); padding: 200px 0 100px; overflow: hidden; } .flex-hero--has-image { padding: 220px 0 120px; } @media (max-width: 900px) { .flex-hero { padding: 160px 0 80px; } .flex-hero--has-image { padding: 180px 0 100px; } } @media (max-width: 600px) { .flex-hero { padding: 140px 0 60px; } .flex-hero--has-image { padding: 160px 0 80px; } } .flex-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .flex-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Navy overlay strength controlled per-section via inline --flex-hero-overlay-alpha (default 0.6 — matches contact page + CTA featured). */ .flex-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(6, 1, 67, var(--flex-hero-overlay-alpha, 0.6)); pointer-events: none; } .flex-hero > .container { position: relative; z-index: 1; } .flex-hero__inner { max-width: 900px; } .flex-hero__headline { margin: 12px 0 16px; } .flex-hero__body { color: var(--type-body-color-dark); max-width: 680px; margin: 0 0 24px; } .flex-hero__cta { display: inline-block; } .flex-hero__ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } /* Secondary CTA — outline style survives the .flex-hero .hp-btn base override because these rules are more specific AND use !important. */ .flex-hero .flex-hero__cta--secondary, .flex-hero .flex-hero__cta--secondary:focus, .flex-hero .flex-hero__cta--secondary:focus-visible, .flex-hero .flex-hero__cta--secondary:active { background: transparent !important; color: var(--color-white) !important; border-color: rgba(255, 255, 255, 0.55) !important; } .flex-hero .flex-hero__cta--secondary:hover { background: var(--color-accent) !important; color: var(--color-white) !important; border-color: var(--color-accent) !important; } /* ========================================================================== TEXT + IMAGE (left/right) ========================================================================== */ .flex-ti { background: var(--color-white); padding: 96px 0; } .flex-ti__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .flex-ti__image { min-height: 0; } .flex-ti__text { display: flex; flex-direction: column; gap: 16px; max-width: 560px; } .flex-ti__headline { margin: 0; color: var(--type-heading-color); } .flex-ti__body { color: var(--type-body-color); } .flex-ti__body p { margin: 0 0 14px; } .flex-ti__body p:last-child { margin-bottom: 0; } .flex-ti .hp-btn { align-self: flex-start; margin-top: 8px; } @media (max-width: 900px) { .flex-ti { padding: 72px 0; } .flex-ti__grid { grid-template-columns: 1fr; gap: 32px; } .flex-ti__text { max-width: none; } .flex-ti--image-right .flex-ti__image { order: -1; } } @media (max-width: 600px) { .flex-ti { padding: 56px 0; } .flex-ti__grid { gap: 24px; } } /* ========================================================================== HORIZONTAL TIMELINE — dark section with a rail + circular nodes on top, equal-width cards below. Nodes and cards share a CSS grid with --flex-tl-count columns, so every node aligns exactly with its card. One entry can be flagged "Featured" → accent-colored node + card border. ========================================================================== */ .flex-timeline { background: var(--color-navy); color: var(--color-white); padding: 100px 0 110px; width: 100vw; margin-left: calc(50% - 50vw); } @media (max-width: 900px) { .flex-timeline { padding: 72px 0; } } @media (max-width: 600px) { .flex-timeline { padding: 56px 0; } } .flex-timeline__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; } .flex-timeline__head-text { flex: 1 1 auto; min-width: 0; } .flex-timeline__head .hp-eyebrow { margin: 0 0 10px; } .flex-timeline__heading { color: var(--type-heading-color-dark); margin: 0; } /* Below 600 the head wraps, so a heading wider than the space left by the nav arrows sends the nav to its own row. The text cell keeps the min-width: 0 set above: min-width: auto restores the flex item's min-content floor, which pushes the cell past the container when one word is wider than the row. */ @media (max-width: 600px) { .flex-timeline__head { flex-wrap: wrap; } } /* Prev/Next arrows — round buttons, accent on hover, disabled at ends. */ .flex-timeline__nav { display: flex; gap: 10px; flex-shrink: 0; } /* Arrow buttons: the Team Scroller arrow box. 44x44 square, transparent with a white border, white fill on hover, masked arrow.svg tinted via currentColor. Every state is scoped under .flex-timeline (two classes or more). The inline SVG inside the button is hidden; the ::before pseudo is the visual. */ .flex-timeline .flex-timeline__arrow, .flex-timeline .flex-timeline__arrow:hover, .flex-timeline .flex-timeline__arrow:focus, .flex-timeline .flex-timeline__arrow:focus-visible, .flex-timeline .flex-timeline__arrow:active { width: 44px; height: 44px; margin: 0; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: var(--color-white); border-radius: 4px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; white-space: normal; line-height: 1; -webkit-tap-highlight-color: transparent; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease; outline: none; box-shadow: none; } .flex-timeline .flex-timeline__arrow:hover:not(:disabled) { background: var(--color-white); color: var(--color-navy); } .flex-timeline .flex-timeline__arrow:active:not(:disabled) { transform: scale(0.96); background: var(--color-white); color: var(--color-navy); } .flex-timeline .flex-timeline__arrow:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.65); outline-offset: 2px; } /* Disabled at either end of the rail: faded, no fill, in every state. */ .flex-timeline .flex-timeline__arrow:disabled, .flex-timeline .flex-timeline__arrow[disabled] { opacity: 0.35 !important; cursor: not-allowed !important; background: transparent !important; color: var(--color-white) !important; border-color: rgba(255, 255, 255, 0.5) !important; transform: none !important; box-shadow: none !important; } .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:disabled, .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow[disabled] { background: transparent !important; color: var(--color-navy) !important; border-color: rgba(6, 1, 67, 0.35) !important; } /* Hide the inline SVG fallback; the ::before below is the real icon. */ .flex-timeline__arrow > svg { display: none; } .flex-timeline__arrow::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; } .flex-timeline__arrow--prev::before { transform: rotate(-135deg); } .flex-timeline__arrow--next::before { transform: rotate(45deg); } /* Light variant: navy border and navy arrow; hover and press go to a navy fill with a white arrow. */ .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow, .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:hover, .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:focus, .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:focus-visible, .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:active { border-color: rgba(6, 1, 67, 0.35); color: var(--color-navy); background: transparent; } .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:hover:not(:disabled), .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:active:not(:disabled) { background: var(--color-navy); color: var(--color-white); } .flex-timeline.flex-timeline--bg-light .flex-timeline__arrow:focus-visible { outline-color: rgba(6, 1, 67, 0.65); } /* Viewport — shared horizontal scroll container for rail + cards. Hidden scrollbar; scroll-snap so cards land cleanly on stop. Both rail and cards use matching flex layouts so nodes stay pinned above their cards while the user scrolls. */ .flex-timeline__viewport { position: relative; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; /* Bleed past container padding for a "cards extend past the edge" feel common to horizontal sliders. */ margin: 0 -20px; padding: 0 20px; } .flex-timeline__viewport::-webkit-scrollbar { display: none; } /* Rail — runs as a flex row with one cell per entry. Each cell matches the card width (set via --flex-tl-card-width), so each node is perfectly centered above its card. */ .flex-timeline__rail-wrap { position: relative; margin-bottom: 32px; min-width: max-content; } .flex-timeline__rail-wrap::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.25); transform: translateY(-50%); } .flex-timeline__rail { --flex-tl-card-width: 320px; display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; } .flex-timeline__rail-cell { flex: 0 0 var(--flex-tl-card-width); display: flex; justify-content: center; align-items: center; min-height: 22px; } .flex-timeline__node { width: 14px; height: 14px; border-radius: 50%; background: var(--color-navy); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 4px var(--color-navy); /* "hole" through the rail line */ } .flex-timeline__node.is-featured { border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-navy), 0 0 10px rgba(9, 0, 127, 0.6); } /* Cards — flex row, each card pinned to var(--flex-tl-card-width). align-items: flex-start lets each card size to its own content instead of stretching to match the tallest card in the row. */ .flex-timeline__cards { --flex-tl-card-width: 320px; display: flex; gap: 20px; align-items: flex-start; list-style: none; margin: 0; padding: 0; min-width: max-content; } .flex-timeline__card { flex: 0 0 var(--flex-tl-card-width); scroll-snap-align: start; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 28px 26px 28px; color: var(--color-white); display: flex; flex-direction: column; gap: 14px; transition: border-color 0.2s ease, background 0.2s ease; } .flex-timeline__card.is-featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 18px 50px rgba(9, 0, 127, 0.25); } .flex-timeline__card-title { color: var(--type-item-color-dark); margin: 0; } .flex-timeline__card-body { color: var(--type-body-color-dark); } .flex-timeline__card-body p { margin: 0 0 12px; } .flex-timeline__card-body p:last-child { margin-bottom: 0; } /* Light-background variant — same layout, inverted colors. Added as its own class block so the dark variant above stays untouched and we only override what needs to change. */ .flex-timeline--bg-light { background: var(--color-white); color: var(--color-navy); } .flex-timeline--bg-light .flex-timeline__heading { color: var(--type-heading-color); } .flex-timeline--bg-light .flex-timeline__rail-wrap::before { background: rgba(6, 1, 67, 0.18); } .flex-timeline--bg-light .flex-timeline__node { background: var(--color-white); border-color: rgba(6, 1, 67, 0.55); box-shadow: 0 0 0 4px var(--color-white); } .flex-timeline--bg-light .flex-timeline__node.is-featured { border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-white), 0 0 10px rgba(9, 0, 127, 0.35); } .flex-timeline--bg-light .flex-timeline__card { background: var(--color-gray-50, #f5f6f8); border: 1px solid rgba(6, 1, 67, 0.08); color: var(--color-navy); } .flex-timeline--bg-light .flex-timeline__card.is-featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 18px 50px rgba(9, 0, 127, 0.12); } .flex-timeline--bg-light .flex-timeline__card-title { color: var(--type-item-color); } .flex-timeline--bg-light .flex-timeline__card-body { color: var(--type-body-color); } /* Responsive — cards + rail share the same horizontal scroll, so no grid collapse is needed. Only tweak is shrinking the card width on mobile so swipes feel tighter. */ @media (max-width: 600px) { .flex-timeline__rail, .flex-timeline__cards { --flex-tl-card-width: 260px; gap: 14px; } } /* ========================================================================== SPLIT BODY (two columns + CTA) — mirrors the homepage About Us section including the display:contents alignment fix (desktop) and the reorder-on-mobile flow fix. Desktop (>=901px): both columns flatten into the outer grid via display:contents, so both body paragraphs land on grid-row 3 and auto- align regardless of how the left-column heading wraps. Mobile (<900px): columns stack, right column flex-reorders so the flow reads eyebrow → heading → body_1 → body_2 → CTA (left-aligned). ========================================================================== */ .flex-split { background: var(--color-white); padding: 110px 0 120px; } @media (max-width: 900px) { .flex-split { padding: 140px 0 80px; } } @media (max-width: 600px) { .flex-split { padding: 100px 0 60px; } } .flex-split__columns { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 80px; row-gap: 0; align-items: start; } .flex-split__heading { color: var(--type-heading-color); margin: 0 0 20px; } .flex-split__body { color: var(--type-body-color); } .flex-split__body p { margin: 0 0 14px; } .flex-split__body p:last-child { margin-bottom: 0; } /* Desktop layout — flatten both columns into the outer grid so the bodies share row 3 and auto-align. Row 1 holds eyebrow (left), row 2 holds heading (left) + CTA spanning 1/3 on the right. */ @media (min-width: 901px) { .flex-split__left, .flex-split__right { display: contents; } .flex-split__left > .hp-eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 14px 0; } .flex-split__left > .flex-split__heading { grid-column: 1; grid-row: 2; margin: 0; } .flex-split__left > .flex-split__body { grid-column: 1; grid-row: 3; margin-top: 30px; } .flex-split__right > .flex-split__cta { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; margin: 0; } .flex-split__right > .flex-split__body { grid-column: 2; grid-row: 3; margin-top: 30px; } } /* No CTA: the right column's rows 1 and 2 are empty, so the eyebrow and the heading take the whole row and the heading reads at the prose Wide measure (the registered prose measure below 1144px, 1080px from 1144px, the same gate .flex-prose--wide uses). The bodies keep their two columns on row 3. With a CTA the modifier is absent and nothing here applies. */ @media (min-width: 901px) { .flex-split--no-cta .flex-split__left > .hp-eyebrow { grid-column: 1 / -1; } .flex-split--no-cta .flex-split__left > .flex-split__heading { grid-column: 1 / -1; } .flex-split--no-cta .flex-split__left > .flex-split__heading { max-width: var(--flex-prose-measure); } } @media (min-width: 1144px) { .flex-split--no-cta .flex-split__left > .flex-split__heading { max-width: 1080px; } } /* Mobile: single column, right column becomes a flex container with the body reordered above the CTA, CTA left-aligned. */ @media (max-width: 900px) { .flex-split__columns { grid-template-columns: 1fr; grid-template-rows: none; gap: 32px; } .flex-split__left, .flex-split__right { display: flex !important; flex-direction: column !important; gap: 16px; } .flex-split__right .flex-split__body { order: 0 !important; margin-top: 0 !important; } .flex-split__right .flex-split__cta { order: 1 !important; align-self: flex-start !important; justify-self: flex-start !important; margin-top: 8px; } } /* ========================================================================== FULL-WIDTH PROSE ========================================================================== */ /* One reading measure for the row. `ch` resolves against the font of the element it is written on, so the measure is registered as a length, declared on the container, whose font matches the body face, and inherited by the heading and the body as one computed value. */ @property --flex-prose-measure { syntax: ""; inherits: true; initial-value: 674px; } .flex-prose { background: var(--color-white); padding: 96px 0; } /* Wide prose sits on the site grid, the same container the hero, the document cards and the footer use. Narrow keeps the 720px reading measure. */ .flex-prose .container { max-width: var(--container-max); --flex-prose-measure: 54ch; } .flex-prose--narrow .container { max-width: 720px; } .flex-prose__heading { margin: 12px 0 20px; color: var(--type-heading-color); } .flex-prose__body { color: var(--type-body-color); } .flex-prose__body p { margin: 0 0 18px; } .flex-prose__body p:last-child { margin-bottom: 0; } .flex-prose__body h2 { color: var(--type-heading-color); margin: 32px 0 12px; } .flex-prose__body h3 { color: var(--type-item-color); margin: 32px 0 12px; } .flex-prose__body a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .flex-prose__body strong { color: var(--color-navy); font-weight: 600; } .flex-prose__body ul, .flex-prose__body ol { padding-left: 22px; margin: 0 0 18px; } .flex-prose__body li { margin: 0 0 6px; } /* Reading measure: prose body text caps at ~68 characters (55ch of the body face) and sits left inside the container; the heading takes the same measure so the row reads as one column. */ .flex-prose__body { max-width: var(--flex-prose-measure); } .flex-prose__heading { max-width: var(--flex-prose-measure); } @media (max-width: 900px) { .flex-prose { padding: 72px 0; } } @media (max-width: 600px) { .flex-prose { padding: 56px 0; } } /* ========================================================================== FEATURE GRID ========================================================================== */ .flex-fg { background: var(--color-white); padding: 96px 0; } .flex-fg__header { max-width: 720px; margin: 0 auto 48px; text-align: center; } @media (max-width: 900px) { .flex-fg { padding: 72px 0; } .flex-fg__header { margin-bottom: 40px; } } @media (max-width: 600px) { .flex-fg { padding: 56px 0; } } .flex-fg__heading { color: var(--type-heading-color); margin: 12px 0 16px; } .flex-fg__intro { color: var(--type-body-color); margin: 0; } .flex-fg__grid { display: grid; gap: 24px; } .flex-fg--cols-2 .flex-fg__grid { grid-template-columns: repeat(2, 1fr); } .flex-fg--cols-3 .flex-fg__grid { grid-template-columns: repeat(3, 1fr); } .flex-fg--cols-4 .flex-fg__grid { grid-template-columns: repeat(4, 1fr); } .flex-fg__card-icon { width: 48px; height: 48px; margin-bottom: 16px; } .flex-fg__card-icon img { width: 100%; height: 100%; object-fit: contain; } .flex-fg__card-title { color: var(--type-item-color); margin: 0 0 8px; } .flex-fg__card-body { color: var(--type-body-color); margin: 0; } @media (max-width: 900px) { .flex-fg--cols-3 .flex-fg__grid, .flex-fg--cols-4 .flex-fg__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .flex-fg__grid { grid-template-columns: 1fr !important; } } /* ========================================================================== STAT CARDS ========================================================================== */ .flex-stats { padding: 96px 0; } .flex-stats--bg-navy { background: var(--color-navy); color: var(--color-white); } .flex-stats--bg-white { background: var(--color-white); color: var(--color-navy); } .flex-stats--bg-gray { background: var(--color-gray-50, #f5f6f8); color: var(--color-navy); } .flex-stats__header { text-align: center; max-width: 720px; margin: 0 auto 40px; } @media (max-width: 900px) { .flex-stats { padding: 72px 0; } .flex-stats__header { margin-bottom: 32px; } } @media (max-width: 600px) { .flex-stats { padding: 56px 0; } } .flex-stats__heading { margin: 12px 0 0; } /* Grid column count adapts to the number of items. Desktop: all items on one row for counts 1-5, 3×2 for count 6. Tablet = 2 col, mobile = 1 col. */ .flex-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); /* sensible default */ gap: 0; } .flex-stats__grid--count-1 { grid-template-columns: 1fr; } .flex-stats__grid--count-2 { grid-template-columns: repeat(2, 1fr); } .flex-stats__grid--count-3 { grid-template-columns: repeat(3, 1fr); } .flex-stats__grid--count-4 { grid-template-columns: repeat(4, 1fr); } .flex-stats__grid--count-5 { grid-template-columns: repeat(5, 1fr); } .flex-stats__grid--count-6 { grid-template-columns: repeat(3, 1fr); } /* 3×2 wrap */ .flex-stats__item { padding: 24px 32px; text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.18); } .flex-stats__item:first-child { border-left: none; } /* count=6 wraps to 3×2 — reset divider on each row's first item. */ .flex-stats__grid--count-6 .flex-stats__item:nth-child(3n+1) { border-left: none; } /* Light / gray backgrounds — flip the divider to a dark translucent. */ .flex-stats--bg-white .flex-stats__item, .flex-stats--bg-gray .flex-stats__item { border-left-color: rgba(6, 1, 67, 0.14); } /* Title — h3-scale uppercase label. Clamp 24px → 32px (mobile → desktop) so stat numbers read as prominent section-level headlines. */ .flex-stats__number { font-family: var(--font-display, "commuters-sans"), sans-serif; text-transform: uppercase; font-size: clamp(24px, 1.4vw + 12px, 32px); font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; margin: 0 0 12px; } .flex-stats__label { /* Pull into the site body-copy clamp + weight */ opacity: 0.85; margin: 0; } .flex-stats--bg-navy .flex-stats__label { color: var(--type-body-color-dark); } /* Responsive — 2-col tablet, 1-col mobile with dividers rotated 90°. Reset to `!important` style row-start detection for every count variant. */ @media (max-width: 900px) { .flex-stats__grid, .flex-stats__grid--count-1, .flex-stats__grid--count-2, .flex-stats__grid--count-3, .flex-stats__grid--count-4, .flex-stats__grid--count-5, .flex-stats__grid--count-6 { grid-template-columns: repeat(2, 1fr); } .flex-stats__item { border-left: 1px solid rgba(255, 255, 255, 0.18); } .flex-stats__item:nth-child(2n+1) { border-left: none; } .flex-stats--bg-white .flex-stats__item, .flex-stats--bg-gray .flex-stats__item { border-left-color: rgba(6, 1, 67, 0.14); } } @media (max-width: 600px) { .flex-stats__grid, .flex-stats__grid--count-1, .flex-stats__grid--count-2, .flex-stats__grid--count-3, .flex-stats__grid--count-4, .flex-stats__grid--count-5, .flex-stats__grid--count-6 { grid-template-columns: 1fr; } .flex-stats__item { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.18); padding: 22px 8px; } .flex-stats__item:first-child { border-top: none; } .flex-stats--bg-white .flex-stats__item, .flex-stats--bg-gray .flex-stats__item { border-top-color: rgba(6, 1, 67, 0.14); } } /* ========================================================================== CTA BLOCK (multi-style) — 3 layouts in one .flex-cta element. Style modifier: .flex-cta--style-{simple|image|featured} simple — centered, no image, navy or white bg image — homepage-style, image-right (58%), content-left featured — rounded card with bg image + dark form card on the right ========================================================================== */ /* ---------- SIMPLE ---------- */ .flex-cta--style-simple { padding: 96px 0; } .flex-cta--style-simple.flex-cta--bg-navy { background: var(--color-navy); color: var(--color-white); } .flex-cta--style-simple.flex-cta--bg-white { background: var(--color-white); color: var(--color-navy); border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; } @media (max-width: 900px) { .flex-cta--style-simple { padding: 72px 0; } } @media (max-width: 600px) { .flex-cta--style-simple { padding: 56px 0; } } .flex-cta--style-simple .flex-cta__inner { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .flex-cta--style-simple .flex-cta__headline { color: inherit; margin: 0; } .flex-cta--style-simple .flex-cta__body { margin: 0; opacity: 0.9; max-width: 640px; } .flex-cta--style-simple.flex-cta--bg-navy .flex-cta__body { color: var(--type-body-color-dark); } .flex-cta--style-simple .flex-cta__btn { margin-top: 12px; } /* ---------- IMAGE (homepage-style) ---------- */ .flex-cta--style-image { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--color-navy); color: var(--color-white); overflow: hidden; min-height: 480px; } .flex-cta--style-image .flex-cta__inner { position: relative; z-index: 2; } .flex-cta--style-image .flex-cta__content { max-width: 480px; padding: 120px 0 140px; position: relative; z-index: 2; } .flex-cta--style-image .flex-cta__headline { color: var(--type-heading-color-dark); margin: 10px 0 22px; } .flex-cta--style-image .flex-cta__body { color: var(--type-body-color-dark); margin: 0 0 32px; max-width: 440px; } .flex-cta--style-image .flex-cta__visual { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 1; pointer-events: none; } .flex-cta--style-image .flex-cta__image { width: 100%; height: 100%; display: block; } .flex-cta__image--fit-cover { object-fit: cover; } .flex-cta__image--fit-contain { object-fit: contain; } .flex-cta__image--align-top { object-position: center top; } .flex-cta__image--align-center { object-position: center center; } .flex-cta__image--align-bottom { object-position: center bottom; } @media (max-width: 1024px) { .flex-cta--style-image .flex-cta__visual { width: 45%; opacity: 0.55; } } @media (max-width: 900px) { .flex-cta--style-image { min-height: 0; } .flex-cta--style-image .flex-cta__content { max-width: 100%; padding: 80px 0 220px; } .flex-cta--style-image .flex-cta__visual { width: 100%; height: 240px; top: auto; bottom: 0; opacity: 0.4; } } /* ---------- FEATURED (rounded card + bg image + form) ---------- */ .flex-cta--style-featured { position: relative; background-color: var(--color-navy); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 20px; overflow: hidden; max-width: 1280px; margin: 72px auto; color: var(--color-white); } .flex-cta--style-featured .flex-cta__overlay { position: absolute; inset: 0; background: linear-gradient( 115deg, rgba(6, 1, 67, 0.82) 0%, rgba(6, 1, 67, 0.72) 50%, rgba(6, 1, 67, 0.60) 100% ); z-index: 0; pointer-events: none; } .flex-cta--style-featured > .container { position: relative; z-index: 1; padding: 72px 56px; } .flex-cta--style-featured .flex-cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .flex-cta--style-featured .flex-cta__content { max-width: 520px; } .flex-cta--style-featured .flex-cta__headline { color: var(--type-heading-color-dark); margin: 8px 0 20px; } .flex-cta--style-featured .flex-cta__body { color: var(--type-body-color-dark); margin: 0 0 28px; } /* Optional Address block — shown below the body, above the actions. */ .flex-cta--style-featured .flex-cta__address { margin: 0 0 24px; display: flex; flex-direction: column; gap: 4px; color: rgba(255, 255, 255, 0.85); font-family: var(--font-body); font-size: 14px; line-height: 1.55; } .flex-cta--style-featured .flex-cta__address-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .flex-cta--style-featured .flex-cta__address-value { color: var(--color-white); } /* Action row — CTA button + LinkedIn icon button side by side. */ .flex-cta--style-featured .flex-cta__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .flex-cta--style-featured .flex-cta__social-btn, .flex-cta--style-featured .flex-cta__social-btn:focus, .flex-cta--style-featured .flex-cta__social-btn:focus-visible, .flex-cta--style-featured .flex-cta__social-btn:active { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s; outline: none !important; box-shadow: none !important; text-decoration: none !important; flex-shrink: 0; } .flex-cta--style-featured .flex-cta__social-btn:hover { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); } /* Featured form card — darker fill, rounded corners, dark inputs. */ .flex-cta--style-featured .flex-cta__form-wrap { background: rgba(6, 1, 67, 0.72); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 32px 28px 28px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .flex-cta--style-featured .flex-cta__form { display: flex; flex-direction: column; gap: 14px; } .flex-cta--style-featured .flex-cta__field { display: flex; flex-direction: column; gap: 6px; } .flex-cta--style-featured .flex-cta__field > span { color: var(--color-white); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } .flex-cta--style-featured .flex-cta__field input, .flex-cta--style-featured .flex-cta__field textarea, .flex-cta--style-featured .flex-cta__field select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--color-white); border-radius: 8px; padding: 12px 14px; font-size: 15px; font-family: var(--font-body); box-sizing: border-box; width: 100%; } .flex-cta--style-featured .flex-cta__field input::placeholder, .flex-cta--style-featured .flex-cta__field textarea::placeholder { color: rgba(255, 255, 255, 0.5); } .flex-cta--style-featured .flex-cta__field input:focus, .flex-cta--style-featured .flex-cta__field input:focus-visible, .flex-cta--style-featured .flex-cta__field textarea:focus, .flex-cta--style-featured .flex-cta__field textarea:focus-visible, .flex-cta--style-featured .flex-cta__field select:focus, .flex-cta--style-featured .flex-cta__field select:focus-visible { outline: none !important; box-shadow: none !important; border-color: rgba(255, 255, 255, 0.55) !important; background: rgba(255, 255, 255, 0.10) !important; } .flex-cta--style-featured .flex-cta__field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .flex-cta--style-featured .flex-cta__success, .flex-cta--style-featured .flex-cta__error { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 14px; font-weight: 500; } .flex-cta--style-featured .flex-cta__success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); color: #bbf7d0; } .flex-cta--style-featured .flex-cta__error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #fecaca; } .flex-cta--style-featured .flex-cta__submit { align-self: flex-start; margin-top: 6px; } @media (max-width: 900px) { .flex-cta--style-featured { margin: 40px 16px; border-radius: 16px; } .flex-cta--style-featured > .container { padding: 48px 28px; } /* minmax(0, 1fr): the automatic minimum of a 1fr track is the item's min-content size, and the form input's intrinsic width exceeds the box. */ .flex-cta--style-featured .flex-cta__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; } } /* ========================================================================== CTA — FEATURED SPLIT (50/50 contact-page style) Full-bleed, edge-to-edge section. Left half = full-cover image with navy overlay. Right half = navy content + form, padded. No bottom spacing so it sits directly against the footer. ========================================================================== */ .flex-cta--style-featured_split { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-navy); color: var(--color-white); /* Edge-to-edge: punch out of page-flexible's main container padding. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; padding: 0; min-height: 640px; overflow: hidden; } /* LEFT column — full-bleed image with navy overlay. */ .flex-cta--style-featured_split .flex-cta__split-left { position: relative; overflow: hidden; min-height: 100%; background: var(--color-navy); } .flex-cta--style-featured_split .flex-cta__split-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .flex-cta--style-featured_split .flex-cta__split-overlay { position: absolute; inset: 0; background: rgba(6, 1, 67, 0.55); pointer-events: none; } /* RIGHT column — padded content + form column. */ .flex-cta--style-featured_split .flex-cta__split-right { padding: 88px 72px; display: flex; flex-direction: column; justify-content: center; background: var(--color-navy); } .flex-cta--style-featured_split .flex-cta__split-content { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: 18px; } .flex-cta--style-featured_split .flex-cta__headline { color: var(--type-heading-color-dark); margin: 0; } .flex-cta--style-featured_split .flex-cta__body { color: var(--type-body-color-dark); margin: 0; } /* Footer row under the form — address (left) + LinkedIn button (right) share one horizontal separator band. Separators preserved from the original design. */ .flex-cta--style-featured_split .flex-cta__footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .flex-cta--style-featured_split .flex-cta__footer-row .flex-cta__address { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding: 0; border: 0; } .flex-cta--style-featured_split .flex-cta__address-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .flex-cta--style-featured_split .flex-cta__address-value { font-size: 15px; line-height: 1.45; color: var(--color-white); } /* LinkedIn button — rectangular (reuses hp-btn--outline-light base) with icon + label. */ .flex-cta--style-featured_split .flex-cta__linkedin-btn { display: inline-flex !important; align-items: center; gap: 8px; flex-shrink: 0; } .flex-cta--style-featured_split .flex-cta__linkedin-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } /* Form — reuse featured form styling with two-column rows. */ .flex-cta--style-featured_split .flex-cta__form--split { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .flex-cta--style-featured_split .flex-cta__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .flex-cta--style-featured_split .flex-cta__field { display: flex; flex-direction: column; gap: 6px; } .flex-cta--style-featured_split .flex-cta__field > span { color: var(--color-white); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } .flex-cta--style-featured_split .flex-cta__field input, .flex-cta--style-featured_split .flex-cta__field textarea, .flex-cta--style-featured_split .flex-cta__field select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--color-white); border-radius: 8px; padding: 12px 14px; font-size: 15px; font-family: var(--font-body); box-sizing: border-box; width: 100%; } .flex-cta--style-featured_split .flex-cta__field input::placeholder, .flex-cta--style-featured_split .flex-cta__field textarea::placeholder { color: rgba(255, 255, 255, 0.5); } .flex-cta--style-featured_split .flex-cta__field input:focus, .flex-cta--style-featured_split .flex-cta__field input:focus-visible, .flex-cta--style-featured_split .flex-cta__field textarea:focus, .flex-cta--style-featured_split .flex-cta__field textarea:focus-visible, .flex-cta--style-featured_split .flex-cta__field select:focus, .flex-cta--style-featured_split .flex-cta__field select:focus-visible { outline: none !important; box-shadow: none !important; border-color: rgba(255, 255, 255, 0.55) !important; background: rgba(255, 255, 255, 0.10) !important; } .flex-cta--style-featured_split .flex-cta__field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .flex-cta--style-featured_split .flex-cta__success, .flex-cta--style-featured_split .flex-cta__error { padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; } .flex-cta--style-featured_split .flex-cta__success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); color: #bbf7d0; } .flex-cta--style-featured_split .flex-cta__error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #fecaca; } /* Submit button — primary CTA style: uppercase, generous padding, white bg, navy text. Hover shifts to accent. Matches the site-wide primary button treatment. All 5 states locked to prevent Elementor pink/red bleed. */ .flex-cta--style-featured_split .flex-cta__submit, .flex-cta--style-featured_split .flex-cta__submit:focus, .flex-cta--style-featured_split .flex-cta__submit:focus-visible, .flex-cta--style-featured_split .flex-cta__submit:active { align-self: flex-start; margin-top: 18px; padding: 14px 32px !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 4px !important; min-height: 48px !important; background: var(--color-white) !important; color: var(--color-navy) !important; border: 1px solid var(--color-white) !important; outline: none !important; box-shadow: none !important; cursor: pointer; } .flex-cta--style-featured_split .flex-cta__submit:hover { background: var(--color-accent) !important; color: var(--color-white) !important; border-color: var(--color-accent) !important; } /* Responsive — collapse to stacked layout at tablet, image area gets fixed height. */ @media (max-width: 960px) { .flex-cta--style-featured_split { grid-template-columns: 1fr; min-height: 0; } .flex-cta--style-featured_split .flex-cta__split-left { min-height: 340px; } .flex-cta--style-featured_split .flex-cta__split-right { padding: 56px 32px; } .flex-cta--style-featured_split .flex-cta__field-row { grid-template-columns: 1fr; } } @media (max-width: 560px) { .flex-cta--style-featured_split .flex-cta__split-left { min-height: 260px; } .flex-cta--style-featured_split .flex-cta__split-right { padding: 44px 20px; } /* Stack address above LinkedIn button on narrow screens */ .flex-cta--style-featured_split .flex-cta__footer-row { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ========================================================================== TESTIMONIAL / QUOTE ========================================================================== */ .flex-testimonial { padding: 96px 0; } @media (max-width: 900px) { .flex-testimonial { padding: 72px 0; } } @media (max-width: 600px) { .flex-testimonial { padding: 56px 0; } } /* Background variants — gray (default), white, dark navy. */ .flex-testimonial--bg-gray { background: var(--color-gray-50, #f5f6f8); } .flex-testimonial--bg-white { background: var(--color-white); } .flex-testimonial--bg-navy { background: var(--color-navy); color: var(--color-white); width: 100vw; margin-left: calc(50% - 50vw); } /* Dark variant — invert section heading + testimonial card surfaces. */ .flex-testimonial--bg-navy .flex-testimonial__heading { color: var(--color-white); } .flex-testimonial--bg-navy .flex-testimonial__author, .flex-testimonial--bg-navy .flex-testimonial-card__author { color: var(--color-white); } .flex-testimonial--bg-navy .flex-testimonial-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: none; } .flex-testimonial--bg-navy .flex-testimonial-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); transform: translateY(-3px); } .flex-testimonial--bg-navy .flex-testimonial-card__quote, .flex-testimonial--bg-navy .flex-testimonial__quote { color: rgba(255, 255, 255, 0.85); } .flex-testimonial--bg-navy .flex-testimonial-card__role, .flex-testimonial--bg-navy .flex-testimonial__role { color: rgba(255, 255, 255, 0.60); } .flex-testimonial--bg-navy .flex-testimonial-card__mark, .flex-testimonial--bg-navy .flex-testimonial__mark { color: var(--color-white); opacity: 0.25; } .flex-testimonial--bg-navy .flex-testimonial-card__cite { border-top-color: rgba(255, 255, 255, 0.12); } /* Cards + Carousel: shared section header */ .flex-testimonial__header { text-align: center; max-width: 820px; margin: 0 auto 48px; } .flex-testimonial__heading { font-family: var(--font-display, "commuters-sans"), sans-serif; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: 0.01em; color: var(--color-navy); margin: 12px 0 0; } /* Individual testimonial card (shared by Cards + Carousel) */ .flex-testimonial-card { background: var(--color-white); border-radius: 12px; padding: 32px 28px 28px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%; } .flex-testimonial-card__mark { font-family: Georgia, serif; font-size: 48px; line-height: 1; color: var(--color-navy); opacity: 0.25; margin: 0 0 8px; } .flex-testimonial-card__quote { font-size: 16px; line-height: 1.65; color: #374151; margin: 0 0 24px; } .flex-testimonial-card__cite { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid #e5e7eb; margin-top: auto; } .flex-testimonial-card__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .flex-testimonial-card__cite-text { display: flex; flex-direction: column; min-width: 0; } .flex-testimonial-card__author { font-family: var(--font-display, "commuters-sans"), sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--color-navy); font-size: 14px; line-height: 1.3; } .flex-testimonial-card__role { font-size: 13px; color: #6b7280; line-height: 1.3; margin-top: 2px; } /* Cards grid mode */ .flex-testimonial--cards .flex-testimonial__grid { display: grid; gap: 24px; } .flex-testimonial--cols-2 .flex-testimonial__grid { grid-template-columns: repeat(2, 1fr); } .flex-testimonial--cols-3 .flex-testimonial__grid { grid-template-columns: repeat(3, 1fr); } .flex-testimonial--cols-4 .flex-testimonial__grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .flex-testimonial--cols-3 .flex-testimonial__grid, .flex-testimonial--cols-4 .flex-testimonial__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .flex-testimonial--cards .flex-testimonial__grid { grid-template-columns: 1fr !important; } } /* Carousel mode — horizontal scroll-snap with auto-slide */ .flex-testimonial--carousel .flex-testimonial__carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; margin: 0 -16px; padding: 4px 16px; } .flex-testimonial--carousel .flex-testimonial__carousel::-webkit-scrollbar { display: none; } .flex-testimonial--carousel .flex-testimonial__track { display: flex; gap: 20px; animation: flexTsCarousel var(--carousel-speed, 6s) ease-in-out infinite alternate; } .flex-testimonial--carousel .flex-testimonial__track:hover { animation-play-state: paused; } .flex-testimonial--carousel .flex-testimonial-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; min-width: 280px; } @keyframes flexTsCarousel { from { transform: translateX(0); } to { transform: translateX(calc(-1 * (100% / 3 - 20px))); } } @media (max-width: 1024px) { .flex-testimonial--carousel .flex-testimonial-card { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 680px) { .flex-testimonial--carousel .flex-testimonial-card { flex-basis: 85%; } } @media (prefers-reduced-motion: reduce) { .flex-testimonial--carousel .flex-testimonial__track { animation: none; } } .flex-testimonial__block { max-width: 860px; margin: 0 auto; padding: 0; position: relative; text-align: center; } .flex-testimonial__mark { font-family: Georgia, serif; font-size: 96px; color: var(--color-navy); line-height: 1; margin: 0 0 -32px; opacity: 0.25; } .flex-testimonial__quote { font-size: clamp(20px, 2vw, 28px); line-height: 1.5; color: var(--color-navy); font-weight: 500; margin: 0 0 24px; } .flex-testimonial__cite { display: flex; align-items: center; justify-content: center; gap: 14px; } .flex-testimonial__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .flex-testimonial__cite-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .flex-testimonial__author { font-weight: 600; color: var(--color-navy); font-size: 15px; } .flex-testimonial__role { font-size: 13px; color: #6b7280; } /* ========================================================================== LOGO GARDEN / TRUSTED BY (static grid OR marquee scroll) Speed comes from an inline custom property set by PHP; each logo's ratio and scale from custom properties on its item. ========================================================================== */ .flex-logos { background: var(--color-white); padding: 72px 0; } @media (max-width: 900px) { .flex-logos { padding: 56px 0; } } @media (max-width: 600px) { .flex-logos { padding: 48px 0; } } .flex-logos__eyebrow { text-align: center; color: var(--type-eyebrow-color); margin: 0 0 40px; opacity: 0.75; } .flex-logos__item { display: flex; align-items: center; justify-content: center; padding: 20px 24px; border-radius: 10px; min-height: 96px; text-decoration: none; color: #8a92a6; font-size: 14px; text-align: center; background: transparent; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } /* Dashed placeholder box — only for label-only logos (no image). */ .flex-logos__item:has(.flex-logos__placeholder) { border: 1px dashed #cdd3dc; } a.flex-logos__item:hover { color: var(--color-navy); transform: translateY(-2px); } a.flex-logos__item:has(.flex-logos__placeholder):hover { border-color: var(--color-navy); } .flex-logos__item img { width: auto; height: auto; display: block; object-fit: contain; } /* Size modifiers: the area each logo covers, in px². A logo's width is sqrt(area x ratio) x scale and its height follows its own ratio, so every logo carries about the same visual weight. The item is the logo plus its padding. Ratio and scale are set per item by the template. */ .flex-logos--size-medium { --flex-logo-area: 3240; } .flex-logos--size-large { --flex-logo-area: 9000; } .flex-logos__item img { width: calc(sqrt(var(--flex-logo-area, 3240) * var(--flex-logo-ratio, 3)) * var(--flex-logo-scale, 1) * 1px); max-height: none; } .flex-logos--size-large .flex-logos__item { min-height: 128px; padding: 24px 28px; } .flex-logos__placeholder { display: block; } /* Static grid mode — flex-wrap so any number of logos stays centered. CSS grid with repeat(var(--flex-logos-visible), 1fr) created empty tracks when the admin "visible count" was larger than the actual number of logos, leaving items clustered at the left edge. */ .flex-logos--static .flex-logos__grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; } .flex-logos--static .flex-logos__item { flex: 0 0 auto; max-width: 100%; } .flex-logos--static .flex-logos__item img { max-width: 100%; } @media (max-width: 700px) { .flex-logos--static .flex-logos__grid { gap: 20px; } .flex-logos--static .flex-logos__item { flex-basis: calc(50% - 10px); } } /* Marquee mode — continuous scroll via CSS translateX on a track of 2x the logos */ .flex-logos--marquee .flex-logos__viewport { container-type: inline-size; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); } .flex-logos--marquee .flex-logos__track { display: flex; gap: 16px; width: max-content; animation: flexLogosScroll var(--flex-logos-speed, 30s) linear infinite; } .flex-logos--marquee .flex-logos__track:hover { animation-play-state: paused; } /* No logo is wider than the marquee viewport less its two 40px fades. */ .flex-logos--marquee .flex-logos__item img { max-width: calc(100cqw - 80px); } @keyframes flexLogosScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .flex-logos--marquee .flex-logos__track { animation: none; } } /* (CTA FEATURE block removed — functionality merged into .flex-cta multi-style system above as .flex-cta--style-image.) */ /* ========================================================================== CONTACT SECTION — info on the left, form on the right. Styled like a repurposed footer: eyebrow + headline + subhead + contact details + socials on the left; a glass-panel form card on the right. Supports navy (default) and white background variants. ========================================================================== */ .flex-contact { background: var(--color-navy); color: var(--color-white); padding: 100px 0 110px; width: 100vw; margin-left: calc(50% - 50vw); } .flex-contact--bg-white { background: var(--color-white); color: var(--color-navy); } @media (max-width: 900px) { .flex-contact { padding: 72px 0; } } @media (max-width: 600px) { .flex-contact { padding: 56px 0; } } .flex-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } /* minmax(0, 1fr), not 1fr: the automatic minimum of a 1fr track is the item's min-content size, so a headline or an address longer than the column resolves the track wider than the grid box and the column spills into the gutter. */ @media (max-width: 900px) { .flex-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } .flex-contact__headline { margin: 0; } .flex-contact__subhead { color: var(--type-body-color-dark); margin: 20px 0 32px; max-width: 520px; } .flex-contact--bg-white .flex-contact__subhead { color: var(--type-body-color); } .flex-contact__details { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; } .flex-contact__details li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; font-size: 15px; line-height: 1.5; } .flex-contact__detail-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); padding-top: 2px; } .flex-contact--bg-white .flex-contact__detail-label { color: rgba(6, 1, 67, 0.55); } .flex-contact__details a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .flex-contact__details a:hover { color: var(--color-accent); } /* Social icons — same style language as the homepage footer. */ .flex-contact__social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; } .flex-contact__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); display: inline-flex; align-items: center; justify-content: center; color: var(--color-white); transition: background 0.2s, border-color 0.2s, color 0.2s; } .flex-contact--bg-white .flex-contact__social a { border-color: rgba(6, 1, 67, 0.2); color: var(--color-navy); } .flex-contact__social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); } /* Form card (right column). Glass panel on navy; navy card on white. */ .flex-contact__form-wrap { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; padding: 36px 32px 32px; } .flex-contact--bg-white .flex-contact__form-wrap { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); } .flex-contact__form-heading { font-family: var(--font-body); font-size: 18px; font-weight: 700; margin: 0 0 22px; color: inherit; } .flex-contact--bg-white .flex-contact__form-heading { color: var(--color-white); } .flex-contact__form { display: flex; flex-direction: column; gap: 16px; } .flex-contact__field { display: flex; flex-direction: column; gap: 6px; } .flex-contact__field > span { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.78); } .flex-contact--bg-white .flex-contact__field > span { color: var(--color-white); } .flex-contact__field input, .flex-contact__field textarea { width: 100%; padding: 12px 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; color: var(--color-white); font-size: 15px; font-family: var(--font-body); box-sizing: border-box; transition: border-color 0.18s, background 0.18s; resize: vertical; } .flex-contact--bg-white .flex-contact__field input, .flex-contact--bg-white .flex-contact__field textarea { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); color: var(--color-white); } .flex-contact--bg-white .flex-contact__field input::placeholder, .flex-contact--bg-white .flex-contact__field textarea::placeholder { color: rgba(255, 255, 255, 0.5); } .flex-contact__field input:focus, .flex-contact__field textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.10); } .flex-contact--bg-white .flex-contact__field input:focus, .flex-contact--bg-white .flex-contact__field textarea:focus { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.10); } .flex-contact__submit { margin-top: 4px; justify-content: center; width: 100%; } /* Submission status banners. */ .flex-contact__success, .flex-contact__error { padding: 12px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 18px; font-weight: 500; } .flex-contact__success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.38); color: #bbf7d0; } .flex-contact__error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.38); color: #fecaca; } .flex-contact--bg-white .flex-contact__success { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.4); color: #bbf7d0; } .flex-contact--bg-white .flex-contact__error { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); color: #fecaca; } /* ========================================================================== Featured variant — rounded outer container with a background image and a dark form card. Used when the block's "Style" field is set to "Featured". Wraps in .container so it reads as a card sitting on the page (not edge-to-edge full-bleed). ========================================================================== */ .flex-contact--style-featured { position: relative; width: auto; margin-left: 0; padding: 0; background-color: var(--color-navy); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 20px; overflow: hidden; max-width: 1280px; margin: 72px auto; } .flex-contact--style-featured .flex-contact__overlay { position: absolute; inset: 0; background: linear-gradient( 115deg, rgba(6, 1, 67, 0.82) 0%, rgba(6, 1, 67, 0.72) 50%, rgba(6, 1, 67, 0.60) 100% ); z-index: 0; pointer-events: none; } .flex-contact--style-featured > .container { position: relative; z-index: 1; padding: 72px 56px; } .flex-contact--style-featured .flex-contact__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .flex-contact--style-featured .flex-contact__headline { color: var(--type-heading-color-dark); margin: 8px 0 20px; } .flex-contact--style-featured .flex-contact__body { color: var(--type-body-color-dark); margin: 0 0 28px; max-width: 520px; } /* Featured form card — darker fill, rounded corners, white labels, dark inputs with subtle borders. */ .flex-contact--style-featured .flex-contact__form-wrap { background: rgba(6, 1, 67, 0.72); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 32px 28px 28px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .flex-contact--style-featured .flex-contact__form { gap: 14px; } .flex-contact--style-featured .flex-contact__field > span { color: var(--color-white); font-weight: 500; } .flex-contact--style-featured .flex-contact__field input, .flex-contact--style-featured .flex-contact__field textarea, .flex-contact--style-featured .flex-contact__field select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--color-white); border-radius: 8px; padding: 12px 14px; font-size: 15px; font-family: var(--font-body); box-sizing: border-box; width: 100%; } .flex-contact--style-featured .flex-contact__field input::placeholder, .flex-contact--style-featured .flex-contact__field textarea::placeholder { color: rgba(255, 255, 255, 0.5); } .flex-contact--style-featured .flex-contact__field input:focus, .flex-contact--style-featured .flex-contact__field input:focus-visible, .flex-contact--style-featured .flex-contact__field textarea:focus, .flex-contact--style-featured .flex-contact__field textarea:focus-visible, .flex-contact--style-featured .flex-contact__field select:focus, .flex-contact--style-featured .flex-contact__field select:focus-visible { outline: none !important; box-shadow: none !important; border-color: rgba(255, 255, 255, 0.55) !important; background: rgba(255, 255, 255, 0.10) !important; } .flex-contact--style-featured .flex-contact__field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } @media (max-width: 900px) { .flex-contact--style-featured { margin: 40px 16px; border-radius: 16px; } .flex-contact--style-featured > .container { padding: 48px 28px; } /* minmax(0, 1fr): see the note on .flex-contact__grid above. */ .flex-contact--style-featured .flex-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } } /* ========================================================================== Empty-state notice when a page has no rows ========================================================================== */ .flex-empty { padding: 200px 0; text-align: center; color: #6b7280; font-size: 16px; } /* ========================================================================== FLEX LAYOUTS — alignment with homepage design directives. Unifies button hover color (→ accent), fills transparent light-bg buttons with white so the grid overlay doesn't bleed through, normalizes body copy to the homepage clamp + medium weight, and rebuilds the logo-garden eyebrow with the same scale/tracking/weight as .hp-eyebrow. Display headlines (.flex-*__headline) and stat numbers stay untouched. ========================================================================== */ /* Rest-state white fill on light-section buttons — grid dots/lines no longer show through the button face. */ .flex-ti .hp-btn, .flex-prose .hp-btn { background: var(--color-white); } /* Unified hover — every flex-layout button goes to the accent color (set in ACME Settings → Brand & Identity → Colors). */ .flex-hero .hp-btn:hover, .flex-hero .hp-btn:focus-visible, .flex-ti .hp-btn:hover, .flex-ti .hp-btn:focus-visible, .flex-prose .hp-btn:hover, .flex-prose .hp-btn:focus-visible, .flex-cta--bg-navy .hp-btn:hover, .flex-cta--bg-navy .hp-btn:focus-visible, .flex-cta--bg-white .hp-btn:hover, .flex-cta--bg-white .hp-btn:focus-visible { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } /* Body copy — homepage clamp + 500 weight applied to every body/paragraph slot in the flex templates. Keeps per-section color overrides intact. The prose container is on the list so it carries the body face, which is the font --flex-prose-measure resolves its `ch` against. */ .flex-prose > .container, .flex-testimonial-card__quote { font-size: var(--type-body-size); font-weight: 500; line-height: 1.6; } /* Logo-garden eyebrow — match the .hp-eyebrow scale/weight/tracking so it reads identically to eyebrows in the other flex layouts and on the homepage. Was 13px / display-font / opacity 0.75. */ .flex-logos__eyebrow { color: var(--type-eyebrow-color); opacity: 1; } /* ========================================================================== FLEX LAYOUTS v2 — typographic scale alignment with homepage. Reference values pulled directly from acme-mockup.css: - .hp-hero__headline: 33px / 600 / 1.14 (hero) - .hp-about__heading, .hp-proof__heading: 30px / 700 / 1.1 (section) The flex clamps previously topped out at 42-64px, which made flex pages read as a different visual system. Now they cap at the homepage hardcoded sizes while still scaling down on mobile. ========================================================================== */ /* Hero headline (flex-hero) — align to homepage .hp-hero__headline. */ /* Section headings — typography now lives on the shared `.section-heading` class (see acme-mockup.css). Every flex

carries that class alongside its scoped BEM class, so no clamp rule is needed here. */ /* Muted body-copy color — align to --color-gray-700 so flex pages use the same text color token as the homepage instead of a hardcoded hex. */ .flex-testimonial-card__quote { color: var(--color-gray-700, #374151); } .flex-ti__body, .flex-prose__body, .flex-fg__intro, .flex-fg__card-body { color: var(--type-body-color); } /* Testimonial card treatment — soften to match .hp-cap-card's shadow-only lift (no hard border line, slightly warmer radius). */ .flex-testimonial-card { border: none; border-radius: 10px; box-shadow: 0 1px 4px rgba(6, 1, 67, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .flex-testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(6, 1, 67, 0.10); } /* ========================================================================== FLEX LAYOUTS v3 — full consistency sweep. Matches remaining divergences from homepage: - Section padding rhythm (100/110 — mirrors .hp-about / .hp-cap) - Feature-grid cards rebuilt to .hp-cap-card treatment (transparent → accent-fill on hover, body-font title) - Stat label + testimonial role use theme color vars Hero (.flex-hero) padding stays custom because it needs to clear the fixed header overlap — same as .hp-hero. ========================================================================== */ /* Section vertical rhythm — match homepage 100/110 (desktop). featured_split is edge-to-edge with no vertical padding on the outer section (its own right column handles internal padding), so it's excluded here. */ .flex-ti, .flex-prose, .flex-fg, .flex-stats, .flex-cta:not(.flex-cta--style-featured_split), .flex-testimonial, .flex-logos { padding: 100px 0 110px; } @media (max-width: 900px) { .flex-ti, .flex-prose, .flex-fg, .flex-stats, .flex-cta:not(.flex-cta--style-featured_split), .flex-testimonial, .flex-logos { padding: 72px 0; } } @media (max-width: 600px) { .flex-ti, .flex-prose, .flex-fg, .flex-stats, .flex-cta:not(.flex-cta--style-featured_split), .flex-testimonial, .flex-logos { padding: 56px 0; } } /* Two prose rows stacked back to back add both paddings, so the band between them is twice the page's own rhythm. The following row gives up its top padding and the leading one owns the gap. (0,2,0) beats the single-class padding rules above and their media-query overrides. */ .flex-prose + .flex-prose { padding-top: 0; } /* A heading that opens a prose body takes its space from the section padding, not from its own margin. */ .flex-prose__body > :first-child { margin-top: 0; } /* Jump index. A prose paragraph holding nothing but an in-page anchor is an index entry, not body copy: it loses the paragraph rhythm and the anchor becomes a padded block so the hit area covers the space that margin used to waste. Structural hook, no page id, so it reaches any prose row built the same way. */ .flex-prose__body p:has(> a[href^="#"]:only-child) { display: flex; align-items: flex-start; margin: 0; } .flex-prose__body p:has(> a[href^="#"]:only-child) > a { padding: 6px 0; line-height: 1.35; } .flex-prose__body p:has(> a[href^="#"]:only-child) > a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* Logo garden — remove bottom padding so the section butts against whatever follows (typically CTA or footer). Keeps top padding for breathing room. */ .flex-logos, .flex-logos { padding-bottom: 0; } @media (max-width: 900px) { .flex-logos { padding-bottom: 0; } } @media (max-width: 600px) { .flex-logos { padding-bottom: 0; } } /* Logo garden without an eyebrow gives up its top padding, which is the eyebrow's room. (0,2,0) beats the single-class padding rules above and their media-query overrides, so one base rule holds at every width. */ .flex-logos.flex-logos--no-eyebrow { padding-top: 0; } /* Feature-grid cards — rebuild to match .hp-cap-card's treatment so the capability/feature grids read as one visual family. No hard border, no permanent shadow; hover fills with accent color and inverts text. */ .flex-fg__card { background: transparent; border: none; border-radius: 8px; padding: 24px 20px 20px; box-shadow: none; transition: background 0.25s, color 0.25s; } .flex-fg__card:hover { background: var(--color-accent); transform: none; box-shadow: none; } .flex-fg__card:hover .flex-fg__card-title, .flex-fg__card:hover .flex-fg__card-body { color: var(--color-white); } .flex-fg__card-title { color: var(--type-item-color); margin: 0 0 12px; } /* Stat label — pull into the body clamp instead of a custom 14px. */ /* ========================================================================= SERVICES — SPLIT BODY + BOXES variant Uses `.flex-split` classes verbatim for the top (inherits all split-body styles). 4-col row of small boxes beneath on desktop, 2-col tablet, 1-col mobile. Reuses the site-wide typography system. ========================================================================= */ /* .flex-split--with-boxes is a standalone modifier on the plain .flex-split section — no .flex-services wrapper needed (adding it forces navy bg + white text, breaking the split-body's light-bg scheme). Use this class only as a scope for the boxes grid. Dark variant covers section + boxes. */ /* ----- DARK variant — section bg navy, text white, boxes navy-outline ----- */ .flex-split--bg-dark { background: var(--color-navy); color: var(--color-white); } .flex-split--bg-dark .flex-split__heading { color: var(--type-heading-color-dark); } .flex-split--bg-dark .flex-split__body { color: var(--type-body-color-dark); } .flex-split--bg-dark .flex-split__body p { color: var(--type-body-color-dark); } .flex-split--bg-dark .flex-services__box { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); color: var(--color-white); } .flex-split--bg-dark .flex-services__box-title { color: var(--type-item-color-dark); } .flex-split--bg-dark .flex-services__box-desc { color: rgba(255, 255, 255, 0.78); } .flex-split--bg-dark .flex-services__box-icon-img { filter: brightness(0) invert(1); } /* Hover on dark variant uses the same accent fill as light — consistent. */ .flex-services__boxes { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .flex-services__boxes--count-1 { grid-template-columns: 1fr; max-width: 480px; } .flex-services__boxes--count-2 { grid-template-columns: repeat(2, 1fr); } .flex-services__boxes--count-3 { grid-template-columns: repeat(3, 1fr); } .flex-services__box { background: var(--color-white); border: 1px solid rgba(6, 1, 67, 0.1); border-radius: 10px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease; } .flex-services__box--linked:hover, .flex-services__box--linked:focus-within { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); transform: translateY(-2px); } .flex-services__box-icon { display: inline-flex; height: 44px; align-items: center; margin-bottom: 4px; transition: filter 0.22s ease; } .flex-services__box-icon-img { height: 40px; width: auto; display: block; } .flex-services__box--linked:hover .flex-services__box-icon-img, .flex-services__box--linked:focus-within .flex-services__box-icon-img { filter: brightness(0) invert(1); } /* h4-scale — smaller than card titles, still uppercase + display for brand. */ .flex-services__box-title { color: var(--type-item-color); margin: 0; transition: color 0.22s ease; } .flex-services__box-desc { /* Site-wide body clamp + weight */ font-size: var(--type-body-size); font-weight: 500; line-height: 1.55; color: rgba(6, 1, 67, 0.72); margin: 0; transition: color 0.22s ease; } .flex-services__box--linked:hover .flex-services__box-title, .flex-services__box--linked:focus-within .flex-services__box-title, .flex-services__box--linked:hover .flex-services__box-desc, .flex-services__box--linked:focus-within .flex-services__box-desc { color: var(--color-white); } @media (max-width: 900px) { .flex-services__boxes { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; } .flex-services__boxes--count-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .flex-services__boxes, .flex-services__boxes--count-2, .flex-services__boxes--count-3 { grid-template-columns: 1fr; } .flex-services__box { padding: 22px 20px; } } /* ========================================================================= HP-CAP inside the Services "Key Features Boxes" variant Overrides the homepage's explicit nth-child grid placements so the cards auto-flow left-to-right for any count (the homepage hard-codes positions that assume exactly 5 cards). Adds a `--featured` highlight since the homepage doesn't style that class by itself. ========================================================================= */ .hp-cap--flex .hp-cap__heading-cell { grid-column: 1; grid-row: 1; } .hp-cap--flex .hp-cap__cards .hp-cap-card:nth-child(n) { grid-column: auto; grid-row: auto; } /* Featured card — persistent accent highlight (matches the hover look). */ .hp-cap--flex .hp-cap-card--featured { background: var(--color-accent); color: var(--color-white); } .hp-cap--flex .hp-cap-card--featured .hp-cap-card__title { color: var(--color-white); } .hp-cap--flex .hp-cap-card--featured .hp-cap-card__desc { color: var(--type-body-color-dark); } .hp-cap--flex .hp-cap-card--featured .hp-cap-card__desc { color: var(--type-body-color-dark); } .hp-cap--flex .hp-cap-card--featured .hp-cap-card__icon img { filter: brightness(0) invert(1); } .hp-cap--flex .hp-cap-card--featured .hp-cap-card__arrow { opacity: 1; } /* Hover state — force BOTH title and desc to white with maximal specificity. Mirrors the homepage's hover behavior but uses pure #fff (vs the homepage's rgba 0.88) and !important everywhere so this wins against any late-cascade or Elementor rule that re-asserts color. */ html body section.hp-cap.hp-cap--flex .hp-cap-card:hover, html body section.hp-cap.hp-cap--flex .hp-cap-card:hover .hp-cap-card__title, html body section.hp-cap.hp-cap--flex .hp-cap-card:hover .hp-cap-card__desc, html body section.hp-cap.hp-cap--flex .hp-cap-card:hover p { color: #fff !important; } /* Featured state — same treatment (persistent highlighted look). */ html body .hp-cap--flex .hp-cap-card--featured .hp-cap-card__title { color: var(--color-white) !important; } html body .hp-cap--flex .hp-cap-card--featured .hp-cap-card__desc { color: var(--type-body-color-dark) !important; } /* ========================================================================= SERVICES (stacking cards — sticky scroll) Each item = a full card. `position: sticky` lets each card stick at the top as the user scrolls, and the next card slides up and overlaps it. Every card is always fully rendered (no accordion). Per-card background image + navy overlay. ========================================================================= */ .flex-services { position: relative; background: var(--color-navy); color: var(--color-white); padding: 100px 0 0; /* Bottom padding removed so the last sticky card butts against the next section — avoids a large empty gap after stacking finishes. */ /* IMPORTANT: no `overflow: hidden` here — it would break position:sticky on descendant cards (ancestor overflow clipping kills sticky behavior). */ } @media (max-width: 900px) { .flex-services { padding: 72px 0 0; } } @media (max-width: 600px) { .flex-services { padding: 56px 0 0; } } /* 2-col header — heading on the left, supporting paragraph on the right. */ .flex-services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 80px; align-items: end; margin-bottom: 48px; } .flex-services__head .hp-eyebrow { margin: 0 0 12px; } .flex-services__heading { margin: 0; color: var(--type-heading-color-dark); text-align: left; } .flex-services__intro { margin: 0; /* Site-wide body-copy clamp + weight (matches .hp-hero__body, .hp-cta__body, etc.) */ font-size: var(--type-body-size); font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 520px; justify-self: end; } @media (max-width: 820px) { .flex-services__head { grid-template-columns: 1fr; gap: 20px; } .flex-services__intro { justify-self: start; max-width: none; } } /* Stack container — plain block layout. Flex was breaking sticky (flex's stretch on children defeats the scroll-within-parent behavior). */ .flex-services__stack { display: block; position: relative; } /* Individual card — sticks at top on scroll; next card slides up over it. Flat look (no radius / no shadow) with a horizontal line divider at the top of each card, matching the reference design. */ .flex-services__card { position: sticky; top: 80px; min-height: 420px; background: var(--color-navy); color: var(--color-white); border-top: 1px solid rgba(255, 255, 255, 0.18); overflow: hidden; display: flex; align-items: center; padding: 44px 0; } .flex-services__card:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); } /* Per-card background image + navy overlay */ .flex-services__card-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .flex-services__card-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .flex-services__card-bg::after { content: ""; position: absolute; inset: 0; background: rgba(6, 1, 67, var(--card-overlay-alpha, 0.6)); } /* Card inner content — above the bg layer. */ .flex-services__card-inner { position: relative; z-index: 1; width: 100%; } /* 3-col row inside each card. */ .flex-services__card-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 40px; align-items: start; } .flex-services__left { display: flex; flex-direction: column; gap: 14px; } .flex-services__num { font-family: var(--font-display); font-size: clamp(22px, 1vw + 14px, 28px); font-weight: 700; line-height: 1; color: var(--color-white); letter-spacing: 0.02em; } .flex-services__subtitle { font-family: var(--font-body); /* Smaller meta-caption, but still using system weight 500. */ font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.75); max-width: 180px; } .flex-services__middle { display: flex; flex-direction: column; gap: 22px; min-width: 0; } /* Title — matches the homepage .hp-market-card__title sizing (clamp 23–29px, weight 600, line-height 1.15). */ .flex-services__title { margin: 0; color: var(--type-item-color-dark); } .flex-services__right { min-width: 0; } .flex-services__desc { /* Site-wide body-copy clamp + weight. */ color: var(--type-body-color-dark); } .flex-services__desc p { margin: 0 0 12px; } .flex-services__desc p:last-child { margin-bottom: 0; } /* Lists in the description: prose indent and markers, marker in the copy colour. */ .flex-services__desc ul, .flex-services__desc ol { padding-left: 22px; } .flex-services__desc ul { list-style: disc outside; } .flex-services__desc ol { list-style: decimal outside; } .flex-services__desc li::marker { color: inherit; } /* CTA button — accent fill, white text. Locked 5 states vs Elementor red. */ .flex-services__cta, .flex-services__cta:focus, .flex-services__cta:focus-visible, .flex-services__cta:active { align-self: flex-start; padding: 12px 28px !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 4px !important; min-height: 44px !important; background: var(--color-accent) !important; color: var(--color-white) !important; border: 1px solid var(--color-accent) !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; } .flex-services .flex-services__cta:hover { background: var(--color-white) !important; color: var(--color-navy) !important; border-color: var(--color-white) !important; } /* Inline container override so cards can extend past the default padding while keeping inner content aligned to the 1344px header container. */ .flex-services__card .container { padding-left: 48px; padding-right: 48px; } /* ---------- LIGHT BACKGROUND VARIANT ---------- Section + cards on white. Cards with images keep the navy overlay so the image still tints (the overlay is a brand element, not a contrast helper). */ .flex-services--bg-light { background: var(--color-white); color: var(--color-navy); } .flex-services--bg-light .flex-services__heading { color: var(--type-heading-color); } .flex-services--bg-light .flex-services__intro { color: rgba(6, 1, 67, 0.72); } .flex-services--bg-light .flex-services__card { background: var(--color-white); color: var(--color-navy); border-top-color: rgba(6, 1, 67, 0.14); } .flex-services--bg-light .flex-services__card:last-child { border-bottom-color: rgba(6, 1, 67, 0.14); } .flex-services--bg-light .flex-services__num { color: var(--color-navy); } .flex-services--bg-light .flex-services__title { color: var(--type-item-color); } .flex-services--bg-light .flex-services__subtitle { color: rgba(6, 1, 67, 0.6); } .flex-services--bg-light .flex-services__desc { color: var(--type-body-color); } /* Cards WITH images on light bg — the image + navy overlay create a dark surface, so text inside that card needs to flip back to white. */ .flex-services--bg-light .flex-services__card--has-image { background: var(--color-navy); color: var(--color-white); } .flex-services--bg-light .flex-services__card--has-image .flex-services__num { color: var(--color-white); } .flex-services--bg-light .flex-services__card--has-image .flex-services__title { color: var(--type-item-color-dark); } .flex-services--bg-light .flex-services__card--has-image .flex-services__subtitle { color: rgba(255, 255, 255, 0.75); } .flex-services--bg-light .flex-services__card--has-image .flex-services__desc { color: var(--type-body-color-dark); } /* Responsive */ @media (max-width: 1024px) { .flex-services__card-row { grid-template-columns: 90px minmax(0, 1fr); row-gap: 20px; } .flex-services__left { grid-column: 1 / 2; grid-row: 1 / span 2; } .flex-services__middle { grid-column: 2 / 3; grid-row: 1 / 2; } .flex-services__right { grid-column: 2 / 3; grid-row: 2 / 3; } .flex-services__card { min-height: 380px; padding: 40px 0; } .flex-services__card .container { padding-left: 28px; padding-right: 28px; } } @media (max-width: 600px) { .flex-services__card { position: static; min-height: 0; padding: 32px 0; } .flex-services__card-row { grid-template-columns: 1fr; column-gap: 0; row-gap: 16px; } .flex-services__left { flex-direction: row; align-items: baseline; gap: 14px; } .flex-services__num { font-size: 20px; } .flex-services__subtitle { max-width: none; } /* One column, so the row placement the 1024 block sets, which still matches at this width, is reset with it. */ .flex-services__left, .flex-services__middle, .flex-services__right { grid-column: 1 / -1; grid-row: auto; } } /* ========================================================================= HORIZONTAL TIMELINE — IMAGE VARIANT (experimental) Scoped overrides for .flex-timeline--variant-image. Inherits all base .flex-timeline styles (viewport, head, arrows, scroll behaviour) and only overrides what's different: wider cards, bigger spacing, dates above the dot, accent-filled node, image atop card. ========================================================================= */ /* Subheading — one/two lead lines under the section heading. */ .flex-timeline--variant-image .flex-timeline__subheading { margin: 12px 0 0; max-width: 720px; color: var(--type-body-color-dark); } .flex-timeline--variant-image.flex-timeline--bg-light .flex-timeline__subheading { color: var(--type-body-color); } /* Wider cards + extra space between them on this variant. */ .flex-timeline--variant-image .flex-timeline__rail, .flex-timeline--variant-image .flex-timeline__cards, .flex-timeline--variant-image .flex-timeline__dates { --flex-tl-card-width: 340px; gap: 48px; } /* Dates row sits above the rail and shares the same card-width grid so each pill aligns precisely above its node. */ .flex-timeline--variant-image .flex-timeline__dates { display: flex; list-style: none; margin: 0 0 14px; padding: 0; min-width: max-content; } .flex-timeline--variant-image .flex-timeline__date-cell { flex: 0 0 var(--flex-tl-card-width); display: flex; justify-content: center; } .flex-timeline--variant-image .flex-timeline__date-pill { font-family: var(--font-display, "commuters-sans"), sans-serif; font-size: clamp(22px, 1.6vw + 8px, 32px); font-weight: 700; line-height: 1; letter-spacing: 0.01em; color: var(--color-white); text-transform: uppercase; } .flex-timeline--variant-image .flex-timeline__date-pill.is-featured { color: var(--color-accent); } /* Tighten the rail-wrap margin since the dates row already adds vertical air. */ .flex-timeline--variant-image .flex-timeline__rail-wrap { margin-top: 4px; margin-bottom: 36px; } /* Accent-filled dot, slightly larger so it carries more weight under the big date. No solid ring in the shadow: the rail line runs up to the dot's white border at every width instead of stopping in a background-coloured hole. */ .flex-timeline--variant-image .flex-timeline__node { width: 18px; height: 18px; background: var(--color-accent); border: 2px solid var(--color-white); box-shadow: 0 0 12px rgba(46, 42, 158, 0.55); } .flex-timeline--variant-image .flex-timeline__node.is-featured { background: var(--color-accent); border-color: var(--color-white); box-shadow: 0 0 0 2px var(--color-accent), 0 0 18px rgba(46, 42, 158, 0.85); } .flex-timeline--variant-image.flex-timeline--bg-dark .flex-timeline__date-pill.is-featured { color: var(--color-white); } .flex-timeline--variant-image.flex-timeline--bg-dark .flex-timeline__node.is-featured { background: var(--color-white); } /* Cards — keep base .flex-timeline__card styles (bg, border, padding) but tighten internal padding around the image and reset gap. */ .flex-timeline--variant-image .flex-timeline__card { padding: 0; gap: 0; overflow: hidden; } .flex-timeline--variant-image .flex-timeline__card-image { width: 100%; aspect-ratio: 16 / 9; background: rgba(255, 255, 255, 0.04); overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .flex-timeline--variant-image .flex-timeline__card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .flex-timeline--variant-image .flex-timeline__card:hover .flex-timeline__card-image img { transform: scale(1.04); } .flex-timeline--variant-image .flex-timeline__card-content { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; } .flex-timeline--variant-image .flex-timeline__card-title { margin: 0; } /* Light-bg adjustments for the variant. */ .flex-timeline--variant-image.flex-timeline--bg-light .flex-timeline__date-pill { color: var(--color-navy); } .flex-timeline--variant-image.flex-timeline--bg-light .flex-timeline__date-pill.is-featured { color: var(--color-accent); } .flex-timeline--variant-image.flex-timeline--bg-light .flex-timeline__node { background: var(--color-accent); border-color: var(--color-white); box-shadow: 0 0 10px rgba(46, 42, 158, 0.4); } .flex-timeline--variant-image.flex-timeline--bg-light .flex-timeline__node.is-featured { box-shadow: 0 0 0 2px var(--color-accent), 0 0 14px rgba(46, 42, 158, 0.7); } .flex-timeline--variant-image.flex-timeline--bg-light .flex-timeline__card-image { background: rgba(6, 1, 67, 0.04); border-bottom-color: rgba(6, 1, 67, 0.08); } /* Mobile — narrower cards + slightly tighter gap so 1.x cards still fit. */ @media (max-width: 720px) { .flex-timeline--variant-image .flex-timeline__rail, .flex-timeline--variant-image .flex-timeline__cards, .flex-timeline--variant-image .flex-timeline__dates { --flex-tl-card-width: 280px; gap: 28px; } .flex-timeline--variant-image .flex-timeline__card-content { padding: 18px 20px 22px; } } /* Testimonial role — theme gray token instead of hardcoded hex. */ .flex-testimonial-card__role, .flex-testimonial__role { color: var(--color-gray-500, #6b7280); } /* Neutralize flex-img defaults when applied to the hero background wrapper. The hero bg is position:absolute inset:0 and must fill the full section. The .flex-img defaults (aspect-ratio, border-radius, gray bg) fight inset:0 and end up shrinking the bg to a 16:9 box inside a taller section. */ .flex-hero__bg.flex-img, .flex-hero__bg[class*=flex-img--aspect-] { aspect-ratio: auto !important; border-radius: 0 !important; background: transparent !important; width: auto !important; } /* ========================================================================= SPLIT + ACCORDION — two-column block (text left, accordion right). Uses system typography: .section-heading for h2, .hp-eyebrow for eyebrow, body clamp for paragraphs. Native
for accessibility without JS. ========================================================================= */ .flex-split-acc { padding: 100px 0 110px; background: var(--color-white); color: var(--color-navy); } @media (max-width: 900px) { .flex-split-acc { padding: 72px 0; } } @media (max-width: 600px) { .flex-split-acc { padding: 56px 0; } } .flex-split-acc--bg-dark { background: var(--color-navy); color: var(--color-white); } .flex-split-acc--bg-dark .flex-split-acc__heading { color: var(--color-white); } .flex-split-acc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 72px; align-items: start; } @media (max-width: 900px) { .flex-split-acc__grid { grid-template-columns: 1fr; gap: 40px; } } /* LEFT column */ .flex-split-acc__left .hp-eyebrow { margin: 0 0 14px; } .flex-split-acc__heading { margin: 0 0 18px; } .flex-split-acc__subtitle { margin: 0 0 18px; font-family: var(--font-body); font-size: clamp(15px, 0.4vw + 12px, 18px); font-weight: 600; line-height: 1.4; color: var(--color-accent); letter-spacing: 0.02em; } .flex-split-acc--bg-dark .flex-split-acc__subtitle { color: rgba(255, 255, 255, 0.78); } .flex-split-acc__body { /* Site-wide body-copy clamp + weight */ font-size: var(--type-body-size); font-weight: 500; line-height: 1.7; color: rgba(6, 1, 67, 0.8); max-width: 520px; } .flex-split-acc__body p { margin: 0 0 14px; } .flex-split-acc__body p:last-child { margin-bottom: 0; } .flex-split-acc--bg-dark .flex-split-acc__body { color: rgba(255, 255, 255, 0.85); } /* RIGHT column — accordion list */ .flex-split-acc__list { list-style: none; margin: 0; padding: 0; } .flex-split-acc__item { border-top: 1px solid rgba(6, 1, 67, 0.14); } .flex-split-acc__item:last-child { border-bottom: 1px solid rgba(6, 1, 67, 0.14); } .flex-split-acc--bg-dark .flex-split-acc__item { border-top-color: rgba(255, 255, 255, 0.18); } .flex-split-acc--bg-dark .flex-split-acc__item:last-child { border-bottom-color: rgba(255, 255, 255, 0.18); } .flex-split-acc__details { padding: 0; } .flex-split-acc__summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-family: var(--font-display, Commuters Sans), sans-serif; font-size: var(--type-item-size); font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-navy); transition: color 0.15s ease; } .flex-split-acc__summary::-webkit-details-marker { display: none; } .flex-split-acc--bg-dark .flex-split-acc__summary { color: var(--color-white); } .flex-split-acc__summary:hover { color: var(--color-accent); } .flex-split-acc--bg-dark .flex-split-acc__summary:hover { color: rgba(255, 255, 255, 0.85); } /* Icon — plus sign that rotates to an x when open */ .flex-split-acc__icon { position: relative; display: inline-block; width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.25s ease; } .flex-split-acc__icon::before, .flex-split-acc__icon::after { content: ""; position: absolute; background: currentColor; top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .flex-split-acc__icon::after { transform: translateY(-50%) rotate(90deg); transition: transform 0.25s ease; } .flex-split-acc__details[open] .flex-split-acc__icon::after { transform: translateY(-50%) rotate(0deg); } .flex-split-acc__content { padding: 0 4px 22px; font-size: var(--type-body-size); font-weight: 500; line-height: 1.6; color: rgba(6, 1, 67, 0.78); } .flex-split-acc__content p { margin: 0 0 12px; } .flex-split-acc__content p:last-child { margin-bottom: 0; } .flex-split-acc--bg-dark .flex-split-acc__content { color: rgba(255, 255, 255, 0.82); } /* Item icon slot — 28px square, sits to the LEFT of the title. Auto-inverts on the dark variant for visibility. */ .flex-split-acc__item-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; margin-right: 14px; transition: transform 0.2s ease; } .flex-split-acc__item-icon-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } .flex-split-acc--bg-dark .flex-split-acc__item-icon-img { filter: brightness(0) invert(1); } /* Hover — subtle bg tint + accent title + icon nudge. The +/- and the icon both shift slightly right for a little motion cue. */ .flex-split-acc__details .flex-split-acc__summary { transition: background 0.18s ease, color 0.18s ease, padding 0.18s ease; border-radius: 4px; margin: 0 -8px; padding-left: 12px; padding-right: 12px; } .flex-split-acc--bg-light .flex-split-acc__summary:hover { background: rgba(6, 1, 67, 0.04); color: var(--color-accent); } .flex-split-acc--bg-dark .flex-split-acc__summary:hover { background: rgba(255, 255, 255, 0.05); color: var(--color-white); } .flex-split-acc__summary:hover .flex-split-acc__item-icon { transform: translateX(3px); } .flex-split-acc__summary:hover .flex-split-acc__icon { color: var(--color-accent); } .flex-split-acc--bg-dark .flex-split-acc__summary:hover .flex-split-acc__icon { color: var(--color-white); } /* Open state — keep the tint and shift so it reads as selected. */ .flex-split-acc__details[open] .flex-split-acc__summary { color: var(--color-accent); } .flex-split-acc--bg-dark .flex-split-acc__details[open] .flex-split-acc__summary { color: var(--color-white); } .flex-split-acc__details[open] .flex-split-acc__item-icon { transform: translateX(3px); } /* Accordion item arrow — fixed ↗ SVG on the left of every title. Uses currentColor so it adopts navy on light bg, white on dark bg, with no admin upload needed. Replaces the optional icon slot. */ .flex-split-acc__item-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; margin-right: 14px; color: var(--color-navy); transition: transform 0.2s ease, color 0.18s ease; } .flex-split-acc--bg-dark .flex-split-acc__item-arrow { color: var(--color-white); } .flex-split-acc__summary:hover .flex-split-acc__item-arrow { transform: translate(3px, -3px); color: var(--color-accent); } .flex-split-acc--bg-dark .flex-split-acc__summary:hover .flex-split-acc__item-arrow { color: var(--color-white); } .flex-split-acc__details[open] .flex-split-acc__item-arrow { transform: translate(3px, -3px); color: var(--color-accent); } .flex-split-acc--bg-dark .flex-split-acc__details[open] .flex-split-acc__item-arrow { color: var(--color-white); } /* Use the site's shared arrow.svg via CSS mask (same pattern as the markets slider buttons + flex-timeline arrows). Rotated +45° from the svg's natural up-right orientation so it points RIGHT, toward the item title. */ html body .flex-split-acc .flex-split-acc__item-arrow { display: inline-block !important; width: 28px; height: 28px; flex-shrink: 0; margin-right: 16px; background-color: var(--color-navy); -webkit-mask: url('icons/arrow.svg') no-repeat center / contain; mask: url('icons/arrow.svg') no-repeat center / contain; transform: rotate(45deg); transition: background-color 0.18s ease, transform 0.22s ease; } html body .flex-split-acc--bg-dark .flex-split-acc__item-arrow { background-color: var(--color-white); } html body .flex-split-acc__summary:hover .flex-split-acc__item-arrow { transform: rotate(45deg) scale(1.08); background-color: var(--color-accent); } html body .flex-split-acc--bg-dark .flex-split-acc__summary:hover .flex-split-acc__item-arrow { background-color: var(--color-white); } html body .flex-split-acc__details[open] .flex-split-acc__item-arrow { transform: rotate(135deg); background-color: var(--color-accent); } html body .flex-split-acc--bg-dark .flex-split-acc__details[open] .flex-split-acc__item-arrow { background-color: var(--color-white); } /* Arrow v2 — smaller (22px) and uses the slide nudge instead of scale on hover. Same translate(3px, -3px) up-right motion as the prior ↗ version composed with the 45° rotation that points the arrow at the title. */ html body .flex-split-acc .flex-split-acc__item-arrow { width: 22px !important; height: 22px !important; margin-right: 14px !important; } html body .flex-split-acc__summary:hover .flex-split-acc__item-arrow { transform: translate(3px, -3px) rotate(45deg) !important; background-color: var(--color-accent) !important; } html body .flex-split-acc--bg-dark .flex-split-acc__summary:hover .flex-split-acc__item-arrow { background-color: var(--color-white) !important; } html body .flex-split-acc__details[open] .flex-split-acc__item-arrow { transform: translate(3px, -3px) rotate(45deg) !important; background-color: var(--color-accent) !important; } html body .flex-split-acc--bg-dark .flex-split-acc__details[open] .flex-split-acc__item-arrow { background-color: var(--color-white) !important; } /* Arrow v3 tweaks — horizontal-only nudge + tighter margin + open-state keeps arrow at rest (no translate) so every row reads identically. */ html body .flex-split-acc .flex-split-acc__item-arrow { margin-right: 10px !important; } html body .flex-split-acc__summary:hover .flex-split-acc__item-arrow { transform: translate(4px, 0) rotate(45deg) !important; } html body .flex-split-acc__details[open] .flex-split-acc__item-arrow { transform: rotate(45deg) !important; background-color: var(--color-accent) !important; } html body .flex-split-acc--bg-dark .flex-split-acc__details[open] .flex-split-acc__item-arrow { background-color: var(--color-white) !important; } /* Split-boxes variant — optional per-box background image + navy overlay. Text flips to white when an image is set. Same overlay pattern as the hero block and other flex images. */ .flex-services__box { position: relative; overflow: hidden; } .flex-services__box--has-bg { color: var(--color-white); border-color: transparent; background: var(--color-navy); } .flex-services__box-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .flex-services__box-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .flex-services__box-bg::after { content: ""; position: absolute; inset: 0; background: rgba(6, 1, 67, var(--box-overlay-alpha, 0.6)); } /* Content above the bg layer. */ .flex-services__box--has-bg > .flex-services__box-icon, .flex-services__box--has-bg > .flex-services__box-title, .flex-services__box--has-bg > .flex-services__box-desc { position: relative; z-index: 1; } .flex-services__box--has-bg .flex-services__box-title { color: var(--type-item-color-dark); } .flex-services__box--has-bg .flex-services__box-desc { color: rgba(255, 255, 255, 0.88); } .flex-services__box--has-bg .flex-services__box-icon-img { filter: brightness(0) invert(1); } /* Hover on bg-image box — keep accent fill + scale the image subtly. */ .flex-services__box--linked:hover .flex-services__box-bg img, .flex-services__box--linked:focus-within .flex-services__box-bg img { transform: scale(1.04); transition: transform 0.45s ease; } .flex-services__box-bg img { transition: transform 0.45s ease; } /* Linked box: the title link covers the whole box and the box shows keyboard focus. */ .flex-services__box--linked > .flex-services__box-title { position: static; z-index: 2; } .flex-services__box--linked .flex-services__box-link { color: inherit; text-decoration: none; } .flex-services__box--linked .flex-services__box-link::after { content: ""; position: absolute; inset: 0; z-index: 2; } .flex-services__box--linked .flex-services__box-link:focus { outline: none; } .flex-services__box--linked:focus-within { outline: 2px solid var(--color-accent); outline-offset: 3px; } .flex-split--bg-dark .flex-services__box--linked:focus-within { outline-color: var(--color-white); } /* ========================================================================= SPLIT BODY + IMAGE CARDS — image-first tile grid beneath a split-body header. Each card is a full image with a navy overlay + title/desc on top; optional click-through link wraps the whole card as an . Hover zoom is opt-in. ========================================================================= */ .flex-split-ic__grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .flex-split-ic__grid--count-1 { grid-template-columns: 1fr; max-width: 560px; } .flex-split-ic__grid--count-2 { grid-template-columns: repeat(2, 1fr); } .flex-split-ic__grid--count-3 { grid-template-columns: repeat(3, 1fr); } .flex-split-ic__card { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; color: var(--color-white); text-decoration: none !important; transition: transform 0.25s ease, box-shadow 0.25s ease; } a.flex-split-ic__card:hover, a.flex-split-ic__card:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(6, 1, 67, 0.18); } .flex-split-ic__card-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .flex-split-ic__card-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .flex-split-ic__card--align-top .flex-split-ic__card-bg img { object-position: center top; } .flex-split-ic__card--align-center .flex-split-ic__card-bg img { object-position: center center; } .flex-split-ic__card--align-bottom .flex-split-ic__card-bg img { object-position: center bottom; } .flex-split-ic__card-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(6, 1, 67, var(--ic-overlay-alpha, 0.55)) 0%, rgba(6, 1, 67, calc(var(--ic-overlay-alpha, 0.55) * 0.55)) 55%, rgba(6, 1, 67, calc(var(--ic-overlay-alpha, 0.55) * 0.2)) 100% ); } .flex-split-ic__card-content { position: relative; z-index: 1; padding: 22px 24px 24px; } .flex-split-ic__card-title { font-family: var(--font-display, Commuters Sans), sans-serif; font-size: clamp(18px, 0.8vw + 14px, 22px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; color: var(--color-white); margin: 0 0 6px; } .flex-split-ic__card-desc { font-size: clamp(14px, 0.25vw + 12.5px, 16px); font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.88); margin: 0; } /* Hover zoom — opt-in via grid modifier class. */ .flex-split-ic__grid--zoom a.flex-split-ic__card:hover .flex-split-ic__card-bg img, .flex-split-ic__grid--zoom a.flex-split-ic__card:focus-visible .flex-split-ic__card-bg img { transform: scale(1.04); } /* Responsive */ @media (max-width: 1024px) { .flex-split-ic__grid, .flex-split-ic__grid--count-3, .flex-split-ic__grid--count-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .flex-split-ic__grid, .flex-split-ic__grid--count-2, .flex-split-ic__grid--count-3, .flex-split-ic__grid--count-4 { grid-template-columns: 1fr; } .flex-split-ic__card { aspect-ratio: 4 / 3; } } /* v2 overlay — stronger navy gradient from the bottom so text always reads. Replaces the earlier too-subtle calc() variant. */ html body .flex-split-ic__card-bg::after { background: linear-gradient( to top, rgba(6, 1, 67, var(--ic-overlay-alpha, 0.92)) 0%, rgba(6, 1, 67, calc(var(--ic-overlay-alpha, 0.92) * 0.5)) 45%, rgba(6, 1, 67, 0) 80% ) !important; } /* Hover reveal — description is hidden by default; on hover or keyboard focus of a linked card it expands, pushing the title upward inside the card. */ .flex-split-ic__card-desc { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0 !important; transition: max-height 0.35s ease, opacity 0.3s ease 0.05s, margin-top 0.35s ease; } a.flex-split-ic__card:hover .flex-split-ic__card-desc, a.flex-split-ic__card:focus-visible .flex-split-ic__card-desc { max-height: 260px; opacity: 1; margin-top: 8px !important; } /* Unlinked card: description shown at rest. */ article.flex-split-ic__card .flex-split-ic__card-desc { max-height: 260px; opacity: 1; margin-top: 8px !important; } /* Also expand the title (via content-block height growth) smoothly. */ .flex-split-ic__card-title { transition: transform 0.35s ease; } /* On open, rotate arrow to point DOWN (135° from the svg's natural up-right). */ html body .flex-split-acc__details[open] .flex-split-acc__item-arrow { transform: rotate(135deg) !important; } html body .flex-split-acc__details[open] .flex-split-acc__summary:hover .flex-split-acc__item-arrow { transform: translate(4px, 0) rotate(135deg) !important; } /* ============================================================ Logo marquee — fix overlap glitch at loop point. Old layout: flat row of 2N items in one flex track with gap:16px on the track. translateX(-50%) was off by half a gap, causing a tiny snap-back each cycle (visible overlap). New layout: each copy wrapped in a .flex-logos__group with its own internal gap + trailing padding-right equal to the gap. The track itself has gap:0 so -50% lands exactly on a group boundary. Mathematically seamless. ============================================================ */ .flex-logos--marquee .flex-logos__track { gap: 0 !important; } .flex-logos--marquee .flex-logos__group { display: flex; align-items: center; gap: 16px; padding-right: 16px; flex-shrink: 0; } /* ============================================================ Testimonial — top photo modifier. Renders the existing author_photo above the quote text. Bigger + more prominent than the small avatar that previously sat in the cite footer (now removed). Single + cards modes. ============================================================ */ .flex-testimonial-card__photo--top { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 0 16px; box-shadow: 0 4px 14px rgba(6, 1, 67, 0.10); } .flex-testimonial__photo--top { display: block; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; box-shadow: 0 6px 18px rgba(6, 1, 67, 0.12); } /* ========================================================================== FLEX FORM SELECTS — option-list readability fix. The selects use white text (for the dark form background), but the native