diff --git a/style.css b/style.css deleted file mode 100644 index c355eec..0000000 --- a/style.css +++ /dev/null @@ -1,3867 +0,0 @@ -:root { - --bg-black: #000000; - --card-bg: #1c1c1e; - --text-white: #f5f5f7; - --accent-blue: #0071e3; - --glass: rgba(29, 29, 31, 0.75); -} - -/* Global Reset */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Segoe UI', sans-serif; -} - -body { - background: var(--bg-black); - color: var(--text-white); - overflow-x: hidden; -} - -.hidden { display: none !important; } - -/* --- Navigation --- */ -.navbar { - position: fixed; - top: 0; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.2rem 10%; - background: var(--glass); - backdrop-filter: blur(20px); - z-index: 1000; -} - -.nav-links { - display: flex; - list-style: none; - gap: 2rem; -} - -.nav-links a { - color: white; - text-decoration: none; - opacity: 0.8; - font-size: 0.9rem; -} - -/* --- Hero Section --- */ -.hero { - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - background: linear-gradient(rgba(0,0,0,0.4), #000), url('https://images.unsplash.com/photo-1485846234645-a62644f84728?q=80&w=2000') center/cover; -} - -.badge { - background: var(--accent-blue); - padding: 4px 12px; - border-radius: 20px; - font-size: 0.7rem; - font-weight: bold; -} - -.hero h1 { - font-size: 4.5rem; - margin: 10px 0; -} - -/* --- Movie Grid & Sections --- */ -.movie-section { padding: 80px 10%; } - -.movie-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 30px; -} - -.movie-card { - background: var(--card-bg); - border-radius: 20px; - overflow: hidden; -} - -.movie-poster img { - width: 100%; - aspect-ratio: 2/3; - object-fit: cover; -} - -.movie-info { padding: 20px; } - -.showtimes { - display: flex; - gap: 10px; - margin-top: 15px; -} - -/* --- UI Elements (Chips & Buttons) --- */ -.time-chip { - background: rgba(255,255,255,0.1); - border: none; - color: white; - padding: 8px 15px; - border-radius: 10px; - cursor: pointer; - transition: 0.3s; -} - -.time-chip:hover { background: var(--accent-blue); } - -.btn-primary { - background: var(--accent-blue); - color: white; - border: none; - padding: 12px 25px; - border-radius: 20px; - cursor: pointer; -} - -/* --- Detailed List View --- */ -.detailed-card { - display: flex; - background: var(--card-bg); - border-radius: 24px; - margin-bottom: 30px; - overflow: hidden; -} - -.card-left { - width: 250px; - position: relative; -} - -.card-left img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.card-right { - flex: 1; - padding: 30px; -} - -.fsk { - position: absolute; - bottom: 10px; - left: 10px; - width: 35px; - height: 35px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; -} - -.fsk-0 { background: #d6d6d6; } -.fsk-6 { background: #e3c500; } -.fsk-12 { background: #008d39; } -.fsk-16 { background: #0095ff; } -.fsk-18 { background: #ff3730; } - -.schedule-container { - background: rgba(0,0,0,0.2); - padding: 15px; - border-radius: 15px; - margin-top: 20px; -} - -.schedule-header { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - color: #86868b; - font-size: 0.7rem; - margin-bottom: 10px; -} - -.schedule-row { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - align-items: center; - padding: 10px; - border-radius: 10px; -} - -.time-btn { - background: var(--accent-blue); - padding: 5px 10px; - border-radius: 5px; - width: fit-content; -} - -/* --- Booking Modal --- */ -.modal { - position: fixed; - top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0,0,0,0.85); - backdrop-filter: blur(20px); - display: flex; - justify-content: center; - align-items: center; - z-index: 2000; -} - -.modal-content { - background: #1c1c1e; - padding: 40px; - border-radius: 32px; - width: 90%; - max-width: 1000px; - border: 1px solid rgba(255,255,255,0.1); - position: relative; -} - -.close-btn { - position: absolute; - top: 20px; - right: 25px; - font-size: 2rem; - cursor: pointer; - color: #86868b; -} - -.modal-close-btn { - position: absolute; - top: 16px; - right: 16px; - width: 36px; - height: 36px; - border: 0; - border-radius: 50%; - background: #2b2b2d; - color: #fff; - font-size: 1.4rem; - line-height: 1; - cursor: pointer; - transition: background 0.2s ease; -} - -.modal-close-btn:hover { - background: #3a3a3d; -} - -.screen { - height: 5px; - background: white; - width: 80%; - margin: 20px auto; - box-shadow: 0 0 15px white; -} - -.screen-text { - text-align: center; - font-size: 0.7rem; - color: #86868b; - letter-spacing: 5px; -} - -/* --- MODAL & SITZPLAN UPDATE --- */ -.modal-large { - max-width: 95vw !important; /* Fast die ganze Breite nutzen */ - max-height: 90vh; - overflow-y: auto; /* Vertikales Scrollen erlauben */ - width: 1000px !important; -} - -#deluxe-logos { - display: flex; - gap: 10px; - justify-content: center; - margin-top: 15px; -} - -.logo-placeholder { - background: rgba(255,255,255,0.1); - padding: 6px 12px; - border-radius: 8px; - font-size: 0.75rem; - color: #86868b; - border: 1px dashed rgba(255,255,255,0.3); -} - -.seat-map-container { - width: 100%; - overflow-x: auto; /* Horizontales Scrollen für IMAX */ - padding: 10px 0 20px 0; -} - -.seat-grid-custom { - display: flex; - flex-direction: column; - gap: 10px; - align-items: center; - margin: 20px auto; - width: fit-content; -} - -.seat-row { - display: flex; - gap: 8px; - justify-content: center; -} - -.aisle { - width: 25px; /* Breite des Durchgangs */ -} - -/* Sitzplatz Design */ -/* --- SITZPLATZ DESIGN UPDATE --- */ -.seat { - width: 26px; - height: 26px; - background: #3a3a3c; /* Standard Grau */ - border-radius: 6px; - cursor: pointer; - transition: all 0.2s ease-in-out; - display: flex; - align-items: center; - justify-content: center; - position: relative; - border: 1px solid rgba(255,255,255,0.1); -} - -/* Hover-Effekt (Hervorhebung) */ -.seat:hover:not(.occupied) { - transform: scale(1.25); - z-index: 10; - border-color: rgba(255,255,255,0.5); -} - -/* Farben der Typen */ -.seat.normal, .seat.imax { background: #3a3a3c; } -.seat.vip { background: #ff9500; } /* Orange */ -.seat.dbox { - background: #ffca28; /* Gold */ - box-shadow: inset 0 0 5px rgba(0,0,0,0.2); -} - -/* Ausgewählter Zustand (Grün + Glow) */ -.seat.selected { - background: #34c759 !important; /* iOS Grün */ - box-shadow: 0 0 15px #34c759; - transform: scale(1.1); - border-color: white; -} - -/* Belegter Zustand (Rot mit X) */ -.seat.occupied { - background: #ff3b30 !important; /* Rot */ - cursor: not-allowed; - opacity: 1; - transform: none; -} - -.seat.occupied::after { - content: '×'; - color: white; - font-size: 18px; - font-weight: bold; - line-height: 1; -} - -/* Legende Styling */ -.legend .seat { cursor: default; pointer-events: none; width: 20px; height: 20px; } -.legend .item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #86868b; } - -#dynamic-legend { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 15px; - margin-top: 20px; - padding: 15px; - background: rgba(255,255,255,0.05); - border-radius: 12px; -} - -/* --- Snack Tabs Navigation --- */ -.category-tabs { - display: flex; - justify-content: center; - gap: 15px; - margin-bottom: 50px; -} - -.tab-btn { - background: #1c1c1e; - border: 1px solid rgba(255,255,255,0.1); - color: white; - padding: 12px 25px; - border-radius: 30px; - cursor: pointer; - transition: 0.3s; -} -.tab-btn:hover { background: rgba(255,255,255,0.1); } -.tab-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); } - -.snack-category { - animation: fadeIn 0.4s ease-in-out; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} - -/* --- Snack Grid & Cards --- */ -.snack-section { padding: 100px 10%; } -.snack-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 25px; -} - -.snack-card { - background: var(--card-bg); - border-radius: 20px; - overflow: hidden; - transition: 0.3s; - border: 1px solid rgba(255,255,255,0.05); -} - -.snack-card:hover { - transform: translateY(-8px); border-color: var(--accent-blue); -} - -.snack-card.highlight { - border: 1px solid var(--accent-blue); - background: linear-gradient(145deg, #1c1c1e, #0a2540); -} - -.snack-img { - width: 100%; - height: 150px; - background: #111; -} - -.snack-img img { - width: 100%; - height: 100%; - object-fit: contain; /* Ideal für Produktfotos auf dunklem Grund */ - padding: 10px; -} - -/* --- SNACK INFO ZENTRIERUNG --- */ - -.snack-info { - padding: 20px; - text-align: center; - display: flex; - flex-direction: column; - align-items: center; -} - -.snack-info h3 { - font-size: 1rem; - margin-bottom: 15px; - width: 100%; -} - -.size-selector { - display: flex; - flex-wrap: wrap; - gap: 8px; - justify-content: center; -} - -.size-chip { - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); - color: white; - padding: 6px 12px; - border-radius: 8px; - font-size: 0.75rem; - cursor: pointer; - transition: 0.2s; -} - -.size-chip span { - display: block; - color: var(--accent-blue); - font-weight: bold; -} - -.size-chip:hover { - background: var(--accent-blue); - border-color: var(--accent-blue); -} - -.size-chip:hover span { - color: white; -} - -.size-chip.special { - background: rgba(229, 160, 13, 0.1); - border: 1px solid #e5a00d; -} - -.size-chip.special span { - color: #e5a00d; -} - -/* Snack Options (Sweet/Salty & Dips) */ -.option-group { - display: flex; - gap: 5px; - margin-bottom: 15px; - background: rgba(0, 0, 0, 0.3); - padding: 4px; - border-radius: 10px; -} - -.opt-btn { - flex: 1; - background: transparent; - border: none; - color: #86868b; - padding: 6px; - font-size: 0.75rem; - font-weight: bold; - cursor: pointer; - border-radius: 7px; - transition: 0.2s; -} - -.opt-btn.active { - background: #3a3a3c; - color: white; -} - -/* --- Coming Soon Banner --- */ -.coming-soon-banner { - background: linear-gradient(45deg, #1c1c1e, #2a2a2d); - border: 2px dashed rgba(255,255,255,0.2); - border-radius: 20px; - padding: 80px 20px; - text-align: center; - color: var(--text-white); -} - -.coming-soon-banner h2 { - font-size: 2.5rem; - margin-bottom: 10px; - color: var(--accent-blue); -} - -.coming-soon-banner p { - font-size: 1.5rem; - font-weight: bold; - margin-bottom: 10px; -} - -.coming-soon-banner span { color: #86868b; } - -/* Layout breiter machen */ -.booking-layout { - display: flex; - gap: 40px; /* Mehr Abstand zwischen Plan und Preis */ - align-items: flex-start; - justify-content: center; - max-width: 1200px; /* Erlaubt dem Fenster mehr Platz */ - margin: 0 auto; - transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); -} - -/* Das rechte Panel optimiert */ -.summary-panel { - width: 300px; /* Etwas breiter für bessere Lesbarkeit */ - background: rgba(255, 255, 255, 0.03); - backdrop-filter: blur(10px); - border-radius: 24px; - padding: 25px; - border: 1px solid rgba(255, 255, 255, 0.08); - - /* Langsamere, sanftere Animation */ - animation: slideInSoft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; -} - -@keyframes slideInSoft { - from { - opacity: 0; - transform: translateX(40px) scale(0.98); - } - to { - opacity: 1; - transform: translateX(0) scale(1); - } -} - -.summary-row { - display: flex; - justify-content: space-between; - font-size: 0.95rem; - margin-bottom: 12px; - color: #a1a1a6; - /* Die einzelnen Zeilen faden auch sanft ein */ - animation: fadeInRow 0.5s ease forwards; -} - -@keyframes fadeInRow { - from { opacity: 0; } - to { opacity: 1; } -} - -.summary-row .type { color: #f5f5f7; } -.summary-row .price { font-weight: bold; color: var(--accent-blue); } - -.divider { - height: 1px; - background: rgba(255, 255, 255, 0.1); - margin: 15px 0; -} - -.total-row { - display: flex; - justify-content: space-between; - font-weight: 600; - font-size: 1.2rem; - color: #ffffff; - letter-spacing: -0.02em; -} - -/* Verstecken mit sanftem Übergang */ -.hidden { display: none !important; } - -.header-sub-info { - display: flex; - align-items: center; - gap: 15px; - margin-top: 5px; -} - -.tech-badges-container { - display: flex; - gap: 10px; - align-items: center; - /* Sanfter Übergang beim Einblenden */ - animation: fadeIn 0.5s ease; -} - -.tech-badge { - height: 14px; /* Schön klein und dezent */ - width: auto; - opacity: 0.7; /* Leicht transparent für den edlen Look */ - filter: brightness(0) invert(1); /* Macht schwarze Logos weiß, passend zum Dark Mode */ -} - -.tech-badges-container.hidden { - display: none; -} - -.tech-badges-container { - display: flex; - gap: 10px; - align-items: center; - margin-left: 10px; -} - -.tech-badge { - height: 18px; /* Oder die gewünschte Höhe */ - width: auto; - opacity: 0.8; -} - -/* --- Warenkorb Badge --- */ -.cart-badge { - background-color: #e50914; /* Kino-Rot */ - color: white; - font-size: 0.75rem; - font-weight: bold; - border-radius: 50%; - padding: 2px 6px; - position: absolute; - top: -8px; - right: -15px; - transition: transform 0.3s ease; -} -.cart-badge.hidden { display: none; } -.cart-badge.pop { transform: scale(1.3); } /* Für eine kleine Animation beim Hinzufügen */ - -/* --- WARENKORB SPALTEN-LAYOUT & HINTERGRÜNDE --- */ -/* --- WARENKORB DESIGN (SPALTEN-LAYOUT) --- */ -.cart-container { - display: flex; - gap: 50px; - align-items: flex-start; - margin-top: 40px; -} - -/* Linke Seite (Artikelliste) mit Panel-Hintergrund */ -.cart-left { - flex: 2; - background-color: #1c1c1e !important; /* !important stellt sicher, dass es grau bleibt */ - padding: 35px; - border-radius: 28px; - border: 1px solid rgba(255, 255, 255, 0.1); -} - -/* Rechte Seite (Zusammenfassung) */ -.cart-right { - flex: 1; - min-width: 380px; -} - -.cart-items { - flex: 2; - background: #1c1c1e; - border-radius: 12px; - padding: 20px; -} -.cart-summary-box { - flex: 1; - background: #1c1c1e; - border-radius: 12px; - padding: 25px; - position: sticky; - top: 100px; -} -.cart-total-row { - display: flex; - justify-content: space-between; - font-size: 1.3rem; - font-weight: bold; - margin-top: 15px; - padding-top: 15px; - border-top: 1px solid #333; -} -.payment-methods-panel { - background: #2c2c2e !important; /* Ein helleres Grau als die Boxen oben */ - padding: 20px; - border-radius: 18px; - margin-top: 30px; - border: 1px solid rgba(255, 255, 255, 0.1); -} - -/* Die Logos selbst */ -.payment-methods-panel div { - display: flex; - justify-content: center; - gap: 15px; - opacity: 0.95; /* Fast volle Sichtbarkeit (vorher 0.6) */ -} - -.payment-methods-panel img { - height: 22px; /* Etwas größer für bessere Sichtbarkeit */ - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); /* Kleiner Schatten für Tiefe */ - transition: transform 0.2s; -} - -.payment-methods-panel img:hover { - transform: scale(1.1); /* Kleiner Effekt beim Drüberfahren */ -} - -/* --- Snack Prompt Overlay --- */ -.snack-overlay { - position: fixed; - top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0,0,0,0.8); - backdrop-filter: blur(5px); - display: flex; - justify-content: center; - align-items: center; - z-index: 2000; - opacity: 1; - transition: opacity 0.4s ease; -} -.snack-overlay.hidden { - opacity: 0; - pointer-events: none; -} -.snack-prompt-box { - background: #1c1c1e; - padding: 40px; - border-radius: 16px; - text-align: center; - max-width: 500px; - transform: translateY(0); - transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} -.snack-overlay.hidden .snack-prompt-box { - transform: translateY(50px); -} -.snack-prompt-box h2 { margin-bottom: 15px; color: #fff; } -.snack-prompt-box p { color: #aaa; margin-bottom: 25px; } -.prompt-buttons { display: flex; gap: 15px; justify-content: center; } -.btn-secondary { - background: transparent; - border: 1px solid #fff; - color: #fff; - padding: 12px 24px; - border-radius: 8px; - cursor: pointer; - transition: 0.3s; -} -.btn-secondary:hover { background: rgba(255,255,255,0.1); } - -/* --- WARENKORB TABELLEN-LAYOUT --- */ -.cart-item-row, -.cart-header { - display: grid; - grid-template-columns: 100px 80px 1.5fr 1fr 100px 50px; - align-items: center; - gap: 0; /* Wir nutzen kein gap, um volle Kontrolle über die Spalten zu haben */ -} - -.cart-header { - font-size: 0.75rem; - color: #86868b; - font-weight: bold; - letter-spacing: 1.2px; - border-bottom: 1px solid #333; - padding: 15px 0; - margin-bottom: 10px; -} - -.cart-item-row { - padding: 20px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -/* 1. Spalte: Menge (Zentriert den Stepper/Text etwas) */ -.cart-item-row > div:nth-child(1), -.cart-header > div:nth-child(1) { - padding-left: 5px; -} - -/* 2. Spalte: Das Bild (Bekommt links Platz zum Stepper) */ -.cart-item-row > div:nth-child(2) { - padding-left: 15px; /* Abstand zwischen +/- Button und Bild */ -} - -/* 3. Spalte: ARTIKEL (Titel) - Hier schieben wir die Schrift nach rechts */ -.cart-header > div:nth-child(3), -.cart-item-row > div:nth-child(3) { - padding-left: 30px; /* Dieser Wert sorgt für die Ordnung */ -} - -/* 4. Spalte: INFO - Auch hier schieben wir für die vertikale Linie nach rechts */ -.cart-header > div:nth-child(4), -.cart-item-row > div:nth-child(4) { - padding-left: 30px; -} - -/* 5. Spalte: PREIS (Rechtsbündig für Tabellen-Look) */ -.cart-header > div:nth-child(5), -.cart-item-row > div:nth-child(5) { - text-align: right; - padding-right: 15px; -} - -/* 6. Spalte: LÖSCHEN (Zentriert am Ende) */ -.cart-header > div:nth-child(6), -.cart-item-row > div:nth-child(6) { - text-align: right; -} - -/* Bild-Styling innerhalb der Spalte */ -.cart-item-row img { - width: 45px; - height: 60px; - object-fit: cover; - border-radius: 8px; - display: block; -} -/* Plus-Minus Buttons */ -.qty-stepper { - display: flex; - align-items: center; - gap: 10px; - background: rgba(0,0,0,0.3); - padding: 5px 10px; - border-radius: 20px; - width: fit-content; -} - -.btn-qty { - background: none; - border: 1px solid var(--accent-blue); - color: var(--accent-blue); - width: 22px; - height: 22px; - border-radius: 50%; - cursor: pointer; - font-weight: bold; -} -.btn-delete-item { - transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease; - cursor: pointer; -} - -.btn-qty:hover, -.btn-delete-item:hover { - background: #0071e3 !important; /* Das Apple-Blau */ - border-radius: 6px; /* Schön abgerundet */ - transform: scale(1.1); /* Minimal vergrößern */ -} -/* Animationen */ -@keyframes popIn { - 0% { transform: scale(0.9); opacity: 0; } - 100% { transform: scale(1); opacity: 1; } -} - -.animate-pop-in { - animation: popIn 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67); -} - -.btn-delete-item { - background: none; - border: none; - font-size: 1.2rem; - cursor: pointer; - opacity: 0.5; - transition: 0.3s; -} - -.btn-delete-item:hover { - opacity: 1; transform: scale(1.2); -} - -/* Checkout Container */ -.checkout-container { - max-width: 600px; - margin: 0 auto; - padding: 30px; - background: #1a1a1a; - border-radius: 12px; - box-shadow: 0 10px 30px rgba(0,0,0,0.5); -} - -/* Fortschrittsleiste */ -.progress-bar { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 40px; -} - -.progress-bar .step { - width: 35px; - height: 35px; - border-radius: 50%; - background: #333; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - color: #e5e5e7; /* Zahlen deutlich heller gemacht */ - transition: 0.3s; -} - -.progress-bar .step.active { - background: #4caf50 !important; /* Grün statt Rot/Blau */ - color: white; - border-color: #4caf50 !important; -} - -.progress-bar .line { - height: 4px; - width: 80px; - background: #333; - margin: 0 15px; - transition: all 0.5s ease; -} - -.progress-bar .line.active { - background: #4caf50 !important; -} -/* Zahlungsarten */ -.payment-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 15px; -} - -.payment-method { - background: #1c1c1e; - padding: 20px; - border-radius: 12px; - cursor: pointer; - border: 2px solid transparent; - display: flex; - flex-direction: row; /* Nebeneinander statt untereinander */ - align-items: center; /* Vertikal zentriert */ - justify-content: center; - gap: 15px; - transition: 0.3s; -} - -.payment-method img { - height: 22px; /* Einheitliche Größe */ - width: auto; - margin-top: 2px; /* Schiebt das Bild dezent nach unten für optische Symmetrie zum Text */ -} - -.payment-method:hover { - border-color: #888; -} - -.payment-method.selected { - border-color: #e50914; - background: rgba(229, 9, 20, 0.1); - transform: scale(1.02); -} - -/* Hover-Effekt für den Zurück-Pfeil */ -#btn-back-to-step1:hover { - opacity: 1; - transform: translateX(-3px); -} - -.cart-header-row, -.cart-item-row { - display: grid; - /* Spalten: Menge(100px) | Bild(100px) | Produkt(1.5fr) | Details(2fr) | Preis(100px) | Aktion(80px) */ - grid-template-columns: 100px 100px 1.5fr 2fr 100px 80px; - gap: 15px; - align-items: center; - padding: 15px 20px; -} - -.cart-header-row, -.cart-item-row { - display: grid; - /* Menge | Bild | Produkt | Details | Preis | Aktion */ - grid-template-columns: 110px 100px 1.3fr 1.7fr 100px 60px; - gap: 10px; - align-items: center; - padding: 15px 20px; -} - -.col-amount { text-align: center; } -.col-img { text-align: center; } - -/* Produkt & Details nach rechts schieben */ -.col-product { - text-align: left; - padding-left: 25px; /* Minimal mehr nach rechts */ -} - -.col-details { - text-align: left; - padding-left: 35px; /* Minimal mehr nach rechts */ -} - -/* Preis weiter links ausrichten */ -.col-price { - text-align: left; - padding-left: 10px; -} - -.col-action { text-align: right; } - -/* Menge-Stepper im Warenkorb */ -.qty-stepper { - display: flex; - align-items: center; - gap: 10px; - background: #2c2c2e; - padding: 5px 10px; - border-radius: 8px; - width: fit-content; -} - -.btn-qty { - cursor: pointer; - width: 28px; - height: 28px; - border: none; - background: #3a3a3c; - color: white; - border-radius: 6px; - font-weight: bold; - transition: 0.2s; -} -/* Klick-Zustand: Leicht eindrücken */ -.btn-qty:active, -.btn-delete-item:active { - transform: scale(0.95); -} - -/* Spezifisches Styling für den Mülleimer (damit der Hover-Hintergrund passt) */ -.btn-delete-item { - background: none; - border: none; - font-size: 1.2rem; - padding: 5px 8px; /* Etwas Platz für den blauen Hintergrund */ - display: flex; - align-items: center; - justify-content: center; -} - -.cart-img-small { - width: 60px; - height: 85px; - object-fit: cover; - border-radius: 6px; - box-shadow: 0 4px 10px rgba(0,0,0,0.3); -} - -.cart-item-info { - color: #0071e3; - font-size: 0.9rem; - line-height: 1.4; -} - -/* --- Luxury Dark Ticket --- */ -.luxury-ticket { - background: #111; /* Dunkel statt Weiß */ - color: #f5f5f7; - display: flex; - max-width: 600px; - margin: 20px auto; - border-radius: 15px; - overflow: hidden; - border: 1px solid #333; - box-shadow: 0 20px 40px rgba(0,0,0,0.8); -} - -.ticket-left { - width: 35%; -} - -.ticket-poster { - width: 100%; - height: 100%; - object-fit: cover; -} - -.ticket-right { - width: 65%; - padding: 25px; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.ticket-brand { - font-size: 0.7rem; - letter-spacing: 3px; - color: #0071e3; - margin-bottom: 10px; -} - -.ticket-title { - font-size: 1.8rem; - margin-bottom: 20px; - border-bottom: 1px solid #333; - padding-bottom: 10px; -} - -.ticket-details p { - display: flex; - justify-content: space-between; - margin-bottom: 8px; - font-size: 0.9rem; -} - -.ticket-details span { - color: #86868b; -} - -.ticket-footer { - display: flex; - justify-content: space-between; - align-items: flex-end; - margin-top: 20px; -} - -.ticket-qr { - width: 100px; - height: 100px; - border: 5px solid white; /* Weißer Rand für Scanbarkeit auf dunklem Grund */ - border-radius: 5px; -} - -.ticket-code { - font-family: 'Courier New', Courier, monospace; - color: #444; - font-size: 1.2rem; -} - -/* Kinoticket */ -.kinoticket { - background: #fff; - color: #000; - padding: 20px; - border-radius: 15px; - max-width: 300px; /* Begrenzt die Breite des Tickets */ - margin: 20px auto; - text-align: center; - box-shadow: 0 10px 30px rgba(0,0,0,0.5); -} - -.kinoticket .poster { - width: 100%; - max-height: 180px; /* Macht das Bild deutlich kleiner */ - object-fit: cover; /* Verhindert Verzerrung */ - border-radius: 10px; - margin-bottom: 15px; -} - -.kinoticket h3 { - margin: 10px 0 5px; - font-size: 1.2rem; -} -.kinoticket p { color: #ccc; margin-bottom: 5px; font-size: 0.9rem; } -.kinoticket .seats { font-weight: bold; color: #e50914; margin-top: 10px; font-size: 1.1rem; } - -.kinoticket .qr-code { - background: white; - padding: 10px; - display: inline-block; - margin-top: 15px; - border: 1px solid #ddd; -} - -.kinoticket .qr-code img { - width: 130px; /* Feste Größe für den QR-Code */ - height: 130px; - display: block; -} - -/* Fix für Screenshot 1: Modal-Info Zeile */ -#modal-info-text { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 15px; -} - -/* --- Lösch-Animation nach Links --- */ -.cart-item-row.slide-out-left { - animation: slideOutLeft 0.4s ease forwards; - pointer-events: none; /* Verhindert Klicks während der Animation */ -} - -@keyframes slideOutLeft { - 0% { - transform: translateX(0); - opacity: 1; - } - 100% { - transform: translateX(-100%); /* Vollständig nach links raus */ - opacity: 0; - /* Verhindert, dass die Lücke abrupt kollabiert */ - height: 0; - padding-top: 0; - padding-bottom: 0; - margin-top: 0; - margin-bottom: 0; - border: none; - } -} -.summary-box-black { - background-color: #1c1c1e !important; - padding: 35px; - border-radius: 28px; - border: 1px solid rgba(255, 255, 255, 0.1); - position: sticky; - top: 120px; -} - -.summary-row-large { - display: flex; - justify-content: space-between; - font-size: 1.6rem; - font-weight: 600; - margin-top: 25px; -} - -.blue-button { - width: 100%; - background: var(--accent-blue); - color: white; - border: none; - padding: 18px; - border-radius: 14px; - font-weight: bold; - font-size: 1.1rem; - margin-top: 30px; - cursor: pointer; - transition: all 0.3s ease; -} - -.blue-button:hover { - background: #0077ed; - transform: scale(1.02); -} - -.summary-content { - width: 100%; - max-width: 350px; - text-align: right; -} - -.total-row { - font-size: 1.5rem; - font-weight: bold; - display: flex; - justify-content: space-between; - margin-bottom: 5px; -} - -.vat-row { - color: #86868b; - font-size: 0.9rem; - margin-bottom: 20px; -} - -.checkout-main-btn { - width: 100%; - padding: 16px; - background: #e50914; - color: white; - border: none; - border-radius: 8px; - font-weight: bold; - font-size: 1.1rem; - cursor: pointer; - transition: transform 0.2s, background 0.2s; -} - -.checkout-main-btn:hover { - background: #f40a16; - transform: translateY(-2px); -} - -#modal-info-text { - display: block; /* Verhindert das Nebeneinanderquetschen */ - margin-top: 5px; - color: #ccc; -} - -.modal-header-container { - padding-bottom: 15px; - border-bottom: 1px solid #333; - margin-bottom: 20px; -} - -#snacks-view, #movie-list-view, #cart-view { - padding-bottom: 100px; /* Platz unten lassen */ - min-height: 100vh; - overflow-y: auto; /* Sicherstellen, dass gescrollt werden kann */ -} - -/* --- Account View (stabil & sichtbar) --- */ -#account-view { - padding: 130px 8% 60px; - min-height: 100vh; -} - -.account-login-box, -.account-panel { - width: min(820px, 100%); - margin: 0 auto; - background: #1c1c1e; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 24px; - padding: 28px; -} - -.account-login-box { - display: flex; - flex-direction: column; - align-items: stretch; -} - -.account-login-box h2, -.account-panel h2 { - margin-bottom: 16px; -} - -.account-login-box input { - width: 100%; - margin-bottom: 12px; - padding: 12px 14px; - background: #111214; - border: 1px solid #3a3a3a; - border-radius: 10px; - color: #fff; -} - -.account-login-box button { - width: 100%; - margin-top: 10px; - padding: 12px 14px; - border: 0; - border-radius: 10px; - background: #0071e3; - color: #fff; - cursor: pointer; -} - -#btn-forgot-password { - width: auto !important; - align-self: flex-start; - margin-top: 2px; - margin-bottom: 12px; - padding: 0; - background: transparent !important; - border: none !important; - color: #95bce9; - font-size: 0.82rem; - text-decoration: underline; -} - -#btn-open-register { - width: auto !important; - align-self: flex-start; - margin-top: 6px; - padding: 8px 14px !important; - font-size: 0.82rem; - background: #2a2d31 !important; - border: 1px solid #4d4f54 !important; -} - -#account-register-hint { - margin-top: 18px; - margin-bottom: 2px; - font-size: 0.82rem; - color: #9ca0a8; - align-self: flex-start; -} - -/* --- Auth Modals (Register + Forgot) --- */ -.account-auth-modal { - width: min(460px, 92vw); - max-width: 460px; - padding: 30px 24px 22px; - border-radius: 22px; - background: linear-gradient(180deg, #1f2125 0%, #181a1e 100%); - border: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); -} - -.account-auth-modal h2 { - font-size: 1.45rem; - margin-bottom: 8px; -} - -.auth-modal-subtitle { - color: #9da3ad; - font-size: 0.9rem; - margin-bottom: 16px; - line-height: 1.4; -} - -.account-auth-modal input { - width: 100%; - margin-bottom: 11px; - padding: 12px 13px; - border-radius: 10px; - border: 1px solid #3a3f46; - background: #111317; - color: #f5f5f7; - outline: none; - transition: border-color 0.2s ease, box-shadow 0.2s ease; -} - -.account-auth-modal input:focus { - border-color: #0071e3; - box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18); -} - -.auth-submit-btn { - width: 100%; - margin-top: 6px; - padding: 12px 14px; - border: 0; - border-radius: 11px; - background: #0071e3; - color: #fff; - font-weight: 600; - cursor: pointer; - transition: background 0.2s ease, transform 0.15s ease; -} - -.auth-submit-btn:hover { - background: #0a7cf0; - transform: translateY(-1px); -} - -#reset-message { - margin-top: 12px; - padding: 10px 12px; - border-radius: 10px; - background: rgba(17, 101, 42, 0.22); - border: 1px solid rgba(74, 199, 123, 0.32); - color: #84e5aa; - font-size: 0.88rem; -} - -.account-panel-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 16px; -} - -.account-logout-btn { - border: 1px solid #4a4a4a; - background: transparent; - color: #fff; - border-radius: 10px; - padding: 8px 12px; - cursor: pointer; -} - -.account-tabs { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin: 20px 0 16px; -} - -.account-tab-btn { - border: 1px solid #3f3f3f; - background: #151618; - color: #fff; - border-radius: 999px; - padding: 8px 14px; - cursor: pointer; -} - -#account-tab-content { - margin-top: 8px; -} - -.account-card, -.order-box { - background: #111214; - border: 1px solid #2f2f2f; - border-radius: 12px; - padding: 14px 16px; - margin-bottom: 10px; -} - -/* --- Cart Columns (final override) --- */ -#cart-items-list .cart-header-row, -#cart-items-list .cart-item-row { - display: grid; - grid-template-columns: 120px 90px 1.2fr 1.5fr 130px 70px; - gap: 12px; - align-items: center; -} - -#cart-items-list .cart-header-row { - padding: 12px 8px; - margin-bottom: 6px; - border-bottom: 1px solid rgba(255, 255, 255, 0.15); - color: #9ca0a8; - font-size: 0.74rem; - font-weight: 700; - letter-spacing: 1px; -} - -#cart-items-list .cart-item-row { - padding: 16px 8px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -#cart-items-list .col-amount { - display: flex; - justify-content: center; -} - -#cart-items-list .col-img { - display: flex; - justify-content: center; -} - -#cart-items-list .col-product { - font-weight: 600; -} - -#cart-items-list .col-details { - color: #8fbef6; - font-size: 0.9rem; - line-height: 1.35; -} - -#cart-items-list .col-price { - font-weight: 700; - text-align: right; - padding-right: 18px; -} - -#cart-items-list .cart-header-row .col-price { - text-align: left; - padding-left: 8px; - padding-right: 0; -} - -#cart-items-list .col-action { - display: flex; - justify-content: flex-end; - text-align: right; - padding-right: 0; -} - -#cart-items-list .btn-delete-item { - display: inline-flex; - align-items: center; - justify-content: center; - width: 34px; - height: 34px; - border-radius: 8px; - border: 1px solid #7a3a45; - background: #2b1116; - color: #ff7a90; - font-size: 1.05rem; - opacity: 1; - transform: translateX(6px); -} - -#cart-items-list .btn-delete-item:hover { - background: #3a161d; - color: #ff95a7; - border-color: #97505d; - transform: translateX(6px) scale(1.06); -} - -#cart-items-list .btn-delete-item:active { - transform: translateX(6px) scale(0.96); -} - -.cart-img-fallback { - width: 60px; - height: 85px; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.7rem; - text-align: center; - background: #2b2d31; - color: #aeb3bb; - padding: 6px; -} - -@media (max-width: 980px) { - .cart-container { - flex-direction: column; - gap: 24px; - } - - .cart-right { - width: 100%; - min-width: 0; - } - - #cart-items-list .cart-header-row { - display: none; - } - - #cart-items-list .cart-item-row { - grid-template-columns: 1fr; - gap: 10px; - padding: 14px 0; - } - - #cart-items-list .col-amount, - #cart-items-list .col-img, - #cart-items-list .col-action { - justify-content: flex-start; - text-align: left; - } - - #cart-items-list .col-price { - text-align: left; - } -} - -/* --- Seat Map Refresh (Cinema-Like Layout) --- */ -.seat-map-container { - perspective: 900px; -} - -#seat-grid.seat-grid-custom { - display: flex; - flex-direction: column; - gap: 9px; - align-items: center; - min-width: max-content; - padding: 16px 8px 6px; - transform: rotateX(4deg); - transform-origin: top center; -} - -#seat-grid .seat-row.cinema-row { - display: grid; - grid-template-columns: 28px auto 40px auto 28px; - align-items: center; - gap: 9px; - width: max-content; - margin-left: var(--row-indent, 0); - margin-right: var(--row-indent, 0); -} - -#seat-grid .row-seat-block { - display: flex; - gap: 7px; -} - -#seat-grid .row-label { - font-size: 0.72rem; - letter-spacing: 1px; - color: #8f949c; - font-weight: 700; - text-align: center; -} - -#seat-grid .row-label-right { - opacity: 0.65; -} - -#seat-grid .aisle-gap { - width: 40px; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); -} - -#seat-grid .seat { - width: 24px; - height: 20px; - border-radius: 8px 8px 5px 5px; - border: 1px solid rgba(255, 255, 255, 0.18); - position: relative; - appearance: none; - padding: 0; - cursor: pointer; - transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -} - -#seat-grid .seat::before { - content: ""; - position: absolute; - left: 2px; - right: 2px; - top: -4px; - height: 5px; - border-radius: 5px 5px 0 0; - background: inherit; - opacity: 0.92; -} - -#seat-grid .seat:hover:not(.occupied) { - transform: translateY(-2px) scale(1.08); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); -} - -#seat-grid .seat.normal, -#seat-grid .seat.imax { - background: linear-gradient(180deg, #45484f 0%, #2f3238 100%); -} - -#seat-grid .seat.vip { - background: linear-gradient(180deg, #ffb74d 0%, #ff8f00 100%); -} - -#seat-grid .seat.dbox { - background: linear-gradient(180deg, #ffeb3b 0%, #f9a825 100%); -} - -#seat-grid .seat.selected { - background: linear-gradient(180deg, #56f189 0%, #28a745 100%) !important; - box-shadow: 0 0 14px rgba(69, 233, 120, 0.72); - border-color: #d6ffe4; -} - -#seat-grid .seat.occupied { - background: linear-gradient(180deg, #ef5350 0%, #c62828 100%) !important; - opacity: 1; - cursor: not-allowed; -} - -#seat-grid .seat:disabled { - opacity: 1; -} - -#seat-grid .seat.occupied::after { - content: "×"; - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - color: #fff; - font-size: 14px; - font-weight: 700; -} - -#dynamic-legend { - margin-top: 14px; -} - -#summary-items .summary-row { - display: flex; - justify-content: space-between; - gap: 14px; - padding: 7px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - font-size: 0.9rem; -} - -/* --- April 2026 Refresh --- */ -.hero-overlay { - max-width: 860px; - border-radius: 24px; - background: linear-gradient(90deg, rgba(6, 9, 14, 0.7), rgba(6, 9, 14, 0.25)); - backdrop-filter: blur(2px); -} - -.running-poster { - display: flex; - flex-direction: column; -} - -.running-poster img { - height: 240px; - object-position: center 18%; -} - -.running-meta { - display: flex; - flex-direction: column; - min-height: 150px; -} - -.running-meta p { - margin-bottom: 14px; -} - -.open-program-btn { - margin-top: auto; -} - -/* --- Latest home/account refinement --- */ -.hero { - min-height: 94vh; -} - -.hero::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(180deg, rgba(3, 5, 8, 0.05) 0%, rgba(3, 5, 8, 0.62) 80%, rgba(3, 5, 8, 0.88) 100%); - pointer-events: none; - z-index: 1; -} - -.hero-overlay { - z-index: 2; - max-width: 980px; - padding: 180px 8% 118px; - background: transparent; - backdrop-filter: none; - border-radius: 0; - text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); -} - -.hero-slide { - background-size: contain; - background-repeat: no-repeat; - background-position: center center; - background-color: #06080d; - transform: none; -} - -.hero-slide.active { - transform: none; -} - -.home-experience { - margin-top: 34px; - display: grid; - grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); - gap: 16px; -} - -.experience-main-card, -.experience-side-card { - background: linear-gradient(158deg, #151820 0%, #0f1219 100%); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 18px; - padding: 20px 20px 22px; -} - -.experience-main-head { - display: flex; - justify-content: space-between; - align-items: baseline; - gap: 12px; - margin-bottom: 10px; -} - -.experience-main-head h3 { - font-size: 1.25rem; -} - -.experience-main-head span { - color: #9aa4b2; - font-size: 0.78rem; -} - -.experience-main-card p, -.experience-side-card p { - color: #b4becb; - line-height: 1.5; - font-size: 0.92rem; -} - -.experience-tags, -.experience-chip-row { - margin-top: 14px; - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.experience-tags span, -.experience-chip-row span { - border-radius: 999px; - border: 1px solid rgba(0, 113, 227, 0.45); - background: rgba(0, 113, 227, 0.16); - color: #c4dffe; - padding: 4px 11px; - font-size: 0.76rem; -} - -.experience-side-stack { - display: grid; - gap: 16px; -} - -.collector-card .collector-placeholder-grid { - margin-top: 12px; - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.collector-card .collector-slot { - min-height: 100px; -} - -.account-orders-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 10px; - margin-top: 8px; -} - -.order-item-btn { - width: 100%; - text-align: left; - cursor: pointer; - transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; -} - -.order-item-btn:hover { - border-color: rgba(0, 113, 227, 0.58); - transform: translateY(-2px); -} - -.order-item-btn.active { - border-color: #0071e3; - background: linear-gradient(150deg, #162334 0%, #111720 100%); -} - -.order-item-head { - display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - margin-bottom: 8px; -} - -.order-item-head h4 { - font-size: 0.98rem; -} - -.order-item-head span { - color: #9ed0ff; - font-weight: 700; - font-size: 0.86rem; -} - -.order-ticket-details { - margin-top: 14px; -} - -.order-ticket-card { - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 16px; - background: linear-gradient(155deg, #12161f 0%, #0c1017 100%); - padding: 14px; - display: grid; - grid-template-columns: 120px minmax(0, 1fr); - gap: 14px; -} - -.order-ticket-poster img { - width: 100%; - height: 100%; - max-height: 180px; - object-fit: cover; - border-radius: 10px; -} - -.order-ticket-poster-fallback { - height: 100%; - min-height: 150px; - border-radius: 10px; - background: #202632; - color: #9aa4b2; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.8rem; -} - -.order-ticket-brand { - color: #9ec3ee; - font-size: 0.73rem; - letter-spacing: 0.8px; - margin-bottom: 6px; -} - -.order-ticket-content h4 { - margin-bottom: 10px; -} - -.order-ticket-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px 14px; -} - -.order-ticket-grid p { - display: flex; - flex-direction: column; - gap: 3px; - margin: 0; -} - -.order-ticket-grid span { - font-size: 0.74rem; - color: #8c98a9; -} - -.order-ticket-grid strong { - font-size: 0.9rem; -} - -.payment-logo-slot img { - max-width: 72%; - max-height: 30px; - object-fit: contain; - filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); -} - -@media (max-width: 1000px) { - .home-experience { - grid-template-columns: 1fr; - } -} - -@media (max-width: 720px) { - .hero-overlay { - padding: 145px 6% 92px; - } - - .order-ticket-card { - grid-template-columns: 1fr; - } - - .order-ticket-grid { - grid-template-columns: 1fr; - } - - .collector-card .collector-placeholder-grid { - grid-template-columns: 1fr; - } -} - -.home-feature-grid { - margin-top: 34px; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 14px; -} - -.feature-card { - background: linear-gradient(155deg, #17191f 0%, #101218 100%); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - padding: 16px 16px 18px; -} - -.feature-card h4 { - margin-bottom: 8px; - font-size: 0.95rem; -} - -.feature-card p { - color: #a7afbb; - font-size: 0.86rem; - line-height: 1.45; -} - -.feature-card-wide { - grid-column: span 2; -} - -.hall-tags { - margin-top: 12px; - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.hall-tags span { - border: 1px solid rgba(0, 113, 227, 0.5); - background: rgba(0, 113, 227, 0.18); - color: #c6e1ff; - border-radius: 999px; - padding: 4px 10px; - font-size: 0.75rem; -} - -.feature-highlight { - margin-top: 12px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 10px; - color: #d8dee8; - padding: 8px 10px; - font-size: 0.8rem; -} - -.feature-card-collector { - grid-column: span 2; -} - -.collector-placeholder-grid { - margin-top: 12px; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; -} - -.collector-slot { - min-height: 90px; - border-radius: 12px; - border: 1px dashed rgba(255, 255, 255, 0.25); - background: linear-gradient(140deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); - color: #9ca6b3; - font-size: 0.78rem; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - padding: 6px; -} - -#cart-items-list .qty-static { - min-width: 68px; - text-align: center; - padding: 7px 10px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.2); - background: rgba(255, 255, 255, 0.05); - color: #d8dce3; - font-weight: 600; -} - -.account-payments-note { - color: #9aa1ad; - font-size: 0.9rem; - margin-bottom: 12px; -} - -.account-payment-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); - gap: 10px; -} - -.account-payment-card { - background: #141518; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; - padding: 12px; -} - -.account-payment-card h4 { - font-size: 0.9rem; - margin-bottom: 4px; -} - -.account-payment-card p { - color: #9aa1ad; - font-size: 0.8rem; -} - -.payment-logo-slot { - height: 52px; - border-radius: 10px; - border: 1px dashed rgba(255, 255, 255, 0.28); - margin-bottom: 10px; - display: flex; - align-items: center; - justify-content: center; - color: #9aa1ad; - font-size: 0.8rem; -} - -@media (max-width: 900px) { - .feature-card-wide, - .feature-card-collector { - grid-column: span 1; - } - - .collector-placeholder-grid { - grid-template-columns: 1fr; - } -} -/* ========================================================= - Cinecity-Inspired Home + Program Refresh - ========================================================= */ - -.hero { - position: relative; - min-height: 92vh; - height: auto; - display: block; - overflow: hidden; - isolation: isolate; -} - -.hero-slider { - position: absolute; - inset: 0; -} - -.hero-slide { - position: absolute; - inset: 0; - background-size: cover; - background-position: center; - opacity: 0; - transform: scale(1.03); - transition: opacity 0.8s ease, transform 1.4s ease; -} - -.hero-slide.active { - opacity: 1; - transform: scale(1); -} - -.hero-overlay { - position: relative; - z-index: 2; - max-width: 760px; - margin: 0 auto; - padding: 190px 10% 130px; - text-align: left; -} - -.hero-overlay h1 { - font-size: clamp(2.2rem, 5vw, 4.7rem); - letter-spacing: 0.4px; - margin: 12px 0; -} - -.hero-overlay p { - color: #d1d4da; - font-size: 1.05rem; - max-width: 620px; - margin-bottom: 22px; -} - -.hero-dots { - margin-top: 22px; - display: flex; - gap: 10px; - align-items: center; -} - -.hero-dot { - width: 30px; - height: 6px; - border-radius: 99px; - border: 0; - background: rgba(255, 255, 255, 0.3); - cursor: pointer; -} - -.hero-dot.active { - background: #0071e3; -} - -.cinema-home { - background: - radial-gradient(circle at 20% -10%, rgba(0, 113, 227, 0.15), transparent 45%), - radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08), transparent 38%), - #07080b; - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.home-poster-band { - margin-top: 18px; - padding: 18px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 18px; -} - -.home-band-header { - display: flex; - justify-content: space-between; - align-items: baseline; - margin-bottom: 14px; -} - -.home-band-header h3 { - font-size: 1.2rem; -} - -.home-band-header span { - color: #8f95a0; - font-size: 0.85rem; -} - -.now-running-row { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 14px; -} - -.running-poster { - background: #121317; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 14px; - overflow: hidden; -} - -.running-poster img { - width: 100%; - height: 210px; - object-fit: cover; - display: block; -} - -.running-meta { - padding: 12px; -} - -.running-meta h4 { - font-size: 0.95rem; - margin-bottom: 4px; -} - -.running-meta p { - color: #94a0af; - font-size: 0.78rem; - margin-bottom: 10px; -} - -.open-program-btn { - width: 100%; - border: 1px solid rgba(255, 255, 255, 0.25); - background: transparent; - color: #e7ebf0; - border-radius: 8px; - font-size: 0.78rem; - padding: 7px 10px; - cursor: pointer; -} - -.open-program-btn:hover { - background: rgba(255, 255, 255, 0.08); -} - -.home-program-head { - margin-top: 36px; -} - -.home-program-grid { - margin-top: 10px; -} - -.home-movie-card { - box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3); -} - -.home-info-grid { - margin-top: 34px; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 14px; -} - -.info-card { - background: linear-gradient(155deg, #17191f 0%, #101218 100%); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - padding: 16px 16px 18px; -} - -.info-card h4 { - margin-bottom: 8px; - font-size: 0.95rem; -} - -.info-card p { - color: #a7afbb; - font-size: 0.86rem; - line-height: 1.45; -} - -.movie-list-shell { - padding: 120px 8% 60px; -} - -.list-subtitle { - margin-top: 8px; - color: #9aa1ac; - margin-bottom: 22px; -} - -.movie-program-list { - display: flex; - flex-direction: column; - gap: 28px; -} - -.program-card { - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 22px 40px rgba(0, 0, 0, 0.33); -} - -.program-card .card-header { - margin-bottom: 12px; -} - -.program-card .description { - color: #c2c8d1; - margin-bottom: 16px; - line-height: 1.55; -} - -.program-day-tabs { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 14px; -} - -.program-day-tab { - min-width: 78px; - border: 1px solid rgba(255, 255, 255, 0.16); - background: rgba(255, 255, 255, 0.03); - color: #f2f5f9; - border-radius: 12px; - padding: 7px 10px; - cursor: pointer; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 3px; -} - -.program-day-tab small { - font-size: 0.72rem; - color: #94a0ad; -} - -.program-day-tab.active { - border-color: #0071e3; - background: rgba(0, 113, 227, 0.2); -} - -.program-schedule-shell { - margin-top: 0; -} - -.program-schedule-body { - display: flex; - flex-direction: column; - gap: 8px; -} - -.program-time-row { - width: 100%; - text-align: left; - padding: 12px 14px; - display: grid; - grid-template-columns: 1fr 130px 90px; - align-items: center; - gap: 10px; - border: 1px solid rgba(255, 255, 255, 0.09); - background: rgba(0, 0, 0, 0.2); -} - -.program-time-row:hover { - border-color: #0071e3; - transform: translateX(3px); -} - -.hall-pill { - justify-self: center; - font-size: 0.78rem; - color: #bcd6f6; - border: 1px solid rgba(0, 113, 227, 0.4); - background: rgba(0, 113, 227, 0.15); - border-radius: 999px; - padding: 4px 10px; -} - -.flash-focus { - animation: cardFlash 1.1s ease; -} - -@keyframes cardFlash { - 0% { - box-shadow: 0 0 0 rgba(0, 113, 227, 0); - transform: translateY(0); - } - 40% { - box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.35); - transform: translateY(-2px); - } - 100% { - box-shadow: 0 0 0 rgba(0, 113, 227, 0); - transform: translateY(0); - } -} - -.reveal-on-scroll { - opacity: 0; - transform: translateY(28px); - transition: opacity 0.7s ease, transform 0.7s ease; -} - -.reveal-on-scroll.is-visible { - opacity: 1; - transform: translateY(0); -} - -@media (max-width: 900px) { - .hero-overlay { - padding: 150px 8% 90px; - } - - .program-time-row { - grid-template-columns: 1fr; - align-items: flex-start; - } - - .hall-pill { - justify-self: flex-start; - } - - .movie-list-shell { - padding-left: 5%; - padding-right: 5%; - } -} - -/* --- Final visual overrides --- */ -.hero-overlay { - max-width: 860px; - border-radius: 24px; - background: linear-gradient(90deg, rgba(6, 9, 14, 0.7), rgba(6, 9, 14, 0.25)); - backdrop-filter: blur(2px); -} - -.running-poster { - display: flex; - flex-direction: column; -} - -.running-poster img { - height: 240px; - object-position: center 18%; -} - -.running-meta { - display: flex; - flex-direction: column; - min-height: 150px; -} - -.running-meta p { - margin-bottom: 14px; -} - -.open-program-btn { - margin-top: auto; -} - -/* --- 2026-04 final overrides (keep at file end) --- */ -.hero { - min-height: 94vh; -} - -.hero::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(180deg, rgba(3, 5, 8, 0.05) 0%, rgba(3, 5, 8, 0.62) 80%, rgba(3, 5, 8, 0.88) 100%); - pointer-events: none; - z-index: 1; -} - -.hero-overlay { - z-index: 2; - max-width: 980px; - padding: 180px 8% 118px; - background: transparent; - backdrop-filter: none; - border-radius: 0; - text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); -} - -.home-experience { - margin-top: 34px; - display: grid; - grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); - gap: 16px; -} - -.experience-main-card, -.experience-side-card { - background: linear-gradient(158deg, #151820 0%, #0f1219 100%); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 18px; - padding: 20px 20px 22px; -} - -.experience-main-head { - display: flex; - justify-content: space-between; - align-items: baseline; - gap: 12px; - margin-bottom: 10px; -} - -.experience-main-head h3 { - font-size: 1.25rem; -} - -.experience-main-head span { - color: #9aa4b2; - font-size: 0.78rem; -} - -.experience-main-card p, -.experience-side-card p { - color: #b4becb; - line-height: 1.5; - font-size: 0.92rem; -} - -.experience-tags, -.experience-chip-row { - margin-top: 14px; - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.experience-tags span, -.experience-chip-row span { - border-radius: 999px; - border: 1px solid rgba(0, 113, 227, 0.45); - background: rgba(0, 113, 227, 0.16); - color: #c4dffe; - padding: 4px 11px; - font-size: 0.76rem; -} - -.experience-side-stack { - display: grid; - gap: 16px; -} - -.collector-card .collector-placeholder-grid { - margin-top: 12px; - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.collector-card .collector-slot { - min-height: 100px; -} - -.account-orders-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 10px; - margin-top: 8px; -} - -.order-item-btn { - width: 100%; - text-align: left; - cursor: pointer; - transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; -} - -.order-item-btn:hover { - border-color: rgba(0, 113, 227, 0.58); - transform: translateY(-2px); -} - -.order-item-btn.active { - border-color: #0071e3; - background: linear-gradient(150deg, #162334 0%, #111720 100%); -} - -.order-item-head { - display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - margin-bottom: 8px; -} - -.order-item-head h4 { - font-size: 0.98rem; -} - -.order-item-head span { - color: #9ed0ff; - font-weight: 700; - font-size: 0.86rem; -} - -.order-ticket-details { - margin-top: 14px; -} - -.order-ticket-card { - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 16px; - background: linear-gradient(155deg, #12161f 0%, #0c1017 100%); - padding: 14px; - display: grid; - grid-template-columns: 120px minmax(0, 1fr); - gap: 14px; -} - -.order-ticket-poster img { - width: 100%; - height: 100%; - max-height: 180px; - object-fit: cover; - border-radius: 10px; -} - -.order-ticket-poster-fallback { - height: 100%; - min-height: 150px; - border-radius: 10px; - background: #202632; - color: #9aa4b2; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.8rem; -} - -.order-ticket-brand { - color: #9ec3ee; - font-size: 0.73rem; - letter-spacing: 0.8px; - margin-bottom: 6px; -} - -.order-ticket-content h4 { - margin-bottom: 10px; -} - -.order-ticket-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px 14px; -} - -.order-ticket-grid p { - display: flex; - flex-direction: column; - gap: 3px; - margin: 0; -} - -.order-ticket-grid span { - font-size: 0.74rem; - color: #8c98a9; -} - -.order-ticket-grid strong { - font-size: 0.9rem; -} - -.payment-logo-slot img { - max-width: 72%; - max-height: 30px; - object-fit: contain; - filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); -} - -@media (max-width: 1000px) { - .home-experience { - grid-template-columns: 1fr; - } -} - -@media (max-width: 720px) { - .hero-overlay { - padding: 145px 6% 92px; - } - - .order-ticket-card { - grid-template-columns: 1fr; - } - - .order-ticket-grid { - grid-template-columns: 1fr; - } - - .collector-card .collector-placeholder-grid { - grid-template-columns: 1fr; - } -} - -/* hero slide clarity final */ -.hero-slide { - background-size: contain; - background-repeat: no-repeat; - background-position: center center; - background-color: #06080d; - transform: none; -} - -.hero-slide.active { - transform: none; -} - -/* --- 2026-04-21 final UX overrides --- */ -.hero-overlay { - padding: 230px 8% 74px; -} - -.hero-slide { - background-size: cover; - background-repeat: no-repeat; - background-position: center 34%; - transform: scale(1.09); -} - -.hero-slide.active { - transform: scale(1.02); -} - -.home-inline-showcase { - margin-top: 36px; - display: flex; - flex-direction: column; - gap: 28px; -} - -.inline-section { - display: grid; - grid-template-columns: 1.15fr 1fr; - border-radius: 26px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.11); - background: #0d1118; - min-height: 290px; - box-shadow: 0 26px 50px rgba(0, 0, 0, 0.34); -} - -.inline-media { - position: relative; - background-size: cover; - background-position: center; -} - -.inline-media::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(110deg, rgba(4, 6, 10, 0.08), rgba(4, 6, 10, 0.58)); -} - -.inline-halls .inline-media { - background-image: linear-gradient(120deg, rgba(0, 113, 227, 0.3), rgba(7, 10, 16, 0.55)), url('img/shelter.jpg'); -} - -.inline-dbox .inline-media { - background-image: linear-gradient(120deg, rgba(255, 176, 0, 0.2), rgba(8, 12, 18, 0.62)), url('img/dbox.jpg'); -} - -.inline-collectors .inline-media { - background-image: linear-gradient(120deg, rgba(185, 124, 255, 0.15), rgba(8, 12, 18, 0.62)), url('img/popcorn.jpg'); -} - -.inline-content { - padding: 28px 26px; - display: flex; - flex-direction: column; - justify-content: center; -} - -.inline-content h3 { - font-size: clamp(1.3rem, 2.3vw, 1.9rem); - margin-bottom: 12px; -} - -.inline-content p { - color: #b4bfcc; - line-height: 1.58; - margin-bottom: 16px; -} - -.inline-tags { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 16px; -} - -.inline-tags span { - border-radius: 999px; - border: 1px solid rgba(0, 113, 227, 0.5); - background: rgba(0, 113, 227, 0.16); - color: #cae3ff; - padding: 5px 11px; - font-size: 0.76rem; -} - -.story-more-btn { - align-self: flex-start; - border: 1px solid rgba(255, 255, 255, 0.24); - background: rgba(255, 255, 255, 0.04); - color: #e8edf3; - border-radius: 999px; - padding: 10px 16px; - font-size: 0.82rem; - cursor: pointer; - transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; -} - -.story-more-btn:hover { - transform: translateY(-2px) scale(1.03); - background: rgba(0, 113, 227, 0.16); - border-color: rgba(0, 113, 227, 0.72); - box-shadow: 0 10px 24px rgba(0, 113, 227, 0.22); -} - -.dbox-now-highlight { - border: 1px solid rgba(255, 181, 59, 0.5); - background: linear-gradient(160deg, rgba(255, 164, 27, 0.2), rgba(255, 213, 128, 0.08)); - border-radius: 14px; - padding: 12px; - margin-bottom: 16px; -} - -.dbox-now-highlight h4 { - font-size: 0.88rem; - margin-bottom: 8px; - color: #ffe2b5; -} - -.dbox-mini-cards { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px; -} - -.dbox-mini-cards div { - border-radius: 10px; - border: 1px solid rgba(255, 228, 168, 0.35); - background: rgba(23, 16, 8, 0.42); - padding: 7px 10px; - font-size: 0.78rem; - color: #f7dfb6; - text-align: center; -} - -.home-modal-overlay { - position: fixed; - inset: 0; - background: rgba(2, 5, 10, 0.74); - backdrop-filter: blur(8px); - z-index: 2500; - display: flex; - align-items: center; - justify-content: center; - padding: 24px; -} - -.home-modal-panel { - width: min(980px, 100%); - max-height: 90vh; - overflow-y: auto; - border-radius: 22px; - border: 1px solid rgba(255, 255, 255, 0.14); - background: linear-gradient(165deg, #171b24 0%, #10141c 100%); - padding: 22px; - position: relative; -} - -.home-modal-wide { - width: min(1120px, 100%); -} - -.home-modal-close { - position: absolute; - top: 14px; - right: 14px; - width: 34px; - height: 34px; - border-radius: 50%; - border: 0; - background: #2a2f3a; - color: #fff; - font-size: 1.2rem; - cursor: pointer; -} - -.home-modal-sub { - color: #96a1b2; - margin-top: 4px; - margin-bottom: 14px; -} - -.hall-modal-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} - -.hall-modal-item { - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 14px; - padding: 12px; - background: rgba(255, 255, 255, 0.02); -} - -.hall-modal-item h4 { - margin-bottom: 10px; -} - -.hall-modal-item textarea, -.hall-modal-item input, -.dbox-modal-section input, -.collector-entry-content input { - width: 100%; - border-radius: 10px; - border: 1px solid #3e4658; - background: #111621; - color: #f3f6fb; - padding: 10px 11px; -} - -.hall-modal-item textarea { - min-height: 100px; - resize: vertical; - margin-bottom: 8px; -} - -.dbox-modal-section { - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 14px; - padding: 14px; - margin-top: 12px; -} - -.dbox-image-grid { - margin-top: 12px; - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; -} - -.dbox-image-slot { - min-height: 98px; - border: 1px dashed rgba(255, 255, 255, 0.3); - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - color: #9aa8ba; - font-size: 0.78rem; -} - -.modal-highlight { - margin-top: 14px; -} - -.collector-zigzag { - margin-top: 14px; - display: flex; - flex-direction: column; - gap: 14px; -} - -.collector-entry { - width: 82%; - display: grid; - grid-template-columns: 90px 1fr; - gap: 10px; - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.03); - padding: 12px; -} - -.collector-entry.left { - align-self: flex-start; -} - -.collector-entry.right { - align-self: flex-end; -} - -.collector-film-logo { - border-radius: 10px; - border: 1px dashed rgba(255, 255, 255, 0.35); - min-height: 72px; - display: flex; - align-items: center; - justify-content: center; - color: #9ba7b9; - font-size: 0.74rem; -} - -.collector-entry-content h4 { - margin-bottom: 6px; -} - -.collector-entry-content p { - color: #b3becc; - margin-bottom: 8px; - font-size: 0.9rem; -} - -.account-payment-card { - text-align: left; - cursor: pointer; -} - -.account-payment-card:hover { - border-color: rgba(0, 113, 227, 0.6); - transform: translateY(-2px); -} - -.payment-logo-slot { - border: 1px solid rgba(255, 255, 255, 0.16); - background: rgba(255, 255, 255, 0.04); -} - -.pay-modal-overlay { - position: fixed; - inset: 0; - z-index: 2600; - background: rgba(2, 4, 9, 0.72); - backdrop-filter: blur(8px); - display: flex; - align-items: center; - justify-content: center; - padding: 20px; -} - -.pay-modal-panel { - width: min(460px, 100%); - border-radius: 18px; - border: 1px solid rgba(255, 255, 255, 0.16); - background: #12151d; - padding: 18px; - position: relative; -} - -.pay-modal-head { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 12px; -} - -.pay-modal-head img { - height: 26px; - width: auto; -} - -.pay-close-btn { - position: absolute; - top: 11px; - right: 11px; - width: 32px; - height: 32px; - border-radius: 50%; - border: 0; - background: rgba(255, 255, 255, 0.08); - color: #fff; - cursor: pointer; - font-size: 1.1rem; -} - -.pay-form-grid label, -.pay-modal-panel label { - display: flex; - flex-direction: column; - gap: 6px; - font-size: 0.84rem; - color: #b2bece; - margin-top: 8px; -} - -.pay-form-grid input, -.pay-modal-panel input { - border-radius: 10px; - border: 1px solid #3b4255; - background: #10141f; - color: #f2f6fd; - padding: 10px; -} - -.pay-form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; -} - -.pay-submit-btn { - width: 100%; - margin-top: 14px; - border: 0; - border-radius: 11px; - padding: 11px 12px; - font-weight: 600; - cursor: pointer; - background: #0071e3; - color: #fff; -} - -.paypal-btn { - background: linear-gradient(90deg, #005ea6, #0b84e3); -} - -.apple-btn { - background: linear-gradient(90deg, #e9edf5, #cfd7e5); - color: #0c1016; -} - -.google-btn { - background: linear-gradient(90deg, #1967d2, #34a853); -} - -.pay-modal-paypal-style { - background: linear-gradient(160deg, #112544 0%, #0f1e34 100%); -} - -.pay-modal-apple-style { - background: linear-gradient(160deg, #1d212b 0%, #131722 100%); -} - -.pay-modal-google-style { - background: linear-gradient(160deg, #122033 0%, #141925 100%); -} - -@media (max-width: 980px) { - .inline-section { - grid-template-columns: 1fr; - } - - .inline-media { - min-height: 210px; - } - - .hall-modal-grid { - grid-template-columns: 1fr; - } - - .dbox-image-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .collector-entry { - width: 100%; - } -} - -/* --- 2026-04-21 nav/theme/info pages --- */ -#link-cart { - transform: translateY(2px); -} - -.theme-toggle-item { - display: flex; - align-items: center; -} - -.theme-toggle-btn { - width: 44px; - height: 44px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.24); - background: linear-gradient(140deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)); - color: #fff; - position: relative; - cursor: pointer; - transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; -} - -.theme-toggle-btn:hover { - transform: translateY(-1px) scale(1.03); - box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28); -} - -.theme-icon { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.05rem; - transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); -} - -.theme-icon-sun { - opacity: 0; - transform: rotate(-35deg) scale(0.5); -} - -.theme-icon-moon { - opacity: 1; - transform: rotate(0deg) scale(1); -} - -.theme-toggle-btn.is-light .theme-icon-sun { - opacity: 1; - transform: rotate(0deg) scale(1); -} - -.theme-toggle-btn.is-light .theme-icon-moon { - opacity: 0; - transform: rotate(35deg) scale(0.55); -} - -.info-view { - min-height: 100vh; - padding-top: 120px; - padding-bottom: 70px; -} - -.info-view-shell { - padding: 0 8%; -} - -.info-view-shell h1 { - font-size: clamp(2rem, 4vw, 3rem); -} - -.info-view-subtitle { - color: #98a3b3; - margin-top: 8px; - margin-bottom: 22px; -} - -.full-page-grid { - margin-top: 16px; -} - -.subpage-back-btn { - border: 1px solid rgba(255, 255, 255, 0.2); - background: rgba(255, 255, 255, 0.04); - color: #ebf1f9; - border-radius: 999px; - padding: 10px 14px; - margin-bottom: 18px; - cursor: pointer; - transition: transform 0.2s ease, border-color 0.2s ease; -} - -.subpage-back-btn:hover { - transform: translateX(-2px); - border-color: rgba(0, 113, 227, 0.65); -} - -.about-intro { - margin-top: 12px; - color: #b2bcc9; - line-height: 1.65; - max-width: 900px; -} - -.about-cards { - margin-top: 24px; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 14px; -} - -.about-card { - border: 1px solid rgba(255, 255, 255, 0.11); - border-radius: 16px; - background: linear-gradient(155deg, #151922 0%, #10141c 100%); - padding: 16px; -} - -.about-card h3 { - margin-bottom: 8px; -} - -.about-card p { - color: #aeb8c6; - margin-bottom: 14px; - line-height: 1.5; -} - -body.theme-dark .program-card .description, -body.theme-dark .inline-content p, -body.theme-dark .about-intro { - color: #d1d7e0; -} - -body.theme-dark #checkout-summary-list, -body.theme-dark .hall-modal-item, -body.theme-dark .dbox-modal-section { - color: #eaf1fc; -} - -body.theme-light { - background: #eef2f8; - color: #121620; -} - -body.theme-light .navbar { - background: rgba(244, 248, 255, 0.85); - border-bottom: 1px solid rgba(11, 22, 42, 0.08); -} - -body.theme-light .nav-links a, -body.theme-light .logo { - color: #1a2435; - opacity: 0.95; -} - -body.theme-light .hero::after { - background: linear-gradient(180deg, rgba(240, 246, 255, 0.04) 0%, rgba(240, 246, 255, 0.26) 100%); -} - -body.theme-light .hero-overlay h1, -body.theme-light .hero-overlay p { - color: #131a26; - text-shadow: none; -} - -body.theme-light .home-poster-band, -body.theme-light .inline-section, -body.theme-light .detailed-card, -body.theme-light .program-card, -body.theme-light .hall-modal-item, -body.theme-light .dbox-modal-section, -body.theme-light .about-card, -body.theme-light .account-panel, -body.theme-light .account-login-box, -body.theme-light .account-card, -body.theme-light .order-box, -body.theme-light .summary-box-black, -body.theme-light .cart-left, -body.theme-light .pay-modal-panel, -body.theme-light .home-modal-panel, -body.theme-light .snack-card, -body.theme-light .snack-card.highlight { - background: #ffffff !important; - color: #1a2435; - border-color: rgba(21, 35, 58, 0.14) !important; - box-shadow: 0 10px 30px rgba(21, 35, 58, 0.08); -} - -body.theme-light .inline-content p, -body.theme-light .program-card .description, -body.theme-light .list-subtitle, -body.theme-light .info-view-subtitle, -body.theme-light .about-intro, -body.theme-light .about-card p, -body.theme-light .account-payments-note, -body.theme-light .running-meta p { - color: #45556f !important; -} - -body.theme-light .running-poster, -body.theme-light .order-ticket-card, -body.theme-light .order-item-btn.active, -body.theme-light .dbox-now-highlight, -body.theme-light .modal-highlight, -body.theme-light .collector-entry { - background: #f7f9fd !important; - border-color: rgba(28, 56, 94, 0.16) !important; -} - -body.theme-light .story-more-btn, -body.theme-light .subpage-back-btn, -body.theme-light .open-program-btn, -body.theme-light .account-tab-btn, -body.theme-light .account-logout-btn, -body.theme-light .theme-toggle-btn { - color: #1c2b44; - background: #f3f7ff; - border-color: rgba(28, 56, 94, 0.22); -} - -body.theme-light .btn-primary, -body.theme-light .blue-button, -body.theme-light .auth-submit-btn, -body.theme-light .pay-submit-btn { - color: #fff; -} - -body.theme-light #checkout-summary-list, -body.theme-light .hall-modal-item textarea, -body.theme-light .hall-modal-item input, -body.theme-light .pay-modal-panel input, -body.theme-light .collector-entry-content input, -body.theme-light .account-login-box input, -body.theme-light .account-auth-modal input { - background: #f5f8ff !important; - color: #1a2435 !important; - border-color: rgba(33, 55, 91, 0.22) !important; -} - -body.theme-light .pay-modal-overlay, -body.theme-light .home-modal-overlay, -body.theme-light .modal, -body.theme-light .snack-overlay { - background: rgba(203, 216, 236, 0.7); -} - -body.theme-light .theme-toggle-btn { - background: linear-gradient(140deg, #fff9d5, #ffe9b0); -} - -@media (max-width: 1000px) { - .about-cards { - grid-template-columns: 1fr; - } -} - -/* --- 2026-04-28 light-mode polish + new about design --- */ -.about-hero-block { - margin-top: 8px; - border-radius: 24px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.12); - display: grid; - grid-template-columns: 1.2fr 1fr; - background: linear-gradient(130deg, #111722 0%, #0b111a 100%); - box-shadow: 0 24px 46px rgba(0, 0, 0, 0.3); -} - -.about-hero-content { - padding: 30px 28px; -} - -.about-hero-content h1 { - margin-bottom: 10px; -} - -.about-pill-row { - margin-top: 18px; - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.about-pill-row span { - border: 1px solid rgba(0, 113, 227, 0.45); - background: rgba(0, 113, 227, 0.15); - color: #c8e2ff; - border-radius: 999px; - padding: 6px 12px; - font-size: 0.76rem; -} - -.about-hero-media { - min-height: 300px; - background-image: - linear-gradient(150deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.58)), - url('img/derAustronaut.jpg'); - background-size: cover; - background-position: center; - position: relative; -} - -.about-hero-media::after { - content: ""; - position: absolute; - inset: 0; - background: - radial-gradient(circle at 25% 25%, rgba(0, 113, 227, 0.22), transparent 45%), - radial-gradient(circle at 70% 70%, rgba(255, 184, 92, 0.18), transparent 42%); -} - -.about-stats-grid { - margin-top: 18px; - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; -} - -.about-stats-grid article { - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.03); - padding: 12px; -} - -.about-stats-grid h3 { - color: #8ec8ff; - margin-bottom: 4px; -} - -.about-stats-grid p { - color: #aab7c8; - font-size: 0.84rem; -} - -.about-cards { - margin-top: 20px; - gap: 16px; -} - -.about-card { - position: relative; - overflow: hidden; - border-radius: 18px; - min-height: 230px; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding: 18px; - background-size: cover; - background-position: center; -} - -.about-card::before { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(175deg, rgba(7, 10, 15, 0.2), rgba(7, 10, 15, 0.82)); - z-index: 0; -} - -.about-card > * { - position: relative; - z-index: 1; -} - -.about-card-halls { - background-image: url('img/zoomania-2.jpg'); -} - -.about-card-dbox { - background-image: url('img/shelter.jpg'); -} - -.about-card-tech { - background-image: url('img/spidermannewday.jpg'); -} - -.about-card p { - color: #d7dfeb; -} - -/* Light mode readability improvements */ -body.theme-light .cinema-home { - background: - radial-gradient(circle at 12% -2%, rgba(0, 113, 227, 0.17), transparent 36%), - radial-gradient(circle at 88% 18%, rgba(123, 164, 218, 0.22), transparent 34%), - #edf2fb; -} - -body.theme-light .home-band-header h3, -body.theme-light .section-header h2, -body.theme-light .list-title, -body.theme-light .movie-info h3, -body.theme-light .duration, -body.theme-light .program-card h2, -body.theme-light .running-meta h4, -body.theme-light .snack-info h3, -body.theme-light #account-view h2, -body.theme-light #account-tab-content h3, -body.theme-light .order-item-head h4 { - color: #13233c !important; -} - -body.theme-light .home-band-header span, -body.theme-light .movie-info .genre, -body.theme-light .program-day-tab small, -body.theme-light .card-right .description, -body.theme-light .account-card p, -body.theme-light .order-box p, -body.theme-light .order-ticket-grid span, -body.theme-light .order-ticket-brand, -body.theme-light .summary-row, -body.theme-light .vat-row, -body.theme-light .snack-prompt-box p { - color: #4a5d79 !important; -} - -body.theme-light .program-day-tab { - border-color: rgba(22, 45, 74, 0.24); - background: #f4f8ff; - color: #13233c; -} - -body.theme-light .program-day-tab.active { - border-color: #0071e3; - background: rgba(0, 113, 227, 0.14); -} - -body.theme-light .program-time-row { - border-color: rgba(24, 52, 87, 0.2); - background: #f5f9ff; - color: #13233c; -} - -body.theme-light .program-time-row:hover { - background: #ebf3ff; -} - -body.theme-light .hall-pill { - color: #144274; - border-color: rgba(0, 113, 227, 0.32); - background: rgba(0, 113, 227, 0.11); -} - -body.theme-light .time-btn { - background: #0071e3; - color: #fff; -} - -body.theme-light .category-tabs { - background: rgba(255, 255, 255, 0.65); - border: 1px solid rgba(26, 51, 83, 0.12); - border-radius: 18px; - padding: 10px; -} - -body.theme-light .tab-btn { - background: #eef4ff; - color: #1b2f4d; - border-color: rgba(20, 45, 78, 0.2); -} - -body.theme-light .tab-btn.active { - background: #0071e3; - color: #fff; -} - -body.theme-light .option-group { - background: #edf3ff; -} - -body.theme-light .opt-btn { - color: #445976; -} - -body.theme-light .opt-btn.active { - background: #dbe9ff; - color: #11325b; -} - -body.theme-light .size-chip { - background: #f4f8ff; - color: #122741; - border-color: rgba(17, 41, 72, 0.2); -} - -body.theme-light .size-chip span { - color: #0057ae; -} - -body.theme-light .size-chip:hover { - background: #0071e3; - color: #fff; -} - -body.theme-light .size-chip:hover span { - color: #fff; -} - -body.theme-light .summary-row-large, -body.theme-light .total-row, -body.theme-light #cart-total-right, -body.theme-light #cart-vat-right, -body.theme-light #checkout-total-display, -body.theme-light #checkout-vat-display, -body.theme-light .col-price { - color: #10213a !important; -} - -body.theme-light .order-item-btn.active .order-item-head span { - color: #0053aa; -} - -body.theme-light .order-ticket-grid strong, -body.theme-light .order-item-head span, -body.theme-light .order-ticket-content h4 { - color: #112742; -} - -body.theme-light .about-hero-block { - background: linear-gradient(130deg, #f7fbff 0%, #ecf3ff 100%); - border-color: rgba(24, 48, 80, 0.14); -} - -body.theme-light .about-hero-content h1, -body.theme-light .about-stats-grid h3, -body.theme-light .about-card h3 { - color: #122440; -} - -body.theme-light .about-hero-content p, -body.theme-light .about-stats-grid p, -body.theme-light .about-card p { - color: #455a77; -} - -body.theme-light .about-stats-grid article { - background: #ffffff; - border-color: rgba(24, 49, 82, 0.14); -} - -body.theme-light .about-card::before { - background: linear-gradient(175deg, rgba(245, 250, 255, 0.2), rgba(245, 250, 255, 0.78)); -} - -body.theme-light .about-card { - border-color: rgba(22, 47, 80, 0.18); -} - -@media (max-width: 980px) { - .about-hero-block { - grid-template-columns: 1fr; - } - - .about-hero-media { - min-height: 230px; - } - - .about-stats-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -}