/* ============================================================ style.css — Faith, Philosophy & Art Dense 2000s layout · flat gradients · red/maroon/parchment Three columns · starfield bg · small fonts · lots on screen ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=VT323&family=UnifrakturMaguntia&display=swap'); /* ============================================================ CSS VARIABLES ============================================================ */ :root { --bg-page: #0a0405; --bg-post: #1a0b0c; --bg-sidebar: #130608; --bg-widget: #1e0d0e; --bg-widget-alt: #160a0b; --ruby: #b81c1c; --ruby-light: #d42828; --ruby-mid: #8c1414; --ruby-dark: #5c0a0a; --ruby-deep: #3a0606; --vermillion: #c43018; --copper: #b06030; --copper-light: #cc7c44; --copper-dark: #6a3818; --maroon: #3e0a0a; --maroon-mid: #5a1212; --parchment: #f0dfc0; --parchment-dim: #a89070; --parchment-faint: #5c4030; --border: #3a1212; --border-light: #581a1a; --gold: #c8960c; --gold-light: #e8b830; --gold-mid: #9a7008; --gold-dark: #5a4004; --gold-faint: #2a1e02; /* Ink/vellum texture — parchment grain for post bodies */ --ink-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.3'/%3E%3CfeBlend in='SourceGraphic' mode='multiply'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E"); /* Noise texture via inline SVG — subtle grain over buttons/headers */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); /* Widget header gradient — flat, directional */ --wh-top: #9e1818; --wh-bot: #5c0c0c; /* Post header gradient */ --ph-top: #7a1212; --ph-bot: #3e0808; } /* ============================================================ RESET & BASE ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; } /* Footer stays full width as normal */ #footer { width: 100%; box-sizing: border-box; } /* Artificially extend the top chrome past the normal content width to compensate for the right sidebar bleed on index. The 80px overshoot mirrors the sidebar's negative margin-right. overflow-x: hidden on swallows the extra width so no sideways scrollbar appears. */ #header, #marquee-bar, #navbar { width: calc(100% + 80px); margin-right: -80px; box-sizing: border-box; } /* The wrapper is allowed to be wider than the viewport (three-col layout with the right banner bleed). On small screens the user can scroll right to see the banner — this is intentional, classic 2000s behaviour. */ body { font-family: 'Crimson Text', Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.72; color: var(--parchment); background-color: #070203; background-image: url('images/Starfield_08-1024x1024.png'); background-repeat: repeat; background-size: 512px 512px; background-attachment: fixed; } /* Dark overlay keeps starfield subtle */ body::before { content: ''; position: fixed; inset: 0; background: rgba(4, 1, 2, 0.90); z-index: 0; pointer-events: none; } #header, #marquee-bar, #navbar, #wrapper, #footer { position: relative; z-index: 1; } a { color: var(--copper-light); text-decoration: none; } a:visited { color: var(--copper-dark); } a:hover { color: var(--parchment); text-decoration: underline; } /* ============================================================ HEADER ============================================================ */ #header { position: relative; overflow: hidden; border-bottom: 3px double var(--gold-mid); min-height: 160px; display: flex; align-items: center; justify-content: center; text-align: center; } #header .header-bg { position: absolute; inset: 0; background-image: url('images/aqueduct.jpg'); background-size: cover; background-position: center 35%; z-index: 0; } #header .header-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(6,2,4,0.70) 0%, rgba(6,2,4,0.08) 28%, rgba(6,2,4,0.08) 70%, rgba(6,2,4,0.80) 100% ); } .header-inner { position: relative; z-index: 1; padding: 28px 20px 22px; width: 100%; } .header-ornament { display: block; color: var(--gold); font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 8px; margin-bottom: 8px; text-shadow: 0 0 6px rgba(200,150,12,0.5); } #header h1 { font-family: 'UnifrakturMaguntia', 'Cinzel', serif; font-size: 46px; font-weight: 400; color: var(--parchment); text-shadow: 2px 2px 0 rgba(0,0,0,0.95), 0 0 20px rgba(200,150,12,0.3); letter-spacing: 3px; } #header p.tagline { font-size: 13px; font-style: italic; color: var(--parchment-dim); margin-top: 6px; letter-spacing: 1.5px; text-shadow: 0 1px 5px rgba(0,0,0,0.95); } /* ============================================================ MARQUEE ============================================================ */ #marquee-bar { background: var(--maroon); background-image: url('images/Cloudy_Sky-Night_04-512x512.png'); background-size: 200px auto; background-blend-mode: multiply; color: var(--parchment-dim); font-family: 'VT323', monospace; font-size: 20px; padding: 8px 0; line-height: 1.2; border-bottom: 2px solid var(--gold-dark); border-top: 2px solid var(--gold-dark); letter-spacing: 1.5px; box-shadow: 0 2px 0 var(--ruby-deep), 0 -2px 0 var(--ruby-deep); } /* ============================================================ NAVBAR — flat gradient, compact ============================================================ */ #navbar { background: var(--noise), linear-gradient(to bottom, #6a1010, #2a0404); background-size: 200px 200px, auto; padding: 6px 14px 8px; border-top: 2px solid var(--gold-mid); border-bottom: 2px solid var(--gold-dark); box-shadow: inset 0 1px 0 rgba(200,150,12,0.18), inset 0 -1px 0 rgba(0,0,0,0.6); display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } #navbar a { display: inline-block; background: var(--noise), linear-gradient(to bottom, #9e1c1c, #4a0808); background-size: 200px 200px, auto; color: var(--parchment-dim); text-decoration: none; padding: 4px 16px 5px; border: 1px solid var(--gold-dark); border-top-color: rgba(220,170,30,0.5); border-left-color: rgba(220,170,30,0.3); box-shadow: inset 0 1px 0 rgba(255,160,160,0.12), 2px 2px 0 rgba(0,0,0,0.5); font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } #navbar a:hover, #navbar a.active { background: var(--noise), linear-gradient(to bottom, #c42424, #7a1010); background-size: 200px 200px, auto; color: var(--gold-light); border-color: var(--gold-mid); box-shadow: inset 0 1px 0 rgba(255,200,50,0.2), 2px 2px 0 rgba(0,0,0,0.5); text-decoration: none; } /* ============================================================ THREE-COLUMN LAYOUT ============================================================ */ #wrapper { max-width: 1130px; margin: 10px auto; display: flex; gap: 24px; align-items: flex-start; padding: 0 14px 0 14px; } #sidebar-left { width: 215px; flex-shrink: 0; } #main-content { flex: 1; min-width: 0; } /* Banner is 340px image but sidebar is 280px — negative margin */ /* lets the banner bleed right past the wrapper edge naturally. */ #sidebar-right { width: 364px; flex-shrink: 0; margin-right: -75px; margin-left: -10px; } /* ── Right sidebar banner ────────────────────────────────── */ /* Images are 340px. Black margin ~21px + rope ~21px = 42px */ /* Padding 46px clears all of that with a little breathing */ /* room before widget edges hit the cloth. */ #sidebar-right { position: relative; overflow: visible; } .banner-wrap { display: flex; flex-direction: column; align-items: center; } .banner-top { flex-shrink: 0; } .banner-body { padding: 6px 46px; flex: 1; } .banner-bot { flex-shrink: 0; margin-top: -1px; } /* Widgets inside the banner — semi-transparent so velvet shows */ .banner-body .widget { background: rgba(10, 3, 4, 0.55); border-color: rgba(58, 18, 18, 0.6); border-top-color: rgba(154, 112, 8, 0.5); box-shadow: inset 1px 1px 0 rgba(255,100,100,0.03), 1px 1px 3px rgba(0,0,0,0.4); outline-color: rgba(42, 30, 2, 0.4); } .banner-body .widget-title { background: rgba(60, 4, 4, 0.65); background-image: none; } .banner-body .widget-body { background: transparent; } .banner-body .verse-widget { background: rgba(10, 4, 2, 0.4); } .banner-body .quote-widget { background: transparent; } .banner-body .mini-img-widget img { opacity: 0.88; } /* ============================================================ WIDGETS — flat, dense, reference-style ============================================================ */ .widget { background: var(--bg-widget); border: 1px solid var(--border); border-top: 2px solid var(--gold-mid); border-right: 1px solid #1a0606; border-bottom: 1px solid #1a0606; box-shadow: inset 1px 1px 0 rgba(255,100,100,0.04), 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 7px; font-size: 13px; } .widget-title { background: var(--noise), linear-gradient(to bottom, #8a1010, #3a0404); background-size: 200px 200px, auto; color: var(--gold-light); font-family: 'Cinzel', serif; font-weight: 600; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; padding: 4px 8px 5px; border-bottom: 2px solid var(--gold-dark); text-shadow: 0 1px 2px rgba(0,0,0,0.9); box-shadow: inset 0 1px 0 rgba(200,150,12,0.15); } .widget-title::before { content: '❧ '; color: var(--ruby-light); font-style: normal; letter-spacing: 0; opacity: 0.8; } .widget-body { padding: 8px 10px; line-height: 1.7; color: var(--parchment-dim); font-size: 13px; background: var(--ink-texture); background-size: 300px 300px; } .widget-body ul { list-style: none; padding: 0; } .widget-body ul li { margin-bottom: 2px; } .widget-body ul li::before { content: "» "; color: var(--ruby-light); font-weight: bold; } .widget-body a { color: var(--copper-light); font-size: 13px; } .widget-body a:hover { color: var(--parchment); } .widget-divider { border: none; border-top: 1px solid var(--border); margin: 5px 0; } /* ── Avatar ──────────────────────────────── */ .avatar-box { text-align: center; padding: 7px 4px; font-size: 13px; line-height: 1.8; } .avatar-placeholder { width: 84px; height: 84px; background: linear-gradient(135deg, var(--maroon-mid), var(--ruby-deep)); border: 2px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 6px; } .avatar-img { width: 84px; height: 84px; border: 2px solid var(--ruby-mid); display: block; margin: 0 auto 6px; } /* ── Visitor counter ─────────────────────── */ .counter-box { font-family: 'VT323', monospace; background: #0a0202; color: var(--ruby-light); text-align: center; padding: 4px; letter-spacing: 4px; font-size: 24px; border: 1px solid var(--ruby-dark); } {.counter-label { } text-align: center; font-size: 13px; color: var(--parchment-faint); padding: 2px 0 4px; font-family: 'VT323', monospace; letter-spacing: 1px; } /* ── Updates log ─────────────────────────── */ .update-log { padding: 5px 8px 6px; } .update-log dt { font-family: 'VT323', monospace; font-size: 14px; color: var(--gold); margin-top: 5px; letter-spacing: 0.5px; } .update-log dd { font-size: 13px; color: var(--parchment-dim); margin-left: 0; padding-left: 8px; border-left: 2px solid var(--gold-dark); line-height: 1.4; margin-bottom: 2px; } /* ── Quote widget ────────────────────────── */ .quote-widget { padding: 8px 12px; font-size: 13px; font-style: italic; color: var(--parchment-dim); line-height: 1.7; text-align: center; background: var(--ink-texture); background-size: 300px 300px; border-top: 1px solid var(--gold-dark); border-bottom: 1px solid var(--gold-dark); } .quote-widget cite { display: block; font-style: normal; font-family: 'VT323', monospace; font-size: 13px; color: var(--parchment-faint); margin-top: 4px; } /* ── Currently bar ───────────────────────── */ .currently-bar { background: linear-gradient(to right, #2e0808, #1a0404); border: 1px solid var(--gold-dark); border-left: 3px solid var(--gold-mid); box-shadow: inset 0 1px 0 rgba(200,150,12,0.08), 1px 1px 3px rgba(0,0,0,0.5); padding: 5px 12px 6px; margin-bottom: 7px; font-family: 'VT323', monospace; font-size: 16px; color: var(--parchment-dim); letter-spacing: 0.5px; line-height: 1.75; } .currently-bar .cl { color: var(--gold); margin-right: 3px; } .currently-bar span { color: var(--parchment); } /* ── Webring ─────────────────────────────── */ .webring-widget { padding: 6px 8px 8px; text-align: center; font-size: 13px; color: var(--parchment-faint); line-height: 1.9; } .webring-name { font-family: 'Cinzel', serif; font-size: 13px; color: var(--parchment-dim); letter-spacing: 1px; display: block; margin-bottom: 3px; } .webring-nav { display: flex; justify-content: center; gap: 4px; } .webring-nav a { background: var(--noise), linear-gradient(to bottom, var(--ruby-mid), var(--ruby-dark)); background-size: 200px 200px, auto; border: 1px solid var(--gold-dark); color: var(--parchment-dim); font-family: 'VT323', monospace; font-size: 14px; padding: 1px 8px; text-decoration: none; } .webring-nav a:hover { background: linear-gradient(to bottom, var(--ruby-light), var(--ruby-mid)); color: var(--parchment); } /* ── 88x31 buttons ───────────────────────── */ .buttons-88x31 { padding: 6px 7px 8px; display: flex; flex-wrap: wrap; gap: 3px; } .buttons-88x31 img { width: 88px; height: 31px; image-rendering: pixelated; border: 1px solid var(--border); display: block; } .buttons-88x31 a:hover img { border-color: var(--ruby-light); } .badge-small { width: 88px; height: 31px; background: var(--noise), linear-gradient(to bottom, var(--ruby-mid), var(--ruby-dark)); background-size: 200px 200px, auto; border: 1px solid var(--gold-dark); display: flex; align-items: center; justify-content: center; color: var(--parchment-dim); font-family: 'VT323', monospace; text-align: center; line-height: 1.3; } /* ── Widget image strip ──────────────────── */ .widget-img-strip { width: 100%; height: 55px; object-fit: cover; display: block; border-bottom: 1px solid var(--border); } /* ── Now playing ─────────────────────────── */ .player-wrap { background: #080202; font-family: 'VT323', monospace; color: var(--parchment-dim); font-size: 13px; } .player-track { padding: 8px 10px; border-bottom: 1px solid var(--border); line-height: 1.6; text-align: center; } .player-track .track-title { font-size: 13px; color: var(--copper-light); } .player-track .track-artist { font-size: 13px; color: var(--parchment-dim); } .player-track .track-index { font-size: 13px; color: var(--parchment-faint); } .player-controls { display: flex; justify-content: center; gap: 4px; padding: 5px 8px; border-bottom: 1px solid var(--border); } .player-controls button { background: var(--noise), linear-gradient(to bottom, var(--ruby-mid), var(--ruby-dark)); background-size: 200px 200px, auto; color: var(--parchment-dim); border: 1px solid var(--gold-dark); padding: 2px 12px; font-family: 'VT323', monospace; font-size: 15px; cursor: pointer; } .player-controls button:hover { background: linear-gradient(to bottom, var(--ruby-light), var(--ruby-mid)); color: var(--parchment); } .player-status { text-align: center; padding: 4px 8px; font-size: 13px; color: var(--ruby-light); } .blink { animation: blink 1.2s step-end infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } /* ── Right-column special widgets ────────── */ .mini-img-widget img { width: 100%; display: block; border-bottom: 1px solid var(--border); } /* Scripture / verse widget */ .verse-widget { padding: 7px 9px 8px; font-size: 13px; font-style: italic; color: var(--parchment-dim); line-height: 1.75; border-left: 3px solid var(--gold-mid); border-top: 1px solid var(--gold-dark); background: var(--ink-texture), rgba(10,4,2,0.4); background-size: 300px 300px, auto; } .verse-ref { display: block; font-style: normal; font-family: 'VT323', monospace; font-size: 14px; color: var(--ruby-light); margin-top: 5px; } /* Stats table */ .stats-table { width: 100%; border-collapse: collapse; font-size: 13px; } .stats-table td { padding: 2px 6px; border-bottom: 1px solid var(--border); color: var(--parchment-dim); } .stats-table td:first-child { color: var(--parchment-faint); font-family: 'VT323', monospace; font-size: 13px; white-space: nowrap; width: 50%; } /* ============================================================ GUESTBOOK CTA ============================================================ */ .guestbook-cta { background: linear-gradient(to right, #2a0606, #1e0404); border: 1px solid var(--gold-dark); border-top: 2px solid var(--gold-mid); box-shadow: 1px 1px 3px rgba(0,0,0,0.5); padding: 6px 12px 7px; margin-bottom: 7px; font-size: 13px; text-align: center; font-style: italic; color: var(--parchment-dim); } .guestbook-cta a { color: var(--copper-light); font-style: normal; font-weight: 600; } .guestbook-cta strong { color: var(--ruby-light); font-style: normal; } .guestbook-cta::before { content: '⸻ '; color: var(--gold-dark); } /* ============================================================ POSTS ============================================================ */ .post { background: var(--bg-post); border: 1px solid var(--border); border-top: 3px double var(--gold-mid); border-right: 1px solid #0e0404; border-bottom: 2px solid var(--gold-dark); box-shadow: 2px 2px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(200,150,12,0.08); margin-bottom: 22px; } .post-header { background: var(--noise), linear-gradient(135deg, #6e1010 0%, #9a1616 40%, #5a0c0c 100%); background-size: 200px 200px, auto; padding: 6px 12px 7px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 2px solid var(--gold-dark); box-shadow: inset 0 1px 0 rgba(200,150,12,0.15), inset 0 -1px 0 rgba(200,150,12,0.08); } .post-title { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 400; color: var(--gold-light); letter-spacing: 0.5px; text-shadow: 0 0 8px rgba(200,150,12,0.4), 0 1px 2px rgba(0,0,0,0.9); } .post-date { font-family: 'VT323', monospace; font-size: 13px; color: var(--gold); white-space: nowrap; flex-shrink: 0; } .post-body { padding: 14px 18px; color: var(--parchment); font-size: 16px; line-height: 1.88; background: var(--ink-texture), linear-gradient(to bottom, #1c0d0e, #170a0b); background-size: 300px 300px, auto; } .post-body p { margin-bottom: 10px; } .post-body p:last-child { margin-bottom: 0; } .post-body p:first-of-type::first-letter, .post-body p.drop-cap::first-letter { font-family: 'UnifrakturMaguntia', 'Cinzel', serif; font-size: 4em; float: left; line-height: 0.72; margin: 2px 10px 0 0; color: var(--ruby-light); text-shadow: 1px 1px 0 var(--gold-dark), 0 0 12px rgba(184,28,28,0.5); padding: 2px 5px 0 2px; border-right: 1px solid var(--gold-dark); border-bottom: 1px solid var(--gold-dark); } .mood-line { font-style: italic; font-family: 'VT323', monospace; letter-spacing: 0.5px; } .post-footer { background: linear-gradient(to bottom, #2e0606, #1e0404); border-top: 1px solid var(--gold-dark); padding: 5px 12px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; } .permalink { font-family: 'VT323', monospace; font-size: 13px; color: var(--parchment-faint); } .permalink:hover { color: var(--copper-light); text-decoration: none; } .post-empty { text-align: center; padding: 28px; font-style: italic; color: var(--parchment-faint); font-family: 'Cinzel', serif; border: 1px dashed var(--border); } /* ============================================================ ART POSTS ============================================================ */ .post-art { border-top: 2px solid var(--copper); } .art-image-wrap { width: 100%; background: var(--bg-post); border-bottom: 1px solid var(--border); min-height: 160px; display: flex; align-items: center; justify-content: center; position: relative; } .art-image { width: 100%; height: auto; object-fit: contain; display: block; cursor: zoom-in; border: 2px solid var(--gold-mid); box-shadow: 0 0 0 1px var(--gold-dark), inset 0 0 0 1px var(--gold-dark), 0 0 18px rgba(200,150,12,0.18); } .art-image-wrap::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 1; } .art-image-placeholder { width: 100%; min-height: 200px; background: var(--bg-post); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: var(--parchment-faint); font-family: 'VT323', monospace; font-size: 14px; line-height: 2; border: 1px dashed var(--border); padding: 20px; } .art-caption { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 14px 5px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, #6a3010, #3a1606); } .art-body { font-size: 13px; color: var(--parchment-dim); padding: 13px 16px; } .older-posts { text-align: center; padding: 8px; font-family: 'Cinzel', serif; font-size: 13px; color: var(--parchment-faint); letter-spacing: 1px; } .older-posts a { color: var(--copper-light); } /* ============================================================ PAGE INTRO BANNER ============================================================ */ .page-intro { position: relative; overflow: hidden; border: 1px solid var(--border-light); margin-bottom: 10px; min-height: 90px; display: flex; align-items: center; justify-content: center; } .page-intro-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .page-intro-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6,2,4,0.82) 0%, transparent 25%, transparent 75%, rgba(6,2,4,0.82) 100%), linear-gradient(to bottom, rgba(6,2,4,0.55) 0%, transparent 35%, transparent 65%, rgba(6,2,4,0.65) 100%); } .page-intro-text { position: relative; z-index: 1; font-family: 'Cinzel', serif; font-size: 13px; color: var(--parchment); text-align: center; line-height: 1.8; padding: 18px 22px; text-shadow: 0 1px 8px rgba(0,0,0,1); letter-spacing: 1.5px; } /* ============================================================ FRAMED IMAGE ============================================================ */ .img-frame { display: inline-block; border: 2px solid var(--border-light); margin: 8px 0; background: var(--bg-post); } .img-frame img { display: block; max-width: 100%; } .img-frame-caption { display: block; text-align: center; font-family: 'VT323', monospace; font-size: 13px; color: var(--parchment-faint); padding: 3px 6px; border-top: 1px solid var(--border); letter-spacing: 1px; } /* ============================================================ FOOTER ============================================================ */ #footer { position: relative; overflow: hidden; border-top: 1px solid var(--gold-dark); box-shadow: 0 -2px 0 var(--gold-mid), 0 -4px 0 #1a0404; margin-top: 12px; text-align: center; font-family: 'Crimson Text', serif; line-height: 1.9; color: var(--parchment-faint); font-size: 13px; } .footer-bg { position: absolute; inset: 0; background-image: url('images/Cloudy_Sky-Sunset_01-512x512.png'); background-size: 200px auto; background-color: rgba(36, 10, 4, 0.92); background-blend-mode: multiply; z-index: 0; } .footer-inner { position: relative; z-index: 1; padding: 14px 16px 12px; } .footer-cottage { width: 160px; margin: 0 auto 12px; border: 2px solid var(--border-light); display: block; } .footer-ornament { display: block; color: var(--ruby); font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 6px; margin-bottom: 8px; text-shadow: 0 0 8px rgba(200,150,12,0.3); } #footer a { color: var(--copper-light); } #footer a:hover { color: var(--parchment-dim); text-decoration: none; } .badge-row { display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; margin: 10px 0 8px; } .badge-row img { width: 88px; height: 31px; image-rendering: pixelated; border: 1px solid var(--border); } .badge-row a:hover img { border-color: var(--ruby-light); } .badge { width: 88px; height: 31px; background: var(--noise), linear-gradient(to bottom, var(--ruby-mid), var(--ruby-dark)); background-size: 200px 200px, auto; border: 1px solid var(--gold-dark); display: flex; align-items: center; justify-content: center; color: var(--parchment-dim); font-family: 'VT323', monospace; font-size: 13px; text-align: center; line-height: 1.3; } /* ============================================================ GUESTBOOK PAGE ============================================================ */ .gb-section-title { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 400; color: var(--parchment-dim); margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); letter-spacing: 2px; } .gb-entry { background: var(--bg-post); border: 1px solid var(--border); border-left: 3px solid var(--ruby); margin-bottom: 10px; padding: 13px 16px; } .gb-entry-header { display: flex; justify-content: space-between; margin-bottom: 4px; } .gb-entry-name { color: var(--copper-light); font-family: 'Cinzel', serif; font-size: 14px; } .gb-entry-date { color: var(--parchment-faint); font-family: 'VT323', monospace; font-size: 13px; align-self: flex-end; } .gb-entry-site { font-size: 13px; color: var(--parchment-faint); margin-bottom: 6px; } .gb-entry-body { color: var(--parchment); font-size: 13px; line-height: 1.7; } #HCB_comment_box { font-family: 'Crimson Text', Georgia, serif !important; } /* ── Post dividers ───────────────────────── */ .post-divider { margin: 18px 0; overflow: hidden; border-top: 1px solid var(--gold-dark); border-bottom: 1px solid var(--gold-dark); line-height: 0; max-height: 120px; box-shadow: 0 1px 0 #0e0404, 0 -1px 0 #0e0404; } .post-divider img { width: 100%; height: 120px; object-fit: cover; display: block; opacity: 0.75; } /* ============================================================ EXTRAS ============================================================ */ /* Custom scrollbar — IE/old WebKit style red-on-dark */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #0e0304; border-left: 1px solid #2a0808; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #8c1414, #3a0606); border: 1px solid var(--gold-dark); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #b81c1c, #5c0a0a); } /* Text selection */ ::selection { background: var(--ruby-mid); color: var(--gold-light); } /* Horizontal rule — ornamental */ hr.ornament { border: none; text-align: center; color: var(--ruby-mid); font-size: 13px; letter-spacing: 6px; margin: 6px 0; } hr.ornament::before { content: "✦ · ✦ · ✦"; } /* Widget body links get underline on hover, classic style */ .widget-body a:hover { text-decoration: underline; } /* Tight monospace labels everywhere VT323 appears */ .widget-title, .update-log dt, .currently-bar, .post-date, .mood-line, .permalink, .player-wrap { text-rendering: optimizeSpeed; } /* Post body blockquote — indented, red left rule */ .post-body blockquote { border-left: 3px solid var(--ruby-mid); margin: 10px 0 10px 12px; padding: 4px 12px; color: var(--parchment-dim); font-style: italic; background: rgba(58,6,6,0.3); } /* Wrapper slightly tighter top margin */ #wrapper { margin-top: 8px; } /* Image borders — all images in widget bodies get a thin border */ .widget-body img, .mini-img-widget img { border: 1px solid var(--border-light); display: block; } /* Table striping on stats — alternating rows */ .stats-table tr:nth-child(even) td { background: rgba(58,6,6,0.25); } /* Mood line — slightly more compact */ .mood-line { font-size: 12px; padding: 3px 14px 4px; color: var(--ruby-light); border-top: 1px dashed var(--gold-dark); background: rgba(30,6,6,0.4); } /* Drop cap red glow */ .post-body p:first-of-type::first-letter, .post-body p.drop-cap::first-letter { text-shadow: 1px 1px 0 var(--gold-dark), 0 0 12px rgba(184,28,28,0.6); } /* ============================================================ MEDIEVAL / SCRIBE EXTRAS ============================================================ */ /* ── Corner ornaments on widgets via outline + pseudo ── */ .widget { outline: 1px solid var(--gold-faint); outline-offset: -3px; } /* ── Post — inner ruled margin line (like a codex page) ── */ .post-body { border-left: 2px solid rgba(90,64,4,0.35); padding-left: 20px; } /* ── Post body links — underlined, copper, medieval feel ── */ .post-body a { color: var(--copper-light); text-decoration: underline; text-decoration-color: var(--gold-dark); text-underline-offset: 2px; } .post-body a:hover { color: var(--gold-light); } /* ── Rubricated headings inside posts ── */ .post-body h2, .post-body h3 { font-family: 'Cinzel', serif; color: var(--ruby-light); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--gold-dark); } /* ── Widget list items — pilcrow (¶) style instead of » ── */ .widget-body ul li::before { content: "✦ "; color: var(--gold-dark); font-weight: normal; } /* ── Ornamental horizontal rule ── */ .widget-divider { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--gold-dark), var(--gold-mid), var(--gold-dark), transparent); margin: 6px 0; } /* ── Post date — looks like a colophon/folio number ── */ .post-date { font-family: 'VT323', monospace; font-size: 13px; color: var(--gold); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.5px; opacity: 0.85; } /* ── Permalink — looks like a marginalia mark ── */ .permalink::before { content: '§ '; color: var(--gold-dark); } /* ── Currently bar labels — rubricated ── */ .currently-bar .cl { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } /* ── Verse widget quote marks — big decorative ── */ .verse-widget::before { content: '\201C'; font-family: 'UnifrakturMaguntia', Georgia, serif; font-size: 2.4em; color: var(--ruby-mid); line-height: 0; vertical-align: -0.5em; margin-right: 3px; opacity: 0.7; } /* ── Blockquote — manuscript gloss style ── */ .post-body blockquote { border-left: 3px solid var(--gold-mid); border-right: 1px solid var(--gold-dark); background: var(--ink-texture), rgba(40,10,4,0.4); background-size: 300px 300px, auto; } .post-body blockquote::before { content: '\275D'; font-size: 1.8em; color: var(--ruby-mid); float: left; line-height: 1; margin-right: 6px; margin-top: -2px; opacity: 0.7; } /* ── Update log — red ink dates ── */ .update-log dt { color: var(--ruby-light); font-size: 13px; } .update-log dt::before { content: '† '; color: var(--gold-dark); font-style: normal; } /* ── Stats table — ruled vellum rows ── */ .stats-table { background: var(--ink-texture); background-size: 300px 300px; } /* ── Footer ornament fraktur ── */ .footer-ornament { font-family: 'UnifrakturMaguntia', 'Cinzel', serif; font-size: 18px; letter-spacing: 4px; } /* ── Post empty — manuscript placeholder ── */ .post-empty::before { content: '[ hic svnt leones ]'; display: block; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 3px; color: var(--ruby-dark); margin-bottom: 6px; } /* ── Scrollbar ── make thumb more ornate ── */ ::-webkit-scrollbar-thumb { background: var(--noise), linear-gradient(to bottom, #7a1212, #3a0606); background-size: 200px 200px, auto; } /* ============================================================ RESPONSIVE BANNER Instead of fixed px, banner pieces fill the sidebar width. The sidebar is 280px — banner was 364px so it was always overflowing. Now it's tied to the sidebar container. ============================================================ */ .banner-top { width: 100%; max-width: 364px; height: 55px; background: url('images/deco/banner-top.png') center top / 100% 55px no-repeat; flex-shrink: 0; } .banner-body { width: 100%; max-width: 364px; background: url('images/deco/banner-mid.png') center top / 100% auto repeat-y; padding: 6px 13%; flex: 1; } .banner-bot { width: 100%; max-width: 364px; height: auto; aspect-ratio: 364 / 240; background: url('images/deco/banner-bot.png') center top / 100% 100% no-repeat; flex-shrink: 0; margin-top: -1px; } /* ============================================================ RESPONSIVE — three-column squeeze Desktop (>1024px) is untouched. Below that we scale the right sidebar and main content down proportionally so the layout fits without horizontal scrolling on tablet/mobile. ============================================================ */ /* Tablet — ~768px to 1024px */ @media (max-width: 1024px) { #wrapper { gap: 14px; padding: 0 8px; } #sidebar-left { width: 185px; } #sidebar-right { width: 300px; margin-right: -40px; margin-left: -6px; } .banner-top, .banner-body, .banner-bot { max-width: 300px; } .banner-top { height: 45px; background-size: 100% 45px; } /* Match reduced sidebar bleed */ #header, #marquee-bar, #navbar { width: calc(100% + 40px); margin-right: -40px; } } /* Mobile — up to ~767px */ @media (max-width: 767px) { #wrapper { gap: 10px; padding: 0 6px; } #sidebar-left { width: 155px; } #sidebar-right { width: 260px; margin-right: -30px; margin-left: -4px; } .banner-top, .banner-body, .banner-bot { max-width: 260px; } .banner-top { height: 38px; background-size: 100% 38px; } .banner-body { padding: 6px 10%; } /* Give top chrome a little breathing room on the right edge */ #header .header-inner { padding-left: 14px; padding-right: 14px; } #navbar { padding-left: 10px; padding-right: 10px; } #marquee-bar { padding-left: 6px; padding-right: 6px; } /* Match reduced sidebar bleed */ #header, #marquee-bar, #navbar { width: calc(100% + 30px); margin-right: -30px; } } /* ── Candle corner decoration ─────────────────────────────── */ .candle-corner { position: fixed; bottom: 0; left: 0; z-index: 999; pointer-events: none; width: 110px; } /* ── Art post corner frames ────────────────────────────────── */ .art-frame { position: absolute; width: 160px; pointer-events: none; display: block; z-index: 2; } .art-frame-tl { top: -20px; left: -20px; } .art-frame-br { bottom: -20px; right: -20px; } /* ── Lightbox ──────────────────────────────────────────────── */ #lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); align-items: center; justify-content: center; cursor: zoom-out; } #lightbox.active { display: flex; } #lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; display: block; border: 2px solid var(--gold-mid); box-shadow: 0 0 0 1px var(--gold-dark), 0 0 60px rgba(0,0,0,0.8), 0 0 30px rgba(200,150,12,0.15); cursor: zoom-out; }