/* ========================================================================== شبکه کلمه فارسی — 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; } .badge-live { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,59,48,.5); font-size: .78rem; font-weight: 800; color: #fff; letter-spacing: .05em; } /* 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. */ .unmute-fab { position: absolute; z-index: 5; top: 14px; inset-inline-end: 14px; 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; } .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%); } } /* ---------- 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; } .badge-live { top: 10px; inset-inline-start: 10px; padding: 4px 9px; font-size: .68rem; } /* Icon-only on phones — the labelled pill covered a quarter of the frame. aria-label on the button keeps it announced for screen readers. */ .unmute-fab { top: 10px; inset-inline-end: 10px; 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; } }