Dark mode bug: hardcoded rgba(10,10,10,0.3) used as text color
on dark backgrounds — unreadable.
Fix: html.dark overrides for:
- .marquee-track .ts
- .fx-marquee-track .ts
- .fx-log .ts
- .fx-footer-bottom
All now use rgba(250,238,200,0.4) (warm cream, legible on dark)
User reported: 'header menu มีบรรทัดเกิน แปลกๆ' — the 'หน้าแรก'
active link had 2 horizontal lines under it (coral ::after + gray border-bottom).
ROOT CAUSE: v7-5 .fx-nav-menu>li had border-bottom: 1px solid meant
for MOBILE menu (separating stacked items) but the rule escaped
the @media block during Phase 6.2 refactor and now applied to
ALL viewports.
FIX: Add .fx-nav-menu>li { border-bottom: none; } in base CSS
(placed AFTER the original v7-5 rule so cascade applies it).
Mobile @media block below still re-enables border-bottom:1px
for stacked menu.
Verified in built CSS: 12 .fx-nav-menu rules, override present
and last. Build: 22 pages, 2.06s.
Per user: the mode indicator text 'light/dark/auto' next to the
toggle button is redundant — the button itself shows the current
mode in its label ('◐ auto' / '☀ light' / '☾ dark').
Removed:
- <span id='fx-mode-indicator'> from UtilityBar.astro
- getElementById('fx-mode-indicator') in applyTheme() JS
- (CSS for .fx-mode-indicator stays — minimal cost, no harm)
Build: 22 pages, 2.27s.
ROOT CAUSE found via build artifact analysis:
- Built CSS files (dist/_astro/Base.*.css) had ZERO [data-theme='dark']
selectors even though source had 17. Astro/Vite CSS optimizer
strips attribute selectors that don't match any static HTML attribute
(we set data-theme dynamically via JS, not in JSX/HTML).
- Also stripped: all html { } and body { } rules from source.
- Result: dark mode visually did nothing. Body stayed white.
FIX:
- Replace [data-theme='dark'] with html.dark (17 occurrences in
fx-system.css). Vite keeps .dark class selectors because the
anti-flash script (in Base.astro <head>) sets a class, not an
attribute, which Vite sees as 'used'.
- Update anti-flash script in Base.astro: classList.add/remove
instead of setAttribute('data-theme', ...).
- Update UtilityBar.astro applyTheme() to use classList too.
- Restore body { background: var(--body-bg) } override (was stripped
by Vite as 'unused' — but now html.dark applies to it correctly).
ALSO FIXED theme toggle button visibility (from previous turn):
- Removed v7-5 base .fx-theme-toggle rule (rgba(0.1) opacity made
button invisible — only visible on hover).
- Consolidated into single rule with proper contrast for both modes.
Verified by:
- Build complete: 22 pages, 1.97s
- Built CSS: 17 html.dark selectors present (was 0)
- Body background override present in built CSS
- HTTP server on :4322 serving correct artifacts
User reported 2 issues after Phase 6.2:
1. 'marquee ควรต้องเลื่อนด้วย' — ROOT CAUSE: v7-5 source CSS included
override at end of <style> block:
.fx-marquee-track{animation:none}
.fx-faq-a::after{display:none}
.fx-hero::after{display:none}
These were 'no-op' overrides from the mockup library (which doesn't
actually animate things in showcase mode). Copied verbatim when I
extracted fx-system.css in Phase 1.1, killing marquee + 2 other
animations.
FIX: replaced with the real animations (marquee 40s, blink-cursor,
hero noise overlay). All 3 now actually run.
2. 'เราต้องการ light and dark mode ด้วย โดยมีปุ่มเปลี่ยน mode ได้' —
Implemented full light/dark theme system:
- Added [data-theme='dark'] block in fx-system.css overriding 11
CSS tokens (--ink, --paper, --line, --text-dim, + 5 new
--utility-bg/--nav-bg/--hero-content-bg/etc.)
- Refactored .fx-utility-bar to use --utility-bg/--fg vars instead
of hardcoded #0A0A0A (so it inverts correctly in dark mode)
- Refactored .fx-nav, .fx-hero-content, .fx-hero-side, .fx-faq-item
to use theme-aware vars
- Added 13 [data-theme='dark'] overrides for elements needing
extra contrast tweaks (pricing featured, callout, portfolio name,
process/service numbers, prose)
- Added smooth 0.3s transition on theme change (no jarring swap)
3. Theme toggle button (UtilityBar.astro):
- Replaced text-only indicator with <button id='fx-theme-toggle'>
- 3 modes cycle: auto (follow OS) → light → dark → auto
- Persists to localStorage 'moreminimore-theme'
- Default = 'auto' (follows system preference)
- Button label changes: '◐ auto' / '☀ light' / '☾ dark'
- Mode indicator shows user's chosen mode
- Listens to OS preference change live (when in 'auto' mode)
- ARIA label + title for accessibility
4. Anti-flash inline script in Base.astro <head>:
- Runs synchronously before first paint
- Reads localStorage → applies data-theme
- If 'auto' or unset, follows prefers-color-scheme
- Prevents white→dark flash on first load
Build: 22 pages, 0 errors, 2.11s.
CSS: 545/545 braces, 9 keyframes, 13 dark-mode selectors.
- Footer.astro (v6-footer): REPLACED legacy 439-line version. 4-col sitemap
bound to site settings (phone, email, line, facebook, linkedin) +
servicesDropdown + company links. Logo uses /images/logo-long-black.png
(local, was hardcoded to dataroot CDN in v7-5).
- Base.astro: mount <UtilityBar /> + <Marquee /> + <Navigation /> + <Footer />
around <slot />. Nav receives currentPath for active link highlight.
Animation init now runs BOTH initAnimations (legacy bento) and fxInit (v7-5).
- SWEEP: removed duplicate <Navigation /> / <Footer /> + their imports
from 11 page files. Idempotent script via execute_code.
Verified: all 9 pages return 200, header/footer render exactly once each.
Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 3.1-3.2
- UtilityBar.astro (v6-utility): phone, clock, date, email from site settings
Clock updated by fxClock() in src/lib/fx-animations.ts
- Marquee.astro (v6-marquee): log ticker with 4 entries (animated horizontally)
Content duplicated for seamless loop
- Navigation.astro (v6-nav): REPLACED legacy. Adds 'บริการ' dropdown
(4 services) + 'บทความ' link per plan round 2. Click-to-toggle on mobile.
- src/data/nav.ts: single source of truth for mainLinks + servicesDropdown
- fx-system.css: +27 lines for dropdown styles + active link underline
(v6-nav originally had no dropdown — we added per spec)
Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 2.1-2.4
3 SSR-safe utilities in one module:
- fxClock() — live Thai Buddhist calendar (id=fx-time, id=fx-date)
- fxReveal() — add .revealed to .fx-reveal on scroll (with 2 failsafes)
- fxStagger() — add .staggered to .fx-stagger on scroll (with 2 failsafes)
- fxInit() — convenience to run all 3
Typed with HTMLElement generics. Uses standard IntersectionObserver.
Namespaced .fx-* classes — no collision with legacy src/lib/animations.ts
(which uses .reveal / counterUp for bento components).
Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 1.3
fx-system.css is v7-5's .fx-* design system. global.css continues to
serve the legacy bento components (still used by /about, /services,
/contact, /faq, /blog). No collision because all v7-5 classes are
prefixed .fx-*. No visual change yet — components not wired yet.
Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 1.2
ai-consult service has data.services[i].items (not .bullets), so .map(bullets) crashed during build. Use s.bullets || s.items || [] fallback. Also data-surface defaults to 'white' when missing.
teal-soft: #ccfbf1 (pale teal-green) → #bae6fd (pale sky blue)
mint-soft: #d1fae5 (pale green) — unchanged
Now the two tiles are clearly different: one is green-mint, the other is blue-cyan
Changes:
- Added new surface variant 'teal-soft' to BentoTile (uses --color-teal-soft)
- Replaced vivid purple/coral with yellow (brand) and teal-soft (light teal)
- Colors now: mint (light green) · yellow (brand) · purple-soft (light purple) · teal-soft (light teal)
- All are light/subtle, no dark or vivid surfaces
Before: .tile-link-overlay contained the .mega-cta text. Both overlay and .mega-objective were positioned at the bottom of the tile, causing visual overlap.
After: .mega-cta is a normal-flow <span> in tile-body (pushed to bottom via margin-top: auto). .tile-link-overlay is now an empty click target (no inner content, no padding, no flex).
Changes:
- Colors changed from yellow/purple-soft/mint/soft (same as problem section)
→ teal / coral / dark / purple (visually distinct from problems)
- Each tile now has 3 bullet points under subtitle to fill tile height
- Bullet styles: dot markers with currentColor at 0.4 opacity
- Text light (white) on dark surfaces (teal, coral, dark, purple)
- bullet list: mega-bullets class with proper spacing
Changes:
- Filter bar: old industry filters (🚗, 💊, etc.) replaced with service categories: All, Consult, Website Development
- Card categories updated per user spec:
- Dataroot → consult only
- เลือดจระเข้วานิไทย → both consult + webdev (multi-category)
- All other 7 cards → webdev
- Filter JS updated: reads data-category (comma-sep) instead of industry text
- Multi-category via comma-separated values in data-category attribute
- Portfolio page: home + portfolio page both reflect new categories
Changes:
- Deleted 9 case studies A-I (no real URLs)
- Researched 5 real client websites (Baofuling, Lungfinler, Trainersunny, Underdog, Luadjob) and wrote accurate what_we_did
- Added mobile tap support (ontouchstart toggle + .tapped class)
- All 9 remaining portfolio cards now use hover/tap overlay for what_we_did
- Removed fabricated features from what_we_did (user-caught: ระบบขอใบเสนอราคา, ระบบนัดหมาย)
Per user spec:
1. Home portfolio now shows only 4 specific clients in order:
Dataroot → Jet Industries → ทวนทอง 99 → สำนักงานกฎหมาย ตถาตา
(was filtering by featured: true, now filters by slug)
2. PortfolioCard: what_we_did moved from always-visible to
yellow hover overlay (shown above "เยี่ยมชมเว็บไซต์" button).
All cards now have uniform layout:
- Default: image + name + industry + category + result
- On hover (desktop): overlay shows what_we_did text + visit button
- No hover effect on mobile (tap navigates to URL)
3. Added what_we_did + result to 3 cards that were missing them:
- Jet Industries, ทวนทอง 99, สำนักงานกฎหมาย ตถาตา
Co-Authored-By: Claude <noreply@anthropic.com>
- badge: "เราจะช่วยคุณเพิ่มกำไร" → "Moreminimore"
- title: "เราช่วยวางระบบงาน..." → "เราจะช่วยคุณเพิ่มกำไร"
- subtitle: "รับทำเว็บ ที่ปรึกษา..." → "เราช่วยวางระบบงาน และใช้สถิติวางกลยุทธ์ทางการตลาด"
Update Hero.astro default props to match so other pages
that consume <Hero /> without props get the same copy.
Co-Authored-By: Claude <noreply@anthropic.com>
The home service section had each bento-tile wrapped in an
<a href="/services/..."> tag. This caused two problems:
1. The <a> became the grid item instead of the .bento-tile,
so the .bento-tile's grid-column: span 3 was ignored.
The <a> defaulted to display: block and stretched to
100% width, so all 4 tiles in a row had the same wide
width — but the grid was no longer dividing them equally.
2. Astro's scoped CSS only applies to elements with the
matching data-astro-cid attribute. The <a> wrapper had
its own scope, and the .bento-grid > a selector wasn't
styled — so the grid layout didn't propagate correctly.
Fix: remove the <a> wrapper. Make the whole tile clickable
by adding an absolutely-positioned <a class="tile-link-overlay">
inside the tile (covers the entire tile, sits behind text via
z-index). The .bento-tile is now a direct child of .bento-grid
and grid-column: span 3 works as expected.
Result: 4 tiles width 3/12 each, exactly filling one row,
clickable from anywhere on the tile.
Co-Authored-By: Claude <noreply@anthropic.com>
Scoped CSS in BentoTile.astro was supposed to enforce
min-width: 0 + width: 100%, but the tiles were still
rendering at different widths in the same row.
Adding a global !important override in global.css that
applies to ALL .bento-tile instances regardless of
scoping, plus a flex column layout so tile-body fills
available space and pushes the CTA to the bottom.
This guarantees equal width + equal height in the row.
Co-Authored-By: Claude <noreply@anthropic.com>
Tiles in the same row had different widths because grid items
default to min-width: auto, which makes them grow to fit their
intrinsic content width instead of dividing the row equally.
Add min-width: 0, width: 100%, and box-sizing: border-box to
bento-tile so all tiles in a row are exactly equal width.
Co-Authored-By: Claude <noreply@anthropic.com>
--container-max was 1400px which left visible whitespace on
screens 1600px+ wide. Bump to 1600px so service/problem bento
tiles fill more of the viewport.
Co-Authored-By: Claude <noreply@anthropic.com>
Service section on home page had two issues:
1. Tiles were different heights (longer content = taller tile)
because .bento-tile had no min-height
2. Two service tiles showed the same title (AI Consult + Automation
Consult) because src/content/services/ has 4 old + 4 -new mdx
files; .slice(0, 4) grabbed the first 4 alphabetically which
contained duplicate base slugs
Fixes:
- Add min-height: 380px + flex column to BentoTile so all tiles
in a row are visually equal regardless of content length
- Add dedupedServices helper in index.astro that groups services
by base slug and prefers the -new version when both exist
- Use dedupedServices.slice(0, 4) instead of services.slice(0, 4)
Result: 4 unique services (ai-consult-new, automation-new,
marketing-new, webdev-new) at equal height, filling the row.
Co-Authored-By: Claude <noreply@anthropic.com>
Apply Bento Grid + decorative parallax orb system from about.astro
to all remaining pages (home, services, portfolio, faq, contact,
terms, privacy, blog list, blog detail, services detail).
Layout changes (consistent across all pages):
- Main content sections use <BentoGrid> + <BentoTile>
- 2-3 <DecoOrb> per page for decorative parallax (no parallax blobs
behind text — orbs are pure decoration, z-index: 0, pointer-events: none)
- Surface variants: white, soft, yellow, purple-soft, teal, mint, dark
(rotated across pages for visual variety)
- Asymmetric span strategy (8+4, 7+5, 6+6) instead of flat grids
- Process sections use clean 4x1 grid
- Pull quote + yellow CTA kept as-is (standalone sections)
Content rules preserved:
- All Thai content kept verbatim
- No fabricated statistics
- No emoji icons (use text numerals 01 02 03 04)
- All design tokens from global.css (no hardcoded hex)
- Existing global classes (.container, .section, .btn, .section-badge,
.section-title, .cta-section, etc.) reused — no design system break
Build verified: 22 pages built in 1.80s, no errors.
Co-Authored-By: Claude <noreply@anthropic.com>
Layout redesign:
- Add BentoGrid, BentoTile, DecoOrb components
- Add accent palette (purple/teal/mint/coral) to global tokens
- Rewrite about.astro using Bento Grid (12-col, surface variants)
- Decorative parallax blur orbs in 4 sections
- Value/process tiles use numerals 01-04 instead of emoji
Content updates per user feedback:
- Remove "Soloprenuer" emphasis
- Remove TOC ("เนื้อหาในหน้านี้") — not needed for short content
- Outsource + bot acknowledged as part of approach
- Replace AI stack with marketing intelligence tools
(ad spy, SEO gap, trend tracking)
- No fabricated stat numbers — placeholders show "—"
(only "5+ ปี" kept as verifiable, founded 2020)
- Post-delivery: small changes free, charge only for new features
- No Sprint methodology — flexible timeline, demo when ready
Co-Authored-By: Claude <noreply@anthropic.com>
- about.astro: change .values-grid from 4 columns to 2x2 (max-width 900px)
for visual balance with 4 cards. Drop the duplicate 2-col breakpoint
that became redundant after the desktop change.
- about.astro: switch from deprecated entry.render() to render(entry)
to match Astro v6 content collection API.
- content.config.ts: pages collection glob pattern '**/*.{md,mdx}'
silently matched zero files when the collection only had root-level
files; switch to '*.{md,mdx}' so the loader actually picks up
about.md and home.md.
- Remove EmDash: uninstalled emdash + @emdash-cms/* packages
- Delete src/utils/site-identity.ts (only file importing emdash)
- Delete src/live.config.ts (emdash stub)
- Delete src/content/pages/ (6 MD files: home/about/services/contact/faq/portfolio)
- Remove 'pages' collection from src/content.config.ts
- Hardcode home content as constants in src/pages/index.astro
- Fix duplicate 'megaphone' key in icon-paths.ts (pre-existing bug blocking build)
Home page redesign:
- New hero policy: 'เพิ่มยอดขาย ลดต้นทุน ลดเวลา' (replaces stats claim)
- Remove stats section (no claims until validated)
- 12 problem cards in 4 service buckets (3 each), outline-badge Lucide icons
- New pull quote: 'กำไรที่มากขึ้นของลูกค้า'
- Fix portfolio preview bug (was loading blog collection, now loads portfolio)
About page:
- Sync hero with new policy
- New 'นโยบายของเรา' section in story
- New dark pull-quote band with mission statement
Hero component:
- Remove hard-coded trust strip (50+/40+/5+/100% stats)
- Remove hard-coded secondary CTA
- Replace with named slots so callers can opt in
CLAUDE.md: updated to reflect new architecture (no CMS, static-only)
Verified: npm run build clean (18 pages, 1.74s)
The logo container had a 1px gray border + 0 4px 20px drop shadow that
made it look like a floating button. User wants a flush, clean look —
keep the rounded bottom corners and white background (visual prominence)
but drop the border and shadow. Also remove the hover box-shadow
intensification.
Build: 18 pages, 0 errors
- Add --font-display, --font-body, --font-mono CSS variables in :root
(they were referenced everywhere but never defined; Kanit wasn't loading)
- Remove Noto Sans Thai import (Kanit handles Latin + Thai natively)
- Fix hero/PageHero line-height: 1/1.1 → 1.3 to prevent Thai vowel clipping
(was caused by overflow:hidden on .word-wrapper combined with line-height:1)
- Replace .word-wrapper overflow:hidden with padding so Thai descenders
stay visible during kinetic-title animation
- Bump word translateY from 100% → 110% so word slides up cleanly
- Bump global h1-h6 line-height from 1.1 → 1.25
Build: 18 pages, 0 errors
