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

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;
}