/* ============================================================ dojo.css (MERGED) - Merged: subdojo.css + second css - Deduped variables + base layout - Fixed invalid selectors: card.cardLink -> .card.cardLink - Supports both .grid and .cards layouts - Supports both .priceRow and .price ============================================================ */ /* ======================================== 1) THEME / GLOBAL TOKENS ======================================== */ :root{ --bg: #0b0c10; --panel: rgba(15,16,22,0.78); --panel2: rgba(15,16,22,0.62); --text: #f4f4f6; --muted: rgba(244,244,246,0.75); --line: rgba(244,244,246,0.12); --accent: #ffcc66; --accent2: #c53030; --radius: 18px; --shadow: 0 18px 60px rgba(0,0,0,0.55); --maxw: 1120px; /* Per-page background image (preferred): Set in each page : :root { --bg-image: url("assets/background4.png"); } */ --bg-image: url("assets/background4.png"); } *{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: var(--bg); } /* ======================================== 2) BACKGROUND / WRAP ======================================== */ .bg{ min-height: 100%; background: radial-gradient(1200px 600px at 20% 10%, rgba(197,48,48,0.20), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(255,204,102,0.16), transparent 55%), linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.92)), var(--bg-image); background-size: cover; background-position: center; background-attachment: fixed; } .wrap{ width: min(var(--maxw), 92vw); margin: 0 auto; padding: 28px 0 70px; } /* ======================================== 3) HEADER / NAV ======================================== */ /* ✅ FIXED: - header becomes 2 rows automatically (brand row + nav row) - removed min-height:450px (that was nuking layout) - keeps your existing markup (brand + nav) with minimal change */ .topbar{ display: flex; flex-direction: column; /* <-- makes nav the second row */ align-items: stretch; justify-content: flex-start; gap: 10px; padding: 10px 16px; /* normal header padding */ min-height: 0; /* <-- removes the forced giant header */ border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); backdrop-filter: blur(10px); } .brand{ display: flex; align-items: center; gap: 12px; min-width: 0; } /* If you still use .mark for DD, keep it */ .mark{ width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(197,48,48,0.95), rgba(255,204,102,0.95)); color: #101018; font-weight: 900; letter-spacing: 0.5px; flex: 0 0 auto; } /* ✅ IMPORTANT: If you are using a BIG logo image in the header, it MUST be constrained. This prevents it from pushing nav away / wrapping weird. Use class="brandLogo" on the if possible. */ .brand img.brandLogo{ max-width: 100%; height: auto; display: block; } /* If you did NOT add a class, this still protects you: any img inside .brand */ .brand img{ max-width: 100%; height: auto; display: block; } .brand h1{ margin: 0; font-size: 16px; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand p{ margin: 2px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; /* <-- looks correct as row 2 */ padding-top: 8px; border-top: 1px solid var(--line); } .nav a{ color: var(--muted); text-decoration: none; font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid transparent; } .nav a:hover{ color: var(--text); border-color: var(--line); background: rgba(255,255,255,0.04); } /* ======================================== 4) HERO ======================================== */ .hero{ margin-top: 18px; padding: 28px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .heroGrid{ display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 18px; align-items: start; } @media (max-width: 900px){ .heroGrid{ grid-template-columns: 1fr; } } .kicker{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.86); padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.04); margin-bottom: 10px; } .dot{ width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,204,102,0.14); } h2{ margin: 0 0 10px; font-size: clamp(26px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.6px; } .lead{ margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 62ch; } /* Bullets (from file #2) */ .bullets{ margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 62ch; } .bullets li{ display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.03); } .check{ width: 18px; height: 18px; border-radius: 6px; background: rgba(255,204,102,0.18); border: 1px solid rgba(255,204,102,0.35); flex: 0 0 auto; margin-top: 2px; } .bullets strong{ color: rgba(255,255,255,0.92); } /* ======================================== 5) CTA / BUTTONS ======================================== */ .ctaCard{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(10,10,14,0.55); padding: 16px; position: sticky; top: 14px; } .ctaCard h3{ margin: 0 0 6px; font-size: 16px; letter-spacing: -0.2px; } .ctaCard p{ margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.45; } .btnRow{ display: flex; flex-direction: column; gap: 10px; } .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; } .btn.primary{ border-color: rgba(255,204,102,0.45); background: linear-gradient(140deg, rgba(255,204,102,0.22), rgba(197,48,48,0.16)); } /* hover polish from file #2 */ .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); } .fineprint{ margin-top: 12px; font-size: 12px; color: rgba(244,244,246,0.62); line-height: 1.45; border-top: 1px solid var(--line); padding-top: 12px; } /* ======================================== 6) SECTIONS / CARDS ======================================== */ .section{ margin-top: 18px; padding: 22px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(10px); } .section h3{ margin: 0 0 10px; font-size: 18px; letter-spacing: -0.3px; } .section p{ margin: 0 0 14px; color: var(--muted); line-height: 1.6; } /* Support BOTH naming conventions: - .grid (file #1) - .cards (file #2) */ .grid, .cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 980px){ .grid, .cards{ grid-template-columns: 1fr; } } .card{ padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.03); } /* Tag: support .tag and .card .tag */ .tag, .card .tag{ display: inline-block; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: rgba(255,255,255,0.86); background: rgba(255,255,255,0.03); margin-bottom: 10px; } .card h4{ margin: 0 0 6px; font-size: 16px; letter-spacing: -0.2px; } .card ul{ margin: 10px 0 0; padding-left: 18px; color: rgba(244,244,246,0.74); line-height: 1.55; } /* Support BOTH .priceRow (file #1) and .price (file #2) */ .priceRow, .price{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .price strong{ font-size: 15px; color: rgba(255,255,255,0.92); } /* pill/path (file #2) */ .path{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .pill{ border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,0.03); color: rgba(244,244,246,0.86); font-size: 13px; } /* Full-card links */ a.card.cardLink{ display: block; text-decoration: none; color: inherit; } a.card.cardLink:hover{ text-decoration: none; } /* FIXED: these were invalid in file #2 (missing the dot) */ .card.cardLink{ cursor: pointer; } .card.cardLink:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); } .card.cardLink:active{ transform: translateY(0px); } /* Tag links (file #2) */ .tagLink{ display: inline-block; text-decoration: none; color: inherit; } .tagLink:hover{ border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); } /* ======================================== 7) FAQ (details/summary) ======================================== */ details{ border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.03); padding: 12px 12px; } details + details{ margin-top: 10px; } summary{ cursor: pointer; font-weight: 650; color: rgba(255,255,255,0.92); } details p{ margin: 10px 0 0; color: rgba(244,244,246,0.74); } /* ======================================== 8) FOOTER ======================================== */ footer{ margin-top: 18px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10,10,14,0.55); color: rgba(244,244,246,0.70); font-size: 12px; line-height: 1.5; text-align: center; } .muted{ color: var(--muted); } .accent{ color: var(--accent); } /* ======================================== 9) DOJO GUIDE (Floating Avatar) (unchanged) ======================================== */ /* ...everything below here remains exactly as you had it for guide/monk... */ /* ======================================== 9) DOJO GUIDE (Floating Avatar) FIXES: - Ensure guide sits above monk if both exist - Ensure avatar image is on TOP of glow layers - Ensure avatar size matches button so nothing bleeds behind + NEW: - Bubble overlays (absolute) and does not push layout - Button slides left when open to "make room" ======================================== */ .dojoGuide{ position: fixed; right: 16px; bottom: 16px; z-index: 10001; /* guide above monk */ display: flex; align-items: flex-end; gap: 12px; } .dojoGuideBtn{ width: 56px; height: 56px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(140deg, rgba(197,48,48,0.92), rgba(255,204,102,0.92)); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; padding: 0; position: relative; overflow: visible; transform: translateZ(0); transition: transform .18s ease; } .dojoGuideBtn:active{ transform: translateY(1px) scale(0.99); } .dojoGuideAvatar{ width: 96px; height: 96px; border-radius: 18px; object-fit: cover; display: block; position: relative; z-index: 3; pointer-events: none; } .dojoGuideBubble{ width: min(360px, calc(92vw - 90px)); border-radius: 16px; border: 1px solid var(--line); background: rgba(15,16,22,0.92); backdrop-filter: blur(10px); box-shadow: var(--shadow); padding: 12px; transform-origin: bottom right; transform: scale(0.98); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; overflow: hidden; position: absolute; right: 72px; bottom: 0; } .dojoGuide.open .dojoGuideBubble{ opacity: 1; transform: scale(1); pointer-events: auto; } .dojoGuide.open .dojoGuideBtn{ transform: translateX(-44px); } .dojoGuideHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .dojoGuideTitle{ font-size: 13px; letter-spacing: -0.2px; color: rgba(255,255,255,0.92); } .dojoGuideClose{ border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); border-radius: 10px; padding: 6px 10px; cursor: pointer; } .dojoGuideBody{ padding: 10px 2px 12px; color: rgba(244,244,246,0.82); line-height: 1.5; font-size: 14px; } .dojoGuideActions{ display:flex; gap:10px; justify-content:flex-end; } .dojoGuideLink, .dojoGuideNext{ border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); border-radius: 12px; padding: 9px 12px; font-weight: 650; font-size: 13px; cursor: pointer; text-decoration: none; } .dojoGuideNext{ background: transparent; } .dojoGuideLink:hover, .dojoGuideNext:hover{ background: rgba(255,255,255,0.06); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce){ .dojoGuideBubble{ transition:none; } .dojoGuideBtn{ transition:none; } .dojoGuideLink:hover, .dojoGuideNext:hover{ transform:none; } } /* ======================================== DOJO MONK (dojoMonk) ======================================== */ :root{ --monk-float: 10px; --monk-pop-ms: 240ms; --monk-breathe-ms: 3600ms; --monk-glow-ms: 700ms; } #dojoMonk{ position: fixed; right: 108px; bottom: 108px; z-index: 10000; display: flex; align-items: flex-end; gap: 10px; pointer-events: auto; } #monkMessageWrap{ max-width: 260px; background: rgba(20,20,22,0.92); color: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 10px 12px; line-height: 1.25; font-size: 14px; box-shadow: 0 14px 28px rgba(0,0,0,.32); transform-origin: 85% 100%; position: relative; } #monkMessageWrap::after{ content: ""; position: absolute; right: 52px; bottom: -7px; width: 12px; height: 12px; background: rgba(20,20,22,0.92); border-right: 1px solid rgba(255,255,255,0.10); border-bottom: 1px solid rgba(255,255,255,0.10); transform: rotate(45deg); } #dojoMonk .monk-avatar{ width: 104px; height: 104px; border-radius: 999px; transform: translateZ(0); filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation: monkFloat var(--monk-breathe-ms) ease-in-out infinite; cursor: pointer; } .monk-pop{ animation: monkPop var(--monk-pop-ms) ease-out; } .monk-glow{ animation: monkGlow var(--monk-glow-ms) ease-out; } .monk-thinking{ opacity: .85; letter-spacing: 1px; } @keyframes monkFloat{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(calc(var(--monk-float) * -1)); } } @keyframes monkPop{ 0%{ transform: scale(.96) translateY(4px); opacity: 0; } 100%{ transform: scale(1) translateY(0); opacity: 1; } } @keyframes monkGlow{ 0%{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); } 35%{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,255,255,.18)); } 100%{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); } } @media (prefers-reduced-motion: reduce){ #dojoMonk .monk-avatar{ animation: none !important; } .monk-pop, .monk-glow{ animation: none !important; } } /* ============================================================ Guide glow/aura + seat pulse (unchanged) (your existing code continues…) ============================================================ */ /* Button aura ring */ .dojoGuideBtn::before{ content:""; position:absolute; inset:-10px; border-radius: 22px; background: radial-gradient(circle at 35% 35%, rgba(255,204,102,0.28), transparent 60%), radial-gradient(circle at 70% 70%, rgba(197,48,48,0.22), transparent 62%); filter: blur(10px); opacity: 0.55; z-index: 1; animation: guidePulse 2400ms ease-in-out infinite; } .dojoGuideBtn::after{ content:""; position:absolute; inset:0; border-radius: 18px; border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 10px 30px rgba(0,0,0,0.35); pointer-events:none; z-index: 2; } .dojoGuide.open .dojoGuideBubble{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.10), 0 0 28px rgba(255,204,102,0.16), 0 0 42px rgba(197,48,48,0.12); border-color: rgba(255,255,255,0.14); animation: guideFloat 4200ms ease-in-out infinite; } .dojoGuideBubble::before{ content:""; position:absolute; top:-30%; left:-60%; width: 70%; height: 160%; background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,0.07) 45%, rgba(255,255,255,0.02) 55%, transparent 100% ); transform: rotate(6deg); opacity: 0; pointer-events:none; } .dojoGuide.open .dojoGuideBubble::before{ opacity: 1; animation: guideShine 5200ms ease-in-out infinite; } .dojoGuideBtn:hover{ transform: translateY(-1px) scale(1.01); } .dojoGuideBtn:active{ transform: translateY(0px) scale(0.99); } @keyframes guidePulse{ 0%,100% { opacity: 0.42; transform: scale(0.98); } 50% { opacity: 0.70; transform: scale(1.03); } } @keyframes guideFloat{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes guideShine{ 0% { transform: translateX(0) rotate(6deg); } 55% { transform: translateX(220%) rotate(6deg); } 100% { transform: translateX(220%) rotate(6deg); } } @media (prefers-reduced-motion: reduce){ .dojoGuideBtn::before, .dojoGuide.open .dojoGuideBubble, .dojoGuide.open .dojoGuideBubble::before{ animation: none !important; } .dojoGuideBtn:hover, .dojoGuideBtn:active{ transform: none; } } .dojoGuide.seatAlert .dojoGuideBubble{ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 36px rgba(255,204,102,0.28), 0 0 70px rgba(197,48,48,0.20); border-color: rgba(255,255,255,0.18); } .dojoGuide.seatAlert .dojoGuideBtn::before{ opacity: 0.9; transform: scale(1.08); } .dojoGuide.urgentSeats .dojoGuideBtn{ animation: seatPulse 1.1s ease-in-out 2; } @keyframes seatPulse{ 0%{ transform: scale(1); box-shadow: 0 0 0 rgba(255,204,102,0); } 40%{ transform: scale(1.06); box-shadow: 0 0 20px rgba(255,204,102,0.55); } 70%{ transform: scale(1.03); } 100%{ transform: scale(1); box-shadow: 0 0 0 rgba(255,204,102,0); } }