:root{ --nav-offset:12px; --nav-height:52px; } :root{ --bg:#ffffff; --ink:#101114; --muted:#5c656d; --brand:#1c4c2d; --olive:#91a381; --ring:rgba(16,17,20,.08); --shadow:0 10px 30px rgba(16,17,20,.09),0 6px 16px rgba(16,17,20,.04); --glass:rgba(226,232,240,.65); --blur:saturate(120%) blur(10px); --radius-lg:28px; --radius-xl:48px; --maxw:1200px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px} /* ====== your existing styles below (unchanged) ====== */ /* ... (all your original CSS remains here unchanged) ... */ :root{ --nav-offset:12px; --nav-height:52px; } :root{ --bg:#ffffff; --ink:#101114; --muted:#5c656d; --brand:#1c4c2d; --olive:#91a381; --ring:rgba(16,17,20,.08); --shadow:0 10px 30px rgba(16,17,20,.09),0 6px 16px rgba(16,17,20,.04); --glass:rgba(226,232,240,.65); --blur:saturate(120%) blur(10px); --radius-lg:28px; --radius-xl:48px; --maxw:1200px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px} /* ========== Hero ========== */ .hero{position:relative; margin-top:12px; margin-bottom:24px} .hero-backdrop{position:absolute; left:50%; transform:translateX(-50%); width:min(92vw,1150px); height:360px; background:var(--olive); border-radius:var(--radius-xl); top:120px; box-shadow:var(--shadow)} .device{position:relative; width:min(92vw,1180px); margin:0 auto; border-radius:26px; overflow:hidden; box-shadow:0 30px 60px rgba(16,17,20,.20),0 8px 20px rgba(16,17,20,.10); border:10px solid #0d0d0f} .device img{width:100%; height:auto; display:block} /* ========== Mission ========== */ .mission{padding:90px 0; background:radial-gradient(1400px 220px at 50% -60px, rgba(145,163,129,.18), rgba(145,163,129,0) 60%), linear-gradient(#fff,#fff)} .mission-card{position:relative; border-radius:var(--radius-lg); border:1px solid rgba(28,76,45,.12); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.9)); box-shadow:var(--shadow); padding:clamp(22px,4vw,42px)} .pill{display:inline-flex; align-items:center; gap:10px; padding:6px 14px; border-radius:999px; background:#fff; box-shadow:0 0 0 6px rgba(145,163,129,.20); border:1px solid rgba(28,76,45,.14); font-weight:800; letter-spacing:1.6px; font-size:12px; color:var(--brand); text-transform:uppercase; margin-bottom:14px} .mission h2{margin:8px 0 10px; font-family:"Fraunces",serif; font-weight:700; font-size:clamp(26px,4.6vw,44px)} .mission .lead{color:var(--brand); font-weight:700; font-size:clamp(16px,2.8vw,22px); margin-bottom:12px} .mission p{color:var(--muted); font-size:clamp(18px,2.6vw,21px); line-height:1.75; max-width:68ch; font-family: Inter, sans-serif;} section[id]{scroll-margin-top:100px} /* ========== WHY CHOOSE ========== */ :root{ --wc-border:rgba(16,17,20,.12); --wc-row:rgba(16,17,20,.08); --wc-muted:#67707a; --wc-ink:#0b0c0e; --wc-shadow2:0 14px 30px rgba(16,17,20,.10),0 6px 16px rgba(16,17,20,.06) } .why-choose{padding:88px 0 40px} .why-choose .wc-container{max-width:1200px;margin:0 auto;padding:0 24px} .wc-title{ text-align:center; margin:0 0 14px; font-family:"Fraunces",serif; font-weight:700; letter-spacing:-.01em; font-size:clamp(42px,6.8vw,72px); line-height:1.05; color:var(--wc-ink) } .wc-sub{ text-align:center; color:var(--wc-muted); font-size:clamp(14px,2.1vw,18px); margin-bottom:24px } .wc-cta{ display:inline-flex; align-items:center; gap:10px; background:#cfe0bb; color:#0f2716; font-weight:700; padding:12px 22px; border-radius:999px; border:1px solid rgba(28,76,45,.18); box-shadow:0 1px 0 rgba(16,17,20,.06) } .wc-grid{ margin-top:56px; border:1px solid var(--wc-border); border-radius:22px; overflow:hidden; background:#fff } .wc-cols{ display:grid; grid-template-columns:repeat(4,1fr) } .wc-col{ position:relative; background:#fff; transition:transform .18s ease, box-shadow .18s ease, background .18s ease } .wc-col:not(:first-child){border-left:1px solid var(--wc-border)} .wc-col:hover{ background:#fbfcf9; transform:translateY(-3px); box-shadow:var(--wc-shadow2); z-index:2 } .wc-head{ display:flex; align-items:center; justify-content:center; text-align:center; padding:0 20px; min-height:86px; font-family:"Fraunces",serif; font-weight:700; color:var(--wc-ink); font-size:clamp(22px,2vw,28px); line-height:1; white-space:nowrap; border-bottom:1px solid var(--wc-border); } .wc-list{ list-style:none; margin:0; padding:0 } .wc-list li{ display:flex; align-items:center; gap:14px; padding:18px 24px; min-height:64px; border-bottom:1px solid var(--wc-row); font-size:16px; color:#E43636; } .wc-list li:last-child{border-bottom:none} .wc-list i{ width:22px; text-align:center; font-size:16px; color:#1c4c2d } .wc-list li.is-empty{color:transparent} .wc-list li.is-empty i{color:transparent} @media (max-width:1100px){ .wc-cols{grid-template-columns:repeat(2,1fr)} } @media (max-width:980px){ .subtag span{display:none} } /* hide tagline on narrow screens */ @media (max-width:640px){ .wc-cols{grid-template-columns:1fr} .wc-head{min-height:64px; white-space:normal} nav.primary{display:none} /* collapse desktop nav on very small screens */ } /* ===== PRODUCTS ===== */ :root{ --prod-ink:#0b0c0e; --prod-muted:#606a74; --prod-row:#e7eaee; --prod-brand:#1c4c2d } .products{padding:96px 0 40px} .products .prod-wrap{max-width:1200px;margin:0 auto;padding:0 24px} .prod-title{ text-align:center; margin:0; font-family:"Fraunces", serif; font-weight:700; letter-spacing:-.01em; font-size:clamp(42px,6.8vw,80px); line-height:1.05; color:var(--prod-ink); } .prod-desc{ text-align:center; color:black; font-size:clamp(14px,2.1vw,18px); margin-top:10px; margin-bottom:34px } .prod-subtitle{ text-align:center; margin:36px 0 12px; font-family:"Josefin Sans"; font-weight:700; color:var(--prod-ink); font-size:clamp(18px,2.6vw,28px) } .prod-row{ margin-top:18px; padding-top:28px; border-top:1px solid var(--prod-row); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:34px; } .pi{ display:flex; flex-direction:column; gap:10px; transition:transform .18s ease } .pi:hover{ transform:translateY(-4px) } .pi-icon{ font-size:22px; color:var(--prod-brand) } .pi h4{ margin:0; font-family:"Fraunces", serif; font-weight:700; color:#0021AD; font-size:clamp(16px,2.2vw,20px) } .pi p{ margin:0; color:var(--prod-muted); font-size:clamp(14px,1.9vw,16px); line-height:1.7 } .pi a.pi-more{ margin-top:8px; font-weight:700; color:var(--prod-brand) } .pi a.pi-more:hover{ text-decoration:underline } @media (max-width:980px){ .prod-row{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .prod-row{grid-template-columns:1fr} } /* ===== PUBLICATIONS ===== */ :root{ --pub-ink:#0b0c0e; --pub-muted:#606a74; --pub-border:rgba(16,17,20,.12); --pub-accent:#1c4c2d; --pub-shadow:0 10px 26px rgba(16,17,20,.08), 0 6px 14px rgba(16,17,20,.05); --pub-radius:18px } .publications{padding:96px 0 40px;background:transparent;} .publications .pub-wrap{max-width:1200px;margin:0 auto;padding:0 24px} .pub-title{ text-align:center;margin:0 0 10px; font-family:"Fraunces",serif;font-weight:700;letter-spacing:-.01em; font-size:clamp(42px,6.8vw,72px);line-height:1.05;color:var(--pub-ink) } .pub-sub{ text-align:center;color:var(--pub-muted); font-size:clamp(14px,2.1vw,18px);margin:8px 0 34px } .pub-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 34px } .pub-card{ border:1px solid var(--pub-border); border-radius:var(--pub-radius); padding:18px 20px 18px; background:#fff; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease } .pub-card:hover{ transform:translateY(-4px); box-shadow:var(--pub-shadow); border-color:rgba(28,76,45,.28) } .pub-card .title{ margin:0 0 8px; font-family:"Fraunces",serif;font-weight:700; font-size:clamp(21px,2.8vw,24px); line-height:1.25; } .pub-card .title a{ color:#0021AD; text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0 2px; transition:background-size .22s ease; text-wrap:balance } .pub-card .title a:hover{background-size:100% 2px} .pub-meta{ display:grid; gap:6px; font-size:14px; color:var(--pub-muted); } .authors-line{ white-space:normal; } .authors-line::before{ content:"👤 "; opacity:.7; } .info-line{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .info-line .venue::before{ content:"🏛️ "; opacity:.7; } .info-line .dot{ opacity:.45; } .pub-year{ color:var(--pub-accent); font-weight:700; } @media (max-width:760px){ .pub-grid{grid-template-columns:1fr} .pub-year{width:100%; margin-left:0} } /* ===== CLIENTS MARQUEE ===== */ :root{ --clients-ink:#0b0c0e; --clients-muted:#606a74; --logo-h:clamp(28px,3.4vw,40px); --gap:clamp(28px,4vw,64px) } .clients{padding:84px 0 40px; background:transparent} .clients .cl-wrap{max-width:1200px; margin:0 auto; padding:0 24px} .clients-title{ text-align:center; margin:0 0 12px; font-family:"Fraunces", serif; font-weight:700; letter-spacing:-.01em; font-size:clamp(42px,6.8vw,72px); line-height:1.05; color:var(--clients-ink) } .clients-sub{ text-align:center; color:var(--clients-muted); font-size:clamp(14px,2.1vw,18px); margin-bottom:20px } .ticker{ position:relative; overflow:hidden; user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg,transparent 0%, #000 6%, #000 94%, transparent 100%) } .ticker__track{ display:flex; align-items:center; gap:var(--gap); width:max-content; will-change:transform; animation:tickerScroll var(--scroll-duration,70s) linear infinite } .ticker__track:hover{ animation-play-state:paused } .ticker img{ height:var(--logo-h); width:auto; display:block; transition:transform .2s ease } .ticker img:hover{ transform:scale(1.04) } @keyframes tickerScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media (prefers-reduced-motion:reduce){ .ticker__track{animation:none} } /* ===== TESTIMONIALS ===== */ :root{ --t-bg:#0d1318; --t-ink:#e9f0f6; --t-muted:#a8b3bf; --t-rule:rgba(255,255,255,.22) } .testimonials{ background:var(--t-bg); padding:96px 0 80px } .testimonials .t-wrap{ max-width:1200px; margin:0 auto; padding:0 24px } .testimonials .t-title{ text-align:center; margin:0 0 12px; font-family:"Fraunces", serif; font-weight:700; letter-spacing:-.01em; font-size:clamp(42px,6.8vw,72px); line-height:1.05; color: #0b2a67;} .t-kicker{ text-align:center; color:var(--t-muted); font-size:clamp(14px,2.1vw,18px); margin:6px 0 34px } .t-rule{ height:1px; background:var(--t-rule); transform:scaleX(0); transform-origin:left } .t-row{ display:grid; grid-template-columns:minmax(160px,260px) 1fr; gap:24px; align-items:center; padding:28px 0; color:var(--t-ink) } .t-name{ font-weight:600; letter-spacing:.2px; color:var(--t-ink); text-align:center } .t-quote{ color:var(--t-ink); font-size:clamp(16px,2vw,20px); line-height:1.8 } .t-quote q{ quotes:"“" "”" "‘" "’"; } .t-quote q::before{content:open-quote} .t-quote q::after{content:close-quote} .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease } .reveal.line{ transition:transform .7s ease, opacity .6s ease } .reveal.in{ opacity:1; transform:none } .reveal.line.in{ transform:scaleX(1) } @media (max-width:700px){ .t-row{ grid-template-columns:1fr; text-align:left } .t-name{ text-align:left } } /* --- Mission (light version styled like your example) --- */ .purpose-section{ padding:90px 0; background:transparent; /* white background */ display:flex; justify-content:center; position:relative; z-index:10; } .purpose-container{ max-width:1200px; width:100%; display:flex; flex-direction:row; gap:60px; padding:60px 50px; border-radius:32px; position:relative; z-index:5; background:#fff; /* white card */ border:1px solid var(--ring); /* subtle border from your palette */ box-shadow: var(--shadow); /* same shadow system as site */ color:var(--ink); /* black text */ } .purpose-left{ flex:1; min-width:0 } .purpose-right{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:24px; min-width:0 } /* Label pill */ .purpose-label{ font-weight:800; font-size:.9rem; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 18px; display:inline-block; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid rgba(16,17,20,.14); box-shadow:0 0 0 6px rgba(16,17,20,.06); color:var(--ink); /* black text */ } /* Title uses same font as Why Choose SeekEdgar */ .purpose-title{ font-family:"Fraunces", serif; /* match section titles */ font-weight:700; letter-spacing:-.01em; font-size:clamp(36px,5.4vw,56px); line-height:1.05; color:#0021AD; /* black */ margin:0 0 .6rem; } /* Tagline under the title */ .purpose-left h3{ margin:0; font-weight:600; font-size:clamp(16px,2.4vw,20px); color:var(--ink); /* black */ font-family: "Fraunces", Serif; } /* Body copy */ .purpose-text{ font-family: 'Josefin Sans'; font-weight: 800; font-size:clamp(17px,2.4vw,20px); line-height:1.75; color:var(--ink); /* black */ margin:0; } /* Responsive stack */ @media (max-width:900px){ .purpose-container{ flex-direction:column; padding:40px 28px; border-radius:24px; gap:28px } .purpose-title{ font-size:clamp(30px,6.2vw,42px) } .purpose-text{ font-size:clamp(14px,2.4vw,17px) } } /* ===== Products: darker separators + bolder, larger text ===== */ /* 1) Make the separator line after each product BLACK */ .products { --prod-row: #000; } /* updates the token */ .prod-row { border-top-color: #000 !important; }/* guarantees the color */ /* 2) Make each product point (the grey paragraph) BLACK and a bit bigger */ .pi p{ color:#000; /* was var(--prod-muted) */ font-weight:800; /* thicker */ font-size:clamp(16px, 2.1vw, 18px); /* was 14–16px */ line-height:1.75; /* a touch roomier for bold text */ } /* 3) Make the small titles above each point bigger & bold */ .pi h4{ color:#000; font-weight:900; /* heavier headline feel */ font-size:clamp(18px, 2.6vw, 24px); /* was 16–20px */ letter-spacing:.2px; } /* 4) Make each product’s title (Seek iNF / SeekFinData / SeekForm345) bigger */ .prod-subtitle{ color:#000; font-size:clamp(26px, 3.8vw, 40px); /* was 18–28px */ font-weight:800; } /* (Optional) If you also want the main section title bigger */ .prod-title{ font-size:clamp(48px, 7.2vw, 88px); /* was 42–80px */ } /* ==== Visual updates you requested ==== */ /* WHY CHOOSE header + column titles */ .wc-title { color: #0b2a6f; /* light blue you requested */ } .wc-head { color: #0021AD; /* slightly stronger blue for "We Offer", etc. */ } /* OUR PRODUCTS */ .prod-title { color: #0b2a6f; /* dark blue for "Our Products" */ } .prod-desc { color: #cfe0bb; /* red tagline/description */ font-weight: 700; font-size: clamp(16px, 2.4vw, 20px); /* slightly bigger */ } /* Product data-point titles (the

under each product) */ .pi h4 { color: #0021AD; /* blue titles for each data point */ font-weight: 800; } .pi p { color: #e80004 !important; } /* PUBLICATIONS */ .pub-title { color: #0b2a6f; /* dark blue for Publications title */ } .pub-sub { color: #2747A8; /* visible supporting color for the description */ font-weight: 600; } /* Journal / venue name inside publication cards -> red, bold, slightly larger */ .pub-meta .venue { color: #e80004; font-weight: 800; font-size: 12px; } /* OUR CLIENTS */ .clients-title { color: #0b2a6f; /* dark blue for clients heading */ } /* TESTIMONIALS: use the color sampled from your image, set fonts to white & slightly smaller */ .testimonials { background: transparent; /* background from provided image */ color: #ffffff; } .testimonials .t-quote { color: black !important; /* ensure high contrast on the blue */ } /* small polish: ensure link hover remains visible on blue */ .testimonials a { color: #fff; text-decoration: underline; opacity: .95; } .testimonials a:hover { opacity: 1; } /* Safety: increase specificity in case some earlier styles take precedence */ .wc-title, .wc-head, .prod-title, .prod-desc, .pi h4, .pub-title, .pub-sub, .pub-meta .venue, .clients-title, .testimonials { transition: color .18s ease, background-color .18s ease; } main { padding-top: calc(var(--nav-offset) + var(--nav-height) + 12px); position: relative; /* leave stacking as-is */ z-index: 10; } /* headline overlay on hero image */ .hero .headline { position: absolute; top: 2%; /* tweak this percent to move the overlay up/down on the image */ left: 50%; transform: translateX(-50%); z-index: 20; /* must be above the image but below header (header z-index is 1000) */ padding: 0; /* remove the standalone headline vertical padding */ width: min(92%, 980px); /* keeps the same max width feel as .container */ text-align: center; pointer-events: none; /* prevents accidental clicks on the overlay (subtle UX improvement) */ } /* ensure the small sub-pill still appears as before */ .hero { margin-top: 3px; } /* keep .device as positioning context (should already be position:relative but this ensures it) */ .device { position: relative; } /* Make the entire product row a single rounded white card that contains all .pi items */ .products .prod-row { /* card look */ background: #ffffff; border-radius: 16px; padding: 20px; /* inner spacing for the card */ border: 1px solid rgba(16,17,20,0.06);/* subtle border so it reads on white */ box-shadow: 0 12px 34px rgba(16,17,20,0.06); margin-top: 18px; /* keep the gap from the section title */ display: grid; /* keep items laid out in columns */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; /* remove the previous top-border + padding-top used for the "row" style */ border-top: none !important; padding-top: 20px; /* explicit top padding for consistent spacing */ } /* Make each data point (.pi) visually simple inside the card */ .products .prod-row .pi { background: transparent; /* no separate card background */ border: none; padding: 0; /* spacing handled by the parent card */ gap: 10px; min-height: 0; /* remove forced card heights if present */ align-items: flex-start; } /* Keep the icon badge and headings readable inside the card */ .products .prod-row .pi .pi-icon { /* optional: keep circular badge feel for icons inside the card */ display:inline-flex; align-items:center; justify-content:center; height:42px; width:42px; border-radius:999px; background: linear-gradient(180deg, rgba(28,76,45,0.06), rgba(28,76,45,0.02)); color:var(--prod-brand); } /* Optional hover lift for the whole card — disabled on touch devices */ .products .prod-row:hover { transform: none; /* no transform on the whole card (keeps it stable) */ } /* If you previously had .pi:hover lifts, keep them subtle (optional) */ .products .prod-row .pi:hover { transform: translateY(-3px); transition: transform .18s ease; } /* Responsive: collapse to two columns on narrower screens */ @media (max-width:980px) { .products .prod-row { grid-template-columns: repeat(2, 1fr); } } /* Mobile: single-column stacked card content */ @media (max-width:560px) { .products .prod-row { grid-template-columns: 1fr; padding:16px; gap:14px; } .products .prod-row .pi .pi-icon { height:40px; width:40px; } } .pub-sub, .t-kicker, .clients-sub { color: #D32F2F; /* red tagline/description */ font-weight: 700; font-size: clamp(16px, 2.4vw, 20px); /* slightly bigger */ } /* Testimonial: name on one right-aligned line, affiliation below it */ .testimonials .t-row{ display:grid; grid-template-columns: minmax(160px,260px) 1fr; gap:24px; align-items:center; padding:28px 0; color:var(--t-ink); } /* name container: stack person + affiliation, right-aligned on desktop */ .testimonials .t-name{ display:flex; flex-direction:column; align-items:flex-end; /* right align */ text-align:right; gap:6px; white-space:nowrap; /* keep the person on a single line */ overflow:hidden; font-size: clamp(20px, 5vw, 13px); } /* person name — single line, ellipsis if too long */ .testimonials .t-name .person{ font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* affiliation/university — smaller and wrapped if necessary */ .testimonials .t-name .affiliation{ white-space:normal; /* allow wrapping on the second line */ font-size:0.95rem; opacity:.9; font-weight:600; color: var(--t-muted, #a8b3bf); max-width: 260px; } /* Quote styling (keeps same column) */ .testimonials .t-quote{ color:var(--t-ink); font-size:clamp(16px,2vw,20px); line-height:1.8; } /* Divider rule below each entry */ .testimonials .t-rule{ height:1px; background:var(--t-rule, rgba(0,0,0,.06)); margin:0; } /* Mobile: make name left aligned and stacked for better readability */ @media (max-width:700px){ .testimonials .t-row{ grid-template-columns: 1fr; text-align:left; } .testimonials .t-name{ align-items:flex-start; text-align:left; white-space:normal; } .testimonials .t-name .person{ white-space:normal; } } footer.footer-modern { background: #F7F8FA; /* try #ffffff or #FFF8F0 */ color: #0b0c0e; } /* ---------- force publications author to blue and make journal/venue much larger ---------- */ .publications .pub-wrap .pub-card .pub-meta .authors-line { color: black !important; /* author line = blue */ font-weight: 700 !important; font-size: clamp(13px, 1.6vw, 16px) !important; line-height: 1.35 !important; } .publications .pub-wrap .pub-card .pub-meta .venue { display: block !important; /* ensure it sits on its own line */ color: #e80004 !important; /* keep or change color for the journal name */ font-weight: 800 !important; font-size: clamp(14px, 2.1vw, 21px) !important; /* bigger, responsive journal font */ margin: 6px 0 !important; } .publications .pub-wrap .pub-card .pub-meta .pub-year { display: block !important; /* ensure it sits on its own line */ color: #e80004 !important; /* keep or change color for the journal name */ font-weight: 800 !important; font-size: clamp(16px, 2.3vw, 25px) !important; /* bigger, responsive journal font */ margin: 6px 0 !important; font-style: italic; } /* Testimonials: person name = blue, affiliation (institution) = red */ #testimonials .t-name .person { color: #0b2a6f !important; /* blue name */ font-weight: 900; /* slightly bolder so it stands out */ white-space: normal; /* keep name on one line on wide screens */ overflow: hidden; text-overflow: ellipsis; } #testimonials .t-name .affiliation { color: #D32F2F !important; /* red institution */ font-weight: 900; display: block; /* ensures it sits under the name */ white-space: normal; /* allow wrapping if the university name is long */ } /* HERO IMAGE WIDTH = mission container width (max 1200px) */ .hero .device{ width: min(100%, 1200px) !important; margin: 0 auto; } /* 1) Force a solid white card for the product row and remove any bg-image */ .products .prod-row { background-color: #ffffff !important; background-image: none !important; border-radius: 16px !important; border: 1px solid rgba(16,17,20,0.06) !important; box-shadow: 0 12px 34px rgba(16,17,20,0.06) !important; padding: 20px !important; position: relative !important; /* create new stacking context */ z-index: 20 !important; /* make sure it sits above decorative layers */ } /* 2) Defensive: ensure child items don't draw their own backgrounds or blends */ .products .prod-row * { background: transparent !important; mix-blend-mode: normal !important; } /* 1) Keep the decorative background behind everything */ .gradient-background { position: fixed; inset: 0; z-index: 0 !important; pointer-events: none; } /* 5) Make in-page anchors scroll to a safe position under the fixed header */ html { scroll-padding-top: calc(var(--nav-height) + var(--nav-offset)); } /* ----- STICKY HEADER FIX (homepage-only) ----- */ /* 1) Ensure nothing above the header sits “above” z-order wise */ .gradient-background { z-index: 0 !important; } /* 2) Put the header on the highest plane and force sticky to win */ header { position: sticky !important; top: var(--nav-offset, 20px) !important; z-index: 2000 !important; } /* 3) Make sure no ancestor creates a clipping/scrolling context for the header */ html, body, .nav-shell, .navbar-float { overflow: visible !important; } /* 4) Don’t let main’s stacking context sit above the header */ main { z-index: 1 !important; } /* (Optional) If you ever gave BODY or HTML a transform/filter elsewhere, kill it here */ html, body { transform: none !important; filter: none !important; } /* ===== HOMEPAGE: force-on-top header fix ===== */ /* Keep the decorative background behind everything */ .gradient-background { z-index: 0 !important; } /* Make header truly fixed on this page (not just sticky) */ header{ position: fixed !important; top: var(--nav-offset, 20px) !important; left: 0; right: 0; z-index: 3000 !important; /* over everything */ } /* Ensure nothing creates a clipping/scroll context that breaks it */ html, body, .nav-shell, .navbar-float { overflow: visible !important; } html, body { transform: none !important; filter: none !important; } /* Your main already had padding-top, but make sure it clears the fixed bar */ main{ /* header offset + header height (your var is 52px) + a small cushion */ padding-top: calc(var(--nav-offset, 20px) + var(--nav-height, 52px) + 28px) !important; z-index: 1 !important; /* below the header */ } /* Mobile sheet uses a fixed top value; keep it below the fixed header */ @media (max-width:980px){ .nav-links{ top: calc(var(--nav-offset, 20px) + var(--nav-height, 52px) + 24px) !important; } } /* ======================== TESTIMONIAL CARDS (Option A) Each .t-row becomes a rounded card like the product card Paste this into your