/* ============================================================ To-Do Bingo — styles Themes are driven by CSS custom properties set per [data-theme="..."] on . See bottom of file for themes. ============================================================ */ :root { --transition-fast: 0.18s ease; --transition-pop: 0.35s cubic-bezier(.34, 1.56, .64, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: var(--body-font); color: var(--ink); background: var(--page-bg); background-attachment: fixed; min-height: 100vh; transition: background var(--transition-fast), color var(--transition-fast); position: relative; overflow-x: hidden; } /* ============================================================ Floating background decorations ============================================================ */ .bg-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .decor { position: absolute; font-size: 2.4rem; opacity: 0.35; animation: float-around 18s ease-in-out infinite; filter: saturate(1.1); } .d1 { top: 8%; left: 6%; animation-duration: 16s; } .d2 { top: 18%; right: 10%; animation-duration: 21s; animation-delay: -3s; } .d3 { bottom: 14%; left: 12%; animation-duration: 19s; animation-delay: -7s; } .d4 { top: 55%; right: 6%; animation-duration: 23s; animation-delay: -10s; } .d5 { bottom: 8%; right: 22%; animation-duration: 17s; animation-delay: -5s; } .d6 { top: 40%; left: 4%; animation-duration: 20s; animation-delay: -2s; } @keyframes float-around { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(12px, -18px) rotate(8deg); } 50% { transform: translate(-8px, 10px) rotate(-6deg); } 75% { transform: translate(10px, 14px) rotate(5deg); } } /* ============================================================ Layout ============================================================ */ .app { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; } .app-header { text-align: center; margin-bottom: 28px; } .app-title { font-family: var(--heading-font); font-size: clamp(2.4rem, 8vw, 4rem); margin: 0; color: var(--title-color, var(--accent-strong)); letter-spacing: 0.02em; text-shadow: var(--title-shadow); } .app-subtitle { font-family: var(--body-font); font-size: clamp(0.95rem, 2.6vw, 1.15rem); color: var(--muted-ink); margin: 8px 0 0; } .screen.hidden { display: none; } /* ============================================================ Setup card / form ============================================================ */ .card { background: var(--surface); border: var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: clamp(18px, 4vw, 36px); position: relative; } .field-label { font-family: var(--heading-font); font-size: 1.3rem; margin: 0 0 4px; display: block; color: var(--ink); } .field-hint { font-size: 0.92rem; color: var(--muted-ink); margin: 0 0 12px; } textarea#task-input { width: 100%; font-family: var(--body-font); font-size: 1.05rem; line-height: 1.5; padding: 14px 16px; border-radius: var(--radius-md); border: var(--field-border); background: var(--field-bg); color: var(--ink); resize: vertical; min-height: 180px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } textarea#task-input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 4px var(--accent-ring); } .warning { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning-ink); border: var(--warning-border); font-size: 0.95rem; font-family: var(--body-font); } .warning.hidden { display: none; } /* Theme picker */ .theme-picker { margin-top: 22px; } .theme-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 380px) { .theme-options { grid-template-columns: 1fr; } } .theme-btn { display: flex; align-items: center; gap: 10px; font-family: var(--body-font); font-size: 0.95rem; padding: 10px 14px; border-radius: var(--radius-md); border: 2px solid transparent; background: var(--field-bg); color: var(--ink); cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .theme-btn:hover { transform: translateY(-2px); } .theme-btn[aria-pressed="true"] { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); font-weight: 600; } .theme-swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08); } .theme-swatch-doodle { background: linear-gradient(135deg, #FFB5C2, #C7CEEA); } .theme-swatch-carnival { background: linear-gradient(135deg, #FF3B30, #FFD23F); } .theme-swatch-washi { background: linear-gradient(135deg, #D9A679, #A8C3A0); } .theme-swatch-sticker { background: linear-gradient(135deg, #FF6A88, #A6C1EE); } /* ============================================================ Buttons ============================================================ */ .primary-btn { display: block; width: 100%; margin-top: 24px; font-family: var(--heading-font); font-size: 1.4rem; letter-spacing: 0.03em; padding: 14px 20px; border: var(--btn-border); border-radius: var(--radius-md); background: var(--btn-bg); color: var(--btn-text); cursor: pointer; box-shadow: var(--shadow-soft); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .primary-btn:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.05); } .primary-btn:active { transform: translateY(0) scale(0.99); } .secondary-btn, #theme-select { font-family: var(--body-font); font-size: 0.95rem; font-weight: 600; padding: 10px 14px; border-radius: var(--radius-md); border: var(--field-border); background: var(--surface); color: var(--ink); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .secondary-btn:hover, #theme-select:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } /* Hover/focus tooltip bubble (e.g. for the "Go analog" button) */ .tooltip-btn { position: relative; } .tooltip-btn::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); background: var(--ink); color: var(--surface); font-family: var(--body-font); font-size: 0.8rem; font-weight: 600; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: 30; } .tooltip-btn::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 4px); border: 6px solid transparent; border-top-color: var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: 30; } .tooltip-btn:hover::after, .tooltip-btn:hover::before, .tooltip-btn:focus-visible::after, .tooltip-btn:focus-visible::before { opacity: 1; transform: translate(-50%, 0); } /* ============================================================ Toolbar ============================================================ */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 18px; } .toolbar-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } /* ============================================================ Bingo card ============================================================ */ .bingo-card { background: var(--surface); border: var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: clamp(14px, 3.5vw, 28px); } .bingo-card-header { text-align: center; margin-bottom: 16px; } .bingo-card-title { font-family: var(--heading-font); font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0; color: var(--accent-strong); } .bingo-card-date { margin: 4px 0 0; font-size: 0.95rem; color: var(--muted-ink); font-family: var(--body-font); } .bingo-card-footer { text-align: center; font-size: 0.85rem; color: var(--muted-ink); margin: 16px 0 0; font-family: var(--body-font); } /* ============================================================ Bingo grid + cells ============================================================ */ .bingo-grid { display: grid; grid-template-columns: repeat(var(--size, 5), 1fr); gap: clamp(6px, 1.6vw, 12px); } .bingo-cell { position: relative; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: var(--cell-radius); border: var(--cell-border); background: var(--cell-bg); cursor: pointer; user-select: none; -webkit-user-select: none; padding: 6px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); box-shadow: var(--cell-shadow); } .bingo-cell:hover { transform: translateY(-2px); box-shadow: var(--cell-shadow-hover); } .bingo-cell .cell-text { position: relative; z-index: 1; font-family: var(--body-font); font-size: clamp(0.55rem, calc(1.35vw + (6 - var(--size, 5)) * 0.32rem), 1.3rem); line-height: 1.2; color: var(--ink); word-break: break-word; overflow-wrap: anywhere; hyphens: auto; transition: opacity var(--transition-fast); } .bingo-cell.type-wellness .cell-text::before { content: "🌿 "; } .bingo-cell.type-free { background: var(--free-bg); border: var(--free-border); } .bingo-cell.type-free .cell-text { font-family: var(--heading-font); font-size: clamp(1.1rem, calc(2.4vw + (6 - var(--size, 5)) * 0.4rem), 2.2rem); color: var(--free-ink); font-weight: 700; } .bingo-cell.crossed .cell-text { opacity: 0.55; } /* marker overlay */ .marker-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; } .marker-path { fill: none; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; mix-blend-mode: var(--marker-blend, multiply); } .marker-color-0 { stroke: var(--marker-1); } .marker-color-1 { stroke: var(--marker-2); } .marker-color-2 { stroke: var(--marker-3); } .marker-color-3 { stroke: var(--marker-4); } /* pop animation when toggled */ .bingo-cell.pop { animation: cell-pop var(--transition-pop); } @keyframes cell-pop { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.12) rotate(-2deg); } 65% { transform: scale(0.97) rotate(1.5deg); } 100% { transform: scale(1) rotate(0deg); } } /* line that just completed bingo */ .bingo-cell.line-glow { animation: line-glow 1.1s ease-in-out 2; } @keyframes line-glow { 0%, 100% { box-shadow: var(--cell-shadow); } 50% { box-shadow: 0 0 0 5px var(--accent-strong), var(--cell-shadow); } } /* ============================================================ Confetti ============================================================ */ .confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; } .confetti-piece { position: absolute; top: -20px; width: 10px; height: 14px; opacity: 0.9; border-radius: 2px; animation-name: confetti-fall; animation-timing-function: cubic-bezier(.4,0,.6,1); animation-fill-mode: forwards; } @keyframes confetti-fall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: 0.3; } } /* ============================================================ Bingo banner ============================================================ */ .bingo-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); z-index: 60; font-family: var(--heading-font); font-size: clamp(2.5rem, 12vw, 6rem); color: var(--accent-strong); background: var(--surface); border: var(--surface-border); border-radius: var(--radius-lg); padding: 0.4em 0.9em; box-shadow: var(--shadow-soft); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1); } .bingo-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .bingo-banner.hidden { display: none; } .bingo-banner small { display: block; font-family: var(--body-font); font-size: 0.35em; margin-top: 6px; color: var(--muted-ink); font-weight: normal; } /* ============================================================ Footer ============================================================ */ .app-footer { position: relative; z-index: 1; max-width: 760px; margin: -24px auto 0; padding: 18px 20px 32px; text-align: center; font-family: var(--body-font); font-size: 0.9rem; color: var(--muted-ink); } .app-footer p { margin: 4px 0; } .app-footer a { color: var(--accent-strong); font-weight: 600; text-decoration: none; border-bottom: 2px dashed currentColor; transition: opacity var(--transition-fast); } .app-footer a:hover { opacity: 0.7; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; } .footer-dot { opacity: 0.45; } .footer-copyright { font-size: 0.8rem; opacity: 0.75; } /* ============================================================ Toast ============================================================ */ .toast { position: fixed; top: 18px; left: 50%; transform: translate(-50%, -20px); z-index: 70; max-width: min(90vw, 480px); background: var(--warning-bg); color: var(--warning-ink); border: var(--warning-border); border-radius: var(--radius-md); padding: 12px 18px; font-family: var(--body-font); font-size: 0.95rem; text-align: center; box-shadow: var(--shadow-soft); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.hidden { display: none; } /* ============================================================ Print styles ============================================================ */ @media print { body { background: #fff !important; } .bg-decor, .app-header, #setup-screen, .toolbar, .confetti-container, .bingo-banner, .bingo-card-footer, .app-footer, .toast { display: none !important; } .app { max-width: 100%; padding: 0; margin: 0; } .bingo-card { box-shadow: none; border: 2px solid #333; border-radius: 12px; padding: 16px; } .bingo-cell { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .bingo-cell:hover { transform: none; } .marker-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } @page { size: portrait; margin: 1.2cm; } } /* ============================================================ Small screens ============================================================ */ @media (max-width: 480px) { .toolbar { justify-content: center; } .toolbar-group { justify-content: center; width: 100%; } } /* ============================================================ THEME: Pastel Doodle Notebook ============================================================ */ [data-theme="doodle"] { --page-bg: linear-gradient(135deg, #FDF6F0 0%, #F3E9FB 45%, #FFE9F0 100%); --surface: #FFFFFF; --surface-border: 2px dashed #D8CFE8; --field-bg: #FDFBFF; --field-border: 2px dashed #D8CFE8; --cell-bg: #FFFDF9; --cell-border: 2px dashed #E3D9F5; --cell-radius: 14px; --cell-shadow: 0 2px 0 rgba(91, 75, 138, 0.08); --cell-shadow-hover: 0 4px 10px rgba(91, 75, 138, 0.15); --radius-lg: 26px; --radius-md: 14px; --ink: #4A3F6B; --muted-ink: #8A7FAE; --accent-strong: #C2569B; --accent-ring: rgba(199, 206, 234, 0.55); --heading-font: 'Caveat', cursive; --body-font: 'Patrick Hand', cursive; --title-shadow: 2px 2px 0 rgba(255, 181, 194, 0.6); --btn-bg: linear-gradient(135deg, #FFB5C2, #C7CEEA); --btn-text: #4A3F6B; --btn-border: 2px solid #fff; --shadow-soft: 0 8px 24px rgba(91, 75, 138, 0.12); --warning-bg: #FFF3CC; --warning-ink: #8A6D1A; --warning-border: 2px dashed #F2D27A; --free-bg: linear-gradient(135deg, #FFE5B4, #FFD6E8); --free-border: 2px dashed #F4C9E0; --free-ink: #B4548A; --marker-1: #FF6FA1; --marker-2: #8A6FE0; --marker-3: #4FB3A9; --marker-4: #FF9F5A; --marker-blend: multiply; } /* ============================================================ THEME: Bold Retro Carnival ============================================================ */ [data-theme="carnival"] { --page-bg: repeating-linear-gradient(135deg, #FFD23F 0px, #FFD23F 28px, #FFE074 28px, #FFE074 56px); --surface: #FFF7E0; --surface-border: 4px solid #1A1A2E; --field-bg: #FFFFFF; --field-border: 3px solid #1A1A2E; --cell-bg: #FFFFFF; --cell-border: 3px solid #1A1A2E; --cell-radius: 10px; --cell-shadow: 3px 3px 0 #1A1A2E; --cell-shadow-hover: 5px 5px 0 #1A1A2E; --radius-lg: 18px; --radius-md: 10px; --ink: #1A1A2E; --muted-ink: #6B5E3C; --accent-strong: #FF3B30; --accent-ring: rgba(255, 59, 48, 0.25); --heading-font: 'Bangers', cursive; --body-font: 'Fredoka', sans-serif; --title-shadow: 3px 3px 0 #1E90FF; --btn-bg: #FF3B30; --btn-text: #FFFFFF; --btn-border: 3px solid #1A1A2E; --shadow-soft: 4px 4px 0 #1A1A2E; --warning-bg: #FFFFFF; --warning-ink: #1A1A2E; --warning-border: 3px dashed #FF3B30; --free-bg: linear-gradient(135deg, #1E90FF, #2EC4B6); --free-border: 3px solid #1A1A2E; --free-ink: #FFFFFF; --marker-1: #FF3B30; --marker-2: #1E90FF; --marker-3: #1A1A2E; --marker-4: #2EC4B6; --marker-blend: normal; } /* ============================================================ THEME: Washi Tape Scrapbook ============================================================ */ [data-theme="washi"] { --page-bg: radial-gradient(circle at 20% 20%, #FBF3E4 0%, transparent 45%), radial-gradient(circle at 80% 70%, #F4E9D8 0%, transparent 45%), #F5EBDD; --surface: #FFFDF8; --surface-border: 1px solid #E6D9C3; --field-bg: #FFFFFF; --field-border: 1px solid #E0D2B8; --cell-bg: #FFFFFF; --cell-border: 1px solid #EADFCB; --cell-radius: 4px; --cell-shadow: 0 3px 8px rgba(120, 99, 70, 0.15); --cell-shadow-hover: 0 6px 14px rgba(120, 99, 70, 0.22); --radius-lg: 14px; --radius-md: 8px; --ink: #4A3F35; --muted-ink: #9C8C76; --accent-strong: #C1666B; --accent-ring: rgba(193, 102, 107, 0.2); --heading-font: 'Architects Daughter', cursive; --body-font: 'Architects Daughter', cursive; --title-shadow: none; --btn-bg: #D88C7E; --btn-text: #FFFFFF; --btn-border: 1px solid #C1666B; --shadow-soft: 0 6px 18px rgba(120, 99, 70, 0.15); --warning-bg: #F2E2C4; --warning-ink: #6B5631; --warning-border: 1px dashed #D9A679; --free-bg: #F2E2C4; --free-border: 1px solid #E0C896; --free-ink: #8A6A33; --marker-1: #C1666B; --marker-2: #4A7C59; --marker-3: #4A4E69; --marker-4: #D4A017; --marker-blend: multiply; } /* washi tape corners on cells */ [data-theme="washi"] .bingo-cell::before, [data-theme="washi"] .bingo-cell::after { content: ""; position: absolute; width: 34px; height: 14px; background: repeating-linear-gradient(45deg, rgba(193,102,107,0.55) 0 6px, rgba(193,102,107,0.35) 6px 12px); opacity: 0.85; z-index: 0; pointer-events: none; } [data-theme="washi"] .bingo-cell::before { top: -6px; left: -8px; transform: rotate(-30deg); } [data-theme="washi"] .bingo-cell::after { bottom: -6px; right: -8px; transform: rotate(-30deg); background: repeating-linear-gradient(45deg, rgba(74,124,89,0.5) 0 6px, rgba(74,124,89,0.3) 6px 12px); } [data-theme="washi"] .bingo-cell.type-free::before, [data-theme="washi"] .bingo-cell.type-free::after { background: repeating-linear-gradient(45deg, rgba(212,160,23,0.55) 0 6px, rgba(212,160,23,0.35) 6px 12px); } /* ============================================================ THEME: Rainbow Sticker Pop ============================================================ */ [data-theme="sticker"] { --page-bg: linear-gradient(120deg, #FF9A8B, #FF6A88, #A6C1EE, #FBC2EB, #FFD1A9); --surface: rgba(255, 255, 255, 0.88); --surface-border: 2px solid rgba(255,255,255,0.6); --field-bg: #FFFFFF; --field-border: 2px solid #EFEAFE; --cell-bg: #FFFFFF; --cell-border: none; --cell-radius: 18px; --cell-shadow: 0 4px 0 rgba(45, 42, 74, 0.08), 0 6px 14px rgba(45, 42, 74, 0.12); --cell-shadow-hover: 0 6px 0 rgba(45, 42, 74, 0.1), 0 10px 20px rgba(45, 42, 74, 0.18); --radius-lg: 28px; --radius-md: 16px; --ink: #2D2A4A; --muted-ink: #6F6A99; --accent-strong: #FF6A88; --accent-ring: rgba(166, 193, 238, 0.45); --heading-font: 'Baloo 2', cursive; --body-font: 'Baloo 2', cursive; --title-color: #FFFFFF; --title-shadow: 3px 3px 0 #FF6A88, 6px 6px 0 rgba(45, 42, 74, 0.18); --btn-bg: linear-gradient(135deg, #FF9A8B, #A6C1EE); --btn-text: #2D2A4A; --btn-border: 2px solid #fff; --shadow-soft: 0 10px 26px rgba(45, 42, 74, 0.18); --warning-bg: #FFF1D6; --warning-ink: #8A5A1A; --warning-border: 2px solid #FFC75F; --free-bg: linear-gradient(135deg, #FFC75F, #FF6A88); --free-border: none; --free-ink: #FFFFFF; --marker-1: #FF6A88; --marker-2: #6A89FF; --marker-3: #FFC75F; --marker-4: #6BCB77; --marker-blend: normal; } [data-theme="sticker"] body, [data-theme="sticker"] { animation: sticker-bg-shift 22s ease-in-out infinite alternate; background-size: 220% 220%; } @keyframes sticker-bg-shift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }