/* ========================================================================== ROminimal.club - Bucharest Basement Club Theme System Dark theme by default. Light theme via [data-theme="light"] on . ========================================================================== */ /* -------------------------------------------------------------------------- CSS Custom Properties - Dark Theme (Default) Think: Control Club, Guesthouse, Expirat - low ceilings, concrete, red glow -------------------------------------------------------------------------- */ :root { /* ---- Core backgrounds ---- */ --bg-primary: #0d0d0d; --bg-secondary: #181818; --bg-tertiary: #222222; --bg-surface: #1a1a1a; --bg-elevated: #252525; /* ---- Text colors ---- */ --text-primary: #b0b0b0; --text-secondary: #8a8a8a; --text-muted: #666666; --text-heading: #c0a080; --text-inverse: #111111; /* ---- Brand / Accent ---- */ --accent-red: #E8413E; --accent-primary: #E8413E; --accent-red-glow: rgba(232, 65, 62, 0.15); --accent-red-dim: #c03533; --accent-amber: #D4A574; --accent-amber-dim: #C4956A; --accent-gold: #b8963e; /* ---- Links ---- */ --link-color: #c0a080; --link-hover: #D4A574; /* ---- Borders ---- */ --border-primary: #2a2a2a; --border-secondary: #333333; --border-subtle: #222222; --border-accent: rgba(212, 165, 116, 0.2); --border-color: #333333; /* ---- Cards ---- */ --card-bg: #1e1e1e; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* ---- Code blocks ---- */ --code-bg: #1a1a1a; --code-border: #2a2a2a; --code-text: #c8b89a; /* ---- Selection ---- */ --selection-bg: rgba(232, 65, 62, 0.3); /* ---- Shadows & Glows ---- */ --shadow-soft: rgba(0, 0, 0, 0.4); --shadow-medium: rgba(0, 0, 0, 0.6); --glow-red: 0 0 20px rgba(232, 65, 62, 0.1); --glow-amber: 0 0 15px rgba(212, 165, 116, 0.08); /* ---- Navigation panel ---- */ --nav-bg: #0a0a0a; --nav-text: #909090; --nav-text-active: #ffffff; --nav-counter: #555555; /* ---- Post card decorators ---- */ --post-border: #1e1e1e; --post-dot-bg: #111111; --post-dot-border: #2a2a2a; --post-dot-shadow: #111111; --post-meta: #666666; /* ---- Footer ---- */ --footer-text: #555555; --footer-link: #666666; --footer-link-hover: #888888; /* ---- Pagination ---- */ --pagination-text: #666666; --pagination-border: #333333; --pagination-hover-text: #888888; --pagination-hover-border: #555555; /* ---- Table ---- */ --table-border: #222222; --table-header-text: #d4d4d4; --table-odd-bg: #141414; --table-nested-bg: #1a1a1a; /* ---- Kbd ---- */ --kbd-bg: #1e1e1e; --kbd-border: #333333; --kbd-text: #b0b0b0; --kbd-shadow-color: rgba(255, 255, 255, 0.05); /* ---- Mark/Highlight ---- */ --mark-bg: #5c3a00; --mark-text: #f0d090; /* ---- Blockquote ---- */ --blockquote-border: #D4A574; --blockquote-small: #555555; /* ---- Read-next (suggestions) ---- */ --readnext-nocover-bg: #141414; /* ---- No-cover header ---- */ --nocover-bg: #141414; /* ---- Page title/description on header ---- */ --page-title-bg: #000000; --page-desc-bg: #E8413E; /* ---- Menu button ---- */ --menu-btn-border: rgba(255, 255, 255, 0.3); --menu-btn-color: rgba(255, 255, 255, 0.7); --menu-btn-hover-border: rgba(255, 255, 255, 0.6); --menu-btn-hover-color: rgba(255, 255, 255, 0.9); /* ---- Subscribe button (in nav) ---- */ --subscribe-btn-bg: #ffffff; --subscribe-btn-color: #111111; /* ---- Author ---- */ --author-bio-color: #8a8a8a; --author-image-bg: #1a1a1a; --author-image-shadow: #2a2a2a; /* ---- Share links ---- */ --share-link-color: #555555; --share-link-hover: #888888; /* ---- Fieldset ---- */ --fieldset-border: #333333; /* ---- HR ---- */ --hr-color: #222222; /* ---- Player iframe area ---- */ --player-glow: 0 0 30px rgba(232, 65, 62, 0.12), 0 0 60px rgba(232, 65, 62, 0.06); /* ---- Transitions ---- */ --theme-transition: 0.3s ease; /* ---- Nav page (breadcrumb/nav.css) ---- */ --navpage-bg-start: #1a1a1a; --navpage-bg-end: #111111; --navpage-shadow: rgba(0, 0, 0, 0.3); /* ---- Scrollbar ---- */ --scrollbar-track: #0a0a0a; --scrollbar-thumb: #333333; --scrollbar-thumb-hover: #555555; } /* -------------------------------------------------------------------------- Light Theme - Restores original Casper colors -------------------------------------------------------------------------- */ [data-theme="light"] { /* ---- Core backgrounds ---- */ --bg-primary: #ECECEC; --bg-secondary: #ffffff; --bg-tertiary: #f5f8fa; --bg-surface: #ffffff; --bg-elevated: #ffffff; /* ---- Text colors ---- */ --text-primary: #3A4145; --text-secondary: #5A6269; --text-muted: #9EABB3; --text-heading: #2E2E2E; --text-inverse: #ffffff; /* ---- Brand / Accent ---- */ --accent-red: #E8413E; --accent-primary: #E8413E; --accent-red-glow: rgba(232, 65, 62, 0.1); --accent-red-dim: #c03533; --accent-amber: #D4A574; --accent-amber-dim: #C4956A; --accent-gold: #b8963e; /* ---- Links ---- */ --link-color: #4A4A4A; --link-hover: #111111; /* ---- Borders ---- */ --border-primary: #EBF2F6; --border-secondary: #E3EDF3; --border-subtle: #EFEFEF; --border-accent: rgba(212, 165, 116, 0.3); --border-color: #e8e8e8; /* ---- Cards ---- */ --card-bg: #ffffff; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* ---- Code blocks ---- */ --code-bg: #F7FAFB; --code-border: #E3EDF3; --code-text: inherit; /* ---- Selection ---- */ --selection-bg: #D6EDFF; /* ---- Shadows & Glows ---- */ --shadow-soft: rgba(0, 0, 0, 0.05); --shadow-medium: rgba(0, 0, 0, 0.1); --glow-red: none; --glow-amber: none; /* ---- Navigation panel ---- */ --nav-bg: #111111; --nav-text: #909090; --nav-text-active: #ffffff; --nav-counter: #B8B8B8; /* ---- Post card decorators ---- */ --post-border: #EBF2F6; --post-dot-bg: #ffffff; --post-dot-border: #E7EEF2; --post-dot-shadow: #ffffff; --post-meta: #9EABB3; /* ---- Footer ---- */ --footer-text: #BBC7CC; --footer-link: #BBC7CC; --footer-link-hover: #50585D; /* ---- Pagination ---- */ --pagination-text: #9EABB3; --pagination-border: #bfc8cd; --pagination-hover-text: #889093; --pagination-hover-border: #98a0a4; /* ---- Table ---- */ --table-border: #EFEFEF; --table-header-text: #000000; --table-odd-bg: #F6F6F6; --table-nested-bg: #ffffff; /* ---- Kbd ---- */ --kbd-bg: #F4F4F4; --kbd-border: #CCCCCC; --kbd-text: #666666; --kbd-shadow-color: rgba(0, 0, 0, 0.2); /* ---- Mark/Highlight ---- */ --mark-bg: #FFC336; --mark-text: inherit; /* ---- Blockquote ---- */ --blockquote-border: #4A4A4A; --blockquote-small: #CCCCCC; /* ---- Read-next (suggestions) ---- */ --readnext-nocover-bg: #f5f8fa; /* ---- No-cover header ---- */ --nocover-bg: #f5f8fa; /* ---- Page title/description on header ---- */ --page-title-bg: #000000; --page-desc-bg: #E8413E; /* ---- Menu button ---- */ --menu-btn-border: #bfc8cd; --menu-btn-color: #9EABB3; --menu-btn-hover-border: #555555; --menu-btn-hover-color: #555555; /* ---- Subscribe button (in nav) ---- */ --subscribe-btn-bg: #ffffff; --subscribe-btn-color: #111111; /* ---- Author ---- */ --author-bio-color: #50585D; --author-image-bg: #ffffff; --author-image-shadow: #E7EEF2; /* ---- Share links ---- */ --share-link-color: #BBC7CC; --share-link-hover: #50585D; /* ---- Fieldset ---- */ --fieldset-border: #c0c0c0; /* ---- HR ---- */ --hr-color: #EFEFEF; /* ---- Player iframe area ---- */ --player-glow: none; /* ---- Nav page (breadcrumb/nav.css) ---- */ --navpage-bg-start: #efefef; --navpage-bg-end: #bbbbbb; --navpage-shadow: rgba(0, 0, 0, 0.15); /* ---- Scrollbar ---- */ --scrollbar-track: #f0f0f0; --scrollbar-thumb: #cccccc; --scrollbar-thumb-hover: #aaaaaa; } /* -------------------------------------------------------------------------- Hero Title Typography - Audiowide -------------------------------------------------------------------------- */ .hero-player__title { font-family: 'Audiowide', cursive; letter-spacing: 2px; text-transform: uppercase; } /* -------------------------------------------------------------------------- Theme Transitions - Smooth switching between themes -------------------------------------------------------------------------- */ body, .site-wrapper, .post, .post-footer, .author-profile, .site-footer, .site-footer a, .extra-pagination, .pagination, .pagination a, code, tt, pre, kbd, mark, a, h1, h2, h3, h4, h5, h6, .post-meta, .post-meta a, .author-meta, .author-meta a, .post-title a, .post-footer h4 a, .read-next-story.no-cover, table th, table td, table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th, blockquote, hr { transition: background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition); } /* -------------------------------------------------------------------------- Atmospheric Effects - Dark Theme Only -------------------------------------------------------------------------- */ /* Noise/grain texture overlay - sits behind content */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; pointer-events: none; z-index: -1; } /* Remove atmospheric effects in light theme */ [data-theme="light"] body::before { display: none; } /* -------------------------------------------------------------------------- Player Area - DJ Booth Styling (dark theme) -------------------------------------------------------------------------- */ .player { position: relative; padding: 0.5rem 0; } .player iframe { border-radius: 6px; box-shadow: var(--player-glow); transition: box-shadow 0.5s ease; } /* Subtle red underglow on the player area */ :root:not([data-theme="light"]) .player::before { content: ''; position: absolute; bottom: -10px; left: 10%; right: 10%; height: 20px; background: radial-gradient(ellipse at center, rgba(232, 65, 62, 0.1) 0%, transparent 70%); pointer-events: none; filter: blur(10px); } /* -------------------------------------------------------------------------- Dark Theme Typography Adjustments -------------------------------------------------------------------------- */ :root:not([data-theme="light"]) body { letter-spacing: 0.02rem; } :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3 { letter-spacing: 0.5px; font-weight: 600; } :root:not([data-theme="light"]) .page-title { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } :root:not([data-theme="light"]) .page-description { text-shadow: 0 1px 10px rgba(232, 65, 62, 0.3); } /* -------------------------------------------------------------------------- Dark Theme Card/Post Hover Effects -------------------------------------------------------------------------- */ :root:not([data-theme="light"]) .post { transition: background-color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition); } :root:not([data-theme="light"]) article.post:hover { border-bottom-color: rgba(212, 165, 116, 0.15); } :root:not([data-theme="light"]) .post-title a:hover { color: var(--accent-amber) !important; } /* -------------------------------------------------------------------------- Dark Theme - Read Next Section Enhancements -------------------------------------------------------------------------- */ :root:not([data-theme="light"]) .read-next-story.no-cover h2 { color: var(--text-heading); } :root:not([data-theme="light"]) .read-next-story.no-cover p { color: var(--text-secondary); } :root:not([data-theme="light"]) .read-next-story.no-cover .post:before { color: var(--text-muted); border-color: var(--border-primary); } :root:not([data-theme="light"]) .read-next-story.no-cover + .read-next-story.no-cover { border-left-color: var(--border-primary); } /* -------------------------------------------------------------------------- Scrollbar Styling -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* -------------------------------------------------------------------------- Theme Toggle Button Styling -------------------------------------------------------------------------- */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 10000; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-primary); background: var(--bg-elevated); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 2px 8px var(--shadow-soft); padding: 0; outline: none; } .theme-toggle:hover { transform: scale(1.1); border-color: var(--accent-amber-dim); box-shadow: var(--glow-amber); } .theme-toggle:active { transform: scale(0.95); } /* Sun icon (shown in dark mode, to switch to light) */ .theme-toggle .icon-sun { display: block; width: 20px; height: 20px; position: relative; } .theme-toggle .icon-sun::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent-amber); box-shadow: 0 0 0 2px transparent, 12px 0 0 1.5px var(--accent-amber), -12px 0 0 1.5px var(--accent-amber), 0 12px 0 1.5px var(--accent-amber), 0 -12px 0 1.5px var(--accent-amber), 8.5px 8.5px 0 1.5px var(--accent-amber), -8.5px 8.5px 0 1.5px var(--accent-amber), 8.5px -8.5px 0 1.5px var(--accent-amber), -8.5px -8.5px 0 1.5px var(--accent-amber); transition: all 0.3s ease; } /* Moon icon (shown in light mode, to switch to dark) */ .theme-toggle .icon-moon { display: none; width: 20px; height: 20px; position: relative; } .theme-toggle .icon-moon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: transparent; box-shadow: inset -6px 2px 0 0 #4A4A4A; transition: all 0.3s ease; } /* In light mode: show moon, hide sun */ [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Light mode toggle button appearance */ [data-theme="light"] .theme-toggle { background: #ffffff; border-color: #d0d0d0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } [data-theme="light"] .theme-toggle:hover { border-color: #999999; } /* -------------------------------------------------------------------------- Dark Theme - Mobile Menu Button Overrides -------------------------------------------------------------------------- */ @media only screen and (max-width: 500px) { :root:not([data-theme="light"]) .menu-button { color: rgba(255, 255, 255, 0.8); } :root:not([data-theme="light"]) .menu-button:hover { color: rgba(255, 255, 255, 1); } /* Move toggle button slightly for mobile */ .theme-toggle { bottom: 14px; right: 14px; width: 36px; height: 36px; } } /* -------------------------------------------------------------------------- Dark Theme - Buy Me Coffee button area styling -------------------------------------------------------------------------- */ :root:not([data-theme="light"]) .customfooter::before { background: var(--post-dot-bg); border-color: var(--post-dot-border); box-shadow: var(--post-dot-shadow) 0 0 0 5px; } /* -------------------------------------------------------------------------- Dark Theme - Subtle accent line under main header -------------------------------------------------------------------------- */ :root:not([data-theme="light"]) .main-header { border-bottom: 1px solid rgba(232, 65, 62, 0.15); } /* -------------------------------------------------------------------------- Music Embeds — Bandcamp, Discogs, SoundCloud -------------------------------------------------------------------------- */ /* Shared embed container */ .embed { margin: 1.5rem 0 2rem; } /* Bandcamp iframe */ .embed--bandcamp iframe { width: 100%; height: 42px; border: 0; border-radius: 4px; background: var(--bg-secondary); } /* SoundCloud iframe */ .embed--soundcloud iframe { width: 100%; height: 166px; border: 0; border-radius: 4px; background: var(--bg-secondary); } /* Embed label text */ .embed__label { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.02em; } /* Discogs link */ .discogs-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; color: var(--link-color); border: 1px solid var(--border-primary); border-radius: 4px; text-decoration: none; transition: border-color var(--theme-transition), color var(--theme-transition), background-color var(--theme-transition); } .discogs-link:hover { color: var(--link-hover); border-color: var(--border-secondary); background: var(--bg-secondary); } .discogs-link__icon { flex-shrink: 0; opacity: 0.7; } .discogs-link:hover .discogs-link__icon { opacity: 1; } /* Responsive: tighten spacing on mobile */ @media only screen and (max-width: 500px) { .embed { margin: 1.2rem 0 1.5rem; } .embed--soundcloud iframe { height: 140px; } }