/* FAWDA·TV — styles */ :root { --noir: #0B0A09; --blanc: #ECE7DE; --sodium: #C9702A; --accent: #C9702A; --muted: rgba(236, 231, 222, .55); --line: rgba(236, 231, 222, .18); --f-display: 'Big Shoulders Display', 'Anton', Impact, sans-serif; --f-serif: 'EB Garamond', Georgia, serif; /* a book face: he writes novels, not landing pages */ --f-mono: 'Courier Prime', 'Courier New', monospace; /* labels set like a screenplay: he is a screenwriter */ --f-ar-display: 'Lalezar', 'IBM Plex Sans Arabic', sans-serif; --f-ar: 'Amiri', 'IBM Plex Sans Arabic', serif; --f-hand: 'Caveat', 'Segoe Print', cursive; /* his notebook (CH 5) */ --f-ar-hand: 'Aref Ruqaa', 'Amiri', serif; --breath: 0; --mx: 50vw; --my: 50vh; --my: 50dvh; --ease-cut: cubic-bezier(.7, 0, .2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--noir); color: var(--blanc); font-family: var(--f-serif); overflow: hidden; -webkit-font-smoothing: antialiased; } body.has-cursor, body.has-cursor * { cursor: none !important; } button { font: inherit; color: inherit; background: none; border: 0; } a { color: inherit; } [hidden] { display: none !important; } .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; } [lang="ar"] { font-family: var(--f-ar); direction: rtl; } kbd { font-family: var(--f-mono); border: 1px solid var(--line); padding: 0 .35em; } #void, #grain { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; } #void { z-index: 0; } #grain { z-index: 9000; } #stage { position: fixed; inset: 0; z-index: 1; transform-origin: 50% 50%; } .view { position: absolute; inset: 0; overflow: hidden; } /* ───────────────────────── CITY ───────────────────────── */ .montage { position: absolute; inset: -4%; } .montage .track { position: absolute; inset: 0; transform: scale(calc(1.06 + var(--breath) * .015)); } .montage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .montage img.on { opacity: 1; } /* a frame goes down to the night (fast), the next comes up (slower): a fade through black, no double exposure */ .montage img { transition: opacity .7s ease-in; will-change: transform, opacity; } .montage img.on { transition: opacity 1.3s ease-out; } /* the film each frame comes from, small, like a station's caption */ .ct-k { font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); } .ct-y { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: rgba(26,18,10,.6); } /* the frames show as they are, a little dimmed for the night; the camera's light makes them full and sharp */ .montage.soft { filter: grayscale(.4) sepia(.3) hue-rotate(-8deg) saturate(1.2) brightness(.6) contrast(1.1); } /* the city's warm night, lighter than before */ .montage.sharp { filter: grayscale(.2) sepia(.18) hue-rotate(-8deg) saturate(1.2) brightness(.9) contrast(1.12); -webkit-mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000 30%, transparent 100%); mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000 30%, transparent 100%); } #city::after { /* night falls from the top */ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11,10,9,.85) 0%, rgba(11,10,9,.1) 35%, rgba(11,10,9,.25) 70%, rgba(11,10,9,.9) 100%); } .city-name { position: absolute; left: clamp(16px, 4vw, 64px); bottom: clamp(110px, 16vh, 180px); bottom: clamp(110px, 16dvh, 180px); z-index: 2; pointer-events: none; } .name-latin { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(72px, 15vw, 230px); line-height: .78; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1px rgba(236,231,222,.55); mix-blend-mode: screen; } .name-arabic { font-family: var(--f-ar-display); font-size: clamp(48px, 9vw, 140px); line-height: 1; color: var(--accent); opacity: .85; margin-top: -.45em; margin-left: 18vw; mix-blend-mode: screen; text-align: left; } .name-tag { font-style: italic; font-size: clamp(16px, 1.6vw, 22px); color: var(--muted); margin-top: .4em; } .name-tag .mono { font-style: normal; font-size: 10px; } .subtitle-track { position: absolute; left: 0; right: 0; bottom: 150px; text-align: center; z-index: 4; pointer-events: none; padding: 0 16px; } /* his words as on a screening copy: cream serif in the lamp's light, no box; under them, small, where he said it */ .subtitle { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; margin: 0; opacity: 0; max-width: min(760px, 92vw); } .st-text { font-family: var(--f-serif); font-style: italic; font-size: clamp(19px, 1.75vw, 26px); line-height: 1.25; color: #F4E6CC; text-shadow: 0 2px 12px rgba(0,0,0,.95), 0 0 2px #000, 0 0 30px rgba(18,9,3,.8); } .st-text[lang^="fr"]::before { content: '« '; } .st-text[lang^="fr"]::after { content: ' »'; } .st-text[lang^="en"]::before { content: '“'; } .st-text[lang^="en"]::after { content: '”'; } .st-text[lang^="ar"] { font-family: var(--f-ar-display); font-style: normal; font-size: clamp(21px, 1.95vw, 29px); } .st-src { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: rgba(242,224,192,.6); text-shadow: 0 1px 6px #000; } .st-src::before, .st-src::after { content: ''; width: 18px; height: 1px; background: rgba(214,162,90,.6); } /* on a narrower screen the subtitle keeps to the right of the « Qui est-il ? » sticker */ @media (min-width: 761px) and (max-width: 1180px) { .subtitle-track { padding-left: 350px; } .subtitle { max-width: calc(100vw - 380px); } } /* on a phone: the subtitle sits low, above the cue, and the portrait hangs smaller so it fits the narrow screen */ @media (max-width: 760px) { .subtitle-track { bottom: 92px; top: auto; } .subtitle { max-width: calc(100vw - 32px); } .st-text { font-size: 17px; } .city-scroll { bottom: 26px; font-size: 15px; } } /* ───────────────────────── SIGNAL ───────────────────────── */ #signal { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; } body.is-on #signal { opacity: 1; transition: opacity 1s; } .ident { position: absolute; top: 18px; left: clamp(16px, 3vw, 40px); font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: .03em; } .ident-ar { font-family: var(--f-ar-display); color: var(--accent); font-size: 22px; margin-left: .3em; } /* « En direct »: a broadcast plate, red tag first, then the city and its real hour */ /* the station's corner bug: top right, small and half-transparent, like the logo a channel keeps on screen */ .live { position: absolute; top: 20px; right: clamp(16px, 3vw, 40px); display: grid; justify-items: end; gap: 3px; white-space: nowrap; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; color: rgba(236,231,222,.6); opacity: .85; text-shadow: 0 1px 6px rgba(0,0,0,.8); } .lv-tag { order: 0; display: flex; align-items: center; gap: 6px; padding: 0; background: none; color: #f4ead8; font-weight: 700; letter-spacing: 0; box-shadow: none; text-transform: uppercase; } .lv-tag i { width: 7px; height: 7px; border-radius: 50%; background: #e0261b; box-shadow: 0 0 0 0 rgba(224,38,27,.7); animation: lv-pulse 1.6s ease-out infinite; } @keyframes lv-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,38,27,.7); } 70%, 100% { box-shadow: 0 0 0 6px rgba(224,38,27,0); } } .lv-ar { display: none; } .lv-city { grid-row: 2; text-transform: uppercase; } .lv-city::after { content: ' ·'; } .lv-clock { grid-row: 2; grid-column: 2; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; color: #f4ead8; } .live { grid-template-columns: auto auto; column-gap: 6px; } .lv-tag { grid-column: 1 / -1; justify-self: end; } .timecode { display: none; position: absolute; top: 22px; right: clamp(16px, 3vw, 40px); color: var(--muted); font-size: 11px; } .osd { position: absolute; top: 56px; right: clamp(16px, 3vw, 40px); font-family: var(--f-mono); font-weight: 700; color: #7CFF6B; font-size: 42px; text-shadow: 0 0 12px rgba(124,255,107,.6); opacity: 0; } .scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; opacity: .18; } .tracking { position: absolute; left: 0; right: 0; height: 9vh; height: 9dvh; top: -20vh; top: -20dvh; background: linear-gradient(180deg, transparent, rgba(255,255,255,.03), rgba(255,255,255,.01), transparent); backdrop-filter: blur(.6px) saturate(1.2); } @keyframes blink { 50% { opacity: 0; } } body.in-screening #signal .live, body.in-screening #signal .ident { opacity: 0; transition: opacity .6s; } /* the clock belongs to the channels' main pages: an inner page (its address has a slash: a series, a video, a book, a programme) has its own controls in that corner */ body.is-inner #signal .live { display: none; } /* in a film the exit button holds the top-right corner alone: no running timecode */ body.in-screening #signal .timecode { display: none; } /* ───────────────────────── REMOTE ───────────────────────── */ #remote { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); z-index: 60; display: flex; align-items: stretch; gap: 2px; padding: 6px; background: linear-gradient(180deg, #1d1b18, #0f0e0c); border: 1px solid #2c2a26; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .8s var(--ease-cut); } body.is-on #remote { transform: translate(-50%, 0); } body.in-screening #remote { transform: translate(-50%, 160%); } /* CH 1, 2, 3, 4, 6 and 7 need the whole screen: the remote hides below the edge, a handle shows, and it slides up when the mouse comes near the bottom (or a key focuses it) */ @media (hover: hover) and (min-width: 761px) { body.is-on:is([data-ch="1"], [data-ch="2"], [data-ch="3"], [data-ch="4"], [data-ch="6"], [data-ch="7"], [data-ch="8"]):not(.in-screening) #remote { transform: translate(-50%, calc(100% + 40px)); } body.is-on:is([data-ch="1"], [data-ch="2"], [data-ch="3"], [data-ch="4"], [data-ch="6"], [data-ch="7"], [data-ch="8"]):not(.in-screening) #remote:hover, body.is-on:is([data-ch="1"], [data-ch="2"], [data-ch="3"], [data-ch="4"], [data-ch="6"], [data-ch="7"], [data-ch="8"]):not(.in-screening) #remote:focus-within { transform: translate(-50%, 0); transition-duration: .45s; } body:is([data-ch="1"], [data-ch="2"], [data-ch="3"], [data-ch="4"], [data-ch="6"], [data-ch="7"], [data-ch="8"]):not(.in-screening) #remote::before { content: ""; position: absolute; z-index: -1; left: -40px; right: -40px; top: -68px; bottom: -40px; } /* reaches below too: fully up, the remote stops short of the window's edge, and a mouse down there would make it fall and rise for ever */ body:is([data-ch="1"], [data-ch="2"], [data-ch="3"], [data-ch="4"], [data-ch="6"], [data-ch="7"], [data-ch="8"]):not(.in-screening) #remote::after { content: '▲ Chaînes'; position: absolute; left: 50%; top: -64px; transform: translateX(-50%); padding: 8px 18px 7px; border-radius: 0; background: #050505; border: 1px solid rgba(255,255,255,.14); border-bottom: 0; font-family: var(--f-mono); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: #cfc8ba; white-space: nowrap; transition: opacity .3s; pointer-events: none; } body:is([data-ch="1"], [data-ch="2"], [data-ch="3"], [data-ch="4"], [data-ch="6"], [data-ch="7"], [data-ch="8"]) #remote:hover::after, body:is([data-ch="1"], [data-ch="2"], [data-ch="3"], [data-ch="4"], [data-ch="6"], [data-ch="7"], [data-ch="8"]) #remote:focus-within::after { opacity: 0; } } .rc-btn { display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 64px; padding: 7px 8px 6px; border-radius: 9px; background: #171512; box-shadow: inset 0 -2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); transition: background .2s, transform .1s; } .rc-btn:hover, .rc-btn:focus-visible { background: #24211c; outline: none; } .rc-btn:active { transform: translateY(1px); } .rc-btn.active { background: #2a2620; box-shadow: inset 0 0 0 1px var(--accent); } .rc-n { font-family: var(--f-mono); font-weight: 700; font-size: 14px; color: var(--accent); } .rc-l { font-family: var(--f-mono); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .rc-ar { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 10px; color: rgba(236,231,222,.35); line-height: 1; } /* L · the man himself: not a channel but the red REC key, a sticker taped onto the remote */ .rc-bio { --rec: #E8352B; position: relative; min-width: 92px; margin: -14px 2px -4px 6px; padding: 9px 10px 7px; gap: 0; justify-items: start; align-content: end; border-radius: 4px; transform: rotate(-4deg); background: var(--rec); background-image: radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.3px), linear-gradient(160deg, #FF5340, #C81F17); background-size: 4px 4px, 100% 100%; box-shadow: 3px 3px 0 #0a0908, 0 10px 24px rgba(232,53,43,.35), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .25s var(--ease-cut), box-shadow .25s, background-color .2s; } .rc-bio:hover, .rc-bio:focus-visible { background-color: var(--rec); transform: rotate(0deg) translateY(-3px) scale(1.04); box-shadow: 5px 5px 0 #0a0908, 0 14px 34px rgba(232,53,43,.55), inset 0 1px 0 rgba(255,255,255,.3); } .rc-bio:active { transform: rotate(0deg) translateY(0) scale(.98); box-shadow: 1px 1px 0 #0a0908; } .rc-tape { position: absolute; top: -7px; left: 50%; width: 38px; height: 13px; transform: translateX(-50%) rotate(3deg); background: rgba(236,231,222,.55); box-shadow: 0 1px 2px rgba(0,0,0,.3); mix-blend-mode: screen; } .rc-rec { display: flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 8px; font-weight: 700; letter-spacing: .03em; color: #0a0908; } .rc-rec i { width: 6px; height: 6px; border-radius: 50%; background: #0a0908; box-shadow: 0 0 0 1.5px rgba(255,255,255,.45); animation: rec-blink 1.1s steps(1) infinite; } @keyframes rec-blink { 50% { background: #FFE9D6; box-shadow: 0 0 6px #FFE9D6; } } .rc-bio-name { position: relative; font-family: var(--f-display); font-weight: 900; font-size: 27px; line-height: .82; letter-spacing: -.01em; color: #0a0908; margin-top: 2px; } .rc-bio-name::before, .rc-bio-name::after { content: attr(data-t); position: absolute; inset: 0; opacity: 0; pointer-events: none; } .rc-bio-name::before { color: #3FE0C5; } .rc-bio-name::after { color: #F2D43A; } .rc-bio:hover .rc-bio-name::before { opacity: .9; animation: rc-glitch .32s steps(2) infinite; mix-blend-mode: multiply; } .rc-bio:hover .rc-bio-name::after { opacity: .9; animation: rc-glitch .32s steps(2) infinite reverse; mix-blend-mode: multiply; } @keyframes rc-glitch { 0% { transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); } 50% { transform: translate(2px, 1px); clip-path: inset(45% 0 0 0); } 100% { transform: translate(-1px, -1px); clip-path: inset(20% 0 30% 0); } } .rc-bio-ar { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 700; font-size: 12px; line-height: 1.1; color: #FFE9D6; align-self: end; justify-self: end; margin-top: 1px; } .rc-key { position: absolute; left: 10px; bottom: 6px; font-family: var(--f-mono); font-size: 8px; font-weight: 700; color: rgba(10,9,8,.6); border: 1px solid rgba(10,9,8,.45); border-radius: 2px; padding: 0 3px; line-height: 11px; } @media (prefers-reduced-motion: reduce) { .rc-rec i, .rc-bio:hover .rc-bio-name::before, .rc-bio:hover .rc-bio-name::after { animation: none; } } .rc-sep { width: 1px; background: #2c2a26; margin: 4px 4px; } /* the sound key: a drawn speaker; its waves when the sound is on, a red cross when it is off */ .rc-spk { display: grid; place-items: center; } .rc-spk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rc-spk .spk { fill: currentColor; stroke: none; } .rc-spk .x { display: none; stroke: #E8352B; stroke-width: 2; } .rc-vol.muted .rc-spk .wv { display: none; } .rc-vol.muted .rc-spk .x { display: inline; } .rc-vol.muted .rc-spk { color: #8a8580; } /* ───────────────────────── TRANSITION ───────────────────────── */ #transition { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: none; background: #000; } #transition canvas { width: 100%; height: 100%; image-rendering: pixelated; } .crt-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 0 20px 4px rgba(255,255,255,.7); opacity: 0; } /* ───────────────────────── CINÉMA ───────────────────────── */ #cinema { background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--room-tint, #C9702A) 22%, transparent), transparent 60%), #0b0a09; transition: background 1s; overflow: hidden; } .beam { position: absolute; left: 50%; top: -10vh; top: -10dvh; width: 120vw; height: 90vh; height: 90dvh; transform: translateX(-50%); background: conic-gradient(from 180deg at 50% 0%, transparent 168deg, rgba(255,240,210,.07) 176deg, rgba(255,240,210,.11) 180deg, rgba(255,240,210,.07) 184deg, transparent 192deg); filter: blur(6px); opacity: calc(.6 + var(--breath) * .2); pointer-events: none; } .room-head { position: absolute; top: 70px; left: calc(clamp(40px, 7vw, 130px) + clamp(12px, 2vw, 32px)); z-index: 6; } /* in front of the curtain, and clear of it */ .room-kicker { color: var(--accent); } .room-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(56px, 9vw, 130px); line-height: .85; } .room-sub { font-style: italic; font-size: 20px; color: var(--muted); } /* the theatre around the screen: velvet curtains at the edges, a row of seats at the bottom. Image slots (assets/cinema-curtain-*.png, assets/cinema-seats.webp) over a drawn fallback */ .curtain { position: absolute; top: 0; bottom: 0; width: clamp(40px, 7vw, 130px); z-index: 5; pointer-events: none; } /* in front of the reel: the film runs behind the curtains */ .curtain.l { left: 0; background: url('../assets/cinema-curtain-left.webp') right top / cover no-repeat, repeating-linear-gradient(90deg, #3a0807 0 14px, #6e1410 18px, #8c1c16 22px, #4a0b09 30px), #3a0807; box-shadow: inset -30px 0 40px rgba(0,0,0,.7); -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent); } .curtain.r { right: 0; background: url('../assets/cinema-curtain-right.webp') left top / cover no-repeat, repeating-linear-gradient(90deg, #4a0b09 0 8px, #8c1c16 16px, #6e1410 20px, #3a0807 30px), #3a0807; box-shadow: inset 30px 0 40px rgba(0,0,0,.7); -webkit-mask: linear-gradient(270deg, #000 70%, transparent); mask: linear-gradient(270deg, #000 70%, transparent); } .seats { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 14vh, 150px); height: clamp(70px, 14dvh, 150px); z-index: 6; pointer-events: none; transition: filter .6s; background: url('../assets/cinema-seats.webp') center bottom / auto 100% repeat-x, radial-gradient(ellipse 46px 40px at 50% 100%, #050505 96%, transparent) 0 100% / 104px 64px repeat-x, linear-gradient(transparent, #000 70%); } /* La Salle: the screen is the room. Its name lit above it, the film's title cut across its lower edge like a poster, tonight's programme as a row of small frames beneath */ .salle { position: absolute; inset: 0; z-index: 6; display: grid; justify-items: center; align-content: start; row-gap: clamp(10px, 2vh, 20px); row-gap: clamp(10px, 2dvh, 20px); padding: clamp(54px, 9vh, 84px) calc(clamp(40px, 7vw, 130px) + 16px) 0; padding: clamp(54px, 9dvh, 84px) calc(clamp(40px, 7vw, 130px) + 16px) 0; } #cinema .room-head { position: static; display: flex; align-items: center; gap: 14px; width: min(var(--scr-w), 100%); } #cinema .room-head i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,184,114,.45)); } #cinema .room-head i:last-child { background: linear-gradient(270deg, transparent, rgba(233,184,114,.45)); } #cinema .room-title { font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .03em; line-height: 1; padding-left: .32em; color: #f6e7c8; text-shadow: 0 0 18px rgba(255,214,150,.45), 0 0 2px rgba(255,236,200,.8); } .rh-ar { font-family: var(--f-ar-display); font-size: clamp(18px, 1.9vw, 26px); line-height: 1; color: var(--sodium); text-shadow: 0 0 14px rgba(201,112,42,.6); } .salle { --scr-w: min(72vw, calc((100vh - 290px) * 2.39), 1180px); --scr-w: min(72vw, calc((100dvh - 290px) * 2.39), 1180px); } .salle-frame { position: relative; width: var(--scr-w); display: grid; } .salle-screen { position: relative; display: block; width: 100%; aspect-ratio: 2.39; overflow: hidden; background: #050505; box-shadow: 0 0 0 1px rgba(255,240,210,.1), 0 0 140px rgba(255,236,200,.1), 0 50px 90px rgba(0,0,0,.75); } .scr-img { position: absolute; inset: 0; background: #000 center 30% / cover no-repeat; filter: grayscale(.8) contrast(1.08) brightness(.82); transition: filter .6s, transform 8s linear; } .salle-screen:hover .scr-img, .salle-screen:focus-visible .scr-img { filter: grayscale(0) brightness(.95); transform: scale(1.04); } .salle-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.45)), linear-gradient(transparent 62%, rgba(0,0,0,.6)); } .salle-screen:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; } /* the slate: a small clapperboard, striped stick open over chalk cells */ .scr-slate { position: absolute; top: 12px; left: 14px; z-index: 1; display: grid; gap: 2px; font-family: var(--f-mono); } .cl-stick { display: block; height: 7px; transform-origin: 0 100%; transform: rotate(-7deg); background: repeating-linear-gradient(-55deg, #f4ead8 0 6px, #0b0a09 6px 12px); box-shadow: 0 1px 0 rgba(0,0,0,.6); transition: transform .3s; } .salle-screen:hover .cl-stick { transform: rotate(0); } .cl-board { display: flex; background: rgba(11,10,9,.82); border: 1px solid rgba(244,234,216,.55); backdrop-filter: blur(2px); } .cl-cell { display: grid; gap: 1px; padding: 4px 10px 5px; } .cl-cell + .cl-cell { border-left: 1px solid rgba(244,234,216,.3); } .cl-cell em { font-style: normal; font-size: 7px; letter-spacing: .03em; text-transform: uppercase; color: rgba(244,234,216,.5); } .cl-cell b { font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1; letter-spacing: .02em; color: #f4ead8; } .cl-cell small { font-family: var(--f-mono); font-weight: 400; font-size: 9px; color: rgba(244,234,216,.5); margin-left: 2px; } .scr-play { position: absolute; left: 50%; top: 45%; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; transform: translate(-50%, -50%) scale(.9); border: 1px solid rgba(244,234,216,.75); background: rgba(0,0,0,.35); color: #f4ead8; opacity: 0; transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1); } .scr-play svg { width: 18px; height: 18px; margin-left: 3px; fill: currentColor; } .salle-screen:hover .scr-play, .salle-screen:focus-visible .scr-play { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* thin chevrons in the dark between the screen and the curtains */ /* the chevrons: the neighbour's number, a thin arrow, and on hover its title running down like the spine of a film can */ /* the title card: the film's name cuts across the bottom edge of the screen */ .salle-info { --t: clamp(34px, 4.6vw, 76px); position: relative; z-index: 2; display: grid; gap: 8px; margin-top: calc(var(--t) * -.52); padding: 0 clamp(14px, 2vw, 26px); } .si-title { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .35em; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--t); line-height: .86; color: #f4ead8; text-shadow: 0 4px 30px rgba(0,0,0,.6); } .si-title span { font-family: var(--f-ar-display); font-weight: 400; text-transform: none; font-size: .46em; color: var(--sodium); } .si-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .si-log { font-family: var(--f-serif); font-style: italic; font-size: clamp(15px, 1.35vw, 19px); color: rgba(244,234,216,.72); } .si-go { flex: none; padding: 10px 16px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #0b0a09; background: #f4ead8; transition: background .2s, transform .2s; } .si-go::after { content: '→'; margin-left: 10px; } .si-go:hover, .si-go:focus-visible { background: var(--accent); outline: none; transform: translateX(2px); } .si-go:disabled { opacity: .45; cursor: default; transform: none; background: #f4ead8; } .si-go:disabled::after { content: none; } /* tonight: eight small frames, the one on the screen lit */ .salle-prog-wrap { display: flex; align-items: center; gap: 16px; } /* « Ce soir »: a ticket stub, notched at both ends */ .sp-head { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .sp-tag { padding: 5px 12px 4px; font-family: var(--f-display); font-weight: 800; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: #0b0a09; background: #f4ead8; -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; } .sp-ar { font-family: var(--f-ar-display); font-size: 15px; line-height: 1; color: var(--sodium); } /* the hint: two keycaps or the wheel */ .sp-hint { display: flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: rgba(236,231,222,.45); white-space: nowrap; } .sp-hint kbd { display: grid; place-items: center; width: 18px; height: 18px; font: 10px/1 var(--f-mono); color: #f4ead8; border: 1px solid rgba(236,231,222,.3); border-bottom-width: 2px; background: rgba(255,255,255,.03); } .sp-or { margin: 0 3px; text-transform: none; letter-spacing: .03em; font-style: italic; font-family: var(--f-serif); font-size: 12px; } .sp-mouse { width: 12px; height: 18px; margin-right: 5px; fill: none; stroke: rgba(236,231,222,.55); stroke-width: 1.4; } .sp-wheel { stroke: #f4ead8; stroke-linecap: round; animation: sp-roll 1.8s ease-in-out infinite; } @keyframes sp-roll { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(4px); opacity: 0; } 61% { transform: translateY(-1px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sp-wheel, .lv-tag i { animation: none; } } .salle-prog { list-style: none; display: flex; gap: 6px; } .salle-prog button { position: relative; display: block; width: clamp(46px, 5.2vw, 76px); aspect-ratio: 16 / 9; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; outline: 1px solid rgba(236,231,222,.14); transition: transform .25s, outline-color .25s; } .salle-prog button:hover, .salle-prog button:focus-visible { opacity: 1; transform: translateY(-2px); } .salle-prog button.on { opacity: 1; outline: 1px solid var(--accent); outline-offset: 2px; } @media (max-width: 760px) { .salle { --scr-w: calc(100vw - 32px); padding: 64px 16px 0; } .sp-hint { display: none; } .salle-prog-wrap { flex-direction: column; gap: 8px; } .salle-prog { display: grid; grid-template-columns: repeat(4, 1fr); width: var(--scr-w); gap: 8px; } .salle-prog button { width: 100%; } .si-row { flex-direction: column; align-items: flex-start; } .salle { align-content: center; padding-bottom: 150px; } .salle-screen { aspect-ratio: 4 / 3; } } /* the entrance (js/channels.js · enterFilm) */ .enter-dark { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; } .zoom-shot { position: fixed; z-index: 8; background: #000 center 30% / cover no-repeat; pointer-events: none; box-shadow: 0 0 0 1px rgba(233,184,114,.4), 0 0 120px rgba(0,0,0,.8); } .enter-title { position: fixed; z-index: 9; pointer-events: none; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .35em; transform-origin: 30% 60%; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .86; color: #f4ead8; text-shadow: 0 4px 30px rgba(0,0,0,.6); } .enter-title span { font-family: var(--f-ar-display); font-weight: 400; text-transform: none; font-size: .46em; color: var(--sodium); } /* the countdown cut out of the film: black with a white numeral, multiplied over the still, so the picture shows only through the number */ .enter-count { --fade: 0; position: fixed; inset: 0; z-index: 48; pointer-events: none; opacity: 0; isolation: isolate; overflow: hidden; background: #000; } .enter-count::after { content: ''; position: absolute; inset: 0; z-index: 3; background: #000; opacity: var(--fade); } .ec-pic { position: absolute; inset: 0; background: #000 center 30% / cover no-repeat; } .ec-mask { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #000; mix-blend-mode: multiply; } .ec-n { display: block; font-family: var(--f-display); font-weight: 900; font-size: min(92vh, 70vw); font-size: min(92dvh, 70vw); line-height: .8; color: #fff; will-change: transform; } .ec-n.ar { font-family: var(--f-ar-display); font-weight: 400; font-size: min(80vh, 62vw); font-size: min(80dvh, 62vw); line-height: 1; } #cinema.entering .seats { filter: brightness(.35); } #cinema.entering .salle-screen { visibility: hidden; } /* ───────────────────────── NO SIGNAL ───────────────────────── */ .mire { position: absolute; inset: 0; opacity: .22; background: linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.56%, #00c0c0 0 42.84%, #00c000 0 57.12%, #c000c0 0 71.4%, #c00000 0 85.68%, #0000c0 0); filter: saturate(.6); } .mire::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.25) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.25) 22px 23px); } .nosignal-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); width: min(620px, calc(100vw - 32px)); background: rgba(11,10,9,.92); border: 1px solid var(--line); padding: 28px 28px 22px; } .nosignal-ch { color: var(--accent); } .nosignal-title { font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 8vw, 92px); text-transform: uppercase; line-height: .9; margin: 6px 0 10px; } .nosignal-desc { font-size: 20px; line-height: 1.3; color: var(--blanc); } .nosignal-quote { margin: 18px 0 16px; padding-left: 14px; border-left: 2px solid var(--accent); font-style: italic; font-size: 22px; color: var(--muted); } .nosignal-quote cite { display: block; font-family: var(--f-mono); font-style: normal; font-size: 10px; letter-spacing: .03em; margin-top: 6px; } .nosignal-foot { color: var(--muted); } /* ───────────────────────── OPENING ───────────────────────── */ #opening { position: fixed; inset: 0; z-index: 8000; background: #000; } /* the gate: a pirate channel on standby at night — a ghost test card, a flickering wordmark, a red power key */ .power { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(14px, 2.4vh, 26px); gap: clamp(14px, 2.4dvh, 26px); padding: 16px; text-align: center; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #15100c 0%, #000 70%); } .pw-mire { position: absolute; inset: -4%; z-index: 0; pointer-events: none; opacity: .13; filter: saturate(.7) blur(.4px); animation: pw-breathe 6s ease-in-out infinite; } .pw-bars { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px), linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%, #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0) top / 100% 67% no-repeat, linear-gradient(90deg, #0000c0 0 14.28%, #131313 0 28.57%, #c000c0 0 42.85%, #131313 0 57.14%, #00c0c0 0 71.42%, #131313 0 85.71%, #c0c0c0 0) 0 67% / 100% 8% no-repeat, linear-gradient(90deg, #00214c 0 18%, #fff 0 36%, #32006a 0 54%, #131313 0 100%) bottom / 100% 25% no-repeat; } .pw-ring { position: absolute; left: 50%; top: 46%; width: min(70vh, 62vw); width: min(70dvh, 62vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #fff; box-shadow: inset 0 0 0 40px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.4); background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat; } @keyframes pw-breathe { 50% { opacity: .08; } } .power > *:not(.pw-mire) { position: relative; z-index: 1; } .pw-air { display: flex; align-items: center; gap: 10px; width: min(760px, 92vw); font-size: 10px; letter-spacing: .03em; color: rgba(236,231,222,.55); } .pw-air i { flex: 1; height: 1px; background: rgba(236,231,222,.2); } .pw-air span[lang] { font-family: var(--f-ar-display); letter-spacing: 0; font-size: 13px; } .standby { width: 9px; height: 9px; border-radius: 50%; background: #e0261b; box-shadow: 0 0 14px 3px rgba(224,38,27,.6); animation: blink 2.4s steps(2) infinite; flex: none; } .pw-clock { color: var(--sodium); } /* the wordmark switches on like a tube: flicker, colour fringes, the Arabic glowing behind it */ .pw-mark { position: relative; display: grid; place-items: center; margin: clamp(4px, 1vh, 12px) 0; margin: clamp(4px, 1dvh, 12px) 0; line-height: .8; } .pw-word { position: relative; font-family: var(--f-display); font-weight: 900; font-size: clamp(96px, min(21vw, 30vh), 300px); font-size: clamp(96px, min(21vw, 30dvh), 300px); letter-spacing: -.01em; color: #f4ead8; text-shadow: -3px 0 rgba(255,40,60,.75), 3px 0 rgba(40,220,255,.6), 0 0 40px rgba(244,234,216,.25); animation: pw-on 2.6s steps(1) 1 both, pw-jitter 7s steps(1) 2.6s infinite; } .pw-ar { position: absolute; z-index: -1; font-family: var(--f-ar-display); font-size: clamp(120px, min(26vw, 36vh), 380px); font-size: clamp(120px, min(26vw, 36dvh), 380px); line-height: 1; color: var(--sodium); opacity: .32; filter: blur(.5px); transform: translateY(6%) rotate(-4deg); text-shadow: 0 0 60px rgba(201,112,42,.6); } .pw-tv { position: absolute; right: -2.6em; top: .4em; padding: 5px 8px; font-size: clamp(12px, 1.4vw, 18px); letter-spacing: .03em; color: #000; background: #e0261b; transform: rotate(-6deg); box-shadow: 3px 3px 0 #000; } @keyframes pw-on { 0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: .1; } 14% { opacity: .9; } 18% { opacity: .2; } 24% { opacity: 1; } 100% { opacity: 1; } } @keyframes pw-jitter { 0%, 92%, 100% { transform: none; } 93% { transform: translateX(-4px) skewX(-4deg); } 95% { transform: translateX(3px); } 97% { transform: none; opacity: .7; } } .pw-line { font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 2vw, 26px); color: rgba(244,234,216,.85); max-width: 36ch; } /* the two controls, in the collage language of the site: a red REC-style sticker taped on, a strip of masking tape */ .power-choices { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 10px; } .power-btn { position: relative; display: inline-flex; align-items: center; border: 0; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .2s; } .pw-on { gap: 16px; padding: 14px 26px 14px 14px; transform: rotate(-2.5deg); color: #0b0a09; background: radial-gradient(rgba(0,0,0,.18) .9px, transparent 1.2px) 0 0 / 4px 4px, linear-gradient(160deg, #ff5340, #c81f17); box-shadow: 6px 6px 0 #000, 0 18px 40px rgba(232,53,43,.35), inset 0 1px 0 rgba(255,255,255,.3); } .pw-tape { position: absolute; top: -12px; left: 50%; width: 74px; height: 22px; transform: translateX(-50%) rotate(4deg); background: rgba(236,231,222,.6); box-shadow: 0 1px 2px rgba(0,0,0,.35); mix-blend-mode: screen; } .pw-key { display: grid; place-items: center; width: 54px; height: 54px; background: #0b0a09; } .pw-key svg { width: 26px; height: 26px; } .pw-key path { fill: none; stroke: #ff5340; stroke-width: 2.6; stroke-linecap: round; } .pw-label { display: grid; text-align: left; line-height: .9; gap: 6px; } .pw-label b { font-family: var(--f-display); font-weight: 900; font-size: 44px; letter-spacing: -.005em; text-transform: uppercase; } .pw-label .mono { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #fff2ea; } .pw-label .mono i { width: 8px; height: 8px; border-radius: 50%; background: #0b0a09; box-shadow: 0 0 0 2px rgba(255,255,255,.5); animation: blink 1.1s steps(2) infinite; } .pw-on:hover, .pw-on:focus-visible { transform: rotate(0) translateY(-4px) scale(1.03); outline: none; box-shadow: 9px 9px 0 #000, 0 24px 60px rgba(232,53,43,.55), inset 0 1px 0 rgba(255,255,255,.3); } .pw-on:hover .pw-key path, .pw-on:focus-visible .pw-key path { animation: pw-blink .5s steps(2) infinite; } @keyframes pw-blink { 50% { stroke: #f4ead8; } } .pw-on:active { transform: rotate(0) translateY(2px); box-shadow: 2px 2px 0 #000; } .pw-mute { gap: 10px; padding: 14px 26px; transform: rotate(2deg); color: #2a2520; background: linear-gradient(rgba(0,0,0,.04), rgba(0,0,0,.08)), #e6dcc8; clip-path: polygon(2% 0, 6% 6%, 10% 0, 90% 0, 94% 7%, 98% 0, 100% 50%, 98% 100%, 93% 93%, 89% 100%, 11% 100%, 7% 92%, 2% 100%, 0 50%); } .pw-mute svg { width: 18px; height: 18px; } .pw-mute .spk { fill: #2a2520; } .pw-mute path:not(.spk) { fill: none; stroke: #c81f17; stroke-width: 2.4; stroke-linecap: round; } .pw-mute .mono { font-family: 'Courier New', var(--f-mono); font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .pw-mute:hover, .pw-mute:focus-visible { transform: rotate(0) translateY(-3px); filter: brightness(1.06); outline: none; } .pw-mute:active { transform: rotate(0) translateY(1px); } .power-btn.is-waiting { opacity: .7; cursor: progress; } .power-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: rgba(236,231,222,.5); font-size: 10px; letter-spacing: .03em; margin-top: 8px; } .power-note span + span::before { content: '·'; margin-right: 18px; color: var(--sodium); } .pw-cr { position: absolute !important; bottom: clamp(20px, 3.6vh, 36px); bottom: clamp(20px, 3.6dvh, 36px); display: grid; gap: 2px; margin: 0; } .pw-cr-l { left: clamp(24px, 3.6vw, 56px); justify-items: start; text-align: left; } .pw-cr-r { right: clamp(24px, 3.6vw, 56px); justify-items: end; text-align: right; } .pw-cr span { font: italic 12px/1.2 var(--f-serif); color: rgba(244,234,216,.55); } .pw-cr b { font: 800 16px/1.1 var(--f-display); text-transform: uppercase; color: rgba(244,234,216,.82); } /* the name is the way to his site: a small arrow says so */ .pw-cr a { display: inline-flex; align-items: baseline; gap: 4px; padding: 10px 0 10px 10px; margin: -10px 0 -10px -10px; color: inherit; text-decoration: none; } .pw-cr a i { font: 700 13px/1 var(--f-display); font-style: normal; color: #e0261b; transition: transform .15s; } .pw-cr a:hover b, .pw-cr a:focus-visible b { color: #ff5340; } .pw-cr a:hover i, .pw-cr a:focus-visible i { transform: translate(2px, -2px); } .pw-cr a:focus-visible { outline: 1px solid #ff5340; outline-offset: 3px; } .pw-air.mono { font: 600 clamp(14px, 1.15vw, 17px)/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .power-note.mono { font: italic clamp(14px, 1.1vw, 16px)/1.3 var(--f-serif); letter-spacing: 0; text-transform: none; color: rgba(244,234,216,.62); } /* what a set says when the fault is on the air */ .pw-tune { position: absolute !important; left: 50%; bottom: clamp(24px, 4.2vh, 42px); bottom: clamp(24px, 4.2dvh, 42px); width: max-content; max-width: 38vw; margin: 0; transform: translateX(-50%); font: italic 14px/1.25 var(--f-serif); color: rgba(244,234,216,.55); } /* the test card's registration marks, at the corners and the middle of each edge of the picture */ .pw-reg { position: absolute !important; inset: clamp(10px, 1.8vh, 16px); inset: clamp(10px, 1.8dvh, 16px); z-index: 0 !important; pointer-events: none; --m: rgba(244,234,216,.38); background: linear-gradient(var(--m), var(--m)) 0 0 / 26px 1px, linear-gradient(var(--m), var(--m)) 0 0 / 1px 26px, linear-gradient(var(--m), var(--m)) 100% 0 / 26px 1px, linear-gradient(var(--m), var(--m)) 100% 0 / 1px 26px, linear-gradient(var(--m), var(--m)) 0 100% / 26px 1px, linear-gradient(var(--m), var(--m)) 0 100% / 1px 26px, linear-gradient(var(--m), var(--m)) 100% 100% / 26px 1px, linear-gradient(var(--m), var(--m)) 100% 100% / 1px 26px, linear-gradient(var(--m), var(--m)) 50% 0 / 1px 14px, linear-gradient(var(--m), var(--m)) 50% 100% / 1px 14px, linear-gradient(var(--m), var(--m)) 0 50% / 14px 1px, linear-gradient(var(--m), var(--m)) 100% 50% / 14px 1px; background-repeat: no-repeat; } @media (max-width: 760px) { .pw-tune { position: relative !important; left: auto; bottom: auto; max-width: 30ch; transform: none; text-align: center; font-size: 13px; } .pw-cr { bottom: 20px; } .pw-cr-l { left: 22px; } .pw-cr-r { right: 22px; } .pw-cr span { font-size: 11px; } .pw-cr b { font-size: 15px; } } @media (max-width: 760px) and (max-height: 760px) { .pw-tune { display: none; } .power { padding-bottom: 74px; } } @media (max-width: 600px) { .pw-tv { right: -.6em; top: -1.2em; } .pw-label b { font-size: 32px; } } @media (prefers-reduced-motion: reduce) { .pw-word, .pw-mire, .pw-label .mono i { animation: none; } } .seq { position: absolute; inset: 0; display: none; } .seq > * { position: absolute; opacity: 0; } .pixel { left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; background: #fff; box-shadow: 0 0 12px 2px #fff; } .mire-open { inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 22vmin, rgba(255,255,255,.8) 22vmin calc(22vmin + 2px), transparent calc(22vmin + 2px)), linear-gradient(90deg, #D4D4D4 0 12.5%, #C6CAD6 0 25%, #B9B9B9 0 37.5%, #B87B86 0 50%, #A0835C 0 62.5%, #7F0001 0 75%, #A1855F 0 87.5%, #94A899 0); } .mire-open::before { content: 'MIRE 77 · 8 FILMS · 8 COULEURS'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000; color: #fff; font-family: var(--f-mono); font-size: 12px; letter-spacing: .03em; padding: 8px 14px; white-space: nowrap; } .mire-open::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(90deg, #000 0 20%, #fff 0 40%, #000 0 60%, #fff 0 80%, #000 0); } .visa { left: 50%; top: 50%; width: min(620px, calc(100vw - 24px)); transform: translate(-50%, -50%); padding: 26px 34px 24px 54px; text-align: left; color: #221c15; font-family: var(--f-serif); /* an office form: two punched holes, a fold across the middle */ background: radial-gradient(circle 8px at 22px 22%, #000 97%, transparent), radial-gradient(circle 8px at 22px 78%, #000 97%, transparent), linear-gradient(180deg, transparent calc(50% - 1px), rgba(60,40,20,.2) calc(50% - 1px) 50%, rgba(255,255,255,.4) 50% calc(50% + 1px), transparent calc(50% + 1px)), #e7ddc7; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .vz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 8px; border-bottom: 3px double #221c15; } .vz-head p { margin: 0; font-size: 13px; line-height: 1.2; font-variant: small-caps; font-weight: 600; } .vz-head p[lang] { font: 600 17px/1.2 var(--f-ar-text, 'IBM Plex Sans Arabic'), sans-serif; font-variant: normal; } .visa-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 16px; margin: 12px 0 10px; font: 600 clamp(23px, 4vw, 31px)/1.1 var(--f-serif); } .visa-title span { font: 600 clamp(18px, 3.2vw, 24px)/1.2 var(--f-ar-text, 'IBM Plex Sans Arabic'), sans-serif; } .vz-form { display: grid; gap: 7px; margin: 0; } .vz-form > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 8px; } .vz-form dt { font-size: 14px; font-variant: small-caps; color: #5b4c3a; } .vz-form dd { margin: 0; padding: 0 0 1px 4px; border-bottom: 1px dotted rgba(34,28,21,.6); font: 700 18px/1.25 var(--f-mono); letter-spacing: .01em; } /* a typewriter never sits quite straight, and its observations come off the red half of the ribbon */ .vz-form > div:nth-child(1) dd { transform: translateY(-1px); } .vz-form > div:nth-child(2) dd { transform: translate(2px, 1px); } .vz-form > div:nth-child(3) dd { transform: translate(-1px, 0); opacity: .86; } .vz-obs { margin-top: 3px; } .vz-obs dd { color: #a51d16; font-size: 19px; transform: translateX(1px); } .visa-small { max-width: 74%; margin: 12px 0 0; font: 500 21px/1.08 var(--f-hand); color: #1f3a86; transform: rotate(-1.3deg); transform-origin: 0 50%; } .visa-stamp { position: absolute; right: 16px; bottom: 8px; width: 138px; height: 138px; color: #2c2a8c; opacity: 0; mix-blend-mode: multiply; } .visa-stamp svg { display: block; width: 100%; height: 100%; } .visa-stamp text { fill: currentColor; font-family: var(--f-mono); } .visa-stamp .vz-st-b { font: 900 42px/1 var(--f-display); } .visa-stamp .vz-st-a { font: 700 25px/1 var(--f-ar-display); } @media (min-width: 900px) and (min-height: 620px) { .visa { width: min(860px, 60vw); padding: 34px 48px 32px 76px; background: radial-gradient(circle 11px at 30px 22%, #000 97%, transparent), radial-gradient(circle 11px at 30px 78%, #000 97%, transparent), linear-gradient(180deg, transparent calc(50% - 1px), rgba(60,40,20,.2) calc(50% - 1px) 50%, rgba(255,255,255,.4) 50% calc(50% + 1px), transparent calc(50% + 1px)), #e7ddc7; } .vz-head p { font-size: 17px; } .vz-head p[lang] { font-size: 23px; } .visa-title { margin: 16px 0 14px; font-size: 44px; } .visa-title span { font-size: 34px; } .vz-form { gap: 10px; } .vz-form > div { grid-template-columns: 136px minmax(0, 1fr); } .vz-form dt { font-size: 19px; } .vz-form dd { font-size: 25px; } .vz-obs dd { font-size: 27px; } .visa-small { max-width: 70%; margin-top: 18px; font-size: 29px; } .visa-stamp { width: 190px; height: 190px; right: 22px; bottom: 12px; } } @media (max-width: 600px) { .visa { padding: 18px 16px 16px 40px; background-position: 0 0; } .vz-head p { font-size: 12px; } .vz-head p[lang] { font-size: 15px; } .vz-form > div { grid-template-columns: 84px minmax(0, 1fr); } .vz-form dd { font-size: 15px; } .vz-obs dd { font-size: 14px; } .visa-small { max-width: 60%; font-size: 18px; } .visa-stamp { width: 104px; height: 104px; right: 8px; bottom: 4px; } } .leader { inset: 0; display: grid; place-content: center; background: #8d8a83; } .leader::before, .leader::after { content: ''; position: absolute; background: #1b1712; } .leader::before { left: 50%; top: 0; bottom: 0; width: 2px; } .leader::after { top: 50%; left: 0; right: 0; height: 2px; } .leader-sweep { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%); background: conic-gradient(rgba(0,0,0,.35) var(--sweep, 0deg), transparent 0); border-radius: 50%; } .leader-n { position: relative; z-index: 2; font-family: var(--f-display); font-weight: 900; font-size: 46vmin; line-height: 1; color: #1b1712; width: 60vmin; height: 60vmin; display: grid; place-content: center; border-radius: 50%; border: 3px solid #1b1712; } .leader-n.ar { font-family: var(--f-ar-display); } .flashframe { inset: 0; background: #000 center / cover no-repeat; } .name-build { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; } .nb-latin { font-family: var(--f-display); font-weight: 900; font-size: clamp(64px, 16vw, 260px); line-height: .8; letter-spacing: -.01em; white-space: nowrap; } .nb-arabic { font-family: var(--f-ar-display); font-size: clamp(54px, 12vw, 190px); line-height: 1; color: var(--sodium); margin-top: -.55em; mix-blend-mode: screen; text-align: center; direction: rtl; } .skip { position: absolute; right: 20px; top: 18px; color: var(--muted); padding: 8px; z-index: 5; display: none; } .skip:hover { color: var(--blanc); } /* ───────────────────────── SCREENING ───────────────────────── */ #screening { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden; background: #000; --hb-deep: #434132; --hb-mid: #72674D; --hb-amber: #A0835C; --hb-light: #B6966A; --hb-paper: #D4C0A1; scrollbar-width: none; } #screening::-webkit-scrollbar { display: none; } .dim { position: fixed; inset: 0; background: #000; z-index: 45; opacity: 0; pointer-events: none; } .exit-sign { position: fixed; right: 22px; bottom: 18px; z-index: 46; font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; color: #ff3b2f; text-shadow: 0 0 10px rgba(255,59,47,.8); opacity: 0; pointer-events: none; } .teaser { position: fixed; inset: 0; z-index: 47; background: #000; display: none; } .teaser-frame { position: absolute; left: 50%; top: 50%; width: max(100vw, 177.78vh); width: max(100vw, 177.78dvh); height: max(56.25vw, 100vh); height: max(56.25vw, 100dvh); transform: translate(-50%, -50%); pointer-events: none; } .teaser-frame iframe { width: 100%; height: 100%; border: 0; } .teaser-bars::before, .teaser-bars::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; height: 9dvh; background: #000; z-index: 2; } .teaser-bars::before { top: 0; } .teaser-bars::after { bottom: 0; } .teaser-ui { position: absolute; left: 0; right: 0; bottom: 0; height: 9vh; height: 9dvh; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 3vw, 40px); } .teaser-ui .mono { color: var(--muted); } .teaser-btns { display: flex; gap: 10px; } /* the teaser's controls: one cinema ticket in the film's colour, torn in two along its perforation. Left stub: the sound, an equaliser that dances or lies flat. Right: « Passer », which tears away on hover. */ .teaser-btns { --notch: radial-gradient(circle 6px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat; display: flex; gap: 0; transform: rotate(-1.2deg); filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); } .t-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border: 0; color: #0b0a09; font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; background: radial-gradient(rgba(0,0,0,.16) .8px, transparent 1.1px) 0 0 / 4px 4px, var(--hb-amber); -webkit-mask: var(--notch); mask: var(--notch); transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s, filter .2s; } .t-sound { padding-left: 20px; border-right: 2px dashed rgba(11,10,9,.55); } .t-btn:hover, .t-btn:focus-visible { filter: brightness(1.12); outline: none; } .t-btn:focus-visible { box-shadow: inset 0 0 0 2px #0b0a09; } .t-btn:active { filter: brightness(.95); } /* sound: five bars dancing, or a flat line when muted */ .t-eq { display: inline-flex; align-items: center; gap: 2px; height: 18px; } .t-eq i { width: 3px; height: 2px; background: #0b0a09; transition: height .3s; } .t-sound[aria-pressed="true"] .t-eq i { animation: t-eq .9s ease-in-out infinite; } .t-sound[aria-pressed="true"] .t-eq i:nth-child(2) { animation-delay: -.2s; animation-duration: .7s; } .t-sound[aria-pressed="true"] .t-eq i:nth-child(3) { animation-delay: -.45s; animation-duration: 1.1s; } .t-sound[aria-pressed="true"] .t-eq i:nth-child(4) { animation-delay: -.1s; animation-duration: .8s; } .t-sound[aria-pressed="true"] .t-eq i:nth-child(5) { animation-delay: -.6s; animation-duration: 1s; } @keyframes t-eq { 0%, 100% { height: 4px; } 50% { height: 18px; } } .t-v { font-family: var(--f-mono); font-weight: 400; font-size: 10px; letter-spacing: .03em; padding: 2px 5px; background: #0b0a09; color: var(--hb-amber); } .t-sound[aria-pressed="false"] .t-v { background: transparent; color: rgba(11,10,9,.6); text-decoration: line-through; } /* skip: tears a little away from its stub */ .t-skip { padding-left: 16px; } .t-skip:hover, .t-skip:focus-visible { transform: translate(5px, -2px) rotate(2deg); } .t-ff { width: 18px; height: 18px; } .t-ff path { fill: #0b0a09; } .t-skip:hover .t-ff path { animation: t-ff .5s steps(2) infinite; } @keyframes t-ff { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .t-sound[aria-pressed="true"] .t-eq i { animation: none; height: 12px; } .t-skip:hover .t-ff path { animation: none; } } .teaser-fallback { position: absolute; inset: 0; display: none; place-content: center; text-align: center; gap: 14px; z-index: 2; background: #000 center / cover no-repeat; } .teaser-fallback p { background: rgba(0,0,0,.75); padding: 10px 14px; } .film { position: relative; color: var(--hb-paper); } .scene { position: relative; min-height: 100vh; min-height: 100dvh; } .sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; } /* title card */ .s-title .bg { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(calc(1.04 + var(--breath) * .012)); } .s-title .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(20,16,10,.35) 50%, #0b0906 100%), radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,.6)); } .s-title .card { position: absolute; left: clamp(16px, 5vw, 80px); right: clamp(16px, 5vw, 80px); bottom: 9vh; bottom: 9dvh; } .t-kicker { color: var(--hb-light); margin-bottom: 14px; letter-spacing: 0; } .t-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(52px, min(15.5vw, 21vh), 260px); font-size: clamp(52px, min(15.5vw, 21dvh), 260px); line-height: .92; color: #f4ead8; letter-spacing: -.005em; } .t-title .w { display: inline-block; } .t-ar { font-family: var(--f-ar-display); font-size: clamp(40px, 6vw, 96px); color: var(--hb-amber); margin-top: .1em; text-align: left; } .t-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin-top: 16px; color: var(--hb-paper); letter-spacing: 0; } .t-log { font-style: italic; font-size: clamp(20px, 2vw, 28px); max-width: 32ch; margin-top: 18px; color: #eadfca; } .scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--hb-light); animation: cue 2s ease-in-out infinite; } @keyframes cue { 50% { transform: translate(-50%, 6px); opacity: .5; } } /* story (subtitles) */ .s-story { height: 360vh; height: 360dvh; background: #0b0906; } .s-story .bg { position: absolute; inset: 0; background: center / cover no-repeat; filter: grayscale(.4) sepia(.5) brightness(.45) contrast(1.15); transform: scale(1.12); } .s-story .letterbox::before, .s-story .letterbox::after { content: ''; position: absolute; left: 0; right: 0; height: 12vh; height: 12dvh; background: #000; z-index: 2; } .s-story .letterbox::before { top: 0; } .s-story .letterbox::after { bottom: 0; } .s-story .label { position: absolute; top: calc(12vh + 18px); top: calc(12dvh + 18px); left: clamp(16px, 5vw, 80px); z-index: 3; color: var(--hb-light); } .s-story .subs { position: absolute; left: 0; right: 0; bottom: calc(12vh + 6vh); bottom: calc(12dvh + 6dvh); text-align: center; z-index: 3; padding: 0 16px; } .s-story .sub { display: inline-block; font-family: var(--f-serif); font-size: clamp(26px, 3.4vw, 52px); line-height: 1.1; color: #f3e9b5; text-shadow: 0 2px 0 #000, 0 0 30px rgba(0,0,0,.8); } /* the bridge */ .sig-pont { height: 600vh; height: 600dvh; } .sig-pont .sticky { background: linear-gradient(180deg, #2b2416 0%, #7a5f3a 34%, #c9a36c 47%, #a5865a 50%, #3b3322 100%); } .sky { position: absolute; left: 0; right: 0; top: 0; height: 52%; overflow: hidden; } .cloud { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,226,170,.5), transparent); filter: blur(10px); } .bridge-scene { position: absolute; inset: 0; perspective: 420px; perspective-origin: 50% 48%; } .deck { position: absolute; left: 50%; top: 48%; width: 34vw; min-width: 260px; height: 220vh; height: 220dvh; transform-origin: 50% 0; transform: translateX(-50%) rotateX(84deg); background: repeating-linear-gradient(0deg, #1f190f 0 5px, #6b5838 5px 9px, #57472d 9px 52px), linear-gradient(90deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35)), #57472d; background-size: 100% 52px; box-shadow: 0 0 0 2px #2a2216; } .rail { position: absolute; top: 0; height: 100%; width: 14px; background: repeating-linear-gradient(0deg, #1e1a12 0 6px, transparent 6px 52px), linear-gradient(90deg, #2a2418, #5a4b33); } .rail.l { left: -14px; } .rail.r { right: -14px; } .daoud { position: absolute; left: 50%; top: 48%; width: 46px; transform-origin: 50% 100%; transform: translate(-50%, -100%) scale(.3); } .daoud svg { display: block; width: 100%; height: auto; } .bridge-text { position: absolute; left: 0; right: 0; top: 9vh; top: 9dvh; text-align: center; padding: 0 16px; pointer-events: none; } .bt { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 6vw, 92px); line-height: .9; color: #f4ead8; opacity: 0; text-shadow: 0 4px 30px rgba(60,40,10,.5); } .bridge-hud { position: absolute; left: clamp(16px, 4vw, 60px); bottom: 26px; color: #f4ead8; opacity: .8; } .bridge-hud .bar { width: 160px; height: 2px; background: rgba(244,234,216,.25); margin-top: 6px; } .bridge-hud .bar i { display: block; height: 100%; width: 0; background: #f4ead8; } .headbang-word { position: absolute; inset: 0; display: grid; place-content: center; pointer-events: none; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(80px, 20vw, 340px); line-height: .8; color: #f4ead8; opacity: 0; mix-blend-mode: difference; text-align: center; } /* vision: a film page on a 12-column grid. Header rule, quote, still + « La forme », quote, two photograms */ .v-head { display: flex; align-items: center; gap: 14px; font-size: 10px; color: rgba(212,192,161,.6); margin-bottom: -2vh; margin-bottom: -2dvh; } .v-head i { flex: 1; height: 1px; background: rgba(212,192,161,.25); } .v-head span:first-child { color: var(--hb-amber); } .v-block { max-width: 1100px; } .v-block.r { justify-self: end; text-align: right; } .v-label { color: var(--hb-amber); margin-bottom: 14px; } .v-quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(36px, 5.2vw, 88px); line-height: 1; color: #f4ead8; text-wrap: balance; } .v-quote .tr { display: block; font-size: .34em; color: var(--hb-light); margin-top: .45em; } .v-src { margin-top: 12px; color: rgba(212,192,161,.6); } .v-src a { text-decoration: none; border-bottom: 1px solid currentColor; } /* the stills, framed like photograms */ .v-shot { position: relative; margin: 0; } .v-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.85) contrast(1.05); outline: 1px solid rgba(244,234,216,.18); outline-offset: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .v-shot figcaption { display: flex; justify-content: space-between; margin-top: 14px; font-size: 9px; color: rgba(244,234,216,.45); } .v-shot figcaption span:first-child { color: var(--hb-amber); } /* ── the pages under each film share one system: a header rule, a calmer title, content on a measured column ── */ .c-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 6.4vw, 104px); line-height: .86; color: #f4ead8; letter-spacing: -.005em; } /* palmarès: a readable list, two columns, fine rules */ .premiere { text-align: right; color: var(--hb-paper); display: grid; gap: 4px; } .premiere strong { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 36px); text-transform: uppercase; color: var(--hb-amber); line-height: .95; } .p-row a { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(212,192,161,.14); color: #f4ead8; text-decoration: none; transition: background .2s; } .p-row a:hover, .p-row a:focus-visible { background: rgba(212,192,161,.05); outline: none; } .p-ico { grid-row: 1 / span 2; width: 58px; } .p-row.laurel svg { width: 58px; height: 39px; display: block; margin: 0; overflow: visible; } .p-row.laurel path { stroke-width: 3.4; } .p-main { display: grid; gap: 2px; } .p-award { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 24px); line-height: 1; } .p-who { font-family: var(--f-serif); font-style: italic; font-size: 16px; color: var(--hb-paper); } .p-where { grid-column: 2 / 3; font-size: 10px; color: rgba(244,234,216,.72); letter-spacing: .03em; } .p-where b { font-weight: 400; color: var(--hb-amber); margin-left: 8px; } .p-tag { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 9px; letter-spacing: .03em; padding: 4px 8px; border: 1px solid rgba(212,192,161,.3); color: var(--hb-paper); white-space: nowrap; } .p-row.won .p-tag { background: var(--hb-amber); color: #120f0a; border-color: var(--hb-amber); } .p-note { grid-column: 2 / 3; font-size: 9px; color: #e0a060; letter-spacing: .03em; } .p-row a { grid-template-rows: auto; } .laurel { display: block; } .laurel path { fill: none; stroke: var(--hb-amber); stroke-width: 2; stroke-linecap: round; } .laurel.won path.leaf { fill: var(--hb-amber); fill-opacity: 0; } .laurel.nominated path { stroke-dasharray: 4 5; stroke: var(--hb-light); } .marquee { border-top: 1px solid rgba(212,192,161,.18); border-bottom: 1px solid rgba(212,192,161,.18); overflow: hidden; padding: 10px 0; } .marquee-track { display: flex; gap: 28px; width: max-content; animation: marquee 60s linear infinite; } .marquee span { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: 18px; letter-spacing: .04em; color: var(--hb-paper); white-space: nowrap; } .marquee span::after { content: '✳︎'; margin-left: 28px; color: var(--hb-amber); font-size: .6em; vertical-align: middle; } @keyframes marquee { to { transform: translateX(-50%); } } .release { color: rgba(244,234,216,.6); font-size: 10px; margin-top: -2vh; margin-top: -2dvh; } /* critique: cards on one row, quotes at reading size */ .c-cols { display: grid; gap: 1px; background: rgba(212,192,161,.16); border: 1px solid rgba(212,192,161,.16); } .c-cols.n2 { grid-template-columns: 1fr 1fr; } .c-cols.n3 { grid-template-columns: 1fr 1fr 1fr; } .c-side { padding: clamp(22px, 4vh, 40px) clamp(18px, 2.4vw, 36px); padding: clamp(22px, 4dvh, 40px) clamp(18px, 2.4vw, 36px); background: rgba(11,9,6,.9); display: grid; align-content: space-between; gap: 18px; } .c-label { color: var(--hb-amber); font-size: 10px; } .c-quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 2.4vw, 40px); line-height: 1.1; color: #f4ead8; text-wrap: balance; } .c-tr { font-style: italic; font-size: 16px; color: var(--hb-light); margin-top: -8px; } .c-who { color: var(--hb-light); font-size: 9px; line-height: 1.7; border-top: 1px solid rgba(212,192,161,.16); padding-top: 12px; } .c-who a { text-decoration: none; border-bottom: 1px solid currentColor; } .c-none { font-style: italic; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; color: var(--hb-paper); max-width: 44ch; } .c-centre { justify-self: center; transform: rotate(-2deg); width: min(520px, 90%); background: var(--hb-paper); color: #1b1712; padding: 18px 22px; text-align: center; box-shadow: 0 16px 50px rgba(0,0,0,.55); } .c-centre p:first-child { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.2vw, 30px); line-height: .95; } .c-centre .mono { margin-top: 8px; opacity: .7; font-size: 9px; } /* where the film comes from: a web series, pinned like a polaroid */ .origin { display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin: 0; padding: 22px; border: 1px solid rgba(212,192,161,.3); background: rgba(0,0,0,.25); max-width: 1100px; } .og-shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; transform: rotate(-2deg); box-shadow: 10px 10px 0 var(--hb-amber), 0 20px 40px rgba(0,0,0,.5); transition: transform .3s; } .og-shot:hover, .og-shot:focus-visible { transform: rotate(0) scale(1.03); outline: none; } .og-shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05); } .og-shot span { position: absolute; left: 10px; bottom: 8px; font-size: 10px; color: #fff; background: rgba(0,0,0,.65); padding: 3px 7px; } .og-ch { margin-top: 12px; padding: 9px 14px; border: 1px solid var(--hb-amber); color: #f4ead8; font-size: 10px; } .og-ch:hover, .og-ch:focus-visible { background: var(--hb-amber); color: #0b0906; outline: none; } @media (max-width: 760px) { .origin { grid-template-columns: 1fr; } } /* liens: the troupe as portrait cards */ .troupe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; } .actor { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; background: rgba(11,9,6,.55); border: 1px solid rgba(212,192,161,.16); transition: border-color .2s, background .2s; } .actor:hover { border-color: rgba(212,192,161,.45); background: rgba(11,9,6,.75); } .motifs { display: flex; flex-wrap: wrap; gap: 10px; } .motif { border: 1px dotted var(--hb-amber); padding: 8px 12px; color: #f4ead8; font-size: 17px; font-style: italic; } .motif .mono { display: block; font-style: normal; font-size: 8px; color: var(--hb-light); margin-top: 2px; } /* ── end credits: the screen holds on black, each credit comes in alone, then « Fin » ── */ .s-credits { background: #000; padding: 0 16px 16vh; padding: 0 16px 16dvh; } .cr-stage { position: relative; height: 100vh; height: 100dvh; } .cr-screen { position: relative; height: 100%; overflow: hidden; } .cr-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; padding: 0 16px; visibility: hidden; } .cr-role { color: var(--hb-amber); font-size: 11px; letter-spacing: .03em; } .cr-big { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(56px, 9vw, 150px); line-height: .85; color: #f4ead8; } .cr-sub { color: rgba(212,192,161,.55); font-size: 10px; letter-spacing: .03em; } .cr-names { display: grid; gap: 6px; max-width: 900px; } .cr-names span { font-family: var(--f-serif); font-size: clamp(24px, 2.8vw, 42px); line-height: 1.12; color: #f4ead8; } /* the end title: the film's own name, not « Fin » (which would read as the film The End) */ .cr-end { gap: 10px; } .cr-end-t { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(54px, 8.5vw, 140px); line-height: .85; color: #f4ead8; max-width: 14ch; } .cr-end-ar { font-family: var(--f-ar-display); font-size: clamp(26px, 3.4vw, 54px); line-height: 1.1; color: var(--hb-amber); } /* then the whole credits, small, beneath it */ .cr-recap { position: absolute; left: 50%; top: 47%; transform: translateX(-50%); width: min(1000px, calc(100% - 48px)); display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 34px; text-align: center; visibility: hidden; } .cr-r { flex: 0 1 auto; max-width: 300px; } .cr-r p.mono { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--hb-amber); margin-bottom: 6px; } .cr-r p:not(.mono) { font-family: var(--f-serif); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.35; color: rgba(244,234,216,.82); } /* while the credits play: a thin runtime line, and a way to skip */ .cr-run { position: absolute; left: clamp(16px, 4vw, 48px); right: calc(clamp(16px, 4vw, 48px) + 210px); bottom: calc(5vh + 13px); bottom: calc(5dvh + 13px); height: 1px; background: rgba(212,192,161,.15); } .cr-run i { display: block; height: 100%; background: var(--hb-amber); transform-origin: 0 50%; transform: scaleX(0); } .cr-skip { position: absolute; right: clamp(16px, 4vw, 48px); bottom: 5vh; bottom: 5dvh; z-index: 2; padding: 6px 0; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: rgba(212,192,161,.6); border-bottom: 1px solid rgba(212,192,161,.3); transition: color .2s, border-color .2s; } .cr-skip:hover, .cr-skip:focus-visible { color: #f4ead8; border-color: currentColor; outline: none; } /* the end credits as they finish: the film's title, then the whole credits in small type beneath it, standing still */ .cr-stage.is-final { height: auto; } .cr-stage.is-final .cr-screen { position: static; height: auto; display: grid; gap: 7vh; gap: 7dvh; padding: 16vh 0 10vh; padding: 16dvh 0 10dvh; } .cr-stage.is-final .cr-card { position: static; visibility: visible; } .cr-stage.is-final .cr-recap { position: static; transform: none; visibility: visible; margin: 0 auto; } /* without motion: the credits simply stack */ .cr-stage.is-static { height: auto; } .cr-stage.is-static .cr-screen { position: static; height: auto; display: grid; gap: 10vh; gap: 10dvh; padding: 16vh 0; padding: 16dvh 0; } .cr-stage.is-static .cr-card { position: static; visibility: visible; } .cr-stage.is-static .cr-recap { position: static; transform: none; visibility: visible; margin: 0 auto; } .cr-stage.is-static :is(.cr-run, .cr-skip) { display: none; } .roll { width: min(760px, 100%); margin: 0 auto; text-align: center; } .roll .src-title { margin: 0 0 14px; color: var(--hb-amber); } .roll .srcs { list-style: none; font-family: var(--f-mono); font-size: 10px; line-height: 2; } .roll .srcs a { color: var(--hb-paper); } .roll .rights { margin-top: 24px; color: rgba(212,192,161,.5); font-size: 9px; line-height: 1.8; } .next { margin-top: 10vh; margin-top: 10dvh; display: grid; gap: 14px; justify-items: center; } .next-label { color: var(--hb-light); } .next-btn { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 6vw, 90px); line-height: .85; color: #f4ead8; } .next-btn:hover, .next-btn:focus-visible { color: var(--hb-amber); outline: none; } .next-soon { color: rgba(212,192,161,.5); } .back-btn { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 9px 13px; border: 1px solid rgba(255,59,47,.75); background: rgba(21,7,6,.9); color: #ff4a3d; text-align: left; box-shadow: 0 0 14px rgba(255,59,47,.18); transition: box-shadow .25s ease, border-color .25s ease, background .25s ease; } .back-btn .bb-arrow { width: 20px; height: auto; flex: none; transition: transform .25s ease; } .back-btn .bb-txt { display: grid; gap: 3px; padding-left: 12px; border-left: 1px solid rgba(255,59,47,.35); } .back-btn .bb-sign { display: flex; align-items: baseline; gap: 8px; font: 900 19px/.9 var(--f-display); text-transform: uppercase; text-shadow: 0 0 8px rgba(255,59,47,.6); } .back-btn .bb-sign i { font: 400 .78em/1 var(--f-ar-display, var(--f-display)); font-style: normal; opacity: .85; } .back-btn .bb-line { font: italic 13px/1.1 var(--f-serif); color: rgba(233,217,196,.78); } .back-btn:hover, .back-btn:focus-visible { border-color: #ff3b2f; background: #1d0907; box-shadow: 0 0 22px rgba(255,59,47,.34); outline: none; } .back-btn:hover .bb-line, .back-btn:focus-visible .bb-line { color: #f4ead8; } .back-btn:hover .bb-arrow, .back-btn:focus-visible .bb-arrow { transform: translateX(-4px); } @media (prefers-reduced-motion: reduce) { .back-btn, .back-btn .bb-arrow { transition: none; } } @media (max-width: 900px) { .c-cols.n2, .c-cols.n3 { grid-template-columns: 1fr; } } @media (max-width: 760px) { .p-row a { grid-template-columns: 44px minmax(0, 1fr); } .p-ico, .p-row.laurel svg { width: 44px; } .p-tag { grid-column: 2; grid-row: auto; justify-self: start; } .actor { grid-template-columns: 76px minmax(0, 1fr); } } /* ── the plan: numbered rules, one « Réception » page for sparse films, fades in and out, the next film as a poster ── */ .v-head span:first-child b { font-family: var(--f-display); font-weight: 900; font-size: 22px; letter-spacing: 0; color: #f4ead8; margin-right: 6px; vertical-align: -3px; } .v-head i { transform-origin: 0 50%; } /* coming out of the film's own scene: the page fades up from black instead of starting on a hard edge */ /* going into the credits: the last page sinks into black, the lights go down */ /* quotes are said word by word */ /* « Réception »: palmarès and critique side by side for films with little of either */ .c-cols.n1 { grid-template-columns: 1fr; margin-top: 14px; } /* the sticker quote: Arabic and darija in their own type */ .c-centre p[lang^="ar"] { font-family: var(--f-ar-display); text-transform: none; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; } /* the troupe never leaves an orphan: as many columns as cards, up to three */ .troupe { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } @media (max-width: 700px) { .troupe { grid-template-columns: 1fr; } } /* the next screening: its still as a wide poster you step into */ .next { margin-top: 12vh; margin-top: 12dvh; gap: 22px; } .next-card { position: relative; display: grid; align-content: end; justify-items: start; width: min(920px, 100%); aspect-ratio: 21 / 9; padding: clamp(18px, 3vw, 36px); overflow: hidden; text-align: left; color: #f4ead8; isolation: isolate; outline: 1px solid rgba(244,234,216,.18); outline-offset: 8px; } .nc-img { position: absolute; inset: 0; z-index: -1; background: var(--img) center / cover no-repeat; filter: grayscale(.6) brightness(.55); transform: scale(1.04); transition: filter .6s, transform 1.2s cubic-bezier(.2,.8,.2,1); } .nc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.85)); } .next-card:hover .nc-img, .next-card:focus-visible .nc-img { filter: grayscale(0) brightness(.75); transform: scale(1.1); } .next-card:focus-visible { outline-color: var(--hb-amber); } .nc-k { font-size: 10px; letter-spacing: .03em; color: var(--hb-amber); } .nc-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 6vw, 92px); line-height: .85; margin-top: 8px; } .nc-meta { font-size: 10px; color: rgba(244,234,216,.7); margin-top: 10px; letter-spacing: .03em; } .next-card .nc-meta { font-family: var(--f-mono); } /* the way out: an emergency sign of dark glass, screwed to the wall, the picture showing through it; the figure and the letters glow in it, a strip of red light runs along its foot. It never flickers: under the mouse the glass only darkens and the figure runs to the door */ .film-close { --sig: #ff5a47; position: fixed; top: 14px; right: 16px; z-index: 44; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; row-gap: 3px; padding: 8px 15px 9px 12px; color: var(--sig); text-align: left; background: linear-gradient(112deg, rgba(255,235,225,.1), rgba(255,235,225,0) 34%), linear-gradient(180deg, rgba(34,8,6,.5), rgba(10,3,3,.58)); border: 1px solid rgba(255,90,71,.62); box-shadow: inset 0 0 0 3px rgba(12,3,3,.28), inset 0 0 0 4px rgba(255,90,71,.2), 0 0 18px rgba(255,59,47,.16), 0 8px 18px rgba(0,0,0,.28); opacity: 0; transition: box-shadow .3s, background .3s; } .film-close::before { content: ''; position: absolute; inset: 5px; pointer-events: none; opacity: .7; background: radial-gradient(circle, rgba(255,214,200,.75) 0 1px, transparent 1.6px) 0 0 / 5px 5px no-repeat, radial-gradient(circle, rgba(255,214,200,.75) 0 1px, transparent 1.6px) 100% 0 / 5px 5px no-repeat, radial-gradient(circle, rgba(255,214,200,.75) 0 1px, transparent 1.6px) 0 100% / 5px 5px no-repeat, radial-gradient(circle, rgba(255,214,200,.75) 0 1px, transparent 1.6px) 100% 100% / 5px 5px no-repeat; } .film-close::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, rgba(255,90,71,0), rgba(255,110,90,.95), rgba(255,90,71,0)); box-shadow: 0 0 9px 1px rgba(255,74,58,.55); } .film-close .fc-man { grid-row: span 2; width: 26px; height: 26px; } .fc-man svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 5px rgba(255,74,58,.85)); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .fc-man .fc-door { stroke: currentColor; stroke-width: 1.6; opacity: .55; } .fc-txt { display: flex; align-items: baseline; gap: 9px; line-height: 1; } .fc-txt b { font: 800 15px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 0 9px rgba(255,74,58,.8), 0 1px 2px rgba(0,0,0,.6); } .fc-txt [lang="ar"] { font: 15px/1 var(--f-ar-display); text-shadow: 0 0 9px rgba(255,74,58,.65), 0 1px 2px rgba(0,0,0,.6); } .fc-to { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,226,214,.82); text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; } .fc-to kbd { font: inherit; letter-spacing: .03em; padding: 1px 4px; border: 1px solid rgba(255,226,214,.4); color: rgba(255,226,214,.8); } .film-close:hover, .film-close:focus-visible { background: linear-gradient(112deg, rgba(255,235,225,.12), rgba(255,235,225,0) 34%), linear-gradient(180deg, rgba(44,10,7,.66), rgba(12,3,3,.72)); box-shadow: inset 0 0 0 3px rgba(12,3,3,.34), inset 0 0 0 4px rgba(255,90,71,.38), 0 0 30px rgba(255,59,47,.3), 0 8px 18px rgba(0,0,0,.34); } .film-close:hover .fc-man svg { transform: translateX(3px); } .film-close.fc-plain { padding-left: 13px; grid-template-columns: auto; } /* after a moment the sign folds down to the running figure alone; the mouse (or keyboard focus) opens it again */ .film-close:not(.fc-plain) :is(.fc-txt, .fc-to) { max-width: 200px; overflow: hidden; white-space: nowrap; transition: max-width .55s cubic-bezier(.7,0,.2,1), opacity .35s; } .film-close:not(.fc-plain) { transition: box-shadow .3s, background .3s, column-gap .55s cubic-bezier(.7,0,.2,1), padding .55s cubic-bezier(.7,0,.2,1); } .film-close.is-mini:not(:hover):not(:focus-visible) { column-gap: 0; padding-right: 10px; } .film-close.is-mini:not(:hover):not(:focus-visible) :is(.fc-txt, .fc-to) { max-width: 0; opacity: 0; } .film-close.is-mini:not(:hover):not(:focus-visible) .fc-man svg { animation: fc-run 3.2s ease-in-out infinite; } @keyframes fc-run { 0%, 70%, 100% { transform: translateX(0); } 78% { transform: translateX(3px); } 86% { transform: translateX(0); } 92% { transform: translateX(2px); } } .film-progress { position: fixed; left: 0; top: 0; height: 2px; background: var(--hb-amber); z-index: 44; width: 0; } /* reveal helpers */ [data-cut] { opacity: 1; } /* ───────────────────────── CURSOR ───────────────────────── */ #cursor { position: fixed; left: 0; top: 0; width: 44px; height: 32px; z-index: 9500; pointer-events: none; will-change: transform; transform: translate(-100px, -100px); display: none; transition: width .25s var(--ease-cut), height .25s var(--ease-cut); } body.has-cursor #cursor { display: block; } #cursor i { position: absolute; width: 9px; height: 9px; border-color: var(--blanc); border-style: solid; border-width: 0; } #cursor i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; } #cursor i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; } #cursor i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; } #cursor i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; } #cursor::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #e0261b; } .cur-tc { position: absolute; left: 100%; top: 100%; margin: 4px 0 0 4px; font-size: 9px; color: var(--muted); white-space: nowrap; } #cursor.hover { width: 64px; height: 46px; } #cursor.hover i { border-color: var(--accent); } /* the remote reads in three parts: home · his work (1–4) · around it (5–7), each group's name engraved above it */ #remote { padding-top: 18px; } .rc-group { position: relative; display: flex; gap: 2px; padding-left: 8px; margin-left: 6px; border-left: 1px solid #2c2a26; } .rc-group::before { content: attr(data-label); position: absolute; left: 8px; right: 0; top: -14px; font-family: var(--f-mono); font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: rgba(236,231,222,.38); white-space: nowrap; border-bottom: 1px solid rgba(236,231,222,.1); padding-bottom: 2px; line-height: 1; } /* Ville, the home key: a house over its number, set a little apart */ .rc-home { min-width: 70px; } .rc-home .rc-n { display: flex; align-items: center; gap: 5px; } .rc-home .rc-n svg { width: 14px; height: 14px; } /* ── the remote as separate keys floating over the room: no panel behind them, each key its own small dark tile, the channel on air lit cream; the number in the display face, the name typed under it, the groups set apart ── */ #remote { bottom: 18px; width: auto; justify-content: center; align-items: stretch; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .rc-vfd { display: none; } .rc-btn:not(.rc-bio) { display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 62px; margin: 0; padding: 7px 10px 6px; border-radius: 3px; border: 1px solid rgba(236,231,222,.12); background: rgba(14,12,10,.94); box-shadow: 0 4px 10px rgba(0,0,0,.4); color: #ECE7DE; transition: transform .2s var(--ease-cut), background .2s, border-color .2s; } .rc-btn:not(.rc-bio)::before { content: none; } .rc-btn:not(.rc-bio):hover, .rc-btn:not(.rc-bio):focus-visible { transform: translateY(-3px); border-color: rgba(236,231,222,.35); background: rgba(24,21,18,.9); outline: none; } .rc-btn:not(.rc-bio).active { background: #ECE7DE; border-color: #ECE7DE; color: #14110e; transform: translateY(-3px); } .rc-btn:not(.rc-bio) .rc-n { font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1; color: inherit; } .rc-btn:not(.rc-bio).active .rc-n { color: #C8261B; } .rc-btn:not(.rc-bio) .rc-l { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0; text-transform: none; color: inherit; opacity: .75; } .rc-btn:not(.rc-bio) .rc-ar { font-size: 10px; color: inherit; opacity: .4; line-height: 1; } .rc-home .rc-n { display: flex; align-items: center; gap: 4px; } .rc-home .rc-n svg { display: block; width: 12px; height: 12px; } #remote { padding-top: 0; } .rc-group { display: flex; gap: 6px; margin: 0 0 0 10px; padding: 0; border: 0; box-shadow: none; } .rc-group::before { content: none; } /* CH 5–7 are inside his head: their keys stand apart from the places he shows people */ .rc-group[data-label="Autour"] { margin-left: 30px; } .rc-sep { width: 4px; margin: 0; background: none; box-shadow: none; } .rc-bio { align-self: center; min-width: 80px; margin: -6px 4px 0 12px; padding: 7px 9px 6px; transform: rotate(-4deg) scale(.92); } .rc-bio:hover, .rc-bio:focus-visible { transform: rotate(0deg) translateY(-3px) scale(.98); } .rc-bio-name { font-size: 23px; } .rc-bio-ar { font-size: 11px; } /* La Ville opens clean: the teletext row waits below the edge until the visitor scrolls (or clicks the cue) */ /* La Ville opens clean: the channel keys wait out of sight below the edge; a short line in the den's light, late and faint, says they are there; scrolling (or a click on the line) brings them up */ body.is-on[data-ch="0"]:not(.menu-open):not(.in-screening) #remote { transform: translate(-50%, calc(100% + 40px)); } /* on a phone the row of channels stays in view in La Ville too, as on every other channel */ @media (max-width: 760px) { body.is-on[data-ch="0"]:not(.menu-open):not(.in-screening) #remote { transform: none; } } #remote { transition: transform .8s var(--ease-cut), opacity .5s; } .city-scroll { position: absolute; left: 50%; bottom: 34px; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; white-space: nowrap; font-family: var(--f-serif); font-style: italic; font-size: 17px; color: rgba(242,228,204,.78); text-shadow: 0 1px 10px rgba(0,0,0,.9); opacity: 0; transition: opacity .8s, color .2s; } /* the room first: the line only appears after a while, faintly, or when the mouse drifts to the bottom of the screen */ body[data-ch="0"] .city-scroll { animation: cs-late 1.6s ease 12s forwards; } @keyframes cs-late { to { opacity: .42; } } body.near-bottom[data-ch="0"] .city-scroll, .city-scroll:hover, .city-scroll:focus-visible { animation: none; opacity: .9; } .city-scroll:hover { color: #F4E6CC; } .city-scroll .cs-wheel { width: 14px; height: 22px; border: 1.5px solid currentColor; border-radius: 8px; position: relative; opacity: .8; } .city-scroll .cs-wheel::after { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; background: #E8352B; border-radius: 1px; animation: cs-roll 1.8s ease-in-out infinite; } @keyframes cs-roll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(7px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } body.menu-open .city-scroll { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .city-scroll .cs-wheel::after { animation: none; } } /* ───────────────────────── RESPONSIVE / A11Y ───────────────────────── */ @media (max-width: 760px) { #remote { left: 0; right: 0; bottom: 0; transform: translateY(140%); border-radius: 14px 14px 0 0; padding-bottom: max(6px, env(safe-area-inset-bottom)); } body.is-on #remote { transform: none; } body.in-screening #remote { transform: translateY(160%); } .rc-btn { min-width: 0; flex: 1 1 0; padding: 7px 2px 6px; } .rc-l { font-size: 8px; letter-spacing: .04em; } .rc-ar { display: none; } .rc-bio { flex: 1.4 1 0; margin: -10px 2px -2px 4px; padding: 6px 6px 5px; } #remote { padding-top: 6px; } .rc-group { display: contents; } .rc-group::before { content: none; } .rc-home { min-width: 0; } .rc-home .rc-n svg { display: none; } .rc-vfd { display: none; } #remote { width: auto; bottom: 0; gap: 3px; padding: 0 4px max(6px, env(safe-area-inset-bottom)); } .rc-btn:not(.rc-bio) { min-width: 0; flex: 1 1 0; padding: 6px 2px 5px; } .rc-group { display: contents; } .rc-btn:not(.rc-bio) .rc-l { font-size: 10px; } .rc-btn:not(.rc-bio):not(.active) .rc-l { display: none; } /* numbers only; the channel on air keeps its name */ .rc-btn:not(.rc-bio).active { flex: 2 1 0; } #remote { border-radius: 0; } .rc-bio { margin: -12px 2px -2px 4px; } .rc-bio-name { font-size: 19px; } .rc-bio-ar, .rc-key, .rc-tape { display: none; } .live { display: none; } .city-name { bottom: 120px; } .name-arabic { margin-left: 8vw; } .subtitle-track { bottom: 96px; } .c-cols.n2, .c-cols.n3 { grid-template-columns: 1fr; } .cr { grid-template-columns: 1fr; gap: 2px; text-align: center; } .cr dt { text-align: center; } .deck { width: 70vw; } } @media (prefers-reduced-motion: reduce) { .marquee-track, .live i, .standby, .scroll-cue { animation: none; } .montage .track, .s-title .bg { transform: none; } } /* ───────────────────────── NOISE AS EVENT ───────────────────────── */ @keyframes noise-shift { 0% { background-position: 0 0; } 20% { background-position: -71px 43px; } 40% { background-position: 37px -92px; } 60% { background-position: -118px -21px; } 80% { background-position: 84px 66px; } 100% { background-position: 0 0; } } .noise-burst { position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: inherit; background: var(--noise-tile) 0 0 / 128px 128px; image-rendering: pixelated; animation: noise-shift .25s steps(5) infinite; mix-blend-mode: normal; } @media (prefers-reduced-motion: reduce) { .noise-burst { animation: none; } } /* ══════════ La Salle: the film's affiche, lit in its case, the programme as small posters ══════════ */ .salle { --pw: min(30vw, calc((100vh - 260px) * .6667), 360px); --pw: min(30vw, calc((100dvh - 260px) * .6667), 360px); } #cinema .room-head { width: min(860px, 88vw); } .salle-frame { width: auto; grid-template-columns: var(--pw) minmax(0, 440px); column-gap: clamp(32px, 5vw, 84px); align-items: center; justify-content: center; } .salle-screen { grid-column: 1; grid-row: 1; width: var(--pw); aspect-ratio: 2 / 3; box-shadow: 0 0 0 1px rgba(255,240,210,.22), 0 0 0 9px #0d0b09, 0 0 0 10px rgba(233,184,114,.35), 0 0 70px rgba(255,220,160,.16), 0 40px 80px rgba(0,0,0,.8); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; } .salle-screen:hover, .salle-screen:focus-visible { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 0 1px rgba(255,240,210,.35), 0 0 0 9px #0d0b09, 0 0 0 10px rgba(233,184,114,.6), 0 0 90px rgba(255,220,160,.26), 0 50px 90px rgba(0,0,0,.85); } .salle-screen .scr-img, .salle-screen:hover .scr-img, .salle-screen:focus-visible .scr-img { filter: none; background-position: center; } .salle-screen:hover .scr-img { transform: scale(1.03); } /* the glass of the poster case */ .salle-screen::after { background: linear-gradient(118deg, rgba(255,255,255,.1), transparent 34%, transparent 70%, rgba(255,255,255,.04)); } .salle-screen .scr-slate { display: none; } .scr-play { top: 50%; } /* a film without a poster: its frame, set as an affiche */ .scr-affiche { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: none; padding: 46% 18px 18px; background: linear-gradient(transparent, rgba(0,0,0,.88) 55%); text-align: left; } .no-affiche .scr-affiche { display: grid; gap: 4px; } .no-affiche .scr-img { filter: grayscale(1) contrast(1.15) !important; } .scr-affiche b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 52px); line-height: .85; color: #f4ead8; } .scr-affiche span { font-family: var(--f-ar-display); font-size: clamp(18px, 1.8vw, 26px); color: #e0261b; } .scr-affiche em { font-style: normal; font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: rgba(244,234,216,.7); margin-top: 6px; } /* the card beside the poster */ .salle-frame .salle-info { grid-column: 2; grid-row: 1; margin-top: 0; padding: 0; gap: 14px; } .salle-frame .si-k { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); } .salle-frame .si-k span { color: var(--muted); } .salle-frame .si-title { flex-direction: column; align-items: flex-start; row-gap: 6px; font-size: clamp(34px, 4vw, 62px); } .salle-frame .si-title span { font-size: .5em; } .salle-frame .si-row { flex-direction: column; align-items: flex-start; gap: 18px; } /* the programme: eight small affiches */ .salle-prog button { width: clamp(30px, 3vw, 46px); aspect-ratio: 2 / 3; } @media (max-width: 760px) { .salle { --pw: min(62vw, 280px); } .salle-frame { grid-template-columns: 1fr; justify-items: center; row-gap: 20px; } .salle-frame .salle-info { grid-column: 1; grid-row: 2; justify-items: center; text-align: center; } .salle-frame .si-title, .salle-frame .si-row { align-items: center; } .salle-screen { aspect-ratio: 2 / 3 !important; } } /* ══════════ La Salle: the programme along the top, eight lit poster cases; the big affiche in the centre turns by itself ══════════ */ .salle { --case-h: clamp(64px, 13vh, 132px); --case-h: clamp(64px, 13dvh, 132px); --pw: min(30vw, calc((100vh - 240px - var(--case-h)) * .6667), 360px); --pw: min(30vw, calc((100dvh - 240px - var(--case-h)) * .6667), 360px); padding-top: clamp(48px, 7vh, 72px); padding-top: clamp(48px, 7dvh, 72px); row-gap: clamp(12px, 2.4vh, 26px); row-gap: clamp(12px, 2.4dvh, 26px); } .salle-prog-wrap { position: relative; display: grid; grid-template-columns: auto auto auto; align-items: end; gap: 22px; padding: 0 0 12px; } /* the lit lintel the cases hang from */ .salle-prog-wrap::before { content: ''; position: absolute; left: -24px; right: -24px; top: -10px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,214,150,.75) 20%, rgba(255,214,150,.75) 80%, transparent); box-shadow: 0 0 22px 4px rgba(255,200,120,.22); } .salle-prog-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,184,114,.3), transparent); } .sp-head { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 4px; } .sp-hint { padding-bottom: 4px; } .salle-prog { gap: clamp(8px, 1vw, 16px); align-items: end; } .salle-prog li { display: grid; } .salle-prog button { width: auto; height: var(--case-h); aspect-ratio: 2 / 3; padding: 4px; outline: none; background: #0d0b09; box-shadow: inset 0 0 0 1px rgba(233,184,114,.32), 0 14px 26px rgba(0,0,0,.7); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; } .sp-pic { display: block; width: 100%; height: 100%; background: #000 center / cover no-repeat; filter: brightness(.55) saturate(.7); transition: filter .35s; } /* the light from the lintel falls on each case */ .salle-prog button::after { content: ''; position: absolute; inset: 4px; pointer-events: none; background: linear-gradient(rgba(255,226,170,.22), transparent 38%); mix-blend-mode: screen; } .salle-prog button:hover, .salle-prog button:focus-visible { transform: translateY(-3px); outline: none; } .salle-prog button:hover .sp-pic, .salle-prog button:focus-visible .sp-pic { filter: brightness(.9) saturate(1); } .salle-prog button.on { transform: scale(1.12); outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 1px rgba(0,0,0,.6), 0 0 26px rgba(255,214,150,.28), 0 18px 30px rgba(0,0,0,.8); } .salle-prog button.on .sp-pic { filter: none; } /* the centre: the big affiche, and the line that runs out before it rolls to the next film */ .salle-frame { grid-template-columns: var(--pw) minmax(0, 420px); } @media (max-width: 760px) { .salle { --case-h: 58px; --pw: min(58vw, 250px); align-content: start; overflow: hidden auto; scrollbar-width: none; padding-bottom: 150px; } .salle::-webkit-scrollbar { display: none; } .salle-frame { grid-template-columns: 1fr; } .salle-prog-wrap { grid-template-columns: 1fr; justify-items: center; gap: 10px; } .sp-head { flex-direction: row; } .salle-prog { display: flex; width: auto; overflow-x: auto; max-width: calc(100vw - 32px); padding: 6px 4px 12px; } .salle-prog button { width: auto; } } /* the navigation hint, compact */ .sp-hint { gap: 3px; font-size: 7px; letter-spacing: .03em; color: rgba(236,231,222,.38); } .sp-hint kbd { width: 13px; height: 13px; font-size: 8px; border-bottom-width: 1px; } .sp-or { margin: 0 2px; font-size: 10px; } .sp-mouse { width: 9px; height: 13px; margin-right: 3px; } /* ── La Ville · his name is the first layer: above the drifting quotes, drawn firmly, on a pool of shadow ── */ .city-name { z-index: 5; } .city-name::before { content: ''; position: absolute; left: -12vw; right: -14vw; top: -12vh; top: -12dvh; bottom: -8vh; bottom: -8dvh; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 35% 55%, rgba(6,8,10,.72), rgba(6,8,10,.35) 45%, transparent 70%); } .name-latin { -webkit-text-stroke: 1.6px rgba(236,231,222,.95); color: rgba(236,231,222,.07); mix-blend-mode: normal; text-shadow: 0 0 40px rgba(0,0,0,.6); } .name-arabic { opacity: 1; mix-blend-mode: normal; text-shadow: 0 4px 24px rgba(0,0,0,.7); } .name-tag { color: rgba(236,231,222,.8); } /* ── La Ville · his den: one frame shared by the room (dim, and sharp under the cursor's light), the hidden map and his portrait; it covers the screen and pans with the mouse (city.js) ── */ #city .montage { inset: 0; } #city .montage .track { transform: none; } #city .montage img { inset: auto; left: 0; object-fit: cover; opacity: 1; transition: none; will-change: transform; } #city .montage.soft { filter: brightness(.66) saturate(.95) contrast(1.05); } #city .montage.sharp { filter: brightness(1.02) saturate(1.05) contrast(1.05); } #city::after { background: linear-gradient(180deg, rgba(10,7,4,.62) 0%, rgba(10,7,4,.04) 30%, rgba(10,7,4,.08) 70%, rgba(10,7,4,.72) 100%); } .den-marks, .den-man { position: absolute; left: 0; pointer-events: none; will-change: transform; } .den-marks { z-index: 4; } .den-man { z-index: 1; } /* the hidden map: an object lights up under the mouse, a ticket names its film */ .den-mark { position: absolute; pointer-events: auto; border: 1px dashed transparent; transition: border-color .25s, background .25s; } .den-mark:hover, .den-mark:focus-visible { border-color: rgba(244,233,200,.7); background: rgba(255,210,140,.08); outline: none; } .den-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 2; width: max-content; max-width: 250px; display: grid; gap: 3px; justify-items: start; text-align: left; padding: 10px 16px 10px 22px; color: #1a120a; background: #EDE3CC; opacity: 0; transform: translate(-50%, 6px) rotate(-1deg); pointer-events: none; transition: opacity .2s, transform .2s; filter: drop-shadow(0 6px 12px rgba(0,0,0,.55)); } .den-mark.tip-down .den-tip { bottom: auto; top: calc(100% + 10px); } .den-tip::before { content: ''; position: absolute; left: 12px; top: 6px; bottom: 6px; border-left: 2px dotted rgba(26,18,10,.35); } .den-tip b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: .95; } .den-tip small { font-family: var(--f-serif); font-size: 14px; line-height: 1.3; color: rgba(26,18,10,.85); } .ct-go { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); margin-top: 2px; } .den-mark:hover .den-tip, .den-mark:focus-visible .den-tip { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); } /* with him standing in the room, his name steps back to the left wall: smaller, still the first layer */ /* in the den his name is a neon sign on the wall at 3 AM: the outlined letters are the cream tubes, the Arabic a red one, and their light falls warm on the wall behind them; it hums softly, it never blinks */ #city.has-man .city-name::before { background: radial-gradient(ellipse at 32% 48%, rgba(255,128,60,.16), rgba(255,128,60,.05) 38%, transparent 62%), radial-gradient(ellipse at 35% 55%, rgba(18,9,3,.55), rgba(18,9,3,.25) 45%, transparent 70%); } #city.has-man .name-latin { font-size: clamp(60px, 8vw, 140px); color: transparent; -webkit-text-stroke: 1.8px #FFF1DC; text-shadow: none; filter: drop-shadow(0 0 2px rgba(255,214,160,.95)) drop-shadow(0 0 9px rgba(255,160,80,.65)) drop-shadow(0 0 28px rgba(255,120,40,.4)); animation: neon-hum 5s ease-in-out infinite; } #city.has-man .name-arabic { font-size: clamp(38px, 4.9vw, 90px); margin-left: 7vw; color: #FFD9CF; text-shadow: none; filter: drop-shadow(0 0 2px #FF6A4D) drop-shadow(0 0 8px rgba(255,60,40,.85)) drop-shadow(0 0 26px rgba(232,40,30,.5)); animation: neon-hum 6.5s ease-in-out -2s infinite; } #city.has-man .name-tag { color: rgba(242,224,192,.82); text-shadow: 0 2px 12px rgba(18,9,3,.8); } @keyframes neon-hum { 0%, 100% { opacity: 1; } 50% { opacity: .9; } } @media (prefers-reduced-motion: reduce) { #city.has-man .name-latin, #city.has-man .name-arabic { animation: none; } } /* his portrait as a print on the den's wall, living in the room's layers (city.js): an old dark-wood frame with a gold fillet (assets/den-frame.webp, generated empty, the opening keyed out; concept/asset-prompts.md), the photograph in its opening, the lamp's warm light raking from the left, a soft shadow falling to the right */ .den-print { position: absolute; left: 0; pointer-events: none; will-change: transform; } .dp-frame { position: absolute; left: 50%; top: 2%; height: 78%; aspect-ratio: 1474 / 2200; transform: translateX(-50%); box-shadow: 16px 20px 30px rgba(25,12,3,.6), 4px 6px 8px rgba(25,12,3,.45); } .dp-frame::after { content: ''; position: absolute; inset: 0; background: url('../assets/den-frame.webp') center / 100% 100% no-repeat; } /* the opening, in the frame image's own proportions */ #city .montage .dp-frame img, .dp-light { position: absolute; left: 12.2%; right: 12.1%; top: 8.15%; bottom: 8.1%; width: auto; height: auto; } #city .montage .dp-frame img { will-change: auto; display: block; width: 75.7%; height: 83.75%; object-fit: cover; filter: grayscale(1) contrast(1.05); } .dp-light { mix-blend-mode: multiply; background: linear-gradient(105deg, rgba(255,214,160,.95), rgba(236,186,128,.9) 45%, rgba(190,140,95,.85) 100%); } .dp-light::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; background: linear-gradient(150deg, transparent 38%, rgba(255,236,210,.08) 42%, transparent 48%); } /* the click target sits exactly over the print, invisible */ .den-tableau { position: absolute; left: 50%; top: 2%; height: 78%; aspect-ratio: 1474 / 2200; transform: translateX(-50%); pointer-events: auto; background: none; } .den-tableau img { width: 100%; height: 100%; opacity: 0; } /* the mouse on the portrait: the ticket comes in beside the frame, nothing drawn over his face */ .den-tableau .dt-tip { left: calc(100% + 18px); top: 26%; bottom: auto; max-width: 270px; transform: translate(-8px, 0) rotate(-1deg); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .den-tableau:hover .dt-tip, .den-tableau:focus-visible .dt-tip { opacity: 1; transform: translate(0, 0) rotate(-1deg); } .den-tableau:focus-visible { outline: none; } /* ══════════ La Salle, the whole lobby in one picture (assets/cinema-lobby-full.webp, 3840 × 2160, generated empty; concept/asset-prompts.md). The picture fills the height of the screen; the room's name goes on the enamel plate, the eight posters into the eight small frames, the film's poster into the lit showcase, its title and label onto the board. Every surface is measured on the image in pixels and set here in % of it, so the layout holds at any size. ══════════ */ @media (min-width: 761px) { #cinema { background: radial-gradient(ellipse at 50% 45%, #2a0e0b, #0d0605 70%); } #cinema .curtain, #cinema .seats, #cinema .beam { display: none; } .salle { --h: 100vh; --h: 100dvh; inset: auto; left: 50%; top: 0; width: calc(var(--h) * 1.7778); height: var(--h); transform: translateX(-50%); display: block; padding: 0; background: url('../assets/cinema-lobby-full.webp') center / 100% 100% no-repeat; } .salle > *, .salle-frame, .salle-wall { position: absolute; } .salle-frame, .salle-wall { display: contents; } /* the enamel plate: 1344–2496 × 137–281 px */ #cinema .room-head { position: absolute; left: 35%; top: 6.34%; width: 30%; height: 6.67%; justify-content: center; gap: 1.6%; } #cinema .room-head i { display: none; } #cinema .room-title { font-size: calc(var(--h) * .046); padding-left: 0; color: #F3DDB0; text-shadow: 0 0 calc(var(--h) * .02) rgba(255,190,110,.35); } #cinema .rh-ar { font-size: calc(var(--h) * .034); color: #E9A64E; } /* the eight small frames: interiors 205 × 293 px from x = 657, every 330.4 px, at y = 418 */ .salle-prog-wrap { display: contents; } .salle-prog { position: absolute; left: 17.11%; top: 19.35%; width: 65.57%; height: 13.56%; display: grid; grid-template-columns: repeat(8, 8.14%); column-gap: 4.98%; gap: 0 4.98%; } .salle-prog li { height: 100%; } .salle-prog button { width: 100%; height: 100%; aspect-ratio: auto; outline: 0; box-shadow: inset 0 0 12px rgba(0,0,0,.7); opacity: .72; transition: opacity .25s, filter .25s; } .salle-prog button .sp-pic { position: absolute; inset: 0; background-position: center; background-size: cover; } .salle-prog button:hover, .salle-prog button:focus-visible { transform: none; opacity: 1; } /* the chosen film stays in its case, it only lights up */ .salle-prog button.on { transform: none; opacity: 1; outline: 0; filter: brightness(1.12); box-shadow: inset 0 0 0 2px rgba(255,215,150,.75), 0 0 calc(var(--h) * .03) rgba(255,200,120,.35); } /* « Ce soir » and the keys hint, on the wall either side of the row */ .sp-head { position: absolute; left: 7.6%; top: 22%; flex-direction: column; align-items: flex-start; gap: 6px; } .sp-hint { position: absolute; left: 84.2%; top: 25%; flex-wrap: wrap; width: 10%; color: rgba(243,221,176,.6); } /* the showcase: 920–1583 × 935–1752 px; the poster stands in it whole, on black */ .salle-frame .salle-screen { position: absolute; left: 23.96%; top: 43.3%; width: 17.27%; height: 37.8%; aspect-ratio: auto; background: #050403; box-shadow: inset 0 0 30px rgba(0,0,0,.7); } .salle-frame .salle-screen:hover, .salle-frame .salle-screen:focus-visible { transform: none; box-shadow: inset 0 0 30px rgba(0,0,0,.7); } .salle-frame .salle-screen .scr-img { background-size: contain; background-repeat: no-repeat; filter: brightness(.94); } .salle-frame .salle-screen:hover .scr-img { filter: brightness(1.03); transform: scale(1.015); } /* the board: 1945–3095 × 947–1685 px */ .salle-frame .salle-info { position: absolute; left: 50.65%; top: 43.84%; width: 29.95%; height: 34.17%; padding: 2.2% 2.8%; align-content: center; gap: calc(var(--h) * .012); margin: 0; } .salle-frame .si-title { font-size: calc(var(--h) * .062); color: #F6EBD6; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .salle-frame .si-k { font-size: calc(var(--h) * .015); color: #E9B872; } .salle-frame .si-log { font-size: calc(var(--h) * .022); color: rgba(246,235,214,.82); } .salle-frame .si-row { gap: calc(var(--h) * .018); } .salle-frame .si-go { font-size: calc(var(--h) * .016); } } /* La Ville · parked, not deleted (26 Oct.): his neon name (HICHAM LASRI · هشام العسري), the tagline « cinéaste · écrivain · casablanca — depuis 1977 » and the « Qui est-il ? » sticker stay in the markup (index.html, .city-name) until we choose a better place */ #city .city-name { display: none; } /* his name on the print, in the empty dark above his head: the outlined letters of the old neon, now ink on the photograph, the Arabic beneath in the room's amber; sized to the frame, so it scales with the room */ .dp-frame { container-type: inline-size; } .dp-name { position: absolute; z-index: 1; left: 12.2%; right: 12.1%; top: 10.5%; display: grid; justify-items: center; gap: .6cqi; pointer-events: none; text-align: center; } .dp-name b { font-family: var(--f-display); font-weight: 900; font-size: 11.5cqi; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: rgba(242,228,204,.08); -webkit-text-stroke: .32cqi rgba(242,228,204,.88); } .dp-name i { font-style: normal; font-family: var(--f-ar-display); font-size: 6.4cqi; line-height: 1; color: #D9A35B; } @media (max-width: 1000px) { /* no room beside the frame: the ticket rises over the bottom of the print */ .den-tableau .dt-tip { left: 50%; top: auto; bottom: 12%; transform: translate(-50%, 8px) rotate(-1deg); } .den-tableau:hover .dt-tip, .den-tableau:focus-visible .dt-tip { transform: translate(-50%, 0) rotate(-1deg); } } @media (max-width: 760px) { .dp-frame, .den-tableau { top: 12%; height: 58%; } } /* the portrait fits a phone */ /* La Salle on a phone: the same lobby as on a computer, behind the stacked poster and title; no curtains or seats */ @media (max-width: 760px) { #cinema .curtain, #cinema .seats, #cinema .beam { display: none; } #cinema { background: linear-gradient(180deg, rgba(14,6,5,.5), rgba(14,6,5,.12) 32%, rgba(14,6,5,.62)), url('../assets/cinema-lobby-phone.webp') 50% 0 / cover no-repeat, #120807; } .salle-screen { box-shadow: 0 0 0 1px rgba(255,240,210,.22), 0 0 0 8px #2a1a10, 0 0 0 9px rgba(233,184,114,.45), 0 24px 50px rgba(0,0,0,.8); } } /* no TV interference over the picture: the tracking band and the scanlines are off */ .tracking, .scanlines { display: none; } /* La Ville on a phone: explicit exploration controls, with the room still taking centre stage. */ .city-explore { display: none; } @media (hover: none), (pointer: coarse) { #city { touch-action: pan-y pinch-zoom; } #city .montage.sharp { mask-image: none; -webkit-mask-image: none; opacity: .55; } #city .den-mark { min-width: 44px; min-height: 44px; border-color: rgba(244,233,200,.24); border-radius: 5px; } #city .den-mark::after { content: '+'; position: absolute; right: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #20160e; color: #f4e6cc; font: 16px/20px var(--f-mono); } #city .den-tip { display: none; } .city-explore { position: absolute; z-index: 6; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom)); display: grid; gap: 9px; max-width: 380px; margin: 0 auto; text-align: center; } .city-explore-hint { font: 12px/1.4 var(--f-serif); color: #e4cfb0; text-shadow: 0 2px 8px #000; min-height: 2.8em; display: grid; align-items: end; } #city .city-scroll:focus-visible { outline: 2px solid #e9b872; outline-offset: 3px; } #city .city-scroll { bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 20px; animation: none; opacity: 1; font-size: 16px; } #city .city-scroll .cs-wheel { display: none; } #city .subtitle-track { bottom: calc(194px + env(safe-area-inset-bottom)); padding: 0 20px; } #city .st-text { font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } body.menu-open #city .city-explore, body.menu-open #city .subtitle-track { visibility: hidden; pointer-events: none; } body.menu-open #city .city-scroll { opacity: 1; pointer-events: auto; } } @media (max-width: 760px) { #city .dp-frame, #city .den-tableau { top: 11%; height: min(53%, calc((100vw - 64px) * 2200 / 1474)); } body.menu-open #city .city-scroll { bottom: calc(128px + env(safe-area-inset-bottom)); } } @media (hover: none) and (min-width: 761px) { body.menu-open #city .city-scroll { bottom: calc(110px + env(safe-area-inset-bottom)); } } @media (max-width: 760px) and (min-height: 501px) { #city .dp-frame, #city .den-tableau { height: min(53%, calc((100vw - 64px) * 2200 / 1474), calc(87% - 280px)); } } @media (hover: none) and (max-height: 500px) { .city-explore { left: auto; width: 260px; bottom: calc(70px + env(safe-area-inset-bottom)); } #city .subtitle-track { bottom: calc(80px + env(safe-area-inset-bottom)); padding-right: 300px; } #city .st-text { font-size: 14px; } } /* phones: the details stacked, one to a line, so nothing wraps unevenly */ @media (max-width: 760px) { .t-ar { margin-top: .28em; } .t-meta { flex-direction: column; gap: 2px; margin-top: 10px; line-height: 1.3; } } /* phones: the trailer plays in its own horizontal shape, full width, centred, like a video watched upright */ @media (max-width: 760px) { .teaser-frame { width: 100vw; height: 56.25vw; } } /* phones: the exit is a small sign in the corner; the trailer's credit line gets its own row above the buttons */ @media (max-width: 760px) { .film-close:not(.fc-plain) { top: 10px; right: 10px; padding: 6px; column-gap: 0; } .film-close:not(.fc-plain) .fc-man { width: 18px; height: 18px; } .film-close:not(.fc-plain) :is(.fc-txt, .fc-to) { max-width: 0; opacity: 0; } .teaser-ui { top: calc(50% + 28.125vw + 14px); bottom: auto; height: auto; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; text-align: center; } .teaser-ui > .mono { font-size: 10px; line-height: 1.5; } .teaser-ui .t-btn { height: 34px; padding: 0 13px; gap: 8px; font-size: 13px; } .teaser-ui .t-sound { padding-left: 16px; } .teaser-ui .t-skip { padding-left: 13px; } } /* phones · La Ville reads like the other channels: the remote always there at the foot, no « Les chaînes » cue; the exploring hint just above it, in the book face, like the site's other floating lines */ @media (max-width: 760px) { #city .city-scroll { display: none; } .city-explore { bottom: calc(64px + env(safe-area-inset-bottom)); } .city-explore-hint { font: italic 15px/1.35 var(--f-serif); color: #f0dfc2; min-height: 0; } #city .subtitle-track { bottom: calc(120px + env(safe-area-inset-bottom)); } body.menu-open #city .city-explore, body.menu-open #city .subtitle-track { visibility: visible; pointer-events: auto; } } /* ── phones: « Le programme » and « À suivre » take the remote's place (computers keep the remote) ── */ .pn-open, .pn-guide, .pn-next { display: none; } @media (max-width: 760px) { #remote { display: none !important; } /* the button: where you are, and the way to everything else */ /* a stub torn from the evening's programme, hanging off the edge of the screen: the channel number, its name, and past the perforation the way into the programme */ .pn-open { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 0; z-index: 46; display: inline-grid; grid-template: auto auto / auto 42px; align-content: center; height: 38px; padding: 0; background: #F4E9D0; color: #1a120a; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); -webkit-mask: radial-gradient(circle 4px at calc(100% - 42px) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 4px at calc(100% - 42px) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 4px at calc(100% - 42px) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 4px at calc(100% - 42px) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; } .pn-open::after { content: ''; position: absolute; inset: -6px 0; } body.in-screening .pn-open, body:not(.is-on) .pn-open { display: none; } .pn-ch { grid-area: 1 / 1; justify-self: center; align-self: end; color: #E8352B; font: 900 22px/.95 var(--f-display); } .pn-name { grid-area: 2 / 1; justify-self: center; align-self: start; overflow: hidden; max-width: 116px; padding: 0 10px; white-space: nowrap; text-overflow: ellipsis; font: italic 500 11px/1.1 var(--f-serif); } .pn-bars { grid-area: 1 / 2 / 3 / 3; align-self: stretch; display: grid; align-content: center; justify-items: start; gap: 4px; width: 42px; padding-left: 12px; border-left: 2px dotted rgba(26,18,10,.4); } .pn-bars i { width: 18px; height: 2.5px; background: currentColor; } .pn-bars i:nth-child(2) { width: 12px; } .pn-bars i:nth-child(3) { width: 15px; } #signal .timecode { display: none; } /* the guide: the evening's programme on one screen, no scrolling — his life first in red, then the channels, each with its number lit in its own colour; it comes on like a set: the dark, then the lines one after another */ .pn-guide { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); background: radial-gradient(120% 70% at 50% 0%, #1d1611, #0b0a09 60%); color: #ECE7DE; opacity: 0; transition: opacity .22s ease; } .pn-guide[hidden] { display: none; } .pn-guide.on { opacity: 1; } .pn-head { position: relative; padding: 2px 52px 10px 2px; transform: translateY(-10px); opacity: 0; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; } .pn-guide.on .pn-head { transform: none; opacity: 1; } .pn-title { margin: 0; font: 900 clamp(34px, 6.4vh, 50px)/.86 var(--f-display); font: 900 clamp(34px, 6.4dvh, 50px)/.86 var(--f-display); text-transform: uppercase; } .pn-k { margin: 4px 0 0; font: italic 14px var(--f-serif); color: #a89a88; } .pn-close { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 1.5px solid rgba(236,231,222,.3); } .pn-close i { position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; background: #ECE7DE; transform: rotate(45deg); } .pn-close i + i { transform: rotate(-45deg); } .pn-list { flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; } .pn-list > * { opacity: 0; transform: translateX(26px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.06s + var(--i) * .035s); } .pn-guide.on .pn-list > * { opacity: 1; transform: none; } .pn-group { display: flex; align-items: flex-end; gap: 8px; padding: 0 2px 2px; font: italic 14px var(--f-serif); color: #a89a88; } .pn-group::after { content: ''; flex: 1; height: 1px; margin-bottom: 6px; background: rgba(236,231,222,.14); } .pn-li { display: flex; min-height: 0; } .pn-row { flex: 1; display: grid; grid-template-columns: clamp(38px, 6.4vh, 50px) minmax(0, 1fr) auto; grid-template-columns: clamp(38px, 6.4dvh, 50px) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 0; padding: 0 12px 0 0; text-align: left; color: inherit; background: rgba(236,231,222,.04); border: 1px solid rgba(236,231,222,.08); } .pn-row:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; } /* the number, a block in the channel's colour that lights up like a screen coming on */ .pn-n { align-self: stretch; display: grid; place-items: center; background: var(--c); color: #0b0a09; font: 900 clamp(22px, 4vh, 32px)/1 var(--f-display); font: 900 clamp(22px, 4dvh, 32px)/1 var(--f-display); transform: scaleY(.08); transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(.18s + var(--i) * .035s); } .pn-guide.on .pn-n { transform: none; } .pn-txt { display: grid; gap: 1px; min-width: 0; } .pn-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 clamp(16px, 2.7vh, 22px)/1.05 var(--f-display); font: 800 clamp(16px, 2.7dvh, 22px)/1.05 var(--f-display); text-transform: uppercase; } .pn-nm i { font: normal .78em var(--f-ar-display); color: #a89a88; text-transform: none; margin-left: 4px; } .pn-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: italic clamp(12px, 1.85vh, 15px)/1.25 var(--f-serif); font: italic clamp(12px, 1.85dvh, 15px)/1.25 var(--f-serif); color: #cfc3b2; } .pn-end { display: grid; justify-items: end; } .pn-go { color: var(--c); font: 900 18px/1 var(--f-display); } .pn-now { display: none; padding: 2px 6px; background: var(--c); color: #0b0a09; font: italic 11px/1.2 var(--f-serif); white-space: nowrap; } .pn-row.on { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); } .pn-row.on .pn-now { display: inline-block; } .pn-row.on .pn-go { display: none; } /* his life, first, as the remote's red REC key */ .pn-feat { grid-row: span 1; } .pn-feat .pn-row { background: linear-gradient(160deg, #FF5340, #C81F17); border: 0; color: #0b0a09; } .pn-feat .pn-n { background: rgba(0,0,0,.18); color: #fff; } .pn-rec { display: flex; align-items: center; gap: 4px; font: 800 11px var(--f-display); letter-spacing: .02em; } .pn-rec i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: rec-blink 1.1s steps(1) infinite; } .pn-feat .pn-nm { font-size: clamp(17px, 2.9vh, 23px); font-size: clamp(17px, 2.9dvh, 23px); } .pn-feat .pn-nm i, .pn-feat .pn-line { color: rgba(11,10,9,.75); } .pn-feat .pn-go { color: #0b0a09; } .pn-feat .pn-now { background: #0b0a09; color: #fff; } /* the sound, small, in the corner */ .pn-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; } .pn-sound { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border: 1px solid rgba(236,231,222,.25); color: #cfc3b2; font: italic 13px var(--f-serif); } .pn-spk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .pn-spk .spk { fill: currentColor; stroke: none; } .pn-spk .x { display: none; stroke: #E8352B; stroke-width: 2; } .pn-sound.muted .pn-spk .wv { display: none; } .pn-sound.muted .pn-spk .x { display: inline; } @media (prefers-reduced-motion: reduce) { .pn-list > *, .pn-head, .pn-n { transform: none !important; transition: opacity .2s; } } /* « À suivre »: the next episode, a card at the foot that comes and goes */ .pn-next { position: fixed; left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) 44px; background: #F4EFE6; color: #111; box-shadow: 0 14px 30px rgba(0,0,0,.5); transform: translateY(calc(100% + 30px)); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .pn-next[hidden] { display: none; } .pn-next.in { transform: none; } body.in-screening .pn-next { display: none; } .pn-go { display: grid; gap: 1px; padding: 10px 12px 11px; text-align: left; color: inherit; } .pn-nk { font: 800 11px/1.2 var(--f-display); text-transform: uppercase; color: #E8352B; } .pn-nt { font: 900 22px/1 var(--f-display); text-transform: uppercase; } .pn-nd { font: italic 14px/1.25 var(--f-serif); color: #4a4640; } .pn-x { border-left: 1px solid rgba(0,0,0,.12); color: #4a4640; font: 300 28px/1 var(--f-serif); } } @media (max-width: 760px) { /* the two group names stay small; the channels share the rest of the height */ .pn-list { display: flex; flex-direction: column; } .pn-list > .pn-li { flex: 1 1 0; } .pn-list > .pn-group { flex: none; padding-top: 8px; } } /* La Ville on a touch screen: an object's ticket opens as a card at the foot, « Entrer » to go in */ .den-card { display: none; } @media (hover: none), (pointer: coarse) { .den-card { position: absolute; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 8; display: grid; gap: 10px; padding: 14px 16px 14px 22px; background: #F4E9D0; color: #1a120a; box-shadow: 0 16px 34px rgba(0,0,0,.55); transform: translateY(calc(100% + 24px)) rotate(-1deg); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .den-card[hidden] { display: none; } .den-card.in { transform: rotate(-.6deg); } .den-card::before { content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px; border-left: 2px dotted rgba(26,18,10,.35); } .dc-ticket { display: grid; gap: 3px; } .dc-ticket .ct-k { font-size: 11px; color: #8a5a2a; } .dc-ticket b { font: 900 24px/.95 var(--f-display); text-transform: uppercase; } .dc-ticket .ct-y { font-size: 11px; color: #6a5a48; } .dc-ticket small { font: 15px/1.35 var(--f-serif); color: rgba(26,18,10,.85); } .dc-acts { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; } .dc-go { padding: 11px 14px; background: #E8352B; color: #fff; font: 800 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; } .dc-x { border: 1.5px solid rgba(26,18,10,.3); color: #1a120a; font: 300 26px/1 var(--f-serif); } body:not([data-ch="0"]) .den-card { display: none; } } /* the red bear's card: his accounts. On a computer too (other objects only use the card on touch), as a ticket at the lower right; on a phone, the same ticket at the foot */ .den-card.is-contact { position: absolute; z-index: 8; display: grid; gap: 12px; padding: 16px 18px 16px 26px; background: #F4E9D0; color: #1a120a; box-shadow: 0 16px 34px rgba(0,0,0,.55); right: 32px; bottom: 32px; left: auto; width: min(380px, calc(100% - 24px)); transform: translateY(calc(100% + 48px)) rotate(-1deg); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .den-card.is-contact[hidden] { display: none; } .den-card.is-contact.in { transform: rotate(-.6deg); } .den-card.is-contact::before { content: ''; position: absolute; left: 12px; top: 12px; bottom: 12px; border-left: 2px dotted rgba(26,18,10,.35); } .den-card.is-contact .dc-ticket { display: grid; gap: 3px; padding-right: 40px; } .den-card.is-contact .dc-ticket .ct-k { font-size: 11px; color: #8a5a2a; } .den-card.is-contact .dc-ticket b { font: 900 26px/.95 var(--f-display); text-transform: uppercase; color: #E8352B; } .den-card.is-contact .dc-ticket small { font: 15px/1.35 var(--f-serif); color: rgba(26,18,10,.85); } .dc-links { list-style: none; margin: 0; padding: 0; display: grid; } .dc-links li + li { border-top: 1px dashed rgba(26,18,10,.3); } .dc-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 0; color: inherit; text-decoration: none; } .dc-links .dl-k { font: 800 12px/1.2 var(--f-mono, monospace); color: #8a5a2a; } .dc-links .dl-h { grid-column: 1; font: 900 21px/1.05 var(--f-display); text-transform: uppercase; } .dc-links .dl-n { grid-column: 1; font: italic 14px/1.3 var(--f-serif); color: rgba(26,18,10,.72); } .dc-links .dl-go { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 700 22px/1 var(--f-display); color: #E8352B; transition: transform .15s; } .dc-links a:hover .dl-h, .dc-links a:focus-visible .dl-h { color: #E8352B; } .dc-links a:hover .dl-go, .dc-links a:focus-visible .dl-go { transform: translate(3px, -3px); } .dc-links a:focus-visible { outline: 2px solid #E8352B; outline-offset: 2px; } .den-card.is-contact .dc-x-abs { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 1.5px solid rgba(26,18,10,.3); color: #1a120a; font: 300 24px/1 var(--f-serif); } body:not([data-ch="0"]) .den-card.is-contact { display: none; } @media (hover: none), (pointer: coarse), (max-width: 600px) { .den-card.is-contact { right: 12px; left: 12px; bottom: max(14px, env(safe-area-inset-bottom)); width: auto; } } /* phones: his portrait, larger — the room has more height now that the remote is gone */ @media (max-width: 760px) { /* the frame hangs clear of the title and the programme stub above it */ #city .dp-frame, #city .den-tableau { top: calc(max(10px, env(safe-area-inset-top)) + 72px); height: min(62%, calc((100vw - 36px) * 2200 / 1474)); } } @media (max-width: 760px) and (min-height: 501px) { #city .dp-frame, #city .den-tableau { height: min(62%, calc((100vw - 36px) * 2200 / 1474), calc(92% - 200px)); } } /* phones · in the biography the guide button replaces « Fermer »: it is the way to any channel, and to the sound */ @media (max-width: 760px) { body.in-bio .pn-open { display: inline-grid; } body.in-bio #screening .film-close.fc-plain { display: none; } } /* the pictures can't be dragged away, and a long press on a phone does not offer « save image » */ img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } /* the language switch: the other language, small, in the corner of the picture */ .lang-sw { font: 800 15px/1 var(--f-display); letter-spacing: .02em; color: rgba(244,234,216,.82); text-decoration: none; padding: 10px; } .lang-sw:hover, .lang-sw:focus-visible { color: #ff5340; outline: none; } .pw-lang { position: absolute !important; top: clamp(16px, 2.6vh, 26px); top: clamp(16px, 2.6dvh, 26px); right: clamp(24px, 3.6vw, 56px); z-index: 2 !important; } .rc-lang { display: grid; place-items: center; align-self: stretch; min-width: 40px; padding: 0 10px; background: rgba(14,12,10,.82); border: 1px solid rgba(236,231,222,.12); font-size: 15px; pointer-events: auto; } /* the channel's name is the way home */ .ident { color: inherit; text-decoration: none; pointer-events: auto; } .ident:hover .ident-latin, .ident:focus-visible .ident-latin { color: #ff5340; } .ident:focus-visible { outline: none; } body.in-screening .ident { pointer-events: none; } /* phones · La Salle fits the screen, whatever the browser's bars leave of it: the poster gives way so the title and the button stay in view; the strip runs from edge to edge; the channel number is already on the stub, top right */ @media (max-width: 760px) { #signal .osd { display: none; } .salle { --case-h: 54px; --pw: clamp(128px, min(66vw, calc((100vh - 462px) * .6667)), 270px); --pw: clamp(128px, min(66vw, calc((100dvh - 462px) * .6667)), 270px); row-gap: 8px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr); overflow-x: clip; overscroll-behavior: contain; } @supports (height: 100dvh) { .salle { --pw: clamp(128px, min(66vw, calc((100dvh - 462px) * .6667)), 270px); } } .salle-prog-wrap { width: 100vw; margin-inline: -16px; gap: 6px; padding-bottom: 4px; } .salle-prog-wrap::before { left: 0; right: 0; } .salle-prog { justify-self: stretch; width: 100%; max-width: 100%; min-width: 0; justify-content: safe center; padding: 6px 16px 10px; overflow: auto hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; } .salle-prog::-webkit-scrollbar { display: none; } .salle-prog li { flex: none; } .salle-frame { width: 100%; } .salle-frame .salle-screen { margin-inline: auto; touch-action: pan-y; } .salle-frame .salle-info { width: 100%; margin-top: 16px; gap: 6px; } } /* a small phone held sideways: the poster and its words side by side */ @media (max-width: 760px) and (max-height: 500px) { .salle { --case-h: 42px; --pw: calc((100vh - 136px) * .6667); --pw: calc((100dvh - 136px) * .6667); padding-top: 46px; } #cinema .room-head, .sp-head { display: none; } .salle-prog { padding: 2px 16px 6px; } .salle-frame .salle-screen { margin-inline: 0; } .salle-frame .salle-info { width: auto; } .salle-frame, .salle-wall { width: auto; } .salle-wall { display: grid; grid-template-columns: var(--pw) minmax(0, 300px); column-gap: 24px; align-items: center; } .salle-frame .salle-info { grid-column: 2; grid-row: 1; margin-top: 0; } } /* ── Salle 2 · Les courts: a lit sign at the end of the red wall, and the smaller hall it opens ── */ .courts-sign { position: absolute; right: clamp(56px, 6.5vw, 120px); top: 44%; z-index: 7; display: grid; justify-items: start; gap: 3px; width: clamp(150px, 11vw, 180px); box-sizing: border-box; padding: 14px 16px 12px; text-align: left; cursor: pointer; color: #f4ead8; background: linear-gradient(180deg, #1c1310, #0e0907); border: 1px solid rgba(233,184,114,.45); box-shadow: inset 0 0 0 3px #0b0705, inset 0 0 0 4px rgba(233,184,114,.25), 0 18px 30px -12px rgba(0,0,0,.8); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; } .courts-sign .cs-lamp { position: absolute; left: 50%; top: -14px; width: 56px; height: 8px; margin-left: -28px; border-radius: 0 0 4px 4px; background: linear-gradient(#c9a25a, #7a5a24); box-shadow: 0 12px 26px 6px rgba(255,196,110,.22); } .courts-sign .cs-k { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #e9b872; } .courts-sign b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 2.2vw, 34px); line-height: .9; color: #f8e3b8; text-shadow: 0 0 14px rgba(255,190,100,.35); } .courts-sign .cs-ar { font-family: var(--f-ar-display); font-size: 16px; color: #e9b872; } .courts-sign .cs-go { margin-top: 6px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: rgba(244,234,216,.7); } .courts-sign .cs-go i { display: inline-block; font-style: normal; color: #e9b872; transition: transform .3s; } .courts-sign:hover, .courts-sign:focus-visible { transform: translateY(-3px); outline: none; box-shadow: inset 0 0 0 3px #0b0705, inset 0 0 0 4px rgba(233,184,114,.6), 0 24px 36px -14px rgba(0,0,0,.85), 0 0 30px rgba(255,190,100,.18); } .courts-sign:hover .cs-go i, .courts-sign:focus-visible .cs-go i { transform: translateX(5px); } #cinema.courts-open .salle, #cinema.courts-open .beam { visibility: hidden; } .courts { position: absolute; inset: 0; z-index: 30; overflow-y: auto; display: grid; align-content: start; gap: clamp(14px, 2.4vh, 26px); gap: clamp(14px, 2.4dvh, 26px); padding: clamp(64px, 9vh, 90px) clamp(16px, 5vw, 90px) 120px; padding: clamp(64px, 9dvh, 90px) clamp(16px, 5vw, 90px) 120px; color: #f4ead8; background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(120,18,18,.55), transparent 70%), linear-gradient(180deg, rgba(36,6,6,.97), rgba(14,4,4,.98)); } .courts.ct-in > * { animation: ct-up .5s cubic-bezier(.2,.8,.2,1) both; } .courts.ct-in > :nth-child(2) { animation-delay: .06s; } .courts.ct-in > :nth-child(3) { animation-delay: .12s; } @keyframes ct-up { from { opacity: 0; transform: translateY(14px); } } .ct-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; max-width: 1240px; width: 100%; margin: 0 auto; } .ct-back { padding: 9px 14px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #f4ead8; cursor: pointer; border: 1px solid rgba(233,184,114,.45); background: rgba(0,0,0,.3); } .ct-back:hover, .ct-back:focus-visible { background: #e9b872; color: #1a0e08; outline: none; } .ct-title { display: flex; align-items: baseline; gap: 14px; margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 64px); line-height: .9; color: #f8e3b8; text-shadow: 0 0 22px rgba(255,190,100,.25); } .ct-title .mono { font-size: 10px; letter-spacing: .12em; color: #e9b872; text-shadow: none; } .ct-title i { font-family: var(--f-ar-display); font-style: normal; font-size: .48em; color: #e9b872; text-shadow: none; } .ct-count { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(244,234,216,.6); } /* the programme: six small frames, gilt corners like the big hall's */ .ct-prog { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); max-width: 1240px; width: 100%; margin: 0 auto; } .ct-prog button { width: 100%; display: grid; gap: 6px; padding: 0; text-align: left; cursor: pointer; color: inherit; } .ct-pic { position: relative; display: grid; place-items: end start; aspect-ratio: 16 / 10; overflow: hidden; padding: 8px; background: #0b0705; border: 5px solid #2b1a10; box-shadow: inset 0 0 0 1px rgba(233,184,114,.35), 0 12px 20px -12px #000; } .ct-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.6); transition: filter .4s, transform .8s cubic-bezier(.2,.8,.2,1); } .ct-pic b { position: relative; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(13px, 1.1vw, 17px); line-height: 1; text-shadow: 0 1px 6px #000; } .ct-y { font-size: 10px; letter-spacing: .06em; color: rgba(244,234,216,.55); } .ct-prog button:hover .ct-pic img, .ct-prog button:focus-visible .ct-pic img { filter: grayscale(.1) brightness(.85); transform: scale(1.04); } .ct-prog button:focus-visible { outline: none; } .ct-prog button:focus-visible .ct-pic { border-color: #e9b872; } .ct-prog button.on .ct-pic { border-color: #8a6a2e; box-shadow: inset 0 0 0 1px #e9b872, 0 0 0 2px #e9b872, 0 16px 26px -12px #000; } .ct-prog button.on .ct-pic img { filter: none; } .ct-prog button.on .ct-y { color: #e9b872; } /* the screen and its plaque */ .ct-stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; max-width: 1240px; width: 100%; margin: 0 auto; } .ct-screen { position: relative; aspect-ratio: 16 / 9; background: #050505; border: 10px solid #2b1a10; box-shadow: inset 0 0 0 1px rgba(233,184,114,.4), 0 0 0 1px #000, 0 30px 50px -24px #000; } .ct-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ct-poster { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; cursor: pointer; overflow: hidden; background: #050505; } .ct-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: filter .4s, transform 1s cubic-bezier(.2,.8,.2,1); } .ct-ph { position: absolute; left: 18px; bottom: 14px; display: grid; text-align: left; } .ct-ph b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 3vw, 44px); line-height: .9; text-shadow: 0 2px 12px #000; } .ct-ph i { font-family: var(--f-ar-display); font-style: normal; font-size: 20px; color: #e9b872; } .ct-play { position: relative; display: grid; place-items: center; width: 70px; height: 70px; background: rgba(10,6,4,.8); border: 1px solid rgba(233,184,114,.6); transition: transform .3s; } .ct-play svg { width: 26px; height: 26px; fill: #f8e3b8; } .ct-poster:hover img, .ct-poster:focus-visible img { filter: brightness(.95); transform: scale(1.03); } .ct-poster:hover .ct-play, .ct-poster:focus-visible .ct-play { transform: scale(1.08); } .ct-card { display: grid; gap: 10px; padding: clamp(18px, 2vw, 28px); color: #f4ead8; background: linear-gradient(160deg, #4a3020, #2a190f); box-shadow: inset 0 0 0 1px rgba(233,184,114,.3), 0 26px 40px -24px #000; } .ct-k { margin: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #e9b872; } .ct-k span { text-transform: none; color: rgba(244,234,216,.6); } .ct-t { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3vw, 46px); line-height: .9; color: #f8e3b8; } .ct-t span { display: block; margin-top: 4px; font-family: var(--f-ar-display); font-weight: 400; font-size: .5em; color: #e9b872; } .ct-kind { margin: 0; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: rgba(244,234,216,.6); } .ct-line { margin: 4px 0 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; } .ct-text { margin: 0; font-family: var(--f-serif); font-size: 16px; line-height: 1.5; color: rgba(244,234,216,.85); } .ct-cr { display: grid; gap: 4px; margin: 4px 0 0; } .ct-cr div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 10px; padding-top: 5px; border-top: 1px solid rgba(233,184,114,.15); } .ct-cr dt { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: #e9b872; padding-top: 3px; } .ct-cr dd { margin: 0; font-family: var(--f-serif); font-size: 15px; line-height: 1.35; } .ct-note { margin: 2px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: rgba(244,234,216,.75); } .ct-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 6px 0 0; } .ct-watch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; cursor: pointer; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 16px; letter-spacing: .04em; color: #fff; background: linear-gradient(180deg, #c8261b, #8c140e); box-shadow: 0 6px 14px -6px rgba(0,0,0,.8); transition: transform .2s; } .ct-watch:hover, .ct-watch:focus-visible { transform: translateY(-2px); outline: none; } .ct-out { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #f4ead8; border-bottom: 1px solid rgba(233,184,114,.45); padding-bottom: 2px; } .ct-out:hover { border-color: #e9b872; } .ct-src { margin: 0; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: rgba(244,234,216,.5); } .ct-src a { color: inherit; } @media (max-width: 1000px) { .ct-stage { grid-template-columns: 1fr; } .ct-prog { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .courts-sign { position: relative; right: auto; top: auto; justify-self: center; width: auto; min-width: 230px; margin: 6px 0 8px; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; } .courts-sign .cs-go { grid-column: 1 / -1; } .courts { padding: 64px 14px 120px; } .ct-prog { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .ct-prog { flex: none; min-height: 132px; } .ct-prog li { flex: 0 0 44%; } .ct-pic { aspect-ratio: auto; height: 100px; } .ct-prog li { scroll-snap-align: start; } .ct-cr div { grid-template-columns: 1fr; gap: 0; } } @media (prefers-reduced-motion: reduce) { .courts.ct-in > * { animation: none; } .courts-sign, .ct-pic img, .ct-poster img { transition: none; } } /* ── Salle 2 fits one screen: head, programme, then the screen and its plaque share what is left ── */ @media (min-width: 761px) { .courts { overflow: hidden; height: 100%; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(10px, 1.8vh, 18px); gap: clamp(10px, 1.8dvh, 18px); padding: clamp(56px, 7vh, 72px) clamp(16px, 4vw, 70px) clamp(70px, 10vh, 96px); padding: clamp(56px, 7dvh, 72px) clamp(16px, 4vw, 70px) clamp(70px, 10dvh, 96px); background: linear-gradient(180deg, rgba(20,4,4,.55), rgba(10,3,3,.78)), url('../assets/courts-bg.webp') center / cover no-repeat, radial-gradient(ellipse 80% 60% at 50% 30%, rgba(120,18,18,.55), transparent 70%), #160404; } .ct-title { font-size: clamp(28px, 3.2vw, 46px); } .ct-pic { aspect-ratio: auto; height: clamp(56px, 9vh, 92px); height: clamp(56px, 9dvh, 92px); padding: 6px; border-width: 4px; } .ct-pic b { font-size: clamp(11px, .9vw, 14px); } .ct-y { font-size: 9px; } .ct-stage { min-height: 0; height: 100%; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); align-items: stretch; } .ct-screen { aspect-ratio: auto; height: 100%; max-height: 100%; border-width: 8px; } .ct-card { min-height: 0; overflow-y: auto; scrollbar-width: thin; gap: 7px; padding: clamp(14px, 1.6vw, 22px); align-content: start; } .ct-t { font-size: clamp(22px, 2.2vw, 32px); } .ct-line { font-size: clamp(15px, 1.15vw, 17px); margin: 0; } .ct-text { font-size: 14px; line-height: 1.45; } .ct-cr dd { font-size: 13px; } .ct-cr dt { font-size: 8px; } .ct-cr div { grid-template-columns: 8.5em minmax(0, 1fr); padding-top: 3px; } .ct-note { font-size: 13px; } .ct-watch { min-height: 38px; font-size: 14px; padding: 0 16px; } } /* Salle 2's small labels, set to be read: the hall's number as an enamel plate, the rest in the tall capitals */ .courts-sign .cs-k, .ct-badge { justify-self: start; padding: 3px 8px 2px; background: #e9b872; color: #1a0e08; font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; text-shadow: none; } .ct-title .ct-badge { align-self: center; font-size: 14px; } .courts-sign .cs-go { margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: #f4ead8; } .courts-sign .cs-go i { font-size: 17px; } /* the plaque's head: the short's number, big; its year and length as two clear tags */ .ct-k { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; } .ct-n { display: flex; align-items: baseline; gap: 4px; margin-right: 6px; font-family: var(--f-display); font-weight: 900; color: #e9b872; line-height: 1; } .ct-n b { font-size: 28px; } .ct-n small { font-size: 14px; color: rgba(244,234,216,.6); } .ct-f { padding: 3px 8px 2px; border: 1px solid rgba(233,184,114,.5); font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: #f4ead8; line-height: 1; } .ct-yn { margin: -2px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: rgba(244,234,216,.7); } .ct-yn::first-letter { text-transform: uppercase; } .ct-card .ct-n b { color: #e9b872; } .ct-card .ct-n small { color: rgba(244,234,216,.7); } .ct-card .ct-f { color: #f8e3b8; border-color: rgba(233,184,114,.6); } .ct-yn::first-letter { text-transform: none; } .ct-kind { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #e9b872; } .ct-back, .ct-count { font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; } .ct-count { color: rgba(244,234,216,.75); } /* ── Salle 2 on its own wall (assets/courts-bg.webp, 1672 × 941): the sign, the six frames, the screen and the brass plaque are in the picture; the hall's content is set into them, in % of the picture, as the cybercafé's screens are ── */ @media (min-width: 761px) { .courts { display: grid; place-items: center; padding: 0; overflow: hidden; background: #0d0606; } .courts.ct-in > * { animation: none; } .ct-room { position: relative; container-type: size; width: min(100%, calc(100vh * 1672 / 941)); width: min(100%, calc(100dvh * 1672 / 941)); aspect-ratio: 1672 / 941; background: url('../assets/courts-bg.webp') center / 100% 100% no-repeat; } .courts.ct-in .ct-room > * { animation: ct-up .5s cubic-bezier(.2,.8,.2,1) both; } .ct-room > * { position: absolute; margin: 0; max-width: none; } /* the sign */ .ct-head { display: contents; } .ct-title { position: absolute; left: 38.58%; top: 8.5%; width: 22.73%; height: 5.53%; justify-content: center; align-items: center; gap: .9cqw; font-size: 3.1cqh; line-height: 1; white-space: nowrap; } .ct-title .ct-badge { font-size: 1.3cqh; padding: .35cqh .6cqw .25cqh; } .ct-back { position: absolute; left: 1.8%; top: 7.2%; font-size: 1.5cqh; padding: .8cqh 1cqw; background: rgba(10,5,3,.7); } .ct-count { position: absolute; right: 1.8%; top: 8.4%; font-size: 1.45cqh; } /* the six frames */ .ct-prog { left: 5.5%; top: 21.36%; width: 89.17%; height: 12.54%; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 3.756%; gap: 0 3.756%; } .ct-prog li, .ct-prog button { height: 100%; } .ct-prog button { position: relative; display: block; } .ct-pic { position: absolute; inset: 0; height: auto; aspect-ratio: auto; border: 0; padding: .8cqh .7cqw; background: #050303; box-shadow: none; } .ct-pic b { font-size: 1.6cqh; } .ct-y { position: absolute; left: 0; top: calc(100% + 1.2cqh); font-size: 1.25cqh; } .ct-prog button.on .ct-pic { box-shadow: 0 0 0 .35cqh #e9b872, 0 0 2.4cqh rgba(255,190,100,.35); } .ct-prog button:focus-visible .ct-pic { box-shadow: 0 0 0 .35cqh #f8e3b8; } /* the screen */ .ct-stage { display: contents; } .ct-screen { position: absolute; left: 5.26%; top: 43.78%; width: 52.51%; height: 45.7%; aspect-ratio: auto; border: 0; box-shadow: none; background: #030202; } .ct-ph b { font-size: 4.4cqh; } .ct-play { width: 7cqh; height: 7cqh; } .ct-play svg { width: 2.6cqh; height: 2.6cqh; } /* the brass plaque */ .ct-card { left: 65.31%; top: 47.18%; width: 27.63%; height: 39.64%; padding: 0; background: none; box-shadow: none; gap: .7cqh; overflow-y: auto; scrollbar-width: none; text-shadow: 0 1px 0 rgba(0,0,0,.35); } .ct-card::-webkit-scrollbar { display: none; } .ct-n b { font-size: 3.1cqh; } .ct-n small { font-size: 1.5cqh; } .ct-f { font-size: 1.45cqh; padding: .3cqh .6cqw .2cqh; } .ct-yn { font-size: 1.45cqh; } .ct-t { font-size: 3.6cqh; } .ct-kind { font-size: 1.35cqh; } .ct-line { font-size: 1.75cqh; line-height: 1.3; } .ct-text { font-size: 1.5cqh; line-height: 1.4; } .ct-cr { gap: .2cqh; } .ct-cr div { grid-template-columns: 10.5em minmax(0, 1fr); padding-top: .35cqh; gap: .6cqw; } .ct-cr dt { font-size: 1.05cqh; } .ct-cr dd { font-size: 1.4cqh; } .ct-note { font-size: 1.4cqh; } .ct-acts { gap: .8cqh 1.2cqw; margin-top: .4cqh; } .ct-watch { min-height: 4cqh; font-size: 1.6cqh; padding: 0 1.4cqw; } .ct-out { font-size: 1.15cqh; } .ct-src { font-size: 1.05cqh; } } @media (min-width: 761px) { .courts { grid-template-rows: minmax(0, 1fr); align-content: center; justify-content: center; height: 100%; } .ct-card { position: absolute; gap: .5cqh; } .ct-k { gap: .6cqw; } .ct-n b { font-size: 2.7cqh; } .ct-t { font-size: 3.1cqh; } .ct-line { font-size: 1.55cqh; } .ct-text { font-size: 1.32cqh; line-height: 1.35; } .ct-cr dd { font-size: 1.25cqh; line-height: 1.25; } .ct-cr div { padding-top: .2cqh; } .ct-note { font-size: 1.25cqh; line-height: 1.3; } .ct-watch { min-height: 3.6cqh; font-size: 1.45cqh; } } @media (min-width: 761px) { .courts { grid-template-columns: minmax(0, 1fr); justify-content: stretch; place-items: center; } } /* ── the two halls' signs: the same lit board in the same place, top right; one leads to Salle 2, the other back ── */ @media (min-width: 761px) { .hall-sign, .courts .ct-back.hall-sign { position: absolute; right: clamp(16px, 2.2vw, 40px); left: auto; top: clamp(58px, 7.5vh, 76px); top: clamp(58px, 7.5dvh, 76px); bottom: auto; z-index: 40; display: grid; justify-items: start; gap: 2px; width: clamp(140px, 10.5vw, 168px); padding: 10px 12px 9px; margin: 0; text-align: left; cursor: pointer; color: #f4ead8; background: linear-gradient(180deg, #1c1310, #0e0907); border: 1px solid rgba(233,184,114,.45); box-shadow: inset 0 0 0 3px #0b0705, inset 0 0 0 4px rgba(233,184,114,.25), 0 14px 24px -10px rgba(0,0,0,.8); font: inherit; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; } .hall-sign .cs-lamp { top: -10px; width: 46px; height: 6px; margin-left: -23px; } .hall-sign .cs-k { font-size: 11px; padding: 2px 6px 1px; } .hall-sign b { font-size: clamp(19px, 1.5vw, 24px); line-height: .92; } .hall-sign .cs-ar { font-size: 13px; line-height: 1.3; } .hall-sign .cs-go { margin-top: 3px; font-size: 13px; } .courts .ct-back.hall-sign:hover, .hall-sign:hover, .hall-sign:focus-visible { transform: translateY(-2px); background: linear-gradient(180deg, #1c1310, #0e0907); color: #f4ead8; outline: none; box-shadow: inset 0 0 0 3px #0b0705, inset 0 0 0 4px rgba(233,184,114,.6), 0 18px 28px -12px rgba(0,0,0,.85), 0 0 26px rgba(255,190,100,.16); } .ct-room .ct-count { left: 1.8%; right: auto; top: 8.4%; } } @media (max-width: 760px) { .courts .ct-back.hall-sign { position: static; justify-self: start; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding: 8px 12px; color: #f4ead8; background: linear-gradient(180deg, #1c1310, #0e0907); border: 1px solid rgba(233,184,114,.45); } .courts .ct-back .cs-lamp, .courts .ct-back .cs-ar { display: none; } .courts .ct-back b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 18px; } .courts .ct-back .cs-go { grid-column: 1 / -1; font-family: var(--f-display); font-weight: 700; font-size: 13px; text-transform: uppercase; } .courts .ct-back .cs-k { padding: 2px 6px 1px; background: #e9b872; color: #1a0e08; font-family: var(--f-display); font-weight: 800; font-size: 12px; text-transform: uppercase; } } /* the screen's button: « Lecture » plays here, « Sur Drive ↗︎ » opens the film on Drive */ .ct-poster { text-decoration: none; color: inherit; } .ct-play { width: auto !important; min-width: 7cqh; height: auto !important; padding: 1.4cqh 1.6cqw; gap: .8cqh; display: grid; justify-items: center; } .ct-play small { font-family: var(--f-display); font-weight: 700; font-size: 1.5cqh; letter-spacing: .06em; text-transform: uppercase; color: #f8e3b8; } .ct-watch { text-decoration: none; } @media (max-width: 760px) { .ct-play { min-width: 64px; padding: 12px 14px; } .ct-play small { font-size: 12px; } } /* one board on a computer (.hall-switch, in front of both halls); the in-page sign and back button serve the phone */ @media (min-width: 761px) { #cinema .courts-sign, .courts .ct-back.hall-sign { display: none; } .hall-switch { width: max-content; min-width: 150px; } .hall-switch b { white-space: nowrap; } } @media (max-width: 760px) { .hall-switch { display: none; } } .hall-switch .cs-lamp { position: absolute; left: 50%; border-radius: 0 0 4px 4px; background: linear-gradient(#c9a25a, #7a5a24); box-shadow: 0 10px 22px 5px rgba(255,196,110,.22); } .hall-switch .cs-k { justify-self: start; background: #e9b872; color: #1a0e08; font-family: var(--f-display); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; } .hall-switch b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; color: #f8e3b8; text-shadow: 0 0 14px rgba(255,190,100,.35); } .hall-switch .cs-ar { font-family: var(--f-ar-display); color: #e9b872; } .hall-switch .cs-go { font-family: var(--f-display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f4ead8; } .hall-switch .cs-go i { font-style: normal; color: #e9b872; display: inline-block; transition: transform .3s; } .hall-switch:hover .cs-go i { transform: translateX(4px); } /* in Salle 2 the way back hangs top left; the hall's count moves to the right */ @media (min-width: 761px) { #cinema.courts-open .hall-switch { right: auto; left: clamp(16px, 2.2vw, 40px); } .ct-room .ct-count { left: auto; right: 1.8%; } } /* the corridor between the two halls: the lights go down while one room slides away and the other comes up */ .hall-pass { position: absolute; inset: 0; z-index: 35; background: #050202; opacity: 0; pointer-events: none; } /* the halls' board, a small lit plate on one line under the station's corner: Salle 1 shows the way on to the right, Salle 2 the way back to the left, both clear of the frames */ @media (min-width: 761px) { .hall-switch { display: flex; align-items: center; gap: 10px; width: auto; min-width: 0; padding: 7px 14px 6px; } .hall-switch .cs-lamp { top: -8px; width: 40px; height: 5px; margin-left: -20px; } .hall-switch .cs-k { font-size: 11px; padding: 2px 6px 1px; } .hall-switch b { font-size: clamp(16px, 1.2vw, 20px); line-height: 1; } .hall-switch .cs-ar { font-size: 13px; line-height: 1; } .hall-switch .cs-go { display: none; } .hall-switch::after { content: '→'; font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1; color: #e9b872; transition: transform .3s; } .hall-switch:hover::after, .hall-switch:focus-visible::after { transform: translateX(4px); } #cinema.courts-open .hall-switch::after { content: '←'; order: -1; } #cinema.courts-open .hall-switch:hover::after, #cinema.courts-open .hall-switch:focus-visible::after { transform: translateX(-4px); } } /* Salle 2, easier to read: the sign's tag and Arabic, and the brass plaque's text, a size up */ @media (min-width: 761px) { .ct-title { gap: .7cqw; } .ct-title .ct-badge { font-size: 1.75cqh; padding: .4cqh .55cqw .3cqh; } .ct-title i { font-size: 2.3cqh; } /* at this size a long card runs past the plaque: it scrolls, and its foot fades out to say there is more */ .ct-card { gap: .9cqh; padding-bottom: 3cqh; -webkit-mask-image: linear-gradient(#000 calc(100% - 3cqh), transparent); mask-image: linear-gradient(#000 calc(100% - 3cqh), transparent); } .ct-f { font-size: 1.75cqh; } .ct-yn { font-size: 1.75cqh; } .ct-kind { font-size: 1.7cqh; } .ct-line { font-size: 2.15cqh; line-height: 1.3; } .ct-text { font-size: 1.9cqh; line-height: 1.4; } .ct-cr dt { font-size: 1.35cqh; } .ct-cr dd { font-size: 1.75cqh; line-height: 1.3; } .ct-note { font-size: 1.7cqh; line-height: 1.35; } .ct-watch { min-height: 4.6cqh; font-size: 1.9cqh; } .ct-out, .ct-src { font-size: 1.4cqh; } } /* ── phones · La Salle's programme as a cinema's lit board: « Ce soir » hangs from its top edge, a row of bulbs along it, each poster in its case with the séance number beneath, the one on the screen lit in gold ── */ @media (max-width: 760px) { /* the hall's name starts below the channel's name, never under it */ .salle { padding-top: calc(max(10px, env(safe-area-inset-top)) + 58px); } .salle-prog-wrap { position: relative; margin-top: 14px; padding: 22px 0 6px; gap: 0; background: linear-gradient(180deg, #1d0f09, #0d0705); box-shadow: inset 0 1px 0 rgba(233,184,114,.55), inset 0 -1px 0 rgba(233,184,114,.3), inset 0 10px 18px -10px rgba(0,0,0,.9), 0 14px 24px -14px #000; } .salle-prog-wrap::before { left: 10px; right: 10px; top: 7px; height: 4px; background: radial-gradient(circle 2px, #ffd892 60%, rgba(255,190,100,.35) 70%, transparent 72%) 0 50% / 14px 4px repeat-x; opacity: .85; } .salle-prog-wrap::after { display: none; } .sp-head { position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); z-index: 2; gap: 8px; } .sp-ar { text-shadow: 0 1px 4px #000; } .salle-prog { counter-reset: seance; gap: 10px; padding: 4px 16px 4px; } .salle-prog li { counter-increment: seance; display: grid; justify-items: center; gap: 5px; } .salle-prog li::after { content: counter(seance, decimal-leading-zero); font: 700 10px/1 var(--f-display); letter-spacing: .06em; color: rgba(236,231,222,.4); } .salle-prog li:has(button.on)::after { color: #e9b872; } .salle-prog button.on { transform: none; } } /* ── phones · one slim lit plate for the way between the halls, in the same place in both: at the foot of the screen, centred under the thumb (the in-page sign and the back box give way to it) ── */ @media (max-width: 760px) { #cinema .courts-sign, .courts .ct-back.hall-sign { display: none; } .hall-switch { display: flex; align-items: center; gap: 8px; position: absolute; left: 50%; right: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 9px 14px 8px; margin: 0; cursor: pointer; color: #f4ead8; background: linear-gradient(180deg, #1c1310, #0e0907); border: 1px solid rgba(233,184,114,.5); box-shadow: inset 0 0 0 3px #0b0705, inset 0 0 0 4px rgba(233,184,114,.25), 0 10px 24px rgba(0,0,0,.75); } .hall-switch .cs-lamp { display: none; } .hall-switch .cs-k { font-size: 11px; padding: 2px 6px 1px; } .hall-switch b { font-size: 17px; line-height: 1; white-space: nowrap; } .hall-switch .cs-ar { font-size: 13px; line-height: 1; } .hall-switch .cs-go { display: none; } .hall-switch::after { content: '→'; font: 700 17px/1 var(--f-display); color: #e9b872; } #cinema.courts-open .hall-switch::after { content: '←'; order: -1; } #cinema.courts-open .hall-switch { left: 50%; } .courts { padding-bottom: 96px; } } /* phones · Salle 2's programme on the same lit board, its shorts numbered */ @media (max-width: 760px) { .ct-prog { counter-reset: court; gap: 10px; margin: 6px -14px 0; padding: 20px 14px 8px; width: auto; max-width: none; background: linear-gradient(180deg, #1d0f09, #0d0705); box-shadow: inset 0 1px 0 rgba(233,184,114,.55), inset 0 -1px 0 rgba(233,184,114,.3), inset 0 10px 18px -10px rgba(0,0,0,.9); background-image: radial-gradient(circle 2px, #ffd892 60%, rgba(255,190,100,.35) 70%, transparent 72%), linear-gradient(180deg, #1d0f09, #0d0705); background-size: 14px 4px, auto; background-position: 10px 7px, 0 0; background-repeat: repeat-x, no-repeat; scrollbar-width: none; } .ct-prog::-webkit-scrollbar { display: none; } .ct-prog li { counter-increment: court; display: grid; gap: 5px; justify-items: center; } .ct-prog li::after { content: counter(court, decimal-leading-zero); font: 700 10px/1 var(--f-display); letter-spacing: .06em; color: rgba(236,231,222,.4); } .ct-prog li:has(button.on)::after { color: #e9b872; } } /* ── phones, second pass: the two halls as two tabs at the top (they name the room you are in and lead to the other), and the programme as a plain row of small gilt frames on the red wall, no board ── */ .hall-tabs { display: none; } @media (max-width: 760px) { .hall-tabs { position: absolute; z-index: 40; top: calc(max(10px, env(safe-area-inset-top)) + 54px); left: 16px; right: 16px; display: grid; grid-template-columns: 1fr 1fr; background: rgba(10,5,3,.72); border: 1px solid rgba(233,184,114,.45); box-shadow: 0 8px 18px rgba(0,0,0,.5); } .hall-tabs button { display: grid; justify-items: center; gap: 3px; padding: 8px 6px 7px; color: rgba(244,234,216,.55); cursor: pointer; transition: color .25s, background .25s; } .hall-tabs button + button { border-left: 1px solid rgba(233,184,114,.3); } .hall-tabs .cs-k { font: 800 10px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: inherit; } .hall-tabs b { font: 900 16px/1 var(--f-display); text-transform: uppercase; white-space: nowrap; } .hall-tabs button[aria-current="true"] { color: #f8e3b8; background: rgba(233,184,114,.13); box-shadow: inset 0 -2px 0 #e9b872; } .hall-tabs button[aria-current="true"] .cs-k { color: #e9b872; } .hall-tabs button:focus-visible { outline: 1px solid #f8e3b8; outline-offset: -3px; } /* what the tabs replace */ .hall-switch, #cinema .room-head, .courts .ct-title { display: none !important; } .salle { padding-top: calc(max(10px, env(safe-area-inset-top)) + 116px); } .courts { padding-top: calc(max(10px, env(safe-area-inset-top)) + 112px); } /* the programme: frames on the wall, the séance number beneath, the one on the screen in gold */ .salle-prog-wrap { margin-top: 0; padding: 0; background: none; box-shadow: none; } .salle-prog-wrap::before, .sp-head { display: none; } .salle-prog button, .ct-pic { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 0 3px #4a321b, 0 0 0 4px rgba(233,184,114,.35), 0 8px 14px rgba(0,0,0,.6); } .salle-prog button.on, .ct-prog button.on .ct-pic { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 0 3px #e9b872, 0 0 18px rgba(255,200,120,.35), 0 8px 14px rgba(0,0,0,.6); } .salle-prog { padding: 6px 18px 4px; } .salle-prog li::after, .ct-prog li::after { font-size: 9px; } .ct-prog { margin: 0 -14px; padding: 6px 18px 4px; background: none; box-shadow: none; } } /* the hall tabs slide up out of sight while reading down, and back when scrolling up */ @media (max-width: 760px) { .hall-tabs { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; } .hall-tabs.away { transform: translateY(calc(-100% - 70px)); opacity: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .hall-tabs { transition: none; } } /* ── phones · Salle 2's card set like a festival catalogue page: the numbers on one line, the doubt about the year small beneath, the title and its kind, the logline as a quote held by a gold rule, the text, then the credits as a neat two-column table, the note, a full-width button and the sources ── */ @media (max-width: 760px) { .ct-card { gap: 12px; padding: 20px 18px 22px; } .ct-k { gap: 6px; } .ct-n b { font-size: 30px; } .ct-n small { font-size: 14px; } .ct-f { font-size: 13px; padding: 4px 8px 3px; } .ct-yn { margin-top: -6px; font-size: 13px; line-height: 1.35; color: rgba(244,234,216,.55); } .ct-t { margin-top: 2px; font-size: 34px; } .ct-kind { margin-top: -4px; font: 700 12px/1.35 var(--f-display); letter-spacing: .05em; color: #e9b872; } .ct-line { margin: 4px 0 0; padding-left: 14px; border-left: 2px solid #e9b872; font-size: 18px; line-height: 1.4; color: #f8e3b8; } .ct-text { font-size: 15px; line-height: 1.55; color: rgba(244,234,216,.8); } .ct-cr { gap: 0; margin-top: 2px; border-bottom: 1px solid rgba(233,184,114,.15); } .ct-cr div { grid-template-columns: 36% minmax(0, 1fr); gap: 12px; padding: 8px 0 7px; } .ct-cr dt { font-size: 9px; line-height: 1.35; padding-top: 3px; } .ct-cr dd { font-size: 14px; line-height: 1.4; } .ct-note { margin-top: 0; font-size: 14px; line-height: 1.45; } .ct-acts { display: grid; gap: 10px; margin-top: 4px; } .ct-watch { justify-content: center; width: 100%; min-height: 48px; font-size: 15px; } .ct-out { justify-self: center; } .ct-src { font-size: 10px; line-height: 1.7; } } /* ── phones · the programme as a TV guide grid: « Qui est Hicham Lasri ? » and Le Repaire stay full-width at the top, the eight channels become tiles two by two (a coloured edge, the number large in the channel's colour, the name and its Arabic, one short line), the channel you are on lit in its colour ── */ @media (max-width: 760px) { .pn-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; align-content: start; gap: 8px; overflow-y: auto; scrollbar-width: none; padding-bottom: 4px; } .pn-list::-webkit-scrollbar { display: none; } .pn-list > .pn-li { flex: none; } .pn-group { grid-column: 1 / -1; padding-top: 6px; font-size: 13px; } .pn-feat, .pn-li:has([data-go="0"]) { grid-column: 1 / -1; } /* the two full-width rows, slimmer */ .pn-feat .pn-row, .pn-li:has([data-go="0"]) .pn-row { grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 58px; gap: 12px; } .pn-li:has([data-go="0"]) .pn-n { font-size: 24px; } /* the tiles */ .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 2px 10px; min-height: 92px; padding: 12px 12px 11px; background: rgba(236,231,222,.035); border: 1px solid rgba(236,231,222,.08); box-shadow: inset 0 3px 0 var(--c); } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-n { grid-row: 1 / 3; align-self: start; display: block; background: none; color: var(--c); font-size: 34px; line-height: .85; transform: none; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-txt { gap: 4px; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-nm { display: grid; gap: 3px; white-space: normal; font-size: 17px; line-height: 1; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-nm i { margin: 0; font-size: 13px; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 12px; line-height: 1.3; color: #a89a88; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-end { display: none; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-row.on { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 60%, transparent); } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-row.on .pn-end { display: block; grid-column: 2; justify-self: start; margin-top: 4px; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-row.on .pn-go { display: none; } } /* a short phone: the tiles tighten so the whole guide fits without scrolling */ @media (max-width: 760px) and (max-height: 700px) { .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-row { min-height: 0; padding: 9px 10px 8px; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-line { -webkit-line-clamp: 1; } .pn-feat .pn-row, .pn-li:has([data-go="0"]) .pn-row { min-height: 50px; } } /* the programme: no « en ce moment » tag; the channel you are on is told by its tint alone */ @media (max-width: 760px) { .pn-now, .pn-row.on .pn-end { display: none !important; } } /* the programme grid: five works and three around them; the last of each group takes the full width, so no hole is left */ @media (max-width: 760px) { .pn-li:has([data-go="8"]), .pn-li:has([data-go="7"]) { grid-column: 1 / -1; } } /* Salle 2 · the film's one line in the halls' display face, upright, like the words cut into the plaque, not a book's italic */ #cinema .ct-line { font-family: var(--f-display); font-style: normal; font-weight: 500; letter-spacing: .01em; line-height: 1.2; } @media (min-width: 761px) { #cinema .ct-line { font-size: 2.5cqh; } } @media (max-width: 760px) { #cinema .ct-line { font-size: 21px; } } /* the big hall's plate carries its number too, as Salle 2's does */ .rh-badge { align-self: center; font-size: 13px; } @media (min-width: 761px) { #cinema .rh-badge { font-size: calc(var(--h) * .019); padding: calc(var(--h) * .004) calc(var(--h) * .008) calc(var(--h) * .003); } } /* the programme grid: each row as tall as its tile needs (never squeezed under its text); if a short screen can't hold them all, the list scrolls */ @media (max-width: 760px) { .pn-list { grid-auto-rows: max-content; } } /* the programme fits the screen, no scroll: one word under each channel, tighter tiles; on a very short screen the word goes and the names stay */ @media (max-width: 760px) { .pn-list { grid-auto-rows: auto; gap: 6px; overflow: hidden; } .pn-group { padding-top: 2px; font-size: 12px; } .pn-feat .pn-row, .pn-li:has([data-go="0"]) .pn-row { min-height: 46px; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-row { min-height: 0; padding: 8px 10px 7px; gap: 2px 9px; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-n { font-size: 30px; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-line { -webkit-line-clamp: 1; font-size: 12px; } } @media (max-width: 760px) and (max-height: 600px) { .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-line { display: none; } .pn-feat .pn-line, .pn-li:has([data-go="0"]) .pn-line { display: none; } } @media (max-width: 760px) { /* the Arabic name rides on the same line as the French one, so each tile is one line shorter */ .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-li:not(.pn-feat):not(:has([data-go="0"])) .pn-nm i { margin-left: 5px; font-size: 12px; } } /* the closing credits' sources and rights: in the book face, in italics, as in a film's end roll, not typewriter capitals */ .roll :is(.src-title, .rights) { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: 0; } .roll .src-title { font-size: 17px; } .roll .rights { font-size: 13px; line-height: 1.5; } .roll .srcs { font-family: var(--f-serif); font-size: 14px; line-height: 1.7; } /* Le Repaire, lighter to draw: the colour grade sits on the moving pictures themselves (each its own layer), not on their container, so panning slides finished layers instead of re-grading the whole wide frame every frame */ #city .montage.soft, #city .montage.sharp { filter: none; } #city .montage.soft .track > * { filter: brightness(.66) saturate(.95) contrast(1.05); } #city .montage.sharp .track > * { filter: brightness(1.02) saturate(1.05) contrast(1.05); } /* on a phone there is no cursor light: one layer with the blend the two used to make, instead of two full frames stacked */ @media (hover: none), (pointer: coarse) { #city .montage.sharp { display: none; } #city .montage.soft .track > * { filter: brightness(.86) saturate(1) contrast(1.05); } } /* the typewriter only where there is a machine or a document. On the film pages (outside their scenes), in the biography, on a book's page, under Le Repaire's station signs and in the shorts hall, the small labels are set in the book face, in italics, at a size that reads; drawn book covers, the scenes' viewfinders and cards, the TV guide keep theirs */ :is(#screening, .theme-bio, #ecrits .bo, #city .den-tip, .courts) .mono:not(.s-sig .mono, [class*="cv-"], .ds-idc .mono, .rl-name .mono) { font-family: var(--f-serif) !important; font-style: italic; text-transform: none !important; letter-spacing: .01em !important; font-size: 13px !important; } #screening .roll .mono.src-title { font-size: 17px !important; } :is(#ecrits .bo) .mono:is(.bo-step, .bo-x) { font-size: 16px !important; } /* a picture on its way: a faint warm tint in its frame, only after half a second (js/waiting.js clears it on arrival) */ img.ld-wait { animation: ld-tint .5s .5s ease both; } @keyframes ld-tint { from { background-color: transparent; } to { background-color: rgba(150, 128, 98, .16); } } @media (prefers-reduced-motion: reduce) { img.ld-wait { animation: none; background-color: rgba(150, 128, 98, .16); } } /* « En direct » is not shown in the Constellation (CH 7) nor the Palmarès (CH 8) */ body:is([data-ch="6"], [data-ch="7"]) #signal .live { display: none; } /* the biography and the film pages do not bounce at their ends either: a hard scroll stops at the top or the bottom */ #screening { overscroll-behavior-y: none; } /* the opening screen's language switch says what it is, softly: « Langue » in small italics before EN (« Language » before FR) */ .pw-lang .pw-lang-k { margin-right: 6px; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: .82em; letter-spacing: 0; text-transform: none; opacity: .62; } /* phones · the programme stub in full only in Le Repaire (channel 0), so the visitor knows where they start; everywhere else just the ☰, a small dark square whose bars take the room's own colour, so it sits in every room without shouting */ @media (max-width: 760px) { body:not([data-ch="0"]) .pn-open, body.in-bio .pn-open { grid-template: auto / 40px; width: 40px; height: 40px; right: 10px; background: rgba(12, 10, 8, .62); color: var(--accent, #F4E9D0); -webkit-mask: none; mask: none; filter: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #F4E9D0) 45%, transparent); } body:not([data-ch="0"]) .pn-open :is(.pn-ch, .pn-name), body.in-bio .pn-open :is(.pn-ch, .pn-name) { display: none; } body:not([data-ch="0"]) .pn-open .pn-bars, body.in-bio .pn-open .pn-bars { grid-area: 1 / 1; width: 40px; padding: 0; justify-items: center; border: 0; } body:not([data-ch="0"]) .pn-open .pn-bars i, body.in-bio .pn-open .pn-bars i { width: 18px; } } /* no blue flash when a finger taps something, anywhere; and what is tapped rather than read (actor cards, buttons, links) cannot be selected like text by accident, so a card turning over never lights up blue. Articles stay selectable */ html { -webkit-tap-highlight-color: transparent; } .ds-person, .ds-person *, button, [role="button"], .pn-open, .pn-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* phones · the corner belongs to the ☰: « En direct » stands to its left, and the Gazette's ☰ is printed on its own paper */ @media (max-width: 760px) { body:not([data-ch="0"]) #signal .live { right: 58px; } body[data-ch="5"]:not(.in-bio) .pn-open { top: max(5px, env(safe-area-inset-top)); background: #EFE5CF; color: #1e1710; box-shadow: inset 0 0 0 1px rgba(30, 23, 16, .55); } } /* the narrowest phones: the logo needs the room, the city gives way and the hour stays */ @media (max-width: 360px) { body:not([data-ch="0"]) #signal .lv-city { display: none; } } /* a refresh inside a visit: straight back to the page, with no opening screen */ html.is-back #opening { display: none; } /* the viewfinder never stands over a film: the page can't follow the mouse there, so it would stay frozen on the picture */ #cursor.over-frame { visibility: hidden; } body.has-cursor.rf-watching #cursor { display: none; } body.has-cursor.rf-watching, body.has-cursor.rf-watching * { cursor: auto !important; } body.has-cursor.rf-watching .rf-room.is-idle .rf-sheet { cursor: none !important; }