/* ============================================================ Ajé Intelligent InsurTech — brand system Light mode only · sole accent #0B6E4F (Nigerian green) Outfit (display + body) · JetBrains Mono (data) Fonts (Outfit + JetBrains Mono) are preconnected and loaded via a in the document for a faster LCP than a CSS @import. ============================================================ */ :root { /* neutrals */ --white: #ffffff; --paper: #fbfcfb; /* near-white canvas */ --mist: #f4f7f5; /* faint green-grey surface */ --line: #e6ece8; --line-2: #d6ded9; --ink: #0e1a15; /* near-black, faint green undertone */ --ink-70: #33433c; --ink-55: #566159; /* was too green -> muted */ --ink-45: #6b766f; --ink-30: #9aa39d; /* the sole accent + tints of the same hue */ --green: #0B6E4F; --green-700: #095a41; --green-600: #0a6549; --green-300: #7fb5a2; --green-100: #d8ebe3; --green-050: #eef6f2; --green-025: #f5faf7; /* type */ --sans: 'Outfit', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* geometry */ --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px; --maxw: 1180px; --pad: clamp(20px, 5vw, 56px); --shadow-sm: 0 1px 2px rgba(14,26,21,.05); --shadow: 0 6px 24px -10px rgba(14,26,21,.14), 0 2px 8px -4px rgba(14,26,21,.08); --shadow-lg: 0 34px 64px -26px rgba(11,110,79,.28), 0 14px 30px -16px rgba(14,26,21,.14); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--green); color: #fff; } img, svg { display: block; max-width: 100%; } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-700); } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .narrow { max-width: 940px; } .eyebrow { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: .6rem; } .eyebrow::before { content: ""; width: 20px; height: 1.5px; background: var(--green); opacity: .6; } .eyebrow.center { justify-content: center; } .eyebrow.center::before { display: none; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; color: var(--ink); text-wrap: balance; } .display { font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; } .h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); letter-spacing: -.03em; } .h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); letter-spacing: -.02em; } .lead { font-size: clamp(1.06rem, 1.4vw, 1.28rem); color: var(--ink-55); line-height: 1.55; font-weight: 400; text-wrap: pretty; } .muted { color: var(--ink-45); } .num { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .accent { color: var(--green); } /* ---------- buttons ---------- */ .btn { --bh: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: var(--bh); padding: 0 1.25rem; border-radius: 10px; font-family: inherit; font-size: .98rem; font-weight: 500; letter-spacing: -.01em; border: 1.5px solid transparent; cursor: pointer; transition: transform .16s cubic-bezier(.2,.7,.3,1), background .18s, border-color .18s, box-shadow .18s, color .18s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--green-700); color: #fff; box-shadow: 0 10px 26px -12px rgba(11,110,79,.7); } .btn-ghost { background: var(--white); color: var(--green); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--green-300); color: var(--green-700); } .btn .arr { transition: transform .2s; } .btn:hover .arr { transform: translateX(3px); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.scrolled { border-color: var(--line); background: color-mix(in srgb, var(--paper) 92%, transparent); } .nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; } .brand { display: inline-flex; align-items: center; gap: .58rem; font-weight: 600; letter-spacing: -.03em; font-size: 1.32rem; color: var(--ink); } .brand .mark { flex: 0 0 auto; } .brand small { font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); margin-top: .35rem; } .nav-links { display: flex; gap: .1rem; margin-left: .6rem; } .nav-links a { font-size: .93rem; font-weight: 400; color: var(--ink-55); padding: .45rem .72rem; border-radius: 8px; transition: color .15s, background .15s; } .nav-links a:hover { color: var(--ink); background: var(--mist); } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: .55rem; } .nav-cta .btn { --bh: 42px; font-size: .92rem; } @media (max-width: 940px) { .nav-links { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { padding-top: clamp(52px, 8vw, 104px); padding-bottom: clamp(40px, 5vw, 64px); text-align: center; overflow: clip; } .hero .eyebrow { margin-bottom: 1.5rem; } .hero h1 { max-width: 15ch; margin-inline: auto; } .hero .lead { max-width: 44ch; margin: 1.6rem auto 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2.2rem; } .hero-note { margin-top: 1.2rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-30); } /* ---------- abstract dashboard mock ---------- */ .mock-wrap { margin-top: clamp(40px, 6vw, 76px); position: relative; } .mock { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; } .mock-top { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--green-025); } .mock-dots { display: flex; gap: 6px; } .mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: block; } .mock-tab { margin-left: .4rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-45); } .mock-live { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .68rem; color: var(--green); letter-spacing: .08em; text-transform: uppercase; } .mock-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(11,110,79,.5); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(11,110,79,.5); } 70% { box-shadow: 0 0 0 8px rgba(11,110,79,0); } 100% { box-shadow: 0 0 0 0 rgba(11,110,79,0); } } .mock-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px; background: var(--line); } @media (max-width: 720px) { .mock-body { grid-template-columns: 1fr; } } .mock-pane { background: var(--white); padding: 1.3rem 1.4rem; } .mock-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-45); } /* loss-ratio gauge */ .gauge-head { display: flex; align-items: baseline; justify-content: space-between; } .gauge { margin: 1rem auto .2rem; width: 180px; } .gauge-val { text-align: center; margin-top: -58px; margin-bottom: 30px; } .gauge-val .v { font-family: var(--mono); font-size: 1.85rem; font-weight: 600; color: var(--green); letter-spacing: -.03em; line-height: 1; } .gauge-val .k { font-size: .72rem; color: var(--ink-45); margin-top: .25rem; } .gauge-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .66rem; color: var(--ink-30); margin-top: .2rem; } /* routing flow */ .flow { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.1rem; } .flow-row { display: flex; align-items: center; gap: .7rem; } .flow-row .chip { font-family: var(--mono); font-size: .68rem; font-weight: 500; padding: .28rem .55rem; border-radius: 7px; white-space: nowrap; } .chip.clean { background: var(--green-050); color: var(--green-700); border: 1px solid var(--green-100); } .chip.exc { background: var(--mist); color: var(--ink-55); border: 1px solid var(--line-2); } .flow-row .track { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); } .flow-row .track.on { background: repeating-linear-gradient(90deg, var(--green-300) 0 6px, transparent 6px 12px); } .flow-row .end { font-family: var(--mono); font-size: .68rem; color: var(--ink-45); white-space: nowrap; } .flow-row .end.stp { color: var(--green); font-weight: 500; } .mock-mini { margin-top: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .mini { border: 1px solid var(--line); border-radius: 10px; padding: .65rem .75rem; } .mini .k { font-size: .64rem; color: var(--ink-45); text-transform: uppercase; letter-spacing: .08em; } .mini .v { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-top: .2rem; } .mini .v.g { color: var(--green); } .floaty { position: absolute; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .55rem .75rem; display: flex; align-items: center; gap: .55rem; font-size: .82rem; font-weight: 500; color: var(--ink-70); } .floaty .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; background: var(--green-050); color: var(--green); } @media (max-width: 720px) { .floaty { display: none; } } /* ============================================================ SECTION SCAFFOLD ============================================================ */ .section { padding-block: clamp(64px, 9vw, 128px); } .section-head { max-width: 720px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head .h2 { margin-top: 1rem; } .section-head p { margin-top: 1.1rem; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* problem */ .pain-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); } @media (max-width: 780px) { .pain-grid { grid-template-columns: 1fr; } } .pain { border-top: 2px solid var(--green); padding-top: 1.1rem; } .pain .idx { font-family: var(--mono); font-size: .72rem; color: var(--green); letter-spacing: .1em; } .pain h3 { margin-top: .7rem; font-size: 1.22rem; } .pain p { margin-top: .55rem; color: var(--ink-55); font-size: .96rem; } .loss-callout { margin-top: 3rem; border: 1px solid var(--green-100); background: var(--green-025); border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 44px); display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; } .loss-callout .big { font-family: var(--mono); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; color: var(--green); letter-spacing: -.03em; line-height: 1; } .loss-callout .big small { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-45); margin-top: .5rem; } .loss-callout .say { flex: 1; min-width: 260px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; color: var(--ink); line-height: 1.35; } /* ============================================================ PLATFORM GRID ============================================================ */ .mod-grid { margin-top: 3.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .mod-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mod-grid { grid-template-columns: 1fr; } } .mod { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.4rem 1.5rem; transition: border-color .2s, box-shadow .2s, transform .2s; } .mod:hover { border-color: var(--green-100); box-shadow: var(--shadow); transform: translateY(-3px); } .mod .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--green-050); border: 1px solid var(--green-100); display: grid; place-items: center; color: var(--green); } .mod .ic svg { width: 22px; height: 22px; } .mod h3 { margin-top: 1.1rem; font-size: 1.12rem; font-weight: 600; } .mod p { margin-top: .55rem; color: var(--ink-55); font-size: .94rem; line-height: 1.5; } .mod .no { font-family: var(--mono); font-size: .68rem; color: var(--ink-30); float: right; } /* ============================================================ HOW IT WORKS — trust pillars ============================================================ */ .pillars { margin-top: 3.2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } } .pillar { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.7rem 1.7rem; position: relative; } .pillar .tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); } .pillar h3 { margin-top: .7rem; font-size: 1.28rem; } .pillar p { margin-top: .7rem; color: var(--ink-55); font-size: .98rem; line-height: 1.55; } .pillar .diagram { margin-top: 1.2rem; } /* mini diagram bits (single accent only) */ .iso { display: flex; gap: 6px; } .iso .lane { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: .5rem; text-align: center; font-family: var(--mono); font-size: .64rem; color: var(--ink-45); background: var(--green-025); } .iso .lane b { display: block; color: var(--green); font-size: .72rem; margin-bottom: .2rem; } .iso .wall { width: 2px; background: var(--green-100); border-radius: 2px; } .gate { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .7rem; } .gate .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--mist); overflow: hidden; border: 1px solid var(--line); position: relative; } .gate .bar i { position: absolute; inset: 0 auto 0 0; width: 88%; background: var(--green); opacity: .85; border-radius: 999px; } .gate .bar .thr { position: absolute; top: -3px; bottom: -3px; left: 88%; width: 2px; background: var(--ink); } .gate .lab { color: var(--ink-45); white-space: nowrap; } .kobo { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .82rem; color: var(--ink-55); flex-wrap: wrap; } .kobo .val { color: var(--green); font-weight: 600; } .kobo .x { color: var(--ink-30); } .ledger { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: .68rem; } .ledger .ev { display: flex; align-items: center; gap: .55rem; color: var(--ink-55); padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 7px; background: var(--green-025); } .ledger .ev .h { color: var(--green); } .ledger .ev .lock { margin-left: auto; color: var(--ink-30); } /* ============================================================ BUILT FOR NIGERIA ============================================================ */ .ng { background: var(--mist); } .ng-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 760px) { .ng-grid { grid-template-columns: 1fr; } } .ng-item { display: flex; gap: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem 1.45rem; } .ng-item .ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--green-050); border: 1px solid var(--green-100); display: grid; place-items: center; color: var(--green); } .ng-item .ic svg { width: 20px; height: 20px; } .ng-item h3 { font-size: 1.08rem; font-weight: 600; } .ng-item p { margin-top: .4rem; color: var(--ink-55); font-size: .93rem; line-height: 1.5; } /* ============================================================ SECURITY STRIP ============================================================ */ .sec { } .sec-list { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); } @media (max-width: 900px) { .sec-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .sec-list { grid-template-columns: 1fr; } } .sec-item { padding: 1.4rem 1.3rem; border-right: 1px solid var(--line); } .sec-item:last-child { border-right: 0; } @media (max-width: 900px) { .sec-item { border-bottom: 1px solid var(--line); } } .sec-item .ic { color: var(--green); } .sec-item .ic svg { width: 24px; height: 24px; } .sec-item h4 { margin-top: .8rem; font-size: 1rem; font-weight: 600; } .sec-item p { margin-top: .35rem; font-size: .86rem; color: var(--ink-55); line-height: 1.45; } /* ============================================================ CTA / DEMO FORM ============================================================ */ .cta { } .cta-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 880px) { .cta-grid { grid-template-columns: 1fr; } } .cta-copy .lead { margin-top: 1.2rem; } .cta-copy .reassure { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .8rem; } .cta-copy .reassure .r { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--ink-70); } .cta-copy .reassure .r .tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: var(--green-050); border: 1px solid var(--green-100); display: grid; place-items: center; color: var(--green); margin-top: .05rem; } .form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow); } .form-row { margin-bottom: 1.1rem; } .form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 480px) { .form-row.two { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; } .field label { font-size: .82rem; font-weight: 500; color: var(--ink-70); margin-bottom: .4rem; } .field label .req { color: var(--green); } .field input, .field select { height: 48px; padding: 0 .85rem; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--white); font-family: inherit; font-size: .96rem; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b766f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.2rem; } .field input:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-050); } .field input::placeholder { color: var(--ink-30); } .field .err { font-size: .76rem; color: var(--green-700); margin-top: .35rem; display: none; } .field.invalid input, .field.invalid select { border-color: var(--green-700); } .field.invalid .err { display: block; } .form-card .btn { width: 100%; margin-top: .4rem; } .form-foot { margin-top: 1rem; font-size: .78rem; color: var(--ink-45); text-align: center; } .form-success { text-align: center; padding: 1.5rem 0; } .form-success .ic { width: 54px; height: 54px; border-radius: 50%; background: var(--green-050); border: 1px solid var(--green-100); display: grid; place-items: center; color: var(--green); margin: 0 auto 1rem; } .form-success h3 { font-size: 1.3rem; } .form-success p { margin-top: .6rem; color: var(--ink-55); font-size: .95rem; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px) 2.2rem; } .foot-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; } .foot-brand .lead { font-size: .92rem; margin-top: .9rem; max-width: 34ch; color: var(--ink-55); } .foot-links { display: flex; gap: 2.4rem; flex-wrap: wrap; } .foot-col h4 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-45); font-weight: 600; font-family: var(--mono); margin-bottom: .8rem; } .foot-col a { display: block; padding: .26rem 0; color: var(--ink-55); font-size: .92rem; } .foot-col a:hover { color: var(--green); } .foot-bottom { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--ink-45); } .foot-bottom .mono { font-family: var(--mono); font-size: .78rem; } /* ============================================================ reveal ============================================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .06s; } .reveal[data-d="2"] { transition-delay: .12s; } .reveal[data-d="3"] { transition-delay: .18s; } .reveal[data-d="4"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .mock-live .pulse { animation: none; } }