/* ============================================================ VALKYRIE.OOO — landing / under construction Two themes: 1·V (Первомай) and 9·V (День Победы) Switched by [data-theme] on ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Russo+One&family=PT+Sans:wght@400;700&family=PT+Serif:ital@0;1&display=swap'); /* ─────────── Theme: 1·V Первомай (default) ─────────── */ :root, :root[data-theme="mayday"] { --paper: #f1e7d0; --paper-dark: #e3d3a8; --cream: #fdf9ec; --red: #be1e2d; --red-deep: #8e1620; --red-bright: #d8242f; --black: #1a1715; --ink: #2b2520; --ochre: #d4a017; --gold: #e8b923; /* caution tape: ochre + black */ --tape-a: var(--ochre); --tape-b: var(--black); /* image post-processing: bright */ --img-filter: contrast(1.05) saturate(1.04); /* hero ::before/::after triple-stripe colors */ --rule-mid: var(--red); --rule-side: var(--ochre); } /* ─────────── Theme: 9·V День Победы ─────────── */ :root[data-theme="victory"] { --paper: #efe2bb; --paper-dark: #d8c388; --cream: #f4e7c2; --red: #8a1620; --red-deep: #5a0d10; --red-bright: #a01b25; --black: #14110d; --ink: #2a221a; --ochre: #a87c11; --gold: #e8b500; /* caution tape: gvardeyskaya / Georgian ribbon — orange + black */ --tape-a: #f08a00; --tape-b: #14110d; /* image post-processing: subtle warm sepia tilt */ --img-filter: contrast(1.05) saturate(0.95) sepia(0.08); /* hero ::before/::after triple-stripe colors */ --rule-mid: var(--gold); --rule-side: var(--red); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; } body { background: var(--paper); background-image: /* faint constructivist diagonal */ linear-gradient(135deg, transparent 0 49.6%, rgba(190,30,45,0.04) 49.6% 50.4%, transparent 50.4% 100%), /* paper grain */ radial-gradient(ellipse at 20% 25%, rgba(0,0,0,0.05), transparent 55%), radial-gradient(ellipse at 85% 75%, rgba(190,30,45,0.06), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(212,160,23,0.04), transparent 70%); color: var(--ink); font-family: "PT Sans", "Liberation Sans", system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color 0.4s ease, color 0.4s ease; } img { display: block; max-width: 100%; height: auto; } /* wraps avif+webp; treat it as transparent to layout so the inner is positioned as if it were a direct child. Toggling [hidden] on still hides the whole subtree (display:none beats contents). */ picture { display: contents; } /* Hide [hidden] reliably (some browsers leave it visible if display is set) */ [hidden] { display: none !important; } /* ─────────── Caution tape strips (top/bottom of page) ─────────── */ .caution { height: 14px; background: repeating-linear-gradient( -45deg, var(--tape-a) 0 18px, var(--tape-b) 18px 36px ); transition: background 0.4s ease; } /* Victory: George ribbon = horizontal stripes, not diagonal */ :root[data-theme="victory"] .caution { background: repeating-linear-gradient( 90deg, var(--tape-a) 0 22px, var(--tape-b) 22px 36px ); height: 16px; } /* ─────────── Top band: brand + theme switch + date ─────────── */ .band--top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 2rem; background: var(--black); color: var(--cream); font-family: "Russo One", "PT Sans", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 4px solid var(--red); transition: background-color 0.4s ease, border-color 0.4s ease; } :root[data-theme="victory"] .band--top { border-bottom: 4px solid var(--gold); box-shadow: inset 0 -8px 0 rgba(232, 181, 0, 0.08); } .brand { font-size: 1.1rem; color: var(--cream); } .brand__dot { color: var(--red-bright); font-weight: 900; } :root[data-theme="victory"] .brand__dot { color: var(--gold); } .date { font-size: 0.85rem; opacity: 0.85; letter-spacing: 0.25em; } /* ─────────── Theme switch pill ─────────── */ .theme-switch { display: inline-flex; border: 1.5px solid rgba(253, 249, 236, 0.3); border-radius: 999px; overflow: hidden; font-family: "Russo One", sans-serif; font-size: 0.78rem; letter-spacing: 0.2em; margin-left: auto; margin-right: 1rem; flex-shrink: 0; } .theme-switch__btn { appearance: none; background: transparent; border: none; color: var(--cream); opacity: 0.55; padding: 0.45rem 0.95rem; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: uppercase; transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease; } .theme-switch__btn:hover { opacity: 0.9; } .theme-switch__btn.is-active { background: var(--red); opacity: 1; } :root[data-theme="victory"] .theme-switch__btn.is-active { background: var(--gold); color: var(--black); } .theme-switch__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ─────────── Motto banner ─────────── */ .motto { background: var(--red); color: var(--cream); text-align: center; padding: 2.2rem 1rem; font-family: "Russo One", sans-serif; position: relative; overflow: hidden; transition: background-color 0.4s ease; } :root[data-theme="victory"] .motto { background: linear-gradient(180deg, rgba(232,181,0,0.08), transparent 30%, transparent 70%, rgba(232,181,0,0.08)), var(--red-deep); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); } .motto::before, .motto::after { content: ''; position: absolute; top: 0; width: 50px; height: 100%; background: repeating-linear-gradient( 90deg, var(--cream) 0 4px, transparent 4px 14px ); opacity: 0.35; } .motto::before { left: 0; } .motto::after { right: 0; transform: scaleX(-1); } .motto__line { font-size: clamp(1.2rem, 4vw, 2.8rem); letter-spacing: 0.18em; font-weight: 400; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4em; } .motto__word { white-space: nowrap; } .motto__sep { color: var(--gold); font-weight: 900; margin: 0 0.2em; transform: translateY(-0.05em); } /* ─────────── Trio of hero posters ─────────── */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; padding: 2.2rem 1.6rem; max-width: 1400px; margin: 0 auto; } .trio__poster { position: relative; background: var(--cream); border: 6px solid var(--black); outline: 3px solid var(--paper); outline-offset: -10px; box-shadow: 0 4px 0 var(--red-deep), 0 16px 28px rgba(0,0,0,0.18); overflow: hidden; transition: transform 0.4s ease, border-color 0.4s ease; } :root[data-theme="victory"] .trio__poster { border-color: var(--black); box-shadow: 0 4px 0 var(--gold), 0 16px 28px rgba(0,0,0,0.22); } .trio__poster:hover { transform: translateY(-3px) rotate(-0.4deg); } .trio__poster img { width: 100%; filter: var(--img-filter); transition: filter 0.5s ease; } .trio__poster figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: var(--black); color: var(--cream); text-align: center; font-family: "Russo One", sans-serif; font-size: clamp(1rem, 2.4vw, 1.7rem); padding: 0.55rem 0.5rem 0.6rem; letter-spacing: 0.35em; border-top: 4px solid var(--red); } :root[data-theme="victory"] .trio__poster figcaption { border-top: 4px solid var(--gold); color: var(--gold); } /* ─────────── Hero / "СТРОИТСЯ" ─────────── */ .hero { position: relative; background: var(--paper-dark); padding: 4.5rem 1rem 3.5rem; text-align: center; border-top: 4px double var(--black); border-bottom: 4px double var(--black); overflow: hidden; } .hero::before, .hero::after { content: ''; position: absolute; top: 50%; width: 18%; height: 6px; background: var(--rule-mid); transform: translateY(-50%); box-shadow: 0 12px 0 var(--rule-side), 0 -12px 0 var(--rule-side); } .hero::before { left: 2%; } .hero::after { right: 2%; } .hero__inner { max-width: 1100px; margin: 0 auto; position: relative; } .hero__eyebrow { font-family: "Russo One", sans-serif; font-size: 0.95rem; letter-spacing: 0.6em; text-transform: uppercase; color: var(--red-deep); margin-bottom: 0.6rem; } .hero__title { font-family: "Russo One", sans-serif; line-height: 0.95; text-transform: uppercase; } .hero__small { display: block; font-size: clamp(1.4rem, 4.5vw, 3rem); letter-spacing: 0.4em; color: var(--ink); } .hero__big { display: block; font-size: clamp(3.5rem, 14vw, 9.5rem); letter-spacing: 0.04em; color: var(--red); text-shadow: 4px 4px 0 var(--ochre), 8px 8px 0 var(--black); margin-top: 0.4rem; } :root[data-theme="victory"] .hero__big { color: var(--red-deep); text-shadow: 4px 4px 0 var(--gold), 8px 8px 0 var(--black); } .hero__sub { margin-top: 1.6rem; font-size: clamp(0.9rem, 1.6vw, 1.05rem); letter-spacing: 0.25em; text-transform: uppercase; font-weight: 700; color: var(--ink); } .stamp { position: absolute; top: -2.5rem; right: 4%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; border: 4px double var(--red-deep); border-radius: 50%; color: var(--red-deep); font-family: "Russo One", sans-serif; text-transform: uppercase; transform: rotate(-12deg); background: rgba(241,231,208,0.4); letter-spacing: 0.18em; opacity: 0.85; filter: blur(0.3px); } :root[data-theme="victory"] .stamp { border: 4px double var(--gold); color: var(--gold); background: rgba(20, 17, 13, 0.55); box-shadow: 0 0 20px rgba(0,0,0,0.18); } .stamp__line { font-size: 1rem; } .stamp__date { font-size: 0.85rem; margin-top: 0.4rem; letter-spacing: 0.2em; font-family: "PT Serif", serif; font-style: italic; } :root[data-theme="victory"] .stamp__line, :root[data-theme="victory"] .stamp__date { font-size: 1.6rem; font-family: "Russo One", sans-serif; font-style: normal; letter-spacing: 0.18em; margin-top: 0.2rem; } :root[data-theme="victory"] .stamp__date { border-top: 1px solid var(--gold); padding-top: 0.3rem; } @media (max-width: 720px) { .stamp { display: none; } } /* ─────────── Mosaic gallery ─────────── */ .mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: 1rem; padding: 2.5rem 1.6rem; max-width: 1400px; margin: 0 auto; } .m { position: relative; border: 5px solid var(--black); outline: 2px solid var(--paper-dark); outline-offset: -8px; background: var(--cream); overflow: hidden; grid-column: span 2; grid-row: span 1; box-shadow: 0 3px 0 var(--red-deep), 0 12px 18px rgba(0,0,0,0.15); transition: transform 0.35s ease, box-shadow 0.4s ease; } :root[data-theme="victory"] .m { box-shadow: 0 3px 0 var(--gold), 0 12px 18px rgba(0,0,0,0.22); } .m:hover { transform: translateY(-3px); } .m img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); transition: filter 0.5s ease; } .m figcaption { position: absolute; bottom: 8px; left: 8px; right: 8px; padding: 0.45rem 0.6rem; background: var(--black); color: var(--cream); font-family: "Russo One", sans-serif; font-size: clamp(0.7rem, 1.1vw, 0.95rem); letter-spacing: 0.32em; text-transform: uppercase; text-align: center; border-top: 3px solid var(--red); pointer-events: none; text-shadow: 0 1px 0 rgba(0,0,0,0.3); } :root[data-theme="victory"] .m figcaption { border-top: 3px solid var(--gold); color: var(--gold); } .m--wide { grid-column: span 4; } .m--tall { grid-column: span 2; grid-row: span 2; } @media (max-width: 1024px) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; } .m { grid-column: span 2; } .m--wide { grid-column: span 4; } .m--tall { grid-column: span 2; grid-row: span 2; } } @media (max-width: 640px) { .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .m, .m--wide, .m--tall { grid-column: span 2; grid-row: span 1; } } /* ─────────── Footer band ─────────── */ .band--bottom { display: flex; flex-direction: column; align-items: center; padding: 3rem 1rem 2.5rem; background: radial-gradient(ellipse at top, rgba(190,30,45,0.18), transparent 60%), var(--black); color: var(--cream); border-top: 6px solid var(--red); text-align: center; position: relative; transition: border-color 0.4s ease; } :root[data-theme="victory"] .band--bottom { background: radial-gradient(ellipse at top, rgba(232, 181, 0, 0.18), transparent 60%), var(--black); border-top: 6px solid var(--gold); } .band--bottom::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 80px; height: 18px; background: var(--red); clip-path: polygon(0 0, 100% 0, 50% 100%); } :root[data-theme="victory"] .band--bottom::before { background: var(--gold); } .emblem { width: 130px; height: auto; margin-bottom: 1.2rem; filter: brightness(0.95) contrast(1.05); opacity: 0.95; transition: filter 0.5s ease; } :root[data-theme="victory"] .emblem { filter: brightness(0.92) contrast(1.08) sepia(0.15) saturate(1.1); } .footer__motto { font-family: "Russo One", sans-serif; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: 0.22em; color: var(--cream); } .footer__line { margin-top: 0.6rem; font-family: "Russo One", sans-serif; letter-spacing: 0.25em; color: var(--red-bright); font-size: clamp(0.75rem, 1.4vw, 0.95rem); text-transform: uppercase; } :root[data-theme="victory"] .footer__line { color: var(--gold); } .footer__sub { margin-top: 1rem; opacity: 0.5; font-size: 0.78rem; letter-spacing: 0.4em; font-family: "PT Serif", serif; font-style: italic; } /* ─────────── Mobile niceties ─────────── */ @media (max-width: 768px) { .band--top { padding: 0.8rem 1rem; gap: 0.6rem; flex-wrap: wrap; } .brand { font-size: 0.95rem; } .date { font-size: 0.7rem; } .theme-switch { font-size: 0.7rem; margin-right: 0.4rem; } .theme-switch__btn { padding: 0.35rem 0.65rem; } .trio { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.4rem; } .hero { padding: 3rem 1rem 2.5rem; } .hero::before, .hero::after { display: none; } } /* ─────────── Reduced motion ─────────── */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }