/* GENERATED FILE - DO NOT EDIT BY HAND. Built by build/site.mjs. */ /* * THE v3 EDITORIAL DIRECTION, approved 2026-09-08 in the design handoff * "QLT Home v3" / "QLT Shop v3". Three families this time, each with one job: * Libre Bodoni 600 for every headline and display number (the handoff tried * Bodoni Moda 400 first and found it too thin to read at these sizes), Manrope * for all body copy and UI labels, Bricolage Grotesque 800 for the QLT * wordmark and nothing else. Self-hosted for the same reason Archivo and * Plus Jakarta Sans are — see the preload note in head(). */ @font-face{font-family:'Libre Bodoni';font-style:normal;font-weight:600;font-display:swap; src:url(libre-bodoni.woff2) format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap; src:url(manrope.woff2) format('woff2')} @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap; src:url(bricolage-grotesque.woff2) format('woff2')} /* Kept for pages the v3 pass has not reached yet (see the file's own note in homePage/patternsPage): those still set font-family explicitly to these, so the faces stay registered until every page reads the new tokens. */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap; src:url(archivo.woff2) format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700; font-display:swap;src:url(plus-jakarta-sans.woff2) format('woff2')} :root{ /* THE v3 PALETTE. Two grounds only, per page (cream + clay), ink for bands and the footer — see "Design tokens" in the v3 handoff. */ --paper:#EFE9DE; --cream-light:#F4EFE7; --cream-lightest:#F7F3EB; --clay:#A2917A; --ink:#241C14; --ink-headline:#231B13; --body-ink:#231F19; --muted:#4B4438; --faint:#6E6455; --foot-muted:#A79C89; --foot-link:#C9BFAE; --foot-link-bright:#DCD3C4; --rust:#8A3A1E; --plate-on-image:rgba(36,28,20,.86); --line-on-cream:rgba(36,28,20,.16); --line-on-clay:rgba(36,28,20,.24); --line-on-ink:rgba(239,233,222,.16); /* Compatibility aliases: pages the v3 pass has not reached still read the old names. Both sides of each alias now agree, so a page redesigned later picks up the same colours whichever name it reads. */ --dark:var(--ink); --tint:var(--paper); --card:#FFFFFF; --line:var(--line-on-cream); --soft:var(--cream-light); --accent:var(--rust); --accent-fg:var(--cream-lightest); --green:var(--ink); --green-dark:var(--rust); --cream:var(--clay); --cream-ink:var(--cream-lightest); --burgundy:var(--rust); --burgundy-dark:#6E2E17; --orange:var(--rust); --orange-dark:#6E2E17; --blue:var(--ink); --blue-light:var(--faint); --stage-burgundy:var(--rust); --stage-orange:#B0592E; --stage-blue:#6E7C86; --stage-olive:#7C6A2E; --stage-cream:var(--clay); --green-tint:var(--cream-light); /* * THE TEXT SCALE. Six sizes, and body copy uses only these. * * There were sixteen distinct sizes rendering across the site — 12.16, * 12.48, 12.8, 13.12, 13.44, 13.76, 14.08, 14.4, 14.72, 15.04, 15.2, 16 and * up — because a dozen components each picked their own value and several * were fluid clamps landing wherever the viewport put them. Nobody chose * that; it accumulated. Anything that reads as a sentence now names one of * these, so a size can only change on purpose. The v3 handoff raised every * size under 15px by 1.5px "for older customers" — folded in here rather * than as a second scale. */ --fs-micro:.815rem; --fs-fine:.9rem; --fs-small:1rem; --fs-body:1.03rem; --fs-lead:1.19rem; --fs-reading:1.35rem; --lab:linear-gradient(120deg,#8A3A1E 0%,#A2917A 55%,#6E6455 100%); --display:'Libre Bodoni',Georgia,'Times New Roman',serif; --body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; --wordmark:'Bricolage Grotesque',var(--display); --wrap:1340px; --pad:clamp(20px,5vw,44px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:hidden} body{margin:0;background:var(--paper);color:var(--body-ink); font:400 1rem/1.62 var(--body);overflow-wrap:break-word;-webkit-font-smoothing:antialiased} img,svg,iframe{max-width:100%;display:block} img{height:auto} picture{display:contents} a{color:var(--body-ink);text-decoration:none} a:hover{color:var(--faint)} /* Libre Bodoni carries every headline. No radius, no shadow anywhere in v3 — depth comes from a change of ground colour and a hairline, never a blur. */ h1,h2,h3{margin:0 0 .5em;font-family:var(--display);font-weight:600;line-height:1.08; letter-spacing:-.015em;color:var(--ink-headline)} h1{font-size:clamp(2.1rem,4.4vw,3.75rem);line-height:1.06} h2{font-size:clamp(1.7rem,3.1vw,2.75rem);line-height:1.05} h3{font-size:clamp(1rem,1.5vw,1.125rem);font-weight:600;letter-spacing:-.01em} p{margin:0 0 1em} ul,ol{margin:0 0 1em;padding:0} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em} :focus-visible{outline:3px solid var(--rust);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:9;background:var(--ink);color:var(--paper);padding:10px 14px} /* A heading a page needs (every page has exactly one h1) but has nothing left to show visually — the Colour Lab page dropped its banner and its own headline restated what the h1 already says. */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%} .wrap.narrow{max-width:44rem} /* ---- header (v3) ---- Clay bar, a text wordmark in Bricolage Grotesque rather than the logo image, and a square (no-radius) button. Site-wide: every page shares one header, so this is the one part of v3 every page gets even before its own redesign. */ .site-head{background:var(--clay)} .head-row{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap; padding:20px var(--pad);max-width:var(--wrap);margin:0 auto; font-size:var(--fs-fine);font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink)} .mark{display:flex;align-items:center;flex:none;font-family:var(--wordmark); font-weight:800;font-size:1.375rem;letter-spacing:-.02em;color:var(--ink)} .mark img{height:28px;width:auto} /* Right, against the button, rather than centred between the mark and it. margin-left:auto does the pushing; the narrow-width rule below puts the bar back on its own row and cancels both. */ .nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:0 0 0 34px} .nav a{color:var(--ink);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent} .nav a:hover{color:#3F3830} .nav a[aria-current]{border-bottom-color:var(--ink)} /* The hover dropdown this bar once carried (Inspiration > Bedrooms/Seasonal) is gone — both are filters on the Inspiration page now — so every item is a plain link and the bar needs no submenu styling. */ .head-cta{flex:none;margin-left:auto;background:var(--ink);color:var(--cream-lightest); padding:12px 20px;font-size:var(--fs-fine);font-weight:700;letter-spacing:.16em; text-decoration:none} .head-cta:hover{background:var(--paper);color:var(--ink)} /* The hamburger. Hidden until has-js says the drawer behaviour below is live (see NAV_TOGGLE_SCRIPT); hidden above 820px in any case, where the plain link row still fits on one line. */ .nav-toggle{display:none;order:3;align-items:center;gap:9px;width:100%; padding:13px 2px;margin-top:2px;background:transparent;border:0; border-top:1px solid var(--line-on-cream);font:inherit;font-weight:700; font-size:var(--fs-fine);letter-spacing:.16em;text-transform:uppercase; color:var(--ink);cursor:pointer;text-align:left} .nav-toggle-bars{display:inline-flex;flex-direction:column;justify-content:center; gap:4px;width:20px;height:20px;flex:none} .nav-toggle-bars span{display:block;height:2px;background:var(--ink)} @media (max-width:820px){ .head-row{justify-content:space-between} html.has-js .nav-toggle{display:flex} html.has-js .nav{order:4;width:100%;margin:0;display:none;flex-direction:column; align-items:stretch;gap:0;letter-spacing:.06em} html.has-js .nav.is-open{display:flex} html.has-js .nav a{width:100%;padding:14px 2px;border-bottom:1px solid var(--line-on-cream)} html:not(.has-js) .nav{order:3;width:100%;margin:0;flex-wrap:wrap;letter-spacing:.06em} html:not(.has-js) .nav a{padding:9px 0} } /* ---- footer (v3) ---- */ .site-foot{background:var(--ink);color:var(--foot-link);margin-top:clamp(56px,8vw,96px); padding:64px var(--pad) 34px} .foot-grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:32px 40px; grid-template-columns:2fr repeat(3,minmax(min(100%,140px),1fr))} @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} .foot-brand p{color:var(--foot-muted);font-family:var(--body);font-weight:400; font-size:var(--fs-small);max-width:38ch;margin:.5em 0 0} .foot-mark{font-family:var(--wordmark)!important;font-weight:800!important; font-size:1.875rem!important;letter-spacing:-.02em!important; color:var(--cream-lightest)!important;margin:0!important} .foot-col h2{font-family:var(--body);font-size:var(--fs-micro);font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--foot-muted);margin:0 0 .9em} .foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} /* Padding, not just line-height, widens the tap area — these measured 22px tall on a phone otherwise, the smallest hit target on the site. */ .foot-col a{display:inline-block;padding:9px 0;color:var(--foot-link-bright); font-size:var(--fs-small);text-decoration:none} .foot-col a:hover{color:#fff} .foot-capture{max-width:var(--wrap);margin:36px auto 0} .foot-prefer{margin:18px 0 6px} .foot-prefer p{margin:0} .foot-prefer .prefer{display:inline-block;border:1px solid var(--foot-link);padding:8px 14px; text-decoration:none;font-weight:600;margin-right:10px;color:var(--foot-link-bright)} .foot-prefer .prefer:hover{background:var(--foot-link);color:var(--ink)} .foot-bar{max-width:var(--wrap);margin:34px auto 0;padding-top:18px; border-top:1px solid var(--line-on-ink);display:flex;flex-wrap:wrap;gap:8px 32px; justify-content:space-between} .foot-bar p{margin:0;font-size:var(--fs-fine);color:var(--foot-muted);max-width:60ch} .foot-bar a{color:var(--foot-link-bright);text-decoration:underline} /* ================================================================ v3 HOME + SHOP — the 2026-09-08 editorial redesign. Own class names throughout ("v3-" prefixed), rather than reusing .band, .hero, .cta and the rest: those still carry the pages this pass has not reached, and a shared class touched here would restyle them too. When a page is redesigned later it should fold into these rules rather than grow a third set. ================================================================ */ .v3-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%} /* The numbered eyebrow row every v3 section opens on: number left, label right, hairline below. Numbering restarts at 1 on each page. */ .v3-no{display:flex;justify-content:space-between;padding:16px 0; font-size:var(--fs-fine);font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--faint);border-bottom:1px solid var(--line-on-cream)} .v3-clay .v3-no{border-bottom-color:var(--line-on-clay)} .v3-ink .v3-no{border-bottom-color:var(--line-on-ink);color:var(--foot-muted)} .v3-band{background:var(--paper)} .v3-band.v3-clay{background:var(--clay)} .v3-band.v3-ink{background:var(--ink);color:var(--foot-link)} /* The ink strip under the hero on every v3 page. */ .v3-strip{margin:0;background:var(--ink);color:var(--paper);text-align:center; font-size:var(--fs-fine);font-weight:700;letter-spacing:.18em;text-transform:uppercase; padding:14px 20px} /* ---- hero ---- */ .v3-hero{position:relative;overflow:hidden;min-height:660px;display:flex} .v3-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:76% 46%} .v3-hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg, var(--clay) 0%,var(--clay) 30%,rgba(162,145,122,.9) 42%, rgba(162,145,122,.35) 54%,rgba(162,145,122,0) 64%)} .v3-hero-inner{position:relative;z-index:2;flex:1;max-width:var(--wrap);width:100%; margin:0 auto;padding:56px var(--pad) 72px;box-sizing:border-box;display:flex; align-items:center;animation:fadeUp .6s ease both} .v3-hero-copy{max-width:520px} .v3-hero-copy .v3-eyebrow{font-size:var(--fs-fine);font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:var(--ink);margin:0 0 24px} .v3-hero-copy h1{margin:0 0 22px} .v3-hero-copy p{font-size:1.125rem;line-height:1.6;margin:0 0 32px;color:#2C271F;max-width:27.5rem} @media (prefers-reduced-motion:reduce){.v3-hero-inner{animation:none}} /* ---- buttons (v3: square, instant colour swap, no shadow) ---- */ .v3-btn{display:inline-block;padding:15px 26px;font-size:var(--fs-fine);font-weight:700; letter-spacing:.18em;text-transform:uppercase;text-decoration:none} @media (min-width:480px){.v3-btn{white-space:nowrap}} .v3-btn-fill{background:var(--ink);color:var(--cream-lightest)} .v3-btn-fill:hover{background:var(--paper);color:var(--ink)} .v3-btn-fill-cream{background:var(--cream-lightest);color:var(--ink)} .v3-btn-fill-cream:hover{background:var(--clay);color:var(--ink)} .v3-btn-line{color:var(--ink);border-bottom:1px solid var(--ink);padding:0 0 5px} .v3-btn-line:hover{color:var(--faint)} .v3-btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;animation:fadeUp .6s ease both} /* ---- NO.1 the stakes, centred ---- */ .v3-stakes{max-width:45rem;margin:0 auto;text-align:center;padding:86px 0 92px} .v3-stakes p{font-size:1.09375rem;color:var(--muted);line-height:1.7;margin:0} /* ---- NO.2 Colour Lab: no copy at all — a full-bleed Cayenne & Glass banner with the screen recording set inside a monitor. A deliberate exception to "no radius, no shadow": the founder wanted this one mark to read as a real desktop monitor (aluminum body, rounded bezel, a lifted shadow, a proper stand) rather than a flat diagram, per her own reference photo. */ .v3-lab-banner{position:relative;display:block;width:100%; height:clamp(420px,46vw,600px);background-size:cover;background-position:center} .v3-lab-overlay{position:absolute;inset:0;background:rgba(20,16,12,.58)} /* The founder, 2026-09-10: give this more breathing room — the screen should be a large part of the banner, but not edge to edge, so the Cayenne & Glass artwork still shows above and below the monitor rather than only around its sides. */ .v3-monitor{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; align-items:center;justify-content:center;padding:48px 24px} .v3-monitor-body{width:min(80%,32rem); background:linear-gradient(165deg,#F4F4F2 0%,#DEDEDA 55%,#C9C9C4 100%); border-radius:22px;padding:16px 16px 40px; box-shadow:0 40px 70px rgba(10,8,6,.4),inset 0 1px 0 rgba(255,255,255,.6)} .v3-monitor-screen{aspect-ratio:16/10;background:#000;border-radius:7px;overflow:hidden; box-shadow:inset 0 0 0 2px rgba(0,0,0,.55)} .v3-monitor-screen video{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} .v3-monitor-neck{width:70px;height:52px; background:linear-gradient(180deg,#DBDBD7 0%,#B7B7B2 100%); clip-path:polygon(32% 0,68% 0,100% 100%,0 100%)} .v3-monitor-base{width:230px;height:16px;border-radius:50%; background:linear-gradient(180deg,#D2D2CD 0%,#A8A8A3 100%); box-shadow:0 10px 22px rgba(10,8,6,.3)} /* ---- NO.3 the quilt itself ---- */ .v3-quilt-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;animation:fadeUp .6s ease both} @media (max-width:820px){.v3-quilt-grid{grid-template-columns:1fr}} .v3-quilt-art{position:relative;max-height:620px;width:fit-content;margin:0 auto} .v3-quilt-art img{max-height:620px;width:auto;display:block} .v3-quilt-inset{position:absolute;right:-18px;bottom:-18px;width:22%} .v3-quilt-body h2{margin:0 0 16px} .v3-quilt-body p{font-size:var(--fs-lead);color:var(--muted);line-height:1.6;margin:0} /* ---- NO.4 inside the pattern, five cards on a hairline grid ---- */ .v3-inside-head{max-width:41rem;padding:108px 0 64px} .v3-inside-head p{font-size:var(--fs-lead);color:#3A3226;margin:0} /* Borders on each card, not a shared background behind a grid gap: the handoff's own gap-reveals-background technique leaves a filled "hole" wherever a row is not completely full (5 cards in a 2-column mobile row is an odd number), since an empty grid cell still shows the container's background. A border per card draws a hairline only where a card exists. */ .v3-cards-hair{display:grid;grid-template-columns:repeat(5,1fr)} @media (max-width:900px){.v3-cards-hair{grid-template-columns:repeat(2,1fr)}} .v3-inside-card{background:var(--clay);padding:28px 22px 34px;margin-bottom:112px;min-width:0; border-right:1px solid rgba(36,28,20,.28);border-bottom:1px solid rgba(36,28,20,.28)} .v3-inside-card svg{display:block;margin-bottom:16px} .v3-inside-card .lbl{font-size:var(--fs-fine);font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--ink);margin:0 0 14px} .v3-inside-card .promise{font-family:var(--display);font-weight:600;font-size:1.1875rem; line-height:1.3;color:var(--ink-headline);margin:0 0 10px} .v3-inside-card .support{font-size:var(--fs-fine);color:#3F372B;line-height:1.5;margin:0} .v3-inside-card .support a{color:var(--ink);text-decoration:underline} @media (max-width:900px){.v3-inside-card{margin-bottom:1px}} /* ---- NO.5 the pattern, final two-column ---- */ .v3-final{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:56px 0 72px} @media (max-width:820px){.v3-final{grid-template-columns:1fr}} .v3-sizes{display:flex;align-items:flex-start;gap:20px;mix-blend-mode:multiply;flex-wrap:wrap} .v3-sizes figure{margin:0;text-align:center} .v3-sizes img{display:block;margin:0 auto 8px} .v3-sizes figcaption b{display:block;font-size:var(--fs-small);font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--ink)} .v3-sizes figcaption span{display:block;font-size:var(--fs-fine);color:var(--muted)} .v3-size-stack{display:flex;flex-direction:column;align-items:flex-start;gap:18px} .v3-final-copy h2{margin:0 0 18px} .v3-details{margin:0 0 16px} .v3-details summary{font-size:var(--fs-fine);font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--faint);cursor:pointer;padding:8px 0; border-bottom:1px solid var(--line-on-cream)} .v3-details[open] summary{color:var(--ink-headline)} .v3-details p{font-size:.97rem;color:var(--body-ink);border-bottom:1px solid var(--line-on-cream); padding:10px 0;margin:0} .v3-price{font-family:var(--display);font-weight:600;font-size:2.125rem;letter-spacing:-.01em; color:var(--ink-headline);margin:18px 0 4px} .v3-price-note{font-size:var(--fs-fine);font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin:0 0 18px} .v3-beta-trigger{font-size:.84375rem;font-weight:700;font-family:var(--body); border-bottom:1px dotted var(--ink);cursor:help;background:none;border-top:0;border-left:0; border-right:0;padding:0;color:var(--ink)} .v3-beta-pop{position:relative} .v3-beta-tip{position:absolute;top:100%;left:0;margin-top:10px;width:330px;max-width:90vw; background:var(--ink);color:var(--paper);font-size:.8125rem;line-height:1.65;padding:16px 18px; z-index:20} .v3-more-colours{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-on-cream)} .v3-more-colours>p{font-size:var(--fs-fine);font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--faint);margin:0 0 12px} .v3-swatch-cards{display:flex;gap:10px;flex-wrap:wrap} .v3-swatch-card{flex:1 1 180px;background:#E7E0D2;border:1px solid var(--line-on-clay); padding:12px;text-decoration:none;display:block} .v3-swatch-card:hover{background:#DED5C3} .v3-swatch-card .swatches{margin:0 0 8px} .v3-swatch-card .swatches li{flex:1 1 20px;min-width:18px;font-size:.6rem} .v3-swatch-card .lbl{display:block;font-size:var(--fs-fine);letter-spacing:.18em; text-transform:uppercase;color:var(--ink)} /* ---- shop masthead + cards ---- */ .v3-masthead{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px; padding:96px 0 56px} @media (max-width:760px){.v3-masthead{grid-template-columns:1fr}} .v3-masthead h1{margin:0} .v3-masthead p{font-size:1.0625rem;max-width:40rem;color:var(--muted);margin:0} .v3-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} @media (max-width:820px){.v3-cards{grid-template-columns:1fr}} /* A grid item defaults to min-width:auto — its content's own minimum, not 0 — so a long uppercase, letter-spaced word (a fabric name, a button label) can hold a card wider than its track and overflow the viewport. Every v3 grid/flex item that can carry that kind of text gets min-width:0 so it shrinks with its track instead. */ .v3-card{display:flex;flex-direction:column;min-width:0} .v3-card-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:#c3c9dd} .v3-card-img img{width:100%;height:100%;object-fit:cover} /* The plate already owns the bottom-right corner the render mark defaults to; move it up top so a photographed card doesn't overlap its own price plate. */ .v3-card-img .render-mark{bottom:auto;top:12px} .v3-card-plate{position:absolute;left:0;right:0;bottom:0;background:var(--plate-on-image); padding:22px 22px 24px;color:var(--cream-lightest)} .v3-card-plate h2{font-size:1.875rem;margin:0 0 6px;color:var(--cream-lightest)} .v3-card-plate h2 span{opacity:.72} .v3-card-plate p{font-size:var(--fs-fine);font-weight:700;letter-spacing:.18em; text-transform:uppercase;margin:0;color:var(--cream-light)} .v3-card-body{border:1px solid var(--line-on-cream);border-top:0;padding:22px 22px 24px; display:flex;flex-direction:column;gap:14px;flex:1} .v3-card-body .price{font-family:var(--display);font-weight:600;font-size:1.75rem; white-space:nowrap;margin:0} .v3-card-body .beta{font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em; color:var(--rust);display:block;margin-top:6px} .v3-card-body .desc{font-size:.90625rem;color:var(--muted);margin:0} .v3-card-body .v3-btn-fill{margin-top:auto;width:100%;text-align:center;box-sizing:border-box} .v3-card-body .tiny{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase; color:var(--faint);margin:0} .v3-shop-note{font-size:.90625rem;color:var(--muted);margin:28px 0 0} /* ---- shop coming-soon: full-bleed image, not a split panel ---- */ .v3-coming-full{position:relative;min-height:30rem;background:var(--ink);background-size:cover; background-position:center;display:flex;align-items:center} .v3-coming-overlay{position:absolute;inset:0;background:rgba(46,36,26,.72)} .v3-coming-copy{position:relative;z-index:2;max-width:34rem;padding:56px 0} .v3-coming-copy .v3-eyebrow{font-size:var(--fs-fine);font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--cream-light);margin:0 0 8px} .v3-coming-copy h2{color:var(--cream-lightest);margin:0 0 14px} .v3-coming-copy p{color:var(--cream-light);font-size:1rem;margin:0 0 24px} /* ================================================================ v3 LINEAGE + PATTERN TESTERS + ABOUT — 2026-09-09 editorial redesign, completing the pass started on Home and Shop. Same "v3-" prefix rule. ================================================================ */ /* ---- shared: two-up split, generic across several sections ---- */ .v3-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start; animation:fadeUp .6s ease both} .v3-split.center{align-items:center} @media (max-width:820px){.v3-split{grid-template-columns:1fr}} .v3-figure{margin:0} .v3-figure img{width:100%;display:block} .v3-figure figcaption{font-size:var(--fs-fine);line-height:1.6;color:var(--faint);margin-top:14px} .v3-figure.crop img{aspect-ratio:4/5;object-fit:cover} /* ---- Lineage NO.1: the pattern head ---- */ .v3-kicker{font-size:var(--fs-fine);font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--faint);margin:0 0 26px} .v3-price-block{border-top:1px solid var(--line-on-cream);padding-top:24px;display:flex; align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:24px} .v3-price-big{font-family:var(--display);font-size:2.75rem;letter-spacing:-.01em; color:var(--ink-headline);white-space:nowrap;line-height:1} .v3-price-flag{font-size:.9rem;font-weight:700;letter-spacing:.16em;color:var(--rust)} .v3-btn-outline{border:1px solid rgba(36,28,20,.35);color:var(--ink);padding:14px 26px; font-size:var(--fs-fine);font-weight:700;letter-spacing:.18em;text-transform:uppercase; text-decoration:none;display:inline-block} .v3-btn-outline:hover{background:var(--clay);color:var(--ink)} .v3-shop-note{font-size:var(--fs-fine);line-height:1.6;color:var(--faint);margin-bottom:34px} .v3-accordion{border-top:1px solid var(--line-on-cream);margin-bottom:34px} .v3-acc-row{border-bottom:1px solid var(--line-on-cream)} .v3-acc-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; background:none;border:0;padding:18px 0;cursor:pointer;font:700 var(--fs-small)/1.3 var(--body); color:var(--ink-headline);text-align:left} .v3-acc-sign{font-size:1.25rem;color:var(--faint);line-height:1;flex:none} .v3-acc-body{font-size:var(--fs-small);line-height:1.75;color:var(--muted);padding:0 0 20px; max-width:32.5rem;white-space:pre-line;display:none} .v3-acc-row.on .v3-acc-body{display:block} .v3-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0; border-top:1px solid var(--line-on-cream);border-left:1px solid var(--line-on-cream); margin-bottom:30px} @media (max-width:480px){.v3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} .v3-stat{border-right:1px solid var(--line-on-cream);border-bottom:1px solid var(--line-on-cream); padding:14px 12px;min-width:0} .v3-stat .v{font-family:var(--display);font-size:1.375rem;color:var(--ink-headline);line-height:1; white-space:nowrap} .v3-stat .l{font-size:var(--fs-fine);color:var(--muted);margin-top:6px;text-wrap:balance} /* ---- Lineage NO.2: the quilt, made ---- */ .v3-made-grid{display:grid;grid-template-columns:.62fr .38fr;gap:24px;align-items:start; padding-bottom:96px} @media (max-width:820px){.v3-made-grid{grid-template-columns:1fr}} .v3-made-grid figure{margin:0} .v3-made-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block} .v3-made-grid figcaption{font-size:var(--fs-fine);line-height:1.6;color:#332D24;margin-top:14px} .v3-made-note{border-top:1px solid var(--line-on-clay);padding-top:18px} .v3-made-note .lbl{font-size:var(--fs-fine);font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:#4A4237;margin:0 0 14px} .v3-made-note p{font-size:var(--fs-small);line-height:1.75;color:#332D24;margin:0} /* ---- hairline "get" grid: tags on cream cards, used by Lineage NO.3 and Testers NO.2 alike. auto-fit's minmax(240px,...) has a hard 240px floor per track — below roughly two tracks' worth of viewport it forces a column wider than the screen, so a narrow breakpoint drops to a single flexible 1fr column instead of trusting auto-fit that far down. ---- */ .v3-get-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} @media (max-width:560px){.v3-get-grid{grid-template-columns:1fr}} .v3-get-card{background:var(--paper);padding:26px 22px 34px;min-width:0; border-right:1px solid var(--line-on-cream);border-bottom:1px solid var(--line-on-cream)} .v3-get-card.span2{grid-column:span 2} @media (max-width:900px){.v3-get-card.span2{grid-column:auto}} .v3-tag{display:inline-block;background:var(--ink);color:var(--paper);font-size:.6875rem; font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 9px;margin:0 0 18px} .v3-get-card .ord{font-size:var(--fs-fine);font-weight:700;letter-spacing:.22em;color:#8B8172; margin:0 0 16px} .v3-get-card h3{font-family:var(--display);font-weight:600;font-size:1.3125rem;line-height:1.25; margin:0 0 12px;color:var(--ink-headline)} .v3-get-card p{font-size:var(--fs-fine);line-height:1.65;color:var(--muted);margin:0} /* ---- Lineage NO.7 / testers-style four-up "moves" columns ---- */ .v3-moves{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:104px} @media (max-width:760px){.v3-moves{grid-template-columns:1fr 1fr}} @media (max-width:480px){.v3-moves{grid-template-columns:1fr}} .v3-moves .lbl{border-top:2px solid var(--ink);padding-top:16px;font-size:.78125rem; font-weight:700;letter-spacing:.2em;color:var(--ink-headline);margin:0 0 14px} .v3-moves p{font-size:var(--fs-small);line-height:1.7;color:#332D24;margin:0} /* ---- Lineage NO.8: spec + fabric tables ---- */ .v3-spec-table{max-width:62.5rem;margin-bottom:64px} .v3-spec-row{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px; border-top:1px solid var(--line-on-cream);padding:16px 0} .v3-spec-row .k{font-size:var(--fs-small);font-weight:700;color:var(--ink-headline)} .v3-spec-row .v{font-size:var(--fs-small);line-height:1.7;color:var(--muted);white-space:pre-line} .v3-fabric-table{max-width:62.5rem;padding-bottom:20px} .v3-fabric-head{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,140px); gap:24px;font-size:.71875rem;font-weight:700;letter-spacing:.2em;color:#8B8172;padding-bottom:12px} .v3-fabric-row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,140px); gap:24px;border-top:1px solid var(--line-on-cream);padding:16px 0;align-items:center} .v3-fabric-row .name{display:flex;align-items:center;gap:12px;font-size:var(--fs-small); font-weight:700;color:var(--ink-headline)} .v3-fabric-row .sw{width:22px;height:22px;border:1px solid var(--line-on-clay);flex:none} .v3-fabric-row .cell{font-size:var(--fs-small);color:var(--muted)} .v3-fabric-total{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,140px); gap:24px;border-top:2px solid var(--ink);padding:16px 0;font-weight:700;color:var(--ink-headline)} /* ---- Testers NO.1: stat row on clay. Three real stats — no fourth was invented to fill a 2x2 grid, so this is one row, not a grid with a gap. ---- */ .v3-tester-stats{display:flex;flex-wrap:wrap} .v3-tester-stats .cell{background:var(--clay);padding:30px 26px 34px;flex:1 1 150px;min-width:0; border-left:1px solid var(--line-on-clay)} .v3-tester-stats .cell:first-child{border-left:0} .v3-tester-stats .v{font-family:var(--display);font-size:2.75rem;line-height:1; color:var(--ink-headline);white-space:nowrap} .v3-tester-stats .l{font-size:var(--fs-fine);line-height:1.6;color:#332D24;margin-top:10px} /* ---- Testers NO.3: ask rows ---- */ .v3-ask-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:18px; border-top:1px solid var(--line-on-cream);padding:20px 0} .v3-ask-row .n{font-size:.71875rem;font-weight:700;letter-spacing:.16em;color:#8B8172; padding-top:4px} .v3-ask-row .t{font-size:var(--fs-small);font-weight:700;color:var(--ink-headline);margin:0 0 6px} .v3-ask-row .d{font-size:var(--fs-fine);line-height:1.65;color:var(--muted);margin:0} /* ---- Testers NO.4: the application form ---- */ .v3-form-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start} @media (max-width:820px){.v3-form-grid{grid-template-columns:1fr}} .v3-form{background:var(--paper);padding:40px 36px 44px;display:flex;flex-direction:column; gap:24px} .v3-f{display:flex;flex-direction:column;gap:9px} .v3-f label,.v3-f>span{font-size:.71875rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--faint)} .v3-f input[type=text],.v3-f input[type=email],.v3-f select{font-family:var(--body); font-size:var(--fs-small);color:var(--ink-headline);background:transparent;border:0; border-bottom:1px solid rgba(36,28,20,.35);padding:10px 0;width:100%} .v3-f textarea{font-family:var(--body);font-size:var(--fs-small);color:var(--ink-headline); background:transparent;border:1px solid rgba(36,28,20,.25);padding:12px;resize:vertical;width:100%} .v3-f-check{display:flex;align-items:center;gap:10px;font-size:var(--fs-fine);color:var(--muted); text-transform:none;letter-spacing:normal;font-weight:400} .v3-form-submit{background:var(--ink);color:var(--cream-lightest);border:0;padding:16px 26px; font-family:var(--body);font-size:var(--fs-fine);font-weight:700;letter-spacing:.18em; text-transform:uppercase;cursor:pointer} .v3-form-submit:hover{background:var(--clay);color:var(--ink)} .v3-form-submit[disabled]{cursor:not-allowed;opacity:.7} .v3-form-note{font-size:var(--fs-fine);line-height:1.6;color:var(--faint);margin:0} /* ---- About NO.2: founder cards ---- */ .v3-founders{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--line-on-clay);margin-bottom:104px} @media (max-width:600px){.v3-founders{grid-template-columns:1fr}} .v3-founders-left{display:flex;flex-direction:column;gap:1px;background:var(--line-on-clay)} .v3-founders-right{background:var(--clay);padding:40px 36px 56px} .v3-founder-card{background:var(--clay);padding:40px 36px 56px} .v3-founder-mark{font-family:var(--display);font-size:2.125rem;color:var(--ink);margin:0 0 24px} .v3-founder-card h3{font-family:var(--display);font-size:2rem;line-height:1.15;margin:0 0 10px; color:var(--ink-headline)} .v3-founder-role{font-size:var(--fs-fine);font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:#4A4237;margin:0 0 20px} .v3-founder-card p{font-size:var(--fs-small);line-height:1.75;color:#332D24;margin:0} .v3-founder-photo-sm{max-width:180px} /* ---- About NO.3: a centred line over a full-bleed colourway banner, rather than the half-panel Colour Lab module — this page states a method, it doesn't demo one. ---- */ .v3-colour-band{position:relative;min-height:34.4rem;background-size:cover; background-position:center;display:flex;align-items:center;justify-content:center} .v3-colour-overlay{position:absolute;inset:0;background:rgba(46,36,26,.62)} .v3-colour-no{position:absolute;top:0;left:0;right:0;z-index:2} .v3-colour-no .v3-no{color:var(--foot-muted);border-bottom-color:var(--line-on-ink)} .v3-colour-copy{position:relative;z-index:2;max-width:40rem;text-align:center; padding:40px var(--pad)} .v3-colour-copy h2{color:var(--cream-lightest);margin:0 0 20px} .v3-colour-copy p{color:var(--cream-light);font-size:1rem;line-height:1.7;margin:0 0 30px} .v3-colour-copy .v3-btn{display:inline-block} /* ---- checks / not-claimed, folded into v3 (Testers page) ---- */ .v3-checks{list-style:none;margin:0 0 1.5em;padding:0;display:grid;gap:1px; background:var(--line-on-cream)} .v3-checks li{background:var(--paper);padding:22px 0} .v3-checks h3{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0 0 8px; color:var(--ink-headline)} .v3-checks p{font-size:var(--fs-fine);line-height:1.6;color:var(--muted);margin:0 0 6px} .v3-checks .note{font-size:var(--fs-fine);color:var(--faint)} .v3-plain-list{margin:0;padding-left:1.1em;font-size:var(--fs-small);line-height:1.7; color:var(--muted)} .v3-plain-list li{margin-bottom:.5em} /* ---- bands ---- */ .band{padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line)} .band .wrap{max-width:var(--wrap);padding-left:var(--pad);padding-right:var(--pad)} .band.tint{background:var(--soft)} .band.white{background:var(--card)} .band.dark{background:var(--dark);color:#F4F1E9;border-top-color:#2B2922} .eyebrow{font-size:var(--fs-fine);letter-spacing:.12em;text-transform:uppercase;color:var(--green); font-weight:700;margin:0 0 .8em} .eyebrow a{color:inherit} .lead{font-size:var(--fs-lead);max-width:44rem;color:var(--muted);margin-bottom:2em} .band.dark .lead{color:#B4AC98} .sub{margin-top:2.2em} .note{font-size:var(--fs-small);color:var(--muted);max-width:46rem} .fine{font-size:var(--fs-fine);color:var(--muted)} /* ---- hero ---- */ .hero{position:relative;overflow:hidden;min-height:clamp(460px,68vh,640px);display:flex; align-items:flex-end;background:var(--dark);color:#fff} .hero-frames{position:absolute;inset:0} .hero-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 42%;opacity:0;transition:opacity 1.2s ease} .hero-shot.on{opacity:1} .hero-scrim{position:absolute;inset:0; background:linear-gradient(to top,rgba(20,24,17,.78) 0%,rgba(20,24,17,.42) 42%, rgba(20,24,17,.08) 78%)} .hero-inner{position:relative;z-index:2;max-width:var(--wrap);width:100%;margin:0 auto; padding:clamp(32px,6vw,56px) var(--pad)} /* One line, at every width the site supports. Smaller than a page h1 on purpose — at the global 4rem it ran three lines over the photograph and covered the thing it was selling — and sized in vw rather than capped in ch so the headline stays a single line down to 320px instead of breaking where the character cap happened to fall. The sub-line under it does the explaining anyway. */ .hero h1{color:#fff;max-width:none;margin-bottom:.4em; font-size:clamp(1.15rem,4.15vw,2.5rem);line-height:1.1;text-wrap:nowrap} .hero-sub{font-size:var(--fs-lead);color:rgba(255,255,255,.92);max-width:34rem} /* A page banner rather than the home page's front door: shorter, because the thing being sold is below it. */ .hero.hero-page{min-height:clamp(320px,46vh,440px)} .hero .eyebrow{color:var(--cream)} /* The marker that keeps a photorealistic render from reading as a photograph. Small on purpose: enough to stop the picture claiming something untrue, quiet enough that the design survives being honest. Softened twice at the founder's request. The pill is gone entirely — it was a solid dark chip, then a faint one, and now there is no chip at all: small white type in the corner, held together by its own shadow. That shadow is the last thing keeping it readable on the white-backdrop shots, where a translucent dark pill washed out to about 2.6:1, and it is not available to trade away. This is as quiet as the marker gets while still being a marker; anything further has to move the disclosure to a caption under the picture rather than remove it. */ .render-mark{position:absolute;right:12px;bottom:10px;z-index:3; font-size:.52rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600; color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(8,10,6,.8); pointer-events:none} .pgal-main .shot.photo{position:relative} .pgal-main .shot.photo figcaption{position:absolute;right:12px;bottom:10px;z-index:3;margin:0; font-size:.52rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600; color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(8,10,6,.8);pointer-events:none} /* ---- the stakes ---- A statement, not a column. It was a headline and a paragraph in the left half of a wide white band with nothing in the right half, which reads as a section somebody forgot to finish rather than a pause. Centred, measured to a comfortable line, and given room to be the one moment on the page that stops — the only centred band on a site that is left-aligned throughout, which is what makes it read as deliberate rather than stray. The rule above the headline is that pause made visible. */ .band#stakes{text-align:center;padding:clamp(64px,9vw,116px) 0} .band#stakes .wrap{max-width:56rem} /* No character cap on the headline: at 18ch it broke "You'll know before you / cut." with one word alone on the second line, which looks like a mistake. The band's own measure is enough. */ .band#stakes h2{margin:0 auto .5em} .band#stakes h2::before{content:"";display:block;width:44px;height:3px; background:var(--orange);margin:0 auto clamp(28px,4vw,44px)} .stakes-copy{font-size:var(--fs-reading);line-height:1.6;max-width:42rem; color:var(--ink);margin:0 auto} /* ---- find your colour ---- */ .tones{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.6vw,32px); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .tone{display:block;text-decoration:none;color:var(--ink)} /* Portrait, because a quilt is. The frame was 4:3 when it held a landscape crop of a drawing; the founder's photographs are quilts held up flat at about 3:4, and a landscape window across one cuts the top and bottom off the thing being shown. */ .tone-art{position:relative;display:block;aspect-ratio:3/4;overflow:hidden; background:var(--soft);margin-bottom:14px} .tone-img{width:100%;height:100%;object-fit:contain;display:block; transition:transform .4s ease} /* A 75x96 drawing in a 4:3 frame is cropped rather than squashed; 22% down keeps the quilt's top band out of the crop. A photograph fills it as shot. */ .tone-draw{object-position:50% 22%} .tone:hover .tone-img{transform:scale(1.03)} .tone h3{font-family:var(--display);font-weight:700; font-size:clamp(1.15rem,1.9vw,1.4rem);margin:0 0 .35em} .tone h3 i{font-style:normal;opacity:0;transition:opacity .2s} .tone:hover h3 i,.tone:focus-visible h3 i{opacity:1} .tone p{margin:0 0 .5em;font-size:var(--fs-small);color:var(--muted);max-width:34ch} .tone-count{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase; color:var(--green);font-weight:700} .tone-aside{margin-top:clamp(20px,3vw,32px)} /* ---- colour lab band ---- */ .band.lab{background:var(--lab);color:#fff;border-top:0} .lab-grid{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:grid; gap:clamp(28px,5vw,72px);align-items:center; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))} .lab-copy h2{color:#fff;font-size:clamp(1.45rem,2.6vw,1.9rem)} .lab-copy p{color:rgba(255,255,255,.92);max-width:38rem} .lab-copy .lab-line,.planner-copy .lab-line{font-size:var(--fs-reading);margin-bottom:.7em} .lab-copy .kicker{color:rgba(255,255,255,.78)} .badge{display:inline-block;background:var(--cream);color:var(--burgundy); font-size:var(--fs-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase; padding:6px 13px;border-radius:999px;margin:0 0 1em} /* The COLOUR LAB pill was unreadable, and not by a little: the rule setting every paragraph in this band white is more specific than .badge, and .badge is a paragraph — white at .92 on cream is 1.32:1. It now matches the header's own pill, burgundy under cream-ink, at 9.50:1. */ .band.lab .badge{background:var(--burgundy);color:var(--cream-ink)} .laptop{position:relative} .laptop-img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(20,10,5,.45))} .screen{position:absolute;left:14.3%;top:18%;width:71.5%;height:64.2%;background:var(--paper); display:flex;flex-direction:column;overflow:hidden} .chrome{background:var(--soft);padding:4px 8px;display:flex;align-items:center;gap:4px;flex:none} .chrome .tl{width:6px;height:6px;border-radius:50%;display:block;flex:none} .chrome .r{background:#EE6A5F}.chrome .y{background:#F5BE4F}.chrome .g{background:#61C454} .chrome .url{margin-left:6px;background:#fff;border-radius:999px;padding:1px 8px; font-size:.44rem;color:var(--muted);white-space:nowrap;overflow:hidden} .screen-body{flex:1;display:grid;grid-template-columns:1fr 34%;gap:5px;padding:5px;min-height:0} .screen-quilt{position:relative;background:var(--soft);border-radius:3px;overflow:hidden} .lab-draw{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; padding:3px;opacity:0;transition:opacity .25s} .lab-draw.on{opacity:1} .screen-side{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden} .screen-label{font-size:.4rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);margin:0 0 1px} .lab-pick{display:flex;align-items:center;gap:3px;font:inherit;font-size:.42rem;font-weight:600; color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px; padding:2px 3px;cursor:pointer;text-align:left;line-height:1.15;overflow:hidden; white-space:nowrap;text-overflow:ellipsis} .lab-pick i{width:5px;height:5px;border-radius:1px;flex:none;display:block} .lab-pick.on{border-color:var(--green);background:var(--green-tint)} /* ---- photo link tiles ---- */ .tiles-photo{display:grid;gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))} .ptile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none; background:var(--soft)} .ptile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .ptile:hover img{transform:scale(1.03)} .ptile::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(20,24,17,.72),rgba(20,24,17,0) 62%)} .ptile .badge{position:absolute;left:16px;top:16px;z-index:2;margin:0} .ptile-t{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff; font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.8vw,1.25rem)} /* ---- bands ---- */ .band{padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line)} .band .wrap{max-width:var(--wrap);padding-left:var(--pad);padding-right:var(--pad)} .band.tint{background:var(--soft)} .band.white{background:var(--card)} .band.dark{background:var(--dark);color:#F4F1E9;border-top-color:#2B2922} .eyebrow{font-size:var(--fs-fine);letter-spacing:.12em;text-transform:uppercase;color:var(--green); font-weight:700;margin:0 0 .8em} .eyebrow a{color:inherit} .lead{font-size:var(--fs-lead);max-width:44rem;color:var(--muted);margin-bottom:2em} .band.dark .lead{color:#B4AC98} .sub{margin-top:2.2em} .note{font-size:var(--fs-small);color:var(--muted);max-width:46rem} .fine{font-size:var(--fs-fine);color:var(--muted)} /* ---- ctas ---- */ .cta-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:1.6em 0 0} .cta{display:inline-block;padding:15px 30px;font-weight:600;font-size:.94rem; text-decoration:none;border-radius:999px;border:1.5px solid transparent; transition:background .16s,color .16s,border-color .16s} .cta.primary{background:var(--orange);color:var(--cream-ink);border-color:var(--orange)} .cta.primary:hover{background:var(--orange-dark);border-color:var(--orange-dark); color:var(--cream-ink)} .cta.secondary{background:transparent;color:var(--green);border-color:var(--green); padding:13px 26px} .cta.secondary:hover{background:var(--green);color:var(--cream-ink)} /* On a photo: white outline, white text. */ .cta.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);padding:13px 26px} .cta.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} /* On the Colour Lab gradient, where orange would vanish. Ink read as a hole in the band rather than a button, so the planner's button is the logo's own blue. Dark text on it, because white on #4BA3C3 is 2.87:1 and fails; the ink is 5.25:1 and the lighter hover is 6.43:1. */ .cta.blue{background:var(--blue);color:var(--ink);border-color:var(--blue)} .cta.blue:hover{background:var(--blue-light);border-color:var(--blue-light); color:var(--ink)} .cta.off{background:transparent;color:var(--muted);border-style:dashed; border-color:var(--line);cursor:not-allowed} .cta-reason{font-size:var(--fs-fine);color:var(--muted);max-width:22rem;flex:1 1 14rem} /* ---- forms: the application and the feedback ---- */ .tester-form{display:flex;flex-direction:column;gap:14px;max-width:40rem} .tester-form .f{display:flex;flex-direction:column;gap:4px} .tester-form label{font-weight:600} .tester-form .f-hint{margin:0;font-size:var(--fs-fine);color:var(--muted)} .tester-form input[type=text],.tester-form input[type=email],.tester-form select, .tester-form textarea{font:inherit;padding:.55em .7em;border:1px solid var(--line); border-radius:6px;background:#fff;color:var(--ink);max-width:100%} .tester-form textarea{resize:vertical} .tester-form :disabled{background:var(--paper,#f6f2ea);color:var(--muted);cursor:not-allowed} .tester-form .f-check{display:flex;gap:.6em;align-items:flex-start;font-weight:400} .tester-form .f-check input{margin-top:.3em} .f-group{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:12px} .f-group legend{font-weight:700;letter-spacing:.06em;text-transform:uppercase; font-size:var(--fs-fine);color:var(--muted);margin-bottom:6px} /* ---- swatches ---- */ .swatches{display:flex;list-style:none;margin:0 0 .8em;flex-wrap:wrap;gap:2px} .swatches li{flex:1 1 34px;min-width:30px;aspect-ratio:1;display:flex;align-items:center; justify-content:center;font-size:.62rem;font-weight:700;letter-spacing:.06em} .swatches.large li{flex:1 1 84px;min-width:64px;aspect-ratio:3/2;flex-direction:column;gap:2px; font-size:.7rem} .sw-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6rem;opacity:.85} /* ---- carousel ---- */ .slider{position:relative} .slides{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:24px; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin; overscroll-behavior-x:contain} .slides>li{flex:0 0 clamp(230px,28vw,320px);scroll-snap-align:start} .slides>li>.tile{height:100%} /* The shot fills the card's window the way the drawing does, so a room render and a drawing are the same shape in the row and the row does not jump. */ .slide-shot{position:relative;display:block;aspect-ratio:25/32;overflow:hidden; background:var(--soft)} /* contain, not cover. A card for a quilt shows the whole quilt — the founder's rule, and the reason the full-quilt shot exists (mockupRegister.kinds). The frame is the quilt's own 25:32, so a held-flat shot fills it almost exactly and a room shot letterboxes slightly rather than losing its edges. */ .slide-shot img{width:100%;height:100%;object-fit:contain;display:block} .slider-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:14px} .slider-btn{width:42px;height:42px;border-radius:999px;border:1.5px solid var(--line); background:var(--card);color:var(--ink);font-size:1rem;line-height:1;cursor:pointer} .slider-btn:hover:not(:disabled){border-color:var(--ink)} .slider-btn:disabled{opacity:.35;cursor:default} @media (prefers-reduced-motion:reduce){.slides{scroll-behavior:auto}} /* ---- inspiration: the four-way subset bar, and the family bar it sits above (previously unstyled — plain buttons before the subset bar gave it something to visually match) ---- */ .subset-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px} .subset-pill{font:600 var(--fs-small)/1 var(--body);padding:14px 22px;border:1px solid var(--line); background:var(--card);color:var(--ink);cursor:pointer;border-radius:999px} .subset-pill:hover{border-color:var(--ink)} .subset-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)} .subset-panel{margin-top:8px} .subset-panel .lead{margin:0 0 28px} .family-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px} .fam-pill{display:flex;align-items:center;gap:10px;font:600 var(--fs-fine)/1 var(--body); padding:14px 16px;border:1px solid var(--line);background:var(--card);color:var(--ink); cursor:pointer;border-radius:999px} .fam-pill:hover{border-color:var(--ink)} .fam-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)} .fam-dots{display:inline-flex;gap:3px} .fam-dots i{width:10px;height:10px;border-radius:50%;display:block} .fam-blurb{font-size:var(--fs-fine);color:var(--muted);margin:0 0 28px} /* ---- tiles ---- */ .tiles{display:grid;gap:clamp(18px,2.6vw,32px); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .tiles.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .tiles.four{gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .tiles.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .tiles.small{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))} .tile{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line); padding:0;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease} .tile:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(35,40,31,.12)} .tile img{width:100%;aspect-ratio:25/32;object-fit:cover;background:var(--soft);display:block} .tile-body{padding:14px 16px 16px} .tile-body h3{margin:0 0 .5em;font-family:var(--display);font-weight:700;font-size:1rem; letter-spacing:0;text-transform:uppercase} /* Six swatches at the default 34px-plus flex-basis don't quite fit a 220px tile's content width, so the sixth one wraps onto its own row alone and, with aspect-ratio:1 and nothing beside it to share the row with, grows into a giant square — the same swatch component the shortcuts cards and the Colour Lab's own picker use, just without their compact sizing. */ .tile-body .swatches li{flex:1 1 16px;min-width:16px;font-size:.55rem} .tile-meta{font-size:var(--fs-fine);color:var(--muted);margin:0} .tile-cta{display:block;margin:12px 16px 16px;text-align:right;font-size:var(--fs-fine); font-weight:600;color:var(--green)} /* ---- the system ---- */ .system{list-style:none;display:grid;gap:clamp(20px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))} .system li{border:0;border-radius:18px;padding:24px 20px} /* One text colour per card, at full strength for all three lines. The levels are told apart by size and weight rather than by opacity: a faded fact on a saturated ground is the one thing here that would not survive a contrast check. Measured on each ground, dark or light text as marked: burgundy 9.50, orange 4.99, blue 5.25, olive 5.87, cream 11.43. */ .system li.on-dark{color:var(--cream-ink)} .system li.on-light{color:var(--ink)} .stage-burgundy{background:var(--stage-burgundy)} .stage-orange{background:var(--stage-orange)} .stage-blue{background:var(--stage-blue)} .stage-olive{background:var(--stage-olive)} .stage-cream{background:var(--stage-cream)} .system li .sys-key,.system li .sys-line,.system li .sys-fact{color:inherit} .sys-key{font-size:var(--fs-micro);letter-spacing:.13em;font-weight:700;color:var(--green); text-transform:uppercase} .sys-line{margin:.8em 0 .5em;font-size:var(--fs-small);font-weight:600;line-height:1.35} .sys-fact{font-size:var(--fs-fine);color:var(--muted);margin:0} /* The instruction, at reading size and pointing at what to click. The arrow is decorative and hidden from screen readers: "click the palettes" is the instruction and an arrow read aloud adds nothing. */ .lab-cue{font-size:var(--fs-small);color:var(--cream);font-weight:600; margin:1.4em 0 0;display:flex;align-items:center;gap:.5em;flex-wrap:wrap} .lab-cue span{font-size:1.5em;line-height:1} .lab-cap{text-align:center;font-size:var(--fs-fine);letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.72);margin:14px 0 0} /* ---- founding maker ---- */ .beta-note{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:0 0 1.2em; font-size:var(--fs-small);color:var(--ink)} /* ---- feature / product ---- */ .price{font-family:var(--display);font-weight:700; font-size:clamp(1.4rem,2.6vw,1.9rem);margin:.6em 0 0;display:flex;flex-wrap:wrap; align-items:baseline;gap:.2em .7em} .price .dot{color:var(--faint);font-weight:400} .price a{font-family:var(--body);font-weight:600;font-size:var(--fs-fine); letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy); border-bottom:1.5px solid currentColor} .feature{display:grid;gap:clamp(24px,4vw,56px);align-items:center; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .feature-art{display:block} .feature-art img{width:100%;background:var(--soft)} .feature-body h3{font-size:clamp(1.5rem,2.9vw,2.1rem);letter-spacing:-.03em;font-weight:700} .feature-body h3 a,.card-body h2 a{text-decoration:none;color:var(--ink)} .ptile,.ptile:hover{color:#fff} .kicker{font-size:var(--fs-fine);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .facts{list-style:none;display:grid;gap:10px;margin:1.4em 0 0; grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))} .facts li{background:var(--paper);border:1px solid var(--line);border-radius:14px; padding:14px 16px;font-size:var(--fs-fine);color:var(--muted)} .facts b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--ink); font-weight:700;margin-bottom:2px} /* Above the fold, and visibly not the whole page. On a 2000x940 laptop the product block used to fill the screen exactly, stat tiles at the bottom and nothing under them, so the page read as finished. The art is capped shorter, the bottom padding is smaller, the next band is tinted so its edge shows, and a row of on-page links under the tiles says what is below. */ .product{padding:clamp(28px,4vw,56px) 0 clamp(20px,3vw,36px)} .jump{display:flex;flex-wrap:wrap;gap:.4em 1.1em;align-items:baseline;margin-top:1.3em; font-size:var(--fs-fine)} .jump span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase} .jump a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em} .jump a::after{content:' ↓';color:var(--muted)} /* The band after the product block starts closer, so its heading is what shows under the fold rather than an empty strip of tint. */ .product+.band{padding-top:clamp(22px,3vw,40px)} .product-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:start; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))} /* The whole quilt, on one screen. It was the column's full width, which on a desktop made a 75x96 drawing about 730px tall before the page header was counted — you had to scroll a product shot to see the product. Height is the constraint now and the width follows from the quilt's own proportion. */ .product-art img{display:block;margin:0 auto;width:auto;max-width:100%; max-height:min(60vh,600px);background:var(--tint)} /* The main picture keeps its own proportions. The .shot img width:100% rule is declared later and won over the width:auto above, so a portrait render was forced full-width and capped in height — squashed. Height is the constraint here; the width follows from the picture. */ .product-art .shot img{width:auto;height:auto;max-width:100%;max-height:min(66vh,640px);margin:0 auto} /* ---- the gallery on the pattern page ---- */ .pgal-main .pgal-slide+.pgal-slide{display:none} .pgal.js .pgal-slide{display:none} .pgal.js .pgal-slide.on{display:block} .pgal-main .shot{margin:0} .pgal-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center} .pgal-thumb{width:64px;height:64px;padding:0;border:2px solid var(--line);background:var(--tint); cursor:pointer;overflow:hidden;border-radius:4px;position:relative} .pgal-thumb[aria-pressed="true"]{border-color:var(--ink)} .product-art .pgal-thumb img{width:100%;height:100%;max-height:none;object-fit:cover;margin:0} .pgal-thumb .render-mark{display:none} .prop{font-size:var(--fs-reading);max-width:26rem} /* ---- figures ---- */ /* height:100% here made the caption of every gallery item overlap the note below it. A gallery item is a name paragraph PLUS this figure, so 100% of the item's height is the whole item, name included — the figure overflowed its own grid cell by exactly the height of the name, and the section note, laid out against the shorter grid, ran straight through two captions. The figure grows to fill what is left instead, which is what the 100% was reaching for, and margin-top:auto still pins the caption to the bottom so captions line up across the row. */ .shot{margin:0 0 1em;display:flex;flex-direction:column} .gallery-item{display:flex;flex-direction:column;height:100%} .gallery-item>.shot{flex:1} .shot img{width:100%} .shot figcaption{font-size:var(--fs-fine);color:var(--muted);padding-top:8px;line-height:1.45; margin-top:auto} .shot.render img{background:var(--tint)} .shot.photo img{background:var(--soft)} .gallery.photos .gallery-item{margin-bottom:8px} .gallery{display:grid;gap:clamp(18px,2.6vw,30px); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .gallery-name{font-size:var(--fs-fine);letter-spacing:.12em;text-transform:uppercase;color:var(--muted); margin:0 0 .7em;border-top:2px solid var(--ink);padding-top:8px} /* ---- planner promo ---- */ .planner-promo{display:grid;gap:clamp(22px,3vw,44px); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .planner-strip{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(50%,90px),1fr))} .strip-item span{display:block;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);padding-top:6px} .strip-item img{width:100%;background:var(--paper)} /* ---- package ---- */ .package{list-style:none;display:grid;gap:clamp(18px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .package li{border:1px solid var(--line);padding:20px;background:var(--paper)} .pkg-tag{display:inline-block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase; background:var(--accent);color:var(--accent-fg);padding:3px 8px;margin-bottom:10px} .package h3{margin:0 0 .4em} .package p{margin:0;font-size:var(--fs-small);color:var(--muted)} /* ---- steps ---- */ .steps{list-style:none;counter-reset:s;display:grid;gap:clamp(18px,2.4vw,26px); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .steps li{border-top:2px solid var(--ink);padding-top:14px} .step-key{font-size:var(--fs-fine);letter-spacing:.18em;font-weight:700} .steps p{margin:.6em 0 0;font-size:var(--fs-small);color:var(--muted)} /* ---- tables ---- */ .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.4em} .spec{border-collapse:collapse;width:100%;font-size:var(--fs-small);min-width:min(100%,320px)} .spec caption{text-align:left;font-size:var(--fs-fine);color:var(--muted);padding-bottom:10px} .spec th,.spec td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line); vertical-align:top} .spec thead th{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .spec tbody th{font-weight:600;white-space:nowrap} .spec .total td,.spec .total th{font-weight:700;border-bottom:2px solid var(--ink)} /* ---- catalogue ---- */ .filters{display:flex;flex-wrap:wrap;gap:18px 28px;border:1px solid var(--line);padding:18px; margin-bottom:24px} .filters fieldset{border:0;margin:0;padding:0;min-width:min(100%,160px)} .filters legend{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted); padding:0 0 8px} .filters label{display:block;font-size:var(--fs-small);padding:3px 0} .count{font-size:var(--fs-fine);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* auto-fill, not auto-fit, and a 320px ceiling on a track: with two cards on the shelf auto-fit stretched each to half the page, so the Lineage card was a 600px-wide poster. Empty tracks are the point — the cards stay the size of a card however few there are. */ /* The shop's own heading gives the cards the room: a shorter band and a smaller title than the other pages carry, so the card starts higher. */ #catalogue{padding-top:clamp(18px,2.5vw,30px)} #catalogue h1{font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 .15em} #catalogue .lead{margin:0 0 1.1em;font-size:var(--fs-small)} /* Sized so the whole card, picture to button, sits inside a 900px-tall laptop window with the page heading above it: the founder's test is that the full card is seen without scrolling. */ .cards{display:grid;gap:clamp(18px,2.5vw,28px); grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),225px));justify-content:start} .card{border:1px solid var(--line);padding:10px;background:var(--paper)} .card-body{padding-top:8px} .card-body h2{font-size:1.15rem;margin:0 0 2px} .card-size{font-weight:400;color:var(--muted)} .card .kicker{margin:0 0 .3em;font-size:var(--fs-micro)} .card .price{font-size:1.2rem;margin:.3em 0 0;gap:.1em .45em} .card .price a{font-size:var(--fs-micro)} .card .cta-row{margin-top:.55em} .card .cta-row .cta{padding:.45em .9em;font-size:var(--fs-fine)} .card-art img{width:100%;background:var(--tint)} .card-art .slide-shot{display:block;position:relative} .card-body{padding-top:12px} .card-body h2{font-size:clamp(1.2rem,2vw,1.45rem);margin:0 0 4px} .chips{list-style:none;display:grid;gap:6px;margin:1em 0} .chips li{font-size:var(--fs-fine);border-top:1px solid var(--line);padding-top:6px} .chips span{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase; color:var(--muted)} .card-note{font-size:var(--fs-fine);color:var(--muted);margin:0} .card-note.sizes{margin-top:.6em;color:var(--ink)} .card.coming{border-style:dashed;background:var(--soft);display:flex;align-items:center;animation:fadeUp .6s ease both} /* The Weave card: the design behind the words, the words in white, a dark veil between them so the words read on the pale bars as well as the dark. */ /* Every card is its quilt: the drawing fills the card, the words sit in white at the foot over a veil that darkens toward them. */ .card.woven{border:none;background-size:cover;background-position:center top;position:relative; color:#fff;overflow:hidden;display:flex;align-items:flex-end;min-height:470px;padding:10px} .card.woven::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,8,.06) 0%,rgba(20,12,8,.42) 55%,rgba(20,12,8,.84) 100%)} .card.woven .card-body{position:relative;padding:12px 6px 4px;width:100%} .card.woven h2 a,.card.woven .card-size,.card.woven .kicker,.card.woven .price,.card.woven .price a,.card.woven .fine, .card.woven a,.card.woven .card-note,.card.woven .tiny,.card.woven .price .dot{color:#fff} .card.woven .card-size{opacity:.8} .card.coming.woven .kicker{color:#fff;opacity:.85} .card.woven .price a{text-decoration:underline} .card.woven .fine{opacity:.85} .card.woven .tiny{opacity:.7;font-size:var(--fs-micro);margin:.6em 0 0} .card.coming .card-body{padding-top:0} .card.coming .kicker{color:var(--accent-ink,var(--ink))} .rooms{display:grid;gap:clamp(22px,3vw,36px); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-bottom:28px} .room h3{margin:0 0 10px} .room .shot{margin:0 0 12px} .rooms-sub{margin-top:12px;padding-top:36px;border-top:1px solid var(--line)} /* about: v3-only now — see .v3-split, .v3-founders, .v3-lab (About NO.1-3) */ .v3-founder-photo{position:relative;display:block} .v3-founder-photo img{width:100%;height:auto;display:block} /* ---- colourway ---- */ .cw-head{padding:clamp(32px,5vw,80px) 0} .cw-grid{display:grid;gap:clamp(26px,4vw,60px);align-items:start; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .cw-art img{width:100%;background:var(--tint)} .story-lead{font-size:var(--fs-reading)} .prov{list-style:none;display:grid;gap:10px;margin:0 0 2em} .prov li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;font-size:var(--fs-small); border-top:1px solid var(--line);padding-top:10px} .prov-chip{width:18px;height:18px;border:1px solid var(--line);flex:none;align-self:center} .prov-note{color:var(--muted);flex:1 1 14rem;min-width:0} .metrics{display:grid;gap:12px;margin:1.4em 0; grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))} .metrics dt{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .metrics dd{margin:4px 0 0;font-size:1.3rem;font-weight:650} .warnings{list-style:none;display:grid;gap:8px;margin:0 0 1.4em} .warnings li{font-size:var(--fs-small);border-left:3px solid var(--accent);padding:2px 0 2px 12px; color:var(--muted)} .review{margin-top:2.4em} /* ---- colour lab ---- */ .lab-head{padding-bottom:clamp(20px,3vw,40px)} /* The Colour Lab's own header, on the gradient. lab-head is the shared page-header band — Holiday and About use it too — so this is a modifier rather than a change to it. */ .band.lab-hero{background:var(--lab);color:#fff;border-top:0; padding-bottom:clamp(32px,4vw,52px)} .band.lab-hero h1{color:#fff} .band.lab-hero .eyebrow{color:var(--cream)} .band.lab-hero .lead{color:rgba(255,255,255,.92)} .band.lab-hero .note a{color:#fff;text-decoration:underline} .band.lab-frame{background:var(--soft);border-top:0} .lab{padding-top:clamp(20px,3vw,36px);border-top:0} .frame-wrap{border:1px solid var(--line);background:var(--paper)} /* No box, no cap: LAB_SCRIPT sets the height to match the planner's own content exactly, so the iframe reads as this page continuing rather than a tool in a window. min-height only covers the moment before that script has measured it (or if JS never runs, since