/* One stylesheet, no fonts, no imports — card/'s and profile/'s palette and type, because a tile is served from the publisher's own domain under the origin's CSP (DESIGN.md §8.3), which permits no third-party origin for anything. The accent is a `data-accent` attribute event.js sets on from the `accent` parameter. Every accent is a light/dark pair measured at 4.5:1 or better against the page ground in its own scheme, because it is used for link and plate text, not only for borders. Cancelled and postponed plates keep their own colours whatever the accent is. */ :root { --ink: #17181c; --muted: #5c6070; --paper: #fdfdfc; --rule: #e3e3e0; --green: #2f5d50; --blue: #1f5aa6; --violet: #6a3fa0; --amber: #8a5a00; --red: #a1302a; --slate: #475569; --danger: #a1302a; --warning: #8a5a00; --accent: var(--green); } @media (prefers-color-scheme: dark) { :root { --ink: #ececeb; --muted: #a0a3ad; --paper: #16171a; --rule: #2b2d33; --green: #8fc7b5; --blue: #8db8f0; --violet: #c3a6ec; --amber: #e6b45c; --red: #f0a09a; --slate: #b4bfcc; --danger: #f0a09a; --warning: #e6b45c; } } :root[data-accent='blue'] { --accent: var(--blue); } :root[data-accent='violet'] { --accent: var(--violet); } :root[data-accent='amber'] { --accent: var(--amber); } :root[data-accent='red'] { --accent: var(--red); } :root[data-accent='slate'] { --accent: var(--slate); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 3rem 1.25rem; background: var(--paper); color: var(--ink); font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .event { width: 100%; max-width: 38rem; } .media { margin: 0 0 1.5rem; overflow: hidden; border-radius: 0.75rem; border: 1px solid var(--rule); } .media img { display: block; width: 100%; height: auto; max-height: 24rem; object-fit: cover; } .plate { margin: 0 0 1rem; padding: 0.625rem 0.875rem; border: 2px solid var(--danger); border-radius: 0.5rem; color: var(--danger); font-weight: 600; } .is-postponed .plate { border-color: var(--warning); color: var(--warning); } .note { margin: 0 0 0.75rem; color: var(--muted); font-style: italic; } h1 { margin: 0 0 0.75rem; font-size: 2rem; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; } /* A cancelled event must read as one at a glance: the plate says it, the title shows it. */ .is-cancelled h1 { text-decoration: line-through; text-decoration-thickness: 0.08em; color: var(--muted); } .when { margin: 0; font-size: 1.125rem; font-weight: 600; } .when .utc { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; } .mode { margin: 0.5rem 0 0; color: var(--muted); } .live { display: inline-block; margin: 0.75rem 0 0; padding: 0.125rem 0.625rem; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 0.875rem; font-weight: 600; } .locations, .uris { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; overflow-wrap: anywhere; } /* The description keeps its own line breaks; it is plain text with links, never markup. */ .description { margin: 1.25rem 0 0; white-space: pre-line; overflow-wrap: anywhere; } a { color: var(--accent); } .actions { margin: 1.5rem 0 0; } .actions button { font: inherit; padding: 0.5rem 1rem; border: 1px solid var(--accent); border-radius: 0.5rem; background: var(--paper); color: var(--accent); cursor: pointer; } .actions button:hover, .actions button:focus-visible { background: var(--accent); color: var(--paper); } .organizer { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; } .empty { color: var(--muted); } /* `compact`: the description and links go; name, status, time, places and the calendar stay. */ .compact .description, .compact .uris { display: none; } .colophon { font-size: 0.8125rem; } .colophon a { color: var(--muted); } [hidden] { display: none !important; }