/* ============================================================================ SADER — SECTION: PRESS (.s-press) "The Reading Room" The full catalogue, Stripe-Press-style, in the SADER monochrome system. Desktop = a split: a STICKY 3D book stage (a real CSS cuboid — no WebGL) and a searchable, scrolling catalogue. Hovering / scrolling a title turns the book to it; selecting it flies the cover into the individual record (see press.js + pub-enter.js). Logical properties so it flips for RTL; reduced-motion aware. ============================================================================ */ .s-press { position: relative; /* No overflow here — it would re-parent the sticky stage. Horizontal bleed is contained by overflow-x:hidden on ; the glow is clipped on the stage. */ --bw: clamp(12rem, 8rem + 8vw, 17rem); /* cover width */ --bh: calc(var(--bw) / 0.7); /* cover height */ --bt: clamp(2rem, 1.5rem + 1.2vw, 2.7rem); /* book thickness */ --press-glow: rgba(244, 244, 244, 0.10); } /* -------------------------------------------------------------------------- (a) INTRO -------------------------------------------------------------------------- */ .s-press__intro { position: relative; z-index: var(--z-raised); max-inline-size: 52rem; padding-block-start: clamp(var(--space-9), 8vw, var(--space-11)); padding-block-end: clamp(var(--space-6), 4vw, var(--space-8)); } .s-press__title { font-family: var(--font-display); font-size: var(--fs-display-2); font-weight: var(--fw-semi); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--text); margin-block-start: var(--space-4); text-wrap: balance; } .s-press__title em { font-style: italic; } .s-press__lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); max-inline-size: 42rem; margin-block-start: var(--space-5); } /* -------------------------------------------------------------------------- (b) EXPERIENCE — split grid: sticky stage + scrolling panel. -------------------------------------------------------------------------- */ .s-press__experience { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 4vw, var(--space-10)); align-items: start; max-inline-size: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); padding-block-end: var(--space-10); } /* The 3D stage — pinned while the catalogue scrolls past it. */ .s-press__stage { position: sticky; inset-block-start: var(--header-h); block-size: calc(100vh - var(--header-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); overflow: clip; /* contains the glow; clipping self is safe */ } .s-press__stagewrap { position: relative; display: flex; align-items: center; justify-content: center; inline-size: 100%; flex: 1; transition: opacity var(--dur-base) var(--ease); } .s-press__stagewrap.is-empty { opacity: 0; } /* no results → hide the book */ .s-press__glow { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: min(36rem, 84%); block-size: min(36rem, 74%); translate: -50% -50%; background: radial-gradient(closest-side, var(--press-glow), transparent 72%); filter: blur(8px); transition: background var(--dur-slow) var(--ease); pointer-events: none; } .s-press__scene { position: relative; inline-size: var(--bw); block-size: var(--bh); perspective: 2200px; perspective-origin: 50% 38%; z-index: var(--z-base); cursor: pointer; } .s-press__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg); transition: transform var(--dur-base) var(--ease); will-change: transform; } /* THE 3D BOOK — cuboid via the shared-edge transform-origin method. */ .book3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-26deg); will-change: transform; } .book3d__face { position: absolute; overflow: hidden; } .book3d__face--front, .book3d__face--back { inset: 0; inline-size: var(--bw); block-size: var(--bh); border-radius: 2px 4px 4px 2px; } .book3d__face--front { transform: translateZ(calc(var(--bt) / 2)); background: #14140f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .book3d__face--back { transform: rotateY(180deg) translateZ(calc(var(--bt) / 2)); background: linear-gradient(120deg, #15151a, #0c0c0e); } .book3d__cover { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; filter: saturate(0.96) contrast(1.02); } .book3d__gloss { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.04) 56%, transparent 70%); mix-blend-mode: screen; opacity: 0.5; pointer-events: none; } .book3d__face--front::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 14%; background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0) 100%); pointer-events: none; } .book3d__face--spine { inline-size: var(--bt); block-size: var(--bh); inset-block-start: 0; inset-inline-start: 0; transform-origin: left center; transform: rotateY(-90deg); background: linear-gradient(180deg, #1b1b16, #0d0d0a); display: flex; align-items: center; justify-content: center; box-shadow: inset 1px 0 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(0,0,0,.5); } .book3d__spine-text { font-family: var(--font-display); font-size: var(--fs-caption); font-weight: var(--fw-semi); letter-spacing: .04em; color: rgba(244,244,244,.82); white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed; max-block-size: 86%; overflow: hidden; text-overflow: ellipsis; } .book3d__face--fore, .book3d__face--top, .book3d__face--bottom { background: repeating-linear-gradient(to bottom, #efe9da 0, #efe9da 1px, #d9d2bf 1px, #d9d2bf 2px); } .book3d__face--fore { inline-size: var(--bt); block-size: var(--bh); inset-block-start: 0; inset-inline-end: 0; transform-origin: right center; transform: rotateY(90deg); box-shadow: inset 0 0 14px rgba(120,110,86,.35); } .book3d__face--top { inline-size: var(--bw); block-size: var(--bt); inset-block-start: 0; inset-inline-start: 0; transform-origin: top center; transform: rotateX(90deg); } .book3d__face--bottom { inline-size: var(--bw); block-size: var(--bt); inset-block-end: 0; inset-inline-start: 0; transform-origin: bottom center; transform: rotateX(-90deg); } .s-press__shadow { position: absolute; inset-block-end: -8%; inset-inline-start: 50%; inline-size: 78%; block-size: 8%; translate: -50% 0; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%); filter: blur(6px); z-index: -1; } .s-press__counter { font-family: var(--font-body); font-size: var(--fs-caption); letter-spacing: var(--tracking-wider); color: var(--text-faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .s-press__counter [data-press-now] { color: var(--text); } .s-press__counter-sep { opacity: 0.5; margin-inline: 0.2em; } /* -------------------------------------------------------------------------- (c) PANEL — search/filter toolbar + the catalogue list. -------------------------------------------------------------------------- */ .s-press__panel { min-inline-size: 0; } .s-press__toolbar { position: sticky; inset-block-start: var(--header-h); z-index: var(--z-sticky); display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-5); margin-block-end: var(--space-2); background: linear-gradient(to bottom, var(--bg) 72%, transparent); } .s-press__search { position: relative; display: flex; align-items: center; } .s-press__search-icon { position: absolute; inset-inline-start: 0; inline-size: 1.1rem; block-size: 1.1rem; color: var(--text-faint); pointer-events: none; } .s-press__search-input { inline-size: 100%; font-family: var(--font-body); font-size: var(--fs-lead); color: var(--text); background: transparent; border: 0; border-block-end: 1px solid var(--line-strong); padding-block: var(--space-3); padding-inline-start: 1.8rem; padding-inline-end: 1.8rem; } .s-press__search-input::placeholder { color: var(--text-faint); } .s-press__search-input:focus { outline: none; border-block-end-color: var(--accent); } .s-press__search-clear { position: absolute; inset-inline-end: 0; inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center; background: none; border: 0; color: var(--text-faint); font-size: 1.4rem; line-height: 1; cursor: pointer; } .s-press__search-clear:hover { color: var(--text); } .s-press__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .s-press__chip { font-family: var(--font-body); font-size: var(--fs-caption); letter-spacing: var(--tracking-wide); color: var(--text-muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-pill); padding-block: 0.35em; padding-inline: 0.9em; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .s-press__chip:hover { color: var(--text); border-color: var(--line-strong); } .s-press__chip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .s-press__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .s-press__sort { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-xs); padding-block: 0.45em; padding-inline: 0.8em; cursor: pointer; } .s-press__sort:focus { outline: none; border-color: var(--accent); } .s-press__count { font-family: var(--font-body); font-size: var(--fs-caption); letter-spacing: var(--tracking-wide); color: var(--text-faint); } .s-press__count .numeral { color: var(--text); font-variant-numeric: tabular-nums; } /* ---- The list ---- */ .s-press__list { display: flex; flex-direction: column; } .s-press__row { margin: 0; } .s-press__item { display: grid; grid-template-columns: minmax(0, 1fr); text-decoration: none; color: inherit; padding-block: clamp(var(--space-4), 2vw, var(--space-6)); border-block-end: 1px solid var(--line); opacity: 0.45; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .s-press__item:hover { opacity: 0.8; } .s-press__item.is-active { opacity: 1; } .s-press__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; opacity: 1; } .s-press__item-body { min-inline-size: 0; } .s-press__thumb { display: none; } /* desktop: the stage is the visual */ .s-press__kicker { display: block; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-faint); margin-block-end: var(--space-2); } .s-press__item-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--text); text-wrap: balance; overflow-wrap: anywhere; } .s-press__meta { margin-block-start: var(--space-3); font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .s-press__open { display: inline-flex; align-items: center; gap: 0.4em; color: var(--text); opacity: 0; translate: -0.4rem 0; transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease); } .s-press__item.is-active .s-press__open { opacity: 1; translate: 0 0; } .s-press__open svg { inline-size: 0.9em; block-size: 0.9em; } .s-press__empty { padding-block: var(--space-9); text-align: center; color: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-4); align-items: center; } /* -------------------------------------------------------------------------- (d) RESPONSIVE — stage drops out; list becomes cover cards. -------------------------------------------------------------------------- */ @media (max-width: 980px) { .s-press__experience { grid-template-columns: 1fr; gap: var(--space-6); } .s-press__stage { display: none; } .s-press__item { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-4); align-items: center; opacity: 1; } .s-press__thumb { display: block; inline-size: 4.5rem; aspect-ratio: 0.7; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-soft); background: #111; } .s-press__open { opacity: 1; translate: 0 0; } } @media (max-width: 560px) { .s-press__item { grid-template-columns: 3.5rem minmax(0, 1fr); } .s-press__thumb { inline-size: 3.5rem; } .s-press__item-title { font-size: var(--fs-h4); } .s-press__controls { flex-direction: column; align-items: flex-start; gap: var(--space-2); } } /* -------------------------------------------------------------------------- (e) RTL — a true mirror of the LTR book, not just a flipped pose. The face BOXES already swap sides on their own (inset-inline-*), but the things that actually build the cuboid — transform-origin and the sign of the rotation — are physical and do NOT flip. Left unhandled, the spine and the fore-edge hinge on the wrong edges and swing through the cover. So every side face is re-hinged on the opposite edge here, and each directional gradient / inset shadow is mirrored with it (angle a → 360 - a). Net effect: identical geometry, handed the other way — spine on the binding (right) side, page edges on the left. -------------------------------------------------------------------------- */ [dir="rtl"] .book3d { transform: rotateY(26deg); } /* Covers: round the fore-edge corners, not the binding ones. */ [dir="rtl"] .book3d__face--front, [dir="rtl"] .book3d__face--back { border-radius: 4px 2px 2px 4px; } [dir="rtl"] .book3d__face--back { background: linear-gradient(240deg, #15151a, #0c0c0e); } /* Light rakes in from the other side. */ [dir="rtl"] .book3d__gloss { background: linear-gradient(255deg, transparent 30%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.04) 56%, transparent 70%); } /* Binding shadow: darkest against the (now right-hand) binding edge. */ [dir="rtl"] .book3d__face--front::after { background: linear-gradient(to left, rgba(0,0,0,.4), rgba(0,0,0,0) 100%); } /* Spine sits at the right edge → hinge on its right edge, swing the other way. */ [dir="rtl"] .book3d__face--spine { transform-origin: right center; transform: rotateY(90deg); box-shadow: inset -1px 0 0 rgba(255,255,255,.07), inset 1px 0 0 rgba(0,0,0,.5); } /* Fore-edge sits at the left edge → hinge on its left edge. */ [dir="rtl"] .book3d__face--fore { transform-origin: left center; transform: rotateY(-90deg); } [dir="rtl"] .book3d__spine-text { writing-mode: vertical-lr; } /* -------------------------------------------------------------------------- (f) REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .s-press__tilt, .book3d, .s-press__item, .s-press__glow, .s-press__stagewrap { transition: none !important; } .book3d__gloss { display: none; } }