+2 -1

.gitignore

reviewed

··· 25 25 *.db 26 26 *.db.journal 27 27 28 28 - # tailwind output 28 28 + # tailwind 29 29 static/output.css 30 30 + node_modules/

+10 -4

Makefile

reviewed

··· 1 1 - .PHONY: dev run build test clean 1 1 + .PHONY: dev run build test clean css css-watch 2 2 3 3 - dev: 3 3 + dev: css 4 4 @if [ -f .env ]; then set -a; . ./.env; set +a; fi && go run . 5 5 6 6 - build: 6 6 + build: css 7 7 go build -o glean . 8 8 9 9 + css: 10 10 + npx tailwindcss -i ./static/input.css -o ./static/output.css --minify 11 11 + 12 12 + css-watch: 13 13 + npx tailwindcss -i ./static/input.css -o ./static/output.css --watch 14 14 + 9 15 test: 10 16 go test ./... 11 17 12 18 clean: 13 13 - rm -f glean glean.db 19 19 + rm -f glean glean.db static/output.css

+534 -228

docs/design.md

reviewed

··· 1 1 - # Design System Inspired by Spotify 1 1 + # Design System Inspired by Starbucks 2 2 3 3 ## 1. Visual Theme & Atmosphere 4 4 5 5 - Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the brand Accent Purple (`#a855f7`) and the album artwork itself. 5 5 + Starbucks' design system is a **warm, confident retail flagship** wearing the green of their storefront apron across every surface. The canvas alternates between a neutral-warm cream (`#f2f0eb`) and a ceramic off-white (`#edebe9`) — colors that reference actual store materials: the paper napkins, the café walls, the wood finishes — while the signature **Starbucks Green** (`#006241`) anchors the brand moment on hero bands, CTAs, and the Rewards experience. The greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role, and gold (`#cba258`) appears only around Rewards-status ceremony — not as a general accent. 6 6 7 7 - The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality. 7 7 + Typography carries most of the brand voice. The proprietary **SoDoSans** typeface (custom to Starbucks) sits across nearly every surface with a tight `-0.16px` letter-spacing — it reads confident and friendly rather than fashion-magazine severe. What's unusual: the Rewards page switches to a warm serif (`"Lander Tall", "Iowan Old Style", Georgia`) for specific headline moments, subtly echoing the nostalgic feel of a coffeehouse chalkboard. And the Careers pages use a handwritten script (`"Kalam", "Comic Sans MS", cursive`) for personal cup-name touches. Three typefaces, three contexts — the system is disciplined about when each appears. 8 8 9 9 - What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch. 9 9 + The surfaces breathe through rounded geometry. Every button is a 50px full-pill. Cards take a 12px rounded-rectangle. The "Frap" floating CTA — a 56px circular order button in Green Accent (`#00754A`) — is the product's signature depth move: it floats bottom-right with a layered shadow stack (`0 0 6px rgba(0,0,0,0.24)` base + `0 8px 12px rgba(0,0,0,0.14)` ambient) and compresses via `scale(0.95)` on press. Elevations are otherwise restrained — card shadows stay at a whispered `0.14/0.24` alpha, global nav gets a quiet three-layer shadow stack. The whole system feels like clean café signage: legible, warm, and never shouting. 10 10 11 11 **Key Characteristics:** 12 12 13 13 - - Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content 14 14 - - Accent Purple (`#a855f7`) as singular brand accent — never decorative, always functional 15 15 - - SpotifyMixUI/CircularSp font family with global script support 16 16 - - Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized 17 17 - - Uppercase button labels with wide letter-spacing (1.4px–2px) 18 18 - - Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`) 19 19 - - Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`) 20 20 - - Album art as the primary color source — the UI is achromatic by design 21 21 - - Light/dark theme toggle — persisted in localStorage, dark is default 13 13 + - Four-tier green brand system (Starbucks / Accent / House / Uplift) each mapped to a distinct surface role — not a single "brand green" 14 14 + - Gold reserved for Rewards-status moments only; never a general-purpose accent 15 15 + - Warm-neutral canvas (`#f2f0eb` / `#edebe9`) instead of cold white — references café materials 16 16 + - Custom proprietary typeface (SoDoSans) with tight `-0.16px` letter-spacing as the universal voice 17 17 + - Context-specific type switches: serif (Lander Tall) for Rewards, script (Kalam) for Careers cup-names 18 18 + - Full-pill buttons (`50px` radius) universal, `scale(0.95)` active press the signature micro-interaction 19 19 + - Floating "Frap" circular CTA (`56px`, Green Accent fill, layered shadow stack) — the product's signature elevation element 20 20 + - Gift-card surfaces designed as **photographed physical product** — every card is a distinct illustrated photograph rather than a generated graphic 21 21 + - 12px card radius + whisper-soft shadows keep content cards flat-plus-hint-of-lift 22 22 + - Rem-based spacing scale anchored at 1.6rem (~16px) = `--space-3`, stepping to 6.4rem (~64px) 23 23 + 24 24 + **Color-block page rhythm:** Cream hero → White content sections → Dark-green (`#1E3932`) feature band with white text → Cream utility zone → Dark-green (`#1E3932`) footer with gold / white text — an espresso-dark bookend around the bright body. 22 25 23 26 ## 2. Color Palette & Roles 24 27 25 25 - All theme-dependent colors use CSS custom properties defined on `:root` (dark, default) and `[data-theme="light"]` (light). Accent and semantic colors are constant across themes. 28 28 + **Source pages analyzed:** homepage, rewards, gift cards, product detail (Pink Energy Drink), product nutrition (Cold Brew). 26 29 27 27 - ### Tailwind Token Mapping 30 30 + ### Primary 28 31 29 29 - The `spot.*` namespace provides semantic tokens. Theme-dependent tokens resolve to CSS variables. 32 32 + - **Starbucks Green** (`#006241`): The historic brand green. Used on h1 headings, primary section headers on the Rewards page, and as the main brand signal wherever a single dominant color is needed. 33 33 + - **Green Accent** (`#00754A`): A slightly brighter, more luminous green. The primary filled-CTA color ("Explore our afternoon menu", "See the spring menu") and the fill of the floating Frap circular button. 34 34 + - **House Green** (`#1E3932`): The deep near-black brand green. Footer surface, feature-band backgrounds, reward-status dark surfaces, and the headline "Free coffee is just the beginning" hero band on Rewards. 35 35 + - **Green Uplift** (`#2b5148`): A secondary mid-dark green used sparingly on decorative accents and dark-gradient moments. 36 36 + - **Green Light** (`#d4e9e2`): A pale mint wash used for form-valid-state tints and light green utility surfaces. 30 37 31 31 - | Token | CSS Variable | Dark (default) | Light | Use | 32 32 - | ---------------------- | --------------------- | -------------------------------- | -------------------------------- | -------------------------------- | 33 33 - | `spot.purple` | — | `#a855f7` | `#a855f7` | Primary accent | 34 34 - | `spot.purple-border` | — | `#9333ea` | `#9333ea` | Accent border variant | 35 35 - | `spot.bg` | `--spot-bg` | `#121212` | `#f5f5f5` | Page background | 36 36 - | `spot.surface` | `--spot-surface` | `#181818` | `#ffffff` | Cards, containers, sidebar | 37 37 - | `spot.hover` | `--spot-hover` | `#1f1f1f` | `#f3f4f6` | Interactive surface, input bg | 38 38 - | `spot.hover-50` | `--spot-hover-50` | `rgba(31,31,31,0.5)` | `rgba(243,244,246,0.5)` | Card hover with transparency | 39 39 - | `spot.text` | `--spot-text` | `#ffffff` | `#111827` | Primary text, headings | 40 40 - | `spot.secondary` | `--spot-secondary` | `#b3b3b3` | `#6b7280` | Secondary text, muted labels | 41 41 - | `spot.body` | `--spot-body` | `#cbcbcb` | `#374151` | Article body text | 42 42 - | `spot.muted` | `--spot-muted` | `#4d4d4d` | `#9ca3af` | Very muted text, rank numbers | 43 43 - | `spot.divider` | `--spot-divider` | `rgba(77,77,77,0.2)` | `#e5e7eb` | Subtle border dividers | 44 44 - | `spot.divider-30` | `--spot-divider-30` | `rgba(77,77,77,0.3)` | `#d1d5db` | Slightly stronger dividers, hr | 45 45 - | `spot.outline` | `--spot-outline` | `#7c7c7c` | `#d1d5db` | Visible borders on buttons/inputs| 46 46 - | `spot.placeholder` | `--spot-placeholder` | `#4d4d4d` | `#9ca3af` | Input placeholder text | 47 47 - | `spot.active-pill-bg` | `--spot-active-bg` | `#ffffff` | `#111827` | Active filter pill background | 48 48 - | `spot.active-pill-text`| `--spot-active-text` | `#121212` | `#ffffff` | Active filter pill text | 49 49 - | `spot.shadow` | `--spot-shadow` | `rgba(0,0,0,0.3) 0px 8px 8px` | `rgba(0,0,0,0.08) 0px 2px 8px` | Card elevation shadow | 50 50 - | `spot.shadow-heavy` | `--spot-shadow-heavy` | `rgba(0,0,0,0.5) 0px 8px 24px` | `rgba(0,0,0,0.1) 0px 4px 16px` | Dialog/elevated panel shadow | 51 51 - | `spot.red` | — | `#f3727f` | `#f3727f` | Error states | 52 52 - | `spot.orange` | — | `#ffa42b` | `#ffa42b` | Warning states | 53 53 - | `spot.blue` | — | `#539df5` | `#539df5` | Info states | 38 38 + ### Secondary & Accent 54 39 55 55 - ### Shadows 40 40 + - **Gold** (`#cba258`): Reserved almost exclusively for Rewards-status ceremony — Gold-tier callouts, partnership badges (SkyMiles, Bonvoy), and premium-feeling accents. Never a general-purpose brand color. 41 41 + - **Gold Light** (`#dfc49d`): Softer gold for background washes on gold-tier sections. 42 42 + - **Gold Lightest** (`#faf6ee`): Cream-gold page-surface wash used under partnership sections on the Rewards page — ties the gold accent back into the warm neutral system. 56 43 57 57 - - **Card** (`var(--spot-shadow)`): Cards, dropdowns 58 58 - - **Heavy** (`var(--spot-shadow-heavy)`): Dialogs, menus, elevated panels 59 59 - - **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo (dark only) 44 44 + ### Surface & Background 60 45 61 61 - ## 3. Theme Toggle 46 46 + - **White** (`#ffffff`): Primary card and modal surface. Also card fill on gift-card tiles. 47 47 + - **Neutral Cool** (`#f9f9f9`): Subtle cool-gray surface used on dropdown menus ("Account" dropdown), form-card wraps, and quiet utility containers. 48 48 + - **Neutral Warm** (`#f2f0eb`): The warm cream **primary page canvas** for Rewards utility zones and hero bands. 49 49 + - **Ceramic** (`#edebe9`): A slightly warmer/darker cream for zone separators, soft page-section washes, and Rewards partnership band. 50 50 + - **Black** (`#000000`): Deep ink reserved for the dark top-of-page CTA strip ("Join now") and high-contrast top-nav sign-in buttons. 62 51 63 63 - The app supports dark (default) and light themes. Theme preference is stored in `localStorage` under the key `theme`. 52 52 + ### Neutrals & Text 53 53 + 54 54 + - **Text Black** (`rgba(0, 0, 0, 0.87)`): Primary heading and body text color on light surfaces. Not pure black — an 87%-opacity black that reads warmer. 55 55 + - **Text Black Soft** (`rgba(0, 0, 0, 0.58)`): Secondary/metadata text on light surfaces. 56 56 + - **Text White** (`rgba(255, 255, 255, 1)`): Primary heading/body text on dark green surfaces. 57 57 + - **Text White Soft** (`rgba(255, 255, 255, 0.70)`): Secondary text on dark-green surfaces — footer link descriptions, caption text. 58 58 + - **Rewards Green** (`#33433d`): A dedicated muted slate-green used only on Rewards-page text blocks — a slightly "dustier" reading color than Text Black that signals "reward surface" without using full Starbucks Green. 59 59 + 60 60 + ### Semantic & Accent 61 61 + 62 62 + - **Red** (`#c82014`): Error and destructive state (form invalid, destructive actions). 63 63 + - **Yellow** (`#fbbc05`): Warning state, legacy brand touch. 64 64 + - **Green Light** (`#d4e9e2` at 33% opacity = `hsl(160 32% 87% / 33%)`): Form valid-field tint background. 65 65 + - **Red Tint** (`hsl(4 82% 43% / 5%)`): Invalid-field tint on forms. 66 66 + 67 67 + ### Black / White Alpha Ladders 68 68 + 69 69 + Two parallel translucent scales for overlay and secondary-text use: 64 70 65 65 - ### Implementation 71 71 + - `rgba(0,0,0,0.06)` through `rgba(0,0,0,0.90)` in 10% steps — for dark overlays on light surfaces 72 72 + - `rgba(255,255,255,0.10)` through `rgba(255,255,255,0.90)` in 10% steps — for light overlays on dark surfaces 66 73 67 67 - - CSS custom properties are defined on `:root` for dark and `[data-theme="light"]` for light 68 68 - - A `<script>` block runs before render to set `data-theme` on `<html>`, preventing flash of wrong theme 69 69 - - Toggle buttons appear in the sidebar footer (desktop) and mobile top bar 70 70 - - Icon: moon (when in dark mode) / sun (when in light mode) 71 71 - - Default: dark 74 74 + ### Gradient System 72 75 73 73 - ### CSS Variables 76 76 + No structural gradient tokens observed. Surface hierarchy is solid-color-block throughout — the system relies on its five-tier cream/green surface palette rather than gradients. 74 77 75 75 - ```css 76 76 - :root { 77 77 - --spot-bg: #121212; 78 78 - --spot-surface: #181818; 79 79 - --spot-hover: #1f1f1f; 80 80 - --spot-hover-50: rgba(31,31,31,0.5); 81 81 - --spot-text: #ffffff; 82 82 - --spot-secondary: #b3b3b3; 83 83 - --spot-body: #cbcbcb; 84 84 - --spot-muted: #4d4d4d; 85 85 - --spot-divider: rgba(77,77,77,0.2); 86 86 - --spot-divider-30: rgba(77,77,77,0.3); 87 87 - --spot-outline: #7c7c7c; 88 88 - --spot-placeholder: #4d4d4d; 89 89 - --spot-active-bg: #ffffff; 90 90 - --spot-active-text: #121212; 91 91 - --spot-shadow: rgba(0,0,0,0.3) 0px 8px 8px; 92 92 - --spot-shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px; 93 93 - } 94 94 - [data-theme="light"] { 95 95 - --spot-bg: #f5f5f5; 96 96 - --spot-surface: #ffffff; 97 97 - --spot-hover: #f3f4f6; 98 98 - --spot-hover-50: rgba(243,244,246,0.5); 99 99 - --spot-text: #111827; 100 100 - --spot-secondary: #6b7280; 101 101 - --spot-body: #374151; 102 102 - --spot-muted: #9ca3af; 103 103 - --spot-divider: #e5e7eb; 104 104 - --spot-divider-30: #d1d5db; 105 105 - --spot-outline: #d1d5db; 106 106 - --spot-placeholder: #9ca3af; 107 107 - --spot-active-bg: #111827; 108 108 - --spot-active-text: #ffffff; 109 109 - --spot-shadow: rgba(0,0,0,0.08) 0px 2px 8px; 110 110 - --spot-shadow-heavy: rgba(0,0,0,0.1) 0px 4px 16px; 111 111 - } 112 112 - ``` 78 78 + ## 3. Typography Rules 113 79 114 114 - ## 4. Typography Rules 80 80 + ### Font Family 115 81 116 116 - ### Font Families 82 82 + - **Primary:** `SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif` — Starbucks' proprietary corporate typeface, used across nearly every surface 83 83 + - **Loading Fallback:** `"Helvetica Neue", Helvetica, Arial, sans-serif` — what users see before SoDoSans loads 84 84 + - **Rewards Serif:** `"Lander Tall", "Iowan Old Style", Georgia, serif` — used on specific Rewards-page headline moments for a warm editorial feel 85 85 + - **Careers Script:** `"Kalam", "Comic Sans MS", cursive` — used exclusively for Careers-page "cup name" decorative touches, referencing the hand-written names on Starbucks cups 117 86 118 118 - - **Title**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic` 119 119 - - **UI / Body**: `SpotifyMixUI`, same fallback stack 87 87 + No OpenType stylistic sets explicitly activated at `:root`. 120 88 121 89 ### Hierarchy 122 90 123 123 - | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | 124 124 - | ---------------- | ----------------- | ---------------- | ------- | ------------ | -------------- | ---------------------------- | 125 125 - | Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight | 126 126 - | Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads | 127 127 - | Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text | 128 128 - | Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body | 129 129 - | Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | `text-transform: uppercase` | 130 130 - | Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button | 131 131 - | Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation | 132 132 - | Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav | 133 133 - | Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata | 134 134 - | Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata | 135 135 - | Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts | 136 136 - | Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print | 137 137 - | Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` | 138 138 - | Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text | 91 91 + | Role | Size | Weight | Line Height | Letter Spacing | Notes | 92 92 + | ------------------- | -------------- | ------- | --------------- | -------------- | -------------------------------------------- | 93 93 + | Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | Largest Rewards/hero display | 94 94 + | Jumbo (text-9) | 3.6rem / 58px | 400–600 | 1.2 | -0.16px | Secondary hero headings | 95 95 + | Hero Large (text-8) | 2.8rem / 45px | 400–600 | 1.2–1.5 | -0.16px | Landing section headlines | 96 96 + | H1 | 24px | 600 | 36px | -0.16px | Starbucks-Green primary heading | 97 97 + | H2 | 24px | 400 | 36px | -0.16px | Regular-weight section title in Text Black | 98 98 + | Body Large | 19px | 400–600 | 33.25px (~1.75) | -0.16px | Hero intro copy, feature-band body | 99 99 + | Body (text-3) | 1.6rem / 16px | 400 | 1.5 (24px) | -0.01em | Default body copy | 100 100 + | Small (text-2) | 1.4rem / ~14px | 400–600 | 1.5 | -0.01em | Button label, metadata, form labels | 101 101 + | Micro (text-1) | 1.3rem / ~13px | 400 | 1.5 | -0.01em | Active float-label state, caption micro-copy | 102 102 + | Button Label | 14–16px | 400–600 | 1.2 | -0.01em | All pill-button labels | 103 103 + 104 104 + **Letter-spacing tokens:** 105 105 + 106 106 + - `letterSpacingNormal`: `-0.01em` (default — tight, characteristic) 107 107 + - `letterSpacingLoose`: `0.1em` (emphasized caps) 108 108 + - `letterSpacingLooser`: `0.15em` (uppercase-style labels, extreme emphasis) 109 109 + 110 110 + **Line-height tokens:** 111 111 + 112 112 + - `lineHeightNormal`: `1.5` (body) 113 113 + - `lineHeightCompact`: `1.2` (display/buttons) 139 114 140 115 ### Principles 141 116 142 142 - - **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation. 143 143 - - **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic "label" voice distinct from content text. 144 144 - - **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles. 145 145 - - **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach. 117 117 + - **Tight negative tracking (`-0.01em`)** is applied almost universally — the entire product reads slightly compressed, which gives SoDoSans its confident presence without feeling squeezed. 118 118 + - **Weight shifts carry hierarchy, not size shifts.** H1 and H2 share the same 24px/36px size; only weight (600 vs 400) and color (Starbucks-Green vs Text Black) separate them. 119 119 + - **Size tokens use rem, anchored to `1rem = 10px`** on this site (via a `font-size: 62.5%` root trick). So `1.6rem` = 16px, `2.4rem` = 24px, etc. The scale is semantic (textSize-1 through textSize-10), not arbitrary pixel values. 120 120 + - **Context-specific typeface swaps** — serif on Rewards, script on Careers — are deliberate and localized. Never mix them with the primary sans within the same surface. 121 121 + - **Body text never goes pure black** — it sits at `rgba(0,0,0,0.87)` to match the warm-neutral canvas temperature. 146 122 147 147 - ## 5. Component Stylings 123 123 + ### Note on Font Substitutes 124 124 + 125 125 + SoDoSans is proprietary to Starbucks (licensed from House Industries, not publicly available). Reasonable open-source substitutes: 126 126 + 127 127 + - **Inter** (Google Fonts) — similar humanist geometric proportions, wide weight range 128 128 + - **Manrope** — slightly rounder, similar confident feel 129 129 + - **Nunito Sans** — warmer, good for a "café" brand substitute 130 130 + 131 131 + If substituting, verify the tight `-0.01em` / `-0.16px` tracking still reads well; some open-source fonts need `-0.005em` instead. 132 132 + 133 133 + Lander Tall (the Rewards serif) is custom — open-source substitutes: **Iowan Old Style** (already in fallback), **Lora**, or **Source Serif Pro**. Kalam (Careers script) is available on Google Fonts directly. 134 134 + 135 135 + ## 4. Component Stylings 148 136 149 137 ### Buttons 150 138 151 151 - **Accent Pill** 139 139 + **1. Primary Filled — "Explore our afternoon menu / Sign up for free"** 152 140 153 153 - - Background: `#a855f7` 154 154 - - Text: `var(--spot-bg)` (dark in dark mode, light in light mode) 155 155 - - Padding: 8px 16px 156 156 - - Radius: 9999px (full pill) 157 157 - - Use: Primary CTAs, add buttons 141 141 + - Background: `#00754A` (Green Accent) 142 142 + - Text: `#ffffff` 143 143 + - Border: `1px solid #00754A` 144 144 + - Radius: `50px` (full pill) 145 145 + - Padding: `7px 16px` 146 146 + - Font: SoDoSans, 16px, weight 600, letter-spacing `-0.01em` 147 147 + - Active state: `transform: scale(0.95)` via `--buttonActiveScale` 148 148 + - Transition: `all 0.2s ease` 149 149 + 150 150 + **2. Primary Outlined — "Give them a try / Start an order"** 151 151 + 152 152 + - Background: transparent 153 153 + - Text: `#00754A` (Green Accent) 154 154 + - Border: `1px solid #00754A` 155 155 + - Same radius/padding/active/transition as Primary Filled 158 156 159 159 - **Dark Pill** 157 157 + **3. Black Filled — "Join now"** 160 158 161 161 - - Background: `var(--spot-hover)` 162 162 - - Text: `var(--spot-text)` or `var(--spot-secondary)` 163 163 - - Padding: 8px 16px 164 164 - - Radius: 9999px (full pill) 165 165 - - Use: Navigation pills, secondary actions 159 159 + - Background: `#000000` 160 160 + - Text: `#ffffff` 161 161 + - Border: `1px solid #000000` 162 162 + - Radius: `50px`, Padding: `7px 16px` 163 163 + - Font: 14px, weight 600 164 164 + - Used on the top-of-page join strip and similar conversion moments 166 165 167 167 - **Outlined Pill** 166 166 + **4. Dark Outlined — "Sign in"** 168 167 169 168 - Background: transparent 170 170 - - Text: `var(--spot-text)` 171 171 - - Border: `1px solid var(--spot-outline)` 172 172 - - Radius: 9999px 173 173 - - Use: Follow buttons, secondary actions 169 169 + - Text: `rgba(0, 0, 0, 0.87)` (Text Black) 170 170 + - Border: `1px solid rgba(0, 0, 0, 0.87)` 171 171 + - Radius: `50px`, Padding: `7px 16px` 172 172 + - Font: 14px, weight 600 173 173 + 174 174 + **5. Green-on-Green Inverted — "See the spring menu"** 175 175 + 176 176 + - Background: `#ffffff` 177 177 + - Text: `#00754A` 178 178 + - Border: `1px solid #ffffff` 179 179 + - Used when the surface behind the button is the dark green House Green band — white button with green text instead of a filled green pill on green bg 174 180 175 175 - **Circular Play** 181 181 + **6. Outlined on Dark — "Learn more / Order now"** 182 182 + 183 183 + - Background: transparent 184 184 + - Text: `#ffffff` 185 185 + - Border: `1px solid #ffffff` 186 186 + - Used on dark-green feature bands for secondary action paired with a white filled CTA 176 187 177 177 - - Background: `#a855f7` 178 178 - - Text: `var(--spot-bg)` 179 179 - - Padding: 12px 180 180 - - Radius: 50% (circle) 181 181 - - Use: Play/pause controls 188 188 + **7. Consent Agree (dark-green variant)** 189 189 + 190 190 + - Background: `rgb(0, 130, 72)` (a specific variant green used in the cookie-consent module) 191 191 + - Text: `#ffffff` 192 192 + - No border, `50px` radius, `7px 16px` padding, 14px / weight 400 193 193 + - Slightly brighter than Green Accent — reserved for the consent-banner Agree action 194 194 + 195 195 + **8. Frap — Floating Circular Order Button** 196 196 + 197 197 + - Background: `#00754A` (Green Accent) 198 198 + - Icon: `#ffffff` 199 199 + - Size: `5.6rem / 56px` (standard), `4rem / 40px` (mini variant) 200 200 + - Radius: `50%` (full circle) 201 201 + - Fixed bottom-right, `-0.8rem` touch offset for extra tap comfort 202 202 + - Shadow stack: base `0 0 6px rgba(0,0,0,0.24)` + ambient `0 8px 12px rgba(0,0,0,0.14)` 203 203 + - Active state: ambient shadow fades to `0 8px 12px rgba(0,0,0,0)` 204 204 + - This is the product's signature elevation element — it floats over every scrolled surface 205 205 + 206 206 + **9. Full-width Feedback Tab — "Provide feedback"** 207 207 + 208 208 + - Background: `#00754A` 209 209 + - Text: `#ffffff` 210 210 + - Radius: `12px 12px 0px 0px` (top-rounded only) 211 211 + - Padding: `8px 16px` 212 212 + - Font: 14px, weight 400 213 213 + - Positioned fixed bottom-right-inside, attached to the viewport edge 182 214 183 215 ### Cards & Containers 184 216 185 185 - - Background: `var(--spot-surface)` 186 186 - - Radius: 6px–8px 187 187 - - No visible borders on most cards 188 188 - - Hover: `var(--spot-hover-50)` background 189 189 - - Shadow: `var(--spot-shadow)` on elevated 217 217 + **Content Card (default)** 218 218 + 219 219 + - Background: `#ffffff` (`--cardBackgroundColor`) 220 220 + - Radius: `12px` (`--cardBorderRadius`) 221 221 + - Shadow: `0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24)` (`--cardBoxShadow`) 222 222 + - Used for: feature cards, menu-item tiles, reward-status panels 223 223 + 224 224 + **Gift Card Tile** 225 225 + 226 226 + - Background: illustrated photography fills the card (no solid bg) 227 227 + - Radius: similar to cards (`~12px`, slightly tighter on corners) 228 228 + - Shadow: lighter than default card — these are treated like physical cards laid on the canvas 229 229 + - Labeled by category above the card grid (Spring, Thank You, Birthday, Celebration, Mother's Day, Appreciation, Encouragement, Milestones, Anytime) 230 230 + 231 231 + **Rewards Status Cards (Rewards page signature)** 232 232 + 233 233 + - Three-column grid: Bronze / Gold / Silver-ish — each a dark-green (`#1E3932`) panel with: 234 234 + - Colored gradient/color header ring 235 235 + - Numbered "Level" badge 236 236 + - Status title in large SoDoSans weight 600 237 237 + - Stars / benefits list in white/translucent-white text 238 238 + - Bottom "As you earn more stars…" progression caption 239 239 + 240 240 + **Partnership Card (Rewards)** 241 241 + 242 242 + - Background: `#faf6ee` (Gold Lightest) warm-cream surface 243 243 + - Content: partner logos ("SkyMiles", "Bonvoy") centered, with descriptive text below 244 244 + - Radius and shadow follow default card spec 245 245 + 246 246 + **Dropdown Menu (Account dropdown, top-nav)** 247 247 + 248 248 + - Background: `#f9f9f9` (Neutral Cool) 249 249 + - Menu items at `24px / weight 400` in Text Black 250 250 + - No border — just background surface shift against white nav 251 251 + 252 252 + **Modal** 253 253 + 254 254 + - Padding: `2.4rem` (`--modalPadding`) 255 255 + - Top padding: `8.8rem` (`--modalTopPadding`) — leaves room for close button / header 256 256 + - Combined vertical padding: `11.2rem` 257 257 + - Radius inherits from card spec (`12px`) 258 258 + 259 259 + ### Inputs & Forms 260 260 + 261 261 + **Floating Label Input** 262 262 + 263 263 + - Label floats above the input border when focused/filled 264 264 + - Desktop label font size: `1.9rem` default, animates to `1.4rem` when active 265 265 + - Mobile label font size: `1.6rem` default, animates to `1.3rem` active 266 266 + - Label horizontal offset: `12px` from left 267 267 + - Active label translate: up to `-12px` with `-50%` Y translation 268 268 + - Field padding: `12px` 269 269 + - Form horizontal padding: `1.6rem` 270 270 + - Validation: valid-field gets `rgba(green-light, 0.33)` tint; invalid-field gets `rgba(red, 0.05)` tint 271 271 + - Transition: `0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)` on checked-input 190 272 191 191 - ### Inputs 273 273 + **Option Icon (checkbox/radio)** 192 274 193 193 - - Background: `var(--spot-hover)` 194 194 - - Text: `var(--spot-text)` 195 195 - - Radius: 500px (pill) 196 196 - - Focus ring: `#a855f7` 197 197 - - Placeholder: `var(--spot-placeholder)` 275 275 + - Padding: `3px` inner 276 276 + - Uses the checked-input cubic-bezier animation above (a slightly "springy" 2.32 overshoot curve) 198 277 199 278 ### Navigation 200 279 201 201 - - Sidebar: `var(--spot-bg)` background 202 202 - - Active items: 14px weight 700, `var(--spot-text)` 203 203 - - Inactive items: 14px weight 400, `var(--spot-secondary)` 204 204 - - Circular icon buttons (50% radius) 205 205 - - Brand logo top-left in purple 280 280 + **Global Nav (top bar)** 281 281 + 282 282 + - Fixed position with progressive heights: `64px` xs → `72px` mobile → `83px` tablet → `99px` desktop 283 283 + - Shadow stack: `0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` — three-layer soft lift 284 284 + - Left: Starbucks wordmark logo, offsetting by `99px` (md) / `131px` (lg) from left edge 285 285 + - Primary links inline in SoDoSans weight 400–600: Menu · Rewards · Gift Cards 286 286 + - Right: Find a store link + Sign in (outlined) + Join now (black filled) 287 287 + 288 288 + **Sub-nav (second bar, e.g., Rewards internal)** 289 289 + 290 290 + - Height: `53px` (global subnav) / `48px` (internal subnav) 291 291 + - Typically horizontal tab group beneath the global nav 292 292 + 293 293 + **Mobile Nav** 294 294 + 295 295 + - Collapses to a hamburger drawer below tablet breakpoint 296 296 + - Frap floating button persists at bottom-right regardless of nav state 297 297 + 298 298 + ### Image Treatment 299 299 + 300 300 + - **Hero photography**: Product photos (beverages in clear glass with colored backgrounds — coral, sage, warm amber) occupy ~40vw of a split-hero layout; text occupies the other 60vw (`--headerCrateProportion: 40vw` / `--contentCrateProportion: 60vw`) 301 301 + - **Gift card illustrations**: Each card is a distinct illustrated photograph (painted-feel, hand-drawn-looking, warm color palette). Never generic generated graphics. 302 302 + - **Rewards ceremony imagery**: Photographs of Starbucks Rewards App screens held in-hand, angled compositions — product-in-context photography. 303 303 + - **Menu thumbnails**: Square or 4:3 product photography with clean white/cream backdrops, slight soft drop-shadow around the glass. 304 304 + - **Image fade-in**: `opacity 0.3s ease-in` transition on image load (`--imageFadeTransition`). 305 305 + 306 306 + ### Feature Band (dark-green hero strip) 307 307 + 308 308 + Full-width `#1E3932` (House Green) band with: 309 309 + 310 310 + - Left: white headline + subhead + CTA row 311 311 + - Right: product photography or illustration 312 312 + - Split ratio ~40/60 or 50/50 depending on section 313 313 + - White text throughout with `rgba(255,255,255,0.70)` for secondary copy 314 314 + - CTAs follow Green-on-Green Inverted (white filled) + Outlined on Dark (white outline) pairing 315 315 + 316 316 + ### Expander / Accordion 317 317 + 318 318 + - Duration: `300ms` (`--expanderDuration`) 319 319 + - Timing curve: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` — a measured ease-out 320 320 + - Used for FAQ sections on Rewards and gift page 321 321 + 322 322 + ### Cookie Consent Module 323 323 + 324 324 + Dark-green modal card at top of page with "Agree" (green-filled) and "Manage preferences" (outlined) buttons. Appears on first visit; dismissible. 325 325 + 326 326 + ### Product Detail Components (PDP signature cluster) 327 327 + 328 328 + A repeating component cluster used on menu product pages (e.g., `/menu/product/40498/iced` for a drink detail, `/menu/product/.../nutrition` for nutrition facts). These extend the component inventory without changing tokens. 329 329 + 330 330 + **Size Options Selector** 331 331 + 332 332 + - Horizontal row of 4 cup-icon buttons (Tall / Grande / Venti / Trenta) 333 333 + - Each item: cup silhouette icon on top, size name below (16/700 in Starbucks-Green), fluid-ounce caption (13/400 in Text Black Soft) 334 334 + - Active state: a green circular ring outline (`2px solid #00754A`) around the selected cup icon 335 335 + - Inactive: no ring, same typography 336 336 + - Full-width row, equal spacing 337 337 + - Radius of container: `12px` or flat; individual icons are `50%` circular 338 338 + - Padding: `16px 24px` internal 339 339 + 340 340 + **Add-in / Milk Select (outlined rectangle)** 341 341 + 342 342 + - Background: `#ffffff` 343 343 + - Border: `1px solid #d6dbde` (Input Border) 344 344 + - Radius: `4px` 345 345 + - Full-width in its column 346 346 + - Floating label above top border: "Add-ins" / "Milk" / "Add-ins" — 13/700 in Text Black, uppercase, `0.325px` letter-spacing 347 347 + - Value displayed centered (e.g., "Ice", "Coconut", "Strawberry Fruit Inclusions scoop"): 16/400 Text Black 348 348 + - Chevron-down icon right side in Text Black Soft 349 349 + - Focus: border shifts to Green Accent (`#00754A`) 350 350 + 351 351 + **Numeric Stepper** 352 352 + 353 353 + - Embedded inside an Add-in row when a quantity is required (e.g., Strawberry Fruit Inclusions scoop) 354 354 + - `−` minus button + count number + `+` plus button, all inline right of the label 355 355 + - Buttons: circular `32×32px` with `1px solid #d6dbde` border, neutral gray icon 356 356 + - Count number: 16/700 Text Black centered 357 357 + 358 358 + **Customize Button** 359 359 + 360 360 + - Background: `#ffffff` 361 361 + - Text: `#00754A` (Green Accent) 362 362 + - Border: `1.5px solid #00754A` 363 363 + - Radius: `50px` (full pill) 364 364 + - Padding: `14px 40px` (generously larger than default pills — this is a secondary primary action) 365 365 + - Label: "Customize" with a gold sparkle ✨ icon inset left 366 366 + - Used for: entering the drink-customization flow after size/milk selection 367 367 + 368 368 + **Add to Order Button (PDP)** 369 369 + 370 370 + - Background: `#00754A` (Green Accent) 371 371 + - Text: `#ffffff` 372 372 + - Radius: `50px` 373 373 + - Padding: `14px 32px` 374 374 + - Pinned top-right of product card and/or aligned right within the store-availability band 375 375 + - Same scale(0.95) active behavior as other primary CTAs 376 376 + 377 377 + **Rewards Cost Pill — "200★ item"** 378 378 + 379 379 + - Background: transparent 380 380 + - Border: `1px solid #cba258` (Gold) 381 381 + - Text: `#cba258` (Gold) 382 382 + - Radius: `50px` (full pill) 383 383 + - Padding: `4px 12px` 384 384 + - Content: "200★ item" where `★` is a small filled star glyph — indicates the Rewards Stars required to redeem this item 385 385 + - Font: Proxima Nova 13/700 with `0.5px` letter-spacing 386 386 + - Used only on products that are Rewards-redeemable 387 387 + 388 388 + **Product Description Band** 389 389 + 390 390 + - Full-width dark-green band (`#1E3932` House Green) 391 391 + - Contains top-to-bottom: 392 392 + 1. Rewards Cost Pill (gold) if applicable 393 393 + 2. Product description body copy in white (16/400/1.5) 394 394 + 3. Nutritional summary inline ("140 calories, 25g sugar, 2.5g fat") with info-icon tooltip — 14/700 white 395 395 + 4. "Full nutrition & ingredients list" outlined-white-on-green pill button 396 396 + - Padding: `32px` vertical 397 397 + - Appears beneath the primary product header band 398 398 + 399 399 + **Ingredients / Nutrition Table** 400 400 + 401 401 + - Two-column layout on the Nutrition page 402 402 + - Left column: "Ingredients" header + list or "Not available for this item" placeholder text block with an explanatory paragraph in Text Black Soft 14/400 403 403 + - Right column: "Nutrition" header + label/value rows 404 404 + - Each row: nutrient label (Proxima Nova 14/400) on the left, value (e.g., "140 calories", "25g", "205 mg\*\*") on the right, separated by a `1px solid #e7e7e7` hairline below 405 405 + - Footnote for caffeine/asterisk markers in 13/400 Text Black Soft at the bottom 406 406 + - Reusable pattern for nutrition facts regulation-compliant tables 407 407 + 408 408 + **Store Availability Selector** 409 409 + 410 410 + - Appears on dark-green feature band above the size-options row 411 411 + - Full-width rounded rectangle with transparent-white interior 412 412 + - Text: "For item availability, choose a store" in white, 14/400 413 413 + - Right side: chevron-down affordance + shopping-bag SVG icon in white outline 414 414 + - Radius: `4px` 415 415 + - Height: ~48px 416 416 + 417 417 + **PDP Breadcrumb** 418 418 + 419 419 + - "Menu / Refreshers / Pink Energy Drink" trail above the product title 420 420 + - Separator: `/` slash character in Text Black Soft 421 421 + - Current page is unlinked, prior pages are underlined green-accent links 422 422 + - Font: 14/400 Proxima Nova 423 423 + - Appears on all PDP pages 206 424 207 207 - ## 6. Layout Principles 425 425 + **Back Chevron Link (PDP nutrition / detail sub-pages)** 426 426 + 427 427 + - "← Back" text link above section headings on the nutrition page 428 428 + - Text in Green Accent (`#00754A`) 14/700 Proxima Nova 429 429 + - Left chevron `<` in the same green 430 430 + - Alternative to full breadcrumb on deep sub-pages 431 431 + 432 432 + ## 5. Layout Principles 208 433 209 434 ### Spacing System 210 435 211 211 - - Base unit: 8px 212 212 - - Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px 436 436 + Rem-based semantic scale (anchored `1rem = 10px`): 437 437 + 438 438 + | Token | Rem | Pixels | Typical Use | 439 439 + | ----------- | -------- | ------ | ----------------------------------------- | 440 440 + | `--space-1` | `0.4rem` | 4px | Tightest inline padding | 441 441 + | `--space-2` | `0.8rem` | 8px | Small gap, button vertical padding | 442 442 + | `--space-3` | `1.6rem` | 16px | Default — card padding, outer gutter xs | 443 443 + | `--space-4` | `2.4rem` | 24px | Section inner spacing, outer gutter md | 444 444 + | `--space-5` | `3.2rem` | 32px | Major between-section spacing | 445 445 + | `--space-6` | `4rem` | 40px | Large gaps, outer gutter lg, header crate | 446 446 + | `--space-7` | `4.8rem` | 48px | Section-to-section spacing | 447 447 + | `--space-8` | `5.6rem` | 56px | Very large breathing — Frap height | 448 448 + | `--space-9` | `6.4rem` | 64px | Widest section padding | 449 449 + 450 450 + **Gutter tokens:** 451 451 + 452 452 + - `--outerGutter: 1.6rem` (16px, default / mobile) 453 453 + - `--outerGutterMedium: 2.4rem` (24px, tablet) 454 454 + - `--outerGutterLarge: 4.0rem` (40px, desktop) 455 455 + 456 456 + **Universal rhythm constant:** `1.6rem` (16px) appears across every page as the default outer gutter, card padding baseline, and text size 3 body — the system's most frequent spacing unit. 213 457 214 458 ### Grid & Container 215 459 216 216 - - Sidebar (fixed) + main content area 217 217 - - Grid-based album/playlist cards 218 218 - - Responsive content area fills remaining space 460 460 + - Column width scale: `--columnWidthSmall: 343px` / `Medium: 500px` / `Large: 720px` / `XLarge: 1440px` 461 461 + - Gift-card grid uses a 3-5-up responsive grid of `~343px` tiles 462 462 + - Rewards status section: 3-up dark-green panels at `lg+` breakpoints 463 463 + - Hero: asymmetric split 40% (image) / 60% (content) via `--headerCrateProportion` / `--contentCrateProportion` 219 464 220 465 ### Whitespace Philosophy 221 466 222 222 - - **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps. 223 223 - - **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience. 467 467 + Whitespace carries the feeling of "plenty of space in the café." Section padding leans generous (40–64px). Content blocks are separated by whitespace rather than dividers. The cream canvas (`#f2f0eb`) is itself a visual breath between white cards and green feature bands. 224 468 225 469 ### Border Radius Scale 226 470 227 227 - - Minimal (2px): Badges, explicit tags 228 228 - - Subtle (4px): Inputs, small elements 229 229 - - Standard (6px): Album art containers, cards 230 230 - - Comfortable (8px): Sections, dialogs 231 231 - - Medium (10px–20px): Panels, overlay elements 232 232 - - Large (100px): Large pill buttons 233 233 - - Pill (500px): Primary buttons, search input 234 234 - - Full Pill (9999px): Navigation pills, search 235 235 - - Circle (50%): Play buttons, avatars, icons 471 471 + | Value | Use | 472 472 + | --------------- | ----------------------------------------------------------------------------------- | 473 473 + | `12px` | Cards, modals, menu-item tiles (`--cardBorderRadius`) | 474 474 + | `12px 12px 0 0` | Full-width feedback tab (top-rounded only) | 475 475 + | `50px` | All buttons — full-pill radius (`--buttonBorderRadius`) | 476 476 + | `50%` | Circular icons, Frap floating button, avatar thumbnails | 477 477 + | Specialty | `3.3333%/5.298%` elliptical for Starbucks-Visa-Card mockups (`--svcRoundedCorners`) | 236 478 237 237 - ## 7. Depth & Elevation 479 479 + ## 6. Depth & Elevation 238 480 239 239 - | Level | Treatment | Use | 240 240 - | ------------------ | ---------------------------- | ------------------------------ | 241 241 - | Base (Level 0) | `var(--spot-bg)` background | Deepest layer, page background | 242 242 - | Surface (Level 1) | `var(--spot-surface)` | Cards, sidebar, containers | 243 243 - | Elevated (Level 2) | `var(--spot-shadow)` | Dropdown menus, hover cards | 244 244 - | Dialog (Level 3) | `var(--spot-shadow-heavy)` | Modals, overlays, menus | 481 481 + | Level | Treatment | Use | 482 482 + | -------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------- | 483 483 + | Card | `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)` | Default content cards — a whisper-soft dual-shadow | 484 484 + | Global Nav | `0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` | Triple-layer soft lift on the fixed top bar | 485 485 + | Frap Base | `0 0 6px rgba(0,0,0,0.24)` | Base halo around the floating circular CTA | 486 486 + | Frap Ambient | `0 8px 12px rgba(0,0,0,0.14)` | Stacked directional ambient — floats the Frap forward | 487 487 + | Gift Card | Light drop shadow around illustrated photograph | Physical-card feel for gift tiles | 488 488 + | Starbucks Card (SVC) | `drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24))` | Stacked SVG drop shadows for Starbucks Card visuals | 245 489 246 246 - ## 8. Do's and Don'ts 490 490 + **Shadow philosophy:** Whisper-soft, layered over solid — the system never reaches for a single heavy drop shadow. Instead, it stacks 2–3 low-alpha shadows with different offsets to simulate real-world ambient + direct lighting. The Frap button is the most elevated element on any page. 491 491 + 492 492 + ### Decorative Depth 493 493 + 494 494 + - **No gradient system** — surfaces are solid color-block 495 495 + - **Color-block banding** carries perceived depth (dark-green bands read as "recessed feature zones" between cream/white body sections) 496 496 + - **SVG filter shadows** on Starbucks-Card visuals add a slight 3D physicality without a box-shadow 497 497 + 498 498 + ## 7. Do's and Don'ts 247 499 248 500 ### Do 249 501 250 250 - - Use semantic color tokens (`spot-bg`, `spot-surface`, `spot-text`, etc.) — they adapt to theme 251 251 - - Apply Accent Purple (`#a855f7`) only for play controls, active states, and primary CTAs 252 252 - - Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls 253 253 - - Apply uppercase + wide letter-spacing (1.4px–2px) on button labels 254 254 - - Keep typography compact (10px–24px range) — this is an app, not a magazine 255 255 - - Use theme-aware shadows via CSS variables 256 256 - - Test all components in both dark and light themes 502 502 + - Use Neutral Warm (`#f2f0eb`) or Ceramic (`#edebe9`) as page canvas instead of pure white — the warm cream is the signature 503 503 + - Map the green tiers to their intended surface role — Starbucks Green for headings, Green Accent for CTAs, House Green for deep bands, Uplift for decorative 504 504 + - Keep tracking tight at `-0.01em` / `-0.16px` on SoDoSans across the whole system 505 505 + - Use 50px full-pill radius on every button without exception 506 506 + - Apply `transform: scale(0.95)` as the universal button active state 507 507 + - Reserve Gold for Rewards-status ceremony moments only 508 508 + - Use SoDoSans for nearly everything; switch to Lander Tall serif only for Rewards editorial headlines; reserve Kalam script for Careers "cup name" moments 509 509 + - Layer 2–3 low-alpha shadows instead of one heavier drop shadow for elevation 510 510 + - Use the Frap circular CTA as the persistent floating order entry on every shopping surface 511 511 + - Let the cream canvas breathe between content cards — use whitespace, not dividers 257 512 258 513 ### Don't 259 514 260 260 - - Don't use Accent Purple decoratively or on backgrounds — it's functional only 261 261 - - Don't hardcode theme-dependent colors — use CSS variable-backed tokens 262 262 - - Don't skip the pill/circle geometry on buttons — square buttons break the identity 263 263 - - Don't use hardcoded shadow values — use `shadow-spot` and `shadow-spot-heavy` 264 264 - - Don't add additional brand colors — purple + achromatic grays is the complete palette 265 265 - - Don't use `text-white` or `bg-white` directly — use `text-spot-text` and `bg-spot-active-pill-bg` 266 266 - - Don't expose raw gray borders — use `border-spot-divider` or `border-spot-outline` 515 515 + - Don't use pure white as the page canvas — the warm cream temperature is load-bearing 516 516 + - Don't pick "one brand green" — the four-green system is intentional; using only `#006241` everywhere flattens the brand 517 517 + - Don't use Gold as a general-purpose accent — it's a Rewards signal only 518 518 + - Don't square the corners on buttons — the 50px pill is universal 519 519 + - Don't introduce gradient fills — the system is color-block throughout 520 520 + - Don't weight-contrast h1 and h2 by size — the hierarchy comes from weight + color (600 Starbucks-Green vs 400 Text Black) 521 521 + - Don't use pure black for body text — `rgba(0,0,0,0.87)` matches the warm canvas 522 522 + - Don't skip the `scale(0.95)` active feedback on buttons — it's a signature micro-interaction 523 523 + - Don't stack single heavy shadows; always layer 2–3 low-alpha ones 524 524 + - Don't introduce serifs or scripts into the main shopping flow — they belong to Rewards and Careers contexts respectively 267 525 268 268 - ## 9. Responsive Behavior 526 526 + ## 8. Responsive Behavior 269 527 270 528 ### Breakpoints 271 529 272 272 - | Name | Width | Key Changes | 273 273 - | ------------- | ----------- | --------------------- | 274 274 - | Mobile Small | <425px | Compact mobile layout | 275 275 - | Mobile | 425–576px | Standard mobile | 276 276 - | Tablet | 576–768px | 2-column grid | 277 277 - | Tablet Large | 768–896px | Expanded layout | 278 278 - | Desktop Small | 896–1024px | Sidebar visible | 279 279 - | Desktop | 1024–1280px | Full desktop layout | 280 280 - | Large Desktop | >1280px | Expanded grid | 530 530 + Inferred from component width tokens and progressive nav heights: 531 531 + 532 532 + | Name | Width | Key Changes | 533 533 + | ------- | ----------- | ------------------------------------------------------------------------------- | 534 534 + | xs | < 480px | Global nav 64px; hamburger menu; single-column layouts; pill buttons full-width | 535 535 + | Mobile | 480–767px | Global nav 72px; gift-card grid 2-up; card padding tightens | 536 536 + | Tablet | 768–1023px | Global nav 83px; gift-card grid 3-up; hero split begins to appear | 537 537 + | Desktop | 1024–1439px | Global nav 99px; gift-card grid 4-up; full asymmetric hero 40/60 | 538 538 + | XLarge | 1440px+ | Content caps at `--columnWidthXLarge`; gift-card grid 5-up; extra cream margin | 539 539 + 540 540 + ### Touch Targets 541 541 + 542 542 + - Pill buttons at `7px 16px` padding measure ~32px tall — below 44px WCAG AAA minimum for touch-only surfaces. On mobile, button padding may be visually expanded to meet the minimum. 543 543 + - Frap floating circular button at `56px` is well above minimum. 544 544 + - Frap uses `--frapTouchOffset: calc(-1 * .8rem)` to extend tap area 8px beyond visual edge. 545 545 + - Form float-label inputs grow their label font size on mobile (1.6rem base vs 1.9rem desktop) — easier to tap and read at arm's-length. 281 546 282 547 ### Collapsing Strategy 283 548 284 284 - - Sidebar: full → collapsed → hidden 285 285 - - Album grid: 5 columns → 3 → 2 → 1 286 286 - - Search: pill input maintained, width adjusts 287 287 - - Navigation: sidebar → bottom bar on mobile 288 288 - - Theme toggle: always accessible in sidebar footer / mobile header 549 549 + - **Global nav height scales progressively**: 64 → 72 → 83 → 99px across breakpoints, not a single value 550 550 + - **Hero split collapses**: 40/60 asymmetric split → stacked (image top, content below) at mobile 551 551 + - **Gift-card grid**: 5-up → 4-up → 3-up → 2-up → 1-up across breakpoints with adjusted card widths 552 552 + - **Feature bands**: Stay full-width but text + imagery stack vertically on mobile 553 553 + - **Outer gutter scales**: 16px → 24px → 40px as viewport grows 554 554 + - **Rewards 3-column status panels**: Stack to single column on mobile 289 555 290 290 - ## 10. Agent Prompt Guide 556 556 + ### Image Behavior 557 557 + 558 558 + - Hero product photography crops tighter vertically on mobile; content becomes the visual anchor 559 559 + - Gift-card illustrations preserve aspect ratio; card grid reflows 560 560 + - `opacity 0.3s ease-in` fade-in transition on image load (prevents jarring pop-in) 561 561 + - Rewards app-in-hand photography scales proportionally; never stretches 562 562 + 563 563 + ## 9. Agent Prompt Guide 291 564 292 565 ### Quick Color Reference 293 566 294 294 - | Role | Token | Value (dark) | 295 295 - | -------------- | -------------------- | -------------- | 296 296 - | Background | `bg-spot-bg` | `#121212` | 297 297 - | Surface | `bg-spot-surface` | `#181818` | 298 298 - | Hover | `bg-spot-hover` | `#1f1f1f` | 299 299 - | Text primary | `text-spot-text` | `#ffffff` | 300 300 - | Text secondary | `text-spot-secondary`| `#b3b3b3` | 301 301 - | Text body | `text-spot-body` | `#cbcbcb` | 302 302 - | Text muted | `text-spot-muted` | `#4d4d4d` | 303 303 - | Accent | `text-spot-purple` | `#a855f7` | 304 304 - | Divider | `border-spot-divider`| `rgba(...)` | 305 305 - | Outline | `border-spot-outline`| `#7c7c7c` | 306 306 - | Error | `text-spot-red` | `#f3727f` | 567 567 + - Primary CTA: "Green Accent (`#00754A`)" 568 568 + - Primary CTA text: "White (`#ffffff`)" 569 569 + - Brand heading: "Starbucks Green (`#006241`)" 570 570 + - Feature band / footer: "House Green (`#1E3932`)" 571 571 + - Page canvas: "Neutral Warm (`#f2f0eb`)" 572 572 + - Card canvas: "White (`#ffffff`)" 573 573 + - Heading text on light: "Text Black (`rgba(0,0,0,0.87)`)" 574 574 + - Body text on light: "Text Black Soft (`rgba(0,0,0,0.58)`)" 575 575 + - Body text on dark-green: "Text White Soft (`rgba(255,255,255,0.70)`)" 576 576 + - Rewards accent: "Gold (`#cba258`)" 577 577 + - Rewards text: "Rewards Green (`#33433d`)" 578 578 + - Destructive: "Red (`#c82014`)" 579 579 + 580 580 + ### Example Component Prompts 581 581 + 582 582 + 1. "Create a primary Starbucks CTA pill button with Green Accent (`#00754A`) background, white text 'Explore our afternoon menu', SoDoSans font at 16px weight 600 with `-0.01em` letter-spacing, `50px` border-radius (full pill), `7px 16px` padding. Apply `transform: scale(0.95)` as the active state with a `0.2s ease` transition." 583 583 + 584 584 + 2. "Design a content card with White (`#ffffff`) background at `12px` border-radius, layered shadow `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)`. Pad contents `16–24px` (`--space-3` to `--space-4`). Place on a Neutral Warm (`#f2f0eb`) page canvas with `16px` gap to siblings." 585 585 + 586 586 + 3. "Build the Frap floating circular order button — `56px` diameter, Green Accent (`#00754A`) fill, white shopping-bag icon centered. Layered shadow: `0 0 6px rgba(0,0,0,0.24)` + `0 8px 12px rgba(0,0,0,0.14)`. Fixed position bottom-right with `-0.8rem` touch offset. Active state collapses the ambient shadow to `0 8px 12px rgba(0,0,0,0)` with `scale(0.95)`." 587 587 + 588 588 + 4. "Build a dark-green feature band — full-width section with House Green (`#1E3932`) background. Left column: white SoDoSans h2 at 24px weight 600, followed by a Text White Soft (`rgba(255,255,255,0.70)`) body paragraph and a CTA row with two buttons (White-filled with Green Accent text for primary, Outlined-on-Dark white border for secondary). Right column: product photography. Split ratio 40/60, stacked vertically below `768px`." 589 589 + 590 590 + 5. "Create a Rewards status card — House Green (`#1E3932`) panel with `12px` border-radius, colored gradient top stripe (Bronze/Silver/Gold tier). Title in SoDoSans 24px weight 600 in white. Benefits list as white bullets with `rgba(255,255,255,0.70)` secondary captions. Bottom progression text in Text White Soft. Stack 3 panels in a grid at `lg+`, single column on mobile." 591 591 + 592 592 + 6. "Design a gift-card tile — card radius matches `12px`, fills with an illustrated photograph (hand-drawn watercolor-painted feel) as the entire surface. Subtle drop shadow makes it feel like a physical card on the cream canvas. Group under a category label ('Spring', 'Thank You', 'Birthday') in SoDoSans 24px weight 400 above the grid." 593 593 + 594 594 + 7. "Create a Starbucks product-detail header — House Green (`#1E3932`) band with breadcrumb 'Menu / Refreshers / Pink Energy Drink' in 14/400 white above the product title in SoDoSans 32/700 uppercase white. Product photograph centered below title. Below photo: a 4-up size selector row — each cup-icon button shows a vertical cup silhouette, size name ('Tall' / 'Grande' / 'Venti' / 'Trenta') in 16/700 white, and fluid-ounce in 13/400 Text White Soft. Selected size wraps the cup icon in a `2px solid #00754A` circular ring." 595 595 + 596 596 + 8. "Build a Starbucks customize flow — under the size selector, 3 stacked outlined-rectangle input rows (white bg, `1px solid #d6dbde` border, `4px` radius). Each has a floating label ('Add-ins', 'Milk', 'Add-ins') above the top border in 13/700 Text Black uppercase. Value centered (e.g., 'Ice', 'Coconut'). Right side: chevron-down in Text Black Soft. For the scoop row, embed a numeric stepper (`−` `1` `+` with circular `32px` outlined buttons). Below all three fields: outlined green 'Customize' pill with gold sparkle icon, `50px` radius, `14px 40px` padding. Pair with a Green Accent filled 'Add to Order' pill in the same row." 597 597 + 598 598 + 9. "Design a Starbucks product description band — full-width House Green (`#1E3932`) below product header. Top: a gold-outlined '200★ item' Rewards Cost Pill (`50px` radius, `4px 12px` padding, gold `#cba258` border and text). Below: product description in white 16/400/1.5. Nutritional inline summary in white 14/700 ('140 calories, 25g sugar, 2.5g fat') with info-icon tooltip. Outlined-white-on-green pill button 'Full nutrition &amp; ingredients list'. 32px vertical padding." 599 599 + 600 600 + 10. "Create a Starbucks nutrition facts table — two-column layout inside a White card. Left column: 'Ingredients' header (24/400 Text Black), followed by ingredient list or 'Not available for this item' placeholder paragraph in 14/400 Text Black Soft. Right column: 'Nutrition' header, then label/value rows (nutrient name left, value right) separated by `1px solid #e7e7e7` hairlines. Typography: labels in 14/400 Text Black, values in 14/700 Text Black right-aligned. Footnote asterisk markers in 13/400 Text Black Soft at the bottom." 307 601 308 602 ### Iteration Guide 309 603 310 310 - 1. Use semantic tokens (`spot-bg`, `spot-surface`, `spot-text`) — they handle theme switching 311 311 - 2. Accent Purple (`spot-purple`) for functional highlights only (active, CTA) 312 312 - 3. Pill everything — 500px for large, 9999px for small, 50% for circular 313 313 - 4. Uppercase + wide tracking on buttons — the systematic label voice 314 314 - 5. Theme-aware shadows via `shadow-spot` and `shadow-spot-heavy` 315 315 - 6. Never hardcode `text-white` or `bg-white` — use semantic tokens 604 604 + When refining existing screens generated with this design system: 605 605 + 606 606 + 1. Focus on ONE component at a time 607 607 + 2. Reference specific color names and hex codes from this document 608 608 + 3. Use natural language descriptions ("warm cream canvas," "four-tier green system") alongside exact values 609 609 + 4. Preserve the 50px pill + `scale(0.95)` active state universally 610 610 + 5. Check that greens are mapped to their correct role (Green Accent for CTA, Starbucks Green for heading, House Green for band) 611 611 + 6. Don't introduce gradients — the system is color-block 612 612 + 7. Keep SoDoSans tracking at `-0.01em` / `-0.16px` across the board 613 613 + 614 614 + ### Known Gaps 615 615 + 616 616 + - SoDoSans is a proprietary typeface not available on Google Fonts — when implementing publicly, use Inter or Manrope as a substitute and document the swap 617 617 + - Lander Tall (Rewards serif) is also custom — substitute with Iowan Old Style, Lora, or Source Serif Pro 618 618 + - Specific per-component animation timings beyond the few documented (`--duration: 0.4s`, `--iconTransition: all ease-out 0.2s`, `--expanderDuration: 300ms`) are not captured for every interactive surface 619 619 + - Form error-state full styling (red border weight, icon placement) visible on the tint token but not exhaustively extracted 620 620 + - Careers-page specific components (cup-name card, search radio grid) are referenced in token names but not covered by this extraction 621 621 + - Starbucks Visa Card / Starbucks-Card (SVC) detailed mockup specs are hinted at by `--svcRoundedCorners` and `--svcShadowFilter` tokens but not fully documented

