@charset "utf-8"; /* ========================================================================== GLP Hub — "Chrome & Hairline" A dense ranked-list design system for an aggregator. Written from scratch. Concept: cool slate greys, hairline dividers instead of cards on the feed, card treatment only where reading happens, electric blue primary, signal orange for upvotes, Roboto Mono for every numeral. 4px grid throughout. Colour modes: `prefers-color-scheme` by default, overridden by an explicit data-theme on written by the toggle in js/hub.js. Every token exists in both modes; no surface hard-codes a colour. ========================================================================== */ /* ---------- tokens: light ---------- */ :root { --page: #F6F7F9; --surface: #FFFFFF; --surface-2: #FBFCFD; --surface-3: #EEF1F5; --sunken: #E9EDF2; --ink: #0F1419; --ink-2: #384450; --ink-3: #5A6672; --ink-4: #7A8794; --hairline: #D5DAE0; --hairline-2: #E4E8ED; --primary: #1D63ED; --primary-ink: #1550C8; --primary-bg: #EAF0FE; --up: #FF5B24; --up-ink: #D33F04; --up-bg: #FFEEE7; --down: #6A85D8; --down-ink: #43539B; --mod: #1A8754; --mod-bg: #E4F5EB; --warn: #B4530B; --warn-bg: #FDF0E2; --danger: #C42B22; --danger-bg: #FCEBE9; --shadow: 0 8px 28px -12px rgba(15, 20, 25, .28), 0 2px 6px -2px rgba(15, 20, 25, .1); --focus: #1D63ED; --select-bg: #D8E4FE; --scheme: light; } /* ---------- tokens: dark ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #0B0E12; --surface: #141A21; --surface-2: #171E26; --surface-3: #1D262F; --sunken: #0F151B; --ink: #E7EBF0; --ink-2: #C3CCD6; --ink-3: #97A3B0; --ink-4: #79868F; --hairline: #262E38; --hairline-2: #1E262F; --primary: #4C8DFF; --primary-ink: #7FADFF; --primary-bg: #14243C; --up: #FF7A47; --up-ink: #FF9066; --up-bg: #2A1A12; --down: #8098DE; --down-ink: #9DB0E6; --mod: #34C77B; --mod-bg: #10251A; --warn: #E0913C; --warn-bg: #2A1E10; --danger: #F1685C; --danger-bg: #2B1513; --shadow: 0 8px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5); --focus: #6BA0FF; --select-bg: #24406E; --scheme: dark; } } :root[data-theme="dark"] { --page: #0B0E12; --surface: #141A21; --surface-2: #171E26; --surface-3: #1D262F; --sunken: #0F151B; --ink: #E7EBF0; --ink-2: #C3CCD6; --ink-3: #97A3B0; --ink-4: #79868F; --hairline: #262E38; --hairline-2: #1E262F; --primary: #4C8DFF; --primary-ink: #7FADFF; --primary-bg: #14243C; --up: #FF7A47; --up-ink: #FF9066; --up-bg: #2A1A12; --down: #8098DE; --down-ink: #9DB0E6; --mod: #34C77B; --mod-bg: #10251A; --warn: #E0913C; --warn-bg: #2A1E10; --danger: #F1685C; --danger-bg: #2B1513; --shadow: 0 8px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5); --focus: #6BA0FF; --select-bg: #24406E; --scheme: dark; } /* ---------- geometry, type scale, motion ---------- */ :root { --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* type scale — 1.200 minor third off a 14px base, tuned for density */ --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15.5px; --t-17: 17px; --t-20: 20px; --t-24: 24px; --t-29: 29px; --t-35: 35px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-pill: 999px; --ease: cubic-bezier(.2, .7, .3, 1); --dur: 130ms; --rail-w: 232px; --aside-w: 312px; --shell: 1360px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; color-scheme: var(--scheme); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--ff); font-size: var(--t-14); line-height: 1.55; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11' 1, 'ss01' 1; overflow-x: hidden; } ::selection { background: var(--select-bg); color: var(--ink); } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } table { border-collapse: collapse; } h1, h2, h3, h4, h5 { font-weight: 650; line-height: 1.25; letter-spacing: -.011em; } hr { border: 0; border-top: 1px solid var(--hairline); } :where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-2) 0; font-weight: 600; } .skip:focus { left: 0; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* ========================================================================== MASTHEAD ========================================================================== */ .masthead { position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 1px solid var(--hairline); } .mh { max-width: var(--shell); margin: 0 auto; display: flex; align-items: center; gap: var(--s-3); height: 52px; padding: 0 var(--s-4); } .brand { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; } .brand:hover { text-decoration: none; } .brand-mark { width: 28px; height: 28px; flex: 0 0 28px; } .brand-txt { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-size: var(--t-17); font-weight: 750; letter-spacing: -.028em; color: var(--ink); } .brand-name em { font-style: normal; color: var(--primary); } .brand-sub { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); margin-top: 3px; } .mh-search { flex: 1 1 auto; min-width: 0; position: relative; max-width: 560px; } .mh-search input { width: 100%; height: 34px; padding: 0 var(--s-3) 0 32px; font: inherit; font-size: var(--t-13); color: var(--ink); background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r-pill); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .mh-search input::placeholder { color: var(--ink-4); } .mh-search input:hover { background: var(--sunken); } .mh-search input:focus { background: var(--surface); border-color: var(--primary); outline-offset: 0; } .mh-search .mi { position: absolute; left: 11px; top: 9px; color: var(--ink-4); pointer-events: none; } .mh-actions { display: flex; align-items: center; gap: var(--s-1); flex: 0 0 auto; } .iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-2); color: var(--ink-3); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .iconbtn:hover { background: var(--surface-3); color: var(--ink); } .mh-link { font-size: var(--t-13); font-weight: 550; color: var(--ink-2); padding: 6px 10px; border-radius: var(--r-2); } .mh-link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } .drawer-btn { display: none; } /* read-only notice — replaces the fake login the reference sites use */ .ro-note { background: var(--surface-3); border-bottom: 1px solid var(--hairline); font-size: var(--t-12); color: var(--ink-3); } .ro-note div { max-width: var(--shell); margin: 0 auto; padding: 6px var(--s-4); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .ro-note b { color: var(--ink-2); font-weight: 600; } /* ========================================================================== SORT BAR ========================================================================== */ .sortbar { position: sticky; top: 52px; z-index: 50; background: var(--page); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--hairline); } .sortbar-in { max-width: var(--shell); margin: 0 auto; padding: 0 var(--s-4); display: flex; align-items: center; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; height: 42px; } .sortbar-in::-webkit-scrollbar { display: none; } .sort-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t-13); font-weight: 550; color: var(--ink-3); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .sort-tab:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } .sort-tab[aria-current] { background: var(--ink); color: var(--surface); } .sort-sep { width: 1px; height: 18px; background: var(--hairline); margin: 0 6px; flex: 0 0 auto; } .sort-note { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: var(--t-11); color: var(--ink-4); padding-left: var(--s-3); } /* ========================================================================== LAYOUT ========================================================================== */ .layout { max-width: var(--shell); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-12); display: grid; gap: var(--s-6); grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--aside-w); align-items: start; } .layout.no-aside { grid-template-columns: var(--rail-w) minmax(0, 1fr); } .layout.wide { grid-template-columns: minmax(0, 1fr); max-width: 1100px; } main { min-width: 0; } @media (max-width: 1239px) { .layout, .layout.no-aside { grid-template-columns: minmax(0, 1fr) var(--aside-w); } .rail { display: none; } } @media (max-width: 959px) { .layout, .layout.no-aside { grid-template-columns: minmax(0, 1fr); } .aside { display: none; } .drawer-btn { display: grid; } } @media (min-width: 1800px) { :root { --shell: 1560px; --aside-w: 340px; } } .rail, .aside { position: sticky; top: 106px; } .rail { max-height: calc(100vh - 130px); overflow-y: auto; overscrollbehavior: contain; padding-right: 4px; } .aside { display: flex; flex-direction: column; gap: var(--s-4); } /* community rail */ .rail-h { font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4); padding: 0 var(--s-2) var(--s-2); } .rail-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--s-5); } .rail-item { display: flex; align-items: center; gap: var(--s-2); padding: 5px var(--s-2); border-radius: var(--r-2); font-size: var(--t-13); color: var(--ink-2); min-width: 0; transition: background var(--dur) var(--ease); } .rail-item:hover { background: var(--surface-3); text-decoration: none; color: var(--ink); } .rail-item[aria-current] { background: var(--primary-bg); color: var(--primary-ink); font-weight: 600; } .rail-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-item .mono { margin-left: auto; font-size: var(--t-11); color: var(--ink-4); } .rail-more { font-size: var(--t-12); padding: 4px var(--s-2); color: var(--primary); display: inline-block; } /* community monogram tile */ .mono-tile { flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--r-1); display: grid; place-items: center; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: -.03em; color: #fff; background: hsl(var(--h) 62% 42%); } :root[data-theme="dark"] .mono-tile, .mono-tile { text-shadow: 0 1px 0 rgba(0,0,0,.18); } .mono-tile.lg { width: 44px; height: 44px; font-size: 17px; border-radius: var(--r-2); } .mono-tile.md { width: 26px; height: 26px; font-size: 11px; } /* ========================================================================== FEED — hairline rows, no cards ========================================================================== */ .feed { border-top: 1px solid var(--hairline-2); } .row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); padding: 10px 0 11px; border-bottom: 1px solid var(--hairline-2); transition: background var(--dur) var(--ease); } .row:hover { background: var(--surface-2); } .row.sticky-row { background: var(--mod-bg); border-bottom-color: var(--hairline); } .row.sticky-row:hover { background: var(--mod-bg); } .votecol { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 2px; user-select: none; } .varrow { width: 22px; height: 20px; display: grid; place-items: center; border-radius: var(--r-1); color: var(--ink-4); } .varrow:hover { background: var(--up-bg); color: var(--up); } .varrow.dn:hover { background: var(--surface-3); color: var(--down); } .varrow.on { color: var(--up); } .varrow.dn.on { color: var(--down); } .score { font-family: var(--mono); font-size: var(--t-12); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); line-height: 1.1; } .score.hot { color: var(--up-ink); } .score.neg { color: var(--down-ink); } .score.zero { color: var(--ink-4); } .row-main { min-width: 0; } .row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-12); color: var(--ink-3); margin-bottom: 3px; } .cbadge { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); } .cbadge:hover { text-decoration: none; color: var(--primary); } .dot-sep { color: var(--ink-4); } .row-title { font-size: var(--t-15); font-weight: 600; line-height: 1.32; letter-spacing: -.012em; color: var(--ink); overflow-wrap: anywhere; } .row-title:visited { color: var(--ink-3); } .row a.row-title:hover { color: var(--primary); text-decoration: none; } .row-excerpt { font-size: var(--t-13); color: var(--ink-3); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .row-foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: 6px; font-size: var(--t-12); color: var(--ink-3); } .row-foot a { color: var(--ink-3); font-weight: 550; } .row-foot a:hover { color: var(--primary); } /* flair chips */ .flair { display: inline-block; font-size: var(--t-11); font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); line-height: 1.5; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; } .flair.f-blue { background: var(--primary-bg); color: var(--primary-ink); } .flair.f-orange { background: var(--up-bg); color: var(--up-ink); } .flair.f-green { background: var(--mod-bg); color: var(--mod); } .flair.f-red { background: var(--danger-bg); color: var(--danger); } .flair.f-amber { background: var(--warn-bg); color: var(--warn); } .flair.f-purple { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down-ink); } .flair.f-teal { background: color-mix(in srgb, var(--mod) 12%, transparent); color: var(--mod); } .flair.f-grey { background: var(--surface-3); color: var(--ink-3); } .tag-pin { color: var(--mod); font-weight: 650; font-size: var(--t-12); } .tag-lock { color: var(--warn); } .tag-xp { font-size: var(--t-12); color: var(--ink-4); } /* awards */ .awards { display: inline-flex; align-items: center; gap: 5px; } .award { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: var(--t-11); color: var(--ink-4); } .award svg { width: 13px; height: 13px; } /* ========================================================================== CARDS / PANELS ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; } .card + .card { margin-top: var(--s-4); } .card-h { padding: 10px var(--s-4); border-bottom: 1px solid var(--hairline-2); font-size: var(--t-12); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); display: flex; align-items: center; gap: var(--s-2); } .card-h .mono { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--ink-4); font-weight: 400; } .card-b { padding: var(--s-4); } .card-b.tight { padding: var(--s-3); } .card-f { padding: 8px var(--s-4); border-top: 1px solid var(--hairline-2); font-size: var(--t-12); background: var(--surface-2); } /* sidebar widgets */ .sw-list { display: flex; flex-direction: column; } .sw-item { display: flex; gap: var(--s-2); padding: 7px 0; font-size: var(--t-13); border-bottom: 1px solid var(--hairline-2); color: var(--ink-2); } .sw-item:last-child { border-bottom: 0; } .sw-item .idx { font-family: var(--mono); font-size: var(--t-12); color: var(--ink-4); flex: 0 0 18px; } .sw-item a { color: var(--ink); font-weight: 550; } .sw-item .sub { display: block; font-size: var(--t-11); color: var(--ink-4); font-family: var(--mono); margin-top: 2px; } .statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline-2); } .statgrid > div { background: var(--surface); padding: var(--s-3); } .statgrid .n { font-family: var(--mono); font-size: var(--t-17); font-weight: 500; color: var(--ink); display: block; } .statgrid .l { font-size: var(--t-11); color: var(--ink-4); text-transform: uppercase; letter-spacing: .07em; } .rules { counter-reset: r; display: flex; flex-direction: column; } .rules li { counter-increment: r; display: flex; gap: var(--s-2); padding: 8px 0; font-size: var(--t-13); color: var(--ink-2); border-bottom: 1px solid var(--hairline-2); } .rules li:last-child { border-bottom: 0; } .rules li::before { content: counter(r); font-family: var(--mono); font-size: var(--t-12); color: var(--ink-4); flex: 0 0 16px; } .modlist { display: flex; flex-wrap: wrap; gap: 6px; } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-3); font-size: var(--t-12); color: var(--ink-2); } .pill:hover { background: var(--sunken); text-decoration: none; } .pill.mod-pill { background: var(--mod-bg); color: var(--mod); } /* sponsor unit — the only outbound links on the site */ .ad { display: block; border: 1px solid var(--hairline); border-radius: var(--r-2); background: var(--surface); overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ad:hover { border-color: var(--primary); text-decoration: none; transform: translateY(-1px); } .ad-lbl { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-4); padding: 5px var(--s-3) 0; } .ad-b { padding: 4px var(--s-3) var(--s-3); display: flex; gap: var(--s-3); } .ad-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-2); display: grid; place-items: center; background: hsl(var(--h) 58% 44%); color: #fff; } .ad-ico svg { width: 18px; height: 18px; } .ad h4 { font-size: var(--t-13); font-weight: 650; color: var(--ink); } .ad p { font-size: var(--t-12); color: var(--ink-3); margin-top: 3px; } .ad-cta { display: inline-block; margin-top: 7px; font-family: var(--mono); font-size: var(--t-11); color: var(--primary); font-weight: 500; } .ad-cta::after { content: ' \2192'; } .ad.feedad { margin: var(--s-2) 0; border-left: 2px solid hsl(var(--h) 58% 44%); } /* ========================================================================== SUBMISSION PAGE ========================================================================== */ .sub { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); } .sub-in { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); } .sub h1 { font-size: var(--t-24); line-height: 1.24; letter-spacing: -.019em; color: var(--ink); overflow-wrap: anywhere; margin: 4px 0 var(--s-2); } .sub-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-12); color: var(--ink-3); } .sub-meta a { color: var(--ink-2); font-weight: 600; } .sub-body { margin-top: var(--s-4); font-size: var(--t-14); color: var(--ink); max-width: 72ch; } .sub-foot { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--hairline-2); font-family: var(--mono); font-size: var(--t-12); color: var(--ink-4); } .sub .votecol { padding-top: 6px; } .sub .score { font-size: var(--t-15); } .notice { display: flex; gap: var(--s-2); padding: 9px var(--s-4); font-size: var(--t-12); color: var(--ink-2); border-bottom: 1px solid var(--hairline-2); background: var(--surface-3); } .notice.arch { background: var(--warn-bg); color: var(--warn); } .notice.xpost { background: var(--primary-bg); color: var(--primary-ink); } .notice b { font-weight: 650; } .notice a { color: inherit; text-decoration: underline; } /* body prose inside submissions & comments */ .rt > * + * { margin-top: .7em; } .rt p { overflow-wrap: anywhere; } .rt ul, .rt ol { padding-left: 1.15em; } .rt ul li { list-style: disc; } .rt ol li { list-style: decimal; } .rt li + li { margin-top: .3em; } .rt strong { font-weight: 650; } .rt code { font-family: var(--mono); font-size: .9em; background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-1); } .rt pre { font-family: var(--mono); font-size: var(--t-12); background: var(--sunken); border: 1px solid var(--hairline-2); border-radius: var(--r-2); padding: var(--s-3); overflow-x: auto; } .rt blockquote { border-left: 3px solid var(--hairline); padding: 2px 0 2px var(--s-3); color: var(--ink-3); font-size: .96em; } .rt blockquote p { margin: 0; } .rt .tw, .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rt table, .dtable { width: 100%; min-width: 420px; font-size: var(--t-13); border: 1px solid var(--hairline); border-radius: var(--r-2); } .rt th, .dtable th { text-align: left; font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: var(--surface-3); padding: 7px var(--s-3); border-bottom: 1px solid var(--hairline); white-space: nowrap; } .rt td, .dtable td { padding: 7px var(--s-3); border-bottom: 1px solid var(--hairline-2); color: var(--ink-2); } .rt tr:last-child td, .dtable tr:last-child td { border-bottom: 0; } .dtable td.num, .rt td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .spoiler { background: var(--ink); color: transparent; border-radius: var(--r-1); padding: 0 3px; cursor: pointer; } .spoiler.show { background: var(--surface-3); color: var(--ink); } /* ========================================================================== COMMENT TREE — the signature surface ========================================================================== */ .cmt-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-3) 0; margin-top: var(--s-5); border-bottom: 1px solid var(--hairline); } .cmt-bar h2 { font-size: var(--t-15); font-weight: 650; } .cmt-bar .sel { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--ink-3); } .cmt-bar select { font: inherit; font-size: var(--t-12); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-1); padding: 3px 6px; } .tree { padding-top: var(--s-2); } .cmt { position: relative; padding: var(--s-3) 0 0; } .cmt-kids { margin-left: 13px; padding-left: 13px; border-left: 1px solid var(--hairline-2); } .cmt-kids:hover { border-left-color: var(--hairline); } .cmt-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-12); color: var(--ink-3); line-height: 1.5; } .cmt-h .who { font-weight: 650; color: var(--ink-2); } .cmt-h .who:hover { color: var(--primary); } .cmt-h .pts { font-family: var(--mono); font-variant-numeric: tabular-nums; } .cmt-h .pts.neg { color: var(--down-ink); } .toggle { flex: 0 0 auto; width: 16px; height: 16px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-4); border: 1px solid var(--hairline); border-radius: var(--r-1); line-height: 1; } .toggle:hover { color: var(--ink); border-color: var(--ink-4); } .cmt-b { font-size: var(--t-14); color: var(--ink); margin: 4px 0 0 22px; max-width: 74ch; } .cmt-a { display: flex; gap: var(--s-3); margin: 5px 0 0 22px; font-family: var(--mono); font-size: var(--t-11); color: var(--ink-4); } .cmt-a span:hover { color: var(--ink-3); cursor: default; } .cmt.is-collapsed > .cmt-b, .cmt.is-collapsed > .cmt-a, .cmt.is-collapsed > .cmt-kids { display: none; } .cmt.is-collapsed > .cmt-h .stub { display: inline; } .cmt-h .stub { display: none; font-family: var(--mono); font-size: var(--t-11); color: var(--ink-4); } .chip { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; padding: 1px 5px; border-radius: var(--r-1); text-transform: uppercase; } .chip.op { background: var(--primary-bg); color: var(--primary-ink); } .chip.modc { background: var(--mod-bg); color: var(--mod); } .chip.uf { background: var(--surface-3); color: var(--ink-4); text-transform: none; letter-spacing: 0; font-size: var(--t-11); } .cmt.distinguished > .cmt-h .who { color: var(--mod); } .cmt.distinguished > .cmt-b { border-left: 2px solid var(--mod); padding-left: var(--s-3); } .cmt.gone > .cmt-b { color: var(--ink-4); font-style: italic; } .loadmore { display: inline-block; margin: var(--s-2) 0 0 22px; font-size: var(--t-12); color: var(--primary); font-weight: 550; } .contextlink { margin: var(--s-2) 0 0 22px; font-size: var(--t-12); } /* ========================================================================== PAGINATION ========================================================================== */ .pgn { display: flex; align-items: center; justify-content: center; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-6); } .pgn a, .pgn span { min-width: 32px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-2); font-family: var(--mono); font-size: var(--t-12); color: var(--ink-2); border: 1px solid var(--hairline); background: var(--surface); } .pgn a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; } .pgn .on { background: var(--ink); color: var(--surface); border-color: var(--ink); } .pgn .gap { border: 0; background: none; color: var(--ink-4); } .pgn .nope { opacity: .4; } /* ========================================================================== PAGE HEADERS / HERO ========================================================================== */ .phead { margin-bottom: var(--s-5); } .phead h1 { font-size: var(--t-29); letter-spacing: -.024em; line-height: 1.16; color: var(--ink); } .phead .lede { font-size: var(--t-15); color: var(--ink-3); margin-top: var(--s-2); max-width: 70ch; } .crumbs { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-11); color: var(--ink-4); margin-bottom: var(--s-3); } .crumbs a { color: var(--ink-4); } .crumbs a:hover { color: var(--primary); } .chero { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); padding: var(--s-4); margin-bottom: var(--s-4); display: flex; gap: var(--s-4); align-items: flex-start; } .chero-txt { min-width: 0; } .chero h1 { font-size: var(--t-24); letter-spacing: -.02em; } .chero .cid { font-family: var(--mono); font-size: var(--t-12); color: var(--ink-4); } .chero p { font-size: var(--t-13); color: var(--ink-3); margin-top: 6px; max-width: 70ch; } .chero-stats { display: flex; gap: var(--s-5); margin-top: var(--s-3); flex-wrap: wrap; } .chero-stats div { font-family: var(--mono); font-size: var(--t-12); color: var(--ink-3); } .chero-stats b { display: block; font-size: var(--t-17); font-weight: 500; color: var(--ink); } /* ========================================================================== PROFILES ========================================================================== */ .uhead { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; } .uav { width: 56px; height: 56px; border-radius: var(--r-2); flex: 0 0 56px; } .karma { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-3); } .karma div { font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); } .karma b { display: block; font-size: var(--t-20); font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-transform: none; } .trophies { display: flex; flex-wrap: wrap; gap: var(--s-2); } .trophy { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--r-2); font-size: var(--t-12); color: var(--ink-2); background: var(--surface-2); } .trophy svg { width: 14px; height: 14px; color: var(--warn); } .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s-4); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; padding: 8px 12px; font-size: var(--t-13); font-weight: 550; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--ink); text-decoration: none; } .tab[aria-current] { color: var(--ink); border-bottom-color: var(--primary); } /* comment shown in an overview feed */ .ocmt { border-bottom: 1px solid var(--hairline-2); padding: 11px 0; } .ocmt .ctx { font-size: var(--t-12); color: var(--ink-3); margin-bottom: 4px; } .ocmt .ctx a { font-weight: 600; } .ocmt .body { font-size: var(--t-13); color: var(--ink-2); max-width: 74ch; } /* ========================================================================== VENDOR SOURCE PAGES ========================================================================== */ .vhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; padding-bottom: var(--s-4); border-bottom: 1px solid var(--hairline); } @media (max-width: 639px) { .vhead { grid-template-columns: minmax(0, 1fr); } } .vscore { text-align: right; } .vscore .big { font-family: var(--mono); font-size: var(--t-35); font-weight: 500; letter-spacing: -.03em; color: var(--ink); line-height: 1; } .vscore .of { font-family: var(--mono); font-size: var(--t-12); color: var(--ink-4); } .stars { display: inline-flex; gap: 2px; margin-top: 6px; } .stars svg { width: 14px; height: 14px; color: var(--warn); } .stars svg.off { color: var(--hairline); } .vfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--hairline-2); border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; margin: var(--s-4) 0; } .vfacts > div { background: var(--surface); padding: var(--s-3); } .vfacts dt { font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); } .vfacts dd { font-size: var(--t-13); color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; } .plain { font-family: var(--mono); color: var(--ink-2); } .vlog { display: flex; flex-direction: column; } .vlog li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s-3); padding: 9px 0; border-bottom: 1px solid var(--hairline-2); font-size: var(--t-13); } .vlog li:last-child { border-bottom: 0; } .vlog time { font-family: var(--mono); font-size: var(--t-12); color: var(--ink-4); } .vlog .who { font-weight: 600; } @media (max-width: 559px) { .vlog li { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .review { border: 1px solid var(--hairline); border-radius: var(--r-2); padding: var(--s-3); background: var(--surface); } .review + .review { margin-top: var(--s-3); } .review-h { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--t-12); color: var(--ink-3); margin-bottom: 6px; } .review p { font-size: var(--t-13); color: var(--ink-2); } .sparkwrap { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .sparkwrap svg { flex: 0 0 auto; } /* directory rows */ .vrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hairline-2); } .vrow:hover { background: var(--surface-2); } .vrow .nm { font-size: var(--t-14); font-weight: 600; color: var(--ink); } .vrow .mt { font-size: var(--t-12); color: var(--ink-3); } .vrow .rt2 { font-family: var(--mono); font-size: var(--t-13); color: var(--ink); text-align: right; white-space: nowrap; } .vrow .rt2 span { display: block; font-size: var(--t-11); color: var(--ink-4); } /* ========================================================================== WIKI / LONG-FORM PROSE ========================================================================== */ .prose { max-width: 72ch; font-size: var(--t-15); line-height: 1.65; color: var(--ink-2); } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: var(--t-20); color: var(--ink); margin-top: 1.9em; padding-top: .5em; border-top: 1px solid var(--hairline-2); letter-spacing: -.018em; } .prose h3 { font-size: var(--t-17); color: var(--ink); margin-top: 1.5em; } .prose p { overflow-wrap: anywhere; } .prose ul li { list-style: disc; } .prose ol li { list-style: decimal; } .prose ul, .prose ol { padding-left: 1.2em; } .prose li + li { margin-top: .35em; } .prose code { font-family: var(--mono); font-size: .88em; background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-1); } .prose blockquote { border-left: 3px solid var(--primary); padding-left: var(--s-4); color: var(--ink-3); } .prose .callout { border: 1px solid var(--hairline); border-left: 3px solid var(--primary); background: var(--surface); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-size: var(--t-14); } .prose .callout.warn { border-left-color: var(--warn); background: var(--warn-bg); } .prose .callout h4 { font-size: var(--t-13); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 4px; } .toc { border: 1px solid var(--hairline); border-radius: var(--r-2); background: var(--surface); padding: var(--s-3) var(--s-4); font-size: var(--t-13); } .toc h4 { font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); margin-bottom: 6px; } .toc li { padding: 2px 0; } .toc li ul { padding-left: var(--s-4); } .footnote { font-size: var(--t-12); color: var(--ink-4); } /* calculator widget (wiki reconstitution page) */ .calc { border: 1px solid var(--hairline); border-radius: var(--r-2); background: var(--surface); padding: var(--s-4); } .calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); } .calc label { display: block; font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); margin-bottom: 4px; } .calc input, .calc select { width: 100%; height: 34px; padding: 0 10px; font: inherit; font-size: var(--t-14); font-family: var(--mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-2); } .calc input:focus { border-color: var(--primary); outline-offset: 0; } .calc-out { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--hairline-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); } .calc-out div { background: var(--surface-3); border-radius: var(--r-2); padding: var(--s-3); } .calc-out .k { font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); } .calc-out .v { font-family: var(--mono); font-size: var(--t-20); color: var(--ink); font-variant-numeric: tabular-nums; } .calc-note { font-size: var(--t-12); color: var(--ink-4); margin-top: var(--s-3); } .calc-warn { color: var(--danger); font-weight: 600; } /* ========================================================================== SEARCH ========================================================================== */ .searchbox { display: flex; gap: var(--s-2); } .searchbox input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--s-4); font: inherit; font-size: var(--t-15); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); } .searchbox input:focus { border-color: var(--primary); outline-offset: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 var(--s-5); border-radius: var(--r-2); background: var(--primary); color: #fff; font-size: var(--t-14); font-weight: 600; transition: filter var(--dur) var(--ease); } .btn:hover { filter: brightness(1.08); text-decoration: none; } .btn.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--hairline); } .btn.sm { height: 32px; padding: 0 var(--s-3); font-size: var(--t-13); } /* empty / loading states */ .empty { text-align: center; padding: var(--s-12) var(--s-4); border: 1px dashed var(--hairline); border-radius: var(--r-2); color: var(--ink-3); } .empty svg { margin: 0 auto var(--s-3); opacity: .6; } .empty h3 { font-size: var(--t-17); color: var(--ink); margin-bottom: 6px; } .empty p { font-size: var(--t-13); max-width: 46ch; margin: 0 auto; } .skel { background: var(--surface-3); border-radius: var(--r-1); height: 12px; animation: pulse 1.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* ========================================================================== DRAWER (mobile community rail) ========================================================================== */ .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(6, 9, 12, .55); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: 284px; max-width: 86vw; background: var(--surface); border-right: 1px solid var(--hairline); transform: translateX(-100%); transition: transform 200ms var(--ease); overflow-y: auto; padding: var(--s-4); box-shadow: var(--shadow); } body.drawer-open .scrim { opacity: 1; visibility: visible; } body.drawer-open .drawer { transform: none; } body.drawer-open { overflow: hidden; } .drawer-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); } /* ========================================================================== FOOTER ========================================================================== */ .foot { border-top: 1px solid var(--hairline); background: var(--surface); margin-top: var(--s-12); } .foot-in { max-width: var(--shell); margin: 0 auto; padding: var(--s-8) var(--s-4); } .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s-6); } @media (max-width: 839px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 479px) { .foot-grid { grid-template-columns: 1fr; } } .foot h4 { font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4); margin-bottom: var(--s-3); } .foot li { padding: 3px 0; font-size: var(--t-13); } .foot li a { color: var(--ink-3); } .foot li a:hover { color: var(--primary); } .foot .blurb { font-size: var(--t-13); color: var(--ink-3); max-width: 44ch; margin-top: var(--s-3); } .foot-bot { border-top: 1px solid var(--hairline-2); margin-top: var(--s-6); padding-top: var(--s-4); display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: space-between; font-size: var(--t-12); color: var(--ink-4); } .disc { border: 1px solid var(--hairline); border-left: 3px solid var(--warn); background: var(--surface-2); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-size: var(--t-12); color: var(--ink-3); margin-top: var(--s-5); max-width: 92ch; } /* ========================================================================== 404 ========================================================================== */ .nf { text-align: center; padding: var(--s-12) var(--s-4); } .nf .code { font-family: var(--mono); font-size: 88px; font-weight: 300; letter-spacing: -.05em; color: var(--ink); line-height: 1; } .nf h1 { font-size: var(--t-24); margin: var(--s-3) 0 var(--s-2); } .nf p { color: var(--ink-3); max-width: 48ch; margin: 0 auto var(--s-5); } .nf-art { margin: 0 auto var(--s-5); max-width: 320px; } /* ========================================================================== PRINT ========================================================================== */ @media print { :root { --page: #fff; --surface: #fff; --ink: #000; --ink-2: #222; --ink-3: #444; --hairline: #bbb; --hairline-2: #ddd; } .masthead, .sortbar, .rail, .aside, .ad, .drawer, .scrim, .ro-note, .pgn, .foot-grid, .votecol, .toggle, .cmt-a { display: none !important; } body { font-size: 11pt; background: #fff; } .layout { display: block; max-width: none; padding: 0; } .sub, .card { border: 0; } .sub-in { display: block; padding: 0; } .cmt-kids { border-left: 1px solid #ddd; } a { color: #000; text-decoration: underline; } a[href^="/"]::after { content: " (glpresearchhub.net" attr(href) ")"; font-size: 8pt; color: #555; } .prose { max-width: none; } } /* Vendors named in threads that never accumulated enough for a source page. No rating, no outbound link — the listing is a statement about coverage. */ .t2table{width:100%;border-collapse:collapse} .t2table th,.t2table td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--rule,rgba(128,128,128,.2))} .t2table td.num,.t2table th.num{text-align:right} .t2table td.fine{font-size:12.5px;opacity:.75;max-width:36ch} .shopcta{margin:12px 0} .shopcta .shoplink{font-weight:600}