/* ────────────────────────────────────────────────────────────────────────── opensh product page — warm-dark editorial-tech aesthetic ────────────────────────────────────────────────────────────────────────── */ :root { /* default theme — overridden by Tweaks via inline style on */ --bg-0: oklch(0.16 0.006 60); --bg-1: oklch(0.20 0.007 60); --bg-2: oklch(0.24 0.008 60); --bg-card: oklch(0.21 0.007 60); --fg-0: oklch(0.96 0.010 80); --fg-1: oklch(0.78 0.012 75); --fg-2: oklch(0.58 0.012 75); --fg-3: oklch(0.42 0.010 70); --line: oklch(0.32 0.008 70); --line-soft: oklch(0.26 0.008 70); --accent: oklch(0.82 0.16 145); /* phosphor green */ --accent-ink: oklch(0.18 0.02 145); --accent-soft: oklch(0.82 0.16 145 / .12); --warn: oklch(0.78 0.14 70); --danger: oklch(0.70 0.18 25); --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg-0); color: var(--fg-0); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } /* ─── Page chrome ────────────────────────────────────────────────────────── */ .page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; } @media (max-width: 760px) { .page { padding: 0 22px; } } .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: color-mix(in oklab, var(--bg-0) 78%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .brand-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(140deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 60%, #000) 100%); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 10px color-mix(in oklab, var(--accent) 30%, transparent); } .brand-name { color: var(--fg-0); } .brand-tld { color: var(--fg-2); } .nav-links { display: flex; gap: 28px; font-size: 13.5px; color: var(--fg-1); } .nav-links a:hover { color: var(--fg-0); } .nav-cta { display: flex; gap: 10px; align-items: center; } @media (max-width: 760px) { .nav-links { display: none; } } /* ─── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-1); color: var(--fg-0); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, transform 120ms ease; white-space: nowrap; } .btn:hover { background: var(--bg-2); border-color: color-mix(in oklab, var(--line) 60%, var(--fg-2)); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: color-mix(in oklab, var(--accent) 80%, #000); font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px color-mix(in oklab, var(--accent) 28%, transparent); } .btn-primary:hover { background: color-mix(in oklab, var(--accent) 92%, #fff); } .btn-ghost { background: transparent; border-color: transparent; color: var(--fg-1); } .btn-ghost:hover { color: var(--fg-0); background: var(--bg-1); } .btn-lg { padding: 14px 22px; font-size: 15.5px; border-radius: 12px; } .btn-sm { padding: 7px 11px; font-size: 12.5px; } /* ─── Section scaffold ───────────────────────────────────────────────────── */ section { padding: 64px 0; position: relative; } @media (max-width: 760px) { section { padding: 44px 0; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-1); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 70%, transparent); } .section-head { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: end; margin-bottom: 36px; } @media (max-width: 900px) { .section-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; } } .section-head h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: pretty; color: var(--fg-0); } .section-head h2 em { font-style: normal; color: var(--fg-2); } /* ─── Hero ───────────────────────────────────────────────────────────────── */ .hero { padding-top: 40px; padding-bottom: 48px; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; } .hero-copy { max-width: 760px; } .hero-title { font-size: clamp(36px, 4.6vw, 52px); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; margin: 16px 0 14px; text-wrap: balance; color: var(--fg-0); } .hero-title em { font-style: normal; color: var(--fg-2); } .hero-title .accent-text { color: var(--fg-0); border-bottom: 2px solid var(--accent); padding-bottom: 1px; } .hero-lede { font-size: 16px; line-height: 1.55; color: var(--fg-1); max-width: 58ch; text-wrap: pretty; margin: 0 0 24px; } .hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* split download button */ .dl-main { display: inline-flex; flex-direction: column; padding: 10px 20px 10px 18px; text-align: left; cursor: pointer; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent) 75%, #000); background: var(--accent); color: var(--accent-ink); text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 28px color-mix(in oklab, var(--accent) 28%, transparent); transition: transform 120ms ease, box-shadow 120ms ease; } .dl-main:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 32px color-mix(in oklab, var(--accent) 36%, transparent); } .dl-main .dl-line1 { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; } .dl-main .dl-line2 { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); letter-spacing: 0.02em; margin-top: 1px; } .dl-divider { width: 1px; background: color-mix(in oklab, var(--accent-ink) 25%, transparent); } .dl-arch { position: relative; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0 14px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .dl-arch:hover { background: rgba(0,0,0,.08); } .dl-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; z-index: 30; } .dl-menu button { display: flex; width: 100%; text-align: left; background: transparent; border: 0; color: var(--fg-0); padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; justify-content: space-between; align-items: center; } .dl-menu button:hover { background: var(--bg-2); } .dl-menu .arch-meta { color: var(--fg-2); font-family: var(--mono); font-size: 11px; } .hero-meta { margin-top: 28px; display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--fg-1); } .hero-meta span b { color: var(--fg-0); font-weight: 500; } /* tagline strip beneath hero */ .tag-strip { margin-top: 48px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 22px 0; display: flex; gap: 48px; flex-wrap: wrap; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--fg-1); } .tag-strip b { color: var(--fg-0); font-weight: 500; } /* ─── Terminal demo ─────────────────────────────────────────────────────── */ .term-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; background: oklch(0.13 0.005 60); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.4); max-width: 66%; margin-inline: auto; } @media (max-width: 900px) { .term-wrap { max-width: 100%; } } .term-bar { display: flex; align-items: center; padding: 9px 14px; gap: 8px; background: oklch(0.18 0.006 60); border-bottom: 1px solid var(--line); } .term-dots { display: flex; gap: 6px; } .term-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-3); display: block; } .term-dots i:nth-child(1) { background: #ff5f56; } .term-dots i:nth-child(2) { background: #ffbd2e; } .term-dots i:nth-child(3) { background: #27c93f; } .term-title { flex: 1; text-align: center; font-family: var(--mono); font-size: 11px; color: oklch(0.78 0 0); letter-spacing: 0.02em; } .term-pill { font-family: var(--mono); font-size: 10px; color: oklch(0.85 0 0); padding: 2px 7px; border-radius: 999px; border: 1px solid oklch(0.40 0 0); } .term-body { padding: 14px 16px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: oklch(0.92 0 0); min-height: 320px; position: relative; } @media (max-width: 700px) { .term-body { font-size: 11px; min-height: 280px; } } .term-line { white-space: pre; } .t-prompt { color: var(--accent); font-weight: 600; } .t-host { color: oklch(0.70 0 0); } .t-mode { color: oklch(0.85 0 0); } .t-cmd { color: oklch(0.95 0 0); } .t-arg { color: oklch(0.92 0 0); } .t-jp { color: oklch(0.92 0 0); } .t-comment { color: oklch(0.70 0 0); font-style: italic; } .t-key { color: oklch(0.70 0 0); } .t-out { color: oklch(0.78 0 0); } .t-ok { color: oklch(0.85 0 0); } .t-warn { color: oklch(0.85 0 0); } .cand-table { display: grid; grid-template-columns: 1fr 1.4fr 90px; gap: 0 24px; margin: 6px 0 4px 0; padding: 6px 12px 8px; border-left: 2px solid oklch(0.40 0 0); background: oklch(1 0 0 / 0.04); } .cand-table .ch { color: oklch(0.72 0 0); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 2px; } .cand-table .cn { color: oklch(0.95 0 0); } .cand-table .cd { color: oklch(0.82 0 0); } .cand-table .ck { color: oklch(0.75 0 0); } .cand-table .row { display: contents; } .fsel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 18px; margin: 6px 0 4px 0; padding: 6px 12px 8px; border-left: 2px solid oklch(0.40 0 0); background: oklch(1 0 0 / 0.04); } .fsel-cell { font-family: var(--mono); color: oklch(0.92 0 0); padding: 1px 6px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fsel-hl { background: oklch(0.92 0 0); color: oklch(0.13 0.005 60); } .cur { display: inline-block; width: 0.55ch; height: 1.05em; background: var(--accent); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2, start) infinite; } @keyframes blink { to { background: transparent; } } .term-foot { border-top: 1px solid oklch(0.30 0 0); display: flex; justify-content: space-between; padding: 8px 16px; background: oklch(0.15 0.005 60); font-family: var(--mono); font-size: 11px; color: oklch(0.78 0 0); } .term-foot kbd { font-family: var(--mono); font-size: 10.5px; padding: 1.5px 6px; border-radius: 4px; border: 1px solid oklch(0.45 0 0); background: oklch(0.25 0 0); color: oklch(0.92 0 0); } .term-controls { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 4px; background: oklch(0.18 0 0 / 0.75); border-radius: 999px; padding: 2px; backdrop-filter: blur(4px); } .term-ctrl { display: inline-flex; align-items: center; justify-content: center; border: 1px solid oklch(0.55 0 0); background: oklch(0.25 0 0); color: oklch(0.95 0 0); font-family: var(--mono); font-size: 11.5px; font-weight: 500; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; line-height: 1; } .term-ctrl:hover:not(:disabled) { background: oklch(0.35 0 0); border-color: var(--accent); color: var(--accent); } .term-ctrl:disabled { opacity: 0.4; cursor: not-allowed; } .term-ctrl.term-speed-display { cursor: default; background: transparent; border-color: transparent; color: oklch(0.82 0 0); min-width: 34px; font-variant-numeric: tabular-nums; } .term-ctrl.term-ctrl-replay { margin-left: 4px; font-size: 13px; } /* ─── Features ───────────────────────────────────────────────────────────── */ .feat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; } .feat { background: var(--bg-0); padding: 22px 22px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; position: relative; } .feat.f-wide { grid-column: span 3; } .feat.f-tall { grid-column: span 2; } .feat.f-norm { grid-column: span 2; } @media (max-width: 960px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } .feat.f-wide, .feat.f-tall, .feat.f-norm { grid-column: span 2; } } @media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } .feat.f-wide, .feat.f-tall, .feat.f-norm { grid-column: span 1; } } .feat-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-1); } .feat h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin: 0; line-height: 1.2; color: var(--fg-0); } .feat p { margin: 0; color: var(--fg-1); font-size: 14px; line-height: 1.55; text-wrap: pretty; } .feat .feat-demo { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--fg-2); border-top: 1px dashed var(--line); } .kbd-row { display: inline-flex; gap: 4px; align-items: center; } .kbd-row kbd { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-1); color: var(--fg-1); } /* ─── Screenshots ────────────────────────────────────────────────────────── */ .shot-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; } @media (max-width: 900px) { .shot-row { grid-template-columns: 1fr; } } .shot { position: relative; background: repeating-linear-gradient( 135deg, var(--bg-1) 0 14px, var(--bg-2) 14px 28px ); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-items: center; } .shot.shot-portrait { aspect-ratio: 4 / 5; } .shot .shot-label { position: absolute; inset: auto 0 0 0; padding: 12px 14px; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--fg-1); display: flex; justify-content: space-between; } .shot .shot-cap { font-family: var(--mono); font-size: 11px; color: var(--fg-2); background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); } .shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; } @media (max-width: 900px) { .shot-grid { grid-template-columns: 1fr; } } .shot-figure { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; } .shot-figure img { display: block; width: 100%; height: auto; background: oklch(0.13 0.005 60); } .shot-figure figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); padding: 9px 14px; border-top: 1px solid var(--line); } /* ─── Pricing ────────────────────────────────────────────────────────────── */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } } .tier { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; } .tier.tier-pop { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, var(--bg-1)) 0%, var(--bg-1) 60%); border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); box-shadow: 0 20px 50px color-mix(in oklab, var(--accent) 14%, transparent); } .tier-pop::after { content: "MOST POPULAR"; position: absolute; top: -10px; right: 18px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; padding: 4px 9px; border-radius: 999px; font-weight: 600; } .tier-name { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); } .tier-tag { font-size: 14.5px; color: var(--fg-1); line-height: 1.4; text-wrap: pretty; } .tier-price { display: flex; align-items: baseline; gap: 8px; margin-top: -2px; } .tier-price .amt { font-size: 36px; font-weight: 500; letter-spacing: -0.025em; line-height: 1; color: var(--fg-0); } .tier-price .cur { color: var(--fg-2); font-size: 18px; font-weight: 500; margin-right: -2px; } .tier-price .term { color: var(--fg-2); font-family: var(--mono); font-size: 12px; } .tier-jpy { margin-top: -8px; font-family: var(--mono); font-size: 13px; color: var(--fg-2); } .tier ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--fg-1); } .tier ul li { display: flex; gap: 10px; align-items: flex-start; } .tier ul li::before { content: "+"; font-family: var(--mono); color: var(--accent); width: 14px; flex-shrink: 0; font-weight: 600; } .tier ul li.muted::before { content: "—"; color: var(--fg-3); } .tier ul li.muted { color: var(--fg-2); } .tier-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .tier-foot .note { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--fg-2); } .pricing-cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .pricing-cta .note { font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); } .keys-block { margin-top: 28px; } .keys-block h3 { font-size: 15px; font-weight: 600; color: var(--fg-0); margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; } .keys-block h3 code { font-family: var(--mono); font-size: 13px; color: var(--fg-1); background: var(--bg-1); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; } .keys-note { font-size: 13px; color: var(--fg-2); margin: -6px 0 12px; } .keys-note code { font-family: var(--mono); font-size: 12px; color: var(--fg-1); } table.keys { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: 14px; } table.keys tr + tr { border-top: 1px solid var(--line-soft); } table.keys th, table.keys td { text-align: left; padding: 9px 14px; vertical-align: top; } table.keys th { font-family: var(--mono); font-weight: 500; color: var(--fg-0); background: var(--bg-1); width: 180px; white-space: nowrap; border-right: 1px solid var(--line); } table.keys td { color: var(--fg-1); } @media (max-width: 640px) { table.keys th { width: 120px; font-size: 12.5px; } table.keys td { font-size: 13px; } } /* ─── Checkout modal ─────────────────────────────────────────────────────── */ .modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 200; padding: 24px; animation: scrimIn 180ms ease both; } @keyframes scrimIn { from { opacity: 0 } to { opacity: 1 } } .modal { width: 100%; max-width: 880px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.6); animation: modalIn 220ms cubic-bezier(.2,.7,.2,1) both; max-height: calc(100vh - 48px); } @keyframes modalIn { from { transform: translateY(12px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } } @media (max-width: 760px) { .modal { grid-template-columns: 1fr; max-height: calc(100vh - 24px); } } .modal-l, .modal-r { padding: 26px 28px; overflow-y: auto; } .modal-l { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, var(--bg-1)) 0%, var(--bg-1) 100%); border-right: 1px solid var(--line); } @media (max-width: 760px) { .modal-l { border-right: 0; border-bottom: 1px solid var(--line); } } .modal-l h3 { margin: 0 0 4px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; } .modal-l .sub { color: var(--fg-2); font-family: var(--mono); font-size: 12px; } .modal.modal-narrow { grid-template-columns: 1fr; max-width: 460px; } .modal-body { padding: 26px 28px; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, var(--bg-1)) 0%, var(--bg-1) 100%); } .modal-body h3 { margin: 0 0 4px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; } .modal-body .sub { color: var(--fg-2); font-family: var(--mono); font-size: 12px; } .summary { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .summary .row { display: flex; justify-content: space-between; color: var(--fg-1); } .summary .row.total { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 6px; color: var(--fg-0); font-weight: 600; font-size: 17px; } .summary .row .mono { font-family: var(--mono); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .qty button { background: transparent; border: 0; width: 30px; height: 30px; color: var(--fg-1); cursor: pointer; } .qty button:hover { background: var(--bg-2); color: var(--fg-0); } .qty input { width: 44px; text-align: center; background: transparent; border: 0; color: var(--fg-0); font: 500 14px var(--mono); outline: none; } .modal-r h4 { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); font-family: var(--mono); font-weight: 500; } .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .field label { font-size: 12px; color: var(--fg-2); } .field input { width: 100%; border: 1px solid var(--line); background: var(--bg-0); color: var(--fg-0); padding: 11px 12px; border-radius: 9px; font: 400 14px var(--sans); outline: none; transition: border-color 120ms; } .field input:focus { border-color: var(--accent); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pay-tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 4px; background: var(--bg-0); border-radius: 10px; border: 1px solid var(--line); } .pay-tabs button { flex: 1; background: transparent; border: 0; color: var(--fg-1); padding: 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .pay-tabs button.is-on { background: var(--bg-2); color: var(--fg-0); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; } .modal-actions { display: flex; gap: 8px; margin-top: 16px; } .modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--fg-2); cursor: pointer; } .modal-close:hover { background: var(--bg-2); color: var(--fg-0); } .success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 28px; } .success .ok { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 22%, var(--bg-1)); color: var(--accent); display: grid; place-items: center; font-size: 28px; margin-bottom: 14px; border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--line)); } /* ─── Sys reqs + FAQ ─────────────────────────────────────────────────────── */ .reqs { display: grid; grid-template-columns: 200px 1fr; gap: 36px; border-top: 1px solid var(--line-soft); padding-top: 28px; } @media (max-width: 700px) { .reqs { grid-template-columns: 1fr; gap: 16px; } } .reqs h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin: 0; font-weight: 500; } .reqs dl { margin: 0; display: grid; grid-template-columns: 160px 1fr; gap: 12px 18px; font-size: 14.5px; } .reqs dt { color: var(--fg-2); font-family: var(--mono); font-size: 12.5px; } .reqs dd { margin: 0; color: var(--fg-1); } .reqs dd b { color: var(--fg-0); font-weight: 500; } .faq { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); } .faq details { border-bottom: 1px solid var(--line-soft); padding: 16px 0; } .faq summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; list-style: none; outline: none; gap: 24px; color: var(--fg-0); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--fg-2); font-size: 22px; transition: transform 200ms ease; } .faq details[open] summary::after { content: "−"; } .faq .ans { margin-top: 10px; color: var(--fg-1); max-width: 72ch; font-size: 14px; line-height: 1.6; } .faq .ans code { font-family: var(--mono); font-size: 13px; padding: 1.5px 6px; border-radius: 4px; background: var(--bg-1); border: 1px solid var(--line); color: var(--fg-0); } /* ─── Footer ─────────────────────────────────────────────────────────────── */ footer { padding: 40px 0 28px; margin-top: 24px; border-top: 1px solid var(--line-soft); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } } .foot-col h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 12px; font-weight: 500; } .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--fg-1); } .foot-col ul a:hover { color: var(--fg-0); } .foot-col p { color: var(--fg-1); font-size: 14px; margin: 0 0 12px; max-width: 38ch; } .foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11.5px; color: var(--fg-1); } /* ─── tiny icons (simple shapes, no complex SVG hand-drawing) ─────────────── */ .ic { width: 14px; height: 14px; flex: none; display: inline-block; } .ic-dl { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M7 1h2v7.586l2.293-2.293 1.414 1.414L8 12.414 3.293 7.707l1.414-1.414L7 8.586zM2 13h12v2H2z'/%3E%3C/svg%3E") center/contain no-repeat; background: currentColor; } .ic-chev { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") center/contain no-repeat; background: currentColor; } .ic-close { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3.5 2.5L8 7l4.5-4.5L14 4 9.5 8.5 14 13l-1.5 1.5L8 10l-4.5 4.5L2 13l4.5-4.5L2 4z'/%3E%3C/svg%3E") center/contain no-repeat; background: currentColor; } /* aurora bloom behind hero */ .hero-bloom { position: absolute; inset: -10% -10% auto -10%; height: 70%; pointer-events: none; background: radial-gradient(50% 40% at 30% 20%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%), radial-gradient(40% 40% at 80% 10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%); filter: blur(28px); opacity: 0.6; z-index: -1; } .hero { position: relative; overflow: hidden; } /* ─── Accessibility: keyboard focus indicators ─────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .dl-main:focus-visible, .btn:focus-visible { outline-offset: 3px; } .term-ctrl:focus-visible { outline-color: var(--accent); outline-offset: 1px; }