/* «Тихая газета» — общий стиль витрины MediaMatrix. Днём — «Печатный двор» (бумага), вечером — «Вечерний выпуск» (чернила). Тема ставится JS: data-style="paper" | "night" на . */ :root{ --serif:"Georgia","Times New Roman",serif; --sans:-apple-system,"Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif; } [data-style="paper"]{ --bg:#F6F2E9; --bg2:#EFEADD; --ink:#211D16; --ink2:#5A544A; --ink3:#98917F; --rule:#211D16; --hair:#D8D2C2; --card:#FBF8F1; --accent:#C0392B; } [data-style="night"]{ --bg:#111319; --bg2:#171A22; --ink:#EAE6DA; --ink2:#A8A294; --ink3:#6C675C; --rule:#EAE6DA; --hair:#2A2D36; --card:#171A22; --accent:#E5484D; } *{box-sizing:border-box; margin:0; padding:0} html{scrollbar-gutter:stable} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; transition:background .3s,color .3s; -webkit-font-smoothing:antialiased; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; z-index:0; background-image:url("data:image/svg+xml;utf8,"); } .wrap{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 24px 90px} .story-page{max-width:1080px} a{color:inherit} /* Мачтхед */ .masthead{padding:18px 0 0; text-align:center} .m-top{display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); border-top:1px solid var(--rule); border-bottom:1px solid var(--hair); padding:6px 2px} .m-name{font-family:var(--serif); font-weight:700; font-size:52px; margin:16px 0 3px; line-height:1} .m-name a{text-decoration:none} .m-sub{font-size:13px; letter-spacing:.42em; text-transform:uppercase; color:var(--ink2); margin-bottom:13px} .m-value{font-family:var(--serif); font-size:14.5px; line-height:1.45; color:var(--ink2); max-width:640px; margin:0 auto 15px; text-wrap:balance} .m-rule{border-top:3px double var(--rule)} .theme-toggle{ position:absolute; right:0; top:64px; border:1px solid var(--hair); background:var(--card); color:var(--ink2); cursor:pointer; font-size:14px; width:34px; height:34px; border-radius:50%; } /* Ритмы */ .rhythms{display:flex; justify-content:center; border-bottom:1px solid var(--hair)} .rhythm{font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); padding:11px 16px 9px; border:none; background:none; cursor:pointer; position:relative} .rhythm.on{color:var(--ink)} .rhythm.on::after{content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; background:var(--accent)} /* Рубрики-штемпели */ .topics{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; padding:13px 0 10px; border-bottom:1px solid var(--hair); font-size:15px} .topic{border:none; background:none; cursor:pointer; color:var(--ink2); font-family:var(--sans); font-weight:600; padding:6px 13px; font-size:15px; border-radius:3px; transition:all .15s} .topic.prio{color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent)} .topics-hint{width:100%; text-align:center; font-size:13.5px; font-weight:600; color:var(--ink2); padding-top:5px} /* ============ Мой регион: штемпель, поиск города, каскад ============ */ /* Штемпель региона стоит первым и отличается ромбиком-«меткой места» */ .topic.region{font-weight:700} .topic.region .pin{color:var(--accent); margin-right:5px; font-size:13px} /* Выбор города в верхней строке мачтхеда (на месте бывшей «Москвы») */ .city-top{cursor:pointer} .city-top .chg{color:var(--accent); text-decoration:underline; text-underline-offset:3px} .city-top:hover .chg{text-decoration:none} /* Панель выбора города — врезка в газетном стиле */ .city-panel{width:100%; max-width:520px; margin:8px auto 4px; text-align:left; border:1px solid var(--rule); background:var(--card); padding:16px 18px 14px; position:relative} .city-panel .cp-h{font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin-bottom:8px} .city-panel .cp-x{position:absolute; right:10px; top:8px; border:none; background:none; color:var(--ink2); font-size:18px; cursor:pointer; padding:4px 8px} .city-input{width:100%; font-family:var(--serif); font-size:19px; color:var(--ink); background:transparent; border:none; border-bottom:1px solid var(--ink); padding:6px 2px; outline:none; border-radius:0} .city-sug{margin-top:4px} .city-sug button{display:flex; width:100%; justify-content:space-between; gap:12px; align-items:baseline; border:none; background:none; cursor:pointer; text-align:left; padding:9px 2px; border-bottom:1px solid var(--hair); font-family:var(--sans)} .city-sug button:last-child{border-bottom:none} .city-sug .cs-city{font-size:16px; font-weight:700; color:var(--ink)} .city-sug .cs-sub{font-size:13px; color:var(--ink2); text-align:right; flex-shrink:1} .city-sug button:hover .cs-city{color:var(--accent)} .cp-note{font-size:13px; color:var(--ink2); line-height:1.45; margin-top:9px} .cp-miss{font-size:14px; color:var(--ink2); font-style:italic; padding:9px 2px} /* Заметка в ленте, когда по региону пока пусто (каскад на федеральные новости) */ .region-note{border:1px dashed var(--ink3); color:var(--ink2); font-size:14.5px; font-style:italic; padding:11px 14px; margin:14px 0 4px; line-height:1.45} /* ============ Страница «Карта портала» (/sources) ============ */ .about-text{font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--ink); margin:14px 0 6px} .geo-chips{display:flex; flex-wrap:wrap; gap:8px; padding:6px 0 10px} .geo-chip{font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink2); border:1px solid var(--hair); background:var(--card); padding:6px 12px} /* Заметная кнопка-ссылка в подвале: «Как устроен портал» */ .note-link{display:inline-block; color:var(--ink); text-decoration:none; font-weight:700; border:1px solid var(--rule); padding:7px 16px; margin-top:10px; letter-spacing:.04em} .note-link:hover{color:var(--accent); border-color:var(--accent)} /* ============ Архив выпусков (подшивка) ============ */ #issue-no{cursor:pointer} #issue-no:hover{color:var(--accent)} .arch-list{list-style:none; padding:4px 0} .arch-list li{padding:9px 2px; border-bottom:1px solid var(--hair); font-size:15.5px; line-height:1.4} .arch-list a{color:var(--ink); text-decoration:none; font-weight:600} .arch-list a:hover{color:var(--accent)} .arch-k{font-family:var(--sans); font-size:12px; color:var(--ink3); margin-left:8px; letter-spacing:.06em; text-transform:uppercase} .fin .next-link{display:inline-block; margin-top:10px; font-size:14px; color:var(--ink2); text-decoration:underline; text-underline-offset:3px} .fin .next-link:hover{color:var(--accent)} /* Кнопка «Установить приложение» (PWA), появляется когда браузер готов */ .install-chip{display:none; margin:10px auto 0; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--ink); background:var(--card); border:1px solid var(--rule); padding:8px 18px; cursor:pointer} .install-chip.on{display:block} .install-chip:hover{color:var(--accent); border-color:var(--accent)} /* Строка выпуска */ .issue{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:18px 2px 2px} .issue h1{font-family:var(--serif); font-size:31px; font-weight:700; white-space:nowrap} .issue span{font-size:15.5px; color:var(--ink2); text-align:right} /* Молния — срочная новость, о которой пишут сразу несколько изданий */ .flash{display:flex; gap:14px; align-items:flex-start; border:2px solid var(--accent); border-left:6px solid var(--accent); padding:12px 16px; margin:16px 0 2px; background:var(--card); text-decoration:none} .flash .tag{font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--accent); padding:4px 10px; flex:0 0 auto; margin-top:2px; white-space:nowrap} .flash .fbody{display:block} .flash p{font-family:var(--serif); font-size:17.5px; font-weight:700; line-height:1.3} .flash .fsub{display:block; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--accent); margin-top:5px} /* ============ Полоса из зон ============ */ .zone{margin-top:26px} .zone-h{ display:flex; align-items:baseline; justify-content:space-between; border-top:3px solid var(--rule); border-bottom:1px solid var(--hair); padding:7px 2px 6px; margin-bottom:14px; } .zone-h span:first-child{font-family:var(--serif); font-size:19px; font-weight:700} .zone-n{font-size:11px; color:var(--ink3); letter-spacing:.1em} .grid2{display:grid; grid-template-columns:1fr; gap:16px} @media (min-width:540px){ .grid2{grid-template-columns:1fr 1fr} } /* Горизонтальная карточка: широкая иллюстрация слева, текст справа */ .hcard{display:flex; gap:22px; background:var(--card); border:1px solid var(--hair); padding:16px 18px; margin-bottom:16px; cursor:pointer; align-items:flex-start} .hcard .hph{flex:0 0 300px; aspect-ratio:16/10; position:relative; overflow:hidden; border:1px solid var(--rule); padding:3px; background-clip:content-box; background-image: radial-gradient(140px 90px at 70% 25%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 1px, transparent 1px 5px)} .hcard .hph img{position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:cover; display:block} .hcard .hbody{flex:1; min-width:0} .hcard h3{font-family:var(--serif); font-size:22px; line-height:1.25; font-weight:700; margin-bottom:8px; text-wrap:balance} .hcard .bullets li{font-size:15.5px; padding-bottom:7px} .hcard .num{flex:0 0 auto; font-family:var(--serif); font-size:42px; font-weight:300; color:var(--accent); line-height:1; min-width:60px; text-align:center; padding-top:6px} /* Мобильный: иллюстрация сверху во всю ширину, текст под ней */ @media (max-width:640px){ .hcard{flex-direction:column; gap:12px} .hcard .hph{flex:0 0 auto; width:100%; aspect-ratio:16/9} .hcard .num{display:none} .hcard h3{font-size:19px} } /* Карточка зоны: картинка сверху, всегда одного размера */ .card2{background:var(--card); border:1px solid var(--hair); cursor:pointer; display:flex; flex-direction:column} .card2 .c2-body{padding:11px 14px 12px; display:flex; flex-direction:column; flex:1} .card2 h3{font-family:var(--serif); font-size:17.5px; line-height:1.24; font-weight:700; margin-bottom:7px; text-wrap:balance} .card2 .bullets li{font-size:13.5px; padding-bottom:6px} .card2 .meta{margin-top:auto} /* Передовица */ .lead2{border:1px solid var(--hair); border-top:3px solid var(--rule); background:var(--card); padding:18px 20px 16px; margin-top:16px; cursor:pointer} .lead2 h2{font-family:var(--serif); font-size:34px; line-height:1.18; font-weight:700; margin-bottom:10px; text-wrap:balance} /* Картинка сюжета: жёсткая рамка-паспарту, никогда не «гигант» */ .ph{ position:relative; aspect-ratio:16/9; overflow:hidden; flex:0 0 auto; border-bottom:1px solid var(--hair); background: radial-gradient(140px 100px at 72% 22%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 1px, transparent 1px 5px); } .lead2 .ph{border:1px solid var(--rule); padding:4px; background-clip:content-box} @media (min-width:800px){ .lead2 .ph{aspect-ratio:21/8} } .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block} .lead2 .ph img{inset:4px; width:calc(100% - 8px); height:calc(100% - 8px)} /* Материалы: каждая заметка — отдельная плашка с жирной линейкой сверху */ .k{display:flex; align-items:baseline; gap:7px; white-space:nowrap; overflow:hidden; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px} .k .src{color:var(--ink3); font-weight:600} .item{ background:var(--card); border:1px solid var(--hair); border-top:3px solid var(--rule); padding:15px 18px 13px; margin-bottom:20px; cursor:pointer; } .item::after{content:""; display:block; clear:both} .item h3{font-family:var(--serif); font-size:20px; line-height:1.22; font-weight:700; margin-bottom:8px; text-wrap:balance} .lead-item h3{font-size:27px} /* Миниатюра-якорь: АИ-иллюстрация или «гравюра» — штриховка с буквой рубрики */ .row{display:flex; gap:16px; align-items:flex-start} .row .cnt{flex:1; min-width:0} .thumb{flex:0 0 104px; width:104px; height:104px; margin-top:3px; border:1px solid var(--rule); padding:3px; background:var(--bg)} .thumb img{display:block; width:100%; height:100%; object-fit:cover} .thumb .etch{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; border:1px solid var(--hair); background: radial-gradient(70px 70px at 70% 25%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 20%, transparent) 0 1px, transparent 1px 5px); } .thumb .etch b{font-family:var(--serif); font-size:46px; font-weight:700; color:var(--ink); opacity:.8} /* Панорамная иллюстрация сюжета: та же, что в ленте, но в полный формат. Под картинкой — фактурная штриховка: пустой рамки не бывает никогда */ .cover{position:relative; border:1px solid var(--rule); padding:4px; margin:14px 0 6px; aspect-ratio:16/9; overflow:hidden; background-clip:content-box; background-image: radial-gradient(220px 140px at 72% 22%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 1px, transparent 1px 5px)} @media (min-width:800px){ .cover{aspect-ratio:21/8} } .cover img{position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); object-fit:cover; display:block} .cover-cap{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink3); letter-spacing:.08em; text-transform:uppercase; margin:0 2px 12px} .bullets{list-style:none; margin:2px 0 6px} .bullets li{position:relative; padding:0 0 8px 19px; font-size:16px; line-height:1.58; color:var(--ink)} .bullets li::before{content:"■"; position:absolute; left:0; top:1px; font-size:8px; color:var(--accent)} .stat{float:right; margin:2px 0 8px 14px; text-align:center; border:1px solid var(--rule); outline:1px solid var(--rule); outline-offset:2px; padding:7px 11px 6px; background:var(--card); min-width:70px} .stat b{display:block; font-family:var(--serif); font-size:24px; font-weight:700; line-height:1} .stat small{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)} .meta{display:flex; gap:8px; font-size:13.5px; color:var(--ink3); padding-top:6px; letter-spacing:.02em} .meta b{color:var(--ink2); font-weight:700} .meta .right{margin-left:auto; font-variant:small-caps; letter-spacing:.08em} /* Страница сюжета */ .story-page .why{border:1px solid var(--rule); padding:12px 15px; margin:14px 0; background:var(--bg2); font-size:14.5px; color:var(--ink2); line-height:1.55} .story-page .why b{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:5px} .warn{border:2px solid var(--accent); padding:12px 15px; margin:14px 0; background:var(--card); font-size:14px} .warn b{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:5px} .sect{font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); margin:24px 0 10px; border-bottom:1px solid var(--hair); padding-bottom:6px} .srcs{display:flex; flex-direction:column} .src{display:flex; align-items:baseline; gap:10px; padding:10px 2px; border-bottom:1px solid var(--hair); text-decoration:none; font-size:14px} .src .nm{font-weight:700; white-space:nowrap} .src .tt{color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .src .go{margin-left:auto; color:var(--ink3)} .orig{display:block; text-align:center; margin:20px 0 6px; padding:13px; border:2px solid var(--rule); background:var(--card); color:var(--ink); font-weight:700; text-decoration:none; font-size:15px; font-family:var(--serif)} .orig:hover{background:var(--bg2)} /* Финал выпуска */ .fin{text-align:center; padding:30px 0 8px; color:var(--ink2)} .fin .orn{font-size:16px; letter-spacing:.6em; color:var(--ink3); margin-bottom:9px} .fin b{display:block; font-family:var(--serif); font-size:19px; color:var(--ink); margin-bottom:3px} .fin .next{margin-top:5px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)} .note{text-align:center; font-size:10.5px; color:var(--ink3); padding:22px 0 6px} .empty{text-align:center; color:var(--ink2); padding:50px 20px; font-size:14.5px} .back-link{display:inline-block; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; margin:16px 0 0; border:1px solid var(--rule); background:var(--card); padding:10px 18px} .back-link:hover{background:var(--bg2)} /* Страница сюжета — тот же масштаб, что и главная */ .story-page .issue h1{font-size:34px; white-space:normal; line-height:1.22} .story-page .bullets li{font-size:17px; padding-bottom:10px; line-height:1.6} .story-page .why{font-size:16px} .story-page .warn{font-size:15.5px} .story-page .k{font-size:12.5px} .story-page .sect{font-size:12px} .story-page .src{padding:13px 2px} .story-page .src .nm{font-size:16px} .story-page .src .tt{font-size:15px} .story-page .orig{font-size:17.5px; padding:16px} .story-page .note{font-size:12px}