/* ============================================================
ZOOYLO DESIGN SYSTEM — tokens + components
Calm · Accessible · Joyful · Trustworthy
Color world: warm cream, soft sky, sage, peach, lagoon
Type: Fredoka (display, rounded) + Lexend (body, high legibility)
============================================================ */
/* ---- Fonts ----
Loaded via + in each page's
(not @import here) so they download in parallel and don't block render. */
/* ============================================================
TOKENS
============================================================ */
:root {
/* Surfaces — warm, low-saturation neutrals */
--bg: #FBF7F0;
--surface: #FFFFFF;
--surface-warm: #FBF3E9;
--surface-sunk: #F4EEE3;
--line: #ECE4D6;
--line-strong: #DED3C0;
/* Ink — slate, never pure black */
--ink: #36404E;
--ink-soft: #5C6675;
--ink-faint: #677082; /* AA-compliant muted text (was #8A93A0) */
--ink-onfill: #FFFFFF;
/* Accent trio (soft) + accessible "deep" counterparts for text/buttons */
--sky: #8FB8D4; --sky-deep: #2F6F92; --sky-tint: #EAF2F7;
--sage: #A6CFA0; --sage-deep: #34694B; --sage-tint: #EAF3E8;
--peach: #F2C879; --peach-deep: #9C5A14; --peach-tint: #FBF1DE;
--lilac: #B7A9DD; --lilac-deep: #6A5BA0; --lilac-tint: #F0ECF8;
/* Brand primary — calm lagoon teal (unifies blue + green) */
--brand: #2C7681;
--brand-hover: #235E68;
--brand-tint: #E4F0F1;
--brand-soft: #7FB9BF;
/* Feedback (gentle, never alarming) */
--good: #3E7C5A;
--good-tint: #EAF3E8;
--warn-tint: #FBF1DE;
/* Type */
--font-display: 'Fredoka', system-ui, sans-serif;
--font-body: 'Lexend', system-ui, sans-serif;
/* Radius — soft, rounded */
--r-sm: 12px;
--r-md: 18px;
--r-lg: 26px;
--r-xl: 36px;
--r-pill: 999px;
/* Spacing scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
/* Elevation — soft, warm-tinted, diffuse */
--sh-1: 0 1px 2px rgba(54,64,78,.05), 0 2px 8px rgba(54,64,78,.05);
--sh-2: 0 2px 6px rgba(54,64,78,.06), 0 12px 28px rgba(54,64,78,.08);
--sh-3: 0 6px 16px rgba(54,64,78,.08), 0 24px 56px rgba(54,64,78,.10);
/* Focus — highly visible, WCAG 2.2 */
--focus: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand);
/* Touch targets */
--target-min: 48px; /* exceeds WCAG 2.2 minimum */
--target-child: 80px; /* child-facing big targets */
--maxw: 1200px;
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ============================================================
BASE / RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* Touch: tasteful tap highlight + remove 300ms delay on interactive elements */
* { -webkit-tap-highlight-color: rgba(44,118,129,.14); }
a, button, select, input, label, summary,
.btn, .btn-child, .audio-btn, .toggle-chip, .filter-btn, .nav-toggle, .a11y-fab, .pill { touch-action: manipulation; }
img, svg, video, canvas { max-width: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.65;
font-weight: 400;
letter-spacing: .002em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
/* Reduced-motion: respect OS + the on-site "Calm mode" toggle */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body[data-calm="true"] *, body[data-calm="true"] *::before, body[data-calm="true"] *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}
/* On-site accessibility preference hooks */
body[data-bigtext="true"] { font-size: 20px; }
body[data-spacing="true"] { letter-spacing: .03em; word-spacing: .12em; line-height: 1.85; }
body[data-contrast="true"] {
--ink: #1E2530; --ink-soft: #3A4350; --line: #C9BEA9; --line-strong: #A99A7C;
}
/* ============================================================
LAYOUT HELPERS
============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(44px, 6vw, 84px) 0; }
.eyebrow {
font-family: var(--font-body); font-weight: 600; font-size: 14px;
letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-soft); }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); line-height: 1.6; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
h1.h-display { font-size: clamp(38px, 6vw, 66px); line-height: 1.04; }
h2.h-section { font-size: clamp(30px, 4.4vw, 46px); }
h3.h-sub { font-size: clamp(21px, 2.4vw, 27px); }
.skip-link {
position: absolute; left: 16px; top: -60px; z-index: 200;
background: var(--brand); color: #fff; padding: 12px 18px;
border-radius: var(--r-sm); font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; text-decoration: none; }
/* ============================================================
CHARACTER ICON
============================================================ */
.zchar { width: 100%; height: 100%; }
.char-badge {
display: grid; place-items: center;
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: inset 0 0 0 1px rgba(54,64,78,.05);
}
.char-badge .zchar { width: 72%; height: 72%; }
.char-badge.round { border-radius: var(--r-pill); }
/* ============================================================
BUTTONS — large, rounded, high-contrast
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: var(--target-min);
padding: 14px 26px;
border-radius: var(--r-pill);
font-family: var(--font-body); font-weight: 600; font-size: 17px;
border: 2px solid transparent; cursor: pointer;
transition: transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--sh-2); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { background: var(--surface-sunk); }
.btn-lg { min-height: 58px; padding: 18px 34px; font-size: 19px; }
.btn-block { display: flex; width: 100%; }
/* Child-facing big tap target demo */
.btn-child {
min-height: var(--target-child); min-width: var(--target-child);
border-radius: var(--r-lg); font-family: var(--font-display); font-weight: 600;
font-size: 22px; padding: 18px 28px; background: var(--surface); color: var(--ink);
border: 3px solid var(--line-strong); box-shadow: var(--sh-1); cursor: pointer;
}
.btn-child:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
/* Audio-replay control (recurring app pattern) */
.audio-btn {
display: inline-flex; align-items: center; gap: 10px;
min-height: var(--target-min); padding: 10px 18px 10px 12px;
background: var(--brand-tint); color: var(--brand-hover);
border: 2px solid transparent; border-radius: var(--r-pill);
font-weight: 600; font-size: 15px; cursor: pointer;
}
.audio-btn:hover { border-color: var(--brand-soft); }
.audio-btn .ico {
width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
display: grid; place-items: center; flex: none;
}
/* ============================================================
CARDS
============================================================ */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
padding: var(--s-6);
}
.card-pad-lg { padding: var(--s-7); }
.card-hover { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
/* Pills / tags */
.pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: var(--r-pill);
font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
background: var(--surface-sunk); color: var(--ink-soft);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill-sky { background: var(--sky-tint); color: var(--sky-deep); }
.pill-sage { background: var(--sage-tint); color: var(--sage-deep); }
.pill-peach { background: var(--peach-tint); color: var(--peach-deep); }
.pill-lilac { background: var(--lilac-tint); color: var(--lilac-deep); }
.pill-brand { background: var(--brand-tint); color: var(--brand-hover); }
/* Gentle progress (dots — no scores, no punishment) */
.dots { display: inline-flex; gap: 8px; align-items: center; }
.dots .d { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); }
.dots .d.on { background: var(--sage-deep); }
/* Soft progress bar */
.meter { height: 12px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-soft); }
/* ============================================================
FORM
============================================================ */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 600; font-size: 15px; color: var(--ink); }
.input {
min-height: var(--target-min);
padding: 13px 16px; font-size: 17px; font-family: inherit; color: var(--ink);
background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--r-md);
width: 100%;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus-visible { border-color: var(--brand); box-shadow: var(--focus); }
/* Toggle chip (accessibility settings pattern) */
.toggle-chip {
display: inline-flex; align-items: center; gap: 12px;
min-height: var(--target-min); padding: 10px 18px;
background: var(--surface); border: 2px solid var(--line-strong);
border-radius: var(--r-pill); font-weight: 600; font-size: 15px; color: var(--ink-soft);
cursor: pointer; transition: all .15s var(--ease);
}
.toggle-chip .sw { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background .18s var(--ease); }
.toggle-chip .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s var(--ease); }
.toggle-chip[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-hover); background: var(--brand-tint); }
.toggle-chip[aria-pressed="true"] .sw { background: var(--brand); }
.toggle-chip[aria-pressed="true"] .sw::after { transform: translateX(16px); }
/* ============================================================
BRANDMARK — "zooylo" wordmark, the two o's are friendly eyes
============================================================ */
.brandmark {
display: inline-flex; align-items: center; gap: .04em;
font-family: var(--font-display); font-weight: 600;
font-size: 28px; line-height: 1; color: var(--ink);
letter-spacing: -.01em; user-select: none; text-decoration: none;
}
.brandmark:hover { text-decoration: none; }
.brandmark .bm-z, .brandmark .bm-tail { display: inline-block; }
.brandmark .bm-eyes { display: inline-flex; gap: .1em; margin: 0 .015em; }
.brandmark .bm-eyes i {
width: .82em; height: .82em; border-radius: 50%;
background: #fff; box-shadow: inset 0 0 0 .1em var(--brand);
display: inline-grid; place-items: center; position: relative;
}
.brandmark .bm-eyes i::after {
content: ""; width: .3em; height: .3em; border-radius: 50%;
background: var(--ink); transform: translate(.06em, .05em);
animation: bm-look 6s var(--ease) infinite;
}
.brandmark .bm-eyes i:nth-child(2)::after { animation-delay: .15s; }
@keyframes bm-look {
0%, 38%, 100% { transform: translate(.06em, .05em); }
46%, 60% { transform: translate(-.1em, .05em); }
72%, 86% { transform: translate(.06em, -.06em); }
}
.brandmark.lg { font-size: 56px; }
.brandmark.on-dark { color: #fff; }
.brandmark.on-dark .bm-eyes i { box-shadow: inset 0 0 0 .1em #fff; }
.brandmark.mono { color: var(--ink); }
.brandmark.mono .bm-eyes i { background: var(--bg); box-shadow: inset 0 0 0 .1em var(--ink); }
.brandmark.mono .bm-eyes i::after { background: var(--ink); }
body[data-calm="true"] .brandmark .bm-eyes i::after { animation: none; }
/* ============================================================
UTIL
============================================================ */
.grid { display: grid; gap: var(--s-5); }
.flex { display: flex; }
.muted { color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tag-soft { font-size: 13px; font-weight: 600; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }
/* Buttons shown INSIDE the phone mockups are illustrative previews of the app,
not live site controls — make them clearly non-interactive. */
.phone .btn, .phone .audio-btn, .phone .mini-audio, .phone button { cursor: default; pointer-events: none; }
/* ============================================================
RESPONSIVE & TOUCH — device compatibility layer
============================================================ */
/* On touch / no-hover devices, neutralize the "lift" hover states so they
don't get stuck after a tap. Keep the :active press feedback. */
@media (hover: none) {
.card-hover:hover,
.btn-primary:hover, .btn-secondary:hover, .btn:hover,
.post-card:hover, .guide:hover, .value:hover,
.toggle-chip:hover, .filter-btn:hover { transform: none; box-shadow: var(--sh-1); }
a:hover { text-decoration: none; }
}
/* Mobile-only extras inside the collapsible nav menu (lang + CTA).
Hidden on desktop; revealed when the menu is shown on small screens. */
.nav-mobile-extra { display: none; }
@media (max-width: 1140px) {
.nav-links .nav-mobile-extra {
display: flex; flex-direction: column; gap: 12px;
padding: 14px 4px 6px; margin-top: 8px; border-top: 1px solid var(--line);
}
.nav-mobile-extra .lang-wrap { width: 100%; }
.nav-mobile-extra .lang-wrap select { width: 100%; }
}
/* Offset in-page anchor jumps so the sticky header doesn't cover the target */
section[id], #top { scroll-margin-top: 90px; }
/* Tablet */
@media (max-width: 720px) {
.section { padding: clamp(48px, 9vw, 80px) 0; }
h1.h-display { font-size: clamp(34px, 8vw, 48px); }
}
/* Phones */
@media (max-width: 520px) {
.wrap { padding: 0 18px; }
.section { padding: 52px 0; }
/* Stack and full-width the primary hero/CTA button rows on phones */
.hero-cta { width: 100%; }
.hero-cta .btn { flex: 1 1 auto; justify-content: center; }
.lead { font-size: 17px; }
/* Comfort panel never touches the screen edges */
.a11y-panel { width: min(290px, calc(100vw - 32px)); right: 16px; }
.a11y-fab { right: 16px; bottom: 16px; }
}
/* Very small phones (iPhone SE and below) */
@media (max-width: 360px) {
.wrap { padding: 0 14px; }
.brandmark { font-size: 24px; }
}
/* Coarse pointers (fingers): ensure comfortable hit areas everywhere */
@media (pointer: coarse) {
.nav-links a, .foot a { min-height: 44px; display: flex; align-items: center; }
.toc a { padding-top: 11px; padding-bottom: 11px; }
}