/* ═══════════════════════════════════════════════════ BRYCENWOOD.COM — Global Design System ═══════════════════════════════════════════════════ */ /* Fonts loaded via tags in HTML for performance. Do not use @import. */ *{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#050508; --card:#0a0b10; --card-border:#141620; --lime:#00ff88; --lime-dim:#00ff8833; --lime-deep:#00cc6a; --amber:#ffaa00; --amber-dim:rgba(255,170,0,0.25); --text:#e8e8f0; --text-dim:#8888a0; --text-muted:#55556a; --mono:'JetBrains Mono',monospace; --sans:'Outfit',sans-serif; --max-width:1200px; --content-width:800px; } html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} /* ─── SCANLINE OVERLAY ─── */ body::before{ content:'';position:fixed;inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,136,0.006) 2px,rgba(0,255,136,0.006) 4px); pointer-events:none;z-index:9999; } /* ─── AMBIENT ORBS ─── */ .orb{position:fixed;border-radius:50%;filter:blur(160px);opacity:0.04;pointer-events:none;z-index:0} .orb-1{width:700px;height:700px;background:var(--lime);top:-300px;left:-200px} .orb-2{width:500px;height:500px;background:#0066ff;bottom:-200px;right:-150px} .orb-3{width:400px;height:400px;background:var(--lime);bottom:30%;left:50%;transform:translateX(-50%);opacity:0.02} /* ─── TYPOGRAPHY ─── */ h1,h2,h3,h4{font-family:var(--sans);line-height:1.15;letter-spacing:-0.5px} h1{font-weight:900;font-size:clamp(36px,7vw,72px);letter-spacing:-2px} h2{font-weight:800;font-size:clamp(24px,4vw,40px);letter-spacing:-1px} h3{font-weight:700;font-size:clamp(18px,2.5vw,24px)} h4{font-weight:600;font-size:16px} p{line-height:1.7;color:var(--text-dim);font-size:15px} .accent{color:var(--lime);text-shadow:0 0 40px var(--lime-dim),0 0 80px rgba(0,255,136,0.08)} .accent-subtle{color:var(--lime);text-shadow:0 0 20px var(--lime-dim)} code,.code{ font-family:var(--mono);font-size:13px; background:rgba(0,255,136,0.06); border:1px solid var(--card-border); padding:2px 8px;border-radius:3px; color:var(--lime); } /* ─── LAYOUT ─── */ .container{max-width:var(--max-width);margin:0 auto;padding:0 24px} .container-narrow{max-width:var(--content-width);margin:0 auto;padding:0 24px} /* ─── NAV ─── */ nav{ position:fixed;top:0;left:0;right:0;z-index:100; padding:16px 24px; background:rgba(5,5,8,0.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--card-border); display:flex;align-items:center;justify-content:space-between; } .nav-logo{ font-family:var(--mono);font-weight:700;font-size:14px; letter-spacing:3px;color:var(--lime); text-shadow:0 0 20px var(--lime-dim); text-decoration:none; } .nav-links{ display:flex;align-items:center;gap:28px; } .nav-link{ font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:1px;text-transform:uppercase; color:var(--text-dim);text-decoration:none; transition:color 0.3s; } .nav-link:hover{color:var(--lime)} .nav-link.active{color:var(--lime)} .nav-cta{ font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:1px;text-transform:uppercase; color:var(--bg);background:var(--lime); padding:8px 18px;border:none;border-radius:2px; cursor:pointer;text-decoration:none; transition:all 0.3s; } .nav-cta:hover{background:#00ffaa;box-shadow:0 0 20px var(--lime-dim)} /* Mobile nav toggle */ .nav-toggle{ display:none; background:none;border:none;cursor:pointer; width:24px;height:18px;position:relative; flex-direction:column;justify-content:space-between; } .nav-toggle span{ display:block;width:100%;height:2px; background:var(--text-dim);transition:all 0.3s; } /* ─── FOOTER ─── */ footer{ text-align:center; padding:60px 24px 40px; border-top:1px solid var(--card-border); } .footer-grid{ max-width:var(--max-width);margin:0 auto; display:grid;grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;text-align:left; padding-bottom:40px; border-bottom:1px solid var(--card-border); margin-bottom:32px; } .footer-brand{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--lime);letter-spacing:2px;margin-bottom:12px} .footer-desc{font-size:13px;color:var(--text-muted);line-height:1.6;max-width:280px} .footer-heading{ font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:2px;text-transform:uppercase; color:var(--text-dim);margin-bottom:16px; } .footer-link{ display:block;font-size:13px;color:var(--text-muted); text-decoration:none;padding:4px 0;transition:color 0.3s; } .footer-link:hover{color:var(--lime)} .footer-bottom{ font-family:var(--mono);font-size:10px; color:var(--text-muted);letter-spacing:2px; } .footer-bottom .lime{color:var(--lime)} .social-row{ display:flex;gap:16px;justify-content:center;margin-top:12px; } .social-link{ font-family:var(--mono);font-size:10px; color:var(--text-muted);text-decoration:none; letter-spacing:1px;transition:color 0.3s; } .social-link:hover{color:var(--lime)} /* ─── SECTIONS ─── */ .section-dark{ background:linear-gradient(180deg,rgba(8,9,14,1),rgba(5,5,8,1)); position:relative; } .section-raised{ background:linear-gradient(180deg,rgba(12,13,20,1),rgba(8,9,14,1)); position:relative; } /* ─── BREADCRUMBS ─── */ .breadcrumb{ font-family:var(--mono);font-size:11px; color:var(--text-muted);letter-spacing:0.5px; padding:100px 24px 0; max-width:var(--content-width);margin:0 auto; } .breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color 0.3s} .breadcrumb a:hover{color:var(--lime)} .breadcrumb .sep{margin:0 8px;opacity:0.5} /* ─── DIVIDERS ─── */ .divider{ width:1px;height:60px;margin:0 auto; background:linear-gradient(180deg,transparent,var(--lime-dim),transparent); } .divider-horizontal{ width:100%;height:1px; background:linear-gradient(90deg,transparent,var(--card-border),transparent); margin:40px 0; } /* ─── ANIMATIONS ─── */ @keyframes fadeUp{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} } @keyframes breathe{ 0%,100%{opacity:0.3;transform:translateX(-50%) translateY(0)} 50%{opacity:0.7;transform:translateX(-50%) translateY(-4px)} } @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.4} } @keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease} .reveal.visible{opacity:1;transform:translateY(0)} /* Stagger */ .reveal:nth-child(1).visible{transition-delay:0s} .reveal:nth-child(2).visible{transition-delay:0.05s} .reveal:nth-child(3).visible{transition-delay:0.1s} .reveal:nth-child(4).visible{transition-delay:0.15s} .reveal:nth-child(5).visible{transition-delay:0.2s} .reveal:nth-child(6).visible{transition-delay:0.25s} /* ─── STICKY MOBILE BAR ─── */ .sticky-bar{ display:none; position:fixed;bottom:0;left:0;right:0;z-index:200; padding:12px 16px; background:rgba(5,5,8,0.95); backdrop-filter:blur(20px); border-top:1px solid var(--card-border); text-align:center; transform:translateY(100%); transition:transform 0.4s ease; } .sticky-bar.visible{transform:translateY(0)} .sticky-bar-btn{ display:block;width:100%; font-family:var(--mono);font-size:13px;font-weight:700; letter-spacing:1.5px;text-transform:uppercase; color:var(--bg);background:var(--lime); padding:14px 24px;border:none;border-radius:3px; cursor:pointer;text-decoration:none; box-shadow:0 0 20px var(--lime-dim); } .sticky-bar-sub{ font-family:var(--mono);font-size:9px;color:var(--text-muted); margin-top:6px;letter-spacing:1px; } /* ─── RESPONSIVE ─── */ @media(max-width:768px){ .sticky-bar{display:block} footer{padding-bottom:100px} .nav-links{display:none} .nav-toggle{display:flex} .nav-links.open{ display:flex;flex-direction:column; position:absolute;top:100%;left:0;right:0; background:rgba(5,5,8,0.98); backdrop-filter:blur(20px); padding:16px 24px;gap:16px; border-bottom:1px solid var(--card-border); } .nav-cta{display:none} .footer-grid{grid-template-columns:1fr 1fr;gap:24px} .container,.container-narrow{padding:0 16px} .breadcrumb{padding:90px 16px 0} } @media(max-width:480px){ nav{padding:12px 16px} .footer-grid{grid-template-columns:1fr} }