/* ============================================================================ Visual theme - matte-black canvas, frosted glass panels, cyan accent used as a real functional color (buttons/links/focus/glow), Space Grotesk + JetBrains Mono. Component selectors are unchanged from before so app.js's DOM hooks keep working; only the token values and a handful of additive rules (grain, ambient glow, landing sections) are new. ============================================================================ */ :root { /* Tells the browser this page supports a dark UI, so NATIVE form chrome (select's dropdown option list, checkbox/radio ring, number-input spinner buttons, range track, scrollbars) renders with dark-appropriate colors instead of the browser's light-mode default - the part of these controls our own CSS (color/background/accent-color) cannot reach. Flipped to "light" under the [data-theme="light"] override below. */ color-scheme: dark; /* -- primitive tokens ----------------------------------------------------- */ --color-void-canvas: #08080A; /* page background */ --color-graphite: #0E0E11; /* elevated surface: header, overlays, dropdowns, cards */ --color-graphite-2: #151519; /* a step above graphite, e.g. option groups */ --color-ink-black: #08080A; /* text on filled accent surfaces */ --color-snow-white: var(--color-bone, #F3F3F0); /* legacy alias, see .btn.primary */ --color-bone: #F3F3F0; /* primary text on dark surfaces */ --color-ash: rgba(243,243,240,.60); /* secondary text, helper copy */ --color-slate: rgba(243,243,240,.38); /* muted / tertiary metadata */ --color-smoke: rgba(243,243,240,.30); /* idle/disabled control text */ --color-hairline: rgba(255,255,255,.10); /* 1px borders */ /* frosted glass panel: translucent fill + hairline, elevation via translucency and surface contrast, never a drop shadow */ --frost-fill: rgba(255,255,255,.045); --frost-fill-2: rgba(255,255,255,.075); --frost-border: rgba(255,255,255,.10); --frost-border-2: rgba(255,255,255,.20); --frost-blur: blur(16px); --tint-1: rgba(255,255,255,.030); --tint-2: rgba(255,255,255,.045); --tint-3: rgba(255,255,255,.060); --tint-4: rgba(255,255,255,.080); --panel-ring: rgba(255,255,255,.10) 0px 0px 0px 1px inset; --primary-hover: #33EBFF; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.7); --grain-opacity: .05; /* radii - large, soft, pill controls throughout */ --radius-ui: 12px; --radius-cards: 26px; --radius-panels: 32px; --radius-icons: 8px; --radius-pill: 9999px; /* type */ --font-dm-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-geist: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* -- semantic aliases, overridable at runtime via BRAND_ACCENT_COLOR/ BRAND_HIGHLIGHT_COLOR (see server.js -> GET /api/config -> applyBrand() in app.js, which sets --accent/--accent-2/--highlight as inline styles on ). Everything chromatic in this file traces back to --accent, so a deployment override actually re-skins the UI. -------- */ --accent: #00E5FF; --accent-2: #00B7CC; /* pre-JS/no-override fallback hover shade; app.js recomputes this from a custom BRAND_ACCENT_COLOR */ --highlight: #00E5FF; --accent-fg: var(--accent); /* readable-as-text variant; redefined per-theme below */ --glow: color-mix(in oklab, var(--accent) 22%, transparent); --bg: var(--color-void-canvas); --panel: var(--color-graphite); --panel-2: var(--color-graphite-2); --line: var(--frost-border); --text: var(--color-bone); --muted: var(--color-ash); --good: var(--color-bone); --warn: #e0b34d; --danger: #e5788a; --radius: var(--radius-cards); } /* ── Light theme override ────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; --color-void-canvas: #F2F2EE; --color-graphite: #FFFFFF; --color-graphite-2: #F7F7F5; --color-ink-black: #08080A; --color-bone: #0D0D0F; --color-ash: rgba(13,13,15,.62); --color-slate: rgba(13,13,15,.42); --color-smoke: rgba(13,13,15,.34); --color-hairline: rgba(8,8,10,.10); --frost-fill: rgba(8,8,10,.028); --frost-fill-2: rgba(8,8,10,.055); --frost-border: rgba(8,8,10,.10); --frost-border-2: rgba(8,8,10,.22); --tint-1: rgba(8,8,10,.035); --tint-2: rgba(8,8,10,.045); --tint-3: rgba(8,8,10,.070); --tint-4: rgba(8,8,10,.080); --panel-ring: rgba(8,8,10,.06) 0px 0px 0px 1px inset; --primary-hover: #00CFE0; --shadow: 0 1px 2px rgba(8,8,10,.06), 0 24px 60px -24px rgba(8,8,10,.22); --grain-opacity: .028; --accent-fg: color-mix(in oklab, var(--accent) 60%, black); --glow: color-mix(in oklab, var(--accent) 30%, transparent); --warn: #a15c00; --danger: #dc2626; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { position: relative; font-family: var(--font-dm-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; overflow-x: hidden; } body.overlay-open { overflow: hidden; } /* Ambient cursor-follow glow + grain texture - purely decorative, so both are pointer-events:none and skipped for prefers-reduced-motion. --mx/--my are updated by app.js on pointermove; the fallback position keeps the glow looking intentional before JS runs or on touch devices. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(620px circle at var(--mx, 60%) var(--my, 12%), var(--glow), transparent 68%); transition: background .3s linear; } body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { body::before { transition: none; } } :focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; border-radius: 4px; } /* ── Top bar ──────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 40; padding: 14px 32px; background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line); } .topbar-inner { max-width: 1360px; margin: 0 auto; } .topbar h1 { font-family: var(--font-geist); font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--color-bone); line-height: 1.2; } .topbar h1::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; } /* Wordmark link - clickable home link, with a special lowercase two-tone treatment ("size" / italic accent "it" / "down") when the deployment's BRAND_NAME is exactly "SizeItDown" (see app.js/legal.js renderBrandWordmark). Any other BRAND_NAME renders as plain text here, same as before. */ .brand-wordmark a { display: inline-flex; align-items: baseline; gap: 1px; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; } .brand-wordmark a:hover { opacity: .85; } .brand-wordmark .bw-it { font-style: italic; font-weight: 300; color: var(--accent-fg); } .tagline { margin-top: 4px; color: var(--color-ash); font-size: 13.5px; font-weight: 400; } .topbar-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .topbar-actions { display: flex; align-items: center; gap: 16px; } .site-nav { display: flex; gap: 22px; font-size: 13.5px; color: var(--color-ash); } .site-nav a { color: inherit; text-decoration: none; } .site-nav a:hover { color: var(--color-bone); } @media (max-width: 760px) { .site-nav { display: none; } } .tool-switch { color: var(--color-ash); font-size: 13px; text-decoration: none; white-space: nowrap; } .tool-switch:hover { color: var(--accent-fg); text-decoration: underline; } .tool-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; vertical-align: middle; color: var(--color-bone); background: var(--tint-3); border: 1px solid var(--frost-border); border-radius: var(--radius-pill); } /* Ad slot - stays hidden/collapsed (no reserved space, no layout shift) until app.js's renderAds() unhides it after GET /api/config reports ads enabled. */ .ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 90px; padding: 16px; background: linear-gradient(180deg, var(--frost-fill), transparent); border: 1px solid var(--line); border-radius: var(--radius-ui); text-align: center; color: var(--color-slate); font-size: 12px; } .ad-slot[hidden] { display: none; } .ad-slot::before { content: 'Advertisement'; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-slate); } .ad-slot[data-mounted] { display: block; padding: 0; background: none; } .ad-slot[data-mounted]::before { display: none; } /* Ad band - both slots together at the bottom of the hero, with a small transparency note above them ("why is there an ad here"), not just the generic per-slot label. Two side-by-side 200px blocks on desktop, stacked and shorter on mobile so they don't dominate the screen above the fold. */ .hero-ad-band { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; } .hero-ad-band-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--color-slate); text-align: center; } .hero-ad-row { display: grid; grid-template-columns: 1fr; gap: 16px; } .hero-ad-row .ad-slot { min-height: 200px; } @media (min-width: 640px) { .hero-ad-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .hero-ad-row .ad-slot { min-height: 110px; padding: 10px; } } /* Light/dark toggle - a plain icon pill, not the primary/inverted treatment, so it doesn't compete with the Compress CTA for visual weight. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; background: var(--tint-2); border: 1px solid var(--frost-border); border-radius: var(--radius-pill); color: var(--color-bone); cursor: pointer; transition: background .15s, border-color .15s; } .theme-toggle:hover { background: var(--tint-3); border-color: var(--frost-border-2); } .theme-toggle svg { width: 17px; height: 17px; stroke-width: 1.75; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ── Landing sections (hero / stats / steps / presets / formats / faq) ───── Wrap the tool, built from the same design system as everything else. 1120px column, generous vertical rhythm, JetBrains Mono for eyebrows and figures, Space Grotesk for headings. */ /* Same max-width + horizontal padding as .wrap/.topbar-inner/.site-footer below, so the hero copy's left edge lines up with the dropzone/options left edge instead of reading as a narrower, off-center block above it. */ .landing { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; padding: 0 32px; } @media (max-width: 900px) { .landing { padding: 0 16px; } } .eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-slate); } .eyebrow.accent { color: var(--accent-fg); } .eyebrow-rule { height: 1px; width: 44px; background: var(--frost-border-2); display: block; } .hero { padding: clamp(44px, 8vh, 96px) 0 clamp(28px, 4vh, 44px); display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; } .hero-copy { max-width: none; } /* Sized (and un-wrapped in the markup) to hold as one line down to ~960px viewports; below that it wraps naturally rather than overflowing. */ .hero h1 { margin: 0; font-family: var(--font-geist); font-weight: 400; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.03em; white-space: normal; } .hero h1 em { font-style: italic; font-weight: 300; color: var(--accent-fg); } .hero p.lede { margin: 18px 0 0; max-width: 60ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--color-ash); } .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .hero-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; padding: 6px 11px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--frost-fill); color: var(--color-ash); } /* ── Full-width shell (the tool itself) ──────────────────────────────────── */ .wrap { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; padding: 12px 32px 40px; display: grid; grid-template-columns: minmax(380px, 460px) 1fr; grid-template-rows: auto auto auto; grid-template-areas: "options upload" "options actions" "options results"; align-items: start; gap: 10px 28px; } @media (max-width: 900px) { .wrap { grid-template-columns: 1fr; grid-template-areas: "options" "upload" "actions" "results"; padding: 12px 16px 32px; } } .upload-col { grid-area: upload; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .action-col { grid-area: actions; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .options-panel { grid-area: options; } .results-pane { grid-area: results; min-width: 0; margin-top: 14px; } /* ── Frosted glass panel mixin (dropzone / options / progress) ───────────── */ .dropzone, .options-panel, .progress-wrap { background: var(--frost-fill); backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur); border: 1px solid var(--frost-border); } /* ── Drop zone ────────────────────────────────────────────────────────────── */ .dropzone { border-radius: var(--radius-panels); padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, padding .2s, transform .3s cubic-bezier(.16,1,.3,1); position: relative; overflow: hidden; box-shadow: var(--shadow); } .dropzone::before { content: ''; position: absolute; inset: -40% -20% auto -20%; height: 220%; background: radial-gradient(circle at 50% 0%, var(--glow), transparent 60%); pointer-events: none; } .dropzone > * { position: relative; } .dropzone.drag { border-color: var(--accent); background: var(--frost-fill-2); transform: scale(1.006); } .dropzone.has-files { padding: 16px 20px; } .dropzone.has-files .dz-icon { display: none; } .dropzone.has-files .dz-inner strong { font-size: 14px; } .dz-icon { width: 30px; height: 30px; stroke: var(--color-ash); stroke-width: 1.5; display: block; margin: 0 auto 12px; } .dz-inner strong { display: block; font-family: var(--font-geist); font-size: 18px; font-weight: 500; color: var(--color-bone); } .dz-inner span { color: var(--color-ash); font-size: 14px; } .dz-inner small { display: block; margin-top: 8px; font-family: var(--font-mono); color: var(--color-slate); font-size: 11px; letter-spacing: .04em; } .link { background: none; border: none; color: var(--accent-fg); font-weight: 500; cursor: pointer; font-family: inherit; font-size: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; } /* ── Queue list ───────────────────────────────────────────────────────────── */ .queue-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--frost-border) transparent; } .qi { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--frost-fill); backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur); border: 1px solid var(--frost-border); border-radius: var(--radius-ui); transition: border-color .15s; } .qi--compressing { border-color: var(--accent); } .qi--done { border-color: var(--frost-border); box-shadow: inset 2px 0 0 var(--accent); } .qi--error { border-color: color-mix(in srgb, var(--danger) 55%, var(--frost-border)); } .qi-progress { display: none; } .qi--compressing .qi-progress { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; } .qi--compressing .qi-progress::after { content: ''; position: absolute; top: 0; height: 100%; width: 35%; background: var(--accent); border-radius: var(--radius-pill); animation: qi-progress-slide 1.2s ease-in-out infinite; } @keyframes qi-progress-slide { 0% { left: -35%; } 100% { left: 100%; } } .qi-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-icons); background: var(--color-graphite); flex-shrink: 0; } .qi-name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qi-size { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-slate); white-space: nowrap; flex-shrink: 0; } .qi-status { flex-shrink: 0; font-size: 14px; width: 18px; text-align: center; } .qi-done { color: var(--accent-fg); } .qi-err { color: var(--danger); } .qi-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--frost-border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .qi-remove { background: none; border: none; color: var(--color-smoke); cursor: pointer; font-size: 15px; padding: 2px 5px; border-radius: var(--radius-icons); line-height: 1; flex-shrink: 0; transition: color .1s, background .1s; } .qi-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } /* ── Options panel ────────────────────────────────────────────────────────── */ .options-panel { border-radius: var(--radius-cards); overflow: hidden; } .options-summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; font-family: var(--font-geist); font-weight: 600; font-size: 15px; color: var(--color-bone); user-select: none; } .options-summary::-webkit-details-marker { display: none; } .options-summary:hover { background: var(--tint-1); } .chevron { width: 16px; height: 16px; stroke: var(--color-ash); stroke-width: 2; transition: transform .2s; } details[open] .chevron { transform: rotate(180deg); } .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 28px; padding: 4px 24px 24px; } .opt { display: flex; flex-direction: column; gap: 6px; } .opt-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--color-slate); text-transform: uppercase; letter-spacing: .16em; } .opt-help { color: var(--color-slate); font-size: 12px; line-height: 1.4; } .radios { display: flex; gap: 12px; flex-wrap: wrap; } .radios label, .checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: var(--color-bone); } .radios input, .checkbox input { accent-color: var(--accent); } .opt-label.checkbox { font-family: var(--font-dm-sans); font-weight: 500; color: var(--color-bone); text-transform: none; letter-spacing: 0; font-size: 14px; } /* Image/video settings groups - shown/hidden based on what's queued */ .opt-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 28px; padding-top: 16px; border-top: 1px solid var(--frost-border); } .opt-group[hidden] { display: none; } .opt-group-title { grid-column: 1 / -1; margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--color-bone); text-transform: uppercase; letter-spacing: .16em; } .opt-featured { grid-column: 1 / -1; } .advanced { grid-column: 1 / -1; } .advanced-summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--color-slate); text-transform: uppercase; letter-spacing: .16em; } .advanced-summary::-webkit-details-marker { display: none; } .advanced-summary:hover { color: var(--color-bone); } .advanced[open] .advanced-summary { margin-bottom: 10px; } input[type="number"], select { background: var(--tint-2); border: 1px solid var(--frost-border); color: var(--color-bone); border-radius: var(--radius-ui); padding: 9px 12px; font: inherit; font-family: var(--font-mono); font-size: 13.5px; width: 100%; transition: border-color .12s, background .12s; } input[type="number"]:focus, select:focus { outline: none; background: var(--tint-3); border-color: var(--accent); } input[type="number"]::placeholder { color: var(--color-slate); } select { cursor: pointer; font-family: var(--font-dm-sans); } /* Custom "Profile" dropdown - replaces the native