/* ───────────────────────────────────────────────────────────── Navtiro — спільний стиль сайту (navtiro.com). Одна палітра й один шелл (шапка/підвал/мова) на всі сторінки: index.html, privacy.html, delete-account.html. ───────────────────────────────────────────────────────────── */ :root{ --bg:#0B1418; --panel:#101E23; --line:#1B2E34; --teal:#46A6AB; --teal-deep:#0E4548; --amber:#E8A33D; --red:#E2574C; --red-deep:#8E2A22; --green:#4FBF8B; --text:#E6EEF0; --muted:#8FA6AB; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{background:var(--bg);color:var(--text);font:400 17px/1.6 'Fira Sans',system-ui,sans-serif} a{color:var(--teal)} .wrap{max-width:1060px;margin:0 auto;padding:0 20px} /* Мова: на стоїть рівно один клас — .uk або .en. Елементи з протилежним lang= ховаються. Той самий механізм на всіх сторінках. */ html.uk [lang="en"]{display:none!important} html.en [lang="uk"]{display:none!important} /* ── Шапка ── */ header{border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:12px} .logo{font:700 26px/1 'Fira Sans Condensed';letter-spacing:.04em;color:var(--text);text-decoration:none} .logo span{color:var(--teal)} .nav-right{display:flex;align-items:center;gap:14px} .lang{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .lang button{background:none;border:none;color:var(--muted);font:600 14px 'Fira Sans';padding:7px 12px;cursor:pointer} .lang button.on{background:var(--teal);color:#06282B} .nav a.cta{background:var(--teal);color:#06282B;text-decoration:none;font-weight:600; padding:9px 18px;border-radius:8px;white-space:nowrap} /* ── Кнопки ── */ .btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:10px;padding:13px 24px;border:none;cursor:pointer} .btn-primary{background:var(--teal);color:#06282B} .btn-ghost{border:1px solid var(--line);color:var(--text);background:none} /* ── Підвал ── */ footer{border-top:1px solid var(--line);padding:30px 0;font-size:14px;color:var(--muted)} footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} footer a{color:var(--muted)} /* ───────────────────────────────────────────────────────────── Юридичні / текстові сторінки (privacy, delete-account) ───────────────────────────────────────────────────────────── */ .page{max-width:820px;margin:0 auto;padding:44px 20px 80px} .page h1{font:700 clamp(30px,4.4vw,42px)/1.1 'Fira Sans Condensed';margin-bottom:8px} .page .meta{color:var(--muted);font-size:14px;margin-bottom:8px} .page h2{font:700 clamp(22px,2.6vw,27px)/1.2 'Fira Sans Condensed'; margin:38px 0 12px;padding-top:18px;border-top:1px solid var(--line)} .page h3{font:600 17px/1.3 'Fira Sans';margin:22px 0 6px;color:var(--teal)} .page p{margin-bottom:12px} .page ul{margin:10px 0 14px 22px} .page li{margin-bottom:7px} .muted{color:var(--muted)} .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin:18px 0} .card.danger{border-color:rgba(226,87,76,.45);background:rgba(226,87,76,.07)} /* Таблиці (мета × правова підстава, отримувачі даних) */ .scroll{overflow-x:auto;margin:14px 0} table{width:100%;border-collapse:collapse;font-size:15px} th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--muted);font-weight:600;font-size:14px} /* ── Форма (видалення акаунта) ── */ label{display:block;font-size:13px;color:var(--muted);margin:16px 0 6px;font-weight:600} input[type=email],input[type=password]{ width:100%;padding:12px 14px;font:400 16px 'Fira Sans'; background:var(--bg);color:var(--text); border:1px solid var(--line);border-radius:10px} input:focus{outline:none;border-color:var(--teal)} .check{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px} .check input{margin-top:5px;flex:none;width:18px;height:18px} .check label{margin:0;color:var(--text);font-weight:400;font-size:15px} .btn-danger{ width:100%;margin-top:18px;padding:14px;font:700 16px 'Fira Sans'; color:#fff;border-radius:10px; background:linear-gradient(135deg,var(--red),var(--red-deep))} .btn-danger:disabled{opacity:.45;cursor:not-allowed} .msg{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:15px;display:none} .msg.err{display:block;background:rgba(226,87,76,.12);border:1px solid rgba(226,87,76,.5);color:#ff9a93} .msg.ok{display:block;background:rgba(79,191,139,.12);border:1px solid rgba(79,191,139,.5);color:#8fe3ba} @media (max-width:860px){ .nav a.cta{display:none} /* на вузькому — не тіснимо шапку */ }