/* Hermes — dark & light, glassy, minimal. System fonts, no frameworks. Theme: follows prefers-color-scheme by default; data-theme on overrides it (set by theme.js). */ :root { color-scheme: light dark; --bg: light-dark(#f4f4f9, #0a0a12); --panel: light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.04)); --panel-soft: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.03)); --hover: light-dark(rgba(26, 28, 40, 0.05), rgba(255, 255, 255, 0.06)); --hover-strong: light-dark(rgba(26, 28, 40, 0.09), rgba(255, 255, 255, 0.09)); --border: light-dark(rgba(26, 28, 40, 0.10), rgba(255, 255, 255, 0.08)); --border-soft: light-dark(rgba(26, 28, 40, 0.07), rgba(255, 255, 255, 0.07)); --border-strong: light-dark(rgba(26, 28, 40, 0.16), rgba(255, 255, 255, 0.14)); --text: light-dark(#1a1c28, #e9ebf4); --muted: light-dark(#5c6172, #9aa0b4); --icon: light-dark(#565c72, #b9bdcc); --placeholder: light-dark(#9095a8, #6b7086); --input-bg: light-dark(rgba(255, 255, 255, 0.85), rgba(0, 0, 0, 0.35)); --dropzone-bg: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.025)); --track: light-dark(rgba(26, 28, 40, 0.12), rgba(255, 255, 255, 0.08)); --accent: light-dark(#6a5ae0, #8b7cff); --accent-2: light-dark(#a855f7, #c06cff); --accent-soft: light-dark(#5b4bd6, #a99cff); --accent-tint: light-dark(rgba(106, 90, 224, 0.10), rgba(124, 108, 255, 0.14)); --accent-tint-soft: light-dark(rgba(106, 90, 224, 0.06), rgba(124, 108, 255, 0.05)); --accent-border: light-dark(rgba(106, 90, 224, 0.55), rgba(139, 124, 255, 0.60)); --accent-ring: light-dark(rgba(106, 90, 224, 0.20), rgba(124, 108, 255, 0.18)); --accent-glow: light-dark(rgba(106, 90, 224, 0.30), rgba(124, 108, 255, 0.50)); --accent-shadow: light-dark(rgba(106, 90, 224, 0.28), rgba(124, 108, 255, 0.30)); --accent-shadow-strong: light-dark(rgba(106, 90, 224, 0.36), rgba(124, 108, 255, 0.42)); --ok: light-dark(#16a34a, #4ade80); --ok-tint: light-dark(rgba(22, 163, 74, 0.10), rgba(74, 222, 128, 0.10)); --ok-border: light-dark(rgba(22, 163, 74, 0.25), rgba(74, 222, 128, 0.22)); --ok-pulse: light-dark(rgba(22, 163, 74, 0.16), rgba(74, 222, 128, 0.16)); --ok-code: light-dark(#15803d, #a5f3c5); --warn: light-dark(#b45309, #fbbf24); --warn-tint: light-dark(rgba(180, 83, 9, 0.10), rgba(251, 191, 36, 0.08)); --warn-border: light-dark(rgba(180, 83, 9, 0.30), rgba(251, 191, 36, 0.25)); --bad: light-dark(#dc2626, #ff8d8d); --bad-tint: light-dark(rgba(220, 38, 38, 0.10), rgba(255, 107, 107, 0.12)); --bad-border: light-dark(rgba(220, 38, 38, 0.35), rgba(255, 107, 107, 0.40)); --toast-bg: light-dark(rgba(255, 255, 255, 0.95), rgba(20, 20, 32, 0.92)); --toast-border: light-dark(rgba(106, 90, 224, 0.35), rgba(139, 124, 255, 0.35)); --shadow-card: light-dark(0 16px 48px rgba(30, 30, 60, 0.10), 0 16px 48px rgba(0, 0, 0, 0.28)); --shadow-toast: light-dark(0 12px 32px rgba(30, 30, 60, 0.16), 0 12px 32px rgba(0, 0, 0, 0.40)); --shadow-logo: light-dark(0 4px 16px rgba(106, 90, 224, 0.35), 0 4px 16px rgba(124, 108, 255, 0.35)); --shadow-logo-lg: light-dark(0 8px 24px rgba(106, 90, 224, 0.35), 0 8px 24px rgba(124, 108, 255, 0.40)); --wash1: light-dark(rgba(106, 90, 224, 0.10), rgba(124, 108, 255, 0.16)); --wash2: light-dark(rgba(168, 85, 247, 0.07), rgba(176, 108, 255, 0.10)); --wash3: light-dark(rgba(59, 130, 246, 0.06), rgba(70, 150, 255, 0.08)); --radius: 18px; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* Author rules must not defeat the hidden attribute (e.g. .field's display:flex). */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Decorative gradient wash behind everything */ .bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(60rem 42rem at 82% -12%, var(--wash1), transparent 60%), radial-gradient(48rem 34rem at -12% 28%, var(--wash2), transparent 60%), radial-gradient(40rem 30rem at 60% 112%, var(--wash3), transparent 60%), var(--bg); } /* ------------------------------------------------------------------ layout */ .wrap { max-width: 980px; margin: 0 auto; padding: 8px 24px 72px; } .wrap.narrow { max-width: 640px; } .top { display: flex; align-items: center; gap: 14px; padding: 14px 0 26px; } .top .spacer { flex: 1; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; } .brand .logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-logo); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-card); } .card + .card, .dropzone + .card, .queue + .card { margin-top: 20px; } h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; } h2 { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; } .hero h1 { font-size: 34px; } .hero { margin-bottom: 20px; } .sub { margin: 0; color: var(--muted); } .card > .sub { margin-bottom: 22px; } .muted { color: var(--muted); } .empty { margin: 0; padding: 14px 2px 4px; color: var(--muted); font-size: 14px; } /* ------------------------------------------------------------------ forms */ input[type="text"], input[type="number"], input[type="password"] { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; /* ≥16px prevents iOS zoom-on-focus */ color: var(--text); background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input::placeholder { color: var(--placeholder); } input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-ring); } .field { display: flex; flex-direction: column; gap: 6px; } .field span { font-size: 12.5px; color: var(--muted); } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font: inherit; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; border-radius: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; /* anchor-buttons (Add files, Download) are buttons, not links */ box-shadow: 0 6px 20px var(--accent-shadow); transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, background 0.12s ease; } /* The standalone Add files button inside the share-created box */ #share-add-files-btn { margin-top: 14px; } .btn:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 10px 28px var(--accent-shadow-strong); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn.ghost { background: var(--hover); border: 1px solid var(--border-strong); color: var(--text); box-shadow: none; } .btn.ghost:hover { background: var(--hover-strong); filter: none; box-shadow: none; } .btn.small { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: var(--icon); background: var(--hover); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; text-decoration: none; transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .icon-btn:hover { color: var(--text); background: var(--hover-strong); border-color: var(--border-strong); } .icon-btn.danger:hover { color: var(--bad); background: var(--bad-tint); border-color: var(--bad-border); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn:disabled { opacity: 0.35; cursor: default; } .icon-btn:disabled:hover { color: var(--icon); background: var(--hover); border-color: var(--border); } /* Theme toggle: small "A" badge when following the system */ .icon-btn.theme-auto { position: relative; } .icon-btn.theme-auto::after { content: "A"; position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; font-size: 8.5px; font-weight: 700; line-height: 13px; text-align: center; color: #fff; background: var(--accent); border-radius: 50%; } .icon-btn.theme-corner { position: fixed; top: 18px; right: 18px; z-index: 10; } .icon-btn.logout-corner { position: fixed; top: 18px; right: 62px; z-index: 10; } /* ------------------------------------------------------------------ badges */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.ok { color: var(--ok); background: var(--ok-tint); border: 1px solid var(--ok-border); } .badge.warn { color: var(--warn); background: var(--warn-tint); border: 1px solid var(--warn-border); } .badge.off { color: var(--muted); background: var(--hover); border: 1px solid var(--border-strong); } .badge.accent { color: var(--accent-soft); background: var(--accent-tint); border: 1px solid var(--accent-border); } /* ------------------------------------------------------------------ sender */ .link-chip { max-width: 42vw; padding: 6px 12px; font-size: 13px; color: var(--muted); background: var(--hover); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .banner { margin-bottom: 16px; padding: 12px 16px; font-size: 14px; color: var(--warn); background: var(--warn-tint); border: 1px solid var(--warn-border); border-radius: 12px; animation: rise 0.25s ease both; } .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 250px; padding: 32px 20px; text-align: center; background: var(--dropzone-bg); border: 2px dashed var(--border-strong); border-radius: 20px; cursor: pointer; outline: none; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent-border); background: var(--accent-tint-soft); } .dropzone.dragging { border-color: var(--accent); background: var(--accent-tint); transform: scale(1.01); box-shadow: 0 0 0 6px var(--accent-tint-soft); } .dz-icon { width: 54px; height: 54px; color: var(--accent); filter: drop-shadow(0 4px 16px var(--accent-glow)); animation: floaty 4s ease-in-out infinite; } .dz-icon svg { width: 100%; height: 100%; } .dz-title { margin: 12px 0 0; font-size: 19px; font-weight: 600; } .dz-hint { margin: 0; font-size: 14px; color: var(--muted); } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .queue { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .history-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .file-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; } /* Entrance animation — applied only to the first render, so polling re-renders don't replay it and make rows flash. */ .link-row.entering, .file-row.entering { animation: rise 0.25s ease both; } .link-row.entering:nth-child(2), .file-row.entering:nth-child(2) { animation-delay: 0.04s; } .link-row.entering:nth-child(3), .file-row.entering:nth-child(3) { animation-delay: 0.08s; } .link-row.entering:nth-child(4), .file-row.entering:nth-child(4) { animation-delay: 0.12s; } .link-row.entering:nth-child(5), .file-row.entering:nth-child(5) { animation-delay: 0.16s; } .link-row.entering:nth-child(6), .file-row.entering:nth-child(6) { animation-delay: 0.2s; } .fr-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--accent-soft); background: var(--accent-tint); border-radius: 11px; } .fr-icon svg { width: 18px; height: 18px; } .fr-icon.done { color: var(--ok); background: var(--ok-tint); } .fr-main { flex: 1; min-width: 0; } .fr-name { font-size: 14.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-meta { margin-top: 2px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .bar { height: 5px; margin-top: 8px; background: var(--track); border-radius: 999px; overflow: hidden; } .bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width 0.25s ease; } .file-row.error-row { border-color: var(--bad-border); } .file-row.error-row .fr-meta { color: var(--bad); } .dead { text-align: center; padding: 36px 24px; } .dead h2 { margin: 8px 0 4px; color: var(--text); text-transform: none; letter-spacing: normal; font-size: 20px; } .dead-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--warn); background: var(--warn-tint); border: 1px solid var(--warn-border); border-radius: 16px; } .dead-icon svg { width: 24px; height: 24px; } /* ------------------------------------------------------------------ dashboard */ .row { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 12px; align-items: start; } @media (max-width: 860px) { .row { grid-template-columns: 1fr 1fr; } .row .btn { grid-column: 1 / -1; } } @media (max-width: 520px) { .row { grid-template-columns: 1fr; } } .created { margin-top: 16px; padding: 16px; font-size: 14px; background: var(--ok-tint); border: 1px solid var(--ok-border); border-radius: 14px; animation: rise 0.25s ease both; } .copyrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .copyrow code { flex: 1; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--ok-code); background: var(--input-bg); border-radius: 10px; word-break: break-all; } .link-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 8px; background: var(--panel-soft); border: 1px solid var(--border-soft); border-radius: 14px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .link-row:last-child { margin-bottom: 0; } .link-row:hover { background: var(--hover); border-color: var(--accent-border); } .link-row.selected { background: var(--accent-tint); border-color: var(--accent-border); } .lr-label { font-size: 15px; font-weight: 600; } /* Key mark next to a password-protected share label */ .lr-pw { display: inline-flex; align-items: center; margin-left: 7px; color: var(--muted); vertical-align: -2px; } .lr-pw svg { width: 13px; height: 13px; } /* Password note inside the share-created box */ .pw-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); } /* Unlock form on the recipient page: password field + button */ .unlock-row { display: flex; gap: 10px; align-items: start; margin-top: 16px; } .unlock-row .field { flex: 1; } .unlock-row .btn { flex: none; } .unlock-error { margin-top: 10px; color: var(--bad); } .lr-meta { margin-top: 1px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .lr-actions { display: flex; gap: 8px; } @media (max-width: 640px) { .link-row { grid-template-columns: 1fr auto; } .lr-actions { grid-column: 1 / -1; justify-content: flex-end; } } .files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .files-head h2 { margin: 0; } .files-head > span { font-size: 13px; font-variant-numeric: tabular-nums; } .new-file { animation: pulse 2.4s ease both; } @keyframes pulse { 0% { background: var(--ok-pulse); border-color: var(--ok-border); } 100% { background: var(--panel); border-color: var(--border); } } /* ------------------------------------------------------------------ login */ .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px; } .login-card { width: 100%; max-width: 380px; padding: 36px 32px; text-align: center; } .login-card .logo { width: 46px; height: 46px; border-radius: 12px; box-shadow: var(--shadow-logo-lg); } .login-card h1 { margin: 18px 0 4px; font-size: 22px; } .login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; text-align: left; } .error { min-height: 20px; margin: 0; font-size: 13.5px; color: var(--bad); text-align: center; } .login-note { margin: 22px 0 0; font-size: 12.5px; color: var(--muted); } .shake { animation: shake 0.4s ease; } @keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ------------------------------------------------------------------ toast */ .toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; max-width: 88vw; padding: 11px 18px; font-size: 14px; color: var(--text); background: var(--toast-bg); border: 1px solid var(--toast-border); border-radius: 999px; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-toast); transition: opacity 0.2s ease, transform 0.2s ease; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ------------------------------------------------------------------ landing */ .landing { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; } .crystal-wrap { position: relative; margin-bottom: 16px; } .crystal { width: 96px; height: 96px; filter: drop-shadow(0 10px 30px rgba(240, 180, 92, 0.35)); animation: floaty 6s ease-in-out infinite; } .landing-title { margin: 0; font-size: 46px; font-weight: 700; letter-spacing: -0.02em; } .landing-dot { background: linear-gradient(135deg, #f0b45c, #e09a3e); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-sub { margin: 0; font-size: 15px; color: var(--muted); } .spark { position: absolute; font-size: 12px; color: #f0b45c; text-shadow: 0 0 8px rgba(240, 180, 92, 0.6); animation: twinkle 3s ease-in-out infinite; } .spark.s1 { top: -8px; right: -12px; } .spark.s2 { bottom: 8px; left: -16px; font-size: 9px; color: #c9b6ff; animation-delay: 1s; } .spark.s3 { top: 42%; right: -22px; font-size: 8px; color: #ffe9b0; animation-delay: 2s; } @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } } /* ------------------------------------------------------------------ motion */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }