/* ========================================================= BURDUNTZI MUSKIZ - estilosBurduntzi.css (LIMPIO) - Index: - Carta: ========================================================= */ :root{ --wrap: 980px; --cartaW: 700px; --textDark: #0b0f14; --mutedDark: #22304a; --paper: rgba(255,255,255,0.94); --paperText: #0b0f14; --green: #0f6a2a; --line: rgba(0,0,0,0.18); } *{ box-sizing: border-box; } body{ margin: 0; font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif; } /* Contenedor común */ .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 22px 16px; } /* ========================================================= TOPBAR (común) ========================================================= */ .topbar{ position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.08); } .topbar-inner{ max-width: var(--wrap); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand{ font-weight: 900; color: var(--textDark); letter-spacing: 0.01em; } .navlink{ color: var(--textDark); font-weight: 800; text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.92); } .navlink:hover{ filter: brightness(0.98); } /* ========================================================= CARTA (page-carta) ========================================================= */ .page-carta{ /* Fondo bandera */ background: linear-gradient( 180deg, #750787 0%, #750787 16.66%, #004dff 16.66%, #004dff 33.33%, #008026 33.33%, #008026 50%, #ffed00 50%, #ffed00 66.66%, #ff8c00 66.66%, #ff8c00 83.33%, #e40303 83.33%, #e40303 100% ); } /* Título “Carta” */ .page-carta .carta-title{ max-width: var(--cartaW); margin: 16px auto; text-transform: uppercase; letter-spacing: 0.10em; font-size: 1.1rem; color: #ffffff; text-shadow: 0 2px 10px rgba(0,0,0,0.4); } /* Hoja */ .page-carta .carta{ max-width: var(--cartaW); margin: 0 auto; background: var(--paper); color: var(--paperText); border-radius: 16px; padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.25); } /* Cada apartado con marco independiente */ .page-carta .carta-section{ border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 14px; background: rgba(255,255,255,0.65); } .page-carta .carta-section h2{ margin: 0 0 8px; font-size: 0.80rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--green); font-weight: 800; } /* Menú */ .page-carta .menu{ list-style: none; margin: 0; padding: 0; } .page-carta .menu li{ display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--line); } .page-carta .menu li:last-child{ border-bottom: none; } .page-carta .menu li span:first-child{ flex: 1; text-transform: uppercase; } .page-carta .menu li span:first-child small{ text-transform: none; font-size: 0.88em; color: rgba(0,0,0,0.60); } /* Precio (sin “ventanas”) */ .page-carta .precio{ min-width: 90px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Horario cocina */ .page-carta .horario-cocina{ max-width: 340px; margin: 18px auto 20px; background: #b01212; color: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 24px rgba(0,0,0,0.28); text-align: center; } .page-carta .horario-cocina h2{ margin: 0 0 10px; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 900; } .page-carta .horario-cocina ul{ list-style: none; margin: 0; padding: 0; } .page-carta .horario-cocina li{ display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dotted rgba(255,255,255,0.5); font-size: 0.95rem; /* antes ~0.75–0.8 */ font-weight: 600; letter-spacing: 0.01em; } .page-carta .horario-cocina li:last-child{ border-bottom: none; } /* Footer carta */ .page-carta .foot{ text-align: center; color: #fff; opacity: 0.85; padding: 18px 16px 26px; } /* Ajuste móvil */ @media (max-width: 600px){ .page-index .hero{ padding-top: 18px; } .page-index .hero-box{ max-width: 100%; } .page-carta .carta{ padding: 14px; } .page-carta .horario-cocina{ max-width: 90%; padding: 12px;} font-size: 1rem; } .brand-home{ text-decoration: none; color: var(--textDark); font-weight: 900; letter-spacing: 0.01em; cursor: pointer; } .brand-home:hover{ text-decoration: underline; } :root{ --wrap: 980px; --cartaW: 700px; --paper: rgba(255,255,255,0.94); --paperText: #0b0f14; --green: #0f6a2a; --line: rgba(0,0,0,0.18); } /* RESET */ *{ box-sizing: border-box; } body{ margin: 0; font-family: "Source Sans 3", system-ui, sans-serif; } /* ========================================================= FONDO: 1) BANDERA + 2) MOSAICO + 3) OSCURECIDO ========================================================= */ .page-carta{ /* 3 capas de fondo: (arriba) oscurecido, mosaico, bandera */ background: /* capa 3: oscurecido suave para que la carta destaque */ linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.20)), /* capa 2: mosaico hamburguesas (semi-transparente) */ url("img/mosaico_burgers.jpg"), /* capa 1: bandera LGTBI (morado arriba, rojo abajo) */ linear-gradient( 180deg, #750787 0%, #750787 16.66%, #004dff 16.66%, #004dff 33.33%, #008026 33.33%, #008026 50%, #ffed00 50%, #ffed00 66.66%, #ff8c00 66.66%, #ff8c00 83.33%, #e40303 83.33%, #e40303 100% ); /* Ajustes por capa */ background-repeat: repeat, repeat, no-repeat; min(1200px, calc(var(--cartaW) + 240px)) auto, min(1200px, calc(var(--cartaW) + 240px)) auto, cover; background-position: center, center, center; /* esto evita que se “corte” raro en scroll */ min-height: 100vh; } /* CONTENEDOR */ .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 20px 16px; } /* TOPBAR */ .topbar{ background: rgba(255,255,255,0.85); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(0,0,0,0.08); } .topbar-inner{ max-width: var(--wrap); margin: 0 auto; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; } .brand{ font-weight: 900; } .navlink{ text-decoration: none; color: #000; font-weight: 800; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.92); } /* TÍTULO CARTA */ .carta-title{ max-width: var(--cartaW); margin: 16px auto 10px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.05rem; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.45); } /* BLOQUE PRINCIPAL (la “hoja”) */ .carta{ max-width: var(--cartaW); margin: 0 auto 18px; background: var(--paper); color: var(--paperText); border-radius: 16px; padding: 16px; box-shadow: 0 18px 55px rgba(0,0,0,0.28); } /* SECCIONES CON MARCO INDEPENDIENTE */ .carta-section{ border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 8px; margin: 0 0 14px; background: rgba(255,255,255,0.70); } /* CABECERA VERDE SLIM */ .carta-section h2{ margin: 0 0 10px; font-size: 3.0rem; /* ≈ el doble */ text-transform: uppercase; letter-spacing: 0.10em; /* menos tracking para elegancia */ color: var(--green); font-weight: 900; padding-bottom: 8px; border-bottom: 1px solid rgba(15,106,42,0.25); } /* LISTA MENÚ */ .menu{ list-style: none; margin: 0; padding: 0; } .menu li{ display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; border-bottom: 1px dotted var(--line); } .menu li:last-child{ border-bottom: none; } /* NOMBRE PLATO: MAYÚSCULAS */ .menu li span:first-child{ flex: 1; text-transform: uppercase; position: relative; overflow: visible; white-space: normal; padding-right: 8px; } /* INGREDIENTES: MINÚSCULAS */ .menu li span:first-child small{ display: block; margin-top: 6px; line-height: 1.25; text-transform: none; font-size: 0.88em; font-weight: 400; color: rgba(0,0,0,0.62); } /* PUNTOS ENTRE NOMBRE Y PRECIO */ .menu li span:first-child::after{ content: none; } /* PRECIO: ALINEADO Y “TAPA” LOS PUNTOS */ .precio{ min-width: 74px; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.94); padding-left: 10px; white-space: nowrap; } /* HORARIO ARRIBA (BLOQUE ROJO) */ .horario-cocina{ max-width: var(--cartaW); margin: 18px auto 18px; background: #b01212; color: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.30); } .horario-cocina h2{ margin: 0 0 10px; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; } .horario-cocina ul{ list-style: none; margin: 0; padding: 0; } .horario-cocina li{ display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dotted rgba(255,255,255,0.55); } .horario-cocina li:last-child{ border-bottom: none; } /* FOOTER */ .foot{ text-align: center; color: #fff; opacity: 0.9; padding: 18px 0 26px; } /* ========================================================= FONDO CARTA (RECUPERADO) - Laterales: bandera LGTBI+ (fija) - Banda central: hamburguesas centradas, repiten en vertical - Velo suave para atenuar hamburguesas ========================================================= */ body.page-carta{ min-height: 100vh; /* 3 capas (arriba → abajo) */ background: /* Capa 3: velo que apaga un poco las hamburguesas (centrado y repite en Y) */ linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.22)), /* Capa 2: mosaico hamburguesas (banda central, repite en vertical) */ url("img/mosaico_hamburguesas_graffiti.jpeg"), /* Capa 1: bandera LGTBI+ (fondo completo) */ linear-gradient( to bottom, #6a0dad 0%, #0057b7 16%, #00a859 32%, #ffeb3b 48%, #ff9800 64%, #e53935 82%, #c62828 100% ); /* Tamaño por capa */ background-size: min(1400px, 92vw) auto, /* velo: mismo ancho que la banda */ min(1400px, 92vw) auto, /* mosaico: banda central grande */ cover; /* bandera: pantalla completa */ /* Posición por capa */ background-position: center top, /* velo */ center top, /* mosaico */ center; /* bandera */ /* Repetición por capa */ background-repeat: repeat-y, /* velo repite vertical */ repeat-y, /* mosaico repite vertical */ no-repeat; /* bandera no repite */ /* Comportamiento scroll por capa */ background-attachment: scroll, /* velo se mueve con la página */ scroll, /* mosaico se mueve con la página */ fixed; /* bandera fija */ } body.page-carta{ mask-image: linear-gradient( to right, transparent 0%, black 10%, black 90%, transparent 100% ); } @media (max-width: 600px){ .carta-section h2{ font-size: 1.35rem; } } .page-legal main{ max-width: 720px; } .page-legal h1{ margin-top: 40px; } .page-legal h2{ margin-top: 26px; font-size: 1.05rem; }