feat:完善其余页面
This commit is contained in:
@@ -0,0 +1,409 @@
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
) {
|
||||
--interior-ink: #263c55;
|
||||
--interior-copy: #5d7087;
|
||||
--interior-muted: #8192a6;
|
||||
--interior-line: rgba(74, 134, 204, 0.14);
|
||||
--interior-blue: #207bf2;
|
||||
--interior-surface: rgba(255, 255, 255, 0.88);
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
overflow: clip;
|
||||
color: var(--interior-copy);
|
||||
background: #f8fbff;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)::after {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
inset: 0;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
|
||||
opacity: 0.018;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
.page-width {
|
||||
width: min(1240px, calc(100% - 64px));
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(h1, h2, h3, h4, strong) {
|
||||
color: var(--interior-ink);
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(h1, h2, h3) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
main
|
||||
> section {
|
||||
scroll-margin-top: 78px;
|
||||
box-shadow: inset 0 1px 0 rgba(92, 145, 207, 0.055);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.section-kicker, .page-eyebrow) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--interior-blue);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.section-kicker, .page-eyebrow)::before {
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
flex: 0 0 auto;
|
||||
content: '';
|
||||
background: linear-gradient(90deg, #207bf2, #72cbef);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.center-heading, .model-heading, .process-heading)
|
||||
:is(.section-kicker, .page-eyebrow) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.primary-button, .industry-plan-button, .service-action, .story-action) {
|
||||
border-radius: 5px !important;
|
||||
transition:
|
||||
color 0.22s ease,
|
||||
background 0.22s ease,
|
||||
border-color 0.22s ease,
|
||||
box-shadow 0.24s ease,
|
||||
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(button, a):focus-visible {
|
||||
outline: 3px solid rgba(32, 123, 242, 0.3);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(table, .comparison-table, .result-table-wrap) {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
img {
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(
|
||||
.stats-row article,
|
||||
.method-flow article,
|
||||
.team-capabilities article,
|
||||
.intro-sequence article,
|
||||
.advantage-story-visual,
|
||||
.proof-stats article,
|
||||
.decision-factor-list article,
|
||||
.industry-visual,
|
||||
.more-industry-list button,
|
||||
.snapshot-grid article,
|
||||
.method-list article,
|
||||
.baseline-grid article,
|
||||
.question-grid article,
|
||||
.phase-list article,
|
||||
.distribution-map article,
|
||||
.outcome-grid article,
|
||||
.related-grid article,
|
||||
.article-grid article
|
||||
) {
|
||||
border: 1px solid rgba(83, 145, 215, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
background-color: var(--interior-surface) !important;
|
||||
box-shadow:
|
||||
0 16px 42px rgba(58, 112, 174, 0.075),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.comparison-table-wrap, .result-table-wrap, .comparison-table) {
|
||||
border: 1px solid rgba(83, 145, 215, 0.14) !important;
|
||||
border-radius: 8px !important;
|
||||
background: rgba(255, 255, 255, 0.9) !important;
|
||||
box-shadow: 0 20px 50px rgba(58, 112, 174, 0.08) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.featured-case, .featured-insight, .contact-details, .objective-box, .article-lead) {
|
||||
border: 1px solid rgba(83, 145, 215, 0.13) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 24px 56px rgba(48, 105, 171, 0.09) !important;
|
||||
}
|
||||
|
||||
.interior-reveal-ready .interior-reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition:
|
||||
opacity 0.72s ease,
|
||||
transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.interior-reveal-ready .interior-reveal.is-revealed {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.primary-button, .industry-plan-button):hover {
|
||||
box-shadow: 0 14px 28px rgba(29, 119, 234, 0.23) !important;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(
|
||||
.stats-row article,
|
||||
.method-flow article,
|
||||
.team-capabilities article,
|
||||
.intro-sequence article,
|
||||
.proof-stats article,
|
||||
.decision-factor-list article,
|
||||
.more-industry-list button,
|
||||
.snapshot-grid article,
|
||||
.method-list article,
|
||||
.baseline-grid article,
|
||||
.question-grid article,
|
||||
.phase-list article,
|
||||
.distribution-map article,
|
||||
.outcome-grid article,
|
||||
.related-grid article,
|
||||
.article-grid article
|
||||
):hover {
|
||||
border-color: rgba(51, 132, 229, 0.24) !important;
|
||||
box-shadow:
|
||||
0 22px 50px rgba(48, 111, 184, 0.13),
|
||||
inset 0 1px 0 #fff !important;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
.page-width {
|
||||
width: min(100% - 32px, 580px);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
main
|
||||
> section {
|
||||
scroll-margin-top: 64px;
|
||||
}
|
||||
|
||||
.interior-reveal-ready .interior-reveal {
|
||||
transform: translateY(16px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.interior-reveal-ready .interior-reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
+385
-370
@@ -41,91 +41,6 @@ a:focus-visible {
|
||||
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);
|
||||
@@ -185,6 +100,7 @@ a:focus-visible {
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
@@ -199,8 +115,7 @@ a:focus-visible {
|
||||
box-shadow: 0 11px 20px rgba(25, 106, 255, 0.24);
|
||||
}
|
||||
.primary-button:active,
|
||||
.outline-button:active,
|
||||
.login-button:active {
|
||||
.outline-button:active {
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
.primary-button b {
|
||||
@@ -819,123 +734,8 @@ a:focus-visible {
|
||||
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);
|
||||
@@ -980,17 +780,6 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.site-header {
|
||||
transition:
|
||||
background 0.3s ease,
|
||||
box-shadow 0.3s ease,
|
||||
backdrop-filter 0.3s ease;
|
||||
}
|
||||
.site-header.scrolled {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10px 30px rgba(68, 122, 196, 0.1);
|
||||
backdrop-filter: blur(18px) saturate(1.16);
|
||||
}
|
||||
.hero-copy {
|
||||
will-change: transform;
|
||||
}
|
||||
@@ -1057,28 +846,12 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
@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 {
|
||||
@@ -1090,108 +863,8 @@ a:focus-visible {
|
||||
.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));
|
||||
height: min(720px, calc(100svh - 58px));
|
||||
min-height: 570px;
|
||||
}
|
||||
.hero-art {
|
||||
@@ -1442,44 +1115,6 @@ a:focus-visible {
|
||||
.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) {
|
||||
@@ -1506,7 +1141,387 @@ a:focus-visible {
|
||||
width: calc(100vw - 12px);
|
||||
margin-right: -12px;
|
||||
}
|
||||
.footer-main > img {
|
||||
width: min(240px, 100%);
|
||||
}
|
||||
|
||||
/* 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 !important;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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(--inner-muted) !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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user