/* ============================================================ mrpacktozipconverter.com — Kinetic Minimal design system Dark theme default (deep navy + indigo/cyan energy), light theme via [data-theme="light"] (crisp slate + indigo). All translatable copy lives in /assets/i18n/.json — nothing language-specific belongs in this file or the HTML. ============================================================ */ /* ==CRITICAL:START== Rules above/below this marker until CRITICAL:END are inlined into every page for first paint. If you edit them, regenerate the inline copies (see docs/README). */ /* ---------- Tokens: dark (default) ---------- */ :root { color-scheme: dark; --bg: #031427; --surface-min: #000f21; --surface-1: #0b1c30; --surface-2: #102034; --surface-3: #1b2b3f; --surface-4: #26364a; --text: #d3e4fe; --text-2: #aebccd; --text-3: #8b9db5; --hairline: rgba(211, 228, 254, 0.09); --border: rgba(211, 228, 254, 0.16); --border-strong: rgba(211, 228, 254, 0.28); --indigo: #4f46e5; --indigo-hover: #5b52f0; --cyan: #06b6d4; --cyan-bright: #4cd7f6; --grad-cta: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); --on-grad: #ffffff; --ok: #4edea3; --ok-dim: rgba(78, 222, 163, 0.14); --brand-green: #1bd96a; --warn: #fbbf24; --warn-dim: rgba(251, 191, 36, 0.12); --err: #ff8f85; --err-dim: rgba(255, 143, 133, 0.12); --accent-link: #7dd3fc; --accent-2: #c3c0ff; --glow-cta: 0 0 24px -6px rgba(79, 70, 229, 0.55), 0 0 12px -4px rgba(6, 182, 212, 0.35); --glow-card: 0 0 32px -4px rgba(79, 70, 229, 0.25), 0 0 16px -2px rgba(6, 182, 212, 0.15); --shadow-card: 0 1px 3px rgba(0, 6, 18, 0.4); --shadow-pop: 0 12px 32px -8px rgba(0, 6, 18, 0.6); --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --radius-s: 0.375rem; --radius-m: 0.5rem; --radius-l: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --container: 1200px; --container-narrow: 860px; --header-h: 4rem; } /* ---------- Tokens: light ---------- */ [data-theme="light"] { color-scheme: light; --bg: #f8fafc; --surface-min: #ffffff; --surface-1: #f1f5f9; --surface-2: #ffffff; --surface-3: #f8fafc; --surface-4: #e2e8f0; --text: #0f172a; --text-2: #334155; --text-3: #64748b; --hairline: #e2e8f0; --border: #cbd5e1; --border-strong: #94a3b8; --indigo: #4f46e5; --indigo-hover: #4338ca; --cyan: #0284c7; /* darkened sky for AA contrast on white (small mono labels use this) */ --cyan-bright: #0284c7; --on-grad: #ffffff; --ok: #059669; --ok-dim: rgba(5, 150, 105, 0.1); --brand-green: #10b981; --warn: #b45309; --warn-dim: rgba(217, 119, 6, 0.1); --err: #dc2626; --err-dim: rgba(220, 38, 38, 0.08); --accent-link: #4f46e5; --accent-2: #4338ca; --glow-cta: 0 4px 14px -4px rgba(79, 70, 229, 0.4); --glow-card: none; --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06); --shadow-pop: 0 12px 28px -8px rgba(15, 23, 42, 0.16); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } img, svg { display: block; max-width: 100%; } a { color: var(--accent-link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, select { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); margin: 0; text-wrap: balance; } p { margin: 0; } code { font-family: var(--font-mono); font-size: 0.9em; } ::selection { background: rgba(79, 70, 229, 0.4); color: #fff; } :focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .icon { width: 1.25em; height: 1.25em; flex: none; } .icon-sm { width: 1em; height: 1em; } /* ---------- Type utilities ---------- */ .kicker { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-bright); } .mono { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; } .muted { color: var(--text-3); } .dim { color: var(--text-2); } .display-hero { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; } .headline-lg { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; } .headline-md { font-size: 1.375rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; } .headline-sm { font-size: 1.0625rem; line-height: 1.45; font-weight: 600; letter-spacing: -0.005em; } .lead { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; } .section { padding: 4.5rem 0; } .section-tight { padding: 3rem 0; } .section-alt { background: var(--surface-min); } section { scroll-margin-top: calc(var(--header-h) + 1.5rem); } .section-head { max-width: 44rem; margin: 0 auto 2.75rem; text-align: center; } .section-head .kicker { display: block; margin-bottom: 0.625rem; } .section-head p { margin-top: 0.75rem; color: var(--text-2); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--indigo); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 var(--radius-m) 0; } .skip-link:focus { left: 0; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.625rem; color: var(--text); flex: none; } .brand:hover { text-decoration: none; } .brand-mark { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-m); background: var(--grad-cta); display: grid; place-items: center; color: #fff; box-shadow: var(--glow-cta); transition: transform 0.2s ease; } .brand:hover .brand-mark { transform: scale(1.06); } .brand-name { display: flex; flex-direction: column; line-height: 1.15; } .brand-name b { font-family: var(--font-head); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .brand-name b .accent { color: var(--cyan-bright); } .brand-name > span { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .header-nav { display: flex; align-items: center; gap: 0.125rem; } .header-nav a, .nav-drop-btn { padding: 0.4rem 0.625rem; border-radius: var(--radius-m); color: var(--text-2); font-size: 0.875rem; transition: color 0.15s ease, background 0.15s ease; display: inline-flex; align-items: center; gap: 0.3rem; } .header-nav a:hover, .nav-drop-btn:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .nav-drop { position: relative; } .nav-drop-btn .icon { width: 0.875rem; height: 0.875rem; transition: transform 0.15s ease; } .nav-drop.open .nav-drop-btn { color: var(--text); background: var(--surface-2); } .nav-drop.open .nav-drop-btn .icon { transform: rotate(180deg); } .nav-drop-menu { position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 60; min-width: 16rem; padding: 0.375rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); display: none; } .nav-drop.open .nav-drop-menu { display: block; } .nav-drop-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-m); color: var(--text-2); font-size: 0.875rem; } .nav-drop-menu a:hover { background: var(--surface-3); color: var(--text); } .nav-drop-menu a .icon { width: 1rem; height: 1rem; color: var(--cyan-bright); flex: none; } .header-actions { display: flex; align-items: center; gap: 0.5rem; } .lang-switch { position: relative; } .lang-switch select { appearance: none; -webkit-appearance: none; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--hairline); border-radius: var(--radius-m); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; padding: 0.4rem 1.7rem 0.4rem 2rem; cursor: pointer; } .lang-switch .icon { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); width: 0.9rem; height: 0.9rem; color: var(--text-3); pointer-events: none; } .lang-switch .chev { left: auto; right: 0.5rem; } .icon-btn { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-m); display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--hairline); transition: color 0.15s ease, border-color 0.15s ease; } .icon-btn:hover { color: var(--text); border-color: var(--border); } [data-theme="dark"] .icon-sun { display: none; } [data-theme="light"] .icon-moon { display: none; } :root:not([data-theme]) .icon-sun { display: none; } .nav-toggle { display: none; } .nav-toggle .icon-x { display: none; } .nav-toggle[aria-expanded="true"] .icon-x { display: block; } .nav-toggle[aria-expanded="true"] .icon-menu { display: none; } .mobile-nav { display: none; } .mobile-nav.open { display: block; position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49; background: var(--bg); border-bottom: 1px solid var(--hairline); padding: 0.75rem 1.5rem 1.25rem; box-shadow: var(--shadow-pop); } .mobile-nav a { display: block; padding: 0.625rem 0.25rem; color: var(--text-2); font-size: 1rem; border-bottom: 1px solid var(--hairline); } .mobile-nav a:last-child { border-bottom: 0; } .mobile-nav a:hover { color: var(--text); text-decoration: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.375rem; border-radius: var(--radius-m); font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--grad-cta); color: var(--on-grad); box-shadow: var(--glow-cta); } .btn-primary:hover:not(:disabled) { box-shadow: var(--glow-cta), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--hairline); } .btn-secondary:hover:not(:disabled) { border-color: var(--border); background: var(--surface-3); } .btn-ghost { color: var(--text-2); } .btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); } .btn-lg { height: 3rem; padding: 0 1.75rem; font-size: 1rem; } .btn-sm { height: 2.25rem; padding: 0 0.875rem; font-size: 0.8438rem; } /* ---------- Badges & pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-bright); } .pill .icon { width: 0.875rem; height: 0.875rem; } .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1875rem 0.5rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .badge::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; } .badge-full { color: var(--ok); background: var(--ok-dim); } .badge-partial { color: var(--warn); background: var(--warn-dim); } .badge-none { color: var(--err); background: var(--err-dim); } .badge-neutral { color: var(--text-3); background: var(--surface-2); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 6.5rem 0 4rem; } .hero::before { content: ""; position: absolute; top: -10rem; left: 50%; transform: translateX(-50%); width: 56rem; height: 24rem; pointer-events: none; background: radial-gradient(closest-side, rgba(79, 70, 229, 0.28), rgba(6, 182, 212, 0.1) 60%, transparent); filter: blur(48px); } [data-theme="light"] .hero::before { opacity: 0.5; } .hero-head { position: relative; text-align: center; max-width: 46rem; margin: 0 auto 2.25rem; } .hero-head .pill { margin-bottom: 1rem; } .hero-head h1 { margin: 0 0 0.875rem; } .hero-head .lead { max-width: 40rem; margin: 0 auto; } .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; color: var(--text-3); } .hero-trust span { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; } .hero-trust .icon { width: 0.875rem; height: 0.875rem; color: var(--ok); } .guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.25rem 0 0; color: var(--text-3); font-size: 0.8125rem; } .guide-meta .dot::before { content: "•"; margin-right: 0.75rem; } .guide-title-block { padding: 5.25rem 0 1.5rem; } .guide-title-block h1 { margin-top: 0.875rem; } .guide-title-block .lead { margin-top: 0.875rem; max-width: 42rem; } /* ---------- Breadcrumbs ---------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.5rem; } .crumbs a { color: var(--text-3); } .crumbs a:hover { color: var(--cyan-bright); text-decoration: none; } .crumbs .sep { opacity: 0.5; } .crumbs [aria-current] { color: var(--text); font-weight: 600; } /* ==CRITICAL:END== */ /* ---------- Converter ---------- */ .converter-card { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; } .privacy-line { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 auto 1rem; max-width: var(--container-narrow); color: var(--ok); font-size: 0.875rem; font-weight: 500; text-align: center; } .privacy-line .icon { color: var(--ok); } .mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; margin: 1rem auto 0; max-width: 26rem; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 999px; } .mode-switch button { display: flex; align-items: center; justify-content: center; gap: 0.4rem; height: 2.25rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-3); transition: background 0.15s ease, color 0.15s ease; } .mode-switch button[aria-pressed="true"] { background: var(--grad-cta); color: var(--on-grad); box-shadow: var(--glow-cta); } .mode-switch button:not([aria-pressed="true"]):hover { color: var(--text); } .dropzone { margin: 1.25rem; padding: 2.5rem 1.5rem; border: 1.5px dashed var(--border); border-radius: var(--radius-l); background: var(--surface-1); text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .dropzone:hover, .dropzone.dragover { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 7%, var(--surface-1)); box-shadow: var(--glow-card); } .dropzone-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 0.875rem; border-radius: var(--radius-l); background: var(--surface-3); display: grid; place-items: center; color: var(--cyan-bright); transition: transform 0.2s ease; } .dropzone:hover .dropzone-icon { transform: scale(1.07); } .dropzone .dz-title { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; color: var(--text); } .dropzone .dz-sub { color: var(--text-3); font-size: 0.875rem; margin-top: 0.25rem; } .dropzone .dz-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.75rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .dropzone input[type="file"] { display: none; } .converter-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding: 1rem 1.25rem; background: var(--surface-1); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .opt-group label.opt-label { display: block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.4rem; } .select-wrap, .text-wrap { display: flex; align-items: center; gap: 0.5rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-m); padding: 0 0.625rem; height: 2.375rem; transition: border-color 0.15s ease; } .select-wrap:focus-within, .text-wrap:focus-within { border-color: var(--indigo); } .select-wrap .icon, .text-wrap .icon { width: 1rem; height: 1rem; color: var(--text-3); } .select-wrap select { width: 100%; background: transparent; border: 0; color: var(--text); font-family: var(--font-mono); font-size: 0.8125rem; cursor: pointer; outline: none; } .text-wrap input { width: 100%; background: transparent; border: 0; color: var(--text); font-size: 0.875rem; outline: none; min-width: 0; } .text-wrap input::placeholder { color: var(--text-3); } /* toggle switch */ .switch-row { display: flex; align-items: flex-start; gap: 0.625rem; } .switch-row input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-row .track { flex: none; width: 2.25rem; height: 1.25rem; margin-top: 0.125rem; border-radius: 999px; background: var(--surface-4); position: relative; transition: background 0.15s ease; } .switch-row .track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 0.875rem; height: 0.875rem; border-radius: 999px; background: var(--text-2); transition: transform 0.15s ease, background 0.15s ease; } .switch-row input:checked + .track { background: var(--indigo); } .switch-row input:checked + .track::after { transform: translateX(1rem); background: #fff; } .switch-row input:focus-visible + .track { outline: 2px solid var(--cyan-bright); outline-offset: 2px; } .switch-text b { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); } .switch-text span { font-size: 0.75rem; color: var(--text-3); line-height: 1.45; display: block; } /* file queue card */ .file-card { position: relative; overflow: hidden; margin: 1.25rem; padding: 0.875rem 1rem; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-l); display: flex; align-items: center; gap: 0.875rem; } .file-card .fc-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-m); background: color-mix(in srgb, var(--indigo) 22%, transparent); display: grid; place-items: center; color: var(--accent-2); } .file-card .fc-name { font-weight: 600; font-size: 0.875rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-card .fc-meta { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--text-3); margin-top: 0.125rem; } .file-card .fc-meta .ready { color: var(--ok); display: inline-flex; align-items: center; gap: 0.3rem; } .file-card .fc-meta .ready::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; } .file-card .fc-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .file-card .fc-to { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--text-3); background: var(--surface-3); padding: 0.25rem 0.5rem; border-radius: var(--radius-s); } .file-card .fc-to b { color: var(--cyan-bright); } .file-card .fc-remove { color: var(--text-3); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-s); } .file-card .fc-remove:hover { color: var(--err); background: var(--err-dim); } .file-card .fc-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: var(--surface-4); } .file-card .fc-progress i { display: block; height: 100%; width: 0%; background: var(--grad-cta); transition: width 0.25s ease; } /* summary grid */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem; margin: 1.25rem; padding: 1rem 1.25rem; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-l); } .summary-grid .sg-item b { display: block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.2rem; } .summary-grid .sg-item span { font-size: 0.9375rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } /* progress + status */ .convert-status { margin: 0 1.25rem; padding: 0 0.25rem; } .status-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--text-2); margin-bottom: 0.5rem; } .progress-track { height: 0.375rem; border-radius: 999px; background: var(--surface-4); overflow: hidden; } .progress-track i { display: block; height: 100%; width: 0%; border-radius: 999px; background: var(--grad-cta); transition: width 0.3s ease; } .progress-track.indeterminate i { width: 35% !important; animation: slide 1.2s ease-in-out infinite alternate; } @keyframes slide { from { margin-left: 0; } to { margin-left: 65%; } } /* result & failures */ .result-box { margin: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius-l); border: 1px solid var(--hairline); } .result-ok { background: var(--ok-dim); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .result-ok .rb-head { display: flex; align-items: center; gap: 0.5rem; color: var(--ok); font-weight: 600; } .result-warn { background: var(--warn-dim); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .result-warn .rb-head { color: var(--warn); } .result-err { background: var(--err-dim); border-color: color-mix(in srgb, var(--err) 35%, transparent); } .result-err .rb-head { color: var(--err); } .rb-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .rb-body { margin-top: 0.375rem; color: var(--text-2); font-size: 0.875rem; } .fail-list { margin: 0.75rem 0 0; padding: 0; list-style: none; max-height: 11rem; overflow: auto; display: grid; gap: 0.375rem; } .fail-list li { display: flex; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.5; color: var(--text-2); } .fail-list li .icon { color: var(--err); margin-top: 0.1rem; } .convert-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; } .convert-hint { display: flex; align-items: center; gap: 0.5rem; color: var(--text-3); font-size: 0.8125rem; } .convert-hint .icon { color: var(--ok); } /* trust chips under converter — 4 items: keep 2 or 4 per row so none is orphaned */ .trust-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; margin-top: 1rem; } @media (min-width: 56rem) { .trust-chips { grid-template-columns: repeat(4, 1fr); } } .trust-chips .chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border-radius: var(--radius-m); background: var(--surface-1); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); } .trust-chips .chip .icon { width: 1rem; height: 1rem; } /* ---------- Steps ---------- */ /* 3 cards: 1 col on mobile, 3 on desktop — skip 2-col so no card is orphaned */ .steps-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 56rem) { .steps-grid { grid-template-columns: repeat(3, 1fr); } } .step-card { padding: 1.5rem; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--hairline); transition: border-color 0.2s ease, background 0.2s ease; } .step-card:hover { border-color: var(--border); background: var(--surface-3); } .step-num { width: 2rem; height: 2rem; border-radius: 999px; background: var(--indigo); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; margin-bottom: 1rem; } .step-card h3 { margin-bottom: 0.5rem; } .step-card p { color: var(--text-2); font-size: 0.9375rem; } .step-note { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--text-3); } .step-note .icon { color: var(--ok); width: 0.875rem; height: 0.875rem; } /* ---------- Cards / features ---------- */ /* 4 cards (credits): 1 / 2 / 4 columns — never 3, so no orphan card */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 40rem) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .feature-grid { grid-template-columns: repeat(4, 1fr); } } .feature-card { padding: 1.5rem; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--hairline); transition: border-color 0.2s ease; } .feature-card:hover { border-color: var(--border); } .feature-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-m); background: var(--surface-3); display: grid; place-items: center; margin-bottom: 0.875rem; } .feature-card:nth-child(3n+1) .feature-icon { color: var(--cyan-bright); } .feature-card:nth-child(3n+2) .feature-icon { color: var(--ok); } .feature-card:nth-child(3n) .feature-icon { color: var(--accent-2); } .feature-card h3 { margin-bottom: 0.4rem; font-size: 1rem; } .feature-card p { color: var(--text-2); font-size: 0.875rem; } /* ---------- Code blocks ---------- */ .code-block { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface-min); margin: 1rem 0; } .code-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.875rem; background: var(--surface-1); border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--text-2); } .code-dots { display: inline-flex; gap: 0.375rem; margin-right: 0.625rem; vertical-align: middle; } .code-dots i { width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--surface-4); } .code-head .cb-file { display: flex; align-items: center; } .copy-btn { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-3); font-family: var(--font-mono); font-size: 0.6875rem; } .copy-btn:hover { color: var(--text); } .code-block pre { margin: 0; padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.65; color: var(--text-2); } .code-block pre .c { color: var(--text-3); } .code-block pre .k { color: var(--cyan-bright); } .code-block pre .s { color: var(--ok); } .code-block pre .n { color: var(--accent-2); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--surface-2); } table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 40rem; } table.data th { text-align: left; padding: 0.875rem 1.25rem; background: var(--surface-1); border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } table.data td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--hairline); color: var(--text-2); vertical-align: top; } table.data tr:last-child td { border-bottom: 0; } table.data tbody tr:hover { background: var(--surface-3); } table.data td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; } .table-note { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--text-3); display: flex; align-items: center; gap: 0.4rem; } .table-note .icon { color: var(--warn); width: 0.9rem; height: 0.9rem; } /* ---------- FAQ accordion ---------- */ .faq-list { display: grid; gap: 0.75rem; } details.faq { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-l); transition: border-color 0.2s ease; } details.faq[open] { border-color: var(--border); } details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font-family: var(--font-head); font-weight: 600; font-size: 0.9688rem; color: var(--text); } details.faq summary::-webkit-details-marker { display: none; } details.faq summary .icon { color: var(--text-3); transition: transform 0.2s ease; } details.faq[open] summary .icon { transform: rotate(180deg); color: var(--cyan-bright); } details.faq .faq-body { padding: 0 1.25rem 1.125rem; color: var(--text-2); font-size: 0.9375rem; } details.faq .faq-body a { font-weight: 500; } /* ---------- Caveat / callouts ---------- */ .caveat { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.25rem; margin: 0 0 1.75rem; background: var(--warn-dim); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--radius-l); color: var(--text-2); font-size: 0.9375rem; } .caveat .icon { color: var(--warn); margin-top: 0.15rem; } .caveat b { color: var(--text); } .note-box { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.875rem 1rem; margin: 1rem 0; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-m); color: var(--text-2); font-size: 0.875rem; } .note-box .icon { color: var(--cyan-bright); margin-top: 0.15rem; width: 1rem; height: 1rem; } /* dismissible tip: large-pack guidance */ .tip-box .tip-link { color: var(--accent-link); font-weight: 600; white-space: nowrap; align-self: center; } .tip-box .tip-link:hover { text-decoration: underline; } .tip-close { flex: none; align-self: center; margin-left: 0.25rem; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-s); display: grid; place-items: center; color: var(--text-3); } .tip-close:hover { color: var(--text); background: var(--surface-2); } /* ---------- Prose (guides & about) ---------- */ .prose { max-width: 46rem; } .prose h2 { margin: 2.5rem 0 0.875rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); } .prose h2:first-child { margin-top: 0; } .prose h3 { margin: 1.75rem 0 0.625rem; } .prose p { margin: 0 0 1rem; color: var(--text-2); line-height: 1.7; } .prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.375rem; color: var(--text-2); display: grid; gap: 0.375rem; } .prose li::marker { color: var(--cyan-bright); font-weight: 600; } .prose a { font-weight: 500; } .prose strong { color: var(--text); } .prose .code-block { margin: 1.25rem 0; } /* numbered step list (guide pages) */ .ol-steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.75rem; } .ol-steps li { counter-increment: step; position: relative; padding: 0 0 0 3rem; min-height: 2rem; color: var(--text-2); line-height: 1.6; } .ol-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 999px; background: var(--indigo); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; } .ol-steps li b, .ol-steps li strong { color: var(--text); } .ol-steps li code { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 4px; padding: 0.05em 0.35em; } /* inline code in prose */ .prose p code, .prose li code, .prose td code { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 4px; padding: 0.05em 0.35em; font-size: 0.85em; } /* feature cards inside the narrow article column: max 2 columns */ .prose .feature-grid { grid-template-columns: 1fr; } @media (min-width: 40rem) { .prose .feature-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- Guide layout with TOC ---------- */ .guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; } .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 1.25rem; border: 1px solid var(--hairline); border-radius: var(--radius-l); background: var(--surface-2); } .toc b { display: block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.75rem; } .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; counter-reset: toc; } .toc a { display: block; padding: 0.375rem 0.625rem; border-radius: var(--radius-s); color: var(--text-2); font-size: 0.8438rem; line-height: 1.45; } .toc a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .toc-related { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hairline); display: grid; gap: 0.5rem; } .toc-related a { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; } .toc-related .icon { width: 0.875rem; height: 0.875rem; color: var(--cyan-bright); } /* related links cards at guide bottom — 3 cards: 1 or 3 columns */ .related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 40rem) { .related-grid { grid-template-columns: repeat(3, 1fr); } } .related-card { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.125rem 1.25rem; border-radius: var(--radius-l); background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text); transition: border-color 0.2s ease, transform 0.15s ease; } .related-card:hover { border-color: var(--indigo); text-decoration: none; transform: translateY(-2px); } .related-card b { font-family: var(--font-head); font-size: 0.9375rem; } .related-card span { color: var(--text-3); font-size: 0.8125rem; } .related-card .icon { color: var(--cyan-bright); } /* ---------- CTA banner ---------- */ .cta-banner { position: relative; overflow: hidden; padding: 2.75rem; border-radius: var(--radius-2xl); background: var(--surface-2); border: 1px solid var(--hairline); } .cta-banner::before { content: ""; position: absolute; right: -6rem; bottom: -8rem; width: 30rem; height: 20rem; pointer-events: none; background: radial-gradient(closest-side, rgba(79, 70, 229, 0.3), rgba(6, 182, 212, 0.12) 60%, transparent); filter: blur(40px); } [data-theme="light"] .cta-banner::before { opacity: 0.55; } .cta-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; } .cta-inner h2 { margin: 0.625rem 0; } .cta-inner .lead { max-width: 34rem; } .cta-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1rem; } .cta-checks span { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); } .cta-checks .icon { color: var(--ok); width: 0.875rem; height: 0.875rem; } .cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ---------- Sources ---------- */ .sources ul, ul.sources-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.625rem; } .sources li, ul.sources-list li { display: flex; gap: 0.625rem; align-items: baseline; color: var(--text-3); font-size: 0.875rem; } .sources li .icon, ul.sources-list li .icon { width: 0.875rem; height: 0.875rem; color: var(--text-3); flex: none; transform: translateY(2px); } .sources li a, ul.sources-list li a { font-family: var(--font-mono); font-size: 0.8125rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--surface-min); border-top: 1px solid var(--hairline); margin-top: 4rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding: 3rem 0 2rem; } .footer-brand p { color: var(--text-3); font-size: 0.8438rem; margin-top: 0.75rem; max-width: 20rem; } .footer-col b { display: block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 0.875rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .footer-col a { color: var(--text-3); font-size: 0.8438rem; } .footer-col a:hover { color: var(--cyan-bright); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0 1.75rem; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: 0.8125rem; } .footer-langs { display: flex; align-items: center; gap: 0.625rem; } .footer-langs a { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .footer-langs a:hover, .footer-langs a[aria-current] { color: var(--cyan-bright); } /* ---------- Responsive ---------- */ @media (min-width: 64rem) { .guide-layout { grid-template-columns: minmax(0, 1fr) 17rem; } .section { padding: 5.5rem 0; } } @media (max-width: 63.99rem) { .header-nav { display: none; } .nav-toggle { display: grid; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 47.99rem) { .container, .container-narrow { padding: 0 1.125rem; } .brand-name b { font-size: 0.8125rem; } .brand-name > span { font-size: 0.8rem; } .section { padding: 3.25rem 0; } .dropzone { margin: 0.875rem; padding: 1.875rem 1rem; } .file-card { flex-wrap: wrap; } .file-card .fc-actions { width: 100%; justify-content: flex-end; } .convert-actions { flex-direction: column; align-items: stretch; } .convert-actions .btn { width: 100%; } .cta-banner { padding: 1.75rem 1.25rem; } .cta-inner { flex-direction: column; align-items: flex-start; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }