/* ============================================================ Praxis Enablement — Design System (navy ink + teal signal) Light is default; add data-theme="dark" on for dark. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* constants */ --ink:#1A1F2E; --ink-2:#12161F; --ink-3:#232A3D; --teal:#0FB5B8; --teal-2:#37D6C0; --teal-700:#0B7178; --teal-soft:#E6FAF9; --on-teal:#06262A; --grad:linear-gradient(90deg,var(--teal),var(--teal-2)); --glow:rgba(15,181,184,.30); --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px; --maxw:1160px; --font-d:'Archivo',sans-serif; --font-b:'Inter',sans-serif; --font-m:'IBM Plex Mono',monospace; /* light theme (default) */ --bg:#FFFFFF; --bg-alt:#F6F8F9; --surface:#FFFFFF; --surface-2:#F6F8F9; --text:#1A1F2E; --text-muted:#5A6470; --heading:#15191F; --border:#E6EAEE; --nav-bg:rgba(255,255,255,.82); --shadow:0 18px 50px -26px rgba(26,31,46,.30); --logo-light:block; --logo-dark:none; } html[data-theme="dark"]{ --bg:#161B28; --bg-alt:#11151F; --surface:#1E2433; --surface-2:#232A3D; --text:#EEF1F6; --text-muted:#9AA3B4; --heading:#FFFFFF; --border:#2A3242; --nav-bg:rgba(17,21,31,.82); --shadow:0 22px 60px -28px rgba(0,0,0,.6); --logo-light:none; --logo-dark:block; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;} img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} /* ---- typography ---- */ .display{font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;line-height:1.0;color:var(--heading);} h1{font-family:var(--font-d);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.03em;color:var(--heading);} h2{font-family:var(--font-d);font-weight:700;font-size:clamp(28px,3.6vw,44px);line-height:1.06;letter-spacing:-.025em;color:var(--heading);} h3{font-family:var(--font-d);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--heading);} h4{font-family:var(--font-d);font-weight:600;font-size:16px;color:var(--heading);} p{font-size:16px;line-height:1.7;color:var(--text-muted);} .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--text-muted);} .eyebrow{font-family:var(--font-m);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .fwd{font-family:var(--font-d);font-weight:900;color:var(--teal);} /* ---- layout ---- */ .container{max-width:var(--maxw);margin:0 auto;padding:0 40px;} section{padding:92px 0;} .section-alt{background:var(--bg-alt);} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .center{text-align:center;} .mx-auto{margin-left:auto;margin-right:auto;} .sec-head{max-width:720px;margin-bottom:48px;} .sec-head.center{margin-left:auto;margin-right:auto;} .sec-head .eyebrow{margin-bottom:16px;display:inline-block;} .sec-head p{margin-top:16px;} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-b);font-weight:600;font-size:15px;padding:14px 26px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;} .btn:hover{transform:translateY(-1px);} .btn-primary{background:var(--grad);color:var(--on-teal);box-shadow:0 10px 26px -10px var(--glow);} .btn-primary:hover{box-shadow:0 14px 34px -8px var(--glow);} .btn-ghost{background:transparent;color:var(--text);border-color:var(--border);} .btn-ghost:hover{border-color:var(--teal);color:var(--teal);} .btn-link{font-weight:600;color:var(--teal-700);display:inline-flex;align-items:center;gap:7px;} html[data-theme="dark"] .btn-link{color:var(--teal-2);} .btn-link:hover{gap:11px;} .btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);} .nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;height:74px;display:flex;align-items:center;justify-content:space-between;} .nav-logo{display:flex;align-items:center;} .nav-logo img{height:30px;width:auto;} .nav-logo .logo-light{display:var(--logo-light);} .nav-logo .logo-dark{display:var(--logo-dark);} .nav-links{display:flex;align-items:center;gap:34px;list-style:none;} .nav-links a{font-size:14.5px;font-weight:500;color:var(--text);transition:color .15s;} .nav-links a:hover,.nav-links a.active{color:var(--teal-700);} html[data-theme="dark"] .nav-links a:hover,html[data-theme="dark"] .nav-links a.active{color:var(--teal-2);} .nav-right{display:flex;align-items:center;gap:18px;} .theme-toggle{width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--border);background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;} .theme-toggle:hover{border-color:var(--teal);color:var(--teal);} .theme-toggle .moon{display:var(--logo-light);} .theme-toggle .sun{display:var(--logo-dark);} .nav-cta{padding:10px 18px;font-size:14px;} .nav-burger{display:none;background:none;border:none;color:var(--text);cursor:pointer;} /* ---- hero (always navy, both themes) ---- */ .hero{background:var(--ink);color:#F3F4F8;position:relative;overflow:hidden;} .hero .glow{position:absolute;top:-180px;right:-120px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 62%);filter:blur(26px);} .hero .container{position:relative;z-index:2;padding-top:96px;padding-bottom:96px;} .hero h1{color:#fff;} .hero p{color:#9AA0B2;} .hero .eyebrow{color:var(--teal-2);} .hero .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#CDD3E0;border:1px solid #2D3548;background:#20283A;padding:6px 14px;border-radius:var(--r-pill);margin-bottom:26px;} .hero .pill b{color:var(--teal-2);} /* ---- stat strip ---- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);} .stats > div{padding:22px 18px 0 0;} .stats .num{font-family:var(--font-d);font-weight:800;font-size:clamp(30px,3.4vw,42px);color:var(--heading);line-height:1;} .stats .num em{color:var(--teal);font-style:normal;} .stats .lab{font-size:13px;color:var(--text-muted);margin-top:8px;} .hero .stats{border-top-color:#2D3548;} .hero .stats .num{color:#fff;} .hero .stats .num em{color:var(--teal-2);} .hero .stats .lab{color:#9AA0B2;} /* ---- cards ---- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;transition:border-color .2s,transform .2s;} .card:hover{border-color:var(--teal);transform:translateY(-2px);} .card .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);display:inline-block;margin-right:10px;vertical-align:middle;} .card h3{margin-bottom:10px;} .card .num-badge{font-family:var(--font-m);font-size:13px;color:var(--teal);margin-bottom:14px;display:block;} .card ul{list-style:none;margin-top:14px;} .card ul li{font-size:14px;color:var(--text-muted);padding:7px 0 7px 22px;position:relative;border-top:1px solid var(--border);} .card ul li:first-child{border-top:none;} .card ul li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);} /* ---- numbered feature rows ---- */ .numrow{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:28px 0;border-top:1px solid var(--border);} .numrow .n{font-family:var(--font-d);font-weight:800;font-size:40px;color:var(--teal);line-height:1;} .numrow h3{margin-bottom:8px;} /* ---- quote ---- */ .quote{border-left:3px solid var(--teal);padding:6px 0 6px 26px;} .quote p{font-family:var(--font-d);font-weight:600;font-size:clamp(20px,2.4vw,28px);line-height:1.3;color:var(--heading);font-style:normal;} .quote cite{display:block;margin-top:14px;font-style:normal;font-size:14px;color:var(--text-muted);font-family:var(--font-m);} /* ---- framework console ---- */ .console{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);} .console .top{display:flex;align-items:center;gap:7px;padding:14px 16px;border-bottom:1px solid var(--border);} .console .top i{width:10px;height:10px;border-radius:50%;background:var(--border);display:inline-block;} .console .top span{font-family:var(--font-m);font-size:11px;color:var(--text-muted);margin-left:8px;} .console .row{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:var(--r-md);margin:7px;} .console .row.active{background:var(--teal-soft);border:1px solid var(--teal-2);} html[data-theme="dark"] .console .row.active{background:rgba(15,181,184,.10);border-color:rgba(15,181,184,.4);} .console .row .k{font-family:var(--font-m);font-size:11px;color:var(--teal);} .console .row .t{font-size:14.5px;font-weight:500;color:var(--text);} .console .row .bar{margin-left:auto;width:92px;height:6px;border-radius:6px;background:var(--bg-alt);overflow:hidden;} .console .row .bar i{display:block;height:100%;background:var(--grad);} /* ---- comparison (vs) ---- */ .vs-wrap{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:0;} .vs-mid{text-align:center;font-family:var(--font-m);font-size:13px;color:var(--text-muted);} @media(max-width:760px){.vs-wrap{grid-template-columns:1fr;gap:16px;}} /* ---- band (force-dark section in any theme) ---- */ .band-dark{background:var(--ink);color:#F3F4F8;position:relative;overflow:hidden;} .band-dark h1,.band-dark h2,.band-dark h3{color:#fff;} .band-dark p{color:#9AA0B2;} .band-dark .eyebrow{color:var(--teal-2);} .band-dark .glow{position:absolute;inset:0;background:radial-gradient(900px 420px at 75% -10%,var(--glow),transparent 60%);} .band-dark .container{position:relative;z-index:2;} .band-dark .card{background:#232A3D;border-color:#2D3548;} .band-dark .card p{color:#9AA0B2;} /* ---- footer ---- */ .footer{background:var(--ink-2);color:#9AA0B2;padding:64px 0 36px;} .footer .container{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;} .footer .brand img{height:28px;margin-bottom:16px;} .footer .brand p{color:#7C8597;font-size:14px;max-width:34ch;} .footer .tm{font-family:var(--font-m);font-size:11px;color:#5A6678;margin-top:16px;letter-spacing:.04em;} .footer h5{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7C8597;margin-bottom:16px;} .footer ul{list-style:none;} .footer ul li{margin-bottom:10px;} .footer ul a{font-size:14px;color:#C5CBD6;} .footer ul a:hover{color:var(--teal-2);} .footer .copy{max-width:var(--maxw);margin:44px auto 0;padding:22px 40px 0;border-top:1px solid #232A3D;font-size:12.5px;color:#5A6678;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;} /* ---- landing-page helpers ---- */ .reg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow);} .agenda-row{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--border);} .agenda-row .time{font-family:var(--font-m);font-size:13px;color:var(--teal);} .checklist{list-style:none;} .checklist li{padding:12px 0 12px 32px;position:relative;border-top:1px solid var(--border);color:var(--text);} .checklist li::before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);} .notice{display:inline-flex;gap:8px;align-items:center;background:var(--teal-soft);color:var(--teal-700);border:1px solid var(--teal-2);font-size:13px;padding:8px 14px;border-radius:var(--r-pill);} html[data-theme="dark"] .notice{background:rgba(15,181,184,.10);color:var(--teal-2);} /* ---- utilities ---- */ .mt-s{margin-top:14px;} .mt-m{margin-top:26px;} .mt-l{margin-top:44px;} .maxw-prose{max-width:680px;} /* ---- responsive ---- */ @media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr;} .footer .container{grid-template-columns:1fr 1fr;} } @media(max-width:760px){ .container{padding:0 22px;} section{padding:64px 0;} .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--border);padding:18px 22px;gap:18px;display:none;} .nav-links.open{display:flex;} .nav-burger{display:block;} .grid-2,.grid-3,.grid-4,.stats{grid-template-columns:1fr;} .stats>div{border-top:1px solid var(--border);padding:18px 0;} .footer .container{grid-template-columns:1fr;} .numrow{grid-template-columns:1fr;gap:8px;} }