1572 lines
31 KiB
CSS
1572 lines
31 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;
|
|
--color-brand-primary: #1478fb;
|
|
--color-brand-bright: #0875f9;
|
|
--color-brand-blue: #287cf9;
|
|
--color-brand-cyan: #00adf6;
|
|
--color-brand-violet: #453cff;
|
|
--gradient-action: linear-gradient(100deg, #453cff, #00adf6);
|
|
--color-text-strong: #404040;
|
|
--color-text-default: #525966;
|
|
--color-text-body: #777;
|
|
--color-text-muted: #a5a5a5;
|
|
--color-surface-blue: #edf8ff;
|
|
--color-surface-case: #eef9ff;
|
|
--color-surface-soft: #f9fbff;
|
|
--color-border-soft: #d7e9ff;
|
|
--radius-control: 5px;
|
|
--radius-small: 8px;
|
|
--radius-card: 12px;
|
|
--radius-panel: 16px;
|
|
--radius-feature: 20px;
|
|
--shadow-button: 0 8px 15px rgba(25, 106, 255, 0.16);
|
|
--shadow-button-hover: 0 11px 20px rgba(25, 106, 255, 0.24);
|
|
--shadow-card: 0 10px 24px rgba(112, 163, 255, 0.09);
|
|
--shadow-card-hover: 0 17px 32px rgba(73, 139, 234, 0.14);
|
|
--container-max: 1296px;
|
|
--page-gutter-desktop: 24px;
|
|
--page-gutter-mobile: 16px;
|
|
--section-space-desktop: 80px;
|
|
--section-space-mobile: 64px;
|
|
--duration-fast: 200ms;
|
|
--duration-normal: 320ms;
|
|
--ease-standard: cubic-bezier(0.2, 0.75, 0.2, 1);
|
|
}
|
|
* {
|
|
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;
|
|
}
|
|
.hero-section {
|
|
position: relative;
|
|
height: min(32.2vw, 617px);
|
|
min-height: 430px;
|
|
background: linear-gradient(90deg, #f7faff 0%, #e6eefc 100%);
|
|
isolation: isolate;
|
|
}
|
|
.hero-art {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
background-image: url('/images/lanhu/slices/hero-geo-visual@2x.png');
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
background-size: auto 100%;
|
|
}
|
|
.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;
|
|
text-decoration: none;
|
|
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 {
|
|
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 {
|
|
position: relative;
|
|
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;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.stat-item span {
|
|
color: #555;
|
|
font-size: 16px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.model-section {
|
|
position: relative;
|
|
min-height: 791px;
|
|
padding: 76px 0 80px;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #f8fbff 5%, #fff 44%, #eff4ff 100%);
|
|
}
|
|
.model-section::before {
|
|
position: absolute;
|
|
right: -8%;
|
|
bottom: -42%;
|
|
left: -8%;
|
|
height: 72%;
|
|
content: '';
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(circle at 20% 64%, rgba(245, 195, 204, 0.4), transparent 31%),
|
|
radial-gradient(circle at 78% 66%, rgba(120, 224, 255, 0.45), transparent 35%);
|
|
filter: blur(22px);
|
|
}
|
|
.model-section > .page-width {
|
|
position: relative;
|
|
}
|
|
.model-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 370px) minmax(280px, 370px) minmax(310px, 1fr);
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 48px;
|
|
}
|
|
.ring {
|
|
width: 100%;
|
|
max-width: 370px;
|
|
justify-self: center;
|
|
border: 0;
|
|
outline: 0;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
.ring-diagram {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
isolation: isolate;
|
|
}
|
|
.ring-diagram:focus,
|
|
.ring-diagram:focus-visible {
|
|
border: 0;
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
.ring-base {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: contain;
|
|
border: 0;
|
|
outline: 0;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
.ring-label {
|
|
position: absolute;
|
|
z-index: 2;
|
|
color: #4b83e8;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
white-space: nowrap;
|
|
text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95);
|
|
}
|
|
.ring-label-1 {
|
|
top: 27%;
|
|
left: 20%;
|
|
transform: rotate(-39deg);
|
|
}
|
|
.ring-label-2 {
|
|
top: 27%;
|
|
right: 18%;
|
|
transform: rotate(39deg);
|
|
}
|
|
.ring-label-3 {
|
|
right: 17%;
|
|
bottom: 25%;
|
|
transform: rotate(-39deg);
|
|
}
|
|
.ring-label-4 {
|
|
bottom: 25%;
|
|
left: 18%;
|
|
transform: rotate(39deg);
|
|
}
|
|
.ring-center-label {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 36%;
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 8px;
|
|
color: #fff;
|
|
transform: translate(-50%, -45%);
|
|
text-align: center;
|
|
text-shadow: 0 2px 7px rgba(49, 83, 205, 0.26);
|
|
}
|
|
.ring-center-label svg {
|
|
width: 42px;
|
|
height: 42px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 2.2;
|
|
filter: drop-shadow(0 4px 7px rgba(27, 79, 196, 0.22));
|
|
}
|
|
.ring-center-label strong {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
white-space: nowrap;
|
|
}
|
|
.core-value {
|
|
padding: 6px 0 0 16px;
|
|
}
|
|
.core-value h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
margin: 0 0 12px;
|
|
color: #1578fa;
|
|
font-size: 21px;
|
|
}
|
|
.core-value h3 img {
|
|
width: 46px;
|
|
height: 46px;
|
|
object-fit: contain;
|
|
}
|
|
.core-point {
|
|
padding: 13px 0 14px;
|
|
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 {
|
|
max-width: 35em;
|
|
margin: 8px 0 0;
|
|
color: #757575;
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
}
|
|
.core-value .primary-button {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.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 (min-width: 761px) {
|
|
.hero-copy {
|
|
will-change: transform;
|
|
}
|
|
.section-title h2::after {
|
|
position: absolute;
|
|
right: 42%;
|
|
bottom: -13px;
|
|
left: 42%;
|
|
height: 2px;
|
|
content: '';
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, transparent, rgba(20, 120, 251, 0.78), transparent);
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
transition:
|
|
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
|
|
opacity 0.45s ease;
|
|
}
|
|
.section-title.is-visible h2::after {
|
|
opacity: 1;
|
|
transform: scaleX(1);
|
|
}
|
|
.motion-card {
|
|
--spot-x: 50%;
|
|
--spot-y: 50%;
|
|
--spot-opacity: 0;
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
.motion-card::after {
|
|
position: absolute;
|
|
z-index: 3;
|
|
inset: 0;
|
|
content: '';
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
background: radial-gradient(
|
|
280px circle at var(--spot-x) var(--spot-y),
|
|
rgba(71, 145, 255, 0.16),
|
|
transparent 58%
|
|
);
|
|
box-shadow: inset 0 0 0 1px rgba(113, 169, 255, 0.24);
|
|
opacity: var(--spot-opacity);
|
|
}
|
|
.motion-card img {
|
|
will-change: transform;
|
|
}
|
|
.case-background,
|
|
.delivery-banner,
|
|
.testimonial-track {
|
|
will-change: transform;
|
|
}
|
|
}
|
|
|
|
@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) {
|
|
.hero-copy {
|
|
margin-left: 3%;
|
|
}
|
|
.section-title h2 {
|
|
font-size: 29px;
|
|
}
|
|
}
|
|
@media (max-width: 760px) {
|
|
html {
|
|
scroll-padding-top: 55px;
|
|
}
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
.page-width {
|
|
width: min(100% - 32px, 560px);
|
|
}
|
|
.hero-section {
|
|
height: min(720px, calc(100svh - 58px));
|
|
min-height: 570px;
|
|
}
|
|
.hero-art {
|
|
background-position: right bottom;
|
|
background-size: auto 74%;
|
|
opacity: 0.72;
|
|
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;
|
|
}
|
|
.ring-label {
|
|
font-size: clamp(7px, 2.15vw, 9px);
|
|
letter-spacing: 0;
|
|
}
|
|
.ring-center-label {
|
|
gap: 4px;
|
|
}
|
|
.ring-center-label svg {
|
|
width: clamp(24px, 7vw, 32px);
|
|
height: clamp(24px, 7vw, 32px);
|
|
}
|
|
.ring-center-label strong {
|
|
font-size: clamp(9px, 2.7vw, 12px);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
/* Inner-page readability and layout system. The homepage intentionally stays unchanged. */
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
) {
|
|
--inner-ink: #2f4056;
|
|
--inner-copy: #52657d;
|
|
--inner-muted: #667a91;
|
|
color: var(--inner-ink);
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.page-width {
|
|
width: min(1400px, calc(100% - 80px));
|
|
}
|
|
}
|
|
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
:is(.page-eyebrow, .section-kicker) {
|
|
color: #286dae;
|
|
font-size: 14px !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.08em !important;
|
|
}
|
|
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
:is(.primary-button, .outline-button) {
|
|
gap: 8px;
|
|
min-height: 46px;
|
|
font-size: 15px !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
:is(.primary-button, .outline-button, button, a)
|
|
.app-icon {
|
|
width: 1.05em;
|
|
height: 1.05em;
|
|
}
|
|
|
|
/* Keep long-form section headings visually anchored instead of centering every block. */
|
|
:is(.advantages-page, .case-detail-page) .center-heading,
|
|
.solutions-page :is(.model-heading, .process-heading, .service-system-heading),
|
|
.cases-page .cases-library-heading,
|
|
.insights-page .library-heading {
|
|
max-width: 860px !important;
|
|
margin-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
/* About */
|
|
.about-page
|
|
:is(
|
|
.story-content p,
|
|
.change-step p,
|
|
.change-question,
|
|
.method-flow p,
|
|
.timeline-list li,
|
|
.team-capabilities p
|
|
) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.75 !important;
|
|
}
|
|
.about-page
|
|
:is(
|
|
.contact-details dt,
|
|
.contact-qr small,
|
|
.team-capabilities span,
|
|
.method-marker,
|
|
.change-principles span
|
|
) {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.about-page :is(.contact-details dd, .contact-qr strong, .stats-row p, .hero-status) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
}
|
|
.about-page .method-flow .method-marker {
|
|
color: #fff !important;
|
|
}
|
|
.about-page .center-heading .method-kicker {
|
|
width: fit-content !important;
|
|
display: block !important;
|
|
margin-right: auto !important;
|
|
margin-left: auto !important;
|
|
text-align: center !important;
|
|
}
|
|
.about-page .center-heading .method-kicker::before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Advantages */
|
|
.advantages-page :is(.hero-advantage-links button, .story-action, .proof-layout header > a) {
|
|
font-size: 14px !important;
|
|
}
|
|
.advantages-page
|
|
:is(
|
|
.story-problem p,
|
|
.story-capability p,
|
|
.advantage-story-copy li,
|
|
.advantage-story-copy blockquote,
|
|
.comparison-table-wrap th,
|
|
.comparison-table-wrap td,
|
|
.value-added-copy > span,
|
|
.proof-stats p
|
|
) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.7 !important;
|
|
}
|
|
.advantages-page
|
|
:is(.story-problem strong, .story-capability strong, .story-actions-title, .story-index) {
|
|
color: #476888 !important;
|
|
font-size: 13px !important;
|
|
}
|
|
.advantages-page :is(.value-added-copy > p, .value-added-copy li, .proof-stats span) {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.advantages-page .comparison-table-wrap thead th {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
/* Services */
|
|
.services-page
|
|
:is(
|
|
.model-explanation li,
|
|
.pain-note p,
|
|
.service-details strong,
|
|
.service-details li,
|
|
.process-timeline p,
|
|
.industry-list p,
|
|
.proof-summary li
|
|
) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.72 !important;
|
|
}
|
|
.services-page
|
|
:is(
|
|
.hero-badges,
|
|
.journey-number,
|
|
.service-index,
|
|
.service-action,
|
|
.industry-list strong,
|
|
.proof-tag
|
|
) {
|
|
font-size: 14px !important;
|
|
}
|
|
.services-page
|
|
:is(
|
|
.model-explanation header span,
|
|
.visual-topline,
|
|
.step-marker span,
|
|
.industry-list > article > span,
|
|
.proof-data span
|
|
) {
|
|
color: var(--color-surface-soft) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Solutions */
|
|
.solutions-page
|
|
:is(.hero-industry-links button, .industry-sticky-nav button, .industry-plan-button) {
|
|
font-size: 14px !important;
|
|
}
|
|
.solutions-page
|
|
:is(.decision-factor-list p, .strategy-copy, .industry-strategy li, .compliance-note) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.72 !important;
|
|
}
|
|
.solutions-page
|
|
:is(
|
|
.decision-factor-list > article > span,
|
|
.strategy-label,
|
|
.actions-title,
|
|
.industry-visual-header
|
|
) {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.solutions-page .industry-tags span {
|
|
color: #3f6286 !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Case library */
|
|
.cases-page :is(.case-filters button, .featured-case-copy > a, .snapshot-copy button) {
|
|
font-size: 14px !important;
|
|
}
|
|
.cases-page
|
|
:is(.featured-summary, .snapshot-copy > p, .case-empty > p:nth-of-type(2), .method-list p) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.72 !important;
|
|
}
|
|
.cases-page :is(.featured-case-copy > p, .snapshot-heading > span, .method-list span) {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.cases-page .case-filters {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
/* Case detail */
|
|
.case-detail-page .breadcrumb {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
.case-detail-page
|
|
:is(
|
|
.objective-box > strong,
|
|
.objective-box li,
|
|
.baseline-grid p,
|
|
.question-grid p,
|
|
.question-grid strong,
|
|
.phase-list p,
|
|
.distribution-map article p,
|
|
.result-table-wrap th,
|
|
.result-table-wrap td,
|
|
.outcome-grid p
|
|
) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.72 !important;
|
|
}
|
|
.case-detail-page
|
|
:is(
|
|
.case-meta span,
|
|
.baseline-grid span,
|
|
.baseline-conclusion span,
|
|
.subsection-copy > p,
|
|
.phase-list > article > span,
|
|
.distribution-map article > span,
|
|
.summary-quote > span,
|
|
.related-grid span
|
|
) {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.case-detail-page .result-table-wrap thead th {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
/* Insight library */
|
|
.insights-page
|
|
:is(
|
|
.hero-actions > button,
|
|
.featured-footer a,
|
|
.read-link,
|
|
.insight-filters button,
|
|
.load-more,
|
|
.whitepaper-grid > button
|
|
) {
|
|
font-size: 14px !important;
|
|
}
|
|
.insights-page
|
|
:is(
|
|
.featured-copy > p,
|
|
.article-copy > p,
|
|
.insight-empty p,
|
|
.whitepaper-copy p,
|
|
.whitepaper-copy span
|
|
) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.72 !important;
|
|
}
|
|
.insights-page :is(.article-meta, .featured-footer > span) {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.insights-page .insight-filters {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
/* Article detail */
|
|
.article-page .breadcrumbs {
|
|
color: var(--inner-muted) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
.article-page
|
|
:is(
|
|
.article-heading > p,
|
|
.article-byline,
|
|
.article-aside > a,
|
|
.article-aside button,
|
|
.section-number,
|
|
.article-pagination span,
|
|
.related-section header p
|
|
) {
|
|
font-size: 13px !important;
|
|
}
|
|
.article-page
|
|
:is(.comparison-head, .comparison-row, .draft-note p, .inline-cta button, .article-aside strong) {
|
|
color: var(--inner-copy) !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.65 !important;
|
|
}
|
|
.article-page .article-content {
|
|
max-width: 760px;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
) {
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.page-width {
|
|
width: calc(100vw - 32px);
|
|
max-width: 620px;
|
|
}
|
|
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
:is(.page-eyebrow, .section-kicker) {
|
|
font-size: 13px !important;
|
|
}
|
|
}
|