/* * overrides.css — our additions on top of the original theme. * Everything else in /site/css is vendored from the live site unchanged; * anything WE change or add belongs in this file. */ /* Native smooth scrolling for the in-page anchor nav (replaces the theme's jQuery scroll animation). */ html { scroll-behavior: smooth; } /* No-JS fallback for the scroll-reveal animations. The theme hides headings (.anim-heading, slide-up) and blocks ([data-sal], fade-in via sal.js) until JS reveals them. A tiny inline script in Layout.astro adds .js to as soon as scripts run; when it's absent (JS disabled or broken), these rules force everything visible so no content can be stuck hidden. */ html:not(.js) .anim-heading { transform: none !important; } html:not(.js) [data-sal] { opacity: 1 !important; transform: none !important; } /* Same for the hero artwork, which interactions.js reveals by adding .open. */ html:not(.js) .t1 { opacity: 1 !important; } /* Contact form (replaces the WordPress WPForms plugin markup + its 119KB stylesheet). Field look matches the live form: white, thin gray border, gray placeholder text. Submission is handled in interactions.js. */ .contact-form select, .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { display: block; width: 100%; max-width: 480px; box-sizing: border-box; margin: 0 0 10px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 2px; background: #fff; color: #333; font-family: inherit; font-size: 16px; line-height: 1.3; } .contact-form ::placeholder { color: #999; } /* Select needs its height and chevron set explicitly — the shared rule above gives it the same box as the text inputs, but a native select won't match their padding or drop the platform arrow on its own. */ .contact-form select { height: 39px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f7689' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } /* Until a choice is made the placeholder option shows, so grey it to match the other fields' placeholder text rather than looking like a filled answer. */ .contact-form select:invalid { color: #999; } .contact-form textarea { min-height: 120px; resize: vertical; } .contact-form button[type="submit"] { border: none; cursor: pointer; margin-top: 6px; font-size: 16px; } /* Honeypot field: invisible to people, filled only by naive bots. */ .contact-form .cf-botcheck { display: none; } .contact-form .cf-status { font-size: 14px; margin: 12px 0 0; } .contact-form .cf-status--ok { color: #4caf50; } .contact-form .cf-status--error { color: #d9534f; } .contact-form .cf-required { font-size: 14px; color: #1c1c2e; margin-top: 16px; } /* hCaptcha "I'm not a robot" checkbox — sits above the Submit button. */ .contact-form .cf-captcha { margin: 8px 0 20px; } /* --------------------------------------------------------------------------- Homepage hero — headline + subhead The hero copy is now a full sentence ("Best-in-class consumer loan underwriting, and the private credit to fund it.") rather than the original two-word tagline, so the text column needs more room or the line breaks land mid-phrase. With the logo column removed the hero is two columns. The theme's columns are content-box with 12px of side padding, so the percentages PLUS 48px of padding have to stay inside the row — otherwise the artwork column wraps underneath the text instead of sitting beside it. 60 + 33 clears that at both container widths (960 and 1140), and leaves the text enough room to hold the headline on two lines at full size all the way down to 992px. The copy's left padding goes to 0 so the headline starts at the container edge, level with the header logo above it and with every other section's copy. --------------------------------------------------------------------------- */ @media only screen and (min-width: 992px) { .hp_1 .col-md-5 { -ms-flex: 0 0 68%; flex: 0 0 68%; max-width: 68%; } .hp_1 .col-md-4 { -ms-flex: 0 0 26%; flex: 0 0 26%; max-width: 26%; } .hp_1 .col-md-5 .pl64 { padding-left: 0; } .hp_1 .col-md-5 .pr64 { padding-right: 0; } /* Sized for presence rather than for holding the sentence on two lines. Novar ships one weight (300) — asking for 700 returns identical metrics, so there is no bold to reach for the way Legalist reaches for PT Serif at 800. With weight unavailable, the punch has to come from scale and tight leading, so the type goes up 35 -> 46px and the sentence is allowed to run to three lines instead of being held back to fit two. */ .hp_1 .hero-headline .anim-heading, .hp_1 .hero-headline { font-size: 46px; line-height: 52px; letter-spacing: -0.005em; } /* Even out the line lengths rather than filling each line to the edge and leaving a short last one. Ignored by browsers that don't support it, which simply get the normal greedy wrap. */ .hp_1 .hero-headline .anim-heading { text-wrap: balance; } } /* The theme pins the hero to exactly 70vh and centres the row inside it. When the content is taller than 70vh — a short window, a laptop, a zoomed page — centring pushes the top of it up underneath the fixed header, which clipped the headline and the top of the artwork. Letting the section grow instead, with the header's height reserved as padding, means the copy can never sit under the header at any window size: short windows centre as before, tight ones just get taller. */ .hp_1, .hp_1 .container { height: auto; min-height: 70vh; } .hp_1 .container { padding-top: 148px; padding-bottom: 72px; box-sizing: border-box; } /* Hero artwork: the flat diamond cluster beside the headline. It replaces the theme's isometric cube cluster, which `.hp_1 svg` pinned to a 400px max-width (and a 100dvw base), so it never scaled with the window. This one is fluid — it fills its column and holds its aspect ratio at any width via the viewBox. The reveal still rides the theme's existing .t1/.open stagger. */ .hp_1 .hero-mark { display: block; width: 100%; /* Portrait mark in a ~26% column: uncapped it grows taller than the copy beside it and unbalances the row, so hold it to the headline's optical weight rather than letting it fill the column. */ max-width: 300px; /* The theme pins `.hp_1 svg` to height:250px + padding-right:64px under 991px; both fight the fluid sizing, so clear them here. */ height: auto; padding: 0; margin-left: auto; } @media only screen and (max-width: 991px) { /* Stacked layout — keep the artwork from dominating the mobile hero, roughly the size the theme gave the old cube cluster here. */ .hp_1 .hero-mark { max-width: 200px; } /* The theme zeroes the hero container's top padding here, relying on the logo mark's own top margin to hold the copy clear of the fixed header. With the mark gone the headline would sit underneath the header, so reserve its height (83px) plus some breathing room. !important because the theme's `.container { padding: 0 !important }` (max-device-width: 1024px) wins otherwise — the same rule that eats the side gutters further down. */ .hp_1 .container { padding-top: 112px !important; } } /* --------------------------------------------------------------------------- Hero typography The headline was 26px in the body sans — smaller than every section heading on the page at 64px, so the most important sentence on the site was also its smallest text, and headline and subhead sat only 8px apart in the same face and weight, which read as one flat block. It now runs serif headline → rule → sans subhead, the arrangement Legalist uses (PT Serif 66/800, a 150x2 rule, Raleway 34/300). Novar is this site's serif — the wordmark face — so the pairing is the brand's own. The sizes are smaller than Legalist's because the copy is longer: theirs is four words, this is twelve, and 35px is the largest that still breaks where the sentence intends inside its column. --------------------------------------------------------------------------- */ .hp_1 .hero-headline .anim-heading, .hp_1 .hero-headline { font-family: "Novar", sans-serif; font-weight: 300; } /* Rule between headline and subhead, marking the step between them. */ .hero-rule { display: block; width: 56px; height: 2px; margin: 28px 0 24px; background-color: #a0a0de; } .hero-subhead { font-family: atten-new, sans-serif; font-weight: 300; font-size: 21px; line-height: 30px; max-width: 30em; margin-top: 0; color: rgba(255, 255, 255, 0.82); } @media only screen and (max-width: 991px) { .hero-rule { margin: 22px 0 20px; } .hero-subhead { font-size: 18px; line-height: 26px; } } /* --------------------------------------------------------------------------- Proof bar — headline numbers directly under the hero The band continues the hero's dark field rather than sitting on it, because the theme's downward wedge (.hp_1:before) overhangs 29vw below the hero and would otherwise cover the numbers. So the wedge moves from the bottom of the hero to the bottom of this band — same shape, same colour, just anchored one section lower, which keeps the hero → press transition identical. --------------------------------------------------------------------------- */ .hp_1:before { content: none; } /* --------------------------------------------------------------------------- Diagonal depth The theme's wedges are 29vw deep — 418px at a 1440 window. Each one opens a band that tall between two sections, and because the shape is a triangle the band is mostly empty: only the middle carries any ink. Three of them (below the metrics bar, above and below Leadership) added roughly 1250px of near- empty page. Halving the depth keeps the diagonal as a motif but takes the dead space out with it. One value so all three stay the same angle — the -0.99 offsets mirror the theme's own -28.7 against 29. --------------------------------------------------------------------------- */ :root { --ef-wedge: 14vw; } .proof-bar { position: relative; background-color: #1c1c2e; padding: 8px 0 56px; } .proof-bar:before { content: ""; position: absolute; left: 0; bottom: calc(var(--ef-wedge) * -0.99); width: 0; height: 0; border-left: 50vw solid transparent; border-right: 50vw solid transparent; border-top: var(--ef-wedge) solid #1c1c2e; } /* The footer's chevron was the last diagonal still at the theme's original 29vw, so it read as a much steeper angle than the three above it. With the LinkedIn badge and email moved into the contact section the footer holds only the mark and the copyright, so it needs nowhere near that depth. The container's pull-up is expressed against the same variable — it was -300px against a 418px wedge, so 0.72 of it keeps the content sitting in the same spot within the shape at any width, replacing three fixed-px breakpoints. */ footer:before { top: calc(var(--ef-wedge) * -0.99); border-bottom-width: var(--ef-wedge); } footer .container { margin-top: calc(var(--ef-wedge) * -0.72); } /* Leadership's own two diagonals, and the margins that reserve room for them. */ .hp_4 { margin-top: var(--ef-wedge); margin-bottom: var(--ef-wedge); } .hp_4:before { top: calc(var(--ef-wedge) * -0.99); border-bottom-width: var(--ef-wedge); } .hp_4:after { bottom: calc(var(--ef-wedge) * -0.99); border-top-width: var(--ef-wedge); } @media only screen and (max-width: 767px) { .proof-bar:before { z-index: 1; } } .proof-bar .container { position: relative; z-index: 2; } .proof-bar__grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .proof-bar__item { -ms-flex: 1 1 0; flex: 1 1 0; min-width: 180px; text-align: center; } /* Numbers use atten-new (the face the rest of the page is set in) rather than Novar. Novar's digits are old-style figures — its "3" and "9" hang ~215/1024 em below the baseline while "B" sits on it — so "$3B+" read as misaligned, and the font has no GSUB table, meaning lining figures can't be switched on. atten-new has ordinary lining figures, so the digits line up with $ and B. */ .proof-bar__value { font-family: atten-new, sans-serif; font-weight: 300; /* Kept below the hero headline: these are the loudest thing on a dark field, and at 48px they were reading larger than the sentence they support. */ font-size: 42px; line-height: 1.1; color: #fff; } .proof-bar__label { font-family: atten-new, sans-serif; font-weight: 300; font-size: 16px; line-height: 22px; margin-top: 8px; color: rgba(255, 255, 255, 0.6); } @media only screen and (max-width: 991px) { .proof-bar__value { font-size: 38px; } } @media only screen and (max-width: 767px) { .proof-bar { padding: 24px 0 40px; } .proof-bar__item { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 28px; } .proof-bar__item:last-child { margin-bottom: 0; } } /* --------------------------------------------------------------------------- About — single block of copy beside the hexagon mark Replaces the theme's 1-2-3 stepper layout. The old markup leaned on stepper rules (`.hp_2 .s1` is absolutely positioned at opacity 0 and only revealed by `.active`), so this section is styled from scratch here instead of inheriting them. Leadership below carries `margin: 29vw 0` and draws its own dark triangle up into that gap (`.hp_4:before`). The gap itself is just page background, so the grey is carried down through it — otherwise a white stripe appears between this section and the point where the dark triangle starts. --------------------------------------------------------------------------- */ /* About sits directly under the proof bar now, so it inherits the job the press section used to do: clearing the dark wedge that descends out of the bar above. home.css handled that with stepped margins per breakpoint (550 / 400 / 300 / 200px), but the wedge is always exactly 29vw, so one calc tracks it precisely at every width and drops four media queries — the steps were both over-generous on phones and slightly short at 1100. Padding rather than margin so the grey runs all the way up to meet the proof bar and the wedge lands on it; a margin would leave a white band between. Press no longer needs the clearance, and needs no filler below either: it is white, and so is the 29vw gap Leadership's margin opens beneath it. */ .press-section { margin-top: 0; } .about-sec { position: relative; background-color: #fafafa; /* No wedge clearance here, because there is no visible wedge to clear. The proof bar's downward triangle is drawn by its ::before, but this section is positioned, opaque and later in the DOM, so it paints straight over it — elementFromPoint at the triangle's midpoint returns .about-sec. That has been true since About moved above Press; the section was reserving up to 300px for a shape nobody can see. The metrics band now meets this one on a clean edge, which is what was already rendering. (Restoring the diagonal means giving this section a negative z-index and handing the space back — the two can't both be had.) */ padding: 96px 0 120px; } /* One heading treatment for the whole page. ABOUT picked up wide letter-spacing when it was reworked, which left it reading as a different system to every other section; matching the rest is the cheaper fix and looks deliberate rather than accidental. Each heading was measured to still fit its column at this tracking before it went in. */ .press-section h2, .about-sec h2, .hp_4 h2, .values-sec h2, #careers h2, .hp_7 h2 { letter-spacing: 0.14em; } .about-sec__head { margin-bottom: 56px; } .about-sec__title { margin-bottom: 0; } .about-sec__body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; gap: 64px; } .about-sec__copy { -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 620px; } /* Each audience reads as its own statement: a small letter-spaced eyebrow over the sentence, with a hairline in the accent colour running down the side. Replaces the plain bold-label-then-indented-paragraph stack. */ /* No trailing margin on the last one — it used to separate the blocks from the data-points line that closed the section, which has since gone. */ .about-sec__block:last-child { margin-bottom: 0; } .about-sec__block { margin-bottom: 36px; padding-left: 24px; border-left: 2px solid rgba(160, 160, 222, 0.55); } .about-sec__label { font-family: atten-new, sans-serif; font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: 0.1em; text-transform: uppercase; color: #4a5163; margin: 0 0 12px; } .about-sec__text { font-family: atten-new, sans-serif; font-weight: 300; font-size: 19px; line-height: 32px; color: #1c1c2e; margin: 0; } .about-sec__mark { -ms-flex: 0 0 auto; flex: 0 0 auto; width: 380px; /* The copy is capped at 620px and the row is space-between, so on a wide desktop this width comes out of the slack between them. Between 992 and 1200px there is no slack left, and a fixed 380px would eat into the text — hence the percentage ceiling, which only bites at those widths. */ max-width: 36%; } .about-sec__mark img { display: block; width: 100%; height: auto; } @media only screen and (max-width: 991px) { .about-sec { /* Same as desktop — the wedge is painted over here too, so nothing to clear. */ padding: 64px 0 160px; } .about-sec__body { gap: 40px; } .about-sec__mark { width: 300px; } } @media only screen and (max-width: 767px) { .about-sec__body { display: block; } /* Stacked under the copy and centred. This used to be display:none, on the reasoning that decoration shouldn't take width from the text on a phone — which still holds for width, but not for the block below it, so the mark now sits under the copy at its own size instead of being dropped. */ .about-sec__mark { width: 280px; max-width: 100%; margin: 48px auto 0; } } /* --------------------------------------------------------------------------- Core Values — three plain statements between Leadership and Careers Kept deliberately simple: heading, then a title and paragraph per value. --------------------------------------------------------------------------- */ .values-sec { background-color: #fff; /* Light on the bottom — Careers below brings its own leading space, and the two sections read as one block if the gap between them is too wide. */ padding: 96px 0 24px; } .values-sec__title { margin-bottom: 64px; } .values-sec__grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 48px; } .values-sec__item { -ms-flex: 1 1 0; flex: 1 1 0; min-width: 220px; } .values-sec__name { font-family: atten-new, sans-serif; font-weight: 600; font-size: 20px; line-height: 28px; color: #1c1c2e; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #dadde2; } .values-sec__text { font-family: atten-new, sans-serif; font-weight: 300; font-size: 16px; line-height: 26px; color: #1c1c2e; margin: 0; } /* Careers opens with 160px of margin plus 160px of padding — sized for when it sat directly beneath Leadership's wedge, with the margin collapsing out of the section to become an external gap too. Core Values now sits between the two, so that lead-in reads as a large empty band. Trimmed only where Core Values is the section directly above, so the careers pages are untouched. */ .values-sec + #careers .container.mt160 { margin-top: 0; padding-top: 64px; } @media only screen and (max-width: 767px) { .values-sec { padding: 64px 0 16px; } .values-sec__grid { display: block; } .values-sec__item { margin-bottom: 40px; } .values-sec__item:last-child { margin-bottom: 0; } } /* --------------------------------------------------------------------------- Leadership — smaller honeycomb portraits The photos were dominating the section at 226px across. Scaling the whole .leadearship-imgs block rather than the images alone is deliberate: the faces are positioned by hand-tuned row margins (some inline in the component) and sit over an absolutely-positioned hex-grid SVG, so resizing the images on their own would pull them out of register with the outlines behind them. One transform moves photos and grid together and keeps the honeycomb exact. The section's height is set by the bio column and .decorhex's min-height, not by these, so nothing collapses underneath. --------------------------------------------------------------------------- */ @media only screen and (min-width: 992px) { /* Centre the honeycomb + bios as a pair. The theme let the honeycomb bleed off the left edge, which balanced when it was full size; now that it's scaled down and the bios are pulled in behind it, the whole composition sat hard left with a few hundred px of dead space to its right. */ .hp_4 .decorhex { -ms-flex-pack: center; justify-content: center; } .hp_4 .leadearship-imgs { transform: scale(0.62); transform-origin: top left; /* A transform paints smaller but still occupies its original box, so the freed space is taken back by hand or it becomes a gap before the bios and a tail of dead space below. The block's layout box is 694 x 1395, so 38% of each is what's left over at this scale. Not the full amount horizontally though: the hex-grid's right edge otherwise lands flush against the bio column, and the smaller hexagons no longer taper enough to give that the breathing room it had at full size. */ margin-right: -230px; margin-bottom: -530px; } /* The heading's 120px top inset was drawn to balance the full-size honeycomb. With smaller portraits it just pushes the section taller, and the reserved bio height below is measured from it. */ .hp_4 h2.pt120 { padding-top: 80px; } } /* --------------------------------------------------------------------------- Body copy — one scale, and room to breathe Two problems the audit turned up. The long-form copy ran 18px on a 23px line (1.28), which is tight for any sustained reading and tighter still for light text on a dark field, where leading has to do more work. And the page carried six body sizes (16 / 17 / 18 / 19 / 21 / 22), so nothing read as a system. Settled on: 18px body, 22px lead, 16-17px labels, all on ~1.55 leading. The Leadership bios get taller as a result — that section's reserved height is raised to match in the component. Readability is worth the pixels. --------------------------------------------------------------------------- */ .hp_4 .desc p, .hp_7 p { font-size: 18px; line-height: 28px; } .about-sec__text { font-size: 18px; line-height: 30px; } .values-sec__text { font-size: 18px; line-height: 28px; } /* Careers: the role and its arrow sat at opposite ends of a 570px column, which read as two unrelated things rather than one clickable row. */ .career-card { max-width: 360px; } /* The contact block nests two pb160s inside a section that adds 80 more, so there was ~448px between "*Required" and the footer mark — the largest empty run on the page, and right where it reads as if the page had stopped early. The footer's own chevron already gives the two enough separation. */ @media only screen and (min-width: 992px) { .hp_7 .width50.pb160, .hp_7 .form-contact.pb160 { padding-bottom: 0; } } /* home.css scales the active press card to 1.15. That worked when slides were centred and the active one sat mid-track with room either side. Now that they align left, the active card is the leftmost — and scaling from its centre pushes it past the carousel's overflow edge, clipping its left side. The emphasis also no longer means anything: the first card is first, not special. Removed rather than re-origined, for both reasons. */ .press-swiper .swiper-slide-active .card { transform: none; } /* Press card date — sits under the headline as a small letter-spaced eyebrow, the same treatment the About labels and Contact aside use. Muted so it dates the story without competing with it. */ .card-date { font-family: atten-new, sans-serif; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f7689; /* Pinned to the bottom of the card, directly above the link. .card-content is a flex column with justify-content: space-between and three children — headline, date, link. That pins the headline to the top and the link to the bottom, but leaves the date floating on whatever space the headline didn't use, so it rode up or down with the headline's length. Across a row of cards the dates landed as much as 70px apart, and a short headline made its date look conspicuously high next to its neighbours. An auto top margin takes precedence over space-between's distribution and absorbs that slack instead, so the date settles just above the link. The links already aligned across every card, so the dates now do too, whatever the headline does. */ margin: 0 0 12px; margin-top: auto; } .card-content h4 { margin-bottom: 10px; } /* Contact aside — the direct alternatives to the form, in the ~420px the form block left empty. Labels borrow the About eyebrow treatment so the two sections read as the same system. */ .contact-aside { -ms-flex: 1 1 auto; flex: 1 1 auto; -ms-flex-item-align: start; align-self: flex-start; /* Top edge sits level with the form's opening line, so the two columns start together rather than the aside floating halfway down. The accent rule down the side is the same one the About blocks use, so the two read as a set. */ margin-left: 48px; padding: 4px 0 4px 28px; border-left: 2px solid rgba(160, 160, 222, 0.55); } .contact-aside__linkedin { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; gap: 12px; font-family: atten-new, sans-serif; font-weight: 300; font-size: 18px; line-height: 26px; color: #1c1c2e; text-decoration: none; } .contact-aside__linkedin svg { width: 26px; height: auto; -ms-flex-negative: 0; flex-shrink: 0; } .contact-aside__linkedin span { border-bottom: 1px solid rgba(160, 160, 222, 0.7); padding-bottom: 2px; } .contact-aside__linkedin:hover span { border-bottom-color: #a0a0de; } .contact-aside__label { font-family: atten-new, sans-serif; font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: #6f7689; margin: 0 0 6px; } .contact-aside__value { font-family: atten-new, sans-serif; font-weight: 300; font-size: 18px; line-height: 26px; margin: 0 0 32px; } .contact-aside__value a { color: #1c1c2e; border-bottom: 1px solid rgba(160, 160, 222, 0.7); padding-bottom: 2px; text-decoration: none; } .contact-aside__value a:hover { border-bottom-color: #a0a0de; } @media only screen and (max-width: 991px) { /* Must stay visible here. These two were the footer's only contact details until they moved up into this section — hiding the aside on phones would leave no way to reach either. Stacks under the form instead. */ .contact-aside { -ms-flex: 0 0 auto; flex: 0 0 auto; /* Not flex-basis:100% — the 24px side margins would then push it past the viewport, since the basis resolves against the full container width. */ width: calc(100% - 48px); box-sizing: border-box; margin: 0 24px 56px; padding: 4px 0 4px 20px; } } /* --------------------------------------------------------------------------- Leadership bios on phones At 767px and below the theme hides the honeycomb faces, which are what switch between people — so it falls back to rendering all five bios in full, ~4,800px of uninterrupted text. Each bio already carries its own photo, name and title, so they become an accordion: identity visible, bio on tap. Scoped to 767px deliberately. Between 768 and 991px the faces are still there (merely scaled to 0.65), so tapping a face already switches people and only one panel is ever visible — an accordion there would add a tap for nothing. This block previously ran to 991px on the mistaken belief that the faces disappeared below 992px. --------------------------------------------------------------------------- */ .desc__toggle { display: none; } @media only screen and (max-width: 767px) { /* The theme's mobile rule below stacks every panel and makes them all visible, but it restores only position, opacity and z-index — never the `pointer-events: none` set on the base `.hp_4 .desc`. Only `.desc.open` reverses that, and JS marks exactly one panel open on load, so four of the five "Read bio" buttons were painted but dead to touch. */ .hp_4 .desc { pointer-events: auto; } .desc__toggle { display: inline-block; margin: 20px 0 0; /* 44px minimum tap target (Apple and Google both publish it); the theme's own buttons render ~36px tall. */ padding: 12px 20px; min-height: 44px; box-sizing: border-box; border: 1px solid rgba(160, 160, 222, 0.55); background: none; cursor: pointer; font-family: atten-new, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #a0a0de; } .desc .desc__body { display: none; } .desc.expanded .desc__body { display: block; } /* The theme's 160px inset above each name is drawn for the desktop panel, where one bio sits alone; stacked on a phone it becomes five dead gaps. */ .hp_4 .desc h3.pt160 { padding-top: 0; } .hp_4 .desc img { margin-top: 24px; } } /* --------------------------------------------------------------------------- Tap targets on phones The theme's buttons render as inline boxes 36px tall, and the menu control is a 20px icon — both under the ~44px minimum Apple and Google each publish, so both are fiddly to hit on a phone. Fixed with padding alone: the buttons grow a few px, and the menu icon keeps its exact position because the padding that enlarges its hit area is cancelled by an equal negative margin. --------------------------------------------------------------------------- */ @media only screen and (max-width: 991px) { /* `.desc__toggle` is deliberately not in this selector: it would set display:inline-block and un-hide the bio button at tablet widths, where the honeycomb faces still work. Its 44px sizing lives with the rest of the accordion, in the 767px block above. */ .button-blue { display: inline-block; padding-top: 12px; padding-bottom: 12px; min-height: 44px; box-sizing: border-box; } .header__btn { padding: 12px; margin: -12px; } } /* Small-screen gutter for our own sections. The theme kills `.container`'s side padding on phones and tablets (`.container { padding: 0 !important }` under max-device-width: 1024px) because its own sections each carry their own inset. Ours use .container directly, so without this the copy runs into both edges of the screen. Needs !important to beat the theme's, and the device-width query is mirrored because it doesn't track the viewport on a real phone. */ @media only screen and (max-width: 991px), only screen and (max-device-width: 1024px) { .proof-bar .container, .about-sec .container, .values-sec .container, /* Press was missed when this rule was written — its heading only moved into a .container later, so on a phone it sat flush against the screen edge while every other heading was inset. */ .press-section .container { padding-left: 24px !important; padding-right: 24px !important; } } /* Careers pages: keep "< Back to Careers" above the decorative chevron. The link is static and the .apply-svg artwork that overlaps it comes later in the DOM, so the artwork was painting over the end of the link — the last word sat behind it and that part of the link couldn't be clicked. Affects all six job pages. */ .back-link { position: relative; z-index: 2; } /* Career heading "settle": the heading eases in ~5% larger and shrinks to its final size, reproducing the size the live site briefly shows before its font loads (live transiently renders it at 42.07px, then 40px → ratio 1.052). We do it as a clean CSS scale — our font is preloaded, so there's no flicker — and via transform, so the layout below never reflows. Runs on load alongside the existing slide-up. Honors reduced-motion. */ @keyframes ef-title-settle { from { transform: scale(1.052); } to { transform: scale(1); } } .single-careers .title { transform-origin: left center; animation: ef-title-settle 0.8s ease both; } @media (prefers-reduced-motion: reduce) { .single-careers .title { animation: none; } }