/* ============================================================ CAPLIFI CORE — unified design system (v1, 2026-07) One stylesheet for every caplifi.com page. Per-brand theming via . ============================================================ */ :root{ /* Caplifi master palette — BRAND.md v0.3 */ --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:#E8E9EA; --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); /* Brand type: Michroma/Orbitron display · IBM Plex Sans body · Plex Mono */ --disp:'Michroma','Orbitron','Questrial',system-ui,sans-serif; --body:'IBM Plex Sans',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; transition:background .2s ease,box-shadow .2s ease,border-color .2s ease,padding .2s ease; } /* Award pattern: sticky nav densifies on scroll (readable over content, not just chrome) */ header.site.is-scrolled{ background:rgba(12,16,28,.96); border-color:rgba(216,235,249,.18); box-shadow:0 12px 40px rgba(0,0,0,.35); padding:8px 14px; } .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:12px;letter-spacing:.18em;color:var(--ice);line-height:1.15} .brand-text .tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;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,background .15s ease,border-color .15s ease,filter .15s ease; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px} .btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:#0a3266;box-shadow:0 8px 24px rgba(11,58,115,.28);color:#fff} /* Primary action = blue (WCAG). Brass as filled CTA uses ink on brass for contrast. */ .btn-brass{background:var(--brass);color:var(--ink)} .btn-brass:hover{filter:brightness(1.06);box-shadow:0 8px 24px rgba(182,135,42,.32);color:var(--ink)} .btn-accent{background:var(--accent);color:#fff} .btn-ghost{background:transparent;color:var(--ice);border-color:var(--line)} .btn-ghost:hover{border-color:rgba(216,235,249,.35);background:rgba(216,235,249,.06);color:#fff} .btn-ghost-dark{background:transparent;color:var(--blue);border-color:var(--line-dark)} .btn-ghost-dark:hover{border-color:rgba(11,58,115,.35);background:rgba(11,58,115,.04)} .btn-ice{background:var(--ice);color:var(--blue)} .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .hero-cta{margin:8px 0 8px} .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:var(--green);border:1px solid rgba(84,169,54,.4)} .dark .badge-ships{color:#a8e08a} .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)} .ice-bg .badge-status,.light-surface .badge-status,.mod-card .badge-status{ background:rgba(11,58,115,.08);color:var(--blue);border-color:rgba(11,58,115,.18) } .ice-bg .badge-ships,.light-surface .badge-ships,.mod-card .badge-ships{ color:#33701e } /* ---------- 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}} /* Ditto/Linear reshape — product-forward hero strip */ .linear-strip{ padding:clamp(64px,10vw,96px) 20px; background:#080a11; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .linear-strip .wrap{max-width:1180px} .linear-strip h2{ font-family:var(--disp); font-size:clamp(2.4rem,6.5vw,4rem); line-height:1.05; letter-spacing:-.03em; font-weight:400; color:var(--ice); margin:0 0 20px; max-width:14ch; } .linear-strip .subhead{ font-family:var(--mono); font-size:clamp(.9rem,1.6vw,.98rem); color:rgba(232,233,234,.62); letter-spacing:-.02em; max-width:42ch; margin:0 0 36px; line-height:1.55; } .linear-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; } .linear-feature{ background:#0c0f18; padding:28px 24px; min-height:180px; } .linear-feature h3{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:0 0 12px; } .linear-feature p{ font-size:15px; line-height:1.55; color:rgba(232,233,234,.78); margin:0; } .linear-feature .feat-lede{ font-family:var(--disp); font-size:1.35rem; color:var(--ice); margin:0 0 10px; letter-spacing:-.01em; } @media (max-width:860px){ .linear-features{grid-template-columns:1fr} .linear-strip h2{max-width:none} } .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(--ice)} .pillar:nth-child(3){border-top-color:var(--brass)} .pillar h3{font-size:15px;color:var(--ice);margin-bottom:6px;font-family:var(--disp);letter-spacing:.04em} .pillar p{font-size:13.5px;color:rgba(232,233,234,.7);margin:0} /* Build products band */ .product-band{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px; } @media (max-width:900px){.product-band{grid-template-columns:1fr}} .product-card{ background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px;display:flex;flex-direction:column;gap:8px; } .product-card .mod-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--brass);text-transform:uppercase;margin:0} .product-card h3{font-size:1.25rem;margin:0;font-family:var(--disp);letter-spacing:.02em} .product-card h3 a{text-decoration:none;color:var(--ice)} .product-card h3 a:hover{color:#fff} .product-card p{margin:0;font-size:14.5px;color:rgba(232,233,234,.74);flex:1} .product-card .row{margin-top:12px;gap:10px} /* Camelot lead product band (apex) */ .camelot-band{ padding:clamp(56px,8vw,88px) 20px; background: radial-gradient(ellipse 70% 55% at 85% 10%,rgba(182,135,42,.16),transparent 55%), linear-gradient(165deg,#080a11 0%,#0c1020 45%,#0d1428 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--gray); } .camelot-band-grid{ display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center; max-width:1080px;margin:0 auto; } .camelot-band-title-row{ display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 8px; } .camelot-band-title-row h2{ font-family:var(--disp);font-size:clamp(2rem,5vw,2.75rem);font-weight:400; letter-spacing:-.02em;color:var(--ice);margin:0;line-height:1.05; } .camelot-band-h1{ font-family:var(--disp);font-size:clamp(1.35rem,3.2vw,1.75rem); color:var(--brass);margin:0 0 16px;letter-spacing:-.01em;line-height:1.2; } .camelot-band .lede{color:rgba(232,233,234,.86)} .camelot-band .sub{color:rgba(232,233,234,.72)} .camelot-band .tiny a{color:var(--ice);text-underline-offset:3px} .camelot-band-card{border-color:rgba(182,135,42,.28)} .mod-card-lead{ border-color:rgba(182,135,42,.35); box-shadow:0 0 0 1px rgba(182,135,42,.12); } .mod-card-lead .mod-tag{color:var(--brass)} @media (max-width:900px){ .camelot-band-grid{grid-template-columns:1fr;gap:28px} } /* Six divisions strip */ .div-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px; } @media (max-width:900px){.div-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.div-grid{grid-template-columns:1fr}} .div-card{ background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg); padding:20px;display:flex;flex-direction:column;gap:8px; transition:transform .18s ease,box-shadow .18s ease; } .div-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)} @media (prefers-reduced-motion:reduce){.div-card:hover{transform:none}} .div-card img{width:48px;height:48px;object-fit:contain} .div-card h3{font-size:15px;margin:0;font-family:var(--disp);letter-spacing:.03em;color:var(--ink)} .div-card p{margin:0;font-size:13.5px;color:rgba(18,23,36,.68)} .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; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .mod-card:hover,.mod-card:focus-within{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(11,58,115,.1); border-color:rgba(11,58,115,.22); } @media (prefers-reduced-motion:reduce){ .mod-card:hover,.mod-card:focus-within{transform:none} } .mod-card .mod-glyph{width:40px;height:40px;margin-bottom:12px} .mod-card h3{font-size:15px;margin:0 0 6px} .mod-card h3 a{text-decoration:none;color:inherit} .mod-card h3 a:hover{color:var(--blue)} .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} .mod-card .btn{margin-top:14px;align-self:flex-start} .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(--blue)} .dark .check-list li{color:rgba(232,233,234,.78);border-top-color:var(--line)} .dark .check-list li::before{background:var(--ice)} .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);margin-bottom:12px} .cta-band .sub{color:rgba(232,233,234,.74);max-width:52ch;margin:0 auto 24px} .cta-band .eyebrow{color:var(--brass)} .cta-band .cta-row{justify-content:center} .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)}