/* ============================================================ Festival Circuit — Midnight Aurora shared theme Loaded by every sub-page. A "direction" is just the token blocks below; the primitives read from those variables. ============================================================ */ :root{ --bg:#181722; --bg2:#201e2e; --aurora1:rgba(139,108,255,.10); --aurora2:rgba(90,120,180,.09); --aurora3:rgba(120,110,150,.09); --glass:rgba(16,26,56,.62); --glass2:rgba(22,34,78,.70); --glass3:rgba(30,45,98,.80); --glass-brd:rgba(110,120,175,.16); --glass-hi:rgba(245,245,255,.05); --cardbg:rgba(16,26,56,.75); --cardbg2:rgba(22,34,78,.82); --text:#ece9f4; --muted:#a6a2ba; --faint:#726e88; --accent:#8B6CFF; --accent2:#6B4CE0; --ink:#16141e; --art:#E0598A; --market:#3FC7D9; --healing:#9B5FD9; --community:#4FD1A5; --rodeo:#D9843F; --open:#4FD1A5; --closed:#726e88; --good:#4FD1A5; --warn:#FFB067; --info:#4EA8FF; /* Text color to use ON TOP OF a solid fill of --closed/--warn (badges) - --ink alone only clears 3.73:1 on --closed, below the 4.5:1 WCAG AA text minimum; white clears 4.88:1. --open/--warn are light enough that --ink already passes on them directly, so only --closed needs its own token. */ --closed-ink:#ffffff; --blur:20px; --ease:cubic-bezier(.2,.7,.3,1); } body.light{ --bg:#eeedf5; --bg2:#e2e0ec; --aurora1:rgba(139,108,255,.14); --aurora2:rgba(90,120,180,.12); --aurora3:rgba(120,110,150,.10); --glass:rgba(255,254,255,.66); --glass2:rgba(255,254,255,.82); --glass3:rgba(255,252,255,.92); --glass-brd:rgba(90,80,150,.15); --glass-hi:rgba(255,255,255,.85); --text:#1a1826; --muted:#5f5b74; --faint:#918da8; --accent:#5A44C2; --accent2:#4C34A0; --ink:#16141e; --art:#B83A6A; --market:#1C8B9C; --healing:#7A3FB0; --community:#1F9E76; --rodeo:#A85A1E; --open:#1F9E76; --closed:#918da8; --good:#1F9E76; --warn:#c07a1e; --info:#1868C7; --closed-ink:#16141e; } *{box-sizing:border-box} /* Always reserve the scrollbar gutter, on EVERY page, whether or not that page scrolls. .topbar is position:fixed;left:0;right:0, so its width is the viewport MINUS any scrollbar - which meant the scrolling pages (Your CPK, Trust Layer, Submit, Pricing, Settings, Deadline Calendar) had a 1430px bar while the non-scrolling map/globe pages had a 1440px one, sliding the whole centred nav 5px sideways every time you toggled between the two kinds. overflow:hidden still counts as a scroll container, so this reserves the gutter on the map/globe pages too and every bar is now the same width. */ html{scrollbar-gutter:stable} html,body{margin:0;color:var(--text); font-family:var(--font-body);line-height:1.45} body{ background:#070d1e; background-attachment:fixed;padding-top:62px; } body.light{ background: radial-gradient(60vw 55vh at 8% -8%, var(--aurora2), transparent 60%), radial-gradient(55vw 50vh at 92% 4%, var(--aurora3), transparent 60%), radial-gradient(60vw 60vh at 50% 112%, var(--aurora1), transparent 62%), linear-gradient(160deg, var(--bg2), var(--bg) 60%); background-attachment:fixed; } /* Quiet dot texture, OPT-IN via (2026-09-27): the same treatment as index.html's .belowfold, for the content pages (App Tracker, Your CPK, Vendor View, Submit Your Event). Opt-in on purpose - this file is shared by pages whose look must not change underneath them. A fixed layer at z-index:-1 sits above the root background and below all page content, and pointer-events:none keeps it out of every interaction. 1x screens get bigger, brighter dots: a 1px dot anti-aliases to near-invisible there (see CLAUDE.md, the dot texture / star field notes). */ body.dotbg::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(circle,rgba(236,233,244,.075) 1px,transparent 1.5px); background-size:22px 22px;background-position:center top} @media(max-resolution:1.5dppx){body.dotbg::before{ background-image:radial-gradient(circle,rgba(236,233,244,.24) 1.2px,transparent 1.7px)}} body.light.dotbg::before{display:none} /* Never in print: Your CPK has "Print / Save as PDF", and a fixed layer would repeat the dots on every printed page of someone's press kit. */ @media print{body.dotbg::before{display:none}} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent);text-decoration:underline} ::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:20px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--glass3)} /* ---------- theme toggle ---------- */ .themebtn{background:var(--glass3);color:var(--text);border:1px solid var(--glass-brd);border-radius:20px; font-size:11px;padding:6px 12px;cursor:pointer;transition:.2s var(--ease);backdrop-filter:blur(8px)} .themebtn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px -4px var(--accent)} /* ---------- glass surfaces ---------- */ .panel,.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:15px; box-shadow:0 1px 0 var(--glass-hi) inset;backdrop-filter:blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter:blur(var(--blur)) saturate(1.2)} /* ---------- form controls ---------- */ input,textarea,select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--glass-brd); background:var(--glass);color:var(--text);font-size:13px;font-family:inherit;transition:.2s var(--ease); box-shadow:0 1px 0 var(--glass-hi) inset} textarea{resize:vertical} input::placeholder,textarea::placeholder{color:var(--faint)} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),0 0 22px -8px var(--accent)} select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238b93b5' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center} select:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--glass-brd))} option{background:var(--bg2);color:var(--text)} option:checked{background:var(--accent);color:#fff} option:hover{background:color-mix(in srgb,var(--accent) 25%,var(--bg2))} body.light option{background:#fff} body.light option:checked{background:var(--accent);color:#fff} body.light option:hover{background:color-mix(in srgb,var(--accent) 16%,#fff)} input[type=checkbox]{width:auto;box-shadow:none;accent-color:var(--accent)} input[type=date]{color-scheme:dark} body.light input[type=date]{color-scheme:light} /* ---------- buttons ---------- */ .btn{display:inline-block;color:var(--text); font-weight:800;border:1.5px solid transparent;border-radius:999px;padding:10px 15px;font-size:12.5px;cursor:pointer; transition:.2s var(--ease); background:linear-gradient(var(--glass2),var(--glass2)) padding-box, linear-gradient(135deg,var(--accent),var(--accent2)) border-box; box-shadow:0 0 18px -5px color-mix(in srgb,var(--accent) 70%,transparent), inset 0 0 12px -7px var(--accent)} .btn:hover{transform:translateY(-1px);text-decoration:none;color:var(--text); box-shadow:0 0 26px -4px color-mix(in srgb,var(--accent) 82%,transparent),inset 0 0 14px -6px var(--accent)} .btn:active{transform:translateY(0);box-shadow:inset 0 0 13px -4px var(--accent)} .btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)} .btn.ghost{background:var(--glass);color:var(--text);border:1px solid var(--glass-brd);font-weight:700;box-shadow:0 1px 0 var(--glass-hi) inset} .btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none;box-shadow:0 0 14px -6px var(--accent)} .pbtn{background:var(--glass);color:var(--text);border:1px solid var(--glass-brd);border-radius:10px; font-size:11px;padding:6px 11px;cursor:pointer;transition:.18s var(--ease)} .pbtn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .pbtn.primary{color:var(--text);font-weight:800;border:1.5px solid transparent; background:linear-gradient(var(--glass2),var(--glass2)) padding-box, linear-gradient(135deg,var(--accent),var(--accent2)) border-box; box-shadow:0 0 16px -6px color-mix(in srgb,var(--accent) 70%,transparent), inset 0 0 10px -7px var(--accent)} .pbtn.primary:hover{color:var(--text);transform:translateY(-1px); box-shadow:0 0 22px -4px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 0 12px -6px var(--accent)} .pbtn.primary:active{transform:translateY(0);box-shadow:inset 0 0 12px -4px var(--accent)} .pbtn.primary:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)} .cta{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--ink); font-weight:800;padding:9px 15px;border-radius:12px;font-size:12.5px;border:none;cursor:pointer; box-shadow:0 0 20px -6px var(--accent)} /* ---------- role group heads ---------- */ .ghead{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--muted)} .ghead .gdot{width:11px;height:11px;border-radius:4px;box-shadow:0 0 8px 0 currentColor} /* ---------- glowing chip pills ---------- */ .pill{cursor:pointer;user-select:none;border:1px solid var(--glass-brd);background:var(--glass);color:var(--text); padding:6px 11px;border-radius:999px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:6px; transition:.18s var(--ease)} .pill .dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px 0 currentColor;transition:.18s} /* Guarded to real hover-capable pointers only (fixed 2026-09-27): without this, tapping a pill on a touch device engages :hover with no mouseleave to ever clear it - "sticky hover" - so a de-selected pill kept its lifted/colored-border look even after JS correctly removed .on. The .on style itself was never the bug; this was a second, unrelated highlight standing in for it. */ @media (hover:hover) and (pointer:fine){ .pill:hover{border-color:var(--pillc,currentColor);transform:translateY(-1px)} } .pill:focus-visible,.clearbtn:focus-visible{outline:2px solid var(--pillc,var(--accent));outline-offset:2px} .pill.on{font-weight:800;color:var(--text); border:1.5px solid color-mix(in srgb,var(--pillc,currentColor) 60%,transparent); background:transparent!important; box-shadow:0 0 11px -4px var(--pillc,currentColor), inset 0 0 9px -8px var(--pillc,currentColor)} .pill.on .dot{opacity:1} /* ---------- neon tags ---------- */ .tag,a.tag{font-size:9.5px;padding:3px 9px;border-radius:20px;color:currentColor;font-weight:700;letter-spacing:.01em; border:1.5px solid color-mix(in srgb,currentColor 58%,transparent);background:transparent; box-shadow:0 0 9px -5px currentColor, inset 0 0 8px -8px currentColor;text-decoration:none;display:inline-block} a.tag:hover{box-shadow:0 0 13px -3px currentColor, inset 0 0 8px -8px currentColor;text-decoration:none} a.tag:focus{outline:none} a.tag:focus-visible{outline:2px solid color-mix(in srgb,currentColor 55%,transparent);outline-offset:2px} .tag.closed,.tag.tclosed{background:transparent!important;color:var(--closed); border:1px dashed color-mix(in srgb,var(--closed) 55%,transparent);text-decoration:line-through;box-shadow:none;font-weight:600} /* ---------- badges ---------- */ .badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.02em; padding:3px 9px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-brd);color:var(--text)} .badge.gold{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent); border-color:color-mix(in srgb,var(--accent) 55%,transparent)} .badge.green{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good); border-color:color-mix(in srgb,var(--good) 55%,transparent)} .badge.purple{background:color-mix(in srgb,var(--community) 16%,transparent);color:var(--community); border-color:color-mix(in srgb,var(--community) 55%,transparent)} /* ---------- chips (meta) ---------- */ .chip{font-size:9.5px;padding:3px 9px;border-radius:20px;border:1px solid var(--glass-brd);color:var(--muted); background:var(--glass);letter-spacing:.02em} /* ---------- shared page nav ---------- */ .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;padding:11px 20px; background:linear-gradient(180deg,rgba(16,20,40,.82),rgba(12,16,32,.8)); backdrop-filter:blur(var(--blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.2); border-bottom:1px solid var(--glass-brd);box-shadow:0 1px 0 var(--glass-hi) inset;position:fixed;top:0;left:0;right:0;z-index:1100;flex-wrap:wrap} /* ---------- nav geometry (see also: the duplicated copy of these rules inside festival-applications-map.html, which does NOT load this file) ---------- The brand and the account box occupy IDENTICAL fixed-width slots, so .navlinks (flex:1 1 0%) lands dead-centre on the viewport by arithmetic - no translateX() fudge factor, and no dependence on how wide the account box happens to be on this page or for this user. Both slots are reserved HERE, in CSS, and never by account.js. That is the whole fix for the long-standing "nav jolt": #acctbox is a static div in every page's markup, but it had no width until account.js injected its stylesheet and filled it, so the first painted frame gave .navlinks ~111px too much room (logged out) or ~173px too much (logged in) and the pills visibly snapped left the instant that script ran - and when logged in they also wrapped to a second row. With the slot reserved up front, frame 1 is already the final layout. --navslot must stay >= the brand's intrinsic width and >= the widest the account box can get; .acctname below is ellipsised so a long display name can never push past it. BACK TO 200px HERE (2026-09-09) - this is the SHARED default, applying to every page that loads this file, including several (submit-festival.html, pricing.html, settings.html, deadline-calendar.html, claim-listing.html, coyote-press-kit.html, and the retired 2D map/planner pages) that never got the mascot icon at all. A real incident, not a hypothetical: this var was bumped straight to 230 then 240 to fit the icon on the six pages that DO show it, and that silently narrowed every OTHER theme page's nav-pill room too - Alex reported submit-festival.html's nav wrapping to a second row and overlapping the page content below it, at a window width that used to render fine. Fixing the six pages' own need by widening a var every non-mascot page also depends on was the actual bug. The fix: `--navslot` stays 200 HERE (unaffected, exactly as before this whole mascot feature existed), and the six pages that show the icon each carry their OWN `:root{--navslot:240px}` override in their own inline `