:root { --bg: #FAFAFA; --bg-soft: #F4F4F6; --surface: #FFFFFF; --surface-alt: #F8F8FA; --ink: #0F1014; --ink-muted: #4B5563; --ink-subtle: #9CA3AF; --border: #E5E7EB; --border-strong: #D1D5DB; --accent: #2563EB; --accent-hover: #1D4ED8; --accent-light: #DBEAFE; --accent-glow: rgba(37, 99, 235, 0.18); --grad: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); --grad-soft: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); --success: #16A34A; --warn: #DC2626; --shadow-sm: 0 1px 2px rgba(15,16,20,0.04), 0 1px 3px rgba(15,16,20,0.05); --shadow-md: 0 1px 3px rgba(15,16,20,0.04), 0 8px 16px rgba(15,16,20,0.06); --shadow-lg: 0 4px 12px rgba(15,16,20,0.06), 0 24px 48px rgba(15,16,20,0.08); --shadow-glow: 0 8px 32px rgba(37, 99, 235, 0.20); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --tb: 64px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01'; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); } h1 { letter-spacing: -0.04em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { max-width: 100%; display: block; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: 800px; margin: 0 auto; padding: 0 32px; } ::selection { background: var(--accent); color: #fff; } /* ===== TOPBAR ===== */ .topbar { position: sticky; top: 0; z-index: 100; height: var(--tb); background: rgba(250, 250, 250, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 0 32px; display: flex; align-items: center; gap: 24px; } .tb-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; cursor: pointer; flex-shrink: 0; } .tb-logo .mark { width: 32px; height: 32px; border-radius: 50%; background-image: url("data:image/png;base64,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"); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; box-shadow: var(--shadow-glow); flex-shrink: 0; } .tb-nav { display: flex; gap: 28px; margin-left: auto; align-items: center; } .tb-nav a { font-size: 14px; font-weight: 500; color: var(--ink-muted); transition: color 0.15s; } .tb-nav a:hover { color: var(--ink); } .tb-cta { background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 999px; border: 0; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.15s; } .tb-cta:hover { background: var(--accent); transform: translateY(-1px); } .tb-back { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: color 0.15s; background: none; border: 0; padding: 8px; } .tb-back:hover { color: var(--ink); } .home-only { display: flex; } .quiz-only { display: none; } body.in-quiz .home-only { display: none; } body.in-quiz .quiz-only { display: flex; } @media (max-width: 700px) { .tb-nav { display: none; } .topbar { padding: 0 20px; } } /* ===== VIEWS ===== */ .view { display: none; } .view.active { display: block; animation: viewFade 0.35s ease; } @keyframes viewFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== HERO ===== */ .hero { min-height: calc(100svh - var(--tb)); min-height: calc(100vh - var(--tb)); display: flex; align-items: center; justify-content: center; padding: 32px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 20% 10%, rgba(6, 182, 212, 0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 60%); } .hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background-image: linear-gradient(to right, rgba(15,16,20,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,16,20,0.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%); } .hero-inner { max-width: 820px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); padding: 6px 14px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-bottom: 28px; box-shadow: var(--shadow-sm); } .eyebrow .live { width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); } .hero h1 { font-size: clamp(40px, 6.5vw, 84px); margin-bottom: 22px; font-weight: 900; } .hero p.lede { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-muted); max-width: 580px; margin: 0 auto 32px; line-height: 1.55; } .hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; } .hero-meta { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-subtle); font-weight: 500; } .hero-meta .mark { width: 4px; height: 4px; background: var(--ink-subtle); border-radius: 50%; } /* ===== BUTTONS ===== */ .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 24px; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: 0; text-decoration: none; } .btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-md), var(--shadow-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 12px 40px rgba(37,99,235,0.32); } .btn-primary:active { transform: translateY(0); } .btn-primary.btn-lg { padding: 18px 32px; font-size: 17px; border-radius: 12px; } .btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-ghost.btn-lg { padding: 18px 32px; font-size: 17px; border-radius: 12px; } /* ===== SECTIONS ===== */ .section { padding: 100px 32px; } .section h2 { font-size: clamp(32px, 4.2vw, 56px); margin-bottom: 14px; font-weight: 900; } .section .sub { font-size: 17px; color: var(--ink-muted); max-width: 580px; margin-bottom: 56px; line-height: 1.55; } .section-head { margin-bottom: 0; } /* ===== HOW IT WORKS ===== */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } } .step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; position: relative; overflow: hidden; } .step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .step-num { display: inline-block; font-size: 12px; font-weight: 600; background: var(--accent-light); color: var(--accent); padding: 4px 10px; border-radius: 999px; letter-spacing: 0.04em; margin-bottom: 16px; } .step-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; } .step-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.6; } /* ===== EXAMPLES ===== */ .examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 800px) { .examples-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .examples-grid { grid-template-columns: 1fr; } } .ex-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; } .ex-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .ex-thumb { aspect-ratio: 4/3; padding: 14px; position: relative; overflow: hidden; } .ex-thumb .ex-h { font-size: 13px; font-weight: 800; line-height: 1.1; margin-bottom: 5px; letter-spacing: -0.02em; } .ex-thumb .ex-p { font-size: 9px; opacity: 0.65; line-height: 1.4; margin-bottom: 8px; } .ex-thumb .ex-btn { display: inline-block; padding: 4px 9px; font-size: 8px; font-weight: 600; border-radius: 3px; } .ex-thumb .ex-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; } .ex-thumb .ex-block { padding: 5px 4px; font-size: 7px; border-radius: 3px; text-align: center; font-weight: 600; } .ex-info { padding: 14px 14px 16px; border-top: 1px solid var(--border); } .ex-info h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; letter-spacing: -0.02em; } .ex-info p { font-size: 12px; color: var(--ink-subtle); line-height: 1.4; } /* Vibe styling for example thumbs (also used in generated preview) */ .ex-clean { background: #FAFAFA; color: #111; } .ex-clean .ex-btn { background: #111; color: #FAFAFA; } .ex-clean .ex-block { background: #fff; border: 1px solid #E5E7EB; } .ex-bold { background: #FFE600; color: #0E1340; font-family: 'Space Grotesk', sans-serif; } .ex-bold .ex-h { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; } .ex-bold .ex-btn { background: #FF3B6A; color: #fff; border: 1.5px solid #0E1340; } .ex-bold .ex-block { background: #fff; border: 1.5px solid #0E1340; } .ex-elegant { background: #F6F1E8; color: #2A2520; font-family: Georgia, serif; } .ex-elegant .ex-h { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; } .ex-elegant .ex-btn { background: #2A2520; color: #F6F1E8; border-radius: 0; letter-spacing: 0.05em; text-transform: uppercase; } .ex-elegant .ex-block { background: #fff; border: 1px solid #D8CFC0; } .ex-friendly { background: #FFF5F0; color: #2D1810; font-family: 'Nunito', sans-serif; } .ex-friendly .ex-h { font-weight: 900; } .ex-friendly .ex-btn { background: #FF7849; color: #fff; border-radius: 999px; } .ex-friendly .ex-block { background: #fff; border-radius: 8px; } .ex-modern { background: #0A0A0F; color: #F0F0F5; } .ex-modern .ex-h { background: linear-gradient(90deg, #fff 0%, #A6A3FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ex-modern .ex-btn { background: linear-gradient(135deg, #6366F1, #A855F7); color: #fff; } .ex-modern .ex-block { background: #14141C; } .ex-editorial { background: #F8F4ED; color: #1A1A1F; font-family: 'Cormorant Garamond', serif; } .ex-editorial .ex-h { font-family: 'DM Serif Display', serif; font-weight: 400; } .ex-editorial .ex-btn { background: #C4302B; color: #fff; border-radius: 0; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Inter', sans-serif; } .ex-editorial .ex-block { background: #FFFCF6; border: 1px solid #1A1A1F; } .ex-vibrant { background: #FFFFFF; color: #0A0A0F; } .ex-vibrant .ex-h { font-weight: 900; } .ex-vibrant .ex-btn { background: linear-gradient(135deg, #FF006E, #8338EC); color: #fff; border-radius: 999px; } .ex-vibrant .ex-block { background: #fff; border: 2px solid #FF006E; border-radius: 8px; } .ex-earthy { background: #F5F1E8; color: #2D3019; } .ex-earthy .ex-h { font-weight: 700; } .ex-earthy .ex-btn { background: #6B8E4E; color: #fff; border-radius: 4px; } .ex-earthy .ex-block { background: #FAF7EE; border: 1px solid #D8D2C0; border-radius: 6px; } .ex-luxe { background: #0F0F0F; color: #F0E8D8; } .ex-luxe .ex-h { font-family: 'DM Serif Display', serif; font-weight: 400; font-style: italic; color: #F0E8D8; } .ex-luxe .ex-btn { background: #C9A961; color: #0F0F0F; border-radius: 0; letter-spacing: 0.12em; text-transform: uppercase; font-family: 'Inter', sans-serif; } .ex-luxe .ex-block { background: #1A1A1A; border: 1px solid #2D2A20; color: #C9A961; } /* ===== FAQ ===== */ .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.15s; } .faq-item:hover { border-color: var(--border-strong); } .faq-item.open { border-color: var(--accent); box-shadow: var(--shadow-sm); } .faq-q { width: 100%; padding: 22px 24px; font-family: inherit; font-size: 16px; font-weight: 600; background: transparent; border: 0; cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); letter-spacing: -0.01em; } .faq-q .arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: transform 0.2s, background 0.2s; color: var(--ink-muted); flex-shrink: 0; } .faq-item.open .faq-q .arrow { transform: rotate(180deg); background: var(--accent); color: #fff; } .faq-a { padding: 0 24px 22px; font-size: 15px; line-height: 1.65; color: var(--ink-muted); display: none; } .faq-item.open .faq-a { display: block; } /* ===== BOTTOM CTA ===== */ .bottom-cta { padding: 100px 32px; background: var(--ink); color: #fff; position: relative; overflow: hidden; } .bottom-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(6, 182, 212, 0.28) 0%, transparent 60%); pointer-events: none; } .bottom-cta .container { position: relative; text-align: center; } .bottom-cta h2 { color: #fff; font-size: clamp(36px, 5vw, 64px); margin-bottom: 16px; } .bottom-cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; } /* ===== FOOTER ===== */ footer { background: var(--surface); border-top: 1px solid var(--border); padding: 48px 32px 32px; } footer .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } footer .footer-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; } footer .footer-logo .mark { width: 28px; height: 28px; border-radius: 50%; background-image: url("data:image/png;base64,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"); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; flex-shrink: 0; } footer .footer-links { display: flex; gap: 24px; font-size: 14px; color: var(--ink-muted); } footer .footer-links a:hover { color: var(--ink); } footer .footer-fine { width: 100%; text-align: center; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-subtle); font-family: 'JetBrains Mono', monospace; } /* ===== QUIZ VIEW ===== */ .quiz-page { min-height: calc(100vh - var(--tb)); padding: 48px 32px 80px; background: var(--bg); position: relative; } .quiz-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(6, 182, 212, 0.06) 0%, transparent 60%); } .quiz-card { max-width: 760px; margin: 0 auto; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 40px 40px 32px; box-shadow: var(--shadow-md); } @media (max-width: 600px) { .quiz-card { padding: 28px 24px; } } /* Intro screen — shown once before the quiz starts */ .quiz-intro h2 { font-size: clamp(28px, 4.2vw, 42px); margin: 12px 0 16px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; } .quiz-intro .gradient-text { display: inline; } .quiz-intro .intro-lead { font-size: 17px; color: var(--ink-muted); line-height: 1.6; margin-bottom: 28px; } .quiz-intro .intro-bullets { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .quiz-intro .intro-bullets li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--ink); } .quiz-intro .intro-bullets li .icon { width: 28px; height: 28px; flex-shrink: 0; margin-top: 1px; background: var(--accent-light); color: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: 'JetBrains Mono', monospace; } .quiz-intro .intro-bullets li strong { font-weight: 700; } .quiz-intro .intro-tip { background: var(--accent-light); border: 1px solid var(--accent-glow); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 0 10px 10px 0; font-size: 14px; color: var(--accent); line-height: 1.55; margin-bottom: 32px; font-weight: 500; } .btn-begin { display: inline-flex; align-items: center; gap: 8px; background: var(--grad); color: white; border: 0; padding: 16px 30px; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-md), var(--shadow-glow); transition: transform 0.15s, box-shadow 0.15s; } .btn-begin:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 12px 40px rgba(37,99,235,0.32); } /* Toggle between intro and quiz */ .quiz-card.showing-intro .quiz-header, .quiz-card.showing-intro .progress-bar, .quiz-card.showing-intro .question, .quiz-card.showing-intro .nav-row { display: none !important; } .quiz-card:not(.showing-intro) .quiz-intro { display: none; } .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; } .quiz-header h2 { font-size: 24px; font-weight: 800; } .progress-pill { background: var(--accent-light); color: var(--accent); padding: 6px 14px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 12px; } .progress-bar { height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: 36px; } .progress-fill { height: 100%; background: var(--grad); width: 0%; transition: width 0.4s ease; border-radius: 999px; } .question { display: none; animation: qFade 0.3s ease; } .question.active { display: block; } @keyframes qFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .q-label { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--accent); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .q-label.optional { color: var(--ink-subtle); } .optional-tag { font-size: 10px; background: var(--bg-soft); color: var(--ink-muted); padding: 3px 8px; border-radius: 999px; font-family: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .required-tag { font-size: 10px; background: var(--accent-light); color: var(--accent); padding: 3px 8px; border-radius: 999px; font-family: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .question h3 { font-size: clamp(22px, 2.5vw, 30px); margin-bottom: 10px; font-weight: 800; line-height: 1.15; } .question .q-help { font-size: 14px; color: var(--ink-muted); margin-bottom: 24px; line-height: 1.6; } .question .q-help code { background: var(--accent-light); color: var(--accent); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'JetBrains Mono', monospace; } .input-text { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 16px; font-weight: 500; background: var(--surface); color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; } .input-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .input-text::placeholder { color: var(--ink-subtle); font-weight: 400; } textarea.input-text { min-height: 140px; line-height: 1.55; resize: vertical; } .options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 600px) { .options { grid-template-columns: 1fr; } } .opt { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface); cursor: pointer; transition: all 0.15s; font-weight: 500; font-size: 15px; color: var(--ink); text-align: left; display: flex; align-items: center; gap: 12px; font-family: inherit; } .opt:hover { border-color: var(--ink); background: var(--surface-alt); } .opt.selected { border-color: var(--accent); background: var(--accent-light); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .opt .swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; } .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 12px; flex-wrap: wrap; } .btn-back, .btn-skip { background: transparent; border: 0; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-muted); padding: 8px 12px; font-family: inherit; } .btn-back:hover, .btn-skip:hover { color: var(--ink); } .btn-skip { border: 1px dashed var(--border); border-radius: 999px; padding: 8px 16px; } .btn-next { background: var(--ink); color: #fff; padding: 12px 24px; border: 0; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-next:hover { background: var(--accent); } .btn-next:disabled { opacity: 0.4; cursor: not-allowed; } /* Logo upload */ .upload-zone { border: 1.5px dashed var(--border); border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: all 0.15s; background: var(--surface-alt); display: block; } .upload-zone:hover { border-color: var(--accent); background: var(--accent-light); } .upload-zone.has-file { border-style: solid; background: var(--surface); padding: 16px; border-color: var(--border-strong); } .upload-zone p { font-weight: 600; margin-bottom: 4px; color: var(--ink); } .upload-zone .upload-hint { font-size: 13px; color: var(--ink-subtle); font-family: 'JetBrains Mono', monospace; } .upload-zone input[type="file"] { display: none; } .upload-preview { display: flex; align-items: center; gap: 14px; } .upload-preview img { max-width: 80px; max-height: 60px; border: 1px solid var(--border); border-radius: 8px; background: white; padding: 6px; object-fit: contain; } .upload-preview .filename { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; word-break: break-all; flex: 1; text-align: left; color: var(--ink); } .upload-preview .remove { background: var(--surface-alt); color: var(--ink-muted); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-weight: 600; cursor: pointer; font-size: 12px; font-family: inherit; } .upload-preview .remove:hover { color: var(--warn); border-color: var(--warn); } /* Color pickers (4 slots) */ .color-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .color-pickers { grid-template-columns: 1fr; } } .cp { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--surface); } .cp label { display: block; font-weight: 600; font-size: 12px; color: var(--ink-muted); margin-bottom: 10px; letter-spacing: 0.04em; text-transform: uppercase; } .cp .row { display: flex; align-items: center; gap: 8px; } .cp input[type="color"] { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; padding: 0; background: var(--surface); flex-shrink: 0; } .cp .hex-input { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); text-transform: uppercase; min-width: 0; transition: all 0.15s; } .cp .hex-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .cp .hex-input::placeholder { opacity: 0.4; text-transform: none; font-weight: 400; } .cp .hex-input.invalid { border-color: var(--warn); color: var(--warn); } .cp .clear { background: transparent; border: 0; cursor: pointer; font-size: 16px; padding: 6px; color: var(--ink-subtle); } .cp .clear:hover { color: var(--warn); } /* Photos */ .photos-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .photo-row { display: grid; grid-template-columns: 64px 1fr 140px 28px; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface); } @media (max-width: 700px) { .photo-row { grid-template-columns: 64px 1fr 28px; } .photo-row select { grid-column: 1 / -1; } } .photo-thumb { width: 64px; height: 48px; border: 1px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--surface-alt); overflow: hidden; } .photo-thumb.has-file { border-style: solid; } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; } .photo-thumb .placeholder { font-size: 10px; color: var(--ink-subtle); font-family: 'JetBrains Mono', monospace; } .photo-row input[type="file"] { display: none; } .photo-row .photo-desc, .photo-row select { padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); } .photo-row .photo-desc:focus, .photo-row select:focus { outline: none; border-color: var(--accent); } .photo-row select { cursor: pointer; } .photo-row .remove { background: var(--surface-alt); color: var(--ink-muted); border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-weight: 700; font-size: 16px; line-height: 1; padding: 0; } .photo-row .remove:hover { color: var(--warn); border-color: var(--warn); } .btn-add-photo { background: var(--surface); border: 1.5px dashed var(--border); border-radius: 10px; padding: 12px; width: 100%; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--ink-muted); } .btn-add-photo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } /* Section pill (above q-label) */ .section-pill { display: inline-block; background: var(--bg-soft); color: var(--ink-muted); padding: 4px 12px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; } /* Multi-select chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink); transition: all 0.15s; } .chip:hover { border-color: var(--ink); background: var(--surface-alt); } .chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .chips-meta { font-size: 12px; color: var(--ink-subtle); margin-top: 10px; font-family: 'JetBrains Mono', monospace; } /* Vibe options grid (9 vibes) */ .vibe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 600px) { .vibe-grid { grid-template-columns: repeat(2, 1fr); } } .vibe-opt { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font-family: inherit; text-align: left; transition: all 0.15s; display: flex; flex-direction: column; gap: 8px; } .vibe-opt:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .vibe-opt.selected { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 4px var(--accent-glow); } .vibe-opt .vibe-swatch { height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: -0.01em; } .vibe-opt .vibe-name { font-weight: 600; font-size: 13px; color: var(--ink); } .vibe-opt .vibe-for { font-size: 11px; color: var(--ink-subtle); line-height: 1.3; } .vibe-opt.selected .vibe-name { color: var(--accent); } /* Offerings (dynamic) */ .offerings-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .offering-row { display: grid; grid-template-columns: 1fr 1.5fr 28px; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface); } @media (max-width: 600px) { .offering-row { grid-template-columns: 1fr 28px; } .offering-row .off-desc { grid-column: 1 / -1; } } .offering-row input { padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); } .offering-row input:focus { outline: none; border-color: var(--accent); } .offering-row .remove { background: var(--surface-alt); color: var(--ink-muted); border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-weight: 700; font-size: 16px; line-height: 1; padding: 0; } .offering-row .remove:hover { color: var(--warn); border-color: var(--warn); } /* Contact info combined grid */ .contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .contact-fields { grid-template-columns: 1fr; } } .contact-field { display: flex; flex-direction: column; gap: 6px; } .contact-field.full { grid-column: 1 / -1; } .contact-field label { font-size: 12px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; } .contact-field input, .contact-field textarea { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; background: var(--surface); color: var(--ink); transition: all 0.15s; } .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .contact-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; font-family: inherit; } /* Industry select */ select.input-text { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; } /* ===== RESULT PAGE ===== */ .result-page { padding: 48px 32px 80px; max-width: 1100px; margin: 0 auto; display: none; } .result-page.active { display: block; } .result-head { text-align: center; margin-bottom: 40px; } .result-head .eyebrow { background: var(--accent-light); border-color: var(--accent-light); color: var(--accent); } .result-head .eyebrow .live { background: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18); } .result-head h2 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 14px; } .result-head p { font-size: 16px; color: var(--ink-muted); max-width: 600px; margin: 0 auto; line-height: 1.55; } .preview-frame { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: white; margin-bottom: 24px; box-shadow: var(--shadow-md); transition: box-shadow 0.4s; } .preview-frame.flash { animation: flashUpdate 1.2s ease; } @keyframes flashUpdate { 0% { box-shadow: var(--shadow-md); } 25% { box-shadow: 0 0 0 4px var(--accent), var(--shadow-md); } 100% { box-shadow: var(--shadow-md); } } .browser-bar { background: #1A1A22; color: #ddd; padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .browser-dots { display: flex; gap: 6px; } .browser-dots span { width: 11px; height: 11px; border-radius: 50%; } .browser-dots span:nth-child(1) { background: #FF5F56; } .browser-dots span:nth-child(2) { background: #FFBD2E; } .browser-dots span:nth-child(3) { background: #27C93F; } .browser-url { flex: 1; background: rgba(255,255,255,0.08); padding: 5px 10px; border-radius: 6px; opacity: 0.85; } .preview-tabs { display: flex; background: #14141A; border-top: 1px solid rgba(255,255,255,0.08); overflow-x: auto; } .preview-tab { padding: 10px 18px; color: rgba(255,255,255,0.6); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; border-right: 1px solid rgba(255,255,255,0.08); transition: all 0.15s; background: transparent; border-top: 0; border-bottom: 0; border-left: 0; white-space: nowrap; } .preview-tab.active { color: #fff; background: rgba(255,255,255,0.06); } .preview-tab:hover { color: #fff; } .preview-content { min-height: 600px; background: white; /* Casual scrape friction — text selection + right-click disabled on the preview. This doesn't stop a determined attacker (they can still inspect dev tools) but it prevents the easy paths: select-all-copy, right-click-save, etc. */ user-select: none; -webkit-user-select: none; -moz-user-select: none; -webkit-touch-callout: none; } .preview-content * { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } /* ===== TWEAK PANEL ===== */ .tweak-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-sm); } .tweak-panel h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; } .tweak-panel .tweak-sub { font-size: 14px; color: var(--ink-muted); margin-bottom: 16px; line-height: 1.55; } .tweak-textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 15px; line-height: 1.55; min-height: 110px; background: var(--surface); color: var(--ink); resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; } .tweak-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .tweak-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 12px; flex-wrap: wrap; } .tweak-counter { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-subtle); } .tweak-counter.over { color: var(--warn); } .btn-apply { background: var(--grad); color: #fff; border: 0; padding: 10px 20px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm), 0 4px 12px rgba(37,99,235,0.18); transition: transform 0.15s, box-shadow 0.15s; } .btn-apply:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), 0 6px 18px rgba(37,99,235,0.28); } .tweak-feedback { margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; display: none; align-items: center; gap: 10px; } .tweak-feedback.success { display: flex; background: rgba(22, 163, 74, 0.10); color: var(--success); border: 1px solid rgba(22, 163, 74, 0.20); } .tweak-feedback.warn { display: flex; background: rgba(220, 38, 38, 0.08); color: var(--warn); border: 1px solid rgba(220, 38, 38, 0.20); } .applied-tweaks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .tweak-chip { background: var(--accent-light); color: var(--accent); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; } .tweak-examples { font-size: 12px; color: var(--ink-subtle); line-height: 1.9; margin-top: 10px; font-family: 'JetBrains Mono', monospace; } .tweak-examples code { background: var(--bg-soft); color: var(--ink); padding: 3px 8px; border-radius: 5px; cursor: pointer; transition: all 0.12s; border: 1px solid var(--border); } .tweak-examples code:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); } /* ===== PAGE BUILDER PANEL ===== */ .pages-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-sm); } .pages-panel h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; } .pages-panel .panel-sub { font-size: 14px; color: var(--ink-muted); margin-bottom: 16px; line-height: 1.55; } .pages-help { font-size: 12px; color: var(--ink-subtle); line-height: 1.65; margin-top: 14px; padding: 12px 14px; background: var(--bg-soft); border-radius: 8px; font-family: 'JetBrains Mono', monospace; } .pages-help code { background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); } .pages-help strong { color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 700; } .page-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; background: var(--surface-alt); margin-bottom: 12px; } .page-card-header { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; } .page-card .page-name { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 15px; font-weight: 600; background: var(--surface); } .page-card .page-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .page-card .page-slug-display { font-size: 11px; color: var(--ink-subtle); font-family: 'JetBrains Mono', monospace; margin-top: 5px; } .page-card .page-slug-display code { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; } .page-card .remove-page { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: 700; font-size: 16px; flex-shrink: 0; } .page-card .remove-page:hover { color: var(--warn); border-color: var(--warn); } .page-card .page-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .page-card .page-fields input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: var(--surface); } .page-card .page-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .blocks-list { display: flex; flex-direction: column; gap: 10px; } .block-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--surface); } .block-card .block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .block-card .block-type { font-size: 11px; font-weight: 700; color: var(--accent); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; } .block-card .remove-block { background: transparent; color: var(--ink-muted); border: 0; cursor: pointer; font-weight: 700; font-size: 18px; line-height: 1; padding: 4px 8px; } .block-card .remove-block:hover { color: var(--warn); } .block-card input, .block-card textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface); margin-bottom: 8px; } .block-card input:focus, .block-card textarea:focus { outline: none; border-color: var(--accent); } .block-card textarea { min-height: 80px; resize: vertical; line-height: 1.5; font-family: inherit; } .block-items { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; margin-bottom: 4px; } .block-item-row { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 6px; align-items: center; } .block-item-row input { margin-bottom: 0; padding: 8px 10px; font-size: 12px; } .block-item-row .remove-item { background: transparent; border: 0; color: var(--ink-muted); cursor: pointer; font-size: 16px; padding: 4px; } .block-item-row .remove-item:hover { color: var(--warn); } .btn-add-item { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 6px; padding: 8px; font-size: 12px; cursor: pointer; color: var(--ink-muted); font-family: inherit; width: 100%; margin-top: 4px; } .btn-add-item:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .block-picker { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface); } .block-picker .picker-label { font-size: 11px; color: var(--ink-subtle); font-family: 'JetBrains Mono', monospace; margin-right: 4px; } .block-picker button { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--ink); transition: all 0.15s; } .block-picker button:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); } .btn-add-page { background: var(--surface); border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px; width: 100%; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--ink-muted); margin-top: 8px; } .btn-add-page:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .pages-pricing-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--accent-light); border: 1px solid var(--accent); border-radius: 10px; margin-bottom: 14px; font-size: 13px; color: var(--accent); font-weight: 600; } .pages-pricing-banner strong { font-weight: 800; } .pages-pricing-banner .badge { background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; flex-shrink: 0; } .page-price-badge { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--accent-light); color: var(--accent); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; } /* ===== CHECKOUT BREAKDOWN ===== */ .checkout-breakdown { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.18); font-size: 13px; } .checkout-breakdown-row { display: flex; justify-content: space-between; align-items: baseline; color: rgba(255, 255, 255, 0.7); } .checkout-breakdown-row .label { font-family: 'JetBrains Mono', monospace; font-size: 12px; } .checkout-breakdown-row .value { font-weight: 600; } .checkout-breakdown-row.total { color: #fff; font-weight: 700; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 4px; } .checkout-breakdown-row.total .label { color: rgba(255, 255, 255, 0.85); font-size: 13px; font-family: inherit; } /* ===== CODE PANEL ===== */ .code-panel { background: #0F0F14; color: #E4E4EB; border-radius: var(--r-lg); padding: 28px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } .code-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 14px; flex-wrap: wrap; } .code-panel h3 { color: #fff; font-size: 22px; font-weight: 800; } .code-panel h3 .accent { background: linear-gradient(135deg, #60A5FA 0%, #67E8F9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .code-panel-desc { color: rgba(228,228,235,0.7); font-size: 14px; margin-bottom: 18px; line-height: 1.55; } .code-status { background: rgba(255, 255, 255, 0.08); color: #fff; padding: 5px 12px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; } .code-status.unlocked { background: rgba(22, 163, 74, 0.20); color: #4ADE80; } .code-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; } .code-tab { background: rgba(255,255,255,0.06); color: rgba(228,228,235,0.7); padding: 7px 14px; border: 0; border-radius: 7px 7px 0 0; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; transition: all 0.15s; } .code-tab.active { background: rgba(255,255,255,0.12); color: #fff; } .code-tab:hover { color: #fff; } .code-block-wrap { position: relative; } .code-block { background: #06060A; color: #C9D3FF; padding: 20px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.5; max-height: 380px; overflow: auto; white-space: pre; tab-size: 2; border: 1px solid rgba(255,255,255,0.06); } .code-locked .code-block { filter: blur(7px); user-select: none; pointer-events: none; } .code-lock-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(15, 15, 20, 0.85); border-radius: 10px; padding: 24px; text-align: center; backdrop-filter: blur(2px); } .code-locked .code-lock-overlay { display: flex; } .code-lock-overlay .lock-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.9; } .code-lock-overlay h4 { color: #fff; font-size: 22px; margin-bottom: 8px; font-weight: 800; } .code-lock-overlay p { color: rgba(228,228,235,0.7); font-size: 13px; margin: 0; max-width: 320px; line-height: 1.5; } .code-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .code-btn { background: rgba(255,255,255,0.08); color: rgba(228,228,235,0.85); border: 1px solid rgba(255,255,255,0.12); padding: 9px 16px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; } .code-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); color: #fff; } .code-btn:disabled { opacity: 0.35; cursor: not-allowed; } .code-btn.primary { background: var(--grad); border-color: transparent; color: #fff; } .code-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); } .code-meta { margin-top: 12px; font-size: 11px; color: rgba(228,228,235,0.5); font-family: 'JetBrains Mono', monospace; } /* ===== CHECKOUT ===== */ .checkout-card { background: var(--ink); color: #fff; padding: 40px; border-radius: var(--r-lg); display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } .checkout-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 100% 100%, rgba(6, 182, 212, 0.28) 0%, transparent 60%); pointer-events: none; } .checkout-card > * { position: relative; } @media (max-width: 800px) { .checkout-card { grid-template-columns: 1fr; padding: 32px; } } .checkout-card h3 { color: #fff; font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 12px; } .checkout-card .demo-tag { display: inline-block; background: rgba(255,255,255,0.10); color: #fff; padding: 4px 10px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; margin-bottom: 12px; } .checkout-card p { color: rgba(255,255,255,0.7); line-height: 1.55; margin-bottom: 16px; font-size: 15px; } .checkout-card ul { list-style: none; margin: 16px 0; } .checkout-card li { padding: 7px 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.85); } .checkout-card li::before { content: "✓"; color: #4ADE80; font-weight: 700; flex-shrink: 0; } .checkout-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.15); margin-top: 12px; } .checkout-total .label { font-size: 14px; color: rgba(255,255,255,0.7); } .checkout-total .amount { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; color: #fff; } .checkout-pay { background: var(--grad); color: #fff; border: 0; padding: 16px; border-radius: 10px; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 16px rgba(37,99,235,0.40); } .checkout-pay:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.50); } .checkout-pay:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .checkout-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.5); text-align: center; margin-top: 10px; } /* ===== MODAL ===== */ .modal-back { position: fixed; inset: 0; background: rgba(15, 16, 20, 0.7); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; backdrop-filter: blur(4px); } .modal-back.open { display: flex; animation: fade 0.25s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); text-align: center; } .modal h3 { font-size: 28px; margin-bottom: 12px; font-weight: 800; } .modal p { margin-bottom: 12px; line-height: 1.55; color: var(--ink-muted); } .modal .checkmark { width: 56px; height: 56px; margin: 0 auto 16px; background: var(--grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; box-shadow: var(--shadow-glow); animation: checkPop 0.5s ease; } @keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } /* ============================================================ * GENERATED SITE STYLES (preview + downloaded HTML use the same) * 5 vibes: clean, bold, elegant, friendly, modern * Brand colors override via injected