/* Chillar Framework Core Styles */ /* Accessibility: html[font-size="small|medium|large"] scales the rem base. */ html { font-size: 16px; } html[font-size="small"] { font-size: 14px; } html[font-size="medium"] { font-size: 16px; } html[font-size="large"] { font-size: 18px; } :root { --bg: #ffffff; --fg: #000000; --dim: rgba(0,0,0,.32); --mute: rgba(0,0,0,.09); --ease: cubic-bezier(.23,1,.32,1); --spring: cubic-bezier(.34,1.56,.64,1); --surface: #f5f5f5; --border: rgba(0,0,0,.1); --fs-xxs: .65rem; --fs-xs: .8rem; --fs-sm: 1rem; --fs-lg: 1.2rem; --fs-xl: 1.6rem; --fs-xxl: 3rem; --fw-reg: 400; --fw-med: 500; --fw-bold: 700; --sp-xs: 6px; --sp-sm: 10px; --sp-md: 14px; --sp-lg: 20px; --sp-xl: 50px; --gap-xs: 5px; --gap-sm: 10px; --gap-md: 12px; --radius-pill: 99px; } /* Dark mode: manual override via html[theme], falls back to OS preference when no explicit theme is set. Cycle "system" -> "light" -> "dark" by toggling the `theme` attribute on (see _.hap()/cycleSetting pattern in chillar's app.html for a worked example). */ html[theme="dark"] { --bg: #000000; --fg: #ffffff; --dim: rgba(255,255,255,.32); --mute: rgba(255,255,255,.09); --surface: #1a1a1a; --border: rgba(255,255,255,.1); } @media (prefers-color-scheme: dark) { html:not([theme="light"]):not([theme="dark"]) { --bg: #000000; --fg: #ffffff; --dim: rgba(255,255,255,.32); --mute: rgba(255,255,255,.09); --surface: #1a1a1a; --border: rgba(255,255,255,.1); } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } /* App-shell touch hygiene: no callout/selection/scrollbars on chrome, text stays selectable inside actual inputs. Skip this block if you're building a content-heavy page where text selection should stay on. */ *, *::before, *::after { -webkit-touch-callout: none; scrollbar-width: none; -ms-overflow-style: none; user-select: none; } *::-webkit-scrollbar { display: none; } input, textarea, [contenteditable="true"] { user-select: text; } body { background: var(--bg); color: var(--fg); font-family: 'Inter', -apple-system, sans-serif; min-height: 100dvh; } /* Custom semantic tags (c-prefixed, no hyphen) */ cnav { display: block; position: sticky; top: 0; z-index: 100; background: var(--bg); } cmain { display: block; max-width: 700px; margin: 0 auto; padding: 0 16px 80px; } clist { display: flex; flex-direction: column; } crow { display: block; background: transparent; cursor: pointer; padding: 14px 0; transition: background .08s; } crow:active, crow.picked { background: var(--fg); color: var(--bg); } cprog { display: block; height: 3px; background: transparent; overflow: hidden; } cprog span { display: block; height: 100%; background: var(--fg); width: 0; transition: width .1s linear; } cdot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); flex-shrink: 0; align-self: center; } cdot.ready { background: var(--fg); } cdot.loading { background: var(--fg); animation: blink 1s ease infinite; } @keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} } /* Utilities */ .msg { padding: 40px 0; color: var(--dim); text-transform: uppercase; font-size: .7rem; text-align: center; } .hidden { display: none !important; }