@charset "UTF-8"; .about .mono-label { font-family: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; font-size: clamp(0px, 0.9722222222vw, 14px); line-height: 1.4; font-weight: 400; letter-spacing: 0.02em; color: #ffffff; text-transform: uppercase; letter-spacing: 0.28px; display: flex; align-items: center; gap: clamp(0px, 0.5555555556vw, 8px); } @media screen and (max-width: 991.8px) { .about .mono-label { font-size: 12px; } } .about .mono-label .num:not(.accent) { display: inline-block; width: clamp(0px, 0.9722222222vw, 14px); height: clamp(0px, 0.9722222222vw, 14px); background: #f47621; flex: 0 0 auto; } @media screen and (max-width: 991.8px) { .about .mono-label .num:not(.accent) { width: 12px; height: 12px; } } .about .mono-label .accent { color: #f47621; } .about .mono-label .bullet { display: inline-block; width: clamp(0px, 0.5555555556vw, 8px); height: clamp(0px, 0.5555555556vw, 8px); flex: 0 0 auto; background: #f47621; } .about .mono-label.dark { color: #271e00; } /* NOTE(adapter): removed original `.about .overline` rule — Kinsta pages use `.overline` widely (theme already styles it); injecting `.about` would override site-wide overline; hero scaffold doesn't use `.overline`, so safe to remove. */ .about [data-reveal] { will-change: transform, opacity; } /* NOTE(adapter): removed original notch override — its `block-cta-split` would hit Kinsta's CTA section and change its notch/spacing. Defer to Kinsta structure, leave its layout untouched. */ /* FOUC fix: before about.js (footer) runs, the original banner (section.block-banner--about) renders full-size gallery image + unpositioned copy → first-paint zoomed image flash + layout shift. adaptBanner adds .block-about-hero to the section and rebuilds its internals. So hide and reserve 100vh (= rebuilt pin height) before that class is added, eliminating image flash and jumping. .about is added server-side by plugin PHP (body_class), so this rule applies in . */ .about section.block-banner--about:not(.block-about-hero) { visibility: hidden; min-height: 100vh; } .block-about-hero { position: relative; padding: 0 !important; background: #0c0900; overflow: clip; /* grid lines stay orange #F4762180 (=rgba(244,118,33,0.5)): no orange<->white swap on reveal (per request: final-frame grid orange not white) */ } .block-about-hero .about-hero__pin { height: 100vh; width: 100%; background: #0c0900; /* opaque bg: when titles shift up and overlap banner exit zone, pinned content stays hidden behind */ } .block-about-hero .about-hero__stage { position: relative; height: 100vh; width: 100%; overflow: hidden; perspective: 1400px; perspective-origin: 50% 50%; } .block-about-hero .hero-grid { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .block-about-hero .hero-grid__bloom { position: absolute; left: 50%; top: 52.64%; transform: translate(-50%, -50%); z-index: 0; width: 77.4%; height: 62.6%; border-radius: 50%; pointer-events: none; opacity: 0; background: #f47621; filter: blur(250px); } .block-about-hero .hero-grid__fill { position: absolute; inset: 0; z-index: 2; display: grid; justify-content: center; align-content: center; opacity: 1; --cell-fill: 0.225; } .block-about-hero .hero-cell { background: rgba(244, 118, 33, var(--cell-fill, 0.225)); opacity: 0; } .block-about-hero .hero-grid__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background-image: linear-gradient(to right, #f47621 9px, transparent 9px), linear-gradient(to bottom, #f47621 9px, transparent 9px); background-size: var(--cellw, 72px) var(--cellh, 72px); filter: blur(13.05px); /* figma Grid glow LAYER_BLUR 26.1 ÷ 2 = CSS blur 13.05px（9px 粗线柔光网格，对齐设计组A op0.25） */ mix-blend-mode: screen; } .block-about-hero .hero-grid__lines { position: absolute; inset: 0; z-index: 3; display: grid; justify-content: center; align-content: center; opacity: 0.25; /* layer opacity 0.25 (per request: final-frame grid line color #F4762180 @ layer 0.25) */ -webkit-mask-image: radial-gradient(circle at center, #000 calc(var(--reveal, 0) * 1%), transparent calc(var(--reveal, 0) * 1% + 6%)); mask-image: radial-gradient(circle at center, #000 calc(var(--reveal, 0) * 1%), transparent calc(var(--reveal, 0) * 1% + 6%)); } .block-about-hero .hero-line-cell { box-shadow: inset -1.5px 0 0 0 rgba(244, 118, 33, calc(1 - var(--lw, 0))), inset 0 -1.5px 0 0 rgba(244, 118, 33, calc(1 - var(--lw, 0))), inset -1.5px 0 0 0 rgba(255, 255, 255, calc(0.5 * var(--lw, 0))), inset 0 -1.5px 0 0 rgba(255, 255, 255, calc(0.5 * var(--lw, 0))); } .block-about-hero .hero-grid__wave { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background-image: linear-gradient(to right, rgba(244, 118, 33, 0.85) 1.5px, transparent 1.5px), linear-gradient(to bottom, rgba(244, 118, 33, 0.85) 1.5px, transparent 1.5px); background-size: var(--cellw, 72px) var(--cellh, 72px); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle at center, transparent calc(var(--wave, 0) * 1% - 18%), #000 calc(var(--wave, 0) * 1%), transparent calc(var(--wave, 0) * 1% + 18%)); mask-image: radial-gradient(circle at center, transparent calc(var(--wave, 0) * 1% - 18%), #000 calc(var(--wave, 0) * 1%), transparent calc(var(--wave, 0) * 1% + 18%)); } .block-about-hero .hero-grid__gap { position: absolute; z-index: 5; display: grid; } .block-about-hero .hero-gap-cell { background: #00000070; opacity: 0; } .block-about-hero .hero-landing { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .block-about-hero .hero-landing__tiles { position: absolute; inset: 0; pointer-events: none; /* mwg_064-style 3D depth fly-in: local perspective with a single center vanishing point so off-center tiles at far z appear near the viewport center then spread out to their design positions as they fly forward. Kept on __tiles (not .hero-landing) so the copy/text layer is untouched by 3D flattening. */ perspective: 1400px; perspective-origin: 50% 50%; } .block-about-hero .hero-tile-wrap { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: var(--s, 140px); height: var(--s, 140px); margin-left: calc(var(--s, 140px) / -2); margin-top: calc(var(--s, 140px) / -2); /* preserve-3d so the inner img's translateZ is read in __tiles' perspective (wrap holds 2D parallax y, img holds 3D fly-in) */ transform-style: preserve-3d; will-change: transform, opacity; } @media screen and (max-width: 767.8px) { .block-about-hero .hero-tile-wrap { width: calc(var(--s, 140px) * 0.62); height: calc(var(--s, 140px) * 0.62); /* margin must scale with size (original -s/2 was based on unscaled 140), else scaled tile shifts and corners get clipped */ margin-left: calc(var(--s, 140px) * 0.62 / -2); margin-top: calc(var(--s, 140px) * 0.62 / -2); } } .block-about-hero .hero-tile { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; /* design step-1 tiles are square corners (Figma cornerRadius=None) */ box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); pointer-events: auto; backface-visibility: hidden; will-change: transform, opacity; } .block-about-hero .hero-landing__copy { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: auto; user-select: text; } .block-about-hero .hero-breadcrumb { font-family: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; font-size: clamp(0px, 0.9722222222vw, 14px); line-height: 1.4; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 clamp(0px, 0.6944444444vw, 10px); color: #a1a4aa; /* design step-1: an orange dot precedes TERRA */ } @media screen and (max-width: 991.8px) { .block-about-hero .hero-breadcrumb { font-size: 10px; line-height: 1.4; } } .block-about-hero .hero-breadcrumb .mark { color: #f47621; } .block-about-hero .hero-breadcrumb .mark::before { content: ""; display: inline-block; width: clamp(0px, 0.2638888889vw, 3.8px); height: clamp(0px, 0.2638888889vw, 3.8px); margin-right: clamp(0px, 0.5555555556vw, 8px); border-radius: 50%; background: #f47621; vertical-align: middle; } .block-about-hero .hero-breadcrumb .sep { margin: 0 clamp(0px, 0.5555555556vw, 8px); color: #f47621; } .block-about-hero .hero-breadcrumb .cur { color: #ffffff; } .block-about-hero .hero-landing__title { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: clamp(0px, 4.4444444444vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: #ffffff; margin: 0 0 clamp(0px, 1.1805555556vw, 17px); } @media screen and (max-width: 991.8px) { .block-about-hero .hero-landing__title { font-size: 40px; } } .block-about-hero .hero-landing__lead { max-width: clamp(0px, 38.6805555556vw, 557px); margin: 0; font-size: clamp(0px, 1.1111111111vw, 16px); line-height: 1.4; color: #a1a4aa; } .block-about-hero .hero-cfh { position: absolute; left: 50%; top: 50%; z-index: 6; margin: 0; font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: clamp(0px, 5.5555555556vw, 80px); /* design 80px (JS scale=30.77/80 ~= 0.3846 shrink to overline) */ line-height: 0.9; letter-spacing: -0.02em; white-space: nowrap; color: #ffffff; opacity: 0; pointer-events: none; will-change: transform, opacity, color; } .block-about-hero .hero-cfh .tm { font-family: "Helvetica", "Arial", sans-serif; font-weight: 700; font-size: 0.575em; /* design TM=46px / title 80px = 0.575, scales with cfh scale */ line-height: 0.9; letter-spacing: -0.02em; vertical-align: super; } .block-about-hero .hero-content { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; } .block-about-hero .hero-statements { position: relative; max-width: clamp(0px, 35.4166666667vw, 510px); text-align: center; } .block-about-hero .hero-statement { margin: 0; font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: clamp(0px, 3.3333333333vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: #ffffff; opacity: 0; pointer-events: none; user-select: text; } @media screen and (max-width: 991.8px) { .block-about-hero .hero-statement { font-size: 32px; } } .block-about-hero .hero-statement[data-hero-stmt="2"] { margin-top: 18px; } .block-about-hero .hero-statement--mission { position: absolute; left: 50%; top: 50%; /* 居中交给 GSAP 的 xPercent/yPercent:-50（见 about.js initTitles）。这里不能再写 transform:translate(-50%,-50%)： 768(宽<=991)下 width 变 100% 后该 CSS translate 会与 GSAP 的 -50% 叠加成 -100%，mission 严重左偏。 no-gsap 降级由 .about.no-gsap 规则的 transform:none + position:static 处理，不依赖此处。 */ width: clamp(0px, 58.8888888889vw, 848px); max-width: 92vw; font-size: clamp(0px, 3.3333333333vw, 48px); /* design 48px */ line-height: 1.1; letter-spacing: -0.02em; text-align: center; } @media screen and (max-width: 991.8px) { .block-about-hero .hero-statement--mission { font-size: 26px; width: 100%; max-width: none; padding: 0 24px; box-sizing: border-box; } } .about .scroll-prompt { /* Replaces the old hero-scrollcue with the theme's scroll-prompt component. Theme style.css already provides position:fixed bottom-right, the 50x90 size, mix-blend-mode:lighten, pointer-events:none, the built-in top/bottom gradient-fade and the @keyframes chevron-scroll downward loop. The theme hides it (display:none) on every page except body.home; the about page (body.about) is not home, so re-enable it here. It starts hidden — opacity is faded in by JS only during the block-titles pin (see initTitles) — and z-index lifts it above the dark sections. */ display: block; opacity: 0; z-index: 7; } .block-about-hero .hero-landing__copy.container { max-width: clamp(0px, 47.5vw, 684px); margin: 0 auto; } .about main.site-main section.block-about-intro { padding-top: 0; padding-bottom: 0; } .about main.site-main section.block-about-investors { padding-top: clamp(0px, 11.1111111111vw, 160px); padding-bottom: clamp(0px, 11.1111111111vw, 160px); } .about-ticker { border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; padding: clamp(0px, 1.6666666667vw, 24px) 0; } .about-ticker__track { display: inline-flex; align-items: center; gap: clamp(0px, 4.4444444444vw, 64px); white-space: nowrap; will-change: transform; } .about-ticker__track span { font-family: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; font-size: clamp(0px, 0.8333333333vw, 12px); line-height: 1.4; font-weight: 400; letter-spacing: 0.02em; color: #d4d6d8; text-transform: uppercase; letter-spacing: 0.24px; } @media screen and (max-width: 991.8px) { .about-ticker__track span { font-size: 10px; } } .about-intro__inner { display: grid; grid-template-columns: 1fr clamp(0px, 50.0694444444vw, 721px); gap: clamp(0px, 3.3333333333vw, 48px); align-items: center; } @media screen and (max-width: 991.8px) { .about-intro__inner { grid-template-columns: 1fr; gap: 40px; } } .about-intro__title { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 4.4444444444vw, 64px); line-height: 1.046875; font-weight: 600; letter-spacing: -0.02em; color: #ffffff; margin: clamp(0px, 1.1111111111vw, 16px) 0 clamp(0px, 1.6666666667vw, 24px); } @media screen and (max-width: 991.8px) { .about-intro__title { font-size: 48px; line-height: 1; letter-spacing: -0.03em; } } .about-intro__lead { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; font-weight: 400; letter-spacing: 0; color: #d4d6d8; max-width: clamp(0px, 38.8888888889vw, 560px); } @media screen and (max-width: 991.8px) { .about-intro__lead { font-size: 16px; line-height: 1.4; } } .about-intro__media { margin: 0; border-radius: 8px; overflow: hidden; } .about-intro__media img { width: 100%; height: auto; display: block; aspect-ratio: 721/744; object-fit: cover; } .block-about-investors { position: relative; padding-top: clamp(0px, 11.1111111111vw, 160px); padding-bottom: clamp(0px, 11.1111111111vw, 160px); } .block-about-investors .about-investors__grid { position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; aspect-ratio: 1602/780; opacity: 0.5; pointer-events: none; background-image: repeating-linear-gradient(to right, rgba(244, 118, 33, 0.58) 0 1px, transparent 1px 105px), repeating-linear-gradient(to bottom, rgba(244, 118, 33, 0.58) 0 1px, transparent 1px 105px); background-position: -0.5px 0, 0 -0.5px; -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 0%, #000 64%, rgba(0, 0, 0, 0.5) 88%, transparent 100%); mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 0%, #000 64%, rgba(0, 0, 0, 0.5) 88%, transparent 100%); transform: translate(-50%, -50%); } .block-about-investors .about-investors__grid::before, .block-about-investors .about-investors__grid::after { content: ""; position: absolute; inset: 0; } .block-about-investors .about-investors__grid::before { background-image: repeating-linear-gradient(to right, rgba(244, 118, 33, 0.22) 0 20px, transparent 20px 105px), repeating-linear-gradient(to bottom, rgba(244, 118, 33, 0.22) 0 20px, transparent 20px 105px); background-position: -10px 0, 0 -10px; filter: blur(30px); } .block-about-investors .about-investors__grid::after { background-image: repeating-linear-gradient(to right, rgba(244, 118, 33, 0.3) 0 5px, transparent 5px 105px), repeating-linear-gradient(to bottom, rgba(244, 118, 33, 0.3) 0 5px, transparent 5px 105px); background-position: -2.5px 0, 0 -2.5px; filter: blur(7px); } .block-about-investors .about-investors__inner { position: relative; z-index: 2; text-align: center; padding: 0; } .block-about-investors .mono-label { justify-content: center; } .block-about-investors .about-investors__amount { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: clamp(0px, 5.5555555556vw, 80px); line-height: 0.9; letter-spacing: -0.02em; color: #ffffff; margin: clamp(0px, 1.3888888889vw, 20px) 0; } .block-about-investors .about-investors__amount .amt { color: inherit; } @media screen and (max-width: 991.8px) { .block-about-investors .about-investors__amount { font-size: 48px; } } .block-about-investors .about-investors__lead { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-weight: 400; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; color: #d4d6d8; max-width: clamp(0px, 38.8888888889vw, 560px); margin: 0 auto; } @media screen and (max-width: 767.8px) { .block-about-investors .about-investors__lead { font-size: 16px; } } .block-about-investors .about-investors__logos { position: relative; z-index: 2; width: 100%; margin-top: clamp(0px, 4.4444444444vw, 64px); padding-bottom: clamp(0px, 4.1666666667vw, 60px); overflow: hidden; } .block-about-investors .about-investors__logos-track { display: inline-flex; align-items: center; gap: clamp(0px, 3.3333333333vw, 48px); white-space: nowrap; will-change: transform; } .block-about-investors .logo-box { display: inline-flex; align-items: center; justify-content: center; width: clamp(0px, 13.3333333333vw, 192px); height: clamp(0px, 6.1111111111vw, 88px); flex: 0 0 auto; background-color: rgba(255, 255, 255, 0.01); background-image: linear-gradient(rgba(244, 118, 33, 0.01), rgba(244, 118, 33, 0.01)); } .block-about-investors .logo-box img { height: clamp(0px, 3.2638888889vw, 47px); width: auto; flex: 0 0 auto; object-fit: contain; opacity: 0.85; filter: grayscale(1) brightness(1.6); } @media screen and (max-width: 767.8px) { .block-about-investors .logo-box img { height: 32px; } } .block-about-story { position: relative; overflow: hidden; } .block-about-story::before, .block-about-story::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; transform: translateY(-50%); } .block-about-story::before { top: 27%; right: -12%; width: 63.4vw; height: 44.51vw; background: radial-gradient(ellipse at center, rgba(244, 118, 33, 0.3) 0%, rgba(244, 118, 33, 0) 68%); filter: blur(3.47vw); } .block-about-story::after { top: 78%; left: -10%; width: 54.86vw; height: 30.63vw; background: radial-gradient(ellipse at center, rgba(244, 118, 33, 0.24) 0%, rgba(244, 118, 33, 0) 68%); filter: blur(3.47vw); } .block-about-story > .container { position: relative; z-index: 1; } .block-about-story .about-story__head { text-align: center; max-width: clamp(0px, 50.8333333333vw, 732px); margin: 0 auto clamp(0px, 8.3333333333vw, 120px); } .block-about-story .about-story__head .mono-label { justify-content: center; color: #ffffff; } .block-about-story .about-story__title { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 4.4444444444vw, 64px); line-height: 1.046875; font-weight: 600; letter-spacing: -0.02em; color: #ffffff; margin: clamp(0px, 1.1111111111vw, 16px) 0 clamp(0px, 1.1111111111vw, 16px); } @media screen and (max-width: 991.8px) { .block-about-story .about-story__title { font-size: 48px; line-height: 1; letter-spacing: -0.03em; } } .block-about-story .about-story__sub { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; font-weight: 400; letter-spacing: 0; color: #d4d6d8; } @media screen and (max-width: 991.8px) { .block-about-story .about-story__sub { font-size: 16px; line-height: 1.4; } } .block-about-story .about-story__timeline { position: relative; max-width: clamp(0px, 80.2777777778vw, 1156px); margin: 0 auto; } .block-about-story .about-story__path { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .block-about-story .about-story__path .story-path-svg { width: 100%; height: 100%; } .block-about-story .about-story__path .story-path-progress { filter: drop-shadow(0 0 6px rgba(244, 118, 33, 0.8)); } .block-about-story .about-story__path .story-marker { position: absolute; top: 0; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #f47621; box-shadow: 0 0 18px 6px rgba(244, 118, 33, 0.85), 0 0 40px 12px rgba(244, 118, 33, 0.4); opacity: 0; } @media screen and (max-width: 991.8px) { .block-about-story .about-story__path { display: none; } } .block-about-story .about-story__milestones { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0px, 9.2361111111vw, 133px); } .block-about-story .story-card { display: flex; align-items: center; justify-content: space-between; gap: clamp(0px, 2.7777777778vw, 40px); padding-left: 0; } .block-about-story .story-card::before { content: none; } .block-about-story .story-card--inset-left { margin-left: 10.21%; } .block-about-story .story-card--inset-right { margin-right: 10.21%; } @media screen and (max-width: 991.8px) { .block-about-story .story-card { flex-direction: column !important; align-items: stretch; gap: clamp(0px, 2.2222222222vw, 32px); } .block-about-story .story-card--inset-left, .block-about-story .story-card--inset-right { margin-left: 0; margin-right: 0; } } .block-about-story .story-card__media { position: relative; flex: 0 0 clamp(0px, 31.0416666667vw, 447px); width: clamp(0px, 31.0416666667vw, 447px); overflow: hidden; } .block-about-story .story-card__media img { width: 100%; aspect-ratio: 447/456; object-fit: cover; display: block; } .block-about-story .story-card__media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(0px, 2.7777777778vw, 40px) clamp(0px, 1.6666666667vw, 24px) clamp(0px, 1.3888888889vw, 20px); font-family: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; font-size: clamp(0px, 0.8333333333vw, 12px); line-height: 1.4; font-weight: 400; letter-spacing: 0.02em; color: #ffffff; text-transform: uppercase; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85)); } @media screen and (max-width: 991.8px) { .block-about-story .story-card__media figcaption { font-size: 10px; } } @media screen and (max-width: 991.8px) { .block-about-story .story-card__media { flex: none; width: 100%; } } .block-about-story .story-card__text { flex: 1 1 auto; max-width: clamp(0px, 31.1111111111vw, 448px); display: flex; flex-direction: column; gap: clamp(0px, 2.7777777778vw, 40px); } @media screen and (max-width: 991.8px) { .block-about-story .story-card__text { max-width: none; } } .block-about-story .story-card__label { color: #f47621; margin-bottom: clamp(0px, 1.1111111111vw, 16px); } .block-about-story .story-card__body { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.1111111111vw, 16px); line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #d4d6d8; margin: 0; } @media screen and (max-width: 991.8px) { .block-about-story .story-card__body { font-size: 14px; line-height: 1.5; } } .block-about-story .about-story__closing { text-align: center; max-width: clamp(0px, 50.8333333333vw, 732px); margin: clamp(0px, 8.3333333333vw, 120px) auto 0; } .block-about-story .about-story__closing .mono-label { justify-content: center; } .block-about-story .about-story__closing-title { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 4.4444444444vw, 64px); line-height: 1.046875; font-weight: 600; letter-spacing: -0.02em; color: #ffffff; margin: clamp(0px, 1.1111111111vw, 16px) 0; } @media screen and (max-width: 991.8px) { .block-about-story .about-story__closing-title { font-size: 48px; line-height: 1; letter-spacing: -0.03em; } } .block-about-story .about-story__closing-body { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; font-weight: 400; letter-spacing: 0; color: #d4d6d8; } @media screen and (max-width: 991.8px) { .block-about-story .about-story__closing-body { font-size: 16px; line-height: 1.4; } } .block-about-team .about-team__head { margin-bottom: clamp(0px, 3.8888888889vw, 56px); } .block-about-team .about-team__title { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 4.4444444444vw, 64px); line-height: 1.046875; font-weight: 600; letter-spacing: -0.02em; color: #271e00; margin: clamp(0px, 1.1111111111vw, 16px) 0 0; } @media screen and (max-width: 991.8px) { .block-about-team .about-team__title { font-size: 48px; line-height: 1; letter-spacing: -0.03em; } } .block-about-team .about-team__group-label { margin: clamp(0px, 3.3333333333vw, 48px) 0 clamp(0px, 1.6666666667vw, 24px); padding-bottom: clamp(0px, 1.1111111111vw, 16px); border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .block-about-team .about-team__grid { list-style: none; margin: 0 0 clamp(0px, 2.7777777778vw, 40px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0px, 2.2222222222vw, 32px) clamp(0px, 1.6666666667vw, 24px); } @media screen and (max-width: 991.8px) { .block-about-team .about-team__grid { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767.8px) { .block-about-team .about-team__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } } .block-about-team .team-card__photo { border-radius: 8px; overflow: hidden; margin-bottom: clamp(0px, 1.1111111111vw, 16px); } .block-about-team .team-card__photo img { width: 100%; height: auto; aspect-ratio: 330/407; object-fit: cover; display: block; } .block-about-team .team-card__name { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.6; font-weight: 500; letter-spacing: 0; color: #271e00; margin: 0 0 clamp(0px, 0.2777777778vw, 4px); } @media screen and (max-width: 991.8px) { .block-about-team .team-card__name { font-size: 16px; line-height: 1.4; } } .block-about-team .team-card__role { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.1111111111vw, 16px); line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #70747b; margin: 0; } @media screen and (max-width: 991.8px) { .block-about-team .team-card__role { font-size: 14px; line-height: 1.5; } } /* ---- Team restored design (Kinsta real classes): 4-col grid + name/role layout. Note: terra/team block content is data:[] preview -> team-card__media empty (no photo), so hide empty media, show 4-col text grid of name(20/500/#271e00) + role(20/400/#53585f). */ /* heading-block: left-align overline "Our people" (theme section .overline gives orange square+mono+#271e00) + large heading. */ .about .block-team-section .heading-block { text-align: left; } .about .block-team-section .heading-block > .overline { margin-bottom: clamp(0px, 1.1111111111vw, 16px); /* overline -> h2 spacing */ } .about .block-team-section .heading-block h2.wp-block-heading { /* design Figma: Söhne 600 / 64px / lh1.05 / -0.02em / #271e00 (theme default size/color mismatched, restore explicitly). */ font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: clamp(0px, 4.4444444444vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: #271e00; margin: 0; } /* font responsive px floor (ref static site h1: 64->until-lg 48) — original clamp(0px,...) with no floor collapses to ~17px on small screens. */ @media screen and (max-width: 991.8px) { .about .block-team-section .heading-block h2.wp-block-heading { font-size: 48px; } } /* heading-block -> block-team (first group label) spacing (design ~87, incl. group label's own top gap). */ .about .block-team-section .heading-block { margin-bottom: clamp(0px, 4.4444444444vw, 64px); } /* group label (Colorado/Vancouver team) overline -> grid spacing (design label ry12799 -> first img 12833 ~= 34). */ .about .block-team-section .team-group > .overline { margin-bottom: clamp(0px, 2.2222222222vw, 32px); color: #3C393C; /* group label (Leadership & Operations etc.) — all breakpoints */ } .about .block-team-section .team-group > .overline::before { display: none; } /* remove theme orange square ::before — all breakpoints (was PC-only) */ .about .block-team-section .team-group + .team-group { margin-top: clamp(0px, 3.3333333333vw, 48px); } .about .block-team-section .team-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); /* design: column gap 24, row gap 48 (card distance 530 - card body 482) */ gap: clamp(0px, 3.3333333333vw, 48px) clamp(0px, 1.6666666667vw, 24px); margin: 0 0 clamp(0px, 2.7777777778vw, 40px); } @media screen and (max-width: 991.8px) { .about .block-team-section .team-grid { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767.8px) { .about .block-team-section .team-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } } @media screen and (max-width: 575.8px) { .about .block-team-section .team-grid { grid-template-columns: repeat(2, 1fr) !important; } /* <=575: two cards per row (!important to beat theme grid rule) */ } .about .block-team-section .team-card { margin: 0; height: 100%; /* fill the stretched grid row so info can grow to equal height */ } /* wrapping button: reset native button look, whole card clickable. flex column + height:100% -> card body fills the row-stretched grid item, letting .team-card__info grow (flex:1) so every card's info block (and its border) is the same height within a row regardless of name/role line count. */ .about .block-team-section .team-card__open { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; /* iOS Safari: kill blue tap-flash on the card */ } /* iOS Safari/Chrome draw a default blue focus ring / box-shadow when the card button is tapped or programmatically focused (tap opens modal -> card stays focused behind it). Remove it. Keyboard users still get an orange focus-visible ring for accessibility. */ /* Per request: NO focus ring of any kind on the card — mobile browsers (iOS Safari) fire :focus-visible on tap / programmatic focus and show a highlight. !important beats UA/theme rings. */ .about .block-team-section .team-card__open:focus, .about .block-team-section .team-card__open:focus-visible, .about .block-team-section .team-card__open:active { outline: none !important; box-shadow: none !important; } /* team-card photo frame: figma design crops 330x407 (RAN_image) -> padding-top locks ratio, after featured image inserted, img absolutely fills the frame (rectangular, figma r=None). When empty (:empty) hide the empty box to avoid big blank space. */ .about .block-team-section .team-card__media { position: relative; flex: 0 0 auto; /* fixed aspect image, never squashed by the flex column */ width: 100%; padding-top: 123.33%; /* 407 / 330 = 1.2333 -> design aspect ratio */ overflow: hidden; background: #ece9e2; /* placeholder bg before image loads */ margin-bottom: clamp(0px, 1.1111111111vw, 16px); } .about .block-team-section .team-card__media:empty { display: none; } .about .block-team-section .team-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } /* card hover: photo slight zoom + name turns Terra orange (same style as project image hover) */ .about .block-team-section .team-card__open:hover .team-card__media img { transform: scale(1.045); } .about .block-team-section .team-card__open:hover .team-card__name { color: #f47621; } .about .block-team-section .team-card__name { transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } /* info: name + arrow on same line (arrow right-aligned), role wraps below. flex:1 grows the info to fill the flex-column card body -> equal height per row; align-content:flex-start keeps name+role packed at the top (extra space falls to the bottom) so multi-line-role cards align with single-line ones. */ .about .block-team-section .team-card__info { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; flex: 1 1 auto; column-gap: 8px; } .about .block-team-section .team-card__name { flex: 1 1 0; min-width: 0; font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.6; /* design 32/20 */ font-weight: 500; letter-spacing: 0; color: #271e00; margin: 0; } /* arrow up-right: arrow-up-right, re-exported as 24x24 viewBox (path x2 scaled, stroke 2 kept -> stroke not thickened at 24px) / orange #F47621, right end of name row */ .about .block-team-section .team-card__arrow { display: block; flex: 0 0 auto; width: 24px; height: 24px; background-color: #f47621; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Cpath d='M8.4 6H18v9.6'/%3E%3C/svg%3E") no-repeat center/24px 24px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Cpath d='M8.4 6H18v9.6'/%3E%3C/svg%3E") no-repeat center/24px 24px; } .about .block-team-section .team-card__role { flex: 0 0 100%; } .about .block-team-section .team-card__role { display: block; font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; font-weight: 400; letter-spacing: 0; color: #53585f; margin: 0; } /* arrow now shown (restored design up-right); styles in .team-card__arrow rule above */ @media screen and (max-width: 991.8px) { .about .block-team-section .team-card__name, .about .block-team-section .team-card__role { font-size: 16px; } } /* ===================================================================== * team-modal — theme provides no modal styles/toggle, this plugin takes over. * Design follows Terra: near-black overlay (#0c0900) + white card, left image (383x465 square corners) + right text, * Söhne typography (name #271e00/500, role&bio #53585f), orange accent #F47621. * Toggle controlled by about.js initTeamModal(): open -> removeAttribute(hidden)+.is-open. * Note: modal starts with hidden attr (UA display:none); author-level .team-modal sets no display, * uses only opacity/visibility/pointer-events for visibility -> enables fade transition. * ===================================================================== */ .about .team-modal { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3.3vw, 48px); background: rgba(12, 9, 0, 0.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity; /* project main easing = cubic-bezier(0.215,0.61,0.355,1); on close, defer visibility until fade ends to avoid jump */ transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 0.4s; } .about .team-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 0s; } /* Closed modals must be display:none. Author .team-modal{display:flex} above otherwise overrides the UA [hidden]{display:none}, leaving N (=team count) permanent full-viewport position:fixed overlays each with backdrop-filter:blur + will-change = compositor layers that hurt mobile scroll. JS removes [hidden] before open (then reflow) so the fade still runs. */ .about .team-modal[hidden] { display: none; } /* restored design (Figma node 12139:12799 "Pop up" 897x513): white bg radius16, padding24, horizontal gap33, left image (383x465 radius16) + right content column (head & body distributed vertically). */ .about .team-modal__dialog { position: relative; display: flex; flex-direction: row; gap: 33px; box-sizing: border-box; width: calc(100vw - 32px); max-width: 897px; max-height: 88vh; padding: 24px; background: #ffffff; border-radius: 16px; box-shadow: 0 40px 90px rgba(12, 9, 0, 0.35); transform: translateY(24px) scale(0.98); will-change: transform; transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .about .team-modal.is-open .team-modal__dialog { transform: none; } /* PC (>=992): when content exceeds max-height:88vh dialog scrolls itself + thin scrollbar (per request). Note: when dialog scrolls itself, absolutely-positioned __close scrolls with content (no longer pinned top-right). */ @media screen and (min-width: 992px) { .about .team-modal__dialog { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a1a4aa transparent; } .about .team-modal__dialog::-webkit-scrollbar { width: 6px; } .about .team-modal__dialog::-webkit-scrollbar-thumb { background: #a1a4aa; border-radius: 3px; } .about .team-modal__dialog::-webkit-scrollbar-track { background: transparent; } } /* left: photo 383x465, radius16, object-fit cover (design Image node). align-self:flex-start + aspect-ratio gives image fixed height 465, content column then stretches to same height. */ .about .team-modal__media { flex: 0 0 47%; max-width: 383px; align-self: flex-start; aspect-ratio: 383 / 465; border-radius: 16px; overflow: hidden; background: #ece9e2; } .about .team-modal__media img, .about .team-modal__media .team-modal__photo { width: 100%; height: 100%; object-fit: cover; display: block; } .about .team-modal__media:empty { display: none; } /* right: content column (design Content width435, vertical padding6, head<->body space-between) */ .about .team-modal__content { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 0; } /* head: title block on left; close button absolutely positioned to dialog top-right, so head has right padding to keep name off the button. */ .about .team-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-right: 36px; } .about .team-modal__title { display: flex; flex-direction: column; gap: 8px; /* name above role */ min-width: 0; } .about .team-modal__name { margin: 0; font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: 32px; line-height: 1.05; /* 33.6/32 */ letter-spacing: -0.32px; font-weight: 600; color: #271e00; } .about .team-modal__suffix { font-weight: 600; /* in design ", PhD" has same weight as heading */ } .about .team-modal__role { margin: 0; font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: 20px; line-height: 1.35; /* 27/20 */ font-weight: 400; color: #53585f; } /* close: design x-close-solid 24x24 box / 14 glyph / #271E00, no border no ring. always pinned to dialog top-right (absolute, doesn't scroll with content; dialog padding 24 -> 24 from top/right). */ .about .team-modal__close { position: absolute; /* button is 40x40 but the visible 24x24 icon is centered (8px inset each side). offset top/right by -8px from the icon's design position (27/22) so the icon stays visually in the dialog's top-right corner while keeping a 40x40 hit area. */ top: 19px; right: 14px; z-index: 2; flex: 0 0 auto; width: 40px; /* button 40x40, inner svg 24x24 centered (per design) */ height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #271e00; font-size: 34px; line-height: 1; cursor: pointer; transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); outline: none; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; /* Safari 触摸点击的蓝色高亮方块 */ } /* close icon = 24x24 SVG centered in the 40x40 button (JS injects it) */ .about .team-modal__close svg { width: 24px; height: 24px; display: block; flex: 0 0 auto; } .about .team-modal__close:hover { color: #f47621; } /* design is a clean X: JS auto-focuses close button on open, no default focus box on mouse/touch open; keyboard Tab still gets orange focus ring for accessibility. */ /* Per request: NO focus ring of any kind on the close button — incl. :focus-visible, which mobile browsers fire on tap / the JS auto-focus when the modal opens. !important beats UA/theme rings. */ .about .team-modal__close:focus, .about .team-modal__close:focus-visible, .about .team-modal__close:active { outline: none !important; box-shadow: none !important; } /* body: tagline + bio */ .about .team-modal__body { display: flex; flex-direction: column; gap: 12px; } /* tagline: design Experience = Fragment Mono 12 / lh1.4 / ls0.24 / #0C0900 / uppercase */ .about .team-modal__tagline { margin: 0; font-family: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; font-size: 12px; line-height: 1.4; /* 16.8/12 */ letter-spacing: 0.24px; text-transform: uppercase; font-weight: 400; color: #0c0900; } /* bio: design About = Söhne 16 / lh1.4 / #53585F */ .about .team-modal__bio, .about .team-modal__bio p { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.4; /* 22.4/16 */ font-weight: 400; color: #53585f; } .about .team-modal__bio p { margin: 0 0 12px; } .about .team-modal__bio p:last-child { margin-bottom: 0; } @media screen and (max-width: 767.8px) { /* reserve a bottom band on the backdrop so the fixed bottom-center close button never overlaps the dialog. Android Chrome: fixed inset:0 + 100vh use the LARGE viewport (URL-bar-hidden), so the bottom-centered close ends up behind the URL bar and the dialog over-fills the screen. Pin to top and size to the DYNAMIC viewport (dvh) so the backdrop, dialog and close always match the visible area. iOS Safari was already correct; dvh keeps it correct. vh kept first as a fallback for old browsers. */ .about .team-modal { align-items: center; padding: 16px 16px 96px; bottom: auto; height: 100vh; height: 100dvh; } .about .team-modal__dialog { flex-direction: column; gap: 20px; padding: 32px; max-height: calc(100vh - 130px); /* fallback */ max-height: calc(100dvh - 130px); /* leaves room for the bottom-center close button (24 + 48 + gap) */ overflow: hidden; /* dialog itself doesn't scroll; scrolling handled by __content */ border-radius: 0; /* mobile design: square corners (per request) */ } /* mobile design: close button = white square box centered at bottom, 24px from viewport bottom (see "team modal mobile.png"). JS reparents it to .team-modal (the fixed backdrop) on open, so position:absolute is relative to the viewport-sized backdrop. */ .about .team-modal__close { position: absolute; top: auto; right: auto; left: 50%; bottom: 24px; transform: translateX(-50%); width: 48px; height: 48px; background: #ffffff; color: #271e00; font-size: 24px; border-radius: 0; /* square box */ z-index: 3; } /* no top-right button on mobile -> name uses full head width */ .about .team-modal__head { padding-right: 0; } .about .team-modal__media { flex: 0 0 auto; width: 100%; max-width: none; align-self: stretch; aspect-ratio: 16 / 11; /* image keeps its rounded corners on mobile (per request); only the dialog itself is squared. */ } .about .team-modal__content { align-self: stretch; justify-content: flex-start; gap: 24px; min-height: 0; /* allow shrinking inside flex column, triggers its own overflow-y scroll */ overflow-y: auto; } .about .team-modal__name { font-size: 26px; } .about .team-modal__role { font-size: 18px; } } /* lock background scroll when modal open (html+body both for safety; Lenis scrolls documentElement so html needs hidden too). modal content scroll is ensured by JS adding data-lenis-prevent to .team-modal (Lenis ignores its wheel -> native scroll). */ html.team-modal-open, .about.team-modal-open { overflow: hidden; } .about.no-gsap .block-about-hero .about-hero__pin { height: auto; } .about.no-gsap .block-about-hero .about-hero__stage { height: auto; min-height: 100vh; padding: clamp(0px, 9.7222222222vw, 140px) 0 clamp(0px, 8.3333333333vw, 120px); } .about.no-gsap .block-about-hero .hero-grid { opacity: 1; } .about.no-gsap .block-about-hero .hero-grid__lines { -webkit-mask-image: none; mask-image: none; } .about.no-gsap .block-about-hero .hero-grid__bloom { display: none; } .about.no-gsap .block-about-hero .hero-grid__fill { display: none; } .about.no-gsap .block-about-hero .hero-grid__glow { display: none; } .about.no-gsap .block-about-hero .hero-grid__wave { display: none; } .about.no-gsap .block-about-hero .hero-grid__gap { display: none; } .about.no-gsap .block-about-hero .hero-landing { position: relative; } .about.no-gsap .block-about-hero .hero-landing__tiles { display: none; } .about.no-gsap .block-about-hero .hero-landing__copy { position: relative; inset: auto; pointer-events: auto; } .about.no-gsap .block-about-hero .hero-cfh { position: relative; left: auto; top: auto; opacity: 1; font-size: clamp(0px, 1.9444444444vw, 28px); color: #a1a4aa; margin-bottom: clamp(0px, 2.7777777778vw, 40px); transform: none; } .about.no-gsap .block-about-hero .hero-content { position: relative; inset: auto; margin-top: clamp(0px, 5vw, 72px); pointer-events: auto; } .about.no-gsap .block-about-hero .hero-statements { max-width: clamp(0px, 58.8888888889vw, 848px); } .about.no-gsap .block-about-hero .hero-statement { position: static; opacity: 1; margin: 0 0 clamp(0px, 2.2222222222vw, 32px); transform: none; pointer-events: auto; } .about.no-gsap .block-about-hero .hero-statement--mission { width: auto; } .about.no-gsap .scroll-prompt { display: none; } /* ===================================================================== * Kinsta adapter layer (no theme structure change, only styles JS-injected decorative elements + hides hero-consumed block-titles) * All selectors target Kinsta real block class names; don't add .block-about-* to non-hero sections to avoid polluting theme layout. * ===================================================================== */ /* module split: step1 (banner) and step2-8 (block-titles) each host, sharing .block-about-hero class. internal element class names of the two sections don't overlap (banner=hero-tile/landing; titles=hero-grid/cfh/statement), so existing .block-about-hero element rules can be reused by both sections. */ /* module 1 hero section (banner): make .block-about-hero rules (padding0/100vh/overflow) apply, override theme banner layout */ .about section.block-banner--about.block-about-hero { display: block; /* when viewport too short give banner a min height, avoiding scattered tiles/breadcrumb/H1/lead being crammed together. banner is not pinned, overflow scrolls naturally with page. */ min-height: 640px; } /* sync min height to inner pin/stage (default height:100vh); banner only, doesn't affect pinned block-titles stage. */ .about section.block-banner--about.block-about-hero .about-hero__pin, .about section.block-banner--about.block-about-hero .about-hero__stage { min-height: 640px; } /* module 2 host (block-titles): becomes a 100vh reveal stage in place. section-level 0,3,1 specificity overrides theme, and restores dark bg (class-level background is overridden by theme section.block-titles, so set explicitly here); hides empty .content / .items left after JS removes CFH/statement. */ .about section.block-titles.block-about-hero { display: block; min-height: 0; background: #0c0900; /* remove theme notch (per request clip-path:none) */ clip-path: none !important; margin-top: 0 !important; /* banner no longer pinned, scrolls away naturally, so no need to shift titles up (that would make titles' black bg cover banner like a mask). */ } /* exclude .about-hero__pin (initial) and .pin-spacer (placeholder ScrollTrigger wraps pin into after pinning, which holds up section scroll height — hiding it by mistake collapses section to 0 height, later sections overlap up). */ .about section.block-titles.block-about-hero > *:not(.about-hero__pin):not(.pin-spacer) { display: none !important; } /* ---- Investors (OUR INVESTORS = .block-logo-carousel): inject elliptical orange grid glow background ---- */ .block-logo-carousel { position: relative; overflow: hidden; /* clip the grid (taller than the section) so overflow is cropped instead of leaving top/bottom white gaps */ } /* per request: section drop padding/margin/notch (top gap moved to .content padding-top 158) */ .about main.site-main section.block-logo-carousel, .about section.block-logo-carousel.has-background { margin: 0 !important; padding: 0 !important; clip-path: none !important; } .block-logo-carousel .about-investors__grid { position: absolute; left: 50%; top: 50%; z-index: 0; width: 100%; aspect-ratio: 1440/843; opacity: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, rgba(244, 118, 33, 0.58) 0 1px, transparent 1px 105px), repeating-linear-gradient(to bottom, rgba(244, 118, 33, 0.58) 0 1px, transparent 1px 105px); background-position: -0.5px 0, 0 -0.5px; -webkit-mask-image: radial-gradient(ellipse 68% 55% at 50% 50%, #000 0%, #000 45%, rgba(0, 0, 0, 0.5) 70%, transparent 100%); mask-image: radial-gradient(ellipse 68% 55% at 50% 50%, #000 0%, #000 45%, rgba(0, 0, 0, 0.5) 70%, transparent 100%); transform: translate(-50%, -50%); } /* jank fix (measured): original ::before/::after used filter:blur(30px)/blur(7px) for glow, scrolling past this area repeatedly re-rasterizes the large blur layer -> avg 25ms/31 dropped frames. A/B confirmed marquee3k irrelevant, blur pseudo-elements were the culprit; GPU layer promotion/contain/halved blur all ineffective or worse. Switched to filter-less radial-gradient warm-orange glow (cheap on scroll, no re-raster) -> measured 60fps/0 drops, glow look preserved. */ .block-logo-carousel .about-investors__grid::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(244, 118, 33, 0.2), transparent 70%); } /* float Kinsta content above the ellipse */ .block-logo-carousel > .container { position: relative; z-index: 1; } /* logo gallery as seamless marquee: force single-row inline-flex track (override theme gallery grid) */ .block-logo-carousel .logo-carousel[data-marquee] { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; width: max-content; max-width: none; white-space: nowrap; gap: clamp(0px, 3.3333333333vw, 48px); will-change: transform; } .block-logo-carousel .logo-carousel[data-marquee] > figure { flex: 0 0 auto; margin: 0; } /* point 4: content vertical gap 64 (title block <-> logo marquee); gallery (=logo-carousel/marquee3k__copy same element) drop top/bottom margin. */ .about .block-logo-carousel .content { gap: clamp(0px, 4.4444444444vw, 64px); padding-top: clamp(0px, 10.9722222222vw, 158px); /* per request padding-top 158px */ } .about .block-logo-carousel .wp-block-gallery.logo-carousel, .about .block-logo-carousel .logo-carousel.marquee3k__copy { margin: 0; } /* ---- Investors title-block restored design: centered, $250M+ orange (mark)/raised white, heading 80px, centered max-width sub ---- */ /* point 3: investors title-block restored design (Figma Frame 992912, VERTICAL, itemSpacing 16): centered + overline(Fragment Mono 14/ls0.28/UPPER) -> h2($250M+ raised, Söhne 80/600/lh0.9/-0.02em, mark orange) -> sub(Söhne 20/400/lh1.35/#d4d6d8, 560 wide), inner spacing overline->h2=16, h2->sub=32. */ .about .block-logo-carousel .title-block { text-align: center; max-width: clamp(0px, 55.5555555556vw, 800px); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(0px, 1.1111111111vw, 16px); } .about .block-logo-carousel .title-block .overline, .about .block-logo-carousel .title-block .overline--pill { justify-content: center; font-size: clamp(0px, 0.9722222222vw, 14px); line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: -3px; /* per request */ } .about .block-logo-carousel .title-block h2.wp-block-heading { font-size: clamp(0px, 5.5555555556vw, 80px); line-height: 0.9; letter-spacing: -0.02em; margin: 0; } .about .block-logo-carousel .title-block > p.wp-block-paragraph:not(.overline) { max-width: clamp(0px, 38.8888888889vw, 560px); margin: clamp(0px, 1.1111111111vw, 16px) auto 0; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; color: #d4d6d8; } /* ---- Testimonial (block-testimonial): restore local _block-testimonial.scss "portrait + big quote + decorative quote mark + author" design. Kinsta structure is `.text-and-media > figure + .heading-and-description(p.overline + blockquote(>p + cite))`, which doesn't match theme .testimonial-* selectors, so theme styles don't hit and it renders full-width plain image. Remap by Kinsta real classes; values from compiled style.css (space()=clamp(0px, N/14.4 vw, Npx)). COO image left / CFO image right alternate naturally by DOM order. */ /* point 5: testimonial section vertical padding 84, its .content drops padding (spacing controlled by section). theme hits via section.block-testimonial.has-background(25/0/24), need same specificity + !important to override. */ .about section.block-testimonial.has-background, .about section.block-testimonial { padding: clamp(0px, 5.8333333333vw, 84px) 0 !important; margin-top: 0 !important; /* per request remove notch overlap */ clip-path: none !important; /* per request remove notch */ } .about .block-testimonial > .content, .about .block-testimonial .content { padding: 0 !important; } .about .block-testimonial .text-and-media { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0px, 5.8333333333vw, 84px); } /* design: portrait square, object-fit cover cropped to square (width reduced by 1/3: 684->456, 47.5vw->31.6667vw) */ .about .block-testimonial .text-and-media > figure.wp-block-image { flex: 0 0 clamp(0px, 31.6666666667vw, 456px); width: clamp(0px, 31.6666666667vw, 456px); max-width: clamp(0px, 31.6666666667vw, 456px); aspect-ratio: 1/1; margin: 0; } .about .block-testimonial .text-and-media > figure.wp-block-image img { /* !important overrides is-resized image's inline style="width:..px;height:auto" */ width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; } /* text column 565 wide (=quote 447 + decorative quote indent 118) */ .about .block-testimonial .heading-and-description { position: relative; flex: 0 1 clamp(0px, 39.2361111111vw, 565px); width: clamp(0px, 39.2361111111vw, 565px); min-width: 0; } .about .block-testimonial .heading-and-description > .overline { margin: 0 0 clamp(0px, 4.1666666667vw, 60px); color: #ffffff; } /* quote block: left padding to place decorative quote mark */ .about .block-testimonial .heading-and-description blockquote.wp-block-quote { position: relative; margin: 0; padding: 0 0 0 clamp(0px, 8.1944444444vw, 118px); border: 0; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: clamp(0px, 4.1666666667vw, 60px); height: clamp(0px, 4.1666666667vw, 60px); flex-shrink: 0; background-color: #f47621; -webkit-mask: url("data:image/svg+xml,%3Csvg width='59' height='60' viewBox='0 0 59 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M59 59.6134L33.3248 59.6134L33.3248 33.9395C33.3248 8.26428 57.1512 0 57.1512 0V14.1571C49.571 16.1882 44.4597 26.9327 46.3373 33.9395L58.9993 33.9395L59 59.6134ZM25.6739 59.6134L0 59.6134V33.9395C0 8.26429 23.8277 0 23.8277 0V14.1571C16.2462 16.1882 11.1356 26.9327 13.0125 33.9395L25.6745 33.9395L25.6739 59.6134Z' fill='white' /%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg width='59' height='60' viewBox='0 0 59 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M59 59.6134L33.3248 59.6134L33.3248 33.9395C33.3248 8.26428 57.1512 0 57.1512 0V14.1571C49.571 16.1882 44.4597 26.9327 46.3373 33.9395L58.9993 33.9395L59 59.6134ZM25.6739 59.6134L0 59.6134V33.9395C0 8.26429 23.8277 0 23.8277 0V14.1571C16.2462 16.1882 11.1356 26.9327 13.0125 33.9395L25.6745 33.9395L25.6739 59.6134Z' fill='white' /%3E%3C/svg%3E") no-repeat center/contain; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote p { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; font-weight: 400; letter-spacing: -0.02em; color: #d4d6d8; margin: 0; } /* cite = author: name+role is the main body (Söhne 500), followed by
for company line (orange mono small) */ .about .block-testimonial .heading-and-description blockquote.wp-block-quote cite { display: block; font-style: normal; margin-top: clamp(0px, 5vw, 72px); font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.6; font-weight: 500; letter-spacing: 0; color: #ffffff; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote cite mark { display: block; margin-top: 4px; background: transparent; font-family: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; font-size: clamp(0px, 0.8333333333vw, 12px); line-height: 1.4; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: #f47621; } @media screen and (max-width: 991.8px) { .about .block-testimonial .text-and-media { gap: 48px; align-items: flex-start; } .about .block-testimonial .heading-and-description { width: auto; flex: 1 1 0; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote { padding-left: 64px; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote::before { top: 0; width: 36px; height: 36px; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote p { font-size: 20px; letter-spacing: -0.02em; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote cite { font-size: 16px; line-height: 1.4; } } @media screen and (max-width: 767.8px) { .about .block-testimonial .text-and-media { flex-direction: column-reverse; align-items: stretch; gap: 24px; } .about .block-testimonial .text-and-media:has(> figure.wp-block-image:last-child) { flex-direction: column; } .about .block-testimonial .text-and-media > figure.wp-block-image { flex: none; width: 100%; max-width: none; min-width: 0; aspect-ratio: 1/1; } .about .block-testimonial .text-and-media > figure.wp-block-image img { height: 100% !important; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote { padding-left: 40px; } .about .block-testimonial .heading-and-description blockquote.wp-block-quote::before { width: 24px; height: 24px; } } /* ---- Story (THE STORY = .block-timeline): apply local story card layout onto Kinsta's .items > .item structure (centered narrow column + alternating image/text + middle card offset), with snake SVG path + glowing marker. all prefixed with `.about` to raise specificity, override theme's full-width layout; no DOM/theme file changes. */ .about section.block-timeline { position: relative; overflow: hidden; } /* background orange glow ellipse (decorative, reuse local story look) */ .about section.block-timeline::before, .about section.block-timeline::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; transform: translateY(-50%); } .about section.block-timeline::before { top: 27%; right: -12%; width: 63.4vw; height: 44.51vw; background: radial-gradient(ellipse at center, rgba(244, 118, 33, 0.3) 0%, rgba(244, 118, 33, 0) 68%); filter: blur(3.47vw); } .about section.block-timeline::after { top: 78%; left: -10%; width: 54.86vw; height: 30.63vw; background: radial-gradient(ellipse at center, rgba(244, 118, 33, 0.24) 0%, rgba(244, 118, 33, 0) 68%); filter: blur(3.47vw); } .about .block-timeline > .container { position: relative; z-index: 1; } /* ---- point 5/7: story title-block restored design (two title-blocks under .content: (1) main "Terra's history" (2) bottom "All systems go"). Figma Frame 51, VERTICAL, itemSpacing 16: overline(Fragment Mono 14/ls0.28/UPPER) -> h2(Söhne 64/600/lh1.05/-0.02em) -> sub(Söhne 20/400/lh1.35/#d4d6d8, 546 wide), inner spacing overline->h2=16, h2->sub=32 ---- */ .about .block-timeline .title-block { text-align: center; max-width: clamp(0px, 50.8333333333vw, 732px); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(0px, 1.1111111111vw, 16px); } .about .block-timeline .title-block .overline, .about .block-timeline .title-block .overline--pill { justify-content: center; font-size: clamp(0px, 0.9722222222vw, 14px); line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; } .about .block-timeline .title-block h2.wp-block-heading { font-size: clamp(0px, 4.4444444444vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; /* A2: dark-bg section titles (Terra's history / All systems go) designed white, theme default #53585f gray has too low contrast on black, override to white. */ color: #ffffff; } .about .block-timeline .title-block > p.wp-block-paragraph:not(.overline) { max-width: clamp(0px, 37.9166666667vw, 546px); margin: clamp(0px, 1.1111111111vw, 16px) auto 0; font-size: clamp(0px, 1.3888888889vw, 20px); line-height: 1.35; color: #d4d6d8; } /* point 5: first title-block (main heading) gets 82 spacing from .items below */ .about .block-timeline .content > .title-block:first-of-type { margin-bottom: clamp(0px, 5.6944444444vw, 82px); } /* point 7: second title-block (bottom "All systems go") margin-bottom 0, padding-top 82, padding-bottom 0 */ .about .block-timeline .content > .title-block:last-of-type { margin-bottom: 0; padding: clamp(0px, 5.6944444444vw, 82px) 0 0; } /* .items = local about-story__timeline (centered narrow column) + about-story__milestones (vertical flex column) merged */ .about .block-timeline .items { position: relative; z-index: 1; max-width: clamp(0px, 80.2777777778vw, 1156px); margin: 0 auto; /* point 6: items vertical padding 67/82 (space from main heading above and second heading block below). */ padding-top: clamp(0px, 4.6527777778vw, 67px); padding-bottom: clamp(0px, 5.6944444444vw, 82px); display: flex; flex-direction: column; gap: clamp(0px, 9.2361111111vw, 133px); } /* snake path layer (absolute, out of flex flow): inset:0 aligns with .items container (incl. its vertical padding), ignoring the effect of point-6 padding. */ .about .block-timeline .about-story__path { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .about .block-timeline .about-story__path .story-path-svg { width: 100%; height: 100%; display: block; } .about .block-timeline .about-story__path .story-path-progress { filter: drop-shadow(0 0 6px rgba(244, 118, 33, 0.8)); } /* point 8: story-marker — real SVG 4 layers (feGaussianBlur) restoring figma Group 40 four-ellipse glow. Ellipse12=8px bright core / Ellipse11=20px stroke ring / Ellipse10=28px stroke ring / Ellipse9=28px solid soft glow, each layer independently Gaussian-blurred (SVG +, see about.js STORY_SVG injection). filterUnits=userSpaceOnUse fills 160 viewBox to prevent clipping. marker body = 160px box (padding holds large soft glow), margin:-80 centers box on path point, translation handled by JS GSAP x/y(transform) -> blur layer cached once, only translated, no per-frame re-raster. WARNING: replaces old "four + CSS filter:blur" approach (per request, synced from static site about.html): userSpaceOnUse full-area filter avoids old approach's filter-region clipping bug under WebKit "zero-size anchor + GSAP-transformed ancestor" -> Safari likely displays correctly (no WebKit here, still needs real-device verification). */ .about .block-timeline .about-story__path .story-marker { position: absolute; top: 0; left: 0; width: 160px; height: 160px; margin: -80px 0 0 -80px; /* center box on path point; translation handled by JS GSAP x/y(transform) */ overflow: visible; /* don't clip soft glow overflowing the box */ pointer-events: none; opacity: 0; will-change: transform, opacity; } .about .block-timeline .about-story__path .story-marker i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box; /* border counts inside the diameter so rings stay 28/20px */ } .about .block-timeline .about-story__path .story-marker .sm-l4 { width: 28px; height: 28px; background: #f47621; filter: blur(16px); } .about .block-timeline .about-story__path .story-marker .sm-l3 { width: 28px; height: 28px; border: 1px solid #f47621; filter: blur(4.2px); } .about .block-timeline .about-story__path .story-marker .sm-l2 { width: 20px; height: 20px; border: 1px solid #f47621; filter: blur(1.8px); } .about .block-timeline .about-story__path .story-marker .sm-l1 { width: 8px; height: 8px; background: #f47621; filter: blur(1.5px); } /* .item = local .story-card: image/text side by side, space-between */ .about .block-timeline .items > .item { display: flex; align-items: center; justify-content: space-between; gap: clamp(0px, 2.7777777778vw, 40px); margin: 0; max-width: none; } /* DOM order fixed as "text -> image": row=image right (imgright), row-reverse=image left (imgleft) */ .about .block-timeline .items > .item.story-card--imgright { flex-direction: row; } .about .block-timeline .items > .item.story-card--imgleft { flex-direction: row-reverse; } .about .block-timeline .items > .item.story-card--inset-left { margin-left: 10.21%; } .about .block-timeline .items > .item.story-card--inset-right { margin-right: 10.21%; } /* figure.wp-block-image = local .story-card__media */ .about .block-timeline .item > figure.wp-block-image { position: relative; flex: 0 0 clamp(0px, 31.0416666667vw, 447px); width: clamp(0px, 31.0416666667vw, 447px); max-width: clamp(0px, 31.0416666667vw, 447px); margin: 0; overflow: hidden; } .about .block-timeline .item > figure.wp-block-image img { width: 100%; aspect-ratio: 447/456; object-fit: cover; display: block; } .about .block-timeline .item > figure.wp-block-image figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: clamp(0px, 2.7777777778vw, 40px) clamp(0px, 1.6666666667vw, 24px) clamp(0px, 1.3888888889vw, 20px); font-family: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; font-size: clamp(0px, 0.8333333333vw, 12px); line-height: 1.4; font-weight: 400; letter-spacing: 0.02em; color: #ffffff; text-align: left; text-transform: uppercase; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85)); } /* .item-text-box = local .story-card__text */ .about .block-timeline .item .item-text-box { flex: 1 1 auto; max-width: clamp(0px, 31.1111111111vw, 448px); } .about .block-timeline .item .item-text-box, .about .block-timeline .item .item-text { margin: 0; } /* overline = local .story-card__label (orange small label); top spacing separates multiple milestones */ .about .block-timeline .item .item-text p.overline { color: #f47621; margin: 0 0 clamp(0px, 1.1111111111vw, 16px); } .about .block-timeline .item .item-text p.overline ~ p.overline { margin-top: clamp(0px, 2.7777777778vw, 40px); } /* body paragraph = local .story-card__body */ .about .block-timeline .item .item-text p:not(.overline) { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-size: clamp(0px, 1.1111111111vw, 16px); line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #d4d6d8; margin: 0 0 clamp(0px, 1.1111111111vw, 16px); } .about .block-timeline .item .item-text p:last-child { margin-bottom: 0; } /* mobile: restore vertical stacking, remove offset, hide snake path (matches local) breakpoint $bp-lg->$bp-md (per request: story items/item card layout & path desktop->mobile switch moved to 767) */ @media screen and (max-width: 767.8px) { .about .block-timeline .items { max-width: none; gap: clamp(0px, 2.2222222222vw, 32px); } .about .block-timeline .items > .item { flex-direction: column !important; align-items: stretch; gap: clamp(0px, 2.2222222222vw, 32px); margin-left: 0; margin-right: 0; } .about .block-timeline .item > figure.wp-block-image { flex: none; width: 100%; max-width: none; } .about .block-timeline .item .item-text-box { max-width: none; } .about .block-timeline .about-story__path { display: none; } } /* ---- Ticker (.block-ticker): remove theme notch clip-path + drop padding/margin (per request), make it a full rectangular bar flush ---- */ .about section.block-ticker, .about .block-ticker { clip-path: none !important; padding: 0 !important; margin: 0 !important; } /* ---- Ticker: make .ticker-track a single-row inline-flex track for seamless marquee ---- */ .block-ticker .ticker-track[data-marquee] { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; width: max-content; max-width: none; white-space: nowrap; will-change: transform; } .block-ticker .ticker-track[data-marquee] > .ticker-item { flex: 0 0 auto; } /* container needs overflow:hidden to clip overflowing track (theme likely has it; add as fallback) */ .block-ticker .ticker-track[data-marquee] { overflow: visible; } /* ============================================================================ Responsive patch (2026-06-17) — aligned to theme assets/scss/helpers/_mixins.scss typography rules. Theme typography mixins set a "fixed px floor" at @include until($bp-lg/$bp-md/$bp-sm), while this adapter's many font-size:clamp(0px, N vw, max) lack that floor -> on narrow screens font shrinks toward 0 by vw (measured at 576 wide: story body 6.4px, figcaption 4.8px, investors sub 5.6px, nearly unreadable). Below, add px floors to LIVE (Kinsta real class) elements per theme mixin until values. Breakpoints strictly aligned to theme: $bp-lg 992 / $bp-md 768 / $bp-sm 576 (.2px to avoid theme boundary overlap). Note: margin/gap/padding clamp(0,vw,max) get no floor — theme space() also has none, shrinking spacing on narrow screens is "theme's intentional behavior", only font-size needs a floor. ============================================================================ */ @media screen and (max-width: 991.8px) { /* hero lead (design 16px, ~= p2_regular -> until-lg 15 [spec update 14->15]) */ .block-about-hero .hero-landing__lead { font-size: 15px; line-height: 1.5; } /* OUR INVESTORS title block: h2 "$250M+ raised"(display 80 -> until-lg 60), sub(p1_regular 20 -> 16), overline pill(Monospace_1 14 -> 12) */ .about .block-logo-carousel .title-block h2.wp-block-heading { font-size: 60px; line-height: 0.95; } .about .block-logo-carousel .title-block > p.wp-block-paragraph:not(.overline) { font-size: 16px; } .about .block-logo-carousel .title-block .overline, .about .block-logo-carousel .title-block .overline--pill { font-size: 12px; } /* THE STORY title block: h2 "Terra's history"/"All systems go"(h1 64 -> until-lg 48), sub(p1 20 -> 16), overline(Monospace_1 -> 12) */ .about .block-timeline .title-block h2.wp-block-heading { font-size: 48px; line-height: 1; } .about .block-timeline .title-block > p.wp-block-paragraph:not(.overline) { font-size: 16px; } .about .block-timeline .title-block .overline, .about .block-timeline .title-block .overline--pill { font-size: 12px; } } /* story cards (items>item) body (p2_regular 16 -> 14), figcaption (caption 12 fixed) font floor. breakpoint $bp-lg->$bp-md (per request: follows items/item card moving to 767; 768-991 uses desktop vw curve) */ @media screen and (max-width: 767.8px) { .about .block-timeline .item .item-text p:not(.overline) { font-size: 15px; line-height: 1.5; } /* multi-milestone cards (2/3) stack two .item-text (wp-block-group) modules; desktop separates them with the PC-only "item-text margin-top 74" rule, which mobile lacks (base .item-text margin:0) -> they touch on phones. Restore a gap between consecutive milestone modules on mobile (first stays flush to the image). */ .about .block-timeline .item .item-text-box > .item-text:not(:first-child) { margin-top: 40px; } .about .block-timeline .item > figure.wp-block-image figcaption { font-size: 12px; } } @media screen and (max-width: 767.8px) { /* display second step: theme display @until-md 54 */ .about .block-logo-carousel .title-block h2.wp-block-heading { font-size: 54px; } /* h1 second step (spec update): story title H1 -> 36/105% */ .about .block-timeline .title-block h2.wp-block-heading { font-size: 36px; line-height: 1.05; } } @media screen and (max-width: 575.8px) { /* small screen (spec update): Display -> 40/100%, H1 -> 36/105% */ .about .block-logo-carousel .title-block h2.wp-block-heading { font-size: 40px; line-height: 1; } .about .block-timeline .title-block h2.wp-block-heading { font-size: 36px; line-height: 1.05; } } /* ---------------------------------------------------------------------------- THE STORY mobile streamline path: desktop is horizontal snake (viewBox 1156x2356), mobile cards stack vertically, horizontal snake gets distorted by preserveAspectRatio=none (so originally <=992 simply display:none). Changed to "left vertical timeline track": path layer collapses to a thin left bar, vertical line runs through, marker descends along it; cards shift right to free the left slot. SVG vertical path rebuilt by about.js matchMedia branch. ---------------------------------------------------------------------------- */ @media screen and (max-width: 767.8px) { /* free left slot: items left padding holds the track; right padding symmetric (point 6); cards no longer offset (1691 block set column) breakpoint $bp-lg->$bp-md (per request) */ .about .block-timeline .items { padding-left: 34px; padding-right: 34px; } /* override 1706's display:none — re-show and collapse to a 34px wide left vertical bar */ .about .block-timeline .about-story__path { display: block; inset: 0 auto 0 0; width: 34px; } .about .block-timeline .about-story__path .story-path-svg { width: 100%; height: 100%; } } /* ---------------------------------------------------------------------------- hero scattered tiles: <=768 already scaled to 0.62 (see line 184); <=576 scale further, reduce edge overflow look. ---------------------------------------------------------------------------- */ @media screen and (max-width: 575.8px) { .block-about-hero .hero-tile-wrap { width: calc(var(--s, 140px) * 0.46); height: calc(var(--s, 140px) * 0.46); margin-left: calc(var(--s, 140px) * 0.46 / -2); margin-top: calc(var(--s, 140px) * 0.46 / -2); } } /* ============================================================================ Responsive patch round 2 (2026-06-17) — per user's 7-point feedback, referencing pulled theme css/scss. ============================================================================ */ @media screen and (max-width: 991.8px) { /* point 1: hero copy container max-width too small (576 only 273px) -> follow theme .container (until-lg:100%+16px), let heading use full width, text no longer squeezed. */ .block-about-hero .hero-landing__copy.container { max-width: 100%; /* point 4 (round 3): add some padding on both sides, text not flush to edge */ padding-left: 24px; padding-right: 24px; } /* point 4 (round 3): tiles must "all show, surround text". Original *1.4 outward push moved corner tiles (lx 0.1%/99.9%) out of viewport, clipped. Changed to slight inward press (*0.8): extreme tiles return to ~10%/90% -> all fully visible, still flanking the text. */ .block-about-hero .hero-tile-wrap { left: calc(50% + (var(--lx, 50%) - 50%) * 0.8); } /* point 3: investors title-block responsive max-width 100% (was 55.55vw=320px) */ .about .block-logo-carousel .title-block { max-width: 100%; } /* point 7: story title-block responsive remove max-width (was 50.83vw=293px) */ .about .block-timeline .title-block { max-width: 100%; } /* point 4: investors logo item = .logo-carousel(figure.wp-block-gallery) > figure.wp-block-image, width shrinks by vw to 71px (img only 32px tall; data-marquee not on element, so [data-marquee] rule misses). Add floor per theme .logo-box until-lg 160; img fills figure, by ratio (orig 192x88). */ .about .block-logo-carousel .logo-carousel > figure.wp-block-image { width: 160px; max-width: 160px; } .about .block-logo-carousel .logo-carousel > figure.wp-block-image img { width: 100%; height: auto; } /* point 2 extra: testimonial company line (cite mark, Fragment Mono space(12) no floor) -> 576=4.8px/375=3.1px, add 12px */ .about .block-testimonial .heading-and-description blockquote.wp-block-quote cite mark { font-size: 12px; } } /* point 5: when stacking vertically on mobile remove offset inset margins (orig margin 10.21%=52px, compound-class specificity higher than 1691 block's margin:0 so not overridden) -> same specificity, zero out explicitly later. breakpoint $bp-lg->$bp-md (per request: follows items/item layout moving to 767) */ @media screen and (max-width: 767.8px) { .about .block-timeline .items > .item.story-card--inset-left { margin-left: 0; } .about .block-timeline .items > .item.story-card--inset-right { margin-right: 0; } } @media screen and (max-width: 767.8px) { /* point 4: theme .logo-box until-md 132 second step */ .about .block-logo-carousel .logo-carousel > figure.wp-block-image { width: 132px; max-width: 132px; } } /* ============================================================================ Responsive patch round 3 (2026-06-17) — remove text block max-widths / hero heading padding / story path snake gaps. ============================================================================ */ @media screen and (max-width: 991.8px) { /* round 3 point 1: title-block sub (wp-block-paragraph) still has 38.8/37.9vw max-width, even though title block is 100% text still squeezed -> same selector same specificity later set 100%, let sub fill container width. */ .about .block-logo-carousel .title-block > p.wp-block-paragraph:not(.overline) { max-width: 100%; } .about .block-timeline .title-block > p.wp-block-paragraph:not(.overline) { max-width: 100%; } /* round 3 point 3: hero lead remove 38.68vw max-width, fill copy container width. */ .block-about-hero .hero-landing__lead { max-width: 100%; } /* round 3 extra 2: remove hero-statements 52.77vw max-width, fill; keep 24 padding on sides, not flush. */ .block-about-hero .hero-statements { max-width: 100%; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* round 3 extra 1: hero-cfh absolutely centered + nowrap, mobile original min 40px easily overflows horizontally -> lower font and add side padding. */ .block-about-hero .hero-cfh { font-size: clamp(28px, 6.4vw, 56px); max-width: 100%; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } } /* round 3 point 7: increase gap between items (give snake S room to weave through; use real px floor, avoid vw collapsing to 0 on small screens). path layer restored to full coverage (not 34px left bar), about.js matchMedia generates snake d dynamically by item positions. breakpoint $bp-lg->$bp-md (per request: follows items/item layout & path moving to 767) */ @media screen and (max-width: 767.8px) { .about .block-timeline .items > .item { gap: 32px; } .about .block-timeline .items { /* override 1693's gap clamp: item gap increased to 96, S has enough vertical room to pass through */ gap: 96px; } .about .block-timeline .about-story__path { display: block; inset: 0; /* override round 2's 34px left bar: full coverage of .items, snake spans left/right gutters */ width: auto; } } @media screen and (max-width: 575.8px) { /* small screen hero-cfh drop one more step, ensure nowrap doesn't overflow */ .block-about-hero .hero-cfh { font-size: clamp(24px, 7.2vw, 40px); } /* small screen item gap tightened a bit */ .about .block-timeline .items { gap: 72px; } } /* ============================================================================ bug fix (2026-06-17 round 4) — banner text/tile overlap. ============================================================================ */ /* bug1/2: on mobile text is near full-width, centered; the two middle tiles (5th ly41.9 / 6th ly45.1) fall right in the heading text's vertical range and get covered (last round's *0.8 inward press made it worse). No horizontal room on sides, so move these two to the blank areas above/below center (5th -> upper-center / 6th -> lower-center), keeping text gap, all images still fully shown. --lx/--ly written by JS in inline style, need !important to override; left still uses *0.8 calc(--lx=50% -> centered). */ @media screen and (max-width: 991.8px) { .block-about-hero .hero-landing__tiles .hero-tile-wrap:nth-child(5) { --lx: 50% !important; --ly: 11% !important; } .block-about-hero .hero-landing__tiles .hero-tile-wrap:nth-child(6) { --lx: 50% !important; --ly: 88% !important; } } /* ============================================================================ PC (>=992px) specific tweaks (user-specified, PC only; mobile/tablet don't match this query = auto-removed responsively). placed at file end -> at equal specificity with default rules, the later wins, stably overriding PC appearance. ============================================================================ */ @media screen and (min-width: 992px) { /* 1. investors logo-carousel .content bottom padding 220 */ .about .block-logo-carousel .content { padding-bottom: clamp(0px, 15.2777777778vw, 220px); } /* 2. testimonial: when "text left image right" (figure is last child of .text-and-media) section bottom 107; heading-and-description PC adds left padding 60, column width 684 */ .about section.block-testimonial.has-background:has(.text-and-media > figure.wp-block-image:last-child), .about section.block-testimonial:has(.text-and-media > figure.wp-block-image:last-child) { padding-bottom: 107px !important; } .about .block-testimonial .heading-and-description { flex: 0 1 clamp(0px, 47.5vw, 684px); width: clamp(0px, 47.5vw, 684px); } /* padding-left only for "text-left / image-right" (figure is last child); "image-left / text-right" (figure first) has no left indent */ .about section.block-testimonial:has(.text-and-media > figure.wp-block-image:last-child) .heading-and-description { padding-left: clamp(0px, 4.1666666667vw, 60px); } /* 3. story timeline .content vertical padding 118 / 116 */ .about .block-timeline .content { padding-top: clamp(0px, 8.1944444444vw, 118px); padding-bottom: clamp(0px, 8.0555555556vw, 116px); } /* 4. timeline title-block: gap 0; overline bottom 12; sub top 33 / max-width 468 */ .about .block-timeline .title-block { gap: 0; } .about .block-timeline .title-block .overline, .about .block-timeline .title-block .overline--pill { margin-bottom: clamp(0px, 0.8333333333vw, 12px); } .about .block-timeline .title-block > p.wp-block-paragraph:not(.overline) { margin: clamp(0px, 2.2916666667vw, 33px) auto 0; max-width: clamp(0px, 32.5vw, 468px); } /* 5. milestone image figcaption padding 8 / 10 */ .about .block-timeline .item > figure.wp-block-image figcaption { padding: clamp(0px, 0.5555555556vw, 8px) clamp(0px, 0.6944444444vw, 10px); } /* 6. item text overline bottom 15 */ .about .block-timeline .item .item-text p.overline { margin-bottom: clamp(0px, 1.0416666667vw, 15px); } /* 7. item body paragraph bottom 8 */ .about .block-timeline .item .item-text p:not(.overline) { margin-bottom: clamp(0px, 0.5555555556vw, 8px); } /* 8. item-text top 74, first item-text in card is 0 (multi-milestone separation) */ .about .block-timeline .item .item-text { margin-top: clamp(0px, 5.1388888889vw, 74px); } .about .block-timeline .item .item-text:first-child { margin-top: 0; } /* 9. bottom title-block (All systems go): top 65; h2 bottom 27 */ .about .block-timeline .content > .title-block:last-of-type { padding-top: clamp(0px, 4.5138888889vw, 65px); } .about .block-timeline .content > .title-block:last-of-type h2.wp-block-heading { margin-bottom: clamp(0px, 1.875vw, 27px); } /* 10. bottom title-block overline bottom 18 */ .about .block-timeline .content > .title-block:last-of-type .overline, .about .block-timeline .content > .title-block:last-of-type .overline--pill { margin-bottom: clamp(0px, 1.25vw, 18px); } /* 11. bottom title-block paragraph: Söhne 400/16/lh1.4/ls0/centered, bottom 8, last 0 */ .about .block-timeline .content > .title-block:last-of-type p.wp-block-paragraph:not(.overline) { font-family: "Söhne", -apple-system, "Segoe UI", sans-serif; font-weight: 400; font-size: clamp(0px, 1.1111111111vw, 16px); line-height: 1.4; letter-spacing: 0; text-align: center; margin-top: 0; /* remove top spacing (override generic title-block paragraph margin-top:33) */ padding-top: 0; margin-bottom: clamp(0px, 0.5555555556vw, 8px); } .about .block-timeline .content > .title-block:last-of-type p.wp-block-paragraph:not(.overline):last-child { margin-bottom: 0; } } /* ============================================================================ Team PC (>=992px) tweaks (user-specified, PC only; mobile/tablet don't match = unchanged) ============================================================================ */ @media screen and (min-width: 992px) { /* content vertical padding 118 / 64 */ .about .block-team-section .content { padding-top: clamp(0px, 8.1944444444vw, 118px); padding-bottom: clamp(0px, 4.4444444444vw, 64px); } /* heading-block: overline left padding 4 + bottom 21; heading-block bottom 83 */ .about .block-team-section .heading-block > .overline { padding-left: clamp(0px, 0.2777777778vw, 4px); margin-bottom: clamp(0px, 1.4583333333vw, 21px); } .about .block-team-section .heading-block { margin-bottom: clamp(0px, 5.7638888889vw, 83px); } /* group label (Colorado/Vancouver team): remove orange square, full-row orange, bottom 19 */ .about .block-team-section .team-group > .overline { color: #3C393C; margin-bottom: clamp(0px, 1.3194444444vw, 19px); } .about .block-team-section .team-group > .overline::before { display: none; } /* cards: image drop margin; info add padding + left/right/bottom border (top meets image) */ .about .block-team-section .team-card__media { margin: 0; } .about .block-team-section .team-card__info { padding: clamp(0px, 1.1111111111vw, 16px) clamp(0px, 1.6666666667vw, 24px); border-left: 1px solid #e7e8e9; border-right: 1px solid #e7e8e9; border-bottom: 1px solid #e7e8e9; } /* arrow mask-size already unified in base rule to 24px 24px (24x24 viewBox re-exported), no extra override here */ /* grid: row gap 32, bottom 67 */ .about .block-team-section .team-grid { row-gap: clamp(0px, 2.2222222222vw, 32px); margin-bottom: clamp(0px, 4.6527777778vw, 67px); } } /* mobile: spacing between team groups (Leadership / Colorado / Vancouver) = 40px (per request). base rule is clamp(0px,3.33vw,48px) which collapses to ~13px on phones. */ @media screen and (max-width: 767.8px) { .about .block-team-section .team-group + .team-group { margin-top: 40px; } } .about .block-logo-carousel .logo-carousel[data-marquee] > figure, .about .block-logo-carousel .logo-carousel.marquee3k__copy > figure { background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), linear-gradient(0deg, rgba(244, 118, 33, 0.03), rgba(244, 118, 33, 0.03)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .about .team-modal__dialog:focus, .about .team-modal__dialog:focus-visible { outline: none !important; } .about .team-modal__close, .about .team-modal__close:hover, .about .team-modal__close:focus, .about .team-modal__close:focus-visible, .about .team-modal__close:focus-within, .about .team-modal__close:active { outline: none !important; box-shadow: none !important; border-color: transparent !important; -webkit-tap-highlight-color: transparent !important; } .about .block-logo-carousel .logo-carousel[data-marquee], .about .block-logo-carousel .logo-carousel.marquee3k__copy { gap: 48px; } @media screen and (max-width: 767.8px) { .about .block-logo-carousel .logo-carousel[data-marquee], .about .block-logo-carousel .logo-carousel.marquee3k__copy { gap: 24px; } }