/* ── Inner Pages Shared Styles ── v4 */ /* ── MOBILE VIEWPORT FIX ── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, video, svg { max-width: 100%; height: auto; } body { overflow-x: hidden; } /* Fonts & icons are loaded non-blocking via in each page's */ /* font-display:swap is set in Google Fonts URL parameter */ :root { --blue: #0055FF; --dark: #00194C; --font-display: 'Roboto Slab', 'Georgia', serif; --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } body { margin: 0; font-family: var(--font-body); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; overflow-wrap: break-word; box-sizing: border-box; } /* ── Global paragraph & text spacing ── */ p { margin-top: 0; margin-bottom: 1.75rem; line-height: 1.9; } p + p { margin-top: 0; } p:last-child { margin-bottom: 0; } /* Ensure paragraphs in brand body have spacing */ .brand-body p, .prose p, .article-body p { margin-bottom: 1.85rem; line-height: 1.85; } /* ── GLOBAL TYPOGRAPHY FOR ALL INNER PAGES ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.15; } /* Nav, buttons, labels */ .site-nav-links a, .site-nav-cta, .site-nav-admin, .site-nav-logo span, .nav-dropdown > button, .nav-dropdown-link, .services-dropdown-item-name, .breadcrumb, .section-label, .hero-badge, .page-hero .hero-sub, .btn-primary, .btn-outline-white, .form-submit, .fw-field label, .toc-title, .section-divider span, .blog-card-badge, .blog-card-title, .article-body h2, .article-body h3, .article-header h1, .sidebar-card h3, .highlight-box-title, .stat-chip-num, .stat-item-num, .step-num, .timeline-dot, .numbered-callout-num, .info-strip-label, .compare-table th, #float-panel-head h3, #fw-submit, .mobile-menu-cta, .site-footer h4 { font-family: var(--font-display); } /* Stat/number elements */ .stat-chip-num, .stat-item-num { letter-spacing: -0.03em; } /* LOGO MARK */ .logo-mark { width:36px;height:36px;background:linear-gradient(135deg,#0055FF,#00194C);border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:13px;letter-spacing:-0.5px; } /* TOP NAV */ .site-nav { background:white;box-shadow:0 2px 16px rgba(0,0,0,0.08);position:fixed;top:0;left:0;right:0;z-index:100; } .site-nav-inner { max-width:1280px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:68px;gap:2rem; } .site-nav-logo { display:flex;align-items:center;gap:10px;text-decoration:none; } .site-nav-logo span { font-size:1.15rem;font-weight:800;color:#1d4ed8;letter-spacing:-0.02em; } .site-nav-links { display:flex;align-items:center;gap:1.25rem; } .site-nav-links a { font-size:0.85rem;font-weight:600;color:#374151;text-decoration:none;transition:color 0.2s; } .site-nav-links a:hover,.site-nav-links a.active { color:#0055FF; } .site-nav-cta { background:#f97316;color:white;font-weight:700;font-size:0.8rem;padding:0.5rem 1.25rem;border-radius:0.45rem;text-decoration:none;transition:background 0.2s,transform 0.15s;white-space:nowrap;box-shadow:0 2px 8px rgba(249,115,22,0.35); } .site-nav-cta:hover { background:#ea6c00;transform:translateY(-1px);box-shadow:0 4px 14px rgba(249,115,22,0.45); } .site-nav-admin { display:inline-flex;align-items:center;gap:0.3rem;background:#1e293b;color:#e2e8f0;font-weight:600;font-size:0.75rem;padding:0.4rem 0.9rem;border-radius:0.4rem;text-decoration:none;border:1px solid #334155;transition:background 0.2s; } .site-nav-admin:hover { background:#0f172a;color:#60a5fa; } /* DROPDOWN */ .nav-dropdown { position:relative; } .nav-dropdown > button { background:none;border:none;cursor:pointer;font-size:0.85rem;font-weight:600;color:#374151;display:flex;align-items:center;gap:4px;padding:0;transition:color 0.2s; } .nav-dropdown:hover > button { color:#0055FF; } .nav-dropdown-panel { position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;z-index:200;display:none;min-width:520px; } .nav-dropdown:hover .nav-dropdown-panel { display:block; } .nav-dropdown-inner { background:white;border-radius:1.25rem;box-shadow:0 20px 60px rgba(0,0,0,0.15);border:1px solid #e5e7eb;padding:1.5rem; } .nav-dropdown-title { font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:#3b82f6;margin-bottom:0.75rem; } .nav-dropdown-grid { display:grid;grid-template-columns:1fr 1fr;gap:2px 1.5rem;margin-bottom:1rem; } .nav-dropdown-link { display:block;padding:0.3rem 0.5rem;border-radius:0.35rem;font-size:0.82rem;font-weight:600;color:#374151;text-decoration:none;white-space:nowrap;transition:background 0.15s,color 0.15s; } .nav-dropdown-link:hover { background:#eff6ff;color:#0055FF; } .nav-dropdown-footer { border-top:1px solid #f3f4f6;padding-top:0.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem; } .nav-dropdown-footer-links { display:flex;gap:1rem;flex-wrap:wrap; } .nav-dropdown-all { font-size:0.8rem;font-weight:700;color:#0055FF;text-decoration:none;white-space:nowrap; } .nav-dropdown-all:hover { text-decoration:underline; } /* SERVICES DROPDOWN */ .services-dropdown-grid { display:grid;grid-template-columns:1fr 1fr;gap:4px 1.5rem; } .services-dropdown-item { display:flex;align-items:flex-start;gap:8px;padding:0.5rem;border-radius:0.5rem;text-decoration:none;transition:background 0.15s; } .services-dropdown-item:hover { background:#eff6ff; } .services-dropdown-item-icon { width:28px;height:28px;min-width:28px;background:#dbeafe;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.85rem; } .services-dropdown-item-text { display:flex;flex-direction:column; } .services-dropdown-item-name { font-size:0.8rem;font-weight:700;color:#111827;line-height:1.3; } .services-dropdown-item-desc { font-size:0.7rem;color:#6b7280;line-height:1.4;margin-top:1px; } /* MOBILE MENU */ .mobile-toggle { display:none;background:none;border:none;cursor:pointer;padding:8px;color:#374151; } @media(max-width:768px) { .site-nav-links,.site-nav-cta,.site-nav-admin { display:none; } .mobile-toggle { display:flex; } .site-nav-inner { padding:0 1rem; } } .mobile-menu { display:none;background:white;border-top:1px solid #f3f4f6;padding:1rem 1.5rem 1.5rem; } .mobile-menu.open { display:block; } .mobile-menu a { display:block;padding:0.6rem 0;font-size:0.9rem;font-weight:600;color:#374151;text-decoration:none;border-bottom:1px solid #f9fafb; } .mobile-menu a:hover { color:#0055FF; } .mobile-menu { position:relative;z-index:200; } .mobile-menu-cta { display:block;margin-top:1rem;background:#f97316;color:white;text-align:center;padding:0.75rem;border-radius:0.5rem;font-weight:700;font-size:0.9rem;text-decoration:none;box-shadow:0 2px 8px rgba(249,115,22,0.3); } /* PAGE HERO */ .page-hero { background:linear-gradient(135deg,#00194C 0%,#0055FF 100%);padding:8rem 1rem 4rem;position:relative;overflow:hidden; } .page-hero::before { content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .page-hero-inner { max-width:900px;margin:0 auto;position:relative;z-index:1; } .breadcrumb { display:flex;align-items:center;gap:0.4rem;font-size:0.75rem;color:#93c5fd;margin-bottom:1rem;flex-wrap:wrap; } .breadcrumb a { color:#93c5fd;text-decoration:none; } .breadcrumb a:hover { text-decoration:underline; } .breadcrumb .sep { color:#60a5fa;opacity:0.5; } .page-hero h1 { font-size:clamp(1.6rem,5vw,3.25rem);font-weight:900;color:white;line-height:1.2;margin:0 0 1rem; } .page-hero .hero-sub { font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:#60a5fa;margin-bottom:0.75rem; } .page-hero p { font-size:0.95rem;color:#cbd5e1;line-height:1.75;max-width:700px;margin:0; } .hero-badges { display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1.5rem; } .hero-badge { display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#93c5fd;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;padding:0.3rem 0.85rem;border-radius:99px; } /* MAIN CONTENT */ .page-content { max-width:1100px;margin:0 auto;padding:3rem 1rem; } .content-grid { display:grid;grid-template-columns:1fr 340px;gap:3rem;align-items:start; } @media(max-width:900px) { .content-grid { grid-template-columns:1fr; gap:2rem; } } @media(max-width:640px) { .page-content { padding: 1.25rem 0.85rem; } } /* ── Mobile typography improvements ── */ @media(max-width:640px) { .prose h2 { font-size: 1.35rem; margin: 2rem 0 0.85rem; } .prose h3 { font-size: 1.05rem; margin: 1.5rem 0 0.75rem; } .prose p { font-size: 0.9rem; line-height: 1.8; margin-bottom: 1.35rem; } .article-body h2 { font-size: 1.35rem; margin: 2rem 0 0.85rem; } .article-body h3 { font-size: 1.05rem; } .article-body p { font-size: 0.93rem; line-height: 1.85; margin-bottom: 1.4rem; } .brand-body p { font-size: 0.9rem; line-height: 1.8; margin-bottom: 1.4rem; } .brand-main { padding: 2rem 0.85rem; } } /* SECTION LABEL */ .section-label { font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:#0055FF;margin-bottom:0.4rem; } /* PROSE */ .prose h2 { font-size:1.75rem;font-weight:800;color:#111827;margin:3rem 0 1.25rem;line-height:1.3; } .prose h3 { font-size:1.2rem;font-weight:700;color:#1e3a8a;margin:2.5rem 0 1rem; } .prose p { font-size:0.95rem;color:#374151;line-height:1.85;margin:0 0 1.75rem; } .prose p + p { margin-top:0; } .prose ul { margin:0 0 1.75rem 1.25rem; } .prose ul li { font-size:0.95rem;color:#374151;line-height:1.75;margin-bottom:0.6rem;list-style:disc; } .prose strong { color:#111827; } /* FEATURE CARDS */ .feature-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin:2rem 0; } .feature-card { background:white;border-radius:1rem;padding:1.75rem;box-shadow:0 4px 24px rgba(0,0,0,0.07);border-left:4px solid #0055FF;transition:transform 0.2s,box-shadow 0.2s; } .feature-card:hover { transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,85,255,0.12); } .feature-card-icon { width:48px;height:48px;background:#eff6ff;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.3rem; } .feature-card h3 { font-size:1rem;font-weight:700;color:#111827;margin:0 0 0.5rem; } .feature-card p { font-size:0.85rem;color:#6b7280;line-height:1.6;margin:0; } @media(max-width:640px) { .feature-grid { grid-template-columns: 1fr; } .feature-card { padding: 1.25rem; } } /* PROCESS STEPS */ .steps-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin:2rem 0; } .step-card { background:white;border-radius:1rem;padding:1.5rem;box-shadow:0 2px 16px rgba(0,0,0,0.06);text-align:center; } .step-num { width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#0055FF,#00194C);color:white;font-weight:900;font-size:1.1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem; } .step-card h4 { font-size:0.95rem;font-weight:700;color:#111827;margin:0 0 0.5rem; } .step-card p { font-size:0.82rem;color:#6b7280;line-height:1.6;margin:0; } @media(max-width:640px) { .steps-grid { grid-template-columns: 1fr; } .step-card { padding: 1.25rem; } } /* SIDEBAR */ .sidebar { position:sticky;top:90px; } .sidebar-card { background:white;border-radius:1rem;padding:1.75rem;box-shadow:0 4px 24px rgba(0,0,0,0.08);margin-bottom:1.25rem; } .sidebar-card h3 { font-size:1rem;font-weight:800;color:#111827;margin:0 0 1rem;padding-bottom:0.75rem;border-bottom:2px solid #eff6ff; } .sidebar-card ul { margin:0;padding:0;list-style:none; } .sidebar-card ul li { padding:0.5rem 0;border-bottom:1px solid #f9fafb; } .sidebar-card ul li:last-child { border-bottom:none; } .sidebar-card ul li a { font-size:0.85rem;font-weight:600;color:#374151;text-decoration:none;display:flex;align-items:center;gap:0.5rem;transition:color 0.2s; } .sidebar-card ul li a:hover { color:#0055FF; } .sidebar-cta { background:linear-gradient(135deg,#0055FF,#00194C);border-radius:1rem;padding:1.75rem;text-align:center; } .sidebar-cta h3 { font-size:1rem;font-weight:800;color:white;margin:0 0 0.75rem; } .sidebar-cta p { font-size:0.82rem;color:#bfdbfe;line-height:1.6;margin:0 0 1.25rem; } .sidebar-cta a { display:block;background:white;color:#0055FF;font-weight:700;font-size:0.85rem;padding:0.65rem 1rem;border-radius:0.5rem;text-decoration:none;transition:background 0.2s; } .sidebar-cta a:hover { background:#eff6ff; } /* CTA BANNER */ .cta-banner { background:linear-gradient(135deg,#0055FF,#00194C);border-radius:1.5rem;padding:3rem 2rem;text-align:center;margin:3rem 0; } .cta-banner h2 { font-size:1.75rem;font-weight:800;color:white;margin:0 0 0.75rem; } .cta-banner p { font-size:0.95rem;color:#bfdbfe;max-width:540px;margin:0 auto 1.5rem;line-height:1.7; } .cta-banner a { display:inline-block;background:white;color:#0055FF;font-weight:700;padding:0.75rem 2rem;border-radius:0.5rem;text-decoration:none;transition:background 0.2s; } .cta-banner a:hover { background:#eff6ff; } @media(max-width:640px) { .cta-banner { padding: 2rem 1.25rem; } .cta-banner h2 { font-size: 1.4rem; } .cta-banner p { font-size: 0.88rem; } } /* CONTACT FORM */ .contact-form-wrap { background:white;border-radius:1.25rem;padding:2.5rem;box-shadow:0 8px 40px rgba(0,0,0,0.1); } .contact-form-wrap h3 { font-size:1.25rem;font-weight:800;color:#111827;margin:0 0 0.5rem; } .contact-form-wrap p { font-size:0.85rem;color:#6b7280;margin:0 0 1.5rem; } .form-field { margin-bottom:1.25rem; } .form-field label { display:block;font-size:0.8rem;font-weight:700;color:#374151;margin-bottom:0.4rem; } .form-field input,.form-field textarea,.form-field select { width:100%;padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:0.5rem;font-size:0.9rem;outline:none;transition:border-color 0.2s;background:#f9fafb;font-family:inherit; } .form-field input:focus,.form-field textarea:focus,.form-field select:focus { border-color:#0055FF;background:white; } .form-submit { width:100%;background:#0055FF;color:white;font-weight:700;font-size:0.95rem;padding:0.85rem;border-radius:0.5rem;border:none;cursor:pointer;transition:background 0.2s; } .form-submit:hover { background:#0044cc; } .form-submit:disabled { background:#93c5fd;cursor:not-allowed; } @media(max-width:640px) { .contact-form-wrap { padding: 1.5rem 1rem; } } /* BLOG */ .blog-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1.25rem; } .blog-card { background:white;border-radius:1rem;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.07);transition:transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column; } .blog-card:hover { transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,85,255,0.12); } .blog-card-thumb { width:100%;aspect-ratio:16/9;object-fit:cover;display:flex;align-items:center;justify-content:center; } .blog-card-body { padding:1.1rem;flex:1;display:flex;flex-direction:column; } .blog-card-badge { display:inline-block;background:#eff6ff;color:#0055FF;font-size:0.68rem;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:99px;margin-bottom:0.6rem; } .blog-card-title { font-size:1rem;font-weight:700;color:#111827;margin:0 0 0.6rem;line-height:1.4; } .blog-card-title a { color:inherit;text-decoration:none; } .blog-card-title a:hover { color:#0055FF; } .blog-card-excerpt { font-size:0.82rem;color:#6b7280;line-height:1.65;flex:1; } .blog-card-meta { font-size:0.75rem;color:#9ca3af;margin-top:0.75rem;display:flex;gap:1rem;align-items:center; } /* ARTICLE */ .article-header { max-width:820px; } .article-meta { display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1.25rem; } .article-meta span { font-size:0.78rem;color:#94a3b8;display:flex;align-items:center;gap:0.3rem; } .article-body { max-width:820px; } .article-body h2 { font-size:1.6rem;font-weight:800;color:#111827;margin:3rem 0 1.25rem; } .article-body h3 { font-size:1.2rem;font-weight:700;color:#1e3a8a;margin:2.5rem 0 1rem; } .article-body p { font-size:1rem;color:#374151;line-height:1.9;margin:0 0 1.85rem; } .article-body p + p { margin-top:0; } .article-body ul,.article-body ol { margin:0 0 1.75rem 1.5rem; } .article-body li { font-size:1rem;color:#374151;line-height:1.8;margin-bottom:0.6rem; } .article-body blockquote { border-left:4px solid #0055FF;padding:1rem 1.5rem;background:#eff6ff;border-radius:0 0.75rem 0.75rem 0;margin:2rem 0; } .article-body blockquote p { color:#1e3a8a;font-style:italic;margin:0; } .article-tag { display:inline-block;background:#f3f4f6;color:#374151;font-size:0.75rem;font-weight:600;padding:0.25rem 0.75rem;border-radius:99px;margin-right:0.5rem;text-decoration:none; } .article-tag:hover { background:#eff6ff;color:#0055FF; } /* TEAM / STATS */ .stats-row { display:flex;gap:2rem;flex-wrap:wrap;margin:2rem 0; } .stat-item { text-align:center; } .stat-item-num { font-size:2.5rem;font-weight:900;color:#0055FF;line-height:1; } .stat-item-label { font-size:0.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:0.05em;margin-top:4px; } /* FOOTER */ .site-footer { background:#111827;color:#9ca3af;padding:2.5rem 1rem 1.25rem; } .site-footer-inner { max-width:1280px;margin:0 auto; } .site-footer-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:2rem;margin-bottom:2rem; } .site-footer h4 { font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:white;margin:0 0 1rem; } .site-footer ul { margin:0;padding:0;list-style:none; } .site-footer ul li { margin-bottom:0.5rem; } .site-footer ul li a { font-size:0.85rem;color:#9ca3af;text-decoration:none;transition:color 0.2s; } .site-footer ul li a:hover { color:white; } .site-footer-bottom { border-top:1px solid #1f2937;padding-top:1.25rem;display:flex;flex-direction:column;gap:0.5rem;align-items:center;text-align:center; } .site-footer-bottom p { font-size:0.8rem;margin:0; } /* Snappy Fade-In Animation */ .fade-in { opacity: 0; transform: translateY(8px); transition: opacity 0.22s ease-out, transform 0.22s ease-out; will-change: opacity, transform; animation: fadeInFallback 0.35s ease-out 0.3s forwards; } .fade-in.visible { opacity: 1; transform: translateY(0); animation: none; will-change: auto; } @keyframes fadeInFallback { to { opacity: 1; transform: translateY(0); } } /* SCROLL TOP */ #scroll-top { position:fixed;bottom:24px;right:24px;width:44px;height:44px;background:#0055FF;color:white;border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,85,255,0.4);opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.2s;display:flex;align-items:center;justify-content:center;z-index:100; } #scroll-top.visible { opacity:1;pointer-events:auto; } #scroll-top:hover { transform:scale(1.1); } /* ── RICH CONTENT COMPONENTS ── */ /* Pull Quote */ .pull-quote { border-left:5px solid #0055FF;padding:1.5rem 2rem;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-radius:0 1rem 1rem 0;margin:2.5rem 0;position:relative; } .pull-quote::before { content:'\201C';position:absolute;top:-0.5rem;left:1rem;font-size:5rem;color:#0055FF;opacity:0.15;font-family:Georgia,serif;line-height:1; } .pull-quote p { font-size:1.1rem;font-weight:600;color:#1e3a8a;line-height:1.7;margin:0;font-style:italic; } .pull-quote cite { display:block;font-size:0.8rem;color:#3b82f6;font-weight:700;margin-top:0.75rem;font-style:normal;text-transform:uppercase;letter-spacing:0.05em; } @media(max-width:640px) { .pull-quote { padding: 1rem 1.25rem; margin: 1.5rem 0; } .pull-quote::before { font-size: 3.5rem; top: -0.25rem; left: 0.5rem; } .pull-quote p { font-size: 0.95rem; } } /* Highlight Box */ .highlight-box { background:white;border-radius:1.25rem;padding:2rem;box-shadow:0 4px 30px rgba(0,85,255,0.1);border:1px solid #e0eaff;margin:2.5rem 0; } .highlight-box-header { display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:2px solid #eff6ff; } .highlight-box-icon { width:44px;height:44px;background:linear-gradient(135deg,#0055FF,#00194C);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0; } .highlight-box-title { font-size:1rem;font-weight:800;color:#111827; } .highlight-box ul { margin:0;padding:0;list-style:none; } .highlight-box ul li { display:flex;align-items:flex-start;gap:0.75rem;padding:0.6rem 0;border-bottom:1px solid #f3f4f6;font-size:0.9rem;color:#374151;line-height:1.6; } .highlight-box ul li:last-child { border-bottom:none; } .highlight-box ul li::before { content:'✓';color:#0055FF;font-weight:900;font-size:0.85rem;flex-shrink:0;margin-top:2px; } @media(max-width:640px) { .highlight-box { padding: 1.25rem 1rem; margin: 1.5rem 0; } } /* Numbered Callout */ .numbered-callout { display:flex;gap:1.5rem;align-items:flex-start;padding:1.5rem;background:white;border-radius:1rem;box-shadow:0 2px 16px rgba(0,0,0,0.06);margin-bottom:1rem; } .numbered-callout-num { width:52px;height:52px;min-width:52px;background:linear-gradient(135deg,#0055FF,#00194C);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:900; } .numbered-callout-body h4 { font-size:1rem;font-weight:800;color:#111827;margin:0 0 0.4rem; } .numbered-callout-body p { font-size:0.88rem;color:#6b7280;line-height:1.65;margin:0; } @media(max-width:640px) { .numbered-callout { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem 1rem; } .numbered-callout-num { width: 44px; height: 44px; min-width: 44px; font-size: 1.1rem; } } /* Stat Chips Row */ .stat-chips { display:flex;flex-wrap:wrap;gap:0.75rem;margin:2rem 0; } .stat-chip { background:white;border:2px solid #e0eaff;border-radius:0.75rem;padding:0.85rem 1.25rem;text-align:center;flex:1;min-width:120px;box-shadow:0 2px 12px rgba(0,85,255,0.07);transition:border-color 0.2s,transform 0.2s; } .stat-chip:hover { border-color:#0055FF;transform:translateY(-2px); } .stat-chip-num { font-size:1.75rem;font-weight:900;color:#0055FF;line-height:1; } .stat-chip-label { font-size:0.72rem;color:#6b7280;text-transform:uppercase;letter-spacing:0.06em;margin-top:4px; } @media(max-width:640px) { .stat-chips { grid-template-columns: repeat(2, 1fr); display: grid; gap: 0.5rem; } .stat-chip { min-width: 0; padding: 0.75rem 0.5rem; } .stat-chip-num { font-size: 1.4rem; } .stat-chip-label { font-size: 0.65rem; } } /* Info Strip */ .info-strip { display:flex;gap:0;border-radius:1rem;overflow:hidden;margin:2.5rem 0;box-shadow:0 4px 20px rgba(0,0,0,0.08); } .info-strip-item { flex:1;padding:1.5rem;background:white;border-right:1px solid #f3f4f6;text-align:center; } .info-strip-item:last-child { border-right:none; } .info-strip-item:nth-child(odd) { background:#f8faff; } .info-strip-icon { font-size:1.75rem;margin-bottom:0.5rem; } .info-strip-label { font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;margin-bottom:0.25rem; } .info-strip-val { font-size:0.95rem;font-weight:700;color:#111827; } @media(max-width:640px) { .info-strip { flex-direction:column; } .info-strip-item { border-right:none;border-bottom:1px solid #f3f4f6; padding: 1.25rem 1rem; } } /* Section Divider */ .section-divider { display:flex;align-items:center;gap:1rem;margin:3rem 0; } .section-divider::before,.section-divider::after { content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,#e0eaff); } .section-divider::after { background:linear-gradient(90deg,#e0eaff,transparent); } .section-divider span { font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:#0055FF;white-space:nowrap; } /* TOC (Table of Contents) */ .toc { background:#f8faff;border:1px solid #e0eaff;border-radius:1rem;padding:1.5rem;margin:2rem 0; } .toc-title { font-size:0.75rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:#0055FF;margin-bottom:1rem; } .toc ol { margin:0;padding-left:1.25rem; } .toc ol li { font-size:0.88rem;color:#374151;line-height:1.7;margin-bottom:0.2rem; } .toc ol li a { color:#374151;text-decoration:none;transition:color 0.2s; } .toc ol li a:hover { color:#0055FF; } /* Warning / Note Box */ .note-box { display:flex;gap:1rem;padding:1.25rem 1.5rem;background:#fffbeb;border:1px solid #fde68a;border-radius:0.75rem;margin:2rem 0; } .note-box-icon { font-size:1.25rem;flex-shrink:0;margin-top:2px; } .note-box p { font-size:0.88rem;color:#92400e;line-height:1.65;margin:0; } .note-box.blue { background:#eff6ff;border-color:#bfdbfe; } .note-box.blue p { color:#1e3a8a; } .note-box.green { background:#f0fdf4;border-color:#bbf7d0; } .note-box.green p { color:#14532d; } /* Two-col text grid */ .text-cols { display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0; } @media(max-width:640px) { .text-cols { grid-template-columns:1fr; gap:1.25rem; } } .text-cols-item h4 { font-size:0.95rem;font-weight:800;color:#111827;margin:0 0 0.5rem;display:flex;align-items:center;gap:0.5rem; } .text-cols-item p { font-size:0.88rem;color:#6b7280;line-height:1.65;margin:0; } /* Timeline */ .timeline { margin:2rem 0; } .timeline-item { display:flex;gap:1.5rem;margin-bottom:1.5rem;position:relative; } .timeline-item::before { content:'';position:absolute;left:20px;top:44px;bottom:-1.5rem;width:2px;background:#e0eaff; } .timeline-item:last-child::before { display:none; } .timeline-dot { width:42px;height:42px;min-width:42px;background:linear-gradient(135deg,#0055FF,#00194C);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.85rem;font-weight:900;flex-shrink:0; } .timeline-body { padding-top:0.5rem; } .timeline-body h4 { font-size:0.95rem;font-weight:800;color:#111827;margin:0 0 0.35rem; } .timeline-body p { font-size:0.87rem;color:#6b7280;line-height:1.65;margin:0; } @media(max-width:640px) { .timeline-item { gap: 1rem; } .timeline-dot { width: 36px; height: 36px; min-width: 36px; font-size: 0.75rem; } .timeline-item::before { left: 17px; top: 36px; } } /* Comparison Table Responsive */ .compare-table { width:100%;border-collapse:collapse;margin:2rem 0;border-radius:1rem;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.07); } .compare-table th { background:#00194C;color:white;padding:1rem 1.25rem;font-size:0.82rem;font-weight:700;text-align:left;text-transform:uppercase;letter-spacing:0.05em; } .compare-table td { padding:0.9rem 1.25rem;font-size:0.88rem;color:#374151;border-bottom:1px solid #f3f4f6;background:white; } .compare-table tr:nth-child(even) td { background:#f8faff; } .compare-table tr:hover td { background:#eff6ff; } .compare-table td:first-child { font-weight:700;color:#111827; } .td-yes { color:#16a34a;font-weight:700; } .td-no { color:#dc2626;font-weight:700; } @media(max-width:768px) { .compare-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Hero accent line */ .page-hero-accent { display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.15); } /* Mobile hero centering */ @media(max-width:768px) { .page-hero { padding:6rem 1rem 3rem;text-align:center; } .page-hero h1 { font-size:clamp(1.75rem,7vw,2.5rem); } .page-hero p { margin-left:auto;margin-right:auto; font-size: 0.95rem; } .breadcrumb { justify-content:center; } .hero-badges { justify-content:center; } .page-hero-accent { justify-content:center; gap: 1rem; } } .page-hero-accent-item { display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:rgba(255,255,255,0.8); } .page-hero-accent-item strong { color:white;font-size:1.1rem; } /* ── LEGAL COMPANY CARD (next to forms) ── */ .legal-card-col { width: 100%; } .company-legal-card { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); border-radius: 1.25rem; padding: 1.75rem; box-shadow: 0 8px 40px rgba(0,0,0,0.18); border: 1px solid rgba(59,130,246,0.2); color: white; font-family: var(--font-body); } .legal-card-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; } .legal-card-icon { width: 44px; height: 44px; min-width: 44px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #60a5fa; } .legal-card-title { font-size: 0.95rem; font-weight: 800; color: white; font-family: var(--font-display); line-height: 1.2; margin: 0; text-transform: uppercase; letter-spacing: 0.01em; } .legal-card-subtitle { font-size: 0.68rem; color: #60a5fa; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-top: 2px; } .legal-card-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 1rem 0; } .legal-card-reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.6rem; } .legal-card-reg-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.5rem 0.4rem; text-align: center; } .legal-card-reg-item span:first-child { display: block; font-size: 0.62rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .legal-card-reg-item strong { display: block; font-size: 0.72rem; color: #e2e8f0; font-weight: 800; margin-top: 2px; word-break: break-all; } .legal-card-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; } .legal-card-row:last-of-type { margin-bottom: 0; } .legal-card-row-icon { color: #60a5fa; font-size: 1.15rem; margin-top: 1px; flex-shrink: 0; } .legal-card-row-label { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; font-weight: 700; font-family: var(--font-display); } .legal-card-row-value { font-size: 0.8rem; color: #cbd5e1; font-weight: 600; margin-top: 2px; display: block; line-height: 1.5; } .legal-card-row-value a { color: #60a5fa; text-decoration: none; font-weight: 700; } .legal-card-row-value a:hover { color: #93c5fd; text-decoration: underline; } .legal-card-trust { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); border-radius: 0.75rem; padding: 0.85rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1rem; } .legal-card-trust-icon { color: #34d399; font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; } .legal-card-trust-title { font-size: 0.78rem; font-weight: 800; color: white; font-family: var(--font-display); margin: 0 0 2px; } .legal-card-trust-text { font-size: 0.72rem; color: #94a3b8; line-height: 1.5; margin: 0; } /* ── Contact form + legal card: EQUAL 50/50 columns ── */ .form-with-legal { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin-top: 1.5rem; } @media (max-width: 860px) { .form-with-legal { grid-template-columns: 1fr; gap: 1.5rem; } } /* Legal card col — fills its grid cell */ .legal-card-col { width: 100%; /* sticky is set per-context via JS or not at all (outside grid) */ } /* Styled contact-form-wrap matching site design */ .form-with-legal .contact-form-wrap { background: #f8faff; border: 1.5px solid #e0eaff; border-radius: 1.25rem; padding: 2.25rem 2rem; box-shadow: 0 4px 24px rgba(0,85,255,0.07); width: 100%; } @media (max-width: 640px) { .form-with-legal .contact-form-wrap { padding: 1.5rem 1rem; } } /* Form header inside .contact-form-wrap */ .contact-form-wrap .form-header-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #0055FF; margin-bottom: 0.3rem; } .contact-form-wrap .form-header-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: #111827; margin: 0 0 0.35rem; line-height: 1.25; } .contact-form-wrap .form-header-sub { font-size: 0.82rem; color: #6b7280; margin: 0 0 1.5rem; line-height: 1.6; } /* Styled form fields */ .form-with-legal .form-field label { font-size: 0.78rem; font-weight: 700; color: #374151; margin-bottom: 0.4rem; display: block; } .form-with-legal .form-field input, .form-with-legal .form-field textarea, .form-with-legal .form-field select { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #d1d5db; border-radius: 0.6rem; font-size: 0.9rem; background: white; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: var(--font-body); color: #111827; } .form-with-legal .form-field input:focus, .form-with-legal .form-field textarea:focus, .form-with-legal .form-field select:focus { border-color: #0055FF; box-shadow: 0 0 0 3px rgba(0,85,255,0.08); } .form-with-legal .form-submit { width: 100%; background: linear-gradient(135deg, #0055FF, #00194C); color: white; font-weight: 700; font-size: 0.95rem; padding: 0.9rem; border-radius: 0.6rem; border: none; cursor: pointer; transition: opacity 0.2s, transform 0.15s; font-family: var(--font-display); letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(0,85,255,0.25); } .form-with-legal .form-submit:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,85,255,0.35); } .form-with-legal .form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Make company-legal-card fill its sticky col */ .company-legal-card { width: 100%; } /* ── Sidebar sticky: stops at CTA banner ── */ .sidebar { position: sticky; top: 90px; align-self: start; } /* ── FLOATING CONTACT WIDGET ── */ #float-widget { position:fixed !important;bottom:80px !important;right:16px !important;z-index:9999 !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:10px !important;pointer-events:none !important; } /* Trigger button */ #float-widget-btn { width:52px;height:52px;border-radius:50%;background:#f97316;color:white;border:none;cursor:pointer;box-shadow:0 6px 24px rgba(249,115,22,0.5);display:flex;align-items:center;justify-content:center;transition:transform 0.2s,box-shadow 0.2s;position:relative;pointer-events:auto !important;z-index:9999 !important; } #float-widget-btn:hover { transform:scale(1.08);box-shadow:0 8px 32px rgba(249,115,22,0.6); } #float-widget-btn svg { transition:transform 0.3s; } #float-widget-btn.open svg.icon-chat { display:none; } #float-widget-btn.open svg.icon-close { display:block; } #float-widget-btn svg.icon-close { display:none; } #float-widget-pulse { position:absolute;top:0;right:0;width:14px;height:14px;background:#22c55e;border:2px solid white;border-radius:50%; } #float-widget-pulse::after { content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(34,197,94,0.4);animation:pulse-ring 1.6s ease-out infinite; } @keyframes pulse-ring { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(2);opacity:0} } /* Panel */ #float-panel { width:300px;background:white;border-radius:1.25rem;box-shadow:0 20px 60px rgba(0,0,0,0.18);overflow:hidden;transform:scale(0.85) translateY(16px);transform-origin:bottom right;opacity:0;pointer-events:none;transition:transform 0.25s cubic-bezier(.34,1.56,.64,1),opacity 0.2s;z-index:9999 !important; } #float-panel.open { transform:scale(1) translateY(0);opacity:1;pointer-events:auto !important; } #float-panel-head { background:linear-gradient(135deg,#f97316,#ea580c);padding:1.25rem 1.5rem; } #float-panel-head h3 { margin:0 0 0.2rem;font-size:1rem;font-weight:800;color:white; } #float-panel-head p { margin:0;font-size:0.78rem;color:rgba(255,255,255,0.85); } #float-panel-body { padding:1.25rem 1.5rem 1.5rem; } .fw-field { margin-bottom:0.9rem; } .fw-field label { display:block;font-size:0.75rem;font-weight:700;color:#374151;margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:0.04em; } .fw-field input,.fw-field textarea,.fw-field select { width:100%;padding:0.6rem 0.85rem;border:2px solid #e5e7eb;border-radius:0.5rem;font-size:0.85rem;outline:none;transition:border-color 0.2s;font-family:inherit;background:#f9fafb; } .fw-field input:focus,.fw-field textarea:focus,.fw-field select:focus { border-color:#f97316;background:white; } .fw-field textarea { resize:none; } #fw-submit { width:100%;background:#f97316;color:white;font-weight:700;font-size:0.9rem;padding:0.75rem;border-radius:0.5rem;border:none;cursor:pointer;transition:background 0.2s,transform 0.15s;box-shadow:0 2px 8px rgba(249,115,22,0.3); } #fw-submit:hover { background:#ea6c00;transform:translateY(-1px); } #fw-submit:disabled { background:#fdba74;cursor:not-allowed;transform:none; } #fw-status { font-size:0.82rem;text-align:center;margin-top:0.6rem;min-height:1.2em; } #fw-status.success { color:#16a34a; } #fw-status.error { color:#dc2626; } @media(max-width:420px) { #float-panel { width:calc(100vw - 32px); } } /* ══════════════════════════════════════════ MOBILE RESPONSIVE — Inner Pages ══════════════════════════════════════════ */ @media (max-width: 768px) { /* Hero */ .page-hero { padding: 5.5rem 1rem 2.5rem; } .page-hero h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.2; } .page-hero p { font-size: 0.9rem; } .hero-badges { gap: 0.5rem; } .hero-badge { font-size: 0.65rem; padding: 0.25rem 0.65rem; } /* Content */ .page-content { padding: 1.5rem 1rem; } .content-grid { grid-template-columns: 1fr; gap: 1.5rem; } .sidebar { position: static; top: auto; } /* Form + legal card: stack on mobile */ .form-with-legal { grid-template-columns: 1fr; gap: 1.5rem; } .form-with-legal .contact-form-wrap { padding: 1.25rem 1rem; } .company-legal-card { padding: 1.25rem; } .legal-card-reg-grid { grid-template-columns: repeat(3, 1fr); gap: 0.35rem; } .legal-card-reg-item strong { font-size: 0.65rem; } /* Article */ .article-body h2 { font-size: 1.3rem; margin: 2rem 0 0.85rem; } .article-body h3 { font-size: 1.05rem; margin: 1.5rem 0 0.75rem; } .article-body p { font-size: 0.93rem; line-height: 1.85; } .article-body ul, .article-body ol { margin-left: 1rem; } .article-body li { font-size: 0.92rem; } .article-body blockquote { padding: 0.85rem 1rem; margin: 1.25rem 0; } /* Prose */ .prose h2 { font-size: 1.3rem; margin: 2rem 0 0.85rem; } .prose h3 { font-size: 1.05rem; } .prose p { font-size: 0.9rem; } /* Sidebar */ .sidebar-card { padding: 1.25rem; } .sidebar-cta { padding: 1.25rem; } /* CTA Banner */ .cta-banner { padding: 1.75rem 1rem; border-radius: 1rem; } .cta-banner h2 { font-size: 1.3rem; } .cta-banner p { font-size: 0.85rem; } /* Stats */ .stats-row { gap: 1.25rem; justify-content: center; } .stat-item-num { font-size: 2rem; } /* Feature cards */ .feature-grid { grid-template-columns: 1fr; } .feature-card { padding: 1.1rem; } /* Steps */ .steps-grid { grid-template-columns: 1fr; } /* Float widget — smaller and lower on mobile */ #float-widget { bottom: 16px !important; right: 12px !important; } #float-widget-btn { width: 48px !important; height: 48px !important; } #float-panel { width: calc(100vw - 24px) !important; max-width: 340px; } /* Blog grid */ .blog-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .page-hero { padding: 5rem 0.85rem 2rem; } .page-hero h1 { font-size: clamp(1.35rem, 7.5vw, 1.9rem); } .breadcrumb { font-size: 0.7rem; } .stat-chips { grid-template-columns: repeat(2, 1fr); } .info-strip { flex-direction: column; } .info-strip-item { border-right: none; border-bottom: 1px solid #f3f4f6; } .compare-table th, .compare-table td { padding: 0.65rem 0.75rem; font-size: 0.8rem; } }