/* openmarkdown.ai — the site layer, shared by every page on the apex. * * Layout only. Every colour, size, radius and weight comes from the vendored * design tokens in /tokens/ (linked before this file); nothing here invents a * value except the product accent, below. * * Type C site (openapps-design, reference/websites.md): a dark marketing page * here, and the app as a workspace at /app/ on the same host. So the ground is * dark (`class="oa-dark"` on ) and the header's one button opens the * app. */ /* OpenMarkdown claims accent slot 25 (clay). One slot per application. * * `--coral` 56% + `--petrol` 44%, mixed in OKLab from two existing ring * colours — see tokens/ACCENT-SLOTS.md in the monorepo for the search that * chose it. Declared on :root (not inside a scoped class), so the wordmark's * full stop resolves on every page, sub-pages included. It is defined here * rather than edited into the vendored token files, so re-vendoring cannot * drop it; once `--accent-25` lands in tokens/css/colors.css this becomes * `var(--accent-25)`. * * Never violet: the app's default theme keeps Obsidian's purple so vault * themes look as their authors drew them, and a violet site would read as * Obsidian's own. The accent's only jobs are the full stop, the tile and the * 16% tint chip. */ :root { --accent: color-mix(in oklab, var(--coral) 56%, var(--petrol)); } /* Every page paints its own ground, on html: a white canvas under white type is how two sibling privacy pages shipped invisible. */ html { background: var(--bg-page); } body { margin: 0; background: var(--bg-page); color: var(--text-body); } a { color: var(--text-link); } a:hover { color: var(--text-link-hover); } .container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter-page-lg); } @media (max-width: 900px) { .container { padding-inline: var(--space-6); } } /* The sticky header covers whatever a nav link jumps to. */ section, .hero { scroll-margin-top: 5.5rem; } @media (max-width: 760px) { section, .hero { scroll-margin-top: 7.5rem; } } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------------------------------------------------------- the mark */ .brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; } .brand:hover { color: inherit; } .brand-tile { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--radius-md); background: color-mix(in oklab, var(--accent) 16%, transparent); color: color-mix(in oklab, var(--accent) 62%, var(--white)); } .brand-tile svg { display: block; } .brand-word { font: var(--weight-medium) var(--text-lg)/1 var(--font-display); letter-spacing: var(--logo-tracking, -0.04em); color: var(--text-strong); } .brand-word .muted { color: var(--text-muted); } .brand-word .dot { color: var(--accent); } /* -------------------------------------------------------------- the header */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--bg-page) 82%, transparent); backdrop-filter: var(--blur-panel); -webkit-backdrop-filter: var(--blur-panel); border-bottom: 1px solid var(--border-hairline); } .site-header .container { display: flex; align-items: center; gap: 32px; height: var(--header-height); } /* flex: 1 is load-bearing: it pushes the actions to the right edge. */ .site-nav { display: flex; gap: 24px; flex: 1; } .site-nav a { font: var(--type-ui); color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard); } .site-nav a:hover { color: var(--text-strong); } .header-actions { display: flex; align-items: center; gap: 20px; } /* :not(.btn) — a bare `> a` outranks .btn-primary and greys the button. */ .header-actions > a:not(.btn) { font: var(--type-ui); color: var(--text-muted); text-decoration: none; } .header-actions > a:not(.btn):hover { color: var(--text-strong); } @media (max-width: 760px) { .site-header .container { flex-wrap: wrap; height: auto; padding-block: 10px; gap: 0 16px; } .site-nav { order: 3; flex-basis: 100%; gap: 18px; padding-block: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-6) * -1); padding-inline: var(--space-6); } .site-nav::-webkit-scrollbar { display: none; } .header-actions { margin-left: auto; } } @media (max-width: 430px) { .header-actions > a:not(.btn) { display: none; } .header-actions { gap: 12px; } } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: var(--radius-md); font: var(--type-ui); white-space: nowrap; text-decoration: none; border: 1px solid transparent; transition: var(--transition-control); } .btn:active { transform: translateY(0.5px); } .btn-primary { background: var(--brand); color: var(--brand-contrast); } .btn-primary:hover { background: var(--green-400); color: var(--brand-contrast); } .btn-primary:active { background: var(--green-600); } .btn-secondary { background: var(--white-04); color: var(--white); border-color: var(--white-20); } .btn-secondary:hover { background: var(--white-10); color: var(--white); } .btn-sm { height: 38px; padding: 0 16px; } .btn-lg { height: 48px; padding: 0 24px; } /* --------------------------------------------------------------------- hero */ .hero { position: relative; isolation: isolate; } .hero::before { /* The 24px hairline grid, once per page, faded out from the centre. */ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(var(--border-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--border-hairline) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000 20%, transparent 75%); } .hero-inner { display: grid; justify-items: center; text-align: center; gap: 22px; padding: 76px var(--gutter-page-lg) 0; } @media (max-width: 900px) { .hero-inner { padding: var(--space-14) var(--space-6) 0; } } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-hairline); background: var(--white-04); font: var(--type-caption); color: var(--text-body); } .pill .chip { display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--accent) 16%, transparent); color: color-mix(in oklab, var(--accent) 62%, var(--white)); } .hero h1 { max-width: 820px; margin: 0; color: var(--text-strong); font: var(--weight-medium) clamp(36px, 6vw, var(--text-4xl))/1.04 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; } .hero .lead { max-width: 600px; margin: 0; font: var(--type-body-lg); color: var(--text-muted); text-wrap: pretty; } .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .hero-note { margin: 0; font: var(--type-caption); color: var(--text-faint); max-width: 560px; } .hero-shot { padding: var(--space-12) var(--gutter-page-lg) var(--space-24); } @media (max-width: 900px) { .hero-shot { padding: var(--space-10) var(--space-6) var(--space-14); } } /* -------------------------------------------------------------- screenshots */ .shot { margin: 0; } .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); background: var(--surface-card); } .shot figcaption { margin-top: var(--space-3); font: var(--type-caption); color: var(--text-muted); max-width: 70ch; } /* ----------------------------------------------------------------- sections */ section { padding: var(--space-14) 0; border-top: 1px solid var(--border-hairline); } @media (min-width: 900px) { section { padding: var(--space-24) 0; } } .section-head { max-width: 640px; display: grid; gap: 12px; margin-bottom: var(--space-10); } .section-head h2 { margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-heading); color: var(--text-strong); text-wrap: balance; } .section-head p { margin: 0; font: var(--type-body-lg); color: var(--text-muted); } .eyebrow { margin: 0; font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } h3 { margin: 0 0 var(--space-2); font: var(--type-h4); color: var(--text-strong); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-sunken); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: 1px 5px; } /* Pillars: copy beside a real capture, alternating. */ .pillar { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-12); align-items: center; padding-block: var(--space-10); } .pillar + .pillar { border-top: 1px solid var(--border-hairline); } .pillar.flip .pillar-copy { order: 2; } .pillar-copy { display: grid; gap: var(--space-3); align-content: start; } .pillar-path { font: var(--type-mono); font-size: var(--text-xs); color: var(--text-muted); } .pillar-copy p { margin: 0; color: var(--text-muted); } .pillar-copy p strong { color: var(--text-strong); font-weight: var(--weight-medium); } .pillar-copy ul { margin: 0; padding-left: 1.1em; color: var(--text-muted); display: grid; gap: 6px; } .pillar-shots { display: grid; gap: var(--space-4); } @media (max-width: 900px) { .pillar { grid-template-columns: 1fr; gap: var(--space-6); } .pillar.flip .pillar-copy { order: 0; } } /* The tool directory: a 1px-gap hairline grid. 3 → 2 → 1 columns. */ .directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-12); } .directory > div { background: var(--bg-page); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; } .directory p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); } .directory h3 { font: var(--type-ui); font-size: var(--text-base); } @media (max-width: 900px) { .directory { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .directory { grid-template-columns: 1fr; } } /* How it works: four steps, 4 → 2 → 1. */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .steps li { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; } .steps .n { font: var(--type-mono); font-size: var(--text-xs); color: var(--text-muted); } .steps p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); } @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } } /* Other places it runs: one card per surface, buttons on one line. */ .ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .way { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); } .way-tag { font: var(--type-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .way-name { margin: 0; font: var(--type-h4); color: var(--text-strong); } .way p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); } .way .btn { margin-top: auto; align-self: flex-start; } .way-note { font: var(--type-mono); font-size: var(--text-xs); color: var(--text-muted); } @media (max-width: 900px) { .ways { grid-template-columns: 1fr; } } .phone-row { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-12); align-items: center; margin-top: var(--space-12); } .phone-row .shot img { border-radius: var(--radius-xl); } .phone-row p { margin: 0 0 var(--space-3); color: var(--text-muted); } @media (max-width: 760px) { .phone-row { grid-template-columns: 1fr; } .phone-row .shot { max-width: 280px; } } /* Cards (privacy, pricing): 3 → 1. */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); } .card p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); } .card .price { display: block; margin-bottom: var(--space-2); font: var(--type-mono); color: var(--text-strong); } @media (max-width: 900px) { .cards { grid-template-columns: 1fr; } } .after { margin-top: var(--space-8); max-width: 70ch; font-size: var(--text-sm); color: var(--text-muted); } /* FAQ: questions and answers both visible. */ .faq-list { margin: 0; border-top: 1px solid var(--border-hairline); } .faq-item { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--border-hairline); } .faq-item dt { font: var(--weight-medium) var(--text-md)/1.3 var(--font-sans); color: var(--text-strong); } .faq-item dd { margin: 0; font: var(--type-body); color: var(--text-muted); } @media (max-width: 760px) { .faq-item { grid-template-columns: 1fr; gap: 8px; } } /* The closing call: the one filled panel on the page. */ .cta-panel { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding: var(--space-16) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border-hairline); } .cta-panel h2 { margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-heading); color: var(--text-strong); text-wrap: balance; } .cta-panel p { margin: 0; color: var(--text-muted); max-width: 56ch; } /* ------------------------------------------------------------------- footer */ .site-footer { border-top: 1px solid var(--border-hairline); color: var(--text-muted); } .site-footer > .container { padding-top: 56px; padding-bottom: 32px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .site-footer > .container { grid-template-columns: repeat(3, 1fr); } .footer-about { grid-column: 1 / -1; } } @media (max-width: 600px) { .site-footer > .container { grid-template-columns: repeat(2, 1fr); } } .footer-about p { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); max-width: 36ch; } .footer-group { display: flex; flex-direction: column; gap: 10px; } .footer-group a { font: var(--type-ui); color: var(--text-muted); text-decoration: none; } .footer-group a:hover { color: var(--text-strong); } .footer-base { border-top: 1px solid var(--border-hairline); } .site-footer .footer-base .container { padding-top: 20px; padding-bottom: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--text-sm); } .footer-base a { color: var(--text-muted); } .footer-base a:hover { color: var(--text-strong); } .footer-base .mono { font: var(--type-mono); font-size: var(--text-xs); } /* --------------------------------------------------------------- sub-pages */ .doc { max-width: 44rem; padding-block: var(--space-10) var(--space-16); } .doc h1 { margin: var(--space-3) 0 var(--space-4); color: var(--text-strong); font: var(--type-h1); letter-spacing: var(--tracking-display); } .doc h2 { margin: var(--space-10) 0 var(--space-3); color: var(--text-strong); font: var(--type-h3); letter-spacing: var(--tracking-heading); } .doc p, .doc li { color: var(--text-body); } .doc ul { padding-left: 1.2em; display: grid; gap: 6px; } .doc .lede { font: var(--type-body-lg); color: var(--text-muted); } .doc .updated { font: var(--type-caption); color: var(--text-muted); } .table-wrap { overflow-x: auto; margin: var(--space-4) 0; } .table-wrap table { min-width: 560px; width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border-hairline); } .table-wrap th { font-weight: var(--weight-medium); color: var(--text-strong); } .table-wrap td { color: var(--text-muted); } /* Prose rhythm: base.css zeroes paragraph margins, which ran "Last updated" into the lede and two paragraphs into one block. */ .doc p, .doc ul, .doc .table-wrap { margin: 0 0 var(--space-4); } .doc .lede { margin-bottom: var(--space-2); } /* Links inside running text are underlined; white on a grey paragraph is not enough to say "this is a link". */ .doc a, .section-head p a, .after a, .footer-base a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); } /* Below 640px the three-column table restacks — what, then where, then who — rather than wrapping every cell or scrolling sideways. */ @media (max-width: 640px) { .table-wrap table { min-width: 0; } .table-wrap thead { display: none; } .table-wrap tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); } .table-wrap td { border: 0; padding: 0; } .table-wrap td:first-child { color: var(--text-strong); font-weight: var(--weight-medium); } .table-wrap td:nth-child(3)::before { content: "Read by: "; color: var(--text-muted); } }