/* ========================================================================= zn-responsive.css (React pages: /, /about, /contact) Responsive overrides only. Linked LAST in by _tools/link_responsive_css.py so every rule here wins ties on the cascade. Each rule is scoped and tagged with the finding id it closes; the audit lives in the responsive sweep report (findings.md / fixed.md). Rules: tokens only for colour, clamp() and % over fixed px, nothing above 1024 is touched unless it was measured broken there, no content hidden unless it is decorative. ========================================================================= */ /* ------------------------------------------------------------------------- F16 Nav: brand name overflows its shrunk box and runs into "Work" at 320 (text 108px in a 96px box, links start at 120px). Tighten the link row so the brand gets its 108px back. 341px and up already fit. ------------------------------------------------------------------------- */ @media (max-width: 340px) { .v4-nav-links { gap: 10px; } .v4-nav-link { letter-spacing: .02em; } } /* ------------------------------------------------------------------------- F19 Tap targets under 44px at phone widths. The visual box stays as designed; an absolutely positioned ::before grows the hit area so layout and the ::after underlines are untouched. Nav links 43-67 x 28 -> +9px above/below, +6px sides. Brand link 108 x 19 -> +13px above/below. ------------------------------------------------------------------------- */ @media (max-width: 480px) { .v4-nav-link { position: relative; } .v4-nav-link::before { content: ""; position: absolute; left: -6px; right: -6px; top: -9px; bottom: -9px; } .v4-nav-brand { position: relative; } .v4-nav-brand::before { content: ""; position: absolute; left: -8px; right: -8px; top: -13px; bottom: -12px; } } /* ------------------------------------------------------------------------- F11 Home hero masthead wraps to 3 lines at 1024-1279 (target is 2 at 1024 and up). The theme pins the size (type 8: 64px, other types 83px) with !important at the same specificity, so this must match that selector and land later in the cascade. Scaled by viewport in the band only; at 1280 the pinned size already gives 2 lines, so nothing changes there. Type 8 is the shipped theme. Types 1, 4, 5, 7, 9, 10 were measured at 3-4 lines with their 83px pin and get the same proportional cap. ------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) { html[data-zn-type="8"] .v5-page .v4-hero-headline.v5-hero-headline { font-size: min(64px, 4.85vw) !important; } html[data-zn-type="1"] .v5-page .v4-hero-headline.v5-hero-headline, html[data-zn-type="4"] .v5-page .v4-hero-headline.v5-hero-headline, html[data-zn-type="5"] .v5-page .v4-hero-headline.v5-hero-headline, html[data-zn-type="7"] .v5-page .v4-hero-headline.v5-hero-headline, html[data-zn-type="9"] .v5-page .v4-hero-headline.v5-hero-headline, html[data-zn-type="10"] .v5-page .v4-hero-headline.v5-hero-headline { font-size: min(83px, 6.3vw) !important; } } /* ------------------------------------------------------------------------- F12 Home hero tag: 22px at 720 drops to 15px at 768 (the phone tier clamp ends, the desktop clamp(15px, 1.5vw, 22px) bottoms out). Hold 16px through the tablet band so it meets the 1024 value (15.4px) without the cliff. ------------------------------------------------------------------------- */ @media (min-width: 721px) and (max-width: 1023px) { .v5-hero-tag { font-size: max(16px, 1.5vw); } } /* ------------------------------------------------------------------------- F13 Home hero: .v4-hero keeps min-height 90vh under 1024, where the ASCII field is disabled and the lede is no longer full-height, so 300-475px of empty band sits between the paragraph and the first tile (390 x 844 and 834 x 1194 measured). Let the hero size to its content below the field's cut-off. ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .v4-hero.v5-hero { min-height: auto; } } /* ------------------------------------------------------------------------- F09 Portfolio tiles (home reuses the /work tile markup; the first band is untagged, so scope by the section): on the original Squarespace tiles the category text and the "+" button share a grid row by design. At 768-1100 the category wraps to two lines and the second line sits on the "+". Push the button to the end of its two row area so the wrapped line clears it. ------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1100px) { .v5-portfolio-section .fluid-engine .fe-block .sqs-block.sqs-block-button { justify-content: flex-end !important; } } /* ------------------------------------------------------------------------- F17 Contact masthead "Tell me where the idea is stuck." is 4 lines at 320 (40px floor in a 288px column). Scale the floor with the viewport below 360 so it holds 3 lines. ------------------------------------------------------------------------- */ @media (max-width: 360px) { .v5-page .v5-practice-header-title { font-size: clamp(32px, 10.6vw, 40px); } } /* ------------------------------------------------------------------------- F03 Contact: engagements timeline. Stages sit at 0% and 100% of the rail and are centred on their dot, so half of "Signal" and "Scale" hang outside the rail. On desktop the 72px box padding absorbs the overhang; the phone/tablet tier cuts the padding to 16px and turns on overflow-x:auto, which clips both end labels (600-834 not scrollable enough to reveal them, and the left overhang is never reachable). Give the scroll box enough inline padding for a 100px wide stage, and widen the rail floor so the notes stop touching. F21 Stage note is 9px; 10px floor on the same tier. ------------------------------------------------------------------------- */ @media (max-width: 900px) { .v5-engagements-timeline { padding-left: 56px; padding-right: 56px; } .v5-engagements-timeline-stage-note { font-size: 10px; } } @media (max-width: 720px) { /* 540px floor gave a 90px stage pitch against 100px wide notes: adjacent notes overlapped. 640px keeps the rail scrollable and the notes apart. */ .v5-engagements-timeline-rail { min-width: 640px; } } /* ------------------------------------------------------------------------- F04 Contact: mode picker rows are name | range | marker on one line with the name ellipsised. At 390 and below "Prototype sprint" and "Selective staff leadership" are cut. Stack the range under the name on phones; the marker spans both rows. ------------------------------------------------------------------------- */ @media (max-width: 480px) { .v5-engagements-mode-row { grid-template-columns: minmax(0, 1fr) 8px; grid-template-rows: auto auto; gap: 4px 12px; } .v5-engagements-mode-row-name { grid-column: 1; grid-row: 1; white-space: normal; overflow: visible; text-overflow: clip; } .v5-engagements-mode-row-range { grid-column: 1; grid-row: 2; white-space: normal; } .v5-engagements-mode-row-marker { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } /* ------------------------------------------------------------------------- F05 About: facet wheel. The phone tier caps the wheel at 320px up to 720, but the lens labels only hide at 520 and below, so between 521 and 720 the six labels hang 62px outside the wheel box and the top one ("Strategist") sits on the last line of the intro paragraph. Let the wheel use the column (as it does from 768) and reserve the remaining overhang with margins that shrink as the wheel grows. ------------------------------------------------------------------------- */ @media (min-width: 521px) and (max-width: 720px) { .v5-facet-wheel { max-width: min(420px, calc(100% - 120px)) !important; margin: clamp(28px, calc(320px - 46vw), 80px) auto; } } /* ------------------------------------------------------------------------- F14 About: flywheel wheel carries an inline width/height of 540px. In the two column layout at 1101-1279 the column is 490-530px, so the wheel runs 10-50px into the gutter; at 521-580 (single column, no 90vw rule yet) it runs past the container. Fluid width, aspect ratio keeps it square. The 520 tier and 1280 up are unchanged. ------------------------------------------------------------------------- */ @media (min-width: 521px) and (max-width: 1279px) { .v5-flywheel-wheel { width: min(540px, 100%) !important; height: auto !important; } } /* ------------------------------------------------------------------------- F15 About: the flywheel HUD ("STAGE Sense", top-left of the wheel) overlaps the top node label on a 288-328px wheel. The node already carries the same label, and the facet wheel hides its twin HUD at the same tier, so this is decorative duplication. ------------------------------------------------------------------------- */ @media (max-width: 520px) { .v5-flywheel-meta { display: none; } } /* ------------------------------------------------------------------------- F19 About: progress ticks are 22 x 2px buttons and "Next stage" is 117 x 16px. Same ::before hit-area technique as the nav. ------------------------------------------------------------------------- */ @media (max-width: 1024px) { .v5-facet-tick, .v5-flywheel-tick { position: relative; } .v5-facet-tick::before, .v5-flywheel-tick::before { content: ""; position: absolute; left: -3px; right: -3px; top: -21px; bottom: -21px; } .v5-flywheel-next { position: relative; } .v5-flywheel-next::before { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; } }