/* Voltis mirror - site-wide fixes on top of voltis-main.css (base theme bundle) */ @import url("./vl-liquid-btn.css"); @import url("./vl-year-label-fill.css"); /* Header nav from site-nav-mount.js: avoid partial list before Support/Voltis Core render */ html.js header .header__container > .navigation .navigation__list:not([data-vl-nav-mounted]), html.js .header__navigation-mobile .navigation .navigation__list:not([data-vl-nav-mounted]) { visibility: hidden; } /* * Sticky site header: reinforce Graphene (some layout/CSS interactions break * position:sticky so the bar stopped pinning while scrolling). * `js` is on documentElement in head scripts; keep body.js for legacy paths. * * Production: this file must be deployed with pages that include * `` (or equivalent) * in , or these rules never activate. */ html.js .header, body.js .header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 420 !important; } /* * Lenis smooth-scroll (`html.lenis`): root overflow / scrollport changes can stop the nav bar’s * `position:sticky` from pinning to the viewport. Use fixed positioning + a flow offset instead. * `--vl-site-header-offset` is set from the rendered header height in white-scroll-middle.js. */ html.lenis .header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; box-sizing: border-box !important; z-index: 420 !important; } html.lenis body.admin-bar .header { top: 32px !important; } html.lenis body { padding-top: var(--vl-site-header-offset, 5.75rem); } html.lenis body.admin-bar { padding-top: calc(var(--vl-site-header-offset, 5.75rem) + 32px); } /* * Theme bundle sets pointer-events:none on the outer .header (overlay pattern). * Without re-enabling hits on the real chrome, links/menus can feel "dead" and * some browsers handle sticky/fixed stacking oddly next to full-width layers. */ html.js .header .header__container, html.js .header .header__button { pointer-events: auto !important; } /* Brand link: ensure taps register (some themes / children steal hits). */ html.js .header .header__logo { position: relative; z-index: 3; pointer-events: auto !important; cursor: pointer; display: inline-block; text-decoration: none; } html.js .header .header__logo img { pointer-events: none; display: block; } /* Closed mobile drawer must never block taps across the page. */ html.js .header .header__navigation-mobile { pointer-events: none !important; } html.js .header.header--active .header__navigation-mobile { pointer-events: auto !important; } /* * Graphene `vd` hides the bar with GSAP yPercent on `.header__container`. Inline transforms * beat a non-!important stylesheet, so the ScrollTrigger-kill script can still "lose" after * refresh/Lenis. `!important` blocks that translation; mobile menu uses `.header__button` spans, * not this transform. */ html.js .header .header__container { transform: none !important; } /* Floating back-to-top (vl-back-to-top.js) */ .vl-back-to-top { position: fixed; right: clamp(0.75rem, 3vw, 1.25rem); bottom: clamp(0.75rem, 3vw, 1.25rem); z-index: 500; width: 2.75rem; height: 2.75rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); transition: opacity 0.18s ease, transform 0.18s ease; } .vl-back-to-top[hidden] { display: none !important; } .vl-back-to-top:hover, .vl-back-to-top:focus-visible { transform: translateY(-1px); opacity: 0.95; outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 2px; } /* Global edge start: content and horizontal spacing share same origin */ :root { --edge-start: clamp(1rem, 4vw, 1.5rem); --space-grid-padding: var(--edge-start) !important; /* Matches rhythm above tagline (“About Voltis Labs” sits after this divider block). */ --vl-home-about-rule-pad: clamp(1.5rem, 3.8vw, 2.4rem); /* PONY: surface gradient for *tiles* where the thumb is a small icon; ship banner PNG is shown as-is. */ --vl-pony-surface-gradient: radial-gradient(ellipse 92% 78% at 48% 28%, rgba(255, 128, 148, 0.38) 0%, transparent 58%), radial-gradient(ellipse 70% 50% at 92% 12%, rgba(255, 60, 90, 0.2) 0%, transparent 45%), linear-gradient( 162deg, #0d0103 0%, #1f0309 14%, #3c0712 30%, #5c0d1f 48%, #851420 64%, #ae1828 80%, #d61f32 92%, #ff2848 100% ); --vl-pony-logo-filter: sepia(1) saturate(2.85) hue-rotate(4deg) brightness(1.1) contrast(1.06) drop-shadow(0 1px 2px rgba(28, 0, 10, 0.95)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.38)) drop-shadow(0 20px 36px rgba(0, 0, 0, 0.28)); --vl-pony-logo-filter-deep: sepia(1) saturate(2.9) hue-rotate(4deg) brightness(1.12) contrast(1.08) drop-shadow(0 1px 1px rgba(15, 0, 6, 1)) drop-shadow(0 3px 6px rgba(40, 0, 12, 0.65)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 18px 32px rgba(0, 0, 0, 0.42)) drop-shadow(0 32px 56px rgba(0, 0, 0, 0.32)); } /* Tile uses final `ponylogo.png` (full icon art from design); sepia stack was for a legacy flat glyph only. */ img[src*="ponylogo.png"] { filter: none; } /* Portfolio / archive: red plate behind PONY thumb (fills transparency / letterbox; opaque PNG still looks correct). */ .work:has(.work__link[href="/product-pony"]) .work__thumbnail .media { background: var(--vl-pony-surface-gradient); } .archive-row:has(.archive-row__link[href="/product-pony"]) .archive-row__image { background: var(--vl-pony-surface-gradient); } /* Body text baseline: left aligned site-wide */ body p, body li, body .p1, body .p2, body .section-wysiwyg__container > .text h2, body .section-title .p2 { text-align: left !important; } /* Centered text column override: true page-center placement, left-aligned copy */ :root { --body-text-max: 58rem; } /* h2 outside `.text` (heroes, cards, etc.): semibold */ body h2 { font-weight: 600 !important; } /* `.text` section headings: match About "Looking ahead" (inherit body copy size + semibold + rhythm). Exclude home hero (`.vl-home-hero__copy.text h2`) - it keeps `.vl-home-hero__headline` sizing. Exclude connection banner (`h2.vl-home-connection-banner__title`) - it keeps hero-scale display type. */ body .text h2:not(.vl-home-hero__headline):not(.vl-home-connection-banner__title) { font-size: inherit !important; font-weight: 600 !important; line-height: inherit !important; margin-top: clamp(1.75rem, 3vw, 2.5rem) !important; margin-bottom: 0.75em !important; /* Graphene `.text h2` adds a top rule on every heading - strip in body copy. */ border-top: none !important; padding-top: 0 !important; } body .text h2:first-child { margin-top: 0 !important; } body .text h3 { font-weight: 600 !important; } /* * Prose / article body: no Graphene heading rules or pseudo-element dividers. * Optional top rule only on explicit `.section-title` band headings (rare). */ body .section-wysiwyg__container h2::after, body .section-wysiwyg__container h3::after, body .vl-inner h2::after, body .vl-inner h3::after, body .vl-blog-article__prose h2::after, body .vl-blog-article__prose h3::after, body .vl-product-voltis-prose-inner h2::after, body .vl-product-voltis-prose-inner h3::after, main .vl-product-detail-prose-stack h2::after, main .vl-product-detail-prose-stack h3::after { content: none !important; display: none !important; } body .section-title .text h2 { border-top: 1px solid var(--color-separator, rgba(255, 255, 255, 0.12)) !important; padding-top: 1.25rem !important; } body .section-table__item { border-top: none !important; } body .section-table__item:first-child { padding-top: 0 !important; } body .vl-inner__cta { border-top: none !important; padding-top: 0 !important; } body .section-wysiwyg__container > .text, body .section-title .text, body .section-columns .section-columns__text, body .section-table .section-table__item, body .vl-products-pullquote, body .vl-inner, body .vl-blog-article__header, body .vl-blog-article__prose { width: 100% !important; max-width: var(--body-text-max) !important; margin-left: auto !important; margin-right: auto !important; margin-inline: auto !important; justify-self: center !important; } body .section-table .section-table__title, body .section-table .section-table__text { width: 100% !important; max-width: var(--body-text-max) !important; margin-left: auto !important; margin-right: auto !important; } body .section-wysiwyg__container > .text p, body .section-wysiwyg__container > .text .p1, body .section-wysiwyg__container > .text .p2, body .section-wysiwyg__container > .text h2, body .section-title .text .p2, body .section-table .section-table__title, body .section-table .section-table__text { text-align: left !important; } /* Grapheine sets `text-indent` on `.section-title .text` - that indents only line 1 and makes wrapped paragraphs look staggered */ body .section-title .text { text-indent: 0 !important; } /* Explicit products-style format for Businesses + About pages */ body.page-id-enterprise .vl-products-unified-copy, body.page-id-17031 .vl-products-unified-copy { width: 100% !important; max-width: var(--body-text-max, 58rem) !important; margin-left: auto !important; margin-right: auto !important; margin-inline: auto !important; justify-self: center !important; text-align: left !important; } body.page-id-enterprise .vl-products-unified-copy h1, body.page-id-enterprise .vl-products-unified-copy h2, body.page-id-enterprise .vl-products-unified-copy h3, body.page-id-enterprise .vl-products-unified-copy p, body.page-id-enterprise .vl-products-unified-copy .p1, body.page-id-enterprise .vl-products-unified-copy .p2, body.page-id-17031 .vl-products-unified-copy h1, body.page-id-17031 .vl-products-unified-copy h2, body.page-id-17031 .vl-products-unified-copy h3, body.page-id-17031 .vl-products-unified-copy p, body.page-id-17031 .vl-products-unified-copy .p1, body.page-id-17031 .vl-products-unified-copy .p2 { text-align: left !important; } /* * Businesses: Graphene draws `.section-wysiwyg__container h2::after` with `width: 100vw` and * `right: 100%` inside `overflow: hidden` containers. When the first heading in a block is an * h2 (e.g. “Our licensing approach”), the line no longer lines up with the centered prose column. * Span the divider only across the `.text` column like a normal inset rule. */ body.page-id-enterprise .section-wysiwyg__container > .text.vl-products-unified-copy h2::after { right: auto !important; left: 0 !important; width: 100% !important; max-width: 100% !important; } /* About page (about-us.html): same unified centered column + left-aligned copy */ body.page-id-17031 .section-wysiwyg__container > .text, body.page-id-17031 .section-table .section-table__title, body.page-id-17031 .section-table .section-table__text, body.page-id-17031 .section-columns .section-columns__text, body.page-id-17031 .section-title .text, body.page-id-17031 .section-table-index .section-table-index__text { width: 100% !important; max-width: var(--body-text-max, 58rem) !important; margin-left: auto !important; margin-right: auto !important; margin-inline: auto !important; justify-self: center !important; text-align: left !important; } body.page-id-17031 .section-wysiwyg__container > .text h1, body.page-id-17031 .section-wysiwyg__container > .text h2, body.page-id-17031 .section-wysiwyg__container > .text h3, body.page-id-17031 .section-wysiwyg__container > .text p, body.page-id-17031 .section-wysiwyg__container > .text .p1, body.page-id-17031 .section-wysiwyg__container > .text .p2, body.page-id-17031 .section-table .section-table__title, body.page-id-17031 .section-table .section-table__text, body.page-id-17031 .section-columns .section-columns__text, body.page-id-17031 .section-table-index .section-table-index__text { text-align: left !important; } /* Reveal .media images when theme JS does not flip --active (static file:// loads) */ body.switch .media::after { opacity: 0 !important; pointer-events: none !important; } body.switch .media img, body.switch .media video { opacity: 1; position: relative; z-index: 1; } /* ----- Home: Voltis hero banner ----- */ body.home .vl-home-hero { margin-top: clamp(1rem, 3vw, 2rem); padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(1.25rem, 3vw, 2.1rem); row-gap: clamp(1rem, 2.4vw, 1.6rem); align-items: start; } /* Home: keep new Grapheine hero on top, then old hero section below (no overlap) */ body.home .header-homepage { padding-top: clamp(5.25rem, 11vw, 8rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); } body.home .header-homepage__title { margin-bottom: clamp(0.25rem, 1.6vw, 1.5rem); /* Match inner-page hero (e.g. businesses .hero__description): theme uses 6.25rem / 100% lh */ font-size: clamp(2rem, 11vw, 6.25rem) !important; line-height: 1 !important; } /* Theme pins span min-height to old 5rem title size; tie to actual font-size */ body.home .header-homepage__title > span { min-height: calc(1em * 1.15) !important; } /* Home static mode: disable Grapheine hero/sector animations completely */ body.home .page-template-homepage-static .header-homepage__title { opacity: 1 !important; font-weight: 400 !important; } body.home .page-template-homepage-static .header-homepage__hero { transform: none !important; transition: none !important; animation: none !important; } body.home .page-template-homepage-static .header-homepage__hero .media { overflow: hidden; transform: none !important; transition: none !important; animation: none !important; } body.home .page-template-homepage-static .header-homepage__hero .media.vl-home-hero-media { position: relative; } /* Homepage showreel controls - top-right of video, no pill chrome */ body.home .vl-home-hero-video-controls { position: absolute; right: clamp(0.45rem, 1.8vw, 0.85rem); top: clamp(0.45rem, 1.8vw, 0.85rem); bottom: auto; z-index: 3; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 0.65rem; max-width: calc(100% - 0.75rem); padding: 0; margin: 0; background: none; border: none; box-shadow: none; box-sizing: border-box; } body.home .vl-home-hero-video-controls__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0; border-radius: 50%; border: none; background: transparent; color: rgba(255, 255, 255, 0.92); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.home .vl-home-hero-video-controls__btn:hover { color: #fff; } body.home .vl-home-hero-video-controls__btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent, #ff2b2b) 70%, #fff); outline-offset: 2px; } body.home .vl-home-hero-video-controls__btn--mute { width: 2.25rem; } body.home .vl-home-hero-video-controls__icon { display: flex; align-items: center; justify-content: center; } body.home .vl-home-hero-video-controls__btn--mute[aria-pressed="true"] .vl-home-hero-video-controls__icon--on, body.home .vl-home-hero-video-controls__btn--mute:not([aria-pressed="true"]) .vl-home-hero-video-controls__icon--off { display: none; } body.home .vl-home-hero-video-controls__btn--mute[aria-pressed="true"] .vl-home-hero-video-controls__icon--off, body.home .vl-home-hero-video-controls__btn--mute:not([aria-pressed="true"]) .vl-home-hero-video-controls__icon--on { display: flex; } /* Adapted from Uiverse.io by catraco - play / pause toggle (homepage hero showreel only). */ body.home .vl-home-hero-media .vl-home-hero-catraco-transport { --color: rgba(255, 255, 255, 0.92); --size: 30px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; font-size: var(--size); user-select: none; color: var(--color); width: var(--size); height: var(--size); flex-shrink: 0; } body.home .vl-home-hero-media .vl-home-hero-catraco-transport:focus-within { outline: 2px solid color-mix(in srgb, var(--color-accent, #ff2b2b) 70%, #fff); outline-offset: 2px; border-radius: 4px; } body.home .vl-home-hero-media .vl-home-hero-catraco-transport__play { position: absolute; display: flex; align-items: center; justify-content: center; animation: vl-home-hero-catraco-fill 0.5s; } body.home .vl-home-hero-media .vl-home-hero-catraco-transport__pause { position: absolute; display: none; align-items: center; justify-content: center; animation: vl-home-hero-catraco-fill 0.5s; } body.home .vl-home-hero-media .vl-home-hero-catraco-transport input:checked ~ .vl-home-hero-catraco-transport__play { display: none; } body.home .vl-home-hero-media .vl-home-hero-catraco-transport input:checked ~ .vl-home-hero-catraco-transport__pause { display: flex; } body.home .vl-home-hero-media .vl-home-hero-catraco-transport input { position: absolute; opacity: 0; cursor: pointer; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 1; } @keyframes vl-home-hero-catraco-fill { 0% { transform: rotate(-180deg) scale(0); opacity: 0; } 50% { transform: rotate(-10deg) scale(1.2); } } /* Adapted from Uiverse.io by Galahhad - homepage hero showreel only (not theme `.slider` carousels). */ body.home .vl-home-hero-media .vl-home-hero-uiverse-slider { --slider-width: min(7rem, 32vw); --slider-height: 6px; --slider-bg: rgb(82, 82, 82); --slider-border-radius: 999px; --level-color: #fff; --level-transition-duration: 0.1s; --icon-margin: 15px; --icon-color: rgba(255, 255, 255, 0.88); --icon-size: 25px; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider { cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex: 0 1 auto; min-width: 0; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider .volume { display: inline-block; vertical-align: top; margin-right: var(--icon-margin); color: var(--icon-color); width: var(--icon-size); height: auto; flex-shrink: 0; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider .volume svg { display: block; width: 100%; height: auto; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider .level { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--slider-width); height: var(--slider-height); background: var(--slider-bg); overflow: hidden; border-radius: var(--slider-border-radius); -webkit-transition: height var(--level-transition-duration); -o-transition: height var(--level-transition-duration); transition: height var(--level-transition-duration); cursor: inherit; margin: 0; padding: 0; border: none; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider .level::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; -webkit-box-shadow: -200px 0 0 200px var(--level-color); box-shadow: -200px 0 0 200px var(--level-color); } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider .level::-moz-range-track { height: var(--slider-height); background: var(--slider-bg); border-radius: var(--slider-border-radius); border: none; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider .level::-moz-range-progress { height: var(--slider-height); background: var(--level-color); border-radius: var(--slider-border-radius) 0 0 var(--slider-border-radius); border: none; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider .level::-moz-range-thumb { width: 0; height: 0; border: 0; background: transparent; box-shadow: none; } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider:hover .level { height: calc(var(--slider-height) * 2); } body.home .vl-home-hero-media .vl-home-hero-uiverse-slider:hover .level::-moz-range-track, body.home .vl-home-hero-media .vl-home-hero-uiverse-slider:hover .level::-moz-range-progress { height: calc(var(--slider-height) * 2); } /* Scroll-linked shrink: scale the video only, centered so it stays in the hero frame */ body.home .page-template-homepage-static .header-homepage__hero .media video { display: block; width: 100%; height: auto; object-fit: cover; object-position: center center; transform: scale(var(--vl-hero-video-scale, 1)); transform-origin: center center; will-change: transform; } @media (prefers-reduced-motion: reduce) { body.home .page-template-homepage-static .header-homepage__hero .media video { transform: none !important; } } /* Enterprise hero: text block grows with typing (no fixed viewport hero shell) */ body.page-id-enterprise header.hero { min-height: 0 !important; height: auto !important; } body.page-id-enterprise .hero__content { min-height: 0; } body.page-id-enterprise .hero__description.vl-typing-hero { font-size: clamp(1.85rem, 7.5vw, 6.25rem); line-height: 1.05; word-break: break-word; } body.page-id-enterprise .vl-typing-hero__line-wrap { display: inline; white-space: pre-wrap; } body.page-id-enterprise .vl-typing-hero__cursor { display: inline-block; width: 0.075em; min-width: 3px; height: 0.85em; margin-left: 0.05em; vertical-align: baseline; background: var(--color-accent, #ff2b2b); opacity: 0; pointer-events: none; } body.page-id-enterprise .vl-typing-hero__cursor.is-visible { opacity: 1; animation: vl-typing-hero-cursor-blink 0.85s step-end infinite; } @keyframes vl-typing-hero-cursor-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { body.page-id-enterprise .vl-typing-hero__cursor.is-visible { animation: none !important; opacity: 1 !important; } } /* Enterprise hero: same Grapheme tabs as Products; full-width bar + flex-end so links sit on the right */ .page-id-enterprise .hero__tabs { width: 100%; } .page-id-enterprise .hero__tabs .tabs { width: 100%; justify-content: flex-end; } /* Video strip under the typed hero: scroll-linked scale only on the video */ .page-id-enterprise .vl-businesses-hero-wrap { overflow: hidden; } .page-id-enterprise .vl-businesses-hero-wrap video { display: block; width: 100%; height: auto; transform: scale(var(--vl-hero-video-scale, 1)); transform-origin: center center; will-change: transform; } @media (prefers-reduced-motion: reduce) { .page-id-enterprise .vl-businesses-hero-wrap video { transform: none !important; } } body.home .page-template-homepage-static .header-homepage__title > span:last-child { position: relative; display: block; min-height: 1.15em; } /* Legacy stacked-word fade (only when FlipWords is not used) */ body.home .page-template-homepage-static .header-homepage__title > span:last-child:not(.vl-flip-words) > span { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; display: inline-block !important; animation: vl-home-fade-words 18s ease-in-out infinite; } body.home .page-template-homepage-static .header-homepage__title > span:last-child:not(.vl-flip-words) > span:nth-child(1) { animation-delay: 0s; } body.home .page-template-homepage-static .header-homepage__title > span:last-child:not(.vl-flip-words) > span:nth-child(2) { animation-delay: 3s; } body.home .page-template-homepage-static .header-homepage__title > span:last-child:not(.vl-flip-words) > span:nth-child(3) { animation-delay: 6s; } body.home .page-template-homepage-static .header-homepage__title > span:last-child:not(.vl-flip-words) > span:nth-child(4) { animation-delay: 9s; } body.home .page-template-homepage-static .header-homepage__title > span:last-child:not(.vl-flip-words) > span:nth-child(5) { animation-delay: 12s; } body.home .page-template-homepage-static .header-homepage__title > span:last-child:not(.vl-flip-words) > span:nth-child(6) { animation-delay: 15s; } @keyframes vl-home-fade-words { 0% { opacity: 0; visibility: hidden; } 4% { opacity: 1; visibility: visible; } 13% { opacity: 1; visibility: visible; } 17% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } } .vl-home-hero__copy { display: flex; flex-direction: column; gap: 1rem; max-width: 36rem; } .vl-home-hero__eyebrow { margin: 0; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; color: var(--color-accent, #ff2b2b); } .vl-home-hero__headline { margin: 0; font-size: clamp(1.9rem, 4.2vw, 3.05rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } /* Graphene `.text h2` draws a full-width top rule + extra padding - strip it for the home hero heading (same class on div with role). */ body.home .vl-home-hero__copy.text :is(h2, div).vl-home-hero__headline { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; } .vl-home-hero__accent { color: var(--color-accent, #ff2b2b); } .vl-home-hero__sub { margin: 0; max-width: 34rem; font-size: clamp(1.02rem, 2.35vw, 1.1875rem); line-height: 1.62; color: color-mix(in srgb, var(--color-text) 88%, transparent); } /* Home tagline + About: one prose column (shared left & right edges; no full-bleed about vs narrowed title) */ body.home .section-title .text, body.home .section-about__text.text { width: 100% !important; max-width: var(--body-text-max) !important; margin-inline: 0 !important; justify-self: start !important; text-align: left !important; } body.home .vl-home-about-block .section-title .text, body.home .vl-home-about-block .section-about__text.text { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; overflow-wrap: break-word; } body.home .section-title .p2 { text-align: left !important; } body.home .section.section-title { padding-top: var(--vl-home-about-rule-pad); } /* Home About: Grapheine uses two columns (`column-count: 2`) on `.section-about__text` on wide viewports - copy flows vertically per column first, which breaks alignment with adjacent lines. Single column reads as one block. */ body.home .section-about__text.text { column-count: 1 !important; display: flex !important; flex-direction: column !important; } body.home .section-about__text .p2 { text-indent: 0 !important; } body.home .section-about__text .section-about__link { align-self: flex-start; margin-top: clamp(0.75rem, 2vw, 1.25rem); } .vl-home-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 0.5rem 0 0; } /* Hero quick links - slightly larger + bolder than default navigation links (~1.0625rem / 400) */ body.home .vl-home-hero__actions .navigation__link { font-size: clamp(1.125rem, 2.7vw, 1.21875rem); font-weight: 500; } .vl-home-hero__copy .p1 { line-height: 1.55; overflow: visible; padding-bottom: 0.2em; } .vl-home-hero__panel { width: 100%; margin-top: 0; } .vl-home-hero__frame { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.35); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); } .vl-home-hero__frame .media { margin: 0; } .vl-home-hero__frame .media img { display: block; width: 100%; height: auto; vertical-align: bottom; } /* Home dock mount for Framer Dock component. */ .vl-home-dock-wrap { display: flex; justify-content: center; margin-top: clamp(1rem, 2.4vw, 1.8rem); } .vl-home-dock-framer { display: flex; justify-content: center; width: 100%; min-height: 70px; } @media (max-width: 767px) { .vl-home-dock-wrap { margin-top: 0.85rem; } } .vl-home-hero-banners { position: relative; width: 100%; aspect-ratio: 2560 / 1583; overflow: hidden; background: transparent; } .vl-home-hero-banners__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; visibility: visible; transform: translate3d(110%, 0, 0); z-index: 1; transition: transform 620ms cubic-bezier(.22,1,.36,1); } .vl-home-hero-banners__slide.is-active { transform: translate3d(0, 0, 0); z-index: 2; } .vl-home-hero-banners__slide.is-entering { z-index: 3; } .vl-home-hero-banners__slide.is-leaving { z-index: 2; } /* Hero banners mode: remove overlay and corner logo layer */ .vl-home-hero__frame--banners::before { display: none; } .vl-home-hero__frame--banners .vl-home-hero__logo-strip { display: none; } /* Fresh home hero rotator */ .vl-home-hero__frame--banners { max-width: min(100%, 36rem); margin-inline: auto; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); border-radius: 4px; } .vl-home-hero__frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(255, 43, 43, 0.12) 100% ); } .vl-home-hero__logo-strip { position: absolute; left: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 3; max-width: min(42%, 220px); } .vl-home-hero__logo-strip img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.6)); } @media only screen and (max-width: 1023px) { body.home .vl-home-hero { /* Was 120px - left a large void under the header video on phones */ padding-top: clamp(0.65rem, 2.8vw, 1.1rem); align-items: start; } body.home .page-template-homepage-static .vl-home-hero { margin-top: 0; } body.home .page-template-homepage-static .header-homepage { margin-bottom: clamp(0.65rem, 2.5vw, 1.1rem); } .vl-home-hero__copy { max-width: none; } } /* Scroll zone: lighter canvas mid-page (preference + homepage toggle; Articles index exempt) */ body:not(.vl-blog-page) { transition: background-color 520ms ease, color 520ms ease; } body:not(.vl-blog-page).vl-theme-middle { --color-background: #fff; --color-text: #111; background-color: #fff; color: #111; } /* * White-scroll mid-page band darkens body text, but the header bar stays on the dark canvas: * keep nav + logo links white (pour gradient base included). */ body.vl-theme-middle .header { --color-text: var(--color-white, #fafafa); --vl-red-pour-base: #fafafa; color: var(--color-white, #fafafa); } body.vl-theme-middle .header .navigation__item:not(.navigation__item--active) > .navigation__link { --vl-red-pour-base: #fafafa; } body.vl-theme-middle .header .navigation__item--active > .navigation__link { color: var(--color-accent, #ff2b2b) !important; -webkit-text-fill-color: currentColor !important; } /* * Homepage: Graphene/GSAP scrubs `html.--light` on `body.switch` (see voltis-main.js). * That scrub runs separately from `body.vl-theme-middle`, so the header "White scroll" * toggle must override the light tokens when the user disables the effect. * Values mirror `body.switch` in voltis-main.css (dark canvas). */ html.--light body.switch.vl-white-scroll-disabled { --color-text: var(--color-white) !important; --color-background: var(--color-black) !important; --color-separator: color-mix( in srgb, var(--color-text) 20%, transparent ) !important; --color-placeholder: color-mix( in srgb, var(--color-text) 12%, var(--color-background) ) !important; background: var(--color-background) !important; color: var(--color-text) !important; transition-property: none !important; } /* Footer stays above homepage Articles during overlap scrub; About/tagline sit above Articles (see blog.css). */ body.home .footer.footer { position: relative; z-index: 5; margin-top: 0; } /* Sitewide header chrome: stable flex row (logo | nav | white-scroll toggle | menu). */ @media (min-width: 1024px) { html.js .header .header__container { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 0.65rem; } html.js .header .header__container > .navigation { flex: 1 1 auto; min-width: 0; margin-left: auto !important; } html.js .header .header__container > .navigation .navigation__list { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: clamp(0.35rem, 1.1vw, 0.85rem); } /* * Match Graphene `.navigation__link` (1.0625rem / 110% lh). A bad override used 0.875rem and * shrank the bar. Same weight + padding on active/inactive stops the row jumping on click. */ html.js .header .header__container > .navigation .navigation__item, html.js .header .header__container > .navigation .navigation__item--active { font-weight: 400; } html.js .header .header__container > .navigation .navigation__item > .navigation__link, html.js .header .header__container > .navigation .navigation__item--active > .navigation__link { font-weight: 400 !important; font-size: round(1.0625rem, 1px) !important; line-height: round(110%, 1px) !important; padding-block: 0.04em 0.02em; display: inline-block; vertical-align: baseline; box-sizing: border-box; } html.js .header .header__container > .vl-scroll-toggle { flex: 0 0 2.75rem; width: 2.75rem; margin-left: 0.8rem !important; align-self: center; } html.js .header .header__logo { flex: 0 0 auto; margin-right: 0 !important; } html.js .header .header__button { display: none !important; } } .vl-scroll-toggle { margin-left: 0.8rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.75rem; gap: 0; height: auto; padding: 0; border: none; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vl-scroll-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent, #ff2b2b) 72%, #fff); outline-offset: 3px; } .vl-scroll-toggle:not(.vl-scroll-toggle--disabled):active .vl-scroll-toggle__track { filter: brightness(0.92); } .vl-scroll-toggle__track { position: relative; flex: 0 0 auto; width: 2.75rem; height: 1.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.38s cubic-bezier(0.4, 0, 0.2, 1); } .vl-scroll-toggle--on .vl-scroll-toggle__track { background: linear-gradient( 165deg, color-mix(in srgb, var(--color-accent, #ff2b2b) 75%, #2a1214) 0%, color-mix(in srgb, var(--color-accent, #ff2b2b) 40%, #120606) 100% ); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -1px 1px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--color-accent, #ff2b2b) 45%, transparent), 0 4px 18px color-mix(in srgb, var(--color-accent, #ff2b2b) 38%, transparent); } .vl-scroll-toggle__thumb { position: absolute; top: 50%; left: 0.18rem; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; border-radius: 50%; background: linear-gradient(160deg, #fff 0%, #e9e9e9 72%, #cfcfcf 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95); transition: transform 0.48s cubic-bezier(0.34, 1.45, 0.64, 1), width 0.22s ease, box-shadow 0.38s ease; will-change: transform; } .vl-scroll-toggle--on .vl-scroll-toggle__thumb { transform: translateX(calc(2.75rem - 1.2rem - 0.36rem)); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98); } body.vl-theme-middle .vl-scroll-toggle__track { background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06); } body.vl-theme-middle .vl-scroll-toggle--on .vl-scroll-toggle__track { background: linear-gradient( 165deg, color-mix(in srgb, var(--color-accent, #ff2b2b) 65%, #fff) 0%, color-mix(in srgb, var(--color-accent, #ff2b2b) 38%, #f2f2f2) 100% ); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -1px 1px rgba(0, 0, 0, 0.12), 0 0 0 1px color-mix(in srgb, var(--color-accent, #ff2b2b) 35%, rgba(0, 0, 0, 0.12)), 0 4px 16px color-mix(in srgb, var(--color-accent, #ff2b2b) 22%, transparent); } body.vl-theme-middle .vl-scroll-toggle { color: #141414; } body.vl-theme-middle .vl-scroll-toggle:focus-visible { outline-color: color-mix(in srgb, var(--color-accent, #ff2b2b) 55%, #111); } .vl-scroll-toggle--disabled .vl-scroll-toggle__track, .vl-scroll-toggle--disabled .vl-scroll-toggle__thumb { transition: none; } .vl-scroll-toggle--disabled, .vl-scroll-toggle--disabled:hover, .vl-scroll-toggle--disabled:focus-visible { cursor: not-allowed; opacity: 0.4; } .vl-scroll-toggle--disabled .vl-scroll-toggle__track { background: rgba(255, 255, 255, 0.07) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important; filter: grayscale(1); } .vl-scroll-toggle--disabled .vl-scroll-toggle__thumb { transform: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; } @media (prefers-reduced-motion: reduce) { .vl-scroll-toggle__track, .vl-scroll-toggle__thumb { transition-duration: 0.08s !important; transition-timing-function: ease !important; } } /* Sitewide cookie consent popup */ .vl-cookie-banner { position: fixed; left: 50%; bottom: clamp(14px, 2.5vw, 28px); transform: translateX(-50%); z-index: 10020; width: min(92vw, 640px); padding: clamp(0.75rem, 1.8vw, 1rem); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(8, 10, 14, 0.94); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42); backdrop-filter: blur(8px); } .vl-cookie-banner__text { margin: 0; font-size: clamp(0.82rem, 1.1vw, 0.92rem); line-height: 1.45; color: rgba(244, 244, 244, 0.96); } .vl-cookie-banner__actions { margin-top: 0.68rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .vl-cookie-banner__link { margin-right: auto; color: rgba(255, 255, 255, 0.86); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 2px; } .vl-cookie-banner__btn { appearance: none; border: 1px solid rgba(255, 43, 43, 0.45); border-radius: 999px; background: rgba(255, 43, 43, 0.18); color: #fff; font: 600 0.8rem/1.1 inherit; padding: 0.45rem 0.86rem; cursor: pointer; } .vl-cookie-banner__btn--ghost { border-color: rgba(255, 255, 255, 0.26); background: transparent; } .vl-cookie-banner__btn:hover, .vl-cookie-banner__btn:focus-visible { filter: brightness(1.12); outline: none; } @media (max-width: 1023px) { .vl-scroll-toggle--mobile { margin: 1rem 0 0; align-self: flex-start; } } /* Mobile header controls: keep hamburger + switch grouped on the right. */ @media (max-width: 1023px) { html.js .header .header__container { display: flex; align-items: center; gap: 0.65rem; } html.js .header .header__container > .navigation { display: none !important; } html.js .header .header__logo { margin-right: auto !important; flex: 0 0 auto; } html.js .header .header__container > .vl-scroll-toggle { order: 2; margin: 0 !important; flex: 0 0 auto; } html.js .header .header__button { order: 3; margin: 0 !important; flex: 0 0 auto; } /* Open drawer is full-screen; keep chrome above it so the hamburger can close the menu. */ html.js .header.header--active .header__container { position: relative; z-index: 8; } html.js .header.header--active .header__button { position: relative; z-index: 9; } } /* Mobile menu panel: keep brand mark left-aligned with nav items */ @media (max-width: 1023px) { .header__navigation-mobile .vl-scroll-toggle { display: none !important; } .header__navigation-mobile { align-items: flex-start !important; } .header__navigation-mobile .navigation, .header__navigation-mobile .navigation__list { width: 100%; } .header__navigation-mobile .header__logo, .header__navigation-mobile .footer__logo, .header__navigation-mobile img[src*="assets/voltis.svg"] { margin-left: 0 !important; margin-right: auto !important; left: 0 !important; right: auto !important; text-align: left !important; justify-self: start !important; align-self: flex-start !important; transform: none !important; } } /* Footer: logo starts on the same column as footer nav */ .footer .footer__container > .footer__logo { grid-column: 1 / -1 !important; justify-self: start !important; width: 100%; /* Theme default ~11.25rem between nav (Contact) and logo - tighten */ margin-top: 1.75rem !important; } .footer .footer__container > .footer__logo img, .footer .footer__container > .footer__logo svg { display: block; margin-left: 0 !important; margin-right: auto !important; } /* Portfolio Years + All + sector sliders: SVG thumbs fill the frame; slight overscale clips inside theme border-radius (fixes 1px “bleed” in light mode). */ .works-chronology .work__thumbnail .media img[src$=".svg"], .archive-work .work__thumbnail .media img[src$=".svg"], .slider .work__thumbnail .media img[src$=".svg"] { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; background: var(--color-placeholder, #0c0c0c); } .works-chronology .work__thumbnail .media img, .works-chronology .work__thumbnail .media video, .works-chronology .work__thumbnail-over img, .works-chronology .work__thumbnail-over video, .archive-work .work__thumbnail .media img, .archive-work .work__thumbnail .media video, .archive-work .work__thumbnail-over img, .archive-work .work__thumbnail-over video, .slider .work__thumbnail .media img, .slider .work__thumbnail .media video, .slider .work__thumbnail-over img, .slider .work__thumbnail-over video, .works-index .archive-row__image img, .works-index .archive-row__image video { transform: translate3d(0, 0, 0) scale(1.02); transform-origin: center center; } /* Homepage featured work rows: Creators (VModel) + Wearhouse - shared intro layout; theme grid uses @container work */ .work--wearhouse-vmodel-intro .vl-work-vmodel-intro, .work--vmodel-creators-intro .vl-work-vmodel-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; max-width: none; width: 100%; text-align: left; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__tabs, .work--vmodel-creators-intro .vl-work-vmodel-intro__tabs { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 0.35rem 0.5rem; margin: 0 0 0.15rem; font-size: clamp(0.78rem, 1.15vw, 0.875rem); font-weight: 500; letter-spacing: 0.02em; color: color-mix(in srgb, var(--color-text, #111) 55%, transparent); } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__tab, .work--vmodel-creators-intro .vl-work-vmodel-intro__tab { margin: 0; padding: 0.15rem 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; opacity: 0.72; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__tab:focus-visible, .work--vmodel-creators-intro .vl-work-vmodel-intro__tab:focus-visible { opacity: 1; color: var(--color-text, #111); outline: none; } @media (hover: hover) and (pointer: fine) { .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__tab:hover, .work--vmodel-creators-intro .vl-work-vmodel-intro__tab:hover { opacity: 1; color: var(--color-text, #111); outline: none; } } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__tab.is-active, .work--vmodel-creators-intro .vl-work-vmodel-intro__tab.is-active { opacity: 1; color: var(--color-accent, #ff2b2b); font-weight: 600; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__tab-sep, .work--vmodel-creators-intro .vl-work-vmodel-intro__tab-sep { opacity: 0.45; user-select: none; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__panes, .work--vmodel-creators-intro .vl-work-vmodel-intro__panes { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; position: relative; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__pane, .work--vmodel-creators-intro .vl-work-vmodel-intro__pane { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; min-width: 0; text-align: left; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__pane:not(.is-intro-active), .work--vmodel-creators-intro .vl-work-vmodel-intro__pane:not(.is-intro-active) { position: absolute; left: 0; right: 0; top: 0; width: 100%; max-width: 100%; box-sizing: border-box; visibility: hidden; pointer-events: none; user-select: none; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__pane.is-intro-active, .work--vmodel-creators-intro .vl-work-vmodel-intro__pane.is-intro-active { position: relative; z-index: 1; visibility: visible; pointer-events: auto; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__title, .work--vmodel-creators-intro .vl-work-vmodel-intro__title { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; color: var(--color-text, #111); text-align: left; width: 100%; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__headline-link, .work--vmodel-creators-intro .vl-work-vmodel-intro__headline-link { color: inherit; text-decoration: none; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__headline-link:hover, .work--vmodel-creators-intro .vl-work-vmodel-intro__headline-link:hover { text-decoration: underline; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__headline-link:focus-visible, .work--vmodel-creators-intro .vl-work-vmodel-intro__headline-link:focus-visible { outline: 2px solid var(--color-accent, #ff2b2b); outline-offset: 3px; } /* Homepage featured work: left-align excerpt with intro */ body.home .work--wearhouse-vmodel-intro .work__excerpt, body.home .work--vmodel-creators-intro .work__excerpt { text-align: left; } body.home .work--wearhouse-vmodel-intro .work__excerpt p, body.home .work--vmodel-creators-intro .work__excerpt p { text-align: left; } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__dek, .work--vmodel-creators-intro .vl-work-vmodel-intro__dek { margin: 0; line-height: 1.5; color: color-mix(in srgb, var(--color-text, #111) 90%, transparent); } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost, .work--vmodel-creators-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost { align-self: flex-start; white-space: nowrap; color: color-mix(in srgb, var(--color-text, #111) 94%, transparent); --liquid-button-background-color: rgba(255, 255, 255, 0.52); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost:focus-visible, .work--vmodel-creators-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost:focus-visible { color: #fffaf8; } @media (hover: hover) and (pointer: fine) { .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost:hover, .work--vmodel-creators-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost:hover { color: #fffaf8; } } .work--wearhouse-vmodel-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost .vl-liquid-btn__fill, .work--vmodel-creators-intro .vl-work-vmodel-intro__cta.vl-liquid-btn--ghost .vl-liquid-btn__fill { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-accent, #ff2b2b) 88%, #fff), var(--color-accent, #ff2b2b) ); } /* Wide card: intro stacked left, excerpt spans right (matches theme 8-col split) */ @container work (min-width: 60vw) { .work--wearhouse-vmodel-intro .vl-work-vmodel-intro, .work--vmodel-creators-intro .vl-work-vmodel-intro { grid-column: 1 / 5; grid-row: 2; align-self: start; max-width: none; } .work--wearhouse-vmodel-intro .work__excerpt, .work--vmodel-creators-intro .work__excerpt { grid-column: -5 / -1 !important; grid-row: 2 !important; align-self: start; text-align: left; } } /* Mid width: full-bleed stacking */ @container work (min-width: 28vw) and (max-width: 59vw) { .work--wearhouse-vmodel-intro .vl-work-vmodel-intro, .work--vmodel-creators-intro .vl-work-vmodel-intro { grid-column: 1 / -1; grid-row: 2; } } /* * Graphene footer parallax: theme JS previously needed extra scroll runway on very tall footers. * Excessive viewport-based padding reads as an empty slab; keep a modest bottom rhythm instead. * * Paint accent on the outer