/* EasyGen — AI Mockup Generator * * Two-view layout (initial + results) embedded as a product-page module. * * Selectors prefixed "#main section.module.easygen" to match sandbox's * "#main section.module.promotion" convention and override sandbox's broad * resets on button { display:inline-block } etc. View switching is driven * by [data-active-view] on the section + [data-view] on each child container. */ /* ============================================================ EasyGen trigger — standalone button below the logo toolbar. own white-pill background, matches the toolbar's visual language but visually separated so it reads as a distinct entry point to the EasyGen flow (not "yet another logo tool"). positioned absolute inside .canvas-container so it tracks the toolbar's vertical centering scheme — same `top/bottom: 0 + margin:auto` trick that #overlay-control-panel uses, offset downward by half the typical panel height + gap so the two stack visually. ============================================================ */ .btn-easygen#btn-easygen-trigger { position: absolute; top: 50%; left: 45px; /* match #overlay-control-panel.left (common.css:6224) */ margin-top: 195px; /* half typical panel height (~365/2) + 12px gap */ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 30px; background-color: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 0 35px rgba(0, 0, 0, 0.08); /* match toolbar's rest-state shadow */ cursor: pointer; outline: 0; z-index: 10; transition: background-color 0.18s ease, box-shadow 0.18s ease; } .btn-easygen#btn-easygen-trigger.hidden { display: none; } /* hide the launcher entirely while the fullscreen logo editor (FLE) is open. already carries .logo-editor-open from product.js:1176 / :1281 so we piggyback on that signal — no extra body class or monkey-patch needed. replaces the earlier close+scroll-to-easyGen branch in easygen.js that van flagged as jarring (round 2 #3): easyGen section is outside the FLE overlay, so there's no clean transition into it from inside FLE. */ html.logo-editor-open .btn-easygen#btn-easygen-trigger { display: none; } .btn-easygen#btn-easygen-trigger:hover { background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 18px rgba(0, 0, 0, 0.1); } .btn-easygen#btn-easygen-trigger .btn-easygen-icon { width: 24px; height: 24px; display: block; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } /* inactive: hide the animated rainbow and render a flat-gray silhouette via mask-image instead. CSS filter on an SVG with SMIL animation doesn't reliably desaturate in Chrome (the gradient renders below the filter pipeline), so masking the icon shape with a solid colour gives a clean "disabled" look. */ .btn-easygen#btn-easygen-trigger[data-state="inactive"] .btn-easygen-icon { opacity: 0; } .btn-easygen#btn-easygen-trigger[data-state="inactive"]::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background-color: #9aa3b0; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; pointer-events: none; transition: background-color 0.2s ease; } .btn-easygen#btn-easygen-trigger[data-state="inactive"]:hover::after { background-color: #7c8492; } .btn-easygen#btn-easygen-trigger[data-state="active"] .btn-easygen-icon { opacity: 1; } .btn-easygen#btn-easygen-trigger[data-state="active"]:hover .btn-easygen-icon { transform: scale(1.08); } /* Pure-CSS tooltip — anchored to the right edge of the trigger, fades in on :hover/:focus. Bypasses the sandbox jQuery UI tooltip wrapper which only binds open events (relies on click-close + keep-open) and would leave this button's tooltip stuck open. JS sets the .body text and the button's aria-label between the active / inactive variants. */ .btn-easygen#btn-easygen-trigger .btn-easygen-tooltip { position: absolute; left: 100%; top: 50%; transform: translateY(-50%) translateX(8px); margin-left: 8px; min-width: 220px; max-width: 280px; padding: 10px 14px; background: #fff; color: #243a58; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-size: 13px; font-weight: 400; line-height: 1.35; text-align: left; white-space: normal; pointer-events: none; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 11; } .btn-easygen#btn-easygen-trigger:hover .btn-easygen-tooltip, .btn-easygen#btn-easygen-trigger:focus-visible .btn-easygen-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } .btn-easygen#btn-easygen-trigger .btn-easygen-tooltip-title { display: block; font-weight: 700; font-size: 14px; color: #243a58; margin-bottom: 2px; } .btn-easygen#btn-easygen-trigger .btn-easygen-tooltip-body { display: block; color: #6b7990; } /* arrow pointing left toward the button */ .btn-easygen#btn-easygen-trigger .btn-easygen-tooltip::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #fff; filter: drop-shadow(-1px 0 2px rgba(0, 0, 0, 0.06)); } /* ============================================================ ROOT — design tokens + base layout ============================================================ */ #main section.module.easygen { scroll-margin-top: 59px; --easygen-orange: #F5A623; --easygen-border: #243a58; --easygen-text-muted: #7a8ba3; --easygen-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --easygen-gradient: conic-gradient( from 0deg, transparent 0deg, transparent 80deg, #ff4b91 100deg, #ff7657 140deg, #ffc35d 180deg, #66d698 220deg, #4b8eff 260deg, transparent 290deg, transparent 360deg ); --easygen-rainbow-flat: linear-gradient(90deg, #ff4b91, #ff7657, #ffc35d, #66d698, #4b8eff, #ff4b91); /* reveal-animation tokens — frozen from reveal-demo.html (markus, 2026-05-22). * cycle = duration of one crossfade step (img-a fades to img-b). * display = how long an image holds before the next cycle. * reveal = duration of the final fx-blur when the real image lands. */ --easygen-cycle-duration: 1200ms; --easygen-display-duration: 10000ms; --easygen-reveal-duration: 4000ms; /* AI bloom — apple-intelligence-style inner glow that rides on the * slot edges while cycling. always-on inside generating-state — only * the conic angle spins. */ --easygen-bloom-blur: 10px; --easygen-bloom-stroke: 0px; --easygen-bloom-opacity: 0.35; --easygen-bloom-extent: 10%; --easygen-bloom-rotation: 4s; /* diffusion-dream crossfade — outgoing image blurs + desaturates + * a noise burst flashes through. */ --easygen-diffd-blur: 40px; --easygen-diffd-saturate: 0.05; --easygen-diffd-noise: 0.4; /* color overlay — user's product colour blended over the cycling * imagery. fades out when the real image is revealed (state=complete). */ --easygen-overlay-color: #06305b; --easygen-overlay-opacity: 0.37; --easygen-overlay-blend: screen; background: var(--promotion-module-background-color); color: var(--inverse-text-color); padding: 60px 20px 80px; font-family: 'plus_jakarta', sans-serif; box-sizing: border-box; position: relative; overflow: hidden; } /* Dot-grid background pattern (ambient, fades toward bottom). * MVP-prototypen anvander 0.4 opacity; vi koer 0.5 per Markus' onskemal. */ #main section.module.easygen::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(122, 139, 163, 0.5) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0) 90% ); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0) 90% ); pointer-events: none; z-index: 0; } /* Hoist all child layout above the dot-grid pseudo-layer. */ #main section.module.easygen > * { position: relative; z-index: 1; } #main section.module.easygen *, #main section.module.easygen *::before, #main section.module.easygen *::after { box-sizing: border-box; } /* ============================================================ VIEW SWITCHING — cross-fade with vertical motion ============================================================ */ #main section.module.easygen .easygen-view { max-width: 1580px; margin: 0 auto; opacity: 1; transform: translateY(0); transition: opacity 0.35s var(--easygen-ease-smooth), transform 0.35s var(--easygen-ease-smooth); } #main section.module.easygen .easygen-view[hidden] { display: none; } #main section.module.easygen[data-active-view="results"] .easygen-view-initial { display: none; } #main section.module.easygen[data-active-view="initial"] .easygen-view-results { display: none; } /* JS adds these classes for the brief fade-out/fade-in moment */ #main section.module.easygen .easygen-view.is-fading-out { opacity: 0; transform: translateY(-12px); } #main section.module.easygen .easygen-view.is-fading-in { opacity: 0; transform: translateY(20px); } /* ============================================================ HEADER ============================================================ */ #main section.module.easygen .easygen-header { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 16px; text-align: center; } #main section.module.easygen .easygen-header-icon { font-size: 38px; background: var(--easygen-rainbow-flat); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: easygen-gradient-flow 6s linear infinite; } /* brand logo — viewBox cropped to content bbox, so height = visible height. same size in both views (initial + compact); compact view trims margins via .easygen-header-compact but the logo itself stays consistent. */ #main section.module.easygen .easygen-logo { display: block; height: 44px; width: auto; } /* defensive: force the same height inside the compact (View 2) header so any future header-tier rule can't accidentally desync the two views. */ #main section.module.easygen .easygen-header-compact .easygen-logo { height: 44px; } #main section.module.easygen .easygen-title { color: var(--inverse-text-color); font-size: 44px; font-weight: 700; margin: 0; letter-spacing: -0.5px; line-height: 1.05; } #main section.module.easygen .easygen-subtitle { text-align: center; color: var(--easygen-text-muted); font-size: 20px; margin: 0 auto 48px; line-height: 1.4; } /* Compact header for View 2 (no subtitle) */ #main section.module.easygen .easygen-header-compact { margin-bottom: 28px; } #main section.module.easygen .easygen-header-compact .easygen-title { font-size: 32px; } #main section.module.easygen .easygen-header-compact .easygen-header-icon { font-size: 28px; } /* ============================================================ STEPPER — 3 steps with pending / active / completed states ============================================================ */ #main section.module.easygen .easygen-stepper { display: flex; align-items: flex-start; justify-content: center; margin: 0 auto 48px; max-width: 720px; } #main section.module.easygen .easygen-step { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; position: relative; z-index: 1; cursor: default; } #main section.module.easygen .easygen-step-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--info-secondary-color); border: 2px solid var(--easygen-border); color: var(--easygen-text-muted); transition: all 0.4s var(--easygen-ease-smooth); position: relative; overflow: visible; } #main section.module.easygen .easygen-step-icon { font-size: 30px; transition: opacity 0.2s ease; } #main section.module.easygen .easygen-step-check { position: absolute; width: 30px; height: 30px; opacity: 0; transition: opacity 0.2s ease; color: #ffffff; stroke: #ffffff; } #main section.module.easygen .easygen-step.completed .easygen-step-icon { opacity: 0; } #main section.module.easygen .easygen-step.completed .easygen-step-check { opacity: 1; } #main section.module.easygen .easygen-step-label { margin-top: 14px; font-size: 16px; font-weight: 500; color: var(--easygen-text-muted); transition: color 0.3s ease; } /* Active state — highlight color */ #main section.module.easygen .easygen-step.active .easygen-step-circle { border-color: var(--easygen-orange); color: var(--easygen-orange); box-shadow: 0 0 20px rgba(245, 166, 35, 0.25); } #main section.module.easygen .easygen-step.active .easygen-step-label { color: var(--inverse-text-color); } /* Completed state — orange filled */ #main section.module.easygen .easygen-step.completed .easygen-step-circle { background: var(--easygen-orange); border-color: var(--easygen-orange); color: var(--promotion-module-background-color); } #main section.module.easygen .easygen-step.completed .easygen-step-label { color: var(--inverse-text-color); } /* Connector line — gray default, orange when filled */ #main section.module.easygen .easygen-step-line { flex: 1; height: 2px; min-width: 60px; max-width: 160px; margin: 32px 12px 0; background: var(--easygen-border); border-radius: 2px; transition: background 0.4s ease; } #main section.module.easygen .easygen-step-line.filled { background: var(--easygen-orange); } /* Click-attention shake on disabled steps */ @keyframes easygen-step-attention { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.08); } 50% { transform: scale(1); } 75% { transform: scale(1.05); } } #main section.module.easygen .easygen-step.attention .easygen-step-circle { animation: easygen-step-attention 0.6s ease-out; box-shadow: 0 0 20px rgba(255, 75, 145, 0.4), 0 0 40px rgba(75, 142, 255, 0.3); } /* Tooltip on pending steps (hover) */ #main section.module.easygen .easygen-step-tooltip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--info-color); color: var(--inverse-text-color); padding: 8px 14px; border-radius: 8px; font-size: 13px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; z-index: 5; } /* Tooltip visible on hover for ALL steps (logo / configure / generate), * and forced on .attention (used to flash a pending step on click). */ #main section.module.easygen .easygen-step:hover .easygen-step-tooltip, #main section.module.easygen .easygen-step.attention .easygen-step-tooltip { opacity: 1; visibility: visible; } /* ============================================================ GENERATE BUTTON — rainbow border, two states ============================================================ */ #main section.module.easygen .easygen-cta { display: flex; justify-content: center; margin-bottom: 76px; position: relative; } #main section.module.easygen .easygen-generate-wrapper { position: relative; display: inline-flex; border-radius: 50px; padding: 3px; background: var(--easygen-rainbow-flat); background-size: 200% 100%; animation: easygen-gradient-flow 6s linear infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Seamless rainbow flow — shift by exact bg-image width (200% bg-size = 200% shift). * Gradient first/last color matches (#ff4b91), so 200% shift = one complete cycle. */ @keyframes easygen-gradient-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Glow blur layer */ #main section.module.easygen .easygen-generate-wrapper::before { content: ''; position: absolute; inset: -6px; border-radius: 56px; background: var(--easygen-rainbow-flat); background-size: 200% 100%; animation: easygen-gradient-flow 6s linear infinite; filter: blur(12px); opacity: 0.35; z-index: -1; transition: opacity 0.3s ease; } #main section.module.easygen .easygen-generate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 48px; background: var(--promotion-module-background-color); border: none; border-radius: 50px; font-family: inherit; font-size: 22px; font-weight: 600; cursor: pointer; color: var(--inverse-text-color); transition: background 0.3s ease; position: relative; z-index: 1; } #main section.module.easygen .easygen-generate-icon { font-size: 26px; } #main section.module.easygen .easygen-generate-text, #main section.module.easygen .easygen-generate-icon { background: linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.55)), var(--easygen-rainbow-flat); background-size: 100% 100%, 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: easygen-gradient-flow 6s linear infinite; } /* State: inactive — pulsing border, gray text, not clickable */ @keyframes easygen-border-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } #main section.module.easygen .easygen-generate-wrapper.state-inactive { background: none; animation: none; } #main section.module.easygen .easygen-generate-wrapper.state-inactive::after { content: ''; position: absolute; inset: 0; border-radius: 50px; background: var(--easygen-rainbow-flat); background-size: 200% 100%; z-index: 0; animation: easygen-gradient-flow 6s linear infinite, easygen-border-pulse 3s ease-in-out infinite; -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; } #main section.module.easygen .easygen-generate-wrapper.state-inactive::before { animation: easygen-gradient-flow 6s linear infinite, easygen-border-pulse 3s ease-in-out infinite; } #main section.module.easygen .easygen-generate-wrapper.state-inactive .easygen-generate-btn { cursor: default; } #main section.module.easygen .easygen-generate-wrapper.state-inactive .easygen-generate-text, #main section.module.easygen .easygen-generate-wrapper.state-inactive .easygen-generate-icon { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--easygen-text-muted) !important; background-clip: unset !important; animation: none !important; } /* State: ready — full rainbow + hover glow */ #main section.module.easygen .easygen-generate-wrapper.state-ready { cursor: pointer; } #main section.module.easygen .easygen-generate-wrapper.state-ready:hover { box-shadow: 0 8px 32px rgba(255, 75, 145, 0.3), 0 8px 32px rgba(75, 142, 255, 0.3); } #main section.module.easygen .easygen-generate-wrapper.state-ready:hover::before { opacity: 0.55; } #main section.module.easygen .easygen-generate-wrapper.state-ready .easygen-generate-btn:hover { background: var(--info-secondary-color); } /* State: generating — disabled while running */ #main section.module.easygen .easygen-generate-wrapper.state-generating .easygen-generate-btn { cursor: wait; opacity: 0.7; } /* Credits tooltip below generate button (anon only). * Visible only on hover of the generate-wrapper, matchar MVP-prototypen exakt: * morkare bg (#111d2e), muted brodtext, vit understruken link, liten arrow uppat. */ #main section.module.easygen .easygen-credits-tooltip { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); background: #060d18; color: var(--easygen-text-muted); padding: 14px 24px; border-radius: 12px; font-size: 14px; white-space: nowrap; z-index: 5; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } /* INGA pointer-events: none — annars kan cursor inte hovra pa tooltip eller * dess link. Hover-bridgen mellan knappen och tooltip funkar via visibility- * transition (0.2s grace) sa cursor hinner traversa 16px-gappet utan att * tooltip forsvinner. */ /* Arrow (small rotated square) pointing up to the button */ #main section.module.easygen .easygen-credits-tooltip::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #060d18; } /* Reveal on hover of the generate-wrapper OR the tooltip itself. * Tooltip-hover-rule ar redundant safety: 0.2s visibility-transition-grace * vid hover-out later cursor traversa 16px-gappet ner till tooltip, dar * tooltip:hover halls aktiv direkt. */ #main section.module.easygen .easygen-generate-wrapper:hover .easygen-credits-tooltip, #main section.module.easygen .easygen-credits-tooltip:hover { opacity: 1; visibility: visible; } #main section.module.easygen .easygen-credits-link { color: var(--inverse-text-color); text-decoration: underline; text-underline-offset: 2px; } #main section.module.easygen .easygen-credits-link:hover { color: var(--easygen-orange); } /* Hide credits tooltip for logged-in users */ #main section.module.easygen[data-is-logged-in="1"] .easygen-credits-tooltip { display: none; } /* ============================================================ EXAMPLES CAROUSEL ============================================================ */ #main section.module.easygen .easygen-examples { margin: 64px auto 0; max-width: 1580px; } #main section.module.easygen .easygen-examples-wrap { position: relative; padding: 0 56px; } #main section.module.easygen .easygen-examples-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 8px; scrollbar-width: none; -ms-overflow-style: none; } #main section.module.easygen .easygen-examples-track::-webkit-scrollbar { display: none; } /* Chevron arrows — flank the carousel */ #main section.module.easygen .easygen-examples-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--info-secondary-color); border: 1px solid var(--easygen-border); color: var(--inverse-text-color); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; } #main section.module.easygen .easygen-examples-arrow:hover { border-color: var(--easygen-orange); background: var(--info-color); } #main section.module.easygen .easygen-examples-arrow[disabled] { opacity: 0.3; cursor: default; } #main section.module.easygen .easygen-examples-arrow .material-icons-outlined { font-size: 24px; } #main section.module.easygen .easygen-examples-arrow-prev { left: 4px; } #main section.module.easygen .easygen-examples-arrow-next { right: 4px; } #main section.module.easygen .easygen-example-item { flex: 0 0 auto; width: 320px; height: 240px; border-radius: 10px; overflow: hidden; scroll-snap-align: start; cursor: pointer; border: 1px solid var(--easygen-border); box-sizing: border-box; background: var(--info-secondary-color); padding: 0; transition: transform 0.25s var(--easygen-ease-smooth), border-color 0.25s ease, box-shadow 0.25s ease; } #main section.module.easygen .easygen-example-item img { width: 100%; height: 100%; object-fit: cover; display: block; } #main section.module.easygen .easygen-example-item:hover { transform: translateY(-2px); border: 2px solid var(--easygen-orange); box-shadow: 0 6px 20px rgba(0,0,0,0.35); } /* ============================================================ STATUS CARD shared bits (.easygen-status-thumb + .easygen-status-dot anvands i View 2-panelen tillsammans med .easygen-panel-*). ============================================================ */ #main section.module.easygen .easygen-status-thumb { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--promotion-module-background-color); border: 1px solid var(--easygen-border); flex: 0 0 auto; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; position: relative; } #main section.module.easygen .easygen-status-thumb:hover { border-color: var(--easygen-orange); transform: scale(1.04); } #main section.module.easygen .easygen-status-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45) url("data:image/svg+xml;utf8,") center/24px no-repeat; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } #main section.module.easygen .easygen-status-thumb:hover::after { opacity: 1; } #main section.module.easygen .easygen-status-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #main section.module.easygen .easygen-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #66d698; box-shadow: 0 0 8px rgba(102, 214, 152, 0.6); } /* ============================================================ RESULT GRID — 4 slots, 4-layer animation structure ============================================================ */ #main section.module.easygen .easygen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; } #main section.module.easygen .easygen-slot { position: relative; height: 300px; display: flex; isolation: isolate; border-radius: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--easygen-ease-smooth), transform 0.4s var(--easygen-ease-smooth); } /* Inga overflow:hidden pa slot — annars klipper den bort blur-halon * fran .easygen-slot-glow (som har inset:-2px + filter:blur(15px)). * Inre lager (.easygen-slot-mask, .easygen-slot-content) klipper sig sjalva. */ /* Slot stagger fade-in when results view becomes active */ #main section.module.easygen[data-active-view="results"] .easygen-slot { opacity: 1; transform: translateY(0); } #main section.module.easygen[data-active-view="results"] .easygen-slot[data-slot-index="0"] { transition-delay: 0ms; } #main section.module.easygen[data-active-view="results"] .easygen-slot[data-slot-index="1"] { transition-delay: 100ms; } #main section.module.easygen[data-active-view="results"] .easygen-slot[data-slot-index="2"] { transition-delay: 200ms; } #main section.module.easygen[data-active-view="results"] .easygen-slot[data-slot-index="3"] { transition-delay: 300ms; } #main section.module.easygen .easygen-slot-glow { position: absolute; inset: -2px; border-radius: 12px; z-index: -2; filter: blur(15px); opacity: 0; overflow: hidden; pointer-events: none; transition: opacity 0.5s ease-out; } #main section.module.easygen .easygen-slot-border { position: absolute; inset: 0; border-radius: 10px; z-index: -1; overflow: hidden; background: var(--info-color); transition: background 0.5s ease-out; } #main section.module.easygen .easygen-slot-mask { position: absolute; inset: 1.5px; background: #000; border-radius: 8.5px; z-index: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: opacity 0.5s ease-out; overflow: hidden; } #main section.module.easygen .easygen-slot-content { position: relative; z-index: 1; /* 1.5px inset matches mask-layer so the bilden never overlaps * the conic-stroke ring at the slot edges. without this the * crossfading images cover the conic gradient on top/bottom/ * left/right (only corners stayed visible). */ margin: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); display: flex; align-items: center; justify-content: center; border-radius: 8.5px; overflow: hidden; } /* Two stacked image layers — a + b alternate during cycling so an * incoming src can be set on the hidden one while the visible one fades * out. .is-active marks the layer currently shown to the user. The base * style is invisible + blurred + desaturated so the diffusion-dream * crossfade has a clean start state to ease away from. */ #main section.module.easygen .easygen-slot-content img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(var(--easygen-diffd-blur)) saturate(var(--easygen-diffd-saturate)) brightness(0.9); transition: opacity var(--easygen-cycle-duration) ease-in-out, filter var(--easygen-cycle-duration) ease-out; } #main section.module.easygen .easygen-slot-content img.is-active { opacity: 1; filter: blur(0) saturate(1) brightness(1); } /* fx-prep snaps to the final-reveal start state without a transition so * the subsequent fx-show animation can run from a clean baseline. */ #main section.module.easygen .easygen-slot-content img.is-fx-prep { transition: none; } /* State: waiting — diagonal subtle shimmer (sheen feel, MVP-style). * 110deg ger diagonal band (~20° fran vertikal), smooth peak 50%, alpha 0.05 * for att vara subtilt synlig over ren svart bg. */ @keyframes easygen-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } #main section.module.easygen .easygen-slot[data-state="waiting"] .easygen-slot-mask::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100% ); transform: translateX(-100%); animation: easygen-shimmer 2s ease-in-out infinite; } /* State: generating / finalizing — conic-gradient spinner */ @keyframes easygen-ambient-spin { from { transform: rotate(0deg); } to { transform: rotate(1turn); } } #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-slot-glow, #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-slot-glow { opacity: 0.6; } #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-slot-border, #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-slot-border { background: transparent; } #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-slot-glow::before, #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-slot-border::before { content: ''; position: absolute; background: var(--easygen-gradient); left: 50%; top: 50%; translate: -50% -50%; width: 1200px; height: 1200px; animation: easygen-ambient-spin 4s linear infinite; } #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-slot-glow::before, #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-slot-border::before { content: ''; position: absolute; background: var(--easygen-gradient); left: 50%; top: 50%; translate: -50% -50%; width: 1200px; height: 1200px; animation: easygen-ambient-spin 0.8s linear infinite; } /* State: complete — orange border, image visible, pulse */ @keyframes easygen-pulse-complete { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-slot-glow { opacity: 0; } #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-slot-border { background: var(--easygen-orange); } #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-slot-mask { background: transparent; } #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-slot-content { cursor: pointer; } #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-slot-content:hover { opacity: 0.92; } /* in complete only the .is-active layer stays visible — the other * layer keeps its 0-opacity base style so we don't see a stale cycling * frame peeking through under the final reveal. */ #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-slot-content img.is-active { opacity: 1; } #main section.module.easygen .easygen-slot[data-state="complete"] { animation: easygen-pulse-complete 0.5s ease-out; } /* ============================================================ REVEAL ANIMATION — diffusion-dream crossfade + AI bloom + fx-blur. Frozen from reveal-demo.html (markus, 2026-05-22). One crossfade style (diffusion-dream) and one final fx (fx-blur). See Referensbilder/SANDBOX-HANDOFF.md for the settings provenance. ============================================================ */ /* color overlay — sits over the cycling photos, fades out when the * real image is revealed so it doesn't tint the user's actual mockup. */ #main section.module.easygen .easygen-slot-color-overlay { position: absolute; inset: 0; pointer-events: none; background-color: var(--easygen-overlay-color); opacity: var(--easygen-overlay-opacity); mix-blend-mode: var(--easygen-overlay-blend); z-index: 2; transition: opacity 0.6s ease-out; } #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-slot-color-overlay, #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-slot-color-overlay { opacity: 0; } /* noise overlay — diffusion-dream "dreamy" feel. inline SVG fractal- * Noise keeps it dependency-free; opacity stays 0 at rest and animates * up to var(--easygen-diffd-noise) at the middle of each cycle via the * easygen-noise-flash keyframe, triggered by .is-cycling-active. */ #main section.module.easygen .easygen-slot-noise-overlay { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0; z-index: 3; } #main section.module.easygen .easygen-slot-content.is-cycling-active .easygen-slot-noise-overlay { animation: easygen-noise-flash var(--easygen-cycle-duration) ease-in-out; } @keyframes easygen-noise-flash { 0%, 100% { opacity: 0; } 50% { opacity: var(--easygen-diffd-noise); } } /* AI bloom — apple-intelligence-style inner rainbow glow on slot edges. * two sub-layers in markup but only l2 is visible at the frozen stroke=0: * .rim = sharp rim drawn via border-only mask (hidden at stroke=0) * .glow = inward vignette that creates the soft bleed * * Bloom stays at frozen opacity throughout generating; the angle spins * to give the rainbow motion. Fades out at finalizing+complete so the * fx-blur reveal isn't visually competing with it. */ @property --easygen-bloom-angle { syntax: ''; initial-value: 0deg; inherits: true; } #main section.module.easygen .easygen-slot-bloom { --easygen-bloom-rainbow: conic-gradient( from var(--easygen-bloom-angle, 0deg), #ff4b91, #ff7657, #ffc35d, #66d698, #4b8eff, #ff4b91 ); position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.5s ease-out; } #main section.module.easygen .easygen-slot-bloom > div { position: absolute; inset: 0; border-radius: 8.5px; background: var(--easygen-bloom-rainbow); } #main section.module.easygen .easygen-slot-bloom-rim { padding: var(--easygen-bloom-stroke); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } #main section.module.easygen .easygen-slot-bloom-glow { -webkit-mask: linear-gradient(to bottom, black 0%, transparent var(--easygen-bloom-extent)), linear-gradient(to top, black 0%, transparent var(--easygen-bloom-extent)), linear-gradient(to right, black 0%, transparent var(--easygen-bloom-extent)), linear-gradient(to left, black 0%, transparent var(--easygen-bloom-extent)); mask: linear-gradient(to bottom, black 0%, transparent var(--easygen-bloom-extent)), linear-gradient(to top, black 0%, transparent var(--easygen-bloom-extent)), linear-gradient(to right, black 0%, transparent var(--easygen-bloom-extent)), linear-gradient(to left, black 0%, transparent var(--easygen-bloom-extent)); filter: blur(calc(var(--easygen-bloom-blur) * 0.5)); opacity: 0.55; } /* bloom only shows once the first brand-set has faded in — during * the pure conic cascade (black placeholders) the bloom would * compete visually with the conic stroke. JS adds .is-images-loaded * to slot-content when loadFirstBrandSet runs. */ #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-slot-content.is-images-loaded .easygen-slot-bloom { opacity: var(--easygen-bloom-opacity); animation: easygen-bloom-spin var(--easygen-bloom-rotation) linear infinite; } @keyframes easygen-bloom-spin { to { --easygen-bloom-angle: 360deg; } } /* finalizing — slot turns black under the accelerated conic. JS strips * .is-active from both layers so the base style (opacity 0) takes over, * which renders a pitch-black slot-content for the brief moment between * cycling ending and the fx-blur reveal kicking in. */ /* final fx-blur reveal — the real generated image lands. * .is-fx-prep on incoming layer = invisible start state * (blurred, dimmed, scaled-up, opacity 0) applied with no * transition so the next frame can run the animation cleanly. * .is-fx-show on incoming layer = end state, opacity 1 + * blur 0 + scale 1 over reveal-duration. */ #main section.module.easygen .easygen-slot-content img.is-fx-prep { opacity: 0; filter: blur(30px) brightness(0.7); transform: scale(1.08); } #main section.module.easygen .easygen-slot-content img.is-fx-show { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); transition: filter var(--easygen-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity calc(var(--easygen-reveal-duration) * 0.78) ease-out, transform calc(var(--easygen-reveal-duration) * 1.22) cubic-bezier(0.16, 1, 0.3, 1); } /* Stop button — only visible during generating/finalizing */ #main section.module.easygen .easygen-stop-btn { position: absolute; bottom: 12px; right: 12px; width: 28px; height: 28px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 10; color: rgba(255, 255, 255, 0.7); transition: all 0.2s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 0; } #main section.module.easygen .easygen-stop-btn:hover { background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.3); } #main section.module.easygen .easygen-stop-btn .material-icons { font-size: 16px; } #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-stop-btn, #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-stop-btn { display: inline-flex; } /* pure-css tooltip on the stop button — same pattern as the trigger button (commit cca80bdb), bypasses the sandbox jquery-ui tooltip wrapper which only binds open events. anchored above the button with a downward arrow so it stays inside the slot frame and doesn't get clipped. */ #main section.module.easygen .easygen-stop-btn .btn-easygen-tooltip { position: absolute; bottom: 100%; right: 50%; transform: translateX(50%) translateY(-4px); margin-bottom: 6px; padding: 6px 10px; background: #fff; color: #243a58; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 11; } #main section.module.easygen .easygen-stop-btn:hover .btn-easygen-tooltip, #main section.module.easygen .easygen-stop-btn:focus-visible .btn-easygen-tooltip { opacity: 1; transform: translateX(50%) translateY(0); } #main section.module.easygen .easygen-stop-btn .btn-easygen-tooltip::after { content: ''; position: absolute; top: 100%; right: 50%; transform: translateX(50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08)); } /* ============================================================ ETA PILL + AI-INFO ICON + DISCLAIMER Pill lives only on slot[data-slot-index="0"] and is JS-toggled via the [hidden] attribute. AI-info lives on every slot and reveals via data-state="complete". Pill and AI-info share the same top-left position but are never visible at the same time. ============================================================ */ /* eta pill — diskret overlay top-left of slot 0, mirrors stop-btn pattern */ #main section.module.easygen .easygen-eta-pill { position: absolute; top: 12px; left: 12px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 500; line-height: 1; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 1; transition: opacity 0.3s var(--easygen-ease-smooth); } /* override browser-default display:none so the fade-out is visible */ #main section.module.easygen .easygen-eta-pill[hidden] { display: inline-flex !important; opacity: 0; } #main section.module.easygen .easygen-eta-spinner { width: 10px; height: 10px; border: 1.5px solid rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.85); border-radius: 50%; animation: easygen-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes easygen-spin { to { transform: rotate(360deg); } } /* saved-account pill — top-RIGHT of slot 0 (the ai-info icon sits top-left). shown only after generation completes for logged-in users (JS toggles [hidden] + .is-shown). green check + label + arrow on hover; entire pill is a clickable link to the inspiration tab on Mitt konto. */ #main section.module.easygen .easygen-saved-pill { position: absolute; top: 12px; right: 12px; z-index: 11; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; background: rgba(20, 40, 25, 0.72); border: 1px solid rgba(102, 214, 152, 0.55); border-radius: 999px; color: #c8f2d8; font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transform: translateY(-4px); transition: opacity 0.35s var(--easygen-ease-smooth), transform 0.35s var(--easygen-ease-smooth), background 0.2s, border-color 0.2s; } #main section.module.easygen .easygen-saved-pill[hidden] { display: inline-flex !important; opacity: 0; transform: translateY(-4px); pointer-events: none; } #main section.module.easygen .easygen-saved-pill.is-shown { opacity: 1; transform: translateY(0); } #main section.module.easygen .easygen-saved-pill:hover { background: rgba(28, 56, 36, 0.85); border-color: rgba(102, 214, 152, 0.85); color: #e3f9eb; } #main section.module.easygen .easygen-saved-check { width: 14px; height: 14px; color: #66d698; flex-shrink: 0; animation: easygen-saved-check-pop 0.5s var(--easygen-ease-smooth) both; } @keyframes easygen-saved-check-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* signup pill — anonymous variant of saved-pill. amber/orange (action needed) instead of green (success). same position + transition timing as saved-pill so a regenerate cleanly cross-fades between states. */ #main section.module.easygen .easygen-signup-pill { position: absolute; top: 12px; right: 12px; z-index: 11; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; background: rgba(50, 32, 12, 0.78); border: 1px solid rgba(245, 166, 35, 0.55); border-radius: 999px; color: #ffdca8; font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transform: translateY(-4px); transition: opacity 0.35s var(--easygen-ease-smooth), transform 0.35s var(--easygen-ease-smooth), background 0.2s, border-color 0.2s; } #main section.module.easygen .easygen-signup-pill[hidden] { display: inline-flex !important; opacity: 0; transform: translateY(-4px); pointer-events: none; } #main section.module.easygen .easygen-signup-pill.is-shown { opacity: 1; transform: translateY(0); } #main section.module.easygen .easygen-signup-pill:hover { background: rgba(64, 41, 16, 0.9); border-color: rgba(245, 166, 35, 0.85); color: #ffe8c2; } #main section.module.easygen .easygen-signup-icon { font-size: 14px; color: var(--easygen-orange); flex-shrink: 0; animation: easygen-saved-check-pop 0.5s var(--easygen-ease-smooth) both; } /* ai-info icon — same top-left spot as the pill, hidden until slot is complete so the pill on slot 0 never overlaps with the icon on slot 0. */ #main section.module.easygen .easygen-ai-info { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: help; z-index: 10; color: rgba(255, 255, 255, 0.85); padding: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--easygen-ease-smooth) 0.15s, background 0.2s ease, border-color 0.2s ease; } #main section.module.easygen .easygen-slot[data-state="complete"] .easygen-ai-info { opacity: 1; pointer-events: auto; } #main section.module.easygen .easygen-ai-info:hover, #main section.module.easygen .easygen-ai-info:focus { background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.3); outline: none; } #main section.module.easygen .easygen-ai-info .material-icons-outlined { font-size: 14px; } /* css-only tooltip — focus or hover triggers the pseudo-element. tap-to-focus on touch devices works because the button is focusable. */ #main section.module.easygen .easygen-ai-info[data-tooltip]:hover::after, #main section.module.easygen .easygen-ai-info[data-tooltip]:focus::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 0; width: max-content; max-width: 240px; padding: 8px 12px; background: rgba(0, 0, 0, 0.92); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; color: rgba(255, 255, 255, 0.95); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; z-index: 12; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* footer disclaimer — sits below the grid, muted-color, centered */ #main section.module.easygen .easygen-disclaimer { margin: 18px auto 0; padding: 0 12px; max-width: 720px; color: var(--easygen-text-muted); font-size: 12px; line-height: 1.5; text-align: center; } /* ============================================================ SAVE / SHARE — .easygen-action-save satter muted-color pa "Spara"- lanken (.easygen-panel-action.easygen-action-save i View 2-panelen). ============================================================ */ #main section.module.easygen .easygen-action-save { color: var(--easygen-text-muted); opacity: 0.45; pointer-events: none; transition: opacity 0.25s ease; } /* generation finished — flip the save link to active. is-generation-done is set by applyStatusUpdate's 'done' branch and cleared on every other lifecycle exit (start, stop, fail, logo-removed). */ #main section.module.easygen.is-generation-done .easygen-action-save { opacity: 1; pointer-events: auto; } /* Hide "save" link for logged-in users */ #main section.module.easygen[data-is-logged-in="1"] .easygen-action-save { display: none; } /* ============================================================ LIGHTBOX (shared) ============================================================ */ #main section.module.easygen .easygen-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 9999; display: none; align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; transition: opacity 0.3s ease; } #main section.module.easygen .easygen-lightbox.active { display: flex; opacity: 1; } @keyframes easygen-lightbox-zoom { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } #main section.module.easygen .easygen-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); animation: easygen-lightbox-zoom 0.3s ease-out; } #main section.module.easygen .easygen-lightbox-close, #main section.module.easygen .easygen-lightbox-nav { position: absolute; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--inverse-text-color); transition: background 0.2s ease; } #main section.module.easygen .easygen-lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; } #main section.module.easygen .easygen-lightbox-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; } #main section.module.easygen .easygen-lightbox-prev { left: 24px; } #main section.module.easygen .easygen-lightbox-next { right: 24px; } /* Hide nav-arrows when only a single image is in the lightbox */ #main section.module.easygen .easygen-lightbox.single .easygen-lightbox-nav { display: none; } #main section.module.easygen .easygen-lightbox-close:hover, #main section.module.easygen .easygen-lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); } /* ============================================================ SIGNUP MODAL (anonymous user, regenerate-gating) Mounted at runtime inside easyCart.common.modal's shell — selectors are unscoped because the markup lives outside section.module.easygen. ============================================================ */ .easygen-signup-prompt { text-align: center; padding: 8px 4px; } .easygen-signup-prompt .easygen-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 16px; background: linear-gradient(135deg, rgba(255, 75, 145, 0.15), rgba(75, 142, 255, 0.15)); border: 1px solid rgba(255, 75, 145, 0.3); border-radius: 50%; } .easygen-signup-prompt .easygen-modal-icon .material-icons-outlined { font-size: 32px; background: linear-gradient(90deg, #ff4b91, #ff7657, #ffc35d, #66d698, #4b8eff, #ff4b91); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .easygen-signup-prompt .easygen-modal-title { font-size: 22px; font-weight: 700; margin: 0 0 12px; } .easygen-signup-prompt .easygen-modal-body { font-size: 15px; line-height: 1.5; color: #7a8ba3; margin: 0 0 8px; } .easygen-modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .easygen-modal-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 100px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: all 0.2s ease; } .easygen-modal-btn-secondary { background: transparent; color: #7a8ba3; border-color: #243a58; } .easygen-modal-btn-secondary:hover { border-color: #7a8ba3; color: #ffffff; } .easygen-modal-btn-primary { background: linear-gradient(90deg, #ff4b91, #ff7657, #ffc35d, #66d698, #4b8eff, #ff4b91); background-size: 200% 100%; color: #fff; animation: easygen-gradient-flow 6s linear infinite; } .easygen-modal-btn-primary:hover { box-shadow: 0 4px 20px rgba(255, 75, 145, 0.4); } /* ============================================================ TOAST (e.g. "Länken kopierad") ============================================================ */ @keyframes easygen-toast-pop { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } #main section.module.easygen .easygen-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); background: var(--info-color); color: var(--inverse-text-color); padding: 12px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); z-index: 10001; animation: easygen-toast-pop 0.25s var(--easygen-ease-smooth); } /* ============================================================ ICON BUTTON in #overlay-control-panel + quick-link badge (these live OUTSIDE the .module.easygen section) ============================================================ */ #overlay-control-panel .btn-easygen { position: relative; } #overlay-control-panel .btn-easygen::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #ff4b91, #4b8eff); } .quick-link-easygen-badge { display: inline-block; background: #1a1a1a; color: #fff; font-size: 9px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.5; } /* tab emphasis while the qlm launch banner is visible — the
  • gets the .is-easygen-banner-target class from setupQlmBanner, dropped again by dismissQlmBanner. transition lives on the attribute-scoped selector so only the easyGen tab animates; siblings keep their existing snap-style underline-on-hover behaviour from product.css. */ #quick-link > .wrapper ul.navigation > li > a[href="#product-easygen"] { transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } #quick-link > .wrapper ul.navigation > li.is-easygen-banner-target > a { background: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(15, 26, 43, 0.16); transform: scale(1.06); transform-origin: center center; } /* once the QLM sticks to the top, drop the white-card emphasis — the banner is below the fold by then and the lifted tab would just look orphaned in the flat sticky strip. transition stays on the base [href] selector above so the card eases out as .stuck flips on, and back in when it flips off (scroll back up). mirrors mobile/easygen.css's desktop→mobile reset. */ #quick-link.stuck > .wrapper ul.navigation > li.is-easygen-banner-target > a { background: none; border-radius: 0; box-shadow: none; transform: none; } /* ============================================================ SPLIT LAYOUT — View 2: side panel + 4-grid ============================================================ */ #main section.module.easygen .easygen-split { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: stretch; max-width: 1580px; margin: 0 auto; } /* --- LEFT PANEL --- */ /* Panel stretches to match the grid's height (align-items: stretch on parent * grid). No sticky here — Markus wants the panel locked to the grid bounds. */ #main section.module.easygen .easygen-panel { display: flex; flex-direction: column; gap: 18px; background: linear-gradient(180deg, rgba(12, 21, 36, 0.96) 0%, rgba(10, 18, 32, 0.96) 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; padding: 20px 20px 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.55); } /* Product card (thumb + name) */ #main section.module.easygen .easygen-panel-product { display: flex; flex-direction: column; gap: 10px; /* Don't shrink — without this, flex-column distribution collapses the * aspect-ratio: 1/1 thumbnail down to a thin sliver. */ flex: 0 0 auto; } #main section.module.easygen .easygen-panel-thumb { width: 100%; /* padding-top:75% gives a 4:3 box equal to the parent's inner width. * Matches product photo aspect (4000x3000 / 2000x1500) and the 4:3 * canvasContentDataURL output. aspect-ratio: 4/3 doesn't reliably size * the box when the only child is position:absolute. */ padding-top: 75%; height: 0; border-radius: 14px; overflow: hidden; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; position: relative; } #main section.module.easygen .easygen-panel-thumb:hover { border-color: var(--easygen-orange); transform: scale(1.01); } #main section.module.easygen .easygen-panel-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45) url("data:image/svg+xml;utf8,") center/28px no-repeat; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } #main section.module.easygen .easygen-panel-thumb:hover::after { opacity: 1; } #main section.module.easygen .easygen-panel-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* manual snapshot-refresh button overlaying the thumb. raised above the ::after magnifier overlay so it stays clickable on hover. own click handler stops propagation, so the thumb's lightbox click stays bound to the surrounding area outside the button (van round 2 #8). */ #main section.module.easygen .easygen-thumb-refresh { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 50%; color: #243a58; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); transition: background-color 0.15s ease, transform 0.12s ease, color 0.15s ease; z-index: 2; } #main section.module.easygen .easygen-thumb-refresh:hover { background: #ffffff; color: var(--easygen-orange); } #main section.module.easygen .easygen-thumb-refresh:active { transform: scale(0.92); } #main section.module.easygen .easygen-thumb-refresh .material-icons-outlined { font-size: 18px; pointer-events: none; } #main section.module.easygen .easygen-panel-name { font-size: 15px; font-weight: 600; color: var(--inverse-text-color); letter-spacing: -0.01em; margin: 0; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Settings list (Färg / Märkning / Logotyp) */ #main section.module.easygen .easygen-panel-settings { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; overflow: hidden; } #main section.module.easygen .easygen-panel-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; padding: 11px 14px; font-size: 13px; background: transparent; border: 0; border-radius: 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--inverse-text-color); transition: background 0.18s ease; width: 100%; } #main section.module.easygen .easygen-panel-row + .easygen-panel-row { border-top: 1px solid rgba(255, 255, 255, 0.04); } #main section.module.easygen .easygen-panel-row:hover { background: rgba(255, 255, 255, 0.04); } #main section.module.easygen .easygen-panel-row:focus-visible { outline: 2px solid var(--easygen-orange); outline-offset: -2px; } #main section.module.easygen .easygen-panel-row.is-flashing { background: rgba(245, 166, 35, 0.18); } /* lock the side-panel jump-rows while generation is in flight. customer can't re-route color / method / logo mid-generation since the AI request was sent with the previous values — letting them click into the configurator now would yield mismatched mockups (van round 2 #8). scoped to .easygen-panel so the product editor stays interactive. */ #main section.module.easygen .easygen-panel.is-generating .easygen-panel-row[data-jump] { pointer-events: none; opacity: 0.5; } #main section.module.easygen .easygen-panel-key { color: var(--easygen-text-muted); font-weight: 500; } #main section.module.easygen .easygen-panel-value { display: flex; align-items: center; gap: 8px; min-width: 0; } #main section.module.easygen .easygen-panel-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } #main section.module.easygen .easygen-color-swatch { width: 14px; height: 14px; min-width: 14px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); background: #2a3a52; } #main section.module.easygen .easygen-logo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; background: rgba(245, 166, 35, 0.10); border: 1px solid rgba(245, 166, 35, 0.25); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--easygen-orange); max-width: 100%; overflow: hidden; } #main section.module.easygen .easygen-logo-chip-mark { width: 18px; height: 18px; min-width: 18px; border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } #main section.module.easygen .easygen-logo-chip-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } #main section.module.easygen .easygen-logo-chip-mark img[src=""], #main section.module.easygen .easygen-logo-chip-mark img:not([src]) { display: none; } #main section.module.easygen .easygen-logo-chip .easygen-panel-text { color: var(--easygen-orange); } /* gerund cycler — qualitative status narrative shown during generation. sits between .easygen-panel-settings and .easygen-panel-footer in the empty side-panel area. JS toggles [hidden] for visibility. layout: vertical stack left-aligned + vertically centered via flex:1 + justify-content: center. all left-align is intentional so primary-text and subtitle don't jump in width when text changes. */ #main section.module.easygen .easygen-panel-gerund { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 18px 8px; text-align: left; } #main section.module.easygen .easygen-panel-gerund[hidden] { display: none; } /* fixed width on both row and subtitle so the block has consistent horizontal extent. the panel's align-items: center centers the 220px block horizontally in the panel area. within 220px the content is left-aligned so phrase swaps don't jump in width. */ #main section.module.easygen .easygen-gerund-row { display: flex; align-items: center; gap: 10px; justify-content: flex-start; width: 220px; } #main section.module.easygen .easygen-gerund-icon { font-size: 20px; color: var(--easygen-orange, #ff7657); flex-shrink: 0; animation: easygenGerundPulse 2.5s ease-in-out infinite; } #main section.module.easygen .easygen-gerund-text { font-size: 15px; line-height: 1.3; color: rgba(255, 255, 255, 0.95); font-weight: 500; transition: opacity 200ms ease, transform 200ms ease; } #main section.module.easygen .easygen-gerund-text.is-swapping { opacity: 0; transform: translateY(4px); } @keyframes easygenGerundPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } /* subtitle with "ghost-span" trick: .ghost holds the full text invisibly so the container reserves layout space for the full text from the first typewriter frame. .text sits absolute on top and animates char-by-char. result: no line-jumps during typing (the naive typewriter problem on wrapping text). font: Plus Jakarta Sans Medium (brand-font), narrow max-width so the text wraps compactly without taking the full side-panel width. min-height on textwrap so the whole gerund block doesn't jump vertically when messages with different line-counts swap (panel-gerund centering otherwise recalculates based on total content height). */ #main section.module.easygen .easygen-gerund-subtitle { display: block; width: 220px; padding-left: 10px; transition: opacity 250ms ease; } #main section.module.easygen .easygen-gerund-subtitle.is-fading { opacity: 0; } #main section.module.easygen .easygen-gerund-subtitle-textwrap { position: relative; display: block; text-align: left; max-width: 100%; min-height: 78px; /* 4 lines × 19.5px line-height — fits the longest message */ } #main section.module.easygen .easygen-gerund-subtitle-ghost { visibility: hidden; pointer-events: none; display: block; } #main section.module.easygen .easygen-gerund-subtitle-text { position: absolute; top: 0; left: 0; width: 100%; } #main section.module.easygen .easygen-gerund-subtitle-ghost, #main section.module.easygen .easygen-gerund-subtitle-text { font-family: 'plus_jakarta', sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); font-weight: 500; letter-spacing: 0; white-space: normal; word-wrap: break-word; } /* caret as ::after pseudo on the text-span so it follows typed text exactly (was previously a sibling-span that landed on a new line after the ghost-span's reserved lines). shown only during the .is-typing phase. */ #main section.module.easygen .easygen-gerund-subtitle-text::after { content: ''; display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: text-bottom; background: rgba(255, 255, 255, 0.75); opacity: 0; } #main section.module.easygen .easygen-gerund-subtitle.is-typing .easygen-gerund-subtitle-text::after { animation: easygenCaretBlink 800ms steps(2, start) infinite; } @keyframes easygenCaretBlink { 0%, 50% { opacity: 0.9; } 51%, 100% { opacity: 0; } } /* scroll-cue (mouse-style icon) — shown ONLY on mobile. on desktop the mockup grid sits to the right of the panel (immediately visible) so the scroll-cue is redundant and stolen. on mobile the grid ends up below the panel and the user needs help understanding they should scroll down. animation: the dot runs from the top toward the middle of the mouse, fades out, and restarts — clearly signals "scroll down". */ #main section.module.easygen .easygen-gerund-scroll-cue { display: none; opacity: 0; transition: opacity 350ms ease; margin-top: 2px; } #main section.module.easygen .easygen-gerund-scroll-cue.is-visible { opacity: 1; } #main section.module.easygen .easygen-scroll-mouse { position: relative; width: 22px; height: 34px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 12px; margin: 0 auto; } #main section.module.easygen .easygen-scroll-mouse-dot { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 3px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); animation: easygenScrollMouseDot 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes easygenScrollMouseDot { 0% { transform: translate(-50%, 0); opacity: 1; } 55% { transform: translate(-50%, 12px); opacity: 0; } 56% { transform: translate(-50%, 0); opacity: 0; } 60% { transform: translate(-50%, 0); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } } /* scroll-cue: hidden on desktop (default), revealed on mobile via mobile/easygen.css. base file keeps the default rule only. */ /* Footer block — pinned to the bottom of the panel by margin-top: auto */ #main section.module.easygen .easygen-panel-footer { display: flex; flex-direction: column; gap: 14px; margin-top: auto; } /* save CTA (anon) OR my inspiration link (logged-in) — both occupy the same row in the panel footer. .easygen-panel-actions is a single column now that the share button has been retired. */ #main section.module.easygen .easygen-panel-actions { display: grid; grid-template-columns: 1fr; gap: 10px; } #main section.module.easygen .easygen-panel-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; color: var(--inverse-text-color); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; font-family: inherit; transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.3s ease; } #main section.module.easygen .easygen-panel-action:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); transform: translateY(-1px); } #main section.module.easygen .easygen-panel-action .material-icons-outlined { font-size: 16px; color: var(--easygen-orange); } /* hide save CTA for logged-in users; hide inspiration link for anon */ #main section.module.easygen[data-is-logged-in="1"] .easygen-action-save { display: none; } #main section.module.easygen[data-is-logged-in="0"] .easygen-action-inspiration { display: none; } /* anon save CTA only surfaces once a generation has completed — nothing to save before that. logged-in already-hidden via the rule above. */ #main section.module.easygen:not(.is-generation-done) .easygen-action-save { display: none; } /* my inspiration link stays visible during generation but is disabled, so the user can't navigate away mid-flow. statusCardEl carries .is-generating between AJAX-success and done/failure/cancel. */ #main section.module.easygen .easygen-panel.is-generating .easygen-action-inspiration { pointer-events: none; opacity: 0.4; cursor: not-allowed; } /* my inspiration — secondary outline-style nav link (not a primary action). subtle text-link feel: no background, dimmed border, arrow slides on hover. distinct enough from a save button that the user reads it as navigation. */ #main section.module.easygen .easygen-action-inspiration { background: transparent; border-color: rgba(255, 255, 255, 0.12); color: var(--easygen-text-muted); font-weight: 500; letter-spacing: 0.2px; } #main section.module.easygen .easygen-action-inspiration:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.22); color: var(--inverse-text-color); } #main section.module.easygen .easygen-action-inspiration .easygen-action-inspiration-arrow { font-size: 15px; color: var(--easygen-text-muted); transition: transform 0.2s var(--easygen-ease-smooth), color 0.2s; } #main section.module.easygen .easygen-action-inspiration:hover .easygen-action-inspiration-arrow { transform: translateX(3px); color: var(--inverse-text-color); } /* Generate button (View 2 panel-footer) — fills the full panel width so the * outer dimensions match the Spara+Dela row above (1fr 1fr + 10px gap = 100%). * Override .easygen-cta's margin-bottom (76px, reserved for the View 1 * credits-tooltip) so the panel-footer footer sits flush at the panel bottom. */ #main section.module.easygen .easygen-cta-panel { margin-top: 0; margin-bottom: 0; display: block; width: 100%; } #main section.module.easygen .easygen-cta-panel .easygen-generate-wrapper { display: flex; width: 100%; } #main section.module.easygen .easygen-cta-panel .easygen-generate-btn { width: 100%; padding: 14px 24px; font-size: 16px; gap: 10px; } #main section.module.easygen .easygen-cta-panel .easygen-generate-icon { font-size: 20px; } /* --- RIGHT PANE --- */ #main section.module.easygen .easygen-results-pane { min-width: 0; } /* Override default 720px max-width when inside split */ #main section.module.easygen .easygen-results-pane .easygen-grid { max-width: 100%; gap: 18px; } /* Larger slots when grid has more room */ #main section.module.easygen .easygen-results-pane .easygen-slot { height: auto; aspect-ratio: 4 / 3; } /* ============================================================ QLM LAUNCH BANNER sits above the quick-link tab strip; announces easyGen with a tail pointing down + a rainbow glow on the easyGen tab. shown once after page load, dismissable, state stored in localStorage. ============================================================ */ /* wrap is in-flow but height:0, so the absolutely-positioned banner floats over the QLM without affecting page layout. */ .easygen-qlm-banner-wrap { position: relative; height: 0; z-index: 3; } /* --qlm-offset-x is set by positionQlmBannerTail to shift the banner from the page-centred default so its centre sits over the easyGen QLM tab. default 0 keeps the existing centred fallback before js runs. */ .easygen-qlm-banner { position: absolute; left: 50%; bottom: 14px; transform: translate(calc(-50% + var(--qlm-offset-x, 0px)), 20px); opacity: 0; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 40px 10px 12px; box-shadow: 0 8px 24px rgba(15, 26, 43, 0.14); white-space: nowrap; max-width: calc(100% - 24px); transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .easygen-qlm-banner.is-visible { opacity: 1; transform: translate(calc(-50% + var(--qlm-offset-x, 0px)), 0); pointer-events: auto; } .easygen-qlm-banner[hidden] { display: none; } /* tail pointing down at the easyGen tab. js sets --qlm-tail-x to the x-offset of the tab's center relative to the banner's left edge, then clamps it so the tail can't fall outside the banner rounding. fallback 50% keeps the tail centered before js runs and on pages where the easyGen tab can't be found. */ .easygen-qlm-banner::after { content: ''; position: absolute; bottom: -7px; left: var(--qlm-tail-x, 50%); transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; filter: drop-shadow(0 2px 1px rgba(15, 26, 43, 0.06)); transition: left 0.2s ease; } .easygen-qlm-banner-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .easygen-qlm-banner-icon img { display: block; width: 100%; height: 100%; } /* shimmer base — kept dark by default; the .is-visible class swaps in the animated background-position sweep. lead span keeps its own rainbow gradient and opts out of the shimmer. */ .easygen-qlm-banner-text { font-size: 13px; font-weight: 600; line-height: 1.3; background: linear-gradient(110deg, #0f1a2b 35%, #6a7488 50%, #0f1a2b 65%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .easygen-qlm-banner.is-visible .easygen-qlm-banner-text { animation: easygenQlmBannerShimmer 5.5s ease-in-out infinite; } /* lead opts out of parent's shimmer text-fill so the solid colour wins */ .easygen-qlm-banner-lead { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #000; -webkit-text-fill-color: #000; font-weight: 800; animation: none; } .easygen-qlm-banner-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: #f0f2f6; color: #5a6573; cursor: pointer; } /* the × glyph sits visually above the centre of the line-box in most fonts (its cross-bar is at x-height, not line-height midpoint), so flex-centring the text node looked off-centre. draw the X with two rotated pseudo-elements instead — guaranteed centring against the button's 24×24 box. the inner is hidden so the source markup stays unchanged and screen-readers still read aria-label. */ .easygen-qlm-banner-close > span { display: none; } .easygen-qlm-banner-close::before, .easygen-qlm-banner-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: currentColor; border-radius: 1px; } .easygen-qlm-banner-close::before { transform: translate(-50%, -50%) rotate(45deg); } .easygen-qlm-banner-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .easygen-qlm-banner-close:hover { background: #e3e6ec; } /* keep the close X clickable while the logo-tool interactive guide is up — guide's `#main *:not(...) { pointer-events: none }` rule otherwise blocks it */ body.interactive-guide-visible .easygen-qlm-banner-wrap .easygen-qlm-banner-close { pointer-events: auto !important; } /* sweep across the text in the first 28% of the cycle, then sit off-screen for the remaining 72% so the shimmer feels periodic, not constant. 5.5s total = ~1.5s sweep + 4s rest. */ @keyframes easygenQlmBannerShimmer { 0% { background-position: 0% 0; } 28% { background-position: 100% 0; } 100% { background-position: 100% 0; } } /* ============================================================ ACCESSIBILITY — reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { #main section.module.easygen .easygen-generate-wrapper, #main section.module.easygen .easygen-generate-wrapper::before, #main section.module.easygen .easygen-generate-wrapper::after, #main section.module.easygen .easygen-generate-text, #main section.module.easygen .easygen-generate-icon, #main section.module.easygen .easygen-header-icon, .easygen-signup-prompt .easygen-modal-icon .material-icons-outlined, .easygen-modal-btn-primary, #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-slot-glow::before, #main section.module.easygen .easygen-slot[data-state="generating"] .easygen-slot-border::before, #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-slot-glow::before, #main section.module.easygen .easygen-slot[data-state="finalizing"] .easygen-slot-border::before, #main section.module.easygen .easygen-slot[data-state="waiting"] .easygen-slot-mask::after, .easygen-qlm-banner.is-visible .easygen-qlm-banner-text { animation: none !important; } .easygen-qlm-banner { transition: opacity 0.2s ease !important; } }