/* ============================================================ CAPLIFI CORE — unified design system (v1, 2026-07) One stylesheet for every caplifi.com page. Per-brand theming via . ============================================================ */ :root{ /* Caplifi master palette */ --blue:#0B3A73; --ice:#D8EBF9; --brass:#B6872A; --green:#54A936; --ink:#121724; --gray:#E8E9EA; --panel:#19203a; --muted:#5d6778; --line:rgba(216,235,249,.12); --line-dark:rgba(11,58,115,.14); --paper:#f4f9fd; --aurora:linear-gradient(180deg,#0B3A73 0%,#1D5663 45%,#54A936 80%,#121724 100%); /* brand accent — overridden per sub-brand */ --accent:var(--brass); --accent-ink:#8a6420; --accent-soft:rgba(182,135,42,.14); --accent-line:rgba(182,135,42,.35); --disp:'Questrial','TeX Gyre Adventor','Century Gothic',sans-serif; --body:'Poppins',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --r-lg:18px; --r-md:14px; --r-sm:10px; --shadow-card:0 8px 32px rgba(11,58,115,.06); --shadow-float:0 20px 56px rgba(8,12,22,.35); } /* Sub-brand accents (marks + hero tints pick these up) */ body[data-brand="camelot"]{--accent:#B6872A;--accent-ink:#8a6420;--accent-soft:rgba(182,135,42,.14);--accent-line:rgba(182,135,42,.4)} body[data-brand="verify"]{--accent:#2F7FBF;--accent-ink:#0B3A73;--accent-soft:rgba(47,127,191,.12);--accent-line:rgba(47,127,191,.38)} body[data-brand="dtrust"]{--accent:#6E5BC4;--accent-ink:#493a92;--accent-soft:rgba(110,91,196,.12);--accent-line:rgba(110,91,196,.38)} body[data-brand="ground-truth"]{--accent:#54A936;--accent-ink:#33701e;--accent-soft:rgba(84,169,54,.13);--accent-line:rgba(84,169,54,.4)} body[data-brand="collaborate"]{--accent:#1D8FA8;--accent-ink:#135e6e;--accent-soft:rgba(29,143,168,.12);--accent-line:rgba(29,143,168,.38)} body[data-brand="brandmd"]{--accent:#B6872A;--accent-ink:#8a6420;--accent-soft:rgba(182,135,42,.14);--accent-line:rgba(182,135,42,.4)} /* ---------- reset / base ---------- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth;scroll-padding-top:96px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important} } html,body{margin:0;padding:0} body{ font-family:var(--body);font-size:16px;line-height:1.65;color:var(--ink); background:var(--paper); } body.dark-page{background:#080a11} a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:#083058} :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px} img,svg{max-width:100%;display:block} button{font-family:var(--body);cursor:pointer} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--brass);color:#fff;padding:12px 20px;border-radius:0 0 10px 0; font-weight:600;text-decoration:none; } .skip-link:focus{left:0} /* ---------- header ---------- */ header.site{ position:sticky;top:max(10px,env(safe-area-inset-top,0px));z-index:50; margin:0 14px;max-width:1120px;margin-left:auto;margin-right:auto; background:rgba(18,23,36,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:16px;padding:10px 14px; display:flex;align-items:center;gap:12px; } .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-height:44px} .brand svg,.brand img{width:40px;height:40px;flex-shrink:0} .brand-text .name{font-family:var(--disp);font-size:13px;letter-spacing:.22em;color:var(--ice);line-height:1.1} .brand-text .tag{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--brass);margin-top:3px} .brand-text .tag.sub{color:var(--accent);letter-spacing:.18em} .hsp{flex:1} nav.primary{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end} nav.primary a{ font-size:13px;color:rgba(232,233,234,.75);text-decoration:none; padding:11px 12px;border-radius:9px;font-weight:500;min-height:44px; display:inline-flex;align-items:center; } nav.primary a:hover,nav.primary a:focus-visible{background:rgba(216,235,249,.09);color:var(--ice)} nav.primary a[aria-current="page"]{color:var(--ice);background:rgba(216,235,249,.07)} .menu-btn{ display:none;border:1px solid var(--line);background:var(--panel);border-radius:9px; padding:10px 14px;font-size:13px;font-weight:600;color:var(--ice);min-height:44px; } @media (max-width:960px){ nav.primary{ display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column; background:rgba(18,23,36,.98);border:1px solid var(--line);border-radius:14px;padding:10px; box-shadow:var(--shadow-float); } nav.primary.open{display:flex} nav.primary a{width:100%;padding:14px 16px;font-size:15px} .menu-btn{display:inline-flex;align-items:center} } /* ---------- layout primitives ---------- */ main{display:block} section{padding:clamp(52px,8vw,76px) 20px} .wrap{max-width:1080px;margin:0 auto} .narrow{max-width:720px;margin:0 auto} .center{text-align:center} .mt{margin-top:14px}.mt24{margin-top:24px}.mt32{margin-top:32px} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent-ink); margin:0 0 14px;text-transform:uppercase; } .dark .eyebrow,.dark-page .eyebrow{color:var(--accent)} .eyebrow.blue{color:var(--blue)} h1{font-family:var(--disp);font-size:clamp(2.05rem,6vw,3.4rem);line-height:1.07;margin:0 0 18px;font-weight:400;letter-spacing:-.01em;text-wrap:balance} h2{font-family:var(--disp);font-size:clamp(1.55rem,3.4vw,2.3rem);margin:0 0 12px;font-weight:400;letter-spacing:-.01em;text-wrap:balance} h3{font-size:17px;margin:0 0 8px;font-weight:600} .lede{font-size:clamp(1.05rem,2.2vw,1.16rem);color:rgba(18,23,36,.74);margin:0 0 16px;max-width:62ch} .sub{font-size:15px;color:rgba(18,23,36,.7)} .tiny{font-size:12.5px;color:rgba(18,23,36,.62)} /* ---------- surfaces ---------- */ .card{background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card)} .ice-bg{background:var(--ice)} .light-surface{background:var(--paper)} .dark{background:linear-gradient(165deg,#080a11 0%,var(--ink) 42%,#0d1428 100%);color:var(--gray)} .dark h1,.dark h2,.dark h3{color:var(--ice)} .dark .lede{color:rgba(232,233,234,.82)} .dark .sub{color:rgba(232,233,234,.72)} .dark .tiny{color:rgba(232,233,234,.58)} .dark a{color:var(--ice)} .dark .card{background:var(--panel);border-color:var(--line);color:var(--gray);box-shadow:none} .dark .card h3{color:var(--ice)} .dark .card p{color:rgba(232,233,234,.72)} /* ---------- buttons / badges ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:12px 24px;border-radius:12px;border:1.5px solid transparent; font-weight:600;font-size:14.5px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease; } .btn:hover{transform:translateY(-1px)} .btn:focus-visible{outline-offset:2px} .btn-blue{background:var(--blue);color:#fff} .btn-brass{background:var(--brass);color:#fff} .btn-accent{background:var(--accent);color:#fff} .btn-ghost{background:transparent;color:var(--ice);border-color:var(--line)} .btn-ghost-dark{background:transparent;color:var(--blue);border-color:var(--line-dark)} .btn-ice{background:var(--ice);color:var(--blue)} .badge{ display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em; border-radius:7px;padding:6px 11px;text-transform:uppercase;white-space:nowrap; } .badge-ships{background:rgba(84,169,54,.15);color:#8fd86a;border:1px solid rgba(84,169,54,.35)} .badge-dev{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line)} .dark .badge-dev{color:var(--accent)} .badge-status{background:rgba(216,235,249,.1);color:var(--ice);border:1px solid var(--line)} /* ---------- hero ---------- */ .hero{padding-top:96px;padding-bottom:72px;position:relative;overflow:hidden} .hero.dark{margin-top:calc(-1 * (64px + max(10px,env(safe-area-inset-top,0px))));padding-top:calc(170px + env(safe-area-inset-top,0px))} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;position:relative;z-index:1} .hero-copy .lede{color:rgba(232,233,234,.84)} .hero-visual{display:flex;align-items:center;justify-content:center} .hero-visual img,.hero-visual svg{max-height:min(52vw,380px);width:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.3))} .hero-veil{ position:absolute;inset:0;pointer-events:none;opacity:.5; background: radial-gradient(58% 44% at 78% 30%,rgba(29,86,99,.4),transparent 70%), radial-gradient(42% 38% at 18% 78%,rgba(11,58,115,.45),transparent 70%); } @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:26px} .hero-visual{order:-1} .hero-visual img,.hero-visual svg{max-height:150px} } @media (max-width:600px){ section{padding:44px 16px} .hero.dark{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:48px} } /* ---------- shared components ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px} @media (max-width:760px){.pillars{grid-template-columns:1fr}} .pillar{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;border-top:3px solid var(--blue)} .pillar:nth-child(2){border-top-color:var(--green)} .pillar:nth-child(3){border-top-color:var(--brass)} .pillar h3{font-size:15px;color:var(--ice);margin-bottom:6px} .pillar p{font-size:13.5px;color:rgba(232,233,234,.7);margin:0} .principles{max-width:780px;margin:0 auto} .principle{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-dark)} .principle:last-child{border-bottom:none} .principle-num{font-family:var(--mono);font-size:12px;color:var(--brass);min-width:30px;padding-top:3px} .principle p{margin:0;color:rgba(18,23,36,.7);font-size:15px} .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} @media (max-width:700px){.feat-grid{grid-template-columns:1fr}} .feat{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line-dark);background:#fff;height:100%} .feat h3{font-size:16px;margin-bottom:8px} .feat p{margin:0;font-size:14px;color:rgba(18,23,36,.7)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.steps{grid-template-columns:1fr}} .step{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line-dark);background:#fff;height:100%} .step-num{font-family:var(--mono);font-size:11px;color:var(--accent-ink);letter-spacing:.08em;margin-bottom:10px} .step p{margin:0;font-size:14px;color:rgba(18,23,36,.7)} .mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:900px){.mod-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.mod-grid{grid-template-columns:1fr}} .mod-card{padding:20px;border-radius:var(--r-lg);border:1px solid var(--line-dark);background:#fff;height:100%;display:flex;flex-direction:column} .mod-card .mod-glyph{width:40px;height:40px;margin-bottom:12px} .mod-card h3{font-size:15px;margin:0 0 6px} .mod-card p{margin:0;font-size:13.5px;color:rgba(18,23,36,.68);flex:1} .mod-card .mod-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--accent-ink);margin-bottom:8px;text-transform:uppercase} .check-list{list-style:none;padding:0;margin:24px 0 0} .check-list li{font-size:15px;padding:12px 0 12px 28px;position:relative;border-top:1px solid var(--line-dark);color:rgba(18,23,36,.74)} .check-list li:first-child{border-top:none} .check-list li::before{content:'';position:absolute;left:4px;top:17px;width:9px;height:9px;border-radius:2px;background:var(--green)} .dark .check-list li{color:rgba(232,233,234,.78);border-top-color:var(--line)} .stat-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px} .stat{background:rgba(216,235,249,.08);border:1px solid rgba(216,235,249,.16);border-radius:var(--r-md);padding:16px 20px;min-width:150px} .stat .num{font-family:var(--disp);font-size:26px;color:var(--ice)} .stat .lbl{font-size:12px;color:rgba(232,233,234,.66);margin-top:4px} .cta-band{padding:72px 20px;text-align:center;background:linear-gradient(165deg,#080a11 0%,var(--ink) 60%,#0d1428 100%);color:var(--gray)} .cta-band h2{color:var(--ice)} .cta-band .sub{color:rgba(232,233,234,.74);max-width:52ch;margin:0 auto 24px} .media-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-dark);background:#fff} .media-frame img{width:100%;height:auto} .media-frame figcaption{font-size:12.5px;color:rgba(18,23,36,.6);padding:10px 14px;border-top:1px solid var(--line-dark)} .pricing-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line-dark);background:#fff} .pricing-table{width:100%;border-collapse:collapse;font-size:14px} .pricing-table th,.pricing-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-dark)} .pricing-table th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:rgba(216,235,249,.35)} .pricing-table td.price{font-weight:600;color:var(--blue);white-space:nowrap} /* ---------- reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ---------- water-flow hero animation (home) ---------- */ @keyframes flowDash{to{stroke-dashoffset:-240}} .flow-line{stroke-dasharray:14 26;animation:flowDash 7s linear infinite} .flow-line.slow{animation-duration:11s} @media (prefers-reduced-motion:reduce){.flow-line{animation:none}} /* ---------- footer ---------- */ footer.site{ text-align:center;padding:52px 20px calc(48px + env(safe-area-inset-bottom)); background:var(--ink);color:rgba(232,233,234,.6);font-size:13px;border-top:1px solid var(--line); } footer.site .foot-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px} footer.site .foot-brand svg,footer.site .foot-brand img{width:34px;height:34px} footer.site .foot-brand .name{font-family:var(--disp);font-size:14px;letter-spacing:.22em;color:var(--ice)} footer.site a{text-decoration:none;color:var(--ice);font-weight:500;min-height:44px;display:inline-flex;align-items:center} .foot-links{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;margin:10px 0 14px} .mono{font-family:var(--mono)}