/* ============================================================ Гостьовий режим: полоса зверху, кнопки входу в панелі, вікно «увійдіть». Підключається останнім і працює тільки коли на стоїть data-guest — у звичайного користувача ці правила не діють. ============================================================ */ .gbar{display:none} /* Полоса має нагадувати, а не кричати: беремо кольори панелі, а не зворотні. Раніше вона була суцільною світлою смугою на весь екран і перетягувала увагу на себе. */ html[data-guest] .gbar{ display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; top:0; z-index:45; padding:8px 16px; background:var(--side-bg); color:var(--dim); border-bottom:1px solid var(--line); font-size:13px; line-height:1.3; } /* «Демо» — нашим зеленим: це не попередження й не помилка, а просто позначка, тому колір фірмовий, а не сірий і не червоний */ html[data-guest] .gbar b{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:3px 8px; border-radius:99px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-soft); } html[data-guest] .gbar span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} html[data-guest] .gbar .sp{flex:1} html[data-guest] .gbar .lnk{ color:var(--dim); text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--line); padding-bottom:1px; } html[data-guest] .gbar .lnk:hover{color:var(--text); border-color:var(--dim)} html[data-guest] .gbar .go{ background:var(--accent); color:var(--accent-ink); border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:500; text-decoration:none; white-space:nowrap; /* у таблиці .go — стрілка, яка проявляється на наведення (style.css), і звідти сюди приходило opacity:0: кнопки в полосі не було видно */ opacity:1; } html[data-guest] .gbar .go:hover{filter:brightness(1.06)} /* полоса стоїть поверх усього — зсуваємо і панель, і вміст */ html[data-guest] body.has-gbar .side, html[data-guest] body.has-gbar .main{padding-top:52px} /* кнопки входу замість «вийти» */ .gside{display:flex; flex-direction:column; gap:8px; margin-bottom:10px} .gside .btn{ display:flex; align-items:center; justify-content:center; text-decoration:none; border-radius:9px; padding:9px 12px; font-size:13.5px; font-weight:500; border:1px solid var(--line); background:var(--panel); color:var(--text); transition:border-color .15s, filter .15s; } .gside .btn:hover{border-color:var(--faint)} .gside .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)} .gside .btn.primary:hover{filter:brightness(1.06)} /* Вікно «увійдіть». Зроблено тією ж картою, що й сторінка входу: знак і назва вгорі, кнопки сервісів зі своїми значками, роздільник «або», світла кнопка реєстрації. Людина вже бачила це вікно на вході — тут воно те саме, тільки виїжджає поверх журналу. Загальне вікно журналу широке (там форма угоди), тому для цього вмісту звужуємо його й ставимо по центру екрана. */ #modal:has(.gate-w){align-items:center; padding:20px} #modal:has(.gate-w) .modal-box{ max-width:392px; margin-bottom:0; border-radius:14px; background:var(--panel); } .gate-w{padding:32px 30px 26px} .gate-brand{display:flex; align-items:baseline; gap:9px; margin-bottom:24px} .gate-brand .logo{height:28px; width:auto; aspect-ratio:902/1315; display:block; color:var(--text); flex:0 0 auto} .gate-brand .nm{font-family:var(--mono); font-size:18px; font-weight:500; letter-spacing:-.02em} .gate-brand .nm i{font-style:normal; color:var(--accent)} .gate-brand .sub{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)} .gate-w h3{margin:0 0 8px; font-size:18px; font-weight:600; letter-spacing:-.01em} .gate-w p{margin:0 0 20px; font-size:13px; line-height:1.6; color:var(--dim)} .gate-socs{display:flex; flex-direction:column; gap:8px} .gsoc{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 0; border-radius:9px; text-decoration:none; background:var(--panel-2); border:1px solid var(--line); color:var(--text); font-size:13.5px; transition:background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); } .gsoc:hover{background:var(--seg-on-bg,var(--panel-2)); border-color:var(--accent)} .gsoc:active{transform:translateY(1px)} .gsoc svg{width:17px; height:17px; flex:0 0 auto} .gate-or{display:flex; align-items:center; gap:12px; margin:18px 0} .gate-or::before, .gate-or::after{content:""; flex:1; height:1px; background:var(--line)} .gate-or span{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)} /* головна кнопка — світла, як на сторінці входу */ .gate-go{ display:block; width:100%; padding:12px 0; border-radius:9px; text-align:center; text-decoration:none; background:var(--text); color:var(--panel); font-size:14px; font-weight:500; transition:opacity .2s var(--ease); } .gate-go:hover{opacity:.88} .gate-alt{margin-top:16px; text-align:center; font-size:12.5px; color:var(--faint)} .gate-alt a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)} .gate-alt a:hover{color:var(--text)} .gate-later{ display:block; width:100%; text-align:center; margin-top:18px; font-size:12.5px; color:var(--faint); background:none; border:none; cursor:pointer; } .gate-later:hover{color:var(--dim)} /* з чого почати — порожній журнал у свого, вже зареєстрованого */ .begin{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px} .begin .way{ border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--panel-2); text-align:left; display:flex; flex-direction:column; gap:7px; cursor:pointer; transition:border-color .15s, background .15s; } .begin .way:hover{border-color:var(--accent); background:var(--panel)} .begin .way.main{background:var(--accent-soft); border-color:var(--accent-soft)} .begin .way em{ font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .begin .way b{font-size:14.5px; font-weight:600} .begin .way span{font-size:12.5px; line-height:1.5; color:var(--dim)} @media (max-width:900px){ /* на телефоні бічної панелі немає, а зверху стоїть своя шапка (mobile.css). Полосу гостя ставимо над нею: тіло зсуваємо на її висоту, шапку приліплюємо під нею, а відступ вмісту вертаємо мобільний */ html[data-guest] .gbar span{display:none} html[data-guest] body.has-gbar{padding-top:38px} html[data-guest] body.has-gbar .side, html[data-guest] body.has-gbar .main{padding-top:14px} html[data-guest] .mtop{top:38px} .begin{grid-template-columns:1fr} }