kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Magnetic Field hero, Thai eyebrows, black text-stroke, service pages fixes

Browse Source 
- Hero: Magnetic Field design (ripple rings, field curves, attract animations)
- H1: เปลี่ยนเป็น 'เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า', กำไร เน้นขอบดำ
- Site: ทุก eyebrow แปลเป็นไทย
- Buttons: text สีดำทุกหน้าแม้ใน dark section
- Yellow text: เพิ่ม -webkit-text-stroke ขอบดำทุก element
- Service pages: light/light/dark pattern, process-grid แถวเดียว
- Logo: อัพเดทใหม่
- Demos: เพิ่ม 5 hero design concepts (orbital, energy flow, holographic, constellation, magnetic)
This commit is contained in:
Kunthawat Greethong
2026-06-26 11:15:58 +07:00
parent 689a8924e6
commit f114a34a62
18 changed files with 1201 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/about.astro
View File

@@ -10,7 +10,7 @@ import { process } from '../data/site.js';
<section class="page-hero scene scene-light" data-scene="light">
<div class="page-hero-grid">
<div>
<p class="eyebrow">About MoreminiMore</p>
<p class="eyebrow">เกี่ยวกับเรา</p>
<h1>ที่ปรึกษาที่เริ่มจากคำถาม ไม่ใช่เริ่มจากขายแพ็กเกจ</h1>
</div>
<p class="hero-lead">
@@ -25,7 +25,7 @@ import { process } from '../data/site.js';
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Why we exist</p>
<p class="eyebrow">ทำไมเราถึงมีอยู่</p>
<h2>ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม</h2>
<p>
เราเห็น SME หลายรายจ่ายเงินกับเว็บที่สวยแต่ไม่มีคนทัก โฆษณาที่มีคนคลิกแต่ไม่เกิดยอดขาย หรือเครื่องมือ AI ที่ดูน่าตื่นเต้นแต่ไม่เข้ากับงานจริง จึงเลือกทำงานแบบดูโจทย์ก่อน แล้วค่อยเสนอสิ่งที่ควรทำ
@@ -35,7 +35,7 @@ import { process } from '../data/site.js';
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Policy</p>
<p class="eyebrow">นโยบาย</p>
<h2>เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า</h2>
<p>
ถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็อยู่ต่อได้ และเราก็ทำงานต่อได้ด้วย ทุกงานจึงต้องตอบให้ได้ว่าช่วยเพิ่มยอดขาย ลดต้นทุน ประหยัดเวลา หรือช่วยตัดสินใจได้ดีขึ้นอย่างไร
@@ -46,7 +46,7 @@ import { process } from '../data/site.js';
<section class="page-section page-section-tight">
<div class="section-heading">
<p class="eyebrow">Process</p>
<p class="eyebrow">ขั้นตอน</p>
<h2>วิธีทำงานที่ลดการเดา</h2>
</div>
<div class="process-grid">
@@ -65,7 +65,7 @@ import { process } from '../data/site.js';
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Talk to us</p>
<p class="eyebrow">คุยกับเรา</p>
<h2>เล่าโจทย์ของธุรกิจคุณก่อน แล้วค่อยดูว่าควรเริ่มตรงไหน</h2>
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</div>

2
src/pages/blog.astro
View File

