/*
=============================================================================
HOLLY LINCOLN — PORTFOLIO STYLESHEET
assets/css/styles.css
=============================================================================
This is the ONE shared stylesheet for the entire site.
Every HTML page links to this file with:
(adjust the path with ../ if the HTML file is in a subfolder)
TABLE OF CONTENTS
-----------------
1. Design Tokens ............ CSS custom properties (colours, type, spacing)
2. Base Reset ............... Box model, body defaults, scroll behaviour
3. Typography ............... Font imports, scale, prose defaults
4. Layout Utilities ......... Container, section spacing, grid helpers
5. Navigation ............... Fixed top nav, logo, links, mobile menu
6. Buttons .................. Primary, secondary, icon-circle button styles
7. Tags / Badges ............ Small category labels used on cards
8. Cards .................... Work cards, writing cards, shared card base
9. Hero Section ............. Homepage and page-level hero layouts
10. Track Record of Impact ... Stat row with large numbers
11. Selected Work Grid ....... Homepage 3-up project card grid
12. About Preview ............ Short homepage about block
13. Work Experience ........... Timeline-style experience section
14. Case Study Pages .......... Deep-dive layout: sidebar + prose
15. Writings Page ............. Writing card grid
16. About Page ................ Full about layout
17. Key Capabilities .......... Skill/competency grid
18. Footer / Contact .......... Dark footer with email, links
19. Scrollbar ................. Custom scrollbar styling
20. Utility Classes ........... Visually hidden, image placeholder, etc.
21. Responsive Overrides ...... Mobile-first breakpoint adjustments
=============================================================================
*/
/* =============================================================================
1. DESIGN TOKENS
These variables are the single source of truth for every colour,
font, spacing value, and transition used across the site.
Change a value here once and it updates everywhere.
============================================================================= */
:root {
/* --- Colours --- */
/* Background tones — warm off-whites, not pure white */
--color-base: #FAF9F6; /* Main page background */
--color-surface: #FFFFFF; /* Cards, elevated panels */
--color-surface-alt: #F4EFE6; /* Subtle section tint (Selected Work bg) */
--color-surface-soft: #FDFBF7; /* Very subtle cream, case study prose bg */
/* Accent — the coral/terracotta signature colour */
--color-accent: #D85C32; /* Primary accent: buttons, highlights, numbers */
--color-accent-light: #FDF2EE; /* Accent tint: tag backgrounds, card corners */
--color-accent-dark: #C2512B; /* Hover state for accent buttons */
/* Text */
--color-text-main: #2C2A29; /* Primary body and heading text */
--color-text-muted: #6B6865; /* Secondary text, labels, captions */
--color-text-light: #9B9895; /* Placeholder text, very subtle labels */
/* Borders */
--color-border: #E8E4DB; /* Default border for cards, dividers */
--color-border-strong: #D1CCC4; /* Slightly stronger borders */
/* Footer / dark areas */
--color-dark: #2C2A29; /* Footer background (same as text-main) */
--color-dark-text: #FFFFFF; /* Text on dark backgrounds */
--color-dark-muted: rgba(255, 255, 255, 0.60); /* Muted text on dark */
--color-dark-border: rgba(255, 255, 255, 0.10); /* Borders on dark bg */
/* Decorative gradients — used for card placeholder backgrounds */
--gradient-coral: linear-gradient(135deg, #FCECE8 0%, #EAE5D9 100%);
--gradient-sage: linear-gradient(135deg, #EDF1EC 0%, #F5F2EA 100%);
--gradient-ochre: linear-gradient(135deg, #F8F1EB 0%, #FDFBF7 100%);
--gradient-slate: linear-gradient(135deg, #EEF0F4 0%, #F4F2EE 100%);
--gradient-dust: linear-gradient(135deg, #F2EAE0 0%, #EDE5DA 100%);
--gradient-mist: linear-gradient(135deg, #E8EDF2 0%, #EFF2F6 100%);
/* --- Typography --- */
/* Font families — loaded from Google Fonts in each HTML */
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
/* Type scale */
--text-xs: 0.75rem; /* 12px — labels, tags, captions */
--text-sm: 0.875rem; /* 14px — card body, secondary text */
--text-base: 1rem; /* 16px — default body */
--text-lg: 1.125rem; /* 18px — lead paragraph */
--text-xl: 1.25rem; /* 20px — small headings, impact numbers */
--text-2xl: 1.5rem; /* 24px — card titles */
--text-3xl: 1.875rem; /* 30px — section sub-headings */
--text-4xl: 2.25rem; /* 36px — section headings (mobile) */
--text-5xl: 3rem; /* 48px — section headings (desktop) */
--text-6xl: 3.75rem; /* 60px — page hero sub-heading */
--text-hero: 5.5rem; /* 88px — main hero headline (desktop) */
/* Line heights */
--leading-tight: 1.1;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
/* --- Spacing --- */
/* Used for section vertical padding */
--space-section: 6rem; /* 96px — standard section padding */
--space-section-lg: 8rem; /* 128px — generous section padding */
/* Max widths */
--max-width: 80rem; /* 1280px — main container */
--max-width-prose: 42rem; /* 672px — comfortable reading width */
/* Horizontal page padding */
--page-pad-x: 1.5rem; /* 24px — mobile */
--page-pad-x-lg: 3rem; /* 48px — desktop */
/* --- Borders & Radii --- */
--radius-sm: 0.5rem; /* 8px — small tags, chips */
--radius-md: 1rem; /* 16px — buttons, small panels */
--radius-lg: 1.5rem; /* 24px — cards */
--radius-xl: 2rem; /* 32px — large cards */
--radius-full: 9999px; /* Fully rounded (pills) */
/* --- Shadows --- */
--shadow-sm: 0 2px 8px rgba(44, 42, 41, 0.04);
--shadow-md: 0 8px 30px rgba(44, 42, 41, 0.06);
--shadow-lg: 0 20px 40px rgba(44, 42, 41, 0.08);
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.04);
/* --- Transitions --- */
--transition-fast: 150ms ease;
--transition-base: 300ms ease;
--transition-slow: 500ms ease;
--transition-expo: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* =============================================================================
2. BASE RESET
Normalises browser defaults. Nothing visual here — just foundations.
============================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
/* Smooth scroll when clicking anchor links */
scroll-behavior: smooth;
/* Prevent content jumping when scrollbar appears */
overflow-y: scroll;
}
body {
background-color: var(--color-base);
color: var(--color-text-main);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
/* Crisp text rendering on Mac/iOS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
/* Text selection colour — matches the accent palette */
::selection {
background-color: var(--color-accent-light);
color: var(--color-accent);
}
/* =============================================================================
3. TYPOGRAPHY
Font pairing: Playfair Display (headings/display) + Inter (body/UI)
Both loaded from Google Fonts. Add this to every HTML :
============================================================================= */
/* Headings — serif by default */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 500;
line-height: var(--leading-tight);
color: var(--color-text-main);
text-wrap: balance; /* Prevents awkward last-word wrapping */
}
/* Body / UI text — sans-serif */
p, li, label, span {
font-family: var(--font-sans);
}
/* Body paragraphs — comfortable leading and colour */
p {
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
}
/* Lead paragraph — used for section intros */
.text-lead {
font-size: var(--text-lg);
font-weight: 300;
color: var(--color-text-muted);
max-width: var(--max-width-prose);
line-height: var(--leading-relaxed);
}
/* Eyebrow label — small uppercase label above section headings */
.eyebrow {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
display: block;
margin-bottom: 0.75rem;
}
/* Serif italic — used for pull quotes and display accents */
.text-display-italic {
font-style: italic;
color: var(--color-text-muted);
}
/* Pull quote block — inside case studies */
.pull-quote {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-style: italic;
color: var(--color-text-main);
text-align: center;
text-wrap: balance;
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem 2.5rem;
margin: 2.5rem 0;
}
/* =============================================================================
4. LAYOUT UTILITIES
============================================================================= */
/* Main content container — centred, max-width, horizontal padding */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-pad-x);
}
@media (min-width: 1024px) {
.container {
padding-inline: var(--page-pad-x-lg);
}
}
/* Standard section vertical rhythm */
.section {
padding-block: var(--space-section);
}
.section--lg {
padding-block: var(--space-section-lg);
}
/* Light background sections (e.g. Selected Work) */
.section--alt {
background-color: var(--color-surface-alt);
}
/* White background sections */
.section--white {
background-color: var(--color-surface);
}
/* Dividing border top/bottom */
.section--bordered {
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* Basic grid — used for card grids throughout */
.grid-3 {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* Flex row that stacks on mobile */
.flex-row {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 768px) {
.flex-row {
flex-direction: row;
align-items: center;
}
}
/* Section header — title left, optional CTA right */
.section-header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
.section-header {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.section-header__title {
font-size: var(--text-4xl);
}
@media (min-width: 1024px) {
.section-header__title {
font-size: var(--text-5xl);
}
}
.section-header__lead {
color: var(--color-text-muted);
font-size: var(--text-lg);
max-width: 36rem;
margin-top: 0.75rem;
}
/* =============================================================================
5. NAVIGATION
Fixed top nav with frosted glass background.
The same HTML block is copied into every page.
============================================================================= */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* Frosted glass effect */
background-color: rgba(250, 249, 246, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(232, 228, 219, 0.5);
transition: box-shadow var(--transition-base);
}
.nav__inner {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-pad-x);
height: 5rem; /* 80px nav height */
display: flex;
align-items: center;
justify-content: space-between;
}
@media (min-width: 1024px) {
.nav__inner {
padding-inline: var(--page-pad-x-lg);
}
}
/* Logo mark — HL. in serif */
.nav__logo {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-text-main);
transition: opacity var(--transition-fast);
}
.nav__logo:hover {
opacity: 0.7;
}
.nav__logo-dot {
color: var(--color-accent);
}
/* Desktop nav links */
.nav__links {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 768px) {
.nav__links {
display: flex;
}
}
.nav__link {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
.nav__link:hover,
.nav__link--active {
color: var(--color-text-main);
}
/* "Let's Talk" CTA button in nav */
.nav__cta {
display: none;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
border-radius: var(--radius-full);
background-color: var(--color-text-main);
color: white;
font-size: var(--text-sm);
font-weight: 500;
transition: background-color var(--transition-base);
}
@media (min-width: 768px) {
.nav__cta {
display: flex;
}
}
.nav__cta:hover {
background-color: var(--color-accent);
}
/* Hamburger — visible on mobile only */
.nav__hamburger {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--color-text-main);
padding: 0.5rem;
}
@media (min-width: 768px) {
.nav__hamburger {
display: none;
}
}
/* Mobile menu — hidden by default, toggled with JS class */
.nav__mobile-menu {
display: none;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--color-border);
background-color: var(--color-base);
padding-bottom: 1rem;
}
.nav__mobile-menu.is-open {
display: flex;
}
.nav__mobile-link {
display: block;
padding: 0.875rem var(--page-pad-x);
font-size: var(--text-base);
font-weight: 500;
color: var(--color-text-muted);
border-bottom: 1px solid var(--color-border);
transition: color var(--transition-fast);
}
.nav__mobile-link:hover {
color: var(--color-text-main);
}
/* Offset page content so it doesn't sit behind the fixed nav */
.page-offset {
padding-top: 5rem; /* Same as nav height */
}
/* =============================================================================
6. BUTTONS
============================================================================= */
/* Base button styles — shared by all button variants */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: 500;
line-height: 1;
cursor: pointer;
border: none;
text-decoration: none;
transition: all var(--transition-base);
white-space: nowrap;
}
/* Primary — dark background, white text */
.btn--primary {
background-color: var(--color-text-main);
color: white;
}
.btn--primary:hover {
background-color: var(--color-accent);
}
/* Accent — coral background */
.btn--accent {
background-color: var(--color-accent);
color: white;
box-shadow: 0 4px 20px rgba(216, 92, 50, 0.2);
}
.btn--accent:hover {
background-color: var(--color-accent-dark);
}
/* Secondary — outlined */
.btn--secondary {
background-color: transparent;
color: var(--color-text-main);
border: 1px solid var(--color-border);
}
.btn--secondary:hover {
border-color: var(--color-text-main);
}
/* Small variant */
.btn--sm {
padding: 0.625rem 1.25rem;
font-size: var(--text-sm);
}
/* Icon circle — arrow button used on cards */
.btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-text-main);
transition: all var(--transition-base);
flex-shrink: 0;
}
/* Arrow icon inside button — hover nudge */
.btn svg,
.btn-icon svg {
transition: transform var(--transition-base);
}
.btn:hover svg {
transform: translateX(3px);
}
/* =============================================================================
7. TAGS / BADGES
Small category labels — used on project cards and case study headers
============================================================================= */
.tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 500;
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
white-space: nowrap;
}
/* Accent-coloured tag variant */
.tag--accent {
background-color: var(--color-accent-light);
color: var(--color-accent);
}
/* Dark tag variant */
.tag--dark {
background-color: var(--color-text-main);
color: white;
}
/* Tag row wrapper */
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* =============================================================================
8. CARDS
Used for work projects and writing articles.
Cards are elements that are fully clickable.
============================================================================= */
/* Base card — all cards start here */
.card {
display: flex;
flex-direction: column;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
transition:
box-shadow var(--transition-expo),
transform var(--transition-expo);
text-decoration: none;
color: inherit;
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
/* Card image area — placeholder until real images are added */
.card__image {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Card body padding */
.card__body {
padding: 1.5rem 1.75rem 2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card__tags {
margin-bottom: 1rem;
}
/* Card title — serif */
.card__title {
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: 500;
color: var(--color-text-main);
margin-bottom: 0.75rem;
transition: color var(--transition-base);
}
.card:hover .card__title {
color: var(--color-accent);
}
/* Card description */
.card__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
flex-grow: 1;
/* Clamp to 2 lines to keep grid height consistent */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 1.5rem;
}
/* Card footer — impact metric + arrow */
.card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.card__impact-label {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-light);
margin-bottom: 0.25rem;
}
.card__impact-value {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--color-text-main);
}
/* Arrow icon on card — changes on hover */
.card:hover .btn-icon {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: white;
}
/* --- Placeholder Abstract Visuals ---
These are CSS-only placeholder images used in card image areas
until real project screenshots are added.
Each project gets a unique background colour and abstract shape.
Replace the entire .card__image content with an ![]()
tag when ready. */
/* Placeholder base */
.placeholder-visual {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Per-project placeholder colours — matches the warm editorial palette */
.placeholder--coral { background: var(--gradient-coral); }
.placeholder--sage { background: var(--gradient-sage); }
.placeholder--ochre { background: var(--gradient-ochre); }
.placeholder--slate { background: var(--gradient-slate); }
.placeholder--dust { background: var(--gradient-dust); }
.placeholder--mist { background: var(--gradient-mist); }
/* Abstract shape inside placeholder */
.placeholder-shape {
width: 70%;
height: 70%;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 0.75rem;
opacity: 0.8;
transition: transform var(--transition-slow);
}
.card:hover .placeholder-shape {
transform: scale(1.05);
}
.placeholder-shape__block {
border-radius: 0.75rem;
background-color: rgba(255, 255, 255, 0.5);
}
.placeholder-shape__accent {
border-radius: 0.75rem;
background-color: rgba(216, 92, 50, 0.15);
}
/* =============================================================================
9. HERO SECTION
============================================================================= */
.hero {
position: relative;
padding-top: 10rem; /* Clears fixed nav + generous breathing room */
padding-bottom: 5rem;
overflow: hidden;
}
@media (min-width: 1024px) {
.hero {
padding-top: 13rem;
padding-bottom: 8rem;
}
}
/* Soft ambient gradient blobs behind the hero */
.hero::before {
content: '';
position: absolute;
top: -10%;
right: -5%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(253, 242, 238, 0.8) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -20%;
left: -10%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(244, 239, 230, 0.7) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero__inner {
position: relative;
z-index: 1;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-pad-x);
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: end;
}
@media (min-width: 1024px) {
.hero__inner {
grid-template-columns: 2fr 1fr;
padding-inline: var(--page-pad-x-lg);
}
}
/* Location / status badge */
.hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.875rem;
border-radius: var(--radius-full);
background-color: var(--color-accent-light);
color: var(--color-accent);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.75rem;
}
/* Animated pulse dot */
.hero__badge-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-accent);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* Main headline */
.hero__headline {
font-family: var(--font-serif);
font-size: clamp(3rem, 7vw, var(--text-hero));
font-weight: 500;
line-height: var(--leading-tight);
letter-spacing: -0.02em;
color: var(--color-text-main);
margin-bottom: 1.25rem;
text-wrap: balance;
}
.hero__headline-italic {
font-style: italic;
color: var(--color-text-muted);
}
/* Sub-headline */
.hero__subhead {
font-size: var(--text-lg);
font-weight: 300;
color: var(--color-text-muted);
max-width: 42rem;
line-height: var(--leading-relaxed);
margin-bottom: 2.5rem;
}
/* Hero CTA button row */
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
/* Hero stat cards — small impact numbers on the right side */
.hero__stats {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero__stat-card {
position: relative;
background-color: var(--color-surface);
border: 1px solid rgba(255,255,255,0.5);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* Decorative corner accent on stat card */
.hero__stat-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 5rem;
height: 5rem;
background-color: var(--color-accent-light);
border-bottom-left-radius: 100%;
transition: transform var(--transition-slow);
z-index: 0;
}
.hero__stat-card:hover::after {
transform: scale(1.1);
}
.hero__stat-number {
font-family: var(--font-serif);
font-size: var(--text-3xl);
color: var(--color-accent);
margin-bottom: 0.25rem;
position: relative;
z-index: 1;
}
.hero__stat-number--dark {
color: var(--color-text-main);
}
.hero__stat-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
position: relative;
z-index: 1;
}
/* =============================================================================
10. TRACK RECORD OF IMPACT
A bordered row of 3–5 large numbers. From design-14dd7047.
============================================================================= */
.impact {
background-color: var(--color-surface);
}
.impact__inner {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-pad-x);
padding-block: 4rem;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
.impact__inner {
padding-inline: var(--page-pad-x-lg);
}
}
.impact__label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-light);
margin-bottom: 2.5rem;
text-align: center;
}
@media (min-width: 768px) {
.impact__label {
text-align: left;
}
}
.impact__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
text-align: center;
}
@media (min-width: 768px) {
.impact__grid {
grid-template-columns: repeat(3, 1fr);
text-align: left;
/* Vertical dividers between columns */
column-gap: 0;
}
}
.impact__item {
padding: 0 2rem;
}
/* Left-most item — no left padding */
.impact__item:first-child {
padding-left: 0;
}
/* Right-most item — no right padding */
.impact__item:last-child {
padding-right: 0;
}
/* Divider between items on desktop */
@media (min-width: 768px) {
.impact__item + .impact__item {
border-left: 1px solid var(--color-border);
}
}
.impact__number {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 500;
color: var(--color-accent);
line-height: 1;
margin-bottom: 0.75rem;
}
.impact__number--dark {
color: var(--color-text-main);
}
.impact__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
.impact__desc strong {
color: var(--color-text-main);
}
/* =============================================================================
11. SELECTED WORK GRID (Homepage)
3-up card grid on the homepage.
The same .card styles from section 8 apply here.
============================================================================= */
.work-grid {
/* Uses .grid-3 from layout utilities */
}
/* "View All Work" link — right-aligned in section header */
.work-link {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-accent);
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color var(--transition-base);
white-space: nowrap;
flex-shrink: 0;
}
.work-link:hover {
color: var(--color-text-main);
}
.work-link svg {
transition: transform var(--transition-base);
}
.work-link:hover svg {
transform: translateX(3px);
}
/* =============================================================================
12. ABOUT PREVIEW (Homepage)
A brief 2-column about section on the homepage linking to about.html.
============================================================================= */
.about-preview {
/* Uses .section--white and .container */
}
.about-preview__inner {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.about-preview__inner {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
}
.about-preview__image {
aspect-ratio: 1;
border-radius: var(--radius-xl);
overflow: hidden;
background-color: var(--color-surface-alt);
/* Image placeholder — replace with ![]()
*/
max-width: 28rem;
}
.about-preview__content h2 {
font-size: var(--text-4xl);
margin-bottom: 1.25rem;
}
.about-preview__content p {
margin-bottom: 1rem;
}
.about-preview__themes {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.75rem 0;
}
/* =============================================================================
13. WORK EXPERIENCE
Timeline-style list of roles. Pulled from design-dbf879e7.
============================================================================= */
.experience {
/* Uses .section and .container */
}
.experience__list {
display: flex;
flex-direction: column;
gap: 0;
}
/* Each role row */
.experience__item {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem 2rem;
padding: 2rem 0;
border-bottom: 1px solid var(--color-border);
}
.experience__item:first-child {
border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.experience__item {
grid-template-columns: 1fr 2fr auto;
align-items: start;
gap: 1rem 2.5rem;
}
}
/* Company / role */
.experience__company {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--color-text-main);
}
.experience__role {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: 0.25rem;
}
/* Description */
.experience__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
/* Date range */
.experience__date {
font-size: var(--text-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-light);
white-space: nowrap;
}
.experience__date--accent {
color: var(--color-accent);
}
/* =============================================================================
14. CASE STUDY PAGES
Layout: sticky sidebar metadata + scrolling prose content.
Sourced from design-14dd7047.
============================================================================= */
/* Case study hero — full-width coloured banner */
.cs-hero {
background-color: var(--color-surface-soft);
padding-top: 8rem;
padding-bottom: 5rem;
border-bottom: 1px solid var(--color-border);
}
.cs-hero__eyebrow {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1.25rem;
}
.cs-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 500;
line-height: var(--leading-tight);
letter-spacing: -0.02em;
color: var(--color-text-main);
max-width: 50rem;
margin-bottom: 1.5rem;
}
.cs-hero__summary {
font-size: var(--text-lg);
font-weight: 300;
color: var(--color-text-muted);
max-width: 40rem;
line-height: var(--leading-relaxed);
margin-bottom: 2rem;
}
/* Meta strip — role, year, tags */
.cs-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.cs-hero__meta-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cs-hero__meta-label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-light);
}
.cs-hero__meta-value {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-main);
}
/* Case study image banner — wide placeholder */
.cs-banner {
width: 100%;
aspect-ratio: 21 / 9;
background-color: var(--color-surface-alt);
border-radius: var(--radius-xl);
overflow: hidden;
margin-block: 3rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
/* Replace background-image with a real ![]()
when visuals are ready */
}
/* TLDR / summary card */
.cs-tldr {
background-color: var(--color-accent-light);
border: 1px solid rgba(216, 92, 50, 0.12);
border-radius: var(--radius-lg);
padding: 1.75rem 2rem;
margin-bottom: 3rem;
}
.cs-tldr__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: 0.75rem;
}
.cs-tldr__text {
font-size: var(--text-base);
color: var(--color-text-main);
line-height: var(--leading-relaxed);
}
/* Main case study layout: sidebar + prose */
.cs-body {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-pad-x);
padding-block: var(--space-section);
}
@media (min-width: 1024px) {
.cs-body {
grid-template-columns: 14rem 1fr;
gap: 5rem;
padding-inline: var(--page-pad-x-lg);
}
}
/* Sidebar — sticky on desktop */
.cs-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.cs-sidebar {
position: sticky;
top: 7rem; /* Clears fixed nav */
align-self: start;
}
}
.cs-sidebar__block {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.cs-sidebar__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-light);
}
.cs-sidebar__value {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-main);
}
/* Outcome highlight box in sidebar */
.cs-sidebar__outcome {
background-color: var(--color-accent-light);
border: 1px solid rgba(216, 92, 50, 0.1);
border-radius: var(--radius-md);
padding: 1.25rem;
}
.cs-sidebar__outcome-label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
margin-bottom: 0.5rem;
}
.cs-sidebar__outcome-number {
font-family: var(--font-serif);
font-size: var(--text-3xl);
color: var(--color-text-main);
line-height: 1;
margin-bottom: 0.25rem;
}
.cs-sidebar__outcome-desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* Prose content — right column */
.cs-prose {
max-width: var(--max-width-prose);
}
.cs-prose h3 {
font-size: var(--text-2xl);
margin-top: 3rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-border);
}
.cs-prose h3:first-child {
margin-top: 0;
}
.cs-prose p {
margin-bottom: 1.25rem;
}
.cs-prose ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
/* Numbered list item — custom styled */
.cs-prose__list-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.cs-prose__list-number {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var(--color-accent-light);
color: var(--color-accent);
font-size: var(--text-xs);
font-weight: 600;
flex-shrink: 0;
margin-top: 2px;
}
/* Image placeholder in case study body */
.cs-image-slot {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--color-surface-alt);
border-radius: var(--radius-lg);
border: 2px dashed var(--color-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-block: 2.5rem;
color: var(--color-text-light);
font-size: var(--text-sm);
/* Remove this and replace with an ![]()
tag when visuals are ready */
}
.cs-image-slot::before {
content: '[ image ]';
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Filename label below placeholder — for your reference when adding images */
.cs-image-slot[data-filename]::after {
content: attr(data-filename);
font-size: var(--text-xs);
color: var(--color-text-light);
font-family: monospace;
}
/* =============================================================================
15. WRITINGS PAGE
Same visual language as the work grid — card-based layout.
============================================================================= */
.writings-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.writings-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.writings-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Writing card — same base as .card but slightly different internal layout */
.writing-card {
display: flex;
flex-direction: column;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
transition:
box-shadow var(--transition-expo),
transform var(--transition-expo);
text-decoration: none;
color: inherit;
}
.writing-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.writing-card__thumb {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--color-surface-alt);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Writing card thumbnail placeholder */
.writing-card__thumb--placeholder {
background: var(--gradient-sage);
}
.writing-card__body {
padding: 1.5rem 1.75rem 2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.writing-card__title {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--color-text-main);
line-height: var(--leading-snug);
margin-bottom: 0.75rem;
transition: color var(--transition-base);
}
.writing-card:hover .writing-card__title {
color: var(--color-accent);
}
.writing-card__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
flex-grow: 1;
margin-bottom: 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.writing-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
font-size: var(--text-xs);
color: var(--color-text-light);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* External link indicator */
.writing-card__external {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--color-text-muted);
font-size: var(--text-xs);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
/* =============================================================================
16. ABOUT PAGE
Full-page about layout. Sourced from design-ea1dda45.
============================================================================= */
.about-page__hero {
padding-top: 10rem;
padding-bottom: 5rem;
background: radial-gradient(circle at 50% 0%, rgba(253, 242, 238, 0.6) 0%, var(--color-base) 60%);
}
.about-page__intro {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: start;
}
@media (min-width: 1024px) {
.about-page__intro {
grid-template-columns: 1.5fr 1fr;
gap: 6rem;
}
}
.about-page__photo {
width: 100%;
max-width: 22rem;
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
overflow: hidden;
background-color: var(--color-surface-alt);
/* Filename to use: assets/images/holly/holly-portrait.jpg */
}
.about-page__section-title {
font-size: var(--text-3xl);
margin-bottom: 1.5rem;
}
.about-page__approach {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.about-page__approach {
grid-template-columns: repeat(2, 1fr);
}
}
/* Approach / principle card */
.about-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.about-card__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-accent-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
margin-bottom: 1rem;
}
.about-card__title {
font-size: var(--text-base);
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 0.5rem;
font-family: var(--font-sans);
}
.about-card__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
/* =============================================================================
17. KEY CAPABILITIES
Skills grid. Sourced from design-dbf879e7, section after experience.
============================================================================= */
.capabilities {
/* Uses .section--alt and .container */
}
.capabilities__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.capabilities__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.capabilities__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Capability card */
.cap-card {
background-color: var(--color-surface);
border: 1px solid rgba(255,255,255,0.8);
border-radius: 1.5rem;
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base);
}
.cap-card:hover {
box-shadow: var(--shadow-md);
}
.cap-card__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-accent-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
margin-bottom: 1.5rem;
}
.cap-card__title {
font-family: var(--font-serif);
font-size: var(--text-xl);
margin-bottom: 1rem;
}
.cap-card__list {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.cap-card__list-item {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.cap-card__list-item::before {
content: '';
display: block;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: var(--color-border-strong);
flex-shrink: 0;
}
/* Tools row — full-width, 3-column tools list */
.tools-row {
background-color: var(--color-surface-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 768px) {
.tools-row {
flex-direction: row;
gap: 0;
}
}
.tools-row__column {
flex: 1;
padding-inline: 1.5rem;
}
.tools-row__column:first-child {
padding-left: 0;
}
.tools-row__column:last-child {
padding-right: 0;
}
@media (min-width: 768px) {
.tools-row__column + .tools-row__column {
border-left: 1px solid var(--color-border);
}
}
.tools-row__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-light);
margin-bottom: 0.75rem;
}
.tools-row__text {
font-size: var(--text-sm);
color: var(--color-text-main);
line-height: var(--leading-relaxed);
}
/* =============================================================================
18. FOOTER / CONTACT
Dark background footer. Used at the bottom of every page.
============================================================================= */
.footer {
background-color: var(--color-dark);
color: var(--color-dark-text);
padding-block: var(--space-section-lg);
position: relative;
overflow: hidden;
}
/* Subtle radial glow behind the headline */
.footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 50rem;
height: 100%;
background: radial-gradient(ellipse at top, rgba(255,255,255,0.04) 0%, transparent 70%);
pointer-events: none;
}
.footer__inner {
position: relative;
z-index: 1;
max-width: 50rem;
margin-inline: auto;
padding-inline: var(--page-pad-x);
text-align: center;
}
.footer__headline {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 500;
line-height: var(--leading-tight);
color: var(--color-dark-text);
margin-bottom: 1.5rem;
}
.footer__subtext {
font-size: var(--text-lg);
color: var(--color-dark-muted);
font-weight: 300;
max-width: 36rem;
margin-inline: auto;
margin-bottom: 3rem;
line-height: var(--leading-relaxed);
}
.footer__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 5rem;
}
@media (min-width: 640px) {
.footer__actions {
flex-direction: row;
justify-content: center;
}
}
/* Email button in footer */
.footer__email-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
border-radius: var(--radius-full);
background-color: var(--color-accent);
color: white;
font-size: var(--text-base);
font-weight: 500;
transition: background-color var(--transition-base);
box-shadow: 0 4px 20px rgba(216, 92, 50, 0.25);
}
.footer__email-btn:hover {
background-color: var(--color-accent-dark);
}
/* Bottom bar — copyright + links */
.footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--color-dark-border);
font-size: var(--text-sm);
color: var(--color-dark-muted);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.footer__link {
color: var(--color-dark-muted);
font-size: var(--text-sm);
transition: color var(--transition-fast);
}
.footer__link:hover {
color: var(--color-dark-text);
}
.footer__divider {
color: rgba(255,255,255,0.15);
}
/* =============================================================================
19. SCROLLBAR
Custom scrollbar to match the warm palette (desktop browsers only).
============================================================================= */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-base);
}
::-webkit-scrollbar-thumb {
background-color: var(--color-border-strong);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-text-light);
}
/* =============================================================================
20. UTILITY CLASSES
============================================================================= */
/* Screen-reader only — visually hidden but accessible */
.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;
}
/* Simple fade-in animation — add class when element enters viewport */
.fade-in-up {
animation: fadeInUp 0.7s ease-out both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(1.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered delay helpers — apply to children */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
/* Text wrap balance — prevents orphan words */
.text-balance {
text-wrap: balance;
}
/* Muted text colour */
.text-muted {
color: var(--color-text-muted);
}
/* Accent colour */
.text-accent {
color: var(--color-accent);
}
/* Full-width image that fills its container */
.img-fill {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Divider line */
.divider {
border: none;
border-top: 1px solid var(--color-border);
margin-block: 3rem;
}
/* =============================================================================
21. RESPONSIVE OVERRIDES
Minor adjustments for smaller screens not covered inline above.
============================================================================= */
/* Stack hero stats below headline on mobile */
@media (max-width: 767px) {
.hero__stats {
flex-direction: row;
flex-wrap: wrap;
}
.hero__stat-card {
flex: 1;
min-width: 10rem;
}
}
/* Tighter section padding on mobile */
@media (max-width: 767px) {
.section {
padding-block: 4rem;
}
.section--lg {
padding-block: 5rem;
}
}
/* Smaller hero headline on very small screens */
@media (max-width: 400px) {
.hero__headline {
font-size: 2.5rem;
}
}
/* =============================================================================
HOMEPAGE COMPONENTS (hl- prefix)
All classes used by index.html. Add to bottom of styles.css.
============================================================================= */
/* --- Shared tokens used inline --- */
/* (colours already in :root — these components reference var(--color-*)) */
/* --- Container --- */
.hl-container {
max-width: 80rem;
margin-inline: auto;
padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .hl-container { padding-inline: 3rem; } }
/* --- Eyebrow label --- */
.hl-eyebrow {
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: 0.75rem;
}
/* --- Buttons --- */
.hl-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
border-radius: 9999px;
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.hl-btn svg { transition: transform 0.3s ease; }
.hl-btn:hover svg { transform: translateX(3px); }
.hl-btn--primary {
background-color: var(--color-text-main);
color: #fff;
}
.hl-btn--primary:hover { background-color: var(--color-accent); }
.hl-btn--secondary {
background: transparent;
color: var(--color-text-main);
border: 1px solid var(--color-border);
}
.hl-btn--secondary:hover { border-color: var(--color-text-main); }
/* =============================================================================
NAVIGATION
============================================================================= */
.hl-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
background: rgba(250, 249, 246, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(232, 228, 219, 0.5);
}
.hl-nav__inner {
max-width: 80rem;
margin-inline: auto;
padding-inline: 1.5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (min-width: 1024px) { .hl-nav__inner { padding-inline: 3rem; } }
.hl-nav__logo {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-text-main);
text-decoration: none;
transition: opacity 0.2s;
}
.hl-nav__logo:hover { opacity: 0.7; }
.hl-nav__logo-dot { color: var(--color-accent); }
.hl-nav__links {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 768px) { .hl-nav__links { display: flex; } }
.hl-nav__link {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s;
}
.hl-nav__link:hover { color: var(--color-text-main); }
.hl-nav__cta {
display: none;
align-items: center;
justify-content: center;
padding: 0.5625rem 1.25rem;
border-radius: 9999px;
background-color: var(--color-text-main);
color: #fff;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s;
}
@media (min-width: 768px) { .hl-nav__cta { display: flex; } }
.hl-nav__cta:hover { background-color: var(--color-accent); }
.hl-nav__hamburger {
display: flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
color: var(--color-text-main);
padding: 0.5rem;
}
@media (min-width: 768px) { .hl-nav__hamburger { display: none; } }
.hl-nav__mobile {
display: none;
flex-direction: column;
border-top: 1px solid var(--color-border);
background-color: var(--color-base);
padding: 0.5rem 1.5rem 1rem;
}
.hl-nav__mobile.is-open { display: flex; }
.hl-nav__mobile-link {
padding: 0.625rem 0;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
transition: color 0.2s;
}
.hl-nav__mobile-link:last-child { border-bottom: none; }
.hl-nav__mobile-link:hover { color: var(--color-text-main); }
/* =============================================================================
HERO
============================================================================= */
.hl-hero {
position: relative;
padding-top: 7rem;
padding-bottom: 3.5rem;
overflow: hidden;
}
@media (min-width: 1024px) {
.hl-hero { padding-top: 9rem; padding-bottom: 5rem; }
}
/* Ambient gradient blobs */
.hl-hero__blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hl-hero__blob--tr {
top: -10%; right: -5%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255, 234, 227, 0.65) 0%, transparent 70%);
}
.hl-hero__blob--bl {
bottom: -20%; left: -10%;
width: 650px; height: 650px;
background: radial-gradient(circle, rgba(244, 239, 230, 0.75) 0%, transparent 70%);
}
/* 8/12 + 4/12 grid */
.hl-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: end;
}
@media (min-width: 1024px) {
.hl-hero__grid { grid-template-columns: 8fr 4fr; gap: 3rem; }
}
/* Location badge */
.hl-hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
background-color: var(--color-accent-light);
color: var(--color-accent);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem; /* reduced from 2rem */
}
.hl-hero__badge-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-accent);
animation: hl-pulse 2s ease-in-out infinite;
}
@keyframes hl-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Headline — scaled down vs previous version */
.hl-hero__h1 {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5.5vw, 4rem); /* was 5.5rem */
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 500;
color: var(--color-text-main);
margin-bottom: 1.25rem;
text-wrap: balance;
}
.hl-hero__h1-italic {
color: var(--color-text-muted);
font-style: italic;
font-family: var(--font-serif); /* override global span font-family */
font-weight: 500;
}
.hl-hero__sub {
font-size: 1rem;
color: var(--color-text-muted);
font-weight: 300;
line-height: 1.7;
max-width: 38rem;
margin-bottom: 2rem;
}
.hl-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
}
/* Metric cards column */
.hl-hero__cards {
display: flex;
flex-direction: column;
gap: 0.625rem; /* tighter than before */
padding-bottom: 0.5rem;
}
/* Individual metric card — clickable link */
.hl-metric {
display: block;
position: relative;
width: 100%; /* ensure identical width across all cards */
height: 8.25rem; /* equal height across all cards */
padding: 1.125rem 1.375rem;
border-radius: 1rem;
background-color: #fff;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.3s;
}
.hl-metric:hover {
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
border-color: rgba(216, 92, 50, 0.12);
}
.hl-metric__blob {
position: absolute;
top: 0; right: 0;
width: 5rem; height: 5rem;
border-bottom-left-radius: 100%;
z-index: 0;
transition: transform 0.5s ease;
}
.hl-metric:hover .hl-metric__blob { transform: scale(1.15); }
.hl-metric__blob--accent { background-color: var(--color-accent-light); }
.hl-metric__blob--alt { background-color: var(--color-surface-alt); }
.hl-metric__body { position: relative; z-index: 1; }
.hl-metric__number {
font-family: var(--font-serif);
font-size: 1.875rem;
font-weight: 500;
line-height: 1.1;
margin-bottom: 0.2rem;
}
.hl-metric__number--accent { color: var(--color-accent); }
.hl-metric__number--dark { color: var(--color-text-main); }
.hl-metric__desc {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.4;
}
/* Subtle arrow hint — fades in on hover */
.hl-metric__arrow {
position: absolute;
bottom: 1.05rem;
right: 1.2rem;
opacity: 0;
color: var(--color-accent);
transform: translateX(-4px);
transition: opacity 0.3s, transform 0.3s;
z-index: 1;
}
.hl-metric:hover .hl-metric__arrow {
opacity: 1;
transform: translateX(0);
}
/* Keep card typography inside the fixed height */
.hl-metric__body {
height: 100%;
padding-right: 1.75rem; /* room for the arrow */
}
@media (max-width: 480px) {
.hl-metric {
height: 7.75rem;
padding: 1.05rem 1.2rem;
}
}
/* =============================================================================
SELECTED WORK SECTION
============================================================================= */
.hl-work {
padding-block: 4rem; /* tighter than standard 6rem */
background-color: var(--color-surface-alt);
}
@media (min-width: 1024px) { .hl-work { padding-block: 5rem; } }
.hl-work__header {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
.hl-work__header {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.hl-work__heading {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-text-main);
}
.hl-work__view-all {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.2s;
}
.hl-work__view-all:hover { color: var(--color-accent); }
.hl-work__view-all svg { transition: transform 0.3s; }
.hl-work__view-all:hover svg { transform: translateX(3px); }
/* 3-column card grid */
.hl-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) { .hl-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hl-cards-grid { grid-template-columns: repeat(3, 1fr); } }
/* Card wrapper — the tag */
.hl-card {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
/* Inner white panel with rounded corners */
.hl-card__inner {
border-radius: 1.5rem;
background-color: #fff;
padding: 0.375rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.03);
border: 1px solid rgba(232, 228, 219, 0.5);
height: 100%;
display: flex;
flex-direction: column;
transition: box-shadow 0.5s ease;
}
.hl-card:hover .hl-card__inner {
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
}
/* Thumbnail — abstract visual or real image */
.hl-card__thumb {
aspect-ratio: 4 / 3;
border-radius: 1.125rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Inner abstract shape — scales on hover */
.hl-card__shape {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.7s ease;
}
.hl-card:hover .hl-card__shape { transform: scale(1.04); }
/* Real thumbnail image */
.hl-card__thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
}
.hl-card:hover .hl-card__thumb-img { transform: scale(1.04); }
/* =============================================================================
THUMBNAIL ILLUSTRATION SYSTEM (hl-thumb)
Class-based framework for all six project card illustrations.
Colour accents flow from the .hl-thumb--[colour] modifier on the root element.
No inline styles required in HTML.
============================================================================= */
/* ── Base wrapper (sits inside .hl-card__shape) ─────────────────────────── */
.hl-thumb {
width: 78%;
height: 78%;
display: flex;
opacity: 0.9;
}
/* ── Shared structural atoms ─────────────────────────────────────────────── */
.hl-thumb__bar {
width: 100%;
height: 0.28rem;
border-radius: 9999px;
background: rgba(107,104,101,0.17);
flex-shrink: 0;
}
.hl-thumb__bar--med { width: 62%; }
.hl-thumb__bar--short { width: 40%; }
.hl-thumb__bar--masked { background: rgba(44,42,41,0.22); }
.hl-thumb__dot {
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
flex-shrink: 0;
background: rgba(107,104,101,0.16);
}
.hl-thumb__token {
width: 1rem;
height: 1rem;
border-radius: 0.25rem;
flex-shrink: 0;
background: rgba(107,104,101,0.12);
}
.hl-thumb__btn-bar {
width: 100%;
height: 0.45rem;
border-radius: 9999px;
flex-shrink: 0;
background: rgba(107,104,101,0.20);
}
.hl-thumb__row {
display: flex;
align-items: center;
gap: 0.35rem;
}
/* ── Colour accent systems ───────────────────────────────────────────────── */
/* Blue (Booking.com) */
.hl-thumb--blue .hl-thumb__bar--accent { background: rgba(59,130,246,0.55); }
.hl-thumb--blue .hl-thumb__dot--accent { background: rgba(59,130,246,0.45); }
.hl-thumb--blue .hl-thumb__token--accent { background: rgba(59,130,246,0.30); }
.hl-thumb--blue .hl-thumb__star { background: rgba(59,130,246,0.45); }
/* Red (WSU / Accordant) */
.hl-thumb--red .hl-thumb__bar--accent { background: rgba(216,92,50,0.65); }
.hl-thumb--red .hl-thumb__dot--accent { background: rgba(216,92,50,0.55); }
.hl-thumb--red .hl-thumb__bar--highlight { background: rgba(216,92,50,0.25); height: 0.42rem; }
.hl-thumb--red .hl-thumb__btn-bar { background: rgba(216,92,50,0.58); }
/* Green (Tinka) */
.hl-thumb--green .hl-thumb__bar--accent { background: rgba(56,142,60,0.60); }
.hl-thumb--green .hl-thumb__dot--accent { background: rgba(56,142,60,0.50); }
.hl-thumb--green .hl-thumb__card-chip { background: rgba(56,142,60,0.22); }
.hl-thumb--green .hl-thumb__nav-dot--accent { background: rgba(56,142,60,0.55); }
/* Yellow (Decathlon) */
.hl-thumb--yellow .hl-thumb__bar--accent { background: rgba(240,180,41,0.65); }
.hl-thumb--yellow .hl-thumb__dot--accent { background: rgba(240,180,41,0.55); }
.hl-thumb--yellow .hl-thumb__resource--accent { background: rgba(240,180,41,0.12); }
.hl-thumb--yellow .hl-thumb__rail { background: rgba(240,180,41,0.35); }
/* Purple (CRO) */
.hl-thumb--purple .hl-thumb__bar--accent { background: rgba(124,58,237,0.60); }
.hl-thumb--purple .hl-thumb__dot--accent { background: rgba(124,58,237,0.50); }
.hl-thumb--purple .hl-thumb__variant--winner { background: rgba(124,58,237,0.09); border-top: 2px solid rgba(124,58,237,0.50); }
.hl-thumb--purple .hl-thumb__uplift { background: rgba(124,58,237,0.55); }
/* ── 1. PORTAL — central system board → downstream output cards ──────────
Layout: column — large system board on top, stem connector, 3 outputs below
─────────────────────────────────────────────────────────────────────────── */
.hl-thumb--portal {
flex-direction: column;
gap: 0.38rem;
}
.hl-thumb--portal .hl-thumb__board {
flex: 1;
background: #fff;
border-radius: 0.7rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 0.5rem 0.55rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.hl-thumb--portal .hl-thumb__token-row {
display: flex;
gap: 0.28rem;
margin-bottom: 0.08rem;
}
.hl-thumb--portal .hl-thumb__stem {
height: 0.5rem;
position: relative;
flex-shrink: 0;
}
.hl-thumb--portal .hl-thumb__stem::after {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: rgba(59,130,246,0.28);
}
.hl-thumb--portal .hl-thumb__outputs {
display: flex;
gap: 0.28rem;
flex-shrink: 0;
}
.hl-thumb--portal .hl-thumb__output {
flex: 1;
background: #fff;
border-radius: 0.45rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
border-top: 2px solid rgba(59,130,246,0.28);
padding: 0.3rem 0.35rem;
display: flex;
flex-direction: column;
gap: 0.22rem;
}
/* ── 2. WSU — left-to-right personalised journey (email → landing → form) ─
Layout: horizontal — 3 stage cards with arrow connectors between
─────────────────────────────────────────────────────────────────────────── */
.hl-thumb--wsu {
flex-direction: row;
align-items: stretch;
width: 90%;
height: 80%;
}
.hl-thumb--wsu .hl-thumb__stage {
flex: 1;
background: #fff;
border-radius: 0.5rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
padding: 0.4rem 0.38rem;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.hl-thumb--wsu .hl-thumb__arrow-r {
width: 0.55rem;
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
}
.hl-thumb--wsu .hl-thumb__arrow-r::after {
content: '';
width: 100%;
height: 1px;
background: rgba(216,92,50,0.40);
position: absolute;
}
.hl-thumb--wsu .hl-thumb__field {
width: 100%;
height: 0.42rem;
border-radius: 0.18rem;
background: rgba(107,104,101,0.10);
border: 1px solid rgba(107,104,101,0.13);
flex-shrink: 0;
}
/* ── 3. TINKA — before / after product transformation ────────────────────
Layout: narrow left panel (before) | thin divider | wider right panel (after)
─────────────────────────────────────────────────────────────────────────── */
.hl-thumb--tinka {
flex-direction: row;
align-items: stretch;
gap: 0.35rem;
width: 84%;
height: 80%;
}
.hl-thumb--tinka .hl-thumb__before {
width: 34%;
flex-shrink: 0;
background: rgba(56,142,60,0.09);
border-radius: 0.6rem;
padding: 0.45rem 0.4rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.hl-thumb--tinka .hl-thumb__divider-v {
width: 1px;
align-self: stretch;
background: rgba(56,142,60,0.28);
border-radius: 9999px;
flex-shrink: 0;
}
.hl-thumb--tinka .hl-thumb__after {
flex: 1;
background: #fff;
border-radius: 0.6rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 0.45rem 0.4rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.hl-thumb__card-chip {
width: 100%;
height: 1.1rem;
border-radius: 0.3rem;
background: rgba(107,104,101,0.10);
flex-shrink: 0;
}
.hl-thumb__nav-row {
display: flex;
gap: 0.28rem;
align-items: center;
}
.hl-thumb__nav-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: rgba(107,104,101,0.15);
flex-shrink: 0;
}
/* ── 4. MYSTERY DEAL — masked offer card + revealed trust module ──────────
Layout: column — large dominant offer card, small trust/rating reveal below
─────────────────────────────────────────────────────────────────────────── */
.hl-thumb--mystery {
flex-direction: column;
gap: 0.32rem;
width: 84%;
height: 84%;
}
.hl-thumb--mystery .hl-thumb__offer {
flex: 1;
background: #fff;
border-radius: 0.7rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 0.4rem 0.45rem 0.45rem;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.hl-thumb__mask-block {
flex: 1;
border-radius: 0.28rem;
background: rgba(107,104,101,0.12);
position: relative;
overflow: hidden;
}
.hl-thumb__mask-block::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 3px,
rgba(107,104,101,0.07) 3px,
rgba(107,104,101,0.07) 4px
);
}
.hl-thumb--mystery .hl-thumb__trust {
background: #fff;
border-radius: 0.5rem;
box-shadow: 0 1px 5px rgba(0,0,0,0.06);
padding: 0.3rem 0.42rem;
display: flex;
flex-direction: column;
gap: 0.22rem;
flex-shrink: 0;
}
.hl-thumb__stars {
display: flex;
gap: 0.2rem;
align-items: center;
}
.hl-thumb__star {
width: 0.48rem;
height: 0.48rem;
border-radius: 50%;
background: rgba(107,104,101,0.16);
flex-shrink: 0;
}
.hl-thumb__star--muted { background: rgba(107,104,101,0.09); }
/* ── 5. DECATHLON AI — central knowledge hub → radiating resource cards ───
Layout: column — hub card on top, rail connector, 4 small resource cards
─────────────────────────────────────────────────────────────────────────── */
.hl-thumb--decathlon {
flex-direction: column;
gap: 0.32rem;
width: 84%;
height: 80%;
}
.hl-thumb--decathlon .hl-thumb__hub {
background: #fff;
border-radius: 0.65rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 0.45rem 0.55rem;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.hl-thumb__rail {
height: 1px;
background: rgba(107,104,101,0.14);
flex-shrink: 0;
}
.hl-thumb--decathlon .hl-thumb__resources {
display: flex;
gap: 0.25rem;
flex: 1;
}
.hl-thumb__resource {
flex: 1;
background: #fff;
border-radius: 0.42rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
padding: 0.28rem 0.3rem;
display: flex;
flex-direction: column;
gap: 0.22rem;
}
/* ── 6. CRO — variant comparison with winner signal and uplift ───────────
Layout: horizontal — 3 cards aligned to bottom, winner is tallest + accented
─────────────────────────────────────────────────────────────────────────── */
.hl-thumb--cro {
flex-direction: row;
align-items: flex-end;
gap: 0.32rem;
width: 86%;
height: 82%;
}
.hl-thumb__variant {
flex: 1;
background: #fff;
border-radius: 0.5rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
padding: 0.4rem 0.38rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hl-thumb__variant--a { height: 68%; }
.hl-thumb__variant--b { height: 80%; }
.hl-thumb__variant--winner { height: 100%; }
.hl-thumb__uplift {
width: 100%;
height: 0.32rem;
border-radius: 9999px;
margin-top: auto;
flex-shrink: 0;
background: rgba(107,104,101,0.18);
}
/* Card body */
.hl-card__body {
padding: 1.125rem 1.375rem 1.625rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Tags row */
.hl-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 0.875rem;
}
/* Small brand/client line above each card title (selected work) */
.hl-card__subtitle {
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: 0.35rem;
}
.hl-tag {
padding: 0.2rem 0.625rem;
border-radius: 9999px;
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
font-size: 0.7rem;
font-weight: 500;
}
.hl-card__title {
font-family: var(--font-serif);
font-size: 1.3125rem;
font-weight: 500;
color: var(--color-text-main);
line-height: 1.25;
margin-bottom: 0.625rem;
transition: color 0.3s;
}
.hl-card:hover .hl-card__title { color: var(--color-accent); }
.hl-card__desc {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.65;
flex-grow: 1;
margin-bottom: 1.125rem;
}
/* Selected work: clamp description to 2 lines so tags/title align */
.hl-work .hl-card__desc,
.hl-work-grid-section .hl-card__desc {
flex-grow: 0;
margin-bottom: 0.875rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(0.8125rem * 1.65 * 2); /* keeps cards aligned even if text is short */
}
/* Card footer */
.hl-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.875rem;
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.hl-card__metric-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin-bottom: 0.2rem;
}
.hl-card__metric-value {
font-family: var(--font-serif);
font-size: 1.0625rem;
font-weight: 500;
color: var(--color-text-main);
}
/* Arrow circle */
.hl-card__arrow {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-text-main);
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.hl-card:hover .hl-card__arrow {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
/* =============================================================================
ABOUT PREVIEW
============================================================================= */
.hl-about {
padding-block: 5rem;
background-color: var(--color-base);
overflow: hidden;
}
.hl-about__grid {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
align-items: center;
}
@media (min-width: 1024px) {
.hl-about__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
/* Portrait column */
.hl-about__portrait-col {
order: 2;
display: flex;
justify-content: center;
}
@media (min-width: 1024px) { .hl-about__portrait-col { order: 1; } }
.hl-about__portrait {
aspect-ratio: 3 / 4;
width: 100%;
max-width: 26rem;
border-radius: 2rem;
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 20px 60px rgba(44, 42, 41, 0.10);
position: relative;
background: linear-gradient(145deg, #EAE5D9 0%, #F4EFE6 100%);
display: flex;
align-items: center;
justify-content: center;
}
.hl-about__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
position: absolute;
inset: 0;
}
.hl-about__portrait-fallback {
position: absolute;
color: #C8C2B8;
}
/* Rotated decorative badge */
.hl-about__badge {
position: absolute;
bottom: -1rem;
right: -1rem;
width: 8rem;
height: 8rem;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.hl-about__badge-inner {
width: 7rem;
height: 7rem;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
transform: rotate(-12deg);
}
.hl-about__badge-text {
font-family: var(--font-serif);
font-size: 0.875rem;
line-height: 1.3;
color: var(--color-accent);
font-style: italic;
}
/* Text column */
.hl-about__text {
order: 1;
}
@media (min-width: 1024px) { .hl-about__text { order: 2; } }
.hl-about__heading {
font-family: var(--font-serif);
font-size: clamp(1.875rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.15;
color: var(--color-text-main);
margin-bottom: 1.75rem;
}
.hl-about__lead {
font-size: 1.0625rem;
font-weight: 300;
color: var(--color-text-main);
line-height: 1.7;
margin-bottom: 1rem;
}
.hl-about__body {
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.75;
margin-bottom: 2rem;
}
/* =============================================================================
FOOTER
============================================================================= */
.hl-footer {
background-color: var(--color-text-main);
color: #fff;
padding-block: 7rem;
position: relative;
overflow: hidden;
}
.hl-footer__glow {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 100%; max-width: 50rem; height: 100%;
background: radial-gradient(ellipse at top, rgba(255,255,255,0.04) 0%, transparent 70%);
pointer-events: none;
}
.hl-footer__inner {
position: relative;
z-index: 1;
max-width: 50rem;
margin-inline: auto;
padding-inline: 1.5rem;
text-align: center;
}
.hl-footer__headline {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 5.5vw, 4rem);
font-weight: 500;
line-height: 1.1;
color: #fff;
margin-bottom: 1.25rem;
}
.hl-footer__sub {
font-size: 1.0625rem;
color: rgba(255, 255, 255, 0.60);
font-weight: 300;
max-width: 34rem;
margin-inline: auto;
margin-bottom: 2.75rem;
line-height: 1.7;
}
.hl-footer__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 5rem;
}
@media (min-width: 640px) {
.hl-footer__actions { flex-direction: row; justify-content: center; }
}
.hl-footer__email-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
border-radius: 9999px;
background-color: var(--color-accent);
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
box-shadow: 0 4px 20px rgba(216, 92, 50, 0.25);
transition: background-color 0.3s;
}
.hl-footer__email-btn:hover { background-color: #C2512B; }
.hl-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.10);
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.40);
}
@media (min-width: 768px) {
.hl-footer__bottom { flex-direction: row; justify-content: space-between; }
}
.hl-footer__links {
display: flex;
align-items: center;
gap: 1.25rem;
}
.hl-footer__links a {
color: rgba(255, 255, 255, 0.40);
text-decoration: none;
font-size: 0.8125rem;
transition: color 0.2s;
}
.hl-footer__links a:hover { color: #fff; }
.hl-footer__divider { color: rgba(255, 255, 255, 0.15); }
/* --- Hero: full viewport height variant --- */
/* Makes the hero section exactly one viewport tall */
.hl-hero--full {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 5rem; /* clears the 80px nav */
padding-bottom: 3rem;
}
.hl-hero--full .hl-container {
width: 100%;
}
/* Larger headline — matches the reference screenshot proportions */
.hl-hero__h1--full {
font-size: clamp(3.5rem, 7.5vw, 6rem);
margin-bottom: 1.5rem;
}
/* Slightly larger subtext to stay in proportion with the bigger headline */
.hl-hero__sub--full {
font-size: 1.125rem;
max-width: 40rem;
margin-bottom: 2.25rem;
}
/* --- About portrait: clean image-only variant --- */
/* Removes the overflow:hidden issue that could clip a non-absolute image,
and ensures the portrait renders cleanly without any overlay elements */
.hl-about__portrait--clean {
display: block; /* no flex centering needed — image fills it */
background: none; /* no gradient placeholder */
}
.hl-about__portrait--clean img {
position: static; /* override the absolute positioning from the base class */
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* --- Work page: active nav link state --- */
/* Marks the current page link in the nav */
.hl-nav__link--active {
color: var(--color-text-main);
}
/* --- Work page: intro section --- */
.hl-work-intro {
padding-top: 8rem; /* clears fixed nav with generous breathing room */
padding-bottom: 3.5rem;
border-bottom: 1px solid var(--color-border);
}
.hl-work-intro__inner {
max-width: 44rem; /* keeps the intro copy from running too wide */
}
.hl-work-intro__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text-main);
margin-bottom: 1.25rem;
text-wrap: balance;
}
.hl-work-intro__title-italic {
font-style: italic;
color: var(--color-text-muted);
}
.hl-work-intro__desc {
font-size: 1.0625rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.75;
max-width: 38rem;
}
/* --- Work page: grid section wrapper --- */
.hl-work-grid-section {
padding-block: 4.5rem;
}
/* =============================================================================
CASE STUDY PAGES v2 (cs2- prefix)
Used by design-portal.html and future case studies following this template.
Structure reference: mystery-deal.html
Visual reference: design-14dd7047
============================================================================= */
/* --- Shared tokens shorthand --- */
/* (all colours reference existing :root variables) */
/* =============================================================================
SHARED UTILITIES
============================================================================= */
/* Eyebrow / section kicker */
.cs2-eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 1rem;
}
/* Tags row in hero */
.cs2-hero__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cs2-tag {
display: inline-flex;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.cs2-tag--accent {
background-color: var(--color-accent-light);
color: var(--color-accent);
}
.cs2-tag:not(.cs2-tag--accent) {
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
}
/* Buttons */
.cs2-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.cs2-btn svg { transition: transform 0.3s ease; }
.cs2-btn--primary {
background-color: var(--color-text-main);
color: #fff;
}
.cs2-btn--primary:hover {
background-color: var(--color-accent);
}
.cs2-btn--primary:hover svg {
transform: translateY(2px);
}
.cs2-btn--self-start {
align-self: flex-start;
}
@media (min-width: 1024px) {
.cs2-btn--self-start { align-self: auto; }
}
/* Back link */
.cs2-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s;
}
.cs2-back:hover { color: var(--color-accent); }
.cs2-back svg { transition: transform 0.2s; }
.cs2-back:hover svg { transform: translateX(-3px); }
/* Image labels (placeholder filename references — remove with real images) */
.cs2-image-label {
font-size: 0.6875rem;
font-family: monospace;
color: var(--color-text-light);
letter-spacing: 0.02em;
text-align: center;
padding: 0.5rem;
}
/* Image slot placeholder */
.cs2-image-slot {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--color-surface-alt);
border: 2px dashed var(--color-border);
border-radius: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.375rem;
margin-block: 2.5rem;
padding: 1.5rem;
text-align: center;
}
.cs2-image-slot__filename {
font-size: 0.6875rem;
font-family: monospace;
color: var(--color-text-light);
}
.cs2-image-slot__caption {
font-size: 0.8125rem;
color: var(--color-text-light);
font-style: italic;
}
/* =============================================================================
SPLIT LAYOUT — sidebar + prose (shared by overview + deep-dive)
============================================================================= */
.cs2-split {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: start;
}
@media (min-width: 1024px) {
.cs2-split {
grid-template-columns: 1fr 2fr;
gap: 5rem;
}
}
/* Sidebar */
.cs2-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.cs2-sidebar {
position: sticky;
top: 6.5rem;
}
}
.cs2-sidebar__block {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.cs2-sidebar__label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-light);
}
.cs2-sidebar__value {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-main);
line-height: 1.55;
}
.cs2-sidebar__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.cs2-sidebar__list li {
font-size: 0.875rem;
color: var(--color-text-main);
}
/* Highlight card (key output) */
.cs2-highlight-card {
background-color: var(--color-accent-light);
border: 1px solid rgba(216, 92, 50, 0.12);
border-radius: 1rem;
padding: 1.25rem;
}
.cs2-highlight-card__number {
font-family: var(--font-serif);
font-size: 2.25rem;
font-weight: 500;
color: var(--color-accent);
line-height: 1;
margin-bottom: 0.375rem;
}
.cs2-highlight-card__desc {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.55;
}
/* Insight card (what made it hard) */
.cs2-insight-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 1rem;
padding: 1.125rem;
}
.cs2-insight-card__body {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.65;
}
/* =============================================================================
PROSE CONTENT
============================================================================= */
.cs2-prose { }
.cs2-prose__section {
margin-bottom: 3.5rem;
}
.cs2-prose__section:last-child {
margin-bottom: 0;
}
.cs2-section-eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 1rem;
}
.cs2-prose__heading {
font-family: var(--font-serif);
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
margin-bottom: 1.5rem;
text-wrap: balance;
}
.cs2-prose__subheading {
font-family: var(--font-serif);
font-size: 1.625rem;
font-weight: 500;
color: var(--color-text-main);
margin-bottom: 1rem;
line-height: 1.2;
}
.cs2-prose__lead {
font-size: 1.0625rem;
color: var(--color-text-main);
font-weight: 400;
line-height: 1.75;
margin-bottom: 1.125rem;
}
.cs2-prose__body {
font-size: 1rem;
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 1.125rem;
}
.cs2-prose__body:last-child { margin-bottom: 0; }
/* Bullet list — dot + text, matching mystery-deal style */
.cs2-bullets {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.cs2-bullet {
display: flex;
gap: 1rem;
align-items: flex-start;
font-size: 1rem;
color: var(--color-text-muted);
line-height: 1.75;
}
.cs2-bullet__dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: var(--color-accent);
flex-shrink: 0;
margin-top: 0.625rem;
}
.cs2-bullet strong {
color: var(--color-text-main);
font-weight: 500;
}
/* 2×2 card grid — responsibility and deliverable cards */
.cs2-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.875rem;
margin-top: 1.5rem;
}
@media (min-width: 640px) {
.cs2-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
.cs2-card {
border-radius: 1.5rem;
border: 1px solid var(--color-border);
padding: 1.375rem;
background-color: var(--color-base);
}
.cs2-card--white {
background-color: var(--color-surface);
}
.cs2-card__title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 0.5rem;
}
.cs2-card__body {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.65;
}
/* =============================================================================
HERO SECTION
============================================================================= */
.cs2-hero {
position: relative;
padding-top: 9rem;
padding-bottom: 5rem;
background-color: var(--color-base);
overflow: hidden;
}
.cs2-hero__blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.cs2-hero__blob--tr {
top: -10%; right: -5%;
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(255, 234, 227, 0.55) 0%, transparent 70%);
}
.cs2-hero__blob--bl {
bottom: -20%; left: -10%;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(244, 239, 230, 0.70) 0%, transparent 70%);
}
/* ── Hero theme modifiers ──────────────────────────────────────────
Override blob colours per project. Add cs2-hero--[colour] to the
element on each case study page.
─────────────────────────────────────────────────────────────────── */
.cs2-hero--blue .cs2-hero__blob--tr {
background: radial-gradient(circle, rgba(219, 234, 254, 0.62) 0%, transparent 70%);
}
.cs2-hero--blue .cs2-hero__blob--bl {
background: radial-gradient(circle, rgba(239, 246, 255, 0.78) 0%, transparent 70%);
}
.cs2-hero--red .cs2-hero__blob--tr {
background: radial-gradient(circle, rgba(254, 220, 215, 0.62) 0%, transparent 70%);
}
.cs2-hero--red .cs2-hero__blob--bl {
background: radial-gradient(circle, rgba(254, 236, 232, 0.78) 0%, transparent 70%);
}
.cs2-hero--green .cs2-hero__blob--tr {
background: radial-gradient(circle, rgba(209, 243, 220, 0.62) 0%, transparent 70%);
}
.cs2-hero--green .cs2-hero__blob--bl {
background: radial-gradient(circle, rgba(237, 252, 241, 0.78) 0%, transparent 70%);
}
.cs2-hero--yellow .cs2-hero__blob--tr {
background: radial-gradient(circle, rgba(254, 240, 186, 0.65) 0%, transparent 70%);
}
.cs2-hero--yellow .cs2-hero__blob--bl {
background: radial-gradient(circle, rgba(255, 249, 224, 0.80) 0%, transparent 70%);
}
.cs2-hero--purple .cs2-hero__blob--tr {
background: radial-gradient(circle, rgba(233, 225, 255, 0.65) 0%, transparent 70%);
}
.cs2-hero--purple .cs2-hero__blob--bl {
background: radial-gradient(circle, rgba(245, 240, 255, 0.80) 0%, transparent 70%);
}
.cs2-hero__back-row {
margin-bottom: 2rem;
}
/* 7/12 + 5/12 grid matching mystery-deal */
.cs2-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: end;
}
@media (min-width: 1024px) {
.cs2-hero__grid { grid-template-columns: 7fr 5fr; }
}
.cs2-eyebrow.cs2-hero__kicker {
/* handled by .cs2-eyebrow */
}
/* p eyebrow in hero */
p.cs2-eyebrow {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 1rem;
}
.cs2-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.75rem, 6vw, 4.75rem);
font-weight: 500;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--color-text-main);
margin-bottom: 1.5rem;
text-wrap: balance;
}
.cs2-hero__subtitle {
font-size: clamp(1.0625rem, 2vw, 1.375rem);
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.65;
max-width: 36rem;
margin-bottom: 2rem;
text-wrap: balance;
}
.cs2-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
}
/* Hero right-column card */
.cs2-hero__card {
border-radius: 2rem;
background-color: var(--color-surface);
padding: 1rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(232, 228, 219, 0.6);
}
.cs2-hero__image-wrap {
aspect-ratio: 4 / 3;
border-radius: 1.5rem;
background-color: #F5F0E6;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.75rem;
}
/* Solo hero — no right column, copy centred with max-width */
.cs2-hero--solo {
padding-top: 7rem;
padding-bottom: 4.5rem;
}
.cs2-hero--solo .cs2-hero__grid {
grid-template-columns: 1fr;
}
.cs2-hero--solo .cs2-hero__copy {
max-width: 52rem;
}
/* Real image inside the hero card wrap */
.cs2-hero__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Real image inside the wide banner */
.cs2-banner__inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 1.5rem;
}
/* Inline figure — replaces cs2-image-slot placeholders */
.cs2-figure {
margin-block: 2.5rem;
}
.cs2-figure img {
width: 100%;
display: block;
border-radius: 1rem;
border: 1px solid var(--color-border);
}
.cs2-figure__caption {
font-size: 0.8125rem;
color: var(--color-text-light);
font-style: italic;
margin-top: 0.75rem;
text-align: center;
}
/* Video inside a figure — same frame treatment as images */
.cs2-figure video {
width: 100%;
display: block;
border-radius: 1rem;
border: 1px solid var(--color-border);
}
/* Portal document placeholder visual */
.cs2-portal-visual {
display: flex;
align-items: center;
gap: 1rem;
}
.cs2-portal-doc {
background: #fff;
border-radius: 0.875rem;
border: 1px solid var(--color-border);
box-shadow: 0 4px 16px rgba(44,42,41,0.07);
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
overflow: hidden;
}
.cs2-portal-doc--left { width: 5.5rem; height: 8rem; transform: rotate(-7deg); opacity: 0.7; }
.cs2-portal-doc--right { width: 5.5rem; height: 8rem; transform: rotate(7deg); opacity: 0.7; }
.cs2-portal-doc--centre {
width: 7rem;
height: 10.5rem;
z-index: 1;
}
.cs2-portal-doc__bar {
height: 0.4rem;
border-radius: 9999px;
background-color: var(--color-border);
}
.cs2-portal-doc__bar--accent { background-color: rgba(216,92,50,0.3); width: 65%; }
.cs2-portal-doc__bar--soft { background-color: rgba(232,228,219,0.6); }
.cs2-portal-doc__bar--short { width: 45%; }
.cs2-portal-doc__block {
flex-grow: 1;
border-radius: 0.5rem;
background-color: var(--color-surface-alt);
}
.cs2-portal-doc__block--accent {
background-color: var(--color-accent-light);
}
.cs2-portal-doc__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.375rem;
flex-grow: 1;
}
.cs2-portal-doc__grid-cell {
border-radius: 0.375rem;
background-color: var(--color-surface-alt);
}
.cs2-portal-doc__grid-cell--accent {
background-color: rgba(216,92,50,0.18);
}
/* =============================================================================
OVERVIEW SECTION
============================================================================= */
.cs2-overview {
padding-block: 5rem;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* =============================================================================
DEEP DIVE SECTION
============================================================================= */
.cs2-deepdive {
padding-block: 5rem;
background-color: var(--color-surface-alt);
}
.cs2-deepdive__header {
max-width: 48rem;
margin-bottom: 3rem;
}
.cs2-deepdive__heading {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
margin-bottom: 1rem;
text-wrap: balance;
}
.cs2-deepdive__intro {
font-size: 1.0625rem;
color: var(--color-text-muted);
line-height: 1.75;
font-weight: 300;
}
/* Wide banner image area — matching mystery-deal banner */
.cs2-banner {
border-radius: 2rem;
background-color: var(--color-surface);
border: 1px solid rgba(232, 228, 219, 0.6);
padding: 1.25rem 2rem;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
margin-bottom: 3.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.cs2-banner__inner {
width: 100%;
aspect-ratio: 21 / 9;
border-radius: 1.5rem;
background-color: #F5F0E6;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Three rotated document cards inside the banner */
.cs2-banner__doc {
background: #fff;
border-radius: 1.25rem;
border: 1px solid var(--color-border);
box-shadow: 0 8px 24px rgba(44,42,41,0.07);
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.cs2-banner__doc--left { width: 7rem; height: 11rem; transform: rotate(-8deg); opacity: 0.8; }
.cs2-banner__doc--right { width: 7rem; height: 11rem; transform: rotate(8deg); opacity: 0.8; }
.cs2-banner__doc--centre {
width: 9rem;
height: 14rem;
z-index: 1;
}
.cs2-banner__doc-bar {
height: 0.5rem;
border-radius: 9999px;
background-color: var(--color-border);
}
.cs2-banner__doc-bar--accent { background-color: rgba(216,92,50,0.28); width: 65%; }
.cs2-banner__doc-bar--medium { width: 80%; }
.cs2-banner__doc-bar--short { width: 40%; }
.cs2-banner__doc-block {
flex-grow: 1;
border-radius: 0.625rem;
background-color: var(--color-surface-alt);
}
.cs2-banner__doc-block--accent { background-color: rgba(216,92,50,0.14); }
.cs2-banner__doc-block--soft { background-color: rgba(244,239,230,0.8); }
/* =============================================================================
OUTCOME SECTION
============================================================================= */
.cs2-outcome {
padding-block: 4rem 5rem;
background-color: var(--color-surface);
}
.cs2-outcome__grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 1024px) {
.cs2-outcome__grid {
grid-template-columns: 1fr 2fr;
gap: 5rem;
}
}
.cs2-outcome__head { }
.cs2-outcome__heading {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.5vw, 2.875rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
text-wrap: balance;
}
.cs2-outcome__content {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
/* Three stat cards */
.cs2-stats {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.cs2-stats { grid-template-columns: repeat(3, 1fr); }
}
.cs2-stat {
border-radius: 1.5rem;
background-color: var(--color-base);
border: 1px solid var(--color-border);
padding: 1.375rem;
}
.cs2-stat__number {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 500;
color: var(--color-text-main);
margin-bottom: 0.5rem;
line-height: 1;
}
.cs2-stat__number--accent { color: var(--color-accent); }
.cs2-stat__desc {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* Insight cards */
.cs2-insights {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.cs2-insight {
border-radius: 1.5rem;
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
padding: 1.375rem;
}
.cs2-insight__title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 0.5rem;
}
.cs2-insight__body {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.65;
}
/* =============================================================================
NEXT PROJECT SECTION
============================================================================= */
.cs2-next {
padding-block: 4rem 5rem;
background-color: var(--color-surface-alt);
border-top: 1px solid var(--color-border);
}
.cs2-next__card {
border-radius: 2rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.cs2-next__card {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.cs2-next__text {
max-width: 38rem;
}
.cs2-next__heading {
font-family: var(--font-serif);
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
margin-bottom: 0.875rem;
text-wrap: balance;
}
.cs2-next__desc {
font-size: 1rem;
color: var(--color-text-muted);
line-height: 1.7;
}
/* =============================================================================
ABOUT PAGE (abt- prefix)
Used by about.html only. Add to bottom of styles.css.
============================================================================= */
/* --- Shared section utilities --- */
.abt-eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 0.875rem;
}
.abt-section-header {
margin-bottom: 3rem;
max-width: 40rem;
}
/* Row variant — eyebrow/title left, CV link right */
.abt-section-header--row {
max-width: 100%;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (min-width: 768px) {
.abt-section-header--row {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.abt-section-title {
font-family: var(--font-serif);
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
text-wrap: balance;
}
.abt-section-intro {
margin-top: 0.875rem;
font-size: 1rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
}
/* CV link used in Selected Experience header */
.abt-cv-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.2s;
}
.abt-cv-link:hover { color: var(--color-accent); }
/* =============================================================================
1. HERO
============================================================================= */
.abt-hero {
position: relative;
padding-top: 9rem;
padding-bottom: 5rem;
background-color: var(--color-base);
overflow: hidden;
}
/* Ambient blob top-right */
.abt-hero__blob {
position: absolute;
top: -10%;
right: -5%;
width: 560px;
height: 560px;
background: radial-gradient(circle, rgba(255, 234, 227, 0.55) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* 5/12 portrait + 7/12 copy grid */
.abt-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.abt-hero__grid {
grid-template-columns: 5fr 7fr;
gap: 5rem;
}
}
/* Portrait */
.abt-hero__portrait-col {
order: 2;
display: flex;
justify-content: center;
}
@media (min-width: 1024px) {
.abt-hero__portrait-col { order: 1; }
}
.abt-hero__portrait {
width: 100%;
max-width: 22rem;
aspect-ratio: 3 / 4;
border-radius: 2rem;
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 20px 60px rgba(44, 42, 41, 0.10);
background-color: var(--color-surface-alt);
}
.abt-hero__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* Copy column */
.abt-hero__copy {
order: 1;
}
@media (min-width: 1024px) {
.abt-hero__copy { order: 2; }
}
.abt-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text-main);
margin-bottom: 1.5rem;
text-wrap: balance;
}
.abt-hero__title-italic {
font-style: italic;
color: var(--color-text-muted);
}
.abt-hero__lead {
font-size: 1.0625rem;
font-weight: 400;
color: var(--color-text-main);
line-height: 1.75;
margin-bottom: 1rem;
}
.abt-hero__body {
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 2rem;
}
.abt-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
}
/* Secondary button variant for About page (reuses cs2- button classes) */
.cs2-btn--secondary {
background: transparent;
color: var(--color-text-main);
border: 1px solid var(--color-border);
}
.cs2-btn--secondary:hover {
border-color: var(--color-text-main);
}
.cs2-btn--secondary svg { transition: transform 0.3s; }
.cs2-btn--secondary:hover svg { transform: translateX(3px); }
/* =============================================================================
2. HOW I WORK — principles
============================================================================= */
.abt-principles {
padding-block: 5rem;
background-color: var(--color-surface-alt);
}
.abt-principles__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.abt-principles__grid { grid-template-columns: repeat(2, 1fr); }
}
.abt-principle {
background-color: var(--color-surface);
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 8px rgba(44, 42, 41, 0.04);
padding: 2rem;
}
.abt-principle__num {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: var(--color-accent-light);
color: var(--color-accent);
font-family: var(--font-serif);
font-size: 0.9375rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
flex-shrink: 0;
}
.abt-principle__title {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-text-main);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.abt-principle__body {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.75;
}
/* =============================================================================
3. SELECTED EXPERIENCE
============================================================================= */
.abt-experience {
padding-block: 5rem;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.abt-exp-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.abt-exp-grid { grid-template-columns: repeat(2, 1fr); }
}
.abt-exp-card {
border-radius: 1.5rem;
border: 1px solid var(--color-border);
background-color: var(--color-base);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.abt-exp-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.abt-exp-card__company {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-text-main);
line-height: 1.2;
}
.abt-exp-card__role {
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-top: 0.2rem;
}
.abt-exp-card__date {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-accent);
white-space: nowrap;
flex-shrink: 0;
}
.abt-exp-card__context {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.6;
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--color-border);
}
.abt-exp-card__bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.abt-exp-card__bullets li {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.65;
padding-left: 1rem;
position: relative;
}
.abt-exp-card__bullets li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: var(--color-border-strong);
flex-shrink: 0;
}
/* =============================================================================
4. CAPABILITIES
============================================================================= */
.abt-capabilities {
padding-block: 5rem;
background-color: var(--color-surface-alt);
border-top: 1px solid var(--color-border);
}
.abt-cap-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.abt-cap-grid { grid-template-columns: repeat(3, 1fr); }
}
.abt-cap-card {
background-color: var(--color-surface);
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 8px rgba(44, 42, 41, 0.04);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: box-shadow 0.3s;
}
.abt-cap-card:hover {
box-shadow: 0 8px 28px rgba(44, 42, 41, 0.08);
}
.abt-cap-card__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-accent-light);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.abt-cap-card__title {
font-family: var(--font-serif);
font-size: 1.1875rem;
font-weight: 500;
color: var(--color-text-main);
line-height: 1.2;
}
.abt-cap-card__desc {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.75;
}
.abt-cap-card__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-grow: 1;
}
.abt-cap-card__list li {
font-size: 0.8125rem;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 0.5rem;
line-height: 1.5;
}
.abt-cap-card__list li::before {
content: '';
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: var(--color-border-strong);
flex-shrink: 0;
}
/* Tools row at the bottom of each cap card */
.abt-cap-card__tools {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding-top: 0.875rem;
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.abt-tools-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-light);
white-space: nowrap;
flex-shrink: 0;
}
.abt-tools-text {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.5;
}
/* =============================================================================
5. TESTIMONIALS
============================================================================= */
.abt-testimonials {
padding-block: 5rem;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.abt-testi-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.abt-testi-grid { grid-template-columns: repeat(3, 1fr); }
}
.abt-testi {
background-color: var(--color-base);
border: 1px solid var(--color-border);
border-radius: 1.5rem;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
/* Large decorative quotemark */
.abt-testi__mark {
font-family: var(--font-serif);
font-size: 4rem;
line-height: 1;
color: var(--color-accent-light);
position: absolute;
top: 1rem;
left: 1.5rem;
pointer-events: none;
user-select: none;
}
.abt-testi__quote {
font-size: 0.9375rem;
color: var(--color-text-main);
line-height: 1.75;
padding-top: 2rem; /* clears the quotemark */
}
.abt-testi__footer {
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid var(--color-border);
}
.abt-testi__name {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-main);
}
.abt-testi__role {
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-top: 0.125rem;
}
/* =============================================================================
6. OUTSIDE OF WORK
============================================================================= */
.abt-outside {
padding-block: 5rem;
background-color: var(--color-surface-alt);
border-top: 1px solid var(--color-border);
}
.abt-outside__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 768px) {
.abt-outside__grid { grid-template-columns: repeat(4, 1fr); }
}
/* Card */
.abt-outside__card {
border-radius: 1.25rem;
overflow: hidden;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.abt-outside__card:hover {
box-shadow: 0 12px 36px rgba(44, 42, 41, 0.09);
transform: translateY(-3px);
}
/* Image area — tall so the image is the hero */
.abt-outside__image {
aspect-ratio: 3 / 4;
overflow: hidden;
background-color: var(--color-surface-alt);
}
.abt-outside__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s ease;
}
.abt-outside__card:hover .abt-outside__image img {
transform: scale(1.04);
}
/* Label area */
.abt-outside__info {
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.abt-outside__activity {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-main);
}
.abt-outside__location {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.abt-outside__location svg {
flex-shrink: 0;
color: var(--color-accent);
}
/* =============================================================================
7. FINAL CTA
============================================================================= */
.abt-cta {
padding-block: 5rem;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.abt-cta__inner {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
@media (min-width: 1024px) {
.abt-cta__inner {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 4rem;
}
}
.abt-cta__text {
max-width: 40rem;
}
.abt-cta__heading {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-text-main);
margin-bottom: 1rem;
text-wrap: balance;
}
.abt-cta__body {
font-size: 1rem;
color: var(--color-text-muted);
line-height: 1.75;
}
.abt-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
flex-shrink: 0;
}
/* =============================================================================
ABOUT PAGE — UPGRADE: chips, timeline, carousels, image rotation
============================================================================= */
/* Shared chip pill — used in timeline and capabilities */
.abt-chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 2rem;
font-size: 0.75rem;
font-weight: 500;
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
line-height: 1.4;
white-space: nowrap;
}
/* ---- 2. Principles — compact + mobile carousel ---- */
.abt-principle { padding: 1.5rem; }
@media (max-width: 767px) {
.abt-principles__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 1rem;
padding-bottom: 1rem;
scrollbar-width: none;
}
.abt-principles__grid::-webkit-scrollbar { display: none; }
.abt-principle {
flex: 0 0 80%;
scroll-snap-align: start;
}
}
/* ---- 3. Experience Timeline ---- */
.abt-timeline {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: 1.5rem;
overflow: hidden;
background-color: var(--color-base);
}
@media (min-width: 768px) {
.abt-timeline { flex-direction: row; }
}
.abt-timeline__nav {
display: flex;
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--color-border);
}
.abt-timeline__nav::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
.abt-timeline__nav {
flex-direction: column;
overflow-x: visible;
overflow-y: auto;
border-bottom: none;
border-right: 1px solid var(--color-border);
width: 15rem;
flex-shrink: 0;
}
}
.abt-timeline__tab {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 1rem 1.25rem;
background: none;
border: none;
cursor: pointer;
text-align: left;
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: background 0.2s, border-color 0.2s;
flex-shrink: 0;
}
@media (min-width: 768px) {
.abt-timeline__tab {
white-space: normal;
border-bottom: none;
border-right: 2px solid transparent;
margin-bottom: 0;
margin-right: -1px;
padding: 1.25rem 1.5rem;
}
}
.abt-timeline__tab:hover { background-color: var(--color-surface-alt); }
.abt-timeline__tab.is-active { border-bottom-color: var(--color-accent); background-color: var(--color-surface-alt); }
@media (min-width: 768px) {
.abt-timeline__tab.is-active { border-bottom-color: transparent; border-right-color: var(--color-accent); }
}
.abt-timeline__tab-company {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 500;
color: var(--color-text-main);
line-height: 1.2;
}
.abt-timeline__tab-date {
font-size: 0.725rem;
color: var(--color-text-muted);
}
.abt-timeline__panels { flex: 1; min-width: 0; }
.abt-timeline__panel {
padding: 2rem;
animation: panelFadeIn 0.25s ease;
}
.abt-timeline__panel[hidden] { display: none; }
@keyframes panelFadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.abt-timeline__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1rem;
}
.abt-timeline__role {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
color: var(--color-text-main);
}
.abt-timeline__context {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--color-border);
}
.abt-timeline__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* ---- 4. Capabilities — top row, chips, expand ---- */
.abt-cap-card__top {
display: flex;
align-items: center;
gap: 0.875rem;
}
.abt-cap-card__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.abt-cap-card__expand {
border-top: 1px solid var(--color-border);
padding-top: 0.875rem;
margin-top: auto;
}
.abt-cap-card__expand summary {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-accent);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.abt-cap-card__expand summary::-webkit-details-marker { display: none; }
.abt-cap-card__expand summary::after {
content: '+';
font-size: 1.1rem;
line-height: 1;
transition: transform 0.2s;
}
.abt-cap-card__expand[open] summary::after { content: '−'; }
.abt-cap-card__expand p {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.75;
margin-top: 0.75rem;
}
/* ---- 5. Testimonials — tighter + mobile carousel ---- */
.abt-testi {
padding: 1.5rem;
gap: 1rem;
}
.abt-testi__mark {
font-size: 2.5rem;
top: 0.75rem;
left: 1rem;
color: var(--color-border);
}
.abt-testi__quote { padding-top: 1.5rem; }
@media (max-width: 767px) {
.abt-testi-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 1rem;
padding-bottom: 1rem;
scrollbar-width: none;
}
.abt-testi-grid::-webkit-scrollbar { display: none; }
.abt-testi {
flex: 0 0 85%;
scroll-snap-align: start;
}
}
/* ---- 6. Outside of Work — mobile carousel + surfing rotation ---- */
@media (max-width: 767px) {
.abt-outside__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 1rem;
padding-bottom: 1rem;
scrollbar-width: none;
}
.abt-outside__grid::-webkit-scrollbar { display: none; }
.abt-outside__card {
flex: 0 0 72%;
scroll-snap-align: start;
}
}
.abt-outside__img--rotate {
transform: rotate(90deg) scale(1.45);
transform-origin: center;
}
/* =============================================================================
WRITINGS PAGE (wri- prefix)
Used by writings.html only. Add to bottom of styles.css.
============================================================================= */
/* --- Shared utilities --- */
.wri-eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 0.875rem;
}
/* Tag pill */
.wri-tag {
display: inline-flex;
padding: 0.2rem 0.625rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 500;
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
white-space: nowrap;
}
.wri-tag--accent {
background-color: var(--color-accent-light);
color: var(--color-accent);
}
/* Meta items — read time, source */
.wri-read-time,
.wri-source {
font-size: 0.75rem;
color: var(--color-text-light);
font-weight: 500;
}
.wri-source {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.wri-meta-divider {
color: var(--color-border-strong);
font-size: 0.75rem;
}
/* =============================================================================
HERO
============================================================================= */
.wri-hero {
padding-top: 8rem;
padding-bottom: 3.5rem;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-base);
}
.wri-hero__inner {
max-width: 44rem;
}
.wri-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text-main);
margin-bottom: 1rem;
text-wrap: balance;
}
.wri-hero__desc {
font-size: 1.0625rem;
font-weight: 300;
color: var(--color-text-muted);
line-height: 1.7;
max-width: 36rem;
}
/* =============================================================================
FEATURED ARTICLE
============================================================================= */
.wri-featured {
padding-block: 3.5rem;
background-color: var(--color-base);
}
.wri-featured__card {
display: grid;
grid-template-columns: 1fr;
border-radius: 1.75rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.5s ease, transform 0.5s ease;
}
@media (min-width: 768px) {
.wri-featured__card {
grid-template-columns: 2fr 3fr;
}
}
.wri-featured__card:hover {
box-shadow: 0 20px 50px rgba(44, 42, 41, 0.08);
transform: translateY(-3px);
}
/* Left: abstract visual panel */
.wri-featured__visual {
background: linear-gradient(135deg, #FDF2EE 0%, #F5F0E6 100%);
display: flex;
align-items: center;
justify-content: center;
min-height: 14rem;
padding: 2.5rem;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.wri-featured__visual {
min-height: unset;
}
}
.wri-featured__visual-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* SCARF model abstract visual: connected nodes in a row */
.wri-featured__shape {
display: flex;
align-items: center;
gap: 0;
transition: transform 0.6s ease;
}
.wri-featured__card:hover .wri-featured__shape {
transform: scale(1.05);
}
.wri-shape__node {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: var(--color-border-strong);
flex-shrink: 0;
}
.wri-shape__node--accent {
background-color: var(--color-accent);
width: 1.5rem;
height: 1.5rem;
}
.wri-shape__node--soft {
background-color: var(--color-accent-light);
border: 2px solid var(--color-accent);
}
.wri-shape__connector {
height: 2px;
width: 2rem;
background-color: var(--color-border);
flex-shrink: 0;
}
/* Right: article content */
.wri-featured__content {
padding: 2.25rem 2.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
.wri-featured__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.wri-featured__title {
font-family: var(--font-serif);
font-size: clamp(1.375rem, 2.5vw, 1.875rem);
font-weight: 500;
color: var(--color-text-main);
line-height: 1.25;
text-wrap: balance;
transition: color 0.3s;
}
.wri-featured__card:hover .wri-featured__title {
color: var(--color-accent);
}
.wri-featured__summary {
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.75;
max-width: 36rem;
}
.wri-featured__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-main);
margin-top: 0.5rem;
transition: color 0.2s, gap 0.2s;
}
.wri-featured__cta svg {
transition: transform 0.3s;
}
.wri-featured__card:hover .wri-featured__cta {
color: var(--color-accent);
}
.wri-featured__card:hover .wri-featured__cta svg {
transform: translateX(4px);
}
/* =============================================================================
WRITINGS GRID
============================================================================= */
.wri-grid-section {
padding-block: 3rem 5rem;
background-color: var(--color-base);
}
/* Responsive 3-column grid */
.wri-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 640px) {
.wri-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.wri-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Individual card */
.wri-card {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1.5rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
padding: 1.75rem;
text-decoration: none;
color: inherit;
transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.3s;
gap: 1.5rem;
}
.wri-card:hover {
box-shadow: 0 14px 40px rgba(44, 42, 41, 0.07);
transform: translateY(-3px);
border-color: rgba(216, 92, 50, 0.12);
}
.wri-card__top {
display: flex;
flex-direction: column;
gap: 0.875rem;
flex-grow: 1;
}
.wri-card__meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.wri-card__title {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-text-main);
line-height: 1.3;
text-wrap: balance;
transition: color 0.3s;
}
.wri-card:hover .wri-card__title {
color: var(--color-accent);
}
.wri-card__summary {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.7;
}
/* Card footer — source label + CTA arrow */
.wri-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.wri-card__cta {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-muted);
transition: color 0.2s;
}
.wri-card__cta svg {
transition: transform 0.3s;
}
.wri-card:hover .wri-card__cta {
color: var(--color-accent);
}
.wri-card:hover .wri-card__cta svg {
transform: translateX(3px);
}
/* =============================================================================
CLOSING CTA
============================================================================= */
.wri-cta {
padding-block: 4.5rem;
background-color: var(--color-surface-alt);
border-top: 1px solid var(--color-border);
}
.wri-cta__inner {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
@media (min-width: 1024px) {
.wri-cta__inner {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 4rem;
}
}
.wri-cta__text {
max-width: 38rem;
}
.wri-cta__heading {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-text-main);
margin-bottom: 0.75rem;
text-wrap: balance;
}
.wri-cta__body {
font-size: 1rem;
color: var(--color-text-muted);
line-height: 1.7;
}
.wri-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
flex-shrink: 0;
}
/* =============================================================================
CRO COMPENDIUM PAGE
All styles for cro-compendium.html. Prefix: cro-
Depends on: cs2-hero, cs2-btn, cs2-tag, cs2-back, cs2-next (all in cs2 block above)
============================================================================= */
/* ── Hero — solo modifier (no right-column image) ────────────────────────── */
.cro-hero--solo {
padding-top: 7rem;
padding-bottom: 4.5rem;
}
/* Force single column regardless of cs2-hero__grid default */
.cro-hero--solo .cs2-hero__grid {
grid-template-columns: 1fr;
}
.cro-hero--solo .cs2-hero__copy {
max-width: 52rem;
}
/* ── Methodology — Signal · Intervention · Impact ────────────────────────── */
.cro-methodology {
padding-block: 5rem;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.cro-method__header {
text-align: center;
margin-bottom: 3rem;
}
.cro-method__eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 0.75rem;
}
.cro-method__title {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
}
/* Horizontal strip of 3 steps with arrows between them */
.cro-method__strip {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
@media (min-width: 768px) {
.cro-method__strip {
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 1rem;
}
}
.cro-method__step {
background-color: var(--color-base);
border: 1px solid var(--color-border);
border-radius: 1.5rem;
padding: 2rem;
}
.cro-method__step-badge {
display: inline-block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
background-color: var(--color-accent-light);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 1rem;
}
.cro-method__step-title {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-text-main);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.cro-method__step-body {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.75;
}
/* Arrow between steps — hidden on mobile */
.cro-method__arrow {
display: none;
color: var(--color-border-strong);
flex-shrink: 0;
}
@media (min-width: 768px) {
.cro-method__arrow {
display: flex;
align-items: center;
justify-content: center;
}
}
/* ── Experiment Library ───────────────────────────────────────────────────── */
.cro-library {
padding-block: 5rem;
background-color: var(--color-surface-alt);
}
.cro-library__header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
.cro-library__header {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
}
}
.cro-library__text { flex: 1; }
.cro-library__eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 0.625rem;
}
.cro-library__heading {
font-family: var(--font-serif);
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
margin-bottom: 0.75rem;
text-wrap: balance;
}
.cro-library__sub {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-muted);
max-width: 50rem;
}
.cro-library__hint {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--color-text-light);
white-space: nowrap;
flex-shrink: 0;
align-self: flex-end;
}
/* 3-column card grid */
.cro-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 640px) {
.cro-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.cro-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ── Flip cards ───────────────────────────────────────────────────────────── */
/* Outer wrapper sets the 3D perspective and fixed height */
.cro-card {
perspective: 1000px;
height: 22rem;
cursor: pointer;
outline: none;
}
.cro-card:focus-visible .cro-card__inner {
box-shadow: 0 0 0 3px var(--color-accent);
border-radius: 1.5rem;
}
/* The flipping element */
.cro-card__inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.cro-card.is-flipped .cro-card__inner {
transform: rotateY(180deg);
}
/* Hover flip on pointer devices */
@media (hover: hover) {
.cro-card:hover .cro-card__inner {
transform: rotateY(180deg);
}
.cro-card.is-flipped .cro-card__inner {
transform: rotateY(180deg);
}
}
/* Shared face styles */
.cro-card__face {
position: absolute;
inset: 0;
border-radius: 1.5rem;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 1.75rem;
}
/* ─ Card front ─ */
.cro-card__front {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 4px 16px rgba(44, 42, 41, 0.05);
gap: 0.875rem;
transition: box-shadow 0.3s;
}
.cro-card:hover .cro-card__front,
.cro-card.is-flipped .cro-card__front {
box-shadow: 0 12px 36px rgba(44, 42, 41, 0.09);
}
/* Sector badge — top-left */
.cro-card__sector {
display: inline-block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
padding: 0.2rem 0.625rem;
border-radius: 9999px;
align-self: flex-start;
}
/* Large metric number — dominant visual element */
.cro-card__metric {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.cro-card__metric-number {
font-family: var(--font-serif);
font-size: clamp(3rem, 7vw, 4.25rem);
font-weight: 500;
color: var(--color-accent);
letter-spacing: -0.03em;
line-height: 1;
text-align: center;
}
/* Client name */
.cro-card__client {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-main);
line-height: 1.3;
}
/* Signal teaser text */
.cro-card__signal {
font-size: 0.8125rem;
color: var(--color-text-muted);
line-height: 1.65;
}
/* ─ Card back ─ */
.cro-card__back {
background-color: var(--color-text-main);
transform: rotateY(180deg);
gap: 1rem;
justify-content: space-between;
}
/* Signal + Intervention rows */
.cro-card__rows {
display: flex;
flex-direction: column;
gap: 0.875rem;
flex: 1;
overflow: hidden;
}
.cro-card__row-label {
display: block;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 0.25rem;
}
.cro-card__row-text {
font-size: 0.775rem;
color: rgba(255, 255, 255, 0.82);
line-height: 1.6;
}
/* Impact box — bottom of back face */
.cro-card__impact-box {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 0.875rem;
flex-shrink: 0;
}
.cro-card__impact-label {
display: block;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 0.3rem;
}
.cro-card__impact-stat {
font-family: var(--font-serif);
font-size: 0.9375rem;
font-weight: 500;
color: #FFFFFF;
line-height: 1.4;
}
/* ── Principles ───────────────────────────────────────────────────────────── */
.cro-principles {
padding-block: 5rem;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.cro-principles__header {
max-width: 40rem;
margin-bottom: 3rem;
}
.cro-principles__eyebrow {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: 0.75rem;
}
.cro-principles__title {
font-family: var(--font-serif);
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--color-text-main);
text-wrap: balance;
}
.cro-principles__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.cro-principles__grid { grid-template-columns: repeat(2, 1fr); }
}
.cro-principle {
background-color: var(--color-base);
border: 1px solid var(--color-border);
border-radius: 1.5rem;
padding: 1.75rem;
}
.cro-principle__num {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: var(--color-accent-light);
color: var(--color-accent);
font-family: var(--font-serif);
font-size: 0.9375rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
flex-shrink: 0;
}
.cro-principle__title {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-text-main);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.cro-principle__body {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.75;
}
/* =============================================================================
MOBILE RESPONSIVE OVERRIDES (max-width: 767px)
All mobile-only rules live here. Desktop styles are never modified.
============================================================================= */
@media (max-width: 767px) {
/* --- Section padding reduction --- */
.abt-principles,
.abt-experience,
.abt-capabilities,
.abt-testimonials,
.abt-outside,
.abt-cta,
.wri-grid-section,
.cs2-overview,
.cs2-deepdive,
.cs2-outcome,
.cs2-next,
.hl-work,
.wri-featured {
padding-block: 2.75rem;
}
/* --- Hero top/bottom padding --- */
.hl-hero--full {
padding-top: 6.5rem;
padding-bottom: 2.5rem;
}
.cs2-hero {
padding-top: 6.5rem;
padding-bottom: 3rem;
}
.abt-hero {
padding-top: 6.5rem;
padding-bottom: 3rem;
}
/* --- Outside of work grid: single column on mobile --- */
.abt-outside__grid {
grid-template-columns: 1fr;
}
/* --- Outside of work image: landscape aspect ratio on mobile --- */
.abt-outside__image {
aspect-ratio: 4 / 3;
}
/* --- Case study banner: standard widescreen ratio on mobile --- */
.cs2-banner__inner {
aspect-ratio: 16 / 9;
}
}
/* =============================================================================
MOBILE RESPONSIVE OVERRIDES (max-width: 767px)
Batch 2 — typography, stacking, interaction
============================================================================= */
@media (max-width: 767px) {
/* --- Typography scale --- */
.hl-hero__h1--full {
font-size: clamp(2.5rem, 11vw, 3.5rem);
}
.cs2-hero__title {
font-size: 1.875rem;
}
.abt-hero__title {
font-size: 1.875rem;
}
.wri-hero__title {
font-size: 2rem;
}
.cs2-prose__heading {
font-size: 1.5rem;
}
.abt-section-title {
font-size: 1.625rem;
}
/* --- Case study sidebar reorder: prose first, sidebar below --- */
.cs2-split .cs2-prose {
order: 1;
}
.cs2-split .cs2-sidebar {
order: 2;
}
/* --- Metric card tap affordance: always-visible arrow hint --- */
.hl-metric__arrow {
opacity: 0.45;
transform: translateX(0);
}
.hl-metric {
min-height: 4.5rem;
}
/* --- Card description clamping: 2-line clamp on mobile --- */
.hl-card__desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- Testimonial quote mark size --- */
.abt-testi__mark {
font-size: 2.5rem;
}
/* --- Featured writing visual panel height --- */
.wri-featured__visual {
min-height: 9rem;
}
/* --- Mobile nav links: touch-friendly size --- */
.hl-nav__mobile-link {
font-size: 1rem;
padding: 0.875rem 0;
min-height: 44px;
}
}