/* ============================================================ CallGuard AI · Landing page Sage-green B2B SaaS theme. No JS dependencies. ============================================================ */ /* Self-hosted Inter Variable. font-display: swap means the system fallback paints first, then we swap to Inter once the woff2 lands. Eliminates the 1.5s render-block we used to inherit from rsms.me. */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable.woff2') format('woff2-variations'), url('/fonts/InterVariable.woff2') format('woff2'); } :root { /* Brand colours */ --primary: #4a9e6e; --primary-hover: #3d8a5e; --primary-dark: #1f5a37; /* darker for AA contrast on light backgrounds */ --primary-light: #e8f0e8; --primary-50: #f1f7f2; /* Semantic */ --fail: #c0392b; --fail-bg: #fde8e8; /* Neutrals */ --page-bg: #f8faf8; --section-alt: #ffffff; --card-bg: #ffffff; --border: #e2e8e2; --border-light: #eef2ee; --text-primary: #1a2e1a; --text-secondary: #3d4a3d; --text-cell: #4a5e4a; /* darker for AA contrast */ --text-muted: #66776a; /* darker for AA contrast (was #8a9e8a, ratio 3.0) */ /* Dark accent (footer / coming-next) */ --dark-bg: #1a2e1a; --dark-bg-2: #2d4a30; /* Layout tokens */ --container-max: 1180px; --container-pad: 24px; --radius-card: 14px; --radius-btn: 8px; --shadow-card: 0 1px 3px rgba(26, 46, 26, 0.04), 0 1px 2px rgba(26, 46, 26, 0.06); --shadow-card-hover: 0 4px 12px rgba(26, 46, 26, 0.08), 0 2px 4px rgba(26, 46, 26, 0.06); /* Translucent sticky-nav backdrop (sits over the blurred page) */ --nav-bg: rgba(248, 250, 248, 0.85); color-scheme: light; } /* ============================================================ Dark theme. Overrides the brand/neutral tokens above; everything downstream reads the variables so no other rule needs changing. Activated by data-theme="dark" on , set before first paint by the inline script in each page's . The theme switch in the nav persists the choice in localStorage (key: cg-theme). ============================================================ */ :root[data-theme="dark"] { /* Brand */ --primary: #57ab7a; --primary-hover: #6abb8a; --primary-dark: #8fd3a8; /* lighter so it reads on dark surfaces */ --primary-light: #1f2e24; --primary-50: #16201a; /* Semantic */ --fail: #f0726a; --fail-bg: #3a1d1b; /* Neutrals */ --page-bg: #0f1512; --section-alt: #141c17; --card-bg: #18211b; --border: #2b3630; --border-light: #222b25; --text-primary: #e6efe8; --text-secondary: #b3c2b6; --text-cell: #c4d2c7; --text-muted: #8a9c8d; /* Dark accent (footer / CTA band) — pushed slightly below page level */ --dark-bg: #0b110d; --dark-bg-2: #16241a; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --nav-bg: rgba(15, 21, 18, 0.82); color-scheme: dark; } /* Reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul { list-style: none; padding: 0; margin: 0; } /* Base */ html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; } body { font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; color: var(--text-primary); background: var(--page-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Layout helpers */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } /* Typography */ h1, h2, h3, h4, h5 { color: var(--text-primary); font-weight: 700; line-height: 1.2; margin: 0; } .accent { color: var(--primary); } /* ============================================================ Nav ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border-light); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; /* .container caps at 1180px, so the nav has a fixed ~1132px to work with no matter how wide the screen is — a bigger monitor buys it nothing. With eight links the old 24px left it a few pixels short of fitting. */ gap: 16px; } .brand { display: inline-flex; align-items: center; } /* Lockup logo (icon + outlined wordmark). Colour on light theme, white on dark. */ .brand-logo { height: 30px; width: auto; display: block; } .brand-logo--dark { display: none; } :root[data-theme="dark"] .brand-logo--light { display: none; } :root[data-theme="dark"] .brand-logo--dark { display: block; } .nav-links { display: flex; align-items: center; gap: 20px; } .nav-links a { font-size: 14px; color: var(--text-cell); font-weight: 500; transition: color 0.2s ease; /* Eight items plus Log in, the CTA and the theme toggle come close to the 1180px container. Without this a tight fit breaks inside a label — "How it / works" — which reads as a broken nav rather than a full one. */ white-space: nowrap; } .nav-links a:hover { color: var(--text-primary); } .nav-login { font-size: 14px; font-weight: 600; color: var(--text-secondary); padding: 8px 14px; border-radius: var(--radius-btn); transition: color 0.15s ease, background 0.15s ease; } .nav-login:hover { color: var(--primary-dark); background: var(--primary-50); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600; letter-spacing: -0.1px; border: 1px solid transparent; transition: all 0.15s ease; white-space: nowrap; cursor: pointer; } .btn-primary { background: #2d6e4a; /* darker for AA contrast against white text */ color: white; box-shadow: 0 1px 2px rgba(26, 46, 26, 0.08); } .btn-primary:hover { background: #1f5a37; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(45, 110, 74, 0.3); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); } .btn-light { background: var(--card-bg); color: var(--text-primary); } .btn-light:hover { background: var(--primary-light); color: var(--primary-dark); } .btn-lg { padding: 14px 24px; font-size: 15px; border-radius: 10px; } /* ============================================================ Hero ============================================================ */ .hero { padding: 80px 0 100px; background: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(74, 158, 110, 0.10), transparent 70%), var(--page-bg); text-align: center; } .eyebrow { display: inline-block; background: var(--primary-light); color: var(--primary-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 24px; } .hero-headline { font-size: clamp(36px, 6vw, 64px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 20px; } .hero-sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-cell); max-width: 720px; margin: 0 auto 36px; line-height: 1.6; } .hero-sub strong { color: var(--text-primary); font-weight: 600; } .hero-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; } .hero-trust { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 14px 22px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-card); } .trust-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; } .trust-items { font-size: 14px; color: var(--text-secondary); font-weight: 500; } /* ============================================================ Sections ============================================================ */ .section { padding: 90px 0; } .section-alt { background: var(--section-alt); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } .section-tag { display: inline-block; background: var(--primary-light); color: var(--primary-dark); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; } .section-h2 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 16px; max-width: 800px; } .lead { font-size: 17px; color: var(--text-cell); line-height: 1.65; max-width: 740px; margin: 0 0 48px; } /* ============================================================ Stat row ============================================================ */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; } .stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); } .stat-num { font-size: 44px; font-weight: 800; color: var(--primary); letter-spacing: -1.5px; line-height: 1; margin-bottom: 12px; font-variant-numeric: tabular-nums; } .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 8px; } .stat-sub { font-size: 14px; color: var(--text-cell); line-height: 1.5; } /* ============================================================ Problem grid ============================================================ */ .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; } .problem-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 28px 24px; box-shadow: var(--shadow-card); } .problem-card h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 16px; } .problem-fail { border-left: 4px solid var(--fail); } .problem-fail h4 { color: var(--fail); } .problem-win { border-left: 4px solid var(--primary); } .problem-win h4 { color: var(--primary); } .problem-card li { font-size: 14.5px; color: var(--text-secondary); padding: 6px 0 6px 26px; position: relative; line-height: 1.55; } .problem-card li::before { position: absolute; left: 0; top: 6px; font-weight: 800; font-size: 13px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; } .problem-fail li::before { content: '✕'; color: var(--fail); background: var(--fail-bg); } .problem-win li::before { content: '✓'; color: var(--primary); background: var(--primary-light); } /* ============================================================ How it works (steps) ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); position: relative; } .step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; margin-bottom: 18px; } .step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.2px; } .step p { font-size: 14.5px; color: var(--text-cell); margin: 0; line-height: 1.6; } .step p strong { color: var(--text-primary); font-weight: 600; } /* ============================================================ Feature grid (Live & Embedded, AI Learning) ============================================================ */ .section-feature { background: linear-gradient(180deg, var(--page-bg) 0%, var(--primary-50) 100%); } .feature-grid { display: grid; gap: 16px; } .feature-grid-3 { grid-template-columns: repeat(3, 1fr); } .feature-grid-2 { grid-template-columns: repeat(2, 1fr); } .feature { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .feature-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-light); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feature-icon svg { width: 20px; height: 20px; } .feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.2px; } .feature p { font-size: 14px; color: var(--text-cell); margin: 0; line-height: 1.6; } /* ============================================================ Use cases ============================================================ */ .usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .usecase-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px 28px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .usecase-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary-dark); /* AA contrast */ margin-bottom: 8px; } .usecase-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 14px; } .usecase-card p { font-size: 14.5px; color: var(--text-cell); margin: 0 0 20px; line-height: 1.6; } .usecase-list { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border-light); } .usecase-list li { font-size: 13.5px; color: var(--text-secondary); padding: 4px 0 4px 22px; position: relative; } .usecase-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--primary); border-radius: 1px; } .usecase-link { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--primary-dark); transition: color 0.15s ease, transform 0.15s ease; } .usecase-link:hover { color: var(--primary); transform: translateX(2px); } /* ============================================================ Comparison table (alternatives pages) ============================================================ */ .compare-table { margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--card-bg); box-shadow: var(--shadow-card); } .compare-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .compare-table th { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; text-align: left; padding: 14px 18px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border); } .compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); vertical-align: top; } .compare-table tr:last-child td { border-bottom: none; } .compare-table td:first-child { font-weight: 600; color: var(--text-primary); background: rgba(74, 158, 110, 0.025); } .compare-table td:last-child { background: rgba(74, 158, 110, 0.05); font-weight: 500; color: var(--primary-dark); } @media (max-width: 640px) { .compare-table { font-size: 13px; } .compare-table th, .compare-table td { padding: 10px 12px; } } /* ============================================================ Blog listing + article pages ============================================================ */ .blog-hero { padding: 72px 0 48px; background: radial-gradient(ellipse 800px 380px at 50% -100px, rgba(74, 158, 110, 0.10), transparent 70%), var(--page-bg); } .blog-hero h1 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; max-width: 800px; margin-bottom: 14px; } .blog-hero-sub { font-size: 17px; color: var(--text-cell); line-height: 1.65; max-width: 720px; margin: 0; } .crumb { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; font-weight: 600; letter-spacing: 0.2px; } .crumb a { color: var(--text-cell); } .crumb a:hover { color: var(--primary); } .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .post-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; overflow: hidden; } .post-card:hover { border-color: var(--primary); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .post-card-link { display: block; padding: 28px; height: 100%; } .post-card-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 14px; } .post-card-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.3; color: var(--text-primary); margin: 0 0 12px; } .post-card-summary { font-size: 14.5px; color: var(--text-cell); line-height: 1.6; margin: 0 0 18px; } .post-card-meta { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; font-weight: 500; } .post-card-dot { color: var(--primary); } .article { padding-bottom: 60px; } .article-hero { padding: 56px 0 36px; border-bottom: 1px solid var(--border-light); background: var(--page-bg); } .article-hero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.18; max-width: 780px; text-wrap: balance; margin-bottom: 14px; } .article-meta { font-size: 13.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; } .article-body { max-width: 720px; padding-top: 36px; font-size: 17px; line-height: 1.75; color: var(--text-secondary); } .article-body .lead { font-size: 19px; line-height: 1.65; color: var(--text-primary); font-weight: 500; margin: 0 0 32px; max-width: none; } .article-body h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; color: var(--text-primary); margin: 44px 0 16px; line-height: 1.25; } .article-body h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; color: var(--text-primary); margin: 32px 0 10px; line-height: 1.3; } .article-body p { margin: 0 0 18px; } .article-body p strong { color: var(--text-primary); font-weight: 700; } .article-body a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .article-body a:hover { color: var(--primary); } .article-body ul, .article-body ol { margin: 0 0 22px; padding: 0; } .article-body ul li, .article-body ol li { position: relative; padding-left: 24px; margin-bottom: 10px; list-style: none; } .article-body ul li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } .article-body ol { counter-reset: ol; } .article-body ol li { counter-increment: ol; } .article-body ol li::before { content: counter(ol) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--primary); } .article-cta { text-align: center; padding: 28px 0 12px; } .article-related { max-width: 720px; border-top: 1px solid var(--border-light); padding-top: 28px; margin-top: 36px; } .article-related h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 0 0 12px; } .article-related ul { list-style: none; padding: 0; margin: 0; } .article-related li { margin-bottom: 8px; } .article-related a { font-weight: 600; color: var(--text-primary); font-size: 16px; text-decoration: none; transition: color 0.15s ease; } .article-related a:hover { color: var(--primary); } @media (max-width: 768px) { .blog-hero { padding: 48px 0 36px; } .article-hero { padding: 44px 0 28px; } .article-body { padding-top: 28px; font-size: 16px; } .article-body .lead { font-size: 17px; } .article-body h2 { font-size: 22px; margin: 36px 0 12px; } .article-body h3 { font-size: 17px; } .post-card-link { padding: 22px; } .post-card-title { font-size: 18px; } } /* ============================================================ FAQ accordion ============================================================ */ .faq-list { display: grid; gap: 12px; max-width: 820px; margin: 24px auto 0; } .faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .faq-item[open] { border-color: var(--primary); box-shadow: var(--shadow-card); } .faq-item summary { padding: 18px 22px; font-weight: 700; font-size: 16px; color: var(--text-primary); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; line-height: 1; transition: transform 0.2s ease, background 0.2s ease; } .faq-item[open] summary::after { content: "\2212"; background: var(--primary); color: white; } .faq-body { padding: 0 22px 20px; color: var(--text-cell); font-size: 15px; line-height: 1.65; } .faq-body p { margin: 0; } .faq-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 480px) { .faq-item summary { padding: 16px 18px; font-size: 15px; } .faq-body { padding: 0 18px 18px; font-size: 14.5px; } } /* ============================================================ Coming-next (dark section) ============================================================ */ .section-coming { background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-2) 60%, var(--primary) 200%); color: white; text-align: center; } .section-tag-light { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.95); } .section-h2-light { color: white; margin-left: auto; margin-right: auto; text-wrap: balance; } .lead-light { color: rgba(255, 255, 255, 0.85); margin-left: auto; margin-right: auto; margin-bottom: 32px; } .lead-light em { color: rgba(232, 240, 232, 1); font-style: italic; } /* ============================================================ Final CTA ============================================================ */ .section-cta { padding: 60px 0 100px; } .cta-card { border: 1px solid var(--border); border-radius: 18px; padding: 60px 48px; text-align: center; box-shadow: 0 8px 30px rgba(26, 46, 26, 0.06); background: linear-gradient(180deg, var(--card-bg) 0%, var(--primary-50) 100%); } .cta-headline { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.8px; margin-bottom: 16px; } .cta-sub { font-size: 16px; color: var(--text-cell); max-width: 620px; margin: 0 auto 32px; line-height: 1.65; } .cta-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; } .cta-meta { font-size: 12.5px; color: var(--text-muted); display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .cta-meta .dot { color: var(--primary); } /* ============================================================ Footer ============================================================ */ .footer { background: var(--dark-bg); color: rgba(255, 255, 255, 0.75); padding: 60px 0 28px; } .footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .brand-footer .brand-logo--footer { height: 34px; } .footer-strapline { margin: 14px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #6cc18d; } .footer-tag { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.6); max-width: 320px; line-height: 1.55; } .footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .footer-col h5 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: white; margin-bottom: 14px; } .footer-col a { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.65); padding: 5px 0; transition: color 0.15s ease; } .footer-col a:hover { color: white; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); } /* ============================================================ Legal pages (privacy, terms, dpa, sub-processors) ============================================================ */ .legal-page { background: var(--card-bg); } .legal-hero { background: linear-gradient(180deg, var(--primary-50) 0%, var(--card-bg) 100%); border-bottom: 1px solid var(--border-light); padding: 60px 0 40px; } .legal-hero .crumb { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .legal-hero .crumb a { color: var(--primary); text-decoration: none; } .legal-hero h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.6px; margin-bottom: 12px; } .legal-hero .meta { font-size: 14px; color: var(--text-cell); } .legal-hero .meta strong { color: var(--text-primary); font-weight: 600; } .legal-body { max-width: 820px; margin: 0 auto; padding: 60px var(--container-pad); } .legal-body .toc { background: var(--primary-50); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 22px 28px; margin-bottom: 40px; } .legal-body .toc h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; color: var(--text-muted); font-weight: 700; } .legal-body .toc ol { margin: 0; padding-left: 22px; color: var(--text-secondary); list-style: decimal; } .legal-body .toc li { font-size: 14px; padding: 3px 0; } .legal-body .toc a { color: var(--text-secondary); text-decoration: none; } .legal-body .toc a:hover { color: var(--primary); text-decoration: underline; } .legal-body h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-top: 48px; margin-bottom: 14px; padding-top: 8px; scroll-margin-top: 80px; } .legal-body h3 { font-size: 16px; font-weight: 700; margin-top: 24px; margin-bottom: 8px; } .legal-body p, .legal-body li { font-size: 15px; line-height: 1.7; color: var(--text-secondary); } .legal-body p { margin-bottom: 14px; } .legal-body ul, .legal-body ol { margin: 0 0 16px 0; padding-left: 22px; } .legal-body li { padding: 3px 0; } .legal-body strong { color: var(--text-primary); font-weight: 600; } .legal-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .legal-body a:hover { color: var(--primary-hover); } .legal-body .definition-list { background: var(--page-bg); border-radius: var(--radius-card); padding: 18px 24px; margin: 16px 0; } .legal-body .definition-list dt { font-weight: 600; color: var(--text-primary); font-size: 14px; margin-top: 10px; } .legal-body .definition-list dt:first-child { margin-top: 0; } .legal-body .definition-list dd { font-size: 14px; color: var(--text-secondary); margin: 4px 0 0 0; line-height: 1.6; } .legal-body table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; } .legal-body th { background: var(--primary-50); text-align: left; padding: 10px 14px; font-weight: 600; color: var(--text-primary); border: 1px solid var(--border); } .legal-body td { padding: 10px 14px; border: 1px solid var(--border-light); color: var(--text-secondary); vertical-align: top; } .legal-body td a { word-break: break-word; } .legal-body .callout { background: var(--primary-50); border-left: 3px solid var(--primary); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 18px 0; font-size: 14px; color: var(--text-secondary); } .legal-body .callout strong { color: var(--primary-dark); } /* ============================================================ Mobile nav (hamburger + drawer) Desktop hides the toggle; tablet and below hide the inline links and reveal the toggle plus drawer. JS in index.html handles the open/close + body scroll lock. ============================================================ */ .nav-toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--text-primary); } .nav-toggle:hover { border-color: var(--primary); color: var(--primary); } .nav-toggle svg { width: 22px; height: 22px; display: block; } .nav-toggle .icon-close { display: none; } /* Light/dark switch — visible on every breakpoint, sits just left of the hamburger on mobile. Shows the icon for the theme you'd switch *to*. */ .theme-switch { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 0; cursor: pointer; color: var(--text-secondary); transition: color .15s ease, border-color .15s ease; } .theme-switch:hover { border-color: var(--primary); color: var(--primary); } .theme-switch svg { width: 20px; height: 20px; display: block; } .theme-switch .icon-sun { display: none; } :root[data-theme="dark"] .theme-switch .icon-moon { display: none; } :root[data-theme="dark"] .theme-switch .icon-sun { display: block; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .nav-drawer { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: var(--page-bg); z-index: 49; padding: 24px; overflow-y: auto; border-top: 1px solid var(--border-light); } .nav-drawer.is-open { display: block; } .nav-drawer a { display: block; padding: 14px 4px; font-size: 17px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-light); } .nav-drawer a:last-of-type { border-bottom: none; } .nav-drawer .btn { display: flex; width: 100%; margin-top: 16px; padding: 14px 24px; font-size: 16px; } body.no-scroll { overflow: hidden; } /* ============================================================ Responsive 1180px: nav only — drop "Log in" to buy the links some room 1100px: nav only — hand the links to the drawer before they overflow 1024px: small laptops + landscape tablets 768px: portrait tablets + large phones (this is where mobile-mode kicks in) 480px: phones ============================================================ */ /* The nav runs out of room well before the rest of the page does, so it gets its own two steps above the main breakpoints. Keep these nav-only: the 768px block below carries the whole mobile layout, and widening it to cover the nav would drag the hero, grids and footer along with it. */ @media (max-width: 1180px) { /* Log in is the one item duplicated in the drawer and rarely used from here — the app is a bookmark. Dropping it first keeps every section link. */ .nav-login { display: none; } .nav-links { gap: 16px; } } @media (min-width: 769px) and (max-width: 1100px) { /* Below this the eight links cannot fit even without Log in, so use the drawer rather than letting them wrap or overflow. The drawer is fixed and full-height, so it already works at these widths. */ .nav-links { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 1024px) { :root { --container-pad: 22px; } .section { padding: 76px 0; } .hero { padding: 64px 0 84px; } .feature-grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 768px) { :root { --container-pad: 18px; } html { scroll-padding-top: 68px; } .nav-inner { height: 60px; gap: 12px; } .nav-links { display: none; } .nav-inner:has(.nav-toggle) .nav-cta, .nav-inner:has(.nav-toggle) .nav-login { display: none; } .nav-toggle { display: inline-flex; } .nav-drawer { top: 60px; } .nav-cta { padding: 8px 14px; font-size: 13px; } .hero { padding: 48px 0 64px; } .hero-headline { letter-spacing: -1px; } .hero-sub { font-size: 16px; margin-bottom: 28px; } .hero-ctas { gap: 10px; margin-bottom: 32px; } .hero-ctas .btn { width: 100%; max-width: 320px; } .hero-trust { padding: 12px 16px; font-size: 13px; gap: 8px; } .section { padding: 56px 0; } .section-h2 { letter-spacing: -0.5px; margin-bottom: 14px; } .lead { font-size: 16px; margin-bottom: 36px; } .stat-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; } .stat-card { padding: 22px; } .problem-grid { grid-template-columns: 1fr; gap: 16px; } .problem-card { padding: 22px; } .steps { grid-template-columns: 1fr; gap: 16px; } .feature-grid-3 { grid-template-columns: 1fr; gap: 14px; } .feature-grid-2 { grid-template-columns: 1fr; gap: 14px; } .feature { padding: 22px; } .usecase-grid { grid-template-columns: 1fr; gap: 16px; } .usecase-card { padding: 24px; } .cta-card { padding: 40px 24px; border-radius: 14px; } .cta-buttons { flex-direction: column; align-items: stretch; gap: 10px; } .cta-buttons .btn { width: 100%; } .footer { padding: 48px 0 24px; } .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 20px; } } @media (max-width: 480px) { :root { --container-pad: 16px; } .nav-inner { gap: 8px; } .brand-logo { height: 26px; } .brand-footer .brand-logo--footer { height: 30px; } .hero { padding: 36px 0 52px; } .eyebrow { font-size: 10.5px; padding: 5px 10px; margin-bottom: 16px; letter-spacing: 0.3px; } .hero-headline { font-size: 26px; letter-spacing: -0.4px; line-height: 1.18; } /* Manual
tags in the headline are tuned for desktop. On phones we let text wrap naturally and hide the forced breaks. */ .hero-headline br { display: none; } .hero-sub { font-size: 15px; line-height: 1.55; } .hero-trust { flex-direction: column; padding: 12px 18px; border-radius: 14px; gap: 4px; text-align: center; } .trust-label { font-size: 11px; } .section { padding: 44px 0; } .section-tag { font-size: 10px; padding: 4px 10px; } .section-h2 { font-size: 26px; letter-spacing: -0.4px; } .stat-card { padding: 18px; } .stat-num { font-size: 36px; } .problem-card { padding: 18px; border-radius: 12px; } .feature { padding: 18px; border-radius: 12px; } .usecase-card { padding: 20px; border-radius: 12px; } .cta-card { padding: 32px 18px; } .cta-headline { font-size: 26px; letter-spacing: -0.4px; } .footer { padding: 36px 0 24px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 20px 12px; } } /* Safety: nothing should ever cause horizontal scroll on a phone */ @media (max-width: 768px) { body { overflow-x: hidden; } } @media (hover: none) { .btn-primary:hover { transform: none; } .feature:hover { transform: none; } } /* ============================================================ Animations: scroll-reveal, stat count-up, audio bar pulse All respect prefers-reduced-motion. ============================================================ */ /* Scroll-reveal: elements start translucent + nudged down, transition in when JS adds .is-visible. JS uses IntersectionObserver. */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal.reveal-delay-1 { transition-delay: 80ms; } .reveal.reveal-delay-2 { transition-delay: 160ms; } .reveal.reveal-delay-3 { transition-delay: 240ms; } /* Brand mark is the static shield + pulse logo (see brand/svg/callguard-icon.svg) */ /* Hero background ambient gradient drift */ @keyframes hero-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -1%, 0) scale(1.03); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .hero { position: relative; isolation: isolate; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(74, 158, 110, 0.12), transparent 70%), radial-gradient(ellipse 500px 300px at 85% 10%, rgba(110, 197, 154, 0.08), transparent 70%); animation: hero-drift 18s ease-in-out infinite; will-change: transform; } .hero { background: var(--page-bg); } /* Disable all motion if the user opts out */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero::before { animation: none; } } /* ============================================================ Pricing page ============================================================ */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .price-line { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 14px; } .price-line .price-unit { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text-secondary); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ Demo request modal Injected by script.js on first use, intercepting the mailto CTAs. Progressive enhancement only — the mailto links keep working with JS disabled, so this markup and its styles are additive. ============================================================ */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 21, 18, 0.6); overflow-y: auto; } .modal-overlay.is-open { display: flex; } .modal-dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); padding: 32px 28px; } .modal-close { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); padding: 0; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .modal-close:hover { border-color: var(--primary); color: var(--primary); } .modal-close svg { width: 18px; height: 18px; display: block; } .modal-title { font-size: 20px; padding-right: 40px; margin-bottom: 6px; } .modal-sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 22px; } .form-field { margin-bottom: 16px; } .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .form-label .form-optional { font-weight: 500; color: var(--text-muted); } .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text-primary); background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--radius-btn); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-textarea { resize: vertical; min-height: 80px; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .form-input[aria-invalid="true"], .form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: var(--fail); } .form-error { display: none; font-size: 12.5px; color: var(--fail); margin-top: 6px; } .form-error.is-visible { display: block; } .form-status { font-size: 13.5px; margin-bottom: 14px; } .form-status.is-error { color: var(--fail); background: var(--fail-bg); border-radius: var(--radius-btn); padding: 10px 12px; } .modal-form .btn { width: 100%; margin-top: 4px; } .modal-success { text-align: center; padding: 8px 0 4px; } .modal-success svg { width: 40px; height: 40px; color: var(--primary); margin: 0 auto 14px; } .modal-success .modal-title { font-size: 18px; padding-right: 0; margin-bottom: 8px; } .modal-success p { font-size: 14px; color: var(--text-secondary); margin: 0; } /* Visible focus rings everywhere the modal is open, matching brand green */ .modal-dialog :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (max-width: 480px) { .modal-overlay { padding: 0; align-items: flex-end; } .modal-dialog { max-width: none; max-height: 92vh; border-radius: var(--radius-card) var(--radius-card) 0 0; padding: 24px 20px 28px; } }