.vb-start-page{ --vg-bg:#f6f5f2; --vg-surface:#ffffff; --vg-surface-2:#faf9f7; --vg-surface-3:#f0eeeb; --vg-text:#1a1a1a; --vg-text-2:#444444; --vg-text-3:#777777; --vg-border:rgba(0,0,0,.07); --vg-border-2:rgba(0,0,0,.12); --vg-primary:#7c3aed; --vg-primary-soft:rgba(124,58,237,.08); --vg-primary-mid:rgba(124,58,237,.15); --vg-green:#059669; --vg-green-soft:rgba(5,150,105,.08); --vg-green-mid:rgba(5,150,105,.14); --vg-amber:#d97706; --vg-amber-soft:rgba(217,119,6,.08); --vg-amber-mid:rgba(217,119,6,.14); --vg-purple:#7c3aed; --vg-purple-soft:rgba(124,58,237,.08); --vg-purple-mid:rgba(124,58,237,.14); --vg-danger:#dc2626; --vg-cyan:#0284c7; --vg-cyan-soft:rgba(2,132,199,.08); --vg-cyan-mid:rgba(2,132,199,.14); --vg-shadow:0 1px 3px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.045); --vg-radius:16px; --vg-radius-lg:22px; } html.dark .vb-start-page, body.dark .vb-start-page, body.dark-theme .vb-start-page, .dark-theme .vb-start-page{ --vg-bg:#0c0e14; --vg-surface:#161a26; --vg-surface-2:#1c2030; --vg-surface-3:#242838; --vg-text:#f1f3f9; --vg-text-2:#cdd4e4; --vg-text-3:#9aa3bb; --vg-border:rgba(255,255,255,.07); --vg-border-2:rgba(255,255,255,.12); --vg-primary:#a78bfa; --vg-primary-soft:rgba(167,139,250,.10); --vg-primary-mid:rgba(167,139,250,.18); --vg-green:#34d399; --vg-green-soft:rgba(52,211,153,.10); --vg-green-mid:rgba(52,211,153,.18); --vg-amber:#fbbf24; --vg-amber-soft:rgba(251,191,36,.10); --vg-amber-mid:rgba(251,191,36,.18); --vg-purple:#a78bfa; --vg-purple-soft:rgba(167,139,250,.10); --vg-purple-mid:rgba(167,139,250,.18); --vg-danger:#f87171; --vg-cyan:#38bdf8; --vg-cyan-soft:rgba(56,189,248,.10); --vg-cyan-mid:rgba(56,189,248,.18); --vg-shadow:0 2px 6px rgba(0,0,0,.2), 0 8px 30px rgba(0,0,0,.25); } .vb-start-page *, .vb-start-page *::before, .vb-start-page *::after{ box-sizing:border-box; } .vb-start-page{ max-width:820px; margin:0 auto; padding:28px 16px 60px; color:var(--vg-text); } .vb-start-welcome{ display:flex; align-items:flex-start; gap:12px; margin-bottom:24px; padding:16px 20px; border-radius:var(--vg-radius); background:var(--vg-primary-soft); border:1px solid var(--vg-primary-mid); } .vb-start-welcome-dot{ flex-shrink:0; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--vg-primary); } .vb-start-welcome p{ margin:0; font-size:14px; line-height:1.75; color:var(--vg-text-2); } .vb-start-welcome strong{ color:var(--vg-text); } .vb-start-hero{ text-align:center; padding:52px 24px 44px; margin-bottom:28px; border-radius:var(--vg-radius-lg); background: radial-gradient(ellipse at 30% 0%, var(--vg-primary-soft) 0%, transparent 50%), radial-gradient(ellipse at 70% 100%, var(--vg-green-soft) 0%, transparent 50%), var(--vg-surface); border:1px solid var(--vg-border); box-shadow:var(--vg-shadow); } .vb-start-eyebrow{ display:inline-block; margin-bottom:18px; padding:5px 14px; border-radius:999px; background:var(--vg-primary-soft); border:1px solid var(--vg-primary-mid); color:var(--vg-primary); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .vb-start-hero h1{ margin:0 0 16px; font-size:42px; font-weight:900; line-height:1.15; letter-spacing:-.03em; color:var(--vg-text); } .vb-start-hero-desc{ margin:0; font-size:15px; line-height:2; color:var(--vg-text-2); } .vb-start-hl{ color:var(--vg-primary); font-weight:700; } .vb-start-steps, .vb-start-points, .vb-start-purpose, .vb-start-unzip, .vb-start-rules, .vb-start-forum, .vb-start-build, .vb-start-notice-rules, .vb-start-faq, .vb-start-cta{ margin-bottom:28px; padding:28px 24px; border-radius:var(--vg-radius-lg); background:var(--vg-surface); border:1px solid var(--vg-border); box-shadow:var(--vg-shadow); } .vb-start-page h2{ margin:0 0 10px; font-size:22px; font-weight:900; line-height:1.3; letter-spacing:-.02em; color:var(--vg-text); } .vb-start-page section > p{ margin:0 0 20px; font-size:15px; line-height:1.85; color:var(--vg-text-2); } .vb-start-steps-track{ display:flex; align-items:flex-start; gap:0; } .vb-start-step{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 10px; } .vb-start-step-icon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; margin-bottom:14px; background:var(--vg-primary-soft); border:1px solid var(--vg-primary-mid); color:var(--vg-primary); transition:transform .2s ease, box-shadow .2s ease; } .vb-start-step:hover .vb-start-step-icon{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(124,58,237,.12); } .vb-start-step-body strong{ display:block; margin-bottom:6px; font-size:15px; font-weight:800; color:var(--vg-text); } .vb-start-step-body p{ margin:0; font-size:13px; line-height:1.7; color:var(--vg-text-3); } .vb-start-step-line{ flex-shrink:0; width:40px; height:2px; margin-top:28px; background:var(--vg-border-2); border-radius:1px; } .vb-start-points-cap{ display:inline-block; margin:0 0 20px !important; padding:8px 16px; border-radius:10px; background:var(--vg-amber-soft); border:1px solid rgba(217,119,6,.18); font-size:13px !important; line-height:1.6 !important; color:var(--vg-amber) !important; } .vb-start-points-cap strong{ font-weight:900; font-size:16px; } .vb-start-points-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; } .vb-start-pt-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:var(--vg-surface-2); border:1px solid var(--vg-border); transition:transform .18s ease, box-shadow .18s ease; } .vb-start-pt-row:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); } html.dark .vb-start-pt-row:hover, body.dark .vb-start-pt-row:hover, body.dark-theme .vb-start-pt-row:hover, .dark-theme .vb-start-pt-row:hover{ box-shadow:0 6px 18px rgba(0,0,0,.25); } .vb-start-pt-row-badge{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:30px; border-radius:999px; font-size:15px; font-weight:900; } .vb-start-pt-row-badge--green{ color:var(--vg-green); background:var(--vg-green-soft); border:1px solid var(--vg-green-mid); } .vb-start-pt-row-badge--amber{ color:var(--vg-amber); background:var(--vg-amber-soft); border:1px solid var(--vg-amber-mid); } .vb-start-pt-row-badge--purple{ color:var(--vg-purple); background:var(--vg-purple-soft); border:1px solid var(--vg-purple-mid); } .vb-start-pt-row-badge--cyan{ color:var(--vg-cyan); background:var(--vg-cyan-soft); border:1px solid var(--vg-cyan-mid); } .vb-start-pt-row-body strong{ display:block; font-size:14px; font-weight:800; color:var(--vg-text); margin-bottom:2px; } .vb-start-pt-row-body p{ margin:0; font-size:12px; line-height:1.6; color:var(--vg-text-3); } .vb-start-purpose{ background: radial-gradient(ellipse at 0% 100%, var(--vg-cyan-soft) 0%, transparent 50%), var(--vg-surface); } .vb-start-purpose-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; } .vb-start-purpose-item{ display:flex; align-items:flex-start; gap:12px; padding:16px; border-radius:var(--vg-radius); background:var(--vg-surface-2); border:1px solid var(--vg-border); } .vb-start-purpose-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--vg-primary-soft); border:1px solid var(--vg-primary-mid); color:var(--vg-primary); } .vb-start-purpose-item strong{ display:block; margin-bottom:4px; font-size:14px; font-weight:800; color:var(--vg-text); } .vb-start-purpose-item p{ margin:0; font-size:12px; line-height:1.7; color:var(--vg-text-3); } .vb-start-unzip{ background: radial-gradient(ellipse at 0% 0%, var(--vg-amber-soft) 0%, transparent 50%), var(--vg-surface); } .vb-start-unzip-inner{ display:flex; align-items:flex-start; gap:18px; } .vb-start-unzip-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--vg-amber-soft); border:1px solid var(--vg-amber-mid); color:var(--vg-amber); } .vb-start-unzip-body h2{ margin:0 0 8px; } .vb-start-unzip-body p{ margin:0 0 14px; font-size:14px; line-height:1.85; color:var(--vg-text-2); } .vb-start-unzip-link{ display:inline-flex; align-items:center; padding:8px 20px; border-radius:999px; background:var(--vg-amber-soft); border:1px solid var(--vg-amber-mid); color:var(--vg-amber) !important; font-size:14px; font-weight:700; text-decoration:none !important; transition:background .18s ease; } .vb-start-unzip-link:hover{ background:var(--vg-amber-mid); color:var(--vg-amber) !important; } .vb-start-rules-intro{ margin:0 0 18px !important; } .vb-start-rules-good{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; } .vb-start-rule-item{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; background:var(--vg-surface-2); border:1px solid var(--vg-border); font-size:14px; line-height:1.6; color:var(--vg-text-2); } .vb-start-rule-tag{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:8px; font-size:13px; font-weight:700; } .vb-start-rule-tag--pass{ color:var(--vg-green); background:var(--vg-green-soft); } .vb-start-rules-warn{ border-radius:12px; border:1px solid rgba(217,119,6,.18); background:var(--vg-amber-soft); padding:16px 18px; } .vb-start-rules-warn-title{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; font-weight:700; color:var(--vg-amber); } .vb-start-warn-icon{ font-size:16px; line-height:1; } .vb-start-rules-warn p{ margin:0; font-size:13px; line-height:1.8; color:var(--vg-text-2); } .vb-start-forum{ background: radial-gradient(ellipse at 100% 0%, var(--vg-green-soft) 0%, transparent 50%), var(--vg-surface); } .vb-start-forum-intro{ margin:0 0 18px !important; } .vb-start-forum-examples{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:20px; } .vb-start-forum-ex{ padding:16px; border-radius:var(--vg-radius); background:var(--vg-surface-2); border:1px solid var(--vg-border); } .vb-start-forum-label{ display:inline-block; margin-bottom:10px; padding:3px 10px; border-radius:6px; background:var(--vg-green-soft); border:1px solid var(--vg-green-mid); color:var(--vg-green); font-size:11px; font-weight:700; } .vb-start-forum-ex p{ margin:0; font-size:13px; line-height:1.75; color:var(--vg-text-3); } .vb-start-forum-cta{ text-align:center; } .vb-start-forum-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 24px; border-radius:999px; background:var(--vg-green); color:#fff !important; font-size:14px; font-weight:700; text-decoration:none !important; transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 4px 16px rgba(5,150,105,.2); } .vb-start-forum-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(5,150,105,.28); color:#fff !important; } html.dark .vb-start-forum-btn, body.dark .vb-start-forum-btn, body.dark-theme .vb-start-forum-btn, .dark-theme .vb-start-forum-btn{ background:var(--vg-green); box-shadow:0 4px 16px rgba(52,211,153,.18); } html.dark .vb-start-forum-btn:hover, body.dark .vb-start-forum-btn:hover, body.dark-theme .vb-start-forum-btn:hover, .dark-theme .vb-start-forum-btn:hover{ box-shadow:0 8px 28px rgba(52,211,153,.26); } .vb-start-build-perks{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; } .vb-start-perk{ display:flex; align-items:flex-start; gap:14px; padding:18px; border-radius:var(--vg-radius); border:1px solid var(--vg-border); border-left:3px solid transparent; } .vb-start-perk-emoji{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; font-size:20px; line-height:1; } .vb-start-perk strong{ display:block; margin-bottom:4px; font-size:15px; font-weight:800; color:var(--vg-text); } .vb-start-perk p{ margin:0; font-size:13px; line-height:1.7; color:var(--vg-text-3); } .vb-start-perk--amber{ border-left-color:var(--vg-amber); background:var(--vg-amber-soft); } .vb-start-perk--amber .vb-start-perk-emoji{ background:var(--vg-amber-mid); } .vb-start-perk--green{ border-left-color:var(--vg-green); background:var(--vg-green-soft); } .vb-start-perk--green .vb-start-perk-emoji{ background:var(--vg-green-mid); } .vb-start-perk--purple{ border-left-color:var(--vg-purple); background:var(--vg-purple-soft); } .vb-start-perk--purple .vb-start-perk-emoji{ background:var(--vg-purple-mid); } .vb-start-perk--cyan{ border-left-color:var(--vg-cyan); background:var(--vg-cyan-soft); } .vb-start-perk--cyan .vb-start-perk-emoji{ background:var(--vg-cyan-mid); } .vb-start-notice-rules{ background: radial-gradient(ellipse at 100% 0%, var(--vg-amber-soft) 0%, transparent 50%), var(--vg-surface); } .vb-start-notice-rules p{ font-size:14px !important; line-height:1.85; color:var(--vg-text-2); } .vb-start-notice-rules p:last-child{ margin-bottom:0 !important; } .vb-start-faq-item{ border-radius:12px; border:1px solid var(--vg-border); background:var(--vg-surface-2); overflow:hidden; } .vb-start-faq-item + .vb-start-faq-item{ margin-top:10px; } .vb-start-faq-item summary{ cursor:pointer; padding:15px 18px; font-size:15px; font-weight:700; color:var(--vg-text); list-style:none; } .vb-start-faq-item summary::-webkit-details-marker{display:none;} .vb-start-faq-item summary::before{ content:"＋"; display:inline-block; margin-right:10px; font-weight:400; color:var(--vg-text-3); transition:transform .15s ease; } .vb-start-faq-item[open] summary::before{ content:"－"; } .vb-start-faq-body{ padding:0 18px 16px; } .vb-start-faq-body p{ margin:0; font-size:14px; line-height:1.8; color:var(--vg-text-2); } .vb-start-cta{ text-align:center; background: radial-gradient(ellipse at 50% 0%, var(--vg-primary-soft) 0%, transparent 50%), var(--vg-surface); } .vb-start-cta p{ color:var(--vg-text-3) !important; } .vb-start-cta-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; } .vb-start-cta-primary{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 28px; border-radius:999px; background:var(--vg-primary); color:#fff !important; font-size:15px; font-weight:700; text-decoration:none !important; transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 4px 16px rgba(124,58,237,.25); } .vb-start-cta-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,58,237,.32); color:#fff !important; } .vb-start-cta-secondary{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 28px; border-radius:999px; background:var(--vg-green); color:#fff !important; font-size:15px; font-weight:700; text-decoration:none !important; transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 4px 16px rgba(5,150,105,.2); } .vb-start-cta-secondary:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(5,150,105,.28); color:#fff !important; } html.dark .vb-start-cta-primary, body.dark .vb-start-cta-primary, body.dark-theme .vb-start-cta-primary, .dark-theme .vb-start-cta-primary{ box-shadow:0 4px 16px rgba(167,139,250,.2); } html.dark .vb-start-cta-primary:hover, body.dark .vb-start-cta-primary:hover, body.dark-theme .vb-start-cta-primary:hover, .dark-theme .vb-start-cta-primary:hover{ box-shadow:0 8px 28px rgba(167,139,250,.3); } html.dark .vb-start-cta-secondary, body.dark .vb-start-cta-secondary, body.dark-theme .vb-start-cta-secondary, .dark-theme .vb-start-cta-secondary{ box-shadow:0 4px 16px rgba(52,211,153,.18); } html.dark .vb-start-cta-secondary:hover, body.dark .vb-start-cta-secondary:hover, body.dark-theme .vb-start-cta-secondary:hover, .dark-theme .vb-start-cta-secondary:hover{ box-shadow:0 8px 28px rgba(52,211,153,.26); } @media (max-width:768px){ .vb-start-page{ padding:20px 14px 48px; } .vb-start-hero{ padding:36px 20px 32px; border-radius:18px; } .vb-start-hero h1{ font-size:30px; } .vb-start-hero-desc{ font-size:14px; } .vb-start-steps, .vb-start-points, .vb-start-purpose, .vb-start-unzip, .vb-start-rules, .vb-start-forum, .vb-start-build, .vb-start-notice-rules, .vb-start-faq, .vb-start-cta{ padding:22px 18px; border-radius:18px; } .vb-start-steps-track{ flex-direction:column; align-items:stretch; gap:0; } .vb-start-step{ flex-direction:row; text-align:left; padding:0; gap:14px; } .vb-start-step-icon{ width:46px; height:46px; min-width:46px; border-radius:13px; margin-bottom:0; } .vb-start-step-line{ width:2px; height:20px; margin:0 0 0 22px; } .vb-start-points-list{ grid-template-columns:1fr; } .vb-start-purpose-grid{ grid-template-columns:1fr; } .vb-start-forum-examples{ grid-template-columns:1fr; } .vb-start-build-perks{ grid-template-columns:1fr; } .vb-start-welcome{ flex-direction:column; align-items:flex-start; } .vb-start-cta-primary, .vb-start-cta-secondary{ width:100%; } .vb-start-page h2{ font-size:20px; } } @media (prefers-reduced-motion:reduce){ .vb-start-pt-row:hover, .vb-start-step:hover .vb-start-step-icon, .vb-start-cta-primary:hover, .vb-start-cta-secondary:hover, .vb-start-forum-btn:hover{ transform:none; } }