From 53e2a42e2ce4e314c757efddf73928a2f1de12fe Mon Sep 17 00:00:00 2001 From: Sarthak Agrawal Date: Sun, 11 Oct 2026 20:29:32 +0530 Subject: [PATCH 1/3] Dark everywhere: app and landing on dark atlas-gold tokens Co-Authored-By: Claude Sonnet 5.5 --- DESIGN.md | 29 ++- landing-astro/src/content/live.json | 8 +- landing-astro/src/layouts/Layout.astro | 1 + landing-astro/src/styles/landing.css | 120 +++++++++ src/app/blog/[slug]/page.tsx | 16 +- src/app/blog/page.tsx | 14 +- src/app/bucket-list-before-30/page.tsx | 4 +- src/app/bucket-list-before-50/page.tsx | 4 +- src/app/bucket-list-ideas/page.tsx | 4 +- src/app/bucket-list/page.tsx | 67 +++-- src/app/bucket-lists/[slug]/page.tsx | 4 +- src/app/bucket-lists/page.tsx | 18 +- src/app/cheap-hobbies/page.tsx | 4 +- src/app/commitments/page.tsx | 4 +- src/app/compare/compare-client.tsx | 9 +- src/app/error.tsx | 4 +- src/app/experiences/[slug]/page.tsx | 2 +- .../experiences/collections/[slug]/page.tsx | 2 +- src/app/experiences/collections/page.tsx | 2 +- src/app/experiences/experiences-client.tsx | 2 +- src/app/experiences/page.tsx | 2 +- src/app/explore/explore-client.tsx | 24 +- src/app/find-your-hobby/page.tsx | 2 +- src/app/find-your-hobby/quiz-client.tsx | 16 +- src/app/global-error.tsx | 17 +- src/app/globals.css | 245 +++++++++++------- src/app/history/page.tsx | 16 +- src/app/hobbies-for-adults/page.tsx | 8 +- src/app/hobbies-for-resume/page.tsx | 28 +- src/app/hobbies-to-try/page.tsx | 6 +- src/app/hobbies/[hobby]/page.tsx | 56 ++-- src/app/hobbies/category/[category]/page.tsx | 8 +- src/app/hobbies/page.tsx | 4 +- src/app/how-to-make-a-bucket-list/page.tsx | 6 +- src/app/journeys/[slug]/page.tsx | 32 +-- src/app/life-bingo/page.tsx | 14 +- .../life-in-weeks/life-in-weeks-client.tsx | 2 +- src/app/life-in-weeks/weeks-grid.tsx | 10 +- src/app/live-more/page.tsx | 2 +- src/app/login/page.tsx | 4 +- src/app/not-found.tsx | 26 +- src/app/settings/page.tsx | 2 +- src/app/side-quests/side-quests-client.tsx | 54 ++-- src/app/starter-kits/page.tsx | 6 +- src/app/timeline/new/page.tsx | 4 +- .../time-calculator-client.tsx | 24 +- src/app/trajectory/page.tsx | 10 +- src/app/travel-bucket-list/page.tsx | 30 +-- src/app/u/[username]/page.tsx | 36 ++- src/app/what-are-significant-hobbies/page.tsx | 4 +- src/components/aceternity/border-beam.tsx | 4 +- .../aceternity/card-hover-effect.tsx | 2 +- src/components/aceternity/gradient-mesh.tsx | 15 +- src/components/aceternity/grid-background.tsx | 2 +- src/components/aceternity/spotlight-card.tsx | 2 +- src/components/add-to-my-list-button.tsx | 8 +- src/components/ambient-music.tsx | 28 +- src/components/bucket-list/bingo-board.tsx | 34 +-- .../bucket-list/bucket-list-view.tsx | 32 +-- .../bucket-list/bucket-list-workspace.tsx | 14 +- .../bucket-list/local-bucket-list.tsx | 28 +- .../bucket-list/manual-item-input.tsx | 6 +- src/components/bucket-list/public-bingo.tsx | 31 ++- .../bucket-list/quest-chain-card.tsx | 2 +- .../commitments/local-commitments.tsx | 6 +- src/components/commitments/stamp-rail.tsx | 2 +- src/components/dream-atlas-explorer.tsx | 132 +++++----- src/components/hobby-roadmap-card.tsx | 16 +- src/components/journal-archive.tsx | 14 +- src/components/life-atlas/history-atlas.tsx | 20 +- src/components/life-grid.tsx | 2 +- src/components/local-live-more.tsx | 2 +- src/components/local-look-back.tsx | 12 +- src/components/local-onboarding-gate.tsx | 2 +- src/components/mobile-menu.tsx | 16 +- src/components/nav-links.tsx | 8 +- src/components/nav.tsx | 12 +- src/components/public-landing.tsx | 90 ++++--- src/components/quiz-result-card.tsx | 30 +-- src/components/saasmaker-feedback.tsx | 30 ++- src/components/site-footer.tsx | 20 +- src/components/timeline-builder/builder.tsx | 22 +- .../timeline-view/export-button.tsx | 2 +- src/components/timeline-view/export-card.tsx | 58 +++-- .../timeline-view/insights-panel.tsx | 22 +- .../timeline-view/personality-card.tsx | 16 +- .../timeline-view/phase-swimlane.tsx | 44 +++- .../timeline-view/rediscovery-nudges.tsx | 2 +- .../timeline-view/rediscovery-quests.tsx | 2 +- src/components/trajectory/trajectory-map.tsx | 2 +- src/components/ui/sonner.tsx | 5 +- .../weekly-log/weekly-log-surface.tsx | 42 +-- src/components/wider-world-links.tsx | 6 +- src/lib/bucket-list-category-styles.ts | 64 ++--- src/lib/bucket-list-insights.ts | 44 ++-- src/lib/dream-atlas.ts | 12 +- 96 files changed, 1124 insertions(+), 857 deletions(-) create mode 100644 landing-astro/src/styles/landing.css diff --git a/DESIGN.md b/DESIGN.md index 3ebcbee0..c27f1b5e 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -2,12 +2,17 @@ name: Significant Hobbies description: A life atlas for choosing, living, and remembering what matters. colors: - paper: "oklch(0.985 0.012 88)" - ink: "oklch(0.20 0.025 72)" - atlas-gold: "oklch(0.82 0.13 88)" - lived-sage: "oklch(0.72 0.13 150)" - quiet-ink: "oklch(0.46 0.018 72)" - contour: "oklch(0.86 0.025 82)" + background: "#120e09" + foreground: "#f7f3e9" + card: "#1e1812" + surface: "#17130d" + muted: "#26211a" + muted-foreground: "#b7b0a3" + border: "#3b342a" + atlas-gold: "#e7bf57" + brand-foreground: "#1d1409" + destructive: "#f66d67" + lived-sage: "#62bb78" typography: display: fontFamily: "var(--font-serif), Georgia, serif" @@ -27,7 +32,7 @@ spacing: components: button-primary: backgroundColor: "{colors.atlas-gold}" - textColor: "{colors.ink}" + textColor: "{colors.brand-foreground}" rounded: "{rounded.control}" padding: "12px 20px" --- @@ -40,11 +45,17 @@ components: The interface is a map of a finite, inhabited life. Live uses paths, horizons, clusters, and wayfinding to turn possibility into a next move. History uses the same atlas language as chronology: week fields, dated markers, bends in direction, and remembered evidence. The weekly journal is a focused close-up scale of the same world. -The system is warm light mode by default: sunlit, colorful, energetic, and action-led. Live should make leaving the screen feel tempting. Journal is a calm ritual expressed through morning yellow or evening lavender and a substantial white writing surface. History is a personal almanac: yellow mortality, blue direction, and coral, lavender, or paper story passages. Gold indicates chosen direction; sage indicates lived evidence and learning. Content should feel placed in a landscape, not packed into a grid of interchangeable cards. +**Owner decision, 11 October 2026: dark everywhere.** The public Astro landing and the Next.js app share one warm night canvas, atlas-gold actions with ink text, tonal cards, and quiet borders. Dark is the only theme, independent of system preference; it is the product shell as well as the storytelling space. Keep Geist, Fraunces, and Geist Mono. + +Journal remains a calm ritual with dark morning-yellow or evening-lavender fields and a substantial dark writing surface. History is a personal almanac: yellow mortality, blue direction, and coral, lavender, or warm night story passages. Gold indicates chosen direction; sage indicates lived evidence and learning. Content should feel placed in a landscape, not packed into a grid of interchangeable cards. ## Colors -Warm paper and dark olive ink make the whole product feel usable in daylight. Live More uses a restrained field palette—sun yellow, open-sky blue, coral, fresh green, and lilac—to distinguish kinds of possibility and create emotional lift. These colors belong to large, flat regions rather than decorative gradients. Atlas gold is reserved for direction; lived sage marks evidence, feedback, and completed experience. +The canonical roles are background `#120e09` (approximately `oklch(0.165 0.012 72)`), foreground `#f7f3e9`, card `#1e1812`, surface `#17130d`, muted `#26211a`, muted foreground `#b7b0a3`, border `#3b342a`, primary/brand atlas gold `#e7bf57`, brand/primary foreground ink `#1d1409`, destructive `#f66d67`, and growth/sage `#62bb78`. Base radius is `0.75rem`: controls use 12px corners and bounded surfaces 16px. + +Live uses a restrained field palette—sun yellow, open-sky blue, coral, fresh green, and lilac—to distinguish kinds of possibility. Large, flat fields use dark tonal variants at OKLCH lightness 0.30 with the same hue family, rather than luminous pastel fills. Their cream, muted, and pale chromatic text must reach WCAG AA (4.5:1 for body copy). Semantic field roles live in `src/app/globals.css`; the local landing overrides use the same roles. Photography keeps its original pixels. + +The Significant Hobbies Hub renders in its independent repository. Delegated Hub pages and their design are outside this decision's implementation scope here. Photography is candid, tactile evidence of ordinary adults living: hands making things, friends outdoors, accessible local adventures, natural daylight, real texture, and imperfect motion. Avoid generic stock smiles, luxury travel, staged influencer imagery, and motivational text embedded in images. diff --git a/landing-astro/src/content/live.json b/landing-astro/src/content/live.json index 2613d149..b5f7fb66 100644 --- a/landing-astro/src/content/live.json +++ b/landing-astro/src/content/live.json @@ -6,10 +6,10 @@ "theme": "gallery", "icon": "icon.svg", "tokens": { - "--brand": "oklch(0.8 0.16 80)", - "--brand-foreground": "oklch(0.2 0.02 60)", - "--brand-soft": "oklch(0.94 0.06 85)", - "--brand-ink": "oklch(0.55 0.13 60)" + "--brand": "#e7bf57", + "--brand-foreground": "#1d1409", + "--brand-soft": "var(--field-sun)", + "--brand-ink": "var(--brand)" }, "assetBase": "/", "canonical": "https://live.significanthobbies.com", diff --git a/landing-astro/src/layouts/Layout.astro b/landing-astro/src/layouts/Layout.astro index 44b1f747..e060c60a 100644 --- a/landing-astro/src/layouts/Layout.astro +++ b/landing-astro/src/layouts/Layout.astro @@ -1,5 +1,6 @@ --- import Base from '@saas-maker/templates/Base.astro'; +import '../styles/landing.css'; import { baseProps } from '@saas-maker/templates/page'; import type { GalleryContent } from '@saas-maker/templates/schema'; import bodyFont from '@saas-maker/ui/fonts/newsreader-text-latin-normal.woff2?url'; diff --git a/landing-astro/src/styles/landing.css b/landing-astro/src/styles/landing.css new file mode 100644 index 00000000..4e32c74e --- /dev/null +++ b/landing-astro/src/styles/landing.css @@ -0,0 +1,120 @@ +/* Same Life Atlas roles as src/app/globals.css. Preset selectors are explicit + so shared Gallery defaults cannot restore a light canvas or cool ink. */ +:root, +html[data-theme="gallery"], +html[data-theme="gallery"] [data-surface="editorial-dark"] { + color-scheme: dark; + --font-display: "Geist Variable", system-ui, sans-serif; + --font-text: var(--font-sans); + --font-accent: "Fraunces Variable", Georgia, serif; + --radius: 0.75rem; + --brand: #e7bf57; + --brand-foreground: #1d1409; + --brand-soft: var(--field-sun); + --brand-ink: var(--brand); + --background: #120e09; + --foreground: #f7f3e9; + --card: #1e1812; + --card-foreground: var(--foreground); + --surface: #17130d; + --popover: var(--card); + --popover-foreground: var(--foreground); + --primary: var(--brand); + --primary-foreground: var(--brand-foreground); + --secondary: #26211a; + --secondary-foreground: var(--foreground); + --muted: var(--secondary); + --muted-foreground: #b7b0a3; + --accent: var(--muted); + --accent-foreground: var(--foreground); + --destructive: #f66d67; + --success: #62bb78; + --warning: var(--brand); + --border: #3b342a; + --hairline: var(--border); + --input: var(--border); + --ring: var(--brand); + --subtle: #aaa293; + --scrim: oklch(0 0 0); + --week-spent: oklch(0.34 0.012 72); + --chart-1: var(--brand); + --chart-2: var(--success); + --chart-3: var(--field-sky-ink); + --chart-4: var(--field-coral-ink); + --chart-5: var(--field-lilac-ink); + --sidebar: var(--surface); + --sidebar-foreground: var(--foreground); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + --field-sun: oklch(0.30 0.055 95); + --field-sun-ink: oklch(0.86 0.09 95); + --field-sky: oklch(0.30 0.05 240); + --field-sky-ink: oklch(0.86 0.06 240); + --field-coral: oklch(0.30 0.065 40); + --field-coral-ink: oklch(0.86 0.06 40); + --field-green: oklch(0.30 0.05 145); + --field-green-ink: oklch(0.86 0.07 145); + --field-lilac: oklch(0.30 0.065 300); + --field-lilac-ink: oklch(0.86 0.06 300); + --field-rose: oklch(0.30 0.05 350); + --field-rose-ink: oklch(0.86 0.06 350); + --tone-1: var(--field-coral); + --tone-2: var(--field-lilac); + --tone-3: var(--field-green); + --tone-4: var(--field-sun); + --tone-ink: var(--surface); + --accent-ink: var(--brand); + --cover-foreground: var(--foreground); + --cover-muted-foreground: var(--muted-foreground); +} + +/* Photo covers supply their own inline text roles. Keep the imagery and scrims, + but use atlas gold for the accent phrases, with cream copy above the photo. */ +html[data-theme="gallery"] main > section { + --foreground: var(--cover-foreground); + --muted-foreground: var(--cover-muted-foreground); + color: var(--foreground); + --brand-ink: var(--brand); + --accent-ink: var(--brand); +} + +html[data-theme="gallery"] .bg-brand, +html[data-theme="gallery"] header .bg-primary, +html[data-theme="gallery"] button[type="submit"] { + border-radius: var(--radius); +} + +html[data-theme="gallery"] .bg-card { + border-radius: 1rem; +} + +html[data-theme="gallery"] :focus-visible { + outline: 2px solid var(--ring); + outline-offset: 4px; +} + +/* The same Geist controls and Fraunces landmarks as the app. */ +html[data-theme="gallery"] h1, +html[data-theme="gallery"] h2 { + font-family: "Fraunces Variable", Georgia, serif; + font-weight: 500; + letter-spacing: -0.02em; +} + +/* Hold text contrast over every photo, including a worst-case white pixel. + The image pixels stay intact; only the existing readability scrim changes. */ +html[data-theme="gallery"] main > section:has(img.motion-parallax, img.motion-drift) > [aria-hidden]:nth-child(2) { + background: color-mix(in srgb, var(--background) 85%, transparent); +} + +html[data-theme="gallery"] main > section > span.absolute { + padding: 0.25rem 0.5rem; + border-radius: 0.375rem; + background: var(--background); + color: var(--muted-foreground); +} + diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx index 7eddbb27..4a584fbb 100644 --- a/src/app/blog/[slug]/page.tsx +++ b/src/app/blog/[slug]/page.tsx @@ -41,9 +41,17 @@ const CATEGORY_COLORS: Record