/* Google Fonts loaded via tags in HTML — do not use @import */
@font-face {
font-family: 'Franklin Gothic Medium Condensed';
src: url('https://static.wixstatic.com/ufonts/f24381_f7402165a5ef4e929a56d8e664678394/woff2/file.woff2') format('woff2'),
url('https://static.wixstatic.com/ufonts/f24381_f7402165a5ef4e929a56d8e664678394/woff/file.woff') format('woff'),
url('https://static.wixstatic.com/ufonts/f24381_f7402165a5ef4e929a56d8e664678394/ttf/file.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* ============================================
SENTINEL - Design System & Global Styles
============================================ */
/* --- Design Tokens --- */
:root {
/* Colors — upgraded to McKinsey high-fidelity corporate palette */
--color-bg-primary: #ffffff;
--color-bg-secondary: #f4f6f8;
--color-bg-card: #ffffff;
--color-bg-glass: rgba(255, 255, 255, 0.9);
--color-bg-glass-hover: rgba(255, 255, 255, 0.98);
--color-border: rgba(0, 28, 61, 0.08);
--color-border-hover: rgba(0, 102, 204, 0.3);
--color-text-primary: #051C2C; /* Sophisticated midnight dark */
--color-text-secondary: #3b4d5c;
--color-text-muted: #8090a0;
--color-accent: #0066cc; /* McKinsey Royal Blue */
--color-accent-light: #47a3ff;
--color-accent-dark: #004da6;
--color-accent-glow: rgba(0, 102, 204, 0.05);
/* Dark navy for hero/dark sections */
--color-navy: #001C3D; /* McKinsey signature Deep Navy */
--color-navy-light: #003366;
--color-success: #10b981;
--color-error: #ef4444;
/* Typography */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Playfair Display', 'Lora', Georgia, serif;
--font-serif: 'Lora', Georgia, serif;
--font-logo: 'Franklin Gothic Medium Condensed', sans-serif;
--font-nav: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-lg: 1.25rem;
--fs-xl: 1.5rem;
--fs-2xl: 2rem;
--fs-3xl: 2.5rem;
--fs-4xl: 3.5rem;
--fs-5xl: 4.5rem;
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
/* Layout */
--container-max: 1200px;
--container-narrow: 800px;
--nav-height: 96px; /* Slightly taller for the 42px logo and premium feel */
/* Effects */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.1);
--shadow-glow: 0 0 40px rgba(55, 125, 189, 0.08);
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Reset & Base --- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-primary);
font-size: var(--fs-base);
font-weight: var(--fw-normal);
line-height: 1.7;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
ul, ol {
list-style: none;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
color: inherit;
}
/* --- Utility --- */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-xl);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Background Effects --- */
.bg-grid {
position: fixed;
inset: 0;
z-index: -2;
background-image:
linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.bg-glow {
position: fixed;
z-index: -1;
pointer-events: none;
}
.bg-glow--top {
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 600px;
background: radial-gradient(ellipse, rgba(55, 125, 189, 0.04) 0%, transparent 70%);
}
.bg-glow--bottom {
bottom: -300px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(55, 125, 189, 0.03) 0%, transparent 70%);
}
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--nav-height);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--color-border);
transition: height var(--transition-slow), background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
/* Beautiful royal-blue brand top accent line matching McKinsey style */
.nav::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--color-accent);
z-index: 1001;
transition: height var(--transition-base);
}
.nav.scrolled {
height: 72px;
background: #ffffff;
box-shadow: 0 4px 24px rgba(0, 28, 61, 0.04);
border-bottom-color: rgba(0, 28, 61, 0.05);
}
.nav.scrolled::before {
height: 3px; /* Slightly thinner when scrolled for cleaner aesthetic */
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-xl);
}
.nav__logo {
font-family: var(--font-logo);
font-size: 44px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-navy);
text-transform: uppercase;
transition: font-size var(--transition-slow), color var(--transition-fast);
}
.nav.scrolled .nav__logo {
font-size: 36px; /* Elegant shrink effect on scroll */
}
.nav__links {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.nav__link {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
letter-spacing: normal;
text-transform: none; /* Elegant Sentence Case */
color: var(--color-text-secondary);
padding: var(--space-sm) var(--space-md);
transition: color var(--transition-fast);
position: relative;
}
.nav__link:hover,
.nav__link--active {
color: var(--color-accent);
}
.nav__link::after {
content: '';
position: absolute;
bottom: -4px;
left: var(--space-md);
right: var(--space-md);
height: 2px;
background: var(--color-accent);
transform: scaleX(0);
transition: transform var(--transition-base);
}
.nav__link:hover::after,
.nav__link--active::after {
transform: scaleX(1);
}
/* Dropdown */
.nav__dropdown {
position: relative;
}
.nav__dropdown-toggle {
display: flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--color-text-secondary);
padding: var(--space-sm) var(--space-md);
cursor: pointer;
transition: color var(--transition-fast);
}
.nav__dropdown-toggle:hover {
color: var(--color-accent);
}
.nav__dropdown-toggle svg {
width: 12px;
height: 12px;
transition: transform var(--transition-fast);
}
.nav__dropdown:hover .nav__dropdown-toggle svg {
transform: rotate(180deg);
}
.nav__dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
padding: var(--space-md) 0;
background: #ffffff;
border: 1px solid var(--color-border);
border-top: 3.5px solid var(--color-accent); /* Top accent bar matching McKinsey style */
border-radius: 2px;
box-shadow: 0 16px 48px rgba(0, 28, 61, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all var(--transition-base);
}
.nav__dropdown:hover .nav__dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav__dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
position: relative;
}
.nav__dropdown-item::after {
content: '→';
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
color: var(--color-accent);
opacity: 0;
transform: translateX(-8px);
transition: all var(--transition-fast);
}
.nav__dropdown-item:hover {
color: var(--color-accent);
background: var(--color-bg-secondary);
padding-left: 28px;
}
.nav__dropdown-item:hover::after {
opacity: 1;
transform: translateX(0);
}
/* Mobile Menu */
.nav__hamburger {
display: none;
flex-direction: column;
gap: 5px;
width: 28px;
cursor: pointer;
padding: var(--space-sm);
}
.nav__hamburger span {
display: block;
width: 100%;
height: 2px;
background: var(--color-navy);
border-radius: 2px;
transition: all var(--transition-base);
}
.nav__hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburger.active span:nth-child(2) {
opacity: 0;
}
.nav__hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* --- Hero Section --- */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: calc(var(--nav-height) + var(--space-4xl)) var(--space-xl) var(--space-4xl);
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: -1;
}
.hero__bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 48, 91, 0.3) 0%,
rgba(0, 48, 91, 0.6) 50%,
rgba(0, 48, 91, 0.85) 100%
);
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
}
.hero__content {
max-width: 900px;
z-index: 1;
}
.hero__badge {
display: inline-block;
padding: var(--space-xs) var(--space-lg);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 100px;
margin-bottom: var(--space-xl);
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
animation: fadeInUp 0.8s ease forwards;
}
.hero__title {
font-family: var(--font-display);
font-size: var(--fs-5xl);
font-weight: 500; /* Regular-medium weight serif is extremely high-end */
line-height: 1.15;
letter-spacing: -0.01em;
color: #ffffff;
margin-bottom: var(--space-xl);
animation: fadeInUp 0.8s ease 0.1s forwards;
opacity: 0;
}
.hero__title span {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--color-accent-light);
background: none;
-webkit-text-fill-color: unset;
}
.hero__subtitle {
font-size: var(--fs-lg);
font-weight: var(--fw-light);
color: rgba(255, 255, 255, 0.8);
max-width: 680px;
margin: 0 auto var(--space-3xl);
line-height: 1.8;
animation: fadeInUp 0.8s ease 0.2s forwards;
opacity: 0;
}
.hero__actions {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease 0.3s forwards;
opacity: 0;
}
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 14px 32px;
font-family: var(--font-primary);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 2px; /* Sharp McKinsey-style buttons */
transition: all var(--transition-base);
cursor: pointer;
white-space: nowrap;
}
.btn--primary {
background: var(--color-accent);
color: #ffffff;
border: 1.5px solid var(--color-accent);
}
.btn--primary:hover {
background: var(--color-accent-dark);
border-color: var(--color-accent-dark);
transform: translateY(-1px);
}
.btn--outline {
border: 1.5px solid var(--color-navy);
color: var(--color-navy);
background: transparent;
}
.btn--outline:hover {
border-color: var(--color-accent);
color: #ffffff;
background: var(--color-accent);
transform: translateY(-1px);
}
/* Button overrides for dark background hero */
.hero__actions .btn--outline {
border-color: rgba(255, 255, 255, 0.8);
color: #ffffff;
}
.hero__actions .btn--outline:hover {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
/* --- Sections --- */
.section {
padding: var(--space-5xl) 0;
position: relative;
}
.section__header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-4xl);
}
.section__label {
display: inline-block;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.section__title {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.01em;
margin-bottom: var(--space-lg);
color: var(--color-navy);
}
.section__desc {
font-size: var(--fs-md);
color: var(--color-text-secondary);
line-height: 1.8;
}
/* Divider */
.section__divider {
width: 80px;
height: 1px; /* Ultra-thin editorial line */
background: var(--color-accent);
margin: 0 auto var(--space-xl);
}
/* --- Cards Grid --- */
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-2xl);
transition: all var(--transition-slow);
position: relative;
overflow: hidden;
}
.card {
position: relative;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-top: 3.5px solid var(--color-accent); /* McKinsey accent top border */
padding: var(--space-xl);
transition: all var(--transition-base);
border-radius: 2px;
}
.card::before {
display: none;
}
.card:hover {
background: var(--color-bg-secondary);
border-color: var(--color-accent-light);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 28, 61, 0.04);
}
.card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
}
.card__icon svg {
width: 24px;
height: 24px;
stroke: var(--color-accent);
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.card__title {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: 600;
margin-bottom: var(--space-md);
letter-spacing: 0.01em;
color: var(--color-navy);
}
.card__text {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.7;
}
/* --- Team Section --- */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2xl);
}
.team-member {
text-align: center;
}
.team-member__photo {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 0 auto var(--space-lg);
overflow: hidden;
border: 2px solid var(--color-border);
transition: border-color var(--transition-base);
background: var(--color-bg-glass);
display: flex;
align-items: center;
justify-content: center;
}
.team-member__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member__photo .initials {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--color-accent);
letter-spacing: 0.05em;
}
.team-member:hover .team-member__photo {
border-color: var(--color-accent);
}
.team-member__name {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
margin-bottom: var(--space-xs);
}
.team-member__role {
font-size: var(--fs-sm);
color: var(--color-accent);
font-weight: var(--fw-medium);
margin-bottom: var(--space-sm);
}
.team-member__email {
font-size: var(--fs-xs);
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
.team-member__email:hover {
color: var(--color-accent);
}
/* --- CTA Section --- */
.cta {
text-align: center;
padding: var(--space-5xl) 0;
position: relative;
}
.cta__inner {
background: linear-gradient(135deg, rgba(55, 125, 189, 0.04) 0%, rgba(55, 125, 189, 0.01) 100%);
border: 1px solid rgba(55, 125, 189, 0.15);
border-radius: var(--radius-xl);
padding: var(--space-4xl) var(--space-2xl);
max-width: 800px;
margin: 0 auto;
backdrop-filter: blur(20px);
}
.cta__title {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
margin-bottom: var(--space-lg);
}
.cta__text {
font-size: var(--fs-md);
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto var(--space-2xl);
line-height: 1.8;
}
/* --- Contact Form --- */
.contact-form {
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: var(--space-lg);
}
.form-group label {
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: var(--space-sm);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: var(--space-md) var(--space-lg);
background: var(--color-bg-glass);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-family: var(--font-primary);
font-size: var(--fs-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
/* --- Footer --- */
.footer {
border-top: 1px solid var(--color-border);
padding: var(--space-3xl) 0 var(--space-xl);
background: var(--color-navy);
color: #ffffff;
}
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-lg);
}
.footer__logo {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
letter-spacing: 0.2em;
color: #ffffff;
text-transform: uppercase;
}
.footer__links {
display: flex;
gap: var(--space-xl);
}
.footer__link {
font-size: var(--fs-xs);
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.05em;
transition: color var(--transition-fast);
}
.footer__link:hover {
color: var(--color-accent-light);
}
.footer__copyright {
width: 100%;
text-align: center;
padding-top: var(--space-xl);
margin-top: var(--space-xl);
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: var(--fs-xs);
color: rgba(255, 255, 255, 0.4);
}
/* --- Industry / Practice Page --- */
.practice-hero {
padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-4xl);
text-align: center;
position: relative;
}
.practice-hero__title {
font-family: var(--font-display);
font-size: var(--fs-4xl);
font-weight: 500;
line-height: 1.15;
margin-bottom: var(--space-lg);
color: var(--color-navy);
}
.practice-hero__title span {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--color-accent);
}
.practice-hero__subtitle {
font-size: var(--fs-lg);
color: var(--color-text-secondary);
max-width: 700px;
margin: 0 auto;
line-height: 1.8;
}
/* Service pills layout */
.services-flow {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
.service-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-2xl);
position: relative;
overflow: hidden;
transition: all var(--transition-slow);
}
.service-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--color-accent), transparent);
opacity: 0;
transition: opacity var(--transition-base);
}
.service-card:hover {
border-color: var(--color-border-hover);
transform: translateY(-2px);
}
.service-card:hover::after {
opacity: 1;
}
.service-card__number {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: var(--color-accent);
letter-spacing: 0.1em;
margin-bottom: var(--space-md);
}
.service-card__title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
margin-bottom: var(--space-md);
}
.service-card__text {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.7;
}
/* Industries page */
.industries-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2xl);
max-width: 900px;
margin: 0 auto;
}
.industry-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-3xl);
text-align: center;
transition: all var(--transition-slow);
position: relative;
overflow: hidden;
}
.industry-card {
box-shadow: var(--shadow-sm);
}
.industry-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(55, 125, 189, 0.03) 0%, transparent 100%);
opacity: 0;
transition: opacity var(--transition-base);
}
.industry-card:hover {
transform: translateY(-6px);
border-color: var(--color-accent);
box-shadow: var(--shadow-glow);
}
.industry-card:hover::before {
opacity: 1;
}
.industry-card__icon {
font-size: 3rem;
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
}
.industry-card__icon svg {
width: 48px;
height: 48px;
stroke: var(--color-accent);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.industry-card__title {
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
margin-bottom: var(--space-md);
position: relative;
}
.industry-card__text {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.7;
position: relative;
}
.industry-card__arrow {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-lg);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-accent);
letter-spacing: 0.1em;
text-transform: uppercase;
position: relative;
transition: gap var(--transition-base);
}
.industry-card:hover .industry-card__arrow {
gap: var(--space-md);
}
/* Demo request page */
.demo-hero {
padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-3xl);
text-align: center;
}
.demo-hero__title {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: 500;
margin-bottom: var(--space-lg);
color: var(--color-navy);
}
.demo-hero__title span {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--color-accent);
}
.demo-hero__text {
font-size: var(--fs-md);
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
/* --- Legal / Policy Pages --- */
.legal-page {
padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-4xl);
}
.legal-page__header {
text-align: center;
margin-bottom: var(--space-4xl);
}
.legal-page__title {
font-size: var(--fs-3xl);
font-weight: var(--fw-bold);
margin-bottom: var(--space-md);
}
.legal-page__title span {
color: var(--color-accent);
}
.legal-page__updated {
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.legal-content {
max-width: var(--container-narrow);
margin: 0 auto;
}
.legal-content h2 {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
margin-top: var(--space-3xl);
margin-bottom: var(--space-lg);
color: var(--color-text-primary);
}
.legal-content h3 {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
margin-top: var(--space-2xl);
margin-bottom: var(--space-md);
color: var(--color-accent);
}
.legal-content p {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.85;
margin-bottom: var(--space-lg);
}
.legal-content ul {
margin-bottom: var(--space-lg);
padding-left: var(--space-xl);
}
.legal-content ul li {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.85;
margin-bottom: var(--space-sm);
position: relative;
padding-left: var(--space-md);
}
.legal-content ul li::before {
content: '·';
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: var(--fw-bold);
font-size: var(--fs-lg);
line-height: 1.5;
}
.legal-content a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--transition-fast);
}
.legal-content a:hover {
color: var(--color-accent-light);
}
.legal-content strong {
color: var(--color-text-primary);
font-weight: var(--fw-semibold);
}
/* --- Animations --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered card animations */
.cards-grid .card:nth-child(1) .animate-on-scroll,
.services-flow .service-card:nth-child(1) { transition-delay: 0s; }
.cards-grid .card:nth-child(2) .animate-on-scroll,
.services-flow .service-card:nth-child(2) { transition-delay: 0.1s; }
.cards-grid .card:nth-child(3) .animate-on-scroll,
.services-flow .service-card:nth-child(3) { transition-delay: 0.2s; }
.cards-grid .card:nth-child(4) .animate-on-scroll,
.services-flow .service-card:nth-child(4) { transition-delay: 0.15s; }
.cards-grid .card:nth-child(5) .animate-on-scroll,
.services-flow .service-card:nth-child(5) { transition-delay: 0.25s; }
.cards-grid .card:nth-child(6) .animate-on-scroll,
.services-flow .service-card:nth-child(6) { transition-delay: 0.3s; }
/* --- Responsive --- */
@media (max-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
:root {
--fs-5xl: 2.5rem;
--fs-4xl: 2rem;
--fs-3xl: 1.75rem;
--fs-2xl: 1.5rem;
--nav-height: 72px; /* Slightly taller on tablet for Franklin Gothic logo */
}
.nav.scrolled {
height: 60px;
}
.nav__logo {
font-size: 28px; /* Scale down logo on mobile */
transition: font-size var(--transition-slow), color var(--transition-fast);
}
.nav.scrolled .nav__logo {
font-size: 24px;
}
.nav__links {
display: none;
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
align-items: flex-start;
z-index: 999;
padding: var(--space-2xl);
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
gap: var(--space-md);
overflow-y: auto;
}
.nav__links.open {
display: flex;
}
.nav__hamburger {
display: flex;
}
.nav__dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: transparent;
border: none;
box-shadow: none;
padding-left: var(--space-md);
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-base);
}
.nav__dropdown.open .nav__dropdown-menu {
max-height: 200px;
}
.cards-grid,
.team-grid,
.services-flow,
.industries-grid {
grid-template-columns: 1fr;
}
.hero {
padding-top: calc(var(--nav-height) + var(--space-3xl));
}
.hero__actions {
flex-direction: column;
align-items: center;
}
.footer__inner {
flex-direction: column;
text-align: center;
}
.footer__links {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 480px) {
:root {
--fs-5xl: 2rem;
--fs-4xl: 1.75rem;
--nav-height: 64px; /* Smaller height on narrow mobile */
}
.nav.scrolled {
height: 52px;
}
.nav__logo {
font-size: 22px; /* Even smaller logo on small phones */
}
.nav.scrolled .nav__logo {
font-size: 18px;
}
.container {
padding: 0 var(--space-md);
}
.cta__inner {
padding: var(--space-2xl) var(--space-lg);
}
}
/* ============================================
FASHION PAGE — Editorial Styles
SSENSE × Dover Street Market Energy
============================================ */
/* --- Fashion Design Tokens --- */
.dark-page {
--f-bg: #0a0a0a;
--f-surface: #141414;
--f-text: #e8e4de;
--f-text-secondary: rgba(232, 228, 222, 0.5);
--f-accent: #ffffff;
--f-warm: #4A7FA5;
--f-border: rgba(255, 255, 255, 0.08);
--f-font-display: 'Space Grotesk', 'Inter', sans-serif;
--f-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--f-font-serif: 'Playfair Display', Georgia, serif;
}
/* --- Fashion Page Body/Global Overrides --- */
.dark-page {
background-color: var(--f-bg);
color: var(--f-text);
}
.dark-page .bg-grid,
.dark-page .bg-glow,
.dark-page .bg-glow--top,
.dark-page .bg-glow--bottom {
display: none;
}
/* --- Film Grain Overlay --- */
.grain {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.03;
}
.grain::before {
content: '';
position: absolute;
inset: -50%;
width: 200%;
height: 200%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}
/* --- Nav Dark Mode Overrides --- */
.dark-page .nav {
background: rgba(10, 10, 10, 0.9);
border-bottom: 1px solid var(--f-border);
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
}
.dark-page .nav::before {
display: none;
}
.dark-page .nav.scrolled {
background: rgba(10, 10, 10, 0.97);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
border-bottom-color: var(--f-border);
}
.dark-page .nav__logo {
color: var(--f-text);
}
.dark-page .nav.scrolled .nav__logo {
color: var(--f-text);
}
.dark-page .nav__link {
color: var(--f-text-secondary);
}
.dark-page .nav__link:hover,
.dark-page .nav__link--active {
color: var(--f-accent);
}
.dark-page .nav__link::after {
background: var(--f-accent);
}
.dark-page .nav__dropdown-toggle {
color: var(--f-text-secondary);
}
.dark-page .nav__dropdown-toggle:hover {
color: var(--f-accent);
}
.dark-page .nav__dropdown-menu {
background: var(--f-surface);
border: 1px solid var(--f-border);
border-top: 1px solid var(--f-border);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.dark-page .nav__dropdown-item {
color: var(--f-text-secondary);
}
.dark-page .nav__dropdown-item::after {
color: var(--f-accent);
}
.dark-page .nav__dropdown-item:hover {
color: var(--f-accent);
background: rgba(255, 255, 255, 0.04);
}
.dark-page .nav__hamburger span {
background: var(--f-text);
}
/* --- Light Theme Override for .dark-page tokens --- */
body[data-theme="light"].dark-page {
--f-bg: #f5f6f8;
--f-surface: #ffffff;
--f-text: #1a2a3a;
--f-text-secondary: rgba(20, 40, 60, 0.5);
--f-accent: #1a2a3a;
--f-warm: #2d6080;
--f-border: rgba(0, 30, 60, 0.08);
}
body[data-theme="light"].dark-page .nav {
background: rgba(245, 246, 248, 0.92);
}
body[data-theme="light"].dark-page .nav.scrolled {
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 4px 30px rgba(0, 30, 60, 0.06);
}
body[data-theme="light"].dark-page .nav__dropdown-menu {
border-top: 2px solid var(--f-warm);
box-shadow: 0 16px 48px rgba(0, 30, 60, 0.1);
}
body[data-theme="light"].dark-page .nav__dropdown-item:hover {
background: rgba(0, 30, 60, 0.03);
}
body[data-theme="light"] .grain {
opacity: 0.015;
}
/* --- Hero Section --- */
.f-hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--nav-height) 2rem 4rem;
position: relative;
overflow: hidden;
}
.f-hero__content {
max-width: 1100px;
}
.f-hero__label {
font-family: var(--f-font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--f-text-secondary);
margin-bottom: 3rem;
display: block;
}
.f-hero__title {
margin-bottom: 2.5rem;
}
.f-hero__line {
display: block;
font-family: var(--f-font-display);
font-size: 13vw;
font-weight: 300;
text-transform: uppercase;
letter-spacing: -0.04em;
line-height: 0.9;
color: var(--f-text);
}
.f-hero__divider {
width: 80px;
height: 1px;
background: var(--f-warm);
margin: 2.5rem auto;
}
.f-hero__tagline {
font-family: var(--f-font-body);
font-size: 1.25rem;
font-weight: 400;
color: var(--f-text);
letter-spacing: 0.02em;
margin-bottom: 1.5rem;
}
.f-hero__tagline em {
font-family: var(--f-font-serif);
font-style: italic;
font-weight: 400;
}
.f-hero__desc {
font-family: var(--f-font-body);
font-size: 1rem;
font-weight: 300;
color: var(--f-text-secondary);
line-height: 1.85;
max-width: 560px;
margin: 0 auto 2.5rem;
}
.f-hero__cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--f-font-body);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--f-text);
transition: color 0.3s ease;
}
.f-hero__cta:hover {
color: var(--f-accent);
}
.f-hero__cta-arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.f-hero__cta:hover .f-hero__cta-arrow {
transform: translateX(6px);
}
.f-hero__scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.f-hero__scroll-text {
font-family: var(--f-font-body);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--f-text-secondary);
}
.f-hero__scroll-line {
width: 1px;
height: 40px;
background: var(--f-warm);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
50% { opacity: 1; transform: scaleY(1); }
}
/* --- Marquee Ticker --- */
.f-marquee {
border-top: 1px solid var(--f-border);
border-bottom: 1px solid var(--f-border);
padding: 1.25rem 0;
overflow: hidden;
white-space: nowrap;
}
.f-marquee__track {
display: flex;
width: max-content;
animation: marqueeScroll 140s linear infinite;
}
.f-marquee__content {
display: flex;
align-items: center;
gap: 2.5rem;
padding-right: 2.5rem;
font-family: var(--f-font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--f-text-secondary);
}
.f-marquee__diamond {
font-size: 0.4rem;
color: var(--f-warm);
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* --- Section Base --- */
.f-section {
padding: 10rem 0;
position: relative;
}
.f-section__container {
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
}
.f-section__number {
display: block;
font-family: var(--f-font-display);
font-size: 8rem;
font-weight: 300;
color: var(--f-text);
opacity: 0.07;
line-height: 1;
margin-bottom: -2rem;
user-select: none;
}
.f-section__title {
font-family: var(--f-font-display);
font-size: 2.5rem;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--f-text);
margin-bottom: 1.5rem;
}
.f-section__title em {
font-family: var(--f-font-serif);
font-style: italic;
font-weight: 400;
color: var(--f-text);
}
.f-section__desc {
font-family: var(--f-font-body);
font-size: 1rem;
font-weight: 300;
color: var(--f-text-secondary);
line-height: 1.85;
max-width: 600px;
margin-bottom: 4rem;
}
/* --- Threats (Editorial Text Blocks) --- */
.f-threats {
display: flex;
flex-direction: column;
gap: 3.5rem;
margin-top: 4rem;
}
.f-threat {
max-width: 700px;
}
.f-threat__label {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--f-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--f-accent);
margin-bottom: 1rem;
}
.f-threat__label::before {
content: '';
display: inline-block;
width: 16px;
height: 1px;
background: var(--f-warm);
flex-shrink: 0;
}
.f-threat__text {
font-family: var(--f-font-body);
font-size: 1.1rem;
font-weight: 300;
color: var(--f-text-secondary);
line-height: 1.85;
}
/* --- Accordion --- */
.f-accordion {
margin-top: 4rem;
}
.f-accordion__item {
border-top: 1px solid var(--f-border);
}
.f-accordion__item:last-child {
border-bottom: 1px solid var(--f-border);
}
.f-accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.75rem 0;
cursor: pointer;
background: none;
border: none;
text-align: left;
transition: color 0.3s ease;
}
.f-accordion__trigger:hover {
color: var(--f-accent);
}
.f-accordion__trigger-name {
font-family: var(--f-font-display);
font-size: 1.75rem;
font-weight: 400;
color: var(--f-text);
letter-spacing: -0.01em;
flex: 1;
transition: color 0.3s ease;
}
.f-accordion__trigger:hover .f-accordion__trigger-name {
color: var(--f-accent);
}
.f-accordion__trigger-number {
font-family: var(--f-font-body);
font-size: 0.75rem;
font-weight: 400;
color: var(--f-text-secondary);
letter-spacing: 0.1em;
margin-right: 2rem;
}
.f-accordion__trigger-icon {
font-family: var(--f-font-display);
font-size: 1.5rem;
font-weight: 300;
color: var(--f-text-secondary);
transition: transform 0.4s ease, color 0.3s ease;
flex-shrink: 0;
width: 1.5rem;
text-align: center;
}
.f-accordion__item.is-open .f-accordion__trigger-icon {
transform: rotate(45deg);
color: var(--f-accent);
}
.f-accordion__panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.f-accordion__item.is-open .f-accordion__panel {
max-height: 600px;
}
.f-accordion__panel-inner {
padding: 0 0 2.5rem 0;
}
.f-accordion__subtitle {
font-family: var(--f-font-serif);
font-size: 1.1rem;
font-style: italic;
font-weight: 400;
color: var(--f-warm);
margin-bottom: 0.75rem;
}
.f-accordion__tag {
display: inline-block;
font-family: var(--f-font-body);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--f-text-secondary);
margin-bottom: 1.5rem;
}
.f-accordion__list {
list-style: none;
padding: 0;
}
.f-accordion__list li {
font-family: var(--f-font-body);
font-size: 0.95rem;
font-weight: 300;
color: var(--f-text-secondary);
line-height: 1.7;
padding: 0.4rem 0 0.4rem 1.5rem;
position: relative;
}
.f-accordion__list li::before {
content: '';
position: absolute;
left: 0;
top: 1rem;
width: 8px;
height: 1px;
background: var(--f-warm);
}
/* --- Statement / Blockquote --- */
.f-statement {
padding: 12rem 0;
text-align: center;
}
.f-statement__quote {
font-family: var(--f-font-display);
font-size: 2.75rem;
font-weight: 300;
line-height: 1.3;
color: var(--f-text);
max-width: 800px;
margin: 0 auto;
letter-spacing: -0.02em;
}
.f-statement__quote em {
font-family: var(--f-font-serif);
font-style: italic;
font-weight: 400;
color: var(--f-warm);
}
/* --- Segments --- */
.f-segments {
display: flex;
flex-direction: column;
margin-top: 4rem;
}
.f-segment {
padding: 3rem 0;
border-bottom: 1px solid var(--f-border);
}
.f-segment:first-child {
border-top: 1px solid var(--f-border);
}
.f-segment__tag {
display: block;
font-family: var(--f-font-body);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--f-warm);
margin-bottom: 1rem;
}
.f-segment__heading {
font-family: var(--f-font-display);
font-size: 1.75rem;
font-weight: 400;
color: var(--f-text);
letter-spacing: -0.01em;
margin-bottom: 1rem;
line-height: 1.3;
}
.f-segment__text {
font-family: var(--f-font-body);
font-size: 1rem;
font-weight: 300;
color: var(--f-text-secondary);
line-height: 1.85;
max-width: 640px;
}
/* --- Contact Form (Dark) --- */
.f-contact {
padding-bottom: 8rem;
}
.f-form {
max-width: 600px;
margin-top: 3rem;
}
.f-form__group {
margin-bottom: 1.75rem;
}
.f-form__group label {
display: block;
font-family: var(--f-font-body);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--f-text-secondary);
margin-bottom: 0.5rem;
}
.f-form__group input,
.f-form__group textarea {
width: 100%;
padding: 1rem 1.25rem;
background: var(--f-surface);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
color: var(--f-text);
font-family: var(--f-font-body);
font-size: 1rem;
font-weight: 300;
transition: border-color 0.3s ease;
-webkit-appearance: none;
appearance: none;
}
.f-form__group input::placeholder,
.f-form__group textarea::placeholder {
color: rgba(232, 228, 222, 0.25);
font-weight: 300;
}
.f-form__group input:focus,
.f-form__group textarea:focus {
outline: none;
border-color: var(--f-accent);
}
.f-form__group textarea {
min-height: 120px;
resize: vertical;
}
.f-form__submit {
width: 100%;
padding: 1.1rem 2rem;
background: transparent;
border: 1px solid var(--f-accent);
color: var(--f-accent);
font-family: var(--f-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
margin-top: 0.5rem;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.f-form__submit:hover {
background: var(--f-accent);
color: var(--f-bg);
}
/* --- Footer Dark Override --- */
.dark-page .footer {
background: var(--f-bg);
border-top: 1px solid var(--f-border);
}
.dark-page .footer__logo {
color: var(--f-text);
}
.dark-page .footer__link {
color: var(--f-text-secondary);
}
.dark-page .footer__link:hover {
color: var(--f-accent);
}
.dark-page .footer__copyright {
border-top-color: var(--f-border);
color: rgba(232, 228, 222, 0.25);
}
body[data-theme="light"].dark-page .footer__copyright {
color: rgba(20, 40, 60, 0.3);
}
/* --- Reveal Animation System --- */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* --- Fashion Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
.f-hero {
padding: calc(var(--nav-height) + 2rem) 1.5rem 3rem;
min-height: 90vh;
}
.f-hero__line {
font-size: 15vw;
}
.f-hero__label {
font-size: 0.6rem;
margin-bottom: 2rem;
}
.f-hero__desc {
font-size: 0.9rem;
}
.f-section {
padding: 6rem 0;
}
.f-section__number {
font-size: 5rem;
margin-bottom: -1rem;
}
.f-section__title {
font-size: 2rem;
}
.f-statement {
padding: 8rem 0;
}
.f-statement__quote {
font-size: 2rem;
padding: 0 1.5rem;
}
.f-accordion__trigger-name {
font-size: 1.35rem;
}
.f-segment__heading {
font-size: 1.4rem;
}
.f-marquee__content {
gap: 2rem;
padding-right: 2rem;
}
/* Mobile nav dark overrides */
.dark-page .nav__links {
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
body[data-theme="light"].dark-page .nav__links {
background: rgba(245, 246, 248, 0.98);
}
.dark-page .nav__links.open {
display: flex;
}
.dark-page .nav__dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
border: none;
box-shadow: none;
background: transparent;
padding-left: 1rem;
}
}
/* --- Fashion Responsive: Mobile (480px) --- */
@media (max-width: 480px) {
.f-hero {
padding: calc(var(--nav-height) + 1.5rem) 1rem 2.5rem;
min-height: 85vh;
}
.f-hero__line {
font-size: 17vw;
}
.f-hero__tagline {
font-size: 1.1rem;
}
.f-hero__desc {
font-size: 0.85rem;
}
.f-section {
padding: 4rem 0;
}
.f-section__container {
padding: 0 1.25rem;
}
.f-section__number {
font-size: 4rem;
margin-bottom: -0.5rem;
}
.f-section__title {
font-size: 1.6rem;
}
.f-section__desc {
font-size: 0.9rem;
}
.f-threats {
gap: 2.5rem;
margin-top: 2.5rem;
}
.f-threat__text {
font-size: 0.95rem;
}
.f-statement {
padding: 6rem 0;
}
.f-statement__quote {
font-size: 1.5rem;
padding: 0 1rem;
}
.f-accordion__trigger {
padding: 1.25rem 0;
}
.f-accordion__trigger-name {
font-size: 1.15rem;
}
.f-accordion__trigger-number {
margin-right: 1rem;
font-size: 0.65rem;
}
.f-segment {
padding: 2rem 0;
}
.f-segment__heading {
font-size: 1.25rem;
}
.f-segment__text {
font-size: 0.9rem;
}
.f-form__group input,
.f-form__group textarea {
padding: 0.9rem 1rem;
font-size: 0.95rem;
}
.f-hero__scroll {
display: none;
}
}
/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.f-marquee__track {
animation: none;
}
.f-hero__scroll-line {
animation: none;
opacity: 0.5;
}
.f-accordion__panel {
transition: none;
}
.f-accordion__trigger-icon {
transition: none;
}
.f-hero__cta-arrow {
transition: none;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.5; transform: scaleY(1); }
}
@keyframes marqueeScroll {
0%, 100% { transform: translateX(0); }
}
}
/* ============================================
FASHION PAGE — Wide & Creative Layouts
============================================ */
/* --- Wide Container Modifier --- */
.f-section__container--wide {
max-width: 1200px;
}
/* --- Threats: Staggered Two-Column Grid --- */
.f-threats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem 5rem;
}
.f-threat:nth-child(even) {
margin-top: 5rem;
}
.f-threat {
padding-left: 1.5rem;
border-left: 1px solid var(--f-border);
}
.f-threat:hover {
border-left-color: var(--f-warm);
}
/* --- Split Layout (Programs & Contact) --- */
.f-split {
display: grid;
grid-template-columns: 38% 1fr;
gap: 5rem;
align-items: start;
}
.f-split__left {
position: sticky;
top: calc(var(--nav-height, 72px) + 3rem);
}
/* Remove default top margin from accordion inside split */
.f-split__right .f-accordion {
margin-top: 0;
}
/* --- Segments: Two-Column Grid --- */
.f-segments {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.f-segment {
padding: 3rem 3rem 3rem 0;
border-bottom: 1px solid var(--f-border);
border-right: 1px solid var(--f-border);
}
.f-segment:nth-child(even) {
padding: 3rem 0 3rem 3rem;
border-right: none;
}
.f-segment:first-child,
.f-segment:nth-child(2) {
border-top: 1px solid var(--f-border);
}
/* --- Statement: Decorative Lines --- */
.f-statement {
position: relative;
}
.f-statement::before,
.f-statement::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 1px;
background: var(--f-warm);
opacity: 0.4;
}
.f-statement::before {
top: 0;
}
.f-statement::after {
bottom: 0;
}
/* --- Responsive Overrides for Wide Layouts --- */
@media (max-width: 768px) {
.f-section__container--wide {
max-width: 100%;
}
.f-threats {
grid-template-columns: 1fr;
}
.f-threat:nth-child(even) {
margin-top: 0;
}
.f-threat {
border-left: none;
padding-left: 0;
}
.f-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.f-split__left {
position: static;
}
.f-segments {
grid-template-columns: 1fr;
}
.f-segment,
.f-segment:nth-child(even) {
padding: 2.5rem 0;
border-right: none;
}
.f-segment:nth-child(2) {
border-top: none;
}
}
/* ============================================
VISUAL ANIMATIONS & INTERACTIVE ELEMENTS
============================================ */
/* --- Hero Canvas Network --- */
.hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.f-hero {
position: relative;
overflow: hidden;
}
.f-hero__content,
.f-hero__scroll {
position: relative;
z-index: 1;
}
/* --- Animated Stats Section --- */
.f-stats {
padding: 7rem 0;
position: relative;
}
.f-stats::before,
.f-stats::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: min(1200px, calc(100% - 4rem));
height: 1px;
background: var(--f-border);
}
.f-stats::before { top: 0; }
.f-stats::after { bottom: 0; }
.f-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.f-stat__number {
font-family: var(--f-font-display);
font-size: 5rem;
font-weight: 200;
color: var(--f-accent);
letter-spacing: -0.04em;
line-height: 1;
display: block;
margin-bottom: 1.25rem;
}
.f-stat__label {
font-family: var(--f-font-body);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--f-text-secondary);
}
/* --- Pulsing Threat Indicators --- */
.f-threat__label::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: var(--f-warm);
border-radius: 50%;
flex-shrink: 0;
animation: threatPulse 2.5s ease-in-out infinite;
}
@keyframes threatPulse {
0%, 100% {
opacity: 0.4;
box-shadow: 0 0 0 0 rgba(74, 127, 165, 0.4);
}
50% {
opacity: 1;
box-shadow: 0 0 0 8px rgba(74, 127, 165, 0);
}
}
/* Stagger the pulse for each threat */
.f-threat:nth-child(2) .f-threat__label::before { animation-delay: 0.6s; }
.f-threat:nth-child(3) .f-threat__label::before { animation-delay: 1.2s; }
.f-threat:nth-child(4) .f-threat__label::before { animation-delay: 1.8s; }
/* --- Stats Responsive --- */
@media (max-width: 768px) {
.f-stats { padding: 5rem 0; }
.f-stats__grid {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
}
.f-stat__number { font-size: 3.5rem; }
}
@media (max-width: 480px) {
.f-stats { padding: 4rem 0; }
.f-stats__grid { gap: 2.5rem 1rem; }
.f-stat__number { font-size: 2.5rem; }
}
/* --- Reduced Motion: Visuals --- */
@media (prefers-reduced-motion: reduce) {
.f-threat__label::before {
animation: none;
opacity: 1;
box-shadow: none;
}
}
/* ============================================
PRICING PAGE — Service Tiers
============================================ */
/* --- Pricing Hero --- */
.pricing-hero {
padding: calc(var(--nav-height) + var(--space-5xl)) 0 var(--space-3xl);
text-align: center;
position: relative;
}
.pricing-hero__title {
font-family: var(--font-display);
font-size: var(--fs-4xl);
font-weight: 500;
line-height: 1.15;
margin-bottom: var(--space-lg);
color: var(--color-navy);
}
.pricing-hero__title span {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--color-accent);
}
.pricing-hero__subtitle {
font-size: var(--fs-md);
color: var(--color-text-secondary);
max-width: 720px;
margin: 0 auto;
line-height: 1.85;
}
/* --- Trust Metrics Strip --- */
.pricing-metrics {
padding: var(--space-3xl) 0;
background: var(--color-navy);
position: relative;
overflow: hidden;
}
.pricing-metrics::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, transparent 50%);
pointer-events: none;
}
.pricing-metrics__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
text-align: center;
}
.pricing-metrics__item {
position: relative;
}
.pricing-metrics__number {
display: inline;
font-family: var(--font-display);
font-size: var(--fs-4xl);
font-weight: 700;
color: #ffffff;
line-height: 1.2;
}
.pricing-metrics__suffix {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
margin-left: 2px;
}
.pricing-metrics__label {
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: var(--space-sm);
}
/* --- Pricing Tiers Grid --- */
.pricing-tiers {
padding-top: var(--space-4xl);
padding-bottom: var(--space-5xl);
}
.pricing-tiers__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
align-items: start;
}
/* --- Pricing Card --- */
.pricing-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-top: 3.5px solid var(--color-border);
border-radius: 2px;
display: flex;
flex-direction: column;
position: relative;
transition: all var(--transition-base);
overflow: hidden;
}
.pricing-card:hover {
border-color: var(--color-accent-light);
border-top-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 28, 61, 0.08);
}
/* Featured card */
.pricing-card--featured {
border-top: 4px solid var(--color-accent);
box-shadow: 0 12px 40px rgba(0, 102, 204, 0.12);
transform: scale(1.03);
z-index: 2;
}
.pricing-card--featured:hover {
transform: scale(1.03) translateY(-4px);
box-shadow: 0 20px 60px rgba(0, 102, 204, 0.16);
}
.pricing-card__badge {
position: absolute;
top: 0;
right: 24px;
background: var(--color-accent);
color: #ffffff;
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 16px 8px;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.pricing-card__header {
padding: var(--space-2xl) var(--space-2xl) var(--space-lg);
}
.pricing-card__tier-label {
display: inline-block;
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-sm);
}
.pricing-card__name {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: 500;
color: var(--color-navy);
margin-bottom: var(--space-xs);
}
.pricing-card__tagline {
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-weight: var(--fw-normal);
}
.pricing-card__divider {
width: calc(100% - var(--space-2xl) * 2);
height: 1px;
background: var(--color-border);
margin: 0 auto;
}
.pricing-card__body {
padding: var(--space-lg) var(--space-2xl);
flex: 1;
}
.pricing-card__desc {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.75;
margin-bottom: var(--space-xl);
}
/* Feature list */
.pricing-card__features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-xl) 0;
}
.pricing-card__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.65;
padding: 8px 0;
border-bottom: 1px solid rgba(0, 28, 61, 0.04);
}
.pricing-card__features li:last-child {
border-bottom: none;
}
.pricing-card__features li svg {
width: 18px;
height: 18px;
min-width: 18px;
stroke: var(--color-accent);
margin-top: 2px;
}
.pricing-card__features li strong {
color: var(--color-text-primary);
font-weight: var(--fw-semibold);
}
/* Ideal for box */
.pricing-card__ideal {
background: var(--color-bg-secondary);
border-radius: 2px;
padding: var(--space-md) var(--space-lg);
border-left: 3px solid var(--color-accent);
}
.pricing-card__ideal-label {
display: block;
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 4px;
}
.pricing-card__ideal p {
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0;
}
/* Card footer */
.pricing-card__footer {
padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
}
.pricing-card__cta {
width: 100%;
justify-content: center;
text-align: center;
}
/* --- Comparison Table --- */
.pricing-compare {
background: var(--color-bg-secondary);
}
.pricing-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-border);
border-radius: 2px;
background: var(--color-bg-card);
}
.pricing-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.pricing-table thead {
background: var(--color-navy);
}
.pricing-table th {
padding: 16px 20px;
font-family: var(--font-primary);
font-size: 12px;
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ffffff;
text-align: center;
white-space: nowrap;
}
.pricing-table th.pricing-table__feature-col {
text-align: left;
width: 280px;
}
.pricing-table th.pricing-table__featured {
background: var(--color-accent);
position: relative;
}
.pricing-table td {
padding: 14px 20px;
text-align: center;
color: var(--color-text-secondary);
border-bottom: 1px solid rgba(0, 28, 61, 0.05);
font-size: 13.5px;
}
.pricing-table td:first-child {
text-align: left;
font-weight: var(--fw-medium);
color: var(--color-text-primary);
}
.pricing-table td.pricing-table__featured {
background: rgba(0, 102, 204, 0.03);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
}
.pricing-table tbody tr:hover {
background: rgba(0, 102, 204, 0.02);
}
.pricing-table tbody tr:last-child td {
border-bottom: none;
}
.pricing-table__check {
color: var(--color-accent);
font-weight: var(--fw-bold);
font-size: var(--fs-md);
}
.pricing-table__dash {
color: var(--color-text-muted);
font-size: var(--fs-md);
}
/* --- Social Proof Section --- */
.pricing-proof__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.pricing-proof__card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-top: 3.5px solid var(--color-accent);
border-radius: 2px;
padding: var(--space-2xl);
text-align: center;
transition: all var(--transition-base);
}
.pricing-proof__card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 28, 61, 0.06);
border-color: var(--color-accent-light);
}
.pricing-proof__stat {
font-family: var(--font-display);
font-size: var(--fs-4xl);
font-weight: 700;
color: var(--color-navy);
line-height: 1.1;
margin-bottom: var(--space-lg);
}
.pricing-proof__text {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.75;
margin-bottom: var(--space-md);
}
.pricing-proof__source {
display: block;
font-size: 12px;
font-style: normal;
color: var(--color-text-muted);
letter-spacing: 0.02em;
}
/* --- FAQ Accordion --- */
.pricing-faq__list {
max-width: 800px;
margin: 0 auto;
}
.pricing-faq__item {
border-bottom: 1px solid var(--color-border);
}
.pricing-faq__item:first-child {
border-top: 1px solid var(--color-border);
}
.pricing-faq__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) 0;
font-family: var(--font-primary);
font-size: var(--fs-base);
font-weight: var(--fw-medium);
color: var(--color-text-primary);
cursor: pointer;
transition: color var(--transition-fast);
text-align: left;
background: none;
border: none;
}
.pricing-faq__trigger:hover {
color: var(--color-accent);
}
.pricing-faq__icon {
font-size: var(--fs-xl);
font-weight: var(--fw-light);
color: var(--color-accent);
transition: transform var(--transition-base);
line-height: 1;
}
.pricing-faq__item.is-open .pricing-faq__icon {
transform: rotate(45deg);
}
.pricing-faq__panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}
.pricing-faq__item.is-open .pricing-faq__panel {
max-height: 300px;
}
.pricing-faq__panel p {
font-size: var(--fs-sm);
color: var(--color-text-secondary);
line-height: 1.8;
padding-bottom: var(--space-lg);
}
/* --- Pricing CTA Actions --- */
.pricing-cta__actions {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
/* --- Pricing Page Responsive --- */
@media (max-width: 1024px) {
.pricing-tiers__grid {
grid-template-columns: 1fr;
max-width: 560px;
margin: 0 auto;
}
.pricing-card--featured {
transform: none;
order: -1;
}
.pricing-card--featured:hover {
transform: translateY(-4px);
}
.pricing-proof__grid {
grid-template-columns: 1fr;
max-width: 560px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.pricing-hero {
padding-top: calc(var(--nav-height) + var(--space-3xl));
}
.pricing-hero__title {
font-size: var(--fs-3xl);
}
.pricing-metrics__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.pricing-metrics__number {
font-size: var(--fs-2xl);
}
.pricing-metrics__suffix {
font-size: var(--fs-lg);
}
.pricing-cta__actions {
flex-direction: column;
align-items: center;
}
.pricing-table-wrap {
margin: 0 calc(-1 * var(--space-xl));
border-radius: 0;
border-left: none;
border-right: none;
}
}
@media (max-width: 480px) {
.pricing-hero__title {
font-size: var(--fs-2xl);
}
.pricing-metrics__grid {
gap: var(--space-md);
}
.pricing-metrics__number {
font-size: var(--fs-xl);
}
.pricing-card__header {
padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.pricing-card__body {
padding: var(--space-md) var(--space-lg);
}
.pricing-card__footer {
padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.pricing-card__name {
font-size: var(--fs-xl);
}
.pricing-proof__stat {
font-size: var(--fs-2xl);
}
}