's direct children with flexbox so * the order becomes hero → breadcrumbs → body. Pages with no hero keep the crumbs * at the top of the content (the hero rule simply matches nothing). Scoped off the * homepage (which has no breadcrumbs) so its layout/spacing is untouched. */ body:not(.is-home) main { display: flex; flex-direction: column; } body:not(.is-home) main > * { order: 3; } body:not(.is-home) main > .page-hero, body:not(.is-home) main > .static-hero, body:not(.is-home) main > .section-hero, body:not(.is-home) main > .slideshow-hero, body:not(.is-home) main > .case-study-hero { order: 1; } body:not(.is-home) main > .breadcrumbs-wrap { order: 2; } /* ── Page Builder Blocks ───────────────────────── */ .builder-block { margin-bottom: var(--block-gap); } .builder-block:last-child { margin-bottom: 0; } .builder-block__heading { margin-top: 0; margin-bottom: 1rem; } .builder-block__image img { width: 100%; height: auto; border-radius: 6px; display: block; } /* Map blocks — full-width, map+text, map+image */ .builder-map { width: 100%; border-radius: 6px; overflow: hidden; } .builder-map iframe { width: 100%; height: 100%; border: 0; display: block; } .builder-map__popup { font: 14px/1.5 'Inter', system-ui, sans-serif; max-width: 260px; } .builder-map__popup strong { display: block; margin-bottom: 4px; } .builder-map__popup a { color: var(--color-primary); text-decoration: none; } .builder-map__popup a:hover { text-decoration: underline; } /* Admin-preview-only warning shown inside empty/invalid blocks. Public visitors never see this. */ .builder-block__warning { background: #fffbeb; border: 1px dashed #f59e0b; color: #92400e; padding: 0.85rem 1rem; border-radius: 6px; font-size: 0.875rem; line-height: 1.5; } /* Multi-column layouts (expert mode) */ .builder-grid { display: grid; gap: 2rem; align-items: start; } .builder-grid--3 { grid-template-columns: 1fr 1fr 1fr; } .builder-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .builder-grid--1-2 { grid-template-columns: 1fr 2fr; } .builder-grid--2-1 { grid-template-columns: 2fr 1fr; } /* Responsive — declared AFTER the base column rules so they win (equal specificity). */ @media (min-width: 769px) and (max-width: 1024px) { /* Tablet: 4-col → 2-col grid; 3-col stays as 3 but tighter */ .builder-grid--4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .builder-grid--3, .builder-grid--4, .builder-grid--1-2, .builder-grid--2-1 { grid-template-columns: 1fr; } } /* ── Block layout helpers (config: cms.block_utilities) ───────────────────── Discoverable design tweaks ticked on from a block's Design → Layout helpers picker and emitted onto the .builder-block wrapper. Core helpers use the `u-` prefix so they never collide with per-site custom classes. u-stack-reverse — reverse the column order ONLY when the block has stacked (≤768px). Works on any multi-column block: .content-row-grid (two_column / image_text / map_text / map_image / form_text + form_image in left-right mode) and .builder-grid (3/4-col + asymmetric). Switches the collapsed grid to flex column-reverse so it reverses whatever column count the block has. Desktop layout is untouched. (Graduated from the Square Club install's site-only sc-stack-reverse.) */ @media (max-width: 768px) { .u-stack-reverse .content-row-grid, .u-stack-reverse .builder-grid { display: flex; flex-direction: column-reverse; } } /* u-align-middle — vertically centre a multi-column block's columns (the grids default to top-aligned). Pairs well with Image + Text when the copy is shorter than the image. Targets the same grid containers as u-stack-reverse. */ .u-align-middle .content-row-grid, .u-align-middle .builder-grid { align-items: center; } /* u-full-bleed — break the block out of the centred page container so its background spans the full viewport width, edge to edge. Pairs with the Design tab's background colour / image. box-sizing keeps the inner gutter inside the 100vw (no overflow); the gutter stops content hitting the screen edge and is overridden if the editor sets padding on the Design tab. The horizontal scrollbar this width could cause is absorbed by body { overflow-x: clip }. */ .u-full-bleed { box-sizing: border-box; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 1.25rem; padding-right: 1.25rem; } /* u-elevate — soft drop shadow to lift a block off the page (card style). Combine with the Design tab's corner radius for a rounded card. */ .u-elevate { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); } /* u-hide-mobile / u-hide-desktop — breakpoint visibility. !important so they win over any block-type display rule. */ @media (max-width: 768px) { .u-hide-mobile { display: none !important; } } @media (min-width: 769px) { .u-hide-desktop { display: none !important; } } /* Stacked layout (form_text/form_image with above/below position) */ .builder-stack { display: flex; flex-direction: column; gap: 2rem; } /* CTA */ .builder-cta { padding: 3.5rem 2rem; text-align: center; border-radius: 6px; } .builder-cta--banner { background: var(--color-primary); color: #fff; } .builder-cta--banner h2 { color: #fff; } .builder-cta--card { background: var(--color-bg-subtle); border: 1px solid var(--color-border); max-width: 640px; margin: 0 auto; } .builder-cta--minimal { text-align: left; padding: 1.5rem 0; } .builder-cta__inner { max-width: 720px; margin: 0 auto; } .builder-cta h2 { margin-bottom: 0.75rem; } .builder-cta p { margin-bottom: 1.25rem; opacity: 0.9; } /* Gallery — two layouts: grid (uniform squares) or masonry (staggered, natural shape) */ .builder-gallery { gap: 0.75rem; } /* Grid: equal-sized square tiles, images cropped via object-fit */ .builder-gallery--grid { display: grid; } .builder-gallery--grid.builder-gallery--2col { grid-template-columns: repeat(2, 1fr); } .builder-gallery--grid.builder-gallery--3col { grid-template-columns: repeat(3, 1fr); } .builder-gallery--grid.builder-gallery--4col { grid-template-columns: repeat(4, 1fr); } .builder-gallery--grid .builder-gallery__item { aspect-ratio: 1; overflow: hidden; border-radius: 4px; } .builder-gallery--grid .builder-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Masonry: CSS column-count for staggered, preserve-aspect-ratio layout */ .builder-gallery--masonry { column-gap: 0.75rem; } .builder-gallery--masonry.builder-gallery--2col { column-count: 2; } .builder-gallery--masonry.builder-gallery--3col { column-count: 3; } .builder-gallery--masonry.builder-gallery--4col { column-count: 4; } .builder-gallery--masonry .builder-gallery__item { break-inside: avoid; margin: 0 0 0.75rem; border-radius: 4px; overflow: hidden; display: block; } .builder-gallery--masonry .builder-gallery__item img { width: 100%; height: auto; display: block; } /* Legacy fallback: any old gallery markup without --grid/--masonry class behaves like the previous grid implementation. */ .builder-gallery:not(.builder-gallery--grid):not(.builder-gallery--masonry) { display: grid; } .builder-gallery:not(.builder-gallery--grid):not(.builder-gallery--masonry).builder-gallery--2col { grid-template-columns: repeat(2, 1fr); } .builder-gallery:not(.builder-gallery--grid):not(.builder-gallery--masonry).builder-gallery--3col { grid-template-columns: repeat(3, 1fr); } .builder-gallery:not(.builder-gallery--grid):not(.builder-gallery--masonry).builder-gallery--4col { grid-template-columns: repeat(4, 1fr); } .builder-gallery:not(.builder-gallery--grid):not(.builder-gallery--masonry) .builder-gallery__item { aspect-ratio: 1; overflow: hidden; border-radius: 4px; } .builder-gallery:not(.builder-gallery--grid):not(.builder-gallery--masonry) .builder-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Responsive — declared AFTER the base column rules so they win (equal specificity). */ @media (max-width: 768px) { .builder-gallery--grid.builder-gallery--3col, .builder-gallery--grid.builder-gallery--4col { grid-template-columns: repeat(2, 1fr); } .builder-gallery--masonry.builder-gallery--3col, .builder-gallery--masonry.builder-gallery--4col { column-count: 2; } } /* Video */ .builder-video { margin: 0 auto; max-width: 900px; } .builder-video__frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; } .builder-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .builder-video__caption { text-align: center; color: #666; font-size: 0.85rem; margin-top: 0.6rem; } /* Accordion */ .builder-accordion { display: flex; flex-direction: column; gap: 0.5rem; } /* Audio embed (Spotify, SoundCloud, Apple Podcasts) — fixed-height, not 16:9 */ .builder-video--audio { max-width: 900px; } .builder-video--audio iframe { display: block; border-radius: 8px; } /* Pull Quote */ .builder-quote { margin: 1.5rem 0; padding: 1.5rem; border-left: 4px solid var(--color-primary); } .builder-quote--centred { text-align: center; border-left: 0; padding: 2rem 1rem; } .builder-quote--card { border-left: 0; background: #f8f8f8; border-radius: 8px; padding: 2rem; position: relative; } .builder-quote--card::before { content: '\201C'; position: absolute; top: -0.5rem; left: 1rem; font-size: 5rem; color: var(--color-primary); line-height: 1; opacity: 0.3; font-family: Georgia, serif; } .builder-quote__text { font-size: 1.25rem; font-style: italic; line-height: 1.5; margin: 0 0 1rem; } .builder-quote__cite { font-style: normal; font-size: 0.9rem; color: #555; } .builder-quote__cite cite { font-style: normal; font-weight: 600; color: #222; } .builder-quote__role { display: block; color: #888; font-size: 0.85rem; margin-top: 0.15rem; } /* Buttons block */ .builder-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; } .builder-buttons--left { justify-content: flex-start; } .builder-buttons--center { justify-content: center; } .builder-buttons--right { justify-content: flex-end; } .btn-secondary { background: #6c757d; color: #fff; padding: 0.6rem 1.2rem; border-radius: 4px; text-decoration: none; display: inline-block; } .btn-secondary:hover { background: #5a6268; } .btn-outline { background: transparent; color: var(--color-primary); padding: 0.55rem 1.2rem; border: 2px solid var(--color-primary); border-radius: 4px; text-decoration: none; display: inline-block; } .btn-outline:hover { background: var(--color-primary); color: #fff; } /* Case-study top "Back to portfolio" floats right in its own row (the bespoke .cs-* layout has no breadcrumb-action slot to share). The button is an inline-block, so right-aligning its block wrapper pushes it to the edge. */ .cs-back-top { text-align: right; } /* Show pages (blog/news/events/gallery) put their top "Back" button on the SAME line as the breadcrumbs via @section('breadcrumb_action') — crumbs LEFT, button RIGHT on desktop. The wrap only gets .breadcrumbs-wrap--has-action when the slot is filled, so plain breadcrumb rows are untouched. Stacks below the crumbs on narrow screens. text-align:right on the action is a belt-and-braces fallback so the button stays right even if the flex row is ever not applied. */ .breadcrumbs-wrap--has-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .breadcrumbs-wrap--has-action .breadcrumbs { margin-bottom: 0; } .breadcrumb-action { flex: none; margin-left: auto; text-align: right; } @media (max-width: 768px) { .breadcrumbs-wrap--has-action { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .breadcrumb-action { margin-left: 0; text-align: left; } } /* Stats / Numbers */ .builder-stats { display: grid; gap: 1.5rem; margin: 1.5rem 0; text-align: center; } .builder-stats--2col { grid-template-columns: repeat(2, 1fr); } .builder-stats--3col { grid-template-columns: repeat(3, 1fr); } .builder-stats--4col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .builder-stats--3col, .builder-stats--4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .builder-stats { grid-template-columns: 1fr !important; } } .builder-stat__value { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; } .builder-stat__label { font-size: 1rem; color: #222; margin-top: 0.3rem; } .builder-stat__subtext { font-size: 0.85rem; color: #666; margin-top: 0.25rem; } /* Logo Strip */ .builder-logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; margin: 1.5rem 0; } .builder-logo-strip__item { display: inline-flex; align-items: center; } .builder-logo-strip__item img { max-height: 60px; max-width: 160px; width: auto; height: auto; object-fit: contain; } .builder-logo-strip--grayscale img { filter: grayscale(100%); opacity: 0.7; transition: filter 0.2s, opacity 0.2s; } .builder-logo-strip--grayscale .builder-logo-strip__item:hover img { filter: grayscale(0%); opacity: 1; } /* Tabs */ .builder-tabs { margin: 1.5rem 0; } .builder-tabs__nav { display: flex; flex-wrap: wrap; border-bottom: 2px solid #eee; margin-bottom: 1rem; } .builder-tabs__tab { background: none; border: 0; padding: 0.75rem 1.25rem; font: inherit; color: #555; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; } .builder-tabs__tab:hover { color: var(--color-primary); } .builder-tabs__tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; } .builder-tabs__panel { display: none; } .builder-tabs__panel.is-active { display: block; } /* Icon + Text Grid (Features) */ .builder-icon-grid { display: grid; gap: 1.5rem; margin: 1.5rem 0; } .builder-icon-grid--2col { grid-template-columns: repeat(2, 1fr); } .builder-icon-grid--3col { grid-template-columns: repeat(3, 1fr); } .builder-icon-grid--4col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .builder-icon-grid--3col, .builder-icon-grid--4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .builder-icon-grid { grid-template-columns: 1fr !important; } } .builder-icon-grid__icon img { width: 48px; height: 48px; object-fit: contain; } .builder-icon-grid__icon--svg { color: var(--color-primary); line-height: 0; } .builder-icon-grid__svg { width: 48px; height: 48px; display: inline-block; vertical-align: middle; } .builder-icon-grid__title { margin: 0.6rem 0 0.4rem; font-size: 1.1rem; } .builder-icon-grid__desc { margin: 0; color: #555; font-size: 0.95rem; line-height: 1.5; } /* Pricing */ .builder-pricing { display: grid; gap: 1.5rem; margin: 1.5rem 0; } .builder-pricing--2col { grid-template-columns: repeat(2, 1fr); } .builder-pricing--3col { grid-template-columns: repeat(3, 1fr); } .builder-pricing--4col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .builder-pricing--3col, .builder-pricing--4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .builder-pricing { grid-template-columns: 1fr !important; } } .builder-pricing__plan { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; position: relative; } .builder-pricing__plan.is-featured { border-color: var(--color-primary); border-width: 2px; transform: scale(1.02); box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.15); } .builder-pricing__badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; padding: 0.25rem 0.9rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .builder-pricing__name { font-size: 1.1rem; font-weight: 600; color: #222; margin-bottom: 0.5rem; } .builder-pricing__price { margin: 0.5rem 0 1rem; } .builder-pricing__amount { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); } .builder-pricing__period { font-size: 1rem; color: #666; margin-left: 0.25rem; } .builder-pricing__desc { color: #666; font-size: 0.9rem; margin: 0 0 1rem; } .builder-pricing__features { list-style: none; padding: 0; margin: 1rem 0; text-align: left; flex-grow: 1; } .builder-pricing__features li { padding: 0.4rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.95rem; } .builder-pricing__features li:last-child { border-bottom: 0; } .builder-pricing__features li::before { content: '\2713'; color: var(--color-secondary); font-weight: 700; margin-right: 0.5rem; } .builder-pricing__plan .btn { margin-top: auto; } /* Block-picker tile alignment for new types */ .block-picker-modal .filament-forms-toggle-buttons-component label { min-height: 86px; } /* Countdown */ .builder-countdown { text-align: center; padding: 1rem 0; } .builder-countdown__units { display: flex; justify-content: center; align-items: flex-start; gap: 0.25rem; flex-wrap: wrap; } .builder-countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 72px; } .builder-countdown__value { font-size: 3rem; font-weight: 700; color: var(--color-primary); line-height: 1; font-variant-numeric: tabular-nums; } .builder-countdown__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-top: 0.3rem; } .builder-countdown__sep { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); line-height: 1; padding-top: 0.1rem; } .builder-countdown__sublabel { margin-top: 1.25rem; color: #444; font-size: 1rem; } .builder-countdown__expired { font-size: 1.5rem; font-weight: 600; color: var(--color-primary); } @media (max-width: 480px) { .builder-countdown__value { font-size: 2rem; } .builder-countdown__unit { min-width: 52px; } } /* Flip Box */ .builder-flip-grid { display: grid; gap: 1.5rem; margin: 1.5rem 0; width: 100%; } .builder-flip-grid--2col { grid-template-columns: repeat(2, 1fr); } .builder-flip-grid--3col { grid-template-columns: repeat(3, 1fr); } .builder-flip-grid--4col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .builder-flip-grid--3col, .builder-flip-grid--4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .builder-flip-grid { grid-template-columns: 1fr !important; } } .builder-flip-box { perspective: 1000px; height: 260px; cursor: pointer; } .builder-flip-box__inner { position: relative; width: 100%; height: 100%; transition: transform 0.55s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; } .builder-flip-box__front, .builder-flip-box__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .builder-flip-box__front { background: var(--color-bg-subtle); border: 1px solid var(--color-border); } .builder-flip-box__back { background: var(--color-primary); color: #fff; transform: rotateY(180deg); } .builder-flip-box__back .builder-flip-box__heading { color: #fff; } .builder-flip-box__back .builder-flip-box__text { color: rgba(255,255,255,0.88); } .builder-flip-box__image { margin-bottom: 0.75rem; } .builder-flip-box__image img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; } .builder-flip-box__heading { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; } .builder-flip-box__text { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #555; } .builder-flip-box__hint { margin-top: 0.9rem; font-size: 0.72rem; color: #bbb; letter-spacing: 0.03em; } .builder-flip-box__back .btn { margin-top: 1rem; border-color: rgba(255,255,255,0.7); color: #fff; } .builder-flip-box__back .btn:hover { background: rgba(255,255,255,0.15); } @media (hover: hover) { .builder-flip-box:hover .builder-flip-box__inner { transform: rotateY(180deg); } .builder-flip-box__hint { display: none; } } .builder-flip-box.is-flipped .builder-flip-box__inner { transform: rotateY(180deg); } /* Share / Follow Buttons */ .builder-share { display: flex; flex-wrap: wrap; gap: 0.5rem; } .builder-share--center { justify-content: center; } .builder-share--right { justify-content: flex-end; } .builder-share__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem; border-radius: 6px; text-decoration: none; border: none; background: none; cursor: pointer; transition: opacity 0.15s, transform 0.15s; line-height: 1; } .builder-share__btn:hover { opacity: 0.75; transform: translateY(-1px); text-decoration: none; } .builder-share--icons_labels .builder-share__btn { padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid currentColor; } .builder-share--pills .builder-share__btn { padding: 0.4rem 1rem; border-radius: 999px; color: #fff !important; } .builder-share__icon { width: 20px; height: 20px; display: block; flex-shrink: 0; } .builder-share__icon svg { width: 100%; height: 100%; display: block; } .builder-share__label { font-size: 0.85rem; font-weight: 500; white-space: nowrap; } /* Flip box: contain hover-flip within block wrapper on desktop. width:100% stops flow-root shrink-wrapping the wrapper to the cards' content width, which collapsed the grid's 1fr columns at wide breakpoints. */ @media (hover: hover) { .builder-block--flip_box { display: flow-root; width: 100%; } } /* TOC: contain its float within the builder-block wrapper */ .builder-block--table_of_contents { display: flow-root; } /* Table of Contents */ .builder-toc { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 1.1rem 1.4rem; } .builder-toc--float_right { float: right; margin: 0 0 1.5rem 2rem; max-width: 270px; width: 100%; } .builder-toc--float_left { float: left; margin: 0 2rem 1.5rem 0; max-width: 270px; width: 100%; } .builder-toc__heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin: 0 0 0.7rem; } .builder-toc ul { margin: 0; padding: 0; list-style: none; } .builder-toc__item { margin: 0; padding: 0; } .builder-toc__item a { display: block; padding: 0.22rem 0; color: var(--color-primary); text-decoration: none; font-size: 0.88rem; line-height: 1.4; } .builder-toc__item a:hover { text-decoration: underline; } .builder-toc__item--h3 { padding-left: 1rem; } .builder-toc__item--h4 { padding-left: 2rem; } .builder-toc__item--h3 a, .builder-toc__item--h4 a { font-size: 0.82rem; color: #666; } .builder-toc__item--h3 a:hover, .builder-toc__item--h4 a:hover { color: var(--color-primary); } @media (max-width: 600px) { .builder-toc--float_right, .builder-toc--float_left { float: none; max-width: 100%; margin: 0 0 1.5rem; } } /* ════════════════════════════════════════════════════════════════════ * Motley 2026 — Homepage & Navigation reskin * Design: Figma "motley-website-2026". Additive / overriding so the * reskin is easy to find and revert. Colours/fonts come from the tokens * in :root — change values there, layout here. * ════════════════════════════════════════════════════════════════════ */ /* ── Page frame ─────────────────────────────────── * A constant white gutter around the whole page. Full-bleed coloured * sections stop at this frame; the fullscreen nav overlay (position:fixed) * deliberately covers it, matching the design's edge-to-edge menu. */ /* Clip horizontal overflow at the viewport edge: stops any stray full-bleed element from creating a horizontal scrollbar, which (in Chrome's responsive mode especially) widens the position:fixed nav overlay to the layout viewport and pushes its right-aligned close X off screen. Applied to not so the viewport-wide overlay itself is never clipped. */ html { background: #fff; overflow-x: clip; } body { max-width: var(--page-max); margin-inline: auto; padding: var(--page-frame); background: #fff; } @media (max-width: 768px) { :root { --page-frame: 14px; } } /* The framed page is the positioning context for the overlaid header. */ body { position: relative; } /* ── Brand mark (logo tab + hover flyout) ────────────── * Orange square holding the real Motley mark; on hover an orange panel * the same height slides out to the right showing the wordmark. Box size * follows the design (≈150px at the 1440 page); inner pages use a small * version so they aren't dominated by a giant tab. */ .brand-mark { --logo-size: 150px; position: relative; display: inline-flex; align-items: stretch; text-decoration: none; } .brand-mark:hover { text-decoration: none; } .brand-mark__box { display: grid; place-items: center; flex: none; width: var(--logo-size); height: var(--logo-size); background: var(--color-primary); } .brand-mark__img { width: 52%; height: auto; display: block; } .brand-mark__flyout { overflow: hidden; max-width: 0; background: var(--color-primary); display: flex; align-items: center; transition: max-width 0.32s ease; } .brand-mark__flyout > span { padding: 0 1.5rem 0 0.1rem; white-space: nowrap; /* Flyout wordmark uses Outfit (Google Font); rest of the site keeps --font-display (Inter). */ font-family: 'Outfit', var(--font-display); font-weight: 800; color: #fff; font-size: calc(var(--logo-size) * 0.32); letter-spacing: 0.06em; } .brand-mark:hover .brand-mark__flyout, .brand-mark:focus-visible .brand-mark__flyout { max-width: 360px; } /* ── Header ─────────────────────────────────────────── */ /* Reset the original base .site-header (white bg + 3px orange border-bottom + padding) — the 2026 header is a transparent corner-tab layout. */ .site-header { z-index: 60; background: transparent; border: 0; padding: 0; } .site-header__actions { display: flex; align-items: center; gap: 1.25rem; } .site-header__social { display: flex; align-items: center; gap: 0.7rem; } .site-header__social a { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; transition: opacity 0.15s ease; } .site-header__social a:hover { color: #fff; opacity: 0.72; } .site-header__social svg { width: 18px; height: 18px; fill: currentColor; } /* The white social icons are for the dark homepage hero. On inner pages the tabs now overlay light bands / lighter heroes, where white disappears — colour them the Motley green so they stay visible beside the hamburger (hover keeps the colour, just dims). */ body:not(.is-home) .site-header__social a, body:not(.is-home) .site-header__social a:hover { color: var(--color-secondary); } /* LinkedIn on inner pages: keep the green square, but make the cut-out "in" read white by sitting a small white backing behind the icon (the square covers the rest; only the letter holes reveal it). Homepage + footer are untouched. */ body:not(.is-home) .site-header__social a[aria-label="Linkedin"] { position: relative; } body:not(.is-home) .site-header__social a[aria-label="Linkedin"]::before { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; border-radius: 3px; background: #fff; z-index: 0; } body:not(.is-home) .site-header__social a[aria-label="Linkedin"] svg { position: relative; z-index: 1; } .nav-trigger { display: grid; align-content: center; gap: 6px; flex: none; width: 84px; height: 84px; padding: 0 22px; background: var(--color-primary); border: 0; cursor: pointer; transition: background 0.15s ease; } .nav-trigger:hover { background: var(--color-primary-hover); } .nav-trigger span { display: block; height: 3px; background: #fff; border-radius: 2px; } /* Inner pages — header is a normal flow bar with a restrained logo. */ .site-header:not(.site-header--overlay) { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .site-header:not(.site-header--overlay) .brand-mark { --logo-size: 60px; } .site-header:not(.site-header--overlay) .nav-trigger { width: 60px; height: 60px; padding: 0 16px; gap: 5px; } /* Inner pages — overlay the header into the page corners (homepage effect), * KEEPING the restrained inner logo/hamburger sizes (set above). The 60px * hamburger sits flush at the top of a 60px-tall actions row, so no upward pull * is needed (unlike the homepage's larger tab). * * position:fixed (not absolute) so the logo + hamburger stay pinned while you * scroll — the hamburger is the only entry point to navigation, so it must stay * reachable on long pages. Centred to the page max-width (mirroring the body * frame) so the tabs hug the content corners, not the screen edges, on wide * monitors. */ body:not(.is-home) .site-header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--page-max); margin-bottom: 0; pointer-events: none; } body:not(.is-home) .site-header .brand-mark, body:not(.is-home) .site-header .site-header__actions { pointer-events: auto; } body:not(.is-home) .site-header .site-header__actions { align-self: stretch; align-items: flex-end; } body:not(.is-home) .site-header .nav-trigger { margin-top: 0; } /* Hero-less inner pages have no banner, so promote the heading band into a light * "hero" band that the floating corner tabs sit over (instead of white space): * give it the page-alt background, lift it to the top of

(order:1, taking * the hero slot), and pad the top so the title clears the 60px tabs. Breadcrumbs * fall just below it — same hero → breadcrumbs → content order as hero pages. */ body:not(.is-home):not(:has(main > .page-hero)):not(:has(main > .slideshow-hero)) main > .page-body-heading { order: 1; background: var(--color-bg-alt); padding-top: 4rem; /* clears the 60px corner tabs */ padding-bottom: 1.25rem; margin-bottom: 2rem; } /* Homepage — header overlays the hero; tabs pinned to the page corners * (inside the white frame, matching the design). */ .site-header--overlay { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; } .site-header--overlay .brand-mark, .site-header--overlay .site-header__actions { pointer-events: auto; } .site-header--overlay .site-header__actions { align-self: stretch; } /* Pull the hamburger flush with the very top of the page (out of the 30px white frame), level with the page edge — mirrored by .nav-overlay__close. */ .site-header--overlay .nav-trigger { margin-top: -64px; } @media (max-width: 768px) { .brand-mark { --logo-size: 76px; } .nav-trigger { width: 60px; height: 60px; padding: 0 16px; gap: 5px; } .site-header--overlay .nav-trigger { margin-top: -22px; } .nav-overlay__close { width: 60px; height: 60px; } .nav-overlay__close svg { width: 30px; height: 30px; } } /* Footer brand — small mark + wordmark, no flyout. */ .brand-mark--footer { --logo-size: 44px; align-items: center; gap: 0.85rem; } .brand-mark--footer .brand-mark__word { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.05em; color: var(--color-ink); } /* ── Fullscreen overlay navigation ────────────────── */ .nav-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--color-primary); opacity: 0; visibility: hidden; transform: translateY(-1.5rem); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s; overflow-y: auto; } .nav-overlay.open { opacity: 1; visibility: visible; transform: none; } .nav-overlay__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; padding-top: 7rem; padding-bottom: 4rem; min-height: 100%; } /* The overlay header is position:absolute on , so the hamburger sits at the body BOX edge (the page corner) — NOT inset by the page frame. So this bar is a centred max-width:var(--page-max) box with NO inline padding; the right-aligned X lands exactly on the hamburger box. */ .nav-overlay__topbar { /* fixed (not absolute) so the close button stays pinned to the viewport top while the open overlay scrolls. The overlay sets transform:none when open, so fixed resolves against the viewport. */ position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--page-max)); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 2; } .nav-overlay__close { pointer-events: auto; display: grid; place-items: center; width: 84px; height: 84px; background: none; border: 0; cursor: pointer; color: #fff; } .nav-overlay__close svg { width: 38px; height: 38px; fill: currentColor; } /* Brand mark inside the open overlay — mirrors the inner-page logo (60px, pinned top-left of the page-max box) but recoloured for the orange overlay: white box + black wordmark. The flyout reveals MOTLEY on hover/focus, same as the header/inner-page logo (the shared .brand-mark:hover rule handles it); here we only recolour the panel white with black text. The mark is the SAME file as the header logo (motley-logo.svg, a white mark) recoloured to brand orange via an alpha mask — the mask uses the shape, not the fill, so it stays in sync with the header logo and needs no extra asset. */ .nav-overlay__topbar .brand-mark--nav { --logo-size: 60px; pointer-events: auto; } .nav-overlay__topbar .brand-mark--nav .brand-mark__box { background: #fff; } .nav-overlay__topbar .brand-mark--nav .brand-mark__img { width: 52%; aspect-ratio: 85 / 79; height: auto; background: var(--color-primary); -webkit-mask: url('../images/motley-logo.svg') center / contain no-repeat; mask: url('../images/motley-logo.svg') center / contain no-repeat; } .nav-overlay__topbar .brand-mark--nav .brand-mark__flyout { background: #fff; } .nav-overlay__topbar .brand-mark--nav .brand-mark__flyout > span { color: var(--color-ink, #1c1c1c); } .nav-overlay__menu { display: flex; flex-direction: column; gap: 2.5rem; } .nav-group__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 0.6rem; } /* Heading-only group with no children (e.g. "MOTLEY"): cancel the 2.5rem inter-group gap so its label sits tight above the next item, matching how a heading-with-children label sits above its links. The following groups keep their normal spacing between each other. */ .nav-group:has(.nav-group__label):not(:has(.nav-group__links a)) { margin-bottom: -1.9rem; } .nav-group__links { list-style: none; margin: 0; padding: 0; } .nav-group__links li { margin: 0; } .nav-group__links a { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.18; text-transform: uppercase; color: #fff; letter-spacing: 0.005em; text-decoration: none; transition: opacity 0.15s ease, padding-left 0.15s ease; } .nav-group__links a:hover { opacity: 0.72; text-decoration: none; padding-left: 0.4rem; } .nav-overlay .inactive > a, .nav-overlay .inactive a { opacity: 0.45; } .nav-overlay__contact { display: flex; flex-direction: column; gap: 1.75rem; padding-top: 0.25rem; } .nav-contact-block__label { font-size: 0.85rem; font-weight: 700; color: #fff; margin: 0 0 0.35rem; } .nav-contact-block a, .nav-contact-block span { color: rgba(255,255,255,0.85); font-size: 0.95rem; line-height: 1.6; } .nav-contact-block a:hover { color: #fff; text-decoration: underline; } .nav-overlay__social { display: flex; gap: 0.6rem; margin-top: 0.15rem; } .nav-overlay__social a { display: grid; place-items: center; width: 34px; height: 34px; background: rgba(255,255,255,0.15); border-radius: 3px; color: #fff; } .nav-overlay__social a:hover { background: rgba(255,255,255,0.28); } .nav-overlay__social svg { width: 17px; height: 17px; fill: currentColor; } /* ── Footer (light) ───────────────────────────────── */ .site-footer { background: #fff; color: var(--color-ink); border-top: 1px solid #ececec; margin-top: 0; padding: 3rem 0 2.25rem; font-size: 0.9rem; } /* Footer inner is full-bleed to the page frame, matching the homepage bands above (hero / feature / green-hosting / services all share the same edges). .site-footer__cols uses display:contents so the 4 .footer-col children become direct grid items here (5 even tracks) instead of a cramped sub-grid. */ .site-footer__inner { max-width: none; width: 100%; padding-inline: 0; display: grid; grid-template-columns: minmax(160px, 1.2fr) repeat(4, 1fr); gap: 2.5rem; align-items: start; } .site-footer__brand { display: flex; flex-direction: column; gap: 0.9rem; } .site-footer__copy { color: #8a8a8a; font-size: 0.8rem; margin: 0; } .site-footer__cols { display: contents; } .site-footer .footer-col h4 { font-size: 0.85rem; font-weight: 700; color: var(--color-ink); margin: 0 0 0.5rem; padding: 0; border: 0; text-transform: none; } .site-footer .footer-col a, .site-footer .footer-col span { color: #6b6b6b; line-height: 1.7; display: inline-block; } .site-footer .footer-col a:hover { color: var(--color-primary); } .site-footer__social { display: flex; gap: 0.55rem; } .site-footer__social a { display: grid; place-items: center; width: 30px; height: 30px; color: #5c5c5c; } .site-footer__social a:hover { color: var(--color-primary); } .site-footer__social svg { width: 17px; height: 17px; fill: currentColor; } .site-footer__links { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #ececec; } .site-footer__links a { color: #6b6b6b; font-size: 0.85rem; } .site-footer__links a:hover { color: var(--color-primary); } /* ── Homepage: full-bleed block flow ──────────────── */ .home-blocks .builder-block { margin: 0; } /* The generic per-block "Page heading" (public_heading) renders on the homepage for ordinary content blocks (Text, Image, etc.); only the bespoke design bands suppress it, since they carry their own heading systems and a generic

on top would disrupt their layout. (Was a blanket `.home-blocks .builder-block__heading{display:none}` that silently swallowed editor-set headings on plain blocks added to the homepage — see UPGRADE-DIVERGENCES.md.) / .home-blocks .builder-block--split_panel .builder-block__heading, .home-blocks .builder-block--services_grid .builder-block__heading, .home-blocks .builder-block--feature_band .builder-block__heading, .home-blocks .builder-block--project_cards .builder-block__heading { display: none; } / Homepage document H1 band (below the banner): large uppercase, flush to the page-frame edge to align with the full-bleed bands (not indented by .container). / .page-body-heading--home > .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } .page-body-heading--home h1 { font-size: 2.75rem; line-height: 1.1; text-transform: uppercase; } @media (max-width: 768px) { .page-body-heading--home h1 { font-size: 1.75rem; } } .mhome-section { position: relative; } .home-blocks .builder-block--split_panel + .builder-block--project_cards { margin-top: 30px; } / Homepage content feed (e.g. the articles teaser): homepage blocks sit flush (margin:0) and the bespoke design bands carry their own padding, but a content-feed has none of its own up top — the search/filter row used to give it the gap from the band above, and that row is now suppressed on non-paginated feeds (see builder-blocks.blade.php). Space the feed itself so it doesn't collide with the block above. (install-local — UPGRADE-DIVERGENCES.md) / .home-blocks .builder-block--content_feed { margin-top: 2.5rem; } / ── Service detail pages: full-bleed block flow ────── INSTALL-LOCAL DIVERGENCE (motley 2026 design — see UPGRADE-DIVERGENCES.md). Service pages render builder blocks in `.page-blocks` (full width). The homepage-style sections break out edge-to-edge (they manage their own inner container); ordinary blocks (text, image+text, cta, etc.) stay in a readable column matching `.container`, so a service page can mix the Figma sections with normal prose. / .page-blocks { width: 100%; } .page-blocks .builder-block { margin-bottom: 0; } .page-blocks > .builder-block:not(.builder-block--services_grid):not(.builder-block--project_cards):not(.builder-block--split_panel):not(.builder-block--feature_band) { max-width: var(--container-width); margin-inline: auto; padding-inline: 1.25rem; margin-block: 2.5rem; } .page-blocks > .builder-block--services_grid, .page-blocks > .builder-block--project_cards, .page-blocks > .builder-block--split_panel, .page-blocks > .builder-block--feature_band { max-width: none; padding-inline: 0; } .page-blocks .builder-block--split_panel + .builder-block--project_cards { margin-top: 30px; } .mhome-h { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: 0.005em; margin: 0; color: var(--color-ink); } .mhome-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.75rem; } .mhome-link { display: inline-block; font-weight: 700; font-size: 0.85rem; color: inherit; border-bottom: 2px solid currentColor; padding-bottom: 2px; margin-top: 1rem; } .mhome-link:hover { text-decoration: none; opacity: 0.7; } / split_panel — colour pane + image pane / .mhome-split { display: grid; grid-template-columns: 2fr 3fr; min-height: 360px; } .mhome-split--right { grid-template-columns: 3fr 2fr; } .mhome-split--right .mhome-splitpane { order: 2; } .mhome-split--right .mhome-splitmedia { order: 1; } .mhome-splitpane { background: var(--color-primary); color: #fff; padding: 3.5rem clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; } .mhome-splitpane h2 { color: #fff; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.02; margin: 0; } .mhome-splittags { list-style: none; margin: 1.25rem 0 0; padding: 0; } .mhome-splittags li { font-weight: 700; font-size: 1.05rem; padding: 0.15rem 0; } .mhome-split__media { background: #d8d8d8 center/cover no-repeat; min-height: 320px; } .mhome-split .btn-outline-light { align-self: flex-start; margin-top: 1.75rem; display: inline-block; padding: 0.75rem 1.75rem; border: 2px solid #fff; color: #fff; font-weight: 700; font-size: 0.85rem; border-radius: 3px; transition: background 0.15s ease, color 0.15s ease; } .mhome-split .btn-outline-light:hover { background: #fff; color: var(--color-primary); text-decoration: none; } / project_cards — tagged image cards / .mhome-cardsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .mhome-card { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; display: block; background: #2a2a2a; color: #fff; } .mhome-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .mhome-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 55%, transparent 100%); } .mhome-card:hover img { transform: scale(1.05); } .mhome-cardbody { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.5rem; } .mhome-cardtag { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 2px; } .mhome-cardtitle { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 0.75rem 0 0; color: #fff; } .mhome-card__placeholder { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #3a3a3a, #3a3a3a 14px, #333 14px, #333 28px); } / services_grid — oversized title + pale intro slab + overlapping orange panel / .mhome-services { padding: 3.5rem 0 2.5rem; overflow: visible; } .mhome-servicesgrid.container { max-width: none; width: 100%; padding-inline: 0; } .mhome-servicesgrid { position: relative; display: grid; grid-template-columns: 46% 54%; gap: 0; align-items: center; } .mhome-servicesintro { position: relative; min-height: 560px; background: #eef2f3; padding: 16.5rem 9rem 5rem 5.4rem; } .mhome-servicestitle { position: absolute; top: 3.1rem; left: 0; width: 4.05ch; color: #000; font-size: 100px; line-height: 0.9; letter-spacing: 0; overflow-wrap: anywhere; } / How We Work page (slug how-we-work) — tighter services title at the largest breakpoint only. Guarded with min-width:1411px so it never overrides the max-width:1410px stack rule (which sets position:static + width:auto); an unguarded 2-class selector would otherwise win on specificity and constrain the stacked mobile heading. / @media (min-width: 1411px) { .page-how-we-work .mhome-servicestitle { top: 0rem; width: 6.05ch; } / AI & Automation service page (slug ai-automation) — same tighter title. Service detail pages emit a `service-{slug}` body class (set in frontend/services/show.blade.php). Same min-width guard as above. / .service-ai-automation .mhome-servicestitle { top: 0rem; width: 6.05ch; } } .mhome-servicescard { max-width: 560px; background: transparent; padding: 0; margin: 0; } .mhome-servicescard h3 { color: var(--color-primary); font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; margin: 0 0 1.7rem; } .mhome-servicescard p { color: #111; margin: 0; font-size: 1.13rem; line-height: 1.72; } .mhome-servicespanel { position: relative; z-index: 1; min-height: 520px; margin-left: -5.5rem; margin-right: 0; background: var(--color-primary); color: #fff; padding: 4.2rem 4.4rem 3.8rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 5rem; row-gap: 4.5rem; } .mhome-svc h4 { font-family: var(--font-display); font-weight: 900; font-size: 1.55rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0; color: #fff; margin: 0 0 1.35rem; } .mhome-svc ul { list-style: none; margin: 0 0 1.55rem; padding: 0; } .mhome-svc li { color: #fff; font-size: 1.2rem; line-height: 1.58; padding: 0; } .mhome-svc .mhome-link { color: #fff; font-size: 0.98rem; font-weight: 500; margin-top: 0; } / feature_band — two image cards / .mhome-feature { padding: 2.8rem 0 2.8rem; } .mhome-featuregrid.container { max-width: none; width: 100%; padding-inline: 0; } .mhome-featuregrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .mhome-featurecard { min-width: 0; background: #eef2f3; } .mhome-featuremedia { width: 100%; height: clamp(280px, 32vw, 500px); overflow: hidden; background: #eef2f3; } .mhome-featuremedia img { width: 100%; height: 100%; object-fit: cover; display: block; } .mhome-featurebody { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 2.25rem; align-items: start; min-height: 240px; padding: 0 2.6rem 3.2rem; background: #eef2f3; } .mhome-featurebody h2 { width: 4.1ch; margin: -0.62em 0 0; color: var(--color-primary); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(4rem, 6vw, 6.2rem); line-height: 0.86; letter-spacing: 0; overflow-wrap: anywhere; } .mhome-featurecopy { max-width: 390px; padding-top: 2.2rem; } .mhome-featurecopy p { color: #111; font-size: 1.03rem; line-height: 1.65; margin: 0 0 1.8rem; } .mhome-featurecopy .mhome-link { color: var(--color-ink); font-size: 0.95rem; font-weight: 500; margin-top: 0; } / ── Homepage responsive ─────────────────────────────── Staged breakpoints, widest-first. The Services band collapses earliest because its overlapping desktop layout needs the most room; the feature cards next; generic two-up sections (splits/cards) last. / / Services band: now full-bleed (100% of the page frame), so the old +4rem grid shift and the -7rem title hang are gone (they were what forced a horizontal scrollbar). The orange panel still overlaps the pale intro by -5.5rem — that pulls INWARD, so it can't overflow the right edge. Above ~1410px it's the two-up overlap; below it we still drop the overlap and stack the pale intro above the orange panel. / @media (max-width: 1410px) { .mhome-servicesgrid { grid-template-columns: 1fr; transform: none; } .mhome-servicesgrid.container { width: 100%; } .mhome-servicesintro { min-height: auto; padding: 3rem clamp(1.5rem, 4vw, 4rem); } .mhome-servicestitle { position: static; width: auto; margin: 0 0 2rem; font-size: clamp(3.25rem, 9vw, 6rem); overflow-wrap: anywhere; } .mhome-servicespanel { min-height: auto; margin-left: 0; padding: 3rem clamp(1.5rem, 4vw, 4rem); column-gap: clamp(1.5rem, 4vw, 5rem); row-gap: 2.5rem; } } / Feature band: two side-by-side cards, each an image + offset display title + copy. The inner body needs ~520px per card, which two-up can't give below ~1130px — so stack to one card per row from 1080px down. / @media (max-width: 1080px) { .mhome-featuregrid { grid-template-columns: 1fr; } .mhome-featuregrid.container { width: 100%; } .mhome-featurebody { grid-template-columns: 1fr; min-height: auto; padding: 0 1.5rem 2.5rem; min-width: 0; } .mhome-featurebody h2 { width: auto; margin: -0.45em 0 0; / Fluid title across the whole range below the breakpoint: scales smoothly from ~88px at the top down to a 40px floor on small phones, no per-breakpoint steps. overflow-wrap:anywhere + min-width:0 let a long single word break inside the single-column grid track instead of blowing the panel past the viewport. / font-size: clamp(2.5rem, 9.5vw, 5.5rem); overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; } .mhome-featurecopy { padding-top: 0; } } / Generic two-up sections + the nav overlay collapse on tablet. / @media (max-width: 900px) { .nav-overlayinner { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 6rem; } .mhome-split, .mhome-split--right, .mhome-cardsgrid { grid-template-columns: 1fr; } .mhome-split--right .mhome-splitpane, .mhome-split--right .mhome-splitmedia { order: 0; } .site-footerinner { grid-template-columns: repeat(2, 1fr); } } / Phones: stack the Services list and footer to a single column. / @media (max-width: 700px) { .mhome-servicespanel { grid-template-columns: 1fr; } } @media (max-width: 560px) { .site-footerinner { grid-template-columns: 1fr; } .nav-grouplinks a { font-size: 1.5rem; } .brand-markword { display: none; } } / Homepage: halve content h2 size on small screens (< 768px). Base h2 is 1.45rem; 50% → 0.725rem. Scoped to the homepage body class and its builder content so other pages are unaffected. / @media (max-width: 767.98px) { .is-home .home-blocks .cms-content h2 { font-size: 0.725rem; } } / split / feature media — cover images inside their panes / .mhome-splitmedia img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; } .mhome-feature .mhome-featuremedia img { width: 100%; height: 100%; object-fit: cover; display: block; } .mhome-feature .mhome-featuremedia { padding: 0; } / Back-to-top — brand orange square, fixed bottom-right. Hidden by the `hidden` attr until JS removes it, then faded in via `.is-visible` on scroll. z-index sits below the cookie banner (9990) so the banner stays on top. / .back-to-top { position: fixed; / --btt-lift is set by JS to clear the cookie banner while it's visible (the banner is z-index 9990 and sits over this corner). 0 otherwise. / bottom: calc(1.5rem + var(--btt-lift, 0px)); right: 1.5rem; z-index: 70; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; background: #f04e23; border: 0; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s, bottom .3s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #d8401a; } .back-to-top svg { width: 24px; height: 24px; fill: #fff; } / While the nav overlay is open: lift above it (overlay is z-index 1000) and flip to white-on-orange so it reads against the orange overlay background. / .back-to-top.is-over-nav { z-index: 1001; background: #fff; } .back-to-top.is-over-nav:hover { background: #f3f3f3; } .back-to-top.is-over-nav svg { fill: #f04e23; } @media (max-width: 768px) { .back-to-top { width: 46px; height: 46px; bottom: calc(1rem + var(--btt-lift, 0px)); right: 1rem; } } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .2s ease, visibility .2s; transform: none; } } / ========================================================================== * Portfolio (case studies) redesign — 2026 Figma * Install-local divergence (see UPGRADE-DIVERGENCES.md). Listing = overlay * card grid; detail = big black uppercase title + Figma-styled builder blocks. * ========================================================================== / / Screen-reader-only utility (visually hidden, still in the a11y/SEO tree). / .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } / --- Listing: overlay card grid -------------------------------------------- / / Top spacing comes from the .page-body-heading band (section-hero), same as the blog/articles listing — no extra padding-top needed here. / .portfolio-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin: 1.5rem 0 2rem; } .portfolio-card { position: relative; display: block; overflow: hidden; border-radius: 0; background: #d9d9d9; text-decoration: none; grid-column: span 2; / default = third / square / aspect-ratio: 1 / 1; } .portfolio-card:hover { text-decoration: none; } / Editorial rhythm, repeating every 6 cards: 1 full banner, 2 halves, 3 thirds / .portfolio-grid .portfolio-card:nth-child(6n+1) { grid-column: span 6; aspect-ratio: 1370 / 460; } .portfolio-grid .portfolio-card:nth-child(6n+2), .portfolio-grid .portfolio-card:nth-child(6n+3) { grid-column: span 3; aspect-ratio: 3 / 2; } .portfolio-cardimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .portfolio-card:hover .portfolio-cardimg { transform: scale(1.04); } .portfolio-cardoverlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; background: linear-gradient(to bottom, rgba(0,0,0,0) 38%, rgba(0,0,0,0.78) 100%); } .portfolio-cardtitle { color: #fff; font-weight: 800; font-size: clamp(1.25rem, 1.6vw, 2rem); line-height: 1.1; margin: 0 0 0.9rem; text-shadow: 0 1px 4px rgba(0,0,0,0.45); } .portfolio-cardtitle .draft-badge { vertical-align: middle; margin-left: 0.4rem; } .portfolio-cardview { align-self: flex-start; display: inline-block; border: 2px solid #fff; color: #fff; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 1.4rem; border-radius: 0; box-shadow: 0 4px 4px rgba(0,0,0,0.25); transition: background .2s, color .2s; } .portfolio-card:hover .portfolio-cardview { background: #fff; color: var(--color-primary); } @media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .portfolio-grid .portfolio-card { grid-column: span 1; aspect-ratio: 1 / 1; } .portfolio-grid .portfolio-card:nth-child(6n+1) { grid-column: span 2; aspect-ratio: 16 / 9; } .portfolio-grid .portfolio-card:nth-child(6n+2), .portfolio-grid .portfolio-card:nth-child(6n+3) { grid-column: span 1; aspect-ratio: 1 / 1; } } @media (max-width: 560px) { .portfolio-grid { grid-template-columns: 1fr; } .portfolio-grid .portfolio-card, .portfolio-grid .portfolio-card:nth-child(6n+1), .portfolio-grid .portfolio-card:nth-child(6n+2), .portfolio-grid .portfolio-card:nth-child(6n+3) { grid-column: span 1; aspect-ratio: 4 / 3; } } / ========================================================================== * Case-study DETAIL — bespoke Figma layout (node 12:313) * --color-cs-orange matches the Figma panel (#e95620); --color-cs-bg the light * intro wash (#f0f4f5). Sections are full-bleed bands; content sits in .container. * ========================================================================== / .cs-intro, .cs-outcomes, .cs-actions { --color-cs-orange: #e95620; --color-cs-bg: #f0f4f5; } / Hero is image-only — the title lives in the intro band, so hide any overlay heading/caption/CTA the shared hero partials would render. / .case-study-hero .page-hero-heading, .case-study-hero .static-heroheading, .case-study-hero .static-herocaption, .case-study-hero .static-herocta-wrap, .case-study-hero .slideshow-heroheading, .case-study-hero .slideshow-herocaption { display: none !important; } .case-study-hero .page-hero, .case-study-hero .static-hero { min-height: 460px; } / Optional editor-set overlay heading/caption ON the banner (install-local, re-added 2026-06-10). Rendered by show.blade.php only when the hero "Overlay heading"/"Overlay caption" fields are filled. A gentle scrim keeps the white text legible even when the study's hero tint is 'none'. / .case-study-hero { position: relative; } .cs-hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%); } .cs-hero-overlay .container { width: 100%; } .cs-hero-overlay--left { text-align: left; } .cs-hero-overlay--center { text-align: center; } .cs-hero-overlay--right { text-align: right; } .cs-hero-overlayheading { margin: 0; color: #fff; font-weight: 800; text-transform: uppercase; line-height: 1.05; font-size: clamp(1.8rem, 4vw, 3.25rem); text-shadow: 0 2px 12px rgba(0,0,0,0.55); } .cs-hero-overlaycaption { margin: 0.6rem 0 0; color: #fff; font-size: clamp(1rem, 1.6vw, 1.35rem); text-shadow: 0 1px 6px rgba(0,0,0,0.55); } / Shared text + heading styling inside the detail regions. / .cs-heading { color: var(--color-cs-orange); font-weight: 800; font-size: 1.6rem; text-transform: none; margin: 1.75rem 0 0.85rem; line-height: 1.2; } .cs-text { font-size: 1rem; line-height: 1.8; color: #222; } .cs-text p { margin-bottom: 1rem; } .cs-text p:last-child { margin-bottom: 0; } / Lists + blockquotes inside case-study prose: the bespoke .cs-text wrapper isn't covered by the standard `.page-body .cms-content` rules, so without these, bulleted lists and pull-quotes render flush-left instead of indented. Mirrors the .cms-content treatment (see ~line 282) so case-study body copy matches every other content page. Install-local — UPGRADE-DIVERGENCES.md. / .cs-text ul, .cs-text ol { margin: 0.75rem 0 1rem 1.5rem; padding-left: 1.25rem; } .cs-text li { margin-bottom: 0.4rem; } .cs-text blockquote { border-left: 4px solid var(--color-primary); padding: 0.75rem 1.25rem; margin: 1rem 0; background: var(--color-primary-tint); color: #555; } / --- Intro band: title + overview (left) | orange Sectors/Services (right) --- / .cs-intro { background: linear-gradient(to bottom, #fff 0, #fff 90px, var(--color-cs-bg) 90px); padding: 2.5rem 0 3rem; } .cs-introgrid { display: block; } / Panel variant: orange box floats top-right; the title + body text wrap down its left side, then reclaim the full width once they pass its bottom edge (magazine wrap). flow-root contains the float inside the intro band. / .cs-introgrid--panel { display: flow-root; } .cs-title { color: #111; text-transform: uppercase; font-weight: 900; / When the title is too wide for the column beside the floated orange panel, WRAP it onto the next line within that column — never drop the whole h1 below the box. `overflow-wrap: anywhere` is what makes this work (not break-word): it shrinks the title's min-content width so even a long single word like "TRAVELSYNC" breaks across lines in place, exactly like the homepage display headings. word-break:break-word is a belt-and-braces fallback for older engines. / font-size: clamp(2.5rem, 6.5vw, 5.25rem); line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 1.75rem; overflow-wrap: anywhere; word-break: break-word; hyphens: none; } .cs-title .draft-badge { -webkit-text-fill-color: initial; vertical-align: middle; font-size: 1rem; } / With the orange panel floated right, constrain the title to the column to its LEFT so a long word (e.g. GROUNDWORKS) breaks in place under the line above instead of being pushed below the panel (the float would otherwise shift a too-wide first-word-of-a-line down past the box). overflow-wrap:anywhere then handles the intra-word break. Reset on mobile where the panel stacks (no float). / .cs-introgrid--panel .cs-title { max-width: calc(100% - min(40%, 440px) - 4.25rem); } .cs-panel { float: right; width: 40%; max-width: 440px; margin: 0 0 1.75rem 2.75rem; box-sizing: border-box; background: var(--color-cs-orange); color: #fff; padding: 2.5rem 2.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2rem; } .cs-panelcol h3 { color: #fff; text-transform: uppercase; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.02em; margin: 0 0 1.1rem; } .cs-panelcol ul { list-style: none; margin: 0; padding: 0; } .cs-panelcol li { position: relative; padding-left: 1.1rem; font-size: 1.05rem; line-height: 1.45; margin-bottom: 0.9rem; } .cs-panelcol li:last-child { margin-bottom: 0; } .cs-panelcol li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: #fff; } / Inline quotes in the case-study main column render via the standard builder partial (.builder-quote — honours the editor's Simple / Centred / Card style). They sit in the .cs-intro main column, so give them a little breathing room. / .cs-intromain .builder-block--quote { margin: 1.75rem 0; } / --- Outcomes: screenshots (left) | heading & text (right) --- / .cs-outcomes { padding: 1rem 0 3.5rem; } .cs-outcomesgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 2.5rem; align-items: center; } .cs-outcomesimgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1rem; } .cs-outcomesimgs img { width: 100%; height: 100%; object-fit: cover; display: block; } .cs-outcomestext .cs-heading { margin-top: 0; } / Standalone project-gallery band: shows "Project gallery" images that the testimonial/ Outcomes regions don't (install-local 2026-06-13, see UPGRADE-DIVERGENCES.md). Images grow to fill but cap at the testimonial-image scale so small sources don't over-upscale. / .cs-project-gallery { padding: 0 0 3rem; } .cs-project-gallerygrid { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; } .cs-project-gallerygrid img { flex: 1 1 320px; max-width: 560px; width: 100%; height: auto; display: block; border-radius: 6px; } / --- Actions: visit-website CTA + back --- / .cs-actions { padding: 0 0 4rem; } .cs-actions .container { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } / Optional CTA-block heading + supporting text above the action button. Spans the full row so the button + back link wrap onto the line beneath it. / .cs-actionslead { flex: 1 0 100%; max-width: 720px; } .cs-actionslead .cs-heading { margin-top: 0; } .cs-actionslead p { font-size: 1rem; line-height: 1.7; color: #444; margin: 0; } .cs-cta { display: inline-block; background: var(--color-cs-orange); color: #fff; font-weight: 700; padding: 0.8rem 2rem; text-decoration: none; transition: background .2s; } .cs-cta:hover { background: #cf471a; color: #fff; text-decoration: none; } .cs-back { margin-left: auto; } @media (max-width: 860px) { .cs-intro { background: var(--color-cs-bg); } / Stack: drop the float and flex-order the panel back below the content (it sits first in source for the desktop wrap). / .cs-introgrid--panel { display: flex; flex-direction: column; } .cs-introgrid--panel .cs-intromain { order: 1; } .cs-introgrid--panel .cs-title { max-width: none; } .cs-introgrid--panel .cs-panel { order: 2; float: none; width: auto; max-width: none; margin: 2rem 0 0; } .cs-outcomesgrid { grid-template-columns: 1fr; gap: 1.75rem; } .cs-outcomesimgs { order: 2; } .cs-back { margin-left: 0; } } / ===== Site announcements (banner / popup modal / full-screen takeover) ===== Colours come in as inline --ann-bg / --ann-fg custom properties (sanitised to hex server-side). The root element ships hidden (inline display:none); the partial's JS reveals it, so layout is handed back to these classes. / .cms-announcement, .cms-announcement , .cms-announcement ::before, .cms-announcement ::after { box-sizing: border-box; } /* --- Top banner --- / .cms-announcement--banner { display: block; position: relative; background: var(--ann-bg, #1f2937); color: var(--ann-fg, #fff); z-index: 9970; } .cms-announcement--banner .cms-announcementinner { max-width: 1120px; margin: 0 auto; padding: 0.7rem 3rem 0.7rem 1.25rem; } .cms-announcement--banner-full .cms-announcementinner { max-width: none; } .cms-announcement--banner .cms-announcementcontent { font-size: 0.95rem; line-height: 1.5; } .cms-announcement--banner .cms-announcementcontent p { margin: 0; display: inline; } .cms-announcement--banner .cms-announcementtitle { margin-right: 0.45rem; } .cms-announcement--banner .cms-announcementcontent a { color: inherit; text-decoration: underline; } / A banner is a thin bar — images would break it, so they're not shown in this style (kept in the content, so they reappear if switched to popup/full-screen). !important so it always beats the img-left/right/centre alignment rules, which have equal specificity and are declared later in this file. / .cms-announcement--banner .cms-announcementcontent img { display: none !important; } .cms-announcement--banner .cms-announcementclose { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); } / Banner overflow: scroll (ticker). Wrap is the default and needs no extra rules. / .cms-announcement--overflow-scroll .cms-announcementinner { overflow: hidden; } .cms-announcement--overflow-scroll .cms-announcementcontent { display: inline-block; white-space: nowrap; padding-left: 100%; animation: cms-ann-marquee var(--ann-scroll, 18s) linear infinite; } .cms-announcement--overflow-scroll .cms-announcementcontent p { display: inline; } .cms-announcement--overflow-scroll .cms-announcementinner:hover .cms-announcementcontent { animation-play-state: paused; } @keyframes cms-ann-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .cms-announcement--overflow-scroll .cms-announcementcontent { animation: none; padding-left: 0; white-space: normal; display: block; } .cms-announcement--overflow-scroll .cms-announcementcontent p { display: inline; } } / --- Shared overlay (modal + full-screen) --- / .cms-announcement--modal, .cms-announcement--fullscreen { position: fixed; inset: 0; z-index: 9980; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .cms-announcement--modal { background: rgba(0, 0, 0, 0.55); } .cms-announcement--fullscreen { background: var(--ann-bg, #1f2937); color: var(--ann-fg, #fff); } .cms-announcementbox { position: relative; max-width: 560px; width: 100%; border-radius: 10px; padding: 2rem 2.2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .cms-announcement--modal .cms-announcementbox { background: var(--ann-bg, #1f2937); color: var(--ann-fg, #fff); } .cms-announcement--fullscreen .cms-announcementbox { background: transparent; box-shadow: none; max-width: 720px; text-align: center; padding: 1rem; } .cms-announcement--modal .cms-announcementtitle, .cms-announcement--fullscreen .cms-announcementtitle { margin: 0 0 0.8rem; font-size: 1.6rem; line-height: 1.2; } .cms-announcement--fullscreen .cms-announcementtitle { font-size: clamp(1.8rem, 5vw, 2.6rem); } .cms-announcementcontent a { color: inherit; text-decoration: underline; } .cms-announcementcontent p { margin: 0 0 0.6rem; } .cms-announcementcontent p:last-child { margin-bottom: 0; } / Title + all body text use the chosen text colour. Override the global heading and link colours (h2 etc. default to the brand colour) so the whole announcement reads as one colour on its background. / .cms-announcementtitle, .cms-announcementcontent, .cms-announcementcontent :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, strong, em, span, a, blockquote) { color: inherit; } / Rich-text image alignment (TinyMCE "Class" dropdown: img-left / img-right / img-centre). The page-body equivalents are scoped to .page-body .cms-content, which the announcement isn't inside, so mirror them here. / .cms-announcementcontent img { margin: 0.6rem 0; border-radius: 4px; } .cms-announcementcontent img.img-left { float: left; margin: 0 1.25em 0.75em 0; } .cms-announcementcontent img.img-right { float: right; margin: 0 0 0.75em 1.25em; } .cms-announcementcontent img.img-centre { display: block; margin-left: auto; margin-right: auto; } .cms-announcementcontent::after { content: ''; display: table; clear: both; } .cms-announcement--modal .cms-announcementclose { position: absolute; top: 0.5rem; right: 0.6rem; } .cms-announcement--fullscreen .cms-announcementclose { position: fixed; top: 1rem; right: 1.2rem; } / --- Close button (shared) --- / .cms-announcementclose { appearance: none; background: transparent; border: 0; cursor: pointer; color: inherit; opacity: 0.8; font-size: 1.6rem; line-height: 1; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; } .cms-announcementclose:hover { opacity: 1; background: rgba(127, 127, 127, 0.22); } @media (max-width: 600px) { .cms-announcement--banner .cms-announcementcontent { font-size: 0.9rem; } .cms-announcementbox { padding: 1.5rem 1.4rem; } } / ============================================================ Shop (SHOP P3) — storefront catalogue Token-first: cards/buttons inherit the existing Theme Studio kit (--card-, buttons); shop-specific hooks carry their own --shop- custom properties with hard-coded fallbacks so an un-themed install renders exactly these values. ============================================================ / .shop-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 0 0 2rem; } .shop-category-card { text-decoration: none; display: flex; flex-direction: column; overflow: hidden; } .shop-category-cardimage img { width: 100%; height: 140px; object-fit: cover; display: block; } .shop-category-cardname { display: block; font-weight: 700; color: var(--card-title, #333); } .shop-category-cardcount { display: block; font-size: 0.85rem; color: var(--card-meta, #777); margin-top: 0.25rem; } .shop-product-grid { margin-top: 1rem; } .shop-product-card { display: flex; flex-direction: column; overflow: hidden; } .shop-product-cardimage { display: block; } .shop-product-cardimage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .shop-product-cardtitle a { color: var(--card-title, #333); text-decoration: none; } .shop-product-cardmeta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.35rem 0 0.6rem; } .shop-product-cardexcerpt { font-size: 0.92rem; color: var(--card-text, #555); } .shop-price { font-weight: 700; color: var(--shop-price-color, var(--card-title, #333)); } .shop-pricewas { color: var(--card-meta, #888); font-weight: 400; margin-right: 0.4rem; } .shop-pricenow { color: var(--shop-sale-color, #c0392b); } .shop-price--poa { font-weight: 600; font-style: italic; } .shop-stock-badge { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--shop-stock-out-bg, #fdecea); color: var(--shop-stock-out-color, #c0392b); } .shop-stock-badge--backorder { background: var(--shop-stock-backorder-bg, #fef5e7); color: var(--shop-stock-backorder-color, #9a6a12); } .shop-product-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; margin-bottom: 2rem; } .shop-product-gallerymain img { width: 100%; border-radius: var(--card-radius, 8px); display: block; } .shop-product-gallerythumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 0.75rem; } .shop-product-gallerythumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--card-radius, 6px); display: block; } .shop-product-infoprice { font-size: 1.5rem; margin-bottom: 0.75rem; } .shop-product-infosummary { margin-bottom: 1.25rem; } .shop-product-infometa { list-style: none; padding: 0; margin: 1.25rem 0 0; font-size: 0.92rem; color: var(--card-meta, #666); } .shop-product-infometa li { margin-bottom: 0.35rem; } .shop-variant-label { display: block; font-weight: 700; margin-bottom: 0.35rem; } .shop-variant-select { width: 100%; max-width: 420px; padding: 0.55rem 0.75rem; border: 1px solid var(--card-border, #ddd); border-radius: 6px; font-size: 1rem; background: #fff; margin-bottom: 1rem; } .shop-variant-select option:disabled { color: #aaa; } .shop-category-intro { max-width: 60ch; margin-bottom: 1.5rem; } @media (max-width: 900px) { .shop-category-grid { grid-template-columns: repeat(2, 1fr); } .shop-product-layout { grid-template-columns: 1fr; gap: 1.5rem; } } / ── Shop basket (SHOP P4a) ── / .shop-basket-bar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .shop-add-to-basket { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; } .shop-add-to-basket .shop-cart-qty { width: 5rem; } .shop-add-feedback a { font-weight: 700; } .shop-cart-flash { background: var(--shop-flash-bg, #eef7ea); border: 1px solid var(--shop-flash-border, #cfe6c6); padding: 0.6rem 1rem; border-radius: 6px; } .shop-cart-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } .shop-cart-table th { text-align: left; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--card-meta, #777); padding: 0.5rem 0.6rem; border-bottom: 2px solid var(--card-border, #ddd); } .shop-cart-table td { padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--card-border, #e5e5e5); vertical-align: middle; } .shop-cart-item { display: flex; align-items: center; gap: 0.9rem; } .shop-cart-itemimage img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; } .shop-cart-itemvariant { font-size: 0.85rem; color: var(--card-meta, #777); } .shop-cart-qty { width: 4.5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--card-border, #ccc); border-radius: 6px; } .shop-cart-remove { background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--card-meta, #999); } .shop-cart-remove:hover { color: #c0392b; } .shop-cart-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .shop-cart-totals { max-width: 380px; margin-left: auto; background: var(--card-bg, #fafafa); border: 1px solid var(--card-border, #e5e5e5); border-radius: var(--card-radius, 8px); padding: 1.25rem; } .shop-cart-totals > div { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .shop-cart-totalsgrand { font-weight: 700; font-size: 1.15rem; border-top: 1px solid var(--card-border, #e5e5e5); padding-top: 0.6rem; } .shop-cart-totalsnote { font-size: 0.82rem; color: var(--card-meta, #888); } .shop-cart-totals .btn { width: 100%; margin-top: 0.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 700px) { .shop-cart-table thead { display: none; } .shop-cart-table td { display: block; border: none; padding: 0.25rem 0; } .shop-cart-table tr { display: block; border-bottom: 1px solid var(--card-border, #e5e5e5); padding: 0.75rem 0; } } / ── Shop checkout (SHOP P4b) ── / .shop-checkout-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .shop-checkout-form h2 { font-size: 1.15rem; margin: 1.75rem 0 0.75rem; } .shop-checkout-form h2:first-child { margin-top: 0; } .shop-checkout-note { font-size: 0.85rem; color: var(--card-meta, #777); margin: 0.35rem 0 0.75rem; } .shop-checkout-errors { margin-bottom: 1.5rem; } .form-group--checkbox label { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; } .form-group--checkbox input { margin-top: 0.25rem; } .shop-billing-details { margin: 0.5rem 0 1rem; } .shop-billing-details summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; } .shop-payment-method { border: 1px solid var(--card-border, #ddd); border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem; } .shop-age-gate { background: rgba(240, 173, 78, 0.12); border: 1px solid rgba(240, 173, 78, 0.5); border-radius: 8px; padding: 0.9rem 1rem; } .shop-place-order { width: 100%; margin-top: 1rem; } .shop-checkout-summary { background: var(--card-bg, #fafafa); border: 1px solid var(--card-border, #e5e5e5); border-radius: var(--card-radius, 8px); padding: 1.25rem; } .shop-checkout-summary h2 { margin-top: 0; font-size: 1.1rem; } .shop-summary-lines { list-style: none; margin: 0 0 1rem; padding: 0; } .shop-summary-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--card-border, #eee); font-size: 0.92rem; } .shop-checkout-summary .shop-cart-totals { max-width: none; margin: 0; padding: 0; border: none; background: transparent; } @media (max-width: 900px) { .shop-checkout-layout { grid-template-columns: 1fr; } .shop-checkout-summary { order: -1; } } / ── Shop coupons (SHOP P6B) ── / .shop-cart-coupon { margin: 0 0 1rem; } .shop-cart-coupon form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .shop-cart-coupon input[type="text"] { padding: 0.5rem 0.75rem; border: 1px solid var(--card-border, #ccc); border-radius: 6px; max-width: 220px; } / ── Quantity discounts (SHOP P6F) ── / .shop-tier-list { list-style: none; margin: 0 0 1rem; padding: 0.5rem 0.9rem; background: var(--card-bg, #fafafa); border: 1px dashed var(--card-border, #ddd); border-radius: 8px; font-size: 0.9rem; } .shop-tier-list li { padding: 0.15rem 0; } / ── Shop quick wins: quick add, related strip, checkout policy links ── / .shop-product-cardactions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .shop-quick-add { white-space: nowrap; } .shop-related { margin-top: 2.5rem; } .shop-related h2 { font-size: 1.3rem; margin-bottom: 1rem; } .shop-checkout-policies { margin-top: 0.75rem; font-size: 0.85rem; text-align: center; color: var(--card-meta, #777); } / ── Shop customer accounts (SHOP P4A) ── / .shop-account-narrow { max-width: 480px; } .shop-account-form .form-group { margin-bottom: 1rem; } .shop-account-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; } .shop-account-form input { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--card-border, #ccc); border-radius: 6px; } .shop-account-hint { font-weight: 400; font-size: 0.82rem; color: var(--card-meta, #777); } .shop-account-links { margin-top: 1.25rem; font-size: 0.9rem; } .shop-account-flash { background: var(--card-bg, #eef7ea); border: 1px solid var(--card-border, #cfe6c6); border-radius: 8px; padding: 0.75rem 1rem; } .shop-account-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--card-meta, #777); } .shop-account-shipment { background: var(--card-bg, #fafafa); border: 1px solid var(--card-border, #e5e5e5); border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 0.75rem; font-size: 0.92rem; } / ── Shop account self-serve (v14.6): sub-nav, address book, order actions ── / .shop-account-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } .shop-account-nav a { text-decoration: none; font-weight: 600; color: var(--link, #2a6e2a); padding-bottom: 0.2rem; border-bottom: 2px solid transparent; } .shop-account-nav a.is-active { border-bottom-color: currentColor; } .shop-account-check { font-weight: 400 !important; display: flex; align-items: center; gap: 0.5rem; } .shop-account-check input[type="checkbox"] { width: auto !important; } .shop-order-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0 1.5rem; } .shop-address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; } .shop-address-card { border: 1px solid var(--card-border, #e5e5e5); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; background: var(--card-bg, #fff); } .shop-address-cardbody { font-size: 0.92rem; line-height: 1.45; } .shop-address-cardactions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; } .shop-address-cardactions form { margin: 0; } .shop-address-default { display: inline-block; background: var(--card-accent, #8cc14d); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 4px; margin-bottom: 0.4rem; } .shop-address-cardactions details { width: 100%; } .shop-address-cardactions summary { display: inline-block; list-style: none; cursor: pointer; } .shop-address-cardactions summary::-webkit-details-marker { display: none; } .shop-address-form { margin-top: 0.75rem; } .btn-small { padding: 0.3rem 0.6rem !important; font-size: 0.82rem !important; } / ── Shop ops essentials (v14.1): holiday banner, free-delivery nudge, dispatch time ── / .shop-holiday-banner { background: rgba(240, 173, 78, 0.14); border: 1px solid rgba(240, 173, 78, 0.55); border-radius: 8px; padding: 0.8rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.95rem; } .shop-free-delivery-nudge { background: var(--card-bg, #eef7ea); border: 1px dashed var(--card-border, #8cc14d); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.92rem; max-width: 380px; margin-left: auto; } .shop-dispatch-time { font-size: 0.88rem; color: var(--card-meta, #777); margin-top: 0.5rem; } / ── Shop growth batch (v14.2): back-in-stock, cross-sell strips ── / .shop-stock-alert { margin-top: 1rem; padding: 0.9rem 1rem; background: var(--card-bg, #fafafa); border: 1px solid var(--card-border, #e5e5e5); border-radius: 8px; max-width: 420px; } .shop-stock-alertrow { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } .shop-stock-alertrow input { flex: 1; min-width: 180px; padding: 0.5rem 0.75rem; border: 1px solid var(--card-border, #ccc); border-radius: 6px; } .shop-stock-alertfeedback { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--card-meta, #777); } .shop-cross-sell { margin-top: 2rem; } .shop-cross-sell h2 { font-size: 1.2rem; margin-bottom: 0.9rem; } .shop-recent-strip { display: flex; gap: 1rem; flex-wrap: wrap; } .shop-recent-item { display: flex; flex-direction: column; gap: 0.35rem; width: 130px; text-decoration: none; font-size: 0.85rem; } .shop-recent-item img { width: 130px; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid var(--card-border, #e5e5e5); } / ── Shop search + facets (SHOP-SEARCH, v14.3) ── / .shop-filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; padding: 0.9rem 1rem; background: var(--card-bg, #fafafa); border: 1px solid var(--card-border, #e5e5e5); border-radius: 8px; } .shop-filter-bar input[type="search"] { flex: 2; min-width: 170px; } .shop-filter-bar input, .shop-filter-bar select { padding: 0.45rem 0.6rem; border: 1px solid var(--card-border, #ccc); border-radius: 6px; } .shop-filter-bar input[type="number"] { width: 90px; } .shop-filter-barstock { display: flex; gap: 0.35rem; align-items: center; font-size: 0.9rem; white-space: nowrap; } / ── Native reviews (SHOP-REVIEWS, v14.3) ── / .shop-reviews { margin-top: 2.5rem; } .shop-reviews h2 { font-size: 1.3rem; margin-bottom: 1rem; } .shop-review { border-bottom: 1px solid var(--card-border, #eee); padding: 0.9rem 0; } .shop-reviewhead { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; font-size: 0.92rem; } .shop-reviewstars { color: #e8a33d; letter-spacing: 2px; } .shop-reviewverified { color: #15803d; font-size: 0.82rem; font-weight: 700; } .shop-reviewdate { color: var(--card-meta, #999); font-size: 0.82rem; } .shop-reviewtitle { font-weight: 700; margin: 0.35rem 0 0.15rem; } .shop-review__body { margin: 0.25rem 0 0; } .shop-review-form-wrap { margin-top: 1.25rem; } .shop-review-form-wrap summary { display: inline-block; cursor: pointer; list-style: none; } .shop-review-form { margin-top: 1rem; max-width: 480px; } .shop-review-form .form-group { margin-bottom: 0.9rem; } .shop-review-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; } .shop-review-form input, .shop-review-form select, .shop-review-form textarea { width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--card-border, #ccc); border-radius: 6px; } .shop-review-feedback { display: block; margin-top: 0.5rem; font-size: 0.88rem; color: var(--card-meta, #777); } / ── Homepage video hero: white pre-paint fill (install-local — see UPGRADE-DIVERGENCES.md) ── The homepage banner is a video with no poster. The core slideshow-hero partial fills .slideshow-hero--video with #000, so the area paints black for the split second before the video's first frame decodes. Repaint it white to match the page background. Two-class specificity (and .is-home scope) beats the partial's inline `.slideshow-hero--video{background:#000}`, which sits later in the . */ .is-home .slideshow-hero.slideshow-hero--video { background: #fff; }