/* ============================================================ Mais do que Amor, é Fado — Capítulo I Scroll-driven photo + sound piece. Loaded only on the Capítulo I page (mais-do-que-amor-e-fado/capitulo-i-elsa-laboreiro-cafe-luso/); everything here is scoped so it never touches the rest of the site. ============================================================ */ .fado-body { background: var(--ink); } /* The site header is position:sticky — once you've scrolled past it, it parks itself over the top slice of the viewport for good. --fado-header-h is that slice's real height, measured and kept live by js/fado-i.js (resize, orientation change, webfont load); this fallback only matters for the instant before that JS runs, or if it never does. Every beat's height is shrunk by exactly this much so the header never covers part of a photo, and the scroll container's scroll-padding-top is set to match so a snapped beat lands fully below the header, not half under it. */ html.fado-html { --fado-header-h: 88px; } @media (max-width: 760px) { /* Matches the site header's own nav-toggle breakpoint (style.css) — the header is shorter once the nav collapses into the hamburger. */ html.fado-html { --fado-header-h: 76px; } } /* ---------- Intro ---------- */ .fado-intro { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 24px; background: var(--ink) center/cover no-repeat; color: var(--paper); position: relative; } /* Same rule-of-thirds fix as the beat photos, applied to the intro's background image — js/fado-i.js adds this class after checking the hero image's real dimensions. */ .fado-intro.is-portrait { background-position: 50% var(--fado-portrait-anchor, 32%); } .fado-intro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,23,18,.55), rgba(27,23,18,.85)); } .fado-intro > * { position: relative; z-index: 1; } .fado-intro .kicker { justify-content: center; color: var(--paper); opacity: .8; } .fado-intro h1 { color: var(--paper); max-width: 820px; margin: 18px auto 0; } .fado-intro .fado-meta { font-family: var(--sans); font-size: .84rem; letter-spacing: .04em; color: var(--paper); opacity: .75; margin-top: 18px; } .fado-intro p.lede { color: var(--paper); opacity: .9; max-width: 560px; margin: 24px auto 0; } .fado-intro-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 42px; } .fado-intro-actions .btn-primary { background: var(--accent); border-color: var(--accent); } .fado-intro-actions .btn-primary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .fado-skip { color: var(--paper); opacity: .65; font-size: .8rem; text-decoration: underline; background: none; border: 0; cursor: pointer; font-family: var(--sans); } .fado-skip:hover { opacity: 1; } /* ---------- Beats ---------- */ /* Scroll-snap makes each beat lock into place as you scroll, rather than drifting to a stop wherever the scroll happened to end — the intro and closing sections snap too, so the whole piece reads as a sequence of fixed "pages" rather than one continuous scroll. mandatory + proximity fallback: mandatory reads as a hard jump on some trackpads/phones, but here every panel is a full viewport height so a hard snap is exactly the "anchor smoothly onto the next one" feel that was asked for. Crucially, scroll-snap-type has to live on the element that's actually the page's scroll container — in standards mode that's , not , so it's set on html.fado-html here rather than .fado-body (setting it on body silently does nothing, which is why snapping wasn't taking effect before). scroll-padding-top shifts the snap points down by the sticky header's height, so a snapped beat's full frame — not just the part below the header — ends up on screen. */ html.fado-html { scroll-snap-type: y mandatory; scroll-padding-top: var(--fado-header-h); } .fado-intro, .fado-beat, .fado-closing { scroll-snap-align: start; scroll-snap-stop: always; } .fado-beats { position: relative; } .fado-beat { position: relative; /* Full viewport height minus the sticky header, so nothing behind the header is ever cropped off the photo. */ height: calc(100vh - var(--fado-header-h)); min-height: 420px; overflow: hidden; display: flex; align-items: flex-end; } .fado-beat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Default crop anchor: dead center. Portrait (taller-than-wide) shots get cropped hardest on the vertical axis once they're stretched to fill a full-width beat, so centering them cuts straight through wherever the subject actually is if the shot was framed with the rule of thirds in mind (eyeline on the upper third, not the middle). js/fado-i.js measures each image's real dimensions on load and adds .is-portrait when it's taller than it is wide; the rule right below shifts the crop anchor up to match for exactly those images, and landscape shots are untouched. */ object-position: 50% 50%; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 1.6s ease; } .fado-beat img.is-portrait { object-position: 50% var(--fado-portrait-anchor, 32%); } .fado-beat.is-active img { opacity: 1; transform: scale(1); } .fado-beat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,23,18,0) 45%, rgba(27,23,18,.75) 100%); z-index: 1; } .fado-beat-caption { position: relative; z-index: 2; color: var(--paper); padding: 0 8vw 64px; max-width: 720px; opacity: 0; transform: translateY(14px); transition: opacity .8s ease .15s, transform .8s ease .15s; } .fado-beat.is-active .fado-beat-caption { opacity: 1; transform: translateY(0); } .fado-beat-caption .no { display: block; font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-bottom: 10px; color: var(--paper); } .fado-beat-caption p { color: var(--paper); font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; margin: 0; } .fado-beat-caption p.mood { font-style: italic; font-size: 1.15rem; } /* ---------- Docked audio widget ---------- */ .fado-player-dock { position: fixed; right: 18px; bottom: 18px; z-index: 250; display: flex; align-items: center; gap: 10px; background: rgba(27,23,18,.92); border: 1px solid rgba(250,250,247,.18); padding: 8px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s ease, transform .4s ease, width .35s ease, left .35s ease, right .35s ease, bottom .35s ease, padding .35s ease; } .fado-player-dock.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .fado-player-frame { width: 120px; height: 68px; flex-shrink: 0; background: #000; transition: width .35s ease, height .35s ease; } .fado-player-frame iframe { width: 100%; height: 100%; display: block; border: 0; } .fado-player-label { display: flex; flex-direction: column; gap: 8px; padding-right: 6px; } .fado-player-label > span { display: block; font-family: var(--sans); font-size: .66rem; letter-spacing: .04em; color: var(--paper); opacity: .7; white-space: nowrap; } .fado-player-controls { display: flex; gap: 8px; } .fado-mute-btn, .fado-expand-btn { background: none; border: 1px solid rgba(250,250,247,.4); color: var(--paper); font-family: var(--sans); font-size: .66rem; letter-spacing: .02em; padding: 5px 9px; cursor: pointer; white-space: nowrap; } .fado-mute-btn:hover, .fado-expand-btn:hover { border-color: var(--paper); } /* One-time callout pointing at the sound toggle. Browsers block unmuted autoplay outright — there's no way around that from a web page — so this is the honest substitute: the video starts moving on its own, and this makes the one tap needed for sound hard to miss instead of relying on a small button in the corner going unnoticed. */ .fado-sound-hint { position: absolute; bottom: calc(100% + 12px); right: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: .72rem; letter-spacing: .01em; white-space: nowrap; padding: 7px 12px; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; } .fado-sound-hint::after { content: ""; position: absolute; top: 100%; right: 18px; border: 6px solid transparent; border-top-color: var(--paper); } .fado-sound-hint.is-visible { opacity: 1; transform: translateY(0); } @keyframes fado-hint-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .fado-mute-btn.is-hinting { animation: fado-hint-pulse 1.1s ease-in-out 3; border-color: var(--paper); } .fado-minimize-btn { display: none; position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); border: 1px solid rgba(250,250,247,.4); color: var(--paper); font-size: 1rem; line-height: 1; cursor: pointer; z-index: 2; } .fado-minimize-btn:hover { border-color: var(--paper); } /* Expanded: the dock becomes an actual floating video window rather than a small audio-only control. Playback and audio state don't change when this toggles — it's purely "can I see the film," not a play control. */ .fado-player-dock.is-expanded { flex-direction: column; align-items: stretch; width: min(480px, calc(100vw - 36px)); padding: 10px; } .fado-player-dock.is-expanded .fado-player-frame { width: 100%; height: auto; aspect-ratio: 16 / 9; } .fado-player-dock.is-expanded .fado-expand-btn { display: none; } .fado-player-dock.is-expanded .fado-minimize-btn { display: block; } .fado-player-dock.is-expanded .fado-player-label { flex-direction: row; align-items: center; justify-content: space-between; padding-right: 0; margin-top: 8px; } /* Cinema: at the closing section the video becomes as large as it can be shown at once — full width like the photos, bounded by height so it never runs off the top of the screen. This is scroll-driven (see js/fado-i.js), not a manual toggle, so the expand/minimize buttons step aside while it's active; scrolling back away from the closing section drops the class and the dock returns to whatever floating state (small corner or expanded) it already had. Declared after .is-expanded so it wins when a visitor arrives at the close with the dock already expanded. */ .fado-player-dock.is-cinema { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; flex-direction: column; align-items: center; padding: 0; border-width: 1px 0 0 0; background: rgba(27,23,18,.97); } .fado-player-dock.is-cinema .fado-player-frame { width: min(100%, calc((100vh - var(--fado-header-h) - 64px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; } .fado-player-dock.is-cinema .fado-player-label { width: 100%; max-width: min(100%, calc((100vh - var(--fado-header-h) - 64px) * 16 / 9)); flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 4px 14px; margin-top: 0; } .fado-player-dock.is-cinema .fado-expand-btn, .fado-player-dock.is-cinema .fado-minimize-btn { display: none; } /* ---------- Closing ---------- */ .fado-closing { background: var(--ink); color: var(--paper); text-align: center; padding: 120px 24px 100px; } .fado-closing .rule { border-top: 1px solid rgba(250,250,247,.25); } .fado-closing p.pull-quote { color: var(--paper); max-width: 640px; } .fado-closing .pull-quote-attr { color: var(--paper); opacity: .7; } .fado-closing-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 40px; } .fado-closing-actions .btn-outline { border-color: var(--paper); color: var(--paper); } .fado-closing-actions .btn-outline:hover { background: var(--paper); color: var(--ink); } .fado-credits { font-family: var(--sans); font-size: .78rem; color: var(--paper); opacity: .55; margin-top: 56px; } /* ---------- Reduced motion / no-JS fallback ---------- */ @media (prefers-reduced-motion: reduce) { .fado-beat img { transition: none; opacity: 1; transform: none; } .fado-beat-caption { transition: none; opacity: 1; transform: none; } html.fado-html { scroll-snap-type: none; } } .no-js .fado-beat img { opacity: 1; transform: none; } .no-js .fado-beat-caption { opacity: 1; transform: none; } .no-js .fado-player-dock, .no-js .fado-intro-actions { display: none; } @media (max-width: 640px) { .fado-player-dock { left: 14px; right: 14px; } .fado-player-frame { width: 90px; height: 51px; } .fado-beat-caption { padding: 0 24px 48px; } }