@@ -15,7 +15,7 @@ const posts = (await getCollection('blog', ({ data }) => !data.draft)).sort(
<section class="page-hero scene scene-light" data-scene="light">
<div class="page-hero-grid">
<div>
<p class="eyebrow">Blog</p>
<p class="eyebrow">บทความ</p>
<h1>บทความสำหรับธุรกิจที่อยากตัดสินใจจากข้อมูล</h1>
</div>
<p class="hero-lead">

2
src/pages/blog/[slug].astro
View File

@@ -45,7 +45,7 @@ const formattedDate = new Intl.DateTimeFormat('th-TH', {
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Next step</p>
<p class="eyebrow">ขั้นตอนถัดไป</p>
<h2>อ่านแล้วเจอโจทย์คล้ายกัน ส่งปัญหามาให้เราช่วยดูก่อนได้</h2>
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</div>

6
src/pages/contact.astro
View File

@@ -10,7 +10,7 @@ import { problems } from '../data/site.js';
<section class="page-hero scene scene-light" data-scene="light">
<div class="page-hero-grid">
<div>
<p class="eyebrow">Contact</p>
<p class="eyebrow">ติดต่อ</p>
<h1>ส่งโจทย์ให้เราดู แล้วค่อยตัดสินใจว่าจะทำอะไร</h1>
</div>
<p class="hero-lead">
@@ -24,7 +24,7 @@ import { problems } from '../data/site.js';
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Start here</p>
<p class="eyebrow">เริ่มต้นที่นี่</p>
<h2>เลือกปัญหาที่ใกล้ที่สุด</h2>
<div class="contact-problem-list">
{problems.map(([, label]) => <span>{label}</span>)}
@@ -33,7 +33,7 @@ import { problems } from '../data/site.js';
</div>
<aside class="contact-info">
<p class="eyebrow">Contact info</p>
<p class="eyebrow">ข้อมูลติดต่อ</p>
<h2>ช่องทางติดต่อ</h2>
<dl>
<div>

4
src/pages/faq.astro
View File

@@ -10,7 +10,7 @@ import { faqs } from '../data/site.js';
<section class="page-hero scene scene-light" data-scene="light">
<div class="page-hero-grid">
<div>
<p class="eyebrow">FAQ</p>
<p class="eyebrow">คำถามที่พบบ่อย</p>
<h1>คำถามที่ควรถามก่อนเริ่มทำอะไรเพิ่ม</h1>
</div>
<p class="hero-lead">
@@ -39,7 +39,7 @@ import { faqs } from '../data/site.js';
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Still unsure?</p>
<p class="eyebrow">ยังไม่แน่ใจ?</p>
<h2>ถ้าคำถามของคุณไม่อยู่ในนี้ ส่งโจทย์มาให้เราดูได้</h2>
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</div>

49
src/pages/index.astro
View File

@@ -102,7 +102,7 @@ const process = [
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="description" content="MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำให้คุ้มที่สุด" />
<meta name="theme-color" content="#f8f5ea" />
<title>MoreminiMore | ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม</title>
<title>MoreminiMore | เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า</title>
</head>
<body>
<div class="background-stage" aria-hidden="true">
@@ -199,17 +199,14 @@ const process = [
<div class="hero-copy">
<p class="eyebrow">พาร์ทเนอร์สำหรับ SME ที่อยากตัดสินใจให้คุ้มขึ้น</p>
<h1 class="desktop-title">
<span>ธุรกิจไม่ควร</span>
<span>เสียเงินกับสิ่งที่ยัง</span>
<span>ไม่รู้ว่าคุ้มไหม</span>
<span>เป้าหมายของเราคือ<br>การเพิ่ม<span class="text-highlight">กำไร</span>ให้ลูกค้า</span>
</h1>
<h1 class="mobile-title" aria-hidden="true">
<span>ธุรกิจ</span>
<span>ไม่ควร</span>
<span>เสียเงิน</span>
<span>กับสิ่งที่ยัง</span>
<span>ไม่รู้ว่า</span>
<span>คุ้มไหม</span>
<span>เป้าหมาย</span>
<span>ของเราคือ</span>
<span>การเพิ่ม</span>
<span><span class="text-highlight">กำไร</span></span>
<span>ให้ลูกค้า</span>
</h1>
<p class="hero-lead">
เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำอย่างมีประสิทธิภาพ และเหมาะกับธุรกิจของคุณ
@@ -224,37 +221,25 @@ const process = [
<canvas class="neural-canvas" aria-hidden="true"></canvas>
<div class="neural-scene">
<!-- Center node: กำไร -->
<div class="neural-node node-center liquid-glass liquidGlass-wrapper" data-node="center">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<div class="neural-node node-center" data-node="center">
<span class="node-label">กำไร</span>
<span class="node-sub">เป้าหมายของทุกธุรกิจ</span>
</div>
<!-- Outer node: Marketing -->
<div class="neural-node neural-card node-marketing liquid-glass liquidGlass-wrapper" data-node="marketing">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<div class="neural-node neural-card node-marketing" data-node="marketing">
<span class="card-tag">Marketing</span>
<span class="card-desc">เพิ่มรายได้</span>
</div>
<!-- Outer node: AI -->
<div class="neural-node neural-card node-ai liquid-glass liquidGlass-wrapper" data-node="ai">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<div class="neural-node neural-card node-ai" data-node="ai">
<span class="card-tag">AI</span>
<span class="card-desc">ลดต้นทุนและเวลา</span>
</div>
<!-- Outer node: Business Knowledge -->
<div class="neural-node neural-card node-biz liquid-glass liquidGlass-wrapper" data-node="biz">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<div class="neural-node neural-card node-biz" data-node="biz">
<span class="card-tag">Business Knowledge</span>
<span class="card-desc">ลดความเสี่ยง</span>
</div>
@@ -265,7 +250,7 @@ const process = [
<section class="problem-strip">
<div>
<p class="eyebrow">Problem first</p>
<p class="eyebrow">เริ่มจากปัญหา</p>
<h2>คุณเล่าปัญหา เราช่วยหา service ที่เหมาะสม</h2>
</div>
<div class="problem-strip-content">
@@ -282,7 +267,7 @@ const process = [
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
<div class="section-heading">
<p class="eyebrow">Diagnosis story</p>
<p class="eyebrow">ขั้นตอนวินิจฉัย</p>
<h2>Dataroot: ก่อนแก้ ต้องรู้ก่อนว่าข้อมูลกำลังบอกอะไร</h2>
</div>
@@ -328,7 +313,7 @@ const process = [
<section id="services" class="services-section scene scene-light" data-scene="light">
<div class="section-heading">
<p class="eyebrow">Services</p>
<p class="eyebrow">บริการ</p>
<h2>บริการมีไว้ให้เราเลือกให้เหมาะกับปัญหา ไม่ใช่ให้คุณเดาเอง</h2>
</div>
@@ -348,7 +333,7 @@ const process = [
<section id="portfolio" class="portfolio-section scene scene-dark" data-scene="dark">
<div class="section-heading">
<p class="eyebrow">Portfolio</p>
<p class="eyebrow">ผลงาน</p>
<h2>งานเว็บที่ต้องดูน่าเชื่อถือก่อน แล้วค่อยสวยแบบมีเหตุผล</h2>
</div>
@@ -371,7 +356,7 @@ const process = [
<section id="process" class="process-section">
<div class="section-heading">
<p class="eyebrow">How we work</p>
<p class="eyebrow">วิธีการทำงาน</p>
<h2>ไม่เริ่มจากขายของ เริ่มจากเข้าใจธุรกิจก่อน</h2>
</div>
<div class="process-grid">
@@ -393,7 +378,7 @@ const process = [
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Start small</p>
<p class="eyebrow">เริ่มต้นง่าย ๆ</p>
<h2>ส่งโจทย์สั้น ๆ มาก่อนก็ได้ เดี๋ยวเราช่วยดูว่าควรเริ่มตรงไหน</h2>
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</div>

6
src/pages/portfolio.astro
View File

@@ -10,7 +10,7 @@ import { portfolio } from '../data/site.js';
<section class="page-hero scene scene-light" data-scene="light">
<div class="page-hero-grid">
<div>
<p class="eyebrow">Portfolio</p>
<p class="eyebrow">ผลงาน</p>
<h1>ผลงานจริงที่เปิดดูเว็บจริงได้</h1>
</div>
<p class="hero-lead">
@@ -21,7 +21,7 @@ import { portfolio } from '../data/site.js';
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
<div class="section-heading">
<p class="eyebrow">Featured case</p>
<p class="eyebrow">ผลงานเด่น</p>
<h2>Dataroot: ก่อนแก้ ต้องรู้ก่อนว่าข้อมูลกำลังบอกอะไร</h2>
</div>
<div class="case-grid">
@@ -65,7 +65,7 @@ import { portfolio } from '../data/site.js';
<section class="portfolio-section scene scene-dark" data-scene="dark">
<div class="section-heading">
<p class="eyebrow">Selected work</p>
<p class="eyebrow">ผลงานทั้งหมด</p>
<h2>เว็บที่มีโจทย์ต่างกัน จึงต้องออกแบบต่างกัน</h2>
</div>
<div class="portfolio-grid">

6
src/pages/services.astro
View File

@@ -10,7 +10,7 @@ import { services, process } from '../data/site.js';
<section class="page-hero scene scene-light" data-scene="light">
<div class="page-hero-grid">
<div>
<p class="eyebrow">Services</p>
<p class="eyebrow">บริการ</p>
<h1>เลือกบริการจากปัญหา ไม่ใช่จากชื่อแพ็กเกจ</h1>
</div>
<p class="hero-lead">
@@ -42,7 +42,7 @@ import { services, process } from '../data/site.js';
<section class="page-section page-section-tight">
<div class="section-heading">
<p class="eyebrow">How we work</p>
<p class="eyebrow">วิธีการทำงาน</p>
<h2>ทำให้ง่ายต่อการตัดสินใจ ไม่ใช่ทำให้ดูเยอะ</h2>
</div>
<div class="process-grid">
@@ -61,7 +61,7 @@ import { services, process } from '../data/site.js';
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Next step</p>
<p class="eyebrow">ขั้นตอนถัดไป</p>
<h2>ไม่แน่ใจว่าควรเริ่มบริการไหน ส่งโจทย์มาให้เราดูก่อนได้</h2>
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</div>

12
src/pages/services/[slug].astro
View File

@@ -34,9 +34,9 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
</div>
</section>
<section class="page-section service-story-section">
<section class="page-section service-story-section scene scene-light" data-scene="light">
<div class="section-heading">
<p class="eyebrow">Diagnosis first</p>
<p class="eyebrow">วินิจฉัยก่อน</p>
<h2>เริ่มจากดูว่าโจทย์นี้ควรแก้ตรงไหนก่อน</h2>
</div>
<div class="service-story-grid">
@@ -63,7 +63,7 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
<section class="case-section service-proof-section scene scene-dark" data-scene="dark">
<div class="section-heading">
<p class="eyebrow">What matters</p>
<p class="eyebrow">สิ่งที่สำคัญ</p>
<h2>{service.objective}</h2>
</div>
<div class="service-proof-grid">
@@ -87,9 +87,9 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
</div>
</section>
<section class="page-section page-section-tight">
<section class="page-section page-section-tight scene scene-light" data-scene="light">
<div class="section-heading">
<p class="eyebrow">Other services</p>
<p class="eyebrow">บริการอื่น ๆ</p>
<h2>บางโจทย์อาจต้องเริ่มจากบริการอื่นก่อน</h2>
</div>
<div class="related-service-grid">
@@ -111,7 +111,7 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<p class="eyebrow">Next step</p>
<p class="eyebrow">ขั้นตอนถัดไป</p>
<h2>เล่าโจทย์ของคุณก่อน แล้วเราช่วยดูว่าบริการนี้ใช่จุดเริ่มต้นไหม</h2>
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</div>

62
src/scripts/home.js
View File

@@ -208,6 +208,7 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
window.addEventListener('resize', resizeCanvas);
// Find intersection point on node border
// Coordinates are relative to heroNeural container
function findBorderPoint(nodeRect, targetX, targetY) {
const cx = nodeRect.left + nodeRect.width / 2;
const cy = nodeRect.top + nodeRect.height / 2;
@@ -219,24 +220,21 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
if (dx === 0 && dy === 0) return { x: cx, y: cy };
const absDx = Math.abs(dx);
const absDy = Math.abs(dy);
let scale;
if (absDx * hh > absDy * hw) {
scale = hw / absDx;
} else {
scale = hh / absDy;
}
// All neural nodes are circular — use circle intersection
const r = Math.min(hw, hh);
const dist = Math.sqrt(dx * dx + dy * dy);
return {
x: cx + dx * scale,
y: cy + dy * scale
x: cx + (dx / dist) * r,
y: cy + (dy / dist) * r
};
}
// Draw connections
// Magnetic field time counter
let magTime = 0;
// Draw connections with magnetic field effects
function drawConnections() {
magTime++;
const rect = heroNeural.getBoundingClientRect();
ctx.clearRect(0, 0, rect.width, rect.height);
@@ -249,6 +247,17 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
const centerX = centerRect.left + centerRect.width / 2 - rect.left;
const centerY = centerRect.top + centerRect.height / 2 - rect.top;
// Magnetic ripple rings from center
for (let r = 0; r < 4; r++) {
const radius = 95 + r * 28 + (magTime * 0.03) % 28;
const alpha = Math.max(0, 0.22 - r * 0.05 - ((magTime * 0.03) % 28) / 130);
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.strokeStyle = `rgba(19, 18, 13, ${alpha})`;
ctx.lineWidth = 1;
ctx.stroke();
}
outerNodes.forEach(node => {
const nodeRect = node.getBoundingClientRect();
const nodeX = nodeRect.left + nodeRect.width / 2 - rect.left;
@@ -266,13 +275,32 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
centerX, centerY
);
const dx = endPt.x - startPt.x;
const dy = endPt.y - startPt.y;
const dist = Math.sqrt(dx * dx + dy * dy);
// Main connection line
ctx.beginPath();
ctx.moveTo(startPt.x, startPt.y);
ctx.lineTo(endPt.x, endPt.y);
ctx.strokeStyle = 'rgba(254, 212, 0, 0.5)';
ctx.lineWidth = 3;
ctx.strokeStyle = 'rgba(19, 18, 13, 0.3)';
ctx.lineWidth = 2.5;
ctx.lineCap = 'round';
ctx.stroke();
// Field curve arcs on both sides (magnetic field lines)
for (let side = -1; side <= 1; side += 2) {
const offset = side * 18;
const midX = startPt.x + dx * 0.5 + (-dy / dist) * offset;
const midY = startPt.y + dy * 0.5 + (dx / dist) * offset;
ctx.beginPath();
ctx.moveTo(startPt.x, startPt.y);
ctx.quadraticCurveTo(midX, midY, endPt.x, endPt.y);
ctx.strokeStyle = 'rgba(19, 18, 13, 0.08)';
ctx.lineWidth = 1;
ctx.stroke();
}
});
}
@@ -281,8 +309,8 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
targetRotateY = (x - 0.5) * 10;
targetRotateX = (y - 0.5) * -10;
targetRotateY = (x - 0.5) * 6;
targetRotateX = (y - 0.5) * -6;
});
document.addEventListener('mouseleave', () => {

129
src/styles/global.css
View File

@@ -459,7 +459,6 @@ color: rgb(255 255 255 / .72);
/* Links inside inverted page sections */
.page-section a,
.page-section-tight a,
.page-section button,
.page-section-tight button,
.page-section .text-link,
.page-section-tight .text-link {
@@ -473,6 +472,17 @@ color: rgb(255 255 255 / .72);
.page-section-tight .text-link:hover {
color: var(--yellow);
}
/* Yellow buttons keep black text even in dark sections */
.page-section .button,
.page-section-tight .button,
.scene-dark .button {
color: var(--ink);
}
.page-section .button:hover,
.page-section-tight .button:hover,
.scene-dark .button:hover {
color: var(--ink);
}
.page-section li,
.page-section-tight li {
color: rgb(255 255 255 / .72);
@@ -709,7 +719,7 @@ align-items: stretch;
}
.service-proof-grid .process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
color: white;
}
@@ -743,8 +753,8 @@ color: var(--muted);
.hero-neural {
position: relative;
width: 100%;
max-width: 600px;
height: 520px;
max-width: 650px;
height: 560px;
margin-inline: auto;
perspective: 1200px;
}
@@ -792,15 +802,38 @@ color: var(--muted);
border-radius: 50%;
padding: 32px;
border: 3px solid var(--yellow);
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 0 0 10px rgb(254 212 0 / .12),
0 30px 80px rgb(254 212 0 / .20),
0 10px 30px rgb(0 0 0 / .12);
0 0 0 14px rgb(254 212 0 / .10),
0 0 60px rgb(254 212 0 / .20),
0 0 120px rgb(254 180 0 / .08);
z-index: 10;
animation: magnetPulse 2s ease-in-out infinite;
}
.node-center:hover {
transform: translate(-50%, -50%) translateZ(20px) scale(1.05);
transform: translate(-50%, -50%) translateZ(20px) scale(1.08);
@keyframes magnetPulse {
0%, 100% {
box-shadow:
0 0 0 14px rgb(254 212 0 / .10),
0 0 60px rgb(254 212 0 / .20),
0 0 120px rgb(254 180 0 / .08);
}
50% {
box-shadow:
0 0 0 20px rgb(254 212 0 / .14),
0 0 80px rgb(254 212 0 / .30),
0 0 150px rgb(254 180 0 / .12);
}
}
box-shadow:
0 0 0 18px rgb(254 212 0 / .12),
0 0 80px rgb(254 212 0 / .25),
0 0 150px rgb(254 180 0 / .10);
}
.node-label {
@@ -817,19 +850,29 @@ color: var(--muted);
font-weight: 600;
color: var(--muted);
line-height: 1.4;
margin-top: 10px;
}
.neural-card {
width: 220px;
padding: 30px 26px;
min-height: 130px;
width: 140px;
height: 140px;
border-radius: 50%;
padding: 18px 16px;
background: rgba(255, 255, 255, 0.5);
border: 1.5px solid rgba(19, 18, 13, 0.2);
box-shadow: 0 0 20px rgba(19, 18, 13, 0.06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Marketing: top-left, clearly separated */
.node-marketing {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translate3d(-280px, -170px, -100px);
transform: translate(-50%, -50%) translate3d(-290px, -180px, -100px);
animation: float-1 6s ease-in-out infinite;
}
@@ -837,7 +880,7 @@ color: var(--muted);
.node-ai {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translate3d(280px, -40px, -80px);
transform: translate(-50%, -50%) translate3d(210px, -30px, -50px);
animation: float-2 7s ease-in-out infinite;
}
@@ -845,39 +888,42 @@ color: var(--muted);
.node-biz {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translate3d(-100px, 190px, -130px);
transform: translate(-50%, -50%) translate3d(-180px, 160px, -100px);
animation: float-3 8s ease-in-out infinite;
}
.card-tag {
font-size: 20px;
font-weight: 900;
font-size: 16px;
font-weight: 800;
color: var(--ink);
letter-spacing: .02em;
text-transform: uppercase;
line-height: 1.2;
text-align: center;
}
.card-desc {
margin-top: 10px;
font-size: 16px;
margin-top: 4px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
line-height: 1.4;
line-height: 1.3;
text-align: center;
}
@keyframes float-1 {
0%, 100% { transform: translate(-50%, -50%) translate3d(-280px, -170px, -100px); }
50% { transform: translate(-50%, -50%) translate3d(-310px, -200px, -150px); }
0%, 100% { transform: translate(-50%, -50%) translate3d(-290px, -180px, -100px); }
50% { transform: translate(-50%, -50%) translate3d(-250px, -150px, -70px); }
}
@keyframes float-2 {
0%, 100% { transform: translate(-50%, -50%) translate3d(280px, -40px, -80px); }
50% { transform: translate(-50%, -50%) translate3d(310px, -70px, -120px); }
0%, 100% { transform: translate(-50%, -50%) translate3d(210px, -30px, -50px); }
50% { transform: translate(-50%, -50%) translate3d(175px, -15px, -30px); }
}
@keyframes float-3 {
0%, 100% { transform: translate(-50%, -50%) translate3d(-100px, 190px, -130px); }
50% { transform: translate(-50%, -50%) translate3d(-140px, 220px, -200px); }
0%, 100% { transform: translate(-50%, -50%) translate3d(-180px, 160px, -100px); }
50% { transform: translate(-50%, -50%) translate3d(-145px, 130px, -65px); }
}
.eyebrow {
@@ -896,7 +942,7 @@ color: var(--muted);
.hero h1 {
max-width: 15ch;
font-size: clamp(2.55rem, 4.6vw, 4.63rem);
font-size: clamp(2.55rem, 4vw, 4rem);
font-weight: 900;
}
@@ -904,6 +950,14 @@ color: var(--muted);
display: block;
}
.hero h1 .text-highlight {
display: inline;
color: var(--yellow);
font-weight: 900;
-webkit-text-stroke: 2px var(--ink);
paint-order: stroke fill;
}
.desktop-title span {
white-space: nowrap;
}
@@ -1271,7 +1325,7 @@ line-height: 1.32;
.section-heading h2,
.final-cta h2 {
max-width: 13ch;
font-size: clamp(2.4rem, 5vw, 5rem);
font-size: clamp(2.4rem, 4vw, 4rem);
}
.problem-strip p,
@@ -1307,6 +1361,8 @@ position: absolute;
left: 0;
color: var(--yellow);
font-weight: 700;
-webkit-text-stroke: 1px var(--ink);
paint-order: stroke fill;
}
.case-section,
@@ -1414,6 +1470,8 @@ box-shadow: 0 24px 70px rgb(0 0 0 / .34), inset 1px 1px 0 rgb(255 255 255 / .18)
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
-webkit-text-stroke: 0.5px var(--ink);
paint-order: stroke fill;
}
.story-step h3 {
@@ -1629,7 +1687,7 @@ height: 34px;
z-index: 2;
display: grid;
place-items: center;
border: 1px solid rgb(19 18 13 / .14);
border: 1.5px solid rgb(19 18 13 / 0.35);
border-radius: 999px;
background: var(--yellow);
box-shadow: 0 10px 30px rgb(254 212 0 / .26);
@@ -1948,11 +2006,11 @@ grid-template-columns: 1fr;
}
.hero h1 {
font-size: clamp(3rem, 14vw, 5.2rem);
font-size: clamp(3rem, 10vw, 4rem);
}
.page-hero h1 {
font-size: clamp(3rem, 12vw, 5rem);
font-size: clamp(3rem, 10vw, 4rem);
}
.service-hero-panel {
@@ -2034,7 +2092,7 @@ max-width: calc(100% - 32px);
.hero h1 {
max-width: 100%;
font-size: clamp(2.45rem, 12vw, 3.1rem);
font-size: clamp(2.45rem, 10vw, 2.8rem);
line-height: .98;
}
@@ -2081,7 +2139,7 @@ max-width: calc(100% - 32px);
.section-heading h2,
.final-cta h2,
.page-hero h1 {
font-size: clamp(2rem, 9vw, 2.7rem);
font-size: clamp(2rem, 7vw, 2.5rem);
max-width: 11ch;
}
@@ -2175,8 +2233,9 @@ border-radius: 18px;
min-width: 180px;
}
.neural-card {
width: 100%;
max-width: 280px;
width: 100px;
height: 100px;
border-radius: 50%;
min-height: auto;
}
@keyframes float-1,
@@ -2206,7 +2265,7 @@ border-radius: 18px;
.blog-article-heading h1 {
max-width: 15ch;
margin-top: 14px;
font-size: clamp(2.7rem, 5.6vw, 5.8rem);
font-size: clamp(2.7rem, 4vw, 4rem);
font-weight: 900;
line-height: .96;
}