/* ================================================================
QPCA — Global Stylesheet
================================================================
Shared foundation for all QPCA pages. Import before any
page-specific styles.
Usage:
Sections:
1. Reset & Base
2. Design Tokens (CSS Variables)
3. Typography
4. Animations & Keyframes
5. Scroll Reveal (.sr)
6. Hero (dark, full-viewport)
7. Section Primitives (rules, eyebrows, headings)
8. Light Section Wrapper
9. Dark Section Wrapper
10. Explore / CTA Grid Cards
11. Category Tags
12. Responsive Breakpoints
================================================================ */
/* ================================================================
1. RESET & BASE
================================================================ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-family: 'Manrope', 'Helvetica Neue', sans-serif;
color: var(--text-primary);
background: var(--bg-warm);
}
/* ================================================================
2. DESIGN TOKENS
================================================================ */
:root {
/* ── Backgrounds ── */
--bg-dark: #060D16;
--bg-warm: #F6F2ED;
--bg-cool: #EEF0F3;
/* ── Text — dark theme ── */
--dark-text-primary: #FFFFFF;
--dark-text-secondary: #E0E6EC;
--dark-text-muted: rgba(184, 196, 208, 0.7);
--dark-text-faint: rgba(184, 196, 208, 0.4);
--dark-text-ghost: rgba(184, 196, 208, 0.28);
--dark-border: rgba(184, 196, 208, 0.06);
--dark-border-strong: rgba(184, 196, 208, 0.18);
--dark-rule: rgba(184, 196, 208, 0.08);
/* ── Text — light theme ── */
--text-primary: #2A2520;
--text-heading: #0E1A28;
--text-title: #1A2A3A;
--text-body: rgba(26, 58, 92, 0.55);
--text-muted: rgba(26, 58, 92, 0.4);
--text-faint: rgba(26, 58, 92, 0.25);
--text-ghost: rgba(26, 58, 92, 0.1);
--light-border: rgba(20, 36, 60, 0.06);
--light-border-cool: rgba(12, 27, 46, 0.12);
--light-rule: rgba(20, 36, 60, 0.06);
/* ── Accent — eyebrow tint ── */
--eyebrow-color: #1A3A5C;
/* ── Typography ── */
--ff-display: 'Playfair Display', serif;
--ff-serif: 'Source Serif 4', 'Georgia', serif;
--ff-sans: 'Manrope', 'Helvetica Neue', sans-serif;
/* ── Layout ── */
--max-width: 1240px;
--gutter: 40px;
--gutter-mobile: 20px;
}
/* ================================================================
3. TYPOGRAPHY — GOOGLE FONTS IMPORT
================================================================
Pages should still include the Google Fonts in .
This section defines reusable type-scale utilities.
================================================================ */
/* (Optional utility classes — uncomment if desired)
.ff-display { font-family: var(--ff-display); }
.ff-serif { font-family: var(--ff-serif); }
.ff-sans { font-family: var(--ff-sans); }
*/
/* ================================================================
4. ANIMATIONS & KEYFRAMES
================================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes growCenter {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes drawLine {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulseSubtle {
0%, 100% { opacity: 0.12; }
50% { opacity: 0.22; }
}
/* Reveal-on-load (used in heroes) */
.reveal { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.r1 { animation-delay: 0.1s; }
.r2 { animation-delay: 0.2s; }
.r3 { animation-delay: 0.35s; }
.r4 { animation-delay: 0.5s; }
.r5 { animation-delay: 0.65s; }
/* ================================================================
5. SCROLL REVEAL (.sr)
================================================================ */
.sr {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.sr.visible {
opacity: 1;
transform: translateY(0);
}
/* ================================================================
6. HERO (dark, full-viewport — shared skeleton)
================================================================
Every page hero uses the same structure:
Page-specific background treatments go in page CSS.
================================================================ */
.hero {
min-height: 100vh;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 80px var(--gutter);
background: var(--bg-dark);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
/* Shared hero eyebrow (cases, perspectives) */
.hero-eyebrow {
font-size: 10px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--dark-text-faint);
margin-bottom: 28px;
}
/* Hero title lines (index uses .hero-name-line, all pages share this) */
.hero-name-line,
.hero-title {
display: block;
font-family: var(--ff-serif);
font-weight: 400;
font-size: clamp(38px, 5.5vw, 66px);
color: var(--dark-text-primary);
line-height: 1.18;
letter-spacing: 0.5px;
}
.hero-name-accent,
.hero-title-accent {
color: var(--dark-text-secondary);
}
.hero-rule {
width: 40px;
height: 1px;
margin: 28px auto;
background: rgba(184, 196, 208, 0.35);
transform-origin: center;
animation: growCenter 0.6s 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
transform: scaleX(0);
}
.hero-tagline {
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: rgba(210, 218, 226, 0.85);
max-width: 460px;
margin: 0 auto;
letter-spacing: 0.2px;
}
/* Index-specific: hero-name wrapper spacing */
.hero-name {
margin-bottom: 32px;
}
/* Index hero meta line */
.hero-meta {
font-size: 10px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dark-text-muted);
padding-top: 28px;
border-top: 1px solid var(--dark-border);
}
/* Hero background image layer (index) */
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
/* Hero geometric shapes layer (cases) */
.hero-shapes {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-shapes svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Hero chart layer (perspectives) */
.hero-chart {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-chart svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Radial vignette — used by cases & perspectives */
.hero--vignette::after,
.hero-vignette::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(ellipse 65% 55% at 50% 50%, transparent 0%, var(--bg-dark) 100%);
pointer-events: none;
}
/* ================================================================
7. SECTION PRIMITIVES
================================================================ */
/* Horizontal rule (full-width divider) */
.section-rule {
width: 100%;
height: 1px;
background: var(--light-rule);
}
/* Eyebrow label */
.section-eyebrow {
font-size: 9px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--eyebrow-color);
margin-bottom: 12px;
opacity: 0.4;
}
/* Section heading */
.section-heading {
font-family: var(--ff-serif);
font-weight: 400;
font-size: clamp(28px, 3.5vw, 42px);
color: var(--text-heading);
line-height: 1.2;
margin-bottom: 20px;
}
/* Section description (cases uses this) */
.section-desc {
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: var(--text-muted);
max-width: 560px;
margin-bottom: 48px;
}
/* Standard content container */
.content-section {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ================================================================
8. LIGHT SECTION WRAPPER
================================================================ */
.light-sections {
background: var(--bg-warm);
}
/* ================================================================
9. DARK SECTION WRAPPER
================================================================
Overrides section primitives for dark backgrounds.
Applied via wrapper: .explore-wrap, .cta-wrap, or any
container with a dark bg.
================================================================ */
.dark-section,
.explore-wrap,
.cta-wrap {
background: var(--bg-dark);
}
.dark-section .section-eyebrow,
.explore-wrap .section-eyebrow,
.cta-wrap .section-eyebrow {
color: var(--dark-text-faint);
opacity: 1;
}
.dark-section .section-heading,
.explore-wrap .section-heading,
.cta-wrap .section-heading {
color: var(--dark-text-primary);
}
.dark-section .section-rule,
.explore-wrap .section-rule,
.cta-wrap .section-rule {
background: var(--dark-rule);
}
/* ================================================================
10. EXPLORE / CTA GRID CARDS
================================================================
Used on index.html's "Explore QPCA" section. Reusable
pattern for any 2-col dark card grid.
================================================================ */
.explore-section,
.cta-section {
max-width: var(--max-width);
margin: 0 auto;
padding: 80px var(--gutter) 100px;
}
.cta-section {
text-align: center;
}
.cta-text {
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: rgba(184, 196, 208, 0.5);
max-width: 480px;
margin: 0 auto;
}
.explore-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.explore-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 36px 32px;
min-height: 180px;
background: transparent;
border: none;
border-bottom: 1px solid var(--dark-border);
text-decoration: none;
transition: background 0.35s;
}
.explore-card:nth-child(odd) {
border-right: 1px solid var(--dark-border);
padding-left: 0;
}
.explore-card:nth-child(even) {
padding-right: 0;
}
.explore-card:nth-child(-n+2) {
border-top: 1px solid var(--dark-border);
}
.explore-card:hover {
background: rgba(184, 196, 208, 0.03);
}
.explore-eyebrow {
font-size: 9px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(184, 196, 208, 0.3);
margin-bottom: 16px;
transition: color 0.3s;
}
.explore-card:hover .explore-eyebrow {
color: rgba(184, 196, 208, 0.5);
}
.explore-title {
font-family: var(--ff-serif);
font-size: 20px;
font-weight: 500;
color: #E0E4E8;
line-height: 1.35;
margin-bottom: 8px;
transition: color 0.3s;
}
.explore-card:hover .explore-title {
color: #fff;
}
.explore-desc {
font-size: 13px;
font-weight: 300;
line-height: 1.7;
color: rgba(184, 196, 208, 0.45);
max-width: 420px;
flex: 1;
}
.explore-arrow {
display: flex;
align-items: center;
gap: 8px;
margin-top: 24px;
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(184, 196, 208, 0.25);
transition: color 0.3s, gap 0.3s;
}
.explore-arrow svg {
width: 14px;
height: 14px;
transition: transform 0.3s;
}
.explore-card:hover .explore-arrow {
color: rgba(184, 196, 208, 0.6);
}
.explore-card:hover .explore-arrow svg {
transform: translateX(3px);
}
/* ================================================================
11. CATEGORY TAGS
================================================================
Shared across perspectives and cases for inline badges.
================================================================ */
.cat-tag {
display: inline-block;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
}
/* Perspectives categories */
.cat-tag.mca { color: #2C5F7E; background: rgba(44, 95, 126, 0.07); }
.cat-tag.ci { color: #5A4A7E; background: rgba(90, 74, 126, 0.07); }
.cat-tag.ssi { color: #7E5A2C; background: rgba(126, 90, 44, 0.07); }
.cat-tag.cc { color: #2C7E4A; background: rgba(44, 126, 74, 0.07); }
/* Cases type badges (same pattern, namespaced) */
.case-type {
display: inline-block;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
}
.case-type--restructuring { color: #7E5A2C; background: rgba(126, 90, 44, 0.07); }
.case-type--underwriting { color: #2C5F7E; background: rgba(44, 95, 126, 0.07); }
.case-type--distressed { color: #A85A4A; background: rgba(168, 90, 74, 0.07); }
.case-type--lbo { color: #2C7E4A; background: rgba(44, 126, 74, 0.07); }
.case-type--nav { color: #5A2C7E; background: rgba(90, 44, 126, 0.07); }
.case-type--infrastructure { color: #4A6E7E; background: rgba(74, 110, 126, 0.07); }
/* Timeline type badges (index) */
.tl-type {
display: inline-block;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
margin-bottom: 14px;
}
.tl-type--article { color: #2C5F7E; background: rgba(44, 95, 126, 0.07); }
.tl-type--case { color: #7E5A2C; background: rgba(126, 90, 44, 0.07); }
.tl-type--event { color: #2C7E4A; background: rgba(44, 126, 74, 0.07); }
/* Shared meta tags */
.author-tag {
font-size: 12px;
font-weight: 400;
color: rgba(26, 58, 92, 0.35);
}
.date-tag {
font-size: 12px;
font-weight: 400;
color: var(--text-faint);
}
/* ================================================================
12. RESPONSIVE BREAKPOINTS
================================================================ */
@media (max-width: 768px) {
.hero {
padding: 80px var(--gutter-mobile);
}
.content-section {
padding: 0 var(--gutter-mobile);
}
.explore-section,
.cta-section {
padding: 60px var(--gutter-mobile) 72px;
}
.explore-grid {
grid-template-columns: 1fr;
}
.explore-card:nth-child(odd) {
border-right: none;
padding-left: 0;
}
.explore-card:nth-child(n+2) {
border-top: none;
}
}