/* ===================================================================== Two switchable themes, selected from the admin Configure tab via : • deco — "Dianne & Patrick" art-deco (NYC + airport + badminton + TWICE) • classic — the original iOS-style dark theme (pre-overhaul) Structure is shared and driven by CSS variables; deco-only flourishes are gated with body[data-theme="deco"]. ===================================================================== */ * { box-sizing: border-box; } /* ----- DECO tokens (default) ---------------------------------------- */ body { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-mono: "Space Mono", ui-monospace, "Courier New", monospace; --text: #f3ece0; --muted: #aab0c0; --line: rgba(200, 164, 92, 0.22); --line-soft: rgba(243, 236, 224, 0.08); --accent: #c8a45c; --accent-soft: #e2c489; --surface: #18213a; --surface-2: #1f2a47; --nav-bg: linear-gradient(180deg, #121a2e, #0c1326); --nav-item: #aab0c0; --nav-active-bg: linear-gradient(90deg, rgba(200, 164, 92, 0.20), rgba(200, 164, 92, 0.05)); --nav-active-text: #f3ece0; --card-bg: linear-gradient(180deg, #18213a, #121a2e); --card-text: #f3ece0; --card-strong: #e2c489; --card-nested-bg: #1f2a47; --btn-bg: linear-gradient(180deg, #e2c489, #c8a45c); --btn-text: #0d1322; --btn-radius: 999px; --input-bg: rgba(18, 26, 46, 0.85); --input-border: rgba(243, 236, 224, 0.08); --input-text: #f3ece0; --radius: 14px; --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); font-family: var(--font-sans); color: var(--text); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: #0d1322; background-image: radial-gradient(1100px 540px at 78% -8%, rgba(200, 164, 92, 0.12), transparent 60%), radial-gradient(900px 520px at 12% 8%, rgba(125, 155, 221, 0.10), transparent 60%), linear-gradient(180deg, #0c1120 0%, #0d1322 42%, #0a0f1c 100%); background-attachment: fixed; } /* ----- CLASSIC tokens (override) ------------------------------------ */ body[data-theme="classic"] { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: var(--font-sans); --text: #f5f5f7; --muted: #a9a9aa; --line: #3a3a3c; --line-soft: #3a3a3c; --accent: #007aff; --accent-soft: #1e90ff; --surface: #2c2c2e; --surface-2: #3a3a3c; --nav-bg: #2c2c2e; --nav-item: #a9a9aa; --nav-active-bg: #007aff; --nav-active-text: #ffffff; --card-bg: #2c2c2e; --card-text: #f5f5f7; --card-strong: #ff7f50; --card-nested-bg: #3a3a3c; --btn-bg: #007aff; --btn-text: #ffffff; --btn-radius: 8px; --input-bg: #2c2c2e; --input-border: #3a3a3c; --input-text: #f5f5f7; --radius: 10px; --shadow: 0 4px 6px rgba(0, 0, 0, 0.4); background-color: #1c1c1e; background-image: none; } /* ----- CLASSIC structural overrides — reproduce the pre-theme chrome ----- */ body[data-theme="classic"] .nav-bar { width: 200px; padding: 20px 0 0; background: #2c2c2e; } body[data-theme="classic"] .nav-bar ul li { margin-bottom: 10px; } body[data-theme="classic"] .main-content { margin-left: 220px; padding: 20px; max-width: none; } body[data-theme="classic"] .header { border: none; border-radius: 0; overflow: visible; box-shadow: none; margin-bottom: 20px; } body[data-theme="classic"] .header img { border-radius: 10px !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; filter: none; } body[data-theme="classic"] button { padding: 10px 15px; border-radius: 8px; font-size: 16px; font-weight: 400; } body[data-theme="classic"] button:hover { background: #005bb5; filter: none; transform: none; box-shadow: none; } body[data-theme="classic"] input, body[data-theme="classic"] select, body[data-theme="classic"] textarea { padding: 10px; border-radius: 8px; font-size: 16px; } body[data-theme="classic"] input:focus, body[data-theme="classic"] select:focus, body[data-theme="classic"] textarea:focus { box-shadow: none; } body[data-theme="classic"] .carousel img { max-width: 500px; border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); } body[data-theme="classic"] .countdown-item { background: #007aff; border: none; color: #fff; padding: 10px; border-radius: 8px; min-width: 0; font-family: inherit; font-size: 12px; letter-spacing: normal; text-transform: none; } body[data-theme="classic"] .countdown-item span { font-family: inherit; font-weight: bold; font-size: 24px; color: #fff; } body[data-theme="classic"] .about-section li { background: #2c2c2e; border: none; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); color: #f5f5f7; } body[data-theme="classic"] .about-section li strong { color: #1e90ff; } body[data-theme="classic"] .about-section li ul li { background: #3a3a3c; border: none; color: #fff; } body[data-theme="classic"] .about-section h4 { color: #00bfff; font-size: 24px; } @media only screen and (max-width: 768px) { body[data-theme="classic"] .nav-bar { width: 100%; padding: 10px 0; } body[data-theme="classic"] .main-content { margin-left: 0; margin-bottom: 60px; } } /* ----- CLASSIC ENHANCED — classic, modernized ----- */ /* Reuses the shared modern structure (rounded pills, soft shadows) with a refined blue palette and a modern geometric typeface, minus deco flourishes. */ body[data-theme="classic-enhanced"] { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Poppins", "Inter", sans-serif; --font-mono: "Inter", ui-monospace, monospace; --text: #eef2f8; --muted: #9aa3b2; --line: rgba(96, 165, 250, 0.22); --line-soft: rgba(255, 255, 255, 0.07); --accent: #3b82f6; --accent-soft: #60a5fa; --surface: #20242c; --surface-2: #272c36; --nav-bg: linear-gradient(180deg, #1b1e25, #15171c); --nav-item: #9aa3b2; --nav-active-bg: linear-gradient(90deg, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.08)); --nav-active-text: #ffffff; --card-bg: linear-gradient(180deg, #20242c, #1a1d24); --card-text: #eef2f8; --card-strong: #60a5fa; --card-nested-bg: #272c36; --btn-bg: linear-gradient(180deg, #60a5fa, #3b82f6); --btn-text: #0b1220; --btn-radius: 999px; --input-bg: rgba(27, 30, 37, 0.85); --input-border: rgba(255, 255, 255, 0.08); --input-text: #eef2f8; --radius: 18px; --shadow: 0 16px 38px -16px rgba(0, 0, 0, 0.66); background-color: #15171c; background-image: radial-gradient(1000px 520px at 80% -10%, rgba(59, 130, 246, 0.12), transparent 60%), linear-gradient(180deg, #16181d 0%, #15171c 60%, #121317 100%); background-attachment: fixed; } /* Elegant serif for the hero names, contrasting the modern Poppins/Inter UI */ body[data-theme="classic-enhanced"] .overlay-text { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(2.6rem, 8.5vw, 5.2rem); letter-spacing: 0.015em; } body[data-theme="classic-enhanced"] .nav-bar ul li a { border-radius: 14px; } body[data-theme="classic-enhanced"] .header img { filter: brightness(0.85); } body[data-theme="classic-enhanced"] .header::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 17, 22, 0.15) 0%, rgba(15, 17, 22, 0.62) 100%); } body[data-theme="classic-enhanced"] .about-section h3::after { content: ""; display: block; width: 56px; height: 3px; margin: 12px 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), transparent); } @media only screen and (max-width: 768px) { body[data-theme="classic-enhanced"] .nav-bar { background: rgba(21, 23, 28, 0.92); backdrop-filter: blur(12px); } } /* Note: no global heading color — headings inherit their context so MUI Typography headings on light surfaces (e.g. timeline date cards) stay readable instead of picking up the page's light-on-dark text color. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: 0.01em; } h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); } a { color: var(--accent-soft); text-decoration: none; } a:hover { color: var(--accent); } ::selection { background: rgba(200, 164, 92, 0.35); color: #fff; } /* Deco-only decorative helpers */ .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); } .flight-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px auto; max-width: 520px; color: var(--accent); } .flight-divider::before, .flight-divider::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); } /* --------------------------------------------------------------------- */ /* Sub-tab rows (About + Attend tiers, #71 — supersedes the #69 pills) */ /* Two tiers, two vocabularies, both "tab" language: selection is shown */ /* by an ATTACHED indicator (.tabrow__ink, measured by SubTabRow), never */ /* a filled capsule. `tabs` = text tabs on a hairline with a springy */ /* glowing underline (group tier); `stops` = icon-over-label stops with */ /* a sliding mini-underline (leaf tier + Attend). Selectors stack two */ /* classes on purpose: the classic theme global `body[data-theme] button` */ /* overrides out-specify a single class. */ /* --------------------------------------------------------------------- */ /* The shell owns the hairline and hosts the ink OUTSIDE the scroll clip, so the glow isn't cut at the row's bottom edge. inset(-20px 0) still clips the ink horizontally at the shell edges (an active tab scrolled out of view must not leave its ink floating past them) while letting the glow bleed vertically. */ .tabrow-shell { position: relative; clip-path: inset(-20px 0); } .tabrow-shell--tabs { margin-top: 12px; border-bottom: 1px solid var(--line); } .tabrow-shell--stops { margin-top: 6px; } .tabrow { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .tabrow::-webkit-scrollbar { display: none; } /* Center the row when it fits; scroll from the true start when it overflows (justify-content: center would clip the left edge away). */ .tabrow > button:first-of-type { margin-left: auto; } .tabrow > button:last-of-type { margin-right: auto; } .tabrow--stops { padding-bottom: 10px; } .tabrow button.tabrow__tab, .tabrow button.tabrow__stop { background: none; border: none; border-radius: 0; font-family: inherit; cursor: pointer; color: var(--muted); white-space: nowrap; transition: color 0.18s ease; } .tabrow button.tabrow__tab:hover, .tabrow button.tabrow__stop:hover { background: none; color: var(--accent-soft); filter: none; transform: none; box-shadow: none; } /* The shell's clip-path can shave the browser's default outline at the row's edges, so keyboard focus gets an explicit inset ring that survives clipping. */ .tabrow button.tabrow__tab:focus-visible, .tabrow button.tabrow__stop:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 6px; } /* Forced-colors suppresses box-shadow, so restore an outline-based indicator, inset (negative offset) so the shell's clip-path can't shave it. */ @media (forced-colors: active) { .tabrow button.tabrow__tab:focus-visible, .tabrow button.tabrow__stop:focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; } } /* Group tier: quiet text tabs; the ink below carries the selection. */ .tabrow button.tabrow__tab { font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em; padding: 10px 16px 14px; } .tabrow button.tabrow__tab[aria-pressed="true"] { color: var(--text); } /* Leaf tier: icon-over-label stops (bottom-nav idiom). Icons are muted monochrome at rest and colour + lift on hover / selection — the springy cubic-bezier overshoots, so selection lands with a small bounce. */ .tabrow button.tabrow__stop { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; padding: 8px 14px 10px; } .tabrow button.tabrow__stop[aria-pressed="true"] { color: var(--accent-soft); } .tabrow .tabrow__ico { font-size: 1.35rem; line-height: 1; filter: grayscale(1) opacity(0.6); transition: filter 0.18s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .tabrow button.tabrow__stop:hover .tabrow__ico { filter: none; transform: translateY(-3px); } .tabrow button[aria-pressed="true"] .tabrow__ico { filter: none; transform: scale(1.18); } /* The shared indicator — measured off the active button (scroll-compensated), living in the unclipped shell so its glow straddles the hairline intact. */ .tabrow-shell .tabrow__ink { position: absolute; left: 0; width: 0; bottom: -2px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .tabrow-shell--stops .tabrow__ink { bottom: 3px; height: 2.5px; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); } @media (prefers-reduced-motion: reduce) { .tabrow-shell .tabrow__ink, .tabrow button.tabrow__tab, .tabrow button.tabrow__stop, .tabrow .tabrow__ico { transition: none; } } /* --------------------------------------------------------------------- */ /* Deco content panel (#73) */ /* The shared rounded-panel language for content cards (Details pages */ /* first), built entirely from the theme tokens: card surface, hairline */ /* (--line: gold on deco, grey on classic, blue-tinted on enhanced), */ /* radius, and shadow. Class is DOUBLED so it out-specifies MUI's Paper */ /* defaults regardless of stylesheet order. */ /* --------------------------------------------------------------------- */ .deco-panel.deco-panel { background: var(--card-bg); color: var(--card-text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* Accent-edge variant — replaces one-off colored strips with the theme's own accent. */ .deco-panel--edge.deco-panel--edge { border-left: 3px solid var(--accent); } /* MUI Accordion paints its own hairline ::before across the top and squares its corners while expanded — both redundant/at odds inside the panel. */ .deco-panel.deco-panel::before { display: none; } .deco-panel.deco-panel.Mui-expanded { border-radius: var(--radius); } /* --------------------------------------------------------------------- */ /* Navigation */ /* --------------------------------------------------------------------- */ .nav-bar { position: fixed; top: 0; left: 0; height: 100%; width: 232px; padding: 26px 14px; background: var(--nav-bg); border-right: 1px solid var(--line); z-index: 1000; overflow-y: auto; } body[data-theme="deco"] .nav-bar::before { content: "D ✦ P"; display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.16em; text-align: center; color: var(--accent); padding-bottom: 18px; margin-bottom: 10px; border-bottom: 1px solid var(--line); } .nav-bar ul { list-style: none; padding: 0; margin: 0; } .nav-bar ul li { margin-bottom: 6px; } .nav-bar ul li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--nav-item); font-family: var(--font-sans); font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em; position: relative; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .nav-bar ul li a .nav-icon { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; color: var(--accent); opacity: 0.85; transition: opacity 0.25s ease, transform 0.25s ease; } .nav-bar ul li a:hover { background: rgba(200, 164, 92, 0.10); color: var(--text); } body[data-theme="classic"] .nav-bar ul li a:hover { background: var(--nav-active-bg); color: #fff; } .nav-bar ul li a.active { background: var(--nav-active-bg); color: var(--nav-active-text); } body[data-theme="deco"] .nav-bar ul li a.active::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--accent); } .nav-bar ul li a.active .nav-icon { opacity: 1; transform: translateY(-1px); } /* --------------------------------------------------------------------- */ /* Main content */ /* --------------------------------------------------------------------- */ .main-content { margin-left: 232px; padding: 28px clamp(16px, 4vw, 48px) 64px; max-width: 1100px; } /* --------------------------------------------------------------------- */ /* Header / hero */ /* --------------------------------------------------------------------- */ .header { position: relative; text-align: center; margin-bottom: 30px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .header img { width: 100%; height: auto; display: block; border-radius: 0 !important; box-shadow: none !important; } body[data-theme="deco"] .header img { filter: saturate(0.92) contrast(1.02) brightness(0.82); } body[data-theme="deco"] .header::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 120%, rgba(200, 164, 92, 0.22), transparent 55%), linear-gradient(180deg, rgba(13, 19, 34, 0.25) 0%, rgba(13, 19, 34, 0.72) 100%); } .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 2; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 7vw, 4.2rem); letter-spacing: 0.02em; line-height: 1.05; text-shadow: 0 6px 26px rgba(0, 0, 0, 0.6); } body[data-theme="classic"] .overlay-text { font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } body[data-theme="deco"] .overlay-text::after { content: "MNL ✈ NYC · EST. 2026"; display: block; margin-top: 14px; font-family: var(--font-mono); font-size: clamp(0.6rem, 1.8vw, 0.8rem); font-weight: 400; letter-spacing: 0.3em; color: var(--accent-soft); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); } /* --------------------------------------------------------------------- */ /* Buttons & form controls */ /* --------------------------------------------------------------------- */ button { background: var(--btn-bg); color: var(--btn-text); padding: 11px 18px; border: none; border-radius: var(--btn-radius); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } button:hover { filter: brightness(1.06); transform: translateY(-1px); } input, select, textarea { width: 100%; padding: 12px 14px; margin-top: 8px; margin-bottom: 15px; border: 1px solid var(--input-border); border-radius: 12px; background-color: var(--input-bg); color: var(--input-text); font-family: var(--font-sans); font-size: 1rem; } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.18); } /* --------------------------------------------------------------------- */ /* Carousel / imagery */ /* --------------------------------------------------------------------- */ .carousel img { width: 100%; height: auto; max-width: 520px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); } /* --------------------------------------------------------------------- */ /* Countdown */ /* --------------------------------------------------------------------- */ .countdown { text-align: center; margin-bottom: 24px; } .countdown-timer { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .countdown-item { background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 12px 16px; border-radius: 14px; min-width: 72px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; } .countdown-item span { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; letter-spacing: 0; display: block; margin-bottom: 4px; color: var(--accent-soft); } /* --------------------------------------------------------------------- */ /* Informational sections (.about-section) */ /* --------------------------------------------------------------------- */ .about-section { max-width: 760px; margin: 0 auto; } body[data-theme="deco"] .about-section h3::after { content: ""; display: block; width: 64px; height: 2px; margin: 12px 0 0; background: linear-gradient(90deg, var(--accent), transparent); } .about-section > p { color: var(--muted); line-height: 1.7; } .about-section ul { list-style: none; padding: 0; margin: 22px 0; } .about-section li { background: var(--card-bg); border: 1px solid var(--line); margin-bottom: 12px; padding: 18px 20px; border-radius: var(--radius); box-shadow: var(--shadow); color: var(--card-text); line-height: 1.65; } .about-section li strong { color: var(--card-strong); font-weight: 600; } .about-section li ul { list-style: none; padding-left: 0; margin: 12px 0 0; } .about-section li ul li { background: var(--card-nested-bg); border: 1px solid var(--line-soft); padding: 12px 14px; border-radius: 10px; margin-top: 8px; color: var(--card-text); box-shadow: none; } .about-section h4 { color: var(--accent); text-align: center; margin-bottom: 18px; font-size: 1.4rem; } /* --------------------------------------------------------------------- */ /* Mobile — nav becomes a bottom dock */ /* --------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { .nav-bar { top: auto; bottom: 0; left: 0; height: auto; width: 100%; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-right: none; border-top: 1px solid var(--line); background: var(--nav-bg); overflow: visible; } body[data-theme="deco"] .nav-bar { background: rgba(12, 19, 38, 0.92); backdrop-filter: blur(12px); } .nav-bar::before { display: none; } .nav-bar ul { display: flex; justify-content: space-around; width: 100%; } .nav-bar ul li { margin-bottom: 0; flex: 1; } .nav-bar ul li a { flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; font-size: 0.66rem; letter-spacing: 0.04em; text-align: center; } body[data-theme="deco"] .nav-bar ul li a.active { background: rgba(200, 164, 92, 0.14); } body[data-theme="deco"] .nav-bar ul li a.active::before { display: none; } .nav-bar ul li a .nav-icon { width: 24px; height: 24px; flex-basis: 24px; } .main-content { margin-left: 0; padding: 18px 16px; margin-bottom: 76px; } }