/* ========================================= GLOBAL ========================================= */ * { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: #f4f7f5; color: #1f2937; } /* ========================================= MAIN CONTAINER ========================================= */ .container { width: 90%; max-width: 600px; margin: 100px auto; text-align: center; } /* ========================================= HEADER ========================================= */ .logo { font-size: 48px; margin-bottom: 10px; } h1 { margin: 0; font-size: 42px; } .subtitle { margin-bottom: 50px; color: #6b7280; font-size: 18px; } /* ========================================= SEARCH ========================================= */ .search-title { margin-bottom: 15px; font-size: 22px; } .search-box { display: flex; gap: 10px; } input { flex: 1; min-width: 0; padding: 16px; border: 1px solid #d1d5db; border-radius: 12px; outline: none; font-size: 16px; } input:focus { border-color: #22c55e; } /* ========================================= NORMAL BUTTONS ========================================= */ button { padding: 16px 24px; border: none; border-radius: 12px; background: #16a34a; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } button:hover { background: #15803d; } button:active { transform: scale(0.98); } /* ========================================= SEARCH SUGGESTIONS ========================================= */ .search-area { position: relative; } #suggestions { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; text-align: left; } .search-suggestions { max-height: 320px; overflow-y: auto; background: #ffffff; border: 1px solid #dce3df; border-radius: 14px; box-shadow: 0 14px 35px rgba(31, 41, 55, 0.14); } .search-suggestion { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; border: none; border-bottom: 1px solid #edf1ef; border-radius: 0; background: #ffffff; color: #1f2937; text-align: left; transform: none; } .search-suggestion:first-child { border-radius: 13px 13px 0 0; } .search-suggestion:last-child { border-bottom: none; border-radius: 0 0 13px 13px; } .search-suggestion:only-child { border-radius: 13px; } .search-suggestion:hover, .search-suggestion.is-active, .search-suggestion:focus-visible { background: #eef9f1; color: #14532d; outline: none; transform: none; } .search-suggestion:active { transform: none; } .suggestion-name { font-size: 15px; font-weight: 700; line-height: 1.3; } .search-suggestion small { flex-shrink: 0; color: #68756e; font-size: 12px; font-weight: 600; line-height: 1.3; text-align: right; } @media (max-width: 600px) { .search-suggestion { align-items: flex-start; flex-direction: column; gap: 4px; padding: 13px 14px; } .search-suggestion small { text-align: left; } } /* ========================================= ODER DIVIDER ========================================= */ .input-divider { display: flex; align-items: center; gap: 12px; width: 100%; margin: 28px 0 18px; color: #7a857f; font-size: 13px; font-weight: 600; /* Falls der Divider versehentlich innerhalb von .photo-actions liegt, nimmt er trotzdem die ganze Zeile ein. */ grid-column: 1 / -1; } .input-divider::before, .input-divider::after { content: ""; flex: 1; height: 1px; background: #dce3df; } /* ========================================= PHOTO ACTIONS ========================================= */ .photo-section { margin-top: 20px; } #photoInput, #cameraInput { display: none; } .photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 0; margin-bottom: 22px; } .photo-action { width: 100%; min-width: 0; min-height: 82px; display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: 16px; text-align: left; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, background 0.15s ease; } .photo-action:hover { transform: translateY(-2px); } .photo-action:active { transform: scale(0.98); } /* Kamera */ .photo-action-primary { border: none; background: #12a84f; color: white; box-shadow: 0 7px 18px rgba(18, 168, 79, 0.18); } .photo-action-primary:hover { background: #0f9846; } /* Galerie */ .photo-action-secondary { border: 1px solid #d8e1dc; background: white; color: #14251c; } .photo-action-secondary:hover { background: #f7faf8; } /* Photo button icon */ .photo-action-icon { flex-shrink: 0; font-size: 27px; line-height: 1; } /* Photo button text */ .photo-action-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .photo-action-text strong { font-size: 16px; line-height: 1.2; } .photo-action-text small { font-size: 12px; line-height: 1.3; opacity: 0.75; } /* ========================================= RESULT AREA ========================================= */ #result { margin-top: 30px; } .result-card { width: 100%; padding: 24px; background: white; border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); text-align: left; } .result-card h2 { margin-top: 0; } .result-card h3 { margin-bottom: 8px; } .result-card p { margin-bottom: 0; line-height: 1.6; } /* ========================================= PHOTO PREVIEW ========================================= */ .photo-preview { display: block; width: 100%; max-height: 350px; object-fit: contain; margin-top: 16px; margin-bottom: 16px; border-radius: 12px; } /* ========================================= ANALYSIS STATUS ========================================= */ .analysis-status { margin-top: 20px; text-align: center; } .analysis-status p { margin: 6px 0; } .analysis-loader { display: inline-block; margin-bottom: 6px; font-size: 32px; animation: analysisPulse 1.2s ease-in-out infinite; } @keyframes analysisPulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } } /* ========================================= FINAL RESULT ========================================= */ .final-result { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; } /* ========================================= DETECTED OBJECT ========================================= */ .detected-object { padding: 16px 18px; border-radius: 16px; background: #f6f8f7; text-align: left; } .detected-object .result-label { display: block; margin-bottom: 7px; color: #68756e; font-size: 13px; font-weight: 700; } .detected-object h3 { margin: 0; font-size: 20px; line-height: 1.3; } /* ========================================= SORTING RESULT ========================================= */ .sorting-result { padding: 16px 18px; border-radius: 16px; background: #f2f8f4; text-align: left; } .sorting-result > .result-label { display: block; margin-bottom: 8px; color: #68756e; font-size: 13px; font-weight: 700; } .sorting-category { font-size: 19px; font-weight: 700; line-height: 1.35; } /* ========================================= RESULT HINT ========================================= */ .result-hint { margin-top: 14px; padding-top: 14px; border-top: 1px solid #dfe7e2; font-size: 15px; line-height: 1.5; } /* ========================================= QUESTIONS ========================================= */ .deposit-options, .content-options, .bulky-options, .material-options { margin-top: 16px; padding: 16px; border-radius: 14px; background: white; } .deposit-options p, .content-options p, .bulky-options p, .material-options p { line-height: 1.45; } .deposit-options button, .content-options button, .bulky-options button, .material-options button { width: 100%; margin-top: 9px; padding: 12px 14px; border-radius: 11px; } /* ========================================= MOBILE ========================================= */ @media (max-width: 600px) { body { overflow-x: hidden; } /* Main page */ .container { width: 100%; max-width: 100%; margin: 55px auto; padding-left: 18px; padding-right: 18px; } main { width: 100%; max-width: 100%; } /* Header */ .logo { font-size: 42px; } h1 { font-size: 38px; } .subtitle { margin-bottom: 46px; font-size: 17px; } .search-title { font-size: 21px; } /* Search */ .search-box { width: 100%; } #searchInput { width: 100%; min-width: 0; font-size: 16px; } #searchButton { flex-shrink: 0; min-height: 48px; padding-left: 22px; padding-right: 22px; font-size: 15px; } /* Divider */ .input-divider { margin-top: 28px; margin-bottom: 18px; } /* Camera + gallery */ .photo-actions { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; } .photo-action { width: 100%; min-height: 70px; padding: 14px 16px; } .photo-action-icon { font-size: 25px; } .photo-action-text strong { font-size: 16px; } .photo-action-text small { font-size: 12px; } /* Result */ .result-card { width: 100%; max-width: 100%; padding: 18px; border-radius: 18px; } /* Analysis title */ #analysisTitle { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1.2; white-space: nowrap; } /* Photo */ .photo-preview { width: auto; max-width: 100%; max-height: 300px; margin-left: auto; margin-right: auto; object-fit: contain; } /* Final result */ .final-result { gap: 12px; margin-top: 18px; } .detected-object, .sorting-result { width: 100%; padding: 15px; border-radius: 14px; } .detected-object h3 { font-size: 18px; line-height: 1.35; } .sorting-category { font-size: 17px; line-height: 1.4; } .result-hint { font-size: 14px; line-height: 1.5; } /* Questions */ .deposit-options, .content-options, .bulky-options, .material-options { padding: 14px; border-radius: 13px; } .deposit-options button, .content-options button, .bulky-options button, .material-options button { min-height: 48px; font-size: 14px; } /* Analysis */ .analysis-status { margin-top: 16px; } .analysis-loader { font-size: 29px; } } /* ========================================= VERY SMALL PHONES ========================================= */ @media (max-width: 380px) { .container { padding-left: 12px; padding-right: 12px; } h1 { font-size: 34px; } .subtitle { font-size: 16px; } .search-box { gap: 8px; } #searchButton { padding-left: 17px; padding-right: 17px; } #analysisTitle { font-size: 18px; } /* ========================================= MATERIAL QUESTION ========================================= */ .material-options { width: 100%; margin-top: 16px; padding: 16px; border-radius: 14px; background: #ffffff; text-align: left; } .material-options p { margin-top: 0; margin-bottom: 12px; line-height: 1.45; } .material-options button { display: block; width: 100%; min-height: 48px; margin-top: 9px; padding: 12px 14px; border-radius: 11px; text-align: center; line-height: 1.3; white-space: normal; } .material-options button:first-of-type { margin-top: 14px; } /* ========================================= MATERIAL QUESTION — MOBILE ========================================= */ @media (max-width: 600px) { .material-options { padding: 14px; border-radius: 13px; } .material-options button { min-height: 48px; font-size: 14px; } } } /* ========================================= BETA FEEDBACK ========================================= */ .feedback-box { width: 100%; padding: 16px 18px; border: 1px solid #dfe7e2; border-radius: 16px; background: #ffffff; text-align: left; } .feedback-title, .feedback-question, .feedback-thanks { margin: 0; } .feedback-title, .feedback-question { font-size: 15px; font-weight: 700; line-height: 1.4; } .feedback-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .feedback-button, .feedback-reason-button { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 11px; font-size: 14px; } .feedback-button-negative { border: 1px solid #d8e1dc; background: #ffffff; color: #1f2937; } .feedback-button-negative:hover { background: #f6f8f7; } #feedbackDetails { margin-top: 12px; } .feedback-reason-button { display: block; margin-top: 8px; border: 1px solid #d8e1dc; background: #f6f8f7; color: #1f2937; text-align: left; } .feedback-reason-button:hover { background: #eef3f0; } .feedback-thanks { color: #166534; font-size: 15px; font-weight: 700; line-height: 1.4; } @media (max-width: 600px) { .feedback-box { padding: 14px; border-radius: 14px; } .feedback-button, .feedback-reason-button { min-height: 48px; } } @media (max-width: 380px) { .feedback-actions { grid-template-columns: 1fr; } } /* ========================================================= REDESIGN V1 — CLEAN ECO + FRIENDLY MOTION Home + search + photo actions + loading animation ========================================================= */ :root { --wd-green-950: #123c2b; --wd-green-900: #174b35; --wd-green-800: #1f6846; --wd-green-700: #238653; --wd-green-600: #2ca762; --wd-green-500: #3dbb72; --wd-green-200: #cfe9d9; --wd-green-100: #e8f5ed; --wd-green-050: #f3faf6; --wd-cream: #fbfaf5; --wd-warm: #f5f1e7; --wd-amber: #e2a43a; --wd-text: #183126; --wd-muted: #68786f; --wd-line: #dce8e0; --wd-white: #ffffff; --wd-shadow-soft: 0 18px 55px rgba(25, 68, 48, 0.09); --wd-shadow-card: 0 12px 34px rgba(25, 68, 48, 0.10); } html { min-height: 100%; background: var(--wd-cream); } body { min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 15% 4%, rgba(80, 180, 112, 0.13), transparent 28rem), radial-gradient(circle at 90% 24%, rgba(230, 192, 100, 0.10), transparent 24rem), linear-gradient(180deg, #fbfcf8 0%, #f5f8f3 55%, #f8f7f1 100%); color: var(--wd-text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } .ambient-shape { position: fixed; z-index: -1; border-radius: 999px; filter: blur(2px); pointer-events: none; } .ambient-shape-one { width: 260px; height: 260px; top: -100px; left: -95px; background: rgba(58, 174, 103, 0.08); } .ambient-shape-two { width: 340px; height: 340px; top: 420px; right: -210px; background: rgba(230, 184, 80, 0.07); } .container { width: min(92%, 720px); max-width: 720px; margin: 0 auto; padding: 54px 0 34px; text-align: center; } /* --------------------------------------------------------- HERO / BRAND --------------------------------------------------------- */ .hero { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; } .brand-scene { position: relative; width: 176px; height: 118px; margin-bottom: 2px; } .brand-recycle { position: absolute; z-index: 1; left: 50%; bottom: 32px; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid rgba(44, 167, 98, 0.16); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eef9f2 64%, #dcefe4 100%); box-shadow: 0 12px 25px rgba(35, 134, 83, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); font-size: 43px; line-height: 1; transform: translate(-50%, 38px) scale(0.88); opacity: 0; animation: brandRecycleRise 950ms cubic-bezier(0.16, 1, 0.3, 1) 160ms forwards, brandRecycleFloat 4s ease-in-out 1.15s infinite; } .brand-recycle::after { content: ""; position: absolute; z-index: -1; width: 96px; height: 28px; bottom: -20px; left: 50%; border-radius: 50%; background: rgba(25, 86, 54, 0.12); filter: blur(9px); transform: translateX(-50%); } @keyframes brandRecycleRise { 0% { transform: translate(-50%, 38px) scale(0.88); opacity: 0; } 72% { transform: translate(-50%, -5px) scale(1.03); opacity: 1; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } } @keyframes brandRecycleFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } } .brand-bin { position: absolute; z-index: 2; bottom: 8px; width: 55px; height: 64px; animation: brandBinsEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .brand-bin-left { left: 24px; transform: rotate(-3deg); } .brand-bin-right { right: 24px; transform: rotate(3deg); animation-delay: 70ms; } @keyframes brandBinsEnter { from { transform: translateY(14px) scale(0.94); opacity: 0; } to { opacity: 1; } } .brand-bin-lid { position: absolute; z-index: 2; top: 0; left: 5px; width: 46px; height: 10px; border-radius: 6px 6px 4px 4px; background: var(--wd-green-900); box-shadow: 0 3px 5px rgba(17, 59, 39, 0.12); } .brand-bin-lid::before { content: ""; position: absolute; width: 18px; height: 5px; left: 14px; top: -5px; border-radius: 5px 5px 0 0; background: var(--wd-green-900); } .brand-bin-body { position: absolute; top: 8px; left: 8px; width: 40px; height: 49px; border-radius: 5px 5px 11px 11px; background: linear-gradient(135deg, #2b7250 0%, #1c4f39 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 16px rgba(22, 73, 49, 0.14); } .brand-bin-right .brand-bin-lid { background: #8b7451; } .brand-bin-right .brand-bin-lid::before { background: #8b7451; } .brand-bin-right .brand-bin-body { background: linear-gradient(135deg, #b49a70 0%, #7f6949 100%); } .brand-bin-body::after { content: ""; position: absolute; left: 9px; top: 10px; width: 22px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); box-shadow: 0 8px 0 rgba(255, 255, 255, 0.18), 0 16px 0 rgba(255, 255, 255, 0.12); } .brand-bin-wheel { position: absolute; z-index: 3; bottom: 0; width: 9px; height: 9px; border: 2px solid #eff5f0; border-radius: 50%; background: #243b31; } .brand-bin-wheel-left { left: 10px; } .brand-bin-wheel-right { right: 8px; } .brand-copy { animation: heroCopyEnter 700ms ease 180ms both; } @keyframes heroCopyEnter { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .hero-kicker { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; padding: 6px 11px; border: 1px solid rgba(44, 167, 98, 0.16); border-radius: 999px; background: rgba(232, 245, 237, 0.72); color: var(--wd-green-800); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } h1 { margin: 0; color: var(--wd-green-950); font-size: clamp(40px, 8vw, 54px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; } h1 span { color: var(--wd-green-600); } .subtitle { margin: 12px 0 0; color: var(--wd-muted); font-size: 17px; line-height: 1.5; } /* --------------------------------------------------------- HOME INPUT CARD --------------------------------------------------------- */ .input-card { position: relative; padding: 25px; border: 1px solid rgba(210, 226, 216, 0.92); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 253, 250, 0.94)); box-shadow: var(--wd-shadow-soft); text-align: left; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: homeCardEnter 750ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both; } @keyframes homeCardEnter { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .input-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .input-card-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--wd-green-100); color: var(--wd-green-800); font-size: 28px; font-weight: 700; line-height: 1; } .search-title { margin: 0; color: var(--wd-text); font-size: 19px; font-weight: 800; line-height: 1.25; } .search-description { margin: 4px 0 0; color: var(--wd-muted); font-size: 13px; line-height: 1.45; } .search-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; } #searchInput { width: 100%; min-height: 56px; padding: 0 17px; border: 1px solid var(--wd-line); border-radius: 16px; background: #fbfcfa; color: var(--wd-text); font-size: 16px; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } #searchInput::placeholder { color: #8a9790; } #searchInput:focus { border-color: rgba(44, 167, 98, 0.72); background: #ffffff; box-shadow: 0 0 0 4px rgba(44, 167, 98, 0.10), 0 8px 22px rgba(29, 100, 62, 0.07); } #searchButton { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border-radius: 16px; background: linear-gradient(135deg, var(--wd-green-700), var(--wd-green-600)); box-shadow: 0 10px 22px rgba(35, 134, 83, 0.20); font-size: 15px; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; } #searchButton:hover { background: linear-gradient(135deg, var(--wd-green-800), var(--wd-green-600)); box-shadow: 0 13px 26px rgba(35, 134, 83, 0.24); transform: translateY(-1px); } #searchButton:active { transform: translateY(0) scale(0.985); } .search-button-arrow { display: inline-block; font-size: 20px; font-weight: 400; transition: transform 180ms ease; } #searchButton:hover .search-button-arrow { transform: translateX(3px); } .search-area { position: relative; } #suggestions { top: calc(100% + 9px); } .search-suggestions { overflow: hidden; border: 1px solid var(--wd-line); border-radius: 16px; box-shadow: 0 18px 44px rgba(24, 66, 46, 0.14); } .search-suggestion { min-height: 54px; } .search-suggestion:hover, .search-suggestion.is-active, .search-suggestion:focus-visible { background: var(--wd-green-050); color: var(--wd-green-900); } /* --------------------------------------------------------- DIVIDER + PHOTO ACTIONS --------------------------------------------------------- */ .input-divider { gap: 14px; margin: 22px 0 15px; color: #87938c; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .input-divider::before, .input-divider::after { background: linear-gradient(90deg, transparent, var(--wd-line)); } .input-divider::after { background: linear-gradient(90deg, var(--wd-line), transparent); } .photo-section { margin-top: 0; } .photo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; } .photo-action { position: relative; min-height: 86px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px 15px; border-radius: 18px; box-shadow: none; overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; } .photo-action::before { content: ""; position: absolute; width: 90px; height: 90px; top: -55px; right: -40px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); pointer-events: none; } .photo-action:hover { transform: translateY(-3px); } .photo-action:active { transform: translateY(0) scale(0.988); } .photo-action-primary { border: 1px solid transparent; background: linear-gradient(135deg, var(--wd-green-800), var(--wd-green-600)); color: #ffffff; box-shadow: 0 10px 24px rgba(35, 134, 83, 0.18); } .photo-action-primary:hover { background: linear-gradient(135deg, var(--wd-green-900), var(--wd-green-600)); box-shadow: 0 14px 28px rgba(35, 134, 83, 0.22); } .photo-action-secondary { border: 1px solid var(--wd-line); background: #f8fbf8; color: var(--wd-text); } .photo-action-secondary:hover { border-color: #c9ddcf; background: #ffffff; box-shadow: 0 12px 24px rgba(27, 80, 52, 0.08); } .photo-action-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, 0.13); font-size: 22px; } .photo-action-secondary .photo-action-icon { background: var(--wd-green-100); } .photo-action-text { gap: 4px; } .photo-action-text strong { font-size: 15px; font-weight: 800; } .photo-action-text small { font-size: 11px; font-weight: 500; opacity: 0.72; } .photo-action-chevron { position: relative; z-index: 1; font-size: 26px; font-weight: 300; line-height: 1; opacity: 0.7; transition: transform 180ms ease; } .photo-action:hover .photo-action-chevron { transform: translateX(3px); } /* --------------------------------------------------------- RESULT ZONE / CARDS --------------------------------------------------------- */ #result, .result-zone { margin-top: 22px; } .result-card { border: 1px solid rgba(214, 227, 219, 0.9); border-radius: 24px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--wd-shadow-card); animation: resultCardEnter 420ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes resultCardEnter { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .result-card h2 { color: var(--wd-green-950); font-size: 22px; letter-spacing: -0.02em; } .detected-object { border: 1px solid #e6ece8; border-radius: 18px; background: #f8faf8; } .sorting-result { border: 1px solid #dcebe1; border-radius: 18px; background: linear-gradient(180deg, #eff9f2 0%, #f6fbf7 100%); } .sorting-category { color: var(--wd-green-900); } .result-hint { border-top-color: #d9e8de; color: #405348; } .photo-preview { border: 1px solid #e3ebe6; border-radius: 18px; background: #f8faf8; box-shadow: 0 8px 22px rgba(27, 73, 49, 0.06); } /* --------------------------------------------------------- NEW LOADING ANIMATION Existing app.js can keep:
♻️
--------------------------------------------------------- */ .result-card:has(.analysis-loader) { overflow: hidden; padding-top: 26px; background: radial-gradient(circle at 50% 25%, rgba(72, 183, 112, 0.10), transparent 15rem), rgba(255, 255, 255, 0.97); } .result-card:has(.analysis-loader) h2 { text-align: center; } .analysis-status { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 13px; padding: 12px 0 8px; text-align: center; } .analysis-status p { max-width: 380px; margin: 4px auto; color: var(--wd-muted); } .analysis-status p strong { color: var(--wd-text); font-size: 17px; } .analysis-loader { position: relative; isolation: isolate; display: grid; place-items: center; width: 126px; height: 126px; margin: 2px auto 18px; border: 1px solid rgba(44, 167, 98, 0.10); border-radius: 50%; background: radial-gradient(circle, #ffffff 0 34%, #edf8f1 35% 57%, rgba(232, 245, 237, 0.35) 58% 100%); box-shadow: 0 18px 42px rgba(32, 111, 67, 0.11), inset 0 0 0 9px rgba(255, 255, 255, 0.42); color: var(--wd-green-700); font-size: 34px; line-height: 1; animation: none; } .analysis-loader::before, .analysis-loader::after { position: absolute; display: grid; place-items: center; border-radius: 50%; pointer-events: none; } .analysis-loader::before { content: "↻"; width: 118px; height: 118px; color: var(--wd-green-600); font-family: Arial, sans-serif; font-size: 74px; font-weight: 300; line-height: 1; animation: analysisRotateCW 2.15s linear infinite; } .analysis-loader::after { content: "↺"; width: 76px; height: 76px; color: rgba(226, 164, 58, 0.75); font-family: Arial, sans-serif; font-size: 43px; font-weight: 300; line-height: 1; animation: analysisRotateCCW 1.55s linear infinite; } @keyframes analysisRotateCW { to { transform: rotate(360deg); } } @keyframes analysisRotateCCW { to { transform: rotate(-360deg); } } /* --------------------------------------------------------- QUESTIONS — light first-pass polish --------------------------------------------------------- */ .deposit-options, .content-options, .bulky-options, .material-options { border: 1px solid #e1ebe4; border-radius: 18px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 7px 18px rgba(28, 73, 49, 0.05); } .deposit-options button, .content-options button, .bulky-options button, .material-options button { min-height: 51px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(135deg, var(--wd-green-800), var(--wd-green-600)); box-shadow: 0 7px 16px rgba(35, 134, 83, 0.13); transition: transform 170ms ease, box-shadow 170ms ease, background 170ms ease; } .deposit-options button:hover, .content-options button:hover, .bulky-options button:hover, .material-options button:hover { background: linear-gradient(135deg, var(--wd-green-900), var(--wd-green-600)); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(35, 134, 83, 0.17); } /* --------------------------------------------------------- FEEDBACK --------------------------------------------------------- */ .feedback-box { border-color: #e1ebe4; border-radius: 18px; box-shadow: 0 8px 22px rgba(29, 73, 49, 0.05); } .feedback-button, .feedback-reason-button { border-radius: 13px; } .feedback-button-positive { background: linear-gradient(135deg, var(--wd-green-800), var(--wd-green-600)); } .feedback-button-negative { border: 1px solid #dce5df; background: #fafcfb; color: var(--wd-text); } /* --------------------------------------------------------- FOOTNOTE --------------------------------------------------------- */ .home-footnote { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; color: #7a887f; font-size: 12px; font-weight: 600; } .home-footnote span { font-size: 15px; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 600px) { .container { width: 100%; max-width: 100%; margin: 0 auto; padding: 36px 16px 28px; } .hero { margin-bottom: 22px; } .brand-scene { width: 160px; height: 108px; } .brand-bin-left { left: 20px; } .brand-bin-right { right: 20px; } h1 { font-size: clamp(39px, 12vw, 49px); } .subtitle { margin-top: 10px; font-size: 15px; } .input-card { padding: 18px; border-radius: 22px; } .input-card-heading { gap: 11px; margin-bottom: 15px; } .input-card-icon { width: 40px; height: 40px; border-radius: 13px; font-size: 25px; } .search-title { font-size: 17px; } .search-description { font-size: 12px; } .search-box { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } #searchInput { min-height: 53px; padding: 0 14px; border-radius: 15px; font-size: 15px; } #searchButton { min-height: 53px; padding: 0 15px; border-radius: 15px; font-size: 14px; } .search-button-arrow { display: none; } .input-divider { margin-top: 20px; margin-bottom: 14px; } .photo-actions { grid-template-columns: 1fr; gap: 10px; } .photo-action { min-height: 76px; padding: 13px 14px; } .photo-action-icon { width: 40px; height: 40px; } #result, .result-zone { margin-top: 16px; } .result-card { padding: 18px; border-radius: 21px; } .result-card h2 { font-size: 20px; } .analysis-loader { width: 112px; height: 112px; } .analysis-loader::before { width: 105px; height: 105px; font-size: 66px; } .analysis-loader::after { width: 68px; height: 68px; font-size: 39px; } .photo-preview { max-height: 310px; } .home-footnote { margin-top: 15px; font-size: 11px; } } @media (max-width: 380px) { .container { padding-left: 12px; padding-right: 12px; } .input-card { padding: 15px; } .search-box { grid-template-columns: 1fr; } #searchButton { width: 100%; } .input-card-heading { align-items: flex-start; } .brand-scene { transform: scale(0.93); transform-origin: center bottom; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================= REDESIGN V2 — LIVELIER BUTTONS + OUTER-ORBIT LOADER ========================================================= */ /* Smooth tactile feel for interactive controls */ button { -webkit-tap-highlight-color: transparent; transform-origin: center; } button:focus-visible { outline: 3px solid rgba(44, 167, 98, 0.20); outline-offset: 3px; } #searchButton, .photo-action, #useAiTextButton, #usePhotoButton, #searchAgainButton, .deposit-options button, .content-options button, .bulky-options button, .material-options button, .feedback-button, .feedback-reason-button { transition: transform 260ms cubic-bezier(0.2, 0.85, 0.25, 1), box-shadow 260ms cubic-bezier(0.2, 0.85, 0.25, 1), background 260ms ease, border-color 260ms ease, color 260ms ease, filter 260ms ease; } #searchButton:active, .photo-action:active, #useAiTextButton:active, #usePhotoButton:active, #searchAgainButton:active, .deposit-options button:active, .content-options button:active, .bulky-options button:active, .material-options button:active, .feedback-button:active, .feedback-reason-button:active { transform: translateY(1px) scale(0.965); transition-duration: 90ms; } /* --------------------------------------------------------- “NOTHING FOUND” ACTIONS --------------------------------------------------------- */ .result-card:has(#useAiTextButton) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 22px; } .result-card:has(#useAiTextButton) > h2, .result-card:has(#useAiTextButton) > p { grid-column: 1 / -1; } .result-card:has(#useAiTextButton) > h2 { margin-bottom: 4px; } .result-card:has(#useAiTextButton) > p { margin: 0 0 8px; color: #506158; line-height: 1.55; } #useAiTextButton, #usePhotoButton, #searchAgainButton { position: relative; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 13px 16px; border-radius: 16px; font-size: 14px; line-height: 1.25; overflow: hidden; animation: fallbackActionEnter 430ms cubic-bezier(0.16, 1, 0.3, 1) both; } #useAiTextButton { grid-column: 1 / -1; min-height: 60px; background: linear-gradient(135deg, var(--wd-green-800), var(--wd-green-600)); color: #ffffff; box-shadow: 0 11px 24px rgba(35, 134, 83, 0.20); } #useAiTextButton::after { content: "→"; margin-left: auto; font-size: 20px; font-weight: 400; transition: transform 240ms cubic-bezier(0.2, 0.85, 0.25, 1); } #useAiTextButton:hover { background: linear-gradient(135deg, var(--wd-green-900), var(--wd-green-600)); box-shadow: 0 15px 30px rgba(35, 134, 83, 0.24); transform: translateY(-2px); } #useAiTextButton:hover::after { transform: translateX(4px); } #usePhotoButton { border: 1px solid #cfe3d5; background: linear-gradient(180deg, #f2faf4 0%, #ecf7ef 100%); color: var(--wd-green-900); box-shadow: 0 7px 17px rgba(34, 105, 67, 0.07); animation-delay: 55ms; } #usePhotoButton:hover { border-color: #afd3bb; background: #ffffff; box-shadow: 0 11px 23px rgba(34, 105, 67, 0.11); transform: translateY(-2px); } #searchAgainButton { border: 1px solid #dfe7e2; background: #ffffff; color: #405348; box-shadow: 0 6px 14px rgba(31, 69, 48, 0.04); animation-delay: 105ms; } #searchAgainButton:hover { border-color: #cad8cf; background: #f8faf8; color: var(--wd-green-900); box-shadow: 0 10px 21px rgba(31, 69, 48, 0.08); transform: translateY(-2px); } @keyframes fallbackActionEnter { from { transform: translateY(10px) scale(0.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* --------------------------------------------------------- LOADER V2 — arrows travel around the OUTER circle app.js still keeps:
♻️
--------------------------------------------------------- */ .analysis-loader { width: 148px; height: 148px; margin-bottom: 20px; border: 1px solid rgba(44, 167, 98, 0.12); background: radial-gradient(circle, #ffffff 0 28%, #edf8f1 29% 48%, transparent 49% 55%, rgba(44, 167, 98, 0.10) 56% 57%, rgba(239, 249, 242, 0.64) 58% 100% ); box-shadow: 0 18px 42px rgba(32, 111, 67, 0.10), inset 0 0 0 10px rgba(255, 255, 255, 0.42); font-size: 32px; animation: loaderSoftBreathe 2.8s ease-in-out infinite; } .analysis-loader::before, .analysis-loader::after { top: 50%; left: 50%; width: 134px; height: 134px; display: flex; align-items: flex-start; justify-content: center; padding-top: 0; background: transparent; transform-origin: 50% 50%; } .analysis-loader::before { content: "↻"; color: var(--wd-green-700); font-size: 31px; font-weight: 400; animation: loaderOrbitClockwise 2.2s linear infinite; } .analysis-loader::after { content: "↺"; color: #d89b34; font-size: 23px; font-weight: 400; animation: loaderOrbitCounterClockwise 2.75s linear infinite; } @keyframes loaderOrbitClockwise { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes loaderOrbitCounterClockwise { from { transform: translate(-50%, -50%) rotate(180deg); } to { transform: translate(-50%, -50%) rotate(-180deg); } } @keyframes loaderSoftBreathe { 0%, 100% { box-shadow: 0 18px 42px rgba(32, 111, 67, 0.09), inset 0 0 0 10px rgba(255, 255, 255, 0.42); } 50% { box-shadow: 0 22px 48px rgba(32, 111, 67, 0.14), 0 0 0 7px rgba(66, 181, 110, 0.045), inset 0 0 0 10px rgba(255, 255, 255, 0.50); } } /* --------------------------------------------------------- QUESTION / FEEDBACK MICRO-MOTION --------------------------------------------------------- */ .deposit-options, .content-options, .bulky-options, .material-options, .feedback-box { animation: softSectionEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both; } .deposit-options button, .content-options button, .bulky-options button, .material-options button { position: relative; overflow: hidden; } .deposit-options button:hover, .content-options button:hover, .bulky-options button:hover, .material-options button:hover { transform: translateY(-2px); } .feedback-button:hover, .feedback-reason-button:hover { transform: translateY(-1px); } @keyframes softSectionEnter { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* --------------------------------------------------------- V2 RESPONSIVE TUNING --------------------------------------------------------- */ @media (max-width: 600px) { .analysis-loader { width: 130px; height: 130px; font-size: 29px; } .analysis-loader::before, .analysis-loader::after { width: 118px; height: 118px; } .analysis-loader::before { font-size: 28px; } .analysis-loader::after { font-size: 21px; } } @media (max-width: 460px) { .result-card:has(#useAiTextButton) { grid-template-columns: 1fr; } .result-card:has(#useAiTextButton) > h2, .result-card:has(#useAiTextButton) > p, #useAiTextButton { grid-column: 1; } #useAiTextButton, #usePhotoButton, #searchAgainButton { width: 100%; } } /* ========================================================= LOADER V3 — according to Arthur's sketch - central recycle symbol rotates CLOCKWISE on the small radius - one large circular arrow rotates COUNTER-CLOCKWISE outside - annotation arrows from the sketch are NOT part of the animation ========================================================= */ .analysis-loader { color: transparent; font-size: 0; animation: loaderSoftBreathe 2.8s ease-in-out infinite; } .analysis-loader::before { content: "♻️"; top: 50%; left: 50%; width: 62px; height: 62px; display: grid; place-items: center; padding: 0; color: var(--wd-green-800); background: transparent; font-family: "Segoe UI Symbol", "Noto Sans Symbols", Arial, sans-serif; font-size: 42px; font-weight: 400; line-height: 1; transform-origin: 50% 50%; animation: recycleLogoClockwise 1.85s linear infinite; } .analysis-loader::after { content: "↺"; top: 50%; left: 50%; width: 128px; height: 128px; display: grid; place-items: center; padding: 0; color: rgba(31, 132, 74, 0.86); background: transparent; font-family: Arial, sans-serif; font-size: 104px; font-weight: 300; line-height: 1; transform-origin: 50% 50%; animation: outerArrowCounterClockwise 3.15s linear infinite; } @keyframes recycleLogoClockwise { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes outerArrowCounterClockwise { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } } @media (max-width: 600px) { .analysis-loader::before { width: 56px; height: 56px; font-size: 38px; } .analysis-loader::after { width: 114px; height: 114px; font-size: 92px; } } /* ========================================================= REDESIGN V4 Fluid loader + modern question / feedback cards ========================================================= */ /* --------------------------------------------------------- LOADER V4 — three independent arrows floating in sequence No rigid recycle-logo rotation. No outer arrow. --------------------------------------------------------- */ .analysis-loader { position: relative; width: 150px; height: 150px; display: block; margin: 8px auto 26px; border: 1px solid rgba(53, 145, 91, 0.11); border-radius: 50%; background: radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 34%, rgba(232, 248, 238, 0.86) 35% 48%, rgba(229, 247, 236, 0.34) 49% 62%, rgba(255, 255, 255, 0) 63% ); box-shadow: 0 18px 44px rgba(31, 119, 70, 0.09), 0 0 0 10px rgba(228, 246, 235, 0.34), 0 0 0 20px rgba(228, 246, 235, 0.15); color: transparent; font-size: 0; isolation: isolate; animation: loaderHaloBreathe 2.8s ease-in-out infinite; } /* Hide every loader implementation from V1/V2/V3. */ .analysis-loader::before, .analysis-loader::after { content: none !important; animation: none !important; } .analysis-loader .loader-core-glow { position: absolute; z-index: 0; top: 50%; left: 50%; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 255, 255, 0.98) 0 36%, rgba(211, 242, 223, 0.82) 66%, rgba(211, 242, 223, 0) 100% ); transform: translate(-50%, -50%); animation: loaderCoreBreathe 2.4s ease-in-out infinite; } .analysis-loader .loader-arrow { position: absolute; z-index: 2; top: 0; left: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-family: Arial, sans-serif; font-size: 29px; font-weight: 800; line-height: 1; text-shadow: 0 4px 12px rgba(21, 101, 52, 0.12); offset-path: circle(46px at 75px 75px); offset-rotate: auto; animation: loaderArrowOrbit 3.15s linear infinite, loaderArrowFloat 1.05s ease-in-out infinite alternate; } .analysis-loader .loader-arrow-one { color: #176b3a; animation-delay: 0s, 0s; } .analysis-loader .loader-arrow-two { color: #35a35f; animation-delay: -1.05s, -0.35s; } .analysis-loader .loader-arrow-three { color: #79c869; animation-delay: -2.10s, -0.70s; } @keyframes loaderArrowOrbit { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes loaderArrowFloat { from { scale: 0.92; opacity: 0.78; filter: blur(0px); } to { scale: 1.08; opacity: 1; filter: blur(0.15px); } } @keyframes loaderHaloBreathe { 0%, 100% { box-shadow: 0 18px 44px rgba(31, 119, 70, 0.08), 0 0 0 10px rgba(228, 246, 235, 0.30), 0 0 0 20px rgba(228, 246, 235, 0.12); } 50% { box-shadow: 0 22px 52px rgba(31, 119, 70, 0.13), 0 0 0 12px rgba(228, 246, 235, 0.38), 0 0 0 24px rgba(228, 246, 235, 0.17); } } @keyframes loaderCoreBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.72; } 50% { transform: translate(-50%, -50%) scale(1.07); opacity: 1; } } /* --------------------------------------------------------- QUESTION CONTAINERS --------------------------------------------------------- */ .deposit-options, .content-options, .bulky-options, .material-options { margin-top: 18px; padding: 18px; border: 1px solid rgba(42, 91, 62, 0.10); border-radius: 22px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 250, 0.98) ); box-shadow: 0 12px 34px rgba(28, 74, 48, 0.07); } .deposit-options > p:first-child, .content-options > p:first-child, .bulky-options > p:first-child, .material-options > p:first-child { margin-top: 0; color: #183a29; font-size: 16px; font-weight: 800; } .deposit-options p, .content-options p, .bulky-options p, .material-options p { color: #6c7d73; line-height: 1.5; } /* --------------------------------------------------------- QUESTION CHOICE BUTTONS --------------------------------------------------------- */ .deposit-options button.choice-button, .content-options button.choice-button, .bulky-options button.choice-button, .material-options button.choice-button, .feedback-reason-button.feedback-choice { position: relative; overflow: hidden; width: 100%; min-height: 68px; display: grid; grid-template-columns: 46px minmax(0, 1fr) 24px; align-items: center; gap: 13px; margin-top: 10px; padding: 10px 14px 10px 11px; border: 1px solid rgba(39, 79, 55, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.96); color: #17251d; box-shadow: 0 6px 18px rgba(31, 64, 44, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.82); text-align: left; transform: translateY(0) scale(1); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 220ms ease, background 220ms ease; animation: choiceCardEnter 380ms cubic-bezier(0.16, 1, 0.3, 1) both; } .deposit-options button.choice-button:nth-of-type(2), .content-options button.choice-button:nth-of-type(2), .bulky-options button.choice-button:nth-of-type(2), .material-options button.choice-button:nth-of-type(2), .feedback-reason-button.feedback-choice:nth-of-type(2) { animation-delay: 55ms; } .deposit-options button.choice-button:nth-of-type(3), .content-options button.choice-button:nth-of-type(3), .bulky-options button.choice-button:nth-of-type(3), .material-options button.choice-button:nth-of-type(3), .feedback-reason-button.feedback-choice:nth-of-type(3) { animation-delay: 110ms; } .deposit-options button.choice-button:hover, .content-options button.choice-button:hover, .bulky-options button.choice-button:hover, .material-options button.choice-button:hover, .feedback-reason-button.feedback-choice:hover { border-color: rgba(35, 123, 70, 0.25); background: #ffffff; box-shadow: 0 12px 26px rgba(31, 86, 52, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); transform: translateY(-3px) scale(1.006); } .deposit-options button.choice-button:active, .content-options button.choice-button:active, .bulky-options button.choice-button:active, .material-options button.choice-button:active, .feedback-reason-button.feedback-choice:active { box-shadow: 0 4px 10px rgba(31, 86, 52, 0.08), inset 0 2px 5px rgba(24, 65, 39, 0.05); transform: translateY(1px) scale(0.987); transition-duration: 90ms; } .choice-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #edf7f0; font-size: 21px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(23, 107, 58, 0.05); } .choice-tone-green .choice-icon { background: #e6f7eb; } .choice-tone-red .choice-icon { background: #fdecec; } .choice-tone-amber .choice-icon { background: #fff3dc; } .choice-tone-blue .choice-icon { background: #eaf3fb; } .choice-tone-purple .choice-icon { background: #f1ebfb; } .choice-tone-gray .choice-icon { background: #eef1ef; } .choice-label { min-width: 0; color: #18251e; font-size: 15px; font-weight: 750; line-height: 1.35; } .choice-chevron { color: #819188; font-size: 30px; font-weight: 300; line-height: 1; transform: translateX(0); transition: color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } .choice-button:hover .choice-chevron, .feedback-choice:hover .choice-chevron { color: #1d7b46; transform: translateX(3px); } @keyframes choiceCardEnter { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --------------------------------------------------------- FEEDBACK CARD + REASONS --------------------------------------------------------- */ .feedback-box { padding: 20px; border: 1px solid rgba(40, 87, 58, 0.11); border-radius: 22px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 250, 0.98) ); box-shadow: 0 12px 34px rgba(28, 74, 48, 0.06); } .feedback-title { color: #163825; font-size: 16px; font-weight: 800; text-align: center; } .feedback-question { margin-top: 14px; margin-bottom: 3px; color: #738178; font-size: 14px; font-weight: 700; text-align: center; } #feedbackDetails { margin-top: 10px; } #feedbackDetails .feedback-reason-button { margin-top: 10px; } /* Keep the initial Ja / Nein pair tactile as well. */ .feedback-button { min-height: 50px; border-radius: 15px; transition: transform 190ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 190ms ease, background 190ms ease; } .feedback-button:hover { transform: translateY(-2px); } .feedback-button:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; } /* --------------------------------------------------------- ACCESSIBILITY — respect reduced-motion preference --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .analysis-loader, .analysis-loader .loader-arrow, .analysis-loader .loader-core-glow, .choice-button, .feedback-choice { animation: none !important; } .choice-button, .feedback-choice, .feedback-button { transition: none !important; } } /* --------------------------------------------------------- V4 RESPONSIVE --------------------------------------------------------- */ @media (max-width: 600px) { .analysis-loader { width: 132px; height: 132px; margin-bottom: 23px; } .analysis-loader .loader-arrow { width: 31px; height: 31px; font-size: 26px; offset-path: circle(40px at 66px 66px); } .analysis-loader .loader-core-glow { width: 48px; height: 48px; } .deposit-options, .content-options, .bulky-options, .material-options, .feedback-box { padding: 15px; border-radius: 19px; } .deposit-options button.choice-button, .content-options button.choice-button, .bulky-options button.choice-button, .material-options button.choice-button, .feedback-reason-button.feedback-choice { min-height: 64px; grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 11px; padding: 9px 12px 9px 10px; border-radius: 16px; } .choice-icon { width: 40px; height: 40px; border-radius: 13px; font-size: 19px; } .choice-label { font-size: 14px; } .choice-chevron { font-size: 27px; } } /* ========================================================= V5 — STORYBOARD LOADER Horizontal objects inside a fixed circular viewport. ========================================================= */ .result-card:has(.analysis-loader) .analysis-status { overflow: visible; } .analysis-loader { position: relative; width: 176px; height: 176px; display: block; margin: 8px auto 26px; font-size: 0; animation: none !important; opacity: 1 !important; transform: none !important; isolation: isolate; } .analysis-loader::before, .analysis-loader::after { content: none !important; display: none !important; } .sorting-loader-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; border: 2px solid rgba(59, 174, 105, 0.26); border-radius: 50%; background: radial-gradient(circle at 50% 44%, rgba(255,255,255,1) 0 43%, rgba(241,250,245,0.98) 72%, rgba(225,244,233,0.98) 100%); box-shadow: 0 15px 34px rgba(31, 109, 64, 0.11), inset 0 0 0 10px rgba(255,255,255,0.42), inset 0 0 32px rgba(52, 168, 98, 0.07); } .sorting-loader-ring { position: absolute; pointer-events: none; border-radius: 50%; border: 1px solid rgba(54, 166, 97, 0.11); } .sorting-loader-ring-one { inset: 13px; } .sorting-loader-ring-two { inset: 26px; border-color: rgba(54, 166, 97, 0.07); } .loader-floor-shadow { position: absolute; left: 50%; bottom: 34px; width: 82px; height: 13px; border-radius: 50%; background: rgba(23, 71, 45, 0.11); filter: blur(7px); transform: translateX(-50%); animation: none; } .loader-scene { position: absolute; z-index: 3; left: 50%; top: 50%; width: 112px; height: 112px; display: grid; place-items: center; opacity: 0; transform: translate(-210%, -50%) rotate(-5deg) scale(0.94); will-change: transform, opacity; animation: loaderSceneTravel 5s cubic-bezier(0.22, 0.75, 0.18, 1) infinite both; } .loader-scene-1 { animation-delay: 0s; } .loader-scene-2 { animation-delay: 1s; } .loader-scene-3 { animation-delay: 2s; } .loader-scene-4 { animation-delay: 3s; } .loader-scene-5 { animation-delay: 4s; } @keyframes loaderSceneTravel { 0% { opacity: 0; transform: translate(-210%, -50%) rotate(-5deg) scale(0.94); } 1% { opacity: 1; } 5% { opacity: 1; transform: translate(-38%, -50%) rotate(3deg) scale(1.02); } 7% { transform: translate(-56%, -50%) rotate(-2deg) scale(0.99); } 9% { transform: translate(-48%, -50%) rotate(1deg) scale(1.005); } 10.5%, 14.5% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); } 16% { transform: translate(-43%, -50%) rotate(-1.5deg) scale(1.01); } 19% { opacity: 1; transform: translate(115%, -50%) rotate(4deg) scale(0.97); } 20% { opacity: 0; transform: translate(170%, -50%) rotate(5deg) scale(0.94); } 20.01%, 100% { opacity: 0; transform: translate(170%, -50%) rotate(5deg) scale(0.94); } } @keyframes loaderShadowBreathe { 0%, 20%, 40%, 60%, 80%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(0.82); } 9%, 29%, 49%, 69%, 89% { opacity: 1; transform: translateX(-50%) scaleX(1); } } .loader-object { position: relative; z-index: 2; display: grid; place-items: center; filter: drop-shadow(0 8px 7px rgba(21, 64, 40, 0.14)); } /* ---------- Cartoon bins ---------- */ .loader-bin { width: 66px; height: 88px; transform-origin: 50% 82%; animation: binIdleBounce 4s ease-in-out infinite; } .bin-body { position: absolute; left: 8px; top: 20px; width: 50px; height: 59px; border-radius: 8px 8px 12px 12px; background: var(--bin-main); box-shadow: inset 5px 0 0 rgba(255,255,255,0.08), inset -5px 0 0 rgba(0,0,0,0.07), 0 7px 10px rgba(24, 66, 42, 0.12); } .bin-body::after { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 2px; border-radius: 99px; background: rgba(255,255,255,0.18); box-shadow: 0 9px rgba(255,255,255,0.12), 0 18px rgba(255,255,255,0.09); } .bin-lid { position: absolute; z-index: 3; left: 4px; top: 12px; width: 58px; height: 12px; border-radius: 8px 8px 5px 5px; background: var(--bin-dark); box-shadow: 0 3px 4px rgba(0,0,0,0.13); } .bin-handle { position: absolute; z-index: 4; left: 22px; top: 7px; width: 22px; height: 8px; border: 4px solid var(--bin-dark); border-bottom: 0; border-radius: 7px 7px 0 0; } .bin-mark { position: absolute; z-index: 2; left: 50%; top: 50%; color: rgba(255,255,255,0.92); font-family: Arial, sans-serif; font-size: 22px; font-weight: 800; line-height: 1; transform: translate(-50%, -44%); } .bin-wheel { position: absolute; z-index: 4; bottom: 3px; width: 14px; height: 14px; border: 4px solid #28342e; border-radius: 50%; background: #8d9892; box-shadow: inset 0 0 0 2px #d7ddda; animation: binWheelSpin 0.45s linear infinite; } .bin-wheel-left { left: 10px; } .bin-wheel-right { right: 10px; } .loader-bin-green { --bin-main: #39a75f; --bin-dark: #238449; } .loader-bin-blue { --bin-main: #3f84c5; --bin-dark: #2d659c; } @keyframes binWheelSpin { to { transform: rotate(360deg); } } @keyframes binIdleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } /* ---------- Question ---------- */ .loader-question { width: 88px; height: 88px; border-radius: 50%; color: #2e9656; font-family: Arial, sans-serif; font-size: 82px; font-weight: 800; line-height: 0.9; text-shadow: 0 3px 0 rgba(255,255,255,0.8), 0 8px 14px rgba(35, 126, 72, 0.12); } /* ---------- Thinking face ---------- */ .loader-thinking { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff7b7 0 7%, transparent 8%), linear-gradient(145deg, #ffd95c, #f3b63a); border: 2px solid rgba(155, 105, 24, 0.18); box-shadow: inset -7px -8px 12px rgba(171, 104, 16, 0.10), inset 7px 7px 10px rgba(255, 255, 255, 0.22), 0 8px 16px rgba(90, 67, 20, 0.14); transform-origin: 50% 70%; animation: thinkerBob 1.1s ease-in-out infinite; } .think-eye { position: absolute; top: 31px; width: 7px; height: 9px; border-radius: 50%; background: #5f4a28; } .think-eye-left { left: 24px; transform: translateY(-1px); } .think-eye-right { right: 24px; transform: translateY(2px); } .think-brow { position: absolute; top: 23px; width: 17px; height: 4px; border-radius: 999px; background: #6d5227; } .think-brow-left { left: 17px; transform: rotate(-8deg); } .think-brow-right { right: 17px; transform: rotate(12deg); } .think-mouth { position: absolute; left: 50%; top: 50px; width: 20px; height: 9px; border-bottom: 4px solid #76572a; border-radius: 0 0 50% 50%; transform: translateX(-50%) rotate(6deg); } .think-bubble { position: absolute; border-radius: 50%; background: #ffffff; border: 2px solid rgba(48, 95, 59, 0.18); box-shadow: 0 3px 7px rgba(37, 74, 46, 0.10); animation: thinkBubbleFloat 1.45s ease-in-out infinite; } .think-bubble-1 { right: 7px; top: 7px; width: 10px; height: 10px; animation-delay: 0s; } .think-bubble-2 { right: -2px; top: -4px; width: 15px; height: 15px; animation-delay: 0.12s; } .think-bubble-3 { right: -17px; top: -20px; width: 21px; height: 21px; animation-delay: 0.24s; } @keyframes thinkBubbleFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.76; } 50% { transform: translateY(-2px) scale(1.05); opacity: 1; } } @keyframes thinkerBob { 0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); } 45% { transform: translateY(-2px) rotate(2deg) scale(1.015); } 65% { transform: translateY(1px) rotate(-1deg) scale(0.995); } } 50% { transform: rotate(2deg) translateY(-2px); } } /* ---------- Garbage truck ---------- */ .loader-truck { width: 126px; height: 78px; } .loader-truck svg { width: 100%; height: 100%; overflow: visible; } .loader-truck .truck-wheel { transform-box: fill-box; transform-origin: center; animation: truckWheelSpin 0.42s linear infinite; } @keyframes truckWheelSpin { to { transform: rotate(360deg); } } /* Make truck's stop feel heavier. */ .loader-scene-5 { animation-timing-function: cubic-bezier(0.18, 0.82, 0.16, 1); } /* Motion streaks removed in V5.1: the object itself carries the motion. */ @media (max-width: 600px) { .analysis-loader { width: 150px; height: 150px; margin-bottom: 22px; } .loader-scene { width: 96px; height: 96px; } .loader-bin { transform: scale(0.9); } .loader-question { font-size: 72px; } .loader-thinking { transform: scale(0.92); } .loader-truck { width: 112px; height: 70px; } } @media (prefers-reduced-motion: reduce) { .loader-scene { animation: loaderReducedScene 5s linear infinite !important; } .loader-scene-1 { animation-delay: 0s !important; } .loader-scene-2 { animation-delay: 1.6s !important; } .loader-scene-3 { animation-delay: 3.2s !important; } .loader-scene-4 { animation-delay: 4.8s !important; } .loader-scene-5 { animation-delay: 6.4s !important; } .bin-wheel, .loader-truck .truck-wheel, .loader-bin, .loader-thinking { animation: none !important; } } @keyframes loaderReducedScene { 0%, 19% { opacity: 1; transform: translate(-50%, -50%); } 20%, 100% { opacity: 0; transform: translate(-50%, -50%); } } /* ========================================================= V6 — VISUAL SYSTEM / BACKGROUND Quiet eco background + unified cards + softer depth ========================================================= */ :root { --wd-v6-bg: #f6f8f5; --wd-v6-bg-warm: #fbfaf6; --wd-v6-mint: #e8f3ea; --wd-v6-mint-2: #dcecdf; --wd-v6-primary: #1b4332; --wd-v6-accent: #6fbf7f; --wd-v6-text: #1f2937; --wd-v6-muted: #77837d; --wd-v6-line: rgba(41, 91, 62, 0.10); --wd-v6-card: rgba(255, 255, 255, 0.82); --wd-v6-card-strong: rgba(255, 255, 255, 0.94); --wd-v6-shadow: 0 18px 50px rgba(27, 67, 50, 0.07), 0 2px 8px rgba(27, 67, 50, 0.03); } html { background: var(--wd-v6-bg); } body { position: relative; isolation: isolate; background: radial-gradient( circle at 12% 8%, rgba(111, 191, 127, 0.15) 0, rgba(111, 191, 127, 0.07) 18rem, transparent 34rem ), radial-gradient( circle at 88% 20%, rgba(197, 224, 205, 0.25) 0, transparent 28rem ), radial-gradient( circle at 76% 82%, rgba(199, 218, 188, 0.18) 0, transparent 30rem ), linear-gradient( 180deg, #fbfcf8 0%, #f5f8f4 46%, #f8f7f2 100% ); background-attachment: fixed; } /* Soft organic shapes — deliberately very quiet. */ body::before, body::after { content: ""; position: fixed; z-index: -3; pointer-events: none; filter: blur(1px); } body::before { width: 46vw; min-width: 360px; height: 35vw; min-height: 280px; left: -18vw; bottom: -9vw; border-radius: 52% 48% 65% 35% / 54% 37% 63% 46%; background: linear-gradient( 145deg, rgba(111, 191, 127, 0.10), rgba(223, 239, 226, 0.03) ); transform: rotate(10deg); } body::after { width: 38vw; min-width: 300px; height: 42vw; min-height: 320px; right: -17vw; top: 24vh; border-radius: 62% 38% 42% 58% / 44% 61% 39% 56%; background: linear-gradient( 210deg, rgba(93, 164, 112, 0.08), rgba(239, 236, 216, 0.03) ); transform: rotate(-13deg); } /* Existing decorative circles become mint instead of amber. */ .ambient-shape { z-index: -2; filter: blur(10px); } .ambient-shape-one { width: 360px; height: 360px; top: -145px; left: -155px; background: radial-gradient( circle at 55% 55%, rgba(120, 196, 139, 0.13), rgba(120, 196, 139, 0.03) 65%, transparent 72% ); } .ambient-shape-two { width: 430px; height: 430px; top: 48vh; right: -280px; background: radial-gradient( circle at 45% 45%, rgba(147, 190, 151, 0.10), rgba(147, 190, 151, 0.025) 67%, transparent 73% ); } .container { position: relative; z-index: 1; padding-top: 46px; } /* --------------------------------------------------------- HERO — slightly quieter, more premium --------------------------------------------------------- */ .hero { margin-bottom: 24px; } .hero-kicker { border-color: rgba(71, 130, 88, 0.12); background: linear-gradient( 180deg, rgba(244, 250, 246, 0.90), rgba(232, 243, 234, 0.76) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px rgba(27, 67, 50, 0.04); } .brand-copy h1 { color: var(--wd-v6-primary); } .subtitle, .search-description, .home-footnote { color: var(--wd-v6-muted); } /* --------------------------------------------------------- PRIMARY SURFACES --------------------------------------------------------- */ .input-card, .result-card, .feedback-box, .deposit-options, .content-options, .bulky-options, .material-options { border: 1px solid var(--wd-v6-line); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.90), rgba(250, 252, 250, 0.80) ); box-shadow: var(--wd-v6-shadow); backdrop-filter: blur(18px) saturate(112%); -webkit-backdrop-filter: blur(18px) saturate(112%); } .input-card { border-radius: 28px; } .result-card { border-radius: 28px; padding: 24px; box-shadow: 0 24px 62px rgba(27, 67, 50, 0.075), 0 2px 8px rgba(27, 67, 50, 0.03); } /* A faint sheen at the top of major cards. */ .input-card::before, .result-card::before { content: ""; position: absolute; pointer-events: none; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent ); } .result-card { position: relative; overflow: hidden; } /* --------------------------------------------------------- SEARCH --------------------------------------------------------- */ .search-box { padding: 5px; border: 1px solid rgba(53, 98, 69, 0.10); border-radius: 18px; background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 9px 24px rgba(27, 67, 50, 0.055); } #searchInput { border: none !important; background: transparent !important; color: var(--wd-v6-text); } #searchInput:focus { box-shadow: none; } #searchButton { border-radius: 14px; background: linear-gradient( 135deg, #2f9a5d, #187646 ); box-shadow: 0 7px 18px rgba(30, 121, 70, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18); } #searchButton:hover { background: linear-gradient( 135deg, #37a865, #1c7d4b ); transform: translateY(-1px); } #searchButton:active { transform: translateY(1px) scale(0.985); } /* --------------------------------------------------------- PHOTO ACTIONS --------------------------------------------------------- */ .photo-action { border-radius: 18px; box-shadow: 0 8px 22px rgba(27, 67, 50, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.82); } .photo-action-primary { background: linear-gradient( 135deg, #329d60, #177344 ); } .photo-action-secondary { background: rgba(255, 255, 255, 0.72); } /* --------------------------------------------------------- RESULT HIERARCHY --------------------------------------------------------- */ .final-result { gap: 14px; } .detected-object, .sorting-result { position: relative; border: 1px solid rgba(46, 91, 61, 0.08); border-radius: 20px; box-shadow: 0 9px 26px rgba(27, 67, 50, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.88); } .detected-object { background: linear-gradient( 180deg, rgba(252, 253, 252, 0.95), rgba(245, 249, 246, 0.86) ); } .sorting-result { background: linear-gradient( 145deg, rgba(234, 247, 238, 0.92), rgba(247, 251, 248, 0.96) ); border-color: rgba(73, 145, 91, 0.13); } .result-label { letter-spacing: 0.015em; } .sorting-category { color: var(--wd-v6-primary); } .result-hint { margin-top: 15px; padding: 14px 15px; border: 1px solid rgba(195, 153, 51, 0.11); border-radius: 15px; background: linear-gradient( 135deg, rgba(255, 248, 225, 0.85), rgba(255, 252, 241, 0.68) ); color: #5d5a48; line-height: 1.55; } /* --------------------------------------------------------- QUESTIONS / FEEDBACK — same family as result cards --------------------------------------------------------- */ .deposit-options, .content-options, .bulky-options, .material-options, .feedback-box { border-radius: 22px; } .deposit-options button.choice-button, .content-options button.choice-button, .bulky-options button.choice-button, .material-options button.choice-button, .feedback-reason-button.feedback-choice { border-color: rgba(52, 90, 65, 0.09); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.94), rgba(249, 251, 249, 0.86) ); box-shadow: 0 7px 20px rgba(27, 67, 50, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .deposit-options button.choice-button:hover, .content-options button.choice-button:hover, .bulky-options button.choice-button:hover, .material-options button.choice-button:hover, .feedback-reason-button.feedback-choice:hover { border-color: rgba(62, 142, 82, 0.18); box-shadow: 0 12px 28px rgba(27, 67, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1); transform: translateY(-2px) scale(1.004); } .feedback-button-positive { background: linear-gradient( 135deg, #38a866, #207f4d ); } .feedback-button-negative { background: rgba(255, 255, 255, 0.72); } /* --------------------------------------------------------- SUGGESTIONS --------------------------------------------------------- */ .search-suggestions { border-color: rgba(53, 96, 68, 0.10); border-radius: 18px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 45px rgba(27, 67, 50, 0.11); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .search-suggestion:hover, .search-suggestion.is-active, .search-suggestion:focus-visible { background: linear-gradient( 90deg, rgba(232, 245, 236, 0.95), rgba(247, 251, 248, 0.98) ); } /* --------------------------------------------------------- BACKGROUND MICRO-MOTION --------------------------------------------------------- */ @keyframes ambientDriftOne { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(12px, 8px, 0) scale(1.035); } } @keyframes ambientDriftTwo { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-10px, 12px, 0) scale(1.025); } } .ambient-shape-one { animation: ambientDriftOne 14s ease-in-out infinite; } .ambient-shape-two { animation: ambientDriftTwo 17s ease-in-out infinite; } /* --------------------------------------------------------- MOBILE V6 --------------------------------------------------------- */ @media (max-width: 600px) { body { background: radial-gradient( circle at 8% 4%, rgba(111, 191, 127, 0.12), transparent 18rem ), radial-gradient( circle at 93% 38%, rgba(163, 201, 169, 0.10), transparent 19rem ), linear-gradient( 180deg, #fbfcf8 0%, #f5f8f4 55%, #f8f7f2 100% ); } body::before { width: 390px; height: 310px; left: -230px; bottom: -120px; } body::after { width: 330px; height: 360px; right: -230px; top: 42vh; } .container { padding-top: 32px; } .input-card, .result-card { border-radius: 24px; } .result-card { padding: 18px; } .detected-object, .sorting-result { border-radius: 17px; } .result-hint { border-radius: 14px; } } @media (prefers-reduced-motion: reduce) { .ambient-shape-one, .ambient-shape-two { animation: none !important; } } /* ========================================================= V6.1 — REAL ECO BACKGROUND IMAGE Uses: assets/eco-bg.png ========================================================= */ html { background: #f3f7f1; } body { position: relative; isolation: isolate; background: #f3f7f1 !important; } /* Disable previous large CSS-only organic blobs. The artwork now comes from the real background image. */ body::after { display: none !important; } body::before { content: ""; position: fixed; inset: 0; z-index: -10; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; border-radius: 0 !important; background: linear-gradient( rgba(250, 252, 248, 0.20), rgba(247, 250, 245, 0.20) ), url("./assets/eco-bg.png") center center / cover no-repeat !important; transform: none; filter: none !important; pointer-events: none; } /* Keep page content comfortably readable while the background remains visible. */ .input-card, .result-card, .feedback-box, .deposit-options, .content-options, .bulky-options, .material-options { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.88), rgba(249, 252, 249, 0.80) ) !important; backdrop-filter: blur(14px) saturate(108%); -webkit-backdrop-filter: blur(14px) saturate(108%); } /* Let some of the artwork breathe through the main screen. */ .container { background: transparent; } /* Existing ambient blobs are no longer needed. */ .ambient-shape { opacity: 0 !important; animation: none; } /* Phones / narrow screens: keep the image centered and readable. */ @media (max-width: 600px) { body::before { background: linear-gradient( rgba(250, 252, 248, 0.26), rgba(247, 250, 245, 0.26) ), url("./assets/eco-bg.png") 50% 50% / cover no-repeat !important; } } /* Very wide desktop: prevent the middle from becoming visually empty. */ @media (min-width: 1400px) { body::before { background-size: cover !important; } } /* ========================================================= V6.2 — DESKTOP COMPOSITION TUNING Quieter background, better framing, larger desktop UI ========================================================= */ @media (min-width: 901px) { .container { width: min(92%, 680px); max-width: 680px; } body::before { background: linear-gradient( rgba(250, 252, 248, 0.38), rgba(247, 250, 245, 0.38) ), url("./assets/eco-bg.png") 48% 42% / cover no-repeat !important; } } /* Keep tablet/mobile behavior from v6.1 intact. */ @media (max-width: 900px) { .container { max-width: 600px; } } /* ========================================================= V7 — CALM LIVING BACKGROUND Soft botanical background + very gentle motion ========================================================= */ html { background: #f5f7f1; } body { position: relative; isolation: isolate; background: #f5f7f1 !important; } /* The artwork itself moves only a tiny amount. Overscan prevents empty edges from appearing while it drifts. */ body::before { content: ""; position: fixed !important; z-index: -10 !important; inset: -3.5% !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0 !important; background: linear-gradient( rgba(250, 251, 247, 0.18), rgba(247, 249, 244, 0.18) ), url("./assets/eco-bg-v7.png") 50% 50% / cover no-repeat !important; filter: none !important; pointer-events: none; transform-origin: 50% 50%; animation: wohinBackgroundBreathe 18s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate; } /* V6 decorative CSS blob is no longer needed. */ body::after { display: none !important; } @keyframes wohinBackgroundBreathe { 0% { transform: translate3d(-1.15%, -0.75%, 0) scale(1.018); } 35% { transform: translate3d(0.45%, 0.55%, 0) scale(1.030); } 70% { transform: translate3d(1.25%, -0.20%, 0) scale(1.024); } 100% { transform: translate3d(-0.35%, 1.15%, 0) scale(1.040); } } /* --------------------------------------------------------- FLOATING LEAVES Tiny independent decorative shapes around the edges. --------------------------------------------------------- */ .floating-leaf { position: fixed; z-index: -3; display: block; width: 48px; height: 78px; border-radius: 80% 18% 78% 20% / 82% 20% 78% 18%; background: linear-gradient( 145deg, rgba(73, 121, 78, 0.15), rgba(130, 171, 124, 0.07) ); box-shadow: inset 5px 4px 9px rgba(255, 255, 255, 0.16), 0 9px 26px rgba(49, 86, 57, 0.025); opacity: 0.42; transform-origin: 50% 82%; pointer-events: none; will-change: transform; filter: blur(0.15px); } /* subtle center vein */ .floating-leaf::after { content: ""; position: absolute; left: 49%; top: 13%; bottom: 13%; width: 1px; border-radius: 999px; background: linear-gradient( 180deg, transparent, rgba(60, 101, 66, 0.13), transparent ); transform: rotate(10deg); } .floating-leaf-one { left: 4.5vw; top: 18vh; width: 34px; height: 57px; opacity: 0.34; animation: wohinLeafFloatOne 8.8s ease-in-out infinite; } .floating-leaf-two { right: 5.2vw; top: 47vh; width: 42px; height: 69px; opacity: 0.30; animation: wohinLeafFloatTwo 10.6s ease-in-out infinite; } .floating-leaf-three { left: 10vw; bottom: 7vh; width: 27px; height: 46px; opacity: 0.24; animation: wohinLeafFloatThree 8.2s ease-in-out infinite; } @keyframes wohinLeafFloatOne { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-18deg); } 50% { transform: translate3d(8px, -17px, 0) rotate(-8deg); } } @keyframes wohinLeafFloatTwo { 0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg); } 50% { transform: translate3d(-10px, -15px, 0) rotate(8deg); } } @keyframes wohinLeafFloatThree { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-34deg); } 50% { transform: translate3d(7px, -14px, 0) rotate(-22deg); } } /* --------------------------------------------------------- SURFACES Keep the botanical background visible without sacrificing readability. --------------------------------------------------------- */ .input-card, .result-card, .feedback-box, .deposit-options, .content-options, .bulky-options, .material-options { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.90), rgba(249, 251, 248, 0.84) ) !important; backdrop-filter: blur(13px) saturate(106%); -webkit-backdrop-filter: blur(13px) saturate(106%); } /* Desktop framing */ @media (min-width: 901px) { body::before { background: linear-gradient( rgba(250, 251, 247, 0.16), rgba(247, 249, 244, 0.16) ), url("./assets/eco-bg-v7.png") 50% 48% / cover no-repeat !important; } } /* Mobile gets even quieter motion and slightly brighter veil. */ @media (max-width: 600px) { body::before { inset: -5% !important; background: linear-gradient( rgba(250, 251, 247, 0.28), rgba(247, 249, 244, 0.28) ), url("./assets/eco-bg-v7.png") 50% 50% / cover no-repeat !important; animation-duration: 38s; } .floating-leaf-one { left: -3px; top: 16vh; opacity: 0.16; transform: scale(0.78); } .floating-leaf-two { right: -6px; top: 53vh; opacity: 0.14; transform: scale(0.78); } .floating-leaf-three { display: none; } } /* Accessibility: respect system motion preferences. */ @media (prefers-reduced-motion: reduce) { body::before, .floating-leaf { animation: none !important; } } /* ========================================================= V7.1 — MORE VISIBLE LIVING BACKGROUND ========================================================= */ /* Reuse the two ambient shapes as very soft moving light glows. */ .ambient-shape { display: block !important; position: fixed; z-index: -4; border-radius: 50%; pointer-events: none; filter: blur(28px); opacity: 1 !important; } .ambient-shape-one { width: 260px; height: 260px; left: 8vw; top: 12vh; background: radial-gradient( circle, rgba(255, 255, 242, 0.26) 0%, rgba(220, 239, 220, 0.12) 42%, transparent 72% ); animation: wohinGlowOne 10s ease-in-out infinite; } .ambient-shape-two { width: 320px; height: 320px; right: 7vw; bottom: 8vh; top: auto; background: radial-gradient( circle, rgba(236, 247, 233, 0.24) 0%, rgba(204, 229, 207, 0.10) 46%, transparent 74% ); animation: wohinGlowTwo 12s ease-in-out infinite; } @keyframes wohinGlowOne { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.45; } 50% { transform: translate3d(16px, 10px, 0) scale(1.08); opacity: 0.78; } } @keyframes wohinGlowTwo { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.38; } 50% { transform: translate3d(-14px, -12px, 0) scale(1.10); opacity: 0.70; } } /* Slightly more present leaves on desktop. */ @media (min-width: 901px) { .floating-leaf { filter: blur(0); } } /* Keep mobile animation calmer than desktop. */ @media (max-width: 600px) { body::before { animation-duration: 24s !important; } .ambient-shape-one { animation-duration: 13s; } .ambient-shape-two { animation-duration: 15s; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .ambient-shape { animation: none !important; } } /* ========================================================= V7.2 — ANIMATION FIX Legacy V6 rules used !important and were blocking motion. ========================================================= */ /* Ensure background movement is actually allowed. */ body::before { will-change: transform; animation: wohinBackgroundBreathe 18s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate !important; } /* Ensure glow motion is not suppressed by legacy rules. */ .ambient-shape-one { animation: wohinGlowOne 9s ease-in-out infinite !important; } .ambient-shape-two { animation: wohinGlowTwo 11s ease-in-out infinite !important; } /* Make the independent leaves clearly visible enough to verify motion. */ .floating-leaf-one { opacity: 0.38; animation: wohinLeafFloatOne 8.2s ease-in-out infinite !important; } .floating-leaf-two { opacity: 0.34; animation: wohinLeafFloatTwo 9.6s ease-in-out infinite !important; } .floating-leaf-three { opacity: 0.28; animation: wohinLeafFloatThree 7.8s ease-in-out infinite !important; } /* Keep mobile quieter, but still visibly alive. */ @media (max-width: 600px) { body::before { animation-duration: 22s !important; } .ambient-shape-one { animation-duration: 12s !important; } .ambient-shape-two { animation-duration: 14s !important; } } /* Accessibility still wins intentionally. */ @media (prefers-reduced-motion: reduce) { body::before, .floating-leaf, .ambient-shape { animation: none !important; } } /* ========================================================= V7.3 — COMFORT MOTION Reduced-motion visual tuning after V7.2 felt too strong. ========================================================= */ /* Keep the artwork almost static: only a tiny "breathing" zoom. No visible side-to-side drift. */ body::before { animation: wohinBackgroundComfort 34s ease-in-out infinite alternate !important; } @keyframes wohinBackgroundComfort { 0% { transform: scale(1.004); } 50% { transform: scale(1.008); } 100% { transform: scale(1.005); } } /* Glows breathe mostly through opacity/scale, not travel. */ .ambient-shape-one { animation: wohinGlowComfortOne 14s ease-in-out infinite !important; } .ambient-shape-two { animation: wohinGlowComfortTwo 17s ease-in-out infinite !important; } @keyframes wohinGlowComfortOne { 0%, 100% { transform: scale(0.98); opacity: 0.28; } 50% { transform: scale(1.03); opacity: 0.46; } } @keyframes wohinGlowComfortTwo { 0%, 100% { transform: scale(1); opacity: 0.24; } 50% { transform: scale(1.04); opacity: 0.42; } } /* Peripheral leaves move only a few pixels. */ .floating-leaf-one { opacity: 0.24; animation: wohinLeafComfortOne 12s ease-in-out infinite !important; } .floating-leaf-two { opacity: 0.22; animation: wohinLeafComfortTwo 14s ease-in-out infinite !important; } .floating-leaf-three { opacity: 0.18; animation: wohinLeafComfortThree 13s ease-in-out infinite !important; } @keyframes wohinLeafComfortOne { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-18deg); } 50% { transform: translate3d(2px, -6px, 0) rotate(-14deg); } } @keyframes wohinLeafComfortTwo { 0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg); } 50% { transform: translate3d(-3px, -5px, 0) rotate(14deg); } } @keyframes wohinLeafComfortThree { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-34deg); } 50% { transform: translate3d(2px, -5px, 0) rotate(-30deg); } } /* Mobile: background artwork fully static; only faint peripheral life remains. */ @media (max-width: 600px) { body::before { animation: none !important; transform: scale(1.004) !important; } .floating-leaf-one, .floating-leaf-two { opacity: 0.12; } } /* Accessibility always wins. */ @media (prefers-reduced-motion: reduce) { body::before, .floating-leaf, .ambient-shape { animation: none !important; } } /* ========================================================= BETA QUALITY NOTE ========================================================= */ .beta-quality-note { max-width: 760px; margin: -4px auto 20px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(177, 135, 47, 0.18); border-radius: 17px; background: linear-gradient( 180deg, rgba(255, 251, 236, 0.84), rgba(255, 249, 228, 0.66) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 28px rgba(78, 65, 28, 0.045); color: #5c533b; font-size: 0.84rem; line-height: 1.48; backdrop-filter: blur(14px) saturate(108%); -webkit-backdrop-filter: blur(14px) saturate(108%); animation: betaQualityNoteEnter 720ms cubic-bezier(0.16, 1, 0.3, 1) 245ms both; } .beta-quality-note-icon { flex: 0 0 auto; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: rgba(255, 255, 255, 0.58); box-shadow: inset 0 0 0 1px rgba(177, 135, 47, 0.10); font-size: 1rem; } .beta-quality-note strong { display: block; margin: 1px 0 2px; color: #51472d; font-size: 0.88rem; } .beta-quality-note p { margin: 0; } @keyframes betaQualityNoteEnter { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 600px) { .beta-quality-note { margin: -2px 4px 16px; padding: 12px 13px; border-radius: 15px; font-size: 0.81rem; } } @media (prefers-reduced-motion: reduce) { .beta-quality-note { animation: none !important; } } /* ========================================================= BETA PRIVACY NOTE ========================================================= */ .beta-privacy-note { max-width: 760px; margin: 24px auto 10px; padding: 14px 16px; border: 1px solid rgba(42, 99, 61, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.68); font-size: 0.88rem; line-height: 1.55; /* Match the soft entrance used by the rest of the home UI. */ animation: privacyNoteEnter 720ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both; } @keyframes privacyNoteEnter { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .beta-privacy-note summary { cursor: pointer; font-weight: 700; } .beta-privacy-note p { margin: 10px 0 0; } /* Opening the note should feel consistent with result/question cards too. */ .beta-privacy-note[open] p { animation: privacyNoteContentEnter 300ms cubic-bezier(0.16, 1, 0.3, 1) both; } .beta-privacy-note[open] p:nth-of-type(2) { animation-delay: 45ms; } .beta-privacy-note[open] p:nth-of-type(3) { animation-delay: 90ms; } @keyframes privacyNoteContentEnter { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .beta-privacy-note, .beta-privacy-note[open] p { animation: none !important; } } /* ========================================================= CLOSED BETA ACCESS GATE ========================================================= */ .beta-gate[hidden] { display: none; } .beta-gate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 22px; background: rgba(237, 247, 240, 0.68); backdrop-filter: blur(16px) saturate(0.9); -webkit-backdrop-filter: blur(16px) saturate(0.9); } .beta-gate-card { width: min(100%, 430px); padding: 30px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 26px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 24px 80px rgba(20, 74, 43, 0.18); text-align: center; animation: betaGateEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .beta-gate-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 12px; border-radius: 999px; background: #e7f6ec; color: #17723a; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .beta-gate-icon { margin-top: 20px; font-size: 42px; line-height: 1; } .beta-gate h2 { margin: 14px 0 8px; color: #183126; font-size: clamp(26px, 6vw, 34px); } .beta-gate-copy, .beta-gate-note, .beta-gate-message { line-height: 1.55; } .beta-gate-copy { margin: 0 auto 22px; color: #5f7067; font-size: 15px; } .beta-access-form { display: grid; gap: 10px; text-align: left; } .beta-access-form label { color: #42584c; font-size: 13px; font-weight: 800; } .beta-access-form input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #d7e4dc; border-radius: 14px; background: #fbfdfc; color: #183126; font: inherit; font-size: 17px; font-weight: 750; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .beta-access-form input:focus { border-color: #37a85f; background: #ffffff; box-shadow: 0 0 0 4px rgba(55, 168, 95, 0.12); } .beta-access-form button { min-height: 50px; border: 0; border-radius: 14px; background: #1f9d50; color: #ffffff; font: inherit; font-weight: 800; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } .beta-access-form button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31, 157, 80, 0.22); } .beta-access-form button:disabled { opacity: 0.68; cursor: wait; } .beta-gate-message { min-height: 24px; margin: 14px 0 0; font-size: 13px; font-weight: 750; } .beta-gate-message[data-type="info"] { color: #66766d; } .beta-gate-message[data-type="error"] { color: #a23434; } .beta-gate-message[data-type="success"] { color: #17723a; } .beta-gate-note { margin: 12px 0 0; color: #87938c; font-size: 11px; } body.beta-pending #appShell, body.beta-locked #appShell { pointer-events: none; user-select: none; filter: blur(5px); transform: scale(0.995); } body.beta-authorized #appShell { transition: filter 0.45s ease, transform 0.45s ease; filter: none; transform: none; } @keyframes betaGateEnter { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 520px) { .beta-gate { padding: 14px; } .beta-gate-card { padding: 24px 18px; border-radius: 22px; } } @media (prefers-reduced-motion: reduce) { .beta-gate-card { animation: none; } } body.beta-pending, body.beta-locked { overflow: hidden; } /* ========================================================= TRENN DAS DING — BRAND + PWA INSTALL ========================================================= */ .brand-slogan { max-width: 520px; margin-left: auto; margin-right: auto; font-weight: 700; letter-spacing: -0.01em; } .pwa-install-card[hidden] { display: none; } .pwa-install-card { max-width: 760px; margin: 18px auto 8px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(41, 91, 62, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.76); box-shadow: 0 12px 32px rgba(27, 67, 50, 0.055); text-align: left; backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%); } .pwa-install-copy { min-width: 0; display: flex; align-items: center; gap: 11px; } .pwa-install-copy > div { min-width: 0; } .pwa-install-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #e8f3ea; font-size: 18px; } .pwa-install-copy strong { display: block; color: #1b4332; font-size: 0.91rem; } .pwa-install-copy p, .pwa-install-hint { margin: 3px 0 0; color: #77837d; font-size: 0.78rem; line-height: 1.45; } .pwa-install-button { min-height: 42px; padding: 10px 14px; border-radius: 12px; white-space: nowrap; font-size: 0.83rem; } .pwa-install-hint { grid-column: 1 / -1; margin: 0; color: #526159; } @media (max-width: 600px) { .brand-copy h1 { font-size: clamp(34px, 10vw, 46px); } .brand-slogan { max-width: 330px; font-size: 0.98rem; line-height: 1.45; } .pwa-install-card { margin: 18px 4px 8px; grid-template-columns: 1fr; } .pwa-install-button { width: 100%; } } /* ========================================================= MOBILE UX PASS — unified AI flow + visible pending state ========================================================= */ .result-card { scroll-margin-top: 18px; } #searchButton:disabled, .photo-action:disabled { cursor: wait; opacity: 0.72; transform: none !important; } #searchButton:disabled:hover, .photo-action:disabled:hover { transform: none !important; } #searchButton[aria-busy="true"] .search-button-arrow { animation: none; } @media (max-width: 700px) { .result-card { scroll-margin-top: 12px; } } /* Pass 4K: compact preparation/component details */ .preparation-list { margin: 0.45rem 0 0 1.1rem; padding: 0; } .preparation-list li + li { margin-top: 0.3rem; } /* ========================================================= PASS 4L — multiple-object photo clarification ========================================================= */ .multiple-object-options { margin-top: 8px; padding: 18px; border: 1px solid rgba(42, 91, 62, 0.10); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,252,250,0.98)); box-shadow: 0 12px 34px rgba(28, 74, 48, 0.07); } .multiple-object-options > p:first-child { margin-top: 0; color: #183a29; font-size: 16px; font-weight: 800; } .multiple-object-options p { color: #6c7d73; line-height: 1.5; } .multiple-object-list { display: grid; gap: 10px; margin-top: 14px; } .multiple-object-button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid rgba(39, 79, 55, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.97); color: #17251d; box-shadow: 0 6px 18px rgba(31, 64, 44, 0.055); text-align: left; font: inherit; font-weight: 700; cursor: pointer; transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease; } .multiple-object-button:hover { transform: translateY(-1px); border-color: rgba(35, 123, 70, 0.25); box-shadow: 0 10px 22px rgba(31, 86, 52, 0.10); } .multiple-object-button:active { transform: translateY(0); } .multiple-object-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #edf7ef; } .multiple-object-arrow { color: #7f9187; font-size: 24px; line-height: 1; text-align: right; } @media (max-width: 600px) { .multiple-object-options { padding: 15px; } .multiple-object-button { min-height: 58px; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 9px; padding: 9px 11px; } } /* ========================================================= PASS 4M - PRIVACY PAGE ========================================================= */ .privacy-body { min-height: 100vh; margin: 0; color: #173c2a; background: #f5faf6; } .privacy-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; } .privacy-back-link, .beta-privacy-full-link { color: #166b45; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; } .privacy-header { display: flex; gap: 18px; align-items: center; margin: 22px 0 24px; } .privacy-header img { border-radius: 18px; } .privacy-header h1 { margin: 2px 0 4px; } .privacy-header p { margin: 0; } .privacy-kicker { font-weight: 800; color: #27865b; } .privacy-card { margin: 14px 0; padding: 22px; border: 1px solid rgba(38, 104, 73, 0.13); border-radius: 20px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 30px rgba(24, 73, 51, 0.06); } .privacy-card h2 { margin-top: 0; font-size: 1.1rem; } .privacy-card p, .privacy-card li { line-height: 1.65; } .privacy-card code { padding: 0.1em 0.35em; border-radius: 6px; background: rgba(35, 113, 76, 0.08); } .privacy-footer-note { margin-top: 24px; color: #5d7066; font-size: 0.92rem; line-height: 1.55; } @media (max-width: 600px) { .privacy-shell { width: min(100% - 20px, 900px); padding-top: 20px; } .privacy-card { padding: 17px; border-radius: 17px; } } .detected-object-count { margin: 0.35rem 0 0; font-size: 0.9rem; opacity: 0.72; } /* ========================================================= PASS 4P — MOBILE RENDERING OPTIMIZATION Based on a real Android Performance trace. Keep the visual identity, but avoid expensive continuous compositing on phones. ========================================================= */ /* Reserve photo space before the large image has finished decoding. This prevents the analysis card from growing by hundreds of pixels in the middle of the automatic focus/scroll. */ .photo-preview-frame { width: 100%; max-height: 350px; margin: 16px 0; display: grid; place-items: center; overflow: hidden; border: 1px solid #e3ebe6; border-radius: 18px; background: #f8faf8; box-shadow: 0 8px 22px rgba(27, 73, 49, 0.045); } .photo-preview-frame .photo-preview { width: auto; max-width: 100%; max-height: 350px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain; } @media (max-width: 700px) { /* The background artwork itself remains. Only the two continuously blurred glow layers are removed on mobile. */ .ambient-shape { display: none !important; animation: none !important; filter: none !important; will-change: auto !important; } /* The fixed full-screen background is static on mobile, so do not reserve a dedicated transform layer for it. */ body::before { animation: none !important; transform: none !important; will-change: auto !important; } /* Peripheral leaves stay as part of the design, but no longer animate continuously while the user scrolls. */ .floating-leaf { animation: none !important; filter: none !important; will-change: auto !important; } /* Backdrop blur forces the browser to continuously re-sample the page behind large translucent cards. On phones use an almost identical opaque surface instead. */ .input-card, .result-card, .feedback-box, .deposit-options, .content-options, .bulky-options, .material-options { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.965), rgba(249, 252, 249, 0.94) ) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .beta-quality-note, .beta-privacy-note, .pwa-install-card, .search-suggestions { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .beta-gate { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(237, 247, 240, 0.94); } /* Keep the main storyboard motion, remove only decorative effects that trigger extra raster/compositor work every frame. */ .loader-object { filter: none !important; } .loader-floor-shadow { filter: none !important; opacity: 0.34; height: 8px; background: rgba(23, 71, 45, 0.10); } .sorting-loader-viewport { box-shadow: 0 10px 24px rgba(31, 109, 64, 0.08), inset 0 0 0 8px rgba(255, 255, 255, 0.34); } /* Secondary micro-animations are barely noticeable on a phone but create continuous extra paint/composite work. */ .bin-wheel, .loader-truck .truck-wheel, .loader-bin, .loader-thinking, .think-bubble { animation: none !important; } /* Reserve a stable preview viewport before the photo decode finishes. Original photo bytes are still sent to /api/photo unchanged. */ .photo-preview-frame { height: clamp(230px, 46vh, 310px); max-height: none; margin: 14px 0 18px; } .photo-preview-frame .photo-preview { max-height: 100%; } } /* ========================================================= PASS 4V — FEEDBACK QUALITY ========================================================= */ .feedback-reason-list { display: grid; gap: 8px; margin-top: 10px; } .feedback-reason-list .feedback-reason-button { margin-top: 0; } .feedback-reason-button.feedback-reason-selected { border-color: rgba(32, 111, 67, 0.48); background: rgba(230, 245, 235, 0.96); box-shadow: inset 0 0 0 1px rgba(32, 111, 67, 0.12); } .feedback-comment-wrap { margin-top: 16px; } .feedback-comment-label { display: block; margin-bottom: 7px; color: #244432; font-size: 14px; font-weight: 800; } .feedback-comment-input { box-sizing: border-box; width: 100%; min-height: 92px; resize: vertical; padding: 11px 12px; border: 1px solid rgba(40, 87, 58, 0.18); border-radius: 13px; background: #ffffff; color: #1f2937; font: inherit; line-height: 1.45; } .feedback-comment-input:focus { outline: 2px solid rgba(32, 111, 67, 0.18); border-color: rgba(32, 111, 67, 0.52); } .feedback-comment-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: #748078; font-size: 12px; } .feedback-submit-button { margin-top: 14px; } .feedback-submit-button:disabled { cursor: not-allowed; opacity: 0.55; transform: none; } .feedback-save-error { margin: 9px 0 0; color: #a13b32; font-size: 13px; line-height: 1.4; } @media (max-width: 600px) { .feedback-comment-input { min-height: 104px; font-size: 16px; } .feedback-comment-meta { align-items: flex-end; } }