/* * The store site's ONE public stylesheet (AD-67 as amended by Story 21.5 review * batch 1), linked once by `templates/store_site/public/base.html`; no page * links its own. Story 21.5 phase A: the store page — the approved v3 mock's * composition (`mockups/store-page-v3.html`), DESIGN.md's [AMENDED 2026-09-24] * rules. Phase B: the calendar (the month table, the day index, the agenda, * the legend, the month navigation — `mockups/calendar.html`'s composition) * and the event and night pages, all under `.sp-page` with `cal-` / `evp-` * prefixes; the week rows and the On-today card as links; *Full calendar*. * Every selector is under `.sp-page` / `sp-` so nothing here reaches another * page or collides with a DaisyUI class (`.card`, `.hero`, `.btn`). Unlayered * on purpose: it must beat the repository type ramp's layered h1-h3 faces. * THE ONE BREAKPOINT is 720px of the page's own width, a container query. * Cyan is spent on *today* (the today block, the TODAY tag, today's times and * hours row, today's calendar cell and its numeral), the On-today card's top * rule and label, and focus - nothing else but the logo's own figure drawings * (DESIGN.md's stated exception). The header's *you are here* is white. * No script: nothing here needs one. */ /* * THE TOKENS (Story 21.10, the storefront theme layer). Every colour and face * below is a `--sp-*` token, and the VALUES are the store THEME's: these are the * DEFAULT theme's, Cardboarded's look (the root DESIGN.md) expressed through * DaisyUI's own variables, so `neon-dark` paints them; a theme overrides any of * them in its `@plugin "daisyui/theme"` block in static/css/styles.css, which * DaisyUI emits under `[data-theme=""]` inside `@layer base`. * THAT IS WHY THEY SIT HERE, IN `@layer base` ON `:where(:root)`, AND NOT ON * `.sp-page`: a declaration on `.sp-page` would shadow the theme's value on * `` for everything inside it, and an UNLAYERED one would beat the * layered theme block whatever its specificity; in the same layer on the same * element, the theme's `[data-theme]` (0,1,0) beats `:where(:root)` (0,0,0). * On ``, the shell's header and footer - outside `.sp-page` - read them * too. The hex-literal sweep reads this file: no colour here is a literal. */ @layer base { :where(:root) { --sp-white: var(--color-base-content); --sp-muted: var(--color-neutral-content); --sp-rule: var(--color-base-300); --sp-edge: var(--color-neutral-content); --sp-cyan: var(--color-primary); --sp-cyan-deep: var(--color-primary); --sp-black: var(--color-base-100); /* the darker edge of a grid day outside the month (DESIGN.md, The calendar) */ --sp-rule-faint: var(--color-base-200); --sp-display: Rajdhani, system-ui, sans-serif; --sp-body: 'IBM Plex Sans', sans-serif; } } .sp-main { padding-bottom: 56px; } .sp-page { container-type: inline-size; font: 400 16px/1.55 var(--sp-body); color: var(--sp-white); } .sp-page a { color: var(--sp-white); text-underline-offset: 4px; text-decoration-thickness: 1px; } .sp-page a:hover { text-decoration-thickness: 2px; } .sp-page :focus-visible { outline: 2px solid var(--sp-cyan); outline-offset: 2px; } .sp-page p { margin: 0; } .sp-col { max-width: 768px; margin-inline: auto; padding-inline: 16px; width: 100%; } .sp-fig { font-variant-numeric: tabular-nums; } .sp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sp-page .sp-h2 { font: 700 1rem/1.25 var(--sp-display); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; } /* ---- the hero band: the logo's own double triangle, large and faint, bleeding off the right */ .sp-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 28px 32px; } .sp-hero > .sp-col { position: relative; z-index: 1; } .sp-motif { position: absolute; z-index: 0; pointer-events: none; width: 520px; right: -190px; top: -30px; } .sp-motif .sp-mark-outer { stroke: var(--sp-white); stroke-opacity: .075; stroke-width: 7; } .sp-motif .sp-mark-inner { stroke-opacity: .2; stroke-width: 7; } .sp-rule-figure, .sp-card-corner { flex: none; } .sp-rule-figure .sp-mark-outer, .sp-card-corner .sp-mark-outer { stroke: var(--sp-white); stroke-width: 26; } .sp-rule-figure .sp-mark-inner, .sp-card-corner .sp-mark-inner { stroke-width: 26; } /* ---- the placard grid: phone order = DOM order */ .sp-plc { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; grid-template-areas: "logo lead" "subj subj" "rule rule" "today today" "tonight tonight" "reach reach"; } .sp-page .sp-h1 { grid-area: logo; margin: 0; line-height: 0; } .sp-logo { height: 112px; width: auto; max-width: 140px; object-fit: contain; display: block; } .sp-name { display: block; font: 900 1.75rem/1.1 var(--sp-display); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; } .sp-lead { grid-area: lead; font: 900 1.3125rem/1.12 var(--sp-display); text-transform: uppercase; letter-spacing: .03em; text-wrap: balance; overflow-wrap: anywhere; } .sp-plc > .sp-subjects { grid-area: subj; color: var(--sp-muted); margin-top: 14px; } .sp-accent-row { grid-area: rule; display: flex; align-items: center; gap: 10px; margin: 24px 0 22px; } .sp-accent { flex: 1; height: 3px; border: 0; margin: 0; background: linear-gradient(90deg, var(--sp-cyan-deep), var(--sp-cyan)); } .sp-rule-figure { width: 30px; height: 24px; } /* ---- today: the page's loudest figure (one text node, two display parts) */ .sp-today { grid-area: today; color: var(--sp-cyan); font-family: var(--sp-display); text-transform: uppercase; } .sp-today-label { display: block; font-weight: 700; font-size: .9375rem; letter-spacing: .16em; line-height: 1.3; margin-bottom: 4px; } /* the figure may wrap BETWEEN its parts (review batch 1, item 20); each `.sp-fig` stays whole */ .sp-today-figure { display: block; font-weight: 900; font-size: 2.75rem; line-height: 1; letter-spacing: .01em; } .sp-today.is-closed { margin-bottom: 18px; } .sp-today.is-closed .sp-today-figure { font-size: 1.75rem; line-height: 1.1; white-space: normal; } .sp-today .sp-fig { white-space: nowrap; } /* ---- the On-today card: today's headline, second only to the hours figure */ .sp-tonight { grid-area: tonight; margin: 14px 0; } .sp-tcard { display: grid; grid-template-columns: 40px 1fr auto; column-gap: 14px; row-gap: 2px; align-items: start; grid-template-areas: "gl lbl go" "gl ttl go" "gl when when"; padding: 16px; border: 1px solid var(--sp-edge); border-top: 3px solid var(--sp-cyan); background: var(--sp-black); text-decoration: none; } .sp-gl { grid-area: gl; display: block; width: 40px; height: 40px; flex: none; margin-top: 2px; color: var(--sp-white); } .sp-gl svg { display: block; width: 40px; height: 40px; } .sp-gl .sp-solid { fill: currentColor; stroke: none; } .sp-tlabel { grid-area: lbl; font: 700 .875rem/1.2 var(--sp-display); text-transform: uppercase; letter-spacing: .16em; color: var(--sp-cyan); } .sp-ttl { grid-area: ttl; font: 900 1.5rem/1.08 var(--sp-display); text-transform: uppercase; letter-spacing: .02em; margin-top: 4px; text-wrap: balance; overflow-wrap: anywhere; } .sp-when { grid-area: when; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; margin-top: 8px; } .sp-when time { font: 600 1.75rem/1 var(--sp-body); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .sp-when .sp-k { color: var(--sp-muted); font-size: .9375rem; } /* ---- contact rows and the links row */ .sp-reach { grid-area: reach; } .sp-contact { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sp-rule); } .sp-contact-row { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; align-items: center; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--sp-rule); text-decoration: none; } .sp-page a.sp-contact-row { text-decoration: none; } .sp-contact-row svg { width: 22px; height: 22px; grid-row: 1 / span 2; } .sp-contact-row .sp-v { font-weight: 500; overflow-wrap: anywhere; } .sp-contact-row .sp-k { grid-column: 2; color: var(--sp-muted); font-size: .875rem; line-height: 1.3; } .sp-page a.sp-contact-row:hover .sp-v { text-decoration: underline; } .sp-links { display: flex; flex-wrap: wrap; column-gap: 26px; margin-top: 8px; } .sp-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 600; } .sp-brand { width: 20px; height: 20px; flex: none; color: var(--sp-white); } /* ---- below the hero: week | hours, then the board card */ .sp-home { display: grid; row-gap: 40px; padding-top: 36px; border-top: 1px solid var(--sp-rule); grid-template-areas: "week" "hours" "board" "join"; } .sp-week { grid-area: week; min-width: 0; } .sp-hours { grid-area: hours; min-width: 0; } .sp-board { grid-area: board; min-width: 0; } .sp-mark { display: inline-block; width: 11px; height: 11px; flex: none; } .sp-mark svg { display: block; width: 11px; height: 11px; overflow: visible; } .sp-days, .sp-evs { list-style: none; margin: 0; padding: 0; } .sp-day { border-top: 1px solid var(--sp-rule); padding: 12px 0 4px; } .sp-page .sp-day-h { font: 600 .875rem/1.45 var(--sp-body); text-transform: none; letter-spacing: 0; color: var(--sp-muted); margin: 0 0 2px; } /* TODAY: a cyan tag in the display face, black on cyan (16.6:1) */ .sp-day.is-today { border-top: 2px solid var(--sp-cyan); } .sp-page .sp-day-h.is-today { display: inline-block; background: var(--sp-cyan); color: var(--sp-black); font: 700 .875rem/1 var(--sp-display); text-transform: uppercase; letter-spacing: .14em; padding: 6px 8px 5px; margin: 0 0 6px; } .sp-day.is-today .sp-ev-time { color: var(--sp-cyan); font-weight: 600; } .sp-ev { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 12px; align-items: baseline; min-height: 44px; padding: 6px 0; } .sp-ev-time { font-weight: 500; white-space: nowrap; } .sp-ev-t { font-weight: 600; display: flex; align-items: baseline; gap: 8px; min-width: 0; } .sp-ev-t .sp-mark { position: relative; top: 1px; } .sp-ev-title { overflow-wrap: anywhere; } .sp-ev-k { grid-column: 2; color: var(--sp-muted); font-size: .875rem; line-height: 1.35; } /* a cancelled row: the word in the time column, the title struck, all muted */ .sp-ev.is-cancelled, .sp-day.is-today .sp-ev.is-cancelled .sp-ev-time { color: var(--sp-muted); } .sp-day.is-today .sp-ev.is-cancelled .sp-ev-time { font-weight: 500; } .sp-ev.is-cancelled .sp-mark { color: var(--sp-muted); } .sp-key { color: var(--sp-muted); font-size: .875rem; display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--sp-rule); } .sp-key > span { display: inline-flex; align-items: center; gap: 6px; } .sp-key .sp-mark { color: var(--sp-white); } .sp-empty { color: var(--sp-muted); border-top: 1px solid var(--sp-rule); padding-top: 12px; } .sp-hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .sp-hours-table th, .sp-hours-table td { height: 40px; padding: 0 10px; border-bottom: 1px solid var(--sp-rule); text-align: left; font-weight: 400; } .sp-hours-table tr:first-child th, .sp-hours-table tr:first-child td { border-top: 1px solid var(--sp-rule); } .sp-hours-table th { width: 4rem; font-weight: 500; } .sp-hours-table .sp-closed { color: var(--sp-muted); } .sp-hours-table .sp-tag { text-align: right; font: 700 .875rem/1 var(--sp-display); text-transform: uppercase; letter-spacing: .12em; } /* today's row, filled: black on cyan */ .sp-hours-table tr.is-today th, .sp-hours-table tr.is-today td { background: var(--sp-cyan); color: var(--sp-black); font-weight: 600; border-color: var(--sp-cyan); } .sp-note { color: var(--sp-muted); font-size: .875rem; margin-top: 12px; } /* ---- the bordered card: square, flat, the logo's figure in its corner */ .sp-card { position: relative; border: 1px solid var(--sp-edge); padding: 22px 20px 20px; } .sp-card > .sp-card-corner { position: absolute; width: 38px; height: 30px; top: 10px; right: 12px; } .sp-card .sp-h2 { padding-inline-end: 56px; } .sp-board p { margin-bottom: 18px; max-width: 34ch; } .sp-page .sp-rowlink { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px solid var(--sp-edge); text-decoration: none; font-weight: 600; } .sp-page .sp-rowlink:hover { border-color: var(--sp-white); } .sp-go { margin-inline-start: auto; width: 16px; height: 16px; flex: none; } /* ---- rows and the card as links (Story 21.5 phase B) */ .sp-page a.sp-ev { text-decoration: none; } .sp-page a.sp-ev:hover .sp-ev-title { text-decoration: underline; text-underline-offset: 4px; } .sp-page a.sp-tcard { text-decoration: none; } /* hover: a white edge, the cyan top rule kept (DESIGN.md On-today card) */ .sp-page a.sp-tcard:hover { border-right-color: var(--sp-white); border-bottom-color: var(--sp-white); border-left-color: var(--sp-white); } .sp-page a.sp-tcard:hover .sp-ttl { text-decoration: underline; text-underline-offset: 5px; } .sp-tcard > .sp-go { grid-area: go; align-self: center; } .sp-page .sp-full { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; font-weight: 600; } .sp-full .sp-go { margin-inline-start: 0; } /* the agenda's past rows: muted, the title at 500 */ .sp-ev.is-past { color: var(--sp-muted); } .sp-ev.is-past .sp-ev-t { font-weight: 500; } .sp-ev.is-past .sp-mark { color: var(--sp-muted); } /* ---- the calendar: the month heading and its two links */ .cal { padding-top: 24px; } .cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .sp-page .cal-h1 { font: 900 1.75rem/1.1 var(--sp-display); letter-spacing: .04em; text-transform: uppercase; margin: 0; margin-inline-end: auto; } .cal-nav { display: flex; gap: 4px; } .sp-page .cal-nav a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 10px; font-weight: 500; text-decoration: none; border: 1px solid var(--sp-edge); } .sp-page .cal-nav a:hover { border-color: var(--sp-white); } .cal-nav svg { width: 16px; height: 16px; flex: none; } /* the legend: both marks, the written kinds */ .cal-legend { display: flex; flex-wrap: wrap; gap: 2px 20px; color: var(--sp-muted); font-size: .875rem; margin: 0 0 14px; padding: 0; list-style: none; } .cal-legend li { display: flex; align-items: center; gap: 8px; min-height: 28px; } .cal-legend .sp-mark { color: var(--sp-white); } /* ---- the month table: phone first, a DAY INDEX (numeral + one mark per event) */ .cal-month { width: 100%; border-collapse: collapse; table-layout: fixed; } .cal-month th { font-weight: 500; font-size: .8125rem; color: var(--sp-muted); text-align: left; padding: 0 0 6px 6px; } .cal-month td { border: 1px solid var(--sp-rule); vertical-align: top; padding: 0; height: 52px; } .cal-month td.is-out { border-color: var(--sp-rule-faint); } .cal-index, .cal-month td > .cal-n { display: flex; flex-direction: column; justify-content: space-between; min-height: 52px; padding: 5px 6px; } .sp-page a.cal-index { text-decoration: none; } .sp-page a.cal-index:hover .cal-n { text-decoration: underline; text-underline-offset: 3px; } .cal-n, .cal-n-wide { font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; } .cal-month td.is-past .cal-n, .cal-month td.is-past .cal-n-wide { color: var(--sp-muted); } .cal-month td.is-today { box-shadow: inset 0 0 0 2px var(--sp-cyan); } .cal-month td.is-today .cal-n, .cal-month td.is-today .cal-n-wide { color: var(--sp-cyan); font-weight: 600; } .cal-marks { display: flex; flex-wrap: wrap; gap: 3px; line-height: 0; color: var(--sp-white); } .cal-marks .sp-mark, .cal-marks .sp-mark svg { width: 14px; height: 14px; } .cal-mark.is-cancelled { color: var(--sp-muted); } /* the desktop halves, hidden below 720px: the plain numeral and the chips. The wide numeral carries `cal-n-wide` ALONE, so no `display: flex` rule above can reach it whatever the order (review batch 1, item 17) */ .cal-month td > .cal-n-wide, .cal-chips { display: none; } .cal-chips { list-style: none; margin: 4px 0 0; padding: 0; } .sp-page .cal-chip { display: block; min-height: 44px; padding: 4px 6px 5px; text-decoration: none; font-size: .8125rem; line-height: 1.3; border-top: 1px solid var(--sp-rule); } .cal-tm { display: flex; align-items: center; gap: 6px; color: var(--sp-muted); font-variant-numeric: tabular-nums; } .cal-tm .sp-mark { color: var(--sp-white); } .cal-tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; overflow-wrap: break-word; } .sp-page .cal-chip:hover .cal-tt { text-decoration: underline; text-underline-offset: 3px; } .cal-chip.is-cancelled .cal-tt { text-decoration: line-through; color: var(--sp-muted); } .cal-chip.is-cancelled .sp-mark, .cal-chip.is-past .sp-mark { color: var(--sp-muted); } .cal-chip.is-past .cal-tt { color: var(--sp-muted); font-weight: 500; } .sp-page .cal-more { display: flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: .8125rem; font-weight: 600; border-top: 1px solid var(--sp-rule); } /* ---- the agenda: the month read day by day, under the table at every width */ .cal-agenda { margin-top: 28px; } .cal-agenda .sp-h2 { margin-bottom: 6px; } .cal-agenda .sp-day-h { scroll-margin-top: 16px; } .cal-earlier { border-top: 1px solid var(--sp-rule); } .cal-earlier > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 500; color: var(--sp-muted); } .cal-earlier > summary:hover { color: var(--sp-white); } /* ---- the event and night pages */ .evp { padding-top: 16px; } .sp-page .evp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; text-decoration: none; } .evp-back svg { width: 16px; height: 16px; flex: none; } .sp-page .evp-kind { display: flex; align-items: center; gap: 8px; color: var(--sp-muted); font-size: .875rem; font-weight: 500; margin: 16px 0 8px; } .evp-kind .sp-mark { color: var(--sp-white); } .sp-page .evp-status { margin: 6px 0 16px; padding: 12px 0; border-top: 1px solid var(--sp-white); border-bottom: 1px solid var(--sp-white); font-weight: 600; } .sp-page .evp-h1 { font: 900 1.75rem/1.1 var(--sp-display); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; overflow-wrap: anywhere; } .evp-when { font-size: 1.25rem; font-weight: 600; line-height: 1.35; } .evp-when time { display: block; } .evp.is-cancelled .evp-h1, .evp.is-cancelled .evp-when, .evp.is-cancelled .evp-kind .sp-mark { color: var(--sp-muted); } .evp-desc { margin-top: 20px; max-width: 60ch; overflow-wrap: anywhere; } .sp-page .evp-desc p + p { margin-top: 12px; } .evp-where { margin-top: 24px; border-top: 1px solid var(--sp-rule); } .sp-page .evp-where a { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: center; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--sp-rule); text-decoration: none; } .evp-where svg { width: 22px; height: 22px; grid-row: 1 / span 2; } .evp-v { font-weight: 500; overflow-wrap: anywhere; } .evp-k { grid-column: 2; color: var(--sp-muted); font-size: .875rem; } .sp-page .evp-where a:hover .evp-v { text-decoration: underline; } .evp-counts { margin-top: 28px; } .sp-page .evp-counts p { margin-bottom: 12px; max-width: 60ch; } @container (min-width: 720px) { .sp-hero { padding-block: 44px; } .sp-motif { width: 720px; right: -230px; top: -80px; } .sp-plc { column-gap: 48px; row-gap: 0; grid-template-columns: 1fr 1fr; align-items: start; grid-template-areas: "logo lead" "logo subj" "rule rule" "today reach" "tonight reach"; } .sp-page .sp-h1 { justify-self: start; align-self: center; } .sp-logo { height: 176px; max-width: 220px; } .sp-lead { font-size: 2.125rem; line-height: 1.08; align-self: end; } .sp-plc > .sp-subjects { font-size: 1.0625rem; align-self: start; } .sp-today-figure { font-size: 3.25rem; } .sp-today-label { font-size: 1rem; } .sp-reach { align-self: start; } .sp-ttl { font-size: 1.625rem; } .sp-when time { font-size: 2rem; } .sp-home { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 40px; align-items: start; padding-top: 44px; grid-template-areas: "week hours" "board join"; } .sp-board { align-self: stretch; display: flex; flex-direction: column; } .sp-board .sp-rowlink { margin-top: auto; } /* the calendar: the chips replace the day index; the numeral is plain text */ .cal { padding-top: 32px; } .sp-page .cal-h1 { font-size: 2rem; } .cal-month td { height: 112px; } .cal-index { display: none; } .cal-month td > .cal-n-wide { display: block; min-height: 0; padding: 6px 6px 0; } .cal-month td > .cal-n { min-height: 0; padding: 6px 6px 0; } .cal-chips { display: block; } }