/* ============================================================ WEB LAUNCH CO. — PREMIUM LAYER v1.0 Navy palette + ambient depth + subtle motion polish. Loads last in — overrides palette vars only. Never touches layout, spacing, font-sizes, or content. ============================================================ */ /* ── 1. NAVY BLUE PALETTE ───────────────────────────────── */ :root { --bg: #060e1a; /* deep navy */ --bg-2: #071326; /* alternate section bg */ --surface: #0c1d38; /* card surfaces */ --surface-2: #102444; /* elevated / hover surfaces */ --border: rgba(255,255,255,0.06); --border-h: rgba(96,165,250,0.32); /* blue-tinted border hover */ } /* Fix hardcoded bg values that don't use the var */ #navbar.scrolled { background: rgba(6,14,26,0.92) !important; } .mobile-menu { background: rgba(6,14,26,0.97) !important; } /* Hero overlay — slight navy tint so bg image breathes more */ .hero-overlay { background: rgba(6,14,26,0.56) !important; } /* ── 2. HERO PARTICLE CANVAS ────────────────────────────── */ /* Reveal the canvas, lift above overlay so particles show */ #hero-canvas { display: block !important; z-index: 3 !important; /* above overlay(2), below content(5) */ opacity: 0.7; } /* ── 3. NOISE TEXTURE OVERLAY ───────────────────────────── */ #prem-noise { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; background-repeat: repeat; opacity: 0.022; pointer-events: none; z-index: 9997; mix-blend-mode: screen; } /* ── 4. SECTION LABEL — gradient text ───────────────────── */ .section-label { color: var(--purple-l); /* safe fallback */ background: linear-gradient(90deg, var(--purple-l) 0%, #60a5fa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── 5. CURSOR GLOW — blue upgrade ──────────────────────── */ .cursor-glow { background: radial-gradient(circle, rgba(96,165,250,0.055) 0%, transparent 70%) !important; width: 640px !important; height: 640px !important; } /* ── 6. STAT BOXES — subtle blue hover ──────────────────── */ .stat-box { transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } .stat-box:hover { border-color: rgba(96,165,250,0.3) !important; box-shadow: 0 8px 28px rgba(59,130,246,0.12) !important; } /* ── 7. CARD TOP-LINE ACCENT ON HOVER ───────────────────── */ /* NOTE: price-card intentionally excluded — its popular-badge sits top:-12px (outside the card) and must not be clipped */ .svc-card, .feat-item, .process-card, .problem-card, .work-card, .story-card { position: relative; overflow: hidden; } .svc-card::after, .feat-item::after, .process-card::after, .problem-card::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(96,165,250,0.5) 50%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .svc-card:hover::after, .feat-item:hover::after, .process-card:hover::after, .problem-card:hover::after { opacity: 1; } /* ── 8. PRICING CARDS — size reduction + badge fix ─────── */ /* Extra top padding so the popular badge (-12px above card) is never clipped by the grid container */ .pricing-grid { padding-top: 16px; } /* Smaller cards overall */ .price-card { padding: 14px 13px !important; } /* Price amount — smaller */ .price-amount { font-size: 28px !important; } /* Price name — slightly tighter */ .price-name { font-size: 15px !important; margin-bottom: 5px !important; } /* Tier label */ .price-tier { font-size: 10px !important; margin-bottom: 5px !important; } /* Best-for blurb */ .price-best { font-size: 11px !important; padding: 6px 8px !important; margin-bottom: 11px !important; } /* Feature list — tighter gap and smaller text */ .price-features { gap: 5px !important; margin-bottom: 12px !important; } .price-features li { font-size: 11.5px !important; } /* Checkmark icon — smaller */ .pf-icon { width: 15px !important; height: 15px !important; font-size: 8px !important; } /* Restore overflow:visible so popular-badge shows */ .price-card { overflow: visible !important; } /* Popular — blue border instead of purple */ .price-card.popular { border-color: rgba(96,165,250,0.28) !important; } /* ── 9. HERO CONTENT GLASS PANEL — navy tint ───────────── */ .hero-content { background: rgba(6,14,26,0.52) !important; border: 1px solid rgba(96,165,250,0.14) !important; } /* ── 10. COMPARE CARD — good side blue accent ───────────── */ .compare-card.good { border-color: rgba(96,165,250,0.25) !important; } .compare-card.good::before { background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, transparent 60%) !important; } /* ── 11. SECTION BACKGROUNDS — depth variation ─────────── */ #why { background: var(--bg-2); } #serve { background: var(--bg); } /* ── 12. BACK-TO-TOP — blue ring ────────────────────────── */ #backToTop:hover { border-color: rgba(96,165,250,0.45) !important; box-shadow: 0 0 0 4px rgba(59,130,246,0.12) !important; } /* ── 13. FAQ ANSWER TEXT — readable on navy surface ─────── */ .faq-a { color: var(--g300) !important; /* #d4d4d8 — clearly legible on navy */ } /* ── 14. FOOTER SIZE REDUCTION ──────────────────────────── */ #footer { padding: 44px 0 22px !important; } .footer-grid { gap: 28px !important; margin-bottom: 28px !important; } .foot-logo img { width: 28px !important; height: 28px !important; } .foot-col-title { margin-bottom: 11px !important; font-size: 11px !important; } .foot-links { gap: 7px !important; } .foot-links a { font-size: 12.5px !important; } .foot-desc { font-size: 12.5px !important; margin-bottom: 14px !important; } .foot-social { gap: 8px !important; } .foot-bottom { padding-top: 14px !important; } .foot-copy, .foot-legal a { font-size: 11.5px !important; } .contact-row a, .contact-row span { font-size: 12.5px !important; } /* ── 14. BUSINESS TOOLS — navy topbar ───────────────────── */ .bt-topbar { background: rgba(6,14,26,0.92) !important; } /* ── 15. BUSINESS TOOLS — card entrance animations ─────── */ @keyframes btFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .bt-hero { animation: btFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both 0.05s; } .bt-main .bt-card:nth-child(1) { animation: btFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both 0.14s; } .bt-main .bt-card:nth-child(2) { animation: btFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both 0.24s; } .bt-main .bt-card:nth-child(3) { animation: btFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both 0.34s; } /* ── Motion-safe guard ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #prem-noise { display: none; } .bt-hero, .bt-main .bt-card { animation: none !important; } }