1097 lines
25 KiB
CSS
1097 lines
25 KiB
CSS
/* Shared visual system for all interior pages. Homepage styles remain untouched. */
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
) {
|
|
--interior-ink: var(--color-text-strong);
|
|
--interior-copy: var(--color-text-default);
|
|
--interior-body: var(--color-text-body);
|
|
--interior-muted: #75869a;
|
|
--interior-blue: var(--color-brand-primary);
|
|
--interior-blue-bright: var(--color-brand-bright);
|
|
--interior-line: rgba(73, 139, 234, 0.14);
|
|
--interior-surface: rgba(255, 255, 255, 0.88);
|
|
position: relative;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 100dvh;
|
|
overflow: clip;
|
|
color: var(--interior-copy);
|
|
background: #fff;
|
|
isolation: isolate;
|
|
}
|
|
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
*,
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
*::before,
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.page-width {
|
|
width: min(var(--container-max), calc(100% - 48px));
|
|
min-width: 0;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
body
|
|
: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;
|
|
}
|
|
|
|
body
|
|
: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;
|
|
}
|
|
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
p {
|
|
max-width: 65ch;
|
|
color: var(--interior-body);
|
|
line-height: 1.72;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* Page heroes share brand foundations while retaining their own visual signatures. */
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(.about-hero, .advantages-hero, .services-hero, .solutions-hero, .cases-hero, .insights-hero) {
|
|
min-height: 620px;
|
|
background: linear-gradient(90deg, #f7faff 0%, #e6eefc 100%);
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero-grid,
|
|
.advantages-hero-grid,
|
|
.services-hero-grid,
|
|
.solutions-hero-grid,
|
|
.cases-hero-grid,
|
|
.insights-hero-grid
|
|
) {
|
|
min-height: 620px;
|
|
grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
|
|
gap: clamp(40px, 5vw, 72px);
|
|
padding-top: 48px;
|
|
padding-bottom: 56px;
|
|
}
|
|
|
|
body
|
|
:is(.advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.advantages-hero-copy,
|
|
.services-hero-copy,
|
|
.solutions-hero-copy,
|
|
.cases-hero-copy,
|
|
.insights-hero-copy
|
|
)
|
|
h1 {
|
|
max-width: 11.5em;
|
|
margin-top: 15px;
|
|
font-size: clamp(40px, 3.35vw, 51px);
|
|
font-weight: 700;
|
|
line-height: 1.28;
|
|
}
|
|
|
|
body .about-page .about-hero-copy h1 {
|
|
max-width: 8em;
|
|
font-size: clamp(44px, 3.7vw, 56px);
|
|
line-height: 1.08;
|
|
}
|
|
|
|
body .about-page .about-hero-copy h2 {
|
|
max-width: 18em;
|
|
margin-top: 22px;
|
|
font-size: clamp(25px, 2.1vw, 31px);
|
|
font-weight: 500;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero-copy,
|
|
.advantages-hero-copy,
|
|
.services-hero-copy,
|
|
.solutions-hero-copy,
|
|
.cases-hero-copy,
|
|
.insights-hero-copy
|
|
)
|
|
> p:nth-of-type(2) {
|
|
max-width: 38em;
|
|
margin-top: 22px;
|
|
color: var(--interior-copy);
|
|
font-size: 15px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(.page-eyebrow, .section-kicker) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 0;
|
|
color: var(--interior-blue);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
:is(.page-eyebrow, .section-kicker)::before {
|
|
width: 22px;
|
|
height: 2px;
|
|
flex: 0 0 auto;
|
|
content: '';
|
|
background: linear-gradient(90deg, var(--interior-blue), #61c4ee);
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero-visual,
|
|
.advantage-engine,
|
|
.services-hero-visual,
|
|
.solutions-hero-visual,
|
|
.case-collage,
|
|
.editorial-index
|
|
) {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page)
|
|
:is(.about-node, .engine-node, .industry-node, .hero-data) {
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
body .cases-page .collage-card {
|
|
border-radius: var(--radius-card);
|
|
box-shadow: 0 18px 42px rgba(55, 113, 184, 0.14);
|
|
}
|
|
|
|
body .insights-page .editorial-index {
|
|
border-radius: var(--radius-panel);
|
|
background: rgba(255, 255, 255, 0.7);
|
|
box-shadow:
|
|
0 24px 56px rgba(48, 105, 171, 0.1),
|
|
inset 0 1px 0 #fff;
|
|
}
|
|
|
|
/* Shared section rhythm. */
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
main
|
|
> section {
|
|
scroll-margin-top: 76px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.company-story-section,
|
|
.search-change-section,
|
|
.company-stats-section,
|
|
.method-section,
|
|
.timeline-section,
|
|
.team-section,
|
|
.contact-section,
|
|
.advantage-intro-section,
|
|
.advantage-system,
|
|
.comparison-section,
|
|
.value-added-section,
|
|
.proof-section,
|
|
.decision-section,
|
|
.model-deep-section,
|
|
.service-system-section,
|
|
.process-section,
|
|
.service-industries,
|
|
.difference-section,
|
|
.industry-solutions,
|
|
.more-industries-section,
|
|
.case-library-section,
|
|
.case-method-section,
|
|
.insight-library,
|
|
.whitepaper-section
|
|
) {
|
|
padding-top: 84px;
|
|
padding-bottom: 96px;
|
|
}
|
|
|
|
body .about-page :is(.search-change-section, .method-section, .team-section),
|
|
body .advantages-page :is(.advantage-intro-section, .comparison-section, .proof-section),
|
|
body .services-page :is(.model-deep-section, .process-section, .proof-section),
|
|
body .solutions-page :is(.difference-section, .more-industries-section),
|
|
body .cases-page .case-method-section,
|
|
body .insights-page .whitepaper-section {
|
|
background: var(--color-surface-blue);
|
|
}
|
|
|
|
body .cases-page .case-library-section,
|
|
body .insights-page .insight-library,
|
|
body
|
|
.about-page
|
|
:is(.company-story-section, .company-stats-section, .timeline-section, .contact-section),
|
|
body .advantages-page :is(.advantage-system, .value-added-section),
|
|
body .services-page :is(.decision-section, .service-system-section, .service-industries),
|
|
body .solutions-page .industry-solutions {
|
|
background: #fff;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.story-heading,
|
|
.change-copy,
|
|
.company-stats-grid > header,
|
|
.center-heading,
|
|
.timeline-heading,
|
|
.team-statement,
|
|
.contact-heading,
|
|
.advantage-intro-grid > header,
|
|
.advantage-story-copy,
|
|
.value-added-heading,
|
|
.proof-layout > header,
|
|
.section-intro,
|
|
.model-heading,
|
|
.service-system-heading,
|
|
.process-heading,
|
|
.industry-list > header,
|
|
.difference-heading,
|
|
.industry-intro,
|
|
.case-library-heading,
|
|
.case-method-grid > header,
|
|
.library-heading,
|
|
.whitepaper-copy
|
|
)
|
|
h2 {
|
|
margin-top: 14px;
|
|
color: var(--interior-ink);
|
|
font-size: clamp(29px, 2.4vw, 35px);
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.story-heading,
|
|
.change-copy,
|
|
.center-heading,
|
|
.timeline-heading,
|
|
.team-statement,
|
|
.contact-heading,
|
|
.advantage-story-copy,
|
|
.section-intro,
|
|
.industry-intro,
|
|
.case-library-heading,
|
|
.case-method-grid,
|
|
.library-heading
|
|
)
|
|
p {
|
|
font-size: 14px;
|
|
line-height: 1.72;
|
|
}
|
|
|
|
/* Controls and interaction states. */
|
|
body
|
|
: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) {
|
|
min-height: 46px;
|
|
border-radius: var(--radius-control);
|
|
color: #fff;
|
|
background: var(--gradient-action);
|
|
box-shadow: var(--shadow-button);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition:
|
|
color var(--duration-fast) ease,
|
|
background var(--duration-fast) ease,
|
|
border-color var(--duration-fast) ease,
|
|
box-shadow var(--duration-fast) ease,
|
|
transform var(--duration-fast) var(--ease-standard);
|
|
}
|
|
|
|
body
|
|
: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(20, 120, 251, 0.34);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
body
|
|
:is(.advantages-page, .solutions-page)
|
|
:is(.hero-advantage-links button, .hero-industry-links button),
|
|
body :is(.cases-page, .insights-page) :is(.case-filters button, .insight-filters button) {
|
|
border-radius: var(--radius-control);
|
|
font-size: 13px;
|
|
transition:
|
|
color var(--duration-fast) ease,
|
|
background var(--duration-fast) ease,
|
|
border-color var(--duration-fast) ease,
|
|
box-shadow var(--duration-fast) ease,
|
|
transform var(--duration-fast) ease;
|
|
}
|
|
|
|
/* Panels use component-specific radii instead of one universal card treatment. */
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.featured-case,
|
|
.featured-insight,
|
|
.contact-details,
|
|
.comparison-table-wrap,
|
|
.result-table-wrap,
|
|
.comparison-table,
|
|
.objective-box
|
|
) {
|
|
border: 1px solid var(--color-border-soft);
|
|
border-radius: var(--radius-panel);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-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,
|
|
.article-grid article
|
|
) {
|
|
border: 1px solid rgba(83, 145, 215, 0.12);
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--interior-surface);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(.stats-row article, .proof-stats article, .featured-metrics strong, .hero-proof-line strong) {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
img {
|
|
max-width: 100%;
|
|
image-rendering: auto;
|
|
}
|
|
|
|
/* Page-specific signatures. */
|
|
body .services-page .services-hero-visual::after {
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 8%;
|
|
bottom: 3%;
|
|
width: 46%;
|
|
height: 1px;
|
|
content: '';
|
|
background: linear-gradient(90deg, transparent, rgba(20, 120, 251, 0.5));
|
|
}
|
|
|
|
body .solutions-page .solutions-hero-mesh::after {
|
|
background-image: radial-gradient(circle, rgba(20, 120, 251, 0.17) 1px, transparent 1.5px);
|
|
background-size: 28px 28px;
|
|
opacity: 0.22;
|
|
}
|
|
|
|
body .advantages-page .advantages-hero-mesh::after {
|
|
background-image:
|
|
linear-gradient(rgba(54, 124, 214, 0.07) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(54, 124, 214, 0.07) 1px, transparent 1px);
|
|
background-size: 72px 72px;
|
|
transform: rotate(-4deg) scale(1.08);
|
|
}
|
|
|
|
body .cases-page .case-collage {
|
|
transform: rotate(-0.6deg);
|
|
}
|
|
|
|
body .cases-page .case-collage .collage-card {
|
|
transition:
|
|
transform var(--duration-normal) var(--ease-standard),
|
|
box-shadow var(--duration-normal) ease;
|
|
}
|
|
|
|
body .insights-page .editorial-index::after {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 4px;
|
|
content: '';
|
|
background: linear-gradient(90deg, var(--color-brand-violet), var(--color-brand-cyan));
|
|
}
|
|
|
|
body .about-page .about-hero-mesh::after {
|
|
background-image:
|
|
linear-gradient(
|
|
90deg,
|
|
transparent 0 13%,
|
|
rgba(20, 120, 251, 0.08) 13% 13.1%,
|
|
transparent 13.1%
|
|
),
|
|
radial-gradient(circle, rgba(20, 120, 251, 0.18) 1px, transparent 1.5px);
|
|
background-size:
|
|
100% 100%,
|
|
36px 36px;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/* Detail and long-form pages. */
|
|
body :is(.case-detail-page, .article-page) {
|
|
background: #fff;
|
|
}
|
|
|
|
body :is(.case-detail-page, .article-page) :is(.detail-hero, .article-hero) {
|
|
background: linear-gradient(90deg, #f7faff, #e6eefc);
|
|
}
|
|
|
|
body
|
|
.case-detail-page
|
|
:is(.overview-section, .baseline-section, .solution-detail-section, .detail-summary-section),
|
|
body .article-page :is(.article-layout, .related-section) {
|
|
padding-top: 80px;
|
|
padding-bottom: 92px;
|
|
}
|
|
|
|
body .case-detail-page :is(.baseline-section, .detail-summary-section),
|
|
body .article-page .related-section {
|
|
background: var(--color-surface-blue);
|
|
}
|
|
|
|
body
|
|
.case-detail-page
|
|
:is(
|
|
.baseline-grid article,
|
|
.question-grid article,
|
|
.phase-list article,
|
|
.distribution-map article,
|
|
.outcome-grid article,
|
|
.related-grid article
|
|
) {
|
|
border: 1px solid rgba(83, 145, 215, 0.12);
|
|
border-radius: var(--radius-card);
|
|
background-color: var(--interior-surface);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
body .case-detail-page :is(.comparison-table-wrap, .result-table-wrap, .objective-box) {
|
|
border: 1px solid var(--color-border-soft);
|
|
border-radius: var(--radius-panel);
|
|
background: rgba(255, 255, 255, 0.92);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
body .case-detail-page :is(.comparison-table-wrap, .result-table-wrap),
|
|
body .article-page .comparison-table {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body .article-page .article-hero-inner,
|
|
body .case-detail-page .detail-hero > .page-width {
|
|
padding-top: 72px;
|
|
padding-bottom: 78px;
|
|
}
|
|
|
|
body .article-page .article-layout {
|
|
grid-template-columns: minmax(200px, 260px) minmax(0, 760px);
|
|
justify-content: center;
|
|
gap: clamp(48px, 7vw, 96px);
|
|
}
|
|
|
|
body .article-page .article-content {
|
|
width: 100%;
|
|
max-width: 760px;
|
|
}
|
|
|
|
body .article-page .article-content p,
|
|
body .article-page .article-content li {
|
|
color: var(--interior-copy);
|
|
font-size: 15px;
|
|
line-height: 1.85;
|
|
}
|
|
|
|
body .article-page .article-aside {
|
|
top: 92px;
|
|
}
|
|
|
|
body .article-page :is(.article-lead, .draft-note, .inline-cta) {
|
|
border-radius: var(--radius-card);
|
|
}
|
|
|
|
/* Shared reveal motion. */
|
|
.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) {
|
|
body
|
|
: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):hover {
|
|
box-shadow: var(--shadow-button-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-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,
|
|
.article-grid article
|
|
):hover,
|
|
body
|
|
.case-detail-page
|
|
:is(
|
|
.baseline-grid article,
|
|
.question-grid article,
|
|
.phase-list article,
|
|
.outcome-grid article
|
|
):hover {
|
|
border-color: rgba(51, 132, 229, 0.24);
|
|
box-shadow: var(--shadow-card-hover);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
body .cases-page .case-collage .collage-card:hover {
|
|
box-shadow: var(--shadow-card-hover);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero-grid,
|
|
.advantages-hero-grid,
|
|
.services-hero-grid,
|
|
.solutions-hero-grid,
|
|
.cases-hero-grid,
|
|
.insights-hero-grid
|
|
) {
|
|
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
body
|
|
:is(.advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.advantages-hero-copy,
|
|
.services-hero-copy,
|
|
.solutions-hero-copy,
|
|
.cases-hero-copy,
|
|
.insights-hero-copy
|
|
)
|
|
h1 {
|
|
font-size: clamp(38px, 4.25vw, 46px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.subsite-header-inner.page-width {
|
|
width: min(calc(100% - 32px), 580px);
|
|
}
|
|
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.subsite-menu {
|
|
display: grid;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.page-width {
|
|
width: min(calc(100% - 32px), 580px);
|
|
max-width: 100%;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero,
|
|
.advantages-hero,
|
|
.services-hero,
|
|
.solutions-hero,
|
|
.cases-hero,
|
|
.insights-hero
|
|
) {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero-grid,
|
|
.advantages-hero-grid,
|
|
.services-hero-grid,
|
|
.solutions-hero-grid,
|
|
.cases-hero-grid,
|
|
.insights-hero-grid
|
|
) {
|
|
min-height: 0;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 28px;
|
|
padding-top: 58px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
body
|
|
:is(.advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.advantages-hero-copy,
|
|
.services-hero-copy,
|
|
.solutions-hero-copy,
|
|
.cases-hero-copy,
|
|
.insights-hero-copy
|
|
) {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
body
|
|
:is(.advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.advantages-hero-copy,
|
|
.services-hero-copy,
|
|
.solutions-hero-copy,
|
|
.cases-hero-copy,
|
|
.insights-hero-copy
|
|
)
|
|
h1 {
|
|
max-width: 10.5em;
|
|
font-size: clamp(30px, 9vw, 36px);
|
|
line-height: 1.3;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
body .about-page .about-hero-copy h1 {
|
|
font-size: clamp(38px, 12vw, 48px);
|
|
line-height: 1.12;
|
|
}
|
|
|
|
body .about-page .about-hero-copy h2 {
|
|
max-width: 17em;
|
|
font-size: clamp(22px, 6.5vw, 27px);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero-copy,
|
|
.advantages-hero-copy,
|
|
.services-hero-copy,
|
|
.solutions-hero-copy,
|
|
.cases-hero-copy,
|
|
.insights-hero-copy
|
|
)
|
|
> p:nth-of-type(2) {
|
|
width: 100%;
|
|
max-width: 34em;
|
|
margin-top: 20px;
|
|
font-size: 14px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(.page-eyebrow, .section-kicker) {
|
|
font-size: 13px;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(.hero-actions, .hero-advantage-links, .hero-industry-links, .hero-proof-line) {
|
|
width: 100%;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.about-hero-visual,
|
|
.advantage-engine,
|
|
.services-hero-visual,
|
|
.solutions-hero-visual,
|
|
.case-collage,
|
|
.editorial-index
|
|
) {
|
|
width: min(100%, 430px);
|
|
max-width: calc(100vw - 32px);
|
|
justify-self: center;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
body .insights-page .editorial-index {
|
|
min-height: 330px;
|
|
margin-bottom: 46px;
|
|
padding: 30px 26px;
|
|
}
|
|
|
|
body .cases-page .case-collage {
|
|
min-height: 410px;
|
|
transform: none;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.company-story-section,
|
|
.search-change-section,
|
|
.company-stats-section,
|
|
.method-section,
|
|
.timeline-section,
|
|
.team-section,
|
|
.contact-section,
|
|
.advantage-intro-section,
|
|
.advantage-system,
|
|
.comparison-section,
|
|
.value-added-section,
|
|
.proof-section,
|
|
.decision-section,
|
|
.model-deep-section,
|
|
.service-system-section,
|
|
.process-section,
|
|
.service-industries,
|
|
.difference-section,
|
|
.industry-solutions,
|
|
.more-industries-section,
|
|
.case-library-section,
|
|
.case-method-section,
|
|
.insight-library,
|
|
.whitepaper-section
|
|
) {
|
|
padding-top: var(--section-space-mobile);
|
|
padding-bottom: 70px;
|
|
}
|
|
|
|
body
|
|
:is(.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.story-heading,
|
|
.change-copy,
|
|
.company-stats-grid > header,
|
|
.center-heading,
|
|
.timeline-heading,
|
|
.team-statement,
|
|
.contact-heading,
|
|
.advantage-intro-grid > header,
|
|
.advantage-story-copy,
|
|
.value-added-heading,
|
|
.proof-layout > header,
|
|
.section-intro,
|
|
.model-heading,
|
|
.service-system-heading,
|
|
.process-heading,
|
|
.industry-list > header,
|
|
.difference-heading,
|
|
.industry-intro,
|
|
.case-library-heading,
|
|
.case-method-grid > header,
|
|
.library-heading,
|
|
.whitepaper-copy
|
|
)
|
|
h2 {
|
|
font-size: clamp(24px, 7vw, 29px);
|
|
line-height: 1.38;
|
|
}
|
|
|
|
body .article-page .article-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 34px;
|
|
padding-top: 58px;
|
|
padding-bottom: 68px;
|
|
}
|
|
|
|
body .article-page .article-aside {
|
|
position: static;
|
|
}
|
|
|
|
body .article-page .article-content p,
|
|
body .article-page .article-content li {
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
body
|
|
.case-detail-page
|
|
:is(.overview-section, .baseline-section, .solution-detail-section, .detail-summary-section),
|
|
body .article-page .related-section {
|
|
padding-top: 62px;
|
|
padding-bottom: 70px;
|
|
}
|
|
|
|
body
|
|
: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 (max-width: 390px) {
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.page-width,
|
|
body
|
|
:is(
|
|
.about-page,
|
|
.advantages-page,
|
|
.services-page,
|
|
.solutions-page,
|
|
.cases-page,
|
|
.case-detail-page,
|
|
.insights-page,
|
|
.article-page
|
|
)
|
|
.subsite-header-inner.page-width {
|
|
width: calc(100% - 24px);
|
|
}
|
|
|
|
body
|
|
:is(.advantages-page, .services-page, .solutions-page, .cases-page, .insights-page)
|
|
:is(
|
|
.advantages-hero-copy,
|
|
.services-hero-copy,
|
|
.solutions-hero-copy,
|
|
.cases-hero-copy,
|
|
.insights-hero-copy
|
|
)
|
|
h1 {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.interior-reveal-ready .interior-reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
}
|