/* ========================================================================== Mt Eliza Netball Club — design system Palette sampled from the club logo: ball red, wordmark black, star gold. --red is the logo red, used for fills, rules and brand surfaces. It is a touch too light to carry text, so links, small caps and white-on-red buttons use --red-ink, the nearest shade that still clears WCAG AA. ========================================================================== */ :root { --red: #EB2427; --red-ink: #D81F22; --red-dark: #A81417; --black: #1B1519; --ink: #241E21; --gold: #ECB84A; --gold-soft: #F7D488; --chalk: #FAF6F0; --white: #FFFFFF; --line: #E8E0D5; --muted: #6E6560; --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif; --container: 72rem; --radius: 10px; --shadow: 0 10px 30px rgba(27, 21, 25, 0.10); /* Surfaces and text, so the dark theme can swap them in one place. Brand colours above stay the same in both themes. */ --bg: var(--chalk); --surface: var(--white); --text: var(--ink); --paper: #FAF2E5; --highlight: #FFF6DF; --strip-edge: transparent; --paper-btn-hover-bg: var(--black); --paper-btn-hover-text: var(--gold-soft); --logo-pad: 0; color-scheme: light; } /* -------------------------------------------------------------------------- Dark theme. Chosen with the header button (stored in localStorage and set as data-theme on ), or follows the system setting when the visitor has not picked one. Black header, footer and bands stay as they are; the page background, cards and text swap to dark surfaces and light ink. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #151215; --surface: #221D21; --text: #F2ECE6; --line: #3A3238; --muted: #B3A9A3; --red-ink: #FF6B6E; --red-dark: #FF9598; --paper: #2A2226; --highlight: #3A3020; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --strip-edge: var(--line); --paper-btn-hover-bg: var(--gold); --paper-btn-hover-text: var(--black); --logo-pad: 0.5rem 0.75rem; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #151215; --surface: #221D21; --text: #F2ECE6; --line: #3A3238; --muted: #B3A9A3; --red-ink: #FF6B6E; --red-dark: #FF9598; --paper: #2A2226; --highlight: #3A3020; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --strip-edge: var(--line); --paper-btn-hover-bg: var(--gold); --paper-btn-hover-text: var(--black); --logo-pad: 0.5rem 0.75rem; color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--bg); } img { max-width: 100%; display: block; } a { color: var(--red-ink); } a:hover { color: var(--red-dark); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } /* -------------------------------------------------------------------------- Signature: the "dress trim" ribbon — black band with gold stars, echoing the star band on the club dress. Used under the header/hero and in footer. -------------------------------------------------------------------------- */ .trim-band { height: 18px; background-color: var(--black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='18' viewBox='0 0 54 18'%3E%3Cpath fill='%23ECB84A' d='M27 3l1.9 4.1 4.5.5-3.3 3 .9 4.4-4-2.2-4 2.2.9-4.4-3.3-3 4.5-.5z'/%3E%3Cpath fill='%23EB2427' d='M0 8h10v2H0zM44 8h10v2H44z'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { background: var(--black); color: var(--white); position: relative; z-index: 50; } .site-header .bar { display: flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; } .brand { display: flex; align-items: center; gap: 0.65rem; flex: none; text-decoration: none; color: var(--white); } .brand .mark { flex: none; display: block; height: 3.9rem; width: auto; } .brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .brand .name small { display: block; font-size: 0.72rem; letter-spacing: 0.32em; color: var(--gold); font-weight: 600; margin-top: 0.25rem; } /* Theme button: sits at the right of the bar on desktop and beside the burger on phones. Shows a moon in the light theme and a sun in the dark. */ .theme-toggle { flex: none; order: 10; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: transparent; color: var(--white); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold-soft); } .theme-toggle svg { display: block; width: 20px; height: 20px; } .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } } /* Navigation */ .nav-toggle-input { position: absolute; opacity: 0; } .nav-toggle { display: none; margin-left: auto; cursor: pointer; padding: 0.6rem; border-radius: 6px; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 24px; height: 2.5px; background: var(--white); border-radius: 2px; position: relative; content: ""; transition: transform 0.2s ease; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; } .site-nav ul { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; } /* Nav labels must never break across two lines: a wrapped label makes the whole bar look ragged, because the taller item drags the row height with it. Sizes below are set so the full row still fits at the narrowest desktop width (67rem) before the burger menu takes over. */ .site-nav > ul > li { flex: none; } .site-nav a { display: block; color: var(--white); text-decoration: none; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 0.6rem; border-radius: 6px; white-space: nowrap; } .site-nav a:hover { color: var(--gold-soft); } .site-nav li { position: relative; } .site-nav li.open > a::after { content: " ▾"; font-size: 0.75em; color: var(--gold); } .site-nav li.open > ul { display: none; position: absolute; top: 100%; left: 0; min-width: 13rem; background: var(--black); border-top: 3px solid var(--red); border-radius: 0 0 8px 8px; padding: 0.35rem 0; flex-direction: column; align-items: stretch; box-shadow: var(--shadow); } .site-nav li.open:hover > ul, .site-nav li.open:focus-within > ul { display: flex; } .site-nav li.open > ul a { font-size: 0.98rem; padding: 0.5rem 1rem; letter-spacing: 0.08em; } .btn-register { background: var(--red-ink); color: var(--white) !important; padding: 0.55rem 1.1rem !important; border-radius: 999px; margin-left: 0.5rem; } .btn-register:hover { background: var(--red-dark); color: var(--white) !important; } /* Narrow desktop. Between the burger breakpoint and the width where the full-size row (nav plus theme button) fits beside the centred container (about 1400px) there is not enough room for the whole nav, so step the header down a notch rather than let anything wrap. */ @media (min-width: 67.0625rem) and (max-width: 88rem) { .site-header .bar { gap: 0.85rem; } .brand .mark { height: 3.2rem; } .brand .name { font-size: 1.2rem; } .brand .name small { font-size: 0.64rem; letter-spacing: 0.22em; } .site-nav a { font-size: 0.92rem; letter-spacing: 0.05em; padding: 0.5rem 0.45rem; } .btn-register { padding: 0.5rem 0.8rem !important; margin-left: 0.25rem; } .theme-toggle { width: 40px; margin-left: -0.25rem; } } @media (max-width: 67rem) { .nav-toggle { display: block; } .theme-toggle { order: 0; margin-left: auto; } .nav-toggle { margin-left: 0; } /* The burger menu leaves the brand alone on the top row, so let it shrink and wrap again on small phones rather than push the bar sideways. */ .brand { flex: 1 1 auto; min-width: 0; } .brand .name { white-space: normal; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--black); padding: 0.5rem 1.25rem 1.25rem; border-bottom: 3px solid var(--red); } .nav-toggle-input:checked ~ .site-nav { display: block; } .site-nav ul { flex-direction: column; align-items: stretch; } .site-nav li.open > ul { display: flex; position: static; border-top: none; box-shadow: none; padding-left: 1rem; } .btn-register { display: inline-block; margin: 0.75rem 0 0; text-align: center; } } /* -------------------------------------------------------------------------- Hero (home) -------------------------------------------------------------------------- */ .hero { position: relative; color: var(--white); background: var(--black); overflow: hidden; } /* Rotating background photos. Two slides cross-fade on a 16s loop; with prefers-reduced-motion the global rule stops the animation and the first slide stays on screen. */ .hero .hero-bg { position: absolute; inset: 0; } .hero .hero-bg .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: hero-rotate 16s ease-in-out infinite; } .hero .hero-bg .slide:nth-child(1) { opacity: 1; } .hero .hero-bg .slide:nth-child(2) { animation-delay: 8s; } @keyframes hero-rotate { 0% { opacity: 0; } 10%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } } .hero .scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(27, 21, 25, 0.92) 0%, rgba(168, 20, 23, 0.72) 45%, rgba(27, 21, 25, 0.25) 100%); } .hero .content { position: relative; padding: 6.5rem 0 7rem; max-width: 42rem; } .eyebrow { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; font-size: 0.9rem; color: var(--gold); margin: 0 0 1rem; } .hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 1.25rem; } .hero h1 em { font-style: normal; color: var(--gold); } .hero p.lead { font-size: 1.2rem; margin: 0 0 2rem; color: rgba(255, 255, 255, 0.92); } .hero .actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } /* Buttons */ .btn { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.8rem 1.7rem; border-radius: 999px; border: 2px solid transparent; transition: transform 0.15s ease, background 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn-gold { background: var(--gold); color: var(--black); } .btn-gold:hover { background: var(--gold-soft); color: var(--black); } .btn-outline { border-color: rgba(255, 255, 255, 0.7); color: var(--white); } .btn-outline:hover { border-color: var(--gold); color: var(--gold-soft); } .btn-red { background: var(--red-ink); color: var(--white); } .btn-red:hover { background: var(--red-dark); color: var(--white); } /* -------------------------------------------------------------------------- Spring season promo — the club flyer rebuilt as a native section. Cream flyer paper, brush-stroke corners, tricolor display word, black brush band and script accents echo the printed flyer one-for-one. -------------------------------------------------------------------------- */ .spring { position: relative; background: var(--paper); overflow: hidden; padding: 5rem 0; } /* Brush-stroke corners, as on the printed flyer */ .spring::before, .spring::after { content: ""; position: absolute; z-index: 0; width: 300px; height: 300px; pointer-events: none; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M-50 130L190 -110' stroke='%23EB2427' stroke-width='64'/%3E%3Cpath d='M-40 200L230 -70' stroke='%23ECB84A' stroke-width='30'/%3E%3Cpath d='M-30 255L260 -35' stroke='%231B1519' stroke-width='9'/%3E%3C/g%3E%3C/svg%3E"); } .spring::before { top: -45px; left: -45px; } .spring::after { bottom: -45px; right: -45px; transform: rotate(180deg); } .spring .doodle { position: absolute; z-index: 1; pointer-events: none; } .doodle-star-gold { top: 4.5rem; right: 7%; transform: rotate(-12deg); } .doodle-star-red { bottom: 3.5rem; left: 4%; transform: rotate(14deg); } .spring-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; } .spring-kicker { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text); transform: rotate(-2deg); margin: 0; } .spring-word { margin: 0 0 1.1rem; transform: rotate(-2deg); } .spring-word span[aria-hidden] { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 10vw, 6.75rem); line-height: 0.9; letter-spacing: 0.02em; } .spring-word .c1 { color: var(--red); } .spring-word .c2 { color: var(--gold); } .spring-word .c3 { color: var(--text); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Black brush band — uneven radii keep the painted feel */ .spring-band { display: inline-block; background: var(--black); color: var(--white); padding: 0.55rem 1.1rem; border-radius: 3px 14px 4px 12px / 10px 4px 12px 5px; transform: rotate(-1.5deg); font-size: 1.05rem; line-height: 1.45; max-width: 29rem; margin: 0 0 1rem; } .spring-band strong { color: var(--gold); } .spring-script { font-family: "Caveat", "Comic Sans MS", cursive; font-weight: 700; font-size: clamp(2.1rem, 4.5vw, 2.7rem); line-height: 1.05; color: var(--red-ink); transform: rotate(-2deg); margin: 0 0 1.25rem; } .spring-body { max-width: 30rem; margin: 0 0 1.5rem; } .spring-body strong { color: var(--red-ink); } .spring-when { display: flex; align-items: center; gap: 0.9rem; border-top: 4px dotted var(--red); padding-top: 1.4rem; margin: 0 0 1.75rem; max-width: 30rem; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.04em; } .spring-when svg { flex: none; } .spring-when strong { color: var(--red-ink); } .spring .actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .btn-paper { border-color: var(--text); color: var(--text); } .btn-paper:hover { background: var(--paper-btn-hover-bg); color: var(--paper-btn-hover-text); } .spring-welcome { margin: 1.9rem 0 0; font-size: clamp(1.7rem, 3.5vw, 2.1rem); color: var(--text); max-width: 27rem; } .spring-welcome .hearts { color: var(--red); } /* Fade the crop's edges into the paper so the artwork sits printed-on, not pasted-on */ .spring-art img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-composite: intersect; } @media (max-width: 50rem) { .spring { padding: 3.5rem 0; } /* The top corner brush collides with the kicker once the column narrows */ .spring::before { display: none; } .spring-grid { grid-template-columns: 1fr; gap: 2rem; } .spring .doodle { display: none; } .spring-art { max-width: 26rem; margin-inline: auto; } } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ .section { padding: 4.5rem 0; } .section.tight { padding: 3rem 0; } .section-head { max-width: 44rem; margin-bottom: 2.5rem; } h2.title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.05; text-transform: uppercase; margin: 0 0 0.75rem; } h2.title::after { content: ""; display: block; width: 3.5rem; height: 0.3rem; background: var(--red); margin-top: 0.75rem; } /* Card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; } .card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 4px solid var(--red); } .card .thumb { aspect-ratio: 3 / 2; background-size: cover; background-position: center; } .card .body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.25rem; } .card .kicker { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; font-size: 0.8rem; color: var(--red-ink); margin: 0 0 0.5rem; } .card p { margin: 0 0 1.25rem; color: var(--muted); } .card .cta { margin-top: auto; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .card .cta::after { content: " →"; color: var(--gold); } /* Split section (photo + text) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .split .photo img { border-radius: var(--radius); box-shadow: var(--shadow); } @media (max-width: 50rem) { .split { grid-template-columns: 1fr; } } /* Dark strip */ .strip { background: var(--black); color: var(--white); border-top: 1px solid var(--strip-edge); border-bottom: 1px solid var(--strip-edge); } .strip h2.title { color: var(--white); } .strip a:not(.btn) { color: var(--gold-soft); } /* Stat chips on home */ .chips { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .chip { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius); padding: 1rem 1.5rem; min-width: 10rem; } .chip .num { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--gold); line-height: 1; } .chip .label { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } /* -------------------------------------------------------------------------- Page banner (inner pages) -------------------------------------------------------------------------- */ .page-banner { background: linear-gradient(100deg, var(--black) 20%, var(--red-dark) 100%); color: var(--white); padding: 3.5rem 0 3rem; } .page-banner h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; text-transform: uppercase; margin: 0; } .page-banner p { margin: 0.75rem 0 0; max-width: 40rem; color: rgba(255, 255, 255, 0.88); font-size: 1.15rem; } /* -------------------------------------------------------------------------- Prose (markdown content) -------------------------------------------------------------------------- */ .prose { max-width: 46rem; } .prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 2rem; text-transform: uppercase; margin: 2.5rem 0 0.75rem; } .prose h2::after { content: ""; display: block; width: 2.75rem; height: 0.25rem; background: var(--red); margin-top: 0.5rem; } .prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 2rem 0 0.5rem; } .prose ul, .prose ol { padding-left: 1.35rem; } .prose li { margin: 0.3rem 0; } .prose blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--gold); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; } .prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .prose th { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; text-align: left; background: var(--black); color: var(--white); padding: 0.75rem 1rem; } .prose td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); } .prose tr:last-child td { border-bottom: none; } /* -------------------------------------------------------------------------- News -------------------------------------------------------------------------- */ .news-list { display: grid; gap: 1.5rem; max-width: 46rem; } .news-item { background: var(--surface); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); border-left: 4px solid var(--gold); } .news-item time { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; color: var(--red-ink); } .news-item h3 { margin: 0.35rem 0 0.5rem; font-size: 1.35rem; } .news-item h3 a { text-decoration: none; color: var(--text); } .news-item h3 a:hover { color: var(--red-ink); } .article-meta { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.85rem; color: var(--red-ink); margin-bottom: 1rem; } /* -------------------------------------------------------------------------- Contact cards -------------------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin: 2rem 0; } .contact-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); border-top: 4px solid var(--gold); } .contact-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; margin: 0 0 0.35rem; } .contact-card a { word-break: break-all; } /* -------------------------------------------------------------------------- Sponsors — logo band at the foot of the home page. Every logo sits in a tile of the same size and is scaled to fit, so wide wordmarks, square marks and stacked marks carry the same visual weight and spacing. -------------------------------------------------------------------------- */ .sponsors { background: var(--surface); border-top: 1px solid var(--line); } .sponsor-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .sponsor-logos li { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; padding: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .sponsor-logos img { display: block; width: 100%; height: 100%; object-fit: contain; } /* White-on-transparent logos sit on the club black */ .sponsor-logos .dark { background: var(--black); border-color: var(--black); } .sponsor-more { margin: 2rem 0 0; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .sponsor-more a { text-decoration: none; } .sponsor-more a::after { content: " \2192"; color: var(--gold); } @media (max-width: 50rem) { .sponsor-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sponsor-logos li { padding: 1rem; } } /* Sponsors page: one card per sponsor */ .sponsor-list { list-style: none; margin: 2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; } .prose .sponsor-list li { margin: 0; } .sponsor-list li { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); border-top: 4px solid var(--gold); } .sponsor-list img { height: 4rem; width: auto; max-width: 100%; object-fit: contain; margin: 0 0 1rem; } /* Smaller logo for sponsors whose mark should sit lighter in the card */ .sponsor-list .sm img { height: 3rem; } /* Dark-on-transparent logos keep a white backing in the dark theme */ .sponsor-list li:not(.dark) img { box-sizing: content-box; padding: var(--logo-pad); background: var(--white); border-radius: 6px; } /* White-on-transparent logos sit on the club black */ .sponsor-list .dark img { box-sizing: content-box; padding: 0.6rem 0.9rem; background: var(--black); border-radius: 6px; } .prose .sponsor-list h3 { margin: 0 0 0.35rem; font-size: 1.3rem; } .sponsor-list p:last-child { margin: 0; color: var(--muted); } /* Policies page: one drop down per group of policies */ .policy-group { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 4px solid var(--gold); margin: 1rem 0; } .policy-group summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 0.85rem 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.03em; } .policy-group summary::-webkit-details-marker { display: none; } .policy-group summary::after { content: "+"; color: var(--red-ink); font-size: 1.5rem; line-height: 1; } .policy-group[open] summary::after { content: "\2013"; } .policy-group summary:hover { color: var(--red-ink); } .policy-group ul { margin: 0; padding: 0 1.25rem 1.1rem 2.5rem; } .site-footer { background: var(--black); color: rgba(255, 255, 255, 0.85); } .site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 0 2.5rem; } @media (max-width: 50rem) { .site-footer .cols { grid-template-columns: 1fr; } } .site-footer h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); font-size: 1rem; margin: 0 0 0.85rem; } .site-footer .footer-brand { margin-bottom: 1.1rem; } .site-footer .footer-brand img { display: block; width: 9.5rem; height: auto; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin: 0.4rem 0; } .site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .site-footer a:hover { color: var(--gold-soft); } .site-footer .fine { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 1.25rem 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; } /* -------------------------------------------------------------------------- Fixtures & results — rendered from data/fixtures.json (see scripts/). -------------------------------------------------------------------------- */ .fixtures .section.tight { padding: 2.75rem 0; } .fixtures .section-head { margin-bottom: 1.5rem; } .fx-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .fx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 2rem; } .fx-head .section-head { margin-bottom: 1.25rem; } .fx-updated { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.95rem; } .fx-day, .fx-sub { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 1.5rem 0 0.6rem; } .fx-day:first-of-type { margin-top: 0; } .fx-sub { margin-top: 0; } .fx-muted { color: var(--muted); font-weight: 400; } .fx-empty { color: var(--muted); font-style: italic; margin: 0; } .fx-fine { color: var(--muted); font-size: 0.9rem; max-width: 46rem; margin: 0; } .fx-links { margin: 0.9rem 0 0; font-size: 0.95rem; } .fx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fx-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: 0.97rem; } .fx-table th { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; text-align: left; background: var(--black); color: var(--white); padding: 0.6rem 0.9rem; white-space: nowrap; } .fx-table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; } .fx-table tr:last-child td { border-bottom: none; } .fx-table td small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; } .fx-table .fx-team a { font-weight: 600; text-decoration: none; color: var(--text); } .fx-table .fx-team a:hover { color: var(--red-ink); } .fx-time, .fx-when, .fx-table .fx-team { white-space: nowrap; } .fx-upcoming td, .fx-season td { white-space: nowrap; } .fx-time { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .fx-court { font-weight: 600; white-space: nowrap; } .fx-result { white-space: nowrap; } .fx-score { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-left: 0.25rem; } .fx-bye td { color: var(--muted); } .fx-flag { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--gold); color: var(--black); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; } .fx-ladder td, .fx-ladder th { text-align: center; padding-inline: 0.55rem; } .fx-ladder td.fx-team, .fx-ladder th:nth-child(2) { text-align: left; } .fx-ladder tr.us td { background: var(--highlight); font-weight: 600; } .fx-ladder tr.us td:first-child { box-shadow: inset 4px 0 0 var(--gold); } /* Outcome pills: W gold, L ink, D outline, played/bye muted */ .res { display: inline-block; min-width: 1.7rem; padding: 0.1rem 0.45rem; border-radius: 999px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; line-height: 1.4; border: 1.5px solid transparent; } .res.W { background: var(--gold); color: var(--black); } .res.L { background: var(--black); color: var(--white); } .res.D { border-color: var(--text); color: var(--text); background: var(--surface); } .res.P, .res.BYE { background: var(--line); color: var(--muted); } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; } .team-card { display: block; background: var(--surface); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow); border-top: 4px solid var(--red); color: var(--text); text-decoration: none; transition: transform 0.15s ease; } .team-card:hover { transform: translateY(-3px); color: var(--text); } .team-card:hover h3 { color: var(--red-ink); } .team-card .kicker { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.75rem; color: var(--red-ink); margin: 0 0 0.15rem; } .team-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; text-transform: uppercase; margin: 0 0 0.4rem; line-height: 1; } .team-card p { margin: 0.3rem 0; font-size: 0.93rem; } .team-stat strong { color: var(--text); } .team-next { color: var(--muted); font-size: 0.88rem; } .team-record { display: flex; gap: 0.35rem; margin: 0.5rem 0 !important; } .team-record.lg { margin: 0 0 1.25rem !important; } .team-record.lg .res { font-size: 1rem; padding: 0.2rem 0.7rem; } .fx-next { margin: 0 0 0.6rem; font-size: 0.97rem; } .fx-next strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--red-ink); margin-right: 0.2rem; } .fx-details { margin-top: 0.9rem; } .fx-details summary { cursor: pointer; list-style: none; display: inline-block; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; color: var(--red-ink); border-bottom: 2px solid var(--gold); padding-bottom: 0.1rem; margin-bottom: 0.9rem; } .fx-details summary::-webkit-details-marker { display: none; } .fx-details summary::before { content: "+ "; } .fx-details[open] summary::before { content: "\2013 "; } .fx-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: start; } @media (max-width: 60rem) { .fx-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 30rem) { .fx-ladder td:nth-child(7), .fx-ladder th:nth-child(7) { display: none; } }