/* ============================================================================ CLAUDE UPDATES — module polish (authored by Claude / Pepper Marketing) ---------------------------------------------------------------------------- Consolidates fixes that were previously inlined in module templates. Loaded from _base.twig via the theme's css include chunk. Companion JS: /assets/js/claude-updates.js Change log: CELONA-THEME-CHANGELOG.md in the pepper repo. Sections: [1] Icon sizing (iconImageSize field on card/feature) [2] Carousel arrows (bare chevron, contrast on dark, size control) [3] Carousel blockquote spacing (overlap fix) [4] Carousel slides-per-view (slideWidth field, responsive step-down) ============================================================================ */ /* [1] Icon sizing — classes emitted by cards.twig / featuresList.twig from the iconImageSize dropdown (small default / medium / large). */ .icon-wrap img.icon-sz-sm { max-width: 40px; max-height: 40px; } .icon-wrap img.icon-sz-md { max-width: 56px; max-height: 56px; } .icon-wrap img.icon-sz-lg { max-width: 80px; max-height: 80px; } /* Icon + Text (iconText) media-library icons: the template's img-fluid has no size cap */ .wrap-icon img { width: 40px; height: 40px; object-fit: contain; } .wrap-icon { padding: 0 !important; } /* [2] Carousel arrows — bare teal chevron, no circle/shadow. Fancyapps consumes the --f-arrow-* variables. */ .section-carousel .f-carousel { --f-arrow-bg: transparent; --f-arrow-hover-bg: transparent; --f-arrow-active-bg: transparent; --f-arrow-shadow: none; --f-arrow-border-radius: 0; --f-arrow-color: #00304A; /* teal → navy 2026-07-22 (client) */ --f-arrow-svg-stroke-width: 3; --f-arrow-svg-width: 24px; --f-arrow-svg-height: 24px; } .section-carousel .f-carousel__nav .f-button { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } .section-carousel .f-carousel__nav .f-button svg { color: #00304A !important; stroke: #00304A !important; } /* White arrows on dark-background carousels for contrast */ .section-carousel.bg-deep-blue .f-carousel, .section-carousel.bg-dark-blue .f-carousel, .section-carousel.bg-blue .f-carousel, .section-carousel.bg-teal .f-carousel, .section-carousel.bg-charcoal .f-carousel, .section-carousel.bg-rich-charcoal .f-carousel, .section-carousel.bg-deep-cobalt .f-carousel { --f-arrow-color: #ffffff !important; } .section-carousel.bg-deep-blue .f-carousel__nav .f-button svg, .section-carousel.bg-dark-blue .f-carousel__nav .f-button svg, .section-carousel.bg-blue .f-carousel__nav .f-button svg, .section-carousel.bg-teal .f-carousel__nav .f-button svg, .section-carousel.bg-charcoal .f-carousel__nav .f-button svg, .section-carousel.bg-rich-charcoal .f-carousel__nav .f-button svg, .section-carousel.bg-deep-cobalt .f-carousel__nav .f-button svg { color: #ffffff !important; stroke: #ffffff !important; fill: #ffffff !important; } /* Size control: "Arrow size" dropdown (arrowSize field) → .arrows-lg on the section */ .section-carousel.arrows-lg .f-carousel { --f-arrow-svg-width: 38px; --f-arrow-svg-height: 38px; --f-arrow-width: 54px; --f-arrow-height: 54px; } /* [3] Carousel slide rhythm & blockquotes. - Consistent vertical gap between a slide's stacked columns/rows. - Blockquote as an indented pull-quote: opening mark sits BESIDE the quote, closing mark removed, author paragraph tucks in close underneath. NOTE for dev: root cause is the global blockquote SCSS (line-height:1em + 80px block glyphs) — worth fixing site-wide. */ .section-carousel .card .wrapper { row-gap: 0.75rem; } /* Slides size to their own content — a tall sibling (e.g. a video tile) must not stretch light tiles into mostly-empty boxes (client, CW proof). */ .section-carousel .f-carousel__slide .card.h-100 { height: auto !important; } /* Titled media tiles (use-case proof anatomy) get a height FLOOR so one-line tiles hold their own beside richer siblings — tall tiles still grow. Caption-only gallery tiles and quote/testimonial slides are unaffected. */ @media (min-width: 768px) { .section-carousel .f-carousel__slide .card:has(h3):has(figure.image), .section-carousel .f-carousel__slide .card:has(h3):has(video) { min-height: 620px; } } .section-carousel .f-carousel__slide { display: flex; align-items: flex-start; } .section-carousel .f-carousel__slide > * { width: 100%; } .section-carousel .card h3 { margin-bottom: 0.5rem; } /* Slide sub-headline (h4): theme sizes it like the h3 title — step it down so the hierarchy reads (title → takeaway → quote), with air between the three. */ .section-carousel .card h4 { font-size: 1.2rem; line-height: 1.45; margin: 1.1rem 0 0; } /* 1.25->1.2 [59]: same size as body, weight carries the takeaway level */ .section-carousel .card h4 + blockquote { margin-top: 1.25rem; } .section-carousel blockquote { position: relative; padding-left: 2.4rem; line-height: 1.5; margin: 0.5rem 0 0; } .section-carousel blockquote p { line-height: 1.55; margin-bottom: 0; } .section-carousel blockquote::before { content: "“"; position: absolute; left: 0; top: -0.08em; font-size: 52px; line-height: 1; margin: 0; } .section-carousel blockquote::after { content: none; } .section-carousel blockquote p:last-of-type::after { content: "”"; font-size: 2.6em; line-height: 0; vertical-align: -0.42em; margin-left: 0.35em; } .section-carousel blockquote + p { margin-top: 0.75rem; margin-bottom: 0; padding-left: 2.4rem; } /* [4] Slides-per-view — classes emitted by carousel.twig from the slideWidth field, with a responsive step-down (1-up on phones, 2-up on tablets). */ .f-carousel__slide.slide-w-third, .f-carousel__slide.slide-w-half { flex: 0 0 100%; max-width: 100%; } @media (min-width: 768px) { .f-carousel__slide.slide-w-third, .f-carousel__slide.slide-w-half { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 992px) { .f-carousel__slide.slide-w-third { flex: 0 0 33.3333%; max-width: 33.3333%; } } /* [5] HubSpot forms — legacy v2 embeds ship unstyled and expect the host site to style the .hs-* hooks (celona.io does this in its own CSS). On-brand skin for any HubSpot form embedded via a Code Block, light or dark band. */ .hs-form { text-align: left; max-width: 680px; margin-left: auto; margin-right: auto; } .hs-form fieldset { max-width: 100% !important; } .hs-form .hs-form-field { margin-bottom: 1.1rem; } .hs-form label { display: block; font-weight: 500; font-size: 0.85rem; margin-bottom: 0.35rem; text-align: left; } .hs-form .hs-input { width: 100% !important; padding: 0.65rem 0.9rem; font-size: 1rem; font-family: inherit; border: 1px solid rgba(0, 48, 74, 0.25); border-radius: 8px; background: #ffffff; color: #00304A; } .hs-form fieldset.form-columns-2 .hs-input { width: 95% !important; } .hs-form textarea.hs-input { min-height: 110px; } .hs-form .hs-input:focus { outline: 2px solid #5aa7a0; outline-offset: 1px; border-color: #5aa7a0; } .hs-form .inputs-list { list-style: none; margin: 0; padding: 0; } .hs-form .inputs-list li { margin: 0.3rem 0; } .hs-form input[type="checkbox"].hs-input, .hs-form input[type="radio"].hs-input { width: auto !important; } .hs-form .hs-form-booleancheckbox-display, .hs-form .hs-form-checkbox-display, .hs-form .hs-form-radio-display { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 400; } .hs-form .hs-form-booleancheckbox-display input, .hs-form .hs-form-checkbox-display input, .hs-form .hs-form-radio-display input { width: auto !important; margin-top: 0.3em; flex: 0 0 auto; } .hs-form .hs-error-msgs { list-style: none; padding: 0; margin: 0.3rem 0 0; font-size: 0.8rem; color: #e58f6f; } .hs-form .hs-richtext { font-size: 0.8rem; opacity: 0.85; margin: 0.6rem 0; text-align: left; } .hs-form .hs-richtext a { color: #5aa7a0; } /* reCAPTCHA: scaled down + tucked right so it doesn't dominate the submit */ .hs-form .hs-recaptcha { float: right; margin: 0 0 0.5rem 1rem; transform: scale(0.72); transform-origin: top right; } .hs-form .hs-submit { margin-top: 0.9rem; } /* Submit: hollow teal outline pill, sized like the theme's .btn (0.525em/1.25em, 1rem/600) */ .hs-form .hs-button { background: transparent; color: #5aa7a0; border: 1px solid #5aa7a0; border-radius: 999px; padding: 0.525em 1.25em; font-weight: 600; font-size: 1rem; line-height: 1.5; font-family: inherit; cursor: pointer; transition: background 0.18s, color 0.18s; } .hs-form .hs-button:hover { background: #5aa7a0; color: #ffffff; } /* Dark bands: light labels/consent, inputs stay white for usability */ .bg-deep-blue .hs-form label, .bg-dark-blue .hs-form label, .bg-blue .hs-form label, .bg-deep-cobalt .hs-form label, .bg-deep-blue .hs-form legend, .bg-dark-blue .hs-form legend, .bg-blue .hs-form legend, .bg-deep-cobalt .hs-form legend { color: #eaf0ee; } .bg-deep-blue .hs-form .hs-richtext, .bg-dark-blue .hs-form .hs-richtext, .bg-blue .hs-form .hs-richtext, .bg-deep-cobalt .hs-form .hs-richtext { color: #c9d6da; } .bg-deep-blue .hs-form .hs-input, .bg-dark-blue .hs-form .hs-input, .bg-blue .hs-form .hs-input, .bg-deep-cobalt .hs-form .hs-input { border-color: rgba(255, 255, 255, 0.25); } /* [6] Certified-device maker names — text chips replacing the logo carousel (Manufacturing + Oil & Gas "Certified Devices" maker row). */ .maker-chips { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .maker-chips span { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #5aa7a0; border-radius: 16px; padding: 1rem /* [59] 1.05->1 */ 2rem; min-width: 150px; font-weight: 600; font-size: 1rem /* [59] 1.05->1 */; color: #414041; letter-spacing: 0.01em; } /* [7] Carousel slide images — uniform crop (3:2, cover) so any uploaded image renders at consistent size and captions align across slides (In the Field). */ .section-carousel .f-carousel__slide figure.image { display: block; width: 100%; margin: 0 0 0.75rem; position: relative; border-radius: 12px; overflow: hidden; } /* uniform navy grade over every slide image (some assets had it baked in, raw uploads didn't) */ .section-carousel .f-carousel__slide figure.image::after { content: ""; position: absolute; inset: 0; background: rgba(0, 48, 74, 0.28); mix-blend-mode: multiply; pointer-events: none; } .section-carousel .f-carousel__slide figure.image img, .section-carousel .f-carousel__slide p > img { /* FOOLPROOF: !important beats the inline aspect-ratio/width/height CKEditor writes onto inserted images (that's what let raw portrait uploads render full-height). Default = 16:9 (client call: shorter default); the "Slide image height" dropdown customises from there. */ width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover; border-radius: 12px; /* matches the figure clip; Safari doesn't reliably clip replaced content via overflow alone */ } /* Slide image height variants ("Slide image height" dropdown on the carousel) */ .section-carousel.img-scale-short .f-carousel__slide figure.image img { aspect-ratio: 16 / 9 !important; } /* legacy = default */ .section-carousel.img-scale-ratio32 .f-carousel__slide figure.image img { aspect-ratio: 3 / 2 !important; } .section-carousel.img-scale-tall .f-carousel__slide figure.image img { aspect-ratio: 4 / 3 !important; } .section-carousel.img-scale-square .f-carousel__slide figure.image img { aspect-ratio: 1 / 1 !important; } /* [8] Banner height control ("Banner height" dropdown on pages) — theme default is a fixed padding:130px 0 on .title-section with no editor control. */ .title-section.banner-lean { padding: 64px 0 44px !important; } .title-section.banner-tall { padding: 220px 0 !important; } /* [9] Cards module: "Lean card images" lightswitch (leanCardImages field) — photo cards normally render a 4:3 image block (.pcardphoto .ph aspect-ratio), which makes image cards deep. Lean = short 21:9 banner crop instead. Tablet-up only: on phones the card goes horizontal (image is a narrow side column) where 21:9 would be a sliver — theme 4:3 stays. */ @media (min-width: 768px) { .section-cards.cards-img-lean .pcardphoto .ph, .section-cards.cards-img-lean .pcardphoto .ph-wrapper { aspect-ratio: 21 / 9; } } /* [11] Card photos — SAME navy grade as carousel slide images ([7]) so photos read consistently across modules/pages. Replaces the theme's baked-in sepia/hard-light duotone on .pcardphoto (which looked different from the carousel treatment). */ .pcardphoto .ph::after { content: ""; position: absolute; inset: 0; background: rgba(0, 48, 74, 0.28); mix-blend-mode: multiply; pointer-events: none; z-index: 2; /* above .ph-wrapper's z-index:1 */ } .pcardphoto .ph img { mix-blend-mode: normal; filter: none; } .pcardphoto .ph-wrapper { mix-blend-mode: normal; background: transparent; } /* [15] Callout bubble — supporting stats/context in rich text (client: the McKinsey port-automation stat "should look like a callout, bubble"). Editors: apply by giving a paragraph the class "callout". */ p.callout { background: #ffffff; border-radius: 14px; padding: 20px 26px; margin-top: 1.5rem; box-shadow: 0 10px 28px -22px rgba(0, 48, 74, 0.35); color: #00304A; /* bubble bg is always white — keep ink text even on dark bands */ } /* [21] Stat box that pops (client, CW requirement cards): teal chip holding the supporting stat — editors apply class "stat-pop" to a paragraph. */ /* Requirement rows (CW use-case requirements): white icon lives INSIDE the teal stat chip (one unit — a floating icon read as belonging to the wrong row); generous separation between wrapped column pairs. */ p.stat-pop.stat-pop-icon { display: inline-flex; align-items: center; gap: 14px; } p.stat-pop.stat-pop-icon img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; } p.req-icon { margin: 0; } p.req-icon img { width: 52px; height: 52px; object-fit: contain; } /* Requirement row-cards: each row is its own mc with a White block — style the block like the site's cards (border + radius + slim padding) so the icon, copy, and stat chip visibly belong to one unit. */ #use-case-requirements .row:has(> [class~="col-lg-1"]), [id^="req-row-"] .row:has(> [class~="col-lg-1"]) { background: #ffffff; border: 1px solid #c3cbd5; border-radius: 16px; padding: 22px 26px; margin: 0 clamp(25px, 4vw, 50px) 18px; /* the theme's own .block-x content padding — aligns the cards to the text well at EVERY viewport, not just 1440 */ align-items: center; } p.stat-pop { background: #5aa7a0; color: #ffffff; border-radius: 12px; padding: 14px 18px; font-weight: 600; display: inline-block; margin-top: 0.75rem; margin-bottom: 0; line-height: 1.4; } /* [19] Hollow (outline) buttons — fill with the button colour on hover (client: "See Certified Devices" on every page, plus all other hollow dark-blue buttons: TCO calculator, replace-me CTAs, etc.). */ .btn-outline-dark-blue:hover, .btn-outline-dark-blue:focus-visible { background-color: #00304A !important; border-color: #00304A !important; color: #ffffff !important; } /* (btn-filled / btn-filled-teal classes RETIRED 2026-07-17 — all rich-text buttons are now native Buttons CK entries using the theme's own btn-dark-blue / btn-teal / btn-outline-* classes.) */ /* [18] Text → boxes rhythm + alignment (client: on every industry page, cut the gap between intro text and the boxed row below to ~1/3, and align the boxes to the text well). - Gap: the intro multiColumn's own bottom padding (pb-md-7 = 104px / pb-md-6 = 80px) is what separates it from a title-less cards/accordion section that follows — pull the follower up so ~30-35% remains. - Width: card rows start 50px left of the text well (the mc wraps copy in a padded block-x the cards row doesn't have) — inset the row to match. Sections with their own .section-title are new topics, not continuations — left untouched via :has(). md+ only; phones keep stacked spacing. */ @media (min-width: 768px) { section[class*="section-multiColumn"].pb-md-7 + section.section-cards:not(:has(.section-title)), section[class*="section-multiColumn"].pb-md-7 + section.section-featuresList:not(:has(.section-title)) { margin-top: -68px; } /* pb-md-6 pairs: only when the follower carries its own pt-md-6 (both sides contribute) — followers already at pt-md-0 (O&G TCO) would overlap. */ section[class*="section-multiColumn"].pb-md-6 + section.section-cards.pt-md-6:not(:has(.section-title)), section[class*="section-multiColumn"].pb-md-6 + section.section-featuresList.pt-md-6:not(:has(.section-title)) { margin-top: -52px; } section[class*="section-multiColumn"].pb-md-5 + section.section-cards:not(:has(.section-title)), section[class*="section-multiColumn"].pb-md-5 + section.section-featuresList:not(:has(.section-title)) { margin-top: -16px; } section.section-cards .row:has(> [class*="col-"] > .card) { /* text well = theme .block-x padding (clamp) minus the 9px the card row already gains from its own gutters — responsive, not 1440-hardcoded */ margin-left: calc(clamp(25px, 4vw, 50px) - 9px); margin-right: calc(clamp(25px, 4vw, 50px) - 9px); } /* EXCEPTION to the inset below: cards sections whose outer column is col-xl-10 already sit AT the text well — the inset would double-dip (client: quote boxes same width as content above). Restore gutters. */ section.section-cards [class~="col-xl-10"] .row:has(> [class*="col-"] > .card) { margin-left: -18px; margin-right: -18px; } /* [121] 2026-08-07 ...and the intro TEXT above those cards has to come with them. [18]'s exception pulls the card row out to the text well on col-xl-10 sections, but the CK container above it keeps the theme's 50px .block-x padding - so the intro paragraph sat 59px right of its own cards (measured on /agv-amr "Why it matters": text 184, cards 125). Zero the block-x inset in exactly the case where the cards were already un-inset. */ section.section-cards [class~="col-xl-10"] .block-x { padding-left: 0; padding-right: 0; /* ...and the last 9px: the card row carries margin-left:-18px from [18]'s exception while this wrapper keeps the row's 9px gutter. Measured 134 vs 125. */ margin-left: -9px; margin-right: -9px; } /* Maker-chip rows open 50px wider than the card row above them — align both to the text well (client: chips same width as the boxes). */ .maker-chips { margin-left: clamp(25px, 4vw, 50px); margin-right: clamp(25px, 4vw, 50px); } } /* Devices-section CTA button (sectionID devices-cta on the 6 button mcs): the gap above (chips band bottom) outweighed the gap below — pull up so the button sits visually centred between chips and band end. */ #devices-cta { margin-top: -16px; } /* featuresList v3 (with claude-updates.js): the JS fixes the panel column at the tallest tab's height (no bounce navigating tabs); these rules stretch the visible bordered panel to FILL that height so shorter tabs show a taller box instead of dead band-space below the border. */ @media (min-width: 768px) { .section-featuresList .col-md-6.px-md-0 .nav { display: flex; flex-direction: column; height: 100%; } .section-featuresList .col-md-6.px-md-0 .accordion-item:has(.accordion-collapse.show) { flex: 1; display: flex; flex-direction: column; } .section-featuresList .col-md-6.px-md-0 .accordion-collapse.show { flex: 1; display: flex !important; flex-direction: column; } .section-featuresList .col-md-6.px-md-0 .accordion-collapse.show .accordion-body { flex: 1; } } /* Banner side-images (page image field + bannerImageHalf): a tall/square graphic at half-container width blows the banner out vertically — cap it (client: Frequency hub made the banner "larger than normal"). */ .title-section .col-lg-5 img.img-fluid { max-height: 400px; width: auto; max-width: 100%; display: block; margin-inline: auto; } /* [17] Use-case tabs rhythm — .tab-content.mt-6 put 80px between the tab strip and the panel (client: reduce). The strip-to-intro gap is handled by DATA, not CSS: every intro mc / tabsSection pair is sectionSpacing none/none (2026-07-16 normalisation) — a fixed negative margin here overlapped pages whose intro carried no padding, so don't reintroduce one. */ .section-tabsSection .tab-content { margin-top: 28px !important; } /* Default breathing room above the strip: with none/none data the natural gap is ~1px. PADDING not margin — a margin is transparent and lets the white page background show as a strip between two same-coloured bands; padding stays band-coloured. -9px margin = the theme's .new-section seam overlap. */ section.section-tabsSection { margin-top: -9px !important; padding-top: 41px !important; } /* Panel headings (bare CK h2s) rendered at 56px — the chips above already carry the use-case name, so the repeat only needs to anchor the panel. */ .section-tabsSection .tab-content h2 { font-size: 1.75rem !important; line-height: 1.25 !important; margin-bottom: 0.75rem; } /* Six of the seven intros wrap their copy in a (band-coloured, invisible) block whose own 50px+50px bottom paddings re-inflate the gap to ~140px — zero just the bottom edge when a tabs section follows. */ section[class*="section-multiColumn"]:has(+ section.section-tabsSection) .block-x { padding-bottom: 0 !important; margin-bottom: 0 !important; } section[class*="section-multiColumn"]:has(+ section.section-tabsSection) > .container-xxl.block, section[class*="section-multiColumn"]:has(+ section.section-tabsSection) > .container.block { padding-bottom: 0 !important; } /* [16] Cards module: "5 per row" grid option (cardGridSize = 5) — used for the Smart Ports certified-device row (5 form factors on one line). */ .col-cards-5 { position: relative; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } @media (min-width: 768px) { .col-cards-5 { flex: 0 0 33.3333%; max-width: 33.3333%; } } @media (min-width: 1200px) { .col-cards-5 { flex: 0 0 20%; max-width: 20%; } } /* [14] Section-header rhythm — compress the eyebrow zone (client: the "/ EYEBROW" header block ate ~290px before the heading; bottoms sat at ~64px). Was: 80px container pad + 60px title-row margin + ~50px inflated line-box (the small eyebrow text sits in a display-4-sized row). Now ≈ half. */ section[class*="section-"] > .container-xxl.pt-6, section[class*="section-"] > .container.pt-6 { padding-top: 40px !important; } .section-title { margin-bottom: 44px; } .section-title .display-4 { line-height: 1.15; } /* [13] Pull-quote treatment for blockquotes in multiColumn rich text (same look as the carousel fix in [3]; the theme's global blockquote SCSS — line-height:1em + 80px marks — remains the root cause site-wide). Used for the customer problem-statement quotes on Healthcare/Higher Ed. */ .section-multiColumn blockquote { position: relative; padding-left: 2.4rem; line-height: 1.5; margin: 2rem 0 0; } .section-multiColumn blockquote p { line-height: 1.55; margin-bottom: 0; font-size: 1.15rem; } .section-multiColumn blockquote::before { content: "“"; position: absolute; left: 0; top: -0.08em; font-size: 52px; line-height: 1; margin: 0; } .section-multiColumn blockquote::after { content: none; } .section-multiColumn blockquote p:last-of-type::after { content: "”"; font-size: 2.6em; line-height: 0; vertical-align: -0.42em; margin-left: 0.35em; } .section-multiColumn blockquote + p { margin-top: 0.75rem; margin-bottom: 0; padding-left: 2.4rem; } /* [12] Rich-text image sections — "Rounded corners" lightswitch (roundedImage field on the Image Single / Image Gallery CK sections). Same 12px radius as the carousel slide-image treatment ([7]). */ .img-rounded img, .img-rounded .gallery-image { border-radius: 12px; overflow: hidden; } /* [10] Card highlight — teal 3px outline via the "Highlight card" lightswitch (field 163, highlightCard) on any card; cards.twig emits .card-highlight. Front-end-editable per card in the CP — replaces the earlier hardcoded Section-ID hooks (the-shift / dc-physical-ai / highlight-last-card, retired 2026-07-17; those ids may remain on blocks as anchors but carry no style). In use: The Shift Orion answer 19731 · DC Meet Celona Orion 22659 · HE solution 21729 · HC solution 21911. Theme card border is 1.5px light-charcoal → 3px teal. */ .card.card-highlight { border-width: 3px; border-style: solid; /* !important needed: the block-level .border-light-charcoal class sets border-color with !important and was overriding the teal */ border-color: #00304A !important; } .card.card-highlight .card-top { border-color: #00304A !important; /* .card-top::after divider inherits this */ } /* Image slides (e.g. In the Field): slim the card frame so photos render LARGE. Scoped via :has(figure.image) — text slides (Proof) keep the roomy padding. */ .section-carousel .f-carousel__slide .wrapper:has(figure.image):not(:has(h3)) { padding: 14px; } .section-carousel .f-carousel__slide .wrapper:has(figure.image):not(:has(h3)) .row { margin-left: 0; margin-right: 0; } .section-carousel .f-carousel__slide .wrapper:has(figure.image):not(:has(h3)) > [class*="col"], .section-carousel .f-carousel__slide .wrapper:has(figure.image):not(:has(h3)) .row > [class*="col"] { padding-left: 0; padding-right: 0; } /* Use-case proof tiles (image + h3 title + body) keep the roomy card padding — the slim treatment above is only for caption-only gallery slides. */ /* [22] featuresList ("The Platform" et al): the SELECTED tab keeps the accent colour — the theme only defines .hover-teal:hover, so the active tab dropped back to ink the moment the pointer left it (client, 2026-07-17; global). Desktop trigger rows = .row.feature-tab-container (Bootstrap toggles .collapsed; the active row is the one without it). Mobile accordion headers track aria-expanded (the template pre-sets it on the first tab). Keyed to .hover-teal so a module with a different accent colour is untouched. */ .feature-tabs .row.feature-tab-container:not(.collapsed) .hover-teal, .feature-tabs .accordion-header.feature-tab[aria-expanded="true"] .hover-teal { color: #5aa7a0; } /* [20] 2026-07-20 partner-tabs (/partners): centre tab-selector labels */ #partner-tabs .tab-card{display:flex;align-items:center;justify-content:center;text-align:center;} /* [21] 2026-07-20 partner-tabs logo strip: replace the 4-col justify-between grid with a centred flex row so all logos sit on one balanced line with uniform gaps (gridSize no longer matters); size is driven by the logoScale inline max-height, capped at 80px as a fallback. */ #partner-tabs .logo-listing-tiled{display:flex;flex-wrap:wrap;justify-content:center!important;align-items:center;gap:1.75rem 3.25rem;} #partner-tabs .logo-listing-tiled > .col{flex:0 0 auto;width:auto;max-width:none;padding:0;margin:0;} #partner-tabs .logo-listing-tiled a{display:inline-flex;align-items:center;} #partner-tabs .logo-listing-tiled img{width:auto;max-height:64px!important;object-fit:contain;} /* [22] 2026-07-20 icon-cards (col-3 icon + col copy): a copy word wider than the content column made the whole column drop BELOW the icon (flex default min-width:auto; hit /partnerprograms "Open doors to new opportunities"). min-width:0 lets the text wrap in place so copy stays to the right. Pattern-scoped to the icon-card row; a no-op wherever copy already fits, so safe sitewide. */ .row:has(> .col-3 > .icon-wrap) > .col{min-width:0;} /* [23] 2026-07-20 /partnerprograms card sections (scoped via sectionID) */ /* Tier medals (#pp-tiers): square medals were cropped top/bottom by the photo-card .ph-wrapper (aspect-ratio 4/3 + object-fit:cover). Show the full medal, no crop, no framed background. */ #pp-tiers .ph-wrapper{display:flex!important;align-items:center;justify-content:center;height:100%!important;aspect-ratio:auto!important;overflow:hidden;background:transparent!important;} #pp-tiers .ph-wrapper img.card-image{object-fit:contain!important;max-height:100%!important;max-width:100%!important;width:auto!important;height:auto!important;margin:0!important;} /* Centre the medal vertically: kill the wrapper's mb-3 and the img's own margin-bottom (flex align-items:center was centring the img+margin box, shoving it high). */ #pp-tiers .card-image-top > .ph{margin-bottom:0!important;} /* Kill the photo-card tint overlay (.ph::after = rgba(0,48,74,.28)) that washed the medals. */ #pp-tiers .card-image-top .ph::after{content:none!important;display:none!important;} #pp-tiers .card-image-top .ph{background:transparent!important;} /* Specialization badges (#pp-badges): medal images dropped in the icon slot rendered at 80px. Enlarge to 120px (cards.twig icon transform bumped to 240px so it stays sharp). */ #pp-badges .icon-wrap img{max-width:120px!important;max-height:120px!important;} /* [24] 2026-07-20 /alliances ecosystem logo cards (#alliance-ecosystem): show partner logos contained/centred on white, no photo-card crop / tile / tint overlay (same fix as #pp-tiers). */ #alliance-ecosystem .ph-wrapper{display:flex!important;align-items:center;justify-content:center;height:100%!important;aspect-ratio:auto!important;overflow:hidden;background:transparent!important;} #alliance-ecosystem .ph-wrapper img.card-image{object-fit:contain!important;max-height:64px!important;max-width:100%!important;width:auto!important;height:auto!important;margin:0!important;} #alliance-ecosystem .card-image-top > .ph{margin-bottom:0!important;} #alliance-ecosystem .card-image-top .ph::after{content:none!important;display:none!important;} #alliance-ecosystem .card-image-top .ph{background:transparent!important;} /* [25] 2026-07-20 .celona-bullets: replace list bullets with the Celona favicon mark (reusable; used on /alliances "What you get"). */ .celona-bullets{list-style:none;padding-left:0;} .celona-bullets li{position:relative;padding-left:1.9rem;margin-bottom:.55rem;} .celona-bullets li::before{content:"";position:absolute;left:0;top:.15em;width:1.15rem;height:1.15rem;background:url(/assets/favicons/favicon.svg) no-repeat left center;background-size:contain;} /* [26] 2026-07-20 resourceListing: give the resource grid breathing room so it does not bleed into the footer (module has no sectionSpacing/background field of its own). */ .section-resourceListing{padding-bottom:4rem!important;margin-bottom:2.5rem;} /* [27] 2026-07-21 Open / borderless icon-panel cards + icon-above-title layout (Greg, universal). Icon cards (the non-photo branch in cards.twig) now render the icon stacked ABOVE the title on an open panel — no border, box, shadow, or fill — sitting directly on the section background (Perplexity-style grid). Photo / tier cards (the item.image branch) are unaffected and keep their borders. cards.twig emits `.card.card-open` + `.icon-wrap.icon-top`. */ .card.card-open{border:0;background:transparent;box-shadow:none;border-radius:0;} /* Open-card text alignment + air between columns (client 2026-07-21: "more padding between text or we revert to visible boxes" + "these misalign"). The section-heading markup carries +24px of nested padding from the section edge while the card grid carries only +12px — a theme-wide quirk the old boxes masked. Base .75rem left padding puts open-card text at +24px, flush with the heading; the larger right padding keeps columns clearly separated. */ .card.card-open > .card-body,.card.card-open > .card-top{padding-left:1.5rem;padding-right:.75rem;} @media (min-width:768px){ .card.card-open > .card-body,.card.card-open > .card-top{padding-right:2.25rem;} } .card.card-open .icon-wrap.icon-top{display:block;margin-bottom:1rem;} .card.card-open .card-title{margin-top:0;} /* Highlighted open card still reads as emphasised: soft tinted panel + teal border + padding (overrides the transparent default and the plain .card-highlight border that card-open strips). */ .card.card-open.card-highlight{background:rgba(90,167,160,.07)!important;border:1px solid #5aa7a0!important;border-radius:14px!important;} .card.card-open.card-highlight > .card-body,.card.card-open.card-highlight > .card-top{padding-left:1.5rem!important;padding-right:1.5rem!important;} /* [28] 2026-07-21 (retired same day) Home-only pillar gap tweak — superseded by the global open-card padding in [27], which both aligns card text with headings and separates columns. Keeping the row/col overrides would double-shift the home cards. */ /* [29] 2026-07-21 Global auto-mono icon-card icons, keyed off the section background (client: prefer auto-recolour over uploading mono/reverse variants). Uploaded icon SVGs () can't take CSS fill, so recolour via filter: brightness(0) normalises any source colour to black, then the chain builds the target. Default = brand navy (#00304A) for light bands (White/Light Buff/Warm Linen/Light Charcoal) + no-bg sections; dark bands (Dark Blue/deep-blue/Blue/Rich Charcoal/Teal) → white/reverse. Scoped to .icon-wrap.icon-top (icon-card icons) so it never touches photo images, logos, or the coloured tier medals (#pp-badges). Palette hexes audited 2026-07-21. */ .icon-wrap.icon-top img{ filter:brightness(0) saturate(100%) invert(12%) sepia(83%) saturate(1698%) hue-rotate(180deg) brightness(94%) contrast(101%); } .bg-dark-blue .icon-wrap.icon-top img, .bg-deep-blue .icon-wrap.icon-top img, .bg-blue .icon-wrap.icon-top img, .bg-rich-charcoal .icon-wrap.icon-top img, .bg-teal .icon-wrap.icon-top img, .bg-deep-cobalt .icon-wrap.icon-top img{ filter:brightness(0) invert(1); } /* [30] 2026-07-21 Home hero video. v3 (2026-07-22, client): FULL-SCREEN takeover — breaks out of the module container to full viewport width and full screen height. Where the browser supports scroll-driven animations (Chromium) it starts slightly inset/rounded and expands to full-bleed as it scrolls into view; elsewhere it is simply always full-bleed. Video block spacing set to none/none so it sits seamless between bands. */ .orion-hero-video{display:block;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);height:100svh;min-height:520px;aspect-ratio:auto;object-fit:cover;object-position:center;border-radius:0;background:#01202f;} /* 2026-08-07 - the scroll-driven grow is REMOVED (client): "it starts not full width, and as you scroll goes full width. Can we fix that." It was a scroll-timeline animation scaling the video .94 -> 1 with a 22px radius over `entry 0% cover 35%`; because the video sits high on the page it was already in view at load, so the first thing a visitor saw was an inset, rounded frame that then snapped out - read as a bug, not a flourish. Now full-bleed from the first paint. (Chromium-only feature; other browsers never saw it, so this also removes a browser inconsistency.) Keyframes deleted with it - nothing else referenced them. */ /* [31] 2026-07-21 Nav dead zone 1200–1399px (pre-existing theme bug, client-reported): the desktop menu is d-xxl-flex (≥1400px) but the hamburger is hidden from 1200px up — so ordinary laptop widths get NO navigation at all. Show the hamburger in the gap. */ @media (min-width:1200px) and (max-width:1399.98px){ /* 2026-08-07 v2 - show the REAL nav here, not a hamburger (client: "I've now got hamburger menu on desktop - please fix"). The theme gates the desktop menu at d-xxl-flex (>=1400) but it fits comfortably well below that: measured at 1200 the menu