/* ============================================= LudoSpectre — Shared Stylesheet Used by: LudoSpectre.html and all LudoSpectre article/hub pages Prefix: ludo- ============================================= */ /* ===== Dark Page Theme ===== */ /* Apply class="ludo-page" to on every LudoSpectre page */ .ludo-page { background-color: #1c1c1c; } /* Typography overrides for dark background */ .ludo-page h1 { color: #fdffff; text-shadow: none; } .ludo-page h2 { color: #fdffff; } .ludo-page h3 { color: #e0e0e0; } .ludo-page p { color: #b0b0b0; } .ludo-page strong { color: #e8e8e8; } .ludo-page em { color: #a871c4; } /* ===== Nav override — banner-less dark pages ===== */ /* When there is no banner, the header defaults to ghost-white. This keeps it dark and readable on ludo-page backgrounds. */ .ludo-page .site-header:not(.scrolled):not(.with-banner) { background-color: #1c1c1c; } .ludo-page .site-header:not(.scrolled):not(.with-banner) .site-title { color: #fdffff; } .ludo-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a { color: #fdffff; } .ludo-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a:hover, .ludo-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a:focus { color: #a871c4; } .ludo-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a.active { color: #fdffff; font-weight: 700; } /* ===== Article Pages — Section Heading ===== */ /* Used for in-text headings like "Welcome to LudoSpectre!" */ .ludo-article-heading { font-family: 'Press Start 2P', cursive; font-size: 1.1rem; color: #fdffff; text-align: center; line-height: 1.8; letter-spacing: 1px; margin-top: 0; margin-bottom: 2rem; text-transform: uppercase; } /* ===== Article Pages — Centred image ===== */ .ludo-image-center { display: flex; justify-content: center; margin: 1.5rem 0 2.5rem 0; } .ludo-image-center img { max-width: 100%; height: auto; display: block; } /* ===== Article Pages — Bullet list ===== */ .ludo-list { list-style: none; padding: 0; margin: 1rem 0 2rem 0; } .ludo-list li { position: relative; padding: 0.4rem 0 0.4rem 1.5rem; color: #b0b0b0; line-height: 1.8; font-size: 1rem; } .ludo-list li::before { content: '•'; position: absolute; left: 0; color: #76428a; font-size: 1.2rem; line-height: 1.5; } /* ===== Article Pages — Emoji section headings ===== */ /* e.g. 👻 Spectral Analyses, 🎃 Tales from the Crypt */ .ludo-emoji-heading { font-family: 'Press Start 2P', cursive; font-size: 0.75rem; color: #fdffff; line-height: 1.9; margin-top: 2rem; margin-bottom: 0.5rem; text-transform: uppercase; } /* ===== Article Pages — Italic intro subline ===== */ /* e.g. "Grab a lantern…" */ .ludo-intro-line { font-style: italic; color: #a871c4; text-align: center !important; font-size: 1.05rem; margin-bottom: 1.5rem !important; } /* ===== Article Pages — Sign-off block ===== */ .ludo-signoff { text-align: right; color: #b0b0b0; font-style: italic; margin-top: 2rem !important; line-height: 2; } /* ===== Text List — shared by Tales/Séances/Interviews hub pages ===== */ .ludo-text-list { list-style: none; padding: 0; margin: 2rem 0 1rem 0; } .ludo-text-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #2e2e2e; text-decoration: none; } .ludo-text-card:first-child { border-top: 1px solid #2e2e2e; } .ludo-text-card-body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .ludo-text-card-title { font-family: 'Press Start 2P', cursive; font-size: 0.7rem; color: #fdffff; line-height: 1.9; text-decoration: none; transition: color 0.3s ease; display: block; } .ludo-text-card-title:hover { color: #a871c4; } .ludo-text-card-series { font-size: 0.85rem; color: #777; font-style: italic; } .ludo-text-card-thumb { width: 90px; height: 70px; object-fit: cover; border-radius: 0.5rem; flex-shrink: 0; transition: opacity 0.3s ease; display: block; } .ludo-text-card-thumb:hover { opacity: 0.8; } @media (max-width: 480px) { .ludo-text-card-thumb { width: 70px; height: 55px; } .ludo-text-card-title { font-size: 0.6rem; } } /* ===== Hub Page — Tagline ===== */ .ludo-tagline { font-size: 1rem; color: #a871c4; text-align: center !important; font-style: italic; margin-top: 0 !important; margin-bottom: 3rem !important; line-height: 1.6; } /* ===== Hub Page — 3×2 Icon + Button Grid ===== */ .ludo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; margin: 2rem auto 3rem auto; max-width: 860px; } .ludo-item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.25rem; } /* Section icon — no frame, natural shape */ .ludo-icon { width: 150px; height: 150px; object-fit: contain; transition: transform 0.3s ease; display: block; } .ludo-icon:hover { transform: scale(1.08); } /* Button overrides for ludo items — pixel font, fixed width, wrapping allowed */ .ludo-item .btn { font-family: 'Press Start 2P', cursive; font-size: 0.6rem; width: 180px; white-space: normal; text-align: center; line-height: 1.7; padding: 0.75rem 0.75rem; } /* ===== Article Pages — Shared Layout ===== */ /* Divider line in dark theme */ .ludo-divider { border: none; border-top: 1px solid #333; margin: 2rem 0; } /* Series label (e.g. "Tales from the Crypt #1") */ .ludo-series-label { font-family: 'Press Start 2P', cursive; font-size: 0.65rem; color: #76428a; text-align: center; letter-spacing: 1px; display: block; margin-bottom: 2rem; } /* Internal purple link (dark page variant) */ .ludo-link { color: #a871c4; text-decoration: none; border-bottom: 1px solid #a871c4; transition: color 0.3s ease, border-bottom-color 0.3s ease; } .ludo-link:hover { color: #c49de0; border-bottom-color: #c49de0; } /* External Substack link */ .ludo-substack-link { font-size: 0.65rem; color: #76428a; text-decoration: underline; margin-left: 0.5rem; transition: color 0.3s ease; } .ludo-substack-link:hover { color: #a871c4; } /* Closing Press Start 2P callout line */ .ludo-closing { font-family: 'Press Start 2P', cursive; font-size: 0.75rem; color: #b0b0b0; text-align: center; line-height: 1.8; margin: 3rem 0 1rem 0; } /* Navigation buttons at the bottom of article pages */ .ludo-nav-buttons { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin: 2.5rem 0; } .ludo-nav-buttons .btn { font-family: 'Press Start 2P', cursive; font-size: 0.6rem; white-space: normal; text-align: center; line-height: 1.7; padding: 0.75rem 1rem; min-width: 160px; } /* ===== Blockquote (for article pages) ===== */ .ludo-page blockquote { border-left: 3px solid #76428a; margin: 1.5rem 0 1.5rem 1rem; padding: 0.5rem 1.5rem; color: #999; font-style: italic; } /* ===== Video embed ===== */ .ludo-video { max-width: 600px; width: 100%; display: block; border-radius: 0.5rem; } /* ===== Audio Player ===== */ .ludo-audio { max-width: 600px; margin: 1.5rem auto 2rem auto; display: block; width: 100%; accent-color: #76428a; border-radius: 0.5rem; } /* ===== Image captions ===== */ .ludo-caption { font-size: 0.75rem; color: #777; text-align: center; margin-top: 0.5rem; font-style: italic; } /* ===== Responsive ===== */ @media (max-width: 768px) { .ludo-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } .ludo-icon { width: 120px; height: 120px; } .ludo-item .btn { width: 150px; font-size: 0.55rem; } } @media (max-width: 480px) { .ludo-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } .ludo-icon { width: 100px; height: 100px; } .ludo-item .btn { width: 130px; font-size: 0.5rem; } .ludo-nav-buttons .btn { min-width: 130px; font-size: 0.55rem; } }