/* * Torre de Vega — capa base del diseño (portada de la web de referencia). * * Contiene tokens, tipografía y todos los componentes compartidos (hero, secciones * editoriales, portal circular, reserva, contacto, pie y páginas legales). * El archivo está organizado en capas que se sobrescriben en orden: NO reordenes * bloques, porque el aspecto final depende de esa cascada. Para cambios nuevos usa * tdv-pages.css o añade reglas al final de la capa correspondiente. * * Fotografías: ninguna ruta de imagen vive aquí. Cada página las declara en su HTML * (atributos data-tdv-*, ver tdv-images.js) para poder adaptarlas a la conexión. * * Fuentes: se cargan con en el de cada página (no @import). */ :root { --paper: #ede8e5; --surround: #dfd7cd; --ink: #202020; --line: rgba(32, 32, 32, 0.4); --frame: clamp(12px, 3vw, 48px); font-family: Manrope, Arial, sans-serif; color: var(--ink); background: var(--surround); font-synthesis: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 24px; } body { margin: 0; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } button, a, input, select { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ad6f38; outline-offset: 6px; } p { font-size: clamp(14px, 1.25vw, 18px); line-height: 1.5; } h1, h2, p { margin-top: 0; } .skip { position: fixed; left: 20px; top: -100px; z-index: 30; background: white; padding: 16px; } .skip:focus { top: 15px; } .loader { position: fixed; inset: 0; background: var(--ink); z-index: 25; display: grid; place-items: center; color: var(--paper); pointer-events: none; animation: loader-out 0.6s 0.5s both; } .loader .monogram { width: 72px; height: 72px; font-size: 45px; } .monogram { font-family: Georgia, serif; font-weight: bold; width: 38px; height: 38px; border: 1px solid; display: inline-grid; place-items: center; border-radius: 50%; font-size: 26px; } .opening { height: auto; padding: var(--frame); } .opening-pin { position: relative; } .stage { border: 8px solid #f6f3ee; border-radius: 38px; overflow: hidden; background: var(--paper); } .panel { position: relative; min-height: calc(100svh - var(--frame) * 2 - 16px); } .hero { color: var(--paper); background: #080909; overflow: hidden; padding: 0 4.4%; } .hero-photo, .shade { position: absolute; inset: 0; } .hero-photo { background-image: none; background-size: cover; background-position: center; transform: scale(1.08); } .shade { background: linear-gradient(110deg, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.65)); } header { position: relative; display: flex; height: 88px; align-items: center; border-bottom: 1px solid #ffffff65; gap: 0; } .brand { padding: 0 24px 0 0; } nav { display: flex; align-items: stretch; height: 70%; flex: 1; } nav a { display: flex; align-items: center; justify-content: center; padding: 0 30px; border-left: 1px solid #ffffff65; font-size: 14px; } nav a:last-child { border-right: 1px solid #ffffff65; } .header-cta { font-size: 14px; border: 1px solid #ffffff90; padding: 8px 22px; } .arrow { display: inline-block; font-size: 29px; line-height: 15px; vertical-align: middle; font-weight: 300; transition: transform 0.25s; } .button:hover .arrow, .header-cta:hover .arrow { transform: translateX(7px); } .hero-grid { position: relative; display: grid; grid-template-columns: 70% 30%; padding-top: 36px; padding-bottom: 60px; min-height: calc(100svh - var(--frame) * 2 - 104px); } h1 { font-weight: 400; font-size: clamp(60px, 7vw, 112px); line-height: 1.28; letter-spacing: -0.035em; margin: 0 0 32px; padding-right: 26px; } h1 span { display: block; } aside { border-left: 1px solid #ffffff65; padding: 24px 0 20px 36px; } aside p { margin-top: 15px; } .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid transparent; border-radius: 0; padding: 10px 22px; font-size: 14px; min-height: 44px; transition: background 0.25s, color 0.25s; } .light { background: var(--paper); color: var(--ink); } .dark { background: var(--ink); color: var(--paper); } .button:hover { background: #c8bba9; color: #171717; } .philosophy { grid-column: 1; font-size: clamp(22px, 3.3vw, 49px); font-weight: 300; border-top: 1px solid #ffffff80; padding-top: 25px; letter-spacing: -0.035em; margin: 0; } .circle { border: 1px solid; border-radius: 50%; display: grid; place-items: center; width: 66px; height: 66px; font-size: 42px; font-weight: 300; transition: transform 0.3s; } .circle:hover { transform: translateY(5px); } .next { justify-self: end; align-self: end; } .about { padding: 5% 5% 0; background: var(--paper); overflow: hidden; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; padding-bottom: 34px; border-bottom: 1px solid var(--line); } .food-image { background: none center/cover; min-height: 300px; } .about-copy { position: relative; border-top: 1px solid var(--line); padding-top: 27px; } .about h2 { font-size: clamp(24px, 2.65vw, 42px); text-transform: uppercase; font-weight: 400; line-height: 1.35; letter-spacing: -0.055em; } .about-copy p { margin-bottom: 36px; } .about-copy .circle { position: absolute; right: 0; bottom: 0; } .ingredient-track { display: flex; gap: 40px; width: max-content; padding: 35px 0 20px; margin-left: -80px; } .ingredient { border: 1px solid var(--line); border-radius: 50%; width: clamp(170px, 20vw, 290px); height: clamp(170px, 20vw, 290px); display: grid; place-items: center; font-family: Georgia, serif; color: transparent; -webkit-text-stroke: 1px #58534e; font-size: clamp(120px, 16vw, 230px); font-weight: normal; } .rings { font-weight: 100; transform: rotate(-22deg); } .ritual { height: 230svh; margin: 0 var(--frame); position: relative; } .ritual-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--paper); border: 8px solid #f6f3ee; border-radius: 38px; display: grid; place-items: center; } .orbit { position: absolute; width: 75vmin; height: 75vmin; border: 1px solid var(--ink); border-radius: 50%; } .orbit-inner { width: 70vmin; height: 70vmin; transform: rotate(15deg); border-radius: 46% 54% 49% 51%; } .text-ring { position: absolute; width: 56vmin; height: 56vmin; border-radius: 50%; } .text-ring span { position: absolute; left: 50%; top: 0; height: 50%; transform-origin: 50% 100%; font-size: clamp(13px, 2.1vmin, 24px); font-weight: 300; } .ring-two { width: 36vmin; height: 36vmin; } .ring-two span { font-size: 1.4vmin; } .ring-three { width: 19vmin; height: 19vmin; } .ring-three span { font-size: 0.8vmin; } .iris { position: absolute; width: 8vmin; height: 8vmin; background: var(--ink); border-radius: 50%; transform: scale(0.01); } .ritual-caption { position: absolute; bottom: 45px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.15em; } .booking-preview { position: relative; text-align: center; color: var(--paper); font-size: clamp(20px, 2.5vw, 40px); text-transform: uppercase; opacity: 0; } .booking { position: relative; min-height: 100svh; background: var(--ink); color: var(--paper); margin: var(--frame); border: 8px solid #f6f3ee; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 15vh 5% 25px; } .booking-content { text-align: center; position: relative; z-index: 1; } .eyebrow { text-transform: uppercase; letter-spacing: 0.15em; font-size: 12px; margin-bottom: 30px; opacity: 0.6; } .booking h2 { font-size: clamp(25px, 3vw, 46px); font-weight: 300; text-transform: uppercase; line-height: 1.4; letter-spacing: -0.04em; margin-bottom: 36px; } .botanical { font: 600px Georgia, serif; line-height: 0.8; position: absolute; bottom: -140px; left: 50%; color: transparent; -webkit-text-stroke: 1px #a29b91; transform: translateX(-50%) rotate(-15deg); opacity: 0.65; pointer-events: none; } footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff40; padding-top: 24px; margin-top: 300px; font-size: 12px; gap: 20px; } .reveal { opacity: 1; transform: none; } dialog { width: min(520px, calc(100% - 32px)); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 45px; } dialog::backdrop { background: #0009; backdrop-filter: blur(8px); } dialog h2 { font-size: 40px; font-weight: 400; letter-spacing: -0.05em; } .close { position: absolute; right: 15px; top: 10px; border: 0; background: none; font-size: 30px; } .demo-note { font-size: 13px; opacity: 0.65; } form { display: grid; gap: 18px; } label { display: grid; gap: 8px; font-size: 13px; } input, select { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid #777; background: transparent; padding: 10px 0; border-radius: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-result { font-size: 14px; margin: 0; } .scroll-ready .opening { height: 230svh; } .scroll-ready .opening-pin { position: sticky; top: var(--frame); } .scroll-ready .stage { height: calc(100svh - var(--frame) * 2); } .scroll-ready .panel { position: absolute; inset: 0; min-height: 100%; } .scroll-ready .about { transform: translateX(100%); } .scroll-ready .hero { will-change: transform, opacity; } .scroll-ready .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s, transform 0.7s; } .scroll-ready .reveal.visible { opacity: 1; transform: none; } @keyframes loader-out { to { opacity: 0; visibility: hidden; } } @media (min-width: 1500px) { .hero-grid { padding-top: 50px; } .about { padding-top: 5%; } .food-image { min-height: 380px; } } @media (max-width: 760px) { :root { --frame: 12px; } .stage, .ritual-pin, .booking { border-width: 4px; border-radius: 22px; } header { height: 70px; } .brand { padding-right: 14px; } .monogram { width: 30px; height: 30px; font-size: 21px; } nav a { font-size: 12px; padding: 0 12px; } .header-cta { display: none; } .hero { padding: 0 6%; } .hero-grid { grid-template-columns: 1fr; padding-top: 55px; min-height: 78svh; } h1 { font-size: clamp(48px, 12vw, 85px); line-height: 1.13; padding-right: 0; margin-bottom: 25px; } aside { border-left: 0; padding: 0; max-width: 280px; } aside p { font-size: 14px; } .philosophy { font-size: 27px; margin-top: 35px; padding-top: 20px; } .next { position: absolute; right: 0; bottom: 56px; width: 45px; height: 45px; font-size: 30px; } .about { padding: 35px 7%; } .about-grid { grid-template-columns: 1fr; gap: 25px; } .food-image { min-height: 240px; } .about h2 { font-size: 28px; } .about-copy p { font-size: 15px; margin-bottom: 24px; } .about-copy .circle { width: 48px; height: 48px; font-size: 31px; } .ingredient-track { gap: 20px; margin-left: -100px; } .ingredient { width: 160px; height: 160px; font-size: 130px; } .scroll-ready .opening { height: auto; } .scroll-ready .opening-pin { position: relative; top: 0; } .scroll-ready .stage { height: auto; } .scroll-ready .panel { position: relative; inset: auto; min-height: auto; } .scroll-ready .about { transform: none !important; } .scroll-ready .hero { transform: none !important; opacity: 1 !important; } .ritual { height: 170svh; } .text-ring { width: 68vmin; height: 68vmin; } .text-ring span { font-size: 2.8vmin; } .ring-two { width: 43vmin; height: 43vmin; } .ring-two span { font-size: 1.8vmin; } .ring-three { width: 23vmin; height: 23vmin; } .ring-three span { font-size: 1vmin; } .booking { padding-top: 100px; min-height: 85svh; } .booking h2 br { display: none; } .botanical { font-size: 440px; } footer { flex-wrap: wrap; font-size: 11px; } footer span { display: none; } .ritual-caption { font-size: 9px; } dialog { padding: 35px 25px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .loader { display: none; } *, *::before, *::after { transition: none !important; animation: none !important; } .ritual { height: 85svh; } .ritual-pin { height: 85svh; position: relative; } .booking-preview { display: none; } } /* Editorial extensions and progressive 3D motion */ .stage { perspective: 1600px; } .hero, .about { transform-origin: 50% 50%; backface-visibility: hidden; } .ritual-pin { perspective: 1000px; } .text-ring { will-change: transform; } .editorial { margin: var(--frame); padding: 80px 5%; background: var(--paper); border: 8px solid #f6f3ee; border-radius: 38px; } .section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 32px; align-items: start; margin-bottom: 64px; } .section-heading h2, .kitchen h2 { font-size: clamp(42px, 5.6vw, 84px); font-weight: 400; line-height: 1.08; letter-spacing: -0.06em; margin: 0; } .section-heading p, .card-copy p, .principles p { font-size: 15px; line-height: 1.8; } .experience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; perspective: 1200px; } .depth-card { min-width: 0; transform-style: preserve-3d; transition: transform 0.25s ease, box-shadow 0.25s ease; background: var(--paper); border: 1px solid var(--line); } .depth-card:hover { box-shadow: 0 24px 35px -24px #20202070; } .card-art { height: 310px; position: relative; overflow: hidden; background-image: none; background-size: auto 120%; background-repeat: no-repeat; } .crop-one { background-position: 15% center; } .crop-two { background-position: 90% center; } .card-number { position: absolute; top: 18px; left: 18px; border-radius: 50%; background: var(--paper); height: 38px; width: 38px; display: grid; place-items: center; font-size: 12px; } .typographic-art { background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 25px; } .typographic-art .card-number { color: var(--ink); } .art-word { font-size: clamp(30px, 3.4vw, 54px); line-height: 1.1; letter-spacing: -0.05em; } .art-seal { font-size: 9px; letter-spacing: 0.18em; position: absolute; bottom: 24px; } .card-copy { padding: 28px; transform: translateZ(18px); } .card-copy h3 { font-size: 25px; font-weight: 400; letter-spacing: -0.04em; margin: 0; } .card-copy a { display: inline-block; margin-top: 20px; font-size: 13px; border-bottom: 1px solid; padding-bottom: 8px; } .kitchen { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; position: relative; } .kitchen-sticky { position: sticky; top: 60px; align-self: start; } .kitchen h2 em { font-family: Georgia, serif; font-weight: 400; } .kitchen-symbol { font-size: 160px; line-height: 1.3; font-weight: 300; } .principles article { border-top: 1px solid var(--line); padding: 36px 0 60px; } .principles article > span { font-size: 12px; } .principles h3 { font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -0.04em; } .menu-filters { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 30px; } .menu-filters button { font: inherit; font-size: 13px; padding: 12px 24px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; border-radius: 0; } .menu-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .menu-items article { display: grid; grid-template-columns: 50px 1fr 120px; gap: 20px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); } .menu-items article[hidden] { display: none; } .menu-items h3 { font-size: clamp(24px, 3vw, 40px); font-weight: 400; letter-spacing: -0.04em; margin: 0 0 8px; } .menu-items p { margin: 0; font-size: 14px; line-height: 1.7; } .menu-items small { text-align: right; } .menu-status { font-size: 12px; opacity: 0.7; } .editorial { scroll-margin-top: 20px; } button:focus-visible, a:focus-visible { outline: 3px solid #9b764d; outline-offset: 5px; } @media (max-width: 1000px) { .section-heading { grid-template-columns: 1fr 2fr; } .section-heading > p:last-child { grid-column: 2; } .card-art { height: 250px; } .card-copy { padding: 20px; } } @media (max-width: 760px) { .editorial { padding: 45px 6%; border-width: 4px; border-radius: 22px; } .section-heading { display: block; margin-bottom: 35px; } .section-heading h2 { margin: 25px 0; } .experience-grid { grid-template-columns: 1fr; gap: 30px; } .card-art { height: 320px; background-size: cover; } .art-word { font-size: 55px; } .kitchen { grid-template-columns: 1fr; gap: 20px; } .kitchen-sticky { position: relative; top: 0; } .kitchen-symbol { font-size: 90px; } .principles article { padding: 25px 0; } .menu-items article { grid-template-columns: 25px 1fr; gap: 10px; } .menu-items small { grid-column: 2; text-align: left; } .menu-filters { gap: 8px; } .menu-filters button { padding: 10px 14px; } } @media (prefers-reduced-motion: reduce) { .depth-card, .reveal, .hero, .about, .text-ring { transform: none !important; opacity: 1 !important; transition: none !important; } .iris { transform: scale(0.01) !important; } } /* Reference-video portal: flat circular typography, accelerating zoom, black iris. */ .portal-ready.ritual { height: 340svh; margin-bottom: var(--frame); } .portal-ready .ritual-pin { top: var(--frame); height: calc(100svh - var(--frame) * 2); perspective: none; isolation: isolate; } .portal-ready .text-ring { position: absolute; width: 72vmin; height: 72vmin; inset: auto; z-index: 2; will-change: transform; transform-origin: center; } .portal-ready .ring-two { width: 46vmin; height: 46vmin; } .portal-ready .ring-three { width: 24vmin; height: 24vmin; } .portal-ready .text-ring svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--ink); font-family: Manrope, Arial, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0; } .portal-ready .orbit { width: 86vmin; height: 86vmin; z-index: 1; will-change: transform; } .portal-ready .orbit-inner { width: 80vmin; height: 80vmin; } .portal-ready .iris { width: 100px; height: 100px; z-index: 3; will-change: transform; transform: scale(0); } .portal-ready .ritual-caption { display: none; } .portal-ready .booking { position: absolute; inset: 0; z-index: 4; margin: 0; border: 0; border-radius: 0; min-height: 0; height: 100%; padding: 0 5% 20px; background: transparent; opacity: 0; will-change: opacity, transform; } .portal-ready .booking-content { position: absolute; top: 40%; left: 5%; right: 5%; opacity: 1; transform: none; text-align: center; } .portal-ready .booking-content h2 { font-size: clamp(20px, 2.25vw, 34px); line-height: 1.45; max-width: 760px; margin: 0 auto 28px; } .portal-ready .booking-content .eyebrow { display: none; } .portal-ready .booking footer { position: absolute; bottom: 20px; left: 5%; right: 5%; margin: 0; font-size: 12px; } .portal-ready .botanical { font-size: 420px; bottom: -210px; pointer-events: none; } @media (max-width: 760px) { .portal-ready.ritual { height: 300svh; } .portal-ready .text-ring { width: 88vmin; height: 88vmin; } .portal-ready .ring-two { width: 56vmin; height: 56vmin; } .portal-ready .ring-three { width: 29vmin; height: 29vmin; } .portal-ready .booking-content { top: 32%; } .portal-ready .booking footer > span { max-width: 110px; } } @media (prefers-reduced-motion: reduce) { .portal-ready.ritual { height: auto; } .portal-ready .ritual-pin { height: auto; position: relative; top: 0; display: block; background: var(--ink); } .portal-ready .text-ring, .portal-ready .orbit, .portal-ready .iris { display: none; } .portal-ready .booking { position: relative; min-height: 85svh; opacity: 1 !important; transform: none !important; } .portal-ready .booking-content { opacity: 1; transform: none; } } /* Keep the motif visible even when the OS requests no animation. */ @media (prefers-reduced-motion: reduce) { .portal-ready .ritual-pin { padding-top: 75svh; background: var(--paper); } .portal-ready .text-ring { display: block; top: 37.5svh; left: 50%; translate: -50% -50%; opacity: 1 !important; } .portal-ready .booking { background: var(--ink); } } /* Explicitly requested scroll motion for this portal, independent of global motion settings. */ .ritual.portal-ready.portal-motion { height: 320svh; } .portal-ready.portal-motion .ritual-pin { position: sticky; top: var(--frame); height: calc(100svh - var(--frame) * 2); padding: 0; display: grid; place-items: center; background: var(--paper); } .portal-ready.portal-motion .text-ring { display: block; top: auto; left: auto; translate: none; transform: var(--portal-transform) !important; opacity: 1 !important; } .portal-ready.portal-motion .iris { display: block; transform: var(--portal-transform) !important; } .portal-ready.portal-motion .orbit { display: block; } .portal-ready.portal-motion .booking { position: absolute; inset: 0; height: 100%; min-height: 0; background: var(--ink); opacity: 1 !important; transform: none !important; will-change: clip-path; } .portal-ready.portal-motion .booking-content { opacity: 1 !important; transform: none !important; } /* Scroll-controlled reveals echo the circular booking portal throughout the page. */ .editorial-motion .editorial { will-change: clip-path; } .editorial-motion .editorial .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .editorial-motion .editorial h2 { transform: translateY(var(--heading-offset, 0)); will-change: clip-path, transform; } .editorial-motion .card-art { transform: rotate(var(--entry-rotation, 0deg)); will-change: clip-path; transform-origin: center; } .editorial-motion .kitchen-symbol { width: fit-content; transform-origin: center; will-change: transform; } .editorial-motion .editorial:focus-within, .editorial-motion .depth-card:focus-within .card-art, .editorial-motion .menu-items article:focus-within { clip-path: none !important; } @media (max-width: 760px) { .editorial-motion .card-art { background-size: cover !important; } } /* Stacked editorial cards: later cards rise from below and cover earlier ones. */ .editorial-motion .collection { clip-path: none !important; will-change: auto; } .stack-runway { position: relative; height: 300svh; scroll-margin-top: 35px; } .experience-grid.stack-stage { position: sticky; top: 35px; height: calc(100svh - 70px); display: block; perspective: none; overflow: clip; border-radius: 28px; } .editorial-motion .collection .stack-stage .depth-card { position: absolute; top: 4%; left: 17%; width: 66%; height: 90%; display: grid; grid-template-rows: minmax(0, 1fr) auto; border-radius: 24px; overflow: hidden; transform: var(--stack-transform) !important; transform-origin: 50% 85%; transition: none !important; box-shadow: 0 15px 45px #20202030; will-change: transform; background: var(--paper); } .stack-stage .card-art { height: auto; min-height: 0; clip-path: none !important; transform: none !important; background-size: cover; background-position: center; } .stack-stage .card-copy { padding: 24px 32px; transform: none; background: var(--paper); } .stack-stage .card-copy h3 { font-size: clamp(26px, 3.2vw, 46px); } .stack-stage .card-copy p { margin: 10px 0; font-size: 16px; line-height: 1.5; max-width: 620px; } .stack-stage .card-copy a { margin-top: 6px; font-size: 14px; } .stack-stage .typographic-art { padding: 35px; background: var(--ink); } .stack-stage .art-word { font-size: clamp(45px, 6vw, 90px); } @media (max-width: 760px) { .experience-grid.stack-stage { top: 18px; height: calc(100svh - 36px); border-radius: 18px; } .editorial-motion .collection .stack-stage .depth-card { left: 5%; width: 90%; top: 4%; height: 90%; border-radius: 18px; } .stack-stage .card-copy { padding: 20px; } .stack-stage .card-copy p { font-size: 14px; } .stack-stage .art-word { font-size: 42px; } } @media (max-height: 540px) { .editorial-motion .collection .stack-stage .depth-card { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .stack-stage .card-copy { padding: 18px; overflow: auto; } .stack-stage .card-copy h3 { font-size: 24px; } } /* Hero-to-about iris: both panels share one stationary frame. */ .opening.opening-portal { height: 250svh; } .opening.opening-portal .opening-pin { position: sticky; top: var(--frame); } .opening.opening-portal .stage { height: calc(100svh - var(--frame) * 2); perspective: none; position: relative; } .opening.opening-portal .panel { position: absolute; inset: 0; min-height: 100%; height: 100%; transform: none !important; opacity: 1 !important; } .opening.opening-portal .hero { z-index: 1; } .opening.opening-portal .about { z-index: 2; background: var(--paper); will-change: clip-path; overflow: auto; overscroll-behavior: auto; } @media (max-width: 760px) { .opening.opening-portal .about { padding-top: 24px; } .opening.opening-portal .about-grid { gap: 18px; padding-bottom: 18px; } .opening.opening-portal .food-image { min-height: 140px; height: 20svh; } .opening.opening-portal .about-copy { padding-top: 15px; } .opening.opening-portal .about-copy h2 { font-size: 24px; } .opening.opening-portal .ingredient-track { padding-top: 18px; } } /* Soft focus dissolve confined to the hero; all other transitions stay unchanged. */ .opening.opening-portal .panel { opacity: var(--panel-opacity, 1) !important; filter: blur(var(--panel-blur, 0px)); will-change: opacity, filter; } .opening.opening-portal .about { clip-path: none !important; opacity: var(--panel-opacity, 0) !important; } /* A shared photograph carries the eye from the cover into an airy editorial spread. */ .shared-food-photo { position: absolute; inset: 0 auto auto 0; z-index: 3; pointer-events: none; background: none center/cover no-repeat; opacity: 0; will-change: width, height, left, top; } .opening.opening-portal .about { padding: 6%; overflow: hidden; background: #eeeae3; } .opening.opening-portal .about-grid { height: 100%; display: grid; grid-template-columns: 46% 1fr; gap: 8%; align-items: center; border: 0; padding: 0; } .opening.opening-portal .food-image { height: 100%; min-height: 0; background: none; } .opening.opening-portal .about-copy { border: 0; padding: 0; opacity: var(--copy-arrival, 0); transform: translateY(var(--copy-offset, 24px)); } .opening.opening-portal .about-copy h2 { font-size: clamp(28px, 3.6vw, 58px); text-transform: none; letter-spacing: -0.05em; line-height: 1.12; font-weight: 400; margin: 30px 0; } .opening.opening-portal .about-copy h2 em { font-family: Georgia, serif; font-weight: 400; } .opening.opening-portal .about-copy p { font-size: 16px; line-height: 1.8; max-width: 350px; margin-bottom: 32px; } .opening.opening-portal .about-copy .about-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; max-width: none; } .opening.opening-portal .about-copy .circle, .opening.opening-portal .ingredient-track { display: none; } .opening.opening-portal .about-copy .button { background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); padding: 12px 0; min-width: 150px; justify-content: space-between; } @media (max-width: 760px) { .opening.opening-portal .about { padding: 6%; } .opening.opening-portal .about-grid { grid-template-columns: 1fr; grid-template-rows: 36% 1fr; gap: 20px; } .opening.opening-portal .food-image { height: 100%; min-height: 0; } .opening.opening-portal .about-copy h2 { font-size: clamp(26px, 5vw, 36px); margin: 12px 0; } .opening.opening-portal .about-copy p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; max-width: 100%; } .opening.opening-portal .about-copy .about-label { font-size: 10px; } } @media (max-height: 550px) { .opening.opening-portal .about-grid { grid-template-columns: 42% 1fr; grid-template-rows: 1fr; gap: 6%; } .opening.opening-portal .about-copy h2 { font-size: 26px; margin: 12px 0; } .opening.opening-portal .about-copy p { font-size: 13px; line-height: 1.4; margin-bottom: 12px; } } /* Torre de Vega: identity only. Scroll geometry and animation rules are preserved. */ :root { --paper: #e9ecef; --surround: #fff; --ink: #1a1a1a; --line: #aaa; --accent: #ccad60; --secondary: #7a7a7a; font-family: "Open Sans", sans-serif; } body { font-family: "Open Sans", sans-serif; } h1, .hero-grid h1, .section-heading h2, .kitchen h2 { font-family: "League Spartan", sans-serif; font-weight: 700; } h2, h3, .opening.opening-portal .about-copy h2, .stack-stage .card-copy h3 { font-family: Montserrat, sans-serif; font-weight: 700; } .opening.opening-portal .about-copy h2 em, .kitchen h2 em { font-family: Montserrat, sans-serif; font-weight: 700; } .button, button, .eyebrow, nav, .about-label { font-family: Raleway, sans-serif; font-weight: 700; } .restaurant-logo { display: block; width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; } .loader .restaurant-logo { width: 140px; height: 140px; } .hero-photo, .shared-food-photo { background-image: none; } .crop-one { background-image: none; } .crop-two { background-image: none; } .stack-stage .typographic-art { background: none center/cover; } .typographic-art .art-word, .typographic-art .art-seal { visibility: hidden; } .stage, .editorial, .ritual-pin, .booking { border-color: #fff; } .opening.opening-portal .about { background: var(--paper); } .button.light, .button.dark { background: var(--accent); color: var(--ink); } .button:hover, .menu-filters button:hover { background: var(--accent); color: var(--ink); } .menu-filters button[aria-pressed="true"] { background: var(--accent); color: var(--ink); } a:focus-visible, button:focus-visible { outline-color: var(--accent); } .card-number { background: var(--accent); color: var(--ink); } .portal-ready .text-ring svg { font-family: Raleway, sans-serif; fill: var(--ink); } .hero-grid h1 { font-size: clamp(42px, 6.8vw, 108px); line-height: 1.05; } .menu-items h3 { font-size: clamp(18px, 2vw, 28px); line-height: 1.35; letter-spacing: -0.02em; } .brand-footer { display: flex; flex-direction: column; gap: 28px; align-items: center; margin: var(--frame); padding: 40px 5%; border: 0; color: var(--ink); } .brand-footer nav { text-align: center; line-height: 2; } .kit-digital { width: min(100%, 1024px); height: auto; object-fit: contain; background: white; } .legal-page { max-width: 960px; margin: 60px auto; padding: 24px; overflow-wrap: anywhere; } .legal-page h1 { font-size: 44px; } .legal-page p { line-height: 1.8; } .restaurant-contact blockquote { margin: 30px 0; border-left: 3px solid var(--accent); padding-left: 24px; line-height: 1.8; } .restaurant-contact cite { display: block; } @media (max-width: 760px) { .restaurant-logo { width: 52px; height: 52px; } .hero-grid h1 { font-size: clamp(38px, 10vw, 70px); } header nav a { font-size: 11px; padding-left: 8px; padding-right: 8px; } .opening.opening-portal .about-copy h2 { font-size: clamp(22px, 5vw, 32px); } } /* Edge-to-edge slate surfaces and restrained translucent dining cards. */ :root { --frame: 0px; --surround: #252b2d; --paper: #252b2d; --line: #ffffff26; } body { background: #252b2d; color: #fff; } .opening, .editorial, .booking, .ritual, .brand-footer { margin: 0 !important; border: 0 !important; border-radius: 0 !important; } .opening { padding: 0 !important; } .stage, .ritual-pin { border: 0 !important; border-radius: 0 !important; } .opening.opening-portal .stage { height: 100svh; } .editorial, .opening.opening-portal .about { background-color: #252b2d; background-image: radial-gradient(ellipse at 15% 20%, #ffffff06, transparent 55%), repeating-linear-gradient(115deg, #ffffff02 0px, #ffffff02 1px, transparent 1px, transparent 5px); color: #fff; } .editorial { padding: 90px 6%; } .editorial-motion .editorial { clip-path: none !important; } .hero .button.light, .hero .header-cta { background: linear-gradient(120deg, #ffffff20, #ffffff05); border: 1px solid #ffffff70; color: white; backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 #ffffff40; border-radius: 40px; padding: 14px 24px; } .hero .button.light:hover { background: #ffffff26; } .opening.opening-portal .about-copy .button { color: var(--accent); border-color: var(--accent); } .section-heading { grid-template-columns: 1.6fr 1fr; } .section-heading > p:last-child { grid-column: auto; } .eyebrow, .about-label { display: none !important; } .experience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 28px; perspective: 1200px; } .depth-card { border: 0; background: transparent; box-shadow: none; transform-style: flat; overflow: visible; } .depth-card .card-art { height: auto; aspect-ratio: 1.25; position: relative; z-index: 2; border-radius: 12px; background-size: cover; box-shadow: 0 12px 30px #0004; } .depth-card .card-copy { position: relative; z-index: 1; margin: -28px 10px 0; padding: 52px 24px 26px; border: 1px solid #ffffff24; border-radius: 0 0 16px 16px; background: linear-gradient(125deg, #ffffff20, #ffffff06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 #ffffff26, 0 16px 30px #0002; transform: none; transition: margin 0.35s ease; } .depth-card:hover .card-copy { margin-top: -16px; } .depth-card .card-copy h3 { font-size: 23px; } .depth-card .card-copy p { font-size: 15px; color: #e9ecef; line-height: 1.7; } .depth-card .card-copy a { color: var(--accent); } .card-number { display: none; } .brand-footer { color: white; } .portal-ready .text-ring svg { fill: white; } .portal-ready .orbit { border-color: #ffffff70; } .portal-ready.portal-motion .ritual-pin { background: #252b2d; } .menu-filters button { color: white; border-color: #ffffff55; } .menu-items small { color: var(--accent); } .menu-header { padding: 16px 6%; height: auto; gap: 24px; } .menu-page .sample-menu { min-height: 100vh; } .menu-page .menu-items h3 { font-size: clamp(17px, 2vw, 25px); } .legal-page { color: #fff; } dialog { background: #e9ecef; color: #1a1a1a; } @media (max-width: 900px) { .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section-heading { display: block; } } @media (max-width: 600px) { .experience-grid { grid-template-columns: 1fr; gap: 32px; } .editorial { padding: 60px 6%; } .menu-header { flex-wrap: wrap; font-size: 13px; } .hero .header-cta { display: none; } } /* Charcoal slate, restrained gold and a collected-photo composition. */ :root { --paper: #15191a; --surround: #15191a; --secondary: #fff; } body, .editorial, .opening.opening-portal .about, .portal-ready.portal-motion .ritual-pin { background-color: #15191a; color: #fff; background-image: none; } .editorial { position: relative; background-image: linear-gradient(173deg, transparent 23%, #ffffff05 23.08%, transparent 23.18%), linear-gradient(12deg, transparent 71%, #ffffff06 71.05%, transparent 71.16%), linear-gradient(161deg, transparent 88%, #ffffff04 88.1%, transparent 88.22%); background-size: 100% 100%; background-repeat: no-repeat; } .editorial p, .editorial h2, .editorial h3, .principles span, .opening.opening-portal .about-copy, .booking, .brand-footer { color: #fff; } .hero .button.light, .hero .header-cta { border-radius: 7px; border-color: #ccad6055; background: linear-gradient(130deg, #ccad6015, #ffffff05); box-shadow: inset 0 1px 0 #ccad6030; color: white; backdrop-filter: blur(10px); } .button { border-radius: 7px; } .hero .button.light:hover { background: #ccad6025; border-color: #ccad6090; } .mosaic-runway { height: 380svh; position: relative; } .experience-grid.mosaic-stage { position: sticky; top: 24px; height: calc(100svh - 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0; padding: 24px 3%; perspective: 1200px; } .editorial-motion .collection .mosaic-stage .depth-card { position: relative; min-height: 0; margin: -5px -8px; border-radius: 6px; overflow: hidden; background: #141616; border: 1px solid #ffffff38; box-shadow: 0 16px 35px #0008; transform: translateY(var(--card-y, 100vh)) rotate(var(--card-angle, 0deg)) scale(var(--card-scale, 1)) !important; transition: none !important; will-change: transform; } .mosaic-stage .depth-card .card-art { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; background-size: cover; transform: none !important; clip-path: none !important; } .mosaic-stage .depth-card .card-copy, .mosaic-stage .depth-card:hover .card-copy { position: absolute; inset: auto 0 0; margin: 0; padding: 40px 20px 18px; border: 0; border-radius: 0; background: linear-gradient(transparent, #101313d9 45%, #101313f5); backdrop-filter: none; box-shadow: none; transform: none; } .mosaic-stage .card-copy h3 { font-family: "League Spartan", sans-serif; font-size: clamp(22px, 2.2vw, 34px); margin: 0; color: white; } .mosaic-stage .card-copy p { display: none; } .mosaic-stage .card-copy a { font-size: 12px; margin-top: 8px; color: #e2c987; border: 0; padding: 0; } @media (max-width: 760px) { .experience-grid.mosaic-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); padding: 16px 2%; } .mosaic-stage .depth-card .card-copy { padding: 30px 12px 12px; } .mosaic-stage .card-copy h3 { font-size: 21px; } .mosaic-runway { height: 400svh; } } /* Text on dark surfaces must not inherit the dark --paper/--ink brand tokens. */ .hero, .hero header, .hero nav, .hero nav a, .hero h1, .hero h1 span, .hero aside, .hero aside p, .hero .philosophy, .hero .circle { color: #ffffff !important; } .editorial, .editorial h1, .editorial h2, .editorial h3, .editorial p, .editorial blockquote, .editorial cite, .editorial small, .editorial span, .opening.opening-portal .about-copy, .opening.opening-portal .about-copy h2, .opening.opening-portal .about-copy em, .opening.opening-portal .about-copy p, .booking, .booking h2, .booking p, .booking footer, .booking footer a { color: #ffffff; } .hero h1, .hero h1 span { -webkit-text-fill-color: #ffffff; } /* Charcoal introduction followed by a light, tighter photographic collection. */ .opening.opening-portal .about { background: #101112; background-image: none; } .opening.opening-portal .about-copy h2 { font-size: clamp(34px, 4.3vw, 68px); line-height: 1.07; letter-spacing: -0.045em; } .opening.opening-portal .about-copy p { font-size: 18px; line-height: 1.65; } .opening.opening-portal .about-copy .button { padding: 14px 22px; border: 1px solid #ccad6055; border-radius: 7px; color: #fff; background: linear-gradient(130deg, #ccad6015, #ffffff05); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #ccad6030; gap: 24px; } .opening.opening-portal .about-copy .button:hover { background: #ccad6025; } .editorial.collection { background: #fff; background-image: none; color: #1a1a1a; padding-top: 60px; padding-bottom: 36px; } .editorial.collection .section-heading { margin-bottom: 12px; } .editorial.collection .section-heading h2, .editorial.collection .section-heading p { color: #1a1a1a; } .collection .mosaic-stage { perspective: 1200px; perspective-origin: 50% 35%; padding-top: 8px; } .editorial-motion .collection .mosaic-stage .depth-card { transform: translateY(var(--card-y, 100vh)) translateZ(var(--card-depth, 0px)) rotateX(var(--card-tilt, 0deg)) rotateY(var(--card-yaw, 0deg)) rotateZ(var(--card-angle, 0deg)) scale(var(--card-scale, 1)) !important; transform-origin: 50% 85%; backface-visibility: hidden; box-shadow: 0 18px 32px #0005; } @media (max-width: 760px) { .opening.opening-portal .about-copy h2 { font-size: clamp(30px, 7.6vw, 42px); margin: 16px 0; } .opening.opening-portal .about-copy p { font-size: 16px; line-height: 1.6; } .editorial.collection { padding-top: 40px; } .collection .section-heading h2 { margin: 0 0 18px; } .collection .section-heading p { margin-bottom: 10px; } .experience-grid.mosaic-stage { padding-top: 4px; } } .opening.opening-portal .about { background: #080808; background-image: none; } .opening.opening-portal .about-copy .button, .opening.opening-portal .about-copy .button:hover { background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; padding: 10px 0; color: #ccad60; min-width: 0; gap: 22px; } .opening.opening-portal .about-copy .button .arrow { transition: transform 0.25s; } .opening.opening-portal .about-copy .button:hover .arrow { transform: translateX(6px); } .editorial.kitchen { background: #fff; color: #1a1a1a; border-top: 1px solid #1a1a1a18 !important; } .editorial.kitchen h2, .editorial.kitchen h3, .editorial.kitchen p, .editorial.kitchen span, .editorial.kitchen em { color: #1a1a1a; } .kitchen .principles article { border-color: #1a1a1a30; } .kitchen-symbol { display: none; } .team-cards { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 35px 5% 55px; perspective: 1200px; } .team-cards figure { margin: 0 -8px; position: relative; overflow: hidden; border: 5px solid white; border-radius: 5px; box-shadow: 0 20px 35px #0003; will-change: transform, opacity; } .team-cards figure:nth-child(2) { z-index: 2; } .team-cards img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; } @media (max-width: 760px) { .team-cards { padding: 30px 0; gap: 0; } .team-cards figure { margin: 0 -4px; border-width: 3px; } } /* Portraits accompany each history chapter, in a sticky photographic stack. */ .kitchen .kitchen-sticky { position: sticky; top: 28px; } .kitchen .team-cards { display: block; position: relative; height: 48svh; max-height: 500px; width: min(90%, 380px); margin: 30px auto 0; padding: 0; } .kitchen .team-cards figure { position: absolute; inset: 0; margin: 0; background: #fff; z-index: 1; } .kitchen .team-cards img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 25%; } .kitchen .principles article { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; padding: 45px 0; } .kitchen .kitchen-sticky h2 { font-size: clamp(32px, 4.2vw, 62px); } @media (max-width: 760px) { .editorial.kitchen { grid-template-columns: 44% 1fr; gap: 7%; padding: 45px 5%; } .kitchen .kitchen-sticky { top: 22px; } .kitchen .kitchen-sticky h2 { font-size: clamp(22px, 5vw, 34px); } .kitchen .team-cards { width: 100%; height: 35svh; margin-top: 25px; } .kitchen .principles h3 { font-size: 23px; } .kitchen .principles p { font-size: 14px; line-height: 1.7; } .kitchen .principles article { min-height: 85svh; padding: 28px 0; } } .kitchen .principles article > span { display: none; } /* ========================================================================== * Responsive (Torre de Vega): correcciones sobre el diseño de referencia. * Nada puede ensanchar la página ni quedar cortado por la derecha. * ======================================================================== */ /* Last line of defence: widgets or future edits never make the page scroll sideways. */ html { overflow-x: hidden; } /* The mosaic photographs wait below the viewport tilted in 3D and used to stick out on the right. Clip them sideways only, so the sticky stage keeps working. */ .editorial.collection { overflow-x: clip; } @supports not (overflow: clip) { .mosaic-runway { contain: paint; } } /* Inner-page heroes are not .panel: without a positioned box, the scaled photograph and the absolute header escaped the hero's clipping. */ .page-hero.hero { position: relative; } /* Header links must fit between the logo and the reservation button at every width. */ @media (max-width: 1100px) and (min-width: 761px) { header nav a { padding: 0 18px; } } @media (max-width: 900px) and (min-width: 761px) { header nav a { padding: 0 12px; font-size: 13px; } .hero .header-cta { padding: 10px 14px; } } @media (max-width: 380px) { .hero header .restaurant-logo { width: 42px; height: 42px; } .hero header .brand { padding-right: 8px; } body .hero header nav a { padding: 0 6px; font-size: 10.5px; } } @media (max-width: 360px) { body .hero .hero-grid h1 { font-size: 10vw; } } /* Two-column story on small phones: keep text readable beside the portraits. */ @media (max-width: 420px) { .editorial.kitchen { gap: 5%; } .kitchen .principles h3 { font-size: 19px; } .kitchen .principles p { font-size: 13px; } } /* Legal links in the footer wrap cleanly instead of squeezing into one row. */ @media (max-width: 760px) { .brand-footer nav { flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px; height: auto; } .brand-footer nav a { padding: 4px 12px; font-size: 12px; } } /* Kit Digital banner: full screen width at the very bottom of every page, no space below. The banner cancels the footer's side padding with the same length, so it spans the page edge to edge without the scrollbar-width overflow of 100vw. */ footer.brand-footer { --footer-x: clamp(16px, 5vw, 72px); padding-left: var(--footer-x); padding-right: var(--footer-x); padding-bottom: 0; } footer.brand-footer .kit-digital { display: block; align-self: stretch; width: auto; max-width: none; margin: 0 calc(-1 * var(--footer-x)); }