/* === nav === */ /* Inter webfont — replicates the about.html Google Fonts . In a widget bundle there is no link, so it is imported here (must be the very first rule in the bundle). Full weight + italic range to match the source (h1/h3 use 900, .italic uses italic). display=swap avoids FOUC. */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* No text-decoration line anywhere on the about page — kill the WP/Elementor theme default text-decoration on every about-page link (.ap-* / .vp-*), incl. nav links and :hover. */ [class^="ap-"] a, [class*=" ap-"] a, [class^="vp-"] a, [class*=" vp-"] a, [class^="ap-"] a:hover, [class*=" ap-"] a:hover, [class^="vp-"] a:hover, [class*=" vp-"] a:hover{ text-decoration:none; } :root{ --vp-night-1:#06140d; --vp-night-2:#0a1f14; --vp-eucalypt:#16a34a; --vp-eucalypt-2:#22c55e; --vp-forest:#15803d; --vp-gold:#ca8a04; --vp-gold-2:#facc15; --vp-gold-3:#fde047; --vp-sun:#f97316; --vp-blood:#dc2626; --vp-ocean:#0284c7; --vp-pearl:#f8fafc; --vp-mist:#cbd5e1; --vp-stone:#94a3b8; } /* Reset */ html, body{ margin:0; padding:0; } /* Full-bleed guard: absorbs the sub-pixel overflow that calc(50% - 50vw) full-bleed sections (the footer) create alongside a vertical scrollbar, so no horizontal scrollbar appears. */ html{ overflow-x:hidden; } html, body, button, input, select, textarea{ font-family:'Inter', system-ui, -apple-system, Segoe UI, sans-serif !important; } body *{ box-sizing:border-box; font-family:'Inter', system-ui, -apple-system, Segoe UI, sans-serif; } *, *::before, *::after{ box-sizing:border-box; } a{ color:inherit; } img, svg{ display:block; max-width:100%; } body{ background: radial-gradient(1100px 700px at 10% 18%, rgba(34,197,94,.05), transparent 60%), radial-gradient(900px 600px at 90% 78%, rgba(250,204,21,.04), transparent 60%), linear-gradient(180deg, #f5f7f2 0%, #fafcf6 50%, #f3f7f1 100%); min-height:100vh; color:#0a1f14; -webkit-font-smoothing:antialiased; } .italic{ font-style:italic; font-weight:600; } /* ════════════════════════════════════════════════════════════ MINI HEADER NAV — sticky, brand bar ════════════════════════════════════════════════════════════ */ .vp-nav{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(6,20,13,.96), rgba(10,31,20,.94)); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid rgba(250,204,21,.18); box-shadow:0 6px 20px rgba(0,0,0,.18); } .vp-nav-inner{ max-width:1320px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 32px; } .vp-nav-brand{ display:inline-flex; align-items:center; gap:11px; font-size:18px; font-weight:900; color:#fff; letter-spacing:-.4px; text-decoration:none; } .vp-nav-brand em{ font-style:normal; color:#facc15; text-shadow:0 0 12px rgba(250,204,21,.4); } .vp-nav-logo{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; background:linear-gradient(135deg,#fde047,#facc15 40%,#f97316 100%); color:#0a1f14; font-size:13px; font-weight:900; letter-spacing:-.4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(249,115,22,.4), 0 0 0 1.5px rgba(250,204,21,.4); } .vp-nav-links{ display:inline-flex; align-items:center; gap:6px; } .vp-nav-link{ font-size:13px; font-weight:700; color:#cbd5e1; padding:8px 14px; border-radius:99px; text-decoration:none; transition:color .18s, background .18s; } .vp-nav-link:hover{ color:#facc15; background:rgba(250,204,21,.08); } .vp-nav-link.is-active{ color:#0a1f14; background:linear-gradient(135deg,#fde047,#facc15); box-shadow:0 4px 12px rgba(250,204,21,.32); } .vp-nav-back{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:#cbd5e1; padding:8px 12px; border-radius:99px; border:1px solid rgba(255,255,255,.12); text-decoration:none; transition:all .18s; } .vp-nav-back:hover{ color:#facc15; border-color:rgba(250,204,21,.4); background:rgba(250,204,21,.06); } .vp-nav-back svg{ width:13px; height:13px; } @media (max-width:768px){ .vp-nav-inner{ padding:11px 16px; gap:12px; } .vp-nav-links{ display:none; } .vp-nav-brand{ font-size:16px; gap:9px; } .vp-nav-logo{ width:32px; height:32px; font-size:12px; } } /* === hero === */ /* No text-decoration line anywhere on the about page — kill the WP/Elementor theme default text-decoration on every about-page link (.ap-* / .vp-*), incl. nested label/value spans and :hover. */ [class^="ap-"] a, [class*=" ap-"] a, [class^="vp-"] a, [class*=" vp-"] a, [class^="ap-"] a:hover, [class*=" ap-"] a:hover, [class^="vp-"] a:hover, [class*=" vp-"] a:hover{ text-decoration:none; } .ap-hero{ position:relative; width:100%; padding:64px 0 48px; background: radial-gradient(900px 480px at 12% 20%, rgba(22,163,74,.10), transparent 55%), radial-gradient(800px 460px at 88% 80%, rgba(250,204,21,.08), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.6) 100%); border-bottom:1.5px dashed rgba(22,163,74,.18); overflow:hidden; } .ap-hero::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent 0%, #16a34a 25%, #ca8a04 50%, #16a34a 75%, transparent 100%); } .ap-hero-wrap{ max-width:1320px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:end; } .ap-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#15803d; padding:6px 14px; background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(250,204,21,.08)); border:1px solid rgba(22,163,74,.22); border-radius:99px; margin-bottom:14px; } .ap-hero-eyebrow svg{ width:13px; height:13px; } .ap-hero h1{ font-size:clamp(32px, 4.2vw, 54px); font-weight:900; line-height:1.04; letter-spacing:-1.4px; color:#0a1f14; margin:0; } .ap-hero h1 .accent{ font-style:italic; font-weight:900; background:linear-gradient(135deg,#16a34a,#ca8a04); -webkit-background-clip:text; background-clip:text; color:transparent; } .ap-hero-sub{ font-size:16px; line-height:1.6; color:#475569; font-weight:500; max-width:640px; margin:14px 0 0; } .ap-hero-sub b{ color:#0a1f14; font-weight:800; } .ap-hero-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; min-width:380px; } .ap-hero-stat{ background:#fff; border:1.5px solid rgba(22,163,74,.18); border-radius:14px; padding:14px 14px; box-shadow:0 4px 12px rgba(0,0,0,.04); position:relative; overflow:hidden; } .ap-hero-stat::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#22c55e,#facc15); } .ap-hero-stat strong{ display:block; font-size:26px; font-weight:900; color:#15803d; letter-spacing:-.6px; line-height:1.05; font-feature-settings:"tnum" 1; } .ap-hero-stat span{ display:block; margin-top:4px; font-size:11px; font-weight:800; color:#64748b; letter-spacing:.5px; text-transform:uppercase; } @media (max-width:1100px){ .ap-hero-wrap{ grid-template-columns:1fr; gap:28px; align-items:start; } .ap-hero-stats{ min-width:0; } } @media (max-width:768px){ .ap-hero{ padding:38px 0 32px; } .ap-hero-wrap{ padding:0 16px; gap:22px; } .ap-hero h1{ font-size:28px; letter-spacing:-.8px; } .ap-hero-sub{ font-size:14px; line-height:1.55; } .ap-hero-stats{ grid-template-columns:repeat(3,1fr); gap:8px; } .ap-hero-stat{ padding:11px 10px; border-radius:12px; } .ap-hero-stat strong{ font-size:20px; } .ap-hero-stat span{ font-size:9.5px; } } @media (max-width:430px){ .ap-hero-wrap{ padding:0 12px; } } /* === mission === */ /* No text-decoration line anywhere on the about page — kill the WP/Elementor theme default text-decoration on every about-page link (.ap-* / .vp-*), incl. nested label/value spans and :hover. */ [class^="ap-"] a, [class*=" ap-"] a, [class^="vp-"] a, [class*=" vp-"] a, [class^="ap-"] a:hover, [class*=" ap-"] a:hover, [class^="vp-"] a:hover, [class*=" vp-"] a:hover{ text-decoration:none; } /* ════════════════════════════════════════════════════════════ FLOATING GLASS FRAME — same as homepage section pattern ════════════════════════════════════════════════════════════ */ .ap-frame{ position:relative; max-width:1400px; margin:22px auto; background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(252,253,250,.82)), rgba(255,255,255,.4); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1.5px solid rgba(255,255,255,.85); border-radius:28px; box-shadow: 0 28px 64px -20px rgba(22,163,74,.20), 0 10px 32px -12px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95); overflow:hidden; } .ap-wrap{ max-width:1320px; margin:0 auto; padding:54px 32px 56px; position:relative; z-index:1; } @media (max-width:1100px){ .ap-frame{ margin:18px 14px; } .ap-wrap{ padding:46px 24px 48px; } } @media (max-width:768px){ .ap-frame{ margin:14px 10px; border-radius:22px; } .ap-wrap{ padding:32px 16px 36px; } } @media (max-width:430px){ .ap-frame{ margin:12px 8px; border-radius:20px; } } /* ════════════════════════════════════════════════════════════ SECTION HEADER (icon + eyebrow + meta + h2 + sub) ════════════════════════════════════════════════════════════ */ .ap-sec-head{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; row-gap:8px; margin-bottom:28px; padding:2px 0 22px 22px; /* Elementor guard: the content-width container is narrower than the standalone page, so the h2 grid track must be allowed to shrink/wrap instead of overflowing to the right. */ min-width:0; max-width:100%; } .ap-sec-head::before{ content:''; position:absolute; left:0; top:4px; bottom:28px; width:4px; border-radius:99px; background:linear-gradient(180deg, #16a34a 0%, #15803d 60%, #ca8a04 100%); box-shadow:0 0 10px rgba(22,163,74,.32); } .ap-sec-head::after{ content:''; position:absolute; left:22px; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(22,163,74,.32) 30%, rgba(22,163,74,.18) 70%, transparent 100%); } .ap-sec-icon{ grid-column:1; grid-row:2 / span 2; align-self:center; width:84px; height:84px; display:grid; place-items:center; position:relative; } .ap-sec-icon::before{ content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(22,163,74,.16) 0%, rgba(202,138,4,.07) 50%, transparent 78%); filter:blur(.5px); } .ap-sec-icon svg{ position:relative; z-index:2; width:62px; height:62px; color:#15803d; filter:drop-shadow(0 6px 14px rgba(22,163,74,.22)); } .ap-sec-icon svg .accent{ stroke:#ca8a04; } .ap-sec-head-top{ grid-column:1 / -1; grid-row:1; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } .ap-sec-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#15803d; padding:5px 12px; background:rgba(22,163,74,.10); border:1px solid rgba(22,163,74,.22); border-radius:99px; } .ap-sec-meta{ display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px 14px; font-size:12.5px; color:#64748b; } .ap-sec-meta b{ color:#0a1f14; font-weight:800; } .ap-sec-meta-dot{ width:3px; height:3px; border-radius:50%; background:rgba(22,163,74,.4); } .ap-sec-h2{ grid-column:2; grid-row:2; font-size:clamp(26px, 3vw, 38px); font-weight:900; line-height:1.08; letter-spacing:-1px; color:#0a1f14; margin:2px 0 0; max-width:100%; align-self:end; min-width:0; overflow-wrap:anywhere; } .ap-sec-h2 .italic{ color:#15803d; font-style:italic; font-weight:900; } .ap-sec-sub{ grid-column:2; grid-row:3; font-size:14.5px; font-weight:500; color:#475569; line-height:1.6; margin:6px 0 0; max-width:80%; min-width:0; overflow-wrap:anywhere; } @media (max-width:900px){ .ap-sec-h2, .ap-sec-sub{ max-width:100%; } } @media (max-width:768px){ .ap-sec-head{ column-gap:12px; padding-bottom:18px; margin-bottom:22px; } .ap-sec-icon{ width:56px; height:56px; } .ap-sec-icon svg{ width:40px; height:40px; } .ap-sec-h2{ font-size:22px; letter-spacing:-.6px; } .ap-sec-sub{ font-size:13px; } } @media (max-width:430px){ .ap-sec-icon{ width:48px; height:48px; } .ap-sec-icon svg{ width:34px; height:34px; } } /* ════════════════════════════════════════════════════════════ MISSION / VALUES BLOCK — 3-col card grid ════════════════════════════════════════════════════════════ */ .ap-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .ap-value-card{ position:relative; background:#fff; border:1.5px solid rgba(22,163,74,.14); border-radius:18px; padding:22px 22px 20px; display:grid !important; grid-template-columns:auto minmax(0,1fr); grid-template-areas: "icon title" "body body"; column-gap:14px; row-gap:11px; align-items:center; box-shadow:0 4px 14px rgba(0,0,0,.04); overflow:hidden; transition:transform .25s, border-color .2s, box-shadow .2s; } .ap-value-card:hover{ transform:translateY(-3px); border-color:rgba(22,163,74,.35); box-shadow:0 14px 32px rgba(22,163,74,.10); } .ap-value-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-stripe, linear-gradient(90deg,#22c55e,#16a34a,#facc15)); } .ap-value-card.v-blue::before{ background:linear-gradient(90deg,#7dd3fc,#0ea5e9,#0284c7); } .ap-value-card.v-gold::before{ background:linear-gradient(90deg,#fde68a,#facc15,#ca8a04); } .ap-value-icon{ grid-area:icon; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#16a34a,#15803d); box-shadow:0 4px 12px rgba(22,163,74,.32); flex-shrink:0; } .ap-value-card.v-blue .ap-value-icon{ background:linear-gradient(135deg,#0ea5e9,#1e40af); box-shadow:0 4px 12px rgba(14,165,233,.32); } .ap-value-card.v-gold .ap-value-icon{ background:linear-gradient(135deg,#facc15,#ca8a04); color:#0a1f14; box-shadow:0 4px 12px rgba(202,138,4,.32); } .ap-value-icon svg{ width:20px; height:20px; } .ap-value-card h3{ grid-area:title; margin:0; font-size:17px; font-weight:900; color:#0a1f14; letter-spacing:-.3px; line-height:1.2; align-self:center; } .ap-value-card p{ grid-area:body; margin:0; font-size:13.5px; line-height:1.6; color:#475569; font-weight:500; } .ap-value-card p b{ color:#0a1f14; font-weight:800; } @media (max-width:1100px){ .ap-values-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .ap-values-grid{ grid-template-columns:1fr; gap:12px; } } /* reduced-motion guard — about.html L1247-1250 (.ap-value-card slice; .ap-profile + .vp-foot::after belong to the team/footer widgets) */ @media (prefers-reduced-motion: reduce){ .ap-value-card{ transition:none; } } /* === team === */ /* No text-decoration line anywhere on the about page — kill the WP/Elementor theme default text-decoration on every about-page link (.ap-* / .vp-*), incl. nested label/value spans and :hover. */ [class^="ap-"] a, [class*=" ap-"] a, [class^="vp-"] a, [class*=" vp-"] a, [class^="ap-"] a:hover, [class*=" ap-"] a:hover, [class^="vp-"] a:hover, [class*=" vp-"] a:hover{ text-decoration:none; } /* ════════════════════════════════════════════════════════════ GROUP BAR — responsibility groups legend ════════════════════════════════════════════════════════════ */ .ap-groupbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 18px; margin:0 0 26px; border-radius:14px; background:linear-gradient(135deg, rgba(22,163,74,.07), rgba(250,204,21,.05)); border:1.5px solid rgba(22,163,74,.18); } .ap-groupbar-label{ font-size:11px; font-weight:900; color:#15803d; letter-spacing:.6px; text-transform:uppercase; margin-right:4px; } .ap-groupbar-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; background:#fff; border:1.5px solid rgba(15,23,42,.08); font-size:11.5px; font-weight:700; color:#0a1f14; letter-spacing:.1px; } .ap-groupbar-pill b{ font-weight:900; color:#15803d; } .ap-groupbar-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--ap-dot,#16a34a); box-shadow:0 0 0 2px rgba(22,163,74,.14); } .ap-groupbar-pill.v-editorial{ --ap-dot:#16a34a; } .ap-groupbar-pill.v-analyst{ --ap-dot:#ca8a04; } .ap-groupbar-pill.v-compliance{--ap-dot:#dc2626; } .ap-groupbar-pill.v-tech{ --ap-dot:#0284c7; } @media (max-width:768px){ .ap-groupbar{ padding:12px 14px; gap:8px 10px; border-radius:12px; } .ap-groupbar-label{ font-size:10px; } .ap-groupbar-pill{ font-size:11px; padding:4px 10px; } } /* ════════════════════════════════════════════════════════════ TEAM PROFILE CARDS — large detailed format ════════════════════════════════════════════════════════════ */ .ap-team{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .ap-profile{ position:relative; background:#fff; border:1.5px solid rgba(15,23,42,.08); border-radius:20px; box-shadow:0 6px 20px rgba(0,0,0,.05); overflow:hidden; transition:transform .25s, border-color .2s, box-shadow .25s; display:flex; flex-direction:column; } .ap-profile:hover{ transform:translateY(-3px); border-color:rgba(22,163,74,.32); box-shadow:0 18px 36px rgba(22,163,74,.10); } /* Top stripe — colour by group */ .ap-profile::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-stripe, linear-gradient(90deg,#22c55e,#16a34a)); } .ap-profile.v-editorial{ --ap-stripe:linear-gradient(90deg,#22c55e,#16a34a,#15803d); } .ap-profile.v-analyst{ --ap-stripe:linear-gradient(90deg,#fde047,#facc15,#ca8a04); } .ap-profile.v-compliance{ --ap-stripe:linear-gradient(90deg,#fca5a5,#ef4444,#b91c1c); } .ap-profile.v-tech{ --ap-stripe:linear-gradient(90deg,#7dd3fc,#0ea5e9,#0284c7); } /* Header band — large avatar + identity */ .ap-profile-head{ position:relative; padding:24px 22px 18px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:start; background:linear-gradient(180deg, rgba(22,163,74,.04), transparent); } .ap-profile.v-analyst .ap-profile-head{ background:linear-gradient(180deg, rgba(250,204,21,.06), transparent); } .ap-profile.v-compliance .ap-profile-head{ background:linear-gradient(180deg, rgba(220,38,38,.05), transparent); } .ap-profile.v-tech .ap-profile-head{ background:linear-gradient(180deg, rgba(14,165,233,.05), transparent); } /* whole header is a link to that author's profile */ a.ap-profile-head{ text-decoration:none; color:inherit; cursor:pointer; transition:background .2s; } /* WP-theme guard: themes add a text-decoration line to descendants — kill it on the whole linked profile head (role / tenure / location were getting a line). */ a.ap-profile-head, a.ap-profile-head *{ text-decoration:none !important; } a.ap-profile-head:hover{ background:linear-gradient(180deg, rgba(22,163,74,.10), transparent); } a.ap-profile-head .ap-id h3{ transition:color .18s; display:inline-flex; align-items:center; gap:7px; } a.ap-profile-head:hover .ap-id h3{ color:#15803d; } /* arrow cue after the name on hover */ a.ap-profile-head .ap-id h3::after{ content:''; width:15px; height:15px; flex-shrink:0; background:no-repeat center/contain url("data:image/svg+xml;utf8,"); opacity:0; transform:translateX(-4px); transition:opacity .18s, transform .18s; } a.ap-profile-head:hover .ap-id h3::after{ opacity:1; transform:translateX(0); } a.ap-profile.v-analyst .ap-profile-head:hover .ap-id h3, .ap-profile.v-analyst a.ap-profile-head:hover .ap-id h3{ color:#a16207; } .ap-profile.v-compliance a.ap-profile-head:hover .ap-id h3{ color:#b91c1c; } .ap-profile.v-tech a.ap-profile-head:hover .ap-id h3{ color:#0284c7; } .ap-avatar{ position:relative; width:78px; height:78px; border-radius:18px; display:grid; place-items:center; font-size:22px; font-weight:900; color:#fff; letter-spacing:-.4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.18); flex-shrink:0; } .ap-avatar::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,.25), transparent 60%); pointer-events:none; } .ap-avatar-verified{ position:absolute; right:-4px; bottom:-4px; width:24px; height:24px; border-radius:50%; background:#16a34a; color:#fff; display:grid; place-items:center; box-shadow:0 2px 6px rgba(22,163,74,.5), 0 0 0 3px #fff; z-index:2; } .ap-avatar-verified svg{ width:12px; height:12px; } .ap-id{ min-width:0; padding-top:4px; } .ap-id h3{ margin:0; font-size:20px; font-weight:900; color:#0a1f14; letter-spacing:-.4px; line-height:1.15; } .ap-id-role{ display:block; margin-top:5px; font-size:12.5px; font-weight:800; color:var(--ap-role,#15803d); letter-spacing:.2px; } .ap-profile.v-analyst .ap-id-role{ --ap-role:#a16207; } .ap-profile.v-compliance .ap-id-role{ --ap-role:#b91c1c; } .ap-profile.v-tech .ap-id-role{ --ap-role:#0284c7; } .ap-id-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:9px; font-size:11.5px; font-weight:600; color:#64748b; } .ap-id-meta-item{ display:inline-flex; align-items:center; gap:5px; } .ap-id-meta-item svg{ width:11px; height:11px; color:#16a34a; flex-shrink:0; } .ap-profile.v-analyst .ap-id-meta-item svg{ color:#ca8a04; } .ap-profile.v-compliance .ap-id-meta-item svg{ color:#dc2626; } .ap-profile.v-tech .ap-id-meta-item svg{ color:#0284c7; } .ap-id-meta b{ color:#0a1f14; font-weight:800; } /* Body — owns + bio */ .ap-profile-body{ padding:0 22px 18px; display:flex; flex-direction:column; gap:12px; } .ap-owns{ padding:11px 13px; border-radius:10px; background:linear-gradient(135deg, rgba(22,163,74,.06), rgba(250,204,21,.04)); border:1px solid rgba(22,163,74,.16); font-size:11.5px; font-weight:700; color:#475569; letter-spacing:.1px; } .ap-owns-label{ display:inline-block; font-weight:900; color:#0a1f14; letter-spacing:.5px; text-transform:uppercase; font-size:10px; margin-right:6px; } .ap-owns em{ font-style:normal; color:#15803d; font-weight:800; } .ap-profile.v-analyst .ap-owns em{ color:#a16207; } .ap-profile.v-compliance .ap-owns em{ color:#b91c1c; } .ap-profile.v-tech .ap-owns em{ color:#0284c7; } .ap-bio{ margin:0; font-size:13.5px; line-height:1.6; color:#334155; font-weight:500; } .ap-bio b{ color:#0a1f14; font-weight:800; } /* Stats footer — what they ship */ .ap-profile-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:14px 22px; border-top:1px dashed rgba(22,163,74,.16); background:rgba(22,163,74,.03); } .ap-stat{ text-align:center; padding:8px 4px; } .ap-stat-num{ display:block; font-size:18px; font-weight:900; color:#15803d; letter-spacing:-.3px; line-height:1; font-feature-settings:"tnum" 1; } .ap-profile.v-analyst .ap-stat-num{ color:#a16207; } .ap-profile.v-compliance .ap-stat-num{ color:#b91c1c; } .ap-profile.v-tech .ap-stat-num{ color:#0284c7; } .ap-stat-lbl{ display:block; margin-top:4px; font-size:10px; font-weight:800; color:#64748b; letter-spacing:.4px; text-transform:uppercase; } /* CTA strip at bottom */ .ap-profile-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 22px; border-top:1px solid rgba(15,23,42,.06); background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(22,163,74,.05)); } .ap-profile-byline{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:900; color:#15803d; text-decoration:none; letter-spacing:.2px; transition:color .15s, transform .15s; } .ap-profile.v-analyst .ap-profile-byline{ color:#a16207; } .ap-profile.v-compliance .ap-profile-byline{ color:#b91c1c; } .ap-profile.v-tech .ap-profile-byline{ color:#0284c7; } .ap-profile-byline:hover{ color:#0a1f14; transform:translateX(3px); } .ap-profile-byline svg{ width:13px; height:13px; } .ap-profile-socials{ display:inline-flex; gap:6px; } .ap-profile-socials a{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#64748b; background:rgba(15,23,42,.04); border:1px solid rgba(15,23,42,.08); transition:all .18s; } .ap-profile-socials a:hover{ color:#15803d; border-color:rgba(22,163,74,.4); background:rgba(22,163,74,.06); } .ap-profile-socials svg{ width:13px; height:13px; } @media (max-width:1100px){ .ap-team{ grid-template-columns:1fr; gap:14px; } } @media (max-width:768px){ .ap-profile-head{ padding:18px 16px 14px; column-gap:13px; } .ap-avatar{ width:64px; height:64px; font-size:18px; border-radius:14px; } .ap-id h3{ font-size:17px; } .ap-id-role{ font-size:11.5px; } .ap-id-meta{ font-size:11px; gap:5px 10px; } .ap-profile-body{ padding:0 16px 14px; gap:10px; } .ap-owns{ font-size:11px; padding:10px 12px; } .ap-bio{ font-size:13px; } .ap-profile-stats{ padding:12px 16px; gap:6px; } .ap-stat-num{ font-size:16px; } .ap-stat-lbl{ font-size:9.5px; } .ap-profile-foot{ padding:11px 16px; } } /* ════════════════════════════════════════════════════════════ PROMISE STRIP — closing accountability statement ════════════════════════════════════════════════════════════ */ .ap-promise{ margin-top:24px; padding:22px 26px; border-radius:18px; background: radial-gradient(500px 200px at 0% 50%, rgba(22,163,74,.10), transparent 60%), linear-gradient(135deg, rgba(22,163,74,.06), rgba(250,204,21,.04)); border:1.5px solid rgba(22,163,74,.22); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .ap-promise-text{ flex:1; min-width:240px; } .ap-promise-text strong{ display:block; font-size:16px; font-weight:900; color:#0a1f14; letter-spacing:-.3px; margin-bottom:4px; } .ap-promise-text p{ margin:0; font-size:13px; line-height:1.55; color:#475569; font-weight:500; } .ap-promise-text a{ color:#15803d; font-weight:800; text-decoration:none; border-bottom:1.5px solid rgba(22,163,74,.4); padding-bottom:1px; } .ap-promise-text a:hover{ color:#0a1f14; border-color:#0a1f14; } .ap-promise-cta{ display:inline-flex; align-items:center; gap:7px; padding:13px 22px; border-radius:12px; background:linear-gradient(135deg,#16a34a,#15803d); color:#fff; font-size:13px; font-weight:900; letter-spacing:.2px; text-decoration:none; box-shadow:0 8px 22px rgba(22,163,74,.42); transition:transform .2s, box-shadow .2s; white-space:nowrap; } .ap-promise-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(22,163,74,.55); } .ap-promise-cta svg{ width:13px; height:13px; } @media (max-width:768px){ .ap-promise{ padding:18px 18px; gap:16px; border-radius:14px; } .ap-promise-text strong{ font-size:14.5px; } .ap-promise-text p{ font-size:12.5px; } .ap-promise-cta{ padding:11px 18px; font-size:12.5px; width:100%; justify-content:center; } } /* ════════════════════════════════════════════════════════════ REDUCED MOTION — .ap-profile slice (about.html L1247-1250) ════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ .ap-profile{ transition:none; } } /* === contact === */ /* No text-decoration line anywhere on the about page — kill the WP/Elementor theme default text-decoration on every about-page link (.ap-* / .vp-*), incl. the contact channel cards + their nested label/value spans and :hover. */ [class^="ap-"] a, [class*=" ap-"] a, [class^="vp-"] a, [class*=" vp-"] a, [class^="ap-"] a:hover, [class*=" ap-"] a:hover, [class^="vp-"] a:hover, [class*=" vp-"] a:hover{ text-decoration:none; } /* "Prefer to skip the form?" aside — NOTHING underlined. The whole channel card is an ; the WP theme underlines the link + its inner spans on hover/focus. Kill it on the aside, the channel link, and ALL descendants. */ .ap-contact-aside, .ap-contact-aside *, .ap-contact-aside a, .ap-contact-aside a:hover, .ap-contact-aside a:focus, .ap-contact-channel, .ap-contact-channel:hover, .ap-contact-channel:focus, .ap-contact-channel *, .ap-contact-channel-label, .ap-contact-channel-val{ text-decoration:none !important; } /* ════════════════════════════════════════════════════════════ CONTACT FORM — message form, glass card design ════════════════════════════════════════════════════════════ */ .ap-contact-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:24px; align-items:stretch; } /* LEFT — channels card */ .ap-contact-aside{ position:relative; background: radial-gradient(500px 240px at 0% 0%, rgba(22,163,74,.10), transparent 60%), linear-gradient(160deg, rgba(22,163,74,.06), rgba(250,204,21,.04)); border:1.5px solid rgba(22,163,74,.22); border-radius:18px; padding:24px 22px 22px; display:flex; flex-direction:column; gap:14px; overflow:hidden; } .ap-contact-aside::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#22c55e,#16a34a,#facc15); } .ap-contact-aside h3{ margin:0; font-size:17px; font-weight:900; color:#0a1f14; letter-spacing:-.3px; line-height:1.2; } .ap-contact-aside > p{ margin:0; font-size:13px; line-height:1.6; color:#475569; font-weight:500; } .ap-contact-channel{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; row-gap:3px; padding:12px 13px; background:#fff; border:1.5px solid rgba(22,163,74,.14); border-radius:12px; text-decoration:none; transition:transform .18s, border-color .18s, box-shadow .18s; } .ap-contact-channel:hover{ transform:translateY(-2px); border-color:rgba(22,163,74,.4); box-shadow:0 8px 18px rgba(22,163,74,.10); } .ap-contact-channel-icon{ grid-column:1; grid-row:1 / span 2; align-self:center; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#16a34a,#15803d); box-shadow:0 3px 8px rgba(22,163,74,.32); flex-shrink:0; } .ap-contact-channel.v-blue .ap-contact-channel-icon{ background:linear-gradient(135deg,#0ea5e9,#1e40af); box-shadow:0 3px 8px rgba(14,165,233,.32); } .ap-contact-channel.v-gold .ap-contact-channel-icon{ background:linear-gradient(135deg,#facc15,#ca8a04); color:#0a1f14; box-shadow:0 3px 8px rgba(202,138,4,.32); } .ap-contact-channel-icon svg{ width:17px; height:17px; } .ap-contact-channel-label{ grid-column:2; grid-row:1; font-size:10.5px; font-weight:900; color:#64748b; letter-spacing:.6px; text-transform:uppercase; } .ap-contact-channel-val{ grid-column:2; grid-row:2; font-size:13.5px; font-weight:800; color:#0a1f14; letter-spacing:-.1px; line-height:1.2; overflow-wrap:break-word; } .ap-contact-channel.v-blue .ap-contact-channel-val{ color:#0a1f14; } .ap-contact-sla{ display:flex; align-items:center; gap:7px; margin-top:auto; padding:11px 13px; border-radius:10px; background:rgba(22,163,74,.08); border:1px dashed rgba(22,163,74,.3); font-size:11.5px; font-weight:700; color:#15803d; } .ap-contact-sla svg{ width:14px; height:14px; flex-shrink:0; } .ap-contact-sla b{ color:#0a1f14; font-weight:900; } /* RIGHT — form card */ .ap-contact-form-wrap{ position:relative; background:#fff; border:1.5px solid rgba(15,23,42,.08); border-radius:18px; padding:26px 24px 22px; box-shadow:0 6px 20px rgba(0,0,0,.05); overflow:hidden; } .ap-contact-form-wrap::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#22c55e,#16a34a,#15803d); } .ap-contact-form-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; } .ap-contact-form-head h3{ margin:0; font-size:18px; font-weight:900; color:#0a1f14; letter-spacing:-.3px; line-height:1.2; } .ap-contact-form-head h3 span{ display:block; margin-top:5px; font-size:12.5px; font-weight:500; color:#64748b; letter-spacing:0; } .ap-contact-form-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; background:rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.22); font-size:10.5px; font-weight:900; color:#15803d; letter-spacing:.5px; text-transform:uppercase; flex-shrink:0; } .ap-contact-form-badge svg{ width:11px; height:11px; } .ap-contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; } .ap-field{ display:flex; flex-direction:column; gap:6px; min-width:0; } .ap-field.is-full{ grid-column:1 / -1; } .ap-field label{ font-size:11.5px; font-weight:800; color:#0a1f14; letter-spacing:.2px; display:inline-flex; align-items:center; gap:5px; } .ap-field label .req{ color:#dc2626; font-weight:900; } .ap-field input, .ap-field select, .ap-field textarea{ width:100%; min-width:0; font-family:inherit; font-size:14px; font-weight:500; color:#0a1f14; padding:11px 13px; background:#fafafa; border:1.5px solid rgba(15,23,42,.10); border-radius:10px; transition:border-color .18s, box-shadow .18s, background .18s; box-sizing:border-box; } .ap-field textarea{ resize:vertical; min-height:120px; line-height:1.55; font-family:inherit; } .ap-field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; cursor:pointer; } .ap-field input::placeholder, .ap-field textarea::placeholder{ color:#94a3b8; font-weight:400; } .ap-field input:focus, .ap-field select:focus, .ap-field textarea:focus{ outline:none; border-color:rgba(22,163,74,.5); background:#fff; box-shadow:0 0 0 4px rgba(22,163,74,.12); } .ap-field-hint{ font-size:11px; color:#94a3b8; font-weight:500; } .ap-field-counter{ align-self:flex-end; font-size:10.5px; font-weight:700; color:#94a3b8; font-feature-settings:"tnum" 1; margin-top:-2px; } .ap-field-counter.is-warn{ color:#a16207; } .ap-field-counter.is-over{ color:#b91c1c; } /* Consent checkbox row */ .ap-consent{ grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:11px; row-gap:0; padding:12px 13px; background:rgba(22,163,74,.04); border:1px dashed rgba(22,163,74,.22); border-radius:10px; align-items:start; } .ap-consent input[type="checkbox"]{ width:18px; height:18px; margin:1px 0 0 0; padding:0; accent-color:#16a34a; cursor:pointer; flex-shrink:0; } .ap-consent label{ font-size:11.5px; font-weight:600; color:#475569; line-height:1.5; cursor:pointer; } .ap-consent label a{ color:#15803d; font-weight:800; text-decoration:none; } .ap-consent label a:hover{ color:#0a1f14; } /* Footer row — submit + status */ .ap-form-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:6px; } .ap-form-meta{ font-size:11.5px; color:#64748b; font-weight:600; display:inline-flex; align-items:center; gap:6px; } .ap-form-meta svg{ width:12px; height:12px; color:#16a34a; } .ap-submit{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:12px; background:linear-gradient(135deg,#22c55e,#16a34a 50%,#15803d); color:#fff; font-family:inherit; font-size:14px; font-weight:900; letter-spacing:.3px; border:0; cursor:pointer; box-shadow:0 8px 22px rgba(22,163,74,.42), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .18s, box-shadow .2s; position:relative; overflow:hidden; } .ap-submit::after{ content:''; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(110deg, transparent, rgba(255,255,255,.32), transparent); animation:ap-shimmer 2.6s ease infinite; } @keyframes ap-shimmer{ 0%{ left:-120%; } 100%{ left:200%; } } .ap-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(22,163,74,.55); } .ap-submit:active{ transform:translateY(0) scale(.98); } .ap-submit svg{ width:14px; height:14px; } .ap-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:0 4px 10px rgba(22,163,74,.25); } .ap-submit:disabled::after{ display:none; } /* Status messages */ .ap-form-status{ grid-column:1 / -1; display:none; align-items:center; gap:9px; padding:13px 14px; border-radius:10px; font-size:13px; font-weight:700; } .ap-form-status.is-success{ display:flex; background:linear-gradient(135deg, rgba(22,163,74,.10), rgba(34,197,94,.06)); border:1.5px solid rgba(22,163,74,.32); color:#15803d; } .ap-form-status.is-error{ display:flex; background:linear-gradient(135deg, rgba(220,38,38,.08), rgba(239,68,68,.04)); border:1.5px solid rgba(220,38,38,.32); color:#b91c1c; } .ap-form-status svg{ width:18px; height:18px; flex-shrink:0; } @media (max-width:1100px){ .ap-contact-grid{ grid-template-columns:1fr; gap:18px; } } @media (max-width:768px){ .ap-contact-aside{ padding:20px 18px 18px; border-radius:14px; } .ap-contact-aside h3{ font-size:15.5px; } .ap-contact-aside > p{ font-size:12.5px; } .ap-contact-channel{ padding:11px 12px; } .ap-contact-channel-icon{ width:34px; height:34px; } .ap-contact-channel-label{ font-size:10px; } .ap-contact-channel-val{ font-size:12.5px; } .ap-contact-sla{ font-size:11px; padding:10px 12px; } .ap-contact-form-wrap{ padding:20px 16px 18px; border-radius:14px; } .ap-contact-form-head h3{ font-size:16px; } .ap-contact-form-head h3 span{ font-size:12px; } .ap-contact-form-badge{ font-size:10px; padding:4px 10px; } .ap-contact-form{ grid-template-columns:1fr; gap:12px; } .ap-field input, .ap-field select, .ap-field textarea{ font-size:14px; padding:11px 12px; } .ap-field textarea{ min-height:110px; } .ap-consent label{ font-size:11px; } .ap-submit{ width:100%; padding:13px 22px; font-size:13.5px; } .ap-form-foot{ flex-direction:column-reverse; align-items:stretch; gap:10px; } .ap-form-meta{ justify-content:center; } } @media (max-width:430px){ .ap-contact-form-wrap{ padding:18px 14px 16px; } } /* === footer === */ /* No text-decoration line anywhere on the about page — kill the WP/Elementor theme default text-decoration on every footer/about link (.ap-* / .vp-*), incl. the RG link and :hover. */ [class^="ap-"] a, [class*=" ap-"] a, [class^="vp-"] a, [class*=" vp-"] a, [class^="ap-"] a:hover, [class*=" ap-"] a:hover, [class^="vp-"] a:hover, [class*=" vp-"] a:hover{ text-decoration:none; } .vp-foot{ /* Full-bleed edge-to-edge. The negative left/right margins stretch the footer to the viewport edges; html{overflow-x:hidden} (in the nav widget) absorbs any sub-pixel overflow so there is NO horizontal scrollbar. margin-bottom:0 (no negative over-pull) → the footer ends exactly with its content, no giant dark tail below it. */ width:auto !important; max-width:none !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; margin-top:48px !important; /* small negative pull to cover the ~15px light strip left by the Elementor section/#page bottom spacing. Negative margin ONLY (no matching padding — padding+negative-margin would cancel out and the footer would end at the same spot). 40px > the ~15px strip, safe. */ margin-bottom:-40px !important; background: radial-gradient(1200px 600px at 10% 0%, rgba(22,163,74,.18), transparent 55%), radial-gradient(1000px 540px at 90% 30%, rgba(250,204,21,.10), transparent 60%), radial-gradient(900px 500px at 50% 100%, rgba(202,138,4,.08), transparent 55%), linear-gradient(180deg,#020a05 0%,#06160e 35%,#0a1f14 70%,#020a05 100%); color:#cbd5e1; border-radius:0; padding:0; position:relative; overflow:hidden; } .vp-foot::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(2px 2px at 18% 30%, rgba(250,204,21,.45), transparent 60%), radial-gradient(1.5px 1.5px at 72% 18%, rgba(34,197,94,.55), transparent 60%), radial-gradient(2px 2px at 88% 62%, rgba(250,204,21,.35), transparent 60%), radial-gradient(1.5px 1.5px at 32% 78%, rgba(34,197,94,.4), transparent 60%); opacity:.7; animation:vp-foot-twinkle 6s ease-in-out infinite; } @keyframes vp-foot-twinkle{ 0%,100% { opacity:.4; } 50% { opacity:.85; } } .vp-foot-wave{ display:block; width:100%; height:90px; position:relative; z-index:1; margin-bottom:-1px; pointer-events:none; } .vp-foot-wave svg{ display:block; width:100%; height:100%; } .vp-foot-curves{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; } .vp-foot-curves svg{ width:100%; height:100%; } .vp-foot-inner{ position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:24px 40px 32px; } .vp-foot-hero{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:8px 0 28px; margin-bottom:32px; border-bottom:1px solid rgba(250,204,21,.12); position:relative; } .vp-foot-hero::after{ content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:120px; height:1px; background:linear-gradient(90deg, transparent, #ca8a04 40%, #facc15 50%, #ca8a04 60%, transparent); box-shadow:0 0 12px rgba(250,204,21,.55); } .vp-foot-brand-mark{ display:flex; align-items:center; gap:12px; font-size:22px; font-weight:900; color:#fff; letter-spacing:-.5px; } .vp-foot-brand-mark em{ font-style:normal; color:#facc15; text-shadow:0 0 14px rgba(250,204,21,.5); } .vp-foot-brand-mark .vp-foot-logo{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; background:linear-gradient(135deg,#fde047,#facc15 40%,#f97316 100%); color:#0a1f14; font-size:15px; font-weight:900; letter-spacing:-.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(249,115,22,.45), 0 0 0 1.5px rgba(250,204,21,.4), 0 0 22px rgba(250,204,21,.3); } .vp-foot-trust{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .vp-foot-trust-badge{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:99px; background:linear-gradient(135deg, rgba(34,197,94,.10), rgba(250,204,21,.08)); border:1px solid rgba(250,204,21,.25); font-size:11.5px; font-weight:800; color:#fde047; letter-spacing:.4px; text-transform:uppercase; } .vp-foot-trust-badge svg{ width:14px; height:14px; color:#22c55e; flex-shrink:0; } .vp-foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:36px; padding-bottom:30px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.08); } .vp-foot-brand{ display:flex; flex-direction:column; gap:14px; } .vp-foot-brand p{ margin:0; font-size:13.5px; line-height:1.6; color:#94a3b8; font-weight:500; max-width:280px; } .vp-foot-social{ display:flex; gap:9px; padding-top:8px; } .vp-foot-social a{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:#cbd5e1; border:1px solid rgba(250,204,21,.18); transition:all .25s; } .vp-foot-social a:hover{ color:#facc15; transform:translateY(-3px); border-color:rgba(250,204,21,.55); box-shadow:0 8px 18px rgba(250,204,21,.25); } .vp-foot-social svg{ width:15px; height:15px; } /* Column title rendered as a PLAIN

(no h-tag emphasis): no uppercase, no gold highlight, no decoration accent — just a normal paragraph. */ .vp-foot-col-title{ margin:0 0 16px; font-size:13px; font-weight:600; color:#cbd5e1; letter-spacing:0; text-transform:none; } .vp-foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .vp-foot-col a{ font-size:13px; font-weight:600; color:#cbd5e1; text-decoration:none; transition:color .18s, transform .18s; display:inline-flex; align-items:center; gap:6px; } .vp-foot-col a:hover{ color:#fff; transform:translateX(2px); } .vp-foot-rg{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; padding:20px 26px; background: radial-gradient(400px 200px at 0% 50%, rgba(220,38,38,.16), transparent 60%), linear-gradient(135deg, rgba(220,38,38,.10), rgba(127,29,29,.06)); border:1px solid rgba(220,38,38,.28); border-radius:16px; margin-bottom:22px; } .vp-foot-rg-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:99px; background:linear-gradient(135deg,#ef4444,#7f1d1d); color:#fff; font-size:11px; font-weight:900; letter-spacing:.5px; box-shadow:0 4px 12px rgba(220,38,38,.5); } .vp-foot-rg-text{ font-size:13px; color:#fca5a5; font-weight:600; } .vp-foot-rg-text b{ color:#fff; font-weight:800; } .vp-foot-rg-text a{ color:#fff; text-decoration:none; font-weight:700; } .vp-foot-rg-text a:hover{ color:#facc15; } .vp-foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:20px; border-top:1px dashed rgba(255,255,255,.10); position:relative; } .vp-foot-bottom::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(45deg); width:8px; height:8px; background:linear-gradient(135deg, #facc15, #ca8a04); border:1px solid rgba(250,204,21,.4); box-shadow:0 0 10px rgba(250,204,21,.5); } .vp-foot-copyright{ font-size:12px; color:#64748b; font-weight:500; } .vp-foot-copyright b{ color:#e2e8f0; font-weight:700; } .vp-foot-iga{ font-size:11.5px; color:#64748b; font-style:italic; max-width:580px; line-height:1.55; } @media (max-width:1100px){ .vp-foot-inner{ padding:18px 28px 26px; } .vp-foot-top{ grid-template-columns:1.5fr 1fr 1fr; gap:28px 32px; } .vp-foot-brand{ grid-column:1 / -1; } .vp-foot-wave{ height:70px; } } @media (max-width:768px){ /* keep full-bleed + white-strip kill on mobile; only top gap shrinks */ .vp-foot{ margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; margin-top:32px !important; margin-bottom:-40px !important; } .vp-foot-inner{ padding:8px 0 24px; } .vp-foot-wave{ height:55px; } .vp-foot-hero{ flex-direction:column; align-items:center; text-align:center; gap:18px; padding:14px 20px 24px; margin:0 16px 24px; border-bottom:0; } .vp-foot-trust{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:8px; padding:0 16px; margin:0 -16px; justify-content:flex-start; } .vp-foot-trust::-webkit-scrollbar{ display:none; } .vp-foot-trust-badge{ flex-shrink:0; font-size:10.5px; padding:7px 12px; } .vp-foot-top{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:24px 0 22px; margin:0 16px 20px; border-top:1px solid rgba(250,204,21,.10); border-bottom:1px solid rgba(34,197,94,.10); position:relative; } .vp-foot-top::before{ content:''; position:absolute; top:24px; bottom:22px; left:50%; width:1px; transform:translateX(-.5px); background:linear-gradient(180deg, transparent 0%, rgba(250,204,21,.15) 30%, rgba(34,197,94,.15) 70%, transparent 100%); } .vp-foot-brand{ display:none; } .vp-foot-col{ padding:0 18px; padding-bottom:18px; border-bottom:1px dashed rgba(255,255,255,.06); } .vp-foot-col:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; padding-top:18px; } .vp-foot-col:nth-child(-n+3){ padding-top:0; } .vp-foot-col-title{ font-size:12.5px; margin:0 0 14px; } .vp-foot-col ul{ gap:11px; } .vp-foot-col a{ font-size:13px; } .vp-foot-brand-mobile{ display:flex; flex-direction:column; align-items:center; gap:14px; max-width:340px; } .vp-foot-brand-mobile p{ margin:0; font-size:13px; line-height:1.55; color:#94a3b8; font-weight:500; text-align:center; } .vp-foot-brand-mobile .vp-foot-social{ display:flex; gap:10px; padding:0; } .vp-foot-brand-mobile .vp-foot-social a{ width:40px; height:40px; } .vp-foot-rg{ margin:0 16px 18px; padding:18px 18px; flex-direction:column; gap:10px; text-align:center; border-radius:14px; } .vp-foot-rg-text{ font-size:12px; line-height:1.55; } .vp-foot-bottom{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:18px 20px 0; margin:0 16px; } .vp-foot-copyright{ font-size:11.5px; } .vp-foot-iga{ font-size:11px; max-width:100%; } } .vp-foot-brand-mobile{ display:none; } @media (max-width:430px){ .vp-foot-wave{ height:42px; } .vp-foot-hero{ margin:0 12px 20px; padding:12px 16px 20px; gap:16px; } .vp-foot-brand-mark{ font-size:20px; } .vp-foot-brand-mark .vp-foot-logo{ width:40px; height:40px; font-size:14px; } .vp-foot-brand-mobile p{ font-size:12.5px; } .vp-foot-trust{ padding:0 12px; margin:0 -12px; } .vp-foot-trust-badge{ font-size:10px; padding:6px 11px; } .vp-foot-top{ margin:0 12px 18px; padding:20px 0 18px; } .vp-foot-top::before{ top:20px; bottom:18px; } .vp-foot-col{ padding:0 14px; padding-bottom:16px; } .vp-foot-col:nth-last-child(-n+2){ padding-top:16px; } .vp-foot-col-title{ font-size:12px; margin-bottom:12px; } .vp-foot-col a{ font-size:12.5px; } .vp-foot-rg{ margin:0 12px 16px; padding:16px 14px; border-radius:13px; } .vp-foot-rg-text{ font-size:11.5px; } .vp-foot-bottom{ margin:0 12px; padding:16px 14px 0; } } @media (prefers-reduced-motion: reduce){ .vp-foot::after{ animation:none; } }