/*
* 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 — DataNostro warm editorial palette (v3, 2026-05-08)
Warm off-white body so white cards still lift; less cool/clinical
than slate-50. Pairs with terracotta accent + deep ink navy text. */
--dn-bg: #FCFAF7; /* warm off-white root bg */
--dn-bg-card: #FFFFFF; /* cards lift from warm bg */
--dn-bg-1: #F5F0E8; /* alt section bg */
--dn-bg-2: #F8F4ED; /* form inputs, tabs container */
--dn-bg-3: #FCFAF7; /* deepest light = body bg */
/* Lines / borders — warm taupe instead of cool gray */
--dn-line: #ECE5D8; /* hairline */
--dn-line-2: #D9CFBC;
--dn-line-strong: #A89980;
/* Foreground — deep ink navy, slightly warmer than pure slate */
--dn-fg: #0A1521; /* primary text, headings */
--dn-fg-1: #3D4A55; /* body copy */
--dn-fg-2: #5C6873; /* muted */
--dn-fg-3: #98A0AA; /* very muted (timestamps) */
/* Accent — warm terracotta orange (sophisticated CTA, not neon) */
--dn-accent: #E85D2F;
--dn-accent-fg: #FFFFFF;
--dn-accent-glow: rgba(232, 93, 47, 0.30);
--dn-accent-soft: rgba(232, 93, 47, 0.08);
--dn-accent-hover: #D34818;
/* Status — emerald is now ONLY for operational/success (not branding) */
--dn-ok: #10B981; /* operational green */
--dn-warn: #F59E0B; /* warning amber */
--dn-bad: #DC2626; /* error red */
--dn-info: #3B82F6; /* info blue */
--dn-purple: #7C3AED;
/* Radius — sharper than before (jiný sGTM hosting-influenced editorial feel: 0–4 px max).
Pill shapes still go to 999px via class overrides where needed. */
--dn-radius-xs: 0px;
--dn-radius-sm: 2px;
--dn-radius-md: 3px;
--dn-radius-lg: 4px;
--dn-radius-xl: 6px;
--dn-section-y: clamp(56px, 8vw, 120px);
/* Spacing scale — 5/10/15/20/30/40/50/70/100/150 (jiný sGTM hosting rhythm). */
--dn-sp-3xs: 2px;
--dn-sp-2xs: 5px;
--dn-sp-xs: 10px;
--dn-sp-sm: 15px;
--dn-sp-md: 20px;
--dn-sp-lg: 30px;
--dn-sp-xl: 40px;
--dn-sp-2xl: 50px;
--dn-sp-3xl: 70px;
--dn-sp-4xl: 100px;
--dn-sp-5xl: 150px;
/* Offset hard-shadows — jiný sGTM hosting signature.
Negative-X positive-Y, zero blur, tinted color. Halves on hover. */
--dn-shadow-tint: rgba(232, 93, 47, 0.85); /* terracotta */
--dn-shadow-tint-soft: rgba(232, 93, 47, 0.35);
--dn-shadow-tint-navy: rgba(10, 21, 33, 0.85);
/* Fonts — Noto Sans body + JetBrains Mono display + Noto Serif italic accent.
Display headings use mono for distinct editorial feel (jiný sGTM hosting-influenced). */
--dn-font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--dn-font-display: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--dn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, 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;
font-feature-settings: "kern", "liga", "calt", "ss01";
}
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 =====
Display headings use JetBrains Mono — distinctive editorial-tech feel
(Display heading uses mono for the same purpose). Body uses Noto Sans.
Two-weight rule: only 400 (regular) and 700 (bold). */
.dn-h-display {
font-family: var(--dn-font-display);
font-size: clamp(36px, 5.5vw, 60px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
color: var(--dn-fg);
}
.dn-h-section {
font-family: var(--dn-font-display);
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--dn-fg);
}
.dn-h-card {
font-family: var(--dn-font-display);
font-size: 17px;
font-weight: 700;
color: var(--dn-fg);
line-height: 1.35;
letter-spacing: -0.01em;
}
.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(15, 23, 42, 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(15, 23, 42, 0.08);
transform: translateY(-2px);
}
.dn-card-featured {
border-color: var(--dn-accent);
background: linear-gradient(180deg, rgba(232, 93, 47, 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); /* #0F172A 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(15, 23, 42, 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 #0F172A */
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;
}
/* Dark-mode public marketing nav (audit 2026-05-09 — was hardcoded
rgba(255,255,255,0.85) so it stayed light cream against the dark
page bg, making the wordmark and menu links invisible). */
html[data-theme="dark"] body.dn nav#main-nav,
html[data-theme="dark"] body.dn header.dn-header,
html.dn-dark body.dn nav#main-nav,
html.dn-dark body.dn header.dn-header {
background: rgba(14, 21, 33, 0.78) !important;
border-bottom: 1px solid #29384B !important;
color: var(--dn-fg);
}
html[data-theme="dark"] body.dn nav#main-nav a,
html[data-theme="dark"] body.dn header.dn-header a,
html.dn-dark body.dn nav#main-nav a,
html.dn-dark body.dn header.dn-header a {
color: var(--dn-fg-1);
}
html[data-theme="dark"] body.dn .dn-nav-trigger,
html.dn-dark body.dn .dn-nav-trigger {
color: var(--dn-fg-1);
}
html[data-theme="dark"] body.dn .dn-nav-mega:hover .dn-nav-trigger,
html[data-theme="dark"] body.dn .dn-nav-mega:focus-within .dn-nav-trigger,
html.dn-dark body.dn .dn-nav-mega:hover .dn-nav-trigger,
html.dn-dark body.dn .dn-nav-mega:focus-within .dn-nav-trigger {
color: var(--dn-fg);
}
/* Mega-menu dropdown surface */
html[data-theme="dark"] body.dn .dn-nav-mega-panel,
html.dn-dark body.dn .dn-nav-mega-panel {
background: #16202E !important;
border: 1px solid #29384B !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] body.dn .dn-nav-mega-panel a,
html.dn-dark body.dn .dn-nav-mega-panel a {
color: var(--dn-fg-1);
}
html[data-theme="dark"] body.dn .dn-nav-mega-panel a:hover,
html.dn-dark body.dn .dn-nav-mega-panel a:hover {
background: rgba(255, 110, 64, 0.10) !important;
color: var(--dn-accent) !important;
}
/* Wordmark + status pill in nav — pure white in dark for max legibility
on the deep ink topbar (was warm off-white = AA-borderline in tests). */
html[data-theme="dark"] body.dn .dn-wordmark,
html.dn-dark body.dn .dn-wordmark {
color: #FFFFFF !important;
}
html[data-theme="dark"] body.dn .dn-wordmark .dn-bracket,
html.dn-dark body.dn .dn-wordmark .dn-bracket {
color: var(--dn-accent);
}
/* Public mobile menu toggle — outline + glyph need to flip to dark */
html[data-theme="dark"] body.dn .dn-mobile-toggle,
html.dn-dark body.dn .dn-mobile-toggle {
border-color: var(--dn-line-2);
color: var(--dn-fg);
background: transparent;
}
html[data-theme="dark"] body.dn .dn-mobile-toggle:hover,
html.dn-dark body.dn .dn-mobile-toggle:hover {
border-color: var(--dn-accent);
color: var(--dn-accent);
background: rgba(255, 110, 64, 0.10);
}
/* Public mobile menu drawer — was hardcoded light bg */
html[data-theme="dark"] body.dn .dn-mobile-menu,
html.dn-dark body.dn .dn-mobile-menu {
background: #0E1521;
border-top-color: var(--dn-line) !important;
}
/* Search button + theme toggle in public nav */
html[data-theme="dark"] body.dn nav#main-nav button,
html.dn-dark body.dn nav#main-nav button {
color: var(--dn-fg);
}
html[data-theme="dark"] body.dn nav#main-nav button:hover,
html.dn-dark body.dn nav#main-nav button:hover {
color: var(--dn-accent);
background: rgba(255, 110, 64, 0.10) !important;
}
/* Dashboard / CS pills in nav */
html[data-theme="dark"] body.dn nav#main-nav .dn-btn-secondary,
html[data-theme="dark"] body.dn nav#main-nav .dn-btn-ghost,
html.dn-dark body.dn nav#main-nav .dn-btn-secondary,
html.dn-dark body.dn nav#main-nav .dn-btn-ghost {
color: var(--dn-fg) !important;
border-color: var(--dn-line-2) !important;
background: transparent !important;
}
html[data-theme="dark"] body.dn nav#main-nav .dn-btn-secondary:hover,
html.dn-dark body.dn nav#main-nav .dn-btn-secondary:hover {
background: rgba(255, 110, 64, 0.10) !important;
border-color: var(--dn-accent) !important;
color: var(--dn-accent) !important;
}
/* Status pill in public nav (e.g. STATUS: Operační) */
html[data-theme="dark"] body.dn nav#main-nav .dn-status-pill,
html.dn-dark body.dn nav#main-nav .dn-status-pill {
background: rgba(255, 255, 255, 0.05) !important;
border-color: var(--dn-line-2) !important;
color: var(--dn-fg) !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: #0F172A !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 (#0F172A Advisio Dark) */
background: #0F172A;
/* 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: #0F172A;
--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(232, 93, 47, 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(232, 93, 47, 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(232, 93, 47, 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(232, 93, 47, 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(15, 23, 42, 0.04) !important; }
body.dn .shadow, body.dn .shadow-md { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important; }
body.dn .shadow-lg { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important; }
body.dn .shadow-xl { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10) !important; }
body.dn .shadow-brand-600\/20 { box-shadow: 0 6px 18px rgba(232, 93, 47, 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(15, 23, 42, 0.08) !important;
}
html[data-theme="dark"] body.dn .glass,
html.dn-dark body.dn .glass {
background: rgba(22, 32, 46, 0.70) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Grid pattern dot — subtle red dots on light bg */
body.dn .grid-pattern {
background-image: radial-gradient(circle, rgba(232, 93, 47, 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);
}
/* ─── Form submit loading state ─── */
/* Triggered by global script in base.html on POST form submit. Prevents
double-submit and gives clear visual feedback during slow form roundtrips
(contact form sends an email, care form hits the DB, etc.). */
.dn-btn-loading {
pointer-events: none;
opacity: 0.85;
cursor: wait !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
}
.dn-btn-loading .dn-arrow { display: none; }
.dn-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: dn-spin 720ms linear infinite;
flex-shrink: 0;
}
@keyframes dn-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.dn-spinner { animation-duration: 0s; border-top-color: currentColor; opacity: 0.6; }
}
/* ─── jiný sGTM hosting-influenced visual primitives (2026-05-09) ──────────────────
1. Offset hard-shadows — negative-X positive-Y, zero blur, halve on hover.
2. Link hover — terracotta + 1px underline drawn 5px below baseline.
3. Sharper card defaults to match the editorial mono-display aesthetic.
4. Logo strip with edge-fade mask. */
/* 1. Offset shadows ─────────────────────────────────────────────────── */
.dn-shadow-md {
box-shadow: -12px 12px 0 var(--dn-shadow-tint);
transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.dn-shadow-md:hover { box-shadow: -6px 6px 0 var(--dn-shadow-tint); }
.dn-shadow-sm {
box-shadow: -6px 6px 0 var(--dn-shadow-tint);
transition: box-shadow 200ms ease-out;
}
.dn-shadow-sm:hover { box-shadow: -3px 3px 0 var(--dn-shadow-tint); }
.dn-shadow-md-soft {
box-shadow: -10px 10px 0 var(--dn-shadow-tint-soft);
transition: box-shadow 200ms ease-out;
}
.dn-shadow-md-soft:hover { box-shadow: -5px 5px 0 var(--dn-shadow-tint-soft); }
.dn-shadow-md-navy {
box-shadow: -10px 10px 0 var(--dn-shadow-tint-navy);
transition: box-shadow 200ms ease-out;
}
.dn-shadow-md-navy:hover { box-shadow: -5px 5px 0 var(--dn-shadow-tint-navy); }
@media (prefers-reduced-motion: reduce) {
.dn-shadow-md, .dn-shadow-sm, .dn-shadow-md-soft, .dn-shadow-md-navy { transition: none; }
}
/* 2. Link hover — accent color + underline 5px below baseline.
Scoped to in-content links inside .dn-prose / .dn-link / paragraph tags
so navigation/nav links keep their existing styling. */
body.dn .dn-link,
body.dn .dn-prose a,
body.dn p > a:not(.dn-btn):not(.dn-tag) {
color: var(--dn-fg);
text-decoration: none;
position: relative;
transition: color 160ms ease-out;
}
body.dn .dn-link:hover,
body.dn .dn-prose a:hover,
body.dn p > a:not(.dn-btn):not(.dn-tag):hover {
color: var(--dn-accent);
}
body.dn .dn-link:hover::after,
body.dn .dn-prose a:hover::after,
body.dn p > a:not(.dn-btn):not(.dn-tag):hover::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
height: 1px;
background: var(--dn-accent);
}
/* 3. Logo strip with fade-mask — for "Trusted by" / partners section. */
.dn-logo-strip {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15% 85%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 15% 85%, transparent 100%);
}
.dn-logo-strip-track {
display: flex;
gap: 80px;
align-items: center;
animation: dn-logo-scroll 40s linear infinite;
width: max-content;
}
@keyframes dn-logo-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.dn-logo-strip-track { animation: none; }
}
/* 4. Mono utility — for inline code-y / id-style strings. */
.dn-mono-text {
font-family: var(--dn-font-mono);
font-size: 13px;
letter-spacing: -0.01em;
}
/* 5. jiný sGTM hosting-style "stat band" — full-width colored section with big numbers. */
.dn-stat-band {
background: var(--dn-fg);
color: #FFFFFF;
padding: var(--dn-sp-2xl) 0;
}
.dn-stat-band-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--dn-sp-xl);
text-align: center;
}
.dn-stat-band .dn-stat-num {
font-family: var(--dn-font-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
line-height: 1;
color: var(--dn-accent);
letter-spacing: -0.03em;
}
.dn-stat-band .dn-stat-label {
margin-top: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
letter-spacing: 0.04em;
}
/* ─── Mega-menu (jiný sGTM hosting-style 2–3 column dropdown) ─────────────────────── */
.dn-nav-mega {
position: relative;
display: inline-flex;
}
.dn-nav-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: transparent;
border: 0;
font-family: var(--dn-font-sans);
font-size: 13px;
font-weight: 500;
color: var(--dn-fg-1);
cursor: pointer;
border-radius: 4px;
transition: color 160ms ease-out, background 160ms ease-out;
}
.dn-nav-mega:hover .dn-nav-trigger,
.dn-nav-mega:focus-within .dn-nav-trigger {
color: var(--dn-accent);
background: var(--dn-bg-2);
}
.dn-nav-mega:hover .dn-nav-trigger svg,
.dn-nav-mega:focus-within .dn-nav-trigger svg {
transform: rotate(180deg);
}
.dn-nav-trigger svg { transition: transform 200ms ease-out; }
.dn-nav-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 480px;
max-width: 720px;
background: var(--dn-bg-card);
border: 1px solid var(--dn-line);
border-radius: 4px;
box-shadow: -10px 10px 0 var(--dn-shadow-tint-soft), 0 1px 4px rgba(15, 23, 42, 0.08);
padding: 20px;
z-index: 60;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms ease-out;
pointer-events: none;
}
.dn-nav-mega:hover .dn-nav-panel,
.dn-nav-mega:focus-within .dn-nav-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.dn-nav-panel-grid {
display: grid;
gap: 24px;
}
.dn-nav-col {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 220px;
}
.dn-nav-col-title {
margin: 0 0 6px;
padding: 0 8px;
font-family: var(--dn-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--dn-fg-3);
text-transform: uppercase;
}
.dn-nav-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border-radius: 3px;
text-decoration: none;
color: var(--dn-fg);
transition: background 160ms ease-out, color 160ms ease-out;
}
.dn-nav-item:hover {
background: var(--dn-bg-2);
color: var(--dn-fg);
}
.dn-nav-item strong {
font-family: var(--dn-font-display);
font-size: 13px;
font-weight: 700;
color: var(--dn-fg);
letter-spacing: -0.01em;
line-height: 1.3;
}
.dn-nav-item:hover strong { color: var(--dn-accent); }
.dn-nav-item span {
font-size: 12px;
color: var(--dn-fg-2);
line-height: 1.4;
}
/* Right-edge dropdowns: shift panel left so it doesn't overflow viewport. */
.dn-nav-mega:nth-last-child(-n+4) .dn-nav-panel { left: auto; right: 0; }
@media (max-width: 1023px) {
.dn-nav-mega { display: none; } /* mobile uses the existing burger menu */
}
/* ─── A11y polish (P0) ──────────────────────────────────────────────────
1. WCAG AA: body link color uses --dn-accent-hover (4.7:1 vs ~3.4 for accent).
2. Visible focus rings on all interactive elements. */
body.dn .dn-link,
body.dn .dn-prose a:not(.dn-btn):not(.dn-tag),
body.dn p > a:not(.dn-btn):not(.dn-tag) {
color: var(--dn-accent-hover);
}
body.dn :focus-visible {
outline: 2px solid var(--dn-accent);
outline-offset: 2px;
border-radius: 2px;
}
body.dn .dn-btn:focus-visible,
body.dn .dn-tier-cta:focus-visible {
outline-offset: 3px;
}
/* ─── Mega-menu active page indicator ───────────────────────────────────
When the current URL is inside a mega-menu group, the trigger gets a dot. */
.dn-nav-trigger.is-active::after {
content: "";
width: 4px;
height: 4px;
background: var(--dn-accent);
border-radius: 50%;
margin-left: 4px;
}
.dn-nav-trigger.is-active { color: var(--dn-fg); font-weight: 700; }
.dn-nav-item.is-active { background: var(--dn-bg-2); }
.dn-nav-item.is-active strong { color: var(--dn-accent); }
/* ─── Button system overhaul (P1: #59, #60, #61, #62, #63) ──────────────
Sizes: dn-btn-sm (compact), default (standard), dn-btn-lg (hero CTA).
Variants: primary, secondary, ghost, destructive.
Animated arrow: arrow translates +4px on hover (offset CTA pattern). */
.dn-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border: 1px solid var(--dn-fg);
border-radius: 0;
font-family: var(--dn-font-sans);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
position: relative;
white-space: nowrap;
}
/* Sizes */
.dn-btn-sm { padding: 8px 14px; font-size: 13px; }
.dn-btn-lg { padding: 16px 28px; font-size: 16px; }
/* Variants */
.dn-btn-primary {
background: var(--dn-accent);
color: #FFFFFF;
border-color: var(--dn-accent);
box-shadow: -6px 6px 0 var(--dn-shadow-tint-soft);
}
.dn-btn-primary:hover {
background: var(--dn-accent-hover);
border-color: var(--dn-accent-hover);
box-shadow: -3px 3px 0 var(--dn-shadow-tint-soft);
transform: translate(2px, -2px);
color: #FFFFFF;
}
.dn-btn-secondary {
background: var(--dn-bg-card);
color: var(--dn-fg);
border-color: var(--dn-fg);
}
.dn-btn-secondary:hover {
background: var(--dn-fg);
color: var(--dn-bg-card);
}
.dn-btn-ghost {
background: transparent;
color: var(--dn-fg);
border-color: transparent;
}
.dn-btn-ghost:hover {
color: var(--dn-accent);
background: var(--dn-accent-soft);
}
.dn-btn-destructive {
background: var(--dn-bad);
color: #FFFFFF;
border-color: var(--dn-bad);
box-shadow: -6px 6px 0 rgba(220, 38, 38, 0.25);
}
.dn-btn-destructive:hover {
background: #B91C1C;
border-color: #B91C1C;
box-shadow: -3px 3px 0 rgba(220, 38, 38, 0.25);
transform: translate(2px, -2px);
color: #FFFFFF;
}
/* Arrow icon — translates +4px right on hover (existing .dn-arrow class polished) */
.dn-btn .dn-arrow,
.dn-arrow {
transition: transform 200ms ease-out;
}
.dn-btn:hover .dn-arrow,
a:hover > .dn-arrow {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.dn-btn, .dn-btn .dn-arrow { transition: none; transform: none !important; }
}
/* ─── Animated FAQ accordion (P1: #78) ──────────────────────────────────
Slide+fade on open via @keyframes — works with existing
...
...