/* * CELL TECH — Brand CSS Variables * ========================================== * Drop this file into your stylesheet (or @import it) to get * consistent brand colours and typography across the site. * * Usage: * @import url('./celltech-brand.css'); * body { background: var(--ct-bg); color: var(--ct-ink); } * h1 { font-family: var(--ct-font); font-weight: 200; } */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap'); :root { /* ----- Primary colours ----- */ --ct-teal: #0F5E4F; /* Primary — flat teal, 95% of uses */ --ct-teal-dark: #073A30; /* Deep teal, gradient stop / hover states */ --ct-cyan: #22c1e0; /* Cyan, gradient origin / accent */ --ct-ink: #0A0A0A; /* Near-black for body text */ --ct-paper: #F5F2EB; /* Warm off-white, the brand "paper" colour */ --ct-white: #FFFFFF; /* ----- Support colours ----- */ --ct-muted: #888888; --ct-border: #0000001F; --ct-surface: #FAFAF7; /* Slightly lifted off paper for cards */ --ct-dark-bg: #0A0F1A; /* Background for gradient hero sections */ /* ----- Gradients ----- */ --ct-gradient-hero: linear-gradient(135deg, #22c1e0, #0F5E4F); --ct-gradient-teal: linear-gradient(180deg, #1E8A70, #073A30); /* ----- Typography ----- */ --ct-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --ct-weight-thin: 200; --ct-weight-regular: 400; --ct-weight-medium: 500; /* ----- Letter spacing for wordmark-style headings ----- */ --ct-tracking-hero: 0.06em; /* Large tracked caps */ --ct-tracking-label: 0.15em; /* Small caps / taglines */ /* ----- Radius ----- */ --ct-radius-sm: 4px; --ct-radius-md: 8px; --ct-radius-lg: 16px; --ct-radius-squircle: 22%; /* For app-icon style squircles */ } /* Optional dark mode override — opt in by adding class="dark" to or */ .dark { --ct-teal: #3EA58D; --ct-ink: #F0F0EC; --ct-paper: #1F1D1A; --ct-surface: #242423; --ct-muted: #999; --ct-border: #FFFFFF22; } /* Utility classes — optional, use if convenient */ .ct-wordmark { font-family: var(--ct-font); font-weight: var(--ct-weight-thin); letter-spacing: var(--ct-tracking-hero); text-transform: uppercase; color: var(--ct-teal); } .ct-tagline { font-family: var(--ct-font); font-weight: var(--ct-weight-regular); font-size: 0.7rem; letter-spacing: var(--ct-tracking-label); text-transform: uppercase; opacity: 0.55; }