@charset "UTF-8"; /* * ============================================================ * Zadro.ai — Main Stylesheet * ============================================================ * * Load order in : * 1. bootstrap.min.css * 2. theme-blue.css OR theme-orange.css (brand tokens) * 3. this file (main.css) * 4. header.css * * Font preload (add to before this file): * * * * * Fonts: * Body/UI — Manrope 400/500/600 * Headings — Playfair Display 700 + 700 italic * Code/mono — System mono stack (no external load) * * Dark mode: * Add data-bs-theme="dark" to or . * The class alias `.dark` is also supported. * * Table of contents: * 1. Design tokens — light mode * 2. Design tokens — dark mode * 3. Global / base * 4. Typography * 5. Color utilities * 6. Buttons * 7. Nav pills & dropdowns * 8. Forms * 9. Cards * 10. Badges * 11. Navbar * 12. Modals & alerts * 13. Accordions * 14. Tables & DataTables * 15. Progress bars * 16. Icons * 17. Hero & marketing gradients * 18. Code blocks & schema editor * 19. Research page — header & scroll nav * 20. Research page — section titles & icons * 21. Research page — theme lists * 22. Mobile scroll toggle * 23. Utility classes * 24. Hero floating cards * 25. Scroll-reveal animations * 26. Keyframes * 27. Accessibility * ============================================================ */ /* ============================================================ 1. DESIGN TOKENS — LIGHT MODE ============================================================ */ :root, [data-bs-theme="light"] { /* ── Brand accent — all values supplied by theme file ── */ --theme: hsl(var(--theme-hsl)); --theme-hover: hsl(var(--theme-hover-hsl)); --theme-light: hsla(var(--theme-hsl), 0.08); --bs-primary: hsl(var(--theme-hsl)); --bs-link-color: hsl(var(--theme-hsl)); --bs-link-hover-color: hsl(var(--theme-hover-hsl)); /* ── State colors ── */ --success-hsl: 150, 50%, 45%; /* #39AC73 */ --warning-hsl: 40, 80%, 55%; /* #E0B738 */ --danger-hsl: 0, 84%, 60%; /* #EB4444 */ --success: hsl(var(--success-hsl)); --warning: hsl(var(--warning-hsl)); --danger: hsl(var(--danger-hsl)); --bs-success: hsl(var(--success-hsl)); --bs-warning: hsl(var(--warning-hsl)); --bs-danger: hsl(var(--danger-hsl)); /* ── Surfaces / borders / inverses — supplied by theme file ── */ --bs-secondary: var(--bs-secondary-bg); --bs-body-color: hsl(220, 30%, 10%); /* shared neutral dark */ --bs-body-color-rgb: 18, 22, 33; --bs-secondary-color: hsl(220, 15%, 45%); /* shared neutral mid */ --body-color-inverse: hsl(210, 20%, 92%); /* shared neutral light */ /* ── Typography ── */ --bs-body-font-family: 'Manrope', system-ui, -apple-system, sans-serif; --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.6; --bs-heading-color: var(--bs-body-color); /* ── Cards / forms — bg/border supplied by theme file ── */ /* ── Border radius ── */ --bs-border-radius: 0.5rem; --bs-border-radius-sm: 0.375rem; --bs-border-radius-lg: 0.75rem; --bs-border-radius-xl: 1rem; --bs-border-radius-pill: 50rem; /* ── Shadows ── */ --bs-box-shadow: 0 1px 3px rgba(var(--bs-body-color-rgb), 0.06); --bs-box-shadow-sm: 0 1px 2px rgba(var(--bs-body-color-rgb), 0.04); --bs-box-shadow-lg: 0 10px 30px rgba(var(--bs-body-color-rgb), 0.08); --shadow-glow: 0 0 30px -5px hsla(var(--theme-hsl), 0.25), 0 0 60px -10px hsla(var(--theme-hsl), 0.10); --shadow-theme: 0 10px 30px rgba(var(--bs-body-color-rgb), 0.08); --shadow-theme-sm: 0 1px 3px rgba(var(--bs-body-color-rgb), 0.06); --shadow-theme-dark: 0 10px 30px rgba(0, 0, 0, 0.40); --shadow-theme-dark-sm: 0 1px 3px rgba(0, 0, 0, 0.30); /* Code editor palette — always dark regardless of page theme */ --code-bg: hsl(225, 20%, 10%); /* #0D1117 */ --code-fg: hsla(210, 20%, 92%, 0.86); --code-accent: hsl(175, 85%, 45%); /* teal — strings */ --code-purple: hsl(265, 85%, 60%); /* purple — keywords */ --code-purple-hsl: 265, 85%, 60%; --info-hsl: 220, 75%, 60%; --muted-foreground: 220, 15%, 45%; } /* ============================================================ 2. DESIGN TOKENS — DARK MODE ============================================================ */ .dark, [data-bs-theme="dark"] { /* ── Brand accent — derived from theme file's --theme-hsl ── */ --bs-primary: hsl(var(--theme-hsl)); --bs-link-color: hsl(var(--theme-hsl)); --bs-link-hover-color: hsl(var(--theme-hover-hsl)); /* ── Surfaces / borders / cards supplied by theme file ── */ /* ── Body colors (shared across themes) ── */ --bs-body-color: hsl(210, 20%, 92%); /* #E2E7EE */ --bs-body-color-rgb: 226, 231, 238; --bs-secondary: var(--bs-secondary-bg); --bs-secondary-color: hsl(220, 10%, 58%); /* #899099 */ /* ── Typography ── */ --bs-heading-color: var(--bs-body-color); /* ── Inverses ── */ --body-color-inverse: hsl(220, 30%, 10%); /* ── Shadows ── */ --bs-box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.30); --bs-box-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.20); --bs-box-shadow-lg: 0 10px 30px hsla(0, 0%, 0%, 0.40); /* ── Custom token adjustments ── */ --theme-light: hsla(var(--theme-hsl), 0.10); --shadow-glow: 0 0 30px -5px hsla(var(--theme-hsl), 0.30), 0 0 60px -10px hsla(var(--theme-hsl), 0.12); --shadow-theme: 0 10px 30px rgba(0, 0, 0, 0.40); --shadow-theme-sm: 0 1px 3px rgba(0, 0, 0, 0.30); } /* ============================================================ 3. GLOBAL / BASE ============================================================ */ body { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--bs-body-font-family); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; } header, footer { flex: 0 0 auto; } main { flex: 1 0 auto; } /* Add this if removing .fixed-top on navbar */ /* header { position: absolute; top: 0; left: 0; right: 0; z-index: 1030; } */ section, .section { padding-top: 5rem; padding-bottom: 5rem; } /* Zero padding for sections inside tab panels or legal pages */ section.tab-section, .legal section { padding-top: 0; padding-bottom: 0; } .z-index-font { z-index: 9999; } /* ============================================================ 4. TYPOGRAPHY ============================================================ */ /* All heading levels — editorial serif */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -0.02em; color: var(--bs-heading-color); } .link-hover {text-decoration: none;} .link-hover:hover {text-decoration: underline;} /* Brand wordmark */ .logo { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.77rem; letter-spacing: -0.027em; } /* * System mono stack — covers all code contexts without * loading an external font. Ordered by quality per OS: * SF Mono (macOS) → Cascadia Code (Win11) → Consolas (Win) → fallback */ code, pre, kbd, samp, .font-monospace { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; } /* Explicit font utility classes */ .font-editorial { font-family: 'Playfair Display', Georgia, serif; } .font-body { font-family: 'Manrope', system-ui, sans-serif; } /* ============================================================ 5. COLOR UTILITIES ============================================================ */ .bg-body { background-color: var(--bs-body-bg) !important; } .bg-theme { background-color: var(--theme) !important; } .bg-theme-dark { background-color: var(--theme-hover) !important; } .bg-theme-light { background-color: var(--theme-light) !important; } .text-theme { color: var(--theme) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-muted { color: var(--bs-secondary-color) !important; } .border-theme { border-color: var(--theme) !important; } /* Gradient text — used on marketing headline accents */ .text-gradient { background: linear-gradient(135deg, var(--theme), var(--theme-hover)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Accent glow box-shadow utility */ .accent-glow { box-shadow: var(--shadow-glow); } /* ============================================================ 6. BUTTONS ============================================================ */ /* Base — all buttons get consistent radius and weight */ .btn { --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-bg: var(--bs-secondary-bg); --bs-btn-disabled-border-color: var(--bs-border-color); border-radius: var(--bs-border-radius-lg); font-weight: 600; font-family: var(--bs-body-font-family); } /* small — nav, various */ .btn-sm { border-radius: var(--bs-border-radius); } /* Extra-small — tables, compact UI */ .btn-xs { padding: 0.1rem 0.5rem; font-size: 0.8rem; line-height: 1.5; border-radius: var(--bs-border-radius-sm); } /* * Primary button — glow on hover. * Uses BS5 local vars so :hover/:active don't need separate rules. * Radius inherited from .btn above. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--theme-hover); --bs-btn-hover-border-color: var(--theme-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: hsl(var(--theme-hover-hsl)); --bs-btn-active-border-color: hsl(var(--theme-hover-hsl)); --bs-btn-focus-shadow-rgb: var(--theme-rgb); } .btn-primary:hover, .btn-primary:focus-visible { box-shadow: var(--shadow-glow); } /* .btn-theme — legacy class alias, keeps existing HTML working */ .btn.btn-theme { color: #fff; background-color: var(--theme); border-color: var(--theme); } .btn.btn-theme:hover, .btn.btn-theme:focus, .btn.btn-theme:active { background-color: var(--theme-hover); border-color: var(--theme-hover); box-shadow: var(--shadow-glow); } /* Outline primary — radius and weight inherited from .btn */ .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--theme-hover); --bs-btn-focus-shadow-rgb: var(--theme-rgb); } /* Ghost breadcrumb button */ .btn-breadcrumb { color: var(--bs-secondary-color); padding: 0.44rem 0.77rem; border-radius: var(--bs-border-radius); text-decoration: none; } .btn-breadcrumb:hover { background-color: var(--bs-secondary-bg); } /* Shine animation — marketing CTAs */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: shine 5s ease-in-out infinite; } .btn-arrow { display: inline-block; transition: transform 0.2s ease; } .btn:hover .btn-arrow { transform: translateX(4px); } /* Strip focus rings — BS5 handles accessible outlines */ .btn:focus, .btn.focus, .page-link:focus, .page-link.focus { outline: 0; box-shadow: none; } /* Pagination */ .page-link { color: var(--theme); } .page-link:hover { color: var(--theme-hover); } .page-item.active .page-link { background-color: var(--theme); border-color: var(--theme); } /* Collapse toggle arrow */ [aria-expanded="true"] .rotate-90-click { transform: rotate(90deg); } /* ============================================================ 7. NAV PILLS & DROPDOWNS ============================================================ */ /* * .items-soft — shared token set applied to .nav-pills or * .dropdown-menu for a consistent soft/ghost style. */ .items-soft { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-body-color); --bs-nav-link-padding-x: 0.65rem; --bs-nav-pills-link-active-color: #fff; --bs-nav-pills-link-active-bg: var(--theme); --bs-dropdown-link-color: var(--bs-secondary-color); --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--theme); --bs-dropdown-min-width: 5rem; } .nav-pills.items-soft, .dropdown-menu.items-soft { padding: 0.44rem; } .items-soft .dropdown-item, .items-soft .nav-pills .nav-link { padding: 0.33rem 0.77rem; border-radius: var(--bs-border-radius-sm); } .items-soft .nav-pills .nav-link { margin: 0 0.125rem; } .items-soft .dropdown-item:not(.active):hover, .items-soft .nav-link:not(.active):hover { background-color: var(--bs-tertiary-bg); } /* Dim secondary elements (count, icon) until active */ .nav-pills .nav-link span { opacity: 0.65; transition: opacity 0.3s ease; } .nav-pills .nav-link.active span, .nav-pills .nav-link:hover span { opacity: 1; } /* Global dropdown polish */ .dropdown-menu { border-radius: var(--bs-border-radius-lg); border: 1px solid var(--bs-border-color); box-shadow: var(--bs-box-shadow-lg); } /* ============================================================ 8. FORMS ============================================================ */ .form-control, .form-select { border-radius: var(--bs-border-radius-lg); border-color: var(--bs-border-color); background-color: var(--bs-body-bg); transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Theme focus ring — consistent with brand accent */ .form-control:focus, .form-select:focus { border-color: hsla(var(--theme-hsl), 0.5); box-shadow: 0 0 0 0.2rem hsla(var(--theme-hsl), 0.15); } /* Checkbox/radio validation error state */ .form-check.is-invalid { border: 1px solid var(--bs-danger); border-radius: var(--bs-border-radius); padding: 0.75rem 0 0.75rem 2rem; background-color: hsla(var(--danger-hsl), 0.06); } .form-check.is-invalid .form-check-label { color: var(--bs-danger); } .form-check-input:focus { border-color: hsla(var(--theme-hsl), 0.5); box-shadow: 0 0 0 0.25rem hsla(var(--theme-hsl), 0.15); } .form-check-input:checked { background-color: var(--theme); border-color: var(--theme); } .form-check-input[type=checkbox]:indeterminate { background-color: var(--theme); border-color: var(--theme); } /* ============================================================ 9. CARDS ============================================================ */ .card { --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.5rem; --bs-card-border-radius: var(--bs-border-radius-lg); border: 1px solid var(--bs-border-color); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .card:hover { border-color: hsla(var(--theme-hsl), 0.3); box-shadow: var(--bs-box-shadow-lg); } /* .hover-lift — explicit lift class for marketing cards */ .hover-lift { box-shadow: var(--bs-box-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; will-change: transform; } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-theme); } .hover-heading {transition: color 0.18s ease 0.08s;} .hover-lift:hover .hover-heading {color: var(--theme);} [data-bs-theme="dark"] .hover-lift:hover { box-shadow: var(--shadow-theme-dark); } .shadow-theme { box-shadow: var(--shadow-theme); } .shadow-theme-sm { box-shadow: var(--shadow-theme-sm); } [data-bs-theme="dark"] .shadow-theme { box-shadow: var(--shadow-theme-dark); } [data-bs-theme="dark"] .shadow-theme-sm { box-shadow: var(--shadow-theme-dark-sm); } /* ============================================================ 10. BADGES ============================================================ */ .badge { padding: 0.3rem 0.65rem; font-size: 0.7rem; font-weight: 600; font-family: var(--bs-body-font-family); letter-spacing: 0.01em; border-radius: var(--bs-border-radius-pill); } /* Soft tinted variants — tinted bg + colored text + subtle border */ .badge.bg-warning { background-color: hsla(var(--warning-hsl), 0.12) !important; color: var(--warning) !important; border: 1px solid hsla(var(--warning-hsl), 0.30); } .badge.bg-success { background-color: hsla(var(--success-hsl), 0.12) !important; color: var(--success) !important; border: 1px solid hsla(var(--success-hsl), 0.30); } .badge.bg-danger { background-color: hsla(var(--danger-hsl), 0.12) !important; color: var(--danger) !important; border: 1px solid hsla(var(--danger-hsl), 0.30); } .badge.bg-theme { background-color: hsla(var(--theme-hsl), 0.10) !important; color: var(--theme) !important; border: 1px solid hsla(var(--theme-hsl), 0.25); } .badge.bg-theme-solid { background-color: var(--theme) !important; color: white !important; border: 1px solid hsla(var(--theme-hsl), 0.25); } .badge.bg-cta { background-color: var(--warning) !important; color: #fff !important; border: 1px solid var(--warning); } /* ============================================================ 11. NAVBAR ============================================================ */ .navbar { font-family: var(--bs-body-font-family); } /* ============================================================ 12. MODALS & ALERTS ============================================================ */ .modal-content { border-radius: var(--bs-border-radius-xl); border: 1px solid var(--bs-border-color); } .alert { border-radius: var(--bs-border-radius-lg); } .alert-success { --bs-alert-color: var(--success); --bs-alert-bg: hsla(var(--success-hsl), 0.08); --bs-alert-border-color: hsla(var(--success-hsl), 0.25); } .alert-warning { --bs-alert-color: var(--warning); --bs-alert-bg: hsla(var(--warning-hsl), 0.08); --bs-alert-border-color: hsla(var(--warning-hsl), 0.25); } .alert-danger { --bs-alert-color: var(--danger); --bs-alert-bg: hsla(var(--danger-hsl), 0.08); --bs-alert-border-color: hsla(var(--danger-hsl), 0.25); } .alert-info { --bs-alert-color: var(--info); --bs-alert-bg: hsla(var(--info-hsl), 0.08); --bs-alert-border-color: hsla(var(--info-hsl), 0.25); } /* ============================================================ 13. ACCORDIONS ============================================================ */ /* Flush treatment — border-bottom only, no radius */ .accordion, .accordion-item, .accordion-item:first-of-type, .accordion-item:last-of-type, .accordion-button { border-radius: 0 !important; } .accordion-item { border: 0; border-bottom: 1px solid var(--bs-border-color); } .accordion-item:last-child { overflow: hidden; border-bottom: 0; } .accordion-button { background-color: transparent; font-family: var(--bs-body-font-family); font-weight: 600; font-size: 1.125rem; padding: 1.25rem 1.25rem 1.25rem 0; color: var(--bs-body-color); } .accordion-button:not(.collapsed) { background-color: transparent; box-shadow: none; color: var(--theme); } .accordion-button:focus { box-shadow: none; border-color: transparent; } .accordion-button:hover { color: var(--theme); } .accordion-body { padding: 0 0 1.25rem 0; } .accordion-button::after { opacity: 0.65; transition: transform 0.2s ease, opacity 0.2s ease; } .accordion-button:not(.collapsed)::after, .accordion-button:hover::after { opacity: 1; } /* ============================================================ 14. TABLES & DATATABLES ============================================================ */ .table td, .table th { padding: 0.7rem 1.25rem; line-height: 1.44; } .table tbody tr:last-child td { border-bottom: none; } .dataTable { border-collapse: separate; overflow: hidden; } /* Uppercase label style for column headers */ .table thead th, .dataTable thead th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-family: var(--bs-body-font-family); } .table td, .dataTable td { vertical-align: middle; font-size: 0.9rem; padding-top: 1rem; padding-bottom: 1rem; } /* Flush left/right edges — no outer vertical borders */ .dataTable.border td, .dataTable.border th { border-right: none; border-bottom: 1px solid var(--bs-border-color); } .dataTable.border td:first-child, .dataTable.border th:first-child { border-left: none; } .dataTable.border td:last-child, .dataTable.border th:last-child { border-right: none; } .dataTable.border tbody tr:last-child td, .dataTable tbody tr:last-child td { border-bottom: none; } .dt-container .dt-info, .dt-container .dt-length label { font-size: 0.875rem; } /* ============================================================ 15. PROGRESS BARS ============================================================ */ .progress { height: 0.67rem; border-radius: var(--bs-border-radius-pill); } .progress-mini { height: 0.44rem; width: 70px; } .progress-bar { border-radius: var(--bs-border-radius-pill); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .progress-mini .progress-bar { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Force correct colors — BS5 utility classes can clash with custom palette */ .progress-bar.bg-theme { background-color: var(--theme) !important; } .progress-bar.bg-success { background-color: var(--success) !important; } .progress-bar.bg-warning { background-color: var(--warning) !important; } .progress-bar.bg-danger { background-color: var(--danger) !important; } /* ============================================================ 16. ICONS ============================================================ */ /* Square logo mark — navbar / auth pages */ .logo-icon { width: 40px; height: 40px; background: var(--theme); border-radius: var(--bs-border-radius); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.25rem; } /* Square feature icon — feature cards and section headers */ .feature-icon { width: 48px; height: 48px; background: var(--theme-light); border-radius: var(--bs-border-radius); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--theme); flex-shrink: 0; } /* ============================================================ 17. HERO & MARKETING GRADIENTS ============================================================ */ /* * .hero-gradient — three radial blobs creating depth behind hero content. * ::after adds a soft top-edge vignette. * z-index not needed — background-only, no stacking issues. */ .hero-gradient { position: relative; overflow: hidden; background: radial-gradient(at 20% 30%, hsla(var(--theme-hsl), 0.07) 0px, transparent 50%), radial-gradient(at 80% 70%, hsla(var(--theme-hsl), 0.05) 0px, transparent 50%), radial-gradient(at 50% 50%, hsla(var(--theme-hsl), 0.03) 0px, transparent 50%); } [data-bs-theme="dark"] .hero-gradient { background: radial-gradient(at 20% 30%, hsla(var(--theme-hsl), 0.10) 0px, transparent 50%), radial-gradient(at 80% 70%, hsla(var(--theme-hsl), 0.07) 0px, transparent 50%), radial-gradient(at 50% 50%, hsla(var(--theme-hsl), 0.05) 0px, transparent 50%); } .hero-gradient::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, hsla(var(--theme-hsl), 0.08) 0%, transparent 45%); opacity: 0.65; } /* Extra tightening at display/hero sizes */ .hero-title { letter-spacing: -0.03em; line-height: 1.1; } @media (min-width: 992px) { .hero-title { font-size: 5.17rem; } } /* * .page-texture — inline SVG noise overlay for large surface areas. * Apply to a position:relative parent. Opacity kept at 0.025 * so it reads as subtle warmth rather than visible grain. */ .page-texture::before { content: ''; position: absolute; inset: 0; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); pointer-events: none; } /* ============================================================ 18. CODE BLOCKS & SCHEMA EDITOR ============================================================ */ /* Shared dark surface — always dark regardless of page theme */ .content pre, .schema-editor { background: var(--code-bg); color: var(--code-fg); font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-size: 0.92rem; line-height: 1.55; padding: 14px 16px; overflow: auto; } .content pre { border-radius: var(--bs-border-radius); white-space: pre-wrap; margin: 0; } .content pre code { background: transparent; color: inherit; padding: 0; } .schema-editor { white-space: nowrap; } /* horizontal scrollbar for wide schemas */ .schema-editor::-webkit-scrollbar { height: 10px; width: 10px; } .schema-editor::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; } .schema-editor::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); } /* Schema indentation */ .schema-line { display: block; } .schema-indent-1 { padding-left: 1.5rem; } .schema-indent-2 { padding-left: 3rem; } .schema-indent-3 { padding-left: 4rem; } /* Syntax token colors */ .schema-editor .tok-key { color: #7dd3fc; } .schema-editor .tok-str { color: var(--code-accent); } .schema-editor .tok-num { color: #fbbf24; } .schema-editor .tok-colon { color: rgba(255,255,255,0.45); padding: 0 6px 0 2px; } .schema-editor .tok-punct { color: rgba(255,255,255,0.55); } /* Copy button — floats top-right inside .code-block-wrapper */ .code-block-wrapper { position: relative; margin-bottom: 1.5rem; } .code-copy-btn { position: absolute; top: .75rem; right: .75rem; background: rgba(255,255,255,.10); border: none; border-radius: .25rem; padding: .375rem .5rem; color: rgba(255,255,255,.65); cursor: pointer; transition: background-color .15s ease, color .15s ease; z-index: 10; } .code-copy-btn:hover { background: rgba(255,255,255,.20); color: rgba(255,255,255,.90); } /* * .code-glow — decorative gradient border for featured code blocks. * Wrap a .schema-editor or pre in a .code-glow container. * Uses mask-composite to render only the border layer. */ .code-glow { border: 1px solid var(--bs-border-color); position: relative; } .code-glow::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid transparent; background: linear-gradient(135deg, hsla(var(--theme-hsl), 0.30), transparent 50%, hsla(var(--code-purple-hsl), 0.20) ) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ============================================================ 19. RESEARCH PAGE — HEADER & SCROLL NAV ============================================================ */ /* Fixed header bar on all result pages */ .research-header { position: fixed; width: 100%; z-index: 10; } .research-header .breadcrumb { margin-top: -0.75rem !important; } /* Scroll sections override the global section padding */ .scroll-section { padding-top: 0; padding-bottom: 0; margin-bottom: 3rem; } /* Sticky left sidebar — desktop only */ @media (min-width: 992px) { .scroll-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding-right: 0.5rem; margin-bottom: 3rem; border-right: 1px solid var(--bs-border-color); } } /* Vertical nav list */ .scroll-nav { display: flex; flex-direction: column; gap: .25rem; padding: 0; margin: 0; } .scroll-nav .nav-link { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: var(--bs-border-radius); color: var(--bs-secondary-color); font-family: var(--bs-body-font-family); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .scroll-nav .nav-link:hover { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); } /* Active nav item — solid fill */ .scroll-nav .nav-link.active { color: #fff; background-color: var(--theme); } /* ============================================================ 20. RESEARCH PAGE — SECTION TITLES & ICONS ============================================================ */ .scroll-section-title { display: flex; align-items: center; gap: .75rem; font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.02em; } .scroll-section-title .fa-solid { font-size: 1.5rem; } /* Colored square preceding each section title */ .scroll-icon { width: 3rem; height: 3rem; border-radius: var(--bs-border-radius); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; flex-shrink: 0; } /* Tab panel fade-in */ .tab-section { animation: fadeIn 0.3s ease; } /* ============================================================ 21. RESEARCH PAGE — THEME LISTS ============================================================ */ /* * .theme-ol — numbered list with orange circular counters. * Used for Key Takeaways, ranked items. * CSS counters used instead of ::marker for cross-browser control. */ .theme-ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .75rem; counter-reset: theme-li; } .theme-ol > li { counter-increment: theme-li; padding-left: 1.85rem; position: relative; } .theme-ol > li::before { content: counter(theme-li); position: absolute; left: 0; top: 0.1em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background-color: hsla(var(--theme-hsl), 0.10); color: var(--theme); font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* * .theme-ul — bullet list with small orange dot markers. * Used for trends, signals, feature lists. */ .theme-ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; } .theme-ul > li { padding-left: 1.25rem; position: relative; } .theme-ul > li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--theme); } /* ============================================================ 22. MOBILE SCROLL TOGGLE ============================================================ */ /* * Fixed bottom bar on mobile — revealed by JS when breakpoint * drops below lg. Shows/hides the scroll nav panel. */ @media (max-width: 991px) { .scroll-mobile-toggle { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; width: auto; border-radius: 0; } } /* ============================================================ 23. UTILITY CLASSES ============================================================ */ /* Negative horizontal bleed — full-width rows inside padded containers */ .mx-n-4 { margin-right: -1.5rem !important; margin-left: -1.5rem !important; } .height-chart { min-height: 250px; } .height-textarea { height: 100px !important; } /* ============================================================ 24. HERO FLOATING CARDS ============================================================ */ /* * Three independently animated pieces — main card, badge, competitors card. * Different durations and delays ensure they never fully sync, * creating an organic "breathing" feel. */ /* Wrapper — reserves vertical space for the absolutely-positioned competitors card */ .hero-cards-wrapper { position: relative; padding-bottom: 1.5rem; } /* Main brief card — slow primary float */ .hero-main-card { position: relative; margin-left: 2rem; z-index: 2; animation: heroFloatMain 4s ease-in-out infinite; } /* AI-Powered badge — slightly faster, drifts in opposite direction */ .hero-brief-badge { position: absolute; top: -0.875rem; right: 0.53rem; z-index: 4; font-size: 0.8rem; padding: 0.4rem 0.8rem; border-radius: var(--bs-border-radius-pill); animation: heroFloatBadge 3.2s ease-in-out infinite; animation-delay: 0.7s; } /* Competitors card — slowest, different anchor so it never syncs with main */ .hero-competitors-card { position: absolute; bottom: 0; left: 0; width: 220px; z-index: 3; animation: heroFloatCompetitors 5.1s ease-in-out infinite; animation-delay: 1.4s; } /* Uppercase mono label — "SALES BRIEF", "TOP COMPETITORS" */ .hero-card-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; margin-bottom: 0; } /* Skeleton content dots */ .hero-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background-color: var(--theme); } .hero-dot--dim { opacity: 0.55; } .hero-dot--faint { opacity: 0.30; } /* Skeleton content lines */ .hero-skeleton-line { height: 9px; border-radius: var(--bs-border-radius-pill); background: var(--bs-border-color); flex-grow: 1; } .hero-line-lg { max-width: 88%; } .hero-line-md { max-width: 72%; } .hero-line-sm { max-width: 55%; } .hero-line-xs { max-width: 28%; } /* Slim confidence bar */ .hero-confidence-bar { height: 5px; } /* Competitor number boxes */ .hero-competitor-box { width: 30px; height: 30px; border-radius: var(--bs-border-radius-sm); background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); font-size: 0.65rem; font-weight: 600; color: var(--bs-secondary-color); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; } /* Keyframes — each piece moves at its own pace */ @keyframes heroFloatMain { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes heroFloatBadge { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(5px); } /* opposite direction adds tension */ } @keyframes heroFloatCompetitors { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .hero-main-card, .hero-brief-badge, .hero-competitors-card { animation: none; } } /* ============================================================ COMPARISON TABLE ============================================================ */ .comparison-table { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-xl); overflow: hidden; } .comparison-table .table { table-layout: fixed; border-collapse: collapse; margin-bottom: 0; } /* Left column — muted bg, muted text */ .comparison-col-left { width: 50%; padding: 1rem 1.5rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg) !important; border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); font-size: 0.95rem; font-weight: 400; } /* Right column — very subtle warm tint, full-strength body text */ .comparison-col-right { width: 50%; padding: 1rem 1.5rem; background: var(--theme-light) !important; border-bottom: 1px solid var(--bs-border-color); font-size: 0.95rem; } /* thead cells — slightly heavier */ .comparison-table thead th { font-size: 0.9rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 1rem 1.5rem; } /* Remove bottom border on last row */ .comparison-table tbody tr:last-child td { border-bottom: none; } /* Italic muted heading accent — "A sales strategist." */ .comparison-heading-alt { color: var(--bs-secondary-color); } /* ============================================================ DARK CTA SECTION Uses data-bs-theme="dark" on the element so BS5 resolves all var(--bs-*) tokens to dark-mode values automatically. ============================================================ */ .section-dark { position: relative; background: radial-gradient(ellipse at 50% 50%, hsla(var(--theme-hsl), 0.15) 0%, transparent 90%), var(--body-bg-inverse); color: var(--body-color-inverse); --bs-heading-color: var(--body-color-inverse); } [data-bs-theme="dark"] .section-dark { background: radial-gradient(ellipse at 50% 50%, hsla(var(--theme-hsl), 0.09) 0%, transparent 90%), var(--body-bg-inverse); } .section-dark .h-inverse { color: var(--body-color-inverse) !important; } .section-dark .text-muted { color: var(--body-color-inverse) !important; opacity: 0.6; } .btn-outline-inverse { --bs-btn-color: var(--body-color-inverse); --bs-btn-border-color: var(--body-color-inverse); --bs-btn-hover-bg: var(--body-color-inverse); --bs-btn-hover-border-color: var(--body-color-inverse); --bs-btn-hover-color: var(--body-bg-inverse); --bs-btn-active-bg: var(--body-color-inverse); --bs-btn-active-color: var(--body-bg-inverse); } /* ============================================================ 25. SCROLL-REVEAL ANIMATIONS ============================================================ */ /* * Pairs with APP.scrollAnimate in app.js (IntersectionObserver). * * Usage: data-animate="[type]" * Types: fade | slide-up | slide-down | slide-left | slide-right | * zoom-in | zoom-out | flip-x | flip-y | flip-up | flip-down | * blur-in | skew-left | skew-right * * Options: data-animate-delay="300" — delay in ms * data-animate-once — fire once, then unobserve * data-animate-reset — re-hide on scroll back * * Stagger: data-animate-stagger="150" on parent — gaps child [data-animate] */ [data-animate] { opacity: 0; transition: opacity 500ms ease; } [data-animate].is-visible { opacity: 1; } [data-animate="fade"].is-visible { animation: saFade 0.75s ease-in-out both; } [data-animate="slide-up"].is-visible { animation: saSlideUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } [data-animate="slide-down"].is-visible { animation: saSlideDown 0.7s ease-in-out both; } [data-animate="slide-left"].is-visible { animation: saSlideLeft 0.7s ease-in-out both; } [data-animate="slide-right"].is-visible { animation: saSlideRight 0.7s ease-in-out both; } [data-animate="zoom-in"].is-visible { animation: saZoomIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } [data-animate="zoom-out"].is-visible { animation: saZoomOut 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } [data-animate="flip-x"].is-visible, [data-animate="flip-y"].is-visible, [data-animate="flip-up"].is-visible, [data-animate="flip-down"].is-visible { backface-visibility: hidden; } [data-animate="flip-x"].is-visible { animation: saFlipX 0.7s ease-in-out both; } [data-animate="flip-y"].is-visible { animation: saFlipY 0.7s ease-in-out both; } [data-animate="flip-up"].is-visible { animation: saFlipUp 0.7s ease-in-out both; } [data-animate="flip-down"].is-visible { animation: saFlipDown 0.7s ease-in-out both; } [data-animate="blur-in"].is-visible { animation: saBlurIn 0.8s ease-out both; } [data-animate="skew-left"].is-visible { animation: saSkewLeft 0.6s ease-out both; } [data-animate="skew-right"].is-visible { animation: saSkewRight 0.6s ease-out both; } /* ============================================================ 26. KEYFRAMES ============================================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes shine { 0% { left: -100%; transition-property: left; } 10%, 100% { left: 100%; transition-property: left; } } @keyframes saFade { from { opacity: 0; } to { opacity: 1; } } @keyframes saSlideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes saSlideDown { from { transform: translateY(-60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes saSlideLeft { from { transform: translateX(-80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes saSlideRight{ from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes saZoomIn { from { transform: scale(0.75); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes saZoomOut { from { transform: scale(1.25); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes saFlipX { from { transform: perspective(600px) rotateX(45deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } } @keyframes saFlipY { from { transform: perspective(600px) rotateY(45deg); opacity: 0; } to { transform: perspective(600px) rotateY(0); opacity: 1; } } @keyframes saFlipUp { from { transform: perspective(600px) rotateX(-45deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } } @keyframes saFlipDown { from { transform: perspective(600px) rotateX(45deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } } @keyframes saBlurIn { from { filter: blur(12px); opacity: 0; } to { filter: blur(0); opacity: 1; } } @keyframes saSkewLeft { from { transform: skewX(-15deg) translateX(-40px); opacity: 0; } to { transform: skewX(0) translateX(0); opacity: 1; } } @keyframes saSkewRight { from { transform: skewX(15deg) translateX(40px); opacity: 0; } to { transform: skewX(0) translateX(0); opacity: 1; } } /* ============================================================ 27. ACCESSIBILITY ============================================================ */ /* Disable all animation for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { [data-animate] { transition : none !important; animation : none !important; opacity : 1 !important; } }