/* Venue Styles - Based on Dänemark.Guide Design */ .dk-venue-container { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #0f172a; line-height: 1.7; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%); min-height: 100vh; position: relative; overflow-x: hidden; width: 100%; margin: 0; padding: 0; } .dk-venue-container::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* Hero */ .hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: 60vh; min-height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25); background-image: var(--wpr-bg-4316d6b4-b308-4a8a-940e-e8dc9f033d0b); background-size: cover; background-position: center; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(30, 41, 59, 0.5) 100%); } .hero-content { position: relative; z-index: 10; padding: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); max-width: 800px; margin: 0 20px; } .hero h1 { font-size: 3rem; font-weight: 900; color: white; line-height: 1.1; letter-spacing: -0.03em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); margin-bottom: 0.5rem; } .hero-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.95); font-weight: 500; } /* Container */ .container { max-width: 1400px; margin: -80px auto 0; padding: 0 40px 80px; position: relative; z-index: 20; } /* Glass Cards */ .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 24px; padding: 3rem; margin-bottom: 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; transition: transform 0.3s ease, box-shadow 0.3s ease; } .glass-card:hover { transform: translateY(-5px); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; } .section-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .section-header h2 { font-size: 2rem; font-weight: 700; color: #111827; margin: 0; } .section-header::after { content: ''; flex: 1; height: 3px; background: linear-gradient(to right, #dc2626 0%, transparent 100%); border-radius: 2px; } /* Info Grid */ .venue-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .info-box { background: rgba(248, 250, 252, 0.8); padding: 1.5rem; border-radius: 16px; border-left: 4px solid #dc2626; } .info-box-icon { font-size: 1.5rem; margin-bottom: 0.5rem; } .info-box-label { font-size: 0.85rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .info-box-value { font-size: 1.1rem; color: #111827; font-weight: 600; } .info-box-value a { color: #dc2626; text-decoration: none; } .info-box-value a:hover { text-decoration: underline; } /* Map */ .venue-map { width: 100%; height: 450px; border-radius: 16px; overflow: hidden; margin-top: 1.5rem; } /* Events List */ .venue-events-list { display: grid; gap: 1.5rem; } .venue-event-item { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; padding: 1.5rem; background: rgba(248, 250, 252, 0.6); border-radius: 16px; transition: all 0.3s ease; align-items: center; } .venue-event-item:hover { background: rgba(220, 38, 38, 0.05); transform: translateX(5px); } .venue-event-date { background: #dc2626; color: white; padding: 12px 16px; border-radius: 12px; text-align: center; min-width: 80px; } .venue-event-date-day { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1; } .venue-event-date-month { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } .venue-event-info h3 { font-size: 1.3rem; font-weight: 700; color: #111827; margin: 0 0 0.5rem 0; } .venue-event-info h3 a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .venue-event-info h3 a:hover { color: #dc2626; } .venue-event-time { color: #64748b; font-size: 0.95rem; } .venue-event-link { padding: 10px 20px; background: #dc2626; color: white; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; white-space: nowrap; } .venue-event-link:hover { background: #b91c1c; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); } .no-events { text-align: center; padding: 3rem; color: #64748b; } .no-events-icon { font-size: 3rem; margin-bottom: 1rem; } /* Responsive */ @media (max-width: 768px) { .hero { height: 50vh; min-height: 350px; } .hero h1 { font-size: 2rem; } .container { margin-top: -60px; padding: 0 20px 60px; } .glass-card { padding: 24px; } .venue-event-item { grid-template-columns: 1fr; text-align: center; } .venue-event-date { margin: 0 auto; } }