@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; margin: 0; padding: 20px; background: linear-gradient(135deg, #0F1729 0%, #1A2440 50%, #0F1729 100%); min-height: 100vh; color: #1F2747; background-attachment: scroll; /* was fixed — caused full-viewport repaint on every scroll frame */ } .container { max-width: 1200px; margin: 0 auto; padding: 20px 30px; background: linear-gradient(180deg, #FFF6E6 0%, #FFEFD5 100%); border-radius: 28px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); border: none; color: #1F2747; } /* FULLSCREEN — "Let's Play" makes the WHOLE page immersive: we fullscreen the page itself (), not just the cream card, so the navy background board stays visible around the centred card — like the normal layout minus the browser chrome. The page scrolls inside fullscreen for tall tables; the backdrop is painted navy so no black/white edge ever shows. */ html:fullscreen { overflow-y: auto; overflow-x: hidden; } html:fullscreen::backdrop { background: #0F1729; } .page { display: none; animation: fadeIn 0.6s ease-out; } .page.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } h1 { text-align: center; margin-bottom: 30px; font-size: 2.2em; font-weight: 700; color: #1F2747; text-shadow: none; } /* HERO HEADER — bird + title + sun + corner buttons */ .hero-header { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 14px; margin-bottom: 10px; position: relative; z-index: 2; } .hero-left { display: flex; align-items: center; justify-content: flex-start; gap: 8px; position: relative; } .hero-bird { width: 130px; height: 130px; flex-shrink: 0; animation: bird-bob 3.2s ease-in-out infinite; transform-origin: center bottom; filter: drop-shadow(0 5px 8px rgba(31, 39, 71, 0.28)); } /* Bird eye blinks every ~4s (offset from sun so they don't blink together). */ .hero-bird .hero-bird-eye { transform-origin: 36px 48px; animation: bird-blink 4s ease-in-out infinite; animation-delay: -1.6s; } @keyframes bird-blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(0.08); } } @keyframes bird-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } } .hero-bird-speech { background: #FFFFFF; color: #1F2747; border: 2px solid #1F2747; border-radius: 16px; padding: 10px 16px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.95em; line-height: 1.2; max-width: 160px; box-shadow: 0 3px 0 #1F2747; position: relative; } .hero-bird-speech::before { content: ''; position: absolute; right: -10px; top: 14px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #1F2747; } .hero-bird-speech::after { content: ''; position: absolute; right: -7px; top: 16px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #FFFFFF; } .hero-title-area { position: relative; display: flex; align-items: center; justify-content: center; } .hero-cloud { position: absolute; pointer-events: none; z-index: 0; opacity: 0.9; } .hero-cloud-1 { left: -10px; top: -6px; width: 70px; height: 35px; } .hero-cloud-2 { right: -8px; bottom: -4px; width: 56px; height: 28px; } .hero-title { margin: 0; position: relative; z-index: 1; } .hero-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .hero-sun { width: 120px; height: 120px; flex-shrink: 0; animation: sun-breathe 5.5s ease-in-out infinite; transform-origin: center; filter: drop-shadow(0 6px 10px rgba(245, 180, 0, 0.32)); overflow: visible; } @keyframes sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } /* Rays spin slowly around the sun center (SVG user coords: 100,100). */ .hero-sun .sun-rays { transform-origin: 100px 100px; animation: sun-rays-spin 28s linear infinite; } @keyframes sun-rays-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* SVG user-space transform origins (no fill-box). Eyes pivot around y=100 in viewBox 0 0 200 200, so scaleY collapses each eye toward its own center. */ .hero-sun .sun-eyes { transform-origin: 100px 100px; animation: sun-blink 4.5s ease-in-out infinite; } @keyframes sun-blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(0.08); } } .hero-sun .sun-mouth { transform-origin: 100px 134px; animation: sun-mouth-pulse 5.5s ease-in-out infinite; } @keyframes sun-mouth-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .hero-corner-buttons { display: flex; flex-direction: row; gap: 8px; align-items: center; } /* Hero corner buttons — same chunky pill design as Counting nav button, with their own colors. */ .hero-icon-btn { padding: 10px 20px; border-radius: 999px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1em; color: #1F2747; cursor: pointer; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; position: relative; overflow: hidden; border: 2px solid; } .hero-icon-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%); pointer-events: none; } .hero-icon-btn:hover { transform: translateY(-2px); } .hero-icon-btn:active { transform: translateY(2px); } #muteBtn.hero-icon-btn { background: linear-gradient(145deg, #6BB6FF, #4A90E2); border-color: #4A90E2; color: #FFFFFF; box-shadow: 0 6px 14px rgba(74, 144, 226, 0.35); } #muteBtn.hero-icon-btn:hover { box-shadow: 0 8px 18px rgba(74, 144, 226, 0.45); } .hero-icon-btn.home-btn, .hero-icon-btn:not(#muteBtn) { background: linear-gradient(145deg, #FF9F9F, #F47286); border-color: #F47286; color: #FFFFFF; box-shadow: 0 6px 14px rgba(244, 114, 134, 0.35); } .hero-icon-btn.home-btn:hover, .hero-icon-btn:not(#muteBtn):hover { box-shadow: 0 8px 18px rgba(244, 114, 134, 0.45); } /* Corner leaves (decorative) */ .corner-leaf { position: absolute; width: 90px; height: 90px; pointer-events: none; z-index: 0; opacity: 0.92; } .corner-leaf-tl { top: 0; left: 0; transform: translate(-12px, -10px); } .corner-leaf-tr { top: 0; right: 0; transform: translate(12px, -10px); } /* ChatGPT-style "Let's Count!" — each letter its own color, navy outline, sparkles */ h1.page-title-counting { font-family: 'Fredoka', 'Poppins', sans-serif; font-size: clamp(3.4rem, 7vw, 5rem); font-weight: 700; letter-spacing: 0.01em; margin: 6px 0 18px; filter: drop-shadow(0 5px 0 rgba(31, 39, 71, 0.22)); line-height: 1; } h1.page-title-counting .title-letter { -webkit-text-stroke: 1.8px #1F2747; } h1.page-title-counting .title-letter { -webkit-text-stroke: 2.2px #1F2747; paint-order: stroke fill; display: inline-block; } h1.page-title-counting .title-letter.title-apostrophe { font-size: 0.85em; vertical-align: top; } h1.page-title-counting .title-space { display: inline-block; width: 0.18em; } /* Scattered small sparkles around the title */ .title-sparkle-scatter { position: absolute; color: #FFC93C; -webkit-text-stroke: 1px #C99B14; text-shadow: 0 0 10px rgba(255, 201, 60, 0.55); pointer-events: none; animation: sparkle-twinkle 2.6s ease-in-out infinite; z-index: 1; } /* Sparkle clusters flanking the title (big diamond + small twinkles each side) */ .title-sparkle-scatter.s1 { top: 32%; left: 2%; font-size: 1.7em; animation-delay: 0s; } /* big left */ .title-sparkle-scatter.s2 { top: 8%; left: 12%; font-size: 0.85em; animation-delay: -0.6s; } .title-sparkle-scatter.s3 { bottom: 10%; left: 14%; font-size: 0.9em; animation-delay: -1.4s; } .title-sparkle-scatter.s4 { top: 8%; right: 12%; font-size: 0.85em; animation-delay: -0.3s; } .title-sparkle-scatter.s5 { top: 32%; right: 2%; font-size: 1.7em; animation-delay: -1.8s; } .title-sparkle-scatter.s6 { bottom: 10%; right: 14%; font-size: 0.9em; animation-delay: -2.0s; } @keyframes sparkle-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.3) rotate(15deg); opacity: 0.6; } } @keyframes sparkle-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.3) rotate(15deg); opacity: 0.65; } } .page-nav { display: flex; justify-content: center; gap: 20px; margin-bottom: 18px; } .nav-btn { background: linear-gradient(145deg, #DDD5FA, #B8A8F2); border: 2px solid #8B72D5; color: #1F2747; padding: 12px 26px; border-radius: 999px; font-size: 1em; font-weight: 700; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 12px rgba(139, 114, 213, 0.25); position: relative; overflow: hidden; } .nav-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%); pointer-events: none; } .nav-btn:hover { transform: translateY(-2px); background: #FFFDF7; box-shadow: 0 8px 18px rgba(31, 39, 71, 0.1); } .nav-btn.active { background: linear-gradient(145deg, #FFC93C, #FFA940); color: #1F2747; border-color: #FFA940; box-shadow: 0 8px 18px rgba(255, 169, 64, 0.35); } .nav-btn.icon-btn { padding: 12px 16px; font-size: 1.1em; } .nav-btn.icon-btn.muted { background: rgba(31, 39, 71, 0.06); color: rgba(31, 39, 71, 0.4); } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 8px; } .setting-group { background: #FFFFFF; padding: 10px 14px 12px; border-radius: 14px; border: 1px solid rgba(31, 39, 71, 0.08); box-shadow: 0 4px 14px rgba(31, 39, 71, 0.06); transition: all 0.25s ease; } .setting-group:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 39, 71, 0.1); } .setting-group h3 { margin: 0 0 6px 0; font-size: 0.9em; font-weight: 800; text-align: center; color: #4B547A; text-shadow: none; text-transform: uppercase; letter-spacing: 0.06em; } .slider-control { margin-bottom: 20px; } .slider-control label { display: block; margin-bottom: 10px; font-weight: 600; color: #4B547A; text-shadow: none; } .slider-container { display: flex; align-items: center; gap: 15px; } .slider { flex: 1; height: 8px; border-radius: 8px; background: rgba(31, 39, 71, 0.08); outline: none; appearance: none; position: relative; border: none; } .slider::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #FFC93C, #FFA940); border-radius: 8px; width: var(--value, 50%); transition: width 0.2s ease; } .slider::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(145deg, #FFC93C, #FFA940); cursor: pointer; box-shadow: 0 3px 10px rgba(255, 169, 64, 0.45); border: 2px solid #FFFFFF; position: relative; z-index: 2; } .slider::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(255, 169, 64, 0.55); } .slider-value { background: #FFF6E6; padding: 6px 12px; border-radius: 12px; font-weight: 700; min-width: 55px; text-align: center; border: 1px solid rgba(31, 39, 71, 0.08); color: #1F2747; } .number-input { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 15px; } .number-btn { background: #FFF6E6; color: #1F2747; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 800; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 3px 10px rgba(31, 39, 71, 0.08); border: 2px solid rgba(255, 169, 64, 0.35); position: relative; overflow: hidden; } .number-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%); border-radius: 50% 50% 0 0; pointer-events: none; } .number-btn:hover { transform: scale(1.08); background: linear-gradient(145deg, #FFE4A8, #FFCB6B); border-color: #FFA940; box-shadow: 0 6px 16px rgba(255, 169, 64, 0.3); } .number-display { background: #FFFFFF; border: 2px solid rgba(31, 39, 71, 0.1); color: #1F2747; font-size: 20px; font-weight: 800; width: 55px; height: 55px; text-align: center; line-height: 51px; border-radius: 14px; box-shadow: 0 3px 10px rgba(31, 39, 71, 0.08); } .shape-selector, .color-selector { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .shape-btn.surprise-btn { margin-top: 12px; width: 100%; background: linear-gradient(90deg, #FF6B6B, #FFC93C, #5DD3A9, #6BB6FF, #A78BFA, #F472B6); background-size: 300% 100%; color: #FFFFFF; font-weight: 700; letter-spacing: 0.04em; border: 2px solid #1F2747; box-shadow: 0 3px 0 #1F2747, 0 6px 14px rgba(31, 39, 71, 0.18); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); animation: rainbow-shift 8s linear infinite; } @keyframes rainbow-shift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } } .shape-btn.surprise-btn.active { box-shadow: 0 1px 0 #1F2747, 0 3px 8px rgba(31, 39, 71, 0.22); transform: translateY(2px); } .shape-btn { background: #FFF6E6; border: 2px solid rgba(31, 39, 71, 0.08); color: #1F2747; padding: 10px 14px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; font-size: 0.9em; font-weight: 700; min-width: 75px; box-shadow: 0 2px 6px rgba(31, 39, 71, 0.05); position: relative; overflow: hidden; } .shape-btn:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 5px 14px rgba(31, 39, 71, 0.1); } .shape-btn.active { background: linear-gradient(145deg, #FFC93C, #FFA940); color: #1F2747; border-color: #FFA940; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 169, 64, 0.35); } .toggle-switch { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 15px 0; } .toggle-switch input[type="checkbox"] { appearance: none; width: 50px; height: 26px; background: rgba(31, 39, 71, 0.12); border-radius: 20px; position: relative; cursor: pointer; transition: all 0.25s ease; border: none; } .toggle-switch input[type="checkbox"]:checked { background: linear-gradient(145deg, #FFC93C, #FFA940); } .toggle-switch input[type="checkbox"]::before { content: ''; position: absolute; width: 20px; height: 20px; background: #FFFFFF; border-radius: 50%; top: 3px; left: 3px; transition: all 0.25s ease; box-shadow: 0 2px 5px rgba(31, 39, 71, 0.2); } .toggle-switch input[type="checkbox"]:checked::before { transform: translateX(24px); } .toggle-label { font-weight: 600; color: #4B547A; } .delay-selector { display: flex; flex-direction: column; gap: 15px; align-items: center; } .delay-option { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 15px; border-radius: 14px; background: #FFF6E6; border: 2px solid rgba(31, 39, 71, 0.06); transition: all 0.2s ease; min-width: 140px; } .delay-option:hover { background: #FFFFFF; border-color: rgba(31, 39, 71, 0.12); } .delay-option input[type="radio"] { appearance: none; width: 16px; height: 16px; border: 2px solid rgba(31, 39, 71, 0.25); border-radius: 50%; background: #FFFFFF; cursor: pointer; position: relative; transition: all 0.2s ease; } .delay-option input[type="radio"]:checked { border-color: #FFA940; background: linear-gradient(145deg, #FFC93C, #FFA940); box-shadow: 0 0 8px rgba(255, 169, 64, 0.4); } .delay-option input[type="radio"]:checked::before { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; } .delay-label { font-weight: 600; color: #1F2747; font-size: 0.95em; } .preview-area { background: #FFFFFF; border-radius: 14px; padding: 8px 14px 10px; text-align: center; border: 1px solid rgba(31, 39, 71, 0.08); box-shadow: 0 4px 14px rgba(31, 39, 71, 0.06); } .preview-area h3 { margin: 0 0 8px 0; font-size: 0.9em; font-weight: 800; color: #4B547A; text-transform: uppercase; letter-spacing: 0.06em; } .preview-shapes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; } .preview-number { font-size: 1.5em; font-weight: 900; margin-bottom: 4px; transition: all 0.3s ease; color: #1F2747; } .start-counting-btn { background: linear-gradient(145deg, #5DD3A9, #3FBB8A); border: none; color: #FFFFFF; padding: 16px 42px; border-radius: 999px; font-size: 1.2em; font-weight: 800; cursor: pointer; transition: all 0.25s ease; display: block; margin: 30px auto; box-shadow: 0 8px 22px rgba(63, 187, 138, 0.4); } .start-counting-btn:hover { transform: translateY(-3px) scale(1.02); background: linear-gradient(145deg, #3FBB8A, #2EA371); box-shadow: 0 12px 28px rgba(63, 187, 138, 0.5); } .counting-table { background: #FFFFFF; border: 2px solid rgba(31, 39, 71, 0.30); border-radius: 22px; padding: 20px; box-shadow: 0 10px 28px rgba(31, 39, 71, 0.18); } .table-header { display: flex; margin-bottom: 15px; font-weight: 700; color: #4B547A; } .header-number, .header-shapes, .header-tu { padding: 12px; border: 1px solid rgba(31, 39, 71, 0.08); border-radius: 12px; background: #FFF6E6; margin-right: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85em; } .header-number { flex: 0 0 120px; background: linear-gradient(135deg, #FFE4A8, #FFCB6B); color: #1F2747; } .header-shapes { flex: 1; } .header-tu { flex: 0 0 180px; margin-right: 0; background: linear-gradient(135deg, #C7F0D9, #9FE3BD); display: flex; justify-content: space-around; align-items: center; font-size: 1em; color: #1F2747; } .tu-label { font-weight: 700; color: #1F2747; text-transform: uppercase; letter-spacing: 1px; } .counting-row { display: flex; align-items: center; margin-bottom: 12px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 169, 64, 0.18); background: linear-gradient(145deg, #FFF6E6, #FFEFD5); transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(31, 39, 71, 0.04); } .counting-row:hover { background: linear-gradient(145deg, #FFEFD5, #FFE4A8); transform: translateX(4px); border-color: rgba(255, 169, 64, 0.4); box-shadow: 0 8px 20px rgba(255, 169, 64, 0.18); } .counting-row.current { border-color: #FFA940; background: linear-gradient(145deg, #FFE4A8, #FFCB6B); transform: translateX(8px) scale(1.01); box-shadow: 0 10px 24px rgba(255, 169, 64, 0.35); } .row-number { flex: 0 0 120px; display: flex; align-items: center; justify-content: center; } .row-number button { background: linear-gradient(145deg, #FFD700, #F4A460); color: #2F4F4F; border: 3px solid #DAA520; padding: 12px 22px; border-radius: 14px; cursor: pointer; transition: all 0.25s ease; font-weight: 800; font-size: 1.15em; box-shadow: 0 6px 16px rgba(218, 165, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(139, 69, 19, 0.25); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); } .row-number button:hover { background: linear-gradient(145deg, #FFE066, #FFB74D); transform: scale(1.08) translateY(-2px); box-shadow: 0 10px 24px rgba(218, 165, 32, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(139, 69, 19, 0.3); } .row-shapes { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 25px; } .row-placeholder { flex: 1; display: flex; align-items: center; padding: 0 25px; color: rgba(75, 84, 122, 0.55); font-weight: 600; font-style: italic; font-size: 0.95em; letter-spacing: 0.02em; pointer-events: none; } .shape-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; } .row-tu { flex: 0 0 180px; display: flex; justify-content: space-around; align-items: center; background: #FFF6E6; border-radius: 14px; padding: 10px; border: 1px solid rgba(31, 39, 71, 0.08); } .tu-value { width: 55px; height: 55px; background: #FFFFFF; border: 2px solid rgba(31, 39, 71, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6em; font-weight: 800; color: #1F2747; box-shadow: 0 3px 8px rgba(31, 39, 71, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: all 0.25s ease; text-shadow: none; position: relative; overflow: hidden; } .tu-value::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); border-radius: 12px 12px 0 0; pointer-events: none; } .tu-value.tens { background: linear-gradient(145deg, #C7F0D9, #9FE3BD); border-color: #5DD3A9; color: #0F5132; } .tu-value.units { background: linear-gradient(145deg, #FFD8B3, #FFB178); border-color: #FF9F50; color: #6B3104; } .counting-row:hover .tu-value { transform: scale(1.05); box-shadow: 0 6px 14px rgba(31, 39, 71, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .empty-shape { display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28), inset 0 3px 5px rgba(255, 255, 255, 0.5), inset 0 -9px 14px rgba(0, 0, 0, 0.28); border: none; transition: all 0.3s ease; position: relative; overflow: hidden; } /* shiny-gem glossy dome cap (circle/bird/berry keep their own overrides) */ .empty-shape::before { content: ''; position: absolute; top: 5%; left: 11%; right: 11%; height: 46%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100%); border-radius: 50%; pointer-events: none; } /* shiny-gem specular sparkle dot */ .empty-shape::after { content: ''; position: absolute; top: 15%; left: 21%; width: 21%; height: 12%; background: rgba(255, 255, 255, 0.92); border-radius: 50%; transform: rotate(-22deg); pointer-events: none; } .empty-shape.bird::after, .empty-shape.berry::after { display: none; } .empty-shape:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.22); } .empty-shape.box { border-radius: 8px; border: 3px solid #1F2747; } .empty-shape.circle { border-radius: 50%; border: 3px solid #1F2747; box-shadow: 0 5px 12px rgba(31, 39, 71, 0.28), inset -5px -7px 0 rgba(0, 0, 0, 0.20), inset 5px 6px 0 rgba(255, 255, 255, 0.18); } /* Override the generic top-fade ::before with a domed glossy highlight */ .empty-shape.circle::before { top: 4%; left: 6%; right: 6%; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0) 100%); border-radius: 50%; } /* Crisp specular dot on upper-left, like a glass marble */ .empty-shape.circle::after { content: ''; position: absolute; top: 16%; left: 20%; width: 24%; height: 14%; background: rgba(255, 255, 255, 0.95); border-radius: 50%; transform: rotate(-22deg); pointer-events: none; } .empty-shape.circle:hover { box-shadow: 0 8px 18px rgba(31, 39, 71, 0.34), inset -5px -7px 0 rgba(0, 0, 0, 0.20), inset 5px 6px 0 rgba(255, 255, 255, 0.25); } .empty-shape.diamond { transform: rotate(45deg); border-radius: 4px; } .empty-shape.diamond:hover { transform: rotate(45deg) scale(1.1) translateY(-2px); } .empty-shape.hexagon { border-radius: 6px; clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%); } .empty-shape.triangle { border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .empty-shape.heart { border-radius: 0; clip-path: polygon( 50% 95%, 70% 82%, 88% 70%, 96% 55%, 99% 40%, 96% 25%, 88% 12%, 75% 4%, 60% 4%, 53% 12%, 50% 22%, 47% 12%, 40% 4%, 25% 4%, 12% 12%, 4% 25%, 1% 40%, 4% 55%, 12% 70%, 30% 82% ); transform: none; } .empty-shape.heart:hover { transform: scale(1.1) translateY(-2px); } .empty-shape.star { border-radius: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .empty-shape.bird { border-radius: 8px; background: transparent !important; border: none !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; } .empty-shape.bird::before { display: none; } .empty-shape.bird:hover { transform: scale(1.1) translateY(-3px); background: transparent !important; border: none !important; box-shadow: none !important; } .bird-svg { width: 100%; height: 100%; /* Subtle ground shadow only — the bird draws its own shadow inside the SVG, so this just adds a touch of lift off the cream row. */ filter: drop-shadow(0 2px 3px rgba(20, 20, 40, 0.18)); } /* Berry shape — mirrors Bird treatment: transparent host, SVG carries the art */ .empty-shape.berry { border-radius: 8px; background: transparent !important; border: none !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; } .empty-shape.berry::before { display: none; } .empty-shape.berry:hover { transform: scale(1.1) translateY(-3px); background: transparent !important; border: none !important; box-shadow: none !important; } .berry-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(20, 20, 40, 0.18)); } .floating-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: -1; } .floating-shape { position: absolute; opacity: 0.1; animation: float 25s infinite linear; color: #DAA520; font-size: 24px; } @keyframes float { 0% { transform: translateY(100vh) rotate(0deg); } 100% { transform: translateY(-100px) rotate(360deg); } } .floating-shape:nth-child(1) { left: 10%; animation-delay: 0s; } .floating-shape:nth-child(2) { left: 20%; animation-delay: 3s; } .floating-shape:nth-child(3) { left: 30%; animation-delay: 6s; } .floating-shape:nth-child(4) { left: 40%; animation-delay: 9s; } .floating-shape:nth-child(5) { left: 50%; animation-delay: 12s; } .floating-shape:nth-child(6) { left: 60%; animation-delay: 15s; } .floating-shape:nth-child(7) { left: 70%; animation-delay: 18s; } .floating-shape:nth-child(8) { left: 80%; animation-delay: 21s; } .floating-shape:nth-child(9) { left: 90%; animation-delay: 24s; } .row-shapes, .row-tu { animation: fadeSlideIn 0.5s ease forwards; } @keyframes fadeSlideIn { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } } .count-celebration { position: fixed; inset: 0; pointer-events: none; z-index: 9999; } .celebrate-big-number { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); opacity: 0; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(180px, 28vw, 360px); line-height: 1; -webkit-text-stroke: 4px #1F2747; text-shadow: 0 10px 0 rgba(31, 39, 71, 0.18), 0 24px 60px rgba(31, 39, 71, 0.3); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; } .count-celebration.show .celebrate-big-number { transform: translate(-50%, -50%) scale(1) rotate(-6deg); opacity: 1; } .count-celebration.leaving .celebrate-big-number { transform: translate(-50%, -50%) scale(1.25) rotate(2deg); opacity: 0; } .confetti-piece { position: absolute; width: 14px; height: 18px; border-radius: 3px; will-change: transform, opacity; opacity: 0; } .count-celebration.show .confetti-piece { animation: confetti-fall 1.6s ease-out forwards; } @keyframes confetti-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); } } @media (max-width: 640px) { body { padding: 8px; overflow-x: hidden; } .container { padding: 14px; border-radius: 20px; max-width: 100%; } h1 { font-size: 1.5em; margin-bottom: 18px; } .page-nav { gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .nav-btn { padding: 10px 18px; font-size: 0.9em; } .nav-btn.icon-btn { padding: 10px 12px; font-size: 1em; } .counting-table { padding: 12px; border-radius: 18px; } .table-header { margin-bottom: 10px; } .table-header { display: none; } .counting-table { overflow: hidden; } .counting-row { padding: 8px; margin-bottom: 8px; border-radius: 14px; } .row-number { flex: 0 0 60px; padding: 0; } .row-number button { padding: 8px 12px; font-size: 1em !important; border-radius: 12px; } .row-shapes, .row-placeholder { padding: 0 8px; } .row-placeholder { font-size: 0.85em; } .row-tu, .header-tu { display: none !important; } .shape-row { gap: 10px; } .settings-grid { grid-template-columns: 1fr; gap: 14px; } .setting-group { padding: 18px; } .preview-area { padding: 18px; } .start-counting-btn { padding: 14px 32px; font-size: 1.05em; margin: 22px auto; } } .about-trigger { text-align: center; margin: -20px 0 18px; } .about-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 41, 0.65); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; } .about-overlay.active { display: flex; } .about-modal { background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF7 100%); border-radius: 22px; max-width: 720px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); overflow: hidden; color: #1F2747; } .about-header { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.4rem 0.8rem; border-bottom: 1px solid rgba(31, 39, 71, 0.08); } .about-header h2 { color: #1F2747; font-size: 1.2rem; margin: 0; font-weight: 800; } .about-close { background: transparent; border: none; color: #4B547A; font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0 0.4rem; } .about-close:hover { color: #1F2747; } .about-tabs { display: flex; gap: 0.4rem; padding: 0.7rem 1.1rem 0; border-bottom: 1px solid rgba(31, 39, 71, 0.08); overflow-x: auto; } .about-tab { background: #FFF6E6; color: #4B547A; border: 1px solid rgba(31, 39, 71, 0.08); padding: 0.5rem 0.95rem; border-radius: 10px 10px 0 0; font-size: 0.9rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; } .about-tab:hover { background: #FFEFD5; color: #1F2747; } .about-tab.active { background: linear-gradient(135deg, #FFC93C, #FFA940); color: #1F2747; border-color: #FFA940; box-shadow: 0 -2px 8px rgba(255, 169, 64, 0.3); } .about-body { padding: 1.3rem 1.5rem 1.5rem; overflow-y: auto; color: #1F2747; line-height: 1.65; } .about-pane { display: none; } .about-pane.active { display: block; } .about-pane h3 { color: #4B547A; font-size: 1rem; font-weight: 800; margin: 0.4rem 0 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; } .about-pane p { margin-bottom: 0.85rem; font-size: 0.96rem; } .about-pane ul { margin: 0.3rem 0 0.9rem 1.4rem; } .about-pane li { margin-bottom: 0.45rem; font-size: 0.95rem; } .about-pane strong { color: #1F2747; font-weight: 700; } .about-pane .lede { color: #4B547A; font-style: italic; margin-bottom: 1rem; font-size: 1rem; } @media (max-width: 640px) { .about-modal { max-height: 92vh; } .about-header { padding: 0.9rem 1rem 0.6rem; } .about-header h2 { font-size: 1.05rem; } .about-tabs { padding: 0.5rem 0.8rem 0; } .about-tab { padding: 0.4rem 0.7rem; font-size: 0.8rem; } .about-body { padding: 1rem 1.1rem 1.2rem; } .about-pane p, .about-pane li { font-size: 0.92rem; } } /* ════════════════════════════════════════════════════════════ WELCOME SCREEN — per WELCOME-SCREEN-SPEC.md Layered landing surface: kid-path above the fold (orient → start), parent/SEO content below the fold. ════════════════════════════════════════════════════════════ */ .ws-screen, .fs-screen { --ws-navy: #0F1B3A; --ws-cream: #FAF6E9; --ws-cream-soft: #F2EBD3; --ws-cream-edge: #E8DFC2; --ws-ink: #1A1E2E; --ws-ink-soft: #4A526B; --ws-ink-mute: #8A8FA3; --ws-row-1: #E04848; --ws-row-2: #EC7A2C; --ws-row-3: #E8B324; --ws-row-4: #4FA85A; --ws-row-5: #2E8AC9; --ws-row-7: #9148BF; --ws-cta-from: #FFC73B; --ws-cta-to: #F08A1E; --ws-cta-ink: #2A1A05; --ws-font-display:"Fraunces", "Fredoka", system-ui, sans-serif; --ws-font-ui: "Fredoka", "Inter", system-ui, sans-serif; --ws-r-md: 14px; --ws-r-lg: 22px; --ws-r-xl: 32px; --ws-r-pill: 999px; --ws-sh-card: 0 4px 0 var(--ws-cream-edge), 0 18px 40px -18px rgba(10, 18, 40, 0.55); --ws-sh-circle: 0 3px 0 rgba(0, 0, 0, 0.10), 0 6px 14px -4px rgba(10, 18, 40, 0.35); --ws-sh-button: 0 4px 0 var(--ws-cta-ink), 0 10px 20px -8px rgba(240, 138, 30, 0.6); } .ws-screen { position: fixed; inset: 0; background: var(--ws-navy); overflow-y: auto; z-index: 9999; font-family: var(--ws-font-ui); color: var(--ws-ink); animation: wsFadeIn 0.5s ease; } .ws-screen::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: 22px 22px; pointer-events: none; } .ws-screen.hidden { animation: wsFadeOut 0.5s ease forwards; pointer-events: none; } @keyframes wsFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes wsFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes wsScaleIn { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Top bar (back + sound) */ .ws-topbar { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 18px 24px 0; display: flex; justify-content: space-between; align-items: center; } .ws-back-link { color: var(--ws-cream); opacity: 0.8; text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: var(--ws-r-pill); transition: background 0.15s, opacity 0.15s; } .ws-back-link:hover { background: rgba(255,255,255,0.08); opacity: 1; } .ws-sound-btn { background: rgba(255,255,255,0.08); color: var(--ws-cream); border: 1.5px solid rgba(255,255,255,0.18); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: background 0.15s; } .ws-sound-btn:hover { background: rgba(255,255,255,0.16); } /* Kid section — must fit above the fold on phones */ .ws-kid-section { position: relative; z-index: 2; min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 20px 20px 40px; } .ws-card { position: relative; background: var(--ws-cream); padding: 48px 44px 40px; border-radius: var(--ws-r-xl); box-shadow: var(--ws-sh-card); max-width: 560px; width: 100%; text-align: center; animation: wsScaleIn 0.6s ease; overflow: hidden; } .ws-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--ws-row-1) 0%, var(--ws-row-1) 45%, transparent 100%); } .ws-start-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--ws-row-1); color: var(--ws-cream); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; padding: 6px 14px 6px 10px; border-radius: var(--ws-r-pill); box-shadow: 0 3px 0 rgba(125, 30, 30, 0.4); margin-bottom: 18px; transform: rotate(-2deg); } .ws-start-badge svg { width: 14px; height: 14px; } .ws-cluster { display: inline-flex; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ws-ink-mute); margin-bottom: 14px; } .ws-cluster b { color: var(--ws-ink); font-weight: 700; } .ws-card h1 { font-family: var(--ws-font-display); font-size: clamp(40px, 6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--ws-ink); margin: 0 0 12px; text-align: center; } .ws-card h1 .accent { font-style: italic; color: var(--ws-row-1); } .ws-tagline { font-size: 17px; color: var(--ws-ink-soft); max-width: 420px; margin: 0 auto 16px; line-height: 1.45; } .ws-chips { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; } .ws-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ws-cream-soft); border: 1.5px solid var(--ws-cream-edge); color: var(--ws-ink-soft); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--ws-r-pill); } .ws-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ws-row-4); } .ws-chip.class .dot { background: var(--ws-row-5); } .ws-mascot { position: relative; width: 180px; height: 180px; margin: 0 auto 26px; } .ws-mascot::before { content: ""; position: absolute; bottom: 6px; left: 50%; width: 160px; height: 14px; background: radial-gradient(ellipse at center, rgba(10,18,40,0.18), transparent 70%); transform: translateX(-50%); border-radius: 50%; } .ws-mascot .floaters { position: absolute; inset: -10px -30px; pointer-events: none; } .ws-mascot .f { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ws-font-display); font-weight: 700; font-size: 18px; color: var(--ws-cream); box-shadow: var(--ws-sh-circle); border: 3px solid var(--ws-cream); } .ws-mascot .f.a { top: 12%; left: -4%; background: var(--ws-row-3); transform: rotate(-8deg); } .ws-mascot .f.b { top: 0%; right: 0%; background: var(--ws-row-5); width: 46px; height: 46px; transform: rotate(6deg); } .ws-mascot .f.c { bottom: 16%; left: 0%; background: var(--ws-row-4); width: 32px; height: 32px; font-size: 14px; transform: rotate(10deg); } .ws-mascot .f.d { bottom: 4%; right: -4%; background: var(--ws-row-7); width: 36px; height: 36px; font-size: 16px; transform: rotate(-6deg); } .ws-mascot .ws-sun { position: relative; width: 100%; height: 100%; z-index: 1; overflow: visible; filter: drop-shadow(0 6px 10px rgba(245, 180, 0, 0.32)); animation: ws-sun-breathe 5.5s ease-in-out infinite; transform-origin: center; } @keyframes ws-sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } .ws-mascot .ws-sun .sun-rays { transform-origin: 100px 100px; animation: ws-sun-rays-spin 28s linear infinite; } @keyframes ws-sun-rays-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ws-mascot .ws-sun .sun-eyes { transform-origin: 100px 100px; animation: ws-sun-blink 4.5s ease-in-out infinite; } @keyframes ws-sun-blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(0.08); } } .ws-cta { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--ws-cta-from), var(--ws-cta-to)); color: var(--ws-cta-ink); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; padding: 16px 32px; border: none; border-radius: var(--ws-r-pill); box-shadow: var(--ws-sh-button); cursor: pointer; transition: transform 0.15s ease; font-family: var(--ws-font-ui); } .ws-cta:hover { transform: translateY(-2px); } .ws-cta .arrow { width: 26px; height: 26px; background: var(--ws-cta-ink); color: var(--ws-cta-from); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .ws-cta-group { display: flex; flex-direction: column; align-items: center; gap: 14px; } .ws-cta-secondary-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .ws-cta-secondary { display: inline-flex; align-items: center; gap: 6px; background: var(--ws-cream-soft); border: 1.5px solid var(--ws-cream-edge); color: var(--ws-ink-soft); font-family: var(--ws-font-ui); font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: var(--ws-r-pill); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .ws-cta-secondary:hover { transform: translateY(-1px); background: var(--ws-cream-edge); color: var(--ws-ink); } .ws-cta-secondary span { color: var(--ws-row-1); font-size: 15px; line-height: 1; } /* Parent / SEO section */ .ws-parent-section { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 20px 24px 80px; color: var(--ws-cream); } .ws-block { background: var(--ws-cream); color: var(--ws-ink); border-radius: var(--ws-r-lg); padding: 32px 36px; margin-bottom: 18px; box-shadow: 0 10px 30px -15px rgba(0,0,0,0.4); } .ws-block h2 { font-family: var(--ws-font-display); font-size: 26px; font-weight: 700; color: var(--ws-ink); margin: 0 0 16px; letter-spacing: -0.01em; } .ws-block h3 { font-family: var(--ws-font-display); font-size: 17px; font-weight: 700; color: var(--ws-ink); margin: 18px 0 6px; } .ws-block p { font-size: 15.5px; line-height: 1.6; color: var(--ws-ink-soft); margin: 0 0 12px; } .ws-block p strong, .ws-block li strong { color: var(--ws-ink); font-weight: 700; } .ws-block ul { margin: 8px 0 14px 22px; padding: 0; } .ws-block li { font-size: 15px; line-height: 1.55; color: var(--ws-ink-soft); margin-bottom: 8px; } .ws-block em { font-style: italic; color: var(--ws-ink); } .ws-block .lede { font-size: 16.5px; color: var(--ws-ink); font-weight: 500; margin-bottom: 14px; } .ws-cbse { margin-top: 18px; padding: 14px 18px; background: var(--ws-cream-soft); border-left: 4px solid var(--ws-row-5); border-radius: 8px; } .ws-cbse h3 { margin-top: 0; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ws-ink-mute); } .ws-cbse li { font-size: 14.5px; } .ws-related-head { text-align: center; font-family: var(--ws-font-display); font-size: 22px; font-weight: 700; color: var(--ws-cream); margin: 36px 0 16px; } .ws-related { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; } .ws-related-link { display: block; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.14); color: var(--ws-cream); text-decoration: none; padding: 16px 20px; border-radius: var(--ws-r-md); font-weight: 600; font-size: 15px; transition: background 0.15s, transform 0.15s; } .ws-related-link:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); } .ws-related-link .arrow { float: right; opacity: 0.6; } .ws-footer-back { text-align: center; margin-top: 12px; font-size: 14px; } .ws-footer-back a { color: var(--ws-cream); opacity: 0.7; text-decoration: none; padding: 8px 14px; border-radius: var(--ws-r-pill); } .ws-footer-back a:hover { opacity: 1; background: rgba(255,255,255,0.06); } /* ───── Flash screens (About / Learning outcomes) ───── */ .fs-screen { position: fixed; inset: 0; background: var(--ws-navy); overflow-y: auto; z-index: 10000; display: none; font-family: var(--ws-font-ui); color: var(--ws-cream); } .fs-screen::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: 22px 22px; pointer-events: none; } .fs-screen.open { display: block; animation: wsFadeIn 0.35s ease; } .fs-screen.closing { animation: wsFadeOut 0.3s ease forwards; } .fs-topbar { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, var(--ws-navy) 70%, rgba(15, 27, 58, 0)); padding: 18px 24px 22px; display: flex; align-items: center; justify-content: space-between; max-width: 760px; margin: 0 auto; } .fs-title { font-family: var(--ws-font-display); font-size: 22px; font-weight: 700; color: var(--ws-cream); letter-spacing: -0.01em; } .fs-close-btn { background: rgba(255,255,255,0.08); color: var(--ws-cream); border: 1.5px solid rgba(255,255,255,0.18); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; font-weight: 700; transition: background 0.15s; } .fs-close-btn:hover { background: rgba(255,255,255,0.16); } .fs-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 24px 80px; } /* Mobile */ @media (max-width: 560px) { .ws-card { padding: 36px 24px 32px; } .ws-card h1 { font-size: 36px; } .ws-mascot { width: 150px; height: 150px; } .ws-block { padding: 22px 22px; } .ws-block h2 { font-size: 22px; } .ws-block p, .ws-block li { font-size: 14.5px; } .ws-topbar { padding: 12px 16px 0; } .fs-topbar { padding: 14px 16px 18px; } .fs-title { font-size: 18px; } .fs-content { padding: 0 14px 60px; } }