/* Purpose: Section styling, built to the Figma homepage. Frame 1440 · content column 1240 · 80px gutters · 80px section bands. Every value here comes from a token; the numbers in comments are the Figma spec. */ /* ============================================================ HERO Wordmark centred over the footage; headline bottom-left, sub and buttons bottom-right. 700px tall in the design. ============================================================ */ .hero--video{position:relative;min-height:auto;padding:0;display:block;overflow:visible} .hero--video .hero__track{position:relative} .hero--video .hero__stage{ position:relative; /* The hero owns the first screen. 100vh is the value everywhere and the only one older browsers understand - on its own, an unsupported svh would be dropped and leave the stage with no minimum height at all. svh then refines it on phones, where it is the area actually visible with the browser chrome showing, so the buttons land above the fold on first paint rather than behind the URL bar. */ min-height:100vh; min-height:100svh; display:flex;flex-direction:column;justify-content:space-between; overflow:hidden; isolation:isolate; padding-block:calc(var(--header-offset) + var(--space-40)) var(--space-60, 60px); } .hero--video.is-scroll-hero .hero__track{height:var(--hero-track, 320vh)} .hero--video.is-scroll-hero .hero__stage{position:sticky;top:0} .hero__video{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover;background:var(--c-bg); } /* Orbitron Bold 120px, 150px line, 2px tracking, white fading to transparent. */ .hero__wordmark{ font-family:var(--font-display); font-weight:var(--weight-bold); font-size:clamp(var(--fs-40), 8.4vw, var(--fs-120)); line-height:1.25; letter-spacing:2px; text-align:center; color:var(--c-text-hero); pointer-events:none; white-space:nowrap; margin-inline:auto; } /* The gradient lives on each letter rather than on the word. With background-clip:text on the parent, the parent paints the gradient behind all the glyphs at once, so fading a single letter would leave its colour behind. Painted per letter it fades with the letter. The gradient is vertical and every letter box shares one line-height, so the ramp still reads as one continuous fall across the word. */ .hero__letter{ display:inline-block; white-space:pre; /* the space between the two words is its own letter */ opacity:calc(1 - var(--out, 0)); transform:translateY(calc(var(--out, 0) * -0.55em)); will-change:opacity, transform; } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .hero__letter{ background:linear-gradient(180deg, rgba(var(--rgb-white),.96) 13.667%, rgba(var(--rgb-white),0) 91.536%); -webkit-background-clip:text;background-clip:text; color:transparent; } } .hero__content{ position:relative;z-index:1; width:min(calc(100% - (2 * var(--container-pad))), var(--container-max)); margin-inline:auto; } /* Heading 643, sub-headline column 408, pushed apart and vertically centred. */ .hero__phase--outro{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-32); align-items:center; } @media (min-width:1024px){ .hero__phase--outro{ grid-template-columns:643px minmax(0,408px); justify-content:space-between; gap:var(--space-40); } } .hero__aside{display:flex;flex-direction:column;gap:var(--space-24)} @media (max-width:767px){ .hero__phase--outro{gap:16px} .hero__aside{gap:24px} } .hero__phase{max-width:none} .hero--video.is-scroll-hero .hero__phase{ opacity:var(--phase, 1); transform:translateY(calc((1 - var(--phase, 1)) * var(--space-24))); transition:opacity var(--dur-base) linear, transform var(--dur-base) var(--ease-out); } .hero--video.is-scroll-hero .hero__phase[data-phase-hidden="true"]{pointer-events:none;visibility:hidden} /* 48px / 60px line, 0.48px tracking, Extra Light then Medium. */ .hero--video .hero__title{ font-family:var(--font-heading); font-size:clamp(var(--fs-28), 3.2vw + 0.4rem, var(--fs-48)); font-weight:var(--weight-extralight); line-height:1.25; letter-spacing:0.48px; color:var(--c-text-hero); text-transform:none; max-width:none; } .hero--video .hero__sub{ font-family:var(--font-body); font-size:var(--fs-body); font-weight:var(--weight-regular); line-height:24px; letter-spacing:0.48px; text-transform:capitalize; color:var(--c-text-hero); max-width:408px; } .hero--video .hero__sub strong{font-weight:var(--weight-bold);color:var(--c-text)} .hero--video .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-12)} .hero--video .hero__actions .btn{font-weight:var(--weight-medium)} /* Short viewports - a phone held sideways, or a small desktop window. min-height cannot shrink content that does not fit, and at these heights the stacked copy pushes the buttons past the fold. So the rhythm compresses instead: a smaller wordmark, tighter padding, and above 720px wide the bottom row splits back into the design's two columns, which halves the height it needs. */ @media (max-height:640px){ .hero--video .hero__stage{ padding-block:calc(var(--header-offset) + var(--space-12)) var(--space-24); } .hero__wordmark{ font-size:clamp(var(--fs-24), 5.6vw, var(--fs-40)); line-height:1.1; } .hero__phase--outro{gap:var(--space-16)} .hero__aside{gap:var(--space-12)} .hero--video .hero__title{ font-size:clamp(var(--fs-20), 2.4vw + 0.3rem, var(--fs-28)); line-height:1.2; } .hero--video .hero__sub{font-size:var(--fs-14);line-height:1.35} /* Trimming the button padding keeps the pair on one row, which is how the design shows them, rather than spending another 60px of a very short screen on a wrap. */ .hero--video .hero__actions{gap:var(--space-8)} .hero--video .hero__actions .btn{padding-inline:var(--space-20);min-height:48px} } @media (max-height:640px) and (min-width:720px){ .hero__phase--outro{ grid-template-columns:minmax(0,1fr) minmax(0,360px); justify-content:space-between; gap:var(--space-24); align-items:center; } .hero--video .hero__sub{max-width:360px} } .hero__cue{ position:absolute;left:50%;bottom:var(--space-16);z-index:1; transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:var(--space-8); font-family:var(--font-body);font-size:var(--fs-12); letter-spacing:2px;text-transform:uppercase; color:var(--c-text-muted); opacity:var(--cue, 1); transition:opacity var(--dur-base) linear; } .hero__cue-line{width:1px;height:var(--space-32);background:linear-gradient(to bottom, var(--c-crimson), rgba(var(--rgb-accent),0))} @media (max-width:1023px){ .hero__cue{display:none} } @media (prefers-reduced-motion:reduce){ .hero--video.is-scroll-hero .hero__track{height:auto} .hero--video.is-scroll-hero .hero__stage{position:relative} .hero--video.is-scroll-hero .hero__phase{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:none} .hero__letter{opacity:1;transform:none} .hero__cue{display:none} } /* ============================================================ BRAND STATEMENT + HEADLINE NUMBERS Centred claim and paragraph, a divided row of numbers, then a ghost button. A drone sits bleeding off the top right. ============================================================ */ /* ------------------------------------------------------------ The pinned sequence. The section is a tall track; the stage inside it sticks for the length of that track, and everything moves within the stage. All three drone placements, the connectors and the callouts sit on the design's own 1440 x 647 canvas, so every coordinate below is a percentage of that and the arrangement scales instead of clipping. ------------------------------------------------------------ */ .brand-statement{position:relative;padding:0} .seq__track{position:relative} .seq__stage{ position:relative; min-height:100vh; min-height:100svh; display:flex;align-items:center;justify-content:center; overflow:hidden; isolation:isolate; /* Figma node 196:699 - 100px top, 80px bottom (not the even 80/80 this had). */ padding-block:100px var(--space-80); } .seq__canvas{ position:relative; width:100%; aspect-ratio:1440 / 647; margin-inline:auto; } /* Pinned only once the script has taken over, so the no-JS render stays a normal section. */ .brand-statement.is-sequenced .seq__track{height:var(--seq-track, 300vh)} .brand-statement.is-sequenced .seq__stage{position:sticky;top:0} /* The drone. It rests here - 1158 x 647 at x 141, Figma 115:4120 - and the script moves it out to the other two placements. Transform only, so nothing reflows while it travels. */ .seq__drone{ position:absolute; left:9.792%; /* 141 / 1440 */ top:0; width:80.417%; /* 1158 / 1440 */ height:100%; /* 647 / 647 */ transform-origin:50% 50%; pointer-events:none; z-index:1; } .seq__drone img{display:block;width:100%;height:100%;object-fit:fill} .brand-statement.is-sequenced .seq__drone{will-change:transform} /* A still photograph never reads as airborne, however well it travels. A slow bob on the image itself gives it that, and because it is a child of the element the script drives, the two transforms compose instead of overwriting each other. Percentages, so the bob scales with the drone rather than looking coarse when it is small. */ @keyframes bpp-drone-hover{ 0%,100%{transform:translate3d(0, -0.9%, 0)} 50% {transform:translate3d(0, 0.9%, 0)} } .brand-statement.is-sequenced .seq__drone img{ animation:bpp-drone-hover 6.5s ease-in-out infinite; will-change:transform; } @media (prefers-reduced-motion:reduce){ .brand-statement.is-sequenced .seq__drone img{animation:none} } /* Measured, never painted: where the drone starts and where it ends up. Keeping them in the stylesheet means the script has no coordinates of its own to drift out of step. */ .seq__mark{position:absolute;visibility:hidden;pointer-events:none} .seq__mark--rest{ left:78.681%; /* 1133 / 1440 */ top:5.409%; /* 35 / 647 */ width:33.542%; /* 483 / 1440 */ height:41.731%; /* 270 / 647 */ } .seq__mark--left{ left:-19.931%; /* -287 / 1440 */ top:7.977%; /* 51.61 / 647 */ width:67.5%; /* 972 / 1440 */ height:84.080%; /* 544 / 647 */ } /* The copy sits over the canvas and fades up out of the way as the drone flies. */ .seq__copy{ position:absolute;inset:0;z-index:2; display:flex;align-items:center; opacity:var(--copy, 1); transform:translateY(calc((1 - var(--copy, 1)) * -40px)); } .brand-statement.is-sequenced .seq__copy{will-change:opacity, transform} .brand-statement.is-sequenced .seq__copy[data-gone="true"]{pointer-events:none;visibility:hidden} /* Connectors. Figma centres a line of its true length inside a bounding box and turns it about that centre; rotating about the left edge instead lands it on the wrong side. */ .seq__lines{position:absolute;inset:0;z-index:1;pointer-events:none} .seq-line{position:absolute;display:flex;align-items:center;justify-content:center;opacity:var(--in, 1)} .seq-line__rot{display:block;flex:none} .seq-line__rot img{display:block;width:100%;height:auto} /* The three callouts. */ .seq__points{position:absolute;inset:0;z-index:2} .seq-point{ position:absolute; display:flex;gap:var(--space-24);align-items:flex-start; opacity:var(--in, 1); transform:translateX(calc((1 - var(--in, 1)) * var(--space-24))); } .brand-statement.is-sequenced .seq-point{will-change:opacity, transform} .seq-point__body{display:flex;flex-direction:column;gap:var(--space-8);color:var(--c-text);min-width:0} .seq-point__title{ font-family:var(--font-heading); font-size:var(--fs-h4); /* 24 / 30, 0.24 tracking */ font-weight:var(--weight-medium); line-height:30px; letter-spacing:0.24px; } .seq-point__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px} /* Narrow screens have no room for the canvas arrangement: the section becomes an ordinary stack, the drone sits under the copy and the callouts list beneath it. */ @media (max-width:1199px){ .brand-statement.is-sequenced .seq__track{height:auto} .brand-statement.is-sequenced .seq__stage{position:relative} /* .seq__canvas and .seq__copy are siblings, not parent/child - flex column with its own gap keeps them apart. display:block left them touching with nothing between. */ .seq__stage{display:flex;flex-direction:column;gap:var(--space-80);min-height:0;padding-block:var(--space-80)} /* The canvas has no .container of its own (it bleeds full-width for the pinned desktop layout), so stacked here it needs the page gutter explicitly - without it the drone ran edge to edge, far bigger than the design ever shows it. */ .seq__canvas{aspect-ratio:auto;display:flex;flex-direction:column;gap:var(--space-40);padding-inline:var(--container-pad)} .seq__copy{position:static;opacity:1;transform:none;visibility:visible;display:block} .seq__drone{position:static;width:100%;max-width:440px;margin-inline:auto;height:auto;order:2} .seq__drone img{height:auto;object-fit:contain} .seq__lines,.seq__mark{display:none} .seq__points{position:static;order:3;display:grid;gap:var(--space-32)} /* 698px is the desktop centred-column measure (Figma's literal w-[698px]). Stacked here it is narrower than the viewport has room for, so each half of the heading wrapped a second time instead of once. */ .brand-statement__claim{max-width:900px} .seq-point{position:static;width:auto !important;opacity:1;transform:none} } @media (max-width:767px){ .seq__stage{padding-block:48px;gap:48px} .seq__canvas{gap:24px} .seq-point{gap:20px} .seq-point__title{font-size:20px;line-height:28px} .seq__points{gap:20px} .brand-statement__inner{gap:20px} } /* Tablet only - phones keep the single-column stack, there's no room for three abreast. */ @media (min-width:768px) and (max-width:1199px){ .seq__points{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)} .stat-row__value{font-size:40px;line-height:48px} } @media (prefers-reduced-motion:reduce){ .brand-statement.is-sequenced .seq__track{height:auto} .brand-statement.is-sequenced .seq__stage{position:relative} .seq__copy{opacity:1;transform:none;visibility:visible} .seq-point,.seq-line{opacity:1;transform:none} } .brand-statement__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-40);max-width:var(--container-inner);margin-inline:auto;position:relative;z-index:1} .brand-statement__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center} /* Figma node 196:699 - this section's eyebrow is pink/14px/22px, not the shared .eyebrow component's crimson/12px/20px default used by other sections on this page - scoped here rather than touching the shared rule everywhere else. */ .brand-statement__head .eyebrow{ font-size:14px;line-height:22px;color:#FF4A8A; } .brand-statement__head .eyebrow::before{background:#FF4A8A} .brand-statement__claim{ font-size:var(--fs-h2); line-height:1.25; /* 60px at the design's 48px */ letter-spacing:0.16px; text-transform:capitalize; /* authored in sentence case, set in Title Case */ max-width:698px; } .brand-statement__text{ font-family:var(--font-body); font-size:var(--fs-body); line-height:24px; color:var(--c-text); max-width:698px; /* the same measure as the claim */ } .stat-row{display:grid;grid-template-columns:minmax(0,1fr);width:100%} @media (min-width:768px){ .stat-row{grid-template-columns:repeat(3,minmax(0,1fr))} } .stat-row__item{ display:flex;flex-direction:column;align-items:center;gap:11px; padding-block:15px var(--space-16); } @media (min-width:768px){ .stat-row__item + .stat-row__item{border-left:1px solid var(--c-border-mid)} } .stat-row__value{ font-family:var(--font-display); font-size:var(--fs-48); font-weight:var(--weight-medium); line-height:52px; color:var(--c-text); font-variant-numeric:tabular-nums; } .stat-row__affix{color:var(--c-crimson)} .stat-row__label{ font-family:var(--font-label); font-size:var(--fs-body); font-weight:var(--weight-regular); line-height:25.6px; color:var(--c-text); } /* Matches the About page's mission-stats mobile treatment - the 48px display size and tall item padding read as oversized once stacked full-width on a phone. */ @media (max-width:767px){ .stat-row{gap:20px} .stat-row__item{padding:0} .stat-row__value{font-size:28px;line-height:36px} } /* ============================================================ FEATURE ORBIT A drone with hairline connectors running out to three captions. The design places these on a 1440 x 647 canvas; every coordinate below is that position expressed as a percentage, so the composition holds its proportions at any width instead of clipping. Below 1200 it becomes a stack. ============================================================ */ .orbit{position:relative;overflow:hidden;padding:0} .orbit__stage{position:relative;width:100%;margin-inline:auto} @media (min-width:1200px){ .orbit__stage{aspect-ratio:1440/647} } .orbit__art{display:block;width:100%;height:auto} @media (min-width:1200px){ /* Figma places it at -287 / 51.61, 972 x 544 on the 1440 x 647 canvas. The height has to be stated: the source file is square, so height:auto renders it 972 x 972 - overflowing the band and cropping the drone. */ .orbit__art{ position:absolute; left:-19.931%; /* -287 / 1440 */ top:7.977%; /* 51.61 / 647 */ width:67.5%; /* 972 / 1440 */ height:84.080%; /* 544 / 647 - height resolves against the stage's height */ object-fit:fill; } } .orbit__lines{display:none} @media (min-width:1200px){ .orbit__lines{display:block;position:absolute;inset:0;pointer-events:none} .orbit__lines img{position:absolute;height:auto;transform-origin:left center} } .orbit__items{display:grid;gap:var(--space-32);padding:var(--space-48) var(--container-pad) 0} @media (min-width:1200px){ .orbit__items{display:block;padding:0} } .orbit-item{display:flex;gap:var(--space-24);align-items:flex-start} @media (min-width:1200px){ .orbit-item{position:absolute} .orbit-item--1{left:66.67%;top:13.76%;width:27.78%} .orbit-item--2{left:60.28%;top:44.98%;width:29.44%} .orbit-item--3{left:47.50%;top:76.04%;width:27.78%} } .orbit-item__body{display:flex;flex-direction:column;gap:var(--space-8);color:var(--c-text);min-width:0} .orbit-item__title{ font-family:var(--font-heading); font-size:var(--fs-h4); font-weight:var(--weight-medium); line-height:30px; letter-spacing:0.24px; } .orbit-item__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px} /* ============================================================ ECOSYSTEM GRID Two-up glass cards: 500px image, then title, copy and a link. ============================================================ */ .eco{background:var(--c-bg-deep);padding-block:var(--section-pad-lg)} @media (max-width:767px){ .eco{padding-block:0} } .eco__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center} /* Figma node 196:755 - this section's eyebrow is pink/14px/22px, not the shared .eyebrow component's crimson/12px/20px default (see brand-statement for the same scoped-override pattern). */ .eco__head .eyebrow{font-size:14px;line-height:22px;color:#FF4A8A} .eco__head .eyebrow::before{background:#FF4A8A} .eco__heading{ font-size:var(--fs-h2); line-height:1.25; /* 60px at the design's 48px */ letter-spacing:0.16px; text-transform:capitalize; /* authored in sentence case, set in Title Case */ max-width:808px; } .eco__grid{ display:grid;grid-template-columns:minmax(0,1fr); gap:var(--space-40);margin-top:var(--space-60, 60px); } @media (min-width:700px){ .eco__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .eco__grid{gap:20px;margin-top:24px} } .eco-card{ display:flex;flex-direction:column;gap:var(--space-16); background:var(--c-surface-glass); border-radius:var(--r-card); padding-bottom:var(--space-16); overflow:hidden; } @media (max-width:767px){ .eco-card{gap:20px;padding-bottom:20px} } .eco-card__media{position:relative;aspect-ratio:620/500;width:100%;overflow:hidden;background:var(--c-bg-alt)} .eco-card__media img{ width:100%;height:100%;object-fit:cover; /* settles out of a slight push-in as its card arrives */ transform:scale(1.06); scale:1; transition:transform 1.1s var(--ease-out) calc(var(--i, 0) * 90ms), scale var(--dur-slow) var(--ease-out); } /* The arena card is two photographs in the design: the lit cage beneath, and the pitch laid over it at its own partial alpha. Rendering only the top one loses the cage behind it. */ .eco-card__media--stack img{position:absolute;inset:0} .eco-card__media--stack .eco-card__layer{left:-3.75%;width:107.5%;height:100%} .eco-card__media--stack .eco-card__layer + img{object-position:bottom} /* Figma node 196:755 (the 4-up grid) draws px-16 with an 8px gap between the title and its description, then 16px down to the link - not one flat gap, so the link gets its own extra top margin rather than restructuring the title/text/link into a nested wrapper. */ .eco-card__body{display:flex;flex-direction:column;gap:var(--space-8);padding-inline:var(--space-16)} @media (max-width:767px){ .eco-card__body{gap:12px} } .eco-card__body .tlink{margin-top:var(--space-8)} .eco-card__title{ font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:16px;line-height:24px;letter-spacing:0.16px;color:var(--c-text); transition:color var(--dur-base) var(--ease-out); } .eco-card__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px;color:var(--c-text);max-width:400px} @media (min-width:1200px){ .eco__grid{grid-template-columns:repeat(4,minmax(0,1fr))} } /* ------------------------------------------------------------ Motion. Framer Motion is a React library and this theme has neither React nor a build step, so the behaviour it is known for is reproduced directly: the section's children enter once when it scrolls into view, one after another, on a spring rather than a plain ease. The overshoot in the curve is what makes it read as a spring settling instead of a fade sliding to a stop. Stagger comes from --i on each child, so it is not capped at the four steps the shared .reveal delays allow. ------------------------------------------------------------ */ .eco .reveal{ transform:translateY(var(--space-40)) scale(.985); transition-duration:var(--dur-slower); transition-timing-function:var(--ease-spring); transition-delay:calc(var(--i, 0) * 90ms); } .eco .reveal.is-in{transform:none} /* Hover. The entrance owns `transform` on both the card and its picture, so hover uses the standalone `translate` and `scale` properties instead: they compose with a transform rather than overwriting it, and carry their own timing - otherwise every hover would inherit the entrance's 700ms and its stagger delay, and feel broken. */ .eco .eco-card{ translate:0 0; transition:transform var(--dur-slower) var(--ease-spring) calc(var(--i, 0) * 90ms), opacity var(--dur-slower) var(--ease-spring) calc(var(--i, 0) * 90ms), translate var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } @media (hover:hover){ .eco .eco-card:hover{ translate:0 -8px; background:rgba(var(--rgb-white),.14); box-shadow:0 24px 60px rgba(var(--rgb-void),.55); } .eco-card:hover .eco-card__media img{scale:1.05} .eco-card:hover .tlink{color:var(--c-accent)} .eco-card:hover .tlink img{translate:var(--space-4) 0} } /* A card is one link target, so the keyboard gets the same treatment as the pointer. */ .eco .eco-card:focus-within{ translate:0 -8px; background:rgba(var(--rgb-white),.14); box-shadow:0 24px 60px rgba(var(--rgb-void),.55); } .eco-card:focus-within .eco-card__media img{scale:1.05} .eco-card.is-in .eco-card__media img{transform:none} @media (prefers-reduced-motion:reduce){ .eco .reveal,.eco .reveal.is-in{transform:none;transition:none} .eco-card__media img,.eco-card.is-in .eco-card__media img{transform:none;transition:none} .eco .eco-card,.eco .eco-card:hover,.eco .eco-card:focus-within{translate:none;transition:none} .eco-card:hover .eco-card__media img,.eco-card:focus-within .eco-card__media img{scale:1} } /* ============================================================ TARGET SECTOR Sticky intro on the left; numbered glass cards on the right, each with a checklist and an image. ============================================================ */ .sector__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-60, 60px)} @media (max-width:767px){ .sector__layout{gap:24px} } /* No align-items:start here. A sticky element travels inside its containing block, and with the column shrunk to its own content there is nowhere to travel - the intro would scroll away with the page. Letting the column stretch to the row gives it the full height of the card list to stay fixed against. */ @media (min-width:1024px){ .sector__layout{grid-template-columns:542px minmax(0,1fr)} } .sector__intro{display:flex;flex-direction:column;gap:var(--space-16)} /* Figma node 196:806 - this section's eyebrow is pink/14px/22px, not the shared .eyebrow component's crimson/12px/20px default. */ .sector__intro .eyebrow{font-size:14px;line-height:22px;color:#FF4A8A} .sector__intro .eyebrow::before{background:#FF4A8A} @media (min-width:1024px){ .sector__sticky{position:sticky;top:calc(var(--header-offset) + var(--space-40))} } .sector__heading{font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px} .sector__text{font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text)} .sector__list{display:flex;flex-direction:column;gap:var(--space-40)} @media (max-width:767px){ .sector__list{gap:20px} } .sector-card{ display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40); /* The glass tint over the page's own black rather than straight onto it. It renders identically at rest, but the card is opaque - a 10% white card cannot hide the one stacked behind it. */ background:linear-gradient(var(--c-surface-glass-2), var(--c-surface-glass-2)), var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-card); padding:var(--space-16); } /* ------------------------------------------------------------ The stack. Each card comes to rest a little lower than the one before, so the cards already read stay visible as an edge behind the current one. Sticky does all of it - with no JavaScript the cards still pile up correctly, and the script only adds the recede. The recede rides on `scale` and `translate`, the standalone properties, because the entrance reveal already owns `transform` on these cards; the two compose rather than overwrite. Below 1024 the layout is a single column and the cards simply stack in flow. ------------------------------------------------------------ */ @media (min-width:1024px){ .sector-card{ position:sticky; top:calc(var(--header-offset) + var(--space-40) + var(--i, 0) * 14px); scale:calc(1 - var(--cover, 0) * 0.05); translate:0 calc(var(--cover, 0) * -10px); } /* Dimmed by an overlay rather than a filter: it composites, and a filter on a sticky element creates a containing block that would break the sticking. */ .sector-card::after{ content:""; position:absolute;inset:0; border-radius:inherit; background:var(--c-bg); opacity:calc(var(--cover, 0) * 0.55); pointer-events:none; } } @media (prefers-reduced-motion:reduce){ .sector-card{position:static;scale:1;translate:none} .sector-card::after{opacity:0} } @media (min-width:768px){ .sector-card{grid-template-columns:329px minmax(0,1fr)} } /* Hover uses border-color only, deliberately - .sector-card already owns `scale` and `translate` for the JS-driven sticky recede (sector-stack.js), and those would fight a transform-based hover. Same convention as .sol-card:hover elsewhere on the site. */ .sector-card{transition:border-color var(--dur-base) var(--ease-out)} @media (hover:hover){ .sector-card:hover{border-color:var(--c-border-strong)} } .sector-card__body{display:flex;flex-direction:column;gap:var(--space-40)} @media (max-width:767px){ .sector-card__body{gap:24px} } .sector-card__head{display:flex;flex-direction:column;gap:var(--space-8);color:var(--c-text-soft)} .sector-card__index{ font-family:var(--font-display);font-size:var(--fs-12);font-weight:var(--weight-regular); line-height:22px;letter-spacing:2px;text-transform:uppercase; } .sector-card__title{ font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:var(--weight-light); line-height:30px;letter-spacing:0.24px; } @media (max-width:767px){ .sector-card__title{font-size:20px;line-height:28px} } .sector-card__title b{font-weight:var(--weight-medium);display:block} .sector-card__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px} .sector-card__list{display:flex;flex-direction:column;gap:var(--space-8)} .sector-card__list li{ font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px;color:var(--c-text-soft); } .sector-card__list li + li{border-top:1px solid var(--c-border-mid);padding-top:var(--space-8)} .sector-card__media{border-radius:var(--r-md);overflow:hidden;min-height:240px;background:var(--c-bg-alt)} .sector-card__media img{width:100%;height:100%;object-fit:cover} /* ============================================================ FOUNDER Framed portrait with the name overlaid; copy and a pull quote. ============================================================ */ .founder{padding-block:var(--section-pad-lg)} @media (max-width:767px){ .founder{padding-block:0} } /* Figma node 196:871 - this section's eyebrow is pink/14px/22px, not the shared .eyebrow component's crimson/12px/20px default. */ .founder__body .eyebrow{font-size:14px;line-height:22px;color:#FF4A8A} .founder__body .eyebrow::before{background:#FF4A8A} .founder__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-80)} @media (max-width:767px){ .founder__layout{gap:24px} } /* Figma sets the two columns to items-start; the copy is centred against the plate here instead, which reads better now that the plate is a fixed 610 x 780 and the copy is a good deal shorter than it. */ @media (min-width:1024px){ .founder__layout{grid-template-columns:610px minmax(0,1fr);align-items:center} } /* Tablet has no room for a fixed 610px plate beside the copy - it left the text column squeezed to a sliver and the heading wrapping five lines deep. An even split instead. */ @media (min-width:1024px) and (max-width:1279px){ .founder__layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px} } /* The plate is one finished picture - frame, backdrop and name are all part of the file - so nothing is drawn around it. Its own transparent margin carries the shadow, which is why it is not clipped or given a radius here. */ .founder__figure{margin:0} .founder__figure img{display:block;width:100%;height:auto} .founder__body{display:flex;flex-direction:column;gap:var(--space-16)} .founder__heading{font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.4px} /* Figma node 196:871 - 40px/50px at desktop, not the shared --fs-h2 token's 48px ceiling (same fix as .xzone__heading above - mobile/tablet already match the fluid ramp, only the desktop plateau was wrong). */ @media (min-width:1024px){ .founder__heading{font-size:40px;line-height:50px} } .founder__body p{font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text)} .founder__quote{ /* Figma node 196:871 - #FF4A8A, not the site's usual crimson rule colour. */ border-left:6px solid #FF4A8A; padding-left:var(--space-24); margin:var(--space-8) 0 0; } .founder__quote p{ font-family:var(--font-body);font-style:italic;font-weight:var(--weight-medium); font-size:var(--fs-body);line-height:24px;color:var(--c-text);max-width:478px; } /* ============================================================ TESTIMONIAL An oversized quotation mark over a centred statement. ============================================================ */ .testimonial{padding-block:var(--section-pad-lg)} @media (max-width:767px){ .testimonial{padding-block:0} } @media (min-width:768px) and (max-width:1279px){ .xzone{margin-top:40px} } .fquote{display:flex;flex-direction:column;align-items:center;margin:0;text-align:center} .fquote__mark{ font-family:var(--font-quote);font-style:italic;font-weight:var(--weight-light); /* Carried from the design. The self-hosted Fraunces subset does not actually ship these axes - setting WONK changes nothing measurable here - so the slanted double-slash comes from the straight quote character in the italic, not from the axis. Kept because it is what the design specifies and a fuller Fraunces build would honour it. */ font-variation-settings:'SOFT' 0, 'WONK' 1; font-size:clamp(var(--fs-80), 12.5vw, var(--fs-180)); /* 12.5vw reaches the design's 180 at 1440 */ line-height:1;color:var(--c-crimson); margin-bottom:-0.36em; } .fquote__text{ font-family:var(--font-heading);font-weight:var(--weight-extralight); font-size:clamp(var(--fs-20), 2.4vw, var(--fs-34)); line-height:1.47;letter-spacing:2px;color:var(--c-text); max-width:1072px;margin:0; } .fquote__attr{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);margin-top:var(--space-24)} .fquote__name{ font-family:var(--font-body);font-size:var(--fs-18);font-weight:var(--weight-semibold); line-height:26px;letter-spacing:1px;color:var(--c-text); } .fquote__rule{width:32px;height:1px;background:var(--c-crimson);margin-block:8px 4px} .fquote__role{ font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px; letter-spacing:2px;text-transform:uppercase;color:var(--c-text); } /* ============================================================ EXPERIENCE ZONE Copy and a spec list on the left, a picture on the right. ============================================================ */ .xzone{padding-block:var(--section-pad-lg)} @media (max-width:767px){ .xzone{padding-top:48px;padding-bottom:0} } .xzone__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40)} @media (max-width:767px){ .xzone__layout{gap:24px} } /* Two equal columns, 60px gap - matches Figma's own spacing between the copy and the photo. Previously relied on "the air beside the copy is just the text not filling its half" (gap:0) above 1280px, which only held for shorter heading copy - any heading close to filling its column crowds straight into the image with no visible gap at all. A real gap at every desktop width is the only version that isn't content-length-dependent. */ @media (min-width:1024px){ .xzone__layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:stretch} } /* The design stacks these at 358: head 174, then 24, the specs 64, then 40, the button 56. A flat gap between all three would put 40 where the design has 24. */ .xzone__body{display:flex;flex-direction:column;gap:var(--space-40);align-items:flex-start} @media (max-width:767px){ .xzone__body{gap:20px} } .xzone__group{display:flex;flex-direction:column;gap:var(--space-24);align-items:flex-start;width:100%} @media (max-width:767px){ .xzone__group{gap:20px} } .xzone__head{display:flex;flex-direction:column;gap:var(--space-16)} /* Figma node 196:895 - this section's eyebrow is pink/14px/22px, not the shared .eyebrow component's crimson/12px/20px default. */ .xzone__head .eyebrow{font-size:14px;line-height:22px;color:#FF4A8A} .xzone__head .eyebrow::before{background:#FF4A8A} .xzone__heading{font-size:var(--fs-h2);font-weight:var(--weight-medium);line-height:1.25;letter-spacing:0.4px;text-transform:capitalize} /* Figma node 196:895/196:871 - this heading is 40px/50px at desktop, not the shared --fs-h2 token's 48px ceiling (that token is correct for every other h2 on the page, just not this one). Mobile/tablet already match the fluid --fs-h2 ramp below this breakpoint - only the desktop plateau was wrong. */ @media (min-width:1024px){ .xzone__heading{font-size:40px;line-height:50px} } /* The design breaks this passage by hand, which holds it to roughly a 490 measure inside its 640 column. Set as a max-width so it still reflows rather than carrying hard breaks. */ .xzone__text{ font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text); max-width:515px; } .xzone__specs{display:flex;flex-direction:column;gap:var(--space-16);width:100%;max-width:357px} .xzone__spec{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)} .xzone__spec span{font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text-soft)} /* The picture fills its half and stretches to the copy's height. The design holds it at 134.08% of that height, pulled up a quarter, which crops to the middle of the frame - reproduced with cover and a matching object-position rather than by stretching the photograph, whose own 4:3 does not match the box. */ /* The picture takes its height from the copy beside it, as the design does - 640 x 358 there. The image is taken out of flow to make that possible: left in flow, a 4:3 photograph in a 640 column lays out 480 tall and drives the whole row, which is what it was doing. Stacked below 1024 there is no copy to match, so the design's own box shape stands in. */ .xzone__media{ position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--c-bg-alt); aspect-ratio:640 / 358; } @media (min-width:1024px){ .xzone__media{aspect-ratio:auto} } @media (max-width:767px){ .xzone__media{order:-1} } .xzone__media img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; object-position:50% 56%; } /* ============================================================ FAQ ============================================================ */ .faq{padding-block:var(--section-pad-lg)} @media (max-width:767px){ .faq{padding-block:48px} } .faq__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center} /* Figma node 196:915 - this section's eyebrow is pink/14px/22px, not the shared .eyebrow component's crimson/12px/20px default. */ .faq__head .eyebrow{font-size:14px;line-height:22px;color:#FF4A8A} .faq__head .eyebrow::before{background:#FF4A8A} .faq__heading{font-size:var(--fs-h2);font-weight:var(--weight-medium);line-height:1.25;letter-spacing:0.48px;text-transform:capitalize;max-width:808px} .faq__list{ display:flex;flex-direction:column;gap:var(--space-24); width:100%;max-width:860px;margin:var(--space-40) auto 0; border-top:0; } @media (max-width:767px){ .faq__list{gap:16px;margin-top:24px} } .faq__item{border-bottom:1px solid var(--c-border-mid);padding:var(--space-12) var(--space-8);overflow:hidden} .faq__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-24); text-align:left;padding:0; font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-light); line-height:24px;letter-spacing:normal;color:var(--c-text); transition:color var(--dur-base) var(--ease-out); } .faq__q:hover{color:var(--c-accent)} .faq__icon{flex:none;width:16px;height:16px;position:relative;margin-top:0} .faq__icon::before,.faq__icon::after{ content:"";position:absolute;top:50%;left:50%; /* Crimson, as the exported plus and minus are - drawn here rather than shipped as two images so the one can rotate into the other. */ width:14px;height:1.5px;background:var(--c-crimson); transform:translate(-50%,-50%); transition:transform var(--dur-base) var(--ease-out); } .faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)} .faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)} .faq__a{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)} .faq__a > div{min-height:0} .faq__item.is-open .faq__a{grid-template-rows:1fr} .faq__a-inner{ padding-top:var(--space-12); font-family:var(--font-body);font-weight:var(--weight-regular); font-size:var(--fs-caption);line-height:22px;color:var(--c-text);max-width:695px; } @media (prefers-reduced-motion:reduce){ .faq__a{transition:none} } /* ============================================================ FINAL CTA - full-bleed picture behind centred copy ============================================================ */ .final-cta{ position:relative; overflow:hidden; isolation:isolate; text-align:center; padding-block:var(--section-pad-lg); } @media (max-width:767px){ .final-cta{padding-block:48px} } .final-cta__bg{position:absolute;inset:0;z-index:-1;overflow:hidden} /* Figma's own crop (node 196:959, 1440x474.59 frame - almost exactly this section's real rendered size), reproduced literally: left/top/width/height percentages, not object-fit:cover, since the design's own crop is not a plain centred cover. */ .final-cta__bg img{ position:absolute; left:-3.79%;top:-6.18%; width:107.54%;height:181.06%; max-width:none; } /* The wash the design lays over the picture. */ .final-cta__bg::after{content:"";position:absolute;inset:0;background:rgba(var(--rgb-void),.2)} .final-cta__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-24)} @media (max-width:767px){ .final-cta__inner{gap:20px} } .final-cta__intro{display:flex;flex-direction:column;gap:var(--space-16);align-items:center;width:100%} .final-cta__eyebrow{ display:flex;align-items:center;justify-content:center;gap:14px;margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .final-cta__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .final-cta__heading{margin:0;text-transform:capitalize;font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px} .final-cta__line{display:block;font-family:var(--font-heading);color:var(--c-text);letter-spacing:0.4px} .final-cta__line--l1{font-weight:var(--weight-extralight)} .final-cta__line--l2{font-weight:var(--weight-medium)} .final-cta__text{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:16px;line-height:24px;color:var(--c-text);max-width:502px} .final-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-16);justify-content:center} /* ============================================================ PAGE HERO - inner pages ============================================================ */ .page-hero{ position:relative; padding-top:calc(var(--header-offset) + var(--space-64)); padding-bottom:var(--space-64); border-bottom:1px solid var(--c-border); background: radial-gradient(90% 100% at 20% 0%, rgba(var(--rgb-navy),.52) 0%, rgba(var(--rgb-void),0) 70%), var(--c-bg); overflow:hidden; } @media (max-width:767px){ .page-hero{padding-top:130px} } @media (min-width:1024px){ .page-hero{padding-top:calc(var(--header-offset) + var(--space-96));padding-bottom:var(--space-96)} } .page-hero__inner{max-width:64ch} .page-hero__title{margin-top:var(--space-8)} .page-hero__lede{margin-top:var(--space-24)} .page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-32)} .page-hero .breadcrumbs{margin-bottom:var(--space-24)} /* Contact page hero - matches Figma node 239:173 exactly: flat black (no navy wash), 60px vertical pad, 42/50 Medium heading, 14/22 Montserrat lede capped at 465px. Also applied to Terms & Conditions (46), Privacy Policy (3) and Shipping & Returns (45) at explicit request, so every legal/utility page reads as one consistent banner rather than each carrying its own wash. Other inner pages (About, Solutions etc) still keep the wash. */ body.page-id-42 .page-hero, body.page-id-45 .page-hero, body.page-id-46 .page-hero, body.page-id-3 .page-hero, body.page-id-8 .page-hero{ background:var(--c-bg); border-bottom:none; padding-top:calc(var(--header-offset) + var(--space-60)); padding-bottom:var(--space-60); } body.page-id-42 .page-hero__inner, body.page-id-45 .page-hero__inner, body.page-id-46 .page-hero__inner, body.page-id-3 .page-hero__inner, body.page-id-8 .page-hero__inner{max-width:none} body.page-id-42 .page-hero .breadcrumbs, body.page-id-45 .page-hero .breadcrumbs, body.page-id-46 .page-hero .breadcrumbs, body.page-id-3 .page-hero .breadcrumbs, body.page-id-8 .page-hero .breadcrumbs{ font-family:var(--font-heading);font-weight:var(--weight-extralight); font-size:var(--fs-caption);letter-spacing:2px;line-height:22px; margin-bottom:var(--space-32); } body.page-id-42 .page-hero__title, body.page-id-45 .page-hero__title, body.page-id-46 .page-hero__title, body.page-id-3 .page-hero__title, body.page-id-8 .page-hero__title{ font-weight:var(--weight-medium); font-size:clamp(28px, 2.16vw + 1.24rem, 42px); line-height:1.2;letter-spacing:0.42px; text-transform:capitalize; margin-top:0; } body.page-id-42 .page-hero__lede, body.page-id-45 .page-hero__lede, body.page-id-46 .page-hero__lede, body.page-id-3 .page-hero__lede, body.page-id-8 .page-hero__lede{ font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px; max-width:465px;margin-top:var(--space-8);color:var(--c-text); } /* These pages set their own padding-top above (body.page-id-X .page-hero) - it outranks the plain .page-hero mobile rule further up, so the flat mobile value needs repeating here at the same specificity. */ @media (max-width:767px){ body.page-id-42 .page-hero, body.page-id-45 .page-hero, body.page-id-46 .page-hero, body.page-id-3 .page-hero, body.page-id-8 .page-hero{padding-top:150px;padding-bottom:32px} body.page-id-42 .page-hero__lede, body.page-id-45 .page-hero__lede, body.page-id-46 .page-hero__lede, body.page-id-3 .page-hero__lede, body.page-id-8 .page-hero__lede{font-size:16px;line-height:24px;margin-top:16px} } /* Terms & Conditions (46) / Privacy Policy (3) / Shipping & Returns (45) - the banner heading now matches Contact's (42) exactly, at explicit request - these three no longer get a smaller title override here (the shared body.page-id-42/45/46/3 .page-hero__title rule above covers all four already). Body-copy sizing below is untouched. */ /* The headings inside the rich-text body itself ("Safe operation", "Orders" etc) run one notch smaller than the banner title - 24px floor, 28px ceiling. */ body.page-id-45 .rte h2, body.page-id-45 .rte h3, body.page-id-45 .rte h4, body.page-id-46 .rte h2, body.page-id-46 .rte h3, body.page-id-46 .rte h4, body.page-id-3 .rte h2, body.page-id-3 .rte h3, body.page-id-3 .rte h4{ font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:clamp(24px, 2.5vw + 0.3rem, 28px); line-height:1.3;letter-spacing:normal;text-transform:none; } body.page-id-45 .rte, body.page-id-46 .rte, body.page-id-3 .rte{ font-family:var(--font-body);font-weight:var(--weight-regular); font-size:16px;line-height:var(--lh-loose); } /* Same three pages - explicit spacing: 20px above every heading and 16px above every paragraph on mobile, 32px / 20px on desktop (1024px+). The first heading right under the hero never gets that gap. */ body.page-id-45 .rte h2, body.page-id-45 .rte h3, body.page-id-45 .rte h4, body.page-id-46 .rte h2, body.page-id-46 .rte h3, body.page-id-46 .rte h4, body.page-id-3 .rte h2, body.page-id-3 .rte h3, body.page-id-3 .rte h4{ margin-top:20px; } body.page-id-45 .rte p, body.page-id-46 .rte p, body.page-id-3 .rte p{ margin-top:16px; } body.page-id-45 .rte h2:first-child, body.page-id-45 .rte h3:first-child, body.page-id-45 .rte h4:first-child, body.page-id-46 .rte h2:first-child, body.page-id-46 .rte h3:first-child, body.page-id-46 .rte h4:first-child, body.page-id-3 .rte h2:first-child, body.page-id-3 .rte h3:first-child, body.page-id-3 .rte h4:first-child{ margin-top:0; } @media (min-width:1024px){ body.page-id-45 .rte h2, body.page-id-45 .rte h3, body.page-id-45 .rte h4, body.page-id-46 .rte h2, body.page-id-46 .rte h3, body.page-id-46 .rte h4, body.page-id-3 .rte h2, body.page-id-3 .rte h3, body.page-id-3 .rte h4{ margin-top:32px; } body.page-id-45 .rte p, body.page-id-46 .rte p, body.page-id-3 .rte p{ margin-top:20px; } } /* Same three pages, mobile only - every heading level inside the body copy pinned to one flat size/line-height (not the clamp() above, which is a desktop-down fluid scale that still lands too big at phone widths), and paragraphs pulled in from 16px to a tighter 12px gap. Declared after both rules above so it wins the tie at this width. */ @media (max-width:767px){ body.page-id-45 .rte h1, body.page-id-45 .rte h2, body.page-id-45 .rte h3, body.page-id-45 .rte h4, body.page-id-45 .rte h5, body.page-id-45 .rte h6, body.page-id-46 .rte h1, body.page-id-46 .rte h2, body.page-id-46 .rte h3, body.page-id-46 .rte h4, body.page-id-46 .rte h5, body.page-id-46 .rte h6, body.page-id-3 .rte h1, body.page-id-3 .rte h2, body.page-id-3 .rte h3, body.page-id-3 .rte h4, body.page-id-3 .rte h5, body.page-id-3 .rte h6{ font-size:20px;line-height:28px; } body.page-id-45 .rte p, body.page-id-46 .rte p, body.page-id-3 .rte p{ margin-top:12px; } body.page-id-45 .rte-section, body.page-id-46 .rte-section, body.page-id-3 .rte-section{ padding-top:32px; } } /* Same three pages - any real link in the body copy (mailto:/tel: included) gets the breadcrumb's own smooth hover: same colour, same transition, instead of the sitewide .rte a's instant swap. */ body.page-id-45 .rte a, body.page-id-46 .rte a, body.page-id-3 .rte a{ transition:color var(--dur-base) var(--ease-out); } body.page-id-45 .rte a:hover, body.page-id-46 .rte a:hover, body.page-id-3 .rte a:hover{ color:var(--c-accent); } /* Same three pages - a hairline between the banner and the content below, so the two read as separate blocks instead of running together. Contact (42) keeps its own borderless hero, untouched. */ body.page-id-45 .page-hero, body.page-id-46 .page-hero, body.page-id-3 .page-hero{ border-bottom:1px solid var(--c-border); } /* My Account hero - matches Figma node 326:26319 exactly: flat black (no navy wash) like Contact's, but fully centred (breadcrumb/H1/lede), lede capped at 550px. Scoped to this page only. */ body.page-id-9 .page-hero{ background:var(--c-bg); border-bottom:none; padding-top:calc(var(--header-offset) + var(--space-60)); padding-bottom:var(--space-60); } body.page-id-9 .page-hero__inner{ max-width:none; display:flex;flex-direction:column;align-items:center;text-align:center; } body.page-id-9 .page-hero .breadcrumbs{ font-family:var(--font-heading);font-weight:var(--weight-extralight); font-size:var(--fs-caption);letter-spacing:2px;line-height:22px; margin-bottom:var(--space-32); } body.page-id-9 .page-hero__title{ font-weight:var(--weight-medium); font-size:clamp(28px, 2.16vw + 1.24rem, 42px); line-height:1.2;letter-spacing:0.42px; text-transform:capitalize; margin-top:0; } body.page-id-9 .page-hero__lede{ font-family:var(--font-body);font-weight:var(--weight-regular); font-size:16px;line-height:24px; max-width:550px;margin-top:var(--space-8);color:var(--c-text); } /* Declared after the dedicated block above (same specificity, later wins) - the shared 4-page mobile block further up the file lost this exact tie before it was split out. */ @media (max-width:767px){ body.page-id-9 .page-hero{padding-top:150px;padding-bottom:32px} body.page-id-9 .page-hero__lede{margin-top:16px} } /* ============================================================ STORY HERO - About page. Full-bleed photo, 40% wash, centred content. Figma node 213:6722 - literal values throughout, including the one-off eyebrow pink (#FF4A8A) that doesn't match any existing accent token. ============================================================ */ .story-hero{ position:relative;overflow:hidden;isolation:isolate; display:flex;align-items:center;justify-content:center; min-height:420px; padding:calc(var(--header-offset) + var(--space-80)) 0 var(--space-80); } @media (max-width:767px){ .story-hero{padding-bottom:48px} } /* Scaled up on the wrapper, not the image itself, so mission-stats.js can translateY the image for a parallax drift without ever exposing an edge - GSAP owns the img's own transform, so the buffer has to live one level up. */ .story-hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;transform:scale(1.15)} .story-hero__bg img{width:100%;height:100%;object-fit:cover;display:block} .story-hero__scrim{position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.4)} .story-hero__inner{ display:flex;flex-direction:column;align-items:center;gap:var(--space-16); text-align:center; } .story-hero__eyebrow{ display:flex;align-items:center;justify-content:center;gap:14px; margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .story-hero__dot{width:6px;height:6px;border-radius:3px;background:var(--c-crimson);flex:none} .story-hero__heading{ margin:0;text-transform:capitalize; font-family:var(--font-heading); /* Fluid 28px (mobile) -> 48px (1024px+ viewport) - H1 banner floor pinned site-wide, ceiling unchanged. */ font-size:clamp(28px, 3.06vw + 1.04rem, var(--fs-48)); line-height:1.25;letter-spacing:0.16px; color:var(--c-text); } .story-hero__line{display:block} .story-hero__line--light{font-weight:var(--weight-extralight)} .story-hero__line--medium{font-weight:var(--weight-medium)} /* Header is flat solid black site-wide now (see SITE HEADER in components.css) - no page-specific override needed here any more. */ /* ============================================================ MISSION + STATS - About page. Eyebrow/heading/lede row, then a 3-column stat row with vertical dividers. Figma node 213:6728 - literal values throughout (the 1240px inner measure, the 516px lede, the 25.6px stat-label leading all come straight from the design). ============================================================ */ .mission-stats__inner{max-width:1240px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-40)} .mission-stats__top{ display:flex;flex-direction:column;gap:var(--space-32); align-items:flex-start; } @media (min-width:1024px){ .mission-stats__top{flex-direction:row;gap:80px;align-items:center;justify-content:center} } .mission-stats__copy{display:flex;flex-direction:column;gap:var(--space-16);flex:1 0 0;min-width:0} .mission-stats__eyebrow{ display:flex;align-items:center;gap:14px;margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .mission-stats__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .mission-stats__heading{ margin:0;text-transform:capitalize; font-family:var(--font-heading); /* H2 section heading - 24px mobile floor pinned site-wide, ceiling unchanged. */ font-size:clamp(24px, 3.85vw + 0.54rem, var(--fs-48)); line-height:1.25;letter-spacing:0.16px; color:var(--c-text); } /* Figma's own markup allows this heading to wrap (word-break:break-word, no nowrap - unlike the story hero above it), but a plain wrap can strand a single orphan word ("Generation") alone on its own line in the narrower part of the row layout. text-wrap:balance lets the browser choose better break points instead, without touching whether it wraps at all. */ .mission-stats__line{text-wrap:balance} .mission-stats__line{display:block} .mission-stats__line--light{font-weight:var(--weight-extralight)} .mission-stats__line--medium{font-weight:var(--weight-medium)} /* A forced single-line here (tried above, since reverted) pushed the text straight past its own column into the lede instead of wrapping - the real column, once the lede's fixed 516px and the row gap come out of the 1240px frame, is narrower than "Building India's Next Generation" at 48px actually needs. Letting it wrap (text-wrap:balance above already picks a sane break point) keeps it inside the layout; matching Figma's flat two-line count everywhere isn't worth overflowing the section for. */ .mission-stats__lede{ margin:0;flex:none; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:var(--fs-body);line-height:24px;color:var(--c-text); max-width:516px; } .mission-stats__row{ display:flex;flex-direction:column; } @media (min-width:768px){ .mission-stats__row{flex-direction:row;align-items:flex-start;justify-content:center} } .mission-stat{ flex:1 0 0;min-width:0; display:flex;flex-direction:column;align-items:center;gap:11px; padding:15px 0 16px; text-align:center; } @media (min-width:768px){ .mission-stat + .mission-stat{border-left:1px solid rgba(255,255,255,.3)} } .mission-stat__value{ margin:0; font-family:var(--font-display);font-weight:var(--weight-medium); font-size:var(--fs-48);line-height:52px; font-variant-numeric:tabular-nums; /* digits hold their width while counting, so nothing jumps */ } .mission-stat__num{color:var(--c-text)} /* The counting span gets a reserved width (set inline, sized to its final digit count) so the centred line doesn't re-centre itself every frame as "0" grows into "60" - that re-centring, not the count itself, was the jump the eye actually caught. */ .mission-stat__num.js-counter{display:inline-block;text-align:center} .mission-stat__suffix{color:var(--c-crimson)} .mission-stat__label{ margin:0; font-family:var(--font-label);font-weight:var(--weight-regular); font-size:var(--fs-body);line-height:25.6px;color:var(--c-text); } @media (max-width:767px){ .mission-stats__top{gap:16px} .mission-stats__inner{gap:20px} .mission-stats__row{gap:20px} .mission-stat{padding:0} .mission-stat__value{font-size:28px;line-height:36px} .section.origin-story, .section.our-purpose, .section.biji-advantage, .section.books-authored{padding-top:0} } /* ============================================================ ORIGIN STORY - About page. Wide event photo + copy. Figma node 213:6753 - literal values throughout, including the heading's two different sizes/tracking on its two lines (48px/40px, not a shared size). The photo's width-reveal + zoom-out lives in origin-story.js; this only sets the geometry it animates within. ============================================================ */ .origin-story__layout{ display:flex;flex-direction:column;gap:var(--space-40);align-items:center; } @media (min-width:1024px){ .origin-story__layout{flex-direction:row;gap:80px;align-items:center} } @media (max-width:767px){ .origin-story__layout{gap:24px} } .origin-story__media{ width:100%;height:320px;border-radius:8px;overflow:hidden;position:relative; } @media (min-width:1024px){ .origin-story__media{flex:1 0 0;height:463px} } .origin-story__media-inner{position:absolute;inset:0;overflow:hidden} /* .origin-story__zoom is what the scroll-reveal scales (1.22 -> 1, see about-motion.js) - the inside is left free for its own hover transform, so the two never fight over the same inline style. */ .origin-story__zoom{width:100%;height:100%;will-change:transform} .origin-story__zoom img{ width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block; transition:transform var(--dur-slower) var(--ease-out); } .origin-story__media:hover .origin-story__zoom img{transform:scale(1.06)} /* The reveal is a solid panel sliding away on transform, not a clip-path animated every scroll frame - clip-path repaints the whole box on each update, and scrubbing that at 60fps is what made the page feel like it was hanging on the first scroll. translateX only ever composites. */ .origin-story__curtain{ position:absolute;inset:0;background:var(--c-bg); transform:translateX(0%);will-change:transform; } @media (prefers-reduced-motion:reduce){ .origin-story__curtain{display:none} .origin-story__zoom{transform:none !important} .origin-story__media:hover .origin-story__zoom img{transform:none} } .origin-story__body{ display:flex;flex-direction:column;gap:var(--space-16);width:100%; } @media (min-width:1024px){ .origin-story__body{flex:1 0 0;min-width:0} } .origin-story__eyebrow{ display:flex;align-items:center;gap:14px;margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .origin-story__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .origin-story__heading{margin:0;text-transform:capitalize;font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px} .origin-story__line{display:block;font-family:var(--font-heading);color:var(--c-text)} /* Fluid, same as every other section heading site-wide (--fs-h1/--fs-h3 - 28px floor, no stepped breakpoints) instead of a hand-rolled tablet/mobile split - one rule that scales continuously rather than three fixed sizes. */ .origin-story__line--l1{font-weight:var(--weight-extralight)} .origin-story__line--l2{font-weight:var(--weight-medium);letter-spacing:0.4px} .origin-story__p{ margin:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:var(--fs-body);line-height:24px;color:var(--c-text); } /* ============================================================ OUR PURPOSE - About page. Mirror of origin-story: copy left, photo right, plus a Vision/Mission pair under the lede. Figma node 213:6762 - literal values throughout (29px gap between Vision and Mission, 20px/30px titles - both off the 4pt grid, kept exact). ============================================================ */ .our-purpose__layout{ display:flex;flex-direction:column;gap:var(--space-40);align-items:center; } @media (min-width:1024px){ .our-purpose__layout{flex-direction:row;gap:80px;align-items:center} } @media (max-width:767px){ .our-purpose__layout{gap:24px} .our-purpose__media{order:-1} } .our-purpose__body{ display:flex;flex-direction:column;gap:var(--space-40);width:100%; } @media (min-width:1024px){ .our-purpose__body{flex:1 0 0;min-width:0} } @media (max-width:767px){ .our-purpose__body{gap:24px} } .our-purpose__intro{display:flex;flex-direction:column;gap:var(--space-16)} .our-purpose__eyebrow{ display:flex;align-items:center;gap:14px;margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .our-purpose__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .our-purpose__heading{margin:0;text-transform:capitalize;font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px} .our-purpose__line{display:block;font-family:var(--font-heading);color:var(--c-text)} .our-purpose__line--l1{font-weight:var(--weight-extralight)} .our-purpose__line--l2{font-weight:var(--weight-medium);letter-spacing:0.4px} .our-purpose__p{ margin:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:var(--fs-body);line-height:24px;color:var(--c-text); } .our-purpose__vm{ display:flex;flex-direction:column;gap:var(--space-24);width:100%; } @media (min-width:640px){ .our-purpose__vm{flex-direction:row;gap:29px} } @media (max-width:767px){ .our-purpose__vm{gap:20px} } .our-purpose__vm-item{display:flex;flex-direction:column;gap:var(--space-8);flex:1 0 0;min-width:0} .our-purpose__vm-title{ margin:0;text-transform:capitalize; font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:20px;line-height:30px;color:var(--c-text); } .our-purpose__vm-text{ margin:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:var(--fs-body);line-height:24px;color:var(--c-text); } .our-purpose__media{width:100%;height:320px;border-radius:8px;overflow:hidden;position:relative} @media (min-width:1024px){ .our-purpose__media{flex:1 0 0;height:463px} } .our-purpose__media-inner{position:absolute;inset:0;overflow:hidden} /* .our-purpose__zoom is what the scroll-reveal scales (1.22 -> 1, see about-motion.js) - the inside is left free for its own hover transform, so the two never fight over the same inline style. */ .our-purpose__zoom{width:100%;height:100%;will-change:transform} .our-purpose__zoom img{ width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block; transition:transform var(--dur-slower) var(--ease-out); } .our-purpose__media:hover .our-purpose__zoom img{transform:scale(1.06)} .our-purpose__curtain{position:absolute;inset:0;background:var(--c-bg);transform:translateX(0%);will-change:transform} @media (prefers-reduced-motion:reduce){ .our-purpose__curtain{display:none} .our-purpose__zoom{transform:none !important} .our-purpose__media:hover .our-purpose__zoom img{transform:none} } /* ============================================================ THE BIJI ADVANTAGE - About page. Centred intro, 4-card icon grid, on the deep-black ecosystem band (--c-bg-deep, #05070B - the same token the brand-statement section already uses further down the site). Figma node 213:6778 - literal values throughout, including the 808px capped heading measure and both lines sharing 48px (unlike the origin-story/our-purpose headings, whose second line drops to 40px). ============================================================ */ .biji-advantage.section{background:var(--c-bg-deep)} .biji-advantage__intro{ display:flex;flex-direction:column;gap:var(--space-16);align-items:center; text-align:center; max-width:808px;margin-inline:auto; } .biji-advantage__eyebrow{ display:flex;align-items:center;justify-content:center;gap:14px;margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .biji-advantage__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .biji-advantage__heading{margin:0;text-transform:capitalize;font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px} .biji-advantage__line{display:block;font-family:var(--font-heading);color:var(--c-text);letter-spacing:0.16px} .biji-advantage__line--l1{font-weight:var(--weight-extralight)} .biji-advantage__line--l2{font-weight:var(--weight-medium)} .biji-advantage__grid{ display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32); margin-top:var(--space-32); } @media (min-width:640px){ .biji-advantage__grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-60)} } @media (min-width:1024px){ .biji-advantage__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px} } @media (max-width:767px){ .biji-advantage__grid{gap:20px;margin-top:24px} } .advantage-card{ display:flex;flex-direction:column;align-items:center;gap:var(--space-16); text-align:center;border-radius:16px;padding:var(--space-16); background:rgba(255,255,255,.04); transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out); } .advantage-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.04)} @media (max-width:767px){ .advantage-card, .advantage-card:hover{transform:none} } .advantage-card__badge{ display:inline-flex;align-items:center;justify-content:center; width:40px;padding:10px 0;border-radius:8px;background:var(--c-crimson); transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-out); } .advantage-card:hover .advantage-card__badge{ transform:scale(1.12) rotate(-6deg); box-shadow:0 8px 20px -6px rgba(var(--rgb-crimson),.65); } .advantage-card__icon{width:20px;height:20px;display:block} .advantage-card__title{ margin:0;text-transform:none; font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:24px;line-height:30px;letter-spacing:0.24px;color:var(--c-text); } @media (max-width:767px){ .advantage-card__title{font-size:20px;line-height:28px} } .advantage-card__text{ margin:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px;color:var(--c-text-muted); } /* ============================================================ FEATURE PRODUCT PARTNERSHIP - About page. Figma node 213:6811 - literal values throughout. Plain fade-in only: no curtain reveal, no hover zoom on the logo lockup (about-motion.js). ============================================================ */ .feature-product__layout{ display:flex;flex-direction:column;gap:var(--space-40);align-items:center; } @media (min-width:1024px){ .feature-product__layout{flex-direction:row;gap:80px;align-items:center} } @media (max-width:767px){ .section.feature-product{padding-top:0} .feature-product__layout{gap:24px} .feature-product__media{order:-1} } .feature-product__body{ display:flex;flex-direction:column;gap:var(--space-16);width:100%; } @media (min-width:1024px){ .feature-product__body{flex:1 0 0;min-width:0} } .feature-product__eyebrow{ display:flex;align-items:center;gap:14px;margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .feature-product__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .feature-product__heading{margin:0;text-transform:capitalize;font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px} .feature-product__line{display:block;font-family:var(--font-heading);color:var(--c-text)} .feature-product__line--l1{font-weight:var(--weight-extralight)} .feature-product__line--l2{font-weight:var(--weight-medium);letter-spacing:0.4px} .feature-product__p{ margin:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:var(--fs-body);line-height:24px;color:var(--c-text); } .feature-product__media{ width:100%;aspect-ratio:600/368;max-height:368px;position:relative; } @media (min-width:1024px){ .feature-product__media{flex:1 0 0} } .feature-product__media img{ width:100%;height:100%;object-fit:contain;display:block;border-radius:8px; } /* ============================================================ BOOKS AUTHORED - About page. Figma node 213:6821 - literal values throughout. Plain fade-up stagger only, no image hover (about-motion.js). Card CTA reuses the site's .btn component. ============================================================ */ .books-authored.section{background:var(--c-bg-deep)} .books-authored__intro{ display:flex;flex-direction:column;gap:var(--space-16);align-items:center; text-align:center; max-width:808px;margin-inline:auto; } .books-authored__eyebrow{ display:flex;align-items:center;justify-content:center;gap:14px;margin:0; font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .books-authored__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .books-authored__heading{margin:0;text-transform:capitalize;font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px} .books-authored__line{display:block;font-family:var(--font-heading);color:var(--c-text);letter-spacing:0.16px} .books-authored__line--l1{font-weight:var(--weight-extralight)} .books-authored__line--l2{font-weight:var(--weight-medium)} .books-authored__grid{ display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40); margin-top:var(--space-60); } @media (min-width:640px){ .books-authored__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .books-authored__grid{margin-top:32px} } .book-card{ display:flex;flex-direction:column;align-items:center;gap:var(--space-40); padding-bottom:var(--space-40); background:rgba(255,255,255,.1);border-radius:16px;overflow:hidden; } @media (max-width:767px){ .book-card{gap:20px;padding-bottom:24px} } .book-card__media{width:100%;aspect-ratio:620/500} .book-card__media img{width:100%;height:100%;object-fit:cover;display:block} .book-card__body{ display:flex;flex-direction:column;gap:var(--space-16);align-items:flex-start; width:100%;padding-inline:var(--space-40); } @media (max-width:767px){ .book-card__body{padding-inline:20px} } .book-card__title{ margin:0; font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:24px;line-height:30px;letter-spacing:0.24px;color:var(--c-text); } @media (max-width:767px){ .book-card__title{font-size:20px;line-height:28px} } .book-card__text{ margin:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px;color:var(--c-text); } .book-card__cta{font-weight:var(--weight-medium)} /* ============================================================ TRUST BAR ============================================================ */ .trust__grid{ display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32); } @media (min-width:640px){ .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){ .trust__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-40)} } /* ============================================================ SPLIT FEATURE - copy + media ============================================================ */ .split__copy .lede{margin-top:var(--space-24)} .split__copy .checklist{margin-top:var(--space-32)} .split__copy .split__actions{margin-top:var(--space-32);display:flex;flex-wrap:wrap;gap:var(--space-12)} .viz{ position:relative; aspect-ratio:4/3; background: radial-gradient(80% 70% at 50% 50%, rgba(var(--rgb-navy),.44) 0%, rgba(var(--rgb-void),0) 72%), var(--c-bg-alt); border:1px solid var(--c-border); border-radius:var(--r-hairline); overflow:hidden; display:grid;place-items:center; } .viz svg{width:100%;height:100%} .viz__net{ position:absolute;inset:0; background-image: linear-gradient(to right, rgba(var(--rgb-accent),.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--rgb-accent),.07) 1px, transparent 1px); background-size:var(--space-24) var(--space-24); } .viz__tag{ position:absolute; font-family:var(--font-mono);font-size:var(--fs-caption); letter-spacing:var(--tracking-wide);text-transform:uppercase; color:var(--c-text-dim); background:rgba(var(--rgb-void),.72); border:1px solid var(--c-border); padding:var(--space-4) var(--space-8); } .viz__tag--tl{top:var(--space-16);left:var(--space-16)} .viz__tag--br{bottom:var(--space-16);right:var(--space-16)} /* ============================================================ PRODUCT FEATURE - BeeZeta1 ============================================================ */ .product-feature{ background: radial-gradient(70% 60% at 50% 0%, rgba(var(--rgb-navy),.44) 0%, rgba(var(--rgb-void),0) 68%), var(--c-bg); border-block:1px solid var(--c-border); } .product-feature__head{max-width:56ch;margin-bottom:var(--space-48)} @media (min-width:1024px){ .product-feature__head{margin-bottom:var(--space-64)} } .product-feature__layout{ display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48);align-items:center; } @media (min-width:1024px){ .product-feature__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-64)} } .product-stage{ position:relative;aspect-ratio:1; display:grid;place-items:center; border:1px solid var(--c-border); background:radial-gradient(60% 60% at 50% 50%, rgba(var(--rgb-navy),.52) 0%, rgba(var(--rgb-void),0) 74%), var(--c-bg-alt); } .product-stage img,.product-stage svg{width:86%;height:auto} .product-stage__float{animation:float 7s var(--ease-inout) infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--space-12) * -1))}} @media (prefers-reduced-motion:reduce){ .product-stage__float{animation:none} } .product-stage__corner{position:absolute;width:var(--space-24);height:var(--space-24);border:1px solid var(--c-accent);opacity:.5} .product-stage__corner--tl{top:var(--space-12);left:var(--space-12);border-right:0;border-bottom:0} .product-stage__corner--tr{top:var(--space-12);right:var(--space-12);border-left:0;border-bottom:0} .product-stage__corner--bl{bottom:var(--space-12);left:var(--space-12);border-right:0;border-top:0} .product-stage__corner--br{bottom:var(--space-12);right:var(--space-12);border-left:0;border-top:0} .spec-chip{ position:absolute; display:flex;flex-direction:column;gap:var(--space-4); border-left:1px solid var(--c-accent-high); padding-left:var(--space-8); font-family:var(--font-mono);font-size:var(--fs-caption); letter-spacing:var(--tracking-wide);text-transform:uppercase; color:var(--c-text-dim); } .spec-chip b{font-family:var(--font-heading);font-size:var(--fs-body);color:var(--c-text);letter-spacing:var(--tracking-normal);text-transform:none} .spec-chip--tl{top:var(--space-32);left:var(--space-32)} .spec-chip--br{bottom:var(--space-32);right:var(--space-32);border-left:0;border-right:1px solid var(--c-accent-high);padding-left:0;padding-right:var(--space-8);text-align:right;align-items:flex-end} @media (max-width:639px){ .spec-chip{display:none} } .feature-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-16)} @media (min-width:640px){ .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24)} } .product-feature__cta{margin-top:var(--space-32)} /* ============================================================ SOLUTIONS ============================================================ */ .solutions{background:var(--c-bg-alt);border-block:1px solid var(--c-border)} .solutions__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin-top:var(--space-48)} @media (min-width:1024px){ .solutions__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32);margin-top:var(--space-64)} } .sol-card{ border:1px solid var(--c-border); border-radius:var(--r-hairline); background:var(--c-bg); overflow:hidden; display:flex;flex-direction:column; transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); } .sol-card:hover{border-color:var(--c-border-strong);transform:translateY(-4px)} .sol-card__visual{ position:relative;aspect-ratio:16/9; background:radial-gradient(70% 80% at 50% 40%, rgba(var(--rgb-navy),.48) 0%, rgba(var(--rgb-void),0) 72%), var(--c-bg-alt); display:grid;place-items:center;overflow:hidden; } .sol-card__visual img{width:100%;height:100%;object-fit:cover} .sol-card__badge{ position:absolute;top:var(--space-16);left:var(--space-16); font-family:var(--font-mono);font-size:var(--fs-caption); letter-spacing:var(--tracking-wide);text-transform:uppercase; background:rgba(var(--rgb-void),.80);border:1px solid var(--c-border); color:var(--c-text-muted); padding:var(--space-4) var(--space-8); } .sol-card__body{padding:var(--space-24);display:flex;flex-direction:column;flex:1} @media (min-width:1024px){ .sol-card__body{padding:var(--space-32)} } .sol-card__body p{color:var(--c-text-muted);margin-top:var(--space-12);line-height:var(--lh-loose)} .sol-card__body .tlink{margin-top:auto;padding-top:var(--space-24)} /* ============================================================ WHY / DIFFERENTIATOR ============================================================ */ .why__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin-top:var(--space-64)} @media (min-width:768px){ .why__grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* Bordered pillar cards, each led by a red icon badge. */ .why-item{ border:1px solid var(--c-border); border-radius:var(--r-card); padding:var(--space-32); transition:border-color var(--dur-base) var(--ease-out); } .why-item:hover{border-color:var(--c-border-strong)} .why-item__title{ margin-top:var(--space-32); font-family:var(--font-body); font-size:var(--fs-lead); font-weight:var(--weight-semibold); line-height:1.3; letter-spacing:normal; } .why-item p{color:var(--c-text-muted);margin-top:var(--space-12);font-size:var(--fs-caption);line-height:1.6} /* ============================================================ EXPERIENCE CENTRE ============================================================ */ .experience{background:var(--c-bg-alt);border-block:1px solid var(--c-border)} .experience__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48);align-items:center} @media (min-width:1024px){ .experience__inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-80)} } .experience__for{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-32)} .experience__actions{margin-top:var(--space-32)} .loc-card{ border:1px solid var(--c-border-strong); background:var(--c-bg); padding:var(--space-32); } .loc-card__k{ font-family:var(--font-mono);font-size:var(--fs-caption); letter-spacing:var(--tracking-widest);text-transform:uppercase; color:var(--c-accent);margin-bottom:var(--space-16); } .loc-card address{ font-family:var(--font-heading);font-size:var(--fs-h5); font-weight:var(--weight-medium);line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); } .loc-card__meta{margin-top:var(--space-32);display:grid;gap:var(--space-16)} .loc-card__meta > div{ display:flex;justify-content:space-between;gap:var(--space-16); border-top:1px solid var(--c-border);padding-top:var(--space-12); } .loc-card__meta span{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-dim);text-transform:uppercase;letter-spacing:var(--tracking-wide)} .loc-card__meta b{font-size:var(--fs-body);font-weight:var(--weight-medium);text-align:right} /* ============================================================ TESTIMONIALS ============================================================ */ .quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24)} @media (min-width:1024px){ .quotes{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-32)} } .quote{ border:1px solid var(--c-border); background:var(--c-surface); padding:var(--space-32); display:flex;flex-direction:column; } @media (min-width:1024px){ .quote{padding:var(--space-40)} } .quote__mark{ font-family:var(--font-heading);font-size:var(--fs-h1); line-height:var(--lh-tight);color:var(--c-accent);opacity:.4; margin-bottom:var(--space-8); } .quote blockquote{ margin:0;font-family:var(--font-heading); font-size:var(--fs-h4);font-weight:var(--weight-medium); line-height:var(--lh-snug);letter-spacing:var(--tracking-tight); } .quote--sub blockquote{font-size:var(--fs-h5)} .quote__translate{color:var(--c-text-muted);margin-top:var(--space-16);font-size:var(--fs-body);line-height:var(--lh-loose)} .quote__attr{margin-top:auto;padding-top:var(--space-32)} .quote__attr b{display:block;font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-semibold)} .quote__attr span{display:block;margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-dim)} /* ============================================================ BLOG POST GRID - Blogs index. Figma node 228:1227 - literal values throughout: 3-up, 40px column gap, 32px row gap, translucent card, 620x500 cover, plain title + a small underlined "Read the blog" link (no category tag, no excerpt, no reading time - the card is exactly these three pieces and nothing else). ============================================================ */ .hub__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);margin-top:var(--space-48)} @media (min-width:640px){ .hub__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 3-up on tablet (768px+), 4-up once there's real desktop width (1280px+) to actually fill - 3 wide cards were leaving a wide desktop screen looking under-filled/empty at the row's full width. */ @media (min-width:768px){ .hub__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:32px;margin-top:var(--space-64)} } /* Blog hero (node 228:1217, pb-60) and the grid (node 228:1227, pt-60) are two independent Figma sections, each keeping its own padding - 120px combined. The grid's own 32px gap in that node is the ROW gap between its two card rows (already row-gap:32px above), not a second gap before the grid - so hub__grid's usual margin-top would double up on the section's own pt-60 here and needs to drop out. */ .blog-hero + .section{padding-top:0} .blog-hero + .section .hub__grid{margin-top:0} .post-card{ border-radius:16px;overflow:hidden; background:rgba(255,255,255,.1); display:flex;flex-direction:column;align-items:center;height:100%; padding-bottom:var(--space-40); transition:transform var(--dur-base) var(--ease-out); } .post-card:hover{transform:translateY(-4px)} .post-card__thumb{ width:100%;aspect-ratio:620/500;max-height:320px;overflow:hidden; background:radial-gradient(70% 80% at 50% 50%, rgba(var(--rgb-navy),.44) 0%, rgba(var(--rgb-void),0) 72%), var(--c-bg-alt); display:grid;place-items:center; } /* Some imported photos are smaller than the registered bpp-card crop size, so WordPress serves them at their own (differently-proportioned) native size instead of upscaling to it - without a hard height + overflow:hidden here, that one image's real height leaks into the card itself instead of staying clipped, throwing every card in the row out of alignment. object-fit:cover still fills the box without stretching/squeezing. */ .post-card__thumb img{width:100%;height:100%;object-fit:cover;display:block} .post-card__body{ display:flex;flex-direction:column;gap:var(--space-16);align-items:flex-start; width:100%;padding-inline:var(--space-40);margin-top:var(--space-24); } .post-card__title{ margin:0;width:100%;min-height:48px; font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:16px;line-height:24px;letter-spacing:0.16px;color:var(--c-text); /* Always reserves 2 lines' worth of height (short titles keep "Read the blog" aligned across a row) and clips anything longer with an ellipsis rather than pushing the card taller. */ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;text-overflow:ellipsis; } .post-card__link{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-heading);font-weight:var(--weight-regular); font-size:12px;line-height:22px;letter-spacing:2px;text-transform:uppercase; color:var(--c-text);text-decoration:underline; transition:color var(--dur-base) var(--ease-out); } .post-card__link:hover{color:var(--c-crimson)} /* bpp_arrow() - the same real right-pointing arrow every .btn uses, not the down-pointing icon-blog-arrow.svg rotated -90deg. That rotated-icon approach measured out moving diagonally on hover (CSS composes rotate/translate on one element in a fixed order no matter which you set "second"), where a naturally right-pointing icon just needs a plain translateX - proven correct already everywhere .btn uses it. */ .post-card__link svg{width:12px;height:12px;flex:none;color:currentColor;transition:transform var(--dur-base) var(--ease-spring)} .post-card__link:hover svg{transform:translateX(3px)} /* Mobile only (<=767px) - tighter card padding/spacing than desktop, and the title's min-height reserve dropped (single column here, so titles never need to stay aligned across a row - normal height is fine). Placed after the base rules above so it wins the tie; desktop/tablet untouched. */ @media (max-width:767px){ .hub__grid{gap:20px} .post-card{padding-bottom:24px} .post-card__body{padding-inline:16px;margin-top:20px} .post-card__title{min-height:auto} } /* Tablet only (768-1279px) - tighter grid gaps and card padding than the 40px/32px/24px desktop numbers; mobile and desktop (1280px+) untouched. Placed after the base .post-card/.post-card__body rules above so it wins at equal specificity (a media query adds no specificity of its own - the later rule in the file wins a tie, regardless of which is conditional). */ @media (min-width:768px) and (max-width:1279px){ .hub__grid{column-gap:24px;row-gap:24px} .post-card{padding-bottom:24px} .post-card__body{padding-inline:24px;margin-top:20px} .hub__grid + .pagination{margin-top:40px} } /* ============================================================ CTA BAND - compact mid-page conversion strip ============================================================ */ .cta-band{ border:1px solid var(--c-border-strong); background:linear-gradient(120deg, rgba(var(--rgb-navy),.60) 0%, rgba(var(--rgb-void),.20) 60%), var(--c-bg-alt); padding:var(--space-32); display:grid;gap:var(--space-24);align-items:center; } @media (min-width:1024px){ .cta-band{grid-template-columns:minmax(0,1fr) auto;padding:var(--space-48);gap:var(--space-40)} } .cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--space-12)} /* ============================================================ PROCESS / STEPS ============================================================ */ .steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);margin-top:var(--space-48)} @media (min-width:768px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-40);margin-top:var(--space-64)} } .step{position:relative;border-top:1px solid var(--c-border);padding-top:var(--space-24)} .step__num{ font-family:var(--font-mono);font-size:var(--fs-caption); letter-spacing:var(--tracking-widest);color:var(--c-accent); margin-bottom:var(--space-16); } .step p{color:var(--c-text-muted);margin-top:var(--space-12);line-height:var(--lh-loose)} /* ============================================================ CONTACT Three direct channels, then one unified enquiry card. Both surfaces share the same glass-on-black treatment as the rest of the dark UI. ============================================================ */ .contact-cards{ display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24); margin-bottom:var(--space-32); } @media (min-width:768px){ .contact-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32)} } .contact-card{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:34px; /* Figma's own value - off the 4pt grid, kept exact to match the reference */ padding:var(--space-40); min-width:0; background:var(--c-surface-glass); border-radius:var(--r-card); position:relative;isolation:isolate;overflow:hidden; transition:transform var(--dur-base) var(--ease-spring),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); } /* Tablet only (768-1279px) - declared after the two unconditional rules above so it actually wins the cascade tie against them, rather than losing to whichever is later in the file; mobile and desktop untouched. */ @media (min-width:768px) and (max-width:1279px){ .contact-cards{gap:28px} .contact-card{padding:28px} } @media (max-width:767px){ .contact-cards{gap:20px;margin-bottom:28px} } .contact-card::before{ content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(120% 80% at 50% 0%, rgba(var(--rgb-crimson),.16) 0%, rgba(var(--rgb-crimson),0) 70%); opacity:0;transition:opacity var(--dur-slow) var(--ease-out); } .contact-card:hover{ transform:translateY(-6px); background:var(--c-surface-glass-2); box-shadow:var(--shadow-crimson); } .contact-card:hover::before{opacity:1} /* The source export is a solid-white icon; mask it so it can take the brand crimson exactly, rather than approximating the colour with a filter. */ .contact-card__icon{ display:block;flex:none; width:34px;height:34px; /* Figma's own value */ background-color:var(--c-crimson); -webkit-mask-image:var(--icon-mask);mask-image:var(--icon-mask); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; transition:transform var(--dur-slow) var(--ease-spring); } .contact-card:hover .contact-card__icon{transform:scale(1.15) rotate(-6deg)} .contact-card__group{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);width:100%;min-width:0} .contact-card__body{display:flex;flex-direction:column;gap:var(--space-8);width:100%;min-width:0} .contact-card__label{ font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:var(--fs-h4);line-height:30px;letter-spacing:0.24px;text-transform:capitalize; color:var(--c-text); } /* An email address is one long unbreakable word - without permission to wrap it just kept running past the card's own edge and got silently clipped there (overflow:hidden on .contact-card, for the hover glow). min-width:0 up the flex chain above lets the card actually shrink to the grid track instead of the address forcing it wide; this is what lets the now-too-narrow text wrap onto a second line instead of overflowing. */ .contact-card__value{ font-family:var(--font-body);font-weight:var(--weight-regular); font-size:var(--fs-body);line-height:24px;color:var(--c-text); overflow-wrap:break-word;word-break:break-word; } .contact-card__cta{ display:inline-flex;align-items:center;gap:6px; /* Figma's own value */ font-family:var(--font-heading);font-size:var(--fs-12);font-weight:var(--weight-regular); line-height:22px;letter-spacing:2px;text-transform:uppercase;color:var(--c-text); text-decoration:underline;text-underline-offset:3px; } .contact-card__cta-icon{display:inline-flex;transition:transform var(--dur-base) var(--ease-out)} .contact-card__cta-icon svg{width:12px;height:9px} .contact-card:hover .contact-card__cta-icon{transform:translateX(var(--space-4))} @media (prefers-reduced-motion:reduce){ .contact-card{transition:none} .contact-card:hover{transform:none;box-shadow:none} .contact-card::before{display:none} } .start-conversation{ background:var(--c-surface-glass); border-radius:var(--r-card); padding:var(--space-24) var(--space-20); display:flex;flex-direction:column;gap:var(--space-40); transition:box-shadow var(--dur-slow) var(--ease-out); } @media (min-width:768px){ .start-conversation{padding:var(--space-40)} } .start-conversation__head{display:flex;flex-direction:column;gap:var(--space-8)} .start-conversation__head h2{ font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:var(--fs-h4);line-height:30px;letter-spacing:0.24px;text-transform:capitalize; color:var(--c-text); } .start-conversation__head .lede{ font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px;color:var(--c-text-muted);max-width:465px; } /* Field grid: Name full-width, Phone + Email 24px apart, Comment full-width - each 40px from the next, labels 18px/26px sat 18px above the underline. The form itself is rendered by Contact Form 7 - .start-conversation__form is a plain wrapper, so the flex layout lives on CF7's own .wpcf7-form. */ .start-conversation__form .wpcf7-form{display:flex;flex-direction:column;gap:var(--space-40)} @media (max-width:767px){ .start-conversation__form .wpcf7-form{gap:28px} } .start-conversation__form .form__grid{gap:var(--space-24)} .start-conversation__form .field{gap:18px} .start-conversation__form .wpcf7-form-control-wrap{display:block;width:100%} .start-conversation__form .wpcf7-not-valid-tip{ display:block;margin-top:var(--space-4); font-size:var(--fs-caption);color:var(--c-error); } .start-conversation__form .field__control.wpcf7-not-valid{border-color:var(--c-error)} /* Bumped to match ".wpcf7 form .wpcf7-response-output"'s own shape (class + form element + class) - CF7 ships that rule in its own plugin stylesheet with a real 2em top margin, which otherwise wins over a plain two-class selector regardless of our CSS loading after it. */ .start-conversation__form form .wpcf7-response-output{ /* The form's own gap:40px between fields applies here too since CF7 appends this as a plain sibling - pull it back down to a minimal 16px above the notice instead of the full field-to-field gap. */ margin:calc(var(--space-16) - var(--space-40)) 0 0; padding:var(--space-12) var(--space-16);border-radius:var(--r-hairline); font-size:14px;line-height:22px; } .start-conversation__form .wpcf7-form.sent .wpcf7-response-output{border:1px solid var(--c-success);color:var(--c-text)} .start-conversation__form .wpcf7-form.failed .wpcf7-response-output, .start-conversation__form .wpcf7-form.aborted .wpcf7-response-output, .start-conversation__form .wpcf7-form.spam .wpcf7-response-output{border:1px solid var(--c-error);color:var(--c-text)} .start-conversation__form .wpcf7-form.invalid .wpcf7-response-output{border:1px solid var(--c-warning);color:var(--c-text)} .start-conversation__form .wpcf7-spinner{margin:0 0 0 var(--space-12)} .start-conversation__submit[disabled]{opacity:.6;cursor:progress} .start-conversation__form .field__label{ font-family:var(--font-heading);font-size:18px;line-height:26px; letter-spacing:normal;text-transform:none;font-weight:var(--weight-regular);color:var(--c-text); } .start-conversation__form .field__label .req{color:var(--c-text)} /* Figma draws a bare underline, nothing boxed - so the focus state has to be the underline itself doing the work, not the site's usual bounding-box outline (which reads as a stray rectangle floating over transparent fields). outline:none here is intentional and paired with a clearly visible replacement: the line brightens, thickens and glows. */ .start-conversation__form .field__control, .start-conversation__form .field__control:focus, .start-conversation__form .field__control:focus-visible{ outline:none;box-shadow:none; } .start-conversation__form .field__control{ background:transparent;border:none;border-bottom:1px solid #aaa; border-radius:0;padding:0 0 var(--space-8);min-height:var(--space-40); transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); } .start-conversation__form textarea.field__control{min-height:95px} .start-conversation__form .field__control:hover{border-color:rgba(255,255,255,.55)} .start-conversation__form .field__control:focus, .start-conversation__form .field__control:focus-visible{ border-bottom:2px solid var(--c-crimson); padding-bottom:calc(var(--space-8) - 1px); /* the extra 1px of border-width, so nothing shifts */ } .start-conversation__submit{align-self:flex-start} /* Chrome forces a light autofill background otherwise, breaking the dark transparent field the instant a browser-saved name or email lands in it. */ .start-conversation__form .field__control:-webkit-autofill, .start-conversation__form .field__control:-webkit-autofill:hover, .start-conversation__form .field__control:-webkit-autofill:focus{ -webkit-text-fill-color:var(--c-text); -webkit-box-shadow:0 0 0 1000px transparent inset; transition:background-color 9999s ease-in-out 0s; } /* This page's hero already closes with its own 60px bottom pad (see the scoped page-hero rules above) - the cards row and this card sit flush under it, matching the Figma frame's own stacking, and this section supplies only the trailing 80px before the footer. */ body.page-id-42 .contact.section{padding-top:0;padding-bottom:var(--space-80)} @media (max-width:767px){ body.page-id-42 .contact.section{padding-bottom:48px} } @media (prefers-reduced-motion:reduce){ .contact-card,.contact-card__icon,.contact-card__cta-icon, .start-conversation,.start-conversation__form .field__control{transition:none} .contact-card:hover{transform:none} .contact-card:hover .contact-card__icon{transform:none} } /* ============================================================ LOGO WALL ============================================================ */ .logo-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24);align-items:center} @media (min-width:640px){ .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:1024px){ .logo-wall{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-40)} } .logo-wall__item{ display:grid;place-items:center; min-height:var(--space-64); filter:grayscale(1);opacity:.6; transition:opacity var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out); } .logo-wall__item:hover{opacity:1;filter:grayscale(0)} .logo-wall__item img{max-height:var(--space-48);width:auto;object-fit:contain} /* ============================================================ SINGLE POST - Figma nodes 426:147 (hero) and 426:155 (content + sidebar) ============================================================ */ .post-hero{ background:var(--c-bg); padding-top:calc(var(--header-offset) + 60px);padding-bottom:0; } .post-hero__inner{display:flex;flex-direction:column;gap:var(--space-32)} .post-hero__inner .breadcrumbs{ font-family:var(--font-heading);font-weight:var(--weight-extralight); font-size:14px;line-height:22px;letter-spacing:2px;color:var(--c-text);gap:8px; } .post-hero__inner .breadcrumbs a{color:var(--c-text)} .post-hero__inner .breadcrumbs a:hover{color:var(--c-crimson)} .post-hero__inner .breadcrumbs span[aria-current]{color:var(--c-text)} .post-hero__intro{display:flex;flex-direction:column;gap:var(--space-8)} @media (max-width:767px){ .post-hero__intro{gap:12px} } .post-hero__title{ margin:0;text-transform:capitalize;max-width:925px; font-family:var(--font-heading);font-weight:var(--weight-medium); /* H1 banner - fluid 28px (mobile) -> 42px (desktop), floor pinned site-wide; was a static 42px with no mobile scaling at all before. */ font-size:clamp(28px, 2.16vw + 1.24rem, 42px); line-height:1.2;letter-spacing:0.42px;color:var(--c-text); } .post-hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-32);align-items:center} .post-hero__meta-item{display:flex;align-items:center;gap:var(--space-8)} .post-hero__meta-item img{display:block;flex:none} .post-hero__meta-item span{ font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px;color:var(--c-text); } .post-layout{ display:flex;flex-direction:column;gap:var(--space-32); padding-top:60px;padding-bottom:80px; } @media (max-width:767px){ .post-layout{padding-top:32px;padding-bottom:48px} } @media (min-width:1024px){ .post-layout{flex-direction:row;align-items:flex-start} } .post-main{display:flex;flex-direction:column;gap:var(--space-32);min-width:0} @media (max-width:767px){ .post-main{gap:24px} } /* The 927px fixed width below is a real desktop number (927 + the 40px gap + the sidebar's own ~300px matches the 1280px container exactly) - it never fit inside a narrower 1024-1279px container, where the row switch already turns on: the sidebar was getting squeezed down toward nothing, overflowing under the fixed main column instead of sitting beside it. That range gets a flexible 2:1 split against the sidebar's flex:1 instead, real desktop keeps the exact Figma width. */ @media (min-width:1024px) and (max-width:1279px){ .post-main{flex:2 1 0} } @media (min-width:1280px){ .post-main{flex:0 0 927px;max-width:927px} } .post-content{color:var(--c-text);font-family:var(--font-body);font-size:16px;line-height:24px} .post-content > * + *{margin-top:var(--space-16)} .post-content img{width:100%;height:480px;object-fit:cover;border-radius:var(--r-card);display:block} .post-content h2,.post-content h3,.post-content h4{color:var(--c-text);margin-top:var(--space-32)} .post-share{ display:flex;flex-direction:column;gap:var(--space-16); padding-top:var(--space-24);border-top:0.5px solid #FF4A8A; } .post-share__row{display:flex;align-items:center;gap:var(--space-24)} .post-share__label{ font-family:var(--font-body);font-weight:var(--weight-regular); font-size:18px;line-height:30px;color:var(--c-text); } /* Real share links, via the Sassy Social Share plugin's [Sassy_Social_Share] shortcode rather than hand-rolled URLs - it ships its own colour-badge circles inline (style="background-color:...;border-radius:999px"), which this strips back to Figma's plain 24px white icon row. Its "More" button (a system share-sheet popup) has no equivalent in the design, so it's hidden rather than left as an unstyled extra icon. */ .post-share__icons{display:flex;align-items:center} .post-share__icons .heateor_sss_sharing_ul{display:flex;align-items:center;gap:var(--space-16)} .post-share__icons a{ display:block !important;width:24px !important;height:24px !important; opacity:1;transition:opacity var(--dur-base) var(--ease-out); } .post-share__icons a:hover{opacity:.7} .post-share__icons .heateor_sss_svg{ background:none !important;width:24px !important;height:24px !important; border-radius:0 !important;padding:0 !important; } .post-share__icons .heateor_sss_svg svg{border-radius:0 !important} .post-share__icons .heateor_sss_svg svg path{fill:var(--c-text) !important} .post-share__icons .heateor_sss_more, .post-share__icons .heateorSssClear{display:none !important} .post-sidebar{display:flex;flex-direction:column;gap:var(--space-24);min-width:0} @media (max-width:767px){ .post-sidebar{gap:20px} } /* Sticky once the layout goes row (1024px+, same breakpoint .shop-filters uses on the shop page) - clears the fixed header the same way. */ @media (min-width:1024px){ .post-sidebar{flex:1 1 0;position:sticky;top:calc(var(--header-offset) + var(--space-24));align-self:start} } .post-sidebar__heading{ margin:0;text-transform:capitalize; font-family:var(--font-heading);font-weight:var(--weight-light); font-size:34px;line-height:40px;letter-spacing:0.34px;color:var(--c-text); } @media (max-width:767px){ .post-sidebar__heading{font-size:28px;line-height:36px} } /* Figma node 426:318 - a row: the image sits on the left, the title on the right, equal 1:1 split. align-items:center (not stretch) so the 87px image keeps its own height instead of being pulled up to match the title's - a 2-3 line wrapped title runs taller than 87px, and stretching the image to match forced object-fit:cover to zoom into a box far off the source photo's own ratio. overflow:hidden + the card's own border-radius clips the image's left two corners to match; nothing needs its own radius. */ .post-related{ display:flex;align-items:center; background:var(--c-surface-glass);border-radius:var(--r-card);overflow:hidden; } .post-related__media{flex:1 1 0;position:relative;height:87px;background:var(--c-bg-alt)} .post-related__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .post-related__body{flex:1 1 0;min-width:0;padding:var(--space-16);display:flex;align-items:center} .post-related__title{ margin:0; font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:16px;line-height:24px;letter-spacing:0.12px;color:var(--c-text); } .post-related a.post-related__title{text-decoration:none} .post-related a.post-related__title:hover{color:var(--c-accent)} /* ============================================================ SPEC SHOWCASE Large image cards, the name and spec row set over the picture. ============================================================ */ .spec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32)} @media (min-width:1024px){ .spec-grid{gap:var(--space-48)} } .spec-card{ position:relative; display:grid;place-items:center; min-height:var(--space-160); aspect-ratio:16/11; border-radius:var(--r-card); overflow:hidden; background:var(--c-bg-alt); isolation:isolate; } @media (min-width:768px){ .spec-card{aspect-ratio:16/9} } .spec-card__media{position:absolute;inset:0;z-index:-1;display:grid;place-items:center} .spec-card__media img{width:100%;height:100%;object-fit:cover} .spec-card__media svg{width:min(60%, 320px);height:auto;opacity:.5} .spec-card::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg, rgba(var(--rgb-void),.30) 0%, rgba(var(--rgb-void),.72) 100%); } .spec-card__body{text-align:center;padding:var(--space-32)} .spec-card__title{ font-family:var(--font-heading); font-size:clamp(var(--fs-24), 3.4vw + 0.4rem, var(--fs-48)); font-weight:var(--weight-bold); line-height:1.2; letter-spacing:0.02em; } .spec-card__specs{ display:flex;flex-wrap:wrap;justify-content:center; gap:var(--space-16) var(--space-32); margin-top:var(--space-24); } .spec-card__specs li{ display:inline-flex;align-items:center;gap:var(--space-8); font-family:var(--font-body); font-size:var(--fs-body); color:var(--c-text); } .spec-card__specs svg{width:var(--icon-16);height:var(--icon-16);color:var(--c-text-muted);flex:none} /* ============================================================ PROMO DUO ============================================================ */ .promo__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-24); } @media (min-width:768px){ .promo__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-32)} } .promo-card{ position:relative; display:flex;flex-direction:column;justify-content:flex-end; min-height:var(--space-160); padding:var(--space-32); border:1px solid var(--c-border-strong); border-radius:var(--r-lg); overflow:hidden; isolation:isolate; background: linear-gradient(140deg, rgba(var(--rgb-navy),.62) 0%, rgba(var(--rgb-void),.28) 62%), var(--c-bg-alt); } @media (min-width:1024px){ .promo-card{padding:var(--space-48);min-height:var(--space-160)} } .promo-card--crimson{ background: linear-gradient(140deg, rgba(var(--rgb-crimson),.58) 0%, rgba(var(--rgb-void),.30) 62%), var(--c-bg-alt); } .promo-card__media{position:absolute;inset:0;z-index:-1;opacity:.34} .promo-card__media img{width:100%;height:100%;object-fit:cover} .promo-card__title{font-size:var(--fs-h3);letter-spacing:var(--tracking-tight)} .promo-card__text{margin-top:var(--space-12);color:var(--c-text-muted);line-height:var(--lh-loose);max-width:44ch} .promo-card__cta{margin-top:var(--space-32)} /* ============================================================ TEAM ============================================================ */ .team__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-24); } @media (min-width:640px){ .team__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){ .team__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32)} } .team-card{ border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-surface); overflow:hidden; transition:border-color var(--dur-base) var(--ease-out); } .team-card:hover{border-color:var(--c-border-strong)} .team-card__photo{ aspect-ratio:4/5; display:grid;place-items:center; background: radial-gradient(70% 60% at 50% 34%, rgba(var(--rgb-navy),.48) 0%, rgba(var(--rgb-void),0) 72%), var(--c-bg-alt); overflow:hidden; } .team-card__photo img{width:100%;height:100%;object-fit:cover} .team-card__initials{ font-family:var(--font-heading); font-size:var(--fs-display); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); color:transparent; -webkit-text-stroke:1px rgba(var(--rgb-accent),.44); } .team-card__body{padding:var(--space-24)} .team-card__name{font-size:var(--fs-h6);letter-spacing:var(--tracking-tight)} .team-card__role{ margin-top:var(--space-4); font-family:var(--font-mono);font-size:var(--fs-caption); letter-spacing:var(--tracking-wide);text-transform:uppercase; color:var(--c-accent); } .team-card__bio{margin-top:var(--space-16);color:var(--c-text-muted);font-size:var(--fs-body);line-height:var(--lh-loose)} /* ============================================================ GALLERY ============================================================ */ .gallery__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-16); } @media (min-width:1024px){ .gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-24)} .gallery__item--lead{grid-column:span 2;grid-row:span 2} } .gallery__item{ margin:0; border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1; background:var(--c-bg-alt); } .gallery__item--lead{aspect-ratio:1} .gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)} .gallery__item:hover img{transform:scale(1.04)} @media (prefers-reduced-motion:reduce){ .gallery__item img{transition:none} .gallery__item:hover img{transform:none} } /* ============================================================ FEATURE LIST The heading holds its place on the left while the cards pass on the right. ============================================================ */ .features__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48)} @media (min-width:1024px){ .features__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-80);align-items:start} } @media (min-width:1024px){ .features__sticky{position:sticky;top:calc(var(--header-offset) + var(--space-64))} } .features__list{display:grid;gap:var(--space-32)} @media (min-width:1024px){ .features__list{gap:var(--space-48)} } .feature-card{ position:relative; display:flex;flex-direction:column;justify-content:flex-end; min-height:var(--space-128); aspect-ratio:4/3; padding:var(--space-32); border-radius:var(--r-card); overflow:hidden; isolation:isolate; background:var(--c-bg-alt); } @media (min-width:1024px){ .feature-card{aspect-ratio:9/10;padding:var(--space-40)} } .feature-card__media{position:absolute;inset:0;z-index:-2} .feature-card__media img{width:100%;height:100%;object-fit:cover} .feature-card::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg, rgba(var(--rgb-void),.25) 0%, rgba(var(--rgb-void),.55) 46%, rgba(var(--rgb-void),.92) 100%); } .feature-card__badge{position:absolute;top:var(--space-24);left:var(--space-24);z-index:1} .feature-card__text{margin-top:var(--space-12);color:var(--c-text-muted);font-size:var(--fs-body);line-height:1.6;max-width:44ch} /* ============================================================ BLOG HERO - Blogs index. Figma node 228:1217 - literal values throughout; noticeably tighter than the shared .page-hero (60px band, not the usual --section-pad-lg, and its own breadcrumb/heading sizing). ============================================================ */ .blog-hero.section{ background:var(--c-bg); padding-top:calc(var(--header-offset) + 60px);padding-bottom:60px; } @media (max-width:767px){ .blog-hero.section{padding-top:150px;padding-bottom:32px} } .blog-hero__inner{display:flex;flex-direction:column;gap:var(--space-32)} .blog-hero__inner .breadcrumbs{ font-family:var(--font-heading);font-weight:var(--weight-extralight); font-size:14px;line-height:22px;letter-spacing:2px;color:var(--c-text);gap:8px; } .blog-hero__inner .breadcrumbs a{color:var(--c-text)} .blog-hero__inner .breadcrumbs a:hover{color:var(--c-crimson)} .blog-hero__inner .breadcrumbs span[aria-current]{color:var(--c-text)} .blog-hero__intro{display:flex;flex-direction:column;gap:var(--space-8)} @media (max-width:767px){ .blog-hero__intro{gap:0} } .blog-hero__heading{ margin:0;text-transform:capitalize; font-family:var(--font-heading);font-weight:var(--weight-medium); /* Fluid 32px (mobile) -> 42px (1024px+), same endpoints the old max-width:479px breakpoint pinned, just smoothed in between. */ font-size:clamp(28px, 2.16vw + 1.24rem, 42px); line-height:1.2;letter-spacing:0.42px;color:var(--c-text); } .blog-hero__lede{ margin:0;max-width:437px; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px;color:var(--c-text); } @media (max-width:767px){ .blog-hero__lede{font-size:16px;line-height:24px;margin-top:16px} } /* ============================================================ SHOP HERO - Shop root and every product category (Figma node 213:6496). A full-bleed banner photo under a flat 90% black wash, otherwise identical typography to the blog hero (same eyebrow-less breadcrumb, same 42px heading, same 437px-capped lede). ============================================================ */ .shop-hero{ position:relative;overflow:hidden; padding-top:calc(var(--header-offset) + 80px);padding-bottom:80px; } @media (max-width:767px){ .shop-hero{padding-top:150px;padding-bottom:48px} } .shop-hero__bg{position:absolute;inset:0;z-index:-1} .shop-hero__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.9)} .shop-hero__bg img{width:100%;height:100%;object-fit:cover;display:block} .shop-hero__inner{display:flex;flex-direction:column;gap:var(--space-32)} .shop-hero__inner .breadcrumbs{ font-family:var(--font-heading);font-weight:var(--weight-extralight); font-size:14px;line-height:22px;letter-spacing:2px;color:var(--c-text);gap:8px; } .shop-hero__inner .breadcrumbs a{color:var(--c-text)} .shop-hero__inner .breadcrumbs a:hover{color:var(--c-crimson)} .shop-hero__inner .breadcrumbs span[aria-current]{color:var(--c-text)} .shop-hero__intro{display:flex;flex-direction:column;gap:var(--space-8)} @media (max-width:767px){ .shop-hero__intro{gap:16px} } .shop-hero__heading{ margin:0;text-transform:capitalize; font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:clamp(28px, 2.16vw + 1.24rem, 42px); line-height:1.2;letter-spacing:0.42px;color:var(--c-text); } .shop-hero__lede{ margin:0;max-width:437px; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:16px;line-height:24px;color:var(--c-text); } /* A category description comes back through wpautop already wrapped in its own

(term_description()) - reset that inner tag's own margin rather than fight it. */ .shop-hero__lede p{margin:0} .shop-hero__lede p + p{margin-top:var(--space-8)} /* ============================================================ 404 - "signal lost". A drone-network particle field behind the brand's own hexagon mark (drifting + a slow radar ping), a giant Orbitron digit set, then the same real CTAs/search the old plain version had. ============================================================ */ .error-404{ position:relative;overflow:hidden;isolation:isolate; min-height:100vh; display:flex;align-items:center; padding-top:calc(var(--header-offset) + var(--space-64)); padding-bottom:var(--space-64); background:var(--c-bg); } .error-404__particles{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%} .error-404__glow{ position:absolute;z-index:0;top:50%;left:50%; width:min(900px,140vw);height:min(900px,140vw); transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(var(--rgb-crimson),.16) 0%,rgba(var(--rgb-crimson),0) 65%); pointer-events:none; } .error-404__inner{ position:relative;z-index:1; display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-24); max-width:640px;margin-inline:auto; } .error-404__mark{position:relative;width:96px;height:96px;display:grid;place-items:center;margin-bottom:var(--space-8)} .error-404__logo{ position:relative;width:72px;height:72px;object-fit:contain; animation:error-404-float 4.5s var(--ease-inout) infinite; filter:drop-shadow(0 0 24px rgba(var(--rgb-crimson),.45)); } .error-404__ping{ position:absolute;inset:0;border-radius:var(--r-full); border:1px solid rgba(var(--rgb-crimson),.5); animation:error-404-ping 2.6s var(--ease-out) infinite; } .error-404__ping--2{animation-delay:1.3s} .error-404__digits{ margin:0;display:flex;align-items:center;justify-content:center;gap:var(--space-8); font-family:var(--font-display);font-weight:700; font-size:clamp(var(--fs-64), 14vw, var(--fs-180)); line-height:1;letter-spacing:.02em;color:var(--c-text); text-shadow:0 0 60px rgba(var(--rgb-crimson),.25); } .error-404__digits .is-accent{ color:var(--c-crimson); animation:error-404-flicker 3.4s linear infinite; } .error-404__lede{margin:0;max-width:52ch;color:var(--c-text-muted)} .error-404__actions{display:flex;flex-wrap:wrap;gap:var(--space-16);justify-content:center;margin-top:var(--space-8)} @keyframes error-404-float{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-10px) rotate(-3deg) } } @keyframes error-404-ping{ 0%{ transform:scale(.9); opacity:.55 } 100%{ transform:scale(2.1); opacity:0 } } @keyframes error-404-flicker{ 0%,92%,100%{ opacity:1 } 94%{ opacity:.35 } 96%{ opacity:.9 } 98%{ opacity:.5 } } @media (max-width:479px){ .error-404__actions{flex-direction:column;width:100%} .error-404__actions .btn{width:100%} } @media (prefers-reduced-motion:reduce){ .error-404__logo,.error-404__ping,.error-404__digits .is-accent{animation:none} } /* ============================================================ EXPERIENCE SPLIT - photo + credential rows (Consultation page, Figma node 483:1438). Reuses the shared .split two-up grid (layout.css) - only the copy column's own content is new here. ============================================================ */ .experience-split{background:#000;padding-bottom:0} /* Kept in sync with .split's own tablet/desktop switch (layout.css) - side by side from tablet up, same as the shared rule. */ @media (min-width:768px){ .experience-split .split{grid-template-columns:minmax(0,2fr) minmax(0,3fr)} } /* Figma node 483:1439 - the photo's own crop is 527x560 (~0.94 ratio), independent of however tall the credential list beside it grows. Stretching it to match that column instead (align-items:stretch) forced a much taller crop than the source photo can supply cleanly - a thin, blown-up sliver instead of the framed shot Figma shows. */ .experience-split__media{ position:relative;overflow:hidden;border-radius:8px; aspect-ratio:527/560; } .experience-split__media img{ width:100%;height:100%;object-fit:cover;display:block; transition:scale var(--dur-slow) var(--ease-out); } .experience-split .split__media:hover .experience-split__media img, .experience-split .split__media:focus-within .experience-split__media img{scale:1.05} @media (prefers-reduced-motion:reduce){ .experience-split__media img{transition:none} .experience-split .split__media:hover .experience-split__media img{scale:1} } .experience-split__eyebrow{ display:flex;align-items:center;gap:14px;margin:0 0 var(--space-16); font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .experience-split__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} /* Figma node 483:1444 - both phrases run in the same Extra Light weight, the second just smaller (40px against 48px, ~0.833 of the first) - not the sitewide .h-em light/medium pattern, so this heading gets its own class rather than reusing (and quietly breaking) that one. */ .experience-split__heading{letter-spacing:0.48px;line-height:1.04} .experience-split__heading-em{ display:inline;font-size:0.833em;font-weight:inherit;letter-spacing:0.4px; } .experience-split__rows{ list-style:none;margin:var(--space-32) 0 0;padding:0; border-top:1px solid #3e3e3e; } .experience-split__row{ display:flex;flex-direction:column;gap:var(--space-8); padding-block:var(--space-24);padding-inline:var(--space-8); margin-inline:calc(var(--space-8) * -1); border-bottom:1px solid #3e3e3e; transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out); } @media (min-width:640px){ .experience-split__row{flex-direction:row;gap:var(--space-40);padding-block:34px} } @media (max-width:767px){ .experience-split__row{gap:var(--space-16)} } .experience-split__row:hover,.experience-split__row:focus-within{ background:rgba(255,255,255,.04); border-color:#FF4A8A; } .experience-split__row-title{ margin:0;flex:none; font-family:var(--font-heading);font-weight:var(--weight-regular); font-size:20px;line-height:30px;letter-spacing:0.2px;color:var(--c-text); transition:color var(--dur-base) var(--ease-out); } .experience-split__row:hover .experience-split__row-title, .experience-split__row:focus-within .experience-split__row-title{color:#FF4A8A} @media (min-width:640px){ .experience-split__row-title{width:210px} } .experience-split__row-text{ margin:0;flex:1 1 0;min-width:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px;color:var(--c-text); } /* ============================================================ CONSULTANCY SERVICES - eyebrow + heading over numbered service cards (Consultation page, Figma node 484:1494). ============================================================ */ .consultancy-services{background:#000;padding-bottom:0} .consultancy-services .eyebrow{color:#FF4A8A} .consultancy-services .eyebrow::before{background:#FF4A8A} .consultancy-services h2{margin-top:var(--space-16)} .consultancy-services__list{ list-style:none;margin:var(--space-40) 0 0;padding:0; display:flex;flex-direction:column;gap:var(--space-24); } @media (max-width:767px){ .consultancy-services__list{margin-top:var(--space-24);gap:var(--space-20)} } .consultancy-card{ display:flex;gap:var(--space-24); background:rgba(255,255,255,.1);border-radius:16px; padding:var(--space-24); } @media (min-width:768px){ .consultancy-card{gap:var(--space-40);padding:var(--space-40)} } @media (max-width:767px){ .consultancy-card{padding:var(--space-20);gap:var(--space-16)} } .consultancy-card__num{ flex:none;margin:0; font-family:var(--font-heading);font-weight:var(--weight-light); font-size:28px;line-height:1.25;letter-spacing:0.4px;color:#FF4A8A; } @media (min-width:768px){ .consultancy-card__num{font-size:40px;line-height:50px} } @media (max-width:767px){ .consultancy-card__num{font-size:24px;line-height:32px} } .consultancy-card__body{display:flex;flex-direction:column;gap:var(--space-24);min-width:0} @media (max-width:767px){ .consultancy-card__body{gap:var(--space-20)} } .consultancy-card__title{ margin:0;text-transform:capitalize; font-family:var(--font-heading);font-weight:var(--weight-medium); font-size:20px;line-height:1.25;letter-spacing:0.24px;color:var(--c-text); } @media (min-width:768px){ .consultancy-card__title{font-size:24px;line-height:30px} } @media (max-width:767px){ .experience-split__row-title, .consultancy-card__title{font-size:18px;line-height:26px} } .consultancy-card__group{display:flex;flex-direction:column;gap:var(--space-16)} .consultancy-card__label{ margin:0;text-transform:uppercase; font-family:var(--font-body);font-weight:var(--weight-semibold); font-size:16px;line-height:24px;color:#FF4A8A; } .consultancy-card__text{ margin:0; font-family:var(--font-body);font-weight:var(--weight-regular); font-size:14px;line-height:22px;color:var(--c-text); } /* ============================================================ STRATEGIC INQUIRY - copy + a real CF7 form in a card (Consultation page, Figma node 484:1602). Underline-only field treatment duplicated from .start-conversation__form (contact.php) rather than shared, since that class is scoped to the Contact page's own form. ============================================================ */ .strategic-inquiry{background:#000} /* Side by side from tablet up, same as .split's own switch (layout.css). Figma node 484:1602 measures out to a 60px gap (not the shared .split default of 80px) and a ~43/57 column split, not an even 1fr/1fr - close enough by eye to matter once the card's own 2-up field grid is this narrow (a wider text column here wraps "Organisation / Defence Agency" onto two lines, which Figma doesn't) - that 60px gap is still desktop-only. */ @media (min-width:768px){ .strategic-inquiry .split{grid-template-columns:minmax(0,3fr) minmax(0,4fr)} } @media (min-width:1100px){ .strategic-inquiry .split{gap:60px} } .strategic-inquiry__eyebrow{ display:flex;align-items:center;gap:14px;margin:0 0 var(--space-16); font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold); line-height:22px;letter-spacing:2px;text-transform:uppercase; color:#FF4A8A; } .strategic-inquiry__dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none} .strategic-inquiry__heading{margin:0 0 var(--space-16)} .strategic-inquiry__lede{margin:0} .strategic-inquiry__card{ background:rgba(255,255,255,.1);border-radius:16px;padding:var(--space-24); } @media (min-width:768px){ .strategic-inquiry__card{padding:var(--space-40)} } @media (max-width:767px){ .strategic-inquiry__card{padding:var(--space-20)} } .strategic-inquiry__card .wpcf7-form{display:flex;flex-direction:column;gap:var(--space-40)} @media (max-width:767px){ .strategic-inquiry__card .wpcf7-form{gap:20px} } .strategic-inquiry__card .form__grid{gap:var(--space-24)} @media (max-width:767px){ .strategic-inquiry__card .form__grid{gap:16px} } /* .form__grid's own shared rule goes 2-up from 640px of VIEWPORT width - fine for a full-width form, but this card only gets ~43% of that width once .split itself has gone side-by-side (1024px+), so 1024-1439px squeezed "Organisation / Defence Agency" onto two lines. Stay single-column through that whole zone; only go 2-up once the card is wide enough (1440px+, verified against Figma's own frame) to fit both labels on one line. */ @media (max-width:1439px){ .strategic-inquiry__card .form__grid{grid-template-columns:minmax(0,1fr)} } .strategic-inquiry__card .field{gap:18px} @media (max-width:767px){ .strategic-inquiry__card .field{gap:10px} } .strategic-inquiry__card .wpcf7-form-control-wrap{display:block;width:100%} .strategic-inquiry__card .wpcf7-not-valid-tip{ display:block;margin-top:var(--space-4); font-size:var(--fs-caption);color:var(--c-error); } .strategic-inquiry__card .field__control.wpcf7-not-valid{border-color:var(--c-error)} .strategic-inquiry__card form .wpcf7-response-output{ margin:calc(var(--space-16) - var(--space-40)) 0 0; padding:var(--space-12) var(--space-16);border-radius:var(--r-hairline); font-size:14px;line-height:22px; } .strategic-inquiry__card .wpcf7-form.sent .wpcf7-response-output{border:1px solid var(--c-success);color:var(--c-text)} .strategic-inquiry__card .wpcf7-form.failed .wpcf7-response-output, .strategic-inquiry__card .wpcf7-form.aborted .wpcf7-response-output, .strategic-inquiry__card .wpcf7-form.spam .wpcf7-response-output{border:1px solid var(--c-error);color:var(--c-text)} .strategic-inquiry__card .wpcf7-form.invalid .wpcf7-response-output{border:1px solid var(--c-warning);color:var(--c-text)} .strategic-inquiry__card .wpcf7-spinner{margin:0 0 0 var(--space-12)} .strategic-inquiry__submit[disabled]{opacity:.6;cursor:progress} .strategic-inquiry__card .field__label{ font-family:var(--font-heading);font-size:18px;line-height:26px; letter-spacing:normal;text-transform:none;font-weight:var(--weight-regular);color:var(--c-text); } @media (max-width:767px){ .strategic-inquiry__card .field__label{font-size:16px;line-height:24px} } .strategic-inquiry__card .field__label .req{color:var(--c-text)} .strategic-inquiry__card .field__control, .strategic-inquiry__card .field__control:focus, .strategic-inquiry__card .field__control:focus-visible{ outline:none;box-shadow:none; } .strategic-inquiry__card .field__control{ background:transparent;border:none;border-bottom:1px solid #aaa; border-radius:0;padding:0 0 var(--space-8);min-height:var(--space-40); transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); } .strategic-inquiry__card textarea.field__control{min-height:95px} .strategic-inquiry__card .field__control:hover{border-color:rgba(255,255,255,.55)} .strategic-inquiry__card .field__control:focus, .strategic-inquiry__card .field__control:focus-visible{ border-bottom:2px solid var(--c-crimson); padding-bottom:calc(var(--space-8) - 1px); } /* Figma node 484:1651 - a noticeably bigger button than the sitewide .btn default (px-32 py-16, 16px text, 2px tracking) - not a size the shared .btn class carries elsewhere, so it's set directly here. */ .strategic-inquiry__submit{ align-self:flex-start; padding:16px 32px;min-height:0; font-size:16px;line-height:24px;letter-spacing:2px; } @media (max-width:767px){ .strategic-inquiry__submit{padding:14px 24px;font-size:14px;letter-spacing:1.5px} } .strategic-inquiry__card .field__control:-webkit-autofill, .strategic-inquiry__card .field__control:-webkit-autofill:hover, .strategic-inquiry__card .field__control:-webkit-autofill:focus{ -webkit-text-fill-color:var(--c-text); -webkit-box-shadow:0 0 0 1000px transparent inset; transition:background-color 9999s ease-in-out 0s; } @media (prefers-reduced-motion:reduce){ .strategic-inquiry__card .field__control{transition:none} }