/* ========================================================================== chitta.vn — marketing landing page. Shares the Health Passport's editorial print language: cream paper + grain, Fraunces display serif, DM Sans body, JetBrains Mono data, 1.5px ink rules, emerald / gold / terracotta accents. No framework, no build step. Token names intentionally mirror web/app/src/styles/design.css. ========================================================================== */ :root { /* Paper & ink */ --paper: #f5f1ea; --paper-warm: #ebe4d6; --paper-deep: #e2dac7; --ink: #1a1f1c; --ink-soft: #3a3f3c; --muted: #7a7770; --line: #c9c2b3; --line-soft: #ddd6c6; /* Accents */ --emerald: #1f4d3d; --emerald-deep: #103025; --emerald-tint: rgba(31, 77, 61, 0.08); --gold: #b58a30; --gold-deep: #8a6620; --terra: #a8412a; /* Per-domain accents (same hues as the app) */ --c-movement: #1f6b8a; --c-nutrition: #7e8b3a; --c-sleep: #2d6b58; --c-brain: #8a5a1f; --c-metabolic: #b8521f; --c-social: #8a4a5e; --grain: url("data:image/svg+xml;utf8,"); --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1140px; --shadow-card: 0 1px 0 rgba(26, 31, 28, 0.06), 0 12px 32px -16px rgba(26, 31, 28, 0.18); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } /* Paper grain over the whole page. */ body::before { content: ""; position: fixed; inset: 0; background-image: var(--grain); pointer-events: none; opacity: 0.6; z-index: 1; } /* ------------------------------------------------------- language switch -- Both languages ship in the markup; hides one of them, so the right language is on screen before any JS runs (and if JS never runs at all). !important because the hidden side must beat any later layout rule that sets `display` on the same element (e.g. `.matrix tbody th small { display: block }`). */ html[data-lang="vi"] .en { display: none !important; } html[data-lang="en"] .vi { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; } .skip:focus { left: 0; } /* ---------------------------------------------------------------- layout -- */ .wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; position: relative; z-index: 2; } section.band { padding: 5.5rem 0; border-top: 1.5px solid var(--line); } .band-soft { background: var(--paper-warm); } .band-ink { background: var(--emerald-deep); color: var(--paper); } /* ------------------------------------------------------------ typography -- */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; font-variation-settings: "SOFT" 20, "WONK" 1; } h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin-bottom: 1.5rem; } h1 em { font-style: italic; color: var(--emerald); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1rem; } h3 { font-size: 1.2rem; letter-spacing: -0.01em; } p { margin: 0 0 1rem; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem; } .band-ink .eyebrow { color: var(--gold); } .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 34em; } .section-lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 46em; margin-bottom: 2.5rem; } .band-ink .section-lede { color: rgba(245, 241, 234, 0.78); } a { color: var(--emerald); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--emerald-deep); } .band-ink a { color: var(--gold); } :focus-visible { outline: 2px solid #1258c4; outline-offset: 2px; } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.55rem 1.1rem; border: 1.5px solid var(--ink); border-radius: 2px; text-decoration: none; transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease; } .btn-lg { padding: 0.8rem 1.6rem; font-size: 1rem; } .btn-solid { background: var(--emerald); border-color: var(--emerald); color: var(--paper); } .btn-solid:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); color: var(--paper); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); } .band-cta .btn-ghost { border-color: var(--paper); color: var(--paper); } .band-cta .btn-ghost:hover { background: var(--paper); color: var(--emerald-deep); } .cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2rem 0 1.5rem; } /* ---------------------------------------------------------------- header -- */ .site-head { position: sticky; top: 0; z-index: 10; background: rgba(245, 241, 234, 0.92); backdrop-filter: blur(8px); border-bottom: 1.5px solid var(--line); } .head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); margin-right: auto; } .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--emerald); color: var(--paper); font-family: var(--font-serif); font-size: 1.25rem; line-height: 1; border-radius: 2px; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-text strong { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; } .brand-text em { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .site-nav { display: flex; gap: 1.4rem; } .site-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; padding-bottom: 2px; border-bottom: 1.5px solid transparent; } .site-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); } .head-actions { display: flex; align-items: center; gap: 1rem; } .lang { display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); } .lang button { background: none; border: 0; padding: 0.15rem 0.1rem; font: inherit; color: var(--muted); cursor: pointer; letter-spacing: 0.08em; } .lang button[aria-pressed="true"] { color: var(--ink); border-bottom: 1.5px solid var(--gold); } /* ------------------------------------------------------------------ hero -- */ .hero { padding: 4.5rem 0 0; background: radial-gradient(120% 80% at 85% 0%, rgba(181, 138, 48, 0.1), transparent 60%), linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; } .hero-note { font-size: 0.92rem; color: var(--ink-soft); max-width: 36em; padding-left: 1rem; border-left: 1.5px solid var(--gold); } /* Passport mock ----------------------------------------------------------- */ .passport { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px; padding: 1.6rem; box-shadow: var(--shadow-card); position: relative; } .passport::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line-soft); pointer-events: none; } .passport-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 0.7rem; margin-bottom: 1.4rem; } .stamp { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--emerald); } .passport-head .mono { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.1em; } .passport-score { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.5rem; } .dial { width: 104px; height: 104px; flex: none; transform: rotate(-90deg); } .dial-track { fill: none; stroke: var(--line-soft); stroke-width: 9; } .dial-value { fill: none; stroke: var(--emerald); stroke-width: 9; stroke-linecap: butt; stroke-dasharray: 327; stroke-dashoffset: 85; /* ≈74% */ } .score-figure { display: flex; flex-direction: column; line-height: 1.1; } .score-figure strong { font-size: 3rem; font-weight: 500; letter-spacing: -0.04em; } .score-figure span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .passport-domains { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.6rem; } .passport-domains li { display: grid; grid-template-columns: 1fr 84px 30px; align-items: center; gap: 0.7rem; font-size: 0.82rem; } .passport-domains i { display: block; height: 6px; background: var(--line-soft); position: relative; } .passport-domains i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--c); } .passport-domains b { font-size: 0.78rem; font-weight: 500; text-align: right; color: var(--ink-soft); } .passport-domains li.na { color: var(--muted); } .passport-domains li.na b { font-size: 0.6rem; letter-spacing: 0.04em; white-space: nowrap; color: var(--muted); } .passport-domains li.na { grid-template-columns: 1fr 84px auto; } .passport-foot { margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* Facts strip ------------------------------------------------------------- */ .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 4.5rem; padding: 1.8rem 0; border-top: 1.5px solid var(--line); } .fact { display: flex; flex-direction: column; gap: 0.2rem; } .fact strong { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; color: var(--emerald); } .fact span { font-size: 0.82rem; color: var(--muted); } /* ----------------------------------------------------------------- cards -- */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2.5rem; } .cards-3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--paper); border: 1.5px solid var(--line); border-radius: 2px; padding: 1.5rem; } .card h3 { margin-bottom: 0.6rem; } .card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .card-lift { border-color: var(--ink); box-shadow: var(--shadow-card); } .inline-links { margin-top: 2rem; font-size: 0.95rem; color: var(--muted); } .inline-links a { margin: 0 0.15rem; } /* ---------------------------------------------------------------- matrix -- */ .matrix-scroll { overflow-x: auto; border: 1.5px solid rgba(245, 241, 234, 0.35); border-radius: 2px; } .matrix { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 0.86rem; } .matrix th, .matrix td { border: 1px solid rgba(245, 241, 234, 0.18); padding: 0.9rem 0.8rem; text-align: left; } .matrix thead th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--gold); vertical-align: bottom; } .matrix tbody th { font-weight: 500; width: 22%; } .matrix tbody th small { display: block; font-weight: 400; font-size: 0.72rem; color: rgba(245, 241, 234, 0.55); margin-top: 0.15rem; } .matrix td { text-align: center; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); opacity: 0.85; } .matrix-note { margin-top: 1.5rem; font-size: 0.95rem; color: rgba(245, 241, 234, 0.78); max-width: 46em; } /* ----------------------------------------------------------------- steps -- */ .steps { list-style: none; counter-reset: step; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1.5px solid var(--ink); } .steps li { padding: 1.6rem 1.2rem 0.5rem; border-right: 1px solid var(--line); } .steps li:last-child { border-right: 0; } .step-n { display: block; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gold-deep); margin-bottom: 0.7rem; } .steps h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .steps p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; } /* ------------------------------------------------------------ disclaimer -- */ .disclaimer { margin-top: 2.5rem; padding: 1.2rem 1.4rem; background: var(--paper); border: 1.5px solid var(--terra); border-left-width: 5px; font-size: 0.95rem; color: var(--ink-soft); max-width: 62em; } /* -------------------------------------------------------------- cta band -- */ .band-cta { background: var(--emerald); color: var(--paper); text-align: center; } .cta-inner { max-width: 46em; } .band-cta p { color: rgba(245, 241, 234, 0.82); font-size: 1.05rem; } .band-cta .cta-row { justify-content: center; } .band-cta .btn-solid { background: var(--paper); border-color: var(--paper); color: var(--emerald-deep); } .band-cta .btn-solid:hover { background: var(--paper-deep); border-color: var(--paper-deep); color: var(--emerald-deep); } /* ---------------------------------------------------------------- footer -- */ .site-foot { background: var(--ink); color: rgba(245, 241, 234, 0.72); padding: 2.5rem 0; } .foot-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .foot-brand { font-family: var(--font-serif); font-size: 1.1rem; color: var(--paper); margin-bottom: 0.4rem; } .foot-fine { font-size: 0.82rem; max-width: 44em; margin: 0; } .foot-nav { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; } .foot-nav a { color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; } .foot-nav a:hover { border-bottom-color: var(--gold); } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 3rem; } .site-nav { display: none; } .steps { grid-template-columns: repeat(2, 1fr); } .steps li { border-bottom: 1px solid var(--line); } .cards-3 { grid-template-columns: repeat(2, 1fr); } .facts { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; } } @media (max-width: 640px) { html { font-size: 15px; } .wrap { width: min(100% - 2rem, var(--wrap)); } section.band { padding: 3.5rem 0; } .hero { padding-top: 3rem; } .cards, .cards-3, .steps { grid-template-columns: 1fr; } .steps li { border-right: 0; } .brand-text em { display: none; } html[data-lang="en"] .brand-text em.en { display: none; } .cta-row .btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } } @media print { .site-head, .cta-row, .band-cta { display: none; } }