/* benwiddowson.com — site tokens. Light = purple, dark = green. Components reference ONLY these slots. Swap hex values here to re-theme. */ @import url('https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@400&family=Plus+Jakarta+Sans:wght@400;600;700&family=Mali:wght@500;600&family=Noto+Sans+Thai+Looped:wght@400;600;700&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&display=swap'); :root { color-scheme: light; --bg-page:#f7f3fa; --surface-card:#ffffff; --surface-sunken:#f0e9f5; --surface-raised:#ebe2f2; --text-heading:#2a1840; --text-body:#45355a; --text-muted:#6a5a7e; --text-faint:#b3a6c2; --border-subtle:#e6ddee; --card-border:transparent; --accent:#7a3fa6; --accent-strong:#5a2a80; --accent-soft:#efe3f8; --text-on-accent:#ffffff; --focus-ring:rgba(122,63,166,.5); --shadow-card:0 4px 12px rgba(122,63,166,.10); --shadow-hover:0 10px 28px rgba(122,63,166,.16); --app-1:#1f8c85; --app-2:#c46f00; --app-3:#8d35d1; --app-4:#c93f7f; --app-5:#2b8f9c; --app-6:#7a3fa6; --app-7:#a67c00; --app-8:#c9405a; --font-wordmark:'Playwrite DE Grund', cursive; --font-display:'Playwrite DE Grund', cursive; --font-body:'Plus Jakarta Sans', system-ui, sans-serif; --leading-body:1.6; --radius-sm:12px; --radius-md:20px; --radius-lg:28px; --radius-pill:999px; } :root[lang="th"] { --font-display:'Mali', 'Noto Sans Thai Looped', sans-serif; --font-body:'Noto Sans Thai Looped', 'Plus Jakarta Sans', sans-serif; --leading-body:1.8; } :root[lang="zh"] { --font-display:'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif; --font-body:'Noto Sans SC', 'Plus Jakarta Sans', sans-serif; --leading-body:1.75; } :root[data-theme="dark"] { color-scheme: dark; --bg-page:#0e1612; --surface-card:#16211b; --surface-sunken:#121b16; --surface-raised:#1f2d25; --text-heading:#eaf5ee; --text-body:#c9dcd0; --text-muted:#93ab9c; --text-faint:#56695d; --border-subtle:#25352c; --card-border:#25352c; --accent:#5cc98f; --accent-strong:#9fe3bd; --accent-soft:#1d3a2a; --text-on-accent:#0b1a12; --focus-ring:rgba(92,201,143,.55); --shadow-card:0 4px 12px rgba(0,0,0,.3); --shadow-hover:0 10px 28px rgba(0,0,0,.4); --app-1:#5cc9c1; --app-2:#f5ad3d; --app-3:#b57be6; --app-4:#f28ab8; --app-5:#7fd0d9; --app-6:#c39be3; --app-7:#f0c640; --app-8:#f08092; } /* Theme script (inline in to avoid flash): */ body { margin:0; background:var(--bg-page); color:var(--text-body); font-family:var(--font-body); line-height:var(--leading-body); } h1,h2 { font-family:var(--font-display); font-weight:400; color:var(--text-heading); line-height:1.4; } h3,h4 { font-family:var(--font-body); font-weight:700; color:var(--text-heading); line-height:1.3; } a { color:var(--accent); text-underline-offset:3px; } a:hover { color:var(--accent-strong); } :focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; } :root[lang="th"] *, :root[lang="zh"] * { letter-spacing:0 !important; text-transform:none !important; } .wordmark { font-family:var(--font-wordmark); font-weight:400; color:var(--text-heading); text-decoration:none; } .btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border-radius:var(--radius-pill); border:0; font:600 15px/1 var(--font-body); text-decoration:none; cursor:pointer; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; } .btn-primary { background:var(--accent); color:var(--text-on-accent); } .btn-secondary { background:var(--accent-soft); color:var(--accent-strong); } .btn-ghost { background:transparent; color:var(--accent-strong); } .btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); color:inherit; } .btn-primary:hover { color:var(--text-on-accent); } .btn-secondary:hover,.btn-ghost:hover { color:var(--accent-strong); } .btn-ghost:hover { background:var(--accent-soft); box-shadow:none; } .btn:active { transform:scale(.97); } .btn[disabled],.btn[aria-disabled="true"] { opacity:.45; pointer-events:none; } .card { background:var(--surface-card); border:1px solid var(--card-border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:22px; transition:transform .2s, box-shadow .2s; } a.card:hover, .card.is-interactive:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); } .panel-promise { background:var(--accent-soft); border-radius:var(--radius-lg); padding:28px; } .app-tile { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none; background:color-mix(in oklab, var(--app) 18%, var(--surface-card)); color:var(--app); } .nav a { padding:8px 13px; border-radius:var(--radius-pill); font-weight:600; color:var(--text-body); text-decoration:none; } .nav a:hover { color:var(--accent-strong); background:var(--surface-sunken); } .nav a[aria-current="page"] { color:var(--accent-strong); background:var(--accent-soft); } .site-footer { background:var(--surface-sunken); border-top:1px solid var(--border-subtle); }