/* ========================================================================= Example custom theme — "Sunset" ------------------------------------------------------------------------- Load it with: data-css="https://your-site.com/themes/sunset.css" It shows the two ways to restyle the widget: 1. Retheme by overriding design tokens. This is the whole job most of the time — set the `--atli-*` custom properties and every component follows. Note the separate `[data-theme='dark']` block: the widget keeps serving both themes, so a custom stylesheet should cover both too. 2. Restyle by overriding semantic classes, for the handful of things tokens cannot express (shape, spacing, typography). The widget appends this file last in , so plain selectors already beat the defaults at equal specificity — no `!important` needed. ========================================================================= */ /* ---- 1. Tokens: bright theme -------------------------------------------- */ .atli-widget { --atli-font-family: 'Iowan Old Style', Georgia, 'Times New Roman', serif; --atli-color-bg: #fffaf4; --atli-color-surface: #ffffff; --atli-color-surface-hover: #fff1e2; --atli-color-surface-sunken: #fdeedd; --atli-color-border: #f2dcc4; --atli-color-border-strong: #e0bd97; --atli-color-text: #2b1a10; --atli-color-text-muted: #7d604b; --atli-color-text-faint: #a98a72; --atli-color-accent: #d1471f; --atli-color-accent-hover: #b03a17; --atli-color-accent-text: #fffaf4; --atli-color-accent-soft: #ffe6d8; --atli-color-badge-bg: #fdeedd; --atli-color-badge-text: #8a5a37; --atli-radius-sm: 3px; --atli-radius-md: 4px; --atli-radius-lg: 6px; } /* ---- 1b. Tokens: dark theme --------------------------------------------- */ .atli-widget[data-theme='dark'] { --atli-color-bg: #1a1008; --atli-color-surface: #241710; --atli-color-surface-hover: #2f1e14; --atli-color-surface-sunken: #150c06; --atli-color-border: #3a251a; --atli-color-border-strong: #55372a; --atli-color-text: #f8ece0; --atli-color-text-muted: #c2a189; --atli-color-text-faint: #96775f; --atli-color-accent: #ff8a4c; --atli-color-accent-hover: #ffa370; --atli-color-accent-text: #1a1008; --atli-color-accent-soft: #3a2114; --atli-color-badge-bg: #2f1e14; --atli-color-badge-text: #d8b493; } /* ---- 2. Semantic overrides ---------------------------------------------- */ .atli-header__title { font-weight: 400; font-style: italic; letter-spacing: 0; } .atli-section__title { text-transform: none; letter-spacing: 0.02em; font-size: 0.95em; font-weight: 600; } .atli-card { box-shadow: none; } .atli-card:hover { transform: none; } .atli-card--region { /* The default gradient fights a warm palette; a flat tint reads better. */ background: var(--atli-color-accent-soft); } .atli-button { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; }