/* ============================================================ ScottMo.Dev portfolio theme ("aurora") Site-wide dark glass theme. Pairs with data-bs-theme="dark" on so Bootstrap components render dark; this file adds the aurora background, glass surfaces, and overrides for the legacy light styles in site.css. ============================================================ */ body.aurora { background: #0b1026 !important; color: #eef2ff; overflow-x: hidden; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } body.aurora ::selection { background: rgba(125, 149, 255, .4); } /* Neutralize the light glass shell on the aurora page */ body.aurora .site-shell { margin: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; flex-direction: column; min-height: 100vh; } body.aurora main[role="main"] { flex: 1 0 auto; } /* ---- Drifting aurora background ---- */ .aurora-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aurora-bg .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; } .aurora-bg .b1 { width: 46vw; height: 46vw; min-width: 380px; min-height: 380px; background: #4f6df5; top: -18vh; left: -10vw; animation: pf-drift1 16s ease-in-out infinite alternate; } .aurora-bg .b2 { width: 38vw; height: 38vw; min-width: 320px; min-height: 320px; background: #8a3ff0; top: 30vh; right: -12vw; animation: pf-drift2 20s ease-in-out infinite alternate; } .aurora-bg .b3 { width: 26vw; height: 26vw; min-width: 240px; min-height: 240px; background: #1ba8c4; top: 68vh; left: 22vw; animation: pf-drift3 14s ease-in-out infinite alternate; } @keyframes pf-drift1 { to { transform: translate(10vw, 8vh) scale(1.18); } } @keyframes pf-drift2 { to { transform: translate(-8vw, -6vh) scale(1.1); } } @keyframes pf-drift3 { to { transform: translate(6vw, -10vh) scale(.9); } } /* Subtle grain over the blobs */ .aurora-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size: 3px 3px; } /* ---- Navbar on the aurora page ---- */ body.aurora header, body.aurora main[role="main"], body.aurora footer { position: relative; z-index: 1; } body.aurora .navbar .navbar-brand, body.aurora .navbar .navbar-brand:hover { color: #eef2ff !important; font-weight: 750; letter-spacing: -.01em; } body.aurora .brand-dot { color: #4fd8e8; } body.aurora .navbar .nav-link { color: #9fabd6 !important; } body.aurora .navbar .nav-link:hover, body.aurora .navbar .nav-link:focus { color: #eef2ff !important; } body.aurora .login-btn { color: #0b1026 !important; background: linear-gradient(90deg, #7d95ff, #4fd8e8) !important; border: 0 !important; border-radius: 999px; font-weight: 700; padding: .45rem 1.4rem; transition: transform .25s ease, box-shadow .25s ease; } body.aurora .login-btn:hover, body.aurora .login-btn:focus { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79, 216, 232, .35); color: #0b1026 !important; } /* ---- Hero ---- */ .pf-hero { padding-top: 9vh; padding-bottom: 2vh; } .pf-h1 { margin: 0; font-size: clamp(40px, 7.4vw, 92px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; } .pf-h1 .pf-line { display: block; overflow: hidden; } .pf-h1 .pf-line > span { display: inline-block; transform: translateY(112%); animation: pf-rise .85s cubic-bezier(.2, .85, .25, 1) forwards; } .pf-h1 .pf-l2 > span { animation-delay: .14s; } .pf-grad { background: linear-gradient(90deg, #7d95ff, #c07dff, #4fd8e8, #7d95ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-hueflow 8s linear infinite; } @keyframes pf-hueflow { to { background-position: 300% 0; } } @keyframes pf-rise { to { transform: translateY(0); } } @keyframes pf-fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .pf-standfirst { margin-top: 22px; opacity: 0; animation: pf-fadeup .8s ease .55s forwards; } .pf-standfirst p { font-size: clamp(17px, 1.9vw, 22px); color: #c6cff2; margin: 0; max-width: 52ch; } .pf-standfirst em { font-style: normal; color: #4fd8e8; } /* ---- Contact CTA ---- */ .pf-cta { padding-top: 4vh; padding-bottom: 4vh; } .pf-cta-panel { padding: 5vh 32px; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-radius: 20px; opacity: 0; animation: pf-fadeup .8s ease .8s forwards; } .pf-cta-panel h2 { margin: 0 0 12px; font-size: clamp(32px, 5.4vw, 64px); font-weight: 800; letter-spacing: -.035em; } .pf-cta-panel p { margin: 0 0 26px; color: #9fabd6; font-size: 15px; } .pf-btn { display: inline-block; padding: 14px 34px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; color: #0b1026; background: linear-gradient(90deg, #7d95ff, #4fd8e8); transition: transform .25s ease, box-shadow .25s ease; } .pf-btn:hover, .pf-btn:focus { color: #0b1026; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(79, 216, 232, .35); } /* ---- Footer on the aurora page ---- */ body.aurora footer.footer { border-top: 1px solid rgba(255,255,255,.12) !important; color: #9fabd6; font-size: 12.5px; padding-top: 18px; padding-bottom: 26px; } body.aurora footer.footer a, body.aurora footer.footer span { color: #9fabd6 !important; font-weight: 600; transition: color .25s; } body.aurora footer.footer a:hover { color: #4fd8e8 !important; } /* ---- Interior pages: dark glass surfaces ---- */ body.aurora main.container { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 40px rgba(5, 8, 25, .5); color: #eef2ff; } body.aurora .card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #eef2ff; } body.aurora .list-group-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #dfe6ff; } body.aurora .list-group-item.active { background: rgba(125, 149, 255, .25); border-color: rgba(125, 149, 255, .4); color: #fff; } body.aurora .text-muted, body.aurora .blockquote-footer { color: #9fabd6 !important; } body.aurora hr { border-color: rgba(255,255,255,.15); opacity: 1; } body.aurora a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.pf-btn) { color: #8fb4ff; } body.aurora a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.pf-btn):hover { color: #4fd8e8; } /* Nav active underline (site.css draws it dark) */ body.aurora .navbar .nav-link.active::after, body.aurora .navbar .nav-link[aria-current="page"]::after { background: rgba(255,255,255,.45); } /* Logout button back to light (site.css forces it black) */ body.aurora .navbar .btn-outline-light { color: #eef2ff !important; border-color: rgba(255,255,255,.45) !important; } body.aurora .navbar .btn-outline-light:hover, body.aurora .navbar .btn-outline-light:focus { color: #0b1026 !important; background-color: #eef2ff !important; border-color: #eef2ff !important; box-shadow: 0 0 0 .2rem rgba(255,255,255,.15) !important; } /* Hamburger back to light (site.css forces it black) */ body.aurora .navbar .navbar-toggler { border-color: rgba(255,255,255,.45) !important; } body.aurora .navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.15) !important; } body.aurora .navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; } /* Dropdown menus as glass */ body.aurora .navbar .dropdown-menu { background: rgba(14, 19, 44, .92); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.aurora .dropdown-item { color: #dfe6ff; } body.aurora .dropdown-item:hover, body.aurora .dropdown-item:focus { background: rgba(255,255,255,.1); color: #fff; } /* Pills and thumbs from site.css were white-on-white */ body.aurora .pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #eef2ff; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .aurora-bg .blob, .pf-grad { animation: none !important; } .pf-h1 .pf-line > span { transform: none; animation: none; } .pf-standfirst, .pf-cta-panel { opacity: 1; animation: none; } }