/* ============================================================================ Remi Investor Data Room — application stylesheet ---------------------------------------------------------------------------- Composes the canonical Remi Design System ("Warm Editorial" v2): • colors_and_type.css → tokens, Paper/Ink themes, type, section themes, atmospheres, motion. • marketing-main.css → base resets, .container, .eyebrow/.lead/.display, buttons (Port Connector), engineered components (.bp/.wbus/.manifold/.cvg/.attest), [data-reveal]. • marketing-pages.css → inner-page language (.phero, .bpanel, .etile, .flow, .doc/.toc/.prose, .metrics, .founders, .statement, .pullquote, .ctaband …). This file then adds the data-room APP SHELL (header + sidebar + main), status chips, the confidentiality modal, and a few glue rules. All shell classes are namespaced `.dr-*` / `.shell` so they never collide with the marketing `.nav` / `.hero`. Pages set and . ============================================================================ */ @import url("colors_and_type.css"); @import url("marketing-main.css"); @import url("marketing-pages.css"); /* ════════════════════════════════════════════════════════════════════════ App shell — sticky header, sticky sidebar, scrolling main ════════════════════════════════════════════════════════════════════════ */ :root { --dr-header-h: 64px; --dr-side-w: 268px; } .shell { position: relative; min-height: 100vh; } /* ── Header ─────────────────────────────────────────────────────────────── */ .dr-header { position: sticky; top: 0; z-index: 60; height: var(--dr-header-h); background: var(--remi-frost); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--remi-line); box-shadow: 0 1px 10px rgba(58,44,30,.05); } .dr-header__inner { height: 100%; display: flex; align-items: center; gap: 16px; padding: 0 clamp(1rem, 3vw, 1.5rem); } .dr-brand { display: inline-flex; align-items: center; gap: 11px; } .dr-brand__mark { width: 30px; height: auto; display: block; } .dr-brand__tx { display: flex; flex-direction: column; line-height: 1; } .dr-brand__nm { font-weight: 700; font-size: 19px; letter-spacing: -0.022em; color: var(--remi-ink); } .dr-brand__tag { font-size: 9.5px; font-weight: 600; letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--remi-muted); margin-top: 3px; } .dr-header__right { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Theme (Paper/Ink) toggle */ .dr-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--remi-line); background: var(--remi-surface); color: var(--remi-muted); transition: color .18s, border-color .18s; } .dr-toggle:hover { color: var(--remi-accent); border-color: var(--remi-accent-border); } .dr-toggle svg { width: 18px; height: 18px; } .dr-toggle .icon-ink { display: none; } [data-theme="ink"] .dr-toggle .icon-paper { display: none; } [data-theme="ink"] .dr-toggle .icon-ink { display: block; } /* Hamburger (mobile) */ .dr-burger { display: none; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--remi-line); background: var(--remi-surface); color: var(--remi-ink-soft); align-items: center; justify-content: center; } .dr-burger svg { width: 20px; height: 20px; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .dr-layout { display: grid; grid-template-columns: var(--dr-side-w) minmax(0, 1fr); align-items: start; } /* ── Sidebar ────────────────────────────────────────────────────────────── */ .dr-side { position: sticky; top: var(--dr-header-h); height: calc(100vh - var(--dr-header-h)); overflow-y: auto; padding: 26px 0 32px; background: var(--remi-surface); border-right: 1px solid var(--remi-line); } .dr-side::-webkit-scrollbar { width: 6px; } .dr-side::-webkit-scrollbar-thumb { background: var(--remi-line); border-radius: var(--radius-pill); } .dr-side__group { margin-bottom: 22px; } .dr-side__eyebrow { font: 600 0.62rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--remi-muted-2); padding: 0 22px 9px; margin: 0; } .dr-nav { display: flex; flex-direction: column; gap: 2px; } .dr-nav__item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 22px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--remi-muted); transition: color .13s, background .14s; } .dr-nav__item svg { width: 17px; height: 17px; flex: 0 0 auto; } .dr-nav__item:hover { color: var(--remi-ink); background: var(--remi-surface-2); } .dr-nav__item.is-active { color: var(--remi-accent); font-weight: 600; } .dr-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--remi-accent); } .dr-side__divider { height: 1px; background: var(--remi-line); margin: 6px 12px 18px; border: 0; } /* Scrim only exists in drawer mode; hidden (and out of the grid) at desktop */ .dr-scrim { display: none; } /* ── Main ───────────────────────────────────────────────────────────────── */ .dr-main { min-width: 0; } .dr-main__inner { padding: clamp(1.6rem, 1rem + 3vw, 3rem) clamp(1.1rem, 0.5rem + 3vw, 3.2rem) 1.5rem; } /* ── Responsive: sidebar becomes a slide-in drawer ───────────────────────── */ @media (max-width: 960px) { .dr-burger { display: inline-flex; } .dr-layout { grid-template-columns: 1fr; } .dr-side { position: fixed; top: var(--dr-header-h); left: 0; z-index: 55; width: min(86vw, var(--dr-side-w)); transform: translateX(-102%); transition: transform var(--dur-base) var(--ease-out); box-shadow: var(--shadow-lg); } .dr-side.is-open { transform: none; } .dr-scrim { display: block; position: fixed; inset: var(--dr-header-h) 0 0 0; z-index: 54; background: rgba(28,20,14,.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); } .dr-scrim.is-open { opacity: 1; pointer-events: auto; } } /* ════════════════════════════════════════════════════════════════════════ Status / type chips — 1px border in own accent over soft fill (from the portal kit; data-attribute driven so they theme automatically) ════════════════════════════════════════════════════════════════════════ */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 11px; border-radius: var(--radius-xs); border: 1px solid; font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: 0.005em; } .chip svg { width: 13px; height: 13px; } .chip.sm { height: 21px; font-size: 10.5px; padding: 0 8px; } .chip[data-tone="warning"] { color: var(--remi-warning); border-color: var(--remi-warning); background: var(--remi-warning-soft); } .chip[data-tone="success"] { color: var(--remi-success); border-color: var(--remi-success); background: var(--remi-success-soft); } .chip[data-tone="danger"] { color: var(--remi-danger); border-color: var(--remi-danger); background: var(--remi-danger-soft); } .chip[data-tone="muted"] { color: var(--remi-muted); border-color: var(--remi-line); background: var(--remi-surface-2); } .chip[data-tone="brand"] { color: var(--remi-accent); border-color: var(--remi-accent-border); background: var(--remi-accent-soft); } .chip[data-status="Pipeline"] { color: var(--st-pipeline); border-color: var(--st-pipeline); background: var(--st-pipeline-soft); } .chip[data-status="Initiated"] { color: var(--st-initiated); border-color: var(--st-initiated); background: var(--st-initiated-soft); } .chip[data-status="Signing"] { color: var(--st-signing); border-color: var(--st-signing); background: var(--st-signing-soft); } .chip[data-status="Onboarding"] { color: var(--st-onboarding); border-color: var(--st-onboarding); background: var(--st-onboarding-soft); } .chip[data-status="Active"] { color: var(--st-active); border-color: var(--st-active); background: var(--st-active-soft); } /* ════════════════════════════════════════════════════════════════════════ Confidentiality modal (about.html access gate) — warm editorial ════════════════════════════════════════════════════════════════════════ */ .dr-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(28,20,14,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .dr-modal.is-open { opacity: 1; } .dr-modal[hidden] { display: none; } .dr-modal__card { width: 100%; max-width: 640px; max-height: calc(100vh - 2.5rem); overflow-y: auto; background: var(--remi-surface); border: 1px solid var(--remi-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(1.6rem, 1rem + 3vw, 2.6rem); transform: translateY(14px) scale(.98); transition: transform var(--dur-base) var(--ease-out); } .dr-modal.is-open .dr-modal__card { transform: none; } .dr-modal__seal { width: 60px; height: 60px; border-radius: var(--radius-md); margin: 0 auto 1.2rem; display: grid; place-items: center; color: var(--remi-accent); background: var(--remi-accent-soft); border: 1px solid var(--remi-accent-border); } .dr-modal__seal svg { width: 28px; height: 28px; } .dr-modal__scroll { max-height: 34vh; overflow-y: auto; margin: 1.4rem 0; padding: 1.2rem 1.3rem; font-size: .88rem; line-height: 1.65; color: var(--remi-ink-soft); background: var(--remi-surface-3); border: 1px solid var(--remi-line); border-radius: var(--radius-md); } .dr-modal__scroll::-webkit-scrollbar { width: 8px; } .dr-modal__scroll::-webkit-scrollbar-thumb { background: var(--remi-line); border-radius: var(--radius-pill); } .dr-modal__accept { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; padding: 1.1rem 1.2rem; border: 1.5px solid var(--remi-line); border-radius: var(--radius-md); background: var(--remi-surface); transition: border-color var(--dur-fast) var(--ease-out); } .dr-modal__accept:hover { border-color: var(--remi-accent-border); } .dr-modal__accept input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--remi-accent); } .dr-modal__accept span { font-size: .9rem; font-weight: 500; line-height: 1.5; color: var(--remi-ink); } .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* ════════════════════════════════════════════════════════════════════════ Glue — charts, key-value rows, doc index tiles, print ════════════════════════════════════════════════════════════════════════ */ .chart-box { position: relative; width: 100%; height: 320px; } .chart-box--sm { height: 240px; } /* progress bars (fundraising / round duration) */ .dr-bar { height: 14px; border-radius: var(--radius-pill); background: var(--remi-surface-2); border: 1px solid var(--remi-line); overflow: hidden; } .dr-bar__fill { height: 100%; width: 0; border-radius: var(--radius-pill); transition: width 1.4s var(--ease-out); } .dr-bar__fill--brand { background: linear-gradient(90deg, var(--remi-accent-dark), var(--remi-accent)); } .dr-bar__fill--alt { background: linear-gradient(90deg, var(--ty-exchange), var(--remi-accent)); } .dr-meter { display: grid; gap: .7rem; } .dr-meter__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .dr-meter__label { font-weight: 600; font-size: 1.02rem; color: var(--remi-ink); letter-spacing: var(--ls-snug); } .dr-meter__val { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--remi-accent); } .dr-meter__sub { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--remi-muted); margin: .2rem 0 0; } /* warm editorial data table */ .dr-table-wrap { border: 1px solid var(--remi-line); border-radius: var(--radius-md); overflow: hidden; background: var(--remi-surface); } .dr-table { width: 100%; border-collapse: collapse; } .dr-table th { background: var(--remi-surface-2); text-align: left; font: 700 0.66rem var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--remi-muted); padding: 12px 18px; border-bottom: 1px solid var(--remi-line); white-space: nowrap; } .dr-table td { font-size: 0.9rem; padding: 14px 18px; border-bottom: 1px solid var(--remi-line-soft); color: var(--remi-ink-soft); } .dr-table tbody tr:last-child td { border-bottom: none; } .dr-table tbody tr { transition: background .15s; } .dr-table tbody tr:hover { background: var(--remi-surface-3); } .dr-table .th-sort { cursor: pointer; } .dr-table .th-sort:hover { color: var(--remi-accent); } .dr-table .th-sort svg { width: 13px; height: 13px; vertical-align: -2px; margin-left: 4px; } /* figure grid (pre-rendered chart SVGs) */ .dr-figs { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 3vw, 2.6rem); } @media (min-width: 720px) { .dr-figs { grid-template-columns: 1fr 1fr; } } .dr-fig { position: relative; margin: 0; border: 1px solid var(--remi-line); border-radius: var(--radius-md); background: #fff; padding: 1.1rem; overflow: hidden; } .dr-fig__id { position: absolute; top: .8rem; right: .9rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; color: var(--remi-muted-2); } .dr-fig img { width: 100%; height: auto; display: block; } /* compact icon link (e.g. table download affordance) */ .dr-iconlink { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--remi-muted); transition: color .14s, background .14s; } .dr-iconlink:hover { color: var(--remi-accent); background: var(--remi-surface-2); } .dr-iconlink svg { width: 16px; height: 16px; } /* simple key/value grid for fact panels */ .kv-grid { display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .kv__k { font: 600 0.66rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--remi-muted-2); margin-bottom: 5px; } .kv__v { font-size: .98rem; font-weight: 600; color: var(--remi-ink); } /* document download rows (due-diligence index pages) reuse .etile; this is the inline "open" affordance */ .doclink { color: inherit; } /* partner / entity cards (legal.html): title + status-chip header row, a country line with a circular flag, and consistent matrix spacing — keeps the markup free of repeated inline styles. */ .etile__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .etile__top .etile__title { margin: 0; } .etile__region { display: flex; align-items: center; gap: .55rem; margin: .7rem 0 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--remi-muted); } .etile__region img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--remi-line); flex: 0 0 auto; } .etile .kv-grid { margin-top: 1rem; } /* The DS .phero assumes a 72px fixed top nav; inside our shell it sits below the sticky header, so reset its top padding and let it bleed to the main content edges (full-width masthead band). */ .dr-main__inner > .phero:first-child, .dr-main__inner > .phero { margin: calc(-1 * clamp(1.6rem, 1rem + 3vw, 3rem)) calc(-1 * clamp(1.1rem, 0.5rem + 3vw, 3.2rem)) 0; padding-top: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); padding-inline: clamp(1.1rem, 0.5rem + 3vw, 3.2rem); } .dr-main__inner > .phero .phero__inner, .dr-main__inner > .phero .container { padding: 0; } /* content rhythm inside the main column */ .dr-section { margin-top: clamp(3rem, 2rem + 4vw, 5rem); } .dr-section:first-of-type { margin-top: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); } .dr-section__head { max-width: 760px; margin-bottom: .4rem; } .dr-section__head .display { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); } .dr-grid-2 { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 3vw, 2.6rem); } @media (min-width: 720px) { .dr-grid-2 { grid-template-columns: 1fr 1fr; } } /* main-column footer — generous separation from the last section */ .dr-foot { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); padding-top: 1.5rem; border-top: 1px solid var(--remi-line); display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; align-items: center; } .dr-foot p { margin: 0; } .dr-foot a { color: var(--remi-accent-dark); font-weight: 600; } @media print { .dr-header, .dr-side, .dr-burger, .dr-toggle, .dr-scrim, .dr-modal { display: none !important; } .dr-layout { grid-template-columns: 1fr; } body::before { display: none; } }