/* ============================================================================ tfcl.css — Landing-style design system for TFCL Play ---------------------------------------------------------------------------- Source of inspiration: the original "TFCL Alpha hero" stylesheet (a WordPress landing style: sticky blurred topnav + lava-lamp blue ink blobs). This file rewrites those rules so they cohabit with TFCL Play's pre-existing topnav (h-14 / 56px) and Tailwind utility classes without colliding. Integration boundary (read this before editing): - The body padding-top tier (70/100/120) is gated on so it only fires on landing/alpha-style pages. The app's interior pages already account for the 56px fixed nav via their own section padding; this preserves that math and avoids a 14-44px jump on every interior page. - The original `.tfcl-topnav` styles are exposed as `.tfcl-topnav-x` and a softener for the existing navbar is exposed as `.tfcl-navbar-aux`. The wrapper script in layout.ts (navbarHTML) adds the latter class to the existing

, so the blurry / blue-glow border / blue hover character is layered ON TOP of the existing nav without replacing it. - `.tfcl-upper`, `.tfcl-hero-*`, `.tfcl-alpha-*`, `.tfcl-stat-*`, `.tfcl-feature` match the original names so any landing markup already in `routes/` or `pages.ts` can re-use them verbatim. ============================================================================ */ /* ============================ GLOBAL FIX — REMOVE TOP GAP ============================ */ html, body { margin: 0 !important; padding: 0 !important; background: #0a0c10; } .site, .site-header, #page, .site-content { margin: 0 !important; padding: 0 !important; } /* ============================ WORDPRESS ADMIN BAR FIX ============================ */ body.admin-bar .tfcl-topnav { top: 32px; } @media (max-width: 782px) { body.admin-bar .tfcl-topnav { top: 46px; } } /* ============================ FIX — PREVENT NAV OVERLAP (only active on landing-style pages, see below) ============================ */ body[data-page="upper"] { padding-top: 70px; } @media (max-width: 768px) { body[data-page="upper"] { padding-top: 100px; } } @media (max-width: 480px) { body[data-page="upper"] { padding-top: 120px; } } /* ============================================ FINAL FIX — CORRECT BODY PADDING WITH ADMIN BAR ============================================ */ body.admin-bar[data-page="upper"] { padding-top: calc(70px + 32px) !important; } @media (max-width: 782px) { body.admin-bar[data-page="upper"] { padding-top: calc(100px + 46px) !important; } } @media (max-width: 480px) { body.admin-bar[data-page="upper"] { padding-top: calc(120px + 46px) !important; } } /* ============================ STICKY TOP NAVIGATION (original spec, kept verbatim under .tfcl-topnav-x) ============================ */ .tfcl-topnav-x { position: fixed; top: 0; left: 0; width: 100%; padding: 10px 0; background: rgba(20, 20, 20, 0.55); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0, 140, 255, 0.35); z-index: 9999; } .tfcl-topnav-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: center; position: relative; flex-wrap: wrap; } .tfcl-topnav-logo { position: absolute; left: 20px; display: flex; align-items: center; } .tfcl-topnav-logo img { height: auto; width: 150px; } .tfcl-topnav-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; } .tfcl-topnav-links li a { color: #ffffff; text-decoration: none; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px; text-shadow: 0 0 4px rgba(0,0,0,0.6); transition: color 0.2s ease, text-shadow 0.2s ease; } .tfcl-topnav-links li a:hover { color: #4db8ff; text-shadow: 0 0 6px rgba(80,170,255,0.8); } /* ============================ RESPONSIVE NAV ============================ */ @media (max-width: 768px) { .tfcl-topnav-inner { flex-direction: column; gap: 10px; padding: 0 14px; } .tfcl-topnav-logo { position: relative; left: 0; margin-bottom: 6px; } .tfcl-topnav-links { justify-content: center; gap: 18px; } } @media (max-width: 480px) { .tfcl-topnav-inner { gap: 8px; padding: 0 10px; } .tfcl-topnav-logo { margin-bottom: 6px; } .tfcl-topnav-links { flex-wrap: wrap; gap: 12px; justify-content: center; } } /* ============================ HAMBURGER BUTTON ============================ */ .tfcl-hamburger { display: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 22px; cursor: pointer; z-index: 10000; } .tfcl-hamburger span { display: block; height: 3px; background: #fff; margin-bottom: 5px; border-radius: 2px; } /* ============================ MOBILE MENU BEHAVIOR ============================ */ @media (max-width: 900px) { .tfcl-hamburger { display: block; } .tfcl-topnav-links { width: 100%; flex-direction: column; gap: 18px; margin-top: 15px; display: none; } #tfcl-menu-toggle:checked ~ .tfcl-topnav-links { display: flex; } } /* ============================================================ LAVA-LAMP BLUE INK EFFECT — TOP RIGHT ONLY ============================================================ */ @keyframes tfclBlobDrift1 { 0% { transform: translate(0,0) scale(1); opacity: 0.35; } 50% { transform: translate(12px,-18px) scale(1.15); opacity: 0.55; } 100% { transform: translate(0,0) scale(1); opacity: 0.35; } } @keyframes tfclBlobDrift2 { 0% { transform: translate(0,0) scale(0.9); opacity: 0.25; } 50% { transform: translate(-10px,10px) scale(1.05); opacity: 0.40; } 100% { transform: translate(0,0) scale(0.9); opacity: 0.25; } } @keyframes tfclBlobDrift3 { 0% { transform: translate(0,0) scale(1.1); opacity: 0.20; } 50% { transform: translate(16px,6px) scale(1.25); opacity: 0.32; } 100% { transform: translate(0,0) scale(1.1); opacity: 0.20; } } .tfcl-upper { position: relative; color: #ffffff; padding: 160px 20px 80px; text-align: center; overflow: visible; background: #0a0c10; z-index: 1; } /* Full-screen dark base */ .tfcl-upper::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; background: linear-gradient( to right, #0a0c10 0%, #0a0c10 55%, rgba(10,12,16,0.85) 75%, rgba(10,12,16,1) 100% ); } /* Floating blue ink blobs */ .tfcl-upper::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; background: radial-gradient(circle at 82% 12%, rgba(0,140,255,0.55) 0%, rgba(0,140,255,0.32) 12%, rgba(0,140,255,0.12) 26%, rgba(0,140,255,0.00) 40%), radial-gradient(circle at 88% 22%, rgba(0,140,255,0.40) 0%, rgba(0,140,255,0.22) 10%, rgba(0,140,255,0.08) 22%, rgba(0,140,255,0.00) 36%), radial-gradient(circle at 78% 8%, rgba(0,140,255,0.30) 0%, rgba(0,140,255,0.16) 10%, rgba(0,140,255,0.05) 20%, rgba(0,140,255,0.00) 32%); animation: tfclBlobDrift1 11s ease-in-out infinite, tfclBlobDrift2 14s ease-in-out infinite, tfclBlobDrift3 17s ease-in-out infinite; } /* ============================ HERO CONTENT ============================ */ .tfcl-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } .tfcl-hero-logo img { height: 200px; margin-bottom: 32px; } .tfcl-hero-copy h1 { font-size: 3rem; line-height: 1.1; margin: 0 0 12px; } .tfcl-hero-copy p { font-size: 1.15rem; max-width: 700px; margin: 0 auto 24px; color: #e0e0e0; } .tfcl-hero-cta { display: inline-block; padding: 14px 36px; background: #007bff; color: #ffffff; text-decoration: none; font-weight: 600; border-radius: 4px; transition: background 0.2s ease; } .tfcl-hero-cta:hover { background: #0066d6; } /* ============================ STATS ROW ============================ */ .tfcl-hero-stats { display: flex; justify-content: center; gap: 60px; margin-top: 40px; flex-wrap: wrap; } .tfcl-stat-number { font-size: 2.2rem; font-weight: 700; } .tfcl-stat-label { font-size: 0.95rem; color: #b3b3b3; } /* ============================ FEATURE ICONS ============================ */ .tfcl-hero-features { max-width: 1200px; margin: 60px auto 0; padding: 50px 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: center; } .tfcl-feature-icon { margin-bottom: 14px; } .tfcl-feature-icon img { height: 70px; width: auto; display: block; margin: 0 auto 12px; filter: drop-shadow(0 0 6px rgba(0,0,0,0.4)); } .tfcl-feature h3 { font-size: 1.35rem; margin-bottom: 8px; } .tfcl-feature p { font-size: 0.95rem; color: #cccccc; max-width: 280px; margin: 0 auto; } /* ============================ TFCL ALPHA HERO SECTION ============================ */ .tfcl-alpha-hero { position: relative; color: #ffffff; padding: 140px 20px 80px; text-align: center; margin-top: 60px; overflow: hidden; z-index: 1; } .tfcl-alpha-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(0, 140, 255, 0.35) 0%, rgba(0, 140, 255, 0) 70%) 25% 40% / 160px 160px no-repeat, radial-gradient(circle, rgba(80, 170, 255, 0.25) 0%, rgba(80, 170, 255, 0) 70%) 55% 25% / 120px 120px no-repeat, radial-gradient(circle, rgba(0, 110, 220, 0.22) 0%, rgba(0, 110, 220, 0) 70%) 75% 65% / 180px 180px no-repeat, radial-gradient(circle, rgba(255, 60, 0, 0.32) 0%, rgba(255, 60, 0, 0) 70%) 35% 75% / 150px 150px no-repeat, radial-gradient(circle, rgba(255, 100, 40, 0.25) 0%, rgba(255, 100, 40, 0) 70%) 10% 60% / 110px 110px no-repeat, radial-gradient(circle, rgba(255, 80, 0, 0.30) 0%, rgba(255, 80, 0, 0) 80%) 85% 35% / 200px 200px no-repeat; } .tfcl-alpha-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; } .tfcl-alpha-logo img { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto 28px; filter: drop-shadow(0 0 10px rgba(0,0,0,0.45)); } .tfcl-alpha-copy h1 { font-size: 2.6rem; margin: 0 0 16px; } .tfcl-alpha-copy p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 28px; color: #e8e8e8; line-height: 1.55; } .tfcl-alpha-cta { display: inline-block; padding: 14px 36px; background: #007bff; color: #ffffff; text-decoration: none; font-weight: 600; border-radius: 4px; transition: background 0.2s ease; } .tfcl-alpha-cta:hover { background: #0066d6; } /* ============================================================================ COHABIT LAYER — soft additions to the existing Tailwind navbar These are applied via the .tfcl-navbar-aux class added by layout.ts to the existing

element. They layer the bluish character from the original stylesheet ON TOP of the nav without collapsing the navbar's logical structure, dropdowns, or button-focus rings. ============================================================================ */ .tfcl-navbar-aux { background: rgba(20, 20, 20, 0.55) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0, 140, 255, 0.35) !important; transition: background 0.2s ease, border-color 0.2s ease; } /* Each coloured nav-link child gets a soft blue hover halo so the existing top nav loses the flat unstyled feel without rewiring its DOM. */ .tfcl-navbar-aux .nav-link:hover, .tfcl-navbar-aux .nav-more-btn:hover { color: #4db8ff !important; text-shadow: 0 0 6px rgba(80,170,255,0.8); } /* When the page is a landing/upper page, raise the navbar above the blob layer so the lava-lamp effect doesn't visually smudge through the bar. */ body[data-page="upper"] > nav.fixed { z-index: 60; }