/* ============================================================================= Status Downloader — site stylesheet Served raw at /src/css/style.css (server.js), which is what every page links. `npm run build:css` writes a minified copy to public/css/style.css; only 404.html loads that one, so editing this file alone leaves 404.html stale. pinstream-downloader.html does not use this stylesheet at all (Tailwind CDN). Theming: one shared component layer, re-coloured per page by a data-platform attribute on that re-points --platform-color. Add a platform by adding a [data-platform="…"] block below — component rules should not need touching. z-index scale in use — keep new values inside it rather than inventing higher ones: -1 body background gradients 1–2 card hover lifts, active tab 100 sticky header 200 nav dropdown, modal overlay 999 sticky bottom download bar Note the sticky bottom bar (999) currently outranks the modal overlay (200), so it stays visible over an open modal. ============================================================================= */ /* ── Reset & Base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Design Tokens ─────────────────────────────────────────────────────── */ /* Light-only palette. The site has no dark mode: there is no theme toggle, no [data-theme] rule and no prefers-color-scheme query anywhere in this file, so these are the values that always apply. */ :root { --primary: #7c5cfc; --primary-light: #8b5cf6; --accent: #7c5cfc; --accent2: #8b5cf6; --bg: #ffffff; --bg2: #f0f2f7; --bg3: #e6e9f0; --bg-alt: #f0f2f7; --bg-card: #ffffff; --bg-card-hover: #f7f8ff; --card: #ffffff; --text: #0a0a0f; --text-secondary: #4b5563; --text-muted: #9ca3af; --muted: #6b7280; /* Not white — it is the "maximum contrast against the page" token, which on a light background means near-black. Renaming it would touch every consumer. */ --white: #0a0a0f; --border: rgba(0, 0, 0, 0.09); --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.07); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.09), 0 16px 48px rgba(0, 0, 0, 0.09); --success: #34d399; --green: #34d399; --error: #ef4444; --warning: #f59e0b; /* Brand colours, used where a platform must be shown in its own colour regardless of which page is active (e.g. nav icons on the home page). */ --ig: #e1306c; --fb: #1877f2; --yt: #ff0000; --radius: 12px; --radius-lg: 18px; --radius-sm: 8px; --transition: 0.2s ease; /* Fallback accent for pages that set no data-platform; overridden below. */ --platform-color: #a78bfa; --platform-color-rgb: 167, 139, 250; } /* ── Platform Color Schemes ──────────────────────────────────────────── */ /* data-platform is set on per page and re-points --platform-color, so the shared components below theme themselves without any per-page overrides. --platform-color-rgb holds the same colour as a bare "r, g, b" triplet because CSS cannot decompose a hex value: it is what makes rgba(var(--platform-color-rgb), 0.4) possible. Keep the two in sync — nothing enforces it. */ [data-platform="home"] { --platform-color: #ff006e; --platform-color-rgb: 255, 0, 110; --platform-gradient: linear-gradient(135deg, #bc08fd, #ff006e); } [data-platform="instagram"] { --platform-color: #ff4da8; --platform-color-rgb: 255, 77, 168; } [data-platform="instagram-private"] { --platform-color: #ff4da8; --platform-color-rgb: 255, 77, 168; --platform-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } [data-platform="facebook"] { --platform-color: #1877f2; --platform-color-rgb: 24, 119, 242; } [data-platform="youtube"] { --platform-color: #ff0000; --platform-color-rgb: 255, 0, 0; } [data-platform="pinterest"] { --platform-color: #e60023; --platform-color-rgb: 230, 0, 35; } /* Black, not the legacy Twitter blue — matches the current X branding. */ [data-platform="twitter"] { --platform-color: #000000; --platform-color-rgb: 0, 0, 0; } [data-platform="audio"] { --platform-color: #1db954; --platform-color-rgb: 29, 185, 84; } html { scroll-behavior: smooth; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; min-height: 100vh; } body[data-platform="instagram-private"]::before { background: radial-gradient(ellipse at 50% -5%, #bc1888, transparent 55%), radial-gradient(ellipse at 0% 100%, #f09433, transparent 80%), radial-gradient(ellipse at 100% 100%, #e6683c, transparent 80%); opacity: 0.15; } h1, h2, h3, h4 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.2; } a { color: var(--accent2); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary); text-decoration: underline; } .text-column p, .info-card-desc, .compare-intro, .use-case p, details p { font-size: 0.9375rem; line-height: 1.7; color: var(--muted); } .info-card-desc { color: var(--text-secondary); } .step p, .feature p, .platform-card p, .device-body p, .features-grid li { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); } /* ── Dynamic Platform Icons ────────────────────────────────────────────────── */ .dynamic-icon { width: 48px; height: 48px; background: var(--platform-gradient, var(--platform-color, var(--accent))); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; mask-repeat: no-repeat; mask-position: center; margin-bottom: 1rem; display: inline-block; } /* ── Shared Flex Center ────────────────────────────────────────────────── */ .platform-header-box, .tab, .story-download-btn, .btn-close, .preview-media, .step-num, .platform-icon, .feature-icon, .modal-overlay, .modal-step-num, .play-overlay, .dl-tab, .mobile-menu-btn { display: flex; align-items: center; justify-content: center; } .hidden { display: none; } .text-center { text-align: center; } .inline-link { color: var(--platform-color, var(--primary)); text-decoration: underline; cursor: pointer; transition: color var(--transition); } .inline-link:hover { color: var(--platform-color); } /* ── Container ─────────────────────────────────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ── Container-wrap ─────────────────────────────────────────────────────────── */ .container-wrap { display: flex; justify-content: space-between; align-items: center; gap: 50px; } .pinterest-downloader-steps { max-width: 60%; width: 100%; } .grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; padding-top: 30px; align-items: center; } .gif-left-wrapper { text-align: center; } .hero-left-content { width: 60%; text-align: left; } .hero-left-content p.hero-subtitle { margin: 0 0 1.1rem; } .hero-left-content div#downloadCard { margin: 0; } .text-column p { margin-bottom: 15px; } .hero-right-img { width: 40%; } .hero-right-img img { width: 100%; height: 100%; object-fit: contain; } /* ── Platform Header & Icons ───────────────────────────────────────────── */ .platform-header-box { gap: 8px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .platform-title { color: var(--text); font-weight: 600; font-size: 1.1rem; } /* ── Header ────────────────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 100; background: transparent; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 12px 0; transition: background 0.3s ease, border-color 0.3s ease; } .header .container { justify-content: space-between; } .header .container, .logo { display: flex; align-items: center; } .logo { gap: 10px; font-size: 1.25rem; font-weight: 700; } .logo, .logo:hover { color: var(--text); } .logo:hover { text-decoration: none !important; } .logo-icon { width: auto; height: 62px; } .nav { gap: 5px; } .nav, .nav a { display: flex; align-items: center; } .nav a { gap: 8px; padding: 10px 16px; border-radius: 50px; color: var(--text-card); font-size: 1rem; font-weight: 600; text-decoration: none !important; letter-spacing: 0.01em; white-space: nowrap; } .nav a, .nav a i { /* JS handles 3D transitions */ transition: background 0.3s ease, color 0.3s ease; } .nav a i { font-size: 1.55em; } .nav a i.fa-solid.fa-music { font-size: 1.2em; } /* ── Social Media Nav Links ──────────────────────────────────────────────── */ .nav a.nav-ig:hover, .nav a.nav-ig.active { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #ffffff; -webkit-text-fill-color: #ffffff; } .nav a.nav-ig:hover i, .nav a.nav-ig.active i { background: none; -webkit-text-fill-color: #ffffff; color: #ffffff; } .nav a.nav-fb:hover, .nav a.nav-fb.active { background: #1877f2; color: #ffffff; } .nav a.nav-fb:hover i, .nav a.nav-fb.active i { color: #ffffff; } .nav a.nav-yt:hover, .nav a.nav-yt.active { background: #ff0000; color: #ffffff; } .nav a.nav-yt:hover i, .nav a.nav-yt.active i { color: #ffffff; } .nav a.nav-tw:hover, .nav a.nav-tw.active { background: var(--text); color: var(--bg); } .nav a.nav-tw:hover i, .nav a.nav-tw.active i { color: var(--bg); } .nav a.nav-pin:hover, .nav a.nav-pin.active { background: #e60023; color: #ffffff; } .nav a.nav-pin:hover i, .nav a.nav-pin.active i { color: #ffffff; } .nav a.nav-audio:hover, .nav a.nav-audio.active { background: #10b981; color: #ffffff; } .nav a.nav-audio:hover i, .nav a.nav-audio.active i { color: #ffffff; } /* ── Nav Dropdown ──────────────────────────────────────────────────────── */ .nav-item { position: relative; } .nav-submenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: transparent; z-index: 200; flex-direction: column; gap: 0; min-width: 150px; padding: 8px 0; } .nav-submenu::before { content: ""; display: block; position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0 0 10px 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22); z-index: -1; } .nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu { display: flex; } .nav-submenu a { display: flex !important; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 7px; white-space: nowrap; font-size: 0.83rem; color: var(--text-secondary) !important; position: relative; z-index: 1; } .nav-submenu a:hover { background: var(--bg-card-hover); color: var(--text) !important; } /* ── Mobile Menu Button ────────────────────────────────────────────────── */ .mobile-menu-btn { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 4px; } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero.home-hero { min-height: calc(100vh - 80px); } .hero { /* padding: 60px 0 50px; */ position: relative; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 40px; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); font-weight: 800; line-height: 1.1; margin-bottom: 16px; color: var(--white); max-width: 1000px; margin-left: auto; margin-right: auto; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%); -webkit-background-clip: text; background-clip: text; } .hero h1, .hero h1 .highlight { -webkit-text-fill-color: transparent; } .hero h1 .highlight { background: linear-gradient(135deg, #a78bfa, #7c5cfc); -webkit-background-clip: text; background-clip: text; } .hero p, .hero-subtitle { font-size: 1.1rem; color: var(--muted); max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.7; } .hero-feature-text p { font-size: 0.925rem; margin: 0; } /* ── Hero Features Bar ─────────────────────────────────────────────────── */ .hero-features-bar { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px 32px; max-width: 1200px; width: calc(100% - 48px); margin: 35px auto 0; /* auto top pushes to bottom, auto left/right centers it */ box-shadow: var(--shadow); border: 1px solid var(--border); gap: 20px; } .hero-feature-item { display: flex; align-items: center; gap: 15px; flex: 1; text-align: left; } .hero-feature-icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; /* background: rgba(var(--platform-color-rgb), 0.1); */ background: var(--platform-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-feature-icon img { width: 26px; height: 26px; /* filter: invert(40%) sepia(87%) saturate(2250%) hue-rotate(240deg) brightness(101%) contrast(97%); */ filter: invert(1) brightness(100); } .hero-feature-text { display: flex; flex-direction: column; } .hero-feature-title { color: var(--text); font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; line-height: 1.2; } .hero-feature-desc { color: var(--muted); font-size: 0.85rem; line-height: 1.4; margin: 0; } .hero-feature-divider { width: 1px; height: 48px; background: rgba(0, 0, 0, 0.06); flex-shrink: 0; } @media (max-width: 992px) { .hero-features-bar { flex-wrap: wrap; gap: 25px; margin-top: 20px; padding: 20px; } .hero-feature-item { min-width: calc(50% - 15px); } .hero-feature-divider { display: none; } } @media (max-width: 576px) { .hero-feature-item { min-width: 100%; } } /* ── Hero Badge ────────────────────────────────────────────────────────── */ .hero p, .hero-subtitle, .hero-badge { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--platform-color-rgb), 0.14); border: 1px solid rgba(var(--platform-color-rgb), 0.3); border-radius: 100px; padding: 5px 14px; font-size: 0.78rem; color: var(--platform-color); margin-bottom: 1.5rem; font-weight: 500; } .hero-badge::before { content: "✦"; font-size: 0.65rem; color: var(--platform-color); } .hero-badge { background: rgba(var(--platform-color-rgb), 0.1); border-color: rgba(var(--platform-color-rgb), 0.25); } /* ── Download Card ─────────────────────────────────────────────────────── */ .download-card { max-width: 640px; margin: 0 auto; background: var(--bg-card); border: 1px solid rgba(var(--platform-color-rgb), 0.15); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 2px 10px rgba(var(--platform-color-rgb), 0.1), 0 0px 0px rgba(var(--platform-color-rgb), -0.24); } .tab { flex: 1; gap: 8px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--transition); font-family: inherit; } .tab:hover { background: var(--bg-card-hover); color: var(--text); } .tab.active { /* background: rgba(var(--platform-color-rgb), 0.12); */ background: white; border-color: var(--platform-color); color: var(--platform-color); } .input-group { display: flex; gap: 10px; } .input-wrapper { flex: 1; position: relative; min-width: 0; } .input-wrapper input { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color var(--transition); } .input-wrapper input::placeholder { color: var(--text-muted); } .input-wrapper input:focus { border-color: var(--platform-color, var(--primary)); } .input-wrapper input.valid { border-color: var(--success); } .input-wrapper input.invalid { border-color: var(--error); } .input-hint-row { justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .input-hint-row, .hint-actions { display: flex; align-items: center; } .hint-actions { gap: 14px; flex-shrink: 0; } .btn-browse { padding: 0; border: none; background: none; color: var(--platform-color, var(--primary-light)); cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 500; font-family: inherit; transition: color var(--transition); white-space: nowrap; } .btn-browse:hover { color: var(--platform-color, var(--primary)); } .btn-clear { padding: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 500; font-family: inherit; transition: color var(--transition); white-space: nowrap; } .btn-clear:hover { color: var(--error); } .input-status { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; line-height: 1; } .input-hint { display: flex; align-items: center; margin-left: 3px !important; margin-bottom: 0 !important; margin-top: 18px; text-align: left; gap: 6px; font-size: 0.82rem !important; color: var(--text-muted); flex: 1; min-width: 0; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border: none; border-radius: var(--radius-sm); background: var(--platform-gradient, var(--platform-color, var(--accent))); color: white; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: filter 0.2s, transform 0.15s, box-shadow 0.2s; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(124, 92, 252, 0.32); } .btn-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(124, 92, 252, 0.52); color: white; text-decoration: none; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { padding: 14px 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all var(--transition); font-family: inherit; } .btn-secondary:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--text-muted); } .btn-download, .btn-audio, .story-download-btn { border: none; border-radius: var(--radius-sm); color: white; font-weight: 600; cursor: pointer; transition: all var(--transition); font-family: inherit; } .btn-download, .btn-download:hover, .btn-download:focus, .btn-download:active, .btn-download:visited, .btn-audio, .btn-audio:hover, .btn-audio:focus, .btn-audio:active, .btn-audio:visited { color: white; text-decoration: none; } .btn-download, .btn-audio { flex: 1; padding: 14px 24px; font-size: 1rem; gap: 8px; } .btn-download { background: linear-gradient(135deg, var(--success), #16a34a); } .btn-download:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4); } .btn-audio { background: linear-gradient(135deg, #7c3aed, #5b21b6); } .btn-audio:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); } .btn-close { width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--bg); color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; transition: all var(--transition); } .btn-close:hover { background: var(--bg-card-hover); color: var(--text); } .btn-connect { padding: 6px 16px; border: 1px solid rgba(99, 102, 241, 0.4); border-radius: var(--radius-sm); background: rgba(99, 102, 241, 0.12); color: var(--primary-light); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition); font-family: inherit; white-space: nowrap; } .btn-connect:hover { background: rgba(99, 102, 241, 0.2); } .btn-private-story { padding: 6px 14px; border: 1px solid rgba(139, 92, 246, 0.4); border-radius: var(--radius-sm); background: rgba(139, 92, 246, 0.12); color: #a78bfa; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all var(--transition); font-family: inherit; white-space: nowrap; } .btn-private-story:hover { background: rgba(139, 92, 246, 0.22); } .btn-disconnect { padding: 6px 12px; border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all var(--transition); font-family: inherit; white-space: nowrap; } .btn-disconnect:hover { background: rgba(239, 68, 68, 0.1); color: var(--error); border-color: rgba(239, 68, 68, 0.5); } /* ── Spinner ───────────────────────────────────────────────────────────── */ .spinner { width: 20px; height: 20px; animation: spin 1s linear infinite; } .audio-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1rem; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Preview Card ──────────────────────────────────────────────────────── */ .preview-card { max-width: 640px; margin: 24px auto 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease; } .preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .preview-info { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; } .badge { padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge, .badge-type { background: rgba(var(--platform-color-rgb), 0.15); color: var(--platform-color); } .preview-media { margin-bottom: 16px; background: transparent; } .preview-media.landscape { border-radius: var(--radius-sm); overflow: hidden; background: #000; } .preview-media img, .preview-media video { display: block; max-width: 100%; max-height: 460px; width: auto; height: auto; border-radius: var(--radius-sm); object-fit: contain; } .preview-media.landscape img, .preview-media.landscape video { width: 100%; max-height: 360px; } .preview-title { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .preview-actions { display: flex; gap: 12px; } /* ── Error / Success Cards ─────────────────────────────────────────────── */ .error-card { max-width: 640px; margin: 24px auto 0; background: var(--bg-card); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; animation: slideUp 0.3s ease; } .error-icon { margin-bottom: 12px; } .error-message { color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6; } .success-card { max-width: 640px; margin: 24px auto 0; background: var(--bg-card); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; animation: slideUp 0.3s ease; } .success-icon { margin-bottom: 16px; } .success-card h3 { font-size: 1.3rem; margin-bottom: 8px; } .success-card p { color: var(--text-secondary); margin-bottom: 24px; } /* ── Sections ──────────────────────────────────────────────────────────── */ section, .section { padding: 5rem 0; } .section-alt { background: rgba(var(--platform-color-rgb), 0.06); } .section-alt { background: rgba(var(--platform-color-rgb), 0.04); } .section-alt-light, .section-alt-light { background: rgba(var(--platform-color-rgb), 0.01); } body[data-platform="instagram-private"] .section-alt:nth-of-type(2) { background: linear-gradient(135deg, rgba(240, 148, 51, 1) 0%, rgba(230, 104, 60, 1) 25%, rgba(220, 39, 67, 1) 50%, rgba(204, 35, 102, 1) 75%, rgba(188, 24, 136, 1) 100%) !important; } body[data-platform="instagram-private"] .section-alt:nth-of-type(4) { background: linear-gradient(180deg, rgba(240, 148, 51, 1) 0%, rgba(230, 104, 60, 1) 25%, rgba(220, 39, 67, 1) 50%, rgba(204, 35, 102, 1) 75%, rgba(188, 24, 136, 1) 100%) !important; } body[data-platform="instagram-private"] .section-alt:nth-of-type(6) { background: linear-gradient(45deg, rgba(240, 148, 51, 1) 0%, rgba(230, 104, 60, 1) 25%, rgba(220, 39, 67, 1) 50%, rgba(204, 35, 102, 1) 75%, rgba(188, 24, 136, 1) 100%) !important; } body[data-platform="instagram-private"] .section-alt:nth-of-type(8) { background: linear-gradient(-45deg, rgba(240, 148, 51, 1) 0%, rgba(230, 104, 60, 1) 25%, rgba(220, 39, 67, 1) 50%, rgba(204, 35, 102, 1) 75%, rgba(188, 24, 136, 1) 100%) !important; } body[data-platform="instagram-private"] .section-alt:nth-of-type(10) { background: linear-gradient(0deg, rgba(240, 148, 51, 1) 0%, rgba(230, 104, 60, 1) 25%, rgba(220, 39, 67, 1) 50%, rgba(204, 35, 102, 1) 75%, rgba(188, 24, 136, 1) 100%) !important; } body[data-platform="instagram-private"] .features-bg:not(.section-alt), body[data-platform="instagram-private"] .section-alt-light:not(.section-alt) { background: transparent !important; } body[data-platform="instagram-private"] .section-alt .section-title { color: #ffffff !important; } body[data-platform="instagram-private"] .section-alt .section-sub, body[data-platform="instagram-private"] .section-alt .section-label, body[data-platform="instagram-private"] .section-alt .section-title span { color: rgba(255, 255, 255, 0.85) !important; } .section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--platform-color, var(--accent2)); } .section-label, .section-title { text-align: center; margin-bottom: 0.75rem; } .section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--white); min-height: 1.2em; max-width: 600px; margin: 0 auto 20px; } p.long-section-sub, .long-section-title { max-width: 800px; } #compare-section .section-title, #content-guide .section-title { text-align: left; margin: 0 0 20px; } #compare-section .section-label, #content-guide .section-label { text-align: left; } .section-sub { text-align: center; color: var(--muted); max-width: 560px; margin: 0 auto 3rem; font-size: 1rem; } /* ── Steps ─────────────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; position: relative; } .step { text-align: center; padding: 2rem 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 16px; transition: all var(--transition); } .step:hover { border-color: var(--platform-color, var(--primary)); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .step-num { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--platform-color-rgb), 0.14); border: 1px solid rgba(var(--platform-color-rgb), 0.3); color: var(--platform-color); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; font-size: 1rem; margin: 0 auto 1rem; } .step h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; } .step p {} /* ── Platforms Grid ────────────────────────────────────────────────────── */ .platforms-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; min-height: 400px; } .platform-card { flex: 0 0 calc(33.333% - 16px); background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; text-align: center; transition: border-color 0.2s, transform 0.2s; display: flex; flex-direction: column; cursor: default; } .platform-card p { margin-top: auto; margin-bottom: 1rem; } .platform-card:hover { border-color: var(--platform-color, var(--primary)); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .platform-card.ig:hover { border-color: rgba(225, 48, 108, 0.4); } .platform-card.fb:hover { border-color: rgba(24, 119, 242, 0.4); } .platform-card.yt:hover { border-color: rgba(255, 0, 0, 0.35); } a.platform-card { color: inherit; display: block; cursor: pointer; } a.platform-card, a.platform-card:hover { text-decoration: none; } .platform-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 0.8rem; } .platform-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 1.4rem; margin: 0 auto 1rem; overflow: hidden; } .ig .platform-icon { background: rgba(225, 48, 108, 0.15); } .fb .platform-icon { background: rgba(24, 119, 242, 0.15); } .yt .platform-icon { background: rgba(255, 0, 0, 0.12); } .instagram-gradient { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .facebook-gradient { background: #1877f2; } .youtube-gradient { background: #ff0000; } .pinterest-gradient { background: linear-gradient(135deg, #e60023 0%, #bd081c 100%); } .mp3audio-gradient { background: #1db954; } .platform-features { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; } .feature-tag { padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 500; background: rgba(var(--platform-color-rgb), 0.1); color: var(--platform-color); border: 1px solid rgba(var(--platform-color-rgb), 0.2); } .tag { font-size: 0.75rem; padding: 3px 10px; border-radius: 100px; background: var(--bg3); border: 1px solid var(--border); color: var(--muted); } /* ── Features Grid ─────────────────────────────────────────────────────── */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 800px; margin: 0 auto; } .features-grid li { margin-left: 15px; } .features-grid-3 { max-width: 1000px; } .features-grid-4 { max-width: 1200px; text-align: center; } .feature { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; transition: all var(--transition); } .feature:hover { border-color: var(--platform-color, var(--primary)); } .feature-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(var(--platform-color-rgb), 0.2); font-size: 1.1rem; } .feature-icon { background: rgba(var(--platform-color-rgb), 0.12); color: var(--platform-color); } .feature h4 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.3rem; } .feature p {} /* ========================================================================== HOME FEATURES & PRIVACY SECTION ========================================================================== */ .features-privacy-label { justify-content: center; } .features-privacy-sub { max-width: 800px; margin-left: auto; margin-right: auto; } .features-privacy-grid { display: flex; flex-wrap: wrap; gap: 2rem; text-align: left; margin-top: 3rem; } .features-privacy-grid .features-privacy-col { flex: 1; min-width: 300px; } .features-privacy-grid .features-privacy-left { display: flex; flex-direction: column; gap: 1.5rem; } .features-privacy-grid .features-privacy-right { padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 0; } .features-privacy-grid .features-privacy-card-sm { flex-direction: column; gap: 0; padding: 1.5rem; height: 100%; } .features-privacy-grid .features-privacy-title-sm { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem; color: var(--text-color); } .features-privacy-grid .features-privacy-title-lg { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; color: var(--text-color); } .features-privacy-grid .features-privacy-text { margin: 0; opacity: 0.8; line-height: 1.6; } .features-privacy-grid .features-privacy-text-mb { margin-bottom: 1.5rem; } .features-privacy-grid .features-privacy-list { opacity: 0.8; line-height: 1.8; margin: 0; padding-left: 1.5rem; list-style-type: disc; } /* ── Device Support Grid ──────────────────────────────────────────────── */ .device-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; } .device-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: all var(--transition); } .device-card:hover { border-color: var(--platform-color, var(--primary)); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .device-media { width: 100%; aspect-ratio: auto; overflow: hidden; background: var(--bg); } .device-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .device-body { padding: 1.25rem 1.25rem 1.5rem; text-align: center; } .device-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--platform-color-rgb), 0.1); margin-bottom: 0.75rem; } .device-icon img { width: 22px; height: 22px; object-fit: contain; } #compare-section h3, .device-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; } .device-body p { margin: 0; } /* ── Use Cases ─────────────────────────────────────────────────────────── */ .use-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; } .use-case { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; } .use-case h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; } .use-case p {} /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq-list { max-width: 720px; margin: 0 auto; } body[data-platform="instagram-private"] #faq details summary { color: #ffffff !important; } body[data-platform="instagram-private"] #faq details p { color: rgba(255, 255, 255, 0.85) !important; } body[data-platform="instagram-private"] #faq details summary::after { color: rgba(255, 255, 255, 0.6); } body[data-platform="instagram-private"] details { border-color: rgba(255, 255, 255, 0.15); } body[data-platform="instagram-private"] .layout-ig-about .text-column p:not(.section-label) { color: rgba(255, 255, 255, 0.85) !important; } details { border-bottom: 1px solid var(--border); padding: 1rem 0; } details:first-of-type { border-top: 1px solid var(--border); } summary { cursor: pointer; font-weight: 600; font-size: 0.98rem; color: var(--white); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font-size: 1.2rem; color: var(--platform-color, var(--accent2)); flex-shrink: 0; transition: transform 0.2s; } details[open] summary::after { transform: rotate(45deg); } details p { margin-top: 0.75rem; } /* ── Footer ────────────────────────────────────────────────────────────── */ .footer { background: white; padding: 56px 0 28px; } .footer, footer { border-top: 1px solid var(--border); } footer { background: var(--bg); padding: 3rem 0 2rem; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; } .footer-brand p { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; max-width: 300px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links h4 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-card); margin-bottom: 10px; } .footer-links a { color: var(--text-secondary); font-size: 0.875rem; transition: color var(--transition); } .footer-links a:hover { color: var(--text); } .footer-bottom { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--muted); text-align: center; padding-left: 24px; padding-right: 24px; } /* ── Instagram Connect ─────────────────────────────────────────────────── */ .ig-connect-section { margin-top: 16px; } .ig-connect-bar { justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); gap: 12px; } .ig-connect-bar, .ig-connect-info { display: flex; align-items: center; } .ig-connect-info { gap: 8px; font-size: 0.82rem; color: var(--text-secondary); } .ig-connected-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); gap: 12px; } .ig-connected-user { display: flex; align-items: center; gap: 10px; } .ig-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border); } .ig-avatar-lg { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } .ig-username { font-size: 0.85rem; font-weight: 600; color: var(--text); display: block; line-height: 1.2; } .ig-status-text { font-size: 0.72rem; color: var(--success); font-weight: 500; } .ig-connected-actions { display: flex; gap: 8px; } /* ── Modals ────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 200; padding: 24px; animation: fadeIn 0.2s ease; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg); animation: slideUp 0.25s ease; } .modal-lg { max-width: 640px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); } .modal-header h3 { font-size: 1.1rem; font-weight: 600; } .modal-body { padding: 24px; } .modal-desc { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; } .modal-desc code { background: rgba(99, 102, 241, 0.12); color: var(--primary-light); padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; } .modal-steps { flex-direction: column; margin-bottom: 20px; padding: 16px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); } .modal-steps, .modal-step { display: flex; gap: 10px; } .modal-step { align-items: center; font-size: 0.85rem; color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; } .modal-step-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(99, 102, 241, 0.15); color: var(--primary-light); font-size: 0.72rem; font-weight: 700; } .modal-step kbd { background: var(--bg-card); border: 1px solid var(--border); font-size: 0.78rem; font-family: inherit; } .modal-step kbd, .modal-step code { border-radius: 4px; padding: 1px 6px; } .modal-step code { background: rgba(99, 102, 241, 0.12); color: var(--primary-light); font-size: 0.8rem; } .modal-input-group { display: flex; gap: 10px; margin-bottom: 14px; } .modal-input-group input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color var(--transition); } .modal-input-group input:focus { border-color: var(--primary); } .modal-error { color: var(--error); font-size: 0.85rem; margin-bottom: 14px; padding: 10px 14px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: var(--radius-sm); } .modal-notice { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.15); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; } .modal-notice svg { flex-shrink: 0; margin-top: 1px; } /* ── Private User Card ─────────────────────────────────────────────────── */ .private-user-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 16px; } .private-user-card strong { display: block; font-size: 0.9rem; } .private-user-card .text-muted { font-size: 0.8rem; color: var(--text-muted); } .private-badge { margin-left: auto; padding: 3px 10px; border-radius: 50px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .private-badge.badge-private { background: rgba(245, 158, 11, 0.12); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.25); } .private-badge.badge-public { background: rgba(34, 197, 94, 0.12); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.25); } /* ── Stories Grid ──────────────────────────────────────────────────────── */ .stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; } .story-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: all var(--transition); aspect-ratio: 9/16; } .story-card:hover { border-color: var(--platform-color, var(--primary)); transform: translateY(-2px); box-shadow: var(--shadow); } .story-card img, .story-card video { width: 100%; height: 100%; object-fit: cover; } .story-card .play-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); pointer-events: none; transition: background 0.2s; } .story-card:hover .play-overlay { background: rgba(0, 0, 0, 0.45); } .story-card-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.7)); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; } .story-type-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; background: rgba(0, 0, 0, 0.6); color: white; } .story-download-btn { padding: 8px; background: linear-gradient(135deg, var(--success), #16a34a); font-size: 0.78rem; gap: 4px; width: 100%; } .story-download-btn:hover { box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4); } .story-time { font-size: 0.68rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; } /* ── Skeleton Loader ───────────────────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--bg) 25%, var(--bg-card-hover) 50%, var(--bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } /* ── SEO Content ───────────────────────────────────────────────────────── */ .seo-content { max-width: 1100px; margin: 0 auto; } .seo-content h2.section-title { text-align: center; } .seo-content .lead { font-size: 1.05rem; margin: 0 0 20px; } .seo-content .lead, .seo-content p { line-height: 1.7; color: #a1a1aa; } .seo-content p { margin: 0 0 14px; } .seo-content h3 { color: #fff; font-size: 1.2rem; margin: 24px 0 10px; } .seo-content ul { list-style: none; padding: 0; margin: 0 0 16px; } .seo-content ul li { padding: 8px 0 8px 28px; position: relative; color: #d4d4d8; line-height: 1.6; } .seo-content ul li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: #22c55e; font-weight: 700; } .seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; } .seo-grid-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 20px; } .seo-grid-item h3 { margin-top: 0; } /* ── Comparison Table ──────────────────────────────────────────────────── */ .compare-wrap { overflow-x: auto; margin: 20px 0; border-radius: 12px; border: 1px solid rgba(var(--platform-color-rgb), 0.15); box-shadow: 0 2px 10px rgba(var(--platform-color-rgb), 0.1); } .compare-table { width: 100%; border-collapse: collapse; background: var(--bg-card); color: var(--text); min-width: 560px; } .compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(var(--platform-color-rgb), 0.08); font-size: 0.95rem; } .compare-table th { background: rgba(var(--platform-color-rgb), 0.15); color: black; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; } .compare-table td:first-child { font-weight: 500; color: black; } .compare-table .partial { color: #f59e0b; font-weight: 700; } .compare-table tr:last-child td { border-bottom: none; } .compare-highlight { background: rgba(99, 102, 241, 0.05); } .compare-intro { margin: 16px 0; } /* ── Album Gallery ─────────────────────────────────────────────────────── */ .preview-media:has(.album-wrap) { display: block; min-height: 0; padding: 0; background: transparent; } .album-wrap { width: 100%; display: block; } .album-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12)); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 12px; margin-bottom: 14px; color: #fff; font-size: 0.92rem; font-weight: 500; } .album-count { display: inline-flex; align-items: center; gap: 6px; } .album-count::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); } .album-dl-all { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 600; cursor: pointer; font-size: 0.88rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .album-dl-all:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35); } .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .album-item { position: relative; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.04); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.06); transition: transform 0.2s ease, border-color 0.2s ease; } .album-item:hover { transform: translateY(-2px); border-color: rgba(var(--platform-color-rgb), 0.4); } .album-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .album-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .album-item:hover::after { opacity: 1; } .album-dl { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.95); color: #111; border-radius: 8px; padding: 7px 12px; font-size: 0.8rem; text-decoration: none; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1; } .album-item:hover .album-dl, .album-item:focus-within .album-dl { opacity: 1; transform: translateY(0); } .album-dl:hover { background: #fff; color: #6366f1; } /* ── Download Box (sub-page) ───────────────────────────────────────────── */ .download-box { margin: 0 auto 2rem; border: 1px solid var(--border); border-radius: 16px; padding: 2rem 1.5rem; } .dl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; background: var(--bg3); border-radius: 10px; padding: 4px; } .dl-tab { flex: 1 1 120px; min-width: 0; padding: 8px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--muted); transition: all 0.2s; gap: 5px; } .dl-tab.active { background: var(--card); color: var(--white); } .dl-tab .dot { width: 8px; height: 8px; border-radius: 50%; } .dl-tab[data-p="ig"] .dot { background: var(--ig); } .dl-tab[data-p="fb"] .dot { background: var(--fb); } .dl-tab[data-p="yt"] .dot { background: var(--yt); } .dl-tab[data-p="tw"] .dot { background: #000; } .dl-input-row { display: flex; gap: 10px; } .dl-input { flex: 1; min-width: 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.95rem; outline: none; transition: border-color 0.2s; } .dl-input::placeholder { color: var(--muted); } .dl-input:focus { border-color: var(--accent); } .dl-btn { background: var(--platform-gradient, var(--platform-color, var(--accent))); color: white; border: none; border-radius: 10px; padding: 0.75rem 1.4rem; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: filter 0.2s, transform 0.15s; white-space: nowrap; } .dl-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } .dl-notice { margin-top: 0.9rem; font-size: 0.82rem; text-align: left; padding: 0.65rem 0.85rem; border-radius: 8px; display: none; } .dl-notice.info { display: block; background: rgba(124, 92, 252, 0.08); border: 1px solid rgba(124, 92, 252, 0.25); color: var(--accent2); } .dl-notice.error { display: block; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; } /* ── Trust Row ─────────────────────────────────────────────────────────── */ .trust-row { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); } .trust-row span { display: flex; align-items: center; gap: 4px; } .trust-row span::before { content: "✓"; color: var(--green); font-weight: 700; } /* ── CTA Strip ─────────────────────────────────────────────────────────── */ .cta-strip { text-align: center; padding: 5rem 0; background: var(--bg2); position: relative; overflow: hidden; } .cta-strip::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 300px; background: radial-gradient(ellipse at center, rgba(124, 92, 252, 0.15) 0%, transparent 70%); pointer-events: none; z-index: -1; } .cta-strip h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--white); margin-bottom: 0.75rem; } .cta-strip p { color: var(--muted); margin-bottom: 2rem; } /* ── Twitter Page ──────────────────────────────────────────────────────── */ .tweet-meta { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; text-align: left; } .tweet-meta-body { flex: 1; min-width: 0; } .tweet-author-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; } .tweet-author-name { font-weight: 700; color: var(--text); font-size: 0.93rem; } .tweet-author-handle { color: var(--text-muted); font-size: 0.83rem; } .tweet-text { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; margin: 0; word-break: break-word; } .tw-thumb { display: block; width: 100%; max-height: 380px; object-fit: contain; border-radius: var(--radius-sm); background: #000; } video.tw-thumb { object-fit: contain; cursor: pointer; } .tw-single-media { gap: 14px; } .tw-single-media, .tw-quality-wrap { display: flex; flex-direction: column; } .tw-quality-wrap { gap: 8px; } .tw-quality-label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } .tw-quality-select { width: 100%; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.93rem; font-family: inherit; cursor: pointer; transition: border-color var(--transition); outline: none; appearance: auto; } .tw-quality-select:focus { border-color: var(--platform-color, var(--primary)); } .tw-dl-btn { width: 100%; } .tw-btn-row { display: flex; gap: 12px; } .tw-btn-row .tw-dl-btn { width: auto; flex: 1; } .twitter-media-grid { display: flex; flex-direction: column; gap: 16px; } .twitter-media-item { display: flex; flex-direction: column; gap: 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; } .twitter-gradient { background: linear-gradient(135deg, #000 0%, #14171a 100%); } /* ── Audio Downloader Page ─────────────────────────────────────────────── */ .audio-preview-box { max-width: 560px; margin: 1.5rem auto 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; text-align: left; } .audio-preview-inner { display: flex; gap: 1rem; align-items: flex-start; } .audio-thumb-wrap { flex-shrink: 0; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--bg3); } .audio-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .audio-preview-info { flex: 1; min-width: 0; } .audio-preview-title { font-weight: 600; font-size: 0.95rem; color: var(--text); margin-bottom: 4px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .audio-preview-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 12px; } .audio-loading-box { max-width: 560px; margin: 1.5rem auto 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; } .audio-loading-box p { color: var(--muted); font-size: 0.9rem; } .audio-error-box { max-width: 560px; margin: 1.5rem auto 0; background: rgba(239, 68, 68, 0.07); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 16px; padding: 1.5rem; text-align: center; } .audio-error-box p { color: #fca5a5; margin-bottom: 1rem; font-size: 0.9rem; } /* ── CLS Fixes ─────────────────────────────────────────────────────────── */ /* Both sections render their cards from JS after first paint. Without a reserved height the content below them jumps, which shows up as Cumulative Layout Shift in PageSpeed. These numbers are the measured desktop height of the populated section — if the card count or card size changes, re-measure, or the reserve becomes either a visible gap or an ineffective fix. */ #platforms { min-height: 820px; } #how-it-works { min-height: 450px; } /* ── Light Theme ───────────────────────────────────────────────────────── */ .nav { border-bottom: none; } .features-bg { background: rgba(var(--platform-color-rgb), 0.04); } .platform-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.08); border-color: rgba(var(--platform-color-rgb), 0.2); } .footer { background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.09); } .btn-primary { box-shadow: 0 4px 14px rgba(var(--platform-color-rgb), 0.28); } .btn-primary:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(var(--platform-color-rgb), 0.44); color: white; } .hero h1 { background: linear-gradient(135deg, #0a0a0f 0%, #3b3460 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .seo-content .lead, .seo-content p { color: #374151; } .seo-content h3 { color: #111827; } .seo-content ul li { color: #374151; } .seo-content strong { color: #111827; } .seo-grid-item { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .seo-grid-item h3 { color: #111827; } /* ── Common Utilities ───────────────────────────────────────────────────── */ .text-accent { color: var(--platform-color); } .feature-wide { grid-column: 1 / -1; } /* ── Info Card – reusable transparency/info card ─────────────────────── */ .info-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 40px; margin-top: 40px; } .info-card-head { margin-bottom: 32px; } .info-card-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--platform-color); margin-bottom: 0.6rem; } .info-card-heading { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 700; color: var(--white); margin: 0 0 0.9rem; } .info-card-desc { max-width: 760px; margin: 0; } /* ── Grid Full Width ─────────────────────────────────────────────────── */ .features-grid-full { max-width: none; } /* ========================================= SEO Uniqueness Layouts for About Sections ========================================= */ .layout-fb-about .grid-2col { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 0; } .layout-fb-about .text-column { max-width: 1000px; text-align: center; } .layout-fb-about .features-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .layout-fb-about .feature { width: calc(50% - 0.75rem); background: rgba(var(--platform-color-rgb), 0.04); border: none; border-left: 4px solid var(--platform-color); border-radius: 8px; } .layout-ig-about .text-column { position: sticky; top: 100px; } .layout-ig-about .features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .layout-ig-about .feature { background: linear-gradient(90deg, rgba(var(--platform-color-rgb), 0.2), rgba(var(--platform-color-rgb), 0.05)); border: none; border-radius: 20px; transform: translateX(5%); width: 95%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); } body[data-platform="instagram-private"] .layout-ig-about .feature { background: linear-gradient(45deg, rgba(240, 148, 51, 0.08) 0%, rgba(230, 104, 60, 0.08) 25%, rgba(220, 39, 67, 0.08) 50%, rgba(204, 35, 102, 0.08) 75%, rgba(188, 24, 136, 0.08) 100%); } body[data-platform="instagram-private"] .layout-ig-about .feature h4 { color: #ffffff !important; } body[data-platform="instagram-private"] .layout-ig-about .feature p { color: rgba(255, 255, 255, 0.85) !important; } .layout-ig-about .feature:nth-child(even) { transform: translateX(0); } .layout-yt-about .grid-2col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; padding-top: 0; } .layout-yt-about .text-column { padding-right: 1rem; } .layout-yt-about .features-grid { display: flex; flex-direction: column; gap: 1.2rem; } .layout-yt-about .feature { background: var(--bg-card); border: 1px solid var(--border); border-left: 5px solid var(--platform-color); border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); transition: all 0.2s ease; } .layout-yt-about .feature:hover { transform: translateX(5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } .layout-tw-about .grid-2col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: stretch; } .layout-tw-about .text-column { display: flex; flex-direction: column; justify-content: center; } .layout-tw-about .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .layout-tw-about .feature { background: rgba(var(--platform-color-rgb), 0.05); border: 1px solid rgba(var(--platform-color-rgb), 0.1); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; text-align: center; transition: background 0.3s ease; } .layout-tw-about .feature:hover { background: rgba(var(--platform-color-rgb), 0.1); } .layout-tw-about .feature h4 { color: var(--platform-color); font-size: 1.1rem; margin-bottom: 0.5rem; } .layout-pin-about .grid-2col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; padding-top: 0; } .layout-pin-about .features-grid { display: flex; flex-direction: column; gap: 0; } .layout-pin-about .feature { border-radius: 0; border: none; border-bottom: 1px solid var(--border); padding: 1.5rem 0; background: transparent; box-shadow: none; } .layout-pin-about .feature:last-child { border-bottom: none; } /* ========================================= Sticky Bottom Download Bar ========================================= */ .sticky-bottom-bar { position: fixed; bottom: 24px; left: 50%; width: calc(100% - 32px); max-width: 800px; z-index: 999; transform: translate(-50%, 150%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); background: color-mix(in srgb, var(--bg) 65%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid color-mix(in srgb, var(--platform-color, var(--border)) 30%, transparent); border-radius: 15px; padding: 4px 5px; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3); } .sticky-bottom-bar.visible { transform: translate(-50%, 0); } .sticky-bottom-bar .sticky-container { display: flex; justify-content: center; align-items: center; padding: 0; } .sticky-bottom-bar .sticky-dl-box { width: 100%; padding: 0; margin: 0; border: none; } .sticky-bottom-bar .sticky-input-row { margin: 0; display: flex; gap: 0; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05); border: 1px solid color-mix(in srgb, var(--platform-color) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--bg-card, var(--bg)) 30%, transparent); overflow: hidden; height: 52px; align-items: stretch; } .sticky-bottom-bar[data-p="ig"] { --platform-color: #ff4da8; --platform-color-rgb: 255, 77, 168; } .sticky-bottom-bar[data-p="fb"] { --platform-color: #1877f2; --platform-color-rgb: 24, 119, 242; } .sticky-bottom-bar[data-p="yt"] { --platform-color: #ff0000; --platform-color-rgb: 255, 0, 0; } .sticky-bottom-bar[data-p="tw"] { --platform-color: #ffffff; --platform-color-rgb: 255, 255, 255; } .sticky-bottom-bar[data-p="tw"] { --platform-color: #000000; --platform-color-rgb: 0, 0, 0; } .sticky-bottom-bar[data-p="pt"] { --platform-color: #e60023; --platform-color-rgb: 230, 0, 35; } .sticky-select-wrapper { position: relative; width: 150px; background: linear-gradient(135deg, color-mix(in srgb, var(--platform-color) 25%, transparent), color-mix(in srgb, var(--platform-color) 10%, transparent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-right: 1px solid color-mix(in srgb, var(--platform-color) 30%, transparent); flex-shrink: 0; display: flex; align-items: center; } .sticky-select-wrapper select { appearance: none; background: transparent; color: var(--platform-color); font-family: inherit; font-weight: 700; font-size: 0.95rem; border: none; padding: 0 35px 0 15px; width: 100%; height: 100%; cursor: pointer; outline: none; } .sticky-select-icon { position: absolute; right: 12px; pointer-events: none; color: var(--platform-color); display: flex; } .sticky-bottom-bar .dl-input { border: none; border-radius: 0; background: transparent; height: 100%; } .sticky-bottom-bar .dl-btn { border-radius: 0; height: 100%; padding: 0 2rem; font-size: 1rem; font-weight: 700; background: linear-gradient(135deg, color-mix(in srgb, var(--platform-color) 80%, transparent), color-mix(in srgb, var(--platform-color) 40%, transparent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: -2px 0 15px rgba(var(--platform-color-rgb, 0, 0, 0), 0.15); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); letter-spacing: 0.5px; } .mobile-platform-icon, .dl-btn-icon { display: none; } /* Mobile responsive for sticky bar */ @media (max-width: 600px) { .layout-tw-about .feature { align-items: center; } .sticky-bottom-bar { bottom: 0; width: 100%; padding: 8px 10px; border-radius: 0; border: none; } .sticky-bottom-bar .sticky-input-row { height: 46px; } .sticky-select-wrapper { width: 52px; } .sticky-select-wrapper select { color: transparent; padding: 0; z-index: 2; position: relative; width: 52px; } .sticky-select-icon { display: none; } .mobile-platform-icon { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 1; pointer-events: none; } .sticky-bottom-bar[data-p="ig"] .mobile-platform-icon { background-image: url("/images/instagram.png"); } .sticky-bottom-bar[data-p="fb"] .mobile-platform-icon { background-image: url("/images/facebook.png"); } .sticky-bottom-bar[data-p="yt"] .mobile-platform-icon { background-image: url("/images/youtube.png"); } .sticky-bottom-bar[data-p="tw"] .mobile-platform-icon { background-image: url("/images/twitter.png"); } .sticky-bottom-bar[data-p="pt"] .mobile-platform-icon { background-image: url("/images/shield.png"); } /* Brand Colors for Select Wrapper */ .sticky-bottom-bar[data-p="ig"] .sticky-select-wrapper { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border: none; } .sticky-bottom-bar[data-p="fb"] .sticky-select-wrapper { background: #1877f2; border: none; } .sticky-bottom-bar[data-p="yt"] .sticky-select-wrapper { background: #ff0000; border: none; } .sticky-bottom-bar[data-p="tw"] .sticky-select-wrapper { background: #000000; border: none; } .sticky-bottom-bar[data-p="pt"] .sticky-select-wrapper { background: #e60023; border: none; } .mobile-platform-icon { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 1; pointer-events: none; filter: brightness(0) invert(1); } .sticky-bottom-bar .dl-btn { padding: 0; width: 52px; display: flex; justify-content: center; align-items: center; font-size: 0 !important; color: transparent !important; } .sticky-bottom-bar .dl-btn::before { content: ""; display: block; width: 22px; height: 22px; margin-left: 4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'/%3E%3C/svg%3E"); background-size: contain; background-position: center; background-repeat: no-repeat; } .dl-btn-text, .dl-btn-icon { display: none !important; } .sticky-bottom-bar .dl-input { font-size: 0.9rem; } .features-privacy-grid, .features-privacy-grid .features-privacy-left { gap: 0.9rem; } } /* ========================================================================== IMPORTANT: NEW HERO SECTION STYLES ========================================================================== */ .home-badge { display: inline-block; padding: 10px 22px; border-radius: 40px; background: #efeaff; color: #7153ff; font-weight: 600; font-size: 14px; margin-bottom: 10px; } h1.hero-text { max-width: 800px; } .hero-subtitle { font-size: 18px; color: #70778b; line-height: 1.8; max-width: 780px; margin: auto; margin-bottom: 30px; } .platforms { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); justify-content: space-between; flex-wrap: wrap; background: #fcc2eb; padding: 8px 8px; border-radius: 50px; margin-bottom: 25px; gap: 4px; } @media (min-width: 769px) { .platforms::before { content: ""; position: absolute; top: 8px; left: 8px; bottom: 8px; width: calc((100% - 36px) / 6); background: #fff; border-radius: 50px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1; pointer-events: none; } /* Active States */ .platforms:has(.tab:nth-child(1).active)::before { transform: translateX(0); } .platforms:has(.tab:nth-child(2).active)::before { transform: translateX(calc(100% + 4px)); } .platforms:has(.tab:nth-child(3).active)::before { transform: translateX(calc(200% + 8px)); } .platforms:has(.tab:nth-child(4).active)::before { transform: translateX(calc(300% + 12px)); } .platforms:has(.tab:nth-child(5).active)::before { transform: translateX(calc(400% + 16px)); } .platforms:has(.tab:nth-child(6).active)::before { transform: translateX(calc(500% + 20px)); } } .tab { border: none; background: transparent; padding: 12px 8px; border-radius: 50px; cursor: pointer; font-size: 15px; font-weight: 600; font-family: inherit; display: flex; align-items: center; gap: 8px; transition: 0.3s; color: #030303; white-space: nowrap; } .tab:hover { background: #fff; } .tab.active { color: #18152d; } @media (max-width: 768px) { .tab.active { background: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); } } .dot { width: 9px; height: 9px; border-radius: 50%; } .insta { background: #ff3f80; } .fb { background: #1877f2; } .yt { background: red; } .tw { background: #000; } .pin { background: #e60023; } .mp3 { background: #15c36b; } .info-notes { font-size: 13px !important; margin: 10px 0 0 !important; text-align: left !important; } .input-area { display: flex; gap: 14px; } .input-area input { flex: 1; height: 55px; border-radius: 15px; border: 1px solid #d9d9e8; padding: 0 22px; font-size: 18px; font-family: inherit; outline: none; color: #030303; } .input-area button { width: 180px; border: none; background: #7153ff; color: #fff; font-size: 20px; font-weight: 700; font-family: inherit; border-radius: 15px; cursor: pointer; transition: 0.3s; } .input-area button:hover { transform: translateY(-2px); background: #6142ff; } .animated-text { background: linear-gradient(120deg, #ff4d6d, #8338ec, #ff7300); background-size: 400% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: colorFlow 10s linear infinite; } @keyframes colorFlow { 0% { background-position: 0% center; } 100% { background-position: 400% center; } } .animated-border-box { padding: 30px; position: relative; z-index: 0; } .animated-border-box::before { content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-30deg); z-index: -1; pointer-events: none; animation: glassShineLoop 4s ease-in-out infinite; } @keyframes glassShineLoop { 0% { left: -150%; } 50% { left: 200%; } 100% { left: 200%; } } .animated-border-box, .animated-border-box-glow { margin: 0 auto; width: 900px; max-width: 100%; overflow: hidden; border-radius: 10px; } .animated-border-box-glow { height: 100%; position: absolute; top: 0; left: 0; filter: blur(0px); z-index: -1; } /* .animated-border-box:before, .animated-border-box-glow:before { content: ""; z-index: -2; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); position: absolute; width: 99999px; height: 99999px; background-repeat: no-repeat; background-position: 0 0; background-image: conic-gradient(from 0deg, transparent 0%, transparent 60%, #ff006e 80%, #c026d3 95%, #3b0764 100%); animation: rotate 16s linear infinite; } */ /* .animated-border-box::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 300px; background: radial-gradient(ellipse at center, rgba(124, 92, 252, 0.35) 0%, transparent 70%); pointer-events: none; z-index: -1; } */ .animated-border-box:after { content: ""; position: absolute; z-index: -2; top: 2px; left: 2px; right: 2px; bottom: 2px; /* background: rgb(229 223 238); */ /* background: linear-gradient(135deg, #ecbcfd, #ffcce2); */ background: linear-gradient(135deg, rgba(188, 8, 253, 0.1), rgba(255, 0, 110, 0.1)); border: 1px solid rgba(188, 8, 253, 0.2); border-radius: 32px; } @keyframes rotate { 100% { transform: translate(-50%, -50%) rotate(2turn); } } /* ========================================================================== IMPORTANT: HOME PLATFORMS SECTION ========================================================================== */ .home-section-label { color: #bc08fd; } .home-section-title { color: #18152d; } .home-section-sub { color: #70778b; } .home-platform-card { background: #fff; border: 1px solid rgba(188, 8, 253, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; } .home-platform-card:hover { border-color: #ff006e; box-shadow: 0 20px 40px rgba(188, 8, 253, 0.12); transform: translateY(-8px); } .home-platform-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #bc08fd, #ff006e); opacity: 0; transition: opacity 0.4s ease; } .home-platform-card:hover::before { opacity: 1; } .home-platform-icon { background: var(--platform-gradient); box-shadow: 0 10px 20px rgba(255, 0, 110, 0.2); } .home-platform-card h3 { color: #18152d; } .home-platform-card p { color: #70778b; } /* ========================================================================== IMPORTANT: HOME HOW IT WORKS SECTION ========================================================================== */ .home-step-card { background: #fff; border: 1px solid rgba(188, 8, 253, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); } .home-step-card:hover { border-color: #ff006e; box-shadow: 0 20px 40px rgba(188, 8, 253, 0.12); transform: translateY(-8px); } .home-step-icon { background: var(--platform-gradient); color: #fff; box-shadow: 0 10px 20px rgba(255, 0, 110, 0.2); border: none; } /* ========================================================================== IMPORTANT: HOME FEATURES SECTION ========================================================================== */ .home-feature-card { border: 1px solid rgba(188, 8, 253, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); } .home-feature-card:hover { border-color: #ff006e; box-shadow: 0 20px 40px rgba(188, 8, 253, 0.12); transform: translateY(-8px); } .home-feature-icon { background: var(--platform-gradient); box-shadow: 0 10px 20px rgba(255, 0, 110, 0.2); } /* ========================================================================== IMPORTANT: HOME USE CASES SECTION ========================================================================== */ .home-use-case-card { border: 1px solid rgba(188, 8, 253, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); transition: all 0.4s ease; } .home-use-case-card:hover { border-color: #ff006e; box-shadow: 0 20px 40px rgba(188, 8, 253, 0.12); transform: translateY(-8px); } /* ========================================================================== IMPORTANT: HOME FAQ SECTION ========================================================================== */ .home-faq-details { border-bottom-color: rgba(188, 8, 253, 0.3); } .home-faq-details:first-of-type { border-top-color: rgba(188, 8, 253, 0.3); } .home-faq-details summary::after { background: linear-gradient(90deg, #bc08fd, #ff006e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================================== IMPORTANT: HOME CTA SECTION ========================================================================== */ .home-cta-section { background: linear-gradient(135deg, rgba(188, 8, 253, 0.1), rgba(255, 0, 110, 0.1)); border: 1px solid rgba(188, 8, 253, 0.2); margin: 60px 20px; border-radius: 32px; } .home-cta-section .btn-primary { background: var(--platform-gradient); border: none; box-shadow: 0 10px 20px rgba(255, 0, 110, 0.2); } .home-cta-section .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(255, 0, 110, 0.3); } /* ========================================================================== PRIVACY & SECURITY LIST ========================================================================== */ .privacy-security-list { align-items: start; } .privacy-security-list>div { display: flex; flex-direction: column; gap: 2rem; } .privacy-security-list>div>div { display: flex; gap: 1rem; align-items: flex-start; } .privacy-security-list>div>div>div:first-child { margin-top: 2px; } .privacy-security-list h4 { margin-bottom: 0.5rem; font-size: 1.1rem; } .privacy-security-list p { opacity: 0.9; line-height: 1.6; } @media (min-width: 1240px) { .home-cta-section { margin: 80px auto; max-width: 1200px; padding: 0; } } @media (max-width: 1200px) { .hero>.container { margin: 0; } } @media (max-width: 1024px) { .device-grid { grid-template-columns: repeat(2, 1fr); } .a.nav-ig { line-height: 1; } .platform-card { flex: 0 0 calc(50% - 12px); } .footer-content { grid-template-columns: 1fr 1fr; gap: 32px; } .mobile-menu-btn { display: block; margin-left: auto; margin-right: 8px; } .nav-item { position: static; display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .nav>a, .nav-item>a { justify-content: flex-start; width: 100%; } .nav-submenu { display: flex; position: static; transform: none; background: none; border: none; box-shadow: none; padding: 4px 0 0 50px; min-width: unset; gap: 6px; margin-top: 2px; align-items: flex-start; } .nav-submenu::before { display: none; } .nav-submenu a { padding: 4px 0 !important; background: none !important; font-size: 0.85rem; justify-content: flex-start; width: 100%; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); flex-direction: column; padding: 20px 24px; gap: 5px; box-shadow: var(--shadow-lg); } .nav.active { display: flex; align-items: flex-start; padding: 8px 0; } .hero { padding: 40px 0 30px; gap: 0; } .hero h1 { font-size: 2rem; letter-spacing: 0; max-width: 100%; overflow-wrap: break-word; } .input-group { flex-direction: column; } .btn-primary { justify-content: center; } .tab { flex: 1 1 calc(50% - 4px); font-size: 0.8rem; padding: 8px 12px; } .tab:last-child { flex: 1 1 100%; } .steps { gap: 24px; } .steps, .footer-content { grid-template-columns: 1fr; } .footer-content { gap: 32px; } .preview-actions { flex-direction: column; } .ig-connect-bar, .ig-connected-bar { flex-direction: column; text-align: center; gap: 10px; } .ig-connected-actions { width: 100%; justify-content: center; } .modal-input-group { flex-direction: column; } .stories-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .input-hint-row { flex-direction: column; align-items: flex-start; gap: 8px; } .hint-actions { width: 100%; justify-content: flex-start; } .download-card { margin: 0 auto; border-radius: 12px; } .preview-card { padding: 16px; border-radius: 12px; } .btn-download, .btn-audio { width: 100%; } .modal-overlay { padding: 12px; align-items: flex-end; } .modal { max-height: 90vh; border-radius: 16px 16px 0 0; } .header .container { padding-left: 20px; padding-right: 20px; } .nav.open { display: flex; } #platforms { min-height: 1200px; } #how-it-works { min-height: 800px; } .grid-2col { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 900px) { .nav a i { font-size: 1.55em; height: 21px; width: 26px; display: flex; justify-content: center; align-items: flex-start; } .layout-yt-about .grid-2col, .layout-tw-about .grid-2col { grid-template-columns: 1fr; gap: 2rem; } .layout-yt-about .text-column { padding-right: 0; } } @media (max-width: 768px) { .dl-input-row, .container-wrap { flex-direction: column; } .grid-2col { gap: 20px; } .grid-2col.privacy-security-list, .privacy-security-list>div { gap: 1rem; } .hero-right-img, .hero-left-content { width: 100%; } .layout-ig-about .text-column { position: relative; top: 0; } .layout-ig-about .feature { transform: none; width: 100%; } .layout-pin-about .grid-2col { grid-template-columns: 1fr; gap: 2rem; } .sticky-bottom-bar .sticky-input-row { flex-direction: row; flex-wrap: wrap; height: auto; border-radius: 12px; background: transparent; border: none; box-shadow: none; gap: 8px 5px; } .sticky-select-wrapper { width: fit-content; height: 45px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--platform-color) 30%, transparent); box-shadow: 0 4px 15px rgba(var(--platform-color-rgb, 0, 0, 0), 0.1); } .sticky-bottom-bar .dl-input { border-radius: 10px; border: 1px solid color-mix(in srgb, var(--platform-color) 20%, transparent); height: 45px; width: 70%; background: var(--bg-card); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.02); } .sticky-bottom-bar .dl-btn { border-radius: 10px; height: 45px; } .home-badge { margin-bottom: 0px; } .animated-border-box { padding: 20px; } .platforms { margin-bottom: 20px; padding: 0; grid-template-columns: repeat(3, 1fr); justify-content: center; background-color: transparent; } .tab { padding: 8px 14px; font-size: 14px; } .input-area { flex-wrap: wrap; gap: 12px; } .animated-border-box .tab:last-child { flex: auto; } .input-area input { width: 100%; } .input-area button { width: 100%; padding: 10px; } } @media (max-width: 600px) { .device-grid { grid-template-columns: 1fr; } .device-media { aspect-ratio: auto; } .seo-content h2.section-title { font-size: 1.5rem; } .compare-table th, .compare-table td { padding: 10px 8px; font-size: 0.85rem; } .compare-table th:last-child, .compare-table td:last-child { padding-right: 15px; } .compare-table th:first-child, .compare-table td:first-child { padding-left: 15px; } .grid-2col { padding-top: 10px; gap: 10px; } .features-grid { grid-template-columns: 1fr; } .section-sub { margin-bottom: 20px; } .layout-fb-about .feature { width: 100%; } } @media (max-width: 520px) { .tweet-meta, .tw-btn-row { flex-direction: column; } .tw-btn-row .tw-dl-btn { width: 100%; } .audio-preview-inner { flex-direction: column; align-items: stretch; } .audio-thumb-wrap { width: 100%; height: auto; aspect-ratio: 16 / 9; } } @media (max-width: 500px) { .download-box, .audio-preview-box, .audio-loading-box, .audio-error-box { padding: 1.25rem 1rem; } .trust-row { gap: 0.75rem 1rem; } .footer-bottom { flex-direction: column; text-align: center; } .layout-tw-about .features-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .info-card-desc, .compare-intro, .use-case p, details p { font-size: 0.875rem; } .step p, .feature p, .platform-card p, .device-body p, .features-grid li { font-size: 0.8125rem; } .container { padding: 0 20px; } .header .container { padding-left: 16px; padding-right: 16px; } .logo { min-width: 0; } .logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .download-card { padding: 16px; border-radius: 10px; } .preview-card { padding: 14px; border-radius: 10px; margin-top: 16px; } .platform-header-box { margin-bottom: 16px !important; padding-bottom: 12px !important; } .hero { padding: 32px 0 24px; } .hero h1 { font-size: 1.78rem; line-height: 1.18; margin-top: 5px !important; } .hero p, .hero-subtitle { font-size: 0.98rem; line-height: 1.65; } .hero-badge { max-width: 100%; white-space: normal; justify-content: center; } .section { padding: 48px 0; } .input-wrapper input { font-size: 0.9rem; padding: 13px 14px; } .btn-primary { padding: 13px 20px; font-size: 0.95rem; } .btn-download, .btn-audio, .btn-secondary { padding: 12px 16px; font-size: 0.9rem; } .stories-grid { grid-template-columns: repeat(2, 1fr); } .platform-card { flex: 0 0 100%; } .modal { max-height: 92vh; } .download-box { width: 100%; } .dl-tab { flex-basis: calc(50% - 4px); font-size: 0.8rem; } .dl-tab .dot { flex-shrink: 0; } .feature, .platform-card, .use-case, .seo-grid-item { padding: 1.25rem; } .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; } .footer-content .footer-brand { grid-column: 1 / -1; } .album-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .album-bar { padding: 10px 12px; font-size: 0.85rem; } .album-dl-all { padding: 8px 14px; font-size: 0.82rem; } .album-dl { padding: 6px 10px; font-size: 0.75rem; } #how-it-works, #platforms { min-height: 0; } .platform-card p { margin-bottom: 0; } .info-card { padding: 20px; margin-top: 20px; } .info-card-head { margin-bottom: 15px; } .platforms { grid-template-columns: repeat(2, 1fr); } .animated-border-box { padding: 15px; } .tab { padding: 8px 12px; font-size: 13px; justify-content: flex-start; width: fit-content; } } @media (max-width: 340px) { .dl-tab { flex-basis: 100%; } } @media (hover: none) { .album-dl { transform: none; } .album-dl, .album-item::after { opacity: 1; } } /* ── Mobile Horizontal Wheel Tabs ────────────────────────────────────────── */ @media (max-width: 768px) { .platforms-wrapper { position: relative; width: 100%; /* Use CSS mask to fade edges without solid colors, blending perfectly with the background */ -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); } .platforms-wrapper::before, .platforms-wrapper::after { display: none; } /* !important throughout this block: the desktop .platforms rules are a grid with a capsule background, and several of them are more specific than this media query, so plain declarations lose. */ .platforms { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ flex-wrap: nowrap !important; align-items: center; padding: 10px 0; margin: 0; justify-content: start; background: transparent !important; } .platforms::-webkit-scrollbar { display: none; } /* Scale rather than colour marks the active tab here, so the chip backgrounds are stripped and the wheel reads as a single row of icons. */ .platforms .tab { scroll-snap-align: center; flex: 0 0 auto; opacity: 0.8; transition: all 0.3s ease; transform: scale(0.9) !important; margin: 0 5px; background: transparent !important; box-shadow: none !important; } .platforms .tab.active { opacity: 1; transform: scale(1.15) !important; background: transparent !important; box-shadow: none !important; z-index: 2; font-weight: 700; } /* Empty leading/trailing flex item: scroll-snap centres a tab in the viewport, which the first and last tab cannot reach without padding either side of the track. Roughly half the viewport minus half a tab. */ .tab-spacer, .platforms::before, .platforms::after { content: ""; display: block; flex: 0 0 auto; width: calc(50% - 40px); } } /* Text Accent Highlights */ /* Gradient text: paint the gradient as the background, clip it to the glyphs and make the glyph fill transparent so the background shows through. The `color` is not redundant — it is what renders if background-clip:text is unsupported or the gradient fails to resolve, and without it the text would be invisible. Only these home-page elements use --platform-gradient, which is why the rule is scoped rather than applied to .text-accent globally. */ .home-platforms-section .text-accent, .hero .animated-text { background: var(--platform-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #ff006e !important; } .home-supported-platforms, .home-features-privacy { background: linear-gradient(135deg, rgba(188, 8, 253, 0.22), rgba(255, 0, 110, 0.08)) !important; } .home-faq-section { background: linear-gradient(135deg, rgba(188, 8, 253, 0.02), rgba(255, 0, 110, 0.02)) !important; } /* Badges & Section Labels */ .home-badge, .home-section-label { background: var(--platform-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #ff006e !important; border-color: rgba(188, 8, 253, 0.3) !important; } /* Home Page Platform Cards Custom Button */ .card-action-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 15px; padding: 10px 18px; background: rgba(188, 8, 253, 0.08) !important; color: var(--platform-color) !important; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: all 0.2s ease; width: fit-content; } .platform-card:hover .card-action-btn { background: var(--platform-gradient) !important; color: white !important; transform: translateX(4px); box-shadow: 0 4px 15px rgba(255, 0, 110, 0.3) !important; } /* ============================================================================= Instagram Private Story Downloader Page Scoped styles for instagram-private-story-downloader.html. All selectors here use short class names (.card, .field, .btn, etc.) that are local to that page and do not collide with global components. ============================================================================= */ /* ── Page-level custom tokens ──────────────────────────────────────────────── */ /* Applied via inline :root on the page; mirrored here for documentation. --ig : local gradient for step badges / avatar initials --g : card background (dark: near-transparent white; light: near-transparent black) --b : card border (dark/light variants) --m : muted text colour */ /* ── Layout helpers ─────────────────────────────────────────────────────────── */ .safe { display: inline-flex; align-items: center; gap: 6px; font-size: 0.79rem; color: #22c55e; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 8px; padding: 5px 12px; } .wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; } /* ── Error banner ───────────────────────────────────────────────────────────── */ .err { display: none; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.28); border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; color: #fca5a5; font-size: 0.87rem; line-height: 1.55; animation: priv-up 0.3s ease; white-space: pre-line; } .err.on { display: block; } /* ── Step cards ─────────────────────────────────────────────────────────────── */ .card { background: var(--g); border: 1px solid var(--b); border-radius: 20px; padding: 28px 30px; margin-bottom: 4px; transition: border-color 0.3s, opacity 0.3s; } .card.active { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.12); } .card.done { border-color: rgba(34, 197, 94, 0.3); opacity: 0.65; } .card.lock { opacity: 0.35; pointer-events: none; } /* ── Step connector line ────────────────────────────────────────────────────── */ .conn { display: flex; justify-content: center; padding: 3px 0; } .conn::before { content: ""; width: 1px; height: 16px; background: var(--b); } /* ── Step header (icon + title) ─────────────────────────────────────────────── */ .sh { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .sh>div:last-child { min-width: 0; } .sn { width: 30px; height: 30px; border-radius: 8px; background: var(--ig); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; flex-shrink: 0; } .sn.ok { background: linear-gradient(135deg, #22c55e, #16a34a); } .st { font-size: 1.08rem; font-weight: 600; } .ss { font-size: 0.82rem; color: var(--m); margin-top: 2px; } /* ── Input row ──────────────────────────────────────────────────────────────── */ .row { display: flex; gap: 10px; } .field { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--b); border-radius: 12px; padding: 12px 16px; color: #fafafa; font-family: "Inter", sans-serif; font-size: 0.93rem; transition: border-color 0.25s; } .field::placeholder { color: #3f3f46; } .field:focus { outline: none; border-color: rgba(99, 102, 241, 0.55); } /* ── Buttons ────────────────────────────────────────────────────────────────── */ .btn { background: var(--ig); border: none; border-radius: 12px; padding: 0 22px; color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.88rem; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: opacity 0.2s, transform 0.15s; min-height: 44px; } .btn:hover { opacity: 0.87; transform: translateY(-1px); } .btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none; } .btn-w { width: 100%; justify-content: center; padding: 13px 22px; margin-top: 14px; } /* Inline spinner */ .spin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: priv-rot 0.75s linear infinite; display: none; } /* ── Generated URL panel ────────────────────────────────────────────────────── */ .url-panel { display: none; background: rgba(99, 102, 241, 0.07); border: 1px dashed rgba(99, 102, 241, 0.38); border-radius: 14px; padding: 16px 18px; margin-top: 16px; animation: priv-up 0.4s ease; } .url-panel.on { display: block; } .url-lbl { font-size: 0.72rem; color: var(--m); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .url-val { font-family: monospace; font-size: 0.77rem; color: #c084fc; word-break: break-all; background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 10px 12px; line-height: 1.55; } .url-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .act { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--b); background: rgba(255, 255, 255, 0.05); color: #fafafa; font-family: "Inter", sans-serif; font-size: 0.8rem; cursor: pointer; text-decoration: none; transition: background 0.2s; font-weight: 500; } .act:hover { background: rgba(255, 255, 255, 0.1); } .act.ok { color: #22c55e; border-color: #22c55e; } /* ── Manual ID fallback box ─────────────────────────────────────────────────── */ .manual-box { display: none; background: rgba(245, 158, 11, 0.07); border: 1px solid rgba(245, 158, 11, 0.22); border-radius: 14px; padding: 16px 18px; margin-top: 14px; animation: priv-up 0.3s ease; } .manual-box.on { display: block; } .manual-title { font-size: 0.8rem; color: #f59e0b; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; } .manual-desc { font-size: 0.8rem; color: #d4d4d8; margin-bottom: 10px; line-height: 1.5; } .manual-desc a { color: #a78bfa; text-decoration: underline; } .manual-row { display: flex; gap: 8px; } .field-sm { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--b); border-radius: 10px; padding: 10px 14px; color: #fafafa; font-family: "Inter", sans-serif; font-size: 0.88rem; transition: border-color 0.25s; } .field-sm:focus { outline: none; border-color: rgba(245, 158, 11, 0.5); } .btn-sm { background: linear-gradient(135deg, #f59e0b, #d97706); border: none; border-radius: 10px; padding: 0 18px; color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.85rem; cursor: pointer; min-height: 40px; white-space: nowrap; transition: opacity 0.2s; } .btn-sm:hover { opacity: 0.87; } /* ── Instruction box ────────────────────────────────────────────────────────── */ .inst { background: rgba(240, 148, 51, 0.06); border: 1px solid rgba(240, 148, 51, 0.16); border-radius: 12px; padding: 14px 16px; margin: 16px 0; } .inst-t { font-size: 0.78rem; font-weight: 600; color: #f59e0b; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; } .inst ol { padding-left: 17px; } .inst li { font-size: 0.82rem; color: #d4d4d8; margin-bottom: 4px; line-height: 1.5; } .inst li strong { color: #fafafa; } /* ── Cookie paste area ──────────────────────────────────────────────────────── */ .paste { width: 100%; min-height: 100px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--b); border-radius: 12px; padding: 12px 14px; color: var(--m); font-family: monospace; font-size: 0.75rem; resize: vertical; transition: border-color 0.25s, color 0.25s; } .paste:focus { outline: none; border-color: rgba(99, 102, 241, 0.5); color: #fafafa; } /* ── User info bar (shown after login) ──────────────────────────────────────── */ .ubar { display: none; align-items: center; gap: 14px; background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 14px; padding: 13px 18px; margin-bottom: 16px; animation: priv-up 0.4s ease; flex-wrap: wrap; } .ubar.on { display: flex; } .uav { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(34, 197, 94, 0.3); flex-shrink: 0; } .uinit { width: 40px; height: 40px; border-radius: 50%; background: var(--ig); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .uname { font-weight: 600; font-size: 0.92rem; } .usub { font-size: 0.77rem; color: var(--m); } .ubadge { margin-left: auto; font-size: 0.7rem; padding: 3px 10px; border-radius: 999px; } /* Account type badges */ .bp { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.28); color: #f59e0b; } .bpub { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.24); color: #22c55e; } /* ── Download results grid ──────────────────────────────────────────────────── */ .results { display: none; margin-top: 28px; animation: priv-up 0.5s ease; } .results.on { display: block; } .rh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .rt { font-size: 1.05rem; font-weight: 600; } .rc { font-size: 0.77rem; color: var(--m); background: var(--g); border: 1px solid var(--b); border-radius: 7px; padding: 3px 10px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; } /* Story card thumbnail */ .sc { background: var(--g); border: 1px solid var(--b); border-radius: 14px; overflow: hidden; position: relative; transition: transform 0.25s, border-color 0.25s; } .sc:hover { transform: scale(1.04); border-color: rgba(99, 102, 241, 0.4); } .sm { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #111; display: block; } .ov { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 10px 10px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; justify-content: space-between; align-items: flex-end; } .stime { font-size: 0.67rem; color: rgba(255, 255, 255, 0.75); } .dlb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); transition: transform 0.2s; flex-shrink: 0; } .dlb:hover { transform: scale(1.12); } .ttag { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.55); border-radius: 5px; padding: 2px 6px; font-size: 0.59rem; color: #fff; font-weight: 600; text-transform: uppercase; } /* ── Keyframe animations (namespaced to avoid global conflicts) ──────────────── */ @keyframes priv-rot { to { transform: rotate(360deg); } } @keyframes priv-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Light theme overrides ──────────────────────────────────────────────────── */ /* This page enforces light mode via JS; these rules ensure components look correct when data-theme="light" is applied to . */ [data-platform="instagram-private"] { --g: rgba(255, 255, 255, 0.04); --b: rgba(255, 255, 255, 0.09); --m: #71717a; --ig: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); } html[data-theme="light"][data-platform="instagram-private"], html[data-theme="light"] [data-platform="instagram-private"] { --g: rgba(0, 0, 0, 0.025); --b: rgba(0, 0, 0, 0.11); --m: #6b7280; } html[data-theme="light"] .card { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } html[data-theme="light"] .card.active { border-color: rgba(99, 102, 241, 0.45); box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05); } html[data-theme="light"] .card.done { border-color: rgba(34, 197, 94, 0.4); } html[data-theme="light"] .card.lock { background: #f9fafb; } html[data-theme="light"] .conn::before { background: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .st { color: #111827; } html[data-theme="light"] .ss { color: #6b7280; } html[data-theme="light"] .field { background: #f3f4f6; border-color: rgba(0, 0, 0, 0.14); color: #111827; } html[data-theme="light"] .field::placeholder { color: #9ca3af; } html[data-theme="light"] .field:focus { border-color: rgba(99, 102, 241, 0.55); background: #fff; } html[data-theme="light"] .inst { background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.28); } html[data-theme="light"] .inst li { color: #374151; } html[data-theme="light"] .inst li strong { color: #111827; } html[data-theme="light"] .paste { background: #f3f4f6; border-color: rgba(0, 0, 0, 0.14); color: #374151; } html[data-theme="light"] .paste::placeholder { color: #9ca3af; } html[data-theme="light"] .paste:focus { background: #fff; border-color: rgba(99, 102, 241, 0.5); color: #111827; } html[data-theme="light"] .url-panel { background: rgba(99, 102, 241, 0.06); border-color: rgba(99, 102, 241, 0.3); } html[data-theme="light"] .url-val { background: rgba(0, 0, 0, 0.04); color: #6d28d9; } html[data-theme="light"] .act { background: #f9fafb; border-color: rgba(0, 0, 0, 0.12); color: #374151; } html[data-theme="light"] .act:hover { background: #f3f4f6; } html[data-theme="light"] .manual-box { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.22); } html[data-theme="light"] .manual-desc { color: #374151; } html[data-theme="light"] .field-sm { background: #f3f4f6; border-color: rgba(0, 0, 0, 0.14); color: #111827; } html[data-theme="light"] .field-sm:focus { background: #fff; border-color: rgba(245, 158, 11, 0.5); } html[data-theme="light"] .err { color: #dc2626; background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.25); } html[data-theme="light"] .ubar { background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.25); } html[data-theme="light"] .uname { color: #111827; } html[data-theme="light"] .rt { color: #111827; } html[data-theme="light"] .rc { background: #f3f4f6; border-color: rgba(0, 0, 0, 0.1); color: #374151; } html[data-theme="light"] .sc { background: #fff; border-color: rgba(0, 0, 0, 0.1); } /* ── Multi-Step Form (MSF) — Unified Instagram Card ────────────────────────── */ /* A single card containing a progress header + step panels for the two-step private downloader workflow. Instagram gradient is used as an accent (top bar, active bubbles, progress fill) while the card body is kept clean white to match the site's light-mode card aesthetic. */ .msf { width: 100%; background: var(--bg-card, #ffffff); border: 1px solid rgba(255, 77, 168, 0.18); border-radius: 18px; overflow: hidden; position: relative; box-shadow: 0 2px 10px rgba(255, 77, 168, 0.08), 0 8px 30px rgba(0, 0, 0, 0.05); } /* Top Instagram gradient accent stripe */ .msf::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); z-index: 1; } /* Progress header row */ .msf-header { display: flex; align-items: center; padding: 20px 28px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); background: #fafafa; position: relative; z-index: 0; margin-top: 4px; } /* Individual step item (bubble + label) */ .msf-step-item { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Circular step number bubble */ .msf-bubble { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; flex-shrink: 0; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; border: 2px solid #e5e7eb; color: #9ca3af; background: #f3f4f6; } .msf-step-item.active .msf-bubble { background: linear-gradient(135deg, #f09433, #bc1888); color: #fff; box-shadow: 0 4px 12px rgba(188, 24, 136, 0.3); } .msf-step-item.done .msf-bubble, .msf-bubble.ok { background: linear-gradient(135deg, #22c55e, #16a34a) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important; } /* Step text labels */ .msf-step-label { display: flex; flex-direction: column; gap: 1px; } .msf-step-num-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; } .msf-step-item.active .msf-step-num-label { color: #bc1888; } .msf-step-item.done .msf-step-num-label { color: #16a34a; } .msf-step-name { font-size: 0.85rem; font-weight: 600; color: #d1d5db; transition: color 0.3s; } .msf-step-item.active .msf-step-name { color: #111827; } .msf-step-item.done .msf-step-name { color: #374151; } /* Progress track between steps */ .msf-track { flex: 1; height: 3px; background: #e5e7eb; border-radius: 99px; margin: 0 16px; overflow: hidden; position: relative; } .msf-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #f09433, #bc1888); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 99px; } .msf-track-fill.full { width: 100%; background: linear-gradient(90deg, #f09433, #bc1888, #22c55e); } /* Step panel — the download-card inside MSF loses its own chrome */ .msf>.download-card { background: #ffffff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 28px 28px 32px !important; margin: 0 !important; max-width: 100% !important; } /* Platform title inside MSF */ .msf .platform-title { font-size: 1.15rem; font-weight: 700; color: #111827; margin-bottom: 3px; } /* Small "Step 1 / Step 2" pill above the step title */ .msf-step-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #bc1888; background: rgba(188, 24, 136, 0.06); border: 1px solid rgba(188, 24, 136, 0.2); border-radius: 6px; padding: 4px 10px; margin-bottom: 12px; } /* Back button (Step 2 → Step 1) */ .msf-back-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #e5e7eb; border-radius: 8px; color: #6b7280; font-family: "Inter", sans-serif; font-size: 0.8rem; font-weight: 500; cursor: pointer; padding: 7px 14px; margin-bottom: 20px; transition: all 0.2s; } .msf-back-btn:hover { border-color: #bc1888; color: #bc1888; background: rgba(188, 24, 136, 0.04); } /* URL reminder box shown in step 2 */ .msf-url-reminder { display: none; background: rgba(240, 148, 51, 0.05); border: 1px solid rgba(188, 24, 136, 0.18); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; animation: priv-up 0.35s ease; } .msf-url-reminder-label { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #bc1888; margin-bottom: 8px; } /* ── Responsive adjustments ─────────────────────────────────────────────────── */ @media (max-width: 560px) { .card { padding: 20px 16px; } .row { flex-direction: column; } .manual-row { flex-direction: column; } .btn { padding: 12px 18px; } .btn-sm { padding: 10px 18px; } .ubar { align-items: flex-start; } .ubadge { margin-left: 0; } } @media (max-width: 520px) { .msf-header { padding: 16px 18px 14px; } .msf>.download-card { padding: 20px 18px 24px !important; } /* Hide verbose step labels on small screens — bubbles remain visible */ .msf-step-label { display: none; } .msf-track { margin: 0 10px; } } /* ============================================================================= Audio / MP3 Downloader Page – Platform Cards Overrides for .audio-platform-card used in the "Related Download Tools" section on audio-downloader.html. Mirrors the home-platform-card layout but replaces every hardcoded home colour with --platform-color (#1db954). ============================================================================= */ /* Base card */ .audio-platform-card { background: #fff; border: 1px solid rgba(29, 185, 84, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; } /* Hover state */ .audio-platform-card:hover { border-color: var(--platform-color); box-shadow: 0 20px 40px rgba(var(--platform-color-rgb), 0.12); transform: translateY(-8px); } /* Top accent strip */ .audio-platform-card::before { background: var(--platform-color); opacity: 0; transition: opacity 0.4s ease; } .audio-platform-card:hover::before { opacity: 1; } /* Icon circle */ .audio-platform-card .platform-icon { background: var(--platform-color); box-shadow: 0 10px 20px rgba(var(--platform-color-rgb), 0.25); } /* Headings & body text */ .audio-platform-card h3 { color: #18152d; } .audio-platform-card p { color: #70778b; } /* Action button – idle */ .audio-platform-card .card-action-btn { background: rgba(29, 185, 84, 0.08) !important; color: var(--platform-color) !important; } /* Action button – hover */ .audio-platform-card:hover .card-action-btn { background: var(--platform-color) !important; color: #fff !important; transform: translateX(4px); box-shadow: 0 4px 15px rgba(var(--platform-color-rgb), 0.3) !important; } /* ============================================================================= Audio / MP3 Downloader Page – Tabs (matches home page design) ============================================================================= */ body[data-platform="audio"] .dl-tabs { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: space-between; flex-wrap: wrap; background: rgba(29, 185, 84, 0.15); /* Green platform background */ padding: 8px 8px; border-radius: 50px; margin-bottom: 25px; gap: 4px; } body[data-platform="audio"] .dl-tab { display: flex; align-items: center; justify-content: center; gap: 8px; border: none; background: transparent; color: #70778b; font-weight: 500; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; padding: 8px 12px; font-size: 14px; margin: 0; flex: none; } body[data-platform="audio"] .dl-tab:hover, body[data-platform="audio"] .dl-tab.active { background: #fff; } body[data-platform="audio"] .dl-tab.active { color: #18152d; box-shadow: 0 6px 15px rgba(29, 185, 84, 0.12); /* Green shadow */ } body[data-platform="audio"] .dl-tab .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--platform-color) !important; } /* Mobile specific styling for tabs wheel */ @media (max-width: 768px) { body[data-platform="audio"] .download-card .dl-tabs { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; flex-wrap: nowrap !important; align-items: center; background: transparent !important; border-radius: 0; padding: 0; margin-bottom: 20px; -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(to right, transparent, transparent); } body[data-platform="audio"] .download-card .dl-tabs::-webkit-scrollbar { display: none; } body[data-platform="audio"] .download-card .dl-tab { scroll-snap-align: center; flex: 0 0 auto; opacity: 0.8; transform: scale(0.9) !important; margin: 0 5px; background: transparent !important; box-shadow: none !important; } body[data-platform="audio"] .download-card .dl-tab.active { opacity: 1; transform: scale(1.15) !important; z-index: 2; font-weight: 700; } } /* --- START HOW IT WORKS SECTION REDESIGN --- */ .home-how-it-works-section { /* background-color: #fffafc; */ background: linear-gradient(135deg, rgba(188, 8, 253, 0.2), rgba(255, 0, 110, 0.2)); padding: 80px 0; overflow: hidden; } .home-how-it-works-section .container { display: flex !important; justify-content: space-between; align-items: center; gap: 80px; } .home-how-it-works-text-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } .home-how-it-works-section .home-section-label { display: flex; align-items: center; margin-bottom: 15px; text-align: left; } .home-how-it-works-section .home-section-label::before { content: ""; display: inline-block; width: 25px; height: 2px; background-color: #e81c9a; margin-right: 12px; } .home-how-it-works-section .home-section-title { margin: 0 0 10px 0; text-align: left !important; } .home-how-it-works-section .home-section-sub { margin: 0; max-width: 90%; text-align: left !important; } .home-how-it-works-section .home-steps-grid { flex: 1.3; display: flex; flex-direction: column; gap: 30px; position: relative; } .home-how-it-works-section .home-steps-grid::before { content: ""; position: absolute; left: 30px; top: 30px; bottom: 30px; width: 2px; background-color: #e81c9a; z-index: 0; } .home-how-it-works-section .home-step-card { position: relative; display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; grid-template-areas: "icon title" "icon text"; column-gap: 30px; align-items: center; z-index: 1; background: transparent; box-shadow: none; border: none; padding: 0; margin: 0; } .home-how-it-works-section .home-step-icon { grid-area: icon; width: 60px; height: 60px; background-color: #e81c9a; color: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; box-shadow: 0 10px 20px rgba(232, 28, 154, 0.3); align-self: center; margin: 0 !important; } .home-how-it-works-section .home-step-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 90px; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04); z-index: -1; } .home-how-it-works-section .home-step-title { grid-area: title; margin: 0; padding: 25px 25px 8px 25px; text-align: left; } .home-how-it-works-section .home-step-text { grid-area: text; margin: 0; padding: 0 25px 25px 25px; text-align: left; } @media (max-width: 991px) { .home-how-it-works-section .container { flex-direction: column; gap: 40px; } .home-how-it-works-section .home-section-sub { max-width: 100%; margin-bottom: 20px; } } @media (max-width: 575px) { .home-how-it-works-section .home-step-card { grid-template-columns: 50px 1fr; column-gap: 0px; } .home-how-it-works-section .home-step-icon { width: 50px; height: 50px; font-size: 20px; border-radius: 12px; } .home-how-it-works-section .home-step-card::before { left: 28px; } .home-how-it-works-section .home-steps-grid::before { left: 25px; } .home-how-it-works-section .home-step-text, .home-how-it-works-section .home-step-title { padding-left: 15px; } } /* --- END HOW IT WORKS SECTION REDESIGN --- */ /* --- START CTA SECTION REDESIGN --- */ /* .home-cta-section { padding: 60px 20px; } */ .home-cta-section .container { /* background-color: #fff0f7; */ border-radius: 24px; padding: 60px 40px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "label right" "title right" "sub right"; column-gap: 80px; row-gap: 0; align-items: center; text-align: left; } /* Left side text */ .home-cta-section .home-section-label { grid-area: label; display: flex; align-items: center; justify-content: flex-start !important; margin-bottom: 15px; text-align: left; } .home-cta-section .home-section-label::before { content: ""; display: inline-block; width: 25px; height: 2px; background-color: #e81c9a; margin-right: 12px; } .home-cta-section .section-title { grid-area: title; margin: 0 0 10px 0 !important; text-align: left !important; } .home-cta-section .section-sub { grid-area: sub; margin: 0 !important; text-align: left !important; max-width: 95%; } /* Right side white box */ .home-cta-section .container>div:last-child { grid-area: right; background-color: #fff !important; border-radius: 16px !important; padding: 10px 40px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; align-items: stretch !important; width: 100% !important; box-sizing: border-box !important; } /* Individual list items */ .home-cta-section .container>div:last-child>div { width: 100% !important; border: none !important; border-bottom: 1px solid #f0f0f0 !important; border-radius: 0 !important; padding: 25px 0 !important; text-align: left !important; display: grid !important; grid-template-columns: 3px 120px 1fr !important; align-items: center !important; column-gap: 20px !important; box-sizing: border-box !important; margin: 0 !important; } .home-cta-section .container>div:last-child>div:last-child { border-bottom: none !important; } /* Pink vertical line */ .home-cta-section .container>div:last-child>div::before { content: ""; display: block; width: 3px; height: 24px; background-color: #e81c9a; border-radius: 2px; } /* Titles and Texts inside list */ .home-cta-section .container>div:last-child>div>h4 { margin: 0 !important; text-align: left !important; } .home-cta-section .container>div:last-child>div>p { margin: 0 !important; text-align: left !important; } /* Responsive */ @media (max-width: 991px) { .home-cta-section .container { grid-template-columns: 1fr; grid-template-areas: "label" "title" "sub" "right"; gap: 0; row-gap: 15px; padding: 0px 20px; } } @media (max-width: 575px) { .home-cta-section .container>div:last-child { padding: 10px 20px !important; } .home-cta-section .container>div:last-child>div { grid-template-columns: 3px 80px 1fr !important; column-gap: 15px !important; } .home-cta-section .home-section-label { margin-bottom: 0; } .home-cta-section .container>div:last-child>div { padding: 15px 0 !important; } .home-cta-section .container>div:last-child>div>h4 { font-size: 18px !important; } } /* --- END CTA SECTION REDESIGN --- */ /* --- START USE CASES REDESIGN --- */ .home-use-cases-section .container { text-align: center; } .home-use-cases-section .home-section-label { display: flex; justify-content: center; margin-bottom: 10px; } .home-use-cases-section .home-section-sub { margin: 0 auto; max-width: 800px; } .home-use-cases-section .home-use-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background-color: #fae0ec; border: 3px solid #fae0ec; border-radius: 10px; overflow: hidden; margin-top: 50px; } .home-use-cases-section .home-use-case-card { background-color: #fff; padding: 40px; text-align: left; border-radius: 10px; } .home-use-cases-section .home-use-case-card:hover { transform: translateY(0); } .home-use-cases-section .home-use-case-card h3 { display: flex; align-items: center; margin: 0 0 15px 0; } .home-use-cases-section .home-use-case-card h3::before { content: ""; display: inline-block; width: 4px; height: 20px; background-color: #e81c9a; border-radius: 2px; margin-right: 12px; } .home-use-cases-section .home-use-case-card p { margin: 0; } @media (max-width: 991px) { .home-use-cases-section .home-use-cases-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .home-use-cases-section .home-use-cases-grid { grid-template-columns: 1fr; margin-top: 20px; } .home-use-cases-section .home-use-case-card { padding: 30px; } } /* --- END USE CASES REDESIGN --- */ /* --- START FB TROUBLESHOOTING SECTION REDESIGN --- */ .fb-troubleshooting-section .section-title, .fb-troubleshooting-section .section-label { margin-bottom: 20px; } .fb-troubleshooting-section .section-sub { margin-bottom: 50px; } .fb-troubleshooting-section .fb-troubleshooting-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .fb-troubleshooting-section .feature { width: calc(50% - 30px); margin-bottom: 0px; position: relative; padding: 30px 0 40px; border-top: 1px solid var(--border, #e5e7eb); border-bottom: none; border-left: none; border-right: none; } .fb-troubleshooting-section .feature h4 { margin-bottom: 10px; } .fb-troubleshooting-section .feature::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background-color: var(--fb, #1877f2); } @media (max-width: 991px) { .fb-troubleshooting-section .feature { width: calc(50% - 15px); } } @media (max-width: 768px) { .fb-troubleshooting-section { padding: 60px 0; } .fb-troubleshooting-section .feature { width: 100%; /* margin-bottom: 30px; */ } } /* --- END FB TROUBLESHOOTING SECTION REDESIGN --- */ /* --- START IG TROUBLESHOOTING SECTION REDESIGN --- */ .ig-troubleshooting-section { padding: 80px 0; background-color: var(--bg, #ffffff); } .ig-troubleshooting-section .section-label, .ig-troubleshooting-section .section-title, .ig-troubleshooting-section .section-sub { text-align: center; } .ig-troubleshooting-section .features-grid { /* display: flex; flex-wrap: wrap; */ row-gap: 50px; margin-top: 50px; } .ig-troubleshooting-section .feature { /* width: 33.333%; */ padding: 0 30px; background: transparent; box-shadow: none; border: none; margin: 0; border-radius: 0; } /* Add vertical borders between items */ .ig-troubleshooting-section .feature:not(:nth-child(3n)) { border-right: 1px solid var(--border, #eaeaea); } .ig-troubleshooting-section .feature:nth-child(3n+1) { padding-left: 0; } .ig-troubleshooting-section .feature:nth-child(3n) { padding-right: 0; } /* Pill heading style with pink dot */ .ig-troubleshooting-section .feature h4 { display: inline-flex; align-items: center; background-color: rgba(255, 0, 110, 0.05); /* very light pink */ padding: 8px 16px; border-radius: 20px; margin-bottom: 20px; } .ig-troubleshooting-section .feature h4::before { content: ""; display: inline-block; width: 8px; height: 8px; background-color: #ff006e; /* pink dot */ border-radius: 50%; margin-right: 10px; } /* Responsive Styles */ @media (max-width: 991px) { .ig-troubleshooting-section .feature { width: 50%; } .ig-troubleshooting-section .feature:not(:nth-child(3n)) { border-right: none; } .ig-troubleshooting-section .feature:not(:nth-child(2n)) { border-right: 1px solid var(--border, #eaeaea); } .ig-troubleshooting-section .feature:nth-child(3n+1) { padding-left: 30px; } .ig-troubleshooting-section .feature:nth-child(3n) { padding-right: 30px; } .ig-troubleshooting-section .feature:nth-child(2n+1) { padding-left: 0; } .ig-troubleshooting-section .feature:nth-child(2n) { padding-right: 0; } } @media (max-width: 768px) { .ig-troubleshooting-section { padding: 60px 0; } .ig-troubleshooting-section .feature { width: 100%; padding: 0 !important; border-right: none !important; } } /* --- END IG TROUBLESHOOTING SECTION REDESIGN --- */ /* --- YOUTUBE TROUBLESHOOTING SECTION REDESIGN --- */ .help-center-section { text-align: center; background: #ffffff; /* Ensuring clean background */ } .help-center-section .section-label { color: #ff0000; font-weight: 800; letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 15px; } .help-center-section .section-title { margin-bottom: 20px; } .help-center-section .section-title .text-accent { color: #ff0000; } .help-center-section .section-sub { margin-bottom: 60px; color: #70778b; max-width: 600px; margin-left: auto; margin-right: auto; } .help-center-section .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; max-width: 1100px; margin: 0 auto; } .help-center-section .feature { position: relative; padding: 30px 25px; background: #fff5f552; border: none; box-shadow: inset 0 0 17px 5px #fff5f5; text-align: left; border-radius: 0; display: flex; flex-direction: column; transition: none; } .help-center-section .feature:hover { transform: none; box-shadow: none; background: transparent; } /* Decorative corner brackets */ .help-center-section .feature::before, .help-center-section .feature::after { content: ""; position: absolute; width: 35px; height: 35px; border-color: #ff0000; border-style: solid; border-width: 0; } .help-center-section .feature::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; } .help-center-section .feature::after { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; } .help-center-section .feature h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; margin-top: 0; color: #030303; } .help-center-section .feature p { font-size: 0.9rem; color: #70778b; margin: 0; line-height: 1.6; } /* Responsive */ @media (max-width: 991px) { .help-center-section .features-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; } } @media (max-width: 768px) { .help-center-section .features-grid { grid-template-columns: 1fr; gap: 30px; } .help-center-section .feature { padding: 25px 20px; } } /* --- END YOUTUBE TROUBLESHOOTING SECTION REDESIGN --- */ /* --- TWITTER TROUBLESHOOTING SECTION REDESIGN --- */ .twitter-troubleshooting-section { background: #ffffff; text-align: center; } .twitter-troubleshooting-section .section-label { margin-bottom: 15px; } .twitter-troubleshooting-section .section-title { margin-bottom: 25px; } .twitter-troubleshooting-section .section-sub { margin-left: auto; margin-right: auto; margin-bottom: 0; max-width: 750px; } .twitter-troubleshooting-section .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 2px solid #000000; } .twitter-troubleshooting-section .feature { position: relative; padding: 40px 30px; background: transparent; border: none; box-shadow: none; text-align: left; border-radius: 0; border-right: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; transition: none; display: block; } .twitter-troubleshooting-section .feature:hover { transform: none; box-shadow: none; background: transparent; } .twitter-troubleshooting-section .feature:nth-child(3n+1) { padding-left: 0; padding-right: 60px; } .twitter-troubleshooting-section .feature:nth-child(3n) { border-right: none; padding-right: 0; padding-left: 60px; } .twitter-troubleshooting-section .feature:nth-child(n+4) { border-bottom: none; } .twitter-troubleshooting-section .feature h4 { margin-bottom: 12px; margin-top: 0; display: flex; flex-direction: column; } .twitter-troubleshooting-section .feature h4::before { content: ""; display: block; width: 8px; height: 8px; background-color: #000000; margin-bottom: 18px; } .twitter-troubleshooting-section .feature p { margin: 0; } /* Responsive */ @media (max-width: 991px) { .twitter-troubleshooting-section .features-grid { grid-template-columns: repeat(2, 1fr); } .twitter-troubleshooting-section .feature { padding: 30px 20px !important; border-right: 1px solid #eaeaea !important; border-bottom: 1px solid #eaeaea !important; } .twitter-troubleshooting-section .feature:nth-child(2n) { border-right: none !important; padding-left: 40px !important; padding-right: 0 !important; } .twitter-troubleshooting-section .feature:nth-child(2n+1) { padding-left: 0 !important; padding-right: 40px !important; } .twitter-troubleshooting-section .feature:nth-child(n+5) { border-bottom: none !important; } } @media (max-width: 768px) { .twitter-troubleshooting-section .features-grid { grid-template-columns: 1fr; } .twitter-troubleshooting-section .feature { padding: 30px 0 !important; border-right: none !important; border-bottom: 1px solid #eaeaea !important; } .twitter-troubleshooting-section .feature:last-child { border-bottom: none !important; } } /* --- END TWITTER TROUBLESHOOTING SECTION REDESIGN --- */ /* --- AUDIO TROUBLESHOOTING SECTION REDESIGN --- */ .audio-troubleshooting-section { text-align: center; background: #ffffff; } .audio-troubleshooting-section .section-label { margin-bottom: 15px; } .audio-troubleshooting-section .section-title { margin-bottom: 25px; } .audio-troubleshooting-section .section-sub { margin-left: auto; margin-right: auto; margin-bottom: 0; max-width: 750px; } .audio-troubleshooting-section .features-grid { display: flex; flex-direction: column; margin-top: 50px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .audio-troubleshooting-section .feature { display: grid; grid-template-columns: 40px 250px 1fr; align-items: center; padding: 15px 0; border-bottom: 1px solid #eaeaea; background: transparent; box-shadow: none; border-radius: 0; margin: 0; text-align: left; transition: none; border: none; } .audio-troubleshooting-section .feature:last-child { border-bottom: none; } .audio-troubleshooting-section .feature:hover { transform: none; box-shadow: none; background: transparent; } .audio-troubleshooting-section .feature>div { display: contents; } /* Equalizer Icon */ .audio-troubleshooting-section .feature::before { content: ""; display: block; width: 28px; height: 24px; background-image: linear-gradient(#2ecc71, #2ecc71), linear-gradient(#2ecc71, #2ecc71), linear-gradient(#2ecc71, #2ecc71), linear-gradient(#2ecc71, #2ecc71); background-size: 4px 14px, 4px 24px, 4px 10px, 4px 18px; background-position: 0 100%, 8px 100%, 16px 100%, 24px 100%; background-repeat: no-repeat; } .audio-troubleshooting-section .feature h4 { margin: 0; padding-right: 20px; } .audio-troubleshooting-section .feature p { margin: 0; } /* Responsive */ @media (max-width: 991px) { .audio-troubleshooting-section .feature { grid-template-columns: 40px 200px 1fr; } } @media (max-width: 768px) { .audio-troubleshooting-section .feature { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; row-gap: 8px; padding: 25px 0; } .audio-troubleshooting-section .feature h4 { grid-column: 2; grid-row: 1; padding-right: 0; } .audio-troubleshooting-section .feature p { grid-column: 2; grid-row: 2; } } /* --- END AUDIO TROUBLESHOOTING SECTION REDESIGN --- */ /* --- START AUDIO CONVERT SECTION REDESIGN --- */ .audio-convert-section .section-label { text-align: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .audio-convert-section .section-title { text-align: center; margin-bottom: 15px; } .audio-convert-section .section-sub { text-align: center; max-width: 620px; margin: 0 auto 50px; } .audio-convert-section .features-grid { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin: 0 auto; } .audio-convert-section .feature { position: relative; background: var(--card, #ffffff); border: 1px solid var(--border, #e5e7eb); border-radius: 16px; padding: 18px 22px; margin: 0; box-shadow: none; overflow: hidden; width: 100%; } /* Left color bar */ .audio-convert-section .feature::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--brand-color); } /* Inner div paddings to avoid overlaps */ .audio-convert-section .feature>div { padding-left: 68px; padding-right: 160px; } /* Platform Icon (left) */ .audio-convert-section .feature>div::before { content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 12px; background-color: var(--brand-color); background-size: 24px; background-position: center; background-repeat: no-repeat; } /* MP3 Chip (right) */ .audio-convert-section .feature>div::after { content: "MP3"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); background-color: var(--green-tint, #eefdf3); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); background-size: 13px; background-position: 10px center; background-repeat: no-repeat; color: var(--green-dark, #15803d); padding: 6px 14px 6px 28px; border-radius: 999px; font-size: 12px; font-weight: 700; pointer-events: none; } /* Font resets to match design */ .audio-convert-section .feature h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; } .audio-convert-section .feature p { margin: 0; color: var(--sub, #6b7280); font-size: 14px; } /* Brand Colors and Icons */ .audio-convert-section .feature:nth-child(1) { --brand-color: #FF0000; } .audio-convert-section .feature:nth-child(1)>div::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); } .audio-convert-section .feature:nth-child(2) { --brand-color: #E1306C; } .audio-convert-section .feature:nth-child(2)>div::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E"); } .audio-convert-section .feature:nth-child(3) { --brand-color: #1877F2; } .audio-convert-section .feature:nth-child(3)>div::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E"); } .audio-convert-section .feature:nth-child(4) { --brand-color: #111111; } .audio-convert-section .feature:nth-child(4)>div::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.261 5.632zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); } /* Responsive */ @media (max-width: 640px) { .audio-convert-section .feature { padding: 14px 16px; } .audio-convert-section .feature>div { padding-left: 56px; padding-right: 0; padding-bottom: 34px; } .audio-convert-section .feature>div::before { left: 16px; top: 14px; transform: none; width: 40px; height: 40px; background-size: 20px; } .audio-convert-section .feature::after { top: auto; bottom: 18px; right: auto; left: 72px; transform: none; } .audio-convert-section .feature>div::after { top: auto; /* bottom: 12px; */ /* right: auto; */ /* left: 140px; */ transform: none; margin-top: 5px; } } /* --- END AUDIO CONVERT SECTION REDESIGN --- */ /* iOS Safari force-zooms any focused control under 16px (T-07). Last in source so it outranks same-specificity mobile font-size rules above. */ @media (max-width: 768px) { .input-wrapper input, .modal-input-group input, .dl-input, .sticky-bottom-bar .dl-input, .tw-quality-select, .sticky-select-wrapper select, .field, .field-sm, .paste { font-size: 16px; } /* The base rule clips to the desktop pill's rounded corners. On mobile the row is a bare layout container and its children carry their own shadows, so clipping only eats the edge ones (T-08). */ .sticky-bottom-bar .sticky-input-row { overflow: visible; } } .download-card.lock { opacity: 0.35; pointer-events: none; }