/* Stonevault site styles. Tokens and layout come from the design handoff (Stonevault Website.dc.html / Stonevault Privacy Policy.dc.html); values are verbatim. Light is the default; dark is set via data-theme on . */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); } :root { --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --page: #FCFCFB; --surface: #FFFFFF; --sunk: #F1F2F0; --line: #E3E5E2; --line-strong: #C6CBC6; --ink: #14181A; --ink-2: #4F5759; --ink-3: #5C6667; --accent: #0B6E6B; --accent-ink: #FFFFFF; --accent-soft: #E4F0EF; --accent-line: #9CC7C4; --link: #0B6E6B; --link-hover: #0B5854; } :root[data-theme="dark"] { --page: #101415; --surface: #171C1D; --sunk: #1D2324; --line: #252C2D; --line-strong: #3A4344; --ink: #EDF0EF; --ink-2: #B4BDBB; --ink-3: #93A09D; --accent: #5BB8B3; --accent-ink: #0A2321; --accent-soft: #16302E; --accent-line: #2E5A56; --link: #5BB8B3; --link-hover: #7CCAC5; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } .wrap { max-width: 1140px; margin: 0 auto; padding-left: 28px; padding-right: 28px; } /* ---------- Nav ---------- */ .nav { padding-top: 22px; padding-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); } .brand:hover { color: var(--ink); text-decoration: none; } .brand svg { color: var(--accent); flex: none; } .brand-name { font-weight: 650; font-size: 16.5px; letter-spacing: -0.02em; } .nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .nav-links a { color: var(--ink-2); font-size: 14.5px; } .theme-toggle { border: 1px solid var(--line-strong); background: none; color: var(--ink-2); border-radius: 9px; padding: 7px 13px; font: 500 13px var(--font-ui); cursor: pointer; } /* ---------- Hero ---------- */ .hero { padding-top: 64px; padding-bottom: 84px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; } .hero-copy { flex: 1 1 460px; min-width: 0; } .kicker { font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .hero h1 { margin: 18px 0 0; font-size: clamp(36px, 5vw, 58px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; } .hero-sub { margin: 22px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 560px; text-wrap: pretty; } .hero-ctas { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; } .btn-primary { display: inline-block; border: none; background: var(--accent); color: var(--accent-ink); border-radius: 12px; padding: 14px 22px; font: 600 15.5px var(--font-ui); cursor: pointer; min-height: 44px; } .hero-note { margin-top: 16px; font: 500 12.5px var(--font-mono); color: var(--ink-3); } /* Phone mock */ .hero-mock { flex: 0 1 330px; min-width: min(290px, 100%); } .phone { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 34px; padding: 14px; box-shadow: 0 18px 44px rgba(10, 20, 20, 0.09); } .screen { border: 1px solid var(--line); background: var(--page); border-radius: 24px; padding: 18px; overflow: hidden; } .screen-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .screen-brand { display: flex; align-items: center; gap: 8px; } .screen-brand svg { color: var(--accent); } .screen-brand span { font-weight: 650; font-size: 13px; } .badge-unlocked { font: 500 11px var(--font-mono); color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; } .screen-search { margin-top: 14px; background: var(--sunk); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-3); } .rows { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; } .row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; } .row.is-active { background: var(--sunk); } .row-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 650; font-size: 14px; flex: none; } .row-text { min-width: 0; } .row.is-active .row-text { flex: 1; } .row-title { font-size: 14px; font-weight: 600; } .row-sub { font: 400 11.5px var(--font-mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-copied { font: 500 10.5px var(--font-mono); color: var(--accent); flex: none; } /* ---------- Sections ---------- */ .section-verify { padding-bottom: 28px; } .section-how { padding-top: 54px; padding-bottom: 54px; } .section-faq { padding-top: 54px; padding-bottom: 72px; } .cards-2 { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; } .cards-3 { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px 30px 26px; /* Let grid tracks shrink below the terminal blocks' unbreakable min-content width; the pre then scrolls inside the card. */ min-width: 0; } .card-step { padding: 26px 26px 24px; } .card-label { font: 600 12px var(--font-mono); color: var(--accent); letter-spacing: 0.1em; } .card h3 { margin: 12px 0 0; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; } .card p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; } .card-step .step-num { font: 600 13px var(--font-mono); color: var(--accent); } .card-step h4 { margin: 10px 0 0; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; } .card-step p { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; } .terminal { min-width: 0; margin-top: 18px; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--ink-2); white-space: pre; overflow-x: auto; } .terminal .comment { color: var(--accent); } /* ---------- Source ---------- */ .source-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 34px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .source-copy { flex: 1 1 380px; min-width: 0; } .source-copy h3 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; } .source-copy p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 540px; text-wrap: pretty; } .source-side { flex: 0 1 380px; min-width: min(280px, 100%); display: flex; flex-direction: column; gap: 14px; } .source-side .terminal { margin-top: 0; padding: 14px 18px; } .btn-source { align-self: flex-start; background: var(--accent); color: var(--accent-ink); border-radius: 12px; padding: 13px 20px; font: 600 15px var(--font-ui); min-height: 44px; display: inline-flex; align-items: center; } .btn-source:hover { color: var(--accent-ink); text-decoration: none; opacity: 0.92; } /* ---------- FAQ ---------- */ .faq-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 30px 44px; } .faq-grid > div { min-width: 0; } .faq-q { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; } .faq-a { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--line); } .footer-inner { padding-top: 30px; padding-bottom: 46px; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; } .footer-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .footer-brand svg { color: var(--ink-3); } .footer-brand .name { font-weight: 600; font-size: 14px; } .footer-brand .tag { font-size: 14px; color: var(--ink-3); } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 14px; } .footer-links .muted { color: var(--ink-3); } /* ---------- Privacy page ---------- */ .article { max-width: 760px; margin: 0 auto; padding: 50px 28px 84px; } .article h1 { margin: 0; font-size: clamp(32px, 4.5vw, 42px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; } .article-meta { margin-top: 14px; font: 500 13px var(--font-mono); color: var(--ink-3); } .summary-card { margin-top: 30px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: 14px; padding: 22px 24px; font-size: 16.5px; line-height: 1.6; text-wrap: pretty; } .article section { margin-top: 34px; } .article section:first-of-type { margin-top: 40px; } .article h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.015em; } .article p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; } .article p strong { color: var(--ink); font-weight: 600; } .article .terminal { margin-top: 16px; } .footer-inner.slim { padding-top: 26px; padding-bottom: 44px; font-size: 14px; } .footer-inner.slim .muted { color: var(--ink-3); } .footer-inner.slim .links { display: flex; gap: 20px; } /* ---------- Small screens ---------- */ @media (max-width: 640px) { .wrap { padding-left: 20px; padding-right: 20px; } .article { padding-left: 20px; padding-right: 20px; } .nav-links { gap: 14px; } .hero { padding-top: 40px; padding-bottom: 56px; gap: 40px; } .hero-sub { font-size: 16.5px; } .card { padding: 24px 22px 22px; } .source-card { padding: 26px 22px; } .hero-ctas .btn-primary { flex: 1 1 auto; text-align: center; } }