@tailwind base; @tailwind components; @tailwind utilities; /* ---------------------------------------------------------------------------- Day/night palette. JS sets data-phase={dawn|day|dusk|night} on . Each phase drives a small set of CSS vars; the page transitions smoothly thanks to the `transition-colors duration-1000` on . ---------------------------------------------------------------------------- */ :root, html[data-phase="day"] { --bg: #fff7e4; /* warm cream */ --bg-grad: #ffeec2; /* soft sun wash */ --card: #ffffff; --ink: #3a2e1f; --accent: #f2a541; /* sunshine yellow */ } html[data-phase="dawn"] { --bg: #ffe7d6; --bg-grad: #ffc9c9; --card: #fff4ea; --ink: #4a2e2a; --accent: #ff8a65; } html[data-phase="dusk"] { --bg: #ffd6a8; --bg-grad: #f7a07e; --card: #fff1de; --ink: #3d2417; --accent: #e6553a; } html[data-phase="night"] { --bg: #1a1f3a; --bg-grad: #2a3358; --card: #2d365a; --ink: #f1ecd8; /* moonlight */ --accent: #f9d976; /* lantern */ } @layer base { body { font-family: "Nunito", system-ui, sans-serif; } html { scroll-behavior: smooth; } /* Belt-and-braces: never let stray wide content push horizontal scroll on the whole page (the channel nav scrolls inside itself instead). */ html, body { overflow-x: hidden; } } @layer components { /* Channel pill row may exceed viewport on mobile once enough channels are configured. Let it scroll inside its own rounded container and hide the scrollbar chrome so it still reads as a clean pill. */ .pete-channel-nav { scrollbar-width: none; -ms-overflow-style: none; } .pete-channel-nav::-webkit-scrollbar { display: none; } } @layer utilities { .font-display { font-family: "Fredoka", "Nunito", system-ui, sans-serif; letter-spacing: -0.01em; } /* Soft signage shadow — Animal Crossing wooden plank vibe. */ .shadow-pete { box-shadow: 0 4px 0 rgba(60,40,20,0.10), 0 8px 24px rgba(60,40,20,0.08); } .shadow-pete-lg { box-shadow: 0 6px 0 rgba(60,40,20,0.12), 0 16px 32px rgba(60,40,20,0.12); } /* Per-channel theme colors. Kept as plain utilities so Tailwind doesn't need to know to safelist them. */ .bg-theme-gaming { background-color: #4caf7d; } .bg-theme-tech { background-color: #5aa9e6; } .bg-theme-politics { background-color: #e07a5f; } .bg-theme-eu { background-color: #003399; } .bg-theme-music { background-color: #b079d6; } .bg-theme-anime { background-color: #ec5e8a; } .bg-theme-foss { background-color: #d97706; } .bg-theme-kids { background-color: #14b8a6; } .bg-theme-finance { background-color: #10b981; } .bg-theme-lego { background-color: #d01012; } .text-theme-gaming { color: #2d8a5a; } .text-theme-tech { color: #2f7fb8; } .text-theme-politics { color: #b8523a; } .text-theme-eu { color: #003399; } .text-theme-music { color: #8a4fb8; } .text-theme-anime { color: #c33a6a; } .text-theme-foss { color: #b8530a; } .text-theme-kids { color: #0f766e; } .text-theme-finance { color: #059669; } .text-theme-lego { color: #b00d0e; } .decoration-theme-gaming { text-decoration-color: #4caf7d; } .decoration-theme-tech { text-decoration-color: #5aa9e6; } .decoration-theme-politics { text-decoration-color: #e07a5f; } .decoration-theme-eu { text-decoration-color: #003399; } .decoration-theme-music { text-decoration-color: #b079d6; } .decoration-theme-anime { text-decoration-color: #ec5e8a; } .decoration-theme-foss { text-decoration-color: #d97706; } .decoration-theme-kids { text-decoration-color: #14b8a6; } .decoration-theme-finance { text-decoration-color: #10b981; } .decoration-theme-lego { text-decoration-color: #d01012; } .border-theme-gaming { border-color: #4caf7d; } .border-theme-tech { border-color: #5aa9e6; } .border-theme-politics { border-color: #e07a5f; } .border-theme-eu { border-color: #003399; } .border-theme-music { border-color: #b079d6; } .border-theme-anime { border-color: #ec5e8a; } .border-theme-foss { border-color: #d97706; } .border-theme-kids { border-color: #14b8a6; } .border-theme-finance { border-color: #10b981; } .border-theme-lego { border-color: #d01012; } /* "Posted to Matrix" glow — soft pulsing aura in the channel's theme color. */ .glow-theme-gaming { box-shadow: 0 0 0 2px rgba(76,175,125,0.35), 0 0 24px 4px rgba(76,175,125,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-tech { box-shadow: 0 0 0 2px rgba(90,169,230,0.35), 0 0 24px 4px rgba(90,169,230,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-politics { box-shadow: 0 0 0 2px rgba(224,122,95,0.35), 0 0 24px 4px rgba(224,122,95,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-eu { box-shadow: 0 0 0 2px rgba(0,51,153,0.35), 0 0 24px 4px rgba(0,51,153,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-music { box-shadow: 0 0 0 2px rgba(176,121,214,0.35), 0 0 24px 4px rgba(176,121,214,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-anime { box-shadow: 0 0 0 2px rgba(236,94,138,0.35), 0 0 24px 4px rgba(236,94,138,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-foss { box-shadow: 0 0 0 2px rgba(217,119,6,0.35), 0 0 24px 4px rgba(217,119,6,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-kids { box-shadow: 0 0 0 2px rgba(20,184,166,0.35), 0 0 24px 4px rgba(20,184,166,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-finance { box-shadow: 0 0 0 2px rgba(16,185,129,0.35), 0 0 24px 4px rgba(16,185,129,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } .glow-theme-lego { box-shadow: 0 0 0 2px rgba(208,16,18,0.35), 0 0 24px 4px rgba(208,16,18,0.45); animation: pete-glow-pulse 2.4s ease-in-out infinite; } @keyframes pete-glow-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* "PAYWALLED" diagonal rubber stamp overlay — slapped across the whole card when the source is gated and no archive snapshot worked. The card stays clickable (link still goes to the original); the stamp is just visual warning. pointer-events:none keeps it from eating clicks. */ .paywall-stamp { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 5; background: rgba(255, 250, 240, 0.18); } .paywall-stamp::before { content: "PAYWALLED"; font-family: var(--font-display, ui-sans-serif), system-ui, sans-serif; font-weight: 900; font-size: clamp(1rem, 3.2vw, 1.75rem); letter-spacing: 0.12em; color: rgba(180, 30, 30, 0.85); border: 0.28rem double rgba(180, 30, 30, 0.85); padding: 0.3rem 0.9rem; transform: rotate(-15deg); text-shadow: 0 1px 0 rgba(255,255,255,0.4); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15); background: rgba(255, 240, 230, 0.55); border-radius: 0.25rem; /* slight roughness to mimic a real ink stamp */ filter: contrast(1.05); } } /* ---------------------------------------------------------------------------- Feed / reader mode. A focused, one-story-at-a-time overlay driven by reader.js. Left/right arrows page through the stories currently on screen, marking each read as it's shown. Styling leans on the phase palette vars so it recolours with day/night like everything else. ---------------------------------------------------------------------------- */ @layer components { .pete-reader-backdrop { position: absolute; inset: 0; background: rgba(20, 14, 6, 0.55); backdrop-filter: blur(6px); } html[data-phase="night"] .pete-reader-backdrop { background: rgba(6, 8, 20, 0.65); } .pete-reader-shell { position: relative; height: 100%; width: 100%; max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; padding: max(env(safe-area-inset-top), 0.75rem) 1rem 0.75rem; gap: 0.75rem; } .pete-reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: #fff; } .pete-reader-progress { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .pete-reader-nav { display: flex; align-items: center; gap: 0.4rem; } .pete-reader-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.7rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 700; font-size: 0.95rem; border: 2px solid rgba(255, 255, 255, 0.18); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease; } .pete-reader-btn:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); } .pete-reader-btn:disabled { opacity: 0.35; cursor: default; transform: none; } .pete-reader-btn-open { background: var(--accent); border-color: transparent; color: #1c1305; text-decoration: none; } .pete-reader-btn-open:hover { background: var(--accent); filter: brightness(1.08); } /* Active/pressed toolbar toggle (Listen while speaking, Aa while menu open). */ .pete-reader-btn[aria-pressed="true"], .pete-reader-btn[aria-expanded="true"] { background: var(--accent); border-color: transparent; color: #1c1305; } /* Text-options popover, anchored under the Aa button in the reader bar. */ .pete-reader-type { position: relative; display: inline-flex; } .pete-reader-typemenu[hidden] { display: none; } .pete-reader-typemenu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 10; width: 15rem; padding: 0.75rem; border-radius: 1rem; background: var(--card); color: var(--ink); border: 2px solid rgba(0, 0, 0, 0.08); box-shadow: 0 10px 30px rgba(20, 14, 6, 0.28); display: flex; flex-direction: column; gap: 0.6rem; } html[data-phase="night"] .pete-reader-typemenu { border-color: rgba(255, 255, 255, 0.12); } .pete-reader-typerow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .pete-reader-typelabel { font-size: 0.8rem; font-weight: 700; opacity: 0.7; } .pete-reader-typebtns { display: inline-flex; gap: 0.25rem; } .pete-reader-typebtns button { min-width: 2rem; height: 2rem; padding: 0 0.55rem; border-radius: 0.6rem; background: rgba(20, 14, 6, 0.06); color: var(--ink); font-weight: 700; font-size: 0.82rem; border: 2px solid transparent; cursor: pointer; transition: background 0.15s ease; } html[data-phase="night"] .pete-reader-typebtns button { background: rgba(255, 255, 255, 0.08); } .pete-reader-typebtns button:hover { background: rgba(20, 14, 6, 0.12); } .pete-reader-typebtns button.is-active { background: var(--accent); color: #1c1305; border-color: transparent; } .pete-reader-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 1.75rem; } .pete-reader-article { background: var(--card); color: var(--ink); border-radius: 1.75rem; border: 2px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 0 rgba(60, 40, 20, 0.12), 0 16px 32px rgba(60, 40, 20, 0.18); padding: clamp(1.25rem, 4vw, 2.5rem); } html[data-phase="night"] .pete-reader-article { border-color: rgba(255, 255, 255, 0.08); } .pete-reader-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.85rem; } .pete-reader-chip { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 9999px; padding: 0.15rem 0.65rem; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .pete-reader-source { font-weight: 700; opacity: 0.75; } .pete-reader-time { opacity: 0.55; } .pete-reader-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-bottom: 1rem; } .pete-reader-hero { width: 100%; border-radius: 1.1rem; margin-bottom: 1.25rem; background: rgba(0, 0, 0, 0.05); } /* Reader typography, driven by the Aa popover and persisted per-device. The size lives as a CSS var on the scroll container; font + paper are classes. */ .pete-reader-scroll { --reader-fs: 1.08rem; } .pete-reader-body { font-size: var(--reader-fs); line-height: 1.75; } .pete-reader-body p { margin-bottom: 1.05em; } .pete-reader-body p:last-child { margin-bottom: 0; } .pete-reader-scroll.is-size-s { --reader-fs: 0.98rem; } .pete-reader-scroll.is-size-m { --reader-fs: 1.08rem; } .pete-reader-scroll.is-size-l { --reader-fs: 1.22rem; } .pete-reader-scroll.is-size-xl { --reader-fs: 1.4rem; } .pete-reader-scroll.is-serif .pete-reader-body { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; } /* Sepia paper: warm background + ink regardless of day/night phase. */ .pete-reader-scroll.is-sepia .pete-reader-article { background: #f6ecd6; color: #4a3a28; border-color: rgba(74, 58, 40, 0.16); } .pete-reader-scroll.is-sepia .pete-reader-note { border-top-color: rgba(74, 58, 40, 0.18); opacity: 0.8; } .pete-reader-scroll.is-sepia .pete-reader-hero { background: rgba(74, 58, 40, 0.08); } /* Currently-spoken paragraph highlight while reading aloud. */ .pete-reader-body p.is-speaking { background: color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 0.4rem; box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--accent) 32%, transparent); } .pete-reader-note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.85rem; opacity: 0.7; } html[data-phase="night"] .pete-reader-note { border-color: rgba(255, 255, 255, 0.12); } .pete-reader-note a { color: var(--accent); font-weight: 700; } .pete-reader-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: clamp(2rem, 8vw, 4rem) 1rem; color: var(--ink); } .pete-reader-empty-emoji { font-size: 2.5rem; } /* Transient confirmation toast (e.g. "Link copied") shown over the reader. */ .pete-reader-toast { position: absolute; left: 50%; bottom: 4.5rem; transform: translate(-50%, 0.5rem); z-index: 20; padding: 0.5rem 0.9rem; border-radius: 9999px; background: rgba(20, 14, 6, 0.9); color: #fff; font-weight: 700; font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .pete-reader-toast.is-shown { opacity: 1; transform: translate(-50%, 0); } .pete-reader-hint { text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .pete-reader-hint kbd { font-family: ui-monospace, monospace; background: rgba(255, 255, 255, 0.16); border-radius: 0.3rem; padding: 0.05rem 0.3rem; } @media (max-width: 640px) { .pete-reader-hint { display: none; } /* With Listen/Share/Aa added, let the toolbar wrap instead of overflowing. */ .pete-reader-bar { flex-wrap: wrap; } .pete-reader-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem; } } /* "You might also like" rail, shown under the article in feed mode. Lives inside the reader's scroll area, below the article card. */ .pete-reader-related { width: 100%; margin: 0.85rem auto 0; } .pete-reader-related-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; color: #fff; margin: 0 0 0.6rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .pete-reader-related-grid { display: grid; gap: 0.6rem; } .pete-reader-related-card { display: flex; align-items: center; gap: 0.75rem; background: var(--card); color: var(--ink); border-radius: 1rem; border: 2px solid rgba(0, 0, 0, 0.06); padding: 0.6rem; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .pete-reader-related-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(60, 40, 20, 0.16); } html[data-phase="night"] .pete-reader-related-card { border-color: rgba(255, 255, 255, 0.08); } .pete-reader-related-thumb { width: 4.5rem; height: 3.25rem; flex-shrink: 0; object-fit: cover; border-radius: 0.6rem; background: rgba(0, 0, 0, 0.06); } .pete-reader-related-meta { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .pete-reader-related-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.7rem; } .pete-reader-related-source { font-weight: 700; opacity: 0.7; } .pete-reader-related-headline { font-weight: 700; line-height: 1.25; font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Grid treatment for stories already read in feed mode: dimmed, with a small corner check. Hovering restores full opacity so nothing feels lost. */ [data-story-card][data-read="1"] { opacity: 0.5; transition: opacity 0.2s ease; } [data-story-card][data-read="1"]:hover { opacity: 1; } [data-story-card][data-read="1"]::after { content: "✓"; position: absolute; top: 0.6rem; right: 0.6rem; z-index: 6; display: grid; place-items: center; height: 1.5rem; width: 1.5rem; border-radius: 9999px; background: rgba(20, 14, 6, 0.72); color: #fff; font-size: 0.8rem; font-weight: 700; } }