/* ========================================================================== 42Crunch — MCP Security pivot website Design system: light base, teal = API Security, violet = AI Security ========================================================================== */ :root { /* Light theme. Variable names kept as "navy-*"/"ink-*" for continuity with the rest of the stylesheet even though the surfaces are now light — navy-950 is the page background (not the darkest surface anymore), navy-900/800 are elevated white surfaces, navy-700/600 are borders. */ --navy-950: #ffffff; --navy-900: #ffffff; --navy-800: #ffffff; --navy-700: #d8d0e8; --navy-600: #8f7abd; --ink-100: #1c1730; --ink-300: #4d4766; --ink-500: #6b6482; /* "-400" is the legible-on-light-surfaces text/border tint of each accent; "-500/600/700" stay vivid and are used for button fills and strong borders, where a bright saturated color reads fine either way. */ --teal-400: #0c7e72; --teal-500: #14b8a6; --teal-600: #0d9488; /* Sampled directly from img/logo-42c-transparent.png's gradient */ --violet-300: #c6a4fb; --violet-400: #7c3aed; --violet-500: #842ded; --violet-600: #6219e9; --violet-700: #5306e6; --amber-400: #b45309; --red-400: #dc2626; /* Fixed dark color for text sitting on a bright accent fill (buttons) — independent of the page-background variable, which is now light. */ --on-accent: #14101f; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-card: 0 1px 2px rgba(30,20,50,0.06), 0 10px 28px -10px rgba(30,20,50,0.18); --max-width: 1180px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-snap-type: y mandatory; overflow-x: hidden; } body { margin: 0; font-family: var(--font-sans); background: var(--navy-950); color: var(--ink-100); line-height: 1.6; -webkit-font-smoothing: antialiased; /* overflow-x is intentionally NOT set here: html already clips horizontal overflow (line above), and duplicating overflow-x:hidden on body turns body into a second, competing scroll container. That silently breaks `.site-header`'s position:sticky, because the browser then scrolls while sticky's nearest scrolling ancestor is the (never-scrolled) box. Keep this comment if anyone is tempted to re-add it. */ width: 100%; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Inline text links inside body copy blend into surrounding text under the no-underline default above unless something else makes them obviously clickable. Underline them wherever they sit in flowing prose — paragraphs, callouts, FAQ answers, hint text, table cells — so a link is never guessable-only. Structural/nav links (.nav-link, mega menu, footer columns, buttons, cards) stay underline-free since their layout already signals "this is a control." */ p a, .callout a, .faq-a a, .hint a, td a { text-decoration: underline; text-underline-offset: 2px; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: break-word; } /* German compounds (e.g. "rechenschaftspflichtig") can be a single unbreakable word wide enough on its own, at heading font sizes, to force a CSS Grid track (or any auto-sized box) wider than the phone viewport that contains it — this showed up as horizontal page overflow on ai-regulatory-compliance.de.html specifically. overflow-wrap lets the browser break such a word as a last resort instead of forcing the container wider; it never affects normal text that already fits. Applied broadly (paragraphs, lede, breadcrumb) since any FR/DE/EN copy could in principle contain one very long unbroken token. */ p, .lede, .breadcrumb { overflow-wrap: break-word; } /* Main page headline: violet-to-teal gradient text (reference: AppSec deck slide headline) instead of plain ink. Scoped to h1 only — h2/h3/h4 keep the normal dark ink color inherited from body. The gradient reads fine against both the white page background and the black hero background, so .hero h1 intentionally inherits this rule rather than overriding it. */ h1 { background: linear-gradient(90deg, var(--violet-600), var(--teal-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } p { margin: 0 0 1em; color: var(--ink-300); } code, .mono { font-family: var(--font-mono); } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-400); margin-bottom: 14px; } .eyebrow.violet { color: var(--violet-400); } .eyebrow.teal { color: var(--teal-400); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--violet-500); color: #fff; } .btn-primary:hover { background: var(--violet-600); } .btn-violet { background: var(--violet-500); color: #fff; } .btn-violet:hover { background: var(--violet-400); } .btn-ghost { background: transparent; color: var(--ink-100); border-color: var(--navy-600); } .btn-ghost:hover { border-color: var(--ink-500); } .btn-teal { background: var(--teal-500); color: #fff; } .btn-teal:hover { background: var(--teal-400); } .btn-lg { padding: 15px 28px; font-size: 1.05rem; } .btn-sm { padding: 8px 16px; font-size: 0.85rem; } /* On phones, longer FR/DE CTA copy (e.g. "Kostenlose MCP-Sicherheitsbewertung anfordern") is wider than the viewport itself once forced onto one line by the default `white-space: nowrap` above, which pushes the whole page into horizontal scroll even though the surrounding .btn-row/.hero-ctas flex containers already wrap correctly. Letting the button's own text wrap below this breakpoint fixes it without touching desktop sizing/spacing. */ @media (max-width: 600px) { .btn { white-space: normal; text-align: center; max-width: 100%; } } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--navy-700); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--ink-100); flex-shrink: 0; } .logo img.logo-mark { height: 34px; width: auto; display: block; flex-shrink: 0; } .logo img.logo-mark-wide { height: 38px; } .logo .logo-text { color: var(--ink-100); } .site-footer .logo img.logo-mark { height: 28px; } .footer-badge { height: 72px; width: auto; margin-top: 12px; display: block; filter: grayscale(100%); opacity: 0.85; transition: opacity 0.15s ease, filter 0.15s ease; } .footer-badge:hover { filter: none; opacity: 1; } /* Resource cards: visual header + descriptive body, thin border frame */ .resource-card { border: 1px solid var(--navy-700); border-radius: var(--radius-md); overflow: hidden; background: var(--navy-800); display: flex; flex-direction: column; transition: box-shadow 0.15s ease, transform 0.15s ease; } .resource-card:hover { box-shadow: 0 10px 28px rgba(28,23,48,0.10); transform: translateY(-2px); } .resource-visual { position: relative; height: 148px; display: flex; align-items: center; justify-content: center; } .resource-visual.violet { background: linear-gradient(135deg, var(--violet-600), var(--violet-400)); } .resource-visual.teal { background: linear-gradient(135deg, var(--teal-600), var(--teal-400)); } .resource-visual .glyph { font-size: 2.75rem; color: rgba(255,255,255,0.92); line-height: 1; } .resource-visual .kind-tag { position: absolute; top: 14px; left: 14px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.22); padding: 4px 10px; border-radius: 999px; } .resource-visual .new-tag { position: absolute; top: 14px; right: 14px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet-600); background: #fff; padding: 4px 10px; border-radius: 999px; } .resource-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .resource-body h3 { font-size: 1.05rem; margin: 0 0 8px; } .resource-body p { font-size: 0.9rem; color: var(--ink-300); flex: 1; margin: 0 0 16px; } .primary-nav { display: flex; align-items: center; gap: 2px; } .primary-nav > ul { display: flex; align-items: center; gap: 2px; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 500; color: var(--ink-300); } .nav-link:hover { color: var(--ink-100); background: var(--navy-700); } .nav-item.has-mega:hover .mega, .nav-item.has-mega:focus-within .mega, .nav-item.has-mega.open .mega { display: block; } /* .mega is the hoverable hit-box: flush against the trigger (top:100%, no dead gap) with its own top padding standing in for the visual gap, so the pointer never leaves a hoverable element while moving from the nav link down into the panel. .mega-inner is the visible card inside it. */ .mega { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 620px; padding-top: 12px; z-index: 100; } .mega-inner { background: var(--navy-800); border: 1px solid var(--navy-600); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .mega-col h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .mega-col.ai h4 { color: var(--violet-400); } .mega-col.api h4 { color: var(--teal-400); } .mega-col.neutral h4 { color: var(--ink-500); } /* Resources nav menu: 3 even columns (Learn / Guides / Product), wider than the default 2-column mega so longer link labels don't wrap awkwardly. */ .mega--wide { width: 720px; } .mega-inner--3col { grid-template-columns: 1fr 1fr 1fr; } .mega-col a { display: block; padding: 7px 0; font-size: 0.9rem; color: var(--ink-300); border-bottom: 1px solid transparent; } .mega-col a:hover { color: var(--ink-100); } .mega-col a .tag { display: inline-block; margin-left: 6px; font-size: 0.62rem; padding: 1px 6px; border-radius: 999px; background: var(--navy-700); color: var(--ink-500); vertical-align: middle; } /* Platform-overview link at the top of the Platform mega-menu, spanning both columns above AI Security / API Security. */ .mega-overview { grid-column: 1 / -1; display: block; padding: 4px 2px 16px; margin-bottom: 16px; border-bottom: 1px solid var(--navy-700); } .mega-overview .title { font-size: 0.95rem; font-weight: 700; color: var(--ink-100); } .mega-overview .desc { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 400; color: var(--ink-500); } .mega-overview:hover .title { color: var(--violet-400); } /* Schematic diagram (inline SVG figure) — used to show a mechanism at a glance, e.g. the agent-to-tool path and where 42Crunch governs it. */ .schematic { border: 1px solid var(--navy-700); border-radius: var(--radius-lg); background: var(--navy-800); padding: 30px clamp(14px, 4vw, 36px) 20px; margin: 4px 0 0; } .schematic svg { display: block; width: 100%; height: auto; } .schematic figcaption { margin-top: 16px; font-size: 0.88rem; color: var(--ink-500); text-align: center; } .schem-path-node { fill: var(--navy-800); stroke: var(--navy-700); stroke-width: 1.5; } .schem-path-label { fill: var(--ink-100); font-size: 14px; font-weight: 700; } .schem-path-sub { fill: var(--ink-500); font-size: 11px; font-weight: 400; } .schem-mcp-node { fill: rgba(132,45,237,0.07); stroke: var(--violet-500); stroke-width: 2; } .schem-mcp-label { fill: var(--violet-600); font-size: 14.5px; font-weight: 800; } .schem-mcp-sub { fill: var(--violet-600); font-size: 11px; font-weight: 600; opacity: 0.85; } .schem-arrow-line { stroke: var(--ink-300); stroke-width: 1.5; fill: none; } .schem-arrow-label { fill: var(--ink-500); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .schem-stem { stroke: var(--violet-400); stroke-width: 1.5; fill: none; } .schem-gov-group { fill: rgba(132,45,237,0.035); stroke: var(--navy-700); stroke-width: 1.5; } .schem-gov-title { fill: var(--violet-600); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; } .schem-gov-box { fill: var(--navy-800); stroke: var(--navy-700); stroke-width: 1.5; } .schem-gov-num { fill: var(--violet-400); font-size: 11px; font-weight: 800; } .schem-gov-heading { fill: var(--ink-100); font-size: 13px; font-weight: 700; } .schem-gov-desc { fill: var(--ink-500); font-size: 10.5px; font-weight: 400; } /* teal (API) variants, used alongside the violet (MCP) ones above */ .schem-api-node { fill: rgba(20,184,166,0.07); stroke: var(--teal-500); stroke-width: 2; } .schem-api-label { fill: var(--teal-600); font-size: 14.5px; font-weight: 800; } .schem-api-sub { fill: var(--teal-600); font-size: 11px; font-weight: 600; opacity: 0.85; } .schem-stem-teal { stroke: var(--teal-500); stroke-width: 1.5; fill: none; } .schem-gov-group-teal { fill: rgba(20,184,166,0.035); stroke: var(--navy-700); stroke-width: 1.5; } .schem-gov-title-teal { fill: var(--teal-600); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; } .schem-gov-num-teal { fill: var(--teal-500); font-size: 11px; font-weight: 800; } /* Schematic view toggle (static SVG diagram vs. interactive hover-to-expand view). Both panes live in platform-overview.html; JS in main.js swaps which is hidden. */ .schem-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--navy-700); border-radius: 999px; background: var(--navy-800); margin: 4px 0 18px; } .schem-toggle-btn { appearance: none; border: none; background: transparent; color: var(--ink-500); font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s ease, color 0.15s ease; } .schem-toggle-btn:hover { color: var(--ink-100); } .schem-toggle-btn.is-active { background: var(--violet-500); color: #fff; } .schem-toggle-badge { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; } /* Interactive schematic: same agent-to-tool rail as the static diagram, but each capability card expands on hover/focus/tap, highlighting the node and connector for the layer it governs. */ .schem-interactive { padding-top: 26px; } .schem-stage { position: relative; } .schem-drops { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .schem-rail-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; } .schem-rail { display: flex; align-items: center; min-width: 860px; padding: 4px 2px 2px; } .schem-node { flex: 0 1 auto; min-width: 118px; max-width: 180px; background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: var(--radius-sm); padding: 12px 13px; text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; } .schem-node .sn-title { font-size: 0.85rem; font-weight: 700; color: var(--ink-100); line-height: 1.2; } .schem-node .sn-sub { font-size: 0.68rem; color: var(--ink-500); margin-top: 3px; } .schem-node-accent { border-width: 1.5px; } .schem-node-mcp { border-color: var(--violet-500); background: rgba(132,45,237,0.06); } .schem-node-mcp .sn-title { color: var(--violet-600); font-size: 0.92rem; } .schem-node-api { border-color: var(--teal-500); background: rgba(20,184,166,0.06); } .schem-node-api .sn-title { color: var(--teal-600); font-size: 0.92rem; } .schem-node-mcp.is-lit { box-shadow: 0 0 0 4px rgba(132,45,237,0.16); transform: translateY(-2px); } .schem-node-api.is-lit { box-shadow: 0 0 0 4px rgba(20,184,166,0.16); transform: translateY(-2px); } .schem-link { flex: 1 1 90px; min-width: 60px; position: relative; height: 30px; display: flex; align-items: center; } .schem-link .sl-label { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; white-space: nowrap; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); } .schem-link .sl-line { position: relative; flex: 1; height: 1px; background: var(--navy-700); overflow: hidden; } .schem-link .sl-line::after { content: ""; position: absolute; top: 0; height: 1px; width: 30px; left: -30px; background: linear-gradient(90deg, transparent, var(--violet-400), transparent); animation: schemTravel 3.2s linear infinite; } .schem-link-api .sl-line::after { background: linear-gradient(90deg, transparent, var(--teal-500), transparent); } @keyframes schemTravel { 0% { left: -30px; } 55%, 100% { left: 100%; } } .schem-drop { fill: none; stroke: var(--navy-700); stroke-width: 1.2; transition: stroke 0.2s ease, stroke-width 0.2s ease; } .schem-drop-cap { fill: var(--navy-700); transition: fill 0.2s ease; } .schem-drop.is-lit { stroke-width: 1.6; stroke-dasharray: 4 6; animation: schemFlow 0.7s linear infinite; } .schem-drop-mcp.is-lit { stroke: var(--violet-500); } .schem-drop-api.is-lit { stroke: var(--teal-500); } .schem-drop-cap-mcp.is-lit { fill: var(--violet-500); } .schem-drop-cap-api.is-lit { fill: var(--teal-500); } @keyframes schemFlow { to { stroke-dashoffset: -10; } } .schem-panels { display: grid; grid-template-columns: 0.8fr 1.15fr 0.95fr; gap: 22px; align-items: start; margin-top: 46px; } .schem-thesis h3 { font-size: 1.05rem; margin: 0 0 9px; } .schem-thesis p { font-size: 0.85rem; line-height: 1.6; max-width: 32ch; color: var(--ink-300); } .schem-seq { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--navy-700); padding-top: 12px; } .schem-seq span { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-500); } .schem-seq b { color: var(--ink-300); font-weight: 700; } .schem-panel { border: 1px solid var(--navy-700); border-radius: var(--radius-md); padding: 14px 14px 15px; transition: opacity 0.2s ease; } .schem-panel-mcp { background: rgba(132,45,237,0.035); } .schem-panel-api { background: rgba(20,184,166,0.035); } .schem-panel.is-away { opacity: 0.55; } .schem-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; } .schem-panel-title { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .schem-panel-mcp .schem-panel-title { color: var(--violet-600); } .schem-panel-api .schem-panel-title { color: var(--teal-600); } .schem-panel-arrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; } .schem-cap-list { display: flex; flex-direction: column; gap: 8px; } .schem-cap { background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: var(--radius-sm); padding: 11px 13px 12px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .schem-cap:focus-visible { outline: 2px solid var(--violet-500); outline-offset: 2px; } .schem-cap-stage { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); } .schem-cap-stage i { font-style: normal; opacity: 0.7; } .schem-cap-stage s { text-decoration: none; width: 9px; height: 1px; background: currentColor; opacity: 0.4; } .schem-cap-title { font-size: 0.92rem; font-weight: 700; margin: 5px 0 0; color: var(--ink-100); transition: font-size 0.2s ease; } .schem-cap-desc { font-size: 0.8rem; line-height: 1.55; color: var(--ink-300); margin: 5px 0 0; } .schem-cap-more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.24s ease; } .schem-cap-more p { font-size: 0.82rem; line-height: 1.6; color: var(--ink-300); margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--navy-700); } .schem-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .schem-chips span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.02em; border: 1px solid var(--navy-700); border-radius: 3px; padding: 2px 6px; color: var(--ink-500); } .schem-panel-mcp .schem-chips span { border-color: var(--violet-300); color: var(--violet-600); } .schem-panel-api .schem-chips span { border-color: var(--teal-500); color: var(--teal-600); } .schem-cap.is-on { border-color: var(--violet-500); box-shadow: var(--shadow-card); transform: translateY(-1px); } .schem-panel-api .schem-cap.is-on { border-color: var(--teal-500); } .schem-cap.is-on .schem-cap-title { font-size: 1rem; } .schem-cap.is-on .schem-cap-more { max-height: 320px; opacity: 1; } .schem-cap.is-dim { opacity: 0.5; } .schem-panel-foot { font-size: 0.76rem; line-height: 1.6; color: var(--ink-500); margin: 11px 2px 1px; padding-top: 11px; border-top: 1px solid var(--navy-700); } @media (max-width: 900px) { .schem-panels { grid-template-columns: 1fr; margin-top: 24px; gap: 16px; } .schem-thesis p { max-width: none; } } @media (prefers-reduced-motion: reduce) { .schem-link .sl-line::after { animation: none; display: none; } .schem-drop.is-lit { animation: none; stroke-dasharray: none; } .schem-node, .schem-cap, .schem-cap-title, .schem-cap-more, .schem-panel { transition: none; } } /* Pull quote */ .pull-quote { border-left: 3px solid var(--violet-500); padding: 4px 0 4px 22px; margin: 28px 0 0; font-size: 1.2rem; font-weight: 600; color: var(--ink-100); font-style: italic; max-width: 640px; } .pull-quote cite { display: block; margin-top: 10px; font-size: 0.82rem; font-weight: 600; font-style: normal; color: var(--ink-500); letter-spacing: 0.02em; } .source-note { margin-top: 10px; font-size: 0.78rem; color: var(--ink-500); } .source-note a { color: var(--ink-500); text-decoration: underline; } .source-note a:hover { color: var(--teal-400); } /* Stat band — dark background callout with large-format numbers */ .stat-band { background: radial-gradient(60% 60% at 15% -10%, rgba(132,45,237,0.28), transparent 60%), radial-gradient(60% 60% at 85% 0%, rgba(20,184,166,0.16), transparent 60%), #0a0a0d; } .stat-band .section-head .eyebrow { color: var(--teal-400); } .stat-band .section-head h2 { color: #fff; } .stat-band .section-head p { color: rgba(255,255,255,0.7); } .stat-band-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } @media (max-width: 900px) { .stat-band-grid { grid-template-columns: repeat(2, 1fr); } } .stat-band-item { text-align: center; padding: 10px 4px; } .stat-band-item .num { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; color: #fff; line-height: 1.05; } .stat-band-item .label { margin-top: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.66); line-height: 1.4; } /* Quote carousel — analyst / partner endorsement cards */ .quote-carousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .quote-carousel { grid-template-columns: 1fr; } } .quote-card { border: 1px solid var(--navy-700); border-radius: var(--radius-lg); background: var(--navy-800); padding: 26px; display: flex; flex-direction: column; } .quote-card .mark { font-size: 2.2rem; line-height: 1; color: var(--violet-400); font-weight: 800; margin-bottom: 6px; } .quote-card .body { font-size: 0.92rem; color: var(--ink-300); flex: 1; } .quote-card .attribution { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--navy-700); } .quote-card .attribution .company { font-weight: 700; color: var(--ink-100); font-size: 0.92rem; } .quote-card .attribution .role { font-size: 0.8rem; color: var(--ink-500); margin-top: 2px; } .quote-card .attribution .logo { display: block; height: 26px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; margin-bottom: 10px; } .quote-card .attribution .logo.tag-cyber { border-radius: 4px; } .quote-card .attribution .logo.gartner-pi { height: 40px; margin-bottom: 4px; } /* ---------- Auto-advancing quote marquee (opt-in) ---------- A continuously scrolling row of .quote-card content — no buttons, no dots, nothing to click to advance. The track holds the quote set twice back to back; animating it exactly -50% loops seamlessly since both halves are identical. Pauses on hover/focus as a courtesy for reading, and honors prefers-reduced-motion. Cards keep the same look as the static .quote-carousel grid — only the layout mechanics differ. */ .quote-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .quote-marquee-track { display: flex; gap: 22px; width: max-content; animation: quoteMarqueeScroll 50s linear infinite; } .quote-marquee:hover .quote-marquee-track, .quote-marquee:focus-within .quote-marquee-track { animation-play-state: paused; } .quote-marquee .quote-card { flex: 0 0 380px; width: 380px; } @keyframes quoteMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 640px) { .quote-marquee .quote-card { flex-basis: 300px; width: 300px; } } @media (prefers-reduced-motion: reduce) { .quote-marquee-track { animation: none; } } /* Simple 2x2 cost callouts */ .cost-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 900px) { .cost-grid { grid-template-columns: 1fr; } } .cost-item { border: 1px solid var(--navy-700); border-radius: var(--radius-md); background: var(--navy-800); padding: 20px 22px; font-size: 0.92rem; color: var(--ink-300); } .cost-item strong { color: var(--ink-100); } .nav-actions { display: flex; align-items: center; gap: 10px; } @media (max-width: 480px) { /* The logo no longer shrinks below its natural aspect ratio (see .logo flex-shrink above), so on narrow phones the CTA needs to give up the space instead: smaller type, tighter padding, and a two-line wrap rather than a nowrap overflow. */ .site-header .nav-actions { gap: 6px; } .site-header .nav-actions .btn.btn-primary.btn-sm { max-width: 128px; padding: 6px 10px; font-size: 0.7rem; line-height: 1.2; white-space: normal; text-align: center; } } .lang-picker { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; margin-right: 4px; } .lang-picker a { color: var(--ink-500); } .lang-picker a:hover { color: var(--ink-100); } .lang-picker .lang-current { color: var(--ink-100); font-weight: 700; } .lang-picker .sep { color: var(--navy-600); } @media (max-width: 480px) { .lang-picker { display: none; } } .lang-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border: 1px solid var(--navy-600); border-radius: 999px; color: var(--ink-100); font-family: inherit; font-size: 0.78rem; font-weight: 700; padding: 4px 24px 4px 12px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0L5 6L10 0Z' fill='%236b6482'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .lang-select:hover { border-color: var(--violet-400); color: var(--violet-400); } .lang-select:focus { outline: none; border-color: var(--violet-500); } .nav-toggle { display: none; } @media (max-width: 940px) { .nav-toggle { display: inline-flex; } /* Mobile nav: a full-width panel dropped below the sticky header, not the desktop horizontal bar. .site-header is `position: sticky`, which is a valid containing block, so this anchors correctly without extra markup. */ .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 68px); overflow-y: auto; background: var(--navy-900); border-bottom: 1px solid var(--navy-700); box-shadow: var(--shadow-card); } .primary-nav.open { display: block; } .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; } .nav-item { width: 100%; } .nav-link { width: 100%; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--navy-700); } /* Mega panels become inline accordion sections instead of 620px absolute popovers, which would overflow any phone screen. Same .open class the existing JS already toggles on tap — no JS changes needed. */ .mega { position: static; width: auto; padding-top: 0; left: auto; transform: none; } .mega-inner { grid-template-columns: 1fr; gap: 4px; border: none; border-radius: 0; box-shadow: none; background: var(--navy-800); border-top: 1px solid var(--navy-700); padding: 16px 20px 20px; } } /* ---------- Hero ---------- */ .hero { padding: 88px 0 72px; position: relative; overflow: hidden; min-height: calc(100vh - 68px); display: flex; align-items: center; background: radial-gradient(60% 60% at 15% -10%, rgba(132,45,237,0.28), transparent 60%), radial-gradient(60% 60% at 85% 0%, rgba(20,184,166,0.16), transparent 60%), #0a0a0d; color: #fff; } /* ---------- Hero: dark treatment (mirrors deliverance.ai's black hero) ---------- Scoped under .hero so every rule below only touches this section — nothing sitewide changes. */ .hero .eyebrow.violet { color: var(--violet-300); } /* Homepage hero headline: plain white, overriding the sitewide h1 violet-to-teal gradient (see the base h1 rule above) — by request, scoped to .hero only, so every other page's h1 keeps the gradient treatment. The Request Demo CTA below stays on .btn-primary (violet fill), unchanged. */ .hero h1 { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #fff; color: #fff; } .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); } .hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); } /* .hero .lede and .hero-subctas a colors are set further down, where those selectors already exist (font-size/layout rules) — a duplicate here would tie on specificity with that later rule and lose to it on source order, which is exactly what made this copy render dim instead of white. */ .hero .scan-card { background: rgba(255,255,255,0.045); border: 1.5px solid rgba(255,255,255,0.26); backdrop-filter: blur(6px); } .hero .scan-card h3 { color: #fff; } .hero .scan-card .hint { color: rgba(255,255,255,0.55); } .hero .metric-card .stat-grid > div { border-bottom-color: rgba(255,255,255,0.14); } .hero .metric-card .stat-grid > div:nth-child(odd) .num { color: var(--violet-300); } .hero .metric-card .stat-grid > div:nth-child(even) .num { color: var(--teal-500); } .hero .stat-grid .lbl { color: rgba(255,255,255,0.68); } /* Customer logos: same source PNGs used elsewhere on light backgrounds, but forced to solid white here — brightness(0) invert(1) flattens any color to white while preserving each logo's transparent background. */ .hero .logo-strip img { filter: brightness(0) invert(1); opacity: 0.65; } .hero .logo-strip img:hover { opacity: 1; filter: brightness(0) invert(1); } /* 100vh on mobile includes the space behind the collapsing address bar, which cuts off content until the visitor scrolls once. dvh tracks the actually-visible viewport; feature-detected so older browsers keep vh. */ @supports (min-height: 100dvh) { .hero { min-height: calc(100dvh - 68px); } } /* Scroll-snap (below) fights touch momentum scrolling once grids stack to a single column and sections run much taller than a phone viewport — mobile gets normal free scroll instead. */ @media (max-width: 900px) { html { scroll-snap-type: none; } section { scroll-snap-align: none; } .hero { min-height: auto; padding-top: 48px; padding-bottom: 48px; } } .hero .wrap { width: 100%; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 88px; align-items: center; } /* Grid items default to min-width:auto, so a column's track can be forced wider than its share of the row by its own content's min-content size — on ai-regulatory-compliance this showed up only in German, where the text column's copy is long enough to hit the trap on narrow screens even with normal word-wrapping in play. min-width:0 is the standard fix: it lets each column shrink to the space the grid actually gives it. */ .hero-grid > * { min-width: 0; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { font-size: clamp(2.1rem, 4vw, 2.7rem); } .hero .lede { font-size: 1.15rem; color: rgba(255,255,255,0.86); max-width: 52ch; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-subctas { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; font-size: 0.88rem; } .hero-subctas a { color: rgba(255,255,255,0.78); border-bottom: 1px dashed rgba(255,255,255,0.32); } .hero-subctas a:hover { color: var(--teal-500); border-color: var(--teal-500); } /* ---------- Scan tool card ---------- */ .scan-card { background: var(--navy-900); border: 1px solid var(--navy-600); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); } .scan-card h3 { font-size: 1.05rem; margin-bottom: 4px; } .scan-card .hint { font-size: 0.85rem; color: var(--ink-500); margin-bottom: 18px; } /* Metric card — a scan-card variant with a brand-gradient top edge and a left-aligned, divided stat layout (vs. the plain centered .stat-grid used elsewhere) for a spec-sheet feel. Columns alternate violet/teal to echo the AI Security / API Security split. */ .metric-card { position: relative; overflow: hidden; } .metric-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--violet-500), var(--teal-500)); } .metric-card .stat-grid { margin-top: 10px; } .metric-card .stat-grid > div { text-align: left; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--navy-700); } .metric-card .stat-grid > div:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .metric-card .stat-grid > div:nth-child(odd) .num { color: var(--violet-500); } .metric-card .stat-grid > div:nth-child(even) .num { color: var(--teal-500); } .metric-card .num { font-weight: 800; letter-spacing: -0.01em; display: block; } .metric-card .lbl { line-height: 1.35; margin-top: 3px; } .pill { padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .pill.high { background: rgba(248,113,113,0.15); color: var(--red-400); } .pill.med { background: rgba(251,191,36,0.15); color: var(--amber-400); } .pill.ok { background: rgba(132,45,237,0.15); color: var(--violet-400); } /* ---------- Demo request form ---------- */ .demo-form { display: grid; gap: 18px; max-width: 640px; } .demo-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 600px) { .demo-form .row2 { grid-template-columns: 1fr; } } .demo-form label { font-size: 0.8rem; color: var(--ink-500); display: block; margin-bottom: 6px; font-weight: 600; } .demo-form input, .demo-form textarea, .demo-form select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--navy-600); background: var(--navy-950); color: var(--ink-100); font-family: var(--font-sans); font-size: 0.92rem; } .demo-form input:focus, .demo-form textarea:focus, .demo-form select:focus { outline: 2px solid var(--violet-500); outline-offset: 1px; } .demo-form textarea { resize: vertical; min-height: 100px; } .demo-form .checkbox-row { display: flex; gap: 20px; flex-wrap: wrap; } .demo-form .checkbox-row label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-300); font-weight: 400; margin-bottom: 0; } .demo-form .checkbox-row input { width: auto; } .demo-form .req-mark { color: var(--violet-400); font-weight: 700; } .demo-confirm { display: none; margin-top: 24px; padding: 20px 22px; border-radius: var(--radius-md); border: 1px solid var(--violet-500); background: rgba(132,45,237,0.08); } .demo-confirm.show { display: block; } /* ---------- HubSpot embedded form (request-demo) ---------- Reskins HubSpot's default raw-HTML form markup to match .demo-form above. Some HubSpot portals instead render embeds inside a sandboxed iframe (hs-form-frame) — this CSS can't reach inside that iframe, so if the form still shows HubSpot's default look, match the theme from HubSpot's own form Style editor instead (Marketing > Forms > edit > Style tab). */ .hs-form-wrap { max-width: 640px; } .hs-form-wrap .hs-form { display: grid; gap: 18px; } .hs-form-wrap .hs-form-field { margin-bottom: 0; } .hs-form-wrap .hs-form-field > label { font-size: 0.8rem; color: var(--ink-500); display: block; margin-bottom: 6px; font-weight: 600; } .hs-form-wrap .hs-form-field > label .hs-form-required { color: var(--violet-400); font-weight: 700; } .hs-form-wrap input[type="text"], .hs-form-wrap input[type="email"], .hs-form-wrap input[type="tel"], .hs-form-wrap textarea, .hs-form-wrap select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--navy-600); background: var(--navy-950); color: var(--ink-100); font-family: var(--font-sans); font-size: 0.92rem; } .hs-form-wrap input[type="text"]:focus, .hs-form-wrap input[type="email"]:focus, .hs-form-wrap input[type="tel"]:focus, .hs-form-wrap textarea:focus, .hs-form-wrap select:focus { outline: 2px solid var(--violet-500); outline-offset: 1px; } .hs-form-wrap textarea { resize: vertical; min-height: 100px; } .hs-form-wrap ul.inputs-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; } .hs-form-wrap .hs-form-booleancheckbox-display { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-300); font-weight: 400; } .hs-form-wrap .hs-form-booleancheckbox input { width: auto; } .hs-form-wrap .hs-button { background: var(--violet-500); color: #fff; border: none; border-radius: var(--radius-sm); padding: 15px 28px; font-size: 1.05rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 10px; font-family: var(--font-sans); } .hs-form-wrap .hs-button:hover { background: var(--violet-600); } .hs-form-wrap .hs-error-msgs { list-style: none; padding: 0; margin: 4px 0 0; } .hs-form-wrap .hs-error-msgs label { color: var(--red-400); font-size: 0.8rem; font-weight: 500; } .hs-form-wrap .hs-main-font-element { color: var(--ink-300); } .hs-form-wrap .submitted-message { padding: 20px 22px; border-radius: var(--radius-md); border: 1px solid var(--violet-500); background: rgba(132,45,237,0.08); color: var(--ink-100); } .hs-form-wrap .legal-consent-container { font-size: 0.78rem; color: var(--ink-500); } /* ---------- Gated resource pages ---------- */ .inside-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; } .inside-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--ink-300); line-height: 1.5; } .inside-list li::before { content: "✓"; color: var(--teal-600); font-weight: 700; flex-shrink: 0; } .resource-meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .resource-meta img { height: 22px; width: auto; object-fit: contain; } .resource-meta .badge-text { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-500); text-transform: uppercase; } .gate-note { font-size: 0.8rem; color: var(--ink-500); margin-top: 12px; line-height: 1.5; } .gate-fallback { padding: 22px; border-radius: var(--radius-md); border: 1px dashed var(--navy-600); color: var(--ink-300); font-size: 0.9rem; line-height: 1.55; text-align: center; } .gate-fallback a { color: var(--teal-400); font-weight: 700; } .gate-success { padding: 24px 22px; border-radius: var(--radius-md); border: 1px solid rgba(20,184,166,0.4); background: rgba(20,184,166,0.08); text-align: center; } .gate-success .icon { font-size: 1.7rem; color: var(--teal-400); margin-bottom: 6px; } .gate-success h4 { margin: 0 0 6px; color: var(--ink-100); font-size: 1rem; } .gate-success p { color: var(--ink-300); font-size: 0.87rem; margin: 0 0 16px; line-height: 1.5; } .gate-success .btn { width: 100%; justify-content: center; } /* ---------- Sections ---------- */ section { padding: 84px 0; border-top: 1px solid var(--navy-700); scroll-snap-align: start; scroll-margin-top: 68px; } .section-head { max-width: 700px; margin-bottom: 44px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); } .section-head p { font-size: 1.05rem; } .logo-strip { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; justify-content: center; } .logo-strip img { height: 64px; width: auto; opacity: 0.7; filter: grayscale(1); transition: opacity 0.2s ease, filter 0.2s ease; } .logo-strip img:hover { opacity: 0.95; filter: grayscale(0); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } } /* Compact resource card: category tiles with a small visual header, no long description */ a.resource-card.compact { text-decoration: none; color: inherit; } .resource-card.compact .resource-visual { height: 84px; } .resource-card.compact .resource-visual .glyph { font-size: 1.9rem; } .resource-card.compact .resource-body { padding: 14px 18px; flex-direction: row; align-items: center; justify-content: space-between; } .resource-card.compact .resource-body h3 { font-size: 0.92rem; margin: 0; } .resource-card.compact .resource-body .arrow { color: var(--teal-400); font-size: 1rem; flex: none; } /* Secondary "About" pages: leadership avatars, news list, partner chips */ .avatar-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 14px; flex: none; } .avatar-circle.violet { background: linear-gradient(135deg, var(--violet-600), var(--violet-400)); } .avatar-circle.teal { background: linear-gradient(135deg, var(--teal-600), var(--teal-400)); } .avatar-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; display: block; } .board-row .avatar-photo { width: 42px; height: 42px; margin-bottom: 0; } .leader-card { border: 1px solid var(--navy-700); border-radius: var(--radius-md); background: var(--navy-800); padding: 22px; } .leader-card h3 { font-size: 1rem; margin: 0 0 2px; } .leader-card .role { color: var(--violet-600); font-size: 0.82rem; font-weight: 600; margin-bottom: 10px; } .leader-card p.bio { color: var(--ink-300); font-size: 0.88rem; margin: 0; } .leader-card .linkedin-link { display: inline-flex; align-items: center; margin-top: 12px; } .leader-card .linkedin-link img { width: 26px; height: 26px; border-radius: 50%; display: block; transition: opacity 0.15s ease, transform 0.15s ease; } .leader-card .linkedin-link:hover img { opacity: 0.82; transform: translateY(-1px); } .board-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--navy-700); } .board-row:first-child { border-top: 1px solid var(--navy-700); } .board-row .avatar-circle { width: 42px; height: 42px; font-size: 0.85rem; margin-bottom: 0; } .board-row .name { font-weight: 600; color: var(--ink-100); font-size: 0.92rem; } /* Webinar speaker bylines: small circular headshots with a violet ring, overlapped slightly when there's more than one speaker on a session. */ .speaker-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; white-space: normal; } .speaker-avatars { display: flex; flex: none; } .speaker-avatar { width: 30px; height: 30px; margin-bottom: 0; border: 2px solid var(--violet-400); box-shadow: 0 0 0 2px var(--navy-950); } .speaker-avatars .speaker-avatar + .speaker-avatar { margin-left: -10px; } .speaker-names { font-size: 0.78rem; color: var(--ink-500); } .board-row .role { color: var(--ink-500); font-size: 0.85rem; } .news-list { display: flex; flex-direction: column; } .news-item { display: flex; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--navy-700); align-items: baseline; } .news-item:first-child { border-top: 1px solid var(--navy-700); } .news-item .date { flex: none; width: 130px; color: var(--ink-500); font-size: 0.82rem; } .news-item .headline { color: var(--ink-100); font-size: 0.94rem; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .card { background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: var(--radius-md); padding: 26px; } .card h3 { font-size: 1.1rem; } .card .icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.1rem; } .card.teal .icon { background: rgba(20,184,166,0.15); color: var(--teal-400); } .card.violet .icon { background: rgba(132,45,237,0.15); color: var(--violet-400); } /* "What to expect" list — plain stacked blocks, flush-left under the heading (no numbering, no icon/badge indent), sized to sit in a narrow hero column (e.g. request-demo). */ .expect-heading { margin: 36px 0 16px; font-size: 1.05rem; color: var(--ink-100); } .expect-list { margin: 0; padding: 0; max-width: 480px; } .expect-item { font-size: 0.92rem; color: var(--ink-300); line-height: 1.45; margin-bottom: 18px; } .expect-item:last-child { margin-bottom: 0; } .expect-item strong { color: var(--ink-100); } /* Individual/self-serve pricing cards (upgrade_subscription.html) — plan name, big price figure, feature checklist (reuses the existing .inside-list check-mark styling), CTA button, inside the existing light .card container. */ .plan-card { display: flex; flex-direction: column; height: 100%; } .plan-card .plan-name { font-size: 1.15rem; font-weight: 800; color: var(--ink-100); margin: 0 0 6px; } .plan-card .plan-price { font-size: 2.6rem; font-weight: 800; color: var(--ink-100); line-height: 1; } .plan-card .plan-price span { font-size: 1rem; font-weight: 600; color: var(--ink-500); } .plan-card .plan-allocation { font-size: 0.85rem; color: var(--ink-500); margin: 10px 0 0; } .plan-card .inside-list { margin-top: 22px; flex: 1; } .plan-card .btn { margin-top: 40px; width: 100%; justify-content: center; } /* ---------- Legal / policy pages (privacy-policy, cookie-policy, report-security-issues) ---------- */ .legal-content { max-width: 760px; } .legal-content h2 { font-size: 1.5rem; margin: 48px 0 16px; } .legal-content h2:first-child { margin-top: 0; } .legal-content h3 { font-size: 1.15rem; margin: 32px 0 12px; color: var(--ink-100); } .legal-content h4 { font-size: 0.95rem; margin: 24px 0 10px; color: var(--ink-100); text-transform: uppercase; letter-spacing: 0.04em; } .legal-content p { font-size: 0.96rem; line-height: 1.7; color: var(--ink-300); margin: 0 0 16px; } .legal-content ul { list-style: disc; margin: 0 0 16px; padding-left: 22px; display: block; } .legal-content ul li { font-size: 0.96rem; line-height: 1.65; color: var(--ink-300); margin-bottom: 6px; } .legal-content .meta { font-size: 0.85rem; color: var(--ink-500); margin: -8px 0 28px; } .legal-content .split-table { min-width: 640px; } .legal-content .split-table td, .legal-content .split-table th { font-size: 0.85rem; } .legal-content .table-scroll { margin: 0 0 32px; border: 1px solid var(--navy-700); border-radius: var(--radius-md); } .legal-content .table-scroll .split-table { margin: 0; } .legal-content .table-scroll th { background: rgba(132,45,237,0.04); } /* Risk card: shaded title band + labeled risk/approach sections, used on OWASP Top 10 pages */ .risk-card { padding: 0; overflow: hidden; } .risk-card-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; } .risk-card-head { background: #0a0a0d; } .risk-card-head .icon { margin-bottom: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; flex: none; } /* Brighter, higher-contrast teal/violet for numbering against the black band specifically — the standard teal-400/violet-400 read too dark on #0a0a0d. teal-500 and violet-300 are the tones this codebase already uses for teal/violet text on other dark backgrounds (hero stats, dark diagrams). */ .risk-card.teal .risk-card-head .icon { color: var(--teal-500); } .risk-card.violet .risk-card-head .icon { color: var(--violet-300); } .risk-card-head h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; color: #fff; } .risk-card-body { padding: 22px 24px 26px; } .risk-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin: 0 0 6px; } .risk-card-body p { margin-bottom: 16px; } .risk-card-body p:last-child { margin-bottom: 0; } .risk-label.approach { margin-top: 4px; } .risk-card.teal .risk-label.approach { color: var(--teal-400); } .risk-card.violet .risk-label.approach { color: var(--violet-400); } .card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; margin-top: 6px; text-decoration: none; } .risk-card.teal .card-cta { color: var(--teal-400); } .risk-card.violet .card-cta { color: var(--violet-400); } .card-cta:hover { text-decoration: underline; } /* Alternating solid teal/violet card-head bands, used in place of the default solid-black .risk-card-head treatment where a page wants the risk-card grid to alternate color by position instead. Scoped to .alt-bands so it doesn't affect the black-band pages (OWASP API Top 10, Why 42Crunch). */ .alt-bands .risk-card:nth-child(odd) .risk-card-head { background: var(--teal-600); } .alt-bands .risk-card:nth-child(even) .risk-card-head { background: var(--violet-500); } .alt-bands .risk-card .risk-card-head .icon { color: #fff; background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); } .alt-bands .risk-card-head h3 { color: #fff; } /* Same solid teal/violet card-head treatment as .alt-bands, but keyed to each card's own .teal/.violet accent class instead of its position in the grid — for pages where the color sequence doesn't land neatly on odd/even (e.g. violet, teal, violet, teal, violet). Scoped to .match-bands. */ .match-bands .risk-card.teal .risk-card-head { background: var(--teal-600); } .match-bands .risk-card.violet .risk-card-head { background: var(--violet-500); } .match-bands .risk-card .risk-card-head .icon { color: #fff; background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); } .match-bands .risk-card-head h3 { color: #fff; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } } .stat-grid .num { font-size: 2.1rem; font-weight: 800; color: var(--teal-400); } .stat-grid .lbl { font-size: 0.85rem; color: var(--ink-500); } /* Cycle diagram */ .cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 800px) { .cycle { grid-template-columns: 1fr; } } .cycle-step { position: relative; background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: var(--radius-md); padding: 20px; } .cycle-step .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-500); } .cycle-step h4 { margin: 6px 0 8px; font-size: 1.02rem; } .cycle-step p { font-size: 0.86rem; margin: 0; } .cycle-step.active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500) inset; } .cycle-arrow { display: none; } @media (min-width: 801px) { .cycle { position: relative; } } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; } .split-table { width: 100%; min-width: 560px; border-collapse: collapse; } .table-scroll .split-table { margin-top: 0; } .split-table th, .split-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--navy-700); font-size: 0.9rem; } .split-table th { color: var(--ink-500); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; } .split-table td strong { color: var(--ink-100); } /* ---------- Comparison table "pop" treatment (opt-in modifier) ---------- Stronger header type + firmer row dividers than the base .split-table, for a comparison table that needs to read at a glance. Add alongside .split-table (class="split-table pop-table") — the base table styling elsewhere on the site is untouched. */ .split-table.pop-table th { color: var(--ink-100); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.07em; padding: 14px; border-bottom: 2px solid var(--violet-500); background: rgba(132,45,237,0.05); } .split-table.pop-table td { padding: 16px 14px; border-bottom: 1px solid var(--navy-600); font-size: 0.93rem; } .split-table.pop-table tbody tr:nth-child(even) td { background: rgba(30,20,50,0.025); } .split-table.pop-table tbody tr:last-child td { border-bottom: 2px solid var(--navy-700); } .split-table.pop-table td:first-child { font-weight: 600; color: var(--ink-100); } /* ---------- Dark background variant of a section (comparison option) ---------- Scoped under .section-dark so nothing sitewide changes. Used once on index-v2.html, directly below the light version, purely so the two can be compared side by side. Keeps the violet dividing lines on the table. */ .section-dark { background: #0a0a0d; } .section-dark .eyebrow { color: var(--teal-500); } .section-dark .eyebrow.violet { color: var(--violet-300); } .section-dark .section-head h2 { color: #fff; } .section-dark .section-head p { color: rgba(255,255,255,0.68); } .section-dark .split-table.pop-table th { color: #fff; border-bottom: 2px solid var(--violet-400); background: rgba(132,45,237,0.14); } .section-dark .split-table.pop-table td { color: rgba(255,255,255,0.82); border-bottom: 1px solid rgba(132,45,237,0.4); } .section-dark .split-table.pop-table td:first-child { color: #fff; } .section-dark .split-table.pop-table td strong { color: var(--teal-500); } .section-dark .split-table.pop-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.04); } .section-dark .split-table.pop-table tbody tr:last-child td { border-bottom: 2px solid var(--violet-400); } .badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .badge { font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--navy-600); color: var(--ink-500); } .badge.agent { border-color: var(--violet-500); color: var(--violet-400); } .badge.backend { border-color: var(--teal-500); color: var(--teal-400); } .badge.live { border-color: var(--violet-500); color: var(--violet-400); } .badge.roadmap { border-color: var(--amber-400); color: var(--amber-400); } .callout { border-radius: var(--radius-md); padding: 20px 22px; border: 1px solid var(--navy-600); background: var(--navy-800); font-size: 0.92rem; } .callout.warn { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.06); } .callout.warn strong { color: var(--amber-400); } .callout.info { border-color: rgba(20,184,166,0.4); background: rgba(20,184,166,0.06); } .callout.info strong { color: var(--teal-400); } .callout.violet { border-color: rgba(132,45,237,0.5); background: rgba(132,45,237,0.1); } .callout.violet strong { color: var(--violet-500); } .path-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .path-cards { grid-template-columns: 1fr; } } .path-card { border-radius: var(--radius-lg); padding: 30px 26px; border: 1px solid var(--navy-700); background: var(--navy-900); display: flex; flex-direction: column; } .path-card .eyebrow { margin-bottom: 18px; } .path-card h3 { font-size: 1.3rem; } .path-card .hook { font-style: italic; color: var(--ink-100); font-size: 0.95rem; margin: 10px 0 18px; } .path-card .btn { margin-top: auto; } .faq-item { border-bottom: 1px solid var(--navy-700); padding: 18px 0; } .faq-q { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; } .faq-q .plus { transition: transform 0.2s ease; color: var(--teal-400); font-size: 1.2rem; } .faq-item.open .plus { transform: rotate(45deg); } .faq-a { display: none; margin-top: 12px; } .faq-item.open .faq-a { display: block; } .cta-band { background: #fff; border-top: 1px solid var(--navy-700); border-bottom: 1px solid var(--navy-700); text-align: center; padding: 72px 0; } .cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } /* Base .btn-row: a few pages (e.g. pricing.html) use this class outside a .cta-band with only an inline style for display/gap/margin, and that inline style never set flex-wrap. On phones, longer FR/DE button text (e.g. "Kostenlose MCP-Sicherheitsbewertung anfordern") then had nowhere to wrap to, forcing the row wider than the viewport. This is overridden by .cta-band .btn-row below for the centered variant, and by any inline style's own display/gap/margin values — it only fills in the missing flex-wrap sitewide. */ .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .cta-band .btn-row { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; } /* Dark CTA band — same black/violet/teal treatment as the hero (see .hero above). Applied to every page's closing CTA section site-wide. Heading text is plain white here (unlike the hero's gradient h1) per explicit request. The homepage's top hero banner is untouched. */ .cta-band.cta-band-dark { background: radial-gradient(60% 60% at 15% -10%, rgba(132,45,237,0.28), transparent 60%), radial-gradient(60% 60% at 85% 0%, rgba(20,184,166,0.16), transparent 60%), #0a0a0d; border-top-color: transparent; border-bottom-color: transparent; } .cta-band.cta-band-dark h2 { color: #fff; } .cta-band.cta-band-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); } .cta-band.cta-band-dark .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); } /* ---------- Page header (non-home pages) ---------- */ .page-hero { padding: 64px 0 48px; } .page-hero h1 { font-size: clamp(2.3rem, 3.4vw, 2.75rem); } .page-hero .kicker { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; } .breadcrumb { font-size: 0.82rem; color: var(--ink-500); margin-bottom: 18px; } .breadcrumb a:hover { color: var(--teal-400); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } /* Grid items default to a min-width based on their content's natural size, which silently overrides child overflow-x:auto (e.g. long unwrapped .code-block CLI lines) and forces the whole grid — and page — wider than the viewport on mobile. Reset it so children can actually shrink. */ .two-col > *, .grid-3 > *, .grid-2 > *, .path-cards > *, .cycle > * { min-width: 0; } .code-block { background: var(--navy-950); border: 1px solid var(--navy-600); border-radius: var(--radius-md); padding: 18px 20px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--teal-400); overflow-x: auto; white-space: pre; } .product-shot { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--navy-700); box-shadow: var(--shadow-card); } .video-embed { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 */ border-radius: var(--radius-lg); border: 1px solid var(--navy-700); box-shadow: var(--shadow-card); overflow: hidden; background: #000; } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ---------- Product screenshot "window" treatment (contemporary framing) ---------- Wraps a .product-shot in a dark browser-style window with a gradient border, a soft ambient violet/teal glow behind it, and an optional floating stat badge. Opt-in: only pages that wrap their in .shot-frame get this treatment; the plain .product-shot styling above is untouched. */ .shot-frame { position: relative; max-width: 960px; margin: 0 auto; padding-bottom: 22px; } .shot-glow { position: absolute; inset: -30px; background: radial-gradient(45% 55% at 15% 10%, rgba(132,45,237,0.18), transparent 65%), radial-gradient(45% 55% at 85% 90%, rgba(20,184,166,0.18), transparent 65%); filter: blur(30px); z-index: 0; pointer-events: none; } /* .shot-frame goes full-width inside .wrap's 24px gutter on phones, so the glow's -30px inset bleeds 6px past the viewport edge (30 - 24 gutter). Pulling the inset in below the gutter width keeps the ambient effect without causing horizontal page scroll. */ @media (max-width: 600px) { .shot-glow { inset: -16px; } } .shot-window { position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--violet-500), var(--teal-500)); padding: 1.5px; box-shadow: 0 30px 60px -24px rgba(30,20,50,0.35), var(--shadow-card); } .shot-window-inner { border-radius: calc(var(--radius-lg) - 1.5px); overflow: hidden; background: #0a0a0d; } .shot-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; } .shot-chrome .dot { width: 10px; height: 10px; border-radius: 50%; } .shot-chrome .dot.red { background: #ff5f57; } .shot-chrome .dot.yellow { background: #febc2e; } .shot-chrome .dot.green { background: #28c840; } .shot-chrome .shot-url { margin-left: 10px; font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); padding: 3px 12px; border-radius: 999px; } .shot-window img.product-shot { display: block; width: 100%; height: auto; border: none; border-radius: 0; box-shadow: none; } .shot-badge { position: absolute; right: 28px; bottom: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; max-width: 88%; background: #fff; border: 1px solid var(--navy-700); color: var(--ink-100); font-size: 0.82rem; font-weight: 600; line-height: 1.35; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-card); } .shot-badge strong { color: var(--teal-400); font-size: 0.95rem; } .shot-badge.violet { background: var(--violet-600); border-color: transparent; color: #fff; } .shot-badge.violet strong { color: #fff; } @media (max-width: 720px) { .shot-badge { position: static; margin: 16px auto 0; display: inline-flex; } .shot-frame { padding-bottom: 0; } } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-900); border-top: 1px solid var(--navy-700); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid h5 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: 14px; } .footer-grid h5.violet { color: var(--violet-400); } .footer-grid h5.teal { color: var(--teal-400); } .footer-grid a { display: block; font-size: 0.88rem; color: var(--ink-300); padding: 5px 0; } .footer-grid a:hover { color: var(--teal-400); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--navy-700); font-size: 0.8rem; color: var(--ink-500); flex-wrap: wrap; gap: 12px; } .notice-strip { background: var(--navy-900); border-bottom: 1px solid var(--navy-700); font-size: 0.8rem; color: var(--ink-500); padding: 8px 0; text-align: center; } .notice-strip strong { color: var(--ink-300); }