/* Public marketing pages (prosportslink.com). Builds on the control app theme in site.css — same CSS variables, glass panels, and buttons — so the marketing site and the application read as one product. */ .public-page { overflow-x: hidden; /* site.css puts the theme gradient on with background-attachment: fixed, which iOS Safari (and some capture tools) mis-paints as white on long scrolling pages. The marketing page is much taller than the app's screens, so paint the glow here without fixed attachment: a top-anchored radial gradient that scrolls naturally over solid black. */ background: #000000 radial-gradient(ellipse 120% 900px at 50% 0%, #1a2a3a 0%, #000000 100%) no-repeat; } /* ---------- Navbar ---------- */ .public-navbar { padding-top: 0.6rem; padding-bottom: 0.6rem; } .public-navbar .navbar-logo, .public-navbar .navbar-brand img { display: block; height: 44px; width: auto; } .public-navbar .nav-link { color: rgba(255, 255, 255, 0.85); font-weight: 500; padding-left: 0.9rem; padding-right: 0.9rem; transition: color 0.2s ease; } .public-navbar .nav-link:hover { color: var(--primary-blue); } .btn-login { white-space: nowrap; } /* ---------- Hero ---------- */ .hero { position: relative; /* Fill most of the viewport, but don't balloon on very tall displays */ min-height: min(92vh, 880px); padding: 9rem 0 7rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.8) 100%), url("../images/marketing/hero-lights.jpg") center 30% / cover no-repeat; } /* Blend the photo into the app's radial-gradient background */ .hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero-title { font-size: 3.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 1.25rem; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); } .hero-subtitle { font-size: 1.25rem; color: rgba(255, 255, 255, 0.85); max-width: 36em; margin-bottom: 2.25rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } .hero-mark { width: 78%; max-width: 340px; filter: drop-shadow(0 12px 48px rgba(7, 151, 242, 0.45)); } /* Glass secondary button (on photos, .btn-secondary's flat fill looks muddy) */ .btn-glass { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); color: var(--text-primary); } .btn-glass:hover, .btn-glass:focus { background: rgba(255, 255, 255, 0.22); color: var(--text-primary); transform: translateY(-1px); } /* ---------- Sections ---------- */ .section { padding: 5rem 0; } .section-tight { padding-top: 1rem; } .section-heading { max-width: 44em; margin: 0 auto 3rem; text-align: center; } .section-heading h2 { font-size: 2.3rem; margin-bottom: 1rem; } .section-heading p { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 0; } /* Scroll-margin so anchor jumps clear the fixed navbar */ #features, #hardware, #contact { scroll-margin-top: 90px; } /* ---------- Pillar cards ---------- */ .pillar-card { padding: 2rem; margin-bottom: 1.5rem; width: 100%; } .pillar-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: var(--primary-blue); background: rgba(7, 151, 242, 0.12); border: 1px solid rgba(7, 151, 242, 0.35); box-shadow: 0 0 24px rgba(7, 151, 242, 0.18); } .pillar-icon svg { width: 28px; height: 28px; } .pillar-card h3 { font-size: 1.2rem; margin-bottom: 0.75rem; } .pillar-card p { color: var(--text-secondary); margin-bottom: 0; } /* ---------- Feature rows ---------- */ .feature-row { padding: 3rem 0; } .feature-img-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45); } .feature-img-frame img { display: block; width: 100%; height: 380px; object-fit: cover; } .feature-copy { padding: 2rem 0 0; } @media (min-width: 992px) { .feature-copy { padding: 0 0 0 3rem; } .feature-row-reverse .feature-copy { padding: 0 3rem 0 0; } } .feature-eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-blue); margin-bottom: 0.75rem; } .feature-copy h3 { font-size: 1.8rem; margin-bottom: 1rem; } .feature-copy p { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 0; } /* ---------- Capability checklist ---------- */ .capability-panel { padding: 2.5rem; } .capability-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem 2rem; } .capability-list li { position: relative; padding-left: 2rem; color: rgba(255, 255, 255, 0.9); } .capability-list li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.1em; height: 1.1em; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332d74b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 68% no-repeat, rgba(50, 215, 75, 0.12); border: 1px solid rgba(50, 215, 75, 0.4); } /* ---------- CTA band ---------- */ .section-cta { padding-bottom: 6rem; } .cta-panel { padding: 3.5rem 2rem; } .cta-panel h2 { font-size: 2.2rem; margin-bottom: 1rem; } .cta-panel p { color: var(--text-secondary); font-size: 1.1rem; max-width: 40em; margin: 0 auto 2rem; } /* ---------- Footer ---------- */ .public-footer { margin-top: 0; } .footer-logo { height: 40px; width: auto; } .footer-blurb { color: var(--text-secondary); max-width: 28em; } .footer-heading { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); margin-bottom: 1rem; } .footer-list { list-style: none; margin: 0; padding: 0; color: var(--text-secondary); font-style: normal; } .footer-list li { margin-bottom: 0.5rem; } .footer-bottom { border-top: 1px solid var(--glass-border); color: var(--text-secondary); font-size: 0.9rem; } /* ---------- Reveal-on-scroll ---------- Pure-CSS scroll-driven animation: content is fully visible by default (no JS dependency); browsers with scroll-timeline support (Chrome/Edge) get a fade-up as sections enter the viewport. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .reveal { animation: reveal-in both ease; animation-timeline: view(); animation-range: entry 0% entry 50%; } } } @keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ---------- Small screens ---------- */ @media (max-width: 767.98px) { .hero { min-height: 0; padding: 8rem 0 5rem; } .hero-title { font-size: 2.3rem; } .hero-subtitle { font-size: 1.1rem; } .section { padding: 3.5rem 0; } .feature-row { padding: 1.5rem 0; } .feature-img-frame img { height: 240px; } .capability-panel { padding: 1.75rem; } /* Collapsed nav menu needs a surface — the transparent navbar drops links straight onto the page content otherwise. */ .public-navbar .navbar-collapse { background: rgba(28, 28, 30, 0.92); border: 1px solid var(--glass-border); border-radius: 12px; margin-top: 0.75rem; padding: 0.75rem 1rem; } }