/* ============================================================ KinAI Labs — Colors & Type Deep-tech AI for drug discovery. Madrid. Visual world: deep space-navy + glowing cyan biology + starfields. ============================================================ */ /* Self-hosted brand font (Poppins Regular 400 — supplied file) */ @font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Remaining Poppins weights (300, 500, 600, 700) served from Google Fonts CDN — no local files provided; CDN delivery is fine for those weights. Load in HTML : IBM Plex Sans + IBM Plex Mono still loaded from CDN as before. */ :root { /* ---------- BRAND CORE (sampled from official palette + logo) ---------- */ --kin-cyan: #35BBC4; /* bright cyan glow — primary accent */ --kin-cyan-bright: #3FD8E0; /* hover / luminous highlight */ --kin-sky: #3396B6; /* sky teal */ --kin-teal: #1D829A; /* mid teal */ --kin-blue: #0B406C; /* deep brand blue */ --kin-navy: #122A52; /* wordmark navy */ --kin-ink: #0A1B2E; /* deep space surface */ --kin-abyss: #050D17; /* near-black space background */ /* ---------- NEUTRALS ---------- */ --white: #FFFFFF; --paper: #F4F8FB; /* off-white page bg (light surfaces) */ --mist: #E4EDF3; /* light card / divider on light */ --slate-3: #C3D2DE; /* muted on light */ --slate-2: #8AA0B2; /* secondary text on light */ --slate-1: #4A5E72; /* body text on light */ /* ---------- FOREGROUND (semantic, on light) ---------- */ --fg1: var(--kin-navy); /* primary text / headings */ --fg2: var(--slate-1); /* body text */ --fg3: var(--slate-2); /* secondary / captions */ --fg4: var(--slate-3); /* disabled / faint */ /* ---------- FOREGROUND (on dark / space) ---------- */ --on-dark-1: #EAF4F8; /* primary text on dark */ --on-dark-2: #A9C2D2; /* secondary on dark */ --on-dark-3: #5E7A8E; /* faint on dark */ /* ---------- SURFACES ---------- */ --surface: var(--white); --surface-sunk: var(--paper); --surface-dark: var(--kin-ink); --surface-abyss: var(--kin-abyss); --surface-card-dark: #0F2742; /* raised card on space bg */ /* ---------- BORDERS ---------- */ --border: #DCE7EE; --border-strong: #C3D2DE; --border-dark: rgba(53,187,196,0.18); /* faint cyan hairline on space */ --border-dark-strong: rgba(53,187,196,0.38); /* ---------- SEMANTIC STATUS ---------- */ --success: #1FB6A6; --warning: #E8A93B; --danger: #E5634D; --info: var(--kin-sky); /* ---------- ACCENT GRADIENTS ---------- */ --grad-cyan: linear-gradient(135deg, #3FD8E0 0%, #1D829A 100%); --grad-deep: linear-gradient(160deg, #0B406C 0%, #0A1B2E 100%); --grad-coin: radial-gradient(circle at 38% 32%, #1D5E86 0%, #0B3360 48%, #071B33 100%); --grad-space: radial-gradient(ellipse 120% 90% at 50% 0%, #0E2C4A 0%, #0A1B2E 45%, #050D17 100%); --glow-cyan: 0 0 24px rgba(53,187,196,0.55), 0 0 4px rgba(63,216,224,0.8); /* ---------- TYPE FAMILIES ---------- */ --font-display: "Poppins", "Montserrat", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; /* ---------- TYPE SCALE (clamped, fluid) ---------- */ --fs-display: clamp(44px, 6vw, 76px); --fs-h1: clamp(34px, 4.4vw, 54px); --fs-h2: clamp(27px, 3vw, 38px); --fs-h3: 24px; --fs-h4: 19px; --fs-body-lg: 19px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12.5px; --fs-mono: 14px; /* ---------- WEIGHTS ---------- */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ---------- LINE HEIGHTS ---------- */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.55; --lh-relaxed: 1.7; /* ---------- TRACKING ---------- */ --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.04em; --track-eyebrow: 0.18em; /* uppercase eyebrows / labels */ /* ---------- SPACING (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- RADII ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --r-circle: 50%; /* ---------- SHADOWS (light surfaces) ---------- */ --shadow-xs: 0 1px 2px rgba(10,27,46,0.06); --shadow-sm: 0 2px 8px rgba(10,27,46,0.07); --shadow-md: 0 8px 24px rgba(10,27,46,0.10); --shadow-lg: 0 18px 48px rgba(10,27,46,0.14); /* Elevation on space backgrounds uses cyan glow instead of black shadow */ --shadow-glow: 0 0 0 1px rgba(53,187,196,0.18), 0 12px 40px rgba(5,13,23,0.6); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-med: 280ms; --dur-slow: 600ms; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ .kin-display { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg1); } .kin-h1 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg1); } .kin-h2 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg1); } .kin-h3 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-h3); line-height: 1.3; color: var(--fg1); } .kin-h4 { font-family: var(--font-body); font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: 1.4; color: var(--fg1); } .kin-lead { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg2); } .kin-body { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg2); } .kin-small { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg3); } .kin-eyebrow { font-family: var(--font-mono); font-weight: var(--w-medium); font-size: var(--fs-caption); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--kin-teal); } .kin-mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0; color: var(--fg2); }