/* ========================================================================== FERNA — huerta de mesada. Réplica del sitio "Ferna" (video FFWtxjvW2ts, 8:59–9:55). Estructura: variables → base → header/arco-nav → hero (parallax 4 capas) → la ventana → cómo funciona (pila sticky) → cuatro semanas (time-lapse pinned) → qué crece (fila horizontal + atardecer) → de noche → utilidades → mobile → reduced motion. Todo lo ligado al scroll usa CSS scroll-driven animations (view timelines con nombre en cada wrapper [data-pin] y `animation-range: contain`). app.js agrega `.no-sda` al si el navegador no las soporta y entonces las mismas keyframes se "scrubbean" con una animación pausada y `animation-delay` negativo a partir de `--p` (0–1), calculado en JS. ========================================================================== */ /* ---------- Fuente local (respaldo de Google Fonts) ---------- */ @font-face { font-family: "Ferna Serif"; src: url("assets/instrument-serif.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- Propiedades animables ---------- */ @property --w { /* ancho del barrido de máscara (reveal) */ syntax: ""; inherits: false; initial-value: 0%; } /* ---------- Variables ---------- */ :root { /* Paleta (hex del relevamiento) */ --cream: #f3f0e8; /* fondo general */ --cream-2: #efe7d6; /* inicio del atardecer */ --tan: #e6d9c3; /* tostado sección pods */ --tan-2: #e6d5b8; /* tostado del atardecer */ --brown: #3a2f26; /* marrón final del atardecer */ --sage: #a9b8a1; /* verde salvia (producto, acentos) */ --green: #3c8a5c; /* botón */ --ink: #1f2a23; /* verde texto */ --ink-soft: #5f675f; /* bajada gris */ --ink-muted: #8a9088; /* párrafo gris, overlines */ --night: #0e1712; /* negro verdoso */ --mint: #b9e8b6; /* botón píldora nocturno */ --sun: #f0a24a; /* sol */ --white: #ffffff; --line: rgba(31, 42, 35, .28); /* Tipografía */ --serif: "Instrument Serif", "Ferna Serif", "Times New Roman", Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Easings y duraciones */ --ease-out: cubic-bezier(.16, 1, .3, 1); --t-reveal: .4s; --t-enter: .55s; /* Layout */ --gutter: 5vw; --radius: 16px; --shadow-card: 0 24px 60px -30px rgba(31, 42, 35, .35), 0 2px 6px rgba(31, 42, 35, .05); --travel: 108vw; /* recorrido de la fila horizontal (≈ ancho de la pista − viewport) */ } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { /* sin scroll-behavior: smooth para no interferir con scrolls programáticos; las anclas se suavizan desde app.js */ -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; } .overline { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Botones */ .btn { display: inline-block; padding: 12px 22px; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; transition: transform .5s var(--ease-out), background-color .3s; } .btn:hover { transform: translateY(-1px); } .btn--green { background: var(--green); color: var(--white); } .btn--green:hover { background: #357c52; } .btn--mint { background: var(--mint); color: var(--ink); border-radius: 999px; } .btn--mint:hover { background: #c9f0c6; } /* ========================================================================== HEADER + NAV "TRAYECTORIA DEL SOL" ========================================================================== */ .site-header { position: fixed; top: 5vh; left: 4vw; z-index: 40; } .wordmark { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); } .wordmark__name { font-family: var(--serif); font-size: 24px; line-height: 1; } .wordmark__label { font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-muted); } .night-mode .wordmark { color: var(--white); } .night-mode .wordmark__label { color: rgba(255, 255, 255, .6); } .sun-nav { position: fixed; inset: 0 0 auto 0; height: 14vh; z-index: 30; pointer-events: none; } .sun-nav__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .sun-nav__arc { fill: none; stroke: var(--line); stroke-width: 1; transition: stroke .6s; } .sun-nav__dots a { pointer-events: auto; cursor: pointer; } .sun-nav__dots circle { fill: var(--ink-muted); transition: fill .4s; } .sun-nav__dots a.is-active circle { fill: var(--green); } .sun-nav__dots text { font-family: var(--sans); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; fill: var(--ink-muted); transition: fill .4s; } .sun-nav__dots a.is-active text { fill: var(--ink); } .sun-nav__dots a:hover text { fill: var(--ink); } .sun-nav__dots a:focus-visible { outline: none; } .sun-nav__dots a:focus-visible circle { stroke: var(--green); stroke-width: 3; } .sun-nav__halo { fill: var(--sun); opacity: .18; } .sun-nav__sun { fill: var(--sun); } /* Sobre fondos oscuros el arco se ve blanco */ .night-mode .sun-nav__arc { stroke: rgba(255, 255, 255, .45); } .night-mode .sun-nav__dots circle { fill: rgba(255, 255, 255, .55); } .night-mode .sun-nav__dots text { fill: rgba(255, 255, 255, .6); } .night-mode .sun-nav__dots a.is-active circle { fill: var(--mint); } .night-mode .sun-nav__dots a.is-active text { fill: var(--white); } /* Resplandor naranja que acompaña al sol en el borde (solo en el hero) */ .sun-glow { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; left: 0; top: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(240, 162, 74, .55) 0%, rgba(240, 162, 74, .18) 30%, rgba(240, 162, 74, 0) 62%); opacity: var(--glow, 1); pointer-events: none; will-change: transform, opacity; } /* ========================================================================== MECANISMO DE SCRUB (view timelines) ========================================================================== */ [data-pin] { view-timeline-name: --pin; } [data-scrub] { animation-timeline: --pin; animation-range: contain; /* 0 = wrapper toca el techo, 1 = fin del pin */ animation-fill-mode: both; animation-timing-function: linear; } /* Respaldo sin scroll-driven animations: misma keyframe, scrub por --p */ .no-sda [data-scrub] { animation-timeline: auto; animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); } /* ========================================================================== 1. HERO — parallax de 4 capas ========================================================================== */ .hero-wrap { position: relative; height: 200vh; z-index: 1; } .hero { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--cream); } /* Capa 0: fondo desenfocado (0,25×) */ .hero__bg { position: absolute; inset: -14% 0 -32% 0; /* margen para el translate de -25vh y el blur */ z-index: 0; animation-name: par-bg; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 42%; filter: blur(9px) brightness(1.12) saturate(.9); transform: scale(1.5); transform-origin: 0% 45%; } .hero__bg::after { /* velo de luz: mesa clara y esquina izquierda más limpia para el texto */ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243, 240, 232, .92) 0%, rgba(243, 240, 232, .8) 32%, rgba(243, 240, 232, .25) 60%, rgba(243, 240, 232, 0) 100%), linear-gradient(180deg, rgba(243, 240, 232, .35) 0%, rgba(243, 240, 232, 0) 40%, rgba(232, 226, 210, .55) 100%); } /* Capa 1: eucalipto arriba a la derecha (0,25×) */ .hero__eucalyptus { position: absolute; right: -4vw; top: 4vh; height: 52vh; width: auto; z-index: 1; filter: blur(2.5px) brightness(1.08); opacity: .85; transform: rotate(-12deg) scaleX(-1); animation-name: par-bg; } /* ramita abajo a la derecha, también desenfocada */ .hero__sprig { position: absolute; right: 4vw; bottom: -6vh; height: 28vh; width: auto; z-index: 1; filter: blur(1.5px) brightness(1.05) saturate(1.1); opacity: .9; transform: rotate(140deg); animation-name: par-bg; } /* Capa 2: producto (0,75×) x 45–95 %, y 32–85 % */ .hero__product { position: absolute; left: 44vw; top: 30vh; width: 52vw; height: auto; z-index: 2; filter: drop-shadow(0 30px 40px rgba(31, 42, 35, .18)); animation-name: par-product; } /* Capa 3: hoja de monstera, primer plano (0,85× + escala 1→2) */ .hero__leaf { position: absolute; left: 40vw; top: 79vh; width: 22vw; height: auto; z-index: 3; transform-origin: 50% 18%; transform: rotate(-8deg); filter: drop-shadow(0 20px 30px rgba(20, 40, 25, .35)); animation-name: par-leaf; } /* Texto: se apaga por opacidad, sin translate */ .hero__text { position: absolute; left: var(--gutter); top: 22vh; width: 36vw; z-index: 4; animation-name: hero-text; } .hero__text .overline { margin-bottom: 1.4vh; } .hero__title { font-size: clamp(56px, 6.1vw, 88px); line-height: .96; color: var(--ink); } .hero__title span { display: block; } .hero__lead { margin-top: 2.6vh; max-width: 30vw; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } .hero__text .btn { margin-top: 3.4vh; } .hero__meta { position: absolute; left: 0; right: 0; bottom: 2.4vh; z-index: 4; text-align: center; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-muted); } @keyframes hero-text { 0% { opacity: 1; } 25% { opacity: 0; } /* 1 - p*4 */ 100% { opacity: 0; } } @keyframes par-product { to { translate: 0 -75vh; } } @keyframes par-leaf { from { transform: translateY(0) scale(1) rotate(-8deg); } to { transform: translateY(-85vh) scale(2) rotate(-14deg); } } @keyframes par-bg { to { translate: 0 -25vh; } } /* Reveal de carga: barrido izq→der con borde desenfocado */ .reveal { --w: 0%; mask-image: linear-gradient(90deg, #000 var(--w), transparent calc(var(--w) + 15%)); -webkit-mask-image: linear-gradient(90deg, #000 var(--w), transparent calc(var(--w) + 15%)); animation: sweep var(--t-reveal) var(--ease-out) var(--d, 0s) both; } @keyframes sweep { from { --w: 0%; } to { --w: 115%; } } .fade-in { opacity: 0; animation: fade-in .6s var(--ease-out) var(--d, 0s) both; } @keyframes fade-in { to { opacity: 1; } } /* ========================================================================== 2. LA VENTANA — entra a 1× y se desliza sobre el hero ========================================================================== */ .windowsill { position: relative; z-index: 2; margin-top: -50vh; /* entra mientras el hero todavía hace parallax */ min-height: 100vh; padding: 8vh 0 14vh; background: var(--cream); display: grid; grid-template-columns: 8vw 37vw 10vw 35vw 10vw; align-items: center; box-shadow: 0 -30px 60px -20px rgba(31, 42, 35, .12); } .windowsill__figure { grid-column: 2; margin: 0; } .windowsill__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #c9ccc6; position: relative; } .windowsill__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; transform: scale(1.15); transform-origin: 0% 50%; /* febrero: gris, poca luz, contraste bajo */ filter: saturate(.3) brightness(.86) contrast(.88); } .windowsill__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(196, 204, 210, .45) 0%, rgba(120, 128, 130, .18) 55%, rgba(60, 64, 62, .35) 100%); mix-blend-mode: multiply; } .windowsill__figure figcaption { margin-top: 12px; } .windowsill__copy { grid-column: 4; display: grid; gap: 22px; } .windowsill__copy p:not(.overline) { font-size: 17px; line-height: 1.5; } .windowsill__copy .overline { margin-bottom: 4px; } .windowsill__copy .muted { color: var(--ink-muted); } /* Fade-in corto al entrar (JS agrega .is-in) */ [data-enter] { opacity: 0; transform: translateY(10px); transition: opacity var(--t-enter) var(--ease-out) var(--d, 0s), transform var(--t-enter) var(--ease-out) var(--d, 0s); } [data-enter].is-in { opacity: 1; transform: none; } /* ========================================================================== 3. CÓMO FUNCIONA — pila de tarjetas sticky ========================================================================== */ .parts { position: relative; z-index: 2; background: var(--cream); padding: 10vh 0 0; } .parts__head { padding: 0 8vw 6vh; } .parts__head .overline { margin-bottom: 1.6vh; } .parts__title { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; } .stack { position: relative; padding: 0 8vw; timeline-scope: --c1, --c2, --c3; } .card { position: sticky; top: calc(12vh + var(--i) * 8px); height: 68vh; margin-bottom: 14vh; display: grid; grid-template-columns: 60% 40%; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; transform-origin: 50% 0%; animation-fill-mode: both; animation-timing-function: linear; animation-name: card-cover; } .card:last-child { margin-bottom: 0; animation-name: none; } /* Cada tarjeta nombra su timeline; la anterior lo usa para achicarse a 0,97 */ .card:nth-child(1) { animation-timeline: --c2; animation-range: entry 0% entry 100%; } .card:nth-child(2) { view-timeline-name: --c2; animation-timeline: --c3; animation-range: entry 0% entry 100%; } .card:nth-child(3) { view-timeline-name: --c3; } .no-sda .card { animation-timeline: auto; animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); } @keyframes card-cover { to { transform: scale(.97); } } .card__text { padding: 4vw 5vw; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; } .card__text .overline { margin-bottom: 6px; } .card__title { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; } .card__text p:not(.overline) { max-width: 44ch; color: var(--ink-soft); font-size: 15px; } .card__media { position: relative; overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; } /* LUZ: macro de hoja + barra de luz con glow */ .card__media--leaf { background: #6d8a3a; } .card__media--leaf img { object-position: 50% 28%; transform: scale(1.9) rotate(18deg); transform-origin: 55% 30%; filter: brightness(1.25) saturate(1.15) contrast(.95); } .card__media--leaf::after { /* gotas de agua: pequeños reflejos */ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 34% 58%, rgba(255,255,255,.75) 0 3px, rgba(255,255,255,.18) 5px, transparent 9px), radial-gradient(circle at 62% 70%, rgba(255,255,255,.7) 0 2px, rgba(255,255,255,.15) 4px, transparent 8px), radial-gradient(circle at 48% 44%, rgba(255,255,255,.7) 0 2px, rgba(255,255,255,.15) 5px, transparent 10px), radial-gradient(circle at 74% 38%, rgba(255,255,255,.6) 0 2px, transparent 6px), radial-gradient(circle at 22% 78%, rgba(255,255,255,.6) 0 2px, transparent 6px), linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%); } .lightbar { position: absolute; left: 14%; right: 14%; top: 22%; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px 3px rgba(255,255,255,.95), 0 0 36px 12px rgba(255,255,255,.55), 0 0 90px 30px rgba(255,255,255,.25); } /* AGUA: producto sobre gris */ .card__media--product { background: #d7d8d3; display: grid; place-items: center; } .card__media--product img { width: 82%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.18)); } /* PODS: dos macetas con albahaca (recorte de la grilla de hierbas) */ .card__media--pods { background: #f4eee3; } .card__media--pods img { position: absolute; left: 0; top: 50%; width: 150%; height: auto; max-width: none; transform: translateY(-50%); } .wait { min-height: 100vh; display: grid; place-items: center; } .wait__text { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink); } /* ========================================================================== 4. CUATRO SEMANAS — time-lapse pinned con crossfade ========================================================================== */ .weeks-wrap { position: relative; z-index: 2; height: 400vh; } .weeks { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #f4f1ea; } .weeks__scene { position: absolute; inset: 0; } .weeks__wall { position: absolute; inset: 0 0 26vh 0; background: radial-gradient(ellipse 60% 80% at 18% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%), linear-gradient(112deg, #f8f6f1 0%, #f1ede4 45%, #e6e0d4 100%); } .weeks__wall::after { /* haz de luz lateral en diagonal */ content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.55) 52%, rgba(255,255,255,.6) 62%, rgba(255,255,255,0) 78%); } .weeks__table { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; background: repeating-linear-gradient(90deg, rgba(120, 90, 50, .06) 0 3px, transparent 3px 11px, rgba(120, 90, 50, .04) 11px 12px, transparent 12px 27px), linear-gradient(180deg, #e3cfae 0%, #d6bc93 40%, #c7a97b 100%); } .weeks__table::before { /* canto de la mesa */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(180deg, #ecdcc0, #d9c19c); } .weeks__shadow { position: absolute; left: 50%; bottom: 13vh; width: 44vw; height: 6vh; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(70, 50, 25, .45) 0%, rgba(70, 50, 25, 0) 70%); filter: blur(6px); } .stage { position: absolute; left: 50%; bottom: 14vh; width: 62vw; height: auto; translate: -50% 0; transform-origin: 50% 72%; /* línea de siembra: la maceta apenas se mueve */ opacity: 0; will-change: opacity; } /* Crossfade real: cada etapa entra en una ventana de 12 % y sale mientras entra la siguiente (ventanas: 16, 36, 56 y 76 %). Solo se ven una o dos a la vez. */ /* Etapa 1: brotes */ .stage--1 { width: 50.2vw; /* la maceta del render de brotes es más ancha: se iguala */ bottom: calc(14vh + 14px); filter: saturate(.8) brightness(1.04); transform: scale(.985); animation-name: stage-out; animation-range: contain 0% contain 28%; } /* Etapa 2: plantines */ .stage--2 { width: 50.2vw; bottom: calc(14vh + 14px); filter: saturate(1.35) contrast(1.06) hue-rotate(-6deg); transform: scale(1.015); animation-name: stage-cross; animation-range: contain 16% contain 48%; } /* Etapa 3: hojas (planta más chica, verde joven) */ .stage--3 { filter: saturate(1.2) brightness(1.06); transform: scale(.9); animation-name: stage-cross; animation-range: contain 36% contain 68%; } /* Etapa 4: maceta llena */ .stage--4 { animation-name: stage-cross; animation-range: contain 56% contain 88%; } /* Etapa 5: cosecha (recortada, luz de tarde) */ .stage--5 { filter: sepia(.18) saturate(1.1) brightness(1.03); transform: scaleY(.9) scaleX(.98); animation-name: stage-in; animation-range: contain 76% contain 88%; } @keyframes stage-in { from { opacity: 0; } to { opacity: 1; } } @keyframes stage-out { 0% { opacity: 1; } 57.15% { opacity: 1; } 100% { opacity: 0; } } @keyframes stage-cross { 0% { opacity: 0; } 37.5% { opacity: 1; } 62.5% { opacity: 1; } 100% { opacity: 0; } } .weeks__captions { position: absolute; left: var(--gutter); top: 20vh; z-index: 3; } .caption { position: absolute; left: 0; top: 0; width: 44vw; --w: 0%; opacity: 0; mask-image: linear-gradient(90deg, #000 var(--w), transparent calc(var(--w) + 15%)); -webkit-mask-image: linear-gradient(90deg, #000 var(--w), transparent calc(var(--w) + 15%)); animation-name: caption; } .caption .overline { margin-bottom: 1.4vh; } .caption__text { font-family: var(--serif); font-size: clamp(30px, 3.1vw, 44px); line-height: 1.05; } .caption--1 { animation-range: contain 2% contain 34%; } .caption--2 { animation-range: contain 36% contain 66%; } .caption--3 { animation-range: contain 70% contain 100%; animation-name: caption-last; } @keyframes caption { 0% { opacity: 0; --w: 0%; } 28% { opacity: 1; --w: 115%; } 82% { opacity: 1; --w: 115%; } 100% { opacity: 0; --w: 115%; } } @keyframes caption-last { 0% { opacity: 0; --w: 0%; } 32% { opacity: 1; --w: 115%; } 100% { opacity: 1; --w: 115%; } } /* ========================================================================== 5. QUÉ CRECE — fila horizontal + atardecer ========================================================================== */ .grows-wrap { position: relative; z-index: 2; height: 300vh; } .grows { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; background: var(--cream-2); animation-name: sunset; } @keyframes sunset { 0% { background-color: var(--cream-2); } 70% { background-color: var(--tan-2); } 100% { background-color: var(--brown); } } .grows__track { display: flex; align-items: center; gap: 4vw; padding-left: 8vw; padding-right: 6vw; width: max-content; will-change: transform; animation-name: slide; } @keyframes slide { to { transform: translateX(calc(-1 * var(--travel))); } } .grows__head { width: 34vw; flex: 0 0 34vw; } .grows__head .overline { margin-bottom: 1.6vh; } .grows__title { font-size: clamp(36px, 4vw, 58px); line-height: 1.02; } .grows__lead { margin-top: 2.2vh; max-width: 28vw; font-size: 15px; color: var(--ink-soft); } .pods { display: flex; gap: 1.5vw; flex: 0 0 auto; } .pod { flex: 0 0 20vw; background: var(--white); border-radius: var(--radius); padding: 10px 10px 18px; box-shadow: 0 18px 40px -24px rgba(31, 42, 35, .35); } .pod__photo { aspect-ratio: 1 / 1; border-radius: 10px; background-color: #f3eee4; background-image: url("assets/herbs.webp"); background-size: 300% auto; background-position: var(--px) var(--py); } .pod__name { margin: 14px 8px 4px; font-size: 20px; line-height: 1.1; } .pod__text { margin: 0 8px; font-size: 11px; line-height: 1.45; color: var(--ink-soft); } .grows__leaf { flex: 0 0 auto; width: 24vw; height: auto; margin-left: 2vw; transform: rotate(-24deg) translateY(4vh); filter: drop-shadow(0 24px 30px rgba(20, 30, 20, .35)); } /* ========================================================================== 6. DE NOCHE ========================================================================== */ .night { position: relative; z-index: 2; min-height: 100vh; background: var(--night); color: var(--white); overflow: hidden; display: grid; align-items: center; } .night__scene { position: absolute; inset: 0; } .night__kitchen { position: absolute; inset: 0; } .night__kitchen img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; filter: brightness(.2) saturate(.45) contrast(1.1) hue-rotate(-10deg); transform: scale(1.6); transform-origin: 0% 40%; } .night__kitchen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 23, 18, .95) 0%, rgba(14, 23, 18, .75) 35%, rgba(14, 23, 18, .35) 65%, rgba(14, 23, 18, .6) 100%), linear-gradient(180deg, rgba(14, 23, 18, .6) 0%, rgba(14, 23, 18, 0) 40%, rgba(14, 23, 18, .7) 100%); } /* Ventana con luces de ciudad */ .night__window { position: absolute; right: 6vw; top: 8vh; width: 44vw; height: 34vh; opacity: .8; background: radial-gradient(circle at 12% 40%, rgba(255, 220, 160, .9) 0 1.5px, transparent 4px), radial-gradient(circle at 20% 62%, rgba(255, 240, 200, .8) 0 1px, transparent 3px), radial-gradient(circle at 31% 35%, rgba(200, 220, 255, .8) 0 1.5px, transparent 4px), radial-gradient(circle at 45% 70%, rgba(255, 220, 160, .9) 0 2px, transparent 5px), radial-gradient(circle at 52% 45%, rgba(255, 255, 230, .7) 0 1px, transparent 3px), radial-gradient(circle at 64% 58%, rgba(255, 200, 140, .9) 0 1.5px, transparent 4px), radial-gradient(circle at 73% 30%, rgba(200, 220, 255, .7) 0 1px, transparent 3px), radial-gradient(circle at 84% 66%, rgba(255, 230, 180, .9) 0 2px, transparent 5px), radial-gradient(circle at 92% 42%, rgba(255, 240, 200, .6) 0 1px, transparent 3px), radial-gradient(circle at 38% 52%, rgba(255, 220, 160, .5) 0 1px, transparent 3px), linear-gradient(180deg, rgba(40, 60, 70, .35), rgba(20, 30, 30, .15)); filter: blur(.6px); border-radius: 6px; mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2)); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2)); } .night__product { position: absolute; left: 52vw; bottom: 12vh; width: 46vw; } .night__product img { width: 100%; height: auto; filter: brightness(.42) contrast(1.08) saturate(.85); } /* la barra LED y su haz cálido */ .night__beam { position: absolute; left: 24%; right: 12%; top: 10.5%; height: 76%; background: radial-gradient(ellipse 62% 64% at 50% 2%, rgba(255, 214, 150, .7) 0%, rgba(255, 190, 110, .26) 45%, rgba(255, 190, 110, 0) 72%); mix-blend-mode: screen; pointer-events: none; } .night__beam::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 3px; border-radius: 3px; background: #ffe9c4; box-shadow: 0 0 8px 2px rgba(255, 230, 190, .95), 0 0 30px 10px rgba(255, 200, 130, .5); } .night__reflection { position: absolute; left: 18%; right: 14%; bottom: -9%; height: 16%; background: radial-gradient(ellipse at center, rgba(255, 210, 150, .38) 0%, rgba(255, 210, 150, 0) 70%); filter: blur(6px); mix-blend-mode: screen; } .night__copy { position: relative; z-index: 2; padding: 0 var(--gutter); width: 46vw; } .night__copy .overline { color: rgba(255, 255, 255, .55); margin-bottom: 1.6vh; } .night__title { font-size: clamp(44px, 4.5vw, 64px); line-height: 1; color: var(--white); } .night__lead { margin-top: 2.4vh; max-width: 30vw; font-size: 15px; color: rgba(255, 255, 255, .8); } .night__copy .btn { margin-top: 3vh; } .night__note { margin-top: 3.4vh; max-width: 34vw; font-size: 10px; line-height: 1.5; color: rgba(255, 255, 255, .5); } .night__footer { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.4vh; z-index: 2; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .collection-link { color: rgba(255, 255, 255, .6); text-decoration: none; } .collection-link:hover { color: var(--white); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1000px) { .hero__text { width: 50vw; } .hero__title { font-size: clamp(44px, 7.5vw, 72px); } .hero__lead { max-width: 42vw; } .hero__product { left: 40vw; width: 60vw; top: 34vh; } .windowsill { grid-template-columns: 8vw 40vw 6vw 38vw 8vw; } .card { grid-template-columns: 55% 45%; } .card__text { padding: 5vw; } .night__copy { width: 60vw; } .night__lead, .night__note { max-width: 44vw; } .night__product { left: 46vw; width: 56vw; } } @media (max-width: 640px) { :root { --gutter: 6vw; --travel: 470vw; } body { font-size: 14px; } .site-header { left: var(--gutter); top: 2.2vh; } .sun-nav { height: 11vh; } .sun-nav__dots text { display: none; } /* solo puntos: el label pisaría el wordmark */ .hero__text { top: 16vh; width: 82vw; } .hero__title { font-size: clamp(40px, 12.8vw, 52px); } .hero__lead { max-width: 78vw; font-size: 14px; } .hero__product { left: 2vw; width: 110vw; top: 52vh; } .hero__leaf { left: 24vw; top: 82vh; width: 44vw; } .hero__eucalyptus { height: 34vh; top: 2vh; right: -10vw; } .hero__sprig { display: none; } .hero__meta { display: none; } .windowsill { margin-top: -30vh; grid-template-columns: var(--gutter) 1fr var(--gutter); gap: 6vh 0; padding: 12vh 0 14vh; } .windowsill__figure { grid-column: 2; } .windowsill__copy { grid-column: 2; } .windowsill__copy p { font-size: 15px; } .parts__head { padding: 0 var(--gutter) 5vh; } .stack { padding: 0 var(--gutter); } .card { height: 74vh; grid-template-columns: 1fr; grid-template-rows: 1fr 46%; top: calc(10vh + var(--i) * 8px); } .card__text { padding: 6vw; order: 1; } .card__media { order: 0; } .card__title { font-size: 26px; } .card__media--pods img { width: 100%; } .stage { width: 104vw; bottom: 12vh; } .stage--1, .stage--2 { width: 84vw; bottom: calc(12vh + 8px); } .weeks__captions { top: 14vh; } .caption { width: 84vw; } .caption__text { font-size: 30px; } .weeks__shadow { width: 80vw; bottom: 11vh; } .weeks__table { height: 22vh; } .weeks__wall { inset: 0 0 22vh 0; } .grows__track { padding-left: var(--gutter); gap: 8vw; } .grows__head { flex-basis: 84vw; width: 84vw; } .grows__lead { max-width: 80vw; } .pods { gap: 4vw; } .pod { flex-basis: 70vw; } .grows__leaf { width: 60vw; } .night { padding: 16vh 0 14vh; align-items: start; } .night__copy { width: 100%; } .night__lead, .night__note { max-width: 84vw; } .night__product { left: 8vw; width: 96vw; bottom: 8vh; } .night__window { right: 2vw; top: 4vh; width: 70vw; height: 20vh; } .night__footer { bottom: 2vh; } } /* ========================================================================== REDUCED MOTION — todo visible y quieto ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .fade-in, [data-scrub], .card, .grows, .grows__track { animation: none; } .reveal { mask-image: none; -webkit-mask-image: none; } .fade-in { opacity: 1; } [data-enter] { opacity: 1; transform: none; transition: none; } .btn { transition: none; } .hero-wrap { height: 100vh; } .windowsill { margin-top: 0; } .stage { opacity: 0; } .stage--5 { opacity: 1; } .caption { opacity: 0; mask-image: none; -webkit-mask-image: none; } .caption--3 { opacity: 1; } .weeks-wrap { height: 100vh; } .grows-wrap { height: auto; } .grows { position: static; height: auto; padding: 14vh 0; background: var(--tan); } .grows__track { display: grid; grid-template-columns: 1fr; width: auto; padding-right: 8vw; row-gap: 6vh; } .pods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5vw; } .pod { flex-basis: auto; } .grows__leaf { display: none; } .sun-glow { display: none; } } @media (prefers-reduced-motion: reduce) and (max-width: 640px) { .pods { grid-template-columns: 1fr; gap: 4vw; } }