/* Galaxy Futsal matchday briefs — shared stylesheet for the static site. Each school page sets --accent-l / --accent-d inline on , derived from that school's registered kit colour. */ /* ---------- tokens: light is the base, both dark states re-declare ---------- */ :root { --paper: #E9EEEA; --surface: #FFFFFF; --surface-2: #F2F6F3; --ink: #0C1D17; --ink-2: #526259; --ink-3: #7C8C84; --line: #D2DCD6; --line-2: #BAC7C0; --accent: var(--accent-l, #14705A); --accent-ink: #FFFFFF; --accent-wash: color-mix(in srgb, var(--accent) 9%, transparent); --accent-edge: color-mix(in srgb, var(--accent) 28%, transparent); --alert: #A63A16; --alert-wash: #FBEFE9; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #080E0C; --surface: #0F1815; --surface-2: #16211D; --ink: #E0E9E4; --ink-2: #92A29A; --ink-3: #6C7B74; --line: #1F2C27; --line-2: #31423B; --accent: var(--accent-d, #45BE99); --accent-ink: #05100C; --alert: #EE8355; --alert-wash: #24140E; } } :root[data-theme="dark"] { --paper: #080E0C; --surface: #0F1815; --surface-2: #16211D; --ink: #E0E9E4; --ink-2: #92A29A; --ink-3: #6C7B74; --line: #1F2C27; --line-2: #31423B; --accent: var(--accent-d, #45BE99); --accent-ink: #05100C; --alert: #EE8355; --alert-wash: #24140E; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; font-variation-settings: "wdth" 88; color: var(--ink-3); } .mono { font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wrap { max-width: 780px; margin: 0 auto; padding: 0 max(18px, 3vw) 80px; } /* ---------- top bar ---------- */ .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px max(18px, 3vw); border-bottom: 1px solid var(--line); } .bar-home { font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; } .bar-home:hover { color: var(--ink); } .bar-spacer { flex: 1 1 auto; } .bar-mark { font-size: .82rem; font-weight: 800; letter-spacing: -.01em; font-variation-settings: "wdth" 84; text-transform: uppercase; color: var(--ink-3); } .btn { font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 13px; cursor: pointer; } .btn:hover { background: var(--surface-2); border-color: var(--ink-3); } /* ---------- school brief ---------- */ .hero { padding: 44px 0 30px; } .hero-kit { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); } .hero-kit .swatch { width: 14px; height: 14px; border-radius: 4px; } .hero h1 { margin: 0; font-size: clamp(1.95rem, 5.6vw, 2.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -.022em; font-variation-settings: "wdth" 110; text-wrap: balance; } .hero-sub { margin: 12px 0 0; font-size: .9rem; color: var(--ink-2); } .hero-sub .mono { color: var(--ink); } .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; } .chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--accent-edge); background: var(--accent-wash); font-size: .8rem; font-weight: 600; } .chip em { font-style: normal; font-weight: 400; color: var(--ink-2); font-size: .75rem; } /* review notes -- rendered only by the local build (tools/build-site.js --notes) */ .notes { display: grid; gap: 9px; margin-bottom: 30px; } .note { padding: 12px 15px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink-3); font-size: .86rem; color: var(--ink-2); } .note b { display: block; color: var(--ink); font-weight: 700; font-size: .89rem; } .note.alert { border-left-color: var(--alert); background: var(--alert-wash); color: color-mix(in srgb, var(--alert) 76%, var(--ink)); } .note.alert b { color: var(--alert); } .schools .nm i { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--alert); margin-left: 8px; } .localtag { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--alert-wash); color: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 30%, transparent); } .days { display: grid; gap: 14px; } .day { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; break-inside: avoid; } .day-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); } .day-top h3 { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; } .day-arrive { text-align: right; } .day-arrive .v { display: block; font-size: 2rem; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; color: var(--accent); } .m { display: grid; gap: 2px 16px; align-items: baseline; grid-template-columns: auto auto 1fr; padding: 12px 20px; border-top: 1px solid var(--line); } .day .m:first-of-type { border-top: 0; } .m-time { font-size: 1.02rem; font-weight: 500; white-space: nowrap; } .m-tag { align-self: center; padding: 3px 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); font-size: .72rem; font-weight: 600; white-space: nowrap; } .m-vs { min-width: 0; font-weight: 600; } .m-vs span { font-weight: 400; color: var(--ink-3); font-size: .8rem; } .day-foot { padding: 12px 20px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: .83rem; color: var(--ink-2); } .day-foot .mono { color: var(--ink); font-weight: 500; } .footnote { margin-top: 26px; font-size: .8rem; color: var(--ink-3); line-height: 1.7; } .footnote .mono { color: var(--ink-2); } /* ---------- match days ---------- */ .wrap.wide { max-width: 1000px; } .daytabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; } .daytab { display: flex; flex-direction: column; gap: 1px; padding: 7px 13px; border-radius: 8px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; font-weight: 600; } .daytab span { font-size: .72rem; font-weight: 400; color: var(--ink-3); } .daytab:hover { border-color: var(--accent); } .dayblock { margin-top: 34px; scroll-margin-top: 16px; } .dayblock-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .dayblock-head h2 { margin: 4px 0 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.018em; } .dayblock-head p { margin: 4px 0 0; font-size: .84rem; } .dim { color: var(--ink-3); } .nowrap { white-space: nowrap; } /* wide content scrolls in its own box so the page never scrolls sideways */ .table-wrap { overflow-x: auto; } table.sheet { width: 100%; border-collapse: collapse; font-size: .87rem; } table.sheet th { text-align: left; padding: 9px 12px 8px; font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; font-variation-settings: "wdth" 88; color: var(--ink-3); border-bottom: 1px solid var(--line); } table.sheet td { padding: 9px 12px; border-bottom: 1px solid var(--line); } table.sheet tbody tr:nth-child(even) { background: var(--surface-2); } table.sheet tbody tr:hover { background: var(--accent-wash); } /* ---------- index ---------- */ .index-hero { padding: 48px 0 26px; } .index-hero h1 { margin: 10px 0 0; font-size: clamp(2rem, 5.6vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.022em; font-variation-settings: "wdth" 110; text-wrap: balance; } .index-hero p { margin: 12px 0 0; font-size: .92rem; color: var(--ink-2); max-width: 62ch; } /* one row always: an 8-day grid wraps to a near-empty second row at most widths, so the strip scrolls sideways in its own container instead */ .daystrip { display: flex; gap: 1px; margin: 28px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 11px; overflow-x: auto; overflow-y: hidden; } .daystrip a { flex: 1 0 88px; background: var(--surface); padding: 11px 13px 13px; text-decoration: none; color: inherit; } .daystrip a:hover { background: var(--accent-wash); } .daystrip .d { display: block; font-size: .95rem; font-weight: 600; margin-top: 5px; } .daystrip .n { display: block; font-size: .74rem; color: var(--ink-3); } .searchbar { margin: 30px 0 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .searchbar input { flex: 1 1 240px; font: inherit; font-size: .92rem; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); } .searchbar .count { font-size: .82rem; color: var(--ink-3); } .schools { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; } .schools a { display: grid; align-items: center; gap: 4px 14px; grid-template-columns: auto 1fr auto; padding: 13px 16px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } .schools a:hover { border-color: var(--ink-3); background: var(--surface-2); } .schools .nm { font-weight: 600; min-width: 0; } .schools .where { grid-column: 2; font-size: .78rem; color: var(--ink-3); } .schools .pills { display: flex; flex-wrap: wrap; gap: 4px; justify-self: end; } .pill { font-family: "DM Mono", ui-monospace, monospace; font-size: .7rem; padding: 2px 6px; border-radius: 4px; background: var(--accent-wash); border: 1px solid var(--accent-edge); color: var(--ink-2); } .schools li.hide { display: none; } .no-results { padding: 26px 4px; color: var(--ink-3); font-size: .9rem; } @media (max-width: 560px) { .m { grid-template-columns: auto 1fr; } .m-tag { grid-row: 1; grid-column: 2; justify-self: start; } .m-vs { grid-column: 2; } .day-arrive { text-align: left; } .schools a { grid-template-columns: auto 1fr; } .schools .pills { grid-column: 2; justify-self: start; margin-top: 4px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media print { .bar, .searchbar, .daytabs, .no-print { display: none !important; } body { background: #fff; font-size: 10pt; } .wrap, .wrap.wide { max-width: none; padding: 0; } .day { break-inside: avoid; } .hero, .index-hero { padding-top: 0; } /* one day per sheet; the first keeps the page it is already on */ .dayblock { break-before: page; margin-top: 0; } .dayblock:first-of-type { break-before: auto; } .dayblock-head { border-bottom-width: 1.5pt; } table.sheet { font-size: 9.5pt; } table.sheet thead { display: table-header-group; } table.sheet tr { break-inside: avoid; } table.sheet tbody tr:nth-child(even) { background: #f2f2f2; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }