/* =================================================================== Clarifi site — shared chrome + section patterns (Quiver_v7 design) Palette + type sampled from Quiver_v7.pdf (Montserrat / Bree Serif). =================================================================== */ /* Fonts (Montserrat + Bree Serif) load via tags in each page's — an @import here would serialize an extra round trip behind this stylesheet. */ :root{ --coral:#ff9a80; --orange:#e9ab6a; --teal:#7ac9c9; --mint:#a8dfc6; --sage:#cad5a1; --gold:#e0c772; --navy:#062f5b; --navy-deep:#043d60; --blue:#3f7fb4; --ph:#c5c5c5; /* placeholder-copy gray */ --ph-box:#d9d9d9; /* placeholder image box */ --brand-orange:#F97316;/* brand hover color (from the clarifi-tech.com chrome) */ --brand-cyan:#13BADB; /* Nokryn gradient start */ --accent:var(--blue); /* homepage default; vertical pages override */ --font-body:'Montserrat',system-ui,sans-serif; --font-brand:'Bree Serif',Georgia,serif; } .v-healthcare{--accent:var(--coral)} .v-online-safety{--accent:var(--orange)} .v-law{--accent:var(--teal)} .v-defense{--accent:var(--mint)} .v-agriculture{--accent:var(--sage)} .v-security{--accent:var(--teal)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Always reserve the scrollbar gutter — tab panels differ in height, and a scrollbar appearing/disappearing on switch would shift the whole layout. */ html{-webkit-text-size-adjust:100%;overflow-y:scroll} body{ font-family:var(--font-body); font-size:15px; color:var(--navy); /* brand mesh background (ported from the clarifi-tech.com custom CSS) */ background-color:#f8fafc; background-image: radial-gradient(circle farthest-side at 40% 20%, rgba(8,145,178,.15), transparent), radial-gradient(circle farthest-side at 80% 0%, rgba(249,115,22,.12), transparent), radial-gradient(circle farthest-side at 0% 50%, rgba(45,212,191,.1), transparent); background-attachment:fixed; min-height:100vh; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Nokryn-oriented pages: brand cyan→navy gradient instead of the mesh */ .theme-nokryn{ background:#062f5b; color:#f4f8fc; } .theme-nokryn::before{ content:"";position:fixed;inset:0;z-index:-1; background:linear-gradient(to bottom,var(--brand-cyan) 0%,var(--navy) 100%); } .theme-nokryn .menu-btn span{background:#fff} img{max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;background:none;border:none;cursor:pointer;color:inherit} /* Type system: headings in Bree Serif (single 400 weight), body in Montserrat */ h1,h2,h3,h4,h5{font-family:var(--font-brand);font-weight:400} /* Sticky footer: the page always fills the viewport, footer pinned to its bottom (the .site-footer block below sets margin-top:auto — the pinning half of this) */ body{display:flex;flex-direction:column} .wrap{max-width:1420px;margin:0 auto;padding:0 clamp(20px,4vw,56px)} .wrap-narrow{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,56px)} /* ---------------- header ---------------- */ .site-top{ position:absolute;top:0;left:0;right:0;z-index:40; display:flex;align-items:center;justify-content:space-between; padding:14px clamp(20px,4vw,56px); } .site-top .brand{display:block;line-height:0} .site-top .brand img{height:88px;width:auto;transition:transform .2s} .site-top .brand:hover img{transform:scale(1.06)} .site-top .top-actions{display:flex;align-items:center;gap:16px} .menu-btn{display:flex;flex-direction:column;gap:5px;padding:8px;margin-right:10px} .menu-btn span{display:block;width:26px;height:3.5px;border-radius:2px;background:var(--navy)} .pill{ display:inline-block;border-radius:999px;padding:10px 30px; font-weight:600;font-size:15px;line-height:1.2; transition:filter .15s,transform .18s,box-shadow .18s; } .pill:hover{filter:brightness(1.06);transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px rgba(6,47,91,.18)} .pill-outline{border:2px solid var(--navy);color:var(--navy);background:#fff} .pill-solid{background:var(--navy);color:#fff;border:2px solid var(--navy)} /* header sitting on an accent band */ .on-accent .menu-btn span{background:#fff} .on-accent .pill-outline{border-color:#fff;color:#fff;background:transparent} .on-accent .pill-solid{background:#fff;color:var(--accent);border-color:#fff} /* hamburger dropdown — glass box (ported from the clarifi-tech.com chrome) */ .site-menu{ position:absolute;top:122px;right:clamp(20px,4vw,56px);z-index:60; background:rgba(255,255,255,.55); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.2); border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.1); padding:15px 10px;width:340px;display:none; } .site-menu.open{display:block;animation:menuFade .3s ease} @keyframes menuFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .site-menu a{ display:block;padding:9px 26px;color:var(--navy);font-weight:600;font-size:15px; border-radius:10px;transition:color .2s ease,transform .2s ease; } /* transform, not padding: the hover slide must never resize the menu box */ .site-menu a:hover{color:var(--brand-orange);transform:translateX(8px)} .site-menu hr{border:none;border-top:1px solid rgba(6,47,91,.12);margin:10px 0} /* dark glass on Nokryn-gradient pages */ .theme-nokryn .site-menu{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.2)} .theme-nokryn .site-menu a{color:#fff} .theme-nokryn .site-menu a:hover{color:var(--brand-orange)} .theme-nokryn .site-menu hr{border-top-color:rgba(255,255,255,.15)} /* ---------------- homepage hero ---------------- */ .hero-home{padding:130px 0 40px} .hero-home .lockup{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap} .hero-home .lockup img{width:clamp(220px,26vw,330px)} .hero-home h1{ font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.35;color:var(--navy); } .hero-home h1 .l2{display:block;padding-left:clamp(40px,12%,180px)} @media(min-width:900px){.hero-home h1 .l2{white-space:nowrap}} /* sector card grid */ .sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:95px 0 0} .sector{ position:relative;display:block;border-radius:22px;min-height:308px; transition:transform .18s,box-shadow .18s; } .sector:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(6,47,91,.16)} .sector.span2{grid-column:span 2} .sector .label{ position:absolute;left:28px;bottom:24px;color:#fff; font-size:clamp(21px,1.9vw,27px);font-weight:600;line-height:1.2; } .c-coral{background:var(--coral)} .c-orange{background:var(--orange)} .c-teal{background:var(--teal)} .c-mint{background:var(--mint)} .c-sage{background:var(--sage)} .c-gold{background:var(--gold)} /* ---------------- waves ---------------- */ /* transparent-PNG wave art: a real element layered above the page background */ .wave{display:block;width:100%;height:auto;user-select:none;pointer-events:none;position:relative;z-index:1} .wave.flip-x{transform:scaleX(-1)} .wave.flip-y{transform:scaleY(-1)} .wave.flip-xy{transform:scale(-1,-1)} /* ---------------- vertical page hero ---------------- */ .hero-band{position:relative;background:var(--accent);padding:120px 0 0;min-height:360px} .hero-band .lockup{ display:flex;align-items:center;gap:clamp(20px,3vw,40px); padding-bottom:60px;flex-wrap:wrap; } .hero-logo{width:clamp(130px,14vw,200px);height:auto;flex:none} .hero-band h1{color:#fff;font-size:clamp(28px,3.2vw,42px);font-weight:600} /* audience tabs (bottom-right of hero band) */ .aud-tabs{ position:absolute;bottom:0;right:clamp(20px,8vw,120px); display:flex;align-items:flex-end;gap:12px; } .aud-tab{ border:2px dotted rgba(255,255,255,.9);border-bottom:none; border-radius:14px 14px 0 0;padding:13px 24px 15px; color:#fff;font-weight:600;font-size:15px;white-space:nowrap; } /* The active tab renders the page's own viewport-fixed background — the same mesh (default) or gradient (.nk-tab) the panel below uses, with the same fixed attachment, so the tab shows the exact slice of background at its screen position and reads as a transparent window into the page. */ .aud-tab.active{ border-color:transparent;color:var(--accent);padding-bottom:18px; background-color:#f8fafc; background-image: radial-gradient(circle farthest-side at 40% 20%, rgba(8,145,178,.15), transparent), radial-gradient(circle farthest-side at 80% 0%, rgba(249,115,22,.12), transparent), radial-gradient(circle farthest-side at 0% 50%, rgba(45,212,191,.1), transparent); background-attachment:fixed; } .aud-tab.nk-tab.active{ color:#fff;background-color:var(--navy); background-image:linear-gradient(to bottom,var(--brand-cyan) 0%,var(--navy) 100%); background-attachment:fixed; } /* ---------------- problem intro + chat bubbles ---------------- */ .problem{padding:90px 0 30px;position:relative} .problem .lede{font-size:clamp(18px,1.8vw,24px);line-height:1.5} .problem .lede b{display:block} .bubbles{display:flex;flex-direction:column;gap:16px;margin:34px 0} .bubble{ position:relative;align-self:flex-start;max-width:72%; padding:12px 26px;border-radius:16px;color:#fff; font-size:clamp(17px,1.7vw,23px);line-height:1.4; } .bubble::after{ content:"";position:absolute;bottom:-12px;width:0;height:0; border:12px solid transparent;border-bottom:none; } .bubble.tail-left::after{left:26px;border-right:none;border-top-color:inherit} .bubble.tail-right::after{right:26px;border-left:none;border-top-color:inherit} .bubble.right{align-self:flex-end} .b-teal{background:var(--teal)} .b-teal::after{border-top-color:var(--teal)} .b-mint{background:var(--mint)} .b-mint::after{border-top-color:var(--mint)} .b-sage{background:var(--sage)} .b-sage::after{border-top-color:var(--sage)} .b-gold{background:var(--gold)} .b-gold::after{border-top-color:var(--gold)} .b-orange{background:var(--orange)} .b-orange::after{border-top-color:var(--orange)} .b-coral{background:var(--coral)} .b-coral::after{border-top-color:var(--coral)} .b-gray{background:var(--ph)} .b-gray::after{border-top-color:var(--ph)} .problem .resolve{font-size:clamp(18px,1.8vw,24px);line-height:1.5} .help-note{ margin:40px 0 0 auto;width:fit-content;max-width:90%; padding-right:clamp(0px,10vw,150px); font-size:clamp(18px,1.8vw,24px);line-height:1.5; } .help-note b{display:block;margin-top:26px} /* ---------------- generic sections ---------------- */ .sec{padding:70px 0} .sec-title{ font-size:clamp(28px,3vw,40px);font-weight:400; color:var(--navy);text-align:center;margin-bottom:34px; } .sec-sub{text-align:center;font-size:16px;margin:-18px auto 40px;max-width:760px} /* two text columns + optional media (How Claire works / was built) */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start} .duo-col h4{font-size:16.5px;font-weight:700;text-align:center;margin-bottom:18px;line-height:1.45} .duo-col p{text-align:center;font-size:15.5px;max-width:330px;margin:0 auto} .split-media{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center} .split-media .media img{width:100%;max-width:560px;display:block;margin:0 auto} .callout{ text-align:center;font-weight:700;font-size:16.5px;line-height:1.6; max-width:640px;margin:48px auto 0; } /* what-is-it */ .whatis p{max-width:880px;margin:0 auto 22px;text-align:center;font-size:16px;line-height:1.7} .device-scene{position:relative;margin:60px auto 0;max-width:1100px;min-height:340px} .device-scene .ring{position:absolute;left:0;top:8%;width:30%;z-index:1} .device-scene .tablet{position:relative;display:block;margin-left:22%;width:74%;z-index:2} .device-scene .tablet-screen{ position:absolute;z-index:2;background:var(--ph-box);border-radius:12px; } .device-scene .phone{position:absolute;left:26%;bottom:-6%;width:17%;z-index:4} .device-scene .drone{position:absolute;left:6%;bottom:-4%;width:44%;z-index:5} .scene-chip{ position:absolute;z-index:6;right:6%;bottom:2%; background:var(--accent);color:#fff;border-radius:999px; padding:11px 26px;font-size:16.5px;white-space:nowrap; box-shadow:0 6px 18px rgba(6,47,91,.14); } /* numbered steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:14px} .step{text-align:center} .step .num{ width:54px;height:54px;border-radius:50%;border:3px solid var(--navy); display:flex;align-items:center;justify-content:center;margin:0 auto 20px; font-size:23px;font-weight:700;color:var(--navy); } .step h4{font-size:16px;font-weight:700;margin-bottom:14px;line-height:1.45} .step p{font-size:15px;max-width:280px;margin:0 auto} /* who is it built for — dashed tab pills */ .who-tabs{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:36px 0 30px} .who-tab{ border:2px dashed var(--accent);border-radius:10px;padding:10px 22px; color:var(--accent);font-weight:700;font-size:15px; } .who-tab.active{background:var(--accent);color:#fff;border-style:solid} .who-copy p{max-width:880px;margin:0 auto 22px;text-align:center;font-size:15.5px;line-height:1.7} /* benefits */ .ben-tabs{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:40px 0 46px} .ben-tab{ padding:11px 8px;font-weight:700;font-size:16px;color:var(--accent); border-top:3px dotted var(--accent);border-bottom:3px dotted var(--accent); } .ben-tab.active{color:var(--navy);border-top:3px solid var(--navy);border-bottom:3px solid var(--navy)} .ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px} .ben{text-align:center} .ben .icon{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .ben .icon svg{width:60px;height:60px;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ben h4{font-size:16px;font-weight:700;margin-bottom:12px} .ben p{font-size:15px;max-width:270px;margin:0 auto} .ben-panel{display:none} .ben-panel.active{display:block} .tab-panel{display:none} .tab-panel.active{display:block} /* testimonials */ .testi{display:grid;grid-template-columns:1.02fr 1.18fr;gap:26px;align-items:stretch;margin-top:20px} .testi-photo{border-radius:18px;width:100%;height:100%;min-height:480px;object-fit:cover} .quote-card{ border-radius:18px;padding:clamp(30px,4vw,56px) clamp(24px,3vw,46px); color:#fff;font-style:italic;font-size:clamp(19px,2vw,26px); line-height:1.5;text-align:center;display:flex;align-items:center;justify-content:center; } .name-card{ border-radius:18px;margin-top:24px;padding:clamp(36px,4vw,60px) 40px; text-align:center;color:#fff; } .name-card .who{font-size:clamp(20px,2vw,26px);font-weight:600} .name-card .role{font-size:15px;opacity:.85;margin-top:6px} .q-gold{background:var(--gold)} .q-orange{background:var(--orange)} .q-mint{background:var(--mint)} .q-teal{background:var(--teal)} .q-sage{background:var(--sage)} .q-coral{background:var(--coral)} .q-gray{background:var(--ph)} /* pricing */ .pricing .intro{text-align:center;font-size:16px;max-width:760px;margin:0 auto 44px;line-height:1.7} .plans-title{text-align:center;margin-bottom:40px} .plans-title h3{font-size:28px;font-weight:600} .plans-title p{font-size:15.5px;margin-top:6px} .plans{display:grid;grid-template-columns:repeat(2,minmax(260px,340px));justify-content:center;gap:clamp(30px,5vw,80px)} .plan{text-align:center} .plan h3{font-size:26px;font-weight:600;margin-bottom:6px} .plan .tagline{font-size:15px;margin-bottom:26px} .plan .price{font-size:clamp(34px,3.4vw,44px);font-weight:700;line-height:1.15} .plan .price .or{display:block;font-size:14px;font-weight:700;margin:2px 0} .plan .note{font-size:15.5px;margin:16px 0 30px} .cta{ display:inline-block;background:var(--accent);color:#fff;border-radius:999px; padding:15px 46px;font-weight:700;font-size:16px; transition:filter .15s,transform .18s,box-shadow .18s; } .cta:hover{filter:brightness(1.05);transform:translateY(-2px) scale(1.05);box-shadow:0 10px 24px rgba(6,47,91,.20)} .cta.outline{background:#fff;color:var(--accent);border:2px solid var(--accent);padding:13px 44px} .incl-toggle{ display:inline-block;margin-top:30px;color:var(--accent);font-weight:700;font-size:16px; } .incl-toggle::before{content:"\276F\00a0";font-size:13px} .incl{list-style:none;text-align:left;margin:26px auto 0;max-width:290px;display:none} .incl.open{display:block} .incl li{ position:relative;padding:0 0 14px 32px;font-size:13.5px;font-weight:600;line-height:1.5; } .incl li::before{ content:"\2713";position:absolute;left:0;top:1px; width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff; font-size:12px;line-height:19px;text-align:center;font-weight:700; } .discount-note{text-align:center;font-size:15.5px;margin-top:56px;line-height:1.8} .discount-note a{color:var(--accent);font-weight:700} /* placeholder (unwritten copy from the mockups) */ .ph-text,.ph-text p,.ph-text h4,.ph-text .lede,.ph-text .resolve{color:var(--ph)} .ph-title{color:var(--ph)} .ph-box{background:var(--ph-box);border-radius:14px} .ph-icon{ width:64px;height:64px;border-radius:12px;background:#ececec;border:2px solid #dcdcdc;margin:0 auto; } .step.ph .num{border-color:var(--ph);color:var(--ph)} .who-tab.ph{border-color:var(--ph);color:var(--ph)} .who-tab.ph.active{background:var(--ph);color:#fff} .ben-tab.ph{color:var(--ph);border-color:var(--ph)} .ben-tab.ph.active{color:#9a9a9a;border-top-style:solid;border-bottom-style:solid;border-color:#9a9a9a} /* ---------------- footer ---------------- Always transparent; item colors switch per page background so the footer stays visible: navy items on light/mesh pages, white on dark gradient pages. */ .site-footer{ background:transparent;color:var(--navy);margin-top:auto; padding:40px clamp(20px,4vw,56px) 26px; display:flex;align-items:center;gap:30px;flex-wrap:wrap; } .site-footer .social{display:flex;gap:11px} .site-footer .social a{ width:29px;height:29px;border-radius:50%;background:var(--navy); display:flex;align-items:center;justify-content:center; transition:transform .18s; } .site-footer .social a:hover{transform:translateY(-2px) scale(1.12)} .site-footer .social svg{width:15px;height:15px;fill:#fff} .site-footer nav{display:flex;gap:26px;flex-wrap:wrap} .site-footer nav a{font-weight:700;font-size:14px;transition:color .3s ease} .site-footer nav a:hover{color:var(--brand-orange)} .site-footer .copyright{margin-left:auto;font-size:13px;opacity:.95} /* dark gradient pages: white items */ .theme-nokryn .site-footer{color:#fff} .theme-nokryn .site-footer .social a{background:#fff} .theme-nokryn .site-footer .social svg{fill:var(--navy)} /* ---------------- responsive ---------------- */ @media(max-width:1000px){ .sectors{grid-template-columns:repeat(2,1fr)} .sector.span2{grid-column:span 2} .duo,.split-media{grid-template-columns:1fr} .steps,.ben-grid{grid-template-columns:repeat(2,1fr);row-gap:44px} .testi{grid-template-columns:1fr} .testi-photo{min-height:340px;max-height:440px} .aud-tabs{right:12px;left:12px;justify-content:center} } @media(max-width:640px){ .site-top{padding:18px 16px} .pill{padding:8px 18px;font-size:13.5px} .aud-tabs{flex-wrap:wrap;gap:6px} .aud-tab{padding:8px 10px 10px;font-size:12.5px} .aud-tab.active{padding-bottom:12px} .device-scene{min-height:0} .sectors{grid-template-columns:1fr} .sector.span2{grid-column:span 1} .sector{min-height:220px} .steps,.ben-grid{grid-template-columns:1fr} .plans{grid-template-columns:1fr;gap:56px} .bubble{max-width:94%} .hero-band .lockup{padding-bottom:120px} .site-footer{justify-content:center;text-align:center} .site-footer .copyright{margin-left:0} }