Improve mobile responsive layout and site content
This commit is contained in:
Kunthawat Greethong
@@ -349,6 +349,10 @@ box-shadow: inset 1px 1px 0 rgb(255 255 255 / .72);
|
||||
isolation: auto;
|
||||
}
|
||||
|
||||
.services-section.scene {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 100svh;
|
||||
padding: 150px 0 88px;
|
||||
@@ -534,6 +538,11 @@ gap: 18px;
|
||||
padding: clamp(22px, 4vw, 34px);
|
||||
border: 1px solid rgb(255 255 255 / .56);
|
||||
border-radius: 26px;
|
||||
transition: transform .2s var(--ease);
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
@@ -743,6 +752,12 @@ border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
background: rgb(255 255 255 / .24);
|
||||
padding: clamp(20px, 3vw, 28px);
|
||||
transition: background .8s var(--ease), transform .7s var(--ease);
|
||||
}
|
||||
|
||||
.related-service-card:hover {
|
||||
background: linear-gradient(135deg, #fed400, #ffffff52);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.service-story-grid ul {
|
||||
@@ -1054,6 +1069,11 @@ border: 0;
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform .2s var(--ease);
|
||||
}
|
||||
|
||||
.glass-panel:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.glass-filter {
|
||||
@@ -1730,6 +1750,11 @@ linear-gradient(150deg, rgb(255 255 255 / .06), rgb(254 212 0 / .08));
|
||||
border-radius: 24px;
|
||||
background: rgb(255 255 255 / .06);
|
||||
box-shadow: 0 24px 70px rgb(0 0 0 / .26);
|
||||
transition: transform .2s var(--ease);
|
||||
}
|
||||
|
||||
.portfolio-card:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.portfolio-card.featured {
|
||||
@@ -1884,13 +1909,23 @@ color: rgb(255 255 255 / .72);
|
||||
.panel-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
z-index: 80;
|
||||
background: rgb(255 255 255 / .74);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .24s var(--ease);
|
||||
}
|
||||
|
||||
body.nav-open .panel-backdrop,
|
||||
body.panel-open .panel-backdrop {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
body.panel-open .panel-backdrop {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.lead-panel {
|
||||
position: fixed;
|
||||
inset: 12px 12px 12px auto;
|
||||
@@ -2043,12 +2078,40 @@ a:focus-visible {
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) and (min-width: 921px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.hero-neural {
|
||||
max-width: min(100%, 520px);
|
||||
height: 440px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
body.nav-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
grid-template-columns: 1fr auto;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.site-nav.is-open {
|
||||
max-height: calc(100svh - 28px);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: inline-flex;
|
||||
min-height: 40px;
|
||||
@@ -2069,8 +2132,14 @@ transition: background-color .24s var(--ease), border-color .24s var(--ease), co
|
||||
.site-nav.is-open .nav-menu {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
justify-content: stretch;
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
padding: 10px;
|
||||
border: 1px solid rgb(255 255 255 / .62);
|
||||
border-radius: 22px;
|
||||
background: rgb(255 255 255 / .74);
|
||||
box-shadow: inset 1px 1px 0 rgb(255 255 255 / .82);
|
||||
}
|
||||
|
||||
.site-nav.is-open .nav-cta {
|
||||
@@ -2105,23 +2174,102 @@ width: 100%;
|
||||
|
||||
.nav-service.is-open .service-mega {
|
||||
display: grid;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
.page-hero-grid,
|
||||
.problem-strip,
|
||||
.section-heading,
|
||||
.case-grid,
|
||||
.service-detail-grid,
|
||||
.about-grid,
|
||||
.contact-layout,
|
||||
.faq-list,
|
||||
.blog-grid,
|
||||
.service-story-grid,
|
||||
.service-proof-grid,
|
||||
.related-service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.service-mega a {
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.service-mega strong,
|
||||
.service-mega span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.page-hero.hero-oversized {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-hero.hero-oversized h1,
|
||||
.page-hero.hero-oversized .hero-lead {
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
.page-hero-grid,
|
||||
.problem-strip,
|
||||
.section-heading,
|
||||
.case-grid,
|
||||
.service-detail-grid,
|
||||
.about-grid,
|
||||
.contact-layout,
|
||||
.faq-list,
|
||||
.blog-grid,
|
||||
.service-story-grid,
|
||||
.service-proof-grid,
|
||||
.related-service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.problem-strip,
|
||||
.problem-strip-head,
|
||||
.section-heading,
|
||||
.case-story,
|
||||
.service-card,
|
||||
.process-grid article,
|
||||
.service-hero-panel,
|
||||
.about-grid .glass-panel,
|
||||
.contact-info,
|
||||
.final-cta .glass-panel,
|
||||
.portfolio-card div {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.problem-strip,
|
||||
.hero-copy {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.hero h1 span,
|
||||
.page-hero h1 span,
|
||||
.problem-strip h2 span,
|
||||
.section-heading h2 span,
|
||||
.final-cta h2 span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.hero-lead,
|
||||
.section-heading h2,
|
||||
.section-heading p,
|
||||
.problem-strip h2,
|
||||
.problem-strip p,
|
||||
.case-story-title,
|
||||
.story-step p,
|
||||
.service-card > p,
|
||||
.process-grid p {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.detail-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-link {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 128px;
|
||||
@@ -2178,6 +2326,17 @@ grid-template-columns: auto auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.site-nav.liquidGlass-wrapper {
|
||||
transform: translateY(var(--nav-y));
|
||||
}
|
||||
|
||||
body.nav-open .site-nav {
|
||||
--nav-border: rgb(255 255 255 / .72);
|
||||
--nav-shadow: 0 28px 80px rgb(31 28 17 / .20), inset 1px 1px 0 rgb(255 255 255 / .86);
|
||||
--nav-tint: rgb(255 255 255 / .38);
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: 142px;
|
||||
}
|
||||
@@ -2265,6 +2424,18 @@ font-size: clamp(2rem, 7vw, 2.5rem);
|
||||
max-width: 11ch;
|
||||
}
|
||||
|
||||
.page-hero.hero-oversized h1 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page-hero.hero-oversized .hero-lead {
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
@@ -2273,16 +2444,85 @@ max-width: 11ch;
|
||||
.process-grid,
|
||||
.service-proof-grid .process-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 68px;
|
||||
}
|
||||
|
||||
#process {
|
||||
padding-bottom: clamp(92px, 20vw, 128px);
|
||||
}
|
||||
|
||||
.problem-sign-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.problem-strip,
|
||||
.problem-strip-head,
|
||||
.section-heading,
|
||||
.case-story,
|
||||
.service-card,
|
||||
.process-grid article,
|
||||
.why-section,
|
||||
.blog-card,
|
||||
.blog-card .eyebrow,
|
||||
.final-cta .glass-panel,
|
||||
.portfolio-card div {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.why-section .eyebrow,
|
||||
.why-section h2,
|
||||
.why-section p,
|
||||
.blog-card .eyebrow {
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.final-cta .glass-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.final-cta h2,
|
||||
.final-cta .eyebrow {
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.detail-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service-card ul {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.process-grid article {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.process-grid article::after {
|
||||
top: auto;
|
||||
right: 50%;
|
||||
bottom: -34px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
transform: translate(50%, 50%);
|
||||
content: "↓";
|
||||
}
|
||||
|
||||
.process-grid article:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.process-grid .step-number {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
@@ -2294,14 +2534,49 @@ border-radius: 18px;
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.case-proof,
|
||||
.case-proof {
|
||||
min-height: auto;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.case-proof img {
|
||||
min-height: 360px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
aspect-ratio: 16 / 10.5;
|
||||
object-fit: contain;
|
||||
background: rgb(13 21 17 / .42);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
position: static;
|
||||
margin-top: 10px;
|
||||
position: absolute;
|
||||
min-width: 96px;
|
||||
margin-top: 0;
|
||||
padding: 9px 10px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
font-size: clamp(1.15rem, 6vw, 1.55rem);
|
||||
}
|
||||
|
||||
.metric-card span {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.metric-card:nth-of-type(1) {
|
||||
left: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.metric-card:nth-of-type(2) {
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.metric-card:nth-of-type(3) {
|
||||
right: 18px;
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.lead-panel {
|
||||
|
||||
Reference in New Issue
Block a user