/* ===== SHARED STYLES — TimeToBuyBitcoin.com ===== */ /* Included on all pages. Keep page-specific styles in each HTML file. */ /* Fonts loaded via tags in HTML for better performance */ /* ===== RESET ===== */ *{margin:0;padding:0;box-sizing:border-box} /* ===== THEME VARIABLES ===== */ body{ --bg:#080c14;--bg-s:#0c1221;--text:#94a3b8;--text-l:#e2e8f0;--text-m:#475569;--text-d:#64748b; --brd:#1e293b;--brd-h:#334155;--overlay:rgba(8,12,20,0.55);--tt-bg:rgba(15,23,42,0.92); background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif; transition:background 0.3s,color 0.3s } body.light{ --bg:#f8fafc;--bg-s:#ffffff;--text:#475569;--text-l:#1e293b;--text-m:#94a3b8;--text-d:#64748b; --brd:#e2e8f0;--brd-h:#cbd5e1;--overlay:rgba(248,250,252,0.55);--tt-bg:rgba(255,255,255,0.95) } /* ===== NAVBAR ===== */ #navbar{ position:relative;z-index:10000;flex-shrink:0; border-bottom:1px solid var(--brd);background:var(--bg) } .navbar-inner{ display:flex;align-items:center;justify-content:space-between; padding:10px 24px;max-width:100% } .logo{display:flex;align-items:center;gap:10px;text-decoration:none} .logo-icon{ width:30px;height:30px;background:linear-gradient(135deg,#f7931a,#e8850f);border-radius:50%; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff; box-shadow:0 0 12px rgba(247,147,26,0.3) } .logo-text{font-size:18px;font-weight:600;color:var(--text-l);letter-spacing:-0.3px;margin:0;line-height:1} /* Desktop nav links */ .nav-links{display:flex;gap:4px;align-items:center} .nav-link{ font-size:14px;color:var(--text-m);text-decoration:none;padding:6px 14px; border-radius:6px;transition:all 0.2s } .nav-link:hover{color:var(--text-l);background:var(--bg-s)} .nav-link.active{color:#f7931a;background:rgba(247,147,26,0.1)} /* Theme toggle */ .theme-btn{ background:var(--bg-s);border:1px solid var(--brd);border-radius:4px; color:var(--text-m);font-size:14px;padding:4px 8px;cursor:pointer;transition:all 0.15s } .theme-btn:hover{border-color:var(--brd-h);color:var(--text)} /* Right side group */ .nav-right{display:flex;align-items:center;gap:8px;position:relative} /* ===== BURGER MENU ===== */ .burger{ display:none;background:none;border:none;cursor:pointer;padding:6px; color:var(--text-l);position:relative } .burger svg{display:block;transition:transform 0.3s ease} .burger.active svg{transform:rotate(90deg)} /* Dropdown */ .mobile-dropdown{ position:absolute;top:calc(100% + 8px);right:0; background:var(--bg-s);border:1px solid var(--brd);border-radius:12px; padding:8px;min-width:200px;z-index:110; box-shadow:0 12px 40px rgba(0,0,0,0.4); transform:translateY(-8px) scale(0.95);opacity:0;pointer-events:none; transition:transform 0.2s cubic-bezier(0.16,1,0.3,1),opacity 0.15s ease } .mobile-dropdown.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto} .mobile-dropdown .nav-link{ display:block;font-size:15px;padding:12px 16px;border-radius:8px;width:100%;text-align:left } .mobile-dropdown .nav-link:hover{background:var(--bg)} .mobile-dropdown .dd-divider{height:1px;background:var(--brd);margin:4px 8px} /* ===== RESPONSIVE ===== */ @media(max-width:768px){ .navbar-inner{padding:10px 14px} .nav-links{display:none} .burger{display:block} .logo-text{font-size:16px} } @media(max-width:480px){ .navbar-inner{padding:8px 10px} .logo-text{font-size:15px} } /* ===== FOOTER ===== */ #site-footer{ border-top:1px solid var(--brd);background:var(--bg); padding:16px 24px;color:var(--text-d);font-size:12px; flex-shrink:0;margin-top:auto } #site-footer a{color:var(--text-m);text-decoration:none;transition:color 0.2s} #site-footer a:hover{color:var(--text-l)} .footer-inner{ display:flex;flex-direction:column;align-items:center;gap:8px; max-width:760px;margin:0 auto } .footer-nav{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center} .footer-nav-link{font-size:12px;color:var(--text-m);transition:color 0.2s} .footer-nav-link:hover{color:var(--text-l)} .footer-sep{color:var(--text-d);font-size:10px;opacity:0.5} .footer-meta{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;align-items:center;font-size:11px;color:var(--text-d)} @media(max-width:768px){ #site-footer{padding:14px 16px} .footer-nav{gap:4px 10px} .footer-nav-link{font-size:11px} .footer-meta{font-size:10px;gap:3px 8px} } @media(max-width:480px){ #site-footer{padding:12px 10px} .footer-nav{gap:3px 8px} .footer-nav-link{font-size:11px} .footer-sep{font-size:9px} } /* ===== SMOOTH MICRO-ANIMATIONS ===== */ /* Paywall section switching — fade in on show */ @keyframes pwFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .pw-section.visible{animation:pwFadeIn 0.22s ease-out both} /* Buttons — subtle press feedback */ button,a.cta-btn,.pw-btn,.ctrl-btn,.tool-btn{ transition:transform 0.15s ease-out,box-shadow 0.15s ease-out,opacity 0.15s ease-out, border-color 0.15s ease-out,color 0.15s ease-out,background 0.15s ease-out } button:active:not(:disabled),.pw-btn:active:not(:disabled),a.cta-btn:active{ transform:scale(0.97) } /* Links — smooth color */ a{transition:color 0.15s ease-out} /* Cards — gentle lift */ .report-card,.pw-plan,.snap-card{ transition:transform 0.2s ease-out,border-color 0.2s ease-out,box-shadow 0.2s ease-out } /* Inputs — focus ring */ input,textarea{ transition:border-color 0.15s ease-out,box-shadow 0.15s ease-out } /* Messages — fade in */ .pw-msg{transition:opacity 0.2s ease-out,color 0.15s ease-out} /* Badges */ .report-badge{transition:transform 0.15s ease-out} @media(prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }