/* ========================================================================= zn-responsive.css (shell pages: /work and every case study) 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. The ported Squarespace mobile layouts (fluid-engine, 8 columns) were authored at 390px; the desktop layouts (24 columns) at 1440px. ========================================================================= */ /* ------------------------------------------------------------------------- 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 26 -> +9px above/below, +6px sides. Brand link 108 x 19 -> +13px above/below. Footer "All work" 109 x 28 -> +8px above/below. /work filter pills 33px tall -> +6px above/below (pills are 8px apart, so the zones meet but do not overlap the neighbour's box). ------------------------------------------------------------------------- */ @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; } .site-shell-footer-back::before { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; } .zn-filter-pill { position: relative; } .zn-filter-pill::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } } /* ------------------------------------------------------------------------- F20 Footer meta "(c) Chris Znerold . Boulder, Colorado" is nowrap and 339px wide; centred in a 280px footer at 320 it is cut at both ends. Let it wrap on the narrowest phones. ------------------------------------------------------------------------- */ @media (max-width: 360px) { .site-shell-footer-meta { white-space: normal; text-align: center; max-width: 100%; } } /* ------------------------------------------------------------------------- F01 Horizontal document overflow. The strips gallery (adobe, apple, kodak) lays its figures out in JS with rounded pixel widths; the last figure of a row lands 2-3px past the viewport from 834 up and the page grows a horizontal scrollbar (adobe: scrollWidth +3 at 1024-2560). Clip the wrapper on the inline axis only; the loss is the 2-3px rounding, never content. ------------------------------------------------------------------------- */ .gallery-strips-wrapper { overflow-x: clip; } /* ------------------------------------------------------------------------- F02 Stay Gold pages (design/*): the eyebrow labels ("Case Study - X", "No.3 - EXPERIENCE ECOSYSTEM") are Squarespace scaled text. The runtime writes an inline font-size that fits the label to its narrow block: 8.6-12px at 1440, 5.8px at 1024, 4.2px at 768, 5px at 320 (section eyebrows; the hero label is 8.9px at 768 and 11-20px from 1024 up). Floor it at 10px. On the desktop layout the label keeps its forced single line (the block has empty grid to its right on every page); on the mobile layout the label blocks sit against the right edge, so there the label is allowed to wrap inside its block. (The inline style and the base nowrap both carry !important.) ------------------------------------------------------------------------- */ main.sqs-sections > .page-section:not(:first-child) .sqs-html-content .sqsrte-scaled-text { font-size: clamp(10px, 0.6vw, 12px) !important; } /* The hero "Case Study - X" label sits in a wider block and fits at 11-20px from 1024 up; it only drops under 10px on the tablet and phone layouts. */ @media (max-width: 1023px) { main.sqs-sections > .page-section:first-child .sqs-html-content .sqsrte-scaled-text { font-size: clamp(10px, 0.6vw, 12px) !important; } } @media (max-width: 767px) { .sqs-block-html .sqs-html-content .sqsrte-scaled-text-container.loaded .sqsrte-scaled-text, .sqs-block-html .sqs-html-content .sqsrte-scaled-text-container.loaded .sqsrte-scaled-text h1, .sqs-block-html .sqs-html-content .sqsrte-scaled-text-container.loaded .sqsrte-scaled-text h4 { white-space: normal !important; word-break: normal; } } /* ------------------------------------------------------------------------- F06 Ported mobile layouts (767 and below). Text blocks in the fluid engine share grid rows with the block that follows (the slack row the author left in the 390-wide editor preview). Two things make the copy wrap one line more than that preview and land the last line on the next heading: (a) Squarespace sizes mobile headings from the viewport HEIGHT (0.012 * min(100vh, 900px) per size step plus 1rem), so a tall phone gets a bigger heading in the same narrow column: innit 390 x 844 "The Future of Food is Now Connected." runs to three lines into its paragraph. Cap that term at 720px, the tallest preview the rows were checked against. (b) Below 390 the column is narrower still: innit 320/360 (p over "Beyond Nutrition"), outdoorsy 320 ("Next-Gen Systems Design" over its paragraph), atlas, apple. Scale the root (the 1rem term of every size) and the height term with the viewport so the layout becomes a proportional copy of the 390 one: 16px at 390, 13.1px at 320; body copy stays at or above 13px. tan(atan2(100vw, 400px)) is the unitless ratio 100vw / 390px. Scaled-text labels keep font-size: inherit !important in the base and are not affected. Shell chrome is px based and unaffected. ------------------------------------------------------------------------- */ @media (max-width: 767px) { main.sqs-sections .sqs-html-content h1 { font-size: calc((var(--heading-1-size-value) - 1) * .012 * min(100vh, 720px) + 1rem); } main.sqs-sections .sqs-html-content h2 { font-size: calc((var(--heading-2-size-value) - 1) * .012 * min(100vh, 720px) + 1rem); } main.sqs-sections .sqs-html-content h3 { font-size: calc((var(--heading-3-size-value) - 1) * .012 * min(100vh, 720px) + 1rem); } main.sqs-sections .sqs-html-content h4 { font-size: calc((var(--heading-4-size-value) - 1) * .012 * min(100vh, 720px) + 1rem); } main.sqs-sections .sqs-html-content .sqsrte-large { font-size: calc((var(--large-text-size-value) - 1) * .012 * min(100vh, 720px) + 1rem); } main.sqs-sections .sqs-html-content .sqsrte-small { font-size: calc((var(--small-text-size-value) - 1) * .012 * min(100vh, 720px) + 1rem); } } @media (max-width: 389px) { html { font-size: clamp(12.8px, 4vw, 16px); } main.sqs-sections .sqs-html-content h1 { font-size: calc((var(--heading-1-size-value) - 1) * .012 * min(100vh, 720px) * tan(atan2(100vw, 400px)) + 1rem); } main.sqs-sections .sqs-html-content h2 { font-size: calc((var(--heading-2-size-value) - 1) * .012 * min(100vh, 720px) * tan(atan2(100vw, 400px)) + 1rem); } main.sqs-sections .sqs-html-content h3 { font-size: calc((var(--heading-3-size-value) - 1) * .012 * min(100vh, 720px) * tan(atan2(100vw, 400px)) + 1rem); } main.sqs-sections .sqs-html-content h4 { font-size: calc((var(--heading-4-size-value) - 1) * .012 * min(100vh, 720px) * tan(atan2(100vw, 400px)) + 1rem); } main.sqs-sections .sqs-html-content .sqsrte-large { font-size: calc((var(--large-text-size-value) - 1) * .012 * min(100vh, 720px) * tan(atan2(100vw, 400px)) + 1rem); } main.sqs-sections .sqs-html-content .sqsrte-small { font-size: calc((var(--small-text-size-value) - 1) * .012 * min(100vh, 720px) * tan(atan2(100vw, 400px)) + 1rem); } } /* ------------------------------------------------------------------------- F06b innit, mobile layout: the "Beyond Nutrition" block is authored to start on the last row of the "Ingredient Stories" paragraph block (rows 33-47 / 47-57), and that paragraph fills its last row at the 390 authoring width, so the two overlap at every phone width. Start the heading block one row later. This is the page's own data-page grid value; the proper home for it is that