/* gogoscoreboard.com — shared styles (SEO-1 + the polish pass) Brand: GOGO navy + cyan. Two themes via [data-theme] on ; pills keep a fixed bright-cyan fill in both themes. */ :root { --bg: #0a0e13; --panel: #161b22; --line: #2a3340; --text: #e8f4f8; --text-dim: #93a4b0; --accent: #4fe0ff; /* links, highlights (dark bg → bright ok) */ --pill-bg: #4fe0ff; /* CTA fills — fixed across themes */ --pill-ink: #062733; --select: rgba(79, 224, 255, 0.18); --max: 880px; } [data-theme="light"] { --bg: #f4f7f9; --panel: #ffffff; --line: #d8e0e7; --text: #14212b; --text-dim: #52646f; --accent: #007fa3; /* readable cyan-teal on white */ --select: rgba(0, 127, 163, 0.14); } * { box-sizing: border-box; } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Header / nav */ header.site { border-bottom: 1px solid var(--line); padding: 14px 0; } header.site .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .brand { display: flex; align-items: center; text-decoration: none; } img.logo { display: block; border: 1px solid var(--line); } .brand img.logo { width: 85px; height: 85px; border-radius: 20px; } img.logo.logo-light { display: none; } [data-theme="light"] img.logo.logo-dark { display: none; } [data-theme="light"] img.logo.logo-light { display: block; } .hero-logo { display: inline-block; margin-bottom: 18px; } .hero-logo img.logo { width: 180px; height: 180px; border-radius: 42px; } nav.site a { color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 600; margin-right: 14px; } nav.site a:hover { color: var(--text); } .nav-spacer { flex: 1; } .theme-toggle { background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; } .theme-toggle:hover { border-color: var(--accent); } .appstore-pill { background: var(--pill-bg); color: var(--pill-ink); font-weight: 800; font-size: 13px; text-decoration: none; padding: 8px 16px; border-radius: 999px; white-space: nowrap; } /* Hero */ .hero { padding: 64px 0 48px; } .hero h1 { font-size: clamp(30px, 5.4vw, 46px); line-height: 1.15; margin: 0 0 14px; font-weight: 900; } .hero h1 em { color: var(--accent); font-style: normal; } .hero p.lede { font-size: 18px; color: var(--text-dim); max-width: 640px; margin: 0 0 26px; } /* Cards / grids */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; color: var(--text); text-decoration: none; display: block; transition: border-color 0.15s ease, transform 0.15s ease; } a.card:hover { border-color: var(--accent); transform: translateY(-1px); } .card h3 { margin: 0 0 6px; font-size: 17px; } .card p { margin: 0; font-size: 14px; color: var(--text-dim); } .card .tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; } /* Content pages */ main.page { padding: 40px 0 64px; } main.page h1 { font-size: clamp(26px, 4.5vw, 38px); font-weight: 900; line-height: 1.2; } main.page h2 { font-size: 22px; margin-top: 36px; } main.page h3 { font-size: 17px; margin-top: 26px; } main.page p, main.page li { color: var(--text-dim); } main.page strong { color: var(--text); } main.page a { color: var(--accent); } main.page .appstore-pill { color: var(--pill-ink); } /* pill text ≠ pill fill */ /* CTA block (the soft funnel) */ .cta { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px; margin: 40px 0 0; } .cta h2 { margin: 0 0 8px; font-size: 20px; } .cta p { margin: 0 0 16px; color: var(--text-dim); font-size: 15px; } .cta a.button { display: inline-block; background: var(--pill-bg); color: var(--pill-ink); font-weight: 800; text-decoration: none; padding: 12px 22px; border-radius: 999px; } /* Tool: round-robin generator */ .tool-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin: 26px 0; } .tool-panel label { display: block; font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 14px 0 6px; } .tool-panel input[type="text"], .tool-panel textarea, .tool-panel select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; } .tool-panel textarea { min-height: 120px; resize: vertical; } .tool-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .tool-row > div { flex: 1; min-width: 180px; } .checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); margin-top: 14px; } button.go { background: var(--pill-bg); color: var(--pill-ink); border: 0; cursor: pointer; font: inherit; font-weight: 800; padding: 12px 26px; border-radius: 999px; margin-top: 18px; } button.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--line); cursor: pointer; font: inherit; font-weight: 700; padding: 10px 20px; border-radius: 999px; margin: 18px 8px 0 0; } button.ghost:hover { color: var(--text); border-color: var(--accent); } /* Seeding chips (drag to reorder BEFORE the schedule is made) */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: grab; user-select: none; -webkit-user-select: none; } .chip.dragging { opacity: 0.4; } .chip.drop-target { border-color: var(--accent); background: var(--select); } .hint { font-size: 12.5px; color: var(--text-dim); margin: 8px 0 0; } .hint strong { color: var(--text); } /* Fixture output */ .round-block { margin: 22px 0; border: 1px solid transparent; border-radius: 12px; } .round-block.drop-target { border-color: var(--accent); background: var(--select); } .round-head { display: flex; align-items: center; gap: 8px; } .round-head h3 { color: var(--accent); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; flex: 1; } .round-handle { cursor: grab; color: var(--text-dim); font-size: 15px; user-select: none; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); } .round-move { background: var(--panel); border: 1px solid var(--line); color: var(--text-dim); border-radius: 6px; cursor: pointer; font-size: 12px; padding: 2px 8px; } .round-move:hover { color: var(--text); border-color: var(--accent); } table.fixtures { width: 100%; border-collapse: collapse; margin-top: 8px; } table.fixtures td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 15px; } table.fixtures td.vs { color: var(--text-dim); text-align: center; width: 44px; font-size: 12px; } table.fixtures td.bye { color: var(--text-dim); font-style: italic; } td.team-cell { cursor: grab; border-radius: 8px; user-select: none; -webkit-user-select: none; } td.team-cell:hover { background: var(--select); } td.team-cell.selected { background: var(--select); box-shadow: inset 0 0 0 1.5px var(--accent); } td.team-cell.dragging { opacity: 0.4; } td.team-cell.drop-target { background: var(--select); box-shadow: inset 0 0 0 1.5px var(--accent); } /* Scoresheets */ table.sheet { width: 100%; border-collapse: collapse; margin: 20px 0; } table.sheet th, table.sheet td { border: 1px solid var(--line); padding: 9px 10px; font-size: 14px; text-align: center; } table.sheet th { background: var(--panel); font-weight: 700; } table.sheet td { height: 30px; } table.sheet .rowlabel { text-align: left; font-weight: 600; } /* Footer */ footer.site { border-top: 1px solid var(--line); margin-top: 60px; padding: 26px 0 40px; font-size: 13px; color: var(--text-dim); } footer.site a { color: var(--text-dim); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Print: the sheets become clean paper documents */ @media print { :root, [data-theme="light"] { --bg: #fff; --panel: #fff; --line: #999; --text: #000; --text-dim: #333; --accent: #000; --pill-bg: #fff; --pill-ink: #000; --select: transparent; } body { background: #fff; color: #000; font-size: 12px; } header.site, footer.site, .cta, .no-print, nav.site, .theme-toggle, .round-handle, .round-move, .hint, .chips { display: none !important; } main.page { padding: 0; } table.sheet th { background: #eee; } table.sheet td { height: 26px; } a { color: #000; text-decoration: none; } }