html {
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
}
body {
min-height: 100vh;
color: #fff;
overflow-x: hidden;
background: #000;
}
body::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)),
url("/images/background.png") center / cover no-repeat;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
pointer-events: none;
z-index: -1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
min-height: 100vh;
background: url("/images/background.png") center / cover fixed no-repeat;
color: #fff;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.68);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
pointer-events: none;
z-index: -1;
}
.glass-nav {
position: fixed;
top: 24px;
left: 200px;
right: 200px;
z-index: 1000;
background: rgba(20, 22, 28, 0.48);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.nav-inner {
height: 74px;
padding: 0 26px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.logo {
display: flex;
align-items: center;
justify-self: start;
}
.logo img {
height: 46px;
display: block;
}
.nav-menu {
display: contents;
}
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
grid-column: 2;
}
.nav-links a {
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 11px 18px;
border-radius: 999px;
transition: 0.25s ease;
}
.nav-links a:hover,
.nav-links a.active {
background: rgba(255, 255, 255, 0.1);
}
.right-side {
display: flex;
align-items: center;
justify-content: flex-end;
grid-column: 3;
}
.socials {
display: flex;
align-items: center;
gap: 10px;
}
.socials a {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
transition: 0.25s ease;
}
.socials a:hover {
background: rgba(255, 255, 255, 0.1);
}
.socials img {
width: 21px;
height: 21px;
object-fit: contain;
display: block;
}
.hamburger {
display: none;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
cursor: pointer;
place-items: center;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
width: 18px;
height: 2px;
background: #ffffff;
border-radius: 999px;
transition: 0.25s ease;
}
.hamburger span {
position: relative;
}
.hamburger span::before,
.hamburger span::after {
content: "";
position: absolute;
left: 0;
}
.hamburger span::before {
top: -6px;
}
.hamburger span::after {
top: 6px;
}
.hamburger.active span {
background: transparent;
}
.hamburger.active span::before {
top: 0;
transform: rotate(45deg);
}
.hamburger.active span::after {
top: 0;
transform: rotate(-45deg);
}
.page {
max-width: 1180px;
margin: 0 auto;
padding: 150px 24px 90px;
}
.page-head {
margin-bottom: 34px;
}
.page-head span {
display: inline-block;
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.page-head h1 {
font-size: clamp(44px, 7vw, 82px);
letter-spacing: -3px;
margin-bottom: 12px;
}
.page-head p {
max-width: 660px;
color: rgba(255, 255, 255, 0.72);
font-size: 18px;
line-height: 1.6;
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.news-card {
min-height: 100%;
overflow: hidden;
border-radius: 28px;
text-decoration: none;
color: #ffffff;
background: rgba(20, 22, 28, 0.55);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.3);
transition: 0.25s ease;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.news-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.09);
}
.news-image {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
background: rgba(255, 255, 255, 0.08);
}
.news-content {
padding: 20px;
}
.news-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.66);
font-size: 13px;
font-weight: 700;
}
.news-source {
color: #ffffff;
}
.news-title {
font-size: 21px;
line-height: 1.2;
margin-bottom: 10px;
letter-spacing: -0.4px;
}
.news-summary {
color: rgba(255, 255, 255, 0.72);
line-height: 1.55;
font-size: 15px;
}
.status {
grid-column: 1 / -1;
padding: 26px;
border-radius: 22px;
background: rgba(20, 22, 28, 0.55);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.article-page {
max-width: 920px;
margin: 0 auto;
padding: 150px 24px 80px;
}
.back-link {
display: inline-block;
margin-bottom: 26px;
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
font-weight: 700;
}
.back-link:hover {
color: #ffffff;
}
.article-card {
overflow: hidden;
border-radius: 34px;
background: rgba(20, 22, 28, 0.58);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.article-image {
width: 100%;
max-height: 480px;
object-fit: cover;
display: block;
}
.article-inner {
padding: clamp(24px, 5vw, 46px);
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.66);
font-size: 14px;
font-weight: 700;
}
.article-meta strong {
color: #ffffff;
}
.article-title {
font-size: clamp(34px, 6vw, 62px);
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 18px;
}
.article-summary {
color: rgba(255, 255, 255, 0.76);
font-size: 19px;
line-height: 1.65;
margin-bottom: 34px;
}
.article-body h2 {
font-size: clamp(26px, 4vw, 36px);
margin: 34px 0 14px;
letter-spacing: -1px;
}
.article-body h3 {
font-size: 24px;
margin: 28px 0 12px;
}
.article-body p {
color: rgba(255, 255, 255, 0.82);
font-size: 18px;
line-height: 1.75;
margin-bottom: 18px;
}
.article-source-link {
display: inline-block;
margin-top: 28px;
padding: 14px 24px;
border-radius: 999px;
color: #ffffff;
text-decoration: none;
font-weight: 800;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.14);
transition: 0.25s ease;
}
.article-source-link:hover {
background: rgba(255, 255, 255, 0.16);
}
@media (max-width: 1100px) {
.glass-nav {
left: 40px;
right: 40px;
}
.news-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 800px) {
.glass-nav {
left: 18px;
right: 18px;
border-radius: 32px;
}
.nav-inner {
height: 72px;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 42px;
}
.hamburger {
display: grid;
z-index: 1002;
}
.nav-menu {
position: fixed;
top: 106px;
left: 18px;
right: 18px;
z-index: 1001;
display: block;
padding: 28px 20px;
border-radius: 32px;
overflow: hidden;
background: rgba(20, 22, 28, 0.62);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transform: translateY(-12px) scale(0.98);
pointer-events: none;
transition: 0.25s ease;
}
.nav-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.nav-links,
.right-side {
position: relative;
z-index: 2;
}
.nav-links {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.nav-links a {
width: 100%;
text-align: center;
padding: 13px 14px;
}
.right-side {
justify-content: center;
}
.socials {
justify-content: center;
}
.page {
padding-top: 140px;
}
.article-page {
padding-top: 140px;
}
}
@media (max-width: 650px) {
.news-grid {
grid-template-columns: 1fr;
}
}