/* DESCARO — visual layer The lighting *is* the brand. Every moment owns its palette; we crossfade between them like an LED rig dimming up the next shift. */ /* ========================================================================= 1. Reset, base typography, root tokens ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--text, #f5f1e8); background: var(--bg, #0a0807); overflow-x: hidden; min-height: 100vh; transition: background-color 1200ms cubic-bezier(0.22, 1, 0.36, 1); } img { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } a { color: inherit; text-decoration: none; } :root { /* Defaults — get overridden per moment below */ --bg: #0a0807; --bg-soft: #131008; --text: #f5f1e8; --text-mute: #a89e8c; --text-dim: #6c6356; --accent: #F4C14D; --accent-text: #1A1306; --glow-1: rgba(245, 193, 77, 0.32); --glow-2: rgba(255, 220, 150, 0.14); --card: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.10); --hero-img: url('images/render-exterior.jpg'); --display: 'Outfit', 'Inter', system-ui, sans-serif; --serif: var(--display); /* legacy alias — all display type is geometric sans now */ --easing: cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================================= 2. Per-moment palettes — applied by JS on ========================================================================= */ body[data-moment="manana"] { --bg: #1a1308; --bg-soft: #2a1f10; --text: #fef6e3; --text-mute: #c4b48b; --text-dim: #8a7c5a; --accent: #F4C14D; --accent-text: #1A1306; --glow-1: rgba(245, 190, 72, 0.32); --glow-2: rgba(255, 243, 199, 0.14); --hero-img: url('images/hero-manana.jpg'); } body[data-moment="almuerzo"] { --bg: #0f130b; --bg-soft: #1a2014; --text: #f1f0e3; --text-mute: #a8b58a; --text-dim: #6b7a55; --accent: #8FA34D; --accent-text: #1a2010; --glow-1: rgba(143, 163, 77, 0.36); --glow-2: rgba(232, 225, 188, 0.14); --hero-img: url('images/hero-almuerzo.jpg'); } body[data-moment="noche"] { --bg: #100706; --bg-soft: #1c0d0a; --text: #fff7f3; --text-mute: #d2a89d; --text-dim: #8a6358; --accent: #E14A3D; --accent-text: #1c0805; --glow-1: rgba(225, 74, 61, 0.34); --glow-2: rgba(255, 178, 126, 0.14); --hero-img: url('images/hero-noche.jpg'); } body[data-moment="madrugada"] { --bg: #070914; --bg-soft: #0e1224; --text: #eaeaff; --text-mute: #9b9bd1; --text-dim: #5b5b8c; --accent: #8C72E8; --accent-text: #0e0a24; --glow-1: rgba(140, 114, 232, 0.32); --glow-2: rgba(120, 200, 255, 0.13); --hero-img: url('images/hero-madrugada.jpg'); } /* ========================================================================= 3. Ambient background — the "morphing lights" ========================================================================= */ .ambience { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .ambience__photo { position: absolute; inset: -4%; background: var(--hero-img) center/cover no-repeat; filter: brightness(0.55) saturate(1.15) blur(0.5px); transition: background-image 1400ms var(--easing), filter 1400ms var(--easing); transform: scale(1.04); animation: ambientDrift 38s ease-in-out infinite alternate; } .ambience__glow { position: absolute; inset: 0; background: radial-gradient(circle at 72% 22%, var(--glow-1), transparent 38%), radial-gradient(circle at 18% 82%, var(--glow-2), transparent 42%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.65), transparent 55%); transition: background 1200ms var(--easing); mix-blend-mode: screen; } .ambience__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(0,0,0,0.55) 80%), linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%); pointer-events: none; } .ambience__grain { position: absolute; inset: -50%; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.45; mix-blend-mode: overlay; pointer-events: none; animation: grainShift 1.4s steps(3) infinite; } @keyframes ambientDrift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.08) translate(-1%, -2%); } } @keyframes grainShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -1%); } 75% { transform: translate(2%, 2%); } 100% { transform: translate(0, 0); } } /* ========================================================================= 4. Header ========================================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 24px; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 60%, transparent 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background 800ms var(--easing); } .site-header__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; line-height: 1; user-select: none; } .brand-logo { display: block; height: clamp(22px, 2.4vw, 30px); width: auto; filter: drop-shadow(0 0 10px var(--glow-1)) drop-shadow(0 0 22px var(--glow-1)); transition: filter 1000ms var(--easing); } .site-nav { display: none; gap: 22px; align-items: center; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); font-weight: 500; } .site-nav a { position: relative; padding: 6px 0; transition: color 200ms ease; white-space: nowrap; } .site-nav a:hover { color: var(--text); } .site-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--easing); } .site-nav a:hover::after { transform: scaleX(1); } .header-tools { display: flex; align-items: center; gap: 14px; } @media (min-width: 1024px) { .site-nav { display: flex; } } /* Language flag toggle */ .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 4px; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); } .lang-toggle__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); border-radius: 999px; transition: all 240ms var(--easing); } .lang-toggle__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); box-shadow: 0 0 18px var(--glow-1); } .lang-flag { display: inline-block; width: 18px; height: 12px; border-radius: 2px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); } .lang-flag--cl { background-image: linear-gradient(180deg, #fff 0% 50%, #d52b1e 50% 100%); position: relative; } .lang-flag--cl::before { content: ''; position: absolute; left: 0; top: 0; width: 40%; height: 50%; background: #0033a0; } .lang-flag--cl::after { content: '★'; position: absolute; left: 11%; top: -1px; color: #fff; font-size: 9px; line-height: 1; } .lang-flag--us { background: linear-gradient(#bf0a30 7.7%, #fff 7.7% 15.4%, #bf0a30 15.4% 23.1%, #fff 23.1% 30.8%, #bf0a30 30.8% 38.5%, #fff 38.5% 46.2%, #bf0a30 46.2% 53.9%, #fff 53.9% 61.6%, #bf0a30 61.6% 69.3%, #fff 69.3% 77%, #bf0a30 77% 84.7%, #fff 84.7% 92.4%, #bf0a30 92.4% 100%); position: relative; } .lang-flag--us::before { content: ''; position: absolute; left: 0; top: 0; width: 40%; height: 53.9%; background: #002868; } /* ========================================================================= 5. Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: all 320ms var(--easing); white-space: nowrap; } .btn--primary { background: var(--accent); color: var(--accent-text); box-shadow: 0 14px 44px var(--glow-1), inset 0 1px 0 rgba(255,255,255,0.3); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 60px var(--glow-1), inset 0 1px 0 rgba(255,255,255,0.4); filter: brightness(1.08); } .btn--ghost { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); backdrop-filter: blur(10px); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent); color: var(--text); } .btn__arrow { display: inline-block; transition: transform 320ms var(--easing); } .btn:hover .btn__arrow { transform: translateX(4px); } .compact-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text-mute); transition: all 240ms var(--easing); } .compact-btn:hover { color: var(--text); border-color: var(--accent); } .compact-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 24px var(--glow-1); } /* ========================================================================= 6. Layout primitives ========================================================================= */ main { position: relative; z-index: 1; } .section { position: relative; padding: clamp(80px, 12vh, 140px) 24px; } .section__inner { max-width: 1280px; margin: 0 auto; position: relative; } .section--light { background: #f3eee4; color: #1a1306; z-index: 2; } .section--light .eyebrow { color: rgba(0,0,0,0.55); } .section--light .display { color: #1a1306; } .eyebrow { display: inline-block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-bottom: 24px; transition: color 800ms var(--easing); } .display { font-family: var(--display); font-size: clamp(36px, 5.2vw, 72px); line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; color: var(--text); transition: color 800ms var(--easing); } .display--mega { font-size: clamp(52px, 8vw, 112px); line-height: 0.88; font-weight: 900; letter-spacing: -0.045em; } .lede { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; font-weight: 300; color: var(--text-mute); max-width: 56ch; transition: color 800ms var(--easing); } /* ========================================================================= 7. Hero ========================================================================= */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(120px, 18vh, 180px) 24px clamp(50px, 8vh, 90px) 24px; position: relative; } .hero__pulse { position: absolute; top: clamp(110px, 14vh, 160px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: rgba(0,0,0,0.4); border: 1px solid var(--line); backdrop-filter: blur(10px); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; } .hero__pulse::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulseLight 2.4s ease-in-out infinite; } @keyframes pulseLight { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } .hero__inner { max-width: 1280px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: end; } @media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: 80px; } } .hero__brand { display: block; margin: 12px 0 32px; user-select: none; /* The animation runs on a wrapper so the logo's drop-shadow filter is preserved */ animation: brandPulse 6s ease-in-out infinite alternate; } .hero__brand-logo { display: block; width: clamp(280px, 56vw, 720px); height: auto; filter: drop-shadow(0 0 18px var(--glow-1)) drop-shadow(0 0 42px var(--glow-1)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)); transition: filter 1200ms var(--easing); } @keyframes brandPulse { from { transform: scale(1.0); opacity: 0.95; } to { transform: scale(1.015); opacity: 1; } } .hero__eyebrow { font-size: 12px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--text-mute); font-weight: 500; margin-bottom: 14px; } .hero__tagline { font-family: var(--display); font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; color: var(--text); margin-bottom: 22px; font-weight: 700; } .hero__copy { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; color: var(--text-mute); margin-bottom: 36px; max-width: 52ch; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; } .hero__card { position: relative; padding: 28px 28px 26px; border-radius: 24px; background: rgba(20, 16, 12, 0.55); border: 1px solid var(--line); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 30px 80px rgba(0,0,0,0.5); transition: all 800ms var(--easing); } .hero__card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; } .hero__card-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; } .hero__card-badge { padding: 7px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; box-shadow: 0 0 18px var(--glow-1); } .hero__card-title { font-family: var(--display); font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; color: var(--text); margin-bottom: 14px; } .hero__card-copy { font-size: 14px; line-height: 1.55; color: var(--text-mute); margin-bottom: 22px; } .hero__card-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hero__card-menu-item { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); font-size: 12px; letter-spacing: 0.04em; color: var(--text); font-weight: 400; } .hero__moments { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 768px) { .hero__moments { grid-template-columns: repeat(4, 1fr); gap: 10px; } } .moment-chip { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,0.4); border: 1px solid var(--line); text-align: left; transition: all 300ms var(--easing); backdrop-filter: blur(8px); } .moment-chip:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-2px); } .moment-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 12px 36px var(--glow-1); transform: translateY(-2px); } .moment-chip__label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 4px; } .moment-chip__time { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; } .hero__hint { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-dim); margin-top: 16px; text-align: center; } /* ========================================================================= 7b. Morph showcase — the lighting system, on a loop ========================================================================= */ .morph { padding: clamp(80px, 12vh, 140px) 24px clamp(80px, 12vh, 140px); position: relative; overflow: hidden; } .morph__head { max-width: 880px; margin: 0 auto clamp(40px, 5vh, 60px); text-align: center; } .morph__head .lede { margin-left: auto; margin-right: auto; } .morph__stage { position: relative; max-width: 1320px; margin: 0 auto; } .morph__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: clamp(20px, 2.4vw, 36px); overflow: hidden; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; background: #050403; isolation: isolate; } .morph__img, .morph__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1500ms cubic-bezier(0.4, 0, 0.2, 1), transform 6500ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; pointer-events: none; } .morph__video { z-index: 2; } /* sits ABOVE the still when both are present */ .morph__img { z-index: 1; } .morph__stage[data-active="manana"] .morph__img[data-morph-key="manana"], .morph__stage[data-active="almuerzo"] .morph__img[data-morph-key="almuerzo"], .morph__stage[data-active="noche"] .morph__img[data-morph-key="noche"], .morph__stage[data-active="madrugada"] .morph__img[data-morph-key="madrugada"] { opacity: 1; transform: scale(1.05); } /* The video crossfades in once it has data + is ready to play; the still stays underneath as a graceful fallback if the network is slow. */ .morph__stage[data-active="manana"] .morph__video[data-morph-key="manana"][data-ready="true"], .morph__stage[data-active="almuerzo"] .morph__video[data-morph-key="almuerzo"][data-ready="true"], .morph__stage[data-active="noche"] .morph__video[data-morph-key="noche"][data-ready="true"], .morph__stage[data-active="madrugada"] .morph__video[data-morph-key="madrugada"][data-ready="true"] { opacity: 1; transform: scale(1.05); } /* Color halo — soft outer glow that shifts with the active moment. This is the "RGB rig" reflected on the frame's environment. */ .morph__halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 78% 22%, var(--morph-glow-1, rgba(245,193,77,0.55)), transparent 45%), radial-gradient(ellipse at 22% 80%, var(--morph-glow-2, rgba(255,220,150,0.18)), transparent 45%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%); mix-blend-mode: screen; transition: background 1500ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .morph__stage[data-active="manana"] .morph__halo { background: radial-gradient(ellipse at 78% 22%, rgba(245,193,77,0.45), transparent 45%), radial-gradient(ellipse at 22% 80%, rgba(255,220,150,0.2), transparent 45%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%); } .morph__stage[data-active="almuerzo"] .morph__halo { background: radial-gradient(ellipse at 78% 22%, rgba(143,163,77,0.4), transparent 45%), radial-gradient(ellipse at 22% 80%, rgba(232,225,188,0.18), transparent 45%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%); } .morph__stage[data-active="noche"] .morph__halo { background: radial-gradient(ellipse at 78% 22%, rgba(225,74,61,0.45), transparent 45%), radial-gradient(ellipse at 22% 80%, rgba(255,178,126,0.2), transparent 45%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%); } .morph__stage[data-active="madrugada"] .morph__halo { background: radial-gradient(ellipse at 78% 22%, rgba(140,114,232,0.5), transparent 45%), radial-gradient(ellipse at 22% 80%, rgba(120,200,255,0.2), transparent 45%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.6) 100%); } /* Caption block, pinned bottom-left, glassy */ .morph__caption { position: absolute; left: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); z-index: 3; padding: 18px 24px 20px; border-radius: 22px; background: rgba(8, 6, 5, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.12); max-width: min(520px, 70%); transition: background 1200ms cubic-bezier(0.4, 0, 0.2, 1); } .morph__time { display: inline-block; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px; font-weight: 600; font-feature-settings: "tnum"; } .morph__moment { font-family: var(--display); font-size: clamp(26px, 3.2vw, 38px); line-height: 0.95; letter-spacing: -0.035em; color: #fff; margin: 0 0 10px; font-weight: 800; } .morph__copy-line { font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; color: rgba(255, 255, 255, 0.78); font-weight: 300; } .morph__playpause { position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px); z-index: 4; width: 44px; height: 44px; border-radius: 999px; background: rgba(8, 6, 5, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: all 240ms var(--easing); } .morph__playpause:hover { background: rgba(8, 6, 5, 0.8); transform: scale(1.05); border-color: rgba(255, 255, 255, 0.4); } .morph__playpause[aria-pressed="true"] .morph__playpause-icon::before { content: '▶'; padding-left: 2px; } .morph__playpause[aria-pressed="false"] .morph__playpause-icon::before { content: '⏸'; } .morph__playpause-icon { display: inline-block; line-height: 1; } /* Bottom rail — 4 dots, one per moment */ .morph__rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; } @media (min-width: 720px) { .morph__rail { grid-template-columns: repeat(4, 1fr); gap: 14px; } } .morph__dot { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); text-align: left; transition: all 240ms var(--easing); overflow: hidden; } .morph__dot:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .morph__dot[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); } .morph__dot-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 0 14px currentColor; position: relative; z-index: 2; } .morph__dot[data-morph-key="manana"] .morph__dot-swatch { color: rgba(245, 193, 77, 0.55); } .morph__dot[data-morph-key="almuerzo"] .morph__dot-swatch { color: rgba(143, 163, 77, 0.55); } .morph__dot[data-morph-key="noche"] .morph__dot-swatch { color: rgba(225, 74, 61, 0.55); } .morph__dot[data-morph-key="madrugada"] .morph__dot-swatch { color: rgba(140, 114, 232, 0.55); } .morph__dot-label { font-size: 12px; letter-spacing: 0.12em; font-weight: 600; color: var(--text); text-transform: uppercase; position: relative; z-index: 2; } /* Progress fill that drains across the dot while it's active */ .morph__dot-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.18)); z-index: 1; pointer-events: none; border-radius: inherit; } .morph__dot[data-morph-key="manana"] .morph__dot-progress { background: linear-gradient(90deg, rgba(245, 193, 77, 0.18), rgba(245, 193, 77, 0.34)); } .morph__dot[data-morph-key="almuerzo"] .morph__dot-progress { background: linear-gradient(90deg, rgba(143, 163, 77, 0.18), rgba(143, 163, 77, 0.34)); } .morph__dot[data-morph-key="noche"] .morph__dot-progress { background: linear-gradient(90deg, rgba(225, 74, 61, 0.18), rgba(225, 74, 61, 0.34)); } .morph__dot[data-morph-key="madrugada"] .morph__dot-progress { background: linear-gradient(90deg, rgba(140, 114, 232, 0.18), rgba(140, 114, 232, 0.34)); } /* When paused, dim the active progress fill so it doesn't look "stuck" */ .morph__stage[data-paused="true"] .morph__dot-progress { opacity: 0.45; } /* ========================================================================= 8. Manifest section ========================================================================= */ .manifest { padding: clamp(120px, 16vh, 200px) 24px; position: relative; text-align: center; } .manifest__inner { max-width: 980px; margin: 0 auto; } .manifest__title { font-family: var(--display); font-size: clamp(34px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -0.035em; color: var(--text); margin-bottom: 56px; font-weight: 800; text-wrap: balance; } .manifest__lines { display: flex; flex-direction: column; gap: 30px; } .manifest__line { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.55; color: var(--text-mute); font-weight: 300; } .manifest__line strong { color: var(--text); font-weight: 500; } .manifest__sign { margin-top: 50px; display: flex; justify-content: center; } .manifest__sign-logo { display: block; height: clamp(34px, 4vw, 52px); width: auto; filter: drop-shadow(0 0 14px var(--glow-1)) drop-shadow(0 0 32px var(--glow-1)); transition: filter 1000ms var(--easing); } /* ========================================================================= 9. Moments section (the timelapse demo) ========================================================================= */ .moments { padding: clamp(80px, 12vh, 140px) 24px; } .moments__head { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 56px; align-items: end; } @media (min-width: 1024px) { .moments__head { grid-template-columns: 0.8fr 1.2fr; gap: 48px; } } .moments__controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .moments__list { display: grid; grid-template-columns: 1fr; gap: 12px; } .moment-card { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 22px 26px; border-radius: 26px; border: 1px solid rgba(0,0,0,0.1); background: #fff; text-align: left; transition: all 320ms var(--easing); cursor: pointer; } .moment-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.3); } .moment-card[aria-pressed="true"] { background: #131008; border-color: #131008; color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,0.18); } .moment-card[aria-pressed="true"] .moment-card__note { color: rgba(255,255,255,0.6); } .moment-card__label { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .moment-card__note { font-size: 13px; line-height: 1.5; color: rgba(0,0,0,0.55); margin-top: 6px; } .moment-card__time { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; white-space: nowrap; background: #f3eee4; color: #1a1306; } .moment-card[aria-pressed="true"] .moment-card__time { background: var(--moment-accent, #F4C14D); color: #1A1306; box-shadow: 0 0 24px var(--moment-glow, rgba(245,193,77,0.4)); } /* ========================================================================= 10. Carta section ========================================================================= */ .carta__head { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; align-items: end; } @media (min-width: 1024px) { .carta__head { grid-template-columns: 0.9fr 1.1fr; gap: 48px; } } .carta__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .carta-tab { padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; transition: all 240ms var(--easing); } .carta-tab:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); } .carta-tab[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); } .carta__panel { border-radius: 32px; border: 1px solid var(--line); background: rgba(0,0,0,0.35); backdrop-filter: blur(20px); padding: clamp(28px, 4vw, 48px); box-shadow: 0 30px 80px rgba(0,0,0,0.4); } .carta__panel-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--line); } @media (min-width: 768px) { .carta__panel-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; } } .carta__panel-title { font-family: var(--display); font-size: clamp(32px, 3.8vw, 52px); line-height: 0.95; letter-spacing: -0.035em; color: var(--text); font-weight: 800; } .carta__panel-sub { font-size: 16px; line-height: 1.55; color: var(--text-mute); max-width: 48ch; } .carta__grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 720px) { .carta__grid { grid-template-columns: 1fr 1fr; gap: 26px; } } .carta__cat { padding: 0; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); overflow: hidden; transition: transform 360ms var(--easing), box-shadow 360ms var(--easing), border-color 360ms var(--easing); } .carta__cat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.18); box-shadow: 0 24px 60px rgba(0,0,0,0.35); } .carta__cat-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.4); transition: transform 700ms var(--easing); } .carta__cat:hover .carta__cat-image { transform: scale(1.04); } .carta__cat-body { padding: 24px 24px 26px; } .carta__cat-name { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 16px; } .carta__item { padding: 14px 0; border-bottom: 1px solid var(--line); } .carta__item:last-child { border-bottom: 0; } .carta__item-name { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: 0.01em; } .carta__item-name::after { content: ''; flex: 1; margin: 9px 6px 0; border-bottom: 1px dotted var(--text-dim); opacity: 0.45; } .carta__item-desc { font-size: 13px; line-height: 1.55; color: var(--text-mute); } .carta__disclaimer { margin-top: 28px; padding: 18px 22px; border-radius: 16px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); font-size: 12px; line-height: 1.55; color: var(--text-dim); } /* ========================================================================= 11. Memberships section ========================================================================= */ .memberships__head { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 56px; align-items: end; } @media (min-width: 1024px) { .memberships__head { grid-template-columns: 1fr 1fr; gap: 64px; } } .memberships__progress { margin-bottom: 60px; } .memberships__progress-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 14px; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-dim); } .memberships__progress-bar { height: 3px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; } .memberships__progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; box-shadow: 0 0 18px var(--glow-1); transition: width 1800ms var(--easing); } .memberships__grid { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 880px) { .memberships__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1180px) { .memberships__grid { grid-template-columns: repeat(3, 1fr); } } .tier { position: relative; border-radius: 36px; padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.18)); transition: transform 400ms var(--easing); } .tier--circulo { background: linear-gradient(135deg, #f7f4ea, #b9b3a7 50%, #5e5e5e); } .tier--empresas { background: linear-gradient(135deg, #ffffff, #b8f5ff 35%, #b6332a); } .tier--origen { background: linear-gradient(135deg, #f9e7a3, #c6a25a 50%, #7a5a24); } .tier:hover { transform: translateY(-10px); } .tier__inner { position: relative; border-radius: 35px; background: #090807; padding: 36px 32px 36px; min-height: 580px; overflow: hidden; display: flex; flex-direction: column; } .tier__sparkle { position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.12), transparent 30%), radial-gradient(circle at 80% 100%, rgba(255,255,255,0.05), transparent 25%); pointer-events: none; } .tier__shine { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%); transform: translateX(-100%); transition: transform 1100ms var(--easing); pointer-events: none; } .tier:hover .tier__shine { transform: translateX(100%); } .tier__head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 24px; position: relative; } .tier__eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 12px; } .tier__name { font-family: var(--display); font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -0.035em; color: #fff; } .tier__price { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.55); text-align: right; max-width: 130px; } .tier__headline { font-size: 20px; line-height: 1.25; font-weight: 600; color: #fff; margin-bottom: 14px; position: relative; } .tier__copy { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.55); margin-bottom: 18px; position: relative; } .tier__condition { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 24px; } .tier__benefits { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; position: relative; } .tier__benefit { display: flex; gap: 14px; } .tier__benefit-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 8px; background: linear-gradient(135deg, #fff, var(--accent)); flex-shrink: 0; box-shadow: 0 0 12px var(--glow-1); } .tier__benefit-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; } .tier__benefit-desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); } .tier__cta { margin-top: auto; width: 100%; padding: 18px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #fff; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; transition: all 280ms var(--easing); position: relative; } .tier__cta:hover { background: #fff; color: #000; border-color: #fff; } /* ========================================================================= 12. Allies section ========================================================================= */ .allies__head { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px; align-items: end; } @media (min-width: 1024px) { .allies__head { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } } .allies__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 640px) { .allies__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (min-width: 960px) { .allies__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } } .ally { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 16px; border-radius: 18px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(12px); transition: background 360ms var(--easing), border-color 360ms var(--easing), transform 360ms var(--easing); text-align: center; } .ally:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); } .ally__logo { position: relative; height: 64px; display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.92); overflow: hidden; transition: background 360ms var(--easing); } .ally:hover .ally__logo { background: #ffffff; } .ally__logo img { display: block; width: auto; max-width: 100%; max-height: 44px; object-fit: contain; filter: grayscale(1) brightness(0.88) opacity(0.55); transition: filter 360ms var(--easing), transform 360ms var(--easing); } .ally:hover .ally__logo img { filter: grayscale(0) brightness(1) opacity(1); animation: allyFlash 760ms var(--easing); } /* Brief LED-style flare when the logo lights up — quick saturate spike, then settles to natural color. Like a bulb popping on. */ @keyframes allyFlash { 0% { filter: grayscale(0.6) brightness(1.0) saturate(1.0); transform: scale(1.0); } 20% { filter: grayscale(0) brightness(1.55) saturate(1.6); transform: scale(1.06); } 55% { filter: grayscale(0) brightness(1.1) saturate(1.1); transform: scale(1.0); } 100% { filter: grayscale(0) brightness(1.0) saturate(1.0); transform: scale(1.0); } } .ally__name { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.04em; margin-top: 2px; transition: color 240ms var(--easing); } .ally__role { font-size: 10px; line-height: 1.4; color: var(--text-dim); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 500; } .ally:hover .ally__name { color: var(--accent); } /* ========================================================================= 13. Team / vestimenta — full-bleed cinematic scroll narrative Goes from deep night → Veo morph → light day → brand rules. ========================================================================= */ .team-cine { position: relative; z-index: 2; margin: 0; padding: 0; /* Pull out of the section padding so it spans the viewport edge-to-edge */ width: 100vw; margin-left: calc(50% - 50vw); } /* Intro — sits on the prevailing dark page background */ .team-cine__intro { max-width: 980px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) 24px clamp(50px, 7vh, 80px); text-align: center; } .team-cine__intro .lede { margin: 26px auto 0; max-width: 60ch; } /* Shift block — common */ .team-cine__shift { position: relative; padding: clamp(60px, 9vh, 110px) 0 clamp(80px, 12vh, 140px); } .team-cine__shift-head { text-align: center; margin-bottom: clamp(40px, 6vh, 70px); padding: 0 24px; } .team-cine__shift-tag { display: inline-block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; padding: 8px 18px; border-radius: 999px; border: 1px solid currentColor; margin-bottom: 22px; } .team-cine__shift-title { font-family: var(--display); font-size: clamp(36px, 5.5vw, 76px); line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; } /* Night shift — dark */ .team-cine__shift--night { background: radial-gradient(ellipse at 50% 0%, rgba(225, 74, 61, 0.18), transparent 50%), linear-gradient(180deg, #0a0807 0%, #060403 100%); color: #f5f1e8; } .team-cine__shift--night .team-cine__shift-tag { color: rgba(255, 178, 126, 0.85); } .team-cine__shift--night .team-cine__shift-title { color: #fff7f3; } /* Day shift — light */ .team-cine__shift--day { background: radial-gradient(ellipse at 50% 0%, rgba(244, 193, 77, 0.18), transparent 55%), linear-gradient(180deg, #f4f0e3 0%, #ece5d3 100%); color: #1a1306; } .team-cine__shift--day .team-cine__shift-tag { color: rgba(95, 55, 12, 0.85); } .team-cine__shift--day .team-cine__shift-title { color: #1a1306; } /* Lineup — magazine-spread alternating layout */ .team-cine__lineup { display: flex; flex-direction: column; gap: clamp(50px, 8vh, 110px); max-width: 1480px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } .staff-portrait { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 800px) { .staff-portrait { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); } .staff-portrait--reverse .staff-portrait__image-wrap { order: 2; } .staff-portrait--reverse .staff-portrait__caption { order: 1; } } .staff-portrait__image-wrap { position: relative; overflow: hidden; border-radius: clamp(16px, 2vw, 28px); box-shadow: 0 28px 80px rgba(0,0,0,0.45); /* The crop is portrait — ~0.47 aspect. Honor that on the page. */ aspect-ratio: 0.47 / 1; background: rgba(0,0,0,0.4); transition: transform 800ms var(--easing); } .team-cine__shift--day .staff-portrait__image-wrap { box-shadow: 0 28px 80px rgba(80, 60, 30, 0.18); } .staff-portrait:hover .staff-portrait__image-wrap { transform: translateY(-4px); } .staff-portrait__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 1200ms var(--easing); } .staff-portrait:hover .staff-portrait__image { transform: scale(1.04); } .staff-portrait__caption { display: flex; flex-direction: column; justify-content: center; padding: clamp(14px, 2vw, 28px) 0; } .staff-portrait__role-tag { display: inline-block; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; opacity: 0.7; } .staff-portrait__role-name { font-family: var(--display); font-size: clamp(40px, 5vw, 76px); line-height: 0.92; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 20px; text-wrap: balance; } .staff-portrait__role-line { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.55; max-width: 36ch; opacity: 0.75; } /* The morph — full-bleed video sits between the two shifts */ .team-cine__morph { position: relative; background: linear-gradient(180deg, #060403 0%, #1a1108 38%, #5b4a32 65%, #ece5d3 100%); padding: clamp(80px, 12vh, 140px) 24px clamp(80px, 12vh, 140px); text-align: center; } .team-cine__morph-frame { position: relative; width: clamp(280px, 50vw, 540px); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: clamp(20px, 2.4vw, 36px); overflow: hidden; box-shadow: 0 60px 140px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset; background: #050403; } .team-cine__morph-video, .team-cine__morph-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .team-cine__morph-poster { z-index: 1; } .team-cine__morph-video { z-index: 2; opacity: 0; transition: opacity 1200ms var(--easing); } .team-cine__morph-video[data-ready="true"] { opacity: 1; } .team-cine__morph-caption { margin-top: clamp(28px, 4vh, 48px); font-family: var(--display); font-size: clamp(20px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,0.92); text-shadow: 0 2px 14px rgba(0,0,0,0.6); font-style: italic; } /* Rules close-out — sits on light bg below */ .team-cine__rules-block { background: linear-gradient(180deg, #ece5d3 0%, #f4f1e6 100%); padding: clamp(60px, 9vh, 110px) 24px clamp(80px, 12vh, 140px); color: #1a1306; } .team-cine__rules-inner { max-width: 1080px; margin: 0 auto; } .team__rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 720px) { .team__rules { grid-template-columns: repeat(4, 1fr); gap: 20px; } } .team__rule { padding: 26px 22px; border-radius: 18px; background: rgba(26, 19, 6, 0.04); border: 1px solid rgba(26, 19, 6, 0.08); } .team__rule-k { font-family: var(--display); font-size: clamp(36px, 4.4vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #1a1306; margin-bottom: 10px; } .team__rule-v { font-size: 13px; line-height: 1.55; color: rgba(26, 19, 6, 0.65); } /* ========================================================================= 14. Space (floorplan / stats) ========================================================================= */ .space__inner { display: grid; grid-template-columns: 1fr; gap: 50px; } @media (min-width: 900px) { .space__inner { grid-template-columns: 1fr 1fr; gap: 64px; } } .space__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; } .space__stat { padding: 28px 24px; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); text-align: left; } .space__stat-k { font-family: var(--display); font-size: clamp(40px, 5vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 12px; } .space__stat-v { font-size: 14px; line-height: 1.5; color: var(--text-mute); } .space__visual { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: rgba(0,0,0,0.4); box-shadow: 0 30px 80px rgba(0,0,0,0.5); aspect-ratio: 1.4 / 1; background: radial-gradient(circle at 30% 30%, var(--glow-1), transparent 60%), radial-gradient(circle at 70% 70%, var(--glow-2), transparent 60%), rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; } .space__visual img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.1) contrast(1.05); } /* ========================================================================= 15. Location section ========================================================================= */ .location__inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; } @media (min-width: 900px) { .location__inner { grid-template-columns: 1fr 1fr; gap: 64px; } } .location__map { border-radius: 28px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); aspect-ratio: 1.3 / 1; background: #f3eee4; box-shadow: 0 30px 80px rgba(0,0,0,0.15); } .location__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: contrast(1.05) saturate(0.85); } .location__address { font-family: var(--display); font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: #1a1306; margin: 28px 0 20px; font-weight: 500; } .location__city { font-size: 14px; letter-spacing: 0.04em; color: rgba(0,0,0,0.6); margin-bottom: 28px; } .location__opening { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: #131008; color: #f4c14d; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; margin-bottom: 28px; } .location__opening::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f4c14d; box-shadow: 0 0 12px #f4c14d; animation: pulseLight 2.4s ease-in-out infinite; } /* ========================================================================= 16. Footer ========================================================================= */ .site-footer { position: relative; z-index: 2; background: #090807; padding: 70px 24px 40px; border-top: 1px solid rgba(255,255,255,0.08); } .site-footer__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 36px; } @media (min-width: 800px) { .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: 48px; } } .site-footer__brand { display: block; margin-bottom: 20px; } .site-footer__brand-logo { display: block; height: clamp(32px, 4vw, 48px); width: auto; filter: drop-shadow(0 0 12px var(--glow-1)) drop-shadow(0 0 28px var(--glow-1)); transition: filter 1200ms var(--easing); } .site-footer__tagline { font-family: var(--display); font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.7); margin-bottom: 14px; letter-spacing: 0.01em; } .site-footer__col h4 { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.4); font-weight: 600; margin-bottom: 14px; } .site-footer__col p, .site-footer__col a { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.7); } .site-footer__col a:hover { color: var(--accent); } .site-footer__legal { max-width: 1280px; margin: 50px auto 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.04em; } .blue-credit { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); } .blue-credit a { color: #66b3ff; font-weight: 600; transition: color 200ms; } .blue-credit a:hover { color: #93c5fd; } /* ========================================================================= 17. Reveal-on-scroll ========================================================================= */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1100ms var(--easing), transform 1100ms var(--easing); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .ambience__photo, .hero__brand, .ambience__grain { animation: none !important; } * { transition-duration: 0ms !important; } } /* ========================================================================= 18. Utilities ========================================================================= */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-balance { text-wrap: balance; }