/* Theme Name: LISD Athletics Description: SIDEARM-style broadcast hub theme for LubbockISDAthletics.com. One layout, five brand identities — school reskins are config, not code (see the Athletics Engine plugin). Author: The Owen Group / Texas Sports Marketing Version: 0.17.0 Requires PHP: 8.1 */ :root { --bg: #0b0b0f; --bg-alt: #101016; --surface: #15151c; --line: #22222a; --card-line: #23232d; --text: #f2f2f5; --title: #ffffff; --muted: #9a9aa5; --entry-text: #d5d5dc; --chip-bg: rgba(255, 255, 255, .09); --chip-text: #c9c9d2; --badge-bg: rgba(255, 255, 255, .12); --badge-text: #cfcfd6; --sponsor-line: #33333f; --font-display: 'Oswald', 'Arial Narrow', -apple-system, sans-serif; /* brand vars are set per page context by the engine (official LISD PMS palette) */ --brand-primary: #001871; --brand-secondary: #F2A900; --brand-accent: #D22630; --brand-on-primary: #ffffff; } /* Light mode: same layout, daylight surfaces. data-theme is set on before paint (header.php) from localStorage, else the OS preference. */ html[data-theme="light"] { --bg: #f2f3f6; --bg-alt: #e9ebf0; --surface: #ffffff; --line: #e0e2e8; --card-line: #e0e2e8; --text: #16171d; --title: #14151b; --muted: #5c5d68; --entry-text: #33343c; --chip-bg: rgba(0, 0, 0, .07); --chip-text: #4b4c56; --badge-bg: rgba(0, 0, 0, .08); --badge-text: #4b4c56; --sponsor-line: #c6c8d0; } /* Surfaces that stay dark in both modes (branded billboards + media chrome + footer) re-pin the dark component tokens so their contents keep contrast. */ .lisd-hero, .lisd-nowplaying, .lisd-playerbar, .lisd-ticker, .site-footer { --surface: #15151c; --line: #22222a; --card-line: #23232d; --text: #f2f2f5; --title: #ffffff; --muted: #9a9aa5; --chip-bg: rgba(255, 255, 255, .09); --chip-text: #c9c9d2; --badge-bg: rgba(255, 255, 255, .12); --badge-text: #cfcfd6; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; } img { max-width: 100%; height: auto; } a { color: var(--brand-secondary); } /* In daylight, gold-on-white body links drop to a dark brand ink for contrast. Scoped to content prose — chrome, hero, and dark islands keep their colors. */ html[data-theme="light"] .entry a, html[data-theme="light"] .school-links__note a { color: color-mix(in srgb, var(--brand-primary) 85%, #000); } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; } .wrap--narrow { max-width: 760px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2001; background: var(--brand-primary); color: var(--brand-on-primary); padding: 10px 18px; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } #lisd-main:focus { outline: none; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; /* --brand-primary-strong == --brand-primary for every brand but Monterey, whose light sky-blue fails white-text contrast here (2.9:1 → 8.2:1). */ background: color-mix(in srgb, var(--brand-primary-strong, var(--brand-primary)) 88%, #000); border-bottom: 3px solid var(--brand-secondary); } /* Installed app: with a translucent status bar the page draws under the iPhone Dynamic Island. Pad everything down by the safe-area inset and keep a brand-colored strip behind the island; the sticky header then sticks just below it. Applied unconditionally — the inset is 0 wherever the status bar doesn't overlap (Safari, Android, desktop), so it no-ops. */ body { padding-top: env(safe-area-inset-top, 0px); } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--brand-primary-strong, var(--brand-primary)) 88%, #000); } .site-header { top: env(safe-area-inset-top, 0px); } .mobile-nav { max-height: calc(100dvh - 120px); overflow-y: auto; } .site-header__inner { max-width: 1080px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; } .site-logo { color: var(--brand-on-primary); text-decoration: none; line-height: 1.1; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .site-logo__mark { height: 42px; width: auto; max-width: 74px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } .site-logo__text { display: flex; flex-direction: column; min-width: 0; } .site-logo strong { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; } .site-logo__text > span { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; opacity: .8; } @media (max-width: 560px) { .site-logo__text > span { display: none; } .site-logo strong { font-size: .82rem; white-space: normal; line-height: 1.1; max-width: 110px; } .site-logo__mark { height: 34px; } } .site-nav { margin-left: auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { color: var(--brand-on-primary); text-decoration: none; font-size: .8rem; font-weight: 500; font-family: var(--font-display); letter-spacing: .07em; text-transform: uppercase; padding: 8px 10px; border-radius: 8px; white-space: nowrap; } .site-nav a:hover, .site-nav a.is-current { background: rgba(0,0,0,.25); } /* ---------- theme toggle (shows the mode you'd switch to) ---------- */ .theme-toggle { flex: none; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--brand-on-primary); opacity: .85; padding: 8px; } .theme-toggle:hover { opacity: 1; } .theme-toggle:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 2px; } .theme-toggle svg { width: 19px; height: 19px; display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } /* ---------- mobile menu ---------- */ .nav-toggle { display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 12px 10px; } .nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-on-primary); transition: transform .25s, opacity .2s; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-toggle:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 2px; } .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 99; background: color-mix(in srgb, var(--brand-primary) 90%, #000); border-bottom: 3px solid var(--brand-secondary); padding: 4px 0 10px; box-shadow: 0 18px 30px rgba(0, 0, 0, .45); } .mobile-nav[hidden] { display: none; } .mobile-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 22px; color: var(--brand-on-primary); text-decoration: none; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, .08); } .mobile-nav a:last-child { border-bottom: none; } .mobile-nav a.is-current { background: rgba(0, 0, 0, .28); box-shadow: inset 3px 0 0 var(--brand-secondary); } .mobile-nav a:active { background: rgba(0, 0, 0, .35); } .mobile-nav .chip { flex: none; width: 11px; height: 11px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); } .mobile-nav hr { border: none; border-top: 1px solid rgba(255, 255, 255, .18); margin: 4px 0; } .mobile-nav hr + a, .mobile-nav hr ~ a { font-size: .82rem; opacity: .88; padding-block: 11px; } @media (max-width: 700px) { .site-nav { display: none; } .nav-toggle { display: flex; margin-left: 0; } .theme-toggle { margin-left: auto; } } /* ---------- sections ---------- */ .section { padding: clamp(44px, 6vw, 64px) 0; } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 26px; } .section__title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .section__title::after { content: ""; display: block; width: 52px; height: 5px; margin-top: 7px; background: linear-gradient(90deg, var(--brand-secondary) 0 70%, var(--brand-accent) 70%); transform: skewX(-18deg); } .section__more { color: var(--muted); font-size: .8rem; text-decoration: none; } .section__more:hover { color: var(--text); } /* page.php stacks light sections into one sheet; dark sections keep their own spacing */ .section--light + .section--light { border-top: 0; padding-top: 0; } /* brand-tinted band — mixed from the theme bg var, so it deepens in dark mode and pales in light mode instead of fighting the toggle */ .section--tint { background: color-mix(in srgb, var(--brand-primary) 12%, var(--bg)); border-block: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--line)); } /* ---------- light sections (the daylight break in the dark theme) ---------- */ .section--light { background: #f2f2f4; color: #17171d; border-block: 1px solid #e2e2e7; } .section--light .section__title { color: #14141a; } .section--light .section__more { color: #62626d; } .section--light .section__more:hover { color: #14141a; } .section--light .follow-card { background: #fff; border-color: #e2e2e7; } .section--light .follow-card h3 { color: #14141a; } .section--light .follow-card p { color: #55555f; } .section--light .school-link { background: #fff; border-color: #e2e2e7; } .section--light .school-link strong { color: #17171d; } .section--light .school-link span { color: #6a6a75; } .section--light .school-link:hover { border-color: var(--brand-primary); } .section--light .sponsor-slot { background: #fff; border-color: #cfcfd6; color: #6a6a75; } .school-links__note { color: var(--muted); font-size: .8rem; margin: 16px 0 0; } .section--light .school-links__note { color: #6a6a75; } .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } /* ---------- how to follow ---------- */ .follow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .follow-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; } .follow-card h3 { margin: 0 0 6px; font-size: 1rem; } .follow-card p { margin: 0; color: var(--muted); font-size: .85rem; } .follow-card .num { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 99px; background: var(--brand-primary); color: var(--brand-on-primary); font-weight: 900; margin-bottom: 10px; } /* ---------- sponsors ---------- */ .sponsor-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .sponsor-slot { border: 1px dashed var(--sponsor-line); border-radius: 10px; padding: 26px 10px; color: var(--muted); text-align: center; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } /* ---------- school page ---------- */ .school-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .school-link { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; } .school-link strong { color: var(--text); font-size: .95rem; } .school-link span { color: var(--muted); font-size: .75rem; } .school-link:hover { border-color: var(--brand-secondary); } /* On light backgrounds the pale secondary washes out — use the bolder primary. */ html[data-theme="light"] .school-link:hover { border-color: var(--brand-primary); } /* ---------- content pages ---------- */ .page-title { margin: 8px 0 22px; font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.08; } .page-title::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 10px; background: linear-gradient(90deg, var(--brand-secondary) 0 70%, var(--brand-accent) 70%); transform: skewX(-18deg); } .entry { color: var(--entry-text); font-size: .95rem; } /* content pages sit on a light sheet (page.php adds section--light section--page) */ .section--page { padding: 48px 0 56px; } .section--light .page-title { color: #14141a; } .section--light .entry { color: #33333c; } .section--light .entry h2, .section--light .entry h3, .section--light .entry strong { color: #14141a; } .section--light .entry a { color: color-mix(in srgb, var(--brand-primary) 85%, #000); text-decoration: underline; } .section--light .entry a:hover { color: #000; } .section--light .entry li::marker { color: var(--brand-primary); } .section--light .entry hr { border-top-color: #e2e2e7; } .entry h2 { margin: 34px 0 10px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text); } .entry h3 { margin: 22px 0 6px; font-size: 1rem; color: var(--text); } .entry p, .entry li { line-height: 1.65; } .entry ul, .entry ol { padding-left: 22px; } .entry li { margin-bottom: 6px; } .entry li::marker { color: var(--brand-secondary); } .entry a { color: var(--brand-secondary); } .entry a:hover { color: var(--text); } .entry strong { color: var(--text); } .entry hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; } /* ---------- 404 ---------- */ .lisd-404 { text-align: center; padding: 28px 20px 8px; } .lisd-404 .page-title::after { margin-left: auto; margin-right: auto; } .lisd-404__code { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(4.5rem, 18vw, 8rem); line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 2px var(--brand-secondary); opacity: .55; } .lisd-404__lead { color: var(--muted); max-width: 460px; margin: 0 auto 22px; } .lisd-404__btn { display: inline-flex; flex: none; padding: 14px 34px; } /* ---------- footer ---------- */ .site-footer { background: #08080b; border-top: 1px solid var(--line); margin-top: 48px; padding: 36px 0 110px; } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; } .footer-cols .footer-head { margin: 0 0 10px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .footer-cols a { color: #c9c9d2; text-decoration: none; font-size: .85rem; } .footer-cols a:hover { color: #fff; } .footer-note { color: #55555f; font-size: .72rem; margin-top: 28px; text-align: center; } .footer-note a { color: #7d7d88; } /* SIDEARM-style production credit: the network is powered by TSM. */ .footer-powered { margin-top: 30px; padding-top: 24px; border-top: 1px solid #1a1a22; display: flex; align-items: center; justify-content: center; gap: 14px; } .footer-powered__label { color: #7d7d88; font-family: var(--font-display); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; } .footer-powered__link { display: flex; opacity: .95; transition: opacity .15s; } .footer-powered__link:hover { opacity: 1; } .footer-powered__link img { height: 46px; width: auto; } /* Broadcast transcript (single game page) — WCAG 1.2.1 text alternative. The transcript is served as a downloadable .txt rather than dumped inline. */ .transcript__note { max-width: 70ch; margin: 0 0 18px; font-size: .9rem; line-height: 1.6; color: var(--muted); } .transcript__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .transcript__download { margin: 0; } .btn--transcript { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .15s, border-color .15s; } .btn--transcript:hover, .btn--transcript:focus-visible { background: var(--bg-alt); border-color: var(--brand-primary); } .btn--transcript span { font-size: 1.05em; line-height: 1; }