/* ========================================================================== Habitat Partners — prototype Design reference: Figma "HP.habitatpartners.digitaldesign" / V1 (1920 wide) ========================================================================== */ /* ------------------------------- FONTS ---------------------------------- */ /* GT Standard has three optical sizes: S (UI/small), M (mid), L (display). */ @font-face { font-family:"GT Standard S"; src:url("../assets/fonts/GT-Standard-S-Standard-Light-Trial.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard S"; src:url("../assets/fonts/GT-Standard-S-Standard-Regular-Trial.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard S"; src:url("../assets/fonts/GT-Standard-S-Standard-Medium-Trial.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard S"; src:url("../assets/fonts/GT-Standard-S-Standard-Semibold-Trial.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard S"; src:url("../assets/fonts/GT-Standard-S-Standard-Bold-Trial.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard M"; src:url("../assets/fonts/GT-Standard-M-Standard-Light-Trial.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard M"; src:url("../assets/fonts/GT-Standard-M-Standard-Regular-Trial.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard M"; src:url("../assets/fonts/GT-Standard-M-Standard-Medium-Trial.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard M"; src:url("../assets/fonts/GT-Standard-M-Standard-Semibold-Trial.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard M"; src:url("../assets/fonts/GT-Standard-M-Standard-Bold-Trial.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard L"; src:url("../assets/fonts/GT-Standard-L-Standard-Light-Trial.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard L"; src:url("../assets/fonts/GT-Standard-L-Standard-Regular-Trial.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard L"; src:url("../assets/fonts/GT-Standard-L-Standard-Medium-Trial.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard L"; src:url("../assets/fonts/GT-Standard-L-Standard-Semibold-Trial.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap } @font-face { font-family:"GT Standard L"; src:url("../assets/fonts/GT-Standard-L-Standard-Bold-Trial.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap } /* ------------------------------- TOKENS --------------------------------- */ :root{ /* Figma variables */ --black:#080707; --grey:#d4d4d4; --green:#98ce00; --light-grey:#f7f7f7; --white:#ffffff; --green-mid:#4e6c36; --green-dark:#05161a; /* ---- Semantic layer. Light is the default; dark is opt-in via the nav toggle, which sets data-theme="dark" on . Only these change. ---- */ --bg:var(--white); --surface:var(--light-grey); /* investments panel, image wells */ --card:var(--white); /* portfolio logo tiles */ --text:var(--black); --text-dim:rgba(8,7,7,.55); --text-faint:rgba(8,7,7,.42); --hair:rgba(8,7,7,.18); /* the comp's 0.5px rules */ --hair-soft:rgba(8,7,7,.1); --pill-border:rgba(8,7,7,.5); --nav-bg:var(--white); --nav-bg-scrolled:rgba(255,255,255,.82); --placeholder:var(--grey); --tick:rgba(8,7,7,.22); --on-accent:var(--black); /* type on a light-green fill */ --pill-scrim:rgba(0,0,0,.1); /* hero caption scrim — the comp's value */ --ff-s:"GT Standard S","Helvetica Neue",Helvetica,Arial,sans-serif; --ff-m:"GT Standard M","Helvetica Neue",Helvetica,Arial,sans-serif; --ff-l:"GT Standard L","Helvetica Neue",Helvetica,Arial,sans-serif; /* Fluid scale — the max of each clamp is the value at the 1920 comp width */ --nav-h:clamp(58px, 4.1667vw, 80px); --gutter:clamp(20px, 5vw, 96px); --gutter-sm:clamp(16px, 3.125vw, 60px); --fs-sec:clamp(24px, 1.875vw, 36px); /* section titles 36 */ --fs-mission-lbl:clamp(34px, 3.125vw, 60px); /* "Mission" 60 */ --fs-mission:clamp(21px, 2.5vw, 48px); /* mission body 48 */ --fs-pill:clamp(15px, 1.25vw, 24px); /* toggle labels 24 */ --fs-news:clamp(18px, 1.4583vw, 28px); /* news headline 28 */ --fs-date:clamp(14px, 1.09375vw, 21px); /* news date 21 */ --fs-name:clamp(28px, 2.5vw, 48px); /* partner name 48 */ --fs-role:clamp(17px, 1.6667vw, 32px); /* partner role 32 */ --fs-foot-eyebrow:clamp(20px, 1.875vw, 36px); --fs-foot-display:clamp(48px, 5.2083vw, 100px); --fs-foot-body:clamp(15px, 1.25vw, 24px); --fs-foot-legal:clamp(12px, .9375vw, 18px); --page-max:1920px; --ease:cubic-bezier(.22,.61,.36,1); } /* The brand's own dark register, taken from the footer: a green-black ground, HP White type, Light Green accents. Not a neutral grey theme. */ :root[data-theme="dark"]{ --bg:var(--green-dark); /* #05161a */ --surface:#091519; /* ground, lifted */ --card:rgba(255,255,255,.05); /* tiles lift off the ground rather than going white — the marks invert instead */ --text:var(--white); --text-dim:rgba(255,255,255,.62); --text-faint:rgba(255,255,255,.44); --hair:rgba(255,255,255,.17); --hair-soft:rgba(255,255,255,.1); --pill-border:rgba(255,255,255,.42); --nav-bg:var(--green-dark); --nav-bg-scrolled:rgba(5,22,26,.72); --placeholder:#16323a; --tick:rgba(255,255,255,.26); --on-accent:var(--green-dark); } /* ------------------------------- RESET ---------------------------------- */ *,*::before,*::after{ box-sizing:border-box } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% } body{ margin:0; padding-top:var(--nav-h); font-family:var(--ff-m); color:var(--text); background:var(--bg); transition:background-color .4s var(--ease), color .4s var(--ease); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ display:block; max-width:100% } h1,h2,h3,p{ margin:0 } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } a{ color:inherit; text-decoration:none } :focus-visible{ outline:2px solid var(--green); outline-offset:3px } .skip{ position:absolute; top:8px; left:8px; z-index:200; background:var(--text); color:var(--bg); padding:12px 18px; font-family:var(--ff-s); font-size:14px; clip-path:inset(50%); /* hidden without leaving the layout box */ } .skip:focus{ clip-path:none } .wrap{ max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); } .sec-title{ font-family:var(--ff-l); font-weight:400; font-size:var(--fs-sec); letter-spacing:-.005em; line-height:1.1; } /* Shared 1px hairline that renders as the comp's 0.5px rule */ .hair{ height:1px; background:var(--hair) } /* Green dot, from Icons/Dot.svg */ .dot{ width:.66em; height:.66em; border-radius:50%; background:var(--green); flex:0 0 auto; } /* ================================ NAV =================================== */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); background:var(--nav-bg); border-bottom:1px solid var(--hair); transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease); } /* Sticky nav overlays the content once the page starts moving */ .nav.is-scrolled{ background:var(--nav-bg-scrolled); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); border-bottom-color:var(--hair-soft); } .nav__inner{ max-width:var(--page-max); margin-inline:auto; height:100%; padding-inline:clamp(16px,1.5vw,29px); display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav__logo img{ height:clamp(22px, 1.823vw, 35px); width:auto; } .nav__right{ display:flex; align-items:center; gap:clamp(14px,1.7vw,30px) } .nav__links{ display:flex; align-items:center; gap:clamp(18px,2.2vw,42px) } .nav__link{ position:relative; display:inline-flex; align-items:center; font-family:var(--ff-s); font-weight:500; font-size:clamp(11px,.729vw,14px); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; transition:opacity .25s var(--ease); } /* Hover affordance: a Light Green rule wipes in under the label. Sits in the accent and the hairline language the rest of the page uses, and leaves the type's own contrast alone — green text at this size would read weakly on white. Drawn on a pseudo-element so nothing reflows. */ .nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:-.55em; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left center; transition:transform .28s var(--ease); } @media (hover:hover){ .nav__link:hover::after{ transform:scaleX(1) } } /* Keyboard parity — the focus ring lands on the label, this on the rule. */ .nav__link:focus-visible::after{ transform:scaleX(1) } /* No marker beside the links. Where you are is shown by the others receding instead — and only once you're actually in a section, so at the top of the page all four read equally. Opacity rather than weight, which would reflow the row as the current item changed. */ .nav.has-current .nav__link{ opacity:.45 } .nav.has-current .nav__link.is-current{ opacity:1 } .nav__link:hover{ opacity:1 } /* The wordmark is a link home, so give it a touch of feedback too. */ .nav__logo{ transition:opacity .25s var(--ease) } @media (hover:hover){ .nav__logo:hover{ opacity:.62 } } .nav__burger{ display:none; width:44px; height:44px; margin-right:-10px; position:relative } .nav__burger span{ position:absolute; left:11px; width:22px; height:1.5px; background:var(--text); transition:transform .3s var(--ease), opacity .3s var(--ease); } .nav__burger span:nth-child(1){ top:18px } .nav__burger span:nth-child(2){ top:25px } .nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) } .nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) } .mmenu{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:99; background:var(--bg); padding:32px var(--gutter); display:flex; flex-direction:column; justify-content:space-between; animation:mmIn .28s var(--ease) both; } .mmenu[hidden]{ display:none } @keyframes mmIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } } .mmenu__links{ display:flex; flex-direction:column; gap:6px } .mmenu__links a{ display:flex; align-items:center; gap:14px; font-family:var(--ff-l); font-weight:400; font-size:clamp(26px,7.5vw,40px); padding:14px 0; border-bottom:1px solid var(--hair); } .mmenu__foot{ font-family:var(--ff-s); font-size:14px; color:var(--text-dim); padding-top:24px } /* ---------------------------- THEME TOGGLE ------------------------------ */ /* Shows the mode you'd switch TO: a moon in light, a sun in dark. */ .themetoggle{ flex:0 0 auto; width:clamp(30px,2.36vw,38px); aspect-ratio:1; position:relative; display:grid; place-items:center; border:1px solid var(--pill-border); border-radius:50%; color:var(--text); transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); } .themetoggle:hover{ border-color:var(--text) } /* The visible circle stays small; the tap target does not. */ .themetoggle::after{ content:""; position:absolute; inset:-7px; border-radius:50%; } .themetoggle__icon{ position:absolute; width:58%; height:58%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:opacity .3s var(--ease), transform .45s var(--ease); } .themetoggle__sun{ opacity:0; transform:rotate(-80deg) scale(.55) } .themetoggle__moon{ opacity:1 } :root[data-theme="dark"] .themetoggle__sun{ opacity:1; transform:none } :root[data-theme="dark"] .themetoggle__moon{ opacity:0; transform:rotate(80deg) scale(.55) } /* Surfaces cross-fade together when the theme flips. */ .mmenu, .hero__track, .hero__panel, .invest__panel, .logo-card, .news-card__media, .team__photo, .team-card__shot, .themetoggle__icon{ transition-property:background-color, border-color, color, opacity, transform; transition-duration:.4s; transition-timing-function:var(--ease); } :root[data-theme="dark"] .nav__logo img{ filter:invert(1) } /* The portfolio marks are monochrome vectors and their white ground has been stripped, so a straight invert flips the art and leaves the tile showing through. */ :root[data-theme="dark"] .logo-card img{ filter:invert(1) } /* A mark whose tones an invert would get backwards ships a purpose-made dark cut instead: shown only in dark mode, and never inverted. */ .logo-mark--dark{ display:none } :root[data-theme="dark"] .logo-card img.logo-mark--light{ display:none } /* Needs to out-specify the blanket invert above, which carries a type selector. */ :root[data-theme="dark"] .logo-card img.logo-mark--dark{ display:block; filter:none } /* ============================== HERO REEL =============================== */ /* An accordion of 4 panels that always fills the reel. Scrolling redistributes their shares (50/20/10/10 at rest) so the focused image opens and its neighbours close — nothing slides. Each image is laid out at its focused size and clipped by its panel, so opening reveals more picture rather than zooming in. Sizes come from js/app.js; the axis flips at 1024px, matching the VERTICAL query there. */ .hero{ position:relative } .hero__track{ position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); height:calc(100svh - var(--nav-h)); overflow:hidden; background:var(--bg); } .hero__strip{ display:flex; flex-direction:row; width:100%; height:100%; } .hero__panel{ position:relative; flex:0 0 auto; margin:0; height:100%; /* the cross axis; JS sets the main one */ overflow:hidden; background:var(--surface); } .hero__panel + .hero__panel{ margin-left:var(--hero-gap,15px) } /* The image is sized to the panel's focused width and centred, so the panel crops it. --hero-img is set per layout in JS. */ .hero__panel img{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:var(--hero-img,100%); height:100%; max-width:none; object-fit:cover; } /* ---- iPad and below: the reel stacks and runs top-to-bottom ---- */ @media (max-width:1024px){ .hero__strip{ flex-direction:column } .hero__panel{ height:auto; width:100% } .hero__panel + .hero__panel{ margin-left:0; margin-top:var(--hero-gap,15px) } .hero__panel img{ top:50%; left:0; transform:translateY(-50%); width:100%; height:var(--hero-img,100%); } } .hero__pill{ /* Sized off viewport height, since the panel's side tracks it. The comp's values are the ceilings: 36/44 inset, 28px type, 15/29 padding. */ position:absolute; left:clamp(14px,3.6svh,36px); bottom:clamp(14px,4.4svh,44px); display:inline-flex; align-items:center; justify-content:center; padding:clamp(8px,1.5svh,15px) clamp(14px,2.95svh,30px); border-radius:999px; background:var(--pill-scrim); /* The comp's 10% scrim alone leaves white type at ~1.4:1 over the paler crops (the white ground of the PopUp Bagels shot). Darkening the backdrop rather than thickening the fill keeps the whisper-thin look the comp is after. Still worth a design decision — see README. */ -webkit-backdrop-filter:blur(14px) brightness(.78); backdrop-filter:blur(14px) brightness(.78); color:var(--white); font-family:var(--ff-m); font-weight:300; font-size:clamp(14px,2.8svh,28px); line-height:1.15; white-space:nowrap; pointer-events:none; /* --open is 1 when this panel is the square one, 0 when collapsed (set per frame in JS). Defaults to visible, for reduced motion and no-JS. */ opacity:var(--open,1); transform:translateY(calc((1 - var(--open,1)) * 10px)); } /* Without backdrop-filter the fill has to carry it on its own. */ @supports not (backdrop-filter:blur(1px)){ .hero__pill{ background:rgba(0,0,0,.42) } } .hero__ticks{ position:absolute; right:clamp(14px,1.875vw,36px); bottom:clamp(14px,1.9vw,36px); display:flex; gap:8px; z-index:2; transition:opacity .4s var(--ease); } .hero__ticks span{ width:clamp(16px,1.6vw,28px); height:2px; background:var(--tick); transition:background .35s var(--ease); } .hero__ticks span.is-on{ background:var(--green) } .hero.is-done .hero__ticks{ opacity:0 } /* ============================== MISSION ================================= */ .mission{ padding:clamp(48px,7.8vw,150px) 0 clamp(48px,5.2vw,100px) } .mission__grid{ display:grid; grid-template-columns:minmax(0,27.4%) minmax(0,1fr); gap:clamp(24px,4.5vw,86px); } .mission__grid > .mission__body{ border-left:1px solid var(--hair); padding-left:clamp(24px,4.5vw,86px) } .mission__label{ font-family:var(--ff-l); font-weight:300; font-size:var(--fs-mission-lbl); line-height:1.05; letter-spacing:-.01em; } .mission__body{ font-family:var(--ff-l); font-weight:300; font-size:var(--fs-mission); line-height:1.18; letter-spacing:-.012em; display:grid; gap:1.15em; max-width:22em; } /* ============================ INVESTMENTS =============================== */ .invest{ padding-inline:var(--gutter-sm); scroll-margin-top:var(--nav-h) } .invest__panel{ max-width:calc(var(--page-max) - 2 * 60px); margin-inline:auto; background:var(--surface); border-top:1px solid var(--hair); padding:clamp(28px,4.5vw,86px) clamp(18px,1.98vw,38px) clamp(34px,6.2vw,119px); } .invest__head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 24px; margin-bottom:clamp(24px,4.6vw,88px); } .pills{ display:flex; gap:clamp(8px,.78vw,15px); flex-wrap:wrap } .pill{ font-family:var(--ff-l); font-weight:400; font-size:var(--fs-pill); line-height:1; padding:clamp(9px,.73vw,14px) clamp(14px,1.35vw,26px); border-radius:999px; border:1px solid var(--pill-border); color:var(--text); opacity:.5; transition:opacity .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .pill:hover{ opacity:.85 } .pill.is-active{ opacity:1; background:var(--green); border-color:var(--green); color:var(--on-accent); } .logo-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(8px,.78vw,15px); } /* The whole tile is the link to the company's site. */ .logo-card{ display:block; text-decoration:none; color:inherit; position:relative; overflow:hidden; background:var(--card); aspect-ratio:275/165; animation:cardIn .5s var(--ease) both; animation-delay:calc(var(--i,0) * 32ms); } @keyframes cardIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } .logo-card img{ /* Source SVGs are square with a generous white margin, so overscanning the card crops only white and gives each mark the presence it has in the comp. Absolute positioning is what makes the % height resolve reliably. */ position:absolute; top:50%; left:50%; z-index:1; height:132%; width:auto; max-width:none; transform:translate(-50%,-50%); } /* Hover: the comp fills the tile with white -> 35% Light Green from 18.27% down. Painted as an overlay that starts fully transparent instead, so the tile's own colour carries the top and it works unchanged in dark mode. The first stop is a zero-alpha *green* rather than `transparent`, which would interpolate through grey and muddy the ramp. ::before keeps it under the mark, so the artwork itself stays untinted. */ .logo-card::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(152,206,0,0) 18.27%, rgba(152,206,0,.35) 100%); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); } @media (hover:hover){ .logo-card:hover::before{ opacity:1 } } /* Keyboard users get the same affordance, outside the hover query. */ .logo-card:focus-visible::before{ opacity:1 } /* =============================== NEWS ================================== */ .news{ padding:clamp(40px,5.2vw,100px) 0 clamp(40px,4vw,76px); scroll-margin-top:var(--nav-h) } .news .wrap{ border-top:1px solid var(--hair); padding-top:clamp(26px,4.4vw,84px) } .news__title{ margin-bottom:clamp(22px,3.6vw,70px) } .news__viewport{ position:relative; max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); } .news__track{ --news-gap:clamp(14px,1.1vw,21px); display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * var(--news-gap)) / 4); gap:var(--news-gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; } .news__track::-webkit-scrollbar{ display:none } .news-card{ scroll-snap-align:start; border-top:1px solid var(--hair); padding-top:clamp(11px,1.15vw,22px); display:grid; } /* The left rule now runs the whole card — image and text alike — with the content indented 24px from it. */ .news-card__col{ border-left:1px solid var(--hair); padding-left:clamp(14px,1.25vw,24px); display:grid; grid-template-rows:auto 1fr; /* An anchor: inherits type so the card reads the same whether or not it has an href yet. */ text-decoration:none; color:inherit; } .news-card__media{ overflow:hidden; aspect-ratio:390/561; background:var(--surface) } .news-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) } .news-card:hover .news-card__media img{ transform:scale(1.035) } .news-card__col:focus-visible .news-card__media img{ transform:scale(1.035) } .news-card__text{ padding-top:clamp(14px,1.25vw,24px); display:grid; grid-template-rows:1fr auto; gap:clamp(14px,1.4vw,26px); } .news-card__text h3{ font-family:var(--ff-l); font-weight:600; font-size:var(--fs-news); line-height:1.22; letter-spacing:-.01em; text-wrap:pretty; } .news-card__date{ display:flex; align-items:center; gap:clamp(9px,.78vw,15px); font-family:var(--ff-m); font-weight:400; font-size:var(--fs-date); } /* =============================== TEAM ================================== */ /* Two columns of equal width (843 each in the comp, 43 apart): the group portrait on the left, and the four partners stacked on the right. Both columns run to 1184 tall — four 266px rows with 40px between them. */ .team{ padding-bottom:clamp(48px,5.2vw,100px); scroll-margin-top:var(--nav-h) } .team .wrap{ border-top:1px solid var(--hair); padding-top:clamp(26px,5vw,96px) } .team .sec-title{ margin-bottom:clamp(20px,2.55vw,49px) } .team__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.24vw,43px); } /* Takes its height from the partner list beside it, so the two columns stay flush at any width. At 1920 that lands on the comp's 843x1184 exactly. */ .team__photo{ margin:0; overflow:hidden; height:100%; min-height:0; background:var(--placeholder); } .team__photo img{ width:100%; height:100%; object-fit:cover } .team__list{ display:grid; gap:clamp(20px,2.08vw,40px) } .team-card{ border-top:1px solid var(--hair); padding-top:clamp(8px,.83vw,16px); display:grid; grid-template-columns:clamp(88px,13.02vw,250px) minmax(0,1fr); grid-template-rows:auto auto; align-content:start; column-gap:clamp(16px,3.125vw,60px); } .team-card__shot{ grid-column:1; grid-row:1 / span 2; width:100%; aspect-ratio:1; object-fit:cover; background:var(--placeholder); } .team-card__text{ grid-column:2; grid-row:1; padding-top:clamp(2px,.52vw,10px); } .team-card__text h3{ font-family:var(--ff-l); font-weight:400; font-size:var(--fs-name); line-height:1.05; letter-spacing:-.015em; margin-bottom:clamp(8px,1.04vw,20px); } .team-card__role{ font-family:var(--ff-l); font-weight:300; font-size:var(--fs-role); line-height:1.25; } /* Second row, packed under the role — the comp's rule sits 171px below the row top, which the margin lands on at 1920. */ .team-card__icons{ grid-column:2; grid-row:2; margin-top:clamp(16px,2.32vw,45px); border-top:1px solid var(--hair); padding-top:clamp(8px,.78vw,15px); } .ico{ display:block; transition:transform .3s var(--ease) } .ico:hover{ transform:translateY(-2px) } .ico img{ width:100%; height:auto } .ico--li{ width:clamp(32px,2.6vw,50px) } /* ============================== FOOTER ================================= */ .foot{ background:linear-gradient(180deg, var(--green-mid) 0%, var(--green-dark) 100%); color:var(--white); padding:clamp(44px,4.2vw,80px) 0 clamp(34px,3.1vw,60px); scroll-margin-top:var(--nav-h); } .foot__grid{ display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr); gap:clamp(32px,4.6vw,88px); } .foot__eyebrow{ font-family:var(--ff-l); font-weight:300; font-size:var(--fs-foot-eyebrow); line-height:1.1; margin-bottom:clamp(10px,1.04vw,20px); } .foot__display{ font-family:var(--ff-l); font-weight:400; font-size:var(--fs-foot-display); line-height:1.03; letter-spacing:-.02em; margin-bottom:clamp(26px,4.5vw,86px); } .foot__contact{ font-family:var(--ff-m); font-weight:400; font-size:var(--fs-foot-body); color:var(--green); } .foot__contact a{ color:var(--white); text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px } .foot__contact a:hover{ text-decoration-color:var(--white) } /* Both columns run full height so the copyright sits on the same bottom line as the enquiries line, as it does in the comp. */ .foot__left, .foot__right{ display:flex; flex-direction:column; align-items:flex-start } /* The newsletter line sits closer to its field than the left eyebrow does to the display type, so it gets its own, larger gap. */ .foot__right .foot__eyebrow{ margin-bottom:clamp(16px,1.67vw,32px) } .foot__left .foot__contact{ margin-top:auto } .foot__display{ margin-bottom:clamp(26px,4.5vw,86px) } .signup{ position:relative; display:flex; align-items:center; align-self:stretch; border:1px solid var(--green); border-radius:999px; height:clamp(52px,3.9vw,75px); padding:0 clamp(6px,.42vw,8px) 0 clamp(20px,2.29vw,44px); transition:box-shadow .3s var(--ease); } .signup:focus-within{ box-shadow:0 0 0 3px rgba(152,206,0,.25) } .signup input{ flex:1 1 auto; min-width:0; height:100%; background:none; border:0; color:var(--white); font-family:var(--ff-l); font-weight:300; font-size:var(--fs-foot-body); } .signup input::placeholder{ color:var(--green); opacity:1 } .signup input:focus{ outline:none } .signup button{ flex:0 0 auto; width:clamp(34px,2.6vw,50px); aspect-ratio:1; border-radius:50%; overflow:hidden; transition:transform .3s var(--ease); } .signup button:hover{ transform:scale(1.07) } .signup__msg{ font-family:var(--ff-s); font-size:clamp(12px,.83vw,16px); color:var(--green); min-height:1.4em; padding-top:10px; } .foot__legal{ display:flex; align-items:center; gap:8px; font-family:var(--ff-m); font-weight:400; font-size:var(--fs-foot-legal); color:var(--green); margin-top:auto; padding-top:clamp(28px,4.2vw,80px); } .foot__legal img{ width:clamp(11px,.73vw,14px); height:auto } /* ============================ BREAKPOINTS =============================== */ @media (max-width:1200px){ .logo-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } } @media (max-width:1024px){ .news__track{ grid-auto-columns:calc((100% - 2 * var(--news-gap)) / 3) } /* Stacks alongside the hero turning vertical. Full width, so the portrait runs at its native 4:5 rather than the comp's slightly tighter crop. */ /* Tablet keeps the two columns; the rows go compact — headshot, name and role on one line each, and the mark pushed to the right and top-aligned. Anchored to the comp's 834 artboard: 120 shot, 32 mark, 28 gaps. */ .team__grid{ gap:clamp(24px,3.6vw,30px) } .team-card{ grid-template-columns:clamp(92px,14.39vw,148px) minmax(0,1fr) clamp(28px,3.84vw,40px); grid-template-rows:auto; /* No gap before the mark — the comp runs the name right up to it, which is what keeps "Daniel Faierman" on one line. The gap after the headshot is carried by its own margin instead. */ column-gap:0; padding-top:clamp(6px,.96vw,10px); align-items:start; } .team-card__shot{ grid-column:1; grid-row:1; height:auto; aspect-ratio:1; min-height:0; } /* The gap after the headshot is the text's padding, not a column gap: the text column still runs all the way to the mark, which is the room the longer names need to stay on one line. (A margin on the headshot would overflow it instead of shrinking it — it is width:100% of its column.) */ .team-card__text{ grid-column:2; grid-row:1; padding-top:clamp(2px,.45vw,4px); padding-left:clamp(20px,3.36vw,34px); } .team-card__text h3{ font-size:clamp(18px,2.88vw,30px); line-height:1.05; margin-bottom:clamp(6px,1.2vw,12px); } .team-card__role{ font-size:clamp(16px,2.16vw,22px); line-height:1.19 } .team-card__icons{ grid-column:3; grid-row:1; margin-top:0; border-top:0; padding-top:clamp(2px,.45vw,4px); } .ico--li{ width:clamp(28px,3.84vw,40px) } .team__list{ gap:clamp(24px,3.56vw,36px) } .mission__grid{ grid-template-columns:1fr; gap:clamp(20px,3vw,40px) } .mission__grid > .mission__body{ border-left:0; padding-left:0; max-width:none } .mission__body{ font-size:clamp(21px,3.1vw,34px) } .foot__grid{ grid-template-columns:1fr } .foot__left .foot__contact{ margin-top:clamp(20px,4vw,40px) } .foot__legal{ margin-top:clamp(24px,4vw,44px); padding-top:0 } } @media (max-width:900px){ /* The labels used to be "Select Investments" / "Select News" and shed the "Select " here. One-word names now, so only the gap tightens. */ .nav__links{ gap:clamp(14px,2.6vw,24px) } } @media (max-width:820px){ .logo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } .news__track{ grid-auto-columns:calc((100% - var(--news-gap)) / 2) } } @media (max-width:640px){ .nav__links{ display:none } .nav__burger{ display:block } .themetoggle{ width:36px } .logo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } .news__track{ grid-auto-columns:78% } /* Comp: 402-wide artboard, 24px gutter. Headshot, text, then the LinkedIn mark pushed to the right edge and top-aligned. */ /* Phones are where the two columns stack, portrait first. */ .team__grid{ grid-template-columns:1fr; gap:clamp(24px,4vw,40px) } .team__photo{ aspect-ratio:354/597 } .team__list{ gap:21px } .team-card{ grid-template-columns:100px minmax(0,1fr) 30px; grid-template-rows:auto; column-gap:0; padding-top:7px; align-items:start; } .team-card__shot{ grid-row:1; grid-column:1; height:auto; aspect-ratio:1; min-height:0; } .team-card__text{ grid-column:2; grid-row:1; padding-top:4px; padding-left:20px } .team-card__text h3{ font-size:21px; line-height:1.05; margin-bottom:10px } .team-card__role{ font-size:16px; line-height:1.19 } .team-card__icons{ grid-column:3; grid-row:1; border-top:0; padding-top:4px; } .ico--li{ width:30px } .hero__ticks{ display:none } .foot__display{ margin-bottom:34px } } /* Smallest phones: the 100/30 fixed columns leave too little for the name, which wraps and makes the row heights ragged. Buy the text some room. */ @media (max-width:360px){ .team-card{ grid-template-columns:80px minmax(0,1fr) 30px; column-gap:0 } .team-card__text{ padding-left:14px } .team-card__text h3{ font-size:19px } .team-card__role{ font-size:15px } } /* --------------------------- REDUCED MOTION ----------------------------- */ /* No scroll-jacking: the reel becomes a plain grid of the four images. */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .hero{ height:auto !important } .hero__track{ position:static; height:auto; overflow:visible } .hero__strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; transform:none !important; } .hero__panel{ width:auto !important; height:auto !important; aspect-ratio:1 } .hero__panel + .hero__panel{ margin-left:0; margin-top:0 } .hero__panel img{ position:static; width:100%; height:100%; transform:none; } .hero__ticks{ display:none } .logo-card{ animation:none } .nav__link::after{ transition:none } body, .mmenu, .hero__track, .hero__panel, .invest__panel, .logo-card, .news-card__media, .team__photo, .team-card__shot, .themetoggle, .themetoggle__icon{ transition:none } .news-card__media img, .ico, .logo-card img{ transition:none } .logo-card::before{ transition:none } } /* Beehiiv manages newsletter validation and confirmation. */ .newsletter-embed { width: 100%; min-width: 0; min-height: 80px; } .newsletter-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; }