/* inspire-collage.css — the "Nature is in our DNA" collage (live clips that hand over to the product they inspired; motion in assets/about-inspire.js). Moved to the home page 24.9.26 as its last frame; desktop rules from /designed-with-responsibility, tablet + phone compositions from /the-product (noa, 31.7.26). Scoped under .inspire so nothing leaks into other frames. */ .inspire{--gap8:clamp(4px,0.556vw,8px)} .inspire .collage{flex:1;display:flex;gap:var(--gap8);width:100%;min-height:0} .inspire .cola{flex:1;display:flex;flex-direction:column;gap:var(--gap8);min-width:0} .inspire .rowa1{display:flex;gap:var(--gap8);flex:0 0 33.15%;min-height:0} .inspire .rowa2{display:flex;gap:var(--gap8);flex:1;min-height:0} .inspire .colinner{flex:1;display:flex;flex-direction:column;gap:var(--gap8);min-width:0} .inspire .plantcol{flex:0 0 32.68%} .inspire .colb{flex:0 0 24.49%;display:flex;flex-direction:column;gap:var(--gap8)} .inspire .ph{overflow:hidden;position:relative}.inspire .ph img{width:100%;height:100%;object-fit:cover} /* inspiration → product morph (assets/about-inspire.js) the photo lives (svg displacement) → an orange rule sweeps across and reveals the product it inspired → sweeps again back to the living photo */ .inspire .ph.morph .m-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover} .inspire .ph.morph .m-prod{position:absolute;inset:0;width:100%;height:100%;opacity:0} /* the reveal is a SLIDING CLIP BOX (built by the JS): the box slides in on transform while the product counter-slides inside it, so the product never moves on screen and the box's moving edge IS the reveal edge. The orange rule is a child of that edge, so it can never come loose — animating clip-path (main thread) against a transform rule (compositor) was what let them drift apart under load. */ .inspire .ph.morph .m-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;will-change:transform} .inspire .ph.morph .m-clip .m-prod{opacity:1;will-change:transform} .inspire .ph.morph .m-edge{position:absolute;background:var(--prime);opacity:0;pointer-events:none} /* flush INSIDE the box's moving edge — the box clips its own overflow, so a rule hanging outside it would be cut in half */ .inspire .ph.morph .m-clip.h .m-edge{top:0;bottom:0;width:2px;right:0} .inspire .ph.morph .m-clip.v .m-edge{left:0;right:0;height:2px;bottom:0} .inspire .ph.zeb .m-photo,.inspire .ph.zeb .m-prod{transform:scaleX(-1)} /* The horizontal edges belong to the scrolling text blocks, but sit just outside them so they overlap the fixed frame lines exactly at rest. */ .inspire .tboxw{flex:0 0 32.68%;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(12px,1.667vw,24px); position:relative; font-size:var(--sub);font-weight:500;text-transform:lowercase;line-height:1.2;color:var(--dark); background-image: repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px), repeating-linear-gradient(to bottom,var(--prime) 0 16px,transparent 16px 30px), repeating-linear-gradient(to bottom,var(--prime) 0 16px,transparent 16px 30px); background-size:100% 1px,1px 100%,1px 100%; background-position:left bottom,left top,right top; background-repeat:no-repeat} /* top:0, not -1px — INSIDE the box. Drawn outside it, this line lived beyond the reveal's clip-path for the whole 0.82s animation and only popped in when the clip expired, which noa saw as the dash arriving a beat after the section's content. Inside the box it is clipped identically to everything else, so it fades in WITH the content. The 1px shift is invisible; being immune to the clip is not. */ .inspire .tboxw::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px); pointer-events:none} .inspire .gridband{flex:0 0 42.3%;position:relative;background:#fff;display:flex;align-items:center;overflow:hidden;min-height:0} .inspire .gridband .gbg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:107.1%;height:100%} /* The title band was the one text block in the collage with no dash outline at all, while its two neighbours carry one — that is the gap noa spotted. Three sides only: top, bottom and right. The LEFT edge sits exactly on the fixed left rail (measured: 40, rail at 40), and the frame already draws that line — a dash there would be the second stroke on a rail, which is the thing we just finished removing. Drawn on a pseudo, not as a background on .gridband itself: .gbg is a child at 107% width covering the whole box, so an element background would paint underneath it and never be seen. z-index 2 clears both .gbg and the h2 (z-index 1). */ .inspire .gridband::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background-image: repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px), repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px), repeating-linear-gradient(to bottom,var(--prime) 0 16px,transparent 16px 30px); background-size:100% 1px,100% 1px,1px 100%; background-position:left top,left bottom,right top; background-repeat:no-repeat} /* title centered on the band, one line, larger */ .inspire .gridband h2{position:relative;z-index:1;font-size:var(--h2);font-weight:700;color:var(--prime); text-transform:uppercase;text-align:center;line-height:1;width:100%;white-space:nowrap} .inspire .ecbox{flex:0 0 37.16%;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(20px,2.78vw,40px); position:relative; font-size:var(--sub);font-weight:500;color:#000;text-transform:lowercase;line-height:1.2; background-color:#fff; background-image: repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px), repeating-linear-gradient(to bottom,var(--prime) 0 16px,transparent 16px 30px); background-size:100% 1px,1px 100%; background-position:left top,left top; background-repeat:no-repeat} /* 1px and -1px, matching .tboxw::before and every other dash on the site. This was the single exception: it used var(--line), i.e. 0.5px, which is the FRAME stroke weight, not the dash weight — so this one rule rendered visibly thinner than the block's own top and left dashes (both 1px via background-size). noa spotted it. */ .inspire .ecbox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px); pointer-events:none} /* ===== SEC2 collage on a TABLET (noa, 31.7.26) ===== The three left-hand blocks (ocean, title band, marble) all share one column whose width is whatever is left after .tboxw / .plantcol take their 32.68% — so widening those two is what narrows the left stack. 40% each takes the left column from 392px to ~349px at 834 and hands the difference to the text and the plant, which is what stopped the rest of the collage feeling cramped. The title goes to two balanced lines in the narrower band, which also lets it take a larger size than the one-line version could. */ @media (min-width:768px) and (max-width:1023px){ /* The two text-bearing columns must be EQUAL in width (noa). They are sized against different parents — .colb is a share of the whole collage, while .tboxw/.plantcol are a share of .cola, which is itself "the collage minus .colb minus the gap" — so the two percentages have to be solved together rather than set to the same number. 28.3% and 40% land them within a fraction of a pixel of each other at this width. */ .inspire .colb{flex:0 0 28.3%} /* Exact, not approximate. `.colb` is 28.3% of the collage W; `.cola` is therefore 0.717W - gap, so a plain 40% of .cola left a 1-1.4px mismatch that grew with width. Solving mid = 0.283W for a basis expressed against .cola gives 0.283 * (cola + gap) / 0.717 = 39.47% * cola + 0.3947 * gap. */ .inspire .tboxw,.inspire .plantcol{flex:0 0 calc(39.47% + var(--gap8) * 0.3947)} .inspire .gridband h2{white-space:normal;text-wrap:balance; font-size:clamp(26px,4.2vw,38px);line-height:1.06} } @media (max-width:767px){ /* ===== SEC2 collage — a real phone composition (noa, 31.7.26) ===== The desktop three-column collage does not survive being squeezed into 358px: the title was clipped mid-word ("DESIGNED T"), the two text blocks fell to one word per line in 119px columns, and the plant was a 76px sliver. Tablet was left alone — at 834 the desktop composition still reads correctly. The nested wrappers are flattened with display:contents so the seven real cells become direct grid items and can be re-composed freely (the same trick home SEC2 uses on .s2-left). Five rows, 2 columns: a pair of photos, the first text full width, the title band full width, another pair of photos, the second text full width. Rows are fr-based so the whole thing scales to --fh and the frame still snaps at any phone height. */ .inspire .cola,.inspire .rowa1,.inspire .rowa2,.inspire .colinner,.inspire .colb{display:contents} /* Order and proportions per noa: the HEADLINE LEADS at the top and stays the tallest row, and the photographs are as large as the frame allows. The two text blocks are the only slack in a fixed-height frame, so they are pinned to the minimum that holds their two lines (minmax floor of 68px) and everything they give up goes to the photos — they grew from 137px to ~185px at 390 this way. */ .inspire .collage{display:grid;grid-template-columns:1fr 1fr; grid-template-rows:1.45fr 1.32fr minmax(68px,.6fr) 1.32fr minmax(68px,.6fr); gap:var(--gap8);min-height:0} .inspire .gridband{grid-area:1/1/2/3} /* the title band leads */ .inspire .rowa1 .ph.morph{grid-area:2/1} /* ocean */ .inspire .ph.zeb{grid-area:2/2} /* zebra */ .inspire .tboxw{grid-area:3/1/4/3} /* "we draw inspiration…" */ .inspire .colinner .ph.morph{grid-area:4/1} /* marble */ .inspire .ph.plantcol{grid-area:4/2} /* plant */ .inspire .ecbox{grid-area:5/1/6/3} /* "every concept…" */ /* the title has to be allowed to wrap here — nowrap is what clipped it — and the clamp is driven by the container so it fills the band without overflowing it */ /* with the tallest row to sit in, the headline can carry real size */ .inspire .gridband h2{white-space:normal;text-wrap:balance; font-size:clamp(24px,8.4vw,40px);line-height:1.04} .inspire .tboxw,.inspire .ecbox{padding:10px 14px} .inspire .tboxw{flex:none} .inspire .ecbox{flex:none} } /* the button sits under the headline, in the title band (noa, 24.9.26) */ .inspire .gbtxt{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center; gap:clamp(14px,2vh,24px)} .inspire .gbtxt .btn{align-self:center} /* home sets .btn{align-self:flex-start} */ @media (max-width:767px){ .inspire .collage{grid-template-rows:1.7fr 1.32fr minmax(68px,.55fr) 1.32fr minmax(68px,.55fr)} } /* "Designed with nature in mind" (24.9.26) is ~40% longer than the old "Nature is in our DNA" and no longer fits the band on one line at 1280–1440 — two balanced lines at every width */ .inspire .gridband h2{white-space:normal;text-wrap:balance;line-height:1.04;padding:0 clamp(12px,2vw,32px)} /* …but ONE line wherever the band is wide enough for it (noa: "one line if possible"). At 46px the line is ~805px; with the padding it needs a band of ~880px (1920 screens). */ .inspire .gridband{container-type:inline-size} /* (threshold superseded below) */ /* Section headlines share ONE size across the home page (noa, 24.9.26): the same clamp(24px,2.8vw,42px) as "Our Most-Loved Products" and the Custom frame, 28px on a phone like .s2-top. This overrides every size set for the band above (desktop, tablet, phone). At this size the line is ~17.5em ≈ 735px once it caps at 42px, so one line needs a band of ~800px (1920 screens); below that it takes two balanced lines. */ .inspire .gridband h2{font-size:var(--h2)} /* mobile: --h2 is already 24px (noa 27.9.26: one section-title size) */ @container (min-width:800px){ .inspire .gridband h2{white-space:nowrap} } /* Phone, tidied like the Nature bento on /designed-with-responsibility (noa, 27.9.26): the three text blocks run rail to rail, so their side dashes sat ON the rails, the title band's top dash sat on the navbar line and the last block's bottom dash on the frame's bottom line — doubled lines. Only the dashes BETWEEN cells stay. The title band is only as tall as the title and its button need. */ @media (max-width:767px){ .inspire .collage{grid-template-rows:auto 1.4fr minmax(96px,.55fr) 1.4fr minmax(80px,.5fr)} .inspire .gridband{padding:22px 0 26px} .inspire .gridband::after{background-image:repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px); background-size:100% 1px;background-position:left bottom} .inspire .tboxw{background-image:repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px); background-size:100% 1px;background-position:left bottom} .inspire .ecbox{background-image:repeating-linear-gradient(to right,var(--prime) 0 16px,transparent 16px 30px); background-size:100% 1px;background-position:left top} .inspire .ecbox::after{display:none} } /* Phone (noa, 27.9.26): three examples, not four — the second pair of photos becomes one photo across the full width (marble stays; the plant is left out on a phone). Scoped :not(.r4): /designed-with-responsibility uses this collage too, and gives .plantcol to its rock tile. */ @media (max-width:767px){ .inspire:not(.r4) .ph.plantcol{display:none} .inspire:not(.r4) .colinner .ph.morph{grid-area:4/1/5/3} }