/* --------------------------------------------------- ATAPIC – Shared styles for modal/partial views File: partial.css --------------------------------------------------- */ /* ========== THEME VARIABLES ========== */ /* Light mode defaults */ :root { --page-bg: #f8fafc; --surface: #ffffff; --surface-soft: #f1f5f9; --surface-accent: rgba(0, 179, 201, 0.05); --text-primary: #0f172a; --text-secondary: #64748b; --primary: #00b3c9; --primary-soft: rgba(0, 179, 201, 0.12); --border: rgba(15, 23, 42, 0.08); --radius-lg: 12px; --radius-md: 8px; --shadow-soft: 0 12px 35px rgba(15, 23, 42, 0.08); } /* Dark mode overrides (toggled by data-theme="dark" on or ) */ [data-theme="dark"] { --page-bg: #020617; --surface: #020617; --surface-soft: #0b1220; --surface-accent: rgba(15, 23, 42, 0.9); --text-primary: #e2e8f0; --text-secondary: #94a3b8; --border: rgba(148, 163, 184, 0.25); --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.7); } /* ========== GENERIC LAYOUT ========== */ .partial-shell { padding: 20px 0 24px 0; background: transparent; /* modal background handled by main layout */ color: var(--text-primary); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .partial-shell h1, .partial-shell h2, .partial-shell h3, .partial-shell h4 { color: var(--text-primary); margin: 0; } .partial-shell p, .partial-shell li { color: var(--text-secondary); } /* Sections */ .partial-section { margin-bottom: 48px; } .partial-section:last-of-type { margin-bottom: 32px; } /* Headings */ .partial-heading-xl { font-size: 32px; font-weight: 700; margin-bottom: 16px; } .partial-heading-lg { font-size: 24px; font-weight: 700; margin-bottom: 24px; } .partial-heading-md { font-size: 20px; font-weight: 600; margin-bottom: 12px; } /* Body text helpers */ .partial-body-lg { font-size: 16px; line-height: 1.6; margin-bottom: 40px; } .partial-body { font-size: 14px; line-height: 1.6; } /* Grid helpers */ .partial-grid { display: grid; gap: 24px; } .partial-grid-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .partial-grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .partial-grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: center; } /* Stack on small screens */ @media (max-width: 768px) { .partial-grid-2-1 { grid-template-columns: minmax(0, 1fr); } } /* ========== CARDS & SURFACES ========== */ .partial-card { background: var(--surface-soft); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 24px; box-shadow: var(--shadow-soft); } .partial-card--small { border-radius: var(--radius-md); padding: 20px; } .partial-card--clean { background: var(--surface); box-shadow: var(--shadow-soft); } /* Accent / gradient section */ .partial-section-accent { padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient( 135deg, rgba(0, 179, 201, 0.06), rgba(0, 204, 204, 0.04) ); } /* Stat panel (right-hand box in benchmark section) */ .partial-stat-panel { text-align: center; padding: 24px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); } /* CTA surface */ .partial-cta-surface { text-align: center; padding: 32px; border-radius: var(--radius-lg); background: var(--surface-soft); border: 1px solid var(--border); } /* ========== ICONS / TAGS / META ========== */ .partial-icon { font-size: 36px; margin-bottom: 12px; color: var(--primary); } .partial-icon-lg { font-size: 40px; margin-bottom: 16px; color: var(--primary); } .partial-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--primary-soft); color: var(--primary); } .partial-meta { font-size: 13px; color: var(--text-secondary); } /* ========== BUTTONS & LINKS ========== */ /* Legacy partial button (used in some views) */ .partial-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 15px; background: var(--primary); color: #ffffff; text-decoration: none; border: none; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.1s ease; } .partial-btn-primary .material-icons { font-size: 20px; margin-right: 8px; } .partial-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .partial-btn-primary:active { transform: translateY(0); } /* Generic link styling INSIDE partials – but skip button-like anchors */ .partial-shell a:not(.partial-btn-primary):not(.primary-btn):not(.faq-cta-btn) { color: var(--primary); text-decoration: none; } .partial-shell a:not(.partial-btn-primary):not(.primary-btn):not(.faq-cta-btn):hover { opacity: 0.85; } /* ========== UTILITIES =========== */ .partial-mt-0 { margin-top: 0 !important; } .partial-mb-0 { margin-bottom: 0 !important; } .partial-mb-sm { margin-bottom: 12px !important; } .partial-mb-md { margin-bottom: 16px !important; } .partial-mb-lg { margin-bottom: 20px !important; } .partial-mb-xl { margin-bottom: 24px !important; } .partial-text-center { text-align: center; } .partial-stat-number { font-size: 56px; font-weight: 700; line-height: 1; color: var(--primary); } .partial-stat-label { font-size: 16px; margin-top: 8px; color: var(--text-secondary); } .partial-divider-top { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } /* ========== PRIMARY CTA BUTTONS (NEW) ========== */ a.primary-btn, button.primary-btn, a.faq-cta-btn, button.faq-cta-btn { background: var(--primary); color: #ffffff !important; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: none; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.1s ease; } /* Icons inside primary buttons */ a.primary-btn .material-icons, button.primary-btn .material-icons, a.faq-cta-btn .material-icons, button.faq-cta-btn .material-icons { font-size: 20px; margin-right: 8px; color: #ffffff !important; } a.primary-btn:hover, button.primary-btn:hover, a.faq-cta-btn:hover, button.faq-cta-btn:hover { opacity: 0.9; transform: translateY(-1px); } a.primary-btn:active, button.primary-btn:active, a.faq-cta-btn:active, button.faq-cta-btn:active { transform: translateY(0); } /* Extra safety: ensure button links always stay white even if other rules appear later */ .partial-shell a.primary-btn, .partial-shell a.faq-cta-btn, .partial-shell a.partial-btn-primary { color: #ffffff !important; }