/* ============================================================ brand.css — AI & Ad Hider for Google Dark teal/blue brand override on top of the Ignite template (bootstrap.min.css → ignite-core.min.css → styles.css → brand.css). The template's styles.css is entirely CSS-variable driven, so this file mostly retunes those tokens to the iOS app's dark identity and adds the bits the template doesn't ship: the interactive before/after screenshot demo, the hero trust pills, and a dark download band. The site is dark-only (matching the native app). Dark is forced via + ; we deliberately do not load the theme-switcher JS. ============================================================ */ /* Brand accent + radii — theme-independent */ :root { --primary-color: #13d6c6; --primary-rgb: 19, 214, 198; --primary-hover: #35e7d9; --star-color: #c8a96e; --radius-lg: 18px; --border-radius-lg: 18px; /* brand-only helpers used below */ --teal-soft: rgba(19, 214, 198, 0.14); --teal-line: rgba(19, 214, 198, 0.36); --bs-primary: var(--primary-color); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary-color); --bs-link-color-rgb: var(--primary-rgb); --bs-link-hover-color: var(--primary-hover); } /* Dark palette → exact brand surfaces. Restated on the dark-mode selector so it wins over styles.css's own dark block (same specificity, loaded later). */ body[data-site-classes~="dark-mode"] { --text-dark: #f5fbfa; --text-primary: #f5fbfa; --text-muted: #a8b5b4; --text-light: #718181; --text-secondary: var(--text-muted); --bg-page: #050707; --bg-light: #101414; --bg-card: #121819; --bg-primary: var(--bg-page); --bg-secondary: var(--bg-light); --surface-elevated: rgba(5, 7, 7, 0.82); --section-surface-a: #050707; --section-surface-b: #0b0f0f; --border-color: rgba(255, 255, 255, 0.12); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5); } /* ---------- Buttons (dark text on bright teal for contrast) ---------- */ .btn-primary { --bs-btn-color: #03100f; --bs-btn-bg: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-color: #03100f; --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-color: #03100f; --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); font-weight: 700; } .cta-button, .cta-button-primary { background: var(--primary-color); color: #03100f !important; box-shadow: 0 14px 36px rgba(19, 214, 198, 0.24); } .cta-button:hover, .cta-button-primary:hover { background: var(--primary-hover); color: #03100f !important; } /* ---------- Header ---------- */ .site-header { -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } /* ---------- Hero ---------- */ .hero { background: radial-gradient(60% 50% at 50% 0%, rgba(19, 214, 198, 0.10), transparent 70%), linear-gradient(180deg, var(--bg-light) 0%, var(--bg-page) 100%); } .hero-title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: break-word; text-wrap: balance; } @media (max-width: 480px) { .hero-title { font-size: 1.875rem; } } .hero-app-icon { border-radius: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 34px rgba(19, 214, 198, 0.18); } /* Trust pills under the hero CTA (not part of the template) */ .hero-fineprint { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-top: 1.75rem; color: var(--text-muted); font-size: 0.875rem; } .hero-fineprint .pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: 999px; background: rgba(255, 255, 255, 0.045); } /* ---------- Section rhythm (alternating dark surfaces) ---------- */ .screenshots-section, .testimonials-section { background: var(--bg-page); } .features-section { background: #0a0e0e; } /* ---------- Features (restrained teal accent, not bright tiles) ---------- */ .feature-card { background: var(--bg-card); border: 1px solid var(--border-color); } .feature-icon { background: var(--teal-soft); border: 1px solid var(--teal-line); } .feature-icon-image { color: var(--primary-color); } /* ---------- Download band (dark, not a bright teal slab) ---------- */ .download-section { background: linear-gradient(135deg, #0c1413 0%, #070a0a 100%); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .download-content h2 { color: var(--text-dark); } .download-description { color: var(--text-muted); } /* ---------- Footer (simplified, centered) ---------- */ .site-footer { background: var(--bg-page); border-top: 1px solid var(--border-color); padding: 2.75rem 0; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; text-align: center; } .footer-brand-link { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text-dark); transition: opacity 0.2s ease; } .footer-brand-link:hover { opacity: 0.85; text-decoration: none; } .footer-brand-link .footer-app-icon { width: 30px; height: 30px; margin: 0; border-radius: 8px; box-shadow: var(--shadow-sm); } .footer-brand-name { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; } .footer-nav a { color: var(--text-muted); font-size: 0.9375rem; text-decoration: none; transition: color 0.2s ease; } .footer-nav a:hover { color: var(--primary-color); text-decoration: none; } .footer-copy { margin: 0; color: var(--text-light); font-size: 0.8125rem; } /* ============================================================ Interactive before/after screenshot demo (ported from the previous site, retuned to brand tokens). Lives inside the template's otherwise-empty screenshots section. ============================================================ */ .demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; max-width: 760px; margin: 0 auto; } .demo { display: grid; justify-items: center; gap: 1.25rem; } .demo-label { display: inline-flex; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--teal-soft); color: var(--primary-color); } .phone { width: min(100%, 300px); padding: 10px; border-radius: 42px; background: #050606; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: var(--shadow-lg); } .screen { position: relative; overflow: hidden; border-radius: 32px; aspect-ratio: 1206 / 2622; background: #1f2127; } .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 220ms ease; } .screen img.after { opacity: 0; } .demo.is-clean .screen img.after { opacity: 1; } .demo.is-clean .screen img.before { opacity: 0; } .toggle-button { display: inline-grid; grid-template-columns: auto 48px; align-items: center; gap: 0.75rem; padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; } .toggle-button[role="switch"] .switch { pointer-events: none; } .switch { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #3a4444; transition: background 180ms ease; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: transform 180ms ease; } .demo.is-clean .switch { background: var(--primary-color); } .demo.is-clean .switch::after { transform: translateX(20px); } @media (max-width: 767px) { .demo-grid { grid-template-columns: 1fr; gap: 3rem; max-width: 340px; } } @media (prefers-reduced-motion: reduce) { .screen img, .switch, .switch::after { transition-duration: 0.01ms !important; } }