(e.g. a button wrapper) must span its full container — otherwise the 70ch prose cap leaves it as a left-sitting 666px box and its centered button lands left of centre */ p.center { max-width:none; } /* bands */ .band--surface { background: var(--surface); } .band--navy { background: var(--navy); color: var(--on-navy); --ink: var(--on-navy); --muted: var(--on-navy-muted); --border: var(--on-navy-border); } .band--navy h1, .band--navy h2, .band--navy h3 { color: var(--on-navy); } .band--navy a { color:#fff; } /* ============================================================ 4. BUTTONS (verb+object labels; pill primary) ============================================================ */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:700; font-size:1rem; padding:.8em 1.5em; border-radius:var(--pill); border:2px solid transparent; cursor:pointer; transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); line-height:1.1; min-height:44px; text-align:center; } .btn--lg { padding:.95em 1.9em; font-size:1.05rem; } .btn--primary { background:var(--primary); color:#fff; } .btn--primary:hover { background:var(--primary-hover); color:#fff; transform:translateY(-2px); box-shadow:var(--lift); text-decoration:none; } .btn--ghost { background:transparent; color:var(--primary); border-color:var(--border); } .btn--ghost:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); text-decoration:none; } .band--navy .btn--ghost { color:#fff; border-color:var(--on-navy-border); } .band--navy .btn--ghost:hover { border-color:#fff; color:#fff; } /* a blue primary button on a navy band is low-contrast → render it as a white plate (matches btn--on-navy) */ .band--navy .btn--primary { background:#fff; color:var(--primary); } .band--navy .btn--primary:hover { background:var(--surface); color:var(--primary-hover); } /* primary CTA inside a navy band: white plate, brand-blue label (DESIGN.md §2 cta-on-navy) */ .btn--on-navy { background:#fff; color:var(--primary); } .band--navy .btn--on-navy { color:var(--primary); } .btn--on-navy:hover { background:var(--surface); color:var(--primary-hover); transform:translateY(-2px); box-shadow:var(--lift); text-decoration:none; } .btn--wa { background:#25d366; color:#0b3d24; } .btn--wa:hover { background:#1eb858; transform:translateY(-2px); text-decoration:none; } .btn .arrow { transition: transform .18s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce){ .btn, .btn .arrow { transition:none; } .btn:hover { transform:none; } } /* ============================================================ 5. HEADER / NAV ============================================================ */ .site-header { position:sticky; top:0; z-index:var(--z-sticky); background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); transition:box-shadow .25s var(--ease), background .25s var(--ease); } .site-header.scrolled { background:rgba(255,255,255,.97); box-shadow:0 10px 30px -20px rgba(28,42,61,.45); } @media (prefers-reduced-motion: reduce){ .site-header { transition:none; } } .site-header__inner { display:flex; align-items:center; gap:var(--s6); min-height:72px; } .site-logo { flex:0 0 auto; display:inline-flex; align-items:center; line-height:1; } .site-logo img { max-height:42px; width:auto; } /* brand wordmark — the O is a precision aperture (mark lives inside the name) */ .brand { display:inline-flex; align-items:center; } .brand__wm { display:flex; flex-direction:column; line-height:1; } .brand__wm b { font-weight:800; font-size:1.4rem; letter-spacing:-.02em; color:var(--primary); display:inline-flex; align-items:center; } .brand__wm > span { font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-top:6px; align-self:flex-start; } .brand__ap { width:.82em; height:.82em; margin:0 .03em; flex:0 0 auto; } .brand--inverse .brand__wm b { color:#fff; } .brand--inverse .brand__wm > span { color:var(--accent); } @media (max-width:560px){ .brand__wm b { font-size:1.18rem; } .brand__wm > span { font-size:.6rem; } } /* nav = single centered row: links + CTA, pushed to the right */ .site-nav { margin-left:auto; display:flex; align-items:center; gap:var(--s6); } .site-nav ul { display:flex; gap:var(--s6); list-style:none; margin:0; padding:0; align-items:center; } .site-nav ul a { color:var(--ink); font-weight:600; font-size:.98rem; transition:color .18s var(--ease); } .site-nav ul a:hover { color:var(--primary); text-decoration:none; } .site-nav ul a[aria-current="page"] { color:var(--primary); } @media (min-width:861px){ /* animated underline grows on hover + stays for the active page */ .site-nav ul a { position:relative; padding-bottom:6px; } .site-nav ul a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:var(--accent); transition:width .22s var(--ease); } .site-nav ul a:hover::after, .site-nav ul a[aria-current="page"]::after { width:100%; } } .header-cta { padding:.6em 1.2em; white-space:nowrap; } .nav-toggle { display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; } .nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.2s var(--ease); } .utility-bar { position:relative; background:var(--navy); color:var(--on-navy-muted); font-size:.82rem; } .utility-bar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,175,239,.5), transparent); } /* thin cyan seam under the bar */ .utility-bar__inner { display:flex; gap:var(--s6); justify-content:space-between; align-items:center; min-height:40px; } .utility-bar__tag { margin:0; display:inline-flex; align-items:center; gap:.6em; color:var(--on-navy-muted); font-weight:500; } .utility-bar__dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px rgba(0,175,239,.85); flex:none; } .utility-bar__contact { display:flex; align-items:center; } .utility-bar a { display:inline-flex; align-items:center; gap:.45em; color:var(--on-navy-muted); font-weight:500; padding:.2em 0; transition:color .18s var(--ease); } .utility-bar__contact a:not(:first-child) { margin-left:var(--s5); padding-left:var(--s5); border-left:1px solid rgba(255,255,255,.14); } .utility-bar a svg { width:14px; height:14px; opacity:.8; transition:color .18s var(--ease), opacity .18s var(--ease); } .utility-bar a:hover { color:#fff; text-decoration:none; } .utility-bar a:hover svg { color:var(--accent); opacity:1; } @media (max-width:980px){ .utility-bar__tag { display:none; } .utility-bar__inner { justify-content:flex-end; } } /* tighten on laptops so 5 links + CTA never collide with the logo */ @media (max-width:1024px){ .site-header__inner { gap:var(--s4); } .site-nav, .site-nav ul { gap:var(--s4); } .site-nav ul a { font-size:.92rem; } } @media (max-width:860px){ .utility-bar { display:none; } /* keep header a single 72px bar at top:0 so the drawer anchors cleanly */ .nav-toggle { display:block; } .site-nav { position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:#fff; border-bottom:1px solid var(--border); max-height:calc(100vh - 72px); overflow-y:auto; transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .22s var(--ease), opacity .22s var(--ease), visibility .22s var(--ease); padding:var(--s2) 0 var(--s4); box-shadow:var(--lift); } .site-nav.open { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; } .site-nav ul { flex-direction:column; gap:0; align-items:stretch; } .site-nav li { padding:0 24px; } .site-nav ul a { display:block; padding:14px 0; border-bottom:1px solid var(--border); font-size:1rem; } .header-cta { margin:var(--s3) 24px 0; justify-content:center; } } @media (prefers-reduced-motion: reduce){ .site-nav { transition:none; } } /* ============================================================ 6. HERO (centered, navy, AI ambient backdrop + real-product constellation) ============================================================ */ .hero { position:relative; overflow:hidden; } .hero--center { isolation:isolate; padding-block: clamp(var(--s16), 9vw, var(--s24)); } /* layered backdrop: dark navy overlay (keeps centred text AA) over the generated light-ray image */ .hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; background:radial-gradient(125% 95% at 50% 6%, #173a66 0%, #102a4d 44%, #0a1830 100%); } /* clean cobalt -> navy */ /* live particle field (canvas "shader": drifting cyan nodes + links); JS-driven, motion-safe */ .hero__particles { position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; } /* dark veil sits ABOVE the particles, so the centred headline always stays AA */ .hero__veil { position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(42% 52% at 15% 88%, rgba(41,87,164,.26), transparent 60%), radial-gradient(58% 52% at 50% 44%, rgba(11,24,46,.32), transparent 72%), linear-gradient(180deg, rgba(13,28,52,.50), rgba(13,28,52,.74)); } @media (max-width:760px){ .hero__veil { background: radial-gradient(64% 40% at 50% 36%, rgba(11,24,46,.34), transparent 72%), linear-gradient(180deg, rgba(13,28,52,.52), rgba(13,28,52,.78)); } } /* precision blueprint grid — same motif as the product wells, faint over navy */ .hero__bg::before { content:""; position:absolute; inset:-2px; z-index:2; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:46px 46px; -webkit-mask:radial-gradient(125% 120% at 50% 24%, #000, transparent 76%); mask:radial-gradient(125% 120% at 50% 24%, #000, transparent 76%); } /* slow-drifting cyan bloom for ambient motion (a "live" feel without a video) */ .hero__bg::after { content:""; position:absolute; width:72vw; height:72vw; max-width:920px; max-height:920px; top:-22%; right:-12%; border-radius:50%; z-index:2; pointer-events:none; background:radial-gradient(circle, rgba(0,175,239,.20), transparent 60%); } @media (prefers-reduced-motion:no-preference){ .hero__bg::after { animation:heroDrift 28s ease-in-out infinite alternate; } } @keyframes heroDrift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-9%,7%,0) scale(1.14); } } /* subtle medical "scan" sweep: a soft cyan band + crisp line passing down the hero. Sits inside .hero__bg (z below the plates + text), so it never touches text contrast. Reduced-motion: parked off-screen (no scan), the rest of the hero is unaffected. */ .hero__scan { position:absolute; left:0; right:0; top:0; height:46%; z-index:3; pointer-events:none; background:linear-gradient(to bottom, transparent 0%, rgba(0,175,239,.05) 36%, rgba(0,175,239,.20) 47%, rgba(226,248,255,.92) 50%, /* crisp bright beam core */ rgba(0,175,239,.20) 53%, rgba(0,175,239,.05) 64%, transparent 100%); opacity:.6; mix-blend-mode:screen; transform:translateY(-130%); will-change:transform; } /* a thin leading hairline rides just ahead of the beam for a sharper "read-out" cue */ .hero__scan::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg, transparent, rgba(226,248,255,.95), transparent); box-shadow:0 0 12px 1px rgba(0,175,239,.6); } @media (prefers-reduced-motion:no-preference){ .hero__scan { animation:heroScan 9s cubic-bezier(.7,0,.3,1) infinite; } } @keyframes heroScan { 0% { transform:translateY(-120%); } 70% { transform:translateY(320%); } 100% { transform:translateY(320%); } } .hero__center { position:relative; z-index:2; max-width:820px; margin-inline:auto; text-align:center; } .hero--center .hero__title { color:var(--on-navy); margin-bottom:var(--s4); text-shadow:0 2px 18px rgba(7,16,32,.55); } .hero--center .hero__support { color:#d6e1ef; font-size:1.2rem; max-width:62ch; margin:0 auto; text-shadow:0 1px 10px rgba(7,16,32,.5); } /* modalities = a light typographic descriptor line (NOT buttons), middot-separated */ .hero__modalities { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:0; padding:0; margin:var(--s5) auto 0; max-width:60ch; font-size:.92rem; color:var(--on-navy-muted); } .hero__modalities li { display:inline-flex; align-items:center; } .hero__modalities li:not(:last-child)::after { content:"·"; margin:0 .7em; color:var(--accent); font-weight:700; } /* the ONLY pill/button shapes in the hero: the two CTAs (made larger so they dominate) */ .hero--center .hero__cta { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s8); justify-content:center; } /* trust = a flat strip of ticked claims, separated from the actions by a hairline (NOT pills) */ .hero__trust { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3) var(--s6); margin:var(--s8) auto 0; padding:var(--s6) 0 0; max-width:720px; border-top:1px solid var(--on-navy-border); } .hero__trust li { display:inline-flex; align-items:center; gap:.5em; font-size:.9rem; font-weight:600; color:var(--on-navy); } .hero__trust .tick { color:var(--accent); font-weight:700; } /* phones: stack hero + CTA-panel buttons full-width so long labels never overflow */ @media (max-width:520px){ .hero__cta { flex-direction:column; align-items:stretch; width:100%; max-width:360px; margin-inline:auto; } .hero__cta .btn { width:100%; justify-content:center; } } /* product constellation: mobile-first = a centred rail; desktop = scattered plates framing the text */ .hero__products { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3); max-width:520px; margin:var(--s12) auto 0; } /* No container — transparent product cutouts float directly. A soft cyan halo behind each makes them pop on the dark hero; pointer-parallax + hover (JS-driven) make them interactive. Position via top/left; transform is reserved for parallax/hover. */ .hero__float { margin:0; position:relative; width:clamp(132px,36vw,176px); --px:0px; --py:0px; --s:1; } .hero__float::before { content:""; position:absolute; left:50%; top:48%; width:80%; height:80%; transform:translate(-50%,-50%); z-index:0; border-radius:50%; background:radial-gradient(circle, rgba(0,175,239,.32), transparent 70%); filter:blur(12px); opacity:.5; transition:opacity .3s var(--ease); } .hero__float img { position:relative; z-index:1; width:100%; height:auto; max-height:132px; object-fit:contain; display:block; filter:drop-shadow(0 16px 26px rgba(0,0,0,.55)); } @media (min-width:1200px){ .hero__products { position:absolute; inset:0; z-index:1; display:block; max-width:none; margin:0; pointer-events:none; } .hero__float { position:absolute; width:258px; pointer-events:auto; cursor:pointer; transform:translate(var(--px),var(--py)) scale(var(--s)); transition:transform .3s var(--ease); } .hero__float img { max-height:208px; filter:drop-shadow(0 24px 38px rgba(0,0,0,.62)); transition:filter .3s var(--ease); } .hero__float--1 { top:7%; left:1%; } .hero__float--2 { top:7%; right:1%; } .hero__float--3 { bottom:8%; left:2%; } .hero__float--4 { bottom:8%; right:2%; } .hero__float:hover { --s:1.08; z-index:3; } .hero__float:hover::before { opacity:.9; } .hero__float:hover img { filter:drop-shadow(0 28px 46px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(0,175,239,.55)); } } @media (min-width:1500px){ .hero__float { width:304px; } .hero__float img { max-height:244px; } } @media (prefers-reduced-motion:reduce){ .hero__float, .hero__float img, .hero__float::before { transition:none; } } /* partner strip — a uniform "logo wall" of tiles (real OEM logos pending media-kit; text wordmarks until then). Hover lifts the tile + grows a cyan top accent. */ .partners__label { text-align:center; max-width:none; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; font-weight:700; color:var(--accent-ink); margin:0 0 var(--s6); } .partners { display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:center; align-items:stretch; } .partners a, .partners span { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:1 1 138px; max-width:172px; min-height:66px; padding:var(--s3) var(--s4); overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); font-weight:700; font-size:1.06rem; letter-spacing:-.01em; color:var(--ink); box-shadow:0 10px 24px -20px rgba(28,42,61,.45); transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); } .partners a::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); } .partners a { text-decoration:none; } .partners a:hover { transform:translateY(-4px); border-color:var(--accent); color:var(--primary); box-shadow:var(--lift); text-decoration:none; } .partners a:hover::before { transform:scaleX(1); } .partners span { color:var(--muted); } @media (prefers-reduced-motion: reduce){ .partners a, .partners a::before { transition:none; } .partners a:hover { transform:none; } } /* ============================================================ 7. PROOF / COMPLIANCE PILLS ============================================================ */ .pills { display:flex; gap:var(--s3); flex-wrap:wrap; } .pill { display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.86rem; padding:.45em .9em; border-radius:var(--pill); background:rgba(31,157,99,.12); color:#136b43; } .pill svg, .pill .tick { color:var(--success); } .band--navy .pill { background:rgba(255,255,255,.12); color:#dff3e8; } /* ============================================================ 8. PRODUCT CARD + FEATURE BLOCK ============================================================ */ /* Shared "instrument well" — ONE branded light field, reused by product cards, the homepage flagship wells + the PDP gallery. A clean light pool keeps opaque, mixed- background product photos blending; a faint blueprint grid + a per-modality --glow live at the edges (never directly behind the product). */ .instrument-well { position:relative; isolation:isolate; overflow:hidden; background: radial-gradient(80% 72% at 50% 42%, #fbfdff 0%, #f1f6fc 48%, rgba(241,246,252,0) 80%), linear-gradient(180deg, #e8eff8, #dae5f2); } .instrument-well > * { position:relative; z-index:1; } /* product image rides above the motif */ .instrument-well::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(41,87,164,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(41,87,164,.07) 1px, transparent 1px); background-size:26px 26px; -webkit-mask:radial-gradient(78% 66% at 50% 44%, transparent 38%, #000 88%); mask:radial-gradient(78% 66% at 50% 44%, transparent 38%, #000 88%); } .instrument-well::after { content:""; position:absolute; z-index:0; width:62%; height:76%; right:-11%; bottom:-15%; border-radius:50%; pointer-events:none; background:radial-gradient(circle, var(--glow, rgba(0,175,239,.20)), transparent 68%); transition:transform .45s var(--ease); } /* per-modality glow hue, kept inside the brand blue -> cyan -> teal range */ .glow--ablation, .product-card--ablation { --glow:rgba(0,175,239,.22); } .glow--imaging, .product-card--imaging { --glow:rgba(41,87,164,.20); } .glow--ozone, .product-card--ozone { --glow:rgba(0,176,150,.18); } .glow--catheter, .product-card--catheter { --glow:rgba(56,118,214,.18); } .product-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; max-width:380px; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .product-card:hover { transform:translateY(-4px); box-shadow:var(--lift); border-color:var(--accent); } .product-card__media { height:240px; display:flex; align-items:center; justify-content:center; padding:var(--s6); } .product-card__media img { max-height:100%; width:auto; object-fit:contain; transition:transform .45s var(--ease); } .product-card:hover .instrument-well::after { transform:scale(1.14); } .product-card:hover .product-card__media img { transform:scale(1.045); } .product-card__body { padding:var(--s5) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; } .product-card__cat { font-size:.78rem; font-weight:700; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.06em; } .product-card__spec { font-family:var(--font-mono); font-size:.85rem; color:var(--muted); font-feature-settings:"tnum"; } .product-card__oem { font-size:.82rem; font-weight:600; color:var(--muted); } .product-card__cta { margin-top:auto; font-weight:700; color:var(--primary); } @media (prefers-reduced-motion: reduce){ .product-card, .product-card__media img, .instrument-well::after { transition:none; } .product-card:hover { transform:none; } .product-card:hover .product-card__media img, .product-card:hover .instrument-well::after, .feature:hover .feature__well.instrument-well::after { transform:none; } } .feature { display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:center; } .feature:nth-child(even) .feature__media { order:-1; } /* device well: the shared instrument-well motif (add .instrument-well in markup); image lifts on hover */ .feature__well { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius); padding:var(--s8); } .feature__well img { max-height:100%; width:auto; object-fit:contain; transition:transform .4s var(--ease); } .feature:hover .feature__well img { transform:scale(1.05); } .feature:hover .feature__well.instrument-well::after { transform:scale(1.1); } @media (max-width:860px){ .feature { grid-template-columns:1fr; gap:var(--s6); } .feature:nth-child(even) .feature__media { order:0; } } @media (prefers-reduced-motion: reduce){ .feature__well img { transition:none; } .feature:hover .feature__well img { transform:none; } } /* ============================================================ 9. SPEC TABLE (mono tabular, navy header) + mobile stack ============================================================ */ .spec-table { width:100%; border-collapse:collapse; font-size:.95rem; } .spec-table caption { text-align:left; font-weight:700; margin-bottom:var(--s3); } .spec-table th { background:var(--navy); color:var(--on-navy); text-align:left; padding:.7em 1em; font-weight:600; } .spec-table td { padding:.7em 1em; border-bottom:1px solid var(--border); } .spec-table td.val { font-family:var(--font-mono); font-feature-settings:"tnum"; color:var(--ink); } .spec-table tr:nth-child(even) td { background:var(--surface); } @media (max-width:560px){ .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display:block; width:100%; } .spec-table thead { display:none; } .spec-table tr { border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:var(--s3); padding:var(--s2); } .spec-table td { border:0; display:flex; justify-content:space-between; gap:var(--s4); } .spec-table td.lbl { font-weight:700; } } /* comparison table (RFA vs microwave vs cryo) — scrolls horizontally on small screens */ .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius); margin:var(--s6) 0; } .compare { width:100%; border-collapse:collapse; min-width:660px; font-size:.95rem; } .compare thead th { background:var(--navy); color:var(--on-navy); text-align:left; padding:.8em 1em; font-weight:600; } .compare thead th:first-child { background:var(--primary); } .compare tbody th { text-align:left; font-weight:700; color:var(--ink); background:var(--surface); padding:.7em 1em; white-space:nowrap; border-bottom:1px solid var(--border); } .compare td { padding:.7em 1em; border-bottom:1px solid var(--border); border-left:1px solid var(--border); vertical-align:top; color:var(--ink); } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom:0; } /* ============================================================ 10. TRUST BAND / STATS ============================================================ */ .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s8); text-align:center; } .stat__num { font-size:2.2rem; font-weight:800; color:#fff; line-height:1; } .stat__label { color:var(--on-navy-muted); margin-top:var(--s2); font-size:.95rem; } /* "Why hospitals choose us" — reasons + proof (replaces the hero-metric stat row) */ .why-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(238px, 1fr)); gap:var(--s6); } /* translucent navy "glass" — reads richer than a washed-out near-white film on navy */ .why-card { text-align:center; padding:var(--s8) var(--s6); border-radius:var(--radius); background:linear-gradient(180deg, rgba(125,170,225,.12), rgba(125,170,225,.04) 60%), rgba(13,28,52,.35); border:1px solid rgba(174,191,212,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px -22px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); } .why-card:hover { transform:translateY(-3px); border-color:rgba(0,175,239,.55); background:linear-gradient(180deg, rgba(125,170,225,.16), rgba(125,170,225,.05) 60%), rgba(13,28,52,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 38px -22px rgba(0,0,0,.7); } .why-card__metric { display:block; font-family:var(--font-mono); font-weight:700; font-size:1.2rem; color:var(--accent); letter-spacing:-.01em; margin-bottom:var(--s3); } .why-card h3 { color:#fff; font-size:1.06rem; margin:0 0 var(--s2); } .why-card p { color:var(--on-navy-muted); margin:0; font-size:.93rem; } @media (prefers-reduced-motion: reduce){ .why-card { transition:none; } .why-card:hover { transform:none; } } /* ============================================================ 11. FORMS (RFQ) ============================================================ */ .form-field { margin-bottom:var(--s4); } .form-field label { display:block; font-weight:600; margin-bottom:var(--s2); } .form-field input, .form-field select, .form-field textarea { width:100%; padding:.75em 1em; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; color:var(--ink); background:#fff; } .form-field input::placeholder, .form-field textarea::placeholder { color:#7a8699; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(41,87,164,.15); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } @media (max-width:560px){ .form-grid { grid-template-columns:1fr; } } .form-note { font-size:.85rem; color:var(--muted); } .form-error { color:#b3261e; font-size:.85rem; margin-top:var(--s1); } .form-success { background:rgba(31,157,99,.1); border:1px solid var(--success); border-radius:var(--radius); padding:var(--s6); } .form-errorbox { background:rgba(179,38,30,.08); border:1px solid #b3261e; color:#7f1d18; border-radius:var(--radius); padding:var(--s4) var(--s6); margin-bottom:var(--s6); } .form-errorbox a { color:#7f1d18; text-decoration:underline; } /* RFQ page: form + reassurance aside */ .rfq-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s12); align-items:start; } @media (max-width:860px){ .rfq-layout { grid-template-columns:1fr; gap:var(--s8); } } .rfq-aside { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s8) var(--s6); } .rfq-aside h2, .rfq-aside h3 { margin-top:0; } .rfq-aside__list, .rfq-aside__contacts { list-style:none; padding:0; margin:0; } .rfq-aside__list li { padding-left:1.7em; position:relative; margin-bottom:var(--s3); } .rfq-aside__list li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--success); font-weight:700; } .rfq-aside__contacts li { margin-bottom:var(--s2); font-weight:600; } /* ============================================================ 12. FOOTER ============================================================ */ .site-footer { background:var(--navy); color:var(--on-navy); padding-block:var(--s12) var(--s8); } .site-footer a { color:var(--on-navy); } .site-footer a:hover { color:#fff; } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s8); } .footer-col h4 { color:#fff; font-size:1rem; margin-bottom:var(--s4); } .footer-col ul { list-style:none; padding:0; margin:0; } .footer-col li { margin-bottom:var(--s2); } .footer-brands { border-top:1px solid var(--on-navy-border); margin-top:var(--s8); padding-top:var(--s6); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5, 20px); font-size:.9rem; } .footer-brands > span:first-child { color:var(--on-navy-muted); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; } .footer-brands a { color:var(--on-navy); font-weight:600; } .footer-brands a:hover { color:#fff; } .footer-brands__plain { color:var(--on-navy-muted); font-weight:600; } .footer-bottom { border-top:1px solid var(--on-navy-border); margin-top:var(--s6); padding-top:var(--s6); font-size:.85rem; color:var(--on-navy-muted); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; } @media (max-width:860px){ .footer-grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .footer-grid { grid-template-columns:1fr; } } /* ============================================================ 13. BREADCRUMBS + UTILITIES ============================================================ */ .breadcrumbs { font-size:.86rem; color:var(--muted); padding-block:var(--s4); } .breadcrumbs a { color:var(--muted); } /* ONE conversion-panel treatment used at the foot of every page (homepage .cta-panel + in-content .cta-band are now identical: navy, soft cyan glow, generous padding, contained). */ .cta-band, .cta-panel { text-align:center; border-radius:var(--radius); padding:clamp(var(--s12), 5vw, var(--s16)) clamp(var(--s6), 4vw, var(--s12)); background: radial-gradient(760px 340px at 50% 0%, rgba(0,175,239,.18), transparent 70%), var(--navy); color:var(--on-navy); box-shadow:0 34px 70px -38px rgba(11,24,46,.7); --ink:var(--on-navy); --muted:var(--on-navy-muted); --border:var(--on-navy-border); } .cta-band h2, .cta-panel h2 { color:var(--on-navy); } .cta-band .lead, .cta-panel .lead { color:#d6e1ef; max-width:58ch; margin-inline:auto; } .cta-band .eyebrow, .cta-panel .eyebrow { color:var(--accent); } .cta-band p, .cta-panel p { margin-inline:auto; } .cta-band .btn--primary, .cta-panel .btn--primary { background:#fff; color:var(--primary); } .cta-band .btn--primary:hover, .cta-panel .btn--primary:hover { background:var(--surface); color:var(--primary-hover); } .cta-band .btn--ghost, .cta-panel .btn--ghost { color:#fff; border-color:var(--on-navy-border); } .cta-band .btn--ghost:hover, .cta-panel .btn--ghost:hover { border-color:#fff; } /* in-content CTA buttons sit inline in a
: give them margin for spacing + wrap (homepage uses .hero__cta) */ .cta-band p .btn, .cta-panel p .btn { margin:var(--s2); } /* ============================================================ 11b. NAVY SURFACE RECIPES (layer on .band--navy / .cta-panel) ONE blueprint/precision family, 5 distinct expressions, so no two navy surfaces read the same. Additive light only -> --on-navy / #fff / --on-navy-muted all stay AA over every recipe. Placed AFTER .cta-panel so recipes that set `background` win the cascade. Motion is opt-in + subtle. ============================================================ */ .bg--blueprint, .bg--contour, .bg--sweep, .bg--mesh, .bg--scan { position:relative; isolation:isolate; overflow:hidden; } .bg--blueprint > *, .bg--contour > *, .bg--sweep > *, .bg--mesh > *, .bg--scan > * { position:relative; z-index:1; } /* A. blueprint — engineering grid + cyan ticks at crossings, faded to edges (the core motif at scale) */ .bg--blueprint::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), radial-gradient(rgba(0,175,239,.5) 1px, transparent 1.4px); background-size:48px 48px, 48px 48px, 48px 48px; background-position:0 0, 0 0, 24px 24px; -webkit-mask:radial-gradient(120% 110% at 50% 30%, #000, transparent 78%); mask:radial-gradient(120% 110% at 50% 30%, #000, transparent 78%); } .bg--blueprint::after { content:""; position:absolute; z-index:0; pointer-events:none; width:60%; height:90%; top:-20%; right:-8%; border-radius:50%; background:radial-gradient(circle, rgba(0,175,239,.16), transparent 66%); } /* B. contour — topographic / imaging isolines (ultrasound + CT feel) */ .bg--contour::before { content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none; background:repeating-radial-gradient(110% 120% at 18% 8%, transparent 0 38px, rgba(174,191,212,.10) 38px 39px, transparent 39px 78px); -webkit-mask:linear-gradient(115deg, #000 35%, transparent 92%); mask:linear-gradient(115deg, #000 35%, transparent 92%); } .bg--contour::after { content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none; background:repeating-radial-gradient(120% 130% at 86% 96%, transparent 0 46px, rgba(0,175,239,.10) 46px 47px, transparent 47px 94px); -webkit-mask:linear-gradient(295deg, #000 30%, transparent 88%); mask:linear-gradient(295deg, #000 30%, transparent 88%); } /* C. sweep — calibration light rake: fine angled hairlines + a single drifting sheen */ .bg--sweep { background:linear-gradient(115deg, rgba(41,87,164,.55), transparent 60%), var(--navy); } .bg--sweep::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 22px); -webkit-mask:linear-gradient(115deg, transparent, #000 55%, transparent); mask:linear-gradient(115deg, transparent, #000 55%, transparent); } .bg--sweep::after { content:""; position:absolute; z-index:0; pointer-events:none; top:-40%; left:-20%; width:70%; height:180%; background:linear-gradient(115deg, transparent, rgba(0,175,239,.14), transparent); filter:blur(8px); transform:skewX(-12deg); } @media (prefers-reduced-motion:no-preference){ .bg--sweep::after { animation:bgSweep 16s var(--ease) infinite alternate; } } @keyframes bgSweep { from { transform:skewX(-12deg) translate3d(-6%,0,0); } to { transform:skewX(-12deg) translate3d(14%,0,0); } } /* D. mesh — soft overlapping brand-blue/cyan/teal blooms (atmospheric; no lines) */ .bg--mesh { background: radial-gradient(58% 70% at 12% 18%, rgba(0,175,239,.20), transparent 60%), radial-gradient(54% 64% at 88% 12%, rgba(41,87,164,.55), transparent 62%), radial-gradient(70% 80% at 78% 96%, rgba(0,176,150,.14), transparent 64%), radial-gradient(60% 70% at 30% 100%, rgba(27,58,99,.9), transparent 60%), var(--navy); } .bg--mesh::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px); background-size:40px 40px; -webkit-mask:radial-gradient(120% 120% at 50% 50%, #000, transparent 85%); mask:radial-gradient(120% 120% at 50% 50%, #000, transparent 85%); } /* E. scan — fine horizontal detector lines + one drifting cyan "active" line (instrument read-out) */ .bg--scan::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px); -webkit-mask:linear-gradient(180deg, #000 0%, transparent 70%); mask:linear-gradient(180deg, #000 0%, transparent 70%); } .bg--scan::after { content:""; position:absolute; z-index:0; left:0; right:0; top:0; height:2px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(0,175,239,.45), transparent); box-shadow:0 0 22px 2px rgba(0,175,239,.18); } @media (prefers-reduced-motion:no-preference){ .bg--scan::after { animation:bgScan 9s linear infinite; } } @keyframes bgScan { 0% { transform:translateY(0); opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { transform:translateY(46vh); opacity:0; } } /* generic surface card + grid — equal-height, pixel-aligned (offices, procedures, methods, etc.) */ .cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr)); gap:var(--s6); } .card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:var(--s8) var(--s6); display:flex; flex-direction:column; gap:var(--s2); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .card:hover { transform:translateY(-3px); box-shadow:var(--lift); border-color:var(--accent); } .card > h3 { margin:0; font-size:1.1rem; } .card > p { margin:0; max-width:none; } .card__eyebrow { font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); } .card__links { margin-top:auto; padding-top:var(--s2); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); } .card__links .tlink { margin:0; } /* pointer-reactive spotlight: a faint cyan highlight follows the cursor on light cards (JS sets --mx/--my); pure-CSS, no layout animation, only fades in on hover. */ .card, .svc-card { position:relative; isolation:isolate; --mx:50%; --my:0%; } .card > *, .svc-card > * { position:relative; z-index:1; } .card::before, .svc-card::before { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s var(--ease); background:radial-gradient(360px circle at var(--mx) var(--my), rgba(0,175,239,.12), transparent 60%); } .card:hover::before, .svc-card:hover::before { opacity:1; } /* check-list (used where a card grid would be too heavy, e.g. Solutions "why work with us") */ .checklist { list-style:none; padding:0; margin:var(--s6) 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--s3) var(--s8); max-width:none; } .checklist li { position:relative; padding-left:1.9em; color:var(--ink); max-width:none; } .checklist li::before { content:"\2713"; position:absolute; left:0; top:.05em; color:var(--success); font-weight:800; } @media (prefers-reduced-motion: reduce){ .card { transition:none; } .card:hover { transform:none; } } /* image-backed topical card: abstract on-brand bg (CSS url, env-agnostic) + navy scrim + dark-context content; hover zooms the image, lifts the card, deepens the scrim. */ .media-card { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; padding:var(--s8) var(--s6) var(--s6); border-radius:var(--radius); border:1px solid var(--border); background:var(--navy); color:#fff; --ink:#fff; --muted:#d6e1ef; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .media-card:hover { transform:translateY(-5px); box-shadow:var(--lift); border-color:var(--accent); } /* soft-focus the image so its busy/bright detail never competes with text; the larger scale hides the blur's transparent edge. Kept as ambient colour + motion, not detail. */ /* light blur keeps the flat-illustration shapes crisp; slight scale hides any blur edge */ .media-card::before { content:""; position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transform:scale(1.06); filter:blur(1.5px) brightness(.88) saturate(1.05); transition:transform .55s var(--ease); } .media-card:hover::before { transform:scale(1.11); } /* scrim: light at the top (image stays bright/modern), strong at the bottom where text sits (AA) */ .media-card::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(9,18,36,.18) 0%, rgba(9,18,36,.46) 40%, rgba(7,14,28,.82) 70%, rgba(5,11,22,.96) 100%); } .media-card > * { position:relative; z-index:2; } .media-card .card__eyebrow { color:#74d6ff; text-shadow:0 1px 2px rgba(0,0,0,.5); } .media-card h3 { color:#fff; font-size:1.22rem; margin:0 0 var(--s2); text-shadow:0 1px 3px rgba(0,0,0,.5); } .media-card p, .media-card .muted { color:#eaf1fb; max-width:none; text-shadow:0 1px 2px rgba(0,0,0,.45); } .media-card .card__links { margin-top:var(--s3); padding-top:0; } .media-card .tlink { color:#fff; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.45); } .media-card .tlink:hover { color:#74d6ff; } @media (prefers-reduced-motion: reduce){ .media-card, .media-card::before { transition:none; } .media-card:hover { transform:none; } .media-card:hover::before { transform:scale(1.01); } } /* the 10 generated backgrounds (relative to style.css = theme dir; works in every env) */ .mc--thyroid-rfa::before { background-image:url('assets/img/cards/card-thyroid-rfa.webp?v=2'); } .mc--liver::before { background-image:url('assets/img/cards/card-liver.webp?v=2'); } .mc--microwave::before { background-image:url('assets/img/cards/card-microwave.webp?v=2'); } .mc--cryo::before { background-image:url('assets/img/cards/card-cryo.webp?v=2'); } .mc--dr::before { background-image:url('assets/img/cards/card-dr.webp?v=2'); } .mc--ozone::before { background-image:url('assets/img/cards/card-ozone.webp?v=2'); } .mc--distribution::before { background-image:url('assets/img/cards/card-distribution.webp?v=2'); } .mc--lifecycle::before { background-image:url('assets/img/cards/card-lifecycle.webp?v=2'); } .mc--presence::before { background-image:url('assets/img/cards/card-presence.webp?v=2'); } .mc--manufacturing::before { background-image:url('assets/img/cards/card-manufacturing.webp?v=2'); } /* feature block + quiet secondary link (procedure-guide links on the homepage) */ .feature__links { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s6); } .link-quiet { font-weight:600; color:var(--muted); border-bottom:1px solid var(--border); padding-bottom:1px; } .link-quiet:hover { color:var(--primary); border-color:var(--primary); text-decoration:none; } /* tidy inline text link (replaces clusters of ghost buttons inside content grids) */ .tlink { display:inline-block; font-weight:600; color:var(--primary); } .tlink:hover { text-decoration:underline; } .tlink + .tlink { margin-left:var(--s4); } .float-wa { position:fixed; right:18px; bottom:18px; z-index:var(--z-sticky); width:54px; height:54px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.5); transition:transform .18s var(--ease), box-shadow .18s var(--ease); } .float-wa:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 18px 38px -10px rgba(37,211,102,.6); } .float-wa svg { width:28px; height:28px; } @media (prefers-reduced-motion: reduce){ .float-wa { transition:none; } .float-wa:hover { transform:none; } } .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .muted { color:var(--muted); } /* entrance — content is ALWAYS visible by default (DESIGN §8: never gate visibility). JS adds .reveal-armed just-in-time to hide, then .in (on scroll) or a safety-net timeout reveals. */ .reveal { opacity:1; } @media (prefers-reduced-motion: no-preference){ .reveal.reveal-armed { opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .reveal.reveal-armed.in { opacity:1; transform:none; } /* card grids cascade in as the section reveals (scoped to .reveal-armed so any failure path or ?noanim leaves cards fully visible; the section's safety-net .in covers them). */ .reveal-armed :is(.cards,.grid--auto,.grid--center,.why-grid,.svc-grid) > * { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .reveal.in :is(.cards,.grid--auto,.grid--center,.why-grid,.svc-grid) > * { opacity:1; transform:none; } .reveal.in :is(.cards,.grid--auto,.grid--center,.why-grid,.svc-grid) > *:nth-child(2){ transition-delay:.07s; } .reveal.in :is(.cards,.grid--auto,.grid--center,.why-grid,.svc-grid) > *:nth-child(3){ transition-delay:.14s; } .reveal.in :is(.cards,.grid--auto,.grid--center,.why-grid,.svc-grid) > *:nth-child(4){ transition-delay:.21s; } .reveal.in :is(.cards,.grid--auto,.grid--center,.why-grid,.svc-grid) > *:nth-child(5){ transition-delay:.28s; } .reveal.in :is(.cards,.grid--auto,.grid--center,.why-grid,.svc-grid) > *:nth-child(6){ transition-delay:.35s; } } /* ============================================================ 14. TEMPLATE WRAPPERS (grid cells / prose) ============================================================ */ .hero__copy, .feature__copy { min-width: 0; } /* prevent grid overflow on long words */ .feature__copy h2 { margin-top: 0; } /* page-header banner: left-aligned text, themed image bleeding in from the right (navy band) */ .page-banner { position:relative; isolation:isolate; color:var(--on-navy); --ink:var(--on-navy); --muted:var(--on-navy-muted); --border:var(--on-navy-border); background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 42%, rgba(27,58,99,.55) 68%, rgba(27,58,99,.12) 100%), var(--bnr, none) right center / cover no-repeat, radial-gradient(700px 360px at 88% 50%, rgba(0,175,239,.16), transparent 60%), var(--navy); padding-block: clamp(var(--s12), 6.5vw, var(--s16)); } .page-banner__inner { max-width:600px; } .page-banner .breadcrumbs { color:var(--on-navy-muted); padding:0 0 var(--s3); } .page-banner .breadcrumbs a { color:var(--on-navy-muted); } .page-banner .breadcrumbs a:hover { color:#fff; } .page-banner .eyebrow { color:var(--accent); margin:0 0 var(--s3); } .page-banner h1 { color:var(--on-navy); margin:0 0 var(--s4); } .page-banner .lead { color:#d6e1ef; max-width:52ch; margin:0; } @media (max-width:760px){ .page-banner { background: linear-gradient(90deg, var(--navy) 0%, rgba(27,58,99,.86) 60%, rgba(27,58,99,.6) 100%), var(--bnr, none) right center / cover no-repeat, var(--navy); } .page-banner__inner { max-width:none; } } /* cap PROSE for readability, but let grids/wide blocks (e.g. .team-grid) span the full container */ .page-content > p, .page-content > ul, .page-content > ol, .page-content > h2, .page-content > h3 { max-width: 75ch; } .page-content h2 { margin-top: 1.4em; } .page-content ul { margin-bottom: 1em; } /* filter chips (catalog modality nav) */ .chips { display:flex; flex-wrap:wrap; gap:var(--s2); list-style:none; padding:0; margin:0 0 var(--s8); } .chip { display:inline-flex; padding:.5em 1em; border:1px solid var(--border); border-radius:var(--pill); font-weight:600; font-size:.9rem; color:var(--ink); } .chip:hover, .chip[aria-current="page"] { border-color:var(--primary); color:var(--primary); text-decoration:none; } /* ============================================================ 15. TEAM GRID + TEAM CARD (circular photo, centered) ============================================================ */ .team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--s6); } .team-card { display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:var(--s8) var(--s6); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .team-card:hover { transform:translateY(-4px); box-shadow:var(--lift); border-color:var(--accent); } .team-card__photo { width:100%; max-width:160px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; object-position:top center; background:var(--surface); margin:0 auto var(--s4); transition:transform .35s var(--ease), box-shadow .25s var(--ease); } .team-card:hover .team-card__photo { transform:scale(1.05); box-shadow:0 0 0 4px rgba(0,175,239,.2); } .team-card__name { font-size:1.12rem; font-weight:700; color:var(--ink); margin:0 0 var(--s1); line-height:1.2; } .team-card__role { color:var(--muted); font-size:.95rem; margin:0; } @media (prefers-reduced-motion: reduce){ .team-card, .team-card__photo { transition:none; } .team-card:hover { transform:none; } .team-card:hover .team-card__photo { transform:none; } } /* ============================================================ 16. LIFECYCLE STEPS (supply -> install -> train -> service) ============================================================ */ .lifecycle { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--s8) var(--s6); } .lifecycle__step { display:flex; flex-direction:column; } .lifecycle__icon, .svc-card__icon { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(41,87,164,.10); color:var(--primary); margin-bottom:var(--s4); } .lifecycle__icon svg, .svc-card__icon svg { width:26px; height:26px; stroke:currentColor; fill:none; } /* service cards (Services page) — scannable, icon + what + who */ .svc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); gap:var(--s6); margin:var(--s8) 0 var(--s16); } @media (max-width:520px){ .svc-grid { grid-template-columns:1fr; } } .svc-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:var(--s8) var(--s6); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .svc-card:hover { transform:translateY(-4px); box-shadow:var(--lift); border-color:var(--accent); } .svc-card h3 { margin:0 0 var(--s3); font-size:1.18rem; } .svc-card > p { margin:0; } .svc-card__who { margin:var(--s4) 0 0 !important; padding-top:var(--s4); border-top:1px solid var(--border); font-size:.9rem; color:var(--muted); } @media (prefers-reduced-motion: reduce){ .svc-card { transition:none; } .svc-card:hover { transform:none; } } .lifecycle__step h3 { margin-bottom:var(--s2); } .lifecycle__step p { margin:0; color:var(--muted); } .band--navy .lifecycle__icon { background:rgba(255,255,255,.12); color:var(--accent); } /* numbered process timeline (supply -> install -> train -> service): a real sequence */ .flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s6); position:relative; } .flow::before { content:""; position:absolute; top:26px; left:0; right:0; height:2px; background:var(--border); margin-inline:12.5%; z-index:0; } .flow__step { text-align:center; position:relative; z-index:1; } .flow__num { width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:1.15rem; display:flex; align-items:center; justify-content:center; margin:0 auto var(--s4); box-shadow:0 0 0 6px var(--surface); } .flow__step h3 { margin:0 0 var(--s2); } .flow__step p { margin:0 auto; color:var(--muted); max-width:30ch; } @media (max-width:760px){ .flow { grid-template-columns:1fr 1fr; gap:var(--s8) var(--s6); } .flow::before { display:none; } } @media (max-width:460px){ .flow { grid-template-columns:1fr; } } /* ============================================================ 17. FAQ ACCORDION (PDP + homepage + pillar pages) ============================================================ */ /* One connected card (not a stack of identical boxes): hairline dividers, a circular cyan marker chip that fills + rotates on open, a surface-tint hover/open state, and a motion-safe answer reveal. Shared by homepage, PDP and pillar FAQs. */ .faq { max-width:820px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; overflow:hidden; box-shadow:0 24px 60px -42px rgba(28,42,61,.5); } .faq__item { border:0; border-top:1px solid var(--border); border-radius:0; margin:0; padding:0; background:transparent; transition:background .18s var(--ease); } .faq__item:first-child { border-top:0; } /* locked row rhythm: text column + a fixed 30px marker column, consistent min-height */ .faq__item summary { font-weight:700; font-size:1.04rem; cursor:pointer; list-style:none; color:var(--ink); display:grid; grid-template-columns:1fr 30px; gap:var(--s4); align-items:center; min-height:64px; padding:var(--s5) var(--s6); transition:color .18s var(--ease); } .faq__item summary::-webkit-details-marker { display:none; } /* marker: a restrained cyan-tinted + chip; fills cyan and rotates to × (navy glyph for AA) when open */ .faq__item summary::after { content:"+"; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; line-height:1; font-weight:400; background:rgba(0,175,239,.10); color:var(--accent-ink); transition:transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease); } .faq__item:hover { background:var(--surface); } .faq__item:hover summary { color:var(--primary); } .faq__item:hover summary::after { background:rgba(0,175,239,.18); } .faq__item[open] { background:var(--surface); } .faq__item[open] summary { color:var(--primary); } .faq__item[open] summary::after { transform:rotate(45deg); background:var(--accent); color:var(--navy); } /* answer (homepage: a bare
; PDP shortcode: a
s) */ .faq__item > p, .faq__item > div { margin:0; color:var(--ink); padding:0 var(--s6) var(--s5); } .faq__item > div > p { margin:0 0 .8em; } .faq__item > div > p:last-child { margin-bottom:0; } .faq__item :focus-visible { outline:3px solid var(--accent); outline-offset:-3px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion:no-preference){ .faq__item[open] > p, .faq__item[open] > div { animation:faqIn .28s var(--ease); } } @keyframes faqIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .faq__item, .faq__item summary, .faq__item summary::after { transition:none; } }