and this section, never to . ========================================================================== */ .oe-cine-home, .oe-cine-reveal, .oe-cine-reveal__inner, .oe-cine-rail, .oe-cine-rail__card { --oe-cine-blue: #0027f2; --oe-cine-blue-light: #3464fd; --oe-cine-coral: #ff6e73; --oe-cine-muted: #7c87c0; --oe-cine-ground: var(--oe-surface-abyss, #071d31); --oe-cine-ground-rgb: 7, 29, 49; /* One step up from the ground, so a card reads as a surface rather than a hole. Kept as a token because it is used by the card and its media well. */ --oe-cine-raised: #0d2a44; } /* ---- The film, full bleed, with the designs floating over it -------------- */ /* Chad, 2026-09-08: "It is still on a black background that takes away from the entire screen being filled with water and action. The product needs to be transparent and float above the video." So the film keeps the WHOLE viewport. There is no column, no panel, no mask and no edge — the earlier split was spending half the screen on darkness. The designs float over the footage as transparent cut-outs. That is not a contradiction of the earlier note. What was rejected before was an artwork COVERING the action: opaque, centred, filling the frame. These sit to one side, at a size that leaves the subject clear, and they carry no box. */ .oe-cine-home .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine-rail { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: end; padding: clamp(1.5rem, 4vw, 3.5rem); /* The overlay must never eat a scroll gesture or a click meant for the film. Interactivity is handed back on the card itself. */ pointer-events: none; overflow-x: clip; } .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine-rail__card { grid-area: 1 / 1; pointer-events: auto; width: min(38vw, 22rem); } /* Narrow: the frame is tighter and the copy owns the lower third, so the design sits upper-right and smaller rather than beside anything. */ @media (max-width: 900px) { .oe-cine-home .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine-rail { align-content: start; padding-block-start: clamp(1.25rem, 8vh, 4rem); } .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine-rail__card { width: min(46vw, 14rem); } } /* STATIC: no JS, reduced motion, or the engine gave up. Nothing is floating over anything, so the cards become an ordinary list under the poster and every design and link stays reachable. This is the state the page ships in. */ .oe-cine[data-oe-cinematic-mode='static'] .oe-cine-rail { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2rem); background: var(--oe-cine-ground); overflow-x: clip; } /* ---- Rail cards ---------------------------------------------------------- */ .oe-cine-rail__card { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 0.4rem; text-align: center; } /* Floating over footage, so the artwork carries its own separation rather than a container: a drop-shadow lifts it off whatever is moving underneath. */ .oe-cine-rail__art { display: block; width: 100%; height: auto; margin-bottom: 0.5rem; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55)); } /* The design resolving out of the water. The engine runs `--oe-beat-in` from 0 to 1 across the card's window, which is its chapter's hold - so this plays while the film is parked on the shot the design belongs to, not while the footage is still moving under it. The art arrives a touch oversized and out of focus, as though it were still being read through water, and settles sharp as the shot holds. The fallback is 1, fully resolved: if the tween never runs - no JavaScript, the video fallback, or a beat the engine did not pick up - the card is simply there, which is the same thing the no-JS path already shows. Blur is capped low and paired with the existing drop-shadow in one filter, because two stacked filtered layers over moving footage is where this gets expensive. */ @media (prefers-reduced-motion: no-preference) { .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine-rail__art { transform: scale(calc(1 + (1 - var(--oe-beat-in, 1)) * 0.05)); transform-origin: 50% 62%; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55)) blur(calc((1 - var(--oe-beat-in, 1)) * 7px)); will-change: transform, filter; } /* The label and price follow the art up rather than arriving with it, so the card reads as one movement settling instead of three things fading in. */ .oe-cine[data-oe-cinematic-mode='scroll'] :is(.oe-cine-rail__title, .oe-cine-rail__price) { transform: translateY(calc((1 - var(--oe-beat-in, 1)) * 0.5rem)); } } /* A soft radial, not a panel. Bright whitewater can run directly under this copy, and a box would put back exactly what Chad rejected. This has no edge to see — it only lifts the local contrast enough for the words to hold. The rail clips it horizontally. Measured in the audit: at a 526px viewport the card is 473px wide but scrolled to 559px, because this pseudo-element spills ~86px past the card, which pushed the whole document to 585px and gave the page a horizontal scrollbar. That happened in STATIC mode — the state the page ships in before the engine boots, and the state no-JS and reduced-motion visitors keep. `clip` rather than `hidden` so no scroll container is created and the pinned layout is untouched. */ .oe-cine-rail__card::before { content: ''; position: absolute; inset: -14% -18%; z-index: -1; background: radial-gradient( closest-side, rgba(var(--oe-cine-ground-rgb), 0.62), rgba(var(--oe-cine-ground-rgb), 0.28) 62%, transparent 78% ); pointer-events: none; } .oe-cine-rail__title { text-shadow: 0 1px 16px rgba(var(--oe-cine-ground-rgb), 0.85); margin: 0; /* Stated outright: oe-design-system.css paints headings navy, which on this ground would be navy on navy. */ color: var(--oe-white, #fff); font-family: var(--ce-font-display, var(--oe-font-display, serif)); font-size: 1.0625rem; line-height: 1.25; letter-spacing: 0; } .oe-cine-rail__title a { color: inherit; text-decoration: none; } /* Stretched link: the whole card is the target, artwork included. Without this the only thing clickable was the title text, measured at 21x138px against a 473x591px card — WCAG 2.5.8, and a poor target on a phone. The designs page already worked this way; the rail did not. */ .oe-cine-rail__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .oe-cine-rail__card:hover .oe-cine-rail__title a { text-decoration: underline; text-underline-offset: 0.18em; } .oe-cine-rail__price, .oe-cine-rail__price :is(span, del, ins, bdi) { text-shadow: 0 1px 14px rgba(var(--oe-cine-ground-rgb), 0.8); color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.9375rem; line-height: 1.4; } .oe-cine-rail__price del, .oe-cine-rail__price del :is(span, bdi) { color: var(--oe-cine-muted); text-decoration: line-through; } .oe-cine-rail__cta { text-shadow: 0 1px 14px rgba(var(--oe-cine-ground-rgb), 0.8); color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.875rem; font-weight: 600; } .oe-cine-rail__cta::after { content: ' \2192'; } .oe-cine-rail__state { margin-top: 0.15rem; padding: 0.25rem 0.55rem; border-radius: 0.25rem; background: rgba(255, 255, 255, 0.12); color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.75rem; font-weight: 600; } /* A card the engine has faded out is made inert by the page script, which also takes it out of the tab order. Belt and braces for the moment before that script runs. */ .oe-cine-rail__card[inert] { pointer-events: none; } .oe-cine-rail :is(a, button):focus-visible { outline: 3px solid var(--oe-cine-coral); outline-offset: 2px; border-radius: 0.25rem; } /* The stretched link's own outline would trace the title text rather than the card it actually covers. */ .oe-cine-rail__card:has(.oe-cine-rail__title a:focus-visible) { outline: 3px solid var(--oe-cine-coral); outline-offset: 4px; border-radius: 0.4rem; } .oe-cine-rail__card:has(.oe-cine-rail__title a:focus-visible) .oe-cine-rail__title a:focus-visible { outline: none; } @media (forced-colors: active) { .oe-cine-rail { border: 1px solid CanvasText; } } @media print { .oe-cine-rail { background: #fff; } .oe-cine-rail__title, .oe-cine-rail__title a, .oe-cine-rail__price, .oe-cine-rail__price :is(span, del, ins, bdi), .oe-cine-rail__cta, .oe-cine-rail__state { color: #000; } } /* ---- The reveal ---------------------------------------------------------- */ /* Continues the film's ground with no seam: the octopus ends and this begins, so the two read as one surface rather than as a page break. */ .oe-cine-reveal { background: var(--oe-cine-ground); color: var(--oe-white, #fff); padding-block: clamp(3.5rem, 8vw, 6.5rem); padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right)); } .oe-cine-reveal__inner { margin-inline: auto; max-width: 68rem; } /* ---- Section head -------------------------------------------------------- */ .oe-cine-reveal__head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 42rem; } .oe-cine-reveal__head h2 { margin: 0 0 0.6em; color: var(--oe-white, #fff); font-family: var(--ce-font-display, var(--oe-font-display, serif)); font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; } .oe-cine-reveal__intro { margin: 0; color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.6; max-width: 34rem; } /* ---- Actions ------------------------------------------------------------- */ .oe-cine-reveal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0 0 1.5rem; } .oe-cine-reveal__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.7rem 1.5rem; border-radius: 0.4rem; background: var(--oe-cine-blue); color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 1rem; font-weight: 600; text-decoration: none; } .oe-cine-reveal__button:hover { background: var(--oe-cine-blue-light); } .oe-cine-reveal__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 1rem; text-decoration: underline; text-underline-offset: 0.2em; } /* ---- Catalog-mode notice ------------------------------------------------- */ /* Ordering is off, and the page says so rather than showing prices and a "See the collection" button over a cart that returns 403. Deliberately NOT a tinted alert box with a coloured left tab. That pattern is a generic convention borrowed from admin UIs, and coral is already carrying one meaning in this file — the focus ring. Giving it a second meaning here dilutes both. Instead the notice is built from the page's own material: the card surface, plus the only full hairline border in the section. It reads as a considered note rather than a warning sticker, and it is still the most set-apart block on the page — which matters, because this is the sentence that tells someone they cannot buy anything yet. */ .oe-cine-reveal__notice { margin: 0 0 clamp(2rem, 4vw, 2.75rem); padding: 1rem 1.15rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.4rem; background: var(--oe-cine-raised); color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.9375rem; line-height: 1.55; max-width: 44rem; } /* ---- Collections --------------------------------------------------------- */ .oe-cine-reveal__collections-title { margin: 0 0 0.85rem; color: var(--oe-cine-muted); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .oe-cine-reveal__collections ul { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; margin: 0; padding: 0; list-style: none; } .oe-cine-reveal__collections a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 2rem; color: var(--oe-white, #fff); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.9375rem; text-decoration: none; } .oe-cine-reveal__collections a:hover { border-color: var(--oe-cine-blue-light); } /* ---- Focus --------------------------------------------------------------- */ /* One visible ring for everything interactive in the reveal. Coral on the dark ground, stated outright so no theme rule can remove it. */ .oe-cine-reveal :is(a, button):focus-visible { outline: 3px solid var(--oe-cine-coral); outline-offset: 2px; border-radius: 0.25rem; } /* ---- Reduced motion ------------------------------------------------------ */ /* Nothing here animates, but hover/colour transitions inherited from the theme are still motion to someone who asked for none. */ @media (prefers-reduced-motion: reduce) { .oe-cine-reveal *, .oe-cine-reveal *::before, .oe-cine-reveal *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ---- Forced colours ------------------------------------------------------ */ /* When the ground and the card surfaces are dropped, the copy must still be readable and the focus ring must survive. */ @media (forced-colors: active) { /* The notice is defined by its border now, so it must keep one when the authored colours are dropped. */ .oe-cine-reveal__notice { border: 1px solid CanvasText; } .oe-cine-reveal__button { border: 1px solid ButtonText; } .oe-cine-reveal :is(a, button):focus-visible { outline-color: Highlight; } } /* ---- Print --------------------------------------------------------------- */ @media print { .oe-cine-reveal { padding-block: 1rem; background: #fff; color: #000; } /* Every element that sets an explicit white must be listed. An explicit declaration beats the inherited #000 above, so anything omitted here prints white on white and simply vanishes — the catalog-mode notice did exactly that, which matters because it is the sentence saying the store cannot take orders. */ .oe-cine-reveal :is(h2, h3), .oe-cine-reveal__intro, .oe-cine-reveal__notice, .oe-cine-reveal__collections a, .oe-cine-reveal__button, .oe-cine-reveal__link { color: #000; } /* Backgrounds are commonly dropped when printing, so anything that relied on one for contrast gets a border instead. */ .oe-cine-reveal__button, .oe-cine-reveal__notice { background: #fff; border: 1px solid #000; } } /* ========================================================================== THE SPINE -------------------------------------------------------------------------- A persistent index of every design, down the left edge of the film. It is the only chrome allowed to sit on the footage, so it is drawn as hairlines and small caps: no panel, no card, no button chrome. The film has to stay the loudest thing on the page, and an index that competes with it has failed whatever it does for navigation. LEGIBILITY OVER MOVING PICTURE. Text on video cannot be checked once and trusted - the frame underneath changes 146 times. A narrow scrim holds the left edge dark enough that cream type clears 4.5:1 against ANY frame in the sequence, including the pale kite sky at 0.17 and the white water at 0.30. The scrim is the price of putting type on film; blur or a drop shadow would only work on the frames you happened to look at. ========================================================================== */ .oe-spine[hidden] { display: none !important; } .oe-cine[data-oe-cinematic-mode='scroll'] .oe-spine { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 4; display: grid; align-content: center; padding-inline-start: max(1.1rem, env(safe-area-inset-left)); padding-inline-end: 1.5rem; pointer-events: none; } .oe-spine__list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(0.7rem, 1.6vh, 1.15rem); } .oe-spine__mark { pointer-events: auto; display: flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0.5rem 0.25rem; border: 0; background: none; color: rgba(247, 244, 236, 0.72); font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-align: start; cursor: pointer; transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1); } /* The rule is the mark. It lengthens and brightens as its chapter arrives - one authored movement, not an effect on every element. */ .oe-spine__rule { flex: 0 0 auto; inline-size: 1.15rem; block-size: 1px; background: currentColor; transition: inline-size 420ms cubic-bezier(0.16, 1, 0.3, 1), background-color 240ms cubic-bezier(0.16, 1, 0.3, 1); } .oe-spine__name { display: block; max-inline-size: 11rem; hyphens: none; overflow-wrap: normal; text-wrap: balance; line-height: 1.25; opacity: 0.001; /* present for assistive tech, invisible until live */ transform: translateX(-0.25rem); transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .oe-spine__item[data-active] .oe-spine__mark { color: #f7f4ec; } .oe-spine__item[data-active] .oe-spine__rule { inline-size: 2.6rem; background: var(--oe-brand-coral, #f27777); } .oe-spine__item[data-active] .oe-spine__name { opacity: 1; transform: none; } .oe-spine__mark:hover { color: #f7f4ec; } .oe-spine__mark:hover .oe-spine__rule { inline-size: 2rem; } .oe-spine__mark:hover .oe-spine__name { opacity: 1; transform: none; } .oe-spine__mark:focus-visible { outline: 2px solid var(--oe-brand-coral, #f27777); outline-offset: 3px; border-radius: 2px; color: #f7f4ec; } .oe-spine__mark:focus-visible .oe-spine__name { opacity: 1; transform: none; } /* Narrow screens: the index moves to the foot of the frame and runs across it, because a vertical index on a phone eats the picture it is indexing. */ @media (max-width: 46.875rem) { .oe-cine[data-oe-cinematic-mode='scroll'] .oe-spine { inset-block-start: auto; inset-inline: 0; align-content: end; padding: 0 0 max(1rem, env(safe-area-inset-bottom)); } .oe-cine[data-oe-cinematic-mode='scroll'] .oe-spine::before { inset-block-start: auto; inline-size: 100%; block-size: 6rem; background: linear-gradient(to top, rgba(6,12,26,0.78) 0%, rgba(6,12,26,0) 100%); } .oe-spine__list { grid-auto-flow: column; justify-content: center; gap: 0.9rem; } .oe-spine__name { display: none; } /* the rule alone carries position here */ .oe-cine[data-oe-cinematic-mode='scroll'] .oe-spine { padding-block-end: max(1.75rem, calc(env(safe-area-inset-bottom) + 1rem)); } .oe-spine__rule { inline-size: 1.4rem; } .oe-spine__item[data-active] .oe-spine__rule { inline-size: 2.4rem; } } @media (prefers-reduced-motion: reduce) { .oe-spine__mark, .oe-spine__rule, .oe-spine__name { transition-duration: 0.01ms !important; } } /* ---- browser surfaces ---------------------------------------------------- The parts not drawn here still belong to the design. Left at defaults they announce that a page was assembled rather than built. */ .oe-cine-home ::selection { background: var(--oe-brand-coral, #f27777); color: #060c1a; } .oe-cine-home { caret-color: var(--oe-brand-coral, #f27777); scrollbar-color: rgba(247,244,236,0.35) transparent; } /* ========================================================================== LEGIBILITY OVER THE FILM -------------------------------------------------------------------------- Measured, not assumed: white type over the palest frames in this sequence (the kite sky around 0.10) lands at 1.5:1. That is not a near miss, it is unreadable, and it changes 146 times so no single check can clear it. The answer is a two-sided edge gradient, not a flat overlay. Type lives at the left edge (the spine, the narrative beats) and the right edge (the design and its price); the SUBJECT always lives in the middle. Darkening only the edges buys 4.5:1 where the words are and leaves the octopus, the surfer and the kite exactly as shot. A flat scrim over the whole frame would have been easier and would have dimmed the one thing the page is built to show. ========================================================================== */ .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine__viewport::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, rgba(4, 10, 22, 0.82) 0%, rgba(4, 10, 22, 0.62) 12%, rgba(4, 10, 22, 0.28) 26%, rgba(4, 10, 22, 0.06) 38%, rgba(4, 10, 22, 0) 46%), linear-gradient(to left, rgba(4, 10, 22, 0.78) 0%, rgba(4, 10, 22, 0.55) 12%, rgba(4, 10, 22, 0.24) 26%, rgba(4, 10, 22, 0.05) 38%, rgba(4, 10, 22, 0) 46%); } /* Phones stack the type top and bottom rather than left and right, so the gradient turns with it. */ @media (max-width: 46.875rem) { .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine__viewport::after { background: linear-gradient(to bottom, rgba(4, 10, 22, 0.72) 0%, rgba(4, 10, 22, 0.34) 18%, rgba(4, 10, 22, 0) 34%), linear-gradient(to top, rgba(4, 10, 22, 0.86) 0%, rgba(4, 10, 22, 0.58) 16%, rgba(4, 10, 22, 0.18) 32%, rgba(4, 10, 22, 0) 46%); } } /* The spine, beats and rail all sit above the gradient. */ .oe-cine[data-oe-cinematic-mode='scroll'] .oe-spine, .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine__beats, .oe-cine[data-oe-cinematic-mode='scroll'] .oe-cine-rail { z-index: 3; } .oe-cine[data-oe-cinematic-mode='scroll'] .oe-spine { z-index: 4; } /* ========================================================================== SURFACING -------------------------------------------------------------------------- The film ends on the octopus, at depth. The page then comes up: a graded band carries the deep water of the last frame into daylight, and the ending is cream and navy rather than more dark water. That change of state is the whole point of the section. It is the difference between "here is more of the same page" and "you are out of the water now, and this is what you can wear" - which is exactly what the headline above it already says. ========================================================================== */ .oe-cine-reveal { position: relative; background: var(--oe-cream, #f7f4ec); color: var(--oe-navy, #102a43); padding-block: clamp(5.5rem, 11vw, 8.5rem) clamp(3.5rem, 8vw, 6.5rem); } /* the surface itself */ .oe-cine-reveal::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: clamp(4rem, 10vh, 9rem); background: linear-gradient(to bottom, #060c1a 0%, rgba(16, 42, 67, 0.55) 42%, rgba(247, 244, 236, 0) 100%); pointer-events: none; } .oe-cine-reveal__head h2 { color: var(--oe-navy, #102a43); } .oe-cine-reveal__intro { color: #41556a; } .oe-cine-reveal__button { background: var(--oe-brand-blue, #0526e8); color: #fff; } .oe-cine-reveal__button:hover { background: var(--oe-navy, #102a43); } .oe-cine-reveal__link { color: var(--oe-navy, #102a43); } .oe-cine-reveal__notice { color: #41556a; border-block-start-color: rgba(16, 42, 67, 0.16); } .oe-cine-reveal__collections-title { color: #41556a; } .oe-cine-reveal__collections a { color: var(--oe-navy, #102a43); border-color: rgba(16, 42, 67, 0.22); } .oe-cine-reveal__collections a:hover { background: var(--oe-navy, #102a43); color: var(--oe-cream, #f7f4ec); } .oe-cine-reveal :is(a, button):focus-visible { outline-color: var(--oe-brand-coral, #f27777); } /* ---- the field ---------------------------------------------------------- Bare artwork on daylight. No card, no border, no shadow: each of these is a transparent PNG that already carries its own silhouette, and a box around it would flatten the one thing worth showing. Sizes vary deliberately. A uniform grid of identical tiles reads as a catalogue page; an uneven field reads as a wall of work, which is what it is. */ .oe-field { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2.5vw, 2rem); align-items: start; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 0; list-style: none; } /* NO SIZE VARIATION. It was tried and it failed: a double-width tile read as a layout error rather than as rhythm, and on a two-column phone it swallowed the whole screen while everything else stayed small. These artworks are already wildly different shapes - a heart of clownfish, a long blue whale, a scrimshaw tooth - and that is all the variety the field needs. */ .oe-field__link { display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: start; gap: 0.45rem; text-decoration: none; color: inherit; } .oe-field__art { inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); /* Every design in this grid is a white-backed JPEG - checked, all six sample 255,255,255 in the corner - so none of them carry the transparency they appear to have. On paper that is a white square per tile. Multiplying against the page takes pure white to the page colour exactly, so the backgrounds disappear and the artwork keeps its own values. It is the one treatment that works for all of them equally, which is the point: the odd one out was odd because it had been given a frame instead. */ mix-blend-mode: multiply; } .oe-field__name { font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.8125rem; line-height: 1.3; text-align: center; text-wrap: balance; hyphens: none; overflow-wrap: normal; max-inline-size: 11rem; color: var(--oe-navy, #102a43); opacity: 0.62; transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); } .oe-field__price, .oe-field__price :is(span, bdi, del, ins) { font-family: var(--ce-font-ui, var(--oe-font-body, system-ui, sans-serif)); font-size: 0.78rem; color: #41556a; opacity: 0.001; transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); } .oe-field__link:hover .oe-field__art, .oe-field__link:focus-visible .oe-field__art { transform: translateY(-0.3rem) scale(1.03); } .oe-field__link:hover .oe-field__name, .oe-field__link:focus-visible .oe-field__name { opacity: 1; } .oe-field__link:hover .oe-field__price, .oe-field__link:focus-visible .oe-field__price { opacity: 1; } .oe-field__link:focus-visible { outline: 2px solid var(--oe-brand-coral, #f27777); outline-offset: 6px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { .oe-field__art, .oe-field__name, .oe-field__price { transition-duration: 0.01ms !important; } .oe-field__link:hover .oe-field__art { transform: none; } } /* Artwork that is genuinely rectangular gets a plate: inset slightly, a hairline, and the cream showing through around it. A rectangle among cut-outs reads as a mistake; a rectangle that is clearly framed reads as a different kind of piece, which is what scrimshaw on a tooth actually is. */ /* The plate treatment is gone. It framed two designs in a white card with a border to make their backgrounds look deliberate, which is what made the Blue Shark read as a square while the others did not - they have the same white background, they just were not outlined. Chad: "They should all be the same without a square background." With multiply above, they are. */