/* ───── Breakpoints ───── * >1180px desktop — default state; nothing collapses * 1180px tablet — matrix header stops stacking * 900px drawer — sidebar collapses to off-canvas * 600px mobile — matrix switches to horizontal-snap towers * 480px narrow — phone-sized typography * ≤500h L landscape — phone-in-landscape, lock vertical scroll * * JS reads window.BP from /breakpoints.js. * CSS responsive rules use [data-bp="…"] / [data-bp-and-below~="…"] * (set by useBreakpoint() in helpers.jsx on ). */ @font-face { font-family: "Neue Machina"; src: url("/assets/fonts/NeueMachina-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tomato Grotesk"; src: url("/assets/fonts/TomatoGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --font-display: "Neue Machina", "Söhne", "Helvetica Neue", sans-serif; --font-body: "Tomato Grotesk", "Söhne", "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --paper: #FAF7F3; --ink: #393433; --line: #E2E0DF; --accent:#4866B2; --lime: #EDFE38; --header-h: 80px; --safe-top: env(safe-area-inset-top, 0px); /* Tower-head height + margin-bottom. The legend column's top spacer reads the same vars so legend tier rows always sit at the same Y as tower floors. */ --tower-head-h: 230px; --tower-head-mb: 8px; } *, *::before, *::after { box-sizing: border-box; } /* The page scrolls: the story (story.css) runs above the offerings, which sit in a one-screen frame on desktop. Overlays lock it with html.r-overlay-open (below). The gutter stays reserved so the page does not shift sideways when a lock hides the scrollbar. */ html, body, #root { margin: 0; } html { scrollbar-gutter: stable; } /* The offerings frame: one screen tall on desktop, less the fixed site header above it (48px, story-page.jsx), so the matrix (which sizes itself to the window less that header), the sidebar's pinned CTA and main's own scroll behave as they did when the page never scrolled. On phones it is a plain wrapper and the feed scrolls with the page. */ .r-offerings { display: flex; width: 100%; height: calc(100vh - 48px); height: calc(100dvh - 48px); overflow: hidden; position: relative; } .r-offerings--mobile { display: block; height: auto; overflow: visible; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "kern"; } button { font-family: inherit; } ::selection { background: var(--lime); color: var(--ink); } /* Scrollbar — subtle */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); } .dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); } /* Native select reset */ select { border-radius: 0; } /* Range slider base */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; background: #E2E0DF; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--accent); border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); } /* Dark mode helpers */ .dark { --paper: #0D0D0D; --ink: #FAF7F3; --line: #2A2825; } .dark input[type="range"] { background: #2A2825; } .dark input[type="range"]::-webkit-slider-thumb { border-color: #1A1817; } /* Cell focus ring */ [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ───── Animations ───── */ @keyframes towerIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes litBarIn { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes litSweep { 0% { transform: translateX(-100%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } .r-lit-sweep { animation: litSweep 1000ms cubic-bezier(.4,0,.2,1) both; } /* Slow ambient breathing pulse on lit cells after initial reveal */ @keyframes litBreathe { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(237,254,56,0); } 50% { box-shadow: inset 0 0 0 1px rgba(237,254,56,0.35); } } .r-floor-lit::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: litBreathe 3600ms ease-in-out infinite; animation-delay: 1100ms; } /* Status dot pulse for open projects */ @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46,153,75,0.5); } 50% { box-shadow: 0 0 0 4px rgba(46,153,75,0); } } .r-dot-pulse { animation: dotPulse 2400ms ease-in-out infinite; } @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes matchBump { 0% { transform: translateY(3px); opacity: 0.6; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slpill { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } .r-filter-row-flash { animation: r-filter-flash 1.2s ease-out; } @keyframes r-filter-flash { 0% { background: rgba(237, 254, 56, 0.45); } 100% { background: transparent; } } .r-print-view { display: none; } @media print { /* Reset screen-only layout & hide the entire screen UI */ html, body, #root { height: auto; overflow: visible; background: #FFFFFF; color: #393433; } #root > div { display: block; height: auto; overflow: visible; background: #FFFFFF; color: #393433; } #root > div > *:not(.r-print-view) { display: none !important; /* keep: many children (.r-detail, .r-narr-strip, .r-tweaks, etc) set display inline */ } .r-print-view { display: block; color: #393433; background: #FFFFFF; } /* ─── Print header ─── */ .r-pv-header { display: flex; position: fixed; top: 0; left: 0; right: 0; padding: 6mm 10mm 4mm; background: #FFFFFF; border-bottom: 1px solid #393433; align-items: center; gap: 10mm; } .r-pv-brand { flex: 0 0 auto; } .r-pv-logo { height: 12mm; width: auto; display: block; color: #393433; } .r-pv-title { flex: 1; text-align: center; } .r-pv-title-main { font-family: var(--font-display); font-size: 13pt; letter-spacing: -0.01em; color: #393433; } .r-pv-title-sub { font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.18em; text-transform: uppercase; color: #6B6361; margin-top: 1.5mm; } .r-pv-date { flex: 0 0 auto; font-family: var(--font-mono); font-size: 8pt; letter-spacing: 0.14em; text-transform: uppercase; color: #6B6361; text-align: right; } /* ─── Matrix table ─── */ .r-pv-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; font-family: var(--font-body); color: #393433; } .r-pv-col-tier { width: 34mm; } .r-pv-corner { background: transparent; border: none; } .r-pv-proj-head { padding: 0 2mm 3mm; vertical-align: top; text-align: left; border-bottom: 1px solid #393433; } .r-pv-proj-image { width: 100%; aspect-ratio: 16 / 10; background: #EAE4DB; overflow: hidden; border: 1px solid #E2E0DF; margin-bottom: 2mm; } .r-pv-proj-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .r-pv-proj-status { display: inline-flex; align-items: center; gap: 1.5mm; font-family: var(--font-mono); font-size: 7pt; letter-spacing: 0.14em; text-transform: uppercase; color: #6B6361; margin-bottom: 1mm; } .r-pv-dot { width: 2mm; height: 2mm; border-radius: 50%; display: inline-block; } .r-pv-proj-name { font-family: var(--font-display); font-size: 11pt; letter-spacing: -0.01em; color: #393433; line-height: 1.15; } .r-pv-proj-loc { font-size: 8pt; color: #6B6361; margin-top: 1mm; } .r-pv-tier-head { padding: 3mm 3mm 3mm 0; vertical-align: middle; text-align: left; border-bottom: 1px solid #E2E0DF; border-right: 1px solid #E2E0DF; } .r-pv-tier-name { font-family: var(--font-display); font-size: 10pt; letter-spacing: -0.005em; color: #393433; line-height: 1.15; } .r-pv-tier-desc { font-size: 8pt; color: #6B6361; margin-top: 1mm; line-height: 1.3; } .r-pv-cell { padding: 3mm; vertical-align: middle; border-bottom: 1px solid #E2E0DF; border-left: 1px solid #F1EDE8; page-break-inside: avoid; break-inside: avoid; } .r-pv-cell-return { font-family: var(--font-display); font-size: 13pt; letter-spacing: -0.02em; color: #393433; line-height: 1.05; } .r-pv-cell-meta { font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.08em; color: #6B6361; margin-top: 1.5mm; } .r-pv-cell-min { font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.08em; color: #6B6361; margin-top: 0.5mm; } .r-pv-cell-eligible { background: #FBFFC8; } /* soft lime to signal qualifies */ .r-pv-cell-mismatch { opacity: 0.55; } .r-pv-cell-empty { background: repeating-linear-gradient(45deg, transparent 0 3px, #F1EDE8 3px 6px); border-bottom: 1px solid #E2E0DF; } /* Last row: no bottom border on cells so table closes cleanly */ .r-pv-table tbody tr:last-child .r-pv-cell, .r-pv-table tbody tr:last-child .r-pv-tier-head { border-bottom: none; } /* ─── Print footer ─── */ .r-pv-footer { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 3mm 10mm; background: #FFFFFF; border-top: 1px solid #E2E0DF; font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.14em; text-transform: uppercase; color: #6B6361; justify-content: space-between; align-items: center; gap: 10mm; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { size: landscape; margin: 26mm 8mm 14mm; } } @media (prefers-reduced-motion: reduce) { .r-tower, .r-lit-sweep, .r-floor-lit::after, .r-dot-pulse, .r-lit-bar { animation: none !important; } } /* Keyboard focus — stronger outline than hover */ .r-floor:focus-visible, button:focus-visible { outline: 2px solid #4866B2 !important; /* keep: many buttons set border via inline style; ensures focus outline wins */ outline-offset: -2px; z-index: 3; } .r-floor { border-radius: 0; width: 100%; height: var(--floor-h); cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; font: inherit; color: inherit; border: 0; border-bottom: 1px solid var(--line); outline-offset: -2px; transform: translateX(0); transition: transform 180ms cubic-bezier(.4,0,.2,1), background 260ms, padding 180ms cubic-bezier(.4,0,.2,1); } .r-tower-floors > .r-floor:last-child { border-bottom-width: 0; } [data-cell-mode="roomy"] .r-floor { padding: 6px 10px; } [data-cell-mode="dense"] .r-floor { padding: 5px 16px; } [data-cell-mode="tight"] .r-floor { padding: 5px 14px; } /* Background by state (overridable inline for selected/hover) */ .r-floor-state-gray, .r-floor-state-strategic-idle { background: transparent; } .r-floor-state-lit { background: #FAFFCE; } .dark .r-floor-state-lit { background: #2D3A1F; } .r-floor-state-strategic { background: #D9E8C8; } .dark .r-floor-state-strategic { background: #2A3A24; } /* Investment-type filter: de-emphasize non-selected tier rows. Stays fully clickable; legibility preserved (no 0.4 opacity). */ .r-floor-muted { filter: saturate(0.4); opacity: 0.55; transition: opacity 200ms ease, filter 200ms ease; } @media (prefers-reduced-motion: reduce) { .r-floor-muted { transition: none; } } .r-floor-selected { background: #E8EDF7; outline: 2px solid #4866B2; } .dark .r-floor-selected { background: #1C2540; } /* Hover nudge — skipped for gray (ineligible) cells. */ .r-floor:not(.r-floor-state-gray):hover { transform: translateX(2px); } /* Chevron affordance — inline-styled border/fg by state; fill on hover so the tap target inverts (dark box, light glyph) and reads as live. */ .r-floor-tap { transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .r-floor:not(.r-floor-state-gray):hover .r-floor-tap { background: #393433 !important; color: #FAF7F3 !important; border-color: #393433 !important; } .dark .r-floor:not(.r-floor-state-gray):hover .r-floor-tap { background: #FAF7F3 !important; color: #393433 !important; border-color: #FAF7F3 !important; } .r-floor-stack-base { position: relative; display: flex; flex-direction: column; transition: gap 180ms cubic-bezier(.4,0,.2,1); } .r-lit-sweep-fill { position: absolute; inset: 0; pointer-events: none; } .r-lit-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; transform-origin: bottom; } .r-floor-strategic-wrap { display: flex; flex-direction: column; gap: 5px; } .r-floor-strategic-title { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.015em; line-height: 1.05; font-weight: 600; } .r-floor-strategic-sub { font-size: 11.5px; line-height: 1.35; font-weight: 500; } .r-floor-price-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .r-floor-price-label { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; transition: font-size 180ms cubic-bezier(.4,0,.2,1); } .r-floor-price-value { font-family: var(--font-mono); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; transition: font-size 180ms cubic-bezier(.4,0,.2,1); } .r-floor-meta-list { display: flex; flex-direction: column; row-gap: 2px; } .r-floor-meta-cell { font-family: var(--font-mono); text-transform: uppercase; white-space: nowrap; transition: font-size 180ms cubic-bezier(.4,0,.2,1); } /* ───── Responsive ───── */ .r-hamburger { display: none; } .r-backdrop { display: none; } /* The offerings' own header bar (header.jsx) exists only to hold the filters button where the filters are a drawer; wider, the site header above says where the visitor is. */ .r-matrix-header { display: none; } [data-bp-and-below~="drawer"] .r-matrix-header { display: flex; } [data-bp-and-below~="tablet"] .r-matrix-header { flex-direction: row; align-items: center; gap: 14px !important; /* keep: header.jsx sets gap: 32 inline */ } [data-bp-and-below~="tablet"] .r-matrix-header .r-hstats { flex-wrap: wrap; justify-content: flex-start; gap: 24px; } [data-bp-and-below~="tablet"] .r-matrix-sub { max-width: 640px; } [data-bp-and-below~="drawer"] .r-sb-close { display: inline-flex !important; /* keep: sidebar.jsx sets display: "none" inline */ } [data-bp-and-below~="drawer"] .r-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 86vw; max-width: 340px; z-index: 50; /* closed: 48px past the left edge, beyond its 40px shadow, which otherwise shows down the page */ transform: translateX(calc(-100% - 48px)); transition: transform 260ms cubic-bezier(.4,0,.2,1); box-shadow: 0 0 40px rgba(0,0,0,0.25); } [data-bp-and-below~="drawer"] .r-sidebar.is-open { transform: translateX(0); } [data-bp-and-below~="drawer"] .r-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } [data-bp-and-below~="drawer"] .r-backdrop.is-open { opacity: 1; pointer-events: auto; } [data-bp-and-below~="drawer"] .r-hamburger { display: inline-flex; } [data-bp-and-below~="drawer"] .r-matrix-header { padding: 14px 16px 12px !important; /* keep: header.jsx sets padding: "0 28px" inline */ flex-direction: row; align-items: center; gap: 14px !important; /* keep: header.jsx sets gap: 32 inline */ } [data-bp-and-below~="drawer"] .r-matrix-header .r-hstats { flex-wrap: wrap; gap: 16px; justify-content: space-between; } [data-bp-and-below~="drawer"] .r-matrix-title { font-size: 22px; } [data-bp-and-below~="drawer"] .r-matrix-sub { font-size: 12px; } [data-bp-and-below~="drawer"] .r-matrix-body { padding: 16px; } [data-bp-and-below~="drawer"] .r-narr-strip { padding: 10px 16px 12px !important; /* keep: app.jsx sets padding inline */ } [data-bp-and-below~="drawer"] .r-narr-beats { grid-template-columns: 1fr !important; gap: 10px !important; /* keep: app.jsx sets grid-template-columns and gap inline */ } [data-bp-and-below~="drawer"] .r-narr-beats > div { padding-left: 0; } [data-bp-and-below~="drawer"] .r-narr-beats > div > [aria-hidden="true"] { display: none; } [data-bp-and-below~="drawer"] .r-detail { width: 100vw !important; /* keep: detail.jsx sets width: "min(588px, 100vw)" inline */ } /* ───── Detail slide-over: static structure ───── */ /* Theme colors (bg, border, text), state-driven transforms, and dynamic widths/values stay inline in detail.jsx. Everything below is static. */ .r-detail-backdrop { position: fixed; inset: 0; background: rgba(13,13,13,0.22); transition: opacity 280ms; z-index: 40; } .r-detail { position: fixed; top: 0; right: 0; bottom: 0; width: min(960px, 100vw); max-width: 100vw; transition: transform 320ms cubic-bezier(.4,0,.2,1); z-index: 50; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* While an overlay is open (a detail panel, the story's contents menu), lock the page behind it so the overlay's own scroll does not chain into the page at its edges. Class toggled by detail.jsx and story-page.jsx; .r-detail keeps its own scroll. Every breakpoint: the desktop page scrolls too. */ html.r-overlay-open, html.r-overlay-open body, html.r-overlay-open #root { overflow: hidden !important; } /* ───── Rich offering panel: scrollspy nav + project-level content ───── */ .r-panel-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 9px 28px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: -webkit-sticky; } .r-panel-nav::-webkit-scrollbar { display: none; } /* Bordered, spaced chips. Default: outlined + muted. Hover: surface fill + ink border. Pressed: nudge down. Active (selected): lime fill, ink text. */ .r-panel-nav-tab { flex: 0 0 auto; cursor: pointer; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 12px; color: var(--rp-muted, #6B6361); background: transparent; border: 1px solid var(--rp-border, #E2E0DF); transition: background 140ms, color 140ms, border-color 140ms, transform 90ms; } .r-panel-nav-tab:hover { background: var(--rp-hover, #F6F2EC); color: var(--rp-text, #393433); border-color: var(--rp-text, #393433); } .r-panel-nav-tab:focus-visible { outline: 2px solid #4866B2; outline-offset: 1px; } .r-panel-nav-tab:active { transform: translateY(1px); } .r-panel-nav-tab.is-active, .r-panel-nav-tab.is-active:hover { background: #EDFE38; border-color: #EDFE38; color: #393433; font-weight: 500; } @media (prefers-reduced-motion: reduce) { .r-panel-nav-tab { transition: none !important; } } /* Which product you are reading, pinned left while the tabs scroll under it. `background: inherit` picks up the bar's own inline surface colour, so light and dark both stay opaque with one declaration. Keep the vertical padding equal to .r-panel-nav-tab so the bar height, and with it PANEL_NAV_OFFSET in detail.jsx, does not move. */ /* An inverted badge, not a label. It previously took the same face, size and case as the tabs beside it but without their box, so it read as a tab that had lost its border and the eye filed it as a heading and skipped it (Chris did not find it and had to ask where it was). Inverting is the only treatment that cannot be mistaken for a tab, costs no height, and still fits PADREMIER-DEBT's long "Institutional Debt" override. Colours come from the bar's own tokens, so it inverts correctly in both themes without a second declaration: ink on surface becomes surface on ink. Deliberately NOT lime, which is the active-tab fill and would invite a click on something that is not clickable. */ .r-panel-nav-pin { position: sticky; left: 0; z-index: 1; flex: 0 0 auto; white-space: nowrap; padding: 7px 11px; background: var(--rp-text, #393433); color: var(--rp-surface, #FFFFFF); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } /* `left: 0` sticks the pin to the bar's PADDING edge, leaving the 28px strip outside it for scrolled tabs to show through. This covers that strip. It has to be a pseudo-element: a negative margin on the pin itself makes it paint wider than the flex track it reserves, which overlaps the first tab by that much at rest. */ .r-panel-nav-pin::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 28px; background: var(--rp-surface, #FFFFFF); } .r-panel-media { width: 100%; } .r-panel-media .r-carousel-media { max-height: 600px; } .r-panel-media-caption { padding: 12px 28px; font-size: 12px; line-height: 1.4; } .r-panel-media-head { padding: 28px 28px; } .r-panel-media-intro { margin: 0; } /* Project deck slides rendered as images, stacked full-width. */ .r-panel-slides { display: block; } .r-panel-slide { display: block; width: 100%; height: auto; } /* Project photo gallery — masonry columns; each image keeps its aspect ratio (no letterbox white space from mixed portrait/landscape). */ .r-panel-gallery { column-count: 2; column-gap: 6px; padding: 6px; } .r-panel-gallery-item { width: 100%; height: auto; display: block; margin-bottom: 6px; break-inside: avoid; } @media (max-width: 420px) { .r-panel-gallery { column-gap: 4px; padding: 4px; } .r-panel-gallery-item { margin-bottom: 4px; } } /* "View full project" strip — transparent; whole row is the click target, turns Reurbano blue on hover. */ .r-detail-strip { display:flex; align-items:center; gap:9px; box-sizing:border-box; width:calc(100% - 56px); text-align:left; border:1px solid #4866B2; background:transparent; padding:12px; margin:16px 28px 0; font:inherit; cursor:pointer; transition:background .15s, color .15s; } .r-detail-strip-img { width:40px; height:30px; object-fit:cover; border:1px solid #393433; } .r-detail-strip-name { font-size:13px; } .r-detail-strip-link { margin-left:auto; color:#4866B2; font-size:11px; } .r-detail-strip:hover { background:#4866B2; color:#FAF7F3; } .r-detail-strip:hover .r-detail-strip-name, .r-detail-strip:hover .r-detail-strip-link { color:#FAF7F3; } .r-detail-strip:focus-visible { outline:2px solid #4866B2; outline-offset:-2px; } .r-panel-units-wrap { margin-top: 8px; overflow-x: auto; } .r-panel-units { width: 100%; border-collapse: collapse; font-size: 13px; } .r-panel-units-th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; padding: 8px 10px 8px 0; } .r-panel-units-td { padding: 9px 10px 9px 0; font-variant-numeric: tabular-nums; } .r-detail-header { padding: 32px 28px 26px; position: relative; } .r-detail-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; } .r-detail-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .r-detail-status-dot { width: 6px; height: 6px; border-radius: 50%; } .r-detail-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } /* Breadcrumb — project↔offering context above the status row. Small, muted, squared; the offering-mode back-link is brand-blue with a focus ring. */ .r-detail-crumb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; line-height: 1.3; padding-right: 36px; /* clear the close button */ } .r-detail-crumb-back { font: inherit; letter-spacing: inherit; text-transform: inherit; background: transparent; border: none; padding: 0; color: #4866B2; cursor: pointer; border-radius: 0; } .r-detail-crumb-back:hover { text-decoration: underline; } .r-detail-crumb-back:focus-visible { outline: 2px solid #4866B2; outline-offset: 2px; } .r-detail-title { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; line-height: 1.05; } .r-detail-subhead { font-size: 13px; margin-top: 4px; } .r-detail-section { padding: 28px 28px 30px; } .r-detail-section-sm { padding: 26px 28px; } .r-detail-section-strategic { padding: 24px 28px; } .r-detail-section-strategic-warn { padding: 24px 28px; border-left: 3px solid #D97757; } .r-detail-section-strategic-ok { padding: 24px 28px; border-left: 3px solid #4866B2; } .r-detail-warn-text { color: #D97757; } .r-detail-h3 { margin: 0; margin-bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; } .r-detail-h3-tight { margin: 0; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; } .r-detail-h3-mini { margin: 0; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; } .r-detail-h3-mb12 { margin: 0; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; } .r-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Return bar (detail.jsx ReturnBar): 0 to the cap, base solid, lime to the target, hatched to the cap. --rs-ink and --rs-hatch are set inline so the bar follows the panel's light or dark colors. */ .r-rs { position: relative; height: 74px; margin: 6px 0 26px; } .r-rs-target, .r-rs-scale span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .r-rs-target { position: absolute; top: 0; transform: translateX(-50%); } .r-rs-target.r-rs-align-start { transform: none; } .r-rs-target.r-rs-align-end { transform: translateX(-100%); } .r-rs-track { position: absolute; left: 0; right: 0; top: 26px; height: 14px; box-shadow: inset 0 0 0 1px var(--rs-ink); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--rs-hatch) 4px 5px); } .r-rs-base, .r-rs-kicker { position: absolute; top: 0; bottom: 0; left: 0; } .r-rs-base { background: var(--rs-ink); } .r-rs-kicker { background: #EDFE38; box-shadow: inset 0 1px 0 var(--rs-ink), inset 0 -1px 0 var(--rs-ink); } .r-rs-marker { position: absolute; top: -8px; bottom: -8px; width: 2px; background: #4866B2; transform: translateX(-1px); } .r-rs-marker.r-rs-marker-end { transform: translateX(-2px); } .r-rs-scale { position: absolute; left: 0; right: 0; top: 50px; display: flex; justify-content: space-between; } .r-rs-scale .r-rs-base-label { position: absolute; top: 0; transform: translateX(-50%); } .r-rs-note { margin: -12px 0 22px; font-size: 12.5px; line-height: 1.5; } .r-detail-grid-16 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .r-detail-metric-label { font-size: 10px; letter-spacing: 0.04em; margin-bottom: 3px; } .r-detail-metric-value { font-size: 13px; line-height: 1.2; white-space: pre-line; } .r-detail-body-p { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-line; } .r-detail-strategic-body { font-size: 12.5px; line-height: 1.5; } .r-detail-divider { width: 64px; height: 0; margin: 20px auto 18px; } .r-detail-calc-box { margin-top: 14px; padding: 12px 14px; position: relative; } .r-detail-calc-label { font-size: 10.5px; letter-spacing: 0.04em; margin-bottom: 4px; } .r-detail-calc-value { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; line-height: 1; color: #4866B2; } .r-detail-calc-meta { font-family: var(--font-mono); font-size: 10px; margin-top: 6px; } .r-detail-calc-rate { position: absolute; right: 14px; bottom: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; } .r-detail-slider-row { display: flex; justify-content: space-between; margin-bottom: 4px; } .r-detail-slider-label { font-size: 11px; } .r-detail-slider-value { font-family: var(--font-mono); font-size: 14px; } /* .r-detail-slider-input: see below (with accent-color) */ .r-detail-slider-ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; margin-top: 4px; } .r-detail-slider-cap { display: inline-flex; align-items: center; gap: 6px; } .r-detail-slider-cap-pill { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; } .r-detail-reason-btn { background: transparent; border: none; padding: 0; margin: 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; text-align: left; cursor: pointer; } .r-detail-reason-list { display: flex; flex-direction: column; gap: 6px; } .r-detail-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.55; } .r-detail-bullets li { position: relative; padding-left: 18px; } .r-detail-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #4866B2; } .r-detail-cta-primary { width: 100%; padding: 12px 16px; border: none; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; color: #fff; background: #4866B2; } .r-detail-cta-inline { padding: 10px 14px; border: none; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: #fff; background: #4866B2; } .r-detail-slider-input { width: 100%; accent-color: #4866B2; } .r-detail-accent-text { color: #4866B2; } .r-detail-cta-inline-mt { margin-top: 16px; } .r-detail-disclaimer { font-size: 10px; margin-top: 12px; line-height: 1.5; text-align: center; } .r-detail-next-steps { padding: 28px; } .r-detail-calc-wrap { padding-bottom: 20px; } .r-detail-indicative-after { padding: 0 28px 26px; } .r-wti-head, .r-wti-row { display:grid; grid-template-columns:1.3fr .8fr 1.2fr .7fr 16px; gap:8px; align-items:center; } .r-wti-head { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#6B6361; padding:0 9px; margin:6px 0 2px; } .r-wti-row { width:100%; text-align:left; border:1px solid #393433; background:transparent; padding:9px; margin-top:7px; font-size:10.5px; cursor:pointer; color:inherit; font-family:inherit; transition:transform 180ms cubic-bezier(.4,0,.2,1), background 200ms, border-color 200ms; } /* State backgrounds mirror the matrix cells (.r-floor-state-* above) so a row reads lit/strategic/gray exactly like its matrix tier for this profile. */ .r-wti-state-lit { background:#FAFFCE; } .dark .r-wti-state-lit { background:#2D3A1F; } .r-wti-state-strategic { background:#D9E8C8; } .dark .r-wti-state-strategic { background:#2A3A24; } .r-wti-state-gray, .r-wti-state-strategic-idle { background:transparent; } /* Gray (no longer applicable) rows recede: muted text + border, and no hover nudge — same treatment as ineligible matrix cells. */ .r-wti-state-gray { color:#8C8987; border-color:#C9C4BF; } .dark .r-wti-state-gray { color:#7A7775; border-color:#3A3A3A; } .r-wti-state-gray .r-wti-chev { color:#8C8987; } .dark .r-wti-state-gray .r-wti-chev { color:#7A7775; } /* Hover mirrors the matrix: 2px nudge + accent border, state color preserved (no full-dark invert). Skipped for gray, like .r-floor:not(...gray):hover. */ .r-wti-row:not(.r-wti-state-gray):hover { transform:translateX(2px); border-color:#4866B2; } .r-wti-row:focus-visible { outline:2px solid #4866B2; outline-offset:-2px; } .r-wti-tier { font-weight:500; } .r-wti-chev { color:#4866B2; text-align:center; } /* ── FAQ (faq.jsx) — accordion shared by the project-panel FAQ tab and the dedicated FAQ surface. Squared, ink/blue, one item open at a time (native exclusive

). ── */ .r-faq-item { border-top:1px solid #E0D8CF; } .r-faq-item:first-child { border-top:none; } .r-faq-q { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#393433; padding:13px 0; cursor:pointer; list-style:none; } .r-faq-q::-webkit-details-marker { display:none; } .r-faq-q:hover { color:#000; } .r-faq-q:focus-visible { outline:2px solid #4866B2; outline-offset:2px; } .r-faq-item[open] .r-faq-q { padding-bottom:4px; } .r-faq-mark { color:#4866B2; flex:none; line-height:1.45; transition:transform .15s ease; } .r-faq-item[open] .r-faq-mark { transform:rotate(90deg); } .r-faq-a { font-size:13px; color:#6B6361; margin:0 0 14px 20px; } .r-faq-p { margin:0 0 9px; line-height:1.55; } .r-faq-a .r-faq-p:last-child { margin-bottom:0; } .r-faq-subh { font-weight:500; color:#393433; margin:13px 0 4px; } .r-faq-ul { margin:6px 0 9px; padding-left:18px; } .r-faq-ul li { margin:0 0 5px; line-height:1.5; } .r-faq-ul li::marker { color:#4866B2; } .r-faq-intro { font-size:13px; color:#6B6361; line-height:1.6; margin:0 0 6px; } .r-faq-morelink { margin-top:18px; background:none; border:none; padding:0 0 1px; font-family:inherit; font-size:12.5px; color:#4866B2; border-bottom:1px solid currentColor; cursor:pointer; } .r-faq-morelink:focus-visible { outline:2px solid #4866B2; outline-offset:2px; } /* dark (OpCo/DevCo-style panels) */ .r-faq--dark .r-faq-item { border-color:#3F3D3A; } .r-faq--dark .r-faq-q { color:#E8E4E0; } .r-faq--dark .r-faq-q:hover { color:#fff; } .r-faq--dark .r-faq-a, .r-faq--dark .r-faq-intro { color:#A89F9A; } .r-faq--dark .r-faq-subh { color:#E8E4E0; } @media (prefers-reduced-motion: reduce) { .r-faq-mark { transition:none; } } /* dedicated full-screen FAQ surface */ .r-faq-surface { position:fixed; inset:0; z-index:1150; background:#FAF7F3; overflow-y:auto; overscroll-behavior:contain; } .r-faq-surface.dark { background:#161514; } .r-faq-surface-inner { max-width:760px; margin:0 auto; padding:0 24px 80px; } /* Head + tabs stick together as one block so the close button AND the section nav stay reachable while the body scrolls under them. */ .r-faq-sticky { position:sticky; top:0; z-index:2; background:#FAF7F3; padding-top:24px; } .r-faq-surface.dark .r-faq-sticky { background:#161514; } .r-faq-surface-head { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:6px; } .r-faq-surface-head h2 { font-size:20px; font-weight:500; margin:0; color:#393433; } .r-faq-surface.dark .r-faq-surface-head h2 { color:#F2EFEB; } .r-faq-close { background:none; border:1px solid #CFC6BA; width:30px; height:30px; font-size:18px; line-height:1; color:#6B6361; cursor:pointer; flex:none; } .r-faq-close:hover { background:#393433; color:#FAF7F3; border-color:#393433; } .r-faq-close:focus-visible { outline:2px solid #4866B2; outline-offset:2px; } .r-faq-surface.dark .r-faq-close:hover { background:#F2EFEB; color:#161514; border-color:#F2EFEB; } /* Section jump-nav. Tabs scroll to their section (nothing is filtered out); the active state follows the scroll position. Chips mirror the slide-over's .r-panel-nav-tab (hover fill, lime active). Desktop: chips wrap so all sections stay visible; mobile: one horizontally-scrollable row. Sticky positioning lives on the .r-faq-sticky wrapper. */ .r-faq-filterbar { display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:6px 0 12px; border-bottom:1px solid #E0D8CF; } .r-faq-surface.dark .r-faq-filterbar { border-color:#3F3D3A; } @media (max-width: 640px) { .r-faq-filterbar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .r-faq-filterbar::-webkit-scrollbar { display:none; } } .r-faq-f { flex:0 0 auto; cursor:pointer; white-space:nowrap; font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; padding:7px 12px; color:#6B6361; background:transparent; border:1px solid #E2E0DF; transition:background 140ms, color 140ms, border-color 140ms, transform 90ms; } .r-faq-f:hover { background:#F6F2EC; color:#393433; border-color:#393433; } .r-faq-f:active { transform:translateY(1px); } .r-faq-f.on, .r-faq-f.on:hover { background:#EDFE38; border-color:#EDFE38; color:#393433; font-weight:500; } .r-faq-f:focus-visible { outline:2px solid #4866B2; outline-offset:1px; } @media (prefers-reduced-motion: reduce) { .r-faq-f { transition:none !important; } } .r-faq-surface.dark .r-faq-f { color:#A89F9A; border-color:#3F3D3A; } .r-faq-surface.dark .r-faq-f:hover { background:#201F1D; color:#F2EFEB; border-color:#F2EFEB; } .r-faq-surface.dark .r-faq-f.on, .r-faq-surface.dark .r-faq-f.on:hover { background:#EDFE38; border-color:#EDFE38; color:#393433; } /* Each section opens with a filled ink band so the break is unmistakable while scanning. The band is the divider (no separate rule). First section sits tight under the sticky tab bar; the rest get a big gap. */ .r-faq-cat { margin:40px 0 0; } .r-faq-cat:first-of-type { margin-top:20px; } .r-faq-cat-h { font-family:var(--font-display); font-size:16px; font-weight:400; letter-spacing:-0.01em; color:#FAF7F3; background:#393433; padding:9px 14px; margin:0 0 6px; } .r-faq-surface.dark .r-faq-cat-h { color:#161514; background:#EDFE38; } [data-bp-and-below~="drawer"] .r-tweaks { width: calc(100vw - 24px) !important; /* keep: app.jsx sets width: 288 inline */ max-width: 360px; right: 12px !important; bottom: 12px !important; /* keep: app.jsx sets right: 16, bottom: 16 inline */ } /* ───── Mobile redesign (≤600px portrait): card feed + slide-up sheets ───── The matrix is replaced below `mobile` by the new tree under public/mobile/*.jsx. The old horizontal-snap matrix CSS that used to live here is gone. */ /* Filter sheet reuses verbatim — make it full-bleed on phones and switch the filter grid to two columns to stay tight. */ [data-bp-and-below~="mobile"] .r-sidebar { width: 100vw; max-width: 100vw; } [data-bp-and-below~="mobile"] .r-filter-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 0; padding: 14px 20px 6px !important; /* keep: sidebar.jsx sets padding inline */ } [data-bp-and-below~="mobile"] .r-filter-group-head { grid-column: 1 / -1; } [data-bp-and-below~="mobile"] .r-filter-row { min-width: 0; } /* Detail slide-up reuses verbatim. Default .r-detail slides in from the right; on phones we anchor it to the bottom and slide up so the interaction matches a native sheet. The class .r-detail-mobile is added by public/mobile/mobile-detail.jsx only on phone viewports. */ [data-bp-and-below~="mobile"] .r-detail.r-detail-mobile { top: auto; right: 0; left: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 92dvh; max-height: 92dvh; } /* !important because detail.jsx sets transform: translateX(...) inline for the desktop slide-from-right behavior; we need to override that on phones so the panel slides up from the bottom instead. */ [data-bp-and-below~="mobile"] .r-detail.r-detail-mobile.is-closed { transform: translateY(100%) !important; } [data-bp-and-below~="mobile"] .r-detail.r-detail-mobile.is-open { transform: translateY(0) !important; } /* Tap-outside-to-close target for the mobile slide-up. Transparent (no background) so it never changes the visual look — it's purely a click catcher. z-index:49 sits below the sheet (.r-detail z-index:50) so the sheet stays interactive, and above the feed/sticky header (~10) so the whole app behind the sheet dismisses on tap. Only ever rendered inside MobileDetailSheet, so it can't affect desktop. Works in both orientations (in portrait it covers the strip above the 92dvh sheet). */ .r-detail-mobile-backdrop { position: fixed; inset: 0; z-index: 49; } /* Mobile feed is a normal page scroll — undo the global overflow:hidden set on html/body/#root for the desktop matrix. NB: [data-bp~] lives on itself, so we target it directly (not as a descendant). */ html[data-bp-and-below~="mobile"], html[data-bp-and-below~="mobile"] body, html[data-bp-and-below~="mobile"] #root, html[data-bp-and-below~="mobile"] #root > div { /* clip, not hidden: hidden turns body and the app wrapper into scroll boxes that never scroll, and sticky headers (the story's, the feed's top strip) then stick to them instead of the screen. hidden stays as the fallback for browsers without clip (Safari before 16). */ overflow-x: hidden !important; overflow-x: clip !important; overflow-y: visible !important; height: auto !important; width: 100%; max-width: 100vw; } [data-bp-and-below~="mobile"] .r-mobile-app { min-height: 100dvh; width: 100%; max-width: 100vw; overflow-x: hidden; overflow-x: clip; } /* Belt-and-suspenders: data-bp is set by JS after first paint, so on the initial render the rules above don't match yet. Mirror the constraints via a plain media query so iOS Safari never sees content wider than the viewport on first load (which would otherwise auto-zoom). */ @media (max-width: 600px) { html, body, #root, #root > div { overflow-x: hidden !important; overflow-x: clip !important; max-width: 100vw; } .r-mobile-app { width: 100%; max-width: 100vw; overflow-x: hidden; overflow-x: clip; } } .r-m-viewproject { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:11px 0 0; border:1px solid #4866B2; color:#4866B2; background:transparent; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:8px 9px; line-height:1; cursor:pointer; } .r-m-viewproject:active { background:#4866B2; color:#FAF7F3; border-color:#4866B2; } .r-m-viewproject:focus-visible { outline:2px solid #4866B2; outline-offset:-2px; } /* The "scroll left and right" rotate hint is desktop-matrix chrome — hide it on phones, the card feed scrolls vertically. */ [data-bp-and-below~="mobile"] .r-rotate-hint { display: none !important; } /* DetailPanel's close button sits at top:16px,right:16px inside the panel. On phones we shrink the header padding so the close button + title clear the mobile top bar without scrolling. */ [data-bp-and-below~="mobile"] .r-detail.r-detail-mobile .r-detail-header { padding-top: 18px; padding-bottom: 18px; } /* ───── Task 4: matrix viewport-keyed styles (replaces compact ternaries) ───── The matrix.jsx `compact` flag (vw<768 || vh<640) used to gate ~12 inline-style sites. Width-keyed cases are now class-driven via [data-bp-and-below~="mobile"] (≤720, close approx of vw<768). The vh<640 short-landscape case is covered by the existing landscape-and-max-height rule below. */ .r-matrix-body { padding: 10px 0 0 0; } .r-matrix-scroll { padding: 0 28px 24px 0; overflow-x: auto; position: relative; } [data-bp-and-below~="mobile"] .r-matrix-scroll { padding: 0 20px 12px 0; } /* min-width: max-content makes the grid grow to fit its content whenever children would otherwise overflow the parent's width — at ANY breakpoint. That gives position:sticky on the legend column a real containing block to lock against, so the legend stays frozen at the scroll container's left edge as towers scroll behind it. When the parent IS wider than the children (full desktop with few projects), flex-grow still distributes the extra space normally. */ .r-matrix-grid { display: flex; gap: 16px; align-items: stretch; padding-bottom: 8px; min-width: max-content; } /* Legend column is always frozen at the left edge of the matrix scroll container — whenever the matrix overflows horizontally (drawer, mobile, or any desktop width with enough projects), towers scroll behind this column. Opaque background + right-edge shadow are unconditional so the freeze reads visually whenever a scroll actually happens. */ .r-legend-col { flex-shrink: 0; width: 160px; padding-left: 12px; padding-right: 4px; display: flex; flex-direction: column; position: sticky; left: 0; z-index: 5; background: var(--paper); box-shadow: 6px 0 12px -8px rgba(0,0,0,0.18); } .dark .r-legend-col { background: #0D0D0D; } [data-bp-and-below~="mobile"] .r-legend-col { padding-left: 20px; } .r-legend-foot { height: 64px; background: transparent; } .r-legend-tiers { border: 1px solid transparent; } .r-legend-tier-row { width: 100%; height: var(--floor-h); position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 0; background: transparent; overflow: hidden; } .r-legend-tier-text { flex: 1; min-width: 0; } .r-legend-tier-label { font-family: var(--font-display); font-size: 12.5px; line-height: 1.1; letter-spacing: -0.005em; } .r-legend-tier-micro { margin-top: 3px; font-size: 9.5px; line-height: 1.2; } [data-bp-and-below~="mobile"] .r-legend-foot { height: 24px; } .r-tower { flex: 1 1 200px; min-width: 200px; max-width: 480px; display: flex; flex-direction: column; container-type: inline-size; } .r-tower-status-row { display: flex; align-items: center; gap: 6px; height: 12px; margin-bottom: 4px; } .r-tower-status-dot { width: 6px; height: 6px; border-radius: 50%; } .r-tower-status-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; } .r-tower-head { padding-top: 0; margin-bottom: var(--tower-head-mb); min-height: var(--tower-head-h); height: auto; box-sizing: content-box; display: flex; flex-direction: column; } /* Flex column that fills the equalized head height so .r-tower-cta can pin to the bottom (margin-top:auto). Every head shares --tower-head-h (set by the ResizeObserver to the tallest inner), so the bottom-pinned CTAs align across columns regardless of how much copy sits above them. */ .r-tower-head-inner { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 5px; } .r-tower-head-clickable { cursor:pointer; transition:background .15s, transform .15s, box-shadow .15s; } .r-tower-head-clickable:hover { background:rgba(72,102,178,.07); transform:translateY(-2px); box-shadow:0 4px 14px rgba(57,52,51,.10); } .r-tower-head-clickable:focus-visible { outline:2px solid #4866B2; outline-offset:-2px; } /* "View project" affordance under the header — a plain blue text link, not a bordered button (the whole header is clickable; this just names the action). */ .r-tower-cta { display:flex; align-items:center; justify-content:flex-start; gap:6px; width:100%; margin-top:auto; padding-top:10px; padding-bottom:14px; line-height:1.4; font-family:var(--font-body); font-size:11px; letter-spacing:.01em; text-transform:uppercase; } .r-tower-head-clickable:hover .r-tower-cta { text-decoration:underline; } [data-bp-and-below~="mobile"] :root, [data-bp-and-below~="mobile"] { --tower-head-mb: 6px; } [data-bp-and-below~="mobile"] .r-tower-head { padding-top: 14px; padding-bottom: 3px; } /* Legend top spacer: structurally mirrors .r-tower-head so legend tier rows always align with tower floors. Same min-height (--tower-head-h, set by the ResizeObserver in matrix.jsx to the tallest head's content) and same margin-bottom (--tower-head-mb). No JS state coupling needed. */ .r-legend-head-spacer { min-height: var(--tower-head-h); margin-bottom: var(--tower-head-mb); flex-shrink: 0; } /* The currency note, in the corner above the tier labels (matrix.jsx): it sits with the figures it explains and appears only at the offerings. */ .r-legend-note { margin: 0; padding: 4px 10px 0 0; font-size: 10.5px; line-height: 1.4; font-style: italic; color: #6B6361; } .dark .r-legend-note { color: #8A827F; } [data-bp-and-below~="mobile"] .r-legend-head-spacer { padding-top: 14px; padding-bottom: 3px; } .r-tower-name { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.05; font-size: 16px; height: 18px; margin-bottom: 8px; } [data-bp-and-below~="mobile"] .r-tower-name { font-size: 14px; height: 16px; margin-bottom: 4px; } .r-tower-image { width: 100%; height: 124px; background: #FFFFFF; overflow: hidden; position: relative; } .r-tower-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } [data-bp-and-below~="mobile"] .r-tower-image { height: 115px; } .r-tower-blurb-clamp { letter-spacing: 0.01em; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-overflow: ellipsis; } .r-tower-blurb { margin-top: 8px; margin-bottom: 8px; font-size: clamp(11px, 5.5cqw, 12px); } [data-bp-and-below~="mobile"] .r-tower-blurb { margin-top: 4px; margin-bottom: 3px; font-size: 11px; min-height: 6.75em; } [data-bp-and-below~="mobile"] .r-floor-stack { gap: 7px !important; /* keep: TowerFloor.jsx sets gap inline from scale.gap */ } .r-tower-blurb-blank { margin-top: 8px; min-height: clamp(74px, 8.8vh, 95px); } [data-bp-and-below~="mobile"] .r-tower-blurb-blank { margin-top: 4px; min-height: clamp(74px, 9.5vh, 95px); } .r-tower-floors { display: flex; flex-direction: column; position: relative; overflow: hidden; } .r-plinth { padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 6px; } .r-plinth-bar { position: relative; height: 4px; } .r-plinth-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width 400ms cubic-bezier(.22,.61,.36,1); } .r-plinth-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .r-plinth-pct { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .r-plinth-pct-sub { font-weight: 400; } .r-plinth-days { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .r-plinth-days-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: inline-block; } .r-tower-facts { margin-top: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; height: 28px; } [data-bp-and-below~="mobile"] .r-tower-facts { margin-top: 4px; } .r-tower-facts-left { font-size: 10.5px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .r-tower-facts-right { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } /* ───── Landscape phone (short viewport): lock vertical scroll, fit content ───── */ @media (orientation: landscape) and (max-height: 500px) { /* The MAIN region holds the matrix; lock it so the tier grid fits the short screen. Only the offerings frame: the page itself still scrolls through the story above it. */ .r-offerings main { overflow-y: hidden; overflow-x: hidden; } /* Header: stay in one row; the 1180px column-flex rule would otherwise stack them and eat too much vertical space. */ .r-matrix-header { flex-direction: row; align-items: center; height: var(--header-h) !important; /* keep: header.jsx sets height inline */ padding: 0 16px !important; /* keep: header.jsx sets padding inline */ gap: 10px !important; /* keep: header.jsx sets gap: 32 inline */ } .r-matrix-body { height: calc(100vh - 48px - var(--header-h)); padding: 0 !important; /* keep: matrix.jsx sets padding inline */ display: flex; flex-direction: column; } .r-matrix-scroll { flex: 1 1 auto; min-height: 0; overflow-y: hidden; overflow-x: auto; padding: 6px 0 6px 0; } /* Drop vertical-heavy chrome so the tier grid fits in available height. */ .r-tower-image, .r-tower-blurb, .r-tower-blurb-blank, .r-tower-facts, .r-plinth, .r-narr-strip, .r-empty-banner { display: none; } /* Compress vertical spacing. Both the tower-head and the legend spacer mirror each other via --tower-head-h (ResizeObserver-published) and --tower-head-mb (CSS var). The spacer's base rule already reads both, so we just shrink --tower-head-mb here — no spacer-specific override needed. That keeps the legend tier rows aligned with tower floors. */ :root { --tower-head-mb: 4px; } .r-tower-head { height: auto; min-height: 0; padding-bottom: 4px; } /* Hide tier descriptions so legend tier rows don't grow taller than tower floor rows once the head shrinks. */ .r-legend-tier-micro { display: none; } /* Drop the bottom spacer (was matching the plinth, now hidden). The legend column is structured as: [top spacer], [tier rows], [bottom spacer]. Top spacer height is driven by inline style in matrix.jsx tracking the actual tower-head height via ResizeObserver. */ .r-matrix-grid > :first-child > :last-child { display: none; } /* Slightly tighter spacing inside the matrix grid. */ .r-matrix-grid { gap: 12px; padding-bottom: 0; } } /* ───── Landscape PHONE polish (MobileApp card feed at wide-short sizes) ───── Scoped to landscape + short + coarse pointer so it can ONLY hit landscape phones — never portrait (orientation), never tablets in landscape (their height > 600px), never desktop (pointer: fine). Mirrors the bp-trigger in helpers.jsx / index.html's inline script that routes these viewports to . The MobileApp components style themselves inline, so the few properties we override here need !important to beat those inline styles — each is annotated below. */ @media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) { /* a. Feed stays a SINGLE column in landscape (per design — full-width cards, not a 2-up grid). The base MobileFeed flex-column layout carries over; we only trim the bottom padding to match the slimmer landscape chrome. */ .r-mfeed-list { padding-bottom: 24px !important; } /* b. Slim sticky header — reclaim vertical space. The header padding and the inner title row height are inline (56px row, 10px bottom pad), so !important is required to shrink them. */ .r-mtopbar { padding-bottom: 6px !important; } .r-mtopbar-row { height: 44px !important; } /* Keep the "Filter opportunities" caption in landscape — it renders exactly as it does in portrait. (The way back up to the story is the site header.) */ /* Inline the stats bar to a thin strip (it carries 14px top / 10px bottom inline padding — trim with !important). */ .r-mstatsbar { padding: 6px 16px !important; } /* d. Cap the content column to a centered 600px width on wide landscape phones, while the sticky header BAR stays full-bleed (its background + border-bottom span the viewport). Only the header's children are centered, not .r-mtopbar itself. The 14px horizontal inset on the header children + stats bar matches the feed list's inline `0 14px` side padding so the title row, filter chips, stats, and card edges all share the same left/right column edges at 600px. margin-inline only touches horizontal margins, so vertical margins (e.g. the deck button's margin-top above) are preserved. */ .r-mtopbar > * { max-width: 600px; margin-inline: auto; padding-inline: 14px; } .r-mstatsbar { max-width: 600px; margin-inline: auto; } .r-mfeed-list { max-width: 600px; margin-inline: auto; } /* c. Detail sheet — guarantee it fits a ~390px-tall viewport and scrolls internally. .r-detail is already position:fixed top:0 bottom:0 overflow-y:auto (so it's viewport-bound); 100dvh is an explicit belt- and-braces cap for dynamic-toolbar browsers. No inline max-height on the element, so no !important needed. */ .r-detail { max-height: 100dvh; overflow-y: auto; } /* Cap the bottom-anchored mobile slide-up to a centered 600px column to match the feed/header column above. !important beats the base mobile rule's max-width:100vw; left:0/right:0 + auto inline margins center the fixed panel horizontally. The translateY slide animation is unaffected (margins set X; transform handles Y). Landscape-only — outside this media query the sheet stays full-bleed (portrait/tablet/desktop). */ .r-detail.r-detail-mobile { max-width: 600px !important; margin-inline: auto !important; } /* e. Hide the returns J-curve (TimelineStory). Its SVG sizes to the panel-inner width (~788px) and overflows the 600px-capped landscape sheet. Landscape- only scope here — portrait/tablet/desktop are unaffected. */ .r-timeline-story { display: none !important; } } /* Rotate-hint chip — base hidden. Surfaced by the .r-show class set once at load when the initial viewport is portrait mobile; never re-fired on resize. */ .r-rotate-hint { display: none; } .r-rotate-hint.r-show { display: inline-flex; position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(20,18,17,0.88); color: #FAF7F3; padding: 8px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; align-items: center; gap: 8px; z-index: 30; cursor: pointer; border: none; animation: fadeIn 320ms ease-out 800ms both; } .r-rotate-hint.r-hide { display: none; } .r-rotate-hint svg { display: block; } /* ── MezzanineTaxFlow (Group C tax embed) ─────────────────── */ .r-tax-body { padding: 16px; margin-top: 4px; } .r-tax-body > :first-child { margin-top: 0; } .r-tax-body > :last-child { margin-bottom: 0; } .r-tax-lede { margin: 0 0 14px; } .r-tax-keystats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 14px 16px; } .r-tax-keystat { min-width: 0; } .r-tax-keystat-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; } .r-tax-keystat-val { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; line-height: 1; font-variant-numeric: tabular-nums; } .r-tax-keystat-val.mono { font-family: var(--font-mono); font-size: 18px; } .r-tax-structure { display: flex; flex-direction: column; } .r-tax-node { padding: 12px 14px; } .r-tax-node-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .r-tax-node-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; } .r-tax-node-title { margin: 2px 0; font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; font-weight: 400; } .r-tax-node-meta { font-size: 11.5px; margin-bottom: 4px; } .r-tax-node-desc { font-size: 12.5px; line-height: 1.5; } .r-tax-person { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .r-tax-avatar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; flex-shrink: 0; } .r-tax-person-meta { font-size: 11.5px; line-height: 1.35; } .r-tax-person-meta b { font-weight: 400; font-size: 12.5px; display: block; } .r-tax-flag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #9A9290; } .dark .r-tax-flag { color: #6B6361; } .r-tax-flag-emoji { font-size: 13px; line-height: 1; display: inline-block; } .r-tax-flow { display: grid; grid-template-columns: 20px 36px 1fr; gap: 12px; align-items: center; padding: 8px 0; } .r-tax-bullets { list-style: disc inside; margin: 8px 0 0 0; padding: 0; font-size: 13px; line-height: 1.5; } .r-tax-bullets li { margin: 4px 0; } .r-tax-bullets li b { font-weight: 600; } .r-tax-step { width: 18px; height: 18px; font-family: var(--font-mono); font-size: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .r-tax-arrow { height: 44px; display: flex; flex-direction: column; align-items: center; } .r-tax-arrow-line { flex: 1; width: 1px; } .r-tax-arrow-head { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .r-tax-arrow-head.down { margin-top: -1px; } .r-tax-flow.up .r-tax-arrow-head { margin-bottom: -1px; } .r-tax-flow-label { font-size: 12px; line-height: 1.45; } .r-tax-flow-amt { font-family: var(--font-display); font-size: 14px; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; } .r-tax-flow-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; margin-top: 2px; } .r-tax-cards { display: flex; flex-direction: column; gap: 8px; } .r-tax-card { padding: 14px 16px; } .r-tax-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .r-tax-card-ix { width: 18px; height: 18px; font-family: var(--font-mono); font-size: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .r-tax-card-title { flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .r-tax-card-list { margin: 0; padding: 0; list-style: none; } .r-tax-card-list li { font-size: 12.5px; line-height: 1.5; padding-left: 12px; position: relative; margin-bottom: 6px; } .r-tax-card-list li:last-child { margin-bottom: 0; } .r-tax-card-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 1px; background: #6B6361; } .dark .r-tax-card-list li::before { background: #8A827F; } .r-tax-card-list li b { font-weight: 400; background: #EDFE38; padding: 0 3px; font-variant-numeric: tabular-nums; color: #393433; } .r-tax-card-mx .r-tax-card-list li b { background: transparent; padding: 0; color: inherit; } .r-tax-subgrid { margin-top: 5px; padding-left: 10px; font-family: var(--font-mono); font-size: 11px; display: flex; flex-direction: column; gap: 3px; } .r-tax-subgrid span { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; } .r-tax-summary { width: 100%; border-collapse: collapse; font-size: 12.5px; } .r-tax-summary thead th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 0 9px; font-weight: 400; } .r-tax-summary thead th.r { text-align: right; } .r-tax-summary tbody td { padding: 9px 0; } .r-tax-summary tbody td.r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .r-tax-summary tbody tr.r-tax-total td { padding: 11px 0; } .r-tax-summary tbody tr.r-tax-rate td { padding-top: 12px; border: none; } .r-tax-summary tbody tr.r-tax-rate td.r { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; } .r-tax-takeaway { margin-top: 18px; padding: 16px; } .r-tax-takeaway-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; } .r-tax-takeaway p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; } .r-tax-takeaway p:last-child { margin: 0; } .r-tax-takeaway b { font-weight: 400; background: #EDFE38; padding: 0 3px; font-variant-numeric: tabular-nums; color: #393433; } .r-tax-disclaimer { margin-top: 18px; padding-top: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.5; } /* Carousel */ .r-carousel { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .r-panel-media .r-carousel { margin-bottom: 20px; } .r-carousel-stage { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; } .r-carousel-media { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } /* Slide-loading cue: a thin indeterminate lime bar across the top of the stage, shown only when a swap's image is still decoding past ~200ms (the carousel's `pending` state). Squared, on-brand; no spinner. */ .r-carousel-loading { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; z-index: 4; pointer-events: none; } .r-carousel-loading::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 35%; background: #EDFE38; animation: r-carousel-load 0.9s ease-in-out infinite; } @keyframes r-carousel-load { 0% { transform: translateX(-120%); } 100% { transform: translateX(385%); } } @media (prefers-reduced-motion: reduce) { .r-carousel-loading::before { animation: none; width: 100%; opacity: 0.6; } } .r-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: 1px solid currentColor; width: 40px; height: 40px; font-size: 22px; line-height: 1; cursor: pointer; } .r-carousel-nav:disabled { opacity: 0.3; cursor: default; } .r-carousel-prev { left: 12px; } .r-carousel-next { right: 12px; } .r-carousel-counter { flex: 0 0 auto; margin-top: 10px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; } /* Footer controls variant (controlsBelow): ‹ counter › in a row under the image. */ .r-carousel-controls { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; } .r-carousel-nav-inline { position: static; transform: none; width: 36px; height: 36px; font-size: 20px; } .r-carousel-controls .r-carousel-counter { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .r-carousel-stage { transition: none !important; } }