/* Selfmade Ninja — Lead Program Funnel * Full-fidelity styles (Phase 1). Faithful to the prototype design tokens. * Single orange accent. Roboto (display) + Ubuntu (body). * * Theming: all surface/text/border colors are CSS variables. Dark is the * default (:root); light theme is applied via [data-theme="light"] on . * The accent stays the same in both themes. */ :root { --lf-accent: #F47923; --lf-accent-grad-end: #FF9152; /* dark theme (default) */ --lf-page: #0c0c0c; --lf-frame: #141414; --lf-frame-ring: rgba(255,255,255,0.04); --lf-surface: #161616; --lf-surface2: #191919; --lf-input: #1d1d1d; --lf-tile: #2F2F2F; --lf-menu-bg: #1b1b1b; --lf-nav-bg: rgba(18,18,18,0.82); --lf-border: rgba(255,255,255,0.08); --lf-border-strong: rgba(255,255,255,0.12); --lf-border-soft: rgba(255,255,255,0.07); --lf-border-opt: rgba(255,255,255,0.09); --lf-mark-border: rgba(255,255,255,0.18); --lf-ghost-border: rgba(255,255,255,0.16); --lf-hover: rgba(255,255,255,0.05); --lf-text: #F8F8F8; --lf-text-2: #BCBCBC; --lf-text-3: #B3B3B2; --lf-text-muted: #A0A0A0; --lf-text-faint: #6b6b6b; --lf-badge-text: #BCBCBC; --lf-placeholder: #6b6b6b; --lf-card-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 70px rgba(0,0,0,0.55); } [data-theme="light"] { --lf-page: #ededee; --lf-frame: #ffffff; --lf-frame-ring: rgba(0,0,0,0.06); --lf-surface: #ffffff; --lf-surface2: #f6f6f7; --lf-input: #f1f1f3; --lf-tile: #e8e8eb; --lf-menu-bg: #ffffff; --lf-nav-bg: rgba(255,255,255,0.82); --lf-border: rgba(0,0,0,0.10); --lf-border-strong: rgba(0,0,0,0.14); --lf-border-soft: rgba(0,0,0,0.08); --lf-border-opt: rgba(0,0,0,0.10); --lf-mark-border: rgba(0,0,0,0.20); --lf-ghost-border: rgba(0,0,0,0.16); --lf-hover: rgba(0,0,0,0.05); --lf-text: #16181d; --lf-text-2: #3a3d44; --lf-text-3: #4a4d54; --lf-text-muted: #6a6d75; --lf-text-faint: #9a9da5; --lf-badge-text: #6a6d75; --lf-placeholder: #a8abb2; --lf-card-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 50px rgba(0,0,0,0.10); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--lf-page); font-family: Ubuntu, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } ::selection { background: var(--lf-accent); color: #fff; } input::placeholder { color: var(--lf-placeholder); } @keyframes smnGlow { 0%, 100% { opacity: .5; } 50% { opacity: .85; } } @keyframes smnUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes smnPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } } /* ---------- page + frame ---------- */ .lf-page { min-height: 100vh; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(244,121,35,0.06), transparent 70%), var(--lf-page); display: flex; flex-direction: column; align-items: center; } .lf-frame { width: 100%; margin: 0; background: var(--lf-frame); position: relative; min-height: 100vh; box-shadow: 0 0 0 1px var(--lf-frame-ring); } /* ---------- nav ---------- */ .lf-nav { position: sticky; top: 0; z-index: 50; height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 80px; background: var(--lf-nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--lf-border-soft); } .lf-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; background: none; border: none; padding: 0; } .lf-logo-img { height: 34px; width: auto; display: block; } .lf-logo-text { font: 700 21px/1 Roboto, sans-serif; color: var(--lf-text); letter-spacing: -0.4px; } .lf-logo-text span { color: var(--lf-accent); } .lf-nav-right { display: flex; align-items: center; gap: 4px; } .lf-theme-btn { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: none; cursor: pointer; border-radius: 12px; color: var(--lf-text-muted); transition: background 150ms ease, color 150ms ease; } .lf-theme-btn:hover { background: var(--lf-hover); color: var(--lf-accent); } .lf-theme-btn svg { width: 21px; height: 21px; display: block; } .lf-menu-wrap { position: relative; } .lf-menu-btn { display: flex; flex-direction: column; gap: 5px; width: 46px; height: 46px; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; border-radius: 12px; transition: background 150ms ease; } .lf-menu-btn:hover { background: var(--lf-hover); } .lf-menu-bar { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--lf-accent); } .lf-menu-dropdown { position: absolute; top: 56px; right: 0; width: 300px; background: var(--lf-menu-bg); border: 1px solid var(--lf-border-strong); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.30); padding: 14px; z-index: 90; animation: smnUp .18s ease both; } .lf-menu-link { display: flex; align-items: center; justify-content: space-between; text-decoration: none; padding: 12px 14px; border-radius: 10px; color: var(--lf-text); font: 500 15px/1.3 Ubuntu; transition: all 150ms ease; } .lf-menu-link:hover { background: rgba(244,121,35,0.1); color: var(--lf-accent); } .lf-menu-link span { color: var(--lf-accent); } .lf-menu-divider { height: 1px; background: var(--lf-border); margin: 10px 6px; } .lf-menu-copy { padding: 4px 14px 6px; font: 400 12px/1.55 Ubuntu; color: var(--lf-text-faint); } /* ---------- landing ---------- */ .lf-landing { padding: 80px; min-height: calc(100vh - 78px); display: flex; align-items: center; justify-content: center; position: relative; } .lf-landing-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); width: 440px; height: 300px; background: radial-gradient(ellipse, rgba(244,121,35,0.20) 0%, transparent 70%); animation: smnGlow 5s ease-in-out infinite; pointer-events: none; } .lf-card { position: relative; z-index: 1; width: 100%; max-width: 480px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 24px; padding: 40px; box-shadow: var(--lf-card-shadow); } .lf-icon-tile { width: 54px; height: 54px; border-radius: 15px; background: var(--lf-tile); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .lf-icon-img { width: 28px; height: 28px; object-fit: contain; display: block; } .lf-card-title { font: 700 28px/1.15 Roboto, sans-serif; color: var(--lf-text); letter-spacing: -0.4px; margin: 0 0 12px; } .lf-card-desc { font: 300 16px/1.6 Ubuntu; color: var(--lf-text-muted); margin: 0 0 28px; } /* ---------- buttons ---------- */ .lf-btn-primary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px; border: none; border-radius: 999px; background: var(--lf-accent); color: #fff; font: 500 16px/1 Ubuntu, sans-serif; cursor: pointer; box-shadow: 0 10px 26px rgba(244,121,35,0.4); transition: filter 150ms ease; } .lf-btn-primary:hover { filter: brightness(1.08); } .lf-btn-primary .lf-arrow { font-size: 17px; } .lf-btn-ghost { width: 100%; padding: 15px; border: 1px solid var(--lf-ghost-border); border-radius: 999px; background: transparent; color: var(--lf-text); font: 500 15px/1 Ubuntu; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: border-color 150ms ease; } .lf-btn-ghost:hover { border-color: rgba(244,121,35,0.5); } /* ---------- quiz ---------- */ .lf-quiz { padding: 72px 80px 96px; max-width: 760px; margin: 0 auto; min-height: 70vh; } .lf-quiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .lf-back { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--lf-text-muted); font: 400 14px/1 Ubuntu; cursor: pointer; padding: 0; transition: color 150ms ease; } .lf-back:hover { color: var(--lf-text); } .lf-prog-name { font: 500 13px/1 Ubuntu; color: var(--lf-accent); } .lf-prog-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .lf-prog-label { font: 500 13px/1 Ubuntu; color: var(--lf-text-muted); } .lf-prog-pct { font: 700 13px/1 Roboto; color: var(--lf-text-muted); } .lf-bar { height: 6px; border-radius: 99px; background: var(--lf-tile); overflow: hidden; margin-bottom: 36px; } .lf-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lf-accent), var(--lf-accent-grad-end)); transition: width 350ms ease; } .lf-q-title { font: 700 35px/1.2 Roboto, sans-serif; color: var(--lf-text); letter-spacing: -0.4px; margin: 0 0 8px; text-wrap: balance; animation: smnUp .35s ease both; } /* Sub-line rendered as an on-brand note callout — it carries important context (e.g. "delivered in Tamil") so it should read as a highlight, not throwaway text. */ .lf-q-note { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 30px; padding: 11px 16px 11px 14px; border-radius: 12px; background: rgba(244,121,35,0.10); border: 1px solid rgba(244,121,35,0.28); color: var(--lf-text-2); font: 400 14.5px/1.45 Ubuntu; } .lf-q-note svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--lf-accent); } .lf-q-note span { padding-top: 1px; } [data-theme="light"] .lf-q-note { color: #8a4d12; } .lf-options { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .lf-option { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 18px 22px; border-radius: 16px; background: var(--lf-surface2); border: 1.5px solid var(--lf-border-opt); color: var(--lf-text); font: 400 17px/1.35 Ubuntu, sans-serif; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; } .lf-option:hover { border-color: rgba(244,121,35,0.5); } .lf-option.selected { border-color: var(--lf-accent); background: rgba(244,121,35,0.10); box-shadow: 0 8px 26px rgba(244,121,35,0.16); } .lf-badge { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 13px/1 Roboto, sans-serif; background: var(--lf-tile); color: var(--lf-badge-text); transition: all 150ms ease; } .lf-option.selected .lf-badge { background: var(--lf-accent); color: #fff; } .lf-opt-label { flex: 1; } .lf-mark { margin-left: auto; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 13px/1 Roboto; background: transparent; color: #fff; border: 1.5px solid var(--lf-mark-border); transition: all 150ms ease; } .lf-option.selected .lf-mark { background: var(--lf-accent); border-color: var(--lf-accent); } /* ---------- capture ---------- */ .lf-capture { padding: 72px 80px 96px; max-width: 620px; margin: 0 auto; min-height: 70vh; } .lf-cap-headwrap { text-align: center; margin-bottom: 36px; } .lf-eyebrow { font: 500 13px/1 Ubuntu; color: var(--lf-accent); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 12px; } .lf-cap-title { font: 700 35px/1.15 Roboto, sans-serif; color: var(--lf-text); letter-spacing: -0.4px; margin: 0 0 10px; } .lf-cap-sub { font: 300 16px/1.5 Ubuntu; color: var(--lf-text-muted); margin: 0; } .lf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .lf-field-full { grid-column: 1 / -1; } .lf-label { display: block; font: 500 13px/1 Ubuntu; color: var(--lf-text-2); margin-bottom: 8px; } .lf-req { color: var(--lf-accent); } .lf-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--lf-border-strong); background: var(--lf-input); color: var(--lf-text); font: 400 15px/1.2 Ubuntu; outline: none; transition: border-color 150ms ease; } .lf-input:focus { border-color: rgba(244,121,35,0.5); } .lf-help { font: 400 12px/1.4 Ubuntu; color: var(--lf-text-faint); margin-top: 6px; } .lf-consent { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0; cursor: pointer; } .lf-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--lf-accent); cursor: pointer; flex-shrink: 0; } .lf-consent span { font: 400 14px/1.5 Ubuntu; color: var(--lf-text-3); } .lf-captcha { margin: 4px 0 18px; min-height: 78px; } .lf-error { font: 400 13px/1.4 Ubuntu; color: #E2493A; margin-bottom: 14px; } .lf-submit { width: 100%; padding: 16px; border: none; border-radius: 999px; background: var(--lf-accent); color: #fff; font: 500 16px/1 Ubuntu, sans-serif; cursor: pointer; box-shadow: 0 8px 22px rgba(244,121,35,0.34); transition: all 150ms ease; } .lf-submit:hover { filter: brightness(1.05); } .lf-submit.disabled { background: #3a2a1c; color: #7d6a55; cursor: not-allowed; box-shadow: none; } [data-theme="light"] .lf-submit.disabled { background: #e7dccf; color: #b3a896; } .lf-submit.disabled:hover { filter: none; } .lf-private { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; font: 400 12px/1 Ubuntu; color: var(--lf-text-faint); } /* ---------- result ---------- */ .lf-result { padding: 72px 80px 96px; max-width: 680px; margin: 0 auto; min-height: 75vh; display: flex; flex-direction: column; align-items: center; text-align: center; } .lf-check-halo { width: 88px; height: 88px; border-radius: 50%; background: rgba(244,121,35,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; animation: smnPop .45s ease both; } .lf-check-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .lf-check-circle span { font: 700 30px/1 Roboto; color: #fff; } .lf-out-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; margin-bottom: 18px; } .lf-out-badge span { font: 500 13px/1 Ubuntu; } .lf-out-title { font: 700 44px/1.12 Roboto, sans-serif; color: var(--lf-text); letter-spacing: -0.5px; margin: 0 0 16px; text-wrap: balance; } .lf-out-msg { font: 300 19px/1.6 Ubuntu; color: var(--lf-text-3); margin: 0 0 30px; max-width: 520px; } .lf-resp-card { width: 100%; max-width: 480px; background: var(--lf-surface2); border: 1px solid var(--lf-border); border-radius: 20px; padding: 24px 28px; text-align: left; margin-bottom: 28px; } .lf-resp-head { font: 500 13px/1 Ubuntu; color: var(--lf-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; } .lf-bullets { display: flex; flex-direction: column; gap: 12px; } .lf-bullet { display: flex; align-items: flex-start; gap: 11px; } .lf-bullet-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .lf-bullet-dot span { font: 700 11px/1 Roboto; } .lf-bullet-text { font: 400 15px/1.45 Ubuntu; color: var(--lf-text); } .lf-ctas { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .lf-btn-green { width: 100%; padding: 15px; border: none; border-radius: 999px; background: #1F8A5B; color: #fff; font: 500 15px/1 Ubuntu; cursor: pointer; box-shadow: 0 8px 22px rgba(31,138,91,0.32); display: flex; align-items: center; justify-content: center; gap: 9px; transition: filter 150ms ease; } .lf-btn-green:hover { filter: brightness(1.08); } .lf-text-link { background: transparent; border: none; color: var(--lf-text-muted); font: 400 14px/1 Ubuntu; cursor: pointer; padding: 8px; transition: color 150ms ease; } .lf-text-link:hover { color: var(--lf-accent); } .lf-lead-actions { width: 100%; max-width: 480px; display: flex; gap: 12px; flex-wrap: wrap; } .lf-lead-actions .lf-btn-primary, .lf-lead-actions .lf-btn-ghost { flex: 1; min-width: 160px; padding: 15px; box-shadow: 0 8px 22px rgba(244,121,35,0.32); } .lf-lead-actions .lf-btn-ghost { box-shadow: none; } .lf-e1-action { width: 100%; max-width: 480px; } .lf-e1-action .lf-btn-primary { box-shadow: 0 8px 22px rgba(244,121,35,0.32); } /* ---------- confirmation ---------- */ .lf-confirm { padding: 72px 80px 96px; max-width: 560px; margin: 0 auto; min-height: 75vh; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; } .lf-confirm-halo { width: 96px; height: 96px; border-radius: 50%; background: rgba(31,138,91,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; animation: smnPop .45s ease both; box-shadow: 0 0 70px rgba(31,138,91,0.25); } .lf-confirm-circle { width: 64px; height: 64px; border-radius: 50%; background: #1F8A5B; display: flex; align-items: center; justify-content: center; } .lf-confirm-circle span { font: 700 34px/1 Roboto; color: #fff; } .lf-confirm-title { font: 700 44px/1.12 Roboto, sans-serif; color: var(--lf-text); letter-spacing: -0.5px; margin: 0 0 12px; } .lf-confirm-msg { font: 300 19px/1.55 Ubuntu; color: var(--lf-text-3); margin: 0 0 30px; max-width: 440px; } .lf-detail-card { width: 100%; background: var(--lf-surface2); border: 1px solid var(--lf-border); border-radius: 20px; padding: 8px 24px; margin-bottom: 30px; } .lf-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--lf-border-soft); } .lf-detail-row:last-child { border-bottom: none; } .lf-detail-key { font: 400 14px/1 Ubuntu; color: var(--lf-text-muted); } .lf-detail-val { font: 500 15px/1 Ubuntu; color: var(--lf-text); } .lf-ref { font: 700 15px/1 Roboto; color: var(--lf-accent); letter-spacing: 0.4px; } .lf-confirm-action { width: 100%; } .lf-confirm-action .lf-btn-primary { box-shadow: 0 8px 22px rgba(244,121,35,0.32); } /* ---------- responsive (mobile type scale + 1-col) ---------- */ @media (max-width: 760px) { .lf-nav { height: 60px; padding: 0 20px; } .lf-logo-img { height: 26px; } .lf-logo-text { font-size: 17px; } .lf-landing { padding: 20px; min-height: calc(100vh - 60px); } .lf-quiz, .lf-capture, .lf-result, .lf-confirm { padding: 40px 20px 64px; } .lf-q-title { font-size: 23px; } .lf-cap-title { font-size: 23px; } .lf-out-title, .lf-confirm-title { font-size: 27px; } .lf-out-msg, .lf-confirm-msg { font-size: 15px; } .lf-form-grid { grid-template-columns: 1fr; } .lf-option { padding: 15px 16px; font-size: 15px; } .lf-menu-dropdown { width: 270px; } } /* ---------- server-rendered screens (Jinja) — JS toggles .is-active ---------- */ .lf-screen { display: none; } .lf-screen.is-active { display: block; } .lf-menu-dropdown[hidden] { display: none; } /* ---------- intl-tel-input (country code dropdown) ---------- */ .iti { width: 100%; display: block; } .iti__selected-flag { padding: 0 10px; border-radius: 12px 0 0 12px; } .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background: rgba(255,255,255,0.06); } .iti__country-list { background: var(--lf-menu-bg); color: var(--lf-text); border: 1px solid var(--lf-border-strong); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); } .iti__country { color: var(--lf-text); } .iti__country.iti__highlight { background: rgba(244,121,35,0.12); } .iti__dial-code { color: var(--lf-text-muted); } .iti__divider { border-color: var(--lf-border); }