/* NS Office — landing page Ngôn ngữ thị giác: "trang giấy gấp mép" (motif logo brand/logo/glyph.svg) lặp lại làm hình khối thẻ tải về + gạch đầu dòng, thay cho icon/emoji rời. Màu: xem brand/BRAND.md mục (d) — token UI thật sống ở ColorTok, đây là một tập màu CỐ ĐỊNH riêng cho landing (không phải theme app). Nền sáng TRUNG TÍNH có chủ đích (review R1 mục 18): không ngả kem/beige — teal là accent DUY NHẤT, tránh trúng cliché "nền cream + accent ấm" bị cấm trong brief thiết kế. Font Inter/JetBrains Mono nạp qua ở (không @import trong CSS — review R1 mục 16, tránh chặn render thêm một round-trip). */ :root { --bg: #f9f9f9; --bg-raised: #ffffff; --bg-code: #eeeeee; --ink: #1b1b1b; --ink-soft: #52524b; --ink-faint: #83837a; --accent: #006a63; --accent-fold: #7ed6cc; --accent-ink: #ffffff; --border: #e8e8e8; --border-strong: #bec9c7; --shadow: 0 18px 40px -24px rgba(27, 27, 27, 0.35); --font-display: "Inter", "SF Pro Display", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --measure: 1040px; --fold: 26px; } @media (prefers-color-scheme: dark) { :root { --bg: #131313; --bg-raised: #1c1c1a; --bg-code: #1f1f1c; --ink: #ececE7; --ink-soft: #b7b7ae; --ink-faint: #83837a; --accent: #7ed6cc; --accent-fold: #006a63; --accent-ink: #082220; --border: #2b2b28; --border-strong: #3d3d38; --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.6); } } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 28px; } /* ---------- header ---------- */ .site-header { padding: 22px 0; border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand-mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink); } .brand-mark svg { width: 28px; height: 28px; } .header-cta { font-size: 0.92rem; font-weight: 600; text-decoration: none; color: var(--accent); border-bottom: 1px solid transparent; } .header-cta:hover { border-bottom-color: var(--accent); } /* ---------- hero ---------- */ .hero { padding: 84px 0 96px; position: relative; overflow: hidden; } /* Mặc định: MỘT cột (block) — review R1 mục 1. Grid 2 cột chỉ bật từ 860px; thiếu media query gỡ làm cột chữ chỉ còn 54px trên điện thoại 390px và tiêu đề bị overflow:hidden cắt chữ. */ .hero .wrap { display: block; } @media (min-width: 860px) { .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: center; } } .hero-copy { max-width: 640px; } .hero-lockup { width: 220px; height: auto; margin-bottom: 36px; } .hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.15rem, 4.4vw + 0.6rem, 3.4rem); line-height: 1.08; letter-spacing: -0.022em; margin: 0 0 20px; } .hero-sub { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 10px; max-width: 52ch; } .hero-meta { font-size: 0.95rem; color: var(--ink-faint); margin: 0 0 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 3px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { color: var(--ink); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* Glyph trang-gấp-mép đứng SẠCH: một lớp lệch nhẹ phía sau làm chiều sâu, KHÔNG phải ba lớp "bóng ma" rối mắt (review R1 mục 20 — controller chụp màn hình bắt được). */ .hero-stack { position: relative; height: 240px; display: none; } .hero-stack svg { position: absolute; width: 168px; height: 168px; } .hero-stack svg:nth-child(1) { top: 18px; left: 18px; opacity: 0.14; } .hero-stack svg:nth-child(2) { top: 0; left: 0; opacity: 1; } @media (min-width: 860px) { .hero-stack { display: block; } } /* ---------- section shell ---------- */ section { padding: 64px 0; border-top: 1px solid var(--border); } .eyebrow { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; } .section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; margin: 0 0 14px; } .section-lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 36px; } /* ---------- download cards: folded-corner sheets ---------- */ .downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 760px) { .downloads { grid-template-columns: 1fr; } } .sheet { position: relative; background: var(--bg-raised); border: 1px solid var(--border); padding: 26px 24px 24px; clip-path: polygon( 0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100% ); } .sheet::after { content: ""; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold); background: linear-gradient(135deg, transparent 50%, var(--accent-fold) 50%); } .sheet.is-detected { border-color: var(--accent); box-shadow: var(--shadow); } .sheet-os { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; margin: 0 0 4px; } .sheet-req { font-size: 0.88rem; color: var(--ink-faint); margin: 0 0 18px; } .sheet-file { display: block; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); background: var(--bg-code); border: 1px solid var(--border); padding: 8px 10px; margin: 0 0 16px; /* review R1 mục 19: word-break:break-all bẻ giữa từ ("tar.g / z") — giữ tên file nguyên dòng, cuộn ngang trong đúng ô của nó thay vì gãy. */ white-space: nowrap; overflow-x: auto; } .sheet .btn { width: 100%; justify-content: center; } .detected-tag { display: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; } .sheet.is-detected .detected-tag { display: block; } /* ---------- install steps ---------- */ .install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } @media (max-width: 760px) { .install-grid { grid-template-columns: 1fr; } } .install-os h3 { font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 14px; } .install-os ol { margin: 0; padding-left: 0; list-style: none; counter-reset: step; } .install-os li { counter-increment: step; position: relative; padding-left: 34px; margin-bottom: 14px; font-size: 0.94rem; color: var(--ink-soft); } .install-os li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border: 1px solid var(--border-strong); color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.72rem; display: flex; align-items: center; justify-content: center; } .install-os code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-code); padding: 1px 5px; border: 1px solid var(--border); /* review R1 mục 11: chống tràn ngang ở ≤360px (lệnh dài, path Windows) */ overflow-wrap: anywhere; } /* ---------- feature list ---------- */ .feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; } @media (max-width: 640px) { .feature-list { grid-template-columns: 1fr; } } .feature-list li { position: relative; padding-left: 30px; font-size: 0.98rem; } .feature-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: var(--accent); clip-path: polygon(0 0, 60% 0, 100% 40%, 100% 100%, 0 100%); } .feature-list li::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 6px; background: var(--accent-fold); clip-path: polygon(0 0, 100% 0, 100% 100%); } /* ---------- transparency + contact ---------- */ .data-box { background: var(--bg-raised); border: 1px solid var(--border); padding: 22px 24px; } .data-box p { margin: 0 0 12px; color: var(--ink-soft); } .data-box p:last-child { margin-bottom: 0; } .data-box code { font-family: var(--font-mono); font-size: 0.86em; background: var(--bg-code); padding: 1px 5px; border: 1px solid var(--border); overflow-wrap: anywhere; } .contact-card { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding: 24px 0 0; } .contact-card p { color: var(--ink-soft); max-width: 52ch; margin: 6px 0 0; } /* ---------- footer ---------- */ .site-footer { padding: 32px 0 48px; border-top: 1px solid var(--border); color: var(--ink-faint); font-size: 0.85rem; } @media (prefers-reduced-motion: no-preference) { .btn { transition: filter 0.15s ease, border-color 0.15s ease, color 0.15s ease; } } /* hai bản lockup (chữ tối / chữ sáng) — CSS chọn theo prefers-color-scheme, path SVG giữ NGUYÊN VĂN như brand/logo/lockup{,-dark}.svg */ .lockup-dark { display: none; } @media (prefers-color-scheme: dark) { .lockup-light { display: none; } .lockup-dark { display: block; } }