/* * The daily event calendar - one stylesheet, no build step, no framework. * * Two palettes named once. Which applies is decided by `data-theme` on , * stamped by the inline script in index.html before the first paint. * * Every event owns a hue rather than a colour: the markup sets `--hue` on an * element and the palette here decides what lightness that hue should be on * paper and on a dark screen. Thirteen events therefore cost thirteen numbers * rather than twenty-six hex codes that have to be kept in step. */ :root, :root[data-theme="dark"] { --bg: #0d0f14; --bg-soft: #12141b; --panel: #171a22; --panel-2: #1d212b; --panel-3: #262b37; --line: #2b3140; --line-soft: #21262f; --text: #e9ecf3; --muted: #98a0b0; --faint: #6b7386; --accent: #6d7cff; --accent-soft: #8b97ff; --accent-dim: rgba(109, 124, 255, .16); --hover: rgba(255, 255, 255, .05); --shadow: 0 8px 26px rgba(0, 0, 0, .4); --shadow-lg: 0 26px 68px rgba(0, 0, 0, .55); /* An event's own colour, built from the hue the markup hands over. */ --event: hsl(var(--hue, 240) 70% 66%); --event-tint: hsl(var(--hue, 240) 60% 60% / .16); --event-edge: hsl(var(--hue, 240) 60% 60% / .45); --event-text: hsl(var(--hue, 240) 80% 78%); --today-ring: #6d7cff; color-scheme: dark; } :root[data-theme="light"] { --bg: #f4f5f9; --bg-soft: #eaecf3; --panel: #ffffff; --panel-2: #f7f8fc; --panel-3: #eef0f6; --line: #d6dae5; --line-soft: #e6e9f1; --text: #171a22; --muted: #5a6273; --faint: #858c9d; --accent: #4b57dd; --accent-soft: #3a45bd; --accent-dim: rgba(75, 87, 221, .1); --hover: rgba(20, 26, 45, .045); --shadow: 0 6px 18px rgba(19, 26, 48, .07); --shadow-lg: 0 26px 68px rgba(19, 26, 48, .16); /* * The same hues, pulled down until they hold their own against white - and * tinted harder than the dark palette needs. A wash that reads clearly over * near-black disappears over paper, and thirteen days that are all the same * pale lavender is a calendar that has stopped colour-coding anything. */ --event: hsl(var(--hue, 240) 62% 45%); --event-tint: hsl(var(--hue, 240) 78% 52% / .19); --event-edge: hsl(var(--hue, 240) 55% 48% / .42); --event-text: hsl(var(--hue, 240) 68% 31%); --today-ring: #4b57dd; color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(1100px 520px at 12% -8%, var(--accent-dim), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); font: 15px/1.6 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { letter-spacing: -.2px; } .muted { color: var(--muted); } .grow { flex: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------- bar */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px clamp(14px, 4vw, 32px); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: linear-gradient(140deg, var(--accent), #a855f7); box-shadow: 0 6px 18px hsl(245 80% 60% / .35); } .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .brand-text strong { font-size: 16px; } .brand-text small { color: var(--muted); font-size: 12px; } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 11px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; transition: border-color .14s, background .14s, transform .08s; } .btn:hover { border-color: var(--accent); background: var(--panel-3); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn.icon { padding: 8px 12px; min-width: 40px; font-size: 17px; line-height: 1; } main { max-width: 1180px; margin: 0 auto; width: 100%; padding: clamp(16px, 3vw, 28px) clamp(14px, 4vw, 32px) 48px; display: flex; flex-direction: column; gap: 18px; } .panel, .calendar-card, .today-card { background: linear-gradient(180deg, var(--panel), var(--bg-soft)); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.4vw, 22px); box-shadow: var(--shadow); } .panel > h2, .calendar-card > h2 { margin: 0 0 10px; font-size: 15px; font-weight: 650; } .panel > p.muted { margin: 0 0 14px; font-size: 13.5px; } /* * The event badges. * * One rule for all of them: the source images are 256px squares, every place * they appear wants a different size, and none of those sizes is 256. The * `width`/`height` attributes on the tags state the intrinsic ratio so nothing * reflows as thirteen of them arrive; the CSS below decides how big each one * is actually drawn. */ .today-emoji, .day-emoji, .l-emoji, .occ-emoji { display: block; object-fit: contain; aspect-ratio: 1; /* A game asset drawn at 26px is being shrunk tenfold; without this Chrome picks a blurrier filter than Firefox does and the two look like different icon sets. */ image-rendering: auto; } /* --------------------------------------------------------------- today */ /* * The one thing most people came for, answered before anything is clicked. * Tinted with the running event's own hue so the page has a different * temperature on a Harvest Festival than on a quiet Sunday. */ .today-card { border-color: var(--event-edge); background: linear-gradient(180deg, var(--event-tint), var(--bg-soft) 70%); display: flex; align-items: flex-start; gap: clamp(14px, 3vw, 22px); flex-wrap: wrap; } .today-emoji { width: clamp(46px, 8vw, 64px); height: auto; flex: none; } .today-body { flex: 1; min-width: 220px; } .today-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--event-text); } .today-body h1 { margin: 4px 0 2px; font-size: clamp(21px, 3.6vw, 28px); } .today-date { color: var(--muted); font-size: 13.5px; } .today-effects { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .today-effects li { display: flex; gap: 9px; align-items: flex-start; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line-soft); border-radius: 11px; padding: 8px 12px; font-size: 13.5px; } .today-effects li::before { content: '▸'; color: var(--event); flex: none; } .today-next { margin-top: 12px; font-size: 12.5px; color: var(--faint); } /* ------------------------------------------------------------ the month */ .month-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .month-bar h2 { margin: 0; font-size: 19px; min-width: 190px; text-align: center; } /* * The month picker. * * A button and a panel of our own. The native `` this * replaces opened a picker the browser drew itself - unstyleable, different in * every browser, and only its calendar icon opened anything at all: clicking * the text put the caret in a little number field instead. All of this control * opens all of the panel. */ .month-jump { position: relative; } .month-picker { display: inline-flex; align-items: center; gap: 9px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 11px; padding: 8px 12px; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: border-color .14s, background .14s; } .month-picker:hover { border-color: var(--accent); background: var(--panel-3); } .month-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .month-picker-caret { color: var(--faint); font-size: 11px; transition: transform .16s, color .16s; } .month-picker[aria-expanded="true"] { border-color: var(--accent); background: var(--panel-3); } .month-picker[aria-expanded="true"] .month-picker-caret { transform: rotate(180deg); color: var(--accent); } .month-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 28px)); background: linear-gradient(180deg, var(--panel), var(--bg-soft)); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; animation: menu-in .13s cubic-bezier(.2, .8, .3, 1); } .month-menu[hidden] { display: none; } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } } /* * Thirteen years, scrolled through. * * `overscroll-behavior: contain` is what stops the page underneath scrolling * on once this list hits its end - without it, reaching the bottom of the * panel carries on scrolling the calendar behind it, which feels like the * panel has let go of the wheel. */ .month-menu-list { max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; } .month-menu-list::-webkit-scrollbar { width: 10px; } .month-menu-list::-webkit-scrollbar-track { background: transparent; } .month-menu-list::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } .month-menu-list::-webkit-scrollbar-thumb:hover { background: var(--line); background-clip: content-box; } /* The year stays put while its own months scroll under it, so it is always clear which year is being looked at. */ .month-year-label { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 8px 6px; background: linear-gradient(180deg, var(--panel) 70%, transparent); color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: 1px; } .month-year + .month-year { margin-top: 2px; } .month-year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 4px 6px; } .month-chip { background: none; border: 1px solid transparent; border-radius: 9px; padding: 8px 0; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .month-chip:hover { background: var(--hover); color: var(--text); } .month-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* The month on screen, and the month it actually is - two different facts, so two different marks rather than one that has to mean both. */ .month-chip.now { color: var(--accent); font-weight: 700; } .month-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; } .month-chip.on.now { color: #fff; } .weekdays, .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .weekdays { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); text-align: center; } /* * One day. * * A button, not a div: every one of these is a thing you can pick, and making * them buttons is what gets keyboard focus, Enter and a screen reader for * free rather than reimplemented badly. */ .day { position: relative; display: flex; flex-direction: column; gap: 5px; align-items: stretch; min-height: 116px; padding: 9px 10px; background: var(--event-tint); border: 1px solid var(--line-soft); border-radius: 13px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .13s, transform .1s, box-shadow .13s; } .day:hover { border-color: var(--event-edge); transform: translateY(-1px); box-shadow: var(--shadow); } .day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* A day from the month either side: still real, still clickable, just not what is being looked at. */ .day.outside { opacity: .42; } .day.selected { border-color: var(--event); box-shadow: 0 0 0 2px var(--event-edge); } .day.today { box-shadow: inset 0 0 0 2px var(--today-ring); } .day.today.selected { box-shadow: inset 0 0 0 2px var(--today-ring), 0 0 0 2px var(--event-edge); } .day-number { font-size: 17px; font-weight: 700; color: var(--muted); line-height: 1.1; } .day.today .day-number { color: var(--today-ring); } .day-emoji { width: 46px; height: auto; align-self: flex-start; margin: 1px 0; } .day-name { font-size: 11.5px; line-height: 1.3; color: var(--event-text); font-weight: 600; overflow-wrap: anywhere; } /* A monthly special is the exception, and looks like one. */ .day-star { position: absolute; top: 7px; right: 8px; font-size: 10px; color: var(--event); opacity: .9; } /* ------------------------------------------------------------- the legend */ .legend { display: flex; flex-wrap: wrap; gap: 7px; } .legend-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--event-tint); border: 1px solid var(--event-edge); border-radius: 999px; padding: 5px 13px 5px 10px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; transition: transform .1s, box-shadow .13s; } .legend-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .legend-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .legend-chip.on { box-shadow: 0 0 0 2px var(--event-edge); } .legend-chip .l-emoji { width: 20px; height: auto; } .occ { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .occ h3 { margin: 0 0 4px; font-size: 14px; display: flex; align-items: center; gap: 8px; } .occ-emoji { width: 24px; height: auto; } .occ .occ-effects { margin: 8px 0 12px; padding-left: 18px; color: var(--muted); font-size: 13.5px; } .occ-dates { display: flex; flex-wrap: wrap; gap: 7px; } .occ-date { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 11px; font-size: 13px; font: inherit; color: inherit; cursor: pointer; } .occ-date:hover { border-color: var(--accent); } .occ-date b { font-weight: 650; } .occ-date span { color: var(--faint); margin-left: 6px; font-size: 12px; } /* -------------------------------------------------------- small screens */ @media (max-width: 760px) { body { background-attachment: scroll; } .day { min-height: 88px; padding: 7px; border-radius: 11px; gap: 3px; } .day-name { display: none; } .day-emoji { width: 38px; align-self: center; } .weekdays, .grid { gap: 4px; } /* * The heading and the picker both say "August 2026", which is one of them * too many once the bar has to hold four controls in 358 pixels - squeezed * between them the heading collapsed to "Au…" and sat on top of the next * button. The picker keeps the month name and the heading steps out of the * way: `.sr-only` rather than `display: none`, because the grid is labelled * by it and a hidden label is still a label. */ .month-bar h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .month-bar { gap: 8px; } .month-jump { margin-left: auto; } .month-menu { right: 0; left: auto; } .brand-text small { display: none; } } @media (max-width: 420px) { .weekdays { font-size: 9.5px; letter-spacing: .3px; } .day { min-height: 74px; } .day-number { font-size: 14px; } .day-emoji { width: 32px; } } @media (pointer: coarse) { .btn { min-height: 40px; } .legend-chip, .occ-date { min-height: 36px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .day:hover, .legend-chip:hover { transform: none; } }