/* ======================================================================= WEB 2010 — sistema visual de la web pública Es el `styles.css` de la maqueta `urbaloca_complete_site` portado al sitio real, con tres cambios y ninguno más: 1. Todo cuelga de `.web2010`, la clase que la plantilla pone en el ``. `app.css` ya define `.site-header`, `.site-footer`, `.panel`, `.toast`, `.room-card` y `.badge`, y esas mismas clases las usan el cliente del juego y el panel de administración. Con el prefijo ganamos por especificidad sin tocar `app.css` ni usar `!important`, y ni una regla de aquí llega a /hotel. 2. Las variables van con prefijo `--p-` y viven en `.web2010`, no en `:root`. La maqueta declaraba `--line`, `--ink`, `--muted` y `--paper`, que en `app.css` son otros colores: publicarlas en `:root` habría cambiado el aspecto de todo el sitio. 3. Los emoji de la maqueta son `` de pixel art de `/assets/icons/ui/`, y los fondos fotográficos salen de `/assets/lobby/plaza.png`, que ya es arte del proyecto. Las reglas de tamaño de esas imágenes son lo único añadido. Se carga solo desde `web2010.twig`, después de `app.css`. ======================================================================= */ .web2010 { --p-navy: #031b3a; --p-navy2: #062b54; --p-blue: #075995; --p-blue2: #0b77bd; --p-cyan: #20cef2; --p-sky: #c6edff; --p-paper: #edf8ff; --p-paper2: #cfe8f5; --p-ink: #15334d; --p-muted: #63819b; --p-gold: #ffc51c; --p-orange: #f58a00; --p-green: #63b913; --p-red: #dd3425; --p-purple: #7356c7; --p-line: #7aa9c7; --p-shadow: 0 5px 0 rgba(0, 19, 45, .45), 0 10px 30px rgba(0, 8, 28, .25); } .web2010 * { box-sizing: border-box; } html:has(.web2010) { scroll-behavior: smooth; } /* La ciudad de fondo va fija y a sangre: es lo que se ve alrededor de la caja del sitio y lo que da el aire de la maqueta. */ body.web2010 { margin: 0; color: var(--p-ink); background: #082b55 url('/assets/lobby/plaza.png') center -120px / cover fixed no-repeat; font-family: Verdana, Tahoma, Arial, sans-serif; } body.web2010:before { content: ""; position: fixed; z-index: -1; inset: 0; background: linear-gradient(#4fc5ef80 0 280px, #06294fe8 700px, #021b39 100%); } .web2010 button, .web2010 input, .web2010 select, .web2010 textarea { font: inherit; } .web2010 button, .web2010 a { transition: filter .13s, transform .08s; } .web2010 button { cursor: pointer; } .web2010 a { color: #075ca2; } .web2010 .pixel { image-rendering: pixelated; } /* ---------- La caja del sitio ---------- */ .web2010 .site { width: min(1240px, calc(100% - 22px)); overflow: hidden; margin: 10px auto 30px; border: 4px solid #001a38; border-radius: 13px; background: #073b6d; box-shadow: 0 8px 38px #001228c9; } .web2010 .chrome { border: 2px solid #001a38; background: linear-gradient(#0a4c82, #052d55); box-shadow: inset 0 0 0 2px #176fa7; } /* ---------- Barra superior ---------- */ .web2010 .topbar { display: grid; align-items: center; grid-template-columns: minmax(300px, 1fr) auto; gap: 14px; padding: 10px 14px; color: #fff; } .web2010 .logo-link { display: flex; min-width: 0; align-items: center; color: #fff; text-decoration: none; } .web2010 .logo-link img { width: min(430px, 100%); height: 100px; object-fit: contain; object-position: left center; } .web2010 .top-actions { display: flex; align-items: center; gap: 8px; } .web2010 .status-chip, .web2010 .user-chip { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 2px solid #0d6ba7; border-radius: 7px; color: #fff; background: #032449; box-shadow: inset 0 1px #38a6da; font-size: 12px; text-decoration: none; } .web2010 .status-dot { width: 11px; height: 11px; border-radius: 50%; background: #61df28; box-shadow: 0 0 8px #61df28; } .web2010 .avatar-mini { display: grid; width: 34px; height: 34px; overflow: hidden; place-items: center; border: 2px solid #0c2e54; border-radius: 5px; background: #f7bd48; } /* El keko es un apilado de capas de 33×92: en la pastilla se ve solo la cara. */ .web2010 .avatar-mini .avatar-stack { width: 33px; height: 92px; margin-top: 24px; } .web2010 .user-chip form { display: inline; margin: 0; } /* ---------- Navegación ---------- */ .web2010 .nav { display: flex; gap: 4px; padding: 5px 7px; border-right: 0; border-left: 0; } .web2010 .nav a { display: flex; min-width: 90px; flex: 1; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border: 2px solid #003260; border-radius: 6px; color: #fff; background: linear-gradient(#1682c8, #075699); box-shadow: inset 0 1px #56c9f5; font-weight: 900; text-align: center; text-decoration: none; text-shadow: 0 2px #00213a; } .web2010 .nav a:hover, .web2010 .nav a.active { background: linear-gradient(#1a94d8, #0a69ad); filter: brightness(1.15); transform: translateY(-1px); } .web2010 .nav img { width: 26px; height: 26px; flex: 0 0 auto; } /* ---------- Superficies ---------- */ .web2010 .page { padding: 10px; background: linear-gradient(#0b4a81, #06345f); } .web2010 .panel { border: 3px solid #082f59; border-radius: 9px; background: linear-gradient(#f5fbff, #d3eaf7); box-shadow: inset 0 0 0 2px #77bcdf, var(--p-shadow); } .web2010 .panel-pad { padding: 12px; } .web2010 .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px -2px 10px; padding: 9px 11px; border-radius: 5px; color: #fff; background: linear-gradient(#0d6aa8, #074777); text-shadow: 0 2px #00213b; } .web2010 .panel-title h1, .web2010 .panel-title h2, .web2010 .panel-title h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; } .web2010 .panel-title img { width: 24px; height: 24px; } .web2010 .panel-title small { color: #ccecff; font-weight: 400; } /* ---------- Botones ---------- */ .web2010 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border: 2px solid #07305b; border-radius: 6px; color: #fff; background: linear-gradient(#2e98db, #0a64ad); box-shadow: inset 0 1px #fff9, 0 3px 0 #001b3c; font-weight: 900; text-decoration: none; text-shadow: 0 2px #0007; } .web2010 .btn:hover { filter: brightness(1.1); } .web2010 .btn:active { box-shadow: inset 0 1px #fff8, 0 1px #001b3c; transform: translateY(2px); } .web2010 .btn-gold { border-color: #9d6100; color: #4c2c00; background: linear-gradient(#ffd646, #f2a000); text-shadow: 0 1px #ffe7a4; } .web2010 .btn-green { border-color: #376d08; background: linear-gradient(#94dc22, #4c9607); } .web2010 .btn-orange { border-color: #914900; background: linear-gradient(#ffbd28, #e97900); } .web2010 .btn-purple { background: linear-gradient(#9e78e4, #5c3eae); } .web2010 .btn-red { background: linear-gradient(#f35d50, #be291c); } .web2010 .btn-ghost { border-color: #5ba4cc; color: #07538a; background: #e6f6ff; text-shadow: none; } .web2010 .btn-small { padding: 6px 10px; font-size: 12px; } .web2010 .btn img { width: 20px; height: 20px; } .web2010 .badge { display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; padding: 0 6px; border: 2px solid #8d0c08; border-radius: 7px; color: #fff; background: #df2a20; font-weight: 900; } /* La ficha es un círculo dibujado, no un PNG: escala sola con el texto. */ .web2010 .coin { display: inline-flex; align-items: center; gap: 5px; color: #8a5500; font-weight: 900; } .web2010 .coin:before { content: "L"; display: inline-grid; width: 22px; height: 22px; place-items: center; border: 2px solid #a96500; border-radius: 50%; color: #7b4b00; background: radial-gradient(circle at 35% 30%, #fff4a0 0 12%, #ffd32a 14% 55%, #e99200 58%); box-shadow: inset 0 1px #fff7, 0 1px 0 #603900; } /* ---------- Portada ---------- */ .web2010 .hero { position: relative; min-height: 420px; overflow: hidden; background: url('/assets/lobby/plaza.png') center 51% / cover; } .web2010 .hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #001a34b5 0 38%, transparent 65%, #00172c3a); pointer-events: none; } .web2010 .hero-copy { position: absolute; z-index: 2; top: 8%; left: 5%; width: 46%; color: #fff; text-align: center; text-shadow: 0 3px #001529; } .web2010 .hero-kicker { font-size: 26px; font-weight: 900; } .web2010 .hero h1 { margin: 4px 0; color: #20d4f4; font-size: 65px; line-height: .95; text-shadow: 0 6px #001c4d, 0 9px 8px #0008; -webkit-text-stroke: 3px #00316d; } .web2010 .hero p { font-size: 20px; font-weight: 900; } .web2010 .hero .btn { padding: 12px 28px; font-size: 24px; } .web2010 .hero .btn small { font-size: 15px; } /* El cartel de Loks era un PNG con el texto quemado dentro; aquí es HTML, así que el rótulo se lee, se traduce y no se pixela. */ .web2010 .hero-loks { position: absolute; z-index: 3; right: 16px; bottom: 14px; display: grid; width: 210px; grid-template-columns: 1fr auto; padding: 9px 11px; border: 3px solid #29bfff; border-radius: 9px; color: #fff; background: linear-gradient(#0a5fa0, #04406f); box-shadow: inset 0 0 0 2px #0a2f55, 0 5px 4px #001b35aa; text-decoration: none; } .web2010 .hero-loks b { grid-column: 1 / -1; font-size: 15px; text-shadow: 0 2px 0 #00233f; } .web2010 .hero-loks strong { grid-column: 1 / -1; margin: -2px 0 4px; color: var(--p-gold); font-size: 38px; line-height: 1; text-shadow: 0 3px 0 #7a4400, 0 5px 6px #0007; } .web2010 .hero-loks p { align-self: center; margin: 0; font-size: 12px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 0 #00233f; } .web2010 .hero-loks img { width: 64px; height: 64px; align-self: center; } .web2010 .hero-bubble { position: absolute; z-index: 3; top: 33%; left: 60%; padding: 8px 14px; border: 3px solid #2a2a2a; border-radius: 7px; background: #fff; box-shadow: 0 4px #0004; font-size: 19px; font-weight: 900; } .web2010 .hero-bubble:after { content: ""; position: absolute; bottom: -13px; left: 18px; border: 7px solid transparent; border-top-color: #292929; } .web2010 .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 298px; gap: 10px; } .web2010 .home-main { display: grid; gap: 10px; align-content: start; } .web2010 .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .web2010 .feature { display: grid; min-height: 135px; align-items: center; grid-template-columns: 82px 1fr; padding: 9px; } .web2010 .feature h3 { margin: -4px -4px 7px; padding: 5px; border-bottom: 1px solid #9abbd0; color: #0a467d; font-size: 14px; grid-column: 1 / -1; } .web2010 .feature img { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; } .web2010 .feature p { font-size: 12px; line-height: 1.35; } .web2010 .room-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .web2010 .room-card { position: relative; display: block; overflow: hidden; border: 2px solid #8ab2c8; border-radius: 6px; color: #0b3f70; background: #eaf8ff; text-decoration: none; } .web2010 .room-card:hover { outline: 3px solid #23c5ee; transform: translateY(-2px); } .web2010 .room-card strong { display: block; overflow: hidden; padding: 6px; text-overflow: ellipsis; white-space: nowrap; } .web2010 .room-card > img { display: block; width: 100%; height: 110px; object-fit: cover; } .web2010 .room-card span { position: absolute; bottom: 5px; left: 5px; display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; color: #fff; background: #102b39d9; font-size: 11px; } .web2010 .room-card span img { width: 15px; height: 15px; } .web2010 .side-stack { display: grid; align-content: start; gap: 10px; } .web2010 .ranking-list, .web2010 .simple-list { margin: 0; padding: 0; list-style: none; } .web2010 .ranking-list li, .web2010 .simple-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid #a5c1d2; background: #f8fdff; font-size: 12px; } .web2010 .ranking-list b, .web2010 .simple-list b { display: flex; align-items: center; gap: 6px; color: #075092; } .web2010 .ranking-list img, .web2010 .simple-list img { width: 22px; height: 22px; } .web2010 .puesto { display: inline-grid; width: 16px; place-items: center; color: #0b3966; font-weight: 900; } .web2010 .puesto-1 { color: #d99400; } .web2010 .puesto-2 { color: #7b8b96; } .web2010 .puesto-3 { color: #a5642c; } .web2010 .news-mini { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #a5becf; } .web2010 .news-mini img { width: 62px; height: 62px; border: 2px solid #779cb4; border-radius: 4px; object-fit: cover; } .web2010 .news-mini a { color: inherit; text-decoration: none; } .web2010 .news-mini b { color: #075196; font-size: 11px; } /* El resumen de una noticia puede ser un párrafo entero: en la columna se corta a tres líneas para que las tres noticias ocupen lo mismo. */ .web2010 .news-mini p { display: -webkit-box; overflow: hidden; margin: 3px 0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 11px; line-height: 1.3; } .web2010 .news-mini time { color: #6f8391; font-size: 10px; } /* ---------- Cabecera de sección ---------- */ .web2010 .page-hero { position: relative; display: grid; min-height: 225px; overflow: hidden; grid-template-columns: 1.2fr .8fr; margin-bottom: 10px; background: url('/assets/lobby/plaza.png') center / cover; } .web2010 .page-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #03294de3 0 48%, #03294d35); } .web2010 .page-hero-copy { position: relative; z-index: 2; align-self: center; padding: 24px; color: #fff; text-shadow: 0 2px #00182b; } .web2010 .page-hero h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 34px; } .web2010 .page-hero h1 img { width: 40px; height: 40px; } .web2010 .page-hero p { max-width: 580px; line-height: 1.5; } .web2010 .page-hero-art { position: relative; z-index: 2; max-width: 90%; max-height: 200px; align-self: end; justify-self: center; object-fit: contain; filter: drop-shadow(0 5px 4px #00162a99); } .web2010 .content-2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; } .web2010 .content-3 { display: grid; grid-template-columns: 220px minmax(0, 1fr) 250px; gap: 10px; } .web2010 .content-1 { display: grid; gap: 10px; } .web2010 .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .web2010 .card { overflow: hidden; border: 2px solid #9dbdce; border-radius: 7px; background: #f8fdff; box-shadow: inset 0 1px #fff; } .web2010 .card img { display: block; width: 100%; height: 150px; object-fit: cover; } .web2010 .card-body { padding: 10px; } .web2010 .card h3 { margin: 0 0 5px; color: #075087; font-size: 15px; } .web2010 .card p { font-size: 12px; line-height: 1.4; } .web2010 .meta { color: #6f8391; font-size: 11px; } /* ---------- Pestañas, filtros y listas ---------- */ .web2010 .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .web2010 .tab { padding: 7px 12px; border: 2px solid #0b4f83; border-radius: 5px; color: #0a4b7b; background: #dff3ff; font-weight: 900; text-decoration: none; } .web2010 .tab.active { color: #fff; background: linear-gradient(#1480c2, #075c9d); } .web2010 .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .web2010 .input { width: 100%; padding: 9px 10px; border: 2px solid #8aa9ba; border-radius: 5px; color: #17364c; background: #fff; box-shadow: inset 0 2px 3px #0001; } .web2010 .filter-row .input { min-width: 200px; flex: 1; } .web2010 .select { padding: 9px; border: 2px solid #8aa9ba; border-radius: 5px; background: #fff; } .web2010 .room-list { display: grid; gap: 8px; } .web2010 .room-row { display: grid; align-items: center; grid-template-columns: 115px minmax(0, 1fr) auto; gap: 10px; padding: 8px; border: 2px solid #9fbdcf; border-radius: 7px; background: #f8fdff; } .web2010 .room-row img { width: 115px; height: 70px; border-radius: 4px; object-fit: cover; } .web2010 .room-row h3 { margin: 0 0 4px; color: #07508c; } .web2010 .room-row p { margin: 0; font-size: 12px; } .web2010 .online { color: #178a24; font-weight: 900; } .web2010 .cerrada { color: #7b5a12; font-weight: 900; } /* ---------- Catálogo ---------- */ .web2010 .catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .web2010 .item-card { position: relative; padding: 9px; border: 2px solid #9bb9ca; border-radius: 7px; background: #f9fdff; text-align: center; } .web2010 .item-card img { width: 86px; height: 86px; object-fit: contain; image-rendering: pixelated; } .web2010 .item-card h3 { margin: 4px 0; font-size: 12px; } .web2010 .item-card .coin { justify-content: center; font-size: 11px; } .web2010 .ribbon { position: absolute; top: 7px; right: -4px; padding: 4px 7px; color: #fff; background: #e33a2a; box-shadow: 0 2px #76180f; font-size: 10px; font-weight: 900; } .web2010 .cart { position: sticky; top: 10px; align-self: start; } .web2010 .cart-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #a7c1d2; font-size: 12px; } .web2010 .cart-total { display: flex; justify-content: space-between; margin: 10px 0; } .web2010 .btn-block { width: 100%; margin-bottom: 7px; } /* ---------- Ayuda ---------- */ .web2010 .faq { display: grid; gap: 6px; } .web2010 .faq > div { display: grid; } .web2010 .faq button { width: 100%; padding: 11px; border: 2px solid #a0bed0; border-radius: 6px; color: #154765; background: #f7fdff; font-weight: 900; text-align: left; } .web2010 .faq button[aria-expanded="true"] { border-radius: 6px 6px 0 0; } .web2010 .faq-answer { display: none; padding: 12px; border: 2px solid #9bb9ca; border-top: 0; border-radius: 0 0 6px 6px; background: #dff3ff; font-size: 12px; line-height: 1.5; } .web2010 .faq-answer.open { display: block; } .web2010 .form { display: grid; gap: 9px; } .web2010 .form label { display: grid; gap: 4px; color: #144c75; font-size: 12px; font-weight: 900; } .web2010 .ayuda-centro { text-align: center; } .web2010 .ayuda-centro img { width: 96px; height: 96px; } .web2010 .ayuda-lista p { display: flex; align-items: center; gap: 8px; font-size: 12px; } .web2010 .ayuda-lista img { width: 24px; height: 24px; flex: 0 0 auto; } /* ---------- Noticias ---------- */ .web2010 .news-list { display: grid; gap: 10px; } .web2010 .news-card { display: grid; overflow: hidden; grid-template-columns: 220px 1fr; } .web2010 .news-card img { width: 220px; height: 150px; object-fit: cover; } .web2010 .news-card > div { padding: 12px; } .web2010 .news-card h2 { margin: 0 0 5px; color: #07508a; font-size: 18px; } .web2010 .news-card h2 a { color: inherit; text-decoration: none; } .web2010 .news-card p { line-height: 1.45; } .web2010 .badge-cat { display: inline-block; padding: 3px 8px; border-radius: 5px; color: #fff; background: linear-gradient(#1480c2, #075c9d); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .web2010 .pagination { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } /* ---------- Utilidades ---------- */ /* Los avisos de «aquí no hay nada» viven dentro de rejillas de 4 y 5 columnas: sin esto ocupan una sola columna y el texto sale en vertical. */ .web2010 .empty { padding: 30px; grid-column: 1 / -1; color: #66849a; text-align: center; } .web2010 .notice { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 11px 13px; border: 3px solid #082f59; border-radius: 9px; color: #15334d; background: linear-gradient(#fff6cf, #ffe28a); box-shadow: inset 0 0 0 2px #ffefb0, var(--p-shadow); font-weight: 700; } .web2010 .notice-success { background: linear-gradient(#dcf6c6, #b6e58a); box-shadow: inset 0 0 0 2px #eafbd9, var(--p-shadow); } .web2010 .notice-error { background: linear-gradient(#ffd9d2, #ffaea0); box-shadow: inset 0 0 0 2px #ffe9e4, var(--p-shadow); } .web2010 .notice img { width: 24px; height: 24px; } .web2010 .mockup-preview { display: block; width: 100%; border: 2px solid #7ca9c5; border-radius: 8px; } .web2010 .hide { display: none !important; } /* ---------- Pie ---------- */ .web2010 .footer { display: grid; align-items: center; grid-template-columns: 85px 1fr auto; gap: 12px; padding: 13px 16px; border-right: 0; border-bottom: 0; border-left: 0; color: #d9f2ff; } .web2010 .footer > img { width: 75px; height: 75px; object-fit: contain; } .web2010 .footer-links { display: flex; flex-wrap: wrap; gap: 7px 12px; } .web2010 .footer a { color: #fff; font-size: 11px; text-decoration: none; } .web2010 .footer p { margin: 6px 0; font-size: 10px; } .web2010 .copyright { font-size: 10px; line-height: 1.5; text-align: right; } /* ---------- Aviso flotante ---------- */ .web2010 .toast { position: fixed; z-index: 9999; bottom: 24px; left: 50%; padding: 10px 16px; border: 2px solid #24cff2; border-radius: 7px; opacity: 0; color: #fff; background: #001f3d; box-shadow: 0 8px 30px #0008; font-weight: 900; pointer-events: none; transform: translate(-50%, 20px); transition: .2s; } .web2010 .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- Estrecho ---------- */ @media (max-width: 1050px) { .web2010 .topbar { grid-template-columns: 1fr; } .web2010 .top-actions { justify-content: center; } .web2010 .logo-link { justify-content: center; } .web2010 .home-grid, .web2010 .content-2, .web2010 .content-3 { grid-template-columns: 1fr; } .web2010 .side-stack { grid-template-columns: repeat(2, 1fr); } .web2010 .feature-grid { grid-template-columns: repeat(2, 1fr); } .web2010 .room-grid { grid-template-columns: repeat(3, 1fr); } .web2010 .cards, .web2010 .catalog { grid-template-columns: repeat(3, 1fr); } .web2010 .cart { position: static; } } @media (max-width: 760px) { body.web2010 { background: #062b54; } .web2010 .site { width: 100%; margin: 0; border-right: 0; border-left: 0; border-radius: 0; } .web2010 .logo-link img { height: 80px; } .web2010 .top-actions { flex-wrap: wrap; } .web2010 .nav { overflow-x: auto; } .web2010 .nav a { flex: 0 0 125px; } .web2010 .hero { min-height: 520px; } .web2010 .hero-copy { top: 6%; left: 5%; width: 90%; } .web2010 .hero h1 { font-size: 48px; } .web2010 .hero p { font-size: 16px; } .web2010 .hero-bubble { display: none; } .web2010 .hero-loks { width: 160px; } .web2010 .feature-grid, .web2010 .side-stack, .web2010 .cards, .web2010 .catalog { grid-template-columns: 1fr 1fr; } .web2010 .room-grid { grid-template-columns: repeat(2, 1fr); } .web2010 .page-hero { grid-template-columns: 1fr; } .web2010 .page-hero-art { display: none; } .web2010 .news-card { grid-template-columns: 1fr; } .web2010 .news-card img { width: 100%; height: 200px; } .web2010 .footer { grid-template-columns: 70px 1fr; } .web2010 .copyright { grid-column: 1 / -1; text-align: center; } .web2010 .room-row { grid-template-columns: 85px 1fr; } .web2010 .room-row img { width: 85px; } .web2010 .room-row .btn { grid-column: 1 / -1; } } @media (max-width: 480px) { .web2010 .feature-grid, .web2010 .side-stack, .web2010 .cards, .web2010 .catalog, .web2010 .room-grid { grid-template-columns: 1fr; } .web2010 .hero h1 { font-size: 40px; } .web2010 .hero-kicker { font-size: 20px; } .web2010 .hero .btn { font-size: 19px; } .web2010 .top-actions .status-chip { display: none; } }