/* =====================================================================
FaithTech London - Colors & Type
---------------------------------------------------------------------
Drop-in CSS for any FaithTech London surface (event pages, decks,
prototypes, mocks). Loads Inter (substitute for the paid brand font
Noi Grotesk) and JetBrains Mono from Google Fonts.
===================================================================== */
/* Fonts (Inter + JetBrains Mono) are loaded via +
in each page for performance, instead of a render-blocking @import. */
:root {
/* ---------- Brand colour tokens ---------- */
--ft-yellow-100: #FFF737; /* Primary brand background. London "lozenge" yellow. */
--ft-yellow-200: #FFD700; /* Secondary accent. Used inside the BUILD wordmark and small highlights. */
--ft-black: #16160C; /* Near-black. All text. All logos. NEVER colour the logo anything else. */
--ft-white: #FFFFFF; /* Alternative background. */
/* Warm neutral greys (for soft backgrounds, dividers, cards on white) */
--ft-grey-100: #F5F0F0; /* Lightest. Card fill on white. */
--ft-grey-200: #E9E7E4; /* Page background alt. */
--ft-grey-300: #E4E0D8; /* Borders, dividers. */
--ft-grey-500: #C6C5BB; /* Muted text on light. */
/* Pegboard dot pattern - opacity-based so it adapts to any background */
--ft-grid-dot: rgba(22, 22, 12, 0.18);
--ft-grid-dot-light: rgba(22, 22, 12, 0.10);
--ft-grid-dot-on-yellow: rgba(22, 22, 12, 0.12);
--ft-grid-dot-on-black: rgba(255, 255, 255, 0.10);
/* ---------- Semantic colour tokens ---------- */
--ft-bg: var(--ft-yellow-100);
--ft-bg-alt: var(--ft-white);
--ft-bg-neutral: var(--ft-grey-200);
--ft-bg-dark: var(--ft-black);
--ft-fg: var(--ft-black);
--ft-fg-on-dark: var(--ft-white);
--ft-fg-muted: rgba(22, 22, 12, 0.65);
--ft-fg-faint: rgba(22, 22, 12, 0.45);
--ft-border: var(--ft-grey-300);
--ft-accent: var(--ft-yellow-100);
--ft-accent-2: var(--ft-yellow-200);
/* ---------- Type system ---------- */
--ft-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--ft-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* When the licensed brand font is available, swap --ft-font-sans for 'Noi Grotesk', Inter, ... */
/* Display scale - confident, tight, weights 700-900 */
--ft-display-xl: 96px; /* Huge hero numerals (1080×1920 stories) */
--ft-display-lg: 72px; /* Page-defining headlines */
--ft-display-md: 56px;
--ft-display-sm: 40px;
--ft-h1: 32px;
--ft-h2: 24px;
--ft-h3: 20px;
--ft-body-lg: 18px;
--ft-body: 16px;
--ft-body-sm: 14px;
--ft-caption: 12px;
--ft-eyebrow: 12px;
--ft-tracking-tight: -0.025em; /* Display */
--ft-tracking-snug: -0.015em; /* H2/H3 */
--ft-tracking-normal: 0;
--ft-tracking-wide: 0.14em; /* Eyebrows + mono labels */
/* ---------- Spacing (8px base) ---------- */
--ft-space-1: 4px;
--ft-space-2: 8px; /* The "bit" unit. Pixel-art rhythm. */
--ft-space-3: 12px;
--ft-space-4: 16px;
--ft-space-5: 24px;
--ft-space-6: 32px;
--ft-space-7: 48px;
--ft-space-8: 64px;
--ft-space-9: 96px;
/* ---------- Edges ---------- */
--ft-radius: 0; /* SHARP corners. No exceptions inside the system. */
--ft-border-width: 2px; /* Default crisp black rule. */
--ft-border-width-thick: 6px; /* Top-edge "tab" on modular cards. */
/* ---------- Pegboard grid background ---------- */
--ft-grid-size: 16px;
--ft-grid-dot-size: 1.4px;
}
/* =====================================================================
Base
===================================================================== */
html, body {
font-family: var(--ft-font-sans);
color: var(--ft-fg);
background: var(--ft-bg);
font-size: var(--ft-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* =====================================================================
Semantic type
===================================================================== */
.ft-display-xl, .ft-display-lg, .ft-display-md, .ft-display-sm,
h1, h2, h3, .ft-h1, .ft-h2, .ft-h3 {
font-family: var(--ft-font-sans);
font-weight: 800;
letter-spacing: var(--ft-tracking-tight);
line-height: 1.05;
text-wrap: balance;
}
.ft-display-xl { font-size: var(--ft-display-xl); font-weight: 900; line-height: 0.95; }
.ft-display-lg { font-size: var(--ft-display-lg); font-weight: 900; line-height: 0.98; }
.ft-display-md { font-size: var(--ft-display-md); }
.ft-display-sm { font-size: var(--ft-display-sm); }
h1, .ft-h1 { font-size: var(--ft-h1); font-weight: 800; line-height: 1.1; }
h2, .ft-h2 { font-size: var(--ft-h2); font-weight: 800; line-height: 1.15; letter-spacing: var(--ft-tracking-snug); }
h3, .ft-h3 { font-size: var(--ft-h3); font-weight: 700; letter-spacing: var(--ft-tracking-snug); }
p, .ft-p {
font-size: var(--ft-body);
line-height: 1.55;
text-wrap: pretty;
}
.ft-lead {
font-size: var(--ft-body-lg);
font-weight: 500;
line-height: 1.5;
}
.ft-small { font-size: var(--ft-body-sm); }
.ft-eyebrow {
font-family: var(--ft-font-mono);
font-size: var(--ft-eyebrow);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ft-tracking-wide);
display: inline-flex;
align-items: center;
gap: 8px;
}
.ft-eyebrow::before {
content: "";
width: 8px;
height: 8px;
background: currentColor;
display: inline-block;
flex-shrink: 0;
}
.ft-mono, code, kbd {
font-family: var(--ft-font-mono);
font-feature-settings: "ss01", "ss02";
}
/* The signature highlight - yellow background through a phrase */
.ft-accent-mark {
background: var(--ft-yellow-100);
padding: 0 0.18em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
a {
color: var(--ft-black);
text-decoration: none;
border-bottom: 1.5px solid currentColor;
transition: background 120ms ease;
}
a:hover { background: var(--ft-yellow-100); }
/* =====================================================================
Building-block utilities
===================================================================== */
/* The pegboard - 16px grid of 1.4px dots. Use on yellow OR light bgs. */
.ft-pegboard {
background-image: radial-gradient(circle at 4px 4px,
var(--ft-grid-dot) var(--ft-grid-dot-size),
transparent var(--ft-grid-dot-size));
background-size: var(--ft-grid-size) var(--ft-grid-size);
}
.ft-pegboard--on-yellow {
background-image: radial-gradient(circle at 4px 4px,
var(--ft-grid-dot-on-yellow) var(--ft-grid-dot-size),
transparent var(--ft-grid-dot-size));
background-size: var(--ft-grid-size) var(--ft-grid-size);
}
.ft-pegboard--on-black {
background-image: radial-gradient(circle at 4px 4px,
var(--ft-grid-dot-on-black) 1.2px,
transparent 1.2px);
background-size: var(--ft-grid-size) var(--ft-grid-size);
}
/* The "bit" - 8px square */
.ft-bit {
display: inline-block;
width: 8px;
height: 8px;
background: var(--ft-black);
flex-shrink: 0;
}
.ft-bit--yellow { background: var(--ft-yellow-200); }
.ft-bit--white { background: var(--ft-white); }
.ft-bit--lg { width: 16px; height: 16px; }