/* ========================================================================= MoaVoca marketing site — shared stylesheet Used by index.html / features.html / languages.html / exams.html / pricing.html / faq.html. Pure static CSS, no build step. ========================================================================= */ :root { --bg: #F4F1EA; --surface: #ECE6DA; --surface-2: #F8F5EF; --border: #E5DFD3; /* Cool/dark grays tuned for legibility on the mint gradient (the old warm cream-theme grays were too low-contrast on green). */ --text-1: #1E2C27; --text-2: #3E4D47; --text-3: #4C5B54; --text-4: #6B7A73; --accent: #2EC4A5; --accent-deep: #1E9E84; --accent-soft: rgba(46, 196, 165, 0.08); --mint-1: #DFF3EC; --mint-2: #EAF6F1; --shadow-float: 0 8px 24px rgba(8, 60, 50, 0.08), 0 2px 6px rgba(8, 60, 50, 0.05); --shadow-phone: 0 28px 70px rgba(8, 60, 50, 0.22), 0 8px 18px rgba(8, 60, 50, 0.10); /* Store-screenshot mint gradient (matches docs/store-assets templates). */ --grad: linear-gradient(165deg, #B6ECDD 0%, #83DBC3 55%, #5FC4AD 100%); --teal-ink: #1A6D60; --panel: rgba(255, 255, 255, 0.50); /* translucent veil — gradient tints through */ --panel-strong: rgba(255, 255, 255, 0.68); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #83DBC3; /* fallback; the real gradient is the fixed ::before layer */ color: var(--text-1); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; /* let long unbreakable runs (e.g. "·"-joined lists) wrap */ word-break: keep-all; /* but keep Korean words intact where possible */ } /* Grid/flex children default to min-width:auto, which lets long content force horizontal overflow. Allow these text columns to shrink. */ .hero-copy, .fr-copy, .strip-card, .card, .lang-card, .exam-card, .price-card { min-width: 0; } img { display: block; max-width: 100%; } a { color: inherit; } /* Fixed full-viewport mint gradient. The background stays put while content scrolls over it — works on iOS too, unlike background-attachment:fixed. Sits behind everything (z-index:-1); transparent sections let it show, white cards float on top. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--grad); pointer-events: none; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; } /* ---------- Language toggle: hide only the INACTIVE language ---------- Key is on so an inline script can set it before first paint (no flash of the wrong language). The active language keeps its natural display (inline/block preserved — no `revert`). With JS disabled and no class set, both languages show (graceful degradation, never a blank page). */ html.lang-ko .lang-en { display: none !important; } html.lang-en .lang-ko { display: none !important; } /* Language menu — a JS-free
dropdown, so it stays compact for any number of languages (ready for all 8). */ .lang-menu { position: relative; } .lang-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--text-2); padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.55); white-space: nowrap; } .lang-menu > summary::-webkit-details-marker { display: none; } .lang-menu > summary::after { content: "▾"; font-size: 11px; color: var(--text-3); } .lang-menu[open] > summary { border-color: var(--text-3); color: var(--text-1); } .lang-menu-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 156px; background: #fff; border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-float); padding: 6px; display: flex; flex-direction: column; } .lang-menu-list a { font-size: 14px; color: var(--text-2); text-decoration: none; padding: 9px 12px; border-radius: 9px; white-space: nowrap; } .lang-menu-list a:hover { background: var(--surface-2); color: var(--text-1); } .lang-menu-list a.active { color: var(--accent-deep); font-weight: 700; } /* ---------- Wordmark ---------- */ .wordmark { display: inline-block; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-1); text-decoration: none; } .wordmark .accent { color: var(--accent); } /* ---------- Sticky site header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(225, 245, 238, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 16px; } .site-header .wordmark { font-size: 22px; } .site-nav { display: flex; align-items: center; gap: 26px; } .site-nav a.nav-link { font-size: 14.5px; color: var(--text-2); text-decoration: none; font-weight: 500; } .site-nav a.nav-link:hover { color: var(--text-1); } .site-nav a.nav-link.current { color: var(--accent-deep); font-weight: 700; } .nav-cta { padding: 9px 18px; border-radius: 10px; background: var(--accent); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none; } .nav-cta:hover { background: var(--accent-deep); } .nav-web { font-size: 14px; font-weight: 600; color: var(--accent-deep); text-decoration: none; white-space: nowrap; } .nav-web:hover { color: var(--teal-ink); } .nav-tools { display: flex; align-items: center; gap: 14px; } /* ---------- Sections ---------- */ /* Background is the page-wide mint gradient; sections are transparent so it shows through, with translucent white panels for visual rhythm + legibility. */ section { padding: 92px 0; border-top: none; } /* No panel bands — the page is one continuous fixed gradient; white cards float on it. (.section-soft kept as a hook but no longer paints a band.) */ .section-soft { background: transparent; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent-deep); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .section-title { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px; color: var(--text-1); } .section-lead { font-size: 17px; color: var(--text-3); line-height: 1.65; max-width: 620px; } .section-header { margin-bottom: 56px; text-align: center; } .section-header .section-lead { margin: 0 auto; } /* ---------- Buttons ---------- */ .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .cta-row.center { justify-content: center; } .cta-primary { display: inline-block; padding: 16px 34px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-float); transition: transform .1s ease, background .15s ease; } .cta-primary:hover { background: var(--accent-deep); transform: translateY(-1px); } .cta-secondary { display: inline-block; padding: 16px 26px; border-radius: 14px; background: transparent; color: var(--text-2); font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid var(--border); } .cta-secondary:hover { color: var(--text-1); border-color: var(--text-3); } .cta-note { font-size: 13px; color: var(--text-4); } /* ---------- Store badges ---------- */ .badge-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .badge-row.center { justify-content: center; } /* Both badges share one footprint (matched to the Google Play badge) so the App Store badge — whose SVG is a touch narrower at equal height — doesn't read as smaller. Fixed width + auto height keeps each logo undistorted. */ .store-badge { width: 176px; height: auto; transition: transform .1s ease, opacity .15s ease; } .store-badge:hover { transform: translateY(-1px); opacity: .9; } /* Single combined download button — one button holding both store glyphs. href defaults to /get (works with no JS: /get itself detects the device and redirects). The [data-smart-store] script upgrades the href to /get/ios or /get/android on phones so the tap jumps straight to the store, no hop. */ .store-cta { display: inline-flex; align-items: center; gap: 11px; padding: 15px 30px; border-radius: 14px; background: var(--text-1); color: #fff !important; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1; text-decoration: none; box-shadow: var(--shadow-float); transition: transform .12s ease, box-shadow .15s ease, background .15s ease; } .store-cta:hover { transform: translateY(-2px); background: #16211C; box-shadow: 0 14px 32px rgba(8, 60, 50, .20), 0 5px 12px rgba(8, 60, 50, .10); } .store-cta:active { transform: translateY(0); } .store-cta-icons { display: inline-flex; align-items: center; gap: 9px; } .store-cta svg { width: 21px; height: 21px; display: block; fill: #fff; } /* On desktop the footscript keeps the download button visible but inert (aria-disabled, no href) and drops a scan-to-install QR beside it — the QR is the real desktop CTA. Phones/tablets never get the QR (their tap routes straight to the store), so it's belt-and-suspenders hidden on coarse pointers. */ .store-cta[aria-disabled="true"] { pointer-events: none; cursor: default; } .qr-inline { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; } .qr-inline img { width: 104px; height: 104px; display: block; border-radius: 11px; background: #fff; box-shadow: 0 2px 10px rgba(8, 60, 50, .09); } .qr-inline-cap { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text-3); text-align: center; } @media (pointer: coarse) { .qr-inline { display: none !important; } } html.is-phone .qr-inline { display: none !important; } /* ---------- Phone frame — realistic iPhone (titanium rim + Dynamic Island) ---- All chrome is pure CSS so we never touch the screenshot . The screenshot's top is a flat mint (#DFF0E8, sampled from every app screen), so the faux iOS status-bar strip (the screen's padding-top, same mint) seams invisibly. */ .phone { position: relative; width: 252px; flex-shrink: 0; padding: 10px; border-radius: 46px; background: linear-gradient(135deg, #80848a 0%, #34363a 16%, #1b1c1e 50%, #34363a 84%, #6c7075 100%); box-shadow: var(--shadow-phone); isolation: isolate; /* contain the frame's internal z-index (island/buttons) so the mascot can sit above the whole phone */ } /* side buttons: power (right), volume rocker (left) */ .phone::before { content: ""; position: absolute; right: -2px; top: 33%; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #60646a, #3a3d42); } .phone::after { content: ""; position: absolute; left: -2px; top: 29%; width: 3px; height: 50px; border-radius: 3px 0 0 3px; background: linear-gradient(180deg, #60646a, #3a3d42); } .phone .screen { position: relative; z-index: 1; border-radius: 37px; overflow: hidden; padding-top: 34px; /* iOS status-bar strip */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cg fill='%230e3b31'%3E%3Crect x='0' y='8' width='3' height='6' rx='1'/%3E%3Crect x='5' y='6' width='3' height='8' rx='1'/%3E%3Crect x='10' y='3.5' width='3' height='10.5' rx='1'/%3E%3Crect x='15' y='1' width='3' height='13' rx='1'/%3E%3C/g%3E%3Cpath d='M24 6a7.5 7.5 0 0 1 11 0' fill='none' stroke='%230e3b31' stroke-width='1.8'/%3E%3Cpath d='M26.5 8.7a4 4 0 0 1 6 0' fill='none' stroke='%230e3b31' stroke-width='1.8'/%3E%3Ccircle cx='29.5' cy='11.4' r='1.2' fill='%230e3b31'/%3E%3Crect x='41' y='3' width='16' height='9' rx='2.4' fill='none' stroke='%230e3b31' stroke-width='1.3' opacity='0.55'/%3E%3Crect x='42.6' y='4.6' width='10' height='5.8' rx='1.1' fill='%230e3b31'/%3E%3Crect x='58' y='6' width='1.6' height='4' rx='0.8' fill='%230e3b31' opacity='0.55'/%3E%3C/svg%3E") no-repeat, #DFF0E8; background-position: top 11px right 18px; box-shadow: 0 0 0 2.5px #0c0d0f; /* thin black bezel between titanium and glass */ } .phone .screen > img { display: block; width: 100%; height: auto; } .phone .screen::before { /* Dynamic Island (with camera lens) */ content: ""; position: absolute; z-index: 3; top: 9px; left: 50%; transform: translateX(-50%); width: 68px; height: 23px; border-radius: 999px; background: #000 radial-gradient(circle 3px at 76% 50%, #2a3a4a 0%, #0a0f16 60%, #000 100%); } .phone .screen::after { /* status-bar clock */ content: "9:41"; position: absolute; z-index: 3; top: 9.5px; left: 22px; font-size: 11.5px; font-weight: 700; color: #0e3b31; letter-spacing: 0.2px; } .phone.sm { width: 210px; border-radius: 40px; padding: 8px; } .phone.sm .screen { border-radius: 32px; } /* ---------- Hero ---------- */ .hero { border-top: none; padding: 72px 0 88px; } .hero .container { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: center; } .hero-copy .eyebrow { margin-bottom: 18px; } .hero h1 { font-size: 50px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--text-1); } .hero .subtitle { font-size: 19px; color: var(--text-3); line-height: 1.6; margin-top: 22px; max-width: 540px; } .hero .cta-row { margin-top: 30px; } .hero .cta-note { margin-top: 14px; } .hero-weblink { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--accent-deep); text-decoration: none; } .hero-weblink:hover { color: var(--teal-ink); text-decoration: underline; } .hero-visual { display: flex; justify-content: center; position: relative; } /* Moa always sits on the top layer — above the phone and its frame. */ .hero-visual .mascot-peek { position: absolute; width: 120px; bottom: -8px; left: -36px; z-index: 20; filter: drop-shadow(0 10px 18px rgba(42,38,32,.18)); } /* ---------- Stats band ---------- */ .stats-band { background: transparent; } .stats-band .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 56px; padding: 36px 24px; } .stat { text-align: center; min-width: 96px; } .stat-num { font-size: 34px; font-weight: 800; color: var(--text-1); letter-spacing: -0.02em; line-height: 1.1; } .stat-num .unit { font-size: 15px; color: var(--accent-deep); font-weight: 700; margin-left: 2px; } .stat-label { font-size: 13px; color: var(--text-3); margin-top: 6px; } /* ---------- Alternating feature rows (screenshot + copy) ---------- */ .feature-row { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; } .feature-row + .feature-row { margin-top: 88px; } .feature-row.reverse { grid-template-columns: 1fr 280px; } .feature-row.reverse .fr-visual { order: 2; } .feature-row.reverse .fr-copy { order: 1; } .fr-visual { display: flex; justify-content: center; } .fr-copy .eyebrow { margin-bottom: 12px; } .fr-copy h3 { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--text-1); margin-bottom: 14px; } .fr-copy p { font-size: 16px; color: var(--text-3); line-height: 1.7; max-width: 480px; } .fr-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } .fr-list .item { font-size: 15px; color: var(--text-2); display: flex; gap: 10px; align-items: flex-start; } .fr-list .item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex-shrink: 0; } /* ---------- Highlight strip (home: 3-up screenshots) ---------- */ .strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .strip-card { text-align: center; display: flex; flex-direction: column; align-items: center; } .strip-card .phone { margin-bottom: 22px; } .strip-card h3 { font-size: 18px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; } .strip-card p { font-size: 14.5px; color: var(--text-3); line-height: 1.6; max-width: 280px; } /* ---------- Generic card grids ---------- */ .card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .card { background: #fff; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-float); } .card.soft { background: #fff; } .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--text-1); } .card p { font-size: 15px; color: var(--text-3); line-height: 1.6; } .card .step-num { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-size: 13px; font-weight: 700; line-height: 28px; text-align: center; margin-bottom: 16px; } .feat-mark { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; transform: translateY(-2px); } /* ---------- Language cards ---------- */ .lang-card .lang-name { font-size: 12px; font-weight: 700; color: var(--accent-deep); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; } .lang-card .lang-word { font-size: 21px; font-weight: 700; color: var(--text-1); } .lang-card .lang-reading { font-size: 12px; color: var(--text-3); margin-top: 2px; } .lang-card .lang-translation { font-size: 14px; color: var(--text-2); margin-top: 12px; line-height: 1.5; } /* ---------- Exam cards ---------- */ .exam-card .exam-flag { font-size: 11px; font-weight: 700; color: var(--accent-deep); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; } .exam-card h3 { font-size: 17px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; } .exam-card p { font-size: 14px; color: var(--text-3); line-height: 1.6; } .pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-2); } /* ---------- Pricing ---------- */ .price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: 0 auto; } .price-card { background: #fff; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 18px; padding: 32px; box-shadow: var(--shadow-float); } .price-card.featured { border: 2px solid var(--accent); background: #fff; position: relative; } .price-badge { position: absolute; top: -10px; right: 24px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.05em; } .price-tier { font-size: 13px; font-weight: 700; color: var(--accent-deep); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } .price-amount { font-size: 32px; font-weight: 800; color: var(--text-1); margin-bottom: 4px; } .price-amount .currency { font-size: 18px; color: var(--text-3); font-weight: 600; } .price-amount .per { font-size: 14px; color: var(--text-3); font-weight: 500; } .price-period { font-size: 13px; color: var(--text-3); margin-bottom: 20px; } .price-feat { font-size: 14px; color: var(--text-2); padding: 8px 0; border-top: 1px dashed var(--border); display: flex; gap: 8px; } .price-feat:first-of-type { border-top: none; } .price-feat::before { content: "·"; color: var(--accent); font-weight: 700; } .price-note { font-size: 13px; color: var(--text-4); margin-top: 20px; text-align: center; } /* ---------- FAQ ---------- */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item:first-child { border-top: 1px solid var(--border); } .faq-item summary { padding: 20px 0; font-size: 16px; font-weight: 600; color: var(--text-1); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 22px; color: var(--text-3); font-weight: 400; flex-shrink: 0; transition: transform .2s; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-body { padding: 0 0 20px; font-size: 15px; color: var(--text-3); line-height: 1.7; } .faq-item .faq-body a { color: var(--accent-deep); text-decoration: underline; } /* ---------- Final CTA ---------- */ .cta-final { text-align: center; padding: 92px 0; background: transparent; } .cta-final .mascot { width: 132px; margin: 0 auto 24px; } .cta-final h2 { font-size: 33px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--text-1); } .cta-final p { font-size: 16px; color: var(--text-3); margin-bottom: 28px; } /* ---------- Footer ---------- */ footer { padding: 48px 0 64px; background: transparent; border-top: 1px solid rgba(14, 59, 49, 0.14); } .footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .footer-brand .wordmark { font-size: 24px; } .footer-brand p { font-size: 13px; color: #34473F; margin-top: 8px; } .footer-links { display: flex; flex-wrap: wrap; gap: 16px 24px; max-width: 640px; } .footer-links a { font-size: 14px; color: #2E423B; text-decoration: none; } .footer-links a:hover { color: var(--text-1); } .footer-legal { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(14, 59, 49, 0.14); font-size: 12px; color: #2D413A; line-height: 1.7; } section[id], .stats-band { scroll-margin-top: 76px; } /* ---------- Responsive ---------- */ @media (max-width: 920px) { section { padding: 68px 0; } .section-title { font-size: 29px; } .hero { padding: 48px 0 64px; } .hero .container { grid-template-columns: 1fr; gap: 40px; text-align: center; } .hero-copy .subtitle { margin-left: auto; margin-right: auto; } .hero-copy .cta-row, .hero-copy .badge-row { justify-content: center; } .hero-visual { order: -1; } .hero-visual .mascot-peek { display: none; } .hero h1 { font-size: 36px; } .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 28px; text-align: center; } .feature-row.reverse .fr-visual { order: -1; } .feature-row.reverse .fr-copy { order: 0; } .fr-visual { order: -1; } .fr-copy p { margin: 0 auto; } .fr-list { align-items: center; } .fr-list .item { text-align: left; } .strip-grid { grid-template-columns: 1fr; gap: 48px; } .card-grid-3, .card-grid-4 { grid-template-columns: 1fr 1fr; } .price-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .site-nav .nav-link { display: none; } .nav-cta { display: none; } /* hero badges + footer carry the download CTA on mobile */ .nav-web { font-size: 13px; } /* keep the web-app link in the top bar on mobile */ .nav-tools { gap: 10px; } .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; } .hero h1 { font-size: 31px; } .section-title { font-size: 25px; } .stats-band .container { gap: 16px 32px; padding: 28px 24px; } .stat-num { font-size: 27px; } }