/* ========================================================================= IN.SPIRED.it — Design Tokens Sampled directly from the logo. Dark-theme first, with light variants. ========================================================================= */ /* -------- Fonts (Google Fonts substitution — flag to user) -------------- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ========================================================================= COLOR — Teal scale (sampled from logo waves & sky) ========================================================================= */ --teal-50: #E8F7F6; /* near-white aqua wash */ --teal-100: #CFEFEC; --teal-200: #B0E0E0; /* logo pale aqua patch */ --teal-300: #80D0D0; /* logo mid sky */ --teal-400: #50C0C0; /* logo bright wave */ --teal-500: #20A0A0; /* logo signature teal */ --teal-600: #0E7C72; /* primary CTA — deeper, grounded teal; light text */ --teal-700: #208090; /* logo deep wave */ --teal-800: #107080; --teal-900: #0A4750; /* deepest accent */ /* Brand colors — semantic aliases for the teal scale */ --brand: var(--teal-600); --brand-soft: var(--teal-500); --brand-deep: var(--teal-800); --brand-glow: #1FAFA0; /* used for highlights / focus rings only */ /* ========================================================================= ACCENT PALETTE — varied, deliberately NON-status Teal stays the lead. The counterpoints are jewel tones from the cool / magenta side of the wheel — violet, azure, orchid — chosen so NONE read as a traffic-light / status colour (no red, amber/yellow, or "go" green). Used for categorisation (one per service), illustration and decoration. ========================================================================= */ --violet-300: #C7AEF5; --violet-400: #B194EE; --violet-500: #9B73E6; /* purple counterpoint */ --violet-600: #7E54C9; --azure-300: #9EC6F5; --azure-400: #77ACEF; --azure-500: #4F8DE8; /* clear blue */ --azure-600: #3A72C9; --orchid-300: #E6ACDB; --orchid-400: #D88FCB; --orchid-500: #C56FB8; /* magenta / orchid */ --orchid-600: #A8559B; /* Accent semantic aliases */ --accent-1: var(--brand); /* teal — primary */ --accent-2: var(--violet-500); /* violet — secondary */ --accent-3: var(--azure-500); /* azure — tertiary */ --accent-4: var(--orchid-500); /* orchid — quaternary */ --accent-2-soft: rgba(155,115,230,0.12); --accent-3-soft: rgba(79,141,232,0.12); --accent-4-soft: rgba(197,111,184,0.12); /* Elevated "feature" card shadow (the "Meet the man" card aesthetic) */ --shadow-panel: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 40px rgba(0,0,0,0.35); /* ========================================================================= HEADING TINTS — muted, per-section heading colour variety. Each tints a WHOLE heading one soft colour (never within a sentence, never vibrant). Light enough to stay legible on the dark surface. ========================================================================= */ --head-teal: #C7E8E2; --head-violet: #D5CAF0; --head-azure: #C7D9F2; --head-orchid: #E9D1E3; --head-plain: var(--fg-1); /* ========================================================================= INK — Warm-black neutrals (sampled #231F20, extended to a full scale) The "warm" cast (slight red shift) is intentional — pure cold grays fight the teal. All neutrals carry a hint of teal undertone. ========================================================================= */ --ink-50: #F4F4F2; /* paper / cream — light surfaces */ --ink-100: #E8E8E5; --ink-200: #C9CCCB; --ink-300: #8E9695; --ink-400: #5A6464; --ink-500: #3A4243; --ink-600: #262C2D; --ink-700: #1A1F20; --ink-800: #12191A; --ink-900: #0A0F10; /* deepest dark — page bg */ --ink-950: #06090A; /* truest black, used sparingly */ /* ========================================================================= SEMANTIC TOKENS — Dark theme (default) ========================================================================= */ --bg: var(--ink-900); --bg-elevated: var(--ink-800); --bg-sunken: var(--ink-950); --surface: var(--ink-700); --surface-hi: var(--ink-600); --fg: #F2F4F3; --fg-1: #F2F4F3; /* primary text */ --fg-2: #C9CCCB; /* secondary text */ --fg-3: #8E9695; /* tertiary / metadata */ --fg-4: #5A6464; /* disabled / hint */ --border: rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16); --divider: rgba(255,255,255,0.06); --accent: var(--brand); --accent-fg: #F4F9F8; /* near-white text on brand fill */ --accent-soft: rgba(14,124,114,0.16); --accent-glow: rgba(31,175,160,0.18); /* Status (kept restrained — teal is the only saturated brand color) */ --success: #3CC78A; --warning: #E8B14A; --danger: #E66A6A; --info: var(--teal-400); /* ========================================================================= TYPE — three families, intentional contrast ========================================================================= */ --font-display: 'Space Grotesk', 'Söhne', 'Inter Tight', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', 'Söhne', system-ui, -apple-system, sans-serif; --font-accent: 'Plus Jakarta Sans', system-ui, sans-serif; /* used italic + brand color */ --font-serif: var(--font-accent); /* backward-compat alias */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Type scale — fluid-feel, designed for marketing site at 1440px */ --t-display: clamp(48px, 6.5vw, 96px); /* @kind font */ --t-h1: clamp(36px, 4.2vw, 64px); /* @kind font */ --t-h2: clamp(28px, 2.8vw, 44px); /* @kind font */ --t-h3: 24px; --t-h4: 18px; --t-eyebrow: 12px; /* uppercase label */ --t-body-lg: 20px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 12px; --t-mono: 13px; --lh-display: 0.96; /* @kind font */ --lh-heading: 1.08; /* @kind font */ --lh-body: 1.55; /* @kind font */ --lh-tight: 1.2; /* @kind font */ --tr-display: -0.025em; /* tighter for big type */ --tr-heading: -0.015em; --tr-body: -0.005em; --tr-eyebrow: 0.14em; /* uppercase needs air */ /* ========================================================================= SPACING — 4px base, eight-step scale ========================================================================= */ --s-0: 0; /* @kind spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ========================================================================= RADII — restrained; the brand's geometry leans architectural ========================================================================= */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* ========================================================================= SHADOWS — for dark theme, use subtle glow + crisp inner highlight ========================================================================= */ --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.45); --shadow-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(0,0,0,0.55); --shadow-glow: 0 0 0 1px rgba(14,124,114,0.45), 0 8px 32px rgba(14,124,114,0.22); --shadow-focus: 0 0 0 3px rgba(31,175,160,0.32); /* ========================================================================= MOTION — restrained, confident ========================================================================= */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 480ms; /* @kind other */ /* ========================================================================= LAYOUT ========================================================================= */ --container: 1280px; --container-tight: 960px; --gutter: 24px; } /* ========================================================================= LIGHT THEME — paper surfaces for select sections (testimonials, etc.) ========================================================================= */ [data-theme='light'] { --bg: var(--ink-50); --bg-elevated: #FFFFFF; --bg-sunken: #ECECE8; --surface: #FFFFFF; --surface-hi: #FFFFFF; --fg-1: var(--ink-900); --fg-2: var(--ink-500); --fg-3: var(--ink-400); --fg-4: var(--ink-300); --border: rgba(10,15,16,0.08); --border-strong:rgba(10,15,16,0.16); --divider: rgba(10,15,16,0.06); --accent: var(--teal-700); --accent-fg: #FFFFFF; --accent-soft: rgba(32,128,144,0.10); --shadow-1: 0 1px 2px rgba(10,15,16,0.06); --shadow-2: 0 4px 14px rgba(10,15,16,0.08); --shadow-3: 0 12px 40px rgba(10,15,16,0.12); } /* ========================================================================= SEMANTIC ELEMENT STYLES ========================================================================= */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); margin: 0; text-wrap: balance; } h1 { font-size: var(--t-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 500; } h2 { font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 500; } h3 { font-size: var(--t-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-heading); font-weight: 600; } h4 { font-size: var(--t-h4); line-height: var(--lh-tight); letter-spacing: 0; font-weight: 600; } .display { font-family: var(--font-display); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 500; text-wrap: balance; } /* The signature italic moment — a humanist sans italic that creates type contrast against the geometric display face. Used on a single word per headline to echo the wordmark's playful spire substitution. */ .italic-accent { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--brand); letter-spacing: -0.01em; } .eyebrow { font-family: var(--font-display); font-size: var(--t-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--brand); } .mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0; } p, li { text-wrap: pretty; } a { color: inherit; } ::selection { background: var(--brand); color: var(--accent-fg); }