/* ============================================================ Harlow's Cuddle Club — base tokens, backdrop, shelf, layout Built big & forgiving for a 3-year-old's fingers. ============================================================ */ :root { /* storybook golden-hour meadow */ --sky-top: #CDE9F7; --sky-bot: #FCE7CE; --meadow: #A9DCA0; --meadow-dk: #8ECB86; --ink: #43352F; --ink-soft: #6E5B52; --cream: #FFF9EF; --paper: #FFFDF8; --marigold: #F5A623; --coral: #FF8A6B; /* the currently-picked creature tint (set on by JS) */ --tint: #F5A623; --tint-dk: #d98a12; --tint-soft: #ffe6c2; --tab: clamp(80px, 22vw, 118px); /* toddler-sized tap targets */ --radius: 28px; --shadow: 0 14px 30px rgba(67,53,47,.18); --shadow-lg: 0 22px 48px rgba(67,53,47,.26); --font-display: "Baloo 2", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 78%); min-height: 100dvh; overflow-x: hidden; -webkit-user-select: none; user-select: none; overscroll-behavior: none; touch-action: manipulation; transition: background .6s ease; } /* ---------- soft animated sky ---------- */ .sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .sun { position: absolute; top: 6%; right: 10%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFE39A 0%, #FFD36B 60%, rgba(255,211,107,0) 72%); filter: blur(1px); animation: glow 6s ease-in-out infinite; } @keyframes glow { 50% { transform: scale(1.08); opacity: .92; } } .cloud { position: absolute; background: #fff; border-radius: 100px; opacity: .9; filter: blur(.3px); } .cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; } .c1 { width: 140px; height: 42px; top: 14%; left: -160px; animation: drift 46s linear infinite; } .c2 { width: 100px; height: 34px; top: 26%; left: -160px; animation: drift 63s linear infinite; animation-delay: -20s; } .c3 { width: 170px; height: 50px; top: 8%; left: -220px; animation: drift 78s linear infinite; animation-delay: -50s; } .cloud::before { width: 60%; height: 160%; top: -55%; left: 12%; } .cloud::after { width: 45%; height: 150%; top: -45%; right: 14%; } @keyframes drift { to { transform: translateX(115vw); } } .hills { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; background: radial-gradient(120% 100% at 50% 100%, var(--meadow) 0%, var(--meadow-dk) 100%); border-radius: 50% 50% 0 0 / 22% 22% 0 0; box-shadow: inset 0 6px 0 rgba(255,255,255,.25); } @media (prefers-reduced-motion: reduce) { .cloud, .sun { animation: none; } } /* ---------- header ---------- */ .topbar { text-align: center; padding: clamp(10px, 2.4vw, 22px) 16px 4px; } .wordmark { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 8vw, 58px); line-height: .95; color: #fff; letter-spacing: .5px; text-shadow: 0 3px 0 var(--tint-dk), 0 6px 14px rgba(67,53,47,.25); transition: text-shadow .5s ease; } .wordmark span { display: inline-block; color: #FFF3D6; } /* ---------- the shelf of tabs ---------- */ .shelf { position: relative; padding: 10px clamp(8px,3vw,20px) 0; } .shelf-row { display: flex; gap: clamp(8px, 2.2vw, 16px); overflow-x: auto; overflow-y: hidden; padding: 6px 8px 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: safe center; } .shelf-row::-webkit-scrollbar { display: none; } .shelf-board { height: 16px; margin: -14px clamp(4px,2vw,16px) 0; background: linear-gradient(180deg, #C98A54, #A96B38); border-radius: 0 0 14px 14px; box-shadow: 0 8px 16px rgba(120,74,32,.35); } .tab { flex: 0 0 auto; scroll-snap-align: center; width: var(--tab); border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; border-radius: 24px; font-family: var(--font-display); transition: transform .18s cubic-bezier(.34,1.56,.64,1); } .tab:active { transform: scale(.92); } .tab-face { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(34px, 9vw, 52px); background: var(--paper); border: 4px solid #fff; border-radius: 50%; box-shadow: var(--shadow); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .3s; } .tab-name { font-size: clamp(12px, 3.4vw, 17px); font-weight: 700; color: var(--ink-soft); transition: color .2s; } .tab.is-active .tab-face { background: var(--tab-tint, var(--tint-soft)); box-shadow: 0 0 0 5px var(--tab-color, var(--tint)), var(--shadow-lg); transform: translateY(-6px) scale(1.06); animation: tab-pop .4s cubic-bezier(.34,1.56,.64,1); } .tab.is-active .tab-name { color: var(--tab-color, var(--tint-dk)); font-weight: 800; } @keyframes tab-pop { 0%{transform:translateY(-6px) scale(.9)} 60%{transform:translateY(-10px) scale(1.14)} 100%{transform:translateY(-6px) scale(1.06)} } /* the Play & Learn tab stands apart */ .tab.learn-tab .tab-face { background: linear-gradient(145deg, #FFE7A6, #FFC978); border-color: #fff; } .tab.learn-tab.is-active .tab-face { box-shadow: 0 0 0 5px #F5A623, var(--shadow-lg); } /* enter animation */ .tab { opacity: 0; transform: translateY(14px); } .tab.in { opacity: 1; transform: translateY(0); transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); } /* ---------- views ---------- */ main { position: relative; } .view { padding: clamp(10px, 2vw, 22px) 14px 40px; } .view[hidden] { display: none; } /* pawprint pop feedback */ .paw-trail { position: fixed; inset: 0; pointer-events: none; z-index: 50; } .paw-pop { position: absolute; font-size: 34px; transform: translate(-50%,-50%) scale(.4); opacity: 0; animation: paw-pop .7s ease forwards; } @keyframes paw-pop { 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%,-120%) scale(1); } }