/* CensorMate — "editing studio" design language. Sticker look: chunky ink outlines + hard offset shadows on a warm paper background. Mascot: Bleep the censor bar (src/lib/mascot.js). Font: Nunito (variable, 400-900) — SIL Open Font License, bundled locally. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; src: url('fonts/nunito-latin.woff2') format('woff2'); } /* Warm light theme (default). Dark is opt-in via the header toggle, which sets data-theme="dark" on — no OS media-query auto-switching. */ :root { /* paper & surfaces */ --bg: #FFF3E6; --dot: rgba(89, 66, 60, 0.08); --card: #FFFDF9; --card-2: #FFEBD6; /* ink & text — warm cocoa, not cold plum */ --ink: #59423C; --text: #59423C; --muted: #B08D7E; /* brand */ --accent: #FFC531; --accent-soft: #FFE9BD; --on-accent: #59423C; --coral: #FF7E95; --coral-soft: #FFE4E9; --on-coral: #FFFFFF; --mint: #62CFA0; --mint-soft: #E0F6EC; --lav: #CDB4F2; --lav-soft: #F3ECFF; /* mascot */ --m-ink: #59423C; --m-body: #FFC531; --m-cup: #CDB4F2; --m-blush: #FF9EB0; --m-drop: #9BD1FF; /* shape */ --radius: 14px; --radius-lg: 20px; --outline: 2.5px; --pop: 0 5px 0 var(--ink); --pop-sm: 0 3px 0 var(--ink); --pop-card: 0 5px 0 #EFD9BF; /* big cards float on milk-tan, not ink */ --bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Warm dark: candlelit espresso, opt-in via toggle. */ :root[data-theme='dark'] { --bg: #2A211C; --dot: rgba(251, 239, 226, 0.05); --card: #3A2E27; --card-2: #46372E; --ink: #1C1511; --text: #FBEFE2; --muted: #C4A995; --accent-soft: #5C4426; --coral: #FF8FA0; --coral-soft: #543038; --mint-soft: #2F4A3C; --lav-soft: #4A3D5A; --pop-card: 0 5px 0 #1C1511; } * { box-sizing: border-box; } /* Author display rules on buttons/etc. would otherwise defeat the `hidden` attribute (author styles beat UA styles regardless of specificity). */ [hidden] { display: none !important; } body { margin: 0; font-family: 'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif; font-weight: 500; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.6px, transparent 1.6px); background-size: 24px 24px; color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } /* ---------- Mascot ---------- */ .mascot { display: inline-block; line-height: 0; } .mascot svg { width: 100%; height: 100%; } /* In dark mode Bleep's ink parts (headphone band, feet) would melt into the background — a cream sticker-cutout halo keeps the silhouette crisp. */ :root[data-theme='dark'] .mascot svg { filter: drop-shadow(2px 0 0 #FFF3E6) drop-shadow(-2px 0 0 #FFF3E6) drop-shadow(0 2px 0 #FFF3E6) drop-shadow(0 -2px 0 #FFF3E6); } /* SVG part groups (see src/lib/mascot.js) animate via transform-box so transform-origin is relative to each part's own bounding box. */ .bleep .b-all, .bleep .b-eyes, .bleep .b-arm-r, .bleep .b-cup, .bleep .b-drop { transform-box: fill-box; } /* Every mascot pops in with an overshoot when its card appears, then settles into its idle loop ("backwards" holds scale(0) during the idle's delay). */ @keyframes pop-in { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } } .mascot-hero svg { animation: pop-in 0.55s var(--bounce) backwards, bob 1.8s ease-in-out 0.55s infinite; } @keyframes groove { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } } .mascot-working svg { animation: pop-in 0.45s var(--bounce) backwards, groove 0.9s ease-in-out 0.45s infinite; } @keyframes party { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.05); } 60% { transform: translateY(-6px) scale(1.05) rotate(2deg); } } .mascot-celebrating svg { animation: pop-in 0.45s var(--bounce) backwards, party 1.1s var(--bounce) 0.45s infinite; } @keyframes droop { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } .mascot-oops svg { animation: pop-in 0.45s var(--bounce) backwards, droop 3s ease-in-out 0.45s infinite; } /* Blink: quick eyelid squash, offset timings so it feels organic. */ @keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(0.08); } } .bleep-happy .b-eyes { transform-origin: center; animation: blink 4.6s infinite; } .bleep-celebrating .b-eyes { transform-origin: center; animation: blink 3.4s infinite 1.3s; } /* Hero waves hello on hover. */ @keyframes wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-42deg) translate(2px, -5px); } 60% { transform: rotate(8deg); } } .mascot-hero:hover .b-arm-r { transform-origin: 15% 90%; animation: wave 0.9s ease-in-out; } /* Working: squash-and-stretch to the beat + headphone cups thumping. */ @keyframes squish { 0%, 100% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(1.05) scaleY(0.94); } } .mascot-working .b-all { transform-origin: 50% 100%; animation: squish 0.45s ease-in-out infinite; } @keyframes thump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } .mascot-working .b-cup { transform-origin: center; animation: thump 0.45s ease-in-out infinite; } /* Oops: the sweat drop beads up and rolls down, forever. */ @keyframes drip { 0% { transform: translateY(-2px) scale(0.5); opacity: 0; } 25% { transform: translateY(0) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(24px) scale(1); opacity: 0; } } .mascot-oops .b-drop { animation: drip 2.4s ease-in infinite; } /* Celebrating: twinkling sparkles around the mascot. */ .mascot-celebrating { position: relative; } .mascot-celebrating::before, .mascot-celebrating::after { content: '✦'; position: absolute; color: var(--accent); font-size: 17px; pointer-events: none; animation: twinkle 1.4s ease-in-out infinite; } .mascot-celebrating::before { top: -6px; left: -10px; } .mascot-celebrating::after { bottom: 8px; right: -12px; color: var(--lav); animation-delay: 0.7s; } @keyframes twinkle { 0%, 100% { transform: scale(0.4) rotate(0); opacity: 0.25; } 50% { transform: scale(1.15) rotate(40deg); opacity: 1; } } /* ---------- Header ---------- */ header { padding: 30px 16px 4px; } .masthead { width: min(760px, calc(100vw - 32px)); margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } #mascot-hero { width: 78px; height: 78px; flex-shrink: 0; } .masthead-text { flex: 1; min-width: 200px; } h1 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px; } .tagline { color: var(--muted); margin: 2px 0 0; font-size: 14px; } .plan-badge { font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.6px; border: var(--outline) solid var(--ink); transform: rotate(-2deg); } .plan-badge.free { background: var(--lav-soft); color: var(--text); } .plan-badge.pro { background: var(--accent); color: var(--on-accent); box-shadow: var(--pop-sm); } .upgrade-cta { background: var(--accent); color: var(--on-accent); font-weight: 800; } /* ---------- Layout ---------- */ main { width: min(760px, calc(100vw - 32px)); margin: 20px auto 24px; flex: 1; display: flex; flex-direction: column; gap: 22px; } .card { background: var(--card); border: var(--outline) solid var(--ink); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--pop-card); } .card h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; } .card.error { border-color: var(--coral); box-shadow: 0 5px 0 var(--coral); } .card.error pre { white-space: pre-wrap; word-break: break-word; color: var(--coral); background: var(--coral-soft); padding: 12px 14px; border-radius: var(--radius); font-size: 13px; } .error-head { display: flex; align-items: center; gap: 14px; } .error-head .mascot { width: 64px; height: 64px; flex-shrink: 0; } .hint { color: var(--muted); font-size: 13px; } /* ---------- Dropzone ---------- */ #dropzone { border: 3px dashed var(--ink); border-radius: var(--radius-lg); padding: 26px; text-align: center; cursor: pointer; background: var(--card-2); transition: transform 0.15s var(--bounce), border-color 0.15s, background 0.15s; margin-bottom: 22px; } #dropzone:hover, #dropzone.dragover { border-color: var(--accent); transform: scale(1.012); } #dropzone p { margin: 4px 0; } .drop-icon { margin-bottom: 4px; } .drop-icon svg { width: 54px; height: 40px; } #dropzone-file { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; font-weight: 700; } .badge { background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; border: 2px solid var(--ink); transform: rotate(-2deg); } /* ---------- Fields ---------- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; } .checkbox-field label { display: flex; align-items: center; gap: 7px; font-weight: 600; } .checkbox-field input[type='checkbox'] { accent-color: var(--accent); width: 16px; height: 16px; } .settings-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; margin-bottom: 22px; } .settings-row .field { margin-bottom: 0; } .settings-row .checkbox-field { grid-column: 1 / -1; } input[type='text'], input[type='number'], select { width: 100%; background: var(--card); border: var(--outline) solid var(--ink); color: var(--text); border-radius: var(--radius); padding: 9px 12px; font-size: 14px; font-family: inherit; font-weight: 600; } input:focus, select:focus { outline: 3px solid var(--accent); outline-offset: 1px; } /* ---------- Keyword chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 7px; background: var(--card); border: var(--outline) solid var(--ink); border-radius: var(--radius); padding: 8px; } .chips input { flex: 1; min-width: 160px; border: none; background: transparent; padding: 4px 6px; } .chips input:focus { outline: none; } @keyframes wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 70% { transform: rotate(2.5deg); } } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--lav-soft); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 0 var(--ink); } .chip:hover { animation: wiggle 0.35s ease-in-out; } .chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 800; padding: 0; line-height: 1; } .chip button:hover { color: var(--coral); } .keyword-tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .keyword-tools .hint:first-child { flex: 1; margin: 0; } #keyword-upload-status { color: var(--mint); font-weight: 700; white-space: nowrap; } .preset-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .preset-row select { width: auto; flex: 0 1 220px; } button.small { padding: 7px 13px; font-size: 12.5px; box-shadow: 0 2px 0 var(--ink); } button.small:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); } .pro-tag { background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; border: 2px solid var(--ink); transform: rotate(-2deg); } /* ---------- Buttons ---------- */ button, .button-link { font-family: inherit; font-size: 14.5px; font-weight: 700; border-radius: var(--radius); padding: 11px 20px; cursor: pointer; border: var(--outline) solid var(--ink); text-decoration: none; display: inline-block; color: var(--text); background: var(--card); transition: transform 0.13s var(--bounce), box-shadow 0.13s var(--bounce); } button.primary, .button-link.primary, .upgrade-cta { background: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: var(--pop-sm); } button.primary:hover, .button-link.primary:hover, .upgrade-cta:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); } button.primary:active, .button-link.primary:active, .upgrade-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); } button.primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--pop-sm); } button.ghost { background: transparent; color: var(--muted); border: 2px solid var(--muted); } button.ghost:hover { color: var(--text); border-color: var(--text); transform: translateY(-1px); } button.ghost:active { transform: translateY(1px); } #clear-file { padding: 2px 9px; border-radius: 999px; } .actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; } .gate-note { background: var(--accent-soft); border: 2px dashed var(--ink); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; font-weight: 600; } .gate-note a, .license-line a { color: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; } .license-line { margin: 14px 0 0; } /* ---------- Progress ---------- */ .progress-stage { display: flex; align-items: center; gap: 20px; } #mascot-working { width: 96px; height: 96px; flex-shrink: 0; position: relative; } .notes { position: absolute; top: 24px; right: 4px; z-index: 1; } .note { position: absolute; font-size: 18px; font-weight: 800; color: var(--lav); opacity: 0; animation: note-float 2.4s ease-out infinite; } .note:nth-child(1) { left: 0; animation-delay: 0s; } .note:nth-child(2) { left: 14px; animation-delay: 0.8s; color: var(--coral); } .note:nth-child(3) { left: -14px; animation-delay: 1.6s; color: var(--accent); } @keyframes note-float { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-34px) rotate(14deg); opacity: 0; } } .progress-copy { flex: 1; } #progress-status { font-weight: 800; font-size: 16px; display: block; margin-bottom: 8px; } .progress-track { height: 14px; background: var(--card-2); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 6px; } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: repeating-linear-gradient( -45deg, var(--accent) 0 10px, var(--accent-soft) 10px 20px ); background-size: 28px 28px; animation: candy 0.7s linear infinite; transition: width 0.2s; } @keyframes candy { to { background-position: 28px 0; } } /* ---------- Transcript ---------- */ #transcript { background: var(--card-2); border: 2px solid var(--ink); border-radius: var(--radius); padding: 16px; line-height: 2.3; max-height: 420px; overflow-y: auto; font-size: 15px; font-weight: 600; } .word { cursor: pointer; border-radius: 8px; padding: 2px 2px; transition: background 0.1s; } .word:hover { background: var(--lav-soft); box-shadow: 0 0 0 2px var(--lav); } .word.censored { background: var(--coral); color: var(--on-coral); text-decoration: line-through; text-decoration-thickness: 2px; padding: 2px 7px; border-radius: 8px; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); display: inline-block; line-height: 1.5; transform: rotate(-1deg); } .word.censored:nth-of-type(even) { transform: rotate(1deg); } .word.censored:hover { filter: brightness(1.08); } .word.selected { outline: 3px solid var(--accent); outline-offset: 1px; } .word.clip-range { background: var(--mint-soft); box-shadow: 0 0 0 2px var(--mint); } #transcript.clip-mode .word { cursor: crosshair; } /* ---------- Review tool bars (nudge + clip) ---------- */ .tool-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; background: var(--card-2); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 0 2px 0 var(--ink); font-size: 14px; font-weight: 700; } .nudge-word { background: var(--coral); color: var(--on-coral); padding: 2px 10px; border-radius: 8px; border: 2px solid var(--ink); } .nudge-group { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); } .nudge-group button { min-width: 30px; } /* ---------- Result ---------- */ .celebrate-head { display: flex; align-items: center; gap: 16px; position: relative; } #mascot-celebrate { width: 88px; height: 88px; flex-shrink: 0; } #confetti { position: absolute; inset: -20px 0 auto 0; height: 0; pointer-events: none; } #confetti i { position: absolute; top: 0; width: 9px; height: 13px; border-radius: 3px; border: 1.5px solid var(--ink); opacity: 0; animation: confetti-fall 1.5s ease-in forwards; } @keyframes confetti-fall { 0% { transform: translateY(-8px) rotate(0); opacity: 1; } 100% { transform: translateY(150px) rotate(320deg); opacity: 0; } } #preview-container { margin: 16px 0 4px; } #preview-container audio, #preview-container video { width: 100%; border-radius: var(--radius); border: var(--outline) solid var(--ink); max-height: 400px; background: #000; } /* ---------- Upgrade modal ---------- */ dialog#upgrade-modal { background: var(--card); color: var(--text); border: var(--outline) solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 7px 0 var(--ink); padding: 28px; width: min(460px, calc(100vw - 48px)); font-family: 'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif; } dialog#upgrade-modal::backdrop { background: rgba(30, 22, 54, 0.65); } dialog#upgrade-modal h2 { margin-top: 0; font-weight: 900; } #pro-features { padding-left: 20px; line-height: 1.9; margin: 10px 0 18px; font-weight: 600; } .upgrade-reason { background: var(--accent-soft); border: 2px dashed var(--ink); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; font-weight: 600; } .pricing-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .pricing-buttons a { flex: 1; min-width: 110px; text-align: center; background: var(--card-2); border: var(--outline) solid var(--ink); border-radius: var(--radius); box-shadow: var(--pop-sm); padding: 12px 8px; color: var(--text); text-decoration: none; font-weight: 700; transition: transform 0.13s var(--bounce), box-shadow 0.13s var(--bounce); } .pricing-buttons a:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); } .pricing-buttons a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); } .pricing-buttons a .price { display: block; color: var(--coral); font-weight: 900; margin-top: 4px; } .pricing-buttons a.highlight { background: var(--accent); color: var(--on-accent); } .pricing-buttons a.highlight .price { color: var(--on-accent); } .license-entry { border-top: 2px dashed var(--muted); padding-top: 16px; margin-bottom: 16px; } .license-input-row { display: flex; gap: 8px; } .license-input-row input { flex: 1; font-family: ui-monospace, monospace; font-size: 12px; } #license-status.ok { color: var(--mint); font-weight: 800; } #license-status.err { color: var(--coral); font-weight: 700; } footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .mascot svg, .mascot svg *, .mascot::before, .mascot::after, .note, .progress-fill, #confetti i { animation: none !important; } } /* --- web-only (censormate.com/app) --- */ .home-link { align-self: center; font-size: 22px; font-weight: 900; text-decoration: none; color: var(--ink); padding: 4px 10px; border-radius: 10px; } .home-link:hover { background: var(--accent-soft); }