/* INAVI landing — design tokens (direction 3a). * Shell palette as themeable custom properties: dark "Soft Nightfall" is the * base (:root); light "Daybreak" overrides via [data-theme="light"]. The theme * attribute is set on pre-paint by the inline script in index.html. * Reference: docs/design/inavi-landing/README.md */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Noto Sans Georgian'; src: url('/assets/fonts/noto-georgian-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Noto Sans Georgian'; src: url('/assets/fonts/noto-georgian-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Noto Sans Georgian'; src: url('/assets/fonts/noto-georgian-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Noto Sans Georgian'; src: url('/assets/fonts/noto-georgian-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* ===== Dark "Soft Nightfall" — default ===== */ :root { --font-mono: ui-monospace, Menlo, monospace; --page-bg: #0f141d; --text-base: #ccd3df; --text-strong: #e6eaf2; --text-body: #a3adc2; --text-muted: #8b93a6; --nav-link: rgba(230, 234, 242, 0.72); --hero-grad: radial-gradient(130% 120% at 50% -12%, #16203a 0%, #0f1622 58%, #0f141d 100%); --hero-blob: rgba(125, 159, 240, 0.15); --pill-bg: rgba(255, 255, 255, 0.05); --pill-brd: rgba(255, 255, 255, 0.1); --pill-text: #aeb9d6; --accent: #7d9ff0; --btn-bg: #5f7fd8; --btn-bg-hover: #5474cf; --btn-glow: rgba(95, 127, 216, 0.8); --cta2-text: #e6eaf2; --cta2-bg: rgba(255, 255, 255, 0.03); --cta2-bg-hover: rgba(255, 255, 255, 0.08); --cta2-brd: rgba(255, 255, 255, 0.16); --cue: rgba(230, 234, 242, 0.45); --toggle-bg: rgba(255, 255, 255, 0.04); --toggle-brd: rgba(255, 255, 255, 0.14); --toggle-text: #e6eaf2; --panel: #131926; --sec-plat: #0e131c; --footer-bg: #0c1119; --hairline: rgba(255, 255, 255, 0.05); --hairline-strong: rgba(255, 255, 255, 0.08); --divider: rgba(255, 255, 255, 0.06); --tile-bg: rgba(255, 255, 255, 0.03); --tile-brd: rgba(255, 255, 255, 0.07); /* four product accents — "on-dark" values (text columns + about-tile icons) */ --p1: #aab0fb; --p1-chip: rgba(99, 102, 241, 0.14); --p1-link: rgba(129, 140, 248, 0.5); --p2: #5fa0f5; --p2-chip: rgba(39, 126, 232, 0.14); --p2-link: rgba(95, 160, 245, 0.5); --p3: #34bcc6; --p3-chip: rgba(14, 154, 165, 0.16); --p3-link: rgba(52, 188, 198, 0.5); --p4: #58cf9c; --p4-chip: rgba(44, 158, 114, 0.16); --p4-link: rgba(44, 158, 114, 0.5); --contact-sec: radial-gradient(120% 150% at 82% -20%, #1a2540 0%, #0f141d 62%); --contact-card-bg: rgba(255, 255, 255, 0.03); --contact-card-brd: rgba(255, 255, 255, 0.07); --contact-strong: #e6eaf2; --contact-body: #a3adc2; --contact-email-brd: #7d9ff0; --contact-blob: rgba(125, 159, 240, 0.15); } /* ===== Light "Daybreak" — [data-theme="light"] ===== */ :root[data-theme='light'] { --page-bg: #eef0f4; --text-base: #565d6e; --text-strong: #262c39; --text-body: #565d6e; --text-muted: #767d8e; --nav-link: #565d6e; --hero-grad: linear-gradient(165deg, #f4f6fb 0%, #e8ecf3 100%); --hero-blob: rgba(70, 100, 204, 0.1); --pill-bg: #ffffff; --pill-brd: #e2e5ec; --pill-text: #4d5670; --accent: #4664cc; --btn-bg: #4a68cf; --btn-bg-hover: #3f5cc4; --btn-glow: rgba(74, 104, 207, 0.7); --cta2-text: #262c39; --cta2-bg: #ffffff; --cta2-bg-hover: #f4f6fb; --cta2-brd: #cfd5e2; --cue: rgba(38, 44, 57, 0.38); --toggle-bg: #ffffff; --toggle-brd: #d3d9e4; --toggle-text: #262c39; --panel: #f4f5f8; --sec-plat: #eef0f4; --footer-bg: #f4f5f8; --hairline: #e6e9ef; --hairline-strong: #e2e5ec; --divider: #e6e9ef; --tile-bg: #fbfbfd; --tile-brd: #e6e9ef; --p1: #4f46e5; --p1-chip: rgba(79, 70, 229, 0.1); --p1-link: rgba(79, 70, 229, 0.45); --p2: #1f66cc; --p2-chip: rgba(39, 126, 232, 0.1); --p2-link: rgba(39, 126, 232, 0.45); --p3: #0a7b84; --p3-chip: rgba(14, 154, 165, 0.12); --p3-link: rgba(14, 154, 165, 0.45); --p4: #135c44; --p4-chip: rgba(44, 158, 114, 0.12); --p4-link: rgba(44, 158, 114, 0.45); --contact-sec: #eef0f4; --contact-card-bg: linear-gradient(135deg, #262d44, #1f2438); --contact-card-brd: transparent; --contact-strong: #ffffff; --contact-body: #b9c1d4; --contact-email-brd: #8aa4f0; --contact-blob: rgba(120, 150, 235, 0.22); } /* ===== Per-product palette (component tokens) ===== * A product row and its matching About tile expose one generic accent trio * (--pc / --pc-link / --pc-chip) that their children read — so rows and tiles * share one mechanism. These shift with the theme. The card walkthrough's * --wt-* stay dark in both themes (they read as product-UI screens). */ .prow--1, .tile--1 { --pc: var(--p1); --pc-link: var(--p1-link); --pc-chip: var(--p1-chip); } .prow--2, .tile--2 { --pc: var(--p2); --pc-link: var(--p2-link); --pc-chip: var(--p2-chip); } .prow--3, .tile--3 { --pc: var(--p3); --pc-link: var(--p3-link); --pc-chip: var(--p3-chip); } .prow--4, .tile--4 { --pc: var(--p4); --pc-link: var(--p4-link); --pc-chip: var(--p4-chip); } .prow--1 { --wt-accent: #6366f1; --wt-text: #aab0fb; --wt-chip: rgba(99, 102, 241, 0.14); --wt-line: rgba(99, 102, 241, 0.32); --wt-glow: rgba(99, 102, 241, 0.26); --wt-base: radial-gradient(120% 120% at 22% 8%, rgba(99, 102, 241, 0.24), transparent 58%), linear-gradient(155deg, #151a34, #10151f); } .prow--2 { --wt-accent: #277ee8; --wt-text: #5fa0f5; --wt-chip: rgba(39, 126, 232, 0.14); --wt-line: rgba(39, 126, 232, 0.32); --wt-glow: rgba(39, 126, 232, 0.22); --wt-base: radial-gradient(120% 120% at 80% 8%, rgba(39, 126, 232, 0.24), transparent 58%), linear-gradient(155deg, #0e1a2c, #10151f); } .prow--3 { --wt-accent: #0e9aa5; --wt-text: #34bcc6; --wt-chip: rgba(14, 154, 165, 0.16); --wt-line: rgba(14, 154, 165, 0.34); --wt-glow: rgba(14, 154, 165, 0.2); --wt-base: radial-gradient(120% 120% at 22% 8%, rgba(14, 154, 165, 0.24), transparent 58%), linear-gradient(155deg, #0c2322, #10151f); } .prow--4 { --wt-accent: #2c9e72; --wt-text: #58cf9c; --wt-chip: rgba(44, 158, 114, 0.16); --wt-line: rgba(44, 158, 114, 0.34); --wt-glow: rgba(44, 158, 114, 0.24); --wt-base: radial-gradient(120% 120% at 80% 8%, rgba(44, 158, 114, 0.26), transparent 58%), linear-gradient(155deg, #0c2118, #10151f); }