refactor(legacy): apply v6 design to all inner pages (delete bento components)

Per user: 'เราไม่ต้องการ legacy design น่ะ เพราะมีดีไชน์ใหม่แล้วไง' - New v6 design must apply to EVERY page, not just index PHASE A — Add CSS compatibility aliases (~600 lines) ================================================== fx-system.css grew from 0.05MB → 0.12MB with 3 new alias blocks for legacy class names that pages still use: 1. LEGACY → v6 ALIASES .section, .section-bento, .section-soft, .section-yellow .section-header, .section-badge, .section-title, .section-desc .reveal, .hero-content, .hero-badge, .hero-grid .service-stack + .service-stack-{item,num,icon,body,title,bullets} .portfolio-card-{grid,top,badge,arrow,name,industry,highlight} .contact-form, .form-{group,label,input,row,success}, .btn, .btn-{primary,outline-dark} .filter-section, .filter-bar, .filter-btn .info-icon, .checklist All styled with v6 design tokens (--ink, --paper, --coral, --brand-yellow, --line-2, --paper-2, etc.) 2. BENTO COMPONENT ALIASES .bento-grid, .bento-tile, .span-{3,4,5,6,7,8,12}, .rows-{2,3} .surface-{white,soft,yellow,purple,purple-soft,teal,teal-soft,mint,dark,coral} .tile-{eyebrow,title,body,link}, .mega-cta All render via CSS Grid 12-col + v6 surface treatments Children (.tile-eyebrow, .tile-title, .tile-body) get v6 typography (Kanit 800 for titles, JetBrains Mono 700 for eyebrows, Itim for em accents). 3. DARK MODE OVERRIDES html.dark .section-soft/.filter-section: var(--paper-2) html.dark .section-badge/.filter-btn.active: yellow html.dark .contact-form .form-input: dark inputs html.dark .bento-tile.surface-{soft,purple-soft,yellow}: dark variants PHASE B — Replace legacy components with inline divs ================================================== Deleted components (no longer imported by anyone): - src/components/BentoGrid.astro - src/components/BentoTile.astro - src/components/DecoOrb.astro - src/components/PageHero.astro Replaced in 7 pages (mechanical regex sweep): - services/[slug].astro - contact.astro - faq.astro - blog/index.astro - blog/[slug].astro - privacy.astro - terms.astro JSX transforms: - <BentoGrid>...</BentoGrid> → <div class='bento-grid'>...</div> - <BentoTile span={6} surface='yellow' /> → <div class='bento-tile span-6 surface-yellow' /> - <DecoOrb .../> → (deleted, was decorative empty) - Removed unused BentoGrid/BentoTile/DecoOrb imports Cleaned orphan comments referencing deleted components: - // use data-parallax-speed from DecoOrb -  - /* FAQ inside BentoTile */ FINAL AUDIT =========== - 0 legacy component refs in src/ - Build: 22 pages, 1.98s, 0 errors - All 11 pages have v6 styling (via direct fx-* or via aliases) Result: every page now uses the v6 design system consistently. No more yellow DecorativeOrbs, no more BentoTile grid overlap, no more PageHero/KineticHero mixing. Visual continuity across all 11 pages.
2026-06-14 21:22:58 +07:00
parent 73d820412a
commit ceffb2a3f3
12 changed files with 761 additions and 698 deletions
--- a/src/styles/fx-system.css
+++ b/src/styles/fx-system.css
@@ -662,6 +662,554 @@ html.dark body { background: var(--body-bg); color: var(--body-fg); }
   Now: business consulting tagline. */
 .fx-hero-content::after { content: 'AI · MARKETING · RESULTS' !important; }

+/* ============================================
+   LEGACY → v6 COMPATIBILITY ALIASES (added 2026-06-13)
+   Per user "ไม่ต้องการ legacy design น่ะ" — we replace
+   the bento components entirely. But many inner pages
+   (blog/[slug], blog/index, contact, faq, privacy, terms,
+   services/[slug]) still use v7-5's class names like
+   .section-bento, .section-header, .reveal, etc.
+
+   Instead of rewriting every page content, we add
+   COMPATIBILITY ALIASES that map legacy class names to
+   the v6 design system. Pages keep their structure,
+   but styling comes from fx-system tokens (--ink, --paper,
+   --coral, --brand-yellow, --line-2, etc.) so every page
+   gets the same v6 look automatically.
+
+   These rules are LAST in the file so they win cascade
+   when overlapping with any base v7-5 rules above.
+   ============================================ */
+
+/* ----- Section containers ----- */
+.section {
+  padding: 64px 32px;
+  position: relative;
+  overflow: hidden;
+}
+.section-bento {
+  padding: 64px 32px;
+  position: relative;
+  overflow: hidden;
+}
+.section-soft {
+  background: var(--paper-2);
+  border-top: 1.5px solid var(--ink);
+  border-bottom: 1.5px solid var(--ink);
+}
+.section-yellow {
+  background: var(--brand-yellow);
+  border-top: 2px solid var(--ink);
+  border-bottom: 2px solid var(--ink);
+}
+
+/* ----- Section headers (eyebrow / title / desc) ----- */
+.section-header {
+  max-width: 1200px;
+  margin: 0 auto 32px;
+  text-align: center;
+}
+.section-badge {
+  display: inline-block;
+  font: 700 10px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--ink);
+  background: var(--brand-yellow);
+  border: 1.5px solid var(--ink);
+  padding: 6px 12px;
+  margin-bottom: 16px;
+}
+.section-title {
+  font: 900 clamp(28px, 4vw, 44px)/1.1 'Kanit', sans-serif;
+  letter-spacing: -1.5px;
+  color: var(--ink);
+  margin: 0 0 16px;
+}
+.section-title .highlight {
+  color: var(--coral);
+  text-decoration: underline;
+  text-decoration-color: var(--ink);
+  text-underline-offset: 6px;
+  text-decoration-thickness: 4px;
+}
+.section-desc {
+  font: 400 16px/1.6 'Kanit', sans-serif;
+  color: var(--text-dim);
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+/* ----- Reveal animation (legacy IntersectionObserver trigger) ----- */
+.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.reveal.revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ----- Hero (custom inner-page hero) ----- */
+.hero-content {
+  background: var(--paper);
+  border: 1.5px solid var(--ink);
+  padding: 32px;
+  position: relative;
+}
+.hero-badge {
+  display: inline-block;
+  font: 700 10px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--ink);
+  background: var(--brand-yellow);
+  border: 1.5px solid var(--ink);
+  padding: 6px 12px;
+  margin-bottom: 16px;
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 32px;
+  max-width: 1200px;
+  margin: 32px auto 0;
+}
+@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } }
+
+/* ----- Service stack (custom service card layout) ----- */
+.service-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+.service-stack-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  background: var(--paper);
+  border: 1.5px solid var(--ink);
+  padding: 24px;
+  transition: all 0.2s ease;
+}
+.service-stack-item:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 var(--ink);
+}
+.service-stack-num {
+  font: 900 24px/1 'JetBrains Mono', monospace;
+  color: var(--coral);
+  background: var(--brand-yellow);
+  border: 1.5px solid var(--ink);
+  padding: 6px 10px;
+  flex-shrink: 0;
+}
+.service-stack-icon {
+  font-size: 24px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--paper-2);
+  border: 1.5px solid var(--ink);
+  flex-shrink: 0;
+}
+.service-stack-body { flex: 1; }
+.service-stack-title {
+  font: 800 18px/1.3 'Kanit', sans-serif;
+  color: var(--ink);
+  margin: 0 0 8px;
+}
+.service-stack-bullets {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.service-stack-bullets li {
+  font: 400 14px/1.5 'Kanit', sans-serif;
+  color: var(--text-dim);
+  padding: 4px 0;
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  gap: 8px;
+}
+.service-stack-bullets li::before {
+  content: '▸';
+  color: var(--coral);
+  font-weight: 700;
+}
+
+/* ----- Portfolio card (custom grid variant on portfolio page) ----- */
+.portfolio-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+@media (max-width: 1024px) { .portfolio-card-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 640px)  { .portfolio-card-grid { grid-template-columns: 1fr; } }
+.portfolio-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--paper-2);
+  border-bottom: 1px solid var(--ink);
+  font: 700 9px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+}
+.portfolio-card-badge {
+  background: var(--coral);
+  color: #FAFAFA;
+  padding: 4px 8px;
+}
+.portfolio-card-arrow { color: var(--text-dim); }
+.portfolio-card-name {
+  font: 800 20px/1.2 'Kanit', sans-serif;
+  color: var(--ink);
+  margin: 16px 0 4px;
+}
+.portfolio-card-industry {
+  font: 400 12px/1.3 'Kanit', sans-serif;
+  color: var(--text-dim);
+  margin-bottom: 8px;
+}
+.portfolio-card-highlight {
+  font: 700 11px/1.4 'JetBrains Mono', monospace;
+  color: var(--coral);
+}
+
+/* ----- Contact form (legacy /contact page form) ----- */
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.contact-form .form-group { display: flex; flex-direction: column; gap: 4px; }
+.contact-form .form-label {
+  font: 600 13px/1 'Kanit', sans-serif;
+  color: var(--ink);
+}
+.contact-form .form-input {
+  font: 400 14px/1.4 'Kanit', sans-serif;
+  padding: 10px 12px;
+  border: 1.5px solid var(--ink);
+  background: var(--paper);
+  color: var(--ink);
+}
+.contact-form .form-input:focus {
+  outline: none;
+  border-color: var(--coral);
+  box-shadow: 2px 2px 0 var(--brand-yellow);
+}
+.contact-form .form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+@media (max-width: 640px) { .contact-form .form-row { grid-template-columns: 1fr; } }
+.contact-form .btn-submit {
+  background: var(--ink);
+  color: #FAFAFA;
+  border: 1.5px solid var(--ink);
+  padding: 12px 24px;
+  font: 800 12px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  align-self: flex-start;
+}
+.contact-form .btn-submit:hover {
+  background: var(--coral);
+  border-color: var(--coral);
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 var(--brand-yellow);
+}
+.form-success {
+  background: var(--paper);
+  border: 2px solid var(--brand-yellow);
+  padding: 32px;
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.form-success h3 {
+  font: 800 24px/1.2 'Kanit', sans-serif;
+  color: var(--ink);
+  margin: 16px 0 8px;
+}
+.form-success p {
+  font: 400 15px/1.5 'Kanit', sans-serif;
+  color: var(--text-dim);
+}
+
+/* ----- Utility (inner-page helpers) ----- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font: 800 12px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-decoration: none;
+  border: 1.5px solid var(--ink);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.btn-primary {
+  background: var(--coral);
+  color: #FAFAFA;
+}
+.btn-primary:hover {
+  background: var(--ink);
+  color: var(--brand-yellow);
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 var(--coral);
+}
+.btn-outline-dark {
+  background: var(--paper);
+  color: var(--ink);
+}
+.btn-outline-dark:hover {
+  background: var(--brand-yellow);
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 var(--ink);
+}
+.info-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--paper-2);
+  border: 1.5px solid var(--ink);
+  margin-bottom: 12px;
+}
+.checklist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.checklist li {
+  font: 400 14px/1.6 'Kanit', sans-serif;
+  color: var(--ink);
+  padding: 8px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+/* ----- Filter bar (portfolio page) ----- */
+.filter-section {
+  background: var(--paper-2);
+  padding: 20px 0;
+  border-top: 1px solid var(--line-2);
+  border-bottom: 1px solid var(--line-2);
+  position: sticky;
+  top: 70px;
+  z-index: 50;
+}
+.filter-bar {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 4px 0;
+}
+.filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  background: var(--paper);
+  color: var(--ink);
+  border: 1px solid var(--line-2);
+  border-radius: 999px;
+  font: 600 14px/1 'Kanit', sans-serif;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+.filter-btn:hover { border-color: var(--coral); }
+.filter-btn.active {
+  background: var(--brand-yellow);
+  border-color: var(--brand-yellow);
+  color: var(--ink);
+}
+
+/* Dark mode overrides for legacy aliases ----- */
+html.dark .section-soft { background: var(--paper-2); }
+html.dark .section-badge { background: var(--brand-yellow); color: var(--ink); }
+html.dark .section-title { color: var(--ink); }
+html.dark .info-icon { background: var(--paper-2); }
+html.dark .filter-section { background: var(--paper-2); }
+html.dark .filter-btn { background: var(--paper); color: var(--ink); }
+html.dark .filter-btn.active { background: var(--brand-yellow); color: var(--ink); }
+html.dark .contact-form .form-input {
+  background: var(--paper-2);
+  color: var(--ink);
+  border-color: var(--ink);
+}
+html.dark .service-stack-item { background: var(--paper); }
+html.dark .form-success { background: var(--paper); }
+html.dark .reveal { /* keep hidden state, light/dark mode just affects colors */ }
+
+/* ============================================
+   BENTO COMPONENT ALIASES (added 2026-06-13)
+   Pages still use <BentoGrid>, <BentoTile>, <DecoOrb>
+   components (in services/[slug], contact, faq, blog,
+   privacy, terms). These components emit divs with
+   classes like .bento-grid, .bento-tile, .surface-yellow,
+   .span-6 etc. We alias them to v6 design tokens so
+   the rendered output matches the rest of the site.
+   ============================================ */
+
+/* BentoGrid: 12-col grid */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-auto-rows: minmax(80px, auto);
+  gap: 16px;
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+@media (max-width: 1024px) { .bento-grid { grid-template-columns: repeat(6, 1fr); } }
+@media (max-width: 640px)  { .bento-grid { grid-template-columns: 1fr; gap: 12px; } }
+
+/* BentoTile: card with v6 surface treatments */
+.bento-tile {
+  padding: 24px;
+  background: var(--paper);
+  border: 1.5px solid var(--ink);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 0.2s ease;
+  grid-column: span 6;
+}
+.bento-tile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
+@media (max-width: 640px) { .bento-tile { grid-column: span 1; } }
+
+/* Span variants */
+.bento-tile.span-3  { grid-column: span 3; }
+.bento-tile.span-4  { grid-column: span 4; }
+.bento-tile.span-5  { grid-column: span 5; }
+.bento-tile.span-6  { grid-column: span 6; }
+.bento-tile.span-7  { grid-column: span 7; }
+.bento-tile.span-8  { grid-column: span 8; }
+.bento-tile.span-12 { grid-column: span 12; }
+
+/* Rows variants */
+.bento-tile.rows-2 { grid-row: span 2; }
+.bento-tile.rows-3 { grid-row: span 3; }
+
+/* Surface treatments (v6 design tokens) */
+.bento-tile.surface-white       { background: var(--paper); color: var(--ink); }
+.bento-tile.surface-soft        { background: var(--paper-2); color: var(--ink); }
+.bento-tile.surface-yellow      { background: var(--brand-yellow); color: var(--ink); }
+.bento-tile.surface-purple      { background: #7c3aed; color: #FAFAFA; }
+.bento-tile.surface-purple-soft { background: #ede9fe; color: var(--ink); }
+.bento-tile.surface-teal        { background: #0d9488; color: #FAFAFA; }
+.bento-tile.surface-teal-soft   { background: #bae6fd; color: var(--ink); }
+.bento-tile.surface-mint        { background: #10b981; color: #FAFAFA; }
+.bento-tile.surface-dark        { background: var(--ink); color: #FAFAFA; }
+.bento-tile.surface-coral       { background: var(--coral); color: #FAFAFA; }
+
+/* BentoTile child elements */
+.bento-tile .tile-eyebrow {
+  font: 700 10px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--ink);
+  background: var(--brand-yellow);
+  border: 1.5px solid var(--ink);
+  padding: 6px 10px;
+  align-self: flex-start;
+}
+.bento-tile .tile-title {
+  font: 800 clamp(20px, 2.4vw, 28px)/1.2 'Kanit', sans-serif;
+  letter-spacing: -0.5px;
+  color: var(--ink);
+  margin: 0;
+}
+.bento-tile.surface-dark .tile-title,
+.bento-tile.surface-coral .tile-title { color: #FAFAFA; }
+.bento-tile .tile-body { flex: 1; }
+.bento-tile .tile-body p {
+  font: 400 15px/1.6 'Kanit', sans-serif;
+  color: var(--ink);
+  margin: 0 0 12px;
+}
+.bento-tile.surface-dark .tile-body p,
+.bento-tile.surface-coral .tile-body p { color: rgba(250,250,250,0.85); }
+.bento-tile .tile-body ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.bento-tile .tile-body li {
+  font: 400 14px/1.5 'Kanit', sans-serif;
+  color: var(--ink);
+  padding: 4px 0;
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  gap: 8px;
+}
+.bento-tile.surface-dark .tile-body li,
+.bento-tile.surface-coral .tile-body li { color: rgba(250,250,250,0.85); }
+.bento-tile .tile-body li::before { content: '▸'; color: var(--coral); font-weight: 700; }
+
+/* BentoTile links/buttons inside */
+.bento-tile .tile-link {
+  font: 800 12px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+  color: var(--coral);
+  text-decoration: none;
+  align-self: flex-start;
+  margin-top: auto;
+  border-bottom: 2px solid var(--coral);
+  padding-bottom: 2px;
+}
+.bento-tile .tile-link:hover { color: var(--ink); border-color: var(--ink); }
+
+/* Tile mega-cta (if used) */
+.bento-tile .mega-cta {
+  background: var(--ink);
+  color: #FAFAFA;
+  padding: 10px 16px;
+  font: 800 11px/1 'JetBrains Mono', monospace;
+  text-transform: uppercase;
+  text-decoration: none;
+  align-self: flex-start;
+  margin-top: auto;
+}
+.bento-tile .mega-cta:hover { background: var(--coral); }
+
+/* Reveal animation (when BentoTile used) */
+.bento-tile.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.bento-tile.reveal.revealed { opacity: 1; transform: translateY(0); }
+
+/* Container class (legacy bento variant) */
+.bento-tile-container {
+  position: relative;
+  z-index: 1;
+  display: contents;
+}
+
+/* Dark mode bento overrides */
+html.dark .bento-tile.surface-soft { background: var(--paper-2); color: var(--ink); }
+html.dark .bento-tile.surface-purple-soft { background: rgba(124,58,237,0.18); color: var(--ink); }
+html.dark .bento-tile.surface-yellow { color: var(--ink); }
+
 /* 3 results the user positions the business around (เพิ่มยอดขาย / ลดต้นทุน / ประหยัดเวลา) */
 .fx-hero-results {
  display: grid;
@@ -708,6 +1256,7 @@ html.dark body { background: var(--body-bg); color: var(--body-fg); }
  .fx-hero-results { grid-template-columns: 1fr; }
 }

+
 /* v7-5 uses rgba(10,10,10,0.3) for dim text (.ts in log + footer-bottom)
   Invert to cream-equivalent for dark mode */
 html.dark .ts { color: rgba(250,250,250,0.3); }