@import url('/fonts.css'); :root { /* escapefromtarkov.com palette (cool neutral near-black, steel gray-cyan text) — accent stays our teal-green identity */ --bg0: #131414; /* EFT page black */ --bg1: #1a1c1c; /* panel base */ --bg2: #202121; /* insets / fields */ --bg3: #2e2f2f; /* hover */ --line: #3a3e3e; /* cool gray border (EFT #404444 family) */ --line2: #4d5252; /* stronger border */ --txt: #c2cdcd; /* steel gray-cyan body text (EFT) */ --muted: #858d8d; /* EFT muted gray */ --accent: #45c08f; /* EFT roadmap teal-green */ --accent-ink: #06140e; /* dark text on accent fills */ --accent-rgb: 69, 192, 143; /* accent as RGB triple for rgba() tints */ --accent2: #a8996f; /* tan / khaki (secondary bars) */ --ok: #7fd0a8; /* mint green */ --err: #d4392e; /* EFT alert red */ --r: 2px; --cut: 10px; /* chamfered corner size (EFT clip-path signature) */ /* EFT-style chamfer: top-left + bottom-right corners cut */ --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); --font-head: 'Bender', 'Segoe UI', system-ui, sans-serif; --font-body: 'Bender', 'Segoe UI', system-ui, sans-serif; } /* per-tool accent themes (set on for generators, on .tool-cell for landing cards) */ .theme-red { --accent: #e5484d; --accent-ink: #ffffff; --accent-rgb: 229, 72, 77; } .theme-purple { --accent: #a974e0; --accent-ink: #ffffff; --accent-rgb: 169, 116, 224; } .theme-yellow { --accent: #e8c14a; --accent-ink: #1c1500; --accent-rgb: 232, 193, 74; } .theme-white { --accent: #ffffff; --accent-ink: #11150f; --accent-rgb: 255, 255, 255; } .theme-spotify { --accent: #1db954; --accent-ink: #06140e; --accent-rgb: 29, 185, 84; } * { box-sizing: border-box; } /* ---- Eigener Tarkov-Cursor (site-weit; OBS-Overlays laden diese CSS nicht) -- */ html { cursor: url('/cursors/normal.cur') 0 0, auto; } a[href], button, .btn, [role="button"], input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="color"], input[type="range"], select, summary, label.chk, .lang-switch button, .tool-switch a, .rev-nav, .rev-dot, .ftr-mapbtn, .cookie-ok, .admin-navbtn { cursor: url('/cursors/link.cur') 0 0, pointer; } /* Text-Cursor in Eingabefeldern erhalten */ input[type="text"], input[type="number"], input[type="search"], textarea { cursor: text; } body { margin: 0; font-family: var(--font-body); color: var(--txt); min-height: 100vh; display: flex; flex-direction: column; background: /* faint diagonal hazard stripes */ repeating-linear-gradient(135deg, rgba(var(--accent-rgb),0.018) 0 2px, transparent 2px 22px), radial-gradient(1200px 600px at 50% -15%, #1c1f1f 0%, var(--bg0) 60%), var(--bg0); } /* headings use Bender Bold Italic (the only italic face that ships) */ h1, h2, h3, .brand, .hero h1, .pc-name { font-style: italic; } /* grain/noise overlay */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* grunge scratches (streaky turbulence, like the EFT page texture) */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0.6 0.6 0 -0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); transform: rotate(0.001deg); /* force own layer */ } body > * { position: relative; z-index: 1; } /* ---- beta corner ribbon (injected by auth.js) ---- */ .beta-ribbon { position: fixed; top: 0; left: 0; z-index: 60; width: 190px; text-align: center; pointer-events: none; padding: 5px 0; font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #fff; background: linear-gradient(135deg, #e5484d, #b3151a); box-shadow: 0 3px 10px rgba(0,0,0,0.45); border-top: 1px solid rgba(255,255,255,0.28); border-bottom: 1px solid rgba(0,0,0,0.3); transform: translate(-52px, 34px) rotate(-45deg); } @media (max-width: 680px) { .beta-ribbon { width: 160px; font-size: 10px; letter-spacing: 1.5px; transform: translate(-50px, 26px) rotate(-45deg); } } /* ---- app header bar ---- */ .appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 132px; background: linear-gradient(180deg, var(--bg1), rgba(19, 20, 20, 0.92)); border-bottom: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 6px 18px rgba(0,0,0,0.25); } .brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--font-head); text-decoration: none; color: var(--txt); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; } .brand span { color: var(--accent); } .brand-logo { height: 42px; width: auto; display: block; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .brand:hover { opacity: 0.92; } .appbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* header Discord = EFT steel button (icon + label), matches .btn.primary */ .appbar-discord { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 13px; padding: 8px 15px; text-decoration: none; } .appbar-discord img { width: 17px; height: 17px; display: block; flex: none; image-rendering: pixelated; } .appbar-discord span { line-height: 1; } @media (max-width: 680px) { .appbar-discord { padding: 7px 12px; font-size: 12px; } } @media (max-width: 680px) { .appbar { flex-wrap: wrap; gap: 10px; padding: 10px 12px 10px 104px; } .brand { font-size: 16px; } } /* ---- tool / lang switches (live in the header) ---- */ .tool-switch, .lang-switch { display: inline-flex; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 2px; } .tool-switch a { text-decoration: none; color: var(--muted); font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r); transition: 0.12s; } .tool-switch a:hover { color: var(--txt); } .tool-switch a.active { background: var(--accent); color: var(--accent-ink); } .lang-switch button { background: transparent; border: 0; color: var(--muted); font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 1px; padding: 5px 11px; border-radius: var(--r); cursor: pointer; transition: 0.12s; } .lang-switch button:hover { color: var(--txt); } .lang-switch button.active { background: var(--accent); color: var(--accent-ink); } /* ---- auth box (in header) ---- */ .auth-box { display: flex; align-items: center; gap: 10px; } .auth-box .auth-btn { display: inline-flex; align-items: center; background: #5865f2; color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 600; letter-spacing: 0.5px; font-size: 13px; padding: 7px 14px; border-radius: 0; transition: 0.13s; white-space: nowrap; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .auth-box .auth-btn:hover { filter: brightness(1.1); } .auth-menu { position: relative; } .auth-box .auth-user { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: var(--r); padding: 4px 10px 4px 4px; font-size: 13px; font-family: var(--font-body); } .auth-box .auth-user:hover { border-color: var(--accent); } .auth-box .auth-user img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line2); } .auth-box .auth-user .caret { color: var(--muted); font-size: 10px; } .auth-dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 150px; background: var(--bg1); border: 1px solid var(--line2); border-radius: var(--r); display: flex; flex-direction: column; box-shadow: 0 8px 22px rgba(0,0,0,0.5); overflow: hidden; } .auth-dropdown a { color: var(--txt); text-decoration: none; padding: 9px 14px; font-size: 13px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.5px; } .auth-dropdown a:hover { background: var(--bg3); color: var(--accent); } /* ---- hero (page title block) ---- */ .hero { position: relative; text-align: center; padding: 30px 16px 14px; } .hero::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1164px, calc(100% - 36px)); height: 1px; background: linear-gradient(90deg, transparent, var(--line2) 20%, var(--accent) 50%, var(--line2) 80%, transparent); opacity: 0.5; } .hero h1 { margin: 0; font-family: var(--font-head); font-size: 34px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; /* EFT metallic headline: silver → steel gradient text */ color: #dee9e9; background: linear-gradient(180deg, #eef3f3 0%, #ccd7d7 45%, #8d9e9e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)); } .hero h1 span { color: var(--accent); -webkit-text-fill-color: var(--accent); } .hero h1 a { color: inherit; text-decoration: none; } .hero h1 a:hover { opacity: 0.9; } .sub { color: var(--muted); margin: 8px 0 0; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; } /* ---- sticky footer: main grows, footer sits at the bottom ---- */ body > main { flex: 1 0 auto; } .foot { flex: none; margin-top: auto; } /* ---- layout ---- */ .layout { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 18px; max-width: 1200px; width: 100%; margin: 22px auto; padding: 0 18px; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } } .panel { position: relative; background: linear-gradient(180deg, rgba(var(--accent-rgb),0.03), transparent 90px), linear-gradient(180deg, var(--bg1), var(--bg0)); border: 1px solid var(--line); border-radius: 0; padding: 20px 20px 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); clip-path: var(--chamfer); } /* accent edge along the chamfered corners (EFT cut-corner signature) */ .panel::before, .panel::after { content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; opacity: 0.8; } .panel::before { top: 0; left: 0; background: linear-gradient(135deg, var(--accent) 11px, transparent 11.5px); } .panel::after { bottom: 0; right: 0; background: linear-gradient(315deg, var(--accent) 11px, transparent 11.5px); } h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.03) 55%, transparent); border-left: 3px solid var(--accent); border-bottom: 1px solid var(--line); padding: 9px 12px; margin: 24px 0 15px; } h2:first-of-type { margin-top: 2px; } .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; } .row { display: flex; gap: 8px; align-items: stretch; } input[type="text"], input[type="number"], select { background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: var(--r); padding: 10px 12px; font-size: 14px; font-family: var(--font-body); width: 100%; transition: border-color 0.12s, box-shadow 0.12s; } input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.2); } input[readonly] { color: var(--muted); font-family: ui-monospace, 'Consolas', monospace; font-size: 12px; } select { width: auto; cursor: pointer; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.5px; } .btn { background: linear-gradient(180deg, var(--bg3), var(--bg2)); border: 1px solid var(--line2); color: var(--txt); border-radius: 0; padding: 10px 18px; cursor: pointer; font-family: var(--font-head); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; transition: 0.13s; /* EFT chamfered button corners */ clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); } .btn:hover { border-color: var(--accent); color: #fff; background: var(--bg3); } /* EFT steel button ("Kaufen"/"Upgrade" on escapefromtarkov.com): light metal gradient + dark ink, hover shifts into icy blue steel */ .btn.primary { background: linear-gradient(180deg, #e9f1f1 0%, #dee9e9 31%, #a0a8a8 100%); color: #131414; border-color: #b5ced4; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(255,255,255,0.35); } .btn.primary:hover { background: linear-gradient(180deg, #dee9e9 0%, #d0e4ea 31%, #7eaab7 100%); color: #131414; border-color: #b5ced4; filter: none; } .btn.danger { background: var(--err); color: #fff; border-color: var(--err); box-shadow: 0 0 0 1px rgba(212,57,46,0.25), 0 0 14px rgba(212,57,46,0.16); } .btn.danger:hover { filter: brightness(1.08); color: #fff; background: var(--err); border-color: var(--err); } /* --- shared confirmation modal (confirm-modal.js) ------------------------- */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--font-body); } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(2px); animation: modal-fade 0.14s ease-out; } .modal-panel { position: relative; z-index: 1; width: min(420px, 100%); background: linear-gradient(180deg, var(--bg1), var(--bg0)); border: 1px solid var(--line2); border-radius: 0; padding: 22px 22px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); clip-path: var(--chamfer); animation: modal-pop 0.16s ease-out; } /* accent edge along the chamfered corners (matches .panel) */ .modal-panel::before, .modal-panel::after { content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; opacity: 0.8; } .modal-panel::before { top: 0; left: 0; background: linear-gradient(135deg, var(--accent) 11px, transparent 11.5px); } .modal-panel::after { bottom: 0; right: 0; background: linear-gradient(315deg, var(--accent) 11px, transparent 11.5px); } .modal-title { margin: 0 0 10px; font-family: var(--font-head); font-style: italic; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--txt); } .modal-message { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.55; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .modal-actions .btn { flex: 0 1 auto; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } .status { font-size: 13px; min-height: 18px; margin: 9px 0 0; letter-spacing: 0.3px; } .status.ok { color: var(--ok); } .status.err { color: var(--err); } .status.busy { color: var(--accent); } .search-results { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .search-results .res { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; cursor: pointer; color: var(--txt); } .search-results .res:hover { border-color: var(--accent); } .name-help { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--accent2); border-radius: 0; padding: 13px 15px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); color: var(--muted); font-size: 13px; line-height: 1.55; } .name-help p { margin: 0 0 8px; } .name-help ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.75; } .name-help b { color: var(--txt); } .player-card { display: flex; gap: 14px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0; padding: 14px; margin: 15px 0 4px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); } .pc-emblem { height: 56px; width: auto; } .pc-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .pc-side { font-size: 12px; color: var(--muted); font-weight: 600; } .pc-meta { display: flex; gap: 12px; align-items: center; margin-top: 3px; } .pc-level { color: var(--accent); font-family: var(--font-head); font-weight: 600; letter-spacing: 1px; } .pc-prestige { color: var(--muted); font-size: 13px; } .pc-id { color: var(--muted); font-size: 12px; margin-top: 5px; font-family: ui-monospace, 'Consolas', monospace; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } } fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px 12px; margin: 0; } legend { color: var(--accent2); font-family: var(--font-head); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; padding: 0 6px; } fieldset label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; margin: 9px 0; color: var(--txt); } fieldset label.chk { justify-content: flex-start; gap: 8px; } input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 130px; height: 4px; background: var(--line2); border-radius: 2px; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--accent); border: 1px solid #0008; border-radius: var(--r); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border: 1px solid #0008; border-radius: var(--r); cursor: pointer; } input[type="color"] { width: 42px; height: 28px; padding: 0; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg2); cursor: pointer; } input[type="number"] { width: 90px; } output { color: var(--accent); font-family: var(--font-head); font-weight: 600; } .preview-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; /* checkerboard to indicate transparency */ background-color: #1f2121; background-image: linear-gradient(45deg, #2a2d2d 25%, transparent 25%), linear-gradient(-45deg, #2a2d2d 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #2a2d2d 75%), linear-gradient(-45deg, transparent 75%, #2a2d2d 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; } #preview { width: 100%; height: 200px; border: 0; display: block; } .hint { color: var(--muted); font-size: 12px; margin: 9px 0 0; letter-spacing: 0.3px; } .howto { margin-top: 13px; color: var(--muted); font-size: 13px; } .howto h3 { margin: 0; color: var(--accent2); font-family: var(--font-head); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; } .howto ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.65; } .howto b { color: var(--txt); } .foot { text-align: center; color: var(--muted); font-size: 12px; padding: 26px; letter-spacing: 0.5px; text-transform: uppercase; } .foot a { color: var(--accent); text-decoration: none; } .foot a:hover { text-decoration: underline; } .foot .sep { opacity: 0.5; margin: 0 8px; } /* footer Discord = compact EFT steel button (same style as header) */ .foot .foot-discord { display: inline-flex; align-items: center; vertical-align: middle; padding: 4px 13px; font-size: 11px; letter-spacing: 1px; } .foot .foot-discord:hover { text-decoration: none; } /* USK 18 age-rating badge (inline in the footer, between Discord and the notice) */ .foot-usk { height: 28px; width: auto; vertical-align: middle; display: inline-block; border-radius: 3px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); } .hidden { display: none !important; } /* legal / privacy content pages */ .legal-wrap { max-width: 900px; width: 100%; margin: 24px auto 48px; padding: 0 18px; } .legal h3 { font-family: var(--font-head); font-style: italic; font-size: 18px; color: var(--accent); margin: 26px 0 8px; letter-spacing: 0.5px; } .legal h3:first-child { margin-top: 0; } .legal p, .legal li { color: var(--txt); font-size: 14.5px; line-height: 1.7; } .legal ul { margin: 8px 0; padding-left: 20px; } .legal a { color: var(--accent); } .legal .addr { color: var(--muted); line-height: 1.7; margin: 6px 0; } .legal .muted { color: var(--muted); font-size: 13px; } /* floating Twitch live player (stream-embed.js) */ .stream-embed { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 340px; max-width: calc(100vw - 32px); background: var(--bg1); border: 1px solid var(--line2); border-radius: 0; box-shadow: 0 12px 34px rgba(0,0,0,0.55); overflow: hidden; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .se-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; background: linear-gradient(180deg, var(--bg2), var(--bg1)); border-bottom: 1px solid var(--line); user-select: none; } .se-live { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: #fff; background: #e5484d; padding: 3px 8px; border-radius: 3px; } .se-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: se-blink 1.4s ease-in-out infinite; } @keyframes se-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .se-name { flex: 1 1 auto; min-width: 0; color: var(--txt); text-decoration: none; font-family: var(--font-head); font-size: 13px; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .se-name:hover { color: var(--accent); } .se-toggle { flex: none; width: 24px; height: 24px; border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; } .se-toggle:hover { border-color: var(--accent); color: var(--accent); } .se-body { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .se-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .stream-embed.min .se-body { display: none; } .stream-embed.min { width: auto; } @media (max-width: 560px) { .stream-embed { width: 260px; right: 10px; bottom: 10px; } } /* cookie notice (cookie-banner.js) */ .cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(180deg, var(--bg1), var(--bg0)); border: 1px solid var(--line2); border-radius: 0; padding: 14px 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); animation: cookie-in 0.2s ease-out; } .cookie-text { margin: 0; flex: 1 1 240px; color: var(--muted); font-size: 13px; line-height: 1.5; } .cookie-text a { color: var(--accent); text-decoration: none; } .cookie-text a:hover { text-decoration: underline; } .cookie-bar .cookie-ok { flex: none; } @keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg0); } ::-webkit-scrollbar-thumb { background: var(--line2); border: 3px solid var(--bg0); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent2); } /* ===================================================================== Site-Footer (.ftr) — von footer.js auf allen Seiten injiziert. Struktur nach pengon.dev: Top-Grid (Brand+Uhren | Link-Spalten), Bottom-Zeile, Legal, Tarkov-Pixel-Szene (Nacht) ganz unten. ===================================================================== */ .ftr { position: relative; flex: none; margin-top: auto; width: 100%; padding: 52px 0 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(26,28,28,0.6), var(--bg0) 140px); text-align: left; /* Footer immer im grünen Tarkov-Akzent — unabhängig vom Seiten-Theme (theme-white/red/purple/… überschreiben --accent sonst pro Seite). */ --accent: #45c08f; --accent-ink: #06140e; --accent-rgb: 69, 192, 143; } .ftr-top { max-width: 1200px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; } @media (max-width: 860px) { .ftr-top { grid-template-columns: 1fr; gap: 34px; } } /* Brand */ .ftr-brand { display: flex; flex-direction: column; gap: 12px; max-width: 480px; } .ftr-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--txt); font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 1.5px; } .ftr-logo img { height: 40px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .ftr-logo b { color: var(--accent); } .ftr-note { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; } .ftr-note-dim { font-size: 12.5px; opacity: 0.75; } /* Uhren (Tarkov-Raid-Zeit ×7 + Weltzeiten) */ .ftr-clocks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 26px; } .ftr-clock { display: flex; flex-direction: column; gap: 1px; } .ftr-clock-time { font-family: ui-monospace, 'Consolas', monospace; font-size: 15px; color: var(--txt); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } .ftr-clock-tk .ftr-clock-time { color: var(--accent); } .ftr-clock-city { font-size: 11px; color: var(--txt); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; } .ftr-clock-cont { font-size: 10px; color: var(--muted); letter-spacing: 0.5px; } /* Link-Spalten */ .ftr-cols { display: flex; gap: 30px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 860px) { .ftr-cols { justify-content: flex-start; gap: 28px; } } .ftr-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .ftr-col-label { font-family: var(--font-head); font-size: 11px; font-weight: 600; color: var(--accent2); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 3px; } /* alle Spalten-Links als kompakte Steel-Buttons (wie der Discord-Button) */ .ftr-col .ftr-btn { padding: 5px 14px; font-size: 11px; letter-spacing: 1px; color: #131414; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } /* Pixel-Logos in den Social-Buttons */ .ftr-soc-ico { width: 15px; height: 15px; flex: none; image-rendering: pixelated; } .ftr-col .ftr-btn:hover { color: #131414; } /* Hover je Spalte: Tools = weiß/silber, Rechtliches = rot, Socials = Markenfarbe */ .ftr-col-tools .ftr-btn:hover { background: linear-gradient(180deg, #f8fbfb, #edf3f3 31%, #b9c4c4); border-color: #d6e0e0; color: #131414; } .ftr-col-legal .ftr-btn:hover { background: linear-gradient(180deg, #f4a9a3, #e05248 31%, #9c221b); border-color: #d88a84; color: #fff; text-shadow: none; } .ftr-col-socials a[data-key="twitch"]:hover { background: #9146ff; border-color: #b18cff; color: #fff; text-shadow: none; } .ftr-col-socials a[data-key="youtube"]:hover { background: #ff0000; border-color: #ff6a6a; color: #fff; text-shadow: none; } .ftr-col-socials a[data-key="tiktok"]:hover { background: #0f0f0f; border-color: #25f4ee; color: #fff; text-shadow: none; box-shadow: 2px 2px 0 rgba(238,29,82,0.7), inset 0 1px 0 rgba(255,255,255,0.1); } .ftr-col-socials a[data-key="instagram"]:hover { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); border-color: #e88aa8; color: #fff; text-shadow: none; } .ftr-col-socials a[data-key="x"]:hover { background: #0f0f0f; border-color: #e9e9e9; color: #fff; text-shadow: none; } .ftr-col-socials a[data-key="discord"]:hover { background: #5865f2; border-color: #9aa3ff; color: #fff; text-shadow: none; } /* Bottom-Zeile */ .ftr-bottom { max-width: 1200px; margin: 40px auto 0; padding: 16px 22px 0; border-top: 1px solid var(--line); display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-head); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-align: center; } .ftr-bottom .sep { opacity: 0.45; } .ftr-bottom a { color: var(--accent); text-decoration: none; } .ftr-bottom a:hover { text-decoration: underline; } .ftr-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .ftr-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),0.8); animation: ftr-pulse 2.2s ease-in-out infinite; } @keyframes ftr-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* Legal-Zeile */ .ftr-legal { max-width: 900px; margin: 12px auto 0; padding: 0 22px; text-align: center; font-size: 10.5px; line-height: 1.55; color: var(--muted); opacity: 0.7; } /* ---- Statusseite (/status) ---------------------------------------------- */ .status-wrap { display: flex; flex-direction: column; gap: 16px; } .st-banner { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 17px; letter-spacing: 0.5px; border: 1px solid var(--line2); border-radius: 0; padding: 16px 20px; clip-path: var(--chamfer); } .st-banner.st-ok { color: var(--ok); border-left: 3px solid var(--ok); background: linear-gradient(90deg, rgba(127,208,168,0.12), transparent 60%); } .st-banner.st-warn { color: var(--accent2); border-left: 3px solid var(--accent2); background: linear-gradient(90deg, rgba(168,153,111,0.14), transparent 60%); } .st-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; animation: ftr-pulse 2.2s ease-in-out infinite; } .st-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 560px) { .st-cards { grid-template-columns: 1fr; } } .st-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, var(--bg1), var(--bg0)); border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .st-card .st-dot { width: 9px; height: 9px; } .st-card.is-ok { color: var(--ok); } .st-card.is-down { color: var(--accent2); } .st-name { flex: 1 1 auto; color: var(--txt); font-size: 15px; font-family: var(--font-head); letter-spacing: 0.5px; } .st-state { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; color: currentColor; } .st-meta { color: var(--muted); font-size: 13px; letter-spacing: 0.3px; margin-top: 4px; } .st-meta b { color: var(--accent); } .st-meta .st-sep { opacity: 0.4; margin: 0 8px; } /* ---- Changelog & News (/logs) --------------------------------------------- */ .lg-wrap { display: flex; flex-direction: column; gap: 18px; } .lg-card { background: linear-gradient(180deg, rgba(var(--accent-rgb),0.03), transparent 80px), linear-gradient(180deg, var(--bg1), var(--bg0)); border: 1px solid var(--line); border-radius: 0; padding: 20px 22px; clip-path: var(--chamfer); } .lg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .lg-badge { font-family: var(--font-head); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 10px; flex: none; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } .lg-badge-changelog { background: rgba(var(--accent-rgb),0.16); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.4); } .lg-badge-announce { background: rgba(232,193,74,0.14); color: #e8c14a; border: 1px solid rgba(232,193,74,0.4); } .lg-title { margin: 0; border: 0; padding: 0; background: none; flex: 1 1 auto; font-family: var(--font-head); font-style: italic; font-size: 19px; font-weight: 700; color: var(--txt); letter-spacing: 0.5px; text-transform: none; } .lg-title::before { display: none; } .lg-date { flex: none; color: var(--muted); font-size: 12px; letter-spacing: 0.5px; } .lg-upd { opacity: 0.7; } .lg-body { color: var(--txt); font-size: 14.5px; line-height: 1.7; } .lg-body a { color: var(--accent); text-decoration: none; } .lg-body a:hover { text-decoration: underline; } .lg-body ul { margin: 6px 0; padding-left: 22px; } .lg-body li { margin: 3px 0; } .lg-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .lg-imgs a { display: block; flex: 0 1 260px; } .lg-imgs img { width: 100%; height: auto; display: block; border: 1px solid var(--line2); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } /* ---- Tarkov-Pixel-Szene (Nacht, 8-bit) ---------------------------------- */ .ftr-scene { position: relative; height: 270px; margin-top: -96px; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 35%, #07090c 72%, #0b0e10 100%), transparent; /* weicher, langer Fade nach oben — Bild blendet bis hoch in den USK-/Legal-Bereich aus */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); } /* Sterne (zwei Ebenen, versetzt) */ .ftr-stars { position: absolute; inset: 0; opacity: 0.5; background-image: radial-gradient(#cfd8d8 0.8px, transparent 1.1px); background-size: 110px 70px; background-position: 12px 8px; } .ftr-stars2 { opacity: 0.28; background-size: 70px 46px; background-position: 47px 25px; } /* Mond (tief über der Skyline, damit er unter dem Fade sichtbar bleibt) */ .ftr-moon { position: absolute; top: 84px; right: 9%; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(207,216,216,0.35)); opacity: 0.9; } /* Skyline-Silhouetten (zerstörte Gebäude, repeat-x) */ .ftr-sky { position: absolute; left: 0; right: 0; bottom: 10px; background-repeat: repeat-x; background-position: bottom left; } /* Skyline-Grafiken kommen pro Map aus footer.js (applyMap → background-image) */ .ftr-sky-far { height: 110px; opacity: 0.92; } .ftr-sky-near { height: 62px; } /* Boden */ .ftr-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #0a0c0c; border-top: 1px solid #1d2424; } /* Map-Landmarken-Container (füllt die Szene, Kinder positionieren sich selbst) */ .ftr-mapfx { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .fx-px { position: absolute; image-rendering: pixelated; } /* Leuchtturm-Strahl (schwenkt) */ .fx-beam { position: absolute; width: 170px; height: 26px; opacity: 0.8; transform-origin: left center; background: linear-gradient(90deg, rgba(255,241,184,0.5), rgba(255,241,184,0.05) 80%, transparent); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); animation: fx-beamrot 8s ease-in-out infinite alternate; } @keyframes fx-beamrot { 0% { transform: rotate(10deg); } 100% { transform: rotate(-16deg); } } /* Fabrik-Rauch (aufsteigende Pixel) */ .fx-smoke { position: absolute; width: 6px; height: 6px; background: #4a4f4f; opacity: 0; animation: fx-smokerise 4.2s linear infinite; } .fx-smoke2 { animation-delay: 1.4s; } .fx-smoke3 { animation-delay: 2.8s; } @keyframes fx-smokerise { 0% { opacity: 0.55; transform: translate(0, 0); } 90% { opacity: 0; transform: translate(7px, -46px); } 100% { opacity: 0; transform: translate(7px, -46px); } } /* Straßenlaterne mit warmem Lichtkegel */ .fx-lamp { position: absolute; width: 3px; height: 46px; background: #10151a; } .fx-lamp::before { content: ''; position: absolute; top: -2px; left: -2px; width: 8px; height: 4px; background: #ffd75e; box-shadow: 0 0 8px rgba(255,215,94,0.8); } .fx-lamp::after { content: ''; position: absolute; top: 2px; left: -16px; width: 38px; height: 48px; background: radial-gradient(50% 100% at 50% 0, rgba(255,215,94,0.13), transparent 75%); } /* ULTRA-Schild flackert gelegentlich */ .fx-sign { animation: fx-signflick 3.6s steps(1) infinite; } @keyframes fx-signflick { 0%, 87% { opacity: 1; } 88%, 90% { opacity: 0.35; } 91%, 100% { opacity: 1; } } /* Map-Umschalter (rechts in der Szene) */ .ftr-maps { position: absolute; right: 10px; bottom: 16px; z-index: 4; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .ftr-mapbtn { font-family: var(--font-head); font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: rgba(19,20,20,0.78); border: 1px solid var(--line); padding: 3px 8px; cursor: pointer; transition: 0.12s; border-radius: 0; } .ftr-mapbtn:hover { border-color: var(--accent); color: var(--txt); } .ftr-mapbtn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Schneefall (Icebreaker) */ .fx-snow { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.85; background-image: radial-gradient(#eef6f8 1px, transparent 1.4px), radial-gradient(#dfeaec 1px, transparent 1.4px); background-size: 90px 90px, 130px 130px; animation: fx-snowfall 6s linear infinite; } @keyframes fx-snowfall { from { background-position: 0 -90px, 40px -130px; } to { background-position: 26px 90px, 8px 130px; } } /* Baukran + Funkmast (Customs-Landmarken) */ .ftr-crane { position: absolute; bottom: 24px; left: 13%; width: 84px; height: 104px; image-rendering: pixelated; } .ftr-mast { position: absolute; bottom: 28px; right: 21%; width: 28px; height: 116px; image-rendering: pixelated; } /* rote Positionslichter (langsames Blinken) */ .ftr-blink { position: absolute; width: 4px; height: 4px; background: #ff3b30; box-shadow: 0 0 7px rgba(255,59,48,0.9); z-index: 1; animation: ftr-blinker 2.6s steps(1) infinite; } .ftr-blink-crane { left: calc(13% + 38px); bottom: 118px; } .ftr-blink-mast { right: calc(21% + 11px); bottom: 140px; animation-delay: 1.3s; } @keyframes ftr-blinker { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0.1; } } /* Strommasten mit durchhängenden Leitungen (repeat-x, vor der nahen Skyline) */ .ftr-poles { position: absolute; left: 0; right: 0; bottom: 9px; height: 128px; z-index: 1; opacity: 0.95; background-repeat: repeat-x; background-position: bottom left; background-size: 620px 128px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='128'%3E%3Cg fill='%230c0f10'%3E%3Crect x='58' y='14' width='4' height='114'/%3E%3Crect x='44' y='20' width='32' height='3'/%3E%3Crect x='48' y='32' width='24' height='3'/%3E%3Crect x='46' y='23' width='2' height='4'/%3E%3Crect x='72' y='23' width='2' height='4'/%3E%3Crect x='368' y='14' width='4' height='114'/%3E%3Crect x='354' y='20' width='32' height='3'/%3E%3Crect x='358' y='32' width='24' height='3'/%3E%3Crect x='356' y='23' width='2' height='4'/%3E%3Crect x='382' y='23' width='2' height='4'/%3E%3C/g%3E%3Cg stroke='%230c0f10' stroke-width='1.5' fill='none'%3E%3Cpath d='M62 22 Q 215 44 366 22'/%3E%3Cpath d='M62 34 Q 215 54 366 34'/%3E%3Cpath d='M372 22 Q 500 42 622 22'/%3E%3Cpath d='M372 34 Q 500 52 622 34'/%3E%3Cpath d='M-2 22 Q 28 40 58 22'/%3E%3Cpath d='M-2 34 Q 28 50 58 34'/%3E%3C/g%3E%3C/svg%3E"); } /* Autowrack (ausgebrannter Kombi) */ .ftr-wreck { position: absolute; bottom: 9px; left: 57%; z-index: 1; image-rendering: pixelated; } /* Stacheldraht direkt über dem Boden (vor den Bots) */ .ftr-barbwire { position: absolute; left: 0; right: 0; bottom: 8px; height: 14px; z-index: 3; opacity: 0.9; background-repeat: repeat-x; background-position: bottom left; background-size: 72px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' shape-rendering='crispEdges'%3E%3Cg fill='%23131718'%3E%3Crect x='4' y='2' width='2' height='12'/%3E%3Crect x='0' y='4' width='72' height='1'/%3E%3Crect x='0' y='9' width='72' height='1'/%3E%3Crect x='16' y='2' width='1' height='2'/%3E%3Crect x='18' y='5' width='1' height='2'/%3E%3Crect x='30' y='7' width='1' height='2'/%3E%3Crect x='32' y='10' width='1' height='2'/%3E%3Crect x='46' y='2' width='1' height='2'/%3E%3Crect x='44' y='5' width='1' height='2'/%3E%3Crect x='60' y='7' width='1' height='2'/%3E%3Crect x='62' y='10' width='1' height='2'/%3E%3C/g%3E%3C/svg%3E"); } /* Pixel-Bots */ .px-bot { position: absolute; bottom: 8px; left: 0; z-index: 2; width: 48px; height: 54px; animation: px-run var(--dur, 26s) linear infinite; animation-delay: var(--delay, 0s); will-change: transform; } .px-rev { animation-direction: reverse; } .px-rev .px-flip { transform: scaleX(-1); } .px-flip { position: absolute; inset: 0; } .px-fr { position: absolute; left: 0; top: 0; image-rendering: pixelated; } .px-f1 { animation: px-stepA 0.46s steps(1) infinite; } .px-f2 { animation: px-stepB 0.46s steps(1) infinite; } @keyframes px-run { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 140px)); } } @keyframes px-stepA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes px-stepB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } } /* Mündungsfeuer + Tracer an der Laufmündung (x=15/16 → ×3 = 45-48px, y=6 → 18px) */ .px-flash { position: absolute; left: 45px; top: 15px; width: 8px; height: 8px; opacity: 0; background: linear-gradient(#ffd75e, #ffd75e) 0 3px / 8px 2px no-repeat, linear-gradient(#ff9d3b, #ff9d3b) 3px 0 / 2px 8px no-repeat, radial-gradient(circle, #fff2b0 30%, transparent 32%); animation: px-fire 3.1s steps(1) infinite; animation-delay: var(--fdelay, 0s); } .px-tracer { position: absolute; left: 52px; top: 18px; width: 64px; height: 2px; opacity: 0; background: linear-gradient(90deg, #ffd75e, #ff5b3b 65%, transparent); transform-origin: left center; animation: px-trace 3.1s linear infinite; animation-delay: var(--fdelay, 0s); } @keyframes px-fire { 0%, 85% { opacity: 0; } 86%, 88% { opacity: 1; } 89%, 90% { opacity: 0; } 91%, 93% { opacity: 1; } 94%, 100% { opacity: 0; } } @keyframes px-trace { 0%, 85.9% { opacity: 0; transform: translateX(0) scaleX(0.2); } 86% { opacity: 0.9; transform: translateX(0) scaleX(0.4); } 90% { opacity: 0.7; transform: translateX(46px) scaleX(1); } 93% { opacity: 0; transform: translateX(90px) scaleX(0.7); } 100% { opacity: 0; transform: translateX(0) scaleX(0.2); } } /* --- Explosionen (One-Shot, vom Regisseur gespawnt): Blitz → Feuerball → Rauch */ .ftr-boom-once { position: absolute; bottom: 10px; width: 60px; height: 60px; z-index: 2; pointer-events: none; transform: scale(var(--bscale, 1)); transform-origin: bottom center; } .ftr-bf { position: absolute; left: 0; bottom: -4px; opacity: 0; image-rendering: pixelated; } .ftr-bo1 { animation: ftr-o1 1.5s linear 1 forwards; } .ftr-bo2 { animation: ftr-o2 1.5s linear 1 forwards; } .ftr-bo3 { animation: ftr-o3 1.5s linear 1 forwards; } @keyframes ftr-o1 { 0%, 2% { opacity: 0; } 3%, 13% { opacity: 1; } 13.1%, 100% { opacity: 0; } } @keyframes ftr-o2 { 0%, 13% { opacity: 0; } 13.1%, 36% { opacity: 1; } 36.1%, 100% { opacity: 0; } } @keyframes ftr-o3 { 0%, 36% { opacity: 0; transform: none; } 40% { opacity: 0.9; } 75% { opacity: 0.5; transform: translateY(-7px); } 100% { opacity: 0; transform: translateY(-14px); } } .ftr-boglow { position: absolute; left: -34px; bottom: -8px; width: 128px; height: 36px; opacity: 0; background: radial-gradient(50% 100% at 50% 100%, rgba(255,157,59,0.55), transparent 70%); animation: ftr-bglow 1.5s linear 1 forwards; } @keyframes ftr-bglow { 0%, 2% { opacity: 0; } 9% { opacity: 1; } 34% { opacity: 0.3; } 55%, 100% { opacity: 0; } } /* fallende Fliegerbombe (One-Shot) */ .ftr-fallbomb { position: absolute; top: 64px; width: 4px; height: 9px; background: #20262a; z-index: 1; animation: ftr-bombdrop 0.72s ease-in 1 forwards; } @keyframes ftr-bombdrop { 0% { transform: translateY(0); opacity: 1; } 94% { opacity: 1; } 100% { transform: translateY(102px); opacity: 0; } } /* --- Kampfflugzeug (One-Shot-Überflug mit Nachbrenner) --------------------- */ .ftr-plane { position: absolute; top: 28px; left: 0; z-index: 1; width: 120px; height: 36px; pointer-events: none; animation: ftr-fly var(--fdur, 5200ms) linear 1 forwards; } .ftr-plane .px-flip { position: absolute; inset: 0; } .ftr-plane-rev { animation-name: ftr-fly-rev; } .ftr-plane-rev .px-flip { transform: scaleX(-1); } @keyframes ftr-fly { 0% { transform: translateX(-190px); } 100% { transform: translateX(calc(100vw + 190px)); } } @keyframes ftr-fly-rev { 0% { transform: translateX(calc(100vw + 190px)); } 100% { transform: translateX(-190px); } } .ftr-jet { position: absolute; left: -3px; top: 16px; width: 10px; height: 5px; background: linear-gradient(90deg, transparent, #ff9d3b 40%, #ffd75e); animation: ftr-jetflick 0.14s steps(1) infinite; } @keyframes ftr-jetflick { 0%, 49% { opacity: 0.95; } 50%, 100% { opacity: 0.45; } } /* --- Panzer (One-Shot-Durchfahrt, rollende Ketten, Mündungsblitz) ---------- */ .px-tank { position: absolute; bottom: 8px; left: 0; z-index: 2; width: 138px; height: 48px; pointer-events: none; animation: ftr-tankdrive var(--tdur, 19000ms) linear 1 forwards; will-change: transform; } .px-tank .px-flip { position: absolute; inset: 0; } .px-tank-rev { animation-name: ftr-tankdrive-rev; } .px-tank-rev .px-flip { transform: scaleX(-1); } @keyframes ftr-tankdrive { 0% { transform: translateX(-230px); } 100% { transform: translateX(calc(100vw + 230px)); } } @keyframes ftr-tankdrive-rev { 0% { transform: translateX(calc(100vw + 230px)); } 100% { transform: translateX(-230px); } } .px-tank-flash { position: absolute; right: -12px; top: 12px; width: 16px; height: 11px; opacity: 0; background: radial-gradient(circle at 30% 50%, #fff1b8 18%, #ff9d3b 50%, transparent 72%); } .px-tank.fire .px-tank-flash { opacity: 1; } /* --- Treffer & Tod der Soldaten -------------------------------------------- */ .px-hit .px-fr { filter: brightness(2.4) saturate(3) sepia(0.5) hue-rotate(-40deg); } /* Lauf-Frames einfrieren, Mündungsfeuer/Tracer aus */ .px-dying .px-f1 { animation: none; opacity: 1; } .px-dying .px-f2 { animation: none; opacity: 0; } .px-dying .px-flash, .px-dying .px-tracer { display: none; } .px-dead .px-flip { transition: transform 0.34s ease-in; transform: rotate(-86deg); transform-origin: 12px 51px; } .px-rev.px-dead .px-flip { transform: scaleX(-1) rotate(-86deg); } .px-blood { position: absolute; left: 0; bottom: 0; width: 48px; height: 5px; background: #6f120d; box-shadow: inset 0 1px 0 #8c1a12; opacity: 0.9; transform: scaleX(0.08); transform-origin: 30% center; animation: px-bleed 1.6s ease-out 0.35s 1 forwards; } @keyframes px-bleed { to { transform: scaleX(1); } } .px-spurt { position: absolute; left: 20px; top: 12px; width: 2px; height: 2px; background: #c22826; box-shadow: 4px -4px 0 #a11f1d, -3px -6px 0 #d23230, 8px -1px 0 #8f1a18, 2px -9px 0 #b52522; animation: px-spurtfly 0.5s ease-out 1 forwards; } @keyframes px-spurtfly { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(8px, -12px); } } .px-fade { opacity: 0; transition: opacity 0.85s linear; } /* Bosse als One-Shot-Querung (gleiches px-run, aber nur 1 Durchlauf) */ .px-bot.px-runonce { animation-iteration-count: 1; animation-fill-mode: forwards; } /* --- Autos: fahren in den ersten ~26 % des Zyklus durch, dann Pause -------- */ .px-car { position: absolute; bottom: 8px; left: 0; z-index: 2; width: 108px; height: 42px; transform: translateX(-240px); will-change: transform; animation: px-drive var(--cyc, 28s) linear infinite; animation-delay: var(--cdelay, 0s); } .px-car .px-flip { position: absolute; inset: 0; } .px-car-rev { animation-name: px-drive-rev; } .px-car-rev .px-flip { transform: scaleX(-1); } .px-carsvg { display: block; image-rendering: pixelated; } @keyframes px-drive { 0% { transform: translateX(-240px); } 26% { transform: translateX(calc(100vw + 240px)); } 100% { transform: translateX(calc(100vw + 240px)); } } @keyframes px-drive-rev { 0% { transform: translateX(calc(100vw + 240px)); } 26% { transform: translateX(-240px); } 100% { transform: translateX(-240px); } } .px-headlight { position: absolute; right: -50px; top: 19px; width: 52px; height: 15px; background: linear-gradient(90deg, rgba(255,215,94,0.32), transparent 85%); clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 62%); } /* --- Bosse: größer, langsamer Schritt ------------------------------------- */ .px-boss { width: 54px; height: 60px; bottom: 7px; } .px-boss .px-f1 { animation-duration: 0.62s; } .px-boss .px-f2 { animation-duration: 0.62s; } @media (prefers-reduced-motion: reduce) { .px-bot, .px-f1, .px-f2, .px-flash, .px-tracer, .ftr-status-dot, .ftr-blink { animation: none !important; } .px-bot { left: 12%; } .px-bot:nth-of-type(2) { left: 46%; } .px-bot:nth-of-type(3) { left: 78%; } .px-flash, .px-tracer, .px-car, .ftr-plane, .px-tank, .ftr-boom-once, .ftr-fallbomb { display: none; } .fx-beam, .fx-smoke, .fx-sign { animation: none !important; } .fx-beam { transform: rotate(-4deg); } .fx-smoke { opacity: 0.35; } .px-boss { left: 30%; } .px-boss.px-rev { left: 62%; } } @media (max-width: 680px) { .ftr-scene { height: 150px; } .ftr-sky-far { height: 88px; } .ftr-crane, .ftr-blink-crane, .px-car-b { display: none; } .ftr-maps { bottom: 12px; gap: 3px; } .ftr-mapbtn { font-size: 8px; padding: 2px 6px; } }