/* * ============================================================ * InstantToolsPro — Global Tools CSS * File : /assets/css/tools.css * Version : 1.0.0 * Purpose : Shared design system for ALL tool landing pages. * Reduces bounce rate via engagement micro-patterns, * mobile-first layout, and fast perceived performance. * * HOW TO USE (add to every tool page's ): * * * PREFIX SYSTEM (to avoid collision with header/footer styles): * .itp-* → InstantToolsPro global components * Tool-specific CSS still lives in each tool file, prefixed * with that tool's own namespace (rpdf-, merge-, compress-…). * * TABLE OF CONTENTS * ───────────────────────────────────────────────────────── * 1. CSS Custom Properties (Design Tokens) * 2. Base Reset & Box Sizing * 3. Typography Scale * 4. Layout Utilities * 5. Breadcrumb * 6. Tool Hero Section * 7. Trust Badges / Pills * 8. Upload Zone (shared shell) * 9. Progress Bar * 10. Error & Alert Boxes * 11. Security Note * 12. File Info Bar * 13. Action Buttons (primary, secondary, download) * 14. Result / Success State * 15. Processing Spinner * 16. Sticky Mobile CTA Bar * 17. 3-Step Reassurance Bar * 18. Related Tools Grid * 19. How-It-Works Steps * 20. SEO / FAQ Section * 21. Engagement Animations (bounce-rate killers) * 22. Scroll Reveal Utility * 23. Responsive Breakpoints * ───────────────────────────────────────────────────────── * ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTIES — Design Tokens Override per-tool by redefining --itp-accent-* in tool CSS. Default accent = red (PDF tools palette). ============================================================ */ :root { /* ── Brand accent (default: red for PDF tools) ── */ --itp-accent: #dc2626; --itp-accent-dark: #b91c1c; --itp-accent-xdark: #991b1b; --itp-accent-light: #fef2f2; --itp-accent-border: #fecaca; /* ── Secondary accent (blue) ── */ --itp-blue: #1a56db; --itp-blue-dark: #1341b5; --itp-blue-light: #eff4ff; --itp-blue-border: #c0d4fb; /* ── Success (green) ── */ --itp-green: #047857; --itp-green-light: #ecfdf5; --itp-green-border: #a7f3d0; /* ── Warning (amber) ── */ --itp-amber: #d97706; --itp-amber-light: #fffbeb; --itp-amber-border: #fcd34d; /* ── Neutrals ── */ --itp-text: #111827; --itp-text-soft: #374151; --itp-muted: #6b7280; --itp-muted-light: #9ca3af; --itp-border: #e5e9f5; --itp-border-dark: #d1d5db; --itp-bg: #f5f7fc; --itp-bg-soft: #f9fafb; --itp-white: #ffffff; /* ── Typography ── */ --itp-font-head: 'Sora', 'Plus Jakarta Sans', sans-serif; --itp-font-body: 'Plus Jakarta Sans', 'DM Sans', sans-serif; /* ── Spacing scale ── */ --itp-space-xs: 4px; --itp-space-sm: 8px; --itp-space-md: 16px; --itp-space-lg: 24px; --itp-space-xl: 40px; --itp-space-2xl: 64px; /* ── Border radii ── */ --itp-r-sm: 8px; --itp-r-md: 12px; --itp-r-lg: 16px; --itp-r-xl: 24px; --itp-r-full: 9999px; /* ── Shadows ── */ --itp-shadow-xs: 0 1px 4px rgba(0,0,0,.06); --itp-shadow-sm: 0 2px 10px rgba(0,0,0,.07); --itp-shadow-md: 0 6px 24px rgba(0,0,0,.10); --itp-shadow-lg: 0 12px 40px rgba(0,0,0,.14); --itp-shadow-accent: 0 6px 22px rgba(220,38,38,.28); /* ── Transitions ── */ --itp-ease: cubic-bezier(.22,.68,0,1.2); --itp-ease-out: cubic-bezier(.16,1,.3,1); --itp-dur-fast: 160ms; --itp-dur-base: 240ms; --itp-dur-slow: 400ms; /* ── Z-index layers ── */ --itp-z-sticky: 900; --itp-z-toast: 1000; --itp-z-modal: 1100; } /* ── Per-tool accent overrides (add class to ) ── */ body.itp-tool-image { --itp-accent:#7c3aed; --itp-accent-dark:#6d28d9; --itp-accent-light:#f5f3ff; --itp-accent-border:#ddd6fe; --itp-shadow-accent:0 6px 22px rgba(124,58,237,.28); } body.itp-tool-video { --itp-accent:#0284c7; --itp-accent-dark:#0369a1; --itp-accent-light:#f0f9ff; --itp-accent-border:#bae6fd; --itp-shadow-accent:0 6px 22px rgba(2,132,199,.28); } body.itp-tool-text { --itp-accent:#059669; --itp-accent-dark:#047857; --itp-accent-light:#ecfdf5; --itp-accent-border:#a7f3d0; --itp-shadow-accent:0 6px 22px rgba(5,150,105,.28); } body.itp-tool-convert { --itp-accent:#ea580c; --itp-accent-dark:#c2410c; --itp-accent-light:#fff7ed; --itp-accent-border:#fed7aa; --itp-shadow-accent:0 6px 22px rgba(234,88,12,.28); } /* PDF tools use default red — no override needed */ /* ============================================================ 2. BASE RESET & BOX SIZING ============================================================ */ .itp-hero *, .itp-tool-wrap *, .itp-how *, .itp-related *, .itp-seo * { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ 3. TYPOGRAPHY SCALE ============================================================ */ .itp-h1 { font-family: var(--itp-font-head); font-size: clamp(1.5rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.14; color: var(--itp-text); } .itp-h2 { font-family: var(--itp-font-head); font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 700; letter-spacing: -.02em; color: var(--itp-text); margin-bottom: var(--itp-space-md); } .itp-h3 { font-family: var(--itp-font-head); font-size: .95rem; font-weight: 700; color: var(--itp-text); margin-bottom: var(--itp-space-sm); } .itp-body { font-family: var(--itp-font-body); font-size: .875rem; line-height: 1.75; color: var(--itp-muted); } .itp-label { font-size: .78rem; font-weight: 600; color: var(--itp-muted); } .itp-caption { font-size: .72rem; color: var(--itp-muted-light); } /* ============================================================ 4. LAYOUT UTILITIES ============================================================ */ .itp-container { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .itp-container-sm { max-width: 820px; margin: 0 auto; padding: 0 20px; } .itp-section { padding: var(--itp-space-xl) 20px; } .itp-divider { border: none; border-top: 1px solid var(--itp-border); margin: var(--itp-space-lg) 0; } .itp-flex { display: flex; align-items: center; } .itp-flex-wrap { display: flex; align-items: center; flex-wrap: wrap; } .itp-gap-sm { gap: var(--itp-space-sm); } .itp-gap-md { gap: var(--itp-space-md); } .itp-gap-lg { gap: var(--itp-space-lg); } .itp-ml-auto { margin-left: auto; } .itp-text-center { text-align: center; } .itp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ 5. BREADCRUMB ============================================================ */ .itp-bc { background: var(--itp-white); border-bottom: 1px solid var(--itp-border); padding: 10px 0; } .itp-bc-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 6px; font-size: .79rem; color: var(--itp-muted); flex-wrap: wrap; } .itp-bc-inner a { color: var(--itp-muted); text-decoration: none; transition: color var(--itp-dur-fast); } .itp-bc-inner a:hover { color: var(--itp-accent); } .itp-bc-sep { color: var(--itp-border-dark); display: flex; align-items: center; } .itp-bc-active { color: var(--itp-accent); font-weight: 600; } /* ============================================================ 6. TOOL HERO SECTION — Compact on mobile, spacious on desktop — Engagement hook: animated gradient bg draws eye ============================================================ */ .itp-hero { background: linear-gradient(160deg, var(--itp-accent-light) 0%, var(--itp-bg-soft) 55%, #fdf4ff 100%); border-bottom: 1px solid var(--itp-border); padding: 28px 20px 30px; text-align: center; position: relative; overflow: hidden; } /* Decorative blobs — pure CSS, zero JS */ .itp-hero::before, .itp-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; animation: itp-blob-drift 8s ease-in-out infinite alternate; } .itp-hero::before { width: 380px; height: 380px; background: radial-gradient(circle, rgba(220,38,38,.08) 0%, transparent 70%); top: -140px; left: -100px; animation-delay: 0s; } .itp-hero::after { width: 280px; height: 280px; background: radial-gradient(circle, rgba(26,86,219,.06) 0%, transparent 70%); bottom: -90px; right: -70px; animation-delay: -4s; } @keyframes itp-blob-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(20px, 12px) scale(1.06); } } .itp-hero-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } /* ── Hero badge (animated dot) ── */ .itp-hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--itp-accent); background: var(--itp-accent-light); border: 1px solid var(--itp-accent-border); padding: 4px 13px; border-radius: var(--itp-r-full); margin-bottom: 12px; } .itp-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--itp-accent); animation: itp-pulse 2s ease-in-out infinite; } @keyframes itp-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(1.5); } } .itp-hero-title { font-family: var(--itp-font-head); font-size: clamp(1.5rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.14; color: var(--itp-text); margin-bottom: 10px; } /* Colored word highlight inside title */ .itp-hero-title .itp-accent-word { color: var(--itp-accent); position: relative; } .itp-hero-title .itp-accent-word::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 3px; background: var(--itp-accent); border-radius: 2px; opacity: .3; } .itp-hero-sub { font-size: clamp(.88rem, 2vw, 1.02rem); color: var(--itp-muted); line-height: 1.65; margin-bottom: 14px; } /* ============================================================ 7. TRUST BADGES / PILLS ============================================================ */ .itp-pills { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .itp-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 4px 12px; border-radius: var(--itp-r-full); white-space: nowrap; } .itp-pill-green { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; } .itp-pill-blue { color: #1a56db; background: #eff4ff; border: 1px solid #c0d4fb; } .itp-pill-red { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; } .itp-pill-purple { color: #6d28d9; background: #f5f3ff; border: 1px solid #ddd6fe; } .itp-pill-orange { color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa; } /* ── Engagement: counter badges (e.g. "2.4M PDFs rotated") ── */ .itp-counter-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; color: var(--itp-muted); background: var(--itp-white); border: 1px solid var(--itp-border); border-radius: var(--itp-r-full); padding: 6px 14px; margin-top: 12px; box-shadow: var(--itp-shadow-xs); } .itp-counter-val { font-family: var(--itp-font-head); font-size: .84rem; font-weight: 800; color: var(--itp-accent); } /* ============================================================ 8. UPLOAD ZONE (shared shell) Tool-specific styling adds only overrides. ============================================================ */ .itp-upload-zone { border: 2px dashed var(--itp-border); border-radius: var(--itp-r-lg); padding: 36px 24px 32px; text-align: center; cursor: pointer; background: var(--itp-bg); transition: border-color var(--itp-dur-base), background var(--itp-dur-base), box-shadow var(--itp-dur-base), transform var(--itp-dur-fast); position: relative; } .itp-upload-zone:hover, .itp-upload-zone.itp-drag-over { border-color: var(--itp-accent); background: var(--itp-accent-light); box-shadow: 0 0 0 4px rgba(220,38,38,.07); transform: translateY(-1px); } .itp-upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } /* Icon wrapper */ .itp-uz-icon { width: 72px; height: 72px; border-radius: 18px; background: var(--itp-accent-light); border: 2px solid var(--itp-accent-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: transform var(--itp-dur-base) var(--itp-ease); } .itp-upload-zone:hover .itp-uz-icon { transform: scale(1.06) rotate(-2deg); } .itp-uz-title { font-family: var(--itp-font-head); font-size: 1.05rem; font-weight: 800; color: var(--itp-text); margin-bottom: 6px; } .itp-uz-sub { font-size: .83rem; color: var(--itp-muted); margin-bottom: 20px; } /* ── PRIMARY CTA inside upload zone ── */ .itp-uz-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--itp-font-body); font-size: 1rem; font-weight: 800; color: var(--itp-white); background: var(--itp-accent); padding: 15px 36px; border-radius: var(--itp-r-md); pointer-events: none; box-shadow: var(--itp-shadow-accent); letter-spacing: .01em; width: 100%; max-width: 340px; transition: background var(--itp-dur-base), box-shadow var(--itp-dur-base), transform var(--itp-dur-fast); /* Engagement: shimmer effect to draw attention */ position: relative; overflow: hidden; } .itp-uz-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); animation: itp-shimmer 2.8s ease-in-out infinite; } @keyframes itp-shimmer { 0% { left: -100%; } 50% { left: 140%; } 100% { left: 140%; } } .itp-upload-zone:hover .itp-uz-cta { background: var(--itp-accent-dark); box-shadow: 0 10px 28px rgba(220,38,38,.42); transform: translateY(-1px); } .itp-uz-hint { font-size: .71rem; color: var(--itp-muted-light); margin-top: 10px; } /* ── Drag-over overlay text ── */ .itp-drag-overlay { display: none; position: absolute; inset: 0; background: var(--itp-accent-light); border-radius: calc(var(--itp-r-lg) - 2px); align-items: center; justify-content: center; flex-direction: column; gap: 10px; font-family: var(--itp-font-head); font-size: 1.1rem; font-weight: 800; color: var(--itp-accent); pointer-events: none; z-index: 2; } .itp-upload-zone.itp-drag-over .itp-drag-overlay { display: flex; } /* ============================================================ 9. PROGRESS BAR ============================================================ */ .itp-prog-track { width: 100%; height: 7px; background: var(--itp-border); border-radius: var(--itp-r-full); overflow: hidden; } .itp-prog-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--itp-accent), #f87171); border-radius: var(--itp-r-full); transition: width .45s ease; } .itp-prog-pct { font-size: .74rem; font-weight: 600; color: var(--itp-muted); margin-top: 6px; text-align: center; } /* ============================================================ 10. ERROR & ALERT BOXES ============================================================ */ .itp-alert { display: none; align-items: flex-start; gap: 9px; font-size: .8rem; font-weight: 600; border-radius: var(--itp-r-sm); padding: 12px 16px; margin-bottom: var(--itp-space-md); line-height: 1.55; animation: itp-shake .35s ease both; } .itp-alert.itp-show { display: flex; } .itp-alert svg { flex-shrink: 0; margin-top: 1px; } @keyframes itp-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .itp-alert-error { color: var(--itp-accent); background: var(--itp-accent-light); border: 1px solid var(--itp-accent-border); } .itp-alert-warn { color: #92400e; background: var(--itp-amber-light); border: 1px solid var(--itp-amber-border); } .itp-alert-info { color: var(--itp-blue); background: var(--itp-blue-light); border: 1px solid var(--itp-blue-border); } .itp-alert-success { color: var(--itp-green); background: var(--itp-green-light); border: 1px solid var(--itp-green-border); } /* ============================================================ 11. SECURITY NOTE ============================================================ */ .itp-sec-note { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--itp-muted); background: var(--itp-green-light); border: 1px solid var(--itp-green-border); border-radius: var(--itp-r-sm); padding: 10px 14px; } .itp-sec-note svg { flex-shrink: 0; color: var(--itp-green); } /* ============================================================ 12. FILE INFO BAR ============================================================ */ .itp-file-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: var(--itp-white); border: 1.5px solid var(--itp-border); border-radius: var(--itp-r-md); box-shadow: var(--itp-shadow-xs); } .itp-file-icon { width: 38px; height: 38px; background: var(--itp-accent-light); border: 1.5px solid var(--itp-accent-border); border-radius: var(--itp-r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .itp-file-name { font-size: .88rem; font-weight: 700; color: var(--itp-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .itp-file-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ── File badges ── */ .itp-fbadge { font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--itp-r-full); } .itp-fbadge-red { color: var(--itp-accent); background: var(--itp-accent-light); border: 1px solid var(--itp-accent-border); } .itp-fbadge-blue { color: var(--itp-blue); background: var(--itp-blue-light); border: 1px solid var(--itp-blue-border); } .itp-fbadge-green { color: var(--itp-green); background: var(--itp-green-light); border: 1px solid var(--itp-green-border); } .itp-file-action { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; color: var(--itp-muted); background: none; border: 1.5px solid var(--itp-border); padding: 6px 12px; border-radius: var(--itp-r-sm); cursor: pointer; transition: color var(--itp-dur-fast), border-color var(--itp-dur-fast); } .itp-file-action:hover { color: var(--itp-accent); border-color: var(--itp-accent-border); } /* ============================================================ 13. ACTION BUTTONS ============================================================ */ /* ── Primary (accent color) ── */ .itp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--itp-font-body); font-weight: 700; border: none; cursor: pointer; text-decoration: none; border-radius: var(--itp-r-md); transition: background var(--itp-dur-base), transform var(--itp-dur-fast), box-shadow var(--itp-dur-base), opacity var(--itp-dur-fast); white-space: nowrap; } .itp-btn:disabled, .itp-btn[disabled] { opacity: .42; cursor: not-allowed; transform: none !important; } /* Sizes */ .itp-btn-sm { font-size: .78rem; padding: 8px 16px; min-height: 36px; } .itp-btn-md { font-size: .88rem; padding: 12px 22px; min-height: 44px; } .itp-btn-lg { font-size: 1rem; padding: 16px 28px; min-height: 52px; } .itp-btn-xl { font-size: 1.05rem;padding: 18px 32px; min-height: 56px; } .itp-btn-full { width: 100%; } /* Variants */ .itp-btn-primary { color: var(--itp-white); background: var(--itp-accent); box-shadow: var(--itp-shadow-accent); } .itp-btn-primary:hover:not(:disabled) { background: var(--itp-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(220,38,38,.38); } .itp-btn-blue { color: var(--itp-white); background: var(--itp-blue); box-shadow: 0 4px 18px rgba(26,86,219,.28); } .itp-btn-blue:hover:not(:disabled) { background: var(--itp-blue-dark); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(26,86,219,.38); } .itp-btn-outline { color: var(--itp-muted); background: var(--itp-white); border: 1.5px solid var(--itp-border); box-shadow: none; } .itp-btn-outline:hover:not(:disabled) { border-color: var(--itp-accent); color: var(--itp-accent); } .itp-btn-ghost { color: var(--itp-muted); background: transparent; border: none; box-shadow: none; padding-left: 8px; padding-right: 8px; } .itp-btn-ghost:hover:not(:disabled) { color: var(--itp-accent); background: var(--itp-accent-light); } /* ── Download button (distinct blue) ── */ .itp-btn-download { color: var(--itp-white); background: var(--itp-blue); box-shadow: 0 4px 18px rgba(26,86,219,.3); font-size: .95rem; padding: 16px 24px; border-radius: var(--itp-r-md); flex: 1; } .itp-btn-download:hover:not(:disabled) { background: var(--itp-blue-dark); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(26,86,219,.4); } /* ============================================================ 14. RESULT / SUCCESS STATE ============================================================ */ .itp-suc-banner { display: flex; align-items: center; gap: 14px; background: var(--itp-green-light); border: 1.5px solid var(--itp-green-border); border-radius: var(--itp-r-md); padding: 18px 22px; animation: itp-pop .4s var(--itp-ease) both; } @keyframes itp-pop { from { opacity:0; transform:scale(.95) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } } .itp-suc-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--itp-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .itp-suc-title { font-size: 1rem; font-weight: 800; color: var(--itp-green); } .itp-suc-sub { font-size: .79rem; color: var(--itp-muted); margin-top: 3px; } /* Result stats row */ .itp-result-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .itp-rs-card { background: var(--itp-bg); border: 1px solid var(--itp-border); border-radius: var(--itp-r-md); padding: 16px 12px; text-align: center; } .itp-rs-val { font-family: var(--itp-font-head); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--itp-green); line-height: 1; margin-bottom: 5px; } .itp-rs-key { font-size: .71rem; font-weight: 500; color: var(--itp-muted); } /* Action row under success */ .itp-action-row { display: flex; gap: 12px; } /* ============================================================ 15. PROCESSING SPINNER ============================================================ */ .itp-processing { display: none; flex-direction: column; align-items: center; gap: 18px; padding: 52px 20px 20px; text-align: center; } .itp-processing.itp-show { display: flex; } .itp-spinner { width: 56px; height: 56px; border: 3.5px solid var(--itp-accent-border); border-top-color: var(--itp-accent); border-radius: 50%; animation: itp-spin .7s linear infinite; } @keyframes itp-spin { to { transform: rotate(360deg); } } .itp-proc-label { font-size: .95rem; font-weight: 700; color: var(--itp-text); } .itp-proc-sub { font-size: .8rem; color: var(--itp-muted); margin-top: -8px; } /* Upload skeleton / loading state */ .itp-upload-loading { display: none; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px; text-align: center; } .itp-upload-loading.itp-show { display: flex; } .itp-ul-spinner { width: 44px; height: 44px; border: 3px solid var(--itp-accent-border); border-top-color: var(--itp-accent); border-radius: 50%; animation: itp-spin .7s linear infinite; } .itp-ul-label { font-size: .88rem; font-weight: 700; color: var(--itp-text); } .itp-ul-sub { font-size: .76rem; color: var(--itp-muted); } /* ============================================================ 16. STICKY MOBILE CTA BAR ── Bounce rate killer: always-visible upload CTA on mobile ============================================================ */ .itp-sticky-bar { display: none; /* JS shows it on mobile */ position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--itp-z-sticky); background: var(--itp-white); border-top: 1.5px solid var(--itp-border); padding: 12px 20px; box-shadow: 0 -4px 24px rgba(0,0,0,.12); /* Slide in animation */ animation: itp-slide-up .35s var(--itp-ease-out) both; } @keyframes itp-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .itp-sticky-inner { display: flex; align-items: center; gap: 12px; max-width: 600px; margin: 0 auto; } .itp-sticky-cta { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-family: var(--itp-font-body); font-size: .95rem; font-weight: 800; color: var(--itp-white); background: var(--itp-accent); border: none; border-radius: var(--itp-r-md); cursor: pointer; box-shadow: var(--itp-shadow-accent); letter-spacing: .01em; transition: background var(--itp-dur-base); } .itp-sticky-cta:hover { background: var(--itp-accent-dark); } .itp-sticky-trust { font-size: .68rem; font-weight: 600; color: var(--itp-muted); text-align: center; white-space: nowrap; line-height: 1.5; } /* ============================================================ 17. 3-STEP REASSURANCE BAR ── Reduces hesitation at upload step ============================================================ */ .itp-steps-bar { display: flex; align-items: center; justify-content: center; padding: 14px 20px; background: var(--itp-white); border: 1.5px solid var(--itp-border); border-radius: var(--itp-r-md); gap: 4px; flex-wrap: wrap; margin-top: 16px; } .itp-step-item { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 110px; justify-content: center; padding: 4px 6px; } .itp-step-num-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--itp-accent-light); border: 2px solid var(--itp-accent-border); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: var(--itp-accent); flex-shrink: 0; } .itp-step-label { font-size: .78rem; font-weight: 600; color: var(--itp-text); white-space: nowrap; } .itp-step-arrow { font-size: .9rem; color: var(--itp-border-dark); flex-shrink: 0; } /* ============================================================ 18. RELATED TOOLS GRID ============================================================ */ .itp-related { background: var(--itp-white); border-top: 1px solid var(--itp-border); border-bottom: 1px solid var(--itp-border); padding: 48px 20px; } .itp-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .itp-view-all { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--itp-blue); padding: 6px 14px; border-radius: var(--itp-r-sm); text-decoration: none; transition: background var(--itp-dur-fast); } .itp-view-all:hover { background: var(--itp-blue-light); } .itp-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .itp-rel-card { background: var(--itp-bg); border: 1px solid var(--itp-border); border-radius: var(--itp-r-md); padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; box-shadow: var(--itp-shadow-xs); transition: transform var(--itp-dur-base) var(--itp-ease), box-shadow var(--itp-dur-base), border-color var(--itp-dur-base); /* Engagement: subtle lift on hover */ } .itp-rel-card:hover { transform: translateY(-5px); box-shadow: var(--itp-shadow-lg); border-color: transparent; } .itp-rel-icon { width: 40px; height: 40px; border-radius: var(--itp-r-sm); background: var(--itp-accent-light); display: flex; align-items: center; justify-content: center; } .itp-rel-card h3 { font-size: .88rem; font-weight: 600; color: var(--itp-text); } .itp-rel-card p { font-size: .76rem; color: var(--itp-muted); line-height: 1.45; flex: 1; } .itp-rel-cta { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700; color: var(--itp-blue); } .itp-rel-cta svg { transition: transform var(--itp-dur-fast); } .itp-rel-card:hover .itp-rel-cta svg { transform: translateX(4px); } /* ============================================================ 19. HOW-IT-WORKS STEPS ============================================================ */ .itp-how { padding: 0 20px 60px; } .itp-how-inner { max-width: 1140px; margin: 0 auto; } .itp-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .itp-step-card { background: var(--itp-white); border: 1px solid var(--itp-border); border-radius: var(--itp-r-md); padding: 22px 18px; text-align: center; box-shadow: var(--itp-shadow-xs); transition: transform var(--itp-dur-base) var(--itp-ease), box-shadow var(--itp-dur-base); } .itp-step-card:hover { transform: translateY(-3px); box-shadow: var(--itp-shadow-md); } .itp-step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--itp-accent-light); border: 2px solid var(--itp-accent-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; font-family: var(--itp-font-head); font-size: .84rem; font-weight: 800; color: var(--itp-accent); } .itp-step-card h3 { font-size: .86rem; font-weight: 700; color: var(--itp-text); margin-bottom: 5px; } .itp-step-card p { font-size: .76rem; color: var(--itp-muted); line-height: 1.55; } /* ============================================================ 20. SEO / FAQ SECTION ============================================================ */ .itp-seo { padding: 48px 20px; } .itp-seo-inner { max-width: 820px; margin: 0 auto; } .itp-seo-inner h2 { font-family: var(--itp-font-head); font-size: 1.06rem; font-weight: 700; margin-bottom: 10px; margin-top: 28px; color: var(--itp-text); } .itp-seo-inner h2:first-child { margin-top: 0; } .itp-seo-inner h3 { font-family: var(--itp-font-head); font-size: .95rem; font-weight: 700; margin-bottom: 6px; margin-top: 20px; color: var(--itp-text); } .itp-seo-inner p { font-size: .875rem; color: var(--itp-muted); line-height: 1.8; margin-bottom: 10px; } /* FAQ accordion (optional enhancement) */ .itp-faq-item { border: 1px solid var(--itp-border); border-radius: var(--itp-r-md); overflow: hidden; margin-bottom: 8px; transition: box-shadow var(--itp-dur-fast); } .itp-faq-item:hover { box-shadow: var(--itp-shadow-sm); } .itp-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--itp-white); border: none; cursor: pointer; font-family: var(--itp-font-body); font-size: .88rem; font-weight: 700; color: var(--itp-text); text-align: left; transition: background var(--itp-dur-fast); } .itp-faq-q:hover { background: var(--itp-bg); } .itp-faq-icon { flex-shrink: 0; transition: transform var(--itp-dur-base); } .itp-faq-item.itp-open .itp-faq-icon { transform: rotate(180deg); } .itp-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .2s; background: var(--itp-bg); font-size: .85rem; color: var(--itp-muted); line-height: 1.75; padding: 0 18px; } .itp-faq-item.itp-open .itp-faq-a { max-height: 400px; padding: 12px 18px 16px; } /* ============================================================ 21. ENGAGEMENT ANIMATIONS — Bounce-rate killers These create motion that encourages the user to stay. ============================================================ */ /* ── Fade-in on load (staggered) ── */ .itp-fu { animation: itp-fadein .45s ease both; } .itp-fu2 { animation: itp-fadein .45s .07s ease both; } .itp-fu3 { animation: itp-fadein .45s .14s ease both; } .itp-fu4 { animation: itp-fadein .45s .21s ease both; } .itp-fu5 { animation: itp-fadein .45s .28s ease both; } .itp-fu6 { animation: itp-fadein .45s .35s ease both; } @keyframes itp-fadein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── Card pop-in ── */ @keyframes itp-card-in { from { opacity: 0; transform: scale(.93) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .itp-card-in { animation: itp-card-in .28s var(--itp-ease) both; } /* ── Bounce attention on upload icon (once) ── */ .itp-bounce-once { animation: itp-bounce-once .8s var(--itp-ease) 1.2s both; } @keyframes itp-bounce-once { 0% { transform: translateY(0); } 35% { transform: translateY(-10px); } 65% { transform: translateY(-4px); } 85% { transform: translateY(-7px); } 100% { transform: translateY(0); } } /* ── Number counter (JS driven, CSS transition) ── */ .itp-count-up { display: inline-block; transition: all .8s var(--itp-ease-out); } /* ── Highlight pulse (draws eye to CTA after a delay) ── */ .itp-pulse-cta { animation: itp-pulse-cta 2s ease-in-out 3s 3; } @keyframes itp-pulse-cta { 0%,100% { box-shadow: var(--itp-shadow-accent); } 50% { box-shadow: 0 0 0 8px rgba(220,38,38,.15), var(--itp-shadow-accent); } } /* ── Skeleton loading shimmer (for upload area while previews generate) ── */ .itp-skeleton { background: linear-gradient(90deg, var(--itp-bg) 25%, #edf0f9 50%, var(--itp-bg) 75%); background-size: 200% 100%; animation: itp-skeleton-sweep 1.4s ease infinite; border-radius: var(--itp-r-sm); } @keyframes itp-skeleton-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── Toast notification (top-right) ── */ .itp-toast { position: fixed; top: 20px; right: 20px; z-index: var(--itp-z-toast); display: none; align-items: center; gap: 10px; background: var(--itp-text); color: var(--itp-white); font-size: .83rem; font-weight: 600; padding: 13px 18px; border-radius: var(--itp-r-md); box-shadow: var(--itp-shadow-lg); animation: itp-toast-in .3s var(--itp-ease-out) both; max-width: 320px; } .itp-toast.itp-show { display: flex; } @keyframes itp-toast-in { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } } .itp-toast-success { background: var(--itp-green); } .itp-toast-error { background: var(--itp-accent); } /* ============================================================ 22. SCROLL REVEAL UTILITY Add .itp-reveal to any element. JS adds .itp-visible. No library needed — pure CSS + tiny IntersectionObserver. (See companion JS snippet in usage guide below) ============================================================ */ .itp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s var(--itp-ease-out); } .itp-reveal.itp-visible { opacity: 1; transform: translateY(0); } .itp-reveal-delay-1 { transition-delay: .1s; } .itp-reveal-delay-2 { transition-delay: .2s; } .itp-reveal-delay-3 { transition-delay: .3s; } .itp-reveal-delay-4 { transition-delay: .4s; } /* ============================================================ 23. RESPONSIVE BREAKPOINTS ============================================================ */ /* ── Large tablet / small desktop (< 1024px) ── */ @media (max-width: 1024px) { .itp-steps-grid { grid-template-columns: repeat(2, 1fr); } .itp-related-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Tablet (< 768px) ── */ @media (max-width: 768px) { .itp-hero { padding: 26px 20px 28px; } .itp-related-head { flex-direction: column; align-items: flex-start; gap: 10px; } .itp-action-row { flex-direction: column; } .itp-result-row { gap: 8px; } .itp-file-bar { flex-wrap: wrap; } .itp-steps-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Mobile (< 640px) ── */ @media (max-width: 639px) { /* Show sticky bar only on mobile — JS still controls display */ body.itp-sticky-active .itp-sticky-bar { display: block; } /* Push content above sticky bar */ .itp-tool-wrap { padding-bottom: 90px; } /* Hero: hide sub on very small screens to expose upload above fold */ .itp-hero-sub { display: none; } .itp-hero { padding: 20px 16px 22px; } .itp-steps-grid { grid-template-columns: repeat(2, 1fr); } .itp-related-grid { grid-template-columns: repeat(2, 1fr); } .itp-result-row { grid-template-columns: repeat(3, 1fr); gap: 6px; } .itp-action-row { flex-direction: column; } .itp-step-arrow { display: none; } .itp-steps-bar { padding: 12px 14px; } .itp-step-item { min-width: 90px; } .itp-related-grid { grid-template-columns: 1fr 1fr; } } /* ── Very small (< 420px) ── */ @media (max-width: 420px) { .itp-uz-cta { font-size: .9rem; padding: 13px 18px; } .itp-btn-xl { font-size: .95rem; padding: 15px 20px; } } /* ── Respect reduced motion preference ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }