/* ============================================================ SINGBLUE — Global Stylesheet singblue.co · 2026 ============================================================ TABLE OF CONTENTS 1. Design Tokens (CSS Variables) 2. Reset & Base 3. Typography Utilities 4. Layout Utilities 5. Navigation 6. Footer 7. Buttons & CTAs 8. Eyebrow / Section Labels 9. Animations 10. Responsive Page-specific styles live in: - assets/css/home.css - assets/css/approach.css - assets/css/contact.css ============================================================ */ /* ───────────────────────────────────────────── 1. DESIGN TOKENS ───────────────────────────────────────────── */ :root { /* Colour */ --red: #E8443A; --red-soft: #FCE9E7; --teal: #3FA882; --ink: #111110; --ink-soft: #2a2a28; --body-clr: #3d3d3a; /* named --body-clr to avoid clash with */ --warm: #F8F5F0; --warm-2: #EFEBE3; --white: #FFFFFF; --mid: #6f6e69; --light: #E2DED6; /* Type scale */ --text-display: clamp(3.5rem, 8vw, 7.5rem); /* hero headline */ --text-h1: clamp(2.6rem, 5vw, 4.5rem); /* large section heading */ --text-h2: clamp(2rem, 3.8vw, 3.2rem); /* medium section heading */ --text-h3: clamp(1.4rem, 2.2vw, 2rem); /* card / sub-section heading */ --text-h4: 1.5rem; /* small heading */ --text-lead: 1.15rem; /* intro / hero body */ --text-body: 1.05rem; /* standard body */ --text-small: 0.92rem; /* meta, captions */ --text-eyebrow: 0.78rem; /* labels, kickers */ /* Line height */ --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.75; /* Spacing scale — use multiples of 8px */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 80px; --space-3xl: 120px; --space-4xl: 160px; /* Container widths */ --container: 1300px; --container-text: 1100px; --container-tight: 800px; /* Page horizontal padding */ --gutter: 80px; --gutter-mobile: 24px; /* Border radius */ --radius-pill: 100px; --radius-sm: 4px; /* Transitions */ --transition-fast: 0.18s ease; --transition-mid: 0.2s ease; } /* ───────────────────────────────────────────── 2. RESET & BASE ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'IBM Plex Sans', sans-serif; font-size: var(--text-body); font-weight: 400; line-height: var(--leading-body); color: var(--body-clr); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } /* ───────────────────────────────────────────── 3. TYPOGRAPHY UTILITIES ───────────────────────────────────────────── */ /* Eyebrow — small uppercase label above headings */ .eyebrow { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: var(--space-sm); } /* Eyebrow with leading bar */ .eyebrow-bar { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); position: relative; display: block; margin-bottom: var(--space-md); } .eyebrow-bar::before { content: ''; display: block; width: 24px; height: 2px; background: var(--teal); margin-bottom: 12px; } /* Heading helpers */ .text-display { font-size: var(--text-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: -0.035em; color: var(--ink); } .text-h1 { font-size: var(--text-h1); font-weight: 700; line-height: var(--leading-tight); letter-spacing: -0.025em; color: var(--ink); } .text-h2 { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.02em; color: var(--ink); } .text-h3 { font-size: var(--text-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); } .text-lead { font-size: var(--text-lead); font-weight: 400; line-height: var(--leading-body); color: var(--body-clr); } .text-body { font-size: var(--text-body); font-weight: 400; line-height: var(--leading-body); color: var(--body-clr); } .text-small { font-size: var(--text-small); line-height: var(--leading-body); } /* Colour helpers */ .text-red { color: var(--red); } .text-teal { color: var(--teal); } .text-ink { color: var(--ink); } .text-mid { color: var(--mid); } /* ───────────────────────────────────────────── 4. LAYOUT UTILITIES ───────────────────────────────────────────── */ /* Constrained container centred horizontally */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .container--text { max-width: var(--container-text); margin: 0 auto; padding: 0 var(--gutter); } .container--tight { max-width: var(--container-tight); margin: 0 auto; padding: 0 var(--gutter); } /* Standard section vertical rhythm */ .section { padding: var(--space-4xl) var(--gutter); } .section--lg { padding: 180px var(--gutter); } .section--md { padding: var(--space-3xl) var(--gutter); } /* 1px grid — used for card grids */ .grid-ruled { display: grid; gap: 1px; background: var(--light); border: 1px solid var(--light); } .grid-2col { grid-template-columns: 1fr 1fr; } .grid-3col { grid-template-columns: repeat(3, 1fr); } .grid-ruled > * { background: var(--white); } /* ───────────────────────────────────────────── 5. NAVIGATION ───────────────────────────────────────────── */ nav { position: fixed; top: 16px; left: 16px; right: 16px; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); border-radius: var(--radius-pill); border: 1px solid var(--light); box-shadow: 0 4px 24px rgba(17, 17, 16, 0.05); } .nav-logo-img { height: 28px; width: auto; display: block; } .nav-links { list-style: none; display: flex; gap: 36px; align-items: center; } .nav-links a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); transition: color var(--transition-fast); } .nav-links a:hover, .nav-links a.active { color: var(--red); } /* ───────────────────────────────────────────── 6. FOOTER ───────────────────────────────────────────── */ footer { background: var(--ink); color: rgba(255, 255, 255, 0.55); padding: 40px var(--gutter); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); } .footer-logo-img { height: 22px; width: auto; filter: brightness(0) invert(1); } .footer-meta { font-size: var(--text-small); } /* ───────────────────────────────────────────── 7. BUTTONS & CTAs ───────────────────────────────────────────── */ /* Primary pill button */ .btn { display: inline-flex; align-items: center; gap: 12px; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; font-weight: 600; padding: 18px 32px; border-radius: var(--radius-pill); border: none; cursor: pointer; transition: gap var(--transition-mid), background var(--transition-mid); white-space: nowrap; text-decoration: none; width: fit-content; } .btn--red { background: var(--red); color: var(--white); } .btn--red:hover { gap: 18px; background: var(--ink); } .btn--ink { background: var(--ink); color: var(--white); } .btn--ink:hover { gap: 18px; background: var(--red); } /* Arrow pill inside button */ .btn-arrow { width: 24px; height: 24px; background: var(--white); color: var(--red); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; transition: color var(--transition-mid); } .btn--ink .btn-arrow { color: var(--ink); } .btn--red:hover .btn-arrow, .btn--ink:hover .btn-arrow { color: var(--ink); } /* Back link */ .back-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-small); font-weight: 500; color: var(--mid); margin-bottom: var(--space-md); transition: color var(--transition-fast); } .back-link:hover { color: var(--ink); } /* ───────────────────────────────────────────── 8. EYEBROW / SECTION LABELS (already in Typography, aliased here for backwards compat with .section-label) ───────────────────────────────────────────── */ .section-label { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); position: relative; display: block; margin-bottom: var(--space-md); } .section-label::before { content: ''; display: block; width: 24px; height: 2px; background: var(--teal); margin-bottom: 12px; } /* ───────────────────────────────────────────── 9. ANIMATIONS ───────────────────────────────────────────── */ @keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────── 10. RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 900px) { :root { --gutter: var(--gutter-mobile); } nav { padding: 12px 20px; } .nav-links { display: none; } .section { padding: 100px var(--gutter-mobile); } .section--lg { padding: 100px var(--gutter-mobile); } .section--md { padding: 80px var(--gutter-mobile); } .container, .container--text, .container--tight { padding: 0 var(--gutter-mobile); } .grid-2col, .grid-3col { grid-template-columns: 1fr; } footer { padding: 40px var(--gutter-mobile); } }