/* ========================================================================= Example custom theme — "Mono" ------------------------------------------------------------------------- Load it with: data-css="https://your-site.com/themes/mono.css" Where "Sunset" shows how far a warm, soft palette can go, this one goes the other way: monospace throughout, a monochrome palette with no accent hue at all, hairline borders, and every spacing step pulled in so more of the catalogue fits on a screen. It is the same two layers as sunset.css — tokens first, semantic classes only where tokens cannot reach. The accent is simply the inverse of the background: black on white, white on black. That is what keeps it monochrome without going flat — the buttons and prices still carry the most contrast on the screen. 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: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Monospace runs wide, so it is set a step smaller than the default 15px and tighter, which is also what buys the compactness. */ --atli-font-size: 13.5px; --atli-line-height: 1.45; /* The page stays white and the tiles carry a neutral tint, so a card has an edge of its own — this theme's hairline borders were doing that work alone, and on a white page a hairline is not enough to read as an object. Kept grey rather than cool: nothing in this palette has a hue. */ --atli-color-bg: #ffffff; --atli-color-surface: #fafafa; --atli-color-surface-hover: #f0f0f2; --atli-color-surface-sunken: #f4f4f5; --atli-color-border: #e7e7e9; --atli-color-border-strong: #d0d0d4; --atli-color-text: #0a0a0b; --atli-color-text-muted: #6b6b73; --atli-color-text-faint: #9a9aa2; --atli-color-accent: #0a0a0b; --atli-color-accent-hover: #303036; --atli-color-accent-text: #ffffff; --atli-color-accent-soft: #f2f2f4; --atli-color-badge-bg: #f2f2f4; --atli-color-badge-text: #4a4a52; /* Two hues survive the monochrome rule, both where meaning depends on them: a discounted price has to read as good news... */ --atli-color-success: #0f7a52; --atli-color-success-soft: #eef7f2; /* ...and the unlimited tier has to be visibly a different class of plan. Cyan rather than the default violet: on a monochrome grid it is the one colour that reads as instrument rather than decoration. */ --atli-color-premium: #0e7490; --atli-color-premium-soft: #ecfeff; --atli-color-premium-border: #a5e8f2; --atli-color-focus: #0a0a0b; /* Near-square: the corner radius is the first thing that reads as "soft". */ --atli-radius-sm: 2px; --atli-radius-md: 3px; --atli-radius-lg: 4px; --atli-space-1: 3px; --atli-space-2: 6px; --atli-space-3: 9px; --atli-space-4: 12px; --atli-space-5: 16px; --atli-space-6: 22px; /* Hairlines do the work shadows do elsewhere. */ --atli-shadow-sm: none; --atli-shadow-md: 0 1px 0 rgba(10, 10, 11, 0.06); --atli-shadow-lg: 0 8px 40px rgba(10, 10, 11, 0.16); --atli-max-width: 900px; } /* ---- 1b. Tokens: dark theme --------------------------------------------- */ .atli-widget[data-theme='dark'] { --atli-color-bg: #08080a; --atli-color-surface: #0e0e11; --atli-color-surface-hover: #17171b; --atli-color-surface-sunken: #0b0b0e; --atli-color-border: #1e1e23; --atli-color-border-strong: #2e2e35; --atli-color-text: #f4f4f6; --atli-color-text-muted: #8b8b95; --atli-color-text-faint: #5e5e68; --atli-color-accent: #f4f4f6; --atli-color-accent-hover: #ffffff; --atli-color-accent-text: #08080a; --atli-color-accent-soft: #16161a; --atli-color-badge-bg: #17171b; --atli-color-badge-text: #b6b6c0; --atli-color-success: #4ade9f; --atli-color-success-soft: #0f1f18; --atli-color-premium: #22d3ee; --atli-color-premium-soft: #0b1e24; --atli-color-premium-border: #17505f; --atli-color-focus: #f4f4f6; --atli-shadow-sm: none; --atli-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.6); --atli-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7); } /* ---- 2. Semantic overrides ---------------------------------------------- */ /* Section headings read as labels rather than titles: small, wide, quiet. */ .atli-section__title { font-size: 0.72em; font-weight: 500; letter-spacing: 0.18em; color: var(--atli-color-text-faint); } /* Denser grid — monospace at 13.5px needs less room per card than the default 230px column. Not much less: below about 210px the longer destination names start truncating, which costs more than the extra column is worth. */ .atli-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .atli-card { box-shadow: none; padding: var(--atli-space-3); } .atli-card:hover { transform: none; border-color: var(--atli-color-border-strong); } /* The default region card is a gradient; here it is a flat sunken panel, told apart by its border alone. */ .atli-card--region { background: var(--atli-color-surface-sunken); } .atli-card__name { font-weight: 500; } .atli-package { padding: var(--atli-space-3); } .atli-package__data { font-weight: 500; letter-spacing: 0.01em; } .atli-detail-head { padding: var(--atli-space-3); background: transparent; border: 1px solid var(--atli-color-border); } .atli-detail-head__name { font-size: 1.15em; font-weight: 500; letter-spacing: -0.01em; } .atli-button { text-transform: lowercase; letter-spacing: 0.04em; font-weight: 500; font-size: 0.9em; } /* Filled, so it reads as a button from across the row — but not the accent at full strength, which in a monochrome palette resolves to pure inversion: a slab of white on black repeated down every row. `--atli-color-border-strong` is the one token that lands mid-tone in both themes, which leaves the label at full contrast on top of it and the price still able to compete. Hover does go to full inversion. That is the moment the button stops being one of twelve and becomes the one being clicked. */ .atli-button--primary { background: var(--atli-color-border-strong); border-color: var(--atli-color-border-strong); color: var(--atli-color-text); } .atli-button--primary:hover { background: var(--atli-color-accent); border-color: var(--atli-color-accent); color: var(--atli-color-accent-text); } /* Flat chips: the default lifts them off the page with a shadow, which is the one thing this theme never does. */ .atli-trust__mark { box-shadow: none; } .atli-badge { font-weight: 500; letter-spacing: 0.08em; }