/* =============================================================================
IzeChat — Home feed navigation + Feed preferences + per-feed empty states
-----------------------------------------------------------------------------
Three isolated components, no global selector touched:
.ize-fn the For You / Following / Communities bar (in normal flow, under
the composer)
.ize-fp Feed preferences, a Material-3 modal bottom sheet
.ize-fe the per-feed empty states
THEMING follows the convention already used by ize-post-sheet.css and
ize-smart-card.css: WoWonder signals dark by injecting into , so dark is keyed off `html:has(#night-mode-css)` (correct
on FIRST paint, and correct when the toggle hot-swaps the stylesheet without
a reload) plus `html.ize-dark` for engines without :has(), plus `body.dark`
for forward compatibility. Every colour resolves through a custom property,
so a theme swap changes the property block and never a rule.
MOTION composes the motion system's tokens (--ize-mo-*) rather than inventing
durations, so Reduce Motion / battery-saver scaling applies here for free.
The bar is deliberately NOT sticky. The row it replaces was
(`.tag_home_filters.home { position: sticky; top: 60px }`) and a permanently
pinned control is the opposite of the goal: content should own the screen
once you are reading it.
========================================================================== */
/* ---------- Tokens: light --------------------------------------------------- */
.ize-fn,
.ize-fp,
.ize-fe {
--fn-accent: var(--ize-dyn-primary, var(--main, #C32E3A));
--fn-accent-rgb: var(--ize-dyn-primary-rgb, var(--main-rgb, 195, 46, 58));
--fn-on-accent: #fff;
--fn-surface: #ffffff;
--fn-surface-2: #f1f2f5;
--fn-ink: #16181c;
--fn-ink-2: #656b74;
--fn-hair: rgba(15, 20, 28, .10);
--fn-press: rgba(15, 20, 28, .06);
--fn-scrim: rgba(0, 0, 0, .42);
--fn-shadow: 0 1px 2px rgba(15, 20, 28, .05), 0 8px 24px rgba(15, 20, 28, .06);
--fn-sheet-shadow:0 -2px 22px rgba(17, 24, 39, .16);
--fn-radius: 14px;
}
html:has(#night-mode-css) .ize-fn, html.ize-dark .ize-fn, body.dark .ize-fn,
html:has(#night-mode-css) .ize-fp, html.ize-dark .ize-fp, body.dark .ize-fp,
html:has(#night-mode-css) .ize-fe, html.ize-dark .ize-fe, body.dark .ize-fe {
--fn-surface: #242526;
--fn-surface-2: #3a3b3d;
--fn-ink: #e4e6eb;
--fn-ink-2: #b0b3b8;
--fn-hair: rgba(255, 255, 255, .13);
--fn-press: rgba(255, 255, 255, .09);
--fn-scrim: rgba(0, 0, 0, .62);
--fn-shadow: 0 1px 2px rgba(0, 0, 0, .35);
--fn-sheet-shadow:0 -2px 24px rgba(0, 0, 0, .58);
}
/* AMOLED. The :has() selectors above carry ID weight, so these repeat that
weight where both modes are active — otherwise the dark block would win
exactly when AMOLED matters. */
html.ize-amoled .ize-fn, body.ize-amoled .ize-fn, html:has(#night-mode-css) body.ize-amoled .ize-fn,
html.ize-amoled .ize-fp, body.ize-amoled .ize-fp, html:has(#night-mode-css) body.ize-amoled .ize-fp,
html.ize-amoled .ize-fe, body.ize-amoled .ize-fe, html:has(#night-mode-css) body.ize-amoled .ize-fe {
--fn-surface: #000000;
--fn-surface-2: #151515;
--fn-ink: #ededed;
--fn-ink-2: #9aa0a6;
--fn-hair: rgba(255, 255, 255, .17);
}
/* =============================================================================
1. FEED NAV
========================================================================== */
.ize-fn {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding: 0;
}
.ize-fn-tabs {
position: relative;
display: flex;
align-items: stretch;
flex: 1 1 auto;
min-width: 0;
/* Horizontal scroll is the escape hatch for a long translation (e.g. de/sw
"Communities"), not the normal state: three short labels fit every phone
from 320px up. No scrollbar, no bounce chaining into the feed. */
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
box-shadow: inset 0 -1px 0 var(--fn-hair);
}
.ize-fn-tabs::-webkit-scrollbar { display: none; }
.ize-fn-tab {
position: relative;
flex: 0 0 auto;
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
margin: 0;
/* 44px+ of real target height even though the text is 15px — §26. */
padding: 13px 14px 12px;
min-height: 46px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
color: var(--fn-ink-2);
white-space: nowrap;
cursor: pointer;
border-radius: 10px 10px 0 0;
-webkit-tap-highlight-color: transparent;
transition:
color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
background-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease);
}
.ize-fn-tab:first-child { margin-left: 0; }
.ize-fn-tab.is-active { color: var(--fn-ink); }
.ize-fn-tab:hover:not(.is-active) { color: var(--fn-ink); }
.ize-fn-tab:active { background: var(--fn-press); }
.ize-fn-tab:focus-visible {
outline: 2px solid var(--fn-accent);
outline-offset: -3px;
}
/* The sliding underline. Transform-only (no width/left animation) so it never
triggers layout during the swap — position and scale are published by
ize-feed-nav.js as two custom properties.
The 100px base width is deliberate rather than `100%`: this element is
absolutely positioned inside a SCROLL container, where the resolved width of
a percentage depends on how the engine treats the scrollable overflow area.
A fixed base makes the scale factor simply `tabWidth / 100` — the same answer
on every engine, at every scroll offset. */
.ize-fn-ink {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100px;
border-radius: 3px 3px 0 0;
background: var(--fn-accent);
transform-origin: 0 50%;
transform: translate3d(var(--fn-ink-x, 0px), 0, 0) scaleX(var(--fn-ink-w, 0));
will-change: transform;
pointer-events: none;
}
.ize-fn.is-ready .ize-fn-ink {
transition: transform var(--ize-mo-t-quick, 200ms) var(--ize-mo-e-glide, cubic-bezier(.22, .61, .36, 1));
}
.ize-fn-prefs {
position: relative;
flex: 0 0 auto;
appearance: none;
-webkit-appearance: none;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0 0 2px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--fn-ink-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
transform var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease);
}
/* The visible circle is 40px but the touch target is 48 — a 4px invisible ring
on every side, which is what §26 is actually asking for. */
.ize-fn-prefs::after {
content: '';
position: absolute;
inset: -4px;
}
.ize-fn-prefs:hover { color: var(--fn-ink); background: var(--fn-press); }
.ize-fn-prefs:active { transform: scale(var(--ize-mo-press-sm, .90)); }
.ize-fn-prefs:focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 2px; }
/* A filter is on. The control stops being a bare icon and becomes a labelled
pill, because the filter now survives restarts and an unexplained dot three
days later is not an explanation. Widens from the right so the tabs beside it
do not shift. */
.ize-fn-prefs.is-on {
width: auto;
min-width: 40px;
gap: 5px;
padding: 0 12px 0 9px;
border-radius: 20px;
background: rgba(var(--fn-accent-rgb), .12);
color: var(--fn-accent);
}
.ize-fn-prefs.is-on:hover { background: rgba(var(--fn-accent-rgb), .18); }
.ize-fn-prefs.is-on:active { transform: scale(var(--ize-mo-press, .96)); }
.ize-fn-prefs-tag {
display: none;
max-width: 9em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 600;
line-height: 1;
pointer-events: none;
}
.ize-fn-prefs.is-on .ize-fn-prefs-tag { display: block; }
/* Fallback signal for the case where the label cannot be resolved (a sheet that
has not rendered yet). paintTabs() prefers the named pill above. */
.ize-fn-dot {
position: absolute;
top: 6px;
right: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--fn-accent);
box-shadow: 0 0 0 2px var(--body-bg, var(--fn-surface));
}
/* =============================================================================
2. FEED PREFERENCES SHEET
========================================================================== */
.ize-fp {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
}
.ize-fp.is-mounted { display: block; }
.ize-fp-scrim {
position: absolute;
inset: 0;
background: var(--fn-scrim);
opacity: 0;
transition: opacity var(--ize-mo-t-quick, 200ms) var(--ize-mo-e-standard, ease);
}
.ize-fp.is-open .ize-fp-scrim { opacity: 1; }
.ize-fp-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
max-height: calc(100dvh - var(--ize-safe-top, 0px) - 40px);
background: var(--fn-surface);
color: var(--fn-ink);
border-radius: 28px 28px 0 0;
box-shadow: var(--fn-sheet-shadow);
transform: translate3d(0, 100%, 0);
transition: transform var(--ize-mo-t-normal, 260ms) var(--ize-mo-e-enter, cubic-bezier(.05, .7, .1, 1));
will-change: transform;
}
.ize-fp.is-open .ize-fp-sheet { transform: translate3d(0, 0, 0); }
/* Desktop / wide: a centred dialog reads better than a full-width sheet. */
@media (min-width: 768px) {
.ize-fp-sheet {
left: 50%;
right: auto;
bottom: auto;
top: 50%;
width: 440px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 80px);
border-radius: 20px;
transform: translate3d(-50%, -46%, 0);
opacity: 0;
transition:
transform var(--ize-mo-t-normal, 260ms) var(--ize-mo-e-enter, ease),
opacity var(--ize-mo-t-fast, 140ms) linear;
}
.ize-fp.is-open .ize-fp-sheet { transform: translate3d(-50%, -50%, 0); opacity: 1; }
.ize-fp-handle { display: none; }
}
.ize-fp-handle {
width: 32px;
height: 4px;
border-radius: 2px;
background: var(--fn-hair);
margin: 10px auto 2px;
flex: 0 0 auto;
}
.ize-fp-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 8px 6px 20px;
flex: 0 0 auto;
}
.ize-fp-head h2 {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: var(--fn-ink);
}
.ize-fp-x {
appearance: none;
-webkit-appearance: none;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--fn-ink-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ize-fp-x:hover { background: var(--fn-press); color: var(--fn-ink); }
.ize-fp-body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 4px 12px 8px;
}
.ize-fp-group { padding: 6px 0 10px; }
.ize-fp-group + .ize-fp-group {
border-top: 1px solid var(--fn-hair);
padding-top: 14px;
}
.ize-fp-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fn-ink-2);
padding: 0 8px 6px;
}
/* ---- radio rows ---- */
.ize-fp-row {
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 8px 10px;
margin: 0;
border-radius: var(--fn-radius);
cursor: pointer;
font-weight: 400;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease);
}
.ize-fp-row:active { background: var(--fn-press); }
.ize-fp-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.ize-fp-mark {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--fn-ink-2);
position: relative;
transition:
border-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
background-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease);
}
.ize-fp-mark::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--fn-accent);
transform: scale(0);
transition: transform var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-spring, cubic-bezier(.34, 1.4, .64, 1));
}
.ize-fp-row input:checked ~ .ize-fp-mark { border-color: var(--fn-accent); }
.ize-fp-row input:checked ~ .ize-fp-mark::after { transform: scale(1); }
.ize-fp-row input:focus-visible ~ .ize-fp-mark {
box-shadow: 0 0 0 3px rgba(var(--fn-accent-rgb), .3);
}
.ize-fp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ize-fp-txt b { font-size: 15px; font-weight: 600; color: var(--fn-ink); }
.ize-fp-txt i {
font-style: normal;
font-size: 12.5px;
line-height: 1.35;
color: var(--fn-ink-2);
}
/* ---- content-type chips ---- */
.ize-fp-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 2px 8px 0;
}
.ize-fp-chip { margin: 0; font-weight: 400; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ize-fp-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.ize-fp-chip > span {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 16px;
border-radius: 20px;
border: 1px solid var(--fn-hair);
background: transparent;
color: var(--fn-ink);
font-size: 14px;
font-weight: 500;
transition:
background-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
border-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease);
}
.ize-fp-chip input:checked + span {
background: var(--fn-accent);
border-color: var(--fn-accent);
color: var(--fn-on-accent);
}
.ize-fp-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--fn-accent-rgb), .3); }
/* ---- "More" disclosure for the secondary filters ---------------------------
Sounds / Files / Maps are real and useful, and rare. On the same row as
All / Text / Photos / Videos they compete for attention with the four a
reader understands without thinking. Behind this they are still one tap away
and no longer part of the first read. Both rows are the SAME radio group, so
the selection is still exactly one value. */
.ize-fp-more {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
gap: 3px;
min-height: 40px;
margin: 6px 8px 0;
padding: 0 10px 0 12px;
border: 0;
border-radius: 20px;
background: transparent;
color: var(--fn-ink-2);
font-size: 14px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
color var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease);
}
.ize-fp-more:hover { background: var(--fn-press); color: var(--fn-ink); }
.ize-fp-more:focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 2px; }
.ize-fp-more-label { pointer-events: none; }
.ize-fp-more-caret {
pointer-events: none; /* the button is the target, never its children */
transition: transform var(--ize-mo-t-quick, 200ms) var(--ize-mo-e-glide, ease);
}
.ize-fp-more.is-open { color: var(--fn-ink); }
.ize-fp-more.is-open .ize-fp-more-caret { transform: rotate(180deg); }
.ize-fp-more-chips { padding-top: 2px; }
.ize-fp-more-chips[hidden] { display: none; }
.ize-fp-foot {
flex: 0 0 auto;
display: flex;
gap: 10px;
padding: 10px 16px calc(14px + var(--ize-safe-bottom, 0px));
border-top: 1px solid var(--fn-hair);
}
.ize-fp-btn {
appearance: none;
-webkit-appearance: none;
flex: 1 1 auto;
min-height: 48px;
border-radius: 24px;
border: 1px solid var(--fn-hair);
background: transparent;
color: var(--fn-ink);
font-size: 15px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease),
opacity var(--ize-mo-t-fast, 140ms) linear;
}
.ize-fp-btn:not(:disabled):active { transform: scale(var(--ize-mo-press, .96)); }
.ize-fp-reset { flex: 0 0 34%; }
.ize-fp-apply {
background: var(--fn-accent);
border-color: var(--fn-accent);
color: var(--fn-on-accent);
}
/* Nothing staged to commit. Apply is the one control here that could look like
it did nothing, so it says so up front rather than absorbing a tap. Still
legible (not ghosted away) because it is also the label for what the footer
is FOR. */
.ize-fp-apply:disabled {
background: var(--fn-surface-2);
border-color: transparent;
color: var(--fn-ink-2);
cursor: default;
}
/* Page scroll lock. Same contract as ize-post-sheet.css / the comment sheet:
stop the page scrolling, never MOVE it, so dismissing the sheet lands the
reader exactly where they were in the feed. */
html.ize-fp-lock,
body.ize-fp-lock { overflow: hidden; }
/* ---------- The AI assistant FAB vs. modal sheets ---------------------------
#ize-ai-fab is fixed at z-index 2147483000 — above literally everything,
including any modal sheet. So the robot button floats over the scrim, on top
of the sheet's own controls, and is the one thing still tappable there: a
control that both covers content and steals the target underneath it (§17).
It is dismissed for the duration of any locked sheet, keyed off the lock
classes those sheets already set. Two selectors, no JavaScript, and it covers
the post options sheet (.ize-ps-lock, which had the same collision) as well
as Feed preferences. pointer-events matters as much as opacity here — a
fully transparent FAB still swallows taps. */
html.ize-fp-lock #ize-ai-fab,
html.ize-ps-lock #ize-ai-fab {
opacity: 0;
pointer-events: none;
transform: scale(.8);
transition:
opacity var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-exit, ease),
transform var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-exit, ease);
}
/* =============================================================================
3. EMPTY STATES
========================================================================== */
.ize-fe {
background: var(--fn-surface);
border-radius: 16px;
box-shadow: var(--fn-shadow);
padding: 34px 24px 30px;
margin-bottom: 15px;
text-align: center;
color: var(--fn-ink);
}
.ize-fe-icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(var(--fn-accent-rgb), .10);
color: var(--fn-accent);
}
.ize-fe-title {
margin: 0 0 6px;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
color: var(--fn-ink);
}
.ize-fe-text {
margin: 0 auto 18px;
max-width: 34em;
font-size: 14px;
line-height: 1.5;
color: var(--fn-ink-2);
}
.ize-fe-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 24px;
border: 0;
border-radius: 23px;
background: var(--fn-accent);
color: var(--fn-on-accent) !important;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform var(--ize-mo-t-fast, 140ms) var(--ize-mo-e-standard, ease);
}
.ize-fe-cta:active { transform: scale(var(--ize-mo-press, .96)); }
.ize-fe-cta:focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 3px; }
/* =============================================================================
4. TIGHTEN WHAT THE OLD BAR LEFT BEHIND
-----------------------------------------------------------------------------
Removing `.tag_home_filters` also removed the element those two margins were
negotiating with, so the Stories block was left holding 30px of bottom margin
plus a 29px gap before a decorative
. That is most of a thumb of empty
space between "who posted a story" and "post something" for no reason —
§16's "reach meaningful content quickly". Scoped to the home page only, so
Stories anywhere else is untouched.
========================================================================== */
.page-margin .tag_stories_on_home { margin-bottom: 14px; }
.page-margin .tag_stories_on_home + hr.style-two { margin-top: 0; margin-bottom: 14px; }
@media (max-width: 991px) {
.ize-fn { margin-bottom: 10px; }
.ize-fn-tab { padding: 12px 12px 11px; font-size: 14.5px; }
}
/* Very narrow phones: let the three labels breathe rather than scroll. */
@media (max-width: 359px) {
.ize-fn-tab { padding: 12px 9px 11px; font-size: 14px; }
.ize-fn-prefs { width: 36px; height: 36px; }
}
/* Reduce Motion: the motion system already scales durations to 0 through
--ize-mo-scale, but the sheet must still be usable if it is loaded alone. */
@media (prefers-reduced-motion: reduce) {
.ize-fn-ink,
.ize-fp-scrim,
.ize-fp-sheet,
.ize-fp-mark::after { transition-duration: 1ms !important; }
}