/* changelogs.frg.gg - deep-void theme. Blue-black space, dark crimson + deep blue nebulae, cold starfield, and Destiny-style geometric line art (inline SVG). Display text renders as a cold light projection; interactive elements carry a steel-blue accent. */ :root { --void: #05060a; /* Panels are near-opaque on purpose: they used to be translucent with backdrop-filter blur, which forced a per-frame re-blur of every card over the animated background and janked scrolling on weaker GPUs. */ --panel: rgba(17, 21, 33, 0.92); --panel-deep: rgba(10, 13, 22, 0.96); --border: rgba(120, 145, 190, 0.22); --border-hi: rgba(170, 200, 245, 0.45); --ink: #e9ebf1; --muted: #a7adbd; --dim: #78808f; --accent: #9fbce4; --accent-mid: #6d92c4; --accent-lo: #3f5c88; --glow: rgba(110, 150, 210, 0.14); --danger: #ff8f9b; /* projected-light text: cold luminous ink with an icy halo */ --projection: #f0f3f9; --proj-halo: 0 0 1px rgba(245, 248, 255, 0.5), 0 0 22px rgba(160, 195, 255, 0.32), 0 0 46px rgba(110, 150, 210, 0.14); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--void); color: var(--ink); font-family: 'Source Sans Pro', sans-serif; font-size: 15px; line-height: 1.65; } /* ── The void: nebulae + starfield, PARKED. The stacked radial-gradients rasterize brutally slowly on Firefox (main-thread repaints, janked scroll), so the whole feature is gated behind a .body2 class the body doesn't have. Re-enable with only if the gradients get replaced by a pre-baked image tile. ── */ .body2::before, .body2::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* dark crimson and deep-blue nebulae */ .body2::before { background: radial-gradient(1000px 640px at 14% -10%, rgba(140, 25, 40, 0.13), transparent 62%), radial-gradient(880px 600px at 86% 4%, rgba(35, 60, 120, 0.14), transparent 60%), radial-gradient(1300px 900px at 50% 118%, rgba(25, 45, 95, 0.14), transparent 62%), radial-gradient(620px 440px at 70% 44%, rgba(90, 30, 45, 0.10), transparent 65%), radial-gradient(800px 560px at 22% 68%, rgba(45, 70, 115, 0.10), transparent 65%); } /* ── The rings: a slow orrery behind the page ─────────────────────── One fixed square element centered near the top of the page. The element itself carries a breathing color glow; its two pseudos each carry a set of dashed/segmented rings that counter-rotate very slowly. */ .rings { position: fixed; top: -400px; left: 50%; width: 1240px; height: 1240px; margin-left: -620px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 50%, rgba(70, 110, 190, 0.10), transparent 72%), radial-gradient(600px 520px at 62% 40%, rgba(150, 40, 60, 0.07), transparent 70%); } .rings::before, .rings::after { content: ""; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } /* outer set: a segmented band, a dotted orbit, four short ticks */ .rings::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%201240'%3E%3Cg%20fill='none'%20stroke='%23dde4ee'%3E%3Ccircle%20cx='620'%20cy='620'%20r='330'%20stroke-width='1'%20stroke-opacity='.20'%20stroke-dasharray='150%2036%2010%2036'/%3E%3Ccircle%20cx='620'%20cy='620'%20r='378'%20stroke-width='1'%20stroke-opacity='.13'%20stroke-dasharray='2%2020'/%3E%3Cpath%20d='M620%20268v26M620%20946v26M268%20620h26M946%20620h26'%20stroke-width='1'%20stroke-opacity='.3'/%3E%3C/g%3E%3C/svg%3E"); } /* inner set: a long-arc ring, a fine dotted ring, a bright inner arc */ .rings::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%201240'%3E%3Cg%20fill='none'%20stroke='%23dde4ee'%3E%3Ccircle%20cx='620'%20cy='620'%20r='236'%20stroke-width='1'%20stroke-opacity='.22'%20stroke-dasharray='420%20150'/%3E%3Ccircle%20cx='620'%20cy='620'%20r='282'%20stroke-width='1'%20stroke-opacity='.12'%20stroke-dasharray='1%2016'/%3E%3Ccircle%20cx='620'%20cy='620'%20r='180'%20stroke-width='1.4'%20stroke-opacity='.26'%20stroke-dasharray='120%20450'/%3E%3C/g%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference) { /* will-change is load-bearing on Firefox: it refuses to composite (async-animate) layers larger than the viewport without it and instead repaints these on the main thread every frame, stalling scroll. */ .rings { will-change: opacity; animation: ring-breathe 24s ease-in-out infinite; } .rings::before { will-change: transform; animation: ring-spin 200s linear infinite; } .rings::after { will-change: transform; animation: ring-spin-rev 140s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } @keyframes ring-spin-rev { to { transform: rotate(-360deg); } } /* opacity only: animating filter (hue-rotate) re-rasterized the whole 1240px element every frame, which is a constant repaint cost. */ @keyframes ring-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } } } @media (prefers-reduced-motion: reduce) { .rings { opacity: 0.7; } } /* starfield: cold sparks at two scales so it never reads as a grid */ .body2::after { background-image: radial-gradient(1px 1px at 22px 34px, rgba(240, 244, 252, 0.95), transparent 55%), radial-gradient(1px 1px at 128px 156px, rgba(170, 195, 240, 0.7), transparent 55%), radial-gradient(1.4px 1.4px at 231px 61px, rgba(255, 255, 255, 0.8), transparent 55%), radial-gradient(1px 1px at 66px 208px, rgba(190, 210, 250, 0.55), transparent 55%), radial-gradient(1px 1px at 178px 246px, rgba(240, 244, 252, 0.5), transparent 55%), radial-gradient(1.6px 1.6px at 289px 190px, rgba(215, 228, 252, 0.9), transparent 55%), radial-gradient(1px 1px at 316px 108px, rgba(230, 170, 180, 0.5), transparent 55%), radial-gradient(1px 1px at 45px 118px, rgba(255, 255, 255, 0.45), transparent 55%), radial-gradient(1.2px 1.2px at 260px 300px, rgba(175, 200, 245, 0.65), transparent 55%), radial-gradient(1px 1px at 104px 12px, rgba(215, 228, 252, 0.6), transparent 55%); background-size: 340px 340px; } @media (prefers-reduced-motion: no-preference) { .body2::after { will-change: opacity; animation: frg-twinkle 8s ease-in-out infinite alternate; } @keyframes frg-twinkle { from { opacity: 0.6; } to { opacity: 1; } } } a { color: var(--accent); text-decoration: none; } a:hover { color: #ffffff; text-shadow: 0 0 12px rgba(160, 195, 255, 0.5); } .wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; } /* ── Topbar: dark glass over the void ───────────────────────────── */ .topbar { display: flex; align-items: center; gap: 14px; padding: 0 22px; min-height: 54px; margin-bottom: 30px; background: rgba(8, 11, 18, 0.92); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(190, 210, 245, 0.05), 0 12px 34px rgba(1, 2, 6, 0.55); font-size: 13px; color: var(--muted); } .topbar .brand { display: flex; align-items: center; } .topbar .brand img { height: 22px; display: block; filter: drop-shadow(0 0 10px rgba(160, 195, 255, 0.22)); transition: filter .18s; } .topbar .brand:hover img { filter: drop-shadow(0 0 16px rgba(190, 215, 255, 0.45)); } .topbar .pagetitle { color: var(--muted); letter-spacing: .14em; text-transform: uppercase; border-left: 1px solid var(--border); padding-left: 14px; font-size: 12px; } .topbar nav { display: flex; align-items: center; } .topbar nav a { color: var(--muted); padding: 17px 11px; letter-spacing: .02em; } .navicon { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .navicon-discord { -webkit-mask-image: url("img/discord.svg"); mask-image: url("img/discord.svg"); } .navicon-forum { -webkit-mask-image: url("img/forum.svg"); mask-image: url("img/forum.svg"); } .topbar nav a:hover { color: #ffffff; } .topbar nav a.here { color: var(--accent); } .topbar .spacer { flex: 1; } .topbar .who { color: var(--dim); } .topbar .who b { color: var(--accent); font-weight: 600; } .topbar .adminpill { background: linear-gradient(180deg, var(--accent-mid), var(--accent-lo)); color: #060a12; padding: 4px 12px; border-radius: 4px; border: 1px solid rgba(190, 215, 250, 0.55); font-weight: 700; margin: 0 4px; box-shadow: 0 0 14px var(--glow), inset 0 1px 0 rgba(225, 238, 255, 0.4); } .topbar .adminpill:hover { filter: brightness(1.12); color: #060a12; } /* ── Page header: title projected under a small chart crest ─────── */ .page-head { text-align: center; margin: 6px 0 38px; padding-top: 104px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20300'%3E%3Cg%20fill='none'%20stroke='%23dde4ee'%3E%3Ccircle%20cx='300'%20cy='150'%20r='96'%20stroke-width='1'%20stroke-opacity='.3'%20stroke-dasharray='170%2044'/%3E%3Ccircle%20cx='300'%20cy='150'%20r='126'%20stroke-width='1'%20stroke-opacity='.14'%20stroke-dasharray='2%2016'/%3E%3Ccircle%20cx='300'%20cy='150'%20r='64'%20stroke-width='1.3'%20stroke-opacity='.28'%20stroke-dasharray='52%20150'/%3E%3Cpath%20d='M272%20150h56M300%20122v56'%20stroke-width='1'%20stroke-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") top center / 420px auto no-repeat; } .page-head h1 { font-family: 'Cinzel', serif; color: var(--projection); letter-spacing: .12em; margin: 0 0 8px; text-shadow: var(--proj-halo); } .page-head h1::after { content: ""; display: block; width: 180px; height: 1px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, rgba(170, 200, 245, 0.8), transparent); box-shadow: 0 0 10px rgba(160, 195, 255, 0.45); } .page-head p { color: var(--muted); margin: 10px 0 0; } /* ── HUD corner brackets shared by the projected panes ──────────── */ .post-card, .md-body, .panel { position: relative; } .post-card::before, .md-body::before, .panel::before, .post-card::after, .md-body::after, .panel::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; transition: border-color .18s; } .post-card::before, .md-body::before, .panel::before { top: 7px; left: 7px; border-top: 1px solid rgba(220, 230, 245, 0.28); border-left: 1px solid rgba(220, 230, 245, 0.28); } .post-card::after, .md-body::after, .panel::after { bottom: 7px; right: 7px; border-bottom: 1px solid rgba(220, 230, 245, 0.28); border-right: 1px solid rgba(220, 230, 245, 0.28); } .post-card:hover::before, .post-card:hover::after { border-color: rgba(235, 242, 255, 0.6); } /* ── Post list: projected panes ─────────────────────────────────── */ .post-card { display: block; background: linear-gradient(180deg, var(--panel), var(--panel-deep)); border: 1px solid var(--border); border-radius: 6px; padding: 20px 26px; margin-bottom: 16px; color: var(--ink); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.07), 0 10px 30px rgba(1, 2, 6, 0.45); transition: border-color .18s, box-shadow .18s, transform .18s; } .post-card:hover { border-color: var(--border-hi); color: var(--ink); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.12), 0 14px 36px rgba(1, 2, 6, 0.6), 0 0 26px var(--glow); } .post-card h2 { margin: 0 0 4px; font-size: 20px; color: var(--projection); font-family: 'Cinzel', serif; letter-spacing: .05em; text-shadow: 0 0 1px rgba(245, 248, 255, 0.4), 0 0 18px rgba(160, 195, 255, 0.22); } .post-card .meta { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; letter-spacing: .06em; } .post-card .excerpt { color: var(--muted); font-size: 14px; margin: 0; } .status-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px; border-radius: 4px; margin-left: 8px; vertical-align: 2px; } .status-pill.draft { background: rgba(105, 88, 40, 0.35); border: 1px solid rgba(225, 200, 130, 0.4); color: #e3cd8a; } .status-pill.published { background: rgba(30, 85, 60, 0.35); border: 1px solid rgba(140, 215, 175, 0.35); color: #8fdcae; } .pagination { display: flex; justify-content: center; gap: 14px; margin-top: 28px; color: var(--dim); } /* ── Single post ────────────────────────────────────────────────── */ .post-head { margin: 10px 0 24px; } .post-head h1 { font-family: 'Cinzel', serif; color: var(--projection); margin: 0 0 8px; letter-spacing: .07em; text-shadow: var(--proj-halo); } .post-head .meta { color: var(--dim); font-size: 13px; letter-spacing: .05em; } .md-body { background: linear-gradient(180deg, var(--panel), var(--panel-deep)); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 6px; padding: 30px 34px; box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.08), 0 18px 48px rgba(1, 2, 6, 0.55); overflow-wrap: break-word; } .md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-family: 'Cinzel', serif; color: var(--projection); line-height: 1.3; letter-spacing: .05em; margin: 1.5em 0 .5em; text-shadow: 0 0 1px rgba(245, 248, 255, 0.35), 0 0 16px rgba(160, 195, 255, 0.18); } .md-body h1:first-child, .md-body h2:first-child, .md-body h3:first-child { margin-top: 0; } .md-body h1, .md-body h2 { padding-bottom: 8px; border-bottom: 0; background: linear-gradient(90deg, rgba(170, 200, 245, 0.55), transparent 70%) left bottom / 100% 1px no-repeat; } .md-body h1 { font-size: 24px; } .md-body h2 { font-size: 20px; } .md-body h3 { font-size: 16px; } .md-body ul, .md-body ol { padding-left: 26px; } .md-body li { margin: 3px 0; } .md-body li::marker { color: var(--accent-mid); } .md-body code { background: rgba(2, 4, 9, 0.6); border: 1px solid rgba(120, 145, 190, 0.25); border-radius: 3px; padding: 1px 5px; font-size: 13px; color: var(--accent); } .md-body pre { background: rgba(2, 4, 9, 0.7); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; overflow-x: auto; box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.45); } .md-body pre code { background: none; border: none; padding: 0; color: #d4dcec; } .md-body blockquote { margin: 1em 0; padding: 10px 18px; border-left: 2px solid var(--accent-mid); background: linear-gradient(90deg, rgba(110, 150, 210, 0.10), transparent 80%); color: var(--muted); border-radius: 0 6px 6px 0; } .md-body img, .md-body video { max-width: 100%; border-radius: 6px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(1, 2, 6, 0.55); } .md-body video { display: block; width: 100%; background: #01030a; } .md-body hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(170, 200, 245, 0.5), transparent); margin: 1.8em 0; } .md-body table { border-collapse: collapse; width: 100%; margin: 1em 0; } .md-body th, .md-body td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; } .md-body th { background: rgba(110, 150, 210, 0.12); color: var(--projection); font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .04em; } .post-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 24px; font-size: 14px; } .post-nav .spacer { flex: 1; } /* ── Thumbs up: a small votive light ────────────────────────────── */ .like-wrap { display: flex; justify-content: center; margin-top: 22px; } .like-btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 20px; border-radius: 6px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel), var(--panel-deep)); color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: color .18s, border-color .18s, box-shadow .18s, transform .12s; } .like-btn:hover { color: var(--accent); border-color: var(--border-hi); box-shadow: 0 0 16px var(--glow); } .like-btn:active { transform: scale(0.96); } .like-thumb { width: 16px; height: 16px; background: currentColor; -webkit-mask: url("img/thumb.svg") center / contain no-repeat; mask: url("img/thumb.svg") center / contain no-repeat; } .like-btn.liked { color: #dce9ff; border-color: rgba(190, 215, 255, 0.65); background: linear-gradient(180deg, rgba(70, 105, 165, 0.45), rgba(40, 62, 105, 0.5)); box-shadow: 0 0 20px rgba(120, 165, 235, 0.35), inset 0 0 14px rgba(140, 180, 245, 0.18), inset 0 1px 0 rgba(225, 238, 255, 0.3); text-shadow: 0 0 10px rgba(170, 205, 255, 0.6); } .like-btn.liked .like-thumb { filter: drop-shadow(0 0 6px rgba(170, 205, 255, 0.8)); } @media (prefers-reduced-motion: no-preference) { .like-btn.pop { animation: like-pop .45s cubic-bezier(.2, 1.6, .4, 1); } .like-btn.liked.pop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: like-burst .6s ease-out forwards; pointer-events: none; } @keyframes like-pop { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } } @keyframes like-burst { from { box-shadow: 0 0 0 0 rgba(160, 195, 255, 0.45); } to { box-shadow: 0 0 0 22px rgba(160, 195, 255, 0); } } } .like-btn { position: relative; } /* read-only count on list cards */ .cardlikes { display: inline-flex; align-items: center; gap: 5px; } .cardlikes .like-thumb { width: 12px; height: 12px; } /* ── Forms / admin ──────────────────────────────────────────────── */ .panel { background: linear-gradient(180deg, var(--panel), var(--panel-deep)); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 6px; padding: 22px 26px; box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.07), 0 14px 40px rgba(1, 2, 6, 0.5); } label { display: block; color: var(--accent); font-weight: 600; margin: 14px 0 5px; font-size: 13.5px; letter-spacing: .05em; } input[type=text], input[type=date], textarea { width: 100%; padding: 9px 12px; background: rgba(3, 5, 10, 0.75); border: 1px solid rgba(85, 110, 155, 0.55); border-top-color: rgba(110, 140, 190, 0.7); border-radius: 6px; color: #eef1f7; font-family: inherit; font-size: 14px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55); } input:focus, textarea:focus { outline: none; border-color: var(--accent-mid); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 14px rgba(160, 195, 255, 0.28); } textarea.md-input { min-height: 420px; resize: vertical; font-family: Consolas, Menlo, monospace; font-size: 13.5px; line-height: 1.55; tab-size: 4; } .btn { display: inline-block; padding: 9px 20px; border: 1px solid rgba(190, 215, 250, 0.5); border-radius: 6px; background: linear-gradient(180deg, var(--accent-mid), var(--accent-lo)); color: #060a12; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; box-shadow: inset 0 1px 0 rgba(225, 238, 255, 0.45), 0 2px 0 #010204, 0 0 16px var(--glow); } .btn:hover { filter: brightness(1.12); color: #060a12; } .btn.secondary { background: rgba(15, 19, 30, 0.5); border-color: var(--border); color: var(--muted); box-shadow: none; } .btn.secondary:hover { color: var(--accent); border-color: var(--accent-mid); } .btn.danger { background: linear-gradient(180deg, #a8404e, #7c2b38); border-color: rgba(255, 165, 175, 0.5); color: #140407; } .admin-row { display: flex; align-items: center; gap: 10px; } .admin-row .grow { flex: 1; } .msg { padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; } .msg.ok { background: rgba(40, 105, 70, 0.22); border: 1px solid rgba(140, 215, 175, 0.35); color: #8fdcae; } .msg.err { background: rgba(170, 55, 70, 0.18); border: 1px solid rgba(255, 143, 155, 0.35); color: var(--danger); } /* ── Editor split view ──────────────────────────────────────────── */ .editor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .editor-split .preview { min-height: 420px; max-height: 75vh; overflow-y: auto; position: sticky; top: 14px; } .preview-note { font-size: 11.5px; color: var(--dim); margin: 4px 0 0; text-align: right; } @media (max-width: 980px) { .editor-split { grid-template-columns: 1fr; } .editor-split .preview { position: static; max-height: none; } } .footer { margin-top: 48px; text-align: center; font-size: 12px; color: var(--dim); letter-spacing: .08em; } .footer a { color: var(--dim); } .footer a:hover { color: var(--accent); }