/* ── Akimi Islands — the grown-ups page ─────────────────────────────────── The only page with text boxes on it. It deliberately looks calmer and more grown-up than the game: darker background, plainer language, no bouncing. Everything is still finger-sized, because most parents will open this on the same phone the child was playing on. ───────────────────────────────────────────────────────────────────────── */ /* This page scrolls, unlike the game. Both of these are needed. base.css locks the page with `html, body { height: 100%; overflow: hidden; touch-action: none }` so that a small finger dragging the island never drags the page. Undoing it on alone leaves still clipping, and everything below the first screenful becomes unreachable — which is exactly what happened. */ .gu-html, .gu-page { height: auto; min-height: 100%; overflow: auto; touch-action: auto; overscroll-behavior: auto; -webkit-user-select: auto; user-select: auto; /* Momentum scrolling on iPhones and iPads. */ -webkit-overflow-scrolling: touch; } /* The green has to go on too, not just . base.css paints the game's sky blue on BOTH. A background on is the one the browser stretches over the whole window; 's only covers the body box, which on this page is just as tall as its content. Green the body alone and the sky shows through beneath the last panel. */ .gu-html, .gu-page { background: #1F3A2A; /* the deep forest green of the studio brand */ } .gu-wrap { max-width: 560px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; } .gu-back { align-self: flex-start; color: #FDFAF0; text-decoration: none; font-size: 17px; font-weight: 600; padding: 12px 6px; min-height: var(--tap); display: inline-flex; align-items: center; } .gu-back:hover { text-decoration: underline; } /* The panel here is a page section, not a pop-up, so it does not fly in. */ .gu-page .panel { width: 100%; max-height: none; animation: none; padding: 22px 20px; } /* ── Text boxes ───────────────────────────────────────────────────────── */ .field { display: block; margin-bottom: 14px; } .field-label { display: block; font-size: 17px; font-weight: 600; margin-bottom: 7px; } .field-hint { font-weight: 400; font-size: 14px; color: var(--ink-soft); } .input { width: 100%; min-height: var(--tap); padding: 13px 16px; border: 2px solid rgba(27, 42, 56, .16); border-radius: var(--r-md); background: var(--white); font-family: inherit; /* Never below 16px: a smaller box makes iPhones zoom the page in when it is tapped, and the parent then has to pinch back out. */ font-size: 17px; color: var(--ink); } .input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 4px rgba(79, 209, 165, .25); } /* ── Messages ─────────────────────────────────────────────────────────── */ .gu-note { margin: 4px 0 14px; padding: 12px 16px; border-radius: var(--r-md); font-size: 16px; font-weight: 500; background: #E4FBF1; color: #0E7A55; } /* Something to fix rather than something that worked. Warm, not alarming — a parent stuck at a red error box tends to give up and close the tab. */ .gu-note[data-tone="soft"], .gu-note--soft { background: #FFF3DC; color: #8A5B12; } /* ── Buttons ──────────────────────────────────────────────────────────── */ .gu-actions { display: flex; gap: 10px; flex-wrap: wrap; } .gu-actions .btn { flex: 1 1 auto; } .gu-actions--stack { flex-direction: column; } .gu-actions--stack .btn { width: 100%; } .btn:disabled { opacity: .6; cursor: default; transform: none; } /* A plain text button for the quieter, riskier things. */ .gu-link { background: none; border: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 14px 4px; min-height: var(--tap); } .gu-link:hover { color: var(--ink); } .gu-link--warn { color: #B3452F; } .gu-danger { margin-top: 14px; padding-top: 10px; border-top: 2px solid rgba(27, 42, 56, .1); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* A row of explanation rather than a row with a switch on the end. */ .row--stack { flex-direction: column; align-items: flex-start; gap: 6px; } .row--stack .row-sub { line-height: 1.45; }