/* ============================================================================ OBLIVION THEME — Cool Grey Variant - Grey-black background - Glassmorphism panels - White text - Cyan + Coral accents - Bubble backdrop support () ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&display=swap'); /* -------------------- Design Tokens -------------------- */ :root{ --bg: #0f1014; /* cool greyish black */ --ink: #ffffff; /* Accents */ --accent: #00d4ff; /* cyan */ --accent-2: #ff5a63; /* coral */ --accent-3: #7a7cff; /* bluish violet */ /* Glass + FX */ --glass: rgba(255,255,255,0.07); --glass-b: rgba(255,255,255,0.12); --blur: 14px; --radius: 14px; --radius-xl: 18px; --glow: 0 0 36px -8px rgba(0,212,255,.35), 0 0 50px -12px rgba(255,90,99,.25); --ease-out: cubic-bezier(.16,1,.3,1); --ease-smooth: cubic-bezier(.25,.46,.45,.94); } /* -------------------- Base -------------------- */ *{ font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; padding:0; box-sizing: border-box; text-decoration: none; color: var(--ink); } html, body { height: 100%; } * { scroll-behavior: smooth; } body{ background: var(--bg); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; } /* Ambient blobs for subtle depth */ body::before, body::after{ content:""; position: fixed; width: 60vmax; height: 60vmax; border-radius: 999px; filter: blur(64px); opacity:.15; z-index:-2; animation: bgFloat 24s var(--ease-out) infinite; } body::before{ top:-12%; left:-14%; background: radial-gradient(circle, rgba(0,212,255,.5), transparent 70%); } body::after{ bottom:-18%; right:-12%; background: radial-gradient(circle, rgba(255,90,99,.45), transparent 70%); animation-delay: -8s; } @keyframes bgFloat{ 0%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(2%,-2%,0) scale(1.05); } 100%{ transform: translate3d(0,0,0) scale(1); } } /* -------------------- Bubble Backdrop Canvas -------------------- */ /* Add inside */ #bg-bubbles{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; /* behind everything */ pointer-events: none; } @media (prefers-reduced-motion: reduce){ #bg-bubbles, body::before, body::after{ display:none; } } /* -------------------- Layout Helpers -------------------- */ .container, .form-container{ min-height: 100svh; /* full viewport height (mobile safe) */ display: flex; align-items: center; justify-content: center; padding: 24px; } /* Center properly and keep wrapper transparent */ .form-container{ background: transparent !important; /* no giant outer box */ border: none !important; box-shadow: none !important; backdrop-filter: none !important; } /* -------------------- Glassmorphic Panels -------------------- */ .glass, .container .content, .form-container form{ background: var(--glass); border: 1px solid var(--glass-b); border-radius: var(--radius-xl); backdrop-filter: blur(var(--blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--blur)) saturate(120%); box-shadow: 0 10px 30px rgba(0,0,0,.55), var(--glow); padding: 30px 40px; text-align: center; animation: fadeIn .9s var(--ease-smooth) forwards; opacity: 0; } /* Auth form sizing */ .form-container form{ width: min(480px, calc(100% - 32px)); margin: 0 auto; } /* -------------------- Typography -------------------- */ h1, h2, h3, h4 { margin-bottom: 12px; } h1 span, h3 span { color: var(--accent-2); font-weight: 600; } p { margin-bottom: 20px; font-size: 1rem; } ::selection { background: color-mix(in oklab, var(--accent-2) 70%, white 30%); color: #081114; } /* -------------------- Buttons -------------------- */ .btn, .form-btn, .btn-primary{ display: inline-block; padding: 12px 28px; font-size: 1rem; font-weight: 600; background: var(--accent-2); color: #fff; border-radius: 12px; border: none; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), filter .22s var(--ease-out); cursor: pointer; margin: 6px; box-shadow: 0 10px 24px rgba(255,90,99,.35), inset 0 0 0 1px rgba(255,255,255,.22); } .btn:hover, .form-btn:hover, .btn-primary:hover{ background: #fff; color: var(--accent-2); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(255,90,99,.45), inset 0 0 0 1px rgba(255,90,99,.25); } .btn:focus, .form-btn:focus, .btn-primary:focus{ outline: 2px solid var(--accent-2); outline-offset: 3px; } /* Links */ a { color: var(--accent-2); font-weight: 600; } a:hover { color: #ff7a8a; } /* -------------------- Forms -------------------- */ form input, form select, form textarea{ width: 100%; padding: 12px 15px; margin: 10px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #fff; font-size: 1rem; transition: border .25s, box-shadow .25s, background .25s; } form input:focus, form select:focus, form textarea:focus{ border-color: var(--accent-2); box-shadow: 0 0 12px rgba(255,90,99,.45); outline: none; } form select option{ background: #111; color: #fff; } ::placeholder{ color:#fff; opacity:.8; } /* Error state */ .error-msg{ display:block; background: var(--accent-2); color:#fff; padding:10px; margin:10px 0; border-radius: 10px; font-size: .95rem; box-shadow: 0 0 14px rgba(255,90,99,.6); } /* -------------------- Content blocks (landing) -------------------- */ .container .content { max-width: 960px; } .container .content .btn{ text-transform: none; } /* -------------------- Tables (optional) -------------------- */ table{ border-collapse: separate; border-spacing: 0 12px; width: 100%; } thead th{ font-weight: 700 } tbody tr{ transition: background .2s var(--ease-out) } tbody tr:hover{ background: rgba(255,255,255,.04) } tbody td, thead th{ padding: 16px 12px } tbody td:first-child, thead th:first-child{ border-top-left-radius: 14px; border-bottom-left-radius: 14px; } tbody td:last-child, thead th:last-child{ border-top-right-radius: 14px; border-bottom-right-radius: 14px; } /* -------------------- Animations -------------------- */ @keyframes fadeIn{ from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .float{ animation: floatY 7s var(--ease-out) infinite; } @keyframes floatY{ 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } } /* -------------------- Scrollbars -------------------- */ ::-webkit-scrollbar{ width: 10px; height: 10px } ::-webkit-scrollbar-track{ background: rgba(255,255,255,.03); border-radius: 6px } ::-webkit-scrollbar-thumb{ background: linear-gradient(135deg, var(--accent), var(--accent-3)); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } ::-webkit-scrollbar-thumb:hover{ background: linear-gradient(135deg, var(--accent-3), var(--accent)); } /* -------------------- Responsive -------------------- */ @media (max-width: 1024px){ .grid-cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width: 768px){ .container .content, .form-container form{ padding: 22px; max-width: 92%; border-radius: var(--radius); } table{ font-size: .95rem } th, td{ padding: .75rem .5rem !important; } } @media (max-width: 480px){ .container .content, .form-container form{ padding: 18px; max-width: 94%; border-radius: 12px; } .btn, .form-btn, .btn-primary{ width: 100%; } } /* -------------------- High DPI -------------------- */ @media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){ .glass, .container .content, .form-container form{ backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } } /* -------------------- Print -------------------- */ @media print{ body{ background:#fff !important; color:#000 !important; } .glass, .container .content, .form-container form{ background:#fff !important; border:1px solid #ccc !important; box-shadow:none !important; } a{ color:#000 !important; text-decoration: underline; } }