/* ============================================================ ALINA SZAPOCZNIKOW — Home Since the meeting of 1 Oct (v105): the COVER (portrait + the name, which travels into the bar's title) → the bar → Biographie → Actualités (one row per actualité, its image on the left: v119, it replaced the "la luce" stage; rows styled in expo-index.css) → Expositions → Chronologie (the two previews, v111) → Collections publiques → Publications → the colophon footer. The bar is the sticky bar of every page (wireframe.css): under the cover on the first screen, at the top once the cover has gone. Engine: home.js (cover, name, Actualités) + wireframe.js (lists, strip, opening records). Data: AS_ACTU, AS_EXPO_RECENT, AS_CHRONO, AS_COLL, AS_PUB. ============================================================ */ /* every section's own title lands flush under the bar, from the menu or a link (the browser's jump, and home.js's) */ section[id], [id].section { scroll-margin-top: var(--topbar-h, 53px); } /* as specific as wireframe.css's 64px, and later */ /* ---- THE COVER (meeting 1 Oct; it replaces the E1 splash) ---- The portrait at full height, ported from the design proposal Seba and Alexandra approved ("le grand portrait … ça fait le job"): Roman Cieślewicz, Malakoff 1972, the high-res scan; the name at the top, the colophon's blocks along the foot (home.js clones them). The first screen is the cover and the bar under it. svh: holds still while a phone's toolbar moves. */ .cover { position: relative; height: calc(100vh - var(--topbar-h, 53px)); height: calc(100svh - var(--topbar-h, 53px)); overflow: hidden; overflow-anchor: none; background: #1a1a1a; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 5svh, 64px) 10px 14px; } .cover-media { position: absolute; inset: 0; margin: 0; } .cover-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 47% 40%; } /* shade only where type sits (the name at the top, the colophon at the foot); the face stays clear */ .cover-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 34%, rgb(0 0 0 / 0) 56%, rgb(0 0 0 / .72)); } .cover-nom { position: relative; margin: 0; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 4.8rem); line-height: .95; letter-spacing: -0.01em; } .cover-nl { white-space: nowrap; } /* two lines, always: the travelling copy is drawn line for line */ /* phones: "Alina Szapocznikow" is 8.80 em wide in Mercure (measured 02.10); at the minimum 35px it filled a 320px screen edge to edge, so the name shrinks to the width it has (9 em: air) */ @media (max-width: 899px) { .cover-nom { font-size: min(clamp(2.2rem, 4vw, 4.8rem), calc((100vw - 20px) / 9)); } } /* the cover's foot: Représentation | Hauser & Wirth | Archive, bottom-aligned */ .cover-foot { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; text-align: left; } .cover-foot .ft-label { font-family: var(--ui); font-size: var(--fs-meta); line-height: 1.5; color: rgb(255 255 255 / .62); margin: 0 0 4px; } .cover-foot .body { font-family: var(--display); font-size: var(--fs-body); line-height: 1.35; color: #fff; } .cover-foot .meta { font-family: var(--ui); font-size: var(--fs-meta); line-height: 1.5; color: #fff; } .cover-foot a { color: #fff; } /* the three columns share one grid of four rows (labels | names | details | last line), so tops and bottoms line up across them; the colophon's inline margins go, the row gap spaces them */ @media (min-width: 901px) { .cover-foot { grid-template-rows: repeat(4, auto); row-gap: 4px; } .cover-foot .foot-block { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; align-items: end; } .cover-foot .foot-block > * { margin: 0 !important; } .cover-foot .foot-block:nth-child(2) > :nth-child(1) { grid-row: 2; } /* Hauser & Wirth on the names row */ .cover-foot .foot-block:nth-child(2) > :nth-child(2) { grid-row: 3; } /* its cities on the details row */ .cover-foot .foot-block:nth-child(3) > :nth-child(2) { grid-row: 2 / span 2; } /* Archive's courtesy */ .cover-foot .foot-block:nth-child(3) > :nth-child(3) { grid-row: 4; } /* © ADAGP on the last line */ } /* phones: stacked in plain line steps; the two galleries by name and the rights line only (three full blocks buried the face); the full colophon stays in the footer */ @media (max-width: 900px) { .cover-foot { grid-template-columns: 1fr; gap: 0; } .cover-foot .foot-block { margin: 0; } .cover-foot .foot-block > * { margin: 0 !important; } .cover-foot .foot-block > .ft-label { margin-bottom: 4px !important; } .cover-foot .foot-block:nth-child(3) { margin-top: 12px; } .cover-foot .foot-block:nth-child(1) .meta, .cover-foot .foot-block:nth-child(2) .meta, .cover-foot .foot-block:nth-child(3) .meta:not(:last-child) { display: none; } } /* THE BAR'S TITLE (home.js, Seba 04.10): away while the cover and its own name are on the screen, it drops into place from above as the bar docks at the top, and lifts away again on the way back up. No travelling copy of the name any more. */ .topbar.title-wait .crumb { transition: opacity .3s ease, transform .5s cubic-bezier(.19, 1, .22, 1); } .topbar.title-wait:not(.titled) .crumb { opacity: 0; transform: translateY(-120%); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .topbar.title-wait .crumb { transition: none; } } /* phones: the menu drops from the bar wherever the bar is (wireframe.css pins it under the top of the screen, which opened it over the cover); until the bar docks it sits at the foot of the first screen, so the menu opens UPWARD over the cover, the bar above the cover meanwhile */ @media (max-width: 1024px) { .topbar .topnav { position: absolute; top: 100%; max-height: calc(100svh - var(--topbar-h, 53px)); } /* only as tall as the room above the bar (home.js: --bar-top), so no link runs off the top */ body:not(.bar-docked) .topbar .topnav { top: auto; bottom: 100%; max-height: var(--bar-top, 50svh); } body.nav-open:not(.bar-docked) .topbar { z-index: 46; } /* open, above everything on the cover */ } /* ---- full-width label bar ---------------------------------------------- The title link of every home section (Biographie · Actualités · Expositions · Chronologie · Collections · Publications): an , hence text-decoration:none. It sits in .hz-bar (below). */ .hz-down { flex: 0 0 auto; width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 10px; cursor: pointer; text-align: left; text-decoration: none; /* label at the 10px edge to align with every other section title (Seba) */ border: 0; border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--bg) 45%, #fff); font-family: var(--display); font-size: 0.95rem; color: var(--ink); transition: background .2s ease; } .hz-down:hover { background: var(--wash, #eef0f6); } /* (the ↓ after each title went 04.10, Seba) */ /* THE SECTION'S BAR STAYS (Seba 04.10, after Mousse Magazine's breadcrumb bar: the page's scaffolding as a second sticky line under the site's bar). It holds under the site's bar while its section scrolls by; the end of the section pushes it away and the next section's bar takes its place. Above the lists, under their previews (36: centred, they may cross a bar still mid-screen) and the site's bar (40); a hairline under it, so the rows that pass beneath stay apart. Its height (--xbar2, tweaks-apply.js) is left out of the room of a preview held in the middle of the screen (expo-index.css). */ /* The bar is a wrapper (.hz-bar) since 04.10: the title link fills it and, for a list (Actualités, Expositions, Collections, Publications), Liste / Galerie sits at its right end (Seba: "integrated on the sticky bar", as the full pages' bar holds their tools). A link cannot hold buttons, so the two stand side by side in it; the bar carries the paper and the hairlines. */ section > .hz-bar { position: sticky; top: var(--bar-under, 53px); z-index: 30; display: flex; align-items: center; border-top: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule); background: color-mix(in srgb, var(--bg) 45%, #fff); transition: top .4s cubic-bezier(.19, 1, .22, 1); } /* --bar-under: the top while the site's bar is away (wireframe.css) */ .hz-bar > .hz-down { flex: 1 1 auto; width: auto; min-width: 0; border-top: 0; background: transparent; } .hz-bar > .hz-down:hover { background: var(--wash, #eef0f6); } .hz-bar > .pubview { flex: none; margin: 0; padding: 0 10px 0 16px; align-self: stretch; align-items: center; } /* ---- EXPOSITIONS + CHRONOLOGIE on the home (meeting 1 Oct, v111; engine: wireframe.js) ---- Expositions = the list kit (expo-index.css), its rows and floating preview as on expositions.html. Chronologie = one strip of every image at one height, oldest first, scrolled by hand or by ‹ ›; each image and its year are one link to that year. */ .xall { margin: 18px 0 0; font-family: var(--ui); font-size: var(--fs-meta); } /* THE ARROWS (Seba 04.10: "only swiping, it's not super clear"): ‹ › at the strip's two edges, in the middle of the images' height, on phones too; each steps one image to the middle (wireframe.js). The paper, hairline and soft shadow of the "Actualités (n)" button. They used to be small marks above the strip on the right, and none on a phone. After the strip in the page (Tab from › goes on to "Toute la chronologie", review 03.10), drawn over its sides. */ .cs-wrap { --cs-h: clamp(260px, 56vh, 600px); position: relative; display: flex; flex-direction: column; } /* the images' height, here so the strip AND the arrows beside it share it */ .cs-nav { position: absolute; left: 0; right: 0; top: 0; height: var(--cs-h); margin: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .cs-nav .xs-btn { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; font-size: 1.6rem; line-height: 1; color: var(--ink); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(26,26,26,.10); transition: opacity .2s ease, background .2s ease; } .cs-nav .xs-btn:hover, .cs-nav .xs-btn:focus-visible { background: var(--bg); border-color: var(--mut); } .cs-nav .xs-btn[aria-disabled="true"] { opacity: 0; pointer-events: none; } /* nothing that way: gone */ .cs-nav .xs-btn[aria-disabled="true"]:focus-visible { opacity: .3; } /* …but still seen by the keyboard that sits on it (review 04.10) */ /* Bigger, and browsed from the middle (Seba 04.10): the images stand up to 56% of the screen's height (220px until then), the first image starts in the middle of the screen and every image settles there (the strip's side padding is half the screen less half that image, set by wireframe.js csPad), its year centred under it. Each image is its own link (04.10: a year's images were one block until then). The section grows with it. */ .cstrip { position: relative; /* the images' offsetLeft counts from the strip (wireframe.js csNear) */ display: flex; align-items: flex-start; gap: clamp(24px, 3vw, 48px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding: 0 0 14px; } .cs-pic { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; scroll-snap-align: center; } /* its own width at the strip's height, held before it loads (width/height from the data) */ .cs-pic img { display: block; height: var(--cs-h); width: auto; background: var(--ph); transition: opacity .18s ease; } .cs-pic img:not([height]) { width: calc(var(--cs-h) * .75); object-fit: contain; } .cs-pic:hover img, .cs-pic:focus-visible img { opacity: .72; } /* the keyboard ring drawn INSIDE the image's link: the strip scrolls, so a ring outside it was cut off at the top (and on the left of the first image), review 03.10 */ .cs-pic:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .cs-yr { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); letter-spacing: .02em; text-align: center; transition: color .18s ease; } /* the image in the middle, whose caption is under the strip (wireframe.js csCap): its year in ink */ .cs-pic.is-on .cs-yr, .cs-pic:hover .cs-yr, .cs-pic:focus-visible .cs-yr { color: var(--ink); } /* the caption of the image in the middle of the strip, centred at the foot of the section (Seba 04.10; wireframe.js csCap): what it shows, then by whom, when, what. Its height held, so the section does not jump between a two-line caption and a one-line one */ .cs-cap { margin: 22px auto 0; max-width: 70ch; min-height: 4.2em; text-align: center; } .cs-cap-t { display: block; font-family: var(--body); font-size: var(--fs-body); line-height: 1.35; color: var(--ink); } .cs-cap-m { display: block; margin-top: 6px; font-family: var(--ui); font-size: var(--fs-meta); line-height: 1.5; color: var(--mut); letter-spacing: .02em; } @media (max-width: 900px) { .cs-wrap { --cs-h: 260px; } .cs-nav .xs-btn { width: 40px; height: 40px; font-size: 1.4rem; } } /* phones: swipe, or the arrows (150px and no arrows until 04.10) */ /* ============================================================ SITE FOOTER — the Colophon (the menu's last item lands here). Reduced height (the old #colophon min-height:100vh is gone) + two columns like the reference. ============================================================ */ .site-foot { border-top: 1px solid var(--rule); padding: clamp(40px, 6vh, 72px) 0 clamp(28px, 4vh, 46px); } .site-foot .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; } @media (max-width: 700px) { .site-foot .foot-cols { grid-template-columns: 1fr; gap: 30px; } }