/* Shared Pineverse styles moved from pineverse.css. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #060c0c; --accent: #B7F66E; --btn-bg: #021717; --text-white: #ffffff; --card-bg: #242423; --card-border: #1a2c2c; --nav-bg: #080808; } /* Lenis helpers. NOTE: do NOT add the `html.lenis, html.lenis body { height: auto }` rule from the Lenis docs here. It is only needed for a wrapper/content setup; Lenis scrolls the window directly on this site. With it, grows to the full document height and its background then paints over `.services-stack` (z-index: -1), which blanks the whole services section. */ .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ══════════════════════════════════════════════════════ ONE VERTICAL RHYTHM FOR THE WHOLE SITE Identical to the About page's --ab-section and the Services page's --sv-section, so a section break is the same distance on every page. ══════════════════════════════════════════════════════ */ :root { /* ── the two site rhythms ── --pv-section is the vertical one (120px at 1440). --pv-gutter is the horizontal one: ONE left/right gutter for every band on every page, 84px at 1440. Before this, each page carried its own set (--pd-g60/83/121/124, --rl-g55/62/84/94/121, --ab-g65/120/131, --jb-gl/gr, --sv-*, --st-g38) straight off its own Figma frame, so a single page could step 43 → 62 → 84 → 121 down the scroll and the shared contact/FAQ blocks landed on a different gutter on every page. Every one of those tokens now resolves to this, including inside the responsive tiers, so there is exactly one number to change. clamp 84 at 1440 · 59.7 at 1024 · 44.8 at 768 · 23.5 at 402 · 20 floor max() pins the content to a centred 1272 canvas above 1440 */ --pv-section: clamp(72px, 8.34vw, 120px); /* 120px at 1440 */ --pv-gutter: max(clamp(20px, 5.833vw, 84px), calc(50% - 636px)); } html, body { width: 100%; height: 100%; background: transparent; font-family: 'Host Grotesk', sans-serif; color: var(--text-white); overflow: visible; } /* The page colour lives on only, so it propagates to the canvas instead of being painted as 's own box — which would sit on top of `.services-stack` (z-index: -1) and hide the sticky video slides. */ html { background: #000000; } /* ────── HEADER ────────────────────────────────── */ header { position: fixed; top: 0; left: 0; width: 100%; /* Figma 1440: logo frame x=52 | nav pill right edge x=1401 (gutter 39). max() keeps the exact px below 1440 and pins to the 1440 canvas above it. */ padding-left: var(--pv-gutter); padding-right: var(--pv-gutter); display: flex; align-items: center; justify-content: space-between; z-index: 9999; height: 107px; transition: transform 0.4s ease; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } /* The header logo used to render at its Figma 267px, which fitted when the header ran on a 52/39 gutter. On the shared --pv-gutter (84 at 1440) the bar has 1272px to place 267 + the 1006px unrolled pill = 1273, so the two touched and flex squeezed them. 200 leaves 66px of air at 1440 and still clears the 792px compressed pill down at 1081. */ .logo-img { width: clamp(132px, 13.9vw, 200px); height: auto; } .logo-icon { width: 34px; height: 34px; } .logo-name { font-size: 21px; font-weight: 600; color: var(--text-white); letter-spacing: -0.3px; } .nav-pill { display: flex; align-items: center; /* Figma: 77px gap between nav labels = 21px link padding + 35px flex gap + 21px */ gap: 35px; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.07); border-radius: 8.26px; /* Figma: first label sits 36px from pill left, button 18px from pill right */ padding: 10px 17px 10px 14px; height: 77px; } .nav-pill a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 16px; font-weight: 500; padding: 9px 21px; border-radius: 6px; white-space: nowrap; transition: color 0.2s; } .nav-pill a:hover { color: #fff; } .btn-partner { background: var(--btn-bg) !important; color: var(--accent) !important; font-family: 'Host Grotesk', sans-serif !important; font-weight: 500 !important; font-size: 16px !important; line-height: 116% !important; border-radius: 9px !important; /* Figma: 155 x 53 button, 77px from the "Technology" label */ width: 155px; height: 53px; padding: 0 !important; margin-left: 21px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(183,246,110,0.12) !important; transition: background 0.25s, box-shadow 0.25s !important; } .btn-partner:hover { background: #032424 !important; box-shadow: 0 0 20px rgba(183,246,110,0.12) !important; } /* ────── HAMBURGER ─────────────────────────────── */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; z-index: 201; } .hamburger span { display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.32s cubic-bezier(0.4,0,0.2,1); transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ────── MOBILE DRAWER ─────────────────────────── */ /* The old full-height side drawer is gone. The nav links now live INSIDE `.nav-pill` and the pill itself unrolls to reveal them — see "The pill UNROLLS" near the end of this file. */ .btn-partner-mobile { margin-top: 22px !important; background: var(--btn-bg) !important; color: var(--accent) !important; font-size: 15px !important; font-weight: 500 !important; border-radius: 9px !important; padding: 14px 18px !important; text-align: center !important; border: 1px solid rgba(183,246,110,0.18) !important; border-bottom: 1px solid rgba(183,246,110,0.18) !important; } .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.52); z-index: 199; opacity: 0; transition: opacity 0.35s; } .drawer-overlay.open { opacity: 1; } /* ────── SPLINE ─────────────────────────────────── */ .spline-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: auto; } spline-viewer { width: 100%; height: 100%; display: block; } /* ════════════════════════════════════════════════ HERO ════════════════════════════════════════════════ */ .hero { position: relative; z-index: 1; background: transparent; width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; align-items: end; /* Figma: copy at x=62, cards end at x=1383 (57px gutter) */ padding-top: 107px; padding-left: var(--pv-gutter); padding-right: var(--pv-gutter); overflow: hidden; } .hero-text, .hero-subtitle, .cards-wrap { position: relative; z-index: 1; } .hero-left { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(120px, 18vh, 200px) 0 clamp(40px, 6vh, 80px) 0; min-width: 0; height: 100%; } .hero-heading { font-size: clamp(28px, 3.9vw, 56px); font-weight: 400; line-height: 116%; letter-spacing: 0; text-transform: capitalize; color: var(--text-white); } .hero-heading em { font-family: 'Behind The Nineties', sans-serif; font-style: italic; font-weight: 500; font-size: inherit; /* inherits clamp(28px,3.9vw,56px) from parent — prevents em being bigger than heading on small screens */ line-height: 116%; letter-spacing: 0%; text-transform: capitalize; color: var(--accent); } /* == WEBFONTS - Google families, served from this project ========= Host Grotesk, Kaisei Decol and DM Sans used to arrive via a render-blocking stylesheet from fonts.googleapis.com, which was 89 KiB on the wire and sat directly on the critical path: the browser could not learn which woff2 to fetch until that CSS had arrived, so the real chain was HTML -> googleapis CSS -> gstatic woff2, across two extra origins paying DNS + TCP + TLS each. Lighthouse measured it at ~420 ms and called it the largest render-blocking resource on the page. Almost all of those bytes were one family. Kaisei Decol is a Japanese serif: its CSS carries 369 @font-face blocks covering hundreds of CJK unicode ranges - 334 KB of the 338 KB total - for a face this site uses on a handful of English headings. Only the Latin faces are kept here (6 of 369); the site is en-IN, so nothing that renders is lost. These are the SAME woff2 files Google serves, and every declaration below (family, weight, style, unicode-range, display) is copied from Google's own stylesheet untouched. The browser therefore resolves the same face for the same text as before - typography is unchanged, only the delivery moved. Served same-origin and immutable for a year. Do not hand-edit the URLs or the unicode ranges; regenerate instead. ================================================================== */ @font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/gf/hostgrotesk-300_800-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/gf/hostgrotesk-300_800-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kaisei Decol'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gf/kaiseidecol-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Kaisei Decol'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gf/kaiseidecol-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kaisei Decol'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/gf/kaiseidecol-500-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Kaisei Decol'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/gf/kaiseidecol-500-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kaisei Decol'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/gf/kaiseidecol-700-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Kaisei Decol'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/gf/kaiseidecol-700-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gf/dmsans-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gf/dmsans-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/gf/dmsans-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/gf/dmsans-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/gf/dmsans-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/gf/dmsans-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Md-It.woff2') format('woff2'); font-weight: 500; font-style: italic; } /* the family ships italic-only; each face is registered for both styles so upright usages (Figma's "Semibold") resolve to real glyphs instead of a synthetic system-serif fallback */ @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-It.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-It.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Md-It.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Md-It.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Smbd-It.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Smbd-It.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Bd-It.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Bd-It.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Xbd-It.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Xbd-It.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Blk-It.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Behind The Nineties'; src: url('../fonts/Behind-The-Nineties-Blk-It.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; } .hero-subtitle { font-size: clamp(11px, 1.04vw, 15px); font-weight: 400; line-height: 116%; color: rgba(255,255,255,0.50); max-width: 455px; } .cards-wrap { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 18px; padding: 0 0 clamp(40px, 6vh, 80px) 0; min-width: 0; height: 100%; } .card { width: 440px; max-width: 100%; height: auto; min-height: 120px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14.25px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; cursor: pointer; transition: border-color 0.25s, transform 0.22s; overflow: hidden; } .card:hover { border-color: rgba(183,246,110,0.22); transform: translateY(-2px); } .card-body { flex: 1; min-width: 0; } .card-title { font-size: 18px; font-weight: 700; line-height: 116%; margin-bottom: 6px; color: rgba(255,255,255,0.85); } .card-desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.45); } .card-thumb { width: 151.6px; height: 101.2px; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .card:hover .card-thumb img { transform: scale(1.05); } /* ════════════════════════════════════════════════ HERO RESPONSIVE ════════════════════════════════════════════════ */ @media (min-width: 1440px) { .card { width: 440px; } .card-thumb { width: 151.6px; height: 101.2px; } } @media (max-width: 1380px) { .card { width: 410px; } } @media (max-width: 1280px) { /* --pv-gutter already scales; these tiers must not re-pin it */ .cards-wrap { gap: 14px; } .card { width: 380px; } .card-thumb { width: 130px; height: 88px; } } @media (max-width: 1100px) { .card { width: 340px; } .card-title { font-size: 16px; } .card-desc { font-size: 12px; } .card-thumb { width: 110px; height: 74px; } .cards-wrap { gap: 12px; } } @media (max-width: 1024px) { .card { width: 300px; } .card-thumb { width: 95px; height: 65px; } .hero { padding-top: 90px; } } /* Figma nav spacing needs ~1042px of header; tighten it before the burger kicks in at 960 */ @media (max-width: 1150px) and (min-width: 961px) { .nav-pill { gap: 14px; padding: 10px 12px; } .nav-pill a { padding: 9px 12px; } .btn-partner { margin-left: 8px; } } @media (max-width: 960px) { .nav-pill { display: none; } .hamburger { display: flex; } header { height: 70px; } .hero { grid-template-columns: 1fr; height: auto; min-height: 100vh; min-height: 100dvh; padding: 70px var(--pv-gutter) 0; overflow: visible; } .hero-left { padding: 40px 0 24px; justify-content: flex-start; gap: 20px; } .hero-heading { font-size: 40px; } .hero-subtitle { font-size: 14px; max-width: 100%; } .cards-wrap { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; padding: 0 0 48px; gap: 14px; } .card { width: calc(50% - 7px); min-width: 240px; max-width: 360px; min-height: 110px; } .card-thumb { width: 80px; height: 80px; } } @media (max-width: 560px) { .hero-heading { font-size: 60px; } .cards-wrap { flex-direction: column; align-items: center; } .card { width: 100%; max-width: 380px; } } @media (max-width: 380px) { .hero-heading { font-size: 50px; } } /* ════════════════════════════════════════════════ CONTACT SECTION ════════════════════════════════════════════════ */ .contact-section { width: 100%; background: #F1FFEF; /* Figma: info column x=170, form rules end x=1317 (gutter 123) */ padding: 80px var(--pv-gutter); color: #021616; } .contact-container { display: grid; grid-template-columns: 341px 11px minmax(0, 1fr); /* Figma: info column ends 511 → divider 547 → form column 593 */ column-gap: 36px; align-items: start; } /* ── Divider ── */ .contact-divider { width: 1px; background: rgba(2, 23, 23, 0.26); align-self: stretch; min-height: 700px; justify-self: start; } /* ══ LEFT COLUMN ══════════════════════════════ */ .contact-heading { font-size: 64px; line-height: 115.99%; margin-bottom: 48px; font-weight: 400; } .contact-heading-italic { font-family: 'Behind The Nineties', serif; font-weight: 500; font-style: italic; font-size: 64px; line-height: 1.16; letter-spacing: 0; text-transform: capitalize; background: linear-gradient(to right, #021616, #0F2814, #A7FC00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .contact-heading-italic em { font-style: italic; color: #A7FC00; font-family: 'Behind The Nineties', serif; } .contact-heading-plain { font-family: 'Host Grotesk', sans-serif; font-weight: 400; font-style: normal; color: #021616; } /* Info Items */ .contact-info-item { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; } .contact-icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; } .contact-info-label { font-family: 'Host Grotesk', sans-serif; font-size: 22.87px; font-weight: 400; color: #025E73; margin-bottom: 4px; } .contact-info-text { font-family: 'Host Grotesk', sans-serif; font-size: 16px; font-weight: 400; color: #025E73; line-height: 1.55; } /* Map Card */ /* ══════════════════════════════════════════════════════ CONTACT — LOCATION MAP CARD (3D) A bezel that holds a plate tilted in real 3D. `.contact-map-stage` owns the perspective; `.contact-map-plate` is the rotated plane. The pin is pushed forward on Z while the shadow it casts stays on the plane, so the two separate as the card tilts — that parallax is what sells the depth, not a drop-shadow. Hover eases the plate toward flat and lifts the pin. The Google iframe is the real map underneath; it stays pointer-inert and the footer link is the only control. ══════════════════════════════════════════════════════ */ .contact-map-card { --map-ink: #021717; --map-lime: #a7fc00; --map-tilt: 10deg; --map-lift: 26px; width: 100%; max-width: 337px; margin-bottom: 28px; padding: 9px 9px 0; border-radius: 20px; border: 1px solid rgba(44, 131, 24, 0.2); /* the bezel: a lit top edge, a soft body, and a grounded outer shadow */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(232, 246, 228, 0.72) 46%, rgba(214, 238, 208, 0.9)), #eaf6e6; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(2, 34, 12, 0.06) inset, 0 2px 6px rgba(2, 22, 22, 0.06), 0 18px 34px -18px rgba(2, 40, 16, 0.34); transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .contact-map-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(2, 34, 12, 0.06) inset, 0 2px 6px rgba(2, 22, 22, 0.06), 0 30px 46px -20px rgba(2, 40, 16, 0.4); } /* ── the 3D stage ── */ .contact-map-stage { position: relative; perspective: 780px; perspective-origin: 50% 8%; } /* the ambient patch the plate appears to sit on */ .contact-map-glow { position: absolute; left: 8%; right: 8%; bottom: -4px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(2, 40, 16, 0.34) 0%, rgba(2, 40, 16, 0.14) 45%, rgba(2, 40, 16, 0) 74%); filter: blur(7px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .contact-map-card:hover .contact-map-glow { opacity: 0.7; transform: scaleX(0.94); } .contact-map-plate { position: relative; transform: rotateX(var(--map-tilt)) scale(0.975); transform-style: preserve-3d; transform-origin: 50% 100%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .contact-map-card:hover .contact-map-plate { transform: rotateX(3deg) scale(1); } /* ── the map itself ── */ .contact-map-iframe-wrap { position: relative; width: 100%; height: 152px; border-radius: 13px; overflow: hidden; transform-style: preserve-3d; box-shadow: 0 0 0 1px rgba(2, 40, 16, 0.14), 0 0 0 4px rgba(255, 255, 255, 0.55), 0 12px 22px -12px rgba(2, 40, 16, 0.45); } .contact-map-iframe-wrap iframe { width: 100%; height: 100%; display: block; pointer-events: none; border: 0; /* pull the stock map toward the page's palette so the chrome reads */ filter: saturate(0.86) contrast(1.04) brightness(1.02); } /* ── overlay ── */ .contact-map-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; transform-style: preserve-3d; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 58%), linear-gradient(to bottom, rgba(241, 255, 239, 0.16) 0%, rgba(241, 255, 239, 0.03) 46%, rgba(2, 40, 16, 0.11) 100%); } /* a faint survey grid, fading out toward the horizon */ .contact-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(2, 40, 16, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 40, 16, 0.07) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(to top, #000 2%, transparent 62%); mask-image: linear-gradient(to top, #000 2%, transparent 62%); opacity: 0.65; } /* ── the pin ── */ .contact-map-pin-wrap { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; } /* stays on the plane, so it slides away from the pin as the plate tilts */ .contact-map-pin-shadow { position: absolute; bottom: 1px; left: 50%; width: 22px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(2, 23, 23, 0.5) 0%, rgba(2, 23, 23, 0.16) 55%, transparent 78%); filter: blur(1.5px); animation: mapPinShadow 2.6s ease-in-out infinite; } /* the teardrop, lifted off the plane */ .contact-map-pin { position: relative; z-index: 3; width: 17px; height: 17px; border-radius: 50% 50% 50% 0; transform: translateZ(var(--map-lift)) rotate(-45deg); background: radial-gradient(circle at 32% 26%, #1d4d3f 0%, var(--map-ink) 46%, #010e0e 100%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5), 0 6px 12px -4px rgba(2, 23, 23, 0.6); animation: mapPinBob 2.6s ease-in-out infinite; } /* the lime core */ .contact-map-pin::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--map-lime); box-shadow: 0 0 7px rgba(167, 252, 0, 0.85); } /* the specular highlight that makes it read as a solid body */ .contact-map-pin::before { content: ''; position: absolute; top: 14%; left: 46%; width: 5px; height: 3.5px; transform: rotate(45deg); border-radius: 50%; background: rgba(255, 255, 255, 0.55); filter: blur(0.5px); } /* ripples lying flat on the plane */ .contact-map-pin-ring { position: absolute; bottom: -1px; left: 50%; width: 34px; height: 12px; margin-left: -17px; border: 1.5px solid rgba(167, 252, 0, 0.55); border-radius: 50%; animation: mapPingRing 2.6s ease-out infinite; } .contact-map-pin-ring--2 { animation-delay: 1.3s; } @keyframes mapPingRing { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes mapPinBob { 0%, 100% { transform: translateZ(var(--map-lift)) translateY(0) rotate(-45deg); } 50% { transform: translateZ(var(--map-lift)) translateY(-3px) rotate(-45deg); } } @keyframes mapPinShadow { 0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: 0.72; transform: translateX(-50%) scale(0.86); } } /* ── the address chip ── */ .contact-map-pill { display: flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; border-radius: 20px; color: var(--map-ink); transform: translateZ(14px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(2, 40, 16, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 14px -6px rgba(2, 23, 23, 0.35); } .contact-map-pill svg { width: 10px; height: 12px; flex: 0 0 auto; } .contact-map-pill span { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: var(--map-ink); letter-spacing: 0.01em; white-space: nowrap; } /* a light sweep across the glass, on hover */ .contact-map-sheen { position: absolute; inset: -20% -60%; pointer-events: none; background: linear-gradient(102deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); transform: translateX(-42%); opacity: 0; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } .contact-map-card:hover .contact-map-sheen { transform: translateX(42%); opacity: 1; } /* ── footer row ── */ .contact-map-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 9px -9px 0; padding: 11px 15px 12px; border-top: 1px solid rgba(44, 131, 24, 0.16); border-radius: 0 0 19px 19px; text-decoration: none; color: #025e73; transition: background 0.4s ease, color 0.4s ease; } .contact-map-footer:hover { background: rgba(167, 252, 0, 0.14); } .contact-map-footer:focus-visible { outline: 2px solid #2c8318; outline-offset: 2px; } .contact-map-footer-text { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; } .contact-map-footer-arrow { flex: 0 0 auto; display: inline-flex; width: 14px; height: 14px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .contact-map-footer-arrow svg { width: 100%; height: 100%; display: block; } .contact-map-footer:hover .contact-map-footer-arrow { transform: translate(3px, -3px); } @media (prefers-reduced-motion: reduce) { .contact-map-card, .contact-map-card * { animation: none !important; transition: none !important; } .contact-map-plate { transform: none; } } /* ══ RIGHT COLUMN ══════════════════════════════ */ .contact-form-heading { font-family: 'Host Grotesk', sans-serif; font-size: 41.68px; font-weight: 400; line-height: 115.99%; color: #021616; margin-bottom: 32px; } .contact-form-heading em { font-family: 'Behind The Nineties', serif; font-style: italic; font-weight: 500; color: #021616; } /* Tabs */ .contact-tabs { display: flex; gap: 0; margin-bottom: 36px; border-bottom: none; } .contact-tab { background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 19.86px; font-weight: 400; color: rgba(2, 94, 115, 0.46); padding: 0 0 10px 0; margin-right: 40px; position: relative; transition: color 0.2s; } .contact-tab::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: transparent; transition: background 0.2s; } .contact-tab.active { color: #025E73; } .contact-tab.active::after { background: rgba(2, 94, 115, 0.40); } /* Form Fields */ .contact-form { display: flex; flex-direction: column; gap: 32px; } .cf-field { display: flex; flex-direction: column; gap: 4px; position: relative; } .cf-label { font-family: 'DM Sans', sans-serif; font-size: 14.76px; font-weight: 400; color: #696969; line-height: 21.56px; } .cf-input { background: none; border: none; outline: none; font-family: 'DM Sans', sans-serif; font-size: 24.31px; font-weight: 400; color: #000000; line-height: 38.53px; padding: 0; width: 100%; } .cf-input::placeholder { color: #00000027; opacity: 0.85; } .cf-line { width: 100%; height: 1px; background: #C7C7C7; margin-top: 4px; } /* Phone */ .cf-phone-wrap { display: flex; align-items: center; gap: 10px; } .cf-flag { width: 25.18px; height: 25.18px; border-radius: 2.74px; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; } .flag-stripe { flex: 1; display: block; } .flag-saffron { background: #FF7337; } .flag-white { background: #ffffff; } .flag-green { background: #18C03D; } .cf-code { font-family: 'DM Sans', sans-serif; font-size: 24.31px; font-weight: 400; color: #000000; flex-shrink: 0; } .cf-input--phone { flex: 1; } /* Select Row */ .cf-row { display: grid; /* Figma: 328 / 125 / 271 across the 724px form column */ grid-template-columns: minmax(0, 328fr) minmax(0, 271fr); column-gap: clamp(24px, 17.3%, 125px); row-gap: 40px; } /* ════════════════════════════════════════════════ CUSTOM DROPDOWN ════════════════════════════════════════════════ */ .cf-custom-select { position: relative; user-select: none; } /* Trigger row — mimics the old cf-input height/font */ .cf-custom-selected { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0; line-height: 38.53px; min-height: 38.53px; } .cf-selected-text { font-family: 'DM Sans', sans-serif; font-size: 24.31px; font-weight: 400; color: #000000; line-height: 38.53px; } .cf-selected-text.placeholder { color: rgba(0, 0, 0, 0.85); } /* Chevron — rotates when open */ .cf-chevron { display: flex; align-items: center; pointer-events: none; transition: transform 0.22s cubic-bezier(.4,0,.2,1); flex-shrink: 0; } .cf-chevron.rotated { transform: rotate(180deg); } /* Dropdown list */ .cf-dropdown-list { display: none; position: absolute; top: calc(100% + 8px); left: -16px; right: -16px; background: #ffffff; border-radius: 12px; box-shadow: 0 8px 32px rgba(2, 22, 22, 0.12), 0 2px 8px rgba(2, 22, 22, 0.06); padding: 8px 0; margin: 0; list-style: none; z-index: 100; overflow: hidden; /* open animation */ opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; } .cf-custom-select.open .cf-dropdown-list { display: block; opacity: 1; transform: translateY(0); } /* Individual option */ .cf-dropdown-item { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; color: #021616; padding: 11px 20px; cursor: pointer; transition: background 0.14s ease, color 0.14s ease; position: relative; } .cf-dropdown-item:hover { background: #F1FFEF; color: #025E73; } .cf-dropdown-item.active { color: #025E73; font-weight: 500; } .cf-dropdown-item.active::after { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #A7FC00; } /* Separator between items (subtle) */ .cf-dropdown-item + .cf-dropdown-item { border-top: 1px solid rgba(2, 23, 23, 0.05); } /* Submit */ .cf-submit { width: 190px; height: 53px; background: #021717; border: none; border-radius: 52px; color: #ffffff; font-family: 'Host Grotesk', sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.15s; margin-top: 8px; } .cf-submit:hover { background: #04302f; transform: translateY(-1px); } /* ══ RESPONSIVE ══════════════════════════════════ */ @media (max-width: 1280px) { .contact-section { padding: 72px var(--pv-gutter); } .contact-container { grid-template-columns: 300px 11px minmax(0, 1fr); column-gap: 32px; } .contact-heading { font-size: 52px; } } @media (max-width: 1024px) { .contact-section { padding: 64px var(--pv-gutter); } .contact-container { grid-template-columns: 280px 11px minmax(0, 1fr); column-gap: 28px; } .contact-heading { font-size: 46px; } .contact-form-heading { font-size: 34px; } .contact-tab { font-size: 17px; } .cf-input, .cf-selected-text, .cf-code { font-size: 20px; } } @media (max-width: 860px) { .contact-container { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 48px; } .contact-divider { width: 100%; height: 1px; min-height: 0; justify-self: stretch; } .contact-map { max-width: 100%; } .contact-heading { font-size: 48px; } } @media (max-width: 640px) { .contact-section { padding: 48px var(--pv-gutter); } .contact-heading { font-size: 38px; } .contact-form-heading { font-size: 28px; } .cf-row { grid-template-columns: 1fr; gap: 32px; } .contact-tab { font-size: 15px; margin-right: 24px; } .cf-input, .cf-selected-text, .cf-code { font-size: 18px; } .cf-label { font-size: 13px; } .cf-dropdown-list { left: 0; right: 0; } } @media (max-width: 400px) { .contact-section { padding: 40px var(--pv-gutter); } .contact-heading { font-size: 32px; } .contact-form-heading { font-size: 24px; } .cf-submit { width: 100%; } } /* slider */ /* ══════════════════════════════════════════════════════ EVENTS SECTION Paste this block at the bottom of pineverse.css ══════════════════════════════════════════════════════ */ /* ── Section shell ── */ /* ══════════════════════════════════════════════════════ EVENTS SECTION — Figma-accurate v2 ══════════════════════════════════════════════════════ */ .events-section { /* Figma: cards run x=23 → 1417 with a 58px gutter between them */ --ev-edge: var(--pv-gutter); --ev-gap: clamp(16px, 4.03vw, 58px); padding: 90px 0 100px; /* Figma bg: same light mint/cream as card top (#F3FFF8) */ background: #F3FFF8; overflow: hidden; } /* ── Heading ── */ .events-heading-wrap { text-align: center; padding: 0 var(--pv-gutter); margin-bottom: 52px; } .events-heading { /* Figma: 698px wide out of 1567px frame — force 2-line wrap */ display: inline-block; max-width: 720px; font-size: clamp(32px, 4.5vw, 64px); line-height: 1.16; font-weight: 300; text-transform: capitalize; text-align: center; } .events-heading-light { font-family: 'Host Grotesk', sans-serif; font-weight: 300; /* Figma gradient #3D443B → #025E73 */ background: linear-gradient(180deg, #3D443B 0%, #025E73 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .events-heading-italic { font-family: 'Behind The Nineties', cursive; font-style: italic; font-weight: 500; background: linear-gradient(180deg, #3D443B 0%, #025E73 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Slider outer — clips overflow ── */ .events-slider-outer { overflow: hidden; padding: 0 var(--ev-edge); cursor: grab; user-select: none; } .events-slider-outer.is-dragging { cursor: grabbing; } /* ── Track — flex row, no wrap ── */ .events-track { display: flex; gap: var(--ev-gap); transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; align-items: flex-start; } /* ── Individual card ── */ .event-card { flex: 0 0 calc((100% - 2 * var(--ev-gap)) / 3); min-width: 0; box-sizing: border-box; /* Figma: top #F3FFF8 → bottom #A7FC00 (straight vertical) */ background: linear-gradient(170deg, #F3FFF8 65%, #a7fc0069 100%); border-radius: 17.69px; /* Figma: image top:37px, left:45px */ padding: 37px 45px 40px; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .event-card:hover { transform: translateY(-4px); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.08); } /* ── Card image ── */ .event-card-img-wrap { width: 100%; /* Figma image: 396.64 × 264.46 ≈ 3:2 */ aspect-ratio: 3 / 2; border-radius: 17.69px; overflow: hidden; margin-bottom: 26px; flex-shrink: 0; } .event-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .event-card:hover .event-card-img { transform: scale(1.04); } /* ── Date ── */ .event-card-date { font-family: 'Host Grotesk', sans-serif; font-size: 16.08px; font-weight: 400; line-height: 1.63; text-transform: uppercase; letter-spacing: 0.02em; color: #1E1E1E; margin: 0 0 10px; } /* ── Title ── */ .event-card-title { font-family: 'Host Grotesk', sans-serif; font-size: clamp(16px, 1.4vw, 20px); font-weight: 400; text-transform: capitalize; line-height: 1.63; color: #1E1E1E; margin: 0; } /* ── Nav arrows ── */ .events-nav { display: flex; gap: 12px; padding: 32px var(--ev-edge) 0; } .events-nav-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(0, 94, 73, 0.35); background: transparent; color: #025E73; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s; flex-shrink: 0; } .events-nav-btn:hover { background: #025E73; border-color: #025E73; color: #fff; } .events-nav-btn:disabled { opacity: 0.28; pointer-events: none; } /* ══ RESPONSIVE ═══════════════════════════════════════ */ /* Tablet ≤1024px */ @media (max-width: 1024px) { .events-nav { padding-top: 28px; } .event-card { padding: 28px 32px 34px; } } /* Tablet ≤900px: 2 cards */ @media (max-width: 900px) { .event-card { flex: 0 0 calc((100% - var(--ev-gap)) / 2); } .events-heading-wrap { margin-bottom: 40px; } } /* Mobile ≤580px: 1 card + next peek */ @media (max-width: 580px) { .events-section { padding: 60px 0 72px; } .events-heading-wrap { padding: 0 var(--pv-gutter); margin-bottom: 32px; } .events-heading { max-width: 100%; } .events-section { --ev-edge: var(--pv-gutter) !important; --ev-gap: 16px; } .events-slider-outer { padding-right: 0; } .event-card { flex: 0 0 calc(100vw - 20px - 44px); padding: 22px 20px 26px; } .event-card-img-wrap { margin-bottom: 18px; } .event-card-date { font-size: 13px; margin-bottom: 8px; } .event-card-title { font-size: 16px; } .events-nav { padding-top: 24px; } } /* ══════════════════════════════════════════════════════ FAQ SECTION ══════════════════════════════════════════════════════ */ .faq-section { background: #F3FFF8; /* Figma: accordion runs x=126 → 1301 */ padding: clamp(60px, 7vw, 100px) var(--pv-gutter); } /* ── Pill — Figma: border only, dark text, NO fill ── */ .faq-pill { display: inline-flex; align-items: center; justify-content: center; padding: 14px 34px; border-radius: 34.25px; border: 1.14px solid #1E1E1E; background: transparent; font-family: 'Host Grotesk', sans-serif; font-size: 18.27px; font-weight: 600; line-height: 1.19; letter-spacing: 0; text-transform: uppercase; color: #1E1E1E; margin-bottom: 32px; width: 253px; } /* ── Heading — Figma: 55.5px, weight 400, single line ── */ .faq-heading { font-family: 'Host Grotesk', sans-serif; font-size: clamp(28px, 3.8vw, 55.5px); font-weight: 400; line-height: 1.62; color: #414141; margin: 0 0 clamp(32px, 4vw, 48px); white-space: nowrap; /* prevent orphan word-wrap on desktop */ } @media (max-width: 1100px) { /* --pv-gutter already scales; no per-tier gutter here */ } @media (max-width: 700px) { .faq-heading { white-space: normal; } } /* ── List ── */ .faq-list { display: flex; flex-direction: column; gap: 10px; } /* ── Single item ── */ .faq-item { background: #F1F1F1; border-radius: 22.55px; overflow: hidden; transition: background 0.35s ease; } .faq-item.is-open { background: #9EFD38; } /* ── Trigger ── */ .faq-trigger { width: 100%; background: none; border: none; padding: 22px clamp(20px, 2.5vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; text-align: left; } .faq-trigger span { font-family: 'Host Grotesk', sans-serif; font-size: clamp(16px, 2.15vw, 31.22px); font-weight: 400; line-height: 1.62; color: #414141; } /* ── Icon — raw SVG image, NO circle wrap ── Figma: closed = 0° (scroll-up icon as-is) open = 90° rotated ── */ .faq-icon { width: 40.76px; height: 40.76px; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(0deg); } .faq-item.is-open .faq-icon { transform: rotate(90deg); } /* ── Body — smooth CSS grid animation ── */ .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.35s ease; padding-bottom: 0; } .faq-body-inner { overflow: hidden; padding: 0 clamp(20px, 2.5vw, 36px); } .faq-item.is-open .faq-body { grid-template-rows: 1fr; padding-bottom: 26px; } .faq-body p { font-family: 'Host Grotesk', sans-serif; font-size: clamp(14px, 1.1vw, 18px); font-weight: 400; line-height: 1.7; color: #2a2a2a; margin: 0; padding-top: 6px; } /* ── Responsive ── */ @media (max-width: 580px) { .faq-pill { font-size: 14px; padding: 10px 22px; } .faq-trigger { padding: 18px; } .faq-icon { width: 32px; height: 32px; } } /* ══════════════════════════════════════════════════════ SITE FOOTER — `.pv-footer` From the supplied footer design pack. Every selector is scoped under `.pv-footer` so nothing here can reach the rest of the site (the `.pv-date` / `.pv-cal-*` calendar already owns the `pv-` prefix). Deliberate changes from the pack's footer.css: · scoped, and the demo `body{margin:0}` + local @font-face dropped · Arial → 'Host Grotesk', Georgia → 'Kaisei Decol' (both already loaded by layout/header.php); `em` stays Behind The Nineties italic · `.pv-wrap` re-cut to the site canvas lock, so the footer's gutter lines up with the header logo at 1440 and with the design at 1536 · the "Stay connected" e-mail strip removed — not in the reference · the orbit SVG anchored inside `.pv-mark` instead of `bottom:216px` measured off the whole dark band, which drifted with content · the duplicated prefers-reduced-motion / `.pv-col:first-of-type` blocks folded into one pass The previous footer is archived in app/Views/layout/archive/. ══════════════════════════════════════════════════════ */ .pv-footer { --pv-cream: #f8faef; --pv-dark: #00261e; --pv-lime: #b8f56d; --pv-accent: #ccff00; --pv-line: rgba(205, 224, 195, 0.25); position: relative; z-index: 6; /* clears every z-indexed band above it */ font-family: 'Host Grotesk', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.005em; color: var(--pv-cream); -webkit-font-smoothing: antialiased; overflow: hidden; /* clips the orbit curves at the edges */ } .pv-footer *, .pv-footer *::before, .pv-footer *::after { box-sizing: border-box; } .pv-footer h2, .pv-footer h3, .pv-footer p { margin: 0; } .pv-footer { /* one curve and one duration for every hover in the footer */ --pv-ease: cubic-bezier(0.22, 1, 0.36, 1); --pv-dur: 0.42s; } .pv-footer a { color: inherit; text-decoration: none; transition: color var(--pv-dur) ease, opacity var(--pv-dur) ease; } .pv-footer a:hover { color: var(--pv-lime); } .pv-footer :focus-visible { outline: 2px solid #87b926; outline-offset: 6px; border-radius: 4px; } /* the italic serif the design uses for "together." / "better moves." */ .pv-footer em { font-family: 'Behind The Nineties', 'Kaisei Decol', Georgia, serif; font-weight: 400; font-style: italic; } /* ── the shared gutter ── The footer rides --pv-gutter like every other band on the site: 84px at 1440, which is also what the footer's own reference sets at 1536 (82). The 1376 cap keeps the content on a centred canvas past that. */ .pv-footer .pv-wrap { width: min(1376px, 100% - var(--pv-gutter) * 2); margin-inline: auto; } /* ══ CTA BAND ═════════════════════════════════════════ */ .pv-footer .pv-cta { background: var(--pv-cream); color: #001612; } .pv-footer .pv-cta-inner { min-height: 377px; display: grid; grid-template-columns: 58% 42%; align-items: center; } .pv-footer .pv-eyebrow { font-size: 14px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; color: rgba(0, 22, 18, 0.72); margin-bottom: 16px; } .pv-footer .pv-cta h2 { font-size: clamp(52px, 6.1vw, 88px); font-weight: 500; letter-spacing: -0.051em; line-height: 0.9; /* reference: 78px apart at 88px */ margin-bottom: 24px; white-space: nowrap; } .pv-footer .pv-cta h2 em { letter-spacing: -0.04em; } /* Same pill as the on-page CTA (`.sv-cta-btn` on the services page): #021717 ground, lime label, 62 tall, r63, 0 38px, Host Grotesk 500, letter-spacing -0.01em, lift + soft shadow on hover. The pack's own 19px/600 white-on-#00241c pill did not belong to this site. */ .pv-footer .pv-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; max-width: 100%; min-height: 62px; padding: 0 38px; border-radius: 63px; font-size: 16px; font-weight: 500; line-height: 1.16; letter-spacing: -0.01em; transition: transform var(--pv-dur) var(--pv-ease), background var(--pv-dur) ease, color var(--pv-dur) ease, box-shadow var(--pv-dur) ease; } .pv-footer .pv-button-dark { background: #021717; color: #b7f66e; /* --sv-lime, the exact label colour of .sv-cta-btn */ } .pv-footer .pv-button-dark:hover { color: #b7f66e; transform: translateY(-2px); box-shadow: 0 16px 36px -16px rgba(2, 23, 23, 0.45); } .pv-footer .pv-button-dark .pv-arrow { color: currentColor; } .pv-footer .pv-arrow { flex: 0 0 auto; display: inline-flex; width: 19px; height: 19px; transition: transform var(--pv-dur) var(--pv-ease); } .pv-footer .pv-arrow svg { width: 100%; height: 100%; display: block; } .pv-footer .pv-button:hover .pv-arrow { transform: translate(3px, -3px); } /* ── star + caption ── */ .pv-footer .pv-star-area { display: flex; justify-content: flex-end; align-items: center; gap: clamp(24px, 3.25vw, 50px); } .pv-footer .pv-star { position: relative; flex: none; width: clamp(225px, 19.8vw, 304px); margin-top: -8px; } .pv-footer .pv-star img { position: relative; z-index: 1; display: block; width: 100%; height: auto; animation: pv-star-float 9s ease-in-out infinite; } /* the soft elliptical shadow the star casts on the cream */ .pv-footer .pv-star::after { content: ''; position: absolute; left: 16%; bottom: -24px; z-index: 0; width: 68%; height: 30px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40, 62, 23, 0.38) 0%, rgba(66, 86, 40, 0.19) 38%, rgba(66, 86, 40, 0) 72%); filter: blur(6px); animation: pv-star-shadow 9s ease-in-out infinite; } @keyframes pv-star-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } @keyframes pv-star-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.72; } } .pv-footer .pv-star-caption { padding-top: 92px; font-size: 11px; font-weight: 400; line-height: 2.6; letter-spacing: 4px; text-transform: uppercase; color: #526f69; } .pv-footer .pv-star-caption span { display: block; width: 31px; height: 1px; margin-top: 13px; background: #789087; } /* ══ DARK BAND ════════════════════════════════════════ */ .pv-footer .pv-dark { position: relative; background: radial-gradient(ellipse at 70% 40%, #002b22 0%, #002219 85%); } .pv-footer .pv-brand-row { height: 122px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--pv-line); } .pv-footer .pv-logo { display: block; width: 247px; height: auto; } .pv-footer .pv-brand-row p { font-family: 'Kaisei Decol', Georgia, serif; font-size: clamp(20px, 2vw, 29px); font-weight: 400; line-height: 1.25; } /* ── the four columns ── */ .pv-footer .pv-grid { position: relative; z-index: 2; display: grid; /* the reference's rules sit at x = 512 / 778 / 1078 inside a 1376 content box that starts at 82, so the tracks are 430 / 266 / 300 / 380 wide */ grid-template-columns: minmax(0, 31.25fr) minmax(0, 19.33fr) minmax(0, 21.80fr) minmax(0, 27.62fr); padding-top: 31px; } .pv-footer .pv-about { padding-right: 30px; } .pv-footer .pv-about h3 { margin-bottom: 17px; font-family: 'Kaisei Decol', Georgia, serif; /* the reference's 43px is a narrower serif; at 43px Kaisei Decol pushes "Stronger businesses." onto a third line and the whole grid grows 48px */ font-size: clamp(28px, 2.62vw, 40px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.06; /* reference: two lines in 84px */ } .pv-footer .pv-about p { font-size: 18px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.66); } .pv-footer .pv-socials { display: flex; gap: 28px; margin-top: 23px; } .pv-footer .pv-socials a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(205, 224, 195, 0.34); border-radius: 50%; color: rgba(255, 255, 255, 0.82); transition: border-color var(--pv-dur) ease, background var(--pv-dur) ease, color var(--pv-dur) ease, transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) ease; } .pv-footer .pv-socials a:hover { border-color: var(--pv-lime); background: rgba(184, 245, 109, 0.12); color: var(--pv-lime); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(184, 245, 109, 0.5); } .pv-footer .pv-socials svg { width: 21px; height: 21px; display: block; } .pv-footer .pv-col { min-width: 0; border-left: 1px solid var(--pv-line); padding-left: clamp(24px, 3.9vw, 60px); /* reference: rule at 512, text at 572 */ padding-right: 16px; } .pv-footer .pv-col h3 { margin: -2px 0 19px; font-size: 21px; font-weight: 500; letter-spacing: 0.005em; color: var(--pv-accent); } .pv-footer .pv-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pv-footer .pv-col li { line-height: 1.5; } .pv-footer .pv-col li a { display: inline-block; font-weight: 300; color: rgba(255, 255, 255, 0.8); transition: color var(--pv-dur) ease, transform var(--pv-dur) var(--pv-ease); } .pv-footer .pv-col li a:hover { color: var(--pv-lime); transform: translateX(4px); } .pv-footer .pv-button-light { margin-top: 22px; min-height: 50px; padding: 0 24px; gap: 10px; font-size: 15px; white-space: nowrap; background: var(--pv-cream); color: #021717; } .pv-footer .pv-button-light:hover { background: #a7fc00; color: #021717; transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(167, 252, 0, 0.55); } .pv-footer .pv-contact { padding-right: 0; } .pv-footer .pv-contact address { display: grid; gap: 15px; font-style: normal; font-size: 18px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.82); } .pv-footer .pv-contact address > a, .pv-footer .pv-contact address > div { display: flex; align-items: flex-start; gap: 18px; } /* Solid glyphs, not hairlines. The detail inside each one is knocked out in the band's own colour (`.pv-knock` / `.pv-knock-fill`) so the envelope flap and the pin's hole read as part of the icon rather than as extra strokes floating over it. */ .pv-footer .pv-contact svg { flex: none; width: 22px; height: 22px; margin-top: 3px; fill: var(--pv-accent); stroke: none; transition: fill var(--pv-dur) ease, transform var(--pv-dur) var(--pv-ease); } .pv-footer .pv-contact .pv-knock { fill: none; stroke: #002219; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pv-footer .pv-contact .pv-knock-fill { fill: #002219; } .pv-footer .pv-contact address > a:hover svg { transform: translateY(-1px); } .pv-footer .pv-contact span { overflow-wrap: anywhere; } /* ── watermark band: ghost wordmark with the orbits behind it ── */ .pv-footer .pv-mark { position: relative; padding-top: 34px; } .pv-footer .pv-orbits { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: calc(100% + 96px); /* reaches a little above the band, as in the design */ pointer-events: none; } .pv-footer .pv-orb { animation: pv-orb-pulse 5.5s ease-in-out infinite; } .pv-footer .pv-orb:last-child { animation-delay: -2.4s; } @keyframes pv-orb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.72; transform: scale(0.86); } } .pv-footer .pv-watermark { position: relative; z-index: 2; height: 155px; /* reference band: 765 – 940 */ display: flex; justify-content: center; align-items: flex-end; pointer-events: none; } /* The reference's ghost wordmark spans the whole content width and is far shorter than the artwork's own 1881:407 — it is a deliberately widened decorative treatment, so `fill` reproduces it. `contain` would letterbox it down to ~790px and read as a small mark floating in a wide band. */ .pv-footer .pv-watermark img { display: block; flex: none; width: 100%; height: 100%; object-fit: fill; /* the reference's outline is clearly readable but not solid; 0.85 read as a filled mark, 0.5 nearly vanished on the darker pages */ opacity: 0.62; } /* ── GET-IN-TOUCH STRIP ── The v1 `.footer-bottom-strip` design, re-skinned in this footer's palette and sitting directly above the copyright line. Class names are v1's so the markup drops in unchanged; every rule is scoped `.pv-footer …` so nothing here can collide with archive/footer-v1.css if that is ever restored. v1 set the heading at weight 800, which is the "bold" this footer was asked to soften — it is 400 Kaisei Decol here, matching the tagline and the "Connected journeys." block. */ .pv-footer .pv-strip { position: relative; z-index: 2; border-top: 1px solid var(--pv-line); background: radial-gradient(120% 160% at 88% 0%, rgba(184, 245, 109, 0.055), transparent 62%), rgba(0, 24, 19, 0.32); } .pv-footer .footer-bottom-strip { display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(26px, 3.2vw, 48px); padding-block: clamp(30px, 3.4vw, 48px); } .pv-footer .footer-cta-heading { flex: 1 1 0; min-width: 260px; margin: 0; font-family: 'Kaisei Decol', Georgia, serif; font-size: clamp(24px, 2.62vw, 40px); font-weight: 400; line-height: 1.14; letter-spacing: -0.03em; color: var(--pv-cream); } .pv-footer .footer-form-col { flex: 1 1 0; min-width: 280px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; } .pv-footer .footer-form-label { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, 0.66); } /* the field */ .pv-footer .footer-email-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px 9px 18px; border: 1px solid rgba(205, 224, 195, 0.32); border-radius: 14px; background: rgba(255, 255, 255, 0.028); transition: border-color var(--pv-dur) ease, background var(--pv-dur) ease, box-shadow var(--pv-dur) ease; } .pv-footer .footer-email-field:hover { border-color: rgba(205, 224, 195, 0.5); } .pv-footer .footer-email-field:focus-within { border-color: var(--pv-lime); background: rgba(184, 245, 109, 0.05); box-shadow: 0 0 0 3px rgba(184, 245, 109, 0.13); } .pv-footer .footer-email-field.is-invalid { border-color: #ff8f6b; box-shadow: 0 0 0 3px rgba(255, 143, 107, 0.13); } .pv-footer .footer-email-inner { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pv-footer .footer-email-hint { font-size: 10px; font-weight: 400; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); transition: color var(--pv-dur) ease; } .pv-footer .footer-email-field:focus-within .footer-email-hint { color: var(--pv-lime); } .pv-footer .footer-email-input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: none; font-family: inherit; font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--pv-cream); } .pv-footer .footer-email-input::placeholder { color: rgba(255, 255, 255, 0.34); } .pv-footer .footer-email-submit { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--pv-accent); color: #021717; cursor: pointer; transition: background var(--pv-dur) ease, transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) ease; } .pv-footer .footer-email-submit svg { width: 18px; height: 10px; display: block; } .pv-footer .footer-email-submit:hover { background: var(--pv-lime); transform: translateX(2px); box-shadow: 0 12px 26px -14px rgba(184, 245, 109, 0.65); } .pv-footer .footer-email-submit:active { transform: translateX(0) scale(0.96); } .pv-footer .footer-email-note { margin: 0; min-height: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.58); } .pv-footer .footer-email-note:empty { display: none; } .pv-footer .footer-email-note.is-error { color: #ffb49b; } .pv-footer .footer-email-note.is-ok { color: var(--pv-lime); } @media (max-width: 650px) { .pv-footer .footer-bottom-strip { flex-direction: column; align-items: stretch; gap: 22px; padding-block: 30px; } .pv-footer .footer-cta-heading { min-width: 0; font-size: 26px; } .pv-footer .footer-form-col { min-width: 0; } .pv-footer .footer-email-field { padding: 8px 10px 8px 16px; } .pv-footer .footer-email-submit { width: 38px; height: 38px; } } /* ── bottom bar ── */ .pv-footer .pv-bottom { position: relative; z-index: 2; border-top: 1px solid var(--pv-line); } .pv-footer .pv-bottom-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .pv-footer .pv-bottom small, .pv-footer .pv-legal { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.62); } .pv-footer .pv-legal { display: flex; align-items: center; gap: 24px; } .pv-footer .pv-legal > a + a { border-left: 1px solid var(--pv-line); padding-left: 24px; } .pv-footer .pv-top { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 3px; padding: 0; border: 1px solid rgba(205, 224, 195, 0.4); border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: background var(--pv-dur) ease, border-color var(--pv-dur) ease, color var(--pv-dur) ease, transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) ease; } .pv-footer .pv-top svg { width: 18px; height: 18px; display: block; } .pv-footer .pv-top:hover { background: rgba(184, 245, 109, 0.12); border-color: var(--pv-lime); color: var(--pv-lime); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(184, 245, 109, 0.5); } /* ══ RESPONSIVE ═══════════════════════════════════════ */ @media (min-width: 1600px) { .pv-footer .pv-cta-inner { min-height: 400px; } } @media (max-width: 1400px) { .pv-footer, .pv-footer .pv-about p, .pv-footer .pv-contact address { font-size: 16px; } .pv-footer .pv-eyebrow { font-size: 12px; letter-spacing: 3px; } .pv-footer .pv-star-area { gap: 30px; } .pv-footer .pv-star { width: clamp(210px, 18vw, 260px); } .pv-footer .pv-star-caption { letter-spacing: 2px; padding-top: 74px; } .pv-footer .pv-about h3 { font-size: clamp(28px, 2.6vw, 34px); } .pv-footer .pv-col { padding-left: 30px; padding-right: 14px; } .pv-footer .pv-contact address > a, .pv-footer .pv-contact address > div { gap: 12px; } .pv-footer .pv-button-light { padding: 10px 16px; font-size: 14px; } .pv-footer .pv-watermark { height: 148px; } } /* tablet — the intro spans the row, three columns under it */ @media (max-width: 1000px) { .pv-footer .pv-wrap { width: calc(100% - var(--pv-gutter) * 2); } .pv-footer .pv-cta-inner { min-height: 340px; grid-template-columns: 63% 37%; } .pv-footer .pv-cta h2 { font-size: clamp(44px, 6.4vw, 64px); white-space: normal; } .pv-footer .pv-star { width: 210px; } .pv-footer .pv-star-caption { display: none; } .pv-footer .pv-brand-row p { font-size: 24px; } .pv-footer .pv-logo { width: 220px; } .pv-footer .pv-grid { grid-template-columns: 0.85fr 1fr 1.35fr; row-gap: 32px; } .pv-footer .pv-about { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 25px; padding: 0 0 26px; border-bottom: 1px solid var(--pv-line); } .pv-footer .pv-about h3 { grid-row: 1 / 3; } .pv-footer .pv-about .pv-socials { margin-top: 18px; } .pv-footer .pv-col { padding-left: 22px; } .pv-footer .pv-col:first-of-type { border-left: 0; padding-left: 0; } .pv-footer .pv-mark { padding-top: 28px; } .pv-footer .pv-watermark { height: 118px; } .pv-footer .pv-orbits { height: calc(100% + 70px); } } /* phone — two nav columns, contact full width */ @media (max-width: 650px) { .pv-footer .pv-wrap { width: calc(100% - var(--pv-gutter) * 2); } .pv-footer .pv-cta-inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 36px 30px; } .pv-footer .pv-eyebrow { font-size: 10px; letter-spacing: 2px; margin-bottom: 19px; } .pv-footer .pv-cta h2 { font-size: clamp(38px, 10.8vw, 60px); letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 24px; } .pv-footer .pv-button { font-size: 15px; min-height: 49px; padding: 12px 24px; } .pv-footer .pv-star-area { justify-content: center; gap: 35px; margin-top: 30px; padding-bottom: 14px; } .pv-footer .pv-star { width: 180px; margin: 0; } .pv-footer .pv-star::after { height: 26px; bottom: -22px; } .pv-footer .pv-star-caption { display: block; padding-top: 0; font-size: 9px; letter-spacing: 2px; } .pv-footer .pv-brand-row { height: auto; min-height: 108px; flex-wrap: wrap; gap: 20px; padding: 28px 0 24px; } .pv-footer .pv-logo { width: 187px; } .pv-footer .pv-brand-row p { font-size: 20px; } .pv-footer .pv-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; padding-top: 25px; } .pv-footer .pv-about { display: block; padding-bottom: 25px; } .pv-footer .pv-about h3 { font-size: 30px; letter-spacing: -0.03em; } .pv-footer .pv-about p { font-size: 16px; } .pv-footer .pv-desktop-break { display: none; } .pv-footer .pv-socials { gap: 16px; } .pv-footer .pv-socials a { width: 44px; height: 44px; } .pv-footer .pv-col { padding-left: 20px; padding-right: 0; } .pv-footer .pv-col h3 { font-size: 18px; margin-bottom: 15px; } .pv-footer .pv-col ul { gap: 11px; } .pv-footer .pv-col li { font-size: 15px; } /* one line inside a 181px column: 12.5px label + 6 gap + 20 arrow + 24 padding = 157. `white-space: normal` here split it over two lines. */ .pv-footer .pv-button-light { min-height: 44px; padding: 10px 12px; gap: 6px; font-size: 12.5px; white-space: nowrap; } .pv-footer .pv-button-light .pv-arrow { width: 18px; height: 18px; } .pv-footer .pv-contact { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--pv-line); padding: 25px 0 0; } .pv-footer .pv-contact address { font-size: 16px; gap: 16px; } .pv-footer .pv-contact address > a, .pv-footer .pv-contact address > div { gap: 17px; } .pv-footer .pv-mark { padding-top: 26px; } .pv-footer .pv-watermark { height: auto; } .pv-footer .pv-watermark img { max-height: none; } .pv-footer .pv-orbits { height: calc(100% + 40px); opacity: 0.6; } .pv-footer .pv-bottom-inner { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 0; gap: 16px; padding-block: 22px; } .pv-footer .pv-bottom small, .pv-footer .pv-legal { font-size: 12px; } .pv-footer .pv-legal { width: 100%; gap: 16px; } .pv-footer .pv-legal > a + a { padding-left: 16px; } .pv-footer .pv-top { width: 38px; height: 38px; margin-left: auto; } } /* ── very small phones ── Two 140px nav columns is not enough for "Become a Partner" or for the app pill (which needs 146 and was overflowing its own 119px shell), so the columns stack into one and each gets a rule above it instead of beside it. */ @media (max-width: 374px) { .pv-footer .pv-star-area { gap: 22px; } .pv-footer .pv-star { width: 165px; } .pv-footer .pv-about h3 { font-size: 27px; } .pv-footer .pv-grid { grid-template-columns: 1fr; gap: 0; } .pv-footer .pv-col { border-left: 0; border-top: 1px solid var(--pv-line); padding: 24px 0 0; margin-top: 24px; } .pv-footer .pv-contact { border-top: 1px solid var(--pv-line); padding: 24px 0 0; } .pv-footer .pv-button-light { padding-inline: 18px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .pv-footer *, .pv-footer *::before, .pv-footer *::after { transition: none !important; animation: none !important; } } /* ═══════════════════════════════════════════ CAPTCHA FIELD — Pineverse Contact Form Paste at the bottom of pineverse.css ══════════════════════════════════════════ */ /* ── Outer wrapper ── */ .cf-captcha-field { margin-top : 14px; } /* ── Section label ── */ .cf-captcha-label { display : flex; align-items : center; gap : 6px; font-size : 11px; font-weight : 600; letter-spacing: 0.08em; text-transform: uppercase; color : #888; margin-bottom : 10px; } .cf-captcha-label svg { width : 13px; height : 13px; opacity: 0.6; } /* ── Card wrapper ── */ .cf-captcha-card { display : flex; flex-direction: column; gap : 10px; background : #F8F8F6; border : 1.5px solid #E4E4DF; border-radius : 12px; padding : 14px 16px; } /* ── Image row ── */ .cf-captcha-wrap { display : flex; align-items: center; gap : 12px; } /* ── CAPTCHA image ── */ .cf-captcha-img { display : block; width : 200px; /* bigger display */ height : 66px; border : 1.5px solid #D2D2CC; border-radius: 8px; object-fit : cover; background : #EFEFEC; user-select : none; flex-shrink : 0; transition : opacity 0.3s ease, border-color 0.2s; } .cf-captcha-img:hover { border-color: #ABABAA; } .cf-captcha-img.loading { opacity: 0.3; } /* ── Refresh button ── */ .cf-captcha-refresh { display : flex; align-items : center; justify-content: center; width : 38px; height : 38px; background : #fff; border : 1.5px solid #D0D0CB; border-radius : 50%; color : #666; cursor : pointer; flex-shrink : 0; transition : border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s; } .cf-captcha-refresh:hover { border-color: #2E7D52; color : #2E7D52; background : #F0FAF4; box-shadow : 0 2px 8px rgba(46,125,82,0.12); } .cf-captcha-refresh:active { transform: scale(0.93); } /* Spin on refresh click */ .cf-captcha-refresh.spinning svg { animation: captchaSpin 0.45s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes captchaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Hint text ── */ .cf-captcha-hint { font-size : 11px; color : #999; line-height: 1.4; margin-left: 2px; } /* ── Input row ── */ .cf-captcha-input-row { display : flex; align-items: center; gap : 0; background : #fff; border : 1.5px solid #D2D2CC; border-radius: 8px; overflow : hidden; transition : border-color 0.2s, box-shadow 0.2s; } .cf-captcha-input-row:focus-within { border-color: #2E7D52; box-shadow : 0 0 0 3px rgba(46,125,82,0.10); } .cf-captcha-input-row.has-error { border-color: #D44; box-shadow : 0 0 0 3px rgba(204,51,51,0.10); } /* ── Input icon prefix ── */ .cf-captcha-icon { display : flex; align-items : center; justify-content: center; padding : 0 10px 0 12px; color : #AAAAA5; flex-shrink : 0; pointer-events : none; } .cf-captcha-icon svg { width : 15px; height: 15px; } /* ── The actual text input ── */ .cf-captcha-input { flex : 1; height : 42px; padding : 0 12px 0 0; border : none; outline : none; background : transparent; font-size : 16px; /* bigger font */ font-weight : 600; letter-spacing: 4px; color : #1a2820; text-transform: uppercase; caret-color : #2E7D52; } .cf-captcha-input::placeholder { font-size : 12px; font-weight : 400; letter-spacing: 0.03em; color : #BABAB5; text-transform: none; } /* ── Inline error message ── */ .cf-captcha-error { display : none; align-items: center; gap : 5px; margin-top : 6px; font-size : 12px; color : #C33; font-style : italic; } .cf-captcha-error.visible { display: flex; } .cf-captcha-error svg { width : 13px; height : 13px; flex-shrink: 0; } /* ── Submit success state ── */ .cf-submit--success { background : #2E7D52 !important; border-color : #2E7D52 !important; color : #fff !important; pointer-events: none; } /* ── Responsive ── */ @media (max-width: 480px) { .cf-captcha-img { width : 160px; height: 52px; } .cf-captcha-input { font-size: 14px; } } /* ══════════════════════════════════════════════════════ SITE HEADER — the `.eco-nav-pill` component The header nav is now the same pill that sits in the ecosystem section: a translucent blurred bar holding a hamburger and the "Partner With Us" button. The nav links themselves live in the slide-in drawer, which opens right → left on EVERY screen size (not just phones), because the hamburger is now the only way in. Declared after everything else so it wins on source order; `!important` only where the old rules used it. ══════════════════════════════════════════════════════ */ header .nav-pill { display: flex; align-items: center; gap: 0; /* `min-width`, never `width` — the pill has to be able to grow */ width: auto; min-width: 281px; height: 77px; padding: 12px 14px; border: 0; border-radius: 8.26px; background: rgba(28, 28, 28, 0.28); backdrop-filter: blur(13.9px); -webkit-backdrop-filter: blur(13.9px); } /* ── Hamburger — always visible now ── */ header .hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; margin-left: 4px; padding: 0; gap: 0; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; z-index: 201; } header .hamburger span { display: block; width: 28px; height: 2px; border-radius: 2px; /* the eco pill sits on a light band and uses #021717; the header sits on the dark hero, so the bars are light here */ background: #ffffff; transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease; transform-origin: center; } /* morph to an X while the drawer is open */ header .hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } header .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); } header .hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } header .nav-pill .btn-partner { margin-left: auto; width: 155px; height: 53px; border: 0 !important; border-radius: 9px !important; background: #021717 !important; color: #a7fc00 !important; font-family: 'Host Grotesk', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 116% !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: opacity 0.2s !important; } header .nav-pill .btn-partner:hover { opacity: 0.85; } /* ── The pill UNROLLS — it does not drop a panel ── Collapsed the bar is [hamburger][Partner With Us]. Open, the bar itself grows leftward and the nav links appear inside it, ending as the full [About Us][Our Services][Technology][Partner With Us] bar. One object that uncurls, like a party blower — NOT a dropdown hanging underneath. (A dropdown panel was built first and was wrong.) The growth is `grid-template-columns: 0fr → 1fr` on the links column. That animates to the content's OWN width, so there is no guessed pixel value and no dead time at the end of the transition — which is what you get animating `max-width` to a number larger than the content. It unrolls right → left for free:

is `justify-content: space-between`, so the pill is pinned to the right gutter and only its left edge can move. */ .nav-outer { position: relative; flex: 0 0 auto; display: flex; justify-content: flex-end; } /* Below 1024px the pill's bottom corners square off to join the panel that drops beneath it. That needs its own transition — the rule that used to carry one was removed with the old dropdown block, so the corners were snapping. Same direction-aware split as the bar, and slightly faster so the corners lead the movement rather than lag it. */ .nav-pill { transition: border-radius 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .nav-pill.ham-open { transition: border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* ── Direction-aware easing ── The curve on the BASE rule is the one that runs while CLOSING (the class has just been removed); the curve on the `.ham-open` rule runs while OPENING. They must not be the same. `cubic-bezier(0.16, 1, 0.3, 1)` is expo-out — very fast off the mark, then a long settle. Opening, that snaps out and feels good. Reused for closing it collapses almost the whole way in the first ~100ms and then crawls, which reads as a jerk. Closing gets a symmetric ease-in-out instead, so it leaves gently. */ .nav-links { display: grid; /* minmax(0, …) matters: bare `0fr` is `minmax(auto, 0fr)`, so the track's minimum is content-based and the column never collapses past the labels' padding (~42px). minmax(0, 0fr) collapses to a true zero. */ grid-template-columns: minmax(0, 0fr); min-width: 0; /* CLOSING */ transition: grid-template-columns 0.58s cubic-bezier(0.65, 0, 0.35, 1); } .nav-pill.ham-open .nav-links { grid-template-columns: minmax(0, 1fr); /* OPENING */ transition: grid-template-columns 0.62s cubic-bezier(0.16, 1, 0.3, 1); } .nav-links-inner { overflow: hidden; display: flex; align-items: center; gap: 35px; padding: 0 21px; white-space: nowrap; /* without min-width:0 the inner's min-content size (its padding) keeps the 0fr column ~42px wide instead of fully collapsed */ min-width: 0; /* clipped content is still tabbable — take the links out of the tab order while the bar is shut, and put them back only once it is open */ visibility: hidden; transition: visibility 0s linear 0.58s; /* matches the closing duration */ } .nav-pill.ham-open .nav-links-inner { visibility: visible; transition: visibility 0s linear 0s; } .nav-links a { color: rgba(255, 255, 255, 0.72); font-family: 'Host Grotesk', sans-serif; font-size: 16px; font-weight: 500; line-height: 116%; text-decoration: none; white-space: nowrap; /* labels fade in behind the unroll so they never look stretched. CLOSING: go quickly and immediately, so they are gone well before the bar finishes collapsing and never get squeezed against the edge. */ opacity: 0; transition: opacity 0.2s ease, color 0.2s ease; } /* OPENING: hold, then fade up once there is room for them */ .nav-pill.ham-open .nav-links a { opacity: 1; transition: opacity 0.34s ease 0.18s, color 0.2s ease; } .nav-links a:hover { color: #ffffff; } /* Click-catcher only — a nav control must not dim the page. It exists ONLY in panel mode (≤1080). On the desktop unroll the bar is open over the hero by default, and a full-viewport catcher at z-index 9998 swallowed every pointer event on its way to the Spline canvas — cursor hover / zoom stopped working until you closed the menu. Above 1080 a document-level pointerdown listener in pineverse.js closes the bar instead, which intercepts nothing. */ .drawer-overlay { display: none; position: fixed; inset: 0; z-index: 9998; /* under the header's 9999 */ background: transparent; opacity: 0; visibility: hidden; transition: visibility 0s linear 0.2s; } @media (max-width: 1080px) { .drawer-overlay { display: block; } .drawer-overlay.open { visibility: visible; transition: visibility 0s linear 0s; } } @media (prefers-reduced-motion: reduce) { .nav-links, .nav-links::before, .nav-links a, .nav-pill, header .hamburger span { transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* ── Header pill responsive ── */ /* The bar unrolls to ~1006px at full scale. Between the logo's right edge and the right gutter there is that much room only from 1400 up, so from 1081 to 1399 everything inside the pill tightens by a step — the unroll keeps its clearance instead of running into the logo. Measured: 1200 → 790 wide with 47px of daylight, 1366 → the same, 1440 → full scale. */ @media (min-width: 1081px) and (max-width: 1399px) { header .nav-pill { min-width: 240px; height: 66px; padding: 10px 12px; } .nav-links-inner { gap: 14px; padding: 0 10px; } .nav-links a { font-size: 13.5px; } header .nav-pill .btn-partner { width: 118px; height: 44px; font-size: 13.5px !important; } header .hamburger { width: 24px; height: 17px; } header .hamburger span { width: 24px; } header .hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } header .hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } } @media (max-width: 1024px) { header .nav-pill { min-width: 244px; height: 68px; } .nav-links-inner { gap: 26px; padding: 0 16px; } .nav-links a { font-size: 15px; } header .nav-pill .btn-partner { width: 134px; height: 46px; font-size: 15px !important; } header .nav-pill.ham-open { border-radius: 8.26px 8.26px 0 0; } } @media (max-width: 1080px) { /* ── The phone menu, in two beats ── Desktop and laptop keep the sideways unroll — that is the gesture the bar was designed around. Below 1080 there is simply not enough room between the logo and the right gutter for five labels plus the Partner button (the pill wants ~600px compressed and a 1024 tablet has ~650, an 860 phone ~490), so from there down the links leave the bar's flow and drop beneath it in two beats: surface first, then the labels. Beat 1: the surface — the panel and its shadow — slides in from the right. Beat 2: once it has landed, the labels rise in behind it, one after the next. Closing runs the same two beats in reverse: labels leave first, then the surface slides back out to the right. The surface lives on `::before` so it can move independently of the labels, which is what makes the two beats possible at all. */ .nav-links { position: absolute; top: calc(100% + 6px); right: 0; display: block; width: clamp(208px, 18vw, 248px); grid-template-columns: none; background: none; overflow: hidden; border-radius: 10px; z-index: 5; visibility: hidden; transition: visibility 0s linear 0.52s; /* the closing total */ } .nav-pill.ham-open .nav-links { visibility: visible; transition: visibility 0s linear 0s; } /* beat 1 — the surface */ .nav-links::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 10px; background: rgba(9, 14, 12, 0.92); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 22px 46px -14px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(167, 252, 0, 0.14) inset; /* CLOSING: leaves last, and to the right */ transform: translateX(104%); transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; } .nav-pill.ham-open .nav-links::before { /* OPENING: arrives first */ transform: translateX(0); transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1); } .nav-links-inner { position: relative; z-index: 1; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 16px 12px; overflow: visible; } .nav-links a { display: block; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; color: rgba(255, 255, 255, 0.86); /* beat 2, reversed: out fast and together */ opacity: 0; transform: translateX(16px); transition: opacity 0.16s ease, transform 0.2s ease; } .nav-links a:last-child { border-bottom: 0; } /* beat 2 — the labels, after the surface has landed */ .nav-pill.ham-open .nav-links a { opacity: 1; transform: translateX(0); transition: opacity 0.34s ease var(--nav-d, 0.3s), transform 0.46s cubic-bezier(0.16, 1, 0.3, 1) var(--nav-d, 0.3s); } .nav-pill.ham-open .nav-links a:nth-child(1) { --nav-d: 0.30s; } .nav-pill.ham-open .nav-links a:nth-child(2) { --nav-d: 0.36s; } .nav-pill.ham-open .nav-links a:nth-child(3) { --nav-d: 0.42s; } .nav-pill.ham-open .nav-links a:nth-child(4) { --nav-d: 0.48s; } .nav-pill.ham-open .nav-links a:nth-child(n + 5) { --nav-d: 0.54s; } /* the bar keeps its own corners now that the panel is detached */ header .nav-pill.ham-open { border-radius: 8.26px; } } /* Phone — Figma 1630:429 (142 × 38.91 at x=244) */ @media (max-width: 560px) { header .nav-pill { width: 142px; min-width: 0; /* the base min-width: 281px must not win */ height: 38.91px; padding: 0 9.09px 0 20.21px; gap: 20.22px; border-radius: 4.173px; background: rgba(28, 28, 28, 0.28); backdrop-filter: blur(3.512px); -webkit-backdrop-filter: blur(3.512px); } header .hamburger { width: 14.15px; height: 10.11px; margin-left: 0; } header .hamburger span { width: 14.15px; height: 1.4px; } header .hamburger.open span:nth-child(1) { transform: translateY(4.35px) rotate(45deg); } header .hamburger.open span:nth-child(3) { transform: translateY(-4.35px) rotate(-45deg); } header .nav-pill .btn-partner { margin-left: 0; width: 78.33px; height: 26.78px; border-radius: 4.548px !important; font-size: 8.085px !important; } /* A phone cannot grow the bar sideways — 3 labels + the Partner button need ~380px and there are only 361px between the gutters. So here the links leave the bar's flow and drop beneath it, still wiped open right → left so the gesture reads the same. */ header .nav-pill.ham-open { border-radius: 4.173px 4.173px 0 0; } /* the panel lives in its own ≤1399 block above — a phone only needs the tighter metrics */ .nav-links { width: 208px; border-radius: 8px; } .nav-links-inner { padding: 5px 14px 10px; } .nav-links a { padding: 11px 4px; font-size: 13px; } .nav-links::before { border-radius: 8px; } header .nav-pill.ham-open { border-radius: 4.173px; } } /* ══════════════════════════════════════════════════════ CONTACT — PREMIUM PASS Same Figma skeleton (underlined fields on #F1FFEF), but every control now has a considered rest / hover / focus / filled state, and the whole block is fluid from 1440 to 320. ══════════════════════════════════════════════════════ */ .contact-section { position: relative; isolation: isolate; background: radial-gradient(90% 70% at 8% 0%, rgba(167, 252, 0, 0.16) 0%, rgba(167, 252, 0, 0) 62%), radial-gradient(70% 60% at 100% 100%, rgba(2, 94, 115, 0.09) 0%, rgba(2, 94, 115, 0) 60%), #F1FFEF; /* vertical rhythm stays on --pv-section (set with every other band) */ } .contact-divider { background: linear-gradient(180deg, rgba(2, 23, 23, 0) 0%, rgba(2, 23, 23, 0.22) 12%, rgba(2, 23, 23, 0.22) 88%, rgba(2, 23, 23, 0) 100%); } /* ── left column ─────────────────────────────── */ .contact-heading { font-size: clamp(34px, 4.45vw, 64px); } .contact-heading-italic, .contact-heading-plain { font-size: inherit; } .contact-info-item { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .contact-info-item:hover { transform: translateX(3px); } .contact-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .contact-info-item:hover .contact-icon { transform: scale(1.08); } /* the map card's shadow + hover live in its own 3D block above; the flat duplicate that used to sit here overrode the bezel and killed the depth */ /* ── form heading + tabs ─────────────────────── */ .contact-form-heading { font-size: clamp(26px, 3.34vw, 48px); } .contact-tab { position: relative; font-size: clamp(14px, 1.25vw, 18px); padding-bottom: 12px; color: rgba(2, 23, 23, 0.52); transition: color 0.28s ease; } .contact-tab:hover { color: rgba(2, 23, 23, 0.86); } .contact-tab.active { color: #021717; } .contact-tab::after { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #A7FC00 0%, #18C03D 100%); transform-origin: left center; transform: scaleX(0); transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); } .contact-tab.active::after, .contact-tab:hover::after { transform: scaleX(1); } /* ── fields ──────────────────────────────────── */ .contact-form { gap: clamp(24px, 2.3vw, 34px); } .cf-field { padding-bottom: 2px; } .cf-label { font-size: clamp(12px, 1.03vw, 14.76px); letter-spacing: 0.01em; color: #6b7a70; transition: color 0.26s ease, letter-spacing 0.26s ease; } .cf-field:focus-within .cf-label { color: #021717; letter-spacing: 0.035em; } .cf-input, .cf-code, .cf-selected-text { font-size: clamp(17px, 1.69vw, 24.31px); line-height: 1.58; } .cf-input { caret-color: #18C03D; } .cf-input::placeholder { color: rgba(2, 23, 23, 0.24); transition: opacity 0.24s ease; } .cf-field:focus-within .cf-input::placeholder { opacity: 0.45; } .cf-input::selection { background: #A7FC00; color: #021717; } /* the rule under each field grows a coloured fill on focus */ .cf-line { position: relative; background: rgba(2, 23, 23, 0.16); overflow: hidden; transition: background 0.28s ease; } .cf-field:hover .cf-line { background: rgba(2, 23, 23, 0.30); } .cf-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #A7FC00 0%, #18C03D 55%, #025E73 100%); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .cf-field:focus-within .cf-line::after, .cf-field.is-filled .cf-line::after { transform: scaleX(1); } .cf-flag { box-shadow: 0 0 0 1px rgba(2, 23, 23, 0.10); } /* ── custom select ───────────────────────────── */ .cf-custom-selected { min-height: 44px; border-radius: 8px; padding-inline: 0; transition: color 0.24s ease; } .cf-selected-text.placeholder { color: rgba(2, 23, 23, 0.24); } .cf-chevron { width: 30px; height: 30px; border-radius: 50%; justify-content: center; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.24s ease; } .cf-custom-select:hover .cf-chevron { background: rgba(2, 23, 23, 0.06); } .cf-custom-select.open .cf-chevron { background: rgba(2, 23, 23, 0.08); } .cf-dropdown-list { border-radius: 16px; padding: 6px; max-height: 292px; overflow-y: auto; border: 1px solid rgba(2, 23, 23, 0.06); box-shadow: 0 24px 60px -24px rgba(2, 23, 23, 0.38), 0 2px 6px rgba(2, 23, 23, 0.05); scrollbar-width: thin; scrollbar-color: rgba(2, 23, 23, 0.22) transparent; } .cf-dropdown-list::-webkit-scrollbar { width: 6px; } .cf-dropdown-list::-webkit-scrollbar-thumb { background: rgba(2, 23, 23, 0.20); border-radius: 6px; } .cf-dropdown-item { border-radius: 10px; padding: 12px 16px; font-size: 15.5px; } .cf-dropdown-item + .cf-dropdown-item { border-top: 0; } .cf-dropdown-item:hover { background: rgba(167, 252, 0, 0.18); color: #021717; } .cf-dropdown-item.active { background: rgba(2, 23, 23, 0.045); color: #021717; font-weight: 500; } .cf-dropdown-item.active::after { right: 14px; background: #18C03D; } /* ── submit ──────────────────────────────────── */ .cf-submit { position: relative; overflow: hidden; isolation: isolate; width: auto; align-self: flex-start; /* the form is a column flex box — don't stretch */ min-width: 190px; height: 56px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; letter-spacing: 0.01em; background: linear-gradient(135deg, #062b2a 0%, #021717 58%); box-shadow: 0 1px 2px rgba(2, 23, 23, 0.22), 0 16px 32px -18px rgba(2, 23, 23, 0.75); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, color 0.28s ease; } .cf-submit::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, #A7FC00 0%, #18C03D 100%); opacity: 0; transition: opacity 0.32s ease; } .cf-submit:hover { color: #021717; transform: translateY(-2px); background: linear-gradient(135deg, #062b2a 0%, #021717 58%); box-shadow: 0 1px 2px rgba(2, 23, 23, 0.18), 0 22px 40px -18px rgba(24, 192, 61, 0.55); } .cf-submit:hover::before { opacity: 1; } .cf-submit:active { transform: translateY(0); } .cf-submit-arrow { display: inline-flex; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); } .cf-submit:hover .cf-submit-arrow { transform: translateX(4px); } /* ── focus visibility ────────────────────────── */ .cf-submit:focus-visible, .contact-tab:focus-visible, .cf-custom-selected:focus-visible, .contact-map-footer:focus-visible { outline: 2px solid #18C03D; outline-offset: 3px; border-radius: 10px; } /* ══ CONTACT — RESPONSIVE (premium pass) ══════ */ @media (max-width: 1200px) { .contact-section { padding-inline: var(--pv-gutter); } .contact-container { grid-template-columns: minmax(240px, 300px) 11px minmax(0, 1fr); column-gap: 32px; } } @media (max-width: 900px) { .contact-container { grid-template-columns: minmax(0, 1fr); row-gap: 44px; } .contact-divider { width: 100%; height: 1px; min-height: 0; justify-self: stretch; background: linear-gradient(90deg, rgba(2,23,23,0) 0%, rgba(2,23,23,0.20) 18%, rgba(2,23,23,0.20) 82%, rgba(2,23,23,0) 100%); } .contact-heading { margin-bottom: 32px; } .contact-map-card { width: 100%; max-width: 100%; } } @media (max-width: 700px) { .contact-section { padding-inline: var(--pv-gutter); } .cf-row { grid-template-columns: minmax(0, 1fr); row-gap: clamp(24px, 6vw, 34px); } .contact-tabs { flex-wrap: wrap; row-gap: 8px; } .cf-dropdown-list { left: 0; right: 0; } } @media (max-width: 480px) { .contact-section { padding-inline: var(--pv-gutter); } .contact-form-heading { line-height: 1.2; } .cf-submit { width: 100%; align-self: stretch; } .cf-phone-wrap { gap: 8px; } .contact-info-text { word-break: break-word; } } @media (prefers-reduced-motion: reduce) { .cf-line::after, .contact-tab::after, .cf-submit, .cf-submit::before, .contact-map-card, .contact-info-item { transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════ CONTACT — TAB PANELS, PARTNER FORM, STACKING FIXES ══════════════════════════════════════════════════════ */ /* an open dropdown has to out-rank the submit button, which creates its own stacking context for its gradient sheen */ .cf-submit { z-index: 0; } .cf-field:has(.cf-custom-select.open), .cf-row:has(.cf-custom-select.open) { position: relative; z-index: 60; } .cf-custom-select.open { z-index: 60; } .cf-dropdown-list { z-index: 70; } /* browsers without :has() still get a working order via the class the script puts on the field */ .cf-field.cf-field--open, .cf-row.cf-row--open { position: relative; z-index: 60; } /* ── tab panels ── */ .contact-panel { display: none; } .contact-panel.is-active { display: flex; } /* a field pair that stays a flex unit at every width — two-up on a wide screen, stacked flex on a phone */ .cf-row--pair { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.4vw, 34px); align-items: flex-start; } .cf-row--pair > .cf-field { flex: 1 1 260px; min-width: 0; } /* ── partner-form extras ── */ .cf-textarea { resize: vertical; min-height: 44px; max-height: 200px; font-family: 'DM Sans', sans-serif; line-height: 1.45; } .cf-note { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.45; color: #7a2020; min-height: 0; } .cf-note.is-ok { color: #08532a; } .cf-note:empty { display: none; } .cf-input--error, .cf-field.has-error .cf-line { background: #c0392b; } .cf-field.has-error .cf-line::after { transform: scaleX(0); } .cf-submit--success { background: #08532a !important; } /* ── mobile: phone + e-mail sit side by side in the info column ── */ @media (max-width: 900px) { .contact-info-pair { display: flex; flex-wrap: wrap; gap: 20px 28px; } .contact-info-pair > .contact-info-item { flex: 1 1 180px; min-width: 0; } .contact-info-pair .contact-info-text { word-break: break-word; } } /* phone and e-mail stay two-up right down to the smallest phone — they are the two things a visitor reaches for first */ @media (max-width: 420px) { .contact-info-pair { gap: 16px; } .contact-info-pair > .contact-info-item { flex: 1 1 132px; } .contact-info-pair .contact-info-label { font-size: 14px; } .contact-info-pair .contact-info-text { font-size: 13.5px; line-height: 1.35; } .contact-info-pair .contact-icon { flex: 0 0 auto; } } /* ════════════════════════════════════════════════ SHARED — STAR ZOOM INTRO Plays on every fresh load / reload: the lime star pops in, grows until it covers the viewport, then the whole overlay fades out and the page is revealed behind it. The choreography is pure CSS, and the last keyframe is `visibility: hidden`, so if the script never runs the overlay still disappears and can never trap the page. global.js adds the scroll lock while it plays. ════════════════════════════════════════════════ */ .star-intro { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: #000000; animation: starIntroFade 0.7s ease-in-out 0.7s forwards; } .star-intro-star { /* big enough that scale(8) covers every corner on any aspect ratio */ width: 30vmax; height: 30vmax; transform: scale(0); opacity: 0; transform-origin: center; animation: starIntroPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards, starIntroGrow 0.7s ease-in 0.7s forwards; } .star-intro-star img { display: block; width: 100%; height: 100%; object-fit: contain; } @keyframes starIntroPop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(0.14) rotate(0deg); opacity: 1; } } @keyframes starIntroGrow { 0% { transform: scale(0.14); } 100% { transform: scale(8); } } @keyframes starIntroFade { 0% { opacity: 1; visibility: visible; } 40% { opacity: 0.65; visibility: visible; } 70% { opacity: 0.3; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* Scroll lock while the intro plays. Only — never give a height here, for the same reason the Lenis note at the top of this file spells out. */ html.star-intro-on { overflow: hidden !important; } @media (prefers-reduced-motion: reduce) { .star-intro { display: none; } } /* ══════════════════════════════════════════════════════ SHARED PREMIUM DROPDOWN — BASE COMPONENT Required by Contact, Relocations, Storage and About. ══════════════════════════════════════════════════════ */ /* ── Premium dropdown ─────────────────────────────────── Custom listbox: glass panel, rule that wipes in, chevron flip, staggered options, tick on the selected row. */ .ab-dd { position: relative; margin-top: 14px; } /* the whole filter row lifts while a panel is open */ .ab-dd-trigger { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 40px; padding: 0; background: none; border: 0; border-bottom: 1px solid rgba(243, 255, 248, 0.28); border-radius: 0; text-align: left; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: clamp(16px, 1.69vw, 24.313px); font-weight: 400; line-height: 1.217; color: var(--ab-paper); transition: border-color 0.25s ease; } .ab-dd-trigger:focus { outline: none; } .ab-dd-trigger:focus-visible { outline: 2px solid #a7fc00; outline-offset: 6px; border-radius: 4px; } /* the rule that wipes in under the field */ .ab-dd-rule { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #a7fc00; transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .ab-dd-trigger:hover .ab-dd-rule, .ab-dd.is-open .ab-dd-rule, .ab-dd.has-value .ab-dd-rule { transform: scaleX(1); } .ab-dd-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(243, 255, 248, 0.45); transition: color 0.25s ease; } .ab-dd.has-value .ab-dd-value, .ab-dd.is-open .ab-dd-value { color: var(--ab-paper); } .ab-dd-chevron { display: flex; align-items: center; justify-content: center; width: 19px; height: 10px; flex-shrink: 0; color: rgba(243, 255, 248, 0.55); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease; } .ab-dd-chevron svg { width: 100%; height: 100%; display: block; } .ab-dd-trigger:hover .ab-dd-chevron { color: var(--ab-paper); } .ab-dd.is-open .ab-dd-chevron { transform: rotate(180deg); color: #a7fc00; } /* ── Panel ── */ .ab-dd-panel { position: absolute; z-index: 40; left: -10px; right: -10px; top: calc(100% + 14px); padding: 8px; background: rgba(16, 19, 17, 0.88); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(167, 252, 0, 0.16); border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.05) inset; max-height: 322px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.98); transform-origin: top center; transition: opacity 0.26s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s; } .ab-dd.is-open .ab-dd-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* drops upward when there is no room below */ .ab-dd.is-up .ab-dd-panel { top: auto; bottom: calc(100% + 14px); transform-origin: bottom center; transform: translateY(10px) scale(0.98); } .ab-dd.is-up.is-open .ab-dd-panel { transform: translateY(0) scale(1); } .ab-dd-panel::-webkit-scrollbar { width: 6px; } .ab-dd-panel::-webkit-scrollbar-track { background: transparent; } .ab-dd-panel::-webkit-scrollbar-thumb { background: rgba(243, 255, 248, 0.16); border-radius: 99px; } /* ── Option rows ── */ .ab-dd-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 13px 14px; background: none; border: 0; border-radius: 12px; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; color: rgba(243, 255, 248, 0.7); opacity: 0; transform: translateY(6px); transition: background 0.2s ease, color 0.2s ease; } .ab-dd.is-open .ab-dd-option { opacity: 1; transform: none; transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease var(--ab-dd-delay, 0s), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--ab-dd-delay, 0s); } .ab-dd.is-open .ab-dd-option:nth-child(1) { --ab-dd-delay: 0.02s; } .ab-dd.is-open .ab-dd-option:nth-child(2) { --ab-dd-delay: 0.05s; } .ab-dd.is-open .ab-dd-option:nth-child(3) { --ab-dd-delay: 0.08s; } .ab-dd.is-open .ab-dd-option:nth-child(4) { --ab-dd-delay: 0.11s; } .ab-dd.is-open .ab-dd-option:nth-child(5) { --ab-dd-delay: 0.14s; } .ab-dd.is-open .ab-dd-option:nth-child(6) { --ab-dd-delay: 0.17s; } .ab-dd.is-open .ab-dd-option:nth-child(n + 7) { --ab-dd-delay: 0.2s; } .ab-dd-option:hover, .ab-dd-option.is-active { background: rgba(167, 252, 0, 0.1); color: var(--ab-paper); } .ab-dd-option:focus { outline: none; } .ab-dd-option.is-selected { color: #a7fc00; } .ab-dd-option-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ab-dd-check { display: flex; width: 16px; height: 16px; flex-shrink: 0; color: #a7fc00; opacity: 0; transform: scale(0.55); transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .ab-dd-check svg { width: 100%; height: 100%; display: block; } .ab-dd-option.is-selected .ab-dd-check { opacity: 1; transform: none; } /* ══════════════════════════════════════════════════════ THE ABOUT-PAGE DROPDOWN, REUSED `.ab-dd` (Figma-era About careers filter) is the site's best select: lime rule wipe, chevron flip, glass panel, staggered rows, tick on the chosen one, drop-up when there is no room. The markup and JS are shared verbatim; only the trigger is re-skinned to its host form, because that part has to sit in the host's own field. ══════════════════════════════════════════════════════ */ /* the tokens the component needs when it lives outside .about-page */ .contact-form .ab-dd, .rl-book-card .ab-dd { --ab-paper: #f3fff8; --ab-muted: #696969; } /* ── in the contact form (light, underlined fields) ── */ .contact-form .ab-dd { margin-top: 4px; } .contact-form .ab-dd-trigger { height: auto; min-height: 44px; padding: 0 0 4px; border-bottom: 1px solid rgba(2, 23, 23, 0.16); font-family: 'DM Sans', sans-serif; font-size: clamp(17px, 1.69vw, 24.31px); line-height: 1.58; color: #021717; } .contact-form .ab-dd-trigger:hover { border-bottom-color: rgba(2, 23, 23, 0.30); } .contact-form .ab-dd-value { color: rgba(2, 23, 23, 0.24); } .contact-form .ab-dd.has-value .ab-dd-value, .contact-form .ab-dd.is-open .ab-dd-value { color: #021717; } .contact-form .ab-dd-rule { background: linear-gradient(90deg, #a7fc00 0%, #18c03d 55%, #025e73 100%); } .contact-form .ab-dd-chevron { color: rgba(2, 23, 23, 0.45); } .contact-form .ab-dd-trigger:hover .ab-dd-chevron { color: #021717; } .contact-form .ab-dd.is-open .ab-dd-chevron { color: #18c03d; } .contact-form .ab-dd-trigger:focus-visible { outline-color: #18c03d; } /* the open panel has to clear the submit button below it */ .cf-field:has(.ab-dd.is-open), .cf-row:has(.ab-dd.is-open) { position: relative; z-index: 60; } .contact-form .ab-dd.is-open { z-index: 60; } .contact-form .ab-dd-panel { z-index: 70; } /* ── in the relocations card (dark, boxed fields) ── */ .rl-book-card .ab-dd { margin-top: 0; } .rl-book-card .ab-dd-trigger { height: auto; min-height: 0; margin-top: 6px; padding: 0; border-bottom: 0; font-family: 'Host Grotesk', sans-serif; font-size: var(--jb-fs-body); line-height: 1.6; letter-spacing: -0.01em; color: #ffffff; } /* the field shell already draws the box, so the rule is redundant */ .rl-book-card .ab-dd-rule { display: none; } .rl-book-card .ab-dd-value { color: rgba(230, 230, 230, 0.32); font-weight: 300; } .rl-book-card .ab-dd.has-value .ab-dd-value, .rl-book-card .ab-dd.is-open .ab-dd-value { color: #ffffff; font-weight: 400; } .rl-book-card .ab-dd-chevron { width: 17px; height: 9px; color: rgba(230, 230, 230, 0.55); } .rl-book-card .ab-dd.is-open .ab-dd-chevron { color: var(--jb-lime); } .rl-book-card .ab-dd-trigger:focus-visible { outline-color: var(--jb-lime); outline-offset: 4px; } .rl-book-card .ab-dd-panel { left: -12px; right: -12px; border-color: rgba(183, 246, 110, 0.18); } .rl-book-card .ab-dd-option.is-selected, .rl-book-card .ab-dd-check { color: var(--jb-lime); } .rl-book-card .ab-dd-option:hover, .rl-book-card .ab-dd-option.is-active { background: rgba(183, 246, 110, 0.12); } /* an open select outranks the fields and the button below it */ .rl-field:has(.ab-dd.is-open) { z-index: 60; } .rl-pair:has(.ab-dd.is-open) { position: relative; z-index: 60; } .rl-book-card .ab-dd.is-open { z-index: 60; } .rl-book-card .ab-dd-panel { z-index: 70; } /* ── :has() fallback: the script mirrors the state as a class ── */ .cf-field.dd-open, .cf-row.dd-open, .rl-field.dd-open, .rl-pair.dd-open { position: relative; z-index: 60; } @media (max-width: 620px) { .rl-book-card .ab-dd-panel { left: -6px; right: -6px; } } /* ══════════════════════════════════════════════════════ DATE PICKER — shared, premium A real calendar instead of the browser's. The panel is pinned to the field's own edges, so it is always exactly as wide as the input, and every colour comes from four custom properties, so it takes on whichever form it is dropped into. ══════════════════════════════════════════════════════ */ .pv-date { position: relative; --cal-bg: #121212; --cal-ink: #ffffff; --cal-dim: rgba(230, 230, 230, 0.45); --cal-line: rgba(230, 230, 230, 0.14); --cal-accent: #b7f66e; --cal-on-accent: #051005; --cal-hover: rgba(183, 246, 110, 0.12); } .pv-date-control { width: 100%; margin-top: 6px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; font: inherit; color: inherit; } .pv-date-control:focus-visible { outline: none; } .pv-date-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .pv-date-value.is-placeholder { color: var(--cal-dim); font-weight: 300; } .pv-date-icon { flex: 0 0 auto; display: inline-flex; width: 22px; height: 22px; color: var(--cal-dim); transition: color 0.24s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .pv-date-icon svg { width: 100%; height: 100%; display: block; } .pv-date-control:hover .pv-date-icon { color: var(--cal-ink); } .pv-date.is-open .pv-date-icon { color: var(--cal-accent); transform: scale(1.06); } /* ── the panel: exactly the field's width ── */ .pv-cal { position: absolute; left: -1px; /* the field's 1px border */ right: -1px; top: calc(100% + 14px); z-index: 70; padding: 16px; border: 1px solid var(--cal-line); border-radius: 18px; background: var(--cal-bg); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.98); transform-origin: top center; transition: opacity 0.26s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s; } .pv-date.is-open .pv-cal { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .pv-date.is-up .pv-cal { top: auto; bottom: calc(100% + 14px); transform-origin: bottom center; transform: translateY(10px) scale(0.98); } .pv-date.is-up.is-open .pv-cal { transform: translateY(0) scale(1); } /* ── header ── */ .pv-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .pv-cal-title { flex: 1 1 auto; min-width: 0; text-align: center; font-family: 'Host Grotesk', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--cal-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-cal-step { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--cal-line); border-radius: 50%; background: none; color: var(--cal-dim); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pv-cal-step svg { width: 13px; height: 13px; } .pv-cal-step:hover:not(:disabled) { background: var(--cal-hover); border-color: var(--cal-accent); color: var(--cal-accent); } .pv-cal-step:disabled { opacity: 0.3; cursor: default; } /* ── grid ── */ .pv-cal-dows, .pv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .pv-cal-dows { margin-bottom: 4px; } .pv-cal-dow { height: 24px; display: flex; align-items: center; justify-content: center; font-family: 'Host Grotesk', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cal-dim); } .pv-cal-day { aspect-ratio: 1; min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer; font-family: 'Host Grotesk', sans-serif; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--cal-ink); transition: background 0.16s ease, color 0.16s ease, box-shadow 0.2s ease; } .pv-cal-day:hover:not(:disabled) { background: var(--cal-hover); } .pv-cal-day:disabled { color: var(--cal-dim); opacity: 0.4; cursor: default; } .pv-cal-day.is-blank { visibility: hidden; cursor: default; } .pv-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--cal-line); } .pv-cal-day.is-focus { box-shadow: inset 0 0 0 1px var(--cal-accent); } .pv-cal-day.is-selected { background: var(--cal-accent); color: var(--cal-on-accent); font-weight: 500; } .pv-cal-day.is-selected:hover { background: var(--cal-accent); } /* ── footer ── */ .pv-cal-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cal-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pv-cal-act { padding: 7px 14px; border: 1px solid var(--cal-line); border-radius: 99px; background: none; cursor: pointer; font-family: 'Host Grotesk', sans-serif; font-size: 12.5px; color: var(--cal-dim); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pv-cal-act:hover { background: var(--cal-hover); border-color: var(--cal-accent); color: var(--cal-accent); } .pv-cal-act--go { color: var(--cal-ink); } /* ── skins ── */ /* light forms (the contact block) */ .contact-form .pv-date { --cal-bg: #ffffff; --cal-ink: #021717; --cal-dim: rgba(2, 23, 23, 0.42); --cal-line: rgba(2, 23, 23, 0.10); --cal-accent: #18c03d; --cal-on-accent: #ffffff; --cal-hover: rgba(167, 252, 0, 0.18); } .contact-form .pv-cal { box-shadow: 0 26px 60px -24px rgba(2, 23, 23, 0.38), 0 2px 6px rgba(2, 23, 23, 0.05); } /* the relocations card is already dark — it only needs the field metrics */ .rl-book-card .pv-date-control { font-family: 'Host Grotesk', sans-serif; font-size: var(--jb-fs-body); line-height: 1.6; letter-spacing: -0.01em; color: #ffffff; } .rl-book-card .pv-date { --cal-bg: #121212; --cal-line: rgba(183, 246, 110, 0.16); --cal-accent: #b7f66e; --cal-on-accent: #051005; } /* the panel spans the field box itself: 20px padding + the 1px border */ .rl-book-card .pv-cal { left: -21px; right: -21px; } /* an open calendar has to out-rank the rows and the button below it */ .rl-field:has(.pv-date.is-open), .cf-field:has(.pv-date.is-open) { position: relative; z-index: 60; } .rl-pair:has(.pv-date.is-open), .cf-row:has(.pv-date.is-open) { position: relative; z-index: 60; } .pv-date.is-open { z-index: 60; } @media (max-width: 620px) { .rl-book-card .pv-cal { left: -21px; right: -21px; } .pv-cal { padding: 14px; } .pv-cal-day { min-height: 34px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .pv-cal, .pv-date-icon, .pv-cal-day, .pv-cal-step { transition-duration: 0.01ms !important; } }