/* ============================================================ NORMEDISIN — design tokens Derived from Flaximus DS (built atop IBM Carbon v11, Apache-2.0). Default theme: g100 (dark). Add .theme-g10 to for light. IBM Plex is loaded from Google Fonts so this file is self-contained. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Serif:wght@300;400;600&family=IBM+Plex+Sans+Condensed:wght@300;400;500;600;700&display=swap'); /* ============================================================ 1. CORE COLOR PALETTE — Carbon v11 swatches ============================================================ */ :root { --black-100: #000000; --white-0: #ffffff; --gray-10: #f4f4f4; --gray-20: #e0e0e0; --gray-30: #c6c6c6; --gray-40: #a8a8a8; --gray-50: #8d8d8d; --gray-60: #6f6f6f; --gray-70: #525252; --gray-80: #393939; --gray-90: #262626; --gray-100: #161616; --blue-10: #edf5ff; --blue-20: #d0e2ff; --blue-30: #a6c8ff; --blue-40: #78a9ff; --blue-50: #4589ff; --blue-60: #0f62fe; --blue-70: #0043ce; --blue-80: #002d9c; --red-50: #fa4d56; --red-60: #da1e28; --green-40: #42be65; --green-50: #24a148; --yellow-30:#f1c21b; --orange-40:#ff832b; --purple-40:#be95ff; --purple-60:#8a3ffc; --teal-40: #08bdba; --cyan-40: #33b1ff; --magenta-50:#ee5396; --flaximus-accent: var(--purple-60); --flaximus-accent-soft: var(--purple-40); --flaximus-accent-deep: #491d8b; /* Neon spectrum — used for brand moments only */ --neon-1: #ff3d8a; --neon-2: #c668ff; --neon-3: #4d8bff; --neon-4: #29e0ff; --neon-5: #36f0a6; --neon-6: #f5e94a; --neon-spectrum: linear-gradient( 90deg, var(--neon-1) 0%, var(--neon-2) 20%, var(--neon-3) 40%, var(--neon-4) 60%, var(--neon-5) 80%, var(--neon-6) 100% ); --neon-spectrum-diag: linear-gradient( 135deg, var(--neon-1) 0%, var(--neon-2) 25%, var(--neon-3) 50%, var(--neon-4) 75%, var(--neon-5) 100% ); } /* ============================================================ 2. SEMANTIC TOKENS — DARK (g100, default) ============================================================ */ :root, :root.theme-g100 { --color-scheme: dark; --background: var(--gray-100); --background-inverse: var(--gray-10); --background-brand: var(--blue-60); --background-hover: rgba(141,141,141,0.16); --background-active: rgba(141,141,141,0.40); --background-selected: rgba(141,141,141,0.24); --layer-01: var(--gray-90); --layer-02: var(--gray-80); --layer-03: var(--gray-70); --layer-hover-01: #333333; --field-01: var(--gray-90); --field-02: var(--gray-80); --border-subtle-00: var(--gray-80); --border-subtle-01: var(--gray-70); --border-strong-01: var(--gray-60); --border-interactive: var(--blue-50); --text-primary: var(--gray-10); --text-secondary: var(--gray-30); --text-placeholder: rgba(244,244,244,0.4); --text-helper: var(--gray-40); --text-error: var(--red-50); --text-on-color: var(--white-0); --link-primary: var(--blue-40); --link-primary-hover: var(--blue-30); --icon-primary: var(--gray-10); --icon-secondary: var(--gray-30); --support-error: var(--red-50); --support-success: var(--green-40); --support-warning: var(--yellow-30); --support-info: var(--blue-50); --interactive: var(--blue-50); --overlay: rgba(0,0,0,0.6); --shadow: rgba(0,0,0,0.8); --ai-aura-start: rgba(69,137,255,0.16); --ai-aura-end: rgba(0,0,0,0); --ai-border-strong: var(--blue-40); --ai-border-start: rgba(166,200,255,0.36); --ai-border-end: var(--blue-50); --chat-bubble-user: var(--gray-80); --chat-bubble-agent: var(--gray-90); --chat-bubble-border: var(--gray-70); --chat-shell-background: var(--gray-90); --chat-prompt-background: var(--gray-100); } /* ============================================================ 2b. SEMANTIC TOKENS — LIGHT (g10) ============================================================ */ :root.theme-g10 { --color-scheme: light; --background: var(--gray-10); --background-inverse: var(--gray-100); --background-brand: var(--blue-60); --background-hover: rgba(141,141,141,0.12); --background-active: rgba(141,141,141,0.28); --background-selected: rgba(141,141,141,0.16); --layer-01: #ffffff; --layer-02: var(--gray-10); --layer-03: var(--gray-20); --layer-hover-01: var(--gray-20); --field-01: #ffffff; --field-02: var(--gray-10); --border-subtle-00: var(--gray-20); --border-subtle-01: var(--gray-30); --border-strong-01: var(--gray-50); --border-interactive: var(--blue-60); --text-primary: var(--gray-100); --text-secondary: var(--gray-70); --text-placeholder: rgba(22,22,22,0.4); --text-helper: var(--gray-60); --text-error: var(--red-60); --text-on-color: var(--white-0); --link-primary: var(--blue-70); --link-primary-hover: var(--blue-60); --icon-primary: var(--gray-100); --icon-secondary: var(--gray-70); --support-error: var(--red-60); --support-success: var(--green-50); --support-warning: var(--yellow-30); --support-info: var(--blue-70); --interactive: var(--blue-60); --overlay: rgba(22,22,22,0.4); --shadow: rgba(22,22,22,0.15); --ai-aura-start: rgba(15,98,254,0.10); --ai-aura-end: rgba(0,0,0,0); --ai-border-strong: var(--blue-60); --ai-border-start: rgba(15,98,254,0.30); --ai-border-end: var(--blue-70); --chat-bubble-user: var(--gray-20); --chat-bubble-agent: #ffffff; --chat-bubble-border: var(--gray-30); --chat-shell-background: #ffffff; --chat-prompt-background: var(--gray-10); } :root.theme-g10 *::-webkit-scrollbar-thumb { background: var(--gray-40); } :root.theme-g10 *::-webkit-scrollbar-track { background: var(--gray-10); } /* ============================================================ 3. SPACING + SIZES ============================================================ */ :root { --spacing-01: 0.125rem; --spacing-02: 0.25rem; --spacing-03: 0.5rem; --spacing-04: 0.75rem; --spacing-05: 1rem; --spacing-06: 1.5rem; --spacing-07: 2rem; --spacing-08: 2.5rem; --spacing-09: 3rem; --spacing-10: 4rem; --spacing-11: 5rem; --spacing-12: 6rem; --spacing-13: 10rem; --size-xs: 1.5rem; --size-sm: 2rem; --size-md: 2.5rem; --size-lg: 3rem; --size-xl: 4rem; --size-2xl: 5rem; --radius-0: 0px; --radius-1: 2px; --radius-2: 4px; } /* ============================================================ 4. TYPOGRAPHY — IBM Plex ============================================================ */ :root { --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', monospace; --font-serif: 'IBM Plex Serif', Georgia, Times, serif; --font-condensed: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --type-12: 0.75rem; --type-14: 0.875rem; --type-16: 1rem; --type-18: 1.125rem; --type-20: 1.25rem; --type-24: 1.5rem; --type-28: 1.75rem; --type-32: 2rem; --type-36: 2.25rem; --type-42: 2.625rem; --type-54: 3.375rem; --type-68: 4.25rem; } html { font-family: var(--font-sans); color: var(--text-primary); background: var(--background); color-scheme: var(--color-scheme); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-size: var(--type-14); line-height: 1.42857; letter-spacing: 0.16px; } .label-01 { font-size: var(--type-12); font-weight: 400; line-height: 1.33333; letter-spacing: 0.32px; } .helper-text-01 { font-size: var(--type-12); line-height: 1.33333; letter-spacing: 0.32px; color: var(--text-helper); } .body-01 { font-size: var(--type-14); font-weight: 400; line-height: 1.42857; letter-spacing: 0.16px; } .body-02 { font-size: var(--type-16); font-weight: 400; line-height: 1.5; } .heading-01 { font-size: var(--type-14); font-weight: 600; line-height: 1.42857; letter-spacing: 0.16px; } .heading-02 { font-size: var(--type-16); font-weight: 600; line-height: 1.5; } .heading-03 { font-size: var(--type-20); font-weight: 400; line-height: 1.4; } .heading-04 { font-size: var(--type-28); font-weight: 400; line-height: 1.28572; } .heading-05 { font-size: var(--type-32); font-weight: 400; line-height: 1.25; } .heading-06 { font-size: var(--type-42); font-weight: 300; line-height: 1.199; } .heading-07 { font-size: var(--type-54); font-weight: 300; line-height: 1.199; } .code-01 { font-family: var(--font-mono); font-size: var(--type-12); line-height: 1.33333; letter-spacing: 0.32px; } h1 { font: 300 var(--type-42)/1.199 var(--font-sans); margin: 0; letter-spacing: 0; } h2 { font: 400 var(--type-32)/1.25 var(--font-sans); margin: 0; } h3 { font: 400 var(--type-28)/1.28572 var(--font-sans); margin: 0; } h4 { font: 400 var(--type-20)/1.4 var(--font-sans); margin: 0; } p { margin: 0; } a { color: var(--link-primary); text-decoration: none; } a:hover { color: var(--link-primary-hover); text-decoration: underline; } /* ============================================================ 5. MOTION ============================================================ */ :root { --duration-fast-01: 70ms; --duration-fast-02: 110ms; --duration-moderate-01:150ms; --duration-moderate-02:240ms; --duration-slow-01: 400ms; --easing-standard-productive: cubic-bezier(0.2, 0, 0.38, 0.9); --easing-standard-expressive: cubic-bezier(0.4, 0.14, 0.3, 1); --easing-entrance-productive: cubic-bezier(0, 0, 0.38, 0.9); } /* ============================================================ 6. Scrollbar (g100) ============================================================ */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--gray-70); } *::-webkit-scrollbar-track { background: var(--gray-90); } /* ============================================================ 7. NORMEDISIN UTILITIES — responsive, motion, interaction ============================================================ */ /* anchor offset under the 64px sticky topbar */ .np-section { scroll-margin-top: 88px; } /* responsive grids — collapse from 3/4/etc to 1 as width shrinks */ .np-grid-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; } .np-grid-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; } .np-grid-cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .np-grid-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; } .np-grid-footer { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 56px; } .np-grid-2col-shell { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 1024px) { .np-grid-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-grid-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-grid-footer { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 720px) { .np-grid-services { grid-template-columns: minmax(0, 1fr); } .np-grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-grid-cards-3 { grid-template-columns: minmax(0, 1fr); } .np-grid-cards-2 { grid-template-columns: minmax(0, 1fr); } .np-grid-footer { grid-template-columns: minmax(0, 1fr); gap: 32px; } .np-grid-2col-shell { grid-template-columns: minmax(0, 1fr); } .np-hide-sm { display: none !important; } .np-pad-section { padding-left: 20px !important; padding-right: 20px !important; } } /* topbar nav: hide labels on small */ @media (max-width: 880px) { .np-topbar-nav, .np-topbar-secondary { display: none !important; } } /* smooth height-auto animation via grid-template-rows trick */ .np-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--easing-standard-expressive); } .np-expand-open { grid-template-rows: 1fr; } .np-expand > .np-expand-inner { overflow: hidden; min-height: 0; } /* service card: background + hover + open state */ .np-card { background: var(--layer-01); transition: background 200ms var(--easing-standard-productive); } .np-card:hover { background: var(--layer-02); } .np-card.is-open { background: linear-gradient(180deg, var(--layer-02) 0%, var(--layer-01) 100%); } /* link transitions */ .np-link { color: var(--text-secondary); text-decoration: none; transition: color 70ms var(--easing-standard-productive); } .np-link:hover { color: var(--text-primary); text-decoration: none; } /* compact icon button */ .np-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid var(--border-subtle-01); cursor: pointer; color: var(--text-secondary); transition: background 70ms var(--easing-standard-productive), color 70ms var(--easing-standard-productive); } .np-icon-btn:hover { background: var(--background-hover); color: var(--text-primary); } /* respect user motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }