/* ================================================================= Public launcher — dark neon 3D theme ================================================================= */ :root{ --bg: #070b18; --bg-2: #0b1124; --surface: rgba(255,255,255,.045); --surface-hi: rgba(255,255,255,.085); --border: rgba(255,255,255,.10); --border-hi: rgba(255,255,255,.22); --text: #eef2ff; --text-dim: #9aa6c7; --text-faint: #6b7699; --accent: #6366f1; --radius: 20px; --shadow-rest: 0 1px 0 rgba(255,255,255,.07) inset, 0 10px 24px -12px rgba(0,0,0,.85), 0 2px 4px rgba(0,0,0,.4); --shadow-lift: 0 1px 0 rgba(255,255,255,.14) inset, 0 30px 60px -22px rgba(0,0,0,.95), 0 10px 22px -12px color-mix(in srgb, var(--accent) 65%, transparent); --ease: cubic-bezier(.22,.68,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; min-height:100vh; display:flex; flex-direction:column; font-family:"Segoe UI",system-ui,-apple-system,"Inter",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--text); background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* ------------------------- Background art ------------------------ Kept on one fixed layer instead of background-attachment on , so long pages scroll smoothly on phones and show no seam. */ .aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background: radial-gradient(1200px 620px at 50% -12%, #16204a 0%, transparent 65%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, #05080f 100%); } .aurora__blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.42; animation:drift 26s var(--ease) infinite alternate; } .aurora__blob--1{ width:46vw; height:46vw; left:-10vw; top:-8vw; background:#4f46e5; } .aurora__blob--2{ width:40vw; height:40vw; right:-8vw; top:6vw; background:#0891b2; animation-delay:-9s; } .aurora__blob--3{ width:38vw; height:38vw; left:28vw; bottom:-16vw; background:#7c3aed; animation-delay:-16s; } .aurora__grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(900px 520px at 50% 0%, #000 0%, transparent 78%); -webkit-mask-image:radial-gradient(900px 520px at 50% 0%, #000 0%, transparent 78%); } @keyframes drift{ from{ transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(4vw,5vh,0) scale(1.14); } } /* ----------------------------- Hero ----------------------------- */ .hero{ position:relative; z-index:1; padding:clamp(44px,8vw,86px) 20px 8px; text-align:center; animation:rise .7s var(--ease) both; } .hero__eyebrow{ margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--text-faint); } .hero__title{ margin:0; font-size:clamp(30px,6.2vw,54px); font-weight:800; letter-spacing:-.025em; line-height:1.08; background:linear-gradient(180deg,#fff 20%,#a9b6e8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero__tagline{ margin:14px auto 0; max-width:38ch; color:var(--text-dim); font-size:clamp(14px,2.2vw,16.5px); line-height:1.6; } /* --------------------------- Toolbar ---------------------------- */ .toolbar{ margin:34px auto 0; max-width:720px; display:flex; flex-direction:column; align-items:center; gap:16px; } .search{ position:relative; width:100%; max-width:440px; } .search__icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:none; stroke:var(--text-faint); stroke-width:2; stroke-linecap:round; pointer-events:none; transition:stroke .2s; } .search__input{ width:100%; padding:14px 42px 14px 46px; font:inherit; font-size:15px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:999px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 24px -16px rgba(0,0,0,.9); backdrop-filter:blur(12px); transition:border-color .22s, background .22s, box-shadow .22s; } .search__input::placeholder{ color:var(--text-faint); } .search__input:focus{ outline:none; border-color:rgba(129,140,248,.6); background:var(--surface-hi); box-shadow:0 0 0 4px rgba(99,102,241,.16), 0 10px 30px -18px rgba(0,0,0,.9); } .search:focus-within .search__icon{ stroke:#a5b4fc; } .search__clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:grid; place-items:center; font-size:20px; line-height:1; color:var(--text-dim); background:transparent; border:0; border-radius:50%; cursor:pointer; transition:background .2s, color .2s; } .search__clear:hover{ background:var(--surface-hi); color:#fff; } .chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .chip{ padding:7px 15px; font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); border-radius:999px; cursor:pointer; transition:color .2s, background .2s, border-color .2s, transform .16s; } .chip:hover{ color:#fff; border-color:var(--border-hi); transform:translateY(-1px); } .chip.is-active{ color:#0a0e1c; background:linear-gradient(180deg,#e6ebff,#b9c4f5); border-color:transparent; box-shadow:0 6px 18px -10px rgba(148,163,255,.9); } /* ---------------------------- Layout ---------------------------- */ .wrap{ position:relative; z-index:1; flex:1; width:100%; max-width:1180px; margin:0 auto; padding:38px 20px 60px; } .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(264px, 1fr)); gap:20px; perspective:1200px; } /* ------------------------- The 3D cards ------------------------- */ .card{ --tilt-x:0deg; --tilt-y:0deg; position:relative; display:flex; align-items:center; gap:15px; padding:20px 18px; min-height:104px; text-decoration:none; color:inherit; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)), color-mix(in srgb, var(--accent) 9%, #0d1226); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-rest); backdrop-filter:blur(10px); transform-style:preserve-3d; transform:translateZ(0); transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .3s, background .3s; animation:pop .6s var(--ease) both; animation-delay:var(--delay,0s); overflow:hidden; isolation:isolate; } /* accent edge */ .card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 85%, #fff) 0%, transparent 42%, transparent 60%, color-mix(in srgb, var(--accent) 45%, transparent) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .34s var(--ease); pointer-events:none; } /* glow pool under the card */ .card::after{ content:""; position:absolute; left:14%; right:14%; bottom:-14px; height:30px; border-radius:50%; background:var(--accent); filter:blur(22px); opacity:0; transform:translateZ(-40px); transition:opacity .34s var(--ease); pointer-events:none; } .card__shine{ position:absolute; inset:0; border-radius:inherit; background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.16), transparent 62%); opacity:0; transition:opacity .3s var(--ease); pointer-events:none; } .card:hover, .card:focus-visible{ transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-7px) scale(1.022); box-shadow:var(--shadow-lift); border-color:var(--border-hi); outline:none; } .card:hover::before, .card:focus-visible::before{ opacity:1; } .card:hover::after, .card:focus-visible::after{ opacity:.42; } .card:hover .card__shine, .card:focus-visible .card__shine{ opacity:1; } .card:active{ transform:translateY(-2px) scale(.995); transition-duration:.09s; } .card__logo{ flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 34%, #111834), color-mix(in srgb, var(--accent) 12%, #0a0f22)); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); transform:translateZ(26px); transition:transform .34s var(--ease); overflow:hidden; } .card__logo img{ width:34px; height:34px; object-fit:contain; display:block; } .card__initials{ font-size:19px; font-weight:800; letter-spacing:.02em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); } .card:hover .card__logo{ transform:translateZ(40px) scale(1.06); } .card__text{ min-width:0; display:flex; flex-direction:column; gap:4px; transform:translateZ(16px); } .card__title{ font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.25; /* Wrap onto a second line rather than cutting long names off. */ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; } .card__meta{ display:flex; align-items:baseline; gap:8px; min-width:0; } .card__sub{ flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--text-dim); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .card__go{ position:absolute; top:14px; right:14px; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--border); opacity:0; transform:translate(-4px,4px) translateZ(20px); transition:opacity .28s var(--ease), transform .28s var(--ease); } .card__go svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .card:hover .card__go, .card:focus-visible .card__go{ opacity:1; transform:translate(0,0) translateZ(30px); } /* Sits on the same row as the subtitle, so neither can clip the other. */ .card__tag{ flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; color:color-mix(in srgb, var(--accent) 55%, #fff); opacity:.8; } .card.is-hidden{ display:none; } /* --------------------------- Notices ---------------------------- */ .notice{ max-width:560px; margin:40px auto; padding:34px 30px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-rest); backdrop-filter:blur(12px); animation:pop .6s var(--ease) both; } .notice h2{ margin:0 0 10px; font-size:21px; font-weight:700; } .notice p{ margin:0 0 20px; color:var(--text-dim); line-height:1.65; font-size:14.5px; } .notice code{ padding:2px 6px; border-radius:6px; font-size:13px; background:rgba(255,255,255,.08); color:#cbd5ff; } .notice--warn{ border-color:rgba(251,191,36,.35); } .btn{ display:inline-block; padding:12px 24px; font-size:14px; font-weight:700; text-decoration:none; color:#0a0e1c; background:linear-gradient(180deg,#eef1ff,#b9c4f5); border-radius:999px; box-shadow:0 10px 26px -14px rgba(148,163,255,.95), 0 1px 0 rgba(255,255,255,.7) inset; transition:transform .2s var(--ease), box-shadow .2s; } .btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(148,163,255,1); } .btn:active{ transform:translateY(0); } .btn--plain{ margin-left:10px; color:var(--text-dim); background:transparent; border:1px solid var(--border); box-shadow:none; font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:11px 20px; } .btn--plain:hover{ color:#fff; border-color:var(--border-hi); box-shadow:none; } .offline-status{ margin:0 0 16px; font-size:13px; color:#86efac; } /* Offline page: one centred card, nothing else on the page. */ .offline-body .wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding-top:0; padding-bottom:0; } .offline-body .notice{ margin:0; } .empty-search{ margin:50px auto; text-align:center; color:var(--text-dim); font-size:15px; } /* ---------------------------- Footer ---------------------------- */ .foot{ position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:18px; padding:26px 20px 34px; font-size:12.5px; color:var(--text-faint); border-top:1px solid rgba(255,255,255,.06); } .foot__link{ color:var(--text-dim); text-decoration:none; transition:color .2s; } .foot__link:hover{ color:#fff; } /* -------------------------- Animations -------------------------- */ @keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @keyframes pop{ from{ opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:none; } } /* ------------------------- Responsive --------------------------- */ @media (max-width:640px){ .grid{ grid-template-columns:1fr; gap:14px; } .card{ min-height:92px; padding:16px 15px; } .card__logo{ width:48px; height:48px; border-radius:13px; } .card__logo img{ width:30px; height:30px; } .hero{ padding-top:36px; } .wrap{ padding:28px 16px 48px; } } @media (hover:none){ /* No tilt on touch devices — keep taps instant. */ .card:hover{ transform:none; box-shadow:var(--shadow-rest); } .card:active{ transform:scale(.985); box-shadow:var(--shadow-lift); } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }