/* ========================================================================== Koonisoo pre-launch marketing page Imported from Claude Design: "Koonisoo Marketing Page - Pre-launch" Only loaded by app/Views/welcome_message.php (the logged-out landing page). Dark mode is driven by [data-theme="dark"] on , set by assets/js/theme.js. ========================================================================== */ /* ===== Tokens ===== */ :root { --page: #ffffff; --surface: #ffffff; --surface2: #f2f7fb; --text: #0f1722; --muted: #5b6b7c; --line: #dde8f1; --accent-text: #0a7ea4; --solid: #111827; --onsolid: #ffffff; --good: #3aa147; --bad: #c2382b; --good-text: #1c7a2c; --good-line: #b5e0bc; --good-tint: #eaf7ec; --bad-text: #a3271b; --bad-line: #f0bcb5; --bad-tint: #fdecea; --shadow: 0 30px 70px -34px rgba(13, 45, 75, .45); --card-shadow: 0 2px 3px rgba(13, 45, 75, .04), 0 18px 40px -30px rgba(13, 45, 75, .35); --hero: linear-gradient(180deg, #eaf3fb 0%, #f6fafd 58%, #ffffff 100%); --device-frame: linear-gradient(160deg, #33404f, #0d141b); --logo-filter: none; } [data-theme="dark"] { --page: #0b1117; --surface: #131c25; --surface2: #172230; --text: #e9f1f8; --muted: #93a5b7; --line: #22303f; --accent-text: #4ec3e4; --solid: #f2f6fa; --onsolid: #0b1117; --good: #4fbe5e; --bad: #f2776a; --good-text: #7ad687; --good-line: rgba(79, 190, 94, .42); --good-tint: rgba(79, 190, 94, .14); --bad-text: #ff9b90; --bad-line: rgba(242, 119, 106, .45); --bad-tint: rgba(242, 119, 106, .14); --shadow: 0 30px 70px -34px rgba(0, 0, 0, .8); --card-shadow: 0 2px 3px rgba(0, 0, 0, .3), 0 18px 40px -30px rgba(0, 0, 0, .8); --hero: linear-gradient(180deg, #0f1a24 0%, #0c141c 58%, #0b1117 100%); --logo-filter: invert(1); } /* ===== Base ===== */ * { box-sizing: border-box; } /* Anchor targets clear the sticky header. */ .mk [id] { scroll-margin-top: 88px; } body.mk { margin: 0; background: var(--page); color: var(--text); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; } .mk h1, .mk h2, .mk h3, .mk p { margin: 0; } .mk a { color: var(--accent-text); text-decoration: none; } .mk a:hover { text-decoration: underline; } .mk img { max-width: 100%; } .mk input { font-family: inherit; } .mk :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } /* Material Symbols ligature icons */ .mk-i { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .mk-shell { background: var(--page); } .mk-wrap { max-width: 1120px; margin: 0 auto; } /* ===== Header ===== */ .mk-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--page) 82%, transparent); border-bottom: 1px solid var(--line); } .mk-nav { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; } .mk-nav-links { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 15px; font-weight: 600; } .mk-nav-links::-webkit-scrollbar { display: none; } .mk .mk-nav-links a { color: var(--muted); } .mk .mk-nav-links a:hover { color: var(--accent-text); } .mk-nav-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; } /* ===== Logo (full KOONISOO wordmark) ===== */ .mk .mk-lockup { display: flex; align-items: center; text-decoration: none; line-height: 0; } .mk .mk-lockup:hover { text-decoration: none; } /* The artwork is black on transparent, so dark mode inverts it to white. */ .mk-lockup img { display: block; height: 22px; width: auto; filter: var(--logo-filter); } .mk-lockup-footer img { height: 19px; } /* ===== Buttons ===== */ .mk .mk-btn-solid { display: inline-block; padding: 11px 18px; border: none; border-radius: 14px; background: var(--solid); color: var(--onsolid); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .mk .mk-btn-solid:hover { opacity: .88; color: var(--onsolid); text-decoration: none; } .mk .mk-btn-login { font-size: 15px; font-weight: 700; color: var(--text); padding: 0 6px; } .mk .mk-btn-login:hover { color: var(--accent-text); } .mk-theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 20px; padding: 0; } .mk-theme-toggle:hover { border-color: var(--accent-text); color: var(--accent-text); } .mk-theme-toggle .mk-i-light { display: none; } [data-theme="dark"] .mk-theme-toggle .mk-i-light { display: block; } [data-theme="dark"] .mk-theme-toggle .mk-i-dark { display: none; } /* ===== Sections ===== */ .mk-section { padding: 110px 24px; background: var(--page); } .mk-section-tight { padding: 96px 24px; } .mk-section-alt { background: var(--surface2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .mk-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent-text); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .mk-eyebrow .mk-i { font-size: 19px; } .mk-h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; } .mk-h2-sm { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; } .mk-h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; } .mk-h3-sm { font-size: 19px; font-weight: 800; letter-spacing: -.02em; } .mk-lead { font-size: 19px; line-height: 1.55; color: var(--muted); } .mk-lead-sm { font-size: 18px; line-height: 1.55; color: var(--muted); } .mk-body { font-size: 16px; line-height: 1.55; color: var(--muted); } .mk-note { font-size: 15px; line-height: 1.5; color: var(--muted); } .mk-fine { font-size: 14px; line-height: 1.5; color: var(--muted); } .mk-intro { display: flex; flex-direction: column; gap: 18px; max-width: 680px; } .mk-stack { display: flex; flex-direction: column; } .mk-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center; } /* ===== Device frames ===== */ .mk-phones { display: flex; gap: 22px; justify-content: center; align-items: flex-start; } .mk-phone { width: 100%; max-width: 270px; border-radius: 42px; padding: 8px; background: var(--device-frame); box-shadow: var(--shadow); } .mk-phone img { display: block; width: 100%; border-radius: 35px; } .mk-phone-offset { margin-top: 48px; } .mk-thumb { width: 120px; flex: none; border-radius: 22px; padding: 5px; background: var(--device-frame); } .mk-thumb img { display: block; width: 100%; border-radius: 18px; } /* ===== Hero ===== */ .mk-hero { background: var(--hero); padding: 76px 24px 96px; } .mk-hero-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center; } .mk-hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 600px; } .mk-badge { display: flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); } .mk-badge .mk-i { font-size: 17px; color: var(--accent-text); } .mk-h1 { font-size: clamp(40px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; } .mk-hero-sub { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 520px; } .mk-hero-phones { display: flex; gap: 24px; justify-content: center; align-items: flex-start; } .mk-hero-phones .mk-phone-primary { max-width: 300px; border-radius: 46px; padding: 9px; } .mk-hero-phones .mk-phone-primary img { border-radius: 38px; } .mk-hero-phones .mk-phone-secondary { max-width: 250px; margin-top: 56px; border-radius: 40px; } .mk-hero-phones .mk-phone-secondary img { border-radius: 33px; } /* ===== Notify form ===== */ .mk-signup { display: flex; flex-direction: column; gap: 12px; max-width: 520px; } .mk-form { display: flex; gap: 10px; flex-wrap: wrap; } .mk-form input[type="email"] { flex: 1; min-width: 220px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 500; } .mk-form input[type="email"]::placeholder { color: var(--muted); } .mk-form button { position: relative; padding: 16px 24px; border-radius: 16px; border: none; background: var(--solid); color: var(--onsolid); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; } .mk-form button:hover { opacity: .88; } .mk-form button:disabled { cursor: default; } .mk-form button:disabled:hover { opacity: 1; } /* Busy state. The label only turns invisible instead of being replaced, so the button keeps its exact width while the spinner runs — swapping in shorter text would make the hero row and the centred CTA row jump mid-request. */ .mk-form.is-sending button .mk-btn-label { visibility: hidden; } .mk-form.is-sending button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mk-spin .7s linear infinite; } .mk-form.is-sending input[type="email"] { opacity: .6; } @keyframes mk-spin { to { transform: rotate(360deg); } } /* Signup result. Success and failure are told apart by icon, colour, border and tint together — the wording alone is too easy to skim past, and "we could not send the confirmation email" in green reads as if it worked. */ .mk-form-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.45; } .mk-form-note .mk-form-note-icon { font-size: 20px; flex: none; margin-top: 1px; } .mk-form-note-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .mk-cta .mk-form-note-body { align-items: center; } /* Only shown once the confirmation has covered the form, as the way back to it. */ .mk-form-note-dismiss { padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .mk-form-note-dismiss:hover { opacity: .75; } .mk-form-note-ok { color: var(--good-text); border-color: var(--good-line); background: var(--good-tint); } .mk-form-note-error { color: var(--bad-text); border-color: var(--bad-line); background: var(--bad-tint); } /* Honeypot: never shown to a human, so anything typed into it came from a bot. Kept off-screen rather than display:none, which some bots skip. */ .mk-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } [hidden] { display: none !important; } /* ===== Feature columns ===== */ .mk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; } .mk-col { display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; } .mk-col .mk-phone { max-width: 280px; } .mk-col-copy { display: flex; flex-direction: column; gap: 8px; max-width: 340px; } /* ===== Side-by-side cards ===== */ .mk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .mk-card { display: flex; gap: 22px; align-items: center; padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow); } .mk-card-copy { display: flex; flex-direction: column; gap: 8px; } /* ===== Bullet lists ===== */ .mk-bullets { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; } .mk-bullet { display: flex; gap: 13px; align-items: flex-start; } .mk-bullet .mk-i { font-size: 22px; line-height: 1.3; color: var(--accent-text); } .mk-bullet p { font-size: 16px; line-height: 1.5; } .mk-bullet strong { font-weight: 800; } .mk-bullet span.mk-bullet-tail { color: var(--muted); } .mk-rows { display: flex; flex-direction: column; gap: 14px; } .mk-row { display: flex; gap: 13px; align-items: center; } .mk-row .mk-i { font-size: 22px; color: var(--accent-text); } .mk-row p { font-size: 16px; line-height: 1.5; } .mk-panel { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); } .mk-panel .mk-i { font-size: 22px; line-height: 1.25; color: var(--accent-text); } .mk-panel p { font-size: 16px; line-height: 1.5; } .mk-panel strong { font-weight: 800; } .mk-panel span.mk-bullet-tail { color: var(--muted); } /* ===== Badge tiles ===== */ .mk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .mk-tile { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 26px 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow); } .mk-tile .mk-i { font-size: 30px; color: var(--accent-text); } .mk-tile-name { font-size: 16px; font-weight: 800; } .mk-tile-sub { font-size: 13px; color: var(--muted); font-weight: 600; } /* ===== Data / privacy ===== */ .mk-data-shot { display: flex; justify-content: center; order: 2; } .mk-data-shot .mk-phone { max-width: 290px; border-radius: 44px; padding: 9px; } .mk-data-shot .mk-phone img { border-radius: 37px; } .mk-data-copy { order: 1; } .mk-callout { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: 22px; background: var(--surface2); border: 1px solid var(--line); } .mk-callout .mk-i { font-size: 24px; line-height: 1.2; color: var(--muted); } .mk-callout p { font-size: 15px; line-height: 1.6; color: var(--muted); } .mk-callout strong { font-weight: 800; color: var(--text); } /* ===== Setup + appearance ===== */ .mk-setup { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 64px; } .mk-setup-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; } .mk-appearance { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; align-items: center; padding-top: 56px; border-top: 1px solid var(--line); } .mk-shot-toggle { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .mk-shot-btn { padding: 9px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--line); } .mk-shot-btn[aria-pressed="true"] { background: var(--solid); color: var(--onsolid); border-color: var(--solid); } .mk-shot-note { align-self: center; font-size: 14px; font-weight: 700; color: var(--muted); } .mk-appearance-phones .mk-phone { max-width: 238px; border-radius: 40px; } .mk-appearance-phones .mk-phone img { border-radius: 33px; } .mk-appearance-phones .mk-phone-offset { margin-top: 40px; } .mk-profile-phone { max-width: 250px; border-radius: 40px; } .mk-profile-phone img { border-radius: 33px; } /* ===== Final CTA ===== */ .mk-cta { padding: 120px 24px; background: var(--hero); border-top: 1px solid var(--line); } .mk-cta-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; } .mk-cta h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; } .mk-cta .mk-lead { max-width: 560px; } .mk-cta .mk-signup { width: 100%; align-items: center; } .mk-cta .mk-form { width: 100%; justify-content: center; } .mk-cta .mk-form input[type="email"] { padding: 17px 20px; } .mk-cta .mk-form button { padding: 17px 26px; } .mk-stores { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; } .mk-store { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; font-weight: 700; } .mk-store .mk-i { font-size: 18px; } /* ===== Footer ===== */ .mk-footer { padding: 52px 24px; background: var(--page); border-top: 1px solid var(--line); } .mk-footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; } .mk-footer-brand { display: flex; flex-direction: column; gap: 8px; } .mk-footer-brand p { max-width: 520px; } .mk-footer-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; font-weight: 600; } /* ===== Small screens ===== */ @media (max-width: 700px) { /* Two-row header: brand + actions on top, the section links below. */ .mk-nav { padding: 10px 16px; gap: 10px 12px; } .mk .mk-lockup-header { order: 1; } .mk .mk-lockup-header img { height: 18px; } .mk-nav-actions { order: 2; gap: 8px; } .mk-nav-links { order: 3; flex: 1 0 100%; font-size: 14px; gap: 16px; } .mk .mk-btn-solid { padding: 9px 14px; font-size: 14px; } .mk-theme-toggle { width: 36px; height: 36px; border-radius: 12px; font-size: 18px; } .mk-section { padding: 76px 20px; } .mk-section-tight { padding: 68px 20px; } .mk-hero { padding: 48px 20px 68px; } .mk-cta { padding: 80px 20px; } .mk-split, .mk-hero-grid { gap: 40px; } .mk-phones, .mk-hero-phones { gap: 14px; } .mk-phone-offset, .mk-hero-phones .mk-phone-secondary, .mk-appearance-phones .mk-phone-offset { margin-top: 28px; } .mk-card { flex-direction: column; align-items: flex-start; } .mk-thumb { width: 108px; } .mk-appearance { padding-top: 40px; } .mk-setup { gap: 44px; } } @media (prefers-reduced-motion: reduce) { .mk * { transition: none !important; animation: none !important; } .mk-form.is-sending button::after { animation: mk-spin 2s linear infinite !important; } } /* ===== Layout utilities (kept here rather than inline on the view) ===== */ .mk-gap-16 { gap: 16px; } .mk-gap-18 { gap: 18px; } .mk-gap-22 { gap: 22px; } .mk-gap-24 { gap: 24px; } .mk-gap-40 { gap: 40px; } .mk-gap-52 { gap: 52px; } .mk-gap-56 { gap: 56px; } .mk-mt-4 { margin-top: 4px; } .mk-mt-2 { margin-top: 2px; } .mk-center { display: flex; justify-content: center; } .mk-section-badges { padding-top: 100px; padding-bottom: 100px; } /* Weight section: chart phone beside a stack of two cards */ .mk-weight-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: start; } .mk-phone-lg { max-width: 320px; border-radius: 48px; padding: 9px; } .mk-phone-lg img { border-radius: 40px; } .mk-thumb-lg { width: 126px; } @media (max-width: 700px) { .mk-gap-52, .mk-gap-56 { gap: 40px; } .mk-section-badges { padding-top: 72px; padding-bottom: 72px; } .mk-thumb-lg { width: 108px; } } /* ===== Standalone notice page (confirm / unsubscribe) ===== */ .mk-notice { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .mk-notice-card { width: 100%; max-width: 520px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--card-shadow); padding: 40px 32px; } .mk-notice-card .mk-lockup { justify-content: center; margin-bottom: 20px; } .mk-notice-card h1 { font-size: 26px; margin: 0 0 12px; letter-spacing: -.02em; } .mk-notice-card p { color: var(--muted); margin: 0 0 24px; } /* Success badge, actions and hint -- used by the account-confirmed page. */ .mk-notice-badge { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--good-tint); border: 1px solid var(--good-line); } .mk-notice-badge svg { width: 30px; height: 30px; stroke: var(--good-text); } .mk-notice-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .mk-notice-actions .mk-btn-solid { text-align: center; } .mk .mk-btn-quiet { display: inline-block; padding: 11px 18px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; } .mk .mk-btn-quiet:hover { background: var(--surface2); color: var(--text); text-decoration: none; } .mk-notice-hint { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 24px 0 0; }