1332 lines
25 KiB
CSS
1332 lines
25 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
font-family: 'Source Han Sans', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
|
color: #404040;
|
|
background: #fff;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
min-width: 320px;
|
|
margin: 0;
|
|
background: #fff;
|
|
}
|
|
button,
|
|
a {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
button:focus-visible,
|
|
a:focus-visible {
|
|
outline: 3px solid rgba(20, 120, 251, 0.38);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.site-shell {
|
|
overflow: hidden;
|
|
color: #404040;
|
|
}
|
|
.page-width {
|
|
width: min(1296px, calc(100% - 48px));
|
|
margin: 0 auto;
|
|
}
|
|
.site-header {
|
|
height: 57px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
.header-inner {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.brand {
|
|
display: block;
|
|
width: 190px;
|
|
}
|
|
.brand img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.desktop-nav {
|
|
display: flex;
|
|
gap: clamp(18px, 2.25vw, 43px);
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
.desktop-nav button {
|
|
position: relative;
|
|
background: transparent;
|
|
color: #555;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
.desktop-nav button::after {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -8px;
|
|
left: 0;
|
|
height: 2px;
|
|
content: '';
|
|
background: #287cf9;
|
|
transform: scaleX(0);
|
|
transform-origin: center;
|
|
transition: transform 0.24s ease;
|
|
}
|
|
.desktop-nav button.active,
|
|
.desktop-nav button:hover {
|
|
color: #287cf9;
|
|
font-weight: 700;
|
|
}
|
|
.desktop-nav button.active::after,
|
|
.desktop-nav button:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
.nav-chevron {
|
|
color: #646464;
|
|
margin-left: 6px;
|
|
font-size: 16px;
|
|
vertical-align: 1px;
|
|
}
|
|
.mobile-menu-button,
|
|
.mobile-navigation {
|
|
display: none;
|
|
}
|
|
.login-button {
|
|
height: 31px;
|
|
min-width: 70px;
|
|
padding: 0 15px;
|
|
border-radius: 20px;
|
|
background: #087dfb;
|
|
color: white;
|
|
font-size: 12px;
|
|
box-shadow: 0 3px 8px rgba(30, 127, 255, 0.22);
|
|
transition:
|
|
transform 0.22s ease,
|
|
box-shadow 0.22s ease,
|
|
background 0.22s ease;
|
|
}
|
|
.login-button span {
|
|
font-size: 8px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.hero-section {
|
|
position: relative;
|
|
height: min(32.2vw, 617px);
|
|
min-height: 430px;
|
|
background: #f4f8ff;
|
|
isolation: isolate;
|
|
}
|
|
.hero-art {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
background: url('/images/lanhu/slices/home-container25-image2@2x.png') center/cover no-repeat;
|
|
}
|
|
.hero-content {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.hero-copy {
|
|
margin-left: 2px;
|
|
margin-top: -2px;
|
|
}
|
|
.hero-copy h1 {
|
|
margin: 0;
|
|
font-size: clamp(34px, 2.7vw, 51px);
|
|
line-height: 1.34;
|
|
letter-spacing: 0.2px;
|
|
font-weight: 700;
|
|
color: #3f4145;
|
|
}
|
|
.hero-points {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 17px;
|
|
margin: 25px 0 28px;
|
|
color: #525966;
|
|
font-size: 15px;
|
|
}
|
|
.hero-points span::first-letter {
|
|
color: #167cff;
|
|
font-weight: 700;
|
|
}
|
|
.button-row {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
.primary-button,
|
|
.outline-button {
|
|
display: inline-flex;
|
|
min-width: 135px;
|
|
height: 49px;
|
|
padding: 0 26px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
transition:
|
|
transform 0.2s,
|
|
box-shadow 0.2s;
|
|
}
|
|
.primary-button {
|
|
color: #fff;
|
|
background: linear-gradient(100deg, #453cff, #00adf6);
|
|
box-shadow: 0 8px 15px rgba(25, 106, 255, 0.16);
|
|
}
|
|
.primary-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 11px 20px rgba(25, 106, 255, 0.24);
|
|
}
|
|
.primary-button:active,
|
|
.outline-button:active,
|
|
.login-button:active {
|
|
transform: translateY(1px) scale(0.98);
|
|
}
|
|
.primary-button b {
|
|
font-size: 21px;
|
|
margin-left: 9px;
|
|
font-weight: 400;
|
|
}
|
|
.outline-button {
|
|
color: #656565;
|
|
background: rgba(255, 255, 255, 0.56);
|
|
border: 1px solid #7b818c;
|
|
}
|
|
.outline-button:hover {
|
|
color: #1578fa;
|
|
border-color: rgba(21, 120, 250, 0.48);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 8px 18px rgba(44, 120, 236, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
.primary-button.small {
|
|
height: 46px;
|
|
min-width: 162px;
|
|
padding: 0 21px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.logo-strip {
|
|
height: 65px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(224, 236, 255, 0.45),
|
|
0 8px 20px rgba(184, 213, 255, 0.06);
|
|
}
|
|
.logo-track {
|
|
height: 100%;
|
|
min-width: 2100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
gap: 44px;
|
|
padding: 0 26px;
|
|
transform: translateX(-2%);
|
|
}
|
|
.logo {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #173993;
|
|
white-space: nowrap;
|
|
}
|
|
.logo-1 {
|
|
color: #0b5a9a;
|
|
}
|
|
.logo-2 {
|
|
font-size: 13px;
|
|
color: #4a7899;
|
|
}
|
|
.logo-3 {
|
|
font-size: 25px;
|
|
}
|
|
.logo-4 {
|
|
font-size: 22px;
|
|
color: #1f2785;
|
|
}
|
|
.logo-5 {
|
|
font-size: 12px;
|
|
color: #0b7baa;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
}
|
|
.section-title h2 {
|
|
margin: 0;
|
|
color: #414141;
|
|
font-weight: 700;
|
|
font-size: 35px;
|
|
letter-spacing: 0.1px;
|
|
line-height: 1.35;
|
|
}
|
|
.section-title .blue,
|
|
.blue {
|
|
color: #1478fb;
|
|
}
|
|
.section-title p {
|
|
margin: 12px 0 0;
|
|
color: #a5a5a5;
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
letter-spacing: 0.15px;
|
|
}
|
|
.intro-section {
|
|
padding-top: 76px;
|
|
padding-bottom: 74px;
|
|
}
|
|
.stats-panel {
|
|
min-height: 371px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
padding: 45px 34px 28px;
|
|
margin-top: 31px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(
|
|
120deg,
|
|
rgba(255, 193, 180, 0.88),
|
|
rgba(240, 211, 180, 0.67) 25%,
|
|
rgba(206, 235, 255, 0.88) 58%,
|
|
rgba(203, 194, 255, 0.78)
|
|
);
|
|
}
|
|
.stat-item {
|
|
min-height: 292px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 31px 10px;
|
|
background: rgba(255, 255, 255, 0.83);
|
|
border-radius: 20px;
|
|
box-shadow: 0 9px 25px rgba(75, 136, 255, 0.05);
|
|
transition:
|
|
transform 0.32s ease,
|
|
box-shadow 0.32s ease,
|
|
background 0.32s ease;
|
|
}
|
|
.stat-item img {
|
|
width: 86px;
|
|
height: 86px;
|
|
object-fit: contain;
|
|
margin-bottom: 19px;
|
|
}
|
|
.stat-item strong {
|
|
color: #0875f9;
|
|
font-size: 34px;
|
|
line-height: 1;
|
|
}
|
|
.stat-item span {
|
|
color: #555;
|
|
font-size: 16px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.model-section {
|
|
min-height: 791px;
|
|
padding: 76px 0 80px;
|
|
background: linear-gradient(135deg, #f8fbff 5%, #fff 44%, #eff4ff 100%);
|
|
}
|
|
.model-layout {
|
|
display: grid;
|
|
grid-template-columns: 0.95fr 0.95fr 1.2fr;
|
|
align-items: center;
|
|
gap: 25px;
|
|
margin-top: 52px;
|
|
}
|
|
.ring {
|
|
width: 100%;
|
|
max-width: 370px;
|
|
justify-self: center;
|
|
}
|
|
.core-value {
|
|
padding: 12px 0 0 10px;
|
|
}
|
|
.core-value h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
margin: 0 0 17px;
|
|
color: #1578fa;
|
|
font-size: 21px;
|
|
}
|
|
.core-value h3 img {
|
|
width: 50px;
|
|
height: 50px;
|
|
object-fit: contain;
|
|
}
|
|
.core-point {
|
|
padding: 15px 0 17px;
|
|
border-bottom: 1px dashed #d3d3d3;
|
|
}
|
|
.core-point h4 {
|
|
margin: 0;
|
|
color: #454545;
|
|
font-size: 18px;
|
|
}
|
|
.core-point h4 i {
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 13px;
|
|
margin-right: 10px;
|
|
border-radius: 50%;
|
|
vertical-align: -1px;
|
|
background: linear-gradient(135deg, #a0e1ff, #3c67ff);
|
|
}
|
|
.core-point p {
|
|
margin: 10px 0 0;
|
|
color: #757575;
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
}
|
|
.core-value .primary-button {
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.advantages-section {
|
|
padding: 83px 0 92px;
|
|
background: #edf8ff;
|
|
}
|
|
.lead-advantage {
|
|
display: grid;
|
|
grid-template-columns: 47% 1fr;
|
|
align-items: center;
|
|
gap: 24px;
|
|
height: 182px;
|
|
overflow: hidden;
|
|
margin-top: 56px;
|
|
border-radius: 13px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
transition:
|
|
transform 0.32s ease,
|
|
box-shadow 0.32s ease;
|
|
}
|
|
.lead-advantage > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.2, 1);
|
|
}
|
|
.lead-advantage > div {
|
|
padding: 16px 30px;
|
|
}
|
|
.lead-advantage h3,
|
|
.advantage-grid h3 {
|
|
margin: 0 0 13px;
|
|
color: #1e7dff;
|
|
font-size: 22px;
|
|
}
|
|
.lead-advantage p,
|
|
.advantage-grid p {
|
|
margin: 6px 0;
|
|
color: #777;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
.lead-advantage b,
|
|
.advantage-grid b {
|
|
color: #555;
|
|
}
|
|
.advantage-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
margin-top: 24px;
|
|
}
|
|
.advantage-grid article {
|
|
min-height: 163px;
|
|
padding: 22px 20px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border-radius: 13px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
transition:
|
|
transform 0.3s ease,
|
|
box-shadow 0.3s ease,
|
|
background 0.3s ease;
|
|
}
|
|
.advantage-grid img {
|
|
position: absolute;
|
|
right: -18px;
|
|
bottom: -22px;
|
|
width: 120px;
|
|
opacity: 0.45;
|
|
transition:
|
|
transform 0.4s ease,
|
|
opacity 0.4s ease;
|
|
}
|
|
.advantage-grid > article > div {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.advantage-grid h3 {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.cases-section {
|
|
position: relative;
|
|
min-height: 752px;
|
|
padding: 73px 0;
|
|
background: #eef9ff;
|
|
overflow: hidden;
|
|
}
|
|
.case-background {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url('/images/lanhu/slices/home-group75-image7@2x.png') right center/cover no-repeat;
|
|
opacity: 0.18;
|
|
}
|
|
.case-content {
|
|
position: relative;
|
|
}
|
|
.case-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 38px;
|
|
padding: 28px 28px 25px;
|
|
margin-top: 51px;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
border: 1px solid #d7e9ff;
|
|
border-radius: 14px;
|
|
box-shadow: 0 10px 24px rgba(112, 163, 255, 0.09);
|
|
}
|
|
.case-panel article {
|
|
min-width: 0;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.case-panel img {
|
|
width: 100%;
|
|
height: 186px;
|
|
border-radius: 9px;
|
|
object-fit: cover;
|
|
transition:
|
|
transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
|
|
box-shadow 0.3s ease;
|
|
}
|
|
.case-panel p {
|
|
margin: 17px 0 0;
|
|
color: #666;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
.center-action {
|
|
text-align: center;
|
|
margin-top: 46px;
|
|
}
|
|
|
|
.industries-section {
|
|
padding: 80px 0 111px;
|
|
}
|
|
.industry-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
margin-top: 76px;
|
|
}
|
|
.industry-grid article {
|
|
position: relative;
|
|
min-height: 311px;
|
|
overflow: hidden;
|
|
padding: 26px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(130deg, #fff 26%, #f2f5ff 62%, #bddbff);
|
|
transition:
|
|
transform 0.32s ease,
|
|
box-shadow 0.32s ease;
|
|
}
|
|
.industry-grid h3 {
|
|
margin: 0;
|
|
color: #414141;
|
|
font-size: 26px;
|
|
}
|
|
.industry-grid img {
|
|
width: 45%;
|
|
height: 150px;
|
|
object-fit: contain;
|
|
float: left;
|
|
margin: 25px 15px 0 -8px;
|
|
}
|
|
.quote {
|
|
margin-top: 33px;
|
|
color: #787878;
|
|
font-weight: 700;
|
|
font-size: 43px;
|
|
line-height: 0.55;
|
|
}
|
|
.industry-grid p {
|
|
margin: 19px 0 14px;
|
|
color: #777;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
.tags {
|
|
display: flex;
|
|
gap: 9px;
|
|
}
|
|
.tags span {
|
|
padding: 6px 13px;
|
|
color: #408cff;
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.delivery-section {
|
|
padding: 85px 0 109px;
|
|
background: #edf8ff;
|
|
}
|
|
.delivery-banner {
|
|
height: 187px;
|
|
margin-top: 44px;
|
|
border-radius: 12px;
|
|
background: url('/images/lanhu/slices/home-group95-image21@2x.png') center/cover no-repeat;
|
|
}
|
|
.delivery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 26px 38px;
|
|
margin-top: 28px;
|
|
}
|
|
.delivery-grid article {
|
|
min-height: 119px;
|
|
display: flex;
|
|
gap: 16px;
|
|
padding: 20px 27px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.82);
|
|
box-shadow: 0 6px 17px rgba(92, 153, 255, 0.1);
|
|
transition:
|
|
transform 0.3s ease,
|
|
box-shadow 0.3s ease;
|
|
}
|
|
.delivery-grid img {
|
|
width: 55px;
|
|
height: 55px;
|
|
object-fit: contain;
|
|
}
|
|
.delivery-grid h3 {
|
|
margin: 0;
|
|
color: #2d83fb;
|
|
font-size: 20px;
|
|
}
|
|
.delivery-grid p {
|
|
margin: 8px 0 0;
|
|
color: #777;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.testimonial-section {
|
|
padding: 88px 0 78px;
|
|
background: #fff;
|
|
}
|
|
.testimonial-track {
|
|
display: flex;
|
|
gap: 24px;
|
|
width: max-content;
|
|
margin-top: 62px;
|
|
transform: translateX(-520px);
|
|
}
|
|
.testimonial-track article {
|
|
width: 460px;
|
|
min-height: 216px;
|
|
padding: 25px 27px;
|
|
border-radius: 10px;
|
|
background: #f9fbff;
|
|
color: #767676;
|
|
transition:
|
|
transform 0.3s ease,
|
|
box-shadow 0.3s ease,
|
|
background 0.3s ease;
|
|
}
|
|
.testimonial-track header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.avatar {
|
|
display: block;
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #516b71, #f3bc94);
|
|
}
|
|
.testimonial-track time {
|
|
margin-left: auto;
|
|
color: #aaa;
|
|
}
|
|
.testimonial-track p {
|
|
margin: 18px 0 0;
|
|
font-size: 15px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.cta-section {
|
|
position: relative;
|
|
min-height: 390px;
|
|
overflow: hidden;
|
|
color: #1d7cf8;
|
|
}
|
|
.cta-art {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url('/images/lanhu/slices/home-group105-image31@2x.png') center/cover no-repeat;
|
|
}
|
|
.cta-content {
|
|
position: relative;
|
|
max-width: 790px;
|
|
margin: auto;
|
|
padding-top: 86px;
|
|
text-align: center;
|
|
}
|
|
.cta-content h2 {
|
|
margin: 0;
|
|
font-size: 30px;
|
|
line-height: 1.45;
|
|
}
|
|
.cta-content p {
|
|
margin: 16px 0 23px;
|
|
color: #4d4d4d;
|
|
font-size: 17px;
|
|
}
|
|
.site-footer {
|
|
color: #d6dde4;
|
|
background: #101d23;
|
|
}
|
|
.footer-main {
|
|
min-height: 222px;
|
|
display: grid;
|
|
grid-template-columns: 340px 1fr 210px;
|
|
align-items: center;
|
|
gap: 42px;
|
|
}
|
|
.footer-main > img {
|
|
width: 340px;
|
|
background: white;
|
|
border-radius: 5px;
|
|
}
|
|
.footer-links {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 23px 45px;
|
|
}
|
|
.footer-links div {
|
|
min-width: 100px;
|
|
}
|
|
.footer-links b {
|
|
display: block;
|
|
color: #bbc6ce;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
.footer-links span {
|
|
display: block;
|
|
margin-top: 28px;
|
|
font-size: 12px;
|
|
color: #89969d;
|
|
}
|
|
.qr {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 70px);
|
|
gap: 11px;
|
|
}
|
|
.qr span {
|
|
height: 70px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #111;
|
|
background: #fff;
|
|
font-size: 52px;
|
|
}
|
|
.qr small {
|
|
grid-column: 1 / -1;
|
|
font-size: 12px;
|
|
color: #9ca6ac;
|
|
white-space: nowrap;
|
|
}
|
|
.footer-bottom {
|
|
height: 59px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #879298;
|
|
background: #252e33;
|
|
font-size: 12px;
|
|
}
|
|
.dialog-mask {
|
|
position: fixed;
|
|
z-index: 40;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(10, 25, 41, 0.46);
|
|
}
|
|
.consult-dialog {
|
|
position: relative;
|
|
width: min(390px, calc(100% - 40px));
|
|
padding: 32px;
|
|
border-radius: 14px;
|
|
background: #fff;
|
|
box-shadow: 0 24px 60px rgba(7, 50, 100, 0.28);
|
|
text-align: center;
|
|
}
|
|
.consult-dialog h2 {
|
|
margin: 0;
|
|
font-size: 23px;
|
|
}
|
|
.consult-dialog p {
|
|
margin: 14px 0 24px;
|
|
color: #777;
|
|
line-height: 1.6;
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 12px;
|
|
color: #999;
|
|
background: transparent;
|
|
font-size: 28px;
|
|
}
|
|
.toast {
|
|
position: fixed;
|
|
z-index: 50;
|
|
bottom: 24px;
|
|
left: 50%;
|
|
margin: 0;
|
|
transform: translateX(-50%);
|
|
padding: 12px 20px;
|
|
color: white;
|
|
border-radius: 30px;
|
|
background: rgba(20, 30, 43, 0.9);
|
|
box-shadow: 0 7px 22px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.login-button:hover {
|
|
background: #056ee2;
|
|
box-shadow: 0 7px 16px rgba(30, 127, 255, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
.stat-item:hover {
|
|
background: #fff;
|
|
box-shadow: 0 18px 34px rgba(59, 125, 233, 0.15);
|
|
transform: translateY(-8px);
|
|
}
|
|
.lead-advantage:hover {
|
|
box-shadow: 0 17px 34px rgba(73, 139, 234, 0.14);
|
|
transform: translateY(-5px);
|
|
}
|
|
.lead-advantage:hover > img {
|
|
transform: scale(1.045);
|
|
}
|
|
.advantage-grid article:hover {
|
|
background: #fff;
|
|
box-shadow: 0 17px 32px rgba(73, 139, 234, 0.14);
|
|
transform: translateY(-6px);
|
|
}
|
|
.advantage-grid article:hover img {
|
|
opacity: 0.66;
|
|
transform: translate(-4px, -4px) scale(1.05);
|
|
}
|
|
.case-panel article:hover {
|
|
transform: translateY(-6px);
|
|
}
|
|
.case-panel article:hover img {
|
|
box-shadow: 0 14px 24px rgba(54, 127, 242, 0.2);
|
|
transform: scale(1.03);
|
|
}
|
|
.industry-grid article:hover {
|
|
box-shadow: 0 18px 32px rgba(56, 122, 225, 0.18);
|
|
transform: translateY(-7px);
|
|
}
|
|
.delivery-grid article:hover {
|
|
box-shadow: 0 15px 30px rgba(63, 135, 239, 0.16);
|
|
transform: translateY(-5px);
|
|
}
|
|
.testimonial-track article:hover {
|
|
background: #fff;
|
|
box-shadow: 0 16px 28px rgba(72, 135, 226, 0.13);
|
|
transform: translateY(-6px);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1050px) {
|
|
.desktop-nav {
|
|
gap: 14px;
|
|
}
|
|
.desktop-nav button {
|
|
font-size: 12px;
|
|
}
|
|
.hero-copy {
|
|
margin-left: 3%;
|
|
}
|
|
.section-title h2 {
|
|
font-size: 29px;
|
|
}
|
|
.footer-main {
|
|
grid-template-columns: 250px 1fr;
|
|
padding: 30px 0;
|
|
}
|
|
.footer-main > img {
|
|
width: 250px;
|
|
}
|
|
.qr {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 760px) {
|
|
html {
|
|
scroll-padding-top: 55px;
|
|
}
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
.page-width {
|
|
width: min(100% - 32px, 560px);
|
|
}
|
|
.site-header {
|
|
height: 55px;
|
|
box-shadow: 0 1px 0 rgba(31, 92, 165, 0.08);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
.brand {
|
|
width: 148px;
|
|
}
|
|
.desktop-nav {
|
|
display: none;
|
|
}
|
|
.login-button {
|
|
display: none;
|
|
}
|
|
.mobile-menu-button {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: grid;
|
|
place-content: center;
|
|
gap: 5px;
|
|
margin-left: auto;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
color: #267cf5;
|
|
background: rgba(235, 245, 255, 0.88);
|
|
}
|
|
.mobile-menu-button .menu-glyph {
|
|
display: block;
|
|
font-size: 23px;
|
|
line-height: 1;
|
|
transform: translateY(-1px);
|
|
}
|
|
.mobile-menu-button.open .menu-glyph {
|
|
font-size: 28px;
|
|
}
|
|
.mobile-navigation {
|
|
position: fixed;
|
|
z-index: 19;
|
|
top: 55px;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: block;
|
|
overflow-y: auto;
|
|
background: rgba(247, 251, 255, 0.97);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.mobile-navigation-inner {
|
|
display: grid;
|
|
gap: 0;
|
|
padding-top: 20px;
|
|
padding-bottom: max(30px, env(safe-area-inset-bottom));
|
|
}
|
|
.mobile-navigation-inner > button {
|
|
min-height: 58px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 4px;
|
|
color: #46505e;
|
|
border-bottom: 1px solid rgba(33, 106, 198, 0.1);
|
|
background: transparent;
|
|
font-size: 16px;
|
|
text-align: left;
|
|
}
|
|
.mobile-navigation-inner > button.active {
|
|
color: #1478fb;
|
|
font-weight: 700;
|
|
}
|
|
.mobile-navigation-inner > button b {
|
|
color: #78aaf0;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
}
|
|
.mobile-navigation-inner .mobile-consult-button {
|
|
min-height: 50px;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-top: 24px;
|
|
padding: 0 20px;
|
|
color: #fff;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: linear-gradient(100deg, #453cff, #00adf6);
|
|
box-shadow: 0 12px 24px rgba(25, 106, 255, 0.2);
|
|
}
|
|
.mobile-navigation-inner .mobile-consult-button b {
|
|
color: inherit;
|
|
}
|
|
.mobile-nav-enter-active,
|
|
.mobile-nav-leave-active {
|
|
transition:
|
|
opacity 0.25s ease,
|
|
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.mobile-nav-enter-from,
|
|
.mobile-nav-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-12px);
|
|
}
|
|
.hero-section {
|
|
height: min(720px, calc(100svh - 55px));
|
|
min-height: 570px;
|
|
}
|
|
.hero-section::after {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
content: '';
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(246, 250, 255, 0.98) 0%,
|
|
rgba(246, 250, 255, 0.9) 46%,
|
|
rgba(246, 250, 255, 0.15) 100%
|
|
);
|
|
}
|
|
.hero-art {
|
|
background-position: 66% center;
|
|
opacity: 0.86;
|
|
will-change: transform;
|
|
}
|
|
.hero-content {
|
|
align-items: flex-start;
|
|
padding-top: clamp(72px, 13vh, 112px);
|
|
}
|
|
.hero-copy {
|
|
margin: 0;
|
|
max-width: 340px;
|
|
}
|
|
.hero-copy h1 {
|
|
font-size: clamp(28px, 8.2vw, 36px);
|
|
line-height: 1.28;
|
|
letter-spacing: -0.5px;
|
|
text-wrap: balance;
|
|
}
|
|
.hero-points {
|
|
display: grid;
|
|
margin: 22px 0 27px;
|
|
gap: 10px;
|
|
font-size: 13px;
|
|
max-width: 300px;
|
|
}
|
|
.button-row {
|
|
width: min(100%, 310px);
|
|
gap: 10px;
|
|
}
|
|
.primary-button,
|
|
.outline-button {
|
|
min-width: 0;
|
|
height: 46px;
|
|
flex: 1;
|
|
padding: 0 12px;
|
|
font-size: 13px;
|
|
}
|
|
.logo-strip {
|
|
height: 56px;
|
|
}
|
|
.logo-track {
|
|
width: max-content;
|
|
min-width: 0;
|
|
justify-content: flex-start;
|
|
gap: 42px;
|
|
padding: 0 21px;
|
|
transform: none;
|
|
will-change: transform;
|
|
}
|
|
.intro-section,
|
|
.industries-section {
|
|
padding-top: 62px;
|
|
padding-bottom: 66px;
|
|
}
|
|
.section-title h2 {
|
|
font-size: clamp(24px, 7vw, 29px);
|
|
line-height: 1.32;
|
|
letter-spacing: -0.3px;
|
|
text-wrap: balance;
|
|
}
|
|
.section-title p {
|
|
max-width: 34em;
|
|
margin: 11px auto 0;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
.section-title p br {
|
|
display: none;
|
|
}
|
|
.stats-panel {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
min-height: 0;
|
|
padding: 13px;
|
|
gap: 12px;
|
|
margin-top: 28px;
|
|
border-radius: 14px;
|
|
}
|
|
.stat-item {
|
|
min-height: 174px;
|
|
padding: 19px 7px;
|
|
border-radius: 14px;
|
|
}
|
|
.stat-item img {
|
|
width: 58px;
|
|
height: 58px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.stat-item strong {
|
|
font-size: 28px;
|
|
}
|
|
.stat-item span {
|
|
font-size: 13px;
|
|
margin-top: 9px;
|
|
text-align: center;
|
|
}
|
|
.model-section,
|
|
.advantages-section,
|
|
.cases-section,
|
|
.delivery-section,
|
|
.testimonial-section {
|
|
padding: 64px 0 70px;
|
|
}
|
|
.model-layout {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4px;
|
|
margin-top: 40px;
|
|
}
|
|
.ring {
|
|
max-width: 220px;
|
|
will-change: transform;
|
|
}
|
|
.core-value {
|
|
grid-column: 1 / -1;
|
|
padding: 26px 0 0;
|
|
}
|
|
.core-value h3 {
|
|
font-size: 19px;
|
|
}
|
|
.core-point p {
|
|
font-size: 14px;
|
|
}
|
|
.lead-advantage {
|
|
grid-template-columns: 1fr;
|
|
height: auto;
|
|
margin-top: 38px;
|
|
}
|
|
.lead-advantage > img {
|
|
height: 150px;
|
|
}
|
|
.lead-advantage > div {
|
|
padding: 19px;
|
|
}
|
|
.advantage-grid,
|
|
.industry-grid,
|
|
.delivery-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
.advantage-grid article {
|
|
min-height: 145px;
|
|
}
|
|
.case-panel {
|
|
width: calc(100vw - 16px);
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-right: -16px;
|
|
padding: 14px 16px 20px 0;
|
|
margin-top: 35px;
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
scrollbar-width: none;
|
|
border-right: 0;
|
|
border-radius: 14px 0 0 14px;
|
|
}
|
|
.case-panel::-webkit-scrollbar,
|
|
.testimonial-track::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.case-panel article {
|
|
min-width: min(78vw, 310px);
|
|
scroll-snap-align: start;
|
|
}
|
|
.case-panel img {
|
|
height: 172px;
|
|
}
|
|
.case-panel p {
|
|
margin: 13px 5px 0;
|
|
font-size: 13px;
|
|
}
|
|
.center-action {
|
|
margin-top: 30px;
|
|
}
|
|
.industry-grid {
|
|
margin-top: 40px;
|
|
}
|
|
.industry-grid article {
|
|
min-height: 280px;
|
|
padding: 23px;
|
|
}
|
|
.industry-grid h3 {
|
|
font-size: 23px;
|
|
}
|
|
.industry-grid img {
|
|
height: 130px;
|
|
}
|
|
.delivery-banner {
|
|
height: 118px;
|
|
margin-top: 30px;
|
|
background-position: center;
|
|
}
|
|
.delivery-grid article {
|
|
min-height: 104px;
|
|
padding: 17px;
|
|
border-radius: 10px;
|
|
}
|
|
.delivery-grid h3 {
|
|
font-size: 18px;
|
|
}
|
|
.testimonial-track {
|
|
transform: none;
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
margin-top: 35px;
|
|
padding: 0 16px 16px;
|
|
margin-right: -16px;
|
|
margin-left: -16px;
|
|
scroll-snap-type: x mandatory;
|
|
scrollbar-width: none;
|
|
}
|
|
.testimonial-track article {
|
|
min-width: min(82vw, 330px);
|
|
width: min(82vw, 330px);
|
|
scroll-snap-align: center;
|
|
}
|
|
.cta-section {
|
|
min-height: 350px;
|
|
}
|
|
.cta-art {
|
|
inset: -8% 0;
|
|
will-change: transform;
|
|
}
|
|
.cta-content {
|
|
padding: 70px 20px 40px;
|
|
}
|
|
.cta-content h2 {
|
|
font-size: 21px;
|
|
line-height: 1.5;
|
|
}
|
|
.cta-content h2 br {
|
|
display: none;
|
|
}
|
|
.footer-main {
|
|
grid-template-columns: 1fr;
|
|
gap: 26px;
|
|
padding: 38px 0 34px;
|
|
}
|
|
.footer-main > img {
|
|
width: 240px;
|
|
}
|
|
.footer-links {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px 18px;
|
|
}
|
|
.footer-links span {
|
|
margin-top: 8px;
|
|
}
|
|
.footer-bottom {
|
|
height: auto;
|
|
min-height: 59px;
|
|
padding: 14px 16px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
line-height: 1.6;
|
|
}
|
|
.consult-dialog {
|
|
width: calc(100% - 28px);
|
|
padding: 30px 22px 24px;
|
|
border-radius: 16px;
|
|
}
|
|
.consult-dialog .primary-button {
|
|
width: 100%;
|
|
}
|
|
.toast {
|
|
right: 16px;
|
|
bottom: calc(16px + env(safe-area-inset-bottom));
|
|
left: 16px;
|
|
transform: none;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 390px) {
|
|
.page-width {
|
|
width: calc(100% - 24px);
|
|
}
|
|
.hero-content {
|
|
padding-top: 62px;
|
|
}
|
|
.hero-copy h1 {
|
|
font-size: 28px;
|
|
}
|
|
.stats-panel {
|
|
gap: 9px;
|
|
padding: 10px;
|
|
}
|
|
.stat-item {
|
|
min-height: 165px;
|
|
}
|
|
.stat-item span {
|
|
font-size: 12px;
|
|
}
|
|
.case-panel {
|
|
width: calc(100vw - 12px);
|
|
margin-right: -12px;
|
|
}
|
|
.footer-main > img {
|
|
width: min(240px, 100%);
|
|
}
|
|
}
|