/* ═══════════════════════════════════════════════════════════════ careiti-skin.css — dual skin (童趣 kid / 樂齡 senior) Pairs with careiti-skin.js, which stamps data-skin on . Deliberately token-only: every rule below re-points an existing custom property or a small number of shared primitives. No component is restyled per skin, so a new page inherits the right look without extra work and nothing breaks if the attribute is absent (data-skin="" = current design). ═══════════════════════════════════════════════════════════════ */ /* ── 樂齡 senior: calmer, larger, higher contrast ───────────── */ html[data-skin="senior"] { --c-teal: #0B7268; /* deeper teal — better contrast on cream */ --c-teal-light: #10998C; --c-teal-dark: #0A5C54; --c-ink: #14110F; /* near-black body text */ --c-ink2: #45403B; --c-ink3: #7A736C; --c-line: #DCD7CD; /* stronger borders */ --c-radius: 18px; font-size: 108%; /* baseline bump; stacks with 大字模式 */ } html[data-skin="senior"] body { line-height: 1.72; letter-spacing: .01em; } html[data-skin="senior"] button, html[data-skin="senior"] .btn, html[data-skin="senior"] a.btn { min-height: 52px; font-weight: 700; } html[data-skin="senior"] input, html[data-skin="senior"] select, html[data-skin="senior"] textarea { min-height: 52px; font-size: 1.02rem; } /* Fewer decorative motions — movement is a legibility cost for this audience. */ html[data-skin="senior"] .c-mascot .m-body { animation-duration: 5s; } html[data-skin="senior"] body.c-scope::before { opacity: .3; } /* ── 童趣 kid: brighter, rounder, more playful ──────────────── */ html[data-skin="kid"] { --c-teal: #14B8A6; --c-teal-light: #2DD4BF; --c-teal-dark: #0D9488; --c-amber: #FBBF24; --c-coral: #FB7185; --c-cream: #FFFDF6; --c-line: #EDE7DA; --c-radius: 28px; --c-shadow: 0 10px 30px rgba(28, 25, 23, .12); } html[data-skin="kid"] body { line-height: 1.6; } html[data-skin="kid"] button, html[data-skin="kid"] .btn, html[data-skin="kid"] a.btn { border-radius: 20px; font-weight: 800; } html[data-skin="kid"] .c-mascot .m-body { animation-duration: 2.4s; } html[data-skin="kid"] h1, html[data-skin="kid"] h2 { letter-spacing: -.01em; } /* A single playful accent, kept subtle so it can't fight the content. */ html[data-skin="kid"] .c-card, html[data-skin="kid"] .f-card, html[data-skin="kid"] .a-card, html[data-skin="kid"] .nb-card { border-width: 2px; } /* ── Skin picker (rendered by careiti-skin.js) ─────────────── */ .cskin-row { display: flex; gap: 8px; } .cskin-btn { flex: 1; min-height: 44px; padding: 9px 10px; border-radius: 12px; border: 1.5px solid var(--c-line, #ECE9E2); background: transparent; color: var(--c-ink2, #57534E); font-family: inherit; font-size: .86rem; cursor: pointer; } .cskin-btn[aria-pressed="true"] { border-color: var(--c-teal, #0D9488); color: var(--c-teal-dark, #0F766E); background: rgba(13, 148, 136, .08); font-weight: 700; } @media (prefers-reduced-motion: reduce) { html[data-skin] .c-mascot .m-body { animation: none; } }