diff --git a/src/components/UtilityBar.astro b/src/components/UtilityBar.astro index d57dbb7..277ab87 100644 --- a/src/components/UtilityBar.astro +++ b/src/components/UtilityBar.astro @@ -3,10 +3,11 @@ * MOREMINIMORE - UtilityBar (from v6-utility) * Extracted from Desktop/moreminomore-mockup-v7-5.html lines 571-589 * - * Top info bar — phone + clock + date + mode indicator + email + * Top info bar — phone + clock + date + mode indicator + email + THEME TOGGLE * Phone/email pulled from src/content/settings/site.md (single source of truth) * * Clock/date are updated by fx-animations.ts → fxClock() (id="fx-time", id="fx-date") + * Theme toggle: id="fx-theme-toggle" — click flips data-theme on + saves to localStorage */ import { getEntry } from 'astro:content'; import type { CollectionEntry } from 'astro:content'; @@ -23,8 +24,76 @@ const email = site?.data?.email ?? 'contact@moreminimore.com'; 📅 — — —
- system - ◐ auto + light + ✉ {email}
+ + diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index a30ae9f..f7e2b92 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -37,6 +37,29 @@ const { {title} + + + diff --git a/src/styles/fx-system.css b/src/styles/fx-system.css index a756c60..43703dd 100644 --- a/src/styles/fx-system.css +++ b/src/styles/fx-system.css @@ -480,9 +480,108 @@ img{max-width:100%;display:block} .fx-contact-form:hover{box-shadow:6px 6px 0 var(--coral),0 12px 32px rgba(10,10,10,0.12);transform:translate(-2px,-2px)} .fx-btn.coral{background:linear-gradient(135deg,var(--coral) 0%,#E64A2C 100%)} .fx-btn.coral:hover{background:linear-gradient(135deg,var(--ink) 0%,var(--coral) 100%)} -.fx-marquee-track{animation:none} -.fx-faq-a::after{display:none} -.fx-hero::after{display:none} +.fx-marquee-track{animation:marquee 40s linear infinite} +.fx-faq-a::after{content:"█";display:inline-block;margin-left:4px;color:var(--coral);font-family:'JetBrains Mono',monospace;animation:blink-cursor 1s steps(1) infinite} +.fx-hero::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");opacity:0.05;pointer-events:none;z-index:1;mix-blend-mode:multiply} + +/* ============================================ + DARK MODE OVERRIDE (added 2026-06-13 evening) + Per user spec: light + dark mode with toggle. + Strategy: override CSS tokens, then fix + .fx-utility-bar which had hardcoded dark colors + (background:#0A0A0A) — must use --ink/--paper vars. + ============================================ */ +:root { + --brand-yellow: #FFD60A; + --coral: #FF5A3C; + --ink: #0A0A0A; + --ink-2: #1A1A1A; + --paper: #FAFAFA; + --paper-2: #F5F5F5; + --paper-3: #F0F0F0; + --line: rgba(10,10,10,0.1); + --line-2: rgba(10,10,10,0.2); + --text-dim: rgba(10,10,10,0.6); + --text-dimmer: rgba(10,10,10,0.4); + /* Surface aliases used by utility bar / nav (were hardcoded) */ + --utility-bg: #0A0A0A; + --utility-fg: rgba(250,250,250,0.85); + --utility-fg-dim: rgba(250,250,250,0.7); + --utility-fg-dimmer: rgba(250,250,250,0.5); + --nav-bg: rgba(250,250,250,0.78); + --hero-content-bg: rgba(255,255,255,0.6); + --faq-item-bg: rgba(255,255,255,0.7); + /* soft yellow glow for hero side (3D feel) */ + --soft-yellow-glow: 6px 6px 0 rgba(255,214,10,0.3); +} + +[data-theme="dark"] { + --ink: #FAFAFA; + --ink-2: #F0F0F0; + --paper: #0A0A0A; + --paper-2: #1A1A1A; + --paper-3: #2A2A2A; + --line: rgba(250,250,250,0.12); + --line-2: rgba(250,250,250,0.22); + --text-dim: rgba(250,250,250,0.65); + --text-dimmer: rgba(250,250,250,0.4); + /* In dark mode, utility bar inverts: light bar on dark bg */ + --utility-bg: #FAFAFA; + --utility-fg: rgba(10,10,10,0.85); + --utility-fg-dim: rgba(10,10,10,0.7); + --utility-fg-dimmer: rgba(10,10,10,0.5); + /* Nav: dark glass */ + --nav-bg: rgba(10,10,10,0.85); + /* Hero content: dark glass */ + --hero-content-bg: rgba(26,26,26,0.7); + --faq-item-bg: rgba(26,26,26,0.6); + --soft-yellow-glow: 6px 6px 0 rgba(255,214,10,0.2); + /* Coral stays vibrant in dark mode (it's already high-contrast) */ + /* Yellow stays vibrant (high luminance) */ +} + +/* Utility bar: use --utility-* vars instead of hardcoded colors */ +.fx-utility-bar{background:var(--utility-bg);color:var(--utility-fg)} +.fx-utility-item{color:var(--utility-fg-dim)} +.fx-utility-item strong{color:var(--brand-yellow)} +.fx-theme-toggle{background:rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.15);color:var(--ink)} +[data-theme="dark"] .fx-theme-toggle{background:rgba(250,250,250,0.08);border:1px solid rgba(250,250,250,0.18);color:var(--ink)} +.fx-mode-indicator{color:var(--utility-fg-dimmer)} +[data-theme="dark"] .fx-mode-indicator{color:var(--utility-fg-dimmer)} + +/* Theme toggle button itself */ +.fx-theme-toggle{cursor:pointer;user-select:none} +.fx-theme-toggle:hover{transform:scale(1.05);background:var(--brand-yellow);color:var(--ink)} + +/* Nav: use --nav-bg for theme-aware glass */ +.fx-nav{background:var(--nav-bg)} + +/* Hero content: use --hero-content-bg for theme-aware glass */ +.fx-hero-content{background:var(--hero-content-bg)} + +/* Hero side glow + FAQ item bg: theme-aware */ +.fx-hero-side{box-shadow:var(--soft-yellow-glow)} +.fx-faq-item{background:var(--faq-item-bg)} + +/* Specific dark mode tweaks for elements that need extra contrast */ +[data-theme="dark"] .fx-nav-dropdown{background:var(--paper);border-color:var(--ink)} +[data-theme="dark"] .fx-pricing-card.featured{background:rgba(255,214,10,0.15)} +[data-theme="dark"] .fx-callout{background:linear-gradient(180deg,#FFE600,var(--brand-yellow))} +[data-theme="dark"] .fx-portfolio-card.featured{background:var(--coral);color:#FAFAFA} +[data-theme="dark"] .fx-portfolio-name{background:var(--ink);color:var(--paper)} +[data-theme="dark"] .fx-portfolio-card .fx-portfolio-name{color:#FAFAFA;background:var(--ink)} +[data-theme="dark"] .fx-portfolio-card.featured .fx-portfolio-name{color:var(--brand-yellow);background:var(--ink)} +[data-theme="dark"] .fx-process-num{background:var(--brand-yellow);color:var(--ink)} +[data-theme="dark"] .fx-service-num{background:var(--brand-yellow);color:var(--ink)} +[data-theme="dark"] .fx-prose{color:var(--ink)} + +/* Smooth theme transition (not too jarring) */ +html { transition: background-color 0.3s ease, color 0.3s ease; } +body, .fx-utility-bar, .fx-nav, .fx-hero-content, .fx-case, .fx-services, .fx-callout, +.fx-portfolio, .fx-process, .fx-pricing, .fx-faq, .fx-contact, .fx-footer, .fx-section-header, +.fx-service-card, .fx-portfolio-card, .fx-pricing-card, .fx-faq-item, .fx-prose { + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; +} /* ============================================ NAV DROPDOWN ENHANCEMENT (added 2026-06-13, plan round 2)