/* ===================================================================== SPARQIO day mode: "Cobalt Engraving Editorial" (11-09-26) Built from the operator's Claude Design mockup (SparqioHome.dc.html + SparqioPages.dc.html). Every rule is scoped to :root[data-theme='light'] so dark mode stays exactly as shipped. Loaded after components.css. System (from the mockup): cream paper #F6F1E4 / #F3EBDD / #E8DFD0, one cobalt ink #9BB4D0 / #5B7FA6 / #2F5F8A / #1E4A73 / #163A5C / #0F2740, navy #1A365D; Cormorant Garamond 500 for display, EB Garamond 17px/1.6 for body, small caps letter-spaced labels; 1px hairlines, no radius, double-framed panels (outer #2F5F8A + 8px + inner #9BB4D0). Headings and buttons are sentence case here (the mockup's choice). ===================================================================== */ :root[data-theme='light'] { --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif; --radius: 0; --shadow: none; } /* ---------- the page grid: six faint columns inside the 1200px frame, behind everything (the mockup's showGrid layer) ---------- */ :root[data-theme='light'] body.sq { position: relative; } :root[data-theme='light'] body.sq::after { /* full viewport width (operator, 11-09-26), six columns edge to edge */ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 6 - 1px), rgba(47, 95, 138, 0.13) calc(100% / 6 - 1px), rgba(47, 95, 138, 0.13) calc(100% / 6)); } :root[data-theme='light'] main#main, :root[data-theme='light'] .sq-footer { position: relative; z-index: 1; } /* ---------- plate frame lines: draw in on load (mockup's heroDraw) ---------- */ @keyframes sqDraw { to { stroke-dashoffset: 0; } } @keyframes sqFade { to { opacity: 1; } } :root[data-theme='light'] .sq-plate-lines { /* full hero width, not the content box (operator, 11-09-26) */ position: absolute; inset: 0; width: 100%; z-index: 1; pointer-events: none; display: block; } :root[data-theme='light'] .sq-plate-lines::before { content: ''; position: absolute; inset: 0; opacity: 0; background-image: repeating-linear-gradient(135deg, rgba(47, 95, 138, 0.30) 0 1px, transparent 1px 6px), repeating-linear-gradient(45deg, rgba(47, 95, 138, 0.12) 0 1px, transparent 1px 11px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%); animation: sqFade 1.4s ease 1.1s forwards; } :root[data-theme='light'] .sq-plate-lines::after { content: ''; position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: rgba(47, 95, 138, 0.5); opacity: 0; animation: sqFade 0.8s ease 1.3s forwards; } /* inner-page plates are busier than the coast: lighter hatch so the art reads */ :root[data-theme='light'] .sq-page-hero .sq-plate-lines::before { background-image: repeating-linear-gradient(135deg, rgba(47, 95, 138, 0.14) 0 1px, transparent 1px 6px), repeating-linear-gradient(45deg, rgba(47, 95, 138, 0.06) 0 1px, transparent 1px 11px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); } :root[data-theme='light'] .sq-plate-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } :root[data-theme='light'] .sq-plate-lines line { stroke: #2F5F8A; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sqDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) forwards; } @media (prefers-reduced-motion: reduce) { :root[data-theme='light'] .sq-plate-lines line { stroke-dashoffset: 0; animation: none; } :root[data-theme='light'] .sq-plate-lines::before, :root[data-theme='light'] .sq-plate-lines::after { opacity: 1; animation: none; } } /* ---------- ground, grain, type ---------- */ :root[data-theme='light'] body.sq { font-size: 17px; line-height: 1.6; color: #163A5C; } :root[data-theme='light'] body.sq::before { background-image: radial-gradient(rgba(47, 95, 138, 0.10) 0.5px, transparent 0.6px); background-size: 22px 22px; opacity: 1; } :root[data-theme='light'] .sq h1, :root[data-theme='light'] .sq h2, :root[data-theme='light'] .sq h3, :root[data-theme='light'] .sq h4 { font-weight: 500; letter-spacing: 0; line-height: 1.08; color: #0F2740; /* case inherits theme.css capitalize: day and night read the same (operator, 12-09-26) */ } :root[data-theme='light'] .sq h1 { font-size: clamp(2.6rem, 5.2vw, 4.8rem); line-height: 1.03; letter-spacing: -0.01em; } :root[data-theme='light'] .sq h2 { font-size: clamp(2.4rem, 4.2vw, 3.7rem); } :root[data-theme='light'] .sq-section p.muted.sq-center { font-size: clamp(1.2rem, 1.6vw, 1.4rem); } :root[data-theme='light'] .sq h3 { font-size: 1.75rem; line-height: 1.1; } :root[data-theme='light'] .sq .gold { font-style: italic; font-weight: 400; color: #2F5F8A; } :root[data-theme='light'] .sq .muted { color: #2F5F8A; } :root[data-theme='light'] .sq a { color: #1E4A73; } :root[data-theme='light'] .sq strong { font-weight: 500; color: #0F2740; } /* ---------- small-caps labels with a rule ---------- */ :root[data-theme='light'] .sq-label { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.22em; font-size: 15px; color: #2F5F8A; gap: 14px; } :root[data-theme='light'] .sq-label .io-node { width: 28px; height: 1px; border: 0; border-radius: 0; background: #2F5F8A; opacity: 1; } :root[data-theme='light'] .sq-label .io-node::after { display: none; } :root[data-theme='light'] .sq-label.sq-center { gap: 18px; } :root[data-theme='light'] .sq-label.sq-center .io-node { display: none; } :root[data-theme='light'] .sq-label.sq-center::before, :root[data-theme='light'] .sq-label.sq-center::after { content: ''; flex: 1; height: 1px; background: #9BB4D0; } /* the io-node glyph becomes a hollow cobalt ring everywhere */ :root[data-theme='light'] .io-node { border-color: #2F5F8A; } :root[data-theme='light'] .io-node::after { display: none; } /* ---------- buttons ---------- */ :root[data-theme='light'] .sq-btn { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.14em; font-size: 17px; font-weight: 400; padding: 12px 24px; border-radius: 0; border-width: 1px; transition: background-color 0.25s, color 0.25s, border-color 0.25s; } :root[data-theme='light'] .sq-btn:hover, :root[data-theme='light'] .sq-btn:active { transform: none; box-shadow: none; } :root[data-theme='light'] .sq-btn.sq-btn--solid, :root[data-theme='light'] .sq-btn.sq-btn--ink { background: #163A5C; color: #F6F1E4; border-color: #163A5C; } :root[data-theme='light'] .sq-btn--solid:hover, :root[data-theme='light'] .sq-btn--ink:hover { background: #0F2740; color: #F6F1E4; border-color: #0F2740; } :root[data-theme='light'] .sq-btn.sq-btn--ghost { color: #0F2740; border-color: #2F5F8A; background: rgba(246, 241, 228, 0.7); } :root[data-theme='light'] .sq-btn--ghost:hover { background: #F3EBDD; } :root[data-theme='light'] .sq-btn .ripple { background: rgba(246, 241, 228, 0.35); } /* ---------- header, nav ---------- */ :root[data-theme='light'] .sq-header { padding: 16px 0; } /* transparent over the hero like night mode; a light cream veil only once the page scrolls */ :root[data-theme='light'] .sq-header::before { background: transparent; border-bottom: 1px solid transparent; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); } :root[data-theme='light'] .sq-header.is-scrolled { padding: 16px 0; box-shadow: none; } :root[data-theme='light'] .sq-header.is-scrolled::before { background: rgba(246, 241, 228, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: #E8DFD0; } :root[data-theme='light'] .sq-logo svg { height: 50px; } @media (max-width: 560px) { :root[data-theme='light'] .sq-logo svg { height: 42px; } } :root[data-theme='light'] .sq-nav { gap: 26px; } :root[data-theme='light'] .sq-nav a:not(.sq-btn) { font-family: var(--font-body); font-variant-caps: all-small-caps; letter-spacing: 0.14em; font-size: 16px; font-weight: 400; color: #1E4A73; padding: 2px 0; } :root[data-theme='light'] .sq-nav a:not(.sq-btn):hover, :root[data-theme='light'] .sq-nav a[aria-current='page'] { color: #0F2740; } :root[data-theme='light'] .sq-nav a:not(.sq-btn)::after { height: 1px; bottom: -1px; background: #2F5F8A; } :root[data-theme='light'] .sq-nav .sq-btn { padding: 8px 18px; font-size: 16px; background: transparent; color: #2F5F8A; border-color: #2F5F8A; } :root[data-theme='light'] .sq-nav .sq-btn:hover { background: #2F5F8A; color: #F6F1E4; } :root[data-theme='light'] .sq-toggle { border: 1px solid #9BB4D0; color: #2F5F8A; } :root[data-theme='light'] .sq-toggle:hover { border-color: #2F5F8A; transform: none; } :root[data-theme='light'] .sq-burger { border: 1px solid #9BB4D0; border-radius: 0; } :root[data-theme='light'] .sq-burger span { height: 1px; background: #163A5C; border-radius: 0; } @media (max-width: 900px) { :root[data-theme='light'] .sq-nav { background: #F6F1E4; box-sizing: border-box; padding: 96px 24px 40px; gap: 0; justify-content: flex-start; align-items: center; } :root[data-theme='light'] .sq-nav a:not(.sq-btn) { font-family: var(--font-display); font-variant-caps: normal; letter-spacing: 0; font-size: 34px; font-weight: 500; color: #163A5C; padding: 14px 0; border-bottom: 1px solid #E8DFD0; width: min(100%, 520px); } :root[data-theme='light'] .sq-nav a:not(.sq-btn)::after { display: none; } :root[data-theme='light'] .sq-nav .sq-btn { background: #163A5C; color: #F6F1E4; border-color: #163A5C; padding: 16px 18px; font-size: 18px; width: min(100%, 520px); box-sizing: border-box; justify-content: center; margin-top: 28px; } } /* ---------- home hero (plate I) ---------- */ :root[data-theme='light'] .sq-hero { display: grid; grid-template-rows: 1fr auto; align-items: center; min-height: min(80vh, 760px); padding: 0; background: #F6F1E4; } :root[data-theme='light'] .sq-hero > .sq-container { width: 100%; box-sizing: border-box; padding-top: calc(78px + clamp(110px, 12vh, 150px)); padding-bottom: clamp(64px, 8vw, 110px); } :root[data-theme='light'] .sq-hero-inner { max-width: 640px; } :root[data-theme='light'] .sq-hero .sq-decode { font-family: var(--font-body); font-variant-caps: all-small-caps; font-size: 15px; letter-spacing: 0.22em; color: #2F5F8A; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } :root[data-theme='light'] .sq-hero .sq-decode::before { content: ''; width: 28px; height: 1px; background: #2F5F8A; flex: none; } :root[data-theme='light'] .sq-hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.8rem); } /* The dark decode keeps each line on one clipped row; the serif headline wraps inside the 640px column like the mockup. */ :root[data-theme='light'] .sq-hero h1 .line { white-space: normal; overflow: visible; } :root[data-theme='light'] .sq-hero h1 .line > span { white-space: normal; text-wrap: pretty; } :root[data-theme='light'] .sq-hero .sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #1E4A73; max-width: 560px; margin: 26px 0 0; } :root[data-theme='light'] .sq-hero .sq-hero-day-ctas.sq-day-only { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; } :root[data-theme='light'] .sq-hero-video { object-position: right center; opacity: 1; } :root[data-theme='light'] .sq-hero-scrim { background: linear-gradient(90deg, rgba(246, 241, 228, 0.94) 0%, rgba(246, 241, 228, 0.82) 42%, rgba(246, 241, 228, 0.15) 70%, rgba(246, 241, 228, 0) 100%), linear-gradient(180deg, rgba(246, 241, 228, 0) calc(100% - 160px), #F6F1E4 100%); } :root[data-theme='light'] .sq-scroll-cue { display: none; } /* the mockup's headline entrance: rise and fade, no letter scramble (sparqio-motion.js skips the decode in day mode) */ @keyframes sqUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } :root[data-theme='light'] .sq-hero .sq-decode { animation: sqUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } :root[data-theme='light'] .sq-hero h1 .line > span { animation: sqUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; } :root[data-theme='light'] .sq-hero h1 .line:nth-child(2) > span { animation-delay: 0.55s; } @media (prefers-reduced-motion: reduce) { :root[data-theme='light'] .sq-hero .sq-decode, :root[data-theme='light'] .sq-hero h1 .line > span { animation: none; } } @media (max-width: 900px) { /* the mockup's phone treatment, extended to tablets: the plate fades to paper down the frame so the headline and strip sit on cream */ :root[data-theme='light'] .sq-hero-video { object-position: 70% top; } :root[data-theme='light'] .sq-hero-scrim { background: linear-gradient(180deg, rgba(246, 241, 228, 0.35) 0%, rgba(246, 241, 228, 0.35) 30%, rgba(246, 241, 228, 0.9) 48%, rgba(246, 241, 228, 0.96) 100%); } } /* home hero: no sketch frame or hatch; faint column grid instead (operator, 11-09-26) */ :root[data-theme='light'] .sq-hero .sq-plate-lines svg, :root[data-theme='light'] .sq-hero .sq-plate-lines::before, :root[data-theme='light'] .sq-hero .sq-plate-lines::after { display: none; } :root[data-theme='light'] .sq-hero .sq-plate-lines { background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 6 - 1px), rgba(47, 95, 138, 0.13) calc(100% / 6 - 1px), rgba(47, 95, 138, 0.13) calc(100% / 6)); } /* inner-page heroes: no sketch frame or hatch either (operator, 12-09-26); the faint column grid instead. Legal keeps the frame via .sq-page-hero--framed */ :root[data-theme='light'] .sq-page-hero:not(.sq-page-hero--framed) .sq-plate-lines svg, :root[data-theme='light'] .sq-page-hero:not(.sq-page-hero--framed) .sq-plate-lines::before, :root[data-theme='light'] .sq-page-hero:not(.sq-page-hero--framed) .sq-plate-lines::after { display: none; } :root[data-theme='light'] .sq-page-hero:not(.sq-page-hero--framed) .sq-plate-lines { background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 6 - 1px), rgba(47, 95, 138, 0.13) calc(100% / 6 - 1px), rgba(47, 95, 138, 0.13) calc(100% / 6)); } /* the build-partner strip sits between hero and stats, arranged like night mode: centred label, three centred rows, no rules */ :root[data-theme='light'] .sq-ailogos { position: relative; bottom: auto; z-index: 2; display: block; text-align: center; width: calc(100% - 2 * clamp(20px, 4vw, 44px)); max-width: calc(1200px - 2 * clamp(20px, 4vw, 44px)); margin: 0 auto 56px; box-sizing: border-box; padding: calc(8px + 22px) calc(8px + 28px) calc(8px + 26px); background: rgba(243, 235, 221, 0.8); border: 1px solid #2F5F8A; } :root[data-theme='light'] .sq-ailogos::before { content: ''; position: absolute; inset: 8px; border: 1px solid #9BB4D0; pointer-events: none; } :root[data-theme='light'] .sq-ailogos .row { display: flex; column-gap: 3.2rem; row-gap: 1rem; } :root[data-theme='light'] .sq-ailogos .row + .row { margin-top: 1rem; } :root[data-theme='light'] .sq-ailogos .lbl { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.2em; font-size: 14px; color: #5B7FA6; margin: 0 0 14px; } :root[data-theme='light'] .sq-ailogos .lbl .io-node { display: none; } :root[data-theme='light'] .sq-ailogos .ai-item { gap: 8px; height: 30px; color: #1E4A73; } :root[data-theme='light'] .sq-ailogos .ai-item:hover { color: #0F2740; } :root[data-theme='light'] .sq-ailogos .ai-item svg { height: 24px; } :root[data-theme='light'] .sq-ailogos .ai-item--mark svg { height: 22px; } :root[data-theme='light'] .sq-ailogos .ai-item .nm { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: inherit; } /* phones: two even columns, left-aligned, so the sixteen items line up instead of centring in ragged pairs (operator 12-09-26) */ @media (max-width: 700px) { :root[data-theme='light'] .sq-ailogos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; padding: calc(8px + 18px) calc(8px + 16px) calc(8px + 20px); text-align: left; } :root[data-theme='light'] .sq-ailogos .lbl { grid-column: 1 / -1; justify-self: center; margin-bottom: 4px; } :root[data-theme='light'] .sq-ailogos .row { display: contents; } :root[data-theme='light'] .sq-ailogos .row + .row { margin-top: 0; } :root[data-theme='light'] .sq-ailogos .ai-item { justify-self: start; height: 26px; gap: 7px; min-width: 0; } :root[data-theme='light'] .sq-ailogos .ai-item svg { height: 20px; } :root[data-theme='light'] .sq-ailogos .ai-item--mark svg { height: 18px; } :root[data-theme='light'] .sq-ailogos .ai-item .nm { font-size: 17px; overflow: hidden; text-overflow: ellipsis; } } /* ---------- stats ---------- */ :root[data-theme='light'] .sq-stats { gap: 28px; } :root[data-theme='light'] .sq-stat { border-left: 1px solid #9BB4D0; padding-left: 22px; } :root[data-theme='light'] .sq-stat .num { font-size: clamp(3.2rem, 5.2vw, 4.4rem); font-weight: 500; color: #0F2740; } :root[data-theme='light'] .sq-stat .num .suffix { font-style: italic; color: #2F5F8A; font-size: 0.5em; margin-left: 4px; } :root[data-theme='light'] .sq-stat .lbl { color: #2F5F8A; font-size: 18px; margin-top: 8px; } :root[data-theme='light'] .sq-page-hero .sq-stats--hero .num { font-size: clamp(2.2rem, 3vw, 2.8rem); } :root[data-theme='light'] .sq-page-hero .sq-stats--hero .lbl { font-size: 16px; margin-top: 4px; } :root[data-theme='light'] .sq-panel h4 { font-size: 1.5rem; margin: 0 0 10px; } :root[data-theme='light'] .sq-chips .sq-chip .pts { font-family: var(--font-body); color: #1E4A73; } /* tighter seams around the showcase (operator, 11-09-26) */ :root[data-theme='light'] .sq-hero + .sq-section { padding-bottom: 40px; } :root[data-theme='light'] #showcase { padding-top: 36px; padding-bottom: 32px; } :root[data-theme='light'] #showcase + .sq-section { padding-top: 56px; } /* ---------- cards: hairline grid of plates ---------- */ /* hairlines are real borders (top/left on the grid, right/bottom on each card) so an empty cell in the last row stays cream */ :root[data-theme='light'] .sq-cards { gap: 0; background: none; border: 0; border-top: 1px solid #9BB4D0; border-left: 1px solid #9BB4D0; counter-reset: plate; } :root[data-theme='light'] .sq-card { background: #F6F1E4; border: 0; border-right: 1px solid #9BB4D0; border-bottom: 1px solid #9BB4D0; border-radius: 0; box-shadow: none; padding: 30px 30px 26px; transition: background-color 0.3s; } :root[data-theme='light'] .sq-card:hover, :root[data-theme='light'] .sq-card:focus-within, :root[data-theme='light'] .sq-card.open { background: #F3EBDD; transform: none; box-shadow: none; border-color: #9BB4D0; } :root[data-theme='light'] .sq-card .idx { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.2em; font-size: 14px; color: #2F5F8A; gap: 0; margin-bottom: 0; } :root[data-theme='light'] .sq-card .idx .io-node { display: none; } :root[data-theme='light'] .sq-card .idx::before { counter-increment: plate; content: counter(plate, upper-roman) ' · '; white-space: pre; } :root[data-theme='light'] .sq-card .expand { top: 30px; right: 30px; width: 28px; height: 28px; border: 1px solid #9BB4D0; background: transparent; color: #2F5F8A; font-family: var(--font-display); font-size: 20px; font-weight: 400; } :root[data-theme='light'] .sq-card h3 { font-size: 1.75rem; margin: 18px 0 8px; color: #0F2740; } :root[data-theme='light'] .sq-card .tagline { color: #1E4A73; margin: 0; } :root[data-theme='light'] .sq-card .more p { font-size: 16px; color: #163A5C; border-top: 1px solid #E8DFD0; padding-top: 16px; margin: 0 0 18px; } :root[data-theme='light'] .sq-card .more .sq-btn { background: none; border: 0; border-bottom: 1px solid #2F5F8A; border-radius: 0; color: #2F5F8A; padding: 0 0 1px; font-size: 16px; } :root[data-theme='light'] .sq-card .more .sq-btn:hover { color: #0F2740; border-bottom-color: #0F2740; background: none; } :root[data-theme='light'] .sq-card .more .sq-btn::after { content: ' →'; } :root[data-theme='light'] .sq-card-cue { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.14em; font-size: 14px; color: #5B7FA6; } :root[data-theme='light'] .sq-cards--products .sq-card h3 { color: #0F2740; } :root[data-theme='light'] .sq p.sq-clients-note, :root[data-theme='light'] .sq p.sq-archive-note { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 1.9vw, 1.65rem); color: #1E4A73; } :root[data-theme='light'] .sq p.sq-clients-note { margin: 40px auto 0; } /* ---------- chips ---------- */ :root[data-theme='light'] .sq-chip { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.14em; font-size: 13px; border-radius: 0; border: 1px solid #9BB4D0; color: #2F5F8A; background: transparent; padding: 4px 10px; } :root[data-theme='light'] .sq-chip--status { border-color: #2F5F8A; background: transparent; color: #1E4A73; } /* ---------- panels: double frame ---------- */ :root[data-theme='light'] .sq-panel { position: relative; background: rgba(243, 235, 221, 0.8); border: 1px solid #2F5F8A; border-radius: 0; box-shadow: none; padding: calc(8px + clamp(22px, 3vw, 34px)); } :root[data-theme='light'] .sq-panel::before { content: ''; position: absolute; inset: 8px; border: 1px solid #9BB4D0; pointer-events: none; } :root[data-theme='light'] .sq-panel > h3 { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.2em; font-size: 15px !important; font-weight: 400; color: #2F5F8A; border-bottom: 1px solid #9BB4D0; padding-bottom: 8px; margin: 0 0 14px; } :root[data-theme='light'] .sq-panel.sq-panel--open { border: 0; padding: 0; background: transparent; } :root[data-theme='light'] .sq-panel.sq-panel--open::before { display: none; } :root[data-theme='light'] .sq-list li { gap: 14px; margin-bottom: 16px; } :root[data-theme='light'] .sq-list li .io-node { width: 9px; height: 9px; border: 1px solid #2F5F8A; margin-top: 9px; opacity: 1; } /* ---------- client wall: single-ink silhouettes on the open five-column grid night mode uses (no tiles) ---------- */ :root[data-theme='light'] .sq-clients { padding: 2.4rem clamp(20px, 4vw, 44px); } :root[data-theme='light'] .sq-clients .grid { background: none; border: 0; } :root[data-theme='light'] .sq-clients .grid .brand { background: transparent; } :root[data-theme='light'] .sq-clients .brand--img img { /* the mask is the logo's own alpha; the image content is pushed out of frame so only the cobalt fill shows */ -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; background: #1E4A73; object-fit: none; object-position: -9999px -9999px; filter: none; opacity: 1; } /* ---------- process ---------- */ :root[data-theme='light'] .sq-process { counter-reset: step; } :root[data-theme='light'] .sq-process::before { top: 10px; left: 0; right: 0; height: 1px; background: #2F5F8A; } :root[data-theme='light'] .sq-step { padding-top: 38px; } :root[data-theme='light'] .sq-step .dot { top: 0; width: 21px; height: 21px; border: 1px solid #2F5F8A; background: #F6F1E4; } :root[data-theme='light'] .sq-step .dot::after { width: 7px; height: 7px; background: #2F5F8A; } :root[data-theme='light'] .sq-step .n { font-family: var(--font-display); font-size: 0; letter-spacing: 0.2em; color: #2F5F8A; } :root[data-theme='light'] .sq-step .n::before { counter-increment: step; content: counter(step, upper-roman); font-size: 15px; } :root[data-theme='light'] .sq-step h4 { font-size: 1.45rem; margin: 4px 0 6px; } :root[data-theme='light'] .sq-step p { font-size: 15.5px; color: #1E4A73; } @media (max-width: 900px) { /* stacked steps: vertical spine on the left, like the base layout */ :root[data-theme='light'] .sq-process::before { top: 0; bottom: 0; left: 10px; right: auto; width: 1px; height: auto; } :root[data-theme='light'] .sq-step { padding: 0 0 0 48px; } :root[data-theme='light'] .sq-step .dot { top: 2px; } } /* ---------- timeline and founder plate ---------- */ :root[data-theme='light'] .sq-timeline::before { left: 10px; width: 1px; background: #9BB4D0; } :root[data-theme='light'] .sq-era { margin-bottom: 22px; } :root[data-theme='light'] .sq-era::before { left: -26px; top: 7px; width: 9px; height: 9px; border: 1px solid #2F5F8A; background: #F6F1E4; } :root[data-theme='light'] .sq-era .y { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.2em; font-size: 14px; color: #2F5F8A; } :root[data-theme='light'] .sq-era h4 { font-size: 1.3rem; line-height: 1.15; margin: 2px 0 0; } :root[data-theme='light'] .sq-era p { font-size: 15.5px; color: #1E4A73; margin-top: 4px; } :root[data-theme='light'] .sq-founder-media { display: grid; grid-template-columns: minmax(120px, 44%) 1fr; gap: clamp(20px, 3vw, 36px); align-items: stretch; } :root[data-theme='light'] .sq-founder-media .sq-timeline { margin-top: 0; } :root[data-theme='light'] .sq-day-only { display: block; } :root[data-theme='light'] .sq-plate { margin: 0; align-self: stretch; width: 100%; display: flex; } :root[data-theme='light'] .sq-plate > div { border: 1px solid #2F5F8A; padding: 6px; background: rgba(243, 235, 221, 0.8); flex: 1; display: flex; box-sizing: border-box; min-height: 0; } :root[data-theme='light'] .sq-plate img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center top; } @media (max-width: 560px) { :root[data-theme='light'] .sq-plate img { height: auto; aspect-ratio: 941 / 1672; max-height: 70vh; } } @media (max-width: 560px) { :root[data-theme='light'] .sq-founder-media { grid-template-columns: 1fr; } } /* ---------- CTA band: framed card on an engraved ground ---------- */ :root[data-theme='light'] .sq-section:has(> .sq-container > .sq-cta-band) { position: relative; overflow: hidden; background: #F6F1E4; padding: clamp(72px, 9vw, 120px) 0 !important; } /* the engraved ground sits on its own taller layer and drifts with the scroll (sparqio-motion.js sets --sq-px) */ :root[data-theme='light'] .sq-section:has(> .sq-container > .sq-cta-band)::before { content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 140%; z-index: 0; background: url(../img/day/atlas-alt.jpg) center / cover no-repeat; transform: translateY(var(--sq-px, 0%)); will-change: transform; } :root[data-theme='light'] .sq-section:has(> .sq-container > .sq-cta-band)::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #F6F1E4 0%, rgba(246, 241, 228, 0.35) 30%, rgba(246, 241, 228, 0.35) 70%, #F3EBDD 100%); } :root[data-theme='light'] .sq-section:has(> .sq-container > .sq-cta-band) > .sq-container { position: relative; z-index: 1; } :root[data-theme='light'] .sq-cta-band { position: relative; border: 1px solid #2F5F8A; border-radius: 0; box-shadow: none; background: rgba(243, 235, 221, 0.8); padding: calc(8px + clamp(40px, 6vw, 72px)) calc(8px + clamp(20px, 4vw, 48px)); } :root[data-theme='light'] .sq-cta-band::before { content: ''; position: absolute; inset: 8px; border: 1px solid #9BB4D0; pointer-events: none; } :root[data-theme='light'] .sq-cta-band > * { position: relative; background: transparent; } :root[data-theme='light'] .sq-cta-band h2 { max-width: 720px; padding: 0 12px; } :root[data-theme='light'] .sq-cta-band .sub { color: #1E4A73; font-size: clamp(1.2rem, 1.6vw, 1.4rem); max-width: 560px; margin: 18px auto 30px; padding: 0 12px; } :root[data-theme='light'] .sq-cta-band .sq-hero-ctas { justify-content: center; } /* ---------- inner page heroes: the page's plate full-bleed behind the title, same treatment as the landing hero (operator, 11-09-26) ---------- */ :root[data-theme='light'] .sq-page-hero { position: relative; overflow: hidden; display: flex; align-items: center; box-sizing: border-box; min-height: min(64vh, 640px); background: #F6F1E4; padding: calc(78px + clamp(72px, 9vw, 110px)) 0 clamp(56px, 7vw, 90px) !important; } :root[data-theme='light'] .sq-page-hero > .sq-container { position: relative; z-index: 2; width: 100%; box-sizing: border-box; } :root[data-theme='light'] .sq-page-hero-video { display: none; } :root[data-theme='light'] .sq-page-hero-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; border: 0; padding: 0; background: none; z-index: 0; } :root[data-theme='light'] .sq-page-hero-scrim { display: block; z-index: 1; background: linear-gradient(90deg, rgba(246, 241, 228, 0.94) 0%, rgba(246, 241, 228, 0.82) 42%, rgba(246, 241, 228, 0.15) 70%, rgba(246, 241, 228, 0) 100%), linear-gradient(180deg, rgba(246, 241, 228, 0) calc(100% - 140px), #F6F1E4 100%); } :root[data-theme='light'] .sq-page-hero h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.04; margin: 0; max-width: 640px; } :root[data-theme='light'] .sq-page-hero .sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #1E4A73; max-width: 560px; margin: 24px 0 0; } :root[data-theme='light'] .sq-page-hero .sq-hero-ctas { margin-top: 32px !important; gap: 14px; } @media (max-width: 900px) { :root[data-theme='light'] .sq-page-hero-art { object-position: 70% top; } :root[data-theme='light'] .sq-page-hero-scrim { background: linear-gradient(180deg, rgba(246, 241, 228, 0.35) 0%, rgba(246, 241, 228, 0.35) 30%, rgba(246, 241, 228, 0.9) 48%, rgba(246, 241, 228, 0.96) 100%); } } /* ---------- portfolio: plates in cobalt ink ---------- */ :root[data-theme='light'] .sq-filter { border-top: 1px solid #9BB4D0; border-bottom: 1px solid #9BB4D0; padding: 12px 0; gap: 8px; } :root[data-theme='light'] .sq-filter button { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.14em; font-size: 16px; border: 1px solid #9BB4D0; border-radius: 0; color: #2F5F8A; padding: 8px 16px; background: transparent; } :root[data-theme='light'] .sq-filter button:hover { border-color: #2F5F8A; color: #0F2740; } :root[data-theme='light'] .sq-filter button.active { background: transparent; border-color: #163A5C; color: #0F2740; box-shadow: inset 0 -2px 0 #163A5C; } :root[data-theme='light'] .sq-pitem { border-radius: 0; border: 1px solid #9BB4D0; background: #F6F1E4; padding: 12px; box-shadow: none; } :root[data-theme='light'] .sq-pitem:hover { transform: none; background: #F3EBDD; border-color: #9BB4D0; box-shadow: none; } :root[data-theme='light'] .sq-pitem .thumb { border: 1px solid #E8DFD0; background: #F6F1E4; } :root[data-theme='light'] .sq-pitem .thumb img { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.4) brightness(0.92) contrast(1.05); mix-blend-mode: multiply; transition: filter 0.5s, transform 0.8s var(--ease); } :root[data-theme='light'] .sq-pitem:hover .thumb img { filter: none; mix-blend-mode: normal; transform: scale(1.03); } :root[data-theme='light'] .sq-pitem .meta { padding: 14px 4px 6px; align-items: baseline; } :root[data-theme='light'] .sq-pitem .meta h3 { font-size: 1.3rem; line-height: 1.15; } :root[data-theme='light'] .sq-pitem .meta .cat { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.14em; font-size: 13px; color: #2F5F8A; } /* ---------- forms ---------- */ :root[data-theme='light'] .sq-form label { font-family: var(--font-body); font-variant-caps: all-small-caps; letter-spacing: 0.18em; font-size: 15px; font-weight: 400; color: #2F5F8A; margin-bottom: 6px; } :root[data-theme='light'] .sq-form input, :root[data-theme='light'] .sq-form textarea { background: #F6F1E4; border: 1px solid #9BB4D0; border-radius: 0; padding: 12px 14px; font-size: 17px; color: #163A5C; } :root[data-theme='light'] .sq-form input:focus, :root[data-theme='light'] .sq-form textarea:focus { border-color: #2F5F8A; box-shadow: 0 0 0 3px rgba(47, 95, 138, 0.12); } :root[data-theme='light'] .sq-form-msg { border-radius: 0; } :root[data-theme='light'] .sq-form-msg.ok { background: #F3EBDD; border: 1px solid #2F5F8A; color: #0F2740; } /* ---------- lessons, tiers ---------- */ :root[data-theme='light'] .sq-lesson { background: #F6F1E4; border: 1px solid #9BB4D0; border-radius: 0; box-shadow: none; } :root[data-theme='light'] .sq-lesson .sq-video { border-radius: 0; border: 1px solid #9BB4D0; box-shadow: none; background: #F3EBDD; } /* Engraved lesson plates: the day plate replaces the poster; posters without a plate are tinted cobalt like the portfolio thumbs. */ :root[data-theme='light'] .sq-lesson .sq-video .sq-lesson-plate { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } :root[data-theme='light'] .sq-lesson .sq-video--plated > img:not(.sq-lesson-plate) { display: none; } :root[data-theme='light'] .sq-lesson .sq-video:not(.sq-video--plated) > img { filter: invert(1) grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.6) brightness(0.96) contrast(1.05); mix-blend-mode: multiply; } :root[data-theme='light'] .sq-lesson .sq-video .play { border: 1px solid #2F5F8A; background: rgba(246, 241, 228, 0.9); color: #2F5F8A; } :root[data-theme='light'] .sq-lesson .sq-video:hover .play { background: #2F5F8A; color: #F6F1E4; transform: none; } :root[data-theme='light'] .sq-lesson .idx, :root[data-theme='light'] .sq-lesson summary, :root[data-theme='light'] .sq-lesson .chapters .t { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.16em; font-size: 14px; color: #2F5F8A; } :root[data-theme='light'] .sq-lesson h3 { font-size: 1.45rem; } :root[data-theme='light'] .sq-lesson .tagline { color: #1E4A73; } :root[data-theme='light'] .sq-tier { position: relative; background: rgba(243, 235, 221, 0.8); border: 1px solid #9BB4D0; border-radius: 0; box-shadow: none; padding: 30px 30px 28px; } :root[data-theme='light'] .sq-tier:hover { transform: none; box-shadow: none; border-color: #9BB4D0; } :root[data-theme='light'] .sq-tier.pop { border-color: #2F5F8A; } :root[data-theme='light'] .sq-tier.pop::before { content: ''; position: absolute; inset: 6px; border: 1px solid #9BB4D0; pointer-events: none; } :root[data-theme='light'] .sq-tier .flag { background: #F6F1E4; color: #2F5F8A; border: 1px solid #2F5F8A; border-radius: 0; padding: 4px 12px; font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: lowercase; letter-spacing: 0.18em; font-size: 14px; font-weight: 400; } :root[data-theme='light'] .sq-tier h3 { font-size: 1.5rem; margin-bottom: 14px; } :root[data-theme='light'] .sq-tier .price { font-size: 2.8rem; font-weight: 500; line-height: 1; color: #0F2740; border-top: 1px solid #9BB4D0; padding-top: 16px; margin-bottom: 22px; } :root[data-theme='light'] .sq-tier .price small { font-family: var(--font-body); font-variant-caps: all-small-caps; letter-spacing: 0.14em; font-size: 15px; color: #2F5F8A; } :root[data-theme='light'] .sq-tiers + p.muted { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important; color: #1E4A73; } /* ---------- footer ---------- */ :root[data-theme='light'] .sq-footer { background: #F3EBDD; border-top: 1px solid #9BB4D0; } :root[data-theme='light'] .sq-footer h4 { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.2em; font-size: 15px; font-weight: 400; color: #2F5F8A; border-bottom: 1px solid #9BB4D0; padding-bottom: 8px; margin-bottom: 12px; } :root[data-theme='light'] .sq-footer a { color: #1E4A73; font-size: 16px; } :root[data-theme='light'] .sq-footer a:hover { color: #0F2740; } :root[data-theme='light'] .sq-footer p.muted { color: #1E4A73; font-size: 15.5px; } :root[data-theme='light'] .sq-footer-base { border-top: 1px solid #9BB4D0; font-family: var(--font-body); font-variant-caps: all-small-caps; letter-spacing: 0.14em; font-size: 14px; color: #2F5F8A; } /* ---------- small things ---------- */ :root[data-theme='light'] .sq-totop { border: 1px solid #2F5F8A; background: rgba(246, 241, 228, 0.9); color: #2F5F8A; } :root[data-theme='light'] .sq-totop:hover { background: #2F5F8A; color: #F6F1E4; } :root[data-theme='light'] .sq-thread { background: #9BB4D0; } :root[data-theme='light'] ::selection { background: rgba(47, 95, 138, 0.18); } /* GH-600 overview cards carry the engraved module plates */ :root[data-theme='light'] .sq-card .sq-card-plate { display: block; width: 100%; aspect-ratio: 5 / 2; max-height: 170px; object-fit: cover; object-position: center 40%; border: 1px solid #9BB4D0; margin-bottom: 18px; } /* ---------- legal / generic page: sticky index beside the document ---------- */ :root[data-theme='light'] .sq-legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; } :root[data-theme='light'] .sq-legal-index { position: sticky; top: 110px; } :root[data-theme='light'] .sq-legal-index-title { display: block; font-family: var(--font-body); font-variant-caps: all-small-caps; letter-spacing: 0.2em; font-size: 14px; color: #5B7FA6; border-bottom: 1px solid #9BB4D0; padding-bottom: 8px; margin-bottom: 10px; } :root[data-theme='light'] .sq-legal-index ul { list-style: none; margin: 0; padding: 0; } :root[data-theme='light'] .sq-legal-index li.lvl2 { margin-top: 12px; } :root[data-theme='light'] .sq-legal-index li.lvl2 a { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: #0F2740; } :root[data-theme='light'] .sq-legal-index li.lvl3 a { font-family: var(--font-body); font-variant-caps: all-small-caps; letter-spacing: 0.14em; font-size: 14px; color: #2F5F8A; display: block; padding: 3px 0 3px 14px; border-left: 1px solid #E8DFD0; } :root[data-theme='light'] .sq-legal-index a { text-decoration: none; } :root[data-theme='light'] .sq-legal-index a:hover { color: #0F2740; } :root[data-theme='light'] .sq-legal-index li.lvl3 a:hover { border-left-color: #2F5F8A; } :root[data-theme='light'] .sq-content h2 { font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 6px; } :root[data-theme='light'] .sq-content h2:not(:first-child) { border-top: 1px solid #9BB4D0; padding-top: 36px; margin-top: 48px; } :root[data-theme='light'] .sq-content h3 { font-family: var(--font-body); font-variant-caps: all-small-caps; letter-spacing: 0.2em; font-size: 15px; font-weight: 400; color: #2F5F8A; border-bottom: 1px solid #E8DFD0; padding-bottom: 6px; margin: 30px 0 12px; } :root[data-theme='light'] .sq-content p { font-size: 17px; line-height: 1.65; } :root[data-theme='light'] .sq-content p em { font-family: var(--font-display); font-size: 1.15em; color: #1E4A73; } @media (max-width: 900px) { :root[data-theme='light'] .sq-legal { grid-template-columns: 1fr; gap: 24px; } :root[data-theme='light'] .sq-legal-index { position: static; } :root[data-theme='light'] .sq-legal-index ul { display: flex; flex-wrap: wrap; gap: 6px 18px; } :root[data-theme='light'] .sq-legal-index li.lvl2 { flex-basis: 100%; margin-top: 8px; } :root[data-theme='light'] .sq-legal-index li.lvl3 a { border-left: 0; padding: 2px 0; } } /* free-standing h3 inside a split column (masterclass resources) matches the panel headings */ :root[data-theme='light'] .sq-split > div:not(.sq-panel) > h3 { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.2em; font-size: 15px !important; font-weight: 400; color: #2F5F8A; border-bottom: 1px solid #9BB4D0; padding-bottom: 8px; margin: 28px 0 14px; } /* ---------- decor plates (day only) ---------- */ :root[data-theme='light'] .sq-decor { display: block; margin: 40px 0; } :root[data-theme='light'] .sq-decor img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid #9BB4D0; background: #F3EBDD; } :root[data-theme='light'] .sq-decor--strip { margin: 56px 0 64px; } :root[data-theme='light'] .sq-decor--strip img { aspect-ratio: 4 / 1; object-position: center 45%; } :root[data-theme='light'] .sq-split .sq-decor { margin: 0 0 32px; } :root[data-theme='light'] .sq-split > div > .sq-decor + .sq-panel { margin-top: 0; } :root[data-theme='light'] .sq-split .sq-timeline + .sq-decor { margin-top: 40px; } :root[data-theme='light'] .sq-footer-base { position: relative; display: flex; align-items: center; gap: 18px; } :root[data-theme='light'] .sq-footer-colophon { display: block; width: 96px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; border: 1px solid #E8DFD0; opacity: 0.9; } /* stats band watermark: the compass rose, faint, on the right */ :root[data-theme='light'] .sq-hero + .sq-section > .sq-container { position: relative; } :root[data-theme='light'] .sq-hero + .sq-section > .sq-container::after { content: ''; position: absolute; right: clamp(20px, 4vw, 44px); top: 50%; width: 260px; height: 150px; transform: translateY(-50%); background: url(../img/day/decor/compass-rose.jpg) center / cover no-repeat; opacity: 0.16; pointer-events: none; -webkit-mask: radial-gradient(ellipse at center, #000 45%, transparent 72%); mask: radial-gradient(ellipse at center, #000 45%, transparent 72%); } @media (max-width: 800px) { :root[data-theme='light'] .sq-hero + .sq-section > .sq-container::after { display: none; } } /* header between 901px and 1200px: keep links and the button on one line */ :root[data-theme='light'] .sq-nav a { white-space: nowrap; } @media (min-width: 901px) and (max-width: 1200px) { :root[data-theme='light'] .sq-nav { gap: 16px; } :root[data-theme='light'] .sq-nav a:not(.sq-btn) { font-size: 15px; letter-spacing: 0.1em; } :root[data-theme='light'] .sq-nav .sq-btn { padding: 7px 12px; font-size: 14px; letter-spacing: 0.1em; } } :root[data-theme='light'] .sq-more-count { font-family: var(--font-body); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: 0.16em; font-size: 14px; color: #5B7FA6; } :root[data-theme='light'] .sq-pgrid ~ .sq-archive-note { margin-top: 4rem; } /* about: timeline boxed and aligned to the story's first line; full-bleed parallax plate below */ :root[data-theme='light'] .sq-about-split { align-items: start; } :root[data-theme='light'] .sq-timeline-box { background: rgba(243, 235, 221, 0.8); border: 1px solid #2F5F8A; padding: 30px 30px 22px; position: relative; } :root[data-theme='light'] .sq-timeline-box::before { content: ''; position: absolute; inset: 8px; border: 1px solid #9BB4D0; pointer-events: none; } :root[data-theme='light'] .sq-timeline-box .sq-timeline { margin-top: 0; } /* strip plates with parallax: the frame keeps the 4:1 ratio, the taller image drifts inside it */ :root[data-theme='light'] .sq-decor--strip[data-parallax] { position: relative; overflow: hidden; aspect-ratio: 4 / 1; border: 1px solid #9BB4D0; background: #F3EBDD; } :root[data-theme='light'] .sq-decor--strip[data-parallax] img { position: absolute; left: 0; top: -35%; width: 100%; height: 170%; aspect-ratio: auto; border: 0; object-fit: cover; object-position: center 45%; will-change: transform; } :root[data-theme='light'] .sq-about-split + * { margin-top: 0; } :root[data-theme='light'] .sq-decor--strip.sq-plate-band { margin: 56px 0 104px; } :root[data-theme='light'] .sq-filter { padding: 12px clamp(20px, 4vw, 44px); } /* filter bar (day): centred, equal buttons; the portfolio bar fits its seven buttons on one line */ :root[data-theme='light'] .sq-filter { justify-content: center; } :root[data-theme='light'] .sq-filter button { flex: 0 1 200px; min-width: 150px; text-align: center; } :root[data-theme='light'] .sq-filter--fill { flex-wrap: nowrap; } :root[data-theme='light'] .sq-filter--fill button { flex: 1 1 0; min-width: 0; white-space: nowrap; font-size: 14px; letter-spacing: 0.1em; padding: 8px 6px; } @media (max-width: 1100px) { :root[data-theme='light'] .sq-filter--fill { flex-wrap: wrap; } :root[data-theme='light'] .sq-filter--fill button { flex: 0 1 200px; min-width: 150px; } }