/* * visibility.com.ai — Global Design System * ───────────────────────────────────────────────── * Aesthetic: Charlotte design — warm neutrals, beige/white palette, * Instrument Serif headings, Inter body, JetBrains Mono code, warm tan (#c4a882) accent. * Loaded last in every page's . */ /* ─── FONTS ──────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ─── DESIGN TOKENS ──────────────────────────────────── */ :root { --color-bg: #ffffff; --color-bg-alt: #f5f3f0; --color-surface: #f0ece7; --color-border: #e0dcd6; --color-text: #1a1a1a; --color-text-secondary: #4a4a4a; --color-text-muted: #888880; --color-active: #c4a882; --color-active-wash: rgba(196, 168, 130, 0.10); --color-active-dark: #a68b6b; --color-warning: #f59e0b; --color-void: #0c0c0c; --font-serif: 'Instrument Serif', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --radius: 16px; --radius-sm: 10px; --radius-pill: 100px; --max-width: 1140px; --transition: 200ms ease; } /* ─── RESET & BASE ───────────────────────────────────── */ *, *::before, *::after { font-family: var(--font-sans) !important; } html { scroll-behavior: smooth; } body { background: var(--color-bg) !important; color: var(--color-text) !important; font-size: 15px !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ─── TYPOGRAPHY ──────────────────────────────────────── */ h1, h2, h3 { font-family: var(--font-serif) !important; color: var(--color-text) !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } h1 { font-weight: 400 !important; font-size: clamp(36px, 5vw, 56px) !important; } h2 { font-weight: 400 !important; font-size: clamp(28px, 4vw, 40px) !important; } h3 { font-weight: 400 !important; font-size: clamp(22px, 3vw, 28px) !important; } h4, h5, h6 { font-family: var(--font-sans) !important; font-weight: 600 !important; color: var(--color-text) !important; letter-spacing: -0.01em !important; } code, pre, .mono { font-family: var(--font-mono) !important; } /* ─── CONTAINER ──────────────────────────────────────── */ .wrap { max-width: var(--max-width) !important; margin: 0 auto !important; padding: 0 40px !important; } /* ─── NAV ──────────────────────────────────────────────── */ nav, #mainNav, header > nav { width: 100% !important; background: var(--color-bg) !important; border-bottom: 1px solid var(--color-border) !important; padding: 16px 40px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; transition: all var(--transition) !important; z-index: 100 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ─── LOGO / WORDMARK ────────────────────────────────── */ .logo, a.logo, .nav-logo, .wordmark { font-family: var(--font-serif) !important; font-size: 20px !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--color-text) !important; text-decoration: none !important; text-transform: none !important; } .logo span, a.logo span { color: var(--color-text) !important; } /* ─── NAV LINKS ──────────────────────────────────────── */ .nav-right { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .nav-links { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: center !important; } .nav-links a { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; text-decoration: none !important; padding: 6px 12px !important; border-radius: var(--radius-sm) !important; transition: color var(--transition), background var(--transition) !important; } .nav-links a:hover, .nav-links a.active { color: var(--color-text) !important; background: var(--color-bg-alt) !important; text-decoration: none !important; } /* ─── NAV CTA ─────────────────────────────────────────── */ .nav-cta, a.nav-cta { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: #ffffff !important; background: #1a1a1a !important; border: none !important; padding: 8px 20px !important; border-radius: var(--radius) !important; text-decoration: none !important; display: inline-block !important; transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important; box-shadow: none !important; } .nav-cta:hover, a.nav-cta:hover { background: #333333 !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; } /* ─── HERO / PAGE HERO ────────────────────────────────── */ .hero, section.hero, .page-hero, [class*="page-hero"] { min-height: auto !important; padding-top: 80px !important; padding-bottom: 80px !important; } /* ─── HERO BADGE ─────────────────────────────────────── */ .hero-badge { background: transparent !important; border: 1px solid var(--color-border) !important; color: var(--color-text-secondary) !important; font-size: 13px !important; font-weight: 500 !important; font-family: var(--font-sans) !important; letter-spacing: 0.02em !important; padding: 6px 14px !important; border-radius: var(--radius-pill) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } .hero-badge::before { content: ''; width: 8px; height: 8px; background: var(--color-active); border-radius: 50%; display: inline-block; flex-shrink: 0; } /* ─── SECTION BACKGROUNDS ─────────────────────────────── */ .section-alt, .bg-alt { background: var(--color-bg-alt) !important; } /* Dark sections — keep dark */ .section-dark, .shift, #shift, .shift-section, .close-section, [class*="dark-section"], [class*="section--dark"] { background: var(--color-void) !important; } .section-dark *, .shift *, #shift *, .shift-section *, .close-section * { color: inherit !important; } /* ─── CARDS ───────────────────────────────────────────── */ .card, [class*="-card"], [class*="card-"], [class*="tier"], [class*="pricing-"], [class*="service-"], [class*="feature-"] { background: #ffffff !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; transition: background var(--transition), box-shadow var(--transition) !important; } .card:hover, [class*="-card"]:hover, [class*="card-"]:hover { background: var(--color-bg-alt) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } /* ─── BUTTONS (global) ────────────────────────────────── */ button, .btn, [class*="btn-"], [class*="-btn"], input[type="submit"], input[type="button"], input[type="reset"] { font-family: var(--font-sans) !important; border-radius: var(--radius) !important; transition: all var(--transition) !important; } /* Primary/submit buttons — charcoal (premium) */ .btn-primary, button[type="submit"], input[type="submit"], [class*="submit"], [class*="check-btn"], [class*="cta-btn"] { background: #1a1a1a !important; color: #ffffff !important; border: 1px solid #1a1a1a !important; font-weight: 600 !important; border-radius: var(--radius) !important; box-shadow: none !important; } .btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: #333333 !important; border-color: #333333 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; transform: translateY(-1px) !important; } /* Secondary / Ghost buttons */ .btn-secondary, .btn-ghost { background: transparent !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; font-weight: 500 !important; border-radius: var(--radius) !important; } .btn-secondary:hover, .btn-ghost:hover { background: var(--color-bg-alt) !important; } /* ─── FORMS ───────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="tel"], textarea, select { font-family: var(--font-sans) !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--color-border) !important; background: var(--color-bg-alt) !important; color: var(--color-text) !important; font-size: 14px !important; outline: none !important; box-shadow: none !important; padding: 12px 16px !important; } input::placeholder, textarea::placeholder { color: var(--color-text-muted) !important; } input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: var(--color-text-secondary) !important; box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08) !important; outline: none !important; } /* ─── LINKS ───────────────────────────────────────────── */ a { color: inherit; transition: color var(--transition) !important; } a:not(.logo):not(.nav-cta):not(.nav-links a):not(nav a):not(footer a):hover { text-decoration: underline !important; color: var(--color-text-secondary) !important; } /* ─── DIVIDERS ───────────────────────────────────────── */ hr { border: none !important; border-top: 1px solid var(--color-border) !important; margin: 60px 0 !important; } /* ─── ACCORDIONS ──────────────────────────────────────── */ [class*="accordion"], [class*="faq-item"], details { border-radius: 0 !important; } [class*="accordion-header"], [class*="faq-q"], summary { min-height: 44px !important; display: flex !important; align-items: center !important; cursor: pointer !important; } /* ─── FOOTER ──────────────────────────────────────────── */ footer { background: var(--color-bg) !important; border-top: 1px solid var(--color-border) !important; padding-top: 40px !important; padding-bottom: 40px !important; margin-top: 80px !important; } .footer-inner { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; } .foot-logo, .footer-inner .foot-logo { font-family: var(--font-serif) !important; font-size: 18px !important; font-weight: 400 !important; color: var(--color-text) !important; letter-spacing: -0.01em !important; } .foot-logo span, .footer-inner .foot-logo span { color: var(--color-text) !important; } .foot-links { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: center !important; } .foot-links a { font-family: var(--font-sans) !important; font-size: 14px !important; color: var(--color-text-muted) !important; text-decoration: none !important; padding: 4px 8px !important; } .foot-links a:hover { color: var(--color-text) !important; text-decoration: underline !important; } .foot-right { font-family: var(--font-sans) !important; font-size: 13px !important; color: var(--color-text-muted) !important; } .footer-bottom { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .footer-bottom p { font-family: var(--font-sans) !important; font-size: 13px !important; color: var(--color-text-muted) !important; margin: 0 !important; } /* ─── SCROLL ANIMATIONS ─────────────────────────────── */ .fade-up { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease !important; } .fade-up.visible { opacity: 1 !important; transform: none !important; } /* ─── SCORE / PLATFORM CARDS ─────────────────────────── */ .score-card, .platform-card, [class*="score-"], [class*="platform-"] { border: 1px solid var(--color-border) !important; background: #ffffff !important; border-radius: var(--radius-sm) !important; } /* ─── PROGRESS BARS ──────────────────────────────────── */ [class*="progress-bar"], [class*="progress-fill"] { border-radius: var(--radius-pill) !important; background: var(--color-active) !important; } [class*="progress-track"], [class*="progress-bg"] { border-radius: var(--radius-pill) !important; background: var(--color-surface) !important; } /* ─── TESTIMONIAL AVATARS ─────────────────────────────── */ .testimonial-avatar, [class*="avatar"] { border-radius: 50% !important; background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; } /* ─── STATS / METRICS ────────────────────────────────── */ [class*="stat-num"], [class*="-stat"] .num, .metric-value { color: var(--color-text) !important; font-family: var(--font-serif) !important; } /* ─── PLATFORM PILLS / STATUS BADGES ─────────────────── */ .pill, [class*="-pill"], [class*="pill-"], .status, [class*="-badge"], [class*="badge-"], [class*="-tag"], [class*="tag-"] { border-radius: var(--radius-pill) !important; font-size: 12px !important; font-weight: 500 !important; } /* ─── MOBILE ──────────────────────────────────────────── */ @media (max-width: 768px) { nav, #mainNav { padding: 12px 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .nav-right { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; } .nav-links { gap: 0 !important; flex-wrap: wrap !important; } .nav-links a { padding: 8px 8px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; font-size: 13px !important; } .nav-cta, a.nav-cta { width: auto !important; font-size: 13px !important; padding: 8px 16px !important; } .wrap { padding: 0 20px !important; } body { font-size: 14px !important; } h1 { font-size: 32px !important; } h2 { font-size: 26px !important; } h3 { font-size: 20px !important; } .hero { padding-top: 40px !important; padding-bottom: 60px !important; } .hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; } table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } footer { padding-top: 32px !important; margin-top: 40px !important; } .footer-inner { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } .foot-links { gap: 0 !important; flex-direction: column !important; align-items: flex-start !important; } .foot-links a { padding: 4px 0 !important; min-height: 32px !important; display: flex !important; align-items: center !important; } input[type="text"], input[type="email"], input[type="url"], select, textarea { width: 100% !important; font-size: 16px !important; } button[type="submit"], input[type="submit"], .btn-primary, [class*="check-btn"] { width: 100% !important; } .hero-inner, [class*="-grid"], [class*="grid-"] { grid-template-columns: 1fr !important; gap: 24px !important; } /* Preserve 7-column calendar grid */ .calendar-grid { grid-template-columns: repeat(7, 1fr) !important; } } @media (max-width: 480px) { .wrap { padding: 0 16px !important; } .nav-links a { font-size: 12px !important; padding: 6px 6px !important; } } /* ─── FAQ PAGE OVERRIDES ───────────────────────────── */ /* FAQ uses .container instead of .wrap */ .container { max-width: var(--max-width) !important; margin: 0 auto !important; padding: 0 40px !important; } /* Hamburger: hide at non-mobile unless explicitly shown */ .hamburger-btn { display: none !important; } @media (max-width: 860px) { .hamburger-btn { display: block !important; } } /* Close-section CTA buttons — charcoal accent */ .close-cta { background: #1a1a1a !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; border-radius: var(--radius) !important; box-shadow: none !important; transition: background var(--transition), transform var(--transition) !important; } .close-cta:hover { background: #333333 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; } .close-cta-outline { background: transparent !important; border: 1.5px solid var(--color-border) !important; color: var(--color-text) !important; font-weight: 500 !important; border-radius: var(--radius) !important; } /* Close section dark bg override */ .close-section { background: var(--color-void) !important; } .close-section h2, .close-section p { color: #ffffff !important; } .close-section p { color: rgba(255,255,255,0.5) !important; } /* FAQ accordion — no purple */ .faq-item { background: #ffffff !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; } .faq-item:hover { border-color: var(--color-active) !important; } .faq-item.open { border-color: var(--color-active) !important; } .faq-icon { background: var(--color-active-wash) !important; border: 1px solid var(--color-border) !important; } .faq-item.open .faq-icon { background: var(--color-active) !important; border-color: var(--color-active) !important; } .faq-icon svg path { stroke: var(--color-active) !important; } /* FAQ inline CTA */ .faq-inline-cta { background: var(--color-active-wash) !important; border: 1px solid var(--color-border) !important; color: var(--color-active-dark) !important; border-radius: var(--radius-sm) !important; } .faq-inline-cta:hover { background: var(--color-active) !important; border-color: var(--color-active) !important; color: #ffffff !important; } /* FAQ tabs */ .tab-btn.active { background: #1a1a1a !important; border-color: #1a1a1a !important; color: #ffffff !important; } .tab-btn:hover { border-color: var(--color-active) !important; color: var(--color-text) !important; } /* FAQ category icon */ .faq-category-icon { background: var(--color-active-wash) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; } @media (max-width: 768px) { .container { padding: 0 20px !important; } .close-section { padding: 60px 0 !important; } .close-cta, .close-cta-outline { padding: 16px 32px !important; font-size: 15px !important; } } @media (max-width: 480px) { .container { padding: 0 16px !important; } } /* ═══════════════════════════════════════════════════════════ ADMIN PANEL OVERRIDES — companies.sh aesthetic Targets admin.html and admin-geo.html inline styles ═══════════════════════════════════════════════════════════ */ /* Override legacy CSS variables used by admin pages */ :root { /* Admin uses --accent, --surface-2, --border-strong, etc. */ --accent: #c4a882 !important; --accent-dim: rgba(196, 168, 130, 0.08) !important; --accent-mid: rgba(196, 168, 130, 0.15) !important; --border-strong: #e0dcd6 !important; --border-hover: #c4a882 !important; --surface-2: #f5f3f0 !important; /* Client portal variables (in case any page mixes them) */ --primary: #c4a882 !important; --primary-light: rgba(196, 168, 130, 0.08) !important; --primary-lighter: rgba(196, 168, 130, 0.04) !important; --primary-text: #c4a882 !important; --primary-hover: #a68b6b !important; --sidebar-accent: #c4a882 !important; --sidebar-text-active: #c4a882 !important; --sidebar-hover: rgba(196, 168, 130, 0.08) !important; --brand: #c4a882 !important; --brand-hover: #a68b6b !important; --brand-light: rgba(196, 168, 130, 0.08) !important; } /* ─── ADMIN NAV ──────────────────────────────────────────── */ .logo { font-family: var(--font-serif) !important; font-weight: 400 !important; font-size: 20px !important; letter-spacing: -0.01em !important; } .nav-badge { font-family: var(--font-sans) !important; font-size: 11px !important; color: var(--color-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .nav-link { font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; padding: 6px 12px !important; border-radius: var(--radius-sm) !important; } .nav-link:hover { color: var(--color-text) !important; background: var(--color-bg-alt) !important; } .nav-link.active { background: var(--color-active-wash) !important; color: var(--color-active) !important; } .btn-logout { font-family: var(--font-sans) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; color: var(--color-text-secondary) !important; background: transparent !important; } .btn-logout:hover { border-color: #dc2626 !important; color: #dc2626 !important; } /* ─── ADMIN LOGIN ────────────────────────────────────────── */ .login-screen { background: var(--color-bg) !important; } .login-card { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; box-shadow: none !important; } .login-card h2 { font-family: var(--font-serif) !important; font-weight: 400 !important; font-size: 28px !important; color: var(--color-text) !important; } .login-card p { color: var(--color-text-secondary) !important; } .login-input { background: var(--color-bg-alt) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; color: var(--color-text) !important; font-family: var(--font-sans) !important; padding: 12px 16px !important; } .login-input:focus { border-color: var(--color-active) !important; box-shadow: 0 0 0 2px rgba(196, 168, 130, 0.15) !important; } .login-input::placeholder { color: var(--color-text-muted) !important; } .login-btn { background: #1a1a1a !important; color: #ffffff !important; border: 1px solid #1a1a1a !important; border-radius: var(--radius) !important; font-family: var(--font-sans) !important; font-weight: 600 !important; transition: all var(--transition) !important; } .login-btn:hover { background: #333333 !important; border-color: #333333 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; transform: translateY(-1px) !important; } /* ─── ADMIN DASHBOARD HEADER ─────────────────────────────── */ .page-header h1 { font-family: var(--font-serif) !important; font-weight: 400 !important; color: var(--color-text) !important; } .page-header h1 em { font-style: normal !important; color: var(--color-text) !important; } .page-header p { color: var(--color-text-secondary) !important; } /* ─── ADMIN STAT CARDS ───────────────────────────────────── */ .stat-card { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; transition: all var(--transition) !important; } .stat-card:hover { background: var(--color-bg-alt) !important; } .stat-label { font-family: var(--font-sans) !important; color: var(--color-text-muted) !important; } .stat-value { font-family: var(--font-serif) !important; font-weight: 400 !important; color: var(--color-text) !important; } .stat-sub { color: var(--color-text-secondary) !important; } .stat-accent { color: var(--color-active) !important; } /* ─── ADMIN FILTER PILLS ─────────────────────────────────── */ .search-input { background: var(--color-bg-alt) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; color: var(--color-text) !important; font-family: var(--font-sans) !important; } .search-input:focus { border-color: var(--color-active) !important; box-shadow: 0 0 0 2px rgba(196, 168, 130, 0.15) !important; } .search-input::placeholder { color: var(--color-text-muted) !important; } .pill { font-family: var(--font-sans) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-pill) !important; background: var(--color-bg) !important; color: var(--color-text-secondary) !important; } .pill:hover { border-color: var(--color-active) !important; color: var(--color-text) !important; } .pill.active { background: #1a1a1a !important; border-color: #1a1a1a !important; color: #ffffff !important; } .pill.active .count { color: #ffffff !important; } /* ─── ADMIN TABLES ───────────────────────────────────────── */ .leads-table-wrap, .table-wrap { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; overflow: hidden !important; } .leads-table th { font-family: var(--font-sans) !important; color: var(--color-text-muted) !important; border-bottom: 1px solid var(--color-border) !important; background: var(--color-bg-alt) !important; } .leads-table th:hover { color: var(--color-text) !important; } .leads-table th.sorted { color: var(--color-active) !important; } .leads-table td { font-family: var(--font-sans) !important; border-bottom: 1px solid var(--color-surface) !important; color: var(--color-text) !important; } .leads-table tbody tr:hover td { background: var(--color-bg-alt) !important; } .lead-name { font-family: var(--font-sans) !important; color: var(--color-text) !important; } .lead-company, .lead-email { font-family: var(--font-sans) !important; color: var(--color-text-secondary) !important; } /* ─── ADMIN SCORE & STATUS BADGES ────────────────────────── */ .score-badge { border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; } .status-select { font-family: var(--font-sans) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; background-color: var(--color-bg) !important; color: var(--color-text) !important; } .email-status-badge { border-radius: var(--radius-pill) !important; } /* ─── ADMIN TESTIMONIAL CARDS ────────────────────────────── */ .testimonial-item { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; } .t-name { font-family: var(--font-sans) !important; color: var(--color-text) !important; } .t-role { color: var(--color-text-secondary) !important; } .t-quote { font-family: var(--font-sans) !important; color: var(--color-text-secondary) !important; border-left-color: var(--color-border) !important; } .t-btn { font-family: var(--font-sans) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; background: transparent !important; color: var(--color-text-secondary) !important; } .t-btn:hover { border-color: var(--color-text) !important; color: var(--color-text) !important; background: var(--color-bg-alt) !important; } .t-badge { font-family: var(--font-sans) !important; } /* ─── ADMIN-GEO BUTTONS ─────────────────────────────────── */ .btn-primary { background: #1a1a1a !important; color: #ffffff !important; border: none !important; border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; font-weight: 600 !important; } .btn-primary:hover { background: #333333 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; transform: translateY(-1px) !important; } .btn-secondary { background: var(--color-bg-alt) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; color: var(--color-text) !important; } .btn-secondary:hover { border-color: var(--color-active) !important; background: var(--color-bg) !important; } .btn-run { background: #1a1a1a !important; color: #ffffff !important; border-radius: var(--radius-sm) !important; } .btn-run:hover { background: #333333 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important; } .btn-ghost { background: transparent !important; color: var(--color-text-secondary) !important; } .btn-ghost:hover { color: var(--color-text) !important; background: var(--color-bg-alt) !important; } .btn-sm { border-radius: var(--radius-sm) !important; } .btn-danger { border-radius: var(--radius-sm) !important; } /* ─── ADMIN-GEO NAV ─────────────────────────────────────── */ .nav-logo { font-family: var(--font-serif) !important; font-weight: 400 !important; font-size: 20px !important; color: var(--color-text) !important; } .nav-logo span { background: #c4a882 !important; color: #ffffff !important; border-radius: var(--radius-sm) !important; } /* ─── ADMIN-GEO STAT CARDS ───────────────────────────────── */ .stat-card .label { font-family: var(--font-sans) !important; color: var(--color-text-muted) !important; } .stat-card .value { font-family: var(--font-serif) !important; font-weight: 400 !important; color: var(--color-text) !important; } .stat-card .sub { color: var(--color-text-secondary) !important; } /* ─── ADMIN-GEO TABLE ────────────────────────────────────── */ .table-header h2 { font-family: var(--font-serif) !important; font-weight: 400 !important; } /* ─── ADMIN-GEO LOGIN GATE ───────────────────────────────── */ #login-gate { border-radius: var(--radius) !important; border-color: var(--color-border) !important; } #login-gate h2 { font-family: var(--font-serif) !important; font-weight: 400 !important; font-size: 28px !important; } #login-gate p { color: var(--color-text-secondary) !important; } /* ─── ADMIN-GEO CONTENT CARDS ────────────────────────────── */ .content-card { border-radius: var(--radius-sm) !important; border-color: var(--color-border) !important; } .content-filter-tab.active, .type-tab.active { background: #1a1a1a !important; color: #ffffff !important; border-color: #1a1a1a !important; } .content-filter-tab:hover, .type-tab:hover { border-color: var(--color-active) !important; } /* ─── ADMIN PAGE HEADER ──────────────────────────────────── */ .page-header h1 { font-family: var(--font-serif) !important; font-weight: 400 !important; font-size: clamp(24px, 3vw, 32px) !important; } /* ─── ADMIN TABS ─────────────────────────────────────────── */ .tab-btn.active, .tabs .active { background: #1a1a1a !important; border-color: #1a1a1a !important; color: #ffffff !important; } /* ─── ADMIN CHARTS ───────────────────────────────────────── */ .chart-card, .analytics-card { border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; background: var(--color-bg) !important; } /* ═══════════════════════════════════════════════════════════ CLIENT DASHBOARD INLINE STYLE OVERRIDES ═══════════════════════════════════════════════════════════ */ /* Fix client-dashboard.html inline --primary — Charlotte warm tan */ .sidebar-item.active { background: rgba(196, 168, 130, 0.10) !important; color: #1a1a1a !important; } .sidebar-item:hover { background: rgba(196, 168, 130, 0.08) !important; color: #1a1a1a !important; } .sidebar-item.active svg, .sidebar-item:hover svg { stroke: #c4a882 !important; } /* ═══════════════════════════════════════════════════════════ INNER PAGE REFINEMENTS Ensures book, welcome, testimonial, privacy, terms fully match companies.sh ═══════════════════════════════════════════════════════════ */ /* Progress indicators used in book.html / welcome.html */ .step-indicator .step.active, .step-indicator .step.completed, .progress-step.active, .progress-step.completed { background: #1a1a1a !important; border-color: #1a1a1a !important; color: #ffffff !important; } .step-indicator .step, .progress-step { border: 1px solid var(--color-border) !important; border-radius: 50% !important; } /* Calendar grid for booking */ .calendar-header { font-family: var(--font-serif) !important; font-weight: 400 !important; } .calendar-day.selected { background: #1a1a1a !important; color: #ffffff !important; } .calendar-day:hover:not(.disabled) { background: var(--color-active-wash) !important; } .time-slot.selected { background: #1a1a1a !important; color: #ffffff !important; border-color: #1a1a1a !important; } .time-slot:hover:not(.disabled) { border-color: var(--color-active) !important; } /* Star ratings (testimonial page) */ .star-rating .star.active, .star-rating .star:hover { color: #f59e0b !important; } /* Legal pages (privacy, terms) */ .legal-content h1, .legal-content h2, .legal-content h3 { font-family: var(--font-serif) !important; font-weight: 400 !important; } .legal-content { max-width: var(--max-width) !important; margin: 0 auto !important; padding: 60px 40px !important; } @media (max-width: 768px) { .legal-content { padding: 40px 20px !important; } }