/* Background-scroll lock while any modal is open. Toggled alongside body.style.overflow by every modal's open/close JS — locking body alone isn't reliable in every layout since the actual page scroll can live on the root element instead. !important guards against any per-page overflow rule on html winning by source order. */ html.vt-scroll-lock { overflow: hidden !important; height: 100%; } html.vt-scroll-lock body { overflow: hidden !important; } :root { --white: #ffffff; --bg: #f7f8fc; --bg2: #eef0f8; --border: #e2e5f0; --border2: #cdd2e8; --blue: #2563eb; --blue-light: #eff4ff; --blue-mid: #dbeafe; --blue-dark: #1d4ed8; --text: #0f172a; --text2: #334155; --muted: #596879; --muted2: #636e7e; --green: #16a34a; --font-h: 'Plus Jakarta Sans', sans-serif; --font-b: 'Manrope', sans-serif; --radius: 12px; --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04); --shadow: 0 4px 16px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04); --shadow-lg: 0 12px 40px rgba(37, 99, 235, .14), 0 4px 12px rgba(15, 23, 42, .06); } /* ══════════════ DARK MODE ══════════════ */ [data-theme="dark"] { --white: #111c2e; --bg: #192540; --bg2: #1e2d4d; --border: #263652; --border2: #304468; --blue: #4f8ef7; --blue-light: #0d1e3d; --blue-mid: #142d6b; --blue-dark: #6ba3ff; --text: #eef2ff; --text2: #b0c4e0; --muted: #7090b0; --muted2: #4a6080; --green: #34d399; --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); --shadow: 0 4px 20px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4); --shadow-lg: 0 12px 40px rgba(79,142,247,.18), 0 4px 16px rgba(0,0,0,.5); } [data-theme="dark"] body { background: #080e1c; } [data-theme="dark"] nav { background: rgba(8, 14, 28, 0.96); border-bottom-color: #1e2d4d; } [data-theme="dark"] .mobile-menu { background: #0d1526; border-right-color: #1e2d4d; } [data-theme="dark"] .mobile-link { color: var(--text2); } [data-theme="dark"] .mobile-link:hover { background: var(--bg); color: var(--text); } /* Dark mode toggle button */ .theme-toggle { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border2); background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .15s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .theme-toggle svg { width: 16px; height: 16px; transition: opacity .2s, transform .3s; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Dark mode: fix logo wordmark hardcoded colors */ [data-theme="dark"] .logo-wordmark span:last-child { color: #eef2ff !important; } /* Dark mode: inputs */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg); color: var(--text); border-color: var(--border2); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--muted2); } /* Dark mode: cards & surfaces that use hardcoded white */ [data-theme="dark"] .upload-box, [data-theme="dark"] .tab-btn.active, [data-theme="dark"] .dropdown-menu { background: var(--bg); } /* Dark mode: tool card */ [data-theme="dark"] .tool-card { background: var(--white); border-color: var(--border); } [data-theme="dark"] .tool-card .tab-row { background: var(--bg2) !important; border-bottom-color: var(--border); } [data-theme="dark"] .tool-card .tab-btn { color: var(--muted); } [data-theme="dark"] .tool-card .tab-btn.active { background: transparent !important; color: var(--blue); } [data-theme="dark"] .tool-card .trust-strip { background: var(--bg) !important; border-top-color: var(--border); } /* Dark mode: hero & main sections */ [data-theme="dark"] .hero { background: #080e1c; } [data-theme="dark"] .hero::before { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(79,142,247,.1) 0%, transparent 70%); } [data-theme="dark"] .upload-box { background: var(--white); border-color: var(--border2); } [data-theme="dark"] .upload-box:hover { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(79,142,247,.12), var(--shadow); } [data-theme="dark"] .tab-row { background: var(--bg2); border-color: var(--border); } [data-theme="dark"] .tab-btn.active { background: var(--white); } [data-theme="dark"] .url-input { background: var(--white); border-color: var(--border2); color: var(--text); } [data-theme="dark"] .fmt-chip { background: var(--bg2); border-color: var(--border); color: var(--muted); } [data-theme="dark"] .sample-pill { background: var(--bg); border-color: var(--border); color: var(--text2); } /* Dark mode: footer */ [data-theme="dark"] footer { background: #060c18; border-top-color: #1e2d4d; } /* Dark mode: scrollbar */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #080e1c; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #263652; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #304468; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--white); color: var(--text); font-family: var(--font-b); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: var(--font-b); cursor: pointer; } .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } /* ══════════════ NAVBAR ══════════════ */ nav { position: sticky; top: 0; z-index: 300; background: rgba(255, 255, 255, .93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } /* The global background-scroll lock (scripts.blade.php) pins with `position:fixed; top:-${scrollY}px` whenever any modal (incl. the mobile menu) opens after the page has been scrolled. Since nav is `position:sticky` and a child of body, that negative top offset drags the "stuck" navbar up along with the rest of body's content, pushing it out of the viewport - the navbar/logo appears to vanish. Force it back to a true viewport-relative fixed position while the lock is active; a plain `position:fixed` ancestor (unlike transform/ filter) does not trap descendant fixed elements, so this correctly re-anchors to the real viewport regardless of body's offset. */ html.vt-scroll-lock nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; } .logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; color: var(--text); flex-shrink: 0; } .logo-mark { width: 34px; height: 34px; background: var(--blue); border-radius: 9px; display: grid; place-items: center; } .logo-mark svg { width: 17px; height: 17px; color: #fff; } .logo span { color: var(--blue); } .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; } .nav-links a { padding: 7px 13px; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--muted); transition: color .18s, background .18s; display: flex; align-items: center; gap: 4px; } .nav-links a:hover { color: var(--text); background: var(--bg); } .nav-links a svg { width: 14px; height: 14px; } /* Dropdown */ .nav-dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; min-width: 230px; z-index: 300; } .nav-dropdown:hover .dropdown-menu { display: block; } .dd-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; font-size: .875rem; color: var(--text2); transition: background .15s; } .dd-item:hover { background: var(--bg); } .dd-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--blue-light); display: grid; place-items: center; flex-shrink: 0; } .dd-icon svg { width: 15px; height: 15px; color: var(--blue); } .dd-text-title { font-weight: 700; font-size: .84rem; color: var(--text); } .dd-text-sub { font-size: .76rem; color: var(--muted); margin-top: 1px; } .nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .btn-ghost { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border2); background: var(--white); color: var(--text2); font-size: .875rem; font-weight: 600; transition: border-color .18s, color .18s; } .btn-ghost:hover { border-color: var(--blue); color: var(--blue); } .btn-primary { padding: 9px 20px; border-radius: 8px; background: var(--blue); color: #fff; font-size: .875rem; font-weight: 700; border: none; box-shadow: 0 1px 3px rgba(37, 99, 235, .35); transition: background .18s, box-shadow .18s; } .btn-primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-lg); } .hamburger { display: none; flex-direction: column; gap: 5px; } .hamburger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; display: block; } /* ══════════════ HERO ══════════════ */ .hero { padding: 72px 0 22px; background: var(--white); text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37, 99, 235, .06) 0%, transparent 70%); } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-light); border: 1px solid var(--blue-mid); border-radius: 99px; padding: 5px 14px 5px 8px; font-size: .78rem; font-weight: 700; color: var(--blue); margin-bottom: 22px; letter-spacing: .03em; text-transform: uppercase; animation: fadeUp .5s ease both; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: blink 2s infinite; } @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .3 } } h1 { font-family: var(--font-h); font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--text); max-width: 720px; margin: 0 auto 18px; animation: fadeUp .5s .07s ease both; } h1 .blue-text { color: var(--blue); } .hero-desc { font-size: 1.02rem; color: var(--muted); max-width: 500px; margin: 0 auto 40px; font-weight: 400; line-height: 1.7; animation: fadeUp .5s .13s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Sample pills */ .sample-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; animation: fadeUp .5s .18s ease both; } .sample-pill { display: flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; padding: 5px 14px 5px 6px; font-size: .8rem; font-weight: 600; color: var(--text2); transition: border-color .18s, background .18s, color .18s; } .sample-pill:hover { border-color: var(--blue); background: var(--blue-light); color: var(--blue); cursor: pointer; } .pill-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--blue-mid); display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--blue); } /* Upload box */ .upload-box { background: var(--white); border: 1.5px dashed var(--border2); border-radius: 18px; box-shadow: var(--shadow); max-width: 700px; margin: 0 auto 14px; padding: 44px 32px 36px; cursor: pointer; transition: border-color .2s, box-shadow .2s; animation: fadeUp .5s .21s ease both; } .upload-box:hover { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .07), var(--shadow); } .upload-box input { display: none; } .upload-icon-wrap { width: 68px; height: 68px; background: var(--blue-light); border-radius: 18px; display: grid; place-items: center; margin: 0 auto 16px; } .upload-icon-wrap svg { width: 32px; height: 32px; color: var(--blue); } .upload-title { font-family: var(--font-h); font-size: 1.12rem; font-weight: 700; color: var(--text); margin-bottom: 6px; } .upload-sub { font-size: .875rem; color: var(--muted); margin-bottom: 16px; } .upload-sub strong { color: var(--blue); font-weight: 600; } .fmt-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .fmt-chip { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; } /* Tab row */ .tab-row { display: flex; max-width: 700px; margin: 0 auto 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; gap: 4px; animation: fadeUp .5s .25s ease both; } .tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: 7px; font-size: .84rem; font-weight: 600; color: var(--muted); border: none; background: transparent; transition: all .18s; } .tab-btn svg { width: 15px; height: 15px; } .tab-btn.active { background: var(--white); color: var(--blue); box-shadow: var(--shadow-sm); } /* URL row */ .url-row { display: none; gap: 8px; max-width: 700px; margin: 0 auto; animation: fadeUp .5s .28s ease both; } .url-input { flex: 1; padding: 12px 16px; background: var(--white); border: 1px solid var(--border2); border-radius: 10px; font-family: var(--font-b); font-size: .9rem; color: var(--text); outline: none; transition: border-color .18s, box-shadow .18s; } .url-input::placeholder { color: var(--muted2); } .url-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); } .btn-search { display: flex; align-items: center; gap: 7px; padding: 12px 24px; border-radius: 10px; background: var(--blue); color: #fff; font-size: .875rem; font-weight: 700; border: none; white-space: nowrap; box-shadow: 0 1px 3px rgba(37, 99, 235, .35); transition: background .18s, box-shadow .18s; } .btn-search:hover { background: var(--blue-dark); box-shadow: var(--shadow-lg); } .btn-search svg { width: 16px; height: 16px; } /* Pulse animation after file upload */ @keyframes btnFilePulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.55); transform: scale(1); } 40% { box-shadow: 0 0 0 10px rgba(37,99,235,.0); transform: scale(1.04); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.0); transform: scale(1); } } .btn-file-pulse { animation: btnFilePulse .6s ease-out forwards; } /* Trust row */ .trust-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px; max-width: 700px; margin: 22px auto 0; padding-top: 20px; border-top: 1px solid var(--border); animation: fadeUp .5s .3s ease both; } .trust-item { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); font-weight: 500; } .trust-item svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; } /* ══════════════════════════════════════════════════════ TOOL CARD — v2 card shell wrapping tabs + body + footer ══════════════════════════════════════════════════════ */ .tool-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; max-width: 660px; margin: 24px auto 0; box-shadow: 0 8px 40px rgba(37, 99, 235, .10); overflow: hidden; } /* ── Tab header: card-top bar ── */ .tool-card .tab-row { max-width: 100%; margin: 0; background: #FAFBFF; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0; gap: 0; animation: none; } .tool-card .tab-btn { padding: 13px 8px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 13px; background: none; box-shadow: none; } .tool-card .tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); background: var(--white); box-shadow: none; } /* ── Card body ── */ .tool-body { padding: 28px; } /* ── Reset search-container: no border, no padding (card handles that) ── */ .tool-card #search-container { max-width: 100%; margin: 0; border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; } .tool-card #search-container.file-mode-active:hover { border-color: transparent; box-shadow: none; } /* ── Upload zone: dashed dropbox inside the card body ── */ .upload-zone { border: 2px dashed #CBD5E1; border-radius: 12px; padding: 32px 24px; text-align: center; cursor: pointer; transition: border-color .3s ease, background .3s ease; margin-bottom: 14px; } .tool-card #search-container.file-mode-active:hover .upload-zone { border-color: var(--blue); background: var(--blue-light); } /* Tighter icon inside upload-zone */ .upload-zone .upload-icon-wrap { width: 48px; height: 48px; border-radius: 12px; } .upload-zone .upload-icon-wrap svg { width: 22px; height: 22px; } /* ── Search button: full-width inside card ── */ .tool-card .btn-search { width: 100%; justify-content: center; margin-top: 14px !important; } /* ══════════════════════════════════════════════════════ PLATFORM CHIPS — URL mode "Works with links from" row ══════════════════════════════════════════════════════ */ .mode-platforms { width: 100%; margin-top: 18px; text-align: left; } .mode-platforms-label { display: block; font-size: .72rem; font-weight: 700; color: var(--muted2, #9ca3af); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .mode-platform-chips { display: flex; flex-wrap: wrap; gap: 6px; } .plat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e5e7eb); border-radius: 100px; font-size: .75rem; font-weight: 500; color: var(--text2); white-space: nowrap; } .plat-chip svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted, #6b7280); } .plat-chip--more { background: transparent; border-color: transparent; color: var(--muted2, #9ca3af); font-style: italic; padding-left: 4px; } /* ══════════════════════════════════════════════════════ SAMPLE PILLS — Keyword mode "Try a search" row ══════════════════════════════════════════════════════ */ .mode-sample-pills { display: flex; flex-wrap: wrap; gap: 6px; } .sample-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; background: var(--blue-light, #eff6ff); border: 1px solid rgba(37, 99, 235, .18); border-radius: 100px; font-size: .75rem; font-weight: 500; color: var(--blue, #2563eb); cursor: pointer; transition: background .15s, border-color .15s, transform .1s; font-family: inherit; white-space: nowrap; } .sample-pill:hover { background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .35); transform: translateY(-1px); } .sample-pill:active { transform: translateY(0); } /* ── Trust footer: bottom strip of the card ── */ .tool-card .trust-strip { max-width: 100%; margin: 0; padding: 12px 28px; background: #FAFBFF; border-top: 1px solid var(--border); border-radius: 0; animation: none; gap: 16px; } /* ══════════════ SECTIONS ══════════════ */ .section { padding: 80px 0; } .section-alt { background: var(--bg); } .s-label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; } h2 { font-family: var(--font-h); font-size: clamp(1.55rem, 2.8vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text); margin-bottom: 12px; } .s-desc { font-size: .95rem; color: var(--muted); max-width: 500px; line-height: 1.7; } .s-head { margin-bottom: 48px; } .s-head.center { text-align: center; } .s-head.center .s-desc { margin: 0 auto; } /* Steps */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; transition: box-shadow .22s, border-color .22s, transform .22s; } .step-card:hover { box-shadow: var(--shadow); border-color: var(--blue); transform: translateY(-3px); } .step-num { width: 36px; height: 36px; border-radius: 9px; background: var(--blue); color: #fff; font-family: var(--font-h); font-size: .85rem; font-weight: 800; display: grid; place-items: center; margin-bottom: 16px; } .step-card h3 { font-family: var(--font-h); font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text); } .step-card p { font-size: .875rem; color: var(--muted); line-height: 1.65; } /* Pricing table */ .pricing-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .pricing-table thead tr { background: var(--bg); } .pricing-table th, .pricing-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; } .pricing-table th { font-family: var(--font-h); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .pricing-table tr:last-child td { border-bottom: none; } .pricing-table tbody tr:hover td { background: var(--bg); } .plan-cell { font-family: var(--font-h); font-weight: 800; font-size: .98rem; } .plan-free { color: var(--muted); } .plan-pro { color: var(--blue); } .popular-badge { display: inline-block; background: var(--blue); color: #fff; font-size: .66rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-left: 7px; letter-spacing: .04em; text-transform: uppercase; } .price-val { font-family: var(--font-h); font-weight: 800; font-size: 1.05rem; } .check-y { color: var(--green); } .check-n { color: var(--muted2); } .tbl-btn { padding: 7px 18px; border-radius: 8px; font-size: .8rem; font-weight: 700; font-family: var(--font-b); transition: all .18s; } .tbl-btn-outline { border: 1.5px solid var(--border2); background: transparent; color: var(--text2); } .tbl-btn-outline:hover { border-color: var(--blue); color: var(--blue); } .tbl-btn-fill { border: none; background: var(--blue); color: #fff; box-shadow: 0 1px 3px rgba(37, 99, 235, .3); } .tbl-btn-fill:hover { background: var(--blue-dark); } /* Benefits */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .benefit-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px; transition: box-shadow .22s, transform .22s; } .benefit-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .b-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; } .b-icon svg { width: 22px; height: 22px; } .b-icon.blue { background: var(--blue-light); color: var(--blue); } .b-icon.green { background: #f0fdf4; color: #16a34a; } .b-icon.orange { background: #fff7ed; color: #ea580c; } .b-icon.purple { background: #f5f3ff; color: #7c3aed; } .b-icon.teal { background: #f0fdfa; color: #0d9488; } .b-icon.pink { background: #fdf2f8; color: #db2777; } .benefit-card h3 { font-family: var(--font-h); font-size: .98rem; font-weight: 700; margin-bottom: 8px; color: var(--text); } .benefit-card p { font-size: .875rem; color: var(--muted); line-height: 1.65; } /* Users */ .users-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .user-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; display: flex; align-items: flex-start; gap: 14px; transition: box-shadow .2s, transform .2s; } .user-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .u-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--blue-light); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; } .u-icon svg { width: 20px; height: 20px; } .user-card h3 { font-family: var(--font-h); font-size: .92rem; font-weight: 700; margin-bottom: 5px; color: var(--text); } .user-card p { font-size: .84rem; color: var(--muted); line-height: 1.6; } /* FAQ */ .faq-inner { max-width: 700px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; background: none; border: none; font-family: var(--font-b); font-size: .93rem; font-weight: 600; color: var(--text); text-align: left; } .faq-toggle { width: 28px; height: 28px; border-radius: 7px; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; flex-shrink: 0; transition: background .2s, border-color .2s; } .faq-toggle svg { width: 14px; height: 14px; color: var(--muted); transition: transform .3s, color .2s; } .faq-item.open .faq-toggle { background: var(--blue-light); border-color: var(--blue-mid); } .faq-item.open .faq-toggle svg { transform: rotate(45deg); color: var(--blue); } .faq-body { max-height: 0; overflow: hidden; font-size: .9rem; color: var(--muted); line-height: 1.7; transition: max-height .32s ease, padding .32s; padding: 0; } .faq-item.open .faq-body { max-height: 200px; padding-bottom: 18px; } /* CTA */ .cta-box { background: var(--blue); border-radius: 20px; padding: 64px 48px; text-align: center; position: relative; overflow: hidden; } .cta-box::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(255, 255, 255, .08) 0%, transparent 70%); } .cta-box h2 { color: #fff; margin-bottom: 12px; } .cta-box p { color: rgba(255, 255, 255, .75); margin-bottom: 32px; font-size: .98rem; } .cta-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .btn-white { padding: 13px 30px; border-radius: 9px; background: #fff; color: var(--blue); font-size: .9rem; font-weight: 700; border: none; transition: opacity .18s, transform .15s; } .btn-white:hover { opacity: .9; transform: translateY(-1px); } .btn-outline-w { padding: 13px 24px; border-radius: 9px; background: transparent; color: #fff; font-size: .9rem; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, .4); transition: border-color .18s; } .btn-outline-w:hover { border-color: rgba(255, 255, 255, .9); } /* Footer */ footer { background: var(--bg); border-top: 1px solid var(--border); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-brand p { font-size: .875rem; color: var(--muted); margin-top: 12px; line-height: 1.7; max-width: 250px; } .footer-col h3, .footer-col h4 { font-family: var(--font-h); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text2); margin-bottom: 14px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 9px; } .footer-col a { font-size: .875rem; color: var(--muted); transition: color .18s; } .footer-col a:hover { color: var(--blue); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted2); } .socials { display: flex; gap: 8px; } .soc-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border2); background: var(--white); display: grid; place-items: center; color: var(--muted); transition: border-color .18s, color .18s; } .soc-btn svg { width: 15px; height: 15px; } .soc-btn:hover { border-color: var(--blue); color: var(--blue); } /* Responsive */ @media (max-width: 820px) { .nav-links { display: none; } .hamburger { display: flex; } .steps-grid { grid-template-columns: 1fr; } .benefits-grid { grid-template-columns: 1fr 1fr; } .users-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { /* Search container */ #search-container { padding: 20px 16px 18px; margin: 16px auto 0; } /* Card-shell: let it fill mobile width */ .tool-card { border-radius: 14px; margin: 16px auto 0; } .tool-body { padding: 18px 16px; } .tool-card .trust-strip { padding: 10px 16px; gap: 12px; } .upload-zone { padding: 24px 16px; } /* Reset search-container mobile padding when inside card */ .tool-card #search-container { padding: 0; margin: 0; } /* Tab row — compact horizontal pills */ .tab-row { flex-direction: row; padding: 3px; gap: 3px; margin-bottom: 12px; } /* Card tabs stay inline (no direction change) */ .tool-card .tab-row { padding: 0; gap: 0; margin-bottom: 0; } .tab-btn { flex-direction: column; gap: 4px; padding: 8px 6px; font-size: .72rem; line-height: 1.2; } /* Card tab-btns stay horizontal, slightly tighter */ .tool-card .tab-btn { flex-direction: row; padding: 11px 6px; font-size: .72rem; gap: 5px; } .tab-btn svg { width: 16px; height: 16px; } /* Mode panels */ .mode-url-body, .mode-keyword-body { padding: 4px 0 0; } .mode-panel-title { font-size: .88rem; } .mode-hint { font-size: .76rem; margin-bottom: 12px; } /* Keyword bar stacks */ .keyword-search-bar { flex-direction: column; } .keyword-bar-divider { width: 100%; height: 1px; margin: 0; } .mode-select { min-width: unset; width: 100%; padding: 10px 14px; border-radius: 0; text-align: left; } .keyword-bar-input-wrap { width: 100%; } /* Search button */ .btn-search { width: 100%; justify-content: center; margin-top: 14px !important; } /* Trust strip */ .trust-strip { gap: 14px; padding-top: 16px; } .trust-item { font-size: .75rem; } /* Captcha modal */ #captcha-modal-box { padding: 22px 18px 20px; } .benefits-grid, .users-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .url-row { flex-direction: column; } .cta-box { padding: 44px 24px; } .hero { padding: 48px 0 36px; } .upload-box { padding: 32px 20px 26px; } } @media (max-width: 400px) { .tab-btn { font-size: .68rem; padding: 7px 4px; } .tab-btn svg { width: 14px; height: 14px; } } .tab-label-short { display: none; } .tab-label-full { display: inline; } @media (max-width: 640px) { .tab-label-full { display: none; } .tab-label-short { display: inline; } #tab-keyword { display: none; } } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo-wordmark { font-size: 21px; font-weight: 700; letter-spacing: -0.7px; line-height: 1; } /* ── Hamburger button ── */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; border: 1px solid var(--border2); border-radius: 8px; background: var(--white); cursor: pointer; padding: 0 8px; flex-shrink: 0; transition: border-color .18s; } .hamburger:hover { border-color: var(--blue); } .hamburger span { width: 100%; height: 2px; background: var(--text); border-radius: 2px; display: block; transition: transform .25s ease, opacity .2s ease, width .2s ease; transform-origin: center; } /* X state */ .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile menu panel ── */ .mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, .09); z-index: 190; overflow: hidden; max-height: 0; transition: max-height .32s ease; } .mobile-menu.is-open { display: block; max-height: 600px; } .mobile-menu-inner { padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 2px; } /* Mobile nav links */ .mobile-link { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 9px; font-size: .9rem; font-weight: 500; color: var(--text2); text-decoration: none; transition: background .15s, color .15s; } .mobile-link:hover, .mobile-link.is-active { background: var(--bg); color: var(--text); } .mobile-link svg { width: 16px; height: 16px; color: var(--muted2); transition: transform .22s; flex-shrink: 0; } .mobile-link.is-active svg { transform: rotate(180deg); } /* Mobile dropdown (accordion) */ .mobile-dropdown-body { display: none; padding: 4px 0 6px 12px; flex-direction: column; gap: 2px; } .mobile-dropdown-body.is-open { display: flex; } .mobile-dd-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: .85rem; color: var(--text2); text-decoration: none; transition: background .15s; } .mobile-dd-item:hover { background: var(--bg); } .mobile-dd-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--blue-light); display: grid; place-items: center; flex-shrink: 0; color: var(--blue); } .mobile-dd-icon svg { width: 14px; height: 14px; } .mobile-dd-title { font-weight: 600; font-size: .84rem; color: var(--text); } .mobile-dd-sub { font-size: .75rem; color: var(--muted); } /* Mobile divider */ .mobile-divider { height: 1px; background: var(--border); margin: 8px 0; } /* Mobile auth buttons */ .mobile-auth { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; } .mobile-btn-ghost { width: 100%; padding: 11px 16px; border-radius: 9px; border: 1.5px solid var(--border2); background: var(--white); color: var(--text2); font-size: .875rem; font-weight: 600; font-family: var(--font-b); text-align: center; text-decoration: none; transition: border-color .18s, color .18s; display: block; } .mobile-btn-ghost:hover { border-color: var(--blue); color: var(--blue); } .mobile-btn-primary { width: 100%; padding: 11px 16px; border-radius: 9px; background: var(--blue); color: #fff; font-size: .875rem; font-weight: 700; font-family: var(--font-b); text-align: center; text-decoration: none; border: none; transition: background .18s; display: block; } .mobile-btn-primary:hover { background: var(--blue-dark); } /* ── Overlay ── */ .nav-overlay { display: none; position: fixed; inset: 0; top: 64px; background: rgba(15, 23, 42, .25); z-index: 180; } .nav-overlay.is-open { display: block; } /* ── Responsive breakpoints ── */ @media (max-width: 820px) { .nav-links { display: none !important; } .nav-right .btn-ghost, .nav-right .btn-primary { display: none; } .hamburger { display: flex; } } @media (max-width: 480px) { .logo-wordmark { font-size: 18px; } } /* ═══════════════════════════════════════════════════════════════ LEGAL PAGES — append to main.css (privacy policy, terms of service, cookie policy, etc.) ═══════════════════════════════════════════════════════════════ */ /* ── Page shell ── */ .legal-page { padding: 56px 0 80px; background: var(--white); } /* ── Header ── */ .legal-header { max-width: 860px; margin-bottom: 48px; } .legal-title { font-family: var(--font-h); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--text); letter-spacing: -.03em; line-height: 1.12; margin: 8px 0 14px; } .legal-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .legal-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); font-weight: 500; } .legal-meta-item svg { width: 14px; height: 14px; color: var(--blue); flex-shrink: 0; } /* ── Two-column layout ── */ .legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { display: none; } } /* ── Sidebar TOC ── */ .legal-toc { position: sticky; top: 84px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 20px; } .legal-toc-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted2); margin-bottom: 10px; } .legal-toc nav, .legal-toc-other { display: flex; flex-direction: column; gap: 2px; } .legal-toc-link { display: block; padding: 6px 10px; border-radius: 7px; font-size: .82rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; line-height: 1.4; } .legal-toc-link:hover { background: var(--white); color: var(--blue); } /* ── Article ── */ .legal-body { min-width: 0; } /* ── Dynamic content (TinyMCE output) ── */ .legal-content { font-size: .925rem; color: var(--text2); line-height: 1.78; } .legal-content p { margin-bottom: 16px; } .legal-content p:last-child { margin-bottom: 0; } /* Headings */ .legal-content h2 { font-family: var(--font-h); font-size: 1.12rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; padding-top: 32px; margin: 32px 0 12px; border-top: 1px solid var(--border); scroll-margin-top: 90px; } .legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .legal-content h3 { font-family: var(--font-h); font-size: .97rem; font-weight: 700; color: var(--text); margin: 22px 0 8px; } /* Links */ .legal-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; } .legal-content a:hover { opacity: .8; } /* Bold / italic */ .legal-content strong { color: var(--text); font-weight: 700; } .legal-content em { font-style: italic; } /* Unordered lists */ .legal-content ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; } .legal-content ul li { position: relative; padding-left: 18px; line-height: 1.7; } .legal-content ul li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: unset; } /* Ordered lists */ .legal-content ol { list-style: none; padding: 0; margin: 0 0 16px; counter-reset: legal-ol; display: flex; flex-direction: column; gap: 8px; } .legal-content ol li { position: relative; padding-left: 30px; line-height: 1.7; counter-increment: legal-ol; } .legal-content ol li::before { content: counter(legal-ol); position: absolute; left: 0; top: 1px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: var(--blue-light); border: 1px solid var(--blue-mid); font-size: .66rem; font-weight: 800; color: var(--blue); } /* Tables */ .legal-content table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--white); border-radius: var(--radius, 12px); border: 1px solid var(--border); overflow: hidden; margin: 16px 0; } .legal-content th, .legal-content td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border); } .legal-content tr:last-child td { border-bottom: none; } .legal-content thead tr { background: var(--bg); } .legal-content th { font-family: var(--font-h); font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .legal-content td { color: var(--text2); } .legal-content tbody tr:hover td { background: var(--bg); } /* Blockquote */ .legal-content blockquote { border-left: 3px solid var(--blue); background: var(--bg); border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0; padding: 14px 18px; margin: 16px 0; font-style: italic; color: var(--muted); } /* HR */ .legal-content hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; } /* Inline code */ .legal-content code { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: .82em; font-family: 'SFMono-Regular', 'Consolas', monospace; color: var(--blue); } /* ── Mobile ── */ @media (max-width: 640px) { .legal-page { padding: 36px 0 56px; } .legal-header { margin-bottom: 28px; } .legal-content h2 { font-size: 1rem; padding-top: 24px; margin-top: 24px; } .legal-content p, .legal-content li { font-size: .875rem; } .legal-content th, .legal-content td { padding: 9px 12px; font-size: .82rem; } } /* ══════════════════════════════════════════════════════════════════ SHARED TOOL WIDGET CSS Used on: home.blade.php AND all dedicated tool pages (deep-fake-detector, etc.) ══════════════════════════════════════════════════════════════════ */ /* ── Consent & Loader Overlay Backdrops ───────────────────────── */ #vt-consent-overlay, #vt-loader-overlay, #vt-url-loader-overlay { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(15, 23, 42, .52); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 20px; animation: vtOverlayIn .2s ease both; } #vt-consent-overlay.active, #vt-loader-overlay.active, #vt-url-loader-overlay.active { display: flex; } @keyframes vtOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes vtBoxIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Subtle radial glow on loader backdrop */ #vt-loader-overlay::before, #vt-url-loader-overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(24,95,165,.20), transparent 50%), radial-gradient(circle at 70% 50%, rgba(127,119,221,.15), transparent 50%); pointer-events: none; } /* ── Consent Box ──────────────────────────────────────────────── */ #vt-consent-box { background: var(--white, #fff); border: 1px solid var(--border, #e2e5f0); border-radius: 20px; padding: 36px 32px 28px; max-width: 460px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08); animation: vtBoxIn .25s cubic-bezier(.22,.68,0,1.1) both; text-align: center; } @media (max-width: 480px) { #vt-consent-box { padding: 28px 20px 22px; } } /* ── Consent Content Classes ──────────────────────────────────── */ .vt-consent-icon { width: 56px; height: 56px; background: var(--blue-light, #eff4ff); border: 1px solid var(--blue-mid, #dbeafe); border-radius: 15px; display: grid; place-items: center; margin: 0 auto 18px; color: var(--blue, #2563eb); } .vt-consent-icon svg { width: 24px; height: 24px; } .vt-consent-title { font-family: var(--font-h, inherit); font-size: 1.2rem; font-weight: 800; color: var(--text, #0f172a); margin: 0 0 6px; letter-spacing: -.02em; } .vt-consent-sub { font-size: .855rem; color: var(--muted, #64748b); margin: 0 0 24px; line-height: 1.55; } .vt-consent-checks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; text-align: left; } .vt-consent-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; position: relative; } .vt-consent-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .vt-consent-check-box { width: 18px; height: 18px; min-width: 18px; border: 2px solid var(--border2, #cdd2e8); border-radius: 5px; background: var(--white, #fff); display: grid; place-items: center; transition: border-color .15s, background .15s; margin-top: 1px; flex-shrink: 0; } .vt-consent-check-box::after { content: ''; display: block; width: 9px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .15s ease; margin-top: -2px; } .vt-consent-check input:checked ~ .vt-consent-check-box { background: var(--blue, #2563eb); border-color: var(--blue, #2563eb); } .vt-consent-check input:checked ~ .vt-consent-check-box::after { transform: rotate(-45deg) scale(1); } .vt-consent-check-text { font-size: .845rem; color: var(--text2, #334155); line-height: 1.55; } .vt-consent-check-text a { color: var(--blue, #2563eb); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; } .vt-consent-btn { width: 100%; padding: 13px; background: var(--blue, #2563eb); color: #fff; font-size: .9rem; font-weight: 700; font-family: inherit; border: none; border-radius: 10px; cursor: pointer; transition: background .15s, opacity .15s, box-shadow .15s; margin-bottom: 20px; } .vt-consent-btn:hover:not(:disabled) { background: var(--blue-dark, #1d4ed8); box-shadow: 0 4px 14px rgba(37,99,235,.25); } .vt-consent-btn:disabled { opacity: .4; cursor: not-allowed; } .vt-consent-links { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .vt-consent-links a { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted, #64748b); text-decoration: none; font-weight: 500; transition: color .15s; } .vt-consent-links a:hover { color: var(--blue, #2563eb); } .vt-consent-links a svg { width: 13px; height: 13px; } .vt-consent-divider { width: 1px; height: 14px; background: var(--border, #e2e5f0); } /* ── Loader Box ───────────────────────────────────────────────── */ #vt-loader-box, #vt-url-loader-box { position: relative; z-index: 1; background: #fff; border-radius: 16px; padding: 32px 28px; max-width: 420px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 24px 48px rgba(0,0,0,.30); animation: vtBoxIn .25s cubic-bezier(.22,.68,0,1.1) both; text-align: center; } @media (max-width: 480px) { #vt-loader-box, #vt-url-loader-box { padding: 28px 20px 24px; } } /* ── Scanner Rings ────────────────────────────────────────────── */ .vt-scanner { position: relative; width: 120px; height: 120px; margin: 0 auto 20px; border-radius: 50%; background: #F3F3F1; display: flex; align-items: center; justify-content: center; color: #185FA5; } .vt-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; } .vt-ring-1 { inset: 0; border-top-color: #185FA5; animation: vtSpin 1.4s linear infinite; } .vt-ring-2 { inset: 10px; border-left-color: #7F77DD; animation: vtSpin 2s linear infinite reverse; } .vt-ring-3 { inset: -8px; border-right-color: rgba(24,95,165,.30); animation: vtSpin 3s linear infinite; } @keyframes vtSpin { to { transform: rotate(360deg); } } .vt-loader-title { font-size: 18px; font-weight: 600; color: #0F1419; margin: 0 0 4px; letter-spacing: -.01em; } .vt-loader-sub { font-size: 13px; color: #52525B; margin: 0 0 24px; line-height: 1.5; } .vt-loader-steps { text-align: left; margin: 0 0 20px; width: 100%; } .vt-loader-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; color: #A1A1AA; transition: color .3s ease; } .vt-loader-step.vt-done { color: #0F1419; } .vt-loader-step.vt-active { color: #0F1419; font-weight: 500; } .vt-step-ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #A1A1AA; transition: color .3s ease; } .vt-step-ico svg { width: 16px; height: 16px; display: block; } .vt-loader-step.vt-active .vt-step-ico { color: #185FA5; animation: vtPulse 1.2s ease-in-out infinite; } .vt-loader-step.vt-done .vt-step-ico { color: #1D9E75; animation: none; } .vt-spin-icon { animation: vtSpin .9s linear infinite; transform-origin: center; display: block; } @keyframes vtPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .vt-loader-progress-track { height: 4px; background: #F3F3F1; width: 100%; border-radius: 2px; overflow: hidden; margin-bottom: 10px; } .vt-loader-progress-fill { height: 100%; width: 0%; background: #185FA5; border-radius: 2px; transition: width .4s ease; } .vt-loader-hint { font-size: 11px; color: #A1A1AA; margin: 0; } .vt-loader-cancel-btn { display: flex; align-items: center; gap: 6px; margin-top: 22px; margin-left: auto; padding: 9px 18px; border-radius: 10px; border: 1.5px solid #e2e5f0; background: #f9fafb; color: #6b7280; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .vt-loader-cancel-btn:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; } /* URL fetch failure card (inline, appended into loader box). Selectors are scoped to #vt-url-loader-error, not the bare .vt-url-fail classes, because video-tool.js injects its own same-named (red, dead-code) .vt-url-fail rules later in for an unused legacy banner — bare class selectors here would lose to that on source order despite equal specificity. */ #vt-url-loader-error.vt-url-fail { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; text-align: left; animation: vtBoxIn .25s cubic-bezier(.22,.68,0,1.1) both; } #vt-url-loader-error .vt-url-fail-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: #D97706; color: #fff; display: flex; align-items: center; justify-content: center; } #vt-url-loader-error .vt-url-fail-icon svg { width: 16px; height: 16px; display: block; } #vt-url-loader-error .vt-url-fail-text-wrap { min-width: 0; } #vt-url-loader-error .vt-url-fail-title { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: #92400E; line-height: 1.4; } #vt-url-loader-error .vt-url-fail-sub { margin: 0; font-size: 12.5px; color: #B45309; line-height: 1.5; } [data-theme="dark"] #vt-url-loader-error.vt-url-fail { background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.38); } [data-theme="dark"] #vt-url-loader-error .vt-url-fail-icon { background: #F59E0B; } [data-theme="dark"] #vt-url-loader-error .vt-url-fail-title { color: #FCD34D; } [data-theme="dark"] #vt-url-loader-error .vt-url-fail-sub { color: #FCD34D; opacity: .85; } /* ── Cancel-search confirm modal ───────────────────────────────── */ #vt-cancel-confirm-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(15, 23, 42, .55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 20px; animation: vtOverlayIn .2s ease both; } #vt-cancel-confirm-overlay.active { display: flex; } #vt-cancel-confirm-box { background: var(--white, #fff); border: 1px solid var(--border, #e2e5f0); border-radius: 20px; padding: 36px 32px 28px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08); animation: vtBoxIn .25s cubic-bezier(.22,.68,0,1.1) both; text-align: center; } .vt-cancel-confirm-icon { width: 56px; height: 56px; border-radius: 16px; background: #fff7ed; border: 1.5px solid #fed7aa; display: grid; place-items: center; margin: 0 auto 18px; color: #f97316; } .vt-cancel-confirm-icon svg { width: 26px; height: 26px; } .vt-cancel-confirm-title { font-family: var(--font-h, inherit); font-size: 1.1rem; font-weight: 800; color: var(--text, #111827); margin-bottom: 12px; } .vt-cancel-confirm-sub { font-size: .875rem; color: var(--muted, #6b7280); line-height: 1.65; margin-bottom: 24px; } .vt-cancel-confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .vt-cancel-confirm-btn { padding: 10px 20px; border-radius: 10px; font-size: .875rem; font-weight: 600; font-family: inherit; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s; } .vt-cancel-confirm-btn--no { background: var(--bg, #f9fafb); border-color: var(--border, #e2e8f0); color: var(--muted, #6b7280); } .vt-cancel-confirm-btn--no:hover { background: var(--bg2, #f1f5f9); color: var(--text, #111827); } .vt-cancel-confirm-btn--yes { background: #dc2626; color: #fff; } .vt-cancel-confirm-btn--yes:hover { background: #b91c1c; } /* ── Search Mode Panels ───────────────────────────────────────── */ .search-modes-wrap { display: grid; width: 100%; } .mode-panel { grid-column: 1; grid-row: 1; opacity: 0; pointer-events: none; transition: opacity .22s ease; width: 100%; display: flex; flex-direction: column; align-items: center; } .mode-panel.active { opacity: 1; pointer-events: auto; } /* ── File Preview Strip ───────────────────────────────────────── */ .file-preview-strip { display: none; align-items: center; gap: 10px; margin-top: 14px; background: var(--blue-light, #eff6ff); border: 1px solid var(--blue-mid, #bfdbfe); border-radius: 8px; padding: 10px 14px; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; } .file-preview-strip svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--blue, #2563eb); } .file-preview-name { font-size: .85rem; font-weight: 600; color: var(--blue, #2563eb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .file-preview-size { font-size: .78rem; color: var(--muted, #6b7280); flex-shrink: 0; } .file-preview-clear { background: none; border: none; cursor: pointer; color: var(--muted, #6b7280); padding: 2px; line-height: 1; font-size: 1rem; } /* ── URL Input Panel ──────────────────────────────────────────── */ .mode-url-body { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 6px 0 2px; } .mode-panel-title { font-family: var(--font-h, inherit); font-size: .975rem; font-weight: 700; color: var(--text, #111827); margin: 0 0 5px; letter-spacing: -.01em; } .mode-hint { font-size: .8rem; color: var(--muted, #6b7280); margin: 0 0 18px; max-width: 360px; line-height: 1.55; } .mode-input-wrap { position: relative; width: 100%; } .mode-input-wrap .input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted2, #9ca3af); pointer-events: none; flex-shrink: 0; } .mode-input { width: 100%; padding: 12px 14px 12px 40px; border: 1.5px solid var(--border, #e5e7eb); border-radius: 10px; font-size: .9rem; color: var(--text, #111827); background: var(--bg, #f9fafb); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; font-family: inherit; box-sizing: border-box; } .mode-input:focus { border-color: var(--blue, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.08); background: var(--white, #fff); } .mode-input::placeholder { color: var(--muted2, #9ca3af); } .mode-input--has-action { padding-right: 90px; } .url-paste-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1.5px solid var(--border, #e5e7eb); border-radius: 7px; background: #fff; color: var(--muted2, #6b7280); font-size: .78rem; font-family: inherit; cursor: pointer; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; } .url-paste-btn svg { width: 13px; height: 13px; flex-shrink: 0; } .url-paste-btn:hover { color: var(--blue, #2563eb); border-color: var(--blue, #2563eb); background: #eff6ff; } .url-paste-btn.copied { color: #16a34a; border-color: #16a34a; background: #f0fdf4; } @media (max-width: 640px) { .url-paste-label { display: none; } .url-paste-btn { padding: 5px 8px; gap: 0; } .mode-input--has-action { padding-right: 48px; } } /* ── Loading / Error / Results ────────────────────────────────── */ #vt-error { display: none !important; } #vt-loading { display: none; flex-direction: column; align-items: center; gap: 12px; max-width: 980px; margin: 18px auto 0; } #vt-loading p, #vt-loading > div:not(#vt-progress-track) { font-size: .85rem; color: var(--muted); text-align: center; } #vt-progress-track { width: 100%; background: var(--border); border-radius: 99px; height: 5px; overflow: hidden; } #vt-progress { width: 0%; height: 100%; background: var(--blue); border-radius: 99px; transition: width .4s ease; } #vt-results { max-width: 980px; margin: 28px auto 0; } #captchaLoad { display: none !important; } /* ── Dark Mode Overrides — Shared Widget ─────────────────────── */ [data-theme="dark"] .search-modes-wrap, [data-theme="dark"] .mode-input, [data-theme="dark"] .url-paste-btn { background: var(--bg); border-color: var(--border2); color: var(--text2); } [data-theme="dark"] .mode-panel.active { background: var(--white); } [data-theme="dark"] .mode-panel-title { color: var(--text); } [data-theme="dark"] .mode-hint { color: var(--muted); } [data-theme="dark"] .mode-input { color: var(--text); background: var(--bg); } [data-theme="dark"] .mode-input:focus { border-color: var(--blue); background: var(--bg2); } [data-theme="dark"] .mode-input::placeholder { color: var(--muted2); } [data-theme="dark"] .vt-loader-progress-track { background: var(--bg2); } [data-theme="dark"] .vt-consent-box, [data-theme="dark"] #vt-consent-box { background: var(--white); border-color: var(--border); } [data-theme="dark"] .vt-consent-title { color: var(--text); } [data-theme="dark"] .vt-consent-sub { color: var(--text2); } [data-theme="dark"] .vt-consent-check-box { background: var(--bg); border-color: var(--border2); } [data-theme="dark"] .vt-consent-btn { background: var(--blue); color: #fff; } [data-theme="dark"] .vt-scanner { background: var(--bg2); color: var(--blue); } [data-theme="dark"] #vt-loader-box, [data-theme="dark"] #vt-url-loader-box { background: var(--white); } [data-theme="dark"] .vt-loader-title { color: var(--text); } [data-theme="dark"] .vt-loader-sub { color: var(--text2); } [data-theme="dark"] .vt-loader-step { color: var(--muted2); } [data-theme="dark"] .vt-loader-step.vt-done { color: var(--text); } [data-theme="dark"] .vt-loader-step.vt-active { color: var(--text); } [data-theme="dark"] .file-preview-strip { background: var(--bg2); border-color: var(--border); } /* ══════════════════════════════════════════════════════════════════ ALERT MODAL (vt-alert-overlay — used by both home + dfd pages) ══════════════════════════════════════════════════════════════════ */ #vt-alert-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(10,15,30,.50); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .22s ease; } #vt-alert-overlay.vt-alert-active { opacity: 1; pointer-events: all; } #vt-alert-box { background: #fff; border-radius: 28px; max-width: 460px; width: 100%; max-height: calc(100vh - 40px); box-shadow: 0 40px 100px rgba(8,12,26,.28), 0 8px 30px rgba(0,0,0,.12); position: relative; transform: scale(.92) translateY(24px); opacity: 0; transition: transform .32s cubic-bezier(.34,1.3,.64,1), opacity .26s ease; overflow-y: auto; } #vt-alert-overlay.vt-alert-active #vt-alert-box { transform: none; opacity: 1; } /* ── Gradient header (quota-modal style) — tinted by --vt-alert-accent ── */ #vt-alert-header { position: relative; overflow: hidden; background: linear-gradient( 130deg, color-mix(in srgb, var(--vt-alert-accent, #EF4444) 80%, #000) 0%, var(--vt-alert-accent, #EF4444) 50%, color-mix(in srgb, var(--vt-alert-accent, #EF4444) 65%, #7c3aed) 100% ); display: flex; align-items: center; gap: 16px; padding: 28px 28px 40px; text-align: left; } #vt-alert-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 25%, rgba(255,255,255,.16) 0%, transparent 45%), radial-gradient(circle at 85% 70%, rgba(255,255,255,.09) 0%, transparent 40%); pointer-events: none; } #vt-alert-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 26px; display: block; } #vt-alert-wave path { fill: #fff; } #vt-alert-ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; position: relative; z-index: 1; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } #vt-alert-ico svg { width: 22px; height: 22px; display: block; } #vt-alert-overlay.vt-alert-active #vt-alert-ico { animation: vtAlertIcoPop .38s cubic-bezier(.22,.68,0,1.3) .12s both; } @keyframes vtAlertIcoPop { 0% { transform: scale(0) rotate(-10deg); opacity: 0; } 70% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); } } #vt-alert-head-text { position: relative; z-index: 1; } #vt-alert-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.02em; line-height: 1.3; } #vt-alert-body { padding: 20px 24px 4px; } #vt-alert-msg { font-size: .9rem; color: #334155; margin: 0; line-height: 1.6; } [data-theme="dark"] #vt-alert-msg { color: var(--text2); } /* ── Optional hint callout inside the body (e.g. filesize upgrade tip) ── */ #vt-alert-hint { display: none; margin-top: 14px; padding: 12px 16px; font-size: .85rem; color: #475569; line-height: 1.6; background: #f8fafc; border: 1px solid #e8edf4; border-radius: 12px; } #vt-alert-hint:not(:empty) { display: block; } #vt-alert-hint a { color: #2563eb; font-weight: 600; text-decoration: none; } #vt-alert-hint a:hover { text-decoration: underline; } #vt-alert-hint strong { color: #0f172a; } [data-theme="dark"] #vt-alert-hint { background: #16233d; border-color: #263652; color: #94a7c4; } [data-theme="dark"] #vt-alert-hint a { color: #4f8ef7; } [data-theme="dark"] #vt-alert-hint strong { color: #eef2ff; } #vt-alert-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 18px 24px 22px; } .vt-alert-btn { padding: 11px 26px; border-radius: 11px; font-size: .875rem; font-weight: 600; cursor: pointer; border: none; transition: opacity .15s, transform .12s, box-shadow .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .01em; } .vt-alert-btn:active { transform: scale(.96); } .vt-alert-btn-ok { color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); } .vt-alert-btn-ok:hover { opacity: .88; color: #fff; text-decoration: none; } .vt-alert-btn-ghost { background: #F3F4F6; color: #52525B; } .vt-alert-btn-ghost:hover { background: #E5E7EB; color: #374151; text-decoration: none; } @media (max-width: 480px) { #vt-alert-box { border-radius: 20px; } #vt-alert-header { padding: 22px 20px 36px; gap: 12px; } #vt-alert-actions { padding: 14px 18px 18px; } .vt-alert-btn { padding: 10px 20px; font-size: .82rem; } } /* ── Dark mode ── */ [data-theme="dark"] #vt-alert-box { background: var(--white); border: 1px solid var(--border); } [data-theme="dark"] #vt-alert-wave path { fill: var(--white); } [data-theme="dark"] .vt-alert-btn-ghost { background: var(--bg2); color: var(--text2); } /* ══ QUOTA / LIMIT MODAL (#vt-quota-overlay) ══ */ #vt-quota-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(8,12,26,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease; } #vt-quota-overlay.vt-quota-active { opacity: 1; pointer-events: all; } /* ── Modal box ── */ #vt-quota-box { background: #fff; border-radius: 28px; max-width: 613px; width: 100%; max-height: calc(100vh - 40px); box-shadow: 0 40px 100px rgba(8,12,26,.28), 0 8px 30px rgba(37,99,235,.12); overflow-y: auto; transform: scale(.94) translateY(24px); opacity: 0; transition: transform .32s cubic-bezier(.34,1.3,.64,1), opacity .25s ease; position: relative; } #vt-quota-overlay.vt-quota-active #vt-quota-box { transform: none; opacity: 1; } /* ── Close button ── */ #vt-quota-close { position: absolute; top: 16px; right: 18px; z-index: 2; width: 32px; height: 32px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-size: 1.1rem; line-height: 1; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s; } #vt-quota-close:hover { background: rgba(255,255,255,.32); color: #fff; } /* ── Header ── */ #vt-quota-header { position: relative; overflow: hidden; background: linear-gradient(130deg, #1d4ed8 0%, #2563eb 45%, #7c3aed 100%); display: flex; align-items: center; gap: 16px; padding: 28px 60px 36px 28px; } #vt-quota-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 26px; display: block; } #vt-quota-wave path { fill: #fff; } #vt-quota-ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; position: relative; z-index: 1; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } #vt-quota-ico svg { width: 22px; height: 22px; } #vt-quota-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: -.02em; } #vt-quota-msg { font-size: .84rem; color: rgba(255,255,255,.94); margin: 0; line-height: 1.55; text-shadow: 0 1px 3px rgba(0,0,0,.25); } /* ── Toggle (sits inside #vt-quota-plans, left-aligned) ── */ #vt-quota-toggle { display: flex; justify-content: flex-start; margin-bottom: 4px; } .vt-qtoggle-inner { display: inline-flex; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 99px; padding: 4px; gap: 3px; } .vt-qtab { background: transparent; border: none; padding: 8px 18px; font-size: .8rem; font-weight: 600; color: #64748b; cursor: pointer; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; transition: all .22s ease; font-family: inherit; line-height: 1; } .vt-qtab--active { background: #2563eb; color: #fff; box-shadow: 0 2px 10px rgba(37,99,235,.38); } .vt-qtab-save { font-size: .6rem; font-weight: 700; letter-spacing: .07em; background: #f59e0b; color: #422006; padding: 3px 7px; border-radius: 99px; line-height: 1; } /* ── Body ── */ #vt-quota-body { display: flex; border-bottom: 1px solid #f1f5f9; } /* ── Plan cards column ── */ #vt-quota-plans { flex: 1; padding: 12px 18px 18px; border-right: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 9px; } .vt-qplan { border: 2px solid #e8edf5; border-radius: 14px; padding: 13px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s; background: #fff; } .vt-qplan:hover { border-color: #93c5fd; background: #f5f9ff; box-shadow: 0 4px 14px rgba(37,99,235,.1); transform: translateY(-1px); } .vt-qplan.vt-qplan--selected { border-color: #2563eb; background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%); box-shadow: 0 4px 18px rgba(37,99,235,.15); } .vt-qplan-info { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } .vt-qplan-price { font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -.02em; } .vt-qplan-price span { font-size: .73rem; font-weight: 500; color: #64748b; margin-left: 1px; } .vt-qplan-credits { font-size: .73rem; color: #9ca3af; font-weight: 500; } .vt-qplan-credits::before { content: '/'; margin-right: 4px; } .vt-qplan-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d1d5db; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .18s; } .vt-qplan--selected .vt-qplan-radio { border-color: #2563eb; } .vt-qplan--selected .vt-qplan-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #2563eb; display: block; } /* ── Features column ── */ #vt-quota-features-wrap { flex: 1; padding: 18px 20px; background: linear-gradient(160deg, #fafbff 0%, #f4f7ff 100%); } #vt-quota-features-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #0f172a; margin: 0 0 14px; } #vt-quota-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } #vt-quota-features li { font-size: .83rem; color: #1e293b; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1.4; } #vt-quota-features li::before { content: ''; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: #dbeafe url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; } /* ── Footer actions ── */ #vt-quota-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; background: #fff; } .vt-quota-btn { padding: 11px 26px; border-radius: 12px; font-size: .875rem; font-weight: 700; cursor: pointer; border: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease; letter-spacing: -.01em; font-family: inherit; } .vt-quota-btn-ghost { background: #f1f5f9; color: #475569; border: 1.5px solid #e2e8f0; } .vt-quota-btn-ghost:hover { background: #e2e8f0; color: #334155; text-decoration: none; } .vt-quota-btn-primary { background: linear-gradient(135deg, #b8860b, #d4af37); color: #fff; box-shadow: 0 4px 16px rgba(184,134,11,.35); } .vt-quota-btn-primary:hover { background: linear-gradient(135deg, #9a6f09, #b8860b); box-shadow: 0 6px 22px rgba(184,134,11,.45); transform: translateY(-1px); text-decoration: none; color: #fff; } /* ── Responsive ── */ @media (max-width: 580px) { #vt-quota-body { flex-direction: column; } #vt-quota-plans { border-right: none; border-bottom: 1px solid #f1f5f9; } #vt-quota-actions { justify-content: stretch; flex-direction: column-reverse; } .vt-quota-btn { width: 100%; } #vt-quota-features-wrap { background: #fafbff; } #vt-quota-msg { display: none; } #vt-quota-cancel { display: none; } /* Breathing room: the modal must not span the full screen edge-to-edge */ #vt-quota-overlay { padding: 36px 16px; } #vt-quota-box { max-height: calc(100vh - 72px); border-radius: 22px; } /* Compact type + spacing so the content fits comfortably */ #vt-quota-header { padding: 20px 52px 28px 20px; gap: 12px; } #vt-quota-ico { width: 40px; height: 40px; border-radius: 12px; } #vt-quota-ico svg { width: 18px; height: 18px; } #vt-quota-title { font-size: 1rem; } .vt-qtab { padding: 7px 14px; font-size: .74rem; } #vt-quota-plans { padding: 10px 14px 14px; gap: 8px; } .vt-qplan { padding: 11px 14px; border-radius: 12px; } .vt-qplan-price { font-size: 1rem; } .vt-qplan-credits { font-size: .68rem; } #vt-quota-features-wrap { padding: 14px 16px; } #vt-quota-features { gap: 8px; } #vt-quota-features li { font-size: .78rem; } #vt-quota-features-label { margin-bottom: 10px; } #vt-quota-actions { padding: 12px 16px; } .vt-quota-btn { padding: 10px 22px; font-size: .82rem; } } /* ── Dark mode ── */ [data-theme="dark"] #vt-quota-box { background: #0d1829; border: 1px solid #1e3052; } [data-theme="dark"] #vt-quota-wave path { fill: #0d1829; } [data-theme="dark"] #vt-quota-header { background: linear-gradient(130deg, #1e3a8a 0%, #1d4ed8 45%, #6d28d9 100%); } [data-theme="dark"] #vt-quota-actions { background: #0d1829; } [data-theme="dark"] .vt-qtoggle-inner { background: #1e2d4d; border-color: #304468; } [data-theme="dark"] .vt-qtab { color: #7090b0; } [data-theme="dark"] .vt-qtab--active { background: #2563eb; color: #fff; } [data-theme="dark"] #vt-quota-body { border-bottom-color: #1e3052; } [data-theme="dark"] #vt-quota-plans { border-right-color: #1e3052; } [data-theme="dark"] #vt-quota-features-wrap { background: linear-gradient(160deg, #0a1525 0%, #0d1a30 100%); } [data-theme="dark"] #vt-quota-features-label { color: #eef2ff; } [data-theme="dark"] #vt-quota-features li::before { background: rgba(37,99,235,.18) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; } [data-theme="dark"] #vt-quota-features li { color: #b0c4e0; } [data-theme="dark"] .vt-qplan { border-color: #1e3052; background: transparent; } [data-theme="dark"] .vt-qplan:hover { background: #111e35; border-color: #2a4a8a; box-shadow: 0 4px 14px rgba(0,0,0,.3); } [data-theme="dark"] .vt-qplan--selected { border-color: #2563eb; background: linear-gradient(135deg, #0d2060 0%, #1a1a5e 100%); } [data-theme="dark"] .vt-qplan-price { color: #e8f0ff; } [data-theme="dark"] .vt-qplan-radio { background: #0d1829; border-color: #304468; } [data-theme="dark"] .vt-quota-btn-ghost { background: #1e2d4d; color: #7090b0; border-color: #304468; } [data-theme="dark"] .vt-quota-btn-ghost:hover { background: #263652; color: #b0c4e0; } [data-theme="dark"] #vt-quota-close { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); } [data-theme="dark"] #vt-quota-close:hover { background: rgba(255,255,255,.22); } /* ══════════════════════════════════════════════════════════════════ CAPTCHA MODAL (#captcha-modal-overlay — used by both pages) ══════════════════════════════════════════════════════════════════ */ #captcha-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 16px; animation: captchaFadeIn .18s ease; } #captcha-modal-overlay.active { display: flex; } @keyframes captchaFadeIn { from { opacity: 0; } to { opacity: 1; } } #captcha-modal-box { background: var(--white, #fff); border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1); padding: 28px 28px 24px; max-width: 400px; width: 100%; position: relative; animation: captchaSlideUp .22s ease; text-align: center; } @keyframes captchaSlideUp { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } #captcha-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); background: var(--bg, #f9fafb); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted, #6b7280); font-size: 1rem; line-height: 1; transition: background .15s, color .15s; } #captcha-modal-close:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; } .captcha-modal-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%); border: 1px solid #bfdbfe; display: grid; place-items: center; margin: 0 auto 14px; color: var(--blue, #2563eb); } .captcha-modal-icon svg { width: 24px; height: 24px; } .captcha-modal-title { font-family: var(--font-h, inherit); font-size: 1.05rem; font-weight: 800; color: var(--text, #111827); margin: 0 0 5px; letter-spacing: -.01em; } .captcha-modal-sub { font-size: .8rem; color: var(--muted, #6b7280); margin: 0 0 20px; line-height: 1.55; } #captcha-modal-widget { display: flex; justify-content: center; align-items: center; min-height: 65px; } @media (max-width: 480px) { #captcha-modal-box { padding: 22px 18px 20px; } } /* ── Dark mode ── */ [data-theme="dark"] #captcha-modal-box { background: var(--white); border: 1px solid var(--border); } [data-theme="dark"] .captcha-modal-title { color: var(--text); } [data-theme="dark"] .captcha-modal-sub { color: var(--text2); } .cta-btns a img { width: 20px !important; height: 20px !important; flex-shrink: 1; flex-grow: 0; object-fit: contain; display: inline-block; vertical-align: middle; margin-right: 8px; background: transparent; } .cta-btns a span { flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Background Processing Consent Modal ───────────────────────────── */ #vt-bg-overlay { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(15, 23, 42, .52); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 20px; animation: vtOverlayIn .2s ease both; } #vt-bg-overlay.active { display: flex; } #vt-bg-box { background: var(--white, #fff); border: 1px solid var(--border, #e2e5f0); border-radius: 20px; padding: 36px 32px 28px; max-width: 440px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08); animation: vtBoxIn .25s cubic-bezier(.22,.68,0,1.1) both; text-align: center; } .vt-bg-icon { width: 56px; height: 56px; border-radius: 16px; background: #eff6ff; border: 1.5px solid #bfdbfe; display: grid; place-items: center; margin: 0 auto 18px; color: #2563eb; } .vt-bg-icon svg { width: 26px; height: 26px; } .vt-bg-title { font-family: var(--font-h, inherit); font-size: 1.1rem; font-weight: 800; color: var(--text, #111827); margin-bottom: 12px; } .vt-bg-sub { font-size: .875rem; color: var(--muted, #6b7280); line-height: 1.65; margin-bottom: 24px; } .vt-bg-sub strong { color: var(--text, #111827); } .vt-bg-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .vt-bg-btn { padding: 10px 20px; border-radius: 10px; font-size: .875rem; font-weight: 600; font-family: inherit; cursor: pointer; border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s, color .15s; } .vt-bg-btn--cancel { background: var(--bg, #f9fafb); border-color: var(--border, #e2e8f0); color: var(--muted, #6b7280); } .vt-bg-btn--cancel:hover { background: var(--bg2, #f1f5f9); color: var(--text, #111827); } .vt-bg-btn--confirm { background: #2563eb; color: #fff; } .vt-bg-btn--confirm:hover { background: #1d4ed8; } /* ── Background Processing Queued Modal ─────────────────────────────── */ #vt-queued-overlay { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(15, 23, 42, .52); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 20px; animation: vtOverlayIn .2s ease both; } #vt-queued-overlay.active { display: flex; } #vt-queued-box { background: var(--white, #fff); border: 1px solid var(--border, #e2e5f0); border-radius: 20px; padding: 36px 32px 28px; max-width: 440px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08); animation: vtBoxIn .25s cubic-bezier(.22,.68,0,1.1) both; text-align: center; } .vt-queued-icon { width: 56px; height: 56px; border-radius: 16px; background: #eff6ff; border: 1.5px solid #bfdbfe; display: grid; place-items: center; margin: 0 auto 18px; color: #2563eb; } .vt-queued-icon svg { width: 26px; height: 26px; } .vt-queued-title { font-family: var(--font-h, inherit); font-size: 1.1rem; font-weight: 800; color: var(--text, #111827); margin-bottom: 12px; } .vt-queued-sub { font-size: .875rem; color: var(--muted, #6b7280); line-height: 1.65; margin-bottom: 8px; } .vt-queued-sub a { color: #2563eb; font-weight: 600; } .vt-queued-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } .vt-queued-btn { padding: 10px 20px; border-radius: 10px; font-size: .875rem; font-weight: 600; font-family: inherit; cursor: pointer; border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s, color .15s; text-decoration: none; } .vt-queued-btn--close { background: var(--bg, #f9fafb); border-color: var(--border, #e2e8f0); color: var(--muted, #6b7280); } .vt-queued-btn--close:hover { background: var(--bg2, #f1f5f9); color: var(--text, #111827); } .vt-queued-btn--results { background: #2563eb; color: #fff; } .vt-queued-btn--results:hover { background: #1d4ed8; } /* ── Upload progress phase inside loader overlay ───────────────────── */ #vt-upload-phase { display: none; flex-direction: column; align-items: center; text-align: center; } #vt-analyze-phase { display: flex; flex-direction: column; align-items: center; text-align: center; } #vt-loader-box.upload-phase #vt-upload-phase { display: flex; } #vt-loader-box.upload-phase #vt-analyze-phase { display: none; } .vt-loader-cancel-btn { display: none; } #vt-loader-box.upload-phase .vt-loader-cancel-btn { display: flex; } .vt-upload-icon { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #bfdbfe; background: #eff6ff; display: grid; place-items: center; margin: 0 auto 20px; color: #2563eb; animation: vt-upload-pulse 2s ease-in-out infinite; } @keyframes vt-upload-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.25); } 50% { box-shadow: 0 0 0 12px rgba(37,99,235,0); } } .vt-upload-progress-wrap { display: flex; align-items: center; gap: 10px; width: 100%; margin: 18px 0 8px; } .vt-upload-bar-track { flex: 1; height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; } .vt-upload-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #3b82f6, #2563eb); border-radius: 99px; transition: width .3s ease; } .vt-upload-pct { font-size: .82rem; font-weight: 700; color: #2563eb; min-width: 38px; text-align: right; flex-shrink: 0; } /* ── Dynamic content anchor tag styles ───────────────────────── Targets tags inside all toolContent / CMS-rendered areas ─────────────────────────────────────────────────────────────── */ .s-desc a, .vt-comparison-sub a, .vt-live-desc a, .faq-body a, .captcha-modal-sub a, .s-head a, [class*="vt-step"] a, [class*="vt-benefit"] a, [class*="serve-card"] a, [class*="vt-how"] a { color: #2563eb; text-decoration: underline; text-decoration-color: rgba(37, 99, 235, .35); text-underline-offset: 2px; font-weight: 500; transition: color .15s, text-decoration-color .15s; } .s-desc a:hover, .vt-comparison-sub a:hover, .vt-live-desc a:hover, .faq-body a:hover, .captcha-modal-sub a:hover, .s-head a:hover, [class*="vt-step"] a:hover, [class*="vt-benefit"] a:hover, [class*="serve-card"] a:hover, [class*="vt-how"] a:hover { color: #1d4ed8; text-decoration-color: #1d4ed8; } [data-theme="dark"] .s-desc a, [data-theme="dark"] .vt-comparison-sub a, [data-theme="dark"] .vt-live-desc a, [data-theme="dark"] .faq-body a, [data-theme="dark"] .captcha-modal-sub a { color: #60a5fa; text-decoration-color: rgba(96, 165, 250, .4); } [data-theme="dark"] .s-desc a:hover, [data-theme="dark"] .vt-comparison-sub a:hover, [data-theme="dark"] .vt-live-desc a:hover, [data-theme="dark"] .faq-body a:hover, [data-theme="dark"] .captcha-modal-sub a:hover { color: #93c5fd; text-decoration-color: #93c5fd; } /* ══ ONE-TIME SEARCH UNLOCK MODAL (#vt-ots-overlay) ══ */ #vt-ots-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(8,12,26,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .25s ease; } #vt-ots-overlay.vt-ots-active { opacity: 1; pointer-events: all; } #vt-ots-box { background: #fff; border-radius: 26px; max-width: 430px; width: 100%; margin: auto; box-shadow: 0 40px 100px rgba(8,12,26,.35), 0 8px 30px rgba(37,99,235,.18); overflow: hidden; transform: scale(.92) translateY(28px); opacity: 0; transition: transform .34s cubic-bezier(.34,1.35,.64,1), opacity .25s ease; position: relative; } #vt-ots-overlay.vt-ots-active #vt-ots-box { transform: none; opacity: 1; } /* ── Gradient hero header with wave bottom ── */ #vt-ots-header { background: linear-gradient(130deg, #1d4ed8 0%, #2563eb 45%, #7c3aed 100%); padding: 30px 24px 40px; text-align: center; position: relative; overflow: hidden; } #vt-ots-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 25%, rgba(255,255,255,.18) 0%, transparent 45%), radial-gradient(circle at 85% 70%, rgba(255,255,255,.1) 0%, transparent 40%); pointer-events: none; } #vt-ots-hero-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); border-radius: 16px; backdrop-filter: blur(4px); margin-bottom: 12px; box-shadow: 0 8px 24px rgba(8,12,26,.18); } #vt-ots-hero-ico svg { width: 26px; height: 26px; color: #fff; } #vt-ots-title { position: relative; margin: 0 0 4px; color: #fff; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(8,12,26,.2); } #vt-ots-subtitle { position: relative; margin: 0; color: rgba(255,255,255,.85); font-size: .88rem; font-weight: 500; } #vt-ots-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 26px; display: block; } #vt-ots-wave path { fill: #fff; } #vt-ots-close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 32px; height: 32px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 1.1rem; line-height: 1; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s, transform .18s; } #vt-ots-close:hover { background: rgba(255,255,255,.32); transform: rotate(90deg); } /* ── Body ── */ #vt-ots-body { padding: 18px 28px 26px; text-align: center; } #vt-ots-heading { margin: 0 0 18px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: #0f172a; } #vt-ots-heading span { background: linear-gradient(90deg, #2563eb, #7c3aed); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #vt-ots-feats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 11px; text-align: left; } #vt-ots-feats li { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; color: #475569; } #vt-ots-feats li strong { color: #0f172a; font-weight: 700; } .vt-ots-feat-text { flex: 1; min-width: 0; padding-top: 3px; line-height: 1.5; } #vt-ots-feats .vt-ots-check { margin-top: 1px; } .vt-ots-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; background: linear-gradient(135deg, #dcfce7, #bbf7d0); border-radius: 50%; box-shadow: 0 2px 6px rgba(22,163,74,.18); } .vt-ots-check svg { width: 12px; height: 12px; color: #16a34a; } /* ── Price card ── */ #vt-ots-price-card { background: linear-gradient(135deg, #eff4ff 0%, #f3efff 100%); border: 1.5px solid #dbe4ff; border-radius: 16px; padding: 16px 18px 14px; margin-bottom: 18px; position: relative; } #vt-ots-price-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; } #vt-ots-price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; background: linear-gradient(90deg, #2563eb, #7c3aed); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #vt-ots-price-per { font-size: .95rem; font-weight: 600; color: #64748b; } #vt-ots-billed { display: inline-block; margin-top: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #2563eb; background: rgba(37,99,235,.1); border-radius: 999px; padding: 4px 12px; } /* ── CTA ── */ #vt-ots-unlock { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(130deg, #1d4ed8 0%, #2563eb 55%, #7c3aed 130%); color: #fff; border: none; border-radius: 13px; padding: 15px; font-size: 1rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 26px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .15s, box-shadow .18s, filter .18s; position: relative; overflow: hidden; } #vt-ots-unlock::after { content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); animation: vt-ots-shine 3.2s ease-in-out infinite; } @keyframes vt-ots-shine { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } } #vt-ots-unlock:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.18); filter: brightness(1.05); } #vt-ots-unlock:active { transform: translateY(0); } #vt-ots-unlock:disabled { opacity: .75; cursor: wait; transform: none; } #vt-ots-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px 0 0; font-size: .76rem; font-weight: 500; color: #94a3b8; } #vt-ots-secure svg { width: 13px; height: 13px; color: #16a34a; flex-shrink: 0; } #vt-ots-err { display: none; margin: 12px 0 0; font-size: .84rem; font-weight: 600; color: #dc2626; } /* ── Dark mode ── */ [data-theme="dark"] #vt-ots-box { background: #111c2e; box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 8px 30px rgba(79,142,247,.15); } [data-theme="dark"] #vt-ots-wave path { fill: #111c2e; } [data-theme="dark"] #vt-ots-heading { color: #eef2ff; } [data-theme="dark"] #vt-ots-feats li { color: #94a7c4; } [data-theme="dark"] #vt-ots-feats li strong { color: #eef2ff; } [data-theme="dark"] .vt-ots-check { background: linear-gradient(135deg, rgba(22,163,74,.25), rgba(22,163,74,.15)); box-shadow: none; } [data-theme="dark"] .vt-ots-check svg { color: #4ade80; } [data-theme="dark"] #vt-ots-price-card { background: linear-gradient(135deg, #16233d 0%, #1b2340 100%); border-color: #263652; } [data-theme="dark"] #vt-ots-price { background: linear-gradient(90deg, #4f8ef7, #a78bfa); -webkit-background-clip: text; background-clip: text; } [data-theme="dark"] #vt-ots-price-per { color: #7090b0; } [data-theme="dark"] #vt-ots-billed { color: #4f8ef7; background: rgba(79,142,247,.14); } [data-theme="dark"] #vt-ots-secure { color: #7090b0; } @media (max-width: 480px) { #vt-ots-box { max-width: 100%; border-radius: 20px; } #vt-ots-header { padding: 24px 20px 36px; } #vt-ots-title { font-size: 1.4rem; } #vt-ots-subtitle { display: none; } #vt-ots-body { padding: 14px 20px 22px; } #vt-ots-price { font-size: 2rem; } } /* ══ ONE-TIME PAYMENT SUCCESS MODAL (#vt-otss-overlay) ══ */ #vt-otss-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(8,12,26,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease; } #vt-otss-overlay.vt-otss-active { opacity: 1; pointer-events: all; } #vt-otss-box { background: #fff; border-radius: 26px; max-width: 460px; width: 100%; max-height: calc(100vh - 40px); box-shadow: 0 40px 100px rgba(8,12,26,.35), 0 8px 30px rgba(22,163,74,.15); overflow-y: auto; transform: scale(.92) translateY(28px); opacity: 0; transition: transform .34s cubic-bezier(.34,1.35,.64,1), opacity .25s ease; position: relative; } #vt-otss-overlay.vt-otss-active #vt-otss-box { transform: none; opacity: 1; } #vt-otss-header { background: linear-gradient(130deg, #15803d 0%, #16a34a 50%, #059669 100%); padding: 30px 24px 42px; text-align: center; position: relative; overflow: hidden; } #vt-otss-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 25%, rgba(255,255,255,.18) 0%, transparent 45%), radial-gradient(circle at 85% 70%, rgba(255,255,255,.1) 0%, transparent 40%); pointer-events: none; } #vt-otss-check { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.45); border-radius: 50%; margin-bottom: 12px; box-shadow: 0 8px 24px rgba(8,12,26,.18); animation: vt-otss-pop .5s cubic-bezier(.34,1.6,.64,1) .15s backwards; } @keyframes vt-otss-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } #vt-otss-check svg { width: 30px; height: 30px; color: #fff; } #vt-otss-title { position: relative; margin: 0 0 4px; color: #fff; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(8,12,26,.2); } #vt-otss-subtitle { position: relative; margin: 0; color: rgba(255,255,255,.88); font-size: .88rem; font-weight: 500; } #vt-otss-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 26px; display: block; } #vt-otss-wave path { fill: #fff; } #vt-otss-close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 32px; height: 32px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 1.1rem; line-height: 1; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s, transform .18s; } #vt-otss-close:hover { background: rgba(255,255,255,.32); transform: rotate(90deg); } #vt-otss-body { padding: 18px 28px 26px; } #vt-otss-receipt { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 6px 16px; margin-bottom: 16px; } .vt-otss-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #e2e8f0; font-size: .86rem; } .vt-otss-row:last-child { border-bottom: none; } .vt-otss-row span { color: #64748b; font-weight: 500; } .vt-otss-row strong { color: #0f172a; font-weight: 700; text-align: right; word-break: break-all; } .vt-otss-row .vt-otss-status { color: #16a34a; background: #f0fdf4; border-radius: 999px; padding: 3px 11px; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; word-break: normal; } #vt-otss-feats { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; } #vt-otss-feats li { display: flex; align-items: flex-start; gap: 11px; font-size: .88rem; color: #475569; } #vt-otss-feats li strong { color: #0f172a; font-weight: 700; } #vt-otss-feats .vt-ots-feat-text { flex: 1; min-width: 0; padding-top: 3px; line-height: 1.5; } #vt-otss-feats .vt-ots-check { margin-top: 1px; } #vt-otss-start { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(130deg, #15803d 0%, #16a34a 60%, #059669 130%); color: #fff; border: none; border-radius: 13px; padding: 15px; font-size: 1rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 26px rgba(22,163,74,.35), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .15s, box-shadow .18s, filter .18s; } #vt-otss-start:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(22,163,74,.45), inset 0 1px 0 rgba(255,255,255,.18); filter: brightness(1.05); } #vt-otss-start:active { transform: translateY(0); } /* ── Dark mode ── */ [data-theme="dark"] #vt-otss-box { background: #111c2e; box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 8px 30px rgba(22,163,74,.18); } [data-theme="dark"] #vt-otss-wave path { fill: #111c2e; } [data-theme="dark"] #vt-otss-receipt { background: #16233d; border-color: #263652; } [data-theme="dark"] .vt-otss-row { border-bottom-color: #263652; } [data-theme="dark"] .vt-otss-row span { color: #7090b0; } [data-theme="dark"] .vt-otss-row strong { color: #eef2ff; } [data-theme="dark"] .vt-otss-row .vt-otss-status { color: #4ade80; background: rgba(22,163,74,.15); } [data-theme="dark"] #vt-otss-feats li { color: #94a7c4; } [data-theme="dark"] #vt-otss-feats li strong { color: #eef2ff; } @media (max-width: 480px) { #vt-otss-box { max-width: 100%; border-radius: 20px; } #vt-otss-header { padding: 24px 20px 38px; } #vt-otss-title { font-size: 1.35rem; } #vt-otss-body { padding: 14px 20px 22px; } }