style.css - master - expertdaniil/RUS

style.css
393 строки8 KB
expertdaniil
upload files
10 янв 2026, 20:51
10 янв 2026, 20:5120a99d3
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Ruslan+Display&display=swap');

:root{
  --bg:#e6d4b0;
  --paper:#fbf6e8;
  --ink:#1b1b1b;
  --muted:rgba(0,0,0,.62);
  --line:rgba(0,0,0,.16);
  --shadow:rgba(0,0,0,.18);

  --red:#7a0f16;     /* киноварь */
  --green:#1f6b2a;
  --gold:#8a5a00;

  --uiTop1:#5f1b1b;
  --uiTop2:#3f1111;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--ink);
  font: 14px/1.45 "Forum", Georgia, serif;
  background:
    radial-gradient(1200px 760px at 22% 18%, #fff7e6 0, var(--bg) 60%, #dcc79b 100%);
}

/* Потёртости/зерно (без файлов) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)' opacity='.60'/%3E%3C/svg%3E");
  background-size: 520px 520px;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.28;
  mix-blend-mode:multiply;
  background:
    radial-gradient(1200px 760px at 30% 20%, rgba(255,255,255,.18) 0, rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 70% 80%, rgba(0,0,0,.22) 0, rgba(0,0,0,0) 55%),
    radial-gradient(700px 420px at 15% 85%, rgba(138,90,0,.16) 0, rgba(0,0,0,0) 60%);
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:10;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;

  padding:12px 14px;
  color:#f5e6c8;
  background: linear-gradient(180deg, var(--uiTop1) 0, var(--uiTop2) 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  border-bottom: 2px solid rgba(255,255,255,.10);
}

.title{
  font: 22px/1 "Ruslan Display","Forum",Georgia,serif;
  letter-spacing:.6px;
  margin:0;
}

.subtitle{
  display:none; /* специально: убираем современный подзаголовок */
}

.topright{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.pill{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-size:12px;
}

.pill b{
  color:#fff;
  font-weight:900;
  font-family: "Forum", Georgia, serif;
}

/* Layout */
.grid{
  display:grid;
  grid-template-columns: 320px minmax(360px, 1fr) 360px;
  gap:12px;
  padding:12px 14px 18px;
}

@media (max-width:1100px){
  .grid{ grid-template-columns:1fr; }
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.52) 0, rgba(255,255,255,.30) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: 0 10px 24px var(--shadow);
  padding:12px;
}

h2{
  margin:0 0 10px;
  font-size:16px;
  font-family:"Forum",Georgia,serif;
  letter-spacing:.2px;
}
h3{
  margin:14px 0 8px;
  font-size:14px;
  font-family:"Forum",Georgia,serif;
}

.muted{
  color:var(--muted);
  font-size:12px;
}

/* Cards */
.center{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,.35) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: 0 10px 24px var(--shadow);
  overflow:hidden;
}

.cardhead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  padding:12px;
  background: linear-gradient(180deg, rgba(251,246,232,.95) 0, rgba(243,234,210,.95) 100%);
  border-bottom:1px solid var(--line);
  position:relative;
}

.cardhead::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(122,15,22,.55) 0 10px,
      rgba(31,107,42,.55) 10px 20px,
      rgba(138,90,0,.55) 20px 30px);
  opacity:.55;
}

.cardbody{
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(255,255,255,.32) 0, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(251,246,232,.95) 0, rgba(239,228,199,.92) 100%);
  padding:12px;
}

.h{
  font-weight:900;
  font-family:"Forum",Georgia,serif;
}

/* Buttons */
.btn{
  appearance:none;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#f5e6c8;
  padding:8px 10px;
  border-radius:12px;
  font-weight:900;
  font-family:"Forum",Georgia,serif;
}

.btn:hover{ filter:brightness(1.03); }
.btn.ghost{ background: rgba(255,255,255,.08); }
.btn.primary{
  background: linear-gradient(180deg, #b61b26 0, var(--red) 100%);
  color:#fff;
}

/* KPI blocks */
.kpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.kpi{
  padding:10px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.45);
}
.kpi .t{ font-size:12px; color:rgba(0,0,0,.65); }
.kpi .v{ font-size:18px; font-weight:950; }
.bar{
  height:8px;
  border-radius:999px;
  background: rgba(0,0,0,.10);
  overflow:hidden;
  margin-top:6px;
}
.bar > div{ height:100%; background: rgba(122,15,22,.75); }

/* Items */
.stack{ display:grid; gap:8px; }

.item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background: rgba(255,255,255,.45);
}

.itemTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.tag{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.55);
  font-family:"Forum",Georgia,serif;
}
.tag.good{ color:var(--green); border-color: rgba(31,107,42,.25); }
.tag.warn{ color:var(--gold);  border-color: rgba(138,90,0,.25); }
.tag.bad { color:var(--red);   border-color: rgba(122,15,22,.25); }

/* Report */
.reportTitle{
  font-weight:900;
  margin-bottom:6px;
  font-family:"Forum",Georgia,serif;
}
.reportText{
  white-space:pre-wrap;
  color:rgba(0,0,0,.78);
  line-height:1.60;
}

/* Event */
.event{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background: rgba(255,255,255,.55);
}
.eventTitle{ font-weight:950; color:var(--red); }
.eventText{ margin-top:6px; white-space:pre-wrap; color:rgba(0,0,0,.78); line-height:1.60; }
.fact{ margin-top:8px; font-size:12px; color:rgba(0,0,0,.70); }

/* Choices */
.choices{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.choice{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.55);
  cursor:pointer;
  font-weight:900;
  font-family:"Forum",Georgia,serif;
}

.choice:hover{ filter:brightness(.99); }
.choice small{
  display:block;
  margin-top:4px;
  color:rgba(0,0,0,.68);
  font-weight:700;
}

/* Log */
.log{ max-height:320px; overflow:auto; }
.log p{ margin:0 0 8px; font-size:12px; color:rgba(0,0,0,.78); }
.log .good{ color:var(--green); font-weight:900; }
.log .warn{ color:var(--gold);  font-weight:900; }
.log .bad { color:var(--red);   font-weight:900; }

/* Tabs */
.tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.tab{
  border:1px solid var(--line);
  background: rgba(255,255,255,.30);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  font-family:"Forum",Georgia,serif;
}

.tab.active{ background: rgba(255,255,255,.60); }

.tabpane{ display:none; }
.tabpane.active{ display:block; }

.divider{
  height:1px;
  background: var(--line);
  margin:12px 0;
}

.slider{ width:100%; }

/* Modals */
.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.50);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}
.modal.show{ display:flex; }

.modalbox{
  width:min(860px,100%);
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(251,246,232,.98) 0, rgba(239,228,199,.96) 100%);
  border:1px solid rgba(0,0,0,.20);
  box-shadow: 0 22px 55px rgba(0,0,0,.35);
}

.modalhead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;

  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(243,234,210,.96) 0, rgba(239,228,199,.96) 100%);
}

.modalbody{ padding:12px 14px; color:rgba(0,0,0,.80); }
.modalfoot{ padding:12px 14px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }