/* Lost in Translation — "chunky sticker" theme. Thick ink outlines, hard offset shadows, playful rounded display type. Light is the default; dark is opt-in via [data-theme="dark"] on . */ :root { color-scheme: light; --bg: #fff9f0; --bg-dot: rgba(23, 22, 26, 0.07); --surface: #ffffff; --surface-alt: #fffcf4; --ink: #17161a; --muted: #6b6a73; --accent: #4f46e5; --pop: #ff5f3d; --pop-ink: #17161a; --mint: #12b886; --error: #d6336c; --shadow-col: #17161a; --bw: 3px; --radius: 14px; --shadow: 5px 5px 0 var(--shadow-col); --shadow-sm: 3px 3px 0 var(--shadow-col); --shadow-lift: 7px 7px 0 var(--shadow-col); --display: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --bg: #14131a; --bg-dot: rgba(245, 241, 232, 0.07); --surface: #1e1d26; --surface-alt: #232231; --ink: #f5f1e8; --muted: #9a97a6; --accent: #a5a0ff; --pop: #ff8663; --pop-ink: #14131a; --mint: #3ddca4; --error: #ff8fa3; --shadow-col: #08070c; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(var(--bg-dot) 1.5px, transparent 1.5px); background-size: 22px 22px; background-position: -11px -11px; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; } .app { max-width: 940px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Buttons ------------------------------------------------------------ */ .btn { font-family: var(--display); font-weight: 600; color: var(--ink); background: var(--surface); border: var(--bw) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.09s ease, box-shadow 0.09s ease, background 0.15s ease; } .btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-col); } .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; } .btn:focus-visible { outline: var(--bw) solid var(--accent); outline-offset: 3px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* --- Top bar + header --------------------------------------------------- */ .topbar { display: flex; justify-content: flex-end; } .icon-btn { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; } .icon-btn-glyph { display: block; transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1); } .icon-btn:hover .icon-btn-glyph { transform: rotate(-20deg) scale(1.12); } .header { text-align: center; margin-top: -0.5rem; } .title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 9.5vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; } .title-pop { display: inline-block; color: var(--pop); transform: rotate(-2.5deg); text-shadow: 4px 4px 0 var(--ink); } .title:hover .title-pop { animation: wobble 0.65s ease-in-out; } @keyframes wobble { 0%, 100% { transform: rotate(-2.5deg); } 30% { transform: rotate(2.5deg) scale(1.04); } 65% { transform: rotate(-5.5deg) scale(1.02); } } .tagline { margin: 0.85rem 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 2.8vw, 1.3rem); color: var(--muted); } /* --- Panels ------------------------------------------------------------- */ .panel { display: flex; flex-direction: column; gap: 0.6rem; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .panel-label { font-family: var(--display); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.09em; } .panel-label-sub { color: var(--muted); } .chip-btn { font-size: 0.9rem; padding: 0.4rem 0.95rem; white-space: nowrap; } .textbox { width: 100%; min-height: 190px; resize: vertical; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; font-family: var(--body); font-size: 1.05rem; font-weight: 400; line-height: 1.65; } .textbox-output { background: var(--surface-alt); } .textbox:focus { outline: none; border-color: var(--accent); box-shadow: 5px 5px 0 var(--accent); } /* Placeholders stay clearly greyer + italic so they never read as real text. opacity:1 is required — Firefox dims placeholders by default. */ .textbox::placeholder { color: var(--muted); opacity: 1; font-style: italic; } .credit { margin: 0; font-family: var(--display); font-weight: 500; font-size: 0.9rem; color: var(--muted); } /* --- Relay stage -------------------------------------------------------- */ .relay { margin: 0.25rem 0; } .relay-track { display: grid; /* Equal 1fr side columns pin the arrow to dead center no matter how many languages have piled up on the left. */ grid-template-columns: 1fr auto 1fr; align-items: center; height: 92px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 100%); } .relay-past, .relay-next { position: relative; height: 100%; } /* Chips are absolutely positioned and moved with transform only — layout never changes, so widths stay measurable and every move animates smoothly. */ .chip { position: absolute; top: 50%; white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; padding: 0.4em 0.9em; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink); will-change: transform, opacity; transition: transform 0.45s cubic-bezier(0.34, 1.28, 0.5, 1), opacity 0.45s ease; } .chip-past { right: 0; transform-origin: right center; } .chip-current { left: 0; transform: translate(0, -50%); transform-origin: left center; background: var(--pop); color: var(--pop-ink); box-shadow: var(--shadow-sm); animation: chip-in 0.45s cubic-bezier(0.34, 1.28, 0.5, 1) both; } @keyframes chip-in { from { transform: translate(30px, -50%) scale(0.6); opacity: 0; } to { transform: translate(0, -50%) scale(1); opacity: 1; } } .relay-arrow { position: relative; z-index: 2; height: 100%; padding: 0 1.2rem; display: flex; align-items: center; } .arrow-svg { display: block; width: clamp(70px, 13.5vw, 112px); height: auto; overflow: visible; } .arrow-shaft { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 2 18; animation: march 1.2s linear infinite; } .arrow-head { fill: var(--accent); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; } /* One full dash period (2 + 18), so the loop is seamless. */ @keyframes march { to { stroke-dashoffset: -20; } } /* Dots sprint while hops are in flight. */ .relay.is-running .arrow-shaft { animation-duration: 0.4s; } .relay-arrow.zap .arrow-head { animation: zap 0.45s ease; } @keyframes zap { 0%, 100% { transform: translateX(0) scale(1); } 40% { transform: translateX(5px) scale(1.16); } } /* --- Controls ----------------------------------------------------------- */ .controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .rounds { display: flex; align-items: center; gap: 0.7rem; font-family: var(--display); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.09em; } .rounds input { width: 94px; padding: 0.5rem; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); background: var(--surface); border: var(--bw) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); } .rounds input:focus { outline: none; border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); } .translate-btn { margin-left: auto; background: var(--pop); color: var(--pop-ink); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.07em; padding: 0.75rem 2.6rem; box-shadow: var(--shadow); } .translate-btn:hover:not(:disabled) { box-shadow: var(--shadow-lift); } .translate-btn:active:not(:disabled) { transform: translate(5px, 5px); box-shadow: none; } .translate-btn:disabled { cursor: progress; } /* --- Status ------------------------------------------------------------- */ .status { min-height: 2rem; } .progress { display: flex; align-items: center; gap: 0.9rem; } /* The display:flex above would otherwise defeat the `hidden` attribute. */ .progress[hidden] { display: none; } .progress-rail { flex: 1; height: 20px; /* Transparent, not --surface: a filled track reads as a white slab sitting on the cream page (and a light slab on the dark one). The empty groove should just be the page showing through an ink outline. */ background: transparent; border: var(--bw) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); overflow: hidden; } .progress-fill { height: 100%; width: 0; border-radius: 999px; background-color: var(--mint); background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.3) 0 8px, transparent 8px 16px ); background-size: 22.7px 22.7px; animation: barber 0.8s linear infinite; transition: width 0.35s ease; } @keyframes barber { to { background-position: 22.7px 0; } } .progress-label { margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.95rem; white-space: nowrap; } .error { margin: 0.8rem 0 0; padding: 0.7rem 1.05rem; font-family: var(--display); font-weight: 600; color: var(--error); background: var(--surface); border: var(--bw) solid var(--error); border-radius: var(--radius); } /* --- Footer ------------------------------------------------------------- */ .footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; padding-top: 1.1rem; border-top: var(--bw) solid var(--ink); font-family: var(--display); font-weight: 500; font-size: 0.95rem; } .footer a { color: var(--accent); text-decoration: none; border-bottom: 3px solid transparent; } .footer a:hover { border-bottom-color: var(--accent); } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 680px) { :root { --shadow: 4px 4px 0 var(--shadow-col); --shadow-lift: 5px 5px 0 var(--shadow-col); } .app { padding: 1.25rem 1rem 2.5rem; gap: 1.25rem; } .relay-track { height: 76px; } .chip { font-size: 0.95rem; border-width: 2px; } .textbox { min-height: 160px; } .controls { flex-direction: column; align-items: stretch; } .rounds { justify-content: space-between; } .translate-btn { margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }