/* * DataNostro — Advisio Visual Identity (light theme, 2026-04-28) * * Public marketing pages use the same visual language as advisio.cz: * light backgrounds, Advisio Red CTA, navy text, Noto Sans/Serif typography. * No dev-tool aesthetics — only the DataNostro NAME is preserved. * * Loaded AFTER tailwind.css to override legacy Tailwind classes on public pages. * Pages opt in by adding `class="dn"` to . The `dn-*` utility vocabulary * is kept for backwards compat with existing public templates, but tokens map * to Advisio palette. */ :root[data-theme="light"], html.dn, body.dn { /* Surfaces — Advisio light palette Body uses subtle warm off-white #FAFBFC so white cards have somewhere to "lift from" — pure white body with white cards looked washed out. */ --dn-bg: #FAFBFC; /* root background */ --dn-bg-card: #FFFFFF; /* cards, hero card (lifts from body) */ --dn-bg-1: #F1F4F7; /* alt section bg, panels */ --dn-bg-2: #F5F8F9; /* form inputs, tabs container */ --dn-bg-3: #FAFBFC; /* deepest light elevation (= body bg) */ /* Lines / borders */ --dn-line: #EAEEF2; /* hairline */ --dn-line-2: #D0D7DE; --dn-line-strong: #A4B8CA; /* Foreground (Advisio Dark text) */ --dn-fg: #213A4B; /* primary text, headings */ --dn-fg-1: #495057; /* body copy */ --dn-fg-2: #6A7B86; /* muted */ --dn-fg-3: #A4B8CA; /* very muted (timestamps) */ /* Accent — Advisio Red */ --dn-accent: #E7302A; --dn-accent-fg: #FFFFFF; --dn-accent-glow: rgba(231, 48, 42, 0.32); --dn-accent-soft: rgba(231, 48, 42, 0.08); --dn-accent-hover: #c52822; /* Status (Advisio supporting palette) */ --dn-ok: #25BAAB; /* Teal */ --dn-warn: #EBB261; /* Gold */ --dn-bad: #E7302A; --dn-info: #3779A7; /* Blue */ --dn-purple: #734E99; /* Radius */ --dn-radius-xs: 4px; --dn-radius-sm: 6px; --dn-radius-md: 8px; --dn-radius-lg: 12px; --dn-radius-xl: 16px; --dn-section-y: clamp(56px, 8vw, 120px); /* Fonts — Noto Sans + Noto Serif (advisio.cz match) */ --dn-font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --dn-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --dn-font-serif: "Noto Serif", Georgia, serif; } /* ===== Body shell ===== */ body.dn { background: var(--dn-bg); color: var(--dn-fg); font-family: var(--dn-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.6; } body.dn main { background: var(--dn-bg); } body.dn ::selection { background: var(--dn-accent); color: var(--dn-accent-fg); } /* Logo wordmark — [DataNostro] in red Noto Serif italic (matches client zone). line-height: 1 + display: inline-flex prevents italic descenders from throwing off vertical alignment vs neighbouring nav text/pills. */ .dn-wordmark { display: inline-flex; align-items: center; font-family: var(--dn-font-serif); font-style: italic; font-weight: 700; color: var(--dn-accent); letter-spacing: -0.01em; line-height: 1; /* Optical baseline shift — italic Noto Serif sits visually lower than sans-serif neighbours; nudge up by a hair for centered look. */ transform: translateY(-1px); } /* ===== Container ===== */ .dn-container { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } /* ===== Type ===== */ .dn-h-display { font-family: var(--dn-font-sans); font-size: clamp(36px, 5.5vw, 64px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--dn-fg); } .dn-h-section { font-family: var(--dn-font-sans); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--dn-fg); } .dn-h-card { font-family: var(--dn-font-sans); font-size: 17px; font-weight: 700; color: var(--dn-fg); line-height: 1.35; } .dn-lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--dn-fg-1); max-width: 60ch; } .dn-mono { font-family: var(--dn-font-mono); } /* Italic emphasis inside display headings — Noto Serif italic in red (advisio.cz pattern) */ .dn-serif-italic, .dn-h-display em, .dn-h-section em { font-family: var(--dn-font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--dn-accent); } /* ===== Eyebrow (small uppercase label, no mono — Advisio doesn't use mono) ===== */ .dn-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dn-font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dn-accent); } .dn-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--dn-accent); } /* ===== Tags ===== */ .dn-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--dn-radius-sm); background: var(--dn-bg-1); font-family: var(--dn-font-sans); font-size: 12px; font-weight: 500; color: var(--dn-fg-1); } .dn-tag-accent { background: var(--dn-accent-soft); color: var(--dn-accent); } .dn-tag-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dn-ok); } /* ===== Cards ===== */ .dn-card { border: 1px solid var(--dn-line); border-radius: var(--dn-radius-xl); background: var(--dn-bg-card); /* always pure white — lifts from body */ padding: clamp(20px, 2.5vw, 28px); box-shadow: 0 1px 2px rgba(33, 58, 75, 0.04); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .dn-card:hover { border-color: var(--dn-line-2); box-shadow: 0 8px 24px rgba(33, 58, 75, 0.08); transform: translateY(-2px); } .dn-card-featured { border-color: var(--dn-accent); background: linear-gradient(180deg, rgba(231, 48, 42, 0.04), var(--dn-bg-card)); } /* ===== Dark data card — for hero data-viz / monitoring previews ===== Inverted navy card on light pages. Used for the "live event log" on the homepage hero — terminal/dashboard preview that mirrors the look of xrm.advisio.cz dashboard tiles. */ .dn-card-data { background: var(--dn-fg); /* #213A4B navy */ color: rgba(255, 255, 255, 0.92); border: 1px solid #2D4A61; border-radius: var(--dn-radius-xl); overflow: hidden; box-shadow: 0 12px 32px rgba(33, 58, 75, 0.18); } .dn-card-data .dn-card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); font-family: var(--dn-font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; } .dn-card-data .dn-stat-mini-label { font-family: var(--dn-font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; } .dn-card-data .dn-stat-mini-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; } .dn-card-data .dn-stat-mini-delta { font-family: var(--dn-font-mono); font-size: 11px; color: var(--dn-accent); margin-top: 4px; } .dn-card-data .dn-stat-divider { border-color: rgba(255, 255, 255, 0.10) !important; background: rgba(255, 255, 255, 0.10); } .dn-card-data .dn-stat-cell { border-color: rgba(255, 255, 255, 0.10) !important; } /* Event row in dark data card — overrides default light row colors */ .dn-event-row.dn-event-dark > :nth-child(1) { color: rgba(255, 255, 255, 0.50); } .dn-event-row.dn-event-dark > :nth-child(3) { color: rgba(255, 255, 255, 0.85); } .dn-event-row.dn-event-dark > :nth-child(4) { text-align: right; color: rgba(255, 255, 255, 0.65); } /* ===== Buttons (Advisio style) ===== */ .dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--dn-radius-md); font-family: var(--dn-font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; text-decoration: none; white-space: nowrap; } .dn-btn:hover { transform: translateY(-1px); } .dn-btn-primary { background: var(--dn-accent); color: var(--dn-accent-fg); border-color: var(--dn-accent); } .dn-btn-primary:hover { background: var(--dn-accent-hover); border-color: var(--dn-accent-hover); } .dn-btn-secondary { background: var(--dn-fg); /* filled navy #213A4B */ color: #FFFFFF; border-color: var(--dn-fg); } .dn-btn-secondary:hover { background: #1a2f3d; /* slightly darker navy on hover */ border-color: #1a2f3d; color: #FFFFFF; } .dn-btn-ghost { background: transparent; color: var(--dn-fg-1); } .dn-btn-ghost:hover { color: var(--dn-accent); background: var(--dn-bg-2); } .dn-btn .dn-arrow { transition: transform 160ms ease; } .dn-btn:hover .dn-arrow { transform: translateX(2px); } /* ===== Header / nav (light, frosted) ===== */ body.dn nav#main-nav, body.dn header.dn-header { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--dn-line) !important; color: var(--dn-fg); } body.dn nav#main-nav a, body.dn header.dn-header a { color: var(--dn-fg-1); transition: color 160ms ease; } body.dn nav#main-nav a:hover, body.dn header.dn-header a:hover { color: var(--dn-accent); background: transparent !important; } /* ===== Footer (Advisio dark navy — same token-flip trick as .dn-section-dark) ===== Re-declare the foreground tokens INSIDE the footer scope so every nested inline `var(--dn-fg-X)` style automatically reads light variants — no more dark-text-on-dark-bg invisibility for footer links. */ body.dn footer { background: #213A4B !important; border-top: 0 !important; /* Light variants of fg tokens — only inside footer */ --dn-fg: #FFFFFF; --dn-fg-1: rgba(255, 255, 255, 0.86); --dn-fg-2: rgba(255, 255, 255, 0.66); --dn-fg-3: rgba(255, 255, 255, 0.50); --dn-line: rgba(255, 255, 255, 0.10); --dn-line-2: rgba(255, 255, 255, 0.20); --dn-bg-card: #2D4A61; color: rgba(255, 255, 255, 0.86); } body.dn footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; transition: color 160ms ease; } body.dn footer a:hover { color: var(--dn-accent); } body.dn footer h3, body.dn footer h4 { color: rgba(255, 255, 255, 0.50) !important; font-family: var(--dn-font-sans) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } body.dn footer .dn-divider { background: rgba(255, 255, 255, 0.10); } /* Footer mini-tags (EU SERVERY, 99.9% UPTIME) */ body.dn footer .dn-tag { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.86); } /* ===== Accessibility ===== */ /* Skip-to-content link — visible on focus only */ .dn-skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100; } .dn-skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 12px 20px; background: var(--dn-accent); color: var(--dn-accent-fg); border-radius: var(--dn-radius-md); font-weight: 600; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Visible keyboard focus everywhere — WCAG 2.4.7 */ body.dn :focus-visible { outline: 2px solid var(--dn-accent); outline-offset: 2px; border-radius: var(--dn-radius-sm); } body.dn .dn-btn:focus-visible { outline-offset: 3px; } /* Respect prefers-reduced-motion — WCAG 2.3.3 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .dn-pulse, .dn-bg-grid { animation: none !important; } } /* Visually hidden — for screen reader only labels */ .dn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Section ===== */ .dn-section { padding-block: var(--dn-section-y); } .dn-section + .dn-section { border-top: 1px solid var(--dn-line); } /* Alt-bg section (zebra-stripe) */ .dn-section-alt { background: var(--dn-bg-1); } /* ===== Dark navy section (advisio.cz inverted hero/CTA pattern) ===== Override CSS custom props so EVERY child element automatically reads the light variants — `.dn-stat`, inline `var(--dn-fg-2)` styles, etc. That way no individual element needs a `.dn-section-dark X` selector. */ .dn-section-dark { /* Background is the old light-theme fg color (#213A4B Advisio Dark) */ background: #213A4B; /* Flip the foreground tokens to light variants */ --dn-fg: #FFFFFF; --dn-fg-1: rgba(255, 255, 255, 0.86); --dn-fg-2: rgba(255, 255, 255, 0.66); --dn-fg-3: rgba(255, 255, 255, 0.46); /* Lines / borders barely visible against navy — keep them subtle */ --dn-line: rgba(255, 255, 255, 0.10); --dn-line-2: rgba(255, 255, 255, 0.20); --dn-line-strong: rgba(255, 255, 255, 0.32); /* Card surface should be a SLIGHTLY lighter navy, not transparent on dark (transparent + dark text = the readability bug the user reported). */ --dn-bg-card: #2D4A61; /* lighter navy — readable lift */ --dn-bg: #213A4B; --dn-bg-1: #1A2F3D; --dn-bg-2: #2D4A61; color: #FFFFFF; } /* Eyebrow accent dot stays red, but the eyebrow text shifts to red too (it's a marketing accent in dark mode, not a muted label). */ .dn-section-dark .dn-eyebrow { color: var(--dn-accent); } .dn-section-dark .dn-eyebrow::before { background: var(--dn-accent); } /* Headings explicitly white (overrides body.dn h2/h3 = var(--dn-fg) which is now also white via the cascade — but be defensive). */ .dn-section-dark h1, .dn-section-dark h2, .dn-section-dark h3, .dn-section-dark h4, .dn-section-dark h5, .dn-section-dark h6, .dn-section-dark .dn-h-display, .dn-section-dark .dn-h-section, .dn-section-dark .dn-h-card { color: #FFFFFF; } /* Stats — were var(--dn-fg) which now correctly resolves to white. Add an explicit rule for safety + to bump weight for hierarchy on dark bg. */ .dn-section-dark .dn-stat { color: #FFFFFF; } .dn-section-dark .dn-stat-accent { color: var(--dn-accent); } /* Cards inside a dark section — solid lighter navy, not transparent. Transparent overlay made child content invisible against parent navy. */ .dn-section-dark .dn-card { background: var(--dn-bg-card); border-color: var(--dn-line); color: #FFFFFF; box-shadow: none; } .dn-section-dark .dn-card:hover { border-color: var(--dn-line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20); transform: translateY(-2px); } .dn-section-dark .dn-card-featured { border-color: var(--dn-accent); background: linear-gradient(180deg, rgba(231, 48, 42, 0.10), var(--dn-bg-card)); } /* Divider on navy needs to be visible */ .dn-section-dark .dn-divider { background: var(--dn-line); } /* Tag/pill/badge tweaks for dark surface */ .dn-section-dark .dn-tag { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.86); } .dn-section-dark .dn-tag-accent { background: rgba(231, 48, 42, 0.16); color: #FFFFFF; } /* Buttons in dark sections — primary stays red (good contrast), but secondary/ghost need lighter borders/text. */ /* Inside dark sections the navy-filled secondary would disappear into the navy band — fall back to outlined-white for contrast. */ .dn-section-dark .dn-btn-secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.30); } .dn-section-dark .dn-btn-secondary:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.06); } .dn-section-dark .dn-btn-ghost { color: rgba(255, 255, 255, 0.86); } .dn-section-dark .dn-btn-ghost:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); } /* Form fields on dark surface */ .dn-section-dark input, .dn-section-dark textarea, .dn-section-dark select { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.20); color: #FFFFFF; } .dn-section-dark input::placeholder, .dn-section-dark textarea::placeholder { color: rgba(255, 255, 255, 0.40); } /* Subtle dot grid background — light red dots */ .dn-bg-grid { background-image: radial-gradient(circle, rgba(231, 48, 42, 0.10) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 50%, transparent 100%); opacity: 0.7; } /* ===== Tables ===== */ .dn-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .dn-table th, .dn-table td { padding: 14px 18px; border-bottom: 1px solid var(--dn-line); text-align: left; font-size: 14px; } .dn-table th { font-size: 12px; font-weight: 700; color: var(--dn-fg-2); background: var(--dn-bg-2); } /* ===== Status pill ===== */ .dn-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--dn-bg-1); font-size: 12px; font-weight: 500; color: var(--dn-fg-1); } .dn-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dn-ok); /* default = operational (teal) */ box-shadow: 0 0 8px rgba(37, 186, 171, 0.4); } /* Status state modifiers — applied via .is-degraded / .is-down */ .dn-status-pill.is-degraded::before { background: var(--dn-warn); box-shadow: 0 0 8px rgba(235, 178, 97, 0.4); } .dn-status-pill.is-down::before { background: var(--dn-bad); box-shadow: 0 0 8px rgba(231, 48, 42, 0.4); } /* Pill becomes a clickable link variant */ a.dn-status-pill { text-decoration: none; transition: border-color 160ms ease; } a.dn-status-pill:hover { border-color: var(--dn-line-strong); } /* ===== Number block ===== */ .dn-stat { font-family: var(--dn-font-sans); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em; color: var(--dn-fg); } .dn-stat-accent { color: var(--dn-accent); } /* ===== Misc helpers ===== */ .dn-divider { height: 1px; background: var(--dn-line); border: 0; margin: 0; } .dn-text-muted { color: var(--dn-fg-2); } .dn-text-faint { color: var(--dn-fg-3); } @keyframes dn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .dn-pulse { animation: dn-pulse 2.4s ease-in-out infinite; } /* ===== Form fields (Advisio light, mirrors client zone .ad-search/.ad-field) ===== */ body.dn input[type="text"], body.dn input[type="email"], body.dn input[type="url"], body.dn input[type="password"], body.dn input[type="tel"], body.dn textarea, body.dn select { background: var(--dn-bg-card); /* white inputs on warm body bg */ border: 1px solid var(--dn-line-2); border-radius: var(--dn-radius-md); color: var(--dn-fg); padding: 12px 14px; font-family: var(--dn-font-sans); font-size: 14px; transition: border-color 160ms ease, box-shadow 160ms ease; } body.dn input:focus, body.dn textarea:focus, body.dn select:focus { outline: none; border-color: var(--dn-accent); box-shadow: 0 0 0 3px var(--dn-accent-soft); } body.dn input::placeholder, body.dn textarea::placeholder { color: var(--dn-fg-3); } /* ===== Code (light gray panels — pure Advisio, no dev-tool dark islands) ===== */ body.dn pre, body.dn code { font-family: var(--dn-font-mono); background: var(--dn-bg-1); border: 1px solid var(--dn-line); border-radius: var(--dn-radius-md); color: var(--dn-fg); } body.dn pre { padding: 16px 18px; overflow-x: auto; font-size: 13px; line-height: 1.55; } body.dn :not(pre) > code { padding: 1px 6px; font-size: 0.92em; background: var(--dn-bg-2); color: var(--dn-accent); } /* ===== Headings on public pages ===== */ body.dn h1, body.dn h2, body.dn h3, body.dn h4, body.dn h5, body.dn h6 { color: var(--dn-fg); font-family: var(--dn-font-sans); } body.dn h1, body.dn h2, body.dn h3 { font-weight: 700; letter-spacing: -0.015em; } /* ===== Compat overrides for legacy Tailwind classes on public pages ===== The legacy templates ship with bg-white/bg-gray-50/text-gray-X classes from the old indigo+emerald era. We remap them to Advisio palette so we don't have to rewrite every page. */ body.dn .bg-white { background: var(--dn-bg-card) !important; } body.dn .bg-gray-50 { background: var(--dn-bg-2) !important; } body.dn .bg-gray-100 { background: var(--dn-bg-1) !important; } body.dn .bg-navy-900, body.dn .bg-gray-900 { background: var(--dn-fg) !important; color: #fff !important; } body.dn .text-gray-900, body.dn .text-navy-900 { color: var(--dn-fg) !important; } body.dn .text-gray-700, body.dn .text-gray-800 { color: var(--dn-fg-1) !important; } body.dn .text-gray-600 { color: var(--dn-fg-1) !important; } body.dn .text-gray-500 { color: var(--dn-fg-2) !important; } body.dn .text-gray-400 { color: var(--dn-fg-3) !important; } body.dn .text-gray-300 { color: var(--dn-fg-3) !important; } /* `.text-white` on dark navy bg — keep white. On light bg it would be invisible, but those uses are scoped to dark sections (hero overlays, dark CTAs). */ body.dn .border-gray-100, body.dn .border-gray-200, body.dn .border-gray-300 { border-color: var(--dn-line) !important; } body.dn .border-gray-700, body.dn .border-gray-800 { border-color: var(--dn-line-2) !important; } /* Brand color mapping (red accent) */ body.dn .text-brand-600, body.dn .text-brand-500, body.dn .text-brand-700 { color: var(--dn-accent) !important; } body.dn .text-accent-500, body.dn .text-accent-600, body.dn .text-accent-400 { color: var(--dn-ok) !important; } body.dn .bg-brand-50 { background: var(--dn-accent-soft) !important; } body.dn .bg-brand-100 { background: var(--dn-accent-soft) !important; } body.dn .bg-accent-50 { background: rgba(37, 186, 171, 0.10) !important; } body.dn .bg-brand-600, body.dn .bg-brand-500 { background: var(--dn-accent) !important; color: var(--dn-accent-fg) !important; } body.dn .border-brand-200 { border-color: var(--dn-accent) !important; } body.dn .border-accent-200 { border-color: var(--dn-ok) !important; } /* Legacy gradient classes — flatten to Advisio palette */ body.dn .gradient-brand, body.dn .gradient-cta { background: var(--dn-accent) !important; color: var(--dn-accent-fg) !important; } body.dn .gradient-hero { background: linear-gradient(135deg, var(--dn-bg-1) 0%, var(--dn-bg-2) 100%) !important; color: var(--dn-fg) !important; } body.dn .gradient-text { background: none !important; -webkit-text-fill-color: var(--dn-accent) !important; color: var(--dn-accent) !important; } /* Hover states */ body.dn .hover\:bg-white:hover { background: var(--dn-bg-card) !important; } body.dn .hover\:bg-gray-50:hover { background: var(--dn-bg-2) !important; } body.dn .hover\:bg-brand-50:hover { background: var(--dn-accent-soft) !important; } body.dn .hover\:bg-brand-700:hover { background: var(--dn-accent-hover) !important; } body.dn .hover\:text-brand-600:hover, body.dn .hover\:text-brand-700:hover { color: var(--dn-accent-hover) !important; } /* Soft Advisio shadows */ body.dn .shadow-sm { box-shadow: 0 1px 2px rgba(33, 58, 75, 0.04) !important; } body.dn .shadow, body.dn .shadow-md { box-shadow: 0 4px 12px rgba(33, 58, 75, 0.06) !important; } body.dn .shadow-lg { box-shadow: 0 8px 24px rgba(33, 58, 75, 0.08) !important; } body.dn .shadow-xl { box-shadow: 0 16px 40px rgba(33, 58, 75, 0.10) !important; } body.dn .shadow-brand-600\/20 { box-shadow: 0 6px 18px rgba(231, 48, 42, 0.18) !important; } /* Glass effect — light frosted (used on hero overlays) */ body.dn .glass { background: rgba(255, 255, 255, 0.70) !important; backdrop-filter: blur(20px); border: 1px solid rgba(33, 58, 75, 0.08) !important; } /* Grid pattern dot — subtle red dots on light bg */ body.dn .grid-pattern { background-image: radial-gradient(circle, rgba(231, 48, 42, 0.08) 1px, transparent 1px) !important; background-size: 32px 32px; } /* ===== Prose for KB articles ===== */ .dn-prose { color: var(--dn-fg-1); font-size: 16px; line-height: 1.75; } .dn-prose h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.015em; color: var(--dn-fg); margin-top: 2.4em; margin-bottom: 0.6em; } .dn-prose h3 { font-size: 19px; font-weight: 600; color: var(--dn-fg); margin-top: 1.8em; margin-bottom: 0.4em; } .dn-prose p { margin-bottom: 1.1em; } .dn-prose ul, .dn-prose ol { margin-bottom: 1.2em; padding-left: 1.4em; } .dn-prose ul li { list-style: disc; } .dn-prose ol li { list-style: decimal; } .dn-prose li { margin-bottom: 0.4em; } .dn-prose a { color: var(--dn-accent); border-bottom: 1px solid var(--dn-accent-soft); } .dn-prose a:hover { border-bottom-color: var(--dn-accent); } .dn-prose strong { color: var(--dn-fg); font-weight: 700; } .dn-prose blockquote { border-left: 3px solid var(--dn-accent); padding: 4px 0 4px 18px; margin: 1.4em 0; color: var(--dn-fg-1); font-style: italic; font-family: var(--dn-font-serif); }