+2 -2

internal/tmpl/annotations.html

reviewed

··· 6 6 {{if .ArticleURL}} 7 7 <div class="mb-4 text-sm text-spot-secondary"> 8 8 Filtering by: <strong class="text-spot-text">{{.ArticleURL}}</strong> 9 9 - <a href="/annotations" class="text-spot-purple ml-2 hover:brightness-110">Clear</a> 9 9 + <a href="/annotations" class="text-spot-green ml-2 hover:brightness-110">Clear</a> 10 10 </div> 11 11 {{end}} 12 12 ··· 26 26 <button hx-get="/annotations?offset={{.NextOffset}}{{if .ArticleURL}}&article={{.ArticleURL}}{{end}}" 27 27 hx-target="#annotations-list" hx-swap="beforeend" 28 28 hx-select=".annotation-card" 29 29 - class="text-sm text-spot-secondary hover:text-spot-purple transition">Load more</button> 29 29 + class="text-sm text-spot-secondary hover:text-spot-green transition">Load more</button> 30 30 </div> 31 31 {{end}} 32 32 {{end}}

+7 -7

internal/tmpl/article_detail.html

reviewed

··· 4 4 5 5 <article> 6 6 <h1 class="text-3xl font-bold font-title leading-tight"> 7 7 - {{if .Article.URL.Valid}}<a href="{{.Article.URL.String}}" target="_blank" rel="noopener noreferrer" class="text-spot-text hover:text-spot-purple transition">{{.Article.Title}}</a> 7 7 + {{if .Article.URL.Valid}}<a href="{{.Article.URL.String}}" target="_blank" rel="noopener noreferrer" class="text-spot-text hover:text-spot-green transition">{{.Article.Title}}</a> 8 8 {{else}}<span class="text-spot-text">{{.Article.Title}}</span>{{end}} 9 9 </h1> 10 10 ··· 12 12 {{if .Article.Author.Valid}}<span>{{.Article.Author.String}}</span>{{end}} 13 13 {{if .Article.Published.Valid}}<span>{{.Article.Published.Time.Format "Jan 2, 2006 15:04"}}</span>{{end}} 14 14 {{if .Feed}} 15 15 - <a href="/articles?feed={{.Feed.FeedURL}}" class="hover:text-spot-purple transition"> 15 15 + <a href="/articles?feed={{.Feed.FeedURL}}" class="hover:text-spot-green transition"> 16 16 {{if .Feed.FaviconURL.Valid}}<img src="{{.Feed.FaviconURL.String}}" class="w-4 h-4 inline-block mr-1 align-text-bottom rounded-sm">{{end}} 17 17 {{if .Feed.Title.Valid}}{{.Feed.Title.String}}{{else}}{{.Feed.FeedURL}}{{end}} 18 18 </a> ··· 57 57 {{sanitizeHTML .Article.Summary.String}} 58 58 </div> 59 59 {{else}} 60 60 - <p class="text-spot-secondary">No content available. <a href="{{.Article.URL.String}}" class="text-spot-purple hover:underline">Read the original article.</a></p> 60 60 + <p class="text-spot-secondary">No content available. <a href="{{.Article.URL.String}}" class="text-spot-green hover:underline">Read the original article.</a></p> 61 61 {{end}} 62 62 </article> 63 63 ··· 74 74 <input type="hidden" name="article_url" value="{{if .Article.URL.Valid}}{{.Article.URL.String}}{{end}}"> 75 75 <div> 76 76 <textarea name="note" rows="2" placeholder="Add a note..." 77 77 - class="w-full bg-spot-hover text-spot-text rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-spot-purple placeholder:text-spot-placeholder resize-none"></textarea> 77 77 + class="w-full bg-spot-hover text-spot-text rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-placeholder resize-none"></textarea> 78 78 </div> 79 79 <div class="flex gap-2"> 80 80 <input type="text" name="quote" placeholder="Quote (optional)" 81 81 - class="flex-1 bg-spot-hover text-spot-text rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-purple placeholder:text-spot-placeholder"> 81 81 + class="flex-1 bg-spot-hover text-spot-text rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-placeholder"> 82 82 <input type="text" name="tags" placeholder="Tags (comma separated)" 83 83 - class="flex-1 bg-spot-hover text-spot-text rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-purple placeholder:text-spot-placeholder"> 83 83 + class="flex-1 bg-spot-hover text-spot-text rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-placeholder"> 84 84 </div> 85 85 - <button type="submit" class="bg-spot-purple text-spot-bg rounded-pill px-5 py-2 text-sm font-bold uppercase tracking-button hover:brightness-110 transition">Annotate</button> 85 85 + <button type="submit" class="bg-spot-green text-spot-bg rounded-pill px-5 py-2 text-sm font-bold uppercase tracking-button hover:brightness-110 transition">Annotate</button> 86 86 </form> 87 87 88 88 <div id="annotations-list" class="space-y-3">

