/* MAREA — la inmersión. Tokens + estructura + skin. Ver BRIEF.md para la razón de cada regla. */ /* ── tokens (BRIEF §3/4) ─────────────────────────────────────────────── */ :root{ --c-abyss: #071226; --c-navy: #0B1E3F; --c-water: #143A6B; --c-chrome:#F2B705; --c-gold: #C98F1A; --c-foam: #EEF1F6; --c-mist: #A9B7D0; --c-amber: #E0842A; --c-line: rgba(238,241,246,.14); --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Archivo', system-ui, sans-serif; --font-mono: 'Courier Prime', ui-monospace, monospace; --ease: cubic-bezier(.22,.86,.26,.99); --ease-soft: cubic-bezier(.4,0,.2,1); --dur: .5s; --radius: 14px; --container: 1180px; --depth: 0; /* set by assets/sea.js on ; 0 = surface, 1 = seabed */ } /* ── reset / base ────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ background:var(--c-navy); scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; } body{ background:transparent; /* compositor rule: page bg lives on html, never body */ color:var(--c-foam); font-family:var(--font-body); font-variation-settings:"wdth" 100; font-weight:400; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; } img,svg{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } ul{ list-style:none } ::selection{ background:var(--c-chrome); color:var(--c-abyss) } :focus-visible{ outline:2px solid var(--c-chrome); outline-offset:3px; border-radius:4px } @media (min-width:760px){ body{ font-size:18px } } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 } .skip-link{ position:fixed; top:.75rem; left:.75rem; z-index:200; padding:.85rem 1.25rem; background:var(--c-chrome); color:var(--c-abyss); font-weight:700; font-family:var(--font-display); border-radius:8px; transform:translateY(-250%); transition:transform var(--dur) var(--ease); } .skip-link:focus-visible{ transform:none } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem) } /* display / mono type utilities */ .disp{ font-family:var(--font-display); font-variation-settings:"wdth" 75; font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.02; } .label{ font-family:var(--font-mono); font-weight:400; text-transform:uppercase; letter-spacing:.08em; font-size:.8125rem; } h1,h2,h3{ font-family:var(--font-display); font-variation-settings:"wdth" 75; font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.04 } h2{ font-size:clamp(1.9rem,7vw,3.1rem); max-width:16ch } h3{ font-size:clamp(1.3rem,4.5vw,1.9rem) } /* ── reveal-on-scroll (no-js safe pattern, LESSONS victoria-andreu v2) ── */ html:not(.no-js) .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity, transform; } html:not(.no-js) .reveal.is-in{ opacity:1; transform:none } /* ── compositor layers (video / canvas / grain fallback) ────────────── */ /* capas fijas de fondo: 100lvh (viewport MÁXIMO) para que no cambien de tamaño cuando la barra de URL del móvil se esconde — con height:100% aparecía una franja marina abajo durante un frame (Joan) */ .hero-video{ position:fixed; inset:0; width:100%; height:100vh; height:100lvh; object-fit:cover; z-index:0; background:var(--c-navy); } #sea{ position:fixed; inset:0; width:100%; height:100vh; height:100lvh; z-index:1; pointer-events:none; will-change:transform } .grain-fallback{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.09; background:url(grain.png); background-size:180px; display:none; } html.nosea .grain-fallback, html.no-js .grain-fallback{ display:block } html.nosea #sea, html.no-js #sea{ display:none } /* sin WebGL el vídeo fijo NO puede quedar de fondo bajo toda la página: se queda en el hero y se va con el scroll */ html.nosea .hero-video, html.no-js .hero-video{ position:absolute; inset:auto; top:0; left:0; height:100vh; height:100svh } /* cerrojo de la marea (sea.js pone html.tide-lock mientras el gesto sube el agua) */ html{ scrollbar-gutter:stable } html.tide-lock, html.tide-lock body{ overflow:hidden; touch-action:none; overscroll-behavior:none } html.nosea body, html.no-js body{ background:linear-gradient(var(--c-navy), var(--c-abyss)) } main#page{ position:relative; z-index:2 } .station{ position:relative; z-index:2 } .site-footer{ position:relative; z-index:2 } /* ── plate: soft scrim behind copy over the live scene ──────────────── */ .plate{ position:relative; z-index:0; padding:clamp(1.5rem,5vw,2.5rem) clamp(1.25rem,4.5vw,2.25rem); border-radius:var(--radius); } .plate::before{ content:""; position:absolute; z-index:-1; inset:-18% -14%; border-radius:inherit; pointer-events:none; background:radial-gradient(ellipse 52% 52% at 50% 50%, rgba(11,30,63,.74) 0%, rgba(11,30,63,.56) 45%, rgba(11,30,63,0) 100%); } .plate.grainy::after{ content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none; background:url(grain.png); background-size:160px; opacity:.05; mix-blend-mode:normal; } h2.disp, h3.disp{ text-shadow:0 2px 26px #071226 } /* ── buttons ─────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.9rem 1.6rem; border-radius:999px; font-family:var(--font-display); font-variation-settings:"wdth" 85; font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn-chrome{ background:var(--c-chrome); color:var(--c-abyss) } .btn-chrome:hover, .btn-chrome:focus-visible{ background:var(--c-gold); transform:translateY(-2px) } .btn-ghost{ background:transparent; color:var(--c-foam); border:1.5px solid color-mix(in srgb, var(--c-foam) 55%, transparent); } .btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--c-foam); transform:translateY(-2px) } /* ── header ──────────────────────────────────────────────────────────── */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem clamp(1rem,4.5vw,2.25rem); } .site-header::before{ content:""; position:absolute; inset:0 0 -2.5rem 0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(7,18,38,.82), transparent); } .header-start, .header-end{ text-shadow:0 1px 10px rgba(7,18,38,.9) } .header-start{ display:flex; align-items:center; gap:.4rem; min-width:0 } .mark{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:-.4rem; flex:none; } .mark::before{ content:""; display:block; width:34px; aspect-ratio:777.12/606.08; -webkit-mask-image:url(logo/isotipo2-crop.svg); mask-image:url(logo/isotipo2-crop.svg); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; background-color:var(--c-foam); filter:drop-shadow(0 2px 10px rgba(7,18,38,.6)); transition:background-color var(--dur) var(--ease); } @supports (color:color-mix(in srgb, red, blue)){ .mark::before{ background-color:color-mix(in srgb, var(--c-chrome) calc(var(--depth,0) * 100%), var(--c-foam)) } } @supports not (color:color-mix(in srgb, red, blue)){ html.is-under .mark::before{ background-color:var(--c-chrome) } } .lang-switch{ display:flex; gap:.2rem; flex:none } .lang-switch button{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:.25rem .4rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-mist); border-radius:8px; white-space:nowrap; transition:color .3s var(--ease); } .lang-switch .txt{ position:relative; z-index:1 } .lang-switch .fill{ position:absolute; inset:0; z-index:0; background:var(--c-chrome); transform:translateY(calc(100% + 8px)); transform-origin:bottom; transition:transform .6s cubic-bezier(.4,0,.2,1); } .lang-switch .crest{ position:absolute; top:-5px; left:-2px; right:-2px; height:8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4 V8 H0 Z' fill='%23F2B705'/%3E%3C/svg%3E"); background-repeat:repeat-x; background-size:20px 8px; animation:crest 1.1s linear infinite; opacity:0; transition:opacity .6s cubic-bezier(.4,0,.2,1); } .lang-switch button[aria-current="true"] .crest{ opacity:1 } @keyframes crest{ from{ background-position-x:0 } to{ background-position-x:20px } } .lang-switch button[aria-current="true"] .fill{ transform:translateY(0) } .lang-switch button[aria-current="true"], .lang-switch button[aria-current="true"]:hover, .lang-switch button[aria-current="true"]:focus-visible{ color:var(--c-abyss) } .lang-switch button:hover{ color:var(--c-foam) } .header-end{ display:flex; align-items:center; gap:.6rem; flex:none } .menu-toggle{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; width:44px; height:44px; border-radius:10px; flex:none; } .menu-toggle span{ display:block; width:20px; height:2px; background:var(--c-foam); border-radius:2px; filter:drop-shadow(0 1px 4px rgba(7,18,38,.9)); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease) } .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) } .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 } .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) } .nav-overlay{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; justify-content:center; gap:2.5rem; padding:clamp(1.25rem,6vw,3rem); padding-top:calc(5rem + env(safe-area-inset-top, 0px)); background:var(--c-navy); color:var(--c-foam); /* opaco: a .995 el hero se transparentaba como fantasma tras el logotipo */ transform:translateY(100%); visibility:hidden; transition:transform .55s cubic-bezier(.4,0,.2,1), visibility 0s .55s; } .nav-overlay::before{ content:""; position:absolute; top:-31px; left:-10%; width:120%; height:32px; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M0 16 Q16 0 32 16 T64 16 V32 H0 Z' fill='%230B1E3F'/%3E%3C/svg%3E"); background-repeat:repeat-x; background-size:64px 32px; opacity:.96; animation:crestDrift 7s linear infinite; } @keyframes crestDrift{ from{ background-position-x:0 } to{ background-position-x:64px } } .nav-overlay.is-open{ transform:translateY(0); visibility:visible; transition:transform .55s cubic-bezier(.4,0,.2,1); } .nav-list{ display:grid; gap:.3rem } .nav-link{ display:grid; grid-template-columns:2.4rem 1fr; align-items:baseline; gap:.75rem; min-height:44px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:clamp(1.5rem,7vw,2.4rem); line-height:1.3; opacity:0; transform:translateY(.8em); transition:opacity .5s var(--ease), transform .5s var(--ease), color var(--dur) var(--ease); } .nav-overlay.is-open .nav-link{ opacity:1; transform:none; transition-delay:calc(var(--i,0) * 70ms + 320ms) } .nav-link:hover, .nav-link:focus-visible{ color:var(--c-chrome) } .nav-num{ font-size:1.3rem; letter-spacing:.05em; color:var(--c-chrome) } .nav-close{ position:absolute; top:calc(clamp(1.25rem,6vw,3rem) + env(safe-area-inset-top,0px)); right:clamp(1.25rem,6vw,3rem); z-index:1; display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.5rem .6rem; font-family:var(--font-mono); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-mist); } .nav-close span[aria-hidden]{ font-size:1.1rem } .nav-close:hover, .nav-close:focus-visible{ color:var(--c-chrome) } /* pie del menú: sin idiomas; el logotipo con luna ocupa TODO el espacio inferior (Joan) */ .nav-overlay{ justify-content:flex-start } .nav-overlay nav{ flex:none } .nav-mark{ flex:1 1 auto; width:100%; min-height:0; max-height:44vh; -webkit-mask-image:url(logo/logo_2-crop.svg); mask-image:url(logo/logo_2-crop.svg); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center bottom; mask-position:center bottom; background-color:var(--c-foam); } .nav-foot{ flex:1 1 auto; min-height:140px; display:flex; align-items:stretch; justify-content:center; padding-top:1.5rem; border-top:1px solid var(--c-line); opacity:0; transition:opacity .5s var(--ease) .58s; } .nav-overlay.is-open .nav-foot{ opacity:1 } .nav-instagram{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-display); font-variation-settings:"wdth" 75; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem,4.5vw,1.6rem); color:var(--c-chrome); } .nav-instagram:hover, .nav-instagram:focus-visible{ color:var(--c-foam) } /* ── hero ────────────────────────────────────────────────────────────── */ .hero{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(5.5rem + env(safe-area-inset-top,0px)) clamp(1.25rem,5vw,3rem) clamp(2.25rem,7vh,3.5rem); } .hero-copy{ position:relative; z-index:2; transition:opacity .5s var(--ease), transform .5s var(--ease) } html.is-under .hero-copy{ opacity:.85; transform:translateY(-4px) } /* la elipse acaba EXACTAMENTE en el borde de su caja (radios 50%): ningún escalón visible sobre el vídeo */ .hero-copy::before{ content:""; position:absolute; z-index:-1; inset:-26% -16%; pointer-events:none; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(11,30,63,.82) 0%, rgba(11,30,63,.64) 40%, rgba(11,30,63,0) 100%); /* AA en el frame más claro del vídeo (revisión fría) */ } .hero-tag, .hero-lines li{ text-shadow:0 1px 2px #071226, 0 2px 22px rgba(7,18,38,.95) } h1, h2, h3, .disp{ text-wrap:balance } .archive-cap span{ display:block } .community h2 + p{ margin-top:.9rem } .hero-mark{ width:min(84vw, 620px); aspect-ratio:878.78/226.89; -webkit-mask-image:url(logo/wordmark-crop.svg); mask-image:url(logo/wordmark-crop.svg); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:left; mask-position:left; background-color:var(--c-foam); filter:drop-shadow(0 6px 30px rgba(7,18,38,.7)); } .hero-tag{ margin-top:1rem; max-width:22ch; font-family:var(--font-display); font-variation-settings:"wdth" 75; font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.02; font-size:clamp(1.5rem,6.4vw,3.4rem); color:var(--c-chrome); text-shadow:0 2px 26px #071226; } .hero-lines{ margin-top:1.1rem; display:grid; gap:.2rem } .hero-lines li{ font-family:var(--font-display); font-variation-settings:"wdth" 75; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1.02; font-size:clamp(.95rem,3.9vw,1.45rem); /* segundo nivel claro bajo la tagline (Joan: casi del mismo tamaño) */ color:var(--c-foam); text-shadow:0 2px 20px #071226; opacity:0; transform:translateY(18px); animation:heroLineIn .6s cubic-bezier(.22,.86,.26,.99) forwards; } .hero-lines li:nth-child(1){ animation-delay:.05s } .hero-lines li:nth-child(2){ margin-left:.6ch; animation-delay:.14s } .hero-lines li:nth-child(3){ margin-left:1.2ch; animation-delay:.23s; color:var(--c-chrome) } @keyframes heroLineIn{ to{ opacity:1; transform:none } } /* los dos botones SIEMPRE lado a lado, en cualquier idioma (Joan): encogen antes de apilarse */ .hero-ctas{ display:flex; flex-wrap:nowrap; gap:.6rem; margin-top:1.75rem; max-width:34rem } .hero-ctas .btn{ flex:1 1 0; min-width:0; padding-inline:.9rem; white-space:nowrap; font-size:clamp(.78rem,3.3vw,.95rem); letter-spacing:.01em } /* cue d'scroll: vertical al marge dret, SEMPRE al mig de la pantalla, text amb ombra i la línia animada de la primera versió (Joan) */ .scroll-cue{ position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--c-foam); opacity:1; pointer-events:none; transition:opacity .5s var(--ease); } html.is-under .scroll-cue{ opacity:0 } .scroll-cue .cue-text{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-mono); font-weight:700; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 2px #071226, 0 2px 14px rgba(7,18,38,.95), 0 0 28px rgba(7,18,38,.8); } .scroll-cue .ln{ width:1.5px; height:38px; background:var(--c-foam); border-radius:1px; box-shadow:0 0 6px rgba(7,18,38,.9), 0 0 14px rgba(7,18,38,.7); transform-origin:top; animation:cueLine 2.2s cubic-bezier(.45,0,.2,1) infinite; } @keyframes cueLine{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } } /* ── crossing ────────────────────────────────────────────────────────── */ .crossing{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center } .crossing p{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:clamp(1rem,3.2vw,1.3rem); color:var(--c-mist); opacity:0; transition:opacity 1.1s var(--ease); } html.is-under .crossing p{ opacity:1 } /* ── about ───────────────────────────────────────────────────────────── */ .about{ padding-block:clamp(4rem,12vw,7rem) } .about-lede{ font-size:clamp(1.3rem,4.6vw,1.9rem); max-width:22ch } .about-lede + p{ margin-top:1.1rem; max-width:56ch; color:var(--c-mist) } .stat-grid{ margin-top:clamp(2.25rem,6vw,3.5rem); display:grid; gap:1.5rem } .stat{ border-top:1px solid var(--c-line); padding-top:1.1rem } .stat .label{ color:var(--c-chrome) } .stat h3{ margin-top:.5rem } @media (min-width:700px){ .stat-grid{ grid-template-columns:repeat(3,1fr); gap:2rem } } /* ── archive ─────────────────────────────────────────────────────────── */ .archive{ padding-block:clamp(4rem,12vw,7rem) } .archive-head{ margin-bottom:clamp(1.75rem,5vw,2.5rem) } .archive-head .label{ color:var(--c-chrome) } .archive-grid{ columns:2; column-gap:.7rem } @media (min-width:700px){ .archive-grid{ columns:3; column-gap:1rem } } @media (min-width:1100px){ .archive-grid{ columns:4 } } .archive-tile{ break-inside:avoid; margin-bottom:.7rem; display:block } .archive-tile--lead{ column-span:all; margin-bottom:1rem } .archive-tile--lead img{ width:100%; height:auto } @media (min-width:700px){ .archive-tile--lead{ column-span:none; margin-bottom:1rem } } .archive-tile img{ width:100%; height:auto; border-radius:6px } html:not(.no-js) .archive-tile img{ animation:drift 8s var(--ease-soft) infinite } .archive-tile:nth-child(3n+1) img{ animation-duration:7.5s; --dx:4px; --dy:-3px; --dr:.5deg } .archive-tile:nth-child(3n+2) img{ animation-duration:9s; --dx:-3px; --dy:-4px; --dr:-.4deg } .archive-tile:nth-child(3n+3) img{ animation-duration:8.5s; --dx:3px; --dy:4px; --dr:.35deg } .archive-tile:nth-child(odd) img{ animation-delay:-2s } @keyframes drift{ 0%,100%{ transform:translate(0,0) rotate(0) } 50%{ transform:translate(var(--dx,3px), var(--dy,-3px)) rotate(var(--dr,.4deg)) } } .archive-cap{ margin-top:.4rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--c-mist); } .archive-more{ margin-top:clamp(2rem,6vw,2.75rem) } .archive-more a{ display:inline-flex; min-height:44px; align-items:center; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--c-chrome); border-bottom:1px solid currentColor } /* ── events ──────────────────────────────────────────────────────────── */ .events{ padding-block:clamp(4rem,12vw,7rem) } .events-sub{ margin-top:clamp(2.5rem,7vw,3.5rem) } /* «Lo que ya es nostalgia»: misma voz que el susurro «Ya estás dentro.» (Joan) */ .events-sub .label{ display:block; margin-bottom:1.25rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:clamp(1rem,3.2vw,1.3rem); color:var(--c-mist); } .event-list{ display:grid; gap:1.25rem } .event-card{ display:grid; gap:0; overflow:hidden; background:color-mix(in srgb, var(--c-water) 55%, transparent); border:1px solid var(--c-line); border-radius:var(--radius); } @supports not (color:color-mix(in srgb, red, blue)){ .event-card{ background:rgba(20,58,107,.55) } } .event-cover{ display:block; width:100%; height:auto; aspect-ratio:16/9; max-height:240px; object-fit:cover; align-self:start; border-radius:var(--radius) var(--radius) 0 0 } .event-card{ max-width:34rem } .event-card-body{ display:grid; gap:.75rem; padding:1.25rem 1.25rem 1.5rem } .event-date{ font-family:var(--font-mono); font-size:1.15rem; letter-spacing:.04em; color:var(--c-chrome) } .event-name{ margin-top:.15rem } .event-concept{ color:var(--c-mist); max-width:48ch } .event-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--c-mist) } .event-actions{ margin-top:.25rem } .event-empty{ padding:clamp(1.5rem,4.5vw,2.25rem); border:1px dashed var(--c-line); border-radius:var(--radius); color:var(--c-mist); } .event-empty a{ color:var(--c-chrome); font-weight:700; display:inline-block; margin-top:.6rem; min-height:44px; display:inline-flex; align-items:center } /* modal facade */ .modal-backdrop{ position:fixed; inset:0; z-index:120; background:rgba(7,18,38,.78); display:flex; align-items:flex-end; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s .35s; } .modal-backdrop.is-open{ opacity:1; visibility:visible; transition:opacity .35s var(--ease) } @media (min-width:700px){ .modal-backdrop{ align-items:center } } .modal-panel{ width:100%; max-width:560px; max-height:88vh; overflow:auto; background:var(--c-navy); border:1px solid var(--c-line); border-radius:18px 18px 0 0; padding:clamp(1.5rem,5vw,2.25rem); transform:translateY(24px); transition:transform .35s var(--ease); } .modal-backdrop.is-open .modal-panel{ transform:none } @media (min-width:700px){ .modal-panel{ border-radius:18px } } .modal-close{ margin-left:auto; display:flex; width:44px; height:44px; align-items:center; justify-content:center; font-size:1.4rem; border-radius:10px } .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem } .modal-title{ font-size:1.3rem } .c-bookfacade-hint{ color:var(--c-mist); margin-top:1rem; max-width:34em } .c-bookfacade-load{ margin-top:1.2rem } .c-bookfacade-frame{ display:block; width:100%; height:65vh; min-height:420px; border:0; border-radius:10px; background:#fff; margin-top:1rem } .c-bookfacade-alt{ margin-top:1rem; font-size:.9375rem } .c-bookfacade-alt a, .c-bookfacade-noscript a{ color:var(--c-chrome); font-weight:700; display:inline-flex; align-items:center; min-height:44px } /* ── community ───────────────────────────────────────────────────────── */ .community{ padding-block:clamp(4rem,12vw,7rem); text-align:left } .community-cta{ margin-top:1.75rem; position:relative; display:inline-flex } .community-cta .btn{ position:relative; z-index:1 } html:not(.no-js) .community-cta::before{ content:""; position:absolute; inset:-6px; border-radius:999px; z-index:0; border:1.5px solid var(--c-chrome); opacity:.55; animation:pulse-ring 2.6s var(--ease-soft) infinite; } @keyframes pulse-ring{ 0%{ transform:scale(1); opacity:.55 } 100%{ transform:scale(1.35); opacity:0 } } .community-close{ margin-top:clamp(2.5rem,7vw,3.5rem) } /* ── footer ──────────────────────────────────────────────────────────── */ .site-footer{ padding:clamp(3.5rem,10vw,5.5rem) 0 clamp(2rem,5vw,2.75rem); background:linear-gradient(to bottom, rgba(7,18,38,0), rgba(7,18,38,.6)); } /* pie: texto a la izquierda, logotipo (luna) abajo a la derecha, en una sola fila (Joan) */ .footer-inner{ position:relative; z-index:1; text-shadow:0 2px 14px rgba(7,18,38,.85); display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem } .footer-mark{ order:2; flex:none; width:clamp(110px,28vw,150px); aspect-ratio:879.42/699.11; -webkit-mask-image:url(logo/logo_2-crop.svg); mask-image:url(logo/logo_2-crop.svg); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; background-color:var(--c-foam); filter:drop-shadow(0 2px 14px rgba(7,18,38,.85)); } .footer-meta{ order:1; min-width:0; display:flex; flex-direction:column; gap:.4rem } .footer-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem } .footer-links a{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color:var(--c-mist) } .footer-links a:hover{ color:var(--c-chrome) } .colophon{ font-family:var(--font-mono); font-size:.78rem; color:color-mix(in srgb, var(--c-mist) 70%, transparent) } @supports not (color:color-mix(in srgb, red, blue)){ .colophon{ color:var(--c-mist) } } @media (min-width:760px){ .footer-meta{ flex-direction:row; align-items:center; justify-content:space-between } } /* ── responsive: header spacing at wider widths ─────────────────────── */ @media (min-width:760px){ .hero{ padding-inline:clamp(1.25rem,6vw,4rem) } .about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start } } @media (min-width:1100px){ .container{ padding-inline:2rem } } /* ── reduced motion (must stay last) ────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important } html{ scroll-behavior:auto } html:not(.no-js) .reveal{ opacity:1; transform:none } .archive-tile img{ animation:none !important } .community-cta::before{ animation:none; opacity:0 } .scroll-cue .ln{ animation:none; transform:scaleY(1) } }