/* ============================================================ NAVIGATOR FAMILY OFFICE — Portal de propiedades para brokers Paleta y tipografia segun Brand Kit oficial. ============================================================ */ :root{ /* Paleta primaria */ --black: #0A0A0A; --charcoal: #1D1D1F; --graphite: #3A3A3C; --warm-gray: #A7A7A9; --off-white: #F6F6F4; /* Paleta secundaria */ --silver: #D9D9DC; --stone: #ECECEC; --pearl: #F2F2F2; --white: #FFFFFF; --font-head: "Poppins", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --maxw: 1240px; --gap: 28px; --line: 1px solid var(--silver); --ease: cubic-bezier(.2,.6,.3,1); } *,*::before,*::after{ box-sizing:border-box; } /* Un elemento con [hidden] siempre se esconde, aunque su clase defina display (flex, grid...). Sin esto, .tabs seguia visible. */ [hidden]{ display:none !important; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--off-white); color:var(--charcoal); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; cursor:pointer; } .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; } /* ---------- Tipografia de marca ---------- */ h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; letter-spacing:-.01em; margin:0; color:var(--black); } .eyebrow{ font-family:var(--font-head); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm-gray); margin:0 0 18px; } /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(246,246,244,.92); backdrop-filter:saturate(180%) blur(12px); border-bottom:var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; } .brand img{ height:42px; width:auto; } .header-nav{ display:flex; align-items:center; gap:34px; } /* Cuando solo se publica alquiler (data/config.js), esto se aplica desde el antes del primer pintado: nunca se alcanza a ver la pestana "En venta" activa ni el enlace "Venta" del menu. */ html.solo-alquiler .nav-link[data-nav="venta"], html.solo-alquiler .tabs, html.solo-alquiler #dualNote{ display:none; } .nav-link{ font-family:var(--font-head); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); padding-bottom:3px; border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); } .nav-link:hover{ color:var(--black); border-bottom-color:var(--black); } .lang-toggle{ display:flex; align-items:center; gap:5px; background:none; border:var(--line); border-radius:999px; padding:6px 14px; font-family:var(--font-head); font-size:11px; letter-spacing:.12em; color:var(--warm-gray); transition:border-color .2s var(--ease); } .lang-toggle:hover{ border-color:var(--graphite); } .lang-opt{ transition:color .2s var(--ease); } .lang-opt.is-on{ color:var(--black); font-weight:600; } .lang-sep{ color:var(--silver); } /* ============================================================ HERO ============================================================ */ .hero{ padding:96px 0 64px; background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(246,246,244,0) 70%), url("../img/pattern-wave.webp") center / cover no-repeat; border-bottom:var(--line); } .hero-title{ font-size:clamp(34px, 5.2vw, 60px); line-height:1.05; max-width:16ch; } .hero-sub{ margin:22px 0 0; max-width:56ch; font-size:17px; color:var(--graphite); } /* ============================================================ TABS ============================================================ */ .tabs{ display:flex; gap:0; margin:56px 0 0; border-bottom:var(--line); } .tab{ display:flex; align-items:center; gap:10px; background:none; border:0; padding:0 4px 18px; margin-right:44px; font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--warm-gray); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s var(--ease), border-color .2s var(--ease); } .tab:hover{ color:var(--graphite); } .tab.is-active{ color:var(--black); border-bottom-color:var(--black); } .tab-count{ font-family:var(--font-body); font-size:11px; letter-spacing:0; background:var(--stone); color:var(--graphite); border-radius:999px; padding:2px 9px; line-height:1.5; } .tab.is-active .tab-count{ background:var(--black); color:var(--white); } /* ---------- Nota de duales ---------- */ .dual-note{ margin:22px 0 0; font-size:14px; color:var(--graphite); max-width:74ch; } .chip-inline{ display:inline-block; vertical-align:baseline; margin:0 2px; } /* ============================================================ GRID DE PROPIEDADES ============================================================ */ .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--gap); margin:40px 0 96px; } .card{ background:var(--white); border:var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; text-align:left; padding:0; transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .card:hover{ border-color:var(--graphite); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(10,10,10,.35); } /* ---- Foto ---- */ .card-media{ position:relative; aspect-ratio:4/3; background:var(--stone); overflow:hidden; } /* El patron solo se descarga cuando de verdad se ve: sin foto que lo tape */ .card-media.sin-foto{ background:var(--stone) url("../img/pattern-diamond.webp") center / cover no-repeat; } .card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .card-media .no-photo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } /* Marcador de agua cuando aun no hay fotos cargadas */ .no-photo .mono{ font-family:var(--font-head); font-weight:600; color:var(--warm-gray); opacity:.45; line-height:1; user-select:none; } .card-media .no-photo .mono{ font-size:40px; } .no-photo-label{ font-family:var(--font-head); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm-gray); } /* ---- Etiquetas sobre la foto ---- */ .badges{ position:absolute; top:14px; left:14px; display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100% - 28px); } .badge{ font-family:var(--font-head); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; background:var(--black); color:var(--white); white-space:nowrap; } .badge-alquiler{ background:var(--white); color:var(--black); border:1px solid var(--black); } .badge-dual{ background:var(--graphite); color:var(--white); } .estado-tag{ position:absolute; top:14px; right:14px; font-family:var(--font-head); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; background:rgba(255,255,255,.94); color:var(--graphite); display:flex; align-items:center; gap:7px; } .estado-dot{ width:6px; height:6px; border-radius:50%; background:var(--warm-gray); } .estado-disponible .estado-dot{ background:#1D1D1F; } .estado-reservado{ color:var(--warm-gray); } /* ---- Cuerpo de la card ---- */ .card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; } .card-title{ font-size:20px; line-height:1.25; margin:0 0 6px; } .card-zona{ font-size:14px; color:var(--warm-gray); margin:0 0 18px; } /* ---- Precios ---- */ .precios{ border-top:var(--line); padding-top:16px; margin-top:auto; display:flex; flex-direction:column; gap:8px; } .precio-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .precio-label{ font-family:var(--font-head); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--warm-gray); } .precio-valor{ font-family:var(--font-head); font-weight:600; font-size:19px; color:var(--black); white-space:nowrap; } .precio-valor .per{ font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--warm-gray); } /* El area pesa igual que el precio, separada por una linea fina */ .precio-row.is-area{ padding-top:10px; margin-top:2px; border-top:var(--line); } .panel-area{ padding-top:22px; border-top:var(--line); } /* ---- Specs ---- */ .specs{ display:flex; flex-wrap:wrap; gap:0 20px; margin:16px 0 0; padding-top:14px; border-top:var(--line); font-size:13px; color:var(--graphite); } .spec{ display:flex; align-items:center; gap:6px; } .spec b{ font-weight:500; } /* ============================================================ DETALLE ============================================================ */ .back-btn{ display:inline-flex; align-items:center; gap:10px; background:none; border:0; padding:34px 0 26px; font-family:var(--font-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); transition:color .2s var(--ease); } .back-btn:hover{ color:var(--black); } .detail-head{ border-bottom:var(--line); padding-bottom:34px; margin-bottom:40px; } .detail-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; } .detail-code{ font-family:var(--font-head); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); margin:0 0 12px; } .detail-title{ font-size:clamp(28px,4vw,44px); line-height:1.1; margin:0 0 10px; } .detail-zona{ font-size:17px; color:var(--graphite); margin:0; } .detail-cols{ display:grid; grid-template-columns:1.55fr 1fr; gap:56px; align-items:start; padding-bottom:110px; } /* Galeria */ .gallery{ display:flex; flex-direction:column; gap:14px; } .gallery-main{ aspect-ratio:16/10; background:var(--stone); position:relative; overflow:hidden; min-height:0; /* es un item flex: no crece con su contenido */ border:var(--line); } /* Igual que en las tarjetas: el patron solo cuando no hay foto encima */ .gallery-main:not(.tiene-fotos){ background:var(--stone) url("../img/pattern-diamond.webp") center / cover no-repeat; } .gallery-main img{ position:absolute; inset:0; /* fuera del flujo: el marco nunca cambia */ width:100%; height:100%; object-fit:cover; } .gallery-main .no-photo{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; } .gallery-main .no-photo .mono{ font-size:64px; } /* ---- Flechas y ampliar sobre la foto principal ---- */ .gallery-main.tiene-fotos{ cursor:zoom-in; } .gal-nav, .gal-zoom{ position:absolute; border:0; padding:0; background:rgba(255,255,255,.94); color:var(--black); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px -4px rgba(10,10,10,.4); transition:background .2s var(--ease), color .2s var(--ease); } .gal-nav:hover, .gal-zoom:hover{ background:var(--black); color:var(--white); } .gal-nav{ top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:30px; line-height:1; font-family:var(--font-head); padding-bottom:4px; } .gal-prev{ left:14px; } .gal-next{ right:14px; } .gal-zoom{ top:14px; right:14px; width:38px; height:38px; } .gal-zoom svg{ width:16px; height:16px; } .gal-contador{ position:absolute; bottom:14px; right:14px; background:rgba(10,10,10,.78); color:var(--white); font-family:var(--font-head); font-size:11px; letter-spacing:.1em; padding:6px 12px; } .gal-contador b{ font-weight:600; } /* ---- Visor a pantalla completa ---- */ body.sin-scroll{ overflow:hidden; } .lightbox{ position:fixed; inset:0; z-index:200; background:rgba(10,10,10,.96); display:flex; align-items:center; justify-content:center; padding:56px 24px; } .lightbox[hidden]{ display:none; } .lb-marco{ width:min(calc(100vw - 160px), calc((100vh - 140px) * 1.5)); aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; } .lightbox img{ max-width:100%; max-height:100%; object-fit:contain; user-select:none; } .lb-cerrar{ position:absolute; top:18px; right:22px; background:none; border:0; color:var(--white); font-size:40px; line-height:1; width:48px; height:48px; opacity:.75; transition:opacity .2s var(--ease); } .lb-cerrar:hover{ opacity:1; } .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; background:rgba(255,255,255,.12); border:0; color:var(--white); font-size:34px; line-height:1; font-family:var(--font-head); padding-bottom:5px; transition:background .2s var(--ease); } .lb-nav:hover{ background:rgba(255,255,255,.28); } .lb-prev{ left:20px; } .lb-next{ right:20px; } .lb-nav[hidden]{ display:none; } .lb-contador{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:var(--white); opacity:.8; font-family:var(--font-head); font-size:12px; letter-spacing:.14em; } @media (max-width:640px){ .gal-nav{ width:40px; height:40px; font-size:26px; } .gal-prev{ left:8px; } .gal-next{ right:8px; } .lightbox{ padding:64px 8px; } .lb-marco{ width:min(calc(100vw - 16px), calc((100vh - 150px) * 1.5)); } .lb-nav{ width:44px; height:44px; font-size:28px; } .lb-prev{ left:6px; } .lb-next{ right:6px; } } .gallery-thumbs{ display:flex; gap:10px; flex-wrap:wrap; } .gallery-thumbs button{ width:88px; aspect-ratio:4/3; padding:0; border:var(--line); background:var(--stone); overflow:hidden; opacity:.6; transition:opacity .2s var(--ease), border-color .2s var(--ease); } .gallery-thumbs button:hover, .gallery-thumbs button.is-on{ opacity:1; border-color:var(--black); } .gallery-thumbs button{ position:relative; } .gallery-thumbs img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .detail-section{ margin-top:44px; } .detail-section h3{ font-family:var(--font-head); font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); padding-bottom:12px; margin-bottom:20px; border-bottom:var(--line); } .detail-desc{ font-size:16px; color:var(--graphite); margin:0; max-width:68ch; } /* ---------- Fincas de un edificio ---------- */ .fincas{ border-top:var(--line); } .finca{ display:grid; grid-template-columns:1.5fr .85fr 1.15fr auto; gap:18px; align-items:center; padding:20px 0; border-bottom:var(--line); } /* Tocar la fila abre la ficha de esa finca */ .finca-link{ color:inherit; cursor:pointer; margin:0 -14px; padding-left:14px; padding-right:14px; transition:background .2s var(--ease); } .finca-link:hover{ background:var(--pearl); } /* Boton, no enlace de texto: tiene que verse tocable de un vistazo */ .finca-ver{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:12px; padding:9px 15px; border:1px solid var(--graphite); background:var(--white); font-family:var(--font-head); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--black); white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .finca-ver:hover, .finca-link:hover .finca-ver{ background:var(--black); color:var(--white); border-color:var(--black); } /* WhatsApp y Correo dentro de la fila, junto a "Consultar precio" */ .finca-vias{ display:flex; align-items:center; gap:7px; justify-content:flex-end; margin-top:5px; font-family:var(--font-head); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); } .finca-vias a{ color:var(--graphite); border-bottom:1px solid var(--silver); transition:color .2s var(--ease), border-color .2s var(--ease); } .finca-vias a:hover{ color:var(--black); border-bottom-color:var(--black); } .volver-fincas{ margin:34px 0 0; } .volver-fincas a{ font-family:var(--font-head); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); border-bottom:1px solid var(--silver); transition:color .2s var(--ease), border-color .2s var(--ease); } .volver-fincas a:hover{ color:var(--black); border-bottom-color:var(--black); } .finca-id{ display:flex; flex-direction:column; gap:3px; } .finca-num{ font-family:var(--font-head); font-weight:600; font-size:17px; color:var(--black); line-height:1.2; } .finca-nivel{ font-size:13px; color:var(--warm-gray); } .finca-detalle{ font-size:12px; color:var(--graphite); margin-top:3px; max-width:34ch; } .finca-datos{ display:flex; flex-direction:column; gap:3px; font-size:14px; color:var(--graphite); } .finca-datos b{ font-family:var(--font-head); font-weight:500; color:var(--black); } .finca-estado{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; } .pill{ font-family:var(--font-head); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; white-space:nowrap; } .pill-vac{ background:var(--black); color:var(--white); } .pill-alq{ background:var(--stone); color:var(--graphite); } .finca-contrato{ font-size:11px; color:var(--warm-gray); } .finca-precio{ font-family:var(--font-head); font-weight:600; font-size:19px; color:var(--black); text-align:right; white-space:nowrap; } /* Fila de total */ .finca-total{ border-bottom:0; border-top:2px solid var(--black); margin-top:2px; padding-top:22px; } .finca-total .finca-num{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; } .finca-total .finca-precio{ font-size:24px; } /* Estacionamientos adicionales */ .parkings-extra{ margin-top:26px; border:1px solid var(--black); padding:18px 20px; } .parkings-extra p{ margin:6px 0 0; font-size:14px; color:var(--charcoal); } .badge-edificio{ background:var(--white); color:var(--black); border:1px solid var(--black); } @media (max-width:720px){ .finca{ grid-template-columns:1fr auto; gap:10px 14px; } .finca-id{ grid-column:1 / -1; } .finca-datos{ grid-column:1; flex-direction:row; gap:14px; } .finca-estado{ grid-column:2; align-items:flex-end; text-align:right; } .finca-precio{ grid-column:1 / -1; padding-top:6px; border-top:var(--line); font-size:19px; } .finca-total .finca-precio{ font-size:22px; } } /* Tabla de datos */ .datos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px 28px; } .dato-label{ font-family:var(--font-head); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--warm-gray); margin:0 0 5px; } .dato-valor{ font-size:16px; color:var(--black); margin:0; font-weight:500; } /* Ubicacion: boton, para que se vea tocable de un vistazo */ .btn-mapa{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--graphite); background:var(--white); color:var(--black); font-family:var(--font-head); font-weight:500; font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1.3; vertical-align:middle; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn-mapa:hover{ background:var(--black); color:var(--white); border-color:var(--black); } .btn-mapa svg{ width:14px; height:14px; flex:none; } /* En la cabecera va junto al tipo de inmueble */ .detail-zona{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .detail-zona .btn-mapa{ font-size:11px; } /* En la tabla de detalles, un poco mas compacto */ .datos .btn-mapa{ margin-top:2px; font-size:10px; padding:7px 12px; } /* Panel lateral */ .panel{ background:var(--white); border:var(--line); padding:32px 30px; position:sticky; top:120px; } .panel-precios{ display:flex; flex-direction:column; gap:22px; } .panel-precio .precio-label{ display:block; margin-bottom:5px; } .panel-precio .precio-valor{ font-size:30px; line-height:1.1; } .panel-divider{ height:1px; background:var(--silver); margin:28px 0; } .panel-comision .dato-label{ margin-bottom:7px; } .panel-comision p{ margin:0 0 16px; font-size:15px; color:var(--graphite); } .panel-comision p:last-child{ margin-bottom:0; } .actions{ display:flex; flex-direction:column; gap:11px; margin-top:28px; } /* ---------- Precio a consultar ---------- Dice exactamente que se consulta y ofrece los dos canales ahi mismo. */ .consultar-bloque{ display:flex; flex-direction:column; gap:14px; background:var(--pearl); border-left:2px solid var(--black); padding:20px 22px; } .consultar-titulo{ font-family:var(--font-head); font-weight:600; font-size:19px; line-height:1.25; color:var(--black); } .consultar-vias{ display:flex; flex-wrap:wrap; gap:9px; } .consultar-vias a{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--black); background:var(--white); padding:9px 15px; font-family:var(--font-head); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--black); transition:background .2s var(--ease), color .2s var(--ease); } .consultar-vias a:hover{ background:var(--black); color:var(--white); } .consultar-vias svg{ width:14px; height:14px; flex:none; } /* En las tarjetas del listado: una sola linea, sin etiqueta repetida */ .precio-row.precio-consultar{ display:block; font-family:var(--font-head); font-weight:600; font-size:16px; color:var(--black); line-height:1.3; } /* En la lista de fincas */ .finca-consultar{ font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:.02em; color:var(--graphite); } .btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:15px 20px; border:1px solid var(--black); background:var(--black); color:var(--white); font-family:var(--font-head); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; transition:background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); } .btn:hover{ background:var(--graphite); border-color:var(--graphite); } .btn-ghost{ background:transparent; color:var(--black); } .btn-ghost:hover{ background:var(--black); color:var(--white); } .btn[disabled]{ opacity:.35; cursor:not-allowed; } .btn[disabled]:hover{ background:var(--black); border-color:var(--black); } .btn-ghost[disabled]:hover{ background:transparent; color:var(--black); } .btn svg{ width:15px; height:15px; flex:none; } .updated{ margin:22px 0 0; text-align:center; font-size:11px; letter-spacing:.06em; color:var(--warm-gray); } /* Contacto directo bajo los botones */ .contacto-directo{ margin:18px 0 0; text-align:center; font-size:12px; color:var(--warm-gray); display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .contacto-directo a{ color:var(--graphite); border-bottom:1px solid var(--silver); transition:color .2s var(--ease), border-color .2s var(--ease); } .contacto-directo a:hover{ color:var(--black); border-bottom-color:var(--black); } /* ---- Aviso de propiedad dual en el detalle ---- */ .dual-alert{ display:flex; gap:14px; align-items:flex-start; border:1px solid var(--black); background:var(--white); padding:18px 20px; margin-bottom:26px; } .dual-alert .dual-icon{ font-family:var(--font-head); font-weight:600; font-size:13px; border:1px solid var(--black); border-radius:50%; width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; } .dual-alert p{ margin:0; font-size:14px; color:var(--charcoal); } .dual-alert b{ font-weight:600; } /* ============================================================ FOOTER ============================================================ */ .site-footer{ border-top:var(--line); background:var(--white); padding:56px 0; } .footer-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; } .footer-logo{ height:26px; width:auto; opacity:.8; } .footer-note{ margin:0; font-size:13px; color:var(--warm-gray); max-width:60ch; } .footer-legal{ margin:0; font-size:11px; letter-spacing:.1em; color:var(--silver); } /* ============================================================ TOAST ============================================================ */ .toast{ position:fixed; left:50%; bottom:34px; transform:translate(-50%, 18px); background:var(--black); color:var(--white); padding:14px 26px; font-family:var(--font-head); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); z-index:100; } .toast.is-on{ opacity:1; transform:translate(-50%,0); } .empty{ padding:80px 0 120px; text-align:center; color:var(--warm-gray); font-size:15px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:960px){ .detail-cols{ grid-template-columns:1fr; gap:44px; } .panel{ position:static; } } @media (max-width:640px){ .wrap{ padding:0 20px; } .header-inner{ min-height:70px; gap:14px; } .brand img{ height:31px; } .header-nav{ gap:18px; } .nav-link{ font-size:11px; letter-spacing:.1em; } .hero{ padding:56px 0 44px; } .tabs{ margin-top:38px; } .tab{ margin-right:26px; font-size:12px; } .grid{ grid-template-columns:1fr; gap:20px; margin-bottom:64px; } .detail-cols{ padding-bottom:72px; } .panel{ padding:26px 22px; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }