/* Smstools — Main Design System CSS — extracted from demo10 */ /* ================================================================ === CSS VARS (Light + Dark tokens) === ================================================================ */ :root, :root[data-theme="light"] { --bg: #FFFFFF; --bg-2: #EEF1FA; --bg-3: #F7F9FC; --surface: #FFFFFF; --line: #E1E6EE; --line-2: #C7CFDB; --ink: #0F304A; --ink-2: #4A5A6E; --ink-3: #8896A5; --accent: #C02B30; --accent-2: #D54249; --accent-dark: #9A2126; --accent-50: #FCEEEF; --blue: #288FD8; --blue-2: #3DA5EE; --blue-dark: #1F73B2; --blue-50: #E9F3FB; --navy: #0F304A; --navy-2: #082139; --navy-3: #184462; --green: #00B341; --green-bg: #E8F9EE; --orange: #FF6B35; --purple: #7C3AED; --pink: #E91E63; --cyan: #FF8866; --yellow: #FACA15; --grad-1: #C02B30; --grad-2: #9A2126; --grad-3: #E04A50; --grad-4: #082139; --shadow-card: 0 2px 8px rgba(15,48,74,0.06); --shadow-card-hover: 0 12px 28px rgba(15,48,74,0.12); --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Rubik', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } :root[data-theme="dark"] { --bg: #0A1A2E; --bg-2: #0F243F; --bg-3: #122B49; --surface: #122B49; --line: #1F3A56; --line-2: #2E4D6E; --ink: #FFFFFF; --ink-2: #D1DCEB; --ink-3: #94A6BC; --accent: #D54249; --accent-2: #E55B62; --accent-dark: #B83339; --accent-50: rgba(213,66,73,0.12); --blue: #3DA5EE; --blue-2: #5BB5F2; --blue-dark: #288FD8; --blue-50: rgba(40,143,216,0.14); --navy: #0A1A2E; --navy-2: #082139; --navy-3: #184462; --green: #34D058; --green-bg: rgba(52,208,88,0.12); --orange: #FF8855; --purple: #9B6FFF; --pink: #F25195; --cyan: #FFA587; --yellow: #FBC424; --grad-1: #D54249; --grad-2: #B83339; --grad-3: #E55B62; --grad-4: #082139; --shadow-card: 0 2px 8px rgba(0,0,0,0.3); --shadow-card-hover: 0 12px 28px rgba(0,0,0,0.5); --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Rubik', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ================================================================ === RESET + BASE === ================================================================ */ html { color-scheme: light; transition: background-color 0.2s ease, color 0.2s ease; } html[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.65; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* `clip` prevents horizontal scroll WITHOUT establishing a scroll container. The previous `hidden` value did establish one, which broke `position: sticky` on nav.top — the hamburger menu would scroll off-screen and the user had to scroll back to the top to open it. `clip` keeps the overflow protection but lets sticky children behave correctly against the viewport. Two declarations: `hidden` is the fallback for browsers that don't understand `clip` yet; `clip` wins where supported. */ overflow-x: hidden; overflow-x: clip; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } p { line-height: 1.65; } /* ================================================================ === RESPONSIVE SAFETY NET === Foundational rules that prevent overflow / clipping / horizontal- scroll issues site-wide. Cheap, broad, low-risk fixes — every page benefits without needing per-page changes. ================================================================ */ /* Responsive media: never overflow their container. Preserves intrinsic aspect ratio when the browser scales an image/video down. */ img, video { max-width: 100%; height: auto; } /* Iframes: width-bounded, height kept as authored (videos/maps need explicit h) */ iframe { max-width: 100%; } /* Code/pre: long lines get a scrollbar instead of pushing the viewport wide */ pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Headings: a single long word (URL, German compound) can't break the layout. Never hyphenate mid-word — words stay whole and wrap at spaces; break-word only intervenes for a single unbreakable word that would overflow. */ h1, h2, h3, h4 { overflow-wrap: break-word; word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* iOS rubber-band: stop the page from horizontal-bouncing */ html, body { overscroll-behavior-x: none; } /* Tappable feedback on touch */ a, button, [role="button"] { -webkit-tap-highlight-color: rgba(40,143,216,0.15); } /* Form controls: prevent iOS auto-zoom on focus by ensuring ≥16px font on inputs; prevent overflow when an is inside a tight flex/grid cell */ input, select, textarea { font-family: inherit; max-width: 100%; } @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], select, textarea { font-size: 16px; } } /* Focus visibility — accessibility baseline. Page-specific styles can override. */ :focus-visible { outline: 2px solid rgba(40,143,216,0.55); outline-offset: 2px; } /* ================================================================ === CONTAINER === ================================================================ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 28px; } @media (max-width: 768px) { .container { padding: 0 20px; } } @media (max-width: 380px) { .container { padding: 0 14px; } } /* ================================================================ === DARK MODE OVERRIDES === ================================================================ */ /* Base dark background */ html[data-theme="dark"] { background: var(--bg); } /* Override hardcoded white backgrounds in inline styles */ html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background-color: white"], html[data-theme="dark"] [style*="background-color:white"] { background: var(--surface) !important; } html[data-theme="dark"] [style*="background: #FFFFFF"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background:#fff"] { background: var(--surface) !important; } /* Pure black inline backgrounds — keep but tint */ html[data-theme="dark"] [style*="background: #0A0A0F"], html[data-theme="dark"] [style*="background:#0A0A0F"] { background: #050507 !important; } /* Customer logos: invert color filter in dark mode */ html[data-theme="dark"] .customers-row .logo-item { filter: grayscale(100%) invert(1) brightness(0.9); } html[data-theme="dark"] .customers-row .logo-item:hover { filter: grayscale(0%) invert(1) brightness(0.9); } /* Buttons in dark mode */ html[data-theme="dark"] .btn-primary { background: var(--ink); color: var(--bg); } html[data-theme="dark"] .btn-primary:hover { background: var(--accent); color: white; } /* Outline button in dark mode */ html[data-theme="dark"] .btn-outline { background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); color: var(--ink); border: 1px solid var(--line-2); } html[data-theme="dark"] .btn-outline:hover { background: rgba(255,255,255,0.10); border-color: var(--ink-2); color: white; } /* Ghost button in dark mode */ html[data-theme="dark"] .btn-ghost { color: var(--ink); } html[data-theme="dark"] .btn-ghost:hover { color: var(--accent-2); } /* Force pure-white headings in dark mode */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #FFFFFF; } /* Preserve gradient-text headings */ html[data-theme="dark"] h1 .grad, html[data-theme="dark"] h2 .grad, html[data-theme="dark"] h3 .grad, html[data-theme="dark"] h4 .grad { -webkit-text-fill-color: transparent; color: transparent; } /* Brighter secondary text in dark mode */ html[data-theme="dark"] p, html[data-theme="dark"] li { color: var(--ink-2); } /* Bullet point checks in dev panels */ html[data-theme="dark"] ul li[style*="color: var(--ink-2)"] { color: var(--ink-2) !important; } /* Code panels stay dark */ html[data-theme="dark"] [style*="background: #0A2540"], html[data-theme="dark"] [style*="background:#0A2540"] { background: #050E1A !important; } /* Cards with CSS-defined white backgrounds */ html[data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--line); } html[data-theme="dark"] .testimonial-card { background: var(--surface); border-color: var(--line); } html[data-theme="dark"] .pp-card { background: var(--surface); border-color: var(--line); } html[data-theme="dark"] .pp-tier { background: var(--bg-3); border-color: var(--line); } html[data-theme="dark"] .pp-right { background: var(--bg-2); border-color: var(--line); } /* Inline style border softening */ html[data-theme="dark"] [style*="border: 1px solid var(--line)"] { border-color: var(--line) !important; } /* Catch-all for card classes */ html[data-theme="dark"] [class*="-card"] { color: var(--ink); } /* ================================================================ === BUTTONS === ================================================================ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: all 0.15s; cursor: pointer; border: none; font-family: inherit; } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { color: var(--accent); } .btn-primary { background: var(--ink); color: white; } .btn-primary:hover { background: var(--accent); } .btn-accent { background: var(--accent); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(200,49,42,0.25); } .btn-accent:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(200,49,42,0.35); } .btn-outline { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); color: var(--ink); border: 1px solid var(--line); } .btn-outline:hover { background: white; border-color: var(--ink-3); } .btn-lg { padding: 13px 22px; font-size: 15px; } /* Touch-target safety: on phones, buttons must be reliably tappable. Apple/Google recommend ≥44px; we set 40px on .btn and 48px on .btn-lg, which still respects authored padding (min-height is the floor). */ @media (max-width: 768px) { .btn { min-height: 40px; } .btn-lg { min-height: 48px; } } /* CTA Blue variant */ body.cta-blue .btn-accent { background: #288FD8; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(40,143,216,0.30); } body.cta-blue .btn-accent:hover { background: #1F73B2; box-shadow: 0 6px 18px rgba(40,143,216,0.40); } body.cta-blue .btn-primary:hover { background: #288FD8; } /* ================================================================ === SECTION PRIMITIVES === ================================================================ */ section.std { padding: 100px 0; } .section-bg-2 { background: var(--bg-2); } .section-eyebrow { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--accent-50); border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px; } .section-h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 20px; max-width: 760px; color: var(--ink); } .section-h2 .grad { background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-lede { font-size: 18px; color: var(--ink-2); max-width: 640px; line-height: 1.7; margin-bottom: 56px; } .section-center { text-align: center; } .section-center .section-h2, .section-center .section-lede { margin-left: auto; margin-right: auto; } /* ================================================================ === CUSTOMERS SECTION === ================================================================ */ .customers { padding: 32px 0 64px; } .customers-label { text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 32px; } .customers-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; align-items: center; } .customers-row .logo-item { display: flex; align-items: center; justify-content: center; height: 40px; opacity: 0.6; filter: grayscale(100%); transition: opacity 0.2s, filter 0.2s; } .customers-row .logo-item:hover { opacity: 1; filter: grayscale(0%); } .customers-row .logo-item svg { max-width: 100%; max-height: 100%; } .customers-row .logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ================================================================ === STATS BENTO === ================================================================ */ .stats-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 28px; text-align: left; transition: all 0.2s; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(50,50,93,0.08); } .stat-card .lbl { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 12px; } .stat-card .num { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin-bottom: 8px; } .stat-card .num .grad { background: linear-gradient(120deg, var(--grad-2), var(--grad-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-card .sub { font-size: 13px; color: var(--ink-2); } /* ================================================================ === TESTIMONIAL CARD === ================================================================ */ .testimonial-card { max-width: 920px; margin: 0 auto; background: white; border: 1px solid var(--line); border-radius: 18px; padding: 56px 64px; box-shadow: 0 20px 60px -20px rgba(50,50,93,0.10); position: relative; } .testimonial-mark { position: absolute; top: 24px; left: 40px; font-family: Georgia, serif; font-size: 100px; line-height: 1; color: var(--accent); opacity: 0.18; font-weight: 700; } .testimonial-quote { font-size: 24px; line-height: 1.4; font-weight: 500; color: var(--ink); margin-bottom: 32px; position: relative; z-index: 1; letter-spacing: -0.01em; } .testimonial-author { display: flex; align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); } .testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--orange)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 18px; } .testimonial-info .name { font-size: 15px; font-weight: 700; color: var(--ink); } .testimonial-info .role { font-size: 13px; color: var(--ink-2); } /* ================================================================ === PRICING CARD (pp-*) === ================================================================ */ .pp-card { background: white; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; max-width: 960px; margin: 0 auto; box-shadow: 0 20px 60px -20px rgba(50,50,93,0.12); } .pp-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; } .pp-left { padding: 44px 48px; } .pp-country { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-2); border-radius: 100px; font-size: 13px; font-weight: 500; margin-bottom: 18px; color: var(--ink); } .pp-flag { width: 18px; height: 13px; border-radius: 2px; overflow: hidden; display: inline-flex; } .pp-flag span { flex: 1; } .pp-left h3 { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .pp-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; } .pp-vanaf { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .pp-price-main { font-size: 72px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); } .pp-price-main .grad { background: linear-gradient(120deg, var(--grad-2), var(--grad-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pp-price-unit { font-size: 14px; color: var(--ink-2); font-weight: 500; } .pp-bullets { list-style: none; padding: 0; margin: 0 0 26px; } .pp-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.55; padding: 6px 0; } .pp-bullets li svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 1px; } .pp-right { background: var(--bg-2); padding: 44px 48px; border-left: 1px solid var(--line); } .pp-right-title { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; } .pp-tier { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 10px; background: white; border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; transition: all 0.15s; } .pp-tier:hover { border-color: var(--accent); } .pp-tier-vol { font-size: 13px; color: var(--ink-2); } .pp-tier-vol strong { color: var(--ink); font-weight: 600; } .pp-tier-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--accent); } /* ================================================================ === FAQ === ================================================================ */ .faq-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; cursor: pointer; } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; font-weight: 600; color: var(--ink); } .faq-q svg { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; transition: transform 0.2s; } .faq-item.open .faq-q svg { transform: rotate(45deg); } .faq-a { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.open .faq-a { max-height: 220px; padding-top: 14px; } /* ================================================================ === SCROLL REVEAL ANIMATIONS === ================================================================ */ /* WIPE REVEAL — text appears via clip-path sweep */ .wipe-reveal { clip-path: inset(-10px -10px -10px -10px); } .wipe-reveal.wipe-armed { clip-path: inset(-10px 100% -10px -10px); transition: clip-path 1.0s cubic-bezier(0.22, 1, 0.36, 1); } .wipe-reveal.wipe-armed.wipe-active { clip-path: inset(-10px -10px -10px -10px); } /* SCROLL PROGRESS BAR */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: 1000; width: 0%; box-shadow: 0 0 12px rgba(192,43,48,0.5); transition: width 0.05s linear; pointer-events: none; } /* Base reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Variant: fade-only */ .reveal-fade { opacity: 0; transition: opacity 0.8s ease-out; } .reveal-fade.is-visible { opacity: 1; } /* Variant: slide from left */ .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-left.is-visible { opacity: 1; transform: translateX(0); } /* Variant: slide from right */ .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-right.is-visible { opacity: 1; transform: translateX(0); } /* Variant: scale-in */ .reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-scale.is-visible { opacity: 1; transform: scale(1); } /* Stagger delays */ .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.00s; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.08s; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.24s; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.32s; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.40s; } .reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.48s; } .reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.56s; } .reveal-stagger > .reveal:nth-child(9) { transition-delay: 0.64s; } .reveal-stagger > .reveal:nth-child(10) { transition-delay: 0.72s; } /* Gradient text shimmer */ @keyframes gradShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .section-h2 .grad { background-size: 200% 200%; animation: gradShimmer 8s ease-in-out infinite; } /* Live dot pulse */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Counter for number count-up animation hook */ .counter[data-target] { font-variant-numeric: tabular-nums; } /* will-change hints for shared cards */ .stat-card { will-change: transform; } /* ================================================================ === RESPONSIVE BREAKPOINTS — TABLET (761px–1080px) === ================================================================ */ @media (min-width: 761px) and (max-width: 1080px) { .container { padding: 0 28px; max-width: 100%; } section.std { padding: 72px 0; } .section-h2 { font-size: clamp(28px, 4vw, 40px); } .stats-bento { grid-template-columns: 1fr 1fr; gap: 18px; } } /* ================================================================ === RESPONSIVE BREAKPOINTS — MOBILE (≤760px) === ================================================================ */ @media (max-width: 760px) { /* Container */ .container { padding: 0 20px; } /* Base typography safety */ h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; word-break: normal; } .section-h2 { max-width: 100%; } [class*="-card"], [class*="-panel"], [class*="-content"] { min-width: 0; } body { overflow-x: hidden; overflow-x: clip; } /* Section primitives */ section.std { padding: 60px 0; } .section-h2 { font-size: 28px; line-height: 1.12; margin-bottom: 14px; } .section-lede { font-size: 15px; line-height: 1.55; margin-bottom: 36px; } .section-eyebrow { font-size: 11px; } /* Stats bento */ .stats-bento { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .stat-card { padding: 22px 18px !important; } .stat-card .num { font-size: 38px !important; } .stat-card .lbl { font-size: 11px !important; } .stat-card .sub { font-size: 12px !important; } /* Customers row */ .customers-row { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } .customers-row .logo-item { height: 38px !important; } /* FAQ */ .faq-split { grid-template-columns: 1fr !important; gap: 28px !important; } .faq-split > div:first-child { text-align: left; } .faq-item { padding: 14px 16px !important; } .faq-q { font-size: 14px !important; } /* Pricing card — was 2-col side-by-side (.pp-left | .pp-right) at all sizes; now stacks vertically on phones, shrinks the giant 72px price number, tightens padding so it doesn't push the card past the viewport. */ .pp-top { grid-template-columns: 1fr !important; } .pp-left, .pp-right { padding: 28px 22px !important; } .pp-right { border-left: 0 !important; border-top: 1px solid var(--line); } .pp-price-main { font-size: clamp(44px, 12vw, 60px) !important; } .pp-card { border-radius: 16px; } } /* ================================================================ === ACCESSIBILITY — REDUCED MOTION === ================================================================ */ @media (prefers-reduced-motion: reduce) { .wipe-reveal, .wipe-reveal.wipe-armed, .wipe-reveal.wipe-armed.wipe-active { clip-path: none !important; } .scroll-progress { display: none !important; } .reveal, .reveal-fade, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } .section-h2 .grad { animation: none !important; } .reveal-stagger > .reveal { transition-delay: 0s !important; } } /* ================================================================ === NAV === ================================================================ */ nav.top { background: transparent; position: relative; z-index: 200; padding: 16px 0; transition: background 0.2s, box-shadow 0.2s, backdrop-filter 0.2s; } nav.top.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 4px 20px rgba(10,10,15,0.06); } html[data-theme="dark"] nav.top.scrolled { background: rgba(15,27,43,0.92); } nav.top .container { display: flex; align-items: center; justify-content: space-between; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links > a { font-size: 14px; color: var(--ink-2); font-weight: 500; cursor: pointer; transition: color 0.15s; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .nav-links > a:hover { color: var(--accent); } .nav-links svg.chev { width: 11px; height: 11px; opacity: 0.6; } .nav-item { position: relative; padding: 22px 0; } .nav-item > a { font-size: 14px; color: var(--ink-2); font-weight: 500; cursor: pointer; transition: color 0.15s; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .nav-item:hover > a { color: var(--accent); } .nav-item > a.active-nav { color: var(--accent); } .nav-item svg.chev { width: 11px; height: 11px; opacity: 0.6; transition: transform 0.2s; } .nav-item:hover svg.chev { transform: rotate(180deg); } .dropdown { position: absolute; top: 100%; left: -16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px rgba(10,10,15,0.10), 0 4px 12px rgba(10,10,15,0.06); padding: 14px; min-width: 300px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.2s ease; z-index: 100; } .dropdown.wide { min-width: 640px; left: -32px; } .dropdown.combined { min-width: 940px; left: -32px; } .dropdown-grid { display: grid; gap: 2px; } .dropdown.combined .dropdown-grid { grid-template-columns: 1fr 1fr 1fr; gap: 6px 24px; } .dropdown.wide .dropdown-grid { grid-template-columns: 1fr 1fr; gap: 6px 24px; } .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-section-label { grid-column: 1 / -1; font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; padding: 10px 12px 6px; } .dropdown-section-label:first-child { padding-top: 4px; } .dropdown-item { display: flex; align-items: flex-start; padding: 14px 16px; border-radius: 9px; transition: background 0.15s; cursor: pointer; text-decoration: none; } .dropdown-item:hover { background: var(--bg-2); } .dropdown-icon { width: 36px; height: 36px; background: var(--accent-50); color: var(--accent); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 14px; } .dropdown-icon svg { width: 18px; height: 18px; } .dropdown-text { flex: 1; min-width: 0; } .dropdown-text .t1 { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 1px; letter-spacing: -0.005em; line-height: 1.3; } .dropdown-text .t2 { font-size: 12px; color: var(--ink-3); line-height: 1.4; } .nav-cta { display: flex; align-items: center; gap: 8px; } .lang-picker { position: relative; } .lang-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: transparent; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--ink); font-weight: 500; cursor: pointer; font-family: inherit; } .lang-trigger:hover { border-color: var(--ink-3); } .lang-trigger svg.chev { width: 11px; height: 11px; opacity: 0.6; transition: transform 0.2s; } .lang-picker:hover .lang-trigger svg.chev { transform: rotate(180deg); } .lang-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 48px rgba(10,10,15,0.10), 0 4px 12px rgba(10,10,15,0.06); padding: 8px; min-width: 260px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.2s ease; z-index: 100; max-height: 420px; overflow-y: auto; } .lang-picker:hover .lang-dropdown, .lang-picker.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .lang-group { padding: 8px 4px 4px; } .lang-group-label { font-size: 10px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; margin-bottom: 2px; } .lang-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); transition: background 0.15s; cursor: pointer; text-decoration: none; } .lang-option:hover { background: var(--bg-2); } .lang-option.active { background: var(--accent-50); color: var(--accent); font-weight: 500; } .lang-option .country { color: var(--ink-3); font-size: 12px; } .flag-svg { width: 22px; height: 16px; border-radius: 2px; display: inline-block; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 1px rgba(15,48,74,0.08); } .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .logo-img { display: block; } .logo-dark { display: none; } html[data-theme="dark"] .logo-light { display: none; } html[data-theme="dark"] .logo-dark { display: block; } /* Mobile toggle */ .mobile-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--surface, #ffffff); border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 0; cursor: pointer; color: var(--ink, #0f304a); box-shadow: 0 1px 2px rgba(15,30,60,0.05); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .mobile-toggle:hover, .mobile-toggle:focus-visible { background: var(--bg-2, #f5f9ff); border-color: rgba(40,143,216,0.35); color: var(--accent, #c8312a); } .mobile-toggle:active { transform: scale(0.96); } .mobile-toggle svg { width: 22px; height: 22px; display: block; } nav.top.scrolled .mobile-toggle { background: rgba(255,255,255,0.9); } /* ===================================================================== Mobile menu — dark panel that matches the platform's dark-section design tokens. The panel is dark regardless of the site's data-theme, so the styles below intentionally use fixed colors instead of CSS vars. ===================================================================== */ /* Backdrop */ .mobile-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(7, 16, 32, 0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease; } .mobile-backdrop.open { opacity: 1; visibility: visible; } /* Panel */ .mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 88%; max-width: 420px; z-index: 1000; background: radial-gradient(ellipse 520px 320px at 100% 0%, rgba(40,143,216,0.22), transparent 70%), radial-gradient(ellipse 480px 320px at 0% 100%, rgba(200,49,42,0.10), transparent 70%), linear-gradient(180deg, #0f2740 0%, #0a1c30 60%, #061325 100%); color: #ffffff; /* No shadow while closed — would otherwise leak ~48px back into the viewport from the off-canvas panel's left edge. Added only when .open. */ box-shadow: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 22px 36px; transform: translateX(100%); visibility: hidden; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s, box-shadow 0.2s ease; } .mobile-menu.open { transform: translateX(0); visibility: visible; box-shadow: -18px 0 48px rgba(0,0,0,0.55); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s, box-shadow 0.2s ease; } @media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } .mobile-backdrop { transition: none; } } /* Logo: force the white variant inside the dark panel regardless of site theme */ .mobile-menu .logo .logo-light { display: none !important; } .mobile-menu .logo .logo-dark { display: block !important; } /* Header: logo + close */ .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 18px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); } .mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: rgba(255,255,255,0.85); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease; } .mobile-menu-close:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #ffffff; } .mobile-menu-close:active { transform: scale(0.94); } .mobile-menu-close:focus-visible { outline: 2px solid rgba(40,143,216,0.55); outline-offset: 2px; } /* Group */ .mobile-menu-group { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .mobile-menu-group:last-of-type { border-bottom: 0; } .mobile-menu-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.42); padding: 0 12px 10px; } /* Link rows — full-width tap targets (≥44px), readable contrast, soft hover */ .mobile-menu-group a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; color: rgba(255,255,255,0.88) !important; /* beats inline "color:var(--ink)" on primary links */ text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease; -webkit-tap-highlight-color: transparent; position: relative; } .mobile-menu-group a:hover { background: rgba(255,255,255,0.06); color: #ffffff !important; } .mobile-menu-group a:active { transform: scale(0.985); } .mobile-menu-group a:focus-visible { outline: 2px solid rgba(40,143,216,0.55); outline-offset: 2px; background: rgba(255,255,255,0.06); color: #ffffff !important; } /* Distinguish the "primary" group (Pricing / About / Contact / Login) — it already carries inline font-weight:700 in the markup; surface it as prominently styled rows with a slim accent bar on the left. */ .mobile-menu-group:not(.mobile-lang-group) a[style*="font-weight:700"], .mobile-menu-group:not(.mobile-lang-group) a[style*="font-weight: 700"] { font-weight: 700 !important; font-size: 16px; color: #ffffff !important; } /* CTA block at the very bottom */ .mobile-menu-cta { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 0; } .mobile-menu-cta .btn-accent { box-shadow: 0 2px 6px rgba(200,49,42,0.28), 0 12px 28px rgba(200,49,42,0.30); } .mobile-menu-cta .btn-outline { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.20); color: #ffffff; } .mobile-menu-cta .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); color: #ffffff; } /* Language grid — dark cells with accent for active */ .mobile-lang-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 4px 4px 0; } .mobile-lang-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 6px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.78); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease; -webkit-tap-highlight-color: transparent; } .mobile-lang-option:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: #ffffff; } .mobile-lang-option:active { transform: scale(0.96); } .mobile-lang-option:focus-visible { outline: 2px solid rgba(40,143,216,0.55); outline-offset: 2px; } .mobile-lang-option.active { background: rgba(40,143,216,0.18); border-color: rgba(40,143,216,0.55); color: #ffffff; box-shadow: 0 0 0 1px rgba(40,143,216,0.30) inset; } .mobile-lang-option .flag-svg { width: 28px; height: 20px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .mobile-lang-option .country { font-size: 10px; color: rgba(255,255,255,0.55); } .mobile-lang-option.active .country { color: rgba(255,255,255,0.75); } /* Narrow phones: keep cells reachable but compact */ @media (max-width: 380px) { .mobile-menu { padding: 16px 18px 32px; } .mobile-lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .mobile-lang-option { min-height: 56px; font-size: 10.5px; } } /* ================================================================ === FOOTER === ================================================================ */ footer.new-footer { background: linear-gradient(180deg, #0F2D52 0%, #082139 100%); color: rgba(255,255,255,0.65); padding: 64px 0 32px; position: relative; } footer.new-footer::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 0%, rgba(40,143,216,0.10) 0%, transparent 50%), radial-gradient(circle at 80% 100%, rgba(40,143,216,0.06) 0%, transparent 50%); pointer-events: none; } footer.new-footer .container { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; } footer.new-footer h5 { color: white; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; } footer.new-footer ul { list-style: none; padding: 0; margin: 0; } footer.new-footer ul li { margin-bottom: 10px; } footer.new-footer ul li a { font-size: 13.5px; color: rgba(255,255,255,0.65); transition: color 0.15s; text-decoration: none; } footer.new-footer ul li a:hover { color: white; } footer.new-footer .brand-block .desc { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 16px 0; max-width: 320px; } footer.new-footer .brand-block .contact { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.7); } footer.new-footer .brand-block .contact a { color: white; text-decoration: none; } footer.new-footer .bottom { max-width: 1280px; margin: 56px auto 0; padding: 24px 28px 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; color: rgba(255,255,255,0.5); flex-wrap: wrap; } footer.new-footer .bottom .bottom-left { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } footer.new-footer .bottom .bottom-right { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } footer.new-footer .bottom .legal { display: flex; gap: 20px; } footer.new-footer .bottom .legal a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.15s; } footer.new-footer .bottom .legal a:hover { color: white; } footer.new-footer .bottom a { text-decoration: none; } .footer-lang { position: relative; } .footer-lang-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; font-size: 12.5px; color: rgba(255,255,255,0.85); font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap; } .footer-lang-trigger:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: white; } .footer-lang-trigger .chev { transition: transform 0.2s; opacity: 0.7; } .footer-lang.open .footer-lang-trigger .chev { transform: rotate(180deg); } .footer-lang-dropdown { position: absolute; bottom: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -10px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); padding: 8px; min-width: 280px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.2s ease; z-index: 100; max-height: 360px; overflow-y: auto; } .footer-lang.open .footer-lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .footer-lang-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; transition: background 0.12s; text-decoration: none; } .footer-lang-option:hover { background: var(--bg-2); } .footer-lang-option.active { background: var(--accent-50); color: var(--accent); font-weight: 500; } .footer-lang-option .country { color: var(--ink-3); font-size: 12px; } .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; font-size: 12.5px; color: rgba(255,255,255,0.85); font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; } .theme-toggle:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: white; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Nav + footer responsive */ @media (max-width: 1024px) { .dropdown.combined { min-width: 700px; } } @media (max-width: 900px) { .mobile-toggle { display: inline-flex !important; } .nav-links { display: none !important; } nav.top { padding: 14px 0; } /* Desktop CTAs (lang picker, login, register) move into the mobile panel — hide them in the header so the hamburger has room and never gets pushed off-screen on narrow viewports. The same controls are duplicated inside #mobile-menu so no functionality is lost. */ nav.top .nav-cta .lang-picker, nav.top .nav-cta .btn-ghost, nav.top .nav-cta > a.btn-accent { display: none !important; } nav.top .nav-cta { gap: 0; } /* Floating hamburger: nav.top itself scrolls away with the page, but the toggle stays fixed in the top-right corner so it's always reachable without scrolling back up. Sits below the mobile-menu panel (1000) and backdrop (999) so it slides under when the menu is open. */ nav.top .mobile-toggle { position: fixed; top: 14px; right: 16px; z-index: 998; box-shadow: 0 4px 14px rgba(15,30,60,0.18), 0 1px 2px rgba(15,30,60,0.10); } /* Reserve the same physical footprint inside the nav so logo + toggle keep their original spacing when the nav is visible at the top of the page. */ nav.top .nav-cta::after { content: ''; display: inline-block; width: 42px; height: 42px; } /* Hide the floating toggle while the mobile menu is open — the panel already shows its own close (X) button in the top-right. */ body:has(.mobile-menu.open) nav.top .mobile-toggle { opacity: 0; pointer-events: none; } } /* On very narrow phones, tighten the logo so it never overlaps the toggle */ @media (max-width: 480px) { nav.top .logo .logo-img, nav.top .logo img { height: 28px !important; } nav.top .container { padding-left: 16px; padding-right: 16px; } } @media (max-width: 760px) { footer.new-footer .container { grid-template-columns: 1fr 1fr; gap: 32px 28px; } footer.new-footer .brand-block { grid-column: span 2; } footer.new-footer .bottom { flex-direction: column; align-items: stretch !important; gap: 18px !important; } footer.new-footer .bottom .bottom-left { justify-content: space-between; width: 100%; } footer.new-footer .bottom .bottom-right { justify-content: space-between; width: 100%; } } @media (max-width: 480px) { footer.new-footer .container { grid-template-columns: 1fr 1fr; } } /* ===== FINAL CTA (shared across all new-layout pages) ===== */ .final-cta { padding: 100px 0; text-align: center; position: relative; overflow: hidden; } .final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 500px at 50% 50%, rgba(200,49,42,0.07), transparent 60%), radial-gradient(ellipse 500px 300px at 20% 30%, rgba(0,120,200,0.05), transparent 60%); } .final-cta .container { position: relative; } .final-cta h2 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; color: var(--ink); } .final-cta p { font-size: 15px; color: var(--ink-2); margin-bottom: 32px; max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.6; } .cta-buttons { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } @media (max-width: 480px) { .final-cta { padding: 64px 0; } .final-cta h2 { font-size: 22px !important; } .cta-buttons { flex-direction: column; align-items: stretch; } } .final-cta-dark { padding: 80px 0; text-align: center; background: linear-gradient(135deg, var(--navy) 0%, #162236 100%); position: relative; overflow: hidden; } .final-cta-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 50% 50%, rgba(200,49,42,0.15), transparent 60%); pointer-events: none; } .final-cta-dark .container { position: relative; } @media (max-width: 480px) { .final-cta-dark { padding: 56px 0; } } /* ===== SECTION COMPAT (old pages in newLayout) ===== */ .sec-block { padding: 80px 0; } .sec-block.dark_bg_radial { background: linear-gradient(135deg, var(--navy) 0%, #162236 100%); } .sec-block.dark_bg_radial h2, .sec-block.dark_bg_radial h3, .sec-block.dark_bg_radial p { color: rgba(255,255,255,0.9); } .pager-section { padding: 80px 0; background: linear-gradient(135deg, var(--navy) 0%, #162236 100%); } .pager-section h1, .pager-section h2, .pager-section p { color: rgba(255,255,255,0.9); } .pager-section h2.color_p_light { color: rgba(255,255,255,0.7); } .pager-info { max-width: 100%; width: 100%; } .pager-info .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; } .section-title { text-align: center; margin-bottom: 40px; } .section-title h2 { color: var(--ink); } .info-bar { padding: 60px 0; } /* ===== FORM SYSTEM ===== */ .form-control { display: block; width: 100%; padding: 10px 14px; font-size: 14px; font-family: var(--font); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; outline: none; box-sizing: border-box; } .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); } .form-control::placeholder { color: var(--ink-3); } textarea.form-control { resize: vertical; } select.form-control { cursor: pointer; } .form-group { margin-bottom: 20px; } .form-label, .user-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .inplabel { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .alert { padding: 14px 18px; border-radius: 10px; font-size: 14px; margin: 12px 0; line-height: 1.5; } .alert-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; line-height: 1.6; } .form-check-input { flex-shrink: 0; width: 18px !important; height: 18px !important; margin: 3px 0 0; accent-color: var(--accent); } .padding-40 { padding: 0; } /* ===== COMPAT GRID ===== */ .row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; } .row.g-4 > * { padding: 12px; } [class^="col-"], [class*=" col-"] { padding-left: 12px; padding-right: 12px; box-sizing: border-box; } /* Flex-child overflow guard: when a column holds long text, an inline , or a wide image, browsers default min-width to "min-content" and the column refuses to shrink — pushing the whole row past 100% and triggering horizontal scroll. Forcing min-width: 0 lets the column shrink as expected. */ .row > [class^="col-"], .row > [class*=" col-"], .row > .col { min-width: 0; } .col-1 { width: 8.333%; } .col-2 { width: 16.667%; } .col-3 { width: 25%; } .col-4 { width: 33.333%; } .col-5 { width: 41.667%; } .col-6 { width: 50%; } .col-7 { width: 58.333%; } .col-8 { width: 66.667%; } .col-9 { width: 75%; } .col-10 { width: 83.333%; } .col-11 { width: 91.667%; } .col-12 { width: 100%; } .col-xs-12 { width: 100%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.333%; } .col-sm-6 { width: 50%; } .col-sm-8 { width: 66.667%; } .col-sm-9 { width: 75%; } .col-sm-12 { width: 100%; } .col-md-4 { width: 33.333%; } .col-md-5 { width: 41.667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.333%; } .col-md-8 { width: 66.667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.333%; } .col-md-12 { width: 100%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.333%; } .col-lg-5 { width: 41.667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.333%; } .col-lg-8 { width: 66.667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.333%; } .col-lg-12 { width: 100%; } /* ===== UTILITIES ===== */ .text-center { text-align: center !important; } .text-end { text-align: right !important; } .text-start { text-align: left !important; } .text-danger { color: #dc2626 !important; } .text-success { color: #16a34a !important; } .text-white { color: white !important; } .text-dark { color: var(--ink) !important; } .text-uppercase { text-transform: uppercase; } .bold, .fw-bold { font-weight: 700; } .float-end { float: right; } .float-start { float: left; } .clearfix::after { content: ''; display: table; clear: both; } .d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .w-100 { width: 100%; } .h-100 { height: 100%; } .flex-column { flex-direction: column !important; } .flex-row { flex-direction: row !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .justify-content-center { justify-content: center; } .align-items-center { align-items: center; } .flex-container.center { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .flex-container.center > div { font-size: 15px; background: var(--bg); border-radius: 16px; padding: 16px 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .ms-auto { margin-left: auto; } .me-auto { margin-right: auto; } .ms-1 { margin-left: 4px; } .ms-2 { margin-left: 8px; } .ms-3 { margin-left: 16px; } .me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .me-3 { margin-right: 16px; } .mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 32px; } .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 32px; } .pb-3 { padding-bottom: 16px; } .pb-4 { padding-bottom: 24px; } .pb-5 { padding-bottom: 32px; } .pt-3 { padding-top: 16px; } .pt-4 { padding-top: 24px; } .pt-5 { padding-top: 32px; } .pt-30 { padding-top: 30px; } .pe-0 { padding-right: 0 !important; } .ps-0 { padding-left: 0 !important; } .nomargin { margin: 0; } .nopadding { padding: 0; } .size-18 { font-size: 18px; } /* ===== OLD BUTTON COMPAT ===== */ .btn-default { /* inherits .btn */ } .gradient-bg { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important; color: white !important; } .gradient-bg:hover { background: var(--accent-dark) !important; } .gradient-bg-blue { background: var(--navy) !important; color: white !important; } .gradient-bg-blue:hover { background: #162236 !important; } .gradient-bg-red { background: var(--accent) !important; color: white !important; } .gradient-bg-red:hover { background: var(--accent-dark) !important; } .bg-button { background: var(--accent); color: white; } .bg-button:hover { background: var(--accent-dark); color: white; } .btn-secondary { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line) !important; } .btn-secondary:hover { background: var(--line); } .btn-sm { padding: 6px 12px !important; font-size: 12.5px !important; } .btn-link { background: none !important; color: var(--accent) !important; padding: 0 !important; box-shadow: none !important; text-decoration: underline; border: none !important; } .btn-info { background: var(--bg-2); color: var(--ink); border: 1.5px solid var(--line) !important; } .btn-info:hover { border-color: var(--ink-3) !important; } /* ===== DROPDOWN (flagstrap — scoped to avoid nav conflict) ===== */ .flagstrap .dropdown { position: relative; display: inline-block; } .flagstrap .dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 9999; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); padding: 4px 0; display: none; list-style: none; margin: 0; min-width: 240px; } .flagstrap .dropdown-menu.scrollable-menu { overflow-y: auto; max-height: 280px; width: 320px; } .flagstrap .dropdown.open > .dropdown-menu { display: block; } .flagstrap .dropdown-menu > li > a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--ink); text-decoration: none; font-size: 13.5px; white-space: nowrap; } .flagstrap .dropdown-menu > li > a:hover { background: var(--bg-2); } .caret { display: inline-block; width: 0; height: 0; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; margin-left: 4px; vertical-align: middle; } .flagstrap { display: inline-block; } .flagstrap-icon { display: inline-block; width: 20px; height: 14px; background-size: 100% 100%; vertical-align: middle; } /* ===== CBX CHECKBOX (register) ===== */ .cbx { position: relative; float: left; width: 24px; height: 24px; margin-right: 10px; } .cbx input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0; } .cbx label { width: 24px; height: 24px; background: none; border-radius: 50%; position: absolute; top: 0; left: 0; pointer-events: none; } .cbx svg { position: absolute; top: 5px; left: 4px; z-index: 1; pointer-events: none; } .cbx svg path { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 19; stroke-dashoffset: 19; transition: stroke-dashoffset 0.3s ease; transition-delay: 0.2s; } .cbx input:checked + label { animation: cbx-splash 0.6s ease forwards; } .cbx input:checked + label + svg path { stroke-dashoffset: 0; } @keyframes cbx-splash { 40% { background: var(--accent); box-shadow: 0 -18px 0 -8px var(--accent), 16px -8px 0 -8px var(--accent), 16px 8px 0 -8px var(--accent), 0 18px 0 -8px var(--accent), -16px 8px 0 -8px var(--accent), -16px -8px 0 -8px var(--accent); } 100% { background: var(--accent); box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent; } } .agreement-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 8px; } /* ===== RESPONSIVE COMPAT ===== */ @media (max-width: 576px) { .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-9 { width: 100%; } .d-sm-none { display: none !important; } .d-sm-block { display: block !important; } } @media (max-width: 768px) { .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-12 { width: 100%; } .d-md-none { display: block !important; } .d-md-block { display: none !important; } .d-none.d-md-block { display: none !important; } } @media (min-width: 769px) { .d-md-none { display: none !important; } .d-md-block { display: block !important; } .d-none.d-md-block { display: block !important; } } @media (max-width: 991px) { .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10 { width: 100%; } .d-lg-none { display: block !important; } .d-lg-block { display: none !important; } .d-none.d-lg-block { display: none !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-block { display: block !important; } .d-none.d-lg-block { display: block !important; } } @media (max-width: 600px) { .pricing-price-grid { grid-template-columns: 1fr !important; } .pricing-extras-grid { grid-template-columns: 1fr !important; } .register-form-card { margin: 0 16px; } } /* ===== OLD PAGE COMPAT — products/solutions/sectors/legal ===== */ .dark_bg_linear { background: linear-gradient(135deg, var(--navy) 0%, #162236 100%); } .dark_bg_linear h1, .dark_bg_linear h2, .dark_bg_linear p { color: rgba(255,255,255,0.9); } .about-block2 { width: 100%; } .about-text { line-height: 1.65; } .about-text h2 { color: var(--ink); margin-bottom: 14px; } .about-text p { color: var(--ink-2); } .abt-block2-img { border-radius: 12px; overflow: hidden; } .abt-block2-img img { width: 100%; display: block; max-height: 440px; object-fit: cover; } .shadow-box { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08); } .shadow-box img { width: 100%; display: block; } .trafic-sec { text-align: center; margin: 24px auto; max-width: 860px; } .trafic-sec img { width: 100%; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); } .color_p_dark { color: var(--ink-2) !important; } .color_p_light { color: rgba(255,255,255,0.75) !important; } .text-white { color: white !important; } .text-left { text-align: left !important; } /* Clickable item cards (sms_software subblocks) */ .subblocks { padding: 0; } .subblocks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .subblocks .item { padding: 22px 24px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; background: var(--bg); } .subblocks .item:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.10); border-color: var(--accent-50); } .subblocks .item h3 { color: var(--ink); font-size: 18px; margin-bottom: 8px; } .subblocks .item p { color: var(--ink-2); font-size: 14px; margin: 0 0 10px; } /* Sitemap tree */ ul.tree { list-style: none; padding: 0; margin: 0; } ul.tree li { margin-bottom: 8px; } .containerli > a { font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px; } .mainitem { font-weight: 700; color: var(--ink) !important; text-decoration: none; display: block; margin-bottom: 4px; } .mainitem:hover { color: var(--accent) !important; } .inline-ul { list-style: disc; padding-left: 24px; margin: 4px 0 8px; } .inline-ul li { margin-bottom: 4px; } .inline-ul li a { color: var(--ink-2); text-decoration: none; font-size: 14px; } .inline-ul li a:hover { color: var(--accent); } .sitemap { font-size: 15px; } /* Contact page */ .contact-page-form { width: 100%; } .service_col { text-align: center; padding: 32px 24px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); cursor: pointer; transition: box-shadow 0.2s; height: 100%; } .service_col:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); } .service_col h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 12px 0 8px; } .service_col p, .service_col h4 { font-size: 14px; color: var(--ink-2); margin: 0; } .service_col p a, .service_col h4 a { color: var(--accent); text-decoration: none; font-weight: 600; } .svs-icon { font-size: 32px; line-height: 1; margin-bottom: 4px; } .svs_icon_blue i { color: #1B6FAB; } .svs_icon_red i { color: var(--accent); } .svs_icon_yellow i { color: #d97706; } .service_col hr { border: none; border-top: 1.5px solid var(--line); margin: 14px 0; } .contact-form-dv { padding-top: 32px; } /* Legal page content */ .about-text h4 { font-size: 16px; letter-spacing: normal; margin: 14px 0 7px; font-weight: 800; color: var(--ink); } .about-text h5 { font-size: 14px; letter-spacing: normal; font-weight: 600; color: var(--ink); margin: 12px 0 6px; } .about-text p, .about-text br + br { line-height: 1.65; color: var(--ink-2); } /* Compat for .references .before-footer etc */ .before-footer { padding: 60px 0; text-align: center; } /* Reference logo strip */ .pt_section ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 40px; list-style: none; padding: 24px 0 8px; margin: 0; } .pt_section ul li { display: flex; align-items: center; justify-content: center; } .pt_section ul li img { max-height: 52px; max-width: 140px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: opacity 0.2s, filter 0.2s; } .pt_section ul li img:hover { filter: none; opacity: 1; } .refblock h2 { text-align: center; color: white; margin-bottom: 8px; } .greyed { filter: grayscale(100%); opacity: 0.6; transition: opacity 0.2s, filter 0.2s; } .greyed:hover { filter: none !important; opacity: 1 !important; } /* Register conversion nav */ .reg-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 200; } .reg-topbar .logo { display: flex; align-items: center; } .reg-topbar .logo img { height: 32px; } .reg-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); color: var(--ink); text-decoration: none; font-size: 20px; line-height: 1; border: 1.5px solid var(--line); transition: all 0.15s; } .reg-close-btn:hover { background: var(--line); } /* ===== RESPONSIVE COMPAT (additional) ===== */ @media (max-width: 768px) { .col-md-10 { width: 100%; } } @media (max-width: 991px) { .col-lg-8 { width: 100%; } .subblocks ul { flex-direction: column; } } /* ===== BLOG ===== */ /* Blog pager header */ .pager-section { position: relative; overflow: hidden; padding: 64px 0; background: linear-gradient(135deg, var(--navy) 0%, #162236 100%); } .pager-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 500px at 30% 50%, rgba(200,49,42,0.12), transparent 60%); pointer-events: none; } .pager-section .container { position: relative; } .pager-info h1 { font-size: clamp(20px, 2.4vw, 34px); font-weight: 800; color: white; line-height: 1.2; letter-spacing: -0.02em; max-width: 100%; margin: 0 0 12px; } .pager-info h2 { font-size: 16px; color: rgba(255,255,255,0.75); font-weight: 400; margin: 0; line-height: 1.6; max-width: 100%; } @media (max-width: 768px) { .pager-section { padding: 48px 0; } .pager-info h1 { font-size: 22px; } } /* Blog overview list */ .timeline { display: flex; flex-direction: column; } .timeline-hline, .timeline-vline { display: none; } .blog-post-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: flex-start; } .blog-post-item:last-child { border-bottom: none; } .timeline-entry { flex: 0 0 52px; background: var(--accent); color: white; border-radius: 8px; padding: 8px 4px; text-align: center; font-size: 20px; font-weight: 800; line-height: 1.1; } .timeline-entry span { display: block; } .timeline-entry span:nth-child(1) { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .timeline-entry span:nth-child(2) { font-size: 10px; font-weight: 400; opacity: 0.8; } .it.clearfix { flex: 1; min-width: 0; } .it.clearfix h2.size-18 { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 6px !important; line-height: 1.4; } .it.clearfix h2.size-18 a { color: var(--ink); text-decoration: none; } .it.clearfix h2.size-18 a:hover { color: var(--accent); } ul.blog-post-info { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; } ul.blog-post-info li { font-size: 13px; color: var(--ink-2); } ul.blog-post-info li a { color: var(--ink-2); text-decoration: none; } .btn.bg-button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; font-weight: 600; background: var(--accent); color: white; border-radius: 6px; text-decoration: none; border: none; cursor: pointer; white-space: nowrap; } .btn.bg-button:hover { background: var(--accent-dark, #a01020); color: white; } .btn.bg-button .fa { color: white; font-size: 12px; } /* Blog article */ .blog-info-post ul.meta { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 16px; flex-wrap: wrap; } .blog-info-post ul.meta li a { color: var(--ink-2); text-decoration: none; font-size: 14px; } .blog-info-post ul.meta li a i { margin-right: 4px; color: var(--accent); } .blog-info-post .tag { display: inline-block; padding: 3px 10px; background: var(--bg-2); border-radius: 20px; font-size: 12px; color: var(--ink-2); margin: 2px 2px 8px; text-decoration: none; border: 1px solid var(--line); } .blog-info-post a.tag { text-decoration: none; } .blog-info-post a.tag:hover { background: var(--accent-50); border-color: var(--accent); color: var(--accent); } /* Blog article body content */ .page-content { padding: 48px 0 40px; } .posts-section { padding: 0; } .blog-info-post .pe-100 { padding-right: 40px; } @media (max-width: 991px) { .blog-info-post .pe-100 { padding-right: 0; } } /* Review stars — horizontal */ ul.rating { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; gap: 4px; align-items: center; justify-content: center; } ul.rating li { display: inline-flex; } ul.rating .fa-star { color: #f59e0b; font-size: 22px; } .review-section-head { padding: 32px 0 16px; text-align: center; } .review-count { display: inline-flex; align-items: center; gap: 8px; } /* Blog sidebar */ .inline-search .btn { font-size: 13px; } #follow-scroll .social-grey { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); margin: 2px; text-decoration: none; border: 1px solid var(--line); transition: all 0.15s; } #follow-scroll .social-grey:hover { background: var(--accent); color: white; border-color: var(--accent); } /* sec-block compat for blog */ .sec-block { padding: 48px 0; } .pb-0 { padding-bottom: 0 !important; } /* ===== ALERT VARIANTS ===== */ .alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .alert-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; } .alert-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } .alert-primary { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; } .alert-info { background: #e0f2fe; color: #0c4a6e; border: 1px solid #bae6fd; } /* ===== TABLE ===== */ .table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ink); } .table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); } .table thead th { background: var(--bg-2); font-weight: 700; font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; } .table-striped tbody tr:nth-child(even) { background: var(--bg-2); } .table-hover tbody tr:hover { background: var(--accent-50); } .table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--line); } @media (max-width: 768px) { .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ===== PAGINATION ===== */ .pagination { display: flex; list-style: none; padding: 0; margin: 16px 0; gap: 4px; flex-wrap: wrap; } .page-item { list-style: none; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; background: var(--bg); transition: all 0.15s; } .page-link:hover { background: var(--accent); color: white; border-color: var(--accent); } .page-item a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; background: var(--bg); transition: all 0.15s; } .page-item a:hover { background: var(--accent); color: white; border-color: var(--accent); } /* ===== FORM compat ===== */ .form-select { display: block; width: 100%; padding: 8px 12px; font-size: 14px; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; appearance: auto; cursor: pointer; } .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,49,42,0.1); } .form-select-d { min-width: 180px; } .col-auto { flex: 0 0 auto; width: auto; } .g-3 { gap: 12px; } .me-5 { margin-right: 20px !important; } .ms-0 { margin-left: 0 !important; } .mt-2 { margin-top: 8px !important; } .mt-5 { margin-top: 32px !important; } .mb-5 { margin-bottom: 32px !important; } .mb-4 { margin-bottom: 24px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-0 { margin-bottom: 0 !important; } .text-dark { color: var(--ink) !important; } .img-fluid { max-width: 100%; height: auto; } /* ===== SPACING UTILITIES (gap-fillers not yet defined above) ===== */ .p-0 { padding: 0 !important; } .p-1 { padding: 4px !important; } .p-2 { padding: 8px !important; } .p-3 { padding: 16px !important; } .p-4 { padding: 24px !important; } .p-5 { padding: 32px !important; } .pt-0 { padding-top: 0 !important; } .pt-2 { padding-top: 8px !important; } .pb-1 { padding-bottom: 4px !important; } .pb-2 { padding-bottom: 8px !important; } .ps-2 { padding-left: 8px !important; } .ps-3 { padding-left: 16px !important; } .pe-3 { padding-right: 16px !important; } .mt-1 { margin-top: 4px !important; } .mb-1 { margin-bottom: 4px !important; } /* ===== API DOC LAYOUT ===== */ /* Unified dark-surface tokens for the whole API console. The console is always dark (even in light site mode), so it can't use the theme-flipping --bg/--ink; these fixed values are pinned to the site's dark-mode navy palette so the console reads as one coherent surface and matches the rest of the site in dark mode. ONE base, ONE elevated surface, ONE border, primary + muted text. */ .api-doc, .api-nav { --api-bg: #0A1A2E; /* base backdrop (= site dark --bg) */ --api-surface: #16314F; /* one elevated surface: cards, panels, code chrome, active nav item, table header/stripe */ --api-line: #284B6E; /* one border / divider */ --api-ink: #FFFFFF; /* primary text */ --api-ink-muted: #AEBFD6; /* muted text (AA ≥ 7:1 on both base and surface) */ } .api-nav { border-right: 1px solid var(--api-line); background: var(--api-bg); } .api-nav .side-nav { padding: 8px 6px 16px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .api-nav .side-nav::-webkit-scrollbar { width: 7px; } .api-nav .side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; } .api-nav .side-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); } .api-nav .side-nav-head { padding: 16px 10px 6px; } .api-nav .side-nav-head:first-child { padding-top: 6px; } .api-nav .side-nav-head h4 { font-size: 10.5px; font-weight: 700; color: var(--api-ink-muted); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } .api-nav ul { margin: 0 0 6px; padding: 0; list-style: none; } .api-nav ul li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; padding: 7px 12px; font-size: 13px; color: rgba(255,255,255,0.68); text-decoration: none; border-radius: 8px; transition: background-color 0.15s ease, color 0.15s ease; } .api-nav ul li a { color: var(--api-ink-muted); } .api-nav ul li a:hover { background: var(--api-surface); color: var(--api-ink); } .api-nav ul li.active a { background: rgba(200,49,42,0.14); color: var(--accent); font-weight: 600; } .api-nav ul li.active a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 0 3px 3px 0; background: var(--accent); } .api-nav ul li a i { font-size: 10px; opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease; } .api-nav ul li a:hover i { opacity: 0.8; transform: translateX(2px); } .api-nav ul li.active a i { opacity: 0.9; } .api-nav ul li a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .api-doc { background: var(--api-bg) !important; color: var(--api-ink-muted) !important; min-height: 600px; } .api-doc h1, .api-doc h2, .api-doc h3, .api-doc h4, .api-doc h5 { color: var(--api-ink) !important; } .api-doc p, .api-doc li, .api-doc td, .api-doc th { color: var(--api-ink-muted) !important; } .api-doc a { color: var(--accent) !important; } .api-doc label, .api-doc .bold { color: var(--api-ink) !important; } .api-doc .form-control { background: var(--api-surface); border-color: var(--api-line); color: var(--api-ink); } .api-doc .input-group-text { background: var(--api-surface); border-color: var(--api-line); color: var(--api-ink-muted); } .api-doc .btn-primary { background: var(--accent); border-color: var(--accent); color: white; } .api-doc .btn-secondary, .api-doc .btn-light { background: var(--api-surface); border-color: var(--api-line); color: var(--api-ink-muted); } .api-doc .btn-secondary:hover, .api-doc .btn-light:hover { background: var(--accent); color: white; } /* --- Contrast fixes --------------------------------------------------- `.api-doc a { color: var(--accent) !important }` (above) repaints EVERY link in the console — including buttons that already carry an accent/navy fill, producing accent-on-accent. Restore readable labels (white passes AA on both the red accent ≈5.8:1 and the navy fill ≈13:1). --- */ .api-doc a.btn.bg-button, .api-doc .btn.bg-button, .api-doc a.gradient-bg-blue, .api-doc .gradient-bg-blue, .api-doc a.gradient-bg-red, .api-doc .gradient-bg-red, .api-doc a.btn-accent, .api-doc .btn-accent { color: #fff !important; } /* CTA consistency: inside the console, flatten .btn-accent's red glow + lift so it matches the flat .gradient-bg-red buttons. Scoped to .api-doc, so the shared site-header .btn-accent keeps its glow on every other page. */ .api-doc .btn-accent { box-shadow: none; } .api-doc .btn-accent:hover { box-shadow: none; transform: none; } .api-doc .btn.bg-button i, .api-doc .btn.bg-button .fa, .api-doc .gradient-bg-blue i, .api-doc .gradient-bg-red i, .api-doc .btn-accent i { color: #fff !important; } /* The shared .apx- showcase is designed for a white page, but here it is nested in the permanently-dark console, so .api-doc's white-forced text landed white-on-white. Blend its band into the console → the white text is now light-on-dark (title #fff ≈14:1, body ≈9:1), and the jarring white block disappears. Scoped to .api-doc so home/software_developers (where apx- sits on a real white page) are untouched. */ .api-doc .apx-section { background: transparent !important; } .api-doc .apx-title, .api-doc .apx-title span { color: var(--api-ink) !important; } .api-doc .apx-body { color: var(--api-ink-muted) !important; } .api-doc .apx-eyebrow { background: var(--api-surface) !important; border: 1px solid var(--api-line); color: var(--api-ink) !important; } /* Code showcase chrome → the one elevated surface; window strip → base; the 
 code area itself uses --api-bg via the shadow template (fallback #111
   off-console, so home/software_developers are untouched). */
.api-doc .apx-codepanel { background: var(--api-surface) !important; box-shadow: var(--shadow-card-hover); }
.api-doc .apx-codepanel-window { background: var(--api-bg) !important; border-bottom-color: var(--api-line) !important; }
.api-doc .apx-codetab { background: var(--api-bg) !important; border-color: var(--api-line) !important; }

/* table-dark compat */
.table-dark, .table-dark th, .table-dark td { color: var(--api-ink-muted) !important; border-color: var(--api-line) !important; }
.table-dark thead th, .thead-dark th { background: var(--api-surface) !important; color: var(--api-ink-muted) !important; }
/* Dark-table striping must stay dark. The generic `.table-striped tbody
   tr:nth-child(even){background:var(--bg-2)}` (light blue) otherwise bleeds
   through on EVEN rows of a .table-dark, dropping white text onto a light
   fill. Both !important so the dark fill wins regardless of source order. */
.table-dark tbody tr:nth-child(odd)  { background: var(--api-surface) !important; }
.table-dark tbody tr:nth-child(even) { background: transparent !important; }
.table-dark tbody tr:hover { background: rgba(200,49,42,0.16) !important; }

/* Alerts inside the dark console: the light `.alert-danger` (#fef2f2) panel
   would otherwise be a light fill in the dark theme. Darken to a translucent
   red on dark with light text (≈7:1). Scoped to .api-doc so other pages keep
   the normal light alert. */
.api-doc .alert-danger {
  background: rgba(220,38,38,0.14) !important;
  border-color: rgba(220,38,38,0.40) !important;
  color: #fca5a5 !important;
}
.api-doc .alert-danger a, .api-doc .alert-danger u { color: #fff !important; }

/* ===== API reference — mobile (≤991px): drawer nav + non-overflowing
   endpoint pages. Desktop (≥992px) is untouched: the toggle/backdrop are
   display:none and the sidebar stays the in-flow col-lg-3. ===== */

/* Code blocks: the  custom element defaults to display:inline,
   so wide samples could push the page sideways. Make it a block that never
   exceeds its column; the shadow 
 keeps overflow:auto for clean
   horizontal scroll inside the block (code stays byte-identical). */
.api-doc code-block { display: block; max-width: 100%; }

.api-nav-toggle, .api-nav-backdrop { display: none; }
body.api-nav-open { overflow: hidden; }

@media (max-width: 991px) {
  /* Parameter / error tables: scroll horizontally inside the table only. */
  .api-doc .table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* The endpoint nav becomes an off-canvas drawer. */
  .api-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 300px; max-width: 86vw; z-index: 1100;
    background: var(--api-bg); border-right: 1px solid var(--api-line);
    box-shadow: 6px 0 30px rgba(0,0,0,0.45);
    transform: translateX(-100%); transition: transform 0.26s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 18px 10px 28px !important;
  }
  .api-nav.is-open { transform: translateX(0); }
  .api-nav .side-nav { position: static; max-height: none; overflow: visible; padding: 0; }
  .api-nav ul li a { padding: 12px 14px; min-height: 44px; }   /* >=44px tap target */

  /* Sticky toggle pill at the top of the content. */
  .api-nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    position: sticky; top: 8px; z-index: 40;
    min-height: 44px; padding: 11px 16px; margin-bottom: 18px; max-width: 100%;
    background: var(--api-surface); border: 1px solid var(--api-line); border-radius: 10px;
    color: var(--api-ink); font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  }
  .api-nav-toggle:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
  .api-nav-toggle-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .api-nav-toggle-bars { position: relative; width: 18px; height: 14px; flex-shrink: 0; }
  .api-nav-toggle-bars span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--accent-2); }
  .api-nav-toggle-bars span:nth-child(1) { top: 0; }
  .api-nav-toggle-bars span:nth-child(2) { top: 6px; }
  .api-nav-toggle-bars span:nth-child(3) { top: 12px; }

  /* Backdrop. */
  .api-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transition: opacity 0.26s; }
  .api-nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* Phones (<=768px): a 4-column parameter table can't fit, so stack each row
   into a card. Column labels are copied from the table's own  at
   runtime (data-label) — no new strings, table content stays byte-identical.
   Desktop keeps the normal 4-column table. */
@media (max-width: 768px) {
  .api-doc .table { display: block; width: 100%; max-width: 100%; overflow: visible; border: 0; background: none; }
  .api-doc .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .api-doc .table tbody, .api-doc .table tr, .api-doc .table td { display: block; width: auto; }
  .api-doc .table tr {
    background: var(--api-surface) !important; border: 1px solid var(--api-line) !important;
    border-radius: 12px; padding: 14px 16px; margin: 0 0 12px;
  }
  .api-doc .table td {
    border: 0 !important; padding: 7px 0 !important;
    display: flex; gap: 14px; align-items: baseline;
  }
  .api-doc .table td::before {
    content: attr(data-label); flex: 0 0 92px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--api-ink-muted); padding-top: 1px;
  }
  /* First cell (the parameter name) = card heading */
  .api-doc .table td:first-child {
    display: block; padding: 0 0 8px !important; margin-bottom: 8px;
    border-bottom: 1px solid var(--api-line) !important;
    font-size: 15px; font-weight: 800; color: var(--api-ink);
  }
  .api-doc .table td:first-child::before { display: none; }
  /* Last cell (Required/Optional badge) — show the badge, no label */
  .api-doc .table td:last-child { padding-top: 8px !important; }
  .api-doc .table td:last-child::before { display: none; }
  /* Empty cells: hide the stray label */
  .api-doc .table td:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .api-nav, .api-nav-backdrop { transition: none !important; }
}

/* label badges (Bootstrap label compat) */
.label { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.label-success { background: #166534; color: #dcfce7; }
.label-danger  { background: #991b1b; color: #fee2e2; }
.label-warning { background: #854d0e; color: #fef9c3; }
.label-info    { background: #0c4a6e; color: #e0f2fe; }

/* input-group compat */
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1 1 auto; border-radius: 0; }
.input-group-prepend { display: flex; }
.input-group-text { padding: 6px 12px; font-size: 14px; border: 1.5px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; white-space: nowrap; }
.input-group .form-control:last-child { border-radius: 0 8px 8px 0; }

/* misc compat */
.uppercase { text-transform: uppercase; }
.text-white { color: white !important; }
.text-muted { color: var(--ink-3) !important; }