/* ========================================================================== Tiếng Việt TV — Landing page styles Design: "TiengVietTV Landing - Bright" (Claude Design handoff) Structure: 1. Design tokens (CSS custom properties) 2. Base / reset 3. Animations 4. Layout helpers & shared components 5. Buttons 6. Promo bar 7. Header / navigation 8. Hero 9. Learning path 10. AI features 11. AI chat 12. Rewards 13. Gallery 14. Reviews 15. FAQ 16. Footer 17. Sub-page (legal) layout 18. Responsive 19. Reduced motion ========================================================================== */ /* 1. Design tokens ------------------------------------------------------- */ :root { /* Brand */ --green: #09ad1a; --green-700: #078014; --green-900: #0a5d12; --ink: #16331a; --ink-900: #0c2410; --yellow: #fed40b; /* Surfaces */ --white: #ffffff; --soft: #f6fbf4; --soft-2: #eef7ec; --mint: #eaf7e8; --hero-top: #f3fbef; /* Text */ --text: #16331a; --text-2: #43583f; --text-3: #4a5f47; --muted: #5a6e57; --muted-2: #6a7d68; --muted-3: #7d8c79; --nav-link: #3c5440; /* Lines */ --line: #ecf3ec; --line-2: #ebf1ea; --line-3: #e2ece2; --card-line: #e8f1e6; /* Accent dots (feature icons) */ --c-cyan: #16b3c4; --c-pink: #ef5da8; --c-orange: #f5871f; --c-red: #e23b2e; --c-teal: #0e98a8; --c-amber: #e8a900; /* Shadows */ --shadow-sm: 0 2px 10px rgba(9, 173, 26, 0.08); --shadow-card: 0 18px 36px -28px rgba(11, 60, 16, 0.4); --shadow-phone: 0 38px 70px -30px rgba(11, 60, 16, 0.55); --shadow-float: 0 16px 30px -14px rgba(11, 60, 16, 0.3); /* Metrics */ --maxw: 1200px; --radius-pill: 999px; --nav-h: 67px; --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* 2. Base / reset -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--white); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `clip` prevents horizontal scroll WITHOUT turning into a scroll container (which `hidden` would, breaking position:sticky + window.scrollY). */ overflow-x: clip; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } button { font-family: inherit; } h1, h2, h3, h4 { margin: 0; } :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top 0.2s ease; } .skip-link:focus { top: 12px; } /* i18n: show only the active language for dual-language blocks ([data-t]). Default hides English; switching flips it. Inline elements use [data-en] swapped via JS instead (see main.js). */ html[data-lang="vi"] [data-t="en"], html[data-lang="en"] [data-t="vi"] { display: none !important; } /* 3. Animations ---------------------------------------------------------- */ @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes floaty2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes spin-slow { to { transform: rotate(360deg); } } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-reveal-delay="1"] { transition-delay: 0.08s; } .reveal[data-reveal-delay="2"] { transition-delay: 0.16s; } .reveal[data-reveal-delay="3"] { transition-delay: 0.24s; } /* 4. Layout helpers & shared components ---------------------------------- */ .container { max-width: var(--maxw); margin: 0 auto; padding-left: 22px; padding-right: 22px; } .section { padding-block: clamp(60px, 8vw, 104px); position: relative; } .section--soft { background: var(--soft); overflow: hidden; } .section-head { max-width: 720px; } .section-head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 800; font-size: 13px; letter-spacing: 1.2px; margin-bottom: 14px; text-transform: uppercase; } .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--yellow); flex: 0 0 auto; } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ""; width: 24px; height: 2px; background: var(--yellow); flex: 0 0 auto; } .h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; } .lead { font-size: clamp(15px, 1.3vw, 18px); color: var(--text-3); line-height: 1.6; margin: 16px 0 0; } .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--mint); color: var(--green); font-weight: 800; font-size: 12.5px; letter-spacing: 0.6px; padding: 6px 13px; border-radius: var(--radius-pill); text-transform: uppercase; } /* Phone mockup frame (reused across sections) */ .phone { background: var(--ink); border-radius: 38px; padding: 9px; box-shadow: var(--shadow-phone); } .phone img { width: 100%; border-radius: 30px; background: var(--mint); object-fit: cover; object-position: top center; } .phone-halo { position: relative; } .phone-halo::before { content: ""; position: absolute; inset: -22px; border-radius: 46px; background: radial-gradient(circle at 50% 40%, #e3f5df, transparent 70%); } .phone-halo--yellow::before { background: radial-gradient(circle at 50% 40%, #fff2c9, transparent 70%); } .phone-halo .phone { position: relative; } .media-col { flex: 1 1 280px; min-width: 260px; display: flex; justify-content: center; } .text-col { flex: 1 1 380px; min-width: 280px; } /* 5. Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-weight: 700; border-radius: 11px; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .btn--primary { background: var(--green); color: #fff; padding: 11px 20px; font-size: 15px; box-shadow: 0 4px 14px rgba(9, 173, 26, 0.3); } .btn--primary:hover { background: var(--green-700); transform: translateY(-1px); } /* App store buttons */ .store-btns { display: flex; flex-wrap: wrap; gap: 13px; } .store-btn { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 13px; transition: background-color 0.2s ease, transform 0.2s ease; } .store-btn:hover { background: var(--ink-900); transform: translateY(-2px); } .store-btn svg { flex: 0 0 auto; } .store-btn .store-label { display: flex; flex-direction: column; line-height: 1.12; } .store-btn .store-label small { font-size: 10.5px; opacity: 0.82; } .store-btn .store-label strong { font-size: 16px; font-weight: 700; } /* 6. Promo bar ----------------------------------------------------------- */ .promo { background: var(--yellow); color: var(--ink); text-align: center; font-weight: 700; font-size: 13.5px; padding: 9px 16px; letter-spacing: 0.2px; } .promo[hidden] { display: none; } /* 7. Header / navigation ------------------------------------------------- */ /* The

is the sticky element: its containing block is (tall), so it stays pinned for the whole page. (Making the inner .nav sticky fails because its parent

is only nav-height tall.) */ .site-header { position: sticky; top: 0; z-index: 50; } .nav { backdrop-filter: saturate(140%) blur(10px); background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--line); transition: box-shadow 0.25s ease, background-color 0.25s ease; } .nav.is-scrolled { box-shadow: 0 10px 30px -22px rgba(11, 60, 16, 0.5); background: rgba(255, 255, 255, 0.94); } .nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 13px 22px; display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .brand__mark { width: 40px; height: 40px; border-radius: 12px; background: var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(9, 173, 26, 0.28); } .brand__mark img { width: 34px; height: 34px; object-fit: contain; } .brand__name { font-weight: 800; font-size: 19px; letter-spacing: -0.3px; } .brand__name span { color: var(--green); } .nav__links { margin-left: 10px; display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 600; color: var(--nav-link); } .nav__links a { transition: color 0.18s ease; } .nav__links a:hover { color: var(--green); } .nav__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* Language switcher */ .lang { position: relative; } .lang__toggle { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line-3); background: #fff; border-radius: 10px; padding: 8px 11px; font-weight: 700; font-size: 13.5px; color: var(--nav-link); cursor: pointer; transition: border-color 0.18s ease; } .lang__toggle:hover { border-color: #bfe0bf; } .lang__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #8aa08c; } .lang__menu { position: absolute; top: 46px; right: 0; background: #fff; border: 1px solid #e7efe6; border-radius: 13px; box-shadow: 0 18px 38px -18px rgba(11, 60, 16, 0.4); padding: 6px; min-width: 170px; z-index: 60; display: none; } .lang__menu.is-open { display: block; } .lang__option { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 10px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; } .lang__option:hover { background: #f1f8ef; } .flag { width: 22px; height: 15px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .flag--vi { background: #da251d; } .flag--vi i { width: 9px; height: 9px; background: var(--yellow); clip-path: polygon( 50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } .flag--en { background: #1f3a93; font-size: 8px; color: #fff; font-weight: 800; } /* Mobile menu */ .nav__burger { margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line-3); background: #fff; border-radius: 11px; display: none; flex-direction: column; gap: 4px; align-items: center; justify-content: center; cursor: pointer; } .nav__burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } .nav__mobile { display: none; border-top: 1px solid var(--line); background: #fff; padding: 14px 22px; flex-direction: column; gap: 4px; font-weight: 600; color: var(--nav-link); } .nav__mobile.is-open { display: flex; } .nav__mobile a { padding: 11px 6px; } .nav__mobile-langs { display: flex; gap: 8px; margin-top: 8px; } .nav__mobile-langs button { flex: 1; border: 1px solid var(--line-3); background: #fff; border-radius: 10px; padding: 10px; font-weight: 700; font-size: 13.5px; color: var(--nav-link); cursor: pointer; } .nav__mobile-langs button[aria-pressed="true"] { background: #f1f8ef; color: var(--text); } .nav__mobile .btn--primary { margin-top: 8px; padding: 13px; } /* 8. Hero ---------------------------------------------------------------- */ .hero { position: relative; background: linear-gradient(180deg, var(--hero-top) 0%, #fff 80%); overflow: hidden; } .hero__orb { position: absolute; top: -200px; right: -180px; width: 640px; height: 640px; border-radius: 50%; background: conic-gradient( from 0deg, rgba(254, 212, 11, 0.14), rgba(9, 173, 26, 0.09), rgba(254, 212, 11, 0.14), rgba(9, 173, 26, 0.09), rgba(254, 212, 11, 0.14) ); filter: blur(2px); animation: spin-slow 90s linear infinite; pointer-events: none; } .hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(38px, 5vw, 76px) 22px clamp(48px, 6vw, 82px); display: flex; flex-wrap: wrap; align-items: center; gap: 40px; } .hero__copy { flex: 1 1 430px; min-width: 300px; } .tag { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d8ead8; color: var(--green); font-weight: 700; font-size: 12.5px; letter-spacing: 0.4px; padding: 7px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); text-transform: uppercase; } .tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); } .hero__title { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -1.2px; margin: 18px 0 0; } .hero__sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 520px; margin: 18px 0 0; } .hero .store-btns { margin-top: 30px; } .social-proof { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .avatars { display: flex; } .avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; } .avatars span + span { margin-left: -10px; } .avatars .a1 { background: #bfe6c2; } .avatars .a2 { background: var(--yellow); } .avatars .a3 { background: #7cc47f; } .avatars .a4 { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .social-proof p { font-size: 13.5px; color: var(--text-2); line-height: 1.4; margin: 0; } .social-proof strong { color: var(--ink); } .hero__art { flex: 1 1 360px; min-width: 300px; display: flex; justify-content: center; position: relative; } .hero__art-inner { position: relative; width: min(420px, 90vw); padding: 10px 0 8px; } .hero__glow { position: absolute; inset: 2% 6%; border-radius: 50%; background: radial-gradient(circle at 55% 45%, #fff, #eaf7e8 60%, #dff0dc); box-shadow: 0 30px 60px -30px rgba(9, 173, 26, 0.4); z-index: 0; } .hero__phone { position: relative; z-index: 2; width: 236px; margin: 0 auto; transform: rotate(2.5deg); } .hero__phone img { aspect-ratio: 9 / 19.2; } .hero__mascot { position: absolute; left: -2%; bottom: -2%; width: 165px; z-index: 3; filter: drop-shadow(0 16px 22px rgba(11, 60, 16, 0.3)); } .float-card { position: absolute; background: #fff; border-radius: 15px; padding: 10px 13px; box-shadow: var(--shadow-float); z-index: 4; } .float-card--streak { top: 4%; right: -2%; display: flex; align-items: center; gap: 9px; animation: floaty 5s ease-in-out infinite; } .float-card--streak img { width: 26px; height: auto; } .float-card--streak .num { display: block; font-size: 16px; font-weight: 800; color: var(--ink); } .float-card--streak .cap { font-size: 11.5px; color: var(--muted-2); } .float-card--ai { bottom: 20%; right: -6%; background: var(--green); color: #fff; border-radius: 15px; padding: 11px 14px; box-shadow: 0 16px 30px -12px rgba(9, 173, 26, 0.6); animation: floaty2 6.5s ease-in-out infinite; max-width: 180px; } .float-card--ai .kicker { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #cdeccb; font-weight: 700; margin-bottom: 3px; } .float-card--ai .kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); } .float-card--ai .txt { font-size: 14px; font-weight: 700; line-height: 1.3; } /* 9. Learning path ------------------------------------------------------- */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; margin-top: 44px; } .feature-card { position: relative; background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: 26px 22px; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -28px rgba(11, 60, 16, 0.45); } .feature-card h3 { font-size: 18.5px; font-weight: 800; margin: 18px 0 8px; } .feature-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; } .icon-tile { display: flex; width: 54px; height: 54px; border-radius: 15px; align-items: center; justify-content: center; } .icon-tile--mint { background: var(--mint); font-size: 23px; font-weight: 800; color: var(--green); letter-spacing: -1px; } .icon-tile--amber { background: #fff3c4; } .icon-dots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .icon-dots span { width: 10px; height: 10px; border-radius: 3px; } .icon-pencil { position: relative; width: 16px; height: 24px; background: var(--green); border-radius: 8px; } .icon-pencil::before { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 2px; height: 6px; background: var(--green); } .icon-pencil::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 14px; height: 2px; background: var(--green); border-radius: 2px; } .icon-chat { width: 26px; height: 20px; background: var(--c-amber); border-radius: 8px 8px 8px 2px; } /* "4 parts in each topic" split */ .split { margin-top: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(30px, 5vw, 64px); } .split__phone { flex: 1 1 280px; min-width: 260px; display: flex; justify-content: center; } .split__phone .phone { width: 238px; } .split__phone .phone img { aspect-ratio: 9 / 18.6; } .label-sm { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; margin-bottom: 12px; text-transform: uppercase; } .h3-lg { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; margin: 0 0 20px; } .parts { display: flex; flex-direction: column; gap: 13px; } .part { display: flex; align-items: center; gap: 14px; } .part__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .part__title { font-weight: 700; font-size: 15.5px; } .part__desc { font-size: 13.5px; color: var(--muted-2); } .bg-cyan { background: #e6f9fb; } .bg-pink { background: #fdeaf4; } .bg-orange { background: #fdefe0; } .bg-red { background: #fdeae8; } .glyph-az { font-weight: 800; color: var(--c-teal); font-size: 15px; } .glyph-grammar { width: 18px; height: 14px; border: 2.5px solid var(--c-pink); border-radius: 3px; } .glyph-dialog { width: 18px; height: 15px; background: var(--c-orange); border-radius: 5px 5px 5px 1px; } .glyph-check { width: 11px; height: 18px; border-right: 3px solid var(--c-red); border-bottom: 3px solid var(--c-red); transform: rotate(40deg); margin-top: -3px; } /* 10. AI features -------------------------------------------------------- */ .ring-deco { position: absolute; right: -130px; top: 80px; width: 320px; height: 320px; border-radius: 50%; border: 30px solid rgba(9, 173, 26, 0.05); pointer-events: none; } .feature-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(30px, 5vw, 68px); margin-top: 54px; } .feature-row--reverse { flex-wrap: wrap-reverse; margin-top: clamp(48px, 6vw, 88px); } .feature-row .phone { width: 240px; } .feature-row .phone img { aspect-ratio: 9 / 18.6; } .feature-row h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; margin: 16px 0 14px; } .feature-row p { font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 0 0 22px; max-width: 480px; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3eee1; border-radius: 12px; padding: 11px 15px; font-weight: 600; font-size: 14px; } .chip i { width: 9px; height: 9px; border-radius: 50%; } .dot-green { background: var(--green); } .dot-yellow { background: var(--yellow); } .dot-orange { background: var(--c-orange); } .check-list { display: flex; flex-direction: column; gap: 12px; } .check-list li { display: flex; gap: 13px; align-items: flex-start; list-style: none; } .check-list { margin: 0; padding: 0; } .check-list .tick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .check-list .ct { font-size: 14.5px; color: #3d533a; line-height: 1.5; } .check-list .ct b { color: var(--ink); } /* 11. AI chat ------------------------------------------------------------ */ .chat-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px); } .chat-row .media-col { flex: 1 1 300px; } .chat-row .phone { width: 300px; border-radius: 42px; padding: 11px; box-shadow: 0 40px 80px -34px rgba(11, 60, 16, 0.6); } .chat-row .phone img { aspect-ratio: 9 / 19.49; border-radius: 32px; background: #fff; } .chat-row .phone-halo::before { inset: -24px; border-radius: 48px; background: radial-gradient(circle at 50% 40%, #e7f6e4, transparent 70%); } .chat-row h3 { font-size: clamp(22px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.12; margin: 16px 0 14px; } .chat-row > .text-col > p { font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 0 0 24px; max-width: 480px; } .feature-list { display: flex; flex-direction: column; gap: 14px; } .feature-item { display: flex; gap: 15px; align-items: flex-start; } .feature-item__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; } .feature-item h4 { margin: 2px 0 3px; font-size: 17px; font-weight: 800; } .feature-item p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; } .glyph-bubble { width: 20px; height: 16px; background: var(--green); border-radius: 6px 6px 6px 2px; } .glyph-loop { width: 18px; height: 18px; border: 3px solid var(--c-amber); border-radius: 50%; border-right-color: transparent; transform: rotate(-30deg); } .glyph-247 { color: var(--green); font-weight: 800; font-size: 15px; } /* 12. Rewards ------------------------------------------------------------ */ .rewards { background: linear-gradient(180deg, var(--soft), var(--soft-2)); } .rewards .container { max-width: 1140px; } .rewards__grid { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 46px; } .panel { background: #fff; border: 1px solid var(--card-line); border-radius: 24px; padding: 24px; box-shadow: 0 24px 50px -36px rgba(11, 60, 16, 0.5); } .reward-left { flex: 1 1 330px; min-width: 280px; } .reward-right { flex: 1 1 330px; min-width: 280px; display: flex; flex-direction: column; gap: 18px; } .panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .panel__head h3 { font-weight: 800; font-size: 17px; } .panel__head .sub { font-size: 12.5px; color: var(--muted-3); } .badge-gold { background: #fff6d6; color: #b07d00; font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill); } .ladder { display: flex; flex-direction: column; gap: 8px; } .rank { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 13px; } .rank__pos { width: 26px; height: 26px; border-radius: 50%; background: #eef3ee; color: var(--muted-2); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; } .rank__avatar { width: 30px; height: 30px; border-radius: 50%; } .rank__name { flex: 1; font-weight: 600; font-size: 14.5px; color: #3d533a; } .rank__score { font-weight: 700; font-size: 14px; color: var(--muted-2); } .rank--first { background: #fff8e0; border: 1px solid #f5e3a8; } .rank--first .rank__pos { background: var(--yellow); color: #7a5e00; } .rank--first .rank__name { font-weight: 700; color: var(--ink); } .rank--first .rank__score { font-weight: 800; color: #b07d00; } .rank--you { background: var(--mint); border: 1px solid #c5e6c2; margin-top: 4px; } .rank--you .rank__pos { background: var(--green); color: #fff; } .rank--you .rank__avatar { background: #fff; border: 1px solid #d3ead0; display: flex; align-items: center; justify-content: center; } .rank--you .rank__avatar img { width: 26px; height: 26px; object-fit: contain; } .rank--you .rank__name { font-weight: 800; color: var(--green-900); } .rank--you .rank__score { font-weight: 800; color: var(--green); } .av-1 { background: #e98b6b; } .av-2 { background: #7cc4cf; } .av-3 { background: #c8a96b; } .streak-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .streak-head img { width: 48px; height: auto; } .streak-head .big { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--ink); } .streak-head .big span { font-size: 17px; color: #e8480f; } .streak-head .cap { font-size: 13px; color: var(--muted-3); margin-top: 3px; font-weight: 600; } .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; } .week .day { text-align: center; } .week .day .dl { font-size: 10px; color: #9aa89a; margin-bottom: 4px; } .week .day .dc { aspect-ratio: 1; border-radius: 10px; background: var(--mint); display: flex; align-items: center; justify-content: center; } .week .day .dc img { width: 14px; height: auto; } .week .day.today .dc { background: #fff3c4; outline: 2px solid var(--yellow); outline-offset: -2px; } .week .day.today .dc img { width: 16px; } .week .day.off .dc { background: #f1f5f0; } .mini-stats { display: flex; gap: 18px; } .stat-card { flex: 1; border-radius: 24px; padding: 22px; } .stat-card--points { background: linear-gradient(140deg, #fff7df, #ffeeb0); border: 1px solid #f6e4a6; display: flex; flex-direction: column; justify-content: center; } .stat-card--points .n { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--ink); } .stat-card--points .l { font-weight: 700; font-size: 14px; color: #7a5e00; } .stat-card--points .s { font-size: 12px; color: #9a7d1a; margin-top: 4px; } .stat-card--goal { background: #fff; border: 1px solid var(--card-line); display: flex; align-items: center; gap: 14px; box-shadow: 0 18px 40px -32px rgba(11, 60, 16, 0.5); padding: 20px; } .donut { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--green) 0% 80%, #e3eee1 80% 100%); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .donut span { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--green); } .stat-card--goal .gt { font-weight: 800; font-size: 14.5px; line-height: 1.2; } .stat-card--goal .gs { font-size: 12px; color: var(--muted-3); margin-bottom: 3px; } .stat-card--goal .gv { font-size: 13px; color: var(--ink); font-weight: 700; } /* 13. Gallery ------------------------------------------------------------ */ .gallery { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 34px); margin-top: 48px; } .gallery figure { margin: 0; text-align: center; } .gallery .phone { width: 224px; border-radius: 36px; padding: 8px; box-shadow: 0 30px 60px -34px rgba(11, 60, 16, 0.5); } .gallery .phone img { aspect-ratio: 9 / 19.4; border-radius: 29px; } .gallery figure.featured { margin-bottom: clamp(0px, 2vw, 26px); } .gallery figure.featured .phone { width: 236px; border-radius: 38px; padding: 9px; box-shadow: 0 36px 70px -34px rgba(11, 60, 16, 0.55); } .gallery figure.featured .phone img { border-radius: 30px; } .gallery figcaption { font-size: 13.5px; color: var(--muted-2); font-weight: 600; margin-top: 14px; } /* 14. Reviews ------------------------------------------------------------ */ .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 46px; } .review { background: #fff; border: 1px solid var(--line-2); border-radius: 22px; padding: 26px; box-shadow: 0 20px 40px -30px rgba(11, 60, 16, 0.45); } .review .stars { color: var(--yellow); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; } .review blockquote { font-size: 15.5px; line-height: 1.6; color: #234025; margin: 0 0 20px; } .review figcaption { display: flex; align-items: center; gap: 12px; } .review .ava { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; } .review .who { font-weight: 700; font-size: 15px; } .review .where { font-size: 13px; color: var(--muted-2); } .ava-ks { background: #7cc4cf; } .ava-sl { background: #e98b6b; } .ava-dm { background: var(--green); } .stats-bar { margin-top: 24px; background: #fff; border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(24px, 3vw, 34px); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; text-align: center; } .stats-bar .n { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--green); letter-spacing: -1px; } .stats-bar .l { font-size: 13.5px; color: var(--muted); font-weight: 600; } /* 15. FAQ ---------------------------------------------------------------- */ .faq { max-width: 820px; margin: 0 auto; } .faq__head { text-align: center; margin-bottom: 42px; } .faq__list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: #fff; border: 1px solid var(--card-line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px -24px rgba(11, 60, 16, 0.5); } .faq-item__q { width: 100%; border: 0; background: transparent; text-align: left; padding: 20px 22px; display: flex; align-items: center; gap: 16px; cursor: pointer; } .faq-item__q > span:first-child { flex: 1; font-weight: 700; font-size: 16.5px; color: var(--ink); } .faq-item__icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--green); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background-color 0.2s ease, color 0.2s ease; } .faq-item__q[aria-expanded="true"] .faq-item__icon { background: var(--green); color: #fff; } .faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .faq-item__q[aria-expanded="true"] + .faq-item__a { grid-template-rows: 1fr; } .faq-item__a > div { overflow: hidden; } .faq-item__a p { padding: 0 22px 22px; color: #52684e; font-size: 15px; line-height: 1.6; margin: 0; } /* 16. Footer ------------------------------------------------------------- */ .footer { background: var(--ink-900); color: #cfe2cd; padding: clamp(56px, 7vw, 92px) 22px 36px; position: relative; overflow: hidden; } .footer__ring { position: absolute; left: 50%; top: -120px; transform: translateX(-50%); width: 560px; height: 560px; border-radius: 50%; border: 40px solid rgba(254, 212, 11, 0.04); pointer-events: none; } .footer__inner { max-width: 1100px; margin: 0 auto; position: relative; } .cta { background: linear-gradient(120deg, var(--green), var(--green-900)); border-radius: 30px; padding: clamp(30px, 4vw, 52px); display: flex; flex-wrap: wrap; align-items: center; gap: 30px; justify-content: space-between; overflow: hidden; position: relative; } .cta::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, 0.07); } .cta__copy { flex: 1 1 320px; min-width: 260px; position: relative; } .cta__copy h2 { color: #fff; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; } .cta__copy p { color: #d7f2d3; font-size: 16px; margin: 12px 0 0; } .cta .store-btns { margin-top: 24px; } .cta__mascot { flex: 0 0 auto; position: relative; } .cta__mascot img { width: clamp(150px, 20vw, 210px); filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.3)); } .footer__cols { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; margin-top: 54px; } .footer__brand { flex: 1 1 260px; min-width: 230px; } .footer__brand .brand { margin-bottom: 14px; } .footer__brand .brand__mark { width: 38px; height: 38px; border-radius: 11px; box-shadow: none; } .footer__brand .brand__mark img { width: 32px; height: 32px; } .footer__brand .brand__name { font-size: 18px; color: #fff; } .footer__brand .brand__name span { color: var(--yellow); } .footer__brand p { font-size: 14px; line-height: 1.6; color: #9fc0a0; max-width: 300px; margin: 0; } .footer__brand .langs { font-size: 13px; color: #7fa382; margin-top: 16px; } .footer__nav { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 48px; } .footer__nav nav { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; } .footer__nav h3 { color: #fff; font-weight: 700; font-size: 14.5px; margin-bottom: 3px; } .footer__nav a { color: #cfe2cd; transition: color 0.18s ease; } .footer__nav a:hover { color: #fff; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 40px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: #7fa382; } .footer__bottom .made { display: inline-flex; align-items: center; gap: 7px; } /* 16b. Back-to-top button ------------------------------------------------ */ .back-to-top { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 26px -8px rgba(9, 173, 26, 0.55); z-index: 45; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.92); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--green-700); transform: translateY(-3px); } .back-to-top svg { width: 22px; height: 22px; } /* 17. Sub-page (legal) layout -------------------------------------------- */ .legal { padding: clamp(48px, 6vw, 88px) 22px clamp(40px, 5vw, 72px); background: linear-gradient(180deg, var(--hero-top) 0%, #fff 40%); } .legal__inner { max-width: 820px; margin: 0 auto; } .legal h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 14px 0 10px; } .legal .updated { color: var(--muted); font-size: 14px; margin: 0 0 36px; } .legal h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.4px; margin: 36px 0 12px; } .legal h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; } .legal p, .legal li { color: var(--text-3); font-size: 16px; line-height: 1.75; } .legal ul, .legal ol { padding-left: 22px; } .legal a { color: var(--green); font-weight: 600; } .legal a:hover { text-decoration: underline; } .placeholder-note { background: #fff8e0; border: 1px solid #f5e3a8; color: #7a5e00; border-radius: 14px; padding: 16px 18px; font-size: 14.5px; line-height: 1.6; margin: 0 0 32px; } /* Legal header: back link + effective/updated dates */ .legal__back { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; font-size: 14px; } .legal__back:hover { text-decoration: underline; } .legal__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 36px; padding: 15px 20px; background: var(--mint); border: 1px solid var(--card-line); border-radius: 14px; } .legal__meta div { font-size: 14.5px; color: var(--text-3); } .legal__meta strong { color: var(--ink); font-weight: 700; } /* Intro lead paragraph */ .legal__intro { font-size: 17px; color: var(--text-2); line-height: 1.7; } /* "What's included" list rendered as a card */ ul.legal__toc { list-style: none; margin: 14px 0 8px; padding: 22px 26px; background: var(--soft); border: 1px solid var(--card-line); border-radius: 16px; columns: 2; column-gap: 32px; } ul.legal__toc li { position: relative; padding-left: 22px; margin: 8px 0; break-inside: avoid; font-size: 15px; color: var(--text-3); } ul.legal__toc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } /* Tables */ .legal__table { overflow-x: auto; margin: 20px 0; border: 1px solid var(--card-line); border-radius: 14px; -webkit-overflow-scrolling: touch; } .legal table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; } .legal th, .legal td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.6; } .legal thead th { background: var(--mint); color: var(--ink); font-weight: 700; font-size: 14px; } .legal td:first-child { font-weight: 600; color: var(--ink); width: 34%; } .legal tbody tr:nth-child(even) td { background: #fafdf9; } .legal tbody tr:last-child td { border-bottom: 0; } /* Note / callout boxes */ .note { background: #eef7ec; border: 1px solid #cfe8cb; border-left: 4px solid var(--green); border-radius: 12px; padding: 14px 18px; margin: 20px 0; font-size: 15px; line-height: 1.7; color: var(--text-3); } .note strong { color: var(--ink); } .note--warn { background: #fff8e0; border-color: #f5e3a8; border-left-color: #e8a900; } .note--warn strong { color: #7a5e00; } /* Account-action highlight (e.g. delete-account path) */ .legal__path { display: inline-block; background: var(--mint); border: 1px solid var(--card-line); border-radius: 10px; padding: 8px 14px; font-weight: 700; color: var(--ink); font-size: 15px; } /* Copyright line at the end of a legal doc */ .legal__copyright { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); } @media (max-width: 560px) { ul.legal__toc { columns: 1; padding: 18px 20px; } .legal td:first-child { width: auto; } } /* 18. Responsive --------------------------------------------------------- */ @media (max-width: 880px) { .nav__links, .nav__actions { display: none; } .nav__burger { display: flex; } .hero__art { order: 2; } .float-card--ai { right: 0; } .float-card--streak { right: 2%; } .mini-stats { flex-direction: column; } } @media (max-width: 560px) { .hero__inner { gap: 28px; } .store-btn { flex: 1 1 auto; } .footer__nav { gap: 30px; } } /* 19. Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }