/* ========================================================= Duke Public Site — Scoped UI (Light + Dark, Apple Glass) Scope everything under .duke-root Requires a wrapper:
...
Optional dark mode: or .duke-root[data-theme="dark"] ========================================================= */ /* ---------------------------------------- Fonts ---------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..900&family=Montserrat:wght@400..800&display=swap"); /* ---------------------------------------- Design Tokens (Light) + Dark Theme ---------------------------------------- */ .duke-root { --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Montserrat', var(--font-sans); /* Palette (Light) */ --primary: #d32f2f; --primary-600: #b32727; --primary-700: #951f1f; /* Apple-like background: soft gradient + subtle noise-ready base */ --bg: radial-gradient(circle at top, #fdf7f7 0%, #f6f7fb 45%, #e9edf7 100%); --surface: rgba(255,255,255,0.92); --surface-2: rgba(249,250,252,0.9); --text: #111827; --muted: #6b7280; --border: rgba(148,163,184,0.35); --shadow-soft: 0 18px 45px rgba(15,23,42,.10); --shadow-strong: 0 28px 80px rgba(15,23,42,.20); /* UI */ --chip-bg: rgba(248,250,252,0.95); --chip-fg: #1f2933; --soft-bg: rgba(243,246,255,0.9); /* Glass surface for cards/nav */ --glass: rgba(255,255,255,0.70); --glass-elevated: rgba(255,255,255,0.82); --focus: 0 0 0 3px rgba(211,47,47,.28); /* Sizing */ --radius: 16px; --radius-sm: 12px; --radius-lg: 24px; /* Z */ --z-navbar: 1000; --z-overlay: 1100; /* Animation */ --trans: .22s ease; } /* Prefer data-theme on the scope, but also accept html data-theme */ .duke-root[data-theme="dark"], html[data-theme="dark"] .duke-root { --primary: #f97070; --primary-600: #f05252; --primary-700: #de3232; --bg: radial-gradient(circle at top, #020617 0%, #020617 40%, #020617 100%); --surface: rgba(15,23,42,0.92); --surface-2: rgba(15,23,42,0.92); --text: #e5e7eb; --muted: #9ca3af; --border: rgba(148,163,184,0.40); --shadow-soft: 0 18px 50px rgba(0,0,0,.55); --shadow-strong: 0 32px 90px rgba(0,0,0,.80); --chip-bg: rgba(15,23,42,0.9); --chip-fg: #e5e7ff; --soft-bg: rgba(30,64,175,0.16); --glass: rgba(15,23,42,0.65); --glass-elevated: rgba(15,23,42,0.85); --focus: 0 0 0 3px rgba(249,112,112,.40); } /* Auto-respect system theme if you want */ @media (prefers-color-scheme: dark) { .duke-root:not([data-theme="light"]) { color-scheme: dark; } } /* ---------------------------------------- Base ---------------------------------------- */ .duke-root, .duke-root * { box-sizing: border-box; } .duke-root html, .duke-root body { height: 100%; } .duke-root body { padding: 0; margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); scroll-padding-top: 88px; /* navbar height offset for anchor jumps */ } .duke-root img { max-width: 100%; display: block; } .duke-root a { color: var(--primary); text-decoration: none; } .duke-root a:hover { color: var(--primary-600); } .duke-root :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; } .duke-root * { transition: background-color var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans), transform var(--trans); } @media (prefers-reduced-motion: reduce) { .duke-root * { transition: none !important; animation: none !important; } } /* Containers */ .duke-root .container-narrow { max-width: 980px; margin: 0 auto; padding: 0 16px; } .duke-root .container { max-width: 1180px; margin: 0 auto; padding: 0 16px; } .duke-root .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 16px; } /* ---------------------------------------- Navbar (floating Apple glass) ---------------------------------------- */ .duke-root .navbar { position: fixed; inset: 12px 2.5% auto 2.5%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; background: var(--glass); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 0 18px; z-index: var(--z-navbar); } .duke-root .navbar .brand { display: flex; align-items: center; gap: 12px; } .duke-root .navbar .brand img { height: 42px; filter: drop-shadow(0 3px 10px rgba(15,23,42,.35)); } .duke-root .navbar .title { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-display); } .duke-root .navbar .title .main { font-weight: 800; letter-spacing: .2px; font-size: 1.05rem; } .duke-root .navbar .title .sub { font-size: .82rem; color: var(--muted); } /* Nav links */ .duke-root .navbar .nav { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; } .duke-root .navbar .nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: var(--text); background: transparent; } .duke-root .navbar .nav a:hover { background: color-mix(in srgb, var(--soft-bg) 70%, transparent); } /* Compact when scrolled (toggle class on body or navbar) */ .duke-root .navbar.scrolled, html.scrolled .duke-root .navbar, body.scrolled .duke-root .navbar { min-height: 56px; inset: 8px 2.5% auto 2.5%; border-radius: var(--radius-sm); opacity: .98; box-shadow: var(--shadow-soft); } /* Mobile */ @media (max-width: 768px) { .duke-root .navbar { min-height: auto; padding: 10px 12px; flex-wrap: wrap; gap: 10px; } .duke-root .navbar .nav { width: 100%; justify-content: space-around; } } /* ---------------------------------------- Cards, Chips, Badges (Apple glass style) ---------------------------------------- */ .duke-root .card { background: var(--glass-elevated); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); } .duke-root .card.hoverable { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .duke-root .card.hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); border-color: rgba(255,255,255,0.45); } .duke-root .chip { display: inline-block; background: var(--chip-bg); color: var(--chip-fg); padding: .22rem .6rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--border); } .duke-root .badge-soft { display:inline-block; padding: .28rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--chip-bg)); color: var(--primary); } /* ---------------------------------------- Buttons ---------------------------------------- */ .duke-root .btn { display: inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight: 600; border-radius: 999px; padding: .55rem 1.1rem; border: 1px solid var(--primary); color: var(--primary); background: rgba(255,255,255,0.0); cursor: pointer; } .duke-root .btn:hover { background: color-mix(in srgb, var(--primary) 12%, #ffffff); color: var(--primary-700); border-color: var(--primary); } .duke-root .btn-primary { background: var(--primary); color:#fff; border-color: var(--primary); } .duke-root .btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); } .duke-root .btn-ghost { border-color: var(--border); color: var(--text); } .duke-root .btn-ghost:hover { background: color-mix(in srgb, var(--soft-bg) 75%, transparent); } /* Prominent CTA */ .duke-root .book-now-btn { background: var(--primary); color: #fff; border: none; padding: 14px 28px; border-radius: 999px; font-weight: 800; letter-spacing:.3px; box-shadow: 0 18px 40px rgba(211,47,47,.40); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .duke-root .book-now-btn:hover { transform: translateY(-2px) scale(1.02); background: var(--primary-600); box-shadow: 0 24px 60px rgba(211,47,47,.55); } /* Floating CTA (mobile) */ .duke-root .floating-cta { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: var(--z-overlay); background: var(--primary); color:#fff; border:0; border-radius: 999px; padding: 12px 22px; font-weight:800; letter-spacing:.2px; box-shadow: 0 10px 28px rgba(211,47,47,.4); } @media (min-width: 768px) { .duke-root .floating-cta { display: none; } } /* ---------------------------------------- Forms ---------------------------------------- */ .duke-root .form-control, .duke-root .form-select { background: rgba(255,255,255,0.92); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: .65rem .8rem; box-shadow: inset 0 1px 1px rgba(0,0,0,.02); } .duke-root[data-theme="dark"] .form-control, .duke-root[data-theme="dark"] .form-select, html[data-theme="dark"] .duke-root .form-control, html[data-theme="dark"] .duke-root .form-select { background: rgba(15,23,42,0.95); color: var(--text); border-color: rgba(148,163,184,0.5); } .duke-root .form-control:focus, .duke-root .form-select:focus { box-shadow: var(--focus); outline: none; } /* ---------------------------------------- Swiper 9 (modern classes) ---------------------------------------- */ .duke-root .swiper { width: 100%; } .duke-root .swiper-slide { width: 260px !important; } .duke-root .slider-title { font-size:1.15rem; font-weight:700; margin-bottom: .65rem; } /* Event card poster */ .duke-root .ev .hero { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid rgba(148,163,184,0.45); } /* ---------------------------------------- Event Grid & Flags ---------------------------------------- */ .duke-root .ev .flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; border: 1px solid var(--border); } .duke-root .ev .muted { color: var(--muted); } /* ---------------------------------------- Breadcrumbs / Panels / Footer ---------------------------------------- */ .duke-root .breadcrumb { background: transparent; margin-bottom: .5rem; padding-left: 0; } .duke-root .breadcrumb .breadcrumb-item a { color: var(--muted); } .duke-root .breadcrumb .breadcrumb-item.active { color: var(--text); } /* Glass panel */ .duke-root .panel { background: var(--glass-elevated); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); } .duke-root .panel-heading { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 16%, transparent), transparent ); padding: 12px 18px; border-bottom: 1px solid var(--border); color: var(--text); } .duke-root .panel-title { font-weight: 700; font-family: var(--font-display); } .duke-root .panel-body { padding: 18px; } .duke-root #footer { background: var(--surface-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); color: var(--muted); padding: 16px; text-align: center; font-size: .9rem; } /* ---------------------------------------- Overlay (menus / modal backdrops) ---------------------------------------- */ .duke-root .overlay { position: fixed; inset: 0; display: none; background: rgba(0,0,0,.7); z-index: var(--z-overlay); opacity: 0; transition: opacity .24s ease; } .duke-root .overlay.active { display: block; opacity: 1; } /* ---------------------------------------- Map container (Leaflet / Google Maps) ---------------------------------------- */ .duke-root #map { height: 320px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-soft); } /* ---------------------------------------- Poster / Lightbox ---------------------------------------- */ .duke-root .poster-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: #000; } .duke-root .poster { width: 100%; height: clamp(320px, 48vw, 540px); object-fit: cover; display: block; } .duke-root .poster--portrait { object-fit: contain; background: #000; } .duke-root .lightbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: var(--z-overlay); } .duke-root .lightbox-backdrop.active { display: flex; } .duke-root .lightbox-img { max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } /* ---------------------------------------- WhatsApp FAB ---------------------------------------- */ .duke-root .wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-overlay); background: #25D366; color: #fff; border: 0; border-radius: 999px; padding: 12px 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 12px 30px rgba(37,211,102,.45); } .duke-root .wa-fab svg { width: 20px; height: 20px; } /* ---------------------------------------- Skeletons (loading placeholders) ---------------------------------------- */ .duke-root .skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--soft-bg) 80%, transparent); border-radius: 8px; min-height: 1rem; } .duke-root .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: duke-shimmer 1.2s infinite; opacity: .40; } @keyframes duke-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ---------------------------------------- Animations (subtle) ---------------------------------------- */ @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes zoomIn { from{transform:scale(.96)} to{transform:scale(1)} } /* Logo hero animation (optional) */ .duke-root .slide-logo-zoom { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); width: min(90vw, 850px); z-index: 10; animation: zoomIn 600ms ease-out both; } .duke-root .slide-logo-zoom img { width:100%; filter: drop-shadow(0 0 15px rgba(0,0,0,.5)); animation: fadeIn 500ms 200ms ease-out both; } /* ---------------------------------------- Utilities ---------------------------------------- */ .duke-root .text-muted { color: var(--muted) !important; } .duke-root .bg-surface { background: var(--glass-elevated) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .duke-root .rounded-2xl { border-radius: var(--radius-lg); } .duke-root .shadow-soft { box-shadow: var(--shadow-soft); } /* Full-width CTA on small screens */ .duke-root .book-now { text-align: center; margin-top: 20px; } @media (max-width: 600px) { .duke-root .book-now-btn { width: 92%; padding: 15px 0; font-size: 18px; } } /* ---------------------------------------- Scroll helper — add this in your layout footer: document.addEventListener('scroll', () => { if (window.scrollY > 12) document.body.classList.add('scrolled'); else document.body.classList.remove('scrolled'); }); ---------------------------------------- */ /* ============================ Duke Event View – Scoped CSS Wrapper: .duke-root .ev-view ============================ */ /* Layout / header */ .duke-root .ev-view { padding-top: .75rem; padding-bottom: 2rem; } .duke-root .ev-view .page-header-wrap { margin-bottom: 1.25rem; } .duke-root .ev-view .page-kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); display: flex; align-items: center; gap: .4rem; } .duke-root .ev-view .page-title { font-size: 2.1rem; font-weight: 800; letter-spacing: .02em; margin: .1rem 0 .15rem; font-family: var(--font-display); } .duke-root .ev-view .page-primary-line { font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .duke-root .ev-view .page-primary-line .sep { opacity: .5; } /* Chips / badges / flags */ .duke-root .ev-view .chip { background: var(--chip-bg); border: 1px solid var(--border); padding: .18rem .55rem; border-radius: .75rem; font-size: .78rem; display: inline-flex; align-items: center; gap: .25rem; } .duke-root .ev-view .chip-accent { background: #fef3c7; border-color: #fde68a; color: #92400e; } .duke-root .ev-view .chip-rhythm { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } .duke-root .ev-view .badge-soft { background: color-mix(in srgb, var(--primary) 12%, var(--chip-bg)); color: var(--primary); padding: .28rem .65rem; border-radius: .75rem; font-size: .78rem; } .duke-root .ev-view .tz-label { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; } .duke-root .ev-view .flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; border: 1px solid var(--border); } /* Cards */ .duke-root .ev-view .card { border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); background: color-mix(in srgb, var(--glass) 85%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); } .duke-root .ev-view .card-header { border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent); } /* Desktop Book button in header */ .duke-root .ev-view .page-book-btn { border-radius: 999px; padding: .5rem 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; box-shadow: 0 16px 30px rgba(211,47,47,.45); } .duke-root .ev-view .page-book-btn span.sub { font-size: .75rem; font-weight: 500; opacity: .9; } /* ============================ Hero poster (full-width, top-aligned) ============================ */ .duke-root .ev-view .hero-wrap { position: relative; display: block; width: 100%; border-radius: 1.25rem; overflow: hidden; margin-bottom: 1.75rem; box-shadow: 0 26px 80px rgba(0,0,0,.65); } /* blurred background, anchored to top */ .duke-root .ev-view .hero-bg { position: absolute; inset: 0; background-position: top center; background-size: cover; filter: blur(22px) brightness(.45) saturate(1.1); transform: scale(1.08); } /* main hero image: full width, crop from top */ .duke-root .ev-view .hero { position: relative; z-index: 2; display: block; width: 100%; max-width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top center; border-radius: 1.25rem; box-shadow: 0 18px 45px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.16); transition: transform .2s ease, box-shadow .2s ease; } .duke-root .ev-view .hero-click:hover .hero { transform: translateY(-3px) scale(1.01); box-shadow: 0 24px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.2); } /* hero gradient overlay */ .duke-root .ev-view .hero-grad { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 160% at 0% 0%, rgba(239,68,68,.35) 0%, transparent 45%), radial-gradient(120% 160% at 100% 0%, rgba(59,130,246,.35) 0%, transparent 45%), linear-gradient(180deg, rgba(15,23,42,.1) 0%, rgba(15,23,42,.9) 90%); } /* Global ribbon on poster */ .duke-root .ev-view .ev-ribbon { position: absolute; top: 14px; left: 14px; z-index: 5; padding: .35rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; box-shadow: 0 10px 20px rgba(0,0,0,.4); } .duke-root .ev-view .ev-ribbon-soft { background: linear-gradient(135deg,#e0f2fe,#f9fafb); color: #0369a1; } .duke-root .ev-view .ev-ribbon-warm { background: linear-gradient(135deg,#f97316,#fde68a); color: #7c2d12; } .duke-root .ev-view .ev-ribbon-hot { background: linear-gradient(135deg,#b91c1c,#f97316); color: #fefce8; } /* Hero bottom CTA (desktop – you still control visibility via d-none/d-md-flex in markup) */ .duke-root .ev-view .hero-bottom-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: .55rem .9rem; background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,.88)); backdrop-filter: blur(16px); display: flex; justify-content: center; } .duke-root .ev-view .hero-bottom-cta-inner { width: 100%; max-width: 420px; } /* Generic Book CTA (hero + modal + mobile bar) */ .duke-root .modal-book-btn, .duke-root .ev-mobile-book-cta a { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; border-radius: 999px; border: none; padding: .7rem 1.1rem; background: var(--primary); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 12px 30px rgba(211,47,47,.6); } .duke-root .modal-book-btn span.sub, .duke-root .ev-mobile-book-cta a span.sub { font-weight: 500; font-size: .78rem; opacity: .9; } .duke-root .modal-book-btn:hover, .duke-root .ev-mobile-book-cta a:hover { background: var(--primary-600); color: #fff; } /* ============================ Sessions table ============================ */ .duke-root .ev-view .table-hover tbody tr:hover { background: color-mix(in srgb, var(--soft-bg) 70%, transparent); } .duke-root .ev-view .session-status-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; } .duke-root .ev-view .session-status-open { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .duke-root .ev-view .session-status-closed { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } .duke-root .ev-view .session-tag { margin-left: .35rem; font-size: .75rem; border-radius: 999px; padding: .05rem .5rem; } .duke-root .ev-view .session-tag-fast { background: #fef3c7; color: #92400e; } .duke-root .ev-view .session-tag-hot { background: #fee2e2; color: #b91c1c; } .duke-root .ev-view .session-tag-good { background: #e0f2fe; color: #075985; } .duke-root .ev-view .availability-bar { position: relative; width: 100%; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; } .duke-root .ev-view .availability-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg,#22c55e,#84cc16); } /* ============================ Venue map & contact & share ============================ */ .duke-root .ev-view .venue-map-wrapper { width: 100%; height: 200px; border-radius: .75rem; overflow: hidden; border: 1px solid var(--border); } .duke-root .ev-view .btn-wa { background: #25D366; color: #fff; border: none; width: 100%; border-radius: 999px; font-weight: 600; } .duke-root .ev-view .btn-wa:hover { background: #1db256; color: #fff; } /* share row, placed in contact card */ .duke-root .ev-view .share-row { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; font-size: .8rem; } .duke-root .ev-view .share-label { color: var(--muted); } /* ============================ Poster modal ============================ */ .duke-root .poster-modal-body { position: relative; padding: 1rem 1rem 4.5rem; } .duke-root .poster-modal-img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: .5rem; } /* ============================ Mobile floating Book Now bar ============================ */ .duke-root .ev-mobile-book-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; justify-content: center; padding: .45rem .75rem calc(.65rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(17,24,39,0), rgba(15,23,42,.9)); backdrop-filter: blur(18px); } .duke-root .ev-mobile-book-cta .inner { max-width: 480px; width: 100%; } /* ============================ Mobile tweaks ============================ */ @media (max-width: 767.98px) { .duke-root .ev-view.container-fluid { padding-left: 1rem; padding-right: 1rem; } .duke-root .ev-view .page-title { font-size: 1.6rem; } /* taller, more poster-like hero on phones */ .duke-root .ev-view .hero { aspect-ratio: 3/4; } } @media (max-width: 575.98px) { /* compact table cells on very small screens */ .duke-root .ev-view .table td, .duke-root .ev-view .table th { padding: .45rem .55rem; font-size: .8rem; } } /* =========================== Base cards / images =========================== */ .ev .hero { width: 100%; height: 200px; object-fit: cover; border-radius: 1rem; } .ev .card { border-radius: 1rem; border: 0; box-shadow: 0 8px 28px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; background: #ffffff; } .ev .ev-card { cursor: pointer; } .ev .card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(15,23,42,.18); background: #fdfdfd; } .ev .muted { color: #6c757d; } .ev .slider-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; } /* Small generic chip */ .ev .chip { background: #eef2ff; color: #0a3d62; border-radius: 6px; padding: .2rem .55rem; font-size: .78rem; border: 1px solid #e6eaef; } /* Accent chips for days / rhythm */ .ev .chip-accent { background: #fef3c7; border-color: #fde68a; color: #92400e; } .ev .chip-rhythm { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } /* Country + status row */ .ev .country-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: #0b1120; color: #e5e7eb; font-size: .78rem; border: 1px solid rgba(148,163,184,.6); } .ev .country-pill .flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; border: 1px solid rgba(148,163,184,.6); } .ev .status-badge { padding: .18rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; } .ev .status-badge-open { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .ev .status-badge-closed { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } /* Session availability snippet */ .ev .availability-meta { font-size: .82rem; color: #4b5563; } .ev .availability-meta i { font-size: .8rem; } .ev .availability-tag { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; } .ev .availability-tag-good { background: #e0f2fe; color: #075985; } .ev .availability-tag-fast { background: #fef3c7; color: #92400e; } .ev .availability-tag-hot { background: #fee2e2; color: #b91c1c; } /* Small availability bar under text */ .ev .availability-bar { position: relative; width: 100%; height: 5px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin-top: .25rem; } .ev .availability-bar-fill { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #22c55e, #84cc16); } /* =========================== Swiper cards (GLOBAL) =========================== */ .swiper-slide { width: 290px !important; } .swiper-card { position: relative; overflow: hidden; border-radius: 20px; height: 360px; box-shadow: 0 10px 28px rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); background: #020617; } .swiper-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform .5s ease; } .swiper-card:hover .bg { transform: scale(1.06); } .swiper-card .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.8) 85%); } .swiper-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px 16px; color: #fff; } .swiper-card .btn-book { background: #d32f2f; color: #fff; border: none; border-radius: 999px; padding: .45rem .9rem; font-weight: 700; box-shadow: 0 8px 18px rgba(211,47,47,.35); } .swiper-card .btn-book:hover { background: #b32727; color: #fff; } .top-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: .35rem; z-index: 2; } .badge-soft { background: rgba(255,255,255,.9); color: #111; padding: .18rem .5rem; border-radius: 8px; font-size: .72rem; } /* =========================== FULL-WIDTH SPOTLIGHT HERO =========================== */ .spotlight-hero-wrapper { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: radial-gradient(circle at top, #1a2238 0%, #050711 50%, #02030a 100%); } .spotlight-hero { position: relative; padding: 32px 0 40px; overflow: hidden; } .spotlight-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 160% at 0% 0%, rgba(220,53,69,.40) 0%, transparent 40%), radial-gradient(120% 160% at 100% 0%, rgba(13,110,253,.35) 0%, transparent 40%); opacity: 0.85; mix-blend-mode: screen; pointer-events: none; } .spotlight-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } .spotlight-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; color: #f8f9ff; } .spotlight-header .slider-title { margin-bottom: 0; display: flex; align-items: center; gap: .4rem; } .spotlight-header small { color: rgba(248,249,255,.75); } /* Taller, cinematic cards inside hero */ .spotlight-hero .swiper-card { height: min(70vh, 520px); border-radius: 24px; box-shadow: 0 26px 80px rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.16); } .spotlight-hero .swiper-slide { width: min(360px, 75vw) !important; } /* =========================== Filters =========================== */ .ev .filter-sticky { position: sticky; top: 84px; z-index: 9; } .ev .filter-card { border: 1px solid #e9edf3; border-radius: 16px; } .ev .filter-header { font-size: .9rem; } .ev .filter-title { display: flex; align-items: baseline; gap: .25rem; } /* Search input styling */ .ev .input-group-search .input-group-text { border-radius: 999px 0 0 999px; background: #f4f5fb; border-color: #e0e4f0; } .ev .input-group-search .form-control { border-radius: 0 999px 999px 0; border-color: #e0e4f0; } /* Mobile filter toggle button (hidden on desktop) */ .ev .filter-toggle-btn { display: none; } /* Cards grid */ .ev .card .title { font-size: 1rem; font-weight: 800; line-height: 1.25; } /* Text clamp */ .text-clip-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Extra info that we hide on mobile */ .ev .tile-extra {} /* Softer filter background on desktop */ @media (min-width: 768px) { .ev .filter-card { background: #f9fafc; } } /* =========================== MOBILE TWEAKS =========================== */ @media (max-width: 767.98px) { .ev { padding-top: 1.75rem !important; padding-bottom: 2.5rem !important; } .ev .hero { height: 180px; border-radius: .9rem; } .ev .card { box-shadow: 0 4px 14px rgba(0,0,0,.06); } .spotlight-hero { padding: 20px 0 28px; } .spotlight-inner { padding: 0 1rem; } .spotlight-hero .swiper-card { height: 320px; border-radius: 18px; } .spotlight-hero .swiper-slide { width: 78vw !important; } /* Make filters non-sticky on mobile */ .ev .filter-sticky { position: static; top: auto; z-index: 3; } /* Show toggle button on mobile only */ .ev .filter-toggle-btn { display: block; } /* Collapse filter form when card doesn't have .is-open */ .ev .filter-card:not(.is-open) form { display: none; } /* Tighter padding & spacing for the form */ .ev #public-filter-form { padding: .8rem .9rem !important; } .ev #public-filter-form .row.g-2 > [class*="col-"] { margin-bottom: .35rem; } .ev #public-filter-form label.form-label { font-size: .75rem; } .ev #public-filter-form input, .ev #public-filter-form select { font-size: .82rem; padding-top: .35rem; padding-bottom: .35rem; } /* Stack action buttons full width */ .ev #public-filter-form .btn { font-size: .82rem; } .ev #public-filter-form .col-12.mt-2.d-flex.justify-content-end.gap-2 { flex-direction: column; } .ev #public-filter-form .col-12.mt-2.d-flex.justify-content-end.gap-2 .btn { width: 100%; } /* MOBILE: minimum details on tiles */ .ev .tile-extra { display: none !important; } .ev .card .title { font-size: .96rem; } .ev .card .text-muted { font-size: .82rem; } } html, body { margin: 0; } .duke-root{ --duke-bg: #050509; --duke-bg-2: #11111a; --duke-bg-3: radial-gradient(circle at top, #1f2937 0, #050509 45%); --duke-card: #151521; --duke-text: #f4f4ff; --duke-muted: #a6a6b3; --duke-accent: #d32f2f; --duke-accent-2: #b32727; --duke-stroke: rgba(255,255,255,.10); --duke-glass: rgba(9, 9, 18, 0.78); --duke-soft: rgba(148,163,184,.45); --duke-highlight: rgba(248,250,252,.15); --duke-shadow: 0 22px 50px rgba(0,0,0,.65); --duke-radius: 14px; --duke-radius-lg: 18px; } .duke-root body{ background: var(--duke-bg-3); color: var(--duke-text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } .duke-root .container{ max-width: 1180px; } .duke-root .container-wide{ max-width: 1400px; } /* ============================ NAVBAR – Apple glass look ============================= */ .duke-root .navbar-duke{ position: fixed; top:0; left:0; right:0; z-index:1030; background: linear-gradient(180deg, rgba(7,9,20,.96), rgba(7,9,20,.70)), radial-gradient(circle at top, rgba(148,163,184,.22), transparent 55%); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); border-bottom: 1px solid rgba(148,163,184,.35); box-shadow: 0 18px 40px rgba(0,0,0,.65); transition: all .25s ease; padding-block: .45rem; overflow: visible; /* ensure dropdowns can render outside */ } .duke-root .navbar-duke.scrolled{ background: linear-gradient(180deg, rgba(5,5,10,.98), rgba(5,5,10,.92)); border-bottom-color: rgba(148,163,184,.45); box-shadow: 0 22px 50px rgba(0,0,0,.75); } .duke-root .navbar-logo img{ height:46px; filter: drop-shadow(0 3px 12px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(248,250,252,.18)); transition: transform .15s ease, filter .18s ease; } .duke-root .navbar-logo img:hover{ transform: translateY(-1px) scale(1.01); filter: drop-shadow(0 4px 16px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(248,250,252,.28)); } .duke-root .navbar-toggler{ border-radius: 999px; border-color: rgba(255,255,255,.28); padding: .25rem .6rem; background: radial-gradient(circle at 30% 0, rgba(248,250,252,.18), transparent 55%); } .duke-root .navbar-toggler:focus{ box-shadow: 0 0 0 2px rgba(211,47,47,.65); } .duke-root .navbar-toggler-icon{ background-image: none; } .duke-root .navbar-toggler-icon::before{ content: "\f0c9"; font-family: "Font Awesome 6 Free"; font-weight: 900; color:#fff; font-size:1.05rem; } .duke-root .nav-link{ color: var(--duke-text) !important; opacity:.86; padding:.45rem .9rem; border-radius: 999px; transition: all .18s ease; font-size:.95rem; position: relative; } .duke-root .nav-link::after{ content:""; position:absolute; left:18%; right:18%; bottom:.1rem; height:2px; border-radius:999px; background: radial-gradient(circle at 50% 0, rgba(248,250,252,.65), transparent 70%); opacity:0; transform: scaleX(.6); transition: opacity .18s ease, transform .18s ease; } .duke-root .nav-link:hover{ opacity:1; background: rgba(248,250,252,.06); } .duke-root .nav-link:hover::after{ opacity:1; transform: scaleX(1); } .duke-root .nav-link.active{ opacity:1; background: rgba(248,250,252,.12); font-weight:600; } .duke-root .nav-link.active::after{ opacity:1; transform: scaleX(1); } /* CTA */ .duke-root .btn-cta{ background: linear-gradient(135deg, #e53935, #b71c1c); color:#fff !important; border:0; border-radius: 999px; padding:.5rem 1.15rem; font-weight:700; letter-spacing:.2px; box-shadow: 0 14px 30px rgba(185,39,39,.6), 0 0 24px rgba(244,67,54,.45); transition: transform .15s ease, background .2s ease, box-shadow .2s ease; font-size:.93rem; } .duke-root .btn-cta:hover{ background: linear-gradient(135deg, #f44336, #c62828); transform: translateY(-1px); box-shadow: 0 18px 38px rgba(185,39,39,.7), 0 0 30px rgba(244,67,54,.55); } .duke-root .btn-cta:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(0,0,0,.65); } /* ============================ DROPDOWNS / SUB-MENUS (fix not visible issue) ============================= */ .duke-root .dropdown-menu{ background: linear-gradient(145deg, rgba(15,23,42,.96), rgba(15,23,42,.88)); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-radius: 14px; border: 1px solid rgba(148,163,184,.45); box-shadow: 0 24px 60px rgba(0,0,0,.85); padding:.4rem; min-width: 220px; z-index: 1050; /* ensure above navbar */ margin-top: .45rem !important; } /* For Bootstrap 5 popper-positioned submenus */ .duke-root .navbar-duke .dropdown-menu[data-bs-popper]{ top:100%; left:auto; right:0; } .duke-root .dropdown-item{ color: var(--duke-text); font-size:.92rem; border-radius: 10px; padding:.45rem .65rem; display:flex; align-items:center; gap:.45rem; } .duke-root .dropdown-item i{ opacity:.85; } .duke-root .dropdown-item:hover{ background: rgba(248,250,252,.10); color:#fff; } .duke-root .dropdown-divider{ border-color: rgba(148,163,184,.45); margin:.3rem 0; } /* ============================ Layout spacing ============================= */ .duke-root .page-wrap{ padding-top: 86px; } @media (min-width: 992px){ .duke-root .page-wrap{ padding-top: 96px; } } /* Safe-area support */ @supports(padding: max(0px)) { .duke-root .navbar-duke{ padding-top: max(env(safe-area-inset-top), 0px); } .duke-root .page-wrap{ padding-top: calc(96px + max(env(safe-area-inset-top), 0px)); } @media (max-width: 991.98px){ .duke-root .page-wrap{ padding-top: calc(86px + max(env(safe-area-inset-top), 0px)); } } } /* ============================ Cards / generic sections ============================= */ .duke-root .duke-card{ background: radial-gradient(circle at top left, rgba(148,163,184,.22), transparent 50%), linear-gradient(160deg, #020617, #020617); border: 1px solid rgba(148,163,184,.32); border-radius: var(--duke-radius-lg); box-shadow: var(--duke-shadow); position: relative; } .duke-root .duke-card::before{ content:""; position:absolute; inset:1px; border-radius: inherit; border:1px solid rgba(255,255,255,.04); pointer-events:none; } /* Footer */ .duke-root #footer{ background: #050509; color:#cfd0d6; border-top: 1px solid var(--duke-stroke); } .duke-root #footer .footer-meta{ font-size:.8rem; letter-spacing:.03em; text-transform: uppercase; } /* Back to top */ .duke-root #backToTop{ position:fixed; right:16px; bottom:16px; z-index:1030; display:none; border-radius:999px; border:1px solid var(--duke-stroke); padding:.55rem .7rem; background: var(--duke-glass); color:#fff; box-shadow: var(--duke-shadow); } .duke-root #backToTop:hover{ background: rgba(255,255,255,.14); } /* Helpers */ .duke-root .text-muted{ color: var(--duke-muted) !important; } .duke-root .divider{ height:1px; background: var(--duke-stroke); }