/* --------------------------------------------------------------------- RTL-first. Everything below uses logical properties (inline-start/end, margin-inline, etc.) rather than left/right, so flipping `dir` on mirrors the whole layout with no extra rules. --------------------------------------------------------------------- */ :root { /* Cards are a LIGHT frost, not a dark tint -- they should lift off the photo rather than sink into it. Raise these alphas for more presence, lower them for more of the river showing through. */ --glass: rgba(255, 255, 255, 0.15); --glass-hover: rgba(255, 255, 255, 0.24); --glass-active: rgba(255, 255, 255, 0.32); --edge: rgba(255, 255, 255, 0.30); --edge-soft: rgba(255, 255, 255, 0.17); --ink: #f4f8f6; --ink-dim: rgba(244, 248, 246, 0.66); --ink-faint: rgba(244, 248, 246, 0.42); --radius: 20px; --radius-sm: 14px; --shadow: 0 8px 32px rgba(0, 20, 14, 0.28); --col: clamp(240px, 26vw, 310px); /* --- backdrop knobs: turn these two to taste ------------------------ --bg-brightness 1 = the photo untouched, lower = darker --veil opacity of the dark wash over it, 0 = none Text contrast comes mostly from the frosted cards, so the photo can stay fairly bright without the titles becoming hard to read. */ --bg-brightness: 0.95; --bg-blur: 20px; --veil: 0.22; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Rubik, system-ui, -apple-system, Arial, sans-serif; color: var(--ink); background: #0d1a16; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Blurred nature backdrop. Inset negative so the blur radius never exposes a soft edge at the viewport border. */ body::before { content: ""; position: fixed; inset: -60px; background: url("/_lp/assets/bg.jpg") center / cover no-repeat; filter: blur(var(--bg-blur)) saturate(122%) brightness(var(--bg-brightness)); transform: scale(1.05); z-index: -2; } /* Light wash for depth -- just enough that white text stays legible over the brightest parts of the water. */ body::after { content: ""; position: fixed; inset: 0; background: linear-gradient( to bottom, rgba(6, 26, 20, calc(var(--veil) * 0.55)), rgba(4, 18, 14, var(--veil)) ); z-index: -1; pointer-events: none; } .loading { padding: 4rem; text-align: center; color: var(--ink-dim); } /* ---------------------------------------------------------------- shell */ .page { max-width: 1180px; margin-inline: auto; padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem; } .profile { text-align: center; margin-block-end: clamp(1.75rem, 4vw, 2.75rem); } .avatar { inline-size: 92px; block-size: 92px; border-radius: 50%; object-fit: cover; border: 2px solid var(--edge); box-shadow: var(--shadow); background: var(--glass); } .avatar-blank { display: inline-block; background: var(--glass); backdrop-filter: blur(10px); } .name { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0.7rem 0 0.2rem; font-weight: 650; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0, 20, 14, 0.5); } .bio { margin: 0; color: var(--ink-dim); font-size: 1rem; } /* Feed first in source order -> lands in the inline-start column, which is the RIGHT side under dir="rtl". Channels take the left. */ .columns { display: grid; grid-template-columns: minmax(0, 1fr) var(--col); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; } /* ------------------------------------------------------------- surfaces */ .card { background: var(--glass); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--edge-soft); border-radius: var(--radius); box-shadow: var(--shadow); } /* ---------------------------------------------------------------- feed */ .feed { display: flex; flex-direction: column; gap: 0.85rem; } .feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-inline: 0.35rem; margin-block-end: 0.15rem; } .feed-title { margin: 0; font-size: 1.05rem; font-weight: 600; } .feed-count { color: var(--ink-faint); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .post { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1.1rem; text-decoration: none; color: inherit; transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .post:hover, .post:focus-visible { background: var(--glass-hover); border-color: var(--edge); /* move toward the inline start (right in RTL) on hover */ transform: translateX(var(--nudge, -3px)); } [dir="rtl"] .post:hover, [dir="rtl"] .post:focus-visible { --nudge: 3px; } /* Thumbnail tile. Falls back to a plain icon tile when a post has no image (e.g. a manually added TikTok link). */ .post-media { flex: 0 0 auto; position: relative; inline-size: 78px; block-size: 54px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.13); display: grid; place-items: center; } .post-thumb { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* Sits over the thumbnail's corner so the source stays readable. */ .post-badge { position: absolute; inset-block-end: 3px; inset-inline-end: 3px; inline-size: 17px; block-size: 17px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0, 16, 12, 0.55); } /* No image: centre the icon and let it carry the tile. */ .post-media.no-thumb .post-badge { position: static; inline-size: 26px; block-size: 26px; border-radius: 8px; box-shadow: none; } .post-body { min-inline-size: 0; flex: 1 1 auto; } .post-title { display: block; font-size: 0.97rem; font-weight: 500; /* two-line clamp keeps every card the same height */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-meta { margin-block-start: 0.2rem; font-size: 0.78rem; color: var(--ink-faint); display: flex; gap: 0.5rem; flex-wrap: wrap; } .post-meta time { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- pager */ .pager { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-block-start: 0.6rem; padding: 0.5rem; } .pager button { font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--edge-soft); border-radius: 999px; padding: 0.45rem 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.18s ease, opacity 0.18s ease; } .pager button:hover:not(:disabled) { background: var(--glass-hover); } .pager button:disabled { opacity: 0.32; cursor: default; } /* Chevrons are written as ‹ › and flipped by direction automatically since they sit in the text flow -- no manual mirroring needed. */ .pager .pos { font-size: 0.85rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; min-inline-size: 4.5rem; text-align: center; } /* ------------------------------------------------------------ channels */ .channels { display: flex; flex-direction: column; gap: 0.7rem; position: sticky; top: 1.25rem; } .channels h2 { margin: 0 0 0.15rem; padding-inline: 0.35rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); } .channel { display: flex; align-items: center; gap: 0.75rem; inline-size: 100%; padding: 0.8rem 0.95rem; font: inherit; font-size: 0.95rem; text-align: start; color: inherit; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .channel:hover { background: var(--glass-hover); } .channel[aria-pressed="true"] { background: var(--glass-active); border-color: var(--edge); } .channel-icon { flex: 0 0 auto; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.13); } .channel-icon img { inline-size: 18px; block-size: 18px; opacity: 0.94; } .channel-name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-count { flex: 0 0 auto; font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .channel-visit { display: block; padding: 0.55rem 0.95rem; font-size: 0.82rem; color: var(--ink-dim); text-decoration: none; border-radius: var(--radius-sm); transition: background 0.18s ease; } .channel-visit:hover { background: var(--glass-hover); color: var(--ink); } /* ---------------------------------------------------------- misc/empty */ .empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-dim); } .foot { margin-block-start: 2.5rem; text-align: center; font-size: 0.78rem; color: var(--ink-faint); } .foot a { color: inherit; } /* ---------------------------------------------------------- responsive */ @media (max-width: 820px) { .columns { grid-template-columns: minmax(0, 1fr); } /* Channels pin to the bottom of the viewport as an app-style nav bar, so they're always reachable while the feed scrolls behind them. They WRAP rather than scroll sideways -- off-screen chips in a fixed bar have no affordance and simply go unnoticed. Labels stay because two YouTube channels (and three blogs) share an icon and would otherwise be indistinguishable. */ .channels { /* physical offsets on purpose: the bar spans the full width, so there is nothing to mirror, and left/right/bottom work everywhere */ position: fixed; /* MUST clear the desktop `top: 1.25rem` from the sticky rule. A fixed element with both top and bottom set stretches between them -- that turned this bar into a full-height translucent sheet covering the whole page. */ top: auto; left: 0; right: 0; bottom: 0; width: 100%; z-index: 20; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0.4rem; margin: 0; padding: 0.55rem 0.6rem; /* clear of the iOS home indicator */ padding-block-end: calc(0.55rem + env(safe-area-inset-bottom, 0px)); background: rgba(8, 22, 17, 0.55); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-block-start: 1px solid var(--edge-soft); } .channels h2 { display: none; } .channel { inline-size: auto; flex: 0 1 auto; white-space: nowrap; max-inline-size: 46vw; padding: 0.4rem 0.6rem; font-size: 0.8rem; gap: 0.4rem; border-radius: 999px; } .channel-icon { inline-size: 22px; block-size: 22px; border-radius: 7px; } .channel-icon img { inline-size: 13px; block-size: 13px; } .channel-count, .channel-visit { display: none; } /* leave room so the last card and the pager clear the fixed bar. Plain value first, so the page still gets clearance if calc()/env() is unsupported and the second declaration is dropped. */ .page { padding-bottom: 8rem; padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); } } /* The backdrop is a landscape photo. On a portrait screen `cover` crops to its vertical middle -- the dark forest band -- and the river never appears. Biasing the crop downward brings the water back into frame. */ @media (orientation: portrait) { body::before { background-position: center 68%; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }