/* * themes.css — earnwithyoutube.com * * All theme variants live in this single file. * The Worker injects data-theme on . * No JS needed on the client. No flash of wrong theme. * * Usage in your HTML: * * The Worker handles the rest. */ /* ─── Base reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } body { min-height: 100vh; transition: background 0.2s ease, color 0.2s ease; } main { padding-bottom: 56px; } .nav .container-wide { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 24px; } .nav .container-wide > a:first-child { margin-right: auto; font-weight: 700; } .hero { padding-top: 48px; } .hero > * + * { margin-top: 18px; } .hero > div { display: flex; gap: 12px; flex-wrap: wrap; } .kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; } .post-list { margin-top: 26px; } .post-list .post-card + .post-card { margin-top: 18px; } .post-card h2 a { text-decoration: none; } .post-card > * + * { margin-top: 10px; } .tag { display: inline-block; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .newsletter { margin-top: 48px; margin-bottom: 56px; text-align: center; } .newsletter > * + * { margin-top: 12px; } .newsletter-form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .newsletter-form input { min-width: min(100%, 280px); padding: 10px 12px; border: 1px solid currentColor; background: transparent; color: inherit; } footer.container-wide { border-top: 1px solid currentColor; padding: 22px 24px 30px; display: grid; gap: 8px; } footer nav { display: flex; gap: 14px; flex-wrap: wrap; } /* ─── VARIANT A: Broadsheet ───────────────────────────────────── */ body[data-theme="broadsheet"] { --bg: #F9F7F0; --text: #1A1A1A; --muted: #555555; --soft: #999999; --border: #1A1A1A; --surface: #F2F0E8; --accent: #1A1A1A; background: var(--bg); color: var(--text); font-family: 'Newsreader', Georgia, serif; font-size: 16px; line-height: 1.75; } body[data-theme="broadsheet"] * { border-radius: 0 !important; } body[data-theme="broadsheet"] h1, body[data-theme="broadsheet"] h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; } body[data-theme="broadsheet"] .kicker, body[data-theme="broadsheet"] .post-card > p:first-child, body[data-theme="broadsheet"] footer, body[data-theme="broadsheet"] .nav .container-wide::after { font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; } body[data-theme="broadsheet"] .nav { border-bottom: 3px double var(--border); background: var(--bg); } body[data-theme="broadsheet"] .nav .container-wide > a:first-child { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 4.8vw, 42px); } body[data-theme="broadsheet"] .nav .container-wide::after { content: "Vol. 1 · earnwithyoutube.com"; margin-left: auto; color: var(--muted); } body[data-theme="broadsheet"] h1 { font-size: clamp(40px, 6vw, 60px); border-bottom: 3px double var(--border); padding-bottom: 10px; } body[data-theme="broadsheet"] .hero p { color: var(--muted); } body[data-theme="broadsheet"] .hero .kicker { color: var(--soft); } body[data-theme="broadsheet"] .post-list { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } body[data-theme="broadsheet"] .post-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-right: 1px solid var(--soft); pointer-events: none; } body[data-theme="broadsheet"] .post-list .post-card { border-top: 2px solid var(--border); background: transparent; padding-top: 16px; } body[data-theme="broadsheet"] .post-card h2 { font-size: clamp(28px, 4vw, 36px); border-top: 2px solid var(--border); padding-top: 10px; } body[data-theme="broadsheet"] .tag { background: transparent; color: var(--text); border: 1px solid var(--text); padding: 1px 7px; } body[data-theme="broadsheet"] .btn-primary { border: 1px solid var(--border); padding: 10px 16px; font-family: 'IBM Plex Sans', sans-serif; } body[data-theme="broadsheet"] .newsletter { border: 2px solid var(--border); background: transparent; padding: 30px 22px; } body[data-theme="broadsheet"] footer.container-wide { border-top: 3px double var(--border); color: var(--muted); } /* ─── VARIANT B: Night Owl ────────────────────────────────────── */ body[data-theme="nightowl"] { --bg: #1C1A14; --text: #E8E4D4; --muted: #8A8670; --soft: #6B6855; --border: #2E2C24; --surface: #242218; --accent: #D4A843; --accent-fg: #1C1A14; background: var(--bg); color: var(--text); font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 1.7; } body[data-theme="nightowl"] h1, body[data-theme="nightowl"] h2, body[data-theme="nightowl"] h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: var(--text); line-height: 1.2; } body[data-theme="nightowl"] h1 { font-size: clamp(36px, 6vw, 54px); font-style: italic; } body[data-theme="nightowl"] .kicker { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; letter-spacing: 0.5px; color: var(--soft); } body[data-theme="nightowl"] .hero .kicker::after { content: ""; display: block; border-top: 1px solid var(--accent); margin-top: 10px; width: min(100%, 200px); } body[data-theme="nightowl"] .nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: rgba(28, 26, 20, 0.95); backdrop-filter: blur(10px); } body[data-theme="nightowl"] .post-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 24px; transition: border-color 0.2s; } body[data-theme="nightowl"] .post-card:hover { border-color: #3E3C30; } body[data-theme="nightowl"] .tag { background: rgba(212, 168, 67, 0.12); color: var(--accent); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 4px; padding: 3px 10px; } body[data-theme="nightowl"] .btn-primary { background: var(--accent); color: var(--accent-fg); border-radius: 8px; padding: 11px 20px; } body[data-theme="nightowl"] .newsletter { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px 22px; } body[data-theme="nightowl"] footer.container-wide { color: var(--muted); border-color: var(--border); } body[data-theme="nightowl"] footer a:hover { color: var(--accent); } /* ─── VARIANT C: Zine ─────────────────────────────────────────── */ body[data-theme="zine"] { --bg: #F2EE42; --text: #111111; --muted: #444444; --soft: #888800; --border: #111111; --surface: #E8E430; --accent: #111111; --accent-fg: #F2EE42; background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; font-size: 15px; line-height: 1.65; } body[data-theme="zine"] * { border-radius: 0 !important; } body[data-theme="zine"] h1, body[data-theme="zine"] h2, body[data-theme="zine"] h3 { font-family: 'Bebas Neue', 'Arial Black', sans-serif; letter-spacing: 0.5px; line-height: 0.95; } body[data-theme="zine"] h1 { font-size: clamp(52px, 10vw, 88px); } body[data-theme="zine"] h2 { font-size: clamp(32px, 6vw, 52px); } body[data-theme="zine"] h3 { font-size: clamp(22px, 4vw, 32px); } body[data-theme="zine"] .kicker { opacity: 0.5; letter-spacing: 2px; background: var(--text); color: var(--bg); width: 100%; padding: 8px 10px; } body[data-theme="zine"] .nav { border-bottom: 3px solid #111111; background: var(--bg); } body[data-theme="zine"] .nav .container-wide > a:first-child { font-family: 'Bebas Neue', sans-serif; font-size: clamp(30px, 6vw, 44px); } body[data-theme="zine"] .post-card { border: 2px solid #111111; background: var(--surface); padding: 20px; } body[data-theme="zine"] .post-card h2 { font-family: 'Bebas Neue', sans-serif; } body[data-theme="zine"] .post-card:hover { background: var(--text); color: var(--bg); } body[data-theme="zine"] .post-card:hover * { color: var(--bg); } body[data-theme="zine"] .tag { background: #111111; color: #F2EE42; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 8px; } body[data-theme="zine"] .btn-primary { background: #111111; color: #F2EE42; font-family: 'Bebas Neue', sans-serif; font-size: 18px; border: 2px solid #111111; padding: 10px 20px; } body[data-theme="zine"] .btn-primary:hover { background: #F2EE42; color: #111111; } body[data-theme="zine"] .newsletter { background: var(--text); color: var(--bg); padding: 40px 0; border: none; } body[data-theme="zine"] .newsletter .newsletter-form input { border-color: #F2EE42; color: #F2EE42; } body[data-theme="zine"] footer.container-wide { border-top: 2px solid #111111; } /* ─── Responsive ──────────────────────────────────────────────── */ @media (max-width: 640px) { .container, .container-wide { padding: 0 16px; } .nav .container-wide { gap: 10px; } .hero > div { width: 100%; } .hero > div .btn-primary { flex: 1; } body[data-theme="broadsheet"] .post-list { grid-template-columns: 1fr; gap: 20px; } body[data-theme="broadsheet"] .post-list::before { left: 0; right: 0; top: -10px; bottom: auto; border-right: none; border-top: 3px double var(--border); } } /* ─── Shared layout utilities ─────────────────────────────────── */ .container { max-width: 780px; margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }