feat: hero profit cluster, dark text fix, footer, privacy/terms pages
- Replace hero right panel with liquid-glass profit cluster (กำไร + Marketing/AI/Business Knowledge) - Fix dark-on-dark text visibility in all inverted sections (scene-dark, page-section) - Add Footer component with liquid-glass design, contact info, legal links - Add privacy and terms placeholder pages - Update PageShell to include Footer on all pages
This commit is contained in:
Kunthawat Greethong
@@ -448,6 +448,28 @@ background: rgb(255 255 255 / .10);
|
||||
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 {
|
||||
color: white;
|
||||
}
|
||||
.page-section a:hover,
|
||||
.page-section-tight a:hover,
|
||||
.page-section button:hover,
|
||||
.page-section-tight button:hover,
|
||||
.page-section .text-link:hover,
|
||||
.page-section-tight .text-link:hover {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.page-section li,
|
||||
.page-section-tight li {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.service-detail-grid,
|
||||
.about-grid,
|
||||
.contact-layout,
|
||||
@@ -508,6 +530,37 @@ margin-top: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Override muted colors inside inverted sections */
|
||||
.page-section .detail-card p,
|
||||
.page-section .about-grid p,
|
||||
.page-section .contact-info p,
|
||||
.page-section .faq-item p,
|
||||
.page-section .blog-card p,
|
||||
.page-section-tight .detail-card p,
|
||||
.page-section-tight .about-grid p,
|
||||
.page-section-tight .faq-item p,
|
||||
.page-section-tight .blog-card p,
|
||||
.page-section .related-service-card p,
|
||||
.page-section-tight .related-service-card p {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.page-section .detail-card span,
|
||||
.page-section .faq-item span,
|
||||
.page-section .blog-card span,
|
||||
.page-section .related-service-card span,
|
||||
.page-section-tight .detail-card span,
|
||||
.page-section-tight .faq-item span,
|
||||
.page-section-tight .blog-card span,
|
||||
.page-section-tight .related-service-card span {
|
||||
color: rgb(255 255 255 / .60);
|
||||
}
|
||||
|
||||
.page-section .detail-objective,
|
||||
.page-section-tight .detail-objective {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -554,6 +607,12 @@ font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Override for dark sections */
|
||||
.page-section .contact-problem-list span,
|
||||
.page-section-tight .contact-problem-list span {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
padding: clamp(12px, 3vw, 28px);
|
||||
}
|
||||
@@ -565,12 +624,13 @@ margin: 24px 0;
|
||||
}
|
||||
|
||||
.contact-info dt {
|
||||
color: var(--muted);
|
||||
color: rgb(255 255 255 / .60);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.contact-info dd {
|
||||
color: white;
|
||||
margin: 4px 0 0;
|
||||
font-size: clamp(1.3rem, 2.4vw, 2rem);
|
||||
font-weight: 900;
|
||||
@@ -596,6 +656,12 @@ font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Override for dark sections */
|
||||
.page-section .service-story-grid h3,
|
||||
.page-section-tight .service-story-grid h3 {
|
||||
color: rgb(255 255 255 / .60);
|
||||
}
|
||||
|
||||
.service-hero-panel p {
|
||||
margin: 12px 0 24px;
|
||||
color: var(--muted);
|
||||
@@ -648,7 +714,7 @@ grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.related-service-card {
|
||||
color: var(--ink);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.related-service-card h3 {
|
||||
@@ -682,7 +748,7 @@ color: var(--muted);
|
||||
|
||||
.hero h1 {
|
||||
max-width: 15ch;
|
||||
font-size: clamp(3rem, 5.4vw, 5.45rem);
|
||||
font-size: clamp(2.55rem, 4.6vw, 4.63rem);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -698,6 +764,30 @@ color: var(--muted);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-result-metrics {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.hero-metric {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-metric strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.hero-metric span {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 62ch;
|
||||
margin-top: 24px;
|
||||
@@ -741,6 +831,12 @@ transition: all .4s cubic-bezier(.175, .885, .32, 2.2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Restore process-grid arrows (override liquid-glass ::after) */
|
||||
.process-grid.liquid-glass article::after,
|
||||
.process-grid article.liquid-glass::after {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.liquidGlass-effect,
|
||||
.liquidGlass-tint,
|
||||
.liquidGlass-shine {
|
||||
@@ -829,6 +925,124 @@ inset -1px -1px 1px 1px var(--nav-shine-b);
|
||||
font-size: clamp(1.7rem, 3vw, 2.8rem);
|
||||
}
|
||||
|
||||
/* ── Hero Profit Cluster ── */
|
||||
.hero-profit-cluster {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
aspect-ratio: 1;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Center card spans the middle */
|
||||
.profit-center {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
border: 2px solid var(--yellow);
|
||||
box-shadow:
|
||||
0 0 0 6px rgb(254 212 0 / .12),
|
||||
0 20px 60px rgb(254 212 0 / .18),
|
||||
0 4px 16px rgb(0 0 0 / .06);
|
||||
}
|
||||
|
||||
.profit-label {
|
||||
font-size: clamp(2rem, 4vw, 2.8rem);
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profit-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Outer cards */
|
||||
.profit-card {
|
||||
border-radius: 20px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
|
||||
}
|
||||
|
||||
.profit-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 16px 40px rgb(0 0 0 / .10);
|
||||
}
|
||||
|
||||
.profit-tag {
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
letter-spacing: .02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.profit-desc {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Position outer cards in the grid */
|
||||
.profit-marketing {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profit-ai {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
justify-self: end;
|
||||
width: 150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profit-biz {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
justify-self: start;
|
||||
width: 150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Connector SVG */
|
||||
.profit-connectors {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.problem-preview,
|
||||
.decision-preview {
|
||||
display: grid;
|
||||
@@ -908,6 +1122,36 @@ line-height: 1.32;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.problem-strip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.problem-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.problem-list li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.problem-list li::before {
|
||||
content: "→";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.case-section,
|
||||
.portfolio-section {
|
||||
width: 100%;
|
||||
@@ -935,6 +1179,26 @@ position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
/* White text on inverted dark backgrounds */
|
||||
.scene-dark h2,
|
||||
.scene-dark h3 {
|
||||
color: white;
|
||||
}
|
||||
.scene-dark p {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
/* Links inside dark scenes */
|
||||
.scene-dark a,
|
||||
.scene-dark button,
|
||||
.scene-dark .text-link {
|
||||
color: white;
|
||||
}
|
||||
.scene-dark a:hover,
|
||||
.scene-dark button:hover,
|
||||
.scene-dark .text-link:hover {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.case-section .eyebrow,
|
||||
.portfolio-section .eyebrow {
|
||||
border-color: var(--dark-line);
|
||||
@@ -1167,6 +1431,11 @@ justify-content: center;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.portfolio-more .button:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 14px 34px rgb(254 212 0 / .30), inset 1px 1px 0 rgb(255 255 255 / .48);
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
@@ -1175,14 +1444,7 @@ margin-top: 28px;
|
||||
}
|
||||
|
||||
.process-grid::before {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
right: 10%;
|
||||
left: 10%;
|
||||
height: 2px;
|
||||
z-index: 0;
|
||||
content: "";
|
||||
background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), rgb(254 212 0 / .08));
|
||||
display: none;
|
||||
}
|
||||
|
||||
.process-grid article {
|
||||
@@ -1191,17 +1453,14 @@ background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), r
|
||||
min-height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgb(19 18 13 / .12);
|
||||
border-radius: 24px;
|
||||
background: rgb(255 255 255 / .32);
|
||||
box-shadow: 0 22px 60px rgb(42 36 18 / .10), inset 1px 1px 0 rgb(255 255 255 / .68);
|
||||
padding: 18px;
|
||||
overflow: visible;
|
||||
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
|
||||
}
|
||||
|
||||
.process-grid article:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 30px 76px rgb(42 36 18 / .16), inset 1px 1px 0 rgb(255 255 255 / .78);
|
||||
}
|
||||
|
||||
.process-grid article::after {
|
||||
@@ -1232,9 +1491,9 @@ display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgb(19 18 13 / .12);
|
||||
border-radius: 22px;
|
||||
background: var(--yellow);
|
||||
background: rgb(255 255 255 / .5);
|
||||
color: var(--ink);
|
||||
box-shadow: 0 16px 38px rgb(254 212 0 / .28);
|
||||
box-shadow: 0 16px 38px rgb(42 36 18 / .10);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@@ -1636,6 +1895,31 @@ max-width: calc(100% - 32px);
|
||||
max-width: 9ch;
|
||||
}
|
||||
|
||||
/* Profit cluster mobile */
|
||||
.hero-profit-cluster {
|
||||
max-width: 340px;
|
||||
gap: 10px;
|
||||
}
|
||||
.profit-center {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
.profit-label {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.profit-marketing,
|
||||
.profit-ai,
|
||||
.profit-biz {
|
||||
width: 130px;
|
||||
padding: 14px;
|
||||
}
|
||||
.profit-tag {
|
||||
font-size: 12px;
|
||||
}
|
||||
.profit-desc {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.problem-strip h2,
|
||||
.section-heading h2,
|
||||
.final-cta h2,
|
||||
|
||||
Reference in New Issue
Block a user