/* Wiki и Поддержка студии Rockbanner: самостоятельные сайты, своё оформление (студийный красный акцент), без привязки к сайтам RBG и Rust */
:root { --bg: #0b0b0d; --pn: #121215; --ln: rgba(255, 255, 255, .12); --ln2: rgba(255, 255, 255, .06); --tx: #efeee9; --dm: rgba(239, 238, 233, .66); --fa: rgba(239, 238, 233, .36); --red: #ff3b14; --grn: #7fd06a; --yel: #ffd21f; --pad: clamp(18px, 4vw, 64px); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; }
body { font-family: Bahnschrift, "Segoe UI", "Arial Narrow", Arial, sans-serif; color: var(--tx); background: radial-gradient(1100px 520px at 12% -8%, rgba(255, 59, 20, .10), transparent 62%), var(--bg); font-size: 17px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; }
.ph { position: sticky; top: 0; z-index: 20; height: 68px; background: rgba(11, 11, 13, .92); border-bottom: 1px solid var(--ln); backdrop-filter: blur(10px); }
.phin { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 4px; font-size: 18px; } .brand img { height: 38px; } .brand small { display: block; font-size: 10px; letter-spacing: 6px; color: var(--red); font-weight: 400; margin-top: 3px; }
.pnav { display: flex; gap: 4px; margin-right: auto; } .pnav a { padding: 8px 14px; font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--dm); position: relative; white-space: nowrap; } .pnav a:hover, .pnav a.on { color: var(--tx); } .pnav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -12px; height: 2px; background: var(--red); }
.pnav .sep { width: 1px; background: var(--ln); margin: 6px 8px; }
.pwho { display: flex; align-items: center; gap: 10px; font-size: 15px; white-space: nowrap; } .pwho img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, .45); background: transparent; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; } .btn:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.btn.pri { background: var(--tx); color: #111; border-color: var(--tx); } .btn.pri:hover { background: #fff; } .btn.red { background: var(--red); border-color: var(--red); color: #fff; } .btn.sm { height: 34px; padding: 0 14px; font-size: 12px; letter-spacing: 2px; } .btn[disabled] { opacity: .4; cursor: default; }
main { flex: 1; } .pw { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.hero { padding: clamp(36px, 7vw, 84px) 0 34px; } .hero small { font-size: 13px; letter-spacing: 6px; text-transform: uppercase; color: var(--red); } .hero h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin: 10px 0 14px; } .hero p { color: var(--dm); max-width: 640px; font-size: 19px; }
.sbox { position: relative; max-width: 720px; margin-top: 26px; } .sbox input { width: 100%; padding: 17px 20px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ln); font-size: 18px; outline: none; } .sbox input:focus { border-color: var(--tx); } .sbox input::placeholder { color: var(--fa); }
.sres { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: #121215; border: 1px solid var(--ln); border-top: 0; max-height: 420px; overflow: auto; } .sres a { display: block; padding: 13px 20px; border-top: 1px solid var(--ln2); } .sres a:hover { background: rgba(255, 255, 255, .06); } .sres b { display: block; font-size: 16px; } .sres span { color: var(--dm); font-size: 14px; } .sres .none { padding: 16px 20px; color: var(--dm); }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 10px 0 60px; }
.sec { border: 1px solid var(--ln); background: var(--pn); padding: 22px 24px; } .sec h3 { font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; } .sec h3 i { font-style: normal; color: var(--fa); letter-spacing: 2px; }
.sec a { display: block; padding: 9px 0; border-top: 1px solid var(--ln2); color: var(--tx); } .sec a:hover { color: var(--red); }
.cta { border: 1px solid var(--ln); padding: 28px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 20px 0 60px; background: linear-gradient(90deg, rgba(255, 59, 20, .10), transparent); } .cta b { font-size: 24px; letter-spacing: 2px; text-transform: uppercase; display: block; } .cta span { color: var(--dm); }
.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 44px; padding: 38px 0 70px; align-items: start; }
.tree { position: sticky; top: 92px; font-size: 15px; } .tree h4 { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--fa); font-weight: 400; margin: 18px 0 6px; } .tree h4:first-child { margin-top: 0; } .tree a { display: block; padding: 7px 12px; color: var(--dm); border-left: 2px solid var(--ln2); } .tree a:hover { color: var(--tx); } .tree a.on { color: var(--tx); border-left-color: var(--red); background: rgba(255, 59, 20, .07); }
.art .crumb { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--fa); } .art .crumb a:hover { color: var(--tx); } .art h1 { font-size: clamp(30px, 4vw, 48px); letter-spacing: 1px; line-height: 1.1; margin: 10px 0 8px; } .art .meta { color: var(--fa); font-size: 14px; margin-bottom: 26px; }
.body h3 { font-size: 24px; letter-spacing: 1px; margin: 34px 0 10px; scroll-margin-top: 90px; } .body p, .body li { color: #dedcd6; margin: 12px 0; } .body ul, .body ol { padding-left: 24px; } .body a { color: var(--red); border-bottom: 1px solid rgba(255, 59, 20, .4); } .body code { font-family: Consolas, monospace; background: rgba(255, 255, 255, .08); padding: 2px 7px; font-size: .92em; } .body img { max-width: 100%; }
.toc { position: sticky; top: 92px; font-size: 14px; } .toc h4 { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--fa); font-weight: 400; margin-bottom: 8px; } .toc a { display: block; padding: 5px 0; color: var(--dm); } .toc a:hover { color: var(--tx); }
.pf { border-top: 1px solid var(--ln2); padding: 26px var(--pad) 34px; max-width: 1320px; width: 100%; margin: 0 auto; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; letter-spacing: 2px; color: var(--fa); } .pf a:hover { color: var(--tx); } .pf .g { flex: 1; }
.empty { padding: 36px 0; color: var(--dm); border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
/* поддержка */
.sup { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 34px; padding-bottom: 80px; align-items: start; }
.card { border: 1px solid var(--ln); background: var(--pn); padding: 26px; } .card h2 { font-size: 20px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 18px; }
.lab { display: block; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--fa); margin: 18px 0 6px; }
.fld { width: 100%; background: rgba(255, 255, 255, .04); border: 1px solid var(--ln); padding: 12px 14px; outline: none; font-size: 17px; } .fld:focus { border-color: var(--tx); } textarea.fld { min-height: 140px; resize: vertical; line-height: 1.4; } select.fld option { background: #111; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 9px 16px; border: 1px solid var(--ln); background: none; cursor: pointer; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--dm); } .pill:hover { color: var(--tx); border-color: var(--fa); } .pill.on { color: #fff; border-color: var(--red); background: rgba(255, 59, 20, .14); }
.sug { margin-top: 10px; border-left: 3px solid var(--yel); background: rgba(255, 210, 31, .06); padding: 10px 14px; font-size: 15px; } .sug a { display: block; padding: 3px 0; color: var(--yel); } .sug a:hover { text-decoration: underline; }
.tl a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 16px 0; border-top: 1px solid var(--ln2); cursor: pointer; } .tl a:hover b { color: var(--red); } .tl a.on { background: rgba(255, 255, 255, .04); padding-left: 12px; } .tl b { font-size: 17px; } .tl small { grid-column: 1 / -1; color: var(--fa); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.st { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; align-self: center; } .st.open { color: var(--yel); } .st.answered { color: var(--grn); } .st.closed { color: var(--fa); }
.msgs { margin: 14px 0; } .m { padding: 14px 16px; margin: 10px 0; border: 1px solid var(--ln2); background: rgba(255, 255, 255, .03); white-space: pre-wrap; } .m small { display: block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--fa); margin-bottom: 6px; } .m.staff { border-color: rgba(127, 208, 106, .5); background: rgba(127, 208, 106, .07); margin-left: 24px; } .m.staff small { color: var(--grn); }
.note { padding: 12px 16px; margin: 12px 0; border-left: 3px solid var(--red); background: rgba(255, 59, 20, .08); } .note.ok { border-color: var(--grn); background: rgba(127, 208, 106, .08); }
.cc { position: fixed; left: var(--pad); bottom: 20px; z-index: 90; max-width: 440px; padding: 18px 20px; background: rgba(8, 8, 10, .96); border: 1px solid var(--ln); } .cc b { font-size: 14px; letter-spacing: 4px; text-transform: uppercase; } .cc p { margin: 8px 0 14px; color: var(--dm); font-size: 14px; line-height: 1.4; } .cc p a { border-bottom: 1px solid var(--fa); } .cc div { display: flex; gap: 10px; }
@media (max-width: 1100px) { .doc { grid-template-columns: 230px minmax(0, 1fr); } .toc { display: none; } .sup { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .doc { grid-template-columns: 1fr; } .tree { position: static; } .pnav a { padding: 8px 8px; font-size: 12px; letter-spacing: 1.5px; } .pnav .proj { display: none; } .brand small { display: none; } .phin { gap: 12px; } .pwho span { display: none; } }