/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4 Hallmark · macrostructure: Workbench · genre: modern-minimal · theme: GitLunex "Mailbox" (custom, brand-locked) · tone: technical · anchor hue: electric-blue #1a5fef (light) / moonlight #5aa2ff (dark) =========================================================================== GitLunex landing — re-themed to match the app's "Mailbox" design system: a clean, light, airy surface language (soft blue-white base, white cards, hairline borders, soft shadows, an electric-blue brand accent + iridescent gradient). Light is the default; the dark palette mirrors the app 1:1 and is toggled via . Token NAMES are shared across themes so every rule re-themes for free — only the VALUES change. =========================================================================== */ /* ---------------------------------------------------- tokens · LIGHT (default) */ :root { --paper: #eef2fb; /* app base — soft blue-white */ --surface: #ffffff; /* cards float over the paper */ --surface-2: #f6f8fe; /* subtly raised inset panels */ --inset: rgba(17, 24, 39, 0.035); --line: rgba(17, 24, 39, 0.08); --line-2: rgba(17, 24, 39, 0.14); --fg: #414a63; /* slate body */ --fg-strong: #0b1220; /* near-black ink for headings */ --muted: #6b7280; --accent: #1a5fef; /* electric blue — the brand */ --accent-hover: #1148c9; --accent-tint: rgba(26, 95, 239, 0.1); --accent-ink: #ffffff; /* text on a solid accent fill */ /* iridescent gradient (blue → cyan → violet), studied from the app mesh */ --grad: linear-gradient(100deg, #1a5fef 0%, #22a7f0 46%, #7c5cff 100%); --grad-soft: linear-gradient(135deg, rgba(26, 95, 239, 0.14), rgba(124, 92, 255, 0.14)); --shadow-elev: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px -1px rgba(16, 24, 40, 0.08); --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 34px -14px rgba(16, 24, 40, 0.2); --shadow-pop: 0 10px 30px -8px rgba(16, 24, 40, 0.22); /* animated mesh — very subtle in light so text stays crisp on white */ --mesh: radial-gradient(46% 52% at 16% 12%, rgba(26, 95, 239, 0.12), transparent 72%), radial-gradient(40% 46% at 62% 6%, rgba(34, 167, 240, 0.08), transparent 70%), radial-gradient(52% 58% at 88% 90%, rgba(124, 92, 255, 0.09), transparent 72%); --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --maxw: 1180px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease: cubic-bezier(0.22, 1, 0.36, 1); --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; color-scheme: light; } /* ---------------------------------------------------- tokens · DARK (mirrors app) */ :root[data-theme="dark"] { --paper: #0e1020; --surface: rgba(255, 255, 255, 0.05); --surface-2: rgba(255, 255, 255, 0.07); --inset: rgba(0, 0, 0, 0.24); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16); --fg: #c9d1e4; --fg-strong: #f2f5fc; --muted: #8b95b0; --accent: #5aa2ff; /* moonlight blue — the logo tip */ --accent-hover: #7cb5ff; --accent-tint: rgba(90, 162, 255, 0.18); --accent-ink: #0e1020; --grad: linear-gradient(100deg, #5aa2ff 0%, #22a7f0 46%, #9a7bff 100%); --grad-soft: linear-gradient(135deg, rgba(90, 162, 255, 0.18), rgba(154, 123, 255, 0.16)); --shadow-elev: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px -2px rgba(0, 0, 0, 0.55); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 40px -16px rgba(0, 0, 0, 0.7); --shadow-pop: 0 14px 40px -10px rgba(0, 0, 0, 0.72); --mesh: radial-gradient(46% 52% at 16% 12%, rgba(59, 130, 246, 0.24), transparent 70%), radial-gradient(40% 46% at 62% 6%, rgba(34, 167, 240, 0.14), transparent 68%), radial-gradient(52% 58% at 88% 90%, rgba(124, 92, 255, 0.18), transparent 70%); color-scheme: dark; } /* ---------------------------------------------------- base */ * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--fg); font-family: var(--font); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Inter's refined letterforms — matches the app's calmer read. */ font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { color: var(--fg-strong); font-weight: 700; letter-spacing: -0.02em; margin: 0; } code { font-family: var(--mono); font-size: 0.86em; color: var(--accent); background: var(--accent-tint); padding: 0.12em 0.42em; border-radius: 6px; } ::selection { background: var(--accent-tint); color: var(--fg-strong); } /* ---------------------------------------------------- signature mesh backdrop A fixed, slowly-drifting gradient mesh — the app's living-backdrop cue. */ .bg-field { position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: var(--mesh); animation: mesh-drift 22s ease-in-out infinite alternate; } @keyframes mesh-drift { to { transform: translate3d(3%, -3%, 0) scale(1.12); } } /* ---------------------------------------------------- layout primitives */ main { display: block; } .section { max-width: var(--maxw); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.15rem, 4vw, 2rem); } .section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .section__title { font-size: clamp(1.7rem, 3.4vw, 2.55rem); line-height: 1.1; letter-spacing: -0.03em; overflow-wrap: anywhere; } .section__lead { margin: 1.1rem 0 0; max-width: 44rem; color: var(--muted); font-size: 1.06rem; } /* section band — a faint tinted stripe to break the white rhythm */ .band { position: relative; max-width: none; background: var(--surface-2); border-block: 1px solid var(--line); } .band > * { max-width: var(--maxw); margin-inline: auto; } /* ---------------------------------------------------- buttons */ .btn { --btn-bg: var(--surface); --btn-fg: var(--fg-strong); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.72rem 1.3rem; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; white-space: nowrap; transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.18s var(--ease-out), border-color 0.18s var(--ease-out); } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-elev); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 18px -8px var(--accent); } .btn--primary:hover { background: var(--accent-hover); box-shadow: 0 10px 24px -8px var(--accent); } .btn--ghost { background: transparent; border-color: var(--line-2); } .btn--lg { padding: 0.92rem 1.7rem; font-size: 1.02rem; } /* ---------------------------------------------------- nav */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; /* Full-bleed bar: the element spans the viewport so the scrolled background + hairline border run edge-to-edge, while the content is inset to the same max-width grid as the sections below (centre gutter + section padding). */ padding: 0.7rem calc(max(0px, (100% - var(--maxw)) / 2) + clamp(1.15rem, 4vw, 2rem)); transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); border-bottom: 1px solid transparent; } .nav.is-scrolled { background: color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line); } .nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; } .brand-mark { display: inline-flex; color: var(--fg-strong); } .brand-mark .mark-tip { fill: var(--accent); } .brand-name { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; } .brand-name .b-git { color: var(--fg-strong); } .brand-name .b-lunex { color: var(--accent); } .nav__links { display: flex; gap: 0.35rem; margin-left: 1.4rem; margin-right: auto; } .nav__links a { position: relative; padding: 0.4rem 0.75rem; border-radius: var(--radius); color: var(--muted); font-size: 0.92rem; font-weight: 500; transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out); } .nav__links a:hover { color: var(--fg-strong); background: var(--inset); } .nav__links a.is-active { color: var(--accent); } .nav__links a.is-active::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.1rem; height: 2px; border-radius: 2px; background: var(--accent); } .nav__actions { display: flex; align-items: center; gap: 0.55rem; } /* icon button (theme toggle) */ .icon-btn { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg-strong); cursor: pointer; transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out), color 0.18s var(--ease-out); } .icon-btn:hover { transform: translateY(-1px); color: var(--accent); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .icon-btn .i-sun { display: none; } .icon-btn .i-moon { display: block; } :root[data-theme="dark"] .icon-btn .i-sun { display: block; } :root[data-theme="dark"] .icon-btn .i-moon { display: none; } /* language pills */ .lang { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); } .lang__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.6rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out); } .lang__btn:hover { color: var(--fg-strong); } .lang__btn.is-active { background: var(--accent-tint); color: var(--accent); } .lang__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .flag { display: inline-flex; border-radius: 3px; overflow: hidden; } /* ---------------------------------------------------- hero */ .hero { max-width: var(--maxw); margin-inline: auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.15rem, 4vw, 2rem) clamp(2rem, 5vw, 3.5rem); text-align: center; } .hero__inner { max-width: 50rem; margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.3rem; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-elev); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--muted); } .eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } .hero__title { font-size: clamp(2.4rem, 6.4vw, 4.3rem); line-height: 1.03; letter-spacing: -0.045em; overflow-wrap: anywhere; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { margin: 1.4rem auto 0; max-width: 40rem; color: var(--muted); font-size: 1.14rem; } .hero__cta { margin-top: 2rem; display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .hero__meta { margin-top: 1.1rem; color: var(--muted); font-size: 0.9rem; } /* product shot — a real screenshot in a floating card (no fake chrome) */ .hero__shot { position: relative; max-width: 1080px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; } .frame { margin: 0; border: 1px solid var(--line); /* Gentle radius only — the app screenshots are edge-to-edge (title-bar controls sit in the very corners), so a large radius would clip that corner UI, worst on the smaller feature/workspace frames. 10px stays clear at every size while still softening the card. */ border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; } .frame img { width: 100%; height: auto; } .frame--wide { max-width: 100%; } /* soft accent halo behind the hero shot */ .shot-glow { position: absolute; inset: 8% 12% -6%; z-index: -1; background: var(--grad-soft); filter: blur(60px); opacity: 0.8; border-radius: 50%; } .shot-glow--soft { opacity: 0.5; } /* ---------------------------------------------------- built-with marquee */ .strip { border-block: 1px solid var(--line); background: var(--surface-2); overflow: hidden; } .strip__track { display: flex; width: max-content; animation: strip-scroll 34s linear infinite; } .strip__list { display: flex; align-items: center; gap: 2.2rem; margin: 0; padding: 0.95rem 1.1rem; list-style: none; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; } .strip__list li[aria-hidden="true"] { color: var(--accent); } @keyframes strip-scroll { to { transform: translateX(-50%); } } /* ---------------------------------------------------- stats */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: var(--maxw); margin: clamp(3rem, 6vw, 4.5rem) auto; padding: 0 clamp(1.15rem, 4vw, 2rem); } .stat { padding: 1.4rem 1.2rem; border: 1px solid var(--line); background: var(--surface); } .stat:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .stat:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .stat + .stat { border-left: 0; } .stat__num { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; color: var(--fg-strong); } .stat__num span { font-size: 0.5em; font-weight: 600; color: var(--accent); margin-left: 0.15em; } .stat__label { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); line-height: 1.4; } /* ---------------------------------------------------- features (split panels) */ .feature { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(1.8rem, 5vw, 4rem); padding-block: clamp(2.5rem, 5vw, 4rem); } .feature--flip .feature__text { order: 2; } .feature__no { display: inline-block; margin-bottom: 0.9rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; color: var(--accent); padding: 0.2rem 0.55rem; border: 1px solid var(--accent-tint); border-radius: var(--radius-pill); background: var(--accent-tint); } .feature__text h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; } .feature__text > p { margin: 0.9rem 0 0; color: var(--muted); } .ticks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; } .ticks li { position: relative; padding-left: 1.7rem; font-size: 0.96rem; } .ticks li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a5fef' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat; } :root[data-theme="dark"] .ticks li::before { background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235aa2ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat; } .feature__media { margin: 0; min-width: 0; } /* ---------------------------------------------------- workspace band */ .workspace .section__head { margin-inline: auto; text-align: center; max-width: 48rem; } .workspace__media { max-width: 1040px; margin: clamp(2rem, 4vw, 3rem) auto 0; position: relative; } .workspace__keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; max-width: 760px; margin: 2rem auto 0; } .key { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.8rem 0.95rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 0.82rem; color: var(--muted); } .key kbd { font-family: var(--mono); font-size: 0.72rem; padding: 0.15rem 0.4rem; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); color: var(--fg-strong); } .key span { width: 100%; margin-top: 0.15rem; } /* ---------------------------------------------------- toolbox grid */ .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .card { position: relative; padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-elev); transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line-2); } .card__no { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: var(--accent); letter-spacing: 0.1em; } .card h4 { margin: 0.55rem 0 0.4rem; font-size: 1.05rem; } .card p { margin: 0; color: var(--muted); font-size: 0.92rem; } /* ---------------------------------------------------- why band */ .why__inner { max-width: 52rem; } .why__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; } .pt { padding: 1.3rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .pt h4 { font-size: 1rem; } .pt p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.9rem; } /* ---------------------------------------------------- download */ .download .section__head { text-align: center; margin-inline: auto; } .dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .dl-card { position: relative; } .dl-card__trigger { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.3rem 1.35rem; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-elev); color: inherit; font: inherit; cursor: pointer; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } .dl-card__trigger:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); } .dl-card__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dl-card__os { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: var(--accent-tint); color: var(--accent); flex: none; } .dl-card__body { flex: 1; min-width: 0; } .dl-card__body h4 { font-size: 1.08rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .dl-card__ver { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--accent); } .dl-card__body p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.86rem; } .dl-card__go { font-size: 1.2rem; color: var(--muted); transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out); } .dl-card__trigger:hover .dl-card__go { color: var(--accent); transform: translateY(2px); } .dl-card.is-open .dl-card__go { transform: rotate(180deg); } .dl-card.is-unavailable .dl-card__trigger { opacity: 0.55; cursor: not-allowed; } .dl-card__menu { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 20; margin: 0; padding: 0.4rem; list-style: none; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop); } :root[data-theme="dark"] .dl-card__menu { background: #171a2c; } .dl-menu__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: var(--radius); transition: background 0.15s var(--ease-out); } .dl-menu__item:hover { background: var(--accent-tint); } .dl-menu__ext { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--accent); min-width: 3.4rem; } .dl-menu__name { flex: 1; min-width: 0; font-size: 0.86rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-menu__go { color: var(--muted); } .dl-all { text-align: center; margin-top: 2rem; } .dl-all__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent); font-weight: 600; } .dl-all__link:hover { gap: 0.65rem; } .dl-note { margin-top: 1.6rem; text-align: center; font-size: 0.85rem; color: var(--muted); } .dl-note code { font-size: 0.78rem; } /* ---------------------------------------------------- downloads.html archive */ .dlp { max-width: var(--maxw); margin-inline: auto; } .dlp__head { padding-top: clamp(5rem, 10vw, 7rem); } .ver-list { display: grid; gap: 1rem; margin-top: 2.5rem; } .ver__loading, .ver__empty { color: var(--muted); } .ver { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-elev); } .ver__bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); } .ver__num { font-size: 1.2rem; font-family: var(--mono); letter-spacing: -0.01em; } .ver__badge { font-family: var(--font); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); background: var(--accent); padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); } .ver__date { margin-left: auto; font-size: 0.82rem; color: var(--muted); } .ver__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .ver__os-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--fg-strong); } .ver__os-head svg { color: var(--accent); } .ver__assets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .ver__asset { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: 0.84rem; transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out); } .ver__asset:hover { border-color: var(--accent); background: var(--accent-tint); } .ver__ext { font-family: var(--mono); font-weight: 600; color: var(--accent); min-width: 3rem; } .ver__file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .ver__dl { color: var(--muted); } /* ---------------------------------------------------- footer */ .footer { max-width: var(--maxw); margin: 3rem auto 0; padding: 2.5rem clamp(1.15rem, 4vw, 2rem) 3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .footer__brand { display: inline-flex; align-items: center; gap: 0.5rem; } .footer__tag { flex: 1; min-width: 14rem; margin: 0; color: var(--muted); font-size: 0.88rem; } .footer__links { display: flex; gap: 1.2rem; } .footer__links a { color: var(--muted); font-size: 0.9rem; font-weight: 500; } .footer__links a:hover { color: var(--accent); } /* ---------------------------------------------------- reveal + motion */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } /* ---------------------------------------------------- responsive */ @media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature--flip .feature__text { order: 0; } .grid, .why__points, .ver__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .stat { border-radius: 0 !important; } .stat + .stat { border-left: 1px solid var(--line); } .stat:nth-child(3), .stat:nth-child(4) { border-top: 0; } .stat:nth-child(odd) { border-left: 1px solid var(--line); } .workspace__keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .nav__links { display: none; } .hero__title { font-size: clamp(2.1rem, 9vw, 3rem); } } @media (max-width: 540px) { .grid, .why__points, .ver__cols, .dl-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .stat, .stat + .stat { border-left: 1px solid var(--line); } .stat + .stat { border-top: 0; } .footer { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } .bg-field, .strip__track { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } }