/* Site-wide look (black + lime, pill buttons). Loaded after each page's own styles, so rules here override them. */ :root { --accent: #c5f23f; --accent-text: #0a0a0a; --surface: #151515; } /* Black lives on , and stays transparent, so the fixed .site-glow layer (z-index -1) shows between the black and the page content. */ html { background: #000000; } body { background: transparent; } header { background: rgba(0, 0, 0, 0.8); border-bottom-color: transparent; } /* ---- Top bar: identical size, shape and spacing on every page ---- Uses "header ..." selectors so these beat each page's own .nav rules. */ header .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: min(1200px, calc(100% - 48px)); max-width: none; height: 76px; min-height: 0; margin: 0 auto; padding: 0; flex-wrap: nowrap; } header { padding: 0; } header .nav-left { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 12px; min-width: 0; } header .nav-links { grid-column: 2; justify-self: center; } header .nav-cta { grid-column: 3; justify-self: end; margin: 0; } header .brand { flex-shrink: 0; display: flex; align-items: center; gap: 0; min-width: 0; } header .brand-logo { display: block; width: 110px; max-width: none; height: auto; } @media (max-width: 820px) { header .nav { grid-template-columns: minmax(0, 1fr) auto; width: calc(100% - 28px); height: 64px; gap: 12px; } header .nav-cta { grid-column: 2; } header .nav-links { display: none; } header .brand-logo { width: 92px; } header .account-trigger { width: 36px; height: 36px; } header .nav-cta { padding: 9px 16px; font-size: 0.88rem; } } /* ---- Account menu (profile icon, top left) ---- */ .account-wrap { position: relative; padding-bottom: 14px; margin-bottom: -14px; } .account-trigger { width: 38px; height: 38px; border: 1px solid var(--line, rgba(255,255,255,0.1)); border-radius: 50%; background: rgba(255,255,255,0.03); color: var(--text, #fafafa); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; padding: 0; } .account-trigger:hover { background: rgba(255,255,255,0.08); } .account-trigger svg { width: 18px; height: 18px; fill: currentColor; } .account-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(calc(-50% + var(--menu-shift, 0px))) translateY(6px); opacity: 0; pointer-events: none; width: 190px; background: rgba(15,15,15,0.98); border: 1px solid var(--line, rgba(255,255,255,0.1)); border-radius: 16px; padding: 12px; box-shadow: 0 14px 28px rgba(0,0,0,0.28); transition: opacity 0.2s ease, transform 0.2s ease; transition-delay: 0.08s; z-index: 20; } .account-wrap:hover .account-menu, .account-wrap:focus-within .account-menu, .account-wrap.is-open .account-menu { opacity: 1; pointer-events: auto; transform: translateX(calc(-50% + var(--menu-shift, 0px))) translateY(0); } .account-name { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #a3a3a3); margin-bottom: 10px; text-align: center; } .account-name.premium-user { background: linear-gradient(135deg, #d4f85e, #b9e82e); -webkit-background-clip: text; background-clip: text; color: transparent; } .account-menu .menu-btn { width: 100%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text, #fafafa); border-radius: 999px; padding: 10px 12px; font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .account-menu .upgrade-btn { display: none; margin-top: 10px; background: linear-gradient(135deg, #d4f85e, #b9e82e); border-color: rgba(197,242,63,0.48); color: #0a0a0a; box-shadow: 0 10px 20px rgba(197,242,63,0.09); } .account-menu .logout-btn, .account-menu .profile-btn, .account-menu .admin-btn { display: none; margin-top: 10px; } /* Top navigation: plain white links, normal case. */ .nav-links { gap: 36px; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fafafa; } .nav-links > a, .nav-links .tools-trigger { transition: opacity 0.2s ease; } .nav-links > a:hover, .nav-links .tools-trigger:hover { opacity: 0.7; } /* Header call-to-action: lime pill with an icon. */ .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; transition: filter 0.2s ease, transform 0.2s ease; } .nav-cta:hover { background: var(--accent); color: var(--accent-text); filter: brightness(1.08); transform: translateY(-1px); } /* "Login" in the header is a white pill instead. */ .nav-cta.is-light { background: #ffffff; } .nav-cta.is-light:hover { background: #ffffff; } .nav-cta svg, .btn-icon { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; } /* ---- Page background: soft horizon glow with grain (same style as the home hero) ---- */ body::before { display: none; } .site-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0.85; } .site-glow::before { content: ""; position: absolute; inset: -5%; background: radial-gradient(ellipse 22% 10% at 40% 98%, rgba(215,228,255,0.5), transparent 70%), radial-gradient(ellipse 18% 9% at 70% 99%, rgba(215,228,255,0.45), transparent 70%), radial-gradient(ellipse 58% 13% at 22% 90%, rgba(232,96,60,0.85), transparent 70%), radial-gradient(ellipse 58% 13% at 80% 88%, rgba(232,96,60,0.8), transparent 70%), radial-gradient(ellipse 30% 48% at 2% 78%, rgba(255,158,150,0.65), transparent 70%), radial-gradient(ellipse 30% 48% at 98% 76%, rgba(255,158,150,0.6), transparent 70%), radial-gradient(ellipse 60% 30% at 28% 108%, rgba(58,108,138,0.65), transparent 72%), radial-gradient(ellipse 95% 40% at 50% 114%, rgba(30,58,98,0.9), transparent 75%); filter: blur(14px) saturate(1.1); animation: siteGlowDrift 20s ease-in-out infinite alternate; } /* Black dome over the middle, so the glow curves up the screen edges. */ .site-glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 72% at 50% 34%, #000000 80%, rgba(0,0,0,0.6) 92%, transparent 100%), 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); } @keyframes siteGlowDrift { from { transform: translate3d(-1.5%, 0, 0) scale(1); } to { transform: translate3d(1.5%, -1.5%, 0) scale(1.03); } } @media (max-width: 820px) { .site-glow::after { background: radial-gradient(ellipse 66% 70% at 50% 32%, #000000 78%, rgba(0,0,0,0.6) 92%, transparent 100%), 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); } } @media (prefers-reduced-motion: reduce) { .site-glow::before { animation: none; } }