/* ====================================================================== Project page layout iterations (project-pages.js adds #case-content.layout-KEY). Five close variations of the current layout; no class means the current layout, untouched. 1 · Clean same structure, one spacing rhythm, one radius, calmer bento and narrative 2 · Lead the lead image runs the full content width above the title 3 · Rail project facts in a sticky left rail while the story scrolls 4 · Read one centred reading column; images break out to the full width 5 · Gallery a larger captioned image bento first, text condensed beneath Selectors double the id (#case-content#case-content) so they settle the older, very specific project-page rules in styles.css without !important. Structural changes apply from 901px, where the current layout becomes two columns; below that each layout keeps the stacked flow. ====================================================================== */ /* Dev-only layout switch (localhost), stacked bottom-left clear of the variant bar. */ .layout-switch { position: fixed; z-index: 90; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(20 16 28 / .9); backdrop-filter: blur(8px); font: 600 11.5px/1 system-ui, sans-serif; box-shadow: 0 8px 30px rgb(0 0 0 / .25); } .layout-switch button { padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: #eee; text-align: left; cursor: pointer; } .layout-switch button[aria-pressed="true"] { background: #fff; color: #140f1c; } /* Shared: the heirloom phone sits on a quiet full-width stage wherever a layout widens the image. */ #case-content#case-content:is(.layout-lead,.layout-read,.layout-gallery,.layout-rail) .heirloom-device-visual { background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 14px; } @media (min-width:901px) { #case-content#case-content:is(.layout-lead,.layout-read,.layout-gallery) .heirloom-device-visual > * { zoom: .82; } } /* Shared: no older height cap on the lead image; the facts as one ruled strip of four where a layout asks. */ #case-content#case-content[class*="layout-"] .case-image > img { max-height: none; } /* Spec values follow the ink token (the current layout hard-codes a dark purple that vanishes on dark variants). */ #case-content#case-content[class*="layout-"] :is(.case-facts b,.tag-copy>span) { color: var(--ink); } @media (min-width:901px) { #case-content#case-content:is(.layout-lead,.layout-gallery) .case-specs { align-items: stretch; } #case-content#case-content:is(.layout-lead,.layout-gallery) .case-specs > * > * { padding-left: 22px; border-top: 0; border-left: 1px solid var(--line); } #case-content#case-content:is(.layout-lead,.layout-gallery) .case-specs > .case-tags > :first-child { padding-left: 0; border-left: 0; } } /* ---------- 1 · Clean ---------- */ @media (min-width:901px) { #case-content#case-content.layout-clean { grid-template-columns: minmax(0,3fr) minmax(0,2fr); column-gap: 56px; row-gap: 0; } #case-content#case-content.layout-clean .case-outcome { max-width: 52ch; } #case-content#case-content.layout-clean .case-image { margin-top: 60px; gap: 10px; grid-template-columns: minmax(0,1fr); } /* one column the width of the figure: the lead image's own size never widens it past the page's right edge */ #case-content#case-content.layout-clean .case-image > img { height: auto; aspect-ratio: 16/10; border-radius: 10px; } #case-content#case-content.layout-clean .case-mosaic { gap: 10px; width: 100%; min-width: 0; } /* sized by its column, never by its own proportion, so it can't run past the page's right edge */ #case-content#case-content.layout-clean .case-mosaic img { border-radius: 10px; } #case-content#case-content.layout-clean .case-specs { margin-top: 40px; } #case-content#case-content.layout-clean > :is(.case-body,.form-factors,.heirloom-gallery) { margin-top: 88px; } #case-content#case-content.layout-clean > .project-pagination { margin-top: 88px; } #case-content#case-content.layout-clean .case-narrative { gap: 0 48px; } #case-content#case-content.layout-clean .case-narrative section { padding-top: 24px; } #case-content#case-content.layout-clean .case-narrative section::before { content: ""; grid-row: 1; width: 24px; height: 2px; margin-bottom: 6px; background: var(--accent); } #case-content#case-content.layout-clean .case-narrative .section-number { grid-row: 2; } #case-content#case-content.layout-clean .case-narrative section > div { grid-row: 3; } } @media (max-width:900px) { #case-content#case-content.layout-clean .case-image > img { height: auto; aspect-ratio: 16/10; border-radius: 10px; } #case-content#case-content.layout-clean .case-mosaic img { border-radius: 10px; } } /* ---------- 2 · Lead ---------- */ @media (min-width:901px) { #case-content#case-content.layout-lead { grid-template-columns: minmax(0,7fr) minmax(0,5fr); column-gap: 64px; row-gap: 0; } /* The hero's parts join the page grid so the image can sit between the back link and the title. */ #case-content#case-content.layout-lead .case-hero { display: contents; } #case-content#case-content.layout-lead .case-hero > .back { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin-bottom: 24px; } #case-content#case-content.layout-lead .case-image { grid-column: 1 / -1; grid-row: 2; margin: 0; } #case-content#case-content.layout-lead .case-hero > .eyebrow { grid-column: 1; grid-row: 3; margin: 48px 0 14px; } #case-content#case-content.layout-lead .case-hero > h1 { grid-column: 1; grid-row: 4; margin: 0; } #case-content#case-content.layout-lead .case-hero > .case-outcome { grid-column: 2; grid-row: 3 / 5; align-self: end; margin: 0; } #case-content#case-content.layout-lead .case-specs { grid-column: 1 / -1; grid-row: 5; margin-top: 48px; grid-template-columns: repeat(4,minmax(0,1fr)); } #case-content#case-content.layout-lead > :is(.case-body,.form-factors,.heirloom-gallery,.project-pagination) { margin-top: 72px; } /* Lead band: the main image and the context tiles side by side, one height. */ #case-content#case-content.layout-lead .case-image:not(.heirloom-device-visual) { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 12px; height: clamp(320px,33vw,470px); } #case-content#case-content.layout-lead .case-image:not(:has(.case-mosaic)) { grid-template-columns: minmax(0,1fr); } #case-content#case-content.layout-lead .case-image > img { height: 100%; border-radius: 12px; } #case-content#case-content.layout-lead .case-image .case-mosaic { contain: size; min-height: 0; height: 100%; grid-template-columns: minmax(0,1fr); grid-template-rows: none; grid-auto-rows: minmax(0,1fr); gap: 12px; } #case-content#case-content.layout-lead .case-image .case-mosaic img { grid-row: auto; height: 100%; border-radius: 12px; } #case-content#case-content.layout-lead .heirloom-device-visual { padding: 40px 20px; } } /* ---------- 3 · Rail ---------- */ @media (min-width:901px) { #case-content#case-content.layout-rail { grid-template-columns: minmax(220px,260px) minmax(0,1fr); column-gap: clamp(48px,6vw,88px); row-gap: 0; } #case-content#case-content.layout-rail > * { grid-column: 2; grid-row: auto; } #case-content#case-content.layout-rail #surf-kit-model { grid-column: 2 !important; } #case-content#case-content.layout-rail > .project-pagination { grid-column: 1 / -1; margin-top: 88px; } #case-content#case-content.layout-rail > :not(.case-hero):not(.case-specs):not(.project-pagination) { margin-top: 56px; } #case-content#case-content.layout-rail .case-hero h1 { font-size: clamp(38px,4vw,54px); } /* The rail: facts as one ruled column that stays in view while the story scrolls. */ #case-content#case-content.layout-rail .case-specs { grid-column: 1; grid-row: 1 / span 30; align-self: start; position: sticky; top: 112px; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 60px 0 0; padding: 0; border-top: 2px solid var(--ink); border-bottom: 0; } #case-content#case-content.layout-rail .case-specs > .case-tags, #case-content#case-content.layout-rail .case-specs > .case-facts { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 0; } #case-content#case-content.layout-rail .case-specs > * > * { width: 100%; margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); } /* Image: a wide lead with the context tiles in a row beneath. */ #case-content#case-content.layout-rail .case-image:not(.heirloom-device-visual) { display: grid; grid-template-rows: none; gap: 12px; } #case-content#case-content.layout-rail .case-image > img { height: auto; aspect-ratio: 16/9; border-radius: 12px; } #case-content#case-content.layout-rail .case-image .case-mosaic { contain: none; min-height: 0; grid-template-columns: repeat(var(--tiles,3),minmax(0,1fr)); grid-template-rows: none; gap: 12px; } #case-content#case-content.layout-rail .case-image .case-mosaic img { grid-row: auto; height: auto; aspect-ratio: 4/3; border-radius: 10px; } #case-content#case-content.layout-rail .heirloom-device-visual { padding: 40px 20px; } /* Narrative as a numbered list in the story column. */ #case-content#case-content.layout-rail .case-narrative { grid-template-columns: minmax(0,1fr); } #case-content#case-content.layout-rail .case-narrative section { grid-template-columns: 64px minmax(0,1fr); padding: 28px 0; border-top: 0; } #case-content#case-content.layout-rail .case-narrative section + section { border-top: 1px solid var(--line); } #case-content#case-content.layout-rail .case-narrative .section-number { padding-top: 6px; } #case-content#case-content.layout-rail .case-narrative .narrative-brief { max-width: 60ch; } } /* ---------- 4 · Read ---------- */ @media (min-width:901px) { #case-content#case-content.layout-read { grid-template-columns: minmax(0,1fr) minmax(0,700px) minmax(0,1fr); column-gap: 0; row-gap: 0; } #case-content#case-content.layout-read > * { grid-column: 1 / -1; grid-row: auto; order: 3; margin-top: 72px; } #case-content#case-content.layout-read > .case-hero { grid-column: 2; order: 0; margin-top: 0; } #case-content#case-content.layout-read > .case-specs { grid-column: 2; order: 1; margin-top: 40px; } #case-content#case-content.layout-read > .case-image { order: 2; margin-top: 56px; } #case-content#case-content.layout-read > #surf-kit-model { order: 2; } #case-content#case-content.layout-read .case-hero h1 { font-size: clamp(40px,4.6vw,60px); } #case-content#case-content.layout-read .case-hero .case-outcome { font-size: 20px; max-width: none; } /* Full-width image with the tiles beneath and the provenance as a caption. */ #case-content#case-content.layout-read .case-image:not(.heirloom-device-visual) { display: grid; grid-template-rows: none; gap: 12px; } #case-content#case-content.layout-read .case-image > img { height: auto; aspect-ratio: 21/9; border-radius: 12px; } #case-content#case-content.layout-read .case-image .case-mosaic { contain: none; min-height: 0; grid-template-columns: repeat(var(--tiles,3),minmax(0,1fr)); grid-template-rows: none; gap: 12px; } #case-content#case-content.layout-read .case-image .case-mosaic img { grid-row: auto; height: auto; aspect-ratio: 3/2; border-radius: 10px; } #case-content#case-content.layout-read .heirloom-device-visual { padding: 40px 20px; } /* The narrative reads down the centre column; the summary keeps the full width. */ #case-content#case-content.layout-read .case-narrative { grid-template-columns: minmax(0,1fr); width: min(700px,100%); margin-inline: auto; } #case-content#case-content.layout-read .case-narrative section { padding: 28px 0; gap: 4px; } #case-content#case-content.layout-read .case-narrative section + section { border-top: 1px solid var(--line); } #case-content#case-content.layout-read .case-narrative .narrative-brief { font-size: 20px; } #case-content#case-content.layout-read .case-summary { margin-top: 40px; } } /* ---------- 5 · Gallery ---------- */ @media (min-width:901px) { #case-content#case-content.layout-gallery { grid-template-columns: minmax(0,1fr); row-gap: 0; } #case-content#case-content.layout-gallery > * { grid-column: 1; grid-row: auto; } #case-content#case-content.layout-gallery > :not(.case-hero) { margin-top: 56px; } /* Condensed hero: title left, the summary answering it on the right. */ #case-content#case-content.layout-gallery .case-hero { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); column-gap: 64px; align-items: end; } #case-content#case-content.layout-gallery .case-hero > :not(.case-outcome) { grid-column: 1; } #case-content#case-content.layout-gallery .case-hero > .back { justify-self: start; } #case-content#case-content.layout-gallery .case-hero > h1 { margin: 0; } #case-content#case-content.layout-gallery .case-hero > .case-outcome { grid-column: 2; grid-row: 2 / 4; margin: 0; font-size: 17px; } /* The bento: one large image and the context tiles, with the provenance as a caption beneath. */ #case-content#case-content.layout-gallery .case-image:not(.heirloom-device-visual) { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows: repeat(2,clamp(200px,19vw,290px)) auto; gap: 12px; } #case-content#case-content.layout-gallery .case-image > img { grid-column: 1; grid-row: 1 / 3; height: 100%; border-radius: 12px; } #case-content#case-content.layout-gallery .case-image:not(:has(.case-mosaic)) > img { grid-column: 1 / -1; } #case-content#case-content.layout-gallery .case-image .case-mosaic { display: contents; } #case-content#case-content.layout-gallery .case-image .case-mosaic img { height: 100%; aspect-ratio: auto; border-radius: 12px; } #case-content#case-content.layout-gallery .case-mosaic img:nth-child(1) { grid-column: 2 / 4; grid-row: 1; } #case-content#case-content.layout-gallery .case-mosaic img:nth-child(2) { grid-column: 2; grid-row: 2; } #case-content#case-content.layout-gallery .case-mosaic img:nth-child(3) { grid-column: 3; grid-row: 2; } #case-content#case-content.layout-gallery .case-mosaic[data-count="2"] img:nth-child(2) { grid-column: 2 / 4; } #case-content#case-content.layout-gallery .heirloom-device-visual { padding: 40px 20px; } #case-content#case-content.layout-gallery .case-specs { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 32px; } #case-content#case-content.layout-gallery .case-body { margin-top: 64px; } #case-content#case-content.layout-gallery .case-narrative .narrative-brief { font-size: 17px; } } /* Gallery and Read show the image provenance as a quiet caption instead of the info dot. */ #case-content#case-content:is(.layout-gallery,.layout-read) .case-image:not(.heirloom-device-visual) .image-note { position: static; grid-column: 1 / -1; grid-row: auto; order: 9; display: block; } #case-content#case-content:is(.layout-gallery,.layout-read) .case-image .image-note-btn { display: none; } #case-content#case-content:is(.layout-gallery,.layout-read) .case-image .image-note [role=tooltip] { display: block; max-width: none; padding: 0; background: none; color: var(--muted); font-size: 13px; opacity: 1; transform: none; } @media (max-width:900px) { #case-content#case-content:is(.layout-gallery,.layout-read) .case-image:not(.heirloom-device-visual) { display: grid; gap: 8px; } #case-content#case-content:is(.layout-gallery,.layout-read) .case-image > img { height: auto; aspect-ratio: 4/3; border-radius: 10px; } #case-content#case-content.layout-gallery .case-mosaic { grid-template-columns: repeat(2,minmax(0,1fr)); } #case-content#case-content.layout-gallery .case-mosaic img:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; } } /* ---------- One image (project-pages.js adds .single-image) ---------- Pages with only stock or illustration imagery show one picture, no bento. On the desktop it runs as one tall panel beside the title and facts, the same shape on every page; on a phone it sits alone under the title. Form-factor tiles (Immersive experiences) keep the stacked figure. */ @media (min-width:901px) { #case-content#case-content.single-image .case-image:not(:has(.ff-tiles)) { grid-template-rows: auto; align-self: start; } /* one fixed shape on every page, not stretched to the text beside it (which varies) */ #case-content#case-content.single-image .case-image:not(:has(.ff-tiles)) > img { height: auto; aspect-ratio: 9/10; border-radius: 12px; } } @media (max-width:900px) { #case-content#case-content.single-image .case-image > img { aspect-ratio: 4/3; border-radius: 12px; } } /* ---------- Two screens (project-pages.js, .sg-two) ---------- The thought leadership page's two site recordings, stacked at the same size. On the desktop they share the image's usual place beside the title and facts, each screen cropped to fit; on a phone they stack at 16:10. */ #case-content .screen-grid.sg-two { position: relative; display: grid; gap: 10px; } @media (min-width:901px) { #case-content#case-content .case-image.screen-grid.sg-two { grid-template-rows: minmax(0,1fr) minmax(0,1fr); align-self: stretch; contain: size; min-height: 420px; } #case-content .screen-grid.sg-two .sg-screen { aspect-ratio: auto; } } /* ---------- Aqualocka (.real-product-image) ---------- The real magazine photo over a row of the three square renders, all one width with the same edges; the renders are square, so each shows whole (no crop). About the same footprint as the single image on other pages. */ #case-content#case-content .case-image.real-product-image { display: grid; grid-template-rows: auto auto; gap: 10px; align-self: start; contain: none; } #case-content#case-content .case-image.real-product-image > img { width: 100%; height: auto; max-height: none; aspect-ratio: 4/3; object-fit: cover; border: 0; border-radius: 12px; } #case-content#case-content .real-product-image .case-mosaic { contain: none; aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: auto; gap: 10px; width: 100%; min-height: 0; margin: 0; } #case-content#case-content .real-product-image .case-mosaic img { grid-row: auto; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; } /* ---------- Living Labs (.case-image with .ff-tiles) ---------- The cover at 4:3 over its row of three display format tiles, one width with the same edges (like Aqualocka). The tiles show their faceted pictures (project-pages.js, facetTiles); hovering one previews it in the cover's place. */ #case-content#case-content .case-image:has(.ff-tiles) { grid-template-rows: auto auto; gap: 10px; align-self: start; } #case-content#case-content .case-image:has(.ff-tiles) > img { width: 100%; height: auto; aspect-ratio: 4/3; border-radius: 12px; } #case-content#case-content .case-image .ff-tiles { gap: 10px; } #case-content#case-content .ff-tile .ff-face { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 480 / 300; object-fit: cover; border-radius: 10px; } #case-content .ff-tile { cursor: zoom-in; } #case-content .mosaic-preview > * { display: block; width: 100%; height: 100%; object-fit: cover; } #case-content .case-image .ff-tiles:has(.is-previewing) .ff-tile:not(.is-previewing) { opacity: .55; } #case-content .case-image .ff-tile { transition: opacity .25s ease; }