/* aged paper, harvest gold, rec-center teal. no js was harmed (or used) here. */ :root { --paper: #eeece6; --card: #fbfaf7; --card2: #f4f0e0; /* OP posts: butter */ --stripe: #f4f3ee; /* odd table rows */ --stripe2: #e9e7e1; /* odd list rows */ --ink: #33302a; --soft: #7a7261; --teal: #276962; --gold: #b8860b; --link: #1743c7; --red: #c22200; --border: #b1aca0; --green: #2e7d32; /* greentext, heritage colorway */ --maroon: #8d2f57; /* refs */ --thbg: #276962; /* table header bars */ --thtext: #fff; --inputbg: #fff; --btnbg: #e8e0cc; --btnborder: #d8cfb8; --btnhover: #f0e9d8; --mark: #ffe89c; --errbg: #fff0eb; --shadow: rgba(122,114,97,.25); } /* same room, lights off. the footer toggle sets a class on ; with no choice made, the system preference decides. */ html.theme-dark { --paper: #191714; --card: #211e1a; --card2: #2a2419; --stripe: #242019; --stripe2: #221f1a; --ink: #d6cfbf; --soft: #8f8776; --teal: #7cb5aa; --gold: #d9a521; --link: #8fa8ff; --red: #ff7a5c; --border: #4a4436; --green: #7cc47f; --maroon: #d47fa6; --thbg: #22332f; --thtext: #9ecfc5; --inputbg: #14120f; --btnbg: #2e2a22; --btnborder: #3a352b; --btnhover: #3a352b; --mark: #5c4d17; --errbg: #3a1f18; --shadow: rgba(0,0,0,.35); } @media (prefers-color-scheme: dark) { html:not(.theme-light) { --paper: #191714; --card: #211e1a; --card2: #2a2419; --stripe: #242019; --stripe2: #221f1a; --ink: #d6cfbf; --soft: #8f8776; --teal: #7cb5aa; --gold: #d9a521; --link: #8fa8ff; --red: #ff7a5c; --border: #4a4436; --green: #7cc47f; --maroon: #d47fa6; --thbg: #22332f; --thtext: #9ecfc5; --inputbg: #14120f; --btnbg: #2e2a22; --btnborder: #3a352b; --btnhover: #3a352b; --mark: #5c4d17; --errbg: #3a1f18; --shadow: rgba(0,0,0,.35); } } /* ---- accent colors for member names, tuned per scheme ---- */ .acc-teal { color: #276962; } .acc-brick { color: #c22200; } .acc-olive { color: #6b8e23; } .acc-navy { color: #1743c7; } .acc-plum { color: #7b2d8b; } .acc-rust { color: #b45309; } .acc-moss { color: #2e7d32; } .acc-cocoa { color: #795548; } .acc-magenta { color: #b400b4; } .acc-slate { color: #46626e; } html.theme-dark .acc-teal { color: #7cb5aa; } html.theme-dark .acc-brick { color: #ff8a6b; } html.theme-dark .acc-olive { color: #a9c46a; } html.theme-dark .acc-navy { color: #8fa8ff; } html.theme-dark .acc-plum { color: #cf8fe0; } html.theme-dark .acc-rust { color: #e8965a; } html.theme-dark .acc-moss { color: #7cc47f; } html.theme-dark .acc-cocoa { color: #c49a8a; } html.theme-dark .acc-magenta { color: #e879e8; } html.theme-dark .acc-slate { color: #9fb3bd; } @media (prefers-color-scheme: dark) { html:not(.theme-light) .acc-teal { color: #7cb5aa; } html:not(.theme-light) .acc-brick { color: #ff8a6b; } html:not(.theme-light) .acc-olive { color: #a9c46a; } html:not(.theme-light) .acc-navy { color: #8fa8ff; } html:not(.theme-light) .acc-plum { color: #cf8fe0; } html:not(.theme-light) .acc-rust { color: #e8965a; } html:not(.theme-light) .acc-moss { color: #7cc47f; } html:not(.theme-light) .acc-cocoa { color: #c49a8a; } html:not(.theme-light) .acc-magenta { color: #e879e8; } html:not(.theme-light) .acc-slate { color: #9fb3bd; } } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 13px/1.55 Verdana, Geneva, Tahoma, sans-serif; } .crt { max-width: 900px; margin: 0 auto; padding: 0 12px 24px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2 { font-family: Georgia, "Times New Roman", serif; color: var(--teal); font-size: 1.35em; font-weight: bold; letter-spacing: .5px; margin: 14px 0 8px; } h2 { margin-top: 24px; } /* ---- header ---- */ header { margin-bottom: 16px; } .masthead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 14px; } .logo { font-family: Georgia, "Times New Roman", serif; font-size: 2em; font-weight: bold; letter-spacing: 1px; color: var(--teal); } .logo:hover { text-decoration: none; color: var(--gold); } .tagline { color: var(--soft); font-style: italic; font-family: Georgia, serif; } .clock { margin-left: auto; color: var(--gold); font-family: "Courier New", monospace; font-weight: bold; } .motd { display: block; margin: 8px 0; padding: 3px 0; color: var(--teal); background: var(--card); border: 1px solid var(--border); font-family: "Courier New", monospace; } nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 0; color: var(--soft); border-bottom: 1px dashed var(--border); } .nav-right b { color: var(--teal); } .adminbadge { color: #fff; background: var(--maroon); padding: 0 5px; font-size: .85em; border-radius: 2px; } .modbadge { color: #fff; background: #276962; padding: 0 5px; font-size: .85em; border-radius: 2px; } /* ---- tables ---- */ table { width: 100%; border-collapse: collapse; margin: 12px 0; background: var(--card); border: 1px solid var(--border); } th { text-align: left; color: var(--thtext); background: var(--thbg); padding: 4px 8px; font-size: .85em; letter-spacing: 1px; text-transform: lowercase; font-weight: normal; } td { padding: 7px 8px; border-bottom: 1px dotted var(--border); vertical-align: top; } tr:nth-child(odd) td { background: var(--stripe); } tr:hover td { background: var(--card2); } td.slug { white-space: nowrap; font-weight: bold; } td.num, td.when { white-space: nowrap; text-align: right; color: var(--soft); } th.num, th.when { text-align: right; white-space: nowrap; color: var(--thtext); font-family: inherit; font-size: .85em; } td.who { white-space: nowrap; } .blurb { color: var(--soft); } .slugtag { color: var(--maroon); } .when { color: var(--soft); font-family: "Courier New", monospace; font-size: .95em; } .who { color: var(--teal); font-weight: bold; } .trip { color: var(--maroon); font-family: "Courier New", monospace; } /* ---- recent list ---- */ .recent { list-style: none; padding: 0; } .recent li { padding: 6px 4px; border-bottom: 1px dotted var(--border); } .recent li:nth-child(odd) { background: var(--stripe2); } /* ---- posts ---- */ .post { background: var(--card); border: 1px solid var(--border); margin: 10px 0; padding: 8px 12px; box-shadow: 2px 2px 0 var(--shadow); } .post.op { background: var(--card2); border-color: var(--gold); } .post:target { border-color: var(--red); box-shadow: 2px 2px 0 rgba(194,34,0,.3); } .post header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px dotted var(--border); padding-bottom: 4px; margin-bottom: 6px; } .postno { color: var(--soft); margin-left: auto; font-family: "Courier New", monospace; } .regbadge { color: var(--maroon); } .post .body { word-wrap: break-word; } .quote { color: var(--green); } .ref { color: var(--maroon); font-weight: bold; } .dice { font-family: "Courier New", monospace; color: var(--gold); border: 1px dotted var(--border); padding: 0 3px; white-space: nowrap; } .spoiler { background: var(--ink); color: var(--ink); } .spoiler:hover { background: transparent; } /* ---- forms ---- */ .postbox { border: 1px dashed var(--border); background: var(--card); margin: 12px 0; } .postbox summary, .boxlabel { cursor: pointer; padding: 6px 10px; color: var(--teal); font-weight: bold; } .postbox form, .authform { display: flex; flex-direction: column; gap: 8px; padding: 10px; max-width: 560px; } label { display: flex; flex-direction: column; gap: 2px; color: var(--soft); } label.sage { flex-direction: row; align-items: center; gap: 6px; } input[type=text], input[type=password], input[type=search], textarea { background: var(--inputbg); color: var(--ink); border: 1px solid var(--border); padding: 6px 8px; font: inherit; } input[type=file] { color: var(--soft); font: inherit; } input:focus, textarea:focus { outline: 2px solid var(--gold); } .hint { font-size: .85em; color: var(--soft); } /* buttons like the family computer had */ button { align-self: flex-start; background: var(--btnbg); color: var(--ink); border: 2px outset var(--btnborder); padding: 4px 14px; font: inherit; cursor: pointer; } button:hover { background: var(--btnhover); } button:active { border-style: inset; } form.inline { display: inline; padding: 0; } button.linkish { border: none; background: none; padding: 0; color: var(--link); cursor: pointer; } button.linkish:hover { text-decoration: underline; background: none; } button.linkish.danger { color: var(--red); } .error { color: var(--red); border: 1px dashed var(--red); background: var(--errbg); padding: 6px 10px; } .crumbs { color: var(--soft); margin: 8px 0; } .pin { color: var(--gold); } /* ---- footer ---- */ footer { border-top: 1px dashed var(--border); margin-top: 28px; padding-top: 12px; text-align: center; color: var(--soft); } .counter { background: #000; color: #ff3333; border: 2px inset #666; font-family: "Courier New", monospace; font-weight: bold; letter-spacing: 3px; padding: 1px 6px; } .badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0; } .badges img { image-rendering: pixelated; } .fineprint { font-size: .8em; margin-top: 8px; } .themepick { color: var(--soft); margin-top: 6px; font-size: .9em; } .themepick button.linkish { color: var(--soft); } .themepick button.linkish.cur { color: var(--ink); font-weight: bold; } /* ---- members & profiles: the classic two-column post ---- */ .post { display: flex; gap: 12px; } .authorcol { flex: 0 0 140px; min-width: 0; border-right: 1px dotted var(--border); padding-right: 10px; font-size: .9em; overflow-wrap: break-word; } .postmain { flex: 1; min-width: 0; } .avatar { border: 1px solid var(--border); background: var(--paper); display: block; margin-bottom: 4px; object-fit: cover; } .avatar.small { display: inline-block; margin: 0; vertical-align: middle; } .uname { font-weight: bold; } a.uname:hover { text-decoration: underline; } .rank { font-style: italic; color: var(--soft); } .rank-banned { font-style: normal; font-weight: bold; color: var(--red); } .ustats { color: var(--soft); font-size: .85em; margin-top: 6px; } .sig { margin-top: 10px; padding-top: 5px; border-top: 1px dotted var(--border); color: var(--soft); font-size: .9em; } .sig.standalone { border: 1px dotted var(--border); padding: 6px 10px; display: inline-block; } .profilecard { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--border); padding: 14px; box-shadow: 2px 2px 0 var(--shadow); margin: 12px 0; } .profileside { flex: 0 0 168px; border-right: 1px dotted var(--border); padding-right: 14px; } /* the postbit, replicated exactly (same 140px column as .post) */ .profileside .authorcol { width: 140px; border-right: none; flex: none; } .profileextra { margin-top: 10px; padding-top: 8px; border-top: 1px dotted var(--border); color: var(--soft); font-size: .9em; } .profilemain { flex: 1; min-width: 0; } .bigname { font-size: 1.35em; } table.profilefields { border: none; background: none; margin: 0 0 4px; width: auto; } .profilemain h2 { margin: 16px 0 6px; } .profilemain h2:first-child { margin-top: 0; } .profilefields td { border: none; background: transparent !important; padding: 2px 10px 2px 0; } .profilefields td.fieldname { color: var(--soft); } .swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid #877f6c; margin: 0 2px; vertical-align: middle; } select { font: inherit; background: var(--inputbg); color: var(--ink); border: 1px solid var(--border); padding: 4px 6px; max-width: 200px; } .authform.wide { max-width: 640px; } table.members td.avcell { width: 30px; } /* ---- station facilities ---- */ .navsearch input { width: 150px; padding: 2px 6px; font-size: .95em; } .pager { margin: 10px 0; color: var(--soft); } .pager b { color: var(--red); } .pager a { margin: 0 2px; } .actions { margin-left: auto; display: inline-flex; gap: 8px; } .actions + .postno { margin-left: 0; } .edited { color: var(--soft); font-style: italic; font-size: .9em; } .modrow { margin: -4px 0 8px; color: var(--soft); } mark { background: var(--mark); color: inherit; padding: 0 1px; } pre.chart { font-family: "Courier New", monospace; color: var(--teal); background: var(--card); border: 1px solid var(--border); padding: 10px 12px; overflow-x: auto; line-height: 1.4; } table.archive .dayrow th { background: var(--gold); color: var(--paper); } table.archive .dayrow.today th { background: var(--red); color: var(--paper); } table.archive td.static { color: var(--soft); text-align: center; font-family: "Courier New", monospace; } .badgesection { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .badgesection > img { flex: 0 0 auto; } .badgesection img { border: none; image-rendering: auto; } .embedwrap { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; } .embedcode { font-family: "Courier New", monospace; font-size: .8em; background: var(--card); color: var(--soft); border: 1px dashed var(--border); padding: 4px 6px; width: 100%; max-width: 480px; } .badgeshelf { display: flex; gap: 8px; flex-wrap: wrap; } .badgelist { list-style: none; padding: 0; } .badgelist li { display: flex; gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px dotted var(--border); } .badgelist li.earnedrow { background: var(--stripe); } .badgeinfo { flex: 1; min-width: 0; } .earnedmark { color: var(--green); } .holders { color: var(--soft); font-size: .85em; white-space: nowrap; } .wornbadge { display: block; margin-top: 6px; } .emote { height: 1.4em; width: auto; vertical-align: -0.3em; } table.markupref td.mono { font-family: "Courier New", monospace; white-space: pre-wrap; } .guestbook .gbody { color: var(--ink); } .onair { color: var(--red); } .onair .uname { margin-right: 6px; } .karmarow { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .karmatag { font-size: .85em; border: 1px solid var(--border); background: var(--stripe); padding: 0 5px; border-radius: 8px; } a.karmatag:hover { text-decoration: underline; } .status { color: var(--soft); font-style: italic; } .readers { color: var(--soft); font-size: .9em; margin: -4px 0 8px; } .firstpost { color: #fff; background: var(--gold); padding: 0 5px; font-size: .8em; border-radius: 2px; } .birthdayline { color: var(--gold); } .motdlink:hover { text-decoration: none; } .newdot { color: var(--red); text-decoration: none; } a.newdot:hover { text-decoration: none; } .mailcount { color: var(--red); } .maillist .body { margin-top: 4px; } .unreadmail { background: var(--card2) !important; } @media (max-width: 640px) { body { font-size: 12.5px; } .crt { padding: 0 8px 16px; } .logo { font-size: 1.5em; } .masthead { gap: 8px; padding-top: 10px; } nav { flex-direction: column; align-items: flex-start; gap: 4px; } .navsearch input { width: 140px; } /* data tables reflow into stacked rows instead of squeezed columns */ table, tbody { display: block; } table tr { display: block; padding: 7px 9px; border-bottom: 1px dotted var(--border); } table tr:nth-child(odd) { background: var(--stripe); } table tr:last-child { border-bottom: none; } table th, table td { display: inline; border: none; padding: 0; background: none !important; white-space: normal; text-align: left; } table.boards tr:first-child, table.threads tr:first-child, table.members tr:first-child { display: none; } /* boards: name, blurb, then when it was last active */ table.boards td.num { display: none; } table.boards td.desc br, table.threads td.title br { display: none; } .blurb { display: block; } table.boards td.when { display: block; } table.boards td.when::before { content: "last post "; } /* threads: title + excerpt, then one meta line */ table.threads td.title { display: block; margin-bottom: 2px; } table.threads td.who::before { content: "by "; } table.threads td.num::before { content: " \00b7 replies: "; } table.threads td.when::before { content: " \00b7 "; } /* members: name + rank, then one meta line */ table.members td.rank { display: block; } table.members td:nth-child(4)::before { content: "posts: "; } table.members td:nth-child(4)::after { content: " \00b7 "; } table.members td:nth-child(5)::before { content: "joined "; } table.members td:nth-child(6) { display: none; } /* archive: day banner keeps its bar */ table.archive .dayrow th { display: block; padding: 3px 6px; margin: -7px -9px 6px; } table.archive td.when::after { content: " \00b7 "; } .post, .profilecard, .badgesection { flex-direction: column; } .authorcol { display: flex; align-items: center; gap: 10px; width: auto; flex-basis: auto; border-right: none; padding: 0 0 6px; border-bottom: 1px dotted var(--border); } .authorcol .avatar { margin: 0; } .statsblock { margin-left: auto; text-align: right; } .statsblock .ustats { margin-top: 0; } .statsblock .wornbadge { margin-top: 4px; } .profileside { flex-basis: auto; border-right: none; padding-right: 0; border-bottom: 1px dotted var(--border); padding-bottom: 8px; } .postbox form, .authform { max-width: none; } .post header { gap: 6px; } .actions { gap: 6px; } }