/* ========================================================= ASense.ai — style.css (Centralized Production Build) ========================================================= */ /* --- 1. Design Tokens — ASense.ai Brand Guide V2.0 --- */ :root { /* V2.0 Light — default / Private Bank */ --color-page-background: #F7F4EC; --color-header-background: #FFFFFF; --color-header-tint: #FBF9F2; --color-surface: #FFFFFF; --color-border: #E2DCC9; --color-brand: #A8861F; --color-brand-hover: #8F7319; --color-brand-soft: rgba(168, 134, 31, 0.10); --color-brand-border: rgba(168, 134, 31, 0.28); --color-heading: #0F2A1D; --color-body: #1E2B24; --color-text-muted: #6B7268; --color-text-muted-strong: #555E56; /* Semantic data colors — data meaning only */ --color-data-positive: #1E7A3C; --color-data-negative: #B3362B; /* Compatibility aliases for the existing component rules */ --color-border-strong: #CFC7B2; --color-brand-light: #B7952B; --color-body: #1E2B24; --color-text-secondary: #39463E; --color-text-muted-strong: #7B8279; --color-white: #FFFFFF; /* Typography — V2.0 */ --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-monospace: 'IBM Plex Mono', monospace; --container-max-width: 1180px; --radius-medium: 14px; /* Legal / trust surfaces */ --legal-card-background: #FFFFFF; --legal-card-border: var(--color-border); --legal-note-background: #FBF9F2; --legal-note-text: var(--color-body); --legal-contact-background: #F2F0E9; --legal-contact-text: var(--color-body); --legal-link-color: var(--color-brand); } /* * V2.0 Dark — Evolved Current. * Dark mode is a user choice, not the default. * * Supported toggle patterns: * * * * The toggle implementation only needs to add/remove either attribute/class * on the element. No system preference is forced so light remains * the default brand face. */ html[data-theme="dark"], html.dark { --color-page-background: #0B1F33; --color-header-background: #0E2740; --color-header-tint: #0E2740; --color-surface: #12263B; --color-border: #22364C; --color-brand: #C39A45; --color-brand-hover: #D2AD62; --color-brand-soft: rgba(195, 154, 69, 0.12); --color-brand-border: rgba(195, 154, 69, 0.30); --color-heading: #EFEAE0; --color-body: #DDE4EC; --color-text-muted: #8FA0B0; --color-text-muted-strong: #AAB7C3; --color-data-positive: #4CC97A; --color-data-negative: #E0685C; --color-border-strong: #31465B; --color-brand-light: #D2AD62; --color-body: #EFEAE0; --color-text-secondary: #DDE4EC; --color-text-muted-strong: #8FA0B0; --color-white: #FFFFFF; --legal-card-background: #12263B; --legal-card-border: #22364C; --legal-note-background: #0E2740; --legal-note-text: #DDE4EC; --legal-contact-background: #12263B; --legal-contact-text: #DDE4EC; --legal-link-color: var(--color-brand); } /* --- 2. Structural Resets & Base System --- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .site-body { background: var(--color-page-background); color: var(--color-body); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* --- 3. Core Structural Typography Classes --- */ .h1-display { font-family: var(--font-display); color: var(--color-heading); letter-spacing: -0.01em; font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; } .h2-display { font-family: var(--font-display); color: var(--color-heading); letter-spacing: -0.01em; font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1.18; } .h3-display { font-family: var(--font-display); color: var(--color-heading); letter-spacing: -0.01em; font-weight: 600; font-size: 16.5px; } .text-eyebrow { font-family: var(--font-monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand); font-weight: 500; } .text-muted { color: var(--color-text-muted); } .wrap { max-width: var(--container-max-width); margin: 0 auto; padding: 0 28px; } .divider-line { height: 1px; background: var(--color-border); } .accent-span { color: var(--color-brand); } /* --- 4. Component Interface Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 2px; } .btn-primary { background: var(--color-brand); color: #FFFFFF; } .btn-primary-light { background: var(--color-brand-soft); color: var(--color-heading); border-color: var(--color-brand-border); } .btn-primary:hover { background: var(--color-brand-hover); color: #FFFFFF !important; } .btn-ghost { background: transparent; color: var(--color-heading); border-color: var(--color-border); } .btn-ghost:hover { border-color: var(--color-brand); color: var(--color-brand); } .btn-ghost-1{ color: var(--color-brand-light); margin-top: 1rem; } /* --- 5. Global Layout Architecture (Header / Footer) --- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: var(--color-header-tint); border-bottom: 1px solid var(--color-border); } .nav-container { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; max-width: var(--container-max-width); margin: 0 auto; } .brand-wrapper { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand-logo-img { display: block; max-width: 100%; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-heading); letter-spacing: -0.01em; } .brand-name span { color: var(--color-brand); } .navlinks-list { display: flex; align-items: center; gap: 30px; } .navlinks-list .nav-item-link { font-size: 14.5px; font-weight: 500; color: var(--color-body); text-decoration: none; } .navlinks-list .nav-item-link:hover, .navlinks-list .nav-item-link.active { color: var(--color-brand-light); } .navcta-group { display: flex; align-items: center; gap: 14px; } .navcta-group .btn { padding: 10px 18px; font-size: 13.5px; } .menu-toggle-btn { display: none; background: none; border: none; color: var(--color-heading); font-size: 26px; cursor: pointer; } @media (max-width: 860px) { .navlinks-list { position: fixed; inset: 64px 0 auto 0; background: var(--color-header-background); flex-direction: column; align-items: flex-start; padding: 20px 28px; gap: 18px; border-bottom: 1px solid var(--color-border); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .navlinks-list.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .menu-toggle-btn { display: block; } .navcta-group .btn-ghost { display: none; } } .site-footer { border-top: 1px solid var(--color-border); padding: 44px 0 30px; font-size: 13.5px; } .footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; } .footer-info-text { color: var(--color-body); line-height: 1.7; } .footer-info-text .footer-link { color: var(--color-brand); text-decoration: none; } .footer-info-text .footer-link:hover { text-decoration: underline; } .footer-links-list { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; } .footer-links-list .footer-item-link { font-size: 13.5px; color: var(--color-text-muted); text-decoration: none; } .footer-links-list .footer-item-link:hover { color: var(--color-brand-light); } .footer-bottom-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--color-text-muted-strong); font-family: var(--font-monospace); } /* --- 6. Core Framework Component Grids --- */ .section-block { padding: 86px 0; } .section-head-layout { max-width: 640px; margin-bottom: 44px; } .section-head-layout .section-desc-text { color: var(--color-text-muted); font-size: 15.5px; margin-top: 14px; } /* Base Component Cards */ .asym-grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .card-instance { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 26px 24px; } .card-instance .card-desc { color: var(--color-text-muted); font-size: 14px; line-height: 1.6; margin-top: 8px; } .card-instance.dimmed { opacity: 0.82; } /* --- 7. Application Template Overrides --- */ /* Home Page Specific Structures */ .hero-block-layout { padding: 88px 0 60px; } .hero-columns-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } @media (max-width: 960px) { .hero-columns-grid { grid-template-columns: 1fr; } } .hero-paragraph-lead { font-size: 17.5px; color: var(--color-body); max-width: 52ch; margin: 20px 0 30px; } .hero-actions-group { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; } .hero-footer-notice { font-family: var(--font-monospace); font-size: 12.5px; color: var(--color-text-muted); } /* Interactive Interactive Shell */ .terminal-shell { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px var(--color-brand-soft); } .terminal-header-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); } .terminal-header-bar .dot-node { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); } .terminal-header-bar .terminal-label { margin-left: 8px; font-family: var(--font-monospace); font-size: 11.5px; color: var(--color-text-muted-strong); letter-spacing: .05em; } .terminal-content-body { padding: 22px 20px 24px; min-height: 230px; } .terminal-input-line { display: flex; gap: 10px; font-family: var(--font-monospace); font-size: 14px; margin-bottom: 6px; } .terminal-input-line .prompt-symbol { color: var(--color-brand); flex-shrink: 0; } .terminal-input-line .query-string-field { color: var(--color-heading); font-weight: 500; } .terminal-input-line .blinking-cursor { display: inline-block; width: 7px; height: 15px; background: var(--color-brand); vertical-align: -2px; animation: terminal-blink 1s step-end infinite; } @keyframes terminal-blink { 50% { opacity: 0; } } .terminal-output-response { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border); font-size: 13.8px; color: var(--color-body); line-height: 1.65; opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s ease; } .terminal-output-response.show { opacity: 1; transform: translateY(0); } .terminal-output-response .citation-pill { display: inline-block; margin-top: 10px; font-family: var(--font-monospace); font-size: 11px; color: var(--color-brand-light); background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); padding: 3px 9px; border-radius: 20px; } /* Architecture Layer Systems */ .architecture-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .architecture-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 24px 20px; } .architecture-card .step-index { font-family: var(--font-monospace); color: var(--color-brand); font-size: 13px; margin-bottom: 14px; display: block; } .architecture-card .step-desc { color: var(--color-text-muted); font-size: 13.3px; line-height: 1.55; margin-top: 6px; } /* Trust Segment Systems */ .trust-grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px; } .trust-item-node { display: flex; gap: 14px; } .trust-item-node .icon-box { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); display: flex; align-items: center; justify-content: center; color: var(--color-brand); } .trust-item-node .trust-desc-text { font-size: 13.3px; color: var(--color-text-muted); line-height: 1.55; margin-top: 4px; } /* Pricing Section Matrix */ .pricing-matrix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } @media (max-width: 860px) { .pricing-matrix-grid { max-width: 380px; margin: 0 auto; } } .price-card-tier { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 30px 26px; position: relative; } .price-card-tier.featured { background: var(--color-surface); border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand-border), 0 24px 60px -24px var(--color-brand-soft); } .price-card-tier .tier-tag { font-family: var(--font-monospace); font-size: 10.5px; color: var(--color-brand); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; display: inline-block; } .price-card-tier .amount-display { font-family: var(--font-display); font-size: 38px; color: var(--color-heading); margin: 14px 0 4px; } .price-card-tier .amount-display sup { font-size: 14px; color: var(--color-text-muted); font-weight: 400; font-family: var(--font-body); } .price-card-tier .billing-cycle-note { font-size: 12px; color: var(--color-text-muted-strong); margin-bottom: 20px; } .price-card-tier .tier-summary { font-size: 13.6px; color: var(--color-text-muted); line-height: 1.6; } .price-card-tier .savings-badge { display: inline-block; margin-top: 14px; font-family: var(--font-monospace); font-size: 11px; color: var(--color-brand-light); background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); padding: 3px 9px; border-radius: 20px; } .founding-banner-ribbon { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); border-radius: 12px; padding: 14px 22px; margin-bottom: 34px; text-align: center; } .founding-banner-ribbon .badge-label { font-family: var(--font-monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-light); background: var(--color-brand-soft); padding: 4px 10px; border-radius: 20px; } .founding-banner-ribbon .anchor-link { font-size: 13px; font-weight: 600; color: var(--color-brand-light); } .price-disclosure-block { margin-top: 26px; text-align: left; } .price-disclosure-block .disclosure-text { font-size: 12.5px; color: var(--color-text-muted-strong); max-width: 80%; line-height: 1.6; } .price-disclosure-block .disclosure-link { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; } .price-disclosure-block .disclosure-link:hover { color: var(--color-brand-light); } .price-security{ margin-top: 14px; font-family: var(--font-monospace); font-size: 12px; color: var(--color-brand-light); letter-spacing: .02em; } /* Pull Quotes Components */ .testimonial-block-quote { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 36px 34px; } .testimonial-block-quote .quote-content-text { font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 23px); color: var(--color-heading); line-height: 1.5; font-weight: 500; } .testimonial-block-quote .attribution-node { margin-top: 18px; font-family: var(--font-monospace); font-size: 12px; color: var(--color-text-muted); letter-spacing: .05em; } /* Band Call to Actions */ .cta-callout-band { background: linear-gradient(0deg,var(--color-header-background),var(--color-surface)); border: 1px solid var(--color-border); border-radius: 20px; padding: 56px 44px; text-align: center; } .cta-callout-band .cta-paragraph-desc { color: var(--color-text-muted); max-width: 52ch; margin: 14px auto 28px; } /* --- 8. Legal Shell Template Architecture --- */ .legal-page-shell { max-width: 90vw; margin: 0 auto; padding: 2.5rem 5%; } .legal-header-area { margin-bottom: 2rem; } .legal-header-area .legal-meta-details { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin-top: 0.5rem; } .legal-content-section { margin-bottom: 2.5rem; } .legal-section-subtitle { font-family: var(--font-body); font-size: 1.25rem; margin: 2rem 0 0.75rem 0; padding-bottom: 0.25rem; border-bottom: 1px solid var(--color-border); color: var(--color-heading); } .legal-subsection-subtitle { font-family: var(--font-body); font-size: 1rem; margin: 1.25rem 0 0.25rem 0; color: var(--color-brand); font-weight: 600; } .legal-body-paragraph { margin-bottom: 0.75rem; color: var(--color-body); font-size: 0.95rem; } .legal-unordered-list { padding-left: 1.25rem; margin-bottom: 1rem; } .legal-unordered-list .list-item-node { margin-bottom: 0.25rem; color: var(--color-body); font-size: 0.95rem; } .legal-inline-link { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; } .legal-inline-link:hover { color: var(--color-brand); } .legal-callout-box { background: color-mix(in srgb, var(--color-surface) 92%, transparent); border-left: 3px solid var(--color-brand); padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 0 4px 4px 0; } /* --- 9. Dynamic Terms & Conditions Extensions --- */ .terms-wrapper-container { max-width: 90vw; margin: 0 auto; padding: 2.5rem 5%; } .terms-header-block { text-align: left; margin-bottom: 32px; border-bottom: 2px solid var(--legal-card-border); padding-bottom: 16px; } .terms-summary-intro { font-size: 16px; color: var(--color-heading); margin-bottom: 24px; } .terms-summary-intro .legal-inline-link { color: var(--color-brand); } .terms-grid-title { font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: var(--color-brand); margin: 40px 0 20px 0; border-bottom: 1px solid var(--legal-card-border); padding-bottom: 6px; font-family: var(--font-display); } .terms-feature-card { border: 1px solid var(--legal-card-border); border-radius: 8px; padding: 20px; margin-bottom: 16px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; background-color: var(--color-surface); } .terms-feature-card .card-icon-node { font-size: 24px; line-height: 1; user-select: none; } .terms-feature-card .card-inner-heading { display: inline-block; font-size: 16px; color: var(--color-brand); margin-bottom: 6px; font-weight: 600; } .terms-feature-card .card-inner-desc { margin: 0; font-size: 15px; color: var(--color-body); } .terms-note-callout { background-color: var(--color-surface); border-left: 4px solid var(--color-brand-light); padding: 20px; border-radius: 0 8px 8px 0; margin: 40px 0 24px 0; } .terms-note-callout .note-header { margin: 0 0 8px 0; color: var(--color-body); font-size: 16px; font-weight: 600; } .terms-note-callout .note-body-text { margin: 0; font-size: 15px; color: var(--color-body); } .terms-note-callout .note-body-text.spaced-break { margin-top: 12px; } .terms-panel-contact { text-align: center; background-color: var(--legal-contact-background); padding: 20px; border-radius: 8px; margin: 24px 0; } .terms-panel-contact .contact-panel-label { display: block; font-size: 15px; color: var(--legal-contact-text); margin-bottom: 6px; font-weight: 600; } .terms-panel-contact .contact-panel-links { font-size: 15px; color: var(--color-body); } .terms-panel-contact .contact-panel-links .legal-inline-link { color: var(--legal-link-color); text-decoration: none; } .terms-panel-contact .contact-panel-links .legal-inline-link:hover { text-decoration: underline; } /* Dynamic InnerHTML API Scoped Container Rule Exception */ .asense-dynamic-legal-target { margin: 40px 0 24px 0; color: var(--color-heading); } .asense-dynamic-legal-target p, .asense-dynamic-legal-target ul, .asense-dynamic-legal-target ol, .asense-dynamic-legal-target li { margin: 0 0 12px 20px; color: var(--color-body); } @media (max-width: 576px) { .terms-feature-card { grid-template-columns: 1fr; gap: 8px; } .terms-wrapper-container { padding: 16px; } } /* --- 10. Portfolio Advisors Workspace Layout --- */ .advisor-hero-inner { max-width: 760px; } .advisor-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-medium); overflow: hidden; } @media (max-width: 760px) { .advisor-compare-row { grid-template-columns: 1fr; } } .advisor-compare-row .compare-cell { padding: 26px; } .advisor-compare-row .compare-cell.cell-left { background: var(--color-surface); border-right: 1px solid var(--color-border); } .advisor-compare-row .compare-cell.cell-right { background: var(--color-surface); } @media (max-width: 760px) { .advisor-compare-row .compare-cell.cell-left { border-right: none; border-bottom: 1px solid var(--color-border); } } .advisor-compare-row .cell-badge-tag { font-family: var(--font-monospace); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted-strong); margin-bottom: 10px; display: block; } .advisor-compare-row .compare-cell.cell-right .cell-badge-tag { color: var(--color-brand); } .advisor-compare-row .compare-cell .cell-text { font-size: 15px; color: var(--color-body); line-height: 1.6; } .advisor-triage-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 30px 28px; position: relative; overflow: hidden; } .advisor-triage-panel::before { content: 'MORNING BRIEF'; position: absolute; top: 18px; right: 22px; font-family: var(--font-monospace); font-size: 10px; letter-spacing: .12em; color: var(--color-text-muted-strong); } .advisor-triage-panel .triage-cmd-prompt { font-family: var(--font-monospace); font-size: 18px; color: var(--color-brand-light); font-weight: 500; margin-bottom: 6px; } .advisor-triage-panel .triage-summary-data { color: var(--color-text-muted); font-size: 14px; } .advisor-inline-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* --- 11. Portfolio Survey & Engine Systems --- */ .health-view-main { flex: 1; display: flex; align-items: center; } .health-view-main .health-center-panel { max-width: 640px; margin: 0 auto; padding: 40px 28px 80px; width: 100%; } .health-view-main .health-headline { margin: 14px 0 16px; line-height: 1.14; } .health-view-main .health-paragraph-lead { font-size: 16.5px; color: var(--color-body); margin-bottom: 30px; max-width: 52ch; } .health-view-main .reassurance-list { list-style: none; margin-bottom: 38px; } .health-view-main .reassurance-list .reassurance-item { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--color-body); margin-bottom: 12px; } .health-view-main .reassurance-list .reassurance-item svg { flex-shrink: 0; color: var(--color-brand); } .health-view-main .health-fineprint { margin-top: 16px; font-family: var(--font-monospace); font-size: 11.5px; color: var(--color-text-muted-strong); } /* Survey Engine Injection Target Container */ .survey-engine-container { display: none; width: 100%; overflow: hidden; background: #0B1F33; } .survey-engine-container .smcx-widget, .survey-engine-container .smcx-embed, .survey-engine-container .smcx-iframe-container { width: 100% !important; max-width: 100% !important; overflow: hidden !important; background: #0B1F33 !important; border: none !important; } .survey-engine-container .smcx-iframe-container iframe { width: 100% !important; display: block; border: none !important; background: #0B1F33; } .survey-engine-container .smcx-widget-footer { display: none !important; } .survey-action-btn-wrapper { display: flex; justify-content: center; align-items: center; padding: 0 3rem 5rem 3rem; margin-bottom: 1rem; } /* --- 12. Animation Engine Classes --- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* ========================================================= Scoped Structural Fix for Dynamic API Content Injection Strictly targets plain text tags coming from remote APIs. ========================================================= */ .asense-dynamic-legal-target { width: 100%; max-width: 100%; overflow-x: hidden; margin: 40px 0 24px 0; word-wrap: break-word; overflow-wrap: break-word; } /* Scoped Typography Overrides for Incoming Dynamic Layout Headers */ .asense-dynamic-legal-target h1, .asense-dynamic-legal-target h2 { font-family: var(--font-display); color: var(--color-brand); margin: 2.5rem 0 1rem 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; border-bottom: 1px solid var(--legal-card-border); padding-bottom: 8px; } .asense-dynamic-legal-target h3, .asense-dynamic-legal-target h4 { font-family: var(--font-body); color: var(--color-heading); margin: 1.75rem 0 0.75rem 0; font-size: 1.15rem; font-weight: 600; } /* Scoped Typography for Incoming Body Copy Elements */ .asense-dynamic-legal-target p { font-family: var(--font-body); color: var(--color-body); font-size: 15px; line-height: 1.65; margin: 0 0 1.25rem 0; text-align: left; width: 100%; } /* Scoped Structural Alignment for Dynamic Lists */ .asense-dynamic-legal-target ul, .asense-dynamic-legal-target ol { margin: 0 0 1.5rem 0; padding-left: 1.5rem; width: 100%; } .asense-dynamic-legal-target li { font-family: var(--font-body); color: var(--color-body); font-size: 14.5px; line-height: 1.6; margin-bottom: 0.5rem; text-align: left; } /* Scoped Inline Links for Injected Markups */ .asense-dynamic-legal-target a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; } .asense-dynamic-legal-target a:hover { color: var(--color-brand-light); } /* ========================================================= Mobile Header Layout & Padding Alignment Fixes ========================================================= */ /* Central structural layout overrides */ .nav-container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding: 16px 28px; box-sizing: border-box; } .brand-wrapper { display: inline-flex; align-items: center; flex-shrink: 0; /* Prevents container from compressing the logo area */ } .brand-logo-img { display: block; height: 40px; width: auto; /* Maintains geometric aspect ratio natively */ max-width: 100%; } /* Clear alignment optimization for tablet down to small mobile viewports */ @media (max-width: 860px) { .nav-container { padding: 12px 20px; /* Pulls padding inward slightly for edge safety */ } /* Enforce block stack metrics inside the dropdown drawer menu list */ .navlinks-list { position: fixed; /* Aligns dropdown baseline seamlessly under the sticky header block bounds */ inset: 65px 0 auto 0; background: var(--color-header-background); flex-direction: column; align-items: stretch; padding: 24px; gap: 20px; border-bottom: 1px solid var(--color-border); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); box-sizing: border-box; } .navlinks-list.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .navlinks-list .nav-item-link { font-size: 16px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); display: block; width: 100%; box-sizing: border-box; } .navlinks-list .nav-item-link:last-of-type { border-bottom: none; } /* Hide horizontal layout group actions explicitly inside row header container */ .navcta-group .btn { display: none !important; } .menu-toggle-btn { display: block; background: none; border: none; color: var(--color-heading); font-size: 26px; cursor: pointer; padding: 4px 8px; margin-left: 12px; user-select: none; } /* Dedicated internal stacked action controls inside the open drawer block */ .mobile-only-drawer-ctas { display: flex !important; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); box-sizing: border-box; width: 100%; } .mobile-only-drawer-ctas .btn { display: inline-flex !important; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; padding: 14px 20px; } } /* Deep mobile screen width fallback constraint protections */ @media (max-width: 400px) { .nav-container { padding: 12px 16px; } .brand-logo-img { height: 34px; /* Dynamically downscales logo safely for small device bounds */ } .menu-toggle-btn { font-size: 24px; padding: 4px 4px; } } /* Standard desktop non-drawer baseline normalization hide configuration rule */ .mobile-only-drawer-ctas { display: none; } .trust{ background: var(--color-header-background); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .no-picks-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); border-radius: 12px; padding: 13px 18px; margin: 22px 0 4px; color: var(--color-body); font-size: 14px; } .no-picks-banner .no-picks-mark { font-family: var(--font-monospace); font-size: 10.5px; letter-spacing: .1em; color: var(--color-brand-light); background: var(--color-brand-soft); padding: 4px 10px; border-radius: 20px; white-space: nowrap; } /* S4 — founder / methodology strip */ .founder-strip { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 22px 26px; } .founder-strip .founder-lede { font-size: 14.5px; color: var(--color-body); line-height: 1.6; max-width: 62ch; } .method-chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .method-chip-row .method-chip { font-family: var(--font-monospace); font-size: 11px; color: var(--color-brand-light); background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); padding: 4px 10px; border-radius: 20px; } /* S6 — trust ladder section helpers */ .ladder-img { width: 100%; max-width: 1100px; height: auto; display: block; } .hero-eval-note { font-family: var(--font-monospace); font-size: 12px; letter-spacing: .02em; color: var(--color-brand-light); margin: 10px 0 0; } /* S7b — the demoted Health Check soft rung: make its inline link visible and inviting inside the muted notice line */ .hero-footer-notice a { color: var(--color-body); text-decoration: underline; text-underline-offset: 3px; } .hero-footer-notice a:hover { color: var(--color-brand-light); } /* ========================================================= ASense.ai V2.0 — Semantic Data Utilities Green/red communicate data meaning only. Do not use these classes for chrome, branding, CTAs, or marketing. ========================================================= */ .data-gain, .semantic-gain { color: var(--color-data-positive) !important; } .data-loss, .semantic-loss { color: var(--color-data-negative) !important; } /* ========================================================= ASense.ai V2.0 — Theme Toggle The JavaScript toggle should set data-theme="dark" or class="dark" on . Light remains the default when neither is present. ========================================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-heading); cursor: pointer; font: 500 13px/1 var(--font-body); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .theme-toggle:hover { border-color: var(--color-brand); color: var(--color-brand); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } .theme-toggle-icon { color: var(--color-brand); } /* Prevent old navy/teal body transition assumptions during theme changes. */ .site-body, .site-header, .site-footer, .card-instance, .architecture-card, .price-card-tier, .testimonial-block-quote, .cta-callout-band, .terminal-shell, .advisor-triage-panel, .advisor-compare-row .compare-cell, .terms-feature-card, .terms-note-callout, .trust, .no-picks-banner, .founder-strip { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } /* ============================================ THEME TOGGLE ============================================ */ .theme-toggle { width: 38px; height: 38px; min-width: 38px; padding: 0; margin: 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-heading); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { background: var(--color-header-tint); border-color: var(--color-brand); } .theme-toggle:active { transform: scale(0.94); } /* Simple CSS sun */ .theme-toggle-icon { width: 14px; height: 14px; display: block; position: relative; border-radius: 50%; background: var(--color-brand); box-shadow: 0 -7px 0 -5px var(--color-brand), 0 7px 0 -5px var(--color-brand), 7px 0 0 -5px var(--color-brand), -7px 0 0 -5px var(--color-brand), 5px 5px 0 -5px var(--color-brand), -5px -5px 0 -5px var(--color-brand), 5px -5px 0 -5px var(--color-brand), -5px 5px 0 -5px var(--color-brand); } /* Dark mode: turn the icon into a simple crescent */ html[data-theme="dark"] .theme-toggle-icon, html.dark .theme-toggle-icon { width: 15px; height: 15px; background: transparent; border-radius: 50%; box-shadow: none; border: 2px solid var(--color-brand); position: relative; } html[data-theme="dark"] .theme-toggle-icon::after, html.dark .theme-toggle-icon::after { content: ""; position: absolute; width: 15px; height: 15px; top: -4px; left: 4px; border-radius: 50%; background: var(--color-surface); } /* Mobile drawer toggle */ .mobile-only-drawer-ctas .theme-toggle { margin-bottom: 8px; }