/* Hälsobingo — grundstil. Tema-färgerna sätts per data-theme på . */ :root { --font: "Fredoka", "Segoe UI", system-ui, sans-serif; --font-hand: "Caveat", "Segoe Script", cursive; --ink: #2b2a28; --muted: #6b6760; --paper: #fffdf7; --card: #ffffff; --line: #e6e1d6; --accent: #d9822b; --accent-ink: #ffffff; --ok: #3f8f5a; --danger: #c0392b; --slot-0: #f6d35b; --slot-1: #8fc0ea; --slot-0-ink: #4a3a00; --slot-1-ink: #0b2e4f; --done: #3f8f5a; --radius: 14px; --shadow: 0 6px 20px rgba(60, 40, 10, 0.08); } html[data-theme="winter"] { --paper: #f6f9fc; --accent: #3b6fb6; --slot-0: #dbe9f7; --slot-1: #9fc6ec; --slot-0-ink: #12314f; --slot-1-ink: #0b2e4f; } html[data-theme="spring"] { --paper: #f8fbf3; --accent: #5aa84a; --slot-0: #d9f0b8; --slot-1: #ffd8e6; --slot-0-ink: #24421a; --slot-1-ink: #5a1f36; } html[data-theme="summer"] { --paper: #fffbf0; --accent: #e0662b; --slot-0: #ffe08a; --slot-1: #9fe0d2; --slot-0-ink: #4a3a00; --slot-1-ink: #0f3d36; } * { box-sizing: border-box; } html { color-scheme: light; } body { margin: 0; font-family: var(--font); color: var(--ink); background: radial-gradient(1200px 500px at 10% -10%, rgba(246, 211, 91, 0.25), transparent 60%), radial-gradient(900px 400px at 100% 0%, rgba(143, 192, 234, 0.25), transparent 60%), var(--paper); min-height: 100vh; display: flex; flex-direction: column; line-height: 1.45; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.15; margin: 0 0 0.4em; } h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; } h2 { font-size: 1.25rem; font-weight: 600; } p { margin: 0 0 0.8em; } code { font-family: ui-monospace, Consolas, monospace; background: #f3efe6; padding: 0.1em 0.4em; border-radius: 6px; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem clamp(1rem, 4vw, 2.5rem); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; } .brand-leaf { font-size: 1.5rem; } .site-nav { display: flex; align-items: center; gap: 0.75rem; } .nav-link { color: var(--ink); text-decoration: none; font-weight: 500; padding: 0.4rem 0.7rem; border-radius: 999px; background: transparent; border: 1px solid transparent; font: inherit; cursor: pointer; } .nav-link:hover { background: rgba(0, 0, 0, 0.05); } .nav-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } .site-main { flex: 1; width: min(1100px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) 3rem; } .site-footer { padding: 1rem; text-align: center; color: var(--muted); font-size: 0.85rem; display: flex; gap: 0.5rem; justify-content: center; } .site-footer a { color: var(--muted); } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1rem, 3vw, 1.75rem); margin-bottom: 1.25rem; } .card-center { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; } .card-narrow { max-width: 720px; } .card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .two-column { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .hero { text-align: center; padding: clamp(1.5rem, 6vw, 4rem) 0 1.5rem; } .hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); } .lead { font-size: 1.25rem; color: var(--muted); } .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } .fine-print { color: var(--muted); font-size: 0.85rem; margin-top: 1rem; } .description { white-space: pre-line; } .stack { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; } .stack-tight { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .inline-form { display: inline; } .field-row { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; } label { font-weight: 600; font-size: 0.95rem; } .label-big { font-size: 1.2rem; } .input { font: inherit; padding: 0.6rem 0.8rem; border: 2px solid var(--line); border-radius: 10px; background: #fff; width: 100%; color: var(--ink); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 130, 43, 0.2); } .input-big { font-size: 1.35rem; padding: 0.8rem 1rem; } .input-small { padding: 0.4rem 0.6rem; font-size: 0.9rem; } .input-tiny { width: 5rem; } .input-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } textarea.input { resize: vertical; } .check { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; } .check input { width: 1.2rem; height: 1.2rem; } .field-error { color: var(--danger); font-size: 0.9rem; min-height: 1.2em; } .field-error:empty { display: none; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 600; padding: 0.65rem 1.2rem; border-radius: 999px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.15s ease; } .button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(217, 130, 43, 0.3); } .button:active { transform: translateY(0); } .button-big { font-size: 1.2rem; padding: 0.9rem 1.6rem; } .button-small { font-size: 0.85rem; padding: 0.4rem 0.8rem; } .button-ghost { background: transparent; color: var(--accent); } .button-ghost:hover { background: rgba(217, 130, 43, 0.08); box-shadow: none; } .button-danger { background: var(--danger); border-color: var(--danger); } .button:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; } .alert { padding: 0.8rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 500; } .alert-ok { background: #e6f5ea; color: #1f5c33; } .alert-error { background: #fbe7e4; color: #7a1f14; } .player-code { font-family: ui-monospace, Consolas, monospace; font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: 0.12em; background: #f3efe6; padding: 0.6rem 1rem; border-radius: 12px; display: inline-block; user-select: all; } .qr { display: block; margin: 1rem auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; } .welcome .avatar { width: 4.5rem; height: 4.5rem; font-size: 2.4rem; margin-bottom: 0.5rem; } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.25rem; background: hsl(30 70% 85%); flex: none; } .avatar.hue-0 { background: hsl(15 70% 85%); } .avatar.hue-1 { background: hsl(45 70% 85%); } .avatar.hue-2 { background: hsl(75 70% 85%); } .avatar.hue-3 { background: hsl(105 70% 85%); } .avatar.hue-4 { background: hsl(135 70% 85%); } .avatar.hue-5 { background: hsl(165 70% 85%); } .avatar.hue-6 { background: hsl(195 70% 85%); } .avatar.hue-7 { background: hsl(225 70% 85%); } .avatar.hue-8 { background: hsl(255 70% 85%); } .avatar.hue-9 { background: hsl(285 70% 85%); } .avatar.hue-10 { background: hsl(315 70% 85%); } .avatar.hue-11 { background: hsl(345 70% 85%); } .profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .profile-head .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.9rem; } .board-list, .plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .board-link { display: flex; flex-direction: column; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); } .board-link:hover { border-color: var(--accent); } .board-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .board-links { display: flex; gap: 0.5rem; flex-wrap: wrap; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .admin-table th, .admin-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .admin-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .num { text-align: right; font-variant-numeric: tabular-nums; } .stat-cell { display: flex; align-items: center; gap: 0.6rem; } .stat-cell meter { flex: 1; height: 1rem; } .squares-table .input { min-width: 0; } .squares-table .slot-0 td:first-child { border-left: 6px solid var(--slot-0); } .squares-table .slot-1 td:first-child { border-left: 6px solid var(--slot-1); } .squares-editor { overflow-x: auto; } .join-link .input { font-size: 0.9rem; } .danger-details { display: inline-block; } .danger-details summary { list-style: none; display: inline-flex; } .danger-details summary::-webkit-details-marker { display: none; } .danger-details[open] form { display: block; margin-top: 0.4rem; } .error-code { font-size: 3rem; font-weight: 700; color: var(--line); margin: 0; } .feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .feed-item { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--card); padding: 0.8rem 1rem; border-radius: 12px; box-shadow: var(--shadow); } .feed-item p { margin: 0; } .feed-note { font-family: var(--font-hand); font-size: 1.2rem; color: var(--muted); } .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 0.7rem 1.1rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); z-index: 20; font-weight: 500; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Tyck till */ .kind-picker { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .kind-picker legend { font-weight: 600; margin-bottom: 0.3rem; } .kind-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 500; } .kind-option:has(input:checked) { border-color: var(--accent); background: rgba(217, 130, 43, 0.08); } .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; padding: 0 0.4em; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.8em; font-weight: 700; margin-left: 0.3em; } .feedback-list { list-style: none; padding: 0; margin: 0; } .feedback-item { border-left: 6px solid var(--line); } .feedback-item.status-new { border-left-color: var(--accent); } .feedback-item.status-inprogress { border-left-color: var(--slot-1); } .feedback-item.status-done { border-left-color: var(--done); opacity: 0.85; } .feedback-item.status-dismissed { opacity: 0.6; } .feedback-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; margin-bottom: 0.4rem; } .feedback-kind { font-weight: 600; } .feedback-message { white-space: pre-line; font-size: 1.05rem; } .feedback-agent { overflow-wrap: anywhere; } .feedback-update { margin-top: 0.6rem; align-items: end; } .feedback-update .grow { grid-column: span 2; }