/* ============================================================ Divine Power — shared design system (single source of truth) Linked LAST in each page so these tokens + nav + footer are authoritative. Re-theme the whole site from --accent below. ============================================================ */ :root{ /* surfaces */ --paper:#F2EDE0; --paper-deep:#EAE3D2; --paper-card:#FBF8F0; /* ink */ --ink:#0A0E1F; --ink-soft:#3A4154; --ink-mute:#6B7184; /* hairlines */ --rule:rgba(10,14,31,.18); --rule-soft:rgba(10,14,31,.10); /* accent — cobalt blue (ivory-page kickers/links) */ --accent:#1E45D8; --accent-deep:#15309C; --hl:#8AB0FF; /* primary CTA / action color — used for buttons + kickers on every surface. Change THIS one line to re-color every call-to-action site-wide. */ --cta:#0161F6; --cta-deep:#0148C4; --cta-ink:#fff; /* positive / progress fill — the lime used in scorecard progress bars */ --ok:#9BE84F; /* scorecard artifact palette (How-It-Works cards) */ --amber:#E8A13C; /* low-maturity / level progress bar */ --lvl-blind:#D6336C; --lvl-aware:#C77B22; --lvl-structured:#2F8F3E; /* Growth-Ladder level text */ --panel:#FBF5E8; /* warm-cream scorecard panel inside a white card */ /* back-compat aliases: existing var(--mint*) usages re-theme to blue */ --mint:#8AB0FF; --mint-deep:#1E45D8; /* layout — ONE container system: same max-width + edge inset for nav, content, footer */ --maxw:1120px; --edge:clamp(22px, 4vw, 34px); } /* ---- kill horizontal drag/overflow site-wide (root only, so window scroll still drives the nav) ---- */ html{overflow-x:hidden} /* ---- shared content container (authoritative; overrides per-page .wrap widths) ---- */ .wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--edge);padding-right:var(--edge)} /* ---- floating island navbar (no underline, consistent margins) ---- */ .nav{position:fixed;top:14px;left:0;right:0;z-index:60;background:transparent;border:0 !important;padding:0;transition:transform .32s ease} .nav.nav-hidden{transform:translateY(-180%)} .nav-inner{max-width:var(--maxw);margin:0 auto;position:relative;min-height:60px; display:flex;justify-content:space-between;align-items:center;gap:24px; background:rgba(251,248,240,.72);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5); border:1px solid var(--rule);border-radius:999px; padding:0 var(--edge);box-shadow:none} .nav-inner .wmlogo{height:26px;width:auto;display:block} .nav-inner .wmlogo-light{display:none} /* glass nav over a dark hero (toggled by JS on home) */ .nav.over-hero .nav-inner{background:rgba(16,20,32,.22);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-color:rgba(255,255,255,.22);box-shadow:none} .nav.over-hero .nav-links a{color:#fff} .nav.over-hero .wmlogo-dark{display:none} .nav.over-hero .wmlogo-light{display:block} .nav-links{display:flex;gap:26px;align-items:center;font-size:13.5px} .nav-links a{color:var(--ink);text-decoration:none;opacity:.78;transition:opacity .15s} .nav-links a:hover{opacity:1} .nav-btn{padding:10px 18px;border:1px solid var(--cta) !important;border-radius:999px; font-weight:600;font-size:13px;text-decoration:none;color:var(--cta-ink) !important;opacity:1 !important; background:var(--cta);transition:background .15s,color .15s} .nav-btn:hover{background:var(--cta-deep) !important;color:var(--cta-ink) !important} /* hamburger (mobile only) */ .nav-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin:-6px -4px -6px 0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:999px} .nav.over-hero .nav-burger{color:#fff} .nav-burger svg{width:23px;height:23px;display:block} /* nav links visible above the shared mobile breakpoint, overriding any page-specific legacy breakpoints (920/880px) that used to hide them */ @media(min-width:761px){.nav-links a:not(.nav-btn){display:inline-block !important}} @media(max-width:760px){ .nav{top:10px;padding:0 14px} .nav-inner{padding:0 8px 0 20px;gap:10px} .nav-burger{display:flex} .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:4px; background:rgba(14,18,30,.94);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:10px;display:flex; opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; transition:opacity .2s ease,transform .2s ease,visibility .2s} .nav.open .nav-links{opacity:1;visibility:visible;transform:none;pointer-events:auto} .nav-links a{display:block !important;color:#fff !important;opacity:.92;padding:13px 16px;font-size:15px;border-radius:13px} .nav-links a.nav-btn{background:var(--cta);color:var(--cta-ink) !important;text-align:center;border-color:var(--cta) !important;margin-top:4px} } /* ---- footer (shared) ---- */ footer{background:var(--ink);color:#8A92A8;border-top:0} .footer-inner{max-width:var(--maxw);margin:0 auto;padding:34px var(--edge); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px} footer a{color:var(--paper);text-decoration:none} footer a:hover{text-decoration:underline} .footer-inner .fm,.footer-inner .mono{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase} /* ---- remove inter-section divider lines globally ---- */ .sect{border-top:0 !important} /* ---- dark-section primary CTA: solid cobalt, white text ---- */ .final .btn{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important} .final .btn:hover{background:var(--accent-deep) !important} /* ============================================================ How It Works — horizontal carousel (SHARED by home + /proof so both sections are identical). ONE wide card per slide: copy on the left, a scorecard artifact on the right. ============================================================ */ .steps-caro{margin:42px 0 30px} .steps{display:flex;gap:24px;margin:0;padding:4px 2px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none} .steps::-webkit-scrollbar{display:none} .step{flex:0 0 100%;scroll-snap-align:start;min-width:0;margin:0; display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; border:1px solid var(--rule);background:#fff;padding:48px 52px} @media(max-width:760px){.step{grid-template-columns:1fr;gap:26px;padding:30px 24px}} .step-copy{max-width:470px} .step .sn{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--cta);margin-bottom:12px} .step-copy h3{font-family:'Geist',sans-serif;font-weight:700;font-size:1.7rem;line-height:1.16;margin:0 0 12px;letter-spacing:-.02em;color:var(--ink)} .step-copy p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0} /* scorecard panel (the artifact on the right of every card) */ .scard{background:var(--panel);border:1px solid var(--rule);padding:22px 24px} .scard-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px} .scard-h .t{font-family:'Geist Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .scard-h .m{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} .scard-h .m.cta{color:var(--cta)} .scard-h .m.mut{color:var(--ink-mute)} .scard .bar{height:7px;border-radius:4px;overflow:hidden;background:var(--rule-soft);margin-bottom:14px} .scard .bar i{display:block;height:100%} .scard .bar i.amber{background:var(--amber)} .scard .bar i.ok{background:var(--ok)} .scard-sub{display:flex;justify-content:space-between;font-family:'Geist Mono',monospace;font-size:10px; letter-spacing:.08em;text-transform:uppercase;color:var(--cta);padding-bottom:2px} /* generic row (system/level · route · task) */ .srow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink);padding:12px 0} .srow + .srow{border-top:1px solid var(--rule-soft)} .srow .rt{display:flex;align-items:baseline;min-width:0} .srow .rn{color:var(--ink);font-weight:600;margin-right:8px;flex:0 0 auto} .srow .lvl{font-weight:600;font-size:13.5px;white-space:nowrap} .lvl.blind{color:var(--lvl-blind)} .lvl.aware{color:var(--lvl-aware)} .lvl.structured{color:var(--lvl-structured)} /* task status pills */ .pill{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.06em;padding:5px 12px;border:1px solid;border-radius:4px;white-space:nowrap;flex:0 0 auto} .pill.high{color:var(--lvl-blind);border-color:var(--lvl-blind)} .pill.ready{color:var(--lvl-structured);border-color:var(--lvl-structured)} .pill.skip{color:var(--ink-mute);border-color:var(--rule)} .srow.skipped .rt{color:var(--ink-mute);text-decoration:line-through} /* validation — a small analytics dashboard mock (trend line + bars + donut) */ .vdash{background:var(--paper-deep);padding:16px 18px} .vdash-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px} .vdash-t{font-size:12.5px;color:var(--ink)} .vchip{font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.05em;text-transform:uppercase; color:var(--lvl-structured);border:1px solid var(--lvl-structured);border-radius:999px;padding:3px 9px;white-space:nowrap} .vline{display:block;width:100%;height:60px} .vdash-row{display:flex;gap:22px;align-items:flex-end;margin-top:16px} .vmini{flex:1;min-width:0} .vmini.is-donut{flex:0 0 auto;display:flex;flex-direction:column;align-items:center} .vmini-l{font-family:'Geist Mono',monospace;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px} .vmbars{display:block;width:100%;height:34px} .vmbars rect{fill:var(--cta)} .vmbars rect.lo{fill:var(--hl)} .vdonut{display:block;width:46px;height:46px} /* carousel nav */ .caro-nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px} .caro-dots{display:flex;gap:8px;align-items:center} .caro-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--rule);cursor:pointer;transition:width .2s,background .2s} .caro-dots button.on{width:22px;background:var(--cta)} .caro-arrows{display:flex;gap:8px} .caro-arrow{width:44px;height:44px;border:1px solid var(--ink);background:transparent;border-radius:999px;cursor:pointer; font-size:18px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} .caro-arrow:hover{background:var(--ink);color:var(--paper)} .caro-arrow:disabled{opacity:.32;cursor:default} .caro-arrow:disabled:hover{background:transparent;color:var(--ink)} .caro-arrow svg{width:21px;height:21px;display:block}