/* ==================================================================== RDY DEALROOM — page layout ==================================================================== Loads after rdy-noir.css. This file holds ONLY layout that belongs to one specific page or feature: where things sit, how big the viewport band is, which parts are fixed. IF YOU ARE ABOUT TO WRITE A COLOR, A RADIUS, A BORDER, OR A TYPE SIZE HERE — STOP. That belongs in rdy-noir.css as a component, so every page gets it. This file positions components; it does not restyle them. ==================================================================== */ /* -------------------------------------------------------------------- SHELL — fixed top bar and footer, so the content column clears both -------------------------------------------------------------------- */ /* Clip sideways on the root only. The same rule on makes body its own scroll container, and a scroll container with no height never scrolls — which silently kills position:sticky for everything inside it (the profile dock, §19). The root clips just as well. */ html{overflow-x:hidden} .wrap{padding-bottom:150px} /* extra room for the fixed footer */ /* THE BAR IS TWO ROWS ON A PHONE INSIDE THE PRODUCT. The founders/investors switch is the product's navigation and the only door out of a settings page, so it may never be dropped at a width — and it does not fit next to a wordmark and a name at 375px. So it wraps to its own centred row, and --bar-h grows to match, because the dealroom is a fixed page that starts exactly under the bar. */ @media(max-width:700px){ :root{--bar-h:64px} body.product{--bar-h:112px} body.product header.topbar{flex-wrap:wrap;align-content:center;padding:0 16px;row-gap:6px} body.product header.topbar.scrolled{height:var(--bar-h)} body.product .navcenter{position:static;transform:none;order:3;flex:1 0 100%;justify-content:center} body.product .navcenter .segmented{width:100%;max-width:340px} body.product .navcenter .segmented button{flex:1} } /* the footer is fixed chrome, so anything that parks itself at the bottom of the viewport stops on top of it, not under it — the dock (§19) is the one thing that does */ :root{--footer-h:48px} @media(max-width:760px){:root{--footer-h:44px}} .dock{bottom:var(--footer-h)} /* the landing opens on a full-bleed hero, so its column starts at the very top and the fixed bar floats over the video */ body.landing .wrap{padding-top:0} /* fixed, but not a bar: no fill and no rule, so the hero film runs behind it the same way it runs behind the top bar. The scrim that keeps the row readable is the footer's own ::before (§16). */ .site-footer{position:fixed;left:0;right:0;bottom:0;z-index:40} .toast{bottom:86px} .toast.show{bottom:96px} @media(max-width:760px){.site-footer{padding:12px 16px}} /* over the hero the bar floats transparent until you scroll */ body.landing header.topbar:not(.scrolled){background:transparent;border-bottom-color:transparent;height:78px} /* the dealroom owns the viewport — the page itself never scrolls */ body.deal{overflow:hidden} body.deal .wrap{padding:0} /* a page that is not a hero: content band inside the fixed chrome */ .rdy-page{max-width:var(--w);margin:0 auto; padding:clamp(10px,2vw,26px) var(--pad-x) clamp(60px,8vw,110px)} .rdy-page .sect-head{margin-bottom:clamp(16px,1.8vw,26px)} /* a section nested inside a page column already sits inside that column's gutter — it must not add a second one */ .rdy-page .sect{max-width:none;padding-left:0;padding-right:0} /* THE SAME IS TRUE OF .wrap, AND THE LANDING WAS PAYING TWICE FOR IT. .wrap is the --w column and it already holds a --pad-x gutter; the landing's sections are its direct children and each added a second one, so every paragraph, grid and photo strip on the home page was squeezed into 128px less than the column it lives in. One gutter, held by the column — which is what gives the three event photos their width back. */ .wrap>.sect,.wrap>.gate{padding-left:0;padding-right:0} /* …and the first one sits right under the page's own top padding, so it must not add the between-sections air on top of that */ .rdy-page>.sect:first-child{padding-top:0} .sect.center{text-align:center} .sect.center .sect-head{margin-left:auto;margin-right:auto} /* -------------------------------------------------------------------- AUTH — sign in / create account. A narrow column, nothing else. -------------------------------------------------------------------- */ .auth{max-width:440px;margin:6vh auto 0;display:flex;flex-direction:column;gap:clamp(20px,3vh,28px)} /* -------------------------------------------------------------------- HOME — full-bleed hero over video, then editorial sections -------------------------------------------------------------------- */ .hero-land{position:relative;width:100vw;margin-left:calc(-50vw + 50%);min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate; padding:0 clamp(22px,5vw,64px) clamp(40px,6vh,72px)} /* the film lives in the shell (index.html), so which pages sit on it is a body class, not a view: the rdy pages do, the dealroom and the form do not. See "THE FILM" in app.js. */ .hero-video{display:none;position:fixed;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; transition:filter .9s var(--ease),transform .9s var(--ease)} body.film .hero-video{display:block} /* SCROLLED AWAY, THE FILM BECOMES LIGHT, NOT DARKNESS. It used to drop to brightness .15 with a 16px blur, which on a high-contrast panel is indistinguishable from black — the whole page read as flat void. More blur and much less dimming keeps a moving violet wash behind the sections; the scale is what hides the blur's soft edges. */ .hero-video.dim{filter:brightness(.36) blur(52px) saturate(1.15);transform:scale(1.14)} .hero-in{max-width:var(--w);margin:0 auto;width:100%} .hero-title{font-size:clamp(44px,7vw,86px);font-weight:500;letter-spacing:-.02em;line-height:1.02; margin:0 0 24px;color:var(--ink);text-transform:lowercase} /* the hero ends on the sentence — no button under it, so no trailing gap: the doors are at the bottom of the page, where the reader has a reason to pick one. */ .hero-sub{font-size:clamp(16px,1.7vw,19px);line-height:1.7;color:var(--muted);margin:0;max-width:54ch} /* THE HERO ALREADY ENDS IN AIR. It is a full viewport with its content pinned to the bottom, so laying a whole --sect-lg on top of that put most of a screen of nothing between the title and the first sentence. The first beat under the hero keeps a third of the gap; the connecting hairline (.beat::before) scales with it. */ .hero-land+.sect.beat{--beat-gap:clamp(44px,4.6vw,78px)} /* WEIGHT IS THE HIERARCHY (§1d in rdy-noir.css). Every text on these pages is the same ink, so what separates a statement from its supporting line is size and weight: body copy stays regular, the lines that carry a section step up to medium. */ body.landing .wrap p,.rdy-page p{font-weight:400} .lead-block .soundlike,.tm .tn{font-weight:500} /* the closing call — air above like any other beat, nothing below: the column's own bottom padding clears the fixed footer. It is the last thing on the page, so it is the second-biggest line on it: the same scale as a section title, or the page trails off into small print. */ .gate{position:relative;text-align:left;padding:var(--sect-lg) var(--pad-x) 0; max-width:var(--w);margin:0 auto} .rdy-page>.gate{padding-left:0;padding-right:0} /* already inside the column */ .gate h2{font-size:var(--t-h2);font-weight:500;letter-spacing:-.01em;line-height:1.05; margin:0;color:var(--ink);text-transform:lowercase} .gate p{margin:clamp(18px,2vw,26px) 0 clamp(26px,3vw,36px);max-width:56ch;color:var(--muted); font-size:clamp(15px,1.4vw,17.5px);line-height:1.7} /* THE CLOSING CALL, WITH THE DATES IN IT. The block is two headings with the reason to act between them — what we want to hear, the round you would be applying for, the day it closes. The lines are a stack rather than three margins so that any one of them can be emptied in /admin and simply not be there; a gap where a date used to be reads as a bug. */ .gate-lines{margin:clamp(20px,2.2vw,28px) 0 clamp(24px,2.8vw,34px);max-width:56ch; display:flex;flex-direction:column;gap:clamp(10px,1.1vw,15px)} .gate-lines p{margin:0} .gate .btn-row{margin-top:clamp(26px,3vw,36px)} /* THREE DOORS, ONE PER PERSON. The landing page closes on a choice rather than a single button: founders, fellows, dealroom. The buttons sit on one baseline no matter how long the sentences run — each column is a flex stack with the button pushed to the bottom — because three buttons at three different heights reads as three unrelated blocks. */ .doors{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,52px);margin-top:clamp(30px,3.6vw,46px); padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--divider)} .door{display:flex;flex-direction:column} .door h3{font-size:var(--t-h3);font-weight:500;margin:0 0 12px;text-transform:lowercase;color:var(--ink)} .door p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:34ch} .door-dates{margin-top:clamp(12px,1.2vw,16px);display:flex;flex-direction:column;gap:8px} .door-dates p{font-size:14.5px} .door .btn-row{margin-top:auto;padding-top:clamp(20px,2.2vw,28px)} @media (max-width:860px){.doors{grid-template-columns:1fr;gap:clamp(26px,4vw,34px)} .door+.door{padding-top:clamp(24px,3vw,30px);border-top:1px solid var(--divider)} .door .btn-row{padding-top:clamp(16px,2vw,20px)}} /* the centered "pitch" band */ .pitch .center-title{font-size:var(--t-h2);font-weight:500;letter-spacing:-.01em;line-height:1.08; color:var(--ink);text-transform:lowercase;margin:0 auto;max-width:20ch} .lead-block{max-width:60ch;margin:clamp(30px,5vh,58px) auto 0;display:flex;flex-direction:column; gap:clamp(18px,3vh,30px)} .lead-block p{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,18.5px);line-height:1.7} .lead-block .soundlike{color:var(--ink);font-size:clamp(17px,1.7vw,20px)} /* the passage into the dealroom: two ways in, one door */ .pway{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,4vw,64px);border-top:1px solid var(--divider);padding-top:clamp(20px,2.4vw,30px)} .pway-side h3{font-size:var(--t-h3);font-weight:500;margin:0 0 12px;text-transform:lowercase;color:var(--ink)} .pway-side p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:44ch} .pway-foot{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap; margin-top:clamp(28px,4vw,44px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--divider)} /* how the model works: stat band + step band */ .mstats,.steps{display:grid;gap:clamp(28px,4vw,60px);border-top:1px solid var(--divider); padding-top:clamp(20px,2.4vw,30px)} .mstats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .steps{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} /* A four-step row must not be left to auto-fit: at desk widths it packs three across and drops the fourth alone on a second row, which reads as a mistake rather than a sequence. Four steps are one line at desk width, a 2x2 block at tablet, a stack below that — never 3+1. The column gap tightens as the count goes up so four columns still get real text width. */ .steps[data-n="4"]{column-gap:clamp(22px,2.6vw,44px)} @media (min-width:1120px){.steps[data-n="4"]{grid-template-columns:repeat(4,1fr)}} @media (min-width:560px) and (max-width:1119px){.steps[data-n="4"]{grid-template-columns:repeat(2,1fr)}} .step h3{font-size:var(--t-h3);font-weight:500;margin:0 0 12px;text-transform:lowercase;color:var(--ink)} .step p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:38ch} .sect.center .mstats,.sect.center .steps{justify-items:center} .sect.center .step{max-width:34ch} /* horizontal photo scrollers — the evenings, and the team. BOUNDED BY THE COLUMN, NOT THE WINDOW. Both strips used to run the full 100vw with the cards bleeding off the screen edges; a page whose text sits in a 1280 column and whose photos touch the bezel reads as two pages. Both now end exactly where the paragraphs above them end. NO EDGE FADE. There was a mask dissolving the outer cards into the background. It made every photo at the edge look like a rendering fault rather than a photo, and on the events strip — where three cards fill the width exactly — there was nothing at the edge to dissolve anyway. The arrows say the row continues; the pictures do not have to. The two differ in what a card is, because they are two different jobs: · events — exactly three complete photos, so the card is a third of the strip. Never a fraction of a fourth: this is a set of three you page through, not a filmstrip. · team — a fixed card size, however many fit. Faces should be the same size on every screen, so a wider window shows more people rather than bigger ones. The events floor is what stops a phone turning them into contact-sheet thumbnails. */ .pscroll,.team-scroll{position:relative} .pstrip,.team-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:4px 0;scrollbar-width:none;gap:var(--gap)} .pstrip::-webkit-scrollbar,.team-strip::-webkit-scrollbar{display:none} .pstrip{--gap:clamp(12px,1.4vw,20px);text-align:left} /* AN EVENT CARD IS THE PHOTOGRAPH AND NOTHING ELSE — no border, no padding, no plate under it. It was called .pcard, which is also the dealroom's profile card (§ the room's grid): that one is a padded, hairline-bordered flex column, and because it is declared later in this file it won it — the photos ended up inset inside an outlined box. A picture card and a data card are not the same component and must not share a name. */ .evcard{flex:0 0 max(200px,calc((100% - 2 * var(--gap)) / 3)); scroll-snap-align:start;aspect-ratio:3/2;overflow:hidden; border-radius:var(--radius);background:var(--line)} .evcard img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(12%); transition:transform .5s var(--ease),filter .4s var(--ease)} .evcard:hover img{transform:scale(1.05);filter:grayscale(0)} .pscroll-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px; border-radius:50%;border:1px solid var(--line-strong);background:rgba(0,0,0,.55); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font-size:24px; line-height:1;display:flex;align-items:center;justify-content:center; transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)} .pscroll-arw:hover{background:var(--ink);color:#000;border-color:var(--ink)} /* THE ARROWS STAND IN THE GUTTER, not on the photographs. With three complete cards filling the strip there is no dead edge left to put a control on — one parked inside covered a face. They lean out into the section's own side padding, and never further: at a narrow width the gutter is thinner than the button, so the offset stops at whatever the gutter is and the arrow ends up flush with the window instead of outside it. */ .pscroll-arw.prev{left:calc(-1 * min(var(--pad-x), 52px))} .pscroll-arw.next{right:calc(-1 * min(var(--pad-x), 52px))} @media(max-width:700px){.pscroll-arw{display:none}} /* THE TEAM CARD IS THE PORTRAIT, NAME AND ALL. Who someone is belongs on their photograph, not in a caption underneath it: the name sits in a pill low in the frame with the role under it, over a scrim that only exists where the words are. A fixed card width — a wider window shows more of the team at the same size, never three enormous faces. */ .team-strip{--gap:12px;--tmw:clamp(240px,26vw,320px);padding-bottom:8px} /* the same corner as the events card above it — two photo strips one section apart cannot round to two different radii */ .team-strip .tm{flex:0 0 var(--tmw);scroll-snap-align:start;position:relative;overflow:hidden; border-radius:var(--radius);background:var(--line)} .tm img{width:100%;aspect-ratio:7/10;object-fit:cover;display:block; filter:grayscale(24%);transition:filter .35s var(--ease),transform .6s var(--ease)} .tm:hover img{filter:grayscale(0);transform:scale(1.03)} .tm::after{content:"";position:absolute;inset:auto 0 0;height:58%;pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.82) 0,rgba(0,0,0,.45) 38%,rgba(0,0,0,0) 100%)} .tm-cap{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:0 clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px);display:flex;flex-direction:column;gap:5px} .tm .tn{align-self:flex-start;border:1px solid rgba(255,255,255,.6);border-radius:var(--pill-radius); padding:5px 14px 6px;font-size:14.5px;font-weight:400;color:#fff;margin-bottom:3px} .tm .tr{font-size:14px;color:#fff} .tm .to{font-size:14px;color:#fff} /* the logo wall — a .wall whose names are marks. Flex, not grid, so a short last row centres itself instead of hanging off to the left; the column count is explicit, so the basis is whatever is left after the gaps rather than a percentage that quietly reflows to five. Every mark is pre-trimmed and optically weighted onto one 200x64 canvas by tools/normalize-logos.py, so the tile has nothing left to decide: the image simply fills it. Do NOT put a max-height back on the image — that is what made a wide wordmark render as a speck and a square mark render three times its neighbour. The column gap is a variable because the basis is computed from it — set the gap and the basis from two different numbers and the row silently wraps one tile short. */ .wall.logos{--cols:5;--cgap:clamp(14px,1.8vw,26px);--rgap:clamp(18px,2.6vw,34px); display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:var(--rgap) var(--cgap)} .wall.logos>*{flex:0 0 calc((100% - (var(--cols) - 1) * var(--cgap)) / var(--cols))} .ltile{display:block;background:none;border:none;padding:0;aspect-ratio:200/64; cursor:pointer;opacity:.82; transition:opacity .3s var(--ease),transform .3s var(--ease)} .ltile img{width:100%;height:100%;object-fit:contain;display:block} .ltile:hover{opacity:1;transform:scale(1.06)} .wall.logos .wname{font-size:clamp(14px,1.4vw,17px);text-align:center;justify-content:center; flex-direction:column;gap:2px;align-items:center;aspect-ratio:200/64;display:flex} @media(max-width:1100px){.wall.logos{--cols:4}} @media(max-width:820px){.wall.logos{--cols:3}} /* on a phone the wall is the longest thing on the page, and three across is the version of it nobody can read: a 10:1 wordmark comes out eight pixels tall. Two across doubles the scroll and is still the right trade — a logo you cannot read is not on the wall at all. */ @media(max-width:560px){ .wall.logos{--cols:2;--cgap:16px;--rgap:22px} .wall.logos .wname{font-size:13px} } .acol{max-width:680px} /* -------------------------------------------------------------------- APPLY — THE FORMSPACE: a narrow column that fits one screen. One question at a time only works if the question is the whole screen: the column is narrow, the question sits vertically centred with air above and below it, and the progress line and the two buttons hold still while the question between them changes. So the page must not scroll — which means the formspace takes the fixed footer's room back and trims the page column's own bottom air. Everything these screens look like — and the fact that there is no grey in any of it — is §21 of rdy-noir.css. -------------------------------------------------------------------- */ /* Room under the column, and more of it than the footer needs: the floating footer is 48px and its readability scrim another 48 above that, and a line that ends inside that scrim is a dimmed line — the one thing this page does not do. The column's own height then takes the wrap's 106px top padding and this back out of the viewport, so the flow fits on one screen and the page never scrolls. */ body.formspace .wrap{padding-bottom:130px} body.formspace .rdy-page{padding-bottom:0} .fspace{max-width:640px;display:flex;flex-direction:column; min-height:calc(100svh - 268px)} .fspace .backlink{align-self:flex-start} .fspace #apBody{display:flex;flex-direction:column;flex:1} /* the door, the sent screen and the closed notice are read top-down, not centred: they push to the top of the column and leave the air below */ .fgate,.fdone,.fclosed{display:flex;flex-direction:column;gap:22px;margin:clamp(14px,4vh,44px) 0 auto} .fhead{padding:clamp(10px,2.5vh,24px) 0 0} .fstage{flex:1;display:flex;align-items:center;padding:clamp(24px,6vh,58px) 0} @media(max-width:560px){ .fstage{padding:clamp(20px,4vh,34px) 0} .fnav{gap:10px} .fnav .pill{flex:1;justify-content:center} .fmsg{flex:1 0 100%} } /* -------------------------------------------------------------------- ADMIN — a wide column: a list, and an editor for the form behind it -------------------------------------------------------------------- */ .admin{max-width:1080px} .ahead{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap; margin-bottom:8px} .ahead-side{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .admin .rows .row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;align-items:start} @media(max-width:700px){.admin .rows .row{grid-template-columns:1fr auto}} /* A LIST LONGER THAN THE WINDOW SCROLLS IN PLACE. Forty investors under forty founders pushed the caps, the bar and the other side off the top of the screen, so each long list gets its own pane: the headings and the seat count stay put and the scrolling happens where the reading does. The inset padding is so a focus ring on the last row is not clipped by the edge. */ .admin .scrollpane{max-height:min(58vh,540px);overflow-y:auto;overscroll-behavior:contain; padding:0 2px;border-bottom:1px solid var(--divider)} .admin .scrollpane.tall{max-height:min(72vh,860px)} .admin .scrollpane .reqcard:last-child{margin-bottom:6px} /* -------------------------------------------------------------------- THE QUESTIONS — ONE LINE EACH, ONE OPEN AT A TIME. Seventy questions used to be seventy open editors: six full-width lines apiece, no label over any of them, and a native