/*
* ============================================================
* FutureIsMade Design System
* fim-design-system.css - v2.0
*
* Brand book v1.0 - futureismade.com
*
* Architecture:
* 1. Tokens - CSS custom properties
* 2. Fonts - @import + base typography
* 3. Base - body, headings, paragraphs, lists
* 4. Layout - section wrappers, constrained widths
* 5. Surfaces - background classes
* 6. Typography - eyebrow, trigger, pull-quote, tags
* 7. Navigation - header, nav links, CTA button
* 8. Buttons - primary, secondary, amber
* 9. Components - method grid, process steps, path grid,
* proof cards, engagement cards,
* tool cards, before/after
* 10. Bands - dark band, newsletter, launch
* 11. Utilities - spacing, colour helpers
* 12. Responsive - breakpoints
*
* Tailwind mapping comments included on each component.
* No !important except three documented exceptions.
* ============================================================
*/
/* ============================================================
1. TOKENS
============================================================ */
:root {
/* Colour */
--fim-brand: #f6a21e; /* amber - accent only, never fill */
--fim-brand-dark: #c47d08; /* amber on light backgrounds */
--fim-slate: #1e2a35; /* primary dark surface */
--fim-slate-hover: #2a3a48; /* slate hover state */
--fim-ink: #2c3035; /* body text */
--fim-mid: #5a6270; /* secondary text */
--fim-mid-light: #8a909a; /* tertiary / placeholder */
--fim-paper: #f5f2eb; /* page background */
--fim-paper-warm: #ede9df; /* card surface */
--fim-border: #d4cfc5; /* default border */
--fim-border-strong: #b0a99f; /* emphasis border */
--fim-white: #ffffff;
/* Typography */
--fim-font-display: 'Fraunces', Georgia, serif;
--fim-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
/* Radius */
--fim-radius: 2px;
--fim-radius-card: 3px;
/* Transition */
--fim-transition: 0.18s ease;
/* Spacing scale */
--fim-space-1: 0.5rem; /* 8px */
--fim-space-2: 1rem; /* 16px */
--fim-space-3: 1.5rem; /* 24px */
--fim-space-4: 2rem; /* 32px */
--fim-space-5: 3rem; /* 48px */
--fim-space-6: clamp(3rem, 5vw, 4.5rem); /* section-md */
--fim-space-7: clamp(3.5rem, 6vw, 5.5rem); /* section-lg */
--fim-space-hero: clamp(3.5rem, 7vw, 6rem); /* hero top */
/* Content widths */
--fim-content: 1100px;
--fim-content-mid: 800px;
--fim-content-narrow: 640px;
}
/* ============================================================
2. FONTS
Loaded via functions.php enqueue - this @import is a
fallback for non-WordPress contexts (reference card, etc.)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500&family=Roboto:wght@400;500&display=swap');
/* ============================================================
3. BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--fim-font-body);
font-size: 1.0625rem; /* 17px - for 45+ audience on warm paper bg */
font-weight: 300;
line-height: 1.75;
color: var(--fim-ink);
background-color: var(--fim-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings - all use display font */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fim-font-display);
color: var(--fim-slate);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 300;
}
h1 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.15; }
h3 { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-family: var(--fim-font-body); font-weight: 500; letter-spacing: 0; }
p {
font-family: var(--fim-font-body);
font-weight: 300;
line-height: 1.7;
color: var(--fim-ink);
}
a {
color: var(--fim-brand-dark);
text-decoration: none;
transition: color var(--fim-transition);
}
a:hover { color: var(--fim-slate); }
ul, ol {
padding-left: var(--fim-space-3);
}
li {
font-family: var(--fim-font-body);
font-weight: 300;
line-height: 1.6;
color: var(--fim-ink);
margin-bottom: 0.4rem;
}
blockquote {
font-family: var(--fim-font-display);
font-size: 1rem;
font-weight: 300;
font-style: italic;
line-height: 1.55;
color: var(--fim-slate);
border-left: 3px solid var(--fim-brand);
padding-left: var(--fim-space-3);
margin: 0;
}
hr {
border: none;
border-top: 1px solid var(--fim-border);
margin: 0;
}
img { max-width: 100%; height: auto; display: block; }
/* ============================================================
4. LAYOUT
Tailwind equivalent: max-w-[1100px] mx-auto px-6 lg:px-16
============================================================ */
/* Full-width wrapper that constrains content */
.fim-wrap {
max-width: var(--fim-content);
margin-left: auto;
margin-right: auto;
padding-left: clamp(1.5rem, 5vw, 4rem);
padding-right: clamp(1.5rem, 5vw, 4rem);
}
.fim-wrap-mid {
max-width: var(--fim-content-mid);
margin-left: auto;
margin-right: auto;
padding-left: clamp(1.5rem, 5vw, 4rem);
padding-right: clamp(1.5rem, 5vw, 4rem);
}
.fim-wrap-narrow {
max-width: var(--fim-content-narrow);
margin-left: auto;
margin-right: auto;
padding-left: clamp(1.5rem, 5vw, 4rem);
padding-right: clamp(1.5rem, 5vw, 4rem);
}
/* Section vertical padding */
.fim-section-sm { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.fim-section-md { padding-top: var(--fim-space-6); padding-bottom: var(--fim-space-6); }
.fim-section-lg { padding-top: var(--fim-space-7); padding-bottom: var(--fim-space-7); }
.fim-section-hero { padding-top: var(--fim-space-hero); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Two-column grid - hero layout */
.fim-grid-hero {
display: grid;
grid-template-columns: 1fr 320px;
gap: 5rem;
align-items: start;
}
/* Two-column equal */
.fim-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
align-items: start;
}
/* Three-column equal */
.fim-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
/* Four-column equal */
.fim-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
/* 60/40 split */
.fim-grid-60-40 {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 5rem;
align-items: center;
}
/* 50/50 split */
.fim-grid-50-50 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
/* ============================================================
5. SURFACES
Tailwind equivalent noted per class
============================================================ */
/* Paper warm - card / secondary surface
Tailwind: bg-[#ede9df] */
.fim-bg-paper-warm { background-color: var(--fim-paper-warm); }
/* Slate - primary dark surface
Tailwind: bg-[#1e2a35] */
.fim-bg-slate { background-color: var(--fim-slate); }
/* White */
.fim-bg-white { background-color: var(--fim-white); }
/* ============================================================
6. TYPOGRAPHY COMPONENTS
============================================================ */
/* --- Eyebrow label ---
Used above section headings, hero titles
Tailwind: text-[0.68rem] font-medium tracking-[0.12em] uppercase text-[#5a6270]
WordPress: apply class "fim-eyebrow" to a Paragraph block */
.fim-eyebrow {
display: block;
font-family: var(--fim-font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fim-mid);
margin-bottom: 0.65rem;
line-height: 1;
}
/* --- Section intro / lede ---
Large-ish body paragraph below a headline
Tailwind: text-base font-light leading-7 text-[#5a6270] max-w-[560px]
WordPress: apply class "fim-lede" to a Paragraph block */
.fim-lede {
font-size: 1.125rem; /* 18px - intro paragraphs */
font-weight: 300;
line-height: 1.75;
color: var(--fim-mid);
max-width: 560px;
}
/* --- Trigger / amber pull-quote ---
Problem statement in hero areas
Tailwind: border-l-[3px] border-[#f6a21e] bg-[#ede9df] pl-5 py-4 rounded-r-sm
WordPress: apply class "fim-trigger" to a Paragraph block */
.fim-trigger {
border-left: 3px solid var(--fim-brand);
background-color: var(--fim-paper-warm);
padding: 1rem 1.25rem;
border-radius: 0 var(--fim-radius-card) var(--fim-radius-card) 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: var(--fim-slate);
margin-bottom: 1.5rem;
}
/* --- Mechanism note ---
Footnote / summary callout with amber left border
Tailwind: border-l-2 border-[#f6a21e] bg-[#ede9df] pl-5 py-4
WordPress: apply class "fim-mechanism-note" to a Paragraph block */
.fim-mechanism-note {
border-left: 2px solid var(--fim-brand);
background-color: var(--fim-paper-warm);
padding: 1rem 1.25rem;
font-size: 0.875rem;
font-weight: 400;
color: var(--fim-slate);
border-radius: 0 var(--fim-radius-card) var(--fim-radius-card) 0;
}
/* --- Method tag / framework pill ---
Amber tag for P3R labels: "Foundation", "R - 1 of 3" etc.
Tailwind: inline-block text-[0.62rem] font-medium tracking-[0.1em] uppercase
text-[#c47d08] bg-[#f6a21e]/10 border border-[#f6a21e]/20 px-2 py-0.5 rounded-sm
WordPress: apply class "fim-method-tag" to a Paragraph block */
.fim-method-tag {
display: inline-block;
font-family: var(--fim-font-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand-dark);
background-color: rgba(246, 162, 30, 0.1);
border: 1px solid rgba(246, 162, 30, 0.2);
padding: 0.2rem 0.5rem;
border-radius: var(--fim-radius);
margin-bottom: 0.9rem;
line-height: 1;
}
/* Method tag on dark backgrounds */
.fim-bg-slate .fim-method-tag,
.fim-dark-band .fim-method-tag {
color: var(--fim-brand);
background-color: rgba(246, 162, 30, 0.15);
border-color: rgba(246, 162, 30, 0.3);
}
/* --- Path number ---
"Path 01" label above path card headlines
WordPress: apply class "fim-path-num" to a Paragraph block */
.fim-path-num {
display: block;
font-family: var(--fim-font-display);
font-size: 0.8rem;
font-weight: 400;
color: var(--fim-brand-dark);
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
/* Provisional suffix */
.fim-path-num--provisional::after {
content: ' - provisional';
font-family: var(--fim-font-body);
font-size: 0.65rem;
color: var(--fim-mid-light);
letter-spacing: 0.04em;
}
/* --- Path problem headline ---
The quoted problem statement inside path cards
WordPress: apply class "fim-path-problem" to a Paragraph or Heading block */
.fim-path-problem {
font-family: var(--fim-font-display);
font-size: 1.25rem;
font-weight: 300;
line-height: 1.3;
color: var(--fim-slate);
letter-spacing: -0.015em;
margin-bottom: 0.6rem;
}
/* --- Path audience label ---
"FREELANCERS - INDEPENDENT PROFESSIONALS"
WordPress: apply class "fim-path-audience" to a Paragraph block */
.fim-path-audience {
display: block;
font-family: var(--fim-font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fim-mid-light);
margin-bottom: 0.75rem;
}
/* --- Step number (Diagnose/Design/Deploy) ---
Large decorative number
WordPress: apply class "fim-step-num" to a Paragraph block */
.fim-step-num {
display: block;
font-family: var(--fim-font-display);
font-size: 2.8rem;
font-weight: 300;
color: var(--fim-border);
line-height: 1;
margin-bottom: 0.9rem;
}
/* --- Step name label ---
"DIAGNOSE", "DESIGN", "DEPLOY"
WordPress: apply class "fim-step-name" to a Paragraph block */
.fim-step-name {
display: block;
font-family: var(--fim-font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand-dark);
margin-bottom: 0.4rem;
}
/* --- Proof meta ---
Attribution below testimonial quotes
WordPress: apply class "fim-proof-meta" to a Paragraph block */
.fim-proof-meta {
font-size: 0.77rem;
color: var(--fim-mid);
font-family: var(--fim-font-body);
font-weight: 400;
line-height: 1.5;
}
.fim-proof-meta strong {
display: block;
font-weight: 500;
color: var(--fim-ink);
margin-bottom: 0.1rem;
}
/* --- Engagement duration label ---
"2-WEEK SPRINT" on engagement cards
WordPress: apply class "fim-engagement-duration" to a Paragraph block */
.fim-engagement-duration {
display: block;
font-family: var(--fim-font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand);
margin-bottom: 0.6rem;
}
/* --- Engagement who label ---
"TRANSITIONING PROFESSIONALS - CONSULTANTS"
WordPress: apply class "fim-engagement-who" to a Paragraph block */
.fim-engagement-who {
display: block;
font-family: var(--fim-font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 1.1rem;
}
/* --- Tool badge ---
"FIT" / "PPA" large label on tool cards
WordPress: apply class "fim-tool-badge" to a Paragraph block */
.fim-tool-badge {
font-family: var(--fim-font-display);
font-size: 1.05rem;
font-weight: 400;
color: var(--fim-brand-dark);
flex-shrink: 0;
min-width: 2.5rem;
}
/* --- Before/After column label ---
"WITHOUT" / "WITH"
WordPress: apply class "fim-col-label" to a Paragraph block */
.fim-col-label {
display: block;
font-family: var(--fim-font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fim-mid);
margin-bottom: 1rem;
}
.fim-col-label--after { color: var(--fim-brand-dark); }
/* --- Refutation strip ---
"NOT COACHING. NO MINDSET WORK..." banner
Tailwind: bg-[#1e2a35] text-white text-center text-[0.75rem] tracking-[0.07em] uppercase py-2.5 px-8
WordPress: apply class "fim-refutation-strip" to a Group block (full width) */
.fim-refutation-strip {
background-color: var(--fim-slate);
color: var(--fim-white);
text-align: center;
padding: 0.6rem 2rem;
font-family: var(--fim-font-body);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.5;
}
.fim-refutation-strip strong,
.fim-refutation-strip em {
font-style: normal;
font-weight: 500;
color: var(--fim-brand);
}
/* Ensure paragraph inside strip inherits correctly */
.fim-refutation-strip p {
color: var(--fim-white);
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
margin: 0;
}
/* ============================================================
7. NAVIGATION
============================================================ */
.fim-header {
position: sticky;
top: 0;
z-index: 100;
background-color: rgba(245, 242, 235, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--fim-border);
height: 60px;
display: flex;
align-items: center;
padding: 0 clamp(1.5rem, 5vw, 4rem);
justify-content: space-between;
}
/* Wordmark */
.fim-wordmark {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.1rem;
font-weight: 400;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--fim-ink);
}
.fim-wordmark__future { color: var(--fim-ink); }
.fim-wordmark__is { color: var(--fim-mid); }
.fim-wordmark__made { color: var(--fim-brand-dark); }
/* Nav links */
.fim-nav-link {
font-family: var(--fim-font-body);
font-size: 0.8rem;
font-weight: 400;
color: var(--fim-mid);
text-decoration: none;
padding: 0.35rem 0.75rem;
border-radius: var(--fim-radius);
transition: color var(--fim-transition), background-color var(--fim-transition);
letter-spacing: 0.01em;
}
.fim-nav-link:hover,
.fim-nav-link.is-active {
color: var(--fim-slate);
background-color: var(--fim-paper-warm);
}
/* Nav CTA button */
.fim-nav-cta {
font-family: var(--fim-font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
background-color: var(--fim-slate);
color: var(--fim-white);
padding: 0.4rem 1rem;
border-radius: var(--fim-radius);
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color var(--fim-transition);
}
.fim-nav-cta:hover {
background-color: var(--fim-slate-hover);
color: var(--fim-white);
}
/* WordPress nav override - keep these !important:
TT25 injects its own nav colours via inline styles */
.wp-block-navigation a.fim-nav-cta {
background-color: var(--fim-slate) !important;
color: var(--fim-white) !important;
border-radius: var(--fim-radius) !important;
padding: 0.4rem 1rem !important;
}
/* ============================================================
8. BUTTONS
============================================================ */
/* Base button reset */
.fim-btn {
display: inline-block;
font-family: var(--fim-font-body);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: var(--fim-radius);
padding: 0.7rem 1.6rem;
cursor: pointer;
border: none;
text-decoration: none;
transition: background-color var(--fim-transition), border-color var(--fim-transition), color var(--fim-transition);
line-height: 1;
/* Override base colour inheritance */
color: inherit;
}
/* Primary - slate
Tailwind: bg-[#1e2a35] text-white hover:bg-[#2a3a48] rounded-sm px-6 py-3
text-[0.85rem] font-medium tracking-[0.04em] uppercase */
.fim-btn--primary {
background-color: var(--fim-slate);
color: var(--fim-white);
}
.fim-btn--primary:hover {
background-color: var(--fim-slate-hover);
color: var(--fim-white);
}
/* Secondary - outline
Tailwind: bg-transparent border border-[#b0a99f] text-[#2c3035]
hover:border-[#2c3035] hover:bg-[#ede9df] rounded-sm px-6 py-3 */
.fim-btn--secondary {
background-color: transparent;
color: var(--fim-ink);
border: 1px solid var(--fim-border-strong);
padding: 0.7rem 1.4rem;
}
.fim-btn--secondary:hover {
border-color: var(--fim-slate);
background-color: var(--fim-paper-warm);
color: var(--fim-slate);
}
/* Amber - use on dark (slate) backgrounds only
Tailwind: bg-[#f6a21e] text-[#1e2a35] hover:bg-white rounded-sm px-6 py-3 */
.fim-btn--amber,
a.fim-btn--amber,
.fim-header__actions .fim-btn--amber {
background-color: var(--fim-brand) !important;
color: var(--fim-slate) !important;
}
.fim-btn--amber:hover,
a.fim-btn--amber:hover,
.fim-header__actions .fim-btn--amber:hover {
background-color: var(--fim-brand-dark) !important;
color: var(--fim-white) !important;
}
/* WordPress block button style overrides
Apply these via the Style panel: "Primary", "Secondary", "Amber" */
.wp-block-button.is-style-fim-primary .wp-block-button__link {
background-color: var(--fim-slate);
color: var(--fim-white);
border-radius: var(--fim-radius);
font-family: var(--fim-font-body);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.7rem 1.6rem;
border: none;
}
.wp-block-button.is-style-fim-primary .wp-block-button__link:hover {
background-color: var(--fim-slate-hover);
}
.wp-block-button.is-style-fim-secondary .wp-block-button__link {
background-color: transparent;
color: var(--fim-ink);
border: 1px solid var(--fim-border-strong);
border-radius: var(--fim-radius);
font-family: var(--fim-font-body);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.7rem 1.4rem;
}
.wp-block-button.is-style-fim-secondary .wp-block-button__link:hover {
border-color: var(--fim-slate);
background-color: var(--fim-paper-warm);
}
.wp-block-button.is-style-fim-amber .wp-block-button__link {
background-color: var(--fim-brand);
color: var(--fim-slate);
border-radius: var(--fim-radius);
font-family: var(--fim-font-body);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.7rem 1.6rem;
border: none;
}
.wp-block-button.is-style-fim-amber .wp-block-button__link:hover {
background-color: var(--fim-white);
}
/* ============================================================
9. COMPONENTS
============================================================ */
/* --- METHOD GRID (P3R - four columns) ---
Container: div.fim-method-grid
Each column: div.fim-method-card
Tailwind container: grid grid-cols-4 border border-[#d4cfc5] rounded-sm overflow-hidden
Tailwind card: p-7 border-r border-[#d4cfc5] last:border-r-0 */
.fim-method-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--fim-border);
border-radius: var(--fim-radius-card);
overflow: hidden;
margin-top: 2.5rem;
}
.fim-method-card {
padding: 1.75rem 1.5rem;
border-right: 1px solid var(--fim-border);
background-color: var(--fim-paper);
}
.fim-method-card:last-child { border-right: none; }
.fim-method-card h3 {
font-family: var(--fim-font-display);
font-size: 1.4rem;
font-weight: 400;
color: var(--fim-slate);
letter-spacing: -0.01em;
margin-top: 0.9rem;
margin-bottom: 0.5rem;
}
.fim-method-card p {
font-size: 0.82rem;
color: var(--fim-mid);
line-height: 1.6;
font-weight: 300;
}
/* --- PROCESS GRID (Diagnose - Design - Deploy) ---
Container: div.fim-process-section (wraps the whole section)
Inner grid: div.fim-process-grid
Each step: div.fim-process-step
Tailwind container: bg-[#ede9df] py-16
Tailwind grid: grid grid-cols-3 border border-[#b0a99f] rounded-sm overflow-hidden mt-10 */
.fim-process-section {
background-color: var(--fim-paper-warm);
}
.fim-process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--fim-border-strong);
border-radius: var(--fim-radius-card);
overflow: hidden;
margin-top: 2.5rem;
}
.fim-process-step {
background-color: var(--fim-paper);
padding: 2rem 1.75rem;
border-right: 1px solid var(--fim-border-strong);
}
.fim-process-step:last-child { border-right: none; }
.fim-process-step p {
font-size: 0.875rem;
color: var(--fim-ink);
line-height: 1.6;
font-weight: 300;
}
/* --- PATH GRID (four audience cards) ---
Container: div.fim-path-grid
Each card: div.fim-path-card (make it an for linking)
Tailwind container: grid grid-cols-2 gap-px bg-[#d4cfc5] border border-[#d4cfc5] rounded-sm overflow-hidden mt-10
Tailwind card: bg-[#f5f2eb] p-8 hover:bg-[#ede9df] transition-colors cursor-pointer */
.fim-path-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background-color: var(--fim-border);
border: 1px solid var(--fim-border);
border-radius: var(--fim-radius-card);
overflow: hidden;
margin-top: 2.5rem;
}
.fim-path-card {
background-color: var(--fim-paper);
padding: 2rem 1.75rem;
text-decoration: none;
display: block;
transition: background-color var(--fim-transition);
}
.fim-path-card:hover { background-color: var(--fim-paper-warm); }
.fim-path-card:hover .fim-path-arrow { transform: translateX(4px); }
.fim-path-card--provisional {
background-color: var(--fim-paper-warm);
opacity: 0.75;
}
.fim-path-card p {
font-size: 0.85rem;
color: var(--fim-mid);
line-height: 1.6;
font-weight: 300;
max-width: 340px;
}
.fim-path-arrow {
display: inline-block;
margin-top: 1rem;
font-family: var(--fim-font-body);
font-size: 0.775rem;
font-weight: 500;
color: var(--fim-slate);
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: transform var(--fim-transition);
}
/* --- PROOF CARDS (testimonials) ---
Container: div.fim-proof-grid
Each card: div.fim-proof-card
Tailwind container: grid grid-cols-3 gap-5 mt-10
Tailwind card: bg-[#ede9df] border border-[#d4cfc5] p-7 rounded-sm */
.fim-proof-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: 2.5rem;
}
.fim-proof-card {
background-color: var(--fim-paper-warm);
border: 1px solid var(--fim-border);
padding: 1.75rem;
border-radius: var(--fim-radius-card);
}
.fim-proof-card blockquote {
border-left: none;
padding-left: 0;
margin-bottom: 1.1rem;
}
/* --- ENGAGEMENT SPRINT CARDS ---
Parent section: div.fim-engagements-section (use with fim-bg-slate)
Card grid: div.fim-engagements-grid
Each card: div.fim-engagement-card
Tailwind grid: grid grid-cols-3 gap-5 mt-10
Tailwind card: bg-white/5 border border-white/10 p-7 rounded-sm
hover:bg-white/[0.07] hover:border-[#f6a21e]/40 transition */
.fim-engagements-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: 2.5rem;
}
.fim-engagement-card {
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.75rem;
border-radius: var(--fim-radius-card);
transition: border-color var(--fim-transition), background-color var(--fim-transition);
}
.fim-engagement-card:hover {
border-color: rgba(246, 162, 30, 0.4);
background-color: rgba(255, 255, 255, 0.07);
}
.fim-engagement-card h3 {
font-family: var(--fim-font-display);
font-size: 1.35rem;
font-weight: 300;
color: var(--fim-white);
letter-spacing: -0.01em;
margin-top: 0.35rem;
margin-bottom: 0.35rem;
}
.fim-engagement-card ul {
list-style: none;
padding: 0;
margin: 1.1rem 0 1.5rem;
}
.fim-engagement-card li {
display: flex;
gap: 0.6rem;
font-size: 0.83rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
font-weight: 300;
padding: 0.35rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 0;
}
.fim-engagement-card li::before {
content: '\2192';
color: var(--fim-brand);
flex-shrink: 0;
font-size: 0.78rem;
margin-top: 0.05em;
}
.fim-engagement-link {
font-family: var(--fim-font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fim-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
padding-bottom: 0.1rem;
text-decoration: none;
transition: border-color var(--fim-transition), color var(--fim-transition);
}
.fim-engagement-link:hover {
border-color: var(--fim-brand);
color: var(--fim-brand);
}
/* --- TOOL CARDS (FIT / PPA) ---
Container: div.fim-tool-stack
Each card: div.fim-tool-card (or for linking)
Tailwind card: flex gap-4 items-start bg-[#ede9df] border border-[#d4cfc5]
p-5 rounded-sm hover:border-[#f6a21e] hover:bg-[#f5f2eb] transition */
.fim-tool-stack {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.fim-tool-card {
display: flex;
gap: 1rem;
align-items: flex-start;
background-color: var(--fim-paper-warm);
border: 1px solid var(--fim-border);
padding: 1.1rem 1.25rem;
border-radius: var(--fim-radius-card);
text-decoration: none;
transition: border-color var(--fim-transition), background-color var(--fim-transition);
}
.fim-tool-card:hover {
border-color: var(--fim-brand);
background-color: var(--fim-paper);
}
.fim-tool-card__content strong {
display: block;
font-size: 0.83rem;
font-weight: 500;
color: var(--fim-slate);
margin-bottom: 0.15rem;
font-family: var(--fim-font-body);
}
.fim-tool-card__content p,
.fim-tool-card__content span {
font-size: 0.78rem;
color: var(--fim-mid);
font-weight: 300;
line-height: 1.5;
margin: 0;
}
/* --- BEFORE / AFTER ---
Container: div.fim-before-after
Two columns: div.fim-before-col + div.fim-after-col
Tailwind container: grid grid-cols-2 border border-[#d4cfc5] rounded-sm overflow-hidden */
.fim-before-after {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--fim-border);
border-radius: var(--fim-radius-card);
overflow: hidden;
}
.fim-before-col {
background-color: var(--fim-paper-warm);
padding: 2rem 1.75rem;
border-right: 1px solid var(--fim-border);
}
.fim-after-col {
background-color: var(--fim-paper);
padding: 2rem 1.75rem;
}
.fim-before-after ul {
list-style: none;
padding: 0;
margin: 0;
}
.fim-before-after li {
display: flex;
gap: 0.6rem;
font-size: 0.875rem;
color: var(--fim-ink);
line-height: 1.6;
font-weight: 300;
padding: 0.4rem 0;
border-top: 1px solid var(--fim-border);
margin-bottom: 0;
}
.fim-before-col li::before {
content: '\2014';
color: var(--fim-mid);
flex-shrink: 0;
}
.fim-after-col li::before {
content: '\2192';
color: var(--fim-brand-dark);
flex-shrink: 0;
}
/* --- MECHANISM ASIDE (hero sidebar stats) ---
Container: div.fim-mechanism-aside
Each point: div.fim-mechanism-point
Tailwind container: space-y-0
Tailwind point: border-t border-[#d4cfc5] py-4 last:border-b */
.fim-mechanism-aside {
padding-top: 0.5rem;
}
.fim-mechanism-point {
padding: 1rem 0;
border-top: 1px solid var(--fim-border);
}
.fim-mechanism-point:last-child {
border-bottom: 1px solid var(--fim-border);
}
.fim-mechanism-point strong {
display: block;
font-family: var(--fim-font-body);
font-size: 0.825rem;
font-weight: 500;
color: var(--fim-slate);
margin-bottom: 0.2rem;
}
.fim-mechanism-point span,
.fim-mechanism-point p {
font-size: 0.8rem;
color: var(--fim-mid);
font-weight: 300;
line-height: 1.5;
margin: 0;
}
/* Stat variant (path page sidebar) */
.fim-stat {
padding: 0.9rem 0;
border-top: 1px solid var(--fim-border);
}
.fim-stat:last-child { border-bottom: 1px solid var(--fim-border); }
.fim-stat strong {
display: block;
font-family: var(--fim-font-display);
font-size: 1.6rem;
font-weight: 300;
color: var(--fim-slate);
line-height: 1;
margin-bottom: 0.2rem;
}
.fim-stat span,
.fim-stat p {
font-size: 0.78rem;
color: var(--fim-mid);
font-weight: 300;
line-height: 1.4;
margin: 0;
}
/* ============================================================
10. BANDS
============================================================ */
/* --- Dark band ---
Slate background - problem sections, engagements, newsletter
Tailwind: bg-[#1e2a35]
WordPress: apply class "fim-dark-band" to a Group block.
IMPORTANT: also set the block's background colour to #1e2a35
in the block editor so WordPress renders it correctly. */
.fim-dark-band {
background-color: var(--fim-slate);
}
.fim-dark-band h1,
.fim-dark-band h2,
.fim-dark-band h3 {
color: var(--fim-white);
}
.fim-dark-band h2 em,
.fim-dark-band h3 em {
font-style: italic;
color: var(--fim-brand);
}
.fim-dark-band p {
color: rgba(255, 255, 255, 0.8);
}
.fim-dark-band li {
color: rgba(255, 255, 255, 0.75);
}
.fim-dark-band .fim-eyebrow {
color: rgba(255, 255, 255, 0.45);
}
.fim-dark-band .fim-lede {
color: rgba(255, 255, 255, 0.65);
}
/* --- Newsletter band ---
Tailwind: bg-[#1e2a35]
WordPress: apply class "fim-newsletter-band" to a Group block */
.fim-newsletter-band {
background-color: var(--fim-slate);
}
.fim-newsletter-band h2 {
color: var(--fim-white);
font-family: var(--fim-font-display);
font-weight: 300;
letter-spacing: -0.02em;
}
.fim-newsletter-band p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
font-weight: 300;
}
/* Form inputs inside newsletter band */
.fim-newsletter-band input[type="email"] {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--fim-radius);
color: var(--fim-white);
font-family: var(--fim-font-body);
font-size: 0.875rem;
padding: 0.65rem 1.1rem;
min-width: 220px;
outline: none;
transition: border-color var(--fim-transition);
}
.fim-newsletter-band input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.fim-newsletter-band input[type="email"]:focus {
border-color: var(--fim-white);
}
.fim-newsletter-band input[type="submit"],
.fim-newsletter-band button[type="submit"] {
background-color: var(--fim-brand);
color: var(--fim-slate);
border: none;
border-radius: var(--fim-radius);
font-family: var(--fim-font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.65rem 1.35rem;
cursor: pointer;
transition: background-color var(--fim-transition);
white-space: nowrap;
}
.fim-newsletter-band input[type="submit"]:hover,
.fim-newsletter-band button[type="submit"]:hover {
background-color: var(--fim-white);
}
/* --- Launch band (coming soon) ---
Tailwind: bg-[#1e2a35]
WordPress: apply class "fim-launch-band" to a Group block */
.fim-launch-band {
background-color: var(--fim-slate);
}
.fim-launch-band h2,
.fim-launch-band h3 {
color: var(--fim-white);
}
.fim-launch-band h2 em,
.fim-launch-band h3 em {
font-style: normal;
color: var(--fim-brand);
}
.fim-launch-band p {
color: rgba(255, 255, 255, 0.7);
}
.fim-launch-band .fim-eyebrow {
color: rgba(255, 255, 255, 0.4);
}
/* ============================================================
11. UTILITIES
============================================================ */
/* Colour */
.fim-text-ink { color: var(--fim-ink); }
.fim-text-mid { color: var(--fim-mid); }
.fim-text-slate { color: var(--fim-slate); }
.fim-text-brand { color: var(--fim-brand-dark); }
.fim-text-white { color: var(--fim-white); }
/* Font */
.fim-font-display { font-family: var(--fim-font-display); }
.fim-font-body { font-family: var(--fim-font-body); }
/* Weight */
.fim-weight-300 { font-weight: 300; }
.fim-weight-400 { font-weight: 400; }
.fim-weight-500 { font-weight: 500; }
/* Max-width content helpers */
.fim-max-narrow { max-width: var(--fim-content-narrow); }
.fim-max-mid { max-width: var(--fim-content-mid); }
/* Margin top helpers */
.fim-mt-1 { margin-top: var(--fim-space-1); }
.fim-mt-2 { margin-top: var(--fim-space-2); }
.fim-mt-3 { margin-top: var(--fim-space-3); }
.fim-mt-4 { margin-top: var(--fim-space-4); }
/* Divider / rule */
.fim-rule {
border: none;
border-top: 1px solid var(--fim-border);
margin: 0;
}
/* Footer */
.fim-footer {
border-top: 1px solid var(--fim-border);
padding: 2.25rem clamp(1.5rem, 5vw, 4rem);
}
.fim-footer-tagline {
font-size: 0.75rem;
color: var(--fim-mid);
font-weight: 300;
margin-top: 0.2rem;
}
/* ============================================================
12. RESPONSIVE
============================================================ */
@media (max-width: 960px) {
.fim-grid-hero,
.fim-grid-60-40,
.fim-grid-50-50 {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.fim-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.fim-method-grid {
grid-template-columns: repeat(2, 1fr);
}
.fim-method-card:nth-child(2) { border-right: none; }
.fim-method-card:nth-child(1),
.fim-method-card:nth-child(2) { border-bottom: 1px solid var(--fim-border); }
.fim-process-grid {
grid-template-columns: 1fr;
}
.fim-process-step {
border-right: none;
border-bottom: 1px solid var(--fim-border-strong);
}
.fim-process-step:last-child { border-bottom: none; }
.fim-proof-grid,
.fim-engagements-grid {
grid-template-columns: 1fr;
}
.fim-before-after {
grid-template-columns: 1fr;
}
.fim-before-col {
border-right: none;
border-bottom: 1px solid var(--fim-border);
}
.fim-mechanism-aside {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
padding-top: 1.5rem; /* breathing room below hero text */
}
/* Each point loses border-bottom on last child in 3-col layout */
.fim-mechanism-aside .fim-mechanism-point:last-child {
border-bottom: none;
}
}
@media (max-width: 640px) {
/* Reframe aside: collapse to single column on small mobile */
.fim-mechanism-aside {
display: flex;
flex-direction: column;
gap: 0;
}
.fim-path-grid {
grid-template-columns: 1fr;
}
.fim-grid-4,
.fim-method-grid {
grid-template-columns: 1fr;
}
.fim-method-card {
border-right: none;
border-bottom: 1px solid var(--fim-border);
}
.fim-method-card:last-child { border-bottom: none; }
.fim-grid-2 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ============================================================
WORDPRESS COLUMN SPECIFICITY OVERRIDES
TT25 applies paragraph resets inside .wp-block-column that
override custom classes on nested paragraphs. These selectors
add .wp-block-column context to match TT25's specificity.
This is the ONLY place !important is used beyond the three
documented nav exceptions. Each declaration here corresponds
to an existing class above - no new rules, just stronger
selectors for the WordPress column context.
============================================================ */
/* Path card typography */
.wp-block-column .fim-path-num,
.fim-path-card .fim-path-num {
font-family: var(--fim-font-display);
font-size: 0.8rem;
font-weight: 400;
color: var(--fim-brand-dark);
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
display: block;
}
.wp-block-column .fim-path-problem,
.fim-path-card .fim-path-problem {
font-family: var(--fim-font-display);
font-size: 1.25rem;
font-weight: 300;
line-height: 1.3;
color: var(--fim-slate);
letter-spacing: -0.015em;
margin-bottom: 0.6rem;
}
.wp-block-column .fim-path-audience,
.fim-path-card .fim-path-audience {
display: block;
font-family: var(--fim-font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fim-mid-light);
margin-bottom: 0.75rem;
}
.wp-block-column .fim-path-arrow,
.fim-path-card .fim-path-arrow {
display: inline-block;
font-family: var(--fim-font-body);
font-size: 0.775rem;
font-weight: 500;
color: var(--fim-slate);
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
}
/* Method card typography */
.wp-block-column .fim-method-tag,
.fim-method-card .fim-method-tag {
display: inline-block;
font-family: var(--fim-font-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand-dark);
background-color: rgba(246, 162, 30, 0.1);
border: 1px solid rgba(246, 162, 30, 0.2);
padding: 0.2rem 0.5rem;
border-radius: var(--fim-radius);
margin-bottom: 0.9rem;
line-height: 1;
}
.wp-block-column.fim-method-card h3,
.fim-method-card h3 {
font-family: var(--fim-font-display);
font-size: 1.4rem;
font-weight: 400;
color: var(--fim-slate);
letter-spacing: -0.01em;
margin-top: 0.9rem;
margin-bottom: 0.5rem;
}
.wp-block-column.fim-method-card p,
.fim-method-card p {
font-size: 0.82rem;
color: var(--fim-mid);
line-height: 1.6;
font-weight: 300;
}
/* Process step typography */
.wp-block-column .fim-step-num,
.fim-process-step .fim-step-num {
display: block;
font-family: var(--fim-font-display);
font-size: 2.8rem;
font-weight: 300;
color: var(--fim-border);
line-height: 1;
margin-bottom: 0.9rem;
}
.wp-block-column .fim-step-name,
.fim-process-step .fim-step-name {
display: block;
font-family: var(--fim-font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand-dark);
margin-bottom: 0.4rem;
}
.wp-block-column.fim-process-step p,
.fim-process-step p {
font-size: 0.875rem;
color: var(--fim-ink);
line-height: 1.6;
font-weight: 300;
}
/* Proof card typography */
.wp-block-column .fim-proof-meta,
.fim-proof-card .fim-proof-meta {
font-size: 0.77rem;
color: var(--fim-mid);
font-family: var(--fim-font-body);
font-weight: 400;
line-height: 1.5;
}
.wp-block-column .fim-proof-meta strong,
.fim-proof-card .fim-proof-meta strong {
display: block;
font-weight: 500;
color: var(--fim-ink);
margin-bottom: 0.1rem;
}
/* Engagement card typography */
.wp-block-column .fim-engagement-duration,
.fim-engagement-card .fim-engagement-duration {
display: block;
font-family: var(--fim-font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand);
margin-bottom: 0.6rem;
}
.wp-block-column .fim-engagement-who,
.fim-engagement-card .fim-engagement-who {
display: block;
font-family: var(--fim-font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 1.1rem;
}
.wp-block-column.fim-engagement-card h3,
.fim-engagement-card h3 {
font-family: var(--fim-font-display);
font-size: 1.35rem;
font-weight: 300;
color: var(--fim-white);
letter-spacing: -0.01em;
margin-top: 0.35rem;
margin-bottom: 0.35rem;
}
/* Eyebrow inside columns */
.wp-block-column .fim-eyebrow,
.wp-block-column p.fim-eyebrow {
display: block;
font-family: var(--fim-font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fim-mid);
margin-bottom: 0.65rem;
line-height: 1;
}
/* Lede inside columns */
.wp-block-column .fim-lede,
.wp-block-column p.fim-lede {
font-size: 1.125rem; /* 18px - intro paragraphs */
font-weight: 300;
line-height: 1.75;
color: var(--fim-mid);
max-width: 560px;
}
/* Tool badge inside groups */
.wp-block-group .fim-tool-badge,
.fim-tool-card .fim-tool-badge {
font-family: var(--fim-font-display);
font-size: 1.05rem;
font-weight: 400;
color: var(--fim-brand-dark);
flex-shrink: 0;
min-width: 2.5rem;
}
/* ============================================================
PROCESS STEP - COMBINED CLASS SELECTORS
fim-process-step and wp-block-column are on the SAME div.
Descendant selectors (.fim-process-step .fim-step-num) don't
add specificity in this case. Combined class selectors
(.fim-process-step.wp-block-column .fim-step-num) target the
exact element and win cleanly.
============================================================ */
.fim-process-step.wp-block-column .fim-step-num,
.fim-process-grid .wp-block-column .fim-step-num {
display: block;
font-family: var(--fim-font-display);
font-size: 2.8rem;
font-weight: 300;
color: var(--fim-border);
line-height: 1;
margin-bottom: 0.9rem;
}
.fim-process-step.wp-block-column .fim-step-name,
.fim-process-grid .wp-block-column .fim-step-name {
display: block;
font-family: var(--fim-font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand-dark);
margin-bottom: 0.4rem;
}
.fim-process-step.wp-block-column p,
.fim-process-grid .wp-block-column p {
font-size: 0.875rem;
color: var(--fim-ink);
line-height: 1.6;
font-weight: 300;
}
/* Same fix for method grid - fim-method-card and wp-block-column
are also on the same div */
.fim-method-card.wp-block-column .fim-method-tag,
.fim-method-grid .wp-block-column .fim-method-tag {
display: inline-block;
font-family: var(--fim-font-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand-dark);
background-color: rgba(246, 162, 30, 0.1);
border: 1px solid rgba(246, 162, 30, 0.2);
padding: 0.2rem 0.5rem;
border-radius: var(--fim-radius);
margin-bottom: 0.9rem;
line-height: 1;
}
.fim-method-card.wp-block-column h3,
.fim-method-grid .wp-block-column h3 {
font-family: var(--fim-font-display);
font-size: 1.4rem;
font-weight: 400;
color: var(--fim-slate);
letter-spacing: -0.01em;
margin-top: 0.9rem;
margin-bottom: 0.5rem;
}
.fim-method-card.wp-block-column p,
.fim-method-grid .wp-block-column p {
font-size: 0.82rem;
color: var(--fim-mid);
line-height: 1.6;
font-weight: 300;
}
/* Same fix for engagement cards */
.fim-engagement-card.wp-block-column .fim-engagement-duration,
.fim-engagements-grid .wp-block-column .fim-engagement-duration {
display: block;
font-family: var(--fim-font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fim-brand);
margin-bottom: 0.6rem;
}
.fim-engagement-card.wp-block-column .fim-engagement-who,
.fim-engagements-grid .wp-block-column .fim-engagement-who {
display: block;
font-family: var(--fim-font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 1.1rem;
}
.fim-engagement-card.wp-block-column h3,
.fim-engagements-grid .wp-block-column h3 {
font-family: var(--fim-font-display);
font-size: 1.35rem;
font-weight: 300;
color: var(--fim-white);
letter-spacing: -0.01em;
margin-top: 0.35rem;
margin-bottom: 0.35rem;
}
.fim-engagement-card.wp-block-column p,
.fim-engagements-grid .wp-block-column p {
font-size: 0.83rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
font-weight: 300;
}
/* Same fix for proof cards */
.fim-proof-card.wp-block-column .fim-proof-meta,
.fim-proof-grid .wp-block-column .fim-proof-meta {
font-size: 0.77rem;
color: var(--fim-mid);
font-family: var(--fim-font-body);
font-weight: 400;
line-height: 1.5;
}
.fim-proof-card.wp-block-column .fim-proof-meta strong,
.fim-proof-grid .wp-block-column .fim-proof-meta strong {
display: block;
font-weight: 500;
color: var(--fim-ink);
margin-bottom: 0.1rem;
}
.fim-proof-card.wp-block-column blockquote,
.fim-proof-grid .wp-block-column blockquote {
font-family: var(--fim-font-display);
font-size: 1rem;
font-weight: 300;
font-style: italic;
line-height: 1.55;
color: var(--fim-slate);
border-left: none;
padding-left: 0;
margin-bottom: 1.1rem;
}
/* ============================================================
NAV - DROPDOWN & MOBILE MENU
These extend the base nav styles already in the file.
============================================================ */
/* Nav list */
.fim-nav__list {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.fim-nav__item {
position: relative;
}
/* Dropdown trigger button */
.fim-nav__dropdown-trigger {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.25rem;
}
.fim-nav__caret {
font-size: 0.6rem;
transition: transform var(--fim-transition);
display: inline-block;
}
.fim-nav__item.is-open .fim-nav__caret {
transform: rotate(180deg);
}
/* Dropdown menu */
.fim-nav__dropdown {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
min-width: 220px;
background: var(--fim-paper);
border: 1px solid var(--fim-border);
border-radius: var(--fim-radius-card);
box-shadow: 0 4px 16px rgba(30,42,53,0.1);
list-style: none;
padding: 0.4rem 0;
margin: 0;
z-index: 200;
}
.fim-nav__item.is-open .fim-nav__dropdown {
display: block;
}
.fim-nav__dropdown-link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 1rem;
font-family: var(--fim-font-body);
font-size: 0.82rem;
font-weight: 400;
color: var(--fim-ink);
text-decoration: none;
transition: background-color var(--fim-transition), color var(--fim-transition);
border-radius: 0;
}
.fim-nav__dropdown-link:hover {
background-color: var(--fim-paper-warm);
color: var(--fim-slate);
}
.fim-nav__dropdown-link--highlight {
color: var(--fim-brand-dark);
}
.fim-nav__meta {
font-size: 0.68rem;
color: var(--fim-mid-light);
font-weight: 400;
white-space: nowrap;
}
.fim-nav__dropdown-divider {
height: 1px;
background: var(--fim-border);
margin: 0.3rem 0;
}
/* Header scrolled state */
.fim-header.is-scrolled {
box-shadow: 0 2px 12px rgba(30,42,53,0.08);
}
/* Header actions area */
.fim-header__actions {
display: flex;
align-items: center;
gap: 1rem;
}
/* Mobile toggle button */
.fim-mobile-toggle {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.fim-mobile-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--fim-ink);
border-radius: 1px;
transition: transform var(--fim-transition), opacity var(--fim-transition);
}
.fim-mobile-menu__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.fim-mobile-menu__header .fim-wordmark__future { color: rgba(255,255,255,0.9); }
.fim-mobile-menu__header .fim-wordmark__is { color: rgba(255,255,255,0.4); }
.fim-mobile-menu__header .fim-wordmark__made { color: var(--fim-brand); }
.fim-mobile-close {
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: rgba(255,255,255,0.5);
line-height: 1;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--fim-transition);
}
.fim-mobile-close:hover { color: var(--fim-white); }
.fim-mobile-nav {
padding: 2rem 1.5rem 3rem;
display: flex;
flex-direction: column;
}
.fim-mobile-nav__link {
display: block;
padding: 0.9rem 0;
font-family: var(--fim-font-display);
font-size: 1.6rem;
font-weight: 300;
color: rgba(255,255,255,0.85);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
letter-spacing: -0.015em;
transition: color var(--fim-transition);
}
.fim-mobile-nav__link:hover { color: var(--fim-white); }
.fim-mobile-nav__link--sub {
font-family: var(--fim-font-body);
font-size: 0.95rem;
font-weight: 300;
color: rgba(255,255,255,0.5);
padding: 0.5rem 0 0.5rem 1rem;
border-bottom: none;
letter-spacing: 0;
}
.fim-mobile-nav__link--sub:hover { color: rgba(255,255,255,0.85); }
.fim-mobile-nav__group {
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 0.5rem;
}
.fim-mobile-nav__group-label {
font-family: var(--fim-font-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.28);
padding: 0.9rem 0 0.4rem;
}
/* Overlay not needed - menu is full screen */
.fim-mobile-overlay { display: none !important; }
/* Show mobile elements on small screens */
@media (max-width: 860px) {
.fim-nav { display: none; }
.fim-mobile-toggle { display: flex; }
.fim-mobile-menu { display: block; }
}
/* ============================================================
TOUCH / MOBILE INTERACTION
============================================================ */
/* Ensure tappable elements give feedback on touch devices */
.fim-btn,
.fim-nav-link,
.fim-nav-cta,
.fim-mobile-toggle,
.fim-mobile-close,
.fim-path-card,
.fim-tool-card,
.fim-engagement-link,
.fim-path-arrow,
a {
cursor: pointer;
-webkit-tap-highlight-color: rgba(246, 162, 30, 0.15);
touch-action: manipulation; /* removes 300ms tap delay on mobile */
}
/* Minimum touch target size - 44px as per Apple HIG / WCAG */
.fim-mobile-toggle {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.fim-mobile-close {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Button active state - visual press feedback on touch */
.fim-btn:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
.fim-path-card:active {
background-color: var(--fim-paper-warm);
}
.fim-tool-card:active {
border-color: var(--fim-brand);
}/* ============================================================
MENU PANEL
Slides in from the right on all screen sizes.
480px wide on desktop, full-width on mobile.
Backdrop dims the rest of the page.
============================================================ */
/* Backdrop */
.fim-menu-backdrop {
position: fixed;
inset: 0;
background: rgba(30, 42, 53, 0.55);
z-index: 298;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.fim-menu-backdrop.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Panel */
.fim-mobile-menu {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(480px, 100vw);
background: var(--fim-slate);
z-index: 300;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
}
.fim-mobile-menu.is-open {
transform: translateX(0);
}
/* Panel header */
.fim-mobile-menu__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: sticky;
top: 0;
background: var(--fim-slate);
z-index: 1;
}
.fim-mobile-menu__header .fim-wordmark__future { color: rgba(255,255,255,0.9); }
.fim-mobile-menu__header .fim-wordmark__is { color: rgba(255,255,255,0.4); }
.fim-mobile-menu__header .fim-wordmark__made { color: var(--fim-brand); }
/* Close button */
.fim-mobile-close {
background: none;
border: none;
font-size: 1.1rem;
cursor: pointer;
color: rgba(255,255,255,0.45);
line-height: 1;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--fim-transition);
border-radius: var(--fim-radius);
}
.fim-mobile-close:hover { color: var(--fim-white); }
/* Nav content - fades in slightly after panel slides in */
.fim-mobile-nav {
padding: 2rem 2rem 3rem;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateX(12px);
transition: opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s;
}
.fim-mobile-menu.is-open .fim-mobile-nav {
opacity: 1;
transform: translateX(0);
}
/* Top-level nav links */
.fim-mobile-nav__link {
display: block;
padding: 0.9rem 0;
font-family: var(--fim-font-display);
font-size: 1.5rem;
font-weight: 300;
color: rgba(255,255,255,0.85);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
letter-spacing: -0.015em;
transition: color var(--fim-transition);
}
.fim-mobile-nav__link:hover { color: var(--fim-white); }
.fim-mobile-nav__link:active { color: var(--fim-brand); }
/* Sub-links */
.fim-mobile-nav__link--sub {
font-family: var(--fim-font-body);
font-size: 0.9rem;
font-weight: 300;
color: rgba(255,255,255,0.5);
padding: 0.45rem 0 0.45rem 1rem;
border-bottom: none;
letter-spacing: 0;
}
.fim-mobile-nav__link--sub:hover { color: rgba(255,255,255,0.85); }
/* Group container */
.fim-mobile-nav__group {
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 0.5rem;
}
/* Group label */
.fim-mobile-nav__group-label {
font-family: var(--fim-font-body);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.28);
padding: 0.9rem 0 0.4rem;
display: block;
}
/* Overlay - replaced by backdrop above */
.fim-mobile-overlay { display: none !important; }
/* Responsive - full width on small screens */
@media (max-width: 520px) {
.fim-mobile-menu {
width: 100vw;
box-shadow: none;
}
}
/* Always hide desktop nav - single menu system */
@media (min-width: 861px) {
.fim-nav { display: none; }
}
/* ============================================================
TOUCH / MOBILE INTERACTION
============================================================ */
/* Ensure tappable elements give feedback on touch devices */
.fim-btn,
.fim-nav-link,
.fim-nav-cta,
.fim-mobile-toggle,
.fim-mobile-close,
.fim-path-card,
.fim-tool-card,
.fim-engagement-link,
.fim-path-arrow,
a {
cursor: pointer;
-webkit-tap-highlight-color: rgba(246, 162, 30, 0.15);
touch-action: manipulation; /* removes 300ms tap delay on mobile */
}
/* Minimum touch target size - 44px as per Apple HIG / WCAG */
.fim-mobile-toggle {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.fim-mobile-close {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Button active state - visual press feedback on touch */
.fim-btn:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
.fim-path-card:active {
background-color: var(--fim-paper-warm);
}
.fim-tool-card:active {
border-color: var(--fim-brand);
}
/* ============================================================
HEADER CTA
Amber button in header - always visible on all screen sizes
============================================================ */
.fim-header-cta {
font-size: 0.8rem !important;
padding: 0.6rem 1.2rem !important;
white-space: nowrap;
}
/* Header actions - CTA + hamburger side by side */
.fim-header__actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* ============================================================
MENU PANEL CTA
Amber button at the bottom of the nav menu - distinct from
nav links, works on the dark slate background
============================================================ */
.fim-menu-cta {
display: block;
margin-top: 2rem;
padding: 0.85rem 1.5rem;
background-color: var(--fim-brand);
color: var(--fim-slate) !important;
font-family: var(--fim-font-body);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
border-radius: var(--fim-radius);
transition: background-color var(--fim-transition);
border: none;
}
.fim-menu-cta:hover {
background-color: var(--fim-brand-dark);
color: var(--fim-white) !important;
}
/* ============================================================
FOOTER LAYOUT
============================================================ */
.fim-footer {
border-top: 1px solid var(--fim-border);
padding: 2.5rem 0 1.5rem;
}
.fim-footer__top {
display: flex;
justify-content: space-between;
align-items: start;
gap: 2rem;
flex-wrap: wrap;
}
.fim-footer__nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
justify-content: flex-end;
align-items: center;
}
.fim-footer__nav .fim-nav-link {
font-size: 0.82rem;
padding: 0.3rem 0.6rem;
}
.fim-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid var(--fim-border);
font-size: 0.75rem;
color: var(--fim-mid);
}
@media (max-width: 600px) {
.fim-footer__top {
flex-direction: column;
gap: 1.5rem;
}
.fim-footer__nav {
justify-content: flex-start;
gap: 0.25rem 0.25rem;
}
.fim-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
/* ============================================================
LOGO & WORDMARK
Roboto is the fixed font for the FutureIsMade wordmark.
Never substitute with Fraunces or DM Sans.
============================================================ */
/* Header / menu wordmark — Roboto, three-colour treatment */
.fim-header-logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
flex-shrink: 0;
}
.fim-header-mark {
height: 28px;
width: 28px;
display: block;
flex-shrink: 0;
object-fit: contain;
}
.fim-logo-word {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 0;
}
/* Three-colour wordmark — brand book specification */
.fim-logo-future { color: var(--fim-ink); }
.fim-logo-is { color: var(--fim-mid); }
.fim-logo-made { color: var(--fim-brand-dark); }
/* On dark backgrounds (mobile menu header) */
.fim-mobile-menu__header .fim-logo-future { color: rgba(255,255,255,0.9); }
.fim-mobile-menu__header .fim-logo-is { color: rgba(255,255,255,0.4); }
.fim-mobile-menu__header .fim-logo-made { color: var(--fim-brand); }
/* Footer SVG lockup */
.fim-footer-logo-link {
display: inline-block;
text-decoration: none;
}
.fim-footer-logo-img {
height: 40px;
width: auto;
max-width: 200px;
display: block;
object-fit: contain;
}
@media (max-width: 600px) {
.fim-footer-logo-img {
height: 32px;
}
}
/* ============================================================
SHARED PROGRAMME COMPONENTS
Used across: intensive, launchpad, accelerator
============================================================ */
/* Price card */
.fim-price-card {
background: var(--fim-paper-warm);
border: 1px solid var(--fim-border);
border-radius: var(--fim-radius-card);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.fim-price-amount {
font-family: var(--fim-font-display);
font-size: 2.8rem;
font-weight: 300;
color: var(--fim-slate);
letter-spacing: -0.03em;
line-height: 1;
}
.fim-price-note {
font-size: 0.8rem;
color: var(--fim-mid);
font-weight: 300;
line-height: 1.5;
}
/* Founding client badge */
.fim-founding-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(246,162,30,0.1);
border: 1px solid rgba(246,162,30,0.3);
border-radius: var(--fim-radius);
padding: 0.35rem 0.65rem;
font-family: var(--fim-font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fim-brand-dark);
}
/* ============================================================
SHARED YOU/ PATH COMPONENTS
Used across: freelancer, consultant, corporate-manager
============================================================ */
a.fim-engagement-card {
text-decoration: none;
color: inherit;
display: block;
}