- Add position:absolute to neural-node.liquid-glass override to fix
3D positioning (liquid-glass was overriding to position:relative)
- Spread outer cards further apart for better visual separation
- Increase container size to 600x520px to accommodate spread
- Enlarge neural cards (220px width, 130px min-height)
- Update float animations to match new positions
1. Mouse move listener now on document (not just hero section)
2. Removed hover effect on outer cards, kept only for center กำไร card
3. Bigger text: card-tag 20px, card-desc 16px
4. Hero overflow visible on desktop (cards can extend left)
5. Hero overflow clip on mobile (normal containment)
- Replace profit cluster with neural network visualization
- 4 liquid-glass nodes: กำไร (center), Marketing, AI, Business Knowledge
- 3D perspective with CSS preserve-3d
- Mouse parallax: scene rotates ±15deg following cursor
- Unequal distances: nodes at z: -100, -150, -200
- Floating animations for each outer node
- SVG dashed connector lines with pulse animation
- Device orientation support for mobile
- Responsive: flat column layout on mobile (≤620px)
- Smooth easing with requestAnimationFrame
- Replace hero right panel with liquid-glass profit cluster (กำไร + Marketing/AI/Business Knowledge)
- Fix dark-on-dark text visibility in all inverted sections (scene-dark, page-section)
- Add Footer component with liquid-glass design, contact info, legal links
- Add privacy and terms placeholder pages
- Update PageShell to include Footer on all pages
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.
