/* ========================================================================== JF Strategic Advisors — site.css Shared design system: teal "Clinical Trust" theme. Every marketing page links this file and pastes the shared nav + footer markup (see the markup block at the bottom of this comment, mirrored in each page). Fonts: Plus Jakarta Sans (headings) + Inter (body) via the Google Fonts in each page's . ========================================================================== */ /* -------- Design tokens -------------------------------------------------- */ :root{ /* Brand / ink */ --brand:#0d9488; --brand-700:#0f766e; --brand-800:#115e57; --brand-tint:#e3f3f1; /* soft fill behind icons / pills */ --brand-tint-2:#d1e8e6; --ink:#16263a; /* primary text */ --muted:#475a68; /* secondary text */ --muted-2:#5a6b7a; --bg:#f3f6f6; /* page background */ --surface:#fff; /* cards / panels */ --line:#e4eaea; /* hairline borders */ /* Type */ --head:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Spacing / shape */ --radius:16px; --radius-sm:12px; --radius-lg:20px; --shadow-sm:0 1px 3px rgba(16,38,58,.05); --shadow-md:0 8px 28px rgba(16,38,58,.08); --shadow-cta:0 6px 18px rgba(13,148,136,.28); --maxw:1080px; --nav-h:64px; } /* -------- Reset / base --------------------------------------------------- */ *{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);} html,body{margin:0;} body{ font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.02em;line-height:1.12;margin:0;} p{margin:0 0 1rem;} a{color:var(--brand-700);text-decoration:none;} a:hover{text-decoration:underline;} /* Focus-visible accessibility ring (keyboard users only) */ :focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px;} a:focus-visible,.btn:focus-visible{outline-offset:3px;} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--brand-700);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600; } .skip-link:focus{left:0;text-decoration:none;} /* -------- Layout helpers ------------------------------------------------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .wrap-narrow{max-width:760px;margin:0 auto;padding:0 22px;} section{padding:56px 0;} .section-tight{padding:38px 0;} .lead{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-700);font-weight:700;margin-bottom:10px;} .sub{color:var(--muted);font-size:18px;max-width:62ch;} .center{text-align:center;} .center .sub{margin-left:auto;margin-right:auto;} h2{font-size:32px;margin-bottom:8px;} h3{font-size:20px;} .muted{color:var(--muted);} /* -------- Buttons -------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:13px 26px; /* brand-700 (not brand) so white text clears WCAG AA 4.5:1 */ background:var(--brand-700);color:#fff;font-family:var(--body);font-weight:600;font-size:16px; border:0;border-radius:var(--radius-sm);box-shadow:var(--shadow-cta); cursor:pointer;transition:background .15s ease,transform .15s ease; text-decoration:none; } .btn:hover{background:var(--brand-800);text-decoration:none;transform:translateY(-1px);} .btn:active{transform:translateY(0);} .btn.ghost{ background:transparent;color:var(--brand-700);box-shadow:none; border:2px solid var(--brand);padding:11px 24px; } .btn.ghost:hover{background:var(--brand-tint);} .btn.on-dark{background:#fff;color:var(--brand-700);} .btn.on-dark:hover{background:#eafaf7;} /* On the dark teal closer band: a real outlined white button (was invisible — .on-dark's white fill was overriding .ghost's transparent). */ .btn.ghost.on-dark{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:none;} .btn.ghost.on-dark:hover{background:rgba(255,255,255,.14);} .btn.sm{min-height:42px;padding:10px 18px;font-size:15px;} .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;} .cta-row .note{font-size:13px;color:var(--muted);} /* Inline contact line under CTAs */ .reach{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.7;} .reach a{color:var(--brand-700);font-weight:500;text-decoration:underline;text-underline-offset:2px; display:inline-flex;align-items:center;min-height:44px;padding:0 2px;} /* -------- Sticky top nav ------------------------------------------------- */ .site-nav{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .site-nav .nav-inner{ max-width:var(--maxw);margin:0 auto;padding:0 22px; height:var(--nav-h);display:flex;align-items:center;gap:18px; } .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);} .brand:hover{text-decoration:none;} .logo{ width:38px;height:38px;border-radius:11px;flex-shrink:0;overflow:hidden; background:linear-gradient(140deg,#14b8a6,var(--brand-700)); color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--head);font-weight:800;font-size:14px;line-height:1;letter-spacing:.5px; box-shadow:0 5px 14px rgba(13,148,136,.32); } .brand b{font-family:var(--head);font-size:16px;font-weight:800;display:block;line-height:1.1;} .brand span:not(.logo){display:block;font-size:11.5px;color:var(--muted);line-height:1.2;} .nav-links{display:flex;align-items:center;gap:6px;margin-left:auto;} .nav-links a{ color:var(--ink);font-weight:500;font-size:15px; padding:9px 12px;border-radius:9px;transition:background .12s,color .12s; } .nav-links a:hover{background:var(--brand-tint);color:var(--brand-700);text-decoration:none;} .nav-links a[aria-current="page"]{color:var(--brand-700);font-weight:600;background:var(--brand-tint);} /* white text wins over .nav-links a's ink color — the nav CTA must read on teal (WCAG AA) */ .nav-links .btn{margin-left:6px;color:#fff;} .nav-links a.btn:hover{color:#fff;} /* Mobile menu (CSS-only via checkbox) */ .nav-toggle,.nav-toggle-label{display:none;} /* -------- Hero ----------------------------------------------------------- */ .hero{padding:64px 0 44px;position:relative;overflow:hidden;} .hero .eyebrow{color:var(--brand-700);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.07em;} .hero h1{font-size:46px;margin:14px 0 16px;max-width:18ch;} .hero p.tag{font-size:20px;color:var(--muted);max-width:56ch;margin:0 0 26px;} /* subtle radial brand wash behind the hero */ .hero-pattern{position:relative;} .hero-pattern::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(60% 80% at 85% -10%, rgba(13,148,136,.10), transparent 60%), radial-gradient(50% 70% at 0% 0%, rgba(20,184,166,.07), transparent 55%); } /* -------- Split hero w/ product mockup (home) --------------------------- */ .hero-split{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center;} .hero-visual{display:flex;justify-content:center;} .hero-phone{ width:266px;background:#fff;border-radius:34px;overflow:hidden; box-shadow:0 34px 70px rgba(16,38,58,.18),0 0 0 9px #0b1622; } .hp-head{padding:22px 14px 11px;text-align:center;border-bottom:1px solid #eef2f3;} .hp-av{width:38px;height:38px;border-radius:50%;margin:0 auto 6px; background:linear-gradient(140deg,#14b8a6,var(--brand-700));color:#fff; display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:15px;} .hp-name{font-weight:600;font-size:13.5px;color:var(--ink);} .hp-status{font-size:11px;color:var(--brand);} .hp-thread{padding:13px;display:flex;flex-direction:column;gap:8px;} .hp-divider{text-align:center;font-size:10.5px;color:var(--muted);margin:2px 0;} .hb{max-width:84%;padding:8px 12px;border-radius:15px;font-size:12.5px;line-height:1.42;animation:hbpop .4s both;} .hb.in{align-self:flex-start;background:#eef1f3;color:var(--ink);border-bottom-left-radius:5px;} .hb.out{align-self:flex-end;background:var(--brand-700);color:#fff;border-bottom-right-radius:5px;} .hb:nth-child(2){animation-delay:.15s}.hb:nth-child(3){animation-delay:.5s} .hb:nth-child(4){animation-delay:.85s}.hb:nth-child(5){animation-delay:1.2s} @keyframes hbpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @media(max-width:860px){ .hero-split{grid-template-columns:1fr;gap:28px;} .hero-visual{display:none;} /* keep the mobile hero tight; demo is one tap away */ } /* -------- Cards ---------------------------------------------------------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;} .cards.two{grid-template-columns:repeat(2,1fr);} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:24px;box-shadow:var(--shadow-sm);transition:box-shadow .18s,transform .18s,border-color .18s; } .card.hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--brand-tint-2);} .card .n,.card .ico{ width:36px;height:36px;border-radius:10px;background:var(--brand-tint);color:var(--brand-700); display:grid;place-items:center;font-family:var(--head);font-weight:700;margin-bottom:14px; } .card h3{font-size:18px;margin-bottom:6px;} .card p{color:var(--muted);font-size:15px;margin:0;} /* -------- Panels / trust / founder -------------------------------------- */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm);} .checklist{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;} .checklist li{padding-left:28px;position:relative;color:var(--muted);} .checklist li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--brand);font-weight:700;} .founder{display:flex;gap:28px;align-items:flex-start;} .founder-photo{ flex-shrink:0;width:96px;height:96px;border-radius:16px; background:linear-gradient(140deg,#14b8a6,var(--brand-700)); display:flex;align-items:center;justify-content:center; color:#fff;font-family:var(--head);font-size:32px;font-weight:800;letter-spacing:.02em; box-shadow:0 6px 16px rgba(13,148,136,.30); } .founder-copy h3{font-size:20px;margin-bottom:6px;} .founder-copy p{color:var(--muted);font-size:15px;margin:0 0 10px;} .founder-copy .founder-contact{font-size:14px;color:var(--muted);} .founder-copy .founder-contact a{color:var(--brand-700);font-weight:500;} /* -------- Testimonial placeholder (clearly labeled) --------------------- */ .testimonial-placeholder{ background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--brand); border-radius:0 16px 16px 0;padding:26px 28px;margin:8px 0 0; } .testimonial-placeholder blockquote{margin:0;font-size:18px;font-style:italic;color:#4a6475;line-height:1.55;} .testimonial-placeholder cite{display:block;margin-top:12px;font-size:14px;font-weight:600;font-style:normal;color:var(--brand-700);} .placeholder-label{display:inline-block;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--brand-tint);color:var(--brand-700);padding:3px 10px;border-radius:6px;} /* -------- Badges / pills ------------------------------------------------- */ .pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--brand-800); background:var(--brand-tint);border:1px solid var(--brand-tint-2);padding:7px 13px;border-radius:999px;} /* -------- Closer (dark gradient CTA band) ------------------------------- */ .closer{ background:linear-gradient(140deg,var(--brand-700),var(--brand)); color:#fff;border-radius:var(--radius-lg);padding:48px 40px;text-align:center;margin:8px 0; } .closer h2{color:#fff;font-size:30px;} .closer p{color:#d7f0ec;margin:8px auto 24px;max-width:50ch;font-size:17px;} .closer .reach{color:#bfe7e1;} .closer .reach a{color:#fff;} /* -------- Section inset (white panel between teal-bg sections) ----------- */ /* Replaces the repeated inline style="background:var(--surface);border-top/bottom…" */ .section-inset{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} /* -------- Footer --------------------------------------------------------- */ .site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:24px;} .site-footer .foot-inner{ max-width:var(--maxw);margin:0 auto;padding:42px 22px 36px; display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px; } .site-footer .foot-brand b{font-family:var(--head);font-size:16px;} .site-footer .foot-brand p{color:var(--muted);font-size:14px;margin:10px 0 0;max-width:34ch;} .site-footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);margin-bottom:12px;} .site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;} .site-footer a{color:var(--muted);font-size:14px;} .site-footer a:hover{color:var(--brand-700);} /* Footer primary-action button — one clear styled CTA in the "Get in touch" column */ .site-footer .foot-cta{ display:inline-flex;align-items:center;min-height:44px; background:var(--brand-700);color:#fff;font-weight:600;font-size:13px; padding:8px 16px;border-radius:8px; text-decoration:none;transition:background .15s; } .site-footer .foot-cta:hover{background:var(--brand-800);color:#fff;text-decoration:none;} .foot-bottom{border-top:1px solid var(--line);} .foot-bottom .fb-inner{max-width:var(--maxw);margin:0 auto;padding:18px 22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted);font-size:13px;} /* -------- Responsive ----------------------------------------------------- */ @media(max-width:860px){ .site-footer .foot-inner{grid-template-columns:1fr 1fr;} .site-footer .foot-brand{grid-column:1 / -1;} } @media(max-width:720px){ section{padding:42px 0;} h2{font-size:26px;} .sub{font-size:16px;} /* Bigger tap targets for the inline phone/email links on mobile */ .reach{line-height:1.4;} .hero{padding:44px 0 32px;} .hero h1{font-size:33px;} .hero p.tag{font-size:17px;} .cards,.cards.two{grid-template-columns:1fr;} .checklist{grid-template-columns:1fr;} .founder{flex-direction:column;gap:18px;} .founder-photo{width:72px;height:72px;font-size:10px;} .closer{padding:36px 24px;} .closer h2{font-size:25px;} .founder-photo{font-size:24px;} /* Mobile nav: hide inline links, show toggle that reveals a stacked menu */ .nav-toggle-label{ display:flex;align-items:center;justify-content:center;margin-left:auto; width:44px;height:44px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface); } .nav-toggle-label span{position:relative;width:20px;height:2px;background:var(--ink);display:block;} .nav-toggle-label span::before,.nav-toggle-label span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);} .nav-toggle-label span::before{top:-6px;} .nav-toggle-label span::after{top:6px;} .nav-links{ position:absolute;left:0;right:0;top:var(--nav-h); flex-direction:column;align-items:stretch;gap:4px; background:var(--surface);border-bottom:1px solid var(--line); padding:12px 16px 18px;margin-left:0; box-shadow:var(--shadow-md); display:none; } .nav-toggle:checked ~ .nav-links{display:flex;} .nav-links a{padding:12px 14px;font-size:16px;} .nav-links .btn{margin-left:0;width:100%;} } /* -------- Reduced motion ------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;} }