.bt-login-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; backdrop-filter: blur(18px); } .bt-login-nav-brand { display: inline-flex; align-items: center; gap: 0.85rem; min-width: 0; } .bt-login-nav-brand-link { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; border-radius: 16px; } .bt-login-nav-brand-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 4px; } .bt-login-nav-logo { width: auto; height: 60px; max-width: 240px; object-fit: contain; flex-shrink: 0; } .bt-login-nav-menu { display: none; position: relative; margin-left: auto; } .bt-login-nav-menu summary { list-style: none; } .bt-login-nav-menu summary::-webkit-details-marker { display: none; } .bt-login-nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; box-shadow: none; } .bt-login-nav-menu-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); transform: translateY(-1px); } .bt-login-nav-menu-icon { display: inline-flex; flex-direction: column; gap: 4px; } .bt-login-nav-menu-icon span { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: transform 0.18s ease, opacity 0.18s ease; } .bt-login-nav-menu[open] .bt-login-nav-menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bt-login-nav-menu[open] .bt-login-nav-menu-icon span:nth-child(2) { opacity: 0; } .bt-login-nav-menu[open] .bt-login-nav-menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .bt-login-nav-menu-panel { position: absolute; right: 0; top: calc(100% + 0.65rem); width: min(240px, 72vw); padding: 0.65rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(12, 18, 41, 0.98); box-shadow: 0 24px 60px rgba(2, 6, 23, 0.28); backdrop-filter: blur(18px); z-index: 30; } .bt-login-nav-menu-links { display: grid; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .bt-login-nav-menu-links a { display: flex; align-items: center; justify-content: flex-start; min-height: 42px; padding: 0.7rem 0.95rem; border-radius: 12px; color: rgba(255, 255, 255, 0.92); border: 1px solid transparent; transition: 0.18s ease; font-size: 0.92rem; } .bt-login-nav-menu-links a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); } .bt-login-nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .bt-login-nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.45rem 0.9rem; border-radius: 999px; color: var(--muted); border: 1px solid transparent; transition: 0.18s ease; font-size: 0.9rem; } .bt-login-nav-links a:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); } /* --- PUBLIC CLASSIC DESIGN SYSTEM COMPONENTS --- */ .hero { padding: 2rem 1.5rem 2.5rem; background: linear-gradient(135deg, rgba(27, 37, 89, 0.04) 0%, rgba(74, 58, 255, 0.02) 100%); border-radius: 1.5rem; border: 1px solid rgba(27, 37, 89, 0.08); margin-bottom: 1.5rem; } .hero-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .hero-tag { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 2rem; background: rgba(245, 166, 35, 0.12); color: #d97706; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); font-weight: 800; color: #1B2559; line-height: 1.25; letter-spacing: -0.02em; margin: 0; } .lead { font-size: 1.05rem; color: #4b5563; line-height: 1.65; margin: 0; } .panel.section, .panel { background: #ffffff; border: 1px solid rgba(27, 37, 89, 0.08); border-radius: 1.5rem; padding: 1.75rem 2rem; margin-bottom: 1.5rem; box-shadow: 0 10px 30px rgba(27, 37, 89, 0.04); } .section-head { margin-bottom: 1rem; } .section-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #f5a623; margin-bottom: 0.25rem; } .section-head h2, .section h2 { font-size: 1.65rem; font-weight: 700; color: #1B2559; margin: 0; line-height: 1.3; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; } .card { padding: 1.35rem 1.5rem; border-radius: 1.1rem; background: #ffffff; border: 1px solid rgba(27, 37, 89, 0.08); box-shadow: 0 4px 12px rgba(27, 37, 89, 0.03); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(27, 37, 89, 0.08); border-color: rgba(245, 166, 35, 0.4); } .card h3 { font-size: 1.1rem; font-weight: 700; color: #1B2559; margin: 0 0 0.5rem; } .card p { font-size: 0.9rem; color: #4b5563; line-height: 1.6; margin: 0; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.65rem; padding: 0.65rem 1.25rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.875rem; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; border: 1px solid transparent; } .btn-primary { background: linear-gradient(135deg, #1B2559 0%, #2B3678 100%); color: #ffffff !important; box-shadow: 0 6px 18px rgba(27, 37, 89, 0.18); } .btn-primary:hover { background: linear-gradient(135deg, #2B3678 0%, #4A3AFF 100%); transform: translateY(-1px); } .btn-ghost { background: #ffffff; border: 1px solid rgba(27, 37, 89, 0.14); color: #1B2559 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); } .btn-ghost:hover { background: #f8fbff; border-color: #1B2559; transform: translateY(-1px); } .chip-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .chip { display: inline-flex; align-items: center; padding: 0.45rem 0.85rem; border-radius: 2rem; background: rgba(27, 37, 89, 0.04); border: 1px solid rgba(27, 37, 89, 0.08); font-size: 0.825rem; font-weight: 600; color: #1B2559; } .list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 1rem; } .list-item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0.9rem; border-radius: 0.75rem; background: rgba(27, 37, 89, 0.02); border: 1px solid rgba(27, 37, 89, 0.06); } .bullet { width: 8px; height: 8px; border-radius: 50%; background: #F5A623; margin-top: 0.45rem; flex-shrink: 0; } .list-item strong { display: block; font-size: 0.875rem; font-weight: 700; color: #1B2559; } .list-item span { font-size: 0.825rem; color: #6b7280; line-height: 1.45; } .callout { padding: 1.25rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(245, 166, 35, 0.08) 0%, rgba(74, 58, 255, 0.03) 100%); border: 1px solid rgba(245, 166, 35, 0.25); margin-top: 1.25rem; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.25rem; } .contact-card { padding: 1.1rem; border-radius: 0.85rem; background: #ffffff; border: 1px solid rgba(27, 37, 89, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); } .contact-card small { display: block; font-size: 0.725rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.25rem; } .contact-card strong { display: block; font-size: 0.95rem; font-weight: 700; color: #1B2559; } .text-link { color: #4A3AFF !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; transition: color 0.15s ease; } .text-link:hover { color: #1B2559 !important; } @media (max-width: 840px) { .bt-login-nav { flex-direction: row; align-items: center; justify-content: space-between; } .bt-login-nav-links { justify-content: flex-start; } } @media (max-width: 640px) { .bt-login-nav-logo { height: 44px; max-width: 180px; } .bt-login-nav-menu { display: inline-flex; } .bt-login-nav-links { display: none; } .bt-login-nav-menu-panel { width: min(260px, calc(100vw - 1rem)); } }