with the image absolutely positioned behind a dark gradient overlay, and content (kicker, headline, subtitle) anchored to the bottom-left of the container. Maintains the same height on desktop/tablet (~340px) and shrinks gracefully on mobile (~220px). ----------------------------------------------------------------------- */ .topstory { position: relative; width: 100%; overflow: hidden; background: #14181f; /* Subtle slide-in for visual continuity with the announcement below */ animation: topstory-fade-in 540ms cubic-bezier(.2,.7,.2,1); } @keyframes topstory-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .topstory-link { display: block; position: relative; min-height: 340px; text-decoration: none; color: #fff; } @media (max-width: 760px) { .topstory-link { min-height: 240px; } } @media (max-width: 460px) { .topstory-link { min-height: 200px; } } .topstory-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; /* favour the upper-middle of photos */ transform: scale(1.02); transition: transform 700ms cubic-bezier(.2,.7,.2,1); } .topstory-link:hover .topstory-bg { transform: scale(1.06); } .topstory-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,31,0) 0%, rgba(20,24,31,.30) 45%, rgba(20,24,31,.85) 100%), linear-gradient(90deg, rgba(20,24,31,.55) 0%, rgba(20,24,31,.10) 45%, rgba(20,24,31,0) 70%); } .topstory-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; background: rgba(20,24,31,.78); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(0,0,0,.5); transition: all var(--t-fast); pointer-events: none; z-index: 2; } .topstory-play svg { width: 30px; height: 30px; margin-left: 3px; } .topstory-link:hover .topstory-play { background: var(--c-brand); transform: translate(-50%, -50%) scale(1.08); } @media (max-width: 600px) { .topstory-play { width: 54px; height: 54px; } .topstory-play svg { width: 22px; height: 22px; } } .topstory-inner { position: relative; z-index: 1; /* This div is also a .container — set vertical padding only so .container's horizontal padding (24px) is preserved. */ padding-top: var(--sp-7); padding-bottom: var(--sp-7); display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; text-align: left; } @media (max-width: 760px) { .topstory-inner { min-height: 240px; padding-top: var(--sp-5); padding-bottom: var(--sp-5); } } @media (max-width: 460px) { .topstory-inner { min-height: 200px; padding-top: var(--sp-4); padding-bottom: var(--sp-4); } } .topstory-kicker { display: inline-flex; align-items: center; align-self: flex-start; background: var(--c-brand); color: #fff; padding: 5px 12px; border-radius: 4px; font-family: var(--f-bn-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-3); box-shadow: 0 2px 8px rgba(155,28,44,.4); } html[lang="en"] .topstory-kicker { font-family: var(--f-en-sans); } .topstory-video .topstory-kicker { background: var(--c-brand); } .topstory-title { font-family: var(--f-bn-serif); font-size: clamp(22px, 3vw, 38px); line-height: 1.18; font-weight: 800; color: #fff; margin: 0 0 var(--sp-3); max-width: 820px; text-shadow: 0 2px 16px rgba(0,0,0,.6); } html[lang="en"] .topstory-title { font-family: var(--f-en-serif); } .topstory-sub { font-family: var(--f-bn-sans); font-size: 15px; line-height: 1.5; color: #e8e2d2; margin: 0; max-width: 720px; text-shadow: 0 1px 6px rgba(0,0,0,.5); /* Clamp to 2 lines for visual balance */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[lang="en"] .topstory-sub { font-family: var(--f-en-sans); } @media (max-width: 600px) { .topstory-sub { display: none; } } /* hide subtitle on phones */ .topstory-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 32px; height: 32px; background: rgba(20,24,31,.55); border: 0; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); opacity: .85; } .topstory-close:hover { background: rgba(20,24,31,.85); opacity: 1; transform: scale(1.08); } @media (max-width: 460px) { .topstory-close { top: 10px; right: 10px; width: 28px; height: 28px; } .topstory-close svg { width: 14px; height: 14px; } } /* ---------- 6b. Announcement banner ------------------------------------- Admin-controlled banner above the breaking ticker. All colour variants use AAA contrast so text is always readable. ----------------------------------------------------------------------- */ .announcement { font-family: var(--f-bn-sans); font-size: 14px; line-height: 1.5; border-bottom: 1px solid rgba(20,24,31,.08); animation: ann-slide-in 420ms cubic-bezier(.2,.7,.2,1); } html[lang="en"] .announcement { font-family: var(--f-en-sans); } @keyframes ann-slide-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } } .announcement-inner { display: flex; align-items: center; gap: var(--sp-3); /* IMPORTANT: this div is also a .container — set only vertical padding so the container's horizontal padding (24px each side) is preserved. Using the padding shorthand here would zero out left/right and make text flush-left. */ padding-top: 11px; padding-bottom: 11px; } .announcement-icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .announcement-icon svg { width: 18px; height: 18px; } .announcement-text { flex: 1; min-width: 0; font-weight: 500; } .announcement-link { flex-shrink: 0; display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 999px; text-decoration: none; transition: opacity var(--t-fast), background var(--t-fast); background: rgba(20,24,31,.08); color: inherit; } .announcement-link:hover { background: rgba(20,24,31,.15); text-decoration: none; } .announcement-close { flex-shrink: 0; background: transparent; border: 0; cursor: pointer; color: inherit; opacity: .6; padding: 6px; line-height: 0; border-radius: 4px; transition: opacity var(--t-fast), background var(--t-fast); } .announcement-close:hover { opacity: 1; background: rgba(20,24,31,.08); } /* Style variants — colours picked for >7:1 contrast (AAA) */ .announcement-info { background: #e8f0fa; color: #1d3f5e; } .announcement-info .announcement-link { background: rgba(29,79,139,.12); color: #1d3f5e; } .announcement-info .announcement-link:hover { background: rgba(29,79,139,.22); } .announcement-warning { background: #fff4d6; color: #6b4308; } .announcement-warning .announcement-link { background: rgba(138,90,10,.12); color: #6b4308; } .announcement-warning .announcement-link:hover { background: rgba(138,90,10,.22); } .announcement-success { background: #dff0e4; color: #1a4f28; } .announcement-success .announcement-link { background: rgba(28,109,53,.12); color: #1a4f28; } .announcement-success .announcement-link:hover { background: rgba(28,109,53,.22); } .announcement-brand { background: #fde8ea; color: #7d1623; } .announcement-brand .announcement-link { background: rgba(155,28,44,.12); color: #7d1623; } .announcement-brand .announcement-link:hover { background: rgba(155,28,44,.22); } .announcement-dark { background: #14181f; color: #f5f1e8; border-bottom-color: rgba(255,255,255,.12); } .announcement-dark .announcement-link { background: rgba(255,255,255,.14); color: #f5f1e8; } .announcement-dark .announcement-link:hover { background: rgba(255,255,255,.24); } .announcement-dark .announcement-close:hover { background: rgba(255,255,255,.12); } @media (max-width: 640px) { .announcement-inner { flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; } .announcement-text { width: 100%; flex-basis: 100%; } .announcement-link { order: 3; } } /* ---------- 7. Breaking news ticker -------------------------------------- */ .ticker { background: var(--c-breaking); color: #fff; font-family: var(--f-bn-sans); font-size: 14px; overflow: hidden; border-bottom: 1px solid var(--c-line); } .ticker-inner { display: flex; align-items: center; gap: var(--sp-4); padding: 10px 0; } .ticker-label { background: rgba(0,0,0,.2); padding: 4px 12px; font-weight: 700; letter-spacing: .04em; border-radius: 2px; flex-shrink: 0; } .ticker-track { flex: 1; overflow: hidden; display: flex; } .ticker-content { display: inline-flex; gap: var(--sp-7); white-space: nowrap; animation: ticker-scroll 60s linear infinite; padding-left: 100%; } .ticker-content a { color: #fff; opacity: .95; } .ticker-content a:hover { opacity: 1; text-decoration: underline; } .ticker:hover .ticker-content { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* ---------- 8. Hero / featured ------------------------------------------ */ .hero { padding: var(--sp-6) 0 var(--sp-5); } .hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .hero-main { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-tint); aspect-ratio: 16/10; display: block; } .hero-main .img-wrap { position: absolute; inset: 0; z-index: 1; } .hero-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } .hero-main:hover img { transform: scale(1.04); } .hero-main .overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%); } .hero-main .meta { position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); z-index: 3; color: #fff; } .hero-main h1 { color: #fff; margin: 0 0 var(--sp-3); font-size: clamp(22px, 3.5vw, 36px); line-height: 1.2; } .hero-main .kicker { color: var(--c-accent); } /* Video-as-hero variant — big play badge, red VIDEO kicker */ .hero-main-video { position: relative; } .hero-main-video .kicker-video { display: inline-flex; align-items: center; background: var(--c-brand); color: #fff; padding: 4px 12px; border-radius: 4px; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .hero-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; background: rgba(20,24,31,.78); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(0,0,0,.5); transition: all var(--t-fast); pointer-events: none; z-index: 2; } .hero-play-badge svg { width: 38px; height: 38px; margin-left: 4px; } .hero-main-video:hover .hero-play-badge { background: var(--c-brand); transform: translate(-50%, -50%) scale(1.06); } @media (max-width: 600px) { .hero-play-badge { width: 60px; height: 60px; } .hero-play-badge svg { width: 26px; height: 26px; } } .hero-side { display: flex; flex-direction: column; gap: var(--sp-4); } .hero-side .story { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-4); align-items: start; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line); } .hero-side .story:last-child { border-bottom: 0; padding-bottom: 0; } .hero-side .story .thumb { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-tint); } .hero-side .story .thumb img { width: 100%; height: 100%; object-fit: cover; } .hero-side .story h3 { font-size: 16px; margin: 0; line-height: 1.35; } .hero-side .story .kicker { font-size: 11px; } /* ---------- 9. Kicker / meta -------------------------------------------- */ .kicker { display: inline-block; font-family: var(--f-bn-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brand); margin-bottom: var(--sp-2); } html[lang="en"] .kicker { font-family: var(--f-en-sans); } .meta-line { font-family: var(--f-bn-sans); font-size: 13px; color: var(--c-ink-mute); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; } html[lang="en"] .meta-line { font-family: var(--f-en-sans); } .meta-line span + span::before { content: "·"; margin-right: var(--sp-3); } /* ---------- 10. Section heading ---------------------------------------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-ink); gap: var(--sp-4); } .section-head h2 { margin: 0; font-size: 22px; } .section-head .more { font-family: var(--f-bn-sans); font-size: 13px; color: var(--c-ink-soft); } html[lang="en"] .section-head .more { font-family: var(--f-en-sans); letter-spacing: .05em; text-transform: uppercase; } .section-head .more:hover { color: var(--c-brand); } /* ---------- 11. Story cards --------------------------------------------- */ .story-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--c-bg-card); border-radius: var(--radius); overflow: hidden; transition: transform var(--t-base), box-shadow var(--t-base); } .story-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .story-card .thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg-tint); } .story-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .story-card:hover .thumb img { transform: scale(1.06); } .story-card .body { padding: 0 var(--sp-2) var(--sp-2); } .story-card h3 { font-size: 19px; margin: 0 0 var(--sp-2); line-height: 1.3; } .story-card .excerpt { font-size: 14px; color: var(--c-ink-soft); margin: 0 0 var(--sp-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Compact horizontal card */ .story-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); align-items: center; } .story-row:last-child { border-bottom: 0; } .story-row .thumb { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-tint); } .story-row .thumb img { width: 100%; height: 100%; object-fit: cover; } .story-row h3 { font-size: 17px; margin: 0 0 var(--sp-2); line-height: 1.3; } @media (max-width: 480px) { .story-row { grid-template-columns: 110px 1fr; gap: var(--sp-3); } .story-row h3 { font-size: 15px; } } /* Numbered most-viewed list */ .most-viewed { counter-reset: mv; list-style: none; padding: 0; margin: 0; } .most-viewed li { counter-increment: mv; display: grid; grid-template-columns: 36px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); } .most-viewed li::before { content: counter(mv); font-family: var(--f-en-serif); font-style: italic; font-weight: 400; font-size: 28px; color: var(--c-accent); line-height: 1; } .most-viewed li:last-child { border-bottom: 0; } .most-viewed h4 { font-size: 15px; margin: 0; line-height: 1.35; font-weight: 700; } /* ---------- 12. District blocks ----------------------------------------- */ .district-tile { background: var(--c-bg-card); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); transition: all var(--t-base); } .district-tile:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: var(--shadow-2); } .district-tile h3 { font-size: 18px; margin: 0 0 var(--sp-3); } .district-tile h3 a { color: var(--c-ink); } .district-tile h3 a:hover { color: var(--c-brand); } .district-tile .count { font-family: var(--f-en-sans); font-size: 12px; font-weight: 600; color: var(--c-ink-mute); letter-spacing: .08em; text-transform: uppercase; } .district-tile ul { list-style: none; padding: 0; margin: var(--sp-3) 0 0; } .district-tile li { padding: var(--sp-2) 0; border-bottom: 1px dashed var(--c-line-soft); } .district-tile li:last-child { border-bottom: 0; } .district-tile li a { font-size: 14px; color: var(--c-ink-soft); } .district-tile li a:hover { color: var(--c-brand); } /* ---------- 13. Sidebar widgets ----------------------------------------- */ .widget { background: var(--c-bg-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-5); } .widget-title { font-size: 14px; font-family: var(--f-bn-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-accent); } html[lang="en"] .widget-title { font-family: var(--f-en-sans); } /* ---------- 14. Article (read view) ------------------------------------- */ .article-hero { padding: var(--sp-7) 0 var(--sp-5); border-bottom: 1px solid var(--c-line); } .article-hero .kicker { margin-bottom: var(--sp-4); } .article-hero h1 { margin: 0 0 var(--sp-4); font-size: clamp(28px, 5vw, 44px); line-height: 1.15; } .article-hero .subtitle { font-family: var(--f-bn-serif); font-size: clamp(17px, 2.2vw, 22px); color: var(--c-ink-soft); line-height: 1.45; margin: 0 0 var(--sp-5); font-weight: 400; max-width: 780px; } .article-hero .author-strip { display: flex; gap: var(--sp-4); align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); } .author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--c-bg-tint); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-en-serif); font-weight: 700; color: var(--c-brand); overflow: hidden; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-meta { font-family: var(--f-bn-sans); font-size: 13px; line-height: 1.4; } .author-meta .name { font-weight: 700; color: var(--c-ink); } .author-meta .date { color: var(--c-ink-mute); } .article-feature-img { width: 100%; aspect-ratio: 16/9; background: var(--c-bg-tint); overflow: hidden; border-radius: var(--radius); margin: var(--sp-5) 0; } .article-feature-img img { width: 100%; height: 100%; object-fit: cover; } .article-body { font-size: 18px; line-height: 1.8; color: var(--c-ink); } .article-body p { margin: 0 0 var(--sp-5); } .article-body p:first-of-type::first-letter { font-family: var(--f-en-serif); font-size: 4em; float: left; line-height: .85; padding: 6px 12px 0 0; color: var(--c-brand); font-weight: 700; } .article-body h2 { font-size: 26px; margin: var(--sp-7) 0 var(--sp-4); } .article-body h3 { font-size: 22px; margin: var(--sp-6) 0 var(--sp-3); } .article-body blockquote { margin: var(--sp-6) 0; padding: 0 var(--sp-5); border-left: 3px solid var(--c-accent); font-style: italic; font-size: 22px; color: var(--c-ink-soft); line-height: 1.5; } .article-body img { border-radius: var(--radius); margin: var(--sp-5) 0; } .article-body a { color: var(--c-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Reading progress bar */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: transparent; } .read-progress > div { height: 100%; width: 0%; background: var(--c-brand); transition: width 60ms linear; } /* Share bar */ .share-bar { display: flex; gap: var(--sp-3); align-items: center; margin: var(--sp-6) 0; padding: var(--sp-4) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .share-bar .label { font-family: var(--f-bn-sans); font-size: 13px; color: var(--c-ink-mute); letter-spacing: .04em; } .share-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-line); background: var(--c-bg-card); color: var(--c-ink); transition: all var(--t-fast); } .share-btn:hover { background: #14181f; color: #fff; border-color: #14181f; } .share-btn svg { width: 16px; height: 16px; } /* Tag chips */ .tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0; } .tag-chip { display: inline-block; font-family: var(--f-bn-sans); font-size: 12px; padding: 6px 12px; background: var(--c-bg-tint); border-radius: 999px; color: var(--c-ink-soft); } .tag-chip:hover { background: #14181f; color: #fff; } html[lang="en"] .tag-chip { font-family: var(--f-en-sans); } /* ---------- 14b. Video components --------------------------------------- Used by homepage video rail, /videos grid, /video/{slug} watch page, and inline article video embeds. ----------------------------------------------------------------------- */ /* Responsive 16:9 iframe wrapper */ .yt-embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px rgba(20,24,31,.08); } .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .article-video { margin: 0 0 var(--sp-5); } /* Play-button overlay on thumbnails */ .play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: rgba(20,24,31,.78); color: #fff; border-radius: 50%; transition: all var(--t-fast); box-shadow: 0 2px 12px rgba(0,0,0,.35); } .play-badge svg { width: 24px; height: 24px; margin-left: 3px; } /* optical centering */ .play-badge.sm { width: 38px; height: 38px; } .play-badge.sm svg { width: 16px; height: 16px; } .play-badge.lg { width: 78px; height: 78px; } .play-badge.lg svg { width: 34px; height: 34px; } /* Background of the homepage rail to differentiate from article rows */ .video-section { background: linear-gradient(180deg, #14181f 0%, #1c2129 100%); color: #f5f1e8; padding: var(--sp-7) 0; } .video-section .section-head h2 { color: #fff; border-bottom-color: rgba(255,255,255,.18); } .video-section .section-head .more { color: #e8c87a; } .video-section .section-head .more:hover { color: #fff; } /* Two-column rail: 1 large feature + 3 stacked secondaries */ .video-rail { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); } @media (max-width: 880px) { .video-rail { grid-template-columns: 1fr; } } /* Large featured card */ .video-feature { display: block; background: #1c2129; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--t-fast), box-shadow var(--t-fast); } .video-feature:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4); text-decoration: none; } .video-feature .thumb { position: relative; width: 100%; padding-top: 56.25%; background: #000; overflow: hidden; } .video-feature .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.2,1); } .video-feature:hover .thumb img { transform: scale(1.04); } .video-feature:hover .play-badge { background: var(--c-brand); transform: translate(-50%, -50%) scale(1.08); } .video-feature .body { padding: var(--sp-5); } .video-feature .body .kicker { color: #e8c87a; } .video-feature .body h3 { font-family: var(--f-bn-serif); font-size: 22px; line-height: 1.3; margin: var(--sp-2) 0; color: #fff; } html[lang="en"] .video-feature .body h3 { font-family: var(--f-en-serif); } .video-feature .body .excerpt { color: #d4d0c4; margin: 0 0 var(--sp-3); font-size: 14px; line-height: 1.55; } .video-feature .body .meta-line { color: #b8b4a8; font-size: 12px; } /* Stack of secondary cards next to the feature */ .video-secondary { display: flex; flex-direction: column; gap: var(--sp-4); } .video-card-sm { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3); background: rgba(255,255,255,.04); border-radius: var(--radius); padding: 10px; text-decoration: none; color: inherit; transition: background var(--t-fast); } .video-card-sm:hover { background: rgba(255,255,255,.10); text-decoration: none; } .video-card-sm .thumb { position: relative; width: 140px; padding-top: 78.75px; /* keep 16:9 — 140 * 0.5625 */ background: #000; border-radius: 4px; overflow: hidden; } .video-card-sm .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-card-sm:hover .play-badge { background: var(--c-brand); } .video-card-sm .body { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .video-card-sm h4 { font-family: var(--f-bn-sans); font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0 0 6px; color: #fff; /* Clamp to 3 lines */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[lang="en"] .video-card-sm h4 { font-family: var(--f-en-sans); } .video-card-sm .meta-line { color: #b8b4a8; font-size: 11px; } /* /videos grid page */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); } .video-card { display: block; background: var(--c-bg-card); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); } .video-card:hover { transform: translateY(-2px); border-color: var(--c-ink-mute); box-shadow: 0 6px 22px rgba(20,24,31,.10); text-decoration: none; } .video-card .thumb { position: relative; width: 100%; padding-top: 56.25%; background: #000; } .video-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-card:hover .play-badge { background: var(--c-brand); } .video-card .body { padding: var(--sp-4); } .video-card .body h3 { font-family: var(--f-bn-serif); font-size: 17px; line-height: 1.35; margin: var(--sp-2) 0; color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[lang="en"] .video-card .body h3 { font-family: var(--f-en-serif); } /* /videos grid on phones — tighter cards, smaller padding */ @media (max-width: 640px) { .video-grid { gap: var(--sp-4); grid-template-columns: 1fr; } /* single column for clarity */ .video-card .body { padding: var(--sp-3); } .video-card .body h3 { font-size: 16px; -webkit-line-clamp: 2; } } /* Watch page layout: main embed left, related rail right */ .video-watch-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: var(--sp-6); padding: var(--sp-5) 0 var(--sp-7); } @media (max-width: 980px) { .video-watch-layout { grid-template-columns: 1fr; } } .video-watch-head { margin-bottom: var(--sp-4); } .video-watch-head h1 { font-family: var(--f-bn-serif); font-size: 30px; line-height: 1.25; margin: var(--sp-2) 0; color: var(--c-ink); } html[lang="en"] .video-watch-head h1 { font-family: var(--f-en-serif); } .video-description { margin: var(--sp-5) 0; font-family: var(--f-bn-serif); font-size: 16px; line-height: 1.7; color: var(--c-ink); } html[lang="en"] .video-description { font-family: var(--f-en-serif); } .video-description p { margin: 0 0 var(--sp-3); } .video-watch-rail .widget-title { font-family: var(--f-bn-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-mute); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-ink); } .video-rail-list { list-style: none; padding: 0; margin: 0; } .video-rail-list li { margin-bottom: var(--sp-3); } .video-rail-item { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-3); text-decoration: none; color: inherit; padding: 8px; border-radius: 6px; transition: background var(--t-fast); } .video-rail-item:hover { background: var(--c-bg-tint); text-decoration: none; } .video-rail-item .thumb { position: relative; width: 130px; padding-top: 73.13px; /* 16:9 */ background: #000; border-radius: 4px; overflow: hidden; } .video-rail-item .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-rail-item .text { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .video-rail-item h4 { font-family: var(--f-bn-sans); font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0 0 6px; color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[lang="en"] .video-rail-item h4 { font-family: var(--f-en-sans); } /* Make sure containers exist for the watch page */ .container.container-wide { max-width: 1200px; } /* ---------- 14c. Video watch page — mobile polish ------------------------ The single watch page has dense content (title, embed, long description, share buttons, related rail) that needs careful tuning at narrow widths. Rules below kick in at ≤640px (phones) and ≤460px (small phones). ----------------------------------------------------------------------- */ @media (max-width: 640px) { /* Reduce side padding so the embed gets maximum width on phones */ .container.container-wide { padding-left: var(--sp-3); padding-right: var(--sp-3); } /* Tighter top/bottom around the watch layout */ .video-watch-layout { gap: var(--sp-4); padding: var(--sp-3) 0 var(--sp-5); } /* Title scales down fluidly — clamps prevent it from being too small or too big */ .video-watch-head { margin-bottom: var(--sp-3); } .video-watch-head h1 { font-size: clamp(20px, 5.4vw, 26px); line-height: 1.25; /* Break long Bengali compound words gracefully */ overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .video-watch-head .meta-line { font-size: 12px; flex-wrap: wrap; gap: 6px 10px; } .video-watch-head .kicker { font-size: 10px; } /* Embed gets a touch of breathing room above the description */ .yt-embed { border-radius: 6px; margin-bottom: var(--sp-4); } /* Description: slightly smaller, tighter line-height, more comfortable paragraph spacing */ .video-description { margin: var(--sp-4) 0; font-size: 15px; line-height: 1.65; /* Prevent any inadvertent horizontal overflow (e.g. long URLs in the body) */ overflow-wrap: break-word; word-break: break-word; } .video-description p { margin: 0 0 14px; } .video-description p:last-child { margin-bottom: 0; } /* Share bar: allow wrap so 4 buttons + label sit on one row when possible, two rows on very narrow phones — never get clipped or scroll horizontally */ .share-bar { flex-wrap: wrap; gap: 10px; margin: var(--sp-4) 0; padding: var(--sp-3) 0; } .share-bar .label { width: 100%; font-size: 12px; margin-bottom: 2px; } .share-btn { width: 40px; height: 40px; } /* a hair bigger for thumb tap target */ /* Related rail: tighten thumb size + text so cards don't feel cramped */ .video-watch-rail .widget-title { font-size: 11px; margin-bottom: var(--sp-3); } .video-rail-item { grid-template-columns: 110px 1fr; gap: 10px; padding: 6px; } .video-rail-item .thumb { width: 110px; padding-top: 61.88px; } /* 110 * 0.5625 */ .video-rail-item h4 { font-size: 13px; -webkit-line-clamp: 3; } } @media (max-width: 460px) { /* On the smallest phones, give the embed even more width */ .container.container-wide { padding-left: var(--sp-2); padding-right: var(--sp-2); } .video-watch-head h1 { font-size: clamp(18px, 5.6vw, 22px); } .share-bar { gap: 8px; } .share-btn { width: 38px; height: 38px; } .share-btn svg { width: 15px; height: 15px; } } /* ---------- 14d. Article video embed — mobile polish -------------------- When an article has a YouTube video attached, the embed replaces the featured image at the top of the article. Make sure it stays edge-to-edge readable on phones and the rounded corners + shadow scale down nicely. ----------------------------------------------------------------------- */ @media (max-width: 640px) { .article-video { margin: 0 0 var(--sp-4); border-radius: 6px; } .article-video .yt-embed { border-radius: 6px; } } /* ---------- 15. Forms ---------------------------------------------------- */ .form-input { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px; background: var(--c-bg-card); border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--c-ink); transition: border-color var(--t-fast); } .form-input:focus { outline: none; border-color: var(--c-brand); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 12px 22px; font-family: var(--f-bn-sans); font-size: 14px; font-weight: 600; background: #14181f; color: #fff; border: 1px solid #14181f; border-radius: var(--radius); cursor: pointer; transition: all var(--t-fast); } .btn:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; } .btn-brand { background: var(--c-brand); border-color: var(--c-brand); } .btn-brand:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); } .btn-ghost { background: transparent; color: var(--c-ink); } html[lang="en"] .btn { font-family: var(--f-en-sans); letter-spacing: .04em; } /* Newsletter — fixed dark band; hex colors guarantee contrast */ body .newsletter, html[data-theme] body .newsletter, html[data-theme="dark"] body .newsletter { background: #0a0e16 !important; color: #f5f1e8 !important; padding: var(--sp-7) 0; text-align: center; } body .newsletter h2 { color: #ffffff !important; font-size: 28px; margin: 0 0 var(--sp-3); } body .newsletter p { color: #e0dcd0 !important; margin: 0 0 var(--sp-5); font-size: 16px; line-height: 1.6; } .newsletter-form { display: flex; gap: var(--sp-2); max-width: 480px; margin: 0 auto; } body .newsletter-form .form-input { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.28) !important; color: #ffffff !important; } body .newsletter-form .form-input::placeholder { color: #c4c0b4 !important; } .newsletter-form .btn-brand { flex-shrink: 0; } @media (max-width: 480px) { .newsletter-form { flex-direction: column; } } /* Search */ .search-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,31,.92); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: fadeIn 200ms ease; } .search-overlay.open { display: flex; } .search-overlay .search-box { width: 100%; max-width: 720px; padding: 0 var(--sp-5); } .search-overlay input { width: 100%; font-family: var(--f-bn-serif); font-size: clamp(22px, 3vw, 30px); padding: var(--sp-4) 0; background: transparent; border: 0; border-bottom: 2px solid #fff; color: #fff; outline: none; } .search-overlay input::placeholder { color: #8a8579; } .search-overlay .hint { color: #8a8579; margin-top: var(--sp-3); font-size: 14px; } .search-overlay .close { position: absolute; top: 24px; right: 24px; background: transparent; border: 0; color: #fff; width: 44px; height: 44px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---------- 16. Consulting profiles ------------------------------------- */ .profile-hero { background: linear-gradient(180deg, var(--c-bg-tint) 0%, var(--c-bg) 100%); padding: var(--sp-7) 0; border-bottom: 1px solid var(--c-line); } .profile-card { background: var(--c-bg-card); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--t-base); display: flex; flex-direction: column; } .profile-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-accent); } .profile-card .photo { aspect-ratio: 1/1; background: var(--c-bg-tint); position: relative; overflow: hidden; } .profile-card .photo img { width: 100%; height: 100%; object-fit: cover; } .profile-card .photo .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-en-serif); font-size: 64px; font-weight: 700; color: var(--c-accent); background: linear-gradient(135deg, var(--c-bg-tint), var(--c-line-soft)); } .profile-card .body { padding: var(--sp-5); } .profile-card h3 { font-size: 19px; margin: 0 0 var(--sp-2); } .profile-card .designation { font-family: var(--f-bn-sans); font-size: 13px; color: var(--c-brand); margin-bottom: var(--sp-3); letter-spacing: .02em; } html[lang="en"] .profile-card .designation { font-family: var(--f-en-sans); } .profile-card .short-bio { font-size: 14px; color: var(--c-ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .profile-detail-header { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-7); align-items: start; } @media (max-width: 720px) { .profile-detail-header { grid-template-columns: 1fr; text-align: center; } } .profile-detail-photo { aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background: var(--c-bg-tint); box-shadow: var(--shadow-2); } .profile-detail-photo img { width: 100%; height: 100%; object-fit: cover; } .profile-detail-header h1 { margin: 0 0 var(--sp-2); } .profile-detail-header .designation { font-family: var(--f-bn-sans); font-size: 16px; color: var(--c-brand); font-weight: 600; margin-bottom: var(--sp-5); } .profile-section { background: var(--c-bg-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-4); } .profile-section h3 { font-family: var(--f-bn-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-mute); margin: 0 0 var(--sp-3); } html[lang="en"] .profile-section h3 { font-family: var(--f-en-sans); } .profile-section .prose p { margin: 0 0 var(--sp-3); font-size: 16px; line-height: 1.75; color: var(--c-ink); } .profile-section .prose p:last-child { margin-bottom: 0; } .profile-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } /* ---------- 17. Pagination ---------------------------------------------- */ .pagination { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-7) 0; font-family: var(--f-en-sans); font-size: 14px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--c-ink-soft); background: var(--c-bg-card); } .pagination a:hover { border-color: var(--c-brand); color: var(--c-brand); } .pagination .current { background: #14181f; color: #fff; border-color: #14181f; } /* ---------- 18. Footer --------------------------------------------------- COLORS ARE INTENTIONALLY HARD-CODED HERE — DO NOT REPLACE WITH var(--c-ink) This section must remain dark in both light and dark theme. Using fixed hex values guarantees the contrast contract: cream text on near-black bg. Contrast verification (WCAG): #f5f1e8 on #0a0e16 → 16.8:1 (AAA Large + AAA Body) #e0dcd0 on #0a0e16 → 13.9:1 (AAA Large + AAA Body) #b8b4a8 on #0a0e16 → 7.5:1 (AAA Large + AA Body) --------------------------------------------------------------------- */ body .footer, html[data-theme] body .footer, html[data-theme="dark"] body .footer { background: #0a0e16 !important; background-color: #0a0e16 !important; color: #f5f1e8 !important; padding: var(--sp-8) 0 var(--sp-5); margin-top: var(--sp-8); font-family: var(--f-bn-sans); font-size: 14px; line-height: 1.7; } html[lang="en"] body .footer { font-family: var(--f-en-sans); } body .footer *, body .footer p, body .footer li, body .footer div, body .footer span { color: #e0dcd0 !important; } body .footer a { color: #f5f1e8 !important; text-decoration: none; transition: color var(--t-fast); } body .footer a:hover { color: #e8c87a !important; text-decoration: underline; } body .footer h4 { color: #ffffff !important; font-family: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,.18); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } body .footer .footer-about .brand-name { color: #ffffff !important; font-size: 26px; font-weight: 800; } body .footer .footer-about p { margin: var(--sp-4) 0; line-height: 1.7; color: #e0dcd0 !important; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { padding: 5px 0; } body .footer li a { color: #e0dcd0 !important; } body .footer li a:hover { color: #e8c87a !important; } .footer-bottom { padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); font-size: 13px; } body .footer .footer-bottom, body .footer .footer-bottom div, body .footer .footer-bottom span { color: #c4c0b4 !important; } .footer .social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } body .footer .social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12) !important; color: #ffffff !important; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-fast); } body .footer .social a:hover { background: var(--c-brand) !important; color: #fff !important; } .footer .social svg { width: 16px; height: 16px; } /* ---------- 19. Alerts / flash messages --------------------------------- */ .alert { padding: var(--sp-4); border-radius: var(--radius); margin: var(--sp-4) 0; font-family: var(--f-bn-sans); font-size: 14px; } .alert-success { background: #e7f3ec; color: #1c5a3a; border: 1px solid #c4dccc; } .alert-error { background: #fbe9e9; color: #7d1a1a; border: 1px solid #e7c1c1; } .alert-info { background: #eaf1f8; color: #1d3f5e; border: 1px solid #c8d8e6; } [data-theme="dark"] .alert-success { background: #1a2e22; color: #7fc89a; border-color: #2a4a36; } [data-theme="dark"] .alert-error { background: #2e1a1a; color: #e08585; border-color: #4a2a2a; } [data-theme="dark"] .alert-info { background: #1a2535; color: #8db4d8; border-color: #2a3a52; } /* ---------- 20. Misc ---------------------------------------------------- */ .text-center { text-align: center; } .empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--c-ink-mute); } .skip-link { position: absolute; left: -9999px; top: 0; background: #14181f; color: #fff; padding: 8px 16px; z-index: 999; } .skip-link:focus { left: 0; } /* Article ad placement */ .ad-slot { background: var(--c-bg-tint); border: 1px dashed var(--c-line); text-align: center; padding: var(--sp-5); margin: var(--sp-5) 0; color: var(--c-ink-mute); font-family: var(--f-en-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius); } /* Placeholder image (SVG-style gradient when no image set) */ .thumb.placeholder, .article-feature-img.placeholder { background: linear-gradient(135deg, var(--c-bg-tint) 0%, var(--c-line) 100%); position: relative; } .thumb.placeholder::after, .article-feature-img.placeholder::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(184,146,74,.15), transparent 60%); } /* Print */ @media print { .topbar, .primary-nav, .ticker, .footer, .share-bar, .read-progress { display: none; } .article-body { font-size: 14px; } }