/* ========================================================================== NODEFORGE — page design system (body). Pair with assets/site.css (header/footer). Link order in : fonts → nodeforge.css → site.css (site.css wins for nav/footer) ========================================================================== */ :root{ --green:#103D2E;--green-2:#0C3123;--green-3:#17553F;--green-line:#2C5C48; --lime:#C7F04A;--lime-2:#D6F56E;--cream:#ECE8D9;--cream-2:#E3DECB;--cream-line:#D6D0BA; --lavender:#CBC5F2;--pink:#F4CBD2;--ink:#0C2A20;--text:#ECE9DB;--muted:#9DB3A7;--muted-ink:#586B60; --sh:0 18px 44px -22px rgba(4,22,16,.75);--sh-c:0 16px 38px -20px rgba(10,40,30,.35);--bw:1.5px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--green);color:var(--text);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;line-height:1.05;letter-spacing:-.01em;text-wrap:balance;font-weight:500} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,28px)} .hl{background:var(--lime);color:var(--ink);border-radius:9px;padding:.02em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .hl.lav{background:var(--lavender)}.hl.pnk{background:var(--pink)} .eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);font-weight:600;display:inline-flex;align-items:center;gap:9px} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)} .light .eyebrow{color:#2E7D54}.light .eyebrow::before{background:#2E7D54} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--lime);color:var(--ink);font-weight:600;font-size:16px;padding:15px 28px;border:0;border-radius:100px;text-decoration:none;transition:transform .16s,background .16s;min-height:54px;cursor:pointer;font-family:'Inter',sans-serif} .btn:hover{transform:translateY(-2px);background:var(--lime-2)} .btn-2{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--text);font-weight:600;font-size:15px;padding:15px 24px;border:var(--bw) solid rgba(236,233,219,.34);border-radius:100px;text-decoration:none;transition:border-color .16s,color .16s;cursor:pointer;font-family:'Inter',sans-serif} .btn-2:hover{border-color:var(--lime);color:var(--lime)} .light .btn-2{color:var(--ink);border-color:rgba(12,42,32,.3)} .light .btn-2:hover{border-color:#2E7D54;color:#2E7D54} /* sections */ section.blk{padding:clamp(56px,8vw,92px) 0;position:relative} .blk.light{background:var(--cream);color:var(--ink)} .blk.deep{background:var(--green-2)} .center{max-width:680px;margin:0 auto 52px} .center.mid{text-align:center}.center.mid .eyebrow{justify-content:center}.center.mid p{margin-left:auto;margin-right:auto} .center h2{font-size:clamp(30px,4.6vw,50px);font-weight:500;margin:16px 0 14px;letter-spacing:-.02em} .center p{color:var(--muted);font-size:17px;max-width:600px} .light .center p{color:var(--muted-ink)} .lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:720px} .light .lede{color:var(--muted-ink)} .prose p{margin-bottom:16px;color:var(--muted)}.light .prose p{color:var(--muted-ink)} .prose h2{font-size:clamp(26px,3.4vw,36px);margin:34px 0 14px} .prose h3{font-size:21px;margin:26px 0 10px} .prose ul{margin:0 0 16px 20px;color:var(--muted)}.light .prose ul{color:var(--muted-ink)} .prose a{color:var(--lime);text-decoration:underline}.light .prose a{color:#1c6b45} /* interior hero */ .page-hero{padding:clamp(52px,8vw,88px) 0 clamp(38px,5vw,54px);position:relative;overflow:hidden} .page-hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,56px);align-items:center} .page-hero.solo{max-width:820px;margin:0 auto;text-align:center} .page-hero.solo .eyebrow{justify-content:center} .page-hero h1{font-size:clamp(36px,6vw,66px);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:18px 0 18px} .page-hero p.sub{font-size:clamp(16px,2vw,18px);color:var(--muted);max-width:560px;margin-bottom:30px} .page-hero.solo p.sub{margin-left:auto;margin-right:auto} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .page-hero.solo .hero-cta{justify-content:center} .crumbs{font-size:13px;color:var(--muted);margin-bottom:4px} .crumbs a{text-decoration:none;opacity:.85}.crumbs a:hover{color:var(--lime)} /* 3D art panel */ .hero-art{display:flex;align-items:center;justify-content:center} .art-card{background:var(--green-3);border:var(--bw) solid var(--green-line);border-radius:24px;padding:26px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px} .art-tile{background:var(--green);border:var(--bw) solid var(--green-line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .art-tile b{font-size:14px;font-weight:600} .art-tile span{font-size:12.5px;color:var(--muted)} .icon3d{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))} /* cards / grids */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{background:var(--cream);color:var(--ink);border-radius:20px;padding:30px 26px;box-shadow:var(--sh-c);transition:transform .18s} .card:hover{transform:translateY(-5px)} .card.dark{background:var(--green-3);color:var(--text);border:var(--bw) solid var(--green-line);box-shadow:none} .card .ic{width:54px;height:54px;border-radius:14px;background:var(--lime);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px} .card.dark .ic{background:var(--green);color:var(--lime)} .card img.icon3d{width:56px;height:56px;margin-bottom:14px} .card h3{font-size:20px;margin-bottom:9px;font-weight:600} .card p{font-size:14.5px;color:var(--muted-ink)} .card.dark p{color:var(--muted)} .card a.more{display:inline-block;margin-top:12px;color:#1c6b45;font-weight:600;font-size:13.5px;text-decoration:none} .card.dark a.more{color:var(--lime)} /* benefits */ .benefit{display:flex;gap:16px;margin-bottom:22px;padding-bottom:22px;border-bottom:var(--bw) solid var(--green-line)} .benefit:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .light .benefit{border-color:rgba(12,42,32,.14)} .benefit .bi{width:48px;height:48px;border-radius:12px;background:var(--green-3);border:var(--bw) solid var(--green-line);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px} .light .benefit .bi{background:#fff;border-color:var(--cream-line)} .benefit img.icon3d{width:40px;height:40px} .benefit h3{font-size:18px;font-weight:600;margin-bottom:4px} .benefit p{color:var(--muted);font-size:14.5px} .light .benefit p{color:var(--muted-ink)} /* checklist */ .ticks{list-style:none;display:grid;gap:12px} .ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15px} .ticks li::before{content:"✓";color:var(--lime);font-weight:800;flex-shrink:0} .light .ticks li::before{color:#1c6b45} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .steps.s3{grid-template-columns:repeat(3,1fr)} .step{background:var(--green-3);border:var(--bw) solid var(--green-line);border-radius:18px;padding:26px 22px} .light .step{background:var(--cream-2);border-color:var(--cream-line)} .step .num{font-family:'Fraunces',serif;font-weight:600;width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center} .step h3{font-size:17px;margin:16px 0 8px;font-weight:600} .step p{font-size:13.5px;color:var(--muted)}.light .step p{color:var(--muted-ink)} /* faq */ .faq-list{max-width:840px;margin:0 auto} .faq-item{border-bottom:var(--bw) solid var(--green-line);padding:24px 4px} .light .faq-item{border-color:var(--cream-line)} .faq-item:last-child{border-bottom:0} .faq-q{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:8px;display:flex;gap:12px} .faq-q .q{color:var(--lime)}.light .faq-q .q{color:#2E7D54} .faq-a{color:var(--muted);font-size:15px;padding-left:28px}.light .faq-a{color:var(--muted-ink)} /* forms */ .form-card{background:var(--cream);color:var(--ink);border-radius:22px;padding:clamp(24px,4vw,40px);box-shadow:var(--sh)} .field{margin-bottom:16px} .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)} .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:var(--bw) solid var(--cream-line);border-radius:12px;padding:13px 15px;transition:border-color .15s} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:#2E7D54} .field textarea{min-height:130px;resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-card .btn{width:100%;margin-top:6px} .form-note{font-size:12.5px;color:var(--muted-ink);margin-top:12px;text-align:center} /* embed slot — replace with GHL/Calendly/form iframe later */ .embed-slot{border:2px dashed var(--green-line);border-radius:20px;background:var(--green-3);min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:44px 24px;color:var(--muted)} .light .embed-slot{background:var(--cream-2);border-color:var(--cream-line);color:var(--muted-ink)} .embed-slot .badge{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);font-weight:700} .light .embed-slot .badge{color:#2E7D54} .embed-slot h3{font-size:22px;color:var(--text)}.light .embed-slot h3{color:var(--ink)} .embed-slot p{max-width:460px;font-size:14.5px} .embed-slot img.icon3d{width:74px;height:74px} /* embed-code — real third-party iframe (calendly/ghl/google-maps/youtube), allowlisted per kind at render time (see EMBED_HOST_ALLOWLIST in packages/renderer/src/legacy/blocks.ts) */ .embed-frame{border-radius:20px;overflow:hidden;box-shadow:var(--sh-c)} .embed-frame iframe{display:block;width:100%;height:640px;border:0} .embed-frame-16-9{aspect-ratio:16/9}.embed-frame-16-9 iframe{height:100%} .embed-frame-1-1{aspect-ratio:1/1}.embed-frame-1-1 iframe{height:100%} .embed-frame-4-3{aspect-ratio:4/3}.embed-frame-4-3 iframe{height:100%} /* divider */ hr.divider{border:0;border-top:var(--bw) solid var(--cream-line);margin:8px 0} .deep hr.divider{border-top-color:var(--green-line)} .divider-labeled{display:flex;align-items:center;gap:16px;color:var(--muted-ink);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em} .divider-labeled::before,.divider-labeled::after{content:"";flex:1;height:var(--bw);background:var(--cream-line)} /* logo showcase — "as seen on" / client trust strip */ .logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,5vw,56px)} .logo-item{opacity:.6;filter:grayscale(1);transition:opacity .2s,filter .2s} .logo-item:hover{opacity:1;filter:none} .logo-img{max-height:36px;width:auto;display:block} /* standalone social icon row (mid-page — footer has its own .foot-social) */ /* Circles always dark, regardless of section tone: assets/icons/*.svg (the same files .foot-social and .social-rail already use) are hardcoded white fill, not currentColor — a light-tone circle would render an invisible white-on-white icon. */ .social-icons-row{display:flex;justify-content:center;gap:16px} .social-icons-row a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:100px;background:var(--green-3);border:var(--bw) solid var(--green-line);transition:background .15s} .social-icons-row a:hover{background:var(--green-2)} /* pricing tiers */ .tier{display:flex;flex-direction:column} .tier .ticks{margin:16px 0 4px} .tier-price{font-family:'Fraunces',serif;font-size:34px;font-weight:600;line-height:1;margin:8px 0 4px} .tier-price small{font-family:'Inter',sans-serif;font-size:13px;color:var(--muted-ink);font-weight:500} .tier .btn,.tier .btn-2{width:100%;margin-top:auto} .card.feature{background:var(--lime);color:var(--ink);position:relative} .card.feature .tier-price small{color:#1e4636} .tier-badge{position:absolute;top:18px;right:18px;background:var(--green);color:var(--lime);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:100px} /* tool chips */ .chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .chip{background:var(--green-3);border:var(--bw) solid var(--green-line);border-radius:100px;padding:11px 20px;font-weight:600;font-size:14.5px} .light .chip{background:#fff;border-color:var(--cream-line);color:var(--ink)} /* quote card */ .quote{background:var(--cream);color:var(--ink);border-radius:20px;padding:30px 28px;box-shadow:var(--sh-c);display:flex;flex-direction:column} .quote .mk{font-family:'Fraunces',serif;font-size:46px;line-height:.6;color:var(--lime);-webkit-text-stroke:1px var(--ink)} .quote p{font-size:15.5px;margin:14px 0 18px;flex:1} .quote .who{font-weight:700;font-size:15px} .quote .role{font-size:13px;color:var(--muted-ink)} /* trust checkmark row (hero) */ .trust-row{display:flex;flex-wrap:wrap;gap:9px 18px;margin-bottom:26px} .trust-row span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--text)} .trust-row span::before{content:"✓";color:var(--lime);font-weight:800} /* comparison / data tables */ .table-wrap{overflow-x:auto;border-radius:20px;box-shadow:var(--sh-c)} .comp-table{width:100%;min-width:560px;border-collapse:collapse;background:var(--cream);color:var(--ink)} .comp-table th,.comp-table td{padding:14px 18px;text-align:left;font-size:14.5px;border-bottom:var(--bw) solid var(--cream-line)} .comp-table th{font-family:'Fraunces',serif;font-weight:600;background:var(--cream-2);font-size:15px} .comp-table tr:last-child td{border-bottom:0} .comp-table td.yes{color:#1c6b45;font-weight:700} .comp-table td.no{color:#b06a72} .comp-table td.maybe{color:var(--muted-ink)} /* case study cards */ .case-card{background:var(--cream);color:var(--ink);border-radius:20px;padding:28px;box-shadow:var(--sh-c)} .case-card .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1c6b45} .case-card h3{font-size:19px;margin:10px 0 16px;font-weight:600} .case-row{display:flex;gap:12px;margin-bottom:12px;font-size:14px} .case-row b{flex-shrink:0;width:78px;color:#1c6b45;font-weight:700} .case-row span{color:var(--muted-ink)} /* vertical process / funnel-architecture flow */ .flow{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:320px;margin:0 auto} .flow-node{background:var(--cream);color:var(--ink);border-radius:14px;padding:13px 26px;font-weight:600;font-family:'Fraunces',serif;font-size:15px;box-shadow:var(--sh-c);text-align:center;min-width:230px} .flow-arrow{color:var(--lime);font-size:20px;line-height:1.6} /* final CTA */ .cta{padding:clamp(60px,8vw,96px) 0} .cta-box{background:var(--lime);color:var(--ink);border-radius:28px;padding:clamp(40px,6vw,64px) clamp(24px,5vw,44px);text-align:center} .cta-box .eyebrow{color:#1c6b45;justify-content:center}.cta-box .eyebrow::before{background:#1c6b45} .cta-box h2{font-size:clamp(30px,5vw,52px);font-weight:500;max-width:760px;margin:14px auto 14px} .cta-box p{color:#1e4636;font-size:18px;max-width:560px;margin:0 auto 30px} .cta-box .btn{background:var(--green);color:var(--text)}.cta-box .btn:hover{background:var(--green-2)} /* reveal */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease} .reveal.show{opacity:1;transform:none} .grid-3 .reveal:nth-child(2),.grid-4 .reveal:nth-child(2),.steps .reveal:nth-child(2){transition-delay:.07s} .grid-3 .reveal:nth-child(3),.steps .reveal:nth-child(3){transition-delay:.14s} .steps .reveal:nth-child(4){transition-delay:.21s} @media(max-width:900px){ .page-hero .grid{grid-template-columns:1fr;gap:32px} .grid-3,.grid-4,.steps{grid-template-columns:1fr 1fr} .hero-art{order:-1} } @media(max-width:560px){ .grid-2,.grid-3,.grid-4,.steps,.form-row,.art-card{grid-template-columns:1fr} .btn,.btn-2{width:100%;justify-content:center} .embed-slot{min-height:440px} .embed-frame iframe{height:420px} } @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{scroll-behavior:auto!important}}