+3 -3

internal/tmpl/articles.html

reviewed

··· 21 21 <button hx-get="/articles?offset={{.NextOffset}}{{if .FeedURL}}&feed={{.FeedURL}}{{end}}{{if .Starred}}&starred=1{{end}}" 22 22 hx-target="#article-list" hx-swap="beforeend" 23 23 hx-select="article" 24 24 - class="text-sm text-spot-secondary hover:text-spot-purple transition"> 24 24 + class="text-sm text-spot-secondary hover:text-spot-green transition"> 25 25 Load more 26 26 </button> 27 27 </div> ··· 33 33 var currentIdx = -1; 34 34 35 35 function highlightArticle(idx) { 36 36 - articles.forEach(function(a) { a.classList.remove('ring-2', 'ring-spot-purple'); }); 36 36 + articles.forEach(function(a) { a.classList.remove('ring-2', 'ring-spot-green'); }); 37 37 if (idx >= 0 && idx < articles.length) { 38 38 currentIdx = idx; 39 39 - articles[idx].classList.add('ring-2', 'ring-spot-purple'); 39 39 + articles[idx].classList.add('ring-2', 'ring-spot-green'); 40 40 articles[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest' }); 41 41 } 42 42 }

+19 -125

internal/tmpl/base.html

reviewed

··· 8 8 <script> 9 9 (function(){var t=localStorage.getItem('theme')||'dark';document.documentElement.setAttribute('data-theme',t)})(); 10 10 </script> 11 11 - <script src="https://cdn.tailwindcss.com"></script> 12 12 - <script> 13 13 - tailwind.config = { 14 14 - theme: { 15 15 - extend: { 16 16 - colors: { 17 17 - spot: { 18 18 - purple: '#a855f7', 19 19 - 'purple-border': '#9333ea', 20 20 - bg: 'var(--spot-bg)', 21 21 - surface: 'var(--spot-surface)', 22 22 - hover: 'var(--spot-hover)', 23 23 - 'hover-50': 'var(--spot-hover-50)', 24 24 - text: 'var(--spot-text)', 25 25 - secondary: 'var(--spot-secondary)', 26 26 - body: 'var(--spot-body)', 27 27 - muted: 'var(--spot-muted)', 28 28 - divider: 'var(--spot-divider)', 29 29 - 'divider-30': 'var(--spot-divider-30)', 30 30 - outline: 'var(--spot-outline)', 31 31 - placeholder: 'var(--spot-placeholder)', 32 32 - 'active-pill-bg': 'var(--spot-active-bg)', 33 33 - 'active-pill-text': 'var(--spot-active-text)', 34 34 - red: '#f3727f', 35 35 - orange: '#ffa42b', 36 36 - blue: '#539df5', 37 37 - } 38 38 - }, 39 39 - borderRadius: { 40 40 - pill: '9999px', 41 41 - 'pill-lg': '500px', 42 42 - }, 43 43 - boxShadow: { 44 44 - 'spot': 'var(--spot-shadow)', 45 45 - 'spot-heavy': 'var(--spot-shadow-heavy)', 46 46 - }, 47 47 - letterSpacing: { 48 48 - button: '1.4px', 49 49 - }, 50 50 - } 51 51 - } 52 52 - } 53 53 - </script> 11 11 + <link rel="stylesheet" href="/static/output.css"> 54 12 <script src="https://unpkg.com/htmx.org@2"></script> 55 55 - <style> 56 56 - :root { 57 57 - --spot-bg: #121212; 58 58 - --spot-surface: #181818; 59 59 - --spot-hover: #1f1f1f; 60 60 - --spot-hover-50: rgba(31,31,31,0.5); 61 61 - --spot-text: #ffffff; 62 62 - --spot-secondary: #b3b3b3; 63 63 - --spot-body: #cbcbcb; 64 64 - --spot-muted: #4d4d4d; 65 65 - --spot-divider: rgba(77,77,77,0.2); 66 66 - --spot-divider-30: rgba(77,77,77,0.3); 67 67 - --spot-outline: #7c7c7c; 68 68 - --spot-placeholder: #4d4d4d; 69 69 - --spot-active-bg: #ffffff; 70 70 - --spot-active-text: #121212; 71 71 - --spot-shadow: rgba(0,0,0,0.3) 0px 8px 8px; 72 72 - --spot-shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px; 73 73 - } 74 74 - [data-theme="light"] { 75 75 - --spot-bg: #f5f5f5; 76 76 - --spot-surface: #ffffff; 77 77 - --spot-hover: #f3f4f6; 78 78 - --spot-hover-50: rgba(243,244,246,0.5); 79 79 - --spot-text: #111827; 80 80 - --spot-secondary: #6b7280; 81 81 - --spot-body: #374151; 82 82 - --spot-muted: #9ca3af; 83 83 - --spot-divider: #e5e7eb; 84 84 - --spot-divider-30: #d1d5db; 85 85 - --spot-outline: #d1d5db; 86 86 - --spot-placeholder: #9ca3af; 87 87 - --spot-active-bg: #111827; 88 88 - --spot-active-text: #ffffff; 89 89 - --spot-shadow: rgba(0,0,0,0.08) 0px 2px 8px; 90 90 - --spot-shadow-heavy: rgba(0,0,0,0.1) 0px 4px 16px; 91 91 - } 92 92 - </style> 93 93 - <style type="text/tailwindcss"> 94 94 - @layer components { 95 95 - .article-body h1 { @apply text-2xl font-bold mt-8 mb-3 text-spot-text } 96 96 - .article-body h2 { @apply text-xl font-semibold mt-6 mb-2 text-spot-text } 97 97 - .article-body h3 { @apply text-lg font-semibold mt-5 mb-2 text-spot-text } 98 98 - .article-body h4 { @apply text-base font-semibold mt-4 mb-1 text-spot-text } 99 99 - .article-body p { @apply my-3 leading-7 text-spot-body } 100 100 - .article-body ul { @apply list-disc pl-6 my-3 text-spot-body } 101 101 - .article-body ol { @apply list-decimal pl-6 my-3 text-spot-body } 102 102 - .article-body li { @apply my-1 leading-7 } 103 103 - .article-body blockquote { @apply border-l-4 border-spot-divider pl-4 italic text-spot-secondary my-4 } 104 104 - .article-body pre { @apply bg-spot-bg text-spot-body rounded-lg p-4 overflow-x-auto my-4 text-sm leading-6 } 105 105 - .article-body code { @apply bg-spot-surface text-spot-body px-1.5 py-0.5 rounded text-sm font-mono } 106 106 - .article-body pre code { @apply bg-transparent text-spot-body p-0 } 107 107 - .article-body img { @apply rounded-lg max-w-full h-auto my-4 } 108 108 - .article-body figure { @apply my-4 } 109 109 - .article-body figcaption { @apply text-sm text-spot-secondary text-center mt-2 } 110 110 - .article-body a { @apply text-spot-purple underline hover:brightness-110 } 111 111 - .article-body table { @apply w-full border-collapse my-4 } 112 112 - .article-body th { @apply border border-spot-divider px-3 py-2 bg-spot-surface font-semibold text-left text-spot-text } 113 113 - .article-body td { @apply border border-spot-divider px-3 py-2 text-spot-body } 114 114 - .article-body hr { @apply border-spot-divider my-6 } 115 115 - .article-body iframe, .article-body video { @apply rounded-lg my-4 max-w-full } 116 116 - .article-body iframe[src*="youtube.com"], .article-body iframe[src*="youtube-nocookie.com"], .article-body iframe[src*="vimeo.com"], .article-body iframe[src*="spotify.com"], .article-body iframe[src*="soundcloud.com"], .article-body iframe[src*="bandcamp.com"] { @apply w-full aspect-video } 117 117 - .article-body del { @apply line-through text-spot-secondary } 118 118 - .article-body mark { @apply bg-spot-orange/30 px-1 rounded } 119 119 - } 120 120 - </style> 13 13 + <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> 121 14 <link rel="preconnect" href="https://fonts.googleapis.com"> 122 15 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 123 123 - <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> 124 124 - <style> 125 125 - body { font-family: 'Inter', 'Helvetica Neue', helvetica, arial, sans-serif; } 126 126 - .sidebar-link { transition: color 0.15s; } 127 127 - .sidebar-link:hover { color: var(--spot-text); } 128 128 - .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } 129 129 - ::-webkit-scrollbar { width: 8px; } 130 130 - ::-webkit-scrollbar-track { background: var(--spot-bg); } 131 131 - ::-webkit-scrollbar-thumb { background: var(--spot-muted); border-radius: 4px; } 132 132 - ::-webkit-scrollbar-thumb:hover { background: var(--spot-outline); } 133 133 - </style> 16 16 + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> 134 17 </head> 135 18 <body class="bg-spot-bg text-spot-text min-h-screen flex"> 136 19 {{if .User}} 137 20 <aside class="hidden lg:flex flex-col w-60 bg-spot-bg h-screen fixed left-0 top-0 px-3 py-4 z-20"> 138 138 - <a href="/" class="text-spot-purple font-bold text-xl font-title tracking-tight mb-8 px-3">Glean</a> 21 21 + <a href="/" class="text-spot-green font-bold text-xl font-title tracking-tight mb-8 px-3 flex items-center gap-2"> 22 22 + <svg class="w-7 h-7" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 23 23 + <rect width="32" height="32" rx="8" fill="#00754A"/> 24 24 + <path d="M16 8 L16 22" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/> 25 25 + <path d="M16 11 Q11 9 9 13" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 26 26 + <path d="M16 11 Q21 9 23 13" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 27 27 + <path d="M16 15 Q10 13 8 18" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 28 28 + <path d="M16 15 Q22 13 24 18" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 29 29 + <circle cx="16" cy="24" r="1.5" fill="#fff"/> 30 30 + </svg> 31 31 + Glean 32 32 + </a> 139 33 <nav class="flex flex-col gap-1 text-sm"> 140 34 <a href="/dashboard" class="sidebar-link flex items-center gap-3 px-3 py-2 rounded-md {{activeClass .ActivePath "/dashboard"}}"> 141 35 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1"/></svg> ··· 207 101 <main id="main-content" class="{{if .User}}lg:ml-60 pb-20 lg:pb-0{{end}} flex-1 min-h-screen flex flex-col"> 208 102 {{if .User}} 209 103 <div class="lg:hidden bg-spot-surface border-b border-spot-divider px-4 py-3 flex items-center justify-between sticky top-0 z-20"> 210 210 - <a href="/" class="text-spot-purple font-bold text-lg font-title">Glean</a> 104 104 + <a href="/" class="text-spot-green font-bold text-lg font-title">Glean</a> 211 105 <a href="/profile/{{.User.DID}}" class="flex items-center gap-2"> 212 106 {{if .User.AvatarURL.Valid}}<img src="{{.User.AvatarURL.String}}" class="w-7 h-7 rounded-full">{{end}} 213 107 <span class="text-xs text-spot-secondary">@{{.User.Handle}}</span> 214 108 </a> 215 109 </div> 216 110 {{end}} 217 217 - <div class="max-w-6xl mx-auto px-4 lg:px-8 py-6 flex-1"> 111 111 + <div class="{{if not .User}}w-full{{else}}max-w-6xl mx-auto px-4 lg:px-8 py-6{{end}} flex-1"> 218 112 {{.Content}} 219 113 </div> 220 114 <footer class="mt-auto"> ··· 222 116 <div class="max-w-6xl mx-auto px-4 lg:px-8 py-8"> 223 117 <div class="hidden md:grid md:grid-cols-[auto_1fr_auto] md:gap-12 md:items-start"> 224 118 <div> 225 225 - <a href="/" class="text-spot-purple font-bold text-lg font-title tracking-tight">Glean</a> 119 119 + <a href="/" class="text-spot-green font-bold text-lg font-title tracking-tight">Glean</a> 226 120 <p class="text-xs text-spot-secondary mt-1 max-w-[200px]">A social RSS reader<br>on the AT Protocol.</p> 227 121 </div> 228 122 <div class="grid grid-cols-3 gap-8"> ··· 273 167 </div> 274 168 275 169 <div class="md:hidden flex flex-col gap-6"> 276 276 - <a href="/" class="text-spot-purple font-bold text-lg font-title tracking-tight">Glean</a> 170 170 + <a href="/" class="text-spot-green font-bold text-lg font-title tracking-tight">Glean</a> 277 171 <div class="grid grid-cols-2 gap-6"> 278 172 <div class="flex flex-col gap-1.5"> 279 173 <div class="text-spot-text font-bold text-xs uppercase tracking-wide mb-1">Browse</div>

+7 -7

internal/tmpl/dashboard.html

reviewed

··· 19 19 20 20 {{if .Articles}} 21 21 <div class="mt-4 text-center"> 22 22 - <a href="/articles" class="text-sm text-spot-secondary hover:text-spot-purple transition">View all articles &rarr;</a> 22 22 + <a href="/articles" class="text-sm text-spot-secondary hover:text-spot-green transition">View all articles &rarr;</a> 23 23 </div> 24 24 {{end}} 25 25 </div> ··· 29 29 <div> 30 30 <div class="flex items-center justify-between mb-4"> 31 31 <h2 class="text-lg font-semibold text-spot-text">Trending</h2> 32 32 - <a href="/trending" class="text-xs text-spot-secondary hover:text-spot-purple uppercase tracking-button transition">See all</a> 32 32 + <a href="/trending" class="text-xs text-spot-secondary hover:text-spot-green uppercase tracking-button transition">See all</a> 33 33 </div> 34 34 <div class="space-y-3"> 35 35 {{range .Trending}} ··· 53 53 <div> 54 54 <div class="flex items-center justify-between mb-4"> 55 55 <h2 class="text-lg font-semibold text-spot-text">Similar readers</h2> 56 56 - <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-purple uppercase tracking-button transition">See all</a> 56 56 + <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-green uppercase tracking-button transition">See all</a> 57 57 </div> 58 58 <div class="space-y-3"> 59 59 {{range .PeopleRecommendations}} 60 60 <div class="bg-spot-surface rounded-lg p-4 flex items-center gap-3 hover:bg-spot-hover-50 transition"> 61 61 {{if .avatar_url}}<img src="{{.avatar_url}}" class="w-10 h-10 rounded-full">{{end}} 62 62 <div class="min-w-0 flex-1"> 63 63 - <a href="/profile/{{.handle}}" class="font-bold text-spot-text hover:text-spot-purple transition">@{{.handle}}</a> 63 63 + <a href="/profile/{{.handle}}" class="font-bold text-spot-text hover:text-spot-green transition">@{{.handle}}</a> 64 64 {{if .display_name}}<div class="text-sm text-spot-secondary">{{.display_name}}</div>{{end}} 65 65 </div> 66 66 <span class="text-xs text-spot-secondary">{{.common_feeds}} shared</span> ··· 74 74 <div> 75 75 <div class="flex items-center justify-between mb-4"> 76 76 <h2 class="text-lg font-semibold text-spot-text">Recommended feeds</h2> 77 77 - <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-purple uppercase tracking-button transition">See all</a> 77 77 + <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-green uppercase tracking-button transition">See all</a> 78 78 </div> 79 79 <div class="space-y-3"> 80 80 {{range .FeedRecommendations}} ··· 89 89 <form hx-post="/feeds/add" hx-target="#feed-list" hx-swap="beforeend" class="flex gap-2"> 90 90 {{csrfInput .CSRFToken}} 91 91 <input type="url" name="feed_url" placeholder="Feed URL" 92 92 - class="flex-1 bg-spot-hover text-spot-text rounded-pill px-5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-purple placeholder:text-spot-placeholder" 92 92 + class="flex-1 bg-spot-hover text-spot-text rounded-pill px-5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-placeholder" 93 93 required> 94 94 - <button type="submit" class="bg-spot-purple text-spot-bg rounded-pill px-5 py-2 text-sm font-bold uppercase tracking-button hover:brightness-110 transition">Add</button> 94 94 + <button type="submit" class="bg-spot-green text-spot-bg rounded-pill px-5 py-2 text-sm font-bold uppercase tracking-button hover:brightness-110 transition">Add</button> 95 95 </form> 96 96 </div> 97 97 </div>

+2 -2

internal/tmpl/discover.html

reviewed

··· 41 41 <div class="bg-spot-surface rounded-lg p-4 flex items-center gap-3 hover:bg-spot-hover-50 transition"> 42 42 {{if .avatar_url}}<img src="{{.avatar_url}}" class="w-10 h-10 rounded-full">{{end}} 43 43 <div class="min-w-0 flex-1"> 44 44 - <a href="/profile/{{.handle}}" class="font-bold text-spot-text hover:text-spot-purple transition">@{{.handle}}</a> 44 44 + <a href="/profile/{{.handle}}" class="font-bold text-spot-text hover:text-spot-green transition">@{{.handle}}</a> 45 45 {{if .display_name}}<div class="text-sm text-spot-secondary">{{.display_name}}</div>{{end}} 46 46 </div> 47 47 <span class="text-xs text-spot-secondary">{{.common_feeds}} shared feeds</span> ··· 65 65 <div class="flex items-center gap-3 shrink-0"> 66 66 <span class="text-xs text-spot-secondary">{{.SubscriberCount}} subscribers</span> 67 67 <button hx-post="/feeds" hx-vals='{"feed_url": "{{.FeedURL}}"}' hx-target="this" hx-swap="outerHTML" 68 68 - class="text-xs bg-spot-purple/20 text-spot-purple px-4 py-1.5 rounded-pill font-bold uppercase tracking-button hover:bg-spot-purple hover:text-spot-bg transition">Subscribe</button> 68 68 + class="text-xs bg-spot-green/20 text-spot-green px-4 py-1.5 rounded-pill font-bold uppercase tracking-button hover:bg-spot-green hover:text-spot-bg transition">Subscribe</button> 69 69 </div> 70 70 </div> 71 71 {{else}}

+8 -8

internal/tmpl/feeds.html

reviewed

··· 47 47 {{if .Category.Valid}}<span class="text-xs text-spot-secondary">{{.Category.String}}</span>{{end}} 48 48 </div> 49 49 <div class="flex items-center gap-3"> 50 50 - {{if .UnreadCount}}<span class="text-xs bg-spot-purple/20 text-spot-purple px-2.5 py-0.5 rounded-full font-bold">{{.UnreadCount}}</span>{{end}} 50 50 + {{if .UnreadCount}}<span class="text-xs bg-spot-green/20 text-spot-green px-2.5 py-0.5 rounded-full font-bold">{{.UnreadCount}}</span>{{end}} 51 51 <form hx-post="/feeds/set-interval" hx-swap="none" hx-vals='{"feed_url": "{{.FeedURL}}"}' class="inline-flex items-center gap-1"> 52 52 {{csrfInput $.CSRFToken}} 53 53 <input type="hidden" name="feed_url" value="{{.FeedURL}}"> 54 54 <select name="interval" onchange="this.form.submit()" 55 55 - class="text-xs bg-spot-hover text-spot-secondary rounded px-2 py-1 border-none focus:outline-none focus:ring-1 focus:ring-spot-purple"> 55 55 + class="text-xs bg-spot-hover text-spot-secondary rounded px-2 py-1 border-none focus:outline-none focus:ring-1 focus:ring-spot-green"> 56 56 <option value="15" {{if eq .FetchInterval 15}}selected{{end}}>15m</option> 57 57 <option value="30" {{if eq .FetchInterval 30}}selected{{end}}>30m</option> 58 58 <option value="60" {{if eq .FetchInterval 60}}selected{{end}}>1h</option> ··· 81 81 <form hx-post="/feeds/add" hx-target="#feed-list" hx-swap="beforeend" class="space-y-3"> 82 82 {{csrfInput .CSRFToken}} 83 83 <input type="url" name="feed_url" placeholder="https://example.com/feed.xml" 84 84 - class="w-full bg-spot-hover text-spot-text rounded-pill px-5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-purple placeholder:text-spot-placeholder" 84 84 + class="w-full bg-spot-hover text-spot-text rounded-pill px-5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-placeholder" 85 85 required> 86 86 <input type="text" name="category" placeholder="Category (optional)" 87 87 - class="w-full bg-spot-hover text-spot-text rounded-pill px-5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-purple placeholder:text-spot-placeholder"> 88 88 - <button type="submit" class="w-full bg-spot-purple text-spot-bg rounded-pill px-5 py-2 text-sm font-bold uppercase tracking-button hover:brightness-110 transition">Add</button> 87 87 + class="w-full bg-spot-hover text-spot-text rounded-pill px-5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-placeholder"> 88 88 + <button type="submit" class="w-full bg-spot-green text-spot-bg rounded-pill px-5 py-2 text-sm font-bold uppercase tracking-button hover:brightness-110 transition">Add</button> 89 89 </form> 90 90 <form hx-post="/feeds/opml/upload" hx-encoding="multipart/form-data" class="flex flex-col gap-2"> 91 91 {{csrfInput .CSRFToken}} ··· 99 99 <div> 100 100 <div class="flex items-center justify-between mb-4"> 101 101 <h2 class="text-sm font-bold text-spot-text uppercase tracking-wide">Recommended feeds</h2> 102 102 - <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-purple uppercase tracking-button transition">See all</a> 102 102 + <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-green uppercase tracking-button transition">See all</a> 103 103 </div> 104 104 <div class="space-y-3"> 105 105 {{range .FeedRecommendations}} ··· 113 113 <div> 114 114 <div class="flex items-center justify-between mb-4"> 115 115 <h2 class="text-sm font-bold text-spot-text uppercase tracking-wide">Similar readers</h2> 116 116 - <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-purple uppercase tracking-button transition">See all</a> 116 116 + <a href="/discover" class="text-xs text-spot-secondary hover:text-spot-green uppercase tracking-button transition">See all</a> 117 117 </div> 118 118 <div class="space-y-3"> 119 119 {{range .PeopleRecommendations}} 120 120 <div class="bg-spot-surface rounded-lg p-4 flex items-center gap-3 hover:bg-spot-hover-50 transition"> 121 121 {{if .avatar_url}}<img src="{{.avatar_url}}" class="w-10 h-10 rounded-full">{{end}} 122 122 <div class="min-w-0 flex-1"> 123 123 - <a href="/profile/{{.handle}}" class="font-bold text-spot-text hover:text-spot-purple transition">@{{.handle}}</a> 123 123 + <a href="/profile/{{.handle}}" class="font-bold text-spot-text hover:text-spot-green transition">@{{.handle}}</a> 124 124 {{if .display_name}}<div class="text-sm text-spot-secondary">{{.display_name}}</div>{{end}} 125 125 </div> 126 126 <span class="text-xs text-spot-secondary">{{.common_feeds}} shared</span>

+167 -25

internal/tmpl/index.html

reviewed

··· 1 1 {{define "index.html"}} 2 2 - <div class="max-w-2xl mx-auto mt-20 lg:mt-32 text-center"> 3 3 - <h1 class="text-5xl font-bold font-title mb-6 text-spot-text">Glean</h1> 4 4 - <p class="text-lg text-spot-secondary mb-10 max-w-lg mx-auto leading-relaxed">A social RSS reader. Follow feeds, share what you read, discover new sources through your network.</p> 5 5 - <div class="flex flex-col sm:flex-row justify-center gap-3"> 6 6 - <a href="/auth/login" class="bg-spot-purple text-spot-bg rounded-pill px-8 py-3 text-sm font-bold uppercase tracking-button hover:brightness-110 transition inline-flex items-center gap-2"> 7 7 - Sign in 8 8 - </a> 9 9 - <a href="/trending" class="border border-spot-outline text-spot-text rounded-pill px-8 py-3 text-sm font-bold uppercase tracking-button hover:border-spot-text transition">Browse trending</a> 2 2 + <style> 3 3 + .landing-hero { padding-top: 6rem; padding-bottom: 4rem; } 4 4 + .landing-feed { display: flex; flex-direction: column; gap: 1px; } 5 5 + .landing-item { transition: background 0.15s; } 6 6 + .landing-item:hover { background: var(--spot-hover); } 7 7 + .feed-line { height: 10px; border-radius: 5px; } 8 8 + .feed-line-short { width: 40%; } 9 9 + .feed-line-medium { width: 65%; } 10 10 + .feed-dot { width: 8px; height: 8px; border-radius: 50%; } 11 11 + @media (min-width: 768px) { .landing-hero { padding-top: 8rem; padding-bottom: 6rem; } } 12 12 + </style> 13 13 + 14 14 + <section class="landing-hero"> 15 15 + <div class="max-w-6xl mx-auto px-6"> 16 16 + <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center"> 17 17 + <div> 18 18 + <div class="flex items-center gap-3 mb-8"> 19 19 + <svg class="w-10 h-10" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 20 20 + <rect width="32" height="32" rx="8" fill="#00754A"/> 21 21 + <path d="M16 8 L16 22" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/> 22 22 + <path d="M16 11 Q11 9 9 13" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 23 23 + <path d="M16 11 Q21 9 23 13" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 24 24 + <path d="M16 15 Q10 13 8 18" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 25 25 + <path d="M16 15 Q22 13 24 18" stroke="#fff" stroke-width="1.8" stroke-linecap="round" fill="none"/> 26 26 + <circle cx="16" cy="24" r="1.5" fill="#fff"/> 27 27 + </svg> 28 28 + <span class="font-bold text-xl text-spot-text" style="letter-spacing: -0.02em;">Glean</span> 29 29 + </div> 30 30 + <h1 class="text-3xl md:text-5xl font-bold mb-6 leading-[1.1] text-spot-text" style="letter-spacing: -0.03em;"> 31 31 + Your feeds,<br>your network,<br>your rules. 32 32 + </h1> 33 33 + <p class="text-lg text-spot-secondary mb-8 max-w-md leading-relaxed"> 34 34 + Follow RSS feeds from around the web. See what your network is reading. All tied to your AT Protocol identity. 35 35 + </p> 36 36 + <div class="flex flex-col sm:flex-row gap-3"> 37 37 + <a href="/auth/login" class="bg-spot-green text-white rounded-pill px-7 py-3 text-sm font-bold uppercase tracking-button hover:brightness-110 transition active:scale-95 inline-flex items-center justify-center gap-2"> 38 38 + Sign in 39 39 + </a> 40 40 + <a href="/trending" class="border border-spot-outline text-spot-text rounded-pill px-7 py-3 text-sm font-bold uppercase tracking-button hover:border-spot-text transition active:scale-95"> 41 41 + See what's trending 42 42 + </a> 43 43 + </div> 44 44 + </div> 45 45 + 46 46 + <div class="hidden lg:block"> 47 47 + <div class="bg-spot-surface rounded-xl shadow-spot overflow-hidden"> 48 48 + <div class="px-5 py-3 border-b border-spot-divider flex items-center gap-2"> 49 49 + <div class="feed-dot bg-spot-red/60"></div> 50 50 + <div class="feed-dot bg-spot-orange/60"></div> 51 51 + <div class="feed-dot bg-spot-green/60"></div> 52 52 + <span class="text-xs text-spot-muted ml-3">Dashboard</span> 53 53 + </div> 54 54 + <div class="landing-feed p-4"> 55 55 + <div class="landing-item rounded-lg px-4 py-3 flex items-start gap-3"> 56 56 + <div class="w-8 h-8 rounded-full bg-spot-green/20 shrink-0 mt-0.5 flex items-center justify-center"> 57 57 + <svg class="w-4 h-4 text-spot-green" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z"/><path d="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1z"/></svg> 58 58 + </div> 59 59 + <div class="flex-1 min-w-0"> 60 60 + <div class="feed-line bg-spot-text/80 mb-2" style="width:70%"></div> 61 61 + <div class="feed-line bg-spot-secondary/40 feed-line-short"></div> 62 62 + </div> 63 63 + <div class="flex items-center gap-1 text-spot-green shrink-0"> 64 64 + <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg> 65 65 + <span class="text-xs">12</span> 66 66 + </div> 67 67 + </div> 68 68 + <div class="landing-item rounded-lg px-4 py-3 flex items-start gap-3"> 69 69 + <div class="w-8 h-8 rounded-full bg-spot-blue/20 shrink-0 mt-0.5 flex items-center justify-center"> 70 70 + <svg class="w-4 h-4 text-spot-blue" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5z"/></svg> 71 71 + </div> 72 72 + <div class="flex-1 min-w-0"> 73 73 + <div class="feed-line bg-spot-text/80 mb-2" style="width:55%"></div> 74 74 + <div class="feed-line bg-spot-secondary/40" style="width:80%"></div> 75 75 + </div> 76 76 + </div> 77 77 + <div class="landing-item rounded-lg px-4 py-3 flex items-start gap-3"> 78 78 + <div class="w-8 h-8 rounded-full bg-spot-orange/20 shrink-0 mt-0.5 flex items-center justify-center"> 79 79 + <svg class="w-4 h-4 text-spot-orange" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"/></svg> 80 80 + </div> 81 81 + <div class="flex-1 min-w-0"> 82 82 + <div class="feed-line bg-spot-text/80 mb-2" style="width:45%"></div> 83 83 + <div class="feed-line bg-spot-secondary/40 feed-line-medium"></div> 84 84 + </div> 85 85 + <div class="flex items-center gap-1 text-spot-secondary shrink-0"> 86 86 + <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg> 87 87 + <span class="text-xs">3</span> 88 88 + </div> 89 89 + </div> 90 90 + <div class="landing-item rounded-lg px-4 py-3 flex items-start gap-3"> 91 91 + <div class="w-8 h-8 rounded-full bg-spot-green/20 shrink-0 mt-0.5 flex items-center justify-center"> 92 92 + <svg class="w-4 h-4 text-spot-green" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z"/></svg> 93 93 + </div> 94 94 + <div class="flex-1 min-w-0"> 95 95 + <div class="feed-line bg-spot-text/80 mb-2" style="width:60%"></div> 96 96 + <div class="feed-line bg-spot-secondary/40 feed-line-short"></div> 97 97 + </div> 98 98 + </div> 99 99 + </div> 100 100 + <div class="px-5 py-3 border-t border-spot-divider flex items-center justify-between"> 101 101 + <div class="flex items-center gap-2 text-xs text-spot-muted"> 102 102 + <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg> 103 103 + 4 trending in your network 104 104 + </div> 105 105 + <span class="text-xs text-spot-green font-bold">42 unread</span> 106 106 + </div> 107 107 + </div> 108 108 + </div> 109 109 + </div> 10 110 </div> 11 11 - <div class="mt-24 grid grid-cols-1 sm:grid-cols-3 gap-4 text-left"> 12 12 - <div class="bg-spot-surface hover:bg-spot-hover rounded-lg p-6 transition shadow-spot"> 13 13 - <div class="text-spot-purple text-2xl mb-3"> 14 14 - <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-7-1a1 1 0 11-2 0 1 1 0 012 0z"/></svg> 111 111 + </section> 112 112 + 113 113 + <section class="max-w-6xl mx-auto px-6 py-16"> 114 114 + <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"> 115 115 + <div> 116 116 + <div class="flex items-center gap-2 mb-3"> 117 117 + <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-7-1a1 1 0 11-2 0 1 1 0 012 0z"/></svg> 118 118 + <h3 class="font-bold text-spot-text">Subscribe</h3> 15 119 </div> 16 16 - <h3 class="font-bold text-spot-text mb-1">Follow any feed</h3> 17 17 - <p class="text-sm text-spot-secondary">Subscribe to RSS and Atom feeds. Organize with categories. Import via OPML.</p> 120 120 + <p class="text-sm text-spot-secondary leading-relaxed">Add any RSS or Atom feed. Import your existing subscriptions from another reader via OPML. Group feeds by category.</p> 18 121 </div> 19 19 - <div class="bg-spot-surface hover:bg-spot-hover rounded-lg p-6 transition shadow-spot"> 20 20 - <div class="text-spot-purple text-2xl mb-3"> 21 21 - <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg> 122 122 + <div> 123 123 + <div class="flex items-center gap-2 mb-3"> 124 124 + <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg> 125 125 + <h3 class="font-bold text-spot-text">Connect</h3> 22 126 </div> 23 23 - <h3 class="font-bold text-spot-text mb-1">Read together</h3> 24 24 - <p class="text-sm text-spot-secondary">See what your network reads. Like and annotate articles. Share discoveries.</p> 127 127 + <p class="text-sm text-spot-secondary leading-relaxed">Follow people on the AT Protocol. See what they read and share. Get recommendations from readers with similar tastes.</p> 25 128 </div> 26 26 - <div class="bg-spot-surface hover:bg-spot-hover rounded-lg p-6 transition shadow-spot"> 27 27 - <div class="text-spot-purple text-2xl mb-3"> 28 28 - <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> 129 129 + <div> 130 130 + <div class="flex items-center gap-2 mb-3"> 131 131 + <svg class="w-5 h-5 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg> 132 132 + <h3 class="font-bold text-spot-text">Annotate</h3> 29 133 </div> 30 30 - <h3 class="font-bold text-spot-text mb-1">Find new sources</h3> 31 31 - <p class="text-sm text-spot-secondary">Get recommendations based on your reading. Find people with similar tastes.</p> 134 134 + <p class="text-sm text-spot-secondary leading-relaxed">Leave notes on any article. Quote passages that matter. Keep private annotations or share them with your network.</p> 32 135 </div> 33 136 </div> 34 34 - </div> 137 137 + </section> 138 138 + 139 139 + <section class="bg-spot-green-house"> 140 140 + <div class="max-w-6xl mx-auto px-6 py-16"> 141 141 + <div class="max-w-2xl"> 142 142 + <h2 class="text-2xl md:text-3xl font-bold text-white mb-4" style="letter-spacing: -0.02em;">Owned by you, not by us.</h2> 143 143 + <p class="text-[rgba(255,255,255,0.70)] leading-relaxed mb-8"> 144 144 + Glean stores subscriptions, annotations, and your social graph in your personal data repository on the AT Protocol. Bring your own PDS. Take your data anywhere. No lock-in, no ads, no tracking. 145 145 + </p> 146 146 + <div class="flex flex-wrap gap-x-8 gap-y-4 text-sm"> 147 147 + <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]"> 148 148 + <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 149 149 + AT Protocol identity 150 150 + </div> 151 151 + <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]"> 152 152 + <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 153 153 + Portable data 154 154 + </div> 155 155 + <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]"> 156 156 + <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 157 157 + Open source 158 158 + </div> 159 159 + <div class="flex items-center gap-2 text-[rgba(255,255,255,0.70)]"> 160 160 + <svg class="w-4 h-4 text-spot-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 161 161 + Self-hostable 162 162 + </div> 163 163 + </div> 164 164 + </div> 165 165 + </div> 166 166 + </section> 167 167 + 168 168 + <section class="py-16 text-center"> 169 169 + <div class="max-w-md mx-auto px-6"> 170 170 + <h2 class="text-2xl font-bold text-spot-text mb-3" style="letter-spacing: -0.02em;">Start reading</h2> 171 171 + <p class="text-spot-secondary mb-6 text-sm leading-relaxed">Sign in with your Bluesky handle or any AT Protocol account. Your feeds are waiting.</p> 172 172 + <a href="/auth/login" class="bg-spot-green text-white rounded-pill px-8 py-3 text-sm font-bold uppercase tracking-button hover:brightness-110 transition active:scale-95 inline-flex items-center justify-center gap-2"> 173 173 + Get started 174 174 + </a> 175 175 + </div> 176 176 + </section> 35 177 {{end}}

+1 -1

internal/tmpl/login.html

reviewed

··· 7 7 <form action="/auth/start" method="POST" id="login-form"> 8 8 {{csrfInput .CSRFToken}} 9 9 <input type="text" name="handle" placeholder="you.bsky.social" 10 10 - class="w-full bg-spot-hover text-spot-text rounded-pill px-5 py-3 mb-5 text-sm focus:outline-none focus:ring-2 focus:ring-spot-purple placeholder:text-spot-placeholder" 10 10 + class="w-full bg-spot-hover text-spot-text rounded-pill px-5 py-3 mb-5 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-placeholder" 11 11 required> 12 12 </form> 13 13

+2 -2

internal/tmpl/partials/annotation-card.html

reviewed

··· 1 1 {{define "annotation-card.html"}} 2 2 <div class="bg-spot-surface rounded-lg p-4"> 3 3 {{if .Quote.Valid}} 4 4 - <blockquote class="border-l-2 border-spot-purple pl-3 text-sm text-spot-body italic">{{.Quote.String}}</blockquote> 4 4 + <blockquote class="border-l-2 border-spot-green pl-3 text-sm text-spot-body italic">{{.Quote.String}}</blockquote> 5 5 {{end}} 6 6 {{if .Note.Valid}} 7 7 <p class="text-sm text-spot-body mt-2">{{.Note.String}}</p> ··· 15 15 <div class="text-sm text-spot-orange mt-1">{{repeat "&#9733;" (int .Rating.Int64)}}</div> 16 16 {{end}} 17 17 <div class="text-xs text-spot-muted mt-2"> 18 18 - <a href="/profile/{{.AuthorDID}}" class="hover:text-spot-purple transition">{{.AuthorHandle}}</a> 18 18 + <a href="/profile/{{.AuthorDID}}" class="hover:text-spot-green transition">{{.AuthorHandle}}</a> 19 19 {{if .CreatedAt.Valid}}<span class="ml-2">{{.CreatedAt.Time.Format "Jan 2, 2006 15:04"}}</span>{{end}} 20 20 </div> 21 21 </div>

+1 -1

internal/tmpl/partials/article-card.html

reviewed

··· 2 2 <article data-article-id="{{.ID}}" class="bg-spot-surface rounded-lg px-5 py-4 hover:bg-spot-hover-50 transition shadow-spot"> 3 3 <div class="flex items-start justify-between gap-4"> 4 4 <div class="min-w-0 flex-1"> 5 5 - <a href="/articles/{{.ID}}" class="font-bold text-spot-text hover:text-spot-purple transition text-lg leading-tight">{{.Title}}</a> 5 5 + <a href="/articles/{{.ID}}" class="font-bold text-spot-text hover:text-spot-green transition text-lg leading-tight">{{.Title}}</a> 6 6 <div class="text-sm text-spot-secondary mt-1 flex items-center gap-2"> 7 7 {{if .Author.Valid}}{{if .Author.String}}<span>{{.Author.String}}</span>{{end}}{{end}} 8 8 {{if .Published.Valid}}<span>{{.Published.Time.Format "Jan 2, 2006 15:04"}}</span>{{end}}

+1 -1

internal/tmpl/partials/article-list.html

reviewed

··· 3 3 <article class="bg-spot-surface rounded-lg px-5 py-4 hover:bg-spot-hover-50 transition shadow-spot"> 4 4 <div class="flex items-start justify-between gap-4"> 5 5 <div class="min-w-0 flex-1"> 6 6 - <a href="/articles/{{.ID}}" class="font-bold text-spot-text hover:text-spot-purple transition text-lg leading-tight">{{.Title}}</a> 6 6 + <a href="/articles/{{.ID}}" class="font-bold text-spot-text hover:text-spot-green transition text-lg leading-tight">{{.Title}}</a> 7 7 <div class="text-sm text-spot-secondary mt-1 flex items-center gap-2"> 8 8 {{if .Author.Valid}}{{if .Author.String}}<span>{{.Author.String}}</span>{{end}}{{end}} 9 9 {{if .Published.Valid}}<span>{{.Published.Time.Format "Jan 2, 2006 15:04"}}</span>{{end}}

+1 -1

internal/tmpl/partials/profile-card.html

reviewed

··· 1 1 {{define "profile-card.html"}} 2 2 <div class="bg-spot-surface rounded-lg p-4 flex items-center gap-3 hover:bg-spot-hover-50 transition"> 3 3 <div class="min-w-0 flex-1"> 4 4 - <a href="/profile/{{.did}}" class="font-bold text-spot-text hover:text-spot-purple transition">@{{.handle}}</a> 4 4 + <a href="/profile/{{.did}}" class="font-bold text-spot-text hover:text-spot-green transition">@{{.handle}}</a> 5 5 {{if .display_name}}<div class="text-sm text-spot-secondary">{{.display_name}}</div>{{end}} 6 6 </div> 7 7 <span class="text-xs text-spot-secondary">{{.common_feeds}} shared feeds</span>

+1 -1

internal/tmpl/trending.html

reviewed

··· 9 9 <article class="bg-spot-surface rounded-lg px-5 py-4 hover:bg-spot-hover-50 transition shadow-spot"> 10 10 <div class="flex items-start justify-between gap-4"> 11 11 <div class="min-w-0 flex-1"> 12 12 - <a href="/articles/{{$t.ArticleID}}" class="font-bold text-spot-text hover:text-spot-purple transition text-lg leading-tight">{{$t.Title}}</a> 12 12 + <a href="/articles/{{$t.ArticleID}}" class="font-bold text-spot-text hover:text-spot-green transition text-lg leading-tight">{{$t.Title}}</a> 13 13 <div class="text-sm text-spot-secondary mt-1 flex items-center gap-2"> 14 14 {{if $t.Author}}<span>{{$t.Author}}</span>{{end}} 15 15 <span class="text-spot-muted">{{if $t.FeedTitle}}{{$t.FeedTitle}}{{else}}{{$t.FeedURL}}{{end}}</span>

+986

package-lock.json

reviewed

··· 1 1 + { 2 2 + "name": "glean", 3 3 + "lockfileVersion": 3, 4 4 + "requires": true, 5 5 + "packages": { 6 6 + "": { 7 7 + "dependencies": { 8 8 + "tailwindcss": "^3.4.19" 9 9 + } 10 10 + }, 11 11 + "node_modules/@alloc/quick-lru": { 12 12 + "version": "5.2.0", 13 13 + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", 14 14 + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", 15 15 + "license": "MIT", 16 16 + "engines": { 17 17 + "node": ">=10" 18 18 + }, 19 19 + "funding": { 20 20 + "url": "https://github.com/sponsors/sindresorhus" 21 21 + } 22 22 + }, 23 23 + "node_modules/@jridgewell/gen-mapping": { 24 24 + "version": "0.3.13", 25 25 + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", 26 26 + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", 27 27 + "license": "MIT", 28 28 + "dependencies": { 29 29 + "@jridgewell/sourcemap-codec": "^1.5.0", 30 30 + "@jridgewell/trace-mapping": "^0.3.24" 31 31 + } 32 32 + }, 33 33 + "node_modules/@jridgewell/resolve-uri": { 34 34 + "version": "3.1.2", 35 35 + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", 36 36 + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", 37 37 + "license": "MIT", 38 38 + "engines": { 39 39 + "node": ">=6.0.0" 40 40 + } 41 41 + }, 42 42 + "node_modules/@jridgewell/sourcemap-codec": { 43 43 + "version": "1.5.5", 44 44 + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", 45 45 + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", 46 46 + "license": "MIT" 47 47 + }, 48 48 + "node_modules/@jridgewell/trace-mapping": { 49 49 + "version": "0.3.31", 50 50 + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", 51 51 + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", 52 52 + "license": "MIT", 53 53 + "dependencies": { 54 54 + "@jridgewell/resolve-uri": "^3.1.0", 55 55 + "@jridgewell/sourcemap-codec": "^1.4.14" 56 56 + } 57 57 + }, 58 58 + "node_modules/@nodelib/fs.scandir": { 59 59 + "version": "2.1.5", 60 60 + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", 61 61 + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", 62 62 + "license": "MIT", 63 63 + "dependencies": { 64 64 + "@nodelib/fs.stat": "2.0.5", 65 65 + "run-parallel": "^1.1.9" 66 66 + }, 67 67 + "engines": { 68 68 + "node": ">= 8" 69 69 + } 70 70 + }, 71 71 + "node_modules/@nodelib/fs.stat": { 72 72 + "version": "2.0.5", 73 73 + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", 74 74 + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", 75 75 + "license": "MIT", 76 76 + "engines": { 77 77 + "node": ">= 8" 78 78 + } 79 79 + }, 80 80 + "node_modules/@nodelib/fs.walk": { 81 81 + "version": "1.2.8", 82 82 + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", 83 83 + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", 84 84 + "license": "MIT", 85 85 + "dependencies": { 86 86 + "@nodelib/fs.scandir": "2.1.5", 87 87 + "fastq": "^1.6.0" 88 88 + }, 89 89 + "engines": { 90 90 + "node": ">= 8" 91 91 + } 92 92 + }, 93 93 + "node_modules/any-promise": { 94 94 + "version": "1.3.0", 95 95 + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", 96 96 + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", 97 97 + "license": "MIT" 98 98 + }, 99 99 + "node_modules/anymatch": { 100 100 + "version": "3.1.3", 101 101 + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", 102 102 + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", 103 103 + "license": "ISC", 104 104 + "dependencies": { 105 105 + "normalize-path": "^3.0.0", 106 106 + "picomatch": "^2.0.4" 107 107 + }, 108 108 + "engines": { 109 109 + "node": ">= 8" 110 110 + } 111 111 + }, 112 112 + "node_modules/anymatch/node_modules/picomatch": { 113 113 + "version": "2.3.2", 114 114 + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", 115 115 + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", 116 116 + "license": "MIT", 117 117 + "engines": { 118 118 + "node": ">=8.6" 119 119 + }, 120 120 + "funding": { 121 121 + "url": "https://github.com/sponsors/jonschlinkert" 122 122 + } 123 123 + }, 124 124 + "node_modules/arg": { 125 125 + "version": "5.0.2", 126 126 + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", 127 127 + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", 128 128 + "license": "MIT" 129 129 + }, 130 130 + "node_modules/binary-extensions": { 131 131 + "version": "2.3.0", 132 132 + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", 133 133 + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", 134 134 + "license": "MIT", 135 135 + "engines": { 136 136 + "node": ">=8" 137 137 + }, 138 138 + "funding": { 139 139 + "url": "https://github.com/sponsors/sindresorhus" 140 140 + } 141 141 + }, 142 142 + "node_modules/braces": { 143 143 + "version": "3.0.3", 144 144 + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", 145 145 + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", 146 146 + "license": "MIT", 147 147 + "dependencies": { 148 148 + "fill-range": "^7.1.1" 149 149 + }, 150 150 + "engines": { 151 151 + "node": ">=8" 152 152 + } 153 153 + }, 154 154 + "node_modules/camelcase-css": { 155 155 + "version": "2.0.1", 156 156 + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", 157 157 + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", 158 158 + "license": "MIT", 159 159 + "engines": { 160 160 + "node": ">= 6" 161 161 + } 162 162 + }, 163 163 + "node_modules/chokidar": { 164 164 + "version": "3.6.0", 165 165 + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", 166 166 + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", 167 167 + "license": "MIT", 168 168 + "dependencies": { 169 169 + "anymatch": "~3.1.2", 170 170 + "braces": "~3.0.2", 171 171 + "glob-parent": "~5.1.2", 172 172 + "is-binary-path": "~2.1.0", 173 173 + "is-glob": "~4.0.1", 174 174 + "normalize-path": "~3.0.0", 175 175 + "readdirp": "~3.6.0" 176 176 + }, 177 177 + "engines": { 178 178 + "node": ">= 8.10.0" 179 179 + }, 180 180 + "funding": { 181 181 + "url": "https://paulmillr.com/funding/" 182 182 + }, 183 183 + "optionalDependencies": { 184 184 + "fsevents": "~2.3.2" 185 185 + } 186 186 + }, 187 187 + "node_modules/chokidar/node_modules/glob-parent": { 188 188 + "version": "5.1.2", 189 189 + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 190 190 + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 191 191 + "license": "ISC", 192 192 + "dependencies": { 193 193 + "is-glob": "^4.0.1" 194 194 + }, 195 195 + "engines": { 196 196 + "node": ">= 6" 197 197 + } 198 198 + }, 199 199 + "node_modules/commander": { 200 200 + "version": "4.1.1", 201 201 + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", 202 202 + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", 203 203 + "license": "MIT", 204 204 + "engines": { 205 205 + "node": ">= 6" 206 206 + } 207 207 + }, 208 208 + "node_modules/cssesc": { 209 209 + "version": "3.0.0", 210 210 + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", 211 211 + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", 212 212 + "license": "MIT", 213 213 + "bin": { 214 214 + "cssesc": "bin/cssesc" 215 215 + }, 216 216 + "engines": { 217 217 + "node": ">=4" 218 218 + } 219 219 + }, 220 220 + "node_modules/didyoumean": { 221 221 + "version": "1.2.2", 222 222 + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", 223 223 + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", 224 224 + "license": "Apache-2.0" 225 225 + }, 226 226 + "node_modules/dlv": { 227 227 + "version": "1.1.3", 228 228 + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", 229 229 + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", 230 230 + "license": "MIT" 231 231 + }, 232 232 + "node_modules/es-errors": { 233 233 + "version": "1.3.0", 234 234 + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", 235 235 + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", 236 236 + "license": "MIT", 237 237 + "engines": { 238 238 + "node": ">= 0.4" 239 239 + } 240 240 + }, 241 241 + "node_modules/fast-glob": { 242 242 + "version": "3.3.3", 243 243 + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", 244 244 + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", 245 245 + "license": "MIT", 246 246 + "dependencies": { 247 247 + "@nodelib/fs.stat": "^2.0.2", 248 248 + "@nodelib/fs.walk": "^1.2.3", 249 249 + "glob-parent": "^5.1.2", 250 250 + "merge2": "^1.3.0", 251 251 + "micromatch": "^4.0.8" 252 252 + }, 253 253 + "engines": { 254 254 + "node": ">=8.6.0" 255 255 + } 256 256 + }, 257 257 + "node_modules/fast-glob/node_modules/glob-parent": { 258 258 + "version": "5.1.2", 259 259 + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 260 260 + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 261 261 + "license": "ISC", 262 262 + "dependencies": { 263 263 + "is-glob": "^4.0.1" 264 264 + }, 265 265 + "engines": { 266 266 + "node": ">= 6" 267 267 + } 268 268 + }, 269 269 + "node_modules/fastq": { 270 270 + "version": "1.20.1", 271 271 + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz", 272 272 + "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==", 273 273 + "license": "ISC", 274 274 + "dependencies": { 275 275 + "reusify": "^1.0.4" 276 276 + } 277 277 + }, 278 278 + "node_modules/fdir": { 279 279 + "version": "6.5.0", 280 280 + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", 281 281 + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", 282 282 + "license": "MIT", 283 283 + "engines": { 284 284 + "node": ">=12.0.0" 285 285 + }, 286 286 + "peerDependencies": { 287 287 + "picomatch": "^3 || ^4" 288 288 + }, 289 289 + "peerDependenciesMeta": { 290 290 + "picomatch": { 291 291 + "optional": true 292 292 + } 293 293 + } 294 294 + }, 295 295 + "node_modules/fill-range": { 296 296 + "version": "7.1.1", 297 297 + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", 298 298 + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", 299 299 + "license": "MIT", 300 300 + "dependencies": { 301 301 + "to-regex-range": "^5.0.1" 302 302 + }, 303 303 + "engines": { 304 304 + "node": ">=8" 305 305 + } 306 306 + }, 307 307 + "node_modules/fsevents": { 308 308 + "version": "2.3.3", 309 309 + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", 310 310 + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", 311 311 + "hasInstallScript": true, 312 312 + "license": "MIT", 313 313 + "optional": true, 314 314 + "os": [ 315 315 + "darwin" 316 316 + ], 317 317 + "engines": { 318 318 + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 319 319 + } 320 320 + }, 321 321 + "node_modules/function-bind": { 322 322 + "version": "1.1.2", 323 323 + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", 324 324 + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", 325 325 + "license": "MIT", 326 326 + "funding": { 327 327 + "url": "https://github.com/sponsors/ljharb" 328 328 + } 329 329 + }, 330 330 + "node_modules/glob-parent": { 331 331 + "version": "6.0.2", 332 332 + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", 333 333 + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", 334 334 + "license": "ISC", 335 335 + "dependencies": { 336 336 + "is-glob": "^4.0.3" 337 337 + }, 338 338 + "engines": { 339 339 + "node": ">=10.13.0" 340 340 + } 341 341 + }, 342 342 + "node_modules/hasown": { 343 343 + "version": "2.0.3", 344 344 + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz", 345 345 + "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==", 346 346 + "license": "MIT", 347 347 + "dependencies": { 348 348 + "function-bind": "^1.1.2" 349 349 + }, 350 350 + "engines": { 351 351 + "node": ">= 0.4" 352 352 + } 353 353 + }, 354 354 + "node_modules/is-binary-path": { 355 355 + "version": "2.1.0", 356 356 + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 357 357 + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 358 358 + "license": "MIT", 359 359 + "dependencies": { 360 360 + "binary-extensions": "^2.0.0" 361 361 + }, 362 362 + "engines": { 363 363 + "node": ">=8" 364 364 + } 365 365 + }, 366 366 + "node_modules/is-core-module": { 367 367 + "version": "2.16.1", 368 368 + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", 369 369 + "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", 370 370 + "license": "MIT", 371 371 + "dependencies": { 372 372 + "hasown": "^2.0.2" 373 373 + }, 374 374 + "engines": { 375 375 + "node": ">= 0.4" 376 376 + }, 377 377 + "funding": { 378 378 + "url": "https://github.com/sponsors/ljharb" 379 379 + } 380 380 + }, 381 381 + "node_modules/is-extglob": { 382 382 + "version": "2.1.1", 383 383 + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 384 384 + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", 385 385 + "license": "MIT", 386 386 + "engines": { 387 387 + "node": ">=0.10.0" 388 388 + } 389 389 + }, 390 390 + "node_modules/is-glob": { 391 391 + "version": "4.0.3", 392 392 + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 393 393 + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 394 394 + "license": "MIT", 395 395 + "dependencies": { 396 396 + "is-extglob": "^2.1.1" 397 397 + }, 398 398 + "engines": { 399 399 + "node": ">=0.10.0" 400 400 + } 401 401 + }, 402 402 + "node_modules/is-number": { 403 403 + "version": "7.0.0", 404 404 + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 405 405 + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 406 406 + "license": "MIT", 407 407 + "engines": { 408 408 + "node": ">=0.12.0" 409 409 + } 410 410 + }, 411 411 + "node_modules/jiti": { 412 412 + "version": "2.6.1", 413 413 + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", 414 414 + "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", 415 415 + "license": "MIT", 416 416 + "optional": true, 417 417 + "peer": true, 418 418 + "bin": { 419 419 + "jiti": "lib/jiti-cli.mjs" 420 420 + } 421 421 + }, 422 422 + "node_modules/lilconfig": { 423 423 + "version": "3.1.3", 424 424 + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", 425 425 + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", 426 426 + "license": "MIT", 427 427 + "engines": { 428 428 + "node": ">=14" 429 429 + }, 430 430 + "funding": { 431 431 + "url": "https://github.com/sponsors/antonk52" 432 432 + } 433 433 + }, 434 434 + "node_modules/lines-and-columns": { 435 435 + "version": "1.2.4", 436 436 + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", 437 437 + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", 438 438 + "license": "MIT" 439 439 + }, 440 440 + "node_modules/merge2": { 441 441 + "version": "1.4.1", 442 442 + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", 443 443 + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", 444 444 + "license": "MIT", 445 445 + "engines": { 446 446 + "node": ">= 8" 447 447 + } 448 448 + }, 449 449 + "node_modules/micromatch": { 450 450 + "version": "4.0.8", 451 451 + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", 452 452 + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", 453 453 + "license": "MIT", 454 454 + "dependencies": { 455 455 + "braces": "^3.0.3", 456 456 + "picomatch": "^2.3.1" 457 457 + }, 458 458 + "engines": { 459 459 + "node": ">=8.6" 460 460 + } 461 461 + }, 462 462 + "node_modules/micromatch/node_modules/picomatch": { 463 463 + "version": "2.3.2", 464 464 + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", 465 465 + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", 466 466 + "license": "MIT", 467 467 + "engines": { 468 468 + "node": ">=8.6" 469 469 + }, 470 470 + "funding": { 471 471 + "url": "https://github.com/sponsors/jonschlinkert" 472 472 + } 473 473 + }, 474 474 + "node_modules/mz": { 475 475 + "version": "2.7.0", 476 476 + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", 477 477 + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", 478 478 + "license": "MIT", 479 479 + "dependencies": { 480 480 + "any-promise": "^1.0.0", 481 481 + "object-assign": "^4.0.1", 482 482 + "thenify-all": "^1.0.0" 483 483 + } 484 484 + }, 485 485 + "node_modules/nanoid": { 486 486 + "version": "3.3.11", 487 487 + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", 488 488 + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", 489 489 + "funding": [ 490 490 + { 491 491 + "type": "github", 492 492 + "url": "https://github.com/sponsors/ai" 493 493 + } 494 494 + ], 495 495 + "license": "MIT", 496 496 + "bin": { 497 497 + "nanoid": "bin/nanoid.cjs" 498 498 + }, 499 499 + "engines": { 500 500 + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 501 501 + } 502 502 + }, 503 503 + "node_modules/normalize-path": { 504 504 + "version": "3.0.0", 505 505 + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 506 506 + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 507 507 + "license": "MIT", 508 508 + "engines": { 509 509 + "node": ">=0.10.0" 510 510 + } 511 511 + }, 512 512 + "node_modules/object-assign": { 513 513 + "version": "4.1.1", 514 514 + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 515 515 + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", 516 516 + "license": "MIT", 517 517 + "engines": { 518 518 + "node": ">=0.10.0" 519 519 + } 520 520 + }, 521 521 + "node_modules/object-hash": { 522 522 + "version": "3.0.0", 523 523 + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", 524 524 + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", 525 525 + "license": "MIT", 526 526 + "engines": { 527 527 + "node": ">= 6" 528 528 + } 529 529 + }, 530 530 + "node_modules/path-parse": { 531 531 + "version": "1.0.7", 532 532 + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 533 533 + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 534 534 + "license": "MIT" 535 535 + }, 536 536 + "node_modules/picocolors": { 537 537 + "version": "1.1.1", 538 538 + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", 539 539 + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", 540 540 + "license": "ISC" 541 541 + }, 542 542 + "node_modules/picomatch": { 543 543 + "version": "4.0.4", 544 544 + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", 545 545 + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", 546 546 + "license": "MIT", 547 547 + "engines": { 548 548 + "node": ">=12" 549 549 + }, 550 550 + "funding": { 551 551 + "url": "https://github.com/sponsors/jonschlinkert" 552 552 + } 553 553 + }, 554 554 + "node_modules/pify": { 555 555 + "version": "2.3.0", 556 556 + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", 557 557 + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", 558 558 + "license": "MIT", 559 559 + "engines": { 560 560 + "node": ">=0.10.0" 561 561 + } 562 562 + }, 563 563 + "node_modules/pirates": { 564 564 + "version": "4.0.7", 565 565 + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", 566 566 + "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==", 567 567 + "license": "MIT", 568 568 + "engines": { 569 569 + "node": ">= 6" 570 570 + } 571 571 + }, 572 572 + "node_modules/postcss": { 573 573 + "version": "8.5.10", 574 574 + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz", 575 575 + "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==", 576 576 + "funding": [ 577 577 + { 578 578 + "type": "opencollective", 579 579 + "url": "https://opencollective.com/postcss/" 580 580 + }, 581 581 + { 582 582 + "type": "tidelift", 583 583 + "url": "https://tidelift.com/funding/github/npm/postcss" 584 584 + }, 585 585 + { 586 586 + "type": "github", 587 587 + "url": "https://github.com/sponsors/ai" 588 588 + } 589 589 + ], 590 590 + "license": "MIT", 591 591 + "dependencies": { 592 592 + "nanoid": "^3.3.11", 593 593 + "picocolors": "^1.1.1", 594 594 + "source-map-js": "^1.2.1" 595 595 + }, 596 596 + "engines": { 597 597 + "node": "^10 || ^12 || >=14" 598 598 + } 599 599 + }, 600 600 + "node_modules/postcss-import": { 601 601 + "version": "15.1.0", 602 602 + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", 603 603 + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", 604 604 + "license": "MIT", 605 605 + "dependencies": { 606 606 + "postcss-value-parser": "^4.0.0", 607 607 + "read-cache": "^1.0.0", 608 608 + "resolve": "^1.1.7" 609 609 + }, 610 610 + "engines": { 611 611 + "node": ">=14.0.0" 612 612 + }, 613 613 + "peerDependencies": { 614 614 + "postcss": "^8.0.0" 615 615 + } 616 616 + }, 617 617 + "node_modules/postcss-js": { 618 618 + "version": "4.1.0", 619 619 + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz", 620 620 + "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==", 621 621 + "funding": [ 622 622 + { 623 623 + "type": "opencollective", 624 624 + "url": "https://opencollective.com/postcss/" 625 625 + }, 626 626 + { 627 627 + "type": "github", 628 628 + "url": "https://github.com/sponsors/ai" 629 629 + } 630 630 + ], 631 631 + "license": "MIT", 632 632 + "dependencies": { 633 633 + "camelcase-css": "^2.0.1" 634 634 + }, 635 635 + "engines": { 636 636 + "node": "^12 || ^14 || >= 16" 637 637 + }, 638 638 + "peerDependencies": { 639 639 + "postcss": "^8.4.21" 640 640 + } 641 641 + }, 642 642 + "node_modules/postcss-load-config": { 643 643 + "version": "6.0.1", 644 644 + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz", 645 645 + "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==", 646 646 + "funding": [ 647 647 + { 648 648 + "type": "opencollective", 649 649 + "url": "https://opencollective.com/postcss/" 650 650 + }, 651 651 + { 652 652 + "type": "github", 653 653 + "url": "https://github.com/sponsors/ai" 654 654 + } 655 655 + ], 656 656 + "license": "MIT", 657 657 + "dependencies": { 658 658 + "lilconfig": "^3.1.1" 659 659 + }, 660 660 + "engines": { 661 661 + "node": ">= 18" 662 662 + }, 663 663 + "peerDependencies": { 664 664 + "jiti": ">=1.21.0", 665 665 + "postcss": ">=8.0.9", 666 666 + "tsx": "^4.8.1", 667 667 + "yaml": "^2.4.2" 668 668 + }, 669 669 + "peerDependenciesMeta": { 670 670 + "jiti": { 671 671 + "optional": true 672 672 + }, 673 673 + "postcss": { 674 674 + "optional": true 675 675 + }, 676 676 + "tsx": { 677 677 + "optional": true 678 678 + }, 679 679 + "yaml": { 680 680 + "optional": true 681 681 + } 682 682 + } 683 683 + }, 684 684 + "node_modules/postcss-nested": { 685 685 + "version": "6.2.0", 686 686 + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", 687 687 + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", 688 688 + "funding": [ 689 689 + { 690 690 + "type": "opencollective", 691 691 + "url": "https://opencollective.com/postcss/" 692 692 + }, 693 693 + { 694 694 + "type": "github", 695 695 + "url": "https://github.com/sponsors/ai" 696 696 + } 697 697 + ], 698 698 + "license": "MIT", 699 699 + "dependencies": { 700 700 + "postcss-selector-parser": "^6.1.1" 701 701 + }, 702 702 + "engines": { 703 703 + "node": ">=12.0" 704 704 + }, 705 705 + "peerDependencies": { 706 706 + "postcss": "^8.2.14" 707 707 + } 708 708 + }, 709 709 + "node_modules/postcss-selector-parser": { 710 710 + "version": "6.1.2", 711 711 + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", 712 712 + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", 713 713 + "license": "MIT", 714 714 + "dependencies": { 715 715 + "cssesc": "^3.0.0", 716 716 + "util-deprecate": "^1.0.2" 717 717 + }, 718 718 + "engines": { 719 719 + "node": ">=4" 720 720 + } 721 721 + }, 722 722 + "node_modules/postcss-value-parser": { 723 723 + "version": "4.2.0", 724 724 + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", 725 725 + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", 726 726 + "license": "MIT" 727 727 + }, 728 728 + "node_modules/queue-microtask": { 729 729 + "version": "1.2.3", 730 730 + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", 731 731 + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", 732 732 + "funding": [ 733 733 + { 734 734 + "type": "github", 735 735 + "url": "https://github.com/sponsors/feross" 736 736 + }, 737 737 + { 738 738 + "type": "patreon", 739 739 + "url": "https://www.patreon.com/feross" 740 740 + }, 741 741 + { 742 742 + "type": "consulting", 743 743 + "url": "https://feross.org/support" 744 744 + } 745 745 + ], 746 746 + "license": "MIT" 747 747 + }, 748 748 + "node_modules/read-cache": { 749 749 + "version": "1.0.0", 750 750 + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", 751 751 + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", 752 752 + "license": "MIT", 753 753 + "dependencies": { 754 754 + "pify": "^2.3.0" 755 755 + } 756 756 + }, 757 757 + "node_modules/readdirp": { 758 758 + "version": "3.6.0", 759 759 + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 760 760 + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 761 761 + "license": "MIT", 762 762 + "dependencies": { 763 763 + "picomatch": "^2.2.1" 764 764 + }, 765 765 + "engines": { 766 766 + "node": ">=8.10.0" 767 767 + } 768 768 + }, 769 769 + "node_modules/readdirp/node_modules/picomatch": { 770 770 + "version": "2.3.2", 771 771 + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", 772 772 + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", 773 773 + "license": "MIT", 774 774 + "engines": { 775 775 + "node": ">=8.6" 776 776 + }, 777 777 + "funding": { 778 778 + "url": "https://github.com/sponsors/jonschlinkert" 779 779 + } 780 780 + }, 781 781 + "node_modules/resolve": { 782 782 + "version": "1.22.12", 783 783 + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", 784 784 + "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==", 785 785 + "license": "MIT", 786 786 + "dependencies": { 787 787 + "es-errors": "^1.3.0", 788 788 + "is-core-module": "^2.16.1", 789 789 + "path-parse": "^1.0.7", 790 790 + "supports-preserve-symlinks-flag": "^1.0.0" 791 791 + }, 792 792 + "bin": { 793 793 + "resolve": "bin/resolve" 794 794 + }, 795 795 + "engines": { 796 796 + "node": ">= 0.4" 797 797 + }, 798 798 + "funding": { 799 799 + "url": "https://github.com/sponsors/ljharb" 800 800 + } 801 801 + }, 802 802 + "node_modules/reusify": { 803 803 + "version": "1.1.0", 804 804 + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", 805 805 + "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", 806 806 + "license": "MIT", 807 807 + "engines": { 808 808 + "iojs": ">=1.0.0", 809 809 + "node": ">=0.10.0" 810 810 + } 811 811 + }, 812 812 + "node_modules/run-parallel": { 813 813 + "version": "1.2.0", 814 814 + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", 815 815 + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", 816 816 + "funding": [ 817 817 + { 818 818 + "type": "github", 819 819 + "url": "https://github.com/sponsors/feross" 820 820 + }, 821 821 + { 822 822 + "type": "patreon", 823 823 + "url": "https://www.patreon.com/feross" 824 824 + }, 825 825 + { 826 826 + "type": "consulting", 827 827 + "url": "https://feross.org/support" 828 828 + } 829 829 + ], 830 830 + "license": "MIT", 831 831 + "dependencies": { 832 832 + "queue-microtask": "^1.2.2" 833 833 + } 834 834 + }, 835 835 + "node_modules/source-map-js": { 836 836 + "version": "1.2.1", 837 837 + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", 838 838 + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", 839 839 + "license": "BSD-3-Clause", 840 840 + "engines": { 841 841 + "node": ">=0.10.0" 842 842 + } 843 843 + }, 844 844 + "node_modules/sucrase": { 845 845 + "version": "3.35.1", 846 846 + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", 847 847 + "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==", 848 848 + "license": "MIT", 849 849 + "dependencies": { 850 850 + "@jridgewell/gen-mapping": "^0.3.2", 851 851 + "commander": "^4.0.0", 852 852 + "lines-and-columns": "^1.1.6", 853 853 + "mz": "^2.7.0", 854 854 + "pirates": "^4.0.1", 855 855 + "tinyglobby": "^0.2.11", 856 856 + "ts-interface-checker": "^0.1.9" 857 857 + }, 858 858 + "bin": { 859 859 + "sucrase": "bin/sucrase", 860 860 + "sucrase-node": "bin/sucrase-node" 861 861 + }, 862 862 + "engines": { 863 863 + "node": ">=16 || 14 >=14.17" 864 864 + } 865 865 + }, 866 866 + "node_modules/supports-preserve-symlinks-flag": { 867 867 + "version": "1.0.0", 868 868 + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 869 869 + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 870 870 + "license": "MIT", 871 871 + "engines": { 872 872 + "node": ">= 0.4" 873 873 + }, 874 874 + "funding": { 875 875 + "url": "https://github.com/sponsors/ljharb" 876 876 + } 877 877 + }, 878 878 + "node_modules/tailwindcss": { 879 879 + "version": "3.4.19", 880 880 + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", 881 881 + "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", 882 882 + "license": "MIT", 883 883 + "dependencies": { 884 884 + "@alloc/quick-lru": "^5.2.0", 885 885 + "arg": "^5.0.2", 886 886 + "chokidar": "^3.6.0", 887 887 + "didyoumean": "^1.2.2", 888 888 + "dlv": "^1.1.3", 889 889 + "fast-glob": "^3.3.2", 890 890 + "glob-parent": "^6.0.2", 891 891 + "is-glob": "^4.0.3", 892 892 + "jiti": "^1.21.7", 893 893 + "lilconfig": "^3.1.3", 894 894 + "micromatch": "^4.0.8", 895 895 + "normalize-path": "^3.0.0", 896 896 + "object-hash": "^3.0.0", 897 897 + "picocolors": "^1.1.1", 898 898 + "postcss": "^8.4.47", 899 899 + "postcss-import": "^15.1.0", 900 900 + "postcss-js": "^4.0.1", 901 901 + "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", 902 902 + "postcss-nested": "^6.2.0", 903 903 + "postcss-selector-parser": "^6.1.2", 904 904 + "resolve": "^1.22.8", 905 905 + "sucrase": "^3.35.0" 906 906 + }, 907 907 + "bin": { 908 908 + "tailwind": "lib/cli.js", 909 909 + "tailwindcss": "lib/cli.js" 910 910 + }, 911 911 + "engines": { 912 912 + "node": ">=14.0.0" 913 913 + } 914 914 + }, 915 915 + "node_modules/tailwindcss/node_modules/jiti": { 916 916 + "version": "1.21.7", 917 917 + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", 918 918 + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", 919 919 + "license": "MIT", 920 920 + "bin": { 921 921 + "jiti": "bin/jiti.js" 922 922 + } 923 923 + }, 924 924 + "node_modules/thenify": { 925 925 + "version": "3.3.1", 926 926 + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", 927 927 + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", 928 928 + "license": "MIT", 929 929 + "dependencies": { 930 930 + "any-promise": "^1.0.0" 931 931 + } 932 932 + }, 933 933 + "node_modules/thenify-all": { 934 934 + "version": "1.6.0", 935 935 + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", 936 936 + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", 937 937 + "license": "MIT", 938 938 + "dependencies": { 939 939 + "thenify": ">= 3.1.0 < 4" 940 940 + }, 941 941 + "engines": { 942 942 + "node": ">=0.8" 943 943 + } 944 944 + }, 945 945 + "node_modules/tinyglobby": { 946 946 + "version": "0.2.16", 947 947 + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz", 948 948 + "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==", 949 949 + "license": "MIT", 950 950 + "dependencies": { 951 951 + "fdir": "^6.5.0", 952 952 + "picomatch": "^4.0.4" 953 953 + }, 954 954 + "engines": { 955 955 + "node": ">=12.0.0" 956 956 + }, 957 957 + "funding": { 958 958 + "url": "https://github.com/sponsors/SuperchupuDev" 959 959 + } 960 960 + }, 961 961 + "node_modules/to-regex-range": { 962 962 + "version": "5.0.1", 963 963 + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 964 964 + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 965 965 + "license": "MIT", 966 966 + "dependencies": { 967 967 + "is-number": "^7.0.0" 968 968 + }, 969 969 + "engines": { 970 970 + "node": ">=8.0" 971 971 + } 972 972 + }, 973 973 + "node_modules/ts-interface-checker": { 974 974 + "version": "0.1.13", 975 975 + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", 976 976 + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", 977 977 + "license": "Apache-2.0" 978 978 + }, 979 979 + "node_modules/util-deprecate": { 980 980 + "version": "1.0.2", 981 981 + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 982 982 + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", 983 983 + "license": "MIT" 984 984 + } 985 985 + } 986 986 + }

+5

package.json

reviewed

··· 1 1 + { 2 2 + "dependencies": { 3 3 + "tailwindcss": "^3.4.19" 4 4 + } 5 5 + }

+11

static/favicon.svg

reviewed

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"> 2 2 + <rect width="32" height="32" rx="8" fill="#1E3932"/> 3 3 + <path d="M16 6 L16 22" stroke="#00754A" stroke-width="2.5" stroke-linecap="round"/> 4 4 + <path d="M16 10 Q10 8 8 12" stroke="#00754A" stroke-width="2" stroke-linecap="round" fill="none"/> 5 5 + <path d="M16 10 Q22 8 24 12" stroke="#00754A" stroke-width="2" stroke-linecap="round" fill="none"/> 6 6 + <path d="M16 14 Q9 12 7 17" stroke="#00754A" stroke-width="2" stroke-linecap="round" fill="none"/> 7 7 + <path d="M16 14 Q23 12 25 17" stroke="#00754A" stroke-width="2" stroke-linecap="round" fill="none"/> 8 8 + <path d="M16 18 Q11 16 9 21" stroke="#00754A" stroke-width="2" stroke-linecap="round" fill="none"/> 9 9 + <path d="M16 18 Q21 16 23 21" stroke="#00754A" stroke-width="2" stroke-linecap="round" fill="none"/> 10 10 + <circle cx="16" cy="25" r="2" fill="#00754A"/> 11 11 + </svg>

+87 -1

static/input.css

reviewed

··· 2 2 @tailwind components; 3 3 @tailwind utilities; 4 4 5 5 - .line-clamp-2 { 5 5 + @layer base { 6 6 + :root { 7 7 + --spot-bg: #0f1f1a; 8 8 + --spot-surface: #152b24; 9 9 + --spot-hover: #1a362e; 10 10 + --spot-hover-50: rgba(26,54,46,0.5); 11 11 + --spot-text: #ffffff; 12 12 + --spot-secondary: rgba(255,255,255,0.70); 13 13 + --spot-body: rgba(255,255,255,0.87); 14 14 + --spot-muted: rgba(255,255,255,0.25); 15 15 + --spot-divider: rgba(255,255,255,0.08); 16 16 + --spot-divider-30: rgba(255,255,255,0.12); 17 17 + --spot-outline: rgba(255,255,255,0.20); 18 18 + --spot-placeholder: rgba(255,255,255,0.30); 19 19 + --spot-active-bg: #ffffff; 20 20 + --spot-active-text: #1E3932; 21 21 + --spot-shadow: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24); 22 22 + --spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14); 23 23 + } 24 24 + 25 25 + [data-theme="light"] { 26 26 + --spot-bg: #f2f0eb; 27 27 + --spot-surface: #ffffff; 28 28 + --spot-hover: #edebe9; 29 29 + --spot-hover-50: rgba(237,235,233,0.5); 30 30 + --spot-text: rgba(0,0,0,0.87); 31 31 + --spot-secondary: rgba(0,0,0,0.58); 32 32 + --spot-body: rgba(0,0,0,0.70); 33 33 + --spot-muted: rgba(0,0,0,0.25); 34 34 + --spot-divider: rgba(0,0,0,0.08); 35 35 + --spot-divider-30: rgba(0,0,0,0.12); 36 36 + --spot-outline: rgba(0,0,0,0.15); 37 37 + --spot-placeholder: rgba(0,0,0,0.30); 38 38 + --spot-active-bg: #1E3932; 39 39 + --spot-active-text: #ffffff; 40 40 + --spot-shadow: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24); 41 41 + --spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.14), 0 8px 12px rgba(0,0,0,0.08); 42 42 + } 43 43 + } 44 44 + 45 45 + @layer components { 46 46 + .article-body h1 { @apply text-2xl font-bold mt-8 mb-3 text-spot-text } 47 47 + .article-body h2 { @apply text-xl font-semibold mt-6 mb-2 text-spot-text } 48 48 + .article-body h3 { @apply text-lg font-semibold mt-5 mb-2 text-spot-text } 49 49 + .article-body h4 { @apply text-base font-semibold mt-4 mb-1 text-spot-text } 50 50 + .article-body p { @apply my-3 leading-7 text-spot-body } 51 51 + .article-body ul { @apply list-disc pl-6 my-3 text-spot-body } 52 52 + .article-body ol { @apply list-decimal pl-6 my-3 text-spot-body } 53 53 + .article-body li { @apply my-1 leading-7 } 54 54 + .article-body blockquote { @apply border-l-4 border-spot-divider pl-4 italic text-spot-secondary my-4 } 55 55 + .article-body pre { @apply bg-spot-bg text-spot-body rounded-lg p-4 overflow-x-auto my-4 text-sm leading-6 } 56 56 + .article-body code { @apply bg-spot-surface text-spot-body px-1.5 py-0.5 rounded text-sm font-mono } 57 57 + .article-body pre code { @apply bg-transparent text-spot-body p-0 } 58 58 + .article-body img { @apply rounded-lg max-w-full h-auto my-4 } 59 59 + .article-body figure { @apply my-4 } 60 60 + .article-body figcaption { @apply text-sm text-spot-secondary text-center mt-2 } 61 61 + .article-body a { @apply text-spot-green underline hover:brightness-110 } 62 62 + .article-body table { @apply w-full border-collapse my-4 } 63 63 + .article-body th { @apply border border-spot-divider px-3 py-2 bg-spot-surface font-semibold text-left text-spot-text } 64 64 + .article-body td { @apply border border-spot-divider px-3 py-2 text-spot-body } 65 65 + .article-body hr { @apply border-spot-divider my-6 } 66 66 + .article-body iframe, .article-body video { @apply rounded-lg my-4 max-w-full } 67 67 + .article-body iframe[src*="youtube.com"], .article-body iframe[src*="youtube-nocookie.com"], .article-body iframe[src*="vimeo.com"], .article-body iframe[src*="spotify.com"], .article-body iframe[src*="soundcloud.com"], .article-body iframe[src*="bandcamp.com"] { @apply w-full aspect-video } 68 68 + .article-body del { @apply line-through text-spot-secondary } 69 69 + .article-body mark { @apply bg-spot-orange/30 px-1 rounded } 70 70 + } 71 71 + 72 72 + @layer utilities { 73 73 + .line-clamp-2 { 6 74 display: -webkit-box; 7 75 -webkit-line-clamp: 2; 8 76 -webkit-box-orient: vertical; 9 77 overflow: hidden; 78 78 + } 10 79 } 80 80 + 81 81 + body { 82 82 + font-family: 'Inter', 'Helvetica Neue', helvetica, arial, sans-serif; 83 83 + letter-spacing: -0.01em; 84 84 + } 85 85 + 86 86 + .sidebar-link { 87 87 + transition: color 0.15s; 88 88 + } 89 89 + .sidebar-link:hover { 90 90 + color: var(--spot-text); 91 91 + } 92 92 + 93 93 + ::-webkit-scrollbar { width: 8px; } 94 94 + ::-webkit-scrollbar-track { background: var(--spot-bg); } 95 95 + ::-webkit-scrollbar-thumb { background: var(--spot-muted); border-radius: 4px; } 96 96 + ::-webkit-scrollbar-thumb:hover { background: var(--spot-outline); }

+6 -7

tailwind.config.js

reviewed

··· 5 5 extend: { 6 6 colors: { 7 7 spot: { 8 8 - purple: '#a855f7', 9 9 - 'purple-border': '#9333ea', 8 8 + green: '#00754A', 9 9 + 'green-dark': '#006241', 10 10 + 'green-house': '#1E3932', 11 11 + 'green-uplift': '#2b5148', 12 12 + 'green-light': '#d4e9e2', 10 13 bg: 'var(--spot-bg)', 11 14 surface: 'var(--spot-surface)', 12 15 hover: 'var(--spot-hover)', ··· 21 24 placeholder: 'var(--spot-placeholder)', 22 25 'active-pill-bg': 'var(--spot-active-bg)', 23 26 'active-pill-text': 'var(--spot-active-text)', 24 24 - red: '#f3727f', 27 27 + red: '#c82014', 25 28 orange: '#ffa42b', 26 29 blue: '#539df5', 27 30 } 28 28 - }, 29 29 - fontFamily: { 30 30 - ui: ['SpotifyMixUI', 'CircularSp-Arab', 'CircularSp-Hebr', 'CircularSp-Cyrl', 'CircularSp-Grek', 'CircularSp-Deva', 'Helvetica Neue', 'helvetica', 'arial', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'MS Gothic', 'sans-serif'], 31 31 - title: ['SpotifyMixUITitle', 'CircularSp-Arab', 'CircularSp-Hebr', 'CircularSp-Cyrl', 'CircularSp-Grek', 'CircularSp-Deva', 'Helvetica Neue', 'helvetica', 'arial', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'MS Gothic', 'sans-serif'], 32 31 }, 33 32 borderRadius: { 34 33 pill: '9999px',