/* ============================================================ Volta — framework runtime (trimmed from Lumos) Pure CSS. Two ways to use: • Webflow HTML Embed (inside a global Component): wrap in style … /style. • Shared stylesheet (repo / Eleventy side): use as-is and it, so the SSG-generated pages carry the same runtime as the export. CHANGES vs the full Lumos embed: • REMOVED the h1..label "Clear Defaults" reset. It forced inherit on size/weight/line-height/font + zeroed margins, which collided with your global "All H_" tag styles (equal specificity, reset loaded later → reset won). With it gone, marketing-page tag styles control headings. NOTE: CMS post content is styled by Webflow's rich-text element styling (.w-richtext h_, specificity 0,1,1) and was never affected by this either way. • REMOVED the Line-Height-Trim block (relied on undefined --_text-style---trim-* vars; unsafe without a full clone). • REMOVED the Slot Styler + .u-hide-if-empty-cms (Webflow Collection-List / CMS rules — you're on the Eleventy CMS). • KEPT grid engine, state manager, sliders, number attrs. • ADDED fallbacks to theme/focus variable refs. • RESTORED the [data-trigger] resting default (--_trigger---on:1 / --off:0) — it was dropped in the first trim, which left trigger-driven color-mix/transform values invalid until first hover. Required for the Lumos button pattern and the link-underline effect. ============================================================ */ /* ---------- Reset / normalise ---------- */ ::before, ::after { box-sizing: border-box; } .w-embed:before, .w-embed:after, .w-richtext:before, .w-richtext:after { content: unset; } html { background-color: var(--_theme---background, #F8F7F4); } button { background-color: unset; padding: unset; text-align: inherit; } button:not(:disabled) { cursor: pointer; } video { width: 100%; object-fit: cover; } .wf-empty { padding: 0; } svg { max-width: 100%; } @media (prefers-color-scheme: light) { option { color: black; } } img::selection { background: transparent; } body { font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } a:not([class]) { text-decoration: underline; } select:has(option[value=""]:checked) { color: color-mix(in lab, currentcolor 60%, transparent); } /* ---------- Headings/paragraphs reset: REMOVED ---------- The original `h1,h2,h3,h4,h5,h6,p,blockquote,label { ...inherit; margin:0 }` block was here. Removed so your Webflow tag styles win on marketing pages. To re-add the Lumos margin baseline later (spacing via gap/utilities): h1,h2,h3,h4,h5,h6,p { margin-top:0; margin-bottom:0; } */ /* ---------- Selection ---------- ::selection { background-color: var(--_theme---selection--background, #1B2A4A); color: var(--_theme---selection--text, #F8F7F4); } */ /* Branded text selection — copper by default */ ::selection { background-color: var(--swatch--copper); color: var(--swatch--pure-white); } /* On dark sections, use copper-light for contrast against navy */ .u-theme-dark ::selection { background-color: var(--swatch--copper-light); color: var(--swatch--navy); } /* ---------- Margin Trim (kept) ---------- */ :is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > :not(:not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim) ~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim)), :is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > :not(:not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim) ~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim)).u-display-contents > :first-child { margin-top: 0; } :is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > :not(:has(~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim))), :is(.u-margin-trim,.w-richtext,.u-content-wrapper,[class*="u-container"],[class*="u-layout-column"]) > :not(:has(~ :not(.w-condition-invisible,.u-cover-absolute,.u-ignore-trim))).u-display-contents > :last-child { margin-bottom: 0; } /* ---------- Line-Height Trim: REMOVED ---------- Relied on --_text-style---trim-top/-bottom (per-text-style values that only exist in a full Lumos clone). Undefined, calc(-0.5lh + var(...)) either invalidates or — with a 0 fallback — applies a hard -0.5lh trim that breaks spacing. Reintroduce only after defining those vars per text style. */ /* ---------- Rich Text Links ---------- */ .w-richtext a { position: relative; z-index: 4; } /* ---------- Line Clamp ---------- */ [class*="u-line-clamp"]:not(.w-richtext), [class*="u-line-clamp"].w-richtext > * { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } [class*="u-line-clamp"].w-richtext > :not(:first-child) { display: none; } .u-line-clamp-2:not(.w-richtext), .u-line-clamp-2.w-richtext > * { -webkit-line-clamp: 2; } .u-line-clamp-3:not(.w-richtext), .u-line-clamp-3.w-richtext > * { -webkit-line-clamp: 3; } .u-line-clamp-4:not(.w-richtext), .u-line-clamp-4.w-richtext > * { -webkit-line-clamp: 4; } /* ---------- Text Max Width ---------- */ .u-text > * { width: 100%; max-width: inherit !important; margin-inline: 0 !important; margin-top: 0 !important; } /* ---------- Background Slot Children ---------- */ .u-background-slot > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: unset !important; } /* ---------- Hide (CMS line removed) ---------- */ .u-hide-if-empty:empty, .u-hide-if-empty:has(> *):not(:has(> :not(.w-condition-invisible))), [class*="u-layout-column"]:empty { display: none !important; } /* ---------- Focus State (fallbacks added) ---------- */ a, button, :where([tabindex]), input { outline-offset: var(--focus--offset-outer, 2px); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline-color: var(--_theme---text, #1B2A4A); outline-width: var(--focus--width, 2px); outline-style: solid; } /* ---------- Disabled ---------- */ [data-button]:has(button:disabled) { opacity: 0.5; pointer-events: none; } /* ---------- Global / Clickable Component ---------- */ .wf-design-mode .clickable_wrap { z-index: 0; } .clickable_wrap a[href="#"] { display: none; } .clickable_wrap a[href="#"] ~ button { display: block; } /* ---------- Number Attributes (kept — optional) ---------- data-number="N" → --number:N. No kept subsystem depends on it; delete if you never use data-number. */ [data-number="-1"]{--number: initial;}[data-number="0"]{--number: 0;}[data-number="1"]{--number:1}[data-number="2"]{--number:2}[data-number="3"]{--number:3}[data-number="4"]{--number:4}[data-number="5"]{--number:5}[data-number="6"]{--number:6}[data-number="7"]{--number:7}[data-number="8"]{--number:8}[data-number="9"]{--number:9} [data-number="10"]{--number:10}[data-number="11"]{--number:11}[data-number="12"]{--number:12}[data-number="13"]{--number:13}[data-number="14"]{--number:14}[data-number="15"]{--number:15}[data-number="16"]{--number:16}[data-number="17"]{--number:17}[data-number="18"]{--number:18}[data-number="19"]{--number:19} [data-number="20"]{--number:20}[data-number="21"]{--number:21}[data-number="22"]{--number:22}[data-number="23"]{--number:23}[data-number="24"]{--number:24}[data-number="25"]{--number:25}[data-number="26"]{--number:26}[data-number="27"]{--number:27}[data-number="28"]{--number:28}[data-number="29"]{--number:29} [data-number="30"]{--number:30}[data-number="31"]{--number:31}[data-number="32"]{--number:32}[data-number="33"]{--number:33}[data-number="34"]{--number:34}[data-number="35"]{--number:35}[data-number="36"]{--number:36}[data-number="37"]{--number:37}[data-number="38"]{--number:38}[data-number="39"]{--number:39} [data-number="40"]{--number:40}[data-number="41"]{--number:41}[data-number="42"]{--number:42}[data-number="43"]{--number:43}[data-number="44"]{--number:44}[data-number="45"]{--number:45}[data-number="46"]{--number:46}[data-number="47"]{--number:47}[data-number="48"]{--number:48}[data-number="49"]{--number:49} [data-number="50"]{--number:50}[data-number="51"]{--number:51}[data-number="52"]{--number:52}[data-number="53"]{--number:53}[data-number="54"]{--number:54}[data-number="55"]{--number:55}[data-number="56"]{--number:56}[data-number="57"]{--number:57}[data-number="58"]{--number:58}[data-number="59"]{--number:59} [data-number="60"]{--number:60}[data-number="61"]{--number:61}[data-number="62"]{--number:62}[data-number="63"]{--number:63}[data-number="64"]{--number:64}[data-number="65"]{--number:65}[data-number="66"]{--number:66}[data-number="67"]{--number:67}[data-number="68"]{--number:68}[data-number="69"]{--number:69} [data-number="70"]{--number:70}[data-number="71"]{--number:71}[data-number="72"]{--number:72}[data-number="73"]{--number:73}[data-number="74"]{--number:74}[data-number="75"]{--number:75}[data-number="76"]{--number:76}[data-number="77"]{--number:77}[data-number="78"]{--number:78}[data-number="79"]{--number:79} [data-number="80"]{--number:80}[data-number="81"]{--number:81}[data-number="82"]{--number:82}[data-number="83"]{--number:83}[data-number="84"]{--number:84}[data-number="85"]{--number:85}[data-number="86"]{--number:86}[data-number="87"]{--number:87}[data-number="88"]{--number:88}[data-number="89"]{--number:89} [data-number="90"]{--number:90}[data-number="91"]{--number:91}[data-number="92"]{--number:92}[data-number="93"]{--number:93}[data-number="94"]{--number:94}[data-number="95"]{--number:95}[data-number="96"]{--number:96}[data-number="97"]{--number:97}[data-number="98"]{--number:98}[data-number="99"]{--number:99}[data-number="100"]{--number:100} /* ---------- State Manager (kept — CSS-driven, dependency-free) ---------- Driven by :checked / aria-* / .w--current / hover. No jQuery/JS, so it coexists with your own vanilla-JS interactions and stays dependency-free. */ [data-state] { --_state---true: 1; --_state---false: 0; } [data-trigger] { --_trigger---on: 1; --_trigger---off: 0; } /* resting default — REQUIRED so trigger-driven color-mix/calc resolve before hover/focus */ .is-active, [data-state~="checked"]:is(:checked, :has(:checked)), [data-state~="current"]:is(.w--current, :has(.w--current)), [data-state~="open"]:is(.w--open, :has(.w--open)), [data-state~="pressed"]:is([aria-pressed="true"], :has([aria-pressed="true"])), [data-state~="expanded"]:is([aria-expanded="true"], :has([aria-expanded="true"])), [data-state~="external"]:is([target="_blank"], :has([target="_blank"])) { --_state---true: 0; --_state---false: 1; } .wf-design-mode [data-trigger~="preview"], [data-trigger~="focus"]:is(:focus-visible, :has(:focus-visible)), [data-trigger~="group"]:has([data-trigger~="focus-other"]:focus-visible, [data-trigger~="focus-other"] :focus-visible) [data-trigger~="focus-other"]:not(:focus-visible, :has(:focus-visible)) { --_trigger---on: 0; --_trigger---off: 1; } @media (hover: hover) { [data-trigger~="hover"]:hover, [data-trigger~="hover-if-clickable"]:has(.clickable_wrap:not(.w-condition-invisible)):hover, [data-trigger~="group"]:has([data-trigger~="hover-other"]:hover) [data-trigger~="hover-other"]:not(:hover) { --_trigger---on: 0; --_trigger---off: 1; } [data-trigger~="hover-other"]:hover { --_trigger---on: 1 !important; --_trigger---off: 0 !important; } } @media (hover: none) { [data-trigger~="mobile"] { --_trigger---on: 0; --_trigger---off: 1; } } /* ---------- Slot Styler: REMOVED (Webflow Collection Lists — not used) ---------- */ /* ---------- Layout Slot (kept) ---------- */ .u-layout-column-2:has(> :not(.u-image-wrapper,.u-video,.u-iframe-wapper,.u-overlay)) { aspect-ratio: auto; border-radius: 0; overflow: visible; } /* ---------- Responsive / Grid Engine (kept) ---------- ⚠ DEPENDENCY: sets display:grid + --_column-count---value, but the actual grid-template-columns lives on the Lumos grid UTILITY class (e.g. .u-grid) from your pasted style guide. Keep that class or the grid won't lay out. ⚠ BREAKPOINTS: container-query breakpoints at 50em / 35em / 20em drive both grid and sliders. Reconcile your own breakpoints with these later. ⚠ SLIDERS: slide-count set by .slider_offset (base 3 via --lg), overridden per breakpoint below — tied to these container breakpoints. */ [data-large-columns="1"] { display: flex; } [data-large-columns="2"] { display: grid; --_column-count---value: 2; } [data-large-columns="3"] { display: grid; --_column-count---value: 3; } [data-large-columns="4"] { display: grid; --_column-count---value: 4; } [data-large-columns="5"] { display: grid; --_column-count---value: 5; } [data-large-columns="6"] { display: grid; --_column-count---value: 6; } [data-large-columns="7"] { display: grid; --_column-count---value: 7; } [data-large-columns="8"] { display: grid; --_column-count---value: 8; } [data-large-columns="9"] { display: grid; --_column-count---value: 9; } [data-large-columns="10"] { display: grid; --_column-count---value: 10; } [data-large-columns="11"] { display: grid; --_column-count---value: 11; } [data-large-columns="12"] { display: grid; --_column-count---value: 12; } .slider_offset { --slide-count: var(--lg); --lg: 3; --md: var(--lg); --sm: var(--md); --xs: var(--sm); } @container (width < 50em) { * { --_responsive---large: 0; --_responsive---medium: 1; --flex-medium: flex; --none-medium: none; --column-medium: column; --row-medium: row; --start-medium: start; --center-medium: center; --end-medium: end; --relative-medium: relative; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="1"] { display: flex; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="2"] { display: grid; --_column-count---value: 2; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="3"] { display: grid; --_column-count---value: 3; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="4"] { display: grid; --_column-count---value: 4; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="5"] { display: grid; --_column-count---value: 5; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="6"] { display: grid; --_column-count---value: 6; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="7"] { display: grid; --_column-count---value: 7; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="8"] { display: grid; --_column-count---value: 8; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="9"] { display: grid; --_column-count---value: 9; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="10"] { display: grid; --_column-count---value: 10; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="11"] { display: grid; --_column-count---value: 11; } :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="12"] { display: grid; --_column-count---value: 12; } .u-order-first-medium { order: -1; } .u-order-auto-medium { order: 0; } .u-order-last-medium { order: 1; } .u-display-contents-medium { display: contents; } .u-display-block-medium { display: block; } .u-display-grid-medium { display: grid; } .u-display-flex-medium { display: flex; } .u-display-none-medium { display: none; } .u-all-unset-medium { all: unset; } .slider_offset { --slide-count: var(--md); } } @container (width < 35em) { * { --_responsive---medium: 0; --_responsive---small: 1; --flex-small: flex; --none-small: none; --column-small: column; --row-small: row; --start-small: start; --center-small: center; --end-small: end; --relative-small: relative; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="1"] { display: flex; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="2"] { display: grid; --_column-count---value: 2; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="3"] { display: grid; --_column-count---value: 3; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="4"] { display: grid; --_column-count---value: 4; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="5"] { display: grid; --_column-count---value: 5; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="6"] { display: grid; --_column-count---value: 6; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="7"] { display: grid; --_column-count---value: 7; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="8"] { display: grid; --_column-count---value: 8; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="9"] { display: grid; --_column-count---value: 9; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="10"] { display: grid; --_column-count---value: 10; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="11"] { display: grid; --_column-count---value: 11; } :not([data-wf--grid--variant*="auto"]) > [data-small-columns="12"] { display: grid; --_column-count---value: 12; } .u-order-first-small { order: -1; } .u-order-auto-small { order: 0; } .u-order-last-small { order: 1; } .u-display-contents-small { display: contents; } .u-display-block-small { display: block; } .u-display-grid-small { display: grid; } .u-display-flex-small { display: flex; } .u-display-none-small { display: none; } .u-all-unset-small { all: unset; } .slider_offset { --slide-count: var(--sm); } } @container (width < 20em) { * { --_responsive---small: 0; --_responsive---xsmall: 1; --flex-xsmall: flex; --none-xsmall: none; --column-xsmall: column; --row-xsmall: row; --start-xsmall: start; --center-xsmall: center; --end-xsmall: end; --relative-xsmall: relative; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="1"] { display: flex; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="2"] { display: grid; --_column-count---value: 2; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="3"] { display: grid; --_column-count---value: 3; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="4"] { display: grid; --_column-count---value: 4; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="5"] { display: grid; --_column-count---value: 5; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="6"] { display: grid; --_column-count---value: 6; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="7"] { display: grid; --_column-count---value: 7; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="8"] { display: grid; --_column-count---value: 8; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="9"] { display: grid; --_column-count---value: 9; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="10"] { display: grid; --_column-count---value: 10; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="11"] { display: grid; --_column-count---value: 11; } :not([data-wf--grid--variant*="auto"]) > [data-xsmall-columns="12"] { display: grid; --_column-count---value: 12; } .u-order-first-xsmall { order: -1; } .u-order-auto-xsmall { order: 0; } .u-order-last-xsmall { order: 1; } .u-display-contents-xsmall { display: contents; } .u-display-block-xsmall { display: block; } .u-display-grid-xsmall { display: grid; } .u-display-flex-xsmall { display: flex; } .u-display-none-xsmall { display: none; } .u-all-unset-xsmall { all: unset; } .slider_offset { --slide-count: var(--xs); } } /* ============================================================ Filled bento cell — whole-card LINK only (a.bento_cell.is-filled) ============================================================ */ /* Base transitions (on resting state → eases both directions) */ a.bento_cell.is-filled { transition: background-color 250ms ease; } a.bento_cell.is-filled .card_button_text { transition: color 250ms ease; } a.bento_cell.is-filled .card_button_arrow { transition: color 250ms ease, transform 250ms ease; } /* Hover / focus state */ a.bento_cell.is-filled:is(:hover, :focus-visible) { background-color: var(--swatch--ivory); } a.bento_cell.is-filled:is(:hover, :focus-visible) .card_button_text { color: var(--swatch--copper); } a.bento_cell.is-filled:is(:hover, :focus-visible) .card_button_arrow { color: var(--swatch--copper); transform: translateX(4px); } a.bento_cell.is-filled:is(:hover, :focus-visible) .card_button_arrow .u-path { stroke: var(--swatch--copper); }