/* Fun 4 Tots: components for the hub and the games. * * Loaded after site.css, which owns every colour: the pages set * data-tool="tots" on (the Crayon box palette, light and dark) and * data-game="circle|square|triangle|match" to pick that game's crayon. * Nothing here names a raw colour. * * Sized for small hands: big tap targets, big emoji, generous gaps. */ [data-tool="tots"] h1, [data-tool="tots"] h2, [data-tool="tots"] h3 { font-weight: 600; letter-spacing: 0; } /* --------------------------------------------------------------------------- * Page heading * ------------------------------------------------------------------------ */ .tots-main { padding-block: clamp(1.5rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem); } .game-head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } .game-head h1 { font-size: clamp(2.2rem, 7vw, 3.5rem); color: var(--accent); } .game-head p { margin-top: 0.5rem; font-size: 1.15rem; color: var(--ink-soft); } /* --------------------------------------------------------------------------- * Hub * ------------------------------------------------------------------------ */ .tots-hero { text-align: center; } .tots-hero h1 { font-size: clamp(2.8rem, 9vw, 5rem); margin-inline: auto; max-width: none; } .tots-hero .lede { margin-inline: auto; } .shape-row { display: flex; justify-content: center; gap: 1rem; margin: 0 0 1.25rem; padding: 0; list-style: none; } .shape-row li { width: 2.5rem; height: 2.5rem; background: var(--accent-fill); } .shape-row [data-game="circle"] { border-radius: 50%; } .shape-row [data-game="square"] { border-radius: 6px; } .shape-row [data-game="triangle"] { clip-path: polygon(50% 4%, 100% 96%, 0 96%); } .shape-row [data-game="match"] { border-radius: 8px; transform: rotate(-8deg); background: var(--card-back); } .game-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .game-card { padding: 0; overflow: hidden; } .game-card .art { display: grid; place-items: center; height: 8rem; font-size: 4rem; background: var(--accent-tint); border-bottom: 1px solid var(--rule); } .game-card .body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem 1.25rem; flex: 1; } .game-card h3 { font-size: 1.35rem; } .game-card h3 a { color: var(--accent); } /* --------------------------------------------------------------------------- * Shape finder * ------------------------------------------------------------------------ */ .screen { transition: opacity 250ms ease; } .screen.is-faded { opacity: 0; } .finder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 10rem), 1fr)); gap: clamp(0.75rem, 2.5vw, 1.5rem); margin: 0; padding: 0; list-style: none; } .tile { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: 100%; padding: 1.25rem 0.75rem; font: inherit; color: var(--ink); background: var(--paper-raised); border: 2px solid var(--rule); border-radius: 1.25rem; box-shadow: var(--shadow); cursor: pointer; transition: transform 150ms ease, border-color 150ms ease; } .tile:hover { transform: translateY(-3px); border-color: var(--accent-fill); } .tile:active { transform: scale(0.97); } .tile-emoji { font-size: clamp(3.5rem, 12vw, 4.5rem); line-height: 1.1; } .tile-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; } .item-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } /* Balances the Back button so the name stays centred. */ .item-head::after { content: ""; width: var(--back-w, 6rem); } .item-head h2 { text-align: center; font-size: clamp(2rem, 6vw, 2.8rem); color: var(--accent); } .item-head .btn { width: var(--back-w, 6rem); border-radius: 999px; font-size: 1.05rem; } .item-photo { display: block; width: 100%; max-width: 34rem; margin-inline: auto; border-radius: 1.25rem; border: 2px solid var(--rule); box-shadow: var(--shadow); background: var(--paper-raised); } /* --------------------------------------------------------------------------- * Memory match * ------------------------------------------------------------------------ */ .match-status { margin: 0 0 1rem; text-align: center; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; } .match-help { max-width: 36rem; margin: 0 auto 1.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-m); background: var(--paper-raised); border: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.95rem; text-align: center; } .match-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.4rem, 2vw, 0.8rem); max-width: 36rem; margin-inline: auto; } .memory-card { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.5rem); font-weight: 600; color: var(--on-card-back); background: var(--card-back); border: 4px solid var(--card-back-edge); border-radius: 0.9rem; box-shadow: var(--shadow); cursor: pointer; transition: transform 150ms ease, background-color 200ms ease; } .memory-card:not(.flipped):hover { transform: translateY(-2px) rotate(-1deg); } .memory-card.flipped { background: var(--paper-raised); border-color: var(--rule); color: var(--ink); } .memory-card.matched { background: var(--match); border-color: var(--match-edge); cursor: default; } .memory-card:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; } .win-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--ink) 55%, transparent); } .win-overlay[hidden] { display: none; } .win-card { max-width: 26rem; padding: 2rem; text-align: center; border-radius: 1.5rem; background: var(--paper-raised); box-shadow: var(--shadow); } .win-card h2 { font-size: clamp(2.2rem, 8vw, 3rem); color: var(--accent); } .win-card p { margin: 0.75rem 0 1.5rem; font-size: 1.25rem; color: var(--ink-soft); } .win-card .btn { font-size: 1.35rem; padding: 0.8rem 2rem; border-radius: 999px; } .confetti { position: fixed; top: -10px; width: 10px; height: 10px; border-radius: 50%; animation: fall 7s linear forwards; z-index: 60; pointer-events: none; } @keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .screen, .tile, .memory-card { transition: none; } .tile:hover, .memory-card:not(.flipped):hover { transform: none; } .confetti { display: none; } } /* The hub's games sit right under its hero, not a full section away. */ .tots-hero + .section { border-top: 0; padding-top: 0; }