/* ========================================================================== Dudley Redhead United FC — Design System Black & white heritage, beachside warmth, a sparing red accent. ========================================================================== */ :root { /* Palette */ --ink: #0F0F10; --ink-soft: #1C1C1F; --ink-700: #2A2A2D; --paper: #FFFFFF; --paper-warm: #FBF8F2; --sand: #F4EEE4; --sand-deep: #E7DFD0; --line: #E2DED5; --line-strong: #C9C4B8; --muted: #5A5A5C; --muted-soft: #8A8985; /* Notice/announcement date labels sit on white — needs AA 4.5:1, so a darker grey than --muted-soft (#8A8985 is only ~3.5:1). #6E6D6A ≈ 5.2:1. */ --nb-date: #6E6D6A; /* "red-*" tokens are retained for backwards compatibility but now resolve to grey values so the whole palette is black / white / grey only. */ --red: #2A2A2D; --red-deep: #0F0F10; --red-soft: #A8A6A1; /* Type */ --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Spacing scale (8px-based) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6rem; --s-12: 8rem; /* Layout */ --container: 1200px; --container-narrow: 880px; --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; /* Effects */ --shadow-sm: 0 2px 6px rgba(15, 15, 16, 0.06); --shadow: 0 8px 30px rgba(15, 15, 16, 0.08); --shadow-strong: 0 20px 60px rgba(15, 15, 16, 0.18); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ========================================================================== Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, NOT hidden: `overflow-x: hidden` makes overflow-y compute to `auto`, turning into a scroll container — which breaks the sticky

(it pins to and scrolls away) and the anchor scroll-padding. `clip` blocks horizontal scroll the same way without creating a scroll container. (html already has overflow-x: clip.) */ overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ul, ol { list-style: none; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--ink); color: var(--paper); } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; } h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 4vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); } h4 { font-size: 1.125rem; letter-spacing: 0.04em; } h5 { font-size: 0.875rem; letter-spacing: 0.12em; } /* Skip-to-content link (WCAG 2.4.1) — visually off-screen until keyboard-focused. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-bottom-right-radius: 6px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; text-decoration: none; } .skip-link:focus { left: 0; } p { margin-bottom: var(--s-4); } p:last-child { margin-bottom: 0; } .eyebrow { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: var(--s-3); } .eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--red); } .eyebrow.on-dark { color: var(--paper); } .eyebrow.on-dark::before { background: var(--paper); } .lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--ink-soft); } .display { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 12vw, 9rem); line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; } .script-quote { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.4; color: var(--ink-soft); } /* ========================================================================== Layout ========================================================================== */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); } .container.narrow { max-width: var(--container-narrow); } .section { padding: var(--s-8) 0; } .section.tight { padding: var(--s-6) 0; } .section.loose { padding: var(--s-10) 0; } .section.dark { background: var(--ink); color: var(--paper); } .section.dark p { color: rgba(255, 255, 255, 0.78); } .section.dark .lead { color: rgba(255, 255, 255, 0.85); } .section.sand { background: var(--sand); } .section.warm { background: var(--paper-warm); } @media (min-width: 768px) { .section { padding: var(--s-9) 0; } .section.loose { padding: var(--s-10) 0 calc(var(--s-10) + var(--s-5)); } } /* Section header pattern */ .section-head { max-width: 760px; margin-bottom: var(--s-6); } .section-head .eyebrow { margin-bottom: var(--s-4); } .section-head h2 { margin-bottom: var(--s-4); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } /* On-this-page jump nav (pills) — shared across club pages (About, Voices, Contact, Life Members, Game day). Sits in the dark hero. */ .jump-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-5); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius); } .jump-nav a { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); padding: var(--s-2) var(--s-4); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .jump-nav a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* ========================================================================== Header / Nav ========================================================================== */ .site-header { position: sticky; top: 0; /* nav pins to the very top; the ground-status banner now sits BELOW it */ z-index: 100; background: rgba(244, 238, 228, 0.94); /* --sand, translucent */ backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .site-header.on-dark { background: rgba(15, 15, 16, 0.85); border-bottom-color: rgba(255, 255, 255, 0.08); color: var(--paper); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 72px; } .nav-brand { display: flex; align-items: center; gap: var(--s-3); flex: none; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.875rem; line-height: 1.1; } .nav-brand .badge { width: 44px; height: 44px; flex: none; object-fit: contain; object-position: center; } .nav-brand small { display: inline-block; font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.18em; font-weight: 400; } .nav-brand .brand-thistles { display: inline-block; margin-left: 0.5rem; font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', cursive; font-size: 0.9rem; font-weight: 400; text-transform: none; letter-spacing: 0.01em; color: var(--ink); vertical-align: baseline; } .nav-menu { display: none; align-items: center; justify-content: center; flex: 1 1 auto; gap: clamp(var(--s-2), 1vw, var(--s-4)); } .nav-menu li { flex: none; } .nav-menu a { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; padding: var(--s-2) 0; position: relative; white-space: nowrap; } .nav-menu a:hover { color: var(--red); } .nav-menu a.current { color: var(--ink); } .nav-menu a.current::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--red); } .nav .nav-cta { display: none; } /* 0,2,0 so it beats .btn (0,1,0) on mobile */ .nav-cta .btn { padding: 0.625rem 1.125rem; font-size: 0.8125rem; } .nav-toggle { width: 44px; height: 44px; flex: none; /* never crushed when the row is tight */ display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .nav-toggle:hover { border-color: var(--ink); } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform 0.25s var(--ease); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); } .nav-toggle[aria-expanded="true"] span::after { opacity: 0; } .mobile-menu { display: none; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s-5) 0 var(--s-6); } .mobile-menu.open { display: block; } .mobile-menu ul { display: grid; gap: var(--s-1); } .mobile-menu a { display: block; padding: var(--s-3) 0; font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; border-bottom: 1px solid var(--line); } .mobile-menu a.current { color: var(--red); } .mobile-menu .btn { width: 100%; margin-top: var(--s-5); justify-content: center; } /* Below the desktop-menu breakpoint the brand must be able to SHRINK — its base flex:none held it at max-content (the club-name line alone is ~340px; the community pages' letter-spaced subtitle ~370px), which dragged every page wider than a phone screen and let phones pan sideways. min-width:0 on the flex chain lets the text lines wrap inside the 72px bar instead. */ @media (max-width: 1239.98px) { .nav > .nav-brand { flex: 0 1 auto; min-width: 0; } .nav-brand > span { min-width: 0; } } @media (max-width: 520px) { .nav-brand { font-size: 0.75rem; } .nav-brand small { letter-spacing: 0.1em; } .nav-brand .brand-thistles { font-size: 0.8rem; } } @media (min-width: 1240px) { /* Three balanced segments: brand (left) · menu (true centre) · actions (right). Brand and actions are equal flexible side columns, so the natural-width menu sits dead-centre in the viewport; each action group hugs the container edge, mirroring the brand on the opposite side. */ .nav > .nav-brand { flex: 1 1 0; min-width: 0; } .nav-menu { display: flex; flex: 0 1 auto; } .nav-actions { flex: 1 1 0; justify-content: flex-end; } .nav .nav-cta { display: inline-flex; } .nav .nav-side { display: inline-grid; } .nav .nav-signed-in { display: inline-flex; } .nav-toggle { display: none; } .mobile-menu { display: none !important; } } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.875rem 1.5rem; font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); white-space: nowrap; } .btn:hover { background: var(--red); } .btn .arrow { transition: transform 0.2s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--paper); } .btn.ghost-light { background: transparent; color: var(--paper); border: 1px solid rgba(255, 255, 255, 0.4); } .btn.ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn.red { background: var(--red); } .btn.red:hover { background: var(--ink); } .btn.lg { padding: 1.125rem 2rem; font-size: 1rem; } .btn.sm { padding: 0.625rem 1rem; font-size: 0.75rem; } @media (max-width: 520px) { /* long CTA labels wrap rather than overflow the viewport on phones */ .btn { white-space: normal; max-width: 100%; text-align: center; } } .btn-link { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); padding-bottom: 4px; border-bottom: 2px solid var(--ink); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn-link:hover { color: var(--red); border-color: var(--red); } .btn-link.on-dark { color: var(--paper); border-color: var(--paper); } .btn-link.on-dark:hover { color: var(--red-soft); border-color: var(--red-soft); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; padding: var(--s-8) 0 var(--s-9); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05), transparent 50%), radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.03), transparent 40%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } .hero > * { position: relative; z-index: 1; } .hero .container { display: grid; gap: var(--s-5); } .hero h1 { color: var(--paper); } .hero .lead { max-width: 640px; color: rgba(255,255,255,0.82); } .hero-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); } @media (min-width: 768px) { .hero { padding: var(--s-10) 0; } } .hero.home { min-height: 78vh; display: flex; align-items: center; } .hero.home h1 { font-size: clamp(3rem, 10vw, 7.5rem); line-height: 0.92; } .hero.home .since-tag { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .hero.home .since-tag .year { color: var(--paper); border: 1px solid rgba(255,255,255,0.3); padding: 0.25rem 0.625rem; border-radius: var(--radius-sm); } .hero.page { padding: var(--s-8) 0 var(--s-9); } .hero.page h1 { font-size: clamp(2.5rem, 7vw, 5rem); } /* ========================================================================== Marquee (subtle moving strip) ========================================================================== */ .marquee { background: var(--ink); color: var(--paper); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); overflow: hidden; padding: var(--s-4) 0; } .marquee-track { display: flex; width: max-content; animation: marquee 64s linear infinite; white-space: nowrap; font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0.18em; text-transform: uppercase; } /* trailing margin (not flex gap) on every item so the duplicated track tiles exactly at translateX(-50%) — a seamless loop, no stutter at the wrap. */ .marquee-track span { display: inline-flex; align-items: center; gap: var(--s-9); margin-right: var(--s-9); } .marquee-track span::after { content: "★"; color: var(--red); font-size: 0.75rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Sponsor logo strip — a calm auto-scrolling marquee of sponsor logos (community home page). Logos injected by js/sponsor-strip.js. */ .sponsor-marquee { overflow: hidden; margin-top: var(--s-6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .sponsor-marquee__track { display: flex; align-items: center; width: max-content; animation: sponsorScroll 110s linear infinite; } /* (no hover pause — the logos are decorative, so the marquee keeps scrolling) */ /* trailing margin (not flex gap) so the duplicated track tiles exactly at -50% */ .sponsor-marquee__item { flex: none; display: inline-flex; align-items: center; margin-right: var(--s-8); } .sponsor-marquee__item img { height: 54px; width: auto; max-width: 160px; object-fit: contain; opacity: 0.82; transition: opacity 0.2s var(--ease); } .sponsor-marquee__item img:hover { opacity: 1; } @keyframes sponsorScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .sponsor-marquee { -webkit-mask-image: none; mask-image: none; } .sponsor-marquee__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: var(--s-5) var(--s-7); } .sponsor-marquee__item { margin-right: 0; } } /* ========================================================================== Stat strip ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .stat { background: var(--paper); padding: var(--s-6) var(--s-5); text-align: center; } .stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--ink); } .stat .num .red { color: var(--red); } .stat .label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-2); } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stats.dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); } .stats.dark .stat { background: var(--ink); } .stats.dark .stat .num { color: var(--paper); } .stats.dark .stat .label { color: rgba(255,255,255,0.5); } /* ========================================================================== Club split (Community / Seniors selector cards on Home) ========================================================================== */ .club-split { padding: var(--s-9) 0; } .club-split-head { text-align: center; max-width: 640px; margin: 0 auto var(--s-7); } .club-split-head .eyebrow { justify-content: center; margin-bottom: var(--s-3); } .club-split-head h2 { margin-bottom: var(--s-3); } .club-split-head p { color: var(--muted); } .club-split-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; } @media (min-width: 880px) { .club-split-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } } .club-card { position: relative; background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); text-decoration: none; } .club-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); } .club-card-media { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--ink-soft); } .club-card-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6) grayscale(0.3) contrast(1.05); transition: filter 0.5s var(--ease), transform 0.7s var(--ease); } .club-card:hover .club-card-media img { filter: brightness(0.78) grayscale(0.05) contrast(1.05); transform: scale(1.04); } .club-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(15,15,16,0.55) 100%); pointer-events: none; } .club-card-tag { position: absolute; top: var(--s-5); left: var(--s-5); z-index: 1; font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper); padding: 0.3125rem 0.75rem; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; } .club-card-body { padding: var(--s-7) var(--s-6) var(--s-7); flex: 1; display: flex; flex-direction: column; } .club-card-body h2 { color: var(--paper); font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1; margin: 0 0 var(--s-4); } .club-card-body p { color: rgba(255,255,255,0.72); font-size: 0.9375rem; margin: 0 0 var(--s-6); flex: 1; } .club-card-meta { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); padding-top: var(--s-5); margin-bottom: var(--s-5); border-top: 1px solid rgba(255,255,255,0.1); } .club-card-meta div strong { display: block; font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.45); margin-bottom: 4px; font-weight: 400; text-transform: uppercase; } .club-card-meta div { font-size: 0.875rem; color: rgba(255,255,255,0.85); } .club-card-cta { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); padding-bottom: 4px; border-bottom: 2px solid rgba(255,255,255,0.4); align-self: flex-start; transition: border-color 0.2s var(--ease); } .club-card:hover .club-card-cta { border-color: var(--paper); } .club-card-cta .arrow { transition: transform 0.2s var(--ease); } .club-card:hover .club-card-cta .arrow { transform: translateX(6px); } /* ========================================================================== Cards ========================================================================== */ .card-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; } @media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } /* Charity page: keep CR4K the tall, dominant cell (spans both rows of the left column) while Pink Sock Day + Charlie Carr Cup stack in the right column and fill that height — evening out the gap the short card used to leave. "Watch this space" then spans full width below. Only at 2-up widths; on phones everything stacks. */ @media (min-width: 640px) { .card-grid.cols-2 .charity-hero { grid-row: span 2; } .card-grid.cols-2 .charity-span { grid-column: 1 / -1; } } /* Full-width subheading inside a .card-grid — e.g. Executive / General Committee. */ .committee-subhead { grid-column: 1 / -1; margin: var(--s-5) 0 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em; color: var(--ink); } .committee-subhead:first-child { margin-top: 0; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); } .card-media { aspect-ratio: 16 / 10; background: var(--sand); position: relative; overflow: hidden; } .card-media.tall { aspect-ratio: 4 / 5; } .card-media .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(15,15,16,0.4); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; } .card-media img, .card-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: var(--s-5) var(--s-5) var(--s-6); flex: 1; display: flex; flex-direction: column; } .card-body .meta { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .card-body .meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); } .card-body h3 { margin-bottom: var(--s-3); } /* Committee role titles are semantic

(nested under the

group subheads) but keep the visual weight/size of a card

. / .card-body h4.role-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); letter-spacing: -0.01em; margin-bottom: var(--s-3); overflow-wrap: break-word; word-break: break-word; } / Long unbreakable strings (emails, URLs, PDF names) must wrap inside the cell instead of overflowing it — e.g. drufc.registrar@gmail.com in the quick-contact cards. Applies to every card/tile/hub heading and body. / .card-body h3, .gd-hubcard h3, .tile h3, .honour-card h3, .dl-card h3, .card-body p, .gd-hubcard p, .tile p { overflow-wrap: break-word; word-break: break-word; } .card-body p { color: var(--muted); font-size: 0.9375rem; } .card-body .btn-link { margin-top: var(--s-4); align-self: flex-start; } .card.feature { background: var(--ink); color: var(--paper); border-color: var(--ink); } .card.feature p { color: rgba(255,255,255,0.72); } .card.feature .meta { color: rgba(255,255,255,0.5); } .card.feature .btn-link { color: var(--paper); border-color: var(--paper); } .card.feature .btn-link:hover { color: var(--red-soft); border-color: var(--red-soft); } .card.feature .card-media { background: var(--ink-700); } / ========================================================================== Fixture / Next match ========================================================================== / .next-match { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-5); position: relative; overflow: hidden; } .next-match::before { content: "NEXT FIXTURE"; position: absolute; top: var(--s-5); right: var(--s-5); font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.24em; color: rgba(255,255,255,0.4); } .next-match .teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5); align-items: center; } .next-match .team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); } .next-match .team-badge { width: 64px; height: 64px; background: rgba(255,255,255,0.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.05em; color: var(--paper); } .next-match .team-badge.us { background: var(--red); } .next-match .team-name { font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; } .next-match .vs { font-family: var(--font-display); font-size: 1.5rem; color: rgba(255,255,255,0.4); font-weight: 300; } .next-match .meta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-4) var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.875rem; color: rgba(255,255,255,0.72); } .next-match .meta-row strong { display: block; font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.4); margin-bottom: 4px; font-weight: 400; } @media (min-width: 768px) { .next-match { padding: var(--s-7) var(--s-7); } } / ========================================================================== Split (50/50) layouts ========================================================================== / .split { display: grid; gap: var(--s-7); align-items: center; } @media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); } .split.tilt { grid-template-columns: 5fr 7fr; } .split.tilt-r { grid-template-columns: 7fr 5fr; } } .media-block { aspect-ratio: 4 / 5; background: var(--sand); border-radius: var(--radius); position: relative; overflow: hidden; } .media-block.wide { aspect-ratio: 5 / 4; } .media-block .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(15,15,16,0.35); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; } .media-block img, .media-block svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } / ========================================================================== Timeline ========================================================================== / .timeline { position: relative; padding-left: var(--s-7); border-left: 2px solid var(--line); display: grid; gap: var(--s-7); } .timeline-item { position: relative; } .timeline-item::before { content: ""; position: absolute; top: 6px; left: calc(var(--s-7) -1 - 1px); width: 14px; height: 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; margin-left: -6px; } .timeline-item .year { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--red); margin-bottom: var(--s-2); letter-spacing: 0.02em; } .timeline-item h3 { margin-bottom: var(--s-2); } .timeline-item p { color: var(--muted); max-width: 560px; } /* ========================================================================== Values / Feature grid ========================================================================== / .feature { padding: var(--s-6) 0; border-top: 1px solid var(--line); } .feature:last-child { border-bottom: 1px solid var(--line); } .feature-grid { display: grid; gap: var(--s-5); } @media (min-width: 768px) { .feature { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-7); align-items: start; } .feature .index { font-family: var(--font-display); font-size: 3rem; font-weight: 600; color: var(--red); line-height: 1; } } .feature .index { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; color: var(--red); line-height: 1; margin-bottom: var(--s-2); } .feature h3 { margin-bottom: var(--s-3); } .feature p { color: var(--muted); max-width: 640px; } / ========================================================================== Tables (fixtures) ========================================================================== / .fixtures-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .fixtures-table caption { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-align: left; padding-bottom: var(--s-3); } .fixtures-table th { text-align: left; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); } .fixtures-table td { padding: var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; } .fixtures-table tr:hover td { background: var(--sand); } .fixtures-table .date { font-family: var(--font-display); letter-spacing: 0.04em; } .fixtures-table .matchup { font-weight: 500; } .fixtures-table .result { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; } .fixtures-table .result.win { color: var(--red); } .fixtures-table .result.loss { color: var(--muted); } .fixtures-table .result.draw { color: var(--ink); } .fixtures-table .grade { display: inline-block; font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); } .table-scroll { overflow-x: auto; } / Tab strip / .tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); } .tabs button { padding: 0.625rem 1.125rem; font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-radius: var(--radius-sm); transition: all 0.2s var(--ease); } .tabs button:hover { color: var(--ink); } .tabs button.active { background: var(--ink); color: var(--paper); } / ========================================================================== Forms ========================================================================== / .form { display: grid; gap: var(--s-5); } .form-row { display: grid; gap: var(--s-5); } @media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: var(--s-2); } .field label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } / On a dark section the form labels must be light — otherwise they're ink-on-dark (invisible). Fixes the contact form and any form inside a .section.dark. / .section.dark .field label { color: rgba(255, 255, 255, 0.82); } .field input, .field textarea, .field select { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.875rem 1rem; font-size: 1rem; transition: border-color 0.2s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); } .field textarea { resize: vertical; min-height: 140px; } / ========================================================================== Sponsor wall ========================================================================== / .sponsor-wall { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .sponsor-wall .slot { background: var(--paper); aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; padding: var(--s-4); transition: background 0.2s var(--ease); overflow: hidden; } .sponsor-wall .slot:hover { background: var(--sand); } .sponsor-wall .slot img { max-width: 88%; max-height: 88%; width: auto; height: auto; object-fit: contain; filter: grayscale(0.12); transition: filter 0.25s var(--ease), transform 0.4s var(--ease); } .sponsor-wall .slot:hover img { filter: grayscale(0) contrast(1.04); transform: scale(1.04); } / For logos designed white-on-transparent (only readable on dark backgrounds). / .sponsor-wall .slot.dark-bg { background: var(--ink); } .sponsor-wall .slot.dark-bg:hover { background: var(--ink-soft); } .sponsor-wall .slot.dark-bg img { filter: grayscale(0); } / For white-on-transparent logos where we want a clean white slot instead of a dark backing — flip the logo colour with CSS. Used for Shiels+Co. / .sponsor-wall .slot.invert img { filter: invert(1) hue-rotate(180deg); } .sponsor-wall .slot.invert:hover img { filter: invert(1) hue-rotate(180deg) contrast(1.05); } / Placeholder slot for sponsors whose logo we don't yet have. / .sponsor-wall .slot.tbd { background: var(--paper-warm); border: 1px dashed var(--line-strong); color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.18em; line-height: 1.4; } .sponsor-wall .slot.tbd:hover { background: var(--sand); } / Name+suburb placeholder shown inside a slot when an (admin-added) sponsor has no logo yet. / .sponsor-wall .slot .slot-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0.5rem; text-align: center; line-height: 1.2; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--ink); } .sponsor-wall .slot .slot-ph small { font-weight: 400; font-size: 0.72rem; color: var(--muted); letter-spacing: 0; } .sponsor-wall.cols-3 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .sponsor-wall.cols-3 { grid-template-columns: repeat(3, 1fr); } .sponsor-wall.cols-4 { grid-template-columns: repeat(4, 1fr); } } .sponsor-tier { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-4); justify-content: center; } .sponsor-tier::before, .sponsor-tier::after { content: ""; flex: 1; max-width: 80px; height: 1px; background: var(--line); } / ========================================================================== Sponsor detail modal ========================================================================== / .sponsor-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(15, 15, 16, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: var(--s-4); opacity: 0; transition: opacity 0.25s var(--ease); } .sponsor-modal.open { display: flex; opacity: 1; } .sponsor-modal-card { background: var(--paper); border-radius: var(--radius-lg); max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; position: relative; transform: translateY(12px); transition: transform 0.25s var(--ease); box-shadow: var(--shadow-strong); } .sponsor-modal.open .sponsor-modal-card { transform: translateY(0); } .sponsor-modal-close { position: absolute; top: var(--s-4); right: var(--s-4); width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-family: var(--font-display); font-weight: 300; line-height: 1; z-index: 1; cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .sponsor-modal-close:hover { background: var(--ink); color: var(--paper); transform: rotate(90deg); } .sponsor-modal-logo { background: var(--paper); min-height: 220px; max-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); padding: var(--s-5); } .sponsor-modal-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .sponsor-modal-body { padding: var(--s-6) var(--s-6) var(--s-6); } .sponsor-modal-body .meta { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); } .sponsor-modal-body h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: var(--s-2); } .sponsor-modal-body .subtitle { font-size: 1rem; color: var(--muted); margin-bottom: var(--s-5); } .sponsor-modal-info { display: grid; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); margin-bottom: var(--s-5); } .sponsor-modal-info .row { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: var(--s-4); font-size: 0.9375rem; } .sponsor-modal-info .label { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .sponsor-modal-info .value { color: var(--ink); word-break: break-word; } .sponsor-modal-info .value a { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: border-color 0.2s var(--ease); } .sponsor-modal-info .value a:hover { border-color: var(--ink); } .sponsor-modal-info .value.muted { color: var(--muted-soft); font-style: italic; } .sponsor-modal-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } .sponsor-modal-tag { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding: 0.25rem 0.625rem; border: 1px solid var(--line-strong); border-radius: 999px; margin-bottom: var(--s-4); } body.modal-open { overflow: hidden; } / ========================================================================== Steps (1-2-3) ========================================================================== / .steps { display: grid; gap: var(--s-5); counter-reset: step; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6) var(--s-5); counter-increment: step; position: relative; } .step::before { content: "0" counter(step); display: block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--red); line-height: 1; margin-bottom: var(--s-4); } .step h3 { margin-bottom: var(--s-3); } .step p { color: var(--muted); } / ========================================================================== FAQ ========================================================================== / .faq-list { display: grid; gap: 0; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.02em; text-transform: uppercase; transition: color 0.2s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--red); } .faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; transition: transform 0.25s var(--ease); color: var(--red); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { color: var(--muted); padding-bottom: var(--s-5); max-width: 720px; } / ========================================================================== Pull quote ========================================================================== / .pullquote { border-left: 4px solid var(--red); padding-left: var(--s-5); max-width: 780px; } .pullquote q { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; quotes: none; margin-bottom: var(--s-4); } .pullquote q::before, .pullquote q::after { content: none; } .pullquote cite { font-style: normal; font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } / ========================================================================== CR4K banner ========================================================================== / .cr4k-banner { background: var(--red); color: var(--paper); border-radius: var(--radius-lg); padding: var(--s-7) var(--s-5); display: grid; gap: var(--s-5); position: relative; overflow: hidden; } .cr4k-banner::after { content: ""; position: absolute; top: -20%; right: -10%; width: 360px; height: 360px; background: rgba(255,255,255,0.05); border-radius: 50%; pointer-events: none; } .cr4k-banner .eyebrow { color: rgba(255,255,255,0.8); } .cr4k-banner .eyebrow::before { background: rgba(255,255,255,0.6); } .cr4k-banner h2 { color: var(--paper); max-width: 720px; } .cr4k-banner p { color: rgba(255,255,255,0.85); max-width: 600px; } .cr4k-banner .btn-link { color: var(--paper); border-color: var(--paper); } @media (min-width: 768px) { .cr4k-banner { padding: var(--s-8); } } / ========================================================================== Footer ========================================================================== / .site-footer { background: var(--ink); color: var(--paper); padding: var(--s-8) 0 var(--s-6); } .footer-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; margin-bottom: var(--s-8); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-brand .nav-brand { color: var(--paper); margin-bottom: var(--s-4); } .footer-brand .nav-brand small { color: rgba(255,255,255,0.5); } .footer-brand p { color: rgba(255,255,255,0.7); max-width: 320px; font-size: 0.9375rem; } .footer-col h5 { font-size: 0.75rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.5); margin-bottom: var(--s-4); } .footer-col ul { display: grid; gap: var(--s-2); } .footer-col a { color: rgba(255,255,255,0.8); font-size: 0.9375rem; transition: color 0.2s var(--ease); } .footer-col a:hover { color: var(--red-soft); } / "One club, two sides" footer used on the overall/club pages: the brand sits on the LEFT with the club links nested beneath it, then Community League (centre) and Premier League (right). Side pages keep the default 4-track grid. / .footer-grid.footer-grid--club { grid-template-columns: 1fr; } @media (min-width: 768px) { .footer-grid.footer-grid--club { grid-template-columns: 2fr 1fr 1fr; align-items: start; } } .footer-col--brandsub { margin-top: var(--s-6); } / External-link cue — one consistent icon for links that open off-site, replacing the inconsistent ↗ glyph (which renders as a coloured emoji on some systems). Skips buttons (they carry their own → arrow), the nav side-switch CTAs, resource tiles (already badged "External"), social icons, and anything marked .no-ext. / a[target="_blank"]:not(.btn):not(.nav-cta):not(.tile):not(.map-link):not(.nbfbcard):not(.nbigcard):not(.no-ext)::after { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.3em; vertical-align: -0.02em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Cpath d='M9 6h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Cpath d='M9 6h9v9'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.7; } / Links that already carry their own glyph (social icons, map pins, live-feed cards) shouldn't get a second one. / .footer-socials a::after, .nb a[target="_blank"]::after { content: none; } .footer-socials { display: flex; gap: var(--s-3); margin-top: var(--s-4); } .footer-socials a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s var(--ease); } .footer-socials a:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); } .footer-socials svg { width: 16px; height: 16px; } .footer-bottom { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.8125rem; color: rgba(255,255,255,0.5); } .footer-bottom .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); } .footer-bottom .acknowledge { font-style: italic; max-width: 720px; line-height: 1.5; } / Long unbreakable strings (emails, filenames) must never escape a card. / .card, .gd-hubcard, .tile, .dl-card, .perk-card, .honour-card { overflow-wrap: anywhere; } .footer-powered { display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; } .footer-powered img { height: 26px; width: auto; display: block; } / ========================================================================== Utilities ========================================================================== / .muted { color: var(--muted); } .center { text-align: center; } .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); } .hide-mobile { display: none; } .hide-desktop { display: block; } @media (min-width: 768px) { .hide-mobile { display: block; } .hide-desktop { display: none; } } / Reveal on scroll / .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none; } } / ========================================================================== Ground-status banner — rendered by js/site-banner.js across every page. green = grounds open · red = a closure · orange = pending review. A solid coloured bar with one clear, static status line (no scrolling). ========================================================================== / #site-status-banner { display: none; } #site-status-banner.fsb--visible { display: block; / sits in normal flow, directly BELOW the nav bar and above the page content (no longer a top strip) / } .fsb { overflow: hidden; color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .fsb--open { background: #157f3c; } / green / .fsb--closed { background: #c0331d; } / red / .fsb--pending { background: #c2760c; } / orange / / one clear, static status line — centred on the solid coloured bar / .fsbstatic { text-align: center; padding: 0.4rem 1.2rem; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } / Split status bar — one coloured segment per ground (js/site-banner.js builds .fsbseg--{open|closed|pending}); each block is painted by its OWN status, so a mix of open/closed/pending shows as coloured thirds. / .fsbtrack { display: flex; } / Each field + its status text is centred (horizontally AND vertically) inside its own colour block — the segment is a flex container so the text sits dead-centre. / .fsbseg { flex: 1 1 0; min-width: 0; color: #fff; display: flex; align-items: center; justify-content: center; / subtle live "glow / pulse" so the status quietly draws the eye / animation: fsb-pulse 2.6s ease-in-out infinite; } .fsbseg .fsbstatic { min-width: 0; animation: fsb-glow 2.6s ease-in-out infinite; } .fsbseg + .fsbseg { border-left: 2px solid #fff; } / clear white break between blocks / .fsbseg--open { background: #157f3c; } / green / .fsbseg--closed { background: #c0331d; } / red / .fsbseg--pending { background: #c2760c; } / orange / / tap a field block to open its competition-field pink highlight (js/site-banner.js) / .fsbseg--tap { cursor: pointer; } .fsbseg--tap:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } .fsbzoom { margin-left: 0.4em; opacity: 0.72; font-size: 0.92em; } .fsbseg--tap:hover .fsbzoom { opacity: 1; } / the block gently "breathes" brighter with a soft inner glow… / @keyframes fsb-pulse { 0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); } 50% { filter: brightness(1.18); box-shadow: inset 0 0 22px 0 rgba(255, 255, 255, 0.30); } } / …and the text picks up a matching halo on the beat. / @keyframes fsb-glow { 0%, 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); } 50% { text-shadow: 0 0 9px rgba(255, 255, 255, 0.55); } } / respect users who prefer no motion / @media (prefers-reduced-motion: reduce) { .fsbseg, .fsbseg .fsbstatic { animation: none; } } @media (max-width: 560px) { .fsbseg .fsbstatic { padding: 0.4rem 0.5rem; letter-spacing: 0.06em; font-size: 0.68rem; } } / ============================================================ Liles Oval fixtures board (.lof) — this week's home games. Monochrome, fed by data/fixtures-liles.json. ============================================================ / .lof { margin-top: var(--s-7); } .lofhead { text-align: center; margin-bottom: var(--s-7); } .lofeyebrow { display: inline-block; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); } .lofdate { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.1; margin: 0 0 var(--s-2); } .lofmeta { color: var(--muted); font-size: 0.9rem; margin: 0; } / Squadi-is-the-source notice (Cade 2026-07-15) — a calm, clearly-visible line under the board heading: Squadi owns the draw, this board shows which of our pitches each home game is on. / .lofsource { margin: var(--s-3) 0 0; padding: var(--s-3); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 8px; background: var(--sand, #f6f3ec); color: var(--muted); font-size: 0.85rem; line-height: 1.5; } .lofsource strong { color: var(--ink); } .lofslot { margin-top: var(--s-6); } .lofslot:first-child { margin-top: 0; } .loftime { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-strong); } .lofgames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); } .lofgames li { display: contents; } .lofgame { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .lofgame:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .lofgame:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } / Forfeited / cancelled game (Cade 2026-07-14) — struck through on the public board, "the line, not removal". Set on the Edit-fixtures page; DARK (no push). / .lofgame--off .lofteams { text-decoration: line-through; opacity: 0.55; } .lofgame--off .loffield { opacity: 0.5; } .lofbadge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 5px; background: #ececec; color: #8a2f27; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; } .lofgo { color: var(--muted-soft); font-size: 1.3rem; line-height: 1; transition: transform 0.15s var(--ease), color 0.15s var(--ease); } .lofgame:hover .lofgo { color: var(--ink); transform: translateX(2px); } .loffield { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); min-width: 2.6em; height: 2.6em; padding: 0 0.4em; display: inline-flex; align-items: center; justify-content: center; } .lofdetail { min-width: 0; } .lofage { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; } .lofteams { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; font-size: 0.95rem; line-height: 1.35; } .lofteam { color: var(--ink-700); } .lofteam--us { color: var(--ink); font-weight: 700; } .lofvs { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-soft); } .loffoot { margin-top: var(--s-7); text-align: center; color: var(--muted); font-size: 0.875rem; } .lofnone { text-align: center; color: var(--muted); padding: var(--s-8) 0; } .lofsquadi { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .lofsquadi:hover { color: var(--muted); } .lof--loading .lofnone { padding: var(--s-7) 0; } @media (max-width: 520px) { .lofgame { gap: var(--s-3); padding: var(--s-3); } .loffield { min-width: 2.3em; height: 2.3em; font-size: 0.85rem; } .lofsquadi { white-space: normal; } / the Squadi link must wrap on phones / } / Day tabs (Fri / Sat / Sun) for the fixtures board / .loftabs { display: flex; flex-wrap: wrap; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-6); } .loftab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--muted); transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .loftab span { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); } .loftab:hover { color: var(--ink); } .loftab.is-active { color: var(--ink); border-bottom-color: var(--ink); } .loftab.is-active span { color: var(--muted); } .lofpanel[hidden] { display: none; } @media (max-width: 520px) { .loftabs { gap: 0; flex-wrap: nowrap; } .loftab { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; padding: var(--s-3) var(--s-1); font-size: 0.95rem; } .loftab span { font-size: 0.625rem; line-height: 1.2; } } / Game detail modal + grounds-map highlight / .lof-modal { position: fixed; inset: 0; width: 100vw; / pin to the visual viewport, not the page scrollWidth / overflow: hidden; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--s-4); } .lof-modal[hidden] { display: none; } .lof-modalbackdrop { position: absolute; inset: 0; background: rgba(15, 15, 16, 0.55); } .lof-modalcard { position: relative; z-index: 1; width: 100%; min-width: 0; / Single-column card (text at top, dominant map below) — narrower than the old two-column layout so the text block reads well and the map still dominates. / max-width: min(94vw, 860px); max-height: 92vh; overflow: auto; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-strong); padding: var(--s-6); } .lof-modalclose { position: absolute; top: var(--s-3); right: var(--s-4); background: none; border: 0; cursor: pointer; font-size: 1.75rem; line-height: 1; color: var(--muted); } .lof-modalclose:hover { color: var(--ink); } .lof-modalage { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); } .lof-modalteams { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 var(--s-2); } .lof-modalwhen { color: var(--muted); font-size: 0.9rem; margin: 0; } / Detail modal — ONE column (Cade 2026-07-15): all the text (grade, teams, when, referee, field name) sits neatly at the TOP, then the field MAP is the dominant element beneath it. This REPLACED a two-column grid (details left | field right) whose short text column left a large empty space beside the tall map. / .lof-modalgrid { display: block; } .lof-modalinfo, .lof-modalfield { min-width: 0; } .lof-modalinfo { margin-bottom: var(--s-4); } .lof-modalfield .lof-map { margin: 0 0 var(--s-3); } / The map is the point of the card — let it fill the width, bounded so the card still fits the viewport without a long scroll. / .lof-modalfield .lof-mapimg { width: 100%; height: auto; max-height: 62vh; object-fit: contain; } .lof-modalfield .lof-modalmap { margin-top: var(--s-2); } .lof-map { position: relative; margin: var(--s-5) 0 var(--s-4); background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; } .lof-map:focus-visible { outline: 2px solid #157f3c; outline-offset: 2px; } .lof-map svg, .lof-map img { display: block; width: 100%; height: auto; max-width: 100%; } .lof-maphint { position: absolute; right: var(--s-2); top: var(--s-2); display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; color: #fff; background: rgba(15, 15, 16, 0.6); border-radius: 999px; pointer-events: none; } .lof-map:hover .lof-maphint { background: rgba(15, 15, 16, 0.8); } .lof-map .lof-zone { transition: opacity 0.25s var(--ease); } .lof-map[data-active] .lof-zone { opacity: 0.3; } .lof-map[data-active="1"] [data-zone="1"], .lof-map[data-active="2"] [data-zone="2"], .lof-map[data-active="3"] [data-zone="3"] { opacity: 1; } .lof-map[data-active="1"] [data-zone="1"] .lof-zonefield, .lof-map[data-active="2"] [data-zone="2"] .lof-zonefield, .lof-map[data-active="3"] [data-zone="3"] .lof-zonefield { stroke: #157f3c; stroke-width: 5; } / Enlarged field-map lightbox — layered above the detail modal (z-index 200) / .lof-zoom { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 0.5rem; background: rgba(15, 15, 16, 0.9); cursor: zoom-out; } .lof-zoom[hidden] { display: none; } / Enlarge AS LARGE AS THE SCREEN ALLOWS. The ground maps are vector SVGs, so upscaling past their natural size stays crisp: fill the viewport height on wide screens (width auto keeps aspect), and fill the width instead on portrait/narrow screens (below). / .lof-zoomimg { height: calc(100vh - 1rem); width: auto; max-width: calc(100vw - 1rem); border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); } @media (max-aspect-ratio: 3 / 2) { .lof-zoomimg { height: auto; width: calc(100vw - 1rem); max-width: none; } } .lof-zoomclose { position: absolute; top: var(--s-3); right: var(--s-4); background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; } .lof-modalwhere { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; margin: 0; font-size: 1rem; } .lof-modalwhere strong { font-family: var(--font-display); } .lof-modalwhere > span { color: var(--muted); font-size: 0.85rem; flex-basis: 100%; } @media (max-width: 520px) { .lof-modal { padding: 0; align-items: flex-end; } .lof-modalcard { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } / ========================================================================== Community noticeboard (admin-pinned notices + live Facebook feed) ========================================================================== / .nb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s-6); margin-top: var(--s-7); align-items: start; } .nbcolhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); } .nbkicker { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .nbmore { font-size: 0.8125rem; color: var(--muted); } .nbmore:hover { color: var(--ink); } .nbcol--notices { display: flex; flex-direction: column; gap: var(--s-4); } / Vertical announcement scroller — the latest two sit in view; older ones scroll up into place (touch on mobile, wheel/trackpad on desktop). / .nbcol--notices--scroll { max-height: 460px; / fallback (mobile / when FB+IG feeds are short); JS matches the exact depth to the FB/IG columns when they sit side-by-side / overflow-y: auto; scroll-snap-type: y proximity; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .nb .nbcol--notices--scroll { scrollbar-color: rgba(0,0,0,0.3) transparent; } .nbcol--notices--scroll .nbnotice { scroll-snap-align: start; } .nbcol--notices--scroll::-webkit-scrollbar { width: 8px; } .nbcol--notices--scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 8px; } .nbcol--notices--scroll::-webkit-scrollbar-track { background: transparent; } .nbnotice { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-sm); } .nbtag { display: inline-block; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: var(--red); padding: 2px 8px; border-radius: 3px; margin-bottom: var(--s-3); } .nbimg { display: block; width: 100%; max-height: 104px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--s-3); } .nb-modalimg { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--radius-sm); margin: 0 0 var(--s-4); background: rgba(0,0,0,0.04); } .nbtitle { margin: 0 0 var(--s-2); font-size: 1.15rem; } .nbbody { margin: 0 0 var(--s-3); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nbdate { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nb-date); } .nbempty { color: var(--muted); } / Notice cards use the light --paper background but sit inside the dark noticeboard section, so their title/body would inherit the section's white text and vanish. Re-assert dark text, scoped under .nb with enough specificity to win the cascade. / .nb .nbnotice { color: var(--ink); } .nb .nbnotice .nbtitle { color: var(--ink) !important; } .nb .nbnotice .nbbody { color: var(--ink) !important; } .nb .nbnotice .nbdate { color: var(--nb-date) !important; } / Clickable notice cards → tap to expand the full announcement in a modal. / .nb .nbnotice { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .nb .nbnotice:hover, .nb .nbnotice:focus-visible { border-color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,0.18); transform: translateY(-2px); outline: none; } .nbmore { display: inline-block; margin-top: 0.4rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .nb .nbnotice .nbmore { color: var(--red) !important; } / Announcement detail modal / .nb-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--s-5); } .nb-modal[hidden] { display: none; } .nb-modalbackdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); } .nb-modaldialog { position: relative; width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: var(--s-7) var(--s-6) var(--s-6); box-shadow: 0 24px 60px rgba(0,0,0,0.4); } .nb-modalclose { position: absolute; top: var(--s-3); right: var(--s-3); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(0,0,0,0.06); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; } .nb-modalclose:hover { background: rgba(0,0,0,0.12); } .nb-modaltag { display: inline-block; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: var(--red); padding: 2px 8px; border-radius: 3px; margin-bottom: var(--s-3); } .nb-modaltitle { margin: 0 0 var(--s-2); font-size: 1.5rem; color: var(--ink); } .nb-modaldate { display: block; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nb-date); margin-bottom: var(--s-4); } .nb-modalbody { color: var(--ink); line-height: 1.6; } .nb-modalbody p { margin: 0 0 var(--s-3); } .nb-modalbody p:last-child { margin-bottom: 0; } .nb-modalbody h4 { margin: var(--s-4) 0 var(--s-2); font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); } .nb-modalbody ul, .nb-modalbody ol { margin: 0 0 var(--s-3); padding-left: 1.4rem; } .nb-modalbody ul { list-style: disc; } .nb-modalbody ol { list-style: decimal; } .nb-modalbody li { margin: 0 0 0.25rem; display: list-item; list-style-position: outside; } .nb-modalbody a { color: var(--red); text-decoration: underline; } .nb-modalbody a:hover { text-decoration: none; } .nb-modalbody img { max-width: 100%; height: auto; border-radius: 8px; margin: var(--s-3) 0; } .nb-modalbody strong, .nb-modalbody b { font-weight: 700; } .nb-modallink { display: inline-block; margin-top: var(--s-5); font-family: var(--font-display); font-weight: 600; color: var(--red); text-decoration: none; } .nb-modallink:hover { text-decoration: underline; } / Compact title cards: clamp the title to 2 lines + a single footer row (date · Read more). / .nb .nbnotice .nbtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nbcardfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); } .nbcardfoot .nbdate, .nbcardfoot .nbmore { margin: 0; } .nbfb { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .nbfb iframe { display: block; width: 100%; border: 0; } / Noticeboard Instagram column — live post grid (/api/instagram) + follow card / .nbcol--ig { display: flex; flex-direction: column; gap: var(--s-4); } .nbiggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--radius); overflow: hidden; } .nbiggrid[hidden] { display: none; } .nbigitem { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink-soft); } .nbigitem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); } .nbigitem:hover img { transform: scale(1.06); } / Reusable Instagram post grid (Community page "Community updates" section) / .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--s-5); } .ig-grid[hidden] { display: none; } .ig-griditem { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink-soft); } .ig-griditem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); } .ig-griditem:hover img { transform: scale(1.06); } .nbigcard { display: flex; align-items: center; gap: var(--s-4); background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); color: var(--paper); text-decoration: none; border-radius: var(--radius); padding: var(--s-5) var(--s-6); box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .nbigcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .nbigcard svg { flex: none; } .nbigtext { display: flex; flex-direction: column; line-height: 1.25; } .nbigtext strong { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: 0.5px; } .nbigtext > span { font-size: 0.8125rem; opacity: 0.92; margin-top: 2px; } / Facebook post grid + follow card — mirrors the Instagram grid, FB-blue card. / .nbfbgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--radius); overflow: hidden; } .nbfbgrid[hidden] { display: none; } .nbfbitem { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink-soft); } .nbfbitem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); } .nbfbitem:hover img { transform: scale(1.06); } .nbfbcard { display: flex; align-items: center; gap: var(--s-4); background: linear-gradient(135deg, #1877F2 0%, #0a52c7 100%); color: var(--paper); text-decoration: none; border-radius: var(--radius); padding: var(--s-5) var(--s-6); box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .nbfbcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .nbfbcard svg { flex: none; } / Split noticeboard — Community league | Senior league (coming soon) / .nbleague { display: flex; flex-direction: column; gap: var(--s-4); } .nbleaguehead { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); margin-bottom: var(--s-2); border-bottom: 2px solid var(--ink); } .nbleaguename { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); } .nbbadge { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; } .nbbadge--live { color: var(--paper); background: var(--ink); } .nbbadge--soon { color: var(--muted); background: transparent; border: 1px solid var(--line); } .nbcells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } .nbcell { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow-sm); min-height: 88px; } .nbcell .nbtag { align-self: flex-start; margin-bottom: 2px; } .nbcelltitle { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: var(--ink); } .nbcelldate { margin-top: auto; font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nb-date); } .nbsocial { display: flex; flex-direction: column; gap: var(--s-4); } .nbleague--soon { opacity: 0.7; } .nbleague--soon .nbleaguename { color: var(--muted); } / On the dark home board the league title + divider must be light to be visible. / .section.dark .nbleaguename { color: var(--paper); } .section.dark .nbleaguehead { border-bottom-color: rgba(255, 255, 255, 0.22); } .nbcell--soon { min-height: 88px; border-style: dashed; background: transparent; box-shadow: none; } .nbsoon { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--s-6); min-height: 140px; color: var(--muted-soft); font-size: 0.875rem; } / Rotating announcement gallery (one big dominant cell per league) / .nbgallery { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--s-5) 2.5rem; overflow: hidden; } .nbgallery--empty { padding: var(--s-6); display: flex; align-items: center; justify-content: center; min-height: 120px; text-align: center; } / The gallery is a white (--paper) card; inside .section.dark the theme colours its text light, which is invisible on the card. Restore the card's own dark text. / .section.dark .nbgallery .nbslidetitle { color: var(--ink); } .section.dark .nbgallery .nbslidebody, .section.dark .nbgallery .nbempty, .section.dark .nbgallery .nbslidecap { color: var(--muted); } .section.dark .nbgallery .nbslidedate { color: var(--muted-soft); } .nbslides { position: relative; min-height: 172px; } .nbslide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease); } .nbslide.is-active { opacity: 1; visibility: visible; } .nbslide .nbtag { align-self: flex-start; } .nbslidetitle { margin: 0 0 var(--s-2); font-size: 1.35rem; line-height: 1.2; } .nbslidebody { margin: 0 0 var(--s-3); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nbslidedate { margin-top: auto; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-soft); } .nbdots { display: flex; gap: 7px; justify-content: center; margin-top: var(--s-4); } .nbdot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.2s var(--ease); } .nbdot.is-active { background: var(--ink); } .nbarw { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; z-index: 2; } .nbarw:hover { border-color: var(--muted); } .nbarw--prev { left: 6px; } .nbarw--next { right: 6px; } / Social feeds: rotating gallery of the latest posts (image cards), reusing the announcements carousel mechanics (one dominant cell, dots/arrows, auto-rotate). / .nbgallery--media { padding: 0; } .nbslides--media { min-height: 0; aspect-ratio: 1 / 1.18; } .nbslide--media { display: flex; flex-direction: column; } .nbslide--media img { width: 100%; flex: 1 1 0; min-height: 0; object-fit: contain; display: block; } .nbslidecap { flex: none; margin: 0; padding: 7px 11px 9px; font-size: 0.78rem; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nbgallery--media .nbarw { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .nbgallery--media .nbdots { margin: 8px 0 4px; } .nbgallery--media .nbdot { background: rgba(255, 255, 255, 0.5); } .nbgallery--media .nbdot.is-active { background: #fff; } / Community-page noticeboard (single league): condense the announcements, Facebook and Instagram into a side-by-side row instead of a tall narrow stack. The league head spans the full width above the three columns, which collapse to 2-up then 1-up on smaller screens. / .nb--solo { grid-template-columns: minmax(0, 1fr); } .nb--solo .nbleague { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s-5); align-items: start; } .nb--solo .nbleague .nbleaguehead { grid-column: 1 / -1; } / Game-day popup: directions link / .lof-modalmap { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 0.625rem 1.125rem; border-radius: var(--radius-sm); } .lof-modalmap:hover { background: #157f3c; } / Expandable card detail (native
) — community events cells / .card-more { margin-top: var(--s-3); } .card-more > summary { cursor: pointer; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); list-style: none; padding: 0.5rem 0; min-height: 44px; / a comfortable tap height on phones / } .card-more > summary::-webkit-details-marker { display: none; } .card-more > summary::after { content: " +"; color: var(--muted); } .card-more[open] > summary::after { content: " −"; } .card-more > summary:hover { color: var(--red); } .card-more p { margin-top: var(--s-3); color: var(--muted); font-size: 0.9375rem; } / ========================================================================= Weekly rosters board (.rb) — canteen / MiniRoo game leaders / setup & pack-up. Rendered by js/rosters-board.js from /api/rosters (or data/rosters.json). Each roster is a card with a sand header + a simple columns/rows table. ========================================================================= / .rb { display: grid; gap: var(--s-6); margin-top: var(--s-7); grid-template-columns: 1fr; / always single column — rosters stack vertically, never side by side / align-items: start; } .rb--empty, .rb--loading { display: block; } .rbnone { text-align: center; color: var(--muted); margin: 0; padding: var(--s-8) 0; } .rb--loading .rbnone { padding: var(--s-7) 0; } .rbcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .rbhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-5) var(--s-6); background: var(--sand); border-bottom: 1px solid var(--line); } .rbtitle { margin: 0; font-size: 1.125rem; } .rbweek { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .rbnote { margin: 0; padding: var(--s-4) var(--s-6) 0; color: var(--muted); font-size: 0.9rem; } .rbscroll { overflow-x: auto; padding: var(--s-4) var(--s-6) var(--s-6); } .rbtable { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .rbtable th, .rbtable td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; } .rbtable th { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .rbtable td { color: var(--ink-soft); } .rbtable tbody tr:last-child td { border-bottom: 0; } / Game Leaders / Club Referees sub-heading row inside the game-leader roster — shown only on a mixed weekend (both MiniRoos and competition games present). / .rbtable tbody tr.rbgroup td { background: var(--sand); color: var(--ink); font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; white-space: nowrap; } / Game-leader roster: click a row to open its pitch map (fixtures-style popup) / .rbclick { cursor: pointer; } .rbclick td:first-child { position: relative; padding-left: calc(var(--s-4) + 14px); } .rbclick td:first-child::before { content: "\203A"; position: absolute; left: var(--s-4); color: var(--muted); } .rbclick:hover td, .rbclick:focus-visible td { background: var(--sand); } / Roster controls — the default-ON "My Roster" filter + the game-leader time filter / .rbcontrols { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-6) 0; } .rbmyroster { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); cursor: pointer; } .rbmyroster input { width: auto; margin: 0; accent-color: #e995b8; transform: scale(1.1); } .rbmyroster-note { margin: var(--s-3) var(--s-6) 0; color: var(--muted); font-size: 0.875rem; } .rbfilter { display: flex; align-items: center; gap: var(--s-3); padding: 0; } .rbfilter label { font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .rbfilter select { font: inherit; font-size: 1rem; / <16px triggers iOS focus auto-zoom / padding: 0.4rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); } / "This is my slot" — the signed-in Game Leader's own row(s), so a parent/child can find their table at a glance (js/rosters-board.js namesMatch() against the roster's "leader" column). / .rbmine td { background: #fbe1ec; } .rbmine.rbclick:hover td, .rbmine.rbclick:focus-visible td { background: #f6cddf; } / "Your games this week" — a leader with MORE THAN ONE game gets their own rows pulled to the front of the card, above the full table (which is untouched below). Page auto-scrolls here on a plain landing — see js/rosters-board.js. / .rbmine-box { margin: var(--s-4) var(--s-6) 0; padding: var(--s-4) var(--s-5); background: #fbe1ec; border-left: 4px solid #e995b8; border-radius: 0 var(--radius) var(--radius) 0; } .rbmine-title { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); } .rbtable--mine { background: transparent; } .rb__table--mine td { border-bottom-color: rgba(0, 0, 0, 0.08); } / ========================================================================= Nav dropdown (.nav-dd) — the "Game day" menu. Lives in both the desktop .nav-menu (opens on hover or click) and the .mobile-menu (tap to expand). The trigger is a