/* ============================================================================ Legacy to AI — theme overrides on top of Bootstrap 5 Palette is driven by config.php (BRAND[...]); mirror any changes here. Dark/light mode: driven by [data-bs-theme] on , toggled in footer.php and initialized (anti-flash) by an inline script in header.php. Bootstrap's own dark-mode CSS variables handle standard Bootstrap classes automatically; the custom properties below extend the same mechanism to this site's own components (cards, nav, chips, portal panels, etc). ========================================================================== */ :root { --brand-primary: #1d4ed8; --brand-primary-dark: #1e3a8a; --brand-accent: #38bdf8; --brand-soft: #eff4ff; /* Theme-aware surfaces & text (light values) */ --bg-page: #ffffff; --bg-surface: #ffffff; --bg-surface-alt: #eff4ff; --border-soft: #e6ebf5; --border-soft-2: #d6e0fb; --text-heading: #0f172a; --text-body: #334155; --text-muted: #64748b; --text-muted-2: #94a3b8; } [data-bs-theme="dark"] { --brand-primary: #5b8def; --brand-primary-dark: #86aeff; --brand-accent: #38bdf8; --brand-soft: #152238; --bg-page: #0b1220; --bg-surface: #121b2e; --bg-surface-alt: #101a30; --border-soft: #223052; --border-soft-2: #28406e; --text-heading: #e9edf5; --text-body: #c2cbdb; --text-muted: #a3adc2; --text-muted-2: #8b96ad; } * { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text-heading); background: var(--bg-page); transition: background-color .2s ease, color .2s ease; } /* ── Brand primitives ─────────────────────────────────────────────────── */ .text-accent { color: var(--brand-accent) !important; } .text-white-75 { color: rgba(255, 255, 255, 0.78) !important; } .bg-light-blue { background: var(--bg-surface-alt); } .brand-btn { border-radius: 10px; padding-inline: 1.4rem; } .btn-primary, .btn-outline-primary:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); } .btn-primary:hover { background-color: var(--brand-primary-dark); border-color: var(--brand-primary-dark); } .btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); } .text-primary { color: var(--brand-primary) !important; } .brand-badge { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 600; letter-spacing: .02em; padding: .5rem .9rem; border-radius: 999px; } .brand-chip { background: var(--brand-soft); color: var(--brand-primary); font-weight: 600; } /* ── Logo / wordmark ──────────────────────────────────────────────────── */ .brand-wordmark { font-size: 1.18rem; letter-spacing: -.02em; color: var(--text-heading); } .brand-wordmark-accent { color: var(--brand-primary); } .brand-footer .brand-wordmark, .dashboard-head .brand-wordmark { color: #fff; } .brand-footer .brand-wordmark-accent { color: var(--brand-accent); } /* ── Navbar ───────────────────────────────────────────────────────────── */ .brand-nav { background: var(--bg-surface); box-shadow: 0 1px 0 rgba(15, 23, 42, .07); } .brand-nav .nav-link { font-weight: 500; color: var(--text-body); } .brand-nav .nav-link:hover, .brand-nav .nav-link.active { color: var(--brand-primary); } /* Theme toggle button */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-soft); background: transparent; color: var(--text-body); transition: background-color .18s ease, color .18s ease; } .theme-toggle-btn:hover { background: var(--bg-surface-alt); color: var(--brand-primary); } .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: block; } [data-bs-theme="dark"] .theme-toggle-btn .icon-sun { display: block; } [data-bs-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(56, 189, 248, .18), transparent 60%), linear-gradient(135deg, rgba(29, 78, 216, .55) 0%, rgba(30, 58, 138, .65) 100%), url('../images/hero-bg.jpg') center / cover no-repeat; } .hero-stats > div { border-left: 3px solid var(--brand-accent); padding-left: .9rem; } .hero h1, .hero .lead { text-shadow: 0 2px 12px rgba(0,0,0,.6); } /* code mock card — intentionally always-dark "terminal" styling in both themes */ .code-card { border-radius: 16px; overflow: hidden; background: #0b1220; border: 1px solid rgba(255,255,255,.08); } .code-card-head { display: flex; align-items: center; gap: 6px; padding: .7rem 1rem; background: #131c30; } .code-card-body { padding: 1.2rem 1.3rem; font-family: 'SFMono-Regular', Consolas, monospace; font-size: .86rem; line-height: 1.7; color: #cbd5e1; } .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dot-red { background: #ff5f56; } .dot-amber { background: #ffbd2e; } .dot-green { background: #27c93f; } .c-dim { color: #64748b; } .c-old { color: #fca5a5; } .c-arrow { color: var(--brand-accent); } .c-new { color: #93c5fd; } .c-ok { color: #4ade80; } /* ── Trust bar ────────────────────────────────────────────────────────── */ .trust-bar { background: var(--bg-surface); } .trust-tags { color: var(--text-muted-2); } .trust-tag { color: var(--brand-primary); background: var(--brand-soft); padding: .35rem .8rem; border-radius: 8px; letter-spacing: .03em; } .trust-tag-cta { color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); transition: filter .18s ease, transform .18s ease; } .trust-tag-cta:hover { filter: brightness(1.07); transform: translateY(-1px); color: #fff; } /* ── Contact form ─────────────────────────────────────────────────────── */ .contact-form-card { background: var(--bg-surface); border-radius: 16px; box-shadow: 0 20px 45px -25px rgba(2, 8, 20, .6); } .contact-form-card .form-control { border-color: var(--border-soft); } .text-dark-50 { color: var(--text-muted-2) !important; } /* ── Cards ────────────────────────────────────────────────────────────── */ .service-card, .step-card, .story-card, .case-study, .results-card, .stat-tile, .project-row, .support-panel, .auth-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 16px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .2s ease; } .service-card:hover, .story-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(29, 78, 216, .45); border-color: var(--border-soft-2); } .service-icon { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-primary); } .step-card { padding: 1.6rem; } .step-num { font-size: 1.7rem; font-weight: 800; color: var(--brand-accent); background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Stories ──────────────────────────────────────────────────────────── */ .story-card-link { text-decoration: none; color: inherit; display: block; } .story-pill { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--brand-primary-dark); background: var(--brand-soft); border: 1px solid var(--border-soft-2); padding: .3rem .7rem; border-radius: 999px; } .case-study { border-left: 5px solid var(--brand-primary); } .case-quote { border-left: 3px solid var(--brand-accent); padding-left: 1rem; margin-top: 1.2rem; font-style: italic; color: var(--text-body); } .case-quote-author { font-style: normal; font-weight: 600; font-size: .85rem; color: var(--text-muted); margin-top: .5rem; } .results-card { background: var(--brand-soft); border-color: var(--border-soft-2); } .results-list svg { color: var(--brand-primary); } /* ── Page heads (stories / portal) ────────────────────────────────────── */ .page-head, .dashboard-head { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); } /* ── CTA ──────────────────────────────────────────────────────────────── */ .cta-panel { border-radius: 22px; background: radial-gradient(700px 300px at 90% 120%, rgba(56,189,248,.35), transparent 60%), linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); } /* ── Target stack ─────────────────────────────────────────────────────── */ .target-tag { font-size: .8rem; font-weight: 600; color: var(--brand-primary); } /* ── Partner tiers ────────────────────────────────────────────────────── */ .tier-rate { font-size: 2rem; font-weight: 800; line-height: 1.2; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── FAQ accordion ────────────────────────────────────────────────────── */ .faq-accordion .accordion-item { background: var(--bg-surface); border-color: var(--border-soft); } .faq-accordion .accordion-button { background: var(--bg-surface); color: var(--text-heading); } .faq-accordion .accordion-button:not(.collapsed) { background: var(--brand-soft); color: var(--brand-primary-dark); box-shadow: none; } .faq-accordion .accordion-button:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .15); } .faq-accordion .accordion-body { background: var(--bg-surface); color: var(--text-body); } /* ── Footer ───────────────────────────────────────────────────────────── */ .brand-footer { background: #0f172a; } /* always dark, regardless of site theme */ .footer-links a { color: rgba(255,255,255,.65); text-decoration: none; display: block; padding: .2rem 0; } .footer-links a:hover { color: var(--brand-accent); } /* ── Auth ─────────────────────────────────────────────────────────────── */ .auth-wrap { background: var(--bg-surface-alt); min-height: 72vh; } .auth-card { max-width: 430px; width: 100%; border-radius: 20px; background: var(--bg-surface); } .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(29,78,216,.15); } .demo-hint code { background: var(--brand-soft); color: var(--brand-primary-dark); padding: .1rem .4rem; border-radius: 5px; } /* ── Dashboard ────────────────────────────────────────────────────────── */ .stat-tile { display: flex; flex-direction: column; } .stat-num { font-size: 2.2rem; font-weight: 800; color: var(--brand-primary); line-height: 1; } .stat-label { color: var(--text-muted); font-weight: 500; margin-top: .3rem; } .brand-progress { height: 9px; border-radius: 999px; background: var(--border-soft); } .brand-progress .progress-bar { background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); } .support-panel { background: var(--brand-soft); border-color: var(--border-soft-2); } .portal-panel { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 16px; } /* Phase timeline */ .phase-track { display: flex; align-items: flex-start; gap: 0; } .phase-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; } .phase-node { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; position: relative; z-index: 1; border: 2px solid var(--border-soft); background: var(--bg-surface); color: var(--text-muted-2); transition: all .2s; } .phase-line { position: absolute; top: 17px; left: 50%; width: 100%; height: 2px; background: var(--border-soft); z-index: 0; } .phase-label { text-align: center; padding: 0 .25rem; } @media (max-width: 575px) { .phase-track { flex-direction: column; align-items: stretch; gap: 1.1rem; } .phase-step { flex-direction: row; align-items: center; } .phase-line { display: none; } .phase-label { text-align: left; padding: 0; margin-left: .75rem; margin-top: 0 !important; } } .phase-complete .phase-node { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .phase-complete .phase-line { background: var(--brand-primary); } .phase-active .phase-node { background: var(--bg-surface); border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(29,78,216,.12); } .phase-active .phase-label .fw-semibold { color: var(--brand-primary); } .phase-pending .phase-node { background: var(--bg-surface-alt); } /* Next milestone callout */ .milestone-callout { background: var(--brand-soft); border: 1px solid var(--border-soft-2); border-radius: 12px; } .milestone-icon { width: 40px; height: 40px; background: var(--brand-primary); color: #fff; border-radius: 10px; display: grid; place-items: center; } /* Activity feed */ .activity-feed { border-left: 2px solid var(--border-soft); padding-left: 1rem; margin-left: .5rem; } .activity-item { padding-bottom: 1.1rem; } .activity-item:last-child { padding-bottom: 0; } .activity-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); margin-left: -1.57rem; flex-shrink: 0; } /* Documents */ .doc-row + .doc-row { border-top: 1px solid var(--border-soft); } .doc-icon { width: 36px; height: 36px; background: var(--brand-soft); color: var(--brand-primary); border-radius: 8px; display: grid; place-items: center; } /* Key contacts */ .contact-card { background: var(--brand-soft); border: 1px solid var(--border-soft-2); border-radius: 12px; } .contact-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: #fff; font-weight: 700; font-size: 1.1rem; display: grid; place-items: center; flex-shrink: 0; } /* ── Misc ─────────────────────────────────────────────────────────────── */ .py-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; } @media (max-width: 575px) { .display-4 { font-size: 2.2rem; } } /* ── Scroll animations ────────────────────────────────────────────────── */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); }