/* Dark by default, light if the browser asks. Everything is one column of cards; the two views are the same markup with different CSS, switched by the data-view attribute on so no request is involved. */ :root { --bg: #0e1020; --bg2: #171a30; --card: #1c2039; --line: #2b3157; --ink: #e8eaf6; --dim: #9aa0c8; --faint: #6a7099; --seen: #4ade80; --own: #60a5fa; --ride: #f0abfc; --gold: #fbbf24; --radius: 12px; } @media (prefers-color-scheme: light) { :root { --bg: #f4f5fb; --bg2: #ffffff; --card: #ffffff; --line: #dfe2f0; --ink: #1a1c2e; --dim: #5b6188; --faint: #878db3; --seen: #15803d; --own: #1d4ed8; --ride: #a21caf; --gold: #b45309; } } * { box-sizing: border-box; } body { margin: 0; padding: 0 1rem 4rem; background: linear-gradient(180deg, var(--bg2), var(--bg) 22rem); color: var(--ink); font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } main { max-width: 78rem; margin: 0 auto; } /* ---------------------------------------------------------------- header */ .top { padding: 2rem 0 1rem; } /* Title on the left, account control on the right, one line. It wraps rather than squeezing: below about 50rem the account strip drops under the title instead of shrinking the h1 into two words a line. */ .titlebar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; } h1 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; } h1 span { color: var(--dim); font-weight: 400; font-size: 0.6em; } .scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .score { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; } .score b { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; } .score i { font-style: normal; color: var(--faint); font-size: 0.95rem; font-weight: 400; } /* The label under the number, and only that: the score also holds spans for the two sets of figures, and `.score span` used to catch those too — one class plus an element outranks the plain class that hides them, so both sets showed, stacked, and the card grew to twice its height. */ .score > span { display: block; color: var(--dim); font-size: 0.8rem; } .bar { height: 5px; margin-top: 0.5rem; border-radius: 3px; background: color-mix(in oklab, var(--line) 70%, transparent); overflow: hidden; } /* The fills are named bar-* on purpose. They were once .own and .ride, and .ride is also the ride card further down — the fill quietly inherited the card's padding, border and 12px radius, which at height:100% of a 5px bar rendered as a fat rounded lozenge sitting in an otherwise empty bar. */ .bar > div { height: 100%; background: var(--seen); transition: width 0.25s ease; } .bar > .bar-own { background: var(--own); } .bar > .bar-ride { background: var(--ride); } /* Two sets of numbers ship in every score: the whole catalogue, and only what still exists. Hiding defunct attractions swaps which set is shown, so the denominator never counts things nobody can ride any more. */ .n-open { display: none; } body.hide-closed .n-all { display: none; } body.hide-closed .n-open { display: inline; } .bar > .n-open { display: none; } body.hide-closed .bar > .n-all { display: none; } body.hide-closed .bar > .n-open { display: block; } /* ------------------------------------------------------------- the account */ .whose { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--dim); } /* The explanatory line is the first thing to go when the row gets tight — the tag and the buttons are what you actually reach for. */ @media (max-width: 62rem) { .whose .hint { display: none; } } .tag { background: color-mix(in oklab, var(--ride) 22%, transparent); border: 1px solid color-mix(in oklab, var(--ride) 45%, var(--line)); color: var(--ink); border-radius: 999px; padding: 0.15rem 0.7rem; font-weight: 600; } .tag-shared { background: color-mix(in oklab, var(--gold) 22%, transparent); border-color: color-mix(in oklab, var(--gold) 45%, var(--line)); } .hint { color: var(--faint); font-size: 0.8rem; } .hint code { font-size: 0.95em; color: var(--dim); background: color-mix(in oklab, var(--line) 45%, transparent); padding: 0.1rem 0.35rem; border-radius: 5px; user-select: all; /* one click selects the whole id, which is the point */ } .whose button, .drawer button, .drawer .button { font: inherit; font-size: 0.82rem; color: var(--dim); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.85rem; cursor: pointer; text-decoration: none; display: inline-block; } .whose button:hover, .drawer button:hover, .drawer .button:hover { color: var(--ink); border-color: var(--dim); } .whose button.primary, .whose button.on { color: #0e1020; background: var(--gold); border-color: var(--gold); font-weight: 600; } .drawer { display: none; margin-bottom: 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; } .panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; } .drawer h5 { margin: 0 0 0.3rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .drawer p { margin: 0 0 0.6rem; color: var(--faint); font-size: 0.8rem; } .drawer input[type="text"], .drawer input[type="password"], .drawer input:not([type]) { font: inherit; font-size: 0.85rem; width: 100%; margin-bottom: 0.4rem; padding: 0.35rem 0.6rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } .drawer input[type="file"] { font-size: 0.78rem; color: var(--dim); margin-bottom: 0.5rem; max-width: 100%; } .drawer form { margin-top: 0.75rem; } .drawer code { font-size: 0.78rem; color: var(--ink); word-break: break-all; } /* Leaving is a real action but not one to reach for by accident, so it sits at the bottom of the pane with a rule above it rather than beside Rename. */ .drawer button.leave { display: block; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; background: none; padding-left: 0; } body.account-open .drawer { display: block; } /* The one thing on the page that is not a fact: what an account command just said back. It sits outside the board so the next morph cannot wipe it. */ .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); margin: 0; max-width: min(32rem, 90vw); padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--card); border: 1px solid var(--seen); color: var(--ink); font-size: 0.85rem; box-shadow: 0 8px 24px rgb(0 0 0 / 35%); cursor: pointer; } .toast.bad { border-color: #f87171; } .views { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .views button { font: inherit; color: var(--dim); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 1rem; cursor: pointer; } .views button:hover { color: var(--ink); } .views button.on { color: #0e1020; background: var(--gold); border-color: var(--gold); font-weight: 600; } .filter { color: var(--dim); font-size: 0.85rem; display: none; align-items: center; gap: 0.35rem; cursor: pointer; } body[data-view="rides"] .filter-ridden { display: flex; } body[data-view="films"] .filter-seen { display: flex; } /* Defunct attractions are worth hiding in either view: they are most of what makes the film list long, too. */ .filter-closed { display: flex; } /* Sorting only means anything in the film list, so the control follows it. */ .sorts { display: none; align-items: center; gap: 0.4rem; color: var(--faint); font-size: 0.8rem; } body[data-view="films"] .sorts { display: inline-flex; } .sorts button { padding: 0.3rem 0.75rem; font-size: 0.85rem; } .sorts button i { font-style: normal; font-variant-numeric: tabular-nums; } /* The filters travel together on the right. They used to carry the auto margin each, which shared the empty space out between them instead of putting it all in front. */ .filters { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; } /* ---------------------------------------------------------------- rides */ .park { margin: 2rem 0 0.85rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .rides { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.75rem; align-items: start; } .ride { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 0.9rem 0.6rem; } .ride.closed { opacity: 0.62; } .ride.ridden { border-color: color-mix(in oklab, var(--ride) 45%, var(--line)); } .ride h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; } .ride h4 em { font-style: normal; color: var(--faint); font-size: 0.75rem; white-space: nowrap; } .ride-check { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; } .ride-check input { accent-color: var(--ride); width: 15px; height: 15px; cursor: pointer; } .ride.ridden .ride-check span { color: var(--ride); } .films { list-style: none; margin: 0; padding: 0; } /* ---------------------------------------------------------------- films */ .film { display: flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0; border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent); } .film:first-child { border-top: 0; } .film .title { flex: 1; min-width: 0; } /* A film title is a link when there is an article to link to, and reads as plain text until it is hovered — 1,600 underlined titles would be a mess. */ a.title { color: inherit; text-decoration: none; } a.title:hover { text-decoration: underline; text-decoration-color: var(--dim); } /* The ride's own article, kept small: it sits between the ride name and the year, and the name is the thing being read. */ .wiki { flex: 0 0 auto; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); text-decoration: none; border: 1px solid var(--line); border-radius: 5px; padding: 0.05rem 0.3rem; } .wiki:hover { color: var(--ink); border-color: var(--dim); } .film .year { color: var(--faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; } .film.seen .title { color: var(--dim); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--seen) 60%, transparent); } /* The checkbox is the emoji: the real input sits behind it, still focusable and still what the click hits. */ .chk { position: relative; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; cursor: pointer; } .chk input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .chk span { font-size: 0.95rem; filter: grayscale(1); opacity: 0.35; transition: opacity 0.12s, filter 0.12s; } .chk input:checked + span { filter: none; opacity: 1; } .chk input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } .chk:hover span { opacity: 0.7; } .chk input:checked:hover + span { opacity: 1; } /* The list ships once, in release order, and re-sorts in the browser: each row carries its title position as --t, so switching sort is a flex `order` swap and reversing is a change of main-axis direction. No request either way. */ .filmlist { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; } body[data-sort="title"] .filmlist > .film { order: var(--t); } body[data-dir="desc"] .filmlist { flex-direction: column-reverse; } .filmlist .film { gap: 0.55rem; padding: 0.3rem 0.6rem; border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent); } .filmlist .film .title { flex: 0 1 auto; font-weight: 500; } .filmlist .film .year { width: 2.6rem; } .filmlist .on { flex: 1; text-align: right; color: var(--faint); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------ the switch */ body[data-view="rides"] .by-films { display: none; } body[data-view="films"] .by-rides { display: none; } /* Each view hides the thing it is actually about. "Seen" is scoped to the film list — hiding watched films inside a ride card would just leave the card half empty, which is what this used to do. */ body.hide-seen .filmlist > .film.seen { display: none; } body.hide-ridden .ride.ridden { display: none; } /* Attractions that no longer exist, and the films that only ever appeared in them. The ride view hides the cards; the film list hides the rows that would now be pointing at nothing standing. */ body.hide-closed .ride.closed { display: none; } body.hide-closed .filmlist > .film.only-closed { display: none; } /* A park whose rides have all been ridden should take its heading with it, and a resort whose parks have all gone should go too. Each filter needs its own rule, and the two together need a third: a park is empty when nothing in it survives every filter that is on, which is not something the individual rules can say between them. */ body.hide-ridden .park-block:not(:has(.ride:not(.ridden))) { display: none; } body.hide-ridden .resort:not(:has(.ride:not(.ridden))) { display: none; } body.hide-closed .park-block:not(:has(.ride:not(.closed))) { display: none; } body.hide-closed .resort:not(:has(.ride:not(.closed))) { display: none; } body.hide-closed.hide-ridden .park-block:not(:has(.ride:not(.closed):not(.ridden))) { display: none; } body.hide-closed.hide-ridden .resort:not(:has(.ride:not(.closed):not(.ridden))) { display: none; } footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.78rem; } footer a { color: var(--dim); } @media (max-width: 30rem) { .filmlist .on { display: none; } h1 span { display: block; } } /* ------------------------------------------------- the CSV import's answer */ .report { max-width: 40rem; padding: 3rem 0; } .report h1 { margin: 0 0 1rem; font-size: 1.6rem; } .report p { color: var(--dim); } .report .warn { color: var(--gold); } .report ul { color: var(--faint); font-size: 0.85rem; } .report a { color: var(--own); } /* ------------------------------------------------ resorts (12 parks worth) */ .resort-name { margin: 2.5rem 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); } .resort:first-child .resort-name { margin-top: 1.5rem; } .resorts { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; } .resorts button { font: inherit; font-size: 0.8rem; color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem; cursor: pointer; } .resorts button:hover { color: var(--ink); border-color: var(--dim); } .resorts button.on { color: var(--bg); background: var(--dim); border-color: var(--dim); font-weight: 600; } /* The resort picker filters the ride view only — the film list is deduped across every park, so filtering it by resort would be a lie. */ body[data-view="films"] .resorts { display: none; } body[data-resort="disneyland-resort"] .resort:not([data-resort="disneyland-resort"]), body[data-resort="walt-disney-world"] .resort:not([data-resort="walt-disney-world"]), body[data-resort="tokyo-disney-resort"] .resort:not([data-resort="tokyo-disney-resort"]), body[data-resort="disneyland-paris"] .resort:not([data-resort="disneyland-paris"]), body[data-resort="hong-kong-disneyland"] .resort:not([data-resort="hong-kong-disneyland"]), body[data-resort="shanghai-disney-resort"] .resort:not([data-resort="shanghai-disney-resort"]) { display: none; }