/* ========================================================================== Lingito — landing page styles Plain CSS. Theme + accent colours live in :root custom properties below, so you can re-skin the whole page from one place. A dark variant is available by adding data-theme="midnight" to the element. ========================================================================== */ :root { /* Brand / accent — change these two to re-skin */ --brand: #25D47C; --accent: #FF4D8D; /* Ivory (default) theme */ --bg: #F4F0E7; --ink: #211C18; --muted: #6E665C; --panel: #FBF9F4; --chip: #FFFFFF; --nav-bg: rgba(244, 240, 231, 0.72); --line: rgba(33, 28, 24, 0.10); --line-strong: #c9c2b4; --uc-bg: #FFFFFF; --dl-bg: linear-gradient(135deg, #FFFFFF, #F0EDE5); --token-bg: var(--brand); --token-ink: #fff; --maxw: 1180px; } html[data-theme="midnight"] { --bg: #13160F; --ink: #F2EEE3; --muted: #9E9A88; --panel: #1B1E16; --chip: rgba(255, 255, 255, 0.05); --nav-bg: rgba(19, 22, 15, 0.72); --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.22); --uc-bg: #1B1E16; --dl-bg: linear-gradient(135deg, #1C1F17, #14170F); } /* ----- Base ----- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; scroll-behavior: smooth; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ::selection { background: var(--brand); color: #fff; } .container { max-width: var(--maxw); margin: 0 auto; padding-left: clamp(18px, 5vw, 40px); padding-right: clamp(18px, 5vw, 40px); } .section { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); } .section__title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.5px; margin: 0 0 clamp(26px, 3.5vw, 40px); max-width: 18em; text-wrap: balance; } .eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 10px; } .eyebrow--brand { color: var(--brand); } .eyebrow--accent { color: var(--accent); } /* ----- Buttons / pills ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 99px; cursor: pointer; } .btn--solid { background: var(--ink); color: var(--bg); padding: 11px 20px; font-size: 14px; white-space: nowrap; } .pill { display: inline-flex; align-items: center; gap: 9px; background: var(--chip); border: 1px solid var(--line); border-radius: 99px; padding: 6px 15px 6px 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; } .pill__dot { width: 9px; height: 9px; border-radius: 99px; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); } /* ----- Nav ----- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid var(--line); } .nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 12px clamp(18px, 5vw, 40px); display: flex; align-items: center; gap: 16px; } .nav__spacer { flex: 1 1 auto; } .brand { display: inline-flex; align-items: center; gap: 11px; }.brand__icon { width: 70px; height: 70px; border-radius: 18px; box-shadow: 0 3px 10px rgba(0,0,0,0.12); } .brand__name { font-family: 'Pattaya', cursive; font-size: 48px; line-height: 1; color: var(--ink); padding-top: 5px; } /* ----- Language switcher ----- */ .lang-switch { position: relative; } .lang-switch__btn { display: flex; align-items: center; gap: 8px; background: var(--chip); border: 1px solid var(--line); border-radius: 99px; padding: 7px 12px 7px 8px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); } .lang-flag { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 230px; background: var(--chip); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.18); padding: 7px; max-height: 60vh; overflow-y: auto; z-index: 60; } .lang-menu[hidden] { display: none; } .lang-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 11px; padding: 9px 10px; cursor: pointer; font-family: inherit; color: var(--ink); } .lang-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .lang-item[aria-selected="true"] { background: color-mix(in srgb, var(--brand) 13%, transparent); } .lang-item__text { display: flex; flex-direction: column; line-height: 1.25; } .lang-item__text strong { font-size: 13.5px; font-weight: 700; } .lang-item__text small { font-size: 11px; opacity: .55; } /* ----- Hero ----- */ .hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 6vw, 76px) clamp(18px, 5vw, 40px) clamp(20px, 4vw, 40px); } .hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 64px); } .hero__text { flex: 1 1 380px; min-width: 0; } .hero__title { font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: clamp(38px, 6.4vw, 66px); line-height: 1.08; letter-spacing: -0.5px; margin: 22px 0 24px; text-wrap: balance; } .title-keep { white-space: nowrap; } .title-highlight { display: inline-block; font-family: 'Pattaya', cursive; font-size: 1.05em; font-weight: 400; line-height: .92; color: var(--accent); letter-spacing: 0; } .hero__sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--muted); max-width: 30em; margin: 0 0 30px; text-wrap: pretty; } .hero__visual { flex: 1 1 360px; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; } .hero__halo { position: absolute; width: min(92%, 460px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand) 30%, transparent) 0%, color-mix(in srgb, var(--brand) 14%, transparent) 55%, transparent 71%); } .hero__robot { position: relative; width: min(78%, 400px); height: auto; filter: drop-shadow(0 22px 34px rgba(0,0,0,0.20)); } /* ----- Store badges ----- */ .store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .store-badge { display: inline-flex; align-items: center; gap: 11px; background: var(--ink); color: var(--bg); padding: 13px 20px; border-radius: 14px; } .store-badge__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .store-badge__text small { font-size: 10.5px; opacity: .7; letter-spacing: .4px; } .store-badge__text strong { font-size: 16px; font-weight: 700; } .store-badge__mark { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; } /* ----- Stats ----- */ .stats { display: flex; flex-wrap: wrap; gap: 14px 0; width: min(var(--maxw), calc(100% - clamp(36px, 10vw, 80px))); margin: clamp(34px, 5vw, 56px) auto 0; padding: 30px clamp(8px, 3vw, 28px); border: 1px solid var(--line); border-radius: 20px; background: var(--chip); } .stat { flex: 1 1 160px; text-align: center; padding: 4px 10px; border-left: 1px solid var(--line); } .stat:first-child { border-left: 0; } .stat__value { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--brand); line-height: 1; } .stat__label { font-size: 13px; color: var(--muted); margin-top: 6px; font-weight: 600; } /* ----- Gallery ----- */ .gallery { padding: clamp(22px, 4vw, 46px) clamp(18px, 5vw, 40px) clamp(20px, 4vw, 40px); } .gallery__scroll { max-width: var(--maxw); margin: 0 auto; display: flex; gap: clamp(14px, 1.8vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px clamp(18px, 5vw, 40px) 18px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .gallery__scroll::-webkit-scrollbar { height: 8px; } .gallery__scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; } .gallery__scroll::-webkit-scrollbar-track { background: transparent; } .shot { flex: 0 0 auto; width: clamp(205px, 50vw, 268px); margin: 0; scroll-snap-align: start; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 16px 38px rgba(0,0,0,0.16); } .shot img { width: 100%; height: auto; } /* ----- Features ----- */ .features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: clamp(12px, 1.6vw, 18px); } .feature { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px 26px; display: flex; flex-direction: column; min-height: 178px; } .feature__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-weight: 800; font-size: 16px; margin-bottom: 16px; } .feature h3 { font-size: 18.5px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.2px; } .feature p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; } /* ----- Use cases ----- */ .usecases__grid { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 22px); } .usecase { flex: 1 1 320px; min-width: 0; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--uc-bg); padding: clamp(26px, 3vw, 38px); min-height: 230px; } .usecase h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; margin: 0 0 12px; letter-spacing: -0.4px; max-width: 11em; } .usecase p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; max-width: 24em; text-wrap: pretty; } .usecase__illustration { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 18px; box-shadow: 0 12px 26px rgba(0,0,0,0.14); } /* ----- Languages ----- */ .languages { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .languages__inner { text-align: center; } .languages .section__title { margin-left: auto; margin-right: auto; margin-bottom: 8px; max-width: none; } .languages__lead { font-size: 15.5px; color: var(--muted); margin: 0 auto clamp(28px, 3.5vw, 40px); max-width: 34em; line-height: 1.6; } .lang-tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .lang-token { display: inline-flex; align-items: center; gap: 9px; background: var(--chip); border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px 8px 9px; font-size: 14px; font-weight: 700; } /* ----- Download ----- */ .download__card { position: relative; overflow: hidden; border-radius: 30px; background: var(--dl-bg); border: 1px solid var(--line); padding: clamp(30px, 4.5vw, 60px); display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 56px); align-items: center; justify-content: center; } .download__text { flex: 1 1 320px; min-width: 0; } .download__brand-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .download__icon { width: 104px; height: 104px; border-radius: 28px; box-shadow: 0 16px 34px rgba(0,0,0,0.22); } .download__brand { font-family: 'Pattaya', cursive; font-size: clamp(48px, 6vw, 72px); font-weight: 400; color: var(--ink); letter-spacing: 0; line-height: .95; } .download__title { font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.08; color: var(--ink); margin: 0 0 14px; letter-spacing: -0.5px; max-width: 18em; text-wrap: balance; } .download__text p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; max-width: 26em; } .qr-row { flex: 0 0 auto; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .qr-card { background: #fff; border-radius: 22px; padding: 18px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,0.14); } .qr { width: 150px; height: 150px; } .qr-card__label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #211C18; margin-top: 12px; } .qr-card__icon { width: 18px; height: 18px; object-fit: contain; filter: invert(1); } /* ----- Footer ----- */ .footer { border-top: 1px solid var(--line); background: var(--panel); } .footer__inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); } .footer__brand { flex: 1 1 280px; min-width: 0; } .footer__brand .brand { margin-bottom: 14px; } .footer__signature { font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; font-size: 18px; font-weight: 700; color: var(--muted); margin: 0 0 6px; } .footer__note { font-size: 13px; color: var(--muted); margin: 0; } .footer__links { display: flex; flex-direction: column; gap: 12px; } .footer__col-title { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--muted); opacity: .7; margin-bottom: 2px; } .footer__links a { font-size: 14.5px; font-weight: 600; white-space: nowrap; } .footer__bar { border-top: 1px solid var(--line); } .footer__bar-inner { padding-top: 18px; padding-bottom: 18px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; } /* ----- Privacy policy ----- */ .policy__hero { padding: clamp(44px, 7vw, 84px) 0 clamp(28px, 5vw, 52px); border-bottom: 1px solid var(--line); } .policy__hero-inner { max-width: 900px; } .policy__title { font-size: clamp(38px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.5px; margin: 22px 0 18px; font-weight: 800; } .policy__intro { max-width: 42em; margin: 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; color: var(--muted); text-wrap: pretty; } .policy__date { margin: 20px 0 0; font-size: 13.5px; font-weight: 700; color: var(--muted); } .policy__body { padding: clamp(34px, 6vw, 72px) 0; } .policy__content { max-width: 900px; } .policy-section { padding: 0 0 clamp(24px, 4vw, 38px); margin: 0 0 clamp(24px, 4vw, 38px); border-bottom: 1px solid var(--line); } .policy-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .policy-section h2 { font-size: clamp(22px, 2.7vw, 30px); line-height: 1.18; letter-spacing: -0.3px; margin: 0 0 14px; font-weight: 800; } .policy-section p { margin: 0 0 14px; max-width: 58em; font-size: 16px; line-height: 1.7; color: var(--muted); } .policy-section p:last-child { margin-bottom: 0; } .policy-section ul { margin: 0 0 16px; padding-left: 22px; color: var(--muted); } .policy-section li { margin: 0 0 9px; font-size: 16px; line-height: 1.65; } .policy-section li:last-child { margin-bottom: 0; } .policy-section a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 55%, transparent); text-underline-offset: 3px; } .policy-section strong { color: var(--ink); } .policy--support .policy__hero { padding-bottom: 0; border-bottom: 0; } .policy--support .policy__title { font-size: clamp(30px, 4vw, 44px); margin-bottom: 0; } .policy--support .policy__body { padding-top: clamp(18px, 3vw, 30px); } /* ----- Small screens ----- */ @media (max-width: 600px) { .brand__icon { width: 46px; height: 46px; } .brand__name { font-size: 32px; } .hero { padding-bottom: 8px; } .hero__grid { gap: 14px; } .hero__visual { min-height: 280px; padding-top: 10px; } .hero__robot { width: min(66%, 270px); } .gallery { padding-top: 10px; } .stat { border-left: 0; } .qr-row { display: none; } .lang-switch__label { display: none; } .lang-switch__btn { padding: 7px; } }