/* ─── FONTS ─────────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Milker';
src: url('/static/milker.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────────── */
:root {
--espresso: #1a0a00;
--dark-roast: #2c1503;
--medium-roast: #3d1e07;
--card-bg: #4a2c0a;
--light-roast: #7a4a1e;
--border-subtle: rgba(122, 74, 30, 0.4);
--cream: #f5e6c8;
--foam: #fffbf0;
--amber: #e8892b;
--caramel: #c4641a;
--muted: #a87850;
--left: #5b8dd9;
--left-glow: rgba(91, 141, 217, 0.15);
--center: #e8892b;
--center-glow: rgba(232, 137, 43, 0.15);
--right: #c94040;
--right-glow: rgba(201, 64, 64, 0.15);
--font-serif: 'Georgia', 'Times New Roman', serif;
--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-weight-bold: 800;
--radius: 8px;
--radius-lg: 12px;
--shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
--transition: 0.22s ease;
}
/* ─── LIGHT BREW THEME ───────────────────────────────────────────────────────── */
body.brew-app.light-brew {
--espresso: #fdf6ec;
--dark-roast: #f0e0c4;
--medium-roast: #e8d3b0;
--card-bg: #e0c89a;
--light-roast: #b8905a;
--border-subtle: rgba(160, 110, 50, 0.28);
--cream: #3d1e07;
--foam: #1a0a00;
--amber: #c4641a;
--caramel: #9e4e10;
--muted: #7a5030;
--shadow: 0 2px 16px rgba(140, 90, 30, 0.18);
--left: #2c5fa8;
--right: #a02020;
}
body.brew-app.light-brew {
background-color: var(--espresso);
background-image:
radial-gradient(ellipse 120% 60% at 50% 0%, #f0e0c4 0%, #fdf6ec 55%);
}
body.brew-app.light-brew .brew-header {
background: rgba(253, 246, 236, 0.82);
border-bottom-color: rgba(160, 110, 50, 0.25);
}
body.brew-app.light-brew .brew-footer {
border-top-color: rgba(160, 110, 50, 0.2);
}
body.brew-app.light-brew .drip-overlay {
background: rgba(253, 246, 236, 0.93);
}
body.brew-app.light-brew .drip-top,
body.brew-app.light-brew .drip-mug {
border-color: var(--light-roast);
}
body.brew-app.light-brew .drip-mug__handle {
border-color: var(--light-roast);
}
body.brew-app.light-brew .brew-station--left {
background: linear-gradient(160deg, #dce8f5 0%, var(--dark-roast) 30%);
}
body.brew-app.light-brew .brew-station--right {
background: linear-gradient(160deg, #f5dcdc 0%, var(--dark-roast) 30%);
}
body.brew-app.light-brew .auto-refresh-control {
background: rgba(0,0,0,0.04);
border-color: rgba(160, 110, 50, 0.28);
}
body.brew-app.light-brew ::-webkit-scrollbar-track { background: var(--espresso); }
body.brew-app.light-brew ::-webkit-scrollbar-thumb { background: var(--light-roast); }
/* Theme transitions */
body.brew-app {
transition: background-color 0.35s ease, color 0.35s ease;
}
.brew-header, .brew-station, .article-card, .drip-overlay, .special-panel {
transition: background 0.35s ease, border-color 0.35s ease;
}
/* ─── BODY ──────────────────────────────────────────────────────────────────── */
body.brew-app {
background-color: var(--espresso);
background-image:
radial-gradient(ellipse 120% 60% at 50% 0%, #3d1e07 0%, #1a0a00 55%);
color: var(--cream);
font-family: var(--font-serif);
min-height: 100vh;
line-height: 1.5;
/* Reserve space for fixed header. JS keeps --header-height in sync with the
actual header height so wrapped/multi-row layouts at narrow widths still
render content below the header instead of behind it. */
padding-top: var(--header-height, 132px);
}
/* ─── HEADER ────────────────────────────────────────────────────────────────── */
.brew-header {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 10px 24px;
border-bottom: 1px solid var(--border-subtle);
background: rgba(26, 10, 0, 0.7);
backdrop-filter: blur(8px);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
transform: translateY(0);
transition: transform 0.3s ease;
}
/* Top row of the header: brand centered, account/theme controls on the
right, hamburger on the right at mobile widths. */
.brew-header__top {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
width: 100%;
}
.brew-header.is-hidden {
transform: translateY(-100%);
}
/* Hamburger button — hidden by default; revealed only on mobile (see media
query below). Three stacked bars that animate into an X when the drawer
is open. */
.btn-mobile-menu {
display: none; /* desktop: hidden entirely */
background: transparent;
border: 1.5px solid var(--border-subtle);
border-radius: 10px;
width: 40px;
height: 36px;
padding: 0;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-mobile-menu:hover,
.btn-mobile-menu:focus-visible {
border-color: var(--amber);
background: rgba(232, 137, 43, 0.08);
}
.btn-mobile-menu__bar {
display: block;
width: 20px;
height: 2px;
background: var(--foam);
border-radius: 2px;
transition: transform 0.22s ease, opacity 0.22s ease;
transform-origin: center;
}
/* Animate the three bars into an X when the menu is open. */
.brew-header.is-menu-open .btn-mobile-menu__bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.brew-header.is-menu-open .btn-mobile-menu__bar:nth-child(2) {
opacity: 0;
}
.brew-header.is-menu-open .btn-mobile-menu__bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.brew-header__brand {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
}
.brew-header__brand .brew-title,
.brew-header__brand .brew-news-label {
transition: opacity 0.18s ease;
}
@media (hover: hover) {
.brew-header__brand:hover .brew-title,
.brew-header__brand:hover .brew-news-label { opacity: 0.75; }
}
.brew-logo {
font-size: 2.4rem;
line-height: 1;
filter: drop-shadow(0 0 8px rgba(232, 137, 43, 0.6));
}
.brew-title {
font-family: 'Milker', var(--font-serif);
font-size: 1.4rem;
font-weight: normal;
color: var(--foam);
letter-spacing: 0.01em;
line-height: 1.1;
-webkit-text-stroke: 0.5px var(--foam);
}
.brew-tagline {
font-family: var(--font-sans);
font-size: 0.75rem;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 2px;
}
.brew-news-label {
font-family: 'Milker', var(--font-serif);
font-size: 0.7rem;
font-weight: normal;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: -2px;
}
.brew-controls {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.brew-controls__side {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.brew-controls__side--left { justify-content: flex-end; }
.brew-controls__side--right { justify-content: flex-start; }
/* Account / sign-in slot on the LEFT edge of the header. Theme toggle
stays on the right (.controls-right). Both are absolutely positioned so
the centered .brew-header__brand isn't pushed off-center by their width. */
.controls-left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 10px;
}
.controls-right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.controls-right__row {
display: flex;
align-items: center;
gap: 10px;
}
.brew-timestamp {
font-family: var(--font-sans);
font-size: 0.72rem;
color: var(--muted);
}
/* ─── HOME BUTTON ───────────────────────────────────────────────────────────── */
.btn-home {
background: transparent;
color: var(--muted);
border: 1.5px solid var(--border-subtle);
border-radius: 24px;
padding: 6px 16px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: color var(--transition), border-color var(--transition), background var(--transition);
white-space: nowrap;
}
.btn-home:hover {
color: var(--foam);
border-color: var(--amber);
background: rgba(232, 137, 43, 0.08);
}
body.brew-app.light-brew .btn-home:hover {
color: var(--foam);
}
/* ─── BREW BUTTON ───────────────────────────────────────────────────────────── */
.btn-brew {
background: linear-gradient(135deg, var(--amber) 0%, var(--caramel) 100%);
color: var(--espresso);
border: none;
border-radius: 24px;
padding: 6px 16px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 4px 18px rgba(232, 137, 43, 0.4);
transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
white-space: nowrap;
}
.btn-brew:hover {
transform: scale(1.05);
box-shadow: 0 6px 28px rgba(232, 137, 43, 0.6);
}
.btn-brew:active { transform: scale(0.96); }
.btn-brew:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ─── ABOUT BUTTON (now in footer; kept as a class for the footer link) ──── */
/* `.btn-about` rules removed — the About control lives in the footer as
`.brew-footer__link` now. JS still references #btn-about for the modal. */
/* ─── ABOUT MODAL ────────────────────────────────────────────────────────────── */
.about-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s ease;
}
.about-modal.hidden {
opacity: 0;
pointer-events: none;
}
.about-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 5, 0, 0.65);
backdrop-filter: blur(4px);
}
.about-modal__card {
position: relative;
z-index: 1;
max-width: 520px;
width: calc(100% - 48px);
background: var(--surface-2, #2a1a0e);
color: var(--text, #f4e7d3);
border: 1px solid var(--border-subtle, rgba(255, 220, 180, 0.15));
border-radius: 14px;
padding: 28px 28px 24px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
font-family: var(--font-sans);
line-height: 1.55;
}
.about-modal__title {
margin: 0 0 12px;
font-family: var(--font-sans);
font-size: 1.6rem;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--amber, #e8892b);
}
.about-modal__card p {
margin: 0 0 12px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.98rem;
line-height: 1.55;
}
.about-modal__footnote {
margin-top: 14px !important;
font-size: 0.82rem !important;
opacity: 0.7;
font-style: italic;
}
.about-modal__close {
position: absolute;
top: 8px;
right: 12px;
background: transparent;
border: none;
color: var(--text-soft, #d8c8b3);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.about-modal__close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--amber, #e8892b);
}
body.brew-app.light-brew .about-modal__card {
background: #fdf6ec;
color: #3a2510;
}
body.brew-app.light-brew .about-modal__close {
color: #6a4a25;
}
/* ─── SIGN-IN MODAL EXTRAS ───────────────────────────────────────────────────── */
/* The signin modal reuses .about-modal scaffolding; these styles only apply
to the bits unique to it: the Google button + a slightly tighter card. */
.about-modal__card--signin {
max-width: 420px;
text-align: center;
}
/* Primary "Create an account" CTA — visually leads over the Continue with
Google option, since new visitors are the audience for this modal. Both
buttons hit the same Google OAuth endpoint (the backend upserts the user
on first sign-in), so the distinction is purely UX framing. */
.btn-create-account {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 18px auto 10px;
padding: 12px 26px;
background: #f5a957;
color: #1f140b;
border: none;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.98rem;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
box-shadow: 0 2px 6px rgba(245, 169, 87, 0.28);
}
.btn-create-account:hover {
background: #f9b96e;
box-shadow: 0 3px 10px rgba(245, 169, 87, 0.38);
}
.btn-create-account:active { transform: scale(0.97); }
body.brew-app.light-brew .btn-create-account {
background: #a86932;
color: #fdf6e3;
box-shadow: 0 2px 6px rgba(168, 105, 50, 0.25);
}
body.brew-app.light-brew .btn-create-account:hover {
background: #b8783f;
box-shadow: 0 3px 10px rgba(168, 105, 50, 0.35);
}
.btn-google-signin {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 6px auto;
padding: 11px 22px;
background: #ffffff;
color: #1f1f1f;
border: 1px solid #dadce0;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn-google-signin:hover {
background: #f8f9fa;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.btn-google-signin:active { transform: scale(0.98); }
.btn-google-signin__icon { flex-shrink: 0; }
/* ─── AUTH TOAST ─────────────────────────────────────────────────────────────── */
/* Tiny banner that flashes after the OAuth redirect lands back on /. The JS
sets the text + .auth-toast--ok or .auth-toast--err. */
.auth-toast {
position: fixed;
top: calc(var(--header-height, 80px) + 12px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
z-index: 1001;
padding: 10px 18px;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.88rem;
background: rgba(40, 24, 12, 0.96);
color: var(--text, #f4e7d3);
border: 1px solid rgba(255, 220, 180, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.auth-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.auth-toast--ok { border-color: rgba(74, 167, 87, 0.55); }
.auth-toast--err { border-color: rgba(220, 80, 60, 0.55); }
.auth-toast.hidden { display: none; }
/* ─── SIGN-IN BUTTON (header, logged-out state) ──────────────────────────────── */
.btn-signin.hidden { display: none; }
.account-chip.hidden { display: none; }
.signin-modal.hidden { display: none; }
.btn-signin {
background: transparent;
color: var(--amber, #e8892b);
border: 1px solid rgba(232, 137, 43, 0.5);
border-radius: 24px;
padding: 5px 14px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn-signin:hover {
background: rgba(232, 137, 43, 0.16);
transform: scale(1.04);
}
.btn-signin:active { transform: scale(0.97); }
body.brew-app.light-brew .btn-signin {
color: #8a4a18;
border-color: rgba(160, 110, 50, 0.55);
}
body.brew-app.light-brew .btn-signin:hover {
background: rgba(232, 137, 43, 0.22);
}
/* ─── ACCOUNT CHIP (header, logged-in state) ─────────────────────────────────── */
.account-chip {
position: relative;
}
.account-chip__trigger {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--text-soft, #d8c8b3);
border: 1px solid var(--border-subtle, rgba(255, 220, 180, 0.18));
border-radius: 24px;
padding: 3px 12px 3px 3px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
}
.account-chip__trigger:hover {
background: rgba(232, 137, 43, 0.10);
border-color: rgba(232, 137, 43, 0.4);
}
/* Avatar removed from the chip — only the name shows. Kept the rule
commented-style override so any cached HTML referencing the ![]()
doesn't
leave a stray box in the header. */
.account-chip__avatar {
display: none;
}
.account-chip__name {
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* With the avatar gone, give the trigger symmetric padding so the name
isn't hugging the left edge of the pill. */
.account-chip__trigger {
padding: 5px 14px;
}
.account-menu {
position: absolute;
top: calc(100% + 6px);
/* Anchor to the chip's LEFT edge so the dropdown opens rightward into
the viewport. The chip lives on the left side of the header — anchoring
to its right edge sent the menu off-screen to the left. */
left: 0;
right: auto;
min-width: 220px;
max-width: calc(100vw - 24px);
background: var(--surface-2, #2a1a0e);
color: var(--text, #f4e7d3);
border: 1px solid var(--border-subtle, rgba(255, 220, 180, 0.18));
border-radius: 10px;
padding: 8px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
z-index: 200;
}
.account-menu.hidden { display: none; }
.account-menu__email {
font-size: 0.78rem;
opacity: 0.7;
padding: 6px 10px 8px;
border-bottom: 1px solid var(--border-subtle, rgba(255, 220, 180, 0.12));
margin-bottom: 6px;
word-break: break-all;
}
.account-menu__item {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: none;
color: var(--text, #f4e7d3);
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.88rem;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
}
.account-menu__item:hover {
background: rgba(232, 137, 43, 0.14);
color: var(--amber, #e8892b);
}
/* Destructive item — clearly differentiated from Sign out so users can't
confuse "log out for now" with "wipe my account forever". */
.account-menu__item--danger {
color: #ff7a6e;
margin-top: 2px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 10px;
}
.account-menu__item--danger:hover {
background: rgba(255, 70, 60, 0.14);
color: #ff8a7e;
}
body.brew-app.light-brew .account-menu__item--danger {
color: #c0392b;
border-top-color: rgba(0, 0, 0, 0.08);
}
body.brew-app.light-brew .account-menu__item--danger:hover {
background: rgba(192, 57, 43, 0.12);
color: #b03020;
}
/* ─── DELETE-ACCOUNT CONFIRMATION MODAL ───────────────────────────────── */
.about-modal__card--danger {
max-width: 460px;
border-top: 4px solid #c0392b;
}
.delete-account-input {
display: block;
width: 100%;
margin: 14px 0 18px;
padding: 9px 12px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 122, 110, 0.45);
border-radius: 8px;
color: inherit;
font-family: var(--font-sans);
font-size: 0.95rem;
letter-spacing: 0.08em;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
}
.delete-account-input:focus {
border-color: #ff7a6e;
background: rgba(0, 0, 0, 0.32);
}
body.brew-app.light-brew .delete-account-input {
background: #fff;
border-color: rgba(192, 57, 43, 0.5);
color: #3a2510;
}
.delete-account-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.btn-delete-cancel,
.btn-delete-confirm {
padding: 8px 16px;
border-radius: 20px;
border: none;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform 0.18s ease, background 0.2s ease, opacity 0.2s ease;
}
.btn-delete-cancel {
background: transparent;
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-delete-cancel:hover { transform: scale(1.04); background: rgba(255, 255, 255, 0.06); }
body.brew-app.light-brew .btn-delete-cancel {
border-color: rgba(0, 0, 0, 0.25);
}
body.brew-app.light-brew .btn-delete-cancel:hover {
background: rgba(0, 0, 0, 0.05);
}
.btn-delete-confirm {
background: #c0392b;
color: #fff;
}
.btn-delete-confirm:hover { transform: scale(1.04); background: #d04738; }
.btn-delete-confirm:active { transform: scale(0.97); }
.btn-delete-confirm:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
background: #6e3a35;
}
/* Reuse the same hidden behaviour as the other about-modal variants. */
#delete-account-modal.hidden { display: none; }
/* ─── PORTFOLIO: "Cite All" button + Citations modal ───────────────────────── */
.portfolio-actions {
display: flex;
justify-content: flex-end;
padding: 0 4px 8px;
}
.btn-cite-portfolio {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border-radius: 22px;
border: none;
background: linear-gradient(135deg, var(--amber), var(--caramel));
color: var(--espresso);
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.04em;
cursor: pointer;
box-shadow: 0 2px 8px rgba(232, 137, 43, 0.32);
transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.btn-cite-portfolio::before {
content: "❝";
font-size: 1rem;
line-height: 1;
}
.btn-cite-portfolio:hover { transform: scale(1.04); box-shadow: 0 3px 12px rgba(232, 137, 43, 0.45); }
.btn-cite-portfolio:active { transform: scale(0.97); }
.about-modal__card--citations { max-width: 640px; }
.citations-modal__hint {
font-size: 0.88rem;
color: var(--muted);
margin: 4px 0 12px;
}
/* MLA / APA format selector — two pill buttons above the textarea. The
active pill uses the same amber/caramel gradient as the copy CTA so the
two controls feel like a matched set. */
.citations-format {
display: inline-flex;
gap: 6px;
padding: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-subtle);
border-radius: 22px;
margin: 0 0 12px;
}
body.brew-app.light-brew .citations-format {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(80, 50, 20, 0.2);
}
.citations-format__btn {
background: transparent;
color: var(--text-soft, #d8c8b3);
border: none;
border-radius: 18px;
padding: 6px 16px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.citations-format__btn:hover {
color: var(--amber, #e8892b);
}
.citations-format__btn.is-active {
background: linear-gradient(135deg, var(--amber, #e8892b) 0%, var(--caramel, #c46a16) 100%);
color: #1a0a00;
box-shadow: 0 2px 8px rgba(232, 137, 43, 0.35);
}
body.brew-app.light-brew .citations-format__btn {
color: rgba(80, 50, 20, 0.85);
}
body.brew-app.light-brew .citations-format__btn.is-active {
color: #1a0a00;
}
.citations-textarea {
display: block;
width: 100%;
min-height: 260px;
max-height: 50vh;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border-subtle);
border-radius: 10px;
color: inherit;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.85rem;
line-height: 1.5;
resize: vertical;
outline: none;
white-space: pre-wrap;
box-sizing: border-box;
}
body.brew-app.light-brew .citations-textarea {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(80, 50, 20, 0.2);
}
.citations-textarea:focus {
border-color: var(--amber);
}
.citations-modal__actions {
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.btn-citations-copy {
padding: 9px 20px;
border-radius: 22px;
border: none;
background: linear-gradient(135deg, var(--amber), var(--caramel));
color: var(--espresso);
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.03em;
cursor: pointer;
box-shadow: 0 2px 8px rgba(232, 137, 43, 0.32);
transition: transform 0.18s ease, background 0.2s ease;
}
.btn-citations-copy:hover { transform: scale(1.04); }
.btn-citations-copy:active { transform: scale(0.97); }
.btn-citations-copy.is-copied {
background: #2e7d4f;
color: #fff;
box-shadow: 0 2px 8px rgba(46, 125, 79, 0.4);
}
#citations-modal.hidden { display: none; }
body.brew-app.light-brew .account-chip__trigger {
color: rgba(80, 50, 20, 0.9);
border-color: rgba(160, 110, 50, 0.35);
}
body.brew-app.light-brew .account-menu {
background: #fdf6ec;
color: #3a2510;
}
body.brew-app.light-brew .account-menu__item {
color: #3a2510;
}
/* ─── THEME TOGGLE ───────────────────────────────────────────────────────────── */
.theme-toggle-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.theme-toggle-label {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.theme-toggle {
display: flex;
align-items: center;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-subtle);
border-radius: 22px;
padding: 3px;
gap: 2px;
flex-shrink: 0;
}
body.light-brew .theme-toggle {
background: rgba(0,0,0,0.05);
}
.theme-btn {
display: flex;
align-items: center;
gap: 5px;
border: none;
border-radius: 18px;
padding: 4px 10px;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
background: transparent;
color: var(--muted);
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
white-space: nowrap;
}
.theme-btn__icon { font-size: 0.85rem; line-height: 1; }
.theme-btn.is-active {
background: linear-gradient(135deg, var(--amber), var(--caramel));
color: var(--espresso);
box-shadow: 0 2px 8px rgba(232,137,43,0.35);
}
body.light-brew .theme-btn.is-active {
color: #fff8f0;
}
.theme-btn:not(.is-active):hover {
color: var(--cream);
background: rgba(255,255,255,0.07);
}
body.light-brew .theme-btn:not(.is-active):hover {
color: var(--foam);
background: rgba(0,0,0,0.06);
}
/* ─── SPECIAL BREW BUTTONS ──────────────────────────────────────────────────── */
.btn-special {
display: flex;
align-items: center;
gap: 7px;
border: none;
border-radius: 24px;
padding: 6px 16px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
white-space: nowrap;
}
.btn-special__icon { font-size: 1rem; line-height: 1; }
/* Unified hover effect — all special buttons grow on hover */
.btn-special {
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.22s ease,
opacity var(--transition);
}
.btn-special:hover { transform: scale(1.12); }
.btn-special:active { transform: scale(0.96); }
.btn-special:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* Unified cream styling — every category button shares the same look. */
.btn-world,
.btn-economic,
.btn-health,
.btn-entertainment,
.btn-politics,
.btn-sports {
background: linear-gradient(135deg, #f5e6c8 0%, #e8d4a8 100%);
color: #1a0a00;
box-shadow: 0 4px 16px rgba(245, 230, 200, 0.25);
}
.btn-world:hover,
.btn-economic:hover,
.btn-health:hover,
.btn-entertainment:hover,
.btn-politics:hover,
.btn-sports:hover {
box-shadow: 0 8px 28px rgba(245, 230, 200, 0.45);
}
.btn-world.active,
.btn-economic.active,
.btn-health.active,
.btn-entertainment.active,
.btn-politics.active,
.btn-sports.active {
background: linear-gradient(135deg, #fffbf0 0%, #f5e6c8 100%);
box-shadow: 0 0 0 2px rgba(245, 230, 200, 0.6);
}
/* Hover tooltip for buttons with data-tooltip */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(26, 10, 0, 0.88);
color: #fffbf0;
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.03em;
white-space: nowrap;
padding: 5px 10px;
border-radius: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 200;
}
[data-tooltip]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
body.brew-app.light-brew [data-tooltip]::after {
background: rgba(30, 15, 5, 0.9);
color: #fffbf0;
}
/* ─── SPECIAL PANEL ──────────────────────────────────────────────────────────── */
.special-panel {
max-width: 1440px;
margin: 0 auto;
padding: 20px 24px 8px;
animation: panel-appear 0.3s ease both;
}
.special-panel.hidden { display: none; }
@keyframes panel-appear {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.special-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.special-panel__title-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.special-panel__icon { font-size: 1.5rem; line-height: 1; }
.special-panel__title {
font-family: var(--font-sans);
font-size: 1.1rem;
font-weight: 800;
color: var(--foam);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.special-panel__chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.special-panel__progress {
margin-bottom: 18px;
}
.btn-close-special {
background: rgba(255,255,255,0.07);
border: 1px solid var(--border-subtle);
color: var(--muted);
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition), color var(--transition);
flex-shrink: 0;
}
.btn-close-special:hover { background: rgba(255,255,255,0.14); color: var(--foam); }
/* Articles grid inside special panel */
.special-panel__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
padding-bottom: 24px;
}
/* Unified cream panel accent — all special panels share the same look. */
.special-panel--economic .brew-progress-fill,
.special-panel--health .brew-progress-fill,
.special-panel--entertainment .brew-progress-fill,
.special-panel--politics .brew-progress-fill,
.special-panel--sports .brew-progress-fill,
.special-panel--world .brew-progress-fill {
background: linear-gradient(90deg, #f5e6c8, #e8d4a8);
}
.special-panel--economic .card-source-name,
.special-panel--health .card-source-name,
.special-panel--entertainment .card-source-name,
.special-panel--politics .card-source-name,
.special-panel--sports .card-source-name,
.special-panel--world .card-source-name {
color: #f5e6c8;
}
.special-panel--economic .article-card:hover,
.special-panel--health .article-card:hover,
.special-panel--entertainment .article-card:hover,
.special-panel--politics .article-card:hover,
.special-panel--sports .article-card:hover,
.special-panel--world .article-card:hover {
border-left-color: #f5e6c8;
}
/* Divider between special panel and columns */
.special-panel + main.brew-columns {
border-top: 1px solid var(--border-subtle);
padding-top: 24px;
}
/* ─── THE HOMEBREW (AI-generated featured article) ─────────────────────────── */
/* Header button: distinct deep-purple → copper gradient so it reads as
"special" relative to the cream/amber category buttons. */
.btn-home.btn-homebrew {
/* No border — the inherited 1.5px transparent border caused a hairline
cutoff at the right edge where the gradient terminated. Compensate the
missing 3px (1.5px × 2 sides) with padding so the button stays the same
size as its non-homebrew siblings. background-origin/clip pinned to
border-box ensures the gradient fills every pixel including the radius. */
background: linear-gradient(135deg, #4a2c6d 0%, #b85c1a 100%);
background-origin: border-box;
background-clip: border-box;
color: var(--foam);
border: none;
padding: 7.5px 17.5px;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 14px rgba(74, 44, 109, 0.35);
}
.btn-home.btn-homebrew:hover {
background: linear-gradient(135deg, #5a3680 0%, #cf6b22 100%);
color: var(--foam);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(184, 92, 26, 0.45);
}
.btn-home.btn-homebrew.active {
outline: 2px solid rgba(245, 230, 200, 0.5);
outline-offset: 2px;
}
body.brew-app.light-brew .btn-home.btn-homebrew {
color: var(--foam);
}
/* Panel accent: match the button gradient on the progress bar + chips. */
.special-panel--homebrew .brew-progress-fill {
background: linear-gradient(90deg, #4a2c6d, #b85c1a);
}
.special-panel--homebrew .special-panel__icon {
filter: drop-shadow(0 1px 2px rgba(74, 44, 109, 0.4));
}
/* Featured article: single readable column, longform reading layout. */
.featured-article {
max-width: 720px;
margin: 8px auto 24px;
padding: 8px 4px 24px;
}
.featured-article.hidden { display: none; }
.featured-article__headline {
font-family: var(--font-sans);
font-weight: 900;
font-size: clamp(1.4rem, 2.6vw, 2rem);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 8px;
color: var(--foam);
}
.featured-article__meta {
font-family: var(--font-sans);
font-size: 0.78rem;
color: var(--muted);
margin: 0 0 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.featured-article__disclaimer {
display: inline-block;
margin-top: 6px;
font-size: 0.72rem;
font-style: italic;
font-weight: 400;
letter-spacing: 0.01em;
text-transform: none;
color: var(--muted);
opacity: 0.85;
}
.featured-article__body p {
font-size: 1.02rem;
line-height: 1.65;
color: var(--foam);
margin: 0 0 1.05em;
}
.featured-article__citations-label {
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin: 22px 0 8px;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
}
.featured-article__citations {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.featured-article__citations li {
font-size: 0.92rem;
line-height: 1.4;
}
.featured-article__citations a {
color: #d68a3e;
text-decoration: none;
transition: color var(--transition);
}
.featured-article__citations a:hover {
color: #f5b66a;
text-decoration: underline;
}
.featured-article__citation-source {
font-weight: 800;
color: var(--muted);
margin-right: 6px;
}
.featured-article__error {
padding: 20px;
border: 1px dashed var(--border-subtle);
border-radius: 8px;
color: var(--muted);
text-align: center;
font-style: italic;
}
/* Light-roast overrides — the featured-article colors already reference
theme tokens (--foam, --muted) so most of it adapts automatically; just
keep the citation accent legible on a cream background. */
body.brew-app.light-brew .featured-article__citations a { color: #8a3f00; }
body.brew-app.light-brew .featured-article__citations a:hover { color: #c25a10; }
/* ─── AUTO-REFRESH TOGGLE ──────────────────────────────────────────────────── */
.auto-refresh-control {
display: flex;
align-items: center;
gap: 7px;
padding: 4px 10px 4px 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
border-radius: 20px;
transition: border-color var(--transition), background var(--transition);
}
.auto-refresh-control:has(input:checked) {
border-color: rgba(232, 137, 43, 0.45);
background: rgba(232, 137, 43, 0.07);
}
/* Toggle switch */
.toggle-switch {
position: relative;
display: inline-block;
cursor: pointer;
flex-shrink: 0;
}
.toggle-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-track {
display: block;
width: 30px;
height: 17px;
background: var(--light-roast);
border-radius: 10px;
position: relative;
transition: background 0.25s ease;
}
.toggle-switch input:checked ~ .toggle-track {
background: var(--amber);
}
.toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 13px;
height: 13px;
background: var(--foam);
border-radius: 50%;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.22s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
transform: translateX(13px);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.toggle-switch:hover .toggle-track {
filter: brightness(1.15);
}
/* Label text */
.auto-refresh-info {
display: flex;
flex-direction: column;
line-height: 1.2;
user-select: none;
}
.auto-refresh-name {
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 600;
color: var(--cream);
letter-spacing: 0.01em;
}
.auto-refresh-interval {
font-family: var(--font-sans);
font-size: 0.58rem;
color: var(--muted);
letter-spacing: 0.03em;
transition: color var(--transition);
}
.auto-refresh-control:has(input:checked) .auto-refresh-interval {
color: var(--amber);
}
/* ─── INTRO SPLASH ──────────────────────────────────────────────────────────── */
.intro-overlay {
position: fixed;
inset: 0;
background: var(--espresso);
background-image: radial-gradient(ellipse 120% 80% at 50% 40%, #3d1e07 0%, #1a0a00 70%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 600;
transition: opacity 0.7s ease;
}
.intro-overlay.is-fading {
opacity: 0;
pointer-events: none;
}
.intro-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.intro-logo {
font-family: 'Milker', var(--font-serif);
font-size: clamp(5rem, 14vw, 9.5rem);
font-weight: normal;
color: var(--foam);
letter-spacing: 0.06em;
line-height: 1;
-webkit-text-stroke: 1px rgba(232, 137, 43, 0.45);
animation: intro-zoom-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes intro-zoom-in {
from {
opacity: 0;
transform: scale(0.4);
letter-spacing: -0.04em;
}
to {
opacity: 1;
transform: scale(1);
letter-spacing: 0.06em;
}
}
.intro-sub {
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--muted);
letter-spacing: 0.16em;
text-transform: uppercase;
animation: intro-sub-in 1s 0.6s ease both;
}
@keyframes intro-sub-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 0.75; transform: translateY(0); }
}
/* Light roast override */
body.brew-app.light-brew .intro-overlay {
background: #fdf6ec;
background-image: radial-gradient(ellipse 120% 80% at 50% 40%, #f0e0c4 0%, #fdf6ec 70%);
}
body.brew-app.light-brew .intro-logo {
color: var(--foam);
-webkit-text-stroke: 1px rgba(196, 100, 26, 0.4);
}
/* ─── DRIP OVERLAY ──────────────────────────────────────────────────────────── */
.drip-overlay {
position: fixed;
inset: 0;
background: rgba(26, 10, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 500;
transition: opacity 0.35s ease;
}
.drip-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.drip-machine {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Top reservoir of the coffee maker */
.drip-top {
width: 56px;
height: 20px;
background: var(--light-roast);
border-radius: 6px 6px 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.drip-reservoir {
width: 36px;
height: 10px;
background: var(--medium-roast);
border-radius: 3px;
}
/* Drip stream between machine and mug */
.drip-stream {
width: 4px;
background: linear-gradient(to bottom, var(--amber), var(--caramel));
border-radius: 2px;
animation: drip-fall 1.6s cubic-bezier(0.3, 0, 0.8, 1) infinite;
}
@keyframes drip-fall {
0% { height: 0; opacity: 1; transform: scaleX(1); }
55% { height: 52px; opacity: 1; transform: scaleX(1); }
80% { height: 52px; opacity: 0.6; transform: scaleX(0.6); }
100% { height: 52px; opacity: 0; transform: scaleX(0); }
}
/* Mug */
.drip-mug {
width: 64px;
height: 54px;
border: 3px solid var(--light-roast);
border-radius: 0 0 14px 14px;
border-top: none;
position: relative;
overflow: hidden;
background: var(--dark-roast);
}
.drip-mug__handle {
position: absolute;
right: -14px;
top: 10px;
width: 14px;
height: 22px;
border: 3px solid var(--light-roast);
border-left: none;
border-radius: 0 8px 8px 0;
}
/* Coffee filling up inside mug */
.drip-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0%;
background: linear-gradient(to top, var(--caramel) 0%, var(--amber) 100%);
}
.drip-fill.is-filling {
animation: mug-fill 3s cubic-bezier(0.2, 0, 0.4, 1) forwards;
}
@keyframes mug-fill {
0% { height: 0%; }
100% { height: 88%; }
}
/* Steam wisps */
.drip-steam {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
}
.drip-steam span {
display: block;
width: 3px;
height: 14px;
border-radius: 3px;
background: rgba(255, 251, 240, 0.25);
animation: steam-rise 2s ease-in-out infinite;
}
.drip-steam span:nth-child(2) { animation-delay: 0.4s; }
.drip-steam span:nth-child(3) { animation-delay: 0.8s; }
@keyframes steam-rise {
0% { opacity: 0; transform: translateY(0) scaleX(1); }
40% { opacity: 0.7; transform: translateY(-8px) scaleX(1.3); }
100% { opacity: 0; transform: translateY(-20px) scaleX(0.6); }
}
.drip-label {
margin-top: 28px;
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
animation: label-pulse 1.8s ease-in-out infinite;
}
@keyframes label-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ─── THREE-COLUMN GRID ─────────────────────────────────────────────────────── */
.brew-columns {
display: flex;
align-items: flex-start; /* columns shrink to their own content height */
gap: 24px;
max-width: 1440px;
margin: 0 auto;
padding: 28px 24px 48px;
}
.brew-columns > .brew-station {
flex: 1 1 0;
min-width: 0;
}
@media (max-width: 960px) {
.brew-columns { flex-direction: column; }
/* Mobile/narrow: show only the column matching the active tab. */
.brew-columns[data-mobile-column="left"] > .brew-station--center,
.brew-columns[data-mobile-column="left"] > .brew-station--right,
.brew-columns[data-mobile-column="center"] > .brew-station--left,
.brew-columns[data-mobile-column="center"] > .brew-station--right,
.brew-columns[data-mobile-column="right"] > .brew-station--left,
.brew-columns[data-mobile-column="right"] > .brew-station--center {
display: none;
}
}
/* ─── COLUMN TABS (mobile / narrow screens only) ───────────────────────────── */
.column-tabs {
display: none; /* hidden by default; shown only at ≤960px */
}
@media (max-width: 960px) {
.column-tabs {
display: flex;
gap: 8px;
justify-content: center;
padding: 14px 16px 0;
max-width: 1440px;
margin: 0 auto;
}
.column-tab {
flex: 1 1 0;
max-width: 180px;
background: transparent;
color: var(--text-soft, #d8c8b3);
border: 1px solid var(--border-subtle, rgba(255, 220, 180, 0.18));
border-radius: 22px;
padding: 8px 12px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.column-tab:hover { transform: scale(1.03); }
/* Each tab adopts the column's lean accent when active. */
.column-tab[data-column="left"].is-active {
background: linear-gradient(135deg, #4a7eff 0%, #2a4ec7 100%);
color: #fff;
border-color: transparent;
}
.column-tab[data-column="center"].is-active {
background: linear-gradient(135deg, var(--amber, #e8892b) 0%, var(--caramel, #c46a16) 100%);
color: #1a0a00;
border-color: transparent;
}
.column-tab[data-column="right"].is-active {
background: linear-gradient(135deg, #ff5d6c 0%, #c43146 100%);
color: #fff;
border-color: transparent;
}
body.brew-app.light-brew .column-tab {
color: rgba(80, 50, 20, 0.85);
border-color: rgba(160, 110, 50, 0.35);
}
}
@media (min-width: 961px) and (max-width: 1200px) {
.brew-columns { gap: 16px; padding: 20px 16px 40px; }
}
/* ─── COLUMN EXPAND ON HOVER ────────────────────────────────────────────────── */
@media (min-width: 961px) {
.brew-columns > .brew-station {
/* Quick flex-grow interpolation. Shortened from 0.85s to feel snappy on
click rather than a slow drift. */
transition: flex-grow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
contain: layout paint;
will-change: flex-grow;
cursor: pointer;
}
.brew-columns.expand-left .brew-station--left,
.brew-columns.expand-center .brew-station--center,
.brew-columns.expand-right .brew-station--right {
flex-grow: 9;
}
.brew-columns.expand-left .brew-station:not(.brew-station--left),
.brew-columns.expand-center .brew-station:not(.brew-station--center),
.brew-columns.expand-right .brew-station:not(.brew-station--right) {
flex-grow: 0.55;
overflow: hidden;
cursor: pointer;
}
/* Lock inner content widths so cards don't reflow text every frame during resize */
.brew-columns.expand-left .brew-station:not(.brew-station--left) .article-list,
.brew-columns.expand-center .brew-station:not(.brew-station--center) .article-list,
.brew-columns.expand-right .brew-station:not(.brew-station--right) .article-list {
width: 360px;
max-width: 360px;
}
.brew-columns.expand-left .brew-station:not(.brew-station--left) .article-list,
.brew-columns.expand-left .brew-station:not(.brew-station--left) .brew-progress-bar,
.brew-columns.expand-left .brew-station:not(.brew-station--left) .sources-badge,
.brew-columns.expand-center .brew-station:not(.brew-station--center) .article-list,
.brew-columns.expand-center .brew-station:not(.brew-station--center) .brew-progress-bar,
.brew-columns.expand-center .brew-station:not(.brew-station--center) .sources-badge,
.brew-columns.expand-right .brew-station:not(.brew-station--right) .article-list,
.brew-columns.expand-right .brew-station:not(.brew-station--right) .brew-progress-bar,
.brew-columns.expand-right .brew-station:not(.brew-station--right) .sources-badge {
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.brew-columns.expand-left .brew-station:not(.brew-station--left) .station-header,
.brew-columns.expand-center .brew-station:not(.brew-station--center) .station-header,
.brew-columns.expand-right .brew-station:not(.brew-station--right) .station-header {
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-bottom: 0;
}
.brew-columns.expand-left .brew-station:not(.brew-station--left) .station-header__title-row,
.brew-columns.expand-center .brew-station:not(.brew-station--center) .station-header__title-row,
.brew-columns.expand-right .brew-station:not(.brew-station--right) .station-header__title-row {
flex-direction: column;
align-items: center;
}
.brew-columns.expand-left .brew-station:not(.brew-station--left) .station-title,
.brew-columns.expand-center .brew-station:not(.brew-station--center) .station-title,
.brew-columns.expand-right .brew-station:not(.brew-station--right) .station-title {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.75rem;
letter-spacing: 0.15em;
margin-top: 14px;
opacity: 0;
animation: bar-title-fade-in 0.35s ease 0.5s forwards;
}
}
@keyframes bar-title-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ─── BREW STATION (COLUMN) ─────────────────────────────────────────────────── */
.brew-station {
background: var(--dark-roast);
border-radius: var(--radius-lg);
border-top: 4px solid var(--border-subtle);
/* Extra bottom padding so the last card's hover-lift shadow + margin
don't get visually clipped against the column edge. */
padding: 18px 16px 28px;
box-shadow: var(--shadow);
}
.brew-station--left { border-top-color: var(--left); background: linear-gradient(160deg, #2a1b3d 0%, var(--dark-roast) 30%); }
.brew-station--center { border-top-color: var(--center); }
.brew-station--right { border-top-color: var(--right); background: linear-gradient(160deg, #3d1616 0%, var(--dark-roast) 30%); }
.station-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.station-header__title-row {
display: flex;
align-items: center;
gap: 8px;
}
.station-lean-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.75); }
}
.brew-station--left .station-lean-dot { background: var(--left); box-shadow: 0 0 8px var(--left); }
.brew-station--center .station-lean-dot { background: var(--center); box-shadow: 0 0 8px var(--center); }
.brew-station--right .station-lean-dot { background: var(--right); box-shadow: 0 0 8px var(--right); }
@media (prefers-reduced-motion: reduce) {
.station-lean-dot { animation: none; }
}
.station-title {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 800;
color: var(--foam);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.sources-badge {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
max-width: 55%;
}
.source-chip {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 600;
color: var(--muted);
background: rgba(255,255,255,0.06);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 2px 7px;
letter-spacing: 0.03em;
white-space: nowrap;
}
/* ─── PROGRESS BAR ──────────────────────────────────────────────────────────── */
.brew-progress-bar {
height: 3px;
background: var(--border-subtle);
border-radius: 2px;
margin-bottom: 16px;
overflow: hidden;
}
.brew-progress-fill {
height: 100%;
width: 0%;
border-radius: 2px;
background: linear-gradient(90deg, var(--amber), var(--caramel));
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.brew-station--left .brew-progress-fill { background: linear-gradient(90deg, var(--left), #7ab0ff); }
.brew-station--right .brew-progress-fill { background: linear-gradient(90deg, var(--right), #e87070); }
.brew-progress-fill.is-brewing {
width: 100% !important;
animation: brew-pulse 1.3s ease-in-out infinite;
}
@keyframes brew-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ─── ARTICLE CARDS ─────────────────────────────────────────────────────────── */
.article-card {
position: relative;
background: var(--card-bg);
border-radius: var(--radius);
padding: 13px 15px 12px;
margin-bottom: 10px;
border-left: 3px solid transparent;
box-shadow: 0 1px 8px rgba(0,0,0,0.3);
animation: card-appear 0.35s ease both;
animation-delay: calc(var(--card-index, 0) * 55ms);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color var(--transition),
box-shadow 0.35s ease,
z-index 0s;
transform-origin: center center;
}
.article-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 38px rgba(0,0,0,0.55);
z-index: 10;
}
.brew-station--left .article-card:hover { border-left-color: var(--left); }
.brew-station--center .article-card:hover { border-left-color: var(--amber); }
.brew-station--right .article-card:hover { border-left-color: var(--right); }
@keyframes card-appear {
from { opacity: 0; }
to { opacity: 1; }
}
.card-source-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.card-source-name {
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--amber);
}
.brew-station--left .card-source-name { color: var(--left); }
.brew-station--right .card-source-name { color: #e07070; }
.card-pub-time {
font-family: var(--font-sans);
font-size: 0.64rem;
color: var(--muted);
}
.card-headline {
font-family: 'Montserrat', var(--font-sans);
font-weight: 900;
font-size: 0.88rem;
line-height: 1.38;
margin-bottom: 7px;
}
.card-headline a {
color: var(--foam);
text-decoration: none;
transition: color var(--transition);
}
.card-headline a:hover { color: var(--amber); }
.brew-station--left .card-headline a:hover { color: #7ab0ff; }
.brew-station--right .card-headline a:hover { color: #e07070; }
.card-description {
font-size: 0.78rem;
color: var(--cream);
line-height: 1.55;
opacity: 0.8;
margin-bottom: 9px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: -webkit-line-clamp 0.3s ease, opacity 0.3s ease;
}
.article-card:hover .card-description {
-webkit-line-clamp: 99;
opacity: 0.95;
}
.card-read-more {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
color: var(--amber);
text-decoration: none;
letter-spacing: 0.02em;
transition: color var(--transition);
}
.card-read-more:hover { color: var(--foam); }
/* ─── "GOING COLD" STALE BANNER (Portfolio only) ─────────────────────────── */
/*
Shown inside a Portfolio card when its article URL is no longer present
in any live feed (Left/Middle/Right or any /api/special/). Visual
goal: noticeable but not alarming — a coffee-stained warning slip pinned
to the card. Dashed border + muted amber says "advisory", not "error".
*/
.card-stale-banner {
margin: 4px 0 8px;
padding: 9px 11px 10px;
background: rgba(94, 58, 30, 0.55);
border: 1px dashed rgba(245, 169, 87, 0.55);
border-radius: 8px;
color: #f0d4a8;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.42;
}
.card-stale-banner strong {
display: block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #f5a957;
margin-bottom: 3px;
}
.article-card.is-stale .card-headline a { color: #d8b88a; }
body.brew-app.light-brew .card-stale-banner {
background: rgba(245, 222, 188, 0.85);
border-color: rgba(168, 105, 50, 0.55);
color: #5a3a1c;
}
body.brew-app.light-brew .card-stale-banner strong { color: #a86932; }
body.brew-app.light-brew .article-card.is-stale .card-headline a { color: #7a5530; }
/* ─── CARD FOOTER + PORTFOLIO FOLDER BUTTON ──────────────────────────────── */
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
}
.card-portfolio-btn {
background: transparent;
border: 1px solid rgba(168, 120, 80, 0.35);
color: rgba(245, 230, 200, 0.55);
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: color 0.15s ease, border-color 0.15s ease,
background-color 0.15s ease, transform 0.12s ease;
}
.card-portfolio-btn:hover {
color: var(--amber, #e0a268);
border-color: var(--amber, #e0a268);
background: rgba(245, 169, 87, 0.08);
}
.card-portfolio-btn:active { transform: scale(0.92); }
.card-portfolio-btn.is-saved {
color: #f5a957;
border-color: #f5a957;
background: rgba(245, 169, 87, 0.18);
}
.card-portfolio-btn.is-saved:hover {
color: #fffbf0;
background: rgba(245, 169, 87, 0.28);
}
/* Folder "jump" played once when the user saves an article. The icon
hops up, scales, and gives a quick wiggle — long enough to feel
satisfying but short enough to not block another rapid save. */
@keyframes card-portfolio-jump {
0% { transform: translateY(0) scale(1) rotate(0); }
25% { transform: translateY(-7px) scale(1.18) rotate(-8deg); }
55% { transform: translateY(-3px) scale(1.10) rotate(6deg); }
80% { transform: translateY(0) scale(0.96) rotate(-2deg); }
100% { transform: translateY(0) scale(1) rotate(0); }
}
.card-portfolio-btn.is-bumping {
animation: card-portfolio-jump 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ─── PORTFOLIO BUTTON IN HEADER ─────────────────────────────────────────── */
/* Tighter padding than the default .btn-special so all four right-side
buttons (Entertainment / Politics / Sports / Portfolio) fit on a single
row at common laptop widths (~1280px viewport, ~437px right side). */
.btn-portfolio {
padding: 6px 12px;
}
.btn-portfolio .btn-special__label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-portfolio__icon {
flex-shrink: 0;
/* inline-block so the transform in card-portfolio-jump actually applies
(inline SVG defaults to inline layout, which ignores transform-origin). */
display: inline-block;
transform-origin: center;
}
.btn-portfolio__icon.is-bumping {
animation: card-portfolio-jump 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-portfolio__count {
/* Hidden by default so the button width is just "icon + Portfolio" — the
reserved space for a count badge would force the right-side row to wrap
on common laptop widths. Becomes inline-flex when items are saved. */
display: none;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 0.65rem;
font-weight: 800;
line-height: 1;
border-radius: 9px;
background: #f5a957;
color: #1f140b;
}
.btn-portfolio__count.is-visible {
display: inline-flex;
}
/* Sign-in CTA inside the Portfolio panel's signed-out empty state. */
.btn-portfolio-signin {
margin-top: 12px;
padding: 8px 18px;
border: none;
border-radius: 20px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.02em;
background: #f5a957;
color: #1f140b;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.btn-portfolio-signin:hover { transform: scale(1.04); background: #f9b96e; }
.btn-portfolio-signin:active { transform: scale(0.97); }
/* ─── SKELETON CARDS ────────────────────────────────────────────────────────── */
.article-card--skeleton {
pointer-events: none;
cursor: default;
}
.skeleton-line {
height: 11px;
border-radius: 4px;
margin-bottom: 8px;
background: linear-gradient(
90deg,
var(--light-roast) 25%,
var(--card-bg) 50%,
var(--light-roast) 75%
);
background-size: 300% 100%;
animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.skeleton-line--short { width: 38%; }
.skeleton-line--full { width: 100%; height: 15px; }
.skeleton-line--medium { width: 66%; }
.skeleton-line--wide { width: 85%; height: 9px; }
/* ─── EMPTY / ERROR STATES ──────────────────────────────────────────────────── */
.empty-state,
.error-state {
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--muted);
text-align: center;
padding: 24px 16px;
border: 1px dashed var(--border-subtle);
border-radius: var(--radius);
}
.error-state { color: #e07070; border-color: rgba(201, 64, 64, 0.3); }
/* ─── FOOTER ────────────────────────────────────────────────────────────────── */
.brew-footer {
text-align: center;
padding: 24px 24px 36px;
border-top: 1px solid var(--border-subtle);
font-family: var(--font-sans);
font-size: 0.72rem;
color: var(--muted);
letter-spacing: 0.03em;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.brew-footer__nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 8px;
font-size: 0.78rem;
}
.brew-footer__link {
background: none;
border: none;
padding: 4px 2px;
cursor: pointer;
color: var(--muted);
font-family: inherit;
font-size: inherit;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.18s ease, border-color 0.18s ease;
}
.brew-footer__link:hover,
.brew-footer__link:focus-visible {
color: var(--amber);
border-bottom-color: currentColor;
outline: none;
}
.brew-footer__dot {
opacity: 0.5;
user-select: none;
}
.brew-footer__blurb {
max-width: 760px;
line-height: 1.55;
margin: 0 auto;
}
.brew-footer__timestamp {
margin: 0;
opacity: 0.85;
}
/* ─── SCROLLBAR ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--espresso); }
::-webkit-scrollbar-thumb { background: var(--light-roast); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }
/* ─── ACCESSIBILITY ─────────────────────────────────────────────────────────── */
/* Skip-to-content link for keyboard / screen-reader users.
Hidden visually until focused. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2000;
background: var(--amber, #e8892b);
color: #1a0a00;
padding: 12px 18px;
font-family: var(--font-sans);
font-weight: 700;
border-radius: 0 0 8px 0;
text-decoration: none;
}
.skip-link:focus {
left: 0;
outline: 3px solid #fff;
outline-offset: 2px;
}
/* Visible focus ring on every interactive element. */
:focus-visible {
outline: 2px solid var(--amber, #e8892b);
outline-offset: 2px;
border-radius: 4px;
}
/* Respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─── MOBILE / LOW-END PERF OVERRIDES ────────────────────────────────────────
Drop expensive paint work and long stagger chains on touch / small-screen
devices where the GPU budget is tight. Targets:
- backdrop-filter on the fixed header + about-modal backdrop (blur is the
single most expensive per-scroll-frame op on iOS Safari).
- infinite ambient animations (steam, drip, pulses) that paint forever.
- the per-card 55ms stagger which adds up to >1.5s on a 30-card column. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
.brew-header,
.about-modal__backdrop {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Solid-ish fallback so the header stays legible without the blur. */
.brew-header { background: rgba(26, 10, 0, 0.92); }
body.brew-app.light-brew .brew-header { background: rgba(253, 245, 234, 0.96); }
/* Cap the per-card stagger so the last card finishes ~0.6s instead of 1.6s. */
.article-card { animation-delay: calc(min(var(--card-index, 0), 10) * 30ms) !important; }
/* Kill ambient infinite loops on mobile — they're decorative and they cost
paint frames even when offscreen. */
.drip-steam span,
.station-lean-dot { animation: none !important; }
/* Hover-translate on cards isn't reachable via touch and the lingering
box-shadow transition wastes paint. Disable transform/shadow lift. */
.article-card { transition: border-color var(--transition) !important; }
.article-card:hover { transform: none; box-shadow: 0 1px 8px rgba(0,0,0,0.3); }
}
/* ─── MOBILE LAYOUT (≤640px) ────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Header: compact vertical stack on mobile. */
.brew-header {
gap: 8px;
padding: 10px 12px;
/* Single short transition on padding only; everything else animates
inside the children for less layout thrash. */
transition:
padding 0.22s cubic-bezier(0.4, 0, 0.2, 1),
gap 0.22s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s ease;
}
/* Children animate via max-height/opacity instead of display:none so the
collapse and expand are continuous, not jumpy. NOTE: we deliberately
do NOT target .controls-right here. Its opacity must stay at 1 so the
absolutely-positioned #btn-signin / #account-chip (rendered next to
the hamburger) aren't dragged to opacity 0 via parent inheritance.
Instead we collapse its inner .theme-toggle-wrap. */
.brew-header .brew-controls,
.brew-header .controls-right .theme-toggle-wrap {
overflow: hidden;
max-height: 200px; /* generous ceiling; trimmed in is-collapsed */
opacity: 1;
/* Animate only max-height + opacity, with opacity ramping faster so
contents fade away before the height collapse completes — that hides
the per-frame layout jitter from the height interpolation. */
transition:
max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.14s linear;
}
/* Mobile-only: keep header fixed in place even while scrolling — do NOT
slide it off-screen. The smart-header hide-on-scroll behavior is desktop
only; on mobile we collapse to a compact bar instead. */
.brew-header.is-hidden {
transform: translateY(0);
}
/* Hamburger is only meaningful when the header is collapsed (the controls
are hidden and need to be reopened). Keep it in the DOM flow at all
times (no display:none toggling, which would cause a snap) — fade in
via opacity + pointer-events for a smooth show/hide. */
.btn-mobile-menu {
display: flex;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s linear;
}
.brew-header.is-collapsed .btn-mobile-menu {
opacity: 1;
pointer-events: auto;
}
.brew-logo { font-size: 1.5rem; }
.brew-news-label { font-size: 0.65rem; }
/* Sign in lives inside .controls-left (already absolute-positioned at the
LEFT edge of the header). On mobile we simply ensure it stays visible
across collapse/expand transitions — no extra positioning needed. */
.brew-header #btn-signin,
.brew-header #account-chip {
max-height: none !important;
opacity: 1 !important;
pointer-events: auto !important;
margin: 0 !important;
}
/* Keep .controls-left visible even when the header collapses. */
.brew-header .controls-left {
z-index: 3;
}
/* Tighten padding on mobile so the pill is compact in the narrow bar. */
.brew-header #btn-signin {
padding: 6px 12px;
font-size: 0.8rem;
min-height: 32px;
}
/* Account chip on mobile: hard-cap the name so it can't crowd into the
centered STEEPED brand. Tight padding keeps the pill compact. */
.brew-header .account-chip__trigger {
padding: 4px 10px;
font-size: 0.72rem;
min-height: 32px;
}
.brew-header .account-chip__name {
max-width: 90px;
}
/* Anchor the menu inside the chip's left edge and pull it slightly so it
never spills off-screen on the narrowest devices. */
.brew-header .account-menu {
left: 0;
right: auto;
max-width: calc(100vw - 16px);
}
/* Keep the full THEME label + "Dark Roast" / "Light Roast" text. The
mobile drawer (revealed when the hamburger is tapped) hosts the theme
toggle — shift it leftward via margin-right so it never sits under
the close ✕ (the hamburger morphs into a close button at top-right). */
.auto-refresh-control,
.theme-toggle-wrap {
transform: scale(0.92);
margin-right: 56px; /* hamburger ~40px + 16px breathing room */
}
/* ── COLLAPSED HEADER (scrolled) ─────────────────────────────────────────
When the user scrolls down on mobile, the JS adds .is-collapsed to the
header. All the secondary controls hide; only the brand + hamburger
remain visible in a compact bar. Tapping the hamburger sets
.is-menu-open, which re-reveals the drawer. */
.brew-header.is-collapsed {
padding: 4px 12px;
gap: 0;
}
/* Shrink the brand mark in the collapsed bar. Use transform:scale (GPU
compositor) instead of font-size (layout reflow on every frame) so the
wordmark scales down butter-smooth. */
.brew-header__brand {
transform-origin: center;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Keep the brand shrunk in BOTH collapsed states (drawer open or closed),
so there's horizontal room for the theme toggle group docked to the
right of the brand when the drawer is open. */
.brew-header.is-collapsed .brew-header__brand {
transform: scale(0.78);
}
/* Collapse children with animatable properties instead of display:none. */
.brew-header.is-collapsed .brew-controls,
.brew-header.is-collapsed .controls-right .theme-toggle-wrap {
max-height: 0;
min-height: 0;
opacity: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
pointer-events: none;
}
/* Also flatten the .controls-right container itself so the empty
vertical column doesn't add gap to the collapsed bar — but DO NOT
set opacity:0 on it (see note above). */
.brew-header.is-collapsed .controls-right {
max-height: 0;
min-height: 0;
margin: 0;
padding: 0;
/* `overflow: visible` is required so that the absolutely-positioned
#btn-signin / #account-chip inside aren't visually clipped when the
container collapses to zero height. */
overflow: visible;
}
/* When the drawer is open, restore the hidden controls. */
.brew-header.is-collapsed.is-menu-open {
padding: 10px 12px;
gap: 8px;
/* Allow the drawer to scroll if it exceeds viewport height. */
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.brew-header.is-collapsed.is-menu-open .brew-controls,
.brew-header.is-collapsed.is-menu-open .controls-right .theme-toggle-wrap {
max-height: 200px;
opacity: 1;
pointer-events: auto;
}
/* When the drawer is open, dock the theme toggle into the top-right
corner of the header (a stacked group with "Theme" label above the
Dark Roast / Light Roast pills) and reserve enough vertical room in
the header__top row to contain it without intruding on the brand
centered to its left or the category pill row below. The toggle is
shrunk down so the full group fits in the narrow strip between the
brand wordmark and the close ✕. */
.brew-header.is-collapsed.is-menu-open .brew-header__top {
min-height: 72px;
}
.brew-header.is-collapsed.is-menu-open .controls-right {
top: 6px;
transform: none;
/* Pulled slightly inward (was 52px) so the stacked toggle sits exactly
centered in the gap between the STEEPED wordmark and the ✕ button. */
right: 46px;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.brew-header.is-collapsed.is-menu-open .controls-right .theme-toggle-wrap {
margin-right: 0;
flex-direction: column;
align-items: center;
gap: 3px;
transform: none; /* drop the 0.92 scale so layout box matches visual */
}
/* Compact label + pills so the stacked group fits in the corner box
without crowding the centered STEEPED wordmark. */
.brew-header.is-collapsed.is-menu-open .theme-toggle-label {
font-size: 0.46rem;
letter-spacing: 0.08em;
line-height: 1;
}
.brew-header.is-collapsed.is-menu-open .theme-toggle {
padding: 2px;
border-radius: 12px;
/* Stack the two roast pills vertically so the toggle is narrow enough
to fit in the gap between the centered STEEPED wordmark and the ✕. */
flex-direction: column;
gap: 2px;
align-items: stretch;
}
.brew-header.is-collapsed.is-menu-open .theme-btn {
padding: 2px 8px;
font-size: 0.58rem;
min-height: 0;
border-radius: 10px;
width: 100%;
text-align: center;
}
/* Row 2: 3-column grid for the six category buttons, with The Homebrew
promoted to its own full-width row in the middle so it reads as the
primary "panel" rather than a sibling category. */
.brew-controls {
order: 3;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px;
padding: 2px 0 4px;
margin: 0;
width: 100%;
}
/* Side wrappers shouldn't impose their own grid on mobile. */
.brew-controls__side {
display: contents;
}
.btn-special {
min-height: 38px;
padding: 7px 8px;
font-size: 0.78rem;
line-height: 1.2;
white-space: nowrap;
width: 100%;
justify-content: center;
}
/* The Homebrew: full-width prominent action — sized to match Brew Fresh
News rather than the small category pills. */
.btn-home.btn-homebrew {
grid-column: 1 / -1;
width: 100%;
min-height: 44px;
padding: 10px 16px;
font-size: 0.95rem;
line-height: 1.2;
white-space: nowrap;
justify-content: center;
}
/* Auto-refresh + theme controls are nice-to-haves on mobile. The
.controls-right wrapper stays absolutely positioned inside the top row
(see base rule) but its inner theme-toggle-wrap can be hidden by the
scroll-collapse behaviour. */
.controls-right__row {
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.auto-refresh-control,
.theme-toggle-wrap {
transform: scale(0.92);
transform-origin: center;
}
/* Splash logo — sized off viewport width so "STEEPED" always fits.
7 chars × ~0.7em width + letter-spacing ≈ 5em wide; cap at 11vw to stay
well inside any phone viewport including iPhone SE (320px). */
.intro-logo {
font-size: clamp(2rem, 11vw, 4.5rem);
letter-spacing: 0.03em;
max-width: 90vw;
}
.intro-content {
max-width: 100vw;
padding: 0 16px;
box-sizing: border-box;
}
.intro-sub {
font-size: 0.65rem;
letter-spacing: 0.1em;
text-align: center;
}
/* Larger tap targets for column tabs. */
.column-tab {
min-height: 44px;
}
/* Article cards: tighter padding, smaller headlines. */
main.brew-columns {
padding: 16px 12px 32px;
gap: 16px;
}
.brew-station {
/* Mobile: more bottom padding so the last article-card isn't crowded
against the column edge (was 14px, looked clipped against the
column gradient). */
padding: 14px 12px 24px;
}
.article-card {
padding: 14px 14px 14px;
}
/* Belt-and-suspenders: ensure the last card in a column has clear space
below it even on tall touch devices where margin collapse can eat the
column's bottom padding. */
.article-list > .article-card:last-child { margin-bottom: 4px; }
.card-headline {
font-size: 1rem !important;
line-height: 1.3;
}
.card-description {
font-size: 0.88rem;
line-height: 1.45;
}
.card-source-name { font-size: 0.7rem; }
.card-pub-time { font-size: 0.7rem; }
.card-read-more {
font-size: 0.9rem;
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 8px 4px;
}
/* The headline link itself becomes the primary tap target on mobile —
pad it so the whole headline area is comfortably tappable. */
.card-headline a {
display: block;
padding: 4px 0;
min-height: 44px;
}
/* Sources badge: wrap chips instead of overflowing. */
.sources-badge {
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px;
}
.source-chip { font-size: 0.7rem; padding: 3px 8px; }
/* Special panel: smaller padding so cards fit. */
.special-panel {
padding: 14px 12px;
}
.special-panel__grid {
grid-template-columns: 1fr !important;
gap: 12px;
}
/* About modal: edge-to-edge with safer margins. */
.about-modal__card {
width: calc(100% - 24px);
padding: 22px 20px 18px;
}
/* Theme toggle buttons: bigger tap target. */
.theme-btn { min-height: 36px; padding: 6px 14px; }
/* Position context for absolutely-positioned About Us. */
.brew-header { position: fixed; } /* already fixed in base, restated for clarity */
}
/* Extra-narrow screens (≤360px, e.g. iPhone SE 1st gen). */
@media (max-width: 360px) {
.brew-logo { font-size: 1.3rem; }
.btn-special, .btn-home { padding: 8px 12px; font-size: 0.85rem; }
}
/* ─── SIGN-IN MODAL: email-signin alt button + divider ─────────────────────── */
/* Sits between the primary "Create an account" pill and the Google button so
returning native-account users have a clear path that doesn't go through
OAuth. Visually subordinate to Create account (which is the primary CTA
for new visitors), styled as an outlined pill in roast tones. */
/* Accessibility helper: visually hidden but still announced by screen
readers. Used in the sign-in modal so the heading still has a literal
"Sign in to Steeped" label after the visible title becomes a logo. */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Sign-in modal heading uses the homepage Milker logo (brew-title +
brew-news-label) so the modal matches what users see in the page header
and on the auth pages. The container just stacks the two spans centered. */
.about-modal__title--logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin-bottom: 14px;
line-height: 1;
}
.about-modal__title--logo .brew-title { font-size: 2rem; }
.about-modal__title--logo .brew-news-label { font-size: 0.85rem; margin-top: 0; }
/* `.about-modal__card p` higher up the file forces margin-left/right to 0,
so we use a card-scoped selector here to bump specificity and restore
the auto margins that center the divider in the modal. */
.about-modal__card p.about-modal__divider {
display: flex;
align-items: center;
gap: 10px;
margin: 4px auto;
width: 240px;
max-width: 80%;
color: rgba(245, 169, 87, 0.55);
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
}
.about-modal__divider::before,
.about-modal__divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(245, 169, 87, 0.22);
}
.btn-email-signin {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 4px auto;
padding: 11px 24px;
background: transparent;
color: #f5a957;
border: 1.5px solid rgba(245, 169, 87, 0.5);
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn-email-signin:hover {
background: rgba(245, 169, 87, 0.08);
border-color: rgba(245, 169, 87, 0.8);
}
.btn-email-signin:active { transform: translateY(1px); }
.light-brew .about-modal__divider { color: rgba(94, 58, 30, 0.5); }
.light-brew .about-modal__divider::before,
.light-brew .about-modal__divider::after { background: rgba(94, 58, 30, 0.2); }
.light-brew .btn-email-signin {
color: #5e3a1e;
border-color: rgba(94, 58, 30, 0.42);
}
.light-brew .btn-email-signin:hover {
background: rgba(94, 58, 30, 0.06);
border-color: rgba(94, 58, 30, 0.7);
}
/* ─── AUTH PAGES (signup / login / verify / terms / privacy) ───────────────── */
/* Standalone pages served by auth_native.py. They share .brew-app theming
for color variables (the body sets .light-brew by default), but otherwise
live outside the SPA shell. The layout is a centered card on a roast
background with a top brand and a footer link strip. */
.auth-page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg, #fdf5ea);
color: var(--fg, #2a1c10);
font-family: var(--font-sans);
}
/* `body.brew-app` higher up the file sets Georgia (`--font-serif`) at
specificity (0,1,1) — more than `.auth-page` (0,1,0) — so auth-page
text was inheriting the serif. Match that specificity here so every
label / lede / hint / footer string on signup, login, terms, privacy
renders in Montserrat. */
body.brew-app.auth-page,
body.brew-app.auth-page input,
body.brew-app.auth-page textarea,
body.brew-app.auth-page button {
font-family: var(--font-sans);
}
.auth-page__header {
padding: 26px 24px 6px;
display: flex;
justify-content: center;
}
.auth-page__brand {
display: inline-flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
line-height: 1;
}
/* Auth pages reuse the homepage brand (.brew-title + .brew-news-label) so
the signed-out logo matches what users see on the front page. The
container below just stacks them centered with no extra gap. */
.auth-page__brand .brew-title { font-size: 1.6rem; }
.auth-page__brand .brew-news-label { font-size: 0.78rem; }
.auth-page__main {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 18px 16px 40px;
}
.auth-page__footer {
padding: 18px 24px 28px;
text-align: center;
font-size: 0.82rem;
opacity: 0.7;
}
.auth-page__footer a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.auth-page__footer-dot { margin: 0 8px; opacity: 0.5; }
.auth-card {
width: 100%;
max-width: 440px;
background: #fff8ec;
border: 1px solid rgba(94, 58, 30, 0.14);
border-radius: 16px;
padding: 32px 30px 26px;
box-shadow: 0 10px 28px -18px rgba(63, 36, 18, 0.45);
}
.auth-card--centered { text-align: center; }
.auth-card--prose { max-width: 680px; }
.auth-card--prose h2 {
margin-top: 22px;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.auth-card--prose p, .auth-card--prose ul { font-size: 0.94rem; line-height: 1.55; }
.auth-card--prose ul { padding-left: 18px; }
.auth-card--prose em { color: #8a5a30; font-style: italic; }
.auth-card__title {
margin: 0 0 6px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 1.45rem;
color: #3a2417;
}
.auth-card__lede {
margin: 0 0 18px;
font-size: 0.94rem;
color: rgba(58, 36, 23, 0.78);
}
.auth-card__hint {
margin: 12px 0 0;
font-size: 0.84rem;
color: rgba(58, 36, 23, 0.62);
}
.auth-card__alt {
margin: 16px 0 0;
font-size: 0.88rem;
color: rgba(58, 36, 23, 0.78);
text-align: center;
}
.auth-card__alt a {
color: #b46a1f;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(180, 106, 31, 0.35);
}
.auth-card__alt a:hover { border-bottom-color: #b46a1f; }
.auth-card__error {
background: rgba(178, 34, 34, 0.08);
border: 1px solid rgba(178, 34, 34, 0.32);
color: #8c1d1d;
padding: 10px 12px;
border-radius: 8px;
font-size: 0.88rem;
margin: 0 0 14px;
}
.auth-card__draft-banner {
background: rgba(245, 169, 87, 0.18);
border: 1px dashed rgba(245, 169, 87, 0.6);
color: #6b3a0d;
padding: 9px 12px;
border-radius: 8px;
font-size: 0.82rem;
margin: 0 0 14px;
}
/* ─── AUTH FORMS ────────────────────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form__label {
margin-top: 12px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #5e3a1e;
}
.auth-form__input {
appearance: none;
width: 100%;
padding: 11px 13px;
background: #fff;
border: 1.5px solid rgba(94, 58, 30, 0.22);
border-radius: 10px;
font-family: var(--font-sans);
font-size: 0.98rem;
color: #2a1c10;
transition: border-color 100ms ease, box-shadow 100ms ease;
}
.auth-form__input:focus {
outline: none;
border-color: #f5a957;
box-shadow: 0 0 0 3px rgba(245, 169, 87, 0.28);
}
.auth-form__hint {
margin: 4px 2px 0;
font-size: 0.78rem;
color: rgba(58, 36, 23, 0.55);
}
.auth-form__checkbox {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 16px;
font-size: 0.86rem;
line-height: 1.45;
color: rgba(58, 36, 23, 0.85);
cursor: pointer;
}
.auth-form__checkbox input[type="checkbox"] {
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: #b46a1f;
flex-shrink: 0;
}
.auth-form__checkbox a {
color: #b46a1f;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(180, 106, 31, 0.4);
}
.auth-form__turnstile {
margin: 16px 0 4px;
display: flex;
justify-content: center;
min-height: 70px; /* prevent layout jump as the widget loads */
}
.auth-form__submit {
margin-top: 18px;
padding: 12px 24px;
background: #b46a1f;
color: #fff8ec;
border: none;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 800;
font-size: 0.98rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 100ms ease, transform 80ms ease;
}
.auth-form__submit:hover { background: #c87a2a; }
.auth-form__submit:active { transform: translateY(1px); }
.auth-form__submit--inline {
display: inline-block;
margin-top: 0;
text-decoration: none;
color: #fff8ec; /* bump specificity over .auth-card__alt a */
}
.auth-form__submit--inline:hover { color: #fff8ec; }
.auth-card__cta { text-align: center; margin: 22px 0 4px; }
/* Auth-page narrow-screen polish. The card already maxes at 440px so most
small phones get it for free — these just tighten the spacing. */
@media (max-width: 480px) {
.auth-page__header { padding-top: 18px; }
.auth-card { padding: 24px 20px 20px; border-radius: 14px; }
.auth-card__title { font-size: 1.25rem; }
}