/* Reflib — about.reflib.com Design tokens, layout and components for the static marketing site. */ /* ------------------------------------------------------------------ tokens */ :root { --font-latin: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue"; --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"; --font-sans: var(--font-latin), var(--font-cjk), system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --bg: #fbfbfd; --bg-elev: #ffffff; --bg-sunken: #f2f2f5; --text: #1d1d1f; --text-muted: #6e6e73; --text-faint: #8e8e93; --border: rgba(0, 0, 0, 0.09); --border-strong: rgba(0, 0, 0, 0.16); --accent: #5b4bff; --accent-hover: #4a39f0; --accent-soft: rgba(91, 75, 255, 0.09); --accent-2: #0a84ff; --accent-3: #00bfc9; --header-bg: rgba(251, 251, 253, 0.72); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.07); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.1); --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --maxw: 1120px; --header-h: 56px; } html[data-theme="dark"] { --bg: #000000; --bg-elev: #131316; --bg-sunken: #1c1c1f; --text: #f5f5f7; --text-muted: #a1a1a6; --text-faint: #86868b; --border: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.2); --accent: #8a7bff; --accent-hover: #9d90ff; --accent-soft: rgba(138, 123, 255, 0.16); --accent-2: #4aa3ff; --accent-3: #2ad4dc; --header-bg: rgba(0, 0, 0, 0.66); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------- trilingual */ /* All three languages ship in the DOM; CSS reveals one. Without JS the document keeps its served data-lang of "en", so content is never blank. */ html[data-lang="en"] [data-lang]:not([data-lang="en"]), html[data-lang="zh-Hans"] [data-lang]:not([data-lang="zh-Hans"]), html[data-lang="zh-Hant"] [data-lang]:not([data-lang="zh-Hant"]) { display: none !important; } /* "zh" is the bilingual era's value for , and it can still arrive two ways: page HTML cached in a browser, or a cached copy of the old boot.js, which set it unconditionally. Naming the languages to hide rather than the one to keep means either case falls back to Chinese instead of hiding every span on the page. Safe to delete once both have aged out. */ html[data-lang="zh"] [data-lang="en"], html[data-lang="zh"] [data-lang="zh-Hant"] { display: none !important; } /* PingFang SC would render the shared code points with mainland glyph shapes, so the Traditional copy asks for the Hong Kong face first. */ html[data-lang="zh-Hant"] { --font-cjk: "PingFang HK", "PingFang TC", "Microsoft JhengHei", "PingFang SC"; } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.16; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img { max-width: 100%; display: block; } ul, ol { margin: 0; padding-left: 1.35em; } hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; } /* The UA rule for [hidden] is scoped to the HTML namespace, so inline SVG would ignore it. This stylesheet declares no namespace, so it matches. */ [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------------ layout */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .wrap--narrow { max-width: 760px; } .section { padding-block: 88px; } .section--tight { padding-block: 56px; } .section--sunken { background: var(--bg-sunken); } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); } .skip-link:focus { left: 12px; color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ header */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: var(--header-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } .site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 14px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 640; font-size: 17px; letter-spacing: -0.02em; flex: none; } .brand:hover { color: var(--text); } .brand__mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; flex: none; } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; padding: 7px 11px; border-radius: 999px; white-space: nowrap; transition: color 0.16s ease, background 0.16s ease; } .nav a:hover { color: var(--text); background: var(--accent-soft); } .nav a[aria-current="page"] { color: var(--text); font-weight: 600; } .header-tools { display: flex; align-items: center; gap: 6px; margin-left: 6px; flex: none; } .icon-btn { appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text-muted); height: 32px; min-width: 32px; padding-inline: 9px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-elev); } .icon-btn svg { width: 15px; height: 15px; fill: currentColor; } .icon-btn svg[data-icon-globe] { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .nav-toggle { display: none; } /* --------------------------------------------------------- language picker */ /* Three languages need a list rather than a toggle. The menu is hidden by CSS at data-open="false", so it stays shut when main.js never runs. */ .lang-picker { position: relative; flex: none; } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-md); transform: translateY(-6px); opacity: 0; visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .lang-menu[data-open="true"] { transform: none; opacity: 1; visibility: visible; } .lang-menu button { appearance: none; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; text-align: left; padding: 8px 11px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: nowrap; transition: color 0.16s ease, background 0.16s ease; } .lang-menu button:hover { color: var(--text); background: var(--accent-soft); } .lang-menu button[aria-checked="true"] { color: var(--text); font-weight: 600; } .lang-menu button[aria-checked="true"]::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 12px 18px 20px; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; } .nav a { padding: 11px 12px; font-size: 16px; } } /* -------------------------------------------------------------------- hero */ .hero { position: relative; padding-block: 108px 76px; text-align: center; overflow: hidden; } .hero__glow { position: absolute; inset: -30% -10% auto; height: 620px; pointer-events: none; z-index: 0; background: radial-gradient(42% 52% at 26% 34%, rgba(91, 75, 255, 0.3) 0%, transparent 70%), radial-gradient(38% 48% at 72% 26%, rgba(10, 132, 255, 0.26) 0%, transparent 70%), radial-gradient(34% 44% at 50% 62%, rgba(0, 191, 201, 0.2) 0%, transparent 72%); filter: blur(24px); } html[data-theme="dark"] .hero__glow { opacity: 0.72; } .hero > .wrap { position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; padding: 6px 14px; border-radius: 999px; margin-bottom: 24px; } .hero h1 { font-size: clamp(38px, 6.4vw, 68px); letter-spacing: -0.035em; margin-bottom: 22px; } .grad-text { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 48%, var(--accent-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--text-muted); max-width: 660px; margin-inline: auto; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 24px; border-radius: 999px; font-size: 15.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .btn:active { transform: scale(0.975); } .btn--primary { background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(91, 75, 255, 0.28); } .btn--primary:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 6px 22px rgba(91, 75, 255, 0.36); } .btn--ghost { background: var(--bg-elev); color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { color: var(--text); border-color: var(--accent); } /* --------------------------------------------------------- section heading */ .sec-head { max-width: 680px; margin-bottom: 44px; } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.03em; margin-bottom: 14px; } .sec-head p { font-size: 17px; color: var(--text-muted); line-height: 1.6; } .kicker { display: block; font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } /* --------------------------------------------------------------- app cards */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; } .app-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--text); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease; } .app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); color: var(--text); } .app-card__top { display: flex; align-items: center; gap: 14px; } .app-icon { width: 60px; height: 60px; border-radius: 14px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); } .app-icon--lg { width: 104px; height: 104px; border-radius: 24px; box-shadow: var(--shadow-md); } .app-card__name { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; } .app-card__role { font-size: 13.5px; color: var(--text-faint); margin-top: 2px; } .app-card__desc { font-size: 15px; line-height: 1.62; color: var(--text-muted); flex: 1; } .tags { display: flex; flex-wrap: wrap; gap: 7px; } .tag { font-size: 12px; font-weight: 550; color: var(--text-muted); background: var(--bg-sunken); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .tag--accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; } .app-card__more { font-size: 14.5px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; } .app-card:hover .app-card__more { gap: 9px; } .app-card__more span { transition: none; } /* --------------------------------------------------------------- pillars */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } .pillar { padding: 28px 26px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); } .pillar__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; } .pillar__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pillar h3 { font-size: 17.5px; margin-bottom: 9px; } .pillar p { font-size: 14.8px; line-height: 1.62; color: var(--text-muted); } /* --------------------------------------------------------- privacy banner */ .banner { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 60px 48px; text-align: center; color: #fff; background: linear-gradient(125deg, #4a37e0 0%, #2f6bff 52%, #00b3c4 100%); } .banner h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; margin-bottom: 16px; } .banner p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); max-width: 620px; margin-inline: auto; } .banner .btn--ghost { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); color: #fff; backdrop-filter: blur(10px); margin-top: 30px; } .banner .btn--ghost:hover { background: rgba(255, 255, 255, 0.24); border-color: #fff; color: #fff; } .banner__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .banner__facts span { font-size: 13.5px; font-weight: 550; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.22); } /* --------------------------------------------------------- app detail page */ .app-hero { position: relative; padding-block: 68px 52px; overflow: hidden; } .app-hero__inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .app-hero h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.035em; margin-bottom: 12px; } .app-hero .lede { margin-inline: 0; text-align: left; } .meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .chip { font-size: 12.5px; font-weight: 550; color: var(--text-muted); background: var(--bg-elev); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; } .chip strong { color: var(--text); font-weight: 650; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .feature { padding: 22px 24px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); } .feature h3 { font-size: 16.5px; margin-bottom: 8px; display: flex; align-items: baseline; gap: 9px; } .feature h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-3)); flex: none; transform: translateY(-1px); } .feature p { font-size: 14.8px; line-height: 1.62; color: var(--text-muted); } /* Callout — used for privacy notes and honest caveats. */ .callout { display: flex; gap: 16px; padding: 22px 24px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid transparent; } .callout__icon { flex: none; width: 24px; height: 24px; color: var(--accent); } .callout__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .callout h3 { font-size: 16px; margin-bottom: 7px; } .callout p { font-size: 14.8px; line-height: 1.62; color: var(--text-muted); } .callout--warn { background: rgba(255, 159, 10, 0.11); } .callout--warn .callout__icon { color: #c77700; } html[data-theme="dark"] .callout--warn .callout__icon { color: #ffb340; } /* --------------------------------------------------------------- prose/legal */ .prose { font-size: 16.5px; line-height: 1.75; color: var(--text); } .prose h2 { font-size: 25px; letter-spacing: -0.025em; margin: 52px 0 16px; scroll-margin-top: calc(var(--header-h) + 24px); } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 18.5px; margin: 32px 0 10px; } .prose p { margin: 0 0 16px; color: var(--text-muted); } .prose li { margin-bottom: 9px; color: var(--text-muted); } .prose ul, .prose ol { margin: 0 0 18px; } .prose strong { color: var(--text); font-weight: 620; } .prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-sunken); border: 1px solid var(--border); padding: 1.5px 6px; border-radius: 6px; color: var(--text); } .page-head { padding-block: 68px 34px; } .page-head h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.035em; margin-bottom: 14px; } .page-head .lede { margin-inline: 0; } .updated { font-size: 14px; color: var(--text-faint); margin-top: 18px; font-variant-numeric: tabular-nums; } /* Table of contents for the long legal pages. */ .toc { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 26px; margin-bottom: 44px; } .toc h2 { font-size: 13px !important; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px !important; } .toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 30px; } .toc li { margin-bottom: 7px; font-size: 15px; break-inside: avoid; } @media (max-width: 620px) { .toc ol { columns: 1; } } /* ------------------------------------------------------------------ tables */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 20px; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 14.8px; min-width: 620px; } th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.55; } th { background: var(--bg-sunken); font-weight: 620; color: var(--text); white-space: nowrap; } td { color: var(--text-muted); } tbody tr:last-child td { border-bottom: 0; } td strong { color: var(--text); font-weight: 600; } /* --------------------------------------------------------------------- faq */ .faq { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elev); overflow: hidden; } .faq details { border-bottom: 1px solid var(--border); } .faq details:last-child { border-bottom: 0; } .faq summary { cursor: pointer; padding: 18px 24px; font-size: 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 14px; transition: background 0.16s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { background: var(--accent-soft); } .faq summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; flex: none; } .faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq__body { padding: 0 24px 20px; font-size: 15px; line-height: 1.68; color: var(--text-muted); } .faq__body p + p { margin-top: 12px; } /* --------------------------------------------------- company fact list */ .facts { margin: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .facts > div { display: grid; grid-template-columns: 168px 1fr; gap: 6px 20px; padding: 14px 22px; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.6; } .facts > div:last-child { border-bottom: 0; } .facts dt { color: var(--text-faint); font-weight: 550; } .facts dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; } .facts dd a { font-weight: 550; } @media (max-width: 620px) { .facts > div { grid-template-columns: 1fr; padding: 14px 18px; } .facts dt { font-size: 13px; } } /* ---------------------------------------------------------------- contacts */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .contact-card { padding: 24px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); } .contact-card h3 { font-size: 16px; margin-bottom: 7px; } .contact-card p { font-size: 14.5px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; } .contact-card a { font-size: 15px; font-weight: 600; word-break: break-all; } /* Two numbers, one per audience — used wherever a phone is listed. */ .phone-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .phone-list dt, .phone-list__label { display: block; font-size: 12.5px; font-weight: 550; color: var(--text-faint); } .phone-list a { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ footer */ .site-footer { border-top: 1px solid var(--border); padding-block: 54px 40px; background: var(--bg); } .footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; margin-bottom: 40px; } @media (max-width: 780px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 30px; } } .footer-about p { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin-top: 14px; max-width: 300px; } .footer-col h4 { font-size: 12.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 9px; } .footer-col a { font-size: 14.5px; color: var(--text-muted); } .footer-col a:hover { color: var(--accent); } .footer-col .footer-tag { display: block; font-size: 12px; color: var(--text-faint); } /* A grid rather than a wrapping flex row: the columns then collapse at the breakpoint below, where the address also stops being right-aligned. A flex row wrapped as soon as the two blocks stopped fitting, which left the address alone on a second line, still right-aligned, against empty space. */ /* The copyright column is sized to its content and the address takes what is left, so a tight window wraps the address — which reads fine — rather than breaking "© 2026 MNV LIMITED. All rights reserved." across two lines. */ .footer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 28px; align-items: start; padding-top: 26px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.6; color: var(--text-faint); } .footer-legal { display: flex; flex-direction: column; gap: 3px; } .footer-bottom address { font-style: normal; text-align: right; text-wrap: pretty; } /* 920px, not the 860px used elsewhere: it is the width at which the English address stops fitting beside the copyright. Stacking the two left-aligned keeps each on one line instead of wrapping the address against the margin. */ @media (max-width: 920px) { .footer-bottom { grid-template-columns: minmax(0, 1fr); } .footer-bottom address { text-align: left; } } /* ---------------------------------------------------------------- reveal */ /* Scoped to html.js so a failed or blocked main.js leaves the content visible rather than stuck at opacity 0. */ html.js .reveal { opacity: 0; transform: translateY(18px); } html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } html.js .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ mobile */ @media (max-width: 640px) { body { font-size: 16px; } .section { padding-block: 64px; } .hero { padding-block: 72px 56px; } .banner { padding: 44px 26px; border-radius: var(--r-lg); } .app-grid { grid-template-columns: 1fr; } .app-hero__inner { gap: 22px; } .app-icon--lg { width: 84px; height: 84px; border-radius: 20px; } } @media print { .site-header, .site-footer, .hero__glow, .header-tools { display: none !important; } body { background: #fff; color: #000; } }