/* ========================================================================== شبکه کلمه فارسی — Kalameh Farsi TV Themed design system. LIGHT is the default; DARK is an override selected by . Components read SEMANTIC tokens (--accent, --inset, --chip-*, --hover-border, --headline-hover…) so a single set of overrides flips the whole site. Keep component rules token-based — don't hardcode a colour that only works in one theme. ========================================================================== */ /* ---------- Fonts (self-hosted: CDNs are unreliable for our audience) ---- */ @font-face { font-family: 'Vazirmatn'; src: url('assets/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('assets/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('assets/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } /* ---------- Tokens ------------------------------------------------------ */ :root { /* Brand green, sampled from the quill logo. --green is the FILL (badges/bars behind dark text); on white it is too light to read AS text, so text/links use --green-deep / --green-ink. */ --green: #A8D62E; /* fill / accent bars */ --green-bright: #B9E33C; /* hover fill */ --green-deep: #4C6B14; /* links & small accents on white */ --green-ink: #3A520F; /* strongest green text */ --green-wash: #F0F5DE; /* faint green tint for chips/panels */ --live: #D91E12; /* news red — deeper than screen-red for contrast */ --bg: #F5F4EE; /* warm paper */ --bg-2: #EDEBE2; /* footer, slightly deeper */ --surface: #FFFFFF; /* cards */ --surface-2: #F1EFE7; /* hover / inset */ --border: #E3E1D6; --border-soft: #ECEAE0; --text: #1B1E15; /* warm near-black ink */ --text-dim: #56604A; /* muted body */ --text-mute: #8C9179; /* captions / meta */ --r-sm: 8px; --r: 14px; --r-lg: 20px; --maxw: 1280px; --gap: 24px; --shadow: 0 6px 22px rgba(31, 38, 18, 0.10); /* --- semantic tokens (LIGHT defaults) --- */ --glow: transparent; /* ambient top glow: dark only */ --header-bg: rgba(255, 255, 255, 0.88); --hover-border: #CBDDA0; /* card hover edge */ --headline-hover: var(--green-deep); /* headline colour on hover */ --accent: var(--green-deep); /* small green text / icons */ --chip-fill: var(--green-wash); --chip-text: var(--green-ink); --chip-border: rgba(168,214,46,.45); --shimmer-mid: #E4E2D8; /* skeleton shimmer highlight */ --inset: var(--surface-2); /* recessed panels (sat rows) */ --live-tint: rgba(217,30,18,.08); --live-tint-border:rgba(217,30,18,.30); } /* ============================ DARK THEME ================================= */ :root[data-theme="dark"] { --green: #A8D62E; --green-bright: #C9F04B; --green-deep: #5F8F14; --green-ink: #C9F04B; --green-wash: rgba(168,214,46,.10); --live: #FF3B30; --bg: #090B08; --bg-2: #0E120C; --surface: #121710; --surface-2: #171D14; --border: #242C1D; --border-soft: #1B2116; --text: #EFF3E9; --text-dim: #A7B29A; --text-mute: #6F7A66; --shadow: 0 8px 30px rgba(0,0,0,.5); --glow: radial-gradient(90% 60% at 70% -10%, rgba(168,214,46,.18), transparent 70%); --header-bg: rgba(9, 11, 8, 0.82); --hover-border: #33401F; --headline-hover: #ffffff; --accent: var(--green); --chip-fill: rgba(168,214,46,.11); --chip-text: var(--green); --chip-border: rgba(168,214,46,.24); --shimmer-mid: #1E2519; --inset: rgba(0,0,0,.28); --live-tint: rgba(255,59,48,.12); --live-tint-border:rgba(255,59,48,.35); } /* ---------- Reset ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The header is sticky, so anything jumped to by an #anchor would slide under it. Reserve its height (68px desktop / 56px phone — see .hdr) on every scroll-into-view the browser performs. */ /* readable by search engines and screen readers, invisible on screen */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html { scroll-behavior: smooth; scroll-padding-top: 76px; } @media (max-width: 760px) { html { scroll-padding-top: 62px; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* Ambient brand glow — transparent in light (--glow), shown only in dark. */ body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 70vh; background: var(--glow); pointer-events: none; z-index: 0; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } /* ---------- Section headers -------------------------------------------- */ .sec { position: relative; z-index: 1; padding: 72px 0; } .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; } .sec-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; } .sec-head h2::before { content: ''; display: inline-block; width: 5px; height: 0.95em; margin-inline-end: 12px; background: linear-gradient(180deg, var(--green), var(--green-deep)); border-radius: 3px; vertical-align: -0.1em; } .sec-head .sub { color: var(--text-mute); font-size: .92rem; } .sec-head .spacer { flex: 1; } /* ---------- Header ------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(14px); border-top: 3px solid var(--green); /* masthead rule */ border-bottom: 1px solid var(--border); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06); } .hdr { display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 11px; } .brand img { height: 40px; width: auto; } .brand-txt { display: flex; flex-direction: column; line-height: 1.15; } .brand-txt b { font-size: 1.02rem; font-weight: 800; } /* the sub-line follows the language (see UI.brandSub); letter-spacing is a Latin device — it breaks Arabic/Persian connected letterforms, so it only applies to the English edition. */ .brand-txt span { font-size: .68rem; color: var(--text-mute); } html[lang="en"] .brand-txt span { letter-spacing: .08em; } .nav { display: flex; gap: 4px; margin-inline-start: 18px; } .nav a { padding: 7px 13px; border-radius: 999px; color: var(--text-dim); font-size: .93rem; font-weight: 600; transition: color .18s, background .18s; } .nav a:hover { color: var(--text); background: var(--surface-2); } .hdr .spacer { flex: 1; } .live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--live-tint); border: 1px solid var(--live-tint-border); color: var(--live); font-size: .8rem; font-weight: 800; letter-spacing: .04em; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(217,30,18,.55); animation: pulse 1.9s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(217,30,18,0); } 100% { box-shadow: 0 0 0 0 rgba(217,30,18,0); } } .socials { display: flex; gap: 6px; } .socials a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--text-dim); border: 1px solid var(--border-soft); transition: all .18s; } .socials a { color: var(--text-dim); } .socials a:hover { color: #16200A; background: var(--green); border-color: var(--green); } .socials svg { width: 17px; height: 17px; fill: currentColor; } .burger { display: none; background: none; border: 0; color: var(--text); padding: 6px; } .burger svg { width: 26px; height: 26px; fill: currentColor; } /* ---------- Language switcher ------------------------------------------- */ .lang { display: flex; gap: 2px; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .lang button { border: 0; background: transparent; color: var(--text-mute); font-size: .78rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; transition: color .15s, background .15s; } .lang button.on { background: var(--green); color: #16200A; } .lang button:not(.on):hover { color: var(--text); } /* ---------- Theme toggle ------------------------------------------------ */ .theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--text-dim); background: transparent; border: 1px solid var(--border-soft); transition: all .18s; flex-shrink: 0; } .theme-toggle:hover { color: #16200A; background: var(--green); border-color: var(--green); } .theme-toggle svg { width: 17px; height: 17px; fill: currentColor; } /* show the sun in dark mode (to go light), the moon in light mode */ .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } /* footer variant: a labelled text button */ .theme-toggle-foot { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--border); color: var(--text-mute); border-radius: 8px; padding: 6px 12px; font-size: .82rem; font-weight: 600; transition: all .18s; } .theme-toggle-foot:hover { color: var(--text); border-color: var(--accent); } .theme-toggle-foot svg { width: 15px; height: 15px; fill: currentColor; } .theme-toggle-foot .i-sun { display: none; } .theme-toggle-foot .i-moon { display: inline-block; } :root[data-theme="dark"] .theme-toggle-foot .i-sun { display: inline-block; } :root[data-theme="dark"] .theme-toggle-foot .i-moon { display: none; } .theme-toggle-foot .lbl-light { display: none; } .theme-toggle-foot .lbl-dark { display: inline; } :root[data-theme="dark"] .theme-toggle-foot .lbl-light { display: inline; } :root[data-theme="dark"] .theme-toggle-foot .lbl-dark { display: none; } /* menu variant: last row of the phone drop-down, under the nav links. Hidden on desktop, where the icon button in the header is used instead. */ .nav-theme { display: none; } @media (max-width: 760px) { .nav-theme { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 6px; padding: 10px 13px; border: 0; border-top: 1px solid var(--border-soft); border-radius: 0; background: transparent; color: var(--text-dim); font-size: .93rem; font-weight: 600; font-family: inherit; text-align: start; cursor: pointer; } .nav-theme svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; } .nav-theme .i-sun { display: none; } .nav-theme .i-moon { display: block; } :root[data-theme="dark"] .nav-theme .i-sun { display: block; } :root[data-theme="dark"] .nav-theme .i-moon { display: none; } .nav-theme .lbl-light { display: none; } .nav-theme .lbl-dark { display: inline; } :root[data-theme="dark"] .nav-theme .lbl-light { display: inline; } :root[data-theme="dark"] .nav-theme .lbl-dark { display: none; } } /* ---------- Hero / player ---------------------------------------------- */ /* the ticker used to sit above the player; now that the player is the first thing under the header, it needs less of a gap */ .hero { position: relative; z-index: 1; padding: 22px 0 8px; } .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--gap); align-items: start; } .player-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid var(--border); box-shadow: var(--shadow); } /* The HLS signal (1280x720) carries the channel's OWN red lower-third ticker burned into the bottom of the frame, plus a "Powered by WNS" bug. Our own breaking ticker now sits immediately below the player, so that band was the same news shown twice. We crop the bottom 10% of the picture away. Measured on the live frame: the red band begins at 90% of the height, but a sliver of its top edge still showed at 90%, so the crop is 12%. The two numbers below are linked — keep them in step if the crop changes: aspect-ratio 16 / 7.92 = 16/9 with 12% of the height removed video height 113.637% = 100 / 0.88, so the cropped band falls outside Because the video box then matches the source's own 16:9 exactly, `cover` neither distorts nor letterboxes — it just gets clipped at the bottom. */ .player-ratio { position: relative; aspect-ratio: 16 / 7.92; background: #000; overflow: hidden; } .player-ratio video { width: 100%; height: 113.637%; object-fit: cover; object-position: top center; background: #000; display: block; } /* One control row, pinned to the TOP-LEFT of the picture: sound button, then the live light beside it. `left`/`top` are physical on purpose. Both used to be direction-relative, so English mirrored them to the right — the sound button jumped sides and the light landed on the channel's own logo, which is burned into the signal at the top-right of the frame. The picture is the same picture in every language, so these must not follow the text direction. It is a flex row rather than two absolutely-placed elements because the button CHANGES WIDTH: a full labelled pill while muted, a 38px circle once the sound is on. The gap keeps the light correctly beside it either way, with no width to hard-code. z-index 3 keeps the row UNDER the connecting/offline overlays (z-index 4), which are full-bleed takeovers that should not have controls floating on them. The button is display:none whenever one of those is up, so the two never actually compete. */ .player-controls { position: absolute; z-index: 3; top: 14px; left: 14px; display: flex; align-items: center; gap: 12px; /* A flex row reverses its order under RTL, which put the light on the far side of the button in fa/ar and beside it in en — two different layouts over the same picture. Pinning the row to ltr keeps "button, then light" everywhere. The button's own contents are switched back below so its icon and Arabic/Persian label still read naturally. */ direction: ltr; } [dir="rtl"] .player-controls .unmute-fab { direction: rtl; } /* Live light — a recording-style dot, not a labelled badge. */ .live-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px rgba(0,0,0,.34), 0 0 10px 3px rgba(255,59,48,.75); animation: liveBlink 2s ease-in-out infinite; } @keyframes liveBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .42; transform: scale(.84); } } /* stream down: the light goes dark and stops breathing, so the dot answers "are we on air?" rather than just decorating the corner */ .live-dot.is-off { background: #8c9186; animation: none; box-shadow: 0 0 0 2px rgba(0,0,0,.3); } /* overlay states: loading / offline / tap-to-unmute. These sit over the BLACK video area, so their text stays light. */ .player-state { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; text-align: center; background: rgba(6,8,5,.9); backdrop-filter: blur(4px); padding: 24px; color: #fff; } .player-state.show { display: grid; } .player-state h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; color: #fff; } .player-state p { margin: 0 0 18px; color: rgba(255,255,255,.78); font-size: .93rem; max-width: 42ch; } .spinner { width: 38px; height: 38px; margin: 0 auto 16px; border: 3px solid rgba(168,214,46,.2); border-top-color: var(--green); border-radius: 50%; animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 10px; border: 0; background: var(--green); color: #10160A; font-weight: 800; font-size: .95rem; transition: transform .15s, background .18s; } .btn:hover { background: var(--green-bright); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--green); } .btn svg { width: 17px; height: 17px; fill: currentColor; } /* Top-left, opposite the LIVE badge. The broadcast signal carries its own burned-in lower-third ticker, so the bottom of the frame must stay clear. */ /* Placed by .player-controls above — no absolute offsets of its own. */ .unmute-fab { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; background: rgba(168,214,46,.94); color: #10160A; font-weight: 800; font-size: .88rem; box-shadow: 0 6px 20px rgba(0,0,0,.45); } .unmute-fab.show { display: inline-flex; } .unmute-fab svg { width: 16px; height: 16px; fill: currentColor; } /* Only one of the two icons is ever drawn. Default (muted) = the crossed-out speaker; .is-on swaps to the sounding speaker. */ .unmute-fab .ico-sound { display: none; } .unmute-fab.is-on .ico-sound { display: block; } .unmute-fab.is-on .ico-muted { display: none; } /* Muted is a call to action, so it stays a full green pill. Once the sound is ON that job is done — it shrinks to a quiet circle that still gives the reader a way back to silence, instead of disappearing as it used to. */ .unmute-fab.is-on { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.4); } .unmute-fab.is-on .unmute-label { display: none; } .unmute-fab.is-on:hover { background: rgba(0,0,0,.72); } .player-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: var(--surface); border-top: 1px solid var(--border); } .player-meta .title { font-weight: 800; font-size: 1.02rem; } .player-meta .sep { color: var(--text-mute); } .player-meta .muted { color: var(--text-dim); font-size: .9rem; } .player-meta .spacer { flex: 1; } .quality { font-size: .74rem; font-weight: 700; color: var(--text-mute); border: 1px solid var(--border); padding: 3px 9px; border-radius: 6px; } /* ---------- Photo gallery (from the socials feed) ----------------------- */ /* Photos only — no captions. Feed titles are junk ("posted a photo"). */ .photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } /* Uniform 4:5 cells. The feed mixes 640x800 originals with occasional 180x320 thumbnails, so no cell is enlarged — a small source in a big hero slot looks visibly soft. 4:5 also matches the native Instagram crop. */ .photo-item { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); aspect-ratio: 4 / 5; cursor: zoom-in; } .photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,0,.2,1), opacity .4s; opacity: 0; } .photo-item img.loaded { opacity: 1; } .photo-item:hover img { transform: scale(1.06); } .photo-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); opacity: 0; transition: opacity .3s; } .photo-item:hover::after { opacity: 1; } .photo-date { position: absolute; z-index: 2; bottom: 11px; inset-inline-start: 13px; font-size: .78rem; font-weight: 700; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; text-shadow: 0 1px 6px rgba(0,0,0,.7); } .photo-item:hover .photo-date { opacity: 1; transform: none; } .photo-item.skel { animation: shimmer 1.4s infinite; background: linear-gradient(90deg, var(--surface-2) 25%, #E4E2D8 50%, var(--surface-2) 75%); background-size: 200% 100%; cursor: default; } /* ---------- Lightbox ---------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(4,6,3,.94); backdrop-filter: blur(8px); padding: 40px 20px; } .lightbox.open { display: flex; } .lightbox img { max-width: min(1100px, 94vw); max-height: 88vh; object-fit: contain; border-radius: var(--r); box-shadow: 0 20px 70px rgba(0,0,0,.7); } .lb-close { position: absolute; top: 20px; inset-inline-end: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 1.9rem; line-height: 1; display: grid; place-items: center; } .lb-close:hover { background: var(--green); color: #10160A; border-color: var(--green); } /* ---------- Gallery: sort chips + view badges --------------------------- */ .gsort { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .gsort button { border: 0; background: transparent; color: var(--text-dim); font-size: .82rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; transition: color .15s, background .15s; } .gsort button.on { background: var(--green); color: #16200A; } .gsort button:not(.on):hover { color: var(--text); } /* caption teaser + view count sit at the foot of each card */ .photo-foot { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 22px 11px 9px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(to top, rgba(0,0,0,.82), transparent); opacity: 1; } .photo-views { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .photo-views svg { width: 13px; height: 13px; fill: var(--green-bright); } .photo-cap { font-size: .76rem; font-weight: 600; color: #fff; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-shadow: 0 1px 5px rgba(0,0,0,.75); } .photo-badge { position: absolute; z-index: 3; top: 9px; inset-inline-start: 9px; display: inline-flex; align-items: center; gap: 4px; background: var(--green); color: #16200A; font-size: .66rem; font-weight: 800; padding: 3px 8px; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .photo-badge svg { width: 12px; height: 12px; fill: currentColor; } .photo-item[role="button"] { cursor: pointer; } /* ---------- Post detail modal ------------------------------------------- */ .post-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(4,6,3,.82); backdrop-filter: blur(8px); padding: 26px; } .post-modal.open { display: flex; } .pm-box { position: relative; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); width: min(1040px, 100%); max-height: 88vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.6); } .pm-media { background: #000; display: flex; align-items: center; justify-content: center; } .pm-media img { width: 100%; height: 100%; max-height: 88vh; object-fit: contain; } .pm-detail { padding: 26px 26px 24px; overflow-y: auto; } .pm-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--text-mute); margin-bottom: 12px; } .pm-views { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--accent); } .pm-views svg { width: 15px; height: 15px; fill: var(--accent); } .pm-detail h3 { margin: 0 0 14px; font-size: 1.28rem; font-weight: 800; line-height: 1.55; } .pm-detail p { margin: 0 0 20px; font-size: .96rem; line-height: 2; color: var(--text-dim); white-space: pre-line; } .pm-close { position: absolute; z-index: 4; top: 12px; inset-inline-end: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; } .pm-close:hover { background: var(--green); } .pm-close:hover svg { fill: #16200A; } .pm-close svg { width: 20px; height: 20px; fill: #fff; } /* share row inside the article pop-up */ .pm-share { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .pm-share-label { font-size: .82rem; font-weight: 700; color: var(--text-mute); } .sh { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; position: relative; transition: transform .15s, background .18s, border-color .18s; } .sh:hover { transform: translateY(-2px); } .sh svg { width: 18px; height: 18px; fill: var(--text-dim); transition: fill .18s; } .sh-wa:hover { background: #25D366; border-color: #25D366; } .sh-tg:hover { background: #229ED9; border-color: #229ED9; } .sh-x:hover { background: #111; border-color: #111; } .sh-fb:hover { background: #1877F2; border-color: #1877F2; } .sh-copy:hover { background: var(--green); border-color: var(--green); } .sh:hover svg { fill: #fff; } .sh-copy:hover svg { fill: #16200A; } .sh-copied { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 50%; transform: translateX(50%) translateY(4px); background: var(--text); color: var(--bg); font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } [dir="ltr"] .sh-copied { transform: translateX(-50%) translateY(4px); } .sh-copied.show { opacity: 1; transform: translateX(50%) translateY(0); } [dir="ltr"] .sh-copied.show { transform: translateX(-50%) translateY(0); } /* pop-up detail now leads with the headline (date/views removed) */ .pm-detail h3 { margin-top: 0; } /* ---------- Videos (YouTube) -------------------------------------------- */ .sec-link { font-size: .85rem; color: var(--accent); font-weight: 700; } .sec-link:hover { text-decoration: underline; } .vid-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } .vid { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s; } .vid:hover { border-color: var(--hover-border); transform: translateY(-3px); } .vid-thumb { position: relative; aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; } .vid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .vid:hover .vid-thumb img { transform: scale(1.05); } .vid-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%); } .vid-play svg { width: 46px; height: 46px; fill: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); transition: fill .2s, transform .2s; } .vid:hover .vid-play svg { fill: var(--green); transform: scale(1.08); } .vid-body { padding: 12px 13px; } .vid-body h3 { margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .vid-show { margin-top: 6px; font-size: .74rem; color: var(--accent); font-weight: 700; } /* ---- programme carousels (same .vid card, horizontal rail) -------------- Scroll-snap + native overflow rather than a JS slider: it stays swipeable on touch, keyboard-scrollable, and it flips direction with the document automatically in the RTL editions. */ .vid-rail { /* a FIXED track width, not minmax(0,…) — an auto-column with a 0 minimum shrinks to fit the container instead of overflowing, and then there is nothing to scroll */ display: grid; grid-auto-flow: column; grid-auto-columns: 270px; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; /* room for the scrollbar */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .vid-rail > .vid { scroll-snap-align: start; } .vid-rail::-webkit-scrollbar { height: 6px; } .vid-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .vid-rail::-webkit-scrollbar-track { background: transparent; } /* styling the scrollbar at all makes Chrome/Windows draw its stepper arrows at both ends of the track — they read as stray triangles under the rail */ .vid-rail::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* ---------- «مهم‌ترین اخبار» rail -------------------------------------- Replaces the old three-card sub-grid. It rides the shared .vid-rail scroller (fixed track width, RTL-safe arrows) so nothing about the scrolling behaviour had to be re-solved. Whatever lands here is filtered OUT of آخرین اخبار — see featuredIds in app.js. */ .top-rail-wrap { margin-top: 34px; } .top-rail-wrap .sec-head { margin-bottom: 18px; } .news-rail > .rail-card { scroll-snap-align: start; } .rail-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; } .rail-card:hover { border-color: var(--hover-border); transform: translateY(-2px); box-shadow: var(--shadow); } .rail-card:hover h3 { color: var(--headline-hover); } .rail-media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; } .rail-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rail-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 8px; } .rail-body h3 { margin: 0; font-size: .97rem; font-weight: 700; line-height: 1.5; transition: color .18s; /* three lines max, so every card in the rail is the same height */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rail-time { color: var(--text-mute); font-size: .8rem; } .car-nav { display: flex; gap: 8px; } .car-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-dim); cursor: pointer; transition: border-color .2s, color .2s, background .2s, opacity .2s; } .car-btn:hover:not(:disabled) { border-color: var(--hover-border); color: var(--text); background: var(--surface-2); } .car-btn:disabled { opacity: .35; cursor: default; } .car-btn svg { width: 20px; height: 20px; fill: currentColor; } /* the chevrons are drawn pointing left/right — in RTL "previous" is the one on the right, so mirror the glyphs instead of shipping a second icon set */ [dir="rtl"] .car-btn svg { transform: scaleX(-1); } .video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(4,6,3,.9); backdrop-filter: blur(10px); padding: 24px; } .video-modal.open { display: flex; } .vm-box { position: relative; width: min(960px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.6); } .vm-frame { position: relative; aspect-ratio: 16/9; background: #000; } .vm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vm-cap { padding: 14px 18px; } .vm-cap h3 { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.6; } @media (max-width: 1100px) { .vid-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 760px) { .vid-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .video-modal { padding: 0; } .vm-box { border-radius: 0; border: 0; } /* rails stay rails on phones — swipe is the natural gesture — just narrower cards, and the arrows go away since there is nothing to click with */ .vid-rail { grid-auto-columns: 78%; gap: 10px; } .car-nav { display: none; } } /* ---------- Breaking ticker -------------------------------------------- */ .ticker { position: relative; z-index: 2; background: linear-gradient(90deg, var(--surface-2), var(--surface)); border-block: 1px solid var(--border); display: flex; align-items: stretch; overflow: hidden; } .ticker-label { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 20px; background: var(--live); color: #fff; font-weight: 800; font-size: .86rem; letter-spacing: .04em; } .ticker-label .dot { background: #fff; box-shadow: none; animation: none; } .ticker-view { flex: 1; overflow: hidden; position: relative; } .ticker-track { display: flex; align-items: center; gap: 46px; height: 46px; white-space: nowrap; width: max-content; /* Headlines travel left-to-right — confirmed by the channel as correct for their Persian ticker. Add `reverse` to flip it. */ animation: ticker-rtl 70s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } /* inside the player card the meta row below already draws a top border, and the card's own radius/overflow handles the outer edges */ .player-card .ticker { border-block-end: 0; z-index: 3; } /* Headlines are plain text, not links — the ticker is for glancing at, the cards below are what you click. */ .ticker-item { font-size: .9rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 10px; } .ticker-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* RTL: content starts right, travels left */ @keyframes ticker-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } /* LTR (English) needs the OPPOSITE translation, not the same one. The headline list is rendered twice and the marquee slides the track by half its width. Under RTL the track hangs off to the LEFT of the view, so +50% pulls the second copy into place seamlessly. Under LTR the track starts at the LEFT edge with nothing behind it, so that same +50% pushes the headlines off to the right and drags a growing empty gap behind them — measured 1045px of blank track on /en/, which is the break the channel saw after the first few items. Sliding to -50% scrolls the copies through the view seamlessly, and right-to-left is the direction an English news ticker reads anyway. Only animation-name is overridden: the mobile rule (animation:none !important) and the reduced-motion rule (which zeroes the duration) both still win. */ html[lang="en"] .ticker-track, [dir="ltr"] .ticker-track { animation-name: ticker-ltr; } @keyframes ticker-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Device-language hint bar ------------------------------------ Slim, bottom-anchored so it never pushes the live player down, and never covers the video. Built by app.js only when the visitor's device language differs from the edition they landed on. */ .lang-hint { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 11px 16px; background: var(--surface); border-block-start: 1px solid var(--border); box-shadow: 0 -6px 24px rgb(0 0 0 / .14); font-size: .88rem; color: var(--text); } .lang-hint-msg { font-weight: 600; } .lang-hint-go { background: var(--accent); color: #14210a; border: 0; border-radius: 999px; cursor: pointer; padding: 7px 16px; font: inherit; font-weight: 800; } .lang-hint-go:hover { filter: brightness(1.06); } .lang-hint-x { background: none; border: 0; cursor: pointer; color: var(--text-dim); font-size: 1.4rem; line-height: 1; padding: 0 4px; } .lang-hint-x:hover { color: var(--text); } @media (max-width: 760px) { .lang-hint { font-size: .82rem; gap: 10px; padding: 10px 12px; } } /* ---------- Top story + live timeline (ported from v2) ------------------ */ .top-sec { padding: 26px 0 8px; } .lead-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 22px; align-items: start; } .lead { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s; } .lead:hover { border-color: var(--hover-border); } .lead-media { aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; } .lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .lead:hover .lead-media img { transform: scale(1.03); } .lead-body { padding: 18px 20px; } .lead-body h2 { margin: 9px 0 0; font-size: clamp(1.2rem, 2.2vw, 1.65rem); font-weight: 800; line-height: 1.5; } .lead:hover h2 { color: var(--headline-hover); } .lead-meta { margin-top: 10px; font-size: .8rem; color: var(--text-mute); } .tag { display: inline-block; font-size: .7rem; font-weight: 800; color: var(--chip-text); background: var(--chip-fill); border: 1px solid var(--chip-border); padding: 2px 9px; border-radius: 5px; } .sub-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 12px; } .sub-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; } .sub-card:hover { border-color: var(--hover-border); transform: translateY(-2px); } .sub-media { aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; } .sub-media img { width: 100%; height: 100%; object-fit: cover; } .sub-body { padding: 12px 14px; } .sub-body h3 { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.6; } .sub-time { margin-top: 8px; font-size: .75rem; color: var(--text-mute); } .timeline-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 17px; position: sticky; top: 84px; } .tl-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .tl-live { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 800; color: var(--live); } .tl-updated { margin-inline-start: auto; font-size: .72rem; color: var(--text-mute); } .timeline { padding-top: 6px; margin: 0; list-style: none; } .tl-item { position: relative; padding: 10px 0; padding-inline-start: 20px; } /* vertical rail + node */ .tl-item::before { content: ''; position: absolute; inset-inline-start: 4px; top: 0; bottom: 0; width: 1px; background: var(--border); } .tl-item:first-child::before { top: 16px; } .tl-item:last-child::before { bottom: calc(100% - 16px); } .tl-item::after { content: ''; position: absolute; inset-inline-start: 0; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-mute); border: 2px solid var(--surface); } .tl-item:first-child::after { background: var(--live); box-shadow: 0 0 0 3px rgba(217,30,18,.16); } .tl-time { font-size: .72rem; font-weight: 700; color: var(--accent); } .tl-item p { margin: 2px 0 0; font-size: .87rem; line-height: 1.6; color: var(--text-dim); } .tl-item:hover p { color: var(--text); } .tl-item.is-hidden { display: none; } .tl-more { width: 100%; margin-top: 12px; justify-content: center; } /* ---------- News -------------------------------------------------------- */ .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; overflow: hidden; transition: transform .2s, border-color .2s, background .2s; } /* RTL accent bar sits on the right edge */ .card::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 3px; background: var(--green); transform: scaleY(0); transform-origin: top; transition: transform .28s cubic-bezier(.4,0,.2,1); } .card:hover { transform: translateY(-3px); border-color: var(--hover-border); background: var(--surface-2); } .card:hover::before { transform: scaleY(1); } .card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: .76rem; } .chip { font-weight: 800; color: var(--chip-text); background: var(--chip-fill); border: 1px solid var(--chip-border); padding: 2px 9px; border-radius: 5px; } .card-time { color: var(--text-mute); font-weight: 600; } .card h3 { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.68; flex: 1; } .card:hover h3 { color: var(--headline-hover); } .card-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-mute); } .card-foot .spacer { flex: 1; } .card-foot .go { color: var(--accent); font-weight: 700; opacity: 0; transition: opacity .2s; } .card:hover .go { opacity: 1; } /* Lead story spans the full row and reads bigger */ .card.lead { grid-column: 1 / -1; padding: 30px 32px; } .card.lead h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 800; line-height: 1.55; } .card.lead .chip { font-size: .8rem; } .news-state { padding: 50px 0; text-align: center; color: var(--text-mute); } .news-state .spinner { border-color: rgba(168,214,46,.18); border-top-color: var(--green); } .news-foot { margin-top: 26px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* Cards beyond the visible batch stay in the DOM so "show more" is instant */ .card.is-hidden { display: none; } /* Skeleton shimmer while the feed loads */ .skel { pointer-events: none; } .skel .bar { height: 13px; border-radius: 6px; margin-bottom: 10px; background: linear-gradient(90deg, var(--surface-2) 25%, #E4E2D8 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } .skel .bar.w60 { width: 60%; } .skel .bar.w80 { width: 80%; } .skel .bar.w40 { width: 40%; } @keyframes shimmer { to { background-position: -200% 0; } } /* ---------- Satellite --------------------------------------------------- */ .sat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .sat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--shadow); } .sat-card h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 10px; } .sat-card h3 svg { width: 21px; height: 21px; fill: var(--accent); } .sat-card h3 { margin-bottom: 20px; } .sat-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .sat-row { background: var(--inset); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 12px 15px; } .sat-row dt { font-size: .74rem; color: var(--text-mute); margin-bottom: 3px; } .sat-row dd { margin: 0; font-size: 1.06rem; font-weight: 800; letter-spacing: .01em; } /* ---------- Follow strip ------------------------------------------------ */ .follow { background: linear-gradient(140deg, var(--green-wash), transparent 62%), var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 42px 40px; text-align: center; box-shadow: var(--shadow); } .follow h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; } .follow p { margin: 0 auto 26px; color: var(--text-dim); max-width: 56ch; } .follow-links { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; } .follow-links a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; font-size: .93rem; transition: all .18s; } .follow-links a:hover { background: var(--green); color: #16200A; border-color: var(--green); transform: translateY(-2px); } .follow-links svg { width: 18px; height: 18px; fill: currentColor; } /* ---------- About + official channels ---------------------------------- */ .about { background: linear-gradient(140deg, var(--green-wash), transparent 55%), var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px 34px 30px; box-shadow: var(--shadow); } .about-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; } .about-logo { width: 62px; height: auto; flex-shrink: 0; } .about-head h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 800; } .about-head p { margin: 0; color: var(--text-dim); font-size: .96rem; line-height: 2; max-width: 74ch; } .links-title { margin: 0 0 16px; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 9px; } .links-title::before { content: ''; width: 4px; height: .95em; background: var(--green); border-radius: 2px; } .link-collection { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; } .link-collection a { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 15px; transition: border-color .18s, transform .18s, background .18s; } .link-collection a:hover { border-color: var(--green); transform: translateY(-2px); } .link-collection svg { width: 22px; height: 22px; fill: var(--accent); flex-shrink: 0; } .link-collection span { display: flex; flex-direction: column; min-width: 0; } .link-collection b { font-size: .9rem; font-weight: 700; } .link-collection small { font-size: .76rem; color: var(--text-mute); direction: ltr; text-align: start; } [dir="rtl"] .link-collection small { text-align: right; } @media (max-width: 900px) { .link-collection { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .link-collection { grid-template-columns: 1fr; } .about { padding: 24px 20px; } .about-head { gap: 14px; } .about-logo { width: 48px; } } /* ---------- Footer ------------------------------------------------------ */ .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border-soft); margin-top: 70px; padding: 44px 0 30px; background: var(--bg-2); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 30px; } .foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .foot-brand img { height: 44px; } .foot-grid p { margin: 0; color: var(--text-mute); font-size: .89rem; max-width: 44ch; } .foot-col h4 { margin: 0 0 13px; font-size: .95rem; font-weight: 800; } .foot-col ul { list-style: none; margin: 0; padding: 0; } .foot-col li { margin-bottom: 9px; } .foot-col a { color: var(--text-mute); font-size: .89rem; transition: color .18s; } .foot-col a:hover { color: var(--accent); } .foot-bottom { border-top: 1px solid var(--border-soft); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-mute); font-size: .84rem; } /* ---------- Responsive -------------------------------------------------- */ /* ---- Header breakpoints ---- The desktop header only fits on ONE line at about 1270px: brand 158 + nav 543 + lang 111 + live pill 111 + socials 114 + theme 34, plus the 20px gaps and 40px padding. Below that it used to squish — labels riding over each other — all the way down to 760px, where the burger finally took over. That ~500px dead zone is what you see when you drag a desktop window narrower. Two stages now, so there is no broken state at ANY width: < 1520px drop the socials and the live pill (both appear again in the footer / «ارتباط با ما», so nothing is lost) — buys ~270px. With them shown, Arabic needs ~1426px for zero slack, so a 1440 cut-off left only 14px. 1520 keeps ~94px. < 1100px full burger menu; nav links move into the drop-down 1100 and not 1024: the nav is 543px in Persian but 569px in BOTH Arabic and English, so a 1024 cut-off left exactly 1px of slack in ar/en — one extra character in any nav label and it would squish again. At 1100 the tightest language keeps ~70px. To re-measure after changing header content or nav labels: set the viewport to the breakpoint, then read .hdr .spacer's width in EVERY language — that is the real slack. Anything under ~40px is too tight. */ @media (max-width: 1519px) { .socials { display: none; } .live-pill { display: none; } } @media (max-width: 1099px) { .nav { display: none; } .nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; inset-inline-end: 14px; z-index: 40; min-width: 200px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .nav.open a { padding: 10px 13px; } .burger { display: block; } } @media (max-width: 1080px) { .news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .photo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .lead-grid { grid-template-columns: 1fr; } .timeline-col { position: static; } } @media (max-width: 760px) { /* The phone header carries the LOGO and the LANGUAGE SWITCHER only — everything else was crushing them into each other on an iPhone. The nav links and the light/dark switch move into the burger drop-down. The burger, the hidden nav, the socials and the live pill are now switched on higher up — see the header breakpoints block above. Only the phone-specific sizing stays here. */ .site-header .theme-toggle { display: none; } .sec { padding: 48px 0; } .news-grid, .sat-grid { grid-template-columns: 1fr; } .photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; } /* post modal: image on top, caption scrolls below */ .post-modal { padding: 0; align-items: stretch; } .pm-box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; } .pm-media { max-height: 42vh; } .pm-media img { max-height: 42vh; } .pm-detail { padding: 18px 18px 26px; } .pm-detail h3 { font-size: 1.12rem; } .gsort button { padding: 6px 12px; font-size: .78rem; } /* ---- header: force one tight row, nothing may wrap ---- */ .hdr { height: 56px; gap: 10px; } .brand { gap: 8px; min-width: 0; } .brand img { height: 30px; } .brand-txt b { font-size: .88rem; white-space: nowrap; } .brand-txt span { display: none; } /* drop the sub-line, no room */ .burger { flex-shrink: 0; padding: 4px; } .burger svg { width: 23px; height: 23px; } /* ---- player: edge to edge, no wasted gutter ---- */ .hero { padding: 0 0 6px; } .hero .wrap { padding-inline: 0; } .player-card { border-radius: 0; border-inline: 0; } .player-meta { padding: 11px 16px; gap: 9px; } .player-meta .title { font-size: .92rem; } .player-meta .muted { font-size: .82rem; } .live-dot { width: 8px; height: 8px; box-shadow: 0 0 0 2px rgba(0,0,0,.34), 0 0 8px 2px rgba(255,59,48,.75); } /* Icon-only on phones — the labelled pill covered a quarter of the frame. aria-label on the button keeps it announced for screen readers. */ .player-controls { top: 10px; left: 10px; gap: 10px; } .unmute-fab { width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center; } .unmute-fab .unmute-label { display: none; } .unmute-fab svg { width: 17px; height: 17px; } .ticker-item.active { color: var(--text); } /* ---- ticker: one headline at a time, rotated by JS ---- A 12,000px marquee track gets throttled or dropped on mobile, so on small screens the track is collapsed and headlines are swapped instead. */ .ticker { min-height: 54px; } .ticker-label { padding: 0 12px; font-size: .76rem; } .ticker-view { display: flex; align-items: center; } .ticker-track { animation: none !important; width: 100%; height: auto; gap: 0; padding-inline: 13px; white-space: normal; } .ticker-item { display: none; } .ticker-item.active { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; font-size: .82rem; line-height: 1.5; animation: tickerSwap .35s ease both; } .ticker-item.active::before { display: none; } /* top story: stack, and turn sub-cards into compact horizontal rows */ .top-sec { padding-top: 16px; } .lead-body { padding: 15px 16px; } .sub-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; } .sub-card { flex-direction: row; } .sub-media { width: 118px; flex-shrink: 0; aspect-ratio: 1/1; } .sub-body { padding: 11px 13px; } .sat-rows { grid-template-columns: repeat(2, 1fr); } .foot-grid { grid-template-columns: 1fr; gap: 28px; } .follow { padding: 32px 22px; } .card.lead { padding: 24px 22px; } .ticker-label { padding: 0 13px; font-size: .78rem; } } @keyframes tickerSwap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* Respect reduced-motion. The mobile ticker still rotates — it just swaps instantly instead of fading, so the headlines stay readable either way. */ @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker-item.active { animation: none; } .dot { animation: none; } .skel .bar { animation: none; } html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } } /* ---------- Server-rendered article pages (/news/-) ------------- These are the site's only indexable content — the homepage is a JS app that a crawler reads as 271 words of chrome. Styling reuses the existing tokens so an article looks like part of the site, not a stripped fallback. */ .article-wrap { padding: 30px 0 60px; max-width: 780px; } .crumbs { font-size: .84rem; color: var(--text-mute); margin-bottom: 18px; } .crumbs a { color: var(--accent); font-weight: 600; } .crumbs a:hover { text-decoration: underline; } .crumbs span { margin: 0 6px; } .art h1 { font-size: 1.9rem; line-height: 1.5; margin: 0 0 14px; font-weight: 800; } .art-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--text-mute); font-size: .86rem; margin-bottom: 22px; } .art-fig { margin: 0 0 24px; } .art-fig img { width: 100%; height: auto; display: block; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); } .art-body p { font-size: 1.06rem; line-height: 2.05; margin: 0 0 18px; } .art-lede { color: var(--text-dim); font-size: 1.05rem; line-height: 1.9; } .art-back { margin: 30px 0 10px; } .article-wrap .sec { padding: 34px 0 0; border-top: 1px solid var(--border-soft); margin-top: 34px; } .article-wrap .news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .article-wrap .card h3 { font-size: .96rem; } @media (max-width: 760px) { .article-wrap { padding: 18px 0 40px; } .art h1 { font-size: 1.42rem; } .art-body p { font-size: 1rem; line-height: 1.95; } .article-wrap .news-grid { grid-template-columns: 1fr; } }