/* ============================================================ subventures.css — Marinox Group Three forces, three pages, one stylesheet: · MARVEX (Foundation) — The vessel · MARIIX (Destination) — The waterfront · OCEION (Digital) — The operating system of the sea Contents (in order): 1. Base shared system (hero, sec-head, quote, crosslink, CTA, etc.) 2. MARVEX-specific (already inline in base) 3. MARIIX additions — orbital diagram, transformation band, gap, archetypes, model, outlets, value chain, audience, partners 4. OCEION additions — wave-mark, audiences, drift band, MOS, per-venture cursor re-tints (OCEION + MARIIX) ============================================================ */ /* ============================================================ subventures.css — Marinox Group Shared styles for MARVEX / MARIIX / OCEION detail pages. Each page sets --acc via [data-venture="..."] on . Consistent rhythm with ventures.css (1280px, 3rem, hairline). ============================================================ */ .subventure { --prose-strong: rgba(200,216,222,.88); --prose-body: rgba(200,216,222,.82); --prose-dim: rgba(200,216,222,.60); --rule: rgba(200,216,222,.10); --rule-strong: rgba(200,216,222,.18); /* Venture colors. Body sets data-venture to pick one as --acc. */ --c-marvex: #d4a832; --c-mariix: #3ecfcf; --c-oceion: #9b6fc9; } .subventure[data-venture="marvex"] { --acc: var(--c-marvex); --acc-bg: #070e14; } .subventure[data-venture="mariix"] { --acc: var(--c-mariix); --acc-bg: #050f17; } .subventure[data-venture="oceion"] { --acc: var(--c-oceion); --acc-bg: #070915; } /* Override the global nav brand accent (which is hard-cyan) with the current venture's color — the "span" inside .nav-logo-text. */ .subventure .nav-logo-text span { color: var(--acc); } /* ───────────────────────────────────────────────────────────── SV-HERO — wordmark-led, editorial, no canvas. ───────────────────────────────────────────────────────────── */ .sv-hero { padding: calc(var(--nav-h) + 4.5rem) 0 4.5rem; border-bottom: 1px solid var(--rule); position: relative; background: var(--acc-bg); } .sv-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 3rem; } .sv-crumbs { font-family: var(--fb); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--prose-dim); display: flex; align-items: center; gap: .7rem; margin-bottom: 3.5rem; } .sv-crumbs a { color: var(--prose-dim); border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; } .sv-crumbs a:hover { color: var(--acc); border-bottom-color: color-mix(in srgb, var(--acc) 50%, transparent); } .sv-crumbs .sep { opacity: .4; } .sv-crumbs .here { color: var(--prose-strong); } .sv-hero-top { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: baseline; margin-bottom: 3rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule); } .sv-hero-force { font-family: var(--fb); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); display: inline-flex; align-items: center; gap: .9rem; } .sv-hero-force::before { content: ''; width: 28px; height: 1px; background: var(--acc); opacity: .6; } .sv-hero-num { font-family: var(--fb); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--prose-dim); } /* ───────────────────────────────────────────────────────────── sv-hero-status — replaces .sv-hero-num in the right column of .sv-hero-top. Fix 2.3a (Phase 2): closes the venture-level operational gap by giving each hero a credible status line. ───────────────────────────────────────────────────────────── */ .sv-hero-status { font-family: var(--fb); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--prose-strong); text-align: right; max-width: 38ch; line-height: 1.6; } .sv-hero-status .ss-label { color: var(--acc); letter-spacing: .28em; margin-right: .55rem; } .sv-hero-status .ss-sep { color: var(--prose-dim); margin: 0 .45rem; } @media (max-width: 720px) { .sv-hero-top { grid-template-columns: 1fr; gap: 1.2rem; } .sv-hero-status { text-align: left; } } .sv-wordmark { font-family: var(--fd); font-weight: 400; font-size: clamp(4.2rem, 12vw, 11rem); line-height: .9; letter-spacing: .02em; color: #eef4f6; margin: 0 0 2rem; } .sv-wordmark .a { color: var(--acc); font-style: normal; } .sv-wordmark .dot { color: var(--acc); } .sv-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 5rem; align-items: end; } .sv-hero-role { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.25; color: var(--prose-strong); max-width: 14ch; } .sv-hero-role em { color: var(--acc); font-style: italic; } .sv-hero-lede { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.8; color: var(--prose-body); max-width: 54ch; } /* ───────────────────────────────────────────────────────────── Generic section header used by most SV sections. ───────────────────────────────────────────────────────────── */ .sv-sec { padding: 6rem 0; border-bottom: 1px solid var(--rule); } .sv-sec-inner { max-width: 1280px; margin: 0 auto; padding: 0 3rem; } .sv-sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-bottom: 3.5rem; align-items: baseline; } .sv-sec-kicker { font-family: var(--fb); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--prose-dim); } .sv-sec-kicker::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--rule-strong); margin-right: .8rem; vertical-align: middle; } .sv-sec-title { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.015em; color: #e8f0f3; max-width: 16ch; } .sv-sec-title em { color: var(--acc); font-style: italic; } .sv-sec-desc { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.8; color: var(--prose-body); max-width: 54ch; } /* ───────────────────────────────────────────────────────────── SV-OVERVIEW — manifesto prose + stat slab. ───────────────────────────────────────────────────────────── */ .sv-overview-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 5rem; align-items: start; } .sv-manifesto p { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.8; color: var(--prose-body); max-width: 52ch; margin-bottom: 1.2rem; } .sv-manifesto p:first-child { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 1.8vw, 1.6rem); line-height: 1.5; color: var(--prose-strong); max-width: 40ch; margin-bottom: 2rem; } .sv-manifesto p:first-child em { color: var(--acc); font-style: italic; } .sv-stats { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .sv-stat { padding: 1.8rem 0 1.6rem; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: baseline; } .sv-stat:last-child { border-bottom: none; } .sv-stat-num { font-family: var(--fd); font-weight: 300; font-size: clamp(2.4rem, 3.5vw, 3rem); line-height: .95; color: var(--acc); letter-spacing: -.01em; min-width: 3.5ch; } .sv-stat-num sup { font-size: .4em; letter-spacing: .1em; color: var(--prose-dim); font-family: var(--fb); margin-left: .2em; vertical-align: .8em; } .sv-stat-body { display: block; } .sv-stat-k { font-family: var(--fb); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--prose-dim); display: block; margin-bottom: .4rem; } .sv-stat-v { font-family: var(--fb); font-size: .95rem; line-height: 1.55; color: var(--prose-body); } /* ───────────────────────────────────────────────────────────── SV-ANATOMY — canvas deep-dive with technical frame. ───────────────────────────────────────────────────────────── */ .sv-anatomy .sv-canvas-wrap { position: relative; aspect-ratio: 16 / 10; min-height: 520px; border: 1px solid var(--rule); background: rgba(255,255,255,.012); overflow: hidden; margin-top: 1rem; } .sv-anatomy canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Corner ticks */ .sv-canvas-wrap::before, .sv-canvas-wrap::after { content: ''; position: absolute; width: 16px; height: 16px; border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); pointer-events: none; z-index: 2; } .sv-canvas-wrap::before { top: 12px; left: 12px; border-right: none; border-bottom: none; } .sv-canvas-wrap::after { bottom: 12px; right: 12px; border-left: none; border-top: none; } .sv-canvas-meta { position: absolute; left: 0; right: 0; top: 0; padding: 1rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--fb); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--prose-dim); background: linear-gradient(to bottom, rgba(3,8,12,.72), rgba(3,8,12,0)); pointer-events: none; z-index: 2; } .sv-canvas-meta .c-accent { color: var(--acc); } .sv-canvas-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--fb); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--prose-dim); background: linear-gradient(to top, rgba(3,8,12,.72), rgba(3,8,12,0)); pointer-events: none; z-index: 2; } .sv-canvas-foot .c-accent { color: var(--acc); } /* Legend under the canvas */ .sv-legend { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .sv-legend-cell { padding: 1.3rem 1.4rem; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: .5rem; } .sv-legend-cell:last-child { border-right: none; } .sv-legend-k { font-family: var(--fb); font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); } .sv-legend-v { font-family: var(--fb); font-size: .92rem; line-height: 1.55; color: var(--prose-body); } /* ───────────────────────────────────────────────────────────── SV-MODULES — numbered offer breakdown, calm type-only. ───────────────────────────────────────────────────────────── */ .sv-modules-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); } .sv-module { display: grid; grid-template-columns: 1fr 3fr 4fr; gap: 3rem; padding: 2.6rem 0; border-bottom: 1px solid var(--rule); align-items: start; } .sv-module:last-child { border-bottom: 1px solid var(--rule-strong); } .sv-mod-head { display: flex; flex-direction: column; gap: .6rem; } .sv-mod-num { font-family: var(--fb); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); } .sv-mod-name { font-family: var(--fd); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: #e8f0f3; letter-spacing: -.005em; } .sv-mod-role { font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.35; color: var(--prose-strong); max-width: 22ch; } .sv-mod-body p { font-family: var(--fb); font-size: 1rem; line-height: 1.75; color: var(--prose-body); margin-bottom: 1rem; max-width: 54ch; } .sv-mod-specs { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); } .sv-mod-specs li { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); font-family: var(--fb); font-size: .88rem; line-height: 1.55; color: var(--prose-body); } .sv-mod-specs li:last-child { border-bottom: none; } .sv-mod-specs .spec-k { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--prose-dim); padding-top: .14rem; } /* ───────────────────────────────────────────────────────────── SV-QUOTE — pull quote band. ───────────────────────────────────────────────────────────── */ .sv-quote { padding: 7rem 0; border-bottom: 1px solid var(--rule); background: radial-gradient(ellipse 70% 50% at 50% 50%, color-mix(in srgb, var(--acc) 8%, transparent), transparent 70%); } .sv-quote-inner { max-width: 920px; margin: 0 auto; padding: 0 3rem; text-align: left; position: relative; } .sv-quote-mark { font-family: var(--fd); font-style: italic; font-size: 7rem; line-height: 1; color: color-mix(in srgb, var(--acc) 25%, transparent); position: absolute; left: 1.5rem; top: -1.5rem; user-select: none; pointer-events: none; } .sv-quote-body { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.4; color: #eef4f6; letter-spacing: -.005em; margin-bottom: 2rem; max-width: 28ch; } .sv-quote-body em { color: var(--acc); font-style: italic; } .sv-quote-attr { font-family: var(--fb); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--prose-dim); padding-top: 1.6rem; border-top: 1px solid var(--rule); display: inline-block; padding-right: 4rem; } .sv-quote-attr .c-accent { color: var(--acc); } /* ───────────────────────────────────────────────────────────── SV-PARTNERS — typology matrix, four-column grid. Columns: Code · Partner type · What they get · The handshake ───────────────────────────────────────────────────────────── */ .sv-partners-table { border: 1px solid var(--rule-strong); } .sv-pt-row { display: grid; grid-template-columns: 90px 1.3fr 1.4fr 1.7fr; border-bottom: 1px solid var(--rule); } .sv-pt-row:last-child { border-bottom: none; } .sv-pt-row > div { padding: 1.4rem 1.4rem; border-right: 1px solid var(--rule); font-family: var(--fb); font-size: .95rem; line-height: 1.6; color: var(--prose-body); display: flex; align-items: center; } .sv-pt-row > div:last-child { border-right: none; } .sv-pt-head { background: rgba(255,255,255,.015); } .sv-pt-head > div { font-family: var(--fb); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--prose-dim); padding: 1rem 1.4rem; } .sv-pt-code { font-family: var(--fb); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); } .sv-pt-name { font-family: var(--fd); font-size: 1.15rem; color: #e8f0f3; letter-spacing: .01em; } @media (max-width: 760px) { .sv-pt-row { grid-template-columns: 1fr; } .sv-pt-row > div { border-right: none; border-bottom: 1px solid var(--rule); } .sv-pt-row > div:last-child { border-bottom: none; } .sv-pt-head { display: none; } } /* ───────────────────────────────────────────────────────────── SV-CROSSLINK — two sibling cards. ───────────────────────────────────────────────────────────── */ .sv-cross-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .sv-cross-cell { padding: 2.4rem 2rem 2.2rem; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1.1rem; position: relative; transition: background .3s ease; } .sv-cross-cell:last-child { border-right: none; } .sv-cross-cell:hover, .sv-cross-cell:focus-within { background: rgba(255,255,255,.012); } .sv-cross-cell[data-v="marvex"] { --cross-c: var(--c-marvex); } .sv-cross-cell[data-v="mariix"] { --cross-c: var(--c-mariix); } .sv-cross-cell[data-v="oceion"] { --cross-c: var(--c-oceion); } .sv-cross-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .sv-cross-meta.is-left { justify-content: flex-start; } .sv-cross-num { font-family: var(--fb); font-size: .68rem; letter-spacing: .26em; color: var(--prose-dim); } .sv-cross-force { font-family: var(--fb); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--prose-dim); } .sv-cross-wordmark { font-family: var(--fd); font-weight: 400; font-size: clamp(2.4rem, 3.6vw, 3rem); letter-spacing: .06em; line-height: .95; color: #e8f0f3; } .sv-cross-wordmark .a { color: var(--cross-c); } .sv-cross-role { font-family: var(--fd); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: var(--prose-strong); } .sv-cross-handshake { font-family: var(--fb); font-size: .92rem; line-height: 1.7; color: var(--prose-body); padding-top: 1rem; border-top: 1px solid var(--rule); } .sv-cross-handshake .c-accent { color: var(--acc); font-weight: 500; } .sv-cross-link { font-family: var(--fb); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; display: inline-flex; gap: .6rem; margin-top: auto; padding-top: 1rem; color: var(--cross-c); transition: gap .3s ease; } .sv-cross-cell:hover .sv-cross-link { gap: 1rem; } .sv-cross-cell-link { position: absolute; inset: 0; z-index: 1; } .sv-cross-cell-link:focus-visible { outline: 1px solid currentColor; outline-offset: -8px; } /* ───────────────────────────────────────────────────────────── SV-CTA — closing band. ───────────────────────────────────────────────────────────── */ .sv-cta { padding: 7rem 0 8rem; } .sv-cta-inner { max-width: 720px; margin: 0 auto; padding: 0 3rem; } .sv-cta-eyebrow { font-family: var(--fb); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin-bottom: 1.4rem; display: block; } .sv-cta-title { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.1; letter-spacing: -.015em; color: #eef4f6; margin-bottom: 1.6rem; max-width: 22ch; } .sv-cta-title em { color: var(--acc); font-style: italic; } .sv-cta-body { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.8; color: var(--prose-body); margin-bottom: 2.4rem; max-width: 52ch; } .sv-cta-links { display: flex; gap: 1.2rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid var(--rule); } .sv-btn { display: inline-flex; align-items: center; gap: .9rem; padding: .95rem 1.8rem; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); color: var(--acc); font-family: var(--fb); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; transition: background .3s ease, color .3s ease, border-color .3s ease; } .sv-btn:hover, .sv-btn:focus-visible { background: var(--acc); color: #06131b; border-color: var(--acc); } .sv-btn .arr { transition: transform .3s ease; } .sv-btn:hover .arr { transform: translateX(4px); } .sv-sub-btn { display: inline-flex; gap: .7rem; align-items: center; padding: .95rem .2rem; font-family: var(--fb); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--prose-dim); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; } .sv-sub-btn:hover { color: var(--prose-strong); border-color: var(--rule-strong); } /* ───────────────────────────────────────────────────────────── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 1020px) { .sv-hero-inner, .sv-sec-inner, .sv-quote-inner, .sv-cta-inner { padding-left: 1.5rem; padding-right: 1.5rem; } .sv-hero-grid, .sv-sec-head, .sv-overview-grid { grid-template-columns: 1fr; gap: 2rem; } .sv-legend { grid-template-columns: 1fr; } .sv-legend-cell { border-right: none; border-bottom: 1px solid var(--rule); } .sv-legend-cell:last-child { border-bottom: none; } .sv-module { grid-template-columns: 1fr; gap: 1.2rem; } .sv-mod-specs li { grid-template-columns: 110px 1fr; } .sv-pt-row { grid-template-columns: 1fr; } .sv-pt-row > div { border-right: none; border-bottom: 1px solid var(--rule); } .sv-pt-row > div:last-child { border-bottom: none; } .sv-pt-head { display: none; } .sv-pt-row > div[data-label]::before { content: attr(data-label) ' · '; color: var(--prose-dim); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; display: block; margin-bottom: .4rem; } .sv-cross-grid { grid-template-columns: 1fr; } .sv-cross-cell { border-right: none; border-bottom: 1px solid var(--rule); } .sv-cross-cell:last-child { border-bottom: none; } .sv-anatomy .sv-canvas-wrap { min-height: 380px; aspect-ratio: 4/3; } } /* ============================================================ ── APPENDED (MARVEX page refresh) ────────────────────────── New rules added for the MARVEX detail page update. All rules are either: - Generic (e.g. .sv-portfolio-head, .sv-pf-card) so that MARIIX/OCEION can adopt the same pattern later, OR - Scoped under .subventure[data-venture="marvex"] so they do not affect MARIIX or OCEION. ============================================================ */ /* ── Italic-serif accent span (used in anatomy + portfolio H2) ── */ .sv-sec-title .ai { color: var(--acc); font-style: italic; font-family: var(--fd); font-weight: 400; } /* ── Stat tile — infinity glyph variant ── The infinity character renders narrower vertically than numerals in Cormorant; bump its size so it reads as equal weight to "9" / "1". */ .sv-stat-num-sym { font-size: clamp(3rem, 4.2vw, 3.8rem); line-height: .85; letter-spacing: 0; position: relative; top: .05em; } /* ── Anatomy: centered heading + hint (vs. two-column sv-sec-head) ── */ .sv-anatomy-head { text-align: center; max-width: 900px; margin: 0 auto 3.5rem; padding: 0 2rem; } .sv-anatomy-head .sv-sec-kicker { display: block; margin-bottom: 1.4rem; } .sv-anatomy-head .sv-sec-title { max-width: none; font-size: clamp(2.2rem, 4vw, 3.4rem); margin: 0 auto 1.2rem; } .sv-anatomy-hint { font-family: var(--fb); font-size: .95rem; color: var(--prose-dim); line-height: 1.6; } /* ── Portfolio: centered heading ── */ .sv-portfolio-head { text-align: center; margin-bottom: 4rem; padding: 0 2rem; } .sv-portfolio-head .sv-sec-kicker { display: block; margin-bottom: 1.2rem; } .sv-portfolio-head .sv-sec-title { margin: 0 auto; max-width: none; } /* ── Disciplines — vertical rows, each row has N product cards ── */ .sv-discipline { border-top: 1px solid var(--rule-strong); padding: 2.5rem 0 2rem; } .sv-discipline:last-child { border-bottom: 1px solid var(--rule-strong); } .sv-discipline-head { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: baseline; margin-bottom: 2rem; } .sv-discipline-label { font-family: var(--fb); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); } .sv-discipline-desc { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--prose-strong); line-height: 1.5; max-width: 48ch; justify-self: start; } .sv-discipline-count { font-family: var(--fb); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--prose-dim); } .sv-discipline-cards { display: grid; gap: 0; border-top: 1px solid var(--rule); } .sv-discipline[data-count="6"] .sv-discipline-cards { grid-template-columns: repeat(3, 1fr); } .sv-discipline[data-count="2"] .sv-discipline-cards { grid-template-columns: repeat(2, 1fr); } .sv-discipline[data-count="1"] .sv-discipline-cards { grid-template-columns: 1fr; } /* ── Portfolio card (product tile with brand wordmark) ── */ .sv-pf-card { position: relative; padding: 2rem 1.8rem 1.8rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1.1rem; background: rgba(255,255,255,.006); transition: background .35s ease, border-color .35s ease; --brand: var(--acc); /* overridden inline per card */ } .sv-discipline[data-count="6"] .sv-pf-card:nth-child(3n) { border-right: none; } .sv-discipline[data-count="2"] .sv-pf-card:last-child { border-right: none; } .sv-discipline[data-count="1"] .sv-pf-card { border-right: none; } .sv-pf-card:hover, .sv-pf-card:focus-within { background: color-mix(in srgb, var(--brand) 6%, transparent); } .sv-pf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand); transform-origin: left; transform: scaleX(0); transition: transform .4s cubic-bezier(.16,1,.3,1); } .sv-pf-card:hover::before, .sv-pf-card:focus-within::before { transform: scaleX(1); } .sv-pf-num { font-family: var(--fb); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--prose-dim); } .sv-pf-mark { height: 130px; display: flex; align-items: center; justify-content: flex-start; margin: .4rem 0 .8rem; overflow: hidden; } .sv-pf-mark img, .sv-pf-mark svg { height: 100%; width: auto; max-width: 100%; display: block; } .sv-pf-title { font-family: var(--fd); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: #eef4f6; letter-spacing: -.005em; } .sv-pf-desc { font-family: var(--fb); font-size: .92rem; line-height: 1.6; color: var(--prose-body); flex-grow: 1; } .sv-pf-link { font-family: var(--fb); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--prose-dim); margin-top: .4rem; display: inline-flex; gap: .5rem; align-items: center; transition: color .3s, gap .3s; } .sv-pf-link .arr { transition: transform .3s; } .sv-pf-card:hover .sv-pf-link { color: var(--brand); gap: .8rem; } .sv-pf-card:hover .sv-pf-link .arr { transform: translateX(3px); } .sv-pf-card-link { position: absolute; inset: 0; z-index: 1; } .sv-pf-card-link:focus-visible { outline: 1px solid var(--brand); outline-offset: -8px; } /* ── Quote — centered variant used on MARVEX ── */ .sv-quote-inner { /* Override default left-align to center — safe because MARIIX/OCEION don't currently use sv-quote. If they adopt it later, scope this to a specific class. */ text-align: center; } .sv-quote-mark { /* Break out of absolute positioning used elsewhere, sit above the body */ position: static; display: block; margin: 0 auto 1rem; left: auto; top: auto; color: color-mix(in srgb, var(--acc) 30%, transparent); } .sv-quote-body { margin: 0 auto 2.4rem; max-width: 26ch; } .sv-quote-divider { display: block; width: min(420px, 60%); height: 1px; background: var(--rule); margin: 0 auto 1.6rem; } .sv-quote-attr { /* Strip the left-aligned border-top treatment — centered variant uses the separate .sv-quote-divider instead. */ padding-top: 0; padding-right: 0; border-top: none; display: inline-block; } /* ── CTA hierarchy refinement: primary button + divider + sub links ── */ .sv-cta-secondary { display: inline-flex; align-items: center; gap: 1rem; padding-left: .6rem; border-left: 1px solid var(--rule-strong); } /* ── Visually-hidden helper (for

on anatomy plate) ── */ .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Reveal classes (used on MARVEX; may be adopted by siblings later) ── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal.visible, .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .10s; } .reveal-d2 { transition-delay: .22s; } .reveal-d3 { transition-delay: .36s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Responsive: Portfolio cards stack on mobile ── */ @media (max-width: 1020px) { .sv-discipline-head { grid-template-columns: 1fr; gap: .6rem; } .sv-discipline[data-count="6"] .sv-discipline-cards, .sv-discipline[data-count="2"] .sv-discipline-cards, .sv-discipline[data-count="1"] .sv-discipline-cards { grid-template-columns: 1fr; } .sv-pf-card { border-right: none !important; } .sv-pf-mark { height: 100px; } .sv-cta-secondary { padding-left: 0; border-left: none; } } /* ============================================================ CURSOR — MARVEX gold scoped override Default cursor.css uses Marinox cyan. This override tints it gold only when . MARIIX keeps cyan (matches its venture color). OCEION will add its own purple override when updated. ============================================================ */ .subventure[data-venture="marvex"] .mx-cursor-dot { background: var(--acc); } .subventure[data-venture="marvex"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 55%, transparent); } .subventure[data-venture="marvex"] .mx-cursor-ring::after { background: radial-gradient( circle at 35% 35%, color-mix(in srgb, var(--acc) 12%, transparent) 0%, transparent 70% ); } .subventure[data-venture="marvex"] .mx-trail-dot { background: var(--acc); } body.subventure[data-venture="marvex"][data-cursor-state="hover"] .mx-cursor-dot { background: var(--acc); } body.subventure[data-venture="marvex"][data-cursor-state="hover"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 75%, transparent); } body.subventure[data-venture="marvex"][data-cursor-state="magnetic"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 90%, transparent); background: color-mix(in srgb, var(--acc) 8%, transparent); } body.subventure[data-venture="marvex"][data-cursor-state="text"] .mx-cursor-dot { background: color-mix(in srgb, var(--acc) 90%, transparent); } body.subventure[data-venture="marvex"][data-cursor-state="drag"] .mx-cursor-dot { background: color-mix(in srgb, var(--acc) 55%, transparent); } body.subventure[data-venture="marvex"][data-cursor-state="drag"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 45%, transparent); } .subventure[data-venture="marvex"] .mx-cursor-label { color: var(--acc); } .subventure[data-venture="marvex"] .mx-cursor-ripple { border-color: color-mix(in srgb, var(--acc) 60%, transparent); } /* ============================================================ MARIIX additions (April 2026) ============================================================ */ /* ───────────────────────────────────────────────────────────── Shared 720px prose container (audit Decision F2) Usable on any sv-section for long-read calm blocks. ───────────────────────────────────────────────────────────── */ .sv-prose-inner { max-width: 720px; margin: 0 auto; padding: 0 3rem; } /* ───────────────────────────────────────────────────────────── §2 SV-TRANSFORMATION — type + hairline split The whole MARIIX thesis in one calm band. ───────────────────────────────────────────────────────────── */ .sv-transform { padding: 7rem 0; border-bottom: 1px solid var(--rule); position: relative; background: var(--void); } .sv-transform-inner { max-width: 1280px; margin: 0 auto; padding: 0 3rem; } .sv-transform-kicker { font-family: var(--fb); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--prose-dim); display: block; text-align: center; margin-bottom: 3rem; } .sv-transform-split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 3rem; align-items: center; margin-bottom: 3.5rem; } .sv-transform-side { font-family: var(--fd); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.02em; } .sv-transform-side.left { text-align: right; color: var(--prose-dim); } .sv-transform-side.right { text-align: left; color: #eef4f6; } .sv-transform-side.right em { color: var(--acc); font-style: italic; } .sv-transform-rule { width: 1px; height: 120%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--acc) 55%, transparent) 25%, color-mix(in srgb, var(--acc) 55%, transparent) 75%, transparent); align-self: stretch; position: relative; } .sv-transform-rule::before { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background: var(--acc); transform: translate(-50%, -50%) rotate(45deg); } .sv-transform-body { max-width: 720px; margin: 0 auto; text-align: center; font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.55; color: var(--prose-strong); } .sv-transform-body em { color: var(--acc); font-style: italic; } /* ───────────────────────────────────────────────────────────── §3 SV-GAP — The Opportunity argument Two-part headline + prose + pull-quote on the right. ───────────────────────────────────────────────────────────── */ .sv-gap-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 5rem; align-items: start; } .sv-gap-headline { font-family: var(--fd); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -.015em; color: #e8f0f3; margin-bottom: 2rem; } .sv-gap-headline em { color: var(--acc); font-style: italic; } .sv-gap-body p { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.8; color: var(--prose-body); max-width: 52ch; margin-bottom: 1.2rem; } .sv-gap-quote { position: relative; padding: 2rem 0 0 2.4rem; border-left: 1px solid var(--rule-strong); margin-left: 1rem; } .sv-gap-quote-mark { position: absolute; left: 1rem; top: .2rem; font-family: var(--fd); font-style: italic; font-size: 3rem; line-height: 1; color: color-mix(in srgb, var(--acc) 40%, transparent); } .sv-gap-quote p { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.5; color: var(--prose-strong); } .sv-gap-quote em { color: var(--acc); font-style: italic; } /* ───────────────────────────────────────────────────────────── §4 SV-ARCHETYPE — Three stacked archetypes Third row (Destination) is highlighted as the MARIIX category. ───────────────────────────────────────────────────────────── */ .sv-arch-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); } .sv-arch { display: grid; grid-template-columns: 100px 1fr 1.4fr auto; gap: 2.5rem; align-items: center; padding: 2.6rem 0; border-bottom: 1px solid var(--rule); transition: background .3s ease; } .sv-arch:last-child { border-bottom: 1px solid var(--rule-strong); } .sv-arch-num { font-family: var(--fd); font-weight: 300; font-size: clamp(2.4rem, 3.4vw, 3rem); line-height: 1; color: var(--prose-dim); letter-spacing: -.01em; } .sv-arch-name { font-family: var(--fd); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.15; color: #e8f0f3; letter-spacing: -.005em; } .sv-arch-body { font-family: var(--fb); font-size: 1rem; line-height: 1.7; color: var(--prose-body); max-width: 60ch; } .sv-arch-tag { font-family: var(--fb); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--prose-dim); white-space: nowrap; padding: .4rem 1rem; border: 1px solid var(--rule-strong); border-radius: 2px; } .sv-arch.is-destination { background: color-mix(in srgb, var(--acc) 4%, transparent); } .sv-arch.is-destination .sv-arch-num { color: var(--acc); } .sv-arch.is-destination .sv-arch-name em { color: var(--acc); font-style: italic; } .sv-arch.is-destination .sv-arch-tag { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); } /* ───────────────────────────────────────────────────────────── §5 SV-MODEL — Orbital canvas frame + adaptive note + triptych Note: the orbital canvas itself is rendered via subventures.js on element id="sv-canvas-orbital". ───────────────────────────────────────────────────────────── */ .sv-model .sv-canvas-wrap { position: relative; aspect-ratio: 16 / 11; min-height: 560px; border: 1px solid var(--rule); background: rgba(255,255,255,.012); overflow: hidden; margin-top: 1rem; } .sv-model canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .sv-model .sv-canvas-wrap::before, .sv-model .sv-canvas-wrap::after { content: ''; position: absolute; width: 16px; height: 16px; border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); pointer-events: none; z-index: 2; } .sv-model .sv-canvas-wrap::before { top: 12px; left: 12px; border-right: none; border-bottom: none; } .sv-model .sv-canvas-wrap::after { bottom: 12px; right: 12px; border-left: none; border-top: none; } /* Adaptive-model note — italic single sentence beneath the section head, above the canvas frame. "A standard, not a template." */ .sv-model-note { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.55; color: var(--prose-strong); max-width: 56ch; margin: -1.4rem 0 2rem; } /* Shop / Lounge / Service triptych beneath the canvas */ .sv-triptych { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .sv-triptych-cell { padding: 2.2rem 2rem; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1rem; } .sv-triptych-cell:last-child { border-right: none; } .sv-triptych-num { font-family: var(--fb); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); } .sv-triptych-name { font-family: var(--fd); font-weight: 400; font-size: 1.85rem; line-height: 1.1; color: #eef4f6; letter-spacing: .01em; } .sv-triptych-role { font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 1.1rem; line-height: 1.4; color: var(--prose-strong); max-width: 26ch; } .sv-triptych-desc { font-family: var(--fb); font-size: .95rem; line-height: 1.7; color: var(--prose-body); } /* ───────────────────────────────────────────────────────────── §6 SV-OUTLET — top + front view side-by-side + F3 prose block ───────────────────────────────────────────────────────────── */ .sv-outlet-views { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 2.5rem; } .sv-outlet-svg-wrap { position: relative; width: 100%; border: 1px solid var(--rule); background: rgba(255,255,255,.01); padding: 1.8rem 1.8rem 1.4rem; } .sv-outlet-svg-wrap::before, .sv-outlet-svg-wrap::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); pointer-events: none; z-index: 2; } .sv-outlet-svg-wrap::before { top: 10px; left: 10px; border-right: none; border-bottom: none; } .sv-outlet-svg-wrap::after { top: 10px; right: 10px; border-left: none; border-bottom: none; } .sv-outlet-caption { font-family: var(--fb); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--prose-dim); display: flex; justify-content: space-between; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); } .sv-outlet-caption .c-accent { color: var(--acc); } .sv-outlet-svg { width: 100%; height: auto; display: block; } .sv-outlet-prose { max-width: 920px; padding: 2.4rem 0 .4rem; border-top: 1px solid var(--rule-strong); } .sv-outlet-prose-k { display: block; font-family: var(--fb); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin-bottom: 1.2rem; } .sv-outlet-prose-body { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.55; color: var(--prose-strong); } /* ───────────────────────────────────────────────────────────── §7 SV-VALUE — Horizontal 4-stage value chain Animated dot travels 01 → 04 along the chain on a 7s loop. ───────────────────────────────────────────────────────────── */ .sv-value-headline { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; letter-spacing: -.015em; color: #e8f0f3; margin-bottom: 1.2rem; max-width: 30ch; } .sv-value-headline em { color: var(--acc); font-style: italic; } .sv-value-sub { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.8; color: var(--prose-body); max-width: 54ch; margin-bottom: 4rem; } .sv-chain { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } /* Static connecting hairline through the node centres */ .sv-chain::before { content: ''; position: absolute; top: 36px; left: calc(100% / 8); right: calc(100% / 8); height: 1px; background: linear-gradient(to right, color-mix(in srgb, var(--acc) 8%, transparent), color-mix(in srgb, var(--acc) 35%, transparent) 30%, color-mix(in srgb, var(--acc) 35%, transparent) 70%, color-mix(in srgb, var(--acc) 8%, transparent)); z-index: 0; } /* Animated cyan node travels from 01 → 04 along the chain. Animates `left` (which resolves against the parent's width) rather than translateX percentages (which resolve against the element). */ .sv-chain::after { content: ''; position: absolute; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 70%, transparent), 0 0 6px color-mix(in srgb, var(--acc) 90%, transparent); z-index: 0; animation: sv-chain-flow 7s cubic-bezier(0.65, 0, 0.35, 1) infinite; will-change: left, opacity, transform; transform: translateX(-6px); } @keyframes sv-chain-flow { 0% { left: 12.5%; opacity: 0; transform: translateX(-6px) scale(1); } 6% { opacity: 1; } 85% { left: 87.5%; opacity: 1; transform: translateX(-6px) scale(1); } 94% { left: 87.5%; opacity: 0; transform: translateX(-6px) scale(0.6); } 100% { left: 12.5%; opacity: 0; transform: translateX(-6px) scale(1); } } .sv-chain-node { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 0 1.2rem; text-align: center; position: relative; z-index: 1; } .sv-chain-dot { width: 72px; height: 72px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: var(--void); display: flex; align-items: center; justify-content: center; transition: border-color .3s, background .3s; } .sv-chain-node:hover .sv-chain-dot { border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: color-mix(in srgb, var(--acc) 4%, transparent); } .sv-chain-dot-num { font-family: var(--fd); font-weight: 300; font-size: 1.4rem; color: var(--acc); line-height: 1; } .sv-chain-stage { font-family: var(--fb); font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--prose-dim); } .sv-chain-name { font-family: var(--fd); font-weight: 400; font-size: 1.25rem; line-height: 1.2; color: #e8f0f3; max-width: 18ch; } .sv-chain-desc { font-family: var(--fb); font-size: .85rem; line-height: 1.6; color: var(--prose-body); max-width: 24ch; } .sv-chain-node.is-pivot .sv-chain-dot { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 6%, transparent); } .sv-chain-node.is-pivot .sv-chain-stage { color: var(--acc); } /* ───────────────────────────────────────────────────────────── §9 SV-WHO — Editorial paragraph (replaces 4-card grid pattern) ───────────────────────────────────────────────────────────── */ .sv-who-prose { max-width: 760px; padding: 2.4rem 0 0; border-top: 1px solid var(--rule-strong); } .sv-who-prose p { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.55; color: var(--prose-strong); margin-bottom: 1.6rem; } .sv-who-prose strong { font-family: var(--fd); font-style: italic; font-weight: 500; color: #eef4f6; } .sv-who-prose .sv-who-coda { font-family: var(--fb); font-style: normal; font-weight: 500; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin-top: 2rem; margin-bottom: 0; } /* ───────────────────────────────────────────────────────────── §10.5 SV-PARTNERS BAND — static "in development with" list ───────────────────────────────────────────────────────────── */ .sv-partners-band { padding: 5rem 0; border-bottom: 1px solid var(--rule); background: var(--void); } .sv-partners-inner { max-width: 1280px; margin: 0 auto; padding: 0 3rem; display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; } .sv-partners-kicker { font-family: var(--fb); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); display: block; margin-bottom: 1rem; } .sv-partners-lede { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.45; color: var(--prose-strong); max-width: 24ch; } .sv-partners-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); } .sv-partners-item { padding: .95rem 1rem; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .sv-partners-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-strong); } .sv-partners-item:nth-child(odd) { border-right: 1px solid var(--rule); } .sv-partners-name { font-family: var(--fd); font-weight: 400; font-size: 1.05rem; color: #e8f0f3; letter-spacing: .005em; } .sv-partners-loc { font-family: var(--fb); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--prose-dim); white-space: nowrap; } /* ───────────────────────────────────────────────────────────── RESPONSIVE — MARIIX-only sections These are scoped to the new MARIIX selectors only. ───────────────────────────────────────────────────────────── */ @media (max-width: 1020px) { .sv-transform-inner, .sv-prose-inner { padding-left: 1.5rem; padding-right: 1.5rem; } .sv-gap-grid { grid-template-columns: 1fr; gap: 2rem; } /* Transformation: stack vertically, rule rotates to horizontal */ .sv-transform-split { grid-template-columns: 1fr; grid-template-rows: auto 1px auto; gap: 1.6rem; } .sv-transform-side.left, .sv-transform-side.right { text-align: left; } .sv-transform-rule { width: 60px; height: 1px; justify-self: start; background: linear-gradient(to right, color-mix(in srgb, var(--acc) 55%, transparent), color-mix(in srgb, var(--acc) 15%, transparent)); } /* Archetype rows reflow */ .sv-arch { grid-template-columns: 60px 1fr; grid-template-rows: auto auto auto; grid-template-areas: "num name" ". body" ". tag"; gap: .8rem 1.5rem; } .sv-arch-num { grid-area: num; } .sv-arch-name { grid-area: name; } .sv-arch-body { grid-area: body; } .sv-arch-tag { grid-area: tag; justify-self: start; } /* Model + triptych collapse */ .sv-model .sv-canvas-wrap { min-height: 420px; aspect-ratio: 4/3; } .sv-triptych { grid-template-columns: 1fr; } .sv-triptych-cell { border-right: none; border-bottom: 1px solid var(--rule); } .sv-triptych-cell:last-child { border-bottom: none; } /* Outlet views stack */ .sv-outlet-views { grid-template-columns: 1fr; gap: 1.4rem; } /* Value chain reflows; hide the static line + animated dot */ .sv-chain { grid-template-columns: 1fr 1fr; gap: 2.5rem 0; } .sv-chain::before, .sv-chain::after { display: none; } /* Partners band stacks */ .sv-partners-inner { grid-template-columns: 1fr; gap: 2.4rem; } } @media (max-width: 640px) { .sv-chain { grid-template-columns: 1fr; } .sv-partners-list { grid-template-columns: 1fr; } .sv-partners-item:nth-child(odd) { border-right: none; } .sv-partners-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); } .sv-partners-item:last-child { border-bottom: 1px solid var(--rule-strong); } } /* Reduced motion — stop the chain dot animation */ @media (prefers-reduced-motion: reduce) { .sv-chain::after { animation: none !important; opacity: 0 !important; } } /* ============================================================ OCEION additions (April 2026) ============================================================ */ /* ──────────────────────────────────────────────────────────── OCEION additions — additive selectors only. Cleaned to drop redefinitions of rules that already exist in the base subventures.css (CTA scaffolding, .sv-stat-num-sym, .sv-quote-divider). The new .sv-btn-primary/.sv-btn-ghost variants are also dropped — OCEION CTA now uses the existing .sv-btn + .sv-sub-btn pattern matching MARVEX/MARIIX. ──────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────── Per-venture cursor re-tints — OCEION & MARIIX Mirrors the MARVEX block at lines 1046–1086. Resolves --acc to OCEION purple (#9b6fc9) and MARIIX cyan (#3ecfcf). ──────────────────────────────────────────────────────── */ /* OCEION */ .subventure[data-venture="oceion"] .mx-cursor-dot { background: var(--acc); } .subventure[data-venture="oceion"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 55%, transparent); } .subventure[data-venture="oceion"] .mx-cursor-ring::after { background: radial-gradient( circle at 35% 35%, color-mix(in srgb, var(--acc) 12%, transparent) 0%, transparent 70% ); } .subventure[data-venture="oceion"] .mx-trail-dot { background: var(--acc); } body.subventure[data-venture="oceion"][data-cursor-state="hover"] .mx-cursor-dot { background: var(--acc); } body.subventure[data-venture="oceion"][data-cursor-state="hover"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 75%, transparent); } body.subventure[data-venture="oceion"][data-cursor-state="magnetic"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 90%, transparent); background: color-mix(in srgb, var(--acc) 8%, transparent); } body.subventure[data-venture="oceion"][data-cursor-state="text"] .mx-cursor-dot { background: color-mix(in srgb, var(--acc) 90%, transparent); } body.subventure[data-venture="oceion"][data-cursor-state="drag"] .mx-cursor-dot { background: color-mix(in srgb, var(--acc) 55%, transparent); } body.subventure[data-venture="oceion"][data-cursor-state="drag"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 45%, transparent); } .subventure[data-venture="oceion"] .mx-cursor-label { color: var(--acc); } .subventure[data-venture="oceion"] .mx-cursor-ripple { border-color: color-mix(in srgb, var(--acc) 60%, transparent); } /* MARIIX */ .subventure[data-venture="mariix"] .mx-cursor-dot { background: var(--acc); } .subventure[data-venture="mariix"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 55%, transparent); } .subventure[data-venture="mariix"] .mx-cursor-ring::after { background: radial-gradient( circle at 35% 35%, color-mix(in srgb, var(--acc) 12%, transparent) 0%, transparent 70% ); } .subventure[data-venture="mariix"] .mx-trail-dot { background: var(--acc); } body.subventure[data-venture="mariix"][data-cursor-state="hover"] .mx-cursor-dot { background: var(--acc); } body.subventure[data-venture="mariix"][data-cursor-state="hover"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 75%, transparent); } body.subventure[data-venture="mariix"][data-cursor-state="magnetic"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 90%, transparent); background: color-mix(in srgb, var(--acc) 8%, transparent); } body.subventure[data-venture="mariix"][data-cursor-state="text"] .mx-cursor-dot { background: color-mix(in srgb, var(--acc) 90%, transparent); } body.subventure[data-venture="mariix"][data-cursor-state="drag"] .mx-cursor-dot { background: color-mix(in srgb, var(--acc) 55%, transparent); } body.subventure[data-venture="mariix"][data-cursor-state="drag"] .mx-cursor-ring { border-color: color-mix(in srgb, var(--acc) 45%, transparent); } .subventure[data-venture="mariix"] .mx-cursor-label { color: var(--acc); } .subventure[data-venture="mariix"] .mx-cursor-ripple { border-color: color-mix(in srgb, var(--acc) 60%, transparent); } /* ──────────────────────────────────────────────────────── OCEION wordmark — wave-mark sizing Cap-height of Cormorant Garamond is ~0.71 of em; using 0.72em makes the inline SVG mark sit at the same visual height as the surrounding letters at every viewport size. ──────────────────────────────────────────────────────── */ .sv-wordmark .oceion-mark { display: inline-flex; align-items: center; height: 0.72em; width: auto; margin: 0 0.015em; vertical-align: baseline; transform: translateY(0.04em); } .sv-wordmark .oceion-mark svg { height: 100%; width: auto; display: block; } /* ──────────────────────────────────────────────────────── OCEION hero lede inline link For the "oceion.com" link inside .sv-hero-lede. ──────────────────────────────────────────────────────── */ .sv-hero-link { color: var(--acc); border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); transition: border-color .25s ease, color .25s ease; } .sv-hero-link:hover, .sv-hero-link:focus-visible { border-bottom-color: var(--acc); } /* ──────────────────────────────────────────────────────── OCEION audiences component Replaces the legacy modules + partners pattern. Each row: head | body, with a hairline-bordered BECOMES/GAINS footer beneath the body paragraph. ──────────────────────────────────────────────────────── */ .sv-audiences-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); } .sv-audience { display: grid; grid-template-columns: minmax(180px, 1fr) 4fr; gap: 4rem; padding: 2.6rem 0; border-bottom: 1px solid var(--rule); align-items: start; } .sv-audience:last-of-type { border-bottom: 1px solid var(--rule-strong); } .sv-aud-head { display: flex; flex-direction: column; gap: .6rem; } .sv-aud-num { font-family: var(--fb); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); } .sv-aud-name { font-family: var(--fd); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: #e8f0f3; letter-spacing: -.005em; } .sv-aud-role { font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 1.35; color: var(--prose-strong); max-width: 22ch; } .sv-aud-body p { font-family: var(--fb); font-size: 1rem; line-height: 1.75; color: var(--prose-body); margin-bottom: 1rem; max-width: 60ch; } .sv-aud-gets { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .sv-aud-gets li { padding: .9rem 1.2rem .9rem 0; border-right: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline; font-family: var(--fb); font-size: .92rem; line-height: 1.5; color: var(--prose-body); } .sv-aud-gets li:last-child { border-right: none; padding-left: 1.2rem; } .sv-aud-gets .gets-k { font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--prose-dim); padding-top: .14rem; } /* Mid-section editorial break inside the audiences list. */ .sv-aud-break { padding: 2.4rem 0 2.6rem; border-bottom: 1px solid var(--rule); text-align: center; } .sv-aud-break p { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.45; color: var(--prose-strong); max-width: 42ch; margin: 0 auto; } .sv-aud-break em { color: var(--acc); font-style: italic; } /* ──────────────────────────────────────────────────────── OCEION drift band — typographic interlude with horizontal node stream behind. Canvas runs JS-side via initCanvas ('sv-canvas-drift'). ──────────────────────────────────────────────────────── */ .sv-drift { position: relative; padding: 8rem 0; border-bottom: 1px solid var(--rule); overflow: hidden; background: var(--void); } .sv-drift-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .sv-drift-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; } .sv-drift-phrase { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.3; color: rgba(200, 216, 222, .42); padding: 0 clamp(1rem, 2.5vw, 2.4rem); position: relative; white-space: nowrap; } .sv-drift-phrase:not(:last-child)::after { content: '·'; position: absolute; right: -.15rem; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--acc) 35%, transparent); font-style: normal; font-size: 1.2em; } .sv-drift-phrase.is-payoff { color: var(--acc); opacity: 1; } /* ──────────────────────────────────────────────────────── OCEION MOS section — Marine Operating System Sits between Quote and Crosslink. Standard sv-sec-head row, then a 5/7 grid (badge + display H3 on left; manifesto + callout on right). ──────────────────────────────────────────────────────── */ .sv-mos { padding: 7rem 0 7.5rem; border-bottom: 1px solid var(--rule); background: radial-gradient( ellipse 60% 50% at 18% 30%, color-mix(in srgb, var(--acc) 5%, transparent), transparent 65% ), var(--void); } .sv-mos-inner { max-width: 1280px; margin: 0 auto; padding: 0 3rem; } .sv-mos-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; margin-top: 3rem; } .sv-mos-left { display: flex; flex-direction: column; gap: 2.5rem; } .sv-mos-badge { width: 200px; height: 200px; flex-shrink: 0; } .sv-mos-badge svg { width: 100%; height: 100%; display: block; } .sv-mos-display { font-family: var(--fd); font-weight: 300; font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.02em; color: #eef4f6; max-width: 12ch; } .sv-mos-display em { color: var(--acc); font-style: italic; } .sv-mos-right { padding-top: .4rem; } .sv-mos-lead { font-family: var(--fd); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.5; color: var(--prose-strong); max-width: 42ch; margin-bottom: 2.4rem; } .sv-mos-body p { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.8; color: var(--prose-body); max-width: 56ch; margin-bottom: 1.2rem; } .sv-mos-callout { margin-top: 2.6rem; padding: 1.6rem 1.8rem; border-left: 2px solid var(--acc); background: color-mix(in srgb, var(--acc) 4%, transparent); } .sv-mos-callout p { font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 1.18rem; line-height: 1.55; color: var(--prose-strong); max-width: 48ch; margin: 0; } .sv-mos-callout em { color: var(--acc); font-style: italic; } /* ──────────────────────────────────────────────────────── Responsive overrides for the OCEION-introduced components ──────────────────────────────────────────────────────── */ @media (max-width: 1020px) { .sv-mos-inner, .sv-drift-inner { padding-left: 1.5rem; padding-right: 1.5rem; } .sv-mos-grid { grid-template-columns: 1fr; gap: 2rem; } .sv-mos-badge { width: 160px; height: 160px; } .sv-audience { grid-template-columns: 1fr; gap: 1.4rem; } .sv-aud-gets { grid-template-columns: 1fr; } .sv-aud-gets li { border-right: none; border-bottom: 1px solid var(--rule); padding-left: 0; } .sv-aud-gets li:last-child { border-bottom: none; padding-left: 0; } } @media (max-width: 760px) { .sv-drift { padding: 5rem 0; } .sv-drift-inner { flex-direction: column; gap: 1.4rem; } .sv-drift-phrase:not(:last-child)::after { display: none; } }