Pouya
2805 lines
227 KiB
HTML
2805 lines
227 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||
<title data-i18n="page_title">Your Passwords Are the Keys to Your Whole Life</title>
|
||
<style>
|
||
/* =========================================================================
|
||
PASSWORD SECURITY — A FIELD GUIDE FOR NORMAL HUMANS (single-file explainer)
|
||
Direction: editorial engineering field-guide, reassuring onboarding voice.
|
||
Cool lavender-paper / midnight-indigo palette, violet-indigo signature
|
||
accent (#6d4aff light / #8c6bff dark), Georgia display serif +
|
||
system sans body + ui-monospace labels, inline-SVG data viz, faint
|
||
engineering grid, numbered section heads, calm single reveal.
|
||
Semantic colour language: good = teal · bad = red · warn = amber
|
||
accent = violet/indigo (the signature move)
|
||
Theme: respects prefers-color-scheme; an explicit toggle overrides via
|
||
:root[data-theme]. Reduced-motion + print styles carried over.
|
||
========================================================================= */
|
||
|
||
:root{
|
||
/* --- light: cool lavender paper, navy ink, violet/indigo signature ------ */
|
||
--bg: #eef0fb;
|
||
--bg-grain: #e4e6f7;
|
||
--surface: #f7f8ff;
|
||
--surface-2: #eaecf9;
|
||
--ink: #15172b;
|
||
--ink-soft: #383b58;
|
||
--muted: #5d6080;
|
||
--faint: #8b8ead;
|
||
--border: #d4d6ee;
|
||
--border-strong: #bfc1e3;
|
||
--rule: #cdcfeb;
|
||
|
||
--accent: #6d4aff; /* violet/indigo signature */
|
||
--accent-ink: #5634d6;
|
||
--accent-wash: #e4ddff;
|
||
|
||
--good: #0f7a73; /* teal */
|
||
--good-wash: #d4ece9;
|
||
--bad: #d62828; /* danger red */
|
||
--bad-wash: #f7dcdc;
|
||
--warn: #b06a00; /* amber-bronze warn (kept warm for semantics) */
|
||
--warn-wash: #f6e7cd;
|
||
--slate: #3f5180; /* neutral / domain */
|
||
--slate-wash: #dde2f1;
|
||
|
||
--shadow: 0 1px 0 rgba(21,23,43,.04), 0 10px 30px -22px rgba(21,23,43,.45);
|
||
--shadow-lift: 0 2px 0 rgba(21,23,43,.05), 0 24px 50px -28px rgba(21,23,43,.5);
|
||
|
||
--serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
|
||
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
|
||
--mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Menlo", "Consolas", monospace;
|
||
|
||
--step--1: clamp(.78rem, .76rem + .12vw, .85rem);
|
||
--step-0: clamp(.95rem, .92rem + .2vw, 1.05rem);
|
||
--step-1: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
|
||
--step-2: clamp(1.5rem, 1.3rem + .8vw, 2rem);
|
||
--step-3: clamp(2rem, 1.6rem + 1.6vw, 3rem);
|
||
--step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem);
|
||
|
||
--maxw: 1080px;
|
||
--gap: clamp(1.5rem, 1rem + 2vw, 3rem);
|
||
}
|
||
|
||
/* ----- dark palette, applied both by system default and explicit toggle -- */
|
||
@media (prefers-color-scheme: dark){
|
||
:root:not([data-theme="light"]){
|
||
--bg: #0c0e1c;
|
||
--bg-grain: #12152a;
|
||
--surface: #161a32;
|
||
--surface-2: #1e2240;
|
||
--ink: #eceefb;
|
||
--ink-soft: #c4c8e6;
|
||
--muted: #9094bd;
|
||
--faint: #62668c;
|
||
--border: #2a2f52;
|
||
--border-strong: #3a4068;
|
||
--rule: #232845;
|
||
|
||
--accent: #8c6bff;
|
||
--accent-ink: #a78cff;
|
||
--accent-wash: #241d4a;
|
||
|
||
--good: #46c2b6;
|
||
--good-wash: #102e2a;
|
||
--bad: #ff6b6b;
|
||
--bad-wash: #3a1b1f;
|
||
--warn: #e0a64a;
|
||
--warn-wash: #392b16;
|
||
--slate: #9aa9d6;
|
||
--slate-wash: #1c2240;
|
||
|
||
--shadow: 0 1px 0 rgba(0,0,0,.4), 0 14px 36px -24px rgba(0,0,0,.9);
|
||
--shadow-lift: 0 2px 0 rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.95);
|
||
}
|
||
}
|
||
:root[data-theme="dark"]{
|
||
--bg: #0c0e1c;
|
||
--bg-grain: #12152a;
|
||
--surface: #161a32;
|
||
--surface-2: #1e2240;
|
||
--ink: #eceefb;
|
||
--ink-soft: #c4c8e6;
|
||
--muted: #9094bd;
|
||
--faint: #62668c;
|
||
--border: #2a2f52;
|
||
--border-strong: #3a4068;
|
||
--rule: #232845;
|
||
|
||
--accent: #8c6bff;
|
||
--accent-ink: #a78cff;
|
||
--accent-wash: #241d4a;
|
||
|
||
--good: #46c2b6;
|
||
--good-wash: #102e2a;
|
||
--bad: #ff6b6b;
|
||
--bad-wash: #3a1b1f;
|
||
--warn: #e0a64a;
|
||
--warn-wash: #392b16;
|
||
--slate: #9aa9d6;
|
||
--slate-wash: #1c2240;
|
||
|
||
--shadow: 0 1px 0 rgba(0,0,0,.4), 0 14px 36px -24px rgba(0,0,0,.9);
|
||
--shadow-lift: 0 2px 0 rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.95);
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
|
||
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
|
||
body{
|
||
margin:0;
|
||
background:
|
||
radial-gradient(120% 80% at 100% 0%, var(--bg-grain) 0%, transparent 55%),
|
||
var(--bg);
|
||
color:var(--ink);
|
||
font-family:var(--sans);
|
||
font-size:var(--step-0);
|
||
line-height:1.6;
|
||
letter-spacing:.005em;
|
||
-webkit-font-smoothing:antialiased;
|
||
text-rendering:optimizeLegibility;
|
||
}
|
||
::selection{background:var(--accent);color:#fff}
|
||
:root[data-theme="dark"] ::selection{color:#fff}
|
||
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) ::selection{color:#fff}}
|
||
a{color:var(--accent-ink);text-underline-offset:.18em}
|
||
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
|
||
|
||
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
|
||
|
||
/* faint engineering grid behind everything */
|
||
body::before{
|
||
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||
background-image:
|
||
linear-gradient(to right, var(--rule) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
|
||
background-size:46px 46px;
|
||
opacity:.22;
|
||
mask-image:radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 80%);
|
||
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 80%);
|
||
}
|
||
|
||
/* skip link */
|
||
/* RTL-safe visually-hidden (left:-9999px caused ~10000px horizontal overflow in dir=rtl) */
|
||
.skip{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
|
||
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
|
||
.skip:focus{width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
|
||
inset-inline-start:1rem;top:1rem;z-index:50;background:var(--ink);color:var(--bg);
|
||
padding:.6rem 1rem;border-radius:6px;font-family:var(--mono);font-size:var(--step--1)}
|
||
|
||
/* ---- type helpers ------------------------------------------------------- */
|
||
.mono{font-family:var(--mono)}
|
||
.num{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
|
||
.kicker{
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;
|
||
}
|
||
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.06;letter-spacing:-.01em}
|
||
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
|
||
padding:.06em .36em;border-radius:4px;color:var(--accent-ink);border:1px solid var(--border)}
|
||
|
||
/* =========================================================================
|
||
MASTHEAD
|
||
========================================================================= */
|
||
.masthead{position:relative;padding:clamp(2.4rem,6vw,5rem) 0 0}
|
||
.masthead .topline{
|
||
display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
color:var(--muted);letter-spacing:.04em;
|
||
border-bottom:1px solid var(--border-strong);
|
||
padding-bottom:.9rem;margin-bottom:clamp(1.6rem,4vw,2.8rem);
|
||
}
|
||
.masthead .topline strong{color:var(--ink);font-weight:600}
|
||
.masthead .topline .sep{color:var(--faint)}
|
||
.masthead .doc-id{margin-left:auto;color:var(--accent)}
|
||
|
||
.masthead h1{font-size:var(--step-4);margin:0 0 .5rem;max-width:18ch}
|
||
.masthead h1 .accent{color:var(--accent)}
|
||
.masthead .sub{
|
||
font-family:var(--mono);color:var(--muted);font-size:var(--step-0);letter-spacing:.02em;
|
||
}
|
||
.masthead .lede{
|
||
margin:1.6rem 0 0;max-width:60ch;font-size:var(--step-1);line-height:1.45;
|
||
color:var(--ink-soft);font-family:var(--serif);
|
||
}
|
||
.masthead .lede b{color:var(--ink)}
|
||
|
||
/* the 30-second TL;DR strip */
|
||
.tldr{
|
||
margin-top:1.8rem;border:1px solid var(--border);border-radius:14px;
|
||
background:
|
||
radial-gradient(120% 140% at 0% 0%, var(--accent-wash) 0%, transparent 55%),
|
||
var(--surface);
|
||
box-shadow:var(--shadow);padding:clamp(1.1rem,3vw,1.6rem) clamp(1.2rem,3vw,1.8rem);
|
||
}
|
||
.tldr .tk{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.18em;
|
||
text-transform:uppercase;color:var(--accent);font-weight:700;display:block;margin-bottom:.8rem}
|
||
.tldr ol{margin:0;padding-left:0;list-style:none;counter-reset:tl;display:grid;gap:.55rem}
|
||
.tldr li{counter-increment:tl;display:grid;grid-template-columns:auto 1fr;gap:.7rem;
|
||
font-size:var(--step-0);line-height:1.5;color:var(--ink-soft)}
|
||
.tldr li::before{content:counter(tl);font-family:var(--mono);font-weight:700;font-size:.78rem;
|
||
color:var(--accent);background:var(--surface-2);border:1px solid var(--border);
|
||
width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;flex:none}
|
||
.tldr li b{color:var(--ink)}
|
||
.tldr .punch{margin:1rem 0 0;padding-top:.9rem;border-top:1px dashed var(--border-strong);
|
||
font-family:var(--serif);font-size:var(--step-1);color:var(--ink)}
|
||
.tldr .punch b{color:var(--accent-ink)}
|
||
|
||
/* a "read this like a map" orientation strip */
|
||
.compass{
|
||
display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem;
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
}
|
||
.compass a{
|
||
text-decoration:none;color:var(--ink-soft);
|
||
border:1px solid var(--border);background:var(--surface);
|
||
padding:.34em .7em;border-radius:99px;display:inline-flex;gap:.45rem;align-items:center;
|
||
transition:border-color .18s ease, color .18s ease;
|
||
}
|
||
.compass a:hover{border-color:var(--accent);color:var(--accent-ink)}
|
||
.compass a .n{color:var(--accent);font-weight:700}
|
||
|
||
/* ---- theme toggle (segmented pill, matches mono label system) ----- */
|
||
.themebar{
|
||
position:absolute;top:clamp(1rem,3vw,1.8rem);right:clamp(1.1rem,4vw,3rem);
|
||
display:flex;align-items:center;gap:.9rem;z-index:5;flex-wrap:wrap;justify-content:flex-end;
|
||
}
|
||
[dir=rtl] .themebar{right:auto;left:clamp(1.1rem,4vw,3rem)}
|
||
.themebar .tgctl{display:inline-flex;align-items:center;gap:.55rem}
|
||
.themebar .tglabel{
|
||
font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
|
||
color:var(--faint);font-weight:700;
|
||
}
|
||
.themeseg{
|
||
display:inline-flex;border:1px solid var(--border-strong);border-radius:99px;
|
||
background:var(--surface);box-shadow:var(--shadow);overflow:hidden;
|
||
padding:2px;gap:2px;
|
||
}
|
||
.themeseg button{
|
||
appearance:none;border:0;cursor:pointer;background:transparent;
|
||
font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
|
||
color:var(--muted);padding:.32em .82em;border-radius:99px;
|
||
transition:background-color .16s ease, color .16s ease;
|
||
line-height:1;display:inline-flex;align-items:center;gap:.35em;
|
||
}
|
||
.themeseg button:hover{color:var(--accent-ink)}
|
||
.themeseg button[aria-pressed="true"]{
|
||
background:var(--accent);color:#fff;box-shadow:0 1px 6px -2px rgba(0,0,0,.4);
|
||
}
|
||
:root[data-theme="dark"] .themeseg button[aria-pressed="true"]{color:#fff}
|
||
@media (prefers-color-scheme: dark){
|
||
:root:not([data-theme="light"]) .themeseg button[aria-pressed="true"]{color:#fff}
|
||
}
|
||
.themeseg button:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
|
||
@media(max-width:560px){
|
||
.themebar .tglabel{display:none}
|
||
.themebar{top:.7rem;right:.9rem}
|
||
}
|
||
|
||
/* ---- language selector — flag buttons matching the segmented theme pill - */
|
||
.langctl{display:inline-flex;align-items:center;gap:.45rem}
|
||
.langseg{
|
||
display:inline-flex;border:1px solid var(--border-strong);border-radius:99px;
|
||
background:var(--surface);box-shadow:var(--shadow);overflow:hidden;padding:2px;gap:2px;
|
||
}
|
||
.langseg .langbtn{
|
||
appearance:none;border:0;cursor:pointer;background:transparent;
|
||
font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.05em;
|
||
color:var(--muted);padding:.26em .54em;border-radius:99px;
|
||
transition:background-color .16s ease,color .16s ease;
|
||
line-height:1;display:inline-flex;align-items:center;gap:.42em;
|
||
}
|
||
.langseg .langbtn .flag{
|
||
width:18px;height:12px;border-radius:2.5px;overflow:hidden;flex:none;display:block;
|
||
box-shadow:0 0 0 1px rgba(0,0,0,.16);
|
||
}
|
||
.langseg .langbtn .flag svg{width:100%;height:100%;display:block}
|
||
.langseg .langbtn .lc{display:inline-block}
|
||
.langseg .langbtn:hover{color:var(--accent-ink)}
|
||
.langseg .langbtn[aria-pressed="true"]{background:var(--accent);color:#fff;box-shadow:0 1px 6px -2px rgba(0,0,0,.4)}
|
||
.langseg .langbtn[aria-pressed="true"] .flag{box-shadow:0 0 0 1px rgba(255,255,255,.6)}
|
||
.langseg .langbtn:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
|
||
@media(max-width:560px){
|
||
.langctl .tglabel{display:none}
|
||
.langseg .langbtn .lc{display:none} /* tighten to flags only on tiny screens */
|
||
}
|
||
|
||
/* ---- RTL adjustments (Persian) ---------------------------------------- */
|
||
[dir=rtl] body{line-height:1.75}
|
||
[dir=rtl] .masthead .doc-id{margin-left:0;margin-right:auto}
|
||
[dir=rtl] .sec-head .note{margin-left:0;margin-right:auto;text-align:left}
|
||
[dir=rtl] .gw-step .gw-time{margin-left:0;margin-right:auto}
|
||
[dir=rtl] .gw-counter{margin-left:0;margin-right:auto}
|
||
[dir=rtl] .faq summary .chev{margin-left:0;margin-right:auto}
|
||
[dir=rtl] .appendix-stamp .ab-sub,[dir=rtl] .advanced .adv-head .skip{margin-left:0}
|
||
[dir=rtl] .advanced .adv-head .skip{margin-right:auto}
|
||
/* mirror the "→" open-link glyphs & roadmap arrows */
|
||
[dir=rtl] .compass a .arw,[dir=rtl] .gobtn svg,[dir=rtl] .zk-arrow svg,
|
||
[dir=rtl] .gw-btn svg,[dir=rtl] .res .arw{transform:scaleX(-1)}
|
||
[dir=rtl] .gw-step ol,[dir=rtl] .gw-step ul,[dir=rtl] .faq .ans ol{padding-left:0;padding-right:1.3rem}
|
||
[dir=rtl] .breath li .b-dot{transform:scaleX(-1);display:inline-block}
|
||
/* left-border accents become right-border accents in RTL.
|
||
Most use border-inline-start already; these few used physical sides. */
|
||
[dir=rtl] .cmp th,[dir=rtl] .cmp td,[dir=rtl] .cmp caption{text-align:right}
|
||
[dir=rtl] .cmp tbody th{text-align:right}
|
||
/* accent left-borders → right-borders, rounded corners mirrored */
|
||
[dir=rtl] .callout,[dir=rtl] .fix-banner{
|
||
border-left:1px solid var(--border);
|
||
border-right:4px solid var(--slate);
|
||
border-radius:12px 0 0 12px;
|
||
}
|
||
[dir=rtl] .fix-banner{border-right-color:var(--good)}
|
||
[dir=rtl] .callout.warn{border-right-color:var(--warn);border-left-color:var(--border)}
|
||
[dir=rtl] .callout.crit{border-right-color:var(--bad);border-left-color:var(--border)}
|
||
[dir=rtl] .callout.good{border-right-color:var(--good);border-left-color:var(--border)}
|
||
[dir=rtl] .method-list li{
|
||
border-left:1px solid var(--border);border-right:3px solid var(--slate);
|
||
border-radius:9px 0 0 9px;
|
||
}
|
||
[dir=rtl] .method-list li.best{border-right-color:var(--good)}
|
||
[dir=rtl] .method-list li.avoid{border-right-color:var(--warn)}
|
||
/* callout/breath gradient washes flow from the start edge — mirror angle */
|
||
[dir=rtl] .callout.warn{background:linear-gradient(260deg,var(--warn-wash),transparent 55%),var(--surface)}
|
||
[dir=rtl] .callout.crit{background:linear-gradient(260deg,var(--bad-wash),transparent 55%),var(--surface)}
|
||
[dir=rtl] .callout.good{background:linear-gradient(260deg,var(--good-wash),transparent 55%),var(--surface)}
|
||
[dir=rtl] .fix-banner{background:linear-gradient(260deg,var(--good-wash),transparent 60%),var(--surface)}
|
||
/* keep inherently-LTR content LTR even inside an RTL page */
|
||
[dir=rtl] code,[dir=rtl] .codeblock code,[dir=rtl] .zk-stage .blob,
|
||
[dir=rtl] .masthead .doc-id,[dir=rtl] footer .num{unicode-bidi:isolate}
|
||
.ltr{direction:ltr;unicode-bidi:isolate;text-align:start}
|
||
|
||
/* Persian font stack — system fallbacks only, NO web font loaded */
|
||
[lang=fa],[dir=rtl]{
|
||
font-family:'Vazirmatn','Noto Naskh Arabic','Noto Sans Arabic','Tahoma',var(--sans);
|
||
}
|
||
[lang=fa] h1,[lang=fa] h2,[lang=fa] h3,[lang=fa] h4,
|
||
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{
|
||
font-family:'Vazirmatn','Noto Naskh Arabic','Tahoma',var(--serif);letter-spacing:0;line-height:1.3;
|
||
}
|
||
|
||
/* ---- onboarding coachmark (Change 4) ---------------------------------- */
|
||
.coach{
|
||
position:fixed;top:clamp(3.4rem,7vw,4.6rem);right:clamp(1.1rem,4vw,3rem);
|
||
z-index:40;max-width:min(86vw,300px);
|
||
background:var(--surface);color:var(--ink);
|
||
border:1px solid var(--accent);border-radius:13px;
|
||
box-shadow:var(--shadow-lift);
|
||
padding:.85rem 2.1rem .85rem 1rem;
|
||
font-family:var(--sans);font-size:var(--step--1);line-height:1.45;
|
||
opacity:0;pointer-events:none;
|
||
transform:translateY(-10px) scale(.96);
|
||
transition:opacity .35s ease, transform .4s cubic-bezier(.2,.8,.25,1.2);
|
||
}
|
||
[dir=rtl] .coach{right:auto;left:clamp(1.1rem,4vw,3rem);padding:.85rem 1rem .85rem 2.1rem}
|
||
.coach.show{opacity:1;pointer-events:auto;transform:none}
|
||
.coach.hide{opacity:0;transform:translateY(-8px) scale(.98)}
|
||
.coach .ck{display:block;font-family:var(--mono);font-size:.58rem;font-weight:700;
|
||
letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.25rem}
|
||
.coach .ctxt b{color:var(--ink)}
|
||
/* the pointer/arrow shape aimed up at the themebar */
|
||
.coach::before{
|
||
content:"";position:absolute;top:-9px;left:var(--arrow-x,2.2rem);right:auto;
|
||
width:16px;height:16px;background:var(--surface);
|
||
border-left:1px solid var(--accent);border-top:1px solid var(--accent);
|
||
transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0;
|
||
}
|
||
.coach .coach-x{
|
||
position:absolute;top:.3rem;right:.35rem;inset-inline-end:.35rem;inset-inline-start:auto;
|
||
appearance:none;border:0;background:transparent;cursor:pointer;
|
||
color:var(--muted);width:1.7em;height:1.7em;border-radius:50%;
|
||
display:grid;place-items:center;line-height:1;font-size:1rem;
|
||
transition:color .15s,background-color .15s;
|
||
}
|
||
[dir=rtl] .coach .coach-x{right:auto;left:.35rem}
|
||
.coach .coach-x:hover{color:var(--accent-ink);background:var(--accent-wash)}
|
||
.coach .coach-x:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
|
||
.coach .arrowhint{color:var(--accent-ink);font-weight:700;display:inline-block}
|
||
[dir=rtl] .coach .arrowhint{transform:scaleX(-1)}
|
||
@media (prefers-reduced-motion: no-preference){
|
||
.coach.show .pulse{animation:coachbounce 1.1s ease-in-out 3}
|
||
}
|
||
@keyframes coachbounce{
|
||
0%,100%{transform:translateY(0)}
|
||
50%{transform:translateY(-3px)}
|
||
}
|
||
@media (prefers-reduced-motion: reduce){
|
||
.coach{transition:opacity .3s ease}
|
||
.coach.show{transform:none}
|
||
.coach.hide{transform:none}
|
||
}
|
||
@media(max-width:560px){
|
||
.coach{top:2.7rem;max-width:min(82vw,240px)}
|
||
}
|
||
|
||
/* =========================================================================
|
||
SECTION SHELL
|
||
========================================================================= */
|
||
section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
|
||
.sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
|
||
.sec-head .tag{
|
||
font-family:var(--mono);font-weight:700;font-size:var(--step--1);
|
||
color:var(--bg);background:var(--ink);
|
||
padding:.28em .7em;border-radius:3px;letter-spacing:.1em;flex:none;
|
||
}
|
||
.sec-head h2{font-size:var(--step-3);margin:0;max-width:26ch}
|
||
.sec-head .note{
|
||
margin-left:auto;font-family:var(--mono);font-size:var(--step--1);
|
||
color:var(--muted);align-self:flex-end;text-align:right;max-width:36ch;line-height:1.5;
|
||
}
|
||
|
||
/* ---- generic prose helpers used across sections ------------------------- */
|
||
.prose{max-width:64ch}
|
||
.prose p{margin:0 0 1rem;color:var(--ink-soft);line-height:1.65}
|
||
.prose p:last-child{margin-bottom:0}
|
||
.prose b{color:var(--ink)}
|
||
|
||
/* =========================================================================
|
||
SECTION 1 — WHY (key analogy + qualitative stat cards)
|
||
========================================================================= */
|
||
.analogy{
|
||
display:grid;grid-template-columns:1fr;gap:0;
|
||
border:1px solid var(--border);border-radius:14px;overflow:hidden;
|
||
box-shadow:var(--shadow-lift);background:var(--surface);
|
||
}
|
||
@media(min-width:760px){.analogy{grid-template-columns:1.1fr 1fr}}
|
||
.analogy .txt{padding:clamp(1.6rem,4vw,2.6rem)}
|
||
.analogy .lab{
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
text-transform:uppercase;letter-spacing:.16em;font-weight:700;margin-bottom:.9rem;display:block;
|
||
color:var(--accent);
|
||
}
|
||
.analogy blockquote{margin:0;font-family:var(--serif);
|
||
font-size:clamp(1.2rem,1rem+1vw,1.6rem);line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
|
||
.analogy blockquote em{font-style:normal;font-weight:700;color:var(--accent-ink)}
|
||
.analogy .body{margin-top:1.1rem;font-size:var(--step--1);color:var(--ink-soft);line-height:1.6}
|
||
.analogy .body b{color:var(--ink)}
|
||
.analogy .keypic{
|
||
background:repeating-linear-gradient(135deg, var(--surface-2) 0 2px, transparent 2px 9px), var(--surface-2);
|
||
display:grid;place-items:center;padding:clamp(1.6rem,4vw,2.6rem);
|
||
border-top:1px solid var(--border);
|
||
}
|
||
@media(min-width:760px){.analogy .keypic{border-top:none;border-left:1px solid var(--border)}}
|
||
.analogy .keypic svg{width:100%;max-width:320px;height:auto;color:var(--accent)}
|
||
|
||
/* stat cards — honest qualitative figures (no fake-percentage rings) */
|
||
.stats{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:18px}
|
||
@media(max-width:760px){.stats{grid-template-columns:1fr}}
|
||
.stat{
|
||
--sc:var(--accent); /* semantic colour, overridden per card */
|
||
--sc-wash:var(--accent-wash);
|
||
background:var(--surface);border:1px solid var(--border);border-radius:13px;
|
||
border-top:3px solid var(--sc);box-shadow:var(--shadow);
|
||
padding:1.4rem 1.25rem 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;
|
||
}
|
||
.stat--accent{--sc:var(--accent);--sc-wash:var(--accent-wash)}
|
||
.stat--warn {--sc:var(--warn); --sc-wash:var(--warn-wash)}
|
||
.stat--bad {--sc:var(--bad); --sc-wash:var(--bad-wash)}
|
||
|
||
/* fixed-geometry icon medallion — identical across all three cards */
|
||
.stat .medallion{
|
||
width:84px;height:84px;flex:none;border-radius:50%;
|
||
display:grid;place-items:center;margin-bottom:.95rem;
|
||
background:var(--sc-wash);
|
||
border:1.5px solid color-mix(in srgb, var(--sc) 35%, transparent);
|
||
box-shadow:0 0 0 6px color-mix(in srgb, var(--sc) 7%, transparent);
|
||
}
|
||
.stat .medallion svg{width:42px;height:42px;display:block;color:var(--sc)}
|
||
|
||
/* the qualitative lead word — bold figure, NOT a measured number */
|
||
.stat .lead{
|
||
font-family:var(--serif);font-weight:700;line-height:1.05;
|
||
font-size:clamp(1.5rem,1.2rem+1vw,1.85rem);letter-spacing:-.015em;
|
||
color:var(--sc);margin:0 0 .12rem;min-height:1.05em;
|
||
}
|
||
.stat .lead-sub{
|
||
font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
|
||
color:var(--muted);margin:0 0 .85rem;min-height:1em;
|
||
}
|
||
.stat .glabel{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
|
||
color:var(--sc);font-weight:700;margin-bottom:.3rem}
|
||
.stat h3{font-size:var(--step-0);margin:0 0 .35rem;font-family:var(--serif);line-height:1.2}
|
||
.stat p{margin:0;font-size:var(--step--1);color:var(--muted);line-height:1.5}
|
||
.stat .src{margin-top:auto;padding-top:.7rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--faint)}
|
||
|
||
.fix-banner{
|
||
margin-top:18px;border:1px solid var(--border);border-left:4px solid var(--good);
|
||
border-radius:0 12px 12px 0;background:
|
||
linear-gradient(100deg,var(--good-wash),transparent 60%),var(--surface);
|
||
box-shadow:var(--shadow);padding:1.1rem 1.3rem;
|
||
}
|
||
.fix-banner .fk{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
|
||
color:var(--good);font-weight:700;display:block;margin-bottom:.4rem}
|
||
.fix-banner p{margin:0;font-family:var(--serif);font-size:var(--step-1);line-height:1.4;color:var(--ink)}
|
||
.fix-banner p b{color:var(--accent-ink)}
|
||
|
||
/* =========================================================================
|
||
SECTION 2 — WHAT IT IS (three plain facts) + honest-limit callout
|
||
========================================================================= */
|
||
.whatcards{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
|
||
@media(max-width:820px){.whatcards{grid-template-columns:1fr}}
|
||
.wcard{background:var(--surface);border:1px solid var(--border);border-radius:13px;
|
||
padding:1.2rem 1.25rem 1.3rem;box-shadow:var(--shadow);display:flex;flex-direction:column}
|
||
.wcard .wic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
|
||
background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--border);margin-bottom:.7rem}
|
||
.wcard h3{font-size:var(--step-1);margin:0 0 .35rem;font-family:var(--serif);line-height:1.1}
|
||
.wcard p{margin:0;color:var(--ink-soft);font-size:var(--step--1);line-height:1.55}
|
||
.wcard p b{color:var(--ink)}
|
||
|
||
.benefits{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:14px}
|
||
@media(max-width:760px){.benefits{grid-template-columns:1fr}}
|
||
.benefit{background:var(--surface);border:1px solid var(--border);border-radius:12px;
|
||
border-top:3px solid var(--good);box-shadow:var(--shadow);padding:1.1rem 1.2rem}
|
||
.benefit h4{margin:0 0 .35rem;font-size:var(--step-0);font-family:var(--serif)}
|
||
.benefit p{margin:0;font-size:var(--step--1);color:var(--ink-soft);line-height:1.55}
|
||
.benefit p b{color:var(--ink)}
|
||
|
||
/* =========================================================================
|
||
CALLOUT CARDS (info / warn / critical) — reused everywhere
|
||
========================================================================= */
|
||
.callout{
|
||
border:1px solid var(--border);border-left:4px solid var(--slate);border-radius:0 12px 12px 0;
|
||
background:var(--surface);box-shadow:var(--shadow);padding:1rem 1.2rem;margin-top:16px;
|
||
display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
|
||
}
|
||
.callout .cic{flex:none;color:var(--slate);margin-top:.15rem}
|
||
.callout .ck{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
|
||
font-weight:700;color:var(--slate);display:block;margin-bottom:.3rem}
|
||
.callout h4{margin:0 0 .3rem;font-size:var(--step-0);font-family:var(--serif)}
|
||
.callout p{margin:0;font-size:var(--step--1);color:var(--ink-soft);line-height:1.55}
|
||
.callout p + p{margin-top:.5rem}
|
||
.callout p b{color:var(--ink)}
|
||
.callout.warn{border-left-color:var(--warn);background:linear-gradient(100deg,var(--warn-wash),transparent 55%),var(--surface)}
|
||
.callout.warn .cic,.callout.warn .ck{color:var(--warn)}
|
||
.callout.crit{border-left-color:var(--bad);background:linear-gradient(100deg,var(--bad-wash),transparent 55%),var(--surface)}
|
||
.callout.crit .cic,.callout.crit .ck{color:var(--bad)}
|
||
.callout.good{border-left-color:var(--good);background:linear-gradient(100deg,var(--good-wash),transparent 55%),var(--surface)}
|
||
.callout.good .cic,.callout.good .ck{color:var(--good)}
|
||
|
||
/* =========================================================================
|
||
SECTION 3+4 — COMPARISON TABLE
|
||
========================================================================= */
|
||
.cmp-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;
|
||
box-shadow:var(--shadow-lift);background:var(--surface)}
|
||
.cmp{width:100%;border-collapse:collapse;font-size:var(--step--1)}
|
||
.cmp caption{text-align:left;padding:1rem 1.2rem;font-family:var(--mono);font-size:.62rem;
|
||
letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
|
||
.cmp th,.cmp td{padding:.85rem 1.05rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
|
||
.cmp thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
|
||
color:var(--muted);background:var(--surface-2);font-weight:700;position:sticky;top:0}
|
||
.cmp thead th.brand{color:var(--ink)}
|
||
.cmp thead th.brand.win{color:var(--accent)}
|
||
.cmp tbody th{font-family:var(--serif);font-weight:700;font-size:var(--step-0);color:var(--ink);width:30%}
|
||
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:none}
|
||
.cmp td{color:var(--ink-soft);line-height:1.45}
|
||
.cmp .verdict{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);
|
||
font-size:.66rem;font-weight:700;letter-spacing:.02em}
|
||
.cmp .verdict.no{color:var(--bad)}
|
||
.cmp .verdict.yes{color:var(--good)}
|
||
.cmp .verdict.meh{color:var(--warn)}
|
||
.cmp .vd{font-size:.8rem}
|
||
.cmp col.bw{background:linear-gradient(180deg,var(--accent-wash),transparent 90%)}
|
||
@media(max-width:680px){
|
||
.cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
|
||
.cmp thead{position:absolute;left:-9999px}
|
||
.cmp tbody tr{border-bottom:2px solid var(--border-strong);padding:.4rem 0}
|
||
.cmp tbody th{width:auto;padding-bottom:.3rem}
|
||
.cmp tbody td{border-bottom:1px solid var(--rule)}
|
||
.cmp tbody td::before{content:attr(data-h);font-family:var(--mono);font-size:.6rem;
|
||
letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.2rem;font-weight:700}
|
||
}
|
||
|
||
/* =========================================================================
|
||
SECTION 5 — ZERO-KNOWLEDGE FLOW (inline-SVG flow diagram)
|
||
========================================================================= */
|
||
.zk-wrap{
|
||
border:1px solid var(--border);border-radius:16px;
|
||
background:
|
||
radial-gradient(120% 120% at 50% 0%, var(--accent-wash) 0%, transparent 55%),
|
||
var(--surface);
|
||
box-shadow:var(--shadow-lift);padding:clamp(1.4rem,4vw,2.4rem);overflow:hidden;position:relative;
|
||
}
|
||
.zk-wrap::before{
|
||
content:"";position:absolute;inset:0;pointer-events:none;
|
||
background-image:
|
||
linear-gradient(to right, var(--rule) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
|
||
background-size:34px 34px;opacity:.16;
|
||
mask-image:radial-gradient(80% 80% at 50% 40%, transparent 25%, #000 95%);
|
||
-webkit-mask-image:radial-gradient(80% 80% at 50% 40%, transparent 25%, #000 95%);
|
||
}
|
||
.zk-flow{position:relative;z-index:1;display:grid;gap:16px;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
|
||
@media(max-width:820px){.zk-flow{grid-template-columns:1fr;gap:10px}}
|
||
.zk-stage{background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;
|
||
border-top:3px solid var(--accent);box-shadow:var(--shadow);padding:1rem 1.05rem 1.1rem;
|
||
display:flex;flex-direction:column;align-items:center;text-align:center}
|
||
.zk-stage .zk-ic{color:var(--accent);margin-bottom:.5rem}
|
||
.zk-stage .zk-step{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;
|
||
text-transform:uppercase;color:var(--accent)}
|
||
.zk-stage h4{margin:.2rem 0 .35rem;font-size:var(--step-0);font-family:var(--serif);line-height:1.15}
|
||
.zk-stage p{margin:0;font-size:var(--step--1);color:var(--ink-soft);line-height:1.45}
|
||
.zk-stage .blob{margin-top:.5rem;font-family:var(--mono);font-size:.62rem;color:var(--muted);
|
||
background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:6px;
|
||
padding:.3rem .5rem;word-break:break-all;line-height:1.5}
|
||
.zk-arrow{display:grid;place-items:center;color:var(--accent)}
|
||
@media(max-width:820px){.zk-arrow{transform:rotate(90deg)}}
|
||
.zk-cap{position:relative;z-index:1;margin:1.4rem auto 0;max-width:62ch;text-align:center;
|
||
font-family:var(--serif);font-size:var(--step-1);line-height:1.4;color:var(--ink-soft)}
|
||
.zk-cap b{color:var(--accent-ink)}
|
||
|
||
/* =========================================================================
|
||
SECTION 6 — GUIDED WALKTHROUGH (centerpiece interactive)
|
||
========================================================================= */
|
||
.gw{border:1px solid var(--border);border-radius:16px;background:var(--surface);
|
||
box-shadow:var(--shadow-lift);overflow:hidden}
|
||
.gw-roadmap{display:flex;flex-wrap:wrap;gap:8px;padding:clamp(1rem,3vw,1.4rem);
|
||
border-bottom:1px solid var(--border);background:var(--surface-2)}
|
||
.gw-rm-btn{appearance:none;cursor:pointer;font-family:var(--mono);font-size:.66rem;font-weight:700;
|
||
letter-spacing:.02em;display:inline-flex;align-items:center;gap:.5rem;
|
||
background:var(--surface);border:1px solid var(--border);color:var(--muted);
|
||
padding:.4em .7em .4em .5em;border-radius:99px;transition:border-color .16s,color .16s,background-color .16s}
|
||
.gw-rm-btn .rm-n{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;flex:none;
|
||
background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:.72em}
|
||
.gw-rm-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
|
||
.gw-rm-btn[aria-current="step"]{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
|
||
.gw-rm-btn[aria-current="step"] .rm-n{background:var(--accent);border-color:var(--accent);color:#fff}
|
||
.gw-rm-btn.done{color:var(--good)}
|
||
.gw-rm-btn.done .rm-n{background:var(--good);border-color:var(--good);color:#fff}
|
||
:root[data-theme="dark"] .gw-rm-btn[aria-current="step"] .rm-n,
|
||
:root[data-theme="dark"] .gw-rm-btn.done .rm-n{color:#fff}
|
||
@media (prefers-color-scheme: dark){
|
||
:root:not([data-theme="light"]) .gw-rm-btn[aria-current="step"] .rm-n,
|
||
:root:not([data-theme="light"]) .gw-rm-btn.done .rm-n{color:#fff}
|
||
}
|
||
.gw-rm-btn .rm-label{display:none}
|
||
@media(min-width:720px){.gw-rm-btn .rm-label{display:inline}}
|
||
|
||
.gw-progress{height:5px;background:var(--surface-2);position:relative}
|
||
.gw-progress .bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--good));
|
||
width:12.5%;transition:width .4s cubic-bezier(.2,.7,.2,1)}
|
||
@media (prefers-reduced-motion: reduce){.gw-progress .bar{transition:none}}
|
||
|
||
.gw-stage{padding:clamp(1.4rem,4vw,2.2rem)}
|
||
.gw-step{display:none}
|
||
.gw-step.active{display:block}
|
||
/* JS-off fallback: show all steps stacked */
|
||
.gw[data-js="off"] .gw-step{display:block;border-top:1px solid var(--rule);padding-top:1.4rem;margin-top:1.4rem}
|
||
.gw[data-js="off"] .gw-step:first-child{border-top:none;padding-top:0;margin-top:0}
|
||
.gw[data-js="off"] .gw-controls,.gw[data-js="off"] .gw-progress{display:none}
|
||
|
||
.gw-step .gw-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem;flex-wrap:wrap}
|
||
.gw-step .gw-num{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--accent);
|
||
width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;flex:none}
|
||
.gw-step .gw-phase{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
|
||
color:var(--muted);font-weight:700}
|
||
.gw-step .gw-time{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:var(--faint)}
|
||
.gw-step h3{font-size:var(--step-2);margin:0 0 .6rem;font-family:var(--serif)}
|
||
.gw-step p{margin:0 0 .8rem;color:var(--ink-soft);line-height:1.6;max-width:64ch}
|
||
.gw-step p:last-child{margin-bottom:0}
|
||
.gw-step p b{color:var(--ink)}
|
||
.gw-step ol,.gw-step ul{margin:0 0 .8rem;padding-left:1.3rem;color:var(--ink-soft);line-height:1.6;max-width:64ch}
|
||
.gw-step li{margin-bottom:.4rem}
|
||
.gw-step li b{color:var(--ink)}
|
||
|
||
.gw-controls{display:flex;align-items:center;gap:.8rem;padding:clamp(1rem,3vw,1.4rem);
|
||
border-top:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
|
||
.gw-btn{appearance:none;cursor:pointer;font-family:var(--mono);font-size:.74rem;font-weight:700;
|
||
letter-spacing:.04em;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);
|
||
padding:.6em 1.1em;border-radius:99px;display:inline-flex;align-items:center;gap:.5rem;
|
||
transition:border-color .16s,color .16s}
|
||
.gw-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-ink)}
|
||
.gw-btn:disabled{opacity:.4;cursor:not-allowed}
|
||
.gw-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
|
||
:root[data-theme="dark"] .gw-btn.primary{color:#fff}
|
||
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gw-btn.primary{color:#fff}}
|
||
.gw-btn.primary:hover:not(:disabled){color:#fff}
|
||
:root[data-theme="dark"] .gw-btn.primary:hover:not(:disabled){color:#fff}
|
||
.gw-counter{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.04em}
|
||
|
||
/* code block with copy button */
|
||
.codeblock{display:flex;align-items:center;gap:.6rem;background:var(--surface-2);
|
||
border:1px solid var(--border-strong);border-radius:9px;padding:.5rem .55rem .5rem .85rem;
|
||
margin:.2rem 0 .9rem;max-width:64ch;flex-wrap:wrap}
|
||
.codeblock code{background:none;border:none;padding:0;color:var(--accent-ink);font-size:.84rem;
|
||
word-break:break-all;flex:1;min-width:0}
|
||
.copybtn{appearance:none;cursor:pointer;font-family:var(--mono);font-size:.64rem;font-weight:700;
|
||
letter-spacing:.06em;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-soft);
|
||
padding:.4em .7em;border-radius:7px;display:inline-flex;align-items:center;gap:.4rem;flex:none;
|
||
transition:border-color .16s,color .16s,background-color .16s}
|
||
.copybtn:hover{border-color:var(--accent);color:var(--accent-ink)}
|
||
.copybtn.copied{border-color:var(--good);color:var(--good);background:var(--good-wash)}
|
||
.copybtn svg{width:13px;height:13px}
|
||
|
||
.method-list{display:grid;gap:.6rem;margin:.4rem 0 .9rem;padding:0;list-style:none;max-width:64ch}
|
||
.method-list li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
|
||
background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--slate);
|
||
border-radius:0 9px 9px 0;padding:.6rem .85rem;font-size:var(--step--1);line-height:1.5;color:var(--ink-soft)}
|
||
.method-list li.best{border-left-color:var(--good)}
|
||
.method-list li.avoid{border-left-color:var(--warn)}
|
||
.method-list li .mrank{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;
|
||
white-space:nowrap;align-self:start}
|
||
.method-list li.best .mrank{color:var(--good)}
|
||
.method-list li.avoid .mrank{color:var(--warn)}
|
||
.method-list li b{color:var(--ink)}
|
||
|
||
/* =========================================================================
|
||
SECTION 7 — BROWSER EXTENSION (annotated chip row)
|
||
========================================================================= */
|
||
.ext-bar{border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
|
||
background:var(--surface);margin-bottom:16px}
|
||
.ext-mock{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:var(--surface-2);
|
||
border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.72rem;color:var(--muted)}
|
||
.ext-mock .dots{display:flex;gap:.35rem}
|
||
.ext-mock .dots span{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
|
||
.ext-mock .url{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:99px;
|
||
padding:.25em .8em;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.ext-mock .shield{color:var(--accent);display:inline-flex;align-items:center;gap:.3rem;font-weight:700}
|
||
.chips{display:grid;gap:12px;grid-template-columns:repeat(5,1fr)}
|
||
@media(max-width:880px){.chips{grid-template-columns:repeat(2,1fr)}}
|
||
@media(max-width:480px){.chips{grid-template-columns:1fr}}
|
||
.chip{background:var(--surface);border:1px solid var(--border);border-radius:12px;
|
||
box-shadow:var(--shadow);padding:1rem 1.05rem;display:flex;flex-direction:column}
|
||
.chip .chic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
|
||
background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--border);margin-bottom:.55rem}
|
||
.chip h4{margin:0 0 .25rem;font-size:var(--step-0);font-family:var(--serif);line-height:1.1}
|
||
.chip p{margin:0;font-size:var(--step--1);color:var(--ink-soft);line-height:1.45}
|
||
|
||
/* =========================================================================
|
||
SECTION 8 — FAQ (accordion)
|
||
========================================================================= */
|
||
.faq{display:grid;gap:12px}
|
||
.faq details{border:1px solid var(--border);border-radius:12px;background:var(--surface);
|
||
box-shadow:var(--shadow);overflow:hidden}
|
||
.faq summary{list-style:none;cursor:pointer;padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;
|
||
font-family:var(--serif);font-weight:700;font-size:var(--step-1);color:var(--ink)}
|
||
.faq summary::-webkit-details-marker{display:none}
|
||
.faq summary .qmark{font-family:var(--mono);font-size:.9rem;font-weight:700;color:var(--accent);
|
||
width:1.7em;height:1.7em;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;flex:none}
|
||
.faq summary .chev{margin-left:auto;color:var(--muted);transition:transform .2s ease;flex:none}
|
||
@media (prefers-reduced-motion: reduce){.faq summary .chev{transition:none}}
|
||
.faq details[open] summary .chev{transform:rotate(180deg)}
|
||
.faq .ans{padding:0 1.2rem 1.2rem;color:var(--ink-soft);line-height:1.65;max-width:70ch}
|
||
.faq .ans p{margin:0 0 .8rem}
|
||
.faq .ans p:last-child{margin-bottom:0}
|
||
.faq .ans b{color:var(--ink)}
|
||
.faq .ans ol{margin:0 0 .6rem;padding-left:1.3rem}
|
||
.faq .ans li{margin-bottom:.4rem}
|
||
|
||
/* =========================================================================
|
||
SECTION 9 — VAULTWARDEN (advanced / dimmed)
|
||
========================================================================= */
|
||
.advanced{
|
||
border:1px dashed var(--border-strong);border-radius:16px;overflow:hidden;
|
||
background:repeating-linear-gradient(135deg, var(--surface-2) 0 1px, transparent 1px 11px), var(--surface);
|
||
opacity:.92;
|
||
}
|
||
.advanced .adv-head{padding:clamp(1.1rem,3vw,1.6rem);border-bottom:1px dashed var(--border-strong);
|
||
display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
|
||
.advanced .adv-flag{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;
|
||
text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:99px;padding:.3em .7em}
|
||
.advanced .adv-head h3{margin:0;font-size:var(--step-1);font-family:var(--serif)}
|
||
.advanced .adv-head .skip{position:static;font-family:var(--mono);font-size:.66rem;color:var(--muted);
|
||
margin-left:auto;background:none;padding:0;left:auto;top:auto}
|
||
.advanced .adv-body{padding:clamp(1.1rem,3vw,1.6rem)}
|
||
.advanced .adv-body > p{margin:0 0 1rem;color:var(--ink-soft);line-height:1.6;max-width:66ch}
|
||
.advanced .adv-body > p b{color:var(--ink)}
|
||
.adv-cols{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:.4rem}
|
||
@media(max-width:720px){.adv-cols{grid-template-columns:1fr}}
|
||
.adv-col{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:1rem 1.15rem}
|
||
.adv-col.why{border-top:3px solid var(--good)}
|
||
.adv-col.cost{border-top:3px solid var(--bad)}
|
||
.adv-col h4{margin:0 0 .6rem;font-size:var(--step-0);font-family:var(--serif)}
|
||
.adv-col ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
|
||
.adv-col li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:var(--step--1);
|
||
line-height:1.5;color:var(--ink-soft)}
|
||
.adv-col li .m{font-family:var(--mono);font-weight:700;flex:none}
|
||
.adv-col.why li .m{color:var(--good)}
|
||
.adv-col.cost li .m{color:var(--bad)}
|
||
.adv-col li b{color:var(--ink)}
|
||
|
||
/* the one red warning phrase — a genuine danger red, not the violet accent */
|
||
.danger-text{
|
||
color:var(--bad);font-weight:800;
|
||
background:var(--bad-wash);
|
||
padding:.04em .34em;border-radius:5px;
|
||
box-decoration-break:clone;-webkit-box-decoration-break:clone;
|
||
letter-spacing:.005em;
|
||
}
|
||
|
||
/* =========================================================================
|
||
ACTION BUTTONS — inline "Open ↗" / "Copy" calls-to-action (violet theme)
|
||
========================================================================= */
|
||
.act-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.45rem 0 .2rem}
|
||
.gobtn{
|
||
appearance:none;cursor:pointer;font-family:var(--mono);font-size:.7rem;font-weight:700;
|
||
letter-spacing:.04em;display:inline-flex;align-items:center;gap:.45rem;
|
||
border:1px solid var(--accent);background:var(--accent);color:#fff;
|
||
padding:.42em .85em;border-radius:99px;line-height:1;
|
||
transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s;
|
||
box-shadow:0 1px 8px -3px rgba(109,74,255,.6);
|
||
}
|
||
.gobtn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
|
||
.gobtn svg{width:13px;height:13px;flex:none}
|
||
.gobtn:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
|
||
/* secondary (copy / browser-internal) variant — outlined, not filled */
|
||
.gobtn.ghost{background:var(--surface);color:var(--accent-ink);border-color:var(--border-strong)}
|
||
.gobtn.ghost:hover{background:var(--surface-2);border-color:var(--accent);color:var(--accent-ink)}
|
||
.gobtn.ghost.copied{border-color:var(--good);color:var(--good);background:var(--good-wash)}
|
||
.act-note{font-family:var(--mono);font-size:.6rem;letter-spacing:.02em;color:var(--faint);line-height:1.4}
|
||
|
||
/* =========================================================================
|
||
BONUS / APPENDIX DIVIDER — detaches the optional Vaultwarden block
|
||
========================================================================= */
|
||
.appendix-break{
|
||
border-top:none;padding-top:clamp(2rem,5vw,3.4rem);margin-top:clamp(1rem,3vw,2rem);
|
||
position:relative;
|
||
}
|
||
.appendix-break::before{
|
||
content:"";display:block;height:0;
|
||
border-top:2px dashed var(--border-strong);
|
||
margin-bottom:clamp(1.6rem,4vw,2.6rem);
|
||
opacity:.8;
|
||
}
|
||
.appendix-stamp{
|
||
display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.4rem;
|
||
}
|
||
.appendix-stamp .ab-tag{
|
||
font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
|
||
color:#fff;background:var(--accent);border-radius:99px;padding:.4em .9em;flex:none;
|
||
}
|
||
.appendix-stamp .ab-sub{
|
||
font-family:var(--mono);font-size:var(--step--1);color:var(--muted);letter-spacing:.02em;line-height:1.5;
|
||
}
|
||
.appendix-stamp .ab-sub b{color:var(--ink-soft)}
|
||
.appendix .advanced{opacity:.96}
|
||
|
||
/* =========================================================================
|
||
SECTION 10 — IN ONE BREATH (summary) + resources
|
||
========================================================================= */
|
||
/* emphasized takeaways card — theme-consistent for BOTH light & dark:
|
||
a tinted surface that belongs to the page, marked special by a thick
|
||
accent left-border + accent heading. No hard inversion. */
|
||
.breath{border:1px solid var(--border);border-inline-start:5px solid var(--accent);
|
||
border-radius:0 16px 16px 0;
|
||
background:
|
||
linear-gradient(105deg, var(--accent-wash) 0%, transparent 60%),
|
||
var(--surface-2);
|
||
color:var(--ink);
|
||
box-shadow:var(--shadow);
|
||
padding:clamp(1.4rem,4vw,2.2rem)}
|
||
.breath .bk{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;
|
||
color:var(--accent-ink);font-weight:700;display:block;margin-bottom:1rem}
|
||
.breath ul{margin:0;padding:0;list-style:none;display:grid;gap:.65rem}
|
||
.breath li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:var(--step-0);line-height:1.5;color:var(--ink-soft)}
|
||
.breath li .b-dot{color:var(--accent-ink);font-weight:700;flex:none}
|
||
.breath li b{color:var(--ink)}
|
||
.breath .closer{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px dashed var(--border-strong);
|
||
font-family:var(--serif);font-size:var(--step-1);line-height:1.4;color:var(--ink)}
|
||
.breath .closer em{font-style:normal;color:var(--accent-ink)}
|
||
|
||
.resources{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:18px}
|
||
@media(max-width:680px){.resources{grid-template-columns:1fr}}
|
||
.res{display:flex;align-items:center;gap:.7rem;text-decoration:none;
|
||
background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.75rem .95rem;
|
||
color:var(--ink-soft);box-shadow:var(--shadow);transition:border-color .16s,color .16s}
|
||
.res:hover{border-color:var(--accent);color:var(--accent-ink)}
|
||
.res .ric{color:var(--accent);flex:none}
|
||
.res .rt{font-family:var(--mono);font-size:.7rem;line-height:1.4}
|
||
.res .rt b{display:block;font-family:var(--sans);font-weight:700;color:var(--ink);font-size:var(--step--1);margin-bottom:.1rem}
|
||
.res:hover .rt b{color:var(--accent-ink)}
|
||
|
||
/* =========================================================================
|
||
FOOTER
|
||
========================================================================= */
|
||
footer{border-top:1px solid var(--border-strong);padding:2.4rem 0 4rem;margin-top:1rem}
|
||
footer .fnote{font-family:var(--mono);font-size:var(--step--1);color:var(--muted);line-height:1.7;max-width:80ch}
|
||
footer .fnote b{color:var(--ink-soft)}
|
||
footer .fnote .prims{color:var(--accent-ink)}
|
||
footer .sig{
|
||
margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
|
||
font-family:var(--mono);font-size:var(--step--1);color:var(--faint);
|
||
}
|
||
footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
|
||
|
||
/* =========================================================================
|
||
MOTION — single calm reveal, reduced-motion safe
|
||
========================================================================= */
|
||
@media (prefers-reduced-motion: no-preference){
|
||
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
|
||
.reveal.in{opacity:1;transform:none}
|
||
}
|
||
|
||
/* =========================================================================
|
||
DARK-MODE: keep the section-number tag legible (accent-tinted, not a
|
||
black-on-page slab). The .breath block is now theme-consistent on its
|
||
own, so it no longer needs an inversion fix here.
|
||
========================================================================= */
|
||
:root[data-theme="dark"] .sec-head .tag{background:var(--accent-wash);color:var(--accent-ink)}
|
||
@media (prefers-color-scheme: dark){
|
||
:root:not([data-theme="light"]) .sec-head .tag{background:var(--accent-wash);color:var(--accent-ink)}
|
||
}
|
||
|
||
/* =========================================================================
|
||
PRINT
|
||
========================================================================= */
|
||
@media print{
|
||
:root{--bg:#fff;--surface:#fff;--surface-2:#f4f4f4;--ink:#000;--ink-soft:#222;--muted:#555;--border:#bbb;--rule:#ddd}
|
||
body{background:#fff}
|
||
body::before{display:none}
|
||
section{page-break-inside:avoid;border-top:1px solid #ccc}
|
||
.stat,.wcard,.benefit,.callout,.zk-stage,.chip,.faq details,.adv-col,.res,.gw,.cmp-wrap,.analogy{box-shadow:none}
|
||
.reveal{opacity:1!important;transform:none!important}
|
||
.breath{background:#f4f4f4 !important;color:#000 !important;border-color:#bbb;border-inline-start:5px solid #555;-webkit-print-color-adjust:exact;print-color-adjust:exact}
|
||
.breath .bk,.breath li .b-dot,.breath .closer em{color:#000 !important}
|
||
.breath li,.breath .closer{color:#000 !important}
|
||
.compass,.themebar,.gw-controls,.gw-progress,.coach{display:none}
|
||
/* expand everything for paper */
|
||
.gw-step{display:block !important;border-top:1px solid #ccc;padding-top:1rem;margin-top:1rem}
|
||
.faq details{open:open}
|
||
.faq .ans{display:block !important}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="skip" href="#main" data-i18n="skip">Skip to content</a>
|
||
|
||
<!-- ============================ MASTHEAD ============================ -->
|
||
<header class="masthead wrap">
|
||
|
||
<div class="themebar" role="group" data-i18n-attr="aria-label:themebar_aria" aria-label="Theme and language">
|
||
|
||
<div class="langctl" role="group" data-i18n-attr="aria-label:lang_group_aria" aria-label="Language">
|
||
<span class="tglabel" data-i18n="lang_label">Language</span>
|
||
<div class="langseg" role="group" data-i18n-attr="aria-label:lang_select_aria" aria-label="Choose language">
|
||
<button type="button" class="langbtn" data-lang-set="en" aria-pressed="false" title="English" aria-label="English"><span class="flag"><svg viewBox="0 0 24 16" preserveAspectRatio="none" aria-hidden="true"><rect width="24" height="16" fill="#012169"/><path d="M0 0l24 16M24 0L0 16" stroke="#fff" stroke-width="3.2"/><path d="M0 0l24 16M24 0L0 16" stroke="#C8102E" stroke-width="1.7"/><path d="M12 0v16M0 8h24" stroke="#fff" stroke-width="5.3"/><path d="M12 0v16M0 8h24" stroke="#C8102E" stroke-width="3.1"/></svg></span><span class="lc">EN</span></button>
|
||
<button type="button" class="langbtn" data-lang-set="de" aria-pressed="false" title="Deutsch" aria-label="Deutsch"><span class="flag"><svg viewBox="0 0 24 16" preserveAspectRatio="none" aria-hidden="true"><rect width="24" height="16" fill="#111"/><rect y="5.33" width="24" height="5.34" fill="#D00"/><rect y="10.67" width="24" height="5.33" fill="#FFCE00"/></svg></span><span class="lc">DE</span></button>
|
||
<button type="button" class="langbtn" data-lang-set="fa" aria-pressed="false" title="فارسی" aria-label="فارسی"><span class="flag"><svg viewBox="0 0 24 16" preserveAspectRatio="none" aria-hidden="true"><rect width="24" height="16" fill="#fff"/><rect width="24" height="5.33" fill="#239F40"/><rect y="10.67" width="24" height="5.33" fill="#DA0000"/></svg></span><span class="lc">FA</span></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tgctl" role="group" data-i18n-attr="aria-label:theme_group_aria" aria-label="Colour theme">
|
||
<span class="tglabel" data-i18n="theme_label">Theme</span>
|
||
<div class="themeseg">
|
||
<button type="button" data-theme-set="light" aria-pressed="false" data-i18n-attr="aria-label:theme_light_aria" aria-label="Light theme">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg><span data-i18n="theme_light">LIGHT</span></button>
|
||
<button type="button" data-theme-set="dark" aria-pressed="false" data-i18n-attr="aria-label:theme_dark_aria" aria-label="Dark theme">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg><span data-i18n="theme_dark">DARK</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="coach" id="coach" role="status" hidden>
|
||
<button type="button" class="coach-x" id="coach-x" data-i18n-attr="aria-label:coach_close_aria" aria-label="Dismiss">×</button>
|
||
<span class="ck pulse" data-i18n="coach_kicker">Tip</span>
|
||
<span class="ctxt" data-i18n="coach_text">Switch theme & language here <span class="arrowhint">→</span></span>
|
||
</div>
|
||
|
||
<div class="topline">
|
||
<span data-i18n="top_1"><strong>PASSWORD SECURITY</strong></span>
|
||
<span class="sep">/</span>
|
||
<span data-i18n="top_2">A Field Guide for Normal Humans</span>
|
||
<span class="sep">/</span>
|
||
<span data-i18n="top_3">The Bitwarden switch, in plain English</span>
|
||
<span class="doc-id num ltr">SAFE·01</span>
|
||
</div>
|
||
|
||
<h1 data-i18n="h1">Your passwords are the keys to your <span class="accent">whole life</span></h1>
|
||
<p class="sub" data-i18n="sub">A plain-English guide for people who don't (and shouldn't have to) think about hackers all day</p>
|
||
<p class="lede" data-i18n="lede">You can't remember a good, unique password for every account. <b>Nobody can — that's
|
||
normal.</b> So you hand the job to a heavily-locked digital safe. This guide walks you,
|
||
calmly and once, from "I reuse the same password" to <b>"I don't have to worry about this anymore."</b></p>
|
||
|
||
<!-- 30-second version -->
|
||
<div class="tldr reveal">
|
||
<span class="tk" data-i18n="tldr_kicker">The 30-second version</span>
|
||
<ol>
|
||
<li><span data-i18n="tldr_1">You <b>cannot remember</b> a strong, unique password for every account. Nobody can.</span></li>
|
||
<li><span data-i18n="tldr_2">So you use a <b>password manager</b> — a single, heavily-locked digital safe that remembers them all.</span></li>
|
||
<li><span data-i18n="tldr_3">Your browser (Chrome / Apple) has one built in. <b>Better than nothing</b>, but it ties your whole life to one account.</span></li>
|
||
<li><span data-i18n="tldr_4">The move: switch to <b>Bitwarden</b>. Free, works on everything, built so <b>even the company can't read your passwords</b>.</span></li>
|
||
<li><span data-i18n="tldr_5">(For tinkerers: you can self-host your own copy, <b>Vaultwarden</b>. Optional, and at the very end — skip it for now.)</span></li>
|
||
</ol>
|
||
<p class="punch" data-i18n="tldr_punch">If you do one thing after reading this: <b>install Bitwarden and set a strong master password.</b> Everything else is detail.</p>
|
||
</div>
|
||
|
||
<nav class="compass" data-i18n-attr="aria-label:compass_aria" aria-label="Jump to a section">
|
||
<a href="#why"><span class="n">1</span> <span data-i18n="compass_1">Why it matters</span></a>
|
||
<a href="#what"><span class="n">2</span> <span data-i18n="compass_2">What it is</span></a>
|
||
<a href="#compare"><span class="n">3</span> <span data-i18n="compass_3">Chrome vs Bitwarden</span></a>
|
||
<a href="#zk"><span class="n">4</span> <span data-i18n="compass_4">How it stays secret</span></a>
|
||
<a href="#switch"><span class="n">5</span> <span data-i18n="compass_5">How to switch</span></a>
|
||
<a href="#extension"><span class="n">6</span> <span data-i18n="compass_6">The extension</span></a>
|
||
<a href="#passkeys"><span class="n">7</span> <span data-i18n="compass_7">Passkeys</span></a>
|
||
<a href="#faq"><span class="n">8</span> <span data-i18n="compass_8">Worries</span></a>
|
||
<a href="#summary"><span class="n">–</span> <span data-i18n="compass_9">Summary</span></a>
|
||
<a href="#advanced"><span class="n">+</span> <span data-i18n="compass_10">Bonus: self-hosting</span></a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="wrap" id="main">
|
||
|
||
<!-- ============================ SECTION 1 — WHY ============================ -->
|
||
<section id="why" aria-labelledby="s1-h">
|
||
<div class="sec-head">
|
||
<span class="tag">1</span>
|
||
<h2 id="s1-h" data-i18n="s1_h">Why this matters</h2>
|
||
<p class="note" data-i18n="s1_note">A story you've lived through without noticing.</p>
|
||
</div>
|
||
|
||
<div class="analogy reveal">
|
||
<div class="txt">
|
||
<span class="lab" data-i18n="s1_lab">The key analogy</span>
|
||
<blockquote data-i18n="s1_quote">Imagine you use <em>the same key</em> for your house, your car, your office, your safe-deposit box, and your mailbox — then hand a copy to every shop that asks.</blockquote>
|
||
<p class="body" data-i18n="s1_body">That's exactly what using <b>the same password everywhere</b> is. The danger isn't
|
||
"will a hacker pick <b>me</b>?" It's "<b>will one of the dozens of companies I trusted get
|
||
breached?</b>" When one does, criminals take your email + password and automatically
|
||
<b>try it on your bank, your Amazon, your PayPal</b> — this is called <em>credential stuffing</em>,
|
||
done by software at massive scale while the attacker sleeps. You're just one row in a spreadsheet of millions.</p>
|
||
</div>
|
||
<div class="keypic" aria-hidden="true">
|
||
<!-- one key opens many locks — the danger of reuse -->
|
||
<svg viewBox="0 0 320 240" fill="none" stroke="currentColor"
|
||
stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- branch lines from the key tip (185,120) to each lock, evenly fanned -->
|
||
<g stroke-width="2" stroke-dasharray="1 7" opacity=".55">
|
||
<path d="M185 120 C218 120 226 44 256 44"/>
|
||
<path d="M185 120 C222 120 230 92 256 92"/>
|
||
<path d="M185 120 C222 120 230 148 256 148"/>
|
||
<path d="M185 120 C218 120 226 196 256 196"/>
|
||
</g>
|
||
|
||
<!-- the single shared key, centred on y=120 -->
|
||
<g>
|
||
<circle cx="46" cy="120" r="27"/>
|
||
<circle cx="46" cy="120" r="9.5" stroke-width="2.4"/>
|
||
<path d="M73 120 H185"/>
|
||
<!-- bit / teeth, evenly spaced and aligned to the shaft -->
|
||
<path d="M150 120 v17 M167 120 v23 M185 120 v17"/>
|
||
</g>
|
||
|
||
<!-- four identical locks, perfectly aligned on the right rail -->
|
||
<g>
|
||
<g transform="translate(256,30)">
|
||
<rect x="0" y="0" width="34" height="28" rx="5"/>
|
||
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
|
||
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
|
||
<path d="M17 16 v6"/>
|
||
</g>
|
||
<g transform="translate(256,78)">
|
||
<rect x="0" y="0" width="34" height="28" rx="5"/>
|
||
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
|
||
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
|
||
<path d="M17 16 v6"/>
|
||
</g>
|
||
<g transform="translate(256,134)">
|
||
<rect x="0" y="0" width="34" height="28" rx="5"/>
|
||
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
|
||
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
|
||
<path d="M17 16 v6"/>
|
||
</g>
|
||
<g transform="translate(256,182)">
|
||
<rect x="0" y="0" width="34" height="28" rx="5"/>
|
||
<path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
|
||
<circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
|
||
<path d="M17 16 v6"/>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- qualitative stat cards: honest figure + icon, NOT a measured % gauge -->
|
||
<div class="stats">
|
||
<div class="stat stat--accent reveal">
|
||
<span class="medallion" aria-hidden="true">
|
||
<!-- skeleton key forced into a lock: stolen / weak credentials -->
|
||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="14" cy="14" r="7.5"/>
|
||
<circle cx="14" cy="14" r="2.6" stroke-width="2"/>
|
||
<path d="M19.3 19.3 38 38"/>
|
||
<path d="M31.5 31.5 27 36 M35 35 30.5 39.5"/>
|
||
</svg>
|
||
</span>
|
||
<p class="lead" data-i18n="g1_a">most</p>
|
||
<p class="lead-sub" data-i18n="g1_b">breaches</p>
|
||
<span class="glabel" data-i18n="g1_lab">The #1 way in</span>
|
||
<h3 data-i18n="g1_h">Stolen & weak credentials</h3>
|
||
<p data-i18n="g1_p">The large majority of hacking-related breaches involve stolen or weak passwords — year after year.</p>
|
||
<span class="src" data-i18n="g1_src">Source: Verizon DBIR</span>
|
||
</div>
|
||
<div class="stat stat--warn reveal">
|
||
<span class="medallion" aria-hidden="true">
|
||
<!-- two identical key-cards: the same password reused -->
|
||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="14" y="6" width="26" height="17" rx="2.5"/>
|
||
<path d="M18 11.5h6 M18 16h12"/>
|
||
<rect x="8" y="25" width="26" height="17" rx="2.5" fill="var(--surface)"/>
|
||
<path d="M12 30.5h6 M12 35h12"/>
|
||
</svg>
|
||
</span>
|
||
<p class="lead" data-i18n="g2_a">most</p>
|
||
<p class="lead-sub" data-i18n="g2_b">people</p>
|
||
<span class="glabel" data-i18n="g2_lab">The bad habit</span>
|
||
<h3 data-i18n="g2_h">Reuse the same password</h3>
|
||
<p data-i18n="g2_p">Surveys consistently find most people reuse passwords across multiple accounts.</p>
|
||
<span class="src" data-i18n="g2_src">Source: industry surveys</span>
|
||
</div>
|
||
<div class="stat stat--bad reveal">
|
||
<span class="medallion" aria-hidden="true">
|
||
<!-- leaked passwords scattering out: already circulating -->
|
||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M9 30v6a3 3 0 0 0 3 3h13"/>
|
||
<rect x="6" y="18" width="18" height="12" rx="2.5"/>
|
||
<path d="M10 18v-3a5 5 0 0 1 10 0v3" stroke-width="2.2"/>
|
||
<circle cx="33" cy="13" r="1.8" fill="currentColor" stroke="none"/>
|
||
<circle cx="40" cy="20" r="1.8" fill="currentColor" stroke="none"/>
|
||
<circle cx="38" cy="32" r="1.8" fill="currentColor" stroke="none"/>
|
||
<circle cx="42" cy="11" r="1.4" fill="currentColor" stroke="none"/>
|
||
<circle cx="33" cy="24" r="1.4" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</span>
|
||
<p class="lead" data-i18n="g3_a">billions</p>
|
||
<p class="lead-sub" aria-hidden="true"> </p>
|
||
<span class="glabel" data-i18n="g3_lab">Already out there</span>
|
||
<h3 data-i18n="g3_h">Stolen passwords circulating</h3>
|
||
<p data-i18n="g3_p">Billions of stolen passwords are already on criminal forums and in malware dumps right now.</p>
|
||
<span class="src" data-i18n="g3_src">Source: breach dumps</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fix-banner reveal">
|
||
<span class="fk" data-i18n="s1_fixk">The fix is boring and incredibly effective</span>
|
||
<p data-i18n="s1_fixp">Every account gets its <b>own unique, long password</b>. Then a breach at the sock shop
|
||
<b>stays at the sock shop</b> — it can't spread. You just can't memorize 200 of them, so we let a machine do it.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 2 — WHAT IT IS ============================ -->
|
||
<section id="what" aria-labelledby="s2-h">
|
||
<div class="sec-head">
|
||
<span class="tag">2</span>
|
||
<h2 id="s2-h" data-i18n="s2_h">What a password manager actually is</h2>
|
||
<p class="note" data-i18n="s2_note">No jargon — one super-secure digital safe.</p>
|
||
</div>
|
||
|
||
<div class="prose" style="margin-bottom:18px">
|
||
<p data-i18n="s2_intro">It's <b>one super-secure digital safe</b>. Inside it lives every password you have. You lock
|
||
it with a <b>single master password</b> — the one and only password you ever have to remember.
|
||
You go from "I have to remember everything" to "I have to remember <b>one thing</b>."</p>
|
||
</div>
|
||
|
||
<div class="whatcards">
|
||
<div class="wcard reveal">
|
||
<span class="wic" aria-hidden="true">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h6m12 0h-6"/><circle cx="12" cy="12" r="9"/><path d="M9 12a3 3 0 0 1 6 0 3 3 0 0 1-6 0z"/></svg>
|
||
</span>
|
||
<h3 data-i18n="w1_h">It fills logins for you</h3>
|
||
<p data-i18n="w1_p">Visit a site and it recognizes it and <b>fills in your login automatically</b>. No typing.</p>
|
||
</div>
|
||
<div class="wcard reveal">
|
||
<span class="wic" aria-hidden="true">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6L6 18"/></svg>
|
||
</span>
|
||
<h3 data-i18n="w2_h">It invents strong ones</h3>
|
||
<p data-i18n="w2_p">New account? It makes up a long random password like <code class="ltr">K7$mq2#vLp9!xQ</code>, saves it, and <b>you never see it again</b>.</p>
|
||
</div>
|
||
<div class="wcard reveal">
|
||
<span class="wic" aria-hidden="true">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="3"/><path d="M9 18h6"/></svg>
|
||
</span>
|
||
<h3 data-i18n="w3_h">It follows you everywhere</h3>
|
||
<p data-i18n="w3_p">New phone, new laptop? <b>Log in once and all your passwords are there.</b></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="benefits">
|
||
<div class="benefit reveal">
|
||
<h4 data-i18n="b1_h">It helps block fake websites</h4>
|
||
<p data-i18n="b1_p">It fills based on the <b>real</b> web address. If a scam sends you to <code class="ltr">paypa1-secure.com</code>,
|
||
it just won't fill anything in — that silence is a warning sign.</p>
|
||
</div>
|
||
<div class="benefit reveal">
|
||
<h4 data-i18n="b2_h">It tells you when you're exposed</h4>
|
||
<p data-i18n="b2_p">Good managers check your saved passwords against known breaches and say <b>"hey, change this one."</b></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout warn reveal">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="s2c1_k">Important habit</span>
|
||
<h4 data-i18n="s2c1_h">If it doesn't offer to fill in — stop</h4>
|
||
<p data-i18n="s2c1_p">If your manager <b>doesn't</b> offer to fill a login where it normally would, don't dig the
|
||
password out and paste it by hand. <b>Check the web address first.</b> The whole protection
|
||
disappears the moment you manually copy-paste around it.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout crit reveal">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z"/><path d="M9 12l2 2 4-4"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="s2c2_k">One honest limit — please read</span>
|
||
<h4 data-i18n="s2c2_h">A manager can't save an already-infected device</h4>
|
||
<p data-i18n="s2c2_p">It protects you against the two biggest threats — <b>company breaches</b> and <b>password reuse</b>.
|
||
But if your device already has malware (a keylogger / infostealer), it can capture your master
|
||
password as you type. So <b>keep your operating system and browser updated, and don't install
|
||
pirated or sketchy software.</b> A great lock on a rotten door isn't enough.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 3 — COMPARISON ============================ -->
|
||
<section id="compare" aria-labelledby="s3-h">
|
||
<div class="sec-head">
|
||
<span class="tag">3</span>
|
||
<h2 id="s3-h" data-i18n="s3_h">"But Chrome already saves my passwords" — is that the same?</h2>
|
||
<p class="note" data-i18n="s3_note">It's better than reuse. But it's a closed box you don't hold the key to.</p>
|
||
</div>
|
||
|
||
<div class="cmp-wrap reveal">
|
||
<table class="cmp">
|
||
<caption data-i18n="cmp_cap">Browser built-in (Chrome / Apple) vs Bitwarden — what actually differs</caption>
|
||
<colgroup><col><col><col class="bw"></colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col" data-i18n="cmp_th_feat">Feature</th>
|
||
<th scope="col" class="brand" data-i18n="cmp_th_browser">Browser built-in (Chrome / Apple)</th>
|
||
<th scope="col" class="brand win">Bitwarden</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row" data-i18n="cmp_r1_h">Separate master password</th>
|
||
<td data-h="Browser" data-i18n-attr="data-h:cmp_dh_browser" data-i18n="cmp_r1_b"><span class="verdict no"><span class="vd">✗</span> Not by default</span> — opens with your Google / Apple account</td>
|
||
<td data-h="Bitwarden" data-i18n-attr="data-h:cmp_dh_bw" data-i18n="cmp_r1_w"><span class="verdict yes"><span class="vd">✓</span> Yes</span> — one dedicated master password</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" data-i18n="cmp_r2_h">Zero-knowledge (company can't read it)</th>
|
||
<td data-h="Browser" data-i18n-attr="data-h:cmp_dh_browser" data-i18n="cmp_r2_b"><span class="verdict no"><span class="vd">✗</span> No</span> — Google holds the keys; an opt-in on-device option exists but is off by default</td>
|
||
<td data-h="Bitwarden" data-i18n-attr="data-h:cmp_dh_bw" data-i18n="cmp_r2_w"><span class="verdict yes"><span class="vd">✓</span> Yes, by design</span> — locked on your device before it ever leaves</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" data-i18n="cmp_r3_h">Works across all platforms</th>
|
||
<td data-h="Browser" data-i18n-attr="data-h:cmp_dh_browser" data-i18n="cmp_r3_b"><span class="verdict meh"><span class="vd">⚠</span> Clumsy</span> — happiest inside one ecosystem; mixing gets awkward</td>
|
||
<td data-h="Bitwarden" data-i18n-attr="data-h:cmp_dh_bw" data-i18n="cmp_r3_w"><span class="verdict yes"><span class="vd">✓</span> Everywhere</span> — iPhone, Android, Windows, Mac, Linux, every browser</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" data-i18n="cmp_r4_h">Open source & independently audited</th>
|
||
<td data-h="Browser" data-i18n-attr="data-h:cmp_dh_browser" data-i18n="cmp_r4_b"><span class="verdict no"><span class="vd">✗</span> Closed box</span> — you're asked to simply trust it</td>
|
||
<td data-h="Bitwarden" data-i18n-attr="data-h:cmp_dh_bw" data-i18n="cmp_r4_w"><span class="verdict yes"><span class="vd">✓</span> Yes</span> — outside firms & university researchers inspect it</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" data-i18n="cmp_r5_h">Extra tools (2FA codes, sharing, emergency access)</th>
|
||
<td data-h="Browser" data-i18n-attr="data-h:cmp_dh_browser" data-i18n="cmp_r5_b"><span class="verdict no"><span class="vd">✗</span> Few</span> — and less transparency</td>
|
||
<td data-h="Bitwarden" data-i18n-attr="data-h:cmp_dh_bw" data-i18n="cmp_r5_w"><span class="verdict yes"><span class="vd">✓</span> Yes</span> — 2FA codes, secure sharing, secure notes, emergency access</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" data-i18n="cmp_r6_h">Leave any time (no lock-in)</th>
|
||
<td data-h="Browser" data-i18n-attr="data-h:cmp_dh_browser" data-i18n="cmp_r6_b"><span class="verdict meh"><span class="vd">⚠</span> Hostage-ish</span> — data leaves on their terms</td>
|
||
<td data-h="Bitwarden" data-i18n-attr="data-h:cmp_dh_bw" data-i18n="cmp_r6_w"><span class="verdict yes"><span class="vd">✓</span> Export anytime</span> — open source, never held hostage</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="callout good reveal">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="s3c_k">Credit where it's due</span>
|
||
<h4 data-i18n="s3c_h">The browser one is far better than reusing one password</h4>
|
||
<p data-i18n="s3c_p">If Chrome's or Apple's built-in manager is all you ever use, <b>you're already ahead of most people.</b>
|
||
The honest summary: it's convenient and okay — but it puts all your eggs in one company's basket,
|
||
keeps the ability to read your stuff, and isn't the dedicated, independently-verified vault your most sensitive data deserves.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 4 — ZERO KNOWLEDGE ============================ -->
|
||
<section id="zk" aria-labelledby="s4-h">
|
||
<div class="sec-head">
|
||
<span class="tag">4</span>
|
||
<h2 id="s4-h" data-i18n="s4_h">How it stays secret — end-to-end encryption</h2>
|
||
<p class="note" data-i18n="s4_note">"They hold the locked box but never get the key."</p>
|
||
</div>
|
||
|
||
<div class="zk-wrap reveal">
|
||
<div class="zk-flow">
|
||
<div class="zk-stage">
|
||
<span class="zk-ic" aria-hidden="true"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><rect x="8" y="10" width="8" height="6" rx="1"/><path d="M10 10V8.5a2 2 0 0 1 4 0V10"/></svg></span>
|
||
<span class="zk-step" data-i18n="zk1_step">Step 1 — your device</span>
|
||
<h4 data-i18n="zk1_h">Your device locks it</h4>
|
||
<p data-i18n="zk1_p">Your password is scrambled <b>on your phone or laptop</b>, using your master password as the key.</p>
|
||
</div>
|
||
|
||
<div class="zk-arrow" aria-hidden="true">
|
||
<svg width="34" height="24" viewBox="0 0 34 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h28M22 4l8 8-8 8"/></svg>
|
||
</div>
|
||
|
||
<div class="zk-stage">
|
||
<span class="zk-ic" aria-hidden="true"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/><circle cx="7" cy="7" r="0"/></svg></span>
|
||
<span class="zk-step" data-i18n="zk2_step">Step 2 — in transit</span>
|
||
<h4 data-i18n="zk2_h">A scrambled blob travels</h4>
|
||
<p data-i18n="zk2_p">What leaves your device is already unreadable. The key <b>never goes with it.</b></p>
|
||
<span class="blob ltr">8f3a…d91c…<br>e0██7b██4f█a2</span>
|
||
</div>
|
||
|
||
<div class="zk-arrow" aria-hidden="true">
|
||
<svg width="34" height="24" viewBox="0 0 34 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h28M22 4l8 8-8 8"/></svg>
|
||
</div>
|
||
|
||
<div class="zk-stage">
|
||
<span class="zk-ic" aria-hidden="true"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="14" width="18" height="6" rx="1"/><rect x="3" y="4" width="18" height="6" rx="1"/><path d="M7 7h.01M7 17h.01"/></svg></span>
|
||
<span class="zk-step" data-i18n="zk3_step">Step 3 — their server</span>
|
||
<h4 data-i18n="zk3_h">Server holds only gibberish</h4>
|
||
<p data-i18n="zk3_p">Bitwarden stores the locked box but <b>cannot open it</b> — even if they wanted to, or were hacked.</p>
|
||
</div>
|
||
</div>
|
||
<p class="zk-cap" data-i18n="zk_cap">Even in the worst case — Bitwarden gets hacked and criminals steal everything —
|
||
the thieves get a vault of <b>gibberish</b>, not your passwords. That's <b>zero-knowledge</b>.</p>
|
||
</div>
|
||
|
||
<div class="callout crit reveal">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="s4c1_k">The LastPass lesson — why master-password STRENGTH is everything</span>
|
||
<h4 data-i18n="s4c1_h">In a breach, the length of your master password is what saves you</h4>
|
||
<p data-i18n="s4c1_p1">In 2022 a different manager, LastPass, was breached — attackers stole copies of users' <b>encrypted vaults</b>.
|
||
People with <b>strong</b> master passwords were fine; their vaults stayed unreadable scrambles. People with
|
||
<b>weak</b> ones had their vaults slowly cracked open <b>offline</b>, guessing billions of passwords as fast
|
||
as the hardware allowed.</p>
|
||
<p data-i18n="s4c1_p2"><b>Two-factor authentication does NOT help here</b> — the attacker already has the raw encrypted
|
||
file and never touches a login screen. The takeaway: make your master password a <b>long, random
|
||
passphrase</b>. That length and randomness is the one thing standing between you and disaster.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout good reveal">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="s4c2_k">Why Bitwarden specifically</span>
|
||
<h4 data-i18n="s4c2_h">Free, everywhere, audited, no lock-in</h4>
|
||
<p data-i18n="s4c2_p"><b>Free and genuinely complete</b> (unlimited passwords + devices). <b>Works everywhere</b> — no
|
||
ecosystem lock-in. <b>Open source and independently audited</b> (including university cryptography
|
||
researchers). Does the extra safety stuff (2FA codes, breach alerts, secure sharing, emergency access).
|
||
Optional Premium is about <b>$20/year</b>; Families about <b>$48/year for 6 people</b> — but
|
||
<b>start free.</b> <em>(Prices as of 2026 — check the pricing page below for the latest.)</em></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout warn reveal">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="s4c3_k">The one rule you must not break</span>
|
||
<h4 data-i18n="s4c3_h">Bitwarden can't recover your master password — so protect it on paper</h4>
|
||
<p data-i18n="s4c3_p">Because the company can't read your vault, there's <b>no "forgot password" email.</b> So: pick a
|
||
strong passphrase — four or five <b>random</b> words, e.g. <code class="ltr">velvet-trombone-glacier-pickle-lantern</code>
|
||
(don't use that example or any famous one — pick your <b>own</b> random words).
|
||
<b>Write it on paper</b> and keep it safe at home, with a <b>second copy in a different safe place.</b>
|
||
A burglar at home is a far smaller risk than a hacker on the internet.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 5 — GUIDED WALKTHROUGH ============================ -->
|
||
<section id="switch" aria-labelledby="s5-h">
|
||
<div class="sec-head">
|
||
<span class="tag">5</span>
|
||
<h2 id="s5-h" data-i18n="s5_h">How to switch — step by step (~20 minutes)</h2>
|
||
<p class="note" data-i18n="s5_note">Do it once, calmly, in one sitting. Set for years.</p>
|
||
</div>
|
||
|
||
<div class="gw" id="gw" data-js="off">
|
||
<!-- roadmap: all 8 steps + state -->
|
||
<div class="gw-roadmap" role="tablist" data-i18n-attr="aria-label:gw_roadmap_aria" aria-label="The 8 steps — jump to any">
|
||
<button class="gw-rm-btn" type="button" data-go="0" aria-current="step"><span class="rm-n">1</span><span class="rm-label" data-i18n="gw_rm_1">Account</span></button>
|
||
<button class="gw-rm-btn" type="button" data-go="1"><span class="rm-n">2</span><span class="rm-label" data-i18n="gw_rm_2">Install</span></button>
|
||
<button class="gw-rm-btn" type="button" data-go="2"><span class="rm-n">3</span><span class="rm-label" data-i18n="gw_rm_3">Move over</span></button>
|
||
<button class="gw-rm-btn" type="button" data-go="3"><span class="rm-n">4</span><span class="rm-label" data-i18n="gw_rm_4">Destroy file</span></button>
|
||
<button class="gw-rm-btn" type="button" data-go="4"><span class="rm-n">5</span><span class="rm-label" data-i18n="gw_rm_5">Turn off Chrome</span></button>
|
||
<button class="gw-rm-btn" type="button" data-go="5"><span class="rm-n">6</span><span class="rm-label" data-i18n="gw_rm_6">Extension</span></button>
|
||
<button class="gw-rm-btn" type="button" data-go="6"><span class="rm-n">7</span><span class="rm-label" data-i18n="gw_rm_7">Lock down</span></button>
|
||
<button class="gw-rm-btn" type="button" data-go="7"><span class="rm-n">8</span><span class="rm-label" data-i18n="gw_rm_8">Level up</span></button>
|
||
</div>
|
||
|
||
<div class="gw-progress" aria-hidden="true"><div class="bar" id="gw-bar"></div></div>
|
||
|
||
<div class="gw-stage">
|
||
<!-- STEP 1 -->
|
||
<article class="gw-step active" role="tabpanel" data-i18n-attr="aria-label:gw_panel_1" aria-label="Step 1 of 8">
|
||
<div class="gw-meta"><span class="gw-num">1</span><span class="gw-phase" data-i18n="gw1_phase">Sign up</span><span class="gw-time" data-i18n="gw1_time">~2 min</span></div>
|
||
<h3 data-i18n="gw1_h">Create your Bitwarden account</h3>
|
||
<ol>
|
||
<li data-i18n="gw1_li1">Go to <a href="https://bitwarden.com" target="_blank" rel="noopener noreferrer" class="ltr">bitwarden.com</a> and sign up (free).</li>
|
||
<li data-i18n="gw1_li2">Choose your <b>master password</b> — a long, random passphrase (see the rule above).</li>
|
||
<li data-i18n="gw1_li3"><b>Write it down on paper</b> and store it safely (and make that second copy).</li>
|
||
<li data-i18n="gw1_li4">Heads up: in a few steps we'll turn on two-factor authentication. Plan to do it today.</li>
|
||
</ol>
|
||
<div class="act-row">
|
||
<button class="gobtn" type="button" data-open="https://bitwarden.com">
|
||
<span data-i18n="gw1_btn">Open bitwarden.com</span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- STEP 2 -->
|
||
<article class="gw-step" role="tabpanel" data-i18n-attr="aria-label:gw_panel_2" aria-label="Step 2 of 8">
|
||
<div class="gw-meta"><span class="gw-num">2</span><span class="gw-phase" data-i18n="gw2_phase">Install</span><span class="gw-time" data-i18n="gw2_time">~3 min</span></div>
|
||
<h3 data-i18n="gw2_h">Install Bitwarden where you'll use it</h3>
|
||
<ul>
|
||
<li data-i18n="gw2_li1"><b>Browser extension</b> on your computer (Chrome, Firefox, Edge, Safari) — this is the one that auto-fills logins.</li>
|
||
<li data-i18n="gw2_li2"><b>App on your phone</b> (App Store / Google Play) — so it follows you everywhere.</li>
|
||
</ul>
|
||
<div class="act-row">
|
||
<button class="gobtn" type="button" data-open="https://bitwarden.com/download/">
|
||
<span data-i18n="gw2_btn">Open all downloads (apps & extensions)</span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- STEP 3 -->
|
||
<article class="gw-step" role="tabpanel" data-i18n-attr="aria-label:gw_panel_3" aria-label="Step 3 of 8">
|
||
<div class="gw-meta"><span class="gw-num">3</span><span class="gw-phase" data-i18n="gw3_phase">Migrate</span><span class="gw-time" data-i18n="gw3_time">~5 min</span></div>
|
||
<h3 data-i18n="gw3_h">Move your existing passwords over</h3>
|
||
<p data-i18n="gw3_p1">In <b>Chrome</b>, open the password settings, find <b>Export passwords</b>, and save the file
|
||
(Chrome will ask for your computer password — that's normal):</p>
|
||
<div class="codeblock">
|
||
<code class="ltr">chrome://password-manager/settings</code>
|
||
<button class="copybtn" type="button" data-copy="chrome://password-manager/settings" data-i18n-attr="aria-label:gw3_copy_aria" aria-label="Copy the Chrome password settings address, then paste it into Chrome's address bar">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
|
||
<span class="ct" data-i18n="gw3_copy_label">Copy · paste into Chrome's address bar</span>
|
||
</button>
|
||
</div>
|
||
<p class="act-note" data-i18n="gw3_note">(Browsers don't allow web pages to open <code class="ltr">chrome://</code> links directly — so copy this, then paste it into Chrome's address bar yourself.)</p>
|
||
<p data-i18n="gw3_p2">In Bitwarden, go to <b>Tools → Import data</b>, pick the <b>Chrome / Chromium</b> source, and
|
||
upload that file. (Menu labels shift now and then — the official import guide has current screenshots.)</p>
|
||
<div class="act-row">
|
||
<button class="gobtn" type="button" data-open="https://bitwarden.com/help/import-from-chrome/">
|
||
<span data-i18n="gw3_btn">Open the official import guide</span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
|
||
</button>
|
||
</div>
|
||
<ul>
|
||
<li data-i18n="gw3_li"><b>Verify the import worked before deleting anything.</b> Check that your most important logins —
|
||
email, bank, main shopping — are actually there and correct. Imports can occasionally drop or mangle entries.</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<!-- STEP 4 -->
|
||
<article class="gw-step" role="tabpanel" data-i18n-attr="aria-label:gw_panel_4" aria-label="Step 4 of 8">
|
||
<div class="gw-meta"><span class="gw-num">4</span><span class="gw-phase" data-i18n="gw4_phase">Critical</span><span class="gw-time" data-i18n="gw4_time">~1 min</span></div>
|
||
<h3 data-i18n="gw4_h">Destroy the leftover export file</h3>
|
||
<div class="callout crit" style="margin-top:0">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="gw4_k">Don't skip this</span>
|
||
<h4 data-i18n="gw4_ch">That export is a plaintext list of every password you own</h4>
|
||
<p data-i18n="gw4_p1">Save it only to a simple local folder like your <b>Desktop</b> — <b>never</b> a cloud-synced
|
||
folder (OneDrive, iCloud, Google Drive, Dropbox) and never a USB stick. The moment the import is
|
||
confirmed: <b>delete it and empty your Recycle Bin / Trash.</b></p>
|
||
<p data-i18n="gw4_p2">Emptying the Trash doesn't truly erase data — it can linger until overwritten. So do
|
||
export → import → delete <b>in one sitting</b>, and it helps a lot if your drive is
|
||
encrypted (BitLocker on Windows, FileVault on Mac — worth turning on anyway).</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- STEP 5 -->
|
||
<article class="gw-step" role="tabpanel" data-i18n-attr="aria-label:gw_panel_5" aria-label="Step 5 of 8">
|
||
<div class="gw-meta"><span class="gw-num">5</span><span class="gw-phase" data-i18n="gw5_phase">Tidy up</span><span class="gw-time" data-i18n="gw5_time">~2 min</span></div>
|
||
<h3 data-i18n="gw5_h">Turn OFF Chrome's password saving</h3>
|
||
<p data-i18n="gw5_p">Otherwise two managers will fight to fill your logins.</p>
|
||
<ol>
|
||
<li data-i18n="gw5_li1">In Chrome's password settings, turn <b>off</b> "Offer to save passwords."</li>
|
||
<li data-i18n="gw5_li2"><b>Only after</b> you've used Bitwarden for a week and trust it's all there — <b>then</b> delete
|
||
the passwords stored in Chrome. No rush; two managers holding the same passwords for a week hurts nothing.</li>
|
||
</ol>
|
||
</article>
|
||
|
||
<!-- STEP 6 -->
|
||
<article class="gw-step" role="tabpanel" data-i18n-attr="aria-label:gw_panel_6" aria-label="Step 6 of 8">
|
||
<div class="gw-meta"><span class="gw-num">6</span><span class="gw-phase" data-i18n="gw6_phase">The magic</span><span class="gw-time" data-i18n="gw6_time">daily use</span></div>
|
||
<h3 data-i18n="gw6_h">Meet your new browser extension</h3>
|
||
<p data-i18n="gw6_p">That little shield icon near your address bar is the part you'll use every day. It logs you in,
|
||
offers to <b>save new logins</b>, <b>generates strong passwords</b> on "create password" fields, can be
|
||
<b>pinned</b> for easy access, and <b>auto-locks</b> after inactivity (asking for your master password
|
||
or fingerprint to reopen). The phone app works the same way. Full breakdown in section 6 below.</p>
|
||
</article>
|
||
|
||
<!-- STEP 7 -->
|
||
<article class="gw-step" role="tabpanel" data-i18n-attr="aria-label:gw_panel_7" aria-label="Step 7 of 8">
|
||
<div class="gw-meta"><span class="gw-num">7</span><span class="gw-phase" data-i18n="gw7_phase">Lock down</span><span class="gw-time" data-i18n="gw7_time">~5 min</span></div>
|
||
<h3 data-i18n="gw7_h">Lock down your Bitwarden account</h3>
|
||
<p data-i18n="gw7_p">Your vault is now the most valuable thing on your computer. In <b>Settings → Security</b>,
|
||
turn on <b>two-step login (2FA)</b> — a second lock, so even a stolen master password isn't enough. Pick your method wisely:</p>
|
||
<ul class="method-list">
|
||
<li class="best"><span class="mrank" data-i18n="gw7_m1_r">✓ BEST · FREE</span><span data-i18n="gw7_m1_t"><b>Authenticator app</b> (Aegis, or Bitwarden's own) — a 6-digit code on your phone. <b>Use this as your default.</b></span></li>
|
||
<li class="best"><span class="mrank" data-i18n="gw7_m2_r">✓ STRONGEST</span><span data-i18n="gw7_m2_t"><b>Hardware security key</b> (like a YubiKey, paid plan) — the only truly phishing-proof kind.</span></li>
|
||
<li class="avoid"><span class="mrank" data-i18n="gw7_m3_r">⚠ AVOID</span><span data-i18n="gw7_m3_t"><b>SMS text codes</b> — they can be hijacked.</span></li>
|
||
<li class="avoid"><span class="mrank" data-i18n="gw7_m4_r">⚠ DON'T</span><span data-i18n="gw7_m4_t"><b>Email codes for Bitwarden</b> — if your email password lives <i>in</i> Bitwarden, this creates a circular lockout.</span></li>
|
||
</ul>
|
||
<ul>
|
||
<li data-i18n="gw7_li1"><b>Save your 2FA recovery code — and store it SEPARATELY from your master password.</b> If both sit on the same slip in the same drawer, your second lock protected nothing.</li>
|
||
<li data-i18n="gw7_li2">Set a sensible <b>auto-lock timeout</b>, <b>never reuse</b> the master password anywhere, and be <b>suspicious of master-password prompts</b> (only the official app, extension, or real bitwarden.com should ask).</li>
|
||
<li data-i18n="gw7_li3">Optionally keep an <b>encrypted / password-protected</b> export as a safety net — never the plain CSV from Step 3.</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<!-- STEP 8 -->
|
||
<article class="gw-step" role="tabpanel" data-i18n-attr="aria-label:gw_panel_8" aria-label="Step 8 of 8">
|
||
<div class="gw-meta"><span class="gw-num">8</span><span class="gw-phase" data-i18n="gw8_phase">Level up</span><span class="gw-time" data-i18n="gw8_time">over time</span></div>
|
||
<h3 data-i18n="gw8_h">Live with it for a week, then level up</h3>
|
||
<p data-i18n="gw8_p">Use it normally; let it auto-fill. Then do the <b>most valuable habit of all:</b></p>
|
||
<div class="callout good" style="margin-top:0">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7M21 4v5h-5"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="gw8_k">The habit</span>
|
||
<h4 data-i18n="gw8_ch">Replace old passwords with generated ones — email first</h4>
|
||
<p data-i18n="gw8_cp">Whenever you log into an important account, change that password to a new random one Bitwarden
|
||
generates. Do your <b>most important accounts first — email above all</b>, because your email can
|
||
reset every other password you own. Fix the top 5 this week; the rest happen naturally over time.</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="gw-controls">
|
||
<button class="gw-btn" type="button" id="gw-prev" disabled>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg><span data-i18n="gw_prev">PREV</span>
|
||
</button>
|
||
<button class="gw-btn primary" type="button" id="gw-next">
|
||
<span data-i18n="gw_next">NEXT</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
<span class="gw-counter" id="gw-counter">Step 1 of 8</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 6 — EXTENSION ============================ -->
|
||
<section id="extension" aria-labelledby="s6-h">
|
||
<div class="sec-head">
|
||
<span class="tag">6</span>
|
||
<h2 id="s6-h" data-i18n="s6_h">How the browser extension works</h2>
|
||
<p class="note" data-i18n="s6_note">The little shield you'll touch every day.</p>
|
||
</div>
|
||
|
||
<div class="ext-bar reveal" aria-hidden="true">
|
||
<div class="ext-mock">
|
||
<span class="dots"><span></span><span></span><span></span></span>
|
||
<span class="url ltr">https://example.com/login</span>
|
||
<span class="shield">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z"/></svg>
|
||
Bitwarden · 2
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chips">
|
||
<div class="chip reveal">
|
||
<span class="chic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
|
||
<h4 data-i18n="ch1_h">Autofill</h4>
|
||
<p data-i18n="ch1_p">An icon appears inside the login boxes. Click, pick your account, both fields fill instantly.</p>
|
||
</div>
|
||
<div class="chip reveal">
|
||
<span class="chic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5v14"/></svg></span>
|
||
<h4 data-i18n="ch2_h">Save prompt</h4>
|
||
<p data-i18n="ch2_p">Sign up somewhere new and it pops up "Save this login?" — click Save, it's in your vault forever.</p>
|
||
</div>
|
||
<div class="chip reveal">
|
||
<span class="chic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3"/></svg></span>
|
||
<h4 data-i18n="ch3_h">Generate</h4>
|
||
<p data-i18n="ch3_p">On any "create password" field, click the icon → Generate. Long random one, filled and saved in one click.</p>
|
||
</div>
|
||
<div class="chip reveal">
|
||
<span class="chic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5M9 10.8 7 14h10l-2-3.2V4H9z"/><path d="M9 4h6"/></svg></span>
|
||
<h4 data-i18n="ch4_h">Pin it</h4>
|
||
<p data-i18n="ch4_p">Click your browser's puzzle-piece icon and "pin" Bitwarden so the shield is always visible.</p>
|
||
</div>
|
||
<div class="chip reveal">
|
||
<span class="chic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/><path d="M12 15v2"/></svg></span>
|
||
<h4 data-i18n="ch5_h">Auto-lock</h4>
|
||
<p data-i18n="ch5_p">Locks itself after inactivity. Reopening needs your master password (or fingerprint/face).</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 7 — PASSKEYS ============================ -->
|
||
<section id="passkeys" aria-labelledby="s7-h">
|
||
<div class="sec-head">
|
||
<span class="tag">7</span>
|
||
<h2 id="s7-h" data-i18n="s7_h">A quick word on passkeys</h2>
|
||
<p class="note" data-i18n="s7_note">The future is arriving — gradually.</p>
|
||
</div>
|
||
|
||
<div class="callout reveal">
|
||
<span class="cic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"/><path d="M13 13l7 7M16 16l2-2M19 19l1.5-1.5"/></svg></span>
|
||
<div>
|
||
<span class="ck" data-i18n="s7c_k">The future</span>
|
||
<h4 data-i18n="s7c_h">Passkeys: sign in with no password to steal or phish</h4>
|
||
<p data-i18n="s7c_p1">You'll increasingly see "passkeys" or "sign in without a password." Your phone or laptop proves it's
|
||
you with a fingerprint or face — <b>there's no password to steal or phish at all</b>, and accounts using
|
||
them are dramatically harder to break into.</p>
|
||
<p data-i18n="s7c_p2">So why are you still doing all this? Passkeys are <b>rolling out gradually</b> — today only some sites
|
||
support them, and most still use passwords (and will for years). You need a good system for <b>both</b>.
|
||
Good news: <b>Bitwarden stores and syncs your passkeys too</b>, across all your devices — so you're not
|
||
locked into one phone brand. Say yes when a site offers one; managers and passkeys aren't rivals.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 8 — FAQ ============================ -->
|
||
<section id="faq" aria-labelledby="s8-h">
|
||
<div class="sec-head">
|
||
<span class="tag">8</span>
|
||
<h2 id="s8-h" data-i18n="s8_h">Common worries — the skeptic's FAQ</h2>
|
||
<p class="note" data-i18n="s8_note">Tap a question to open it.</p>
|
||
</div>
|
||
|
||
<div class="faq">
|
||
<details>
|
||
<summary><span class="qmark">?</span><span data-i18n="faq1_q">Isn't Bitwarden now a single point of failure?</span>
|
||
<span class="chev" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
|
||
</summary>
|
||
<div class="ans">
|
||
<p data-i18n="faq1_a">Yes — and that's the <b>point</b>. The choice isn't "one door vs. zero doors." It's
|
||
"<b>one extremely well-defended door that you control</b>, vs. 200 flimsy doors scattered across
|
||
companies you've never heard of." One strong master password + two-factor beats reused passwords
|
||
every single time. You're concentrating risk into the one place you can actually make strong.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><span class="qmark">?</span><span data-i18n="faq2_q">What if Bitwarden the company goes out of business?</span>
|
||
<span class="chev" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
|
||
</summary>
|
||
<div class="ans">
|
||
<p data-i18n="faq2_a">You're not trapped. You can <b>export your entire vault</b> at any moment, and because Bitwarden is
|
||
<b>open source</b>, the apps keep working and the community can keep them alive. Worst case, you import
|
||
your export into another manager in ten minutes. Compare that to a closed system where your data leaves
|
||
on the company's terms, not yours.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><span class="qmark">?</span><span data-i18n="faq3_q">Why not just use Apple/Google's built-in one plus passkeys?</span>
|
||
<span class="chev" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
|
||
</summary>
|
||
<div class="ans">
|
||
<p data-i18n="faq3_a">If you live <b>entirely</b> inside one ecosystem and only ever use that brand's devices and browser,
|
||
it's a defensible middle ground — better than reuse. But you lose cross-platform freedom, independent
|
||
auditability, and a true zero-knowledge guarantee, and you tie your whole vault to that one account.
|
||
<b>Bitwarden gives you all of that and still stores your passkeys.</b> You don't have to choose.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><span class="qmark">?</span><span data-i18n="faq4_q">What happens if I lose my phone (my authenticator)?</span>
|
||
<span class="chev" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
|
||
</summary>
|
||
<div class="ans">
|
||
<p data-i18n="faq4_a1">Don't panic — this is exactly what the recovery code is for. The order is:</p>
|
||
<ol>
|
||
<li data-i18n="faq4_li1">From any computer, go to bitwarden.com and log in with your <b>master password</b>.</li>
|
||
<li data-i18n="faq4_li2">When it asks for the two-factor code you can't produce, choose <b>"use recovery code"</b> and enter the code you wrote on paper.</li>
|
||
<li data-i18n="faq4_li3">You're in. Go to <b>Settings → Security</b>, remove the old authenticator, and set up two-factor on your new phone.</li>
|
||
</ol>
|
||
<div class="act-row">
|
||
<button class="gobtn" type="button" data-open="https://bitwarden.com">
|
||
<span data-i18n="faq4_btn">Open bitwarden.com</span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
|
||
</button>
|
||
</div>
|
||
<p data-i18n="faq4_a2">This is why the recovery code on paper (stored <b>separately</b> from your master password) is non-negotiable.</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SUMMARY ============================ -->
|
||
<section id="summary" aria-labelledby="s10-h">
|
||
<div class="sec-head">
|
||
<span class="tag">–</span>
|
||
<h2 id="s10-h" data-i18n="s10_h">The whole thing, in one breath</h2>
|
||
<p class="note" data-i18n="s10_note">If you remember nothing else, remember this.</p>
|
||
</div>
|
||
|
||
<div class="breath reveal">
|
||
<span class="bk" data-i18n="breath_k">The takeaways</span>
|
||
<ul>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_1">Reusing passwords is the #1 way ordinary people get hacked — because <b>companies get breached</b>, not you personally.</span></li>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_2">A password manager gives every account its <b>own strong password</b>, behind one master password you remember.</span></li>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_3">Browser built-ins (Chrome, Apple) are <b>okay</b> but tie everything to one account and keep the keys to your data.</span></li>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_4"><b>Bitwarden</b> is free, works everywhere, and is built so <b>nobody but you</b> can read your passwords.</span></li>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_5">Make the master password a <b>long random passphrase</b>, write it on paper (two copies), turn on app-based 2FA, store the recovery code <b>separately</b>, change important passwords first.</span></li>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_6">A manager can't save an <b>already-infected device</b> — keep your computer and phone clean and updated.</span></li>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_7">Passkeys are a great bonus, and <b>Bitwarden handles them too</b>.</span></li>
|
||
<li><span class="b-dot" aria-hidden="true">→</span><span data-i18n="breath_8">Self-hosting (Vaultwarden) is a cool <b>later</b> project for tinkerers — not a starting point.</span></li>
|
||
</ul>
|
||
<p class="closer" data-i18n="breath_closer">You don't have to become a security expert. You just have to move your keys into a
|
||
proper safe. <em>Twenty minutes today buys you years of "I don't have to worry about this anymore."</em></p>
|
||
</div>
|
||
|
||
<div class="resources">
|
||
<a class="res" href="https://bitwarden.com" target="_blank" rel="noopener noreferrer">
|
||
<span class="ric" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z"/></svg></span>
|
||
<span class="rt"><b>Bitwarden</b><span data-i18n="res1_d">bitwarden.com — sign up free</span></span>
|
||
</a>
|
||
<a class="res" href="https://bitwarden.com/pricing/" target="_blank" rel="noopener noreferrer">
|
||
<span class="ric" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span>
|
||
<span class="rt"><b data-i18n="res2_t">Pricing</b><span data-i18n="res2_d">Latest plans & prices</span></span>
|
||
</a>
|
||
<a class="res" href="https://bitwarden.com/help/import-from-chrome/" target="_blank" rel="noopener noreferrer">
|
||
<span class="ric" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M8 11l4 4 4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg></span>
|
||
<span class="rt"><b data-i18n="res3_t">Import guide</b><span data-i18n="res3_d">Move passwords from Chrome</span></span>
|
||
</a>
|
||
<a class="res" href="https://haveibeenpwned.com/" target="_blank" rel="noopener noreferrer">
|
||
<span class="ric" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></span>
|
||
<span class="rt"><b>Have I Been Pwned</b><span data-i18n="res4_d">Check if you've already leaked</span></span>
|
||
</a>
|
||
<a class="res" href="https://fidoalliance.org/passkeys/" target="_blank" rel="noopener noreferrer">
|
||
<span class="ric" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"/><path d="M13 13l7 7M16 16l2-2"/></svg></span>
|
||
<span class="rt"><b>Passkeys (FIDO)</b><span data-i18n="res5_d">Learn about the password-free future</span></span>
|
||
</a>
|
||
<a class="res" href="https://github.com/dani-garcia/vaultwarden" target="_blank" rel="noopener noreferrer">
|
||
<span class="ric" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg></span>
|
||
<span class="rt"><b>Vaultwarden</b><span data-i18n="res6_d">Self-hosting (advanced)</span></span>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ BONUS APPENDIX — VAULTWARDEN (detached) ============================ -->
|
||
<section id="advanced" class="appendix appendix-break" aria-labelledby="s9-h">
|
||
<div class="appendix-stamp">
|
||
<span class="ab-tag" data-i18n="apx_tag">Bonus · for the curious</span>
|
||
<span class="ab-sub" data-i18n="apx_sub">You can stop reading at the summary above — the guide is complete.
|
||
<b>This appendix is optional</b> and just tells you a more advanced possibility exists.</span>
|
||
</div>
|
||
|
||
<div class="sec-head">
|
||
<span class="tag">+</span>
|
||
<h2 id="s9-h" data-i18n="s9_h">Appendix: self-hosting with Vaultwarden</h2>
|
||
<p class="note" data-i18n="s9_note">A "maybe later" project for tinkerers — <b>not</b> part of the normal switch.</p>
|
||
</div>
|
||
|
||
<div class="advanced reveal">
|
||
<div class="adv-head">
|
||
<span class="adv-flag" data-i18n="adv_flag">⚠ Advanced / entirely optional</span>
|
||
<h3 data-i18n="adv_h">Most people should skip this completely</h3>
|
||
<span class="skip" data-i18n="adv_skip">It is NOT required — <span class="danger-text">doing it wrong is worse than not doing it.</span></span>
|
||
</div>
|
||
<div class="adv-body">
|
||
<p data-i18n="adv_p1">Normally your encrypted vault lives on Bitwarden's servers. Some advanced users prefer to run the
|
||
server <b>themselves</b>, on a little computer at home, using
|
||
<a href="https://github.com/dani-garcia/vaultwarden" target="_blank" rel="noopener noreferrer">Vaultwarden</a> —
|
||
a lightweight community-built server that works with all the normal Bitwarden apps.</p>
|
||
<div class="act-row">
|
||
<button class="gobtn" type="button" data-open="https://github.com/dani-garcia/vaultwarden">
|
||
<span data-i18n="adv_btn">Open Vaultwarden on GitHub</span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
|
||
</button>
|
||
</div>
|
||
<p data-i18n="adv_p2"><b>Important clarification:</b> self-hosting does <b>not</b> change the encryption model. Your vault is
|
||
encrypted on <b>your</b> device either way — Bitwarden's cloud can't read it, and your own server can't
|
||
read it either. What changes is <b>who runs the server you depend on</b> — that brings new
|
||
responsibilities, not new encryption magic.</p>
|
||
<div class="adv-cols">
|
||
<div class="adv-col why">
|
||
<h4 data-i18n="adv_why_h">Why someone might want it</h4>
|
||
<ul>
|
||
<li><span class="m">+</span><span data-i18n="adv_why_1"><b>Total ownership</b> — your data sits on hardware you control.</span></li>
|
||
<li><span class="m">+</span><span data-i18n="adv_why_2">No dependence on a company's decisions or outages.</span></li>
|
||
<li><span class="m">+</span><span data-i18n="adv_why_3">Free and very light on resources.</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="adv-col cost">
|
||
<h4 data-i18n="adv_cost_h">Why it is NOT a beginner move</h4>
|
||
<ul>
|
||
<li><span class="m">−</span><span data-i18n="adv_cost_1"><b>You become the IT department</b> — updates, backups, uptime are now your job, forever.</span></li>
|
||
<li><span class="m">−</span><span data-i18n="adv_cost_2"><b>Backups need protecting too</b> — admin token, config, and TLS keys are sensitive; test that restores actually work.</span></li>
|
||
<li><span class="m">−</span><span data-i18n="adv_cost_3"><b>No formal security audits</b> like official Bitwarden, which is professionally run and monitored 24/7.</span></li>
|
||
<li><span class="m">−</span><span data-i18n="adv_cost_4"><b>Internet exposure adds attack surface</b> — a compromised server can't decrypt your vault, but could serve a booby-trapped login page that captures your master password.</span></li>
|
||
<li><span class="m">−</span><span data-i18n="adv_cost_5"><b>A mistake locks YOU out</b> — and there's no support team to call.</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p style="margin-top:16px" data-i18n="adv_sane"><b>The sane path:</b> start with regular Bitwarden (the cloud version) today —
|
||
it's already zero-knowledge. If months from now you've gotten comfortable and enjoy tinkering with home
|
||
servers, <b>then</b> explore Vaultwarden as a project. There's no rush, and you lose nothing by waiting.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ============================ FOOTER ============================ -->
|
||
<footer class="wrap">
|
||
<p class="fnote" data-i18n="foot_note">
|
||
A plain-English companion to the full tutorial —
|
||
<span class="prims">why it matters · what a manager is · Chrome vs Bitwarden · zero-knowledge · the switch · passkeys · self-hosting</span>.
|
||
<br><br>
|
||
<b>You don't have to think about hackers all day.</b> Move your keys into a proper safe once, calmly, and be set for years.
|
||
</p>
|
||
<div class="sig">
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<span data-i18n="foot_title">Your Passwords Are the Keys to Your Whole Life</span>
|
||
<span class="num ltr">SAFE·01</span>
|
||
<span data-i18n="foot_tag">A field guide for normal humans</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
/* =========================================================================
|
||
INTERNATIONALIZATION (i18n) — EN (default) / DE / FA, with RTL for FA.
|
||
Every translatable node carries data-i18n="key"; translatable attributes
|
||
carry data-i18n-attr="attr:key;...". setLang() swaps innerHTML so inline
|
||
<b>/<em>/<i>/<code> emphasis is preserved inside each translated string.
|
||
Brand names, URLs, the chrome:// string, the example passphrase and other
|
||
code-ish tokens are kept verbatim in every language.
|
||
========================================================================= */
|
||
(function(){
|
||
var I18N = {
|
||
en: {
|
||
page_title:"Your Passwords Are the Keys to Your Whole Life",
|
||
skip:"Skip to content",
|
||
themebar_aria:"Theme and language",
|
||
lang_group_aria:"Language", lang_label:"Language", lang_select_aria:"Choose language",
|
||
theme_group_aria:"Colour theme", theme_label:"Theme",
|
||
theme_light:"LIGHT", theme_dark:"DARK",
|
||
theme_light_aria:"Light theme", theme_dark_aria:"Dark theme",
|
||
coach_kicker:"Languages",
|
||
coach_text:'Read this in <b>English</b>, <b>Deutsch</b> or <b>فارسی</b> — pick a flag up here <span class="arrowhint">↑</span>',
|
||
coach_close_aria:"Dismiss",
|
||
top_1:"<strong>PASSWORD SECURITY</strong>",
|
||
top_2:"A Field Guide for Normal Humans",
|
||
top_3:"The Bitwarden switch, in plain English",
|
||
h1:'Your passwords are the keys to your <span class="accent">whole life</span>',
|
||
sub:"A plain-English guide for people who don't (and shouldn't have to) think about hackers all day",
|
||
lede:'You can\'t remember a good, unique password for every account. <b>Nobody can — that\'s normal.</b> So you hand the job to a heavily-locked digital safe. This guide walks you, calmly and once, from "I reuse the same password" to <b>"I don\'t have to worry about this anymore."</b>',
|
||
tldr_kicker:"The 30-second version",
|
||
tldr_1:"You <b>cannot remember</b> a strong, unique password for every account. Nobody can.",
|
||
tldr_2:"So you use a <b>password manager</b> — a single, heavily-locked digital safe that remembers them all.",
|
||
tldr_3:"Your browser (Chrome / Apple) has one built in. <b>Better than nothing</b>, but it ties your whole life to one account.",
|
||
tldr_4:"The move: switch to <b>Bitwarden</b>. Free, works on everything, built so <b>even the company can't read your passwords</b>.",
|
||
tldr_5:"(For tinkerers: you can self-host your own copy, <b>Vaultwarden</b>. Optional, and at the very end — skip it for now.)",
|
||
tldr_punch:"If you do one thing after reading this: <b>install Bitwarden and set a strong master password.</b> Everything else is detail.",
|
||
compass_aria:"Jump to a section",
|
||
compass_1:"Why it matters", compass_2:"What it is", compass_3:"Chrome vs Bitwarden",
|
||
compass_4:"How it stays secret", compass_5:"How to switch", compass_6:"The extension",
|
||
compass_7:"Passkeys", compass_8:"Worries", compass_9:"Summary", compass_10:"Bonus: self-hosting",
|
||
s1_h:"Why this matters", s1_note:"A story you've lived through without noticing.",
|
||
s1_lab:"The key analogy",
|
||
s1_quote:"Imagine you use <em>the same key</em> for your house, your car, your office, your safe-deposit box, and your mailbox — then hand a copy to every shop that asks.",
|
||
s1_body:'That\'s exactly what using <b>the same password everywhere</b> is. The danger isn\'t "will a hacker pick <b>me</b>?" It\'s "<b>will one of the dozens of companies I trusted get breached?</b>" When one does, criminals take your email + password and automatically <b>try it on your bank, your Amazon, your PayPal</b> — this is called <em>credential stuffing</em>, done by software at massive scale while the attacker sleeps. You\'re just one row in a spreadsheet of millions.',
|
||
g1_a:"most", g1_b:"breaches", g1_lab:"The #1 way in", g1_h:"Stolen & weak credentials",
|
||
g1_p:"The large majority of hacking-related breaches involve stolen or weak passwords — year after year.",
|
||
g1_src:"Source: Verizon DBIR",
|
||
g2_a:"most", g2_b:"people", g2_lab:"The bad habit", g2_h:"Reuse the same password",
|
||
g2_p:"Surveys consistently find most people reuse passwords across multiple accounts.",
|
||
g2_src:"Source: industry surveys",
|
||
g3_a:"billions", g3_lab:"Already out there", g3_h:"Stolen passwords circulating",
|
||
g3_p:"Billions of stolen passwords are already on criminal forums and in malware dumps right now.",
|
||
g3_src:"Source: breach dumps",
|
||
s1_fixk:"The fix is boring and incredibly effective",
|
||
s1_fixp:"Every account gets its <b>own unique, long password</b>. Then a breach at the sock shop <b>stays at the sock shop</b> — it can't spread. You just can't memorize 200 of them, so we let a machine do it.",
|
||
s2_h:"What a password manager actually is", s2_note:"No jargon — one super-secure digital safe.",
|
||
s2_intro:'It\'s <b>one super-secure digital safe</b>. Inside it lives every password you have. You lock it with a <b>single master password</b> — the one and only password you ever have to remember. You go from "I have to remember everything" to "I have to remember <b>one thing</b>."',
|
||
w1_h:"It fills logins for you",
|
||
w1_p:"Visit a site and it recognizes it and <b>fills in your login automatically</b>. No typing.",
|
||
w2_h:"It invents strong ones",
|
||
w2_p:'New account? It makes up a long random password like <code class="ltr">K7$mq2#vLp9!xQ</code>, saves it, and <b>you never see it again</b>.',
|
||
w3_h:"It follows you everywhere",
|
||
w3_p:"New phone, new laptop? <b>Log in once and all your passwords are there.</b>",
|
||
b1_h:"It helps block fake websites",
|
||
b1_p:'It fills based on the <b>real</b> web address. If a scam sends you to <code class="ltr">paypa1-secure.com</code>, it just won\'t fill anything in — that silence is a warning sign.',
|
||
b2_h:"It tells you when you're exposed",
|
||
b2_p:'Good managers check your saved passwords against known breaches and say <b>"hey, change this one."</b>',
|
||
s2c1_k:"Important habit", s2c1_h:"If it doesn't offer to fill in — stop",
|
||
s2c1_p:"If your manager <b>doesn't</b> offer to fill a login where it normally would, don't dig the password out and paste it by hand. <b>Check the web address first.</b> The whole protection disappears the moment you manually copy-paste around it.",
|
||
s2c2_k:"One honest limit — please read", s2c2_h:"A manager can't save an already-infected device",
|
||
s2c2_p:"It protects you against the two biggest threats — <b>company breaches</b> and <b>password reuse</b>. But if your device already has malware (a keylogger / infostealer), it can capture your master password as you type. So <b>keep your operating system and browser updated, and don't install pirated or sketchy software.</b> A great lock on a rotten door isn't enough.",
|
||
s3_h:'"But Chrome already saves my passwords" — is that the same?',
|
||
s3_note:"It's better than reuse. But it's a closed box you don't hold the key to.",
|
||
cmp_cap:"Browser built-in (Chrome / Apple) vs Bitwarden — what actually differs",
|
||
cmp_th_feat:"Feature", cmp_th_browser:"Browser built-in (Chrome / Apple)",
|
||
cmp_dh_browser:"Browser", cmp_dh_bw:"Bitwarden",
|
||
cmp_r1_h:"Separate master password",
|
||
cmp_r1_b:'<span class="verdict no"><span class="vd">✗</span> Not by default</span> — opens with your Google / Apple account',
|
||
cmp_r1_w:'<span class="verdict yes"><span class="vd">✓</span> Yes</span> — one dedicated master password',
|
||
cmp_r2_h:"Zero-knowledge (company can't read it)",
|
||
cmp_r2_b:'<span class="verdict no"><span class="vd">✗</span> No</span> — Google holds the keys; an opt-in on-device option exists but is off by default',
|
||
cmp_r2_w:'<span class="verdict yes"><span class="vd">✓</span> Yes, by design</span> — locked on your device before it ever leaves',
|
||
cmp_r3_h:"Works across all platforms",
|
||
cmp_r3_b:'<span class="verdict meh"><span class="vd">⚠</span> Clumsy</span> — happiest inside one ecosystem; mixing gets awkward',
|
||
cmp_r3_w:'<span class="verdict yes"><span class="vd">✓</span> Everywhere</span> — iPhone, Android, Windows, Mac, Linux, every browser',
|
||
cmp_r4_h:"Open source & independently audited",
|
||
cmp_r4_b:'<span class="verdict no"><span class="vd">✗</span> Closed box</span> — you\'re asked to simply trust it',
|
||
cmp_r4_w:'<span class="verdict yes"><span class="vd">✓</span> Yes</span> — outside firms & university researchers inspect it',
|
||
cmp_r5_h:"Extra tools (2FA codes, sharing, emergency access)",
|
||
cmp_r5_b:'<span class="verdict no"><span class="vd">✗</span> Few</span> — and less transparency',
|
||
cmp_r5_w:'<span class="verdict yes"><span class="vd">✓</span> Yes</span> — 2FA codes, secure sharing, secure notes, emergency access',
|
||
cmp_r6_h:"Leave any time (no lock-in)",
|
||
cmp_r6_b:'<span class="verdict meh"><span class="vd">⚠</span> Hostage-ish</span> — data leaves on their terms',
|
||
cmp_r6_w:'<span class="verdict yes"><span class="vd">✓</span> Export anytime</span> — open source, never held hostage',
|
||
s3c_k:"Credit where it's due", s3c_h:"The browser one is far better than reusing one password",
|
||
s3c_p:"If Chrome's or Apple's built-in manager is all you ever use, <b>you're already ahead of most people.</b> The honest summary: it's convenient and okay — but it puts all your eggs in one company's basket, keeps the ability to read your stuff, and isn't the dedicated, independently-verified vault your most sensitive data deserves.",
|
||
s4_h:"How it stays secret — end-to-end encryption",
|
||
s4_note:'"They hold the locked box but never get the key."',
|
||
zk1_step:"Step 1 — your device", zk1_h:"Your device locks it",
|
||
zk1_p:"Your password is scrambled <b>on your phone or laptop</b>, using your master password as the key.",
|
||
zk2_step:"Step 2 — in transit", zk2_h:"A scrambled blob travels",
|
||
zk2_p:"What leaves your device is already unreadable. The key <b>never goes with it.</b>",
|
||
zk3_step:"Step 3 — their server", zk3_h:"Server holds only gibberish",
|
||
zk3_p:"Bitwarden stores the locked box but <b>cannot open it</b> — even if they wanted to, or were hacked.",
|
||
zk_cap:"Even in the worst case — Bitwarden gets hacked and criminals steal everything — the thieves get a vault of <b>gibberish</b>, not your passwords. That's <b>zero-knowledge</b>.",
|
||
s4c1_k:"The LastPass lesson — why master-password STRENGTH is everything",
|
||
s4c1_h:"In a breach, the length of your master password is what saves you",
|
||
s4c1_p1:"In 2022 a different manager, LastPass, was breached — attackers stole copies of users' <b>encrypted vaults</b>. People with <b>strong</b> master passwords were fine; their vaults stayed unreadable scrambles. People with <b>weak</b> ones had their vaults slowly cracked open <b>offline</b>, guessing billions of passwords as fast as the hardware allowed.",
|
||
s4c1_p2:"<b>Two-factor authentication does NOT help here</b> — the attacker already has the raw encrypted file and never touches a login screen. The takeaway: make your master password a <b>long, random passphrase</b>. That length and randomness is the one thing standing between you and disaster.",
|
||
s4c2_k:"Why Bitwarden specifically", s4c2_h:"Free, everywhere, audited, no lock-in",
|
||
s4c2_p:"<b>Free and genuinely complete</b> (unlimited passwords + devices). <b>Works everywhere</b> — no ecosystem lock-in. <b>Open source and independently audited</b> (including university cryptography researchers). Does the extra safety stuff (2FA codes, breach alerts, secure sharing, emergency access). Optional Premium is about <b>$20/year</b>; Families about <b>$48/year for 6 people</b> — but <b>start free.</b> <em>(Prices as of 2026 — check the pricing page below for the latest.)</em>",
|
||
s4c3_k:"The one rule you must not break",
|
||
s4c3_h:"Bitwarden can't recover your master password — so protect it on paper",
|
||
s4c3_p:'Because the company can\'t read your vault, there\'s <b>no "forgot password" email.</b> So: pick a strong passphrase — four or five <b>random</b> words, e.g. <code class="ltr">velvet-trombone-glacier-pickle-lantern</code> (don\'t use that example or any famous one — pick your <b>own</b> random words). <b>Write it on paper</b> and keep it safe at home, with a <b>second copy in a different safe place.</b> A burglar at home is a far smaller risk than a hacker on the internet.',
|
||
s5_h:"How to switch — step by step (~20 minutes)",
|
||
s5_note:"Do it once, calmly, in one sitting. Set for years.",
|
||
gw_roadmap_aria:"The 8 steps — jump to any",
|
||
gw_rm_1:"Account", gw_rm_2:"Install", gw_rm_3:"Move over", gw_rm_4:"Destroy file",
|
||
gw_rm_5:"Turn off Chrome", gw_rm_6:"Extension", gw_rm_7:"Lock down", gw_rm_8:"Level up",
|
||
gw_panel_1:"Step 1 of 8", gw_panel_2:"Step 2 of 8", gw_panel_3:"Step 3 of 8", gw_panel_4:"Step 4 of 8",
|
||
gw_panel_5:"Step 5 of 8", gw_panel_6:"Step 6 of 8", gw_panel_7:"Step 7 of 8", gw_panel_8:"Step 8 of 8",
|
||
gw_counter:"Step {n} of {t}", gw_prev:"PREV", gw_next:"NEXT",
|
||
gw1_phase:"Sign up", gw1_time:"~2 min", gw1_h:"Create your Bitwarden account",
|
||
gw1_li1:'Go to <a href="https://bitwarden.com" target="_blank" rel="noopener noreferrer" class="ltr">bitwarden.com</a> and sign up (free).',
|
||
gw1_li2:"Choose your <b>master password</b> — a long, random passphrase (see the rule above).",
|
||
gw1_li3:"<b>Write it down on paper</b> and store it safely (and make that second copy).",
|
||
gw1_li4:"Heads up: in a few steps we'll turn on two-factor authentication. Plan to do it today.",
|
||
gw1_btn:"Open bitwarden.com",
|
||
gw2_phase:"Install", gw2_time:"~3 min", gw2_h:"Install Bitwarden where you'll use it",
|
||
gw2_li1:"<b>Browser extension</b> on your computer (Chrome, Firefox, Edge, Safari) — this is the one that auto-fills logins.",
|
||
gw2_li2:"<b>App on your phone</b> (App Store / Google Play) — so it follows you everywhere.",
|
||
gw2_btn:"Open all downloads (apps & extensions)",
|
||
gw3_phase:"Migrate", gw3_time:"~5 min", gw3_h:"Move your existing passwords over",
|
||
gw3_p1:"In <b>Chrome</b>, open the password settings, find <b>Export passwords</b>, and save the file (Chrome will ask for your computer password — that's normal):",
|
||
gw3_copy_label:"Copy · paste into Chrome's address bar",
|
||
gw3_copied:"COPIED ✓",
|
||
gw3_copy_aria:"Copy the Chrome password settings address, then paste it into Chrome's address bar",
|
||
gw3_note:'(Browsers don\'t allow web pages to open <code class="ltr">chrome://</code> links directly — so copy this, then paste it into Chrome\'s address bar yourself.)',
|
||
gw3_p2:"In Bitwarden, go to <b>Tools → Import data</b>, pick the <b>Chrome / Chromium</b> source, and upload that file. (Menu labels shift now and then — the official import guide has current screenshots.)",
|
||
gw3_btn:"Open the official import guide",
|
||
gw3_li:"<b>Verify the import worked before deleting anything.</b> Check that your most important logins — email, bank, main shopping — are actually there and correct. Imports can occasionally drop or mangle entries.",
|
||
gw4_phase:"Critical", gw4_time:"~1 min", gw4_h:"Destroy the leftover export file",
|
||
gw4_k:"Don't skip this", gw4_ch:"That export is a plaintext list of every password you own",
|
||
gw4_p1:"Save it only to a simple local folder like your <b>Desktop</b> — <b>never</b> a cloud-synced folder (OneDrive, iCloud, Google Drive, Dropbox) and never a USB stick. The moment the import is confirmed: <b>delete it and empty your Recycle Bin / Trash.</b>",
|
||
gw4_p2:"Emptying the Trash doesn't truly erase data — it can linger until overwritten. So do export → import → delete <b>in one sitting</b>, and it helps a lot if your drive is encrypted (BitLocker on Windows, FileVault on Mac — worth turning on anyway).",
|
||
gw5_phase:"Tidy up", gw5_time:"~2 min", gw5_h:"Turn OFF Chrome's password saving",
|
||
gw5_p:"Otherwise two managers will fight to fill your logins.",
|
||
gw5_li1:'In Chrome\'s password settings, turn <b>off</b> "Offer to save passwords."',
|
||
gw5_li2:"<b>Only after</b> you've used Bitwarden for a week and trust it's all there — <b>then</b> delete the passwords stored in Chrome. No rush; two managers holding the same passwords for a week hurts nothing.",
|
||
gw6_phase:"The magic", gw6_time:"daily use", gw6_h:"Meet your new browser extension",
|
||
gw6_p:'That little shield icon near your address bar is the part you\'ll use every day. It logs you in, offers to <b>save new logins</b>, <b>generates strong passwords</b> on "create password" fields, can be <b>pinned</b> for easy access, and <b>auto-locks</b> after inactivity (asking for your master password or fingerprint to reopen). The phone app works the same way. Full breakdown in section 6 below.',
|
||
gw7_phase:"Lock down", gw7_time:"~5 min", gw7_h:"Lock down your Bitwarden account",
|
||
gw7_p:"Your vault is now the most valuable thing on your computer. In <b>Settings → Security</b>, turn on <b>two-step login (2FA)</b> — a second lock, so even a stolen master password isn't enough. Pick your method wisely:",
|
||
gw7_m1_r:"✓ BEST · FREE", gw7_m1_t:"<b>Authenticator app</b> (Aegis, or Bitwarden's own) — a 6-digit code on your phone. <b>Use this as your default.</b>",
|
||
gw7_m2_r:"✓ STRONGEST", gw7_m2_t:"<b>Hardware security key</b> (like a YubiKey, paid plan) — the only truly phishing-proof kind.",
|
||
gw7_m3_r:"⚠ AVOID", gw7_m3_t:"<b>SMS text codes</b> — they can be hijacked.",
|
||
gw7_m4_r:"⚠ DON'T", gw7_m4_t:"<b>Email codes for Bitwarden</b> — if your email password lives <i>in</i> Bitwarden, this creates a circular lockout.",
|
||
gw7_li1:"<b>Save your 2FA recovery code — and store it SEPARATELY from your master password.</b> If both sit on the same slip in the same drawer, your second lock protected nothing.",
|
||
gw7_li2:"Set a sensible <b>auto-lock timeout</b>, <b>never reuse</b> the master password anywhere, and be <b>suspicious of master-password prompts</b> (only the official app, extension, or real bitwarden.com should ask).",
|
||
gw7_li3:"Optionally keep an <b>encrypted / password-protected</b> export as a safety net — never the plain CSV from Step 3.",
|
||
gw8_phase:"Level up", gw8_time:"over time", gw8_h:"Live with it for a week, then level up",
|
||
gw8_p:"Use it normally; let it auto-fill. Then do the <b>most valuable habit of all:</b>",
|
||
gw8_k:"The habit", gw8_ch:"Replace old passwords with generated ones — email first",
|
||
gw8_cp:"Whenever you log into an important account, change that password to a new random one Bitwarden generates. Do your <b>most important accounts first — email above all</b>, because your email can reset every other password you own. Fix the top 5 this week; the rest happen naturally over time.",
|
||
s6_h:"How the browser extension works", s6_note:"The little shield you'll touch every day.",
|
||
ch1_h:"Autofill", ch1_p:"An icon appears inside the login boxes. Click, pick your account, both fields fill instantly.",
|
||
ch2_h:"Save prompt", ch2_p:'Sign up somewhere new and it pops up "Save this login?" — click Save, it\'s in your vault forever.',
|
||
ch3_h:"Generate", ch3_p:'On any "create password" field, click the icon → Generate. Long random one, filled and saved in one click.',
|
||
ch4_h:"Pin it", ch4_p:'Click your browser\'s puzzle-piece icon and "pin" Bitwarden so the shield is always visible.',
|
||
ch5_h:"Auto-lock", ch5_p:"Locks itself after inactivity. Reopening needs your master password (or fingerprint/face).",
|
||
s7_h:"A quick word on passkeys", s7_note:"The future is arriving — gradually.",
|
||
s7c_k:"The future", s7c_h:"Passkeys: sign in with no password to steal or phish",
|
||
s7c_p1:'You\'ll increasingly see "passkeys" or "sign in without a password." Your phone or laptop proves it\'s you with a fingerprint or face — <b>there\'s no password to steal or phish at all</b>, and accounts using them are dramatically harder to break into.',
|
||
s7c_p2:"So why are you still doing all this? Passkeys are <b>rolling out gradually</b> — today only some sites support them, and most still use passwords (and will for years). You need a good system for <b>both</b>. Good news: <b>Bitwarden stores and syncs your passkeys too</b>, across all your devices — so you're not locked into one phone brand. Say yes when a site offers one; managers and passkeys aren't rivals.",
|
||
s8_h:"Common worries — the skeptic's FAQ", s8_note:"Tap a question to open it.",
|
||
faq1_q:"Isn't Bitwarden now a single point of failure?",
|
||
faq1_a:'Yes — and that\'s the <b>point</b>. The choice isn\'t "one door vs. zero doors." It\'s "<b>one extremely well-defended door that you control</b>, vs. 200 flimsy doors scattered across companies you\'ve never heard of." One strong master password + two-factor beats reused passwords every single time. You\'re concentrating risk into the one place you can actually make strong.',
|
||
faq2_q:"What if Bitwarden the company goes out of business?",
|
||
faq2_a:"You're not trapped. You can <b>export your entire vault</b> at any moment, and because Bitwarden is <b>open source</b>, the apps keep working and the community can keep them alive. Worst case, you import your export into another manager in ten minutes. Compare that to a closed system where your data leaves on the company's terms, not yours.",
|
||
faq3_q:"Why not just use Apple/Google's built-in one plus passkeys?",
|
||
faq3_a:"If you live <b>entirely</b> inside one ecosystem and only ever use that brand's devices and browser, it's a defensible middle ground — better than reuse. But you lose cross-platform freedom, independent auditability, and a true zero-knowledge guarantee, and you tie your whole vault to that one account. <b>Bitwarden gives you all of that and still stores your passkeys.</b> You don't have to choose.",
|
||
faq4_q:"What happens if I lose my phone (my authenticator)?",
|
||
faq4_a1:"Don't panic — this is exactly what the recovery code is for. The order is:",
|
||
faq4_li1:"From any computer, go to bitwarden.com and log in with your <b>master password</b>.",
|
||
faq4_li2:'When it asks for the two-factor code you can\'t produce, choose <b>"use recovery code"</b> and enter the code you wrote on paper.',
|
||
faq4_li3:"You're in. Go to <b>Settings → Security</b>, remove the old authenticator, and set up two-factor on your new phone.",
|
||
faq4_btn:"Open bitwarden.com",
|
||
faq4_a2:"This is why the recovery code on paper (stored <b>separately</b> from your master password) is non-negotiable.",
|
||
s10_h:"The whole thing, in one breath", s10_note:"If you remember nothing else, remember this.",
|
||
breath_k:"The takeaways",
|
||
breath_1:"Reusing passwords is the #1 way ordinary people get hacked — because <b>companies get breached</b>, not you personally.",
|
||
breath_2:"A password manager gives every account its <b>own strong password</b>, behind one master password you remember.",
|
||
breath_3:"Browser built-ins (Chrome, Apple) are <b>okay</b> but tie everything to one account and keep the keys to your data.",
|
||
breath_4:"<b>Bitwarden</b> is free, works everywhere, and is built so <b>nobody but you</b> can read your passwords.",
|
||
breath_5:"Make the master password a <b>long random passphrase</b>, write it on paper (two copies), turn on app-based 2FA, store the recovery code <b>separately</b>, change important passwords first.",
|
||
breath_6:"A manager can't save an <b>already-infected device</b> — keep your computer and phone clean and updated.",
|
||
breath_7:"Passkeys are a great bonus, and <b>Bitwarden handles them too</b>.",
|
||
breath_8:"Self-hosting (Vaultwarden) is a cool <b>later</b> project for tinkerers — not a starting point.",
|
||
breath_closer:'You don\'t have to become a security expert. You just have to move your keys into a proper safe. <em>Twenty minutes today buys you years of "I don\'t have to worry about this anymore."</em>',
|
||
res1_d:"bitwarden.com — sign up free",
|
||
res2_t:"Pricing", res2_d:"Latest plans & prices",
|
||
res3_t:"Import guide", res3_d:"Move passwords from Chrome",
|
||
res4_d:"Check if you've already leaked",
|
||
res5_d:"Learn about the password-free future",
|
||
res6_d:"Self-hosting (advanced)",
|
||
apx_tag:"Bonus · for the curious",
|
||
apx_sub:"You can stop reading at the summary above — the guide is complete. <b>This appendix is optional</b> and just tells you a more advanced possibility exists.",
|
||
s9_h:"Appendix: self-hosting with Vaultwarden",
|
||
s9_note:'A "maybe later" project for tinkerers — <b>not</b> part of the normal switch.',
|
||
adv_flag:"⚠ Advanced / entirely optional", adv_h:"Most people should skip this completely",
|
||
adv_skip:'It is NOT required — <span class="danger-text">doing it wrong is worse than not doing it.</span>',
|
||
adv_p1:'Normally your encrypted vault lives on Bitwarden\'s servers. Some advanced users prefer to run the server <b>themselves</b>, on a little computer at home, using <a href="https://github.com/dani-garcia/vaultwarden" target="_blank" rel="noopener noreferrer">Vaultwarden</a> — a lightweight community-built server that works with all the normal Bitwarden apps.',
|
||
adv_btn:"Open Vaultwarden on GitHub",
|
||
adv_p2:"<b>Important clarification:</b> self-hosting does <b>not</b> change the encryption model. Your vault is encrypted on <b>your</b> device either way — Bitwarden's cloud can't read it, and your own server can't read it either. What changes is <b>who runs the server you depend on</b> — that brings new responsibilities, not new encryption magic.",
|
||
adv_why_h:"Why someone might want it",
|
||
adv_why_1:"<b>Total ownership</b> — your data sits on hardware you control.",
|
||
adv_why_2:"No dependence on a company's decisions or outages.",
|
||
adv_why_3:"Free and very light on resources.",
|
||
adv_cost_h:"Why it is NOT a beginner move",
|
||
adv_cost_1:"<b>You become the IT department</b> — updates, backups, uptime are now your job, forever.",
|
||
adv_cost_2:"<b>Backups need protecting too</b> — admin token, config, and TLS keys are sensitive; test that restores actually work.",
|
||
adv_cost_3:"<b>No formal security audits</b> like official Bitwarden, which is professionally run and monitored 24/7.",
|
||
adv_cost_4:"<b>Internet exposure adds attack surface</b> — a compromised server can't decrypt your vault, but could serve a booby-trapped login page that captures your master password.",
|
||
adv_cost_5:"<b>A mistake locks YOU out</b> — and there's no support team to call.",
|
||
adv_sane:"<b>The sane path:</b> start with regular Bitwarden (the cloud version) today — it's already zero-knowledge. If months from now you've gotten comfortable and enjoy tinkering with home servers, <b>then</b> explore Vaultwarden as a project. There's no rush, and you lose nothing by waiting.",
|
||
foot_note:'A plain-English companion to the full tutorial — <span class="prims">why it matters · what a manager is · Chrome vs Bitwarden · zero-knowledge · the switch · passkeys · self-hosting</span>.<br><br><b>You don\'t have to think about hackers all day.</b> Move your keys into a proper safe once, calmly, and be set for years.',
|
||
foot_title:"Your Passwords Are the Keys to Your Whole Life",
|
||
foot_tag:"A field guide for normal humans"
|
||
},
|
||
de: {
|
||
page_title:"Deine Passwörter sind die Schlüssel zu deinem ganzen Leben",
|
||
skip:"Zum Inhalt springen",
|
||
themebar_aria:"Design und Sprache",
|
||
lang_group_aria:"Sprache", lang_label:"Sprache", lang_select_aria:"Sprache wählen",
|
||
theme_group_aria:"Farbdesign", theme_label:"Design",
|
||
theme_light:"HELL", theme_dark:"DUNKEL",
|
||
theme_light_aria:"Helles Design", theme_dark_aria:"Dunkles Design",
|
||
coach_kicker:"Sprachen",
|
||
coach_text:'Lies das auf <b>Deutsch</b>, <b>English</b> oder <b>فارسی</b> — Flagge hier oben wählen <span class="arrowhint">↑</span>',
|
||
coach_close_aria:"Schließen",
|
||
top_1:"<strong>PASSWORTSICHERHEIT</strong>",
|
||
top_2:"Ein Leitfaden für ganz normale Menschen",
|
||
top_3:"Der Umstieg auf Bitwarden, einfach erklärt",
|
||
h1:'Deine Passwörter sind die Schlüssel zu deinem <span class="accent">ganzen Leben</span>',
|
||
sub:"Ein verständlicher Leitfaden für Menschen, die nicht (und nicht müssen sollten) den ganzen Tag an Hacker denken",
|
||
lede:'Du kannst dir kein gutes, einzigartiges Passwort für jedes Konto merken. <b>Niemand kann das — das ist völlig normal.</b> Also überlässt du diese Aufgabe einem schwer gesicherten digitalen Tresor. Dieser Leitfaden begleitet dich, in Ruhe und nur einmal, von „Ich benutze überall dasselbe Passwort" zu <b>„Darüber muss ich mir keine Sorgen mehr machen."</b>',
|
||
tldr_kicker:"Die 30-Sekunden-Version",
|
||
tldr_1:"Du <b>kannst dir kein</b> starkes, einzigartiges Passwort für jedes Konto merken. Niemand kann das.",
|
||
tldr_2:"Also nutzt du einen <b>Passwort-Manager</b> — einen einzigen, schwer gesicherten digitalen Tresor, der sich alle merkt.",
|
||
tldr_3:"Dein Browser (Chrome / Apple) hat einen eingebaut. <b>Besser als nichts</b>, aber er bindet dein ganzes Leben an ein einziges Konto.",
|
||
tldr_4:"Der richtige Schritt: wechsle zu <b>Bitwarden</b>. Kostenlos, läuft überall, so gebaut, dass <b>nicht einmal das Unternehmen deine Passwörter lesen kann</b>.",
|
||
tldr_5:"(Für Bastler: du kannst deine eigene Kopie selbst hosten, <b>Vaultwarden</b>. Optional und ganz am Ende — lass das vorerst weg.)",
|
||
tldr_punch:"Wenn du nach dem Lesen nur eine Sache tust: <b>installiere Bitwarden und lege ein starkes Master-Passwort fest.</b> Alles andere ist Detail.",
|
||
compass_aria:"Zu einem Abschnitt springen",
|
||
compass_1:"Warum es zählt", compass_2:"Was es ist", compass_3:"Chrome vs. Bitwarden",
|
||
compass_4:"Wie es geheim bleibt", compass_5:"So wechselst du", compass_6:"Die Erweiterung",
|
||
compass_7:"Passkeys", compass_8:"Bedenken", compass_9:"Zusammenfassung", compass_10:"Bonus: Selbst hosten",
|
||
s1_h:"Warum das wichtig ist", s1_note:"Eine Geschichte, die du erlebt hast, ohne es zu merken.",
|
||
s1_lab:"Die Schlüssel-Analogie",
|
||
s1_quote:"Stell dir vor, du benutzt <em>denselben Schlüssel</em> für dein Haus, dein Auto, dein Büro, dein Bankschließfach und deinen Briefkasten — und gibst jedem Laden, der fragt, eine Kopie.",
|
||
s1_body:'Genau das ist es, <b>überall dasselbe Passwort</b> zu benutzen. Die Gefahr ist nicht „pickt sich ein Hacker ausgerechnet <b>mich</b> heraus?". Sie ist „<b>wird eines der Dutzende Unternehmen, denen ich vertraut habe, gehackt?</b>" Wenn das passiert, nehmen Kriminelle deine E-Mail-Adresse + dein Passwort und probieren sie automatisch <b>bei deiner Bank, deinem Amazon, deinem PayPal</b> aus — das nennt man <em>Credential Stuffing</em>, von Software in riesigem Umfang erledigt, während der Angreifer schläft. Du bist nur eine Zeile in einer Tabelle mit Millionen.',
|
||
g1_a:"meiste", g1_b:"Vorfälle", g1_lab:"Der häufigste Einbruchsweg", g1_h:"Gestohlene & schwache Zugangsdaten",
|
||
g1_p:"Die große Mehrheit der hacking-bedingten Datenpannen betrifft gestohlene oder schwache Passwörter — Jahr für Jahr.",
|
||
g1_src:"Quelle: Verizon DBIR",
|
||
g2_a:"meiste", g2_b:"Menschen", g2_lab:"Die schlechte Angewohnheit", g2_h:"Dasselbe Passwort wiederverwenden",
|
||
g2_p:"Umfragen zeigen immer wieder, dass die meisten Menschen Passwörter über mehrere Konten hinweg wiederverwenden.",
|
||
g2_src:"Quelle: Branchenumfragen",
|
||
g3_a:"Milliarden", g3_lab:"Schon im Umlauf", g3_h:"Gestohlene Passwörter im Umlauf",
|
||
g3_p:"Milliarden gestohlener Passwörter kursieren genau jetzt schon in kriminellen Foren und in Malware-Datensätzen.",
|
||
g3_src:"Quelle: Daten-Leaks",
|
||
s1_fixk:"Die Lösung ist langweilig und unglaublich wirksam",
|
||
s1_fixp:"Jedes Konto bekommt sein <b>eigenes, einzigartiges, langes Passwort</b>. Dann bleibt ein Hack beim Sockenladen <b>beim Sockenladen</b> — er kann sich nicht ausbreiten. Du kannst dir nur keine 200 davon merken, also lassen wir das eine Maschine erledigen.",
|
||
s2_h:"Was ein Passwort-Manager wirklich ist", s2_note:"Kein Fachjargon — ein hochsicherer digitaler Tresor.",
|
||
s2_intro:'Es ist <b>ein hochsicherer digitaler Tresor</b>. Darin liegt jedes Passwort, das du hast. Du verschließt ihn mit einem <b>einzigen Master-Passwort</b> — dem einen und einzigen Passwort, das du dir je merken musst. Du gehst von „Ich muss mir alles merken" zu „Ich muss mir <b>eine Sache</b> merken".',
|
||
w1_h:"Es füllt Logins für dich aus",
|
||
w1_p:"Du besuchst eine Seite, sie wird erkannt, und <b>dein Login wird automatisch ausgefüllt</b>. Kein Tippen.",
|
||
w2_h:"Es erfindet starke Passwörter",
|
||
w2_p:'Neues Konto? Es denkt sich ein langes, zufälliges Passwort wie <code class="ltr">K7$mq2#vLp9!xQ</code> aus, speichert es, und <b>du bekommst es nie wieder zu Gesicht</b>.',
|
||
w3_h:"Es folgt dir überallhin",
|
||
w3_p:"Neues Handy, neuer Laptop? <b>Einmal anmelden und alle deine Passwörter sind da.</b>",
|
||
b1_h:"Es hilft, gefälschte Websites zu blockieren",
|
||
b1_p:'Es füllt anhand der <b>echten</b> Webadresse aus. Wenn ein Betrug dich zu <code class="ltr">paypa1-secure.com</code> schickt, füllt es einfach nichts aus — diese Stille ist ein Warnsignal.',
|
||
b2_h:"Es sagt dir, wenn du gefährdet bist",
|
||
b2_p:'Gute Manager prüfen deine gespeicherten Passwörter gegen bekannte Datenpannen und sagen dir <b>„hey, ändere dieses hier."</b>',
|
||
s2c1_k:"Wichtige Angewohnheit", s2c1_h:"Wenn er nicht anbietet auszufüllen — halt inne",
|
||
s2c1_p:"Wenn dein Manager <b>nicht</b> anbietet, ein Login auszufüllen, wo er es normalerweise tut, grab das Passwort nicht von Hand heraus und füge es ein. <b>Prüfe zuerst die Webadresse.</b> Der gesamte Schutz verschwindet in dem Moment, in dem du ihn manuell mit Kopieren und Einfügen umgehst.",
|
||
s2c2_k:"Eine ehrliche Grenze — bitte lesen", s2c2_h:"Ein Manager kann ein bereits infiziertes Gerät nicht retten",
|
||
s2c2_p:"Er schützt dich vor den zwei größten Bedrohungen — <b>Datenpannen bei Unternehmen</b> und <b>Passwort-Wiederverwendung</b>. Aber wenn dein Gerät bereits Schadsoftware hat (einen Keylogger / Infostealer), kann diese dein Master-Passwort beim Tippen abfangen. Also <b>halte dein Betriebssystem und deinen Browser aktuell und installiere keine raubkopierte oder zwielichtige Software.</b> Ein gutes Schloss an einer morschen Tür reicht nicht.",
|
||
s3_h:'„Aber Chrome speichert meine Passwörter doch schon" — ist das dasselbe?',
|
||
s3_note:"Es ist besser als Wiederverwendung. Aber es ist eine verschlossene Kiste, deren Schlüssel du nicht hältst.",
|
||
cmp_cap:"Browser-eingebaut (Chrome / Apple) vs. Bitwarden — was sich wirklich unterscheidet",
|
||
cmp_th_feat:"Funktion", cmp_th_browser:"Browser-eingebaut (Chrome / Apple)",
|
||
cmp_dh_browser:"Browser", cmp_dh_bw:"Bitwarden",
|
||
cmp_r1_h:"Separates Master-Passwort",
|
||
cmp_r1_b:'<span class="verdict no"><span class="vd">✗</span> Nicht standardmäßig</span> — öffnet sich mit deinem Google-/Apple-Konto',
|
||
cmp_r1_w:'<span class="verdict yes"><span class="vd">✓</span> Ja</span> — ein eigenes Master-Passwort',
|
||
cmp_r2_h:"Zero-Knowledge (Unternehmen kann es nicht lesen)",
|
||
cmp_r2_b:'<span class="verdict no"><span class="vd">✗</span> Nein</span> — Google hält die Schlüssel; eine optionale Auf-dem-Gerät-Funktion gibt es, ist aber standardmäßig aus',
|
||
cmp_r2_w:'<span class="verdict yes"><span class="vd">✓</span> Ja, von Grund auf</span> — auf deinem Gerät verschlüsselt, bevor es es je verlässt',
|
||
cmp_r3_h:"Funktioniert auf allen Plattformen",
|
||
cmp_r3_b:'<span class="verdict meh"><span class="vd">⚠</span> Umständlich</span> — am wohlsten in einem Ökosystem; mischen wird mühsam',
|
||
cmp_r3_w:'<span class="verdict yes"><span class="vd">✓</span> Überall</span> — iPhone, Android, Windows, Mac, Linux, jeder Browser',
|
||
cmp_r4_h:"Open Source & unabhängig geprüft",
|
||
cmp_r4_b:'<span class="verdict no"><span class="vd">✗</span> Geschlossene Kiste</span> — du sollst einfach vertrauen',
|
||
cmp_r4_w:'<span class="verdict yes"><span class="vd">✓</span> Ja</span> — externe Firmen & Universitätsforscher prüfen es',
|
||
cmp_r5_h:"Extra-Werkzeuge (2FA-Codes, Teilen, Notfallzugriff)",
|
||
cmp_r5_b:'<span class="verdict no"><span class="vd">✗</span> Wenige</span> — und weniger Transparenz',
|
||
cmp_r5_w:'<span class="verdict yes"><span class="vd">✓</span> Ja</span> — 2FA-Codes, sicheres Teilen, sichere Notizen, Notfallzugriff',
|
||
cmp_r6_h:"Jederzeit wechseln (keine Bindung)",
|
||
cmp_r6_b:'<span class="verdict meh"><span class="vd">⚠</span> Geiselhaft</span> — Daten gehen nur zu ihren Bedingungen',
|
||
cmp_r6_w:'<span class="verdict yes"><span class="vd">✓</span> Jederzeit exportieren</span> — Open Source, nie als Geisel gehalten',
|
||
s3c_k:"Ehre, wem Ehre gebührt", s3c_h:"Der Browser-Manager ist weit besser, als ein Passwort wiederzuverwenden",
|
||
s3c_p:"Wenn der eingebaute Manager von Chrome oder Apple alles ist, was du je benutzt, <b>bist du den meisten Menschen schon voraus.</b> Die ehrliche Zusammenfassung: er ist praktisch und in Ordnung — aber er legt alle Eier in den Korb eines einzigen Unternehmens, behält die Fähigkeit, deine Sachen zu lesen, und ist nicht der eigene, unabhängig geprüfte Tresor, den deine sensibelsten Daten verdienen.",
|
||
s4_h:"Wie es geheim bleibt — Ende-zu-Ende-Verschlüsselung",
|
||
s4_note:'„Sie halten die verschlossene Kiste, bekommen aber nie den Schlüssel."',
|
||
zk1_step:"Schritt 1 — dein Gerät", zk1_h:"Dein Gerät verschließt es",
|
||
zk1_p:"Dein Passwort wird <b>auf deinem Handy oder Laptop</b> verschlüsselt, wobei dein Master-Passwort der Schlüssel ist.",
|
||
zk2_step:"Schritt 2 — auf dem Weg", zk2_h:"Ein verschlüsselter Datenklumpen reist",
|
||
zk2_p:"Was dein Gerät verlässt, ist bereits unlesbar. Der Schlüssel <b>geht nie mit.</b>",
|
||
zk3_step:"Schritt 3 — ihr Server", zk3_h:"Der Server hält nur Kauderwelsch",
|
||
zk3_p:"Bitwarden speichert die verschlossene Kiste, <b>kann sie aber nicht öffnen</b> — selbst wenn sie es wollten oder gehackt würden.",
|
||
zk_cap:"Selbst im schlimmsten Fall — Bitwarden wird gehackt und Kriminelle stehlen alles — bekommen die Diebe einen Tresor voll <b>Kauderwelsch</b>, nicht deine Passwörter. Das ist <b>Zero-Knowledge</b>.",
|
||
s4c1_k:"Die LastPass-Lektion — warum die STÄRKE des Master-Passworts alles ist",
|
||
s4c1_h:"Bei einer Datenpanne ist die Länge deines Master-Passworts das, was dich rettet",
|
||
s4c1_p1:"2022 wurde ein anderer Manager, LastPass, gehackt — Angreifer stahlen Kopien der <b>verschlüsselten Tresore</b> der Nutzer. Leute mit <b>starken</b> Master-Passwörtern waren fein raus; ihre Tresore blieben unlesbares Gewirr. Bei Leuten mit <b>schwachen</b> wurden die Tresore langsam <b>offline</b> geknackt, indem Milliarden Passwörter so schnell wie die Hardware erlaubte durchprobiert wurden.",
|
||
s4c1_p2:"<b>Zwei-Faktor-Authentifizierung hilft hier NICHT</b> — der Angreifer hat bereits die rohe verschlüsselte Datei und berührt nie einen Login-Bildschirm. Die Erkenntnis: mach dein Master-Passwort zu einer <b>langen, zufälligen Passphrase</b>. Diese Länge und Zufälligkeit ist das Einzige, was zwischen dir und der Katastrophe steht.",
|
||
s4c2_k:"Warum gerade Bitwarden", s4c2_h:"Kostenlos, überall, geprüft, keine Bindung",
|
||
s4c2_p:"<b>Kostenlos und wirklich vollständig</b> (unbegrenzt Passwörter + Geräte). <b>Läuft überall</b> — keine Ökosystem-Bindung. <b>Open Source und unabhängig geprüft</b> (auch von Universitäts-Kryptografieforschern). Macht das Extra-Sicherheitszeug (2FA-Codes, Leak-Warnungen, sicheres Teilen, Notfallzugriff). Optionales Premium kostet etwa <b>20 $/Jahr</b>; Familien etwa <b>48 $/Jahr für 6 Personen</b> — aber <b>fang kostenlos an.</b> <em>(Preise Stand 2026 — prüfe die Preisseite unten für die aktuellen.)</em>",
|
||
s4c3_k:"Die eine Regel, die du nicht brechen darfst",
|
||
s4c3_h:"Bitwarden kann dein Master-Passwort nicht wiederherstellen — also schütze es auf Papier",
|
||
s4c3_p:'Weil das Unternehmen deinen Tresor nicht lesen kann, gibt es <b>keine „Passwort vergessen"-E-Mail.</b> Also: wähle eine starke Passphrase — vier oder fünf <b>zufällige</b> Wörter, z. B. <code class="ltr">velvet-trombone-glacier-pickle-lantern</code> (benutze nicht dieses Beispiel oder ein bekanntes — wähle deine <b>eigenen</b> zufälligen Wörter). <b>Schreib sie auf Papier</b> und bewahre sie sicher zu Hause auf, mit einer <b>zweiten Kopie an einem anderen sicheren Ort.</b> Ein Einbrecher zu Hause ist ein weit kleineres Risiko als ein Hacker im Internet.',
|
||
s5_h:"So wechselst du — Schritt für Schritt (~20 Minuten)",
|
||
s5_note:"Mach es einmal, in Ruhe, in einem Rutsch. Für Jahre erledigt.",
|
||
gw_roadmap_aria:"Die 8 Schritte — zu jedem springen",
|
||
gw_rm_1:"Konto", gw_rm_2:"Installieren", gw_rm_3:"Umziehen", gw_rm_4:"Datei vernichten",
|
||
gw_rm_5:"Chrome ausschalten", gw_rm_6:"Erweiterung", gw_rm_7:"Absichern", gw_rm_8:"Aufwerten",
|
||
gw_panel_1:"Schritt 1 von 8", gw_panel_2:"Schritt 2 von 8", gw_panel_3:"Schritt 3 von 8", gw_panel_4:"Schritt 4 von 8",
|
||
gw_panel_5:"Schritt 5 von 8", gw_panel_6:"Schritt 6 von 8", gw_panel_7:"Schritt 7 von 8", gw_panel_8:"Schritt 8 von 8",
|
||
gw_counter:"Schritt {n} von {t}", gw_prev:"ZURÜCK", gw_next:"WEITER",
|
||
gw1_phase:"Registrieren", gw1_time:"~2 Min", gw1_h:"Erstelle dein Bitwarden-Konto",
|
||
gw1_li1:'Geh zu <a href="https://bitwarden.com" target="_blank" rel="noopener noreferrer" class="ltr">bitwarden.com</a> und registriere dich (kostenlos).',
|
||
gw1_li2:"Wähle dein <b>Master-Passwort</b> — eine lange, zufällige Passphrase (siehe die Regel oben).",
|
||
gw1_li3:"<b>Schreib es auf Papier</b> und bewahre es sicher auf (und mach diese zweite Kopie).",
|
||
gw1_li4:"Achtung: in ein paar Schritten schalten wir die Zwei-Faktor-Authentifizierung ein. Plane, das heute zu erledigen.",
|
||
gw1_btn:"bitwarden.com öffnen",
|
||
gw2_phase:"Installieren", gw2_time:"~3 Min", gw2_h:"Installiere Bitwarden dort, wo du es nutzt",
|
||
gw2_li1:"<b>Browser-Erweiterung</b> auf deinem Computer (Chrome, Firefox, Edge, Safari) — das ist die, die Logins automatisch ausfüllt.",
|
||
gw2_li2:"<b>App auf deinem Handy</b> (App Store / Google Play) — damit es dir überallhin folgt.",
|
||
gw2_btn:"Alle Downloads öffnen (Apps & Erweiterungen)",
|
||
gw3_phase:"Umziehen", gw3_time:"~5 Min", gw3_h:"Bring deine vorhandenen Passwörter mit",
|
||
gw3_p1:"Öffne in <b>Chrome</b> die Passwort-Einstellungen, finde <b>Passwörter exportieren</b> und speichere die Datei (Chrome fragt nach deinem Computer-Passwort — das ist normal):",
|
||
gw3_copy_label:"Kopieren · in Chromes Adressleiste einfügen",
|
||
gw3_copied:"KOPIERT ✓",
|
||
gw3_copy_aria:"Kopiere die Chrome-Passwort-Einstellungsadresse und füge sie dann in Chromes Adressleiste ein",
|
||
gw3_note:'(Browser erlauben Webseiten nicht, <code class="ltr">chrome://</code>-Links direkt zu öffnen — also kopiere das und füge es selbst in Chromes Adressleiste ein.)',
|
||
gw3_p2:"Geh in Bitwarden zu <b>Werkzeuge → Daten importieren</b>, wähle die Quelle <b>Chrome / Chromium</b> und lade diese Datei hoch. (Menübezeichnungen ändern sich ab und zu — die offizielle Import-Anleitung hat aktuelle Screenshots.)",
|
||
gw3_btn:"Offizielle Import-Anleitung öffnen",
|
||
gw3_li:"<b>Prüfe, ob der Import geklappt hat, bevor du irgendetwas löschst.</b> Stell sicher, dass deine wichtigsten Logins — E-Mail, Bank, Haupt-Shopping — wirklich da und korrekt sind. Importe können gelegentlich Einträge verlieren oder verstümmeln.",
|
||
gw4_phase:"Kritisch", gw4_time:"~1 Min", gw4_h:"Vernichte die übrig gebliebene Export-Datei",
|
||
gw4_k:"Überspring das nicht", gw4_ch:"Dieser Export ist eine Klartext-Liste jedes Passworts, das du besitzt",
|
||
gw4_p1:"Speichere ihn nur in einem einfachen lokalen Ordner wie deinem <b>Desktop</b> — <b>niemals</b> in einem cloud-synchronisierten Ordner (OneDrive, iCloud, Google Drive, Dropbox) und nie auf einem USB-Stick. Sobald der Import bestätigt ist: <b>lösche ihn und leere deinen Papierkorb.</b>",
|
||
gw4_p2:"Das Leeren des Papierkorbs löscht Daten nicht wirklich — sie können bleiben, bis sie überschrieben werden. Mach also Export → Import → Löschen <b>in einem Rutsch</b>, und es hilft sehr, wenn dein Laufwerk verschlüsselt ist (BitLocker unter Windows, FileVault auf dem Mac — ohnehin wert, das einzuschalten).",
|
||
gw5_phase:"Aufräumen", gw5_time:"~2 Min", gw5_h:"Schalte Chromes Passwort-Speichern AUS",
|
||
gw5_p:"Sonst kämpfen zwei Manager darum, deine Logins auszufüllen.",
|
||
gw5_li1:'Schalte in Chromes Passwort-Einstellungen „Anbieten, Passwörter zu speichern" <b>aus</b>.',
|
||
gw5_li2:"<b>Erst nachdem</b> du Bitwarden eine Woche benutzt hast und vertraust, dass alles da ist — <b>dann</b> lösche die in Chrome gespeicherten Passwörter. Keine Eile; zwei Manager, die eine Woche dieselben Passwörter halten, schaden nichts.",
|
||
gw6_phase:"Die Magie", gw6_time:"täglicher Gebrauch", gw6_h:"Lern deine neue Browser-Erweiterung kennen",
|
||
gw6_p:'Das kleine Schild-Symbol nahe deiner Adressleiste ist der Teil, den du täglich benutzt. Es meldet dich an, bietet an, <b>neue Logins zu speichern</b>, <b>erzeugt starke Passwörter</b> in „Passwort erstellen"-Feldern, kann zur einfachen Erreichbarkeit <b>angeheftet</b> werden und <b>sperrt sich automatisch</b> nach Inaktivität (fragt zum erneuten Öffnen nach deinem Master-Passwort oder Fingerabdruck). Die Handy-App funktioniert genauso. Volle Erklärung in Abschnitt 6 unten.',
|
||
gw7_phase:"Absichern", gw7_time:"~5 Min", gw7_h:"Sichere dein Bitwarden-Konto ab",
|
||
gw7_p:"Dein Tresor ist jetzt das Wertvollste auf deinem Computer. Schalte unter <b>Einstellungen → Sicherheit</b> die <b>Zwei-Faktor-Anmeldung (2FA)</b> ein — ein zweites Schloss, sodass selbst ein gestohlenes Master-Passwort nicht reicht. Wähle deine Methode klug:",
|
||
gw7_m1_r:"✓ BESTE · GRATIS", gw7_m1_t:"<b>Authenticator-App</b> (Aegis oder Bitwardens eigene) — ein 6-stelliger Code auf deinem Handy. <b>Nutze das als Standard.</b>",
|
||
gw7_m2_r:"✓ STÄRKSTE", gw7_m2_t:"<b>Hardware-Sicherheitsschlüssel</b> (wie ein YubiKey, kostenpflichtiger Plan) — die einzig wirklich phishing-sichere Art.",
|
||
gw7_m3_r:"⚠ MEIDEN", gw7_m3_t:"<b>SMS-Codes</b> — sie können gekapert werden.",
|
||
gw7_m4_r:"⚠ NICHT", gw7_m4_t:"<b>E-Mail-Codes für Bitwarden</b> — wenn dein E-Mail-Passwort <i>in</i> Bitwarden liegt, entsteht eine zirkuläre Aussperrung.",
|
||
gw7_li1:"<b>Speichere deinen 2FA-Wiederherstellungscode — und bewahre ihn GETRENNT von deinem Master-Passwort auf.</b> Wenn beide auf demselben Zettel in derselben Schublade liegen, hat dein zweites Schloss nichts geschützt.",
|
||
gw7_li2:"Setze ein sinnvolles <b>Auto-Sperr-Zeitlimit</b>, <b>verwende</b> das Master-Passwort <b>nirgends wieder</b>, und sei <b>misstrauisch bei Master-Passwort-Abfragen</b> (nur die offizielle App, die Erweiterung oder das echte bitwarden.com sollten fragen).",
|
||
gw7_li3:"Behalte optional einen <b>verschlüsselten / passwortgeschützten</b> Export als Sicherheitsnetz — niemals die einfache CSV aus Schritt 3.",
|
||
gw8_phase:"Aufwerten", gw8_time:"mit der Zeit", gw8_h:"Leb eine Woche damit, dann werte es auf",
|
||
gw8_p:"Benutze es normal; lass es automatisch ausfüllen. Dann mach die <b>wertvollste Angewohnheit von allen:</b>",
|
||
gw8_k:"Die Angewohnheit", gw8_ch:"Ersetze alte Passwörter durch erzeugte — E-Mail zuerst",
|
||
gw8_cp:"Immer wenn du dich bei einem wichtigen Konto anmeldest, ändere das Passwort in ein neues zufälliges, das Bitwarden erzeugt. Mach deine <b>wichtigsten Konten zuerst — E-Mail vor allem</b>, denn deine E-Mail kann jedes andere Passwort zurücksetzen, das du besitzt. Erledige die Top 5 diese Woche; der Rest passiert mit der Zeit von selbst.",
|
||
s6_h:"Wie die Browser-Erweiterung funktioniert", s6_note:"Das kleine Schild, das du täglich antippst.",
|
||
ch1_h:"Automatisch ausfüllen", ch1_p:"Ein Symbol erscheint in den Login-Feldern. Klick, wähle dein Konto, beide Felder füllen sich sofort.",
|
||
ch2_h:"Speichern-Abfrage", ch2_p:'Registriere dich irgendwo neu und es taucht auf „Diesen Login speichern?" — klick Speichern, und er ist für immer in deinem Tresor.',
|
||
ch3_h:"Erzeugen", ch3_p:'In jedem „Passwort erstellen"-Feld: klick auf das Symbol → Erzeugen. Ein langes zufälliges, ausgefüllt und gespeichert mit einem Klick.',
|
||
ch4_h:"Anheften", ch4_p:'Klick auf das Puzzleteil-Symbol deines Browsers und „pinne" Bitwarden, damit das Schild immer sichtbar ist.',
|
||
ch5_h:"Auto-Sperre", ch5_p:"Sperrt sich nach Inaktivität selbst. Zum erneuten Öffnen braucht es dein Master-Passwort (oder Fingerabdruck/Gesicht).",
|
||
s7_h:"Ein kurzes Wort zu Passkeys", s7_note:"Die Zukunft kommt an — schrittweise.",
|
||
s7c_k:"Die Zukunft", s7c_h:"Passkeys: anmelden, ohne dass es ein Passwort zu stehlen oder phishen gibt",
|
||
s7c_p1:'Du wirst immer öfter „Passkeys" oder „ohne Passwort anmelden" sehen. Dein Handy oder Laptop beweist mit Fingerabdruck oder Gesicht, dass du es bist — <b>es gibt überhaupt kein Passwort zu stehlen oder zu phishen</b>, und Konten, die sie nutzen, sind dramatisch schwerer zu knacken.',
|
||
s7c_p2:"Warum machst du dann das alles trotzdem? Passkeys werden <b>schrittweise eingeführt</b> — heute unterstützen nur manche Seiten sie, und die meisten nutzen weiter Passwörter (und werden das noch jahrelang). Du brauchst ein gutes System für <b>beide</b>. Gute Nachricht: <b>Bitwarden speichert und synchronisiert auch deine Passkeys</b>, über all deine Geräte — du bist also nicht an eine Handymarke gebunden. Sag Ja, wenn eine Seite einen anbietet; Manager und Passkeys sind keine Rivalen.",
|
||
s8_h:"Häufige Bedenken — die FAQ für Skeptiker", s8_note:"Tippe auf eine Frage, um sie zu öffnen.",
|
||
faq1_q:"Ist Bitwarden jetzt nicht ein einziger Schwachpunkt?",
|
||
faq1_a:'Ja — und das ist der <b>Punkt</b>. Die Wahl ist nicht „eine Tür vs. keine Tür". Sie ist „<b>eine extrem gut verteidigte Tür, die du kontrollierst</b>, vs. 200 wackelige Türen, verstreut über Unternehmen, von denen du nie gehört hast." Ein starkes Master-Passwort + Zwei-Faktor schlägt wiederverwendete Passwörter jedes Mal. Du konzentrierst das Risiko an den einen Ort, den du wirklich stark machen kannst.',
|
||
faq2_q:"Was, wenn das Unternehmen Bitwarden pleitegeht?",
|
||
faq2_a:"Du sitzt nicht in der Falle. Du kannst <b>deinen ganzen Tresor jederzeit exportieren</b>, und weil Bitwarden <b>Open Source</b> ist, funktionieren die Apps weiter und die Community kann sie am Leben halten. Schlimmstenfalls importierst du deinen Export in zehn Minuten in einen anderen Manager. Vergleiche das mit einem geschlossenen System, bei dem deine Daten nur zu den Bedingungen des Unternehmens gehen, nicht zu deinen.",
|
||
faq3_q:"Warum nicht einfach den eingebauten von Apple/Google plus Passkeys nutzen?",
|
||
faq3_a:"Wenn du <b>ausschließlich</b> in einem Ökosystem lebst und nur die Geräte und den Browser dieser Marke nutzt, ist es ein vertretbarer Mittelweg — besser als Wiederverwendung. Aber du verlierst plattformübergreifende Freiheit, unabhängige Prüfbarkeit und eine echte Zero-Knowledge-Garantie, und du bindest deinen ganzen Tresor an dieses eine Konto. <b>Bitwarden gibt dir all das und speichert trotzdem deine Passkeys.</b> Du musst dich nicht entscheiden.",
|
||
faq4_q:"Was passiert, wenn ich mein Handy (meinen Authenticator) verliere?",
|
||
faq4_a1:"Keine Panik — genau dafür ist der Wiederherstellungscode da. Die Reihenfolge ist:",
|
||
faq4_li1:"Geh von einem beliebigen Computer zu bitwarden.com und melde dich mit deinem <b>Master-Passwort</b> an.",
|
||
faq4_li2:'Wenn nach dem Zwei-Faktor-Code gefragt wird, den du nicht erzeugen kannst, wähle <b>„Wiederherstellungscode verwenden"</b> und gib den Code ein, den du auf Papier geschrieben hast.',
|
||
faq4_li3:"Du bist drin. Geh zu <b>Einstellungen → Sicherheit</b>, entferne den alten Authenticator und richte die Zwei-Faktor-Anmeldung auf deinem neuen Handy ein.",
|
||
faq4_btn:"bitwarden.com öffnen",
|
||
faq4_a2:"Deshalb ist der Wiederherstellungscode auf Papier (<b>getrennt</b> vom Master-Passwort aufbewahrt) nicht verhandelbar.",
|
||
s10_h:"Das Ganze, in einem Atemzug", s10_note:"Wenn du dir sonst nichts merkst, merk dir das.",
|
||
breath_k:"Die Kernaussagen",
|
||
breath_1:"Passwörter wiederzuverwenden ist der häufigste Weg, wie ganz normale Menschen gehackt werden — weil <b>Unternehmen gehackt werden</b>, nicht du persönlich.",
|
||
breath_2:"Ein Passwort-Manager gibt jedem Konto sein <b>eigenes starkes Passwort</b>, hinter einem Master-Passwort, das du dir merkst.",
|
||
breath_3:"Browser-Eingebaute (Chrome, Apple) sind <b>okay</b>, binden aber alles an ein Konto und behalten die Schlüssel zu deinen Daten.",
|
||
breath_4:"<b>Bitwarden</b> ist kostenlos, läuft überall und ist so gebaut, dass <b>niemand außer dir</b> deine Passwörter lesen kann.",
|
||
breath_5:"Mach das Master-Passwort zu einer <b>langen, zufälligen Passphrase</b>, schreib es auf Papier (zwei Kopien), schalte App-basierte 2FA ein, bewahre den Wiederherstellungscode <b>getrennt</b> auf, ändere wichtige Passwörter zuerst.",
|
||
breath_6:"Ein Manager kann ein <b>bereits infiziertes Gerät</b> nicht retten — halte deinen Computer und dein Handy sauber und aktuell.",
|
||
breath_7:"Passkeys sind ein toller Bonus, und <b>Bitwarden kann auch damit umgehen</b>.",
|
||
breath_8:"Selbst-Hosting (Vaultwarden) ist ein cooles <b>späteres</b> Projekt für Bastler — kein Ausgangspunkt.",
|
||
breath_closer:'Du musst kein Sicherheitsexperte werden. Du musst nur deine Schlüssel in einen richtigen Tresor bringen. <em>Zwanzig Minuten heute kaufen dir Jahre von „Darüber muss ich mir keine Sorgen mehr machen."</em>',
|
||
res1_d:"bitwarden.com — kostenlos registrieren",
|
||
res2_t:"Preise", res2_d:"Aktuelle Tarife & Preise",
|
||
res3_t:"Import-Anleitung", res3_d:"Passwörter aus Chrome übernehmen",
|
||
res4_d:"Prüfen, ob du bereits geleakt wurdest",
|
||
res5_d:"Erfahre mehr über die passwortlose Zukunft",
|
||
res6_d:"Selbst-Hosting (fortgeschritten)",
|
||
apx_tag:"Bonus · für Neugierige",
|
||
apx_sub:"Du kannst bei der Zusammenfassung oben aufhören zu lesen — der Leitfaden ist vollständig. <b>Dieser Anhang ist optional</b> und sagt dir nur, dass es eine fortgeschrittenere Möglichkeit gibt.",
|
||
s9_h:"Anhang: Selbst-Hosting mit Vaultwarden",
|
||
s9_note:'Ein „vielleicht später"-Projekt für Bastler — <b>nicht</b> Teil des normalen Umstiegs.',
|
||
adv_flag:"⚠ Fortgeschritten / völlig optional", adv_h:"Die meisten sollten das komplett überspringen",
|
||
adv_skip:'Es ist NICHT erforderlich — <span class="danger-text">es falsch zu machen ist schlimmer, als es gar nicht zu machen.</span>',
|
||
adv_p1:'Normalerweise liegt dein verschlüsselter Tresor auf Bitwardens Servern. Manche fortgeschrittenen Nutzer ziehen es vor, den Server <b>selbst</b> zu betreiben, auf einem kleinen Computer zu Hause, mit <a href="https://github.com/dani-garcia/vaultwarden" target="_blank" rel="noopener noreferrer">Vaultwarden</a> — einem leichtgewichtigen, von der Community gebauten Server, der mit allen normalen Bitwarden-Apps funktioniert.',
|
||
adv_btn:"Vaultwarden auf GitHub öffnen",
|
||
adv_p2:"<b>Wichtige Klarstellung:</b> Selbst-Hosting ändert das Verschlüsselungsmodell <b>nicht</b>. Dein Tresor wird so oder so auf <b>deinem</b> Gerät verschlüsselt — Bitwardens Cloud kann ihn nicht lesen, und dein eigener Server kann ihn auch nicht lesen. Was sich ändert, ist <b>wer den Server betreibt, von dem du abhängst</b> — das bringt neue Verantwortung, keine neue Verschlüsselungsmagie.",
|
||
adv_why_h:"Warum jemand es wollen könnte",
|
||
adv_why_1:"<b>Volle Eigentümerschaft</b> — deine Daten liegen auf Hardware, die du kontrollierst.",
|
||
adv_why_2:"Keine Abhängigkeit von Entscheidungen oder Ausfällen eines Unternehmens.",
|
||
adv_why_3:"Kostenlos und sehr ressourcenschonend.",
|
||
adv_cost_h:"Warum es kein Einsteiger-Schritt ist",
|
||
adv_cost_1:"<b>Du wirst zur IT-Abteilung</b> — Updates, Backups, Verfügbarkeit sind jetzt für immer dein Job.",
|
||
adv_cost_2:"<b>Auch Backups müssen geschützt werden</b> — Admin-Token, Konfiguration und TLS-Schlüssel sind sensibel; teste, dass Wiederherstellungen wirklich funktionieren.",
|
||
adv_cost_3:"<b>Keine formalen Sicherheitsaudits</b> wie beim offiziellen Bitwarden, das professionell betrieben und rund um die Uhr überwacht wird.",
|
||
adv_cost_4:"<b>Internet-Exposition vergrößert die Angriffsfläche</b> — ein kompromittierter Server kann deinen Tresor nicht entschlüsseln, könnte aber eine präparierte Login-Seite ausliefern, die dein Master-Passwort abfängt.",
|
||
adv_cost_5:"<b>Ein Fehler sperrt DICH aus</b> — und es gibt kein Support-Team, das du anrufen kannst.",
|
||
adv_sane:"<b>Der vernünftige Weg:</b> fang heute mit dem normalen Bitwarden (der Cloud-Version) an — es ist bereits Zero-Knowledge. Wenn du dich Monate später wohlfühlst und gern an Heim-Servern bastelst, <b>dann</b> erkunde Vaultwarden als Projekt. Es gibt keine Eile, und du verlierst nichts durch Warten.",
|
||
foot_note:'Ein verständlicher Begleiter zum vollständigen Tutorial — <span class="prims">warum es zählt · was ein Manager ist · Chrome vs. Bitwarden · Zero-Knowledge · der Umstieg · Passkeys · Selbst-Hosting</span>.<br><br><b>Du musst nicht den ganzen Tag an Hacker denken.</b> Bring deine Schlüssel einmal in Ruhe in einen richtigen Tresor und sei für Jahre versorgt.',
|
||
foot_title:"Deine Passwörter sind die Schlüssel zu deinem ganzen Leben",
|
||
foot_tag:"Ein Leitfaden für ganz normale Menschen"
|
||
},
|
||
fa: {
|
||
page_title:"رمزهای عبور شما کلید کل زندگیتان هستند",
|
||
skip:"رفتن به محتوا",
|
||
themebar_aria:"تم و زبان",
|
||
lang_group_aria:"زبان", lang_label:"زبان", lang_select_aria:"انتخاب زبان",
|
||
theme_group_aria:"تم رنگی", theme_label:"تم",
|
||
theme_light:"روشن", theme_dark:"تیره",
|
||
theme_light_aria:"تم روشن", theme_dark_aria:"تم تیره",
|
||
coach_kicker:"زبانها",
|
||
coach_text:'این را به <b>فارسی</b>، <b>English</b> یا <b>Deutsch</b> بخوانید — از بالا پرچم را انتخاب کنید <span class="arrowhint">↑</span>',
|
||
coach_close_aria:"بستن",
|
||
top_1:"<strong>امنیت رمز عبور</strong>",
|
||
top_2:"یک راهنمای ساده برای آدمهای معمولی",
|
||
top_3:"رفتن به Bitwarden، به زبان خودمانی",
|
||
h1:'رمزهای عبور شما کلید <span class="accent">کل زندگیتان</span> هستند',
|
||
sub:"یک راهنمای ساده برای کسانی که نمیخواهند (و نباید مجبور باشند) تمام روز به فکر هکرها باشند",
|
||
lede:"محال است بتوانید برای هر حساب یک رمز خوب و یکتا توی ذهنتان نگه دارید. <b>هیچکس نمیتواند — کاملاً طبیعی است.</b> برای همین این کار را میسپارید به یک گاوصندوق دیجیتالِ محکم. این راهنما با خیال راحت و فقط یک بار، شما را از «همهجا یک رمز را تکرار میکنم» میرساند به <b>«دیگر لازم نیست نگرانش باشم.»</b>",
|
||
tldr_kicker:"خلاصهٔ ۳۰ ثانیهای",
|
||
tldr_1:"شما <b>نمیتوانید</b> برای هر حساب یک رمز قوی و یکتا حفظ کنید. هیچکس نمیتواند.",
|
||
tldr_2:"برای همین از یک <b>برنامهٔ مدیریت رمز عبور</b> استفاده میکنید — یک گاوصندوق دیجیتالِ محکم که همهٔ رمزها را بهجای شما یادش میماند.",
|
||
tldr_3:"مرورگرتان (Chrome / Apple) یکی از اینها را داخل خودش دارد. <b>از هیچی بهتر است</b>، ولی کل زندگیتان را به یک حساب گره میزند.",
|
||
tldr_4:"حرکت درست: بروید سراغ <b>Bitwarden</b>. رایگان است، روی همهچیز کار میکند و طوری ساخته شده که <b>حتی خودِ شرکت هم نمیتواند رمزهایتان را ببیند</b>.",
|
||
tldr_5:"(برای کسانی که اهل ور رفتن با تکنولوژیاند: میتوانید نسخهٔ خودتان را روی سرور خودتان بالا بیاورید، <b>Vaultwarden</b>. اختیاری است و مالِ آخرِ کار — فعلاً بیخیالش.)",
|
||
tldr_punch:"اگر بعد از خواندن این فقط یک کار بکنید: <b>Bitwarden را نصب کنید و یک رمز اصلیِ قوی بگذارید.</b> بقیهاش جزئیات است.",
|
||
compass_aria:"رفتن به یک بخش",
|
||
compass_1:"چرا مهم است", compass_2:"اصلاً چیست", compass_3:"Chrome یا Bitwarden",
|
||
compass_4:"چرا کسی نمیتواند بخواند", compass_5:"چطور جابهجا شوید", compass_6:"افزونه",
|
||
compass_7:"Passkey", compass_8:"نگرانیها", compass_9:"جمعبندی", compass_10:"جایزه: سرور خودت",
|
||
s1_h:"چرا این موضوع مهم است", s1_note:"داستانی که بدون اینکه بفهمید تجربهاش کردهاید.",
|
||
s1_lab:"ماجرای کلیدها",
|
||
s1_quote:"تصور کنید برای خانه، ماشین، محل کار، صندوق امانات بانک و صندوق پستیتان <em>یک کلید مشترک</em> دارید — و بعد به هر مغازهای که ازتان بخواهد یک کپیاش را میدهید.",
|
||
s1_body:"استفاده از <b>یک رمز در همهجا</b> دقیقاً همین است. خطر این نیست که «نکند یک هکر <b>منِ بدبخت</b> را هدف بگیرد؟»؛ خطر این است که «<b>نکند یکی از همان دهها شرکتی که بهشان اعتماد کردهام هک شود؟</b>» همین که یکیشان هک شود، مجرمها ایمیل و رمز شما را برمیدارند و خودکار <b>همان را روی بانک، Amazon و PayPal شما هم امتحان میکنند</b> — به این کار میگویند credential stuffing: نرمافزار همان رمزهای دزدیدهشده را در ابعاد میلیونی روی سایتهای دیگر امتحان میکند، آن هم وقتی خودِ مهاجم خوابیده. شما فقط یک ردیف از یک فهرستِ میلیونی هستید.",
|
||
g1_a:"بیشترِ", g1_b:"هکها", g1_lab:"راه نفوذ شمارهٔ ۱", g1_h:"رمزهای دزدیدهشده و ضعیف",
|
||
g1_p:"سال به سال، بخش بزرگی از هکها به خاطر رمزهای دزدیدهشده یا ضعیف اتفاق میافتد.",
|
||
g1_src:"منبع: Verizon DBIR",
|
||
g2_a:"بیشترِ", g2_b:"مردم", g2_lab:"عادتِ بد", g2_h:"یک رمز را همهجا تکرار میکنند",
|
||
g2_p:"نظرسنجیها مدام نشان میدهند که بیشتر مردم یک رمز را روی چند حساب تکرار میکنند.",
|
||
g2_src:"منبع: نظرسنجیهای صنعتی",
|
||
g3_a:"میلیاردها", g3_lab:"همین الان بیرون است", g3_h:"رمزِ دزدیدهشده در گردش",
|
||
g3_p:"همین حالا میلیاردها رمزِ دزدیدهشده توی انجمنهای مجرمها و فایلهایی که بدافزارها لو میدهند دستبهدست میشود.",
|
||
g3_src:"منبع: دادههای لورفته",
|
||
s1_fixk:"راهحل ساده است، ولی عجیب کارآمد",
|
||
s1_fixp:"هر حساب <b>رمز یکتا و بلندِ خودش</b> را میگیرد. آنوقت اگر آن مغازهٔ جورابفروشی هک شد، ماجرا <b>همانجا تمام میشود</b> — به جای دیگری سرایت نمیکند. فقط مشکل اینجاست که نمیشود ۲۰۰ تا رمز را حفظ کرد، برای همین کار را میسپاریم به یک برنامه.",
|
||
s2_h:"اصلاً برنامهٔ مدیریت رمز عبور چیست", s2_note:"بدون اصطلاح فنی — یک گاوصندوق دیجیتالِ خیلی امن.",
|
||
s2_intro:"این یک <b>گاوصندوق دیجیتالِ خیلی امن</b> است. همهٔ رمزهایتان داخلش هستند. آن را با <b>یک رمز اصلی</b> قفل میکنید — تنها رمزی که قرار است همیشه یادتان بماند. از حالتِ «باید همهچیز را حفظ کنم» میرسید به «فقط باید <b>یک چیز</b> را یادم باشد».",
|
||
w1_h:"خودش واردتان میکند",
|
||
w1_p:"به یک سایت میروید، میشناسدش و <b>خودش نام کاربری و رمز را پر میکند</b>. بدون تایپ.",
|
||
w2_h:"رمز قوی میسازد",
|
||
w2_p:'حساب جدید؟ خودش یک رمزِ تصادفیِ بلند مثل <code class="ltr">K7$mq2#vLp9!xQ</code> میسازد، ذخیرهاش میکند و <b>دیگر اصلاً لازم نیست ببینیدش</b>.',
|
||
w3_h:"همهجا همراهتان است",
|
||
w3_p:"گوشی نو، لپتاپ نو؟ <b>یک بار وارد میشوید و همهٔ رمزهایتان همانجاست.</b>",
|
||
b1_h:"جلوی سایتهای جعلی را میگیرد",
|
||
b1_p:'بر اساس آدرسِ <b>واقعی</b> سایت پر میکند. اگر یک کلاهبرداری شما را بفرستد به <code class="ltr">paypa1-secure.com</code>، اصلاً چیزی پر نمیکند — همین که ساکت میماند، خودش یک هشدار است.',
|
||
b2_h:"بهتان میگوید کِی لو رفتهاید",
|
||
b2_p:"برنامههای خوب، رمزهای ذخیرهشدهتان را با لیستِ رمزهای لورفتهٔ شناختهشده میسنجند و میگویند <b>«این یکی را عوض کن.»</b>",
|
||
s2c1_k:"یک عادتِ مهم", s2c1_h:"اگر خودش پیشنهاد پر کردن نداد — دست نگه دارید",
|
||
s2c1_p:"اگر برنامه جایی که همیشه رمز را پر میکرد این بار پیشنهادِ پر کردن <b>نداد</b>، رمز را دستی بیرون نکشید و نچسبانید. <b>اول آدرس سایت را نگاه کنید.</b> همین که دستی کپی-پیست کنید و دورش بزنید، کل آن محافظت از بین میرود.",
|
||
s2c2_k:"یک محدودیتِ صادقانه — حتماً بخوانید", s2c2_h:"این برنامه نمیتواند دستگاهی را که از قبل آلوده شده نجات دهد",
|
||
s2c2_p:"این برنامه جلوی دو خطر بزرگ را میگیرد — <b>هک شدنِ شرکتها</b> و <b>تکرار رمز</b>. ولی اگر دستگاهتان از قبل بدافزار داشته باشد (کیلاگر یا برنامهٔ دزدِ اطلاعات)، همان لحظه که رمز اصلی را تایپ میکنید میتواند آن را ضبط کند. پس <b>سیستمعامل و مرورگرتان را بهروز نگه دارید و دنبال نرمافزار کرکشده و مشکوک نروید.</b> یک قفلِ عالی روی یک درِ پوسیده فایدهای ندارد.",
|
||
s3_h:"«ولی Chrome که خودش رمزهایم را ذخیره میکند» — مگر فرقی دارد؟",
|
||
s3_note:"از تکرارِ رمز بهتر است. ولی یک جعبهٔ دربسته است که کلیدش دست شما نیست.",
|
||
cmp_cap:"رمزِ ذخیرهشده در مرورگر (Chrome / Apple) مقابلِ Bitwarden — فرقشان واقعاً چیست",
|
||
cmp_th_feat:"ویژگی", cmp_th_browser:"داخلِ مرورگر (Chrome / Apple)",
|
||
cmp_dh_browser:"مرورگر", cmp_dh_bw:"Bitwarden",
|
||
cmp_r1_h:"رمز اصلیِ جداگانه",
|
||
cmp_r1_b:'<span class="verdict no"><span class="vd">✗</span> بهطور پیشفرض نه</span> — با همان حساب Google / Apple باز میشود',
|
||
cmp_r1_w:'<span class="verdict yes"><span class="vd">✓</span> بله</span> — یک رمز اصلیِ مخصوصِ خودش',
|
||
cmp_r2_h:"حتی شرکت هم نتواند بخواند",
|
||
cmp_r2_b:'<span class="verdict no"><span class="vd">✗</span> نه</span> — کلیدها دست Google است؛ یک گزینهٔ اختیاری روی خودِ دستگاه هست ولی پیشفرض خاموش است',
|
||
cmp_r2_w:'<span class="verdict yes"><span class="vd">✓</span> بله، از پایه</span> — قبل از اینکه از دستگاهتان بیرون برود، همانجا قفل میشود',
|
||
cmp_r3_h:"روی همهٔ دستگاهها کار کند",
|
||
cmp_r3_b:'<span class="verdict meh"><span class="vd">⚠</span> دردسر دارد</span> — فقط داخلِ دنیای یک شرکت راحت است؛ تا قاطیاش کنید سخت میشود',
|
||
cmp_r3_w:'<span class="verdict yes"><span class="vd">✓</span> همهجا</span> — iPhone، Android، Windows، Mac، Linux، هر مرورگری',
|
||
cmp_r4_h:"متنباز و بازرسیشده توسط دیگران",
|
||
cmp_r4_b:'<span class="verdict no"><span class="vd">✗</span> جعبهٔ دربسته</span> — باید همینطوری بهش اعتماد کنید',
|
||
cmp_r4_w:'<span class="verdict yes"><span class="vd">✓</span> بله</span> — شرکتهای بیرونی و پژوهشگرهای دانشگاهی بررسیاش میکنند',
|
||
cmp_r5_h:"امکاناتِ اضافه (کد دومرحلهای، اشتراکگذاری، دسترسی اضطراری)",
|
||
cmp_r5_b:'<span class="verdict no"><span class="vd">✗</span> کم</span> — و شفافیتِ کمتر',
|
||
cmp_r5_w:'<span class="verdict yes"><span class="vd">✓</span> بله</span> — کد دومرحلهای، اشتراکِ امن، یادداشتِ امن، دسترسی اضطراری',
|
||
cmp_r6_h:"هر وقت خواستی بروی (گیر نمیافتی)",
|
||
cmp_r6_b:'<span class="verdict meh"><span class="vd">⚠</span> یکجورهایی گروگانی</span> — دادهها فقط با شرایطِ آنها بیرون میآید',
|
||
cmp_r6_w:'<span class="verdict yes"><span class="vd">✓</span> هر وقت خواستی خروجی بگیر</span> — متنباز است، هیچوقت گروگان نمیماند',
|
||
s3c_k:"انصافاً", s3c_h:"همان رمزدانِ مرورگر هم خیلی بهتر از تکرارِ یک رمز است",
|
||
s3c_p:"اگر تنها چیزی که تا حالا استفاده کردهاید رمزدانِ داخلیِ Chrome یا Apple بوده، <b>از خیلیها جلوترید.</b> راستش را بخواهید: راحت و قابلقبول است — ولی همهٔ تخممرغها را توی سبدِ یک شرکت میگذارد، توانایی خواندنِ اطلاعاتتان را برای خودش نگه میدارد، و آن گاوصندوقِ اختصاصی و مستقلبررسیشدهای نیست که حساسترین دادههایتان لیاقتش را دارند.",
|
||
s4_h:"چرا هیچکس نمیتواند بخواندش — رمزنگاری سرتاسری",
|
||
s4_note:"«جعبهٔ قفلشده دستشان است، ولی کلیدش هیچوقت دستشان نمیرسد.»",
|
||
zk1_step:"مرحلهٔ ۱ — دستگاه شما", zk1_h:"دستگاهتان قفلش میکند",
|
||
zk1_p:"رمزتان <b>روی همان گوشی یا لپتاپ خودتان</b> بههمریخته و رمزنگاری میشود، و کلیدِ این قفل، رمز اصلیِ شماست.",
|
||
zk2_step:"مرحلهٔ ۲ — سرِ راه", zk2_h:"فقط یک مشت دادهٔ نامفهوم جابهجا میشود",
|
||
zk2_p:"چیزی که از دستگاهتان بیرون میرود از همان اول ناخواناست. کلید <b>هیچوقت همراهش نمیرود.</b>",
|
||
zk3_step:"مرحلهٔ ۳ — سرورِ آنها", zk3_h:"روی سرور فقط یک چیزِ نامفهوم میماند",
|
||
zk3_p:"Bitwarden جعبهٔ قفلشده را نگه میدارد ولی <b>نمیتواند بازش کند</b> — حتی اگر بخواهد، یا حتی اگر هکش کنند.",
|
||
zk_cap:"حتی در بدترین حالت — Bitwarden هک شود و مجرمها همهچیز را بدزدند — دستِ دزدها یک گاوصندوقِ پر از <b>دادهٔ نامفهوم</b> میافتد، نه رمزهای شما. به این میگویند رمزنگاریِ <b>بدوناطلاع</b> (zero-knowledge): یعنی خودِ شرکت هم از محتوای شما بیخبر است.",
|
||
s4c1_k:"درسی که LastPass داد — چرا «قوی بودنِ» رمز اصلی همهچیز است",
|
||
s4c1_h:"موقع هک، چیزی که نجاتتان میدهد بلند بودنِ رمز اصلیِ شماست",
|
||
s4c1_p1:"سال ۲۰۲۲ یک برنامهٔ دیگر به اسم LastPass هک شد — مهاجمها یک کپی از <b>گاوصندوقهای رمزنگاریشدهٔ</b> کاربرها را دزدیدند. کسانی که رمز اصلیِ <b>قوی</b> داشتند جان سالم به در بردند؛ گاوصندوقشان همان دادهٔ نامفهوم باقی ماند. ولی کسانی که رمزِ <b>ضعیف</b> داشتند، گاوصندوقشان کمکم و <b>بهصورت آفلاین</b> باز شد — مهاجم با همان سرعتی که سختافزارش اجازه میداد میلیاردها رمز را حدس زد.",
|
||
s4c1_p2:"<b>ورود دومرحلهای اینجا اصلاً به دردتان نمیخورد</b> — چون مهاجم خودِ فایلِ رمزنگاریشده را دارد و کاری به صفحهٔ ورود ندارد. نتیجه: رمز اصلیتان را یک <b>عبارتعبورِ بلند و تصادفی</b> بگذارید. همین بلند و تصادفی بودن، تنها چیزی است که بین شما و فاجعه ایستاده.",
|
||
s4c2_k:"چرا دقیقاً Bitwarden", s4c2_h:"رایگان، همهجا، بررسیشده، بدونِ گیر افتادن",
|
||
s4c2_p:"<b>رایگان و واقعاً کامل</b> (رمز و دستگاهِ بینهایت). <b>همهجا کار میکند</b> — به یک شرکت گیر نمیافتید. <b>متنباز و مستقلبررسیشده</b> (حتی پژوهشگرهای رمزنگاریِ دانشگاهی بررسیاش کردهاند). کارهای امنیتیِ اضافه را هم انجام میدهد (کد دومرحلهای، هشدارِ لو رفتن، اشتراکِ امن، دسترسی اضطراری). نسخهٔ Premium اختیاری حدود <b>۲۰ دلار در سال</b> است؛ خانوادگی حدود <b>۴۸ دلار در سال برای ۶ نفر</b> — ولی <b>اول رایگان شروع کنید.</b> <em>(قیمتها مالِ ۲۰۲۶ است — برای جدیدترینش صفحهٔ قیمتها را پایین ببینید.)</em>",
|
||
s4c3_k:"تنها قانونی که نباید زیرش بزنید",
|
||
s4c3_h:"Bitwarden نمیتواند رمز اصلیتان را برگرداند — پس روی کاغذ ازش محافظت کنید",
|
||
s4c3_p:'چون شرکت نمیتواند گاوصندوقتان را بخواند، <b>هیچ ایمیلِ «رمز را فراموش کردم» در کار نیست.</b> پس: یک عبارتعبورِ قوی انتخاب کنید — چهار-پنج کلمهٔ <b>تصادفی</b>، مثلاً <code class="ltr">velvet-trombone-glacier-pickle-lantern</code> (همین مثال یا هر نمونهٔ معروفی را استفاده نکنید — کلمههای تصادفیِ <b>خودتان</b> را بسازید). <b>روی کاغذ بنویسیدش</b> و توی خانه جای امن بگذارید، با یک <b>کپی دوم در یک جای امنِ دیگر.</b> یک دزدِ خانگی خیلی کمخطرتر از یک هکر روی اینترنت است.',
|
||
s5_h:"چطور جابهجا شوید — قدمبهقدم (حدود ۲۰ دقیقه)",
|
||
s5_note:"یک بار، با حوصله، توی یک نشست انجامش بدهید. خیالتان برای سالها راحت میشود.",
|
||
gw_roadmap_aria:"۸ قدم — به هرکدام بپرید",
|
||
gw_rm_1:"حساب", gw_rm_2:"نصب", gw_rm_3:"انتقال", gw_rm_4:"نابودیِ فایل",
|
||
gw_rm_5:"خاموشکردن Chrome", gw_rm_6:"افزونه", gw_rm_7:"قفلکردن", gw_rm_8:"حرفهایتر",
|
||
gw_panel_1:"قدم ۱ از ۸", gw_panel_2:"قدم ۲ از ۸", gw_panel_3:"قدم ۳ از ۸", gw_panel_4:"قدم ۴ از ۸",
|
||
gw_panel_5:"قدم ۵ از ۸", gw_panel_6:"قدم ۶ از ۸", gw_panel_7:"قدم ۷ از ۸", gw_panel_8:"قدم ۸ از ۸",
|
||
gw_counter:"قدم {n} از {t}", gw_prev:"قبلی", gw_next:"بعدی",
|
||
gw1_phase:"ثبتنام", gw1_time:"~۲ دقیقه", gw1_h:"حساب Bitwarden بسازید",
|
||
gw1_li1:'به <a href="https://bitwarden.com" target="_blank" rel="noopener noreferrer" class="ltr">bitwarden.com</a> بروید و ثبتنام کنید (رایگان).',
|
||
gw1_li2:"<b>رمز اصلی</b> خود را انتخاب کنید — یک عبارتعبورِ بلند و تصادفی (همان قانونِ بالا).",
|
||
gw1_li3:"<b>روی کاغذ بنویسیدش</b> و جای امن بگذارید (و آن کپی دوم را هم بسازید).",
|
||
gw1_li4:"حواستان باشد: چند قدم جلوتر ورود دومرحلهای را روشن میکنیم. بگذاریدش برای همین امروز.",
|
||
gw1_btn:"باز کردن bitwarden.com",
|
||
gw2_phase:"نصب", gw2_time:"~۳ دقیقه", gw2_h:"Bitwarden را هرجا که ازش استفاده میکنید نصب کنید",
|
||
gw2_li1:"<b>افزونهٔ مرورگر</b> روی کامپیوتر (Chrome، Firefox، Edge، Safari) — همین است که نام کاربری و رمز را خودکار پر میکند.",
|
||
gw2_li2:"<b>اپ روی گوشی</b> (App Store / Google Play) — تا همهجا همراهتان باشد.",
|
||
gw2_btn:"باز کردن همهٔ دانلودها (اپها و افزونهها)",
|
||
gw3_phase:"انتقال", gw3_time:"~۵ دقیقه", gw3_h:"رمزهای فعلیتان را منتقل کنید",
|
||
gw3_p1:"توی <b>Chrome</b>، تنظیماتِ رمز عبور را باز کنید، گزینهٔ <b>خروجی گرفتن از رمزها (Export passwords)</b> را پیدا کنید و فایل را ذخیره کنید (Chrome رمزِ کامپیوترتان را میپرسد — طبیعی است):",
|
||
gw3_copy_label:"کپی · توی نوار آدرس Chrome بچسبانید",
|
||
gw3_copied:"کپی شد ✓",
|
||
gw3_copy_aria:"آدرس تنظیمات رمز عبور Chrome را کپی کنید و توی نوار آدرس Chrome بچسبانید",
|
||
gw3_note:'(مرورگرها اجازه نمیدهند صفحههای وب لینکهای <code class="ltr">chrome://</code> را مستقیم باز کنند — پس این را کپی کنید و خودتان توی نوار آدرس Chrome بچسبانید.)',
|
||
gw3_p2:"توی Bitwarden به <b>Tools → Import data</b> بروید، منبع را <b>Chrome / Chromium</b> انتخاب کنید و آن فایل را آپلود کنید. (اسم منوها هر از گاهی عوض میشود — راهنمای رسمیِ Import اسکرینشاتِ بهروز دارد.)",
|
||
gw3_btn:"باز کردن راهنمای رسمیِ Import",
|
||
gw3_li:"<b>قبل از پاککردنِ هر چیزی، مطمئن شوید انتقال درست انجام شده.</b> چک کنید مهمترین حسابهایتان — ایمیل، بانک، خریدِ اصلی — واقعاً آنجا هستند و رمزشان درست است. گاهی وقتها بعضی ورودیها موقع انتقال جا میمانند یا خراب میشوند.",
|
||
gw4_phase:"خیلی مهم", gw4_time:"~۱ دقیقه", gw4_h:"فایلِ خروجیِ باقیمانده را نابود کنید",
|
||
gw4_k:"این یکی را رد نکنید", gw4_ch:"آن فایلِ خروجی، فهرستِ همهٔ رمزهای شماست — لخت و بدون هیچ رمزی",
|
||
gw4_p1:"آن را فقط توی یک پوشهٔ سادهٔ روی خودِ کامپیوتر مثل <b>دسکتاپ</b> ذخیره کنید — <b>هیچوقت</b> توی پوشهای که با فضای ابری همگام میشود (OneDrive، iCloud، Google Drive، Dropbox) و هیچوقت روی فلش. همین که از درستبودنِ انتقال مطمئن شدید: <b>پاکش کنید و سطلِ زباله / Recycle Bin را هم خالی کنید.</b>",
|
||
gw4_p2:"خالیکردنِ سطلِ زباله واقعاً داده را پاک نمیکند — تا وقتی روی آن چیزِ دیگری نوشته نشود ممکن است باقی بماند. پس خروجی → انتقال → پاککردن را <b>توی یک نشست</b> تمام کنید، و خیلی کمک میکند اگر هاردتان رمزنگاریشده باشد (BitLocker روی Windows، FileVault روی Mac — که بههرحال روشنکردنش خوب است).",
|
||
gw5_phase:"مرتبکاری", gw5_time:"~۲ دقیقه", gw5_h:"ذخیرهٔ رمز در Chrome را خاموش کنید",
|
||
gw5_p:"وگرنه دو تا برنامه سرِ پر کردنِ رمزهایتان با هم تداخل پیدا میکنند.",
|
||
gw5_li1:"توی تنظیماتِ رمزِ Chrome، گزینهٔ «پیشنهادِ ذخیرهٔ رمزها (Offer to save passwords)» را <b>خاموش</b> کنید.",
|
||
gw5_li2:"<b>فقط بعد از اینکه</b> یک هفته با Bitwarden کار کردید و مطمئن شدید همهچیز سرِ جایش است — <b>آنوقت</b> رمزهای ذخیرهشده توی Chrome را پاک کنید. عجلهای نیست؛ یک هفته ماندنِ همزمانِ رمزها توی هر دو برنامه هیچ ضرری ندارد.",
|
||
gw6_phase:"همان جادو", gw6_time:"استفادهٔ روزمره", gw6_h:"با افزونهٔ جدیدِ مرورگرتان آشنا شوید",
|
||
gw6_p:"همان آیکونِ سپرِ کوچک کنارِ نوار آدرس، چیزی است که هر روز باهاش سر و کار دارید. واردتان میکند، برای <b>حسابهای جدید پیشنهادِ ذخیره</b> میدهد، توی فیلدهای «ساختِ رمز» <b>رمزِ قوی میسازد</b>، میشود برای دسترسیِ راحتتر <b>سنجاقش</b> کرد، و بعد از مدتی بیکار ماندن <b>خودش قفل میشود</b> (برای باز کردنِ دوباره، رمز اصلی یا اثر انگشت میخواهد). اپِ گوشی هم همینطور کار میکند. توضیحِ کاملش توی بخش ۶ پایین.",
|
||
gw7_phase:"قفلکردن", gw7_time:"~۵ دقیقه", gw7_h:"حساب Bitwarden را قرصومحکم کنید",
|
||
gw7_p:"گاوصندوقتان حالا باارزشترین چیزِ روی کامپیوترتان است. توی <b>Settings → Security</b>، <b>ورود دومرحلهای (2FA)</b> را روشن کنید — یک قفلِ دوم، که حتی اگر رمز اصلیتان هم دزدیده شود باز کافی نباشد. روشش را با دقت انتخاب کنید:",
|
||
gw7_m1_r:"✓ بهترین · رایگان", gw7_m1_t:"<b>اپِ Authenticator</b> (مثل Aegis، یا خودِ Bitwarden) — یک کدِ ۶ رقمی روی گوشیتان میسازد. <b>همین را پیشفرض بگذارید.</b>",
|
||
gw7_m2_r:"✓ قویترین", gw7_m2_t:"<b>کلیدِ امنیتیِ سختافزاری</b> (مثل YubiKey، روی پلنِ پولی) — تنها روشی که واقعاً جلوی فیشینگ را میگیرد.",
|
||
gw7_m3_r:"⚠ ازش دوری کنید", gw7_m3_t:"<b>کدِ پیامکی (SMS)</b> — قابلِ دزدیدن است.",
|
||
gw7_m4_r:"⚠ نه", gw7_m4_t:"<b>کدِ ایمیلی برای Bitwarden</b> — اگر رمزِ ایمیلتان <i>داخلِ</i> خودِ Bitwarden باشد، یک حلقهٔ بسته درست میشود و از هر دو بیرون میمانید.",
|
||
gw7_li1:"<b>کدِ بازیابیِ دومرحلهای را ذخیره کنید — و آن را جدا از رمز اصلی نگه دارید.</b> اگر هر دو روی یک کاغذ توی یک کشو باشند، آن قفلِ دوم عملاً هیچ محافظتی نکرده.",
|
||
gw7_li2:"یک <b>زمانِ قفلِ خودکارِ</b> منطقی تنظیم کنید، رمز اصلی را <b>هیچجای دیگری تکرار نکنید</b>، و به <b>هر جایی که رمز اصلیتان را میخواهد مشکوک باشید</b> (فقط اپ رسمی، افزونه یا خودِ bitwarden.com واقعی حق دارند بپرسند).",
|
||
gw7_li3:"اگر خواستید، یک خروجیِ <b>رمزنگاریشده / محافظتشده با رمز</b> هم بهعنوانِ پشتیبان نگه دارید — ولی هیچوقت آن CSV لختِ قدم ۳ را.",
|
||
gw8_phase:"حرفهایتر", gw8_time:"بهمرور", gw8_h:"یک هفته باهاش سر کنید، بعد یک پله بالاتر بروید",
|
||
gw8_p:"عادی ازش استفاده کنید؛ بگذارید خودش پر کند. بعد <b>باارزشترین عادتِ ممکن</b> را پیاده کنید:",
|
||
gw8_k:"آن عادت", gw8_ch:"رمزهای قدیمی را با رمزهای ساختهشده عوض کنید — اول از همه ایمیل",
|
||
gw8_cp:"هر بار که وارد یک حسابِ مهم میشوید، رمزش را به یک رمزِ تصادفیِ تازه که Bitwarden میسازد عوض کنید. <b>اول از همه مهمترینها — بهخصوص ایمیل</b>، چون با ایمیلتان میشود رمزِ بقیهٔ حسابها را ریست کرد. این هفته ۵ تای مهمتر را درست کنید؛ بقیه بهمرور خودشان جا میافتند.",
|
||
s6_h:"افزونهٔ مرورگر چطور کار میکند", s6_note:"همان سپرِ کوچکی که هر روز باهاش کار دارید.",
|
||
ch1_h:"پر کردنِ خودکار", ch1_p:"یک آیکون داخلِ کادرهای ورود ظاهر میشود. کلیک کنید، حسابتان را انتخاب کنید، هر دو کادر فوری پر میشوند.",
|
||
ch2_h:"پیشنهادِ ذخیره", ch2_p:"یک جای جدید ثبتنام کنید، میپرسد «این ورود ذخیره شود؟» — روی ذخیره بزنید، تا همیشه توی گاوصندوقتان است.",
|
||
ch3_h:"ساختِ رمز", ch3_p:"توی هر فیلدِ «ساختِ رمز»، روی آیکون → Generate بزنید. یک رمزِ تصادفیِ بلند، با یک کلیک پر و ذخیره میشود.",
|
||
ch4_h:"سنجاقکردن", ch4_p:"روی آیکونِ شبیهِ قطعهٔ پازلِ مرورگر بزنید و Bitwarden را «سنجاق» کنید تا سپرش همیشه پیدا باشد.",
|
||
ch5_h:"قفلِ خودکار", ch5_p:"بعد از مدتی بیکار ماندن خودش قفل میشود. برای باز کردنِ دوباره رمز اصلی (یا اثر انگشت/چهره) میخواهد.",
|
||
s7_h:"چند کلمه دربارهٔ Passkeyها", s7_note:"آینده دارد میآید — کمکم.",
|
||
s7c_k:"آینده", s7c_h:"Passkey: ورود بدونِ رمزی که دزدیده یا فیش شود",
|
||
s7c_p1:"کمکم بیشتر «Passkey» یا «ورود بدونِ رمز» را میبینید. گوشی یا لپتاپتان با اثر انگشت یا چهره ثابت میکند که خودِ شمایید — <b>اصلاً رمزی وجود ندارد که دزدیده یا فیش شود</b>، و نفوذ به این حسابها بهمراتب سختتر است.",
|
||
s7c_p2:"پس چرا هنوز این همه کار میکنید؟ چون Passkeyها <b>کمکم دارند میآیند</b> — فعلاً فقط بعضی سایتها پشتیبانیشان میکنند و بیشترشان هنوز رمز عبور میخواهند (و سالها همینطور خواهد بود). شما به یک سیستمِ خوب برای <b>هر دو</b> نیاز دارید. خبرِ خوب: <b>Bitwarden، Passkeyهای شما را هم ذخیره و همگام میکند</b>، روی همهٔ دستگاههایتان — پس به یک برندِ گوشی گیر نمیافتید. هر وقت سایتی پیشنهادش را داد قبول کنید؛ این برنامهها و Passkeyها رقیبِ هم نیستند.",
|
||
s8_h:"نگرانیهای رایج — سؤالهای آدمِ شکّاک", s8_note:"روی هر سؤال بزنید تا باز شود.",
|
||
faq1_q:"حالا خودِ Bitwarden نمیشود همان تکنقطهای که اگر لو برود همهچیز لو میرود؟",
|
||
faq1_a:"چرا — و <b>نکته دقیقاً همین است</b>. قضیه «یک در در مقابلِ هیچ در» نیست. قضیه «<b>یک درِ فوقالعاده محکم که خودتان کنترلش میکنید</b>، در مقابلِ ۲۰۰ درِ لقِ پخششده بینِ شرکتهایی که حتی اسمشان را هم نشنیدهاید» است. یک رمز اصلیِ قوی بهاضافهٔ ورود دومرحلهای، هر بار از رمزهای تکراری جلو میزند. شما خطر را میبرید توی همان یک جایی که واقعاً میتوانید محکمش کنید.",
|
||
faq2_q:"اگر خودِ شرکتِ Bitwarden ورشکست شود چه؟",
|
||
faq2_a:"گیر نمیافتید. هر لحظه میتوانید <b>کلِ گاوصندوقتان را خروجی بگیرید</b>، و چون Bitwarden <b>متنباز</b> است، اپها به کارشان ادامه میدهند و جامعهٔ کاربری میتواند زنده نگهشان دارد. بدترین حالت، توی ده دقیقه خروجیتان را میبرید توی یک برنامهٔ دیگر. این را مقایسه کنید با یک سیستمِ دربسته که دادههایتان فقط با شرایطِ شرکت بیرون میآید، نه شرایطِ شما.",
|
||
faq3_q:"چرا نرویم سراغِ همان رمزدانِ Apple/Google بهاضافهٔ Passkey؟",
|
||
faq3_a:"اگر <b>کاملاً</b> توی دنیای یک شرکت زندگی میکنید و فقط دستگاهها و مرورگرِ همان برند را استفاده میکنید، یک حدِ وسطِ قابلِقبول است — از تکرارِ رمز بهتر است. ولی آزادیِ کار روی همهٔ دستگاهها، امکانِ بررسیِ مستقل و آن تضمینِ واقعیِ «حتی شرکت هم نمیتواند بخواند» را از دست میدهید، و کلِ گاوصندوقتان را به همان یک حساب گره میزنید. <b>Bitwarden همهٔ اینها را میدهد و Passkeyهایتان را هم ذخیره میکند.</b> مجبور نیستید یکی را انتخاب کنید.",
|
||
faq4_q:"اگر گوشیام (همان که Authenticator رویش است) را گم کنم چه؟",
|
||
faq4_a1:"هول نکنید — کدِ بازیابی دقیقاً برای همین روز است. ترتیبش اینطوری است:",
|
||
faq4_li1:"از هر کامپیوتری، بروید به bitwarden.com و با <b>رمز اصلی</b> وارد شوید.",
|
||
faq4_li2:"وقتی کدِ دومرحلهای را خواست که نمیتوانید بسازیدش، گزینهٔ <b>«استفاده از کد بازیابی (use recovery code)»</b> را بزنید و همان کدی را که روی کاغذ نوشتهاید وارد کنید.",
|
||
faq4_li3:"وارد شدید. بروید به <b>Settings → Security</b>، Authenticatorِ قدیمی را حذف کنید و دومرحلهای را روی گوشی نوتان دوباره راه بیندازید.",
|
||
faq4_btn:"باز کردن bitwarden.com",
|
||
faq4_a2:"برای همین است که نوشتنِ کدِ بازیابی روی کاغذ (و نگهداشتنش <b>جدا</b> از رمز اصلی) اصلاً قابلِ چشمپوشی نیست.",
|
||
s10_h:"کلِ ماجرا، در یک نفس", s10_note:"اگر هیچچیزِ دیگری یادتان نماند، همین را یادتان باشد.",
|
||
breath_k:"نکتههای اصلی",
|
||
breath_1:"تکرارِ رمز، راهِ شمارهٔ ۱ هکشدنِ آدمهای معمولی است — چون <b>شرکتها هک میشوند</b>، نه شخصِ شما.",
|
||
breath_2:"برنامهٔ مدیریتِ رمز به هر حساب <b>رمزِ قویِ خودش</b> را میدهد، پشتِ یک رمز اصلی که یادتان میماند.",
|
||
breath_3:"رمزدانِ داخلیِ مرورگر (Chrome، Apple) <b>بد نیست</b>، ولی همهچیز را به یک حساب گره میزند و کلیدِ دادههایتان را برای خودش نگه میدارد.",
|
||
breath_4:"<b>Bitwarden</b> رایگان است، همهجا کار میکند و طوری ساخته شده که <b>هیچکس جز خودتان</b> نتواند رمزهایتان را بخواند.",
|
||
breath_5:"رمز اصلی را یک <b>عبارتعبورِ بلندِ تصادفی</b> بگذارید، روی کاغذ بنویسیدش (دو کپی)، ورود دومرحلهای از نوعِ اپ را روشن کنید، کدِ بازیابی را <b>جدا</b> نگه دارید، و اول رمزهای مهم را عوض کنید.",
|
||
breath_6:"این برنامه نمیتواند یک <b>دستگاهِ از قبل آلوده</b> را نجات دهد — کامپیوتر و گوشیتان را تمیز و بهروز نگه دارید.",
|
||
breath_7:"Passkeyها یک امتیازِ عالیاند، و <b>Bitwarden آنها را هم نگه میدارد</b>.",
|
||
breath_8:"بالا آوردنِ سرورِ خودت (Vaultwarden) یک پروژهٔ باحالِ <b>برای بعد</b> است برای کسانی که اهلشاند — نه نقطهٔ شروع.",
|
||
breath_closer:"لازم نیست متخصصِ امنیت شوید. فقط کافی است کلیدهایتان را ببرید توی یک گاوصندوقِ درستوحسابی. <em>بیست دقیقه وقت گذاشتن امروز، سالها خیالِ راحتِ «دیگر لازم نیست نگرانش باشم» را برایتان میخرد.</em>",
|
||
res1_d:"bitwarden.com — ثبتنامِ رایگان",
|
||
res2_t:"قیمتها", res2_d:"جدیدترین پلنها و قیمتها",
|
||
res3_t:"راهنمای Import", res3_d:"انتقالِ رمزها از Chrome",
|
||
res4_d:"ببینید آیا اطلاعاتتان قبلاً لو رفته",
|
||
res5_d:"دربارهٔ آیندهٔ بدونِ رمز بیشتر بدانید",
|
||
res6_d:"بالا آوردنِ سرورِ خودت (پیشرفته)",
|
||
apx_tag:"جایزه · برای آدمهای کنجکاو",
|
||
apx_sub:"میتوانید خواندن را همان جمعبندیِ بالا تمام کنید — راهنما کامل است. <b>این بخش اختیاری است</b> و فقط میگوید یک راهِ پیشرفتهتر هم وجود دارد.",
|
||
s9_h:"پیوست: سرورِ خودت با Vaultwarden",
|
||
s9_note:"یک پروژهٔ «شاید بعداً» برای اهلِ تکنولوژی — <b>نه</b> بخشی از جابهجاییِ معمولی.",
|
||
adv_flag:"⚠ پیشرفته / کاملاً اختیاری", adv_h:"بیشترِ مردم بهتر است کلاً ردش کنند",
|
||
adv_skip:'اصلاً الزامی نیست — <span class="danger-text">اگر اشتباه انجامش بدهید، از انجامندادنش بدتر است.</span>',
|
||
adv_p1:'معمولاً گاوصندوقِ رمزنگاریشدهٔ شما روی سرورهای Bitwarden است. بعضی کاربرهای حرفهای ترجیح میدهند سرور را <b>خودشان</b> روی یک کامپیوترِ کوچک توی خانه بالا بیاورند، با <a href="https://github.com/dani-garcia/vaultwarden" target="_blank" rel="noopener noreferrer">Vaultwarden</a> — یک سرورِ سبک که جامعهٔ کاربری ساخته و با همهٔ اپهای معمولیِ Bitwarden کار میکند.',
|
||
adv_btn:"باز کردن Vaultwarden در GitHub",
|
||
adv_p2:"<b>یک نکتهٔ مهم:</b> سرورِ خودت داشتن، مدلِ رمزنگاری را <b>عوض نمیکند</b>. گاوصندوقتان در هر صورت روی <b>دستگاهِ خودتان</b> رمزنگاری میشود — نه ابرِ Bitwarden میتواند بخواندش، نه سرورِ خودتان. چیزی که عوض میشود این است که <b>چه کسی آن سروری را که بهش وابستهاید میگرداند</b> — و این مسئولیتِ جدید میآورد، نه یک جادوی رمزنگاریِ تازه.",
|
||
adv_why_h:"چرا یک نفر ممکن است بخواهدش",
|
||
adv_why_1:"<b>مالکیتِ کامل</b> — دادههایتان روی سختافزاری است که خودتان کنترلش میکنید.",
|
||
adv_why_2:"وابسته به تصمیمها یا قطعیهای یک شرکت نیستید.",
|
||
adv_why_3:"رایگان است و منابعِ خیلی کمی میخواهد.",
|
||
adv_cost_h:"چرا کارِ تازهکارها نیست",
|
||
adv_cost_1:"<b>خودتان میشوید بخشِ فنی</b> — بهروزرسانی، پشتیبانگیری و بالا نگهداشتنِ سرور از این به بعد همیشه کارِ خودتان است.",
|
||
adv_cost_2:"<b>از پشتیبانها هم باید محافظت کرد</b> — توکنِ مدیر، فایلهای تنظیمات و کلیدهای TLS حساساند؛ امتحان کنید که بازگردانی واقعاً جواب میدهد.",
|
||
adv_cost_3:"<b>هیچ بررسیِ امنیتیِ رسمیای</b> مثلِ Bitwardenِ رسمی ندارد، که حرفهای اداره و شبانهروز پایش میشود.",
|
||
adv_cost_4:"<b>وصلبودن به اینترنت، سطحِ حمله را زیاد میکند</b> — سروری که هک شود نمیتواند گاوصندوقتان را باز کند، ولی میتواند یک صفحهٔ ورودِ تلهگذاریشده جلویتان بگذارد که رمز اصلیتان را موقعِ ورود بدزدد.",
|
||
adv_cost_5:"<b>یک اشتباه، خودِ شما را بیرون میاندازد</b> — و دیگر تیمِ پشتیبانیای نیست که بهش زنگ بزنید.",
|
||
adv_sane:"<b>راهِ عاقلانه:</b> امروز با همان Bitwardenِ معمولی (نسخهٔ ابری) شروع کنید — همین حالا هم «حتی شرکت هم نمیتواند بخواند» است. اگر ماهها بعد دستتان راه افتاد و از ور رفتن با سرورِ خانگی لذت بردید، <b>آنوقت</b> بروید سراغِ Vaultwarden بهعنوانِ یک پروژه. عجلهای نیست و با صبر کردن چیزی از دست نمیدهید.",
|
||
foot_note:'یک همراهِ ساده برای آموزشِ کامل — <span class="prims">چرا مهم است · برنامهٔ مدیریتِ رمز چیست · Chrome در برابر Bitwarden · رمزنگاریِ بدوناطلاع · جابهجایی · Passkeyها · سرورِ خودت</span>.<br><br><b>لازم نیست تمام روز به فکرِ هکرها باشید.</b> یک بار، با حوصله، کلیدهایتان را ببرید توی یک گاوصندوقِ درست و سالها خیالتان راحت باشد.',
|
||
foot_title:"رمزهای عبور شما کلید کل زندگیتان هستند",
|
||
foot_tag:"یک راهنمای ساده برای آدمهای معمولی"
|
||
}
|
||
};
|
||
|
||
var LANG_STORE = 'pwguide-lang';
|
||
var RTL = { fa:true };
|
||
var root = document.documentElement;
|
||
var cur = 'en';
|
||
|
||
function dict(){ return I18N[cur] || I18N.en; }
|
||
// exposed helper used by other IIFEs (copy button label, gw counter)
|
||
window.__t = function(key){
|
||
var d = dict();
|
||
return (d && d[key] != null) ? d[key] : (I18N.en[key] != null ? I18N.en[key] : key);
|
||
};
|
||
|
||
function applyAttr(el, spec){
|
||
// spec: "attr:key;attr2:key2"
|
||
spec.split(';').forEach(function(pair){
|
||
pair = pair.trim(); if(!pair) return;
|
||
var ci = pair.indexOf(':'); if(ci < 0) return;
|
||
var attr = pair.slice(0, ci).trim();
|
||
var key = pair.slice(ci + 1).trim();
|
||
var val = window.__t(key);
|
||
if(val != null) el.setAttribute(attr, val);
|
||
});
|
||
}
|
||
|
||
function setLang(lang, persist){
|
||
if(!I18N[lang]) lang = 'en';
|
||
cur = lang;
|
||
var d = dict();
|
||
|
||
document.querySelectorAll('[data-i18n]').forEach(function(el){
|
||
var key = el.getAttribute('data-i18n');
|
||
if(d[key] != null) el.innerHTML = d[key];
|
||
});
|
||
document.querySelectorAll('[data-i18n-attr]').forEach(function(el){
|
||
applyAttr(el, el.getAttribute('data-i18n-attr'));
|
||
});
|
||
|
||
root.setAttribute('lang', lang);
|
||
root.setAttribute('dir', RTL[lang] ? 'rtl' : 'ltr');
|
||
|
||
document.querySelectorAll('.langseg [data-lang-set]').forEach(function(b){
|
||
b.setAttribute('aria-pressed', b.getAttribute('data-lang-set') === lang ? 'true' : 'false');
|
||
});
|
||
|
||
// re-render the walkthrough counter (its text is generated in JS)
|
||
if(window.__gwRender) window.__gwRender();
|
||
|
||
if(persist){ try{ localStorage.setItem(LANG_STORE, lang); }catch(e){} }
|
||
}
|
||
window.__setLang = setLang;
|
||
|
||
// initial language: localStorage -> navigator.language -> en
|
||
var initLang = null;
|
||
try{ initLang = localStorage.getItem(LANG_STORE); }catch(e){}
|
||
if(!I18N[initLang]){
|
||
var nav = (navigator.language || '').toLowerCase();
|
||
if(nav.indexOf('de') === 0) initLang = 'de';
|
||
else if(nav.indexOf('fa') === 0 || nav.indexOf('pe') === 0) initLang = 'fa';
|
||
else initLang = 'en';
|
||
}
|
||
|
||
function wire(){
|
||
document.querySelectorAll('.langseg [data-lang-set]').forEach(function(b){
|
||
b.addEventListener('click', function(){ setLang(b.getAttribute('data-lang-set'), true); });
|
||
});
|
||
setLang(I18N[initLang] ? initLang : 'en', false);
|
||
}
|
||
if(document.readyState === 'loading'){
|
||
document.addEventListener('DOMContentLoaded', wire);
|
||
} else { wire(); }
|
||
})();
|
||
|
||
/* =========================================================================
|
||
THEME TOGGLE — explicit light/dark override on :root[data-theme].
|
||
Default: localStorage choice -> else follow the OS (prefers-color-scheme,
|
||
handled in CSS). With JS off, the CSS media query still themes the page,
|
||
so nothing breaks.
|
||
========================================================================= */
|
||
(function(){
|
||
var STORE = 'pwguide-theme';
|
||
var root = document.documentElement;
|
||
var buttons = document.querySelectorAll('.themeseg button[data-theme-set]');
|
||
|
||
function systemPref(){
|
||
return matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||
}
|
||
function current(){
|
||
return root.getAttribute('data-theme') || systemPref();
|
||
}
|
||
function paint(theme){
|
||
buttons.forEach(function(b){
|
||
b.setAttribute('aria-pressed', b.getAttribute('data-theme-set') === theme ? 'true' : 'false');
|
||
});
|
||
}
|
||
function apply(theme, persist){
|
||
if(theme !== 'light' && theme !== 'dark') theme = systemPref();
|
||
root.setAttribute('data-theme', theme);
|
||
paint(theme);
|
||
if(persist){ try{ localStorage.setItem(STORE, theme); }catch(e){} }
|
||
}
|
||
|
||
var saved = null;
|
||
try{ saved = localStorage.getItem(STORE); }catch(e){}
|
||
if(saved === 'light' || saved === 'dark'){ apply(saved, false); }
|
||
else { paint(systemPref()); } /* leave data-theme unset -> CSS media query drives it */
|
||
|
||
buttons.forEach(function(b){
|
||
b.addEventListener('click', function(){ apply(b.getAttribute('data-theme-set'), true); });
|
||
});
|
||
})();
|
||
|
||
/* =========================================================================
|
||
COPY-TO-CLIPBOARD — for command/code-ish blocks. Confirms "copied".
|
||
========================================================================= */
|
||
(function(){
|
||
var btns = document.querySelectorAll('.copybtn[data-copy]');
|
||
function fallbackCopy(text){
|
||
var ta = document.createElement('textarea');
|
||
ta.value = text; ta.setAttribute('readonly','');
|
||
ta.style.position = 'absolute'; ta.style.left = '-9999px';
|
||
document.body.appendChild(ta); ta.select();
|
||
try{ document.execCommand('copy'); }catch(e){}
|
||
document.body.removeChild(ta);
|
||
}
|
||
btns.forEach(function(b){
|
||
b.addEventListener('click', function(){
|
||
var text = b.getAttribute('data-copy');
|
||
var label = b.querySelector('.ct');
|
||
var done = function(){
|
||
b.classList.add('copied');
|
||
if(label){ label.innerHTML = window.__t ? window.__t('gw3_copied') : 'COPIED ✓'; }
|
||
setTimeout(function(){
|
||
b.classList.remove('copied');
|
||
if(label){ label.innerHTML = window.__t ? window.__t('gw3_copy_label') : 'Copy · paste into Chrome’s address bar'; }
|
||
}, 1800);
|
||
};
|
||
if(navigator.clipboard && navigator.clipboard.writeText){
|
||
navigator.clipboard.writeText(text).then(done, function(){ fallbackCopy(text); done(); });
|
||
} else { fallbackCopy(text); done(); }
|
||
});
|
||
});
|
||
})();
|
||
|
||
/* =========================================================================
|
||
ACTION BUTTONS — open a genuine web URL in a new, isolated tab.
|
||
Only used for real https:// targets; browser-internal chrome:// links
|
||
use the copy-to-clipboard button instead (browsers block opening them).
|
||
========================================================================= */
|
||
(function(){
|
||
var btns = document.querySelectorAll('.gobtn[data-open]');
|
||
btns.forEach(function(b){
|
||
b.addEventListener('click', function(){
|
||
var url = b.getAttribute('data-open');
|
||
if(/^https:\/\//.test(url)){ window.open(url, '_blank', 'noopener'); }
|
||
});
|
||
});
|
||
})();
|
||
|
||
/* =========================================================================
|
||
GUIDED WALKTHROUGH — roadmap + progress bar + prev/next.
|
||
Degrades gracefully: with JS off, [data-js="off"] stacks all steps.
|
||
========================================================================= */
|
||
(function(){
|
||
var gw = document.getElementById('gw');
|
||
if(!gw) return;
|
||
var steps = gw.querySelectorAll('.gw-step');
|
||
var rmBtns = gw.querySelectorAll('.gw-rm-btn');
|
||
var bar = document.getElementById('gw-bar');
|
||
var prev = document.getElementById('gw-prev');
|
||
var next = document.getElementById('gw-next');
|
||
var counter = document.getElementById('gw-counter');
|
||
var total = steps.length;
|
||
var i = 0;
|
||
|
||
gw.setAttribute('data-js','on'); /* enable the one-at-a-time view */
|
||
|
||
function render(){
|
||
steps.forEach(function(s, idx){ s.classList.toggle('active', idx === i); });
|
||
rmBtns.forEach(function(b, idx){
|
||
b.classList.toggle('done', idx < i);
|
||
if(idx === i){ b.setAttribute('aria-current','step'); }
|
||
else { b.removeAttribute('aria-current'); }
|
||
});
|
||
bar.style.width = (((i + 1) / total) * 100) + '%';
|
||
var tmpl = (window.__t && window.__t('gw_counter')) || 'Step {n} of {t}';
|
||
counter.textContent = tmpl.replace('{n}', (i + 1)).replace('{t}', total);
|
||
prev.disabled = (i === 0);
|
||
next.disabled = (i === total - 1);
|
||
}
|
||
function goto(n){
|
||
i = Math.max(0, Math.min(total - 1, n));
|
||
render();
|
||
}
|
||
/* expose so setLang() can re-render the counter after a language switch */
|
||
window.__gwRender = render;
|
||
|
||
rmBtns.forEach(function(b){
|
||
b.addEventListener('click', function(){ goto(parseInt(b.getAttribute('data-go'), 10)); });
|
||
});
|
||
prev.addEventListener('click', function(){ goto(i - 1); });
|
||
next.addEventListener('click', function(){ goto(i + 1); });
|
||
|
||
/* arrow-key nav when focus is inside the walkthrough */
|
||
gw.addEventListener('keydown', function(e){
|
||
if(e.key === 'ArrowRight'){ goto(i + 1); }
|
||
else if(e.key === 'ArrowLeft'){ goto(i - 1); }
|
||
});
|
||
|
||
render();
|
||
})();
|
||
|
||
/* =========================================================================
|
||
Single calm reveal-on-scroll. Respects reduced-motion.
|
||
========================================================================= */
|
||
(function(){
|
||
var els = document.querySelectorAll('.reveal');
|
||
if(!('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches){
|
||
els.forEach(function(e){e.classList.add('in')});
|
||
return;
|
||
}
|
||
var io = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(en){
|
||
if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); }
|
||
});
|
||
}, {rootMargin:'0px 0px -8% 0px', threshold:.08});
|
||
els.forEach(function(e){io.observe(e)});
|
||
})();
|
||
|
||
/* =========================================================================
|
||
ONBOARDING COACHMARK — points at the Theme + Language controls.
|
||
Appears ~1.2s after load, auto-dismisses after ~6s, shown once per
|
||
visitor (localStorage flag). Translated via the i18n system; arrow and
|
||
position follow LTR/RTL. Reduced-motion: fade only, no bounce/slide.
|
||
========================================================================= */
|
||
(function(){
|
||
/* v2 key so it shows again after the redesign; only marked "seen" once the
|
||
visitor actually engages (closes it or uses a control), not on auto-fade —
|
||
so it keeps nudging toward the language flags until used. */
|
||
var SEEN = 'pm_coach_v2';
|
||
var coach = document.getElementById('coach');
|
||
if(!coach) return;
|
||
|
||
var seen = false;
|
||
try{ seen = localStorage.getItem(SEEN) === '1'; }catch(e){}
|
||
if(seen){ coach.parentNode && coach.parentNode.removeChild(coach); return; }
|
||
|
||
var closeBtn = document.getElementById('coach-x');
|
||
var dismissTimer = null;
|
||
var dismissed = false;
|
||
|
||
function markSeen(){ try{ localStorage.setItem(SEEN, '1'); }catch(e){} }
|
||
|
||
/* aim the popup + its arrow at the language control, clamped to the viewport */
|
||
function place(){
|
||
var lang = document.querySelector('.langseg');
|
||
if(!lang) return;
|
||
var r = lang.getBoundingClientRect();
|
||
var cw = coach.offsetWidth || 280;
|
||
var vw = document.documentElement.clientWidth;
|
||
var center = r.left + r.width / 2;
|
||
var left = Math.max(8, Math.min(center - 46, vw - cw - 8));
|
||
coach.style.left = left + 'px';
|
||
coach.style.right = 'auto';
|
||
var ax = Math.max(14, Math.min(center - left, cw - 14));
|
||
coach.style.setProperty('--arrow-x', ax + 'px');
|
||
}
|
||
|
||
function dismiss(persistSeen){
|
||
if(dismissed) return;
|
||
dismissed = true;
|
||
if(dismissTimer){ clearTimeout(dismissTimer); dismissTimer = null; }
|
||
window.removeEventListener('resize', place);
|
||
coach.classList.remove('show');
|
||
coach.classList.add('hide');
|
||
if(persistSeen) markSeen();
|
||
setTimeout(function(){
|
||
if(coach.parentNode) coach.parentNode.removeChild(coach);
|
||
}, 450);
|
||
}
|
||
|
||
function show(){
|
||
coach.hidden = false;
|
||
void coach.offsetWidth; /* reflow so width is measurable + entrance runs */
|
||
place();
|
||
coach.classList.add('show');
|
||
window.addEventListener('resize', place);
|
||
dismissTimer = setTimeout(function(){ dismiss(false); }, 7000);
|
||
}
|
||
|
||
if(closeBtn) closeBtn.addEventListener('click', function(e){ e.stopPropagation(); dismiss(true); });
|
||
coach.addEventListener('click', function(){ dismiss(true); });
|
||
|
||
/* using the actual controls also dismisses it (and remembers) */
|
||
var themebar = document.querySelector('.themebar');
|
||
if(themebar){
|
||
themebar.addEventListener('click', function(){ dismiss(true); }, true);
|
||
themebar.addEventListener('change', function(){ dismiss(true); }, true);
|
||
}
|
||
|
||
setTimeout(show, 1200);
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|