/* ═══════════════════════════════════════════════════════════════════
01-base.css
Reset, base typography, liquid-glass tokens, buttons
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
AutoSOC — Website Stylesheet
Design: Dark, minimal, refined. Inspired by Wazuh, Elastic, Zabbix.
═══════════════════════════════════════════════════════════════════ */
/* ── RESET & BASE ─────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Colors — Light Theme */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fb;
--bg-card: #ffffff;
--bg-card-hover: #f3f5f8;
--bg-surface: #f0f2f5;
--text-primary: #111827;
--text-secondary: #4b5563;
--text-muted: #9ca3af;
--accent: #2563eb;
--accent-glow: rgba(37, 99, 235, 0.08);
--accent-hover: #3b82f6;
--accent-dark: #1d4ed8;
--border: rgba(0, 0, 0, 0.06);
--border-light: rgba(0, 0, 0, 0.1);
--success: #16a34a;
--warning: #d97706;
--danger: #dc2626;
/* Typography */
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
/* Spacing */
--container: 1400px;
--section-py: 3.5rem;
--gap: 1.5rem;
/* Transitions */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 0.3s;
/* Border radius */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
font-size: 16px;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--duration) var(--ease);
}
ul { list-style: none; }
img { max-width: 100%; display: block; }
/* ── BREAKPOINTS ──────────────────────────────────────────────────────
The four project breakpoints, mobile-first (min-width):
576px landscape phone / small tablet
768px tablet
992px small laptop
1200px desktop
Media queries cannot read custom properties, so these numbers are
literals everywhere — grep for "min-width: 992px" to find every rule at
a given step. Below 576px is the phone base: no query, just the
defaults in this file.
NOTE: the older component styles are written desktop-first
(`max-width: 1024px/768px/640px/480px`) and still are. Both directions
coexist; when adding rules, follow whichever direction the component
around you already uses rather than mixing the two in one block.
──────────────────────────────────────────────────────────────────── */
.container {
/* Phone first: edge-to-edge minus a tight gutter. */
max-width: var(--container);
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
padding: 0 1.5rem;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
/* Top step keeps the site's established 1400px rather than Bootstrap's
1140px — the wide desktop layout is deliberate, see --container. */
@media (min-width: 1200px) {
.container {
max-width: var(--container);
}
}
.accent { color: var(--accent); }
/* ── LIQUID GLASS DESIGN SYSTEM ───────────────────────────────────── */
/* Shimmer animation for glass hover */
@keyframes glass-shimmer {
0% { transform: translateX(-100%) skewX(-15deg); }
100% { transform: translateX(200%) skewX(-15deg); }
}
@keyframes glass-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
50% { box-shadow: 0 0 24px 2px rgba(37, 99, 235, 0.08); }
}
/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font);
font-weight: 600;
border-radius: 9999px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.4s var(--ease);
white-space: nowrap;
text-decoration: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Below 576px, let long Polish labels wrap. "Umów bezpłatną prezentację"
needs 318px on one line, but a 320px phone only offers 288px inside the
container — with nowrap the button pushed the whole page 14px wide. */
@media (max-width: 575.98px) {
.btn {
white-space: normal;
text-align: center;
}
/* Tighter side padding buys ~26px of text width, which is the difference
between "Umów bezpłatną prezentację" wrapping to two lines and three
on a 320px screen. */
.btn--lg {
padding: 0.8rem 1.1rem;
font-size: 0.95rem;
}
}
/* Shimmer layer for all buttons */
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
transform: translateX(-100%) skewX(-15deg);
transition: none;
z-index: 1;
pointer-events: none;
}
.btn:hover::before {
animation: glass-shimmer 0.6s ease forwards;
}
.btn--lg {
padding: 0.875rem 2rem;
font-size: 1rem;
}
/* ── Primary Button — Liquid Glass ────── */
.btn--primary {
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.85) 0%,
rgba(59, 130, 246, 0.9) 50%,
rgba(99, 102, 241, 0.85) 100%
);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
0 2px 8px rgba(37, 99, 235, 0.15),
0 1px 3px rgba(0, 0, 0, 0.08);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.btn--primary:hover {
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.95) 0%,
rgba(59, 130, 246, 1) 50%,
rgba(99, 102, 241, 0.95) 100%
);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
0 8px 32px rgba(37, 99, 235, 0.3),
0 2px 8px rgba(37, 99, 235, 0.2);
}
.btn--primary:active {
transform: translateY(0);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 2px 4px rgba(0, 0, 0, 0.15),
0 1px 3px rgba(37, 99, 235, 0.15);
}
/* ── Outline Button — Frosted Glass ────── */
.btn--outline {
background: rgba(255, 255, 255, 0.45);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(0, 0, 0, 0.03),
0 1px 4px rgba(0, 0, 0, 0.05),
0 0 0 0.5px rgba(0, 0, 0, 0.05);
}
.btn--outline:hover {
background: rgba(255, 255, 255, 0.65);
border-color: rgba(37, 99, 235, 0.25);
color: var(--accent);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 0 rgba(0, 0, 0, 0.03),
0 4px 16px rgba(37, 99, 235, 0.1),
0 1px 4px rgba(0, 0, 0, 0.06);
}
.btn--outline:active {
transform: translateY(0);
background: rgba(255, 255, 255, 0.5);
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.06),
0 0 0 0.5px rgba(0, 0, 0, 0.05);
}
/* ── Ghost Button — Subtle Glass ────── */
.btn--ghost {
background: transparent;
color: var(--text-secondary);
border-color: transparent;
}
.btn--ghost:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 1px 4px rgba(0, 0, 0, 0.04);
}
/* ═══════════════════════════════════════════════════════════════════
02-chrome.css
Navigation, hero, social proof, section shell, problem cards
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ── NAVIGATION ───────────────────────────────────────────────────── */
/* The bar is one declared height on every page, rather than sizing itself to
whatever its tallest child happens to be. Two reasons: deriving the logo
from the bar is otherwise circular — grow the logo, the bar grows, the
ratio never settles — and a bar that measures its contents drifts between
pages whose navs hold different things.
--nav-height lives here rather than in 01-base.css because it belongs to
this component, and two rules outside it already consumed it (the subpage
top padding in 06, the legal page's scroll-margin in 12); both were
falling back to 72px because nothing ever defined it. They now follow the
real bar. */
:root {
--nav-height: 80px;
--nav-height-scrolled: 72px;
}
@media (max-width: 768px) {
:root {
--nav-height: 64px;
--nav-height-scrolled: 58px;
}
}
@media (max-width: 420px) {
:root {
--nav-height: 56px;
--nav-height-scrolled: 52px;
}
}
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
/* Height comes from the container's min-height, not from padding, so the
declared value is the bar's real outer height. */
padding: 0;
--bar: var(--nav-height);
transition: all var(--duration) var(--ease);
background: transparent;
}
/* --bar is the OUTER height. The scrolled state adds a 1px bottom border,
which sits outside the container's min-height, so it is subtracted there
or the logo comes out short of its share of the bar. */
.nav__container {
min-height: calc(var(--bar) - var(--bar-border, 0px));
}
.nav--scrolled {
--bar: var(--nav-height-scrolled);
--bar-border: 1px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
/* One hairline, and a neutral one. This used to be a white border with a
second white line inset just above it — the liquid-glass "top light
reflection" applied to the bottom edge. Stacked, they painted a 2px
bright rule, invisible where the bar sits on white but a hard bright
band wherever it sits over dark content. A near-black hairline at 7%
disappears into the dark band and still separates the bar from a white
page; the soft drop shadow does the rest. Keep it 1px — --bar-border
tells the container's min-height how much sits outside it. */
border-bottom: 1px solid rgba(15, 23, 42, 0.07);
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}
.nav__container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.nav__logo-img {
height: 25px;
width: auto;
display: block;
}
/* CyberSekTor is the umbrella brand, so every page's nav carries it and the
mark links home. Cropped to its own ink (640x183, 3.497:1) — the supplied
artwork had 18% transparent canvas above the mark and 19% below, so any
height declared against it used to buy 37.5% air.
0.53125 of the bar, not 0.85: the ratio was agreed against the padded
asset, where 0.85 of the box put 0.85 x 0.625 on screen. The factor
absorbs that 0.625 so the rendered size never moved.
The fallback matters — only the landing page declares --bar, so every
other page resolves 56px and renders the mark at 29.75px, close to the
25px the product mark used. */
.nav__logo-img--cybersektor {
height: calc(var(--bar, 56px) * 0.53125);
}
.nav__logo-icon {
color: var(--accent);
font-size: 1.5rem;
}
.nav__logo-text {
color: var(--text-primary);
}
/* ── NAV LOGO COLLAB (AutoSOC × SZBI Manager) ──────────────────── */
.nav__logo-group {
display: flex;
align-items: center;
gap: 0.85rem;
}
.nav__logo-group .nav__logo {
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav__logo-group .nav__logo:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.nav__logo-cross {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 400;
color: var(--text-muted);
opacity: 0.55;
user-select: none;
line-height: 1;
}
.nav__logo-img--secondary {
height: 42px;
}
@media (max-width: 768px) {
.nav__logo-group {
gap: 0.5rem;
}
.nav__logo-group .nav__logo-img {
height: 22px;
}
.nav__logo-img--secondary {
height: 30px;
}
.nav__logo-cross {
font-size: 0.8rem;
}
}
@media (max-width: 420px) {
.nav__logo-cross {
display: none;
}
.nav__logo-group {
gap: 0.4rem;
}
.nav__logo-group .nav__logo-img {
height: 20px;
}
.nav__logo-img--secondary {
height: 26px;
}
}
.nav__links {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: auto;
margin-right: 2rem;
list-style: none;
}
.nav__item {
position: relative;
list-style: none;
}
/* Duplicate of the .nav__actions demo button, living inside the menu list.
The actions one is hidden on mobile (it would collide with the hamburger),
which used to drop the primary CTA entirely on phones — this one takes
over there. Exactly one of the two is visible at any width. */
.nav__item--cta {
display: none;
}
.nav__link {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 600;
background: none;
border: none;
font-family: var(--font);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.5rem 0.85rem;
border-radius: var(--radius);
transition: all var(--duration) var(--ease);
text-decoration: none;
}
.nav__link:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.35);
}
/* Chevron icon */
.nav__chevron {
transition: transform var(--duration) var(--ease);
flex-shrink: 0;
}
.nav__item--dropdown.open .nav__chevron {
transform: rotate(180deg);
}
/* Dropdown panel — Liquid Glass */
.nav__dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 210px;
padding: 0.5rem;
list-style: none;
/* The panel has to be legible on whatever it opens over. At 65% white its
backdrop shows through, which is fine above a white page and unreadable
above the landing page's dark hero — the glass composited to mid-grey
and the grey item text sank into it. 92% keeps the blur and the glass
read while guaranteeing the surface; the border and shadow turn neutral
so the panel detaches from a dark band instead of glowing on it. */
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: var(--radius-lg);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 12px 32px rgba(15, 23, 42, 0.16),
0 2px 8px rgba(15, 23, 42, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s var(--ease);
z-index: 1000;
}
.nav__item--dropdown.open .nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.nav__dropdown-link {
display: block;
padding: 0.6rem 1rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-secondary);
border-radius: var(--radius);
transition: all var(--duration) var(--ease);
white-space: nowrap;
text-decoration: none;
}
/* 6% blue was below the threshold where a hover row reads as a row at all,
especially through the glass. 12% is still quiet on a white page and is the
difference between "something happened" and nothing above a dark one.
Focus gets the same treatment so the keyboard path matches the mouse. */
.nav__dropdown-link:hover,
.nav__dropdown-link:focus-visible {
color: var(--accent);
background: rgba(37, 99, 235, 0.12);
}
.nav__actions {
display: flex;
align-items: center;
gap: 1rem;
}
.nav__actions .btn {
background: #508BF7;
color: #fff;
border: 1px solid rgba(80, 139, 247, 0.3);
box-shadow:
0 1px 4px rgba(80, 139, 247, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.nav__actions .btn:hover {
background: #3d7af0;
color: #fff;
border-color: rgba(80, 139, 247, 0.5);
transform: translateY(-1px);
box-shadow:
0 4px 16px rgba(80, 139, 247, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.nav__actions .btn:active {
transform: translateY(0);
background: #3570e0;
}
.nav__hamburger {
display: none;
flex-direction: column;
gap: 6px;
background: rgba(255, 255, 255, 0.35);
border: 1px solid rgba(255, 255, 255, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius-sm);
cursor: pointer;
padding: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 1px 3px rgba(0, 0, 0, 0.04);
transition: all 0.3s var(--ease);
}
.nav__hamburger:hover {
background: rgba(255, 255, 255, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 2px 8px rgba(0, 0, 0, 0.06);
}
.nav__hamburger span {
width: 24px;
height: 2px;
background: var(--text-primary);
transition: all var(--duration) var(--ease);
border-radius: 2px;
}
/* ── HERO ─────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 8rem 0 4rem;
overflow: hidden;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 20%, #EEF2FF 45%, #EEF2FF 100%);
}
.hero > .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1rem;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 9999px;
font-size: 0.8rem;
color: var(--accent);
margin-bottom: 1.5rem;
font-weight: 600;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(37, 99, 235, 0.06);
transition: all 0.4s var(--ease);
}
.hero__badge:hover {
background: rgba(255, 255, 255, 0.55);
border-color: rgba(37, 99, 235, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 2px 12px rgba(37, 99, 235, 0.1);
}
.hero__badge-dot {
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hero__content {
display: flex;
flex-direction: column;
align-items: center;
}
.hero__title {
font-size: clamp(2.5rem, 4.4vw, 3.4rem);
font-weight: 800;
line-height: 1.16;
letter-spacing: -0.03em;
margin-bottom: 1.25rem;
text-align: center;
}
.hero__title-accent {
background: linear-gradient(135deg, var(--accent), #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero__subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
line-height: 1.7;
max-width: 600px;
margin-inline: auto;
margin-bottom: 2rem;
text-align: justify;
hyphens: auto;
}
.hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 3rem;
justify-content: center;
}
.hero__stats {
display: flex;
align-items: center;
gap: 1.5rem;
justify-content: center;
}
.hero__stat {
display: flex;
flex-direction: column;
align-items: center;
}
.hero__stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.hero__stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hero__stat-divider {
width: 1px;
height: 32px;
background: var(--border-light);
}
/* Hero Dashboard Preview */
.hero__visual {
display: flex;
justify-content: center;
}
a.hero__dashboard {
display: block;
text-decoration: none;
color: inherit;
}
.hero__dashboard {
width: 100%;
max-width: 100%;
height: 416px;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 8px 24px rgba(0, 0, 0, 0.12),
0 20px 60px rgba(0, 0, 0, 0.08),
0 0 120px rgba(37, 99, 235, 0.04);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.hero__dashboard:hover {
transform: scale(1.03);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 12px 32px rgba(0, 0, 0, 0.16),
0 30px 80px rgba(0, 0, 0, 0.1),
0 0 140px rgba(37, 99, 235, 0.06);
}
.hero__dashboard-bar {
display: none;
}
.hero__dashboard-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.hero__dashboard-title {
margin-left: 8px;
font-size: 0.75rem;
color: var(--text-muted);
}
.hero__dashboard-body {
padding: 0;
overflow: hidden;
height: 520px;
}
.hero__dashboard-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 40% 0%;
display: block;
}
/* ── Phone-only hero/proof adjustments ───────────────────────────────
Kept as a max-width block so desktop is provably untouched: every rule
here fixes something that only goes wrong in a ~290px content column. */
@media (max-width: 575.98px) {
/* The 4 stats wrapped 3 + 1 as a flex row, leaving an orphan on its own
line and a dangling divider after the third. */
.hero__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem 0.5rem;
align-items: start;
justify-items: center;
width: 100%;
}
.hero__stat-divider {
display: none;
}
/* Stacked at desktop size the three logos were 84px tall each and the
section ate 466px — 57% of an iPhone screen — to show three logos. */
.proof__logos {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
justify-items: center;
gap: 1rem;
width: 100%;
flex: none;
}
.proof__logo-img {
max-height: 34px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* A fixed 416px-tall box on a ~290px-wide phone is portrait, so
`object-fit: cover` scaled the landscape screenshot to 870px wide and
showed a ~33% slice — an unreadable fragment. */
.hero__dashboard {
height: auto;
aspect-ratio: 16 / 10;
}
.hero__dashboard-img {
object-position: center top;
}
}
/* Pre-rendered laptop mockup in the AutoSOC hero (transparent PNG, 822×548,
laptop fills the frame with ~1% margin). Reuses .hero__laptop-frame
(object-fit: contain + drop-shadow); only aspect + size differ. */
.hero__laptop--autosoc {
display: block;
max-width: 640px;
aspect-ratio: 813 / 540;
position: relative;
z-index: 0;
transform: scale(1.3);
transform-origin: center center;
cursor: zoom-in;
text-decoration: none;
color: inherit;
}
/* Soft elliptical ground shadow under the laptop base — grounds the
transparent mockup so it doesn't look like it floats. */
.hero__laptop--autosoc::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 55%);
width: 52%;
height: 11%;
background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0) 70%);
filter: blur(16px);
z-index: -1;
pointer-events: none;
}
/* ── SOCIAL PROOF ─────────────────────────────────────────────────── */
.proof {
padding: 2.5rem 0;
}
.proof .container {
display: flex;
align-items: center;
gap: 3rem;
}
.proof__label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
white-space: nowrap;
flex-shrink: 0;
}
.proof__logos {
display: flex;
align-items: center;
gap: 5rem;
flex-wrap: wrap;
justify-content: center;
flex: 1;
}
.proof__logo {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
transition: color var(--duration) var(--ease);
}
.proof__logo:hover {
color: var(--text-secondary);
}
.proof__logo-img {
height: 84px;
width: auto;
display: block;
opacity: 0.7;
transition: opacity var(--duration) var(--ease);
}
.proof__logo:hover .proof__logo-img {
opacity: 1;
}
/* ── SECTIONS ─────────────────────────────────────────────────────── */
.section {
padding: var(--section-py) 0;
position: relative;
}
.section--dark {
background: var(--bg-secondary);
}
.section--colored {
background: #EEF2FF;
position: relative;
overflow: hidden;
}
.section--colored > .container {
position: relative;
z-index: 2;
}
.section__header {
text-align: center;
max-width: 800px;
margin: 0 auto 4rem;
}
.section__tag {
display: inline-block;
padding: 0.3rem 0.9rem;
background: rgba(37, 99, 235, 0.06);
color: var(--accent);
font-size: 0.75rem;
font-weight: 600;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 1px 4px rgba(37, 99, 235, 0.06);
transition: all 0.4s var(--ease);
}
/* Tags inside colored sections get stronger glass */
.section--colored .section__tag {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 2px 8px rgba(37, 99, 235, 0.08);
}
.section__title {
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.2;
margin-bottom: 1rem;
}
.section__desc {
color: var(--text-secondary);
font-size: 1.1rem;
line-height: 1.7;
}
/* ── PROBLEM CARDS ────────────────────────────────────────────────── */
.problems {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
}
.problem-card {
padding: 2.4rem 2rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
transition: box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
transform-style: preserve-3d;
will-change: transform;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.problem-card:hover {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 122, 53, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(255, 122, 53, 0.1),
0 0 20px rgba(255, 122, 53, 0.08),
0 0 0 1px rgba(255, 122, 53, 0.1);
}
.problem-card__icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
transition: all 0.4s var(--ease);
}
.problem-card__icon img {
width: 56px;
height: 56px;
filter: invert(50%) sepia(95%) saturate(1500%) hue-rotate(348deg) brightness(102%) contrast(97%);
transition: filter 0.4s var(--ease);
}
.problem-card__title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
text-align: center;
}
.problem-card__desc {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
text-align: justify;
hyphens: auto;
}
/* ═══════════════════════════════════════════════════════════════════
03-components.css
Kill Chain graph, feature showcase, feature cards, module preview
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ── PIPELINE (kept for fallback) ─────────────────────────────────── */
.pipeline { display: none; }
.pipeline__connector { display: none; }
/* ── GRAPH — Horizontal Kill Chain ───────────────────────────────── */
.graph {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr auto 1fr;
position: relative;
margin-bottom: 2rem;
padding: 0;
min-height: 500px;
}
/* Zigzag spine covering the full graph area */
.graph__spine {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.graph__spine svg {
width: 100%;
height: 100%;
display: block;
}
/* Each column spans all 3 rows */
.graph__col {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
grid-row: 1 / -1;
}
/* TOP variant: card on top, node sits at zigzag peak (~30% from top) */
.graph__col--top {
justify-content: center;
}
.graph__col--top .graph__card {
order: 1;
flex: 0.75;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 0;
min-height: 0;
}
.graph__col--top .graph__dash {
order: 2;
}
.graph__col--top .graph__node {
order: 3;
}
/* Spacer below node → pushes node up toward zigzag peak */
.graph__col--top::after {
content: '';
order: 4;
flex: 1.75;
}
/* BOTTOM variant: node sits at zigzag valley */
.graph__col--bottom {
justify-content: center;
}
/* Spacer above node → pushes node down toward zigzag valley */
.graph__col--bottom::before {
content: '';
order: 0;
flex: 1.75;
}
.graph__col--bottom .graph__node {
order: 1;
}
.graph__col--bottom .graph__dash {
order: 2;
}
.graph__col--bottom .graph__card {
order: 3;
flex: 0.75;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 0;
min-height: 0;
}
/* ── Node (numbered circle on the spine) ─────────────────────────── */
.graph__node {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #6366f1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow:
0 0 0 5px rgba(255, 255, 255, 0.85),
0 0 0 7px rgba(37, 99, 235, 0.15),
0 4px 20px rgba(37, 99, 235, 0.3);
position: relative;
z-index: 3;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.graph__col:hover .graph__node {
transform: scale(1.1);
box-shadow:
0 0 0 5px rgba(255, 255, 255, 0.9),
0 0 0 8px rgba(37, 99, 235, 0.25),
0 6px 24px rgba(37, 99, 235, 0.35);
}
.graph__node span {
color: #fff;
font-size: 0.9rem;
font-weight: 800;
font-family: var(--font-mono);
line-height: 1;
}
/* ── Dashed connector (vertical line between node and card) ──────── */
.graph__dash {
width: 2px;
height: 20px;
flex-shrink: 0;
border: none;
background-image: repeating-linear-gradient(
to bottom,
var(--accent) 0,
var(--accent) 4px,
transparent 4px,
transparent 9px
);
opacity: 0.3;
}
/* ── Card (step description) ─────────────────────────────────────── */
.graph__card {
text-align: center;
padding: 0.75rem 0.35rem;
max-width: 100%;
transition: transform 0.4s var(--ease);
}
.graph__col--top:hover .graph__card {
transform: translateY(-4px);
}
.graph__col--bottom:hover .graph__card {
transform: translateY(4px);
}
.graph__card-icon {
width: 56px;
height: 56px;
min-height: 56px;
flex-shrink: 0;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 50%;
margin: 0 auto 0.6rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.04),
0 4px 16px rgba(37, 99, 235, 0.1);
transition: all 0.4s var(--ease);
}
.graph__card-icon img {
width: 40px;
height: 40px;
display: block;
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.graph__col:hover .graph__card-icon {
background: rgba(255, 255, 255, 0.75);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 6px 20px rgba(37, 99, 235, 0.18);
border-color: rgba(37, 99, 235, 0.15);
}
.graph__card h3 {
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 0.3rem;
color: var(--text-primary);
}
.graph__card p {
font-size: 0.72rem;
color: var(--text-secondary);
line-height: 1.4;
}
.solution-loop {
display: flex;
justify-content: center;
}
.solution-loop__inner {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 9999px;
color: var(--accent);
font-size: 0.85rem;
font-weight: 600;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 2px 8px rgba(37, 99, 235, 0.06);
transition: all 0.4s var(--ease);
animation: glass-pulse 4s infinite;
}
.solution-loop__inner:hover {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(37, 99, 235, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 4px 16px rgba(37, 99, 235, 0.12);
}
/* ── FEATURE SHOWCASE ─────────────────────────────────────────────── */
.showcase {
display: flex;
gap: 2rem;
min-height: 460px;
}
.showcase__nav {
display: flex;
flex-direction: column;
gap: 0.3rem;
width: 280px;
flex-shrink: 0;
}
.showcase__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
background: rgba(255, 255, 255, 0.2);
border: 1px solid transparent;
border-left: 3px solid transparent;
border-radius: var(--radius);
cursor: pointer;
font-family: var(--font);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.3s var(--ease);
text-align: left;
}
.showcase__icon {
flex-shrink: 0;
width: 22px;
height: 22px;
opacity: 0.5;
transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
/* default: dark gray */
filter: brightness(0) saturate(100%) opacity(0.6);
}
.showcase__item:hover {
background: rgba(255, 255, 255, 0.4);
color: var(--text-primary);
}
.showcase__item:hover .showcase__icon {
opacity: 1;
filter: brightness(0) saturate(100%) opacity(0.8);
}
.showcase__item.active {
background: rgba(255, 255, 255, 0.6);
border-left-color: var(--accent);
color: var(--accent);
font-weight: 600;
box-shadow:
0 2px 12px rgba(37, 99, 235, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.showcase__item.active .showcase__icon {
opacity: 1;
/* blue #2563eb */
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.showcase__panel {
flex: 1;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
padding: 1.5rem 2rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 24px rgba(0, 0, 0, 0.04);
position: relative;
overflow: hidden;
}
.showcase__content {
display: none;
}
.showcase__content.active {
display: flex;
flex-direction: column;
gap: 1rem;
animation: showcaseFadeIn 0.35s var(--ease);
}
.showcase__text {
min-width: 0;
}
a.showcase__mockup {
display: block;
text-decoration: none;
color: inherit;
}
.showcase__mockup {
width: 100%;
min-width: 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(37, 99, 235, 0.1);
background: var(--bg-secondary);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 12px 40px rgba(0, 0, 0, 0.06);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
cursor: pointer;
}
.showcase__mockup:hover {
transform: scale(1.02);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.12),
0 20px 48px rgba(0, 0, 0, 0.08);
}
.showcase__mockup-bar {
display: none;
}
.showcase__mockup-body {
padding: 0;
overflow: hidden;
border-radius: 10px;
/* Crop: cut left sidebar nav, focus on main content area */
aspect-ratio: 16 / 7.5;
}
.showcase__mockup-img {
width: 135%;
height: 135%;
object-fit: cover;
object-position: 85% 0%;
display: block;
}
/* Per-feature cropping overrides */
/* AI analysis, IoC, Correlation — show from left edge */
.showcase__mockup-img--left {
width: 118%;
height: 118%;
object-position: 12% 0%;
}
/* Alerts, Stats — reduce zoom, show more content */
.showcase__mockup-img--wide {
width: 115%;
height: 115%;
object-position: 70% 0%;
}
/* DFIR-IRIS — new screenshot, balanced crop */
.showcase__mockup-img--iris {
width: 118%;
height: 118%;
object-position: 70% 0%;
}
/* Pre-cropped (_cutted) screenshots — sidebar already removed in the PNG,
so fill the mockup body 1:1 instead of the per-feature zoom/pan crops. */
.showcase__mockup-img--cutted {
width: 100%;
height: 100%;
object-position: 50% 0%;
}
@keyframes showcaseFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.showcase__badge {
display: inline-block;
padding: 0.2rem 0.7rem;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(99, 102, 241, 0.85));
color: #fff;
font-size: 0.65rem;
font-weight: 700;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.showcase__title {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
color: var(--text-primary);
}
.showcase__desc {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 0.75rem;
text-align: justify;
hyphens: auto;
}
.showcase__highlights {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.showcase__highlights li {
position: relative;
padding-left: 1.25rem;
font-size: 0.8rem;
line-height: 1.45;
color: var(--text-secondary);
}
.showcase__highlights li::before {
content: '';
position: absolute;
left: 0;
top: 0.45em;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #6366f1);
box-shadow: 0 0 6px rgba(37, 99, 235, 0.3);
}
/* ── FEATURE CARDS ────────────────────────────────────────────────── */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
margin-bottom: 4rem;
}
.feature-card {
position: relative;
padding: 2rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
transition: all 0.4s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.feature-card:hover {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(37, 99, 235, 0.15);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(0, 0, 0, 0.06),
0 0 0 1px rgba(37, 99, 235, 0.08);
}
.feature-card--highlight {
border-color: rgba(37, 99, 235, 0.15);
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.06),
rgba(255, 255, 255, 0.55)
);
}
.feature-card__badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.2rem 0.6rem;
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.85),
rgba(99, 102, 241, 0.85)
);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 8px rgba(37, 99, 235, 0.2);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.feature-card__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(37, 99, 235, 0.06);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--radius);
margin-bottom: 1.25rem;
color: var(--accent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(37, 99, 235, 0.06);
transition: all 0.4s var(--ease);
}
.feature-card:hover .feature-card__icon {
background: rgba(37, 99, 235, 0.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 2px 8px rgba(37, 99, 235, 0.1);
}
.feature-card h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.feature-card p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ── MODULE PREVIEW ───────────────────────────────────────────────── */
.module-preview {
margin-top: 2rem;
}
.module-preview__header {
text-align: center;
margin-bottom: 1.5rem;
}
.module-preview__header h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.module-preview__header p {
color: var(--text-secondary);
font-size: 0.9rem;
}
.module-preview__tabs {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.module-tab {
padding: 0.5rem 1.25rem;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.4);
color: var(--text-secondary);
font-family: var(--font);
font-size: 0.85rem;
font-weight: 500;
border-radius: 9999px;
cursor: pointer;
transition: all 0.4s var(--ease);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 1px 3px rgba(0, 0, 0, 0.04);
position: relative;
overflow: hidden;
}
.module-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transform: translateX(-100%) skewX(-15deg);
pointer-events: none;
}
.module-tab:hover::before {
animation: glass-shimmer 0.5s ease forwards;
}
.module-tab:hover {
background: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, 0.6);
color: var(--text-primary);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 2px 8px rgba(0, 0, 0, 0.06);
}
.module-tab.active {
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.85) 0%,
rgba(59, 130, 246, 0.9) 50%,
rgba(99, 102, 241, 0.85) 100%
);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
0 4px 16px rgba(37, 99, 235, 0.25);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.module-preview__screen {
position: relative;
max-width: 1050px;
margin: 0 auto;
}
.module-screen {
display: none;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.45);
overflow: hidden;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 20px 60px rgba(0, 0, 0, 0.06);
}
.module-screen.active {
display: block;
animation: fadeIn 0.3s var(--ease);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.module-screen__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
font-size: 0.75rem;
color: var(--text-muted);
}
.module-screen__dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.module-screen__bar span:last-child {
margin-left: 8px;
}
.module-screen__body {
padding: 3rem 2rem;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.module-screen__placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
color: var(--text-muted);
font-size: 0.85rem;
text-align: center;
max-width: 400px;
}
/* ═══════════════════════════════════════════════════════════════════
04-product.css
SZBI block, on-premise, pricing comparison, clients, why us
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ── SZBI MANAGER ─────────────────────────────────────────────────── */
.szbi-features {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 2rem;
align-items: start;
}
.szbi-col {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.szbi-col--center {
align-items: center;
gap: 2rem;
padding-top: 1rem;
}
.szbi-card {
padding: 1.75rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
transition: all 0.4s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.szbi-card:hover {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(37, 99, 235, 0.12);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(0, 0, 0, 0.06);
}
.szbi-card__header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--accent);
}
.szbi-card__header h4 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.szbi-card__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.szbi-card__list li {
font-size: 0.85rem;
color: var(--text-secondary);
padding-left: 1.25rem;
position: relative;
}
.szbi-card__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
opacity: 0.5;
}
/* Synergy diagram */
.szbi-synergy {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.szbi-synergy__box {
padding: 1.25rem 2rem;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius);
text-align: center;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
min-width: 200px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.4s var(--ease);
}
.szbi-synergy__box:hover {
background: rgba(255, 255, 255, 0.6);
transform: translateY(-1px);
}
.szbi-synergy__box--top {
border-color: rgba(59, 130, 246, 0.2);
}
.szbi-synergy__box--bottom {
border-color: rgba(34, 197, 94, 0.2);
}
.szbi-synergy__label {
display: block;
font-weight: 700;
font-size: 0.95rem;
}
.szbi-synergy__sublabel {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.szbi-synergy__connector {
color: var(--text-muted);
}
.szbi-synergy__tagline {
margin-top: 1rem;
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.szbi-stats {
display: flex;
gap: 2rem;
}
.szbi-stat {
text-align: center;
}
.szbi-stat__value {
display: block;
font-size: 1.75rem;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.02em;
}
.szbi-stat__label {
font-size: 0.75rem;
color: var(--text-muted);
}
/* ── ON-PREMISE ───────────────────────────────────────────────────── */
.onprem-hero {
display: flex;
align-items: center;
gap: 4rem;
}
.onprem-hero__visual {
flex: 0 0 380px;
display: flex;
justify-content: center;
}
/* Triangle diagram */
.onprem-triangle {
position: relative;
width: 360px;
height: 320px;
}
.onprem-triangle__connections {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.onprem-triangle__node {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
z-index: 1;
}
.onprem-triangle__node--top {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.onprem-triangle__node--bl {
bottom: 0;
left: 0;
}
.onprem-triangle__node--br {
bottom: 0;
right: 0;
}
.onprem-triangle__icon-wrap {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.4s var(--ease);
}
.onprem-triangle__icon-wrap--muted {
background: rgba(148, 163, 184, 0.08);
border: 1.5px solid rgba(148, 163, 184, 0.15);
}
.onprem-triangle__icon-wrap--active {
background: rgba(37, 99, 235, 0.06);
border: 1.5px solid rgba(37, 99, 235, 0.15);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}
.onprem-triangle__icon--muted {
opacity: 0.35;
filter: grayscale(1);
}
.onprem-triangle__icon--active {
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.onprem-triangle__label {
font-size: 0.78rem;
font-weight: 500;
white-space: nowrap;
}
.onprem-triangle__label--muted {
color: var(--text-muted);
opacity: 0.5;
}
.onprem-triangle__label--accent {
color: var(--accent);
font-weight: 600;
}
.onprem-triangle__badge {
position: absolute;
top: -6px;
right: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
z-index: 2;
}
.onprem-triangle__badge--x {
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
}
.onprem-triangle__badge--check {
background: rgba(34, 197, 94, 0.12);
color: #22c55e;
}
/* Infinity icon between server & endpoint */
.onprem-triangle__infinity {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
}
.onprem-triangle__infinity-icon {
width: 100px;
height: auto;
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
/* Benefits list */
.onprem-hero__benefits {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.onprem-benefit {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius);
transition: all 0.4s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.03);
}
.onprem-benefit:hover {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(37, 99, 235, 0.1);
transform: translateX(4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 6px 24px rgba(0, 0, 0, 0.05);
}
.onprem-benefit__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(99, 102, 241, 0.08));
display: flex;
align-items: center;
justify-content: center;
}
.onprem-benefit__img {
width: 22px;
height: 22px;
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.onprem-benefit__text h3 {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.onprem-benefit__text p {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.55;
text-align: justify;
hyphens: auto;
}
/* ── PRICING COMPARISON ───────────────────────────────────────────── */
.pricing-compare {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
}
.pricing-item {
padding: 2rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
transition: all 0.4s var(--ease);
position: relative;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.pricing-item:hover {
background: rgba(255, 255, 255, 0.65);
border-color: rgba(255, 255, 255, 0.6);
}
.pricing-item--ours {
border-color: rgba(37, 99, 235, 0.2);
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.06),
rgba(255, 255, 255, 0.6)
);
}
.pricing-item--ours:hover {
border-color: rgba(37, 99, 235, 0.3);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(37, 99, 235, 0.12);
}
.pricing-item__badge {
position: absolute;
top: -10px;
left: 1.5rem;
padding: 0.25rem 0.75rem;
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.85),
rgba(99, 102, 241, 0.85)
);
color: #fff;
font-size: 0.7rem;
font-weight: 600;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 8px rgba(37, 99, 235, 0.2);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.pricing-item__header h4 {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.pricing-item__price {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 0.75rem;
}
.pricing-item__price small {
font-weight: 400;
color: var(--text-muted);
font-size: 0.8rem;
}
.pricing-item p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ── CLIENT CARDS ─────────────────────────────────────────────────── */
.clients-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 1050px;
margin: 0 auto;
}
.client-card {
padding: 2.5rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
transition: all 0.4s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.client-card:hover {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(37, 99, 235, 0.12);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(0, 0, 0, 0.06);
}
.client-card__icon {
color: var(--accent);
margin-bottom: 1.5rem;
opacity: 0.7;
}
.client-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.client-card__role {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 1.25rem;
}
.client-card__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.client-card__list li {
font-size: 0.875rem;
color: var(--text-secondary);
padding-left: 1.5rem;
position: relative;
}
.client-card__list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--success);
font-weight: 700;
font-size: 0.8rem;
}
.client-card__motto {
font-size: 0.85rem;
color: var(--text-muted);
font-style: italic;
border-top: 1px solid var(--border);
padding-top: 1rem;
}
/* ── WHY US ───────────────────────────────────────────────────────── */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.why-card {
padding: 2rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
transition: all 0.4s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.why-card:hover {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(37, 99, 235, 0.12);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(0, 0, 0, 0.06);
}
.why-card__number {
font-size: 0.75rem;
font-weight: 700;
color: var(--accent);
font-family: var(--font-mono);
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.why-card h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.why-card p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════════════
05-decoration.css
CTA, footer, wave shapes, strokes, dividers, glow, scroll animations
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ── CTA SECTION ──────────────────────────────────────────────────── */
.cta-content {
text-align: center;
max-width: 750px;
margin: 0 auto;
}
.cta-content__title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 1rem;
}
.cta-content__desc {
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.cta-content__quote {
font-size: 1rem;
color: var(--text-muted);
font-style: italic;
margin-bottom: 2.5rem;
padding: 1rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.cta-contact {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.cta-contact__item {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.9rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.35);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 9999px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 1px 3px rgba(0, 0, 0, 0.04);
transition: all 0.4s var(--ease);
}
.cta-contact__item:hover {
color: var(--accent);
background: rgba(255, 255, 255, 0.55);
border-color: rgba(37, 99, 235, 0.15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 2px 8px rgba(37, 99, 235, 0.08);
transform: translateY(-1px);
}
.cta-contact__icon {
flex-shrink: 0;
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
opacity: 0.7;
transition: opacity 0.3s var(--ease);
}
.cta-contact__item:hover .cta-contact__icon {
opacity: 1;
}
/* ── FOOTER ───────────────────────────────────────────────────────── */
.footer {
padding: 4rem 0 0;
background: #EEF2FF;
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer__brand p {
color: var(--text-muted);
font-size: 0.85rem;
margin-top: 1rem;
line-height: 1.6;
}
.footer__col h4 {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
margin-bottom: 1.25rem;
}
.footer__col ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer__col a {
font-size: 0.875rem;
color: var(--text-muted);
}
.footer__col a:hover {
color: var(--text-primary);
}
.footer__bottom {
margin-top: 3rem;
padding: 1.25rem 0;
border-top: 1px solid rgba(37, 99, 235, 0.08);
text-align: center;
}
.footer__bottom p {
font-size: 0.8rem;
color: var(--text-secondary);
}
/* ── HERO WAVE SHAPES ─────────────────────────────────────────────── */
.hero-waves {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.hero-waves__strokes {
position: absolute;
bottom: -5%;
left: -5%;
width: 110%;
height: 100%;
}
.hero-waves__strokes path {
stroke-linecap: round;
}
/* ── SECTION DECORATIVE STROKES ────────────────── */
.section--has-strokes {
overflow: hidden;
}
.section-strokes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 450px;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.section-strokes__svg {
position: absolute;
top: -10%;
left: -5%;
width: 110%;
height: 120%;
}
.section-strokes__svg path {
stroke-linecap: round;
}
.section--has-strokes > .container {
position: relative;
z-index: 1;
}
/* ── WAVE DIVIDERS (colored ↔ white transitions) ────────────────── */
.wave-divider {
position: absolute;
left: 0;
width: 100%;
pointer-events: none;
z-index: 3;
line-height: 0;
}
.wave-divider--top {
top: -1px;
}
.wave-divider--bottom {
bottom: -1px;
}
.wave-divider svg {
display: block;
width: 100%;
height: 80px;
}
/* ── GLOW EFFECTS ─────────────────────────────────────────────────── */
.hero__visual::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -1;
}
.hero__visual {
position: relative;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
transition: opacity var(--duration) var(--ease);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.feature-card:hover::before {
opacity: 1;
}
.problem-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #ff7a35, transparent);
opacity: 0;
transition: opacity var(--duration) var(--ease);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.problem-card {
position: relative;
}
.problem-card:hover::before {
opacity: 1;
}
/* ── SCROLL ANIMATIONS ────────────────────────────────────────────── */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════════════════════════════
06-content.css
System info, integration, FAQ, subpage shell, 404
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ── SYSTEM INFO ──────────────────────────────────────────────────── */
.system-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.system-card {
padding: 2.5rem 2rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
text-align: center;
transition: all 0.4s var(--ease);
position: relative;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.system-card:hover {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(37, 99, 235, 0.15);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(37, 99, 235, 0.08),
0 0 20px rgba(37, 99, 235, 0.06);
}
.system-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
transition: opacity var(--duration) var(--ease);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.system-card:hover::before {
opacity: 1;
}
.system-card__icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
color: var(--accent);
}
.system-card__icon-img {
/* Recolor black SVG to blue #2563eb */
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.system-card__label {
display: block;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: 0.25rem;
}
.system-card__title {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.system-card__desc {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
text-align: justify;
hyphens: auto;
}
.system-grid--hidden {
display: none;
margin-top: 2rem;
}
.system-grid--hidden.open {
display: grid;
animation: systemGridReveal 0.5s var(--ease);
}
@keyframes systemGridReveal {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
.system-grid__toggle {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 2rem auto 0;
padding: 0.65rem 1.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--accent);
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 9999px;
cursor: pointer;
transition: all 0.3s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 2px 8px rgba(0, 0, 0, 0.04);
}
.system-grid__toggle:hover {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(37, 99, 235, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 16px rgba(37, 99, 235, 0.08);
}
.system-grid__toggle-icon {
transition: transform 0.3s var(--ease);
}
.system-grid__toggle[aria-expanded="true"] .system-grid__toggle-icon {
transform: rotate(180deg);
}
/* ── INTEGRATION ──────────────────────────────────────────────────── */
.integration-row {
display: flex;
align-items: stretch;
gap: 0;
max-width: 900px;
margin: 0 auto;
}
.integration-card {
flex: 1;
padding: 2.5rem 2rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
transition: all 0.4s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.integration-card:hover {
background: rgba(255, 255, 255, 0.7);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 32px rgba(0, 0, 0, 0.06);
}
.integration-card--autosoc:hover {
border-color: rgba(37, 99, 235, 0.2);
}
.integration-card--szbi:hover {
border-color: rgba(34, 197, 94, 0.2);
}
.integration-card__icon {
margin-bottom: 0.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 125px;
}
.integration-card__logo {
height: 35px;
width: auto;
margin: 0 auto;
display: block;
}
.integration-card--szbi .integration-card__logo {
height: 125px;
}
.integration-card__icon svg {
color: var(--accent);
}
.integration-card__title {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.integration-card__subtitle {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 1.25rem;
text-align: center;
}
.integration-card__list {
list-style: none;
padding: 0;
}
.integration-card__list li {
font-size: 0.85rem;
color: var(--text-secondary);
padding: 0.35rem 0 0.35rem 1.25rem;
position: relative;
line-height: 1.5;
}
.integration-card__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.45em;
width: 14px;
height: 14px;
background: url('/icons/ecosystem/check-solid-full.svg') no-repeat center / contain;
filter: invert(55%) sepia(52%) saturate(5766%) hue-rotate(131deg) brightness(96%) contrast(92%);
}
.integration-connector {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 1.5rem;
min-width: 80px;
}
.integration-connector__line {
flex: 1;
width: 2px;
background: repeating-linear-gradient(
to bottom,
rgba(37, 99, 235, 0.2) 0px,
rgba(37, 99, 235, 0.2) 4px,
transparent 4px,
transparent 8px
);
min-height: 30px;
}
.integration-connector__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(37, 99, 235, 0.06);
border: 1px solid rgba(37, 99, 235, 0.15);
border-radius: 50%;
color: var(--accent);
margin: 0.75rem 0;
flex-shrink: 0;
}
.integration-connector__icon-img {
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.integration-connector__label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
text-align: center;
max-width: 80px;
line-height: 1.3;
}
/* 0.65rem lands at 10.4px — below comfortable reading on a phone. */
@media (max-width: 575.98px) {
.integration-connector__label {
font-size: 0.75rem;
}
}
.integration-cta {
text-align: center;
margin-top: 3rem;
}
/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.faq-item {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.4s var(--ease);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 4px rgba(0, 0, 0, 0.04);
}
.faq-item:hover {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(37, 99, 235, 0.12);
}
.faq-item--open {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(37, 99, 235, 0.15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 4px 16px rgba(0, 0, 0, 0.06);
}
.faq-item__question {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1.25rem 1.5rem;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
text-align: left;
gap: 1rem;
transition: color 0.3s var(--ease);
}
.faq-item__question:hover {
color: var(--accent);
}
.faq-item__chevron {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.faq-item--open .faq-item__chevron {
transform: rotate(180deg);
color: var(--accent);
}
.faq-item__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s var(--ease), padding 0.3s var(--ease);
padding: 0 1.5rem;
}
.faq-item--open .faq-item__answer {
max-height: 300px;
padding: 0 1.5rem 1.5rem;
}
.faq-item__answer p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.7;
text-align: justify;
hyphens: auto;
}
.faq-item__link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent);
margin-top: 0.75rem;
text-decoration: none;
transition: gap 0.3s var(--ease);
}
.faq-item__link:hover {
gap: 0.6rem;
}
/* ── SUBPAGE (standalone sections) ───────────────────────────────── */
.section--subpage {
padding-top: calc(var(--nav-height, 72px) + var(--section-py));
min-height: 80vh;
}
/* ── 404 ERROR PAGE ──────────────────────────────────────────────── */
.error-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 8rem 0 4rem;
background: #EEF2FF;
}
.error-page > .section-strokes {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
z-index: 0;
pointer-events: none;
}
.error-page > .container {
position: relative;
z-index: 2;
}
.error-page__content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.error-page__code {
font-size: clamp(8rem, 20vw, 14rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 1rem;
background: linear-gradient(
135deg,
rgba(37, 99, 235, 0.7) 0%,
rgba(99, 102, 241, 0.6) 50%,
rgba(6, 182, 212, 0.5) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.error-page__title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 1rem;
}
.error-page__desc {
color: var(--text-secondary);
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 2.5rem;
}
.error-page__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ═══════════════════════════════════════════════════════════════════
07-responsive.css
Shared responsive rules for everything above
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.problems {
grid-template-columns: repeat(2, 1fr);
}
.onprem-hero {
flex-direction: column;
gap: 2.5rem;
}
.onprem-hero__visual {
flex: none;
width: 100%;
}
.onprem-triangle {
width: 300px;
height: 270px;
margin: 0 auto;
}
.pricing-compare {
grid-template-columns: repeat(2, 1fr);
}
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.szbi-features {
grid-template-columns: 1fr;
}
.szbi-col--center {
order: -1;
}
.showcase {
flex-direction: column;
}
.showcase__nav {
flex-direction: row;
width: 100%;
overflow-x: auto;
gap: 0.4rem;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.showcase__item {
white-space: nowrap;
border-left: none;
border-bottom: 3px solid transparent;
border-radius: var(--radius-sm);
padding: 0.65rem 1rem;
font-size: 0.8rem;
}
.showcase__item.active {
border-left-color: transparent;
border-bottom-color: var(--accent);
}
.showcase__panel {
padding: 2rem;
}
.showcase__content.active {
flex-direction: column;
}
.showcase__mockup {
width: 100%;
}
.system-grid {
grid-template-columns: repeat(2, 1fr);
}
.integration-row {
flex-direction: column;
gap: 0;
max-width: 500px;
margin: 0 auto;
}
.integration-connector {
flex-direction: row;
padding: 1rem 0;
min-width: auto;
}
.integration-connector__line {
flex: 1;
height: 2px;
width: auto;
min-height: auto;
background: repeating-linear-gradient(
to right,
rgba(37, 99, 235, 0.2) 0px,
rgba(37, 99, 235, 0.2) 4px,
transparent 4px,
transparent 8px
);
}
}
@media (max-width: 768px) {
:root {
--section-py: 2.5rem;
}
.nav__links {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
z-index: 999;
margin-left: 0;
margin-right: 0;
padding: 2rem;
}
.nav__links.open {
display: flex;
}
.nav__item {
width: 100%;
max-width: 280px;
text-align: center;
}
.nav__link {
font-size: 1.15rem;
padding: 0.75rem 1rem;
justify-content: center;
width: 100%;
min-height: 44px;
align-items: center;
}
/* Primary CTA, shown only inside the open mobile menu */
.nav__item--cta {
display: block;
margin-top: 1rem;
}
.nav__item--cta .btn {
width: 100%;
justify-content: center;
min-height: 44px;
}
/* Mobile dropdowns: collapsible accordion */
.nav__dropdown {
position: static;
transform: none;
min-width: auto;
width: 100%;
background: rgba(37, 99, 235, 0.04);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: var(--radius);
margin-top: 0.25rem;
padding: 0;
box-shadow: none;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: max-height 0.4s var(--ease),
opacity 0.3s var(--ease),
padding 0.3s var(--ease);
}
.nav__item--dropdown.open .nav__dropdown {
max-height: 300px;
opacity: 1;
visibility: visible;
pointer-events: auto;
padding: 0.5rem;
transform: none;
}
.nav__dropdown-link {
font-size: 1rem;
padding: 0.75rem 1rem;
text-align: center;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__actions > .btn {
display: none;
}
.nav__hamburger {
display: flex;
z-index: 1001;
}
/* The open menu is a fixed full-screen overlay at z-index 999, which
otherwise buries the logo and leaves the header looking empty. */
.nav__logo {
position: relative;
z-index: 1001;
}
.nav__hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 4px);
}
.nav__hamburger.active span:nth-child(2) {
opacity: 0;
}
.nav__hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -4px);
}
.hero > .container {
grid-template-columns: 1fr;
text-align: center;
}
.hero__subtitle {
margin-left: auto;
margin-right: auto;
}
/* Section titles / hero use
for desktop-tuned line breaks; on
narrow viewports let text wrap naturally. */
.br--desktop {
display: none;
}
.hero__cta {
justify-content: center;
}
.hero__stats {
justify-content: center;
flex-wrap: wrap;
}
.hero__visual {
order: -1;
}
.hero__dashboard {
max-width: 100%;
}
.problems,
.features-grid,
.pricing-compare,
.why-grid {
grid-template-columns: 1fr;
}
.onprem-diagram {
padding: 1.5rem 2rem;
}
.showcase__nav {
gap: 0.3rem;
}
.showcase__item .showcase__icon {
display: none;
}
.showcase__panel {
padding: 1.5rem;
}
.showcase__title {
font-size: 1.25rem;
}
.showcase__desc {
font-size: 0.875rem;
}
.clients-grid {
grid-template-columns: 1fr;
}
.pipeline {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem 1rem;
}
.pipeline__step {
max-width: 100%;
}
.proof .container {
flex-direction: column;
text-align: center;
}
/* nowrap keeps the label on one line beside the logos on desktop; the
Polish string is 387px wide, so it must wrap once stacked. */
.proof__label {
white-space: normal;
}
.proof__logos {
gap: 1.5rem;
}
.footer__grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.cta-contact {
flex-direction: column;
align-items: center;
}
.szbi-stats {
flex-wrap: wrap;
justify-content: center;
}
.system-grid {
grid-template-columns: 1fr;
}
.faq-item__question {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.faq-item__answer {
padding: 0 1.25rem;
}
.faq-item--open .faq-item__answer {
padding: 0 1.25rem 1.25rem;
}
}
/* ── Kill Chain graph: vertical below 1200px ─────────────────────────
The zigzag needs eight columns. At 900px that is ~112px each, so the
cards grow tall enough to overflow the grid upwards and cover the
section subtitle (74px of overlap at 800-900px, 22px at 992-1100px).
Anything under the 1200px desktop step gets the vertical timeline,
which stays readable at every width.
─────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
/* text-align: justify opens large word gaps ("rzeki") in Polish, whose
long words leave little slack per line. It only holds together in the
full-width desktop column, so below the 1200px step everything body-copy
goes back to ragged right. */
.hero__subtitle,
.section__desc,
.problem-card__desc,
.feature-card__desc,
.why-card__desc,
.pricing-table__text {
text-align: left;
}
/* Graph: switch to vertical layout on tablet */
.graph {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0;
max-width: 520px;
margin-left: auto;
margin-right: auto;
min-height: 0;
}
/* The desktop layout pins every column to `grid-row: 1 / -1`. With a
single explicit column that leaves the column axis on auto-placement,
so each card spawns its own IMPLICIT column and the graph sprawls
~1350px to the right. Pin both axes to stack them vertically. */
.graph__col {
grid-row: auto;
grid-column: 1;
}
.graph__spine {
display: none;
}
.graph__col--top,
.graph__col--bottom {
flex-direction: row;
min-height: auto;
gap: 1rem;
padding: 1rem 0;
align-self: auto;
border-left: 2px dashed rgba(37, 99, 235, 0.2);
margin-left: 22px;
padding-left: 2rem;
}
/* Desktop pushes nodes onto the zigzag peaks with flex spacers. In the
vertical layout those spacers sit on the horizontal axis and eat ~55%
of the card width, so drop them. */
.graph__col--top::after,
.graph__col--bottom::before {
content: none;
}
.graph__col--top .graph__card,
.graph__col--bottom .graph__card {
order: 2;
flex: 1;
text-align: left;
max-width: 100%;
}
.graph__col--top .graph__node,
.graph__col--bottom .graph__node {
order: 1;
position: absolute;
left: -22px;
width: 40px;
height: 40px;
}
.graph__col--top .graph__dash,
.graph__col--bottom .graph__dash {
display: none;
}
.graph__col:hover .graph__card,
.graph__col--bottom:hover .graph__card {
transform: none;
}
.graph__card-icon {
margin: 0 0 0.5rem;
}
}
@media (max-width: 480px) {
/* .container padding is handled by the mobile-first base in 01-base.css:
1rem below 576px, 1.5rem from 576px up. */
.hero__title {
font-size: 2rem;
}
.section__title {
font-size: 1.75rem;
}
.hero__stats {
gap: 1rem;
}
.hero__stat-divider {
height: 24px;
}
.module-preview__tabs {
gap: 0.35rem;
}
.module-tab {
padding: 0.4rem 0.9rem;
font-size: 0.75rem;
}
.error-page__code {
font-size: 6rem;
}
.error-page__actions {
flex-direction: column;
align-items: center;
}
.pipeline {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════════
08-timeline.css
Empty hero, scenario timeline, pricing table, NIS2 checklist
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
Hero — Empty (landing page placeholder)
═══════════════════════════════════════════════════════════════════ */
.hero--empty {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.hero--empty > .container {
display: block;
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════════
Timeline — Scenario section (nontech page)
═══════════════════════════════════════════════════════════════════ */
.timeline {
position: relative;
display: grid;
/* 7 columns: 5 night items (1fr) + break (0.4fr) + morning (1fr) */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.4fr 1fr;
/* 3 rows: top cards | axis (ring height) | bottom cards */
grid-template-rows: 1fr 42px 1fr;
gap: 0 0.5rem;
align-items: stretch;
}
/* Horizontal gradient line: night blue → morning orange */
.timeline::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
right: 20px;
height: 3px;
background: linear-gradient(
90deg,
#1e3a5f 0%,
#2563eb 20%,
#3b82f6 35%,
#6366f1 50%,
#8b5cf6 70%,
#d97706 90%,
#f59e0b 100%
);
border-radius: 2px;
z-index: 0;
}
/* Glow layer on the line */
.timeline::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
right: 20px;
height: 9px;
background: linear-gradient(
90deg,
rgba(30, 58, 95, 0.15) 0%,
rgba(37, 99, 235, 0.2) 20%,
rgba(59, 130, 246, 0.18) 35%,
rgba(99, 102, 241, 0.15) 50%,
rgba(139, 92, 246, 0.18) 70%,
rgba(217, 119, 6, 0.2) 90%,
rgba(245, 158, 11, 0.15) 100%
);
border-radius: 6px;
filter: blur(4px);
z-index: 0;
}
.timeline__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
/* Default (bottom): spans row 2 (axis) + row 3 (bottom card) */
grid-row: 2 / 4;
/* Ring at top of this span, align with axis row */
justify-content: flex-start;
}
/* Top items: spans row 1 (top card) + row 2 (axis) */
.timeline__item--top {
grid-row: 1 / 3;
flex-direction: column-reverse;
justify-content: flex-start;
}
.timeline__item--top:hover .timeline__card {
transform: translateY(2px);
}
/* Time-skip spacer between night and morning */
.timeline__break {
grid-row: 1 / 3;
grid-column: 6;
position: relative;
z-index: 2;
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: flex-start;
padding-bottom: 46px; /* above the 42px ring row + small gap */
}
/* Dots + label below the axis (axis stays continuous) */
.timeline__break-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.timeline__break-dots {
display: flex;
gap: 6px;
align-items: center;
}
.timeline__break-dots span {
width: 5px;
height: 5px;
border-radius: 50%;
}
.timeline__break-dots span:nth-child(1) {
background: #8b5cf6;
opacity: 0.5;
}
.timeline__break-dots span:nth-child(2) {
background: #a78bfa;
opacity: 0.35;
}
.timeline__break-dots span:nth-child(3) {
background: #d97706;
opacity: 0.45;
}
.timeline__break-label {
margin-top: 4px;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
/* 0.65rem lands at 10.4px — below comfortable reading on a phone. */
@media (max-width: 575.98px) {
.timeline__break-label {
font-size: 0.75rem;
}
}
/* Morning (last) item — ring visible, stem visible */
/* Ring: outer circle */
.timeline__ring {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
/* Color variants for each ring */
.timeline__item:nth-child(1) .timeline__ring {
background: rgba(30, 58, 95, 0.12);
border: 2.5px solid #1e3a5f;
}
.timeline__item:nth-child(2) .timeline__ring {
background: rgba(37, 99, 235, 0.1);
border: 2.5px solid #2563eb;
}
.timeline__item:nth-child(3) .timeline__ring {
background: rgba(59, 130, 246, 0.1);
border: 2.5px solid #3b82f6;
}
.timeline__item:nth-child(4) .timeline__ring {
background: rgba(99, 102, 241, 0.1);
border: 2.5px solid #6366f1;
}
.timeline__item:nth-child(5) .timeline__ring {
background: rgba(139, 92, 246, 0.1);
border: 2.5px solid #8b5cf6;
}
.timeline__item:nth-child(7) .timeline__ring {
background: rgba(217, 119, 6, 0.1);
border: 2.5px solid #d97706;
}
/* Inner dot */
.timeline__dot {
width: 14px;
height: 14px;
border-radius: 50%;
}
.timeline__item:nth-child(1) .timeline__dot { background: #1e3a5f; }
.timeline__item:nth-child(2) .timeline__dot { background: #2563eb; }
.timeline__item:nth-child(3) .timeline__dot { background: #3b82f6; }
.timeline__item:nth-child(4) .timeline__dot { background: #6366f1; }
.timeline__item:nth-child(5) .timeline__dot { background: #8b5cf6; }
.timeline__item:nth-child(7) .timeline__dot { background: #d97706; }
/* Hover: lift ring */
.timeline__item:hover .timeline__ring {
transform: scale(1.15);
}
.timeline__item:nth-child(1):hover .timeline__ring { box-shadow: 0 0 12px rgba(30, 58, 95, 0.3); }
.timeline__item:nth-child(2):hover .timeline__ring { box-shadow: 0 0 12px rgba(37, 99, 235, 0.3); }
.timeline__item:nth-child(3):hover .timeline__ring { box-shadow: 0 0 12px rgba(59, 130, 246, 0.3); }
.timeline__item:nth-child(4):hover .timeline__ring { box-shadow: 0 0 12px rgba(99, 102, 241, 0.3); }
.timeline__item:nth-child(5):hover .timeline__ring { box-shadow: 0 0 12px rgba(139, 92, 246, 0.3); }
.timeline__item:nth-child(7):hover .timeline__ring { box-shadow: 0 0 12px rgba(217, 119, 6, 0.3); }
/* Dashed connector from ring to card */
.timeline__stem {
width: 2px;
height: 24px;
border-left: 2px dashed rgba(0, 0, 0, 0.12);
margin: 0 auto;
}
/* Card below each ring */
.timeline__card {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius);
padding: 1rem 0.85rem;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
max-width: 100%;
width: 100%;
flex: 1; /* stretch to fill available row space — equal height */
transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.timeline__item:hover .timeline__card {
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}
.timeline__time {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.35rem;
}
.timeline__item:nth-child(1) .timeline__time { color: #1e3a5f; }
.timeline__item:nth-child(2) .timeline__time { color: #2563eb; }
.timeline__item:nth-child(3) .timeline__time { color: #3b82f6; }
.timeline__item:nth-child(4) .timeline__time { color: #6366f1; }
.timeline__item:nth-child(5) .timeline__time { color: #8b5cf6; }
.timeline__item:nth-child(7) .timeline__time { color: #d97706; }
.timeline__card h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.timeline__card p {
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-secondary);
}
/* ── Timeline responsive ───────────────────────────────────────────────
Collapses at the same 1200px step as the Kill Chain graph. The 7-column
horizontal timeline squeezes its cards to ~128px at 1100px, which wraps
every label onto three or four lines — the vertical form reads better
everywhere below the desktop breakpoint. */
@media (max-width: 1199.98px) {
/* The desktop timeline is a 7-column grid. Every rule below was written
for a flex column (flex-direction, flex: unset, …) but the parent was
never switched off grid, so the whole block was inert and the timeline
stayed 1234px wide on phones. Switching to flex activates it; the grid
placement props on the children are ignored by a flex container. */
.timeline {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 0;
padding-left: 2rem;
gap: 0;
/* Centred and capped so cards do not stretch to ~820px on a wide
tablet, matching the Kill Chain graph's treatment. Below 768px the
container is already narrower, so this has no effect there. */
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
/* Vertical line */
.timeline::before {
top: 20px;
bottom: 20px;
left: calc(2rem + 20px);
right: auto;
width: 3px;
height: auto;
background: linear-gradient(
180deg,
#1e3a5f 0%,
#2563eb 20%,
#3b82f6 35%,
#6366f1 50%,
#8b5cf6 70%,
#d97706 90%,
#f59e0b 100%
);
}
.timeline::after {
top: 20px;
bottom: 20px;
left: calc(2rem + 17px);
right: auto;
width: 9px;
height: auto;
background: linear-gradient(
180deg,
rgba(30, 58, 95, 0.15) 0%,
rgba(37, 99, 235, 0.2) 20%,
rgba(59, 130, 246, 0.18) 35%,
rgba(99, 102, 241, 0.15) 50%,
rgba(139, 92, 246, 0.18) 70%,
rgba(217, 119, 6, 0.2) 90%,
rgba(245, 158, 11, 0.15) 100%
);
}
.timeline__item {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 1rem;
padding-bottom: 2rem;
}
.timeline__ring {
flex-shrink: 0;
}
.timeline__stem {
display: none;
}
.timeline__card {
max-width: 100%;
}
.timeline__item:nth-child(-n+5),
.timeline__item:nth-child(7) {
flex: unset;
}
.timeline__break {
flex: unset;
flex-direction: row;
padding-top: 0;
padding-left: 0;
padding-bottom: 1rem;
gap: 0.75rem;
}
.timeline__break-inner {
flex-direction: column;
padding: 6px 0;
width: 42px;
justify-content: center;
}
.timeline__break-dots {
flex-direction: column;
gap: 4px;
}
.timeline__break-label {
margin-top: 0;
}
.timeline__item:last-child .timeline__card {
margin-top: 0;
}
}
@media (max-width: 480px) {
.timeline {
padding-left: 1rem;
}
/* Ring shrinks to 36px here, so its centre sits at padding-left + 18px.
Offset each axis layer by half its own width to run through the rings:
line is 3px (18 - 1.5), glow is 9px (18 - 4.5). */
.timeline::before {
left: calc(1rem + 16.5px);
}
.timeline::after {
left: calc(1rem + 13.5px);
}
.timeline__ring {
width: 36px;
height: 36px;
}
.timeline__dot {
width: 12px;
height: 12px;
}
}
/* ═══════════════════════════════════════════════════════════════════
PRICING TABLE
═══════════════════════════════════════════════════════════════════ */
.pricing-table__wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
}
.pricing-table__grid {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 640px;
}
/* --- Header row --- */
.pricing-table__corner {
width: 28%;
background: transparent;
}
.pricing-table__plan {
width: 24%;
padding: 1.75rem 1rem 1.25rem;
text-align: center;
vertical-align: bottom;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 2px solid rgba(37, 99, 235, 0.1);
position: relative;
}
.pricing-table__plan:first-of-type {
border-radius: var(--radius-lg) 0 0 0;
}
.pricing-table__plan:last-child {
border-radius: 0 var(--radius-lg) 0 0;
}
.pricing-table__plan--weak {
opacity: 0.7;
}
.pricing-table__plan--featured {
background: rgba(37, 99, 235, 0.06);
border-bottom-color: var(--blue);
box-shadow: inset 0 2px 0 var(--blue);
}
.pricing-table__badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--blue);
background: rgba(37, 99, 235, 0.1);
border: 1px solid rgba(37, 99, 235, 0.25);
padding: 3px 10px;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.pricing-table__plan-name {
display: block;
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.pricing-table__plan-desc {
display: block;
font-size: 0.8rem;
font-weight: 400;
color: var(--text-secondary);
}
/* --- Body rows --- */
.pricing-table__grid tbody tr {
transition: background 0.2s ease;
}
.pricing-table__grid tbody tr:hover {
background: rgba(37, 99, 235, 0.03);
}
.pricing-table__grid tbody tr:nth-child(even) {
background: rgba(238, 242, 255, 0.4);
}
.pricing-table__grid tbody tr:nth-child(even):hover {
background: rgba(37, 99, 235, 0.06);
}
.pricing-table__feature {
padding: 0.85rem 1.25rem;
font-size: 0.88rem;
font-weight: 500;
color: var(--text-primary);
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.pricing-table__value {
padding: 0.85rem 1rem;
text-align: center;
font-size: 0.88rem;
color: var(--text-secondary);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-left: 1px solid rgba(0, 0, 0, 0.04);
}
.pricing-table__value--featured {
background: rgba(37, 99, 235, 0.04);
}
.pricing-table__check {
color: #16a34a;
font-weight: 700;
font-size: 1.1rem;
}
.pricing-table__cross {
color: #d1d5db;
font-weight: 500;
font-size: 1.1rem;
}
.pricing-table__text {
font-weight: 500;
color: var(--text-primary);
font-size: 0.82rem;
}
.pricing-table__text--strong {
color: var(--blue);
font-weight: 600;
}
/* --- Footer / CTA row --- */
.pricing-table__cta-cell {
padding: 1.5rem 1rem;
text-align: center;
border-left: 1px solid rgba(0, 0, 0, 0.04);
}
.pricing-table__cta-cell--featured {
background: rgba(37, 99, 235, 0.04);
}
.btn--sm {
padding: 0.55rem 1.25rem;
font-size: 0.82rem;
}
/* --- Responsive --- */
@media (max-width: 768px) {
.pricing-table__corner {
width: auto;
min-width: 140px;
}
.pricing-table__plan {
padding: 1.25rem 0.75rem 1rem;
}
.pricing-table__plan-name {
font-size: 1rem;
}
.pricing-table__feature {
padding: 0.75rem 0.75rem;
font-size: 0.8rem;
}
.pricing-table__value {
padding: 0.75rem 0.5rem;
font-size: 0.8rem;
}
.pricing-table__text {
font-size: 0.75rem;
}
}
/* ═══════════════════════════════════════════════════════════════════
CHECKLIST (NIS2 / Compliance)
═══════════════════════════════════════════════════════════════════ */
.checklist__columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.checklist__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.checklist__item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.checklist__item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.checklist__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.checklist__icon-img {
width: 24px;
height: 24px;
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.checklist__content {
flex: 1;
min-width: 0;
}
.checklist__title {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.3rem;
}
.checklist__desc {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
@media (max-width: 768px) {
.checklist__columns {
grid-template-columns: 1fr;
gap: 1rem;
}
.checklist__item {
padding: 1rem;
}
}
/* ═══════════════════════════════════════════════════════════════════
09-page-szbi.css
SZBI Manager page components
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
SZBI MANAGER — page-specific components
════════════════════════════════════════════════════════════════════════════ */
/* ── PROBLEMS — 3-card variant (centered) ───────────────────────── */
.problems--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1024px) {
.problems--three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.problems--three {
grid-template-columns: 1fr;
}
}
/* ── HERO LAPTOP ────────────────────────────────────────────────── */
/* Single pre-rendered mockup (laptop chassis + dashboard baked into one PNG).
Aspect ratio matches /images/laptop_img/laptop-screen_new.png (1672×941). */
.hero__laptop {
position: relative;
width: 100%;
max-width: 820px;
margin: 0 auto;
aspect-ratio: 1672 / 941;
}
.hero__laptop-frame {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
}
@media (max-width: 1024px) {
.hero__laptop {
max-width: 660px;
}
}
/* ── PDCA CYCLE ─────────────────────────────────────────────────── */
.pdca {
display: grid;
grid-template-columns: 320px 1fr;
gap: 4rem;
align-items: center;
margin-top: 1rem;
}
.pdca__cycle {
position: relative;
width: 320px;
height: 320px;
margin: 0 auto;
}
.pdca__svg {
width: 100%;
height: 100%;
display: block;
}
.pdca__quadrant {
stroke-dasharray: 4 7;
opacity: 0.4;
transition:
opacity 0.45s var(--ease),
stroke-width 0.45s var(--ease),
stroke-dasharray 0.45s var(--ease);
}
.pdca__quadrant--plan { stroke: #2563eb; }
.pdca__quadrant--do { stroke: #10b981; }
.pdca__quadrant--check{ stroke: #f59e0b; }
.pdca__quadrant--act { stroke: #8b5cf6; }
.pdca__quadrant-label {
fill: var(--text-muted);
opacity: 0.55;
transition:
fill 0.4s var(--ease),
opacity 0.4s var(--ease),
font-size 0.4s var(--ease);
}
.pdca__center {
position: absolute;
inset: 0;
display: grid;
place-content: center;
place-items: center;
row-gap: 0.4rem;
text-align: center;
pointer-events: none;
}
.pdca__center-label {
grid-area: 1 / 1;
font-size: 2.25rem;
font-weight: 800;
background: linear-gradient(135deg, var(--accent), #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
line-height: 1.1;
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.35s var(--ease),
transform 0.35s var(--ease);
}
.pdca__center-label--default {
opacity: 1;
transform: translateY(0);
}
.pdca__center-label--plan { background: linear-gradient(135deg, #2563eb, #4f46e5); -webkit-background-clip: text; background-clip: text; }
.pdca__center-label--do { background: linear-gradient(135deg, #10b981, #06b6d4); -webkit-background-clip: text; background-clip: text; }
.pdca__center-label--check { background: linear-gradient(135deg, #f59e0b, #ea580c); -webkit-background-clip: text; background-clip: text; }
.pdca__center-label--act { background: linear-gradient(135deg, #8b5cf6, #a855f7); -webkit-background-clip: text; background-clip: text; }
.pdca__center-sub {
grid-area: 2 / 1;
font-size: 0.78rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
transition: color 0.4s var(--ease);
}
/* Arrow overlays — hidden by default, revealed on phase-card hover */
.pdca__arrow {
opacity: 0;
transition:
opacity 0.45s var(--ease),
filter 0.45s var(--ease);
pointer-events: none;
}
/* Phase hover/focus → big-circle response (uses :has(), works for touch via tabindex) */
.pdca__phase {
cursor: pointer;
}
.pdca__phase:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-lg);
}
.pdca:has(.pdca__phase--plan:is(:hover, :focus-within)) .pdca__quadrant--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within)) .pdca__quadrant--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__quadrant--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within)) .pdca__quadrant--act {
opacity: 0;
}
.pdca:has(.pdca__phase--plan:is(:hover, :focus-within)) .pdca__arrow--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within)) .pdca__arrow--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__arrow--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within)) .pdca__arrow--act {
opacity: 1;
filter: drop-shadow(0 0 10px currentColor);
}
.pdca:has(.pdca__phase--plan:is(:hover, :focus-within)) .pdca__quadrant-label--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within)) .pdca__quadrant-label--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__quadrant-label--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within)) .pdca__quadrant-label--act {
opacity: 1;
font-size: 18px;
}
.pdca:has(.pdca__phase--plan:is(:hover, :focus-within)) .pdca__quadrant-label--plan { fill: #2563eb; }
.pdca:has(.pdca__phase--do:is(:hover, :focus-within)) .pdca__quadrant-label--do { fill: #10b981; }
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__quadrant-label--check { fill: #f59e0b; }
.pdca:has(.pdca__phase--act:is(:hover, :focus-within)) .pdca__quadrant-label--act { fill: #8b5cf6; }
.pdca:has(.pdca__phase:is(:hover, :focus-within)) .pdca__center-label--default {
opacity: 0;
transform: translateY(-6px);
}
.pdca:has(.pdca__phase--plan:is(:hover, :focus-within)) .pdca__center-label--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within)) .pdca__center-label--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__center-label--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within)) .pdca__center-label--act {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.pdca__quadrant,
.pdca__center-label,
.pdca__quadrant-label {
transition: none;
}
}
.pdca__phases {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.pdca__phase {
position: relative;
padding: 1.5rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 4px 16px rgba(37, 99, 235, 0.05);
transition: all 0.4s var(--ease);
}
.pdca__phase:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 8px 24px rgba(37, 99, 235, 0.10);
}
.pdca__phase-header {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.65rem;
}
.pdca__phase-letter {
flex-shrink: 0;
width: 44px;
height: 44px;
aspect-ratio: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #6366f1);
color: #fff;
font-size: 1.1rem;
font-weight: 800;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 4px 12px rgba(37, 99, 235, 0.25);
}
.pdca__phase-icon {
width: 22px;
height: 22px;
display: block;
filter: brightness(0) invert(1);
}
.pdca__phase--do .pdca__phase-letter {
background: linear-gradient(135deg, #10b981, #06b6d4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 4px 12px rgba(16, 185, 129, 0.28);
}
.pdca__phase--check .pdca__phase-letter {
background: linear-gradient(135deg, #f59e0b, #ea580c);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 4px 12px rgba(245, 158, 11, 0.28);
}
.pdca__phase--act .pdca__phase-letter {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 4px 12px rgba(139, 92, 246, 0.28);
}
.pdca__phase-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.pdca__phase-desc {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.55;
margin: 0 0 0.85rem;
}
.pdca__phase-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.pdca__phase-list li {
position: relative;
padding-left: 1.1rem;
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.4;
}
.pdca__phase-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
@media (max-width: 1024px) {
.pdca {
grid-template-columns: 1fr;
gap: 2rem;
}
.pdca__cycle {
width: 240px;
height: 240px;
}
.pdca__center-label {
font-size: 1.75rem;
}
}
@media (max-width: 640px) {
.pdca__phases {
grid-template-columns: 1fr;
}
}
/* ── KPI GRID ───────────────────────────────────────────────────── */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-top: 1rem;
}
.kpi-card {
position: relative;
padding: 1.5rem 1.5rem 1.35rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 16px rgba(37, 99, 235, 0.06);
display: flex;
flex-direction: column;
gap: 0.6rem;
transition: all 0.4s var(--ease);
}
.kpi-card:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 24px rgba(37, 99, 235, 0.10);
}
.kpi-card__label {
font-size: 0.78rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.kpi-card__value-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.kpi-card__value {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.03em;
line-height: 1;
}
.kpi-card__ring {
flex-shrink: 0;
width: 56px;
height: 56px;
aspect-ratio: 1;
}
.kpi-card__ring svg {
width: 100%;
height: 100%;
}
.kpi-card__delta {
font-size: 0.85rem;
font-weight: 700;
padding: 0.2rem 0.55rem;
border-radius: 9999px;
}
.kpi-card__delta--down {
color: #16a34a;
background: rgba(22, 163, 74, 0.1);
}
.kpi-card__delta--up {
color: #dc2626;
background: rgba(220, 38, 38, 0.1);
}
.kpi-card__meta {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.4;
}
.kpi-card__meta--good {
color: #16a34a;
font-weight: 600;
}
.kpi-card__meta--warn {
color: #ea580c;
font-weight: 600;
}
@media (max-width: 1024px) {
.kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.kpi-grid {
grid-template-columns: 1fr;
}
}
/* ── AUDIENCE / KLIENCI ─────────────────────────────────────────── */
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
max-width: 1060px;
margin: 0 auto;
}
.audience-card {
position: relative;
padding: 2.25rem 2.25rem 2rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 6px 20px rgba(37, 99, 235, 0.06);
display: flex;
flex-direction: column;
gap: 1.5rem;
transition: all 0.4s var(--ease);
}
.audience-card:hover {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 10px 28px rgba(37, 99, 235, 0.12);
border-color: rgba(37, 99, 235, 0.2);
}
.audience-card__head {
display: flex;
align-items: center;
gap: 1.1rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(37, 99, 235, 0.08);
}
.audience-card__icon {
flex-shrink: 0;
width: 64px;
height: 64px;
aspect-ratio: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-default);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(99, 102, 241, 0.10));
color: var(--accent);
border: 1px solid rgba(37, 99, 235, 0.18);
}
.audience-card__icon-img {
width: 34px;
height: 34px;
display: block;
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.audience-card__title {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 0.4rem;
line-height: 1.25;
}
.audience-card__role {
font-size: 0.92rem;
color: var(--text-muted);
margin: 0;
font-weight: 500;
}
.audience-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.audience-card__list li {
position: relative;
padding-left: 2rem;
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.55;
}
.audience-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.15rem;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #6366f1);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.audience-card__list li::after {
content: "";
position: absolute;
left: 6px;
top: 0.55rem;
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
.audience-card__list strong {
color: var(--text-primary);
font-weight: 700;
}
.audience-card__motto {
margin: 0;
padding: 1rem 1.1rem;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(99, 102, 241, 0.04));
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-default) var(--radius-default) 0;
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.55;
font-weight: 500;
}
@media (max-width: 768px) {
.audience-grid {
grid-template-columns: 1fr;
}
.audience-card {
padding: 1.75rem;
}
.audience-card__title {
font-size: 1.25rem;
}
}
/* ── ECOSYSTEM FLOW ─────────────────────────────────────────────── */
.ecosystem-flow {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 1rem 0;
}
.ecosystem-step {
flex: 1;
min-width: 130px;
max-width: 180px;
padding: 1.5rem 1rem;
text-align: center;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 4px 12px rgba(37, 99, 235, 0.05);
transition: all 0.4s var(--ease);
}
.ecosystem-step:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 8px 20px rgba(37, 99, 235, 0.10);
}
.ecosystem-step__icon {
width: 56px;
height: 56px;
aspect-ratio: 1;
margin: 0 auto 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-default);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(99, 102, 241, 0.06));
border: 1px solid rgba(37, 99, 235, 0.12);
color: var(--accent);
}
.ecosystem-step__icon img {
max-width: 32px;
max-height: 32px;
width: auto;
height: auto;
}
.ecosystem-step__icon--autosoc,
.ecosystem-step__icon--szbi {
background: #ffffff;
padding: 0.5rem;
}
.ecosystem-step__logo {
width: auto;
height: auto;
max-width: 90%;
max-height: 32px;
object-fit: contain;
}
.ecosystem-step__icon--szbi .ecosystem-step__logo {
max-height: 36px;
}
.ecosystem-step__title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 0.3rem;
}
.ecosystem-step__desc {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
line-height: 1.4;
}
.ecosystem-arrow {
display: inline-flex;
align-items: center;
color: rgba(37, 99, 235, 0.45);
flex-shrink: 0;
}
@media (max-width: 1024px) {
.ecosystem-flow {
gap: 0.75rem;
}
.ecosystem-arrow {
transform: rotate(90deg);
}
.ecosystem-step {
min-width: 200px;
}
}
/* ── CTA BANNER (gradient hero CTA) ─────────────────────────────── */
.section--cta {
padding: 0;
background: transparent;
}
.cta-banner {
position: relative;
padding: 4rem 0 4.5rem;
overflow: hidden;
}
.cta-banner__bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #4f46e5 100%);
z-index: 0;
overflow: hidden;
}
.cta-banner__bg::before,
.cta-banner__bg::after {
content: "";
position: absolute;
width: 70%;
height: 200%;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
pointer-events: none;
will-change: transform, opacity;
}
.cta-banner__bg::before {
top: -60%;
left: -20%;
background: radial-gradient(circle, rgba(99, 102, 241, 0.85) 0%, rgba(6, 182, 212, 0.45) 45%, transparent 70%);
animation: ctaGlowA 14s ease-in-out infinite alternate;
}
.cta-banner__bg::after {
bottom: -60%;
right: -25%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.75) 0%, rgba(37, 99, 235, 0.4) 50%, transparent 75%);
animation: ctaGlowB 18s ease-in-out infinite alternate;
}
@keyframes ctaGlowA {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
33% { transform: translate3d(8%, -6%, 0) scale(1.1); opacity: 0.65; }
66% { transform: translate3d(-6%, 4%, 0) scale(0.95); opacity: 0.5; }
100% { transform: translate3d(12%, 8%, 0) scale(1.15); opacity: 0.7; }
}
@keyframes ctaGlowB {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
40% { transform: translate3d(-10%, 6%, 0) scale(1.18); opacity: 0.7; }
70% { transform: translate3d(6%, -8%, 0) scale(0.92); opacity: 0.5; }
100% { transform: translate3d(-14%, -4%, 0) scale(1.08); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
.cta-banner__bg::before,
.cta-banner__bg::after {
animation: none;
}
}
.cta-banner > .container {
position: relative;
z-index: 1;
}
.cta-banner .cta-content {
text-align: center;
max-width: 720px;
margin: 0 auto;
color: #ffffff;
}
.cta-banner .cta-content__title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0 0 1rem;
}
.cta-banner .cta-content__desc {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
margin: 0 auto 1.5rem;
max-width: 560px;
}
.cta-banner .cta-content__quote {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.75);
font-style: italic;
padding: 0.85rem 1.5rem;
border-left: 3px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
border-radius: 0 var(--radius-default) var(--radius-default) 0;
max-width: 540px;
margin: 0 auto 2rem;
text-align: left;
}
.cta-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1.25rem;
}
.cta-banner .btn--primary {
background: rgba(255, 255, 255, 0.95);
color: var(--accent);
border-color: rgba(255, 255, 255, 1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 14px rgba(0, 0, 0, 0.15);
}
.cta-banner .btn--primary:hover {
background: #ffffff;
color: var(--accent);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 8px 22px rgba(0, 0, 0, 0.20);
}
.cta-banner .btn--outline {
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cta-banner .btn--outline:hover {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.55);
color: #ffffff;
}
.cta-pdf {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
text-decoration: none;
margin-bottom: 2rem;
transition: color 0.3s var(--ease);
}
.cta-pdf:hover {
color: #ffffff;
}
.cta-banner .cta-contact {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.cta-banner .cta-contact__item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 9999px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem;
text-decoration: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.3s var(--ease);
}
.cta-banner .cta-contact__item:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.cta-banner .cta-contact__icon {
filter: brightness(0) invert(1);
opacity: 0.85;
}
/* ── FOOTER SOCIAL ──────────────────────────────────────────────── */
.footer__social {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(37, 99, 235, 0.08);
color: var(--accent);
border: 1px solid rgba(37, 99, 235, 0.15);
text-decoration: none;
transition: all 0.3s var(--ease);
}
.footer__social-link:hover {
background: var(--accent);
color: #ffffff;
border-color: var(--accent);
transform: translateY(-1px);
}
.footer__social-icon {
display: block;
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
transition: filter 0.3s var(--ease);
}
.footer__social-link:hover .footer__social-icon {
filter: brightness(0) invert(1);
}
/* ═══════════════════════════════════════════════════════════════════
10-page-firma.css
Company page (/about-us, /dla-kogo) components
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
FIRMA — /firma page components
════════════════════════════════════════════════════════════════════ */
/* ── HERO (firma 2-col with image) ─────────────────────────────────── */
.hero--firma > .container {
align-items: center;
gap: 3.5rem;
}
.hero--firma .hero__content {
flex: 1 1 50%;
text-align: left;
max-width: 560px;
}
.hero--firma .hero__cta {
justify-content: flex-start;
}
.hero__visual--firma {
flex: 1 1 50%;
display: flex;
align-items: center;
justify-content: center;
}
.hero__photo {
position: relative;
width: 100%;
max-width: 580px;
aspect-ratio: 4 / 3;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 20px 50px -10px rgba(15, 23, 42, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
background: linear-gradient(135deg, #0f172a, #1e293b);
}
.hero__photo-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero__photo--podejscie {
aspect-ratio: 4 / 3;
max-width: 100%;
}
@media (max-width: 1024px) {
.hero--firma > .container {
flex-direction: column;
text-align: center;
}
.hero--firma .hero__content {
max-width: 100%;
text-align: center;
}
.hero--firma .hero__cta {
justify-content: center;
}
}
/* ── METRICS STRIP ─────────────────────────────────────────────────── */
.section--metrics {
padding: 0.5rem 0 1rem;
background: var(--bg-primary);
}
.metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
.metric {
text-align: center;
padding: 0.75rem 1rem;
}
.metric__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--accent-glow);
color: var(--accent);
margin-bottom: 1rem;
border: 1px solid rgba(37, 99, 235, 0.12);
}
.metric__value {
font-size: clamp(2rem, 3vw, 2.5rem);
font-weight: 800;
color: var(--accent);
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 0.25rem;
}
.metric__label {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
margin-bottom: 0.4rem;
}
.metric__sub {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.45;
}
@media (max-width: 768px) {
.metrics {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.metric {
padding: 1rem 0.5rem;
}
}
/* ── SPLIT 2-COLUMN LAYOUT ─────────────────────────────────────────── */
.split-2col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 4rem;
align-items: start;
}
.split-2col--reverse {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.split-2col--team {
align-items: center;
}
.split-2col__text {
max-width: 480px;
}
.split-2col__text .section__tag {
margin-bottom: 1rem;
}
.split-2col__divider {
height: 2px;
width: 56px;
background: var(--accent);
border-radius: 2px;
margin: 0 0 1.5rem;
}
.split-2col__desc {
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.7;
margin-top: 0.5rem;
}
.split-2col__media {
display: flex;
align-items: center;
justify-content: center;
}
.section__title--left {
text-align: left;
margin-bottom: 0;
}
@media (max-width: 1024px) {
.split-2col,
.split-2col--reverse,
.split-2col--team {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.split-2col--reverse .split-2col__media {
order: -1;
}
.split-2col__text {
max-width: 100%;
}
.section__title--left {
text-align: left;
}
}
/* ── 2x2 ICON BLOCKS (Kim jesteśmy) ────────────────────────────────── */
.features-2x2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
.feature-block {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.feature-block__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
aspect-ratio: 1;
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
color: var(--accent);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow:
0 6px 18px -8px rgba(37, 99, 235, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
}
.feature-block__title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
line-height: 1.35;
margin: 0;
}
.feature-block__desc {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
@media (max-width: 640px) {
.features-2x2 {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
/* ── APPROACH CHECKLIST (Nasze podejście) ──────────────────────────── */
.approach-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.approach-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.approach-item__check {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--accent);
color: #ffffff;
box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.45);
}
.approach-item__title {
font-size: 1.02rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
margin: 0 0 0.25rem;
line-height: 1.35;
}
.approach-item__desc {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
/* ── TEAM CARDS ────────────────────────────────────────────────────── */
.team-grid {
display: grid;
}
.team-card {
display: flex;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 14px;
backdrop-filter: blur(10px);
box-shadow:
0 6px 20px -10px rgba(15, 23, 42, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.team-card:hover {
transform: translateY(-2px);
box-shadow:
0 14px 28px -12px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.team-card__avatar {
flex-shrink: 0;
overflow: hidden;
}
.team-card__avatar-img {
display: block;
}
.team-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.team-card__name {
font-weight: 700;
color: var(--text-primary, #0f172a);
margin: 0;
line-height: 1.3;
}
.team-card__role {
color: var(--accent);
font-weight: 600;
margin: 0;
}
.team-card__desc {
color: var(--text-secondary);
}
.team-card__social {
margin-top: auto;
}
.team-card__social img {
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
transition: filter 0.3s var(--ease);
}
.team-card__social:hover img {
filter: brightness(0) invert(1);
}
@media (max-width: 1024px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.team-grid {
grid-template-columns: 1fr;
}
}
/* ── ECOSYSTEM (Nasz ekosystem) ────────────────────────────────────── */
.ecosystem {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
gap: 1.5rem;
align-items: stretch;
margin: 2.5rem 0 1.5rem;
}
.ecosystem__product {
display: flex;
flex-direction: column;
padding: 1.5rem 1.5rem 1.75rem;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 14px;
box-shadow:
0 8px 24px -10px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
}
.ecosystem__product--autosoc {
border-top: 3px solid #2563eb;
}
.ecosystem__product--szbi {
border-top: 3px solid #10b981;
}
.ecosystem__product-head {
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.ecosystem__product-logo {
height: 28px;
width: auto;
display: block;
}
.ecosystem__product-logo--szbi {
height: 36px;
}
.ecosystem__product-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.ecosystem__product-list li {
position: relative;
padding-left: 1.4rem;
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.45;
}
.ecosystem__product-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.5rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.ecosystem__product--szbi .ecosystem__product-list li::before {
background: #10b981;
}
.ecosystem__flow {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
min-height: 130px;
}
.ecosystem__flow-line {
position: absolute;
inset: auto 0 auto 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 80px;
pointer-events: none;
z-index: 0;
}
.ecosystem__nodes {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
width: 100%;
position: relative;
z-index: 1;
}
.ecosystem__node {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.ecosystem__node-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
aspect-ratio: 1;
border-radius: 50%;
background: #ffffff;
color: var(--accent);
border: 1.5px solid rgba(37, 99, 235, 0.25);
box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.15);
transition: all 0.3s var(--ease);
}
.ecosystem__node:hover .ecosystem__node-circle {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.3);
}
.ecosystem__node-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
text-align: center;
}
.ecosystem__caption {
text-align: center;
font-size: 0.95rem;
color: var(--text-muted);
margin-top: 1.5rem;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1024px) {
.ecosystem {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.ecosystem__flow {
padding: 1.5rem 0;
}
.ecosystem__flow-line {
display: none;
}
.ecosystem__nodes {
grid-template-columns: repeat(5, auto);
justify-content: center;
gap: 0.75rem;
}
}
@media (max-width: 640px) {
.ecosystem__nodes {
grid-template-columns: repeat(3, 1fr);
}
.ecosystem__node-circle {
width: 42px;
height: 42px;
}
.ecosystem__node-label {
font-size: 0.75rem;
}
}
/* ── FOR-WHOM (Dla kogo jesteśmy) ──────────────────────────────────── */
.for-whom {
display: grid;
align-items: start;
}
.for-whom__intro .section__tag {
margin-bottom: 1rem;
}
.for-whom__intro .section__title {
margin-bottom: 1.25rem;
}
.for-whom__lead {
color: var(--text-secondary);
font-size: 1rem;
margin: 0 0 1rem;
}
.for-whom__checklist {
list-style: none;
padding: 0;
margin: 0 0 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.for-whom__checklist li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--text-secondary);
font-size: 0.97rem;
line-height: 1.5;
}
.for-whom__check {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(37, 99, 235, 0.10);
color: var(--accent);
margin-top: 1px;
}
.for-whom__accent {
display: flex;
gap: 1rem;
padding: 1.25rem 1.4rem;
background: rgba(37, 99, 235, 0.06);
border: 1px solid rgba(37, 99, 235, 0.15);
border-radius: 12px;
align-items: flex-start;
}
.for-whom__accent-icon {
flex-shrink: 0;
color: var(--accent);
}
.for-whom__accent-body h4 {
font-size: 1rem;
font-weight: 700;
color: var(--accent);
margin: 0 0 0.4rem;
line-height: 1.4;
}
.for-whom__accent-body p {
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.for-whom__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
align-items: stretch;
}
/* Audience card variant for /firma */
.audience-card--firma {
position: relative;
}
.audience-card__badge {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
background: rgba(37, 99, 235, 0.10);
border-radius: 6px;
margin-bottom: 0.85rem;
}
.audience-card__badge--biznes {
color: #047857;
background: rgba(16, 185, 129, 0.10);
}
.audience-card--firma .audience-card__title {
line-height: 1.3;
margin: 0 0 1rem;
}
.audience-card__list--simple {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
position: relative;
z-index: 1;
}
.audience-card__list--simple li {
position: relative;
padding-left: 1.4rem;
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.45;
}
.audience-card__list--simple li::before {
content: "";
position: absolute;
left: 0;
top: 0.45rem;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.audience-card--biznes .audience-card__list--simple li::before {
background: #10b981;
}
.audience-card--firma .audience-card__list--simple li::after {
content: none;
}
.audience-card__art {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
pointer-events: none;
line-height: 0;
}
.for-whom__statement {
display: flex;
gap: 1.25rem;
align-items: flex-start;
margin-top: 2.5rem;
padding: 1.5rem 1.75rem;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 14px;
backdrop-filter: blur(10px);
box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.12);
}
.for-whom__statement-icon {
flex-shrink: 0;
color: var(--accent);
}
.for-whom__statement-body h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
margin: 0 0 0.4rem;
line-height: 1.4;
}
.for-whom__statement-body p {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
@media (max-width: 1024px) {
.for-whom {
gap: 2rem;
}
.for-whom__cards {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.for-whom__cards {
grid-template-columns: 1fr;
}
.for-whom__statement {
flex-direction: column;
text-align: left;
padding: 1.25rem;
}
}
/* ── CTA FIRMA (horizontal gradient banner) ────────────────────────── */
.cta-firma {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 2rem;
padding: 2.5rem 2.5rem;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #4f46e5 100%);
color: #ffffff;
box-shadow: 0 20px 50px -12px rgba(37, 99, 235, 0.35);
}
.cta-firma__bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
background:
radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
radial-gradient(circle at 10% 100%, rgba(99, 102, 241, 0.4) 0%, transparent 60%);
}
.cta-firma__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
aspect-ratio: 1;
border-radius: 18px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff;
position: relative;
z-index: 1;
}
.cta-firma__text {
position: relative;
z-index: 1;
min-width: 0;
}
.cta-firma__title {
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
color: #ffffff;
}
.cta-firma__desc {
font-size: 0.97rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.85);
margin: 0;
max-width: 560px;
}
.cta-firma__actions {
position: relative;
z-index: 1;
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
/* White button variants for dark gradient backgrounds */
.btn--white {
background: #ffffff;
color: var(--accent);
border: 1px solid #ffffff;
box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.25);
}
.btn--white:hover {
background: #f0f4ff;
color: var(--accent-dark);
transform: translateY(-1px);
box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.3);
}
.btn--white::before {
background: rgba(37, 99, 235, 0.08);
}
.btn--outline-white {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn--outline-white:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #ffffff;
color: #ffffff;
transform: translateY(-1px);
}
.btn--outline-white::before {
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 1024px) {
.cta-firma {
grid-template-columns: 1fr;
text-align: center;
padding: 2rem 1.5rem;
gap: 1.25rem;
}
.cta-firma__icon {
margin: 0 auto;
width: 72px;
height: 72px;
}
.cta-firma__desc {
margin: 0 auto;
}
.cta-firma__actions {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.cta-firma__actions {
flex-direction: column;
}
.cta-firma__actions .btn {
width: 100%;
justify-content: center;
}
}
/* ── FIRMA FOOTER (5 columns + dual logos) ─────────────────────────── */
.footer__grid--firma {
grid-template-columns: 1.6fr repeat(4, 1fr);
}
.footer__brand-logos {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.footer__brand-logos .nav__logo-img--secondary {
height: 32px;
}
.footer__grid--firma .footer__social {
margin-top: 0.85rem;
}
@media (max-width: 1024px) {
.footer__grid--firma {
grid-template-columns: repeat(3, 1fr);
}
.footer__grid--firma .footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.footer__grid--firma {
grid-template-columns: repeat(2, 1fr);
}
.footer__grid--firma .footer__brand {
grid-column: 1 / -1;
}
}
/* ── NAV active state ──────────────────────────────────────────────── */
.nav__link--active {
color: var(--accent) !important;
font-weight: 600;
}
/* ── FIRMA — additional refinements ────────────────────────────────── */
/* Vertical center the 4 feature blocks against the text column (Kim jesteśmy) */
.split-2col--centered {
align-items: center;
}
/* Stack two paragraphs in the same text column with comfortable spacing */
.split-2col__text .split-2col__desc + .split-2col__desc {
margin-top: 1rem;
}
/* For-whom callouts — uniform 2-col grid below the audience cards */
.for-whom__callouts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-top: 2.5rem;
}
.for-whom__callout {
display: flex;
gap: 1rem;
padding: 1.5rem 1.5rem;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(37, 99, 235, 0.15);
border-radius: 14px;
backdrop-filter: blur(10px);
box-shadow:
0 6px 18px -10px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
align-items: flex-start;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.for-whom__callout:hover {
transform: translateY(-2px);
box-shadow:
0 12px 24px -10px rgba(15, 23, 42, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.for-whom__callout-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
aspect-ratio: 1;
border-radius: 10px;
background: rgba(37, 99, 235, 0.10);
color: var(--accent);
}
.for-whom__callout-body {
min-width: 0;
}
.for-whom__callout-title {
font-size: 1rem;
font-weight: 700;
color: var(--accent);
margin: 0 0 0.45rem;
line-height: 1.4;
}
.for-whom__callout-desc {
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.for-whom__callouts {
grid-template-columns: 1fr;
}
}
/* CTA section — add bottom spacing so gradient banner doesn't kiss the footer */
.section--cta {
padding-top: 1rem;
padding-bottom: 4rem;
}
@media (max-width: 768px) {
.section--cta {
padding-bottom: 3rem;
}
}
/* ── FIRMA — section header tag pulled out of split grid ───────────── */
/* Tag is absolute-positioned so it does NOT participate in layout — has
no effect on vertical centering of the columns below. Negative top
pushes it into the section's top-padding zone above the container. */
.section__tag--standalone {
position: absolute;
top: -2rem;
left: 1.5rem;
z-index: 5;
margin-bottom: 0;
}
/* Ensure the container hosting a standalone tag is the positioning ancestor,
so the tag's top:-2rem lands consistently above the container regardless
of section variant (colored vs white). */
.section .container:has(> .section__tag--standalone) {
position: relative;
}
/* Tag placed inside a column (e.g. reverse layout) — anchors to the
column's left edge instead of the container's. */
.split-2col__text--has-tag {
position: relative;
}
.section__tag--in-column {
left: 0;
}
@media (max-width: 768px) {
.section__tag--standalone {
top: -1.25rem;
}
}
/* Extra padding for sections that need more breathing room (e.g. Kim) */
.section--spacious {
padding-top: 7rem;
padding-bottom: 5rem;
}
@media (max-width: 768px) {
.section--spacious {
padding-top: 4.5rem;
padding-bottom: 3.5rem;
}
}
/* ── Team section — tighter gap, wider cards ───────────────────────── */
/* Override .split-2col base gap and column ratio for the team layout
so the cards have more horizontal room and sit closer to the heading. */
.split-2col--team {
grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.2fr);
gap: 2rem;
}
/* Team card override — wider, less tall, tighter inner spacing */
.team-card__name {
margin-bottom: 0;
}
.team-card__role {
margin-top: 0.1rem;
}
.team-card__desc {
margin: 0.55rem 0 0.75rem;
line-height: 1.5;
}
/* Group of 3 social icons (web, linkedin, github) */
.team-card__socials {
display: flex;
gap: 0.4rem;
margin-top: auto;
}
.team-card__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
aspect-ratio: 1;
border-radius: 6px;
background: rgba(37, 99, 235, 0.08);
color: var(--accent);
transition: all 0.25s var(--ease);
}
.team-card__social:hover {
background: var(--accent);
color: #ffffff;
transform: translateY(-1px);
}
.team-card__social svg {
display: block;
}
/* Refined "Poznaj cały zespół" — text link with arrow, not a button */
.team-cta {
text-align: center;
margin-top: 1.75rem;
}
.team-cta__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.92rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
padding: 0.4rem 0;
border-bottom: 1px solid transparent;
transition: all 0.25s var(--ease);
}
.team-cta__link:hover {
border-bottom-color: var(--accent);
gap: 0.6rem;
}
.team-cta__link svg {
transition: transform 0.25s var(--ease);
}
.team-cta__link:hover svg {
transform: translateX(3px);
}
@media (max-width: 1024px) {
.split-2col--team {
grid-template-columns: 1fr;
}
}
/* ── Audience cards — pill-shaped badge + tighter spacing ───────────── */
.audience-card--firma .audience-card__badge {
padding: 0.3rem 0.85rem;
font-size: 0.7rem;
border-radius: 9999px;
margin-bottom: 0;
border: 1px solid rgba(37, 99, 235, 0.18);
}
.audience-card--firma .audience-card__badge--biznes {
border-color: rgba(16, 185, 129, 0.25);
}
/* ── For-whom: give cards more horizontal space ────────────────────── */
.for-whom {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 2.5rem;
}
/* ── Audience cards — sized to match reference, less tall ─────────── */
.audience-card--firma {
padding: 1.75rem 1.75rem 2rem;
min-height: 0;
}
.audience-card--firma .audience-card__title {
font-size: 1.35rem;
margin-bottom: 0.85rem;
margin-top: -0.75rem;
}
.audience-card--firma .audience-card__list--simple {
gap: 0.55rem;
max-width: 70%;
}
.audience-card--firma .audience-card__list--simple li {
font-size: 0.95rem;
}
/* Push the illustration into the very corner, ignore the card padding,
and clip anything that overflows the rounded card. */
.audience-card--firma {
overflow: hidden;
}
.audience-card--firma .audience-card__art {
right: 0;
bottom: 0;
opacity: 0.95;
}
.audience-card--firma .audience-card__art-img {
display: block;
width: 150px;
height: auto;
object-fit: contain;
}
@media (max-width: 1024px) {
.for-whom {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.audience-card--firma {
padding: 1.5rem 1.5rem 1.75rem;
}
.audience-card--firma .audience-card__list--simple {
max-width: 100%;
}
.audience-card--firma .audience-card__art-img {
width: 90px;
}
}
/* Team card socials — colored icon images (web/linkedin/github), ~90% of button height */
.team-card__social-icon {
display: block;
width: 22px;
height: 22px;
/* Blue tint matching --accent #2563eb */
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
transition: filter 0.25s var(--ease);
}
.team-card__social:hover .team-card__social-icon {
/* Pure white on hover */
filter: brightness(0) invert(1);
}
/* ── FIRMA — recolor file-based icons (img tags) to accent blue ───── */
.feature-block__icon-img,
.for-whom__callout-img,
.metric__icon-img {
display: block;
/* Matches --accent #2563eb */
filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}
.feature-block__icon-img,
.for-whom__callout-img {
width: 22px;
height: 22px;
}
.metric__icon-img {
width: 28px;
height: 28px;
}
/* ═══════════════════════════════════════════════════════════════════
11-page-demo.css
Demo request form (/umow-demo)
Part of the stylesheet served as a single /css/style.css — the
server concatenates styles/*.css in filename order, so the numeric
prefix IS the cascade order. Moving rules between files changes
which declaration wins; keep additions in the file they belong to.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
DEMO FORM PAGE — /umow-demo
═══════════════════════════════════════════════════════════════════ */
/* — Hero variants — */
.hero--demo {
background: linear-gradient(180deg, #ffffff 0%, #EEF2FF 100%);
min-height: auto;
/* Wave-divider--bottom has a 40px white triangle at section bottom.
Padding-bottom 3rem clears it so content isn't visually clipped. */
padding-bottom: 3rem;
}
.hero--legal {
background: linear-gradient(180deg, #ffffff 0%, #EEF2FF 100%);
min-height: auto;
padding-bottom: 2.5rem;
}
/* Snug transition: pull the first section closer to the hero. */
.hero--demo + .section,
.hero--legal + .section {
padding-top: 1.25rem;
}
/* Single-column hero (no right-side visual) — override default 1fr 1fr grid. */
.hero--demo > .container,
.hero--legal > .container {
display: block;
}
.hero__content--centered {
text-align: center;
margin: 0 auto;
max-width: 920px;
align-items: center;
}
/* Tighten vertical rhythm inside the centered hero (h1 → subtitle → bullets). */
.hero__content--centered .hero__title {
margin-bottom: 0.5rem;
}
.hero__content--centered .hero__subtitle {
text-align: center;
max-width: 720px;
margin-inline: auto;
margin-bottom: 0;
}
.hero__content--centered .hero__bullets {
margin-top: 1.25rem;
}
.hero__bullets {
list-style: none;
margin: 1.75rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
text-align: left;
max-width: 560px;
}
.hero__bullets li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--text-secondary);
font-size: 0.98rem;
line-height: 1.55;
}
.hero__bullets li svg {
flex-shrink: 0;
color: var(--accent);
margin-top: 2px;
}
/* Compact metadata badge — fixed in the bottom-right corner of the viewport
so it stays visible while reading the policy. Has a red dismiss button
in the top-right corner. Hidden on mobile (low value, takes screen space). */
.legal-meta {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 90;
display: inline-flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.78rem;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.75);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(37, 99, 235, 0.15);
border-radius: var(--radius);
padding: 0.85rem 1rem 0.55rem;
margin: 0;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.legal-meta[hidden] {
display: none;
}
.legal-meta__close {
position: absolute;
top: 3px;
right: 3px;
width: 12px;
height: 12px;
padding: 0;
border: none;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
cursor: pointer;
transition: background 0.15s var(--ease), transform 0.15s var(--ease);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
}
.legal-meta__close::after {
content: "×";
color: #ffffff;
font-size: 10px;
line-height: 1;
opacity: 0;
transition: opacity 0.15s var(--ease);
font-weight: 700;
transform: translateY(-0.5px);
}
.legal-meta__close:hover {
background: #dc2626;
transform: scale(1.15);
}
.legal-meta__close:hover::after,
.legal-meta__close:focus-visible::after {
opacity: 1;
}
.legal-meta__close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 768px) {
.legal-meta {
display: none;
}
}
.legal-meta span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.legal-meta strong {
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.06em;
}
/* — Form card — */
.form-card {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius-xl);
padding: 2.5rem;
box-shadow:
0 20px 60px rgba(37, 99, 235, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.form-card__header {
margin-bottom: 1.75rem;
}
.form-card__title {
font-size: clamp(1.25rem, 2vw, 1.6rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 0.5rem;
line-height: 1.3;
}
.form-card__intro {
font-size: 0.95rem;
color: var(--text-secondary);
margin: 0;
}
.form-required {
color: var(--danger);
font-weight: 600;
margin-left: 1px;
}
/* — Form fields — */
.form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem 1.25rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-group--full {
grid-column: 1 / -1;
}
.form-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.01em;
}
.form-input {
width: 100%;
font-family: var(--font);
font-size: 0.95rem;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--radius);
padding: 0.7rem 0.9rem;
/* Only animate visual feedback properties, NOT dimensions — otherwise