/* ========================================================================== Papeer — landing · dark futuristic academic theme ========================================================================== */ /* ---------- tokens ---------- */ :root { --bg: #0a0c12; --bg-soft: #0e1119; --bg-card: rgba(255, 255, 255, 0.035); --line: rgba(255, 255, 255, 0.08); --line-soft: rgba(255, 255, 255, 0.05); --text: #e8eaf2; --muted: #9aa0b4; --dim: #7e8496; /* AA ≥4.5:1 on --bg */ --dim-2: #767d92; /* darkest helper text, ~4.5:1 on --bg */ --violet: #7c5cff; --cyan: #46e0c0; --grad: linear-gradient(115deg, #7c5cff 0%, #5f7dff 45%, #46e0c0 100%); /* Darkened variant for buttons: white text passes WCAG AA (≥4.5:1) on every stop. */ --grad-btn: linear-gradient(115deg, #6a4bff 0%, #4656d8 45%, #1c7d68 100%); --radius: 18px; --radius-sm: 12px; --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --header-h: 72px; } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; min-height: 100vh; } /* grain texture */ body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 9s steps(6) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } } ::selection { background: rgba(124, 92, 255, 0.45); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(124,92,255,.5), rgba(70,224,192,.5)); border-radius: 8px; border: 2px solid var(--bg); } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img, svg { display: block; } .container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; } .container--narrow { width: min(860px, calc(100% - 48px)); } .section { padding: clamp(72px, 10vw, 130px) 0; position: relative; z-index: 2; } .section__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.55rem, 3.4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 18px; text-wrap: balance; } .section__sub { color: var(--muted); max-width: 640px; font-size: clamp(0.95rem, 1.4vw, 1.08rem); margin-bottom: 48px; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- reveal on scroll ---------- */ /* Hidden only when JS is available (.js on ); without JS everything stays visible. */ .js .reveal, .js .reveal-group > * { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--rd, 0s); } .reveal.is-in, .reveal-group > *.is-in { opacity: 1; transform: none; /* Once revealed, drop the stagger delay so later hover/state transitions are instant. */ transition-delay: 0s; } /* ---------- header ---------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease; border-bottom: 1px solid transparent; } .header.is-scrolled { background: rgba(10, 12, 18, 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line-soft); } .header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; } .logo__mark { width: 30px; height: 30px; } .nav { display: flex; gap: 6px; } .nav__link { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 0.92rem; font-weight: 500; transition: color 0.25s, background 0.25s; } .nav__link:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); } .header__actions { display: flex; align-items: center; gap: 14px; } .header__repo { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.9rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); transition: color 0.25s, border-color 0.25s, box-shadow 0.25s; } .header__repo:hover { color: var(--text); border-color: rgba(124, 92, 255, 0.55); box-shadow: 0 0 18px rgba(124,92,255,.18); } .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); } .burger span { height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease-out), opacity 0.3s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em; overflow: hidden; overflow-wrap: break-word; transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.15s ease-out; will-change: transform; } .btn__label { position: relative; z-index: 2; } .btn--primary { color: #fff; background: var(--grad-btn); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); box-shadow: 0 6px 26px rgba(124, 92, 255, 0.35), inset 0 1px 0 rgba(255,255,255,.22); } .btn--primary:hover { box-shadow: 0 10px 42px rgba(124, 92, 255, 0.55), 0 0 60px rgba(70, 224, 192, 0.18), inset 0 1px 0 rgba(255,255,255,.22); } .btn--glow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 250% 100%; background-position: 180% 0; transition: background-position 0.9s ease; z-index: 1; } .btn--glow:hover::before { background-position: -80% 0; } .btn--ghost { color: var(--text); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); } .btn--ghost:hover { border-color: rgba(70, 224, 192, 0.5); box-shadow: 0 0 24px rgba(70, 224, 192, 0.14); } .btn--small { padding: 9px 20px; font-size: 0.88rem; } .btn--big { padding: 19px 44px; font-size: 1.08rem; } .btn--block { width: 100%; } .btn .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transform: scale(0); animation: ripple 0.65s ease-out forwards; pointer-events: none; z-index: 1; } @keyframes ripple { to { transform: scale(3.2); opacity: 0; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 48px) 0 90px; overflow: hidden; z-index: 2; } .hero__bg { position: absolute; inset: 0; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; } .blob--violet { width: 560px; height: 560px; top: -140px; right: -80px; background: radial-gradient(circle, rgba(124, 92, 255, 0.5), transparent 65%); animation: drift 16s ease-in-out infinite alternate; } .blob--cyan { width: 480px; height: 480px; bottom: -160px; left: -120px; background: radial-gradient(circle, rgba(70, 224, 192, 0.32), transparent 65%); animation: drift 20s ease-in-out infinite alternate-reverse; } @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(50px, 40px) scale(1.12); } } .hero__glow { position: absolute; width: 620px; height: 620px; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, 0.16), rgba(70, 224, 192, 0.07) 45%, transparent 68%); transform: translate(-50%, -50%); transition: opacity 0.4s; opacity: 0; } .hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(124, 92, 255, 0.4); background: rgba(124, 92, 255, 0.09); font-size: 0.82rem; font-weight: 500; color: #cfc4ff; margin-bottom: 26px; } .badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3.7rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 24px; text-wrap: balance; } .hero__sub { color: var(--muted); font-size: clamp(0.98rem, 1.5vw, 1.12rem); max-width: 580px; margin-bottom: 36px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } .hero__micro { color: var(--dim); font-size: 0.85rem; } /* social-proof badges (shields.io) next to the hero */ .shields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .shields a { display: inline-flex; border-radius: 5px; transition: transform 0.25s var(--ease-out); } .shields a:hover { transform: translateY(-2px); } .shields img { height: 22px; width: auto; } @media (max-width: 1020px) { .shields { justify-content: center; } } .hero__scrollhint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--dim); animation: bob 2.2s ease-in-out infinite; transition: color .25s; } .hero__scrollhint:hover { color: var(--cyan); } @keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ---------- hero visual: app window ---------- */ .hero__visual { position: relative; display: flex; flex-direction: column; gap: 18px; perspective: 1200px; } .appwin { border-radius: var(--radius); border: 1px solid var(--line); background: rgba(14, 17, 25, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 92, 255, 0.08), 0 0 90px rgba(124, 92, 255, 0.12); overflow: hidden; transform-style: preserve-3d; transition: transform 0.18s ease-out; animation: floaty 7s ease-in-out infinite; } @keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } .appwin__bar, .term__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.02); } .tl { width: 11px; height: 11px; border-radius: 50%; flex: none; } .tl--r { background: #ff5f57; } .tl--y { background: #febc2e; } .tl--g { background: #28c840; } .appwin__title, .term__title { margin-left: 10px; font-size: 0.74rem; color: var(--dim); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* real app header (logo · research switcher · settings) */ .appwin__header { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); background: rgba(30, 41, 59, 0.55); } .appwin__brand { display: flex; align-items: center; gap: 7px; flex: none; } .appwin__logo-mark { width: 20px; height: 20px; } .appwin__logo-text { font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em; background: linear-gradient(135deg, #7c5cff, #46e0c0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .appwin__switch { margin-inline: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 8px; font-size: 0.76rem; font-weight: 500; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); white-space: nowrap; } .appwin__switch svg { color: var(--cyan); } .appwin__chev { color: var(--dim); } .appwin__gear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); background: rgba(255, 255, 255, 0.04); } .appwin__body { display: grid; grid-template-columns: 128px 1fr; min-height: 300px; } .appwin__side { border-right: 1px solid var(--line-soft); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; } .appwin__side-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 0.78rem; color: var(--muted); } .appwin__side-item svg { flex: none; } .appwin__side-item--active { background: rgba(124, 92, 255, 0.14); color: #d8ceff; } .appwin__badge { margin-left: auto; font-size: 0.6rem; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px; background: rgba(124, 92, 255, 0.85); color: #fff; } .appwin__main { min-width: 0; display: flex; flex-direction: column; } /* status segments */ .appwin__segs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); } .appwin__seg { font-size: 0.68rem; font-weight: 500; color: var(--muted); padding: 4px 9px; border-radius: 7px; background: rgba(255, 255, 255, 0.03); white-space: nowrap; } .appwin__seg i { font-style: normal; color: var(--dim); margin-left: 3px; } .appwin__seg--active { background: rgba(124, 92, 255, 0.9); color: #fff; } .appwin__seg--active i { color: rgba(255, 255, 255, 0.7); } /* split: list (left) + detail (right) */ .appwin__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); flex: 1; min-height: 0; } .appwin__list { padding: 8px 10px 10px; border-right: 1px solid var(--line-soft); min-width: 0; } .appwin__thead, .appwin__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 30px 32px; align-items: center; gap: 6px; } .appwin__thead { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); padding: 4px 8px 6px; } .appwin__thead span:nth-child(1) { text-align: center; } .appwin__thead span:nth-child(3), .appwin__thead span:nth-child(4) { text-align: right; } .appwin__row { padding: 7px 8px; border-radius: 8px; box-shadow: inset 0 0 0 0 transparent; transition: background .3s; } .appwin__row + .appwin__row { margin-top: 2px; } .appwin__row--sel { background: rgba(124, 92, 255, 0.10); box-shadow: inset 3px 0 0 0 #7c5cff; } .appwin__row--rej { opacity: 0.45; } .appwin__row-title { font-size: 0.76rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appwin__row-year, .appwin__row-cit { font-size: 0.66rem; font-family: var(--font-mono); color: var(--dim); text-align: right; } .appwin__hint { margin-top: 8px; font-size: 0.62rem; color: var(--dim); font-family: var(--font-mono); text-align: right; padding: 8px 8px 2px; border-top: 1px dashed var(--line-soft); } /* round integer score tag (0–10) */ .appwin__score { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; justify-self: center; border-radius: 50%; font-size: 0.72rem; font-weight: 700; } .appwin__score--hi { background: rgba(34, 197, 94, 0.16); color: #4ade80; } /* score ≥ 5 */ .appwin__score--mid { background: rgba(245, 158, 11, 0.16); color: #fbbf24; } /* score 3–4 */ .appwin__score--low { background: rgba(148, 163, 184, 0.16); color: #94a3b8; }/* score < 3 */ /* detail panel */ .appwin__detail { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .appwin__detail-title { font-size: 0.86rem; font-weight: 600; line-height: 1.3; color: var(--text); } .appwin__detail-meta { font-size: 0.66rem; color: var(--dim); font-family: var(--font-mono); line-height: 1.4; } .appwin__detail-actions { display: flex; gap: 6px; } .appwin__act { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; padding: 5px 10px; border-radius: 7px; } .appwin__act--approve { background: rgba(34, 197, 94, 0.16); color: #4ade80; } .appwin__act--reject { background: rgba(255, 255, 255, 0.04); color: var(--muted); border: 1px solid var(--line-soft); } .appwin__annot { border-top: 1px solid var(--line-soft); padding-top: 10px; } .appwin__annot-h { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin-bottom: 5px; } .appwin__annot p { font-size: 0.72rem; line-height: 1.55; color: var(--muted); } /* shared with kbd-demo (step 3) — do not repurpose */ .appwin__row-meta { font-size: 0.68rem; color: var(--dim); font-family: var(--font-mono); } .score { flex: none; font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem; padding: 4px 8px; border-radius: 7px; min-width: 40px; text-align: center; } .score--hi { background: rgba(70, 224, 160, 0.14); color: #4fe3a4; border: 1px solid rgba(70, 224, 160, 0.35); } .score--mid { background: rgba(255, 199, 102, 0.12); color: #ffc766; border: 1px solid rgba(255, 199, 102, 0.3); } .score--low { background: rgba(255, 107, 107, 0.12); color: #ff8a8a; border: 1px solid rgba(255, 107, 107, 0.3); } .st { flex: none; font-size: 0.66rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em; } .st--acc { background: rgba(70, 224, 160, 0.14); color: #4fe3a4; } .st--rej { background: rgba(255, 107, 107, 0.13); color: #ff8a8a; } /* ---------- terminal ---------- */ .term { border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(9, 11, 17, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); overflow: hidden; animation: floaty 8s ease-in-out 1.2s infinite; } .term__restart { margin-left: auto; color: var(--dim); padding: 4px; border-radius: 6px; transition: color .25s, background .25s, transform .45s var(--ease-out); } .term__restart:hover { color: var(--cyan); background: rgba(70,224,192,.08); } .term__restart:active { transform: rotate(-180deg); } .term__body { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.75; padding: 14px 16px; height: 168px; overflow: hidden; color: #aeb6cf; } .term__line { display: flex; gap: 10px; white-space: pre-wrap; } .term__line > span:last-child { min-width: 0; } .term__time { color: var(--dim-2); flex: none; } .t-cyan { color: #46e0c0; } .t-violet { color: #a58cff; } .t-green { color: #4fe3a4; } .t-yellow { color: #ffc766; } .t-red { color: #ff8a8a; } .t-dim { color: var(--dim-2); } .t-topic { color: var(--text); font-weight: 600; } .t-strong { font-weight: 600; } /* search-log meta strip (status · stats · sources) */ .term__meta { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; } .term__statusrow { display: flex; align-items: center; gap: 10px; } .term__tag { font-size: 0.66rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.02em; } .term__tag--done { background: rgba(34, 197, 94, 0.16); color: #4ade80; } .term__events { font-size: 0.68rem; color: var(--dim); font-family: var(--font-mono); } .term__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .term__stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-soft); } .term__stat-num { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1; } .term__stat-num--warn { color: #fbbf24; } .term__stat-lbl { font-size: 0.56rem; color: var(--dim); line-height: 1.25; } .term__sources { display: flex; flex-wrap: wrap; gap: 6px; } .term__src { font-size: 0.64rem; font-family: var(--font-mono); color: #4ade80; padding: 3px 8px; border-radius: 6px; background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.22); } .term__src i { font-style: normal; color: #86efac; font-weight: 600; margin-left: 4px; } .term__progress { height: 4px; background: rgba(255, 255, 255, 0.06); } .term__progress-fill { height: 100%; width: 0%; background: var(--grad); box-shadow: 0 0 12px rgba(124, 92, 255, 0.6); transition: width 0.45s ease; } /* ---------- stats ---------- */ .stats { padding-top: 0; } .stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .stat { text-align: center; padding: 30px 14px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .stat:hover { border-color: rgba(124, 92, 255, 0.4); box-shadow: 0 0 34px rgba(124, 92, 255, 0.1); transform: translateY(-3px); } .stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; margin-bottom: 10px; } .stat__label { color: var(--muted); font-size: 0.84rem; line-height: 1.45; } /* ---------- pain ---------- */ .pain { background: linear-gradient(180deg, transparent, rgba(124, 92, 255, 0.045) 30%, rgba(124, 92, 255, 0.045) 70%, transparent); } .pain__heading { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--dim); text-align: center; margin-bottom: 48px; } .pain__wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 52px; } .pain__quote { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.02); position: relative; overflow: hidden; } .pain__quote::after { content: ""; position: absolute; inset: auto -30% -55% auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 107, 0.09), transparent 70%); } .pain__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.15; color: #ff8a8a; margin-bottom: 8px; } .pain__quote p { color: var(--muted); font-size: clamp(0.9rem, 1.3vw, 1rem); } .pain__punch { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2.4vw, 1.7rem); } /* ---------- how ---------- */ .steps { display: flex; flex-direction: column; gap: 26px; margin-top: 48px; } .step { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(26px, 3.6vw, 44px); border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.3s, box-shadow 0.3s; } .step:hover { border-color: rgba(124, 92, 255, 0.35); box-shadow: 0 12px 44px rgba(124, 92, 255, 0.08); } .step__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.9; } .step__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 10px; } .step__text { color: var(--muted); font-size: 0.94rem; } .step > *:nth-child(2) { grid-column: 2; } .step__art, .scorer, .kbd-demo { grid-column: 3; } .step__art { display: flex; flex-direction: column; gap: 10px; } .chip { display: inline-flex; align-items: center; align-self: flex-start; padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; font-family: var(--font-mono); border: 1px solid var(--line); color: var(--muted); } .chip--must { border-color: rgba(70, 224, 160, 0.45); color: #4fe3a4; background: rgba(70, 224, 160, 0.07); } .chip--boost { border-color: rgba(124, 92, 255, 0.5); color: #b7a6ff; background: rgba(124, 92, 255, 0.09); } .filechip { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.025); font-family: var(--font-mono); font-size: 0.8rem; } .filechip svg { color: var(--cyan); flex: none; } .filechip__ok { margin-left: auto; color: #4fe3a4; font-size: 0.7rem; white-space: nowrap; } /* ---------- scoring widget ---------- */ .scorer { border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(9, 11, 17, 0.6); padding: 18px; display: flex; flex-direction: column; gap: 14px; } .scorer__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .scorer__field { display: flex; flex-direction: column; gap: 6px; } .scorer__label { font-size: 0.72rem; color: var(--dim); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .scorer__label em { font-style: normal; text-transform: none; color: var(--dim-2); letter-spacing: 0; } .scorer__input { width: 100%; padding: 10px 13px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; font-size: 0.88rem; transition: border-color .25s, box-shadow .25s; } .scorer__input:focus { outline: none; border-color: rgba(124, 92, 255, 0.6); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15); } .scorer__paper { padding: 12px 14px; border-radius: 9px; border: 1px dashed var(--line); } .scorer__paper-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 3px; } .scorer__paper-meta { font-size: 0.72rem; color: var(--dim); font-family: var(--font-mono); } .scorer__result { display: flex; align-items: center; gap: 14px; } .scorer__bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .scorer__bar-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--grad); box-shadow: 0 0 14px rgba(124, 92, 255, 0.55); transition: width 0.6s var(--ease-out), filter .3s; } .scorer__value { display: flex; align-items: baseline; gap: 2px; } .scorer__value-num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; min-width: 2.6ch; text-align: right; transition: color .3s; } .scorer__value-num.bump { animation: bump 0.4s var(--ease-out); } @keyframes bump { 0% { transform: scale(1.25); } 100% { transform: scale(1); } } .scorer__value-max { color: var(--dim); font-size: 0.85rem; } .scorer__verdict { font-size: 0.8rem; font-weight: 600; min-width: 96px; } /* ---------- keyboard demo ---------- */ .kbd-demo { border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(9, 11, 17, 0.6); overflow: hidden; transition: border-color .3s, box-shadow .3s; } .kbd-demo:hover, .kbd-demo.is-active { border-color: rgba(70, 224, 192, 0.45); box-shadow: 0 0 0 1px rgba(70, 224, 192, 0.15), 0 0 30px rgba(70, 224, 192, 0.07); } .kbd-demo__hint { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; } .kbd-demo__hint-text { font-size: 0.78rem; color: var(--dim); margin-right: 4px; } kbd { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 3px; background: rgba(255, 255, 255, 0.05); color: var(--cyan); } .kbd-demo__reset { margin-left: auto; font-size: 0.74rem; color: var(--dim); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line-soft); transition: color .25s, border-color .25s; } .kbd-demo__reset:hover { color: var(--text); border-color: var(--line); } .kbd-demo__list { list-style: none; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .kbd-demo__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.025); transition: border-color 0.2s, background 0.2s, opacity 0.3s, transform 0.2s; } .kbd-demo__row.is-sel { border-color: rgba(124, 92, 255, 0.55); background: rgba(124, 92, 255, 0.12); } .kbd-demo__row.flash-acc { animation: flashAcc 0.55s ease; } .kbd-demo__row.flash-rej { animation: flashRej 0.55s ease; } @keyframes flashAcc { 0% { background: rgba(70, 224, 160, 0.35); } 100% { background: rgba(124, 92, 255, 0.12); } } @keyframes flashRej { 0% { background: rgba(255, 107, 107, 0.35); } 100% { background: rgba(124, 92, 255, 0.12); } } .kbd-demo__row.is-acc .kbd-demo__title { opacity: 0.6; } .kbd-demo__row.is-rej .kbd-demo__title { opacity: 0.35; text-decoration: line-through; } .kbd-demo__title { flex: 1; min-width: 0; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kbd-demo__status { padding: 10px 16px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); } /* ---------- features ---------- */ .features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; } .features__grid--duo { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; } .fcard { position: relative; padding: 30px 26px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s; } .fcard::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: var(--grad); opacity: 0; transition: opacity 0.35s; } .fcard:hover { transform: translateY(-5px); border-color: rgba(124, 92, 255, 0.4); box-shadow: 0 18px 50px rgba(0,0,0,.4), 0 0 40px rgba(124, 92, 255, 0.1); } .fcard:hover::before { opacity: 1; } .fcard__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; border: 1px solid rgba(124, 92, 255, 0.35); background: rgba(124, 92, 255, 0.1); color: #b7a6ff; margin-bottom: 20px; } .fcard__icon svg { width: 22px; height: 22px; } .fcard__title { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.35; margin-bottom: 12px; } .fcard__text { color: var(--muted); font-size: 0.9rem; } /* ---------- download ---------- */ .os-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 34px; } .os-card { position: relative; padding: 34px 26px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s; } .os-card:hover { transform: translateY(-4px); border-color: rgba(70, 224, 192, 0.35); } .os-card__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%) scale(0.8); padding: 4px 14px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #08110d; background: var(--grad); opacity: 0; transition: opacity 0.4s, transform 0.4s var(--ease-out); pointer-events: none; white-space: nowrap; } .os-card.is-detected { border-color: rgba(124, 92, 255, 0.6); box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.3), 0 0 50px rgba(124, 92, 255, 0.16); animation: detectPulse 3s ease-in-out infinite; } @keyframes detectPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(124,92,255,.3), 0 0 50px rgba(124,92,255,.16); } 50% { box-shadow: 0 0 0 1px rgba(70,224,192,.35), 0 0 60px rgba(70,224,192,.18); } } .os-card.is-detected .os-card__badge { opacity: 1; transform: translateX(-50%) scale(1); } .os-card__icon { width: 62px; height: 62px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 17px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); } .os-card__icon svg { width: 30px; height: 30px; } .os-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: 6px; } .os-card__spec { color: var(--dim); font-size: 0.82rem; margin-bottom: 22px; font-family: var(--font-mono); } /* install notes */ .install { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); overflow: hidden; } .install__toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-weight: 600; font-size: 0.92rem; color: var(--muted); transition: color 0.25s; } .install__toggle:hover { color: var(--text); } .install__toggle svg { transition: transform 0.35s var(--ease-out); } .install__toggle[aria-expanded="true"] svg { transform: rotate(90deg); } .install__body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); } .install__cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding: 4px 20px 22px; } .install__note h4 { font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; margin-bottom: 8px; color: var(--cyan); } .install__note p { color: var(--muted); font-size: 0.84rem; margin-bottom: 12px; } .cmdline { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 8px; border-radius: 9px; border: 1px solid var(--line-soft); background: rgba(9, 11, 17, 0.7); } .cmdline code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.76rem; color: #8be9cb; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } .cmdline code::-webkit-scrollbar { display: none; } .copybtn { flex: none; font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: 7px; border: 1px solid var(--line); color: var(--muted); transition: color 0.25s, border-color 0.25s, background 0.25s; } .copybtn:hover { color: var(--cyan); border-color: rgba(70, 224, 192, 0.5); } .copybtn.is-copied { color: #4fe3a4; border-color: rgba(70, 224, 160, 0.55); background: rgba(70, 224, 160, 0.1); } /* ---------- pricing ---------- */ .pricing { margin-top: clamp(80px, 10vw, 130px); } .pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 46px; align-items: stretch; } .pcard { padding: 36px 32px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; } .pcard--saas { opacity: 0.78; } .pcard--papeer { border-color: transparent; background: linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 0 60px rgba(124, 92, 255, 0.14); } .pcard__glowline { position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); } .pcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; } .pcard__head h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .01em; } .pcard__price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; } .pcard__price span { font-size: 0.82rem; font-weight: 400; color: var(--dim); margin-left: 8px; font-family: var(--font-body); } .pcard--papeer .pcard__price { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pcard--papeer .pcard__price span { -webkit-text-fill-color: var(--dim); } .pcard__list { list-style: none; display: flex; flex-direction: column; gap: 13px; } .pcard__list li { position: relative; padding-left: 30px; color: var(--muted); font-size: 0.92rem; } .pcard__list li::before { position: absolute; left: 0; top: 1px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-size: 0.68rem; font-weight: 700; } .pcard__list li.no::before { content: "✕"; color: #ff8a8a; background: rgba(255, 107, 107, 0.13); } .pcard__list li.yes::before { content: "✓"; color: #4fe3a4; background: rgba(70, 224, 160, 0.13); } .pcard__list li.yes { color: var(--text); } /* ---------- faq ---------- */ .accordion { display: flex; flex-direction: column; gap: 12px; margin-top: 44px; } .acc { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; transition: border-color 0.3s; } .acc.is-open { border-color: rgba(124, 92, 255, 0.4); } .acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px; text-align: left; font-weight: 600; font-size: 0.98rem; transition: color 0.25s; } .acc__head:hover { color: #cfc4ff; } .acc__icon { flex: none; color: var(--dim); transition: transform 0.4s var(--ease-out), color 0.3s; } .acc.is-open .acc__icon { transform: rotate(135deg); color: var(--cyan); } .acc__body { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease-out); } .acc__content { padding: 0 22px 20px; } .acc__content p { color: var(--muted); font-size: 0.92rem; } /* ---------- final ---------- */ .final { text-align: center; overflow: hidden; } .final::before { content: ""; position: absolute; left: 50%; bottom: -220px; transform: translateX(-50%); width: 760px; height: 460px; border-radius: 50%; background: radial-gradient(ellipse, rgba(124, 92, 255, 0.2), rgba(70, 224, 192, 0.08) 50%, transparent 70%); filter: blur(40px); pointer-events: none; } .final__inner { position: relative; } .final__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.25; max-width: 820px; margin: 0 auto 42px; text-wrap: balance; } .final__cta { display: flex; flex-direction: column; align-items: center; gap: 20px; } .final__code-link { color: var(--muted); font-size: 0.94rem; border-bottom: 1px dashed var(--dim); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s; } .final__code-link:hover { color: var(--cyan); border-color: var(--cyan); } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line-soft); padding: 52px 0 44px; position: relative; z-index: 2; background: rgba(9, 11, 17, 0.5); } .footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(26px, 5vw, 60px); align-items: start; } .footer__tag { color: var(--dim); font-size: 0.8rem; margin-top: 12px; line-height: 1.5; } .footer__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; padding-top: 8px; } .footer__nav a { color: var(--muted); font-size: 0.9rem; transition: color 0.25s; } .footer__nav a:hover { color: var(--text); } .footer__meta { text-align: right; color: var(--dim); font-size: 0.82rem; line-height: 1.6; } .footer__ver { display: inline-block; font-family: var(--font-mono); font-size: 0.74rem; padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(124, 92, 255, 0.4); color: #b7a6ff; margin-bottom: 10px; } .footer__made { margin-top: 8px; color: var(--dim-2); font-size: 0.78rem; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 24px); z-index: 200; padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(124, 92, 255, 0.5); background: rgba(16, 19, 28, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 0.86rem; font-weight: 500; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(124, 92, 255, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s var(--ease-out); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ---------- screenshots ---------- */ .shots__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; } .shot { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; transition: border-color 0.3s, transform 0.35s var(--ease-out), box-shadow 0.35s; } .shot:hover { border-color: rgba(124, 92, 255, 0.4); transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(124, 92, 255, 0.08); } .shot--wide { grid-column: 1 / -1; } .shot__frame { display: flex; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.02); } .shot img { width: 100%; height: auto; } .shot__media { display: block; width: 100%; height: auto; background: var(--bg-soft); } .shot__caption { padding: 15px 20px 17px; color: var(--muted); font-size: 0.88rem; } .shot__caption strong { color: var(--text); font-weight: 600; } /* ---------- sticky mobile download button ---------- */ .cta-sticky { display: none; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 16px; z-index: 200; padding: 12px 20px; min-height: 48px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 0.95rem; background: linear-gradient(135deg, var(--violet), var(--cyan)); box-shadow: 0 10px 30px rgba(124, 92, 255, 0.45); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .cta-sticky.is-visible { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 900px) { .cta-sticky { display: inline-flex; } } /* feature card variants: wide LLM card + clickable contribute cards */ .fcard--wide { grid-column: 1 / -1; } .fcard--wide .fcard__text { max-width: 76ch; } .fcard--link { display: block; color: inherit; } .fcard--link code { font-family: var(--font-mono); font-size: 0.82em; color: #8be9cb; background: rgba(9, 11, 17, 0.7); padding: 2px 6px; border-radius: 5px; } /* ---------- download extras ---------- */ .download__fallback { text-align: center; margin: -14px 0 30px; color: var(--dim); font-size: 0.88rem; } .download__fallback a { color: var(--muted); border-bottom: 1px dashed var(--dim); padding-bottom: 1px; transition: color 0.25s, border-color 0.25s; } .download__fallback a:hover { color: var(--cyan); border-color: var(--cyan); } /* system requirements */ .sysreq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 26px; } .sysreq__item { padding: 20px 22px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.02); } .sysreq__item h4 { font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; margin-bottom: 8px; color: var(--cyan); } .sysreq__item p { color: var(--muted); font-size: 0.84rem; } /* contribute section: compact top padding, cards reuse fcard */ .contribute { padding-top: 0; } /* inline code inside FAQ answers */ .acc__content code { font-family: var(--font-mono); font-size: 0.82em; color: #8be9cb; background: rgba(9, 11, 17, 0.7); padding: 2px 6px; border-radius: 5px; } .acc__content a { color: var(--cyan); border-bottom: 1px dashed rgba(70, 224, 192, 0.5); transition: color 0.25s, border-color 0.25s; } .acc__content a:hover { color: #8be9cb; border-color: #8be9cb; } /* ---------- responsive ---------- */ @media (max-width: 1020px) { .hero__inner { grid-template-columns: 1fr; gap: 56px; } .hero { min-height: auto; } .hero__copy { text-align: center; } .hero__sub { margin-inline: auto; } .hero__cta { justify-content: center; } .hero__visual { max-width: 620px; margin-inline: auto; width: 100%; } .stats__grid { grid-template-columns: repeat(3, 1fr); } .features__grid { grid-template-columns: repeat(2, 1fr); } .step { grid-template-columns: 64px 1fr; } .step__num { grid-row: 1; } .step > *:nth-child(2) { grid-column: 2; } .step__art, .scorer, .kbd-demo { grid-column: 1 / -1; margin-top: 18px; } } @media (max-width: 900px) { .nav { position: fixed; top: var(--header-h); left: 12px; right: 12px; flex-direction: column; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(12, 15, 22, 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s; z-index: 99; } .nav.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.3s ease, transform 0.3s var(--ease-out), visibility 0s; } .nav__link { padding: 13px 18px; font-size: 1rem; } .burger { display: flex; } .header__cta { display: none; } .header__repo span { display: none; } .os-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; margin-bottom: 34px; } /* The detected OS card goes first, so mobile users don't scroll past their own option. */ .os-card.is-detected { order: -1; } .sysreq { grid-template-columns: 1fr; } .pricing__grid { grid-template-columns: 1fr; } .footer__inner { grid-template-columns: 1fr; text-align: center; } .footer__brand, .footer__meta { text-align: center; } .footer__brand .logo { justify-content: center; } .install__cols { grid-template-columns: 1fr; } } @media (max-width: 640px) { .container { width: calc(100% - 36px); } .stats__grid { grid-template-columns: repeat(2, 1fr); } .pain__wall { grid-template-columns: 1fr; } .features__grid { grid-template-columns: 1fr; } .shots__grid { grid-template-columns: 1fr; } .scorer__fields { grid-template-columns: 1fr; } .scorer__result { flex-wrap: wrap; } .step { grid-template-columns: 1fr; } .step__num { grid-row: auto; } .step > *:nth-child(2) { grid-column: 1; } .appwin__body { grid-template-columns: 1fr; } .appwin__side { display: none; } .appwin__split { grid-template-columns: 1fr; } .appwin__detail { display: none; } .appwin__list { border-right: none; } .term__stats { grid-template-columns: repeat(2, 1fr); } .hero__cta .btn { width: 100%; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-group > * { opacity: 1; transform: none; } body::after { animation: none; } } /* ---------- first-run notes (always visible) ---------- */ .firstrun { margin-top: 8px; margin-bottom: 18px; padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-sm); border: 1px solid rgba(255, 199, 102, 0.28); background: rgba(255, 199, 102, 0.05); } .firstrun__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem, 1.8vw, 1.18rem); margin-bottom: 8px; } .firstrun__lead { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; } .firstrun__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .firstrun__note h4 { font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; margin-bottom: 8px; color: var(--cyan); } .firstrun__note p { color: var(--muted); font-size: 0.86rem; margin-bottom: 10px; } .firstrun__note strong { color: var(--text); font-weight: 600; } @media (max-width: 640px) { .firstrun__grid { grid-template-columns: 1fr; } } /* ---------- touch demo hint (coarse pointer) ---------- */ .kbd-demo__touchhint { display: none; } @media (pointer: coarse) { .kbd-demo__touchhint { display: block; padding: 10px 16px; border-top: 1px dashed var(--line-soft); font-size: 0.76rem; color: var(--dim); text-align: center; } .kbd-demo__hint kbd { display: none; } .kbd-demo__row { cursor: pointer; } /* Larger tap targets */ .copybtn, .term__restart { min-height: 44px; min-width: 44px; } .term__restart { display: inline-flex; align-items: center; justify-content: center; } } /* ---------- animation throttling ---------- */ /* Paused when the tab is hidden or the hero is scrolled off-screen (set from JS). */ .anim-paused *, .anim-paused *::before, .anim-paused *::after { animation-play-state: paused !important; } /* Gate expensive blur blobs on touch devices and Save-Data. */ @media (pointer: coarse) { .blob { animation: none; opacity: 0.32; } } .blobs-idle .blob { animation-play-state: paused; } /* Save-Data: drop the blur blobs and freeze the grain texture (class is set from JS). */ .save-data .blob { display: none; } .save-data body::after { animation: none; }