/* keyboard.baby — the landing page. Built for someone who can't read yet: enormous tiles, one big picture each, colour-coded, with tap targets far bigger than any accessibility minimum. The words are there for the grown-up holding the tablet. */ *, *::before, *::after { box-sizing: border-box; } html { /* The background lives on , not . A fixed backdrop sitting at a negative z-index paints *behind* the body's own background, so with the colour on body the whole scene was invisible. */ background: #4fb4f2; } body { margin: 0; min-height: 100%; color: #10496b; font-family: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif; -webkit-text-size-adjust: 100%; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; } header, main, footer { position: relative; z-index: 1; } /* -------------------------------------------------------------- backdrop */ .sky { position: fixed; inset: 0; z-index: 0; background: linear-gradient(#1f8fe0 0%, #4fb4f2 32%, #96d9fb 64%, #d8f0c8 100%); overflow: hidden; } .sun { position: absolute; top: 5vh; right: 8vw; width: 18vmin; height: 18vmin; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fffdf0, #ffe66b 46%, #ffb43d); box-shadow: 0 0 8vmin rgba(255, 214, 92, .7); } .cloud { position: absolute; height: 6vmin; width: 20vmin; background: #fff; border-radius: 99px; opacity: .9; filter: blur(.15vmin); } .cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; } .cloud::before { width: 9vmin; height: 9vmin; left: 18%; top: -45%; } .cloud::after { width: 6vmin; height: 6vmin; left: 52%; top: -30%; } .a { top: 12vh; left: -22vmin; animation: drift 58s linear infinite; } .b { top: 26vh; left: -22vmin; transform: scale(.7); animation: drift 84s linear infinite -26s; } .c { top: 5vh; left: -22vmin; transform: scale(1.2); opacity: .7; animation: drift 104s linear infinite -60s; } @keyframes drift { to { translate: 128vw 0; } } .hills { position: absolute; left: -5%; right: -5%; bottom: 0; height: 34vh; background: radial-gradient(ellipse 60% 100% at 18% 100%, #9fd47f 0 62%, transparent 64%), radial-gradient(ellipse 52% 88% at 68% 100%, #8bc96c 0 62%, transparent 64%), radial-gradient(ellipse 70% 76% at 44% 100%, #aedd92 0 62%, transparent 64%); } /* ---------------------------------------------------------------- header */ header { text-align: center; padding: 6vmin 4vmin 3vmin; } h1 { margin: 0; font-size: clamp(34px, 8vmin, 82px); line-height: 1.05; color: #fff; letter-spacing: -.5px; text-shadow: 0 .6vmin 0 #1478bd, 0 1.4vmin 3vmin rgba(0, 40, 70, .35); } h1 .baby { display: inline-block; animation: bob 2.6s ease-in-out infinite; } h1 .dot { color: #ffd166; } @keyframes bob { 50% { transform: translateY(-1vmin) rotate(-8deg); } } .tag { margin: 1.6vmin 0 0; font-size: clamp(15px, 2.6vmin, 24px); color: #08405f; font-weight: 700; } /* ----------------------------------------------------------------- tiles */ main { flex: 1; display: flex; justify-content: center; padding: 2vmin 4vmin 4vmin; } .grid { list-style: none; margin: 0; padding: 0; width: min(1100px, 100%); display: grid; gap: clamp(14px, 2.6vmin, 30px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .tile { --hue: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; text-align: center; text-decoration: none; color: #10496b; padding: clamp(18px, 3.4vmin, 34px) clamp(12px, 2vmin, 22px); min-height: clamp(210px, 30vmin, 300px); background: linear-gradient(#fffdf6, #fff3d8); border: .6vmin solid #10496b; border-radius: clamp(20px, 3.4vmin, 38px); box-shadow: 0 1.2vmin 0 hsl(var(--hue) 55% 38%), 0 2vmin 4vmin rgba(0, 40, 70, .3); cursor: pointer; transition: transform .1s ease, box-shadow .1s ease; outline: none; } .tile:hover, .tile:focus-visible, .tile.sel { transform: translateY(-1vmin); box-shadow: 0 2.2vmin 0 hsl(var(--hue) 55% 38%), 0 3vmin 5vmin rgba(0, 40, 70, .38); } .tile:active { transform: translateY(.6vmin); box-shadow: 0 .4vmin 0 hsl(var(--hue) 55% 38%); } /* Keyboard selection needs to be unmistakable to a small child. */ .tile.sel { outline: .7vmin dashed hsl(var(--hue) 80% 42%); outline-offset: .8vmin; } .tile .icon { font-size: clamp(56px, 12vmin, 108px); line-height: 1; filter: drop-shadow(0 .5vmin .6vmin rgba(0, 40, 70, .28)); } .tile:hover .icon, .tile.sel .icon { animation: wiggle .6s ease-in-out infinite alternate; } @keyframes wiggle { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.08); } } .tile .name { font-size: clamp(18px, 2.9vmin, 30px); font-weight: 800; color: hsl(var(--hue) 60% 32%); } .tile .blurb { font-size: clamp(12px, 1.75vmin, 16px); line-height: 1.5; color: #4a6b80; max-width: 26ch; } /* Not built yet. */ .tile.soon { background: linear-gradient(#f3f1ee, #e8e5df); cursor: default; border-style: dashed; } .tile.soon .icon { filter: grayscale(.55) drop-shadow(0 .4vmin .5vmin rgba(0,40,70,.2)); opacity: .8; } .tile.soon:hover { transform: none; box-shadow: 0 1.2vmin 0 hsl(var(--hue) 30% 50%), 0 2vmin 4vmin rgba(0,40,70,.25); } .tile.soon:hover .icon { animation: none; } .badge-soon { font-size: clamp(11px, 1.6vmin, 15px); font-weight: 800; padding: .5vmin 2vmin; border-radius: 99px; background: #ffd166; color: #6b4c00; border: .3vmin solid #10496b; } /* ---------------------------------------------------------------- footer */ footer { text-align: center; padding: 0 5vmin 6vmin; color: #0d4a6a; } .hint { margin: 0 0 1.4vmin; font-size: clamp(13px, 2vmin, 19px); font-weight: 800; background: rgba(255, 255, 255, .7); display: inline-block; padding: 1vmin 2.6vmin; border-radius: 99px; } .small { margin: 0; font-size: clamp(11px, 1.6vmin, 15px); color: #2b6180; opacity: .9; } /* On a narrow screen the sun sat right behind the title. Push it into the corner and quieten the clouds so the words stay the loudest thing. */ @media (max-width: 620px) { .sun { top: -2vh; right: -8vw; width: 26vmin; height: 26vmin; opacity: .9; } .cloud { opacity: .5; } header { padding-top: 4vmin; } } @media (prefers-reduced-motion: reduce) { .cloud, h1 .baby, .tile .icon { animation: none !important; } .tile { transition: none; } }