/* ABV selected-direction — dark rich-card layout, ABV logo + purple accent. Copy per af:abv-copy-distilled. Spatial system per /deep7 + /first-principles (af:abv-layout-first-principles, HOF/2026/07/03/11): - geometric spacing scale (x1.6, supra-JND) in REM — follows user font scaling - fluid type via clamp() — continuous scaling, no breakpoint jumps - ONE alignment container (1080px max) shared by every content block - interactive targets >= 44px; dense constellation portfolio grid Gate: @psytest (af:psychophysics-visual-assessment) before promotion. */ :root { --accent:#b4a8fc; /* logo 'Ventures' bright indigo-violet fill */ --accent-hi:#cdc4ff; /* lighter indigo-violet for hover */ --accent-dim:#b4a8fc; /* small-text indigo-violet (tags, panel labels) */ /* x1.6 geometric scale, rem-based: 8/12/20/32/52/84 at 16px root */ --s1:0.5rem; --s2:0.75rem; --s3:1.25rem; --s4:2rem; --s5:3.25rem; --s6:5.25rem; --container:1080px; --pad-x:clamp(1rem, 4vw, 2rem); /* fluid side padding, no breakpoint */ } * { margin:0; padding:0; box-sizing:border-box; } /* global link color: every hyperlink is the logo indigo-violet unless a more specific rule (nav, card headings, muted easter-egg) intentionally overrides. */ a { color:var(--accent); text-decoration:none; } a:hover { color:var(--accent-hi); } body { font-family:-apple-system, 'Segoe UI', Helvetica, sans-serif; background:#0a0a14; color:#e8e8f0; line-height:1.6; /* short pages: pin the footer to the viewport bottom instead of floating mid-screen */ min-height:100svh; display:flex; flex-direction:column; } header { display:flex; justify-content:space-between; align-items:center; padding:var(--s1) var(--pad-x); border-bottom:1px solid #1e1e30; position:sticky; top:0; background:rgba(10,10,20,0.95); z-index:10; flex-wrap:wrap; gap:var(--s1); } header img { max-width:clamp(110px, 12vw, 150px); height:auto; } nav ul { list-style:none; display:flex; gap:var(--s1); align-items:center; flex-wrap:wrap; } /* >=44px tap targets (finger axiom) */ nav ul li a { color:#9aa; text-decoration:none; font-size:0.85rem; transition:color .2s; display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s1); } nav ul li a:hover { color:#fff; } /* brand accent: solid logo purple — no gradient (matches the logo) */ .brand { color:var(--accent); } .hero { width:100%; max-width:var(--container); margin:0 auto; padding:clamp(2rem, 6vw, 3.25rem) var(--pad-x) var(--s3); } .hero h1 { font-size:clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem); font-weight:800; line-height:1.12; letter-spacing:-0.02em; } .hero h2 { margin-top:var(--s2); font-size:clamp(1.2rem, 1rem + 0.9vw, 1.45rem); font-weight:600; color:#aab; } .hero p { margin-top:var(--s2); color:#aab; max-width:62ch; } .hero p:first-of-type { font-size:clamp(1.02rem, 0.95rem + 0.4vw, 1.15rem); color:#ccd; } .ctas { margin-top:var(--s3); } .cta-button { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s3); border:1px solid var(--accent); color:#e8e8f0; border-radius:999px; text-decoration:none; margin-right:var(--s2); transition:background .2s; } .cta-button:hover { background:var(--accent); } .cta-primary { background:var(--accent); color:#0a0a14; } .cta-primary:hover { background:var(--accent-hi); } /* `.page a` (global page-link color) out-specifies the button classes and would paint the label the same indigo-violet as the fill (pale-on-pale). Restore readable label colors. */ .page a.cta-button { color:#e8e8f0; } .page a.cta-primary, .page a.cta-primary:hover { color:#0a0a14; } .section-title { width:100%; max-width:var(--container); margin:0 auto; padding:var(--s3) var(--pad-x) 0; font-size:clamp(1.15rem, 1rem + 0.7vw, 1.3rem); } .portfolio-intro { width:100%; max-width:var(--container); margin:0 auto; padding:var(--s1) var(--pad-x) 0; color:#aab; font-size:1.02rem; } .grid { display:grid; width:100%; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:var(--s2); padding:var(--s3) var(--pad-x) var(--s4); max-width:var(--container); margin:0 auto; } .card { background:#12121f; border:1px solid #23233a; border-radius:8px; padding:var(--s3); transition:border-color .2s, transform .2s; position:relative; } .card:hover { border-color:var(--accent); transform:translateY(-2px); } .card h3 { font-size:1.1rem; line-height:1.3; } .card h3 a { color:#e8e8f0; text-decoration:none; } /* stretch the card's link over the whole card so the full hover area is clickable */ .card h3 a::after { content:""; position:absolute; inset:0; } .card:hover h3 a { color:var(--accent); } .blurb { font-size:0.82rem; color:#99a; margin:0.35rem 0 0.6rem; line-height:1.4; } .tags { display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s2); } .tag-cat { border-color:var(--accent); color:var(--accent); } .tag { font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; padding:2px var(--s1); border-radius:999px; border:1px solid #333355; color:var(--accent-dim); } /* /tag-navigation-ui: hovering (or tapping / focusing) a tag reveals its cohort — every portco sharing that tag is ringed in accent while the rest recede. Tags sit above the card's stretched link overlay so they receive their own pointer events. */ .tag { position:relative; z-index:2; cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .tag:hover, .tag:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; } .grid.tag-nav-active .card { opacity:0.38; transition:opacity .2s, border-color .2s, box-shadow .2s; } .grid.tag-nav-active .card.tag-match { opacity:1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 20px -6px var(--accent); } .card .tag.tag-on { background:var(--accent); color:#0a0a14; border-color:var(--accent); } .page { width:100%; max-width:720px; margin:0 auto; padding:var(--s4) var(--pad-x) var(--s5); } .page > h2 { font-size:clamp(1.4rem, 1.2rem + 0.9vw, 1.7rem); margin-bottom:var(--s3); } .page > p { color:#aab; margin-bottom:var(--s3); font-size:1.02rem; max-width:66ch; } .page a { color:var(--accent); } .panel { background:#12121f; border:1px solid #23233a; border-radius:8px; padding:var(--s3); margin-bottom:var(--s2); } .panel h3 { font-size:0.82rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-dim); margin-bottom:var(--s1); } .panel p { color:#ccd; } .closer { width:100%; text-align:left; padding:var(--s3) var(--pad-x) var(--s5); font-size:clamp(1.05rem, 1rem + 0.5vw, 1.2rem); color:#889; max-width:var(--container); margin:0 auto; } .closer strong { color:#e8e8f0; } /* small print: stealth-numbering note under the portfolio grid */ .footnote { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad-x) var(--s4); font-size:0.75rem; color:#667; } footer .disclaimer { max-width:var(--container); margin:0 auto var(--s2); font-size:0.68rem; line-height:1.5; color:#556; } footer a { color:var(--accent); } footer { border-top:1px solid #1e1e30; padding:var(--s3) var(--pad-x); font-size:0.75rem; color:#556; margin-top:auto; } .glossary-wrap { max-width:var(--container); margin:0 auto; padding:2rem var(--pad-x) 0; } .glossary-wrap > h2 { font-size:clamp(1.4rem,1.2rem+0.9vw,1.7rem); margin-bottom:0.4rem; } .glossary-intro { color:#aab; margin-bottom:0.5rem; } .glossary { margin:0; } .glossary dt { font-size:1.1rem; color:var(--accent); font-weight:700; margin-top:1.5rem; scroll-margin-top:90px; display:flex; align-items:center; gap:8px; } .gloss-group { color:#aab; font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; margin:2rem 0 0.25rem; font-weight:600; } .gloss-group:first-of-type { margin-top:1rem; } .fund-icon-sm { display:inline-flex; width:66px; height:66px; flex:none; color:var(--accent); } .fund-icon-sm svg { width:100%; height:100%; } /* dictionary part-of-speech: category | domain */ .glossary dt .pos { font-size:0.72rem; font-weight:400; font-style:italic; color:#778; letter-spacing:0.02em; margin-left:0.4rem; text-transform:none; } .glossary dd { margin:0.35rem 0 0 0; max-width:68ch; } .glossary .def { color:#e8e8f0; } .glossary .gloss-thesis { color:#aab; font-size:0.95rem; margin-top:0.3rem; max-width:68ch; } .glossary .gloss-ex { color:#889; font-size:0.82rem; margin-top:0.3rem; } .glossary .gloss-ex a { color:var(--accent); } .def-lead { font-size:1.25rem; color:#e8e8f0; line-height:1.5; margin:0.5rem 0 0.4rem; max-width:70ch; } .def-attr { color:var(--accent); font-size:0.88rem; margin-bottom:1.25rem; } .def-lead .headword { color:var(--accent); font-weight:700; } .glossary .proof-label { color:var(--accent); font-weight:600; } .fund-belief { color:#ccd; font-size:1.02rem; max-width:70ch; margin:0.75rem 0 0.5rem; } /* Fundamentals page — clean editorial presentation */ .page .checklist { list-style:none; margin:var(--s3) 0; padding:0; display:grid; gap:var(--s2); max-width:62ch; } .page .checklist li { display:flex; align-items:center; gap:0.75em; color:#e8e8f0; line-height:1.5; font-size:1.05rem; } .page .checklist li::before { content:'\2713'; display:inline-flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; flex:none; border:1.5px solid var(--accent); border-radius:6px; color:var(--accent); font-size:0.8em; font-weight:700; margin-top:0.15em; } .page .checklist li strong { color:#e8e8f0; font-weight:600; } .page .lead-para { color:#ccd; font-size:1.05rem; line-height:1.65; max-width:66ch; margin:var(--s3) 0 var(--s4); } .page .fund-section { font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-dim); font-weight:600; margin:var(--s4) 0 var(--s2); } .page .fund-closer { color:#99a; font-size:0.95rem; max-width:66ch; margin-top:var(--s3); } /* founder-journey (simple top-down mermaid SVG, inlined) + distilled summary and a per-fundamental value-add / failure-mode grid. Mobile-first: one column that reads top-to-bottom; breaks out of the prose column and scales to more columns on a wider (desktop) screen. */ .fund-flow { position:relative; left:50%; transform:translateX(-50%); width:min(var(--container), 94vw); margin:var(--s4) 0; } .fund-flow .fund-summary { color:#aab; font-size:0.95rem; margin-top:var(--s3); } .fund-flow .fund-summary > p { margin:0 auto var(--s2); max-width:70ch; } .fund-flow .fund-summary-lead { color:var(--accent); font-weight:600; } .fund-flow .fund-summary-coda { color:#99a; font-size:0.9rem; } .fund-flow .thesis-grid-lead { color:#aab; } /* the four things we look for — a clean checklist (replaces the icon grid) */ .fund-flow .look-for-lead { color:#aab; margin:var(--s2) 0 var(--s1); } .fund-flow .checklist { list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:var(--s2); max-width:44ch; } .fund-flow .checklist li { display:flex; align-items:center; color:#e8e8f0; font-size:1.05rem; } .fund-flow .checklist li::before { content:'\2713'; display:inline-flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; margin-right:0.7em; flex:none; border:1.5px solid var(--accent); border-radius:6px; color:var(--accent); font-size:0.85em; font-weight:700; } /* mobile-first: 1 column; auto-fit to 2–4 columns as width allows */ .fund-flow .thesis-grid { display:grid; grid-template-columns:1fr; gap:var(--s2); margin:var(--s1) 0 var(--s3); } @media (min-width:560px){ .fund-flow .thesis-grid { grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); } } .fund-flow .thesis-card { background:#12121f; border:1px solid #23233a; border-radius:8px; padding:var(--s3); text-align:left; } /* card heading: stack the (large) trademark icon above the wordmark so the copy isn't crammed horizontally beside it — text gets the full card width. */ .fund-flow .thesis-card h4 { color:var(--accent); font-size:0.92rem; margin:0 0 var(--s1); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); } /* ABV trademark fundamental marks — rendered art (photo-res, generated on grace/ ComfyUI), presented as rounded icon tiles (their dark ground matches the theme). */ .fund-flow .fund-icon { display:inline-flex; width:80px; height:80px; flex:none; border-radius:14px; overflow:hidden; border:1px solid #23233a; } .fund-flow .fund-icon img { width:100%; height:100%; object-fit:cover; display:block; } .fund-flow .fund-icon svg { width:100%; height:100%; } .fund-flow .thesis-card h4 sup, .fund-flow .thesis-card h4 .tm { font-size:0.6em; color:#778; font-weight:400; } .fund-flow .tm-note { color:#556; font-size:0.72rem; margin-top:var(--s2); } .fund-flow .tc-we { color:#ccd; font-size:0.9rem; line-height:1.5; margin:0 0 var(--s1); } .fund-flow .tc-others { color:#889; font-size:0.85rem; line-height:1.45; margin:0; } .fund-flow .tc-others::before { content:"Where others fail — "; color:#667; } /* click-to-fullscreen: fill the viewport, dark backdrop, fit the diagram */ .terms-egg { max-width:var(--container); margin:0 auto; padding:0 var(--pad-x) var(--s4); font-size:0.72rem; color:#445; } .terms-egg a { color:#556; } .terms-egg a:hover { color:var(--accent); } .punch { font-size:1.2rem; color:var(--accent); font-style:italic; margin-top:1.75rem; max-width:60ch; } /* tag icons */ .tag { display:inline-flex; align-items:center; gap:3px; } .tag::before { content:''; width:12px; height:12px; flex:none; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .tag[data-tag="B2B"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="Consumer"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="Dual-Use"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="Defense"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="Health"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="AI"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="Robotics"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="Aerospace"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } .tag[data-tag="Tech-Bio"]::before { -webkit-mask-image:url("data:image/svg+xml,"); mask-image:url("data:image/svg+xml,"); } /* end tag icons */ /* EN | 日本語 language switcher (hof:abv-page-i18n) */ .lang-switch{display:inline-flex;align-items:center;gap:7px;margin-left:8px;padding-left:12px;border-left:1px solid #2a2a44} .lang-switch a{color:#8a8aa8;font-size:0.82rem} .lang-switch a.on{color:var(--accent);font-weight:700} .lang-switch a:hover{color:#e8e8f0} .lang-switch span{color:#3a3a55;font-size:0.72rem} /* RTL (Hebrew) — bidi pass; content aligns to writing direction automatically */ [dir="rtl"] .lang-switch { border-left:none; border-right:1px solid #2a2a44; padding-left:0; padding-right:12px; margin-left:0; margin-right:8px; } [dir="rtl"] .hero, [dir="rtl"] .page, [dir="rtl"] .panel, [dir="rtl"] .section-title { text-align:right; } [dir="rtl"] .ctas { flex-direction:row-reverse; justify-content:flex-end; } [dir="rtl"] .cta-button { margin-right:0; margin-left:var(--s2); } /* language auto-detect suggestion banner (i18n-preference.js) */ #abv-lang-bar{position:fixed;top:0;left:0;right:0;z-index:200;background:#12121f;border-bottom:1px solid var(--accent);color:#e8e8f0;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 16px;font-size:0.92rem;flex-wrap:wrap} #abv-lang-bar button{background:var(--accent);color:#0a0a14;border:none;border-radius:999px;padding:5px 15px;font-size:0.84rem;font-weight:700;cursor:pointer} #abv-lang-bar button#abv-lang-no{background:transparent;color:#9a9ac0;border:1px solid #333355;font-weight:500}