/* ------------------------------------------------------------------ * * Every colour on the site resolves through these tokens. Light is the * default and lives on bare :root; dark is the previous scheme, applied * only when the toggle stamps data-theme="dark" on . * ------------------------------------------------------------------ */ :root{ /* surfaces */ --bg:#ffffff; --card:#f7f8fa; --card-hover:#eef1f6; --card-open:#f2f6ff; --card-shut:#f4f5f7; --card-sunk:#f0f2f7; --cal-head:#eef1f7; --track:#e8ebf2; --input-bg:#ffffff; --nav-bg:rgba(255,255,255,.92); /* lines */ --line:#dfe3ec; --line-soft:#e9ecf3; /* ink */ --text:#1a1a2e; --text-2:#3d4761; --muted:#5b6780; --on-accent:#ffffff; --badge-ink:#ffffff; --badge-ink-high:#ffffff; /* brand + state */ --accent:#2563eb; --accent-hover:#1d4ed8; --low:#15803d; --mid:#b45309; --high:#b91c1c; --avg:#a16207; --closed:#8a93a6; --accent-none:#c3cad8; /* shows, events, tickets */ --show:#6d28d9; --show-ink:#5b21b6; --show-bg:rgba(109,40,217,.10); --show-line:rgba(109,40,217,.30); --closed-why:#6d28d9; --evt:#9333ea; --evt-ink:#6b21a8; --evt-alt-ink:#475569; --evt-alt-line:#94a3b8; --tier-e:#eab308; --tier-d:#64748b; --tier-c:#c2410c; --tier-b:#94a3b8; --tier-a:#0f766e; --tier-s:#ea580c; --tier-ink-e:#1a1a2e; --tier-ink-d:#ffffff; --tier-ink-c:#ffffff; --tier-ink-b:#ffffff; --tier-ink-a:#ffffff; --tier-ink-s:#ffffff; /* tints */ --accent-05:rgba(37,99,235,.05); --accent-06:rgba(37,99,235,.06); --accent-08:rgba(37,99,235,.07); --accent-15:rgba(37,99,235,.14); --accent-22:rgba(37,99,235,.16); --accent-25:rgba(37,99,235,.22); --accent-35:rgba(37,99,235,.32); --low-16:rgba(21,128,61,.14); --low-45:rgba(21,128,61,.28); --low-6:rgba(21,128,61,.5); --high-16:rgba(185,28,28,.12); --high-45:rgba(185,28,28,.26); --high-6:rgba(185,28,28,.5); --white-05:rgba(15,23,42,.04); --white-13:rgba(15,23,42,.06); --white-15:rgba(15,23,42,.08); --white-28:rgba(15,23,42,.14); --shadow:rgba(15,23,42,.14); /* ai panel */ --ai-1:#eef2ff; --ai-2:#f5f0ff; --ai-3:#fdf2f8; --ai-ink:#3d4761; --ai-glow-a:rgba(37,99,235,.14); --ai-glow-b:rgba(219,39,119,.10); /* photo placeholder */ --photo-bg:#eef1f6; --photo-ink:#8a93a6; --photo-line:#dfe3ec; } :root[data-theme=dark]{ --bg:#1a1a2e; --card:#16213e; --card-hover:#1b2540; --card-open:#1b2b4d; --card-shut:#131a2b; --card-sunk:#141d33; --cal-head:#1b2440; --track:#0f1526; --input-bg:#0f172c; --nav-bg:rgba(26,26,46,.94); --line:#24325c; --line-soft:#1e2740; --text:#e8ecf5; --text-2:#cfd8f0; --muted:#93a1c0; --on-accent:#0d1220; --badge-ink:#0d1220; --badge-ink-high:#ffffff; --accent:#4fc3f7; --accent-hover:#4bb4e6; --low:#2ecc71; --mid:#e67e22; --high:#e74c3c; --avg:#f1c40f; --closed:#5d6d7e; --accent-none:#3a4a72; --show:#7e57c2; --show-ink:#c9b6e8; --show-bg:rgba(126,87,194,.22); --show-line:rgba(126,87,194,.5); --closed-why:#b9a7d9; --evt:#ba68c8; --evt-ink:#d7b9e8; --evt-alt-ink:#9fb4d8; --evt-alt-line:#4a5f8f; --tier-e:#f5c518; --tier-d:#b8c4e0; --tier-c:#d3905a; --tier-b:#5d6d7e; --tier-a:#7fb3a8; --tier-s:#f26b3a; --tier-ink-e:#1a1a2e; --tier-ink-d:#1a1a2e; --tier-ink-c:#1a1a2e; --tier-ink-b:#e8ecf5; --tier-ink-a:#1a1a2e; --tier-ink-s:#1a1a2e; --accent-05:rgba(79,195,247,.05); --accent-06:rgba(79,195,247,.06); --accent-08:rgba(79,195,247,.08); --accent-15:rgba(79,195,247,.15); --accent-22:rgba(79,195,247,.22); --accent-25:rgba(79,195,247,.25); --accent-35:rgba(79,195,247,.35); --low-16:rgba(46,204,113,.16); --low-45:rgba(46,204,113,.45); --low-6:rgba(46,204,113,.6); --high-16:rgba(231,76,60,.16); --high-45:rgba(231,76,60,.45); --high-6:rgba(231,76,60,.6); --white-05:rgba(255,255,255,.05); --white-13:rgba(255,255,255,.13); --white-15:rgba(255,255,255,.15); --white-28:rgba(255,255,255,.28); --shadow:rgba(0,0,0,.35); --ai-1:#1f2a5c; --ai-2:#3b2263; --ai-3:#5b2a6b; --ai-ink:#cfd8f0; --ai-glow-a:rgba(79,195,247,.22); --ai-glow-b:rgba(240,98,146,.18); --photo-bg:#141d33; --photo-ink:#6b7a9c; --photo-line:#24325c; } *{box-sizing:border-box} /* color-scheme is what actually tells the browser to paint its own chrome -- status bar, scrollbars, form controls -- dark. The meta tag alone does not do it, and neither does a themed body. */ :root{color-scheme:light} :root[data-theme=dark]{color-scheme:dark} /* html, not just body: on iOS the overscroll/rubber-band area above the page takes the html background, which is the white bar that kept showing. */ html{background:var(--bg)} body{margin:0;background:var(--bg);color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-text-size-adjust:100%} a{color:var(--accent)} .wrap{max-width:1240px;margin:0 auto;padding:24px 20px 72px} header h1{margin:0 0 2px;font-size:28px;letter-spacing:-.6px} header .tagline{color:var(--muted);font-size:14px;margin-bottom:6px} header .sub{color:var(--muted);font-size:13px} nav{position:sticky;top:0;z-index:20;background:var(--nav-bg); padding-top:env(safe-area-inset-top,0px); backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-bottom:24px} nav .inner{max-width:1240px;margin:0 auto;padding:8px 20px;display:flex; gap:18px;flex-wrap:wrap;align-items:center} nav a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600; white-space:nowrap} nav a:hover{color:var(--accent)} /* brand lockup: mark + wordmark, always a link back to the site root */ nav .brand{display:inline-flex;align-items:center;gap:9px;color:var(--text); font-weight:700;font-size:15.5px;letter-spacing:.2px;margin-right:2px} nav .brand:hover{color:var(--text)} nav .brand:hover .mark{filter:brightness(1.08)} nav .brand .mark{flex:none;border-radius:7px} nav .region{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.4px; text-transform:uppercase;padding:3px 8px;border:1px solid var(--line); border-radius:999px;margin-right:6px;white-space:nowrap} nav .sep{flex:1} section{margin:36px 0 0} h2{font-size:17px;margin:0 0 4px;display:flex;align-items:center;gap:10px} .hint{color:var(--muted);font-size:12.5px;margin:0 0 14px} .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px} .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))} .park{border-left:4px solid var(--closed)} .card.park{container-type:inline-size} /* Park page hero. Taller than the 85px card strip because there is room, and the whole block is removed if the file is missing so the page does not keep a blank band. No placeholder here -- on a detail page an empty grey strip reads as broken, whereas on the grid it kept the cards aligned. */ /* ---- Orlando home hero -------------------------------------------- * * Geometry is measured from the artwork itself (1916x821): the frosted bar * occupies 68.9%-84.3% of the height, and each stat's number begins at a * known x. The live numbers are painted on top of the baked-in ones, so the * image must keep its bar but its printed figures are never what you see. * Container-query units tie the type to the banner's own width, so the * overlay tracks the artwork at every size instead of drifting. */ .hero{position:relative;border-radius:14px;overflow:hidden;isolation:isolate; aspect-ratio:1916/821;width:100%;background:var(--photo-bg); container-type:inline-size} .hero .heroimg{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;object-position:center} .hero.noimg .heroimg{display:none} .herostats{position:absolute;inset:0;z-index:1;pointer-events:none} /* Numbers only. The artwork keeps its own icons and PARKS/ATTRACTIONS labels; only the five figures were erased from the image, so this overlay must always render -- hiding it at any breakpoint would leave blank slots. */ .herostats b{position:absolute;top:72.1%;display:block;white-space:nowrap; color:#0e1f47;font-weight:800;letter-spacing:-.01em; font-size:2.32cqw;line-height:1} @media (max-width:560px){ .hero{border-radius:10px} } /* The h1 still has to exist for search and screen readers even though the wordmark is painted into the artwork. */ .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---- month calendar ------------------------------------------------ * * Dense by design: seven columns, one line of hours and short tags per day. * Every colour is a token, so it follows the light/dark toggle. */ .resbtn{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px; padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:650; text-decoration:none;background:var(--accent);color:var(--on-accent); border:1px solid var(--accent); transition:filter .12s ease,box-shadow .12s ease} .resbtn:hover{filter:brightness(1.07);box-shadow:0 2px 10px var(--shadow)} .resbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .resbtn svg{flex:none;opacity:.9} .mcalbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px} .mnav{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--text); text-decoration:none;font-size:17px;line-height:1;flex:none} .mnav:hover{border-color:var(--accent);color:var(--accent)} .mnav.off{opacity:.35;pointer-events:none} .mlabel{font-size:15px;font-weight:700;min-width:150px} .mkey{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto;color:var(--muted);font-size:11px} .mkey span{display:inline-flex;align-items:center;gap:5px} .mkey i{width:9px;height:9px;border-radius:3px;display:inline-block} .mkey i.k-extra{background:var(--accent)} .mkey i.k-evt{background:var(--evt)} .mkey i.k-none{background:var(--line);border:1px solid var(--line-soft)} .mkey i.k-black{background:var(--high-16);border:1px solid var(--high)} .mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:12px;overflow:hidden} .mhd{background:var(--card-sunk);color:var(--muted);font-size:10px;font-weight:700; text-transform:uppercase;letter-spacing:.5px;text-align:center;padding:7px 2px} .mday{background:var(--card);min-height:74px;padding:5px 6px 6px;display:flex; flex-direction:column;gap:2px;min-width:0} .mday.out{background:var(--card-shut);opacity:.5} .mday.past{opacity:.62} .mday.today{box-shadow:inset 0 0 0 2px var(--accent)} .mday.evt{background:linear-gradient(180deg,var(--show-bg) 0 3px,var(--card) 3px)} .mnum{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.1} .mday.out .mnum{color:var(--muted);font-weight:600} .mday.today .mnum{color:var(--accent)} .mhrs{font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mhrs.dash{color:var(--muted)} .mtag{font-size:9.5px;font-weight:700;line-height:1.3;padding:1px 5px;border-radius:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .mtag.extra{background:var(--accent-15);color:var(--accent)} .mtag.evt{background:var(--show-bg);color:var(--show-ink);border:1px solid var(--show-line)} /* Pass status: solid, colour-coded, never strikethrough. One chip per tier, always in the same order, so position alone identifies the pass. */ .mpass{display:flex;gap:2px;margin-top:1px} .mpass i{flex:1 1 0;min-width:0;font-style:normal;font-size:8.5px;font-weight:800; letter-spacing:.3px;text-align:center;line-height:1.55;border-radius:3px; color:#fff;cursor:default} /* Red is reserved for the one state that stops you going. "Reservation required" is the everyday case (5 of every 6 park-days), so it is a calm informational blue rather than a warning colour -- otherwise the whole calendar reads as alarming and the real blackouts stop standing out. */ .st-blocked{background:#c0392b} .st-res{background:#3b6bb5} .st-open{background:#15803d} .st-none{background:var(--closed)} :root[data-theme=dark] .st-blocked{background:#e74c3c;color:#1a1a2e} :root[data-theme=dark] .st-res{background:#4a7fc9;color:#eaf1ff} :root[data-theme=dark] .st-open{background:#2ecc71;color:#1a1a2e} .mkey2{margin-left:0;width:100%;align-items:center} .mkey2 b{color:var(--text);font-size:11px} .mkey .sw{width:11px;height:11px;border-radius:3px;display:inline-block} .mcodes{color:var(--muted);font-size:10.5px} /* day cells are real buttons so they are keyboard-reachable; reset the browser's button chrome rather than restyling every property */ button.mday{font:inherit;text-align:left;border:0;cursor:pointer;appearance:none; width:100%;color:inherit} button.mday:hover{background:var(--card-hover)} button.mday:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:1} .mday.sel{box-shadow:inset 0 0 0 2px var(--accent);background:var(--card-open)} .mday.today.sel{box-shadow:inset 0 0 0 2px var(--accent)} /* Inline panel rather than a modal: no focus trap to get wrong, and on a phone it simply appears under the grid instead of covering it. */ .mdetail{margin:12px 0 0;border:1px solid var(--line);border-radius:12px; background:var(--card);padding:14px 16px} .mdetail .dhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)} .mdetail .dtitle{font-size:14.5px;font-weight:700} .mdetail .dclose{margin-left:auto;background:none;border:1px solid var(--line); color:var(--muted);border-radius:7px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer} .mdetail .dclose:hover{color:var(--text);border-color:var(--accent)} .drow{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line-soft)} .drow:first-of-type{border-top:0} .drow .dk{flex:0 0 128px;font-size:11px;text-transform:uppercase;letter-spacing:.5px; font-weight:700;color:var(--muted)} .drow .dv{font-size:13.5px;font-variant-numeric:tabular-nums} .drow.is-extra .dk{color:var(--accent)} .drow.is-evt .dk{color:var(--show-ink)} .drow.is-pass .dk{color:var(--text)} .dbadge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px; font-size:11.5px;font-weight:800;letter-spacing:.3px;color:#fff} .dbadge.st-blocked{background:#c0392b} .dbadge.st-res{background:#3b6bb5} .dbadge.st-open{background:#15803d} .dbadge.st-none{background:var(--closed)} :root[data-theme=dark] .dbadge.st-blocked{background:#e74c3c;color:#1a1a2e} :root[data-theme=dark] .dbadge.st-res{background:#4a7fc9;color:#eaf1ff} :root[data-theme=dark] .dbadge.st-open{background:#2ecc71;color:#1a1a2e} .dpasshead{margin:12px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.5px; font-weight:700;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:10px} .mdetail .dnone{color:var(--muted);font-size:12.5px;margin:2px 0 0} @media (max-width:640px){ .drow{flex-direction:column;gap:1px;padding:7px 0} .drow .dk{flex:none} } .mfoot{color:var(--muted);font-size:12px;margin:10px 0 0} @media (max-width:640px){ .mcal{font-size:10px} .mday{min-height:62px;padding:4px} .mkey{margin-left:0;width:100%} .mhrs{font-size:10px} } .parkhero{height:140px;margin:14px 0 18px;border-radius:12px;overflow:hidden; background:var(--photo-bg);border:1px solid var(--photo-line)} .parkhero img{display:block;width:100%;height:100%;object-fit:cover} @media (max-width:640px){ .parkhero{height:104px;margin:12px 0 14px} } .park h3{margin:0 0 2px;font-size:15px} .park .resort{color:var(--muted);font-size:11.5px;text-transform:uppercase; letter-spacing:.6px;margin-bottom:12px} .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center} .metrics div small{display:block;color:var(--muted);font-size:10.5px; text-transform:uppercase;letter-spacing:.4px;margin-top:2px} .metrics div b{font-size:17px;font-weight:650} .updated{color:var(--muted);font-size:11px;margin-top:12px; border-top:1px solid var(--line);padding-top:8px} .openline{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 5px} .nextopen{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} .nextopen b{color:var(--text);font-weight:700} .nextopen small{display:block;font-size:11.5px;margin-top:2px} .openline .k{color:var(--muted);font-size:12.5px} .openline .v{color:var(--muted);font-size:14px} .openline b{font-size:22px;font-weight:700;line-height:1} .openline b.on{color:var(--low)} .openline b.off{color:var(--muted)} .bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden} .bar i{display:block;height:100%;background:var(--low);border-radius:3px} .is-closed .bar i{background:var(--accent-none)} .busy .val{white-space:nowrap} .busy{margin-top:12px;padding-top:10px;border-top:1px solid var(--line); font-size:11.5px;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap} .busy .lbl{color:var(--muted);font-size:10px;text-transform:uppercase; letter-spacing:.6px;font-weight:700;width:100%} .busy b{font-size:16px;font-weight:700;line-height:1} .busy .typ{color:var(--muted);font-weight:650} .busy .unit{color:var(--muted);font-size:10.5px} .busy .vs{color:var(--muted);font-size:10.5px;margin:0 2px} .busy .pct{margin-left:4px;font-weight:700;font-size:11px} .busy .src{width:100%;color:var(--muted);font-size:11px;margin-top:3px} .busy.low b:first-of-type,.busy.low .pct{color:var(--low)} .busy.avg b:first-of-type,.busy.avg .pct{color:var(--avg)} .busy.high b:first-of-type,.busy.high .pct{color:var(--high)} .busy.none,.busy.closed{opacity:.6} .hours{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:11.5px; font-weight:650;margin-top:12px} .hours .dot{width:7px;height:7px;border-radius:50%;flex:none;align-self:center} .hours .det{font-weight:500;color:var(--muted)} .hours.open{color:var(--low)} .hours.open .dot{background:var(--low)} .hours.shut{color:var(--muted)} .hours.shut .dot{background:var(--closed)} .hours.unknown{color:var(--muted)} .hours.unknown .dot{background:var(--mid)} .hourlist{display:grid;gap:6px;margin:0 0 16px} .hourrow{display:flex;justify-content:space-between;gap:12px;background:var(--card); border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px} .hourrow .lbl{font-weight:600} .hourrow.event .lbl{color:var(--evt)} .hourrow .win{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} /* open vs closed is carried by the card body, not just the accent stripe */ .is-open{background:var(--card-open)} .is-closed{background:var(--card-shut);opacity:.58;border-color:var(--line-soft)} .card.park.is-open{box-shadow:inset 3px 0 0 var(--white-05)} .statustag{display:inline-block;border-radius:4px;padding:1px 7px;font-size:10px; font-weight:800;letter-spacing:.6px;text-transform:uppercase; vertical-align:middle;margin-left:8px} .statustag.open{background:var(--low);color:var(--on-accent)} .statustag.closed{background:transparent;border:1px solid var(--closed);color:var(--muted)} .weekbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px} .weekbar .nav{background:var(--card);border:1px solid var(--line);border-radius:8px; padding:7px 13px;font-size:13px;text-decoration:none;color:var(--text);font-weight:600} .weekbar .nav:hover{border-color:var(--accent);color:var(--accent)} .weekbar .nav.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .weekbar .nav.disabled{opacity:.35;cursor:default} .weekbar.loading{opacity:.55;transition:opacity .12s} .weekbar .range{font-weight:700;font-size:14px;margin-right:4px} .calwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px; background:var(--card)} .cal{display:grid;grid-template-columns:158px repeat(7,minmax(92px,1fr));min-width:770px} .cal .cell{border-bottom:1px solid var(--line);border-right:1px solid var(--line); padding:7px 9px;min-height:44px;font-size:12px;min-width:0; overflow-wrap:anywhere} .cal .cell[style*="grid-column:8"]{border-right:none} .cal .barfill{border-bottom:1px solid var(--line)} .cal .hd{position:sticky;top:0;background:var(--cal-head);font-weight:700;text-align:center; padding:8px 6px;min-height:0;z-index:4} .cal .hd .dow{color:var(--muted);font-size:10.5px;text-transform:uppercase; letter-spacing:.6px;display:block} .cal .hd .num{font-size:16px;display:block;line-height:1.15} .cal .hd .mon{color:var(--muted);font-size:10px} .cal .hd.today{background:var(--accent);color:var(--on-accent)} .cal .hd.today .dow,.cal .hd.today .mon{color:var(--on-accent)} .cal .lbl{background:var(--card-sunk);font-weight:650;position:sticky;left:0;z-index:3; display:flex;flex-direction:column;justify-content:center; border-right:1px solid var(--line)} .cal .lbl a{color:var(--text);text-decoration:none} .cal .lbl a:hover{color:var(--accent)} .cal .lbl small{display:block;color:var(--muted);font-weight:500;font-size:10px; text-transform:uppercase;letter-spacing:.4px} .cal .hours{font-variant-numeric:tabular-nums} .cal .shut{color:var(--muted);opacity:.5} .cal .nodata{color:var(--muted);opacity:.28} .cal .todaycol{background:var(--accent-06)} .cal .evt{display:block;margin-top:3px;font-size:10.5px;line-height:1.35; color:var(--evt-ink);border-left:2px solid var(--evt);padding-left:5px} .cal .evt.extra{color:var(--evt-alt-ink);border-left-color:var(--evt-alt-line)} .cal .barlbl{background:var(--card-sunk);font-weight:650;position:sticky;left:0;z-index:3; color:var(--muted);font-size:10.5px;text-transform:uppercase; letter-spacing:.5px;display:flex;align-items:center; border-right:1px solid var(--line);border-bottom:1px solid var(--line); padding:7px 9px} .cal .bar{margin:5px 6px;border-radius:5px;padding:0 9px;height:24px;line-height:24px; font-size:11px;font-weight:650;color:var(--on-accent);white-space:nowrap; overflow:clip;align-self:center;min-width:0} .cal .bar .t{position:sticky;left:166px;display:inline-block;max-width:100%; overflow:hidden;text-overflow:ellipsis;vertical-align:top} .calnote{color:var(--muted);font-size:12px;margin-top:10px} .summary{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px} .summary div b{display:block;font-size:22px} .summary div small{color:var(--muted);font-size:11.5px;text-transform:uppercase; letter-spacing:.5px} .rides{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); padding:12px 4px 4px} .ride{display:flex;justify-content:space-between;align-items:center;gap:10px; background:var(--card);border:1px solid var(--line);border-left:4px solid var(--closed); border-radius:8px;padding:8px 12px} .resortdot{display:inline-block;width:8px;height:8px;border-radius:50%; margin-right:6px;vertical-align:middle;flex:none} .accentkey{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px;font-size:12px; color:var(--muted);align-items:center} .accentkey b{color:var(--text);font-weight:650;font-size:11.5px; text-transform:uppercase;letter-spacing:.5px} .accentkey span{display:inline-flex;align-items:center;gap:6px} .accentkey i{width:4px;height:14px;border-radius:2px;display:inline-block} .ride .nm{font-size:13px} .tick{display:inline-block;vertical-align:-3px;margin-right:6px;flex:none} h1 .tick{vertical-align:-2px;margin-right:9px} a.ride{color:inherit;text-decoration:none;cursor:pointer;transition:background .12s ease,border-color .12s ease} a.ride:hover{background:var(--card-hover);border-color:var(--accent)} a.ride:hover .ridelink{color:var(--accent);text-decoration:underline} a.ride:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ridelink{color:inherit;text-decoration:none}.ridelink:hover{color:var(--accent);text-decoration:underline} .crumbs{color:var(--muted);font-size:12.5px;margin-bottom:10px}.crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--accent)}.crumbs span{margin:0 6px;opacity:.6} .hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:10px 0 6px} .hero .big{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px} .hero .big small{font-size:16px;font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:0} .hero .vs{color:var(--muted);font-size:13px}.hero .vs b{color:var(--text)} .rank{width:100%;border-collapse:collapse}.rank td,.rank th{padding:10px 10px;border-bottom:1px solid var(--line)} .rank .pos{width:30px;color:var(--muted);font-weight:700}.rank a{color:inherit;text-decoration:none;font-weight:650} .rank a:hover{color:var(--accent)}.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle} pre.snip{background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px;overflow-x:auto;color:var(--text-2)} .ride .land{display:block;color:var(--muted);font-size:11px} .liveind{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:11.5px;color:var(--muted);white-space:nowrap} .liveind .dot{width:7px;height:7px;border-radius:50%;background:var(--low);display:inline-block;animation:livepulse 2s ease-in-out infinite} .liveind.err .dot{background:var(--high);animation:none} .liveind .asof:not(:empty)::before{content:" ยท "} @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}} a.ride.flash-down{animation:flashdown 1.8s ease-out} a.ride.flash-up{animation:flashup 1.8s ease-out} @keyframes flashdown{0%{background-color:var(--low-45)}100%{background-color:var(--card)}} @keyframes flashup{0%{background-color:var(--high-45)}100%{background-color:var(--card)}} .flat{display:grid;gap:6px;margin-bottom:6px} .flathead{display:flex;justify-content:space-between;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;padding:2px 10px 0} .flattitle{margin:18px 0 8px;font-size:15px} .ride .right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none} .ride .st{color:var(--muted);font-size:11px;white-space:nowrap} .is-closed .st{color:var(--closed-why)} .ride .closedwhy{color:var(--closed-why);font-weight:600} .badge{flex:none;min-width:60px;text-align:center;border-radius:999px;padding:4px 9px; font-size:12px;font-weight:700;color:var(--on-accent)} .badge.low{background:var(--low)} .badge.mid{background:var(--mid)} .badge.high{background:var(--high);color:var(--badge-ink-high)} .badge.closed{background:transparent;border:1px solid var(--closed);color:var(--muted); font-weight:600} .badge.open{background:transparent;border:1px solid var(--low);color:var(--low);font-weight:700} .badge.show{background:var(--show);color:var(--badge-ink-high);min-width:72px} .times{display:block;color:var(--muted);font-size:10.5px;margin-top:3px; line-height:1.5} .times b{color:var(--show-ink);font-weight:650} .times .past{opacity:.45} .showtag{display:inline-block;background:var(--show-bg);color:var(--show-ink); border:1px solid var(--show-line);border-radius:4px;padding:0 5px; font-size:9.5px;font-weight:700;letter-spacing:.5px;margin-left:6px; vertical-align:middle;text-transform:uppercase} .legend{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px;font-size:12px;color:var(--muted)} .legend span{display:inline-flex;align-items:center;gap:6px} .legend i{width:11px;height:11px;border-radius:3px;display:inline-block} footer .sources{display:block;max-width:760px;margin:0 auto;font-size:11.5px;line-height:1.65; color:var(--muted);opacity:.85} footer .sources a{color:var(--muted)} footer .sources a:hover{color:var(--accent)} .promise{margin-top:10px;font-size:12.5px;color:var(--muted)} .promise .tick{color:var(--low);font-weight:700} .rbtn{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line); color:var(--muted);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;cursor:pointer; transition:border-color .12s ease,color .12s ease,background .12s ease} .rbtn:hover{color:var(--text);border-color:var(--rc)} .rbtn[aria-pressed="true"]{color:var(--text);border-color:var(--rc);font-weight:650; background:color-mix(in srgb,var(--rc) 18%,var(--card));box-shadow:0 0 0 1px var(--rc) inset} .rbtn:focus-visible{outline:2px solid var(--rc);outline-offset:2px} [data-resort].is-hidden{display:none} table{width:100%;border-collapse:collapse;font-size:13px} th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)} th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px} td.num{text-align:right;font-variant-numeric:tabular-nums} /* One quiet line under the hero: conditions now, what the rest of the day does, and a way through to the full weather page. A strip, not a card -- it sits between the hero and Park Overview and must not compete with either. */ /* margin-top was -6px, tuned to tuck the strip under the dashboard hero. The park pages end their header with the stats row instead, so the negative pull overlapped the ATTRACTIONS/OPEN NOW labels. A positive margin is right for both: the dashboard header already carries its own bottom spacing, so this only relaxes it. */ .hero-wx{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 24px; padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card); text-decoration:none;color:var(--text-2);font-size:13px;line-height:1.4} .hero-wx:hover{border-color:var(--accent);background:var(--card-hover)} .hero-wx-ico{font-size:19px;line-height:1;flex:none} .hero-wx-now{color:var(--text)} .hero-wx-now b{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums} .hero-wx-sep{width:1px;height:16px;background:var(--line);flex:none} .hero-wx-out{color:var(--muted);min-width:0} .hero-wx-go{margin-left:auto;flex:none;color:var(--accent);font-weight:650;font-size:12.5px;white-space:nowrap} @media (max-width:640px){ .hero-wx{border-radius:12px;gap:8px 10px} .hero-wx-sep{display:none} .hero-wx-out{flex-basis:100%;font-size:12.5px} .hero-wx-go{margin-left:0;flex-basis:100%} } .chartbox{position:relative;height:520px} .chartbox.short{height:400px} footer.sitefoot{margin-top:56px;padding:26px 0 8px;border-top:1px solid var(--line); text-align:center;color:var(--muted);font-size:12.5px} .footlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 14px; font-size:13px} .footlinks a{color:var(--text);text-decoration:none;opacity:.92} .footlinks a:hover{color:var(--accent);text-decoration:underline} .footnote{margin:0 0 8px;font-size:12.5px;color:var(--muted)} /* Tip jar: muted until hovered, so it never competes with the footer nav. */ .footsupport{margin:0 0 10px;font-size:12px} .footsupport a{display:inline-flex;align-items:center;gap:5px;color:var(--muted); text-decoration:none;opacity:.85} .footsupport a:hover{color:var(--accent);opacity:1;text-decoration:underline} .sb-heart{flex:none;opacity:.75} .footsupport a:hover .sb-heart{opacity:1} .note{background:var(--accent-08);border:1px solid var(--accent-25); border-radius:8px;padding:10px 14px;color:var(--muted);font-size:12.5px;margin-bottom:14px} /* "coming soon" panel for the forecasting work -- shown on the dashboard and on every park page, so it lives here rather than in one template */ .ai{position:relative;overflow:hidden;border:1px solid var(--accent-35); border-radius:14px;padding:28px 26px;text-align:center; background:linear-gradient(135deg,var(--ai-1) 0%,var(--ai-2) 45%,var(--ai-3) 100%)} .ai::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 18% 22%,var(--accent-22),transparent 42%), radial-gradient(circle at 82% 78%,var(--ai-glow-b),transparent 45%)} .ai .icon{font-size:38px;line-height:1;margin-bottom:10px} .ai .tag{display:inline-block;background:var(--white-13); border:1px solid var(--white-28);border-radius:999px;padding:4px 13px; font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase; margin-bottom:12px} .ai h3{margin:0 0 10px;font-size:20px;letter-spacing:-.3px} .ai p{margin:0 auto;max-width:560px;color:var(--text-2);font-size:13.5px;line-height:1.65} .ai .meter{max-width:420px;margin:20px auto 0;text-align:left} .ai .meter .row{display:flex;justify-content:space-between;font-size:11.5px; color:var(--text-2);margin-bottom:6px} .ai .bar{height:7px;border-radius:999px;background:var(--white-15);overflow:hidden} .ai .bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--evt))} /* theme toggle: one button, the icon swaps with the active theme */ .themetoggle{display:inline-flex;align-items:center;justify-content:center;flex:none; width:34px;height:34px;margin-left:14px;padding:0;border-radius:9px;cursor:pointer; background:var(--card);border:1px solid var(--line);color:var(--muted); transition:color .12s ease,border-color .12s ease,background .12s ease} .themetoggle:hover{color:var(--accent);border-color:var(--accent)} .themetoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .themetoggle .moon{display:none} :root[data-theme=dark] .themetoggle .moon{display:block} :root[data-theme=dark] .themetoggle .sun{display:none} /* park photo slot: real reserved space, so dropping an image in later will not reflow the card */ .photoslot{position:relative;overflow:hidden;display:flex;align-items:center; justify-content:center;gap:8px;height:85px; margin:-16px -16px 12px;border-bottom:1px solid var(--photo-line); border-radius:11px 11px 0 0;background:var(--photo-bg);color:var(--photo-ink); font-size:11.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase; user-select:none} .photoslot .ph{display:flex;align-items:center;justify-content:center;gap:8px} .photoslot svg{flex:none;opacity:.85} /* The image covers the placeholder rather than replacing it, so a missing or broken file (onerror removes the img) falls back to the placeholder instead of leaving an empty strip. */ .photoslot img{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;object-position:center} /* The banner artwork carries the park name, so the text title below it would just repeat itself. Driven by a class on the card, not on the slot, because the img's onerror strips it again -- a card that falls back to the placeholder keeps its title. */ .card.park.photo-banner h3 .pname{display:none} .card.park.photo-banner h3 .statustag{margin-left:0} /* Status, ride count and progress share one row -- the banner already names the park, so the resort line and a dedicated bar row were both redundant. */ .cardtop{display:flex;align-items:center;gap:10px;margin-bottom:11px} .cardtop h3{margin:0;flex:0 1 auto;min-width:0} .cardtop .openinline{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0} .cardtop .lbl{flex:none;color:var(--muted);font-size:11.5px;white-space:nowrap; letter-spacing:.1px} /* The label is the first thing to go when a card gets narrow: the count and the bar carry the meaning, and the group keeps its title attribute so the wording is still reachable. Container query, not a media query, because card width comes from grid auto-fill rather than the viewport. */ /* Threshold is the card's CONTENT box, which a container query measures -- 253px inside a 290px card at desktop, ~198px at the 232px grid minimum. */ @container (max-width:215px){ .cardtop .lbl{display:none} } .cardtop .cnt{flex:none;color:var(--muted);font-size:12.5px;white-space:nowrap; font-variant-numeric:tabular-nums} .cardtop .cnt b{font-size:16px;font-weight:700;line-height:1} .cardtop .cnt b.on{color:var(--low)} .cardtop .cnt b.off{color:var(--muted)} .cardtop .bar{flex:1 1 auto;min-width:26px} .cardtop .go{flex:none;margin-left:auto;color:var(--muted);font-size:16px;line-height:1} @media (max-width:640px){ .ai{padding:22px 16px} .ai h3{font-size:17px} .wrap{padding:16px 14px 56px} header h1{font-size:21px} nav .inner{gap:12px;padding:8px 14px;overflow-x:auto;flex-wrap:nowrap} nav .brand{font-size:14.5px} nav .region{display:none} .summary{gap:16px} .summary div b{font-size:18px} .grid{grid-template-columns:1fr} .rides{grid-template-columns:1fr;padding:10px 0 2px} .chartbox{height:420px} .chartbox.short{height:320px} } /* parklink hover styles (extracted from inline) */ a.parklink{text-decoration:none;color:inherit;display:block;transition:transform .12s ease, border-color .12s ease,box-shadow .12s ease} a.parklink:hover{transform:translateY(-2px);box-shadow:0 6px 18px var(--shadow)} a.parklink .go{color:var(--muted);font-size:16px;line-height:1} a.parklink:hover .go{color:var(--accent)}