/* ========================================================================== Bridgi — shared content stylesheet (site.css) Governs the blog + all content/SEO pages on bridgi.app. Design direction: bilingual-editorial. The English (LTR) / Hebrew (RTL) duality is the design idea; Hebrew is set as a first-class citizen. On the homepage's brand tokens, so the content surface reads as the same product. Zero third-party dependencies (system fonts, no CDN) — an argued choice for a privacy-forward product, and system stacks cover Hebrew natively. Sacred, never styled away: page SEO, JSON-LD, written content, links. This file only skins and lays out that content. ========================================================================== */ /* ---- Tokens -------------------------------------------------------------- */ :root { color-scheme: light dark; /* Brand (lifted from the homepage — the canonical Bridgi palette) */ --brand: #1f6feb; --brand-deep: #0b3a8c; --teal: #13b6b0; --accent: #ff8a5b; /* Neutral family — light */ --ink: #0f1b2d; --ink-soft: #47566b; --ink-faint: #586573; /* WCAG AA >=4.5:1 on bg, surface & surface-2 (light) */ --bg: #f6f9fc; --surface: #ffffff; --surface-2: #eef4fb; --line: #e2eaf3; --line-strong: #cdd9e8; /* Control boundaries need WCAG 1.4.11 non-text contrast (>=3:1) — separate from --line-strong, which is a decorative card/table edge and must stay quiet. */ --pill-border: #1a63d8; /* Hebrew example tint + the "this is the answer" teal wash */ --he-tint: #eaf2ff; --he-ink: #0b3a8c; --answer-tint: #e5f7f5; /* Links */ --link: #1a63d8; --link-hover: #0b3a8c; /* Form */ --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(11, 58, 140, .06), 0 6px 20px -14px rgba(11, 58, 140, .35); --shadow-md: 0 12px 34px -20px rgba(11, 58, 140, .45); --measure: 68ch; --page: 760px; --ease-out: cubic-bezier(.22, 1, .36, 1); /* Native font stacks */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hebrew: "Segoe UI", "Segoe UI Hebrew", "Arial Hebrew", "Noto Sans Hebrew", "Alef", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --ink: #e9eef6; --ink-soft: #adbbcf; --ink-faint: #8091a6; --bg: #0b1220; --surface: #131d2e; --surface-2: #182740; --line: #223047; --line-strong: #2c3d57; --pill-border: #7db0ff; /* >=3:1 on --bg, matches the dark --link */ --brand: #5b9bff; --brand-deep: #9ec3ff; --teal: #2fd4cd; --he-tint: rgba(91, 155, 255, .12); --he-ink: #cfe0ff; --answer-tint: rgba(47, 212, 205, .12); --link: #7db0ff; --link-hover: #a9caff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .6); --shadow-md: 0 16px 40px -22px rgba(0, 0, 0, .7); } } /* ---- Base --------------------------------------------------------------- */ * { box-sizing: border-box; } html { font-size: clamp(16px, 0.35vw + 15px, 18px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); line-height: 1.65; color: var(--ink); background: var(--bg); font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* subtle brand wash at the very top of the page, fading into the field */ background-image: radial-gradient(120% 340px at 50% -140px, rgba(31, 111, 235, .07), transparent 70%); background-repeat: no-repeat; } @media (prefers-color-scheme: dark) { body { background-image: radial-gradient(120% 340px at 50% -140px, rgba(91, 155, 255, .10), transparent 70%); } } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--link-hover); } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } img { max-width: 100%; height: auto; } /* ---- Site header -------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } .site-header .bar { max-width: var(--page); margin: 0 auto; padding: 0 24px; height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; } /* The Bridgi mark — the little bridge arc, reused verbatim from the homepage */ .brand .mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--teal)); position: relative; flex: 0 0 auto; } .brand .mark::before { content: ""; position: absolute; inset: 8px 6px; border: 2.5px solid #fff; border-bottom: 0; border-radius: 13px 13px 0 0; } .site-nav { display: flex; align-items: center; gap: 22px; } .site-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .93rem; } .site-nav a:hover { color: var(--link); } .site-nav .pill { color: var(--link); border: 1.5px solid var(--pill-border); padding: 7px 15px; border-radius: var(--radius-pill); transition: border-color .15s var(--ease-out), transform .15s var(--ease-out); } .site-nav .pill:hover { border-color: var(--brand); transform: translateY(-1px); } @media (max-width: 560px) { .site-nav a.opt { display: none; } } /* ---- Content column ----------------------------------------------------- */ .content { max-width: var(--page); margin: 0 auto; padding: 40px 24px 72px; } .content > * { max-width: var(--measure); } /* Breadcrumbs */ nav.crumbs { font-size: .85rem; color: var(--ink-faint); margin: 0 0 26px; letter-spacing: .01em; } nav.crumbs a { color: var(--ink-faint); text-decoration: none; } nav.crumbs a:hover { color: var(--link); text-decoration: underline; } /* ---- Article header + prose --------------------------------------------- */ h1 { font-size: clamp(1.95rem, 1.2rem + 3vw, 2.9rem); line-height: 1.1; letter-spacing: -.028em; font-weight: 800; margin: 0 0 16px; text-wrap: balance; color: var(--ink); } /* The single signature accent — a brand→teal "bridge" rule, once per page, sitting under the title's meta line. */ .meta { color: var(--ink-faint); font-size: .95rem; margin: 0 0 8px; font-variant-numeric: tabular-nums; } .meta::after { content: ""; display: block; width: 60px; height: 3px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--teal)); } .meta + p, p.lead { font-size: 1.16rem; line-height: 1.6; color: var(--ink-soft); margin: 26px 0 22px; } h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6rem); line-height: 1.22; letter-spacing: -.015em; font-weight: 750; margin: 44px 0 12px; text-wrap: balance; color: var(--ink); } h3 { font-size: 1.12rem; font-weight: 700; margin: 28px 0 8px; letter-spacing: -.01em; } /* Sticky 62px header + smooth scroll: any in-page anchor target must not land under the bar. No page has in-page anchors today; this is the guard so the first one that ships (a TOC, a #heading link) works instead of being buried. */ h1, h2, h3, [id] { scroll-margin-top: 78px; } p { margin: 0 0 16px; text-wrap: pretty; } .content ul, .content ol { padding-inline-start: 1.3em; margin: 0 0 18px; } .content li { margin: 7px 0; } .content li::marker { color: var(--brand); } strong { font-weight: 700; } hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; max-width: none; } /* ---- Hebrew, set as a first-class citizen -------------------------------- */ .he { font-family: var(--hebrew); unicode-bidi: isolate; direction: rtl; font-weight: 600; font-size: 1.06em; color: var(--he-ink); background: var(--he-tint); padding: .04em .38em; border-radius: 6px; white-space: nowrap; } /* In matrices and lists the Hebrew wants to breathe, not sit in a pill */ table .he, .phraselist .he { background: none; padding: 0; white-space: normal; } /* ---- CTA card ----------------------------------------------------------- */ .cta { max-width: none; margin: 36px 0; padding: 24px 24px 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--brand), var(--teal)); } .cta strong { display: block; font-size: 1.08rem; letter-spacing: -.01em; margin-bottom: 6px; color: var(--ink); } .cta a { font-weight: 600; } /* ---- Blog index: post cards --------------------------------------------- */ .postlist { max-width: none; display: grid; gap: 18px; margin: 30px 0; } .post { max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); } .post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .post h2 { margin: 0 0 8px; font-size: 1.32rem; font-weight: 750; } .post h2 a { color: var(--ink); text-decoration: none; } .post:hover h2 a { color: var(--link); } .post p { color: var(--ink-soft); margin: 0 0 12px; } .post time { color: var(--ink-faint); font-size: .85rem; font-variant-numeric: tabular-nums; } /* ---- How-to-say hub: the bilingual bridge rows --------------------------- */ .phraselist { max-width: none; list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 2px; } .phraselist li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 15px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background .15s var(--ease-out), border-color .15s var(--ease-out); } .phraselist li:hover { background: var(--surface); border-color: var(--line); } .phraselist a { font-weight: 650; text-decoration: none; font-size: 1.04rem; } .phraselist a:hover { text-decoration: underline; } .phraselist .he { font-size: 1.12em; color: var(--he-ink); } /* ---- Phrase page: the gender matrix (the signature data view) ------------ */ table.grid { max-width: none; width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .98rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } table.grid th, table.grid td { padding: 14px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); } table.grid thead th, table.grid tr:first-child th { background: var(--surface-2); color: var(--brand-deep); font-weight: 700; font-size: .9rem; letter-spacing: .01em; } table.grid th[scope="row"] { color: var(--ink-soft); font-weight: 650; background: color-mix(in srgb, var(--surface-2) 55%, transparent); } table.grid tr:last-child td, table.grid tr:last-child th { border-bottom: 0; } table.grid td .he { display: block; font-size: 1.32rem; line-height: 1.35; color: var(--he-ink); font-weight: 650; } table.grid td .translit { display: block; margin-top: 5px; color: var(--ink-faint); font-size: .85rem; font-weight: 400; font-style: italic; } table.grid tbody tr:hover td, table.grid tr:hover td { background: var(--answer-tint); } /* Notes + asides */ .note { max-width: var(--measure); font-size: .96rem; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 18px; margin: 20px 0; } .lead { color: var(--ink-soft); } /* ---- Reading-time chip (SEO-gated; visual only) -------------------------- */ .readtime { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .readtime::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); display: inline-block; } /* ---- Footer ------------------------------------------------------------- */ .site-footer { max-width: none; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 60%, transparent); margin-top: 8px; } .site-footer .foot { max-width: var(--page); margin: 0 auto; padding: 34px 24px 44px; color: var(--ink-soft); font-size: .9rem; } .site-footer .foot-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; } .site-footer a { color: var(--ink-soft); text-decoration: none; } .site-footer a:hover { color: var(--link); text-decoration: underline; } .site-footer .disclaimer { font-size: .8rem; color: var(--ink-faint); margin-top: 14px; max-width: 72ch; line-height: 1.6; } /* ---- Motion discipline -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .post:hover, .site-nav .pill:hover { transform: none; } }