/* ============================================================ BARNEFOTBALLTRENER - Landing Page Visual Redesign Fil: landing-visual.css Legg til i etter auth-styles.css: ============================================================ */ html { scroll-behavior: smooth; } /* ------------------------------------------- Override: Make password-box full-width for landing (uses compound selector to beat style.css #passwordProtection .password-box) ------------------------------------------- */ /* ------------------------------------------- STICKY NAV (desktop — vises når hero er scrollet forbi) ------------------------------------------- */ .lp-sticky-nav { display: none; position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #d8e4da; padding: 10px 20px; } .lp-sticky-nav.visible { display: block; } .lp-sticky-inner { display: flex; justify-content: space-between; align-items: center; max-width: 960px; margin: 0 auto; } .lp-sticky-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #0f172a; font-weight: 700; font-size: 15px; } .lp-sticky-brand img { border-radius: 6px; } .lp-sticky-cta { background: #456C4B; color: #fff; padding: 8px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; } .lp-sticky-cta:hover { background: #3a5e40; } @media (max-width: 767px) { .lp-sticky-nav { display: none !important; } } /* ------------------------------------------- HERO ------------------------------------------- */ .lp-hero { text-align: center; padding: 36px 28px 24px; background: linear-gradient(165deg, rgba(46,139,87,0.06) 0%, rgba(243,154,31,0.04) 50%, transparent 100% ); border-radius: 22px 22px 0 0; } .lp-hero-inner { max-width: 420px; margin: 0 auto; } #passwordProtection .lp-hero .login-logo { width: 90px; height: 90px; margin-bottom: 12px; } .lp-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; color: var(--bf-ink, #0f172a); } .lp-hero-proof { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.75); margin: 12px 0 0; letter-spacing: 0.01em; display: inline-block; background: rgba(69, 108, 75, 0.92); padding: 5px 12px; border-radius: 999px; } #passwordProtection .lp-hero .landing-tagline { font-size: 15px; line-height: 1.5; color: var(--bf-muted, #64748b); margin: 0 0 22px; opacity: 1; } /* Trust pills row */ .lp-trust-row { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .lp-trust-pill { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--bf-muted, #64748b); letter-spacing: 0.01em; } .lp-trust-pill i { color: var(--bf-green, #456C4B); font-size: 11px; } .lp-pricing-jump { margin: 10px 0 0; text-align: center; font-size: 13px; } .lp-pricing-jump a { color: #456C4B; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .lp-pricing-jump a:hover { color: #3a5a40; } /* ------------------------------------------- PHONE MOCKUPS ------------------------------------------- */ .lp-phones-section { padding: 0 16px 16px; overflow: hidden; } .lp-phones { display: flex; justify-content: center; gap: 10px; padding: 8px 0; flex-wrap: wrap; } .lp-phone { width: 160px; flex-shrink: 0; background: #1a1a2e; border-radius: 18px; padding: 5px 4px 4px; box-shadow: 0 12px 36px rgba(0,0,0,0.2); animation: lpPhoneIn 0.5s ease both; } .lp-phone:nth-child(1) { animation-delay: 0.05s; } .lp-phone:nth-child(2) { animation-delay: 0.15s; } .lp-phone:nth-child(3) { animation-delay: 0.25s; } @keyframes lpPhoneIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .lp-phone-notch { width: 50px; height: 4px; background: #333; border-radius: 3px; margin: 1px auto 4px; } .lp-screen { background: #fff; border-radius: 12px; overflow: hidden; font-family: inherit; } @media (max-width: 520px) { .lp-phone { width: 148px; } .lp-phones { gap: 8px; } } @media (max-width: 380px) { .lp-phone { width: 135px; } } .lp-phones-caption { text-align: center; font-size: 11px; font-weight: 700; color: rgba(100,116,139,0.7); margin: 10px 0 0; letter-spacing: 0.03em; } /* ------------------------------------------- SCREEN STYLES: Scale wrapper Uses REAL app CSS classes (kd-*, results-card, etc.) scaled down to fit phone mockup. ------------------------------------------- */ .lp-screen-scaled { overflow: hidden; background: #0f172a; position: relative; aspect-ratio: 9 / 16; } .lp-screen-scaled.lp-screen-light { background: #fff; } .lp-scale-wrap { width: 340px; transform-origin: top left; position: absolute; top: 0; left: 0; transform: scale(0.447); } @media (max-width: 520px) { .lp-scale-wrap { transform: scale(0.412); } } .lp-phone .kd-timeline-chart { margin-bottom: 0; border: none; box-shadow: none; border-radius: 0; } .lp-phone .kd-dark-output { border-radius: 0; box-shadow: none; margin-bottom: 0; } .lp-phone .kd-pitch-card { margin-bottom: 0; } .lp-phone .results-card { background: var(--gray-50, #f8f9fa); border: 1px solid var(--gray-200, #e2e8f0); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .lp-phone .results-card h3 { font-size: 14px !important; margin: 0 0 4px 0 !important; } .lp-phone .results-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; } .lp-phone .result-item { font-size: 12px; padding: 3px 6px; background: white; border: 1px solid var(--gray-200, #e2e8f0); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------- SECTIONS (shared) ------------------------------------------- */ .lp-section { padding: 28px 24px; text-align: left; } .lp-section + .lp-section { border-top: 1px solid rgba(0,0,0,0.05); } .lp-section-alt { background: #f8faf8; } .lp-section-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; text-align: center; color: var(--bf-ink, #0f172a); } .lp-section-sub { text-align: center; font-size: 13.5px; color: var(--bf-muted, #64748b); margin: 0 0 20px; line-height: 1.45; } /* ------------------------------------------- FEATURES GRID ------------------------------------------- */ .lp-features { display: flex; flex-direction: column; gap: 14px; } .lp-feat { display: flex; gap: 12px; align-items: flex-start; } .lp-feat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .lp-feat-icon.green { background: #ecfdf5; color: #456C4B; } .lp-feat-icon.blue { background: #ecf4ee; color: #456C4B; } .lp-feat-icon.orange { background: #fff7ed; color: #f39a1f; } .lp-feat-icon.purple { background: #f5f3ff; color: #7c3aed; } .lp-feat-icon.rose { background: #fff1f2; color: #e11d48; } .lp-feat-icon.teal { background: #f0fdfa; color: #0d9488; } .lp-feat strong { display: block; font-size: 14px; font-weight: 800; margin-bottom: 3px; color: var(--bf-ink, #0f172a); } .lp-feat p { font-size: 13px; color: var(--bf-muted, #64748b); line-height: 1.45; margin: 0; } .lp-feat-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #456C4B; text-decoration: none; } .lp-feat-link:hover { text-decoration: underline; } .landing-footer-seo { margin-bottom: 8px; } /* SEO + footer nav links (login card) — grønn palett */ #passwordProtection .landing-footer-seo a, #passwordProtection .landing-footer-links a { color: #456C4B; } /* ------------------------------------------- SCREENSHOT PLACEHOLDER ------------------------------------------- */ .lp-screenshots { text-align: center; } .lp-screenshot-device { max-width: 260px; margin: 0 auto; background: #1a1a2e; border-radius: 26px; padding: 8px 6px 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.18); } .lp-screenshot-notch { width: 60px; height: 5px; background: #333; border-radius: 3px; margin: 0 auto 6px; } .lp-screenshot-inner { background: #fff; border-radius: 18px; overflow: hidden; aspect-ratio: 9/17; display: flex; align-items: center; justify-content: center; } .lp-screenshot-inner img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-screenshot-placeholder { padding: 24px; text-align: center; } .lp-screenshot-placeholder i { font-size: 32px; color: #ddd; margin-bottom: 10px; display: block; } .lp-screenshot-placeholder p { font-size: 12px; color: #bbb; font-weight: 600; margin: 0; } .lp-screenshot-placeholder .hint { font-size: 10px; color: #ccc; margin-top: 4px; line-height: 1.3; } /* ------------------------------------------- HOW IT WORKS ------------------------------------------- */ .lp-how { background: linear-gradient(165deg, rgba(46,139,87,0.04) 0%, rgba(243,154,31,0.03) 100% ); border-radius: 16px; margin: 0 -4px; padding: 28px 28px; } .lp-steps { display: flex; flex-direction: column; gap: 0; } .lp-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; position: relative; } .lp-step:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 48px; bottom: 0; width: 2px; background: linear-gradient(180deg, #456C4B, rgba(69,108,75,0.1)); } .lp-step-num { width: 34px; height: 34px; border-radius: 10px; background: #456C4B; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; flex-shrink: 0; box-shadow: 0 4px 12px rgba(69,108,75,0.28); } .lp-step strong { display: block; font-size: 14px; font-weight: 800; margin-bottom: 3px; color: var(--bf-ink, #0f172a); } .lp-step p { font-size: 13px; color: var(--bf-muted, #64748b); line-height: 1.45; margin: 0; } /* ------------------------------------------- PRICING (inline) ------------------------------------------- */ .lp-price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .lp-price-card { background: #f8faf9; border: 1px solid rgba(15,23,42,0.08); border-radius: 14px; padding: 16px 10px; text-align: center; transition: transform 150ms ease, box-shadow 150ms ease; } .lp-price-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); } .lp-pc-popular { background: linear-gradient(135deg, #ecf4ee, #f4faf5); border-color: rgba(69,108,75,0.35); box-shadow: 0 6px 18px rgba(69,108,75,0.14); transform: scale(1.03); } .lp-pc-popular:hover { transform: scale(1.03) translateY(-1px); } .lp-pc-label { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .lp-pc-popular .lp-pc-label { color: #456C4B; } .lp-pc-amount { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: #0f172a; } .lp-pc-unit { font-size: 11px; color: #64748b; font-weight: 600; } .lp-popular-badge { display: inline-block; background: #456C4B; color: #fff; font-size: 8.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.03em; } @media (max-width: 380px) { .lp-price-cards { grid-template-columns: 1fr; gap: 6px; } .lp-pc-popular { transform: none; } } /* ------------------------------------------- KLUBBAVTALE ------------------------------------------- */ .lp-club-card { background: linear-gradient(135deg, #f0f7f3 0%, #fefaf4 100%); border: 1px solid rgba(46,139,87,0.15); border-radius: 16px; padding: 22px; display: flex; gap: 16px; align-items: flex-start; } .lp-club-icon { width: 44px; height: 44px; border-radius: 12px; background: #456C4B; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(69,108,75,0.24); } .lp-club-content h3 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: #0f172a; } .lp-club-content p { font-size: 13px; color: #64748b; line-height: 1.45; margin: 0 0 12px; } .lp-club-how { font-size: 12px !important; color: #94a3b8 !important; font-style: italic; } .lp-club-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: #456C4B; color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 150ms ease; box-shadow: 0 4px 12px rgba(69,108,75,0.24); } .lp-club-btn:hover { background: #3a5a40; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(69,108,75,0.32); } .lp-club-btn:active { transform: translateY(0); } @media (max-width: 420px) { .lp-club-card { flex-direction: column; } } /* ------------------------------------------- FIX: password-box override (beat style.css ID rule) ------------------------------------------- */ #passwordProtection .password-box.landing-page-box { max-width: 640px !important; margin: 0 auto; padding: 0 0 30px; text-align: center; } /* ------------------------------------------- SEO CHIPS (orphaned from original, adding styles) ------------------------------------------- */ #passwordProtection .landing-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 16px 0; } #passwordProtection .landing-chip { display: inline-block; padding: 4px 10px; background: rgba(11, 91, 211, 0.04); border: 1px solid rgba(11, 91, 211, 0.1); border-radius: 8px; font-size: 12px; font-weight: 600; color: #64748b; } #passwordProtection .landing-trust-note { font-size: 13px; color: #64748b; text-align: center; margin-bottom: 10px; line-height: 1.45; } /* ------------------------------------------- VIDEO DEMO DEVICE ------------------------------------------- */ .lp-demo-section { text-align: center; } .lp-demo-device { max-width: 300px; margin: 0 auto; background: #1a1a2e; border-radius: 30px; padding: 10px 8px 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.22); } .lp-demo-notch { width: 60px; height: 5px; background: #333; border-radius: 3px; margin: 0 auto 4px; } .lp-demo-url { text-align: center; font-size: 10px; font-weight: 600; color: #666; margin-bottom: 4px; letter-spacing: 0.02em; } /* Fallback når poster (demo-poster.jpg) mangler eller laster */ .lp-demo-screen { background: #1a2332; border-radius: 18px; overflow: hidden; } .lp-demo-screen video { width: 100%; display: block; border-radius: 18px; } @media (max-width: 380px) { .lp-demo-device { max-width: 260px; } } /* ------------------------------------------- PHONE MOCKUP: overrides for pitch inside landing ------------------------------------------- */ .lp-scale-wrap .kd-pos-bubble, .lp-scale-wrap .kd-bench-bubble { cursor: default !important; touch-action: auto !important; } .lp-scale-wrap .kd-pitch-card-header { padding: 4px 8px; } .lp-scale-wrap .kd-pitch-card-title { font-size: 11px; } .lp-scale-wrap .kd-bench-bubble { width: 32px; height: 32px; } .lp-scale-wrap .kd-bench-bubble .kd-p-name { font-size: 8px; max-width: 28px; } /* ------------------------------------------- PROBLEM SECTION ------------------------------------------- */ .lp-section-problem { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; } .lp-problem-points { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 24px; } .lp-problem-point { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--bf-ink, #0f172a); text-align: left; } .lp-problem-point i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(69, 108, 75, 0.08); color: #456C4B; display: flex; align-items: center; justify-content: center; font-size: 15px; } .lp-problem-solve { font-size: 17px; font-weight: 700; color: #456C4B; margin: 0; } @media (min-width: 768px) { .lp-problem-points { flex-direction: row; gap: 24px; } .lp-problem-point { flex-direction: column; text-align: center; flex: 1; } } /* ------------------------------------------- BEFORE / AFTER COMPARISON ------------------------------------------- */ .lp-compare-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 720px; margin: 0 auto; } .lp-compare-col { border-radius: 16px; padding: 24px; } .lp-compare-before { background: #fef2f2; border: 1px solid #fecaca; } .lp-compare-after { background: #f0fdf4; border: 1px solid #bbf7d0; } .lp-compare-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; } .lp-compare-before .lp-compare-label { color: #991b1b; } .lp-compare-after .lp-compare-label { color: #456C4B; } .lp-compare-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--bf-ink, #0f172a); margin-bottom: 10px; } .lp-compare-item:last-child { margin-bottom: 0; } .lp-compare-before .lp-compare-item i { color: #dc2626; font-size: 14px; margin-top: 4px; flex-shrink: 0; } .lp-compare-after .lp-compare-item i { color: #456C4B; font-size: 14px; margin-top: 4px; flex-shrink: 0; } @media (min-width: 768px) { .lp-compare-grid { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------- PRICING CTA (scroll to top) ------------------------------------------- */ .lp-pricing-cta { text-align: center; margin-top: 24px; } .lp-pricing-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #456C4B; color: #fff; padding: 14px 28px; border-radius: 14px; font-size: 16px; font-weight: 700; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; } .lp-pricing-cta-btn:hover { background: #3a5e40; transform: translateY(-1px); } .lp-pricing-cta-btn:active { transform: translateY(0); } .lp-pricing-cta-sub { font-size: 13px; color: var(--bf-muted, #64748b); margin: 10px 0 0; } /* ------------------------------------------- DARK FOOTER ------------------------------------------- */ #passwordProtection .lp-footer-dark { background: #1a2e1f; padding: 40px 24px 28px; margin-top: 24px; border-radius: 16px; text-align: center; } #passwordProtection .lp-footer-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; } #passwordProtection .lp-footer-logo img { width: 32px; height: 32px; border-radius: 8px; } #passwordProtection .lp-footer-logo span { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.9); } #passwordProtection .lp-footer-dark .landing-footer-seo, #passwordProtection .lp-footer-dark .landing-footer-links { margin: 0 0 12px; } #passwordProtection .lp-footer-dark .landing-footer-seo a, #passwordProtection .lp-footer-dark .landing-footer-links a { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); } #passwordProtection .lp-footer-dark .landing-footer-seo a:hover, #passwordProtection .lp-footer-dark .landing-footer-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } #passwordProtection .lp-footer-dark .landing-footer-seo .dot, #passwordProtection .lp-footer-dark .landing-footer-links .dot { color: rgba(255, 255, 255, 0.3); } #passwordProtection .lp-footer-dark .small-text { color: rgba(255, 255, 255, 0.5); opacity: 1; } #passwordProtection .lp-footer-dark .small-text a { color: rgba(255, 255, 255, 0.6); text-decoration: underline; } #passwordProtection .lp-footer-dark .small-text a:hover { color: rgba(255, 255, 255, 0.85); } #passwordProtection .lp-footer-copy { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin: 16px 0 0; } /* ------------------------------------------- DESKTOP RESPONSIVE: Full-width landing ------------------------------------------- */ @media (min-width: 768px) { #passwordProtection .password-box.landing-page-box { max-width: 960px !important; margin: 0 auto; padding: 0 0 40px; border-radius: 28px; } /* Slår auth-styles button#googleSignInBtn.btn-google (inline-flex + width 100%) */ #passwordProtection .landing-page-box button#googleSignInBtn.btn-google, .landing-page-box .btn-secondary.btn-secondary-link { display: flex; max-width: 400px; margin-left: auto; margin-right: auto; } #passwordProtection .landing-faq { max-width: 700px; margin-left: auto; margin-right: auto; } .lp-hero { padding: 52px 48px 36px; } .lp-hero h1 { font-size: 42px; } #passwordProtection .lp-hero .landing-tagline { font-size: 18px; max-width: 560px; margin: 0 auto 28px; } .lp-phones { gap: 20px; } .lp-phone { width: 210px; } .lp-scale-wrap { transform: scale(0.595); } .lp-section { padding: 40px 48px; } .lp-section-title { font-size: 28px; } .lp-section-sub { font-size: 16px; max-width: 560px; margin: 0 auto 28px; } .lp-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 740px; margin: 0 auto; } .lp-feat { background: #f9faf9; border: 1px solid #e8ede9; border-radius: 12px; padding: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lp-feat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .lp-demo-device { max-width: 360px; } .lp-how { padding: 40px 48px; } .lp-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; max-width: 800px; margin: 0 auto; } .lp-step { flex-direction: column; align-items: center; text-align: center; padding: 0; } .lp-step-num { margin-bottom: 12px; } .lp-step:not(:last-child)::after { display: none; } .lp-price-cards { display: flex; max-width: 640px; margin: 0 auto 14px; gap: 16px; } .lp-price-card { flex: 1; } .lp-club-card { max-width: 640px; margin: 0 auto; align-items: center; gap: 24px; } .lp-club-icon { width: 56px; height: 56px; font-size: 24px; } #passwordProtection .lp-footer-dark { border-radius: 0 0 28px 28px; margin-bottom: -40px; } } @media (min-width: 1200px) { #passwordProtection .password-box.landing-page-box { max-width: 1080px !important; margin: 0 auto; } .lp-hero h1 { font-size: 52px; } #passwordProtection .lp-hero .landing-tagline { font-size: 20px; max-width: 640px; } .lp-phone { width: 240px; } .lp-scale-wrap { transform: scale(0.68); } .lp-features { gap: 24px; max-width: 800px; } .lp-price-cards { max-width: 720px; } .lp-demo-device { max-width: 400px; } .lp-club-card { max-width: 720px; } } /* ------------------------------------------- ENTRANCE ANIMATIONS ------------------------------------------- */ @keyframes lpFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .lp-animate { animation: lpFadeInUp 0.5s ease forwards; } .lp-pre-animate { opacity: 0; } @media (prefers-reduced-motion: reduce) { .lp-pre-animate { opacity: 1; } .lp-animate { animation: none; opacity: 1; } }