/* Theme Name: Cabal Sports Theme URI: https://cabalsports.com Description: Alabama high school football ratings, projections and accuracy. Child of Twenty Twenty-Five, built to the approved design: black grain, paper panels, slab headings and jersey numerals. Author: cabalsports.com Template: twentytwentyfive Version: 0.1.0 Requires PHP: 8.1 Text Domain: cabalsports */ /* --------------------------------------------------------------------------- The look comes from the ranking cards the app already produces: a black page with a noise grain, tables on paper panels, Alfa Slab One headings, Bungee Inline rank numerals, and gold reserved for the ASWA poll. Colours are declared in theme.json and consumed here as custom properties, so a palette change happens in one place. --------------------------------------------------------------------------- */ :root { --cs-page: #0f0f0f; --cs-black: #000000; --cs-paper: #f3f1ed; --cs-paper-edge: #dcd8d0; --cs-ink: #111111; --cs-ink-soft: #6e6a64; --cs-cream: #f2f0ec; --cs-cream-dim: #b9b6b0; --cs-grey: #8a8782; --cs-gold: #d2b45a; --cs-gold-ink: #966e14; --cs-up: #2f7a4a; --cs-down: #a8452e; /* A deeper green for outcome text. --cs-up was picked for the small movement arrows; at the size and weight a result is set in, it reads washed out against the paper panel. */ --cs-up-ink: #1f6b3a; --cs-rule: rgba(242, 240, 236, 0.14); --cs-gutter: clamp(16px, 5vw, 80px); } body { background-color: var(--cs-page); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--cs-cream); font-family: 'Barlow Semi Condensed', 'Bahnschrift', 'Arial Narrow', sans-serif; -webkit-font-smoothing: antialiased; } .cs-slab { font-family: 'Alfa Slab One', 'Rockwell', Georgia, serif; font-weight: 400; } .cs-jersey { font-family: 'Bungee Inline', 'Alfa Slab One', Impact, sans-serif; font-weight: 400; } .cs-num { font-variant-numeric: tabular-nums; } .cs-kicker { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gold); } .cs-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-ink-soft); } /* ---- page furniture ----------------------------------------------------- */ .cs-wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--cs-gutter); box-sizing: border-box; } .cs-utility { /* --bar-bg / --bar-ink are set only on a team page (print_head_theme): the team's dark colour and the ink that reads on it. Everywhere else they are undefined and the bar stays black. */ background: var(--bar-bg, var(--cs-black)); color: var(--bar-ink, var(--cs-grey)); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .cs-utility .cs-wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; min-height: 36px; padding-block: 6px; } .cs-utility .cs-season { color: var(--bar-ink, var(--cs-gold)); } .cs-masthead .cs-wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; padding-block: 22px 18px; border-bottom: 2px solid var(--cs-rule); } .cs-wordmark { font-size: clamp(28px, 4vw, 46px); line-height: 1; color: var(--cs-cream); text-decoration: none; } .cs-wordmark:hover { color: var(--cs-cream); } .cs-nav { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .cs-nav a { color: #c9c6c0; text-decoration: none; padding-bottom: 6px; border-bottom: 3px solid transparent; } .cs-nav a:hover { color: var(--cs-cream); } .cs-nav a[aria-current="page"] { color: var(--cs-cream); border-bottom-color: var(--cs-gold); } .cs-footer { background: var(--bar-bg, var(--cs-black)); color: var(--bar-ink, inherit); margin-top: 72px; } .cs-footer .cs-version { opacity: 0.8; white-space: nowrap; cursor: help; } .cs-footer .cs-footer-sub { color: var(--bar-ink, #8a8782); opacity: 0.85; } .cs-footer .cs-wrap { padding-block: 40px 32px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; } .cs-footer a { color: var(--bar-ink, #c9c6c0); text-decoration: none; } .cs-footer a:hover { color: var(--bar-ink, var(--cs-gold)); text-decoration: underline; text-underline-offset: 4px; } .cs-fineprint { width: 100%; border-top: 1px solid rgba(242, 240, 236, 0.12); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.875rem; color: var(--bar-ink, var(--cs-ink-soft)); } /* ---- section headings --------------------------------------------------- */ .cs-section { margin-top: 56px; } .cs-section-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--cs-rule); padding-bottom: 12px; margin-bottom: 18px; } .cs-section-head h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1; margin: 0; color: var(--cs-cream); } .cs-section-note { font-size: 1rem; font-weight: 600; color: var(--cs-grey); } .cs-page-head { padding-block: 40px 0; } .cs-page-title { font-size: clamp(44px, 8vw, 88px); line-height: 0.92; margin: 10px 0 0; color: var(--cs-cream); } .cs-page-sub { font-size: clamp(15px, 1.6vw, 18px); font-weight: 600; color: var(--cs-cream-dim); margin-top: 10px; } /* ---- panels and tables -------------------------------------------------- */ .cs-panel { background: var(--cs-paper); color: var(--cs-ink); border-radius: 4px; overflow: hidden; } .cs-panel-head { padding: 20px 22px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; } .cs-panel-head h2, .cs-panel-head h3 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; } .cs-table { width: 100%; border-collapse: collapse; } .cs-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--cs-paper-edge); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-ink-soft); white-space: nowrap; } .cs-table td { padding: 10px 8px; border-top: 1px solid var(--cs-paper-edge); vertical-align: middle; } .cs-table tr:first-child td { border-top: none; } .cs-table td:first-child, .cs-table th:first-child { padding-left: 22px; } .cs-table td:last-child, .cs-table th:last-child { padding-right: 22px; } /* "cs-right" now means centred, headers and data alike -- kept the old name so nothing that already uses the class needs to change. A short, all-caps heading ("POLL") sitting flush against the same edge as a much wider number below it read as shoved into the corner rather than aligned with it, and centring the numbers too keeps the column's heading and its data lined up with each other instead of the header alone drifting to the middle. Applies to every table on the site, not just this one. */ .cs-table .cs-right { text-align: center; } .cs-table thead th.cs-right { text-align: center; } /* Sortable headers. The affordance only appears once the script has enhanced them, so a reader without JavaScript is never invited to click something that does nothing. */ .cs-table th.cs-sort { cursor: pointer; user-select: none; white-space: nowrap; } .cs-table th.cs-sort:hover { color: var(--cs-ink); } .cs-table th.cs-sort:focus-visible { outline: 2px solid var(--cs-gold-ink); outline-offset: -2px; } .cs-table th.cs-sort[aria-sort] { color: #000000; } .cs-sort-arrow { font-size: 0.625rem; margin-left: 4px; letter-spacing: 0; } .cs-table .cs-rank { font-size: clamp(20px, 2vw, 30px); line-height: 1; width: 1%; white-space: nowrap; } .cs-table .cs-team { font-weight: 700; text-transform: uppercase; } .cs-table .cs-team a { color: inherit; text-decoration: none; } .cs-table .cs-team a:hover { text-decoration: underline; } .cs-table .cs-rating { font-size: 1.0625rem; font-weight: 700; } .cs-table .cs-poll { font-weight: 700; color: var(--cs-gold-ink); } .cs-scroll { overflow-x: auto; } /* Accuracy page: a week's row expands (week-games.js) to the games behind its numbers. */ .cs-week-row { cursor: pointer; } .cs-week-row:hover { background: var(--cs-paper-edge); } .cs-week-row:focus-visible { outline: 2px solid var(--cs-gold-ink); outline-offset: -2px; } .cs-detail-row > td { padding: 16px 22px; border-top: none; background: var(--cs-paper-edge); } .cs-week-filters { display: flex; gap: 20px; margin-bottom: 12px; font-size: 0.8125rem; color: var(--cs-ink-soft); } .cs-week-filters select { margin-left: 6px; font: inherit; color: var(--cs-ink); } .cs-mini td, .cs-mini th { padding: 6px 8px; } .cs-mini { background: var(--cs-paper); } /* The home page's ratings module: a narrow column, so nothing may wrap mid-figure. */ .cs-table-compact td { padding: 8px 5px; white-space: nowrap; } .cs-table-compact td:first-child { padding-left: 18px; } .cs-table-compact td:last-child { padding-right: 18px; } .cs-table-compact .cs-rank { font-size: 22px; } .cs-table-compact .cs-team { white-space: normal; min-width: 0; } .cs-table-compact .cs-team .cs-clip { display: block; } .cs-table-compact .cs-logo { width: 26px; height: 26px; } .cs-move-up { color: var(--cs-up); font-weight: 700; } .cs-move-down { color: var(--cs-down); font-weight: 700; } .cs-move-flat { color: #9a968f; font-weight: 700; } .cs-move-new { font-size: 0.75rem; font-weight: 700; color: var(--cs-gold-ink); white-space: nowrap; } /* ---- scope and week switchers ------------------------------------------- */ .cs-switch { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .cs-switch a, .cs-switch span { display: inline-block; padding: 7px 13px; border-radius: 3px; text-decoration: none; border: 1px solid var(--cs-paper-edge); color: var(--cs-ink); min-height: 20px; } .cs-switch a:hover { border-color: var(--cs-ink); } .cs-switch .cs-on { background: var(--cs-ink); color: var(--cs-paper); border-color: var(--cs-ink); } .cs-switch-dark { padding-inline: 0; } .cs-switch-dark a, .cs-switch-dark span { border-color: rgba(242, 240, 236, 0.28); color: var(--cs-cream); } .cs-switch-dark a:hover { border-color: var(--cs-cream); } .cs-switch-dark .cs-on { background: var(--cs-paper); color: var(--cs-ink); border-color: var(--cs-paper); } /* ---- projections -------------------------------------------------------- */ .cs-matchup { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cs-side { display: flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; min-width: 0; } .cs-side .cs-seed { color: #8a8680; font-weight: 600; } .cs-side a { color: inherit; text-decoration: none; } .cs-side a:hover { text-decoration: underline; } .cs-bar { height: 8px; background: var(--cs-paper-edge); border-radius: 4px; overflow: hidden; min-width: 60px; } .cs-bar > span { display: block; height: 100%; background: var(--cs-ink); border-radius: 4px; } .cs-certainty { display: flex; align-items: center; gap: 10px; } .cs-certainty .cs-pct { font-weight: 700; color: var(--cs-gold-ink); min-width: 44px; text-align: right; } /* A matchup row (logo, team name, projected margin, certainty) is sized to still work on a phone -- a small logo, a compact bar. On a wide screen that same row just sits in the middle of a lot of unused width, looking shrunk rather than laid out. Past tablet width there's room to actually use, so the logo, team names, bar and certainty number all step up together. The logo size overrides the inline width/height cs-logo is given per row, which needs !important since an inline style otherwise always wins over a stylesheet rule. */ @media (min-width: 900px) { .cs-matchup { gap: 9px; } .cs-matchup .cs-logo { width: 34px !important; height: 34px !important; } .cs-matchup .cs-side { font-size: 1.125rem; gap: 11px; } .cs-bar { height: 10px; min-width: 90px; } .cs-certainty { gap: 14px; } .cs-certainty .cs-pct { font-size: 1.125rem; min-width: 58px; } } /* Outcomes, read from the page's point of view: green is the good one (a win, or this team favoured, or our pick proved right), red the bad one. Same weight as any other figure in the column, because a projection makes the same kind of claim a result does. */ .cs-result-win { font-weight: 700; color: var(--cs-up-ink); } .cs-result-loss { font-weight: 700; color: var(--cs-down); } .cs-result-tie { font-weight: 700; color: var(--cs-ink); } /* The certainty beside a projection: present, but not competing with the projection itself. */ .cs-certainty-note { font-size: 0.8125rem; font-weight: 700; color: var(--cs-gold-ink); letter-spacing: 0.02em; white-space: nowrap; } /* A forecast week: the same sentence as a projection, set lighter and slanted, with no win/loss colour. It is a guess built on earlier guesses and must never read as a result or a pick. */ .cs-forecast { font-style: italic; font-weight: 400; color: var(--cs-muted, #6e6a64); } .cs-forecast-note { margin: 0; padding: 14px 22px 18px; font-size: 0.8125rem; line-height: 1.45; color: var(--cs-muted, #6e6a64); } /* A Missed number on the accuracy table: it opens the games we picked and lost. Reads as a link, because that is what it does, without shouting over the figures beside it. */ .cs-missed-link { font: inherit; color: var(--cs-down); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .cs-missed-link:hover, .cs-missed-link:focus-visible { text-decoration-style: solid; } /* The tag on a pick too close to call. Quiet: it qualifies the pick beside it rather than competing. */ .cs-tossup { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--cs-ink-soft); background: transparent; white-space: nowrap; vertical-align: middle; } /* A pick in the accuracy drill-down: green when it was right, red when it was wrong. */ .cs-pick-right { color: var(--cs-up-ink); font-weight: 700; } .cs-pick-wrong { color: var(--cs-down); font-weight: 700; } /* The plain-words key under the accuracy table: one row per column, "Name: what it means". The side padding matches .cs-note, so the text sits inside the paper panel and never touches the black page behind it. */ .cs-key { margin: 0; padding: 14px 22px 20px; border-top: 1px solid var(--cs-paper-edge); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; font-size: 0.9375rem; line-height: 1.45; } .cs-key div { margin: 0; } .cs-key dt { font-weight: 700; display: inline; } .cs-key dt::after { content: ': '; } .cs-key dd { display: inline; margin: 0; color: var(--cs-ink-soft); } /* The home page's one-line description of the site. */ .cs-tagline-wrap { padding-top: 32px; } .cs-tagline { margin: 0; max-width: 62rem; font-family: 'Alfa Slab One', 'Rockwell', Georgia, serif; font-weight: 400; font-size: clamp(1.25rem, 2.6vw, 1.875rem); line-height: 1.2; color: var(--cs-cream); } /* ---- stat tiles --------------------------------------------------------- */ /* auto-fit: whatever number of tiles a page has -- four on a ranked team, three without a class rank, four on the accuracy page -- they share the full width equally, with no empty strip left on the right. The poll used to be a fifth tile here and the reason this was auto-fill; it is a band of its own now, so the count no longer swings between four and five. Below roughly four-across they wrap onto a second row at the same minimum width. */ .cs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 28px; } .cs-tile { background: var(--cs-paper); color: var(--cs-ink); border-radius: 4px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .cs-tile-value { font-size: clamp(28px, 3.4vw, 40px); line-height: 1; } .cs-tile-note { font-size: 0.9375rem; font-weight: 600; color: var(--cs-ink-soft); } .cs-tile-gold .cs-tile-value, .cs-tile-gold .cs-label { color: var(--cs-gold-ink); } /* A tile that links out (the team page's Record/Rating/Schedule/Our Rank cards, to the matching sorted Ratings column) flips to its own opposite colours on hover -- paper-on-ink instead of ink-on-paper -- rather than a subtle underline, so it reads as a button, not just as text that happens to sit in a box. */ a.cs-tile { text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; } a.cs-tile:hover, a.cs-tile:focus-visible { background: var(--cs-ink); color: var(--cs-paper); } a.cs-tile:hover .cs-tile-note, a.cs-tile:focus-visible .cs-tile-note, a.cs-tile:hover .cs-label, a.cs-tile:focus-visible .cs-label { color: var(--cs-paper); opacity: 0.75; } a.cs-tile:focus-visible { outline: 2px solid var(--cs-gold-ink); outline-offset: -2px; } /* On a team page painted in its colours, the same flip lands on the team's own dark colour, with whichever ink reads on it, instead of the site's black. */ .cs-team-page[class*="cs-team-theme-"] a.cs-tile:hover, .cs-team-page[class*="cs-team-theme-"] a.cs-tile:focus-visible { background: var(--team-dark); color: var(--team-dark-ink); } .cs-team-page[class*="cs-team-theme-"] a.cs-tile:hover .cs-tile-value, .cs-team-page[class*="cs-team-theme-"] a.cs-tile:focus-visible .cs-tile-value, .cs-team-page[class*="cs-team-theme-"] a.cs-tile:hover .cs-label, .cs-team-page[class*="cs-team-theme-"] a.cs-tile:focus-visible .cs-label, .cs-team-page[class*="cs-team-theme-"] a.cs-tile:hover .cs-tile-note, .cs-team-page[class*="cs-team-theme-"] a.cs-tile:focus-visible .cs-tile-note { color: var(--team-dark-ink); } /* The ASWA poll gets a band of its own above the stat tiles rather than a fifth tile among them: it is somebody else's opinion, not one of our measurements, and mixing it in left the tile row uneven for ranked teams and even for everyone else. A quarter the height, full width, gold on paper so it reads as the writers' vote at a glance. */ .cs-poll-band { background: var(--cs-paper); color: var(--cs-ink); border-radius: 4px; margin-top: 28px; padding: 18px 20px; border-left: 5px solid var(--cs-gold-ink); /* The first column is as wide as the title and rank need (they are set at twice the size of the labels beside them); the four facts share what is left equally. */ display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; gap: 14px 20px; } /* The band's figures are set like the stat tiles below it: the same small caps label over a larger bold value, with the title, the rank and the four facts sharing the full width equally. */ .cs-poll-band .cs-poll-lead { display: flex; align-items: center; gap: 20px; min-width: 0; padding-right: 12px; } .cs-poll-band .cs-poll-title { font-size: 1.625rem; line-height: 1.05; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-gold-ink); white-space: nowrap; } .cs-poll-band .cs-poll-rank { font-family: 'Bungee Inline', 'Alfa Slab One', Impact, sans-serif; font-size: clamp(56px, 6.8vw, 80px); line-height: 1; color: var(--cs-gold-ink); } /* display: contents lets the four facts join the band's own grid rather than a nested one. */ .cs-poll-band dl { display: contents; margin: 0; } .cs-poll-band div { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: center; text-align: center; } .cs-poll-band .cs-poll-lead { flex-direction: row; align-items: center; text-align: left; } .cs-poll-band dt { font-size: clamp(0.8125rem, 1.35vw, 1.0625rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-ink-soft); white-space: nowrap; } .cs-poll-band dd { margin: 0; font-size: clamp(1.375rem, 2.9vw, 2.25rem); font-weight: 700; line-height: 1.1; white-space: nowrap; } @media (max-width: 900px) { .cs-poll-band { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; } .cs-poll-band .cs-poll-lead { grid-column: 1 / -1; } } /* ---- team page ---------------------------------------------------------- */ /* Crest, name, rank: three columns, so the name has a box of its own and a long one cannot crowd the rank. The middle column takes what is left and nothing more (min-width: 0), and the name is sized to its own length in the block, so "Tuscaloosa County" fills the same box "Briarwood" does rather than overflowing it. */ .cs-team-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding-top: 40px; } .cs-team-name { min-width: 0; } .cs-crest { width: 150px; height: 150px; background: var(--cs-paper); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cs-crest img { width: 78%; height: 78%; object-fit: contain; } .cs-team-rank { margin-left: auto; text-align: right; } .cs-team-rank .cs-jersey { font-size: clamp(56px, 9vw, 110px); line-height: 0.9; } .cs-chart { width: 100%; height: auto; display: block; } .cs-chart-line { fill: none; stroke: var(--cs-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .cs-chart-dot { fill: var(--cs-ink); stroke: var(--cs-paper); stroke-width: 2; } .cs-chart-grid { stroke: var(--cs-paper-edge); stroke-width: 1; } .cs-chart-text { font-size: 13px; font-weight: 600; fill: var(--cs-ink-soft); font-family: inherit; } .cs-region-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-gold-ink); display: inline-block; flex-shrink: 0; } /* A school's own colours, on team pages only. Read from the colour names AHSFHS records, so they are a conventional reading of "Royal Blue & Old Gold" rather than an official brand value: shown as a small bar beside the class, never as text colour, which keeps it legible whatever a school plays in. */ .cs-colours { display: inline-flex; align-items: center; gap: 0; margin-right: 10px; border-radius: 3px; overflow: hidden; vertical-align: middle; box-shadow: 0 0 0 1px rgba(242, 240, 236, 0.25); } .cs-colours > span { display: block; width: 18px; height: 12px; } /* ---- team page colour previews ------------------------------------------ Two treatments for painting a team's own colours through its page, shown with ?cs_theme=a or ?cs_theme=b so they can be compared before either one ships for good. Neither touches the page when no theme is requested, or when a team has no usable colour -- the ordinary look is the fallback for both, not a third state to design separately. Both also recolour the header's own rule line -- the one thing that sits outside the team block, in the shared header template part, so it cannot be reached with a class here. print_head_theme() (class-cs-blocks.php, on wp_head) sets --head-line-color or --head-line-image at :root instead, on the same team pages; this rule reads whichever is set and is a no-op everywhere else, since neither variable is otherwise defined. */ /* Overrides the border-bottom set on .cs-masthead .cs-wrap above (line ~76): that is the actual element carrying the line, inset to the same content width as the rest of the page, not the full-width
around it. */ .cs-masthead .cs-wrap { border-top: 0; border-left: 0; border-right: 0; /* 3px on every ordinary page; a team page paints it as thick as its schedule's side stripe. */ border-bottom-width: var(--head-line-width, 3px); border-bottom-style: solid; border-bottom-color: var(--head-line-color, var(--cs-rule)); border-image-source: var(--head-line-image, none); border-image-slice: 1; } /* Variant A: "crest tile" -- the crest itself carries the team's lead colour, the title picks up a matching underline, and the class-rank chip behind the team page (not the ranking tables) sits on the same colour. Quiet: the rest of the page -- tiles, schedule, chart -- is untouched. */ .cs-team-theme-a .cs-crest { background: var(--team-1); } .cs-team-theme-a .cs-crest .cs-slab { color: var(--team-1-ink); } .cs-team-theme-a .cs-page-title { display: inline-block; padding-bottom: 6px; border-bottom: 5px solid var(--team-on-page); } .cs-team-theme-a .cs-team-rank { background: var(--team-1); border-radius: 4px; padding: 10px 18px 6px; } .cs-team-theme-a .cs-team-rank .cs-label { color: var(--team-1-ink) !important; opacity: 0.75; } .cs-team-theme-a .cs-team-rank .cs-jersey { color: var(--team-1-ink); } /* Variant B: "sideline stripe" -- the header's rule line becomes the stripe itself (above), the schedule panel takes a colour-coded left border the way the ASWA poll band already does in gold, and the team's own rank tile is washed in its colour rather than left the same paper as every other tile. */ .cs-team-theme-b .cs-panel-team { border-left: 12px solid var(--team-on-paper); } .cs-team-theme-b .cs-tile-team { background: color-mix(in srgb, var(--team-1) 14%, var(--cs-paper)); } .cs-team-theme-b .cs-tile-team .cs-tile-value { color: var(--team-on-paper); } /* ---- two-column layout -------------------------------------------------- */ .cs-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; margin-top: 24px; } .cs-aside { display: flex; flex-direction: column; gap: 20px; } .cs-card-dark { border: 2px solid rgba(242, 240, 236, 0.18); border-radius: 4px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; } .cs-card-dark p { margin: 0; font-size: 1rem; line-height: 1.5; color: #c9c6c0; } .cs-card-dark a { color: var(--cs-gold); text-decoration: none; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.05em; text-transform: uppercase; } /* Where a team stood when the game was played, beside the opponent's name. Secondary to the name it qualifies, and never the same weight as the result. */ .cs-standing { font-size: 0.8125rem; font-weight: 600; color: var(--cs-ink-soft); letter-spacing: 0.02em; white-space: nowrap; margin-left: 2px; } .cs-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .cs-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* A school with no logo on file: initials on a paper chip, so the gap looks intended. */ .cs-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--cs-paper-edge); color: var(--cs-ink-soft); border-radius: 3px; font-weight: 700; letter-spacing: 0.02em; } /* ---- home: the week strip ----------------------------------------------- */ .cs-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; padding-block: 18px; border-bottom: 2px solid var(--cs-rule); } .cs-strip-label { width: 146px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .cs-strip-label .cs-slab { font-size: 28px; line-height: 1; color: var(--cs-gold); } .cs-strip-card { flex: 1 1 160px; min-width: 0; background: var(--cs-paper); color: var(--cs-ink); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .cs-strip-card .cs-side { font-size: 1rem; } .cs-strip-line { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; border-top: 1px solid var(--cs-paper-edge); padding-top: 6px; font-size: 0.875rem; font-weight: 600; } /* box-sizing because this takes width:100% on a phone, and its padding and border would otherwise be added on top of that and push it past the edge of the page. */ .cs-strip-more { box-sizing: border-box; width: 104px; flex-shrink: 0; border: 2px solid rgba(242, 240, 236, 0.22); border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--cs-cream); text-decoration: none; font-weight: 700; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; padding: 10px; } .cs-strip-more:hover { border-color: var(--cs-gold); color: var(--cs-cream); } /* ---- home: cards -------------------------------------------------------- */ .cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .cs-card { background: var(--cs-paper); color: var(--cs-ink); border-radius: 4px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .cs-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .cs-card-head a { color: inherit; text-decoration: none; } .cs-card-head a:hover { text-decoration: underline; } .cs-card-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cs-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--cs-rule); padding-top: 14px; } .cs-card-stats .cs-jersey { font-size: 30px; line-height: 1; color: var(--cs-cream); display: block; } .cs-panel-more { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px; background: var(--cs-ink); color: var(--cs-cream); text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .cs-panel-more:hover { color: var(--cs-gold); } @media (max-width: 900px) { .cs-strip-label, .cs-strip-more { width: 100%; } .cs-strip-label { flex-direction: row; align-items: baseline; gap: 10px; } } /* ---- home: photographs -------------------------------------------------- */ .cs-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } .cs-photos figure { margin: 0; border-radius: 4px; overflow: hidden; } .cs-photos img { width: 100%; height: 320px; object-fit: cover; display: block; } @media (max-width: 900px) { .cs-photos { grid-template-columns: 1fr; } .cs-photos img { height: 220px; } } /* The home columns are wider than the block editor's default content width. */ .cs-home-columns { gap: 40px; } .cs-home-columns .wp-block-column { min-width: 0; } @media (max-width: 1100px) { .cs-home-columns { flex-wrap: wrap; } .cs-home-columns .wp-block-column { flex-basis: 100% !important; } } /* ---- projections: search and class/region filter ------------------------ */ /* Same control language as .cs-switch (the class and week pills elsewhere on the site): bold, uppercase, letter-spaced, the same 0.9375rem, the same pill border and radius, sitting straight on the panel rather than boxed in a distinct white field. A search box's typed text inherits the same treatment, which is also how every team name already renders in the tables next to it -- "hoover" reads as "HOOVER" the same way "Hoover" does in the ranking below it. */ .cs-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 22px 14px; font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* A and a