/* ============================================================================ Remi — Inner Pages (About · Contact · Privacy · Terms · detail pages) Loaded AFTER tokens.css + main.css. Speaks the SAME engineered/blueprint language as the homepage: flat bordered panels, blueprint grids, scan-lines, mono IDs, line-glyph rings, accent rules — NO shadow-lift "material" cards. Detail pages REUSE the homepage components (.bp/.stratum, .wbus/.wnode, .manifold/.port, .cvg, .section-cta); this file adds the few extra engineered pieces (blueprint panel, spec tiles, founders, routing ports, spec columns). Pages set + hardcode

. ============================================================================ */ /* Fixed-nav clearance for in-page anchor jumps */ .page [id] { scroll-margin-top: 92px; } /* ════════════════════════════════════════════════════════════════════════ PAGE MASTHEAD (.phero) — purpose-fit hero per page ════════════════════════════════════════════════════════════════════════ */ .phero { position: relative; overflow: hidden; padding-top: calc(72px + clamp(2.6rem, 2rem + 4vw, 5.5rem)); padding-bottom: clamp(2.6rem, 2rem + 4vw, 5rem); } .phero__inner { position: relative; z-index: 2; } .phero .eyebrow { margin-bottom: 1.2rem; } .phero__title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.3rem); line-height: 1.04; letter-spacing: var(--ls-display); color: var(--remi-ink); margin: 0; max-width: 18ch; } .phero__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--remi-ink-soft); max-width: 60ch; margin: 1.5rem 0 0; } .phero__meta { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin: 2.1rem 0 0; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--remi-muted); } .phero__meta span { display: inline-flex; align-items: center; gap: .55rem; } .phero__meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--remi-accent); flex: 0 0 auto; } .phero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.3rem; } .phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--remi-accent-rgb), .55), transparent); } .phero--mission { padding-bottom: clamp(3.2rem, 2rem + 6vw, 6.5rem); } .phero--mission .phero__title { font-size: clamp(2.5rem, 1rem + 5vw, 4.8rem); max-width: 16ch; } .phero--doc { padding-bottom: clamp(2rem, 1.5rem + 3vw, 3.4rem); } .phero--doc .phero__title { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); max-width: none; } /* mono metadata row (legal masthead) */ .docmeta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 1.6rem 0 0; } .docmeta span { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .04em; color: var(--remi-muted); border: 1px solid var(--remi-line); border-radius: var(--radius-pill); padding: .3rem .8rem; background: color-mix(in srgb, var(--remi-surface) 60%, transparent); } .docmeta b { color: var(--remi-accent); font-weight: 600; } /* spec column on the mission masthead (desktop) */ .phero__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: end; } .phero__spec { display: none; } @media (min-width: 980px) { .phero--mission .phero__layout { grid-template-columns: minmax(0,1fr) 230px; } .phero__spec { display: grid; gap: .9rem; padding-left: 1.6rem; border-left: 1px solid var(--remi-line); } .phero__spec dt { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--remi-muted); } .phero__spec dd { margin: .15rem 0 0; font-size: .98rem; font-weight: 600; color: var(--remi-ink); } } /* ════════════════════════════════════════════════════════════════════════ BLUEPRINT PANEL (.bpanel) — generic engineered container echoes the homepage .bp / .manifold (faint accent grid + scan-line + mono head) ════════════════════════════════════════════════════════════════════════ */ .bpanel { position: relative; margin-top: clamp(2.4rem, 4vw, 3.4rem); border: 1px solid var(--remi-line); border-radius: var(--radius-lg); overflow: hidden; padding: clamp(1.4rem, 3vw, 2.6rem); background: radial-gradient(120% 140% at 88% -10%, rgba(var(--remi-accent-rgb), .09), transparent 55%), var(--remi-surface); } .bpanel--bare { background: var(--remi-surface); } .bpanel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(var(--remi-accent-rgb), .06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--remi-accent-rgb), .06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); } .bpanel__scan { position: absolute; left: 0; right: 0; top: -130px; height: 120px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(var(--remi-accent-rgb), .14), transparent); } .bpanel.is-in .bpanel__scan { animation: bpScan 2.6s var(--ease-out) .3s 1 forwards; } .bpanel__head { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--remi-muted); margin-bottom: 1.6rem; } .bpanel__body { position: relative; } /* ════════════════════════════════════════════════════════════════════════ SPEC TILES (.etiles / .etile) — flat engineered tiles (replace material cards) mono ID + line-glyph ring + accent rule on hover. NO shadow, NO lift. ════════════════════════════════════════════════════════════════════════ */ .etiles { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 260px), 1fr)); margin-top: clamp(2rem, 3vw, 2.6rem); } .etiles--2 { --col-min: 320px; } .etiles--4 { --col-min: 215px; } .etile { --ax: var(--remi-accent); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--remi-line); border-radius: var(--radius-md); background: var(--remi-surface); padding: clamp(1.3rem, 2.2vw, 1.7rem); transition: border-color var(--dur-base) var(--ease-out); } .etile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ax); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .etile:hover { border-color: color-mix(in srgb, var(--ax) 40%, var(--remi-line)); } .etile:hover::after { transform: scaleX(1); } .etile__id { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--ax); font-weight: 600; margin-bottom: 1rem; } .etile__flag { position: absolute; top: clamp(1rem, 2vw, 1.4rem); right: clamp(1rem, 2vw, 1.4rem); width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 6px rgba(42,35,32,.18); transition: transform var(--dur-base) var(--ease-out); } .etile:hover .etile__flag { transform: scale(1.06); } .etile__glyph { width: 46px; height: 46px; border: 1px solid var(--remi-line); border-radius: 11px; display: grid; place-items: center; padding: 10px; color: var(--ax); margin-bottom: 1.1rem; transition: border-color var(--dur-base) var(--ease-out); } .etile:hover .etile__glyph { border-color: var(--ax); } .etile__glyph svg { width: 100%; height: 100%; } .etile__glyph svg path, .etile__glyph svg circle, .etile__glyph svg rect { stroke: var(--ax); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .etile__title { font-size: 1.16rem; font-weight: 700; letter-spacing: var(--ls-snug); color: var(--remi-ink); margin: 0 0 .45rem; } .etile__kicker { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--remi-muted); margin: 0 0 .7rem; } .etile__desc { font-size: .95rem; line-height: 1.6; color: var(--remi-ink-soft); margin: 0; } .etile__list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; } .etile__list li { position: relative; padding-left: 1.25rem; font-size: .89rem; line-height: 1.5; color: var(--remi-ink-soft); } .etile__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--ax); opacity: .9; } .etile__meta { margin-top: auto; padding-top: 1.1rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--remi-muted); } /* ════════════════════════════════════════════════════════════════════════ ROUTING PORTS (.routeports / .routeport) — Contact self-select (clickable) ════════════════════════════════════════════════════════════════════════ */ .routeports { display: grid; gap: clamp(.9rem, 1.8vw, 1.3rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: clamp(2.2rem, 4vw, 3rem); } .routeport { --ax: var(--remi-accent); position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; overflow: hidden; cursor: pointer; font: inherit; border: 1px solid var(--remi-line); border-radius: var(--radius-md); background: var(--remi-surface); padding: clamp(1.3rem, 2.2vw, 1.7rem); transition: border-color var(--dur-base) var(--ease-out); } .routeport::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ax); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .routeport:hover { border-color: color-mix(in srgb, var(--ax) 42%, var(--remi-line)); } .routeport:hover::after { transform: scaleX(1); } .routeport:focus-visible { outline: none; box-shadow: var(--focus-ring); } .routeport__id { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--ax); font-weight: 600; margin-bottom: 1rem; } .routeport__glyph { width: 44px; height: 44px; border: 1px solid var(--remi-line); border-radius: 11px; display: grid; place-items: center; padding: 10px; color: var(--ax); margin-bottom: 1.1rem; } .routeport__glyph svg { width: 100%; height: 100%; } .routeport__glyph svg path, .routeport__glyph svg circle { stroke: var(--ax); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .routeport__title { font-size: 1.14rem; font-weight: 700; letter-spacing: var(--ls-snug); color: var(--remi-ink); margin: 0 0 .45rem; } .routeport__desc { font-size: .92rem; line-height: 1.55; color: var(--remi-ink-soft); margin: 0; } .routeport__go { margin-top: auto; padding-top: 1.2rem; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ax); } .routeport__go svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); } .routeport:hover .routeport__go svg { transform: translateX(4px); } /* ════════════════════════════════════════════════════════════════════════ FOUNDERS (.founders / .founder) — engineered profile tiles ════════════════════════════════════════════════════════════════════════ */ /* Stage — dark bordered panel that wraps the founder grid */ .fstage { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--remi-line); background: radial-gradient(120% 140% at 88% -10%, rgba(232,87,106,.08), transparent 55%), linear-gradient(180deg, var(--remi-surface), var(--remi-canvas)); padding: clamp(1.5rem, 3.4vw, 3rem); margin-top: clamp(2rem, 3.4vw, 3rem); } /* Canvas symbol stream — z:0, behind photo (z:1) and body (z:1) */ .founder__aura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: block; } .founders { display: grid; gap: clamp(1.1rem, 2.2vw, 1.7rem); grid-template-columns: 1fr; } @media (min-width: 760px) { .founders { grid-template-columns: 1fr 1fr; } } /* CREDENTIAL — photo-led horizontal split; per-founder accent (CEO blue / CTO gold) blended into brand coral */ .founder { --ax: var(--remi-accent); position: relative; display: grid; grid-template-columns: minmax(116px, 40%) 1fr; overflow: hidden; border: 1px solid var(--remi-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--ax) 7%, var(--remi-surface)), var(--remi-surface) 60%); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } /* top accent bar: founder colour → brand coral, draws in on reveal */ .founder::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, var(--ax), var(--remi-accent)); transform: scaleX(0); transform-origin: left; } .founders.is-in .founder::before { animation: founderRule .9s var(--ease-out) .3s forwards; } .founders.is-in .founder:nth-child(2)::before { animation-delay: .42s; } .founder:hover { border-color: color-mix(in srgb, var(--ax) 45%, var(--remi-line)); box-shadow: 0 22px 60px -36px color-mix(in srgb, var(--ax) 72%, transparent); } /* photo column */ .founder__photo { position: relative; overflow: hidden; background: #0f0c0a; min-height: 240px; z-index: 1; } .founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; transform: scale(1.12); } .founders.is-in .founder__photo img { animation: founderPhoto 1.1s var(--ease-out) .3s forwards; } .founders.is-in .founder:nth-child(2) .founder__photo img { animation-delay: .42s; } .founder:hover .founder__photo img { transform: scale(1.05); transition: transform var(--dur-slow) var(--ease-out); } /* seam between photo and content */ .founder__photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--ax), var(--remi-accent)); } /* content column */ .founder__body { padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; } .founder__id { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--ax); font-weight: 600; } .founder__name { position: relative; align-self: flex-start; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); font-weight: 700; letter-spacing: var(--ls-snug); color: var(--remi-ink); margin: .5rem 0 .15rem; line-height: 1.1; } .founder__name::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--ax), transparent); transform: scaleX(0); transform-origin: left; } .founders.is-in .founder__name::after { animation: founderRule .8s var(--ease-out) .7s forwards; } .founders.is-in .founder:nth-child(2) .founder__name::after { animation-delay: .82s; } .founder__role { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--remi-muted); margin: .5rem 0 0; } .founder__creds { display: flex; flex-wrap: wrap; gap: .32rem; margin: .75rem 0 0; } .founder__creds span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ax); border: 1px solid color-mix(in srgb, var(--ax) 38%, transparent); background: color-mix(in srgb, var(--ax) 7%, transparent); border-radius: 2px; padding: .18rem .5rem; white-space: nowrap; } .founder__bio { font-size: .95rem; line-height: 1.65; color: var(--remi-ink-soft); margin: .9rem 0 0; } /* LinkedIn tag — pill chip in the founder colour, fills on hover */ .founder__tag { align-self: flex-start; margin-top: 1.3rem; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .95rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--ax); border: 1px solid color-mix(in srgb, var(--ax) 42%, var(--remi-line)); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ax) 9%, transparent); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .founder__tag .in { width: 16px; height: 16px; } .founder__tag .arr { width: 14px; height: 14px; opacity: .85; transition: transform var(--dur-fast) var(--ease-out); } .founder__tag:hover { background: var(--ax); color: var(--remi-canvas); border-color: var(--ax); } .founder__tag:hover .arr { transform: translateX(3px); } @keyframes founderRule { to { transform: scaleX(1); } } @keyframes founderPhoto { to { transform: scale(1); } } @media (max-width: 560px) { .founder { grid-template-columns: 1fr; } .founder__photo { min-height: 230px; } .founder__photo::after { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 3px; background: linear-gradient(90deg, var(--ax), var(--remi-accent)); } } @media (prefers-reduced-motion: reduce) { .founder__photo img { transform: none; animation: none; } .founder::before, .founder__name::after { transform: scaleX(1); animation: none; } } /* ════════════════════════════════════════════════════════════════════════ SPEC COLUMNS (.speccols / .speccol) — mono lists inside a blueprint panel used on the Services page (capabilities / API exposure / consumers) ════════════════════════════════════════════════════════════════════════ */ .speccols { position: relative; display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); grid-template-columns: 1fr; } @media (min-width: 760px) { .speccols { grid-template-columns: repeat(3, 1fr); } } .speccol__h { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--remi-accent); margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--remi-line); } .speccol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .speccol li { position: relative; padding-left: 1.2rem; font-size: .9rem; line-height: 1.5; color: var(--remi-ink-soft); } .speccol li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--remi-accent); opacity: .8; } /* ════════════════════════════════════════════════════════════════════════ STATEMENT (.statement) — big vision line (About) ════════════════════════════════════════════════════════════════════════ */ .statement { max-width: 27rem; } .statement__kicker { display: block; font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--remi-accent); } .statement__big { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.18; font-weight: 700; letter-spacing: var(--ls-display); color: var(--remi-ink); margin: 1rem 0 0; } .statement__big em { font-style: italic; color: var(--remi-accent); } /* ════════════════════════════════════════════════════════════════════════ LIFECYCLE TIMELINE (.flow) — engineered numbered steps (Network page) ════════════════════════════════════════════════════════════════════════ */ .flow { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); } .flow__step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding-bottom: 2.2rem; } .flow__step:last-child { padding-bottom: 0; } .flow__rail { display: grid; justify-items: center; gap: .3rem; } .flow__node { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; z-index: 1; font-family: var(--font-mono); font-size: .92rem; font-weight: 600; color: var(--remi-accent); background: var(--remi-surface); border: 1.5px solid var(--remi-accent); } .flow__line { width: 2px; flex: 1; min-height: 1.4rem; background: var(--remi-line); justify-self: center; } .flow__step:last-child .flow__line { display: none; } .flow__body { padding-top: .5rem; } .flow__title { font-size: 1.08rem; font-weight: 700; color: var(--remi-ink); margin: 0 0 .35rem; letter-spacing: var(--ls-snug); } .flow__title b { font-family: var(--font-mono); font-weight: 600; font-size: .8rem; color: var(--remi-muted); margin-right: .6rem; letter-spacing: .04em; } .flow__desc { font-size: .95rem; line-height: 1.6; color: var(--remi-ink-soft); margin: 0; max-width: 64ch; } /* two side-by-side lifecycle columns on a detail page */ .flowcols { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 860px) { .flowcols { grid-template-columns: 1fr 1fr; align-items: start; } } .flowcol__h { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--remi-accent); margin: 0 0 1.4rem; padding-bottom: .7rem; border-bottom: 1px solid var(--remi-line); } .flowcols .flow { margin-top: 0; } .fundtypes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); } .fundtype { flex: 1 1 240px; border: 1px solid var(--remi-line); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; background: var(--remi-surface); border-left: 3px solid var(--chip, var(--remi-accent)); } .fundtype b { display: block; color: var(--remi-ink); font-size: 1rem; margin-bottom: .25rem; } .fundtype span { font-size: .9rem; color: var(--remi-ink-soft); } /* ════════════════════════════════════════════════════════════════════════ LEGAL DOCUMENT (.doc) — sticky TOC + prose ════════════════════════════════════════════════════════════════════════ */ .doc { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); } @media (min-width: 920px) { .doc { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } } .doc__nav { position: relative; } @media (min-width: 920px) { .doc__nav { position: sticky; top: 96px; } } .toc__title { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--remi-muted); margin: 0 0 1rem; } .toc { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; counter-reset: toc; } .toc__link { display: block; cursor: pointer; position: relative; padding: .5rem .7rem .5rem 1.9rem; border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.4; color: var(--remi-ink-soft); border-left: 2px solid transparent; transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast); } .toc__link::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); position: absolute; left: .55rem; top: .55rem; font-family: var(--font-mono); font-size: .7rem; color: var(--remi-muted); } .toc__link:hover { color: var(--remi-ink); background: var(--remi-surface); } .toc__link.is-active { color: var(--remi-accent); background: var(--remi-surface); border-left-color: var(--remi-accent); } .toc__link.is-active::before { color: var(--remi-accent); } .prose { max-width: 72ch; } .prose__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--remi-ink); margin: 0 0 2.4rem; } .prose__sec { padding-top: .5rem; margin-bottom: 2.6rem; } .prose__sec h2 { font-size: 1.32rem; font-weight: 700; letter-spacing: var(--ls-snug); color: var(--remi-ink); margin: 0 0 .9rem; display: flex; gap: .7rem; align-items: baseline; } .prose__sec h2 .n { font-family: var(--font-mono); font-size: .85rem; font-weight: 600; color: var(--remi-accent); } .prose__sec h3 { font-size: 1.02rem; font-weight: 700; color: var(--remi-ink); margin: 1.6rem 0 .5rem; } .prose p { font-size: .98rem; line-height: 1.75; color: var(--remi-ink-soft); margin: 0 0 1rem; } .prose ul { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .5rem; } .prose li { font-size: .98rem; line-height: 1.7; color: var(--remi-ink-soft); } .prose a { color: var(--remi-accent-dark); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: var(--remi-accent); } .prose strong { color: var(--remi-ink); font-weight: 600; } .prose__sec hr { border: 0; border-top: 1px solid var(--remi-line); margin: 2.4rem 0 0; } .notice { display: flex; gap: .8rem; align-items: flex-start; font-size: .85rem; line-height: 1.6; color: var(--remi-ink-soft); background: var(--remi-accent-soft); border: 1px solid var(--remi-accent-border); border-radius: var(--radius-md); padding: .9rem 1.1rem; margin: 0 0 2.4rem; } .notice svg { width: 18px; height: 18px; color: var(--remi-accent); flex: 0 0 auto; margin-top: .1rem; } /* ════════════════════════════════════════════════════════════════════════ CTA BAND (.ctaband) — flat engineered closing panel (no shadow) ════════════════════════════════════════════════════════════════════════ */ .ctaband { text-align: center; } .ctaband__panel { position: relative; overflow: hidden; border: 1px solid var(--remi-line); border-radius: var(--radius-xl); background: radial-gradient(120% 160% at 50% -20%, rgba(var(--remi-accent-rgb), .10), transparent 60%), var(--remi-surface); padding: clamp(2.4rem, 5vw, 4.2rem) clamp(1.4rem, 4vw, 3rem); } .ctaband__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(var(--remi-accent-rgb), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--remi-accent-rgb), .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 78%); mask: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 78%); } .ctaband__panel > * { position: relative; } .ctaband__panel .eyebrow { justify-content: center; } .ctaband__panel .display { margin-top: .8rem; } .ctaband__panel .lead { margin-inline: auto; } .ctaband__ctas { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; } /* generic at-a-glance metric strip (mono labels, flat) */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--remi-line); border: 1px solid var(--remi-line); border-radius: var(--radius-md); overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); } .metric { background: var(--remi-surface); padding: 1.4rem 1.3rem; } .metric b { display: block; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem); font-weight: 800; letter-spacing: var(--ls-tight); color: var(--remi-ink); } .metric span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--remi-muted); } /* ════════════════════════════════════════════════════════════════════════ Small helpers ════════════════════════════════════════════════════════════════════════ */ .split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } @media (min-width: 880px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .split--lead { grid-template-columns: 1fr; } @media (min-width: 880px) { .split--lead { grid-template-columns: .85fr 1.15fr; } } .split--center { align-items: center; } .prose-col p { font-size: 1rem; line-height: 1.75; color: var(--remi-ink-soft); margin: 0 0 1.1rem; } .prose-col p:last-child { margin-bottom: 0; } .pullquote { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1.45; font-weight: 500; letter-spacing: var(--ls-snug); color: var(--remi-ink); border-left: 3px solid var(--remi-accent); padding-left: 1.4rem; margin: 0; } .pullquote cite { display: block; margin-top: 1rem; font-size: .85rem; font-style: normal; font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--remi-muted); } .sidenote { border: 1px dashed var(--remi-line); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; background: color-mix(in srgb, var(--remi-surface) 70%, transparent); } .sidenote b { color: var(--remi-ink); } .sidenote p { margin: .4rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--remi-ink-soft); } /* office / channel rows (Contact) */ .channels { display: grid; gap: 1rem; margin-top: clamp(1.8rem, 3vw, 2.4rem); } @media (min-width: 720px) { .channels { grid-template-columns: 1fr 1fr; } } .channel { display: flex; gap: .9rem; align-items: flex-start; border: 1px solid var(--remi-line); border-radius: var(--radius-md); padding: 1.1rem 1.2rem; background: var(--remi-surface); transition: border-color var(--dur-fast); } .channel:hover { border-color: color-mix(in srgb, var(--remi-accent) 35%, var(--remi-line)); } .channel svg { width: 20px; height: 20px; color: var(--remi-accent); flex: 0 0 auto; margin-top: .15rem; } .channel b { display: block; color: var(--remi-ink); font-size: .98rem; margin-bottom: .2rem; } .channel span, .channel a { font-size: .9rem; color: var(--remi-ink-soft); } .channel a { color: var(--remi-accent-dark); } /* a "read in detail" CTA row that can hold two buttons (homepage sections) */ .detail-cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: clamp(2.4rem, 4vw, 3rem); } /* ════════════════════════════════════════════════════════════════════════ BLOG (blog.html) — engineered editorial index + newsletter capture ════════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* featured-post footer: mono meta line + inline CTA */ .post__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .post__meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--remi-muted); } /* newsletter capture (inline email + button), reuses the .field input look */ .subscribe { display: flex; flex-wrap: wrap; gap: .7rem; max-width: 31rem; margin: 2rem auto 0; } .subscribe input { flex: 1 1 220px; min-width: 0; font: 400 .95rem/1.5 var(--font-sans); color: var(--remi-ink); background: var(--remi-surface-3); border: 1.5px solid var(--remi-line); border-radius: var(--radius-sm); padding: .82rem 1rem; appearance: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .subscribe input::placeholder { color: var(--remi-muted); } .subscribe input:focus { outline: none; border-color: var(--remi-accent); box-shadow: var(--focus-ring); background: var(--remi-surface); } .subscribe input:read-only { opacity: .65; } .subscribe .btn { flex: 0 0 auto; } .subscribe__status { margin: 1.1rem 0 0; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; color: var(--remi-accent-dark); } .subscribe__status:empty { display: none; } .subscribe__note { margin: 1rem 0 0; font-size: .85rem; color: var(--remi-muted); } .subscribe__note a { color: var(--remi-accent-dark); font-weight: 600; } .subscribe__note a:hover { color: var(--remi-accent); } @media (max-width: 480px) { .subscribe .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .etile, .routeport, .channel, .subscribe input { transition: none; } .bpanel__scan { display: none; } } /* ── Prighter compliance certificate (privacy page footer) ─────────────── */ .prighter-cert { display: inline-block; margin-top: 1.9rem; } .prighter-cert img { display: block; max-width: 240px; width: 100%; height: auto; border-radius: var(--radius-md); }