/* Numogist — application shell styles */ /* --------------------------------------------------------------------------- Theme Light is the default. Dark applies either because the visitor's OS asks for it (and they have not chosen otherwise) or because they picked it from the header switcher, which stamps data-theme on . An explicit choice always beats the OS preference, in both directions. --------------------------------------------------------------------------- */ :root { --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f2f4f9; --border: #e2e6ef; --text: #1b2333; --text-muted: #6b7488; --brand: #13611e; --brand-dark: #0e4716; --brand-light: #e8f3ea; --accent: #6d4aff; --accent-light: #efeaff; --danger: #c8302f; --danger-light: #fdecec; --warning: #b06f00; --warning-light: #fff5e0; --info: #0b6bcb; --info-light: #e7f1fd; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06); --shadow-lg: 0 8px 32px rgba(16, 24, 40, .12); --row-hover: #fafbfe; --sidebar-w: 264px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } /* One block, applied from two triggers, so the palette lives in a single place. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d1117; --surface: #161b24; --surface-2: #1d2430; --border: #2a323f; --text: #e6eaf2; --text-muted: #9aa4b6; --brand: #4ec26a; --brand-dark: #7fd894; --brand-light: #16301d; --accent: #a68cff; --accent-light: #241f3d; --danger: #f2726f; --danger-light: #3a1d1d; --warning: #e0a63c; --warning-light: #362a13; --info: #5aa9f0; --info-light: #14283c; --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 4px 16px rgba(0, 0, 0, .30); --shadow-lg: 0 8px 32px rgba(0, 0, 0, .48); --row-hover: #1b2230; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0d1117; --surface: #161b24; --surface-2: #1d2430; --border: #2a323f; --text: #e6eaf2; --text-muted: #9aa4b6; --brand: #4ec26a; --brand-dark: #7fd894; --brand-light: #16301d; --accent: #a68cff; --accent-light: #241f3d; --danger: #f2726f; --danger-light: #3a1d1d; --warning: #e0a63c; --warning-light: #362a13; --info: #5aa9f0; --info-light: #14283c; --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 4px 16px rgba(0, 0, 0, .30); --shadow-lg: 0 8px 32px rgba(0, 0, 0, .48); --row-hover: #1b2230; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } /* No underlines anywhere — links signal themselves by colour, and get a hover treatment instead (a soft tinted pill on standalone action links, see the ".link hover" block further down). */ a { color: var(--brand); text-decoration: none; transition: color .15s ease, background-color .15s ease; } a:hover { color: var(--brand-dark); text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; } h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 16px; } /* ---------- Layout ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; position: sticky; top: 0; background: var(--surface); z-index: 2; } .sidebar-brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #2c9e42); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: 0 0 auto; } .sidebar-brand .name { font-weight: 680; font-size: 15px; letter-spacing: -.2px; } .sidebar-brand .sub { font-size: 11px; color: var(--text-muted); } .sidebar-nav { padding: 12px 10px 24px; flex: 1; } .nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; padding: 14px 10px 6px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; margin-bottom: 1px; } .nav-link:hover { background: var(--surface-2); text-decoration: none; } .nav-link.active { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; } .nav-link .ico { width: 18px; text-align: center; flex: 0 0 auto; } .nav-link .badge-count { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 5; } .topbar .page-title { font-size: 17px; font-weight: 650; margin: 0; } .topbar .spacer { flex: 1; } .menu-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; font-size: 16px; } .userchip { display: flex; align-items: center; gap: 9px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; } .userchip .meta { line-height: 1.2; } .userchip .meta strong { font-size: 13px; display: block; } .userchip .meta span { font-size: 11px; color: var(--text-muted); } .content { padding: 24px; flex: 1; } .content-narrow { max-width: 860px; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; } .card-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .card-head h2 { margin: 0; font-size: 15px; } .card-head .spacer { flex: 1; } .card-body { padding: 18px; } .card-body.tight { padding: 0; } /* ---------- Stats ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: block; color: inherit; } a.stat:hover { text-decoration: none; border-color: var(--text-muted); box-shadow: var(--shadow-lg); } .stat .label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .stat .value { font-size: 27px; font-weight: 700; letter-spacing: -.5px; margin-top: 4px; } .stat .hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .stat.alert .value { color: var(--danger); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } table.data th { background: var(--surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 650; white-space: nowrap; } table.data tbody tr:hover { background: var(--row-hover); } table.data tbody tr:last-child td { border-bottom: none; } table.data td.actions { white-space: nowrap; text-align: right; } .muted { color: var(--text-muted); } .small { font-size: 12.5px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } .nowrap { white-space: nowrap; } .empty { padding: 44px 20px; text-align: center; color: var(--text-muted); } .empty .icon { font-size: 34px; display: block; margin-bottom: 8px; opacity: .6; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; } .badge-active { background: var(--brand-light); color: var(--brand-dark); } .badge-pending { background: var(--warning-light); color: var(--warning); } .badge-suspended { background: var(--danger-light); color: var(--danger); } .badge-rejected { background: var(--surface-2); color: var(--text-muted); } .badge-admin { background: var(--accent-light); color: var(--accent); } .badge-user { background: var(--info-light); color: var(--info); } .badge-muted { background: var(--surface-2); color: var(--text-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; line-height: 1.4; text-decoration: none; transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { background: #a92625; border-color: #a92625; } .btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; } .btn-warning:hover { background: #8f5a00; } .btn-sm { padding: 5px 10px; font-size: 12.5px; } .btn-block { width: 100%; } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; } /* ---------- Forms ---------- */ .form-row { margin-bottom: 16px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } label.lbl { display: block; font-size: 13px; font-weight: 620; margin-bottom: 5px; } .hint { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input[type=tel], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(19, 97, 30, .12); } textarea { resize: vertical; min-height: 84px; } select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7488' d='M6 8.5 2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; } .check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-bottom: 8px; } .check input { margin-top: 3px; flex: 0 0 auto; } .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .toolbar .grow { flex: 1; min-width: 200px; } /* ---------- Alerts ---------- */ .alert { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; } .alert-success { background: var(--brand-light); color: var(--brand-dark); border-color: #c3e2ca; } .alert-error { background: var(--danger-light); color: #8f2221; border-color: #f3c9c8; } .alert-warning { background: var(--warning-light); color: #7a4d00; border-color: #f0dcae; } .alert-info { background: var(--info-light); color: #084e94; border-color: #c3ddf8; } /* ---------- Auth pages ---------- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(1100px 480px at 10% -10%, #e9f5ec 0%, transparent 60%), radial-gradient(900px 400px at 100% 0%, #efeaff 0%, transparent 55%), var(--bg); } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 32px; } .auth-card.wide { max-width: 620px; } .auth-head { text-align: center; margin-bottom: 24px; } .auth-head .logo { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--brand), #2c9e42); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 21px; margin: 0 auto 12px; } .auth-head h1 { font-size: 21px; margin-bottom: 4px; } .auth-head p { color: var(--text-muted); margin: 0; font-size: 14px; } .auth-foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-muted); } /* ---------- Tool cards ---------- */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; } .tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; color: inherit; position: relative; } .tool-card:hover { text-decoration: none; border-color: var(--text-muted); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .tool-card .cat { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; } .tool-card .title { font-weight: 640; font-size: 14.5px; margin-bottom: 5px; line-height: 1.35; } .tool-card .desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; flex: 1; } .fav-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; border-radius: 6px; opacity: .35; } .fav-btn:hover { opacity: 1; background: var(--surface-2); } .fav-btn.on { opacity: 1; } .cat-header { display: flex; align-items: center; gap: 9px; margin: 26px 0 12px; font-size: 15px; font-weight: 660; } .cat-header:first-child { margin-top: 0; } .cat-header .count { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* ---------- Tool viewer chrome ---------- */ .tool-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 18px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 3px rgba(16,24,40,.05); } .tool-bar .titles { min-width: 0; } .tool-bar .titles strong { display: block; font-size: 14.5px; line-height: 1.3; } .tool-bar .titles span { font-size: 11.5px; color: var(--text-muted); } .tool-bar .spacer { flex: 1; } .tool-frame { width: 100%; border: 0; display: block; background: #fff; } /* calculators bring their own theme */ /* ---------- Pagination ---------- */ .pagination { display: flex; gap: 5px; padding: 14px 18px; align-items: center; flex-wrap: wrap; } .pagination a, .pagination span { padding: 5px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 13px; color: var(--text); } .pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } .pagination a:hover { background: var(--surface-2); text-decoration: none; } .pagination .info { border: none; color: var(--text-muted); margin-left: auto; } /* ---------- Misc ---------- */ .divider { height: 1px; background: var(--border); margin: 20px 0; border: 0; } .kv { display: grid; grid-template-columns: 170px 1fr; gap: 9px 16px; font-size: 14px; } .kv dt { color: var(--text-muted); font-weight: 600; } .kv dd { margin: 0; } .inline-form { display: inline; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; } .tabs a { padding: 9px 15px; font-size: 14px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.active { color: var(--brand); border-bottom-color: var(--brand); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .menu-toggle { display: block; } .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } body.nav-open .sidebar { transform: translateX(0); } body.nav-open .scrim { position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 40; } .content { padding: 16px; } .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 10px; } } @media print { .sidebar, .topbar, .tool-bar, .btn { display: none !important; } .content { padding: 0; } } /* =========================================================================== Member site shell — the customer-facing chrome. Admins keep the sidebar console in .layout above; everything below is the public-feeling website. =========================================================================== */ .site { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; } .site-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 62px; display: flex; align-items: center; gap: 22px; } /* Logo only — no text — so no gap is needed, and a touch of right margin keeps the nav clear of the wider circle. */ .site-brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: 4px; } .site-brand:hover { text-decoration: none; } .site-brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #2c9e42); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .site-brand .name { font-weight: 680; font-size: 16px; color: var(--text); letter-spacing: -.2px; } .site-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; } .site-nav > a, .site-nav > .dropdown > button { padding: 8px 13px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 560; color: var(--text); background: none; border: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .site-nav > a:hover, .site-nav > .dropdown > button:hover { background: var(--surface-2); text-decoration: none; } .site-nav > a.active, .site-nav > .dropdown > button.active { color: var(--brand); background: var(--brand-light); font-weight: 640; } .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: none; max-height: 70vh; overflow-y: auto; z-index: 60; } .dropdown.open .dropdown-menu { display: block; } .dropdown-menu.right { left: auto; right: 0; } .dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text); width: 100%; background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; } .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); text-decoration: none; } .dropdown-menu .sep { height: 1px; background: var(--border); margin: 6px 4px; } .dropdown-menu .head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 650; padding: 9px 11px 5px; } .dropdown-menu .count { margin-left: auto; font-size: 12px; color: var(--text-muted); } .site-search { flex: 0 1 260px; min-width: 0; } .site-search input { padding: 8px 12px 8px 34px; font-size: 14px; background-color: var(--surface-2); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7488' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; background-size: 15px 15px; border-color: transparent; } .site-search input:focus { background-color: var(--surface); border-color: var(--brand); } .site-user { flex: 0 0 auto; } .site-user > button { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; font-family: inherit; } .site-user > button:hover { background: var(--surface-2); } .site-user .caret { font-size: 10px; color: var(--text-muted); } .site-main { flex: 1; } .site-container { max-width: 1200px; margin: 0 auto; padding: 28px 24px 48px; } .site-container.narrow { max-width: 820px; } .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 22px 24px; color: var(--text-muted); font-size: 13px; } .site-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .site-footer .spacer { flex: 1; } /* ---------- Hero ---------- A night-sky panel: layered gradients for depth, a CSS star field, and two slowly turning orbit rings. All decoration is generated — no image requests, so it still works with no internet. */ .hero { position: relative; isolation: isolate; /* No overflow clip: the search suggestion panel drops out of the hero and would otherwise be cut off. The decorative layers are all inset:0 and the background image is clipped by the box anyway, so nothing escapes. */ padding: 62px 24px 70px; color: #fff; /* The gradient stays underneath as a genuine fallback: if the artwork is ever missing or blocked, the hero still reads as a night sky. */ background-color: #10173a; background-image: url('../img/hero.jpg'), radial-gradient(900px 420px at 78% -10%, rgba(124, 77, 219, .42) 0%, transparent 60%), radial-gradient(760px 400px at 12% 110%, rgba(31, 155, 142, .34) 0%, transparent 62%), linear-gradient(157deg, #10173a 0%, #1b2352 46%, #2a1c4f 100%); background-repeat: no-repeat; background-size: cover, auto, auto, auto; background-position: center right, center, center, center; } /* Browsers that understand image-set take the much smaller WebP. */ @supports (background-image: image-set(url('../img/hero.webp') type('image/webp'))) { .hero { background-image: image-set(url('../img/hero.webp') type('image/webp'), url('../img/hero.jpg') type('image/jpeg')), radial-gradient(900px 420px at 78% -10%, rgba(124, 77, 219, .42) 0%, transparent 60%), radial-gradient(760px 400px at 12% 110%, rgba(31, 155, 142, .34) 0%, transparent 62%), linear-gradient(157deg, #10173a 0%, #1b2352 46%, #2a1c4f 100%); } } /* Scrim — guarantees the headline stays legible over whatever the artwork happens to be doing behind it, and keeps the astrolabe from competing. */ .hero::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(10, 15, 40, .90) 0%, rgba(12, 18, 46, .74) 42%, rgba(16, 20, 52, .40) 72%, rgba(20, 22, 56, .22) 100%), linear-gradient(to bottom, rgba(10, 15, 40, .34) 0%, transparent 32%, rgba(10, 15, 40, .40) 100%); } /* A little live twinkle on top of the artwork's own stars. */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(1.5px 1.5px at 6% 18%, rgba(255,255,255,.95), transparent), radial-gradient(1.2px 1.2px at 14% 62%, rgba(255,255,255,.7), transparent), radial-gradient(1.7px 1.7px at 22% 31%, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 29% 78%, rgba(255,255,255,.6), transparent), radial-gradient(1.4px 1.4px at 36% 12%, rgba(255,255,255,.8), transparent), radial-gradient(1.1px 1.1px at 43% 54%, rgba(255,255,255,.55), transparent), radial-gradient(1.6px 1.6px at 51% 26%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 58% 71%, rgba(255,255,255,.5), transparent), radial-gradient(1.3px 1.3px at 64% 15%, rgba(255,255,255,.75), transparent), radial-gradient(1.8px 1.8px at 71% 48%, rgba(255,255,255,.95), transparent), radial-gradient(1.1px 1.1px at 78% 83%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 85% 29%, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 91% 65%, rgba(255,255,255,.55), transparent), radial-gradient(1.4px 1.4px at 96% 40%, rgba(255,255,255,.8), transparent), radial-gradient(1.2px 1.2px at 47% 90%, rgba(255,255,255,.65), transparent), radial-gradient(1.6px 1.6px at 18% 45%, rgba(255,255,255,.7), transparent); animation: twinkle 6s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .55; } to { opacity: 1; } } /* Orbit rings, bottom-right, very quiet. */ .hero-orbits { position: absolute; right: -170px; top: 50%; transform: translateY(-50%); width: 620px; height: 620px; z-index: -1; opacity: .5; pointer-events: none; } .hero-orbits svg { width: 100%; height: 100%; display: block; } .hero-orbits .ring { animation: spin 90s linear infinite; transform-origin: 50% 50%; } .hero-orbits .ring-2 { animation-duration: 140s; animation-direction: reverse; } .hero-orbits .ring-3 { animation-duration: 200s; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; opacity: .8; } .hero-orbits .ring { animation: none; } } .hero-inner { position: relative; max-width: 920px; margin: 0 auto; text-align: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .92); margin-bottom: 18px; } .hero h1 { font-size: 40px; line-height: 1.12; letter-spacing: -1.1px; margin-bottom: 12px; color: #fff; } .hero h1 .accent { background: linear-gradient(96deg, #8fe3b0 0%, #b9a4ff 55%, #7fd8ea 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero p { color: rgba(255, 255, 255, .78); font-size: 16.5px; line-height: 1.6; margin: 0 auto 28px; max-width: 600px; } .hero-search { display: flex; gap: 8px; max-width: 600px; margin: 0 auto; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); padding: 7px; border-radius: 14px; backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(8, 12, 34, .38); } .hero-search input { flex: 1; min-width: 0; padding: 12px 15px; font-size: 15px; border: 0; background: #fff; border-radius: 9px; } .hero-search input:focus { box-shadow: 0 0 0 3px rgba(143, 227, 176, .45); } .hero-search .btn { padding: 12px 22px; font-size: 14.5px; border-radius: 9px; } /* The flat brand green goes muddy against the indigo panel — lift it. */ .hero-search .btn-primary { background: linear-gradient(135deg, #1e8f42 0%, #2cb668 100%); border-color: transparent; box-shadow: 0 4px 14px rgba(44, 182, 104, .32); } .hero-search .btn-primary:hover { background: linear-gradient(135deg, #197a38 0%, #26a25c 100%); border-color: transparent; } .hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 20px; } .hero-chips a { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .17); font-size: 13px; color: rgba(255, 255, 255, .88); font-weight: 550; backdrop-filter: blur(6px); transition: background .14s, border-color .14s, transform .14s; } .hero-chips a:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .38); color: #fff; text-decoration: none; transform: translateY(-1px); } /* Stat strip lifted over the hero's lower edge. */ .hero-stats { position: relative; z-index: 2; max-width: 1200px; margin: -36px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .hero-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(16, 24, 40, .1); padding: 15px 18px; color: inherit; display: block; } a.hero-stat:hover { text-decoration: none; border-color: var(--text-muted); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .hero-stat .n { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; } .hero-stat .l { font-size: 12.5px; color: var(--text-muted); font-weight: 560; } /* ---------- Section headings on the site ---------- */ .section { margin-top: 34px; } .section:first-child { margin-top: 0; } .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .section-head h2 { margin: 0; font-size: 19px; } .section-head .spacer { flex: 1; } .section-head a { font-size: 13.5px; font-weight: 600; } .section-head p { margin: 0; color: var(--text-muted); font-size: 14px; width: 100%; } /* ---------- Category tiles ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } /* Each tile carries its own --c accent, set inline from the category index, so the grid reads as a set rather than a wall of identical boxes. */ .cat-tile { --c: #5b6ee1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px 20px; box-shadow: var(--shadow); color: inherit; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; } .cat-tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff)); } .cat-tile::after { content: ''; position: absolute; top: -46px; right: -46px; width: 130px; height: 130px; border-radius: 50%; background: var(--c); opacity: .07; transition: opacity .16s, transform .16s; } .cat-tile:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c) 40%, var(--border)); box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 18%, transparent); transform: translateY(-2px); } .cat-tile:hover::after { opacity: .13; transform: scale(1.12); } .cat-tile .ico { font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); margin-bottom: 13px; position: relative; } .cat-tile h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.2px; position: relative; } .cat-tile p { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; flex: 1; position: relative; } .cat-tile .n { font-size: 12.5px; font-weight: 660; color: var(--c); position: relative; display: inline-flex; align-items: center; gap: 5px; } .cat-tile:hover .n { gap: 8px; } .cat-tile .n span { transition: margin .16s; } /* Fallback for browsers without color-mix(). */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .cat-tile .ico { background: var(--surface-2); } .cat-tile:hover { border-color: var(--text-muted); box-shadow: var(--shadow-lg); } } /* ---------- Tool viewer in site chrome ---------- */ .tool-crumbs { max-width: 1200px; margin: 0 auto; padding: 14px 24px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-muted); } .tool-crumbs .spacer { flex: 1; } .tool-stage { max-width: 1200px; margin: 14px auto 40px; padding: 0 24px; } .tool-stage .frame-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } /* ---------- Mobile ---------- */ .site-burger { display: none; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; font-size: 16px; } @media (max-width: 940px) { .site-burger { display: block; } .site-search { display: none; } .site-nav { display: none; position: absolute; top: 62px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); flex-direction: column; align-items: stretch; padding: 10px; gap: 2px; max-height: calc(100vh - 62px); overflow-y: auto; } .site-header.open .site-nav { display: flex; } .site-nav > a, .site-nav > .dropdown > button { width: 100%; justify-content: flex-start; } .dropdown-menu { position: static; box-shadow: none; border: 0; padding-left: 14px; max-height: none; } /* The chips wrap to two or three rows on a phone, so the hero needs more room at the bottom before the stat strip lifts over its edge. */ .hero { padding: 40px 20px 62px; } .hero h1 { font-size: 27px; letter-spacing: -.6px; } .hero p { font-size: 15px; margin-bottom: 22px; } .hero-eyebrow { font-size: 11.5px; margin-bottom: 14px; } .hero-search { flex-direction: column; gap: 7px; } .hero-search .btn { width: 100%; } .hero-orbits { right: -260px; opacity: .3; } .hero-stats { margin-top: -28px; padding: 0 16px; grid-template-columns: repeat(2, 1fr); gap: 10px; } .hero-stat { padding: 13px 14px; } .hero-stat .n { font-size: 21px; } .hero-stat .l { font-size: 12px; } .site-container { padding: 20px 16px 36px; } .tool-stage, .tool-crumbs { padding-left: 14px; padding-right: 14px; } .cat-grid { grid-template-columns: 1fr; } .section-head h2 { font-size: 18px; } } /* =========================================================================== Brand logo & theme switcher =========================================================================== */ /* The logo is a circular badge with its own yellow field, so it needs no container styling — just a consistent size and a soft ring. */ .brand-logo { display: block; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #ffe500; /* matches the badge, hides any load gap */ box-shadow: 0 1px 4px rgba(16, 24, 40, .18); } /* The header logo is deliberately taller than the 62px bar and hangs below it. The bar's height is fixed, so it cannot grow; the negative bottom margin is what positions the circle — the flex row centres the *margin* box, so pulling the bottom in shifts the visible circle downward. 72px with -18px lands it 4px from the top of the bar and 13px below it, which clears the content's top padding on pages that have no hero. */ .site-brand .brand-logo { width: 72px; height: 72px; margin-bottom: -18px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--surface), /* separates it from whatever it lands on */ 0 5px 16px rgba(16, 24, 40, .26), /* lift */ 0 0 26px -6px rgba(255, 214, 0, .55); /* warm glow, picked from the badge */ transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease; } .site-brand:hover .brand-logo { transform: translateY(-2px) scale(1.045); box-shadow: 0 0 0 3px var(--surface), 0 9px 22px rgba(16, 24, 40, .30), 0 0 34px -4px rgba(255, 214, 0, .85); } .site-brand:active .brand-logo { transform: translateY(0) scale(1.01); } .site-brand:focus-visible .brand-logo { outline: 2px solid var(--brand); outline-offset: 4px; } :root[data-theme="dark"] .site-brand .brand-logo, :root:not([data-theme="light"]) .site-brand .brand-logo { box-shadow: 0 0 0 3px var(--surface), 0 5px 18px rgba(0, 0, 0, .55), 0 0 30px -4px rgba(255, 214, 0, .42); } :root[data-theme="dark"] .site-brand:hover .brand-logo, :root:not([data-theme="light"]) .site-brand:hover .brand-logo { box-shadow: 0 0 0 3px var(--surface), 0 9px 26px rgba(0, 0, 0, .62), 0 0 40px -2px rgba(255, 214, 0, .70); } @media (prefers-reduced-motion: reduce) { .site-brand .brand-logo, .site-brand:hover .brand-logo { transition: none; transform: none; } } .sidebar-brand .brand-logo { width: 36px; height: 36px; } .auth-head .brand-logo { width: 92px; height: 92px; margin: 0 auto 16px; box-shadow: 0 6px 20px rgba(16, 24, 40, .20), 0 0 32px -8px rgba(255, 214, 0, .55); } /* A little smaller where the bar is tighter, but still overlapping. */ @media (max-width: 560px) { .site-brand .brand-logo { width: 60px; height: 60px; margin-bottom: -14px; } .auth-head .brand-logo { width: 78px; height: 78px; } } .theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; font-family: inherit; padding: 0; transition: background .14s, color .14s, border-color .14s; } .theme-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-muted); } .theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Show the icon for the theme you would switch TO, not the one you are in. */ .theme-toggle .icon-dark { display: none; } .theme-toggle .icon-light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } :root[data-theme="light"] .theme-toggle .icon-dark { display: none; } :root[data-theme="light"] .theme-toggle .icon-light { display: block; } /* The hero artwork is already a night scene, so it needs no dark variant — but the stat strip below it does sit on the page background. */ :root[data-theme="dark"] .hero-stat, :root:not([data-theme="light"]) .hero-stat { box-shadow: 0 6px 24px rgba(0, 0, 0, .40); } /* Auth screens have their own tinted backdrop; give it a dark counterpart. */ :root[data-theme="dark"] .auth-wrap { background: radial-gradient(1100px 480px at 10% -10%, #12241a 0%, transparent 60%), radial-gradient(900px 400px at 100% 0%, #1d1836 0%, transparent 55%), var(--bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-wrap { background: radial-gradient(1100px 480px at 10% -10%, #12241a 0%, transparent 60%), radial-gradient(900px 400px at 100% 0%, #1d1836 0%, transparent 55%), var(--bg); } } /* Theme switcher on the sign-in / register screens. */ .auth-wrap { position: relative; } .auth-theme { position: absolute; top: 20px; right: 20px; } @media (max-width: 560px) { .auth-theme { top: 12px; right: 12px; } } /* Toolbar controls inherit width:100% from the base input rules, which makes every filter bar wrap onto its own row. Inside a toolbar they should size to their content and share the line. */ .toolbar select, .toolbar input[type="search"], .toolbar input[type="text"], .toolbar input[type="number"] { width: auto; min-width: 165px; } .toolbar .grow input { width: 100%; min-width: 0; } .toolbar label.lbl { margin-bottom: 0; white-space: nowrap; } @media (max-width: 640px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar select, .toolbar input, .toolbar .btn { width: 100%; } } /* =========================================================================== Link hover The default underline is gone; standalone action links get a soft tinted pill instead. Negative margins match the padding so nothing shifts. =========================================================================== */ .section-head a:not(.btn), .site-footer a, .auth-foot a, .card-head a:not(.btn), .hint a, .alert a, .empty a:not(.btn), .tool-crumbs a:not(.btn) { border-radius: 6px; padding: 2px 7px; margin: 0 -7px; } .section-head a:not(.btn):hover, .site-footer a:hover, .auth-foot a:hover, .card-head a:not(.btn):hover, .hint a:hover, .alert a:hover, .empty a:not(.btn):hover, .tool-crumbs a:not(.btn):hover { background: var(--brand-light); color: var(--brand-dark); } /* Table links just brighten — a pill inside a dense row is noisy. */ table.data a:not(.btn):hover { color: var(--brand-dark); opacity: .85; } /* =========================================================================== Search type-ahead =========================================================================== */ .suggest-wrap { position: relative; flex: 1; min-width: 0; } /* Fixed, and appended to by search.js, so no ancestor stacking context (the hero's isolation, the search box's backdrop-filter) can clip or bury it. Its left/top/width are set from the input's rect. */ .suggest-panel { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; max-height: 60vh; overflow-y: auto; text-align: left; } .suggest-panel[hidden] { display: none; } .suggest-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--text); margin: 0; } .suggest-item:hover, .suggest-item.active { background: var(--surface-2); color: var(--text); } .suggest-item.active { box-shadow: inset 2px 0 0 var(--brand); } .suggest-item .si-icon { font-size: 17px; flex: 0 0 auto; width: 22px; text-align: center; } .suggest-item .si-body { display: flex; flex-direction: column; min-width: 0; } .suggest-item .si-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggest-item .si-meta { font-size: 12px; color: var(--text-muted); } /* The matched run — a tint, not the browser's yellow block. */ .suggest-panel mark { background: var(--brand-light); color: var(--brand-dark); border-radius: 3px; padding: 0 1px; font-weight: 700; } .suggest-empty { padding: 16px 12px; font-size: 13.5px; color: var(--text-muted); text-align: center; } .suggest-more { display: block; padding: 9px 11px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 620; color: var(--brand); text-align: center; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .suggest-more:hover { background: var(--surface-2); } /* The hero box is a translucent glass panel, so its panel needs a solid surface and a little more separation from the artwork behind it. */ /* Deeper shadow over the artwork. */ .suggest-panel--hero { box-shadow: 0 18px 46px rgba(8, 12, 34, .45); } @media (max-width: 940px) { .suggest-panel { max-height: 50vh; } } /* =========================================================================== Password reveal toggle =========================================================================== */ .pw-wrap { position: relative; display: block; } /* Room for the button so long passwords never run underneath it. */ .pw-wrap input { padding-right: 44px; } .pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: color .14s ease, background-color .14s ease; } .pw-toggle:hover { color: var(--text); background: var(--surface-2); } .pw-toggle.on { color: var(--brand); } .pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; color: var(--text); } .pw-toggle svg { display: block; } /* Edge/IE render their own reveal control — two eyes side by side looks broken. */ .pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; } @media (prefers-reduced-motion: reduce) { .pw-toggle { transition: none; } }