/* ============================================================ awsm. — design foundation Warm, minimal, editorial. Feed-like single column. ============================================================ */ /* Geist (variable, self-hosted) — latin covers Danish æøå. */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/webfonts/geist/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/webfonts/geist/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: light; --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --text: #0f172a; --text-muted: #64748b; --text-faint: #94a3b8; --border: #e2e8f0; --border-strong: #cbd5e1; /* awsm brand green (Peerlist-inspired). Orange vars are legacy aliases. */ --brand: #00aa45; --brand-dark: #1e874b; --brand-soft: #e5f6ec; --orange: var(--brand); --orange-dark: var(--brand-dark); --orange-soft: var(--brand-soft); --green: #1f9d55; --green-soft: #e2f4e9; --yellow: #bd8503; --yellow-soft: #faf2da; --red: #b42318; --red-soft: #fdecec; /* Per-directory accent — overridden via inline style on . The soft tint is derived, so it adapts to dark mode automatically. */ --accent: var(--brand); --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface)); --radius: 16px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.12); --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --maxw: 41rem; --shellw: 1240px; --topbar-h: 3.5rem; } [data-theme="dark"] { color-scheme: dark; --bg: #0b1220; --surface: #0f172a; --surface-2: #1e293b; --text: #f1f5f9; --text-muted: #94a3b8; --text-faint: #64748b; --border: #1e293b; --border-strong: #334155; --brand-soft: #102b1c; --green-soft: #10331f; --yellow-soft: #33290e; --red: #f1766c; --red-soft: #3a1512; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .topbar { background: rgba(15, 23, 42, 0.88); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--text); background: var(--surface); } h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: 1rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Topbar (identical on every awsm list) ---------- */ .topbar { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; gap: 0.9rem; height: 3.5rem; max-width: var(--shellw); margin-inline: auto; padding-inline: 1rem; } .brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.04em; color: var(--text); } .brand .dot { color: var(--orange); } .topbar-nav { display: flex; align-items: center; gap: 0.9rem; overflow-x: auto; scrollbar-width: none; } .topbar-nav::-webkit-scrollbar { display: none; } .topbar-nav a { font-size: 0.92rem; font-weight: 550; color: var(--text-muted); white-space: nowrap; padding: 0.2rem 0; } .topbar-nav a:hover { color: var(--text); } .topbar-nav a[aria-current="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--orange); } .topbar-spacer { flex: 1; } .topbar-bell { flex: none; } .dropdown.topbar-bell > summary.topbar-bell-btn { list-style: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; gap: 0; border: 1px solid var(--border-strong); border-radius: 0.75rem; background: var(--surface); color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm); font-size: inherit; font-weight: 600; white-space: nowrap; } .dropdown.topbar-bell > summary.topbar-bell-btn::-webkit-details-marker { display: none; } .dropdown.topbar-bell > summary.topbar-bell-btn:hover { color: var(--text); background: var(--surface-2); } .dropdown.topbar-bell[open] > summary.topbar-bell-btn { color: var(--text); border-color: var(--brand); } .topbar-bell-btn i { font-size: 0.95rem; } .topbar-bell-badge { position: absolute; top: -0.28rem; right: -0.28rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.22rem; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 1.05rem; text-align: center; } .topbar-bell .topbar-bell-menu { left: auto; right: 0; width: 22rem; max-width: calc(100vw - 1.5rem); max-height: min(70vh, 28rem); overflow-y: auto; padding: 0.35rem; } .topbar-bell-heading { padding: 0.55rem 0.7rem 0.35rem; font-size: 0.82rem; font-weight: 750; } .topbar-bell-empty { padding: 0.8rem 0.7rem 1rem; font-size: 0.88rem; color: var(--text-muted); } .topbar-bell-item { display: flex; gap: 0.7rem; padding: 0.65rem 0.7rem; border-radius: var(--radius-sm); } .topbar-bell-item + .topbar-bell-item { border-top: 1px solid var(--border); } .topbar-bell-avatar { width: 2.2rem; height: 2.2rem; flex: none; font-size: 0.9rem; } .topbar-bell-body { min-width: 0; flex: 1; } .topbar-bell-body p { margin: 0; font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; } .topbar-bell-menu a { display: inline; padding: 0; font-size: inherit; font-weight: 700; color: var(--accent); } .topbar-bell-menu a:hover { background: none; text-decoration: underline; } .topbar-bell-time { margin-top: 0.2rem !important; font-size: 0.75rem !important; color: var(--text-faint); } .topbar-bell-preview { display: block; margin: 0.35rem 0 0.15rem; padding: 0.3rem 0 0.3rem 0.6rem; border-left: 2px solid var(--border); color: var(--text-muted); font-size: 0.82rem; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-bell-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; } /* ---------- Buttons (Peerlist-style: compact, rounded-xl, soft shadow) ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.3rem; height: 2rem; padding: 0 1rem; font: inherit; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; border-radius: 0.75rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-align: center; user-select: none; -webkit-user-select: none; box-shadow: var(--shadow-sm); transition: all 75ms ease-in; } .btn:hover { box-shadow: var(--shadow-md); } .btn:active { box-shadow: none; } .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .btn-primary { background: var(--orange); color: #fff; border-color: var(--orange-dark); } .btn-primary:hover { background: var(--orange-dark); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--surface-2); } /* ---------- Hero ---------- */ .hero { padding: 3.2rem 0 1.6rem; text-align: center; } .hero h1 { font-size: clamp(2.1rem, 6vw, 2.9rem); font-weight: 800; letter-spacing: -0.04em; } .hero h1 .dot { color: var(--orange); } .hero-sub { margin: 0.8rem auto 0; max-width: 30rem; color: var(--text-muted); font-size: 1.02rem; } /* ---------- Search ---------- */ .search { position: relative; margin: 1.7rem auto 0; max-width: 28rem; } .search-icon { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); font-size: 0.95rem; pointer-events: none; } .search input { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 999px; padding: 0.72rem 1.2rem 0.72rem 2.7rem; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .search input::placeholder { color: var(--text-faint); } .search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); } /* ---------- Sections ---------- */ .section { margin-top: 2.6rem; } .section-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.8rem; } .section-head h2 { font-size: 1.12rem; font-weight: 700; } .section-count { font-size: 0.85rem; color: var(--text-faint); } /* ---------- Feed (rows in a rounded card) ---------- */ .feed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .feed > * + * { border-top: 1px solid var(--border); } .row { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.05rem; } a.row { transition: background-color 0.12s ease; } a.row:hover { background: var(--surface-2); } a.row:hover .row-arrow { transform: translateX(3px); color: var(--text); } .tile { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; font-size: 1.35rem; border-radius: var(--radius-sm); background: var(--accent-soft); } .tile-lg { width: 4rem; height: 4rem; font-size: 2rem; border-radius: 14px; } .row-main { flex: 1; min-width: 0; } .row-title { display: flex; align-items: center; gap: 0.45rem; font-weight: 650; font-size: 0.98rem; } .row-desc { display: block; color: var(--text-muted); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-meta { flex: none; display: flex; align-items: center; gap: 0.55rem; text-align: right; } .row-count { font-size: 0.82rem; color: var(--text-faint); white-space: nowrap; } .row-arrow { color: var(--text-faint); font-weight: 600; transition: transform 0.12s ease, color 0.12s ease; } .community-row:hover { background: var(--surface-2); } .community-row-link { display: flex; align-items: center; gap: 0.85rem; flex: 1; min-width: 0; color: inherit; } .community-join { flex: none; } .community-join-btn { white-space: nowrap; } .community-join-btn.is-on { color: var(--accent, var(--brand)); } .get-started { margin-top: 0; margin-bottom: 1.8rem; } .get-started h2 { font-size: 1.25rem; font-weight: 750; } .get-started > p { margin-top: 0.45rem; color: var(--text-muted); font-size: 0.98rem; max-width: 36rem; } .get-started-list { margin-top: 1.1rem; } .get-started + .hero { padding-top: 1.2rem; } .list-hero-actions { margin-top: 1rem; } /* ---------- Badges, chips, status ---------- */ .badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 650; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; } .badge-score { background: var(--orange-soft); color: var(--orange-dark); } .badge-soon { background: var(--surface-2); color: var(--text-muted); } .status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; white-space: nowrap; } .status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-faint); } .status-green { color: var(--green); } .status-green::before { background: var(--green); } .status-yellow { color: var(--yellow); } .status-yellow::before { background: var(--yellow); } .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .chip { font-size: 0.85rem; font-weight: 550; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.28rem 0.75rem; } a.chip:hover { border-color: var(--border-strong); color: var(--text); } /* ---------- "Kommer snart" ---------- */ .soon-label { margin: 1.1rem 0 0.45rem; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .soon-chips .chip { background: transparent; color: var(--text-faint); } /* ---------- Submit box ---------- */ .submit-box { margin-top: 2.8rem; text-align: center; background: var(--surface); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 2rem 1.4rem; } .submit-box h2 { font-size: 1.25rem; font-weight: 750; } .submit-box p { margin: 0.5rem auto 1.1rem; max-width: 26rem; color: var(--text-muted); font-size: 0.95rem; } .submit-note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--text-faint); } .info-callout { margin: 1.4rem 0 0; padding: 1rem 1.15rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius); } .info-callout strong { display: block; margin-bottom: 0.35rem; } .info-callout p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); } .pending-thanks p { margin: 0 0 0.7rem; } /* ---------- Directory hero ---------- */ .dir-hero { display: flex; align-items: center; gap: 1.1rem; padding: 2.4rem 0 0.4rem; } .dir-hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; letter-spacing: -0.03em; } .dir-hero .dot { color: var(--accent); } .dir-hero-sub { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.98rem; } .dir-chips { margin: 1rem 0; } .list-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.7rem 1rem; margin: 1rem 0; } .list-toolbar .dir-chips { flex: 1; min-width: 12rem; margin: 0; } .list-filter > summary { gap: 0.4rem; } .list-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: var(--accent, var(--brand)); color: #fff; font-size: 0.68rem; font-weight: 800; } .list-filter-menu { right: 0; left: auto; width: min(22rem, calc(100vw - 2rem)); padding: 0.7rem 0.85rem 0.85rem; } .list-filter-menu .dropdown-label { padding: 0.65rem 0 0.1rem; } .list-filter-menu .dropdown-label:first-child { padding-top: 0.15rem; } .list-filter-menu .check-chips { margin-top: 0.35rem; } .list-filter-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 0; } /* ---------- Footer ---------- */ .footer { margin-top: 4rem; border-top: 1px solid var(--border); padding: 2rem 0 2.6rem; text-align: center; } .footer .brand { font-size: 1.1rem; } .footer-tagline { margin-top: 0.25rem; color: var(--text-faint); font-size: 0.88rem; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin-top: 1rem; } .footer-nav a { font-size: 0.85rem; color: var(--text-muted); } .footer-nav a:hover { color: var(--text); } /* ---------- Error pages ---------- */ .error-page { text-align: center; padding: 5rem 0 3rem; } .error-emoji { font-size: 2.6rem; } .error-page h1 { margin-top: 0.8rem; font-size: 1.6rem; font-weight: 800; } .error-page p { margin-top: 0.6rem; color: var(--text-muted); } .error-page .btn { margin-top: 1.4rem; } .error-id { margin-top: 1.2rem; font-size: 0.78rem; color: var(--text-faint); } /* ---------- Small screens ---------- */ @media (max-width: 480px) { .hero { padding-top: 2.4rem; text-align: left; } .hero-sub, .search { margin-left: 0; } .row-count { display: none; } .status { font-size: 0.72rem; } .btn-label-long { display: none; } } @media (min-width: 481px) { .btn-label-short { display: none; } } /* ============================================================ App shell — Peerlist/X-inspired three column layout ============================================================ */ .shell { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; max-width: var(--shellw); margin-inline: auto; } /* Admin (and other full-width pages): sidebar + main, no rail. */ .shell-wide { grid-template-columns: 230px minmax(0, 1fr); max-width: none; } .shell-wide .center { border-inline-end: none; } .admin-wide .topbar-inner { max-width: none; } .center { min-width: 0; border-inline: 1px solid var(--border); min-height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; } .pad { padding-inline: 1.25rem; } /* ---------- Left sidebar ---------- */ .sidebar { position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 1.1rem 0.8rem 1.4rem; display: flex; flex-direction: column; } .side-nav { display: flex; flex-direction: column; gap: 0.15rem; } .side-nav a, .side-soon span { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 550; color: var(--text-muted); } .side-nav a { transition: color 75ms ease-in; } /* Only the label slides on hover — the icon stays put. */ .side-nav a .side-text { transition: transform 75ms ease-in; } .side-nav a:hover { color: var(--text); } .side-nav a:hover .side-text { transform: translateX(0.25rem); } .side-nav a[aria-current="true"] { color: var(--text); font-weight: 750; } .side-nav a[aria-current="true"] .side-text { transform: translateX(0.25rem); } .side-label { margin: 1.1rem 0 0.35rem; padding-inline: 0.7rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } .side-soon span { color: var(--text-faint); font-weight: 500; padding-block: 0.32rem; cursor: default; } .side-footer { margin-top: auto; padding: 1.2rem 0.7rem 0; font-size: 0.74rem; line-height: 1.7; color: var(--text-faint); } .side-footer a:not(.side-icon-btn) { color: var(--text-faint); } .side-footer a:not(.side-icon-btn):hover { color: var(--text-muted); } .side-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; } .side-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; margin-bottom: 0.55rem; } .side-footer-links a[aria-current="true"] { color: var(--text-muted); } .side-footer-copy { margin: 0; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; padding: 0; font: inherit; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem; cursor: pointer; transition: all 75ms ease-in; } .theme-toggle:hover { color: var(--text); background: var(--surface-2); } .theme-toggle .fa-sun, [data-theme="dark"] .theme-toggle .fa-moon { display: none; } [data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; } .side-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.15rem; height: 2.15rem; padding: 0 0.5rem; font: inherit; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem; text-decoration: none; transition: all 75ms ease-in; } .side-icon-btn:hover, .side-icon-btn[aria-current="true"] { color: var(--text); background: var(--surface-2); } .mod-hub-row { flex-wrap: wrap; } .mod-hub-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: none; } /* ---------- Right rail ---------- */ .rail-slot { min-width: 0; } .rail-backdrop, .rail-close { display: none; } .rail { position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 1.1rem 1rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; } .rail-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.15rem; } .rail-card-tinted { background: linear-gradient(180deg, var(--orange-soft), var(--surface) 90%); } .rail-card h3 { font-size: 0.98rem; font-weight: 750; letter-spacing: -0.01em; } .rail-card p { margin-top: 0.45rem; font-size: 0.86rem; color: var(--text-muted); } .rail-card .btn { margin-top: 0.9rem; } .rail-join-list { margin: 0.7rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; } .rail-join-list li { position: relative; padding-left: 1.15rem; font-size: 0.86rem; color: var(--text); line-height: 1.35; } .rail-join-list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.45rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent, var(--brand)); } .rail-join-card .community-join { display: block; } .rail-join-card .community-join .btn, .rail-join-card > .btn { width: 100%; justify-content: center; } .rail-member { display: flex; align-items: center; gap: 0.7rem; min-width: 0; color: inherit; } .rail-member:hover .rail-member-name { color: var(--accent, var(--brand)); } .rail-member-main { display: grid; gap: 0.12rem; min-width: 0; } .rail-member-name { font-weight: 750; font-size: 0.95rem; } .rail-member-sub { font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; } .rail-actions { display: grid; gap: 0.45rem; margin-top: 0.95rem; } .rail-actions .btn { margin-top: 0; justify-content: flex-start; } .rail-card .rail-actions .btn { margin-top: 0; } .rail-list { margin-top: 0.4rem; display: flex; flex-direction: column; } .rail-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.25rem; border-radius: var(--radius-sm); } .rail-item + .rail-item { border-top: 1px solid var(--border); } .rail-item .tile { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; } .rail-item-main { min-width: 0; flex: 1; } .rail-item-title { display: block; font-size: 0.88rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-item-sub { display: block; font-size: 0.76rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.rail-item:hover .rail-item-title { color: var(--orange-dark); } /* ---------- Topbar dropdown (universe switcher) ---------- */ .dropdown { position: relative; } .dropdown summary { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; font-size: 0.92rem; font-weight: 650; padding: 0.42rem 0.9rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); white-space: nowrap; } .dropdown summary::-webkit-details-marker { display: none; } .dropdown summary:hover { background: var(--surface-2); } .dropdown summary .caret { font-size: 0.7rem; color: var(--text-faint); } .dropdown[open] summary .caret { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 16.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(33, 27, 18, 0.12); padding: 0.4rem; z-index: 30; } .dropdown-menu a, .dropdown-menu .dropdown-soon { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 550; color: var(--text); } .dropdown-menu a:hover { background: var(--surface-2); } .dropdown-menu a[aria-current="true"] { font-weight: 750; background: var(--surface-2); } .dropdown-soon { color: var(--text-faint); font-weight: 500; cursor: default; } .dropdown-sep { border: 0; border-top: 1px solid var(--border); margin: 0.35rem 0.3rem; } .dropdown-label { padding: 0.5rem 0.7rem 0.15rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } .dropdown.list-filter .list-filter-menu { right: 0; left: auto; } .dropdown.list-filter .list-filter-actions a.btn { display: inline-flex; width: auto; height: 1.7rem; padding: 0 0.75rem; border-radius: 999px; font-weight: 600; } /* ---------- Center tabs ---------- */ .tabs { display: flex; gap: 0.45rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); } .tab { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; padding: 0.32rem 0.95rem; border-radius: 999px; border: 1px solid transparent; color: var(--text-muted); } .tab:hover { color: var(--text); background: var(--surface-2); } .tab[aria-current="true"] { color: var(--accent); border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow-sm); } /* ---------- Directory band ---------- */ .dir-band { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.25rem 1.1rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); } .dir-band h1 { font-size: clamp(1.35rem, 4vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; } .dir-band .dot { color: var(--accent); } .dir-band-sub { margin-top: 0.15rem; color: var(--text-muted); font-size: 0.94rem; } .dir-band-main { flex: 1; min-width: 0; } .dir-band .btn { flex: none; } /* ---------- Launchpad-style ranked rows ---------- */ .rank-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--border); transition: background-color 0.12s ease; } .rank-row:hover { background: var(--surface-2); } .rank-link { display: flex; align-items: center; gap: 0.85rem; flex: 1; min-width: 0; } a.rank-row:hover { background: var(--surface-2); } .rank-num { flex: none; width: 1.5rem; text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--text-faint); } .rank-main { flex: 1; min-width: 0; } .rank-title { display: flex; align-items: center; gap: 0.45rem; font-size: 0.98rem; font-weight: 750; } .rank-tagline { display: block; margin-top: 0.05rem; font-size: 0.88rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.75rem; margin-top: 0.3rem; font-size: 0.78rem; color: var(--text-faint); } .rank-meta .score { color: var(--orange-dark); font-weight: 700; } .vote { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; width: 3.1rem; height: 3.1rem; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); font: inherit; font-size: 0.95rem; font-weight: 750; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color 0.12s ease, color 0.12s ease; } .vote .arrow { font-size: 0.8rem; line-height: 1; color: var(--text-faint); transition: color 0.12s ease, transform 0.12s ease; } .vote:hover { border-color: var(--accent); } .vote:hover .arrow { color: var(--accent); transform: translateY(-1px); } /* ---------- Listing profile ---------- */ .backbar { padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border); min-width: 0; } .back-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex: none; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); font-size: 0.95rem; color: var(--text); } .back-btn:hover { background: var(--surface-2); } .profile-head { display: flex; gap: 1rem; padding: 1.4rem 1.25rem; border-bottom: 1px solid var(--border); } .profile-main { flex: 1; min-width: 0; } .profile-title-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .profile-head h1 { font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; } .profile-tagline { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.95rem; } .profile-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; margin-top: 0.6rem; font-size: 0.84rem; color: var(--text-faint); } .profile-stats .score { color: var(--orange-dark); font-weight: 700; } .copy-row { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem 0.5rem 0.4rem 0.85rem; } .copy-row code { font-size: 0.88rem; font-weight: 650; } .copy-btn { font: inherit; font-size: 0.78rem; font-weight: 650; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; } .copy-btn:hover { border-color: var(--accent); color: var(--accent); } .badge-verified { background: var(--green-soft); color: var(--green); } /* ---------- Feed ---------- */ .composer { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg); } .composer .tile { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; border-radius: 50%; } .composer-input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.92rem; color: var(--text-faint); background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post { padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--border); } .post-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .post-avatar { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.15rem; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); } .post-author { font-size: 0.94rem; font-weight: 750; } .post-time { font-size: 0.8rem; color: var(--text-faint); } .badge-owner { background: var(--accent-soft); color: var(--accent); } .post-text { margin-top: 0.55rem; font-size: 0.95rem; white-space: pre-line; } .post-text strong { font-weight: 750; } .post-text u { text-decoration: underline; text-underline-offset: 0.12em; } .post-actions { display: flex; gap: 1.3rem; margin-top: 0.65rem; font-size: 0.82rem; color: var(--text-faint); } .comments { margin-top: 0.85rem; padding-left: 0.9rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.75rem; } .comment .post-avatar { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; } .comment .post-author { font-size: 0.86rem; } .comment-text { margin-top: 0.15rem; font-size: 0.88rem; color: var(--text); } .feed-empty { padding: 2.6rem 1.25rem; text-align: center; color: var(--text-faint); font-size: 0.92rem; } /* ---------- Articles ---------- */ .article-row { display: block; padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--border); transition: background-color 0.12s ease; } .article-row:hover { background: var(--surface-2); } .article-row h3 { font-size: 1.02rem; font-weight: 750; letter-spacing: -0.015em; } .article-row p { margin-top: 0.25rem; font-size: 0.89rem; color: var(--text-muted); } .article-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; margin-top: 0.45rem; font-size: 0.78rem; color: var(--text-faint); } .article-page { padding: 2.2rem 1.25rem 1rem; max-width: 38rem; margin-inline: auto; width: 100%; } .article-page header { text-align: center; } .article-kicker { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.84rem; color: var(--text-muted); } .article-kicker .post-avatar { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; } .article-kicker strong { color: var(--text); } .article-page h1 { margin-top: 1rem; font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; } .article-lede { margin: 0.9rem auto 0; max-width: 32rem; font-size: 1.02rem; color: var(--text-muted); } .article-body { margin-top: 1.8rem; } .article-body p { margin: 1.05rem 0; font-size: 0.98rem; line-height: 1.75; } /* ---------- Mini footer (bottom of center column) ---------- */ .footer-mini { margin-top: auto; padding: 2.2rem 1.25rem 2.4rem; text-align: center; font-size: 0.8rem; color: var(--text-faint); } .footer-mini nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1rem; margin-top: 0.5rem; } .footer-mini a { color: var(--text-muted); } .footer-mini a:hover { color: var(--text); } .footer-mini .theme-toggle { margin-top: 0.9rem; } /* ---------- Om awsm ---------- */ .about-hero { padding: 3rem 0 0.5rem; text-align: center; } .about-hero .mascot { height: 6rem; margin: 0 auto 1.3rem; } .about-hero h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; } .about-hero .dot { color: var(--brand); } .pull-quote { margin: 2.4rem auto; max-width: 26rem; text-align: center; font-size: 1.4rem; line-height: 1.35; letter-spacing: -0.02em; color: var(--text-muted); } .pull-quote strong { color: var(--text); font-weight: 800; } .pull-quote strong .dot { color: var(--brand); } .about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .about-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.2rem; box-shadow: var(--shadow-sm); } .about-card i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.75rem; background: var(--brand-soft); color: var(--brand); font-size: 1rem; margin-bottom: 0.75rem; } .about-card h3 { font-size: 1rem; font-weight: 750; } .about-card p { margin-top: 0.3rem; font-size: 0.88rem; color: var(--text-muted); } @media (max-width: 560px) { .about-grid { grid-template-columns: 1fr; } } .legal { max-width: 40rem; } .legal .konto-blurb { font-size: 0.95rem; line-height: 1.65; } .legal code { font-size: 0.86em; } /* ---------- Auth (id.awsm.dk) ---------- */ .auth-wrap { min-height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; align-items: center; padding: 3rem 1rem 2rem; background: var(--bg); } .auth-card { width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2rem; } .auth-card .mascot { height: 3.6rem; margin: 0 auto 1rem; } .auth-card h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; text-align: center; } .auth-card h1 .dot { color: var(--brand); } .auth-sub { margin-top: 0.4rem; text-align: center; font-size: 0.9rem; color: var(--text-muted); } .form-group { margin-top: 1rem; } .form-label { display: block; margin-bottom: 0.3rem; font-size: 0.82rem; font-weight: 650; } .form-input { width: 100%; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0.6rem; padding: 0.55rem 0.8rem; } .form-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .field-hint { margin-top: 0.3rem; font-size: 0.78rem; color: var(--text-faint); } .btn-block { width: 100%; justify-content: center; height: 2.4rem; margin-top: 1.2rem; } .btn-discord { background: #5865f2; border-color: #4752c4; color: #fff; } .btn-discord:not([aria-disabled="true"]):hover { background: #4752c4; } .auth-sep { display: flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .auth-sep::before, .auth-sep::after { content: ""; flex: 1; border-top: 1px solid var(--border); } .auth-alt { margin-top: 1.2rem; text-align: center; font-size: 0.86rem; color: var(--text-muted); } .auth-alt a { color: var(--brand); font-weight: 600; } .auth-footer { margin-top: 1.4rem; font-size: 0.78rem; color: var(--text-faint); } .flash { border-radius: 0.75rem; padding: 0.7rem 1rem; font-size: 0.88rem; margin-bottom: 1rem; } .flash-success { background: var(--green-soft); color: var(--green); } .flash-error { background: var(--red-soft); color: var(--red); } .flash-info { background: var(--accent-soft); color: var(--text); } .account-rows { margin-top: 1.4rem; } .account-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .account-row > span:first-child { color: var(--text-muted); } /* Konto page inside the app shell */ .konto-card .account-row { padding: 0.8rem 1.05rem; border-bottom: none; } .konto-card .account-row + .account-row { border-top: 1px solid var(--border); } .avatar-initial { font-weight: 800; font-size: 1.6rem; color: var(--brand); background: var(--brand-soft); } .btn-sm { height: 1.7rem; padding: 0 0.75rem; font-size: 0.78rem; } .inline-form { display: inline-flex; align-items: center; gap: 0.5rem; } .account-row-meta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .konto-switch { cursor: pointer; } .konto-switch > span { display: grid; gap: 0.12rem; min-width: 0; } .konto-switch > span .field-hint { margin: 0; } .konto-switch input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.7rem; height: 1.55rem; margin: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .konto-switch input[type="checkbox"]::after { content: ""; position: absolute; top: 0.12rem; left: 0.12rem; width: 1.22rem; height: 1.22rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px color-mix(in srgb, #000 22%, transparent); transition: transform 0.15s ease; } .konto-switch input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .konto-switch input[type="checkbox"]:checked::after { transform: translateX(1.15rem); } .konto-digest { align-items: flex-start; } .konto-digest > span { display: grid; gap: 0.12rem; min-width: 0; } .konto-digest > span .field-hint { margin: 0; } .konto-digest select.form-input { flex: none; width: auto; min-width: 9.5rem; height: 2rem; padding: 0 0.6rem; font-size: 0.85rem; } .konto-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .invite-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.7rem; } .invite-form .form-input { width: auto; flex: 1; min-width: 10rem; } .invite-form select.form-input { flex: 0 1 12rem; min-width: 8rem; } select.form-input { appearance: auto; } .username-form { flex: 1; justify-content: flex-end; } .username-form .form-input { max-width: 14rem; padding: 0.35rem 0.7rem; font-size: 0.88rem; } .konto-link { color: var(--brand); font-weight: 600; } .konto-blurb { padding: 1.1rem 1.05rem; font-size: 0.92rem; } .konto-blurb p + p { margin-top: 0.45rem; } .username-editor { margin-top: 0.9rem; } .username-editor summary { list-style: none; cursor: pointer; display: inline-block; } .username-editor summary::-webkit-details-marker { display: none; } .username-editor[open] summary { display: none; } .username-input-wrap { position: relative; max-width: 20rem; } .username-at { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--text-faint); } .username-input-wrap .form-input { padding-left: 1.9rem; padding-right: 2.4rem; } .username-status { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); font-size: 0.9rem; } .username-status.ok { color: var(--green); } .username-status.bad { color: var(--red); } .username-change [data-submit] { margin-top: 0.2rem; } /* ---------- Avatars ---------- */ .avatar-img { object-fit: cover; border-radius: 50%; border: 1px solid var(--border); } .avatar-initial { border-radius: 50%; } .topbar-avatar { width: 1.35rem; height: 1.35rem; display: inline-grid; place-items: center; font-size: 0.65rem; flex: none; } /* Logged-in chip: avatar nests flush into the button's left end. */ .topbar-user { padding-left: 0.25rem; } .topbar-user .topbar-avatar { width: 1.55rem; height: 1.55rem; font-size: 0.72rem; /* Button radius (0.75rem) minus the inset, so the corners run parallel. */ border-radius: 0.55rem; } .avatar-blurb { display: flex; gap: 1rem; align-items: flex-start; } .avatar-preview { flex: none; width: 4.5rem; height: 4.5rem; font-size: 1.8rem; } .avatar-form { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; } .avatar-pick { position: relative; overflow: hidden; cursor: pointer; } .avatar-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .avatar-remove { display: inline-flex; margin-top: 0.5rem; } /* ---------- Admin ---------- */ .impersonation-bar { display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 0.4rem 1rem; background: var(--yellow-soft); color: var(--yellow); font-size: 0.85rem; font-weight: 600; border-bottom: 1px solid var(--border); } .admin-search { margin: 1.4rem 0 0; max-width: 100%; } .admin-user { padding: 0.95rem 1.05rem; border-bottom: 1px solid var(--border); } .admin-user:last-child { border-bottom: none; } .admin-user-head { display: flex; gap: 0.85rem; align-items: center; } .admin-user-main { min-width: 0; flex: 1; } .admin-user-meta { display: block; font-size: 0.78rem; color: var(--text-faint); margin-top: 0.1rem; } .admin-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; padding-left: 3.65rem; } .admin-select { width: auto; padding: 0.3rem 0.6rem; font-size: 0.82rem; } .badge-banned { background: var(--red-soft); color: var(--red); } .btn-danger { color: var(--red); } .btn-danger:hover { border-color: var(--red); } .admin-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .admin-table th { text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface); } .admin-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover td { background: color-mix(in srgb, var(--brand) 5%, transparent); } .admin-table-nowrap { white-space: nowrap; } .admin-table-user { display: flex; align-items: center; gap: 0.65rem; min-width: 11rem; } .admin-table-user .tile { width: 2.15rem; height: 2.15rem; font-size: 0.95rem; } .admin-table-name { display: flex; align-items: center; gap: 0.4rem; font-weight: 650; } .admin-table-name a { color: inherit; text-decoration: none; } .admin-table-name a:hover { color: var(--brand); } .admin-table-meta { display: block; font-size: 0.75rem; color: var(--text-faint); } .admin-table-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; } .admin-table-count { font-weight: 700; color: inherit; text-decoration: none; } .admin-table-count:hover { color: var(--brand); } .admin-table-actions-head { text-align: right; } .admin-table-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; } .admin-table-actions form { display: inline; } .admin-table .inline-form .form-input { min-width: 8.5rem; width: auto; } .admin-back { margin: 1rem 0 0; font-size: 0.86rem; } .admin-back a { color: var(--text-muted); text-decoration: none; } .admin-back a:hover { color: var(--brand); } .admin-edit-card { padding: 1.1rem 1.15rem 1.3rem; } .admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem 1.2rem; } .admin-form-grid .form-group { margin-top: 0; } .admin-form-grid .form-group-wide { grid-column: 1 / -1; } .admin-edit-save { margin: 0.4rem 0 1.4rem; } @media (max-width: 720px) { .admin-form-grid { grid-template-columns: 1fr; } } .admin-user-hero { align-items: flex-start; } .admin-avatar-drop { flex: none; } .admin-avatar-zone { position: relative; display: grid; place-items: center; cursor: pointer; } .admin-avatar-zone .tile-lg { width: 5.4rem; height: 5.4rem; font-size: 2.2rem; border-radius: 18px; } .admin-avatar-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .admin-avatar-hint { position: absolute; inset: auto 0.25rem 0.3rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; text-align: center; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / 55%); pointer-events: none; opacity: 0; } .admin-avatar-zone:hover .admin-avatar-hint, .admin-avatar-zone.is-drop .admin-avatar-hint { opacity: 1; } .admin-avatar-zone.is-drop .tile-lg { outline: 2px dashed var(--accent); outline-offset: 3px; } .admin-avatar-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; } @media (max-width: 560px) { .admin-actions { padding-left: 0; } } /* ---------- List overview (Oversigt) ---------- */ .list-hero { position: relative; overflow: hidden; padding: 3.2rem 1.25rem 2.4rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 65%, var(--surface) 100%); } /* Blocky pixel grid — a subtle nod to the game worlds we index. */ .list-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 75%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 75%); pointer-events: none; } .list-hero-art { position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%) rotate(-8deg); opacity: 0.16; pointer-events: none; } .list-hero-art img, .list-hero-art i { display: block; width: 13rem; height: 13rem; font-size: 11rem; object-fit: contain; } .list-hero-inner { position: relative; max-width: 34rem; } .list-hero h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; } .list-hero .dot { color: var(--accent); } .list-hero-tag { margin-top: 0.4rem; font-size: 1.05rem; font-weight: 650; } .list-hero-intro { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-muted); } .list-hero-more { color: var(--accent); font-weight: 650; white-space: nowrap; } /* ---------- Join CTA ---------- */ .cta-join { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; padding: 1.1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--radius); background: var(--accent-soft); transition: box-shadow 75ms ease-in; } .cta-join:hover { box-shadow: var(--shadow-md); } .cta-join-main { flex: 1; min-width: 0; } .cta-join strong { display: block; font-size: 1rem; letter-spacing: -0.01em; } .cta-join-main > span { display: block; margin-top: 0.15rem; font-size: 0.88rem; color: var(--text-muted); } .cta-join > i { color: var(--accent); } /* ---------- Section "Se alle" links ---------- */ .section-head { justify-content: space-between; } .section-more { font-size: 0.82rem; font-weight: 650; color: var(--text-muted); white-space: nowrap; } .section-more:hover { color: var(--accent); } .section-more i { font-size: 0.72rem; } /* ---------- :target modal ---------- */ .modal { position: fixed; inset: 0; display: none; z-index: 60; place-items: center; padding: 1.5rem; } .modal:target { display: grid; } .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal-card { position: relative; width: 100%; max-width: 30rem; max-height: 85vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3); padding: 1.8rem; } .modal-card h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; } .modal-card h2 .dot { color: var(--accent); } .modal-text { margin-top: 0.7rem; font-size: 0.92rem; color: var(--text-muted); } .modal-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); } .modal-close:hover { background: var(--surface-2); color: var(--text); } .concepts { margin: 1.2rem 0 0; } .concepts dt { font-weight: 750; font-size: 0.95rem; } .concepts dt:not(:first-child) { margin-top: 0.9rem; } .concepts dd { margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--text-muted); } /* Tabs can overflow on small screens with five items */ .tabs { overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } @media (max-width: 560px) { .list-hero-art { opacity: 0.08; } } .section > .field-hint { margin-top: 0.5rem; padding-inline: 0.2rem; } .konto-logout { margin-top: 2rem; } /* ---------- Shell responsiveness ---------- */ @media (max-width: 1100px) { .shell { grid-template-columns: 230px minmax(0, 1fr); } .rail-slot { display: none; } .rail-slot:target { display: block; position: fixed; inset: 0; z-index: 60; } .rail-slot:target .rail-backdrop { display: block; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .rail-slot:target .rail-close { display: grid; position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); } .rail-slot:target .rail-close:hover { background: var(--surface-2); color: var(--text); } .rail-slot:target .rail { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: min(22rem, calc(100% - 2.5rem)); height: auto; align-self: auto; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18); padding-top: 3.2rem; animation: rail-slide-in 180ms ease-out; } body:has(.rail-slot:target) { overflow: hidden; } } @keyframes rail-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } .center { border-inline: none; } .topbar-login, .topbar-inner > .btn-ghost { display: none; } .dropdown.topbar-bell > summary.topbar-bell-btn { display: inline-flex; } } /* ---------- Mobile bottom navigation ---------- */ .mobile-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06); } .mobile-nav-picker { flex: 1; min-width: 0; height: 2.5rem; } .mobile-nav-picker .list-picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-nav-picker .list-picker-caret { margin-left: auto; } .mobile-nav-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border-strong); border-radius: 0.75rem; background: var(--surface); color: var(--text-muted); box-shadow: var(--shadow-sm); } .mobile-nav-btn:hover { color: var(--text); } .mobile-nav-btn .topbar-avatar { width: 1.5rem; height: 1.5rem; } /* Menu sheet slides up from the bottom on mobile. */ .modal-card-menu { max-width: 26rem; padding: 1.4rem 1.2rem; } .modal-card-menu .side-footer { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); } @media (max-width: 560px) { .modal-sheet { place-items: end stretch; padding: 0; } .modal-sheet .modal-card { max-width: none; max-height: 80vh; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); } } /* ============================================================ Font Awesome icon alignment + contextual sidebar ============================================================ */ .side-back { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem 0.75rem; font-size: 0.82rem; font-weight: 650; color: var(--text-faint); } .side-back:hover { color: var(--text); } .side-back i { font-size: 0.8rem; } .side-nav a i { flex: none; width: 1.25rem; text-align: center; font-size: 0.92rem; color: var(--text-faint); } .side-nav a:hover i { color: var(--text-muted); } .side-nav a[aria-current="true"] i { color: var(--accent); } .dropdown summary > i { font-size: 0.9rem; color: var(--text-muted); } .dropdown summary .caret { font-size: 0.6rem; } .dropdown-menu a i { flex: none; width: 1.25rem; text-align: center; font-size: 0.9rem; color: var(--text-faint); } .dropdown-menu a[aria-current="true"] i { color: var(--orange); } .rank-meta i, .profile-stats i, .post-actions i, .article-row-meta i { font-size: 0.85em; } .post-origin { font-size: 0.8rem; color: var(--text-faint); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; } .post-origin:hover { color: var(--text); } .btn i { font-size: 0.82em; } /* ---------- Brand logo + mascot hands ---------- */ /* CSS-masked SVG menu icon — inherits state colors like FA icons. */ .icon-mask { flex: none; display: inline-block; width: 1.25rem; height: 1.05em; background-color: var(--text-faint); -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; } .side-nav a:hover .icon-mask { background-color: var(--text-muted); } .side-nav a[aria-current="true"] .icon-mask { background-color: var(--accent); } .dropdown summary .icon-mask { background-color: var(--text-muted); } .dropdown-menu a[aria-current="true"] .icon-mask { background-color: var(--orange); } /* Full-color SVG inside a tile */ .tile-img { display: block; width: 60%; height: 60%; object-fit: contain; } .brand { display: inline-flex; align-items: center; gap: 0.45rem; } .brand-logo { height: 1.55rem; width: auto; } .brand-img { display: block; height: 1.8rem; width: auto; } .mascot { display: block; width: auto; } .hero .mascot { height: 4.5rem; margin: 0 auto 1.1rem; } .rail-card .mascot { height: 3.6rem; margin-bottom: 0.8rem; } .submit-box .mascot { height: 4rem; margin: 0 auto 0.9rem; } .error-page .mascot { height: 5.5rem; margin: 0 auto 1.2rem; } @media (max-width: 480px) { .hero .mascot { margin-left: 0; } } /* ============================================================ Wizard: "Tilføj noget awsm" (Server → Forhold → Profil → Færdig) ============================================================ */ .wizard-steps { display: flex; gap: 0.35rem; list-style: none; margin: 1.4rem 0 1.2rem; padding: 0; counter-reset: none; } .wizard-step { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--text-faint); padding: 0.3rem 0.7rem 0.3rem 0.35rem; border: 1px solid transparent; border-radius: 999px; } .wizard-step .wizard-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: 0.7rem; background: var(--surface-2); color: var(--text-muted); } .wizard-step.current { color: var(--accent, var(--brand)); border-color: var(--border); background: var(--surface); } .wizard-step.current .wizard-step-num { background: var(--accent, var(--brand)); color: #fff; } .wizard-step.done { color: var(--text-muted); } .wizard-step.done .wizard-step-num { background: var(--accent-soft, var(--surface-2)); color: var(--accent, var(--brand)); } .wizard-step:not(:first-child)::before { content: ""; width: 0.9rem; height: 1px; background: var(--border); margin-right: 0.45rem; } .wizard-card { margin-top: 0.4rem; } .wizard-mascot { height: 3.6rem; } .wizard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.2rem; } .wizard-actions form { display: inline-flex; } .invite-help { margin-top: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .invite-help > p:first-child { margin: 0 0 0.55rem; } .invite-help ol { margin: 0; padding-left: 1.2rem; } .invite-help li + li { margin-top: 0.35rem; } .invite-help .field-hint { margin-top: 0.65rem; } .invite-help-toggle { margin-top: 1rem; } .invite-help-toggle > summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; } .invite-help-toggle[open] > summary { margin-bottom: 0.15rem; } .invite-help-toggle .invite-help { margin-top: 0.6rem; } /* Detected server card */ .server-preview { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .server-preview-icon img { width: 100%; height: 100%; border-radius: inherit; image-rendering: pixelated; } .server-preview-main { min-width: 0; display: grid; gap: 0.35rem; } .server-preview-status { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.82rem; color: var(--text-muted); margin: 0; } .server-preview-motd { margin: 0; font-size: 0.9rem; color: var(--text); overflow-wrap: anywhere; } .server-preview-title { margin: 0; font-size: 1rem; } .server-preview-address { margin: 0; } .server-preview-address code { font-size: 0.82rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.15rem 0.5rem; } /* Relationship choice */ .option-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.2rem; } @media (max-width: 640px) { .option-cards { grid-template-columns: 1fr; } } .option-card { position: relative; display: block; cursor: pointer; } .option-card input { position: absolute; opacity: 0; pointer-events: none; } .option-card-body { display: grid; gap: 0.35rem; height: 100%; padding: 1.1rem 1.15rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color 120ms ease, box-shadow 120ms ease; } .option-card:hover .option-card-body { border-color: var(--text-faint); } .option-card input:checked + .option-card-body { border-color: var(--accent, var(--brand)); box-shadow: 0 0 0 3px var(--accent-soft, var(--brand-soft)); } .option-card input:focus-visible + .option-card-body { outline: 2px solid var(--accent, var(--brand)); outline-offset: 2px; } .option-card-icon { font-size: 1.15rem; color: var(--accent, var(--brand)); } .option-card-title { font-weight: 700; font-size: 0.95rem; } .option-card-text { font-size: 0.82rem; color: var(--text-muted); } /* Category / edition checkbox chips */ .check-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.4rem; } .check-chip { position: relative; cursor: pointer; } .check-chip input { position: absolute; opacity: 0; pointer-events: none; } .check-chip span { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; transition: border-color 100ms ease, color 100ms ease, background 100ms ease; } .check-chip:hover span { border-color: var(--text-faint); } .check-chip input:checked + span { color: var(--accent, var(--brand)); border-color: var(--accent, var(--brand)); background: var(--accent-soft, var(--brand-soft)); } .check-chip input:focus-visible + span { outline: 2px solid var(--accent, var(--brand)); outline-offset: 2px; } .wizard-logo-suggest { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; } .wizard-logo-suggest img { border-radius: 8px; border: 1px solid var(--border); image-rendering: pixelated; } .wizard-banner-preview img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); } /* ============================================================ Listing control panel (/mine) ============================================================ */ .panel-logo img, .tile .tile-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; image-rendering: pixelated; } .panel-row { text-decoration: none; color: inherit; } .panel-row > i { align-self: center; color: var(--text-faint); } .panel-log-item { display: flex; gap: 0.75rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); } .panel-log-item:last-child { border-bottom: none; } .panel-log-body { min-width: 0; flex: 1; } .panel-log-body p { margin: 0; } .panel-log-body p + p { margin-top: 0.2rem; font-size: 0.92rem; } .panel-log-changes { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--text-faint); } .panel-log-changes li { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; } .panel-log-changes li + li { margin-top: 0.15rem; } .panel-log-changes del { text-decoration: line-through; color: var(--red); } .panel-log-changes ins { text-decoration: none; color: var(--green); } .panel-edit { position: relative; } .panel-edit-view { position: relative; } .srv-text .panel-edit-view, .panel-hero-edit > .panel-edit > .panel-edit-view { padding-right: 2.6rem; } .panel-edit-form { display: none; } .panel-edit-toggle:checked ~ .panel-edit-form { display: block; } .panel-edit-toggle:checked ~ .panel-edit-form.panel-edit-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.45rem; } .panel-edit-toggle:checked ~ .panel-edit-view { display: none; } .panel-edit-inline .form-input { flex: 1 1 12rem; min-width: 0; } .panel-edit-pen { position: absolute; z-index: 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); cursor: pointer; opacity: 0.45; transition: opacity 120ms ease, transform 120ms ease, background 120ms ease; } .panel-edit-pen:hover { background: var(--accent-soft); color: var(--accent); transform: scale(1.06); } @media (hover: hover) { .panel-edit-pen { opacity: 0; } .section-head .panel-edit-pen-inline { opacity: 0.55; } .panel-edit:hover .panel-edit-pen, .panel-edit:focus-within .panel-edit-pen, .section-head:hover .panel-edit-pen, .section-head:focus-within .panel-edit-pen { opacity: 1; } } .srv-banner .panel-edit-pen { top: 0.7rem; right: 0.7rem; } .srv-logo .panel-edit-pen { right: -0.35rem; bottom: -0.35rem; } .srv-text .panel-edit-pen, .srv-chips + .panel-edit-pen, .panel-edit-view .panel-edit-pen { top: 0.1rem; right: 0; } .srv-links.panel-edit .panel-edit-pen { position: relative; top: auto; right: auto; flex-shrink: 0; } .panel-edit-pen-inline { position: relative; top: auto; right: auto; width: 1.85rem; height: 1.85rem; font-size: 0.75rem; } .section-head .panel-edit-pen-inline { margin-left: auto; } .panel-hero-edit .srv-banner form { display: block; position: relative; } .panel-hero-edit .srv-banner-empty form { min-height: 6.5rem; } .panel-hero-edit .srv-logo { overflow: visible; } .panel-hero-edit .srv-logo form { display: grid; place-items: center; width: 100%; height: 100%; position: relative; border-radius: inherit; background: var(--surface); } .panel-hero-edit .srv-logo img, .panel-hero-edit .panel-logo-fallback { width: 100%; height: 100%; object-fit: cover; border-radius: calc(1.2rem - 4px); display: grid; place-items: center; font-size: 2.4rem; } .panel-hero-edit .srv-logo .panel-edit-pen { right: -0.35rem; bottom: -0.35rem; } .panel-edit-placeholder { color: var(--text-faint); font-style: italic; } .srv-link.panel-edit-placeholder { border-style: dashed; cursor: default; font-weight: 500; } /* Public listing profile extras */ .profile-banner { margin: 0; } .profile-banner img { display: block; width: 100%; max-height: 16rem; object-fit: cover; } .profile-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; } .profile-about { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; color: var(--text-muted); } .profile-about p { margin: 0; overflow-wrap: anywhere; } /* Admin: categories */ .admin-cat-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .admin-cat-form .form-input { width: auto; flex: 1 1 12rem; } .admin-cat-form .admin-cat-sort { flex: 0 0 5.5rem; width: 5.5rem; } .admin-cat-status { display: flex; align-items: center; margin-top: 0.5rem; } .admin-emoji-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .admin-emoji-form .form-input { width: auto; flex: 1; min-width: 8rem; } .admin-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; } .admin-emoji-card { display: grid; justify-items: center; gap: 0.35rem; padding: 0.9rem 0.7rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); text-align: center; } .admin-emoji-preview { width: 3rem; height: 3rem; object-fit: contain; } .admin-emoji-card code { font-size: 0.78rem; } .admin-emoji-quick { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0; font-size: 1.35rem; } .chip-active { color: var(--accent, var(--brand)); border-color: var(--accent, var(--brand)); background: var(--accent-soft, var(--brand-soft)); } .guide-cats { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0 1.25rem 0.35rem; border: 0; margin: 0; } .guide-cat-chip { position: relative; cursor: pointer; } .guide-cat-chip input { position: absolute; opacity: 0; pointer-events: none; } .guide-cat-chip:has(input:checked), .guide-cat-chip:has(input:focus-visible) { color: var(--accent, var(--brand)); border-color: var(--accent, var(--brand)); background: var(--accent-soft, var(--brand-soft)); } .backbar { display: flex; align-items: center; gap: 0.6rem; } .backbar-id { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 0; min-width: 0; color: inherit; text-decoration: none; } .backbar-name { min-width: 0; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(to right, #000 70%, transparent); -webkit-mask-image: linear-gradient(to right, #000 70%, transparent); } .backbar-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; margin-left: auto; } .backbar-admin { margin-left: auto; } /* Phone verification wizard */ .phone-input-wrap { display: flex; align-items: center; gap: 0.5rem; } .phone-prefix { font-size: 0.9rem; font-weight: 650; color: var(--text-muted); } .code-input { font-size: 1.3rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; } /* "Send SMS-kode" slides in once 8 digits are typed (needs :has; else always visible). */ @supports selector(:has(*)) { .phone-form .send-trigger { display: none; } .phone-form:has(#phone:valid) .send-trigger { display: flex; animation: sendTriggerIn 180ms ease-out; } } @keyframes sendTriggerIn { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; transform: translateY(0); } } .modal-card-confirm { max-width: 24rem; text-align: center; } .modal-card-thanks { max-width: 28rem; } .modal-card-thanks h2 { padding-right: 2rem; font-size: 1.2rem; } .vote-thanks-blurb { font-weight: 650; color: var(--text); } .vote-thanks-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .vote-thanks-actions .btn { flex: 1; justify-content: center; min-width: 0; } .modal-card-thanks .form-input { margin-top: 0.85rem; resize: vertical; } .vote-thanks-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; } .vote-thanks-chips button { font: inherit; font-size: 0.78rem; font-weight: 550; line-height: 1.25; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.32rem 0.7rem; cursor: pointer; text-align: left; } .vote-thanks-chips button:hover { border-color: var(--border-strong); color: var(--text); } .vote-thanks-chips button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .vote-thanks-error { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--red); } .modal-card-thanks .field-hint { margin-top: 0.7rem; } .confirm-number { margin: 0.9rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .confirm-check { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1.2rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; } .confirm-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); } /* Submit appears when the checkbox is ticked (needs :has; else always visible — server enforces). */ @supports selector(:has(*)) { .modal-card-confirm .confirm-submit { display: none; } .modal-card-confirm:has(input:checked) .confirm-submit { display: inline-flex; animation: sendTriggerIn 180ms ease-out; } } .modal-card-confirm .confirm-submit { margin-top: 1rem; } /* ---------- Voting: Awsm + SuperAwsm ---------- */ .vote-form { display: contents; } .vote .vote-count { font-variant-numeric: tabular-nums; } .vote.voted { border-color: var(--accent, var(--brand)); color: var(--accent, var(--brand)); background: var(--accent-soft, var(--brand-soft)); } .vote.voted .arrow { color: var(--accent, var(--brand)); } .profile-vote { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; } .super-star { color: #f5b301; } .btn-super-submit { height: auto; padding: 0.6rem 1rem; flex-direction: column; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; } .btn-super-submit small { font-weight: 500; opacity: 0.85; } .confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 200; } .super-celebrate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .super-celebrate-card { max-width: 26rem; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4); padding: 2.2rem 2rem; animation: celebrateIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1); } .super-celebrate-card h2 { font-size: 1.6rem; font-weight: 800; } .super-celebrate-card p { margin-top: 0.6rem; color: var(--text-muted); } .super-celebrate-star { font-size: 2.6rem; margin: 0 !important; } .super-celebrate-card .btn { margin-top: 1.2rem; } @keyframes celebrateIn { from { opacity: 0; transform: scale(0.8) translateY(1rem); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ---------- Profile customization ---------- */ .birthday-selects { display: inline-flex; gap: 0.4rem; } .birthday-selects .form-input { width: auto; padding: 0.3rem 0.5rem; font-size: 0.85rem; } .font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem; } .font-option { position: relative; cursor: pointer; } .font-option input { position: absolute; opacity: 0; pointer-events: none; } .font-option-body { display: grid; gap: 0.15rem; padding: 0.7rem 0.85rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 100ms ease, box-shadow 100ms ease; } .font-option:hover .font-option-body { border-color: var(--text-faint); } .font-option input:checked + .font-option-body { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .font-option input:focus-visible + .font-option-body { outline: 2px solid var(--brand); outline-offset: 2px; } .font-sample { font-size: 1.15rem; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .color-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; } .color-row input[type="color"] { width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; } .bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; } .bg-option { position: relative; cursor: pointer; } .bg-option input { position: absolute; opacity: 0; pointer-events: none; } .bg-option-body { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid var(--border); border-radius: var(--radius-sm); background-size: 128px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); transition: border-color 100ms ease, box-shadow 100ms ease; } .bg-option:hover .bg-option-body { border-color: var(--text-faint); } .bg-option input:checked + .bg-option-body { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .bg-option input:focus-visible + .bg-option-body { outline: 2px solid var(--brand); outline-offset: 2px; } .bg-none { background: var(--surface-2); } /* Public profile page */ .profile-page.has-bg { background-repeat: repeat; background-size: 256px; } .profile-page.has-bg .pad > .section .feed, .profile-page.has-bg .profile-user-hero { background: var(--surface); border-radius: var(--radius); } .profile-page.has-bg .profile-user-hero { padding: 1.1rem 1.25rem; border: 1px solid var(--border); margin-top: 1.2rem; } .profile-page .profile-banner { border-bottom: 1px solid var(--border); } .profile-user-links { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; } .profile-bio { font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; } /* ---------- Listing community: feed, graf, artikler ---------- */ .backbar .tile { width: 1.9rem; height: 1.9rem; font-size: 1rem; flex: none; } .composer-form { align-items: flex-start; } .composer-main { flex: 1; display: grid; gap: 0.5rem; justify-items: end; } .composer-main textarea { resize: vertical; justify-self: stretch; } .inline-like { display: inline-flex; } .like-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: none; background: none; color: var(--text-faint); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 8px; } .like-btn:hover { color: #e0245e; background: var(--surface-2); } .like-btn.liked { color: #e0245e; } .player-chart-overblik { margin-top: 0.85rem; } .player-chart { position: relative; z-index: 1; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .player-chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; overflow: hidden; } .player-chart-stat { display: grid; gap: 0.2rem; padding: 0.95rem 0.7rem 0.9rem; text-align: center; border-bottom: 1px solid var(--border); } .player-chart-stat + .player-chart-stat { border-left: 1px solid var(--border); } .player-chart-stat-num { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1; } .player-chart-stat-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1.25; } .player-chart-stat-label small { display: block; margin-top: 0.1rem; color: var(--text-faint); font-size: 0.7rem; } .player-chart-frame { position: relative; padding: 0.9rem 0.85rem 0.35rem; background: var(--surface-2); } .player-chart-grid { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr); grid-template-rows: 11rem auto; column-gap: 0.4rem; row-gap: 0.3rem; } .player-chart-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--text-faint); line-height: 1; } .player-chart-plot { display: flex; align-items: stretch; gap: 2px; position: relative; border-bottom: 1px solid var(--border-strong); background-image: repeating-linear-gradient( to bottom, var(--border-strong), var(--border-strong) 1px, transparent 1px, transparent 25% ); } .player-chart-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; cursor: crosshair; } .player-chart-bar { display: block; width: 100%; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: var(--accent); transition: filter 0.12s ease, height 0.12s ease; } .player-chart-col.is-day .player-chart-bar { background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 55%, #fff) 0%, var(--accent) 38%, color-mix(in srgb, var(--accent) 72%, #0f172a) 100% ); } .player-chart-col.is-night .player-chart-bar { background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 42%, #0369a1 100%); } .player-chart-col.is-now .player-chart-bar { background: linear-gradient(180deg, #fde68a 0%, #eab308 40%, #a16207 100%); } .player-chart-col.has-players .player-chart-bar { min-height: 4px; } .player-chart-col.is-peak:not(.is-now) .player-chart-bar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } .player-chart-col:hover .player-chart-bar, .player-chart-col.is-hover .player-chart-bar { filter: brightness(1.12); } .player-chart-x { display: flex; gap: 2px; font-size: 0.65rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .player-chart-x span { flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; } .player-chart-tooltip { position: absolute; z-index: 3; pointer-events: none; min-width: 7.5rem; padding: 0.42rem 0.6rem; border-radius: 8px; background: var(--text); color: var(--surface); font-size: 0.78rem; line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-md); transform: translate(-50%, calc(-100% - 8px)); } .player-chart-tooltip strong { display: block; font-size: 0.72rem; font-weight: 650; opacity: 0.72; } .player-chart-tooltip .pct-value { display: block; font-weight: 700; } .player-chart-legend { display: flex; flex-wrap: wrap; gap: 0.85rem 1.15rem; justify-content: center; padding: 0.7rem 0.85rem 0.85rem; font-size: 0.75rem; color: var(--text-muted); } .pcl-item { display: inline-flex; align-items: center; gap: 0.4rem; } .pcl-sw { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; } .pcl-sw-day { background: var(--accent); } .pcl-sw-night { background: #0ea5e9; } .pcl-sw-now { background: #eab308; } @media (max-width: 480px) { .player-chart-stat { padding: 0.8rem 0.4rem 0.75rem; } .player-chart-stat-num { font-size: 1.2rem; } .player-chart-plot, .player-chart-x { gap: 1px; } .player-chart-grid { grid-template-columns: 1.7rem minmax(0, 1fr); grid-template-rows: 9rem auto; } .player-chart-legend { gap: 0.55rem 0.8rem; font-size: 0.7rem; } } .article-body { margin-top: 1.2rem; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; } /* Directory rail */ .rail-super-card { background: linear-gradient(180deg, color-mix(in srgb, #f5b301 14%, var(--surface)), var(--surface) 85%); } .rail-super-card h3 i { color: #f5b301; } .rail-people { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.7rem; } .rail-person { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.3rem; border-radius: var(--radius-sm); color: var(--text-muted); } .rail-person:hover { background: var(--surface-2); color: var(--text); } .rail-person-avatar { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; flex: none; } .rail-person-name { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Discreet owner-claim hint on unclaimed listings */ .claim-hint { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--text-faint); } .claim-hint a { color: var(--text-muted); text-decoration: underline; } .claim-hint a:hover { color: var(--accent, var(--brand)); } /* ---------- Topbar list-picker + picker modals ---------- */ /* Picker sits before the logo so it reads as the subdomain: [Minecraft].awsm */ .burger, .rail-burger { display: none; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; flex: none; border-radius: 0.7rem; color: var(--text); } .burger:hover, .rail-burger:hover { background: var(--surface-2); } /* Framed picker as the first item in the sidebar/menu. */ .list-picker-block { display: flex; width: 100%; height: 2.6rem; padding: 0 0.75rem; margin-bottom: 0.9rem; font-size: 0.95rem; } .list-picker-block .list-picker-caret { margin-left: auto; } .list-picker { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.15rem; padding: 0 0.7rem; border: 1px solid var(--border-strong); border-radius: 0.75rem; background: var(--surface); color: var(--text); font-size: 0.875rem; font-weight: 650; box-shadow: var(--shadow-sm); transition: box-shadow 120ms ease, border-color 120ms ease; } .list-picker:hover { box-shadow: var(--shadow-md); border-color: var(--text-faint); } .list-picker:active { box-shadow: none; } .list-picker-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; } .list-picker-icon .tile-img { width: 100%; height: 100%; object-fit: contain; } .list-picker-icon i { font-size: 0.9rem; } .list-picker-caret { font-size: 0.6rem; color: var(--text-faint); } .modal-card-list { padding: 1.5rem; } .modal-search { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0 0.85rem; border: 1px solid var(--border-strong); border-radius: 0.75rem; background: var(--surface); color: var(--text-faint); } .modal-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .modal-search input { flex: 1; height: 2.4rem; border: none; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 0.92rem; } .modal-list { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.9rem; } .modal-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm); color: var(--text); } .modal-row:hover { background: var(--surface-2); } .modal-row[aria-current="true"] { background: var(--accent-soft); } .modal-row .tile { flex: none; } .modal-row-main { display: grid; gap: 0.05rem; min-width: 0; } .modal-row-title { font-size: 0.95rem; font-weight: 700; } .modal-row-sub { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-row-go { margin-left: auto; color: var(--text-faint); font-size: 0.8rem; } .modal-sep { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0.2rem; } /* Unique tile colors per modal action — tints adapt to dark mode via color-mix. */ .modal-row-feed .tile { background: color-mix(in srgb, #e8a800 16%, var(--surface)); color: #e8a800; } .modal-row-blog .tile { background: color-mix(in srgb, #4dabf7 16%, var(--surface)); color: #1c7ed6; } .modal-row-guide .tile { background: color-mix(in srgb, #9775fa 16%, var(--surface)); color: #7048e8; } .modal-row-add { border: 1.5px solid var(--accent, var(--brand)); background: var(--accent-soft, var(--brand-soft)); } .modal-row-add:hover { background: color-mix(in srgb, var(--accent, var(--brand)) 18%, var(--surface)); } .modal-row-add .tile { background: var(--accent, var(--brand)); color: #fff; } .modal-row-add .modal-row-title { color: var(--accent, var(--brand)); } .modal-row-add .modal-row-go { color: var(--accent, var(--brand)); } /* Konto rail */ .rail-avatar-card .rail-avatar { width: 5rem; height: 5rem; font-size: 2rem; margin: 0.6rem 0; } .rail-avatar-card .avatar-form, .rail-avatar-card .avatar-remove { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; } .konto-username { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } /* ============================================================ Server menu — sticky row on desktop, dropdown on mobile ============================================================ */ .srv-nav-bar { --srv-nav-h: 3rem; position: sticky; top: var(--topbar-h); z-index: 8; padding: 0.5rem 1.25rem; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--accent-soft), transparent 55%), linear-gradient(180deg, var(--surface), var(--surface-2)); } .srv-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; } .srv-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .srv-tab:hover { color: var(--text); background: var(--surface); } .srv-tab[aria-current="true"] { color: var(--accent, var(--brand)); border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow-sm); } .srv-nav-mobile { display: none; } .srv-nav-mobile > summary { display: flex; width: 100%; border-radius: var(--radius-sm); } .srv-nav-current { margin-left: auto; color: var(--accent, var(--brand)); } .srv-nav-mobile .dropdown-menu { left: 0; right: 0; min-width: 0; } /* ============================================================ Server hero — banner, identity, stacked actions ============================================================ */ .srv-hero { position: relative; z-index: 2; padding: 0 1.25rem 1.4rem; border-bottom: 1px solid var(--border); } .srv-banner { position: relative; margin: 0 -1.25rem; background: var(--surface-2); line-height: 0; } /* Short banners keep their own height; only taller ones get cropped. */ .srv-banner img { width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: center; } .srv-banner-empty { height: 6.5rem; background-image: radial-gradient(120% 140% at 15% 0%, var(--accent-soft), transparent 60%), linear-gradient(120deg, var(--surface-2), var(--surface)); } .srv-main { position: relative; z-index: 1; margin-top: -2.7rem; } .srv-logo { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; font-size: 2.4rem; border-radius: 1.2rem; border: 4px solid var(--surface); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; } .srv-logo img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } /* The logo sits on its own line; title + follow share the row below. */ .srv-text { padding-top: 0.75rem; } .srv-identity { display: flex; align-items: flex-start; gap: 0.9rem; } .srv-identity .srv-text { flex: 1; min-width: 0; } .srv-follow { flex: none; margin-left: auto; padding-top: 0.75rem; } .srv-follow-card { display: grid; justify-items: center; align-content: center; gap: 0.28rem; width: 4.35rem; height: 4.35rem; padding: 0.35rem; border: 2px solid #e03131; border-radius: 0.9rem; background: #fff; color: #e03131; font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color 140ms ease, color 140ms ease, transform 80ms ease, box-shadow 140ms ease; } .srv-follow-card .fa-heart { font-size: 1.2rem; } .srv-follow-card:hover { box-shadow: var(--shadow-md); filter: brightness(1.04); } .srv-follow-card:active { transform: translateY(1px); box-shadow: none; } .srv-follow-card.is-on { background: #e03131; color: #fff; } [data-theme="dark"] .srv-follow-card:not(.is-on) { background: var(--surface); } .srv-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .srv-verified { font-size: 1rem; color: var(--accent, var(--brand)); } .srv-tagline { margin-top: 0.25rem; font-size: 0.98rem; color: var(--text-muted); } .srv-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin: 0.7rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--text-muted); } .srv-fact { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .srv-fact-score { position: relative; } .srv-score-link { display: inline-flex; align-items: center; gap: 0.35rem; color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); cursor: pointer; } .srv-score-link:hover { color: var(--text); border-bottom-color: var(--accent, var(--brand)); } .score-pop { display: none; position: absolute; z-index: 8; top: calc(100% + 0.5rem); left: 0; width: 18.5rem; padding: 0.85rem 0.95rem 0.75rem; border: 1px solid var(--border); border-radius: 0.85rem; background: var(--surface); color: var(--text); white-space: normal; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); text-align: left; } .score-pop::before { content: ""; position: absolute; top: -6px; left: 1.1rem; width: 10px; height: 10px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); background: var(--surface); transform: rotate(45deg); } @media (hover: hover) and (pointer: fine) { .srv-fact-score:hover .score-pop, .srv-fact-score:focus-within .score-pop { display: block; } } .score-pop-more { display: block; margin-top: 0.55rem; font-size: 0.72rem; font-weight: 650; color: var(--text-muted); } .score-break-list { margin: 0; padding: 0; list-style: none; } .score-break-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.45rem 0.7rem; align-items: baseline; padding: 0.28rem 0; font-size: 0.84rem; } .score-break.is-compact .score-break-row { font-size: 0.8rem; } .score-break.is-compact .score-break-row + .score-break-row { border-top: 1px solid var(--border); } .score-break-label { display: inline-flex; align-items: baseline; gap: 0.4rem; min-width: 0; font-weight: 650; } .score-break-label i { width: 0.9rem; color: var(--text-muted); font-size: 0.75rem; } .score-break-label small { font-weight: 550; color: var(--text-muted); } .score-break-value { color: var(--text-muted); font-variant-numeric: tabular-nums; } .score-break-pts { min-width: 2.2rem; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; } .score-break-hint { margin: -0.1rem 0 0.45rem; padding: 0 0 0.45rem 1.3rem; border-bottom: 1px solid var(--border); font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; } .score-break-hint:last-of-type { border-bottom: none; } .score-break-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0.45rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.84rem; font-weight: 650; } .score-break-total strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .score-break-offline { margin: 0.55rem 0 0; padding: 0.5rem 0.65rem; border-radius: 0.65rem; background: color-mix(in srgb, #eab308 16%, var(--surface-2)); color: var(--text); font-size: 0.78rem; line-height: 1.4; white-space: normal; } .modal-card-score { max-width: 32rem; text-align: left; } .modal-card-score h2 { display: flex; align-items: center; gap: 0.45rem; padding-right: 2rem; } .modal-card-score h2 .fa-bolt { color: var(--accent, var(--brand)); } .score-formula { margin: 1rem 0 0.4rem; padding: 0.7rem 0.85rem; border-radius: 0.75rem; background: var(--surface-2); font-size: 0.82rem; font-weight: 650; line-height: 1.55; color: var(--text); } .srv-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 1rem; } .srv-ip, .srv-link { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.2rem; max-width: 100%; padding: 0 0.8rem; border-radius: 0.7rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 650; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .srv-ip { border-style: dashed; border-color: var(--border-strong); } .srv-ip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srv-ip-edition { flex-shrink: 0; color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .srv-ip:hover, .srv-link:hover { border-color: var(--accent, var(--brand)); background: var(--surface); } .srv-chips { margin-top: 0.7rem; } .srv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1.1rem; } .srv-btn { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.9rem; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 120ms ease, transform 80ms ease, filter 120ms ease; } .srv-btn:hover { box-shadow: var(--shadow-md); filter: brightness(1.04); } .srv-btn:active { transform: translateY(1px); box-shadow: none; } .srv-btn-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 0.65rem; background: rgba(255, 255, 255, 0.22); font-size: 0.9rem; } .srv-btn-text { display: grid; gap: 0.05rem; min-width: 0; } .srv-btn-title { font-size: 0.9rem; font-weight: 750; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srv-btn-sub { font-size: 0.71rem; line-height: 1.25; opacity: 0.85; } .srv-btn-count { margin-left: auto; padding-left: 0.6rem; border-left: 1px solid currentcolor; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; } .srv-btn-vote { border-color: transparent; background: var(--accent, var(--brand)); color: #fff; } .srv-btn-vote.is-done { background: var(--accent-soft); border-color: var(--accent, var(--brand)); color: var(--accent, var(--brand)); box-shadow: none; cursor: default; } .srv-btn-vote.is-done .srv-btn-icon { background: rgba(255, 255, 255, 0.55); } .srv-btn-super { border-color: #f5b301; background: linear-gradient(135deg, #ffe066, #ffc933 70%); color: #7a5200; } .srv-btn-super .srv-btn-icon { background: rgba(255, 255, 255, 0.55); color: #a06c00; } .srv-btn-super.is-mine { outline: 2px solid #f5b301; outline-offset: 2px; } /* Already spent this month somewhere else: still clickable, but calm. */ .srv-btn-super.is-used { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); box-shadow: none; } .srv-btn-super.is-used .srv-btn-icon { background: var(--surface); color: #c9a227; } .backbar .js-follow { flex: none; margin-left: 0.15rem; } .srv-follow-compact.is-on { color: var(--accent, var(--brand)); } .srv-claim { margin-top: 1rem; } .server-about { line-height: 1.65; overflow-wrap: anywhere; } /* Overblik: quick stats */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.6rem; } .stat-card { display: grid; gap: 0.15rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: center; } .stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.78rem; color: var(--text-muted); } .supporter-people { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } /* Live players in the rail */ .rail-players-count { margin-top: 0.3rem; font-size: 0.9rem; color: var(--text-muted); } .rail-players-count strong { font-size: 1.15rem; color: var(--text); } .player-heads { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.8rem 0 0.6rem; } .player-head { width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--surface-2); image-rendering: pixelated; } .rail-facts { display: grid; gap: 0.5rem; margin-top: 0.7rem; } .rail-fact { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.85rem; color: var(--text-muted); } .rail-fact strong { color: var(--text); text-align: right; } @media (max-width: 560px) { .server-banner { height: 7.5rem; } .server-identity h1 { font-size: 1.4rem; } } /* ============================================================ Rich text — Redactor editor + rendered JSON content ============================================================ */ .editor-field { --rx-font-ui: var(--font); --rx-font-text: var(--font); --rx-font-heading: var(--font); } /* Match the 0.6rem radius of .form-input (the library sets its own inline-ish defaults). */ .editor-field .rx-main-container { border-radius: 0.6rem !important; } .editor-field .rx-toolbox-container { border-radius: 0.6rem; } /* The textarea is only the no-JS fallback; Redactor hides it itself. */ .editor-field .rx-editor { font-size: .95rem; } /* Modchat / listing feed: lock the column so the log scrolls, not the page. Blog + “Om serveren” grow with the article so the page scrolls — Redactor’s block-control (the 3 dots) is position:absolute on the document and desyncs when the editor itself is the scroll container. Blog comments sit under the article and must not lock the column. */ .center:has(.modchat):not(:has(.blog-comments)), .center:has(.dm-shell) { height: calc(100dvh - var(--topbar-h)); max-height: calc(100dvh - var(--topbar-h)); min-height: 0; overflow: hidden; } .center:has(.modchat):not(:has(.blog-comments)) .footer-mini, .center:has(.dm-shell) .footer-mini { display: none; } .listing-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .listing-feed .backbar, .listing-feed .srv-nav-bar, .listing-feed .tabs, .listing-feed .pad { flex: none; } .listing-feed .srv-nav-bar { position: static; } .modchat-tag { font-size: 0.78rem; font-weight: 750; color: var(--accent, var(--brand)); } .modchat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } .modchat-head { flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border); } .modchat-head .tile { width: 2.2rem; height: 2.2rem; font-size: 1rem; border-radius: 50%; } .modchat-head-text { display: grid; gap: 0.1rem; min-width: 0; } .modchat-head-text strong { font-size: 0.98rem; } .modchat-head-text span { font-size: 0.8rem; color: var(--text-faint); } .modchat-flash { flex-shrink: 0; margin: 0; border-radius: 0; border-left: none; border-right: none; } .modchat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .modchat-empty { margin: 0; padding: 2.2rem 1.25rem; color: var(--text-faint); text-align: center; } .modchat-msg { --modchat-msg-bg: transparent; position: relative; padding: 0.75rem 1.25rem; background: var(--modchat-msg-bg); border-bottom: none; } .modchat-msg:hover, .modchat-msg:focus-within { background: color-mix(in srgb, var(--text) 5%, var(--bg)); } .modchat-msg.is-mention:hover, .modchat-msg.is-mention:focus-within { background: color-mix(in srgb, var(--text) 6%, color-mix(in srgb, #f0b429 16%, var(--bg))); } .modchat-msg.is-mention { --modchat-msg-bg: color-mix(in srgb, #f0b429 16%, var(--bg)); box-shadow: inset 3px 0 0 #e0a81a; } .modchat-msg:target, .modchat-msg.is-flash { background: var(--accent-soft); animation: modchat-flash-bg 2.4s ease forwards; } @keyframes modchat-flash-bg { 0%, 55% { background: var(--accent-soft); } 100% { background: var(--modchat-msg-bg); } } .modchat-msg .post-head { gap: 0.5rem; } .modchat-continued-time { display: none; position: absolute; left: 0; top: 0.28rem; width: 3.05rem; text-align: right; font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--text-faint); pointer-events: none; } .modchat-msg.is-continued { padding-top: 0.08rem; padding-bottom: 0.08rem; } .modchat-msg.is-continued .post-head { position: absolute; right: 0.65rem; top: -0.85rem; z-index: 3; gap: 0; opacity: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0.55rem; padding: 0.08rem 0.15rem; box-shadow: 0 4px 14px color-mix(in srgb, #000 12%, transparent); } .modchat-msg.is-continued .post-head > :not(.modchat-msg-actions):not(.modchat-edited-wrap) { display: none; } .modchat-msg.is-continued .modchat-msg-actions { margin-left: 0; } .modchat-msg.is-continued .post-text { margin-top: 0; } .modchat-msg.is-continued .modchat-reacts { margin-top: 0.2rem; } .modchat-msg.is-continued:hover .modchat-continued-time, .modchat-msg.is-continued:focus-within .modchat-continued-time { display: block; } .modchat-msg.is-continued:hover .post-head, .modchat-msg.is-continued:focus-within .post-head { opacity: 1; pointer-events: auto; } .modchat-msg-actions { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; } .modchat-edited-wrap { position: relative; } .modchat-edited { border: none; background: none; color: var(--text-faint); font: inherit; font-size: 0.75rem; font-weight: 650; font-style: italic; cursor: pointer; padding: 0.1rem 0.35rem; border-radius: 8px; } .modchat-edited:hover, .modchat-edited[aria-expanded="true"] { color: var(--text); background: var(--surface-2); } .modchat-history { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 12; width: min(22rem, 70vw); max-height: 16rem; overflow: auto; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--surface); box-shadow: 0 10px 28px color-mix(in srgb, #000 18%, transparent); } .modchat-history-title { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } .modchat-history ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; } .modchat-history time { display: block; font-size: 0.72rem; color: var(--text-faint); } .modchat-history p { margin: 0.15rem 0 0; font-size: 0.85rem; white-space: pre-wrap; } .modchat-history em { color: var(--text-faint); } .modchat-edit-form { margin: 0.35rem 0 0 3rem; display: grid; gap: 0.45rem; } .modchat-edit-form textarea { width: 100%; min-height: 4.2rem; resize: vertical; } .modchat-edit-actions { display: flex; gap: 0.4rem; } .modchat-msg .post-text { margin-top: 0.35rem; margin-left: 3rem; } .modchat-reply-to { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0 3rem; padding: 0.12rem 0 0.12rem 0.55rem; min-width: 0; border-left: 2px solid var(--accent); color: var(--text-faint); font-size: 0.8rem; line-height: 1.25; text-decoration: none; } .modchat-reply-to i { flex: none; font-size: 0.7rem; } .modchat-reply-to strong { flex: none; color: var(--text); font-weight: 700; } .modchat-reply-to span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modchat-reply-to:hover { color: var(--text); } .modchat-reply-to.is-gone { font-style: italic; border-left-color: var(--border); } .modchat-replying { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.15rem; padding: 0.35rem 0.4rem 0.35rem 0.6rem; border-left: 3px solid var(--accent); border-radius: 0 0.65rem 0.65rem 0; background: var(--accent-soft); } .modchat-replying[hidden] { display: none !important; } .modchat-replying > i { flex: none; color: var(--accent); font-size: 0.8rem; } .modchat-replying-text { display: grid; min-width: 0; flex: 1; gap: 0.05rem; } .modchat-replying-text strong { font-size: 0.8rem; font-weight: 750; } .modchat-replying-text span { overflow: hidden; color: var(--text-faint); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; } .modchat-reacts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0 3rem; } .modchat-reacts.is-empty { display: none; } .modchat-react { display: inline-flex; align-items: center; gap: 0.28rem; min-height: 1.55rem; padding: 0.05rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; } .modchat-react:hover, .modchat-react.is-on { border-color: var(--accent); background: var(--accent-soft); } .modchat-react-add { color: var(--text-faint); padding: 0.05rem 0.4rem; } .modchat-emoji { display: inline-block; width: 1.15rem; height: 1.15rem; object-fit: contain; vertical-align: -0.25em; } .modchat-msg .post-text .modchat-emoji { width: 1.45rem; height: 1.45rem; } .modchat-msg .post-text.is-jumbo { font-size: 2.55rem; line-height: 1.15; } .modchat-msg .post-text.is-jumbo-lg { font-size: 3.15rem; } .modchat-msg .post-text.is-jumbo-sm { font-size: 1.9rem; } .modchat-msg .post-text.is-jumbo .modchat-emoji { width: 1em; height: 1em; vertical-align: -0.12em; } .modchat-msg .post-text.is-jumbo .modchat-emoji-char { font-size: 1em; } .modchat-emoji-char { font-size: 1rem; line-height: 1; } .modchat-picker { position: fixed; z-index: 40; width: min(22rem, calc(100vw - 1.5rem)); padding: 0.7rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: 0 16px 40px color-mix(in srgb, #000 22%, transparent); } .modchat-picker[hidden] { display: none !important; } .modchat-picker-quick, .modchat-picker-custom { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.2rem; } .modchat-picker-quick button, .modchat-picker-custom button { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: none; border-radius: 0.55rem; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; } .modchat-picker-quick button:hover, .modchat-picker-custom button:hover { background: var(--surface-2); } .modchat-picker-custom .modchat-emoji { width: 1.45rem; height: 1.45rem; } .modchat-picker-label { margin: 0.55rem 0.15rem 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } .modchat-picker-empty { margin: 0.45rem 0.15rem 0; font-size: 0.8rem; color: var(--text-faint); } .modchat-at { color: var(--accent); font-weight: 700; text-decoration: none; } .modchat-at:hover { text-decoration: underline; } .modchat-at-all { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--accent-soft); } .modchat-bang { display: inline-flex; align-items: center; color: var(--accent); font-weight: 700; text-decoration: none; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--accent-soft); } .modchat-bang:hover { text-decoration: underline; } .modchat-shot { display: block; margin: 0.5rem 0 0 3rem; max-width: min(100%, 28rem); cursor: zoom-in; } .modchat-shot img { display: block; width: 100%; max-height: 16rem; object-fit: cover; object-position: top; border-radius: 0.85rem; border: 1px solid var(--border); background: var(--surface-2); } .modchat-link { color: var(--accent); font-weight: 650; overflow-wrap: anywhere; } .modchat-yt { margin: 0.55rem 0 0 3rem; max-width: min(100%, 28rem); } .modchat-yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 0.85rem; background: #000; } .modchat-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 2.5rem 1.25rem 1.25rem; background: rgba(8, 12, 20, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; } .modchat-lightbox[hidden] { display: none !important; } .modchat-lightbox img { max-width: min(96vw, 72rem); max-height: 90vh; object-fit: contain; border-radius: 0.85rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); cursor: default; } .modchat-lightbox .modal-close { position: fixed; top: 1rem; right: 1rem; z-index: 81; } .awsm-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 2.5rem 1.25rem 1.25rem; background: rgba(8, 12, 20, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; } .awsm-lightbox[hidden] { display: none !important; } .awsm-lightbox img { max-width: 96vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: 0.85rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); cursor: default; } .awsm-lightbox .modal-close { position: fixed; top: 1rem; right: 1rem; z-index: 81; } .awsm-lightbox-nav { position: fixed; top: 50%; z-index: 81; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; border: 1px solid var(--border); border-radius: 50%; color: var(--text); background: var(--surface); cursor: pointer; } .awsm-lightbox-prev { left: 1rem; } .awsm-lightbox-next { right: 1rem; } .awsm-lightbox-nav[hidden] { display: none !important; } .awsm-lightbox-nav:hover { background: var(--surface-2); } .modchat-delete { display: inline-flex; } .modchat-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; padding: 0.55rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -12px 28px color-mix(in srgb, #000 8%, transparent); } .modchat-error { margin: 0 0 0.45rem; padding: 0.4rem 0.75rem; font-size: 0.85rem; color: var(--red); background: var(--surface); border: 1px solid var(--border); border-radius: 0.7rem; } .modchat-composer { margin: 0; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 1.15rem; background: var(--surface); box-shadow: var(--shadow-sm); } .modchat-composer .composer-main { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; position: relative; min-width: 0; } .modchat-composer .composer-main textarea { flex: none; width: 100%; resize: none; max-height: 8rem; overflow-y: auto; border: none; background: transparent; padding: 0.15rem 0.1rem; box-shadow: none; } .modchat-composer .composer-main textarea:focus { outline: none; border: none; box-shadow: none; } .modchat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; } .modchat-attach { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: var(--text-muted); cursor: pointer; appearance: none; } .modchat-attach:hover, .modchat-attach.is-on { color: var(--accent); background: none; } .modchat-preview { position: relative; width: 4.6rem; } .modchat-preview img { display: block; width: 4.6rem; height: 3.2rem; object-fit: cover; border-radius: 0.6rem; border: 1px solid var(--border); } .modchat-preview-x { position: absolute; top: -0.35rem; right: -0.35rem; width: 1.15rem; height: 1.15rem; border: none; border-radius: 999px; background: var(--text); color: var(--bg); cursor: pointer; display: grid; place-items: center; font-size: 0.65rem; padding: 0; } .modchat-suggest { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.45rem); z-index: 9; margin: 0; padding: 0.3rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0.85rem; box-shadow: var(--shadow-md); max-height: 14rem; overflow-y: auto; } .modchat-suggest button { display: flex; align-items: center; gap: 0.55rem; width: 100%; border: none; background: none; color: inherit; font: inherit; text-align: left; padding: 0.45rem 0.55rem; border-radius: 0.6rem; cursor: pointer; } .modchat-suggest button:hover, .modchat-suggest button.is-on { background: var(--accent-soft); } .modchat-suggest strong { font-size: 0.88rem; } .modchat-suggest span { color: var(--text-faint); font-size: 0.8rem; } .modchat-suggest img { width: 1.4rem; height: 1.4rem; object-fit: contain; flex: none; } .modchat-suggest-kind { flex: none; display: grid; place-items: center; width: 1.4rem; color: var(--text-faint); font-size: 0.85rem; } .panel-about-editor { flex: 1 0 auto; display: flex; flex-direction: column; } .panel-about-flash { flex-shrink: 0; margin: 0; border-radius: 0; border-left: none; border-right: none; } .panel-about-editor .editor-field { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 24rem; } .panel-about-editor .editor-field .rx-container, .panel-about-editor .editor-field .rx-main-container { flex: 1; display: flex !important; flex-direction: column; height: auto !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .panel-about-editor .rx-toolbox-container { position: sticky; top: calc(var(--topbar-h) + var(--srv-nav-h, 3rem)) !important; z-index: 6; flex-shrink: 0; border-radius: 0 !important; border-bottom: 1px solid var(--border); background: var(--rx-bg-toolbar, var(--surface)); } .panel-about-editor .rx-editor-container, .panel-about-editor .rx-editor { height: auto; min-height: 24rem; overflow: visible !important; } .panel-about-editor .rx-editor { padding: 1.5rem 1.5rem 4rem; } .panel-about-editor .rx-button[data-name="awsm-save"] { color: var(--accent, var(--brand)); } .panel-about-empty { display: block; } .panel-about-empty:hover { background: var(--surface-2); } .mention-avatar { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-dark); font-size: .7rem; font-weight: 600; } .mention-handle { color: var(--muted); } .rich-text > *:first-child { margin-top: 0; } .rich-text > *:last-child { margin-bottom: 0; } .rich-text p { margin: 0 0 .85rem; line-height: 1.65; } .rich-text h2, .rich-text h3, .rich-text h4 { margin: 1.6rem 0 .6rem; line-height: 1.3; color: var(--text); } .rich-text h2 { font-size: 1.25rem; } .rich-text h3 { font-size: 1.1rem; } .rich-text h4 { font-size: 1rem; } .rich-text ul, .rich-text ol { margin: 0 0 .85rem; padding-left: 1.25rem; } .rich-text li { margin-bottom: .3rem; line-height: 1.6; } .rich-text a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; } .rich-text blockquote { margin: 1.2rem 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--brand); color: var(--muted); } .rich-text blockquote cite { display: block; margin-top: .4rem; font-size: .85rem; font-style: normal; color: var(--muted-2, var(--muted)); } .rich-text figure { margin: 1.2rem 0; } .rich-text .rt-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: .75rem; background: #000; } .rx-content .embed-content { overflow: hidden; border-radius: .75rem; background: #000; } .rich-text a.rt-zoom { display: block; cursor: zoom-in; } .rich-text img { display: block; width: 100%; height: auto; border-radius: .75rem; } .rich-text img.rt-photo, .rx-content img[src*="j.webp"] { border: 1px solid var(--border); } .rich-text figcaption { margin-top: .45rem; font-size: .85rem; color: var(--muted); } .rich-text pre { margin: 1.2rem 0; padding: .85rem 1rem; overflow-x: auto; background: var(--surface-2, var(--accent-soft)); border: 1px solid var(--border); border-radius: .75rem; font-size: .85rem; } .rich-text hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--border); } /* Blocks given a background or border in the editor become info boxes — mirrored inside .rx-content so the editor shows the same thing. */ .rich-text .rt-box, .rx-content [style*="background"], .rx-content [style*="solid"] { padding: 1rem 1.25rem; border-radius: .75rem; } .rich-text .rt-box + .rt-box { margin-top: .85rem; } /* ============================================================ Support tickets ============================================================ */ .ticket-scope { border: none; padding: 0; margin: 0 0 0.4rem; } .ticket-scope legend { margin-bottom: 0.45rem; } .ticket-scope-opt { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 0.45rem; cursor: pointer; } .ticket-scope-opt:has(input:checked) { border-color: var(--accent, var(--brand)); background: var(--accent-soft, var(--brand-soft)); } .ticket-scope-opt input { margin-top: 0.2rem; } .ticket-scope-opt span { display: grid; gap: 0.1rem; } .ticket-scope-opt span span { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; } .ticket-listing-fields { display: none; } .ticket-form:has(#scope-listing:checked) .ticket-listing-fields { display: block; } .ticket-form:has(#scope-listing:checked) .ticket-general-fields { display: none; } .ticket-listing-select { margin-top: 0.45rem; height: auto; } .ticket-row { display: block; color: inherit; text-decoration: none; } .ticket-row:hover { background: var(--surface-2); } .ticket-meta { margin: -0.4rem 0 1rem; font-size: 0.88rem; color: var(--text-muted); } .ticket-thread { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .ticket-msg { display: flex; gap: 0.75rem; padding: 0.95rem 1.05rem; border-bottom: 1px solid var(--border); } .ticket-msg:last-child { border-bottom: none; } .ticket-msg-staff { background: var(--surface-2); } .ticket-msg-main { min-width: 0; flex: 1; } .ticket-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin: 0 0 0.35rem; font-size: 0.88rem; font-weight: 650; } .ticket-msg-time { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--text-faint); } .ticket-msg-body { font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; } .ticket-reply { margin-top: 0.8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .ticket-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; } /* ============================================================ Mobile overrides — keep LAST: same specificity as the base rules above, so source order decides. ============================================================ */ @media (max-width: 1100px) { .rail-burger { display: inline-flex; } } @media (max-width: 860px) { .burger { display: inline-flex; } .rail-slot:target .rail { padding-bottom: calc(1.4rem + 4.6rem + env(safe-area-inset-bottom)); } .mobile-nav { display: flex; } /* Room for the fixed bottom bar. */ body { padding-bottom: 4.6rem; } .center:has(.modchat) { height: calc(100dvh - var(--topbar-h) - 4.6rem); max-height: calc(100dvh - var(--topbar-h) - 4.6rem); } .blog-composer-bar { bottom: 4.6rem; } .srv-banner img { max-height: 220px; } .srv-actions { grid-template-columns: minmax(0, 1fr); } .srv-nav { display: none; } .srv-nav-mobile { display: block; } .srv-name { font-size: 1.35rem; } .srv-follow-card { width: 3.9rem; height: 3.9rem; border-radius: 0.8rem; } .srv-logo { width: 4.6rem; height: 4.6rem; } } @media (max-width: 40rem) { .backbar-name { display: none; } .backbar-actions { gap: 0.2rem; } .backbar-actions .btn { padding-inline: 0.5rem; } } .review-submitter { display: flex; align-items: center; gap: 0.85rem; } .review-banner { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); } .review-banner img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; } .review-dl { display: grid; gap: 0.65rem; margin: 0; } .review-dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; font-size: 0.92rem; } .review-dl dt { color: var(--text-faint); font-weight: 650; } .review-dl dd { margin: 0; overflow-wrap: anywhere; } .review-decide { display: grid; gap: 1.2rem; } .review-reject { display: grid; gap: 0.5rem; justify-items: start; } /* ---------- Community blog ---------- */ .blog-mine-link { padding: 0.85rem 1.25rem 0; font-size: 0.88rem; } .blog-index { display: grid; } .blog-card { display: grid; gap: 0.85rem; padding: 1.25rem 1.25rem 1.35rem; border-bottom: 1px solid var(--border); color: inherit; transition: background-color 0.12s ease; } .blog-card:hover { background: var(--surface-2); } .blog-card-cover { display: block; border-radius: 0.7rem; overflow: hidden; aspect-ratio: 16 / 7; background: var(--surface-2); } .blog-card-cover img { width: 100%; height: 100%; object-fit: cover; } .blog-card h2 { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; } .blog-card p { margin-top: 0.35rem; font-size: 0.92rem; color: var(--text-muted); line-height: 1.5; } .blog-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; margin-top: 0.7rem; font-size: 0.8rem; color: var(--text-faint); } .blog-card-avatar { width: 1.55rem; height: 1.55rem; font-size: 0.7rem; } .blog-status-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; margin: 0 1.25rem; padding: 0.75rem 1rem; border-radius: 0.7rem; background: var(--surface-2); font-size: 0.9rem; } .blog-status-rejected { background: color-mix(in srgb, var(--red, #c44) 12%, var(--surface)); } .blog-related { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; padding: 0.55rem 0.7rem 0.55rem 0.55rem; border: 1px solid var(--border); border-radius: 0.8rem; color: inherit; text-align: left; } .blog-related:hover { background: var(--surface-2); } .blog-related .tile { width: 2.2rem; height: 2.2rem; } .blog-related span span { display: block; font-size: 0.75rem; color: var(--text-faint); } .blog-article .article-kicker { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.45rem 0.8rem; } .blog-article .article-kicker a { display: inline-flex; align-items: center; gap: 0.45rem; } .blog-composer { flex: 1 0 auto; display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h)); } .blog-composer-top { position: sticky; top: var(--topbar-h); z-index: 7; display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border); background: var(--surface); } .blog-composer-status { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; font-size: 0.8rem; color: var(--text-faint); } .blog-composer-flash { flex-shrink: 0; margin: 0; border-radius: 0; border-left: none; border-right: none; } .blog-composer-title { width: 100%; flex-shrink: 0; padding: 1.1rem 1.35rem 0.35rem; border: 0; background: transparent; color: var(--text); font: inherit; font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; } .blog-composer-title::placeholder { color: var(--text-faint); } .blog-composer-title:focus { outline: none; } .blog-server { position: relative; flex-shrink: 0; padding: 0 1.25rem 0.7rem; } .blog-server-toggle { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 0.82rem; cursor: pointer; } .blog-server-toggle:hover, .blog-server.is-open .blog-server-toggle { border-color: var(--accent, var(--brand)); color: var(--text); } .blog-server-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .blog-server-menu { position: absolute; z-index: 8; left: 1.25rem; right: 1.25rem; top: 100%; display: none; gap: 0.2rem; max-height: 18rem; overflow: auto; padding: 0.55rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); box-shadow: 0 12px 32px color-mix(in srgb, #000 16%, transparent); } .blog-server.is-open .blog-server-menu { display: grid; } .blog-server-opt { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.4rem 0.45rem; border: 0; border-radius: 0.5rem; background: transparent; color: inherit; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; } .blog-server-opt.is-filtered { display: none; } .blog-server-opt:hover { background: var(--accent-soft, var(--surface-2)); } .blog-server-opt .tile { width: 1.7rem; height: 1.7rem; font-size: 0.85rem; flex: none; } .blog-composer .editor-field { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 24rem; } .blog-composer .editor-field .rx-container, .blog-composer .editor-field .rx-main-container { flex: 1; display: flex !important; flex-direction: column; height: auto !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .blog-composer .rx-toolbox-container { position: sticky; top: calc(var(--topbar-h) + 3.2rem) !important; z-index: 6; flex-shrink: 0; border-radius: 0 !important; border-bottom: 1px solid var(--border); background: var(--rx-bg-toolbar, var(--surface)); } .blog-composer .rx-editor-container, .blog-composer .rx-editor { height: auto; min-height: 24rem; overflow: visible !important; } .blog-composer .rx-editor { padding: 1.1rem 1.35rem 5rem; } .blog-composer .rx-button[data-name="awsm-save"] { color: var(--accent, var(--brand)); } .blog-composer-bar { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1rem; flex-shrink: 0; padding: 0.7rem 1.1rem; border-top: 1px solid var(--border); background: var(--surface); } .blog-composer-hint { margin: 0; font-size: 0.78rem; color: var(--text-faint); } .blog-composer-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; } .blog-comments { margin-top: 2.4rem; border-top: 1px solid var(--border); } .blog-comments .modchat { overflow: visible; flex: none; min-height: 0; } .blog-comments .modchat-log { overflow: visible; flex: none; } .blog-comments .modchat-empty { padding: 1.6rem 1.25rem; } .blog-comments .modchat-dock { position: sticky; bottom: 0; } .blog-comments .modchat-dock .composer:not(.modchat-composer) { padding: 0; border: none; background: transparent; } .blog-comments .modchat-dock .composer-input { border-radius: 1.15rem; } .article-versions { max-width: 40rem; } .article-version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.55rem; } .article-version-actions form { margin: 0; } .article-versions .panel-log-item .tile { color: var(--text-muted); } /* Admin: AI content generator */ .ai-gen-kind { border: 0; padding: 0; margin: 0 0 0.4rem; } .ai-gen-kind legend { padding: 0; } .ai-gen-radio { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1rem; font-size: 0.92rem; font-weight: 550; } .ai-gen textarea.form-input { min-height: 6.5rem; resize: vertical; line-height: 1.45; } .ai-gen-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; } .ai-gen-error { color: var(--red); } .ai-ideas { display: grid; gap: 0.7rem; } .ai-idea { display: grid; gap: 0.25rem; text-align: left; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); color: inherit; font: inherit; cursor: pointer; } .ai-idea:hover, .ai-idea:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; } .ai-idea strong { font-size: 0.98rem; } .ai-idea span { font-size: 0.84rem; color: var(--text-muted); } @media (min-width: 720px) { .ai-ideas { grid-template-columns: 1fr 1fr; } } /* Friends + online presence */ .presence { position: relative; display: inline-flex; flex: none; } .presence.is-online::after { content: ""; position: absolute; right: 0.05rem; bottom: 0.05rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--surface); } .presence-lg.is-online::after { width: 0.75rem; height: 0.75rem; } .friend-online { color: var(--brand); font-weight: 650; } .friend-search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .friend-search .form-input { flex: 1 1 12rem; } .friend-row { display: flex; align-items: center; gap: 0.55rem; } .profile-friend-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.7rem; } .profile-friend-actions form { display: inline-flex; } /* Discord-style friend DMs */ .dm-shell { flex: 1; min-height: 0; display: flex; overflow: hidden; } .dm-list { flex: none; width: 18.5rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; border-inline-end: 1px solid var(--border); padding: 0.85rem 0.7rem 1.2rem; } .dm-list-head { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.45rem; } .dm-list-head h1 { font-size: 1.15rem; margin: 0.15rem 0.2rem 0; } .dm-search .form-input { width: 100%; } .dm-flash { margin: 0.35rem 0.2rem; } .dm-label { display: flex; align-items: center; gap: 0.4rem; margin: 0.85rem 0.35rem 0.25rem; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .dm-label span { color: var(--text); } .dm-empty-hint { margin: 0.4rem 0.4rem 0.8rem; color: var(--muted); font-size: 0.9rem; } .dm-row { flex: none; display: flex; align-items: center; gap: 0.45rem; max-height: 3.6rem; border-radius: 0.75rem; padding: 0.15rem; } .dm-row-link { display: flex; align-items: center; gap: 0.55rem; flex: none; min-width: 0; max-height: 3.6rem; padding: 0.4rem 0.45rem; border-radius: 0.75rem; color: inherit; text-decoration: none; } .dm-row > .dm-row-link { flex: 1 1 auto; } .dm-row-link:hover, .dm-row-link.is-active { background: var(--surface-2, color-mix(in srgb, var(--brand) 8%, transparent)); } .dm-row-link.is-unread .row-title { font-weight: 750; } .dm-unread { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); margin-inline-end: 0.35rem; } .dm-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .dm-pane .modchat { flex: 1; min-height: 0; } .dm-pane .modchat-head { flex-wrap: wrap; } .dm-pane .modchat-head-text { flex: 1; } .dm-pane .modchat-head form { margin: 0; } .dm-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 2rem 1.5rem; color: var(--muted); } .dm-blank h2 { margin: 0; color: var(--text); } .dm-blank p { margin: 0; max-width: 26rem; } .dm-back { display: none; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 999px; color: inherit; } .dm-back:hover { background: var(--surface-2, color-mix(in srgb, var(--brand) 10%, transparent)); } @media (max-width: 800px) { .dm-list { width: 100%; border-inline-end: 0; } .dm-shell.is-thread .dm-list { display: none; } .dm-shell:not(.is-thread) .dm-pane { display: none; } .dm-back { display: grid; } } /* ---------- Tech links (Digg-style feed) ---------- */ .link-card { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--border); } .link-card:hover { background: var(--surface-2); } .link-card-thumb-wrap { flex: none; } .link-card-thumb { display: block; width: 7.5rem; height: 4.75rem; object-fit: cover; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); } .link-card-thumb-empty { display: grid; place-items: center; color: var(--text-faint); font-size: 1.2rem; } .link-card-body { flex: 1; min-width: 0; } .link-card-title { display: block; font-size: 1.02rem; font-weight: 750; letter-spacing: -0.02em; color: inherit; } .link-card-title:hover { color: var(--accent); } .link-card-desc { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-card-meta { display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--text-faint); } .link-card-cat { color: var(--accent); font-weight: 650; } .link-detail { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; } .link-detail-vote { flex: none; padding-top: 0.2rem; } .link-detail-main { flex: 1; min-width: 0; } .link-detail-hero { display: block; margin: 0 0 1rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); } .link-detail-hero img { display: block; width: 100%; max-height: 22rem; object-fit: cover; } .link-detail h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; } .link-detail h1 a { color: inherit; text-decoration: none; } .link-detail h1 a:hover { color: var(--accent); } .link-detail-desc { margin: 0.6rem 0 0; color: var(--text-muted); font-size: 1.02rem; } .link-detail-main .article-body { margin-top: 1.2rem; } .link-byline { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; margin: 1.05rem 0 0; } .link-byline-author { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: inherit; } .link-byline-author .post-avatar { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; } .link-byline-author strong { color: var(--text); font-size: 0.9rem; } .link-byline-time { font-size: 0.84rem; color: var(--text-muted); } .link-voters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.28rem; list-style: none; margin: 0.7rem 0 0; padding: 0; } .link-voter-avatar { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; font-size: 0.62rem; font-weight: 750; border-radius: 50%; background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); } .link-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.28rem; margin: 0.85rem 0 0; } a.link-cat { font-size: 0.68rem; font-weight: 600; line-height: 1.2; color: var(--text-muted); background: var(--surface); border: 1px solid var(--accent); border-radius: 999px; padding: 0.1rem 0.48rem; } a.link-cat:hover { color: var(--text); } .link-source { margin: 2em 0 0; font-size: 0.95rem; } .link-source a { font-weight: 650; } .link-submit-preview { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; } @media (max-width: 700px) { .link-card { flex-wrap: wrap; } .link-card .vote-form, .link-card .vote { order: 0; } .link-card-thumb-wrap { order: 1; margin-left: auto; } .link-card-body { order: 2; flex-basis: 100%; } .link-card-thumb { width: 5.4rem; height: 3.4rem; } } /* Minecraft resource directory */ .linkdir-body { padding-top: 1.25rem; padding-bottom: 2rem; } .resource-search { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; } .resource-search .form-input { flex: 1 1 16rem; } .linkdir-block { margin-bottom: 2rem; } .linkdir-block-note { font-size: 0.82rem; color: var(--text-faint); } .linkdir-toc { margin-bottom: 2rem; } .linkdir-toc h2 { margin: 0 0 0.75rem; font-size: 1.1rem; } .linkdir-toc-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; } .linkdir-toc-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; break-inside: avoid; border-bottom: 1px solid var(--border); } .linkdir-toc-list a { color: var(--accent); text-decoration: none; font-weight: 600; } .linkdir-toc-list a:hover { text-decoration: underline; } .linkdir-toc-count { flex: none; font-size: 0.82rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .linkdir-cat-desc { margin: 0 0 0.5rem; max-width: 42rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; } .linkdir-cat-desc a { color: var(--accent); font-weight: 600; text-decoration: none; } .linkdir-cat-desc a:hover { text-decoration: underline; } @media (max-width: 640px) { .linkdir-toc-list { columns: 1; } } .linkdir-featured-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .linkdir-featured-card { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: linear-gradient(135deg, var(--surface) 0%, var(--accent-soft) 160%); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .linkdir-featured-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); } .linkdir-featured-rank { flex: none; width: 1.75rem; font-size: 0.9rem; font-weight: 800; color: var(--accent); text-align: center; } .linkdir-featured-tile { width: 3.2rem; height: 3.2rem; font-size: 1.2rem; } .linkdir-featured-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .linkdir-featured-title { font-size: 1.05rem; font-weight: 750; } .linkdir-featured-desc { font-size: 0.9rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .linkdir-featured-meta { font-size: 0.8rem; color: var(--text-faint); } .linkdir-featured-go { flex: none; color: var(--accent); } .linkdir-feed { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; background: var(--surface); } .linkdir-feed .linkdir-row:last-child { border-bottom: none; } .linkdir-row { border-bottom: 1px solid var(--border); } .linkdir-row .rank-link { padding-right: 0.25rem; } .linkdir-tile { background: var(--surface-2); border: 1px solid var(--border); } .linkdir-tile .tile-img { border-radius: 8px; object-fit: contain; } .linkdir-row-arrow { flex: none; margin-left: auto; color: var(--text-faint); font-size: 0.82rem; transition: transform 0.12s ease, color 0.12s ease; } .linkdir-row:hover .linkdir-row-arrow { transform: translateX(3px); color: var(--accent); } .linkdir-side { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-right: 0.65rem; border-radius: var(--radius-sm); color: var(--text-faint); text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; } .linkdir-side:hover { background: var(--surface-2); color: var(--accent); } .linkdir-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0 0 0.65rem; font-size: 0.88rem; color: var(--text-muted); } .linkdir-crumb a { color: var(--accent); text-decoration: none; } .linkdir-crumb a:hover { text-decoration: underline; } .linkdir-page-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.35rem; font-size: 1.35rem; } .linkdir-page-title i { color: var(--accent); } .linkdir-page-sub { margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.92rem; } .linkdir-back { margin-top: 1rem; } .linkdir-back a { color: var(--accent); text-decoration: none; font-weight: 600; } .linkdir-back a:hover { text-decoration: underline; } .linkdir-detail { margin-top: 0.5rem; } .linkdir-detail-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .linkdir-detail-intro { flex: 1; min-width: 0; } .linkdir-detail-intro h1 { margin: 0.15rem 0 0.35rem; font-size: 1.5rem; } .linkdir-detail-intro h1 a { color: inherit; text-decoration: none; } .linkdir-detail-intro h1 a:hover { color: var(--accent); } .linkdir-detail-domain { margin: 0; font-size: 0.9rem; color: var(--text-muted); } @media (min-width: 720px) { .linkdir-featured-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .linkdir-detail-head { flex-direction: column; } .linkdir-side { display: none; } .linkdir-featured-card { flex-wrap: wrap; } }