/*! * encryptor 3.0 ยท https://encryptor.app * * George A. Rauscher: * "Unencrypted data talks. I listened for 25 years. * Make yours silent." * * Copyright (c) 2026 George A. Rauscher, intelligent piXel GmbH * Free to use, study, and share under the MIT License. * Keep the credit, keep the link: https://github.com/georgerauscher/encryptor-app */ /* encryptor 3.0 design system. Glass surfaces over a calm gradient, system font, one accent color. Light and dark follow the system; data-theme on overrides it. */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --radius-s: 12px; --radius-m: 18px; --radius-l: 24px; --ease: cubic-bezier(.2, .8, .2, 1); --page: 1320px; /* Light */ --bg: #f4f5f8; --bg-glow-1: rgba(0, 113, 227, .16); --bg-glow-2: rgba(94, 92, 230, .12); --bg-glow-3: rgba(48, 176, 199, .10); --text: #0b0c0f; --text-2: #3a3d45; --text-3: #5b606b; --accent: #0066d6; --accent-hover: #0058b9; --accent-fill: #0066d6; --accent-fill-hover: #0058b9; --on-accent: #ffffff; --red: #d70015; --green: #248a3d; --warn-bg: color-mix(in srgb, #ffcc00 20%, #ffffff); --field-line: rgba(10, 20, 40, .22); --code-bg: rgba(10, 20, 40, .05); --glass: rgba(255, 255, 255, .72); --glass-strong: rgba(255, 255, 255, .8); --glass-edge: rgba(255, 255, 255, .9); --glass-line: rgba(10, 20, 40, .08); --shadow: 0 1px 2px rgba(10, 20, 40, .05), 0 8px 28px rgba(10, 20, 40, .07); --focus: 0 0 0 3px rgba(0, 102, 214, .35); --ring: rgba(0, 102, 214, .55); --chip: rgba(0, 102, 214, .1); --warn: #9a5b00; color-scheme: light; } :root[data-theme="dark"] { --bg: #07080c; --bg-glow-1: rgba(10, 132, 255, .22); --bg-glow-2: rgba(94, 92, 230, .18); --bg-glow-3: rgba(48, 176, 199, .10); --text: #f5f6f8; --text-2: #c9ccd3; --text-3: #9aa0ab; --accent: #2f8cff; --accent-hover: #4c9dff; --accent-fill: #0071e3; --accent-fill-hover: #0062c4; --on-accent: #ffffff; --red: #ff6961; --green: #30d158; --warn-bg: color-mix(in srgb, #ffb340 16%, transparent); --field-line: rgba(255, 255, 255, .12); --code-bg: rgba(255, 255, 255, .06); --glass: rgba(28, 30, 38, .55); --glass-strong: rgba(34, 36, 46, .78); --glass-edge: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .45); --focus: 0 0 0 3px rgba(47, 140, 255, .45); --ring: rgba(47, 140, 255, .7); --chip: rgba(47, 140, 255, .14); --warn: #ffb340; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #07080c; --bg-glow-1: rgba(10, 132, 255, .22); --bg-glow-2: rgba(94, 92, 230, .18); --bg-glow-3: rgba(48, 176, 199, .10); --text: #f5f6f8; --text-2: #c9ccd3; --text-3: #9aa0ab; --accent: #2f8cff; --accent-hover: #4c9dff; --accent-fill: #0071e3; --accent-fill-hover: #0062c4; --on-accent: #ffffff; --red: #ff6961; --green: #30d158; --warn-bg: color-mix(in srgb, #ffb340 16%, transparent); --field-line: rgba(255, 255, 255, .12); --code-bg: rgba(255, 255, 255, .06); --glass: rgba(28, 30, 38, .55); --glass-strong: rgba(34, 36, 46, .78); --glass-edge: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .45); --focus: 0 0 0 3px rgba(47, 140, 255, .45); --ring: rgba(47, 140, 255, .7); --chip: rgba(47, 140, 255, .14); --warn: #ffb340; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } /* hidden must win over component display rules. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-top: 12px; font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Gradient behind the glass, fixed to the viewport so the glass surfaces glide over changing colors while scrolling. */ body::before { content: ""; position: fixed; inset: -20vmax; z-index: -1; background: radial-gradient(38vmax 30vmax at 18% 12%, var(--bg-glow-1), transparent 70%), radial-gradient(34vmax 28vmax at 86% 22%, var(--bg-glow-2), transparent 70%), radial-gradient(40vmax 30vmax at 60% 88%, var(--bg-glow-3), transparent 70%); pointer-events: none; } a { color: inherit; text-decoration: none; } p { margin: 0; } h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: -.022em; text-wrap: balance; } h3 { letter-spacing: -.01em; } h1, h2, h3 { line-height: 1.2; } p, li, summary, .hint, .note { text-wrap: pretty; } main { flex: 1 0 auto; width: 100%; } .nw { white-space: nowrap; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon-s { width: 16px; height: 16px; } .icon-l { width: 26px; height: 26px; } .skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); } .skip:focus { top: 12px; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; } .input:focus-visible { outline: none; } .wrap { width: min(var(--page), 100% - 48px); margin-inline: auto; } /* Glass */ .glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); } /* Header */ .nav { position: sticky; top: 12px; z-index: 50; width: min(var(--page), 100% - 48px); margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 18px; border-radius: 999px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; letter-spacing: -.01em; } .brand-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), #5e5ce6); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } .brand-mark .icon { width: 18px; height: 18px; } .brand-tld { color: var(--text-3); font-weight: 500; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-links a { padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text-2); transition: background .2s var(--ease), color .2s var(--ease); } .nav-links a:hover { background: var(--chip); color: var(--text); } .nav-links a[aria-current="page"] { color: var(--text); background: var(--chip); } .nav-tools { display: flex; align-items: center; gap: 8px; } /* Language switch */ .lang-switch { position: relative; display: inline-flex; align-items: center; width: 68px; height: 30px; padding: 3px; border: 1px solid var(--glass-line); border-radius: 999px; flex-shrink: 0; } .lang-indicator { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); background: var(--accent-fill); border-radius: 999px; transition: transform .25s var(--ease); } .lang-switch[data-active="de"] .lang-indicator { transform: translateX(100%); } .lang-link { position: relative; z-index: 1; flex: 1 1 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 22px; color: var(--text-3); transition: color .2s var(--ease); } .lang-link[aria-current="true"] { color: var(--on-accent); } .lang-link { border-radius: 999px; } .lang-link:not([aria-current="true"]):hover { color: var(--text); background: var(--chip); } .icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--glass-line); background: transparent; color: var(--text-2); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .icon-btn:hover { background: var(--chip); color: var(--text); } .icon-btn .icon { width: 18px; height: 18px; } .nav-toggle { display: none; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 16px/1 var(--font); border: 1px solid transparent; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .btn-primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .btn-primary:hover { background: var(--accent-fill-hover); transform: translateY(-1px); } .btn:active { transform: scale(.98); } .btn .icon { width: 18px; height: 18px; } .btn-glass { background: var(--glass-strong); color: var(--text); border-color: var(--glass-line); } .btn-glass:hover { transform: translateY(-1px); } /* Hero */ .hero { padding: 104px 0 72px; text-align: center; } .eyebrow { --eyebrow-ink: var(--accent); display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--eyebrow-ink); background: var(--chip); } .hero h1 { margin: 22px auto 0; max-width: 16ch; font-size: clamp(38px, 7vw, 92px); line-height: 1.02; font-weight: 750; } .hero h1 .grad { display: block; background: linear-gradient(100deg, var(--accent), #5e5ce6 60%, #30b0c7); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { margin: 24px auto 0; max-width: 50ch; font-size: clamp(18px, 2vw, 22px); color: var(--text-2); } .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } .trust { margin-top: 22px; font-size: 14px; color: var(--text-3); } /* Sections */ .section { padding: 56px 0; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .section-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; } .section-head p { color: var(--text-3); max-width: 62ch; } /* Tool cards */ .tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .tool { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius-l); min-height: 208px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .tool:hover, a.fact:hover, a.crack:hover { transform: translateY(-2px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } a.fact, a.crack { transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .tool-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--accent); background: var(--chip); } .tool h3 { font-size: 21px; } .tool p { color: var(--text-2); font-size: 16px; } .tool .go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--accent); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; } .step { padding: 28px; border-radius: var(--radius-l); } .step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--on-accent); background: var(--accent-fill); } .step h3 { font-size: 20px; margin-bottom: 6px; } .step p { color: var(--text-2); } /* Facts */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fact { padding: 24px; border-radius: var(--radius-m); display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; align-content: start; } .fact .icon { grid-row: span 2; color: var(--accent); margin-top: 3px; width: 24px; height: 24px; } .fact strong { font-family: var(--font-display); font-size: 20px; letter-spacing: -.01em; } .fact > span { color: var(--text-2); font-size: 15.5px; } .crack { margin-top: 16px; padding: 28px 32px; border-radius: var(--radius-l); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .crack h3 { font-size: 22px; } .crack p { color: var(--text-2); margin-top: 6px; } .crack small { display: block; margin-top: 10px; color: var(--text-3); font-size: 13.5px; max-width: 80ch; } .crack-value { text-align: right; } .crack-value b { display: block; font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.03em; color: var(--accent); } .crack-value > span { color: var(--text-3); font-size: 14px; } /* Mac */ .mac { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 48px; border-radius: 32px; } .mac h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-top: 16px; } .mac p { color: var(--text-2); margin-top: 14px; max-width: 52ch; } .mac .jab { color: var(--text); font-weight: 500; } .mac .extra { font-size: 15px; color: var(--text-3); margin-top: 8px; } .mac .btn { margin-top: 26px; } .mac-visual { aspect-ratio: 4 / 3; border-radius: 22px; position: relative; background: linear-gradient(160deg, rgba(0, 102, 214, .9), rgba(94, 92, 230, .85) 55%, rgba(48, 176, 199, .8)); box-shadow: var(--shadow); } .mac-window { position: absolute; inset: 14% 12%; border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--text); } .mac-window .dots { position: absolute; top: 14px; left: 16px; display: flex; gap: 7px; } .mac-window .dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .mac-window .dots i:nth-child(2) { background: #febc2e; } .mac-window .dots i:nth-child(3) { background: #28c840; } .drop { width: 72%; padding: 26px 16px; border-radius: 16px; border: 1.5px dashed var(--accent); color: var(--text-2); font-size: 14px; } .drop .icon { display: block; margin: 0 auto 10px; color: var(--accent); width: 30px; height: 30px; } /* Limits */ .limits { padding: 32px; border-radius: var(--radius-l); } .limits ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; } .limits li { display: flex; gap: 12px; color: var(--text-2); } .limits li strong { color: var(--text); font-weight: 600; } .limits li .icon { color: var(--warn); margin-top: 3px; } .limits h2 { font-size: 26px; } /* Footer */ .footer { margin: 64px auto 24px; padding: 22px 28px; border-radius: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 14px; color: var(--text-3); } .footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; } .footer a { display: inline-flex; align-items: center; min-height: 32px; } .footer a:hover { color: var(--text); } /* Tool and text pages */ .page { padding: 64px 0 24px; } .page-head { max-width: 960px; margin: 0 auto 32px; text-align: center; } .page-head h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; font-weight: 750; margin-top: 18px; } .page-head h1:first-child { margin-top: 0; } .page-head p { margin-top: 16px; color: var(--text-2); font-size: clamp(17px, 1.6vw, 20px); } .panel { margin: 0 auto; padding: 32px; border-radius: 28px; } .panel + .panel { margin-top: 20px; } .field { display: grid; gap: 8px; margin-bottom: 20px; } .field label, .label-row { font-weight: 600; font-size: 15px; } .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .hint { font-size: 14px; color: var(--text-3); font-weight: 400; } .input, textarea.input { width: 100%; padding: 14px 16px; border-radius: var(--radius-s); border: 1px solid var(--field-line); background: var(--glass-strong); color: var(--text); font: 16px/1.5 var(--font); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } textarea.input { min-height: 180px; resize: vertical; } textarea.mono, .mono { font-family: var(--mono); font-size: 14.5px; word-break: break-all; } .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); } .input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); } .input.mono::placeholder { font-family: var(--font); font-size: 15px; letter-spacing: 0; } textarea.mono:placeholder-shown { word-break: normal; } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .result > .actions:last-child { margin-top: 28px; } p.hint:has(> .icon) { display: flex; gap: 8px; align-items: flex-start; } p.hint > .icon { margin-top: 3px; } .btn[disabled] { opacity: 1; background: var(--glass-line); color: var(--text-3); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; } .btn-small { min-height: 40px; padding: 0 16px; font-size: 15px; } .drop-zone { display: grid; place-items: center; gap: 10px; text-align: center; padding: 44px 24px; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--text-2); transition: background .2s var(--ease), border-color .2s var(--ease); } .drop-zone:hover, .drop-zone.over { background: var(--chip); border-color: var(--accent); } .drop-zone .icon { width: 36px; height: 36px; color: var(--accent); } .drop-zone strong { color: var(--text); font-size: 18px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .file-info { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--chip); margin: 0 0 24px; } .drop-zone { margin-bottom: 20px; } .drop-zone:has(~ .file-info:not([hidden])) { display: none; } .file-out { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass-strong); min-width: 0; } .file-out .icon { color: var(--accent); } .file-out code { font: 600 16px/1.4 var(--font); overflow-wrap: anywhere; min-width: 0; } .saved { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; font-size: 15px; } .file-info .grow { flex: 1; min-width: 0; } .file-info .name { font-weight: 600; overflow-wrap: anywhere; } .file-info .size { font-size: 14px; color: var(--text-3); } .progress { margin-top: 16px; } .progress progress { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; appearance: none; border: 0; background: var(--glass-line); } .progress progress::-webkit-progress-bar { background: var(--glass-line); } .progress progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; } .progress progress::-moz-progress-bar { background: var(--accent); } .progress .row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-3); margin-top: 6px; } .msg { margin: 16px 0 20px; padding: 12px 16px; border-radius: 14px; font-size: 15px; background: var(--chip); color: var(--text); display: flex; gap: 10px; align-items: flex-start; } .msg::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E") center / contain no-repeat; } .msg[data-kind="error"] { background: color-mix(in srgb, var(--red) 10%, var(--glass-strong)); } .msg[data-kind="error"]::before { background: var(--red); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); } .msg[data-kind="success"] { background: color-mix(in srgb, var(--green) 12%, var(--glass-strong)); } .msg[data-kind="success"]::before { background: var(--green); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21.8 10A10 10 0 1 1 17 3.34%22/%3E%3Cpath d=%22m9 11 3 3L22 4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21.8 10A10 10 0 1 1 17 3.34%22/%3E%3Cpath d=%22m9 11 3 3L22 4%22/%3E%3C/svg%3E"); } .panel-msg .msg { margin: 20px 0 0; } .note { margin-top: 14px; padding: 12px 16px; border-radius: 14px; font-size: 15px; background: var(--warn-bg); color: var(--text); display: flex; gap: 10px; align-items: flex-start; } .note > .icon { margin-top: 3px; color: var(--warn); } .note-info { background: var(--chip); } .note-info > .icon { color: var(--accent); } .panel > .note:first-child { margin-top: 0; } .secret { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass-strong); } .secret code { font-family: var(--mono); font-size: clamp(17px, 2.2vw, 22px); letter-spacing: .06em; font-weight: 600; word-break: break-word; } .strength { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14.5px; color: var(--text-2); } .strength .meter { flex: none; width: 88px; height: 8px; border-radius: 999px; background: var(--green); } .result h2 { font-size: 26px; line-height: 1.2; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 12px; } .result h2:focus { outline: none; } .ok-badge { flex: none; margin-top: 1px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--green); color: #fff; } .ok-badge .icon { width: 18px; height: 18px; stroke-width: 3; } .check-row { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-2); } .check-row { cursor: pointer; } .check-row input { margin-top: 2px; width: 22px; height: 22px; flex: none; accent-color: var(--accent-fill); cursor: pointer; } .check-row + .hint { margin-top: 12px; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .prose { margin: 0 auto; } .prose section { padding: 28px 32px; border-radius: 24px; margin-bottom: 18px; } .prose h2 { font-size: 24px; margin-bottom: 12px; } .prose h3 { font-size: 18px; margin: 18px 0 6px; } .prose p + p, .prose p + ul, .prose ul + p { margin-top: 12px; } .prose ul, .prose ol { margin: 10px 0 0; padding-left: 22px; color: var(--text-2); } .prose li + li { margin-top: 6px; } .prose p { color: var(--text-2); } .prose a:not(.btn), .link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .center { text-align: center; } .prose .center { margin-top: 28px; } .note + .field, .panel > .note:first-child { margin-bottom: 18px; } .mac-features { margin-bottom: 18px; } .mac-jab { max-width: none; } .jab-big { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: var(--text) !important; font-weight: 650; letter-spacing: -.01em; } .statement p { font-size: clamp(19px, 1.3vw, 30px); line-height: 1.5; } .statement p + p { margin-top: 14px; } .sig { margin-top: 1.2em !important; } .notes { margin: 10px 0 0; padding-left: 20px; color: var(--text-2); font-size: 15px; } .notes li + li { margin-top: 4px; } .pw-row { display: flex; gap: 8px; } .pw-row .input { flex: 1; } .pw-row .icon-btn { width: 50px; height: auto; border-radius: var(--radius-s); } .panel-msg { margin: 0 auto; } .result h3 { font-size: 18px; margin-top: 18px; } .prose table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; } .prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--glass-line); vertical-align: top; } .prose th:first-child, .prose td:first-child { padding-left: 0; } .prose th { white-space: nowrap; } .prose table + p { margin-top: 16px; } .prose code, .result code:not(#pw):not(#out-name) { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--code-bg); border: 1px solid var(--glass-line); white-space: nowrap; } pre.code { margin: 8px 0 12px; font-family: var(--mono); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--glass-line); color: var(--text); } pre.code.formula { font-family: var(--font); font-size: 16px; } .result > .actions + .hint { margin-top: 12px; } .link { overflow-wrap: anywhere; } .result > .note { margin: 0 0 14px; } .result > .note + .field { margin-top: 18px; } .jab-big { text-wrap: pretty; } .code-label { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text) !important; } .checksums { background: var(--code-bg); border: 1px solid var(--glass-line); } .prose th { color: var(--text); font-weight: 600; } .prose td { color: var(--text-2); } .checksums { font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre; padding: 14px; border-radius: 12px; background: var(--glass-strong); color: var(--text-2); } .faq details { padding: 6px 0; border-bottom: 1px solid var(--glass-line); } .faq details:last-child { border-bottom: 0; } summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-weight: 600; } summary::-webkit-details-marker { display: none; } summary::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--text-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s var(--ease); } details[open] > summary::after { transform: rotate(180deg); } details > p { padding-bottom: 12px; } .faq details p { margin-top: 4px; } /* Large screens (27 to 32 inch): content grows instead of staying narrow. */ @media (min-width: 1800px) { :root { --page: 1560px; } body { font-size: 18.5px; } .hero { padding: 132px 0 96px; } .tool { min-height: 236px; padding: 30px; } .tool h3 { font-size: 23px; } .fact strong { font-size: 22px; } } @media (min-width: 2400px) { :root { --page: 1880px; } body { font-size: 20px; } .hero h1 { font-size: 112px; } } /* Mobile and tablet */ @media (max-width: 1080px) { .tools { grid-template-columns: repeat(2, 1fr); } .facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .nav-toggle { display: inline-grid; } .nav-links, .nav-tools .lang-switch, .nav-tools .theme-btn { display: none; } .nav.open { border-radius: 26px; flex-wrap: wrap; } .nav.open .nav-links { display: flex; order: 3; width: 100%; flex-direction: column; align-items: stretch; margin: 8px 0 4px; } .nav.open .nav-links a { padding: 14px 16px; font-size: 17px; } .nav.open .nav-tools { order: 4; width: 100%; justify-content: center; padding-bottom: 8px; } .nav.open .nav-tools .lang-switch, .nav.open .nav-tools .theme-btn { display: inline-flex; } .nav-tools { margin-left: auto; } .nav.open .nav-tools { margin-left: 0; } .hero { padding: 72px 0 48px; } .steps, .mac { grid-template-columns: 1fr; } .crack { grid-template-columns: 1fr; } .crack-value { text-align: left; } .limits ul { grid-template-columns: 1fr; } .section-head { flex-direction: column; align-items: start; } } @media (max-width: 560px) { .nav { width: calc(100% - 32px); } .panel, .prose section { padding: 22px 18px; border-radius: 22px; } .wrap { width: calc(100% - 32px); } .tools, .facts { grid-template-columns: 1fr; } .tool { min-height: 0; } .hero-cta .btn { width: 100%; } .footer nav { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-strong); } } /* Full third-party license texts in the legal notice. */ .license-text { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--glass-strong); color: var(--text-2); } /* Offline edition on the start page: same card language as the Mac teaser. */ .offline { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 48px; border-radius: 32px; } .offline h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-top: 16px; } .offline p { color: var(--text-2); margin-top: 14px; max-width: 52ch; } .offline-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .offline .offline-note { font-size: 15px; color: var(--text-3); margin-top: 18px; } .offline-visual { aspect-ratio: 4 / 3; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(48, 176, 199, .85), rgba(0, 102, 214, .9) 55%, rgba(94, 92, 230, .85)); box-shadow: var(--shadow); } .offline-file { width: 62%; padding: 28px 20px; border-radius: 18px; text-align: center; display: grid; gap: 8px; justify-items: center; color: var(--text); } .offline-file > .icon { width: 44px; height: 44px; color: var(--accent); } .offline-file strong { font-size: 20px; font-family: var(--mono); } .offline-file > span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; } .offline-file code { font-family: var(--mono); font-size: 12px; color: var(--text-3); } @media (max-width: 1080px) { .offline { grid-template-columns: 1fr; } .offline-visual { aspect-ratio: 16 / 7; } } @media (max-width: 640px) { .offline { padding: 26px 22px; } .offline-cta .btn { width: 100%; justify-content: center; } .offline-visual { display: none; } } /* Final polish, 26.09.2026: consortium review (web and Apple design). */ .fact > span, .tool p, .step p { text-wrap: pretty; } .hero .lead, .page-head p, .trust, .drop-zone strong, .drop, .section-head p { text-wrap: balance; } @media (min-width: 821px) { .section-head p { text-align: right; } } :root:not([data-theme="dark"]) .eyebrow { --eyebrow-ink: var(--accent-hover); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { --eyebrow-ink: var(--accent); } } :root:not([data-theme="dark"]) .offline-file, :root:not([data-theme="dark"]) .mac-window { background: rgba(255, 255, 255, .78); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offline-file, :root:not([data-theme="light"]) .mac-window { background: var(--glass); } } @media (min-width: 1800px) { .nav-links a { font-size: 17px; } .btn { font-size: 18px; min-height: 54px; padding: 0 26px; } .btn-small { font-size: 16px; min-height: 44px; } .tool p, .fact > span, .step p { font-size: 18px; } .step h3 { font-size: 23px; } .footer { font-size: 16px; } .eyebrow { font-size: 15px; } .hint, .crack small { font-size: 16px; } .field label, .label-row { font-size: 17px; } .input, textarea.input { font-size: 18px; } .page-head h1 { font-size: clamp(34px, 3.4vw, 76px); } .offline, .mac { grid-template-columns: 1fr 1fr; padding: 64px; } .offline-visual, .mac-visual { aspect-ratio: 16 / 11; } .offline p, .mac p { max-width: 60ch; } .offline h2, .mac h2 { font-size: clamp(30px, 2.6vw, 60px); } .prose table, .notes, .check-row, .note, .msg { font-size: .9em; } .prose h2 { font-size: 30px; } .prose h3, .result h3 { font-size: 22px; } pre.code { font-size: 16px; } .offline .offline-note, .mac .extra, .crack-value > span, .code-label { font-size: 16px; } .checksums, .license-text { font-size: 14px; } .input.mono::placeholder { font-size: 17px; } .crack h3 { font-size: 26px; } pre.code.formula { font-size: 18px; } } @media (min-width: 2400px) { .hero .lead { font-size: 28px; max-width: 56ch; } .hero .btn { min-height: 60px; font-size: 19px; padding: 0 30px; } .trust { font-size: 17px; } } @media (max-width: 1080px) { .mac { grid-template-columns: 1fr; } .mac-visual { aspect-ratio: 16 / 7; } } @media (max-width: 820px) { .step { display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; } .step::before { grid-row: span 2; margin: 0; } } @media (max-width: 640px) { .mac { padding: 26px 22px; } .mac-visual { display: none; } .mac .btn { width: 100%; } } @media (max-width: 560px) { .section { padding: 40px 0; } .crack { padding: 24px; } .tool { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 4px; padding: 20px; } .tool-icon { grid-row: span 3; } .tool .go { margin-top: 6px; } .label-row { flex-direction: column; align-items: flex-start; gap: 2px; } .strength { flex-wrap: wrap; } .strength .meter { width: 100%; } .secret code { font-size: 17px; letter-spacing: .03em; text-wrap: balance; } .secret .btn, .actions .btn, .file-out + .actions .btn { width: 100%; } .drop-zone, .secret, .file-info, .file-out, .msg, .note { border-radius: 14px; } .footer nav { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 4px 24px; } .file-info { flex-wrap: wrap; } .file-info .btn { width: 100%; } } @media (pointer: coarse), (max-width: 820px) { .icon-btn { width: 44px; height: 44px; } .btn-small { min-height: 44px; } .footer a { min-height: 44px; } .nav.open .lang-switch { width: 96px; height: 44px; } .nav.open .lang-link { line-height: 36px; font-size: 14px; } .brand { min-height: 44px; } } /* Wide screens: two text columns and a side column, boxes keep the page width. */ .cols .col > section:last-child { margin-bottom: 0; } .side { display: none; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .chip { padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--chip); } .side h2 { font-size: 22px; } .side p { margin-top: 12px; color: var(--text-2); } .side-steps { list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; } .side-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; } .side-steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--on-accent); background: var(--accent-fill); } .side-steps strong { font-size: 16px; } .side-steps span { color: var(--text-2); font-size: 15px; } .side-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; } .statement { text-align: center; } .statement p { max-width: 62ch; margin-inline: auto; } .page-cta { margin-top: 28px; } @media (min-width: 1280px) { .prose.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; } .has-side > .panel, .has-side > .panel-msg { margin: 0; width: 100%; min-width: 0; } .page:has(.statement) { min-height: calc(100dvh - 230px); display: flex; flex-direction: column; justify-content: center; } .page:has(.statement) > .prose { width: 100%; } .has-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); column-gap: 20px; align-items: start; } .has-side > .page-head { grid-column: 1 / -1; } .has-side > :not(.page-head):not(.side) { grid-column: 1; } .has-side > .side { display: block; grid-column: 2; grid-row: 2 / span 3; position: sticky; top: 96px; padding: 28px; border-radius: 28px; } .has-side .panel > .note-info:first-child { display: none; } .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-content: start; } .faq h2 { grid-column: 1 / -1; } .faq details:nth-last-child(2):nth-child(even) { border-bottom: 0; } } @media (min-width: 1800px) { .side h2 { font-size: 26px; } .side-steps strong { font-size: 18px; } .side-steps span, .side p, .chip { font-size: 17px; } } /* 404: the typo check as a wink, the address, and ways on. */ .nf { text-align: center; } .nf-code { margin: 8px auto 0; font-family: var(--mono); font-weight: 700; line-height: .9; letter-spacing: -.04em; font-size: clamp(96px, 20vw, 260px); background: linear-gradient(100deg, var(--accent), #5e5ce6 60%, #30b0c7); -webkit-background-clip: text; background-clip: text; color: transparent; } .nf .page-head { margin-top: 12px; } .nf-path { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin: 4px auto 0; padding: 12px 18px; border-radius: 16px; } .nf-label { font-size: 14px; color: var(--text-3); white-space: nowrap; } .nf-path code { font-family: var(--mono); font-size: 15px; color: var(--red); overflow-wrap: anywhere; text-align: left; } .nf .actions { justify-content: center; margin-top: 28px; } .nf-line { margin-top: 40px; color: var(--text-3); font-size: 15px; } .nf-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .nf-tool { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 18px; font-weight: 600; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .nf-tool .icon { color: var(--accent); } .nf-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } @media (max-width: 820px) { .nf-tools { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .nf-path { flex-direction: column; gap: 4px; } .nf .actions .btn { width: 100%; } } /* SEO additions: cross links, FAQ under tools and on the start page, update line. */ .cross { margin-top: 16px; color: var(--text-2); } .tool-faq { margin-top: 20px; padding: 28px 32px; border-radius: 28px; } .home-faq { padding: 32px; border-radius: var(--radius-l); } .tool-faq h2, .home-faq h2 { font-size: 24px; margin-bottom: 6px; } .updated { margin: -16px 0 28px; text-align: center; font-size: 14px; color: var(--text-3); } .page-tools { margin-top: 28px; } .quiet-link { color: inherit; text-decoration: underline; text-decoration-color: var(--glass-line); text-underline-offset: 3px; } .quiet-link:hover { color: var(--text); text-decoration-color: currentColor; } @media (min-width: 1280px) { .tool-faq, .home-faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-content: start; } .tool-faq h2, .home-faq h2 { grid-column: 1 / -1; } } @media (max-width: 560px) { .tool-faq, .home-faq { padding: 22px 18px; } }