/* ========================================================================== JetNews — global.css Light theme: black text, white background, blue accent Place this AFTER the Tailwind CDN script in . ========================================================================== */ :root{ /* Palette */ --bg: #ffffff; --text: #0b0f14; --muted: #475569; /* secondary text */ --muted-2: #64748b; /* tertiary text */ --border: #e5e7eb; /* light borders */ --surface: #ffffff; /* cards / panels */ --surface-alt: #f8fafc; /* subtle fills */ /* Accent (blue) */ --accent: #2563eb; /* blue-600 */ --accent-700: #1d4ed8; /* blue-700 */ --accent-100: #dbeafe; /* blue-100 */ /* Effects */ --radius: 16px; --ring: rgba(2, 6, 23, .10); /* soft outline */ --ring-strong: rgba(2, 6, 23, .16); /* stronger outline */ } /* Base */ html, body{ background: var(--bg); color: var(--text); } *{ transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } ::selection{ background: var(--accent-100); color: var(--text); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* Links */ a{ color: var(--accent); text-decoration-thickness: .06em; text-underline-offset: .2em; } a:hover{ text-decoration: underline; } /* Media */ img{ display: block; max-width: 100%; height: auto; } /* Header / Footer shells from HTML */ header, .site-header{ background: rgba(255,255,255,.85); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); } footer{ border-top: 1px solid var(--border); color: var(--muted-2); } /* ---------- Tailwind class overrides mapped to light theme ---------- */ /* Backgrounds used across pages */ .bg-neutral-950{ background-color: var(--bg) !important; } .bg-neutral-900{ background-color: var(--surface) !important; } .bg-neutral-950\/80{ background-color: rgba(255,255,255,.85) !important; } /* glassy header */ .bg-white\/10{ background-color: var(--surface-alt) !important; } .bg-white\/15{ background-color: var(--surface-alt) !important; } .hover\:bg-white\/15:hover{ background-color: var(--surface-alt) !important; } /* Text colors */ .text-neutral-100, .text-white{ color: var(--text) !important; } .text-neutral-300{ color: var(--muted) !important; } .text-neutral-400{ color: var(--muted-2) !important; } .hover\:text-white:hover{ color: var(--text) !important; } /* prevent invisible text on white bg */ /* Borders / rings */ .border-neutral-900, .border-neutral-800{ border-color: var(--border) !important; } .ring-white\/5{ --tw-ring-color: var(--ring) !important; } .ring-white\/10{ --tw-ring-color: var(--ring-strong) !important; } /* Forms injected by JS (filters) */ select, input, textarea{ background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: .75rem; padding: .5rem .75rem; } select:focus, input:focus, textarea:focus{ outline: 2px solid var(--accent-100); border-color: var(--accent); } input[type="checkbox"], input[type="radio"], progress{ accent-color: var(--accent); } /* JS-created combos often use these Tailwind classes: normalize them */ .bg-neutral-950{ background: #fff !important; color: var(--text) !important; } .border-neutral-800{ border-color: var(--border) !important; } .disabled\:opacity-50[disabled]{ opacity: .5 !important; } /* ---------- Site-specific elements ---------- */ /* Top nav */ #top-nav{ color: var(--muted); } #top-nav a{ color: inherit; text-decoration: none; } #top-nav a.active, nav a[aria-current="page"]{ color: var(--accent); font-weight: 600; } /* Titles / sections */ #news-title{ color: var(--text); } .section-alt, #hero{ background: var(--surface-alt); border: 1px solid var(--border); border-radius: 1rem; } /* Cards (opt-in via .card class) */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* Buttons (opt-in utility) */ .btn{ display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1rem; border-radius: .75rem; border: 1px solid #bfdbfe; background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .05s ease, box-shadow .2s ease, background .2s ease; } .btn:hover{ background: var(--accent-700); text-decoration: none; } .btn:active{ transform: translateY(1px); } /* Badges / pills */ .badge{ display: inline-block; padding: .25rem .5rem; border-radius: 999px; background: #eff6ff; color: var(--accent-700); border: 1px solid #bfdbfe; } /* Hero slider dots (rendered by JS as bg-white / bg-white/30) */ #hero-dots .bg-white{ background: var(--accent) !important; } #hero-dots .bg-white\/30{ background: rgba(37,99,235,.35) !important; } /* Utility containers (keeps your existing layout widths/padding) */ .container, .max-w-7xl{ max-width: 80rem; margin-inline: auto; } .px-3{ padding-inline: .75rem; } @media (min-width:640px){ .sm\:px-6{ padding-inline: 1.5rem; } } @media (min-width:1024px){ .lg\:px-10{ padding-inline: 2.5rem; } } /* --- HERO (JetNews) ---------------------------------------------------- */ #hero{ padding: 1rem; border-radius: 1rem; } #hero .hero-shell{ position: relative; } .hero-card{ position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* Слайды: плавное перекрытие (fade) */ .hero-slide{ position: absolute; inset: 0; opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .45s ease; pointer-events: none; } .hero-slide.is-active{ opacity: 1; transform: scale(1); pointer-events: auto; } /* Медиа/оверлей/контент */ .hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,.00) 0%, rgba(2,6,23,.45) 55%, rgba(2,6,23,.70) 100%); } .hero-content{ position: absolute; left: 1rem; right: 1rem; bottom: 1rem; } @media (min-width:1024px){ .hero-content{ left: 2rem; right: 2rem; bottom: 2rem; } } /* Навигация */ .hero-nav{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: .5rem; } .hero-btn{ display:flex; align-items:center; justify-content:center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(2,6,23,.10); } .hero-btn svg{ width: 18px; height: 18px; } .hero-btn:hover{ background:#fff; } .hero-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* Точки */ .hero-dots{ position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: .5rem; } .hero-dot{ width: 9px; height: 9px; border-radius:999px; background: rgba(37,99,235,.35); border: 1px solid #bfdbfe; } .hero-dot[aria-selected="true"]{ background: var(--accent); } /* Бейдж */ .hero-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius:999px; background:#eff6ff; color:var(--accent-700); border:1px solid #bfdbfe; font-size:.8125rem; font-weight:600; } /* Кнопка "Подробнее" */ .hero-cta{ display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:.75rem; border:1px solid #bfdbfe; background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); } .hero-cta:hover{ text-decoration:none; background:var(--accent-700); }