Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Новости — Информационный портал</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <style> | |
| /* === CSS Variables / Design Tokens === */ | |
| :root { | |
| --bg: #0e0f13; | |
| --bg-elevated: #16171d; | |
| --bg-card: #1c1d25; | |
| --bg-card-hover: #22232d; | |
| --fg: #e8e6e1; | |
| --fg-muted: #8a8b93; | |
| --fg-dim: #55565e; | |
| --accent: #d4a843; | |
| --accent-glow: rgba(212, 168, 67, 0.25); | |
| --accent-soft: rgba(212, 168, 67, 0.1); | |
| --danger: #e05555; | |
| --success: #4ecb71; | |
| --info: #5ba8d4; | |
| --border: rgba(255,255,255,0.06); | |
| --border-hover: rgba(255,255,255,0.12); | |
| --radius-sm: 6px; | |
| --radius-md: 12px; | |
| --radius-lg: 20px; | |
| --radius-xl: 28px; | |
| --shadow-card: 0 4px 24px rgba(0,0,0,0.35); | |
| --shadow-elevated: 0 12px 48px rgba(0,0,0,0.5); | |
| --font-display: 'Playfair Display', Georgia, serif; | |
| --font-body: 'Source Sans 3', system-ui, sans-serif; | |
| --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| /* === Reset & Base === */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { | |
| scroll-behavior: smooth; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--bg); | |
| color: var(--fg); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* === Animated Background === */ | |
| .bg-atmosphere { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| .bg-atmosphere::before { | |
| content: ''; | |
| position: absolute; | |
| top: -30%; | |
| left: -20%; | |
| width: 70vw; | |
| height: 70vw; | |
| background: radial-gradient(circle, rgba(212,168,67,0.06) 0%, transparent 65%); | |
| animation: floatBlob1 25s ease-in-out infinite; | |
| } | |
| .bg-atmosphere::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -20%; | |
| right: -15%; | |
| width: 60vw; | |
| height: 60vw; | |
| background: radial-gradient(circle, rgba(91,168,212,0.04) 0%, transparent 60%); | |
| animation: floatBlob2 30s ease-in-out infinite; | |
| } | |
| @keyframes floatBlob1 { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(10%, 5%) scale(1.1); } | |
| 66% { transform: translate(-5%, 10%) scale(0.95); } | |
| } | |
| @keyframes floatBlob2 { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 50% { transform: translate(-8%, -6%) scale(1.08); } | |
| } | |
| /* === Noise Overlay === */ | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1; | |
| pointer-events: none; | |
| opacity: 0.025; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| background-repeat: repeat; | |
| background-size: 256px 256px; | |
| } | |
| /* === Layout Container === */ | |
| .container { | |
| max-width: 1320px; | |
| margin: 0 auto; | |
| padding: 0 clamp(16px, 4vw, 40px); | |
| position: relative; | |
| z-index: 2; | |
| } | |
| /* === Header === */ | |
| header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(14,15,19,0.82); | |
| backdrop-filter: blur(20px) saturate(1.4); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.4); | |
| border-bottom: 1px solid var(--border); | |
| transition: var(--transition-smooth); | |
| } | |
| header.scrolled { | |
| box-shadow: 0 2px 30px rgba(0,0,0,0.4); | |
| } | |
| .header-inner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| padding: 14px 0; | |
| flex-wrap: wrap; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| text-decoration: none; | |
| flex-shrink: 0; | |
| } | |
| .logo-icon { | |
| width: 42px; | |
| height: 42px; | |
| background: linear-gradient(135deg, var(--accent), #b8892e); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| color: #0e0f13; | |
| font-weight: 900; | |
| font-family: var(--font-display); | |
| box-shadow: 0 2px 12px var(--accent-glow); | |
| } | |
| .logo-text { | |
| font-family: var(--font-display); | |
| font-size: clamp(20px, 3vw, 26px); | |
| font-weight: 900; | |
| color: var(--fg); | |
| letter-spacing: -0.5px; | |
| } | |
| .logo-text span { | |
| color: var(--accent); | |
| } | |
| .header-built { | |
| font-size: 12px; | |
| color: var(--fg-dim); | |
| text-decoration: none; | |
| opacity: 0.7; | |
| transition: var(--transition-fast); | |
| white-space: nowrap; | |
| } | |
| .header-built:hover { | |
| color: var(--accent); | |
| opacity: 1; | |
| } | |
| /* === Search Bar === */ | |
| .search-wrapper { | |
| flex: 1; | |
| max-width: 420px; | |
| min-width: 200px; | |
| position: relative; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 10px 16px 10px 42px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| color: var(--fg); | |
| font-size: 14px; | |
| font-family: var(--font-body); | |
| outline: none; | |
| transition: var(--transition-fast); | |
| } | |
| .search-input::placeholder { | |
| color: var(--fg-dim); | |
| } | |
| .search-input:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| background: var(--bg-card); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 14px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--fg-dim); | |
| font-size: 14px; | |
| pointer-events: none; | |
| transition: var(--transition-fast); | |
| } | |
| .search-input:focus ~ .search-icon { | |
| color: var(--accent); | |
| } | |
| /* === Ticker === */ | |
| .ticker-bar { | |
| background: var(--accent); | |
| color: #0e0f13; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .ticker-label { | |
| display: inline-block; | |
| background: #0e0f13; | |
| color: var(--accent); | |
| padding: 8px 16px; | |
| font-weight: 700; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| vertical-align: middle; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .ticker-track { | |
| display: inline-block; | |
| animation: tickerScroll 40s linear infinite; | |
| vertical-align: middle; | |
| } | |
| .ticker-item { | |
| display: inline-block; | |
| padding: 8px 32px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .ticker-item .ticker-dot { | |
| display: inline-block; | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: #0e0f13; | |
| margin-right: 10px; | |
| vertical-align: middle; | |
| opacity: 0.5; | |
| } | |
| @keyframes tickerScroll { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| /* === Category Navigation === */ | |
| .categories-bar { | |
| padding: 20px 0 0; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| .categories-bar::-webkit-scrollbar { display: none; } | |
| .categories-list { | |
| display: flex; | |
| gap: 8px; | |
| list-style: none; | |
| flex-wrap: nowrap; | |
| padding-bottom: 4px; | |
| } | |
| .cat-btn { | |
| padding: 8px 20px; | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| background: transparent; | |
| color: var(--fg-muted); | |
| font-family: var(--font-body); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: var(--transition-fast); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cat-btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--accent); | |
| opacity: 0; | |
| transition: var(--transition-fast); | |
| } | |
| .cat-btn:hover { | |
| border-color: var(--border-hover); | |
| color: var(--fg); | |
| } | |
| .cat-btn.active { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #0e0f13; | |
| box-shadow: 0 2px 16px var(--accent-glow); | |
| } | |
| .cat-btn .cat-count { | |
| display: inline-block; | |
| background: rgba(255,255,255,0.15); | |
| padding: 1px 7px; | |
| border-radius: 100px; | |
| font-size: 11px; | |
| margin-left: 6px; | |
| } | |
| .cat-btn.active .cat-count { | |
| background: rgba(0,0,0,0.2); | |
| } | |
| /* === Section Title === */ | |
| .section-title { | |
| font-family: var(--font-display); | |
| font-size: clamp(28px, 5vw, 44px); | |
| font-weight: 900; | |
| letter-spacing: -1px; | |
| margin-bottom: 8px; | |
| line-height: 1.15; | |
| } | |
| .section-title .accent { | |
| color: var(--accent); | |
| } | |
| .section-subtitle { | |
| color: var(--fg-muted); | |
| font-size: 16px; | |
| font-weight: 300; | |
| margin-bottom: 32px; | |
| } | |
| /* === Featured / Hero News === */ | |
| .hero-news { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| grid-template-rows: auto auto; | |
| gap: 16px; | |
| margin-bottom: 48px; | |
| min-height: 460px; | |
| } | |
| .hero-card { | |
| position: relative; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| } | |
| .hero-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-elevated); | |
| } | |
| .hero-card.main { | |
| grid-row: 1 / 3; | |
| } | |
| .hero-card-img { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.6s ease; | |
| } | |
| .hero-card:hover .hero-card-img { | |
| transform: scale(1.04); | |
| } | |
| .hero-card-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(to top, rgba(14,15,19,0.95) 0%, rgba(14,15,19,0.4) 50%, rgba(14,15,19,0.1) 100%); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| padding: clamp(16px, 3vw, 32px); | |
| } | |
| .hero-card-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--accent); | |
| color: #0e0f13; | |
| padding: 4px 12px; | |
| border-radius: 100px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| width: fit-content; | |
| margin-bottom: 12px; | |
| } | |
| .hero-card-tag.breaking { | |
| background: var(--danger); | |
| color: #fff; | |
| animation: pulseBreaking 2s ease-in-out infinite; | |
| } | |
| @keyframes pulseBreaking { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(224,85,85,0.4); } | |
| 50% { box-shadow: 0 0 0 8px rgba(224,85,85,0); } | |
| } | |
| .hero-card-title { | |
| font-family: var(--font-display); | |
| font-weight: 900; | |
| line-height: 1.2; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.3px; | |
| } | |
| .hero-card.main .hero-card-title { | |
| font-size: clamp(22px, 3vw, 34px); | |
| } | |
| .hero-card.side .hero-card-title { | |
| font-size: clamp(16px, 2vw, 20px); | |
| } | |
| .hero-card-excerpt { | |
| color: var(--fg-muted); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .hero-card-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-top: 12px; | |
| font-size: 12px; | |
| color: var(--fg-dim); | |
| } | |
| .hero-card-meta i { | |
| font-size: 11px; | |
| } | |
| .meta-divider { | |
| width: 3px; | |
| height: 3px; | |
| border-radius: 50%; | |
| background: var(--fg-dim); | |
| } | |
| /* === News Grid === */ | |
| .news-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 48px; | |
| } | |
| .news-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| position: relative; | |
| } | |
| .news-card:hover { | |
| border-color: var(--border-hover); | |
| background: var(--bg-card-hover); | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-card); | |
| } | |
| .news-card-img-wrap { | |
| position: relative; | |
| overflow: hidden; | |
| aspect-ratio: 16/9; | |
| } | |
| .news-card-img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s ease; | |
| } | |
| .news-card:hover .news-card-img { | |
| transform: scale(1.06); | |
| } | |
| .news-card-img-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(to top, rgba(14,15,19,0.5) 0%, transparent 50%); | |
| } | |
| .news-card-bookmark { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 50%; | |
| background: rgba(14,15,19,0.6); | |
| backdrop-filter: blur(8px); | |
| border: none; | |
| color: var(--fg-muted); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| font-size: 13px; | |
| } | |
| .news-card-bookmark:hover, | |
| .news-card-bookmark.saved { | |
| background: var(--accent); | |
| color: #0e0f13; | |
| } | |
| .news-card-body { | |
| padding: 18px 20px 20px; | |
| } | |
| .news-card-category { | |
| display: inline-block; | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1.2px; | |
| color: var(--accent); | |
| margin-bottom: 8px; | |
| } | |
| .news-card-title { | |
| font-family: var(--font-display); | |
| font-size: 18px; | |
| font-weight: 700; | |
| line-height: 1.3; | |
| margin-bottom: 8px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| transition: var(--transition-fast); | |
| } | |
| .news-card:hover .news-card-title { | |
| color: var(--accent); | |
| } | |
| .news-card-excerpt { | |
| font-size: 13px; | |
| color: var(--fg-muted); | |
| line-height: 1.55; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| margin-bottom: 14px; | |
| } | |
| .news-card-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 12px; | |
| color: var(--fg-dim); | |
| } | |
| .news-card-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .author-avatar { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .news-card-stats { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .news-card-stats span { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| /* === Sidebar Layout === */ | |
| .content-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 340px; | |
| gap: 32px; | |
| margin-bottom: 48px; | |
| } | |
| /* === Trending Sidebar === */ | |
| .sidebar { | |
| position: sticky; | |
| top: 90px; | |
| align-self: start; | |
| } | |
| .sidebar-section { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| margin-bottom: 20px; | |
| } | |
| .sidebar-title { | |
| font-family: var(--font-display); | |
| font-size: 18px; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .sidebar-title i { | |
| color: var(--accent); | |
| } | |
| .trending-item { | |
| display: flex; | |
| gap: 14px; | |
| padding: 14px 0; | |
| border-bottom: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .trending-item:last-child { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .trending-item:first-child { | |
| padding-top: 0; | |
| } | |
| .trending-item:hover .trending-title { | |
| color: var(--accent); | |
| } | |
| .trending-rank { | |
| font-family: var(--font-display); | |
| font-size: 28px; | |
| font-weight: 900; | |
| color: var(--fg-dim); | |
| line-height: 1; | |
| min-width: 32px; | |
| opacity: 0.4; | |
| } | |
| .trending-content { | |
| flex: 1; | |
| } | |
| .trending-category { | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--accent); | |
| margin-bottom: 4px; | |
| } | |
| .trending-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| line-height: 1.35; | |
| transition: var(--transition-fast); | |
| } | |
| .trending-meta { | |
| font-size: 11px; | |
| color: var(--fg-dim); | |
| margin-top: 4px; | |
| } | |
| /* === Tags Cloud === */ | |
| .tags-cloud { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .tag-pill { | |
| padding: 5px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| font-size: 12px; | |
| color: var(--fg-muted); | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| text-decoration: none; | |
| } | |
| .tag-pill:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| /* === Load More Button === */ | |
| .load-more-wrap { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .btn-load-more { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 14px 40px; | |
| background: transparent; | |
| border: 2px solid var(--accent); | |
| border-radius: 100px; | |
| color: var(--accent); | |
| font-family: var(--font-body); | |
| font-size: 15px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-load-more::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--accent); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.4s ease; | |
| z-index: 0; | |
| } | |
| .btn-load-more:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .btn-load-more span, | |
| .btn-load-more i { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .btn-load-more:hover { | |
| color: #0e0f13; | |
| } | |
| /* === Toast Notification === */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .toast { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-left: 4px solid var(--accent); | |
| border-radius: var(--radius-sm); | |
| padding: 14px 20px; | |
| font-size: 14px; | |
| color: var(--fg); | |
| box-shadow: var(--shadow-elevated); | |
| animation: toastIn 0.4s var(--transition-spring) forwards; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 280px; | |
| } | |
| .toast.leaving { | |
| animation: toastOut 0.3s ease forwards; | |
| } | |
| .toast i { | |
| color: var(--accent); | |
| } | |
| @keyframes toastIn { | |
| from { transform: translateX(120%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| @keyframes toastOut { | |
| to { transform: translateX(120%); opacity: 0; } | |
| } | |
| /* === Scroll Reveal === */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .reveal.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* === Footer === */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 40px 0; | |
| margin-top: 20px; | |
| } | |
| .footer-inner { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .footer-copy { | |
| color: var(--fg-dim); | |
| font-size: 13px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .footer-links a { | |
| color: var(--fg-muted); | |
| text-decoration: none; | |
| font-size: 13px; | |
| transition: var(--transition-fast); | |
| } | |
| .footer-links a:hover { | |
| color: var(--accent); | |
| } | |
| /* === Live Indicator === */ | |
| .live-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--danger); | |
| display: inline-block; | |
| animation: livePulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes livePulse { | |
| 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(224,85,85,0.5); } | |
| 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(224,85,85,0); } | |
| } | |
| /* === Date/Time Bar === */ | |
| .datetime-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 0; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 24px; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .datetime-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| font-size: 13px; | |
| color: var(--fg-muted); | |
| } | |
| .datetime-left .live-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-weight: 600; | |
| color: var(--danger); | |
| } | |
| .datetime-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .weather-widget { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 13px; | |
| color: var(--fg-muted); | |
| } | |
| .weather-widget i { | |
| color: var(--accent); | |
| } | |
| /* === Modal === */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.7); | |
| backdrop-filter: blur(6px); | |
| z-index: 200; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .modal-backdrop.active { | |
| display: flex; | |
| } | |
| .modal { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| max-width: 680px; | |
| width: 100%; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-elevated); | |
| animation: modalIn 0.4s var(--transition-spring); | |
| } | |
| @keyframes modalIn { | |
| from { transform: scale(0.9) translateY(20px); opacity: 0; } | |
| to { transform: scale(1) translateY(0); opacity: 1; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .modal-img { | |
| width: 100%; | |
| aspect-ratio: 16/9; | |
| object-fit: cover; | |
| border-radius: var(--radius-lg) var(--radius-lg) 0 0; | |
| } | |
| .modal-body { | |
| padding: 28px 32px 32px; | |
| } | |
| .modal-category { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1.2px; | |
| color: var(--accent); | |
| margin-bottom: 8px; | |
| } | |
| .modal-title { | |
| font-family: var(--font-display); | |
| font-size: 26px; | |
| font-weight: 900; | |
| line-height: 1.25; | |
| margin-bottom: 12px; | |
| } | |
| .modal-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 13px; | |
| color: var(--fg-dim); | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .modal-text { | |
| font-size: 15px; | |
| line-height: 1.75; | |
| color: var(--fg-muted); | |
| } | |
| .modal-text p { | |
| margin-bottom: 16px; | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| background: rgba(14,15,19,0.7); | |
| backdrop-filter: blur(8px); | |
| border: none; | |
| color: #fff; | |
| font-size: 16px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition-fast); | |
| z-index: 10; | |
| } | |
| .modal-close:hover { | |
| background: var(--danger); | |
| } | |
| /* === Responsive === */ | |
| @media (max-width: 1024px) { | |
| .content-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| position: static; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero-news { | |
| grid-template-columns: 1fr; | |
| min-height: auto; | |
| } | |
| .hero-card.main { | |
| grid-row: auto; | |
| } | |
| .news-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .header-inner { | |
| flex-wrap: wrap; | |
| } | |
| .search-wrapper { | |
| order: 3; | |
| max-width: 100%; | |
| min-width: 100%; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-card-overlay { | |
| padding: 14px; | |
| } | |
| .news-card-body { | |
| padding: 14px 16px 16px; | |
| } | |
| } | |
| /* === Reduced Motion === */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* === Scrollbar === */ | |
| ::-webkit-scrollbar { width: 8px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--fg-dim); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--fg-muted); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Атмосферный фон --> | |
| <div class="bg-atmosphere"></div> | |
| <div class="noise-overlay"></div> | |
| <!-- Шапка --> | |
| <header id="header"> | |
| <div class="container"> | |
| <div class="header-inner"> | |
| <a href="#" class="logo"> | |
| <div class="logo-icon">N</div> | |
| <div class="logo-text">Вести<span>.сегодня</span></div> | |
| </a> | |
| <div class="search-wrapper"> | |
| <input type="text" class="search-input" placeholder="Поиск новостей..." id="searchInput" aria-label="Поиск новостей"> | |
| <i class="fa-solid fa-magnifying-glass search-icon"></i> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="header-built" target="_blank" rel="noopener">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Бегущая строка --> | |
| <div class="ticker-bar"> | |
| <span class="ticker-label"><span class="live-dot"></span> Срочно</span> | |
| <div class="ticker-track" id="tickerTrack"> | |
| <!-- Заполняется JS --> | |
| </div> | |
| </div> | |
| <main> | |
| <div class="container"> | |
| <!-- Дата и время --> | |
| <div class="datetime-bar"> | |
| <div class="datetime-left"> | |
| <span id="currentDate"></span> | |
| <span id="currentTime"></span> | |
| <span class="live-label"><span class="live-dot"></span> Прямой эфир</span> | |
| </div> | |
| <div class="datetime-right"> | |
| <span class="weather-widget"><i class="fa-solid fa-cloud-sun"></i> Москва, +3°C</span> | |
| </div> | |
| </div> | |
| <!-- Категории --> | |
| <nav class="categories-bar" aria-label="Категории новостей"> | |
| <ul class="categories-list" id="categoriesList"> | |
| <!-- Заполняется JS --> | |
| </ul> | |
| </nav> | |
| <!-- Главная новость --> | |
| <section class="hero-news reveal" id="heroSection" aria-label="Главные новости"> | |
| <!-- Заполняется JS --> | |
| </section> | |
| <!-- Контент + Сайдбар --> | |
| <div class="content-layout"> | |
| <section aria-label="Лента новостей"> | |
| <h2 class="section-title">Последние <span class="accent">новости</span></h2> | |
| <p class="section-subtitle">Актуальные события и аналитика</p> | |
| <div class="news-grid" id="newsGrid"> | |
| <!-- Заполняется JS --> | |
| </div> | |
| </section> | |
| <aside class="sidebar"> | |
| <!-- Популярное --> | |
| <div class="sidebar-section reveal"> | |
| <h3 class="sidebar-title"><i class="fa-solid fa-fire"></i> Популярное</h3> | |
| <div id="trendingList"> | |
| <!-- Заполняется JS --> | |
| </div> | |
| </div> | |
| <!-- Облако тегов --> | |
| <div class="sidebar-section reveal"> | |
| <h3 class="sidebar-title"><i class="fa-solid fa-hashtag"></i> Темы</h3> | |
| <div class="tags-cloud" id="tagsCloud"> | |
| <!-- Заполняется JS --> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- Кнопка загрузки --> | |
| <div class="load-more-wrap"> | |
| <button class="btn-load-more" id="loadMoreBtn"> | |
| <span>Загрузить ещё</span> | |
| <i class="fa-solid fa-arrow-down"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Подвал --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-inner"> | |
| <div class="footer-copy">© 2025 Вести.сегодня — Все права защищены</div> | |
| <div class="footer-links"> | |
| <a href="#">О нас</a> | |
| <a href="#">Редакция</a> | |
| <a href="#">Реклама</a> | |
| <a href="#">Контакты</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Модальное окно --> | |
| <div class="modal-backdrop" id="modalBackdrop"> | |
| <div class="modal" id="modal" role="dialog" aria-modal="true"> | |
| <button class="modal-close" id="modalClose" aria-label="Закрыть"><i class="fa-solid fa-xmark"></i></button> | |
| <img class="modal-img" id="modalImg" src="" alt=""> | |
| <div class="modal-body"> | |
| <div class="modal-category" id="modalCategory"></div> | |
| <h2 class="modal-title" id="modalTitle"></h2> | |
| <div class="modal-meta" id="modalMeta"></div> | |
| <div class="modal-text" id="modalText"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Тосты --> | |
| <div class="toast-container" id="toastContainer"></div> | |
| <script> | |
| // === Данные новостей === | |
| const newsData = [ | |
| { | |
| id: 1, | |
| category: 'Политика', | |
| title: 'Государственная дума приняла законопроект о цифровых финансовых активах в третьем чтении', | |
| excerpt: 'Новый регуляторный框架 устанавливает правила выпуска и обращения цифровых активов на территории страны, создавая правовую определённость для инвесторов.', | |
| text: '<p>Государственная дума приняла в третьем, окончательном чтении законопроект о цифровых финансовых активах. Документ устанавливает правовые основы выпуска, учёта и обращения цифровых финансовых активов на территории Российской Федерации.</p><p>По словам председателя комитета по финансовому рынку, новый закон создаст необходимую правовую определённость для участников рынка и защитит права инвесторов. Закон вступит в силу через 90 дней после официального опубликования.</p><p>Ранее Центральный банк высказывал опасения относительно некоторых положений законопроекта, однако в итоговой версии были учтены большинство замечаний регулятора.</p>', | |
| image: 'https://picsum.photos/seed/politics1/800/450.jpg', | |
| author: 'Алексей Петров', | |
| authorAvatar: 'https://picsum.photos/seed/avatar1/48/48.jpg', | |
| date: '15 марта 2025', | |
| time: '14:32', | |
| views: 24800, | |
| comments: 156, | |
| breaking: true, | |
| featured: true | |
| }, | |
| { | |
| id: 2, | |
| category: 'Технологии', | |
| title: 'Российские инженеры представили квантовый процессор нового поколения', | |
| excerpt: 'Разработка позволяет выполнять вычисления, недоступные классическим суперкомпьютерам, открывая новые горизонты для криптографии и моделирования.', | |
| text: '<p>Команда инженеров из российского исследовательского центра представила квантовый процессор нового поколения с рекордным числом кубитов. По заявлению разработчиков, процессор способен решать задачи, которые недоступны даже самым мощным классическим суперкомпьютерам.</p><p>Новый процессор использует оригинальную архитектуру с топологической защитой квантовых состояний, что значительно повышает стабильность вычислений. Презентация состоялась на международной конференции по квантовым технологиям.</p>', | |
| image: 'https://picsum.photos/seed/tech1/800/450.jpg', | |
| author: 'Мария Иванова', | |
| authorAvatar: 'https://picsum.photos/seed/avatar2/48/48.jpg', | |
| date: '15 марта 2025', | |
| time: '12:15', | |
| views: 18300, | |
| comments: 89, | |
| featured: true | |
| }, | |
| { | |
| id: 3, | |
| category: 'Экономика', | |
| title: 'Центральный банк снизил ключевую ставку до 16% годовых', | |
| excerpt: 'Решение принято на фоне замедления инфляции и стабилизации макроэкономических показателей в первом квартале.', | |
| text: '<p>Совет директоров Центрального банка принял решение снизить ключевую ставку на 2 процентных пункта — до 16% годовых. Это первое снижение за последние восемь месяцев.</p><p>В пресс-релизе регулятора отмечается, что инфляционные ожидания снизились, а динамика потребительских цен показывает устойчивую тенденцию к замедлению. Продовольственная инфляция вернулась к значениям, близким к целевым.</p>', | |
| image: 'https://picsum.photos/seed/economy1/800/450.jpg', | |
| author: 'Дмитрий Сидоров', | |
| authorAvatar: 'https://picsum.photos/seed/avatar3/48/48.jpg', | |
| date: '15 марта 2025', | |
| time: '10:45', | |
| views: 31200, | |
| comments: 234, | |
| featured: true | |
| }, | |
| { | |
| id: 4, | |
| category: 'Наука', | |
| title: 'Учёные обнаружили новый вид глубоководных организмов в Марианской впадине', | |
| excerpt: 'Биoluminescentные существа живут на глубине свыше 10 000 метров и обладают уникальными адаптациями к экстремальному давлению.', | |
| text: '<p>Международная экспедиция с участием российских учёных обнаружила в Марианской впадине ранее неизвестный вид глубоководных организмов. Существа были найдены на глубине 10 200 метров и обладают уникальной биолюминесценцией.</p><p>По словам руководителя экспедиции, организмы демонстрируют беспрецедентные адаптации к экстремальному давлению, включая совершенно новый тип клеточных мембран.</p>', | |
| image: 'https://picsum.photos/seed/science1/800/450.jpg', | |
| author: 'Елена Козлова', | |
| authorAvatar: 'https://picsum.photos/seed/avatar4/48/48.jpg', | |
| date: '14 марта 2025', | |
| time: '18:20', | |
| views: 15600, | |
| comments: 67 | |
| }, | |
| { | |
| id: 5, | |
| category: 'Культура', | |
| title: 'Эрмитаж открыл первую в мире выставку искусственного интеллекта в классических залах', | |
| excerpt: 'Экспозиция объединяет работы алгоритмического искусства с шедеврами прошлых веков, создавая диалог эпох.', | |
| text: '<p>Государственный Эрмитаж представил беспрец |