/* Home page (CZ-6605, CZ-6615) and its search form. Loaded only by the home page, after site.css, and built on its tokens. Class names all start with "home-" so nothing here can collide with another page's styles. The home is a flat page (see ".page--flat" in site.css): a full-width hero band, then plain sections on the one page background. */ :root { --well: #F3EFE7; /* the neutral ground behind a cover or a product photo */ --card-line: #E4DED2; } /* The page is as tall as its content: no empty band below the footer on a tall window. */ .page { min-height: 0; } .home-title, .home-h2, .home-tile__name { font-family: var(--font-display); color: var(--navy); font-weight: 700; letter-spacing: -0.015em; } /* Hero: the pitch and the search on the left, real collectible photography on the right. The band is as wide as the window. */ .home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 40px; align-items: center; margin-inline: calc(50% - 50cqw); padding: 44px calc(50cqw - 50%) 48px; min-height: 380px; overflow: hidden; background: linear-gradient(100deg, #FCFAF6 0%, #F5F0E6 100%); border-bottom: 1px solid var(--card-line); } .home-hero--plain { grid-template-columns: minmax(0, 1fr); padding-block: 64px; min-height: 0; } .home-hero--plain .home-hero__copy { max-width: 680px; } .home-hero__copy { position: relative; z-index: 1; max-width: 560px; } .home-title { font-size: clamp(38px, 4.6vw, 72px); line-height: 1.04; letter-spacing: -0.02em; } .home-lede { margin-top: 18px; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } .home-links { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 22px; align-items: center; } .home-links a, .home-more { font-weight: 500; color: var(--action); text-decoration: none; } .home-links a { padding-right: 22px; } .home-links a + a { padding-left: 22px; border-left: 1px solid var(--outline-soft); } .home-links a:hover, .home-more:hover { text-decoration: underline; text-underline-offset: 3px; } /* The hero search form: a field and its own blue button. */ .home-search { display: flex; align-items: stretch; gap: 8px; margin-top: 26px; max-width: 540px; } .home-search__field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; background: var(--panel); border: 1px solid var(--outline-soft); border-radius: 6px; } .home-search__field:focus-within { outline: 3px solid var(--link); outline-offset: 2px; } .home-search__icon { position: absolute; left: 14px; fill: var(--ink-2); pointer-events: none; } .home-search__input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; padding: 14px 12px 14px 46px; } .home-search__input::placeholder { color: var(--muted); opacity: 1; } .home-search__btn { flex: 0 0 auto; padding-inline: 28px; border-radius: 6px; } /* Hero art, one owner-chosen photo: it fills the right of the band and fades into the page on its left edge. */ .home-hero__photo { position: absolute; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%); mask-image: linear-gradient(to right, transparent 0, #000 38%); } /* Hero art, the site's own illustrative still life (CZ-6632). A still image: it is drawn at most 1.25x its original 926 px width (1157 px) and never stretched to the window, so on a wide screen it stays that size, anchored to the right edge of the full-bleed band, and the band's own background carries the rest. Its left edge fades into that background (a gradient mask, so it works on any background), (a single gradient mask: a two-layer composite mask rendered nothing in Chrome). Below 1440 px there is no room beside the copy: it goes under the copy at the full column width, whole (never cropped) and without the fade. */ .home-hero--artwork { display: block; min-height: 0; padding-top: 28px; padding-bottom: 32px; --art-max: 1157px; --art-copy: 720px; } /* the copy column (640px cap + the side gutter) plus a little air: the art never reaches under the text */ .home-hero--artwork .home-lede { margin-top: 14px; } .home-hero--artwork .home-search { margin-top: 20px; } .home-hero--artwork .home-links { margin-top: 18px; } .home-hero--artwork .home-title { font-size: clamp(36px, 3.6vw, 64px); } .home-hero__art { display: block; width: 100%; max-width: var(--art-max); margin: 28px auto 0; border-radius: 10px; overflow: hidden; } .home-hero__art img { display: block; width: 100%; height: auto; } @media (min-width: 1440px) { .home-hero.home-hero--artwork { min-height: calc(min(var(--art-max), 100cqw - var(--art-copy)) * 310 / 926); } .home-hero__art { position: absolute; right: 0; bottom: 0; width: min(var(--art-max), calc(100% - var(--art-copy))); margin: 0; border-radius: 0; overflow: visible; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%); } } /* Past the page's own width (--flat-max, 2200 px) the page is centered and the copy moves in from the window edge by half of the slack: the art starts clear of the copy's right edge (the 640 px copy cap plus 32 px of air), so no heading, line or search ever sits under the fade, at any window width. Up to 2200 px the 720 px above already covers it (the gutter is 48 px at most: 48 + 640 + 32). */ @media (min-width: 2200px) { .home-hero--artwork { --art-copy: max(720px, calc((100cqw - var(--flat-max)) / 2 + var(--gutter) + 640px + 32px)); } } /* Hero art, a spread of photo cards (the derived art or several owner-chosen photos): upright cards on the right, overlapping a little and alternately raised and dropped, each photo shown whole on a white card. */ .home-spread { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; min-height: 300px; } .home-spread li { flex: 1 1 0; max-width: 250px; min-width: 0; margin-left: -28px; } .home-spread li:first-child { margin-left: 0; } .home-spread li:nth-child(odd) { transform: translateY(-14px) rotate(-2.2deg); } .home-spread li:nth-child(even) { transform: translateY(18px) rotate(2deg); } .home-spread__card { display: block; aspect-ratio: 4 / 5; padding: 12px; background: #fff; border: 1px solid var(--card-line); border-radius: 12px; box-shadow: 0 14px 30px rgba(28, 36, 54, 0.16); overflow: hidden; } .home-spread__card img { display: block; width: 100%; height: 100%; object-fit: contain; } a.home-spread__card:hover { box-shadow: 0 16px 34px rgba(28, 36, 54, 0.22); } /* Sections */ .home-section { padding-top: 40px; } .home-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .home-h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; } .home-more { white-space: nowrap; font-size: 16px; } /* "Explore collections": the featured checklists. Each cover is shown whole (never stretched or cropped) on a neutral well, or on the list's own stored color when the owner chose one. */ .home-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); } .home-tile { display: flex; flex-direction: column; height: 100%; color: var(--ink); background: var(--panel); border: 1px solid var(--card-line); border-radius: 8px; overflow: hidden; text-decoration: none; } .home-tile:hover { text-decoration: none; border-color: var(--outline); box-shadow: 0 4px 16px rgba(28, 36, 54, 0.10); } .home-tile__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 14px; background: var(--well); overflow: hidden; } /* Covers are small (about 200 px) logos: never upscaled, only shrunk to fit. */ .home-tile__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .home-tile__media:not(.home-tile__media--tinted):not(.home-tile__media--photo) img { mix-blend-mode: multiply; } /* a logo: its white drops out into the well */ /* A real photo of the list's own items (or an owner-supplied one). Decided per photo from its measured shape (TileFit): "cover" fills the tile when the photo is close to 4:3 so almost nothing is cut off; "contain" shows the whole photo on the neutral ground (cards, figures, pins). Never stretched, and never scaled up: the site only draws a photo that is large enough for the tile. */ /* Site:HomeTileStyle = Profile: the list's own profile image, large, on the list's stored color. It fills the well (drawn whole, never cropped); the thumbnails are about 200 px, so it is shown at the well's width and no more. */ .home-tile__media--tinted { padding: 10px; } .home-tile__media--tinted img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; } .home-tile__media--photo { padding: 0; } .home-tile__media--photo img { width: 100%; height: 100%; max-width: none; max-height: none; } .home-tile__media--contain { padding: 10px; } .home-tile__media--contain .home-tile__photo { object-fit: contain; } .home-tile__media--cover .home-tile__photo { object-fit: cover; } .home-tile__media--blend .home-tile__photo { mix-blend-mode: multiply; } /* only an image known to be opaque: its own white background drops out. Transparent and owned images are drawn as they are */ /* A product staged on a background layer (a curated item, or a tile with a configured background): the layer fills the 4:3 well, the product sits on top, whole, with padding. */ .home-tile__media--stage { position: relative; padding: 0; } .home-tile__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* An image background must FILL the well. The generic ".home-tile__media img" rule above (object-fit: contain) out-specifies the bare .home-tile__bg, which would letterbox it, so this one is as specific as the staged photo's. */ .home-tile__media--stage .home-tile__bg { object-fit: cover; } .home-tile__media--stage .home-tile__photo { position: relative; padding: 9%; box-sizing: border-box; object-fit: contain; } /* A photo that fails in the browser is replaced by the list logo (img-fallback.js sets its src from data-logo), drawn as a logo is on any other tile: whole, never upscaled, on the well. With no logo the broken image is hidden and the well shows. */ .home-tile__media--photo.home-tile__media--broken { padding: 14px; } .home-tile__media--broken .home-tile__bg { display: none; } .home-tile__media--broken .home-tile__photo { width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 0; object-fit: contain; mix-blend-mode: multiply; } .home-tile__media--broken .home-tile__photo:not([data-logo]) { display: none; } /* Layered cards (CZ-6635): the well is a relative box (10:9, set below). The BACKGROUND (decorative) fills it, lower z-index; the FOREGROUND (an actual catalog item with its own background removed, transparent) sits on top, whole (contain, never cropped), in a box the page positions per list so its base stands on the background's pedestal (the inline left/top/width/height/object-fit). Its bottom edge is the anchor: object-position 50% 100%. */ .home-tile__media--layered { position: relative; isolation: isolate; } .home-tile__media--layered .home-tile__bg { z-index: 0; } .home-tile__media--layered .home-tile__fg { position: absolute; z-index: 1; transform: translateX(-50%); max-width: none; max-height: none; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 3px 4px rgba(10, 12, 28, 0.45)); } /* Taller artwork area (20% more than the 4:3 well: 10:9). Kyle's approved 4:3 background is shown whole, in its original pixels (never cropped, stretched, blurred or mirrored), full width, standing on the bottom edge of the well. The extra strip above it (the well's top 16.7%) is a plain neutral extension from the site palette (--layer-ext), not a continuation of the artwork. The foreground boxes (inline, per list) are % of this taller well and are placed so each product stands on the same pedestal / ledge / rocks as in the 4:3 version. */ .home-tile__media--layered { aspect-ratio: 10 / 9; --layer-ext: linear-gradient(180deg, #FFFFFF 0%, #F6F2EA 100%); background: var(--layer-ext); } .home-tile__media--stage.home-tile__media--layered .home-tile__bg { inset: auto 0 0 0; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .home-tile__layer--failed { display: none !important; } .home-tile__initial { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--muted); } .home-tile__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; flex: 1 1 auto; border-top: 1px solid var(--card-line); } .home-tile__name { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.2; overflow-wrap: anywhere; min-height: 2.4em; } /* two lines tall: the tiles of a row stay level */ .home-all { margin: 14px 0 0; } /* Wide windows: the page uses the width (fluid up to --flat-max) and the hero grows with it, while text keeps a readable line length and each photo keeps a sensible size (the cards and covers are contained, never stretched past what they are). */ @media (min-width: 1600px) { .home-hero { min-height: 460px; gap: 24px 64px; } .home-hero__copy { max-width: 640px; } .home-lede { font-size: 21px; max-width: 58ch; } .home-search { max-width: 620px; } .home-spread { justify-content: center; min-height: 380px; } .home-spread li { max-width: 300px; } .home-tiles { gap: 20px; } } @media (max-width: 1100px) { .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .home-hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; padding-bottom: 36px; gap: 36px; } .home-hero__photo { position: relative; order: 2; width: 100%; height: 260px; -webkit-mask-image: none; mask-image: none; border-radius: 10px; } .home-hero--photo { padding-bottom: 28px; } .home-spread { justify-content: center; min-height: 0; padding-block: 18px; } /* Touch targets (CZ-6635 polish): the text links under the hero search and the section links were 21-24 px tall; 44 px is the touch minimum. */ .home-links a, .home-more { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; } /* a flex item swallows the space before the arrow, so the gap puts it back */ } @media (max-width: 640px) { .home-lede { font-size: 17px; } .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .home-search__btn { padding-inline: 20px; } .home-section__head { flex-wrap: wrap; } .home-spread li { flex-basis: 30%; } .home-spread li:nth-child(n+4) { display: none; } } /* Where the two hero links no longer fit on one line they stack, one per line, with no divider (it used to survive as a stray vertical bar beside the wrapped second link), each a 44 px tall touch target. */ @media (max-width: 520px) { .home-links { flex-direction: column; align-items: flex-start; gap: 0; } .home-links a, .home-links a + a { padding: 0; border-left: 0; } }