/* Brush Buddy — candy-themed kids brushing guide. Design tokens & layout from the hi-fi handoff (390×844 phone-portrait). */ :root { /* candy theme (default) */ --accent: #FF6FAE; --accent2: #B79CED; --happy: #5FD0B6; --bg: #FFF0F7; --text: #6B3A56; --mouth-excited: #C2447A; --eye: #2A2A2A; } /* Color schemes are applied at runtime by setting these vars on (see THEMES + applyTheme in app.js), so :root above is just the default fallback. */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); font-family: 'Nunito', system-ui, -apple-system, sans-serif; color: var(--text); -webkit-tap-highlight-color: transparent; } .app { position: relative; width: 100%; max-width: 440px; min-height: 100dvh; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } /* ---- Header --------------------------------------------------------------- */ .hdr { padding: max(22px, env(safe-area-inset-top)) 24px 8px; display: flex; flex-direction: column; gap: 12px; } .hdr-row { display: flex; align-items: center; justify-content: space-between; } .hdr-right { display: flex; align-items: center; gap: 8px; } .title { margin: 0; font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 24px; line-height: 1; } .status { font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 15px; background: rgba(255,255,255,0.6); padding: 6px 12px; border-radius: 999px; } .dots { display: flex; gap: 8px; } .dot { flex: 1; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.10); transition: background-color .3s ease; } .dot.done { background: var(--happy); } .dot.active { background: var(--accent2); } .streak-mount { display: flex; justify-content: center; } /* ---- Stage ---------------------------------------------------------------- */ .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; padding: 18px 18px 0; } .ring-box { position: relative; width: 320px; height: 320px; } /* active-quadrant arc */ .arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .arc-track { stroke: rgba(0,0,0,0.04); } .arc-hl { stroke: var(--accent2); transform-origin: 160px 160px; opacity: 0; transition: opacity .2s ease; } .arc-hl.show { animation: tbb-arc 0.9s ease-in-out infinite; } /* teeth ring */ .teeth { position: absolute; inset: 0; } .tooth-anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .tooth { width: 16px; height: 25px; margin: -12.5px 0 0 -8px; background: #fff; border: 2.5px solid rgba(0,0,0,0.10); /* organic little-tooth silhouette (rounded crown, slightly tapered root) */ border-radius: 46% 46% 38% 38% / 56% 56% 44% 44%; box-shadow: 0 2px 5px rgba(0,0,0,0.12); transition: border-color .3s ease; } .tooth { position: relative; } .tooth.done { border-color: var(--happy); } .tooth.active { border-color: var(--accent); animation: tbb-toothpulse 0.7s ease-in-out infinite; } /* scrub-away germs sitting on the active teeth */ .germ { position: absolute; width: 12px; height: 12px; background: #86CB6A; border-radius: 52% 48% 50% 50% / 55% 55% 45% 45%; box-shadow: 0 1px 2px rgba(0,0,0,0.18); z-index: 2; pointer-events: none; animation: germ-wobble 1.2s ease-in-out infinite; } .germ::before, .germ::after { content: ""; position: absolute; top: 4px; width: 2.4px; height: 2.4px; background: #21303a; border-radius: 50%; } .germ::before { left: 3px; } .germ::after { right: 3px; } .germ.pop { animation: germ-pop .3s ease forwards; } /* quadrant labels */ .qlabel { position: absolute; font-weight: 800; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(0,0,0,0.32); transition: color .3s ease; } .qlabel.done { color: var(--happy); } .qlabel.active { color: var(--accent); } /* mascot */ .buddy { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 3; } .buddy-halo { position: absolute; inset: -6px; background: var(--bg); border-radius: 50%; } .cd-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .cd-track { stroke: rgba(0,0,0,0.06); } .cd-ring { stroke: var(--accent); transition: stroke-dashoffset 0.9s linear; } .buddy-body { position: relative; width: 104px; height: 116px; animation: tbb-float 3s ease-in-out infinite; } /* cartoon molar mascot (rounded crown + two little roots) */ .tooth-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.14)); z-index: 0; } .tooth-shape { fill: #F6F6F3; } .tooth-groove { stroke: #E2E2DC; stroke-width: 2.2; stroke-linecap: round; opacity: .7; } .tooth-shine { fill: #ffffff; opacity: .92; } /* sandy dirt smudges that fade away as the tooth gets clean */ .dirt { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .dirt-spot { position: absolute; opacity: .9; transform: rotate(var(--rot, 0deg)); transition: opacity .7s ease, transform .7s ease; } /* scattered sand grains (child spans, randomly placed in JS) */ .dirt-grain { position: absolute; background: inherit; box-shadow: inset -1px -1px 1px rgba(0,0,0,0.18); } .dirt-spot.clean { opacity: 0; transform: scale(0.2) rotate(var(--rot, 0deg)); } .buddy-body.cheer { animation: tbb-cheer .6s ease; } .face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding-bottom: 26px; /* sit the face on the crown, above the roots */ z-index: 2; } .eyes { display: flex; gap: 16px; } .eye { position: relative; display: block; width: 15px; height: 20px; background: var(--eye); border-radius: 50%; animation: tbb-blink 4.5s infinite; } .eye::before { /* glossy catch-light */ content: ""; position: absolute; top: 16%; left: 18%; width: 36%; height: 30%; background: #fff; border-radius: 50%; } .face.sad .eye { height: 14px; } /* rosy cheeks */ .cheek { position: absolute; top: 49%; width: 13px; height: 9px; background: #F6A6A6; border-radius: 50%; opacity: .85; } .cheek-l { left: 21%; } .cheek-r { right: 21%; } .mouth-svg { width: 58px; height: 30px; } #mouth { transition: all 0.4s ease; } .sparkle { position: absolute; opacity: 0; pointer-events: none; } .sparkle-1 { top: -6px; right: -10px; font-size: 22px; } .sparkle-2 { bottom: 6px; left: -12px; font-size: 16px; } .buddy-body.excited .sparkle-1 { opacity: 1; animation: tbb-sparkle 1.0s infinite; } .buddy-body.excited .sparkle-2 { opacity: 1; animation: tbb-sparkle 1.3s infinite; } /* in-quadrant surface cue (Outsides / Insides / Chewing tops) */ .surface-cue { margin: 0; min-height: 1.2em; font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 15px; text-align: center; color: var(--accent); opacity: 0; transition: opacity .3s ease; } .surface-cue:not(:empty) { opacity: 1; } /* speech line */ .says { margin: 0; font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 19px; text-align: center; min-height: 1.4em; } /* ---- Controls ------------------------------------------------------------- */ .controls { padding: 16px 24px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; } .btn-primary { border: none; cursor: pointer; font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 20px; color: #fff; background: var(--accent); padding: 16px; border-radius: 20px; box-shadow: 0 6px 0 rgba(0,0,0,0.12); width: 100%; transition: transform .08s ease, box-shadow .08s ease; } .btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); } .btn-text { border: none; cursor: pointer; background: transparent; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); opacity: 0.6; padding: 4px; } /* sound toggle (inline, left of the status pill) */ .sound-btn { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,0.5); font-size: 15px; line-height: 32px; text-align: center; cursor: pointer; padding: 0; opacity: .75; } /* ---- Tooth-fairy finale --------------------------------------------------- */ .fairy-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; } .fairy-layer svg { width: 100%; height: 100%; display: block; } /* HERO renderer — transparent (alpha) hero clip floats over the done scene, so it works with any color scheme. Header/controls sit above it. */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; } .hero-video.show { opacity: 1; } .hdr, .controls { position: relative; z-index: 7; } /* ---- Settings panel ------------------------------------------------------- */ .settings { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(20,10,20,0.34); } .settings[hidden] { display: none; } .settings-card { width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,0.18); animation: sheet-up .25s ease; } @keyframes sheet-up { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } } .settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .settings-head h2 { margin: 0; font-family: 'Baloo 2', cursive; font-size: 20px; color: var(--text); } .settings-x { border: none; background: rgba(0,0,0,0.06); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; color: var(--text); } .settings h3 { margin: 16px 0 8px; font-family: 'Baloo 2', cursive; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; opacity: .65; color: var(--text); } .theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .swatch { position: relative; cursor: pointer; border: none; padding: 0; aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06); overflow: hidden; } .swatch i { position: absolute; inset: 0; display: block; } /* bg fill */ .swatch b { /* accent blob */ position: absolute; right: 14%; bottom: 14%; width: 46%; height: 46%; border-radius: 50%; } .swatch.sel { box-shadow: 0 0 0 3px var(--accent), 0 2px 8px rgba(0,0,0,0.15); } .swatch.sel::after { content: "✓"; position: absolute; top: 4px; left: 6px; font-size: 12px; font-weight: 900; color: rgba(0,0,0,0.5); } .hero-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .hero-pick { cursor: pointer; border: none; background: rgba(0,0,0,0.04); border-radius: 14px; padding: 6px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .hero-pick img { width: 100%; height: 64px; object-fit: contain; } .hero-pick span { font: 700 9.5px/1.1 'Nunito', sans-serif; color: var(--text); text-align: center; } .hero-pick.sel { background: color-mix(in srgb, var(--accent) 22%, #fff); box-shadow: 0 0 0 2px var(--accent); } /* ---- Keyframes ------------------------------------------------------------ */ @keyframes tbb-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } } @keyframes tbb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes tbb-toothpulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.12); } } @keyframes tbb-sparkle { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes tbb-arc { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.18; } } @keyframes tbb-cheer { 0% { transform: translateY(0) scale(1) rotate(0); } 20% { transform: translateY(-6px) scale(1.12) rotate(-7deg); } 45% { transform: translateY(0) scale(1.08) rotate(6deg); } 70% { transform: translateY(-3px) scale(1.05) rotate(-3deg); } 100% { transform: translateY(0) scale(1) rotate(0); } } @keyframes germ-wobble { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-1px) rotate(7deg); } } @keyframes germ-pop { to { transform: scale(0); opacity: 0; } } @keyframes tbb-confetti { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(900px) rotate(720deg); opacity: 0; } } /* ---- Calm / bedtime mode: dim, steady, gentle ----------------------------- */ [data-theme][data-calm="true"] { filter: saturate(0.88) brightness(0.97); } [data-calm="true"] .arc-hl.show { animation: none; opacity: .42; } [data-calm="true"] .tooth.active { animation: none; border-width: 3.5px; } [data-calm="true"] .germ { animation: none; } [data-calm="true"] .buddy-body { animation-duration: 5s; } [data-calm="true"] .buddy-body.cheer { animation: none; } /* ---- Reduced motion: swap blinking/pulsing for a static high-contrast cue - */ @media (prefers-reduced-motion: reduce) { .buddy-body, .eye, .tooth.active, .arc-hl.show, .germ, .buddy-body.cheer, .buddy-body.excited .sparkle-1, .buddy-body.excited .sparkle-2, .confetti i { animation: none !important; } .arc-hl.show { opacity: .5; } .tooth.active { border-width: 3.5px; transform: scale(1.1); } .sparkle { opacity: 1 !important; } }