From c9588a8646e19f622f599f3a1e2a345c2da7a621 Mon Sep 17 00:00:00 2001
From: Claude
Date: Thu, 2 Jul 2026 17:42:08 +0000
Subject: [PATCH 1/2] Implement Quiet Fusion redesign across all pages
Apply the brand direction documented on /design site-wide:
- Rewrite the design system in global.css: warm canvas palette
(#f7f5ef / #11110f / #77736b / #dedbd2), one green signal color
(#247866) replacing the Telegram blue, matching warm dark theme,
Work Sans-led typography with Crimson Pro reserved for quotes,
flat panes with rules instead of shadows, near-invisible motion.
- Replace the decorated desktop/mobile dual hero with a single
responsive quiet hero featuring a prompt bar; delete MobileHero.
- Convert homepage featured case studies to evidence proof rows;
remove grid textures, hover lifts/rotations, and gradient accents.
- Restyle shared components (cards, steps, testimonials, FAQ, team,
footer, theme toggle) to the flat language.
- Remap slate/stone/blue neutrals to warm equivalents across all
app, work, and utility pages while preserving per-app accents.
- Fix dark-mode contrast bugs surfaced on fixed-dark bands (work CTA
buttons, apps hero title, currency hero) and a raw · entity
in SimpleAppLanding.
Co-Authored-By: Claude Fable 5
Claude-Session: https://claude.ai/code/session_01KZ4T4ttNvVFzaxAr9hzY4m
---
src/components/BenefitCard.astro | 32 +-
src/components/ContactForm.astro | 2 +-
src/components/ExploreApps.astro | 20 +-
src/components/FAQItem.astro | 9 +-
src/components/Footer.astro | 50 +--
src/components/Header.astro | 21 +-
src/components/Hero.astro | 389 +++++-------------
src/components/MobileHero.astro | 321 ---------------
src/components/PortfolioCard.astro | 23 +-
src/components/ProcessStep.astro | 21 +-
src/components/SimpleAppLanding.astro | 34 +-
src/components/TeamMember.astro | 28 +-
src/components/TestimonialCard.astro | 28 +-
src/components/ThemeToggle.astro | 15 +-
src/components/showcase/CardVariant.astro | 14 +-
.../showcase/ColorThemePreview.astro | 10 +-
src/components/showcase/EffectsGallery.astro | 32 +-
src/components/showcase/HeroPreview.astro | 14 +-
src/layouts/BaseLayout.astro | 5 +-
src/pages/404.astro | 24 +-
src/pages/apps/currency.astro | 14 +-
src/pages/apps/index.astro | 18 +-
src/pages/breathe-easy/index.astro | 48 +--
src/pages/caffeine-easy/index.astro | 36 +-
src/pages/contrast/index.astro | 36 +-
src/pages/count-easy/index.astro | 48 +--
src/pages/cycle-easy/index.astro | 42 +-
src/pages/cycle-easy/support.astro | 4 +-
src/pages/decibel/index.astro | 48 +--
src/pages/fast-easy/index.astro | 18 +-
src/pages/focus-easy/index.astro | 24 +-
src/pages/healthkit-run-generator/index.astro | 10 +-
src/pages/hydrate/index.astro | 48 +--
src/pages/index.astro | 273 ++++++------
src/pages/meds-easy/index.astro | 40 +-
src/pages/mood-easy/index.astro | 48 +--
src/pages/pomo-easy/index.astro | 48 +--
src/pages/pressure-easy/index.astro | 48 +--
src/pages/rest-easy/index.astro | 42 +-
src/pages/run-easy/index.astro | 20 +-
src/pages/spend-easy/index.astro | 48 +--
src/pages/stretch-easy/index.astro | 48 +--
src/pages/temp-easy/index.astro | 48 +--
src/pages/track-easy/index.astro | 48 +--
src/pages/tune-easy/index.astro | 48 +--
src/pages/voice-easy/index.astro | 48 +--
src/pages/weigh-easy/index.astro | 48 +--
src/pages/weigh-easy/support.astro | 4 +-
src/pages/work/easy-digital-downloads.astro | 11 +-
src/pages/work/everybody-everywhere.astro | 11 +-
src/pages/work/golf-channel-academy.astro | 11 +-
src/pages/work/golf-channel.astro | 11 +-
src/pages/work/radio-disney.astro | 11 +-
src/styles/global.css | 383 ++++++++---------
54 files changed, 1061 insertions(+), 1722 deletions(-)
delete mode 100644 src/components/MobileHero.astro
diff --git a/src/components/BenefitCard.astro b/src/components/BenefitCard.astro
index cdd1b4a..af2d32a 100644
--- a/src/components/BenefitCard.astro
+++ b/src/components/BenefitCard.astro
@@ -22,16 +22,14 @@ const { title, description, icon } = Astro.props;
background: var(--bg-card);
padding: 2rem;
border: 1px solid var(--border-color);
- box-shadow: var(--shadow-sm);
- transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+ border-radius: 8px;
+ transition: border-color 160ms ease;
height: 100%;
position: relative;
}
.benefit-card:hover {
- transform: translateY(-6px) rotate(-0.3deg);
- box-shadow: var(--shadow-lg);
- border-color: var(--accent);
+ border-color: var(--border-hover);
}
.card-header {
@@ -42,36 +40,24 @@ const { title, description, icon } = Astro.props;
}
.icon-dot {
- width: 10px;
- height: 10px;
+ width: 8px;
+ height: 8px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
- transition: transform 0.3s ease;
- }
-
- .benefit-card:hover .icon-dot {
- transform: scale(1.2);
}
.icon-line {
- height: 2px;
- width: 0;
- background: var(--accent);
- transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
- }
-
- .benefit-card:hover .icon-line {
- width: 40px;
+ display: none;
}
.title {
font-family: var(--font-heading);
- font-size: 1.375rem;
- font-weight: 400;
+ font-size: 1.25rem;
+ font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.75rem;
- line-height: 1.2;
+ line-height: 1.25;
}
.description {
diff --git a/src/components/ContactForm.astro b/src/components/ContactForm.astro
index 217606a..0a2aaf1 100644
--- a/src/components/ContactForm.astro
+++ b/src/components/ContactForm.astro
@@ -128,7 +128,7 @@
input:focus,
textarea:focus {
border-color: var(--accent);
- box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.12);
+ box-shadow: 0 0 0 3px rgba(36, 120, 102, 0.12);
}
textarea {
diff --git a/src/components/ExploreApps.astro b/src/components/ExploreApps.astro
index 96cc1bf..f2d6d67 100644
--- a/src/components/ExploreApps.astro
+++ b/src/components/ExploreApps.astro
@@ -240,7 +240,7 @@ const otherApps = visibleApps.filter(app => app.slug !== current).sort(() => Mat
diff --git a/src/components/MobileHero.astro b/src/components/MobileHero.astro
deleted file mode 100644
index c38ac0f..0000000
--- a/src/components/MobileHero.astro
+++ /dev/null
@@ -1,321 +0,0 @@
----
-interface Props {
- tagline?: string;
- title: string;
- subtitle: string;
- primaryCTA: { text: string; href: string };
-}
-
-const { tagline, title, subtitle, primaryCTA } = Astro.props;
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Trusted by teams at Disney, Golf Channel & IF:Gathering
-
-
-
-
-
diff --git a/src/components/PortfolioCard.astro b/src/components/PortfolioCard.astro
index c3b1454..3dccd32 100644
--- a/src/components/PortfolioCard.astro
+++ b/src/components/PortfolioCard.astro
@@ -29,18 +29,17 @@ const { title, description, image, url } = Astro.props;
.portfolio-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
+ border-radius: 8px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
- transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+ transition: border-color 160ms ease;
text-decoration: none;
}
.portfolio-card:hover {
- transform: translateY(-6px) rotate(-0.3deg);
- box-shadow: var(--shadow-lg);
- border-color: var(--accent);
+ border-color: var(--border-hover);
}
.image-wrapper {
@@ -68,11 +67,11 @@ const { title, description, image, url } = Astro.props;
.title {
font-family: var(--font-heading);
- font-size: 1.125rem;
- font-weight: 400;
+ font-size: 1.0625rem;
+ font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
- line-height: 1.2;
+ line-height: 1.25;
}
.description {
@@ -95,15 +94,7 @@ const { title, description, image, url } = Astro.props;
transition: color 0.2s;
}
- .view-link svg {
- transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
- }
-
.portfolio-card:hover .view-link {
- color: var(--accent);
- }
-
- .portfolio-card:hover .view-link svg {
- transform: translate(2px, -2px);
+ color: var(--text-primary);
}
diff --git a/src/components/ProcessStep.astro b/src/components/ProcessStep.astro
index 8f96003..e638ae9 100644
--- a/src/components/ProcessStep.astro
+++ b/src/components/ProcessStep.astro
@@ -33,13 +33,14 @@ const stepFormatted = step.toString().padStart(2, '0');
}
.step-number {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- font-weight: 500;
- color: var(--accent);
- padding: 0.5rem 0.75rem;
- border: 1.5px solid var(--accent);
- border-radius: 2px;
+ font-family: var(--font-body);
+ font-size: 0.8125rem;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ color: var(--text-primary);
+ padding: 0.4rem 0.65rem;
+ border: 1px solid var(--border-hover);
+ border-radius: 6px;
}
.step-line {
@@ -56,11 +57,11 @@ const stepFormatted = step.toString().padStart(2, '0');
.title {
font-family: var(--font-heading);
- font-size: 1.5rem;
- font-weight: 400;
+ font-size: 1.25rem;
+ font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.75rem;
- line-height: 1.2;
+ line-height: 1.25;
}
.description {
diff --git a/src/components/SimpleAppLanding.astro b/src/components/SimpleAppLanding.astro
index 2cca66e..57ad295 100644
--- a/src/components/SimpleAppLanding.astro
+++ b/src/components/SimpleAppLanding.astro
@@ -112,7 +112,7 @@ const appStoreLabel = appStoreUrl === '#' ? 'App Store (coming soon)' : 'Downloa
{badge}
{headline}
{description}
- {appStoreNote || (hasStoreLink ? 'Free · No account required' : 'Coming soon')}
+ {appStoreNote || (hasStoreLink ? 'Free · No account required' : 'Coming soon')}
.ap-page {
- --ap-bg: #f8fafc;
- --ap-bg-soft: #ffffff;
- --ap-text: #0f172a;
- --ap-muted: #64748b;
- --ap-border: #e2e8f0;
- --ap-accent-text: #f8fafc;
- }
-
- :global(.dark) .ap-page {
- --ap-bg: #0a0f1a;
- --ap-bg-soft: #111827;
- --ap-text: #f8fafc;
- --ap-muted: #94a3b8;
- --ap-border: rgba(148, 163, 184, 0.2);
+ --ap-bg: var(--bg-primary);
+ --ap-bg-soft: var(--bg-secondary);
+ --ap-text: var(--text-primary);
+ --ap-muted: var(--text-muted);
+ --ap-border: var(--border-color);
+ --ap-accent-text: #fffdf8;
}
.ap-nav {
@@ -305,9 +297,10 @@ const appStoreLabel = appStoreUrl === '#' ? 'App Store (coming soon)' : 'Downloa
.ap-badge {
color: var(--ap-accent-deep);
- font-family: var(--font-mono);
- font-size: 0.75rem;
- letter-spacing: 0.08em;
+ font-family: var(--font-body);
+ font-size: 0.8125rem;
+ font-weight: 600;
+ letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0;
}
@@ -315,8 +308,8 @@ const appStoreLabel = appStoreUrl === '#' ? 'App Store (coming soon)' : 'Downloa
.ap-headline {
margin: 0.7rem 0 0;
font-family: var(--font-heading);
- font-size: clamp(2rem, 4vw, 3.75rem);
- line-height: 0.96;
+ font-size: clamp(2rem, 4vw, 3.5rem);
+ line-height: 1.04;
color: var(--ap-text);
}
@@ -339,7 +332,6 @@ const appStoreLabel = appStoreUrl === '#' ? 'App Store (coming soon)' : 'Downloa
aspect-ratio: 1 / 1;
border-radius: 1.75rem;
border: 1px solid var(--ap-border);
- box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
background: var(--ap-bg-soft);
justify-self: center;
}
diff --git a/src/components/TeamMember.astro b/src/components/TeamMember.astro
index 35a6d6e..0efa113 100644
--- a/src/components/TeamMember.astro
+++ b/src/components/TeamMember.astro
@@ -59,6 +59,7 @@ const { name, role, image, bio, socialLinks, additionalContent } = Astro.props;
.team-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
+ border-radius: 8px;
padding: 2.5rem;
}
@@ -86,7 +87,8 @@ const { name, role, image, bio, socialLinks, additionalContent } = Astro.props;
width: 6rem;
height: 6rem;
object-fit: cover;
- border: 2px solid var(--border-color);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
}
@media (min-width: 640px) {
@@ -103,19 +105,19 @@ const { name, role, image, bio, socialLinks, additionalContent } = Astro.props;
.name {
font-family: var(--font-heading);
- font-size: 1.5rem;
- font-weight: 400;
+ font-size: 1.375rem;
+ font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
line-height: 1.2;
}
.role {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- font-weight: 500;
- color: var(--accent);
- letter-spacing: 0.05em;
+ font-family: var(--font-body);
+ font-size: 0.8125rem;
+ font-weight: 600;
+ color: var(--text-muted);
+ letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
@@ -162,14 +164,6 @@ const { name, role, image, bio, socialLinks, additionalContent } = Astro.props;
}
.social-link:hover {
- color: var(--accent);
- }
-
- .social-link svg {
- transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
- }
-
- .social-link:hover svg {
- transform: translate(2px, -2px);
+ color: var(--text-primary);
}
diff --git a/src/components/TestimonialCard.astro b/src/components/TestimonialCard.astro
index 3c38d54..cc08389 100644
--- a/src/components/TestimonialCard.astro
+++ b/src/components/TestimonialCard.astro
@@ -37,42 +37,32 @@ const { name, company, quote, image, rating = 5 } = Astro.props;
.testimonial-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
- padding: 2.5rem 2rem 2rem;
+ border-radius: 8px;
+ padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
- transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+ transition: border-color 160ms ease;
}
.testimonial-card:hover {
- transform: translateY(-6px) rotate(-0.3deg);
- box-shadow: var(--shadow-lg);
- border-color: var(--accent);
+ border-color: var(--border-hover);
}
.quote-mark {
- font-family: var(--font-heading);
- font-size: 5rem;
- line-height: 1;
- color: var(--accent);
- opacity: 0.15;
- position: absolute;
- top: 0.5rem;
- left: 1rem;
- pointer-events: none;
+ display: none;
}
+ /* Serif reserved for quotes — the one place Crimson Pro remains */
.quote {
- font-family: var(--font-heading);
- font-size: 1.125rem;
+ font-family: var(--font-serif);
+ font-size: 1.1875rem;
font-style: italic;
color: var(--text-secondary);
- line-height: 1.7;
+ line-height: 1.65;
flex: 1;
margin: 0 0 1.5rem 0;
- position: relative;
- z-index: 1;
}
.author {
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 9d6d303..ee2a490 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -106,9 +106,8 @@
width: 20px;
height: 20px;
border-radius: 50%;
- background: #f59e0b;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
- transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
+ background: var(--text-primary);
+ transition: transform 0.25s ease, background 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
@@ -118,30 +117,30 @@
position: absolute;
width: 12px;
height: 12px;
- transition: opacity 0.2s, transform 0.3s;
+ transition: opacity 0.2s, transform 0.25s;
}
/* Light mode: show sun, hide moon */
.icon-sun {
- color: white;
+ color: var(--bg-primary);
opacity: 1;
transform: rotate(0deg) scale(1);
}
.icon-moon {
- color: white;
+ color: var(--bg-primary);
opacity: 0;
transform: rotate(-45deg) scale(0.6);
}
/* Dark mode state */
.theme-toggle[data-theme="dark"] .toggle-track {
- background: var(--accent);
+ background: var(--border-color);
}
.theme-toggle[data-theme="dark"] .toggle-thumb {
transform: translateX(20px);
- background: #6366f1;
+ background: var(--text-primary);
}
.theme-toggle[data-theme="dark"] .icon-sun {
diff --git a/src/components/showcase/CardVariant.astro b/src/components/showcase/CardVariant.astro
index c5fb491..2e63164 100644
--- a/src/components/showcase/CardVariant.astro
+++ b/src/components/showcase/CardVariant.astro
@@ -38,7 +38,7 @@ const { name, style, description } = Astro.props;
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
- background: #f3f4f6;
+ background: #efede4;
display: flex;
align-items: center;
justify-content: center;
@@ -48,20 +48,20 @@ const { name, style, description } = Astro.props;
.icon-wrapper i {
font-size: 1.25rem;
- color: #6b7280;
+ color: #77736b;
transition: color 0.3s;
}
.card-title {
font-size: 1rem;
font-weight: 600;
- color: #111827;
+ color: #1b1a18;
margin-bottom: 0.5rem;
}
.card-description {
font-size: 0.875rem;
- color: #6b7280;
+ color: #77736b;
line-height: 1.5;
flex: 1;
margin-bottom: 1rem;
@@ -69,7 +69,7 @@ const { name, style, description } = Astro.props;
.card-label {
font-size: 0.75rem;
- color: #9ca3af;
+ color: #a19d93;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -77,7 +77,7 @@ const { name, style, description } = Astro.props;
/* Current Style */
.card-current {
background: white;
- border: 1px solid #e5e7eb;
+ border: 1px solid #dedbd2;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
@@ -150,7 +150,7 @@ const { name, style, description } = Astro.props;
/* Accent Strip Style */
.card-accent-strip {
background: white;
- border: 1px solid #e5e7eb;
+ border: 1px solid #dedbd2;
border-left: 4px solid #3b82f6;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
diff --git a/src/components/showcase/ColorThemePreview.astro b/src/components/showcase/ColorThemePreview.astro
index 8011b13..80470fb 100644
--- a/src/components/showcase/ColorThemePreview.astro
+++ b/src/components/showcase/ColorThemePreview.astro
@@ -54,7 +54,7 @@ const { name, accent, accentLight, accentDark, description } = Astro.props;
background: white;
border-radius: 1rem;
padding: 1.5rem;
- border: 1px solid #e5e7eb;
+ border: 1px solid #dedbd2;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
@@ -91,7 +91,7 @@ const { name, accent, accentLight, accentDark, description } = Astro.props;
.theme-name {
font-size: 1.25rem;
font-weight: 700;
- color: #111827;
+ color: #1b1a18;
margin-bottom: 1rem;
}
@@ -131,7 +131,7 @@ const { name, accent, accentLight, accentDark, description } = Astro.props;
.sample-text {
font-size: 0.875rem;
- color: #6b7280;
+ color: #77736b;
line-height: 1.6;
margin-bottom: 1rem;
}
@@ -147,9 +147,9 @@ const { name, accent, accentLight, accentDark, description } = Astro.props;
.description {
font-size: 0.875rem;
- color: #9ca3af;
+ color: #a19d93;
font-style: italic;
- border-top: 1px solid #f3f4f6;
+ border-top: 1px solid #efede4;
padding-top: 1rem;
margin: 0;
}
diff --git a/src/components/showcase/EffectsGallery.astro b/src/components/showcase/EffectsGallery.astro
index 294360a..c847fdb 100644
--- a/src/components/showcase/EffectsGallery.astro
+++ b/src/components/showcase/EffectsGallery.astro
@@ -107,25 +107,25 @@
background: white;
border-radius: 1rem;
padding: 1.5rem;
- border: 1px solid #e5e7eb;
+ border: 1px solid #dedbd2;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.effect-title {
font-size: 1rem;
font-weight: 600;
- color: #111827;
+ color: #1b1a18;
margin-bottom: 0.5rem;
}
.effect-description {
font-size: 0.875rem;
- color: #6b7280;
+ color: #77736b;
margin-bottom: 1.25rem;
}
.effect-demo {
- background: #f9fafb;
+ background: #f7f5ef;
border-radius: 0.75rem;
padding: 1.25rem;
min-height: 100px;
@@ -169,8 +169,8 @@
.btn-slide {
background: white;
- color: #111827;
- border: 2px solid #111827;
+ color: #1b1a18;
+ border: 2px solid #1b1a18;
position: relative;
overflow: hidden;
z-index: 1;
@@ -180,7 +180,7 @@
content: '';
position: absolute;
inset: 0;
- background: #111827;
+ background: #1b1a18;
transform: translateX(-100%);
transition: transform 0.3s;
z-index: -1;
@@ -217,10 +217,10 @@
justify-content: center;
font-size: 0.7rem;
font-weight: 500;
- color: #6b7280;
+ color: #77736b;
cursor: pointer;
transition: all 0.3s;
- border: 1px solid #e5e7eb;
+ border: 1px solid #dedbd2;
}
.card-tilt:hover {
@@ -246,7 +246,7 @@
.spinner {
width: 32px;
height: 32px;
- border: 3px solid #e5e7eb;
+ border: 3px solid #dedbd2;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
@@ -277,7 +277,7 @@
.bar {
width: 60px;
height: 6px;
- background: #e5e7eb;
+ background: #dedbd2;
border-radius: 3px;
overflow: hidden;
}
@@ -314,7 +314,7 @@
.text-underline {
font-weight: 500;
- color: #111827;
+ color: #1b1a18;
position: relative;
cursor: pointer;
}
@@ -345,12 +345,12 @@
justify-content: center;
cursor: pointer;
transition: all 0.3s;
- border: 1px solid #e5e7eb;
+ border: 1px solid #dedbd2;
}
.icon-box i {
font-size: 1.25rem;
- color: #6b7280;
+ color: #77736b;
transition: all 0.3s;
}
@@ -396,8 +396,8 @@
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 500;
- color: #6b7280;
- border: 1px solid #e5e7eb;
+ color: #77736b;
+ border: 1px solid #dedbd2;
animation: none;
}
diff --git a/src/components/showcase/HeroPreview.astro b/src/components/showcase/HeroPreview.astro
index 2aed57b..a97fb03 100644
--- a/src/components/showcase/HeroPreview.astro
+++ b/src/components/showcase/HeroPreview.astro
@@ -57,7 +57,7 @@ const { name, style, description } = Astro.props;
background: white;
border-radius: 1rem;
overflow: hidden;
- border: 1px solid #e5e7eb;
+ border: 1px solid #dedbd2;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
@@ -112,7 +112,7 @@ const { name, style, description } = Astro.props;
.btn-primary {
padding: 0.625rem 1.25rem;
background: white;
- color: #111827;
+ color: #1b1a18;
border: none;
border-radius: 0.5rem;
font-weight: 500;
@@ -133,27 +133,27 @@ const { name, style, description } = Astro.props;
.preview-info {
padding: 1.25rem 1.5rem;
- background: #f9fafb;
- border-top: 1px solid #e5e7eb;
+ background: #f7f5ef;
+ border-top: 1px solid #dedbd2;
}
.preview-name {
font-size: 1rem;
font-weight: 600;
- color: #111827;
+ color: #1b1a18;
margin-bottom: 0.375rem;
}
.preview-description {
font-size: 0.875rem;
- color: #6b7280;
+ color: #77736b;
margin: 0;
line-height: 1.5;
}
/* Mesh Gradient Style */
.hero-mesh {
- background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+ background: linear-gradient(135deg, #11110f 0%, #262521 100%);
}
.mesh-bg {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 849fb92..e82eeee 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -55,8 +55,9 @@ const absoluteOgImage = ogImage.startsWith('http') ? ogImage : `${siteOrigin}${o
-
-
+
+
+
{title}
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 548a584..85b1920 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -52,8 +52,8 @@ const currentPath = Astro.url.pathname;
padding: 4rem 0;
min-height: calc(100vh - var(--footer-space, 0px));
background:
- radial-gradient(circle at 12% 14%, rgba(0, 136, 204, 0.09), transparent 36%),
- radial-gradient(circle at 88% 90%, rgba(0, 136, 204, 0.07), transparent 36%),
+ radial-gradient(circle at 12% 14%, rgba(36, 120, 102, 0.09), transparent 36%),
+ radial-gradient(circle at 88% 90%, rgba(36, 120, 102, 0.07), transparent 36%),
linear-gradient(130deg, color-mix(in srgb, var(--bg-primary) 92%, black), var(--bg-primary));
overflow: hidden;
}
@@ -81,8 +81,8 @@ const currentPath = Astro.url.pathname;
pointer-events: none;
border-radius: 24px;
background-image:
- linear-gradient(to right, rgba(250, 250, 249, 0.06) 1px, transparent 1px),
- linear-gradient(to bottom, rgba(250, 250, 249, 0.06) 1px, transparent 1px);
+ linear-gradient(to right, rgba(247, 245, 239, 0.06) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(247, 245, 239, 0.06) 1px, transparent 1px);
background-size: 46px 46px;
opacity: 0.34;
animation: pulse-grid 8s ease-in-out infinite;
@@ -120,7 +120,7 @@ const currentPath = Astro.url.pathname;
border-radius: 26px;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 95%, transparent), color-mix(in srgb, var(--bg-card) 80%, transparent));
box-shadow:
- 0 24px 64px rgba(10, 10, 10, 0.26),
+ 0 24px 64px rgba(17, 17, 15, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
padding: clamp(1.4rem, 3.2vw, 2rem);
backdrop-filter: blur(2px);
@@ -187,10 +187,10 @@ const currentPath = Astro.url.pathname;
border-radius: 32px;
padding: 1.15rem;
background:
- linear-gradient(160deg, rgba(250, 250, 249, 0.06), rgba(250, 250, 249, 0.01)),
+ linear-gradient(160deg, rgba(247, 245, 239, 0.06), rgba(247, 245, 239, 0.01)),
var(--bg-primary);
border: 1px solid var(--border-color);
- box-shadow: 0 26px 70px rgba(10, 10, 10, 0.34), var(--shadow-xl);
+ box-shadow: 0 26px 70px rgba(17, 17, 15, 0.34), var(--shadow-xl);
position: relative;
overflow: hidden;
text-align: center;
@@ -203,7 +203,7 @@ const currentPath = Astro.url.pathname;
position: absolute;
inset: 0;
background:
- radial-gradient(circle at 85% 10%, rgba(0, 136, 204, 0.18), transparent 42%);
+ radial-gradient(circle at 85% 10%, rgba(36, 120, 102, 0.18), transparent 42%);
pointer-events: none;
}
@@ -222,9 +222,9 @@ const currentPath = Astro.url.pathname;
height: 14px;
margin: 0.2rem auto 1rem;
border-radius: 999px;
- background: rgba(250, 250, 249, 0.3);
+ background: rgba(247, 245, 239, 0.3);
opacity: 0.85;
- box-shadow: inset 0 0 0 2px rgba(10, 10, 10, 0.12);
+ box-shadow: inset 0 0 0 2px rgba(17, 17, 15, 0.12);
}
.ios-app-header {
@@ -246,10 +246,10 @@ const currentPath = Astro.url.pathname;
display: grid;
place-items: center;
color: #fff;
- background: linear-gradient(150deg, #0d2130, #1b6d9f 35%, #2ca7de 70%);
+ background: linear-gradient(150deg, #0f2620, #1d6f5e 35%, #3ba58c 70%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.15),
- 0 14px 34px rgba(10, 10, 10, 0.24);
+ 0 14px 34px rgba(17, 17, 15, 0.24);
overflow: hidden;
animation: icon-drift 2.8s ease-in-out infinite alternate;
}
diff --git a/src/pages/apps/currency.astro b/src/pages/apps/currency.astro
index c41077c..49ddfd7 100644
--- a/src/pages/apps/currency.astro
+++ b/src/pages/apps/currency.astro
@@ -114,7 +114,7 @@ const faqs = [
@@ -257,21 +257,21 @@ const faqs = [
}
.currency-hero {
- background: linear-gradient(180deg, var(--ink) 0%, #0f2030 100%);
+ background: var(--night, #171717);
padding: 6rem 0;
}
.currency-hero h1 {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 6vw, 4.5rem);
- color: var(--paper);
+ color: #f7f5ef;
line-height: 1.03;
margin: 0 0 1rem;
max-width: 13ch;
}
.lede {
- color: rgba(250, 250, 249, 0.74);
+ color: rgba(247, 245, 239, 0.74);
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.65;
max-width: 60ch;
@@ -371,7 +371,7 @@ const faqs = [
.screenshot-placeholder {
width: 100%;
border: 1px solid var(--border-color);
- background: linear-gradient(170deg, #12273a 0%, #0b1621 52%, #23354b 100%);
+ background: linear-gradient(170deg, #21211e 0%, #171717 52%, #2b2a26 100%);
aspect-ratio: 9 / 19.5;
object-fit: cover;
display: grid;
@@ -379,13 +379,13 @@ const faqs = [
}
.screenshot-placeholder span {
- color: rgba(250, 250, 249, 0.88);
+ color: rgba(247, 245, 239, 0.88);
font-family: var(--font-mono);
letter-spacing: 0.08em;
}
.screenshot-placeholder small {
- color: rgba(250, 250, 249, 0.58);
+ color: rgba(247, 245, 239, 0.58);
font-size: 0.78rem;
margin-top: 0.4rem;
}
diff --git a/src/pages/apps/index.astro b/src/pages/apps/index.astro
index f8a107e..f46a915 100644
--- a/src/pages/apps/index.astro
+++ b/src/pages/apps/index.astro
@@ -152,14 +152,14 @@ const otherApps = visibleApps.filter(a => a.slug !== featuredApp.slug);
right: 0;
bottom: 0;
background-image:
- linear-gradient(to right, rgba(250, 250, 249, 0.02) 1px, transparent 1px),
- linear-gradient(to bottom, rgba(250, 250, 249, 0.02) 1px, transparent 1px);
+ linear-gradient(to right, rgba(247, 245, 239, 0.02) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(247, 245, 239, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
:global(.dark) .apps-hero {
- background: #0a0a0a;
+ background: #11110f;
}
.apps-hero-inner {
@@ -210,7 +210,7 @@ const otherApps = visibleApps.filter(a => a.slug !== featuredApp.slug);
.apps-hero-title {
font-family: var(--font-heading);
font-size: clamp(3rem, 7vw, 5rem);
- color: var(--paper);
+ color: #f7f5ef;
margin: 0 0 0.5rem;
line-height: 1;
letter-spacing: -0.03em;
@@ -219,14 +219,14 @@ const otherApps = visibleApps.filter(a => a.slug !== featuredApp.slug);
.apps-hero-category {
font-family: var(--font-body);
font-size: 1.125rem;
- color: rgba(250, 250, 249, 0.5);
+ color: rgba(247, 245, 239, 0.5);
margin: 0 0 1.5rem;
}
.apps-hero-desc {
font-family: var(--font-body);
font-size: 1.25rem;
- color: rgba(250, 250, 249, 0.7);
+ color: rgba(247, 245, 239, 0.7);
line-height: 1.6;
max-width: 480px;
margin: 0 0 2rem;
@@ -253,8 +253,8 @@ const otherApps = visibleApps.filter(a => a.slug !== featuredApp.slug);
}
.apps-currency-cta {
- color: rgba(250, 250, 249, 0.9);
- border-color: rgba(250, 250, 249, 0.25);
+ color: rgba(247, 245, 239, 0.9);
+ border-color: rgba(247, 245, 239, 0.25);
}
.apps-hero-cta .cta-arrow {
@@ -273,7 +273,7 @@ const otherApps = visibleApps.filter(a => a.slug !== featuredApp.slug);
width: 200px;
height: 200px;
border-radius: 44px;
- box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 100px rgba(0, 136, 204, 0.1);
+ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 100px rgba(36, 120, 102, 0.1);
}
@media (min-width: 768px) {
diff --git a/src/pages/breathe-easy/index.astro b/src/pages/breathe-easy/index.astro
index 2d79088..8710af4 100644
--- a/src/pages/breathe-easy/index.astro
+++ b/src/pages/breathe-easy/index.astro
@@ -202,11 +202,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--be-accent-deep: #4f46e5;
--be-accent-bg: #eef2ff;
--be-secondary: #38bdf8;
- --be-bg: #f8fafc;
+ --be-bg: #f7f5ef;
--be-surface: #ffffff;
- --be-border: rgba(148, 163, 184, 0.15);
- --be-text: #0f172a;
- --be-text-muted: #64748b;
+ --be-border: rgba(161, 157, 147, 0.15);
+ --be-text: #11110f;
+ --be-text-muted: #77736b;
--be-feature-icon-bg: rgba(99, 102, 241, 0.08);
--be-feature-icon-border: rgba(99, 102, 241, 0.12);
}
@@ -215,11 +215,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--be-accent: #818cf8;
--be-accent-deep: #6366f1;
--be-accent-bg: #1e1b4b;
- --be-bg: #0a0f1a;
- --be-surface: #111827;
- --be-border: rgba(148, 163, 184, 0.08);
- --be-text: #f1f5f9;
- --be-text-muted: #94a3b8;
+ --be-bg: #141413;
+ --be-surface: #1b1a18;
+ --be-border: rgba(161, 157, 147, 0.08);
+ --be-text: #efede4;
+ --be-text-muted: #a19d93;
--be-feature-icon-bg: rgba(99, 102, 241, 0.1);
--be-feature-icon-border: rgba(99, 102, 241, 0.15);
}
@@ -278,7 +278,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Hero ─── */
.be-hero {
- background: #0a0f1a;
+ background: #141413;
padding: 4rem 0 5rem;
position: relative;
overflow: hidden;
@@ -349,7 +349,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.be-hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
- color: #f1f5f9;
+ color: #efede4;
margin-bottom: 1.5rem;
line-height: 1.05;
}
@@ -361,7 +361,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.be-hero-subtitle {
font-size: 1.125rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.7;
max-width: 480px;
margin-bottom: 2rem;
@@ -396,7 +396,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.be-hero-note {
font-family: var(--font-mono);
font-size: 0.75rem;
- color: #94a3b8;
+ color: #a19d93;
}
.be-hero-icon-wrap { flex-shrink: 0; }
@@ -419,7 +419,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Screenshots (run-easy style) ─── */
.be-screenshots-section {
padding: 4rem 0;
- background: var(--be-bg, #fafaf9);
+ background: var(--be-bg, #f7f5ef);
}
.be-section-header {
@@ -428,7 +428,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.be-screenshots-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
- color: var(--be-text, #0a0a0a);
+ color: var(--be-text, #11110f);
margin-top: 0.5rem;
}
@@ -443,7 +443,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.be-screenshots-scroll::-webkit-scrollbar { height: 4px; }
.be-screenshots-scroll::-webkit-scrollbar-track { background: transparent; }
- .be-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--be-border, #e7e5e4); border-radius: 2px; }
+ .be-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--be-border, #dedbd2); border-radius: 2px; }
.be-screenshot-card {
flex-shrink: 0;
@@ -456,8 +456,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
width: 100%;
height: auto;
border-radius: 16px;
- box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
- border: 1px solid var(--be-border, #e7e5e4);
+ box-shadow: 0 12px 40px rgba(17, 17, 15, 0.08), 0 4px 12px rgba(17, 17, 15, 0.04);
+ border: 1px solid var(--be-border, #dedbd2);
transition: transform 0.3s ease;
}
@@ -469,7 +469,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
display: block;
margin-top: 0.75rem;
font-size: 0.8125rem;
- color: var(--be-text-muted, #78716c);
+ color: var(--be-text-muted, #77736b);
letter-spacing: 0.02em;
}
@@ -573,10 +573,10 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Privacy Banner ─── */
.be-privacy-banner {
- background: #0a0f1a;
+ background: #141413;
padding: 5rem 0;
- border-top: 1px solid rgba(148, 163, 184, 0.08);
- border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+ border-top: 1px solid rgba(161, 157, 147, 0.08);
+ border-bottom: 1px solid rgba(161, 157, 147, 0.08);
}
.be-privacy-inner {
@@ -585,7 +585,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.be-privacy-title {
font-size: clamp(2rem, 5vw, 3rem);
- color: #f1f5f9;
+ color: #efede4;
margin-top: 1rem;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
@@ -593,7 +593,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.be-privacy-text {
font-size: 1.0625rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.8;
margin-bottom: 2rem;
}
diff --git a/src/pages/caffeine-easy/index.astro b/src/pages/caffeine-easy/index.astro
index 4c5bdf0..8e719fe 100644
--- a/src/pages/caffeine-easy/index.astro
+++ b/src/pages/caffeine-easy/index.astro
@@ -217,11 +217,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ce-accent-light: #d97706;
--ce-accent-bg: #fef3c7;
--ce-warm: #78350f;
- --ce-bg: #f8fafc;
+ --ce-bg: #f7f5ef;
--ce-surface: #ffffff;
- --ce-border: rgba(148, 163, 184, 0.15);
- --ce-text: #0f172a;
- --ce-text-muted: #64748b;
+ --ce-border: rgba(161, 157, 147, 0.15);
+ --ce-text: #11110f;
+ --ce-text-muted: #77736b;
--ce-feature-icon-bg: rgba(180, 83, 9, 0.08);
--ce-feature-icon-border: rgba(180, 83, 9, 0.12);
}
@@ -231,11 +231,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ce-accent-deep: #f59e0b;
--ce-accent-light: #fcd34d;
--ce-accent-bg: #451a03;
- --ce-bg: #0a0f1a;
- --ce-surface: #111827;
- --ce-border: rgba(148, 163, 184, 0.08);
- --ce-text: #f1f5f9;
- --ce-text-muted: #94a3b8;
+ --ce-bg: #141413;
+ --ce-surface: #1b1a18;
+ --ce-border: rgba(161, 157, 147, 0.08);
+ --ce-text: #efede4;
+ --ce-text-muted: #a19d93;
--ce-feature-icon-bg: rgba(251, 191, 36, 0.1);
--ce-feature-icon-border: rgba(251, 191, 36, 0.15);
}
@@ -377,7 +377,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-subtitle {
font-size: 1.125rem;
- color: #d6d3d1;
+ color: #c6c2b6;
line-height: 1.7;
max-width: 480px;
margin-bottom: 2rem;
@@ -412,7 +412,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-note {
font-family: var(--font-mono);
font-size: 0.75rem;
- color: #a8a29e;
+ color: #a19d93;
}
.ce-hero-icon-wrap { flex-shrink: 0; }
@@ -602,7 +602,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-privacy-text {
font-size: 1.0625rem;
- color: #d6d3d1;
+ color: #c6c2b6;
line-height: 1.8;
margin-bottom: 2rem;
}
@@ -720,7 +720,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Screenshots (run-easy style) ─── */
.ce-screenshots-section {
padding: 4rem 0;
- background: var(--ce-bg, #fafaf9);
+ background: var(--ce-bg, #f7f5ef);
}
.ce-section-header {
@@ -729,7 +729,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-screenshots-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
- color: var(--ce-text, #0a0a0a);
+ color: var(--ce-text, #11110f);
margin-top: 0.5rem;
}
@@ -744,7 +744,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-screenshots-scroll::-webkit-scrollbar { height: 4px; }
.ce-screenshots-scroll::-webkit-scrollbar-track { background: transparent; }
- .ce-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--ce-border, #e7e5e4); border-radius: 2px; }
+ .ce-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--ce-border, #dedbd2); border-radius: 2px; }
.ce-screenshot-card {
flex-shrink: 0;
@@ -757,8 +757,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
width: 100%;
height: auto;
border-radius: 16px;
- box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
- border: 1px solid var(--ce-border, #e7e5e4);
+ box-shadow: 0 12px 40px rgba(17, 17, 15, 0.08), 0 4px 12px rgba(17, 17, 15, 0.04);
+ border: 1px solid var(--ce-border, #dedbd2);
transition: transform 0.3s ease;
}
@@ -770,7 +770,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
display: block;
margin-top: 0.75rem;
font-size: 0.8125rem;
- color: var(--ce-text-muted, #78716c);
+ color: var(--ce-text-muted, #77736b);
letter-spacing: 0.02em;
}
diff --git a/src/pages/contrast/index.astro b/src/pages/contrast/index.astro
index afe9323..bef3730 100644
--- a/src/pages/contrast/index.astro
+++ b/src/pages/contrast/index.astro
@@ -185,11 +185,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ct-accent-deep: #0891b2;
--ct-accent-bg: #ecfeff;
--ct-warm: #f97316;
- --ct-bg: #f8fafc;
+ --ct-bg: #f7f5ef;
--ct-surface: #ffffff;
- --ct-border: rgba(148, 163, 184, 0.15);
- --ct-text: #0f172a;
- --ct-text-muted: #64748b;
+ --ct-border: rgba(161, 157, 147, 0.15);
+ --ct-text: #11110f;
+ --ct-text-muted: #77736b;
--ct-feature-icon-bg: rgba(6, 182, 212, 0.08);
--ct-feature-icon-border: rgba(6, 182, 212, 0.12);
}
@@ -198,11 +198,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ct-accent: #22d3ee;
--ct-accent-deep: #06b6d4;
--ct-accent-bg: #083344;
- --ct-bg: #0a0f1a;
- --ct-surface: #111827;
- --ct-border: rgba(148, 163, 184, 0.08);
- --ct-text: #f1f5f9;
- --ct-text-muted: #94a3b8;
+ --ct-bg: #141413;
+ --ct-surface: #1b1a18;
+ --ct-border: rgba(161, 157, 147, 0.08);
+ --ct-text: #efede4;
+ --ct-text-muted: #a19d93;
--ct-feature-icon-bg: rgba(6, 182, 212, 0.1);
--ct-feature-icon-border: rgba(6, 182, 212, 0.15);
}
@@ -261,7 +261,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Hero — Dark, dramatic, dual-glow (stays dark in both modes) ─── */
.ct-hero {
- background: #0a0f1a;
+ background: #141413;
padding: 4rem 0 5rem;
position: relative;
overflow: hidden;
@@ -332,7 +332,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ct-hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
- color: #f1f5f9;
+ color: #efede4;
margin-bottom: 1.5rem;
line-height: 1.05;
}
@@ -344,7 +344,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ct-hero-subtitle {
font-size: 1.125rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.7;
max-width: 480px;
margin-bottom: 2rem;
@@ -379,7 +379,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ct-hero-note {
font-family: var(--font-mono);
font-size: 0.75rem;
- color: #94a3b8;
+ color: #a19d93;
}
.ct-hero-icon-wrap { flex-shrink: 0; }
@@ -545,10 +545,10 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Privacy Banner — Full-width dark (stays dark in both modes) ─── */
.ct-privacy-banner {
- background: #0a0f1a;
+ background: #141413;
padding: 5rem 0;
- border-top: 1px solid rgba(148, 163, 184, 0.08);
- border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+ border-top: 1px solid rgba(161, 157, 147, 0.08);
+ border-bottom: 1px solid rgba(161, 157, 147, 0.08);
}
.ct-privacy-inner {
@@ -557,7 +557,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ct-privacy-title {
font-size: clamp(2rem, 5vw, 3rem);
- color: #f1f5f9;
+ color: #efede4;
margin-top: 1rem;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
@@ -565,7 +565,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ct-privacy-text {
font-size: 1.0625rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.8;
margin-bottom: 2rem;
}
diff --git a/src/pages/count-easy/index.astro b/src/pages/count-easy/index.astro
index 057d6b8..fb1ed97 100644
--- a/src/pages/count-easy/index.astro
+++ b/src/pages/count-easy/index.astro
@@ -200,11 +200,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ce-accent-deep: #7c3aed;
--ce-accent-bg: #f5f3ff;
--ce-secondary: #ec4899;
- --ce-bg: #f8fafc;
+ --ce-bg: #f7f5ef;
--ce-surface: #ffffff;
- --ce-border: rgba(148, 163, 184, 0.15);
- --ce-text: #0f172a;
- --ce-text-muted: #64748b;
+ --ce-border: rgba(161, 157, 147, 0.15);
+ --ce-text: #11110f;
+ --ce-text-muted: #77736b;
--ce-feature-icon-bg: rgba(139, 92, 246, 0.08);
--ce-feature-icon-border: rgba(139, 92, 246, 0.12);
}
@@ -213,11 +213,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ce-accent: #a78bfa;
--ce-accent-deep: #8b5cf6;
--ce-accent-bg: #1e1b4b;
- --ce-bg: #0a0f1a;
- --ce-surface: #111827;
- --ce-border: rgba(148, 163, 184, 0.08);
- --ce-text: #f1f5f9;
- --ce-text-muted: #94a3b8;
+ --ce-bg: #141413;
+ --ce-surface: #1b1a18;
+ --ce-border: rgba(161, 157, 147, 0.08);
+ --ce-text: #efede4;
+ --ce-text-muted: #a19d93;
--ce-feature-icon-bg: rgba(139, 92, 246, 0.1);
--ce-feature-icon-border: rgba(139, 92, 246, 0.15);
}
@@ -276,7 +276,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Hero ─── */
.ce-hero {
- background: #0a0f1a;
+ background: #141413;
padding: 4rem 0 5rem;
position: relative;
overflow: hidden;
@@ -347,7 +347,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
- color: #f1f5f9;
+ color: #efede4;
margin-bottom: 1.5rem;
line-height: 1.05;
}
@@ -359,7 +359,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-subtitle {
font-size: 1.125rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.7;
max-width: 480px;
margin-bottom: 2rem;
@@ -394,7 +394,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-note {
font-family: var(--font-mono);
font-size: 0.75rem;
- color: #94a3b8;
+ color: #a19d93;
}
.ce-hero-icon-wrap { flex-shrink: 0; }
@@ -521,10 +521,10 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Privacy Banner ─── */
.ce-privacy-banner {
- background: #0a0f1a;
+ background: #141413;
padding: 5rem 0;
- border-top: 1px solid rgba(148, 163, 184, 0.08);
- border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+ border-top: 1px solid rgba(161, 157, 147, 0.08);
+ border-bottom: 1px solid rgba(161, 157, 147, 0.08);
}
.ce-privacy-inner {
@@ -533,7 +533,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-privacy-title {
font-size: clamp(2rem, 5vw, 3rem);
- color: #f1f5f9;
+ color: #efede4;
margin-top: 1rem;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
@@ -541,7 +541,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-privacy-text {
font-size: 1.0625rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.8;
margin-bottom: 2rem;
}
@@ -659,7 +659,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Screenshots (run-easy style) ─── */
.ce-screenshots-section {
padding: 4rem 0;
- background: var(--ce-bg, #fafaf9);
+ background: var(--ce-bg, #f7f5ef);
}
.ce-section-header {
@@ -668,7 +668,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-screenshots-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
- color: var(--ce-text, #0a0a0a);
+ color: var(--ce-text, #11110f);
margin-top: 0.5rem;
}
@@ -683,7 +683,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-screenshots-scroll::-webkit-scrollbar { height: 4px; }
.ce-screenshots-scroll::-webkit-scrollbar-track { background: transparent; }
- .ce-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--ce-border, #e7e5e4); border-radius: 2px; }
+ .ce-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--ce-border, #dedbd2); border-radius: 2px; }
.ce-screenshot-card {
flex-shrink: 0;
@@ -696,8 +696,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
width: 100%;
height: auto;
border-radius: 16px;
- box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
- border: 1px solid var(--ce-border, #e7e5e4);
+ box-shadow: 0 12px 40px rgba(17, 17, 15, 0.08), 0 4px 12px rgba(17, 17, 15, 0.04);
+ border: 1px solid var(--ce-border, #dedbd2);
transition: transform 0.3s ease;
}
@@ -709,7 +709,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
display: block;
margin-top: 0.75rem;
font-size: 0.8125rem;
- color: var(--ce-text-muted, #78716c);
+ color: var(--ce-text-muted, #77736b);
letter-spacing: 0.02em;
}
diff --git a/src/pages/cycle-easy/index.astro b/src/pages/cycle-easy/index.astro
index dfe9e60..92fc42e 100644
--- a/src/pages/cycle-easy/index.astro
+++ b/src/pages/cycle-easy/index.astro
@@ -247,9 +247,9 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ce-accent-bg: #fff1f2;
--ce-bg: #fafafa;
--ce-surface: #ffffff;
- --ce-border: rgba(148, 163, 184, 0.15);
- --ce-text: #0f172a;
- --ce-text-muted: #64748b;
+ --ce-border: rgba(161, 157, 147, 0.15);
+ --ce-text: #11110f;
+ --ce-text-muted: #77736b;
--ce-feature-icon-bg: rgba(225, 29, 72, 0.08);
--ce-feature-icon-border: rgba(225, 29, 72, 0.12);
}
@@ -261,9 +261,9 @@ import ExploreApps from '../../components/ExploreApps.astro';
--ce-accent-bg: #1c1017;
--ce-bg: #0a0a0b;
--ce-surface: #111113;
- --ce-border: rgba(148, 163, 184, 0.08);
- --ce-text: #f1f5f9;
- --ce-text-muted: #94a3b8;
+ --ce-border: rgba(161, 157, 147, 0.08);
+ --ce-text: #efede4;
+ --ce-text-muted: #a19d93;
--ce-feature-icon-bg: rgba(251, 113, 133, 0.1);
--ce-feature-icon-border: rgba(251, 113, 133, 0.15);
}
@@ -393,7 +393,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
- color: #f1f5f9;
+ color: #efede4;
margin-bottom: 1.5rem;
line-height: 1.05;
}
@@ -405,7 +405,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-subtitle {
font-size: 1.125rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.7;
max-width: 520px;
margin-bottom: 2rem;
@@ -429,7 +429,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-coming-badge {
font-family: var(--font-mono);
font-size: 0.8125rem;
- color: #f1f5f9;
+ color: #efede4;
padding: 0.75rem 1.5rem;
background: rgba(251, 113, 133, 0.15);
border: 1px solid rgba(251, 113, 133, 0.3);
@@ -439,7 +439,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-hero-note {
font-family: var(--font-mono);
font-size: 0.75rem;
- color: #94a3b8;
+ color: #a19d93;
}
.ce-hero-icon-wrap { flex-shrink: 0; }
@@ -672,8 +672,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-healthkit-section {
background: #0a0a0b;
padding: 5rem 0;
- border-top: 1px solid rgba(148, 163, 184, 0.08);
- border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+ border-top: 1px solid rgba(161, 157, 147, 0.08);
+ border-bottom: 1px solid rgba(161, 157, 147, 0.08);
}
.ce-healthkit-inner {
@@ -684,19 +684,19 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-healthkit-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
- color: #f1f5f9;
+ color: #efede4;
margin-top: 1rem;
margin-bottom: 1.25rem;
}
.ce-healthkit-text {
font-size: 1.0625rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.8;
}
.ce-healthkit-text strong {
- color: #f1f5f9;
+ color: #efede4;
}
/* ─── CTA ─── */
@@ -797,7 +797,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Screenshots (run-easy style) ─── */
.ce-screenshots-section {
padding: 4rem 0;
- background: var(--ce-bg, #fafaf9);
+ background: var(--ce-bg, #f7f5ef);
}
.ce-section-header {
@@ -806,7 +806,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-screenshots-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
- color: var(--ce-text, #0a0a0a);
+ color: var(--ce-text, #11110f);
margin-top: 0.5rem;
}
@@ -821,7 +821,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.ce-screenshots-scroll::-webkit-scrollbar { height: 4px; }
.ce-screenshots-scroll::-webkit-scrollbar-track { background: transparent; }
- .ce-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--ce-border, #e7e5e4); border-radius: 2px; }
+ .ce-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--ce-border, #dedbd2); border-radius: 2px; }
.ce-screenshot-card {
flex-shrink: 0;
@@ -834,8 +834,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
width: 100%;
height: auto;
border-radius: 16px;
- box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
- border: 1px solid var(--ce-border, #e7e5e4);
+ box-shadow: 0 12px 40px rgba(17, 17, 15, 0.08), 0 4px 12px rgba(17, 17, 15, 0.04);
+ border: 1px solid var(--ce-border, #dedbd2);
transition: transform 0.3s ease;
}
@@ -847,7 +847,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
display: block;
margin-top: 0.75rem;
font-size: 0.8125rem;
- color: var(--ce-text-muted, #78716c);
+ color: var(--ce-text-muted, #77736b);
letter-spacing: 0.02em;
}
diff --git a/src/pages/cycle-easy/support.astro b/src/pages/cycle-easy/support.astro
index 6d91bf0..526ed1c 100644
--- a/src/pages/cycle-easy/support.astro
+++ b/src/pages/cycle-easy/support.astro
@@ -181,7 +181,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
- color: var(--text-primary, #0a0a0a);
+ color: var(--text-primary, #11110f);
cursor: pointer;
list-style: none;
display: flex;
@@ -219,7 +219,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
}
.faq-answer strong {
- color: var(--text-primary, #0a0a0a);
+ color: var(--text-primary, #11110f);
}
:global(.dark) .faq-question {
diff --git a/src/pages/decibel/index.astro b/src/pages/decibel/index.astro
index 2c77a7a..dafea63 100644
--- a/src/pages/decibel/index.astro
+++ b/src/pages/decibel/index.astro
@@ -217,11 +217,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--db-accent-deep: #ea580c;
--db-accent-bg: #fff7ed;
--db-secondary: #fbbf24;
- --db-bg: #f8fafc;
+ --db-bg: #f7f5ef;
--db-surface: #ffffff;
- --db-border: rgba(148, 163, 184, 0.15);
- --db-text: #0f172a;
- --db-text-muted: #64748b;
+ --db-border: rgba(161, 157, 147, 0.15);
+ --db-text: #11110f;
+ --db-text-muted: #77736b;
--db-feature-icon-bg: rgba(249, 115, 22, 0.08);
--db-feature-icon-border: rgba(249, 115, 22, 0.12);
}
@@ -230,11 +230,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--db-accent: #fb923c;
--db-accent-deep: #f97316;
--db-accent-bg: #431407;
- --db-bg: #0a0f1a;
- --db-surface: #111827;
- --db-border: rgba(148, 163, 184, 0.08);
- --db-text: #f1f5f9;
- --db-text-muted: #94a3b8;
+ --db-bg: #141413;
+ --db-surface: #1b1a18;
+ --db-border: rgba(161, 157, 147, 0.08);
+ --db-text: #efede4;
+ --db-text-muted: #a19d93;
--db-feature-icon-bg: rgba(249, 115, 22, 0.1);
--db-feature-icon-border: rgba(249, 115, 22, 0.15);
}
@@ -293,7 +293,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Hero ─── */
.db-hero {
- background: #0a0f1a;
+ background: #141413;
padding: 4rem 0 5rem;
position: relative;
overflow: hidden;
@@ -364,7 +364,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.db-hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
- color: #f1f5f9;
+ color: #efede4;
margin-bottom: 1.5rem;
line-height: 1.05;
}
@@ -376,7 +376,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.db-hero-subtitle {
font-size: 1.125rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.7;
max-width: 480px;
margin-bottom: 2rem;
@@ -411,7 +411,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.db-hero-note {
font-family: var(--font-mono);
font-size: 0.75rem;
- color: #94a3b8;
+ color: #a19d93;
}
.db-hero-icon-wrap { flex-shrink: 0; }
@@ -574,10 +574,10 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Privacy Banner ─── */
.db-privacy-banner {
- background: #0a0f1a;
+ background: #141413;
padding: 5rem 0;
- border-top: 1px solid rgba(148, 163, 184, 0.08);
- border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+ border-top: 1px solid rgba(161, 157, 147, 0.08);
+ border-bottom: 1px solid rgba(161, 157, 147, 0.08);
}
.db-privacy-inner {
@@ -586,7 +586,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.db-privacy-title {
font-size: clamp(2rem, 5vw, 3rem);
- color: #f1f5f9;
+ color: #efede4;
margin-top: 1rem;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
@@ -594,7 +594,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.db-privacy-text {
font-size: 1.0625rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.8;
margin-bottom: 2rem;
}
@@ -712,7 +712,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Screenshots (run-easy style) ─── */
.db-screenshots-section {
padding: 4rem 0;
- background: var(--db-bg, #fafaf9);
+ background: var(--db-bg, #f7f5ef);
}
.db-section-header {
@@ -721,7 +721,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.db-screenshots-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
- color: var(--db-text, #0a0a0a);
+ color: var(--db-text, #11110f);
margin-top: 0.5rem;
}
@@ -736,7 +736,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.db-screenshots-scroll::-webkit-scrollbar { height: 4px; }
.db-screenshots-scroll::-webkit-scrollbar-track { background: transparent; }
- .db-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--db-border, #e7e5e4); border-radius: 2px; }
+ .db-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--db-border, #dedbd2); border-radius: 2px; }
.db-screenshot-card {
flex-shrink: 0;
@@ -749,8 +749,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
width: 100%;
height: auto;
border-radius: 16px;
- box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
- border: 1px solid var(--db-border, #e7e5e4);
+ box-shadow: 0 12px 40px rgba(17, 17, 15, 0.08), 0 4px 12px rgba(17, 17, 15, 0.04);
+ border: 1px solid var(--db-border, #dedbd2);
transition: transform 0.3s ease;
}
@@ -762,7 +762,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
display: block;
margin-top: 0.75rem;
font-size: 0.8125rem;
- color: var(--db-text-muted, #78716c);
+ color: var(--db-text-muted, #77736b);
letter-spacing: 0.02em;
}
diff --git a/src/pages/fast-easy/index.astro b/src/pages/fast-easy/index.astro
index f1c7253..24eb939 100644
--- a/src/pages/fast-easy/index.astro
+++ b/src/pages/fast-easy/index.astro
@@ -179,10 +179,10 @@ import ExploreApps from '../../components/ExploreApps.astro';
--fe-bg: #ffffff;
--fe-bg-alt: #fafafa;
--fe-bg-card: #ffffff;
- --fe-text: #0a0a0a;
- --fe-text-secondary: #44403c;
- --fe-text-muted: #78716c;
- --fe-border: #e7e5e4;
+ --fe-text: #11110f;
+ --fe-text-secondary: #46433c;
+ --fe-text-muted: #77736b;
+ --fe-border: #dedbd2;
--fe-privacy-bg: #1a0f0a;
--fe-privacy-text: #ffedd5;
--fe-privacy-muted: #8a6a5b;
@@ -192,11 +192,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--fe-accent: #fb923c;
--fe-accent-deep: #f97316;
--fe-bg: #000000;
- --fe-bg-alt: #0a0a0a;
- --fe-bg-card: #141414;
- --fe-text: #e2e8f0;
- --fe-text-secondary: #94a3b8;
- --fe-text-muted: #64748b;
+ --fe-bg-alt: #11110f;
+ --fe-bg-card: #191917;
+ --fe-text: #dedbd2;
+ --fe-text-secondary: #a19d93;
+ --fe-text-muted: #77736b;
--fe-border: rgba(249, 115, 22, 0.12);
--fe-privacy-bg: #120d07;
--fe-privacy-text: #ffedd5;
diff --git a/src/pages/focus-easy/index.astro b/src/pages/focus-easy/index.astro
index 70fa27e..f5d53b5 100644
--- a/src/pages/focus-easy/index.astro
+++ b/src/pages/focus-easy/index.astro
@@ -219,11 +219,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--fl-bg: #ffffff;
--fl-bg-alt: #fafafa;
--fl-bg-card: #ffffff;
- --fl-text: #0a0a0a;
+ --fl-text: #11110f;
--fl-text-secondary: #404040;
--fl-text-muted: #737373;
--fl-border: #e5e5e5;
- --fl-privacy-bg: #0a0a0a;
+ --fl-privacy-bg: #11110f;
--fl-privacy-text: #fafafa;
--fl-privacy-muted: #a3a3a3;
}
@@ -232,13 +232,13 @@ import ExploreApps from '../../components/ExploreApps.astro';
--fl-accent: #a3a3a3;
--fl-accent-deep: #fafafa;
--fl-bg: #000000;
- --fl-bg-alt: #0a0a0a;
- --fl-bg-card: #141414;
+ --fl-bg-alt: #11110f;
+ --fl-bg-card: #191917;
--fl-text: #fafafa;
--fl-text-secondary: #d4d4d4;
--fl-text-muted: #737373;
- --fl-border: #262626;
- --fl-privacy-bg: #0a0a0a;
+ --fl-border: #2b2a26;
+ --fl-privacy-bg: #11110f;
--fl-privacy-text: #fafafa;
--fl-privacy-muted: #a3a3a3;
}
@@ -648,7 +648,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Screenshots (run-easy style) ─── */
.fl-screenshots-section {
padding: 4rem 0;
- background: var(--fl-bg, #fafaf9);
+ background: var(--fl-bg, #f7f5ef);
}
.fl-section-header {
@@ -657,7 +657,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.fl-screenshots-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
- color: var(--fl-text, #0a0a0a);
+ color: var(--fl-text, #11110f);
margin-top: 0.5rem;
}
@@ -672,7 +672,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.fl-screenshots-scroll::-webkit-scrollbar { height: 4px; }
.fl-screenshots-scroll::-webkit-scrollbar-track { background: transparent; }
- .fl-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--fl-border, #e7e5e4); border-radius: 2px; }
+ .fl-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--fl-border, #dedbd2); border-radius: 2px; }
.fl-screenshot-card {
flex-shrink: 0;
@@ -685,8 +685,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
width: 100%;
height: auto;
border-radius: 16px;
- box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
- border: 1px solid var(--fl-border, #e7e5e4);
+ box-shadow: 0 12px 40px rgba(17, 17, 15, 0.08), 0 4px 12px rgba(17, 17, 15, 0.04);
+ border: 1px solid var(--fl-border, #dedbd2);
transition: transform 0.3s ease;
}
@@ -698,7 +698,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
display: block;
margin-top: 0.75rem;
font-size: 0.8125rem;
- color: var(--fl-text-muted, #78716c);
+ color: var(--fl-text-muted, #77736b);
letter-spacing: 0.02em;
}
diff --git a/src/pages/healthkit-run-generator/index.astro b/src/pages/healthkit-run-generator/index.astro
index 29c5030..ab99843 100644
--- a/src/pages/healthkit-run-generator/index.astro
+++ b/src/pages/healthkit-run-generator/index.astro
@@ -440,9 +440,9 @@ import Footer from '../../components/Footer.astro';
function getChartColors() {
const isDark = document.documentElement.classList.contains('dark');
return {
- grid: isDark ? '#222228' : '#e7e5e4',
- label: isDark ? '#5c5c66' : '#78716c',
- text: isDark ? '#e4e4e7' : '#0a0a0a',
+ grid: isDark ? '#222228' : '#dedbd2',
+ label: isDark ? '#5c5c66' : '#77736b',
+ text: isDark ? '#e4e4e7' : '#11110f',
cardBg: isDark ? '#16161a' : '#ffffff',
};
}
@@ -712,14 +712,14 @@ import Footer from '../../components/Footer.astro';
left: 0;
right: 0;
z-index: 100;
- background: rgba(250, 250, 249, 0.85);
+ background: rgba(247, 245, 239, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-color);
}
:global(.dark) .hkr-nav {
- background: rgba(10, 10, 10, 0.8);
+ background: rgba(17, 17, 15, 0.8);
}
.hkr-nav-inner {
diff --git a/src/pages/hydrate/index.astro b/src/pages/hydrate/index.astro
index 1d430eb..7caa6d3 100644
--- a/src/pages/hydrate/index.astro
+++ b/src/pages/hydrate/index.astro
@@ -201,11 +201,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--hy-accent-deep: #0284c7;
--hy-accent-light: #38bdf8;
--hy-accent-bg: #e0f2fe;
- --hy-bg: #f8fafc;
+ --hy-bg: #f7f5ef;
--hy-surface: #ffffff;
- --hy-border: rgba(148, 163, 184, 0.15);
- --hy-text: #0f172a;
- --hy-text-muted: #64748b;
+ --hy-border: rgba(161, 157, 147, 0.15);
+ --hy-text: #11110f;
+ --hy-text-muted: #77736b;
--hy-feature-icon-bg: rgba(14, 165, 233, 0.08);
--hy-feature-icon-border: rgba(14, 165, 233, 0.12);
}
@@ -215,11 +215,11 @@ import ExploreApps from '../../components/ExploreApps.astro';
--hy-accent-deep: #0ea5e9;
--hy-accent-light: #7dd3fc;
--hy-accent-bg: #082f49;
- --hy-bg: #0a0f1a;
- --hy-surface: #111827;
- --hy-border: rgba(148, 163, 184, 0.08);
- --hy-text: #f1f5f9;
- --hy-text-muted: #94a3b8;
+ --hy-bg: #141413;
+ --hy-surface: #1b1a18;
+ --hy-border: rgba(161, 157, 147, 0.08);
+ --hy-text: #efede4;
+ --hy-text-muted: #a19d93;
--hy-feature-icon-bg: rgba(14, 165, 233, 0.1);
--hy-feature-icon-border: rgba(14, 165, 233, 0.15);
}
@@ -278,7 +278,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Hero — Dark, water-inspired with blue glow ─── */
.hy-hero {
- background: #0a0f1a;
+ background: #141413;
padding: 4rem 0 5rem;
position: relative;
overflow: hidden;
@@ -349,7 +349,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.hy-hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
- color: #f1f5f9;
+ color: #efede4;
margin-bottom: 1.5rem;
line-height: 1.05;
}
@@ -361,7 +361,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.hy-hero-subtitle {
font-size: 1.125rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.7;
max-width: 480px;
margin-bottom: 2rem;
@@ -396,7 +396,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.hy-hero-note {
font-family: var(--font-mono);
font-size: 0.75rem;
- color: #94a3b8;
+ color: #a19d93;
}
.hy-hero-icon-wrap { flex-shrink: 0; }
@@ -551,10 +551,10 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Privacy Banner ─── */
.hy-privacy-banner {
- background: #0a0f1a;
+ background: #141413;
padding: 5rem 0;
- border-top: 1px solid rgba(148, 163, 184, 0.08);
- border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+ border-top: 1px solid rgba(161, 157, 147, 0.08);
+ border-bottom: 1px solid rgba(161, 157, 147, 0.08);
}
.hy-privacy-inner {
@@ -563,7 +563,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.hy-privacy-title {
font-size: clamp(2rem, 5vw, 3rem);
- color: #f1f5f9;
+ color: #efede4;
margin-top: 1rem;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
@@ -571,7 +571,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.hy-privacy-text {
font-size: 1.0625rem;
- color: #94a3b8;
+ color: #a19d93;
line-height: 1.8;
margin-bottom: 2rem;
}
@@ -689,7 +689,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
/* ─── Screenshots (run-easy style) ─── */
.hy-screenshots-section {
padding: 4rem 0;
- background: var(--hy-bg, #fafaf9);
+ background: var(--hy-bg, #f7f5ef);
}
.hy-section-header {
@@ -698,7 +698,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.hy-screenshots-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
- color: var(--hy-text, #0a0a0a);
+ color: var(--hy-text, #11110f);
margin-top: 0.5rem;
}
@@ -713,7 +713,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
.hy-screenshots-scroll::-webkit-scrollbar { height: 4px; }
.hy-screenshots-scroll::-webkit-scrollbar-track { background: transparent; }
- .hy-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--hy-border, #e7e5e4); border-radius: 2px; }
+ .hy-screenshots-scroll::-webkit-scrollbar-thumb { background: var(--hy-border, #dedbd2); border-radius: 2px; }
.hy-screenshot-card {
flex-shrink: 0;
@@ -726,8 +726,8 @@ import ExploreApps from '../../components/ExploreApps.astro';
width: 100%;
height: auto;
border-radius: 16px;
- box-shadow: 0 12px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
- border: 1px solid var(--hy-border, #e7e5e4);
+ box-shadow: 0 12px 40px rgba(17, 17, 15, 0.08), 0 4px 12px rgba(17, 17, 15, 0.04);
+ border: 1px solid var(--hy-border, #dedbd2);
transition: transform 0.3s ease;
}
@@ -739,7 +739,7 @@ import ExploreApps from '../../components/ExploreApps.astro';
display: block;
margin-top: 0.75rem;
font-size: 0.8125rem;
- color: var(--hy-text-muted, #78716c);
+ color: var(--hy-text-muted, #77736b);
letter-spacing: 0.02em;
}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 08973e8..2d4b443 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import Hero from '../components/Hero.astro';
-import MobileHero from '../components/MobileHero.astro';
import BenefitCard from '../components/BenefitCard.astro';
import ProcessStep from '../components/ProcessStep.astro';
import TestimonialCard from '../components/TestimonialCard.astro';
@@ -76,25 +75,14 @@ const shuffledIcons = allAppIcons.sort(() => Math.random() - 0.5);
-
-
-
-
-
-
-