:root { /* Colors — default fallbacks; theme.js overrides these live via inline custom properties on using the studio's saved theme. */ --bg-body: #f4f5f7; --text-main: #111827; --text-muted: #4b5563; --text-light: #6b7280; --brand-orange: #f97316; --brand-orange-light: #fff7ed; --border-color: #e5e7eb; --card-bg: #ffffff; --panel-border: #d1d5db; --btn-bg-light: #eef0f2; --btn-bg-hover: #e2e5e9; --accent-soft: #fff7ed; --accent-soft-2: #ffedd5; --btn-primary-bg: #111111; --btn-primary-fg: #ffffff; --btn-primary-hover: #000000; --cta-bg: #ffffff; --cta-text: #111827; --cta-glow: rgba(249, 115, 22, 0.25); --step-line: #e5e7eb; --trim-dim: rgba(17, 24, 39, 0.12); --logo-bg: #111111; --logo-fg: #ffffff; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); /* Spacing Constraints */ --max-width: 1280px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: inherit; border: none; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 32px; } #features, #faq { scroll-margin-top: 32px; } /* --- Scroll reveal (scroll-linked: opacity + translate track position on every scroll step, easing in BOTH directions for smooth motion & fade) --- */ .reveal { opacity: 0; transform: translateY(28px); will-change: transform, opacity; } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .hero-content, .note-card { animation: none !important; } .hero .btn-primary, .try-link { animation: none !important; } .btn-primary::before { animation: none; } } /* --- Header --- */ .header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-body) 30%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03); } .header-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 32px; } .logo-group { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 36px; height: 36px; background-color: var(--logo-bg, #111); background-image: var(--insta-gradient, linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--logo-fg, white); align-self: center; margin-right: 4px; } .logo-text { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; } .logo-by { font-size: 0.875rem; font-weight: 400; color: var(--text-main); letter-spacing: 0.02em; white-space: nowrap; transform: translateY(2px); } /* "mr.velosofy" — pink italic (matches the brand accent) with a soft glow. */ .grad-text { font-style: italic; font-weight: 600; font-size: 1em; background-image: var(--insta-gradient, linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5)); background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: grad-breathe 8s ease-in-out infinite alternate; filter: drop-shadow(0 0 12px rgba(214, 41, 118, 0.35)); padding: 0 3px; margin: 0 -3px; } @keyframes grad-breathe { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .privacy-badge { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--card-bg) 30%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); padding: 8px 16px; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent); box-shadow: var(--shadow-sm); font-size: 0.875rem; font-weight: 500; color: var(--text-muted); } .privacy-badge svg { width: 14px; height: 14px; opacity: 0.7; } .header-actions { display: flex; align-items: center; gap: 12px; } /* Light / dark mode toggle (top-right, next to the privacy badge). */ .ui-mode-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: color-mix(in srgb, var(--card-bg) 30%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent); border-radius: 9999px; box-shadow: var(--shadow-sm); color: var(--text-main); cursor: pointer; transition: background-color 0.2s; } .ui-mode-btn:hover { background-color: color-mix(in srgb, var(--btn-bg-light) 40%, transparent); } .ui-mode-btn svg { width: 18px; height: 18px; } .ui-mode-btn .icon-sun { display: none; } html[data-ui-mode="dark"] .ui-mode-btn .icon-sun { display: block; } html[data-ui-mode="dark"] .ui-mode-btn .icon-moon { display: none; } /* --- Hero Section --- */ .hero { display: flex; align-items: center; gap: 64px; padding: 48px 0 72px; } .hero-content { flex: 1; } .hero-title { font-size: 3.9rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 20px; } .hero-title .highlight { color: var(--brand-orange); } .hero-desc { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 36px; max-width: 430px; } .btn-primary { position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden; background-color: var(--btn-primary-bg, #111); background-image: var(--insta-gradient, linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5)); color: var(--btn-primary-fg, white); padding: 14px 28px; border-radius: 12px; font-size: 1.05rem; font-weight: 700; box-shadow: var(--shadow-md); transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; } .btn-primary > * { position: relative; z-index: 1; } /* Rotating brand-color blob behind the button content. */ .btn-primary::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); filter: blur(18px); animation: btnGradSpin 16s linear infinite; pointer-events: none; } @keyframes btnGradSpin { to { transform: rotate(360deg); } } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-primary svg { width: 20px; height: 20px; } /* Hero "Start Creating" — no glow, plain button. */ .btn-secondary-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); transition: color 0.2s; } .btn-secondary-link:hover { color: var(--text-main); } .btn-secondary-link svg { width: 18px; height: 18px; } /* --- Hero Graphic: voice-note output at EXACT 1080x360 proportions --- */ .hero-graphic { flex: 1; width: 100%; } .note-card { background: var(--card-bg); border-radius: 26px; padding: 14px; border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); } /* The stage matches the real export canvas: 3:1 (1080x360). The inner .note is laid out at native 1080x360 px and scaled by JS to fit, so the bars/avatar/timer keep their exact export geometry at any size. The hero note always uses a FIXED Instagram-gradient palette (the brand gradient's colors), never the saved generation theme's colors. */ .note-frame { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 3 / 1; border-radius: 18px; overflow: hidden; background: #591c71; box-shadow: 0 20px 50px -20px rgba(193, 26, 205, 0.5); } .note { position: absolute; top: 0; left: 0; width: 1080px; height: 360px; transform-origin: 0 0; } .note-bubble { position: absolute; left: 60px; top: 75px; width: 960px; height: 210px; border-radius: 44px; background: #c820af; } .note-avatar { position: absolute; left: 100px; top: 130px; width: 100px; height: 100px; border-radius: 50%; object-fit: cover; background: #312e81; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .note-wave { position: absolute; left: 228px; top: 109px; width: 656px; height: 142px; } .note-bar { position: absolute; width: 8.2px; border-radius: 4px; background: #ff78dd; transition: background-color 0.15s ease; } .note-bar.played { background: #feda75; } .note-playhead { position: absolute; top: 0; left: 0; width: 8px; height: 142px; border-radius: 4px; background: #feda75; box-shadow: 0 0 14px rgba(254, 218, 117, 0.85); pointer-events: none; } .note-time { position: absolute; left: 980px; top: 180px; transform: translate(-100%, -50%); font-size: 26px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: #feda75; } /* Small "Live Preview" caption above the note stage. */ .live-preview-label { display: flex; align-items: center; justify-content: center; gap: 6px; padding-bottom: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); } .live-preview-label .status-dot { margin-right: 0; background-color: var(--note-timer, var(--brand-orange)); } /* Below the stage: a centered, underlined, pulsing link into the studio. */ .note-footer { display: flex; justify-content: center; padding: 14px 8px 2px; font-size: 0.875rem; color: var(--text-muted); font-weight: 500; } .try-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color 0.2s; animation: tryPulse 2s ease-in-out infinite; } .try-link:hover { color: var(--text-main); } .try-link svg { width: 16px; height: 16px; } @keyframes tryPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .status-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--brand-orange); border-radius: 50%; margin-right: 6px; } /* Hero entrance */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } .hero-content { animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .note-card { animation: scaleIn 0.7s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; } /* --- Section header --- */ .section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; } .section-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-orange); margin-bottom: 14px; } .section-head h2 { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; } .section-head p { font-size: 1.0625rem; color: var(--text-muted); } /* --- Features Section --- */ .features { margin-bottom: 96px; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-card { background: var(--card-bg); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); padding: 28px 26px; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--step-line, #e5e7eb); } .feature-icon { width: 48px; height: 48px; background-color: var(--brand-orange-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--text-main); margin-bottom: 18px; } .feature-icon svg { width: 22px; height: 22px; } .feature-text h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 6px; } .feature-text p { font-size: 0.875rem; color: var(--text-muted); } /* --- How It Works Section --- */ .how-it-works { text-align: center; margin-bottom: 96px; padding: 0 20px; } .steps-container { display: flex; justify-content: space-between; position: relative; max-width: 900px; margin: 0 auto; } .step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; padding: 0 16px; } .step-icon { width: 80px; height: 80px; background-color: var(--brand-orange-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--brand-orange); margin-bottom: 20px; background-clip: padding-box; border: 8px solid var(--bg-body); /* Fake gap for the dashed line */ transition: transform 0.25s; } .step:hover .step-icon { transform: translateY(-4px); } .step-icon svg { width: 28px; height: 28px; } .step h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; } .step p { font-size: 0.875rem; color: var(--text-muted); max-width: 240px; } /* --- Privacy Priority Section --- */ .privacy-priority { background: linear-gradient(120deg, var(--accent-soft, #fff7ed) 0%, var(--accent-soft-2, #ffedd5) 100%); border-radius: 24px; padding: 36px 44px; display: flex; align-items: center; gap: 28px; margin-bottom: 72px; border: 1px solid var(--accent-soft-2, #ffedd5); } .shield-icon { flex-shrink: 0; color: var(--text-main); } .shield-icon svg { width: 48px; height: 48px; } .privacy-content h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; } .privacy-content p { color: var(--text-muted); margin-bottom: 16px; font-size: 0.95rem; } .tech-stack { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.875rem; color: var(--text-light); } .tech-badge { display: flex; align-items: center; gap: 6px; background: var(--card-bg); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-color); color: var(--text-muted); font-weight: 500; } .tech-badge svg { width: 14px; height: 14px; } /* --- FAQ --- */ .faq { margin-bottom: 96px; } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1000px; margin: 0 auto; } .faq-item { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow-sm); transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; } .faq-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--step-line, #e5e7eb); } .faq-item h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; display: flex; gap: 12px; align-items: baseline; } .faq-item h4 .q { color: var(--brand-orange); font-weight: 800; } .faq-item p { font-size: 0.875rem; color: var(--text-muted); } /* --- Final CTA --- */ .final-cta { text-align: center; background: var(--cta-bg, #111); color: var(--cta-text, #fff); border: 1px solid var(--border-color); border-radius: 28px; padding: 72px 40px; margin-bottom: 72px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } .final-cta::before { content: ""; position: absolute; top: -60%; left: 50%; transform: translateX(-50%); width: 90%; height: 140%; background: radial-gradient(closest-side, var(--cta-glow, rgba(249, 115, 22, 0.25)), transparent); pointer-events: none; } .final-cta h2 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; position: relative; } .final-cta p { color: var(--text-muted); font-size: 1.0625rem; max-width: 480px; margin: 0 auto 32px; position: relative; } .final-cta .btn-primary { background-color: var(--btn-primary-bg, var(--brand-orange)); background-image: var(--insta-gradient, linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5)); color: var(--btn-primary-fg, #fff); } .final-cta .btn-primary:hover { background-color: var(--btn-primary-hover, #ea580c); filter: brightness(1.08); } /* --- Footer --- */ .footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 48px; font-size: 0.875rem; color: var(--text-light); } .footer .heart-svg { width: 14px; height: 14px; vertical-align: -2px; display: inline-block; } .footer-links { display: flex; gap: 24px; } .footer-links a { transition: color 0.2s; } .footer-links a:hover { color: var(--text-main); } /* --- Responsive Design --- */ @media (max-width: 900px) { .hero { flex-direction: column; text-align: center; gap: 48px; padding: 40px 0 56px; } .hero-title { font-size: 2.9rem; } .hero-desc { margin: 0 auto 28px; } .features-grid { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } .steps-container { flex-direction: column; gap: 48px; } .privacy-priority { flex-direction: column; text-align: center; padding: 32px 24px; } .tech-stack { justify-content: center; } } @media (max-width: 768px) { .header .privacy-badge { display: none; } } @media (max-width: 600px) { .header-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; } /* Keep "Insta Notes by mr.velosofy" on one line — tighten gaps and scale the byline down so the header stays compact on narrow screens. */ .header-inner { padding: 12px; } .logo-group { gap: 4px; } .logo-by { font-size: 0.75rem; } .grad-text { font-size: 1em; } .hero-title { font-size: 2.4rem; } .note-card { padding: 10px; } .final-cta { padding: 48px 24px; } .final-cta h2 { font-size: 1.9rem; } .footer { flex-direction: column; text-align: center; } /* Feature cards — icon and text sit on the same line. */ .feature-card { display: flex; align-items: center; gap: 16px; padding: 20px 18px; text-align: left; } .feature-icon { flex-shrink: 0; margin-bottom: 0; } .feature-text { flex: 1; min-width: 0; } .feature-text h3 { font-size: 1rem; } } /* Tiniest phones (320px) — tighten header spacing so the byline stays on one line. */ @media (max-width: 340px) { .header-inner { padding: 10px 8px; gap: 8px; } .logo-group { gap: 2px; } .logo-by { font-size: 0.6875rem; } }