96caca4af6
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.
873 lines
64 KiB
CSS
873 lines
64 KiB
CSS
/* ============================================
|
||
MOREMINIMORE FX-SYSTEM v1
|
||
Extracted from Desktop/moreminomore-mockup-v7-5.html
|
||
Lines 10-484 (v7-5 internal <style> block)
|
||
All classes are .fx-* — namespaced to avoid collision
|
||
with global.css which uses .kinetic-hero, .bento-*, etc.
|
||
|
||
Includes @keyframes marquee only. Other keyframes
|
||
(sparkle, reveal, pulse-glow) added in src/lib/fx-animations.ts
|
||
to keep CSS file size manageable.
|
||
============================================ */
|
||
|
||
: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);
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
*{font-family:'Kanit',sans-serif}
|
||
img{max-width:100%;display:block}
|
||
.mono{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:-0.3px}
|
||
|
||
/* ========== TOP NAV (TOC) ========== */
|
||
.toc-nav{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--brand-yellow);padding:14px 24px;font:800 13px/1 'JetBrains Mono',monospace;border-bottom:4px solid var(--brand-yellow);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
||
.toc-nav h1{font-size:14px;letter-spacing:-0.5px;color:var(--brand-yellow);margin-right:12px}
|
||
.toc-nav h1 em{font-family:'Itim',cursive;font-weight:400;color:var(--coral)}
|
||
.toc-nav a{color:var(--brand-yellow);text-decoration:none;font:700 11px/1 'JetBrains Mono',monospace;padding:6px 10px;border:1px solid rgba(255,214,10,0.3);border-radius:4px;transition:all 0.2s}
|
||
.toc-nav a:hover{background:var(--brand-yellow);color:var(--ink);border-color:var(--brand-yellow)}
|
||
|
||
/* ========== CATEGORY SECTION ========== */
|
||
.category{background:var(--paper);border-top:2px solid var(--ink);padding:0 0 32px}
|
||
.cat-header{background:var(--ink);color:var(--brand-yellow);padding:16px 32px;font:800 18px/1 'Kanit',sans-serif;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
|
||
.cat-header .cat-num{font:900 36px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%}
|
||
.cat-header .cat-title{font-weight:800}
|
||
.cat-header .cat-count{font:500 13px/1 'JetBrains Mono',monospace;color:rgba(255,214,10,0.7)}
|
||
.cat-desc{padding:20px 32px;font:300 16px/1.5;color:var(--text-dim);border-bottom:1px dashed var(--line-2);background:var(--paper-2)}
|
||
|
||
/* ========== VARIANT ========== */
|
||
.variant{padding:32px;background:var(--paper);border-bottom:1px solid var(--line-2);position:relative}
|
||
.variant::before{content:attr(data-variant-label);position:absolute;top:12px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:4px 8px;letter-spacing:0.5px;text-transform:uppercase;z-index:2}
|
||
.variant-tag{position:absolute;top:12px;right:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--brand-yellow);background:var(--ink);padding:4px 8px;letter-spacing:0.5px;z-index:2}
|
||
.variant-content{margin-top:32px;max-width:1100px;margin-left:auto;margin-right:auto}
|
||
.variant-info{background:rgba(255,214,10,0.15);border:1px dashed var(--coral);padding:12px 16px;margin-top:16px;font:400 13px/1.5 'Kanit',sans-serif;color:var(--ink)}
|
||
|
||
/* ========== UTILITY ========== */
|
||
.util-bar{display:flex;align-items:center;justify-content:space-between;height:36px;background:var(--ink);color:rgba(250,250,250,0.85);font:600 12px/1 'JetBrains Mono',monospace;padding:0 24px}
|
||
.util-bar-left,.util-bar-right{display:flex;align-items:center;gap:16px}
|
||
.util-item{display:inline-flex;align-items:center;gap:6px;color:rgba(250,250,250,0.7)}
|
||
.util-item strong{color:var(--brand-yellow);font-weight:700}
|
||
.util-theme{background:rgba(250,250,250,0.1);border:1px solid rgba(250,250,250,0.2);color:rgba(250,250,250,0.5);padding:4px 10px;border-radius:999px;cursor:pointer}
|
||
|
||
/* ========== NAV ========== */
|
||
.nav-1{padding:14px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;flex-wrap:wrap;gap:12px}
|
||
.nav-1 .logo{font:900 22px/1 'Kanit',sans-serif;letter-spacing:-1px;color:var(--ink)}
|
||
.nav-1 .logo em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.nav-1 .menu{display:flex;gap:8px;list-style:none;flex-wrap:wrap}
|
||
.nav-1 .menu a{font:600 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 12px}
|
||
.nav-1 .menu a:hover{color:var(--coral)}
|
||
.nav-1 .cta{background:var(--coral);color:#FAFAFA;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:10px 16px;text-decoration:none;border:1.5px solid var(--ink)}
|
||
|
||
/* ========== HERO ========== */
|
||
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:64px 32px;max-width:1100px;margin:0 auto;background-image:linear-gradient(to right,rgba(10,10,10,0.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,0.04) 1px,transparent 1px);background-size:80px 80px}
|
||
.hero-content{padding:24px;border:1.5px solid var(--ink);background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);position:relative}
|
||
.hero-content .cmd{font:700 16px/1 'JetBrains Mono',monospace;color:var(--brand-yellow);background:var(--ink);padding:4px 10px;display:inline-block;margin-bottom:12px}
|
||
.hero-content h1{font:900 56px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;margin:16px 0}
|
||
.hero-content h1 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--ink);background:var(--paper)}
|
||
.hero-stats div{padding:20px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);text-align:center}
|
||
.hero-stats div:nth-child(2n){border-right:none}
|
||
.hero-stats div:nth-last-child(-n+2){border-bottom:none}
|
||
.hero-stats .num{font:900 28px/1 'JetBrains Mono',monospace}
|
||
.hero-stats .num em{font-family:'Itim',cursive;font-size:18px;color:var(--coral)}
|
||
.hero-stats .lbl{font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
|
||
.hero-centered{text-align:center;padding:120px 32px;background:var(--paper)}
|
||
.hero-centered h1{font:900 72px/0.95 'Kanit',sans-serif;letter-spacing:-3px;max-width:800px;margin:0 auto 24px}
|
||
.hero-centered h1 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.hero-centered p{font:300 18px/1.5;color:var(--text-dim);max-width:600px;margin:0 auto 32px}
|
||
.hero-cta{background:linear-gradient(135deg,var(--coral),#E64A2C);color:#FAFAFA;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:14px 22px;text-decoration:none;border:1.5px solid var(--ink);display:inline-flex;align-items:center;gap:8px}
|
||
.hero-bg{position:relative;min-height:60vh;overflow:hidden;color:#FAFAFA;display:flex;align-items:center;padding:80px 32px}
|
||
.hero-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.8));z-index:1}
|
||
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
|
||
.hero-bg .content{position:relative;z-index:2;max-width:800px}
|
||
.hero-bg h1{font:900 56px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:16px}
|
||
.hero-bg h1 em{font-family:'Itim',cursive;color:var(--brand-yellow);font-weight:400}
|
||
.hero-asym{display:grid;grid-template-columns:3fr 7fr;min-height:60vh;background:var(--paper)}
|
||
.hero-asym-img{background-size:cover;background-position:center;position:relative}
|
||
.hero-asym-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.2),rgba(0,0,0,0.7))}
|
||
.hero-asym-content{padding:60px 48px;display:flex;flex-direction:column;justify-content:center}
|
||
.hero-asym-content h1{font:900 56px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:16px}
|
||
.hero-asym-content h1 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.hero-stats-row{display:flex;gap:24px;padding:20px 0;margin-bottom:24px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
|
||
.hero-stats-row .item{flex:1;text-align:center}
|
||
.hero-stats-row .num{font:900 24px/1 'JetBrains Mono',monospace}
|
||
.hero-stats-row .num em{font-family:'Itim',cursive;font-size:14px;color:var(--coral)}
|
||
.hero-stats-row .lbl{font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
|
||
|
||
/* ========== CASE-STUDY ========== */
|
||
.case{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;max-width:1100px;margin:0 auto;padding:48px 32px}
|
||
.case-image{border:1.5px solid var(--ink);overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
|
||
.case-image img{width:100%;height:100%;object-fit:cover}
|
||
.case-content{padding:32px;border:1.5px solid var(--ink);background:var(--paper)}
|
||
.case-content h2{font:900 32px/1.1 'Kanit',sans-serif;letter-spacing:-1.5px;margin-bottom:12px}
|
||
.case-content h2 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);margin:16px 0}
|
||
.case-stats div{padding:14px;border-right:1.5px solid var(--ink);text-align:center}
|
||
.case-stats div:last-child{border-right:none}
|
||
.case-stats .num{font:900 24px/1 'JetBrains Mono',monospace}
|
||
.case-stats .num em{font-family:'Itim',cursive;font-size:16px;color:var(--coral)}
|
||
.case-stats .lbl{font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
|
||
.case-text{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;max-width:1100px;margin:0 auto;padding:48px 32px}
|
||
.case-text-image{border:1.5px solid var(--ink);overflow:hidden;aspect-ratio:4/3}
|
||
.case-text-image img{width:100%;height:100%;object-fit:cover}
|
||
.case-text-content h2{font:900 36px/1.1 'Kanit',sans-serif;letter-spacing:-1.5px;margin-bottom:16px}
|
||
.case-text-content p{font:300 16px/1.5;color:var(--text-dim);margin-bottom:16px}
|
||
.case-text-content .stat{display:inline-block;background:var(--brand-yellow);color:var(--ink);padding:8px 16px;font:900 20px/1 'JetBrains Mono',monospace;margin-bottom:12px}
|
||
.case-text-content .stat em{font-family:'Itim',cursive;color:var(--coral);font-size:14px}
|
||
|
||
/* ========== SERVICES ========== */
|
||
.services{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);max-width:1100px;margin:0 auto}
|
||
.service-card{padding:32px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative;background:var(--paper);transition:background 0.2s}
|
||
.service-card:nth-child(2n){border-right:none}
|
||
.service-card:nth-last-child(-n+2){border-bottom:none}
|
||
.service-card:hover{background:var(--paper-2)}
|
||
.service-card .num{display:inline-block;background:var(--brand-yellow);color:var(--coral);font:900 32px/1 'JetBrains Mono',monospace;padding:6px 12px;margin-bottom:12px}
|
||
.service-card h3{font:900 22px/1.1;letter-spacing:-0.5px;margin-bottom:8px}
|
||
.service-card h3 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.service-card p{font:300 14px/1.5;color:var(--text-dim)}
|
||
.services-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:1100px;margin:0 auto}
|
||
.services-3 .service-card{border:1.5px solid var(--ink)}
|
||
|
||
/* ========== CALLOUT ========== */
|
||
.callout{padding:60px 80px;background:linear-gradient(180deg,#FFE600,var(--brand-yellow));border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-align:center}
|
||
.callout p{font:400 24px/1.5 'Itim',cursive;color:var(--ink);max-width:800px;margin:0 auto 12px}
|
||
.callout p em{color:var(--coral);font-weight:600}
|
||
.callout .attr{font:700 11px/1 'JetBrains Mono',monospace;color:var(--ink);text-transform:uppercase;letter-spacing:0.5px}
|
||
.callout-center{padding:80px 60px;background:var(--paper);text-align:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
|
||
.callout-center p{font:400 28px/1.4 'Itim',cursive;color:var(--ink);max-width:700px;margin:0 auto}
|
||
|
||
/* ========== PORTFOLIO ========== */
|
||
.portfolio{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;max-width:1100px;margin:0 auto}
|
||
.portfolio-item{border:1.5px solid var(--ink);position:relative;overflow:hidden;background:var(--paper);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;aspect-ratio:1}
|
||
.portfolio-item.featured{grid-row:span 2;background:var(--coral);color:#FAFAFA;aspect-ratio:1/2}
|
||
.portfolio-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
|
||
.portfolio-item::before{content:'◉ ◉ ◉ moreminimore.com/';position:absolute;top:0;left:0;right:0;background:var(--paper-2);border-bottom:1px solid var(--ink);padding:8px 12px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim);z-index:1}
|
||
.portfolio-item.featured::before{background:var(--ink);color:var(--brand-yellow)}
|
||
.portfolio-item .name{position:relative;z-index:1;font:900 20px/1.1;background:var(--paper);padding:6px 8px;align-self:flex-start;border:1px solid var(--ink);margin-top:24px}
|
||
.portfolio-item.featured .name{background:var(--ink);color:#FAFAFA;border-color:var(--ink)}
|
||
.portfolio-item.featured .name em{color:var(--brand-yellow)}
|
||
.portfolio-item .name em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.portfolio-item .stats{position:relative;z-index:1;font:700 11px/1 'JetBrains Mono',monospace;color:var(--coral);margin-top:4px}
|
||
.portfolio-item.featured .stats{color:var(--brand-yellow)}
|
||
.masonry{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;max-width:1100px;margin:0 auto}
|
||
.masonry .item{background:#F5F5F5;min-height:200px;display:flex;align-items:flex-end;padding:20px;font:900 20px/1.1;color:#FAFAFA;text-shadow:2px 2px 4px rgba(0,0,0,0.7);background-size:cover;background-position:center}
|
||
.masonry .item:first-child{grid-row:span 2;min-height:408px;font-size:24px}
|
||
|
||
/* ========== PROCESS ========== */
|
||
.process{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);max-width:1100px;margin:0 auto}
|
||
.process-step{padding:24px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
|
||
.process-step:last-child{border-right:none}
|
||
.process-step .num{background:var(--ink);color:var(--brand-yellow);font:900 14px/1 'JetBrains Mono',monospace;padding:6px 10px;display:inline-block;margin-bottom:12px}
|
||
.process-step h4{font:800 16px/1.2;margin-bottom:6px}
|
||
.process-step h4 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.process-step p{font:400 12px/1.5;color:var(--text-dim)}
|
||
.timeline{padding:32px;max-width:700px;margin:0 auto;position:relative}
|
||
.timeline::before{content:'';position:absolute;left:60px;top:32px;bottom:32px;width:2px;background:var(--ink)}
|
||
.timeline-step{padding:16px 0 16px 80px;position:relative;min-height:80px}
|
||
.timeline-step::before{content:counter(step);counter-increment:step;position:absolute;left:20px;top:16px;width:40px;height:40px;background:var(--brand-yellow);color:var(--ink);font:900 18px/40px 'JetBrains Mono',monospace;text-align:center;border-radius:50%;border:2px solid var(--ink)}
|
||
.timeline-step h4{font:800 16px/1.2;margin-bottom:6px}
|
||
.timeline-step p{font:300 13px/1.5;color:var(--text-dim)}
|
||
.timeline{counter-reset:step}
|
||
|
||
/* ========== PRICING ========== */
|
||
.pricing{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);max-width:1000px;margin:0 auto}
|
||
.pricing-card{padding:28px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
|
||
.pricing-card:last-child{border-right:none}
|
||
.pricing-card.featured{background:rgba(255,214,10,0.85);backdrop-filter:blur(4px);position:relative}
|
||
.pricing-card.featured::after{content:'★ แนะนำ';position:absolute;top:-10px;left:16px;background:var(--ink);color:var(--brand-yellow);font:700 9px/1 'JetBrains Mono',monospace;padding:4px 8px;letter-spacing:0.5px}
|
||
.pricing-card .tier{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;color:var(--text-dim);letter-spacing:0.5px;margin-bottom:12px}
|
||
.pricing-card .tier em{font-family:'Itim',cursive;color:var(--coral);text-transform:none}
|
||
.pricing-card h3{font:900 24px/1.1;letter-spacing:-1px;margin-bottom:8px}
|
||
.pricing-card .amount{font:900 40px/1 'JetBrains Mono',monospace;letter-spacing:-2px;margin:12px 0}
|
||
.pricing-card .amount em{font-size:20px;color:var(--coral);font-family:'Itim',cursive}
|
||
.pricing-card .period{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;letter-spacing:0.5px}
|
||
.pricing-card ul{list-style:none;border-top:1px solid var(--ink);margin-bottom:16px}
|
||
.pricing-card li{padding:8px 0;border-bottom:1px dashed var(--line-2);display:flex;gap:8px;font:400 13px/1.4}
|
||
.pricing-card li::before{content:'✓';color:var(--coral);font-weight:700}
|
||
.pricing-card .cta{display:block;text-align:center;background:var(--ink);color:#FAFAFA;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:12px;text-decoration:none;border:1px solid var(--ink)}
|
||
.pricing-line{text-align:center;padding:80px 32px;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
|
||
.pricing-line .amount{font:900 56px/1 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:12px}
|
||
.pricing-line .amount em{font-family:'Itim',cursive;color:var(--coral);font-size:32px}
|
||
.pricing-line .desc{font:300 16px/1.5;color:var(--text-dim);max-width:500px;margin:0 auto 24px}
|
||
|
||
/* ========== FAQ ========== */
|
||
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:32px}
|
||
.faq-item{padding:0}
|
||
.faq-q{font:700 17px/1.5;margin-bottom:8px}
|
||
.faq-q em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.faq-a{font:400 14px/1.7;color:var(--text-dim);padding:0 0 0 16px;border-left:3px solid var(--coral)}
|
||
.faq-a em{font-family:'Itim',cursive;color:var(--coral);font-weight:600}
|
||
.faq-accordion{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:32px}
|
||
.faq-accordion details{background:var(--paper);border:1.5px solid var(--ink);padding:0}
|
||
.faq-accordion summary{font:600 16px/1.3;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;user-select:none;transition:background 0.2s}
|
||
.faq-accordion summary:hover{background:var(--paper-2)}
|
||
.faq-accordion summary::-webkit-details-marker{display:none}
|
||
.faq-accordion summary span{font-family:'Itim',cursive;font-style:italic;color:var(--ink);font-weight:400}
|
||
.faq-accordion summary::after{content:'+';font:700 18px/1 'JetBrains Mono',monospace;color:var(--coral);flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--brand-yellow);border-radius:50%;border:1.5px solid var(--ink)}
|
||
.faq-accordion details[open] summary::after{content:'−';background:var(--coral);color:#FAFAFA;border-color:var(--coral)}
|
||
.faq-accordion details p{font:400 14px/1.6;color:var(--text-dim);margin:0;padding:12px 16px 16px;border-top:1px dashed var(--line-2);background:var(--paper)}
|
||
.faq-accordion details p em{font-family:'Itim',cursive;font-style:italic;color:var(--coral);font-weight:600}
|
||
|
||
/* ========== CONTACT ========== */
|
||
.contact-form{display:flex;max-width:480px;margin:0 auto;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--brand-yellow)}
|
||
.contact-form::before{content:'$';padding:0 16px;display:flex;align-items:center;color:var(--coral);font:700 20px/1 'JetBrains Mono',monospace;border-right:1.5px solid var(--ink);background:var(--brand-yellow)}
|
||
.contact-form input{flex:1;padding:16px;border:none;background:transparent;font:500 14px/1 'JetBrains Mono',monospace;outline:none}
|
||
.contact-form button{background:var(--ink);color:#FAFAFA;border:none;padding:0 20px;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;cursor:pointer}
|
||
.contact-center{text-align:center;padding:80px 32px;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
|
||
.contact-center h2{font:900 56px/1 'Kanit',sans-serif;letter-spacing:-2.5px;margin-bottom:16px}
|
||
.contact-center h2 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.contact-center p{font:300 18px/1.5;color:var(--text-dim);max-width:600px;margin:0 auto 32px}
|
||
.contact-center .cta-1{background:var(--coral);color:#FAFAFA;font:800 14px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:18px 32px;text-decoration:none;border:2px solid var(--ink);display:inline-block}
|
||
.contact-center .cta-2{margin-left:12px;background:transparent;color:var(--ink);font:800 14px/1 'JetBrains Mono',monospace;text-transform:uppercase;padding:18px 32px;text-decoration:none;border:2px solid var(--ink);display:inline-block}
|
||
|
||
/* ========== FOOTER ========== */
|
||
.footer{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;max-width:1280px;margin:0 auto;padding:48px 32px;background:var(--paper-2);border-top:1.5px solid var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim)}
|
||
.footer h4{font:700 11px/1;text-transform:uppercase;color:var(--ink);margin-bottom:12px;letter-spacing:0.5px}
|
||
.footer ul{list-style:none}
|
||
.footer li{margin-bottom:6px}
|
||
.footer a{color:var(--text-dim);text-decoration:none}
|
||
.footer a:hover{color:var(--coral)}
|
||
.footer .logo{font:900 20px/1 'Kanit',sans-serif;color:var(--ink);letter-spacing:-1px;margin-bottom:12px}
|
||
.footer .logo em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.footer .tagline{font:300 13px/1.5;color:var(--text-dim)}
|
||
.footer-single{display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:24px 32px;background:var(--ink);color:rgba(250,250,250,0.6);font:600 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;flex-wrap:wrap;gap:12px}
|
||
.footer-single em{font-family:'Itim',cursive;color:var(--coral);text-transform:none}
|
||
|
||
/* ========== MARQUEE ========== */
|
||
.marquee{background:var(--paper-2);border-bottom:1px solid var(--ink);overflow:hidden;padding:6px 0}
|
||
.marquee-track{display:flex;gap:32px;white-space:nowrap;animation:marquee 40s linear infinite;font:700 11px/1 'JetBrains Mono',monospace}
|
||
.marquee-track .ts{color:rgba(10,10,10,0.3)}
|
||
.marquee-track .cmd{color:var(--coral)}
|
||
.marquee-track .ok{color:#00875A}
|
||
.marquee-track em{font-family:'Itim',cursive;color:var(--coral)}
|
||
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
|
||
|
||
/* ========== MAIN v6 · INJECTED CLASSES ========== */
|
||
.fx-utility-bar{display:flex;align-items:center;justify-content:space-between;height:32px;background:#0A0A0A;color:rgba(250,250,250,0.85);font:600 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;padding:0 24px;border-bottom:1px solid rgba(250,250,250,0.15)}
|
||
.fx-utility-bar-left,.fx-utility-bar-right{display:flex;align-items:center;gap:16px}
|
||
.fx-utility-item{display:inline-flex;align-items:center;gap:6px;color:rgba(250,250,250,0.7)}
|
||
.fx-utility-item strong{color:var(--brand-yellow);font-weight:700}
|
||
.fx-theme-toggle{display:inline-flex;align-items:center;gap:6px;background:rgba(250,250,250,0.1);border:1px solid rgba(250,250,250,0.2);color:#FAFAFA;padding:4px 10px;font:600 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;border-radius:999px;cursor:pointer}
|
||
.fx-mode-indicator{font:500 9px/1 'JetBrains Mono',monospace;color:rgba(250,250,250,0.5)}
|
||
.fx-mode-indicator::before{content:'●';color:var(--brand-yellow);margin-right:4px}
|
||
.fx-marquee{background:var(--paper-2);border-bottom:1.5px solid var(--ink);overflow:hidden;font:700 11px/1 'JetBrains Mono',monospace;padding:6px 0}
|
||
.fx-marquee-track{display:flex;gap:32px;white-space:nowrap;animation:marquee 40s linear infinite}
|
||
.fx-marquee-track span{color:var(--text-dim)}
|
||
.fx-marquee-track .ts{color:rgba(10,10,10,0.3)}
|
||
.fx-marquee-track .cmd{color:var(--coral)}
|
||
.fx-marquee-track .ok{color:#00875A}
|
||
.fx-marquee-track em{color:var(--coral);font-family:'Itim',cursive;text-transform:none}
|
||
.fx-nav{position:sticky;top:0;z-index:50;background:rgba(250,250,250,0.78);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1.5px solid var(--ink)}
|
||
.fx-nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:16px 32px}
|
||
.fx-nav-logo{display:inline-block;line-height:0}
|
||
.fx-nav-logo-text{font:900 20px/1 'Kanit',sans-serif;letter-spacing:-1px;color:var(--ink);text-decoration:none}
|
||
.fx-nav-logo-text em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-nav-menu{display:flex;gap:4px;list-style:none}
|
||
.fx-nav-menu a{padding:8px 14px;font:600 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink);text-decoration:none}
|
||
.fx-nav-menu a:hover{color:var(--coral)}
|
||
.fx-nav-cta{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:var(--coral);color:#FAFAFA;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink)}
|
||
.fx-hero{padding:80px 32px 64px;position:relative;background-image:linear-gradient(to right,rgba(10,10,10,0.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,0.04) 1px,transparent 1px);background-size:80px 80px;border-bottom:1.5px solid var(--ink)}
|
||
.fx-hero::before{content:'> section: hero · frame: 00.0';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;max-width:1200px;margin:32px auto 0}
|
||
.fx-hero-content{background:rgba(255,255,255,0.6);border:1.5px solid var(--ink);padding:32px 32px 32px 80px;position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
|
||
.fx-hero-content::before{content:'$';position:absolute;top:32px;left:32px;font:700 20px/1 'JetBrains Mono',monospace;color:var(--coral)}
|
||
.fx-hero-content::after{content:'moreminimore --init';position:absolute;top:32px;left:56px;font:700 16px/1 'JetBrains Mono',monospace;color:var(--brand-yellow);background:var(--ink);padding:2px 8px}
|
||
.fx-hero-eyebrow{display:block;font:700 10px/1.4 'JetBrains Mono',monospace;color:var(--text-dim);margin:24px 0 16px}
|
||
.fx-hero-eyebrow::before{content:'// ';color:var(--coral)}
|
||
.fx-hero-title{font:900 64px/0.95 'Kanit',sans-serif;letter-spacing:-2.5px;color:var(--ink);margin-bottom:16px}
|
||
.fx-hero-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-hero-lede{font:300 16px/1.6;color:var(--text-dim);margin-bottom:16px;max-width:500px}
|
||
.fx-hero-lede em{font-family:'Itim',cursive;color:var(--coral)}
|
||
.fx-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;font:800 12px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;border:1.5px solid var(--ink);background:var(--ink);color:#FAFAFA;text-decoration:none;cursor:pointer}
|
||
.fx-btn.coral{background:linear-gradient(135deg,var(--coral),#E64A2C);color:#FAFAFA;border-color:var(--coral)}
|
||
.fx-btn.ghost{background:var(--paper);color:var(--ink)}
|
||
.fx-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
|
||
.fx-hero-trustline{font:400 11px/1.6 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.3px;color:var(--text-dim);margin-top:16px}
|
||
.fx-hero-trustline em{font-family:'Itim',cursive;color:var(--coral);text-transform:none}
|
||
.fx-hero-side{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);background:var(--paper);position:relative;align-self:start;box-shadow:var(--soft-yellow-glow)}
|
||
.fx-hero-side::before{content:'STATS.LOG';position:absolute;top:-10px;left:16px;background:var(--brand-yellow);color:var(--ink);font:700 9px/1 'JetBrains Mono',monospace;padding:4px 8px;letter-spacing:0.5px;border:1px solid var(--ink);text-transform:uppercase}
|
||
.fx-stat{padding:24px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative;background:var(--paper)}
|
||
.fx-stat:nth-child(2n){border-right:none}
|
||
.fx-stat:nth-last-child(-n+2){border-bottom:none}
|
||
.fx-stat::before{content:attr(data-coord);position:absolute;top:8px;right:8px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:2px 5px}
|
||
.fx-stat-label{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-bottom:8px}
|
||
.fx-stat-value{font:900 36px/1 'JetBrains Mono',monospace;letter-spacing:-1.5px}
|
||
.fx-stat-value.coral{color:var(--coral)}
|
||
.fx-stat-value em{font-family:'Itim',cursive;font-size:20px;color:var(--coral)}
|
||
.fx-sparkle{position:absolute;font-weight:700;color:var(--brand-yellow);pointer-events:none;user-select:none;z-index:1;opacity:0.5;animation:sparkle-float 6s ease-in-out infinite}
|
||
.fx-sparkle.s2{font-size:10px;opacity:0.4}
|
||
.fx-sparkle.s3{font-size:18px;color:var(--coral)}
|
||
.fx-sparkle.s4{font-size:8px;opacity:0.3}
|
||
.fx-sparkle.s5{font-size:12px;color:var(--coral)}
|
||
.fx-case{padding:64px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);position:relative}
|
||
.fx-case::before{content:'> section: case-study · frame: 01.0';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-case-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;max-width:1200px;margin:32px auto 0}
|
||
.fx-case-image{border:1.5px solid var(--ink);overflow:hidden;background:var(--paper-2);aspect-ratio:4/3;position:relative}
|
||
.fx-case-image::before{content:'fig.01 / 4×3';position:absolute;top:12px;left:12px;background:var(--ink);color:var(--brand-yellow);font:700 10px/1 'JetBrains Mono',monospace;padding:4px 8px;z-index:2;letter-spacing:0.5px}
|
||
.fx-case-image img{width:100%;height:100%;object-fit:cover}
|
||
.fx-case-content{background:var(--paper);border:1.5px solid var(--ink);padding:32px;position:relative}
|
||
.fx-case-content::before{content:'case.log';position:absolute;top:-10px;left:16px;background:var(--coral);color:#FAFAFA;font:700 10px/1 'JetBrains Mono',monospace;padding:4px 8px;letter-spacing:0.5px;text-transform:uppercase}
|
||
.fx-case-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);margin:16px 0}
|
||
.fx-case-stat{padding:16px;border-right:1.5px solid var(--ink);text-align:center;position:relative;background:var(--paper)}
|
||
.fx-case-stat:last-child{border-right:none}
|
||
.fx-case-stat::before{content:attr(data-coord);position:absolute;top:4px;right:4px;font:700 8px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:1px 4px}
|
||
.fx-case-stat-num{font:900 28px/1 'JetBrains Mono',monospace;letter-spacing:-1px}
|
||
.fx-case-stat-num em{font-family:'Itim',cursive;font-size:18px;color:var(--coral)}
|
||
.fx-case-stat-label{font:700 9px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-top:4px}
|
||
.fx-case-content h2{font:900 36px/1.1 'Kanit',sans-serif;letter-spacing:-1.5px;margin:16px 0 8px}
|
||
.fx-case-content h2 em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-deck{font:300 15px/1.5;color:var(--text-dim);margin-bottom:12px}
|
||
.fx-log{background:var(--paper-2);border:1.5px solid var(--ink);padding:12px 16px;font:500 12px/1.7 'JetBrains Mono',monospace;color:var(--text-dim);margin-bottom:16px}
|
||
.fx-log .ts{color:rgba(10,10,10,0.3);margin-right:8px}
|
||
.fx-log .ok{color:#00875A;font-weight:700;margin-right:8px}
|
||
.fx-log .info{color:var(--coral);font-weight:700;margin-right:8px}
|
||
.fx-case-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
|
||
.fx-services{padding:64px 32px;background:var(--paper-2);border-bottom:1.5px solid var(--ink);background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px;position:relative}
|
||
.fx-services::before{content:'> section: services · 4 cards';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper-2);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-services-grid{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);max-width:1200px;margin:32px auto 0;background:var(--paper)}
|
||
.fx-service-card{padding:32px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative;transition:all 0.2s;background:var(--paper)}
|
||
.fx-service-card:nth-child(2n){border-right:none}
|
||
.fx-service-card:nth-last-child(-n+2){border-bottom:none}
|
||
.fx-service-card:hover{background:var(--paper-2)}
|
||
.fx-service-card::before{content:'card / ' attr(data-coord);position:absolute;top:12px;left:16px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral)}
|
||
.fx-service-card::after{content:attr(data-size);position:absolute;bottom:12px;right:16px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--text-dim)}
|
||
.fx-service-num{display:inline-block;font:900 36px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:4px 10px;margin:16px 0 8px;letter-spacing:-0.5px}
|
||
.fx-service-title{font:900 24px/1.1;letter-spacing:-0.5px;margin-bottom:8px}
|
||
.fx-service-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-service-desc{font:300 13px/1.5;color:var(--text-dim);margin-bottom:12px}
|
||
.fx-service-list{list-style:none;border-top:1px solid var(--ink);padding-top:8px}
|
||
.fx-service-list li{font:400 13px/1.4;padding:4px 0;display:grid;grid-template-columns:20px 1fr;gap:6px}
|
||
.fx-service-list li::before{content:'▸';color:var(--coral);font-family:'JetBrains Mono',monospace;font-weight:700}
|
||
.fx-callout{padding:64px 80px;background:linear-gradient(180deg,#FFE600,#FFD60A);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-align:center;position:relative}
|
||
.fx-callout::before{content:'> callout / 02.0';position:absolute;top:12px;left:24px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--ink);background:var(--paper);padding:4px 8px;border:1px solid var(--ink)}
|
||
.fx-callout-text{font:400 26px/1.5 'Itim',cursive;color:var(--ink);max-width:800px;margin:0 auto 12px;letter-spacing:0.3px}
|
||
.fx-callout-text em{color:var(--coral);font-weight:600}
|
||
.fx-callout-attr{font:700 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink)}
|
||
.fx-portfolio{padding:64px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);position:relative}
|
||
.fx-portfolio::before{content:'> section: portfolio · 4 items';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-portfolio-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px;max-width:1200px;margin:32px auto 0}
|
||
.fx-portfolio-card{background:var(--paper);border:1.5px solid var(--ink);position:relative;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;transition:all 0.3s}
|
||
.fx-portfolio-card.featured{grid-row:span 2;background:var(--coral);color:#FAFAFA;border-color:var(--ink)}
|
||
.fx-portfolio-card::before{content:'◉ ◉ ◉ moreminimore.com/' attr(data-path);display:block;background:var(--paper-2);border-bottom:1px solid var(--ink);padding:8px 12px;font:700 9px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);position:absolute;top:0;left:0;right:0}
|
||
.fx-portfolio-card.featured::before{background:var(--ink);color:var(--brand-yellow)}
|
||
.fx-portfolio-card::after{content:attr(data-coord);position:absolute;bottom:12px;right:12px;background:var(--brand-yellow);color:var(--ink);font:700 9px/1 'JetBrains Mono',monospace;padding:3px 6px;z-index:2}
|
||
.fx-portfolio-card.featured::after{background:var(--ink);color:var(--brand-yellow)}
|
||
.fx-portfolio-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:contrast(1.1) saturate(0.8)}
|
||
.fx-portfolio-card.featured img{filter:contrast(1.3) saturate(0.6) brightness(0.85)}
|
||
.fx-portfolio-card>*{position:relative;z-index:1}
|
||
.fx-portfolio-tag{position:absolute;top:36px;left:12px;display:inline-block;font:700 9px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;background:var(--coral);color:#FAFAFA;padding:4px 6px;z-index:2;margin:0}
|
||
.fx-portfolio-card.featured .fx-portfolio-tag{background:var(--brand-yellow);color:var(--ink)}
|
||
.fx-portfolio-name{font:900 22px/1.1 'Kanit',sans-serif;letter-spacing:-0.5px;color:var(--ink);margin-bottom:4px;margin-top:28px;background:var(--paper);padding:4px 8px;align-self:flex-start;border:1px solid var(--ink)}
|
||
.fx-portfolio-card.featured .fx-portfolio-name{color:#FAFAFA;background:var(--ink);border-color:var(--ink)}
|
||
.fx-portfolio-name em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-portfolio-card.featured .fx-portfolio-name em{color:var(--brand-yellow)}
|
||
.fx-portfolio-stats{font:700 11px/1 'JetBrains Mono',monospace;color:var(--coral)}
|
||
.fx-portfolio-card.featured .fx-portfolio-stats{color:var(--brand-yellow)}
|
||
.fx-process{padding:64px 32px;background:var(--paper-2);border-bottom:1.5px solid var(--ink);background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px;position:relative}
|
||
.fx-process::before{content:'> $ npx workflow run · 4 steps';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper-2);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-process-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);max-width:1200px;margin:32px auto 0;background:var(--paper);position:relative}
|
||
.fx-process-step{padding:24px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
|
||
.fx-process-step:last-child{border-right:none}
|
||
.fx-process-step::after{content:'→';position:absolute;right:-12px;top:50%;transform:translateY(-50%);background:var(--brand-yellow);color:var(--ink);width:24px;height:24px;display:flex;align-items:center;justify-content:center;font:900 14px/1 'JetBrains Mono',monospace;border:1.5px solid var(--ink);z-index:2}
|
||
.fx-process-step:last-child::after{display:none}
|
||
.fx-process-step::before{content:attr(data-coord);position:absolute;top:8px;right:12px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--brand-yellow);padding:2px 5px}
|
||
.fx-process-num{display:inline-block;font:900 14px/1 'JetBrains Mono',monospace;background:var(--ink);color:var(--brand-yellow);padding:6px 10px;margin-bottom:12px;letter-spacing:0.5px}
|
||
.fx-process-title{font:800 16px/1.2 'Kanit',sans-serif;margin-bottom:6px}
|
||
.fx-process-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-process-text{font:500 12px/1.5 'JetBrains Mono',monospace;color:var(--text-dim)}
|
||
.fx-process-text em{font-family:'Itim',cursive;color:var(--coral)}
|
||
.fx-pricing{padding:64px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);position:relative}
|
||
.fx-pricing::before{content:'> $ cat /pricing/packages.json';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);max-width:1100px;margin:32px auto 0;background:var(--paper)}
|
||
.fx-pricing-card{padding:28px;border-right:1.5px solid var(--ink);position:relative;background:var(--paper)}
|
||
.fx-pricing-card:last-child{border-right:none}
|
||
.fx-pricing-card.featured{background:rgba(255,214,10,0.85);backdrop-filter:blur(4px)}
|
||
.fx-pricing-card::before{content:'tier / ' attr(data-coord);position:absolute;top:12px;right:12px;font:700 9px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:2px 5px;border:1px solid var(--ink)}
|
||
.fx-pricing-card.featured::before{background:var(--ink);color:var(--brand-yellow)}
|
||
.fx-pricing-tier{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-bottom:12px}
|
||
.fx-pricing-tier em{color:var(--coral);font-family:'Itim',cursive;text-transform:none}
|
||
.fx-pricing-name{font:900 28px/1.1 'Kanit',sans-serif;letter-spacing:-1px;margin-bottom:8px}
|
||
.fx-pricing-name em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-pricing-amount{font:900 48px/1 'JetBrains Mono',monospace;letter-spacing:-2px;margin:12px 0}
|
||
.fx-pricing-amount em{font-size:24px;color:var(--coral);font-family:'Itim',cursive}
|
||
.fx-pricing-period{font:700 10px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);margin-bottom:16px}
|
||
.fx-pricing-features{list-style:none;border-top:1px solid var(--ink);margin-bottom:16px}
|
||
.fx-pricing-features li{font:400 13px/1.4;padding:8px 0;border-bottom:1px dashed var(--line-2);display:flex;gap:8px}
|
||
.fx-pricing-features li::before{content:'✓';color:var(--coral);font-weight:700}
|
||
.fx-pricing-cta{display:block;text-align:center;padding:12px;background:var(--ink);color:#FAFAFA;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink)}
|
||
.fx-faq{padding:64px 32px;background:var(--paper-2);border-bottom:1.5px solid var(--ink);background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px;position:relative}
|
||
.fx-faq::before{content:'> $ cat /faq.txt';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper-2);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-faq-list{max-width:900px;margin:32px auto 0;display:flex;flex-direction:column;gap:24px}
|
||
.fx-faq-item{padding:0;border:0;background:transparent;backdrop-filter:none}
|
||
.fx-faq-item::before{content:none}
|
||
.fx-faq-q{font:700 17px/1.5 'Kanit',sans-serif;color:var(--ink);margin:0 0 8px;padding:0;background:transparent;border:0}
|
||
.fx-faq-q em{font-family:'Itim',cursive;color:var(--coral);font-weight:400;font-style:italic}
|
||
.fx-faq-a{font:400 14px/1.7 'Kanit',sans-serif;color:var(--text-dim);padding:0 0 0 16px;margin:0;border-left:3px solid var(--coral);background:transparent}
|
||
.fx-faq-a em{font-family:'Itim',cursive;color:var(--coral);font-weight:400;font-style:italic}
|
||
.fx-faq-a strong{font:600 14px/1.7 'Kanit',sans-serif;color:var(--ink)}
|
||
.fx-contact{padding:80px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink);text-align:center;background-image:linear-gradient(to right,rgba(10,10,10,0.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,0.03) 1px,transparent 1px);background-size:40px 40px;position:relative}
|
||
.fx-contact::before{content:'> $ contact@start.sh';position:absolute;top:16px;left:32px;font:700 10px/1 'JetBrains Mono',monospace;color:var(--coral);background:var(--paper);padding:4px 8px;border:1px solid var(--ink);z-index:2}
|
||
.fx-contact-title{font:900 48px/1;letter-spacing:-2px;margin-bottom:16px}
|
||
.fx-contact-title em{font-family:'Itim',cursive;color:var(--coral);font-weight:400}
|
||
.fx-contact-desc{font:300 16px/1.5;color:var(--text-dim);max-width:500px;margin:0 auto 32px}
|
||
.fx-contact-desc em{font-family:'Itim',cursive;color:var(--coral)}
|
||
.fx-contact-form{display:flex;max-width:480px;margin:0 auto;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--brand-yellow)}
|
||
.fx-contact-form::before{content:'$';padding:0 16px;display:flex;align-items:center;color:var(--coral);font:700 20px/1 'JetBrains Mono',monospace;border-right:1.5px solid var(--ink);background:var(--brand-yellow)}
|
||
.fx-contact-input{flex:1;padding:16px;border:none;background:transparent;font:500 14px/1 'JetBrains Mono',monospace;outline:none}
|
||
.fx-contact-submit{background:var(--ink);color:#FAFAFA;border:none;padding:0 20px;font:800 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;cursor:pointer}
|
||
.fx-footer{background:var(--paper-2);border-top:1.5px solid var(--ink);padding:48px 32px 24px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim)}
|
||
.fx-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;max-width:1280px;margin:0 auto 32px;padding-bottom:32px;border-bottom:1px dashed var(--ink)}
|
||
.fx-footer-col h4{font:700 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink);margin-bottom:12px}
|
||
.fx-footer-col ul{list-style:none}
|
||
.fx-footer-col li{margin-bottom:6px}
|
||
.fx-footer-col a{color:var(--text-dim);text-decoration:none;font-size:12px}
|
||
.fx-footer-brand{display:none}
|
||
.fx-footer-logo{display:inline-block;line-height:0;margin-bottom:12px}
|
||
.fx-footer-logo-img{height:32px;width:auto;display:block}
|
||
.fx-footer-tagline{font:300 13px/1.5;color:var(--text-dim);max-width:280px}
|
||
.fx-footer-bottom{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;color:rgba(10,10,10,0.3);text-transform:uppercase;letter-spacing:0.5px}
|
||
.fx-footer-bottom em{color:var(--coral);font-family:'Itim',cursive;text-transform:none}
|
||
.fx-reveal{opacity:1;transform:translateY(0);transition:opacity 0.7s cubic-bezier(0.2,0.8,0.2,1),transform 0.7s cubic-bezier(0.2,0.8,0.2,1)}
|
||
.fx-reveal.revealed{opacity:1;transform:translateY(0)}
|
||
.fx-stagger>*{opacity:1;transform:translateY(0);transition:opacity 0.5s cubic-bezier(0.2,0.8,0.2,1),transform 0.5s cubic-bezier(0.2,0.8,0.2,1)}
|
||
.fx-stagger.staggered>*:nth-child(1){transition-delay:0.05s;opacity:1;transform:translateY(0)}
|
||
.fx-stagger.staggered>*:nth-child(2){transition-delay:0.15s;opacity:1;transform:translateY(0)}
|
||
.fx-stagger.staggered>*:nth-child(3){transition-delay:0.25s;opacity:1;transform:translateY(0)}
|
||
.fx-stagger.staggered>*:nth-child(4){transition-delay:0.35s;opacity:1;transform:translateY(0)}
|
||
.fx-hero-title>span{display:inline-block;animation:type-up 0.8s cubic-bezier(0.2,0.8,0.2,1) both}
|
||
.fx-hero-title>span:nth-child(1){animation-delay:0.1s}
|
||
.fx-hero-title>span:nth-child(2){animation-delay:0.25s}
|
||
.fx-hero-title>span:nth-child(3){animation-delay:0.4s}
|
||
.fx-hero-title>span:nth-child(4){animation-delay:0.55s}
|
||
.fx-callout{animation:pulse-glow 3s ease-in-out infinite}
|
||
.fx-stat-value{animation:float 4s ease-in-out infinite}
|
||
.fx-stat:nth-child(2) .fx-stat-value{animation-delay:0.3s}
|
||
.fx-stat:nth-child(3) .fx-stat-value{animation-delay:0.6s}
|
||
.fx-stat:nth-child(4) .fx-stat-value{animation-delay:0.9s}
|
||
.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-portfolio-card{transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1)}
|
||
.fx-portfolio-card:hover{transform:translate(-4px,-4px) scale(1.01);box-shadow:8px 8px 0 var(--ink)}
|
||
.fx-portfolio-card.featured:hover{box-shadow:8px 8px 0 var(--coral)}
|
||
.fx-process-step{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
|
||
.fx-process-step:hover{background:var(--brand-yellow)}
|
||
.fx-faq-item{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
|
||
.fx-faq-item:hover{transform:translateX(4px);border-color:var(--coral)}
|
||
.fx-service-card{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
|
||
.fx-service-card:hover{transform:translateY(-4px);border-color:var(--coral)}
|
||
.fx-service-card:hover .fx-service-num{background:var(--coral);color:#FAFAFA}
|
||
.fx-pricing-card{transition:all 0.3s cubic-bezier(0.2,0.8,0.2,1)}
|
||
.fx-pricing-card:hover{transform:translateY(-4px)}
|
||
.fx-log>div{opacity:0;transform:translateX(-8px);transition:opacity 0.4s,transform 0.4s}
|
||
.fx-log.staggered>div:nth-child(1){transition-delay:0.2s;opacity:1;transform:translateX(0)}
|
||
.fx-log.staggered>div:nth-child(2){transition-delay:0.5s;opacity:1;transform:translateX(0)}
|
||
.fx-log.staggered>div:nth-child(3){transition-delay:0.8s;opacity:1;transform:translateX(0)}
|
||
.fx-portfolio-card .fx-portfolio-tag{animation:tag-pulse 3s ease-in-out infinite}
|
||
.fx-nav{background:rgba(250,250,250,0.78);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
|
||
.fx-hero-content{background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
|
||
.fx-faq-item{background:rgba(255,255,255,0.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
|
||
.fx-pricing-card.featured{background:rgba(255,214,10,0.85);backdrop-filter:blur(4px)}
|
||
.fx-pricing-card.featured{position:relative}
|
||
.fx-pricing-card.featured::before{content:"";position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(180deg,var(--brand-yellow),var(--coral),var(--brand-yellow));background-size:100% 200%;animation:gradient-vertical 4s linear infinite}
|
||
.fx-hero-content{box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 4px 16px rgba(10,10,10,0.08)}
|
||
.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}
|
||
.fx-services{background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px}
|
||
.fx-process{background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px}
|
||
.fx-faq{background-image:radial-gradient(rgba(10,10,10,0.06) 1px,transparent 1px);background-size:24px 24px}
|
||
.fx-callout{background:linear-gradient(180deg,#FFE600,var(--brand-yellow))}
|
||
.fx-footer{background-image:linear-gradient(180deg,var(--paper-2) 0%,var(--paper-3) 100%)}
|
||
.fx-contact-form{box-shadow:4px 4px 0 var(--brand-yellow),0 8px 24px rgba(10,10,10,0.08);transition:all 0.2s}
|
||
.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: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)
|
||
v6-nav didn't have a dropdown originally; we added
|
||
'บริการ' dropdown per user spec. Active link styling too.
|
||
============================================ */
|
||
.fx-nav-menu{position:relative}
|
||
.fx-nav-menu li{position:relative}
|
||
.fx-nav-dropdown{position:absolute;top:100%;left:0;min-width:240px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);list-style:none;padding:8px 0;margin:0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 0.18s,transform 0.18s,visibility 0.18s;z-index:60}
|
||
.fx-nav-has-dropdown:hover>.fx-nav-dropdown,
|
||
.fx-nav-dropdown-open>.fx-nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
|
||
.fx-nav-dropdown li{margin:0}
|
||
.fx-nav-dropdown a{display:block;padding:10px 18px;font:600 12px/1.3 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.3px;color:var(--ink);text-decoration:none;transition:background 0.15s,color 0.15s}
|
||
.fx-nav-dropdown a:hover{background:var(--brand-yellow);color:var(--ink)}
|
||
.fx-nav-dropdown a.active{background:var(--coral);color:#FAFAFA}
|
||
.fx-nav-menu a.active{color:var(--coral)}
|
||
.fx-nav-menu a.active::after{content:'';display:block;height:2px;background:var(--coral);margin-top:4px}
|
||
@media (max-width:768px){
|
||
.fx-nav-inner{flex-direction:column;align-items:flex-start;padding:12px 16px}
|
||
.fx-nav-menu{flex-direction:column;width:100%;gap:0}
|
||
.fx-nav-menu>li{width:100%;border-bottom:1px solid var(--line-2)}
|
||
.fx-nav-menu>li>a{display:block;padding:12px 0}
|
||
.fx-nav-dropdown{position:static;box-shadow:none;border:none;background:var(--paper-2);opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;padding:0;transition:max-height 0.25s,padding 0.25s}
|
||
.fx-nav-dropdown-open>.fx-nav-dropdown{max-height:400px;padding:8px 0}
|
||
.fx-nav-cta{margin-top:12px;align-self:flex-start}
|
||
}
|
||
|
||
/* ============================================
|
||
ITIM THAI SIDE-BEARING FIX (added 2026-06-13)
|
||
Per user memory: Thai display fonts (Itim) ship
|
||
with wide side bearings causing visual gaps
|
||
after Latin punctuation. Apply tight letter-
|
||
spacing to all <em> in v7-5 sections.
|
||
============================================ */
|
||
.fx-utility-bar em,
|
||
.fx-marquee em,
|
||
.fx-nav em,
|
||
.fx-nav-logo-text em,
|
||
.fx-hero-title em,
|
||
.fx-hero-lede em,
|
||
.fx-case-stat-num em,
|
||
.fx-service-title em,
|
||
.fx-callout-text em,
|
||
.fx-portfolio-name em,
|
||
.fx-process-text em,
|
||
.fx-pricing-tier em,
|
||
.fx-pricing-cta em,
|
||
.fx-faq-q em,
|
||
.fx-faq-a em,
|
||
.fx-contact-title em,
|
||
.fx-contact-desc em,
|
||
.fx-footer-bottom em,
|
||
.fx-prose em,
|
||
.fx-prose :global(em) {
|
||
letter-spacing: -0.5px;
|
||
margin-right: -2px;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* ============================================
|
||
PREFERS-REDUCED-MOTION (added 2026-06-13)
|
||
Per plan Phase 6.2: respect user motion preferences.
|
||
============================================ */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.fx-marquee-track,
|
||
.fx-sparkle,
|
||
.fx-reveal,
|
||
.fx-stagger {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
.fx-hero::after,
|
||
.fx-faq-a::after { display: none !important; }
|
||
}
|
||
|
||
/* ============================================
|
||
ANIMATION FIXES (added 2026-06-13 evening)
|
||
v7-5 design system defined animation: on 5+ elements
|
||
(sparkle-float, pulse-glow, float, tag-pulse) but the
|
||
corresponding @keyframes were NEVER included. User
|
||
reported "เว็บไม่มี animation เลย" — this is the root cause.
|
||
|
||
Also: .fx-reveal had no initial hidden state (started at
|
||
opacity:1 with no .revealed class to transition TO), so
|
||
the reveal-on-scroll observer fired but nothing animated.
|
||
Same for .fx-stagger — no CSS for .staggered state.
|
||
|
||
These 4 keyframes + 2 state fixes restore the intended
|
||
"Neon × Tech Grid, light" feel.
|
||
============================================ */
|
||
|
||
/* Sparkles: gentle floating up/down + rotate */
|
||
@keyframes sparkle-float {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
|
||
50% { transform: translateY(-12px) rotate(180deg); opacity: 0.9; }
|
||
}
|
||
|
||
/* Callout: pulsing yellow glow (subtle scale + brightness) */
|
||
@keyframes pulse-glow {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); }
|
||
50% { box-shadow: 0 0 24px 4px rgba(255, 90, 60, 0.35); }
|
||
}
|
||
|
||
/* Stat values: gentle float up/down */
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-6px); }
|
||
}
|
||
|
||
/* Portfolio tag: subtle pulse to draw eye */
|
||
@keyframes tag-pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.04); }
|
||
}
|
||
|
||
/* Hero eyebrow: typewriter effect (chars appear sequentially) */
|
||
@keyframes type-up {
|
||
0% { width: 0; opacity: 1; }
|
||
100% { width: 100%; opacity: 1; }
|
||
}
|
||
|
||
/* Hero cursor: blink effect (the █ block after $ command) */
|
||
@keyframes blink-cursor {
|
||
0%, 49% { opacity: 1; }
|
||
50%, 100% { opacity: 0; }
|
||
}
|
||
|
||
/* Pricing card featured border: gradient scrolls vertically */
|
||
@keyframes gradient-vertical {
|
||
0% { background-position: 0% 0%; }
|
||
100% { background-position: 0% 200%; }
|
||
}
|
||
|
||
/* Re-bind animations with !important to survive the
|
||
reduced-motion override (which targets the wrong selector).
|
||
The reduced-motion block uses .fx-sparkle / .fx-callout /
|
||
.fx-stat-value / .fx-portfolio-tag — these ARE the right
|
||
selectors, so users with reduced-motion will still see
|
||
animations disabled (per accessibility intent). */
|
||
.fx-sparkle { animation: sparkle-float 6s ease-in-out infinite; }
|
||
.fx-callout { animation: pulse-glow 3s ease-in-out infinite; }
|
||
.fx-stat-value { animation: float 4s ease-in-out infinite; }
|
||
.fx-portfolio-tag { animation: tag-pulse 2.5s ease-in-out infinite; }
|
||
|
||
/* Initial hidden state for .fx-reveal — must be opacity:0 BEFORE
|
||
the observer adds .revealed. Without this, the element starts
|
||
visible and there is nothing to transition TO. */
|
||
.fx-reveal:not(.revealed) {
|
||
opacity: 0;
|
||
transform: translateY(40px);
|
||
}
|
||
.fx-reveal.revealed {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Stagger reveal — children start hidden, fade in with delays */
|
||
.fx-stagger:not(.staggered) > * {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
.fx-stagger.staggered > * {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
|
||
transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.fx-stagger.staggered > *:nth-child(1) { transition-delay: 0.05s; }
|
||
.fx-stagger.staggered > *:nth-child(2) { transition-delay: 0.10s; }
|
||
.fx-stagger.staggered > *:nth-child(3) { transition-delay: 0.15s; }
|
||
.fx-stagger.staggered > *:nth-child(4) { transition-delay: 0.20s; }
|
||
.fx-stagger.staggered > *:nth-child(5) { transition-delay: 0.25s; }
|
||
.fx-stagger.staggered > *:nth-child(6) { transition-delay: 0.30s; }
|
||
|
||
/* General button hover (was missing — only coral had hover) */
|
||
.fx-btn:hover {
|
||
background: var(--coral);
|
||
color: #FAFAFA;
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 4px 4px 0 var(--ink);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-btn.ghost:hover {
|
||
background: var(--brand-yellow);
|
||
color: var(--ink);
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 4px 4px 0 var(--ink);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-nav-cta:hover {
|
||
background: var(--ink);
|
||
color: var(--brand-yellow);
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 4px 4px 0 var(--coral);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-pricing-cta:hover {
|
||
background: var(--coral);
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 4px 4px 0 var(--brand-yellow);
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
/* Nav links: hover state (was missing) */
|
||
.fx-nav-menu a:hover {
|
||
color: var(--coral);
|
||
background: var(--brand-yellow);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-nav-menu a {
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
/* Theme toggle: visible interactive feedback */
|
||
.fx-theme-toggle:hover {
|
||
background: var(--brand-yellow);
|
||
color: var(--ink);
|
||
border-color: var(--brand-yellow);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-theme-toggle {
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-mode-indicator {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.fx-mode-indicator:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Service/portfolio cards: subtle lift on hover */
|
||
.fx-service-card,
|
||
.fx-portfolio-card,
|
||
.fx-pricing-card,
|
||
.fx-faq-item {
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
.fx-service-card:hover,
|
||
.fx-portfolio-card:hover {
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 6px 6px 0 var(--ink);
|
||
}
|
||
.fx-pricing-card:hover {
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 6px 6px 0 var(--ink);
|
||
}
|
||
.fx-pricing-card.featured:hover {
|
||
box-shadow: 6px 6px 0 var(--coral);
|
||
}
|
||
.fx-faq-item:hover {
|
||
background: var(--paper-2);
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
/* Stat cards: subtle hover */
|
||
.fx-stat:hover {
|
||
background: var(--brand-yellow);
|
||
transform: translate(-1px, -1px);
|
||
box-shadow: 3px 3px 0 var(--ink);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-stat {
|
||
transition: all 0.15s ease;
|
||
}
|
||
.fx-case-stat:hover {
|
||
transform: scale(1.05);
|
||
transition: transform 0.15s ease;
|
||
}
|
||
.fx-case-stat {
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
/* Process step hover: highlight current step */
|
||
.fx-process-step:hover {
|
||
background: var(--paper-2);
|
||
border-color: var(--coral);
|
||
transform: translateY(-4px);
|
||
transition: all 0.2s ease;
|
||
}
|
||
.fx-process-step {
|
||
transition: all 0.2s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Sparkle variant speeds (s2-s5) — different tempos for visual variety */
|
||
.fx-sparkle.s2 { animation-duration: 4s; animation-delay: 0.5s; }
|
||
.fx-sparkle.s3 { animation-duration: 5s; animation-delay: 1s; }
|
||
.fx-sparkle.s4 { animation-duration: 7s; animation-delay: 1.5s; }
|
||
.fx-sparkle.s5 { animation-duration: 5.5s; animation-delay: 2s; } |