/* ============================================================ kodveo — shared site styles (Design System — kodveo) Light-first Paper · single Petrol accent · Space Grotesk / Inter / JetBrains Mono ============================================================ */ /* Fonts (Space Grotesk / Inter / JetBrains Mono) load via Google Fonts — preconnect + in each page , weight-subset, display=swap. */ :root{ --paper:#f7f7f5;--white:#ffffff;--ink:#1a1d1a;--stone:#8a8d87; --line:#d8d8d2;--petrol:#2e5a5f;--petrol-soft:#4e7d82; --f-display:"Space Grotesk",system-ui,sans-serif; --f-body:"Inter",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; --container:1120px;--nav-h:80px; } *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;} body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;overflow-x:hidden;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .wrap{max-width:var(--container);margin:0 auto;padding:0 40px;} ::selection{background:color-mix(in srgb,var(--petrol) 22%,transparent);} .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);} .eyebrow::before{content:"";width:22px;height:1px;background:var(--petrol);} .eyebrow.center::before{display:none;} .kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:16px;} .ac{color:var(--petrol);} /* buttons + links */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-display);font-size:14px;font-weight:500;line-height:1;min-height:48px;padding:0 26px;border-radius:2px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:background .25s,color .25s,transform .2s;} .btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px);} .btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--petrol);} .btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper);} .btn--light:hover{background:transparent;color:var(--paper);border-color:var(--paper);} .link-q{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-size:15px;font-weight:500;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s;} .link-q .ar{color:var(--petrol);transition:transform .2s;} .link-q:hover{color:var(--petrol);border-bottom-color:var(--petrol);} .link-q:hover .ar{transform:translateX(4px);} /* NAV */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .35s,background .35s;} .nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);} .nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;} .brand img{height:30px;width:auto;} .nav-links{display:flex;align-items:center;gap:30px;} .nav-links .nl{font-size:14px;font-weight:500;color:var(--ink);transition:color .2s;} .nav-links .nl:hover,.nav-links .nl[aria-current="page"]{color:var(--petrol);} .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:2px;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;} .nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .25s;} /* PAGE HERO (subpages) */ .phero{padding:calc(var(--nav-h) + 60px) 0 60px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;} .phero .crumb{font-family:var(--f-mono);font-size:12px;color:var(--stone);margin-bottom:22px;} .phero .crumb a:hover{color:var(--petrol);} .phero h1{font-family:var(--f-display);font-weight:600;font-size:clamp(38px,6vw,74px);line-height:1.0;letter-spacing:-.04em;max-width:16ch;} .phero p{font-size:clamp(17px,2vw,20px);color:var(--stone);max-width:52ch;margin-top:22px;} .phero .cta-row{margin-top:32px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;} /* SECTIONS */ .band{padding:clamp(72px,10vw,120px) 0;} .band--line{border-top:1px solid var(--line);} .lead{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4.2vw,48px);line-height:1.06;letter-spacing:-.03em;max-width:18ch;} .sub{color:var(--stone);max-width:52ch;margin-top:18px;font-size:17px;} /* CARD GRID */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;} .grid--2{grid-template-columns:repeat(2,1fr);} .card{display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:26px;transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s;} .card:hover{transform:translateY(-4px);border-color:var(--petrol-soft);} .card .cn{font-family:var(--f-mono);font-size:12px;color:var(--petrol);} .card h3{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.01em;} .card p{color:var(--stone);font-size:15px;flex:1;} .card .go{font-family:var(--f-mono);font-size:12px;display:inline-flex;gap:7px;align-items:center;margin-top:6px;} .card .go .ar{color:var(--petrol);transition:transform .2s;} .card:hover .go .ar{transform:translateX(4px);} /* IMAGE PLACEHOLDER FRAME */ .frame{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--white);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;} .frame::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to right,color-mix(in srgb,var(--line) 60%,transparent) 0 1px,transparent 1px 34px),repeating-linear-gradient(to bottom,color-mix(in srgb,var(--line) 60%,transparent) 0 1px,transparent 1px 34px);opacity:.55;} .frame .fk{position:relative;font-family:var(--f-display);font-weight:600;font-size:clamp(54px,8vw,96px);color:color-mix(in srgb,var(--ink) 12%,transparent);} .frame .shot{position:absolute;left:14px;bottom:14px;font-family:var(--f-mono);font-size:11px;color:var(--stone);background:color-mix(in srgb,var(--white) 82%,transparent);border:1px solid var(--line);border-radius:2px;padding:5px 10px;} /* transparent hairline blueprint visuals */ .viz{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(260px,30vw,360px);} .viz svg{width:100%;max-width:520px;height:auto;overflow:visible;} .viz .ln{fill:none;stroke:color-mix(in srgb,var(--ink) 42%,transparent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} .viz .ln2{fill:none;stroke:color-mix(in srgb,var(--ink) 20%,transparent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} .viz .pet{fill:none;stroke:var(--petrol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .viz .soft{fill:color-mix(in srgb,var(--ink) 5%,transparent);stroke:none;} .viz .softp{fill:color-mix(in srgb,var(--petrol) 10%,transparent);stroke:none;} .viz .dot{fill:var(--petrol);stroke:none;} .viz .lbl{font-family:var(--f-mono);font-size:12px;fill:var(--stone);letter-spacing:.02em;} .js .viz [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.3,1);transition-delay:var(--dl,0ms);} .viz.in [data-draw]{stroke-dashoffset:0;} .js .viz [data-fade]{opacity:0;transition:opacity .7s ease;transition-delay:var(--dl,0ms);} .viz.in [data-fade]{opacity:1;} .viz .pulse{transform-box:fill-box;transform-origin:center;} .viz.in .pulse{animation:vpulse 2.6s ease-in-out infinite;} @keyframes vpulse{0%,100%{opacity:1}50%{opacity:.4}} /* SPLIT (alternating) */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,90px);align-items:center;} .split--alt{direction:rtl;} .split--alt>*{direction:ltr;} .split h2{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.03em;margin-bottom:16px;max-width:16ch;} .split p{color:var(--stone);max-width:44ch;} /* CHECK LIST */ .checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:26px;} .checks li{display:flex;gap:14px;align-items:flex-start;font-size:16px;} .checks .tk{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--petrol);color:var(--petrol);display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:2px;} /* STEPS */ .steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:44px;} .step{background:var(--paper);padding:30px 32px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;} .step .sn{font-family:var(--f-mono);font-size:13px;color:var(--petrol);padding-top:4px;} .step h3{font-family:var(--f-display);font-weight:600;font-size:20px;margin-bottom:6px;letter-spacing:-.01em;} .step p{color:var(--stone);font-size:15px;max-width:60ch;} /* FAQ */ .faq{border-top:1px solid var(--line);margin-top:44px;} .faq details{border-bottom:1px solid var(--line);} .faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:20px;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--petrol);font-family:var(--f-mono);font-size:22px;transition:transform .25s;} .faq details[open] summary::after{transform:rotate(45deg);} .faq p{color:var(--stone);padding:0 0 24px;max-width:64ch;} /* PROSE (articles) */ .prose{max-width:680px;margin:0 auto;} .prose p,.prose ul{color:var(--ink);font-size:17px;line-height:1.75;margin:0 0 22px;} .prose ul{padding-left:22px;} .prose li{margin-bottom:8px;} .prose h2{font-family:var(--f-display);font-weight:600;font-size:28px;letter-spacing:-.02em;margin:40px 0 16px;} .prose a{color:var(--petrol);border-bottom:1px solid color-mix(in srgb,var(--petrol) 40%,transparent);} /* FORM */ .form{display:grid;gap:20px;max-width:560px;} .form .row{display:grid;gap:8px;} .form label{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--stone);} .form input,.form select,.form textarea{font-family:var(--f-body);font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:4px;padding:13px 15px;min-height:48px;transition:border-color .2s,box-shadow .2s;} .form textarea{min-height:130px;resize:vertical;} .form input::placeholder,.form textarea::placeholder{color:var(--stone);} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 2px color-mix(in srgb,var(--petrol) 25%,transparent);} .form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .form .err{color:var(--petrol);font-family:var(--f-mono);font-size:12px;display:none;} .form .row.invalid input,.form .row.invalid textarea{border-color:var(--petrol);} .form .row.invalid .err{display:block;} .form .ok{display:none;background:var(--white);border:1px solid var(--petrol-soft);border-radius:4px;padding:16px 18px;font-size:15px;} .form .ok .d{color:var(--petrol);} /* DARK CTA */ .cta{position:relative;background:var(--ink);color:var(--paper);text-align:center;padding:clamp(84px,12vw,150px) 0;overflow:hidden;} .cta .glow{position:absolute;width:60vw;height:60vw;left:50%;top:64%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(90px);background:color-mix(in srgb,var(--petrol) 52%,transparent);opacity:.5;} .cta__in{position:relative;z-index:2;} .cta .kicker{color:var(--petrol-soft);justify-content:center;display:flex;} .cta h2{font-family:var(--f-display);font-weight:600;font-size:clamp(36px,6vw,80px);letter-spacing:-.04em;line-height:1.0;} .cta h2 .d{color:var(--petrol-soft);} .cta p{color:color-mix(in srgb,var(--paper) 62%,transparent);max-width:44ch;margin:22px auto 0;} .cta .cta-row{margin-top:36px;display:flex;justify-content:center;} /* FOOTER (sitemap) */ .foot{border-top:1px solid var(--line);padding:64px 0 36px;} .foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;} .foot__brand img{height:26px;margin-bottom:16px;} .foot__brand p{color:var(--stone);font-size:14px;max-width:32ch;} .foot h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:16px;} .foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;} .foot ul a{font-size:14px;color:var(--ink);transition:color .2s;} .foot ul a:hover{color:var(--petrol);} .foot__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:52px;padding-top:24px;border-top:1px solid var(--line);} .foot__bottom span{font-family:var(--f-mono);font-size:12px;color:var(--stone);} /* REVEAL */ .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0ms);} .rv.rl{transform:translateX(-50px);} .rv.rr{transform:translateX(50px);} .rv.in{opacity:1;transform:none;} /* RESPONSIVE */ @media(max-width:860px){ .grid,.grid--2{grid-template-columns:1fr;} .split,.split--alt{grid-template-columns:1fr;direction:ltr;gap:32px;} .split .split__txt{order:2;} .foot__top{grid-template-columns:1fr 1fr;gap:32px;} .form .two{grid-template-columns:1fr;} .nav-toggle{display:flex;} .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 40px 24px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;} .nav.open .nav-links{opacity:1;transform:none;pointer-events:auto;} .nav-links .nl{padding:14px 0;width:100%;border-bottom:1px solid var(--line);} .nav-links .btn{margin-top:16px;width:100%;} .rv.rl,.rv.rr{transform:translateY(28px);} } @media(max-width:600px){ .wrap{padding:0 22px;} .nav-links{padding:8px 22px 24px;} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .rv{opacity:1!important;transform:none!important;transition:none!important;} .card:hover,.btn:hover{transform:none;} .viz [data-draw]{stroke-dashoffset:0!important;transition:none!important;} .viz [data-fade]{opacity:1!important;transition:none!important;} .viz .pulse{animation:none!important;} }