/* =========================================================================== NAGO.TV v2 — skin. Loaded AFTER the site's own style.css. It changes colour, type, geometry and spacing only. Every component underneath is the real one, built by the site's own JS, so nothing here can drift from how the site actually works. =========================================================================== */ @font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap; src:url(/v2/fonts/archivo-400-normal.woff2) format('woff2')} @font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap; src:url(/v2/fonts/newsreader-400-normal.woff2) format('woff2')} @font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-display:swap; src:url(/v2/fonts/newsreader-400-italic.woff2) format('woff2')} /* ---- tokens ------------------------------------------------------------ The violet accent and the radial glow go. The brand already owns three colours — they are in the logo file — and the channel colours do the rest of the work. */ main{ --bg:#08080B; --panel:#111116; --text:#fff; --muted:#9A9AA4; --line:rgba(255,255,255,.10); --accent:#2334C8; /* NAGO blue, sampled from the mark */ --network:#2334C8; --nred:#FE202F; --ngold:#FEC72F; --radius:14px; } body{background:#08080B !important} /* page ground: no radial violet wash */ main{font-family:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:0} main h1,main h2,main h3,main .title{letter-spacing:-.03em} /* a single, quiet vignette instead of a coloured glow */ body::before{ content:"";position:fixed;inset:0 0 auto 0;height:420px;z-index:-1; background:linear-gradient(180deg,#0E0E14,#08080B);pointer-events:none; } /* ---- preview banner (not part of the design) --------------------------- */ .v2-bar{position:fixed;left:12px;bottom:12px;z-index:130;background:var(--ngold); color:#0A0A0B;font-size:11px;font-weight:800;letter-spacing:.04em; padding:8px 12px;border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.5)} .v2-bar .wrap{width:auto;margin:0;display:flex;align-items:center;gap:10px} .v2-bar span{display:none} .v2-bar a{color:#0A0A0B;text-decoration:underline} /* ---- rhythm ------------------------------------------------------------- */ main .section{padding:54px 0} main .section h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em} main .pg-head{padding-top:34px} main .pg-head h1{font-size:clamp(34px,5vw,52px)} main .pg-lede{color:var(--muted);font-size:17px;margin-top:8px} /* ---- surfaces ----------------------------------------------------------- */ main .card,.feature,.mini,.station,.player-box,.tv-guide{border-radius:var(--radius)} main .card{background:var(--panel);border:1px solid var(--line); box-shadow:none !important} main .card:after{display:none} /* the radial sheen on every card */ main .feature{background:var(--panel);border-radius:12px} main .feature i{color:var(--accent)} /* flat buttons — the brief asks for no gradient soup */ main .btn{border-radius:10px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; padding:14px 20px} .btn.primary{background:#fff;color:#08080B;border:0} .btn.music{background:var(--music);border:0} .btn.sport{background:var(--sport);color:#08080B;border:0} .btn.gospel{background:var(--ngold);color:#08080B;border:0} .btn.news{background:var(--nred);border:0} .btn.radio{background:var(--accent);border:0} main .grad{background:none !important;-webkit-background-clip:border-box !important; color:#fff !important} /* gradient text off */ /* ---- the watch grid ----------------------------------------------------- */ main .station-grid--hero{grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:20px} main .station-grid--hero>*{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:16px;transition:border-color .18s} main .station-grid--hero>*:hover{border-color:rgba(255,255,255,.30)} /* ---- channel stage ------------------------------------------------------ */ main .tv-stage .wrap{padding-top:8px} main .player-box{padding:0;border:1px solid var(--line);overflow:hidden;background:#000} main .tv-tabs{gap:6px} main .tv-now{margin-top:22px} /* ---- guide card --------------------------------------------------------- */ main .tv-guide{border-radius:var(--radius);overflow:hidden} /* ---- forms -------------------------------------------------------------- */ main .form input,.form textarea{border-radius:10px;background:#0D0D12} /* ---- responsive fixes the live site has ------------------------------- */ @media (max-width:900px){ /* four channels in a three-column grid left NAGO News alone on row two */ main .station-grid--hero{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px} main .station-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} main .section{padding:38px 0} } @media (max-width:560px){ main .station-grid--hero{gap:12px} main .station-grid--hero>*{padding:12px} main .pg-head h1{font-size:32px} } /* =========================================================================== Header, bottom nav, footer and the player bar are NOT part of this skin. Nothing above targets them and nothing above reaches them: the tokens live on `main`, which they are not inside. That is why there are no "restore the original" rules here — there is nothing to restore. =========================================================================== */ /* =========================================================================== /news — the editorial newsroom. Scoped under main like everything else. The only section with no photography, so the generated plate lives here. =========================================================================== */ main .nw-chips{border-bottom:1px solid var(--line);margin-top:18px} main .nw-chips .wrap{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none} main .nw-chip{flex:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px; font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9A9AA4} main .nw-chip.on{background:#fff;border-color:#fff;color:#08080B} main .nw-head{display:flex;align-items:flex-end;justify-content:space-between; border-bottom:2px solid #fff;padding-bottom:12px;margin-bottom:22px} main .nw-head h2{font-size:28px} main .nw-meta{font-size:11.5px;color:#7C7C86;font-weight:600} main .nw-kick{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--nred)} main .nw-panel{display:grid;grid-template-columns:1fr 336px;gap:44px; background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px} main .nw-rule{height:1px;background:var(--line);margin:24px 0} main .nw-two{display:grid;grid-template-columns:1fr 1fr;gap:28px} main .nw-lead{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} main .nw-lead h2{font-size:27px;margin:8px 0 0} main .nw-lead p{color:#B4B4BC;font-family:Newsreader,Georgia,serif;font-size:16px; line-height:1.55;margin-top:11px} main .nw-cat{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; color:var(--nred)} main .nw-cat.blue{color:#7C8CFF} main .nw-cat.ink{color:#B4B4BC} main .nw-h{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.24;margin-top:6px} main .nw-row{display:grid;grid-template-columns:1fr 116px;gap:16px;align-items:start; color:inherit} main .nw-row+.nw-row{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} main .nw-row .nw-meta{margin-top:7px} /* the plate — a place or subject, never the headline */ main .nw-plate{position:relative;aspect-ratio:3/2;border-radius:10px;overflow:hidden; display:flex;align-items:flex-end;padding:14px;background:#1A1A20} main .nw-plate img{position:absolute;top:12px;left:14px;height:11px;width:auto;opacity:.9} main .nw-plate span{font-size:19px;font-weight:800;line-height:1.02;letter-spacing:-.03em; text-transform:uppercase;color:#fff} main .nw-plate.big{aspect-ratio:16/9;padding:20px;border-radius:12px} main .nw-plate.big span{font-size:46px} main .nw-plate.sm span{font-size:13px} main .nw-plate.blue{background:#2334C8} main .nw-plate.red{background:#D31424} main .nw-plate.ink{background:#1A1A20} main .nw-rail h3,main .nw-col h3{font-size:18px;margin:0 0 16px} main .nw-t{display:grid;grid-template-columns:52px 1fr;gap:14px;padding-bottom:16px; position:relative;color:inherit} main .nw-t .nw-time{background:#26262E;color:#fff;font-size:11.5px;font-weight:800; height:21px;display:flex;align-items:center;justify-content:center;border-radius:4px} main .nw-t.hot .nw-time{background:var(--nred)} main .nw-th{font-size:14px;font-weight:700;line-height:1.25} main .nw-cta{display:flex;align-items:center;justify-content:center;margin-top:8px; background:#fff;color:#08080B;padding:13px;border-radius:9px;font-size:11.5px; font-weight:800;letter-spacing:.09em;text-transform:uppercase} main .nw-btn{display:inline-block;margin-top:14px;background:#fff;color:#08080B; padding:10px 16px;border-radius:8px;font-size:11px;font-weight:800; letter-spacing:.09em;text-transform:uppercase} main .nw-cols{display:grid;grid-template-columns:1fr 1fr 320px;gap:40px} main .nw-col h3{border-top:2px solid #fff;padding-top:12px} main .nw-most h3{border-top-color:var(--nred)} main .nw-mr{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line); color:inherit} main .nw-mr b{font-size:24px;color:#3A3A44;width:26px;line-height:1} main .nw-mr span{font-size:14px;font-weight:700;line-height:1.25} @media (max-width:1000px){ main .nw-panel{grid-template-columns:1fr;gap:32px} main .nw-cols{grid-template-columns:1fr;gap:28px} } @media (max-width:640px){ main .nw-lead{grid-template-columns:1fr} main .nw-two{grid-template-columns:1fr} main .nw-panel{padding:18px} main .nw-plate.big span{font-size:28px} } /* =========================================================================== v2 header — replaces .topbar. Deliberately outside `main`. Black utility strip over a white masthead, nine sections, LIVE in red. The nav keeps class "links" so the site's own hamburger drawer still works, and .nav-search / .menu / .nav-acct keep their classes so search, the mobile menu and the account link keep working untouched. =========================================================================== */ .v2-hd{position:sticky;top:0;z-index:50; font-family:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif} .v2-util{background:#08080B;height:34px;display:flex;align-items:center; border-bottom:1px solid rgba(255,255,255,.08)} .v2-util .wrap{display:flex;align-items:center;justify-content:space-between} .v2-util-l{display:flex;align-items:center;gap:20px;font-size:10.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:#8E8E96} .v2-util-l b{color:#fff;font-weight:800} .v2-util-r{display:flex;align-items:center;gap:16px;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase} .v2-util-r a{color:#8E8E96} .v2-util-r a:hover{color:#fff} .v2-lang{display:flex;gap:1px;background:#26262C;border-radius:3px;overflow:hidden} .v2-lang span{padding:3px 8px;font-size:9.5px;font-weight:800;color:#8E8E96} .v2-lang span.on{background:#fff;color:#08080B} .v2-mast{background:#fff;border-bottom:1px solid #E2E2DD} .v2-mast .wrap{height:74px;display:flex;align-items:center;gap:32px} /* the Nago lockups are square canvases with heavy transparent padding — fix the HEIGHT, never the width, or the header grows to 170px tall */ .v2-brand img{height:30px;width:auto;display:block} .v2-nav{display:flex;align-items:center;gap:23px;flex-grow:1; position:static;inset:auto;flex-direction:row;background:none;border:0;padding:0} .v2-nav a{color:#0A0A0B;font-size:12.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:5px 0;border-bottom:2px solid transparent; opacity:1;background:none;border-radius:0} .v2-nav a:hover{color:#2334C8} .v2-nav a.on{color:#2334C8;border-bottom-color:#2334C8} .v2-nav a.live{color:#FE202F;display:flex;align-items:center;gap:6px} .v2-nav a.live .d{width:7px;height:7px;border-radius:50%;background:#FE202F;display:block} .v2-hd-r{display:flex;align-items:center;gap:14px;margin-left:auto} .v2-hd-r .nav-search,.v2-hd-r .menu{background:none;border:0;padding:0;cursor:pointer} .v2-hd-r i{color:#0A0A0B;font-size:16px} .v2-hd-r .nav-acct{width:32px;height:32px;border-radius:50%;background:#F0F0EC; display:flex;align-items:center;justify-content:center} .v2-hd-r .menu{display:none} @media (max-width:1120px){ /* below this the nine items stop fitting, so the site's own drawer takes over */ .v2-hd-r .menu{display:block} .v2-nav{position:fixed;inset:108px 14px auto 14px;display:none;flex-direction:column; align-items:stretch;background:#fff;border:1px solid #E2E2DD;border-radius:14px; padding:10px;gap:0;box-shadow:0 20px 50px rgba(0,0,0,.5)} .v2-nav.show{display:flex} .v2-nav a{padding:13px 12px;border-bottom:1px solid #EFEFEA} .v2-nav a:last-child{border-bottom:0} .v2-nav a.on{border-bottom-color:#EFEFEA;background:#F6F6F2} } @media (max-width:560px){ .v2-util-l span,.v2-util-r a{display:none} .v2-mast .wrap{height:62px;gap:16px} .v2-brand img{height:25px} .v2-nav{inset:96px 10px auto 10px} } /* =========================================================================== Black ground, white panels — the arrangement La 1ère uses with teal. The page ground stays black; the content sits on white cards. =========================================================================== */ /* ---- homepage ---------------------------------------------------------- */ .watch-page main .pick-section > .wrap{ background:#fff;color:#0A0A0B;border-radius:16px 16px 0 0;padding:32px 34px 10px} .watch-page main .section:not(.pick-section) > .wrap{ background:#fff;color:#0A0A0B;border-radius:0 0 16px 16px;padding:10px 34px 32px} .watch-page main .section{padding:0} .watch-page main .pick-section{padding-top:30px} .watch-page main .section:not(.pick-section){padding-bottom:44px} .watch-page main .pick-title,.watch-page main h2{color:#0A0A0B} .watch-page main .pick-title{font-size:44px} .watch-page main h2{font-size:26px;padding-top:20px;border-top:1px solid #E4E4DE} .watch-page main .station-tile{background:#FBFBF8;border:1px solid #E4E4DE; border-radius:12px;padding:14px;transition:border-color .18s,background .18s} .watch-page main .station-tile:hover{border-color:#0A0A0B;background:#fff} .watch-page main .st-name{color:#0A0A0B} .watch-page main .st-tag,.watch-page main .muted{color:#5C5C66} .watch-page main .oa{background:#FBFBF8;border:1px solid #E4E4DE;border-radius:12px; padding:16px;display:block} .watch-page main .oa-ch{color:#2334C8;font-weight:800;letter-spacing:.13em; text-transform:uppercase;font-size:10.5px} .watch-page main .oa-title{color:#0A0A0B} .watch-page main .oa-next{color:#5C5C66} /* ---- /news: same mix --------------------------------------------------- */ main .nw-panel{background:#fff;color:#0A0A0B;border-color:#E4E4DE;border-radius:16px} main .nw-panel .nw-rule{background:#E4E4DE} main .nw-panel .nw-meta{color:#67676F} main .nw-panel .nw-cat.ink{color:#0A0A0B} main .nw-panel .nw-cat.blue{color:#2334C8} main .nw-panel .nw-lead p{color:#3C3C44} main .nw-panel .nw-row+.nw-row{border-top-color:#E4E4DE} main .nw-rail h3{color:#0A0A0B} main .nw-t .nw-time{background:#0A0A0B} main .nw-cta{background:#0A0A0B;color:#fff} main .nw-cols{background:#fff;color:#0A0A0B;border:1px solid #E4E4DE;border-radius:16px; padding:28px 32px} main .nw-col h3{border-top-color:#0A0A0B} main .nw-mr{border-bottom-color:#E4E4DE} main .nw-mr b{color:#C9C9CE} main .nw-sec .nw-head{border-bottom-color:#fff} main .nw-sec .nw-head h2{color:#fff} /* =========================================================================== The article — a white reading page. Arrangement follows the franceinfo reference: eyebrow, headline, byline with a mark, a hairline meta rule carrying published time and reading time, share, then one narrow body column. Every class below is the renderer's own (api/news-post.php) — nothing is reimplemented. =========================================================================== */ main .nw-article{background:#fff;color:#0A0A0B;margin:0;padding:44px 0 60px} main .nw-article .wrap{width:min(760px,92vw)} main .nw-article .nw-eyebrow{font-size:11px;font-weight:800;letter-spacing:.15em; text-transform:uppercase;color:#FE202F;margin:0 0 14px} main .nw-article .nw-eyebrow a{color:#2334C8} main .nw-article h1{font-size:clamp(30px,4.2vw,44px);line-height:1.09; letter-spacing:-.032em;color:#0A0A0B;margin:0} /* the byline gets the NAGO mark as its avatar, the way the reference pairs a portrait with the author's name */ main .nw-article .nw-by{display:flex;align-items:center;gap:12px;margin:26px 0 0; font-size:14px;color:#5C5C66} main .nw-article .nw-by::before{content:"";width:36px;height:36px;border-radius:50%; flex:none;background:#0A0A0B url(/assets/img/nago-disc-white.png) center/18px no-repeat} main .nw-article .nw-by b{color:#0A0A0B;font-weight:800} main .nw-article .nw-when{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;margin:20px 0 0;padding:13px 0; border-top:1px solid #E4E4DE;border-bottom:1px solid #E4E4DE; font-size:12.5px;color:#67676F} main .nw-article .nw-read{display:flex;align-items:center;gap:6px} main .nw-article .nw-share{display:flex;align-items:center;gap:10px;margin:18px 0 30px; font-size:12.5px;color:#67676F} main .nw-article .nw-sharebtn{width:38px;height:38px;border-radius:999px; border:1px solid #D8D8D2;background:#fff;color:#0A0A0B;cursor:pointer} main .nw-article .nw-detail{font-size:17.5px;line-height:1.72;color:#22222A} main .nw-article .nw-detail p{margin:0 0 20px} main .nw-article .nw-detail p:first-child{font-size:20.5px;line-height:1.55;color:#0A0A0B} main .nw-article .nw-detail p:first-child::first-letter{font-size:inherit;float:none; color:inherit;line-height:inherit;margin:0;font-weight:inherit} /* no drop cap */ main .nw-article .nw-detail a{color:#2334C8;text-decoration:underline; text-underline-offset:2px} main .nw-article .nw-detail h2,main .nw-article .nw-detail h3{ font-size:22px;margin:34px 0 12px;color:#0A0A0B} main .nw-article .nw-detail img{border-radius:10px} main .nw-article figure,main .nw-article .nw-media{margin:26px 0} main .nw-article figcaption{font-size:12.5px;color:#67676F;margin-top:8px;line-height:1.5} @media (max-width:640px){ .watch-page main .pick-section > .wrap, .watch-page main .section:not(.pick-section) > .wrap{padding-left:18px;padding-right:18px} main .nw-cols{padding:20px 18px} main .nw-article{padding:28px 0 40px} } /* the v2 header also carries class "topbar" (shell.js needs it), so neutralise the site's own bar styling — the two strips inside paint their own ground */ .topbar.v2-hd{background:none;border-bottom:0;backdrop-filter:none} /* the mast wrapper also carries .nav (shell.js hook) — stop the site's min-height:78px from fighting the v2 mast height */ .v2-mast .wrap.nav{min-height:0} .v2-brand.brand img{width:auto} /* .topbar .links a{color:#fff} in the site sheet outranks .v2-nav a, and the header must keep class="topbar" for shell.js — so match that specificity. */ .topbar.v2-hd .links a{color:#0A0A0B;opacity:1} .topbar.v2-hd .links a:hover{color:#2334C8;background:none} .topbar.v2-hd .links a.on,.topbar.v2-hd .links a.active{color:#2334C8;background:none} .topbar.v2-hd .links a.live{color:#FE202F} /* no ticker in v2 */ .ticker,.tk-news,.tk-song{display:none !important} /* ---- article: standfirst, action row, lead image ----------------------- */ main .nw-article .v2-stand{font-size:20.5px;line-height:1.5;color:#3C3C44; margin:18px 0 0;font-weight:400} main .nw-article .nw-detail p:first-child{font-size:17.5px;line-height:1.72;color:#22222A} /* the renderer sets a drop cap; the reference has none */ main .nw-article .nw-detail p::first-letter, main .nw-article .nw-detail p:first-of-type::first-letter{ font-size:inherit !important;float:none !important;line-height:inherit !important; margin:0 !important;padding:0 !important;color:inherit !important; font-weight:inherit !important;font-family:inherit !important} /* share reads as an action button, as in the reference */ main .nw-article .nw-sharebtn{width:auto;height:36px;padding:0 16px;border-radius:999px; display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700} /* ---- article: action row ----------------------------------------------- */ main .nw-article .v2-acts{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0} main .nw-article .v2-act{display:inline-flex;align-items:center;gap:8px;height:36px; padding:0 16px;border:1px solid #D8D8D2;border-radius:999px;background:#fff; color:#0A0A0B;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit} main .nw-article .v2-act:hover{border-color:#0A0A0B} main .nw-article .v2-act b{font-weight:800} /* ---- article: comments -------------------------------------------------- */ main .v2-comments{width:min(760px,92vw);margin:44px auto 0;padding-top:34px; border-top:1px solid #E4E4DE} main .v2-comments h2{font-size:24px;color:#0A0A0B;display:flex;align-items:center;gap:10px} main .v2-comments h2 span{font-size:13px;font-weight:800;color:#fff;background:#0A0A0B; border-radius:999px;padding:3px 10px} main .v2-cform{margin:22px 0 34px} main .v2-clabel{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:#5C5C66;margin-bottom:10px} main .v2-cform textarea,main .v2-cform input{width:100%;border:1px solid #D8D8D2; border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;color:#0A0A0B; background:#fff;resize:vertical} main .v2-cform textarea:focus,main .v2-cform input:focus{outline:2px solid #2334C8; outline-offset:-1px;border-color:#2334C8} main .v2-crow{display:flex;gap:10px;margin-top:10px} main .v2-crow input{flex:1} main .v2-cbtn{flex:none;border:0;border-radius:999px;background:#0A0A0B;color:#fff; padding:0 22px;height:44px;font:inherit;font-size:12.5px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;cursor:pointer} main .v2-cnote{font-size:12.5px;color:#67676F;margin-top:10px;line-height:1.5} main .v2-clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px} main .v2-clist li{display:grid;grid-template-columns:40px 1fr;gap:14px; padding-bottom:22px;border-bottom:1px solid #EFEFEA} main .v2-clist li:last-child{border-bottom:0;padding-bottom:0} main .v2-cav{width:40px;height:40px;border-radius:50%;background:#EDEDE7;color:#4A4A54; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800} main .v2-cwho{font-size:14px;font-weight:800;color:#0A0A0B;display:flex; align-items:center;gap:8px;flex-wrap:wrap} main .v2-cwho span{font-weight:600;color:#8A8A92;font-size:12.5px} main .v2-cwho em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;background:#FE202F;color:#fff;border-radius:4px;padding:2px 7px} main .v2-clist p{margin:7px 0 0;font-size:15.5px;line-height:1.6;color:#22222A} main .v2-cact{display:flex;gap:16px;margin-top:9px} main .v2-cact button{background:none;border:0;padding:0;cursor:pointer;font:inherit; font-size:12.5px;font-weight:700;color:#5C5C66} main .v2-cact button:hover{color:#2334C8} @media (max-width:640px){ main .nw-article .nw-share{margin-top:12px;justify-content:flex-start} main .v2-crow{flex-direction:column} main .v2-cbtn{height:46px} } /* ---- article foot: tags, related, source links ------------------------- These sit on the white article now, and the site colours them for a dark page — the related headlines were rendering near-white on white. */ main .nw-article .nw-chips{border:0;margin:26px 0 0;padding:0} main .nw-article .nw-chips .wrap{padding:0} main .nw-article .nw-chip{border:1px solid #D8D8D2;color:#5C5C66;background:#fff; border-radius:999px;padding:6px 13px;font-size:11px} main .nw-article .nw-links a{color:#2334C8} main .nw-article .nw-next{margin-top:34px;padding-top:26px;border-top:1px solid #E4E4DE} main .nw-article .nw-next>*:first-child{color:#0A0A0B} main .nw-article .nw-nextlist{display:flex;flex-direction:column} main .nw-article .nw-nextcell{padding:16px 0;border-bottom:1px solid #EFEFEA} main .nw-article .nw-nexttext, main .nw-article .nw-nextcell a{color:#0A0A0B} main .nw-article .nw-nexttext b,main .nw-article .nw-nexttext strong{color:#0A0A0B} main .nw-article .nw-nextsnip{color:#4A4A54;font-size:14.5px;line-height:1.55} main .nw-article .nw-nextmeta{color:#8A8A92;font-size:12px} main .nw-article .nw-back a,main .nw-article .nw-back{color:#2334C8} main .nw-article .nw-foot{border-top:1px solid #E4E4DE;margin-top:26px;padding-top:18px} /* the three actions are one row under the standfirst, above the author */ main .nw-article .v2-acts{margin:22px 0 4px} main .nw-article .nw-share{display:none} main .nw-article .nw-by{margin-top:22px} main .nw-article .nw-when{margin-top:16px} /* the Listen module sits on black — its heading was inheriting the panel's ink */ /* chips are links now */ main .nw-chip{cursor:pointer;text-decoration:none;display:inline-block} main .nw-chip:hover{border-color:#fff;color:#fff} main .nw-chip.on:hover{color:#08080B} /* homepage: two channels have white mark-plates and two black, so on the white panel Music and Sport were floating while Gospel and News read as blocks — a hairline gives all four the same edge */ .watch-page main .st-mark{border:1px solid #E4E4DE;border-radius:8px} /* cookie notice was landing over the article body */ main .v2-cempty{color:#67676F;font-size:14.5px;list-style:none; grid-template-columns:1fr !important} /* the share control is a pill in the action row, label and icon both inside the button so the whole pill is the click target */ main .nw-article .nw-sharebtn.v2-act{width:auto;height:36px;padding:0 16px; border:1px solid #D8D8D2;border-radius:999px;background:#fff;color:#0A0A0B; display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12.5px; font-weight:700;cursor:pointer} main .nw-article .nw-sharebtn.v2-act:hover{border-color:#0A0A0B} /* /news sidebar: watch NAGO News, in the slot the radio card used to hold. The News mark is red artwork, so it needs its dark plate (#0d0d13) — on a light plate it would disappear, the same trap as the channel tiles. */ main .nw-watch{margin-top:24px;background:#08080B;border:1px solid #26262C; border-radius:12px;padding:18px;color:#fff} main .nw-watch:hover{border-color:#3A3A44} main .nw-live{display:inline-flex;align-items:center;gap:6px;background:#FE202F;color:#fff; font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px} main .nw-live .d{width:5px;height:5px;border-radius:50%;background:#fff} main .nw-watch .nw-h{display:block;color:#fff;font-size:17px} main .nw-watch .nw-meta{display:block;color:#9A9AA4;margin-top:5px;line-height:1.5} main .nw-watch .nw-btn{display:inline-block;margin-top:14px;background:#fff;color:#08080B; padding:10px 16px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.09em; text-transform:uppercase} main .nw-watch-top{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:12px} main .nw-watch-top img{height:18px;width:auto} main .nw-watch .player-box{border-radius:10px;overflow:hidden;background:#000; aspect-ratio:16/9;padding:0;border:1px solid #26262C} main .nw-watch .player-box video,main .nw-watch .player-box media-player{ width:100%;height:100%;display:block} main .nw-watch .nw-btn{display:block;text-align:center;margin-top:12px} main .nw-watch .soon{aspect-ratio:16/9;border-radius:10px;font-size:13px} /* the sidebar stage is a plain box — none of the channel page's stage spacing */ main .nw-stage{padding:0;margin:0} main .nw-stage .wrap{width:auto;margin:0} main .nw-watch .tvp,main .nw-watch .tvp-video{width:100%;display:block} main .nw-watch .tvp-video{aspect-ratio:16/9;object-fit:cover;background:#000} /* the channel mark as a background, not an : an here rendered as a broken-image glyph even though the file serves 200 with the page's own referer, so something client-side was rewriting the element */ main .nw-watch-top .nw-mark{display:block;width:96px;height:20px; background:url(/assets/img/marks/nago-news.png) right center/contain no-repeat} main .nw-more{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:#2334C8} /* ---- mobile header ------------------------------------------------------ The live site's phone bar is a CENTRED logo with a bordered hamburger on the right, and nothing else — search lives inside the menu. That layout is already in style.css and it works; v2 was fighting it and ending up with a logo shoved left behind three crowded icons. So the site's arrangement stands and only the v2 colours go over it: the mast is white, so the mark and the hamburger are ink rather than white. */ @media (max-width:900px){ .topbar.v2-hd .wrap.nav{justify-content:center;min-height:60px;position:relative} .topbar.v2-hd .brand{order:1} .topbar.v2-hd .brand img{height:26px;width:auto} /* the icon group is not a row on a phone — the menu holds these */ .topbar.v2-hd .v2-hd-r{position:static;display:contents} .topbar.v2-hd .nav-search,.topbar.v2-hd .nav-acct{display:none} .topbar.v2-hd .menu{order:2;position:absolute;right:0;top:50%; transform:translateY(-50%);width:42px;height:42px;display:grid; place-items:center;border:1px solid #D8D8D2;border-radius:10px; background:#fff;margin:0} .topbar.v2-hd .menu i{color:#0A0A0B;font-size:16px} /* the drawer drops straight under the bar */ .topbar.v2-hd .links.v2-nav{inset:auto 10px auto 10px;top:100%;margin-top:8px} } /* Seven stations in two columns leaves the last one alone on its own row — the same orphan the four channels made in a three-column grid. An odd last child spans the row instead. */ @media (max-width:900px){ main .station-grid > *:last-child:nth-child(odd){grid-column:1 / -1} } /* ---- the phone menu panel ----------------------------------------------- .mnav-logo is set by WIDTH in the earlier rules (118/124/140px) and only by height in later queries. The Nago lockups are square canvases with the artwork in a band and a lot of transparent padding, so a width-sized logo renders as tall as it is wide — which is why it was sitting on top of the search row. Height, never width. */ .mnav-logo{height:34px !important;width:auto !important;max-width:58vw; object-fit:contain;display:block} .mnav-top{min-height:44px;margin-bottom:20px} .mnav-search{margin-bottom:8px} .mnav-list a.is-live span{color:#FE202F} .mnav-list a.is-live span::before{content:"";display:inline-block;width:8px;height:8px; border-radius:50%;background:#FE202F;margin-right:9px;vertical-align:middle} /* ---- mobile tab bar ----------------------------------------------------- The site's bar floats: inset 12px each side, 24px radius, translucent with a blur. The reference is the opposite — edge to edge, solid, flush to the bottom, with the active tab underlined. Full width also buys back the 24px of gutter, which matters at 390px with four labels. */ .bottom-nav{ left:0;right:0;bottom:0; border-radius:0; border:0;border-top:1px solid rgba(255,255,255,.14); background:#0A0A0B; /* solid: no blur, nothing showing through */ backdrop-filter:none; padding:0; box-shadow:0 -10px 30px rgba(0,0,0,.45); } .bottom-nav a,.bottom-nav .bn-more{ /* style.css has a later `.bottom-nav a{display:flex;align-items:center; justify-content:center}` with no flex-direction, i.e. a ROW — which put the label beside/over the icon. Same specificity as this rule, so the direction is forced rather than left to file order. */ display:flex !important;flex-direction:column !important; align-items:center !important;justify-content:center !important; gap:5px !important; position:relative;border-radius:0;background:none;line-height:1; min-height:0; padding:9px 4px calc(13px + env(safe-area-inset-bottom,0px)); color:rgba(255,255,255,.66); font-size:12px;font-weight:600;letter-spacing:0;text-transform:none} .bottom-nav a i,.bottom-nav .bn-more i{font-size:20px;line-height:1;display:block} .bottom-nav a.active,.bottom-nav a:hover,.bottom-nav .bn-more:hover{ background:none;color:#fff} /* the active tab is marked by a wide rule under the label, not a filled pill */ .bottom-nav a.active::after{ content:"";position:absolute;left:50%;transform:translateX(-50%); bottom:calc(4px + env(safe-area-inset-bottom,0px)); width:54px;height:3px;border-radius:2px;background:#FEC72F;display:block} /* the floating player bar sits directly on top of the tab bar now */ @media (max-width:380px){ .bottom-nav a,.bottom-nav .bn-more{font-size:11px} .bottom-nav a i,.bottom-nav .bn-more i{font-size:19px} .bottom-nav a.active::after{width:46px} } /* .cc is placed by `bottom`, not by a grid — it needs to clear the player bar (64px) and the tab bar, or it lands on top of both */ /* ---- the More sheet ----------------------------------------------------- .bn-sheet is built by shell.js and only gets `display:grid` when .open — but it was still painting its rounded border above the tab bar, which read as a ghost box behind the labels. Hide it outright until it is opened, and when it is, make it match the solid full-bleed bar. */ .bn-sheet{display:none} .bn-sheet.open{ display:grid;position:fixed;left:0;right:0; bottom:calc(56px + env(safe-area-inset-bottom,0px)); z-index:59;background:#0A0A0B;border:0;border-top:1px solid rgba(255,255,255,.14); border-radius:0;padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));gap:0} .bn-sheet.open a{ display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:0; color:#D8D8DE;font-size:14.5px;font-weight:600;background:none} .bn-sheet.open a+a{border-top:1px solid rgba(255,255,255,.08)} .bn-sheet.open a i{width:20px;font-size:16px;text-align:center;color:#9A9AA4} .bn-sheet.open a:hover{background:rgba(255,255,255,.06);color:#fff} /* ---- the preview chip --------------------------------------------------- It is fixed at bottom-left, which on a phone is exactly where the tab bar is — its panel was showing through behind the labels and reading as a ghost box. On mobile it moves into the black utility strip instead, where there is room and nothing to collide with. */ @media (max-width:900px){ .v2-bar{display:none} .v2-util-l b::after{content:" · PREVIEW v2";color:#FEC72F;letter-spacing:.1em} } /* ---- how the two bars stack -------------------------------------------- .playerbar was pinned to a hard-coded 66px, which was wrong at both ends: on desktop there is no tab bar at all (.bottom-nav is display:none above 900px), so the bar floated 66px up and left a strip of page showing underneath it; on a phone the tab bar is taller than 66px once the home-bar safe area is added, so the player bar sat on top of the tabs. One variable now describes the tab bar's real height, and both the player bar and the page padding are derived from it. */ html{ --v2-tabh:0px; /* no tab bar by default */ --v2-pbh:60px; /* the player bar */ } @media (max-width:900px){ html{--v2-tabh:calc(60px + env(safe-area-inset-bottom,0px))} } .playerbar{ left:0;right:0;border-radius:0;border-left:0;border-right:0; bottom:var(--v2-tabh); } /* room for whatever is actually pinned down there, so nothing is buried */ body{padding-bottom:calc(var(--v2-tabh) + var(--v2-pbh) + 8px)} /* the cookie notice clears both */ .cc{bottom:calc(var(--v2-tabh) + var(--v2-pbh) + 16px)} /* ---- cookie notice on a phone ------------------------------------------- It is the site's own notice and it stays, but at 390px the full paragraph plus two stacked full-width buttons swallowed a third of the screen on every page. Tightened: smaller copy, buttons on one row. */ @media (max-width:900px){ .cc{left:10px;right:10px;padding:14px;border-radius:12px;font-size:12.5px; line-height:1.45} .cc p{margin:0} .cc-btns{margin-top:12px;gap:8px;flex-wrap:nowrap} .cc-btns button,.cc-btns a{flex:1;padding:11px 10px;font-size:12.5px; white-space:nowrap} } /* =========================================================================== Where a story happened — /v2/haiti and /v2/diaspora. The chip carries a count, including zero: a department with no coverage today is worth seeing as an absence rather than quietly omitted. =========================================================================== */ main .geo-chips .wrap{flex-wrap:nowrap} main .nw-chip span{margin-left:7px;padding:1px 6px;border-radius:999px; background:rgba(255,255,255,.12);font-size:10px;font-variant-numeric:tabular-nums} main .nw-chip.on span{background:rgba(10,10,11,.14)} main .nw-chip.is-empty{opacity:.45} main .geo-block+.geo-block{margin-top:34px} main .geo-panel{display:block;padding:24px 26px} main .geo-lead{display:block;color:inherit;padding-bottom:18px; border-bottom:1px solid #E4E4DE} main .geo-lead .nw-h{font-size:21px;line-height:1.2} main .geo-lead p{font-family:Newsreader,Georgia,serif;font-size:15.5px;line-height:1.55; color:#3C3C44;margin:9px 0 0} main .geo-lead .nw-meta{margin-top:9px} main .geo-list{list-style:none;margin:0;padding:0} main .geo-list li+li{border-top:1px solid #EFEFEA} main .geo-list a{display:grid;grid-template-columns:54px 1fr;gap:14px; align-items:baseline;padding:13px 0;color:inherit} main .geo-list .nw-h{font-size:15px;font-weight:700} main .geo-time{font-size:11.5px;font-weight:800;color:#8A8A92; font-variant-numeric:tabular-nums} main .geo-note{margin-top:28px;line-height:1.6} /* the place label a card carries, wherever a card appears */ main .geo-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px; border:1px solid #D8D8D2;background:#fff;color:#4A4A54; font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} main .geo-chip:hover{border-color:#0A0A0B;color:#0A0A0B} @media (max-width:640px){ main .geo-panel{padding:18px} main .geo-lead .nw-h{font-size:18px} main .geo-list a{grid-template-columns:46px 1fr;gap:10px} } /* the place chip sits inline with the timestamp, so it reads as metadata rather than another tag competing with the category */ main .nw-meta .geo-chip{margin-left:10px;padding:1px 7px;font-size:9.5px; letter-spacing:.08em;vertical-align:1px} main .nw-mr span .geo-chip{margin-left:8px;font-size:9px;padding:1px 6px} /* The eyebrow's place link. The eyebrow styles its as an underlined blue link, which made the chip read as a link rather than a chip — so the chip's own treatment is restated here. */ main .nw-article .nw-eyebrow .geo-chip{ margin-left:5px;vertical-align:1px; color:#4A4A54;text-decoration:none;border-color:#D8D8D2} main .nw-article .nw-eyebrow .geo-chip:hover{ color:#0A0A0B;border-color:#0A0A0B;text-decoration:none} /* the read count on a Most read row — a fact, set quietly */ main .nw-reads{display:block;margin-top:4px;font-style:normal;font-size:11px; font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A8A92} main .nw-mr-note{margin-top:14px;line-height:1.5} /* =========================================================================== Accessibility — the two things the statement claims, made true here. =========================================================================== */ /* 1. A visible focus ring. The site's own reset leaves focus to the browser, which on a dark ground is often invisible. Anyone navigating by keyboard has to be able to see where they are. */ main a:focus-visible, main button:focus-visible, main input:focus-visible, main textarea:focus-visible, .topbar a:focus-visible, .topbar button:focus-visible, .bottom-nav a:focus-visible, .playerbar button:focus-visible{ outline:3px solid #FEC72F;outline-offset:2px;border-radius:2px} /* 2. Honour a reduced-motion preference. Vestibular disorders are not rare, and nothing here needs to move. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} .ncard,a .ncard:hover,a:hover .ncard{transform:none !important} } /* skip link — the first thing a keyboard or screen-reader user meets */ .v2-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#FEC72F; color:#0A0A0B;padding:12px 18px;font-size:14px;font-weight:800;border-radius:0 0 8px 0} .v2-skip:focus{left:0} /* the accessibility statement reads as a document, not a dashboard */ main .a11y{max-width:820px;padding:30px 34px} main .a11y h2{font-size:22px;margin:30px 0 12px;color:#0A0A0B} main .a11y h2:first-child{margin-top:0} main .a11y ul{margin:0;padding-left:22px} main .a11y li{font-size:16px;line-height:1.65;color:#22222A;margin-bottom:11px} main .a11y li b{color:#0A0A0B} main .a11y p{font-size:16px;line-height:1.65;color:#22222A;margin:0 0 12px} main .a11y .a11y-note{color:#67676F;font-size:14.5px} main .a11y .a11y-rev{margin-top:26px;padding-top:16px;border-top:1px solid #E4E4DE; font-size:13px;color:#67676F} main .a11y code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px; background:#F2F2EF;padding:1px 5px;border-radius:4px} /* ---- /meteo ------------------------------------------------------------ The weather section is built to carry writing, so it follows the same black-ground / white-panel mix as /news: the reading sits on the dark ground as data, the reporting sits in the white panel as journalism. Red is reserved. The cyclone band is a thin quiet rule on an ordinary day and only turns red when the hurricane centre has a named system — if it were red every day it would say nothing on the day it matters. */ main .wx-watch{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:#0C0C11} main .wx-watch .wrap{display:flex;align-items:center;gap:14px;padding:12px 0; flex-wrap:wrap} main .wx-wtag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.15em; text-transform:uppercase;color:#fff;background:var(--nred); padding:4px 10px;border-radius:4px} main .wx-wtag.is-quiet{background:transparent;color:var(--muted); border:1px solid var(--line);padding:3px 9px} main .wx-wtxt{color:#C8C8D0;font-size:14px;line-height:1.5} main .wx-watch.is-active{background:rgba(254,32,47,.07);border-color:rgba(254,32,47,.35)} main .wx-watch.is-active .wx-wtxt{color:#fff} main .wx-watch.is-watch .wx-wtag{background:var(--ngold);color:#0A0A0B} /* the reading — one row, scrolls on a phone rather than reflowing into a grid of cards, because ten cities in a wrapping grid reads as a dashboard */ main .wx-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px; scrollbar-width:thin;-webkit-overflow-scrolling:touch} main .wx-city{flex:0 0 118px;background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:14px 12px 12px;text-align:center} main .wx-name{font-size:13px;font-weight:700;letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} main .wx-dept{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-top:2px} main .wx-now{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1; margin-top:8px} main .wx-now span{font-size:17px;font-weight:600;color:var(--muted)} main .wx-hilo{font-size:12px;color:var(--muted);margin-top:6px} main .wx-hilo b{color:#fff;font-weight:700} main .wx-sky{font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin-top:6px} /* Sky marks drawn in CSS rather than loaded as icons: the site's icon font is already doing enough work, and these need to read at 22px on a dark ground. */ main .wx-ico{width:26px;height:26px;margin:10px auto 0;position:relative} main .wx-ico::before,main .wx-ico::after{content:"";position:absolute} main .wx-ico.i-sun::before{inset:4px;border-radius:50%;background:var(--ngold)} main .wx-ico.i-part::before{left:2px;top:3px;width:12px;height:12px;border-radius:50%; background:var(--ngold)} main .wx-ico.i-part::after,main .wx-ico.i-cloud::after{ left:5px;bottom:5px;width:18px;height:10px;border-radius:999px;background:#C8C8D0; box-shadow:-2px -4px 0 -1px #C8C8D0, 6px -5px 0 -1px #C8C8D0} main .wx-ico.i-cloud::before{display:none} main .wx-ico.i-mist::before{left:3px;top:8px;width:20px;height:2px;border-radius:2px; background:#C8C8D0;box-shadow:0 5px 0 #9A9AA4, 0 10px 0 #6E6E78} main .wx-ico.i-mist::after{display:none} main .wx-ico.i-rain::before{left:4px;top:3px;width:18px;height:10px;border-radius:999px; background:#C8C8D0;box-shadow:-2px -4px 0 -1px #C8C8D0, 6px -5px 0 -1px #C8C8D0} main .wx-ico.i-rain::after{left:7px;bottom:1px;width:2px;height:6px;border-radius:2px; background:#5B8CFF;box-shadow:6px 0 0 #5B8CFF, 12px 0 0 #5B8CFF} main .wx-ico.i-bolt::before{left:4px;top:3px;width:18px;height:10px;border-radius:999px; background:#9A9AA4;box-shadow:-2px -4px 0 -1px #9A9AA4, 6px -5px 0 -1px #9A9AA4} main .wx-ico.i-bolt::after{left:11px;bottom:0;width:4px;height:9px;background:var(--ngold); clip-path:polygon(60% 0,0 55%,42% 55%,25% 100%,100% 42%,52% 42%)} /* the written desk */ main .wx-lead{display:block;text-decoration:none;color:inherit} main .wx-lead h3{font-size:clamp(21px,3vw,28px);line-height:1.15;margin:8px 0 10px} main .wx-lead p{color:#3C3C44;line-height:1.6;margin:0 0 8px} main .wx-lead:hover h3{text-decoration:underline;text-underline-offset:3px} main .wx-list{list-style:none;margin:0;padding:0} main .wx-list li+li{border-top:1px solid #E4E4DE} main .wx-list a{display:flex;justify-content:space-between;gap:18px;align-items:baseline; padding:13px 0;text-decoration:none;color:inherit} main .wx-list a:hover .nw-h{text-decoration:underline;text-underline-offset:3px} main .wx-list .nw-meta{flex:none} /* The empty state is a real answer, not a placeholder, so it is set as text rather than dressed up as a missing card. */ main .wx-empty{padding:6px 0 4px;max-width:58ch} main .wx-empty p{color:#3C3C44;line-height:1.65;margin:0 0 12px} main .wx-empty p b{color:#0A0A0B} main .wx-rail+.wx-rail{margin-top:18px} main .wx-fact{font-size:13.5px;line-height:1.55;color:#3C3C44;margin:0 0 10px; padding-left:12px;border-left:2px solid #E4E4DE} main .wx-note{font-size:12.5px;line-height:1.6;color:#67676F;margin:14px 0 0} main .wx-rrow{display:flex;justify-content:space-between;gap:12px;margin:0; padding:7px 0;border-bottom:1px solid #E4E4DE;font-size:13.5px;color:#3C3C44} main .wx-rrow:last-child{border-bottom:0} main .wx-rrow b{color:#0A0A0B} @media (max-width:700px){ main .wx-city{flex:0 0 104px} main .wx-watch .wrap{gap:10px} main .wx-wtxt{font-size:13px} } /* ---- /meteo, second pass ---------------------------------------------- Two things the first render got wrong. 1. Ten city tiles in a scrolling row were cut mid-tile at desktop width, which reads as a broken layout rather than as something to scroll. They now wrap into a grid wherever there is room and only scroll on a phone, where a swipe is the expected gesture. 2. The panel's side rail carried three blocks against a column holding one story, so the white box stretched to the rail and left a large void. Region and provenance moved below; the rail keeps only the derived facts, which is the part that belongs beside the reporting. */ main .wx-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px;overflow:visible} main .wx-city{flex:initial} @media (max-width:820px){ main .wx-strip{display:flex;overflow-x:auto;grid-template-columns:none} main .wx-city{flex:0 0 112px} } /* the panel no longer stretches its short column */ main .wx-panel{align-items:start} main .wx-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:26px; background:#fff;color:#0A0A0B;border:1px solid #E4E4DE;border-radius:16px; padding:26px 30px;margin-top:18px} main .wx-foot h3{font-size:16px;margin:0 0 14px;letter-spacing:-.02em} main .wx-foot .wx-note{margin-top:0} main .wx-rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 26px} @media (max-width:760px){ main .wx-foot{grid-template-columns:1fr;gap:22px;padding:22px} } /* ---- /meteo, third pass ------------------------------------------------ */ /* Section headings inside the white panel were white on white — set for the dark ground they normally sit on, and invisible here. "Weather reporting" simply did not appear above the lead story. */ main .nw-panel .nw-head h2, main .wx-foot h3{color:#0A0A0B} main .nw-panel .nw-head{border-bottom-color:#E4E4DE} /* auto-fit gave nine tiles and left the tenth alone on a second row. Five and five is a deliberate arrangement; nine and one looks like a mistake. */ @media (min-width:821px){ main .wx-strip{grid-template-columns:repeat(5,1fr)} } @media (min-width:1180px){ main .wx-strip{grid-template-columns:repeat(5,1fr)} } /* ---- /meteo/ — the per-city note --------------------------------- */ main .wx-crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin-bottom:10px} main .wx-crumb a{color:var(--muted);text-decoration:none} main .wx-crumb a:hover{color:#fff} main .wx-crumb span{margin:0 6px;opacity:.5} /* The reading leads the page: someone opening a city page wants the number before the prose, and the prose is beneath it where they can choose it. */ main .wx-hero{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center; background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:26px 30px} main .wx-hero-now{text-align:center;min-width:132px} main .wx-hero-now .wx-ico{width:34px;height:34px;margin:0 auto 8px} main .wx-big{font-size:64px;font-weight:800;letter-spacing:-.05em;line-height:.95} main .wx-big span{font-size:32px;font-weight:600;color:var(--muted)} main .wx-hero-sky{font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:#fff;margin-top:10px} main .wx-hero-cond{font-size:12px;color:var(--muted);margin-top:4px} main .wx-hero-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:18px 24px;margin:0} main .wx-hero-dl div{border-left:2px solid var(--line);padding-left:14px} main .wx-hero-dl dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin:0 0 5px} main .wx-hero-dl dd{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em} /* the note itself — set as an article, because that is what it is */ main .wx-ch{font-size:clamp(23px,3.2vw,31px);line-height:1.14;letter-spacing:-.03em; margin:8px 0 16px;color:#0A0A0B} main .wx-cp{font-size:16.5px;line-height:1.72;color:#23232A;margin:0 0 16px; max-width:62ch} main .wx-byline{margin-top:20px;padding-top:14px;border-top:1px solid #E4E4DE} main .wx-rrow a{color:#0A0A0B;text-decoration:none} main .wx-rrow a:hover{text-decoration:underline;text-underline-offset:3px} @media (max-width:720px){ main .wx-hero{grid-template-columns:1fr;gap:22px;padding:22px} main .wx-hero-now{text-align:left} main .wx-hero-now .wx-ico{margin:0 0 8px} } /* ---- the city index on /meteo ------------------------------------------ */ main .wx-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px} main .wx-note-card{display:block;text-decoration:none;color:#0A0A0B;background:#fff; border:1px solid #E4E4DE;border-radius:14px;padding:18px 20px} main .wx-note-card:hover{border-color:#0A0A0B} main .wx-nc-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px} main .wx-nc-city{font-size:15px;font-weight:800;letter-spacing:-.02em} main .wx-nc-temp{font-size:19px;font-weight:800;letter-spacing:-.03em;flex:none} main .wx-nc-dept{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:#67676F;margin-top:2px} main .wx-nc-head{font-size:14.5px;line-height:1.4;margin:11px 0 0;color:#23232A} main .wx-nc-pending{font-size:12.5px;color:#67676F;margin:11px 0 0;font-style:italic} /* ---- the source credit on an article ---------------------------------- */ main .nw-links.v2-src{margin:26px 0 0;padding-top:16px;border-top:1px solid #E4E4DE; font-size:13.5px;line-height:1.6;color:#3C3C44} main .v2-src-k{display:inline-block;font-size:10.5px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:#67676F;margin-right:8px} main .nw-links.v2-src a{color:#2334C8;text-decoration:none;font-weight:600} main .nw-links.v2-src a:hover{text-decoration:underline;text-underline-offset:3px} main .nw-links.v2-src a+a::before{content:" · ";color:#9A9AA4;font-weight:400} /* ---- the header weather chip ------------------------------------------- Sits in the utility bar beside the date, the way ABC7 and NY1 both place it. Deliberately NOT hidden on small screens: the rule above drops .v2-util-l span and .v2-util-r a below 900px, which is right for "Newsletter" and "Contact" and wrong for the temperature — on a phone it is the single most useful thing in that bar. The city name goes, the number stays. */ /* min-width so the bar does not jump when the reading lands. On a first-ever visit there is nothing cached and the chip still arrives over the network; holding its width means the date and the logo below do not shift when it does. */ .v2-wx{position:relative;display:flex;align-items:center;gap:8px; margin-left:4px;min-width:64px} .v2-wx-now{display:inline-flex;align-items:center;gap:6px;color:#fff; text-decoration:none;font-weight:700;letter-spacing:.02em} .v2-wx-now i{font-size:11px;opacity:.85} /* SPECIFIC SELECTORS, because the chip's parts sit inside a bar whose own rules were written before it existed and match it by accident. Twice now: .v2-util-l b::after appended " · PREVIEW v2" to a temperature, and .v2-util-l span{display:none} at 560px hid a one -- the element was in the DOM with 28° in it and simply not on screen below that width. Anything added to this bar needs a class and a selector that outranks the bar's generic ones. */ .v2-util-l .v2-wx-t{display:inline-block;font-size:11.5px;font-weight:800} .v2-util-l .v2-wx-c{display:inline-block;font-weight:600;opacity:.8} .v2-wx-now:hover{color:#FEC72F} .v2-wx-edit{background:none;border:0;padding:0;cursor:pointer; font:inherit;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.55)} .v2-wx-edit:hover{color:#FEC72F} .v2-wx-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60; min-width:212px;max-height:60vh;overflow-y:auto;padding:6px; background:#fff;color:#0A0A0B;border:1px solid #E4E4DE;border-radius:12px; box-shadow:0 18px 44px rgba(10,10,11,.22)} .v2-wx-menu button{display:flex;width:100%;align-items:center; justify-content:space-between;gap:12px;padding:8px 10px;background:none; border:0;border-radius:8px;cursor:pointer;font:inherit;font-size:12.5px; font-weight:600;color:#0A0A0B;text-align:left} .v2-wx-menu button:hover{background:#F4F4EF} .v2-wx-menu button.on{background:#2334C8;color:#fff} .v2-wx-menu button em{font-style:normal;font-weight:800;opacity:.75} /* THE BAR MUST NOT WRAP, and adding the chip made it. Below 900px the utility bar already carries two things: "NAGO NETWORK" with " · PREVIEW v2" appended (it lives here because .v2-bar is hidden at this width) and the date, which is hidden only below 560px. The chip made three, and at 430px the row wrapped onto two lines with the label colliding with the temperature. Order of sacrifice, least useful first: the date goes at 900px because the article rows carry their own dates, then the city name and Change at 700px, leaving the number itself — which is the part worth the space. */ @media (max-width:900px){ .v2-util .wrap{flex-wrap:nowrap;min-width:0} .v2-util-l{gap:10px;flex-wrap:nowrap;min-width:0} .v2-util-l b{white-space:nowrap} .v2-util-l .v2-today{display:none} .v2-wx{margin-left:auto;flex:0 0 auto} .v2-wx-menu{left:auto;right:0} } @media (max-width:700px){ .v2-util-l .v2-wx-c,.v2-util-l .v2-wx-edit{display:none} /* AND THE PREVIEW suffix yields, because at 430px it was consuming the whole bar and pushing the chip out of view entirely -- the element was in the DOM with 28 degrees in it and simply not on screen. "NAGO NETWORK · PREVIEW V2" in uppercase at .13em tracking is about 190px of a 430px bar, and the logo saying NAGO sits directly beneath it, so it is the least useful string here. The marker still shows between 700 and 900px, and above 900px the .v2-bar at the foot of the page carries it. */ .v2-util-l b::after{content:none} .v2-util-l b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } /* ---- the search page ---------------------------------------------------- */ .sr-form{display:flex;gap:10px;margin-top:18px;max-width:560px} .sr-form input{flex:1;min-width:0;padding:12px 14px;font:inherit;font-size:15px; color:#0A0A0B;background:#fff;border:1px solid #E4E4DE;border-radius:10px} .sr-form input:focus{outline:2px solid #2334C8;outline-offset:1px} .sr-form button{padding:12px 20px;font:inherit;font-size:14px;font-weight:700; color:#fff;background:#2334C8;border:0;border-radius:10px;cursor:pointer} .sr-form button:hover{background:#1b28a0} .sr-list{list-style:none;margin:0;padding:0} .sr-list li+li{border-top:1px solid #E4E4DE} .sr-list a{display:block;padding:16px 0;text-decoration:none;color:inherit} .sr-list a:hover .nw-h{color:#2334C8} .sr-list p{margin:6px 0 8px;font-size:13.5px;line-height:1.55;color:#55554E} .sr-list mark{background:#FEC72F;color:#0A0A0B;padding:0 2px;border-radius:2px} @media (max-width:640px){ .sr-form{flex-direction:column} .sr-form button{width:100%} } /* ---- A SHORT PRIMARY NAV, THE REST BEHIND MENU ------------------------------ la 1ère's masthead carries four destinations and a Menu button: "Accueil | Vidéos | Radio | En continu | Menu", the button being a disclosure (aria-label="Ouvrir le menu", aria-expanded). Everything else — Grands formats, Enquêtes, Vrai ou faux, the sections — lives behind it. NAGO showed nine items in one row, all competing, which is how you end up with a nav nobody reads. Kept: Home, News, Live, Radio. That is the same shape as the reference, and the closest mapping of it: a way home, the newsroom, the rolling feed, and the thing people actually do on this site all day, which is listen. Moved behind Menu: TV, Video, Music, Culture, Weather. Weather is no loss — the header chip now carries the temperature and links the city's page. Done by href rather than by adding classes, because the masthead is baked into 31 mirrored .html files as well as _shell.html; one stylesheet reaches all of them. Swapping an item in or out is one line here. The panel itself needs no work: shell.js builds .mnav and binds open/close on ANY width — only the button was hidden — and v2.js already rewrites its rows to the nine /v2 sections plus the account. */ @media (min-width:901px){ .v2-nav a[href="/v2/nago-music"], .v2-nav a[href="/v2/highlights"], .v2-nav a[href="/v2/charts"], .v2-nav a[href="/v2/istwa"], .v2-nav a[href="/v2/meteo"]{display:none} /* the button, labelled the way the reference labels it — an icon alone in a desktop masthead reads as decoration */ .v2-hd-r .menu{display:inline-flex;align-items:center;gap:8px; color:#0A0A0B;font:inherit;font-size:12.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding:8px 2px} .v2-hd-r .menu::after{content:"Menu"} .v2-hd-r .menu:hover{color:#2334C8} .v2-hd-r .menu i{font-size:14px} } /* ---- THE MENU, BUILT LIKE LA 1ERE'S -------------------------------------- From a screenshot of their open menu rather than guesswork: a panel in a solid brand colour, logo top left, a circular close top right, a primary list with an ICON ON THE LEFT and no chevron, then a quiet label over a second list whose rows carry a chevron and no icon — "Thématiques" for them, the geography for us — with the current row washed pale and a GOLD BAR down its left edge. It scrolls. THE LOOK APPLIES AT EVERY WIDTH. Only the GEOMETRY is desktop-only, and getting that split wrong is what broke the phone: fixMenu() in v2.js rewrites the rows at all widths, but the first version of this styled them only above 901px. So a phone got the new markup under the old rules — whose .mnav-list a has justify-content:space-between — and the icon sat pinned to the far left with its label flung to the far right, 26 rows of it at 1.45rem, with the group labels unstyled. A drawer is also the wrong geometry on a phone: min(430px,38vw) of a 430px screen is 163px. Full screen is right there, and is what la 1ère does at that width. So the panel stays inset:0 below 901px and becomes a right-hand drawer above it. */ /* ---- the look, all widths ---- */ .mnav{background:#2334C8;backdrop-filter:none} .mnav-top{ display:flex;align-items:center;justify-content:space-between; min-height:56px;margin:0;padding:14px 18px 12px; } /* The brand mark is dark-on-transparent. On the old translucent sheet it read; on blue only its gold triangle and red "Network" survived, which looks like a broken image. brightness(0) invert(1) flattens any of the marks to white, so this cannot break again if the asset is swapped. */ .mnav-logo{height:28px !important;width:auto !important; filter:brightness(0) invert(1)} .mnav-close{ position:static;transform:none;width:40px;height:40px; border:2px solid rgba(255,255,255,.7);border-radius:50%;color:#fff; } .mnav-close:hover{border-color:#fff;background:rgba(255,255,255,.14)} /* width:auto, not the inherited 100%. The base rule sets width:100% and I added side margins, so the pill measured container + 36px and put a HORIZONTAL scrollbar on the phone menu. On desktop the same overflow was there and invisible only because the pill is hidden. */ .mnav-search{margin:0 18px 6px;width:auto;background:rgba(255,255,255,.16)} .mnav-list{padding:4px 0 0} /* Rows. justify-content is FLEX-START, not space-between: the markup is icon + label (+ chevron), and space-between pushed the two apart. The chevron is pushed right by its own auto margin instead. */ .mnav-list a{ display:flex;align-items:center;justify-content:flex-start;gap:14px; font-size:1.02rem;font-weight:700;letter-spacing:0; padding:13px 18px;border-left:3px solid transparent; text-shadow:none;color:#fff; } .mnav-list a:hover,.mnav-list a:focus-visible{ background:rgba(255,255,255,.12);color:#fff; } .mnav-list a.active{ background:rgba(255,255,255,.15);border-left-color:#FEC72F;color:#fff; } .mnav-ico{font-size:.95rem;opacity:.85;width:20px;text-align:center;flex:0 0 20px} .mnav-chev{margin-left:auto;font-size:.7rem;opacity:.55} .mnav-list a.is-live span{color:#fff} .mnav-list a.is-live .mnav-ico{color:#FE9AA2} .mnav-group{ margin:18px 0 4px;padding:0 18px;font-size:.68rem;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.58); } .mnav-social{margin:22px 18px 0;padding-top:18px;gap:10px; border-top:1px solid rgba(255,255,255,.18)} .mnav-social a{width:38px;height:38px;font-size:.9rem; background:rgba(255,255,255,.16);color:#fff} .mnav-social a:hover{background:#fff;color:#2334C8} /* ---- the geometry, desktop only ---- */ @media (min-width:901px){ .mnav{ inset:0 0 0 auto; /* top/right/bottom pinned, left free */ width:min(430px,38vw); padding:0 0 24px; overflow-y:auto; border-left:0; box-shadow:-30px 0 70px rgba(0,0,0,.34); } .mnav-top{position:sticky;top:0;z-index:2;background:#2334C8; min-height:64px;padding:14px 20px 12px} .mnav-logo{height:30px !important} .mnav-list a,.mnav-group{padding-left:20px;padding-right:20px} .mnav-social{margin-left:20px;margin-right:20px} /* no search field in the drawer — it lives in the top bar, as theirs does */ .mnav-search{display:none} /* A drawer does not lock the page: shell.js sets body.mnav-open{overflow: hidden}, right for a full-screen sheet, wrong when the page is plainly visible beside it. */ body.mnav-open{overflow:visible} } /* ---- THE LIVE STRIP ON /v2/news ------------------------------------------- cnews.fr carries its channel in a band above the stories with an EN DIRECT badge and a chevron to collapse it. The important part is the SIZE: their player box measures about 260x146 inside a band roughly 150px tall. It is not a hero. Mine first shipped with no width limit at all and filled the wrap — 1425x732 in a 913px viewport, which took the page. So the stage is given an explicit, contained size here and the band is laid out as label-beside- player, the way theirs is. On a phone a 320px box beside a label does not work, so it becomes a full-width 16:9 block with the stories starting directly beneath — again what theirs does. */ /* STICKY, AND IT SHRINKS ON SCROLL — the behaviour cnews.fr has and the reason their band can be small: you keep the channel while you read, so it never needs to be big in the first place. It docks BELOW the masthead, which is itself sticky at top:0 and 109px tall on a desktop, 97px on a phone. The offset is a custom property set from the measured height in v2.js rather than hardcoded, because the masthead's height changes with the breakpoint and a wrong number here leaves either a gap or an overlap. z-index sits under the masthead's 50 so it tucks beneath rather than over it. */ .nw-livebar{background:#0A0A0B;border-bottom:1px solid rgba(255,255,255,.1); position:sticky;top:var(--nw-hdr,109px);z-index:40; transition:box-shadow .18s ease} .nw-livebar.is-mini{box-shadow:0 10px 26px rgba(0,0,0,.45)} .nw-livebar-in,.nw-livebar .nw-stage,.nw-livebar-txt b{ transition:padding .18s ease,gap .18s ease,width .18s ease, flex-basis .18s ease,font-size .18s ease} /* scrolled: a slim bar with a small picture */ .nw-livebar.is-mini .nw-livebar-in{padding:6px 0 2px;gap:14px} .nw-livebar.is-mini .nw-stage{flex:0 0 168px;width:168px} .nw-livebar.is-mini .nw-livebar-txt b{font-size:14px} .nw-livebar.is-mini .nw-livebar-txt .nw-meta, .nw-livebar.is-mini .nw-livebar-txt .nw-btn{display:none} .nw-livebar[hidden]{display:none} /* MEASURED AGAINST THEIRS, not eyeballed. cnews.fr's band is about 165px of a 913px viewport — roughly 18% — with a player near 280x150. The first cut of this was 235px and 340x191, about 40% too big, and before the stage had any width limit at all it filled the wrap at 1178x663 and took the page. */ .nw-livebar-in{display:flex;align-items:center;gap:22px;padding:11px 0 3px} .nw-livebar-txt{display:flex;flex-direction:column;align-items:flex-start;gap:5px; min-width:0} .nw-livebar-txt b{font-size:17px;letter-spacing:-.02em;color:#fff} .nw-livebar-txt .nw-meta{color:#8E8E96} .nw-livebar-txt .nw-btn{margin-top:2px;padding:7px 14px;font-size:12px} /* the contained stage: 16:9, fixed width, never the page */ .nw-livebar .nw-stage{flex:0 0 280px;width:280px;aspect-ratio:16/9; border-radius:12px;overflow:hidden;background:#000} .nw-livebar .nw-stage .player-box{width:100%;height:100%;padding:0;border:0; border-radius:12px;background:#000} .nw-livebar .nw-stage video{width:100%;height:100%;object-fit:cover;display:block} /* the fold control, centred under the band as theirs is */ .nw-livebar-fold{display:block;width:100%;padding:1px 0 4px;background:none; border:0;cursor:pointer;color:#8E8E96;font-size:13px;line-height:1} .nw-livebar-fold:hover{color:#fff} .nw-livebar.is-folded .nw-livebar-in{display:none} @media (max-width:900px){ .nw-livebar-in{flex-direction:column;align-items:stretch;gap:9px; padding:9px 0 2px} .nw-livebar .nw-stage{flex:0 0 auto;width:100%} .nw-livebar-txt{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap} .nw-livebar-txt b{font-size:16px} .nw-livebar-txt .nw-meta{display:none} .nw-livebar-txt .nw-btn{margin:0 0 0 auto} /* On a phone the band is a column with a full-width picture at rest. Scrolled, it becomes a row with a thumbnail — the same shrink, but it has to change direction to do it, because a 124px box above a label would waste the whole width. */ .nw-livebar.is-mini .nw-livebar-in{flex-direction:row;align-items:center; gap:12px;padding:5px 0 2px} .nw-livebar.is-mini .nw-stage{flex:0 0 124px;width:124px} .nw-livebar.is-mini .nw-livebar-txt{flex:1 1 auto} } /* ---- the player's own overlays, sized FROM THE PICTURE -------------------- player.js draws its furniture at full-player size, which is right on a channel page and wrong in this strip: .tvp-unmute ("Click for sound") is padding 11x16 at .82rem pinned 14px in, the controls bar carries a seek, five buttons, a 78px volume slider, a name, a LIVE tag and a quality menu under 30px of top padding, and the busy spinner is 52px — inside a 124x70 thumbnail the pill alone was most of the picture, and none of it changed when the band shrank. THE FIRST FIX HARDCODED SIZES PER STATE — rest and mini, desktop and phone, four sets of magic numbers keyed to a stage width written somewhere else. Change 168px to 200px and every one of them is wrong, silently. So the furniture is sized from the CONTAINER: the stage declares itself a container and the overlays are expressed in cqw — percentages of the picture's own width. One rule then covers 460px, 280px, 168px, 124px and anything chosen later, and the label and the controls appear only when there is genuinely room for them, which is a question about the picture and not about the viewport. clamp() keeps the type legible: 4cqw of a 124px box is 5px, which is not a font size. */ .nw-livebar .nw-stage{container-type:inline-size} .nw-livebar .tvp-unmute{ top:3cqw;right:3cqw;gap:1.6cqw; padding:2.2cqw 3cqw; font-size:clamp(8px,4cqw,13px); letter-spacing:0; } .nw-livebar .tvp-unmute i{font-size:clamp(9px,4.4cqw,15px)} /* the words only where they fit; below that the speaker icon says it alone */ .nw-livebar .tvp-unmute span{display:none} .nw-livebar .tvp.busy:after{ width:clamp(18px,17cqw,52px);height:clamp(18px,17cqw,52px); border-width:clamp(2px,1.4cqw,3px); } /* controls cannot be usable below about a quarter of a screen, so they are off by default and come back when the picture is big enough to hold them */ .nw-livebar .tvp-bar{display:none} @container (min-width:210px){ .nw-livebar .tvp-unmute span{display:inline} } @container (min-width:250px){ .nw-livebar .tvp-bar{display:block;padding:7cqw 3.2cqw 2.8cqw} .nw-livebar .tvp-row{gap:2.8cqw} .nw-livebar .tvp-btn{padding:1.8cqw;font-size:clamp(11px,5cqw,16px)} .nw-livebar .tvp-vol{width:19cqw} .nw-livebar .tvp-name{font-size:clamp(9px,4cqw,13px);max-width:32%} .nw-livebar .tvp-live{font-size:clamp(8px,3.4cqw,11px);padding:1.4cqw 2.8cqw; gap:1.6cqw} .nw-livebar .tvp-seek{margin-bottom:1.6cqw} } /* =========================================================================== /v2 homepage — the broadcaster front page Modelled on rtl.fr's structure, not its palette: RTL is red on white and carried by photographs, this skin is dark and has none. What is borrowed is the ORDER and the weight — what is on air right now, given more room than anything else and the brightest surface on the page; then the channels and the stations; then the newsroom; then the chart. The on-air card is deliberately WHITE. On RTL it is a white card on a white page and still reads as the centre of gravity because everything around it is quieter. Here the page is near-black, so the same hierarchy is reached the other way round — it is the one light surface, and the eye lands on it before anything else. ======================================================================== */ .v2h{background:var(--bg);color:#fff} .v2h .wrap{max-width:1180px;margin:0 auto;padding:0 16px} /* ---- trending strip ---------------------------------------------------- */ .v2h-topics{background:#0F0F14;border-bottom:1px solid var(--line)} .v2h-topics .wrap{display:flex;align-items:center;gap:6px; padding-block:9px;overflow-x:auto;scrollbar-width:none} .v2h-topics .wrap::-webkit-scrollbar{display:none} .v2h-topics span{flex:0 0 auto;font:800 10px/1 Archivo,sans-serif; letter-spacing:.14em;text-transform:uppercase;color:var(--ngold);margin-right:4px} .v2h-topics a{flex:0 0 auto;font:600 12.5px/1 Archivo,sans-serif;color:#C8C8D0; text-decoration:none;padding:5px 10px;border-radius:999px; border:1px solid var(--line);white-space:nowrap} .v2h-topics a:hover{color:#fff;border-color:var(--accent);background:rgba(35,52,200,.18)} /* ---- on air ------------------------------------------------------------ */ .v2h-onair{padding:22px 0 6px} .v2h-onair-grid{display:grid;gap:12px; grid-template-columns:minmax(0,420px) minmax(0,1fr)} .v2h-now{background:#fff;color:#0A0A0B;border-radius:var(--radius); padding:18px 18px 16px;display:flex;flex-direction:column;min-width:0} .v2h-live{display:inline-flex;align-items:center;gap:6px;align-self:flex-start; background:var(--nred);color:#fff;border-radius:4px;padding:4px 8px; font:800 10px/1 Archivo,sans-serif;letter-spacing:.12em} .v2h-live i{width:6px;height:6px;border-radius:50%;background:#fff; animation:v2hPulse 1.8s ease-in-out infinite} @keyframes v2hPulse{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.v2h-live i{animation:none}} .v2h-now h2{margin:12px 0 4px;font:800 30px/1.08 Archivo,sans-serif; letter-spacing:-.02em;color:#0A0A0B} .v2h-time{margin:0;font:700 14px/1.2 Archivo,sans-serif;color:#3C3C44} .v2h-bar{height:4px;border-radius:999px;background:#E4E4DE;margin:12px 0 10px; overflow:hidden} .v2h-bar i{display:block;height:100%;width:0;background:var(--nred); border-radius:999px;transition:width .6s ease} .v2h-ch{margin:0;font:800 12px/1 Archivo,sans-serif;letter-spacing:.08em; text-transform:uppercase;color:var(--accent)} .v2h-blurb{margin:8px 0 0;font:400 13.5px/1.5 Newsreader,Georgia,serif;color:#3C3C44; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .v2h-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px} .v2h-btn{display:inline-flex;align-items:center;gap:7px;border-radius:999px; padding:9px 15px;font:800 12.5px/1 Archivo,sans-serif;text-decoration:none; border:1.5px solid #0A0A0B;color:#0A0A0B;background:transparent} .v2h-btn i{font-size:10px} .v2h-btn:hover{background:#0A0A0B;color:#fff} .v2h-btn.is-primary{background:var(--nred);border-color:var(--nred);color:#fff} .v2h-btn.is-primary:hover{background:#d4121f;border-color:#d4121f} .v2h-still{display:block;border-radius:var(--radius);overflow:hidden; background:#111116 center/cover no-repeat;min-height:230px;position:relative} .v2h-still::after{content:"\f04b";font:900 14px/38px "Font Awesome 6 Free"; position:absolute;left:14px;bottom:14px;width:38px;height:38px;text-align:center; border-radius:50%;background:rgba(10,10,11,.72);color:#fff;backdrop-filter:blur(4px)} .v2h-next{display:flex;flex-direction:column;justify-content:flex-end; border-radius:var(--radius);padding:14px;text-decoration:none;color:#fff; background:#15151C center/cover no-repeat;position:relative;min-height:230px; overflow:hidden;isolation:isolate} .v2h-next::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(8,8,11,.15) 0%,rgba(8,8,11,.88) 72%)} .v2h-next b{display:block;font:800 18px/1.14 Archivo,sans-serif;letter-spacing:-.01em} .v2h-next time{display:block;margin-top:6px;font:700 12.5px/1 Archivo,sans-serif; color:#C8C8D0} .v2h-next .v2h-in{position:absolute;top:12px;left:12px;background:rgba(8,8,11,.7); border:1px solid var(--line);border-radius:4px;padding:4px 8px; font:700 10px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase; color:#E4E4DE} .v2h-next:hover{outline:2px solid var(--accent);outline-offset:-2px} /* ---- section furniture -------------------------------------------------- */ .v2h-sec{padding:26px 0 6px} .v2h-sec.is-dark{background:#0F0F14;margin-top:20px;padding-bottom:26px} .v2h-head{display:flex;align-items:baseline;justify-content:space-between; gap:12px;margin-bottom:14px;border-bottom:2px solid var(--line);padding-bottom:9px} .v2h-head h2{margin:0;font:800 21px/1 Archivo,sans-serif;letter-spacing:-.02em;color:#fff} .v2h-head a{font:700 12px/1 Archivo,sans-serif;color:var(--ngold);text-decoration:none; white-space:nowrap} .v2h-head a:hover{text-decoration:underline} /* ---- channels ----------------------------------------------------------- */ /* Rows one and two slide. They were four- and seven-up grids, which meant every card had to survive being squeezed into a quarter or a seventh of whatever width it was given — and it did not: at 1024px every station blurb was clipped, at 560px the names were. A slider gives each card the width it actually needs and lets the row run off the edge, which is what a row of channels is supposed to do. No JavaScript: overflow plus scroll-snap is the whole mechanism, so it works with a finger, a trackpad, a shift-wheel and the keyboard, and there is no library to load on a page whose loading time was just worked on. */ .v2h-chans{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-left:0; scrollbar-width:none;-ms-overflow-style:none; /* room for the focus ring and the hover outline, which a plain overflow box would otherwise clip */ padding:2px 2px 10px} .v2h-chans::-webkit-scrollbar{display:none} .v2h-chan{flex:0 0 clamp(210px,24%,290px);scroll-snap-align:start} .v2h-chan{display:block;border-radius:var(--radius);overflow:hidden; background:#15151C;text-decoration:none;color:#fff;border:1px solid var(--line)} .v2h-chan-art{display:block;aspect-ratio:16/9;background:#111116 center/cover no-repeat;position:relative} .v2h-chan-art img{width:auto;height:26px;position:absolute;left:12px;top:12px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} .v2h-chan-live{position:absolute;right:10px;top:10px;background:var(--nred);color:#fff; border-radius:3px;padding:3px 6px;font:800 9px/1 Archivo,sans-serif;letter-spacing:.1em} .v2h-chan-b{display:block;padding:10px 12px 12px} .v2h-chan-b b{display:block;font:800 14px/1.2 Archivo,sans-serif} .v2h-chan-b span{display:block;margin-top:3px;font:600 12px/1.3 Archivo,sans-serif; color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v2h-chan:hover{border-color:var(--accent)} /* ---- stations ----------------------------------------------------------- */ .v2h-stations{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; padding:2px 2px 10px} .v2h-stations::-webkit-scrollbar{display:none} .v2h-stn{flex:0 0 clamp(228px,23%,268px);scroll-snap-align:start} .v2h-stn{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px; border-radius:12px;background:#15151C;border:1px solid var(--line); text-decoration:none;color:#fff;min-width:0} .v2h-stn img{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:0 0 auto} .v2h-stn-t{display:block;min-width:0;flex:1} .v2h-stn-t b{display:block;font:800 13px/1.2 Archivo,sans-serif; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v2h-stn-t span{display:block;font:600 11.5px/1.3 Archivo,sans-serif;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v2h-stn i{flex:0 0 auto;width:28px;height:28px;border-radius:50%; display:grid;place-items:center;font-size:10px;background:var(--accent);color:#fff} .v2h-chan-art>img{display:block} .v2h-stn:hover{border-color:var(--accent);background:#191922} /* ---- à la une ----------------------------------------------------------- */ /* RTL's À la une is a wide article column beside a 300px sidebar — 930 + 300 inside their 1280 container. Ours keeps the same proportion in a 1148 container. */ .v2h-une{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) 300px;align-items:start} .v2h-une-main{min-width:0} .v2h-une-list{display:flex;flex-direction:column;gap:2px;margin-top:10px} /* ---- flash -------------------------------------------------------------- */ .v2h-flash{padding:26px 0 8px;margin-top:20px;background:#0F0F14} .v2h-flash-cols{display:grid;gap:0 26px;grid-template-columns:repeat(3,minmax(0,1fr))} .v2h-flash-cols ul{list-style:none;margin:0;padding:0} .v2h-flash-cols li{border-bottom:1px solid var(--line)} .v2h-flash-cols a{display:flex;gap:10px;padding:9px 0;text-decoration:none; color:#E4E4DE;align-items:baseline} .v2h-flash-cols time{flex:0 0 auto;font:800 11px/1.45 Archivo,sans-serif; color:var(--ngold);min-width:38px} .v2h-flash-cols span{font:600 13px/1.45 Archivo,sans-serif} .v2h-flash-cols a:hover span{color:#fff;text-decoration:underline} /* ---- chart -------------------------------------------------------------- */ .v2h-chart{list-style:none;margin:0;padding:0;display:grid;gap:6px; grid-template-columns:repeat(2,minmax(0,1fr))} /* A GRID, not a flex row. The sleeve column has to hold its width even when there is no sleeve — where a cover is missing the house rule is to show nothing rather than a stand-in, and in a flex row that made the text slide left and knocked that one line out of the column. Reserving the space is not a substitute cover; it is just keeping the list straight. */ .v2h-chart a{display:grid;grid-template-columns:22px 48px minmax(0,1fr); align-items:center;gap:11px;padding:7px 10px; border-radius:11px;text-decoration:none;color:#fff;border:1px solid transparent} .v2h-chart img{grid-column:2} .v2h-chart .v2h-tk{grid-column:3} .v2h-chart a:hover{background:#15151C;border-color:var(--line)} .v2h-rank{flex:0 0 22px;text-align:center;font:800 15px/1 Archivo,sans-serif; color:var(--muted)} .v2h-chart img{width:48px;height:48px;border-radius:8px;flex:0 0 auto; object-fit:cover;background:#15151C} .v2h-tk{min-width:0} .v2h-tk b{display:block;font:700 13.5px/1.25 Archivo,sans-serif; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v2h-tk em{display:block;margin-top:2px;font:600 12px/1.3 Archivo,sans-serif; font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} /* ---- section rows ------------------------------------------------------- */ .v2h-grid{display:grid;gap:2px 20px;grid-template-columns:repeat(2,minmax(0,1fr))} /* ---- narrower ----------------------------------------------------------- */ @media (max-width:1000px){ .v2h-onair-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .v2h-now{grid-column:1/-1} .v2h-flash-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px} } @media (max-width:720px){ .v2h-une{grid-template-columns:minmax(0,1fr)} .v2h-chart{grid-template-columns:minmax(0,1fr)} .v2h-grid{grid-template-columns:minmax(0,1fr)} .v2h-flash-cols{grid-template-columns:minmax(0,1fr)} .v2h-now h2{font-size:25px} /* The still is the channel's poster and carries no information the next-up cards do not — at this width it is the first thing to go. */ .v2h-still{display:none} .v2h-onair-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .v2h-next{min-height:150px} } @media (max-width:480px){ .v2h-onair{padding-top:14px} .v2h-onair-grid{grid-template-columns:minmax(0,1fr)} .v2h-next{min-height:120px} /* Two up leaves about 80px for the text once the mark and the play button have taken theirs, which turned "Rap Kreyol" into "Rap ..." and every blurb into an ellipsis. One up costs a little scrolling and gives back the station names, which are the only thing on the row that matters. */ .v2h-chan-b{padding:8px 9px 10px} .v2h-chan-b b{font-size:12.5px} .v2h-chan-b span{font-size:11px} .v2h-now h2{font-size:23px} .v2h-head h2{font-size:18px} .v2h-acts .v2h-btn{flex:1 1 auto;justify-content:center} } /* =========================================================================== /v2 — the light page The homepage and the newsroom sit on white, the way rtl.fr and every other broadcaster front page does. The article page in this same stylesheet was already light, and .nw-panel / .nw-cols were already white cards with their own child overrides — so this does not invent a second light theme, it promotes the one that was already here to the whole page and reuses its exact values: ink #0A0A0B, second ink #3C3C44, muted #67676F, rules #E4E4DE, blue #2334C8, red #FE202F. ACCENT: blue leads. Red is kept for ON AIR and LIVE and nothing else — if the section rules, the buttons and the progress bar were all red too, a red badge would stop meaning "this is happening now", which on a broadcaster's homepage is the one thing it has to mean. What deliberately stays dark: the trending strip (RTL's is black too, and it separates the chrome from the page), the up-next cards and the still (they are photographs with text over them), the live strip on /v2/news (it holds a video) and the footer. ======================================================================== */ /* line 33 sets the page ground with !important to kill a radial wash; matching it is the only way for a light page to win. */ body.v2-light{background:#fff !important} body.v2-light main{background:#fff;color:#0A0A0B} /* ---- shared article furniture ------------------------------------------- */ body.v2-light main .nw-head{border-bottom-color:#0A0A0B} body.v2-light main .nw-head h2, body.v2-light main .nw-sec .nw-head h2{color:#0A0A0B} body.v2-light main .nw-sec .nw-head{border-bottom-color:#0A0A0B} body.v2-light main .nw-meta{color:#67676F} body.v2-light main .nw-lead p{color:#3C3C44} body.v2-light main .nw-cat.ink{color:#0A0A0B} body.v2-light main .nw-cat.blue{color:#2334C8} body.v2-light main .nw-row+.nw-row{border-top-color:#E4E4DE} body.v2-light main .nw-rule{background:#E4E4DE} body.v2-light main .nw-mr{border-bottom-color:#E4E4DE} body.v2-light main .nw-mr b{color:#67676F} body.v2-light main .nw-col h3{border-top-color:#0A0A0B;color:#0A0A0B} body.v2-light main .nw-rail h3{color:#0A0A0B} body.v2-light main .nw-chips{border-bottom-color:#E4E4DE} body.v2-light main .nw-chip{border-color:#D8D8D2;color:#5C5C66} body.v2-light main .nw-chip.on{background:#0A0A0B;border-color:#0A0A0B;color:#fff} /* these two were already white cards; on a white page they need their edge to do the separating rather than their fill */ body.v2-light main .nw-panel, body.v2-light main .nw-cols{background:#fff;border-color:#E4E4DE} /* ---- homepage ------------------------------------------------------------ */ body.v2-light .v2h{background:#fff;color:#0A0A0B} body.v2-light .v2h-head{border-bottom-color:#0A0A0B} body.v2-light .v2h-head h2{color:#0A0A0B} body.v2-light .v2h-head a{color:#2334C8} /* the on-air card was white on black and carried itself; on white it needs an edge, and a little lift so it still reads as the top of the page */ body.v2-light .v2h-now{border:1px solid #E4E4DE; box-shadow:0 1px 2px rgba(10,10,11,.05),0 8px 24px rgba(10,10,11,.06)} body.v2-light .v2h-bar{background:#E4E4DE} body.v2-light .v2h-bar i{background:#2334C8} body.v2-light .v2h-btn.is-primary{background:#2334C8;border-color:#2334C8} body.v2-light .v2h-btn.is-primary:hover{background:#1b28a0;border-color:#1b28a0} /* the grey bands that separated sections on black have to invert */ body.v2-light .v2h-sec.is-dark{background:#F4F4EF} body.v2-light .v2h-flash{background:#F4F4EF} body.v2-light .v2h-flash-cols li{border-bottom-color:#E4E4DE} body.v2-light .v2h-flash-cols a{color:#22222A} body.v2-light .v2h-flash-cols time{color:#2334C8} body.v2-light .v2h-flash-cols a:hover span{color:#000} body.v2-light .v2h-chan{background:#fff;border-color:#E4E4DE} body.v2-light .v2h-chan-b b{color:#0A0A0B} body.v2-light .v2h-chan-b span{color:#67676F} body.v2-light .v2h-stn{background:#fff;border-color:#E4E4DE} body.v2-light .v2h-stn:hover{background:#F4F4EF} body.v2-light .v2h-stn-t b{color:#0A0A0B} body.v2-light .v2h-stn-t span{color:#67676F} body.v2-light .v2h-chart a{color:#0A0A0B} body.v2-light .v2h-chart a:hover{background:#F4F4EF;border-color:#E4E4DE} body.v2-light .v2h-rank{color:#9A9AA4} body.v2-light .v2h-tk em{color:#67676F} body.v2-light .v2h-chart img{background:#F4F4EF} /* ---- newsroom ------------------------------------------------------------ */ /* the live strip holds a running video; it stays dark on purpose, and only needs an edge now that the page behind it is white */ body.v2-light .nw-livebar{border-bottom:1px solid #E4E4DE} /* ---- the rail arrows --------------------------------------------------- rtl.fr drives its rows with prev/next arrows (Slick: a 100000px track translated under a clipped box). The scrolling here stays NATIVE — overflow plus scroll-snap — because that is what already works with a finger, a trackpad and the keyboard, and it costs no library on a page whose loading time was just worked on. The arrows drive that same scroller, so a mouse user gets RTL's affordance and a phone still just swipes. They are hidden until the JS decides there is somewhere to go, and hidden again at each end, so an arrow is never offered when it would do nothing. */ .v2h-rail{position:relative} .v2h-arrow{position:absolute;top:calc(50% - 22px);z-index:4;width:38px;height:38px; border-radius:50%;border:1px solid #E4E4DE;background:#fff;color:#0A0A0B; cursor:pointer;display:grid;place-items:center;font-size:13px; box-shadow:0 2px 10px rgba(10,10,11,.14); /* RTL shows these only while the pointer is over the row. Hidden with opacity rather than display so they can still be tabbed to and so the fade has something to animate; pointer-events keeps them out of the way of a click meant for the card underneath. */ opacity:0;pointer-events:none;transition:opacity .16s ease} .v2h-rail:hover .v2h-arrow, .v2h-rail:focus-within .v2h-arrow{opacity:1;pointer-events:auto} .v2h-arrow:focus-visible{opacity:1;pointer-events:auto} .v2h-arrow.is-prev{left:-10px} .v2h-arrow.is-next{right:-10px} .v2h-arrow:hover{background:#2334C8;border-color:#2334C8;color:#fff} .v2h-arrow:focus-visible{outline:2px solid #2334C8;outline-offset:2px} /* A phone swipes; an arrow there is just something to mis-tap. Gated on WIDTH rather than on (hover:none): a desktop with a touchscreen reports no hover and would have lost its arrows while still having a mouse — and a headless browser reports the same, so the rule could not be checked by looking. */ @media (max-width:720px){.v2h-arrow{display:none}} /* ---- row 1's sliding strip, and row 2's single rail --------------------- */ .v2h-ups{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; padding:2px 2px 10px;height:100%} .v2h-ups::-webkit-scrollbar{display:none} .v2h-ups .v2h-next{flex:0 0 clamp(190px,32%,240px);scroll-snap-align:start;min-height:0} .v2h-media{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; padding:2px 2px 10px;align-items:stretch} .v2h-media::-webkit-scrollbar{display:none} .v2h-media .v2h-chan{flex:0 0 clamp(210px,23%,280px);scroll-snap-align:start} /* the station card is a row, not a tile, so it rides the rail at its own height rather than being stretched to the channel card's */ .v2h-media .v2h-stn{flex:0 0 clamp(228px,23%,268px);scroll-snap-align:start; align-self:center} @media (max-width:820px){ .v2h-onair-grid{grid-template-columns:minmax(0,1fr)} .v2h-ups{height:auto} .v2h-ups .v2h-next{min-height:140px} } /* =========================================================================== Rows 1 and 2, the way rtl.fr draws them on a phone Both rows are sliders of TALL PORTRAIT CARDS, and that shape is the point: the card is roughly 3:4, the artwork fills it edge to edge, and the words sit over the bottom of the picture rather than in a panel beside it. The next card is deliberately left half-showing at the right edge — that peek is what tells you the row slides, on a phone where there are no arrows. ======================================================================== */ .v2h-onair{padding:18px 0 4px} .v2h-shows,.v2h-media{display:flex;gap:12px;overflow-x:auto; overscroll-behavior-x:contain;scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px 12px} .v2h-shows::-webkit-scrollbar,.v2h-media::-webkit-scrollbar{display:none} /* ---- row 1: the programme card ----------------------------------------- */ .v2h-show{position:relative;flex:0 0 clamp(230px,70vw,300px);scroll-snap-align:start; aspect-ratio:4/5;border-radius:16px;overflow:hidden;isolation:isolate; background:#15151C center/cover no-repeat;color:#fff; display:flex;flex-direction:column;justify-content:flex-end; box-shadow:0 2px 6px rgba(10,10,11,.10),0 14px 34px rgba(10,10,11,.12)} /* the words have to stay readable over whatever the picture is doing */ .v2h-show::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(8,8,11,.12) 0%,rgba(8,8,11,.30) 42%,rgba(8,8,11,.90) 100%)} .v2h-show-badge{position:absolute;top:14px;left:14px;display:inline-flex; align-items:center;gap:6px;background:rgba(8,8,11,.78);border-radius:6px; padding:6px 10px;font:800 10.5px/1 Archivo,sans-serif;letter-spacing:.1em; text-transform:uppercase;backdrop-filter:blur(4px)} .v2h-show-badge.is-on i{width:7px;height:7px;border-radius:50%;background:var(--nred); animation:v2hPulse 1.8s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.v2h-show-badge.is-on i{animation:none}} .v2h-show-b{padding:16px 16px 20px;display:flex;flex-direction:column;gap:5px} .v2h-show-b b{font:800 26px/1.08 Archivo,sans-serif;letter-spacing:-.02em} .v2h-show-b time{font:700 14px/1.2 Archivo,sans-serif;color:#E4E4DE} .v2h-show-ch{font:800 10.5px/1 Archivo,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:var(--ngold);margin-top:1px} .v2h-show-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .v2h-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px; padding:9px 15px;font:800 12.5px/1 Archivo,sans-serif;text-decoration:none; border:1.5px solid #fff;color:#fff} .v2h-pill i{font-size:10px} .v2h-pill.is-solid{background:#fff;color:#0A0A0B} .v2h-pill.is-solid:hover{background:#E4E4DE} .v2h-pill:not(.is-solid):hover{background:rgba(255,255,255,.16)} .v2h-show-about{margin-top:10px;font:700 12px/1 Archivo,sans-serif;color:#fff; text-decoration:underline;text-underline-offset:3px} /* flush along the bottom edge of the card, the way RTL runs it */ .v2h-show-bar{position:absolute;left:0;right:0;bottom:0;height:5px; background:rgba(255,255,255,.22)} .v2h-show-bar i{display:block;height:100%;background:var(--nred)} /* ---- row 2: the channel and station tile -------------------------------- */ .v2h-tile{position:relative;flex:0 0 clamp(198px,58vw,244px);scroll-snap-align:start; aspect-ratio:3/4;border-radius:16px;overflow:hidden;isolation:isolate; background:#2334C8 center/cover no-repeat;color:#fff;text-decoration:none; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;padding:18px 14px;text-align:center} .v2h-tile::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(8,8,11,.30) 0%,rgba(8,8,11,.55) 100%)} .v2h-tile.is-radio::before{background:linear-gradient(180deg,rgba(8,8,11,.10) 0%,rgba(8,8,11,.42) 100%)} /* THE MARKS ARE WIDE LOCKUPS, NOT SQUARE THUMBNAILS: the station marks are 640x271 (2.36:1) and the channel marks 640x229 (2.79:1). object-fit:cover filled the circle by cropping both ends off, so every logo lost the word either side of its centre — "nago music" showed as a slice of the g. contain keeps the whole lockup, and the disc is sized so a 2.79:1 mark still lands at a readable width inside a round frame. */ .v2h-tile-art{position:relative;width:116px;height:116px;border-radius:50%; background:rgba(8,8,11,.58);display:grid;place-items:center;margin-bottom:12px; border:2px solid rgba(255,255,255,.42);box-sizing:border-box} .v2h-tile-art img{width:100%;height:100%;object-fit:contain; padding:10px 13px;box-sizing:border-box} /* RTL puts the play mark over a photograph, where it costs nothing. Over a wordmark it sits on the word, so it moves to the rim instead — still the thing that says "this plays", without covering what it labels. */ .v2h-tile-art i{position:absolute;right:-1px;bottom:-1px;width:31px;height:31px; border-radius:50%;background:#fff;color:#0A0A0B;display:grid;place-items:center; font-size:11px;padding-left:2px; box-shadow:0 2px 8px rgba(8,8,11,.4)} .v2h-tile b{font:800 16.5px/1.15 Archivo,sans-serif;letter-spacing:-.01em} .v2h-tile em{font:600 12px/1.35 Archivo,sans-serif;font-style:normal; color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .v2h-tile-live{position:absolute;top:12px;left:12px;display:inline-flex; align-items:center;gap:5px;background:var(--nred);border-radius:4px; padding:4px 7px;font:800 9px/1 Archivo,sans-serif;letter-spacing:.1em} .v2h-tile-live i{width:5px;height:5px;border-radius:50%;background:#fff} .v2h-tile:hover{outline:2px solid var(--accent);outline-offset:-2px} /* On a wide screen the cards stop growing and simply show more of the row — the same thing RTL does when its slider has room. */ @media (min-width:900px){ /* Measured off rtl.fr at desktop, scaling from the 728x90 leaderboard in the same screenshot: their row-1 card is 301 x 395 CSS px. Ours was 360 x 480 — 60px too wide and 85px too tall, which is what made the first row tower over everything under it. */ /* A FIXED width, not a vw clamp. RTL's slides are a fixed size — the row shows more or fewer of them as the window changes, it does not stretch them — and a vw term made ours 274px at 1440 and 302px at 1600 for no reason a reader could see. 302 is their measured width. */ .v2h-show{flex-basis:266px} .v2h-tile{flex-basis:clamp(196px,16vw,232px)} } /* =========================================================================== Every row is a rail On rtl.fr the sliding does not stop after the top of the page — the section rows and the flash strip run on rails too, each with its own prev/next arrows. These rows were static grids, which is why the page stopped feeling like that one halfway down. One class, .v2h-scroll, marks every scroller; v2.js wires whatever carries it, so a new row needs no JavaScript. ======================================================================== */ .v2h-scroll{display:flex;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none} .v2h-scroll::-webkit-scrollbar{display:none} .v2h-scroll>*{scroll-snap-align:start} /* ---- flash as a rail of small cards ------------------------------------ */ .v2h-flashrow{gap:12px;padding:2px 2px 12px} .v2h-fcard{flex:0 0 clamp(212px,64vw,262px);min-width:0;max-width:100%;display:flex;flex-direction:column; gap:6px;padding:13px 14px;border-radius:12px;background:#fff; border:1px solid #E4E4DE;text-decoration:none;color:#22222A} .v2h-fcard time{font:800 11px/1 Archivo,sans-serif;color:#2334C8;letter-spacing:.06em} .v2h-fcard span{font:600 13.5px/1.36 Archivo,sans-serif; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .v2h-fcard:hover{border-color:#2334C8} @media (min-width:900px){ .v2h-card{flex-basis:clamp(210px,22vw,272px)} .v2h-fcard{flex-basis:clamp(212px,22vw,272px)} } /* =========================================================================== The rails run the full width of the window On rtl.fr the sliders are not held inside the text column — the track spans the whole browser width and the cards bleed off both edges, which is what makes a row read as something you can pull rather than as a finished grid. These were capped at the container, so every row ended in white space. The rail is NOT inside .wrap: it is a direct child of the section, so it is full width by construction. The first attempt broke out of the container with margin-left:calc(50% - 50vw), and that was 16px out at every width — vw counts the scrollbar and the centred container does not, so the two never agreed. Taking the rail out of the container removes the arithmetic instead of correcting it. The SCROLLER then pads itself back in by one gutter, so the first card lines up with the heading while the row continues past the right edge. The gutter is derived from the container's own rule — width:min(1180px, 92%) with 16px of padding — so the two cannot drift apart. ======================================================================== */ .v2h-rail{position:relative} .v2h-rail>.v2h-scroll{ --v2h-gut:max(16px,calc((100% - min(1180px,92vw)) / 2 + 16px)); padding-left:var(--v2h-gut); padding-right:var(--v2h-gut); scroll-padding-left:var(--v2h-gut); scroll-padding-right:var(--v2h-gut)} /* the arrows follow the gutter rather than the window edge, so they sit beside the content the way RTL's do */ .v2h-arrow.is-prev{left:max(6px,calc((100% - min(1180px,92vw)) / 2 - 3px))} .v2h-arrow.is-next{right:max(6px,calc((100% - min(1180px,92vw)) / 2 - 3px))} /* ---- row 2 changes shape on desktop ------------------------------------ RTL does not simply scale this row up: on a phone the card is a tall portrait with the round thumbnail on top and the title centred under it, and on desktop it becomes a LANDSCAPE card with the text on the left and the thumbnail on the right. Measured off rtl.fr at desktop, scaling from the 728x90 leaderboard in the same screenshot: 382 x 148 CSS px. The phone layout above stays exactly as it was; only this block is new. */ .v2h-tile-t{display:block;min-width:0} @media (min-width:900px){ .v2h-tile{flex-basis:382px;aspect-ratio:auto;height:148px; flex-direction:row;align-items:center;justify-content:flex-start; text-align:left;gap:14px;padding:16px 18px} .v2h-tile-t{order:1;flex:1 1 auto} .v2h-tile-art{order:2;flex:0 0 auto;width:104px;height:104px;margin:0} .v2h-tile b{font-size:18px;display:block} .v2h-tile em{margin-top:4px;-webkit-line-clamp:2} /* the play mark returns to the rim of the circle now the circle has a corner of its own again */ .v2h-tile-art i{right:-2px;bottom:-2px} } /* ---- the sidebar --------------------------------------------------------- Two widgets, both on real data: the weather card reads the same api/_cache/weather.json the header chip does, and Most read is counted by api/_reads.php as articles are served. The newsroom already learned this lesson once — "most read" ordered by recency is a label that is simply untrue — so if nothing has been counted the block does not render at all. */ .v2h-side{display:flex;flex-direction:column;gap:18px;min-width:0; position:sticky;top:96px} .v2h-w,.v2h-most{border:1px solid #E4E4DE;border-radius:14px;background:#fff; overflow:hidden} .v2h-w-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px; padding:12px 14px;border-bottom:1px solid #E4E4DE; font:800 12px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase; color:#0A0A0B} .v2h-w-h a{font:700 11px/1 Archivo,sans-serif;letter-spacing:0;text-transform:none; color:#2334C8;text-decoration:none;white-space:nowrap} .v2h-w-h a:hover{text-decoration:underline} /* The sidebar goes under the articles before it gets narrow enough to squeeze them — 300px out of a 1148 container is fine, out of 700 it is not. */ @media (max-width:980px){ .v2h-une{grid-template-columns:minmax(0,1fr);gap:22px} .v2h-side{position:static;flex-direction:row;flex-wrap:wrap} .v2h-w,.v2h-most{flex:1 1 300px} } /* ---- the hero ----------------------------------------------------------- RTL opens À la une with the picture across the whole column, the kicker under it, then a headline far larger than anything else on the page. The weight of that headline is most of what makes the section read as a front page rather than as a list, so it is set deliberately large. */ .v2h-hero{display:block;text-decoration:none;color:inherit} .v2h-hero .nw-plate{width:100%;aspect-ratio:21/9;border-radius:14px;margin:0 0 12px} .v2h-hero-kick{display:block;font:800 10.5px/1 Archivo,sans-serif;letter-spacing:.14em; text-transform:uppercase;color:var(--nred)} .v2h-hero-kick.blue{color:#2334C8} .v2h-hero-kick.ink{color:#0A0A0B} .v2h-hero h3{margin:9px 0 0;font:800 clamp(19px,1.9vw,25px)/1.22 Archivo,sans-serif; letter-spacing:-.02em;color:#0A0A0B} .v2h-hero p{margin:9px 0 0;font:400 14.5px/1.55 Newsreader,Georgia,serif;color:#3C3C44; max-width:62ch} .v2h-hero-meta{display:block;margin-top:12px;font:600 12px/1 Archivo,sans-serif; color:#67676F} .v2h-hero:hover h3{text-decoration:underline} .v2h-une-list{border-top:1px solid #E4E4DE;margin-top:24px;padding-top:6px} /* ---- the weather card --------------------------------------------------- A SOLID card, as RTL's is — theirs is dark red, ours takes the network blue. Date, place, a large temperature beside its glyph, then the three parts of the day. Those three are real 3-hourly readings from the feed, not today's figure repeated under three labels. */ .v2h-w{background:#2334C8;border:0;border-radius:14px;color:#fff;padding:16px 16px 14px} .v2h-w-date{display:block;font:700 12.5px/1 Archivo,sans-serif;color:rgba(255,255,255,.82)} .v2h-w-city{display:inline-flex;align-items:center;gap:7px;margin-top:11px; font:800 19px/1 Archivo,sans-serif;color:#fff;text-decoration:none} .v2h-w-city i{font-size:14px;opacity:.9} .v2h-w-city:hover{text-decoration:underline} .v2h-w-now{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:10px} .v2h-w-t{font:300 60px/1 Archivo,sans-serif;letter-spacing:-.05em} .v2h-w-ico{display:flex;flex-direction:column;align-items:center;gap:6px; text-align:center;max-width:132px} .v2h-w-ico i{font-size:34px} .v2h-w-ico em{font:600 11px/1.3 Archivo,sans-serif;font-style:normal; color:rgba(255,255,255,.88)} .v2h-w-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px; margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.28)} .v2h-w-parts span{display:flex;flex-direction:column;align-items:center;gap:5px} .v2h-w-parts i{font-size:17px;opacity:.95} .v2h-w-parts b{font:800 15px/1 Archivo,sans-serif} .v2h-w-parts em{font:800 9.5px/1 Archivo,sans-serif;font-style:normal; letter-spacing:.1em;color:rgba(255,255,255,.8)} .v2h-w-more{display:inline-block;margin-top:14px;font:700 12px/1 Archivo,sans-serif; color:#fff;text-decoration:underline;text-underline-offset:3px} /* ---- most read ----------------------------------------------------------- */ /* the word on the hero plate was set for a full-height hero; at article size it has to come down with everything else */ .v2h-hero .nw-plate.big span{font-size:clamp(20px,2vw,30px)} /* .big carries its own 16/9 at a higher specificity than .v2h-hero .nw-plate, so the ratio has to be set on the same pair to win */ .v2h-hero .nw-plate.big{aspect-ratio:21/9;padding:16px} /* ---- most read ---------------------------------------------------------- Deliberately NOT rtl.fr's widget (white card, red numbered squares). This network runs music charts every week, so a ranked list already means something here — it is drawn as a countdown rather than as a boxed list: an oversized, light-weight position in the network blue, the headline beside it, and the story's own word underneath. No card around it either. The two sidebar blocks were both bordered boxes, which made the column read as packaging; against the solid weather card above, open type is the contrast. */ .v2h-most{background:none;border:0;border-radius:0} .v2h-most-h{margin:0;padding:0 0 10px;border-bottom:2px solid #0A0A0B; font:800 15px/1 Archivo,sans-serif;letter-spacing:-.01em;color:#0A0A0B; display:flex;align-items:baseline;justify-content:space-between;gap:8px} .v2h-most-h em{font:700 10.5px/1 Archivo,sans-serif;font-style:normal; letter-spacing:.12em;text-transform:uppercase;color:#9A9AA4} .v2h-most ol{list-style:none;margin:0;padding:0} .v2h-most li+li{border-top:1px solid #E4E4DE} .v2h-most a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px; align-items:start;padding:13px 0;text-decoration:none;color:#0A0A0B} /* the position, set big and light so it reads as a chart number rather than as a bullet — and tabular figures so 1 and 4 line up down the column */ .v2h-most-n{font:200 30px/0.9 Archivo,sans-serif;color:#2334C8; font-variant-numeric:tabular-nums;letter-spacing:-.04em;text-align:right} .v2h-most-b{min-width:0} .v2h-most-b b{display:block;font:700 14px/1.34 Archivo,sans-serif; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .v2h-most-b em{display:block;margin-top:5px;font:800 9.5px/1 Archivo,sans-serif; font-style:normal;letter-spacing:.11em;text-transform:uppercase;color:#9A9AA4} /* the most-read story of the week is the point of the list, so it is the one that gets the extra weight */ .v2h-most li:first-child .v2h-most-n{font-size:40px;color:var(--ngold); -webkit-text-stroke:0} .v2h-most li:first-child .v2h-most-b b{font-size:16px} .v2h-most a:hover .v2h-most-b b{color:#2334C8} .v2h-most a:hover .v2h-most-n{color:#0A0A0B} /* a row with no heading does not need the space a heading would have sat in */ .v2h-sec.is-bare{padding-top:14px} /* =========================================================================== The news sections — four columns, as rtl.fr sets them Their section below Flash actu is a static GRID, not a rail: a large black title, a hairline under it, then four columns each carrying image, a red kicker, a bold headline and a standfirst — with a rule over every column so the four read as columns of a page rather than as loose cards. The rails stop here on purpose. RTL slides its on-air row, its podcast row and Flash actu, all of which carry arrows; the sections underneath do not. ======================================================================== */ .v2h-sec-h{margin:0 0 4px} .v2h-sec-h a{font:800 clamp(22px,2.4vw,31px)/1.15 Archivo,sans-serif; letter-spacing:-.025em;color:#0A0A0B;text-decoration:none} .v2h-sec-h a:hover{color:#2334C8} .v2h-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px} .v2h-card{display:flex;flex-direction:column;min-width:0;text-decoration:none; color:inherit;padding-top:16px;border-top:1px solid #E4E4DE} .v2h-card .nw-plate{width:100%;aspect-ratio:4/3;border-radius:6px;margin:0 0 11px} .v2h-card-kick{display:block;font:600 12px/1.2 Archivo,sans-serif;color:var(--nred)} .v2h-card-kick.blue{color:#2334C8} .v2h-card-kick.ink{color:#5C5C66} .v2h-card b{display:block;margin-top:6px;font:800 15px/1.34 Archivo,sans-serif; letter-spacing:-.01em;color:#0A0A0B} .v2h-card p{margin:9px 0 0;font:400 13.5px/1.62 Newsreader,Georgia,serif; color:#3C3C44} .v2h-card:hover b{text-decoration:underline} @media (max-width:900px){ .v2h-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px} } /* ---- the sections on a phone ------------------------------------------- rtl.fr does not simply stack its four columns: on a phone the section becomes a STACKED LIST, every item keeps its standfirst, and only SOME items carry a picture — theirs run image, none, image, none. That rhythm is what stops a one-column section becoming a wall of identical blocks, and it is why this looked wrong stacked: every card had a plate and none had a standfirst, which is the opposite of both. Ours follows the same rhythm: the plate on the first and third, text alone on the second and fourth. */ @media (max-width:560px){ .v2h-cols{grid-template-columns:minmax(0,1fr);gap:0} .v2h-card{padding:16px 0 17px} .v2h-card:first-child{padding-top:14px} .v2h-card .nw-plate{aspect-ratio:16/9;margin-bottom:12px} .v2h-card:nth-child(even) .nw-plate{display:none} .v2h-card-kick{font-size:12.5px} .v2h-card b{font-size:16px;line-height:1.3} /* the standfirst is the half of the item the phone layout actually needs: with no photograph on every row it is what tells you what the story is */ .v2h-card p{display:block;font-size:14px;line-height:1.55;margin-top:8px} } /* ---- row 2 on a phone -------------------------------------------------- The portrait tile was 226x302 at 390px — nearly a third of the screen for one channel name, which made the row tower over the programme cards above it. Everything in it comes down together: the card, the disc and the type, so the proportions hold rather than a big card gaining a small logo. Below 900px only; the landscape desktop card is untouched. */ @media (max-width:899px){ .v2h-tile{flex-basis:clamp(134px,40vw,168px);padding:13px 10px;gap:2px} .v2h-tile-art{width:78px;height:78px;border-width:2px;margin-bottom:9px} .v2h-tile-art img{padding:7px 9px} .v2h-tile-art i{width:24px;height:24px;font-size:8.5px} .v2h-tile b{font-size:13.5px} .v2h-tile em{font-size:11px;-webkit-line-clamp:2} .v2h-tile-live{top:9px;left:9px;padding:3px 5px;font-size:8px} .v2h-media{gap:9px} } /* ---- Flash on a phone --------------------------------------------------- rtl.fr shows ONE item at a time here, full width and unboxed: the time in red, the headline in bold under it, nothing else. And this is the one row where their arrows are visible on a phone — outlined circles up on the heading line, with the unavailable direction greyed rather than removed. Ours was 250px bordered cards at about one and a half per screen, which both clipped a headline and made the row read as a list of chips. */ @media (max-width:560px){ .v2h-flashrow{gap:0;padding:2px 0 8px} .v2h-fcard{flex:0 0 100%;max-width:100%;background:none;border:0; border-radius:0;padding:4px 0 8px;gap:10px} .v2h-fcard time{font-size:14px;letter-spacing:0} /* no clamp: at full width a flash headline fits, and cutting one was the thing that made this look unfinished */ .v2h-fcard span{font:800 17px/1.35 Archivo,sans-serif;color:#0A0A0B; display:block;-webkit-line-clamp:none;overflow:visible} /* the arrows come back for this row, and sit on the heading line */ .v2h-flash .v2h-arrow{display:grid;opacity:1;pointer-events:auto; width:40px;height:40px;top:auto;bottom:calc(100% + 14px); background:#fff;border:1.5px solid var(--nred);color:var(--nred); box-shadow:none} .v2h-flash .v2h-arrow.is-next{right:16px} .v2h-flash .v2h-arrow.is-prev{left:auto;right:64px} /* hidden means "you cannot go that way" — RTL greys it rather than removing it, so the pair does not jump about as you slide */ /* style.css carries [hidden]{display:none !important}, so this has to shout back — the opacity was applying while the display was not. */ .v2h-flash .v2h-arrow[hidden]{display:grid !important;opacity:.32; pointer-events:none} .v2h-flash{padding-top:30px} /* the arrows take the right-hand end of the heading line, which is where the "newsroom" link was sitting — RTL has the title and the arrows there and nothing else */ .v2h-flash .v2h-head a{display:none} } /* ---- the chart on a phone ---------------------------------------------- */ @media (max-width:560px){ /* a track title is not a headline to be truncated: "Espoir (feat. Robert Martino) [Live]" lost its own parenthetical to an ellipsis. Two lines. */ .v2h-chart .v2h-tk b{white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .v2h-chart a{padding:9px 8px;gap:10px} } /* the language control is buttons now, not inert spans */ .v2-lang button{background:none;border:0;padding:2px 5px;cursor:pointer; font:inherit;color:inherit;border-radius:3px;line-height:1} .v2-lang button:hover{color:#fff} .v2-lang button.on{background:#fff;color:#0A0A0B;font-weight:800} /* a thin language edition explaining itself */ .v2h-thin{margin:18px 0 0;padding:14px 16px;border:1px solid #E4E4DE;border-radius:10px; background:#F4F4EF;font:600 14px/1.5 Archivo,sans-serif;color:#3C3C44} .v2h-thin a{color:#2334C8;text-decoration:none;font-weight:700;white-space:nowrap} .v2h-thin a:hover{text-decoration:underline} /* =========================================================================== NOT IN USE. The front page kept its RTL shape; this three-column newspaper body was built on a misread instruction and is left here only because it works and may be wanted one day. Nothing renders .v2h-paper. The front page body, as lenouvelliste.com sets it Three columns, measured off their page at 1600: 24 / 48 / 22. The left is the day in the order it happened, the centre is the lead and what follows it, the right rail carries the weather and what is actually being read. This is a newspaper grid, not a feed — and it suits a desk with no photographs better than a wall of identical cards does, because the three columns give a page its hierarchy through position and size rather than through pictures. ======================================================================== */ .v2h-paper{display:grid;gap:0 30px;align-items:start; grid-template-columns:minmax(0,24fr) minmax(0,48fr) minmax(0,22fr)} .v2h-col-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px; padding-bottom:9px;margin-bottom:6px;border-bottom:2px solid #0A0A0B; font:800 14px/1 Archivo,sans-serif;letter-spacing:-.01em;color:#0A0A0B} .v2h-col-h a{font:700 11px/1 Archivo,sans-serif;color:#2334C8;text-decoration:none} .v2h-col-h a:hover{text-decoration:underline} /* ---- left: the day, in order ------------------------------------------- */ .v2h-minute{min-width:0;border-right:1px solid #E4E4DE;padding-right:26px} .v2h-min{display:grid;grid-template-columns:64px minmax(0,1fr);gap:11px; align-items:start;padding:11px 0;text-decoration:none;color:#0A0A0B} .v2h-min + .v2h-min{border-top:1px solid #E4E4DE} .v2h-min .nw-plate{width:64px;aspect-ratio:1/1;border-radius:5px;margin:0} .v2h-min time{display:block;font:700 10.5px/1 Archivo,sans-serif;color:#9A9AA4; margin-bottom:3px} .v2h-min b{font:700 13px/1.32 Archivo,sans-serif; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .v2h-min:hover b{color:#2334C8} /* ---- centre: the lead ---------------------------------------------------- */ .v2h-lead-col{min-width:0;padding-right:4px} /* ---- right: the rail ----------------------------------------------------- */ .v2h-paper .v2h-side{border-left:1px solid #E4E4DE;padding-left:26px; position:sticky;top:96px} /* ---- narrower ------------------------------------------------------------ The rail goes under first: it is supporting material. The minute column holds its place beside the lead down to tablet width, because a newspaper front page reads as one thing and stacking it too early turns it back into the feed this replaced. */ @media (max-width:1100px){ .v2h-paper{grid-template-columns:minmax(0,30fr) minmax(0,70fr);gap:0 24px} .v2h-paper .v2h-side{grid-column:1/-1;border-left:0;padding-left:0;position:static; margin-top:26px;padding-top:22px;border-top:1px solid #E4E4DE; flex-direction:row;flex-wrap:wrap} .v2h-paper .v2h-side>*{flex:1 1 300px} } @media (max-width:760px){ .v2h-paper{grid-template-columns:minmax(0,1fr)} /* the lead first on a phone: it is the story of the day, and a column of one-line items above it buries the thing a reader came for */ .v2h-lead-col{order:1} .v2h-minute{order:2;border-right:0;padding-right:0; margin-top:26px;padding-top:20px;border-top:1px solid #E4E4DE} .v2h-paper .v2h-side{order:3} }