/* ============================================================ CODESTAN · PRODUCT PAGES — shared layer for the four marketplace product landing pages (clinic / ordering / realestate / lms). Page-unique visuals live in css/.css accent: --pa per product (set on by the page script) ============================================================ */ .page-product{overflow-x:hidden} .page-product main section{position:relative} /* scroll reveal */ .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} @keyframes pdPulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes pdSpin{to{transform:rotate(360deg)}} /* section scaffolding */ .pd-sec{padding:110px 0} .pd-sec.alt{background:var(--bg-second)} .pd-sec.fade{background:linear-gradient(180deg,var(--bg-second),var(--bg-first))} .pd-head{text-align:center;max-width:820px;margin:0 auto 44px;padding:0 20px} .pd-head .eyebrow{margin-bottom:14px} .pd-head h2{font-size:clamp(30px,4vw,50px);line-height:1.08;margin-bottom:16px;color:#f0f6f0} .pd-head p{font-size:16.5px;color:var(--text-p2);line-height:1.6} /* ============ HERO ============ */ .pd-hero{position:relative;padding:calc(64px + 8vh) 0 90px;overflow:hidden; background: radial-gradient(880px 440px at 72% -6%, color-mix(in srgb,var(--pa,#a2faa3) 8%,transparent), transparent 62%), linear-gradient(180deg,var(--bg-first),var(--bg-second) 76%)} .pd-hero-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:52px;align-items:center} .pd-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-p2); text-decoration:none;margin-bottom:24px;transition:color var(--dur-2)} .pd-back:hover{color:var(--brand)} .pd-back .nv-arrow{display:inline-block;transition:transform var(--dur-2)} .pd-back:hover .nv-arrow{transform:translateX(-4px)} [dir="rtl"] .pd-back .nv-arrow{transform:scaleX(-1)} [dir="rtl"] .pd-back:hover .nv-arrow{transform:scaleX(-1) translateX(-4px)} .pd-hero h1{font-size:clamp(31px,4.3vw,53px);line-height:1.07;color:#f2f7f2;margin-bottom:16px} .pd-hero .pd-sub{font-size:16.5px;color:var(--text-p2);line-height:1.6;max-width:46ch;margin-bottom:26px} .pd-live{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--text-p2);border:1px solid #2c2c2c;border-radius:999px; padding:8px 15px;background:#101310;margin-bottom:20px} .pd-live i{width:7px;height:7px;border-radius:50%;background:var(--pa,var(--brand)); animation:pdPulse 1.8s ease-in-out infinite} .pd-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .pd-visual{position:relative;min-width:0} /* dashboard frame + svg text classes (shared by page visuals) */ .pd-dash{border-radius:20px;overflow:hidden;border:1px solid #262a26;background:#0c0e0c} .pd-dash svg{width:100%;height:auto;display:block} .lv-svg text{font-family:inherit} .lv-lab{font-size:8.5px;fill:#7d8b7d;letter-spacing:.06em} .lv-lab2{font-size:9.5px;fill:var(--text-p1)} .lv-num{font-size:14px;font-weight:700;fill:var(--pa,#a2faa3)} .lv-num2{font-size:10px;font-weight:700;fill:var(--pa,#a2faa3)} .lv-sub{font-size:7.5px;fill:#8a978a} .lv-feed{font-size:7.5px;fill:#6f7d6f} /* KPI cards */ .pd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .pd-kpi{background:#121511;border:1px solid #22261f;border-radius:12px;padding:10px 12px} .pd-kpi strong{font-size:17px;color:var(--pa,var(--brand));display:block;line-height:1.1; font-variation-settings:'wdth' 104} .pd-kpi span{font-size:9.5px;color:var(--text-p2);display:block;margin-top:4px;line-height:1.3} /* chips */ .pd-chips{display:flex;flex-wrap:wrap;gap:8px} .pd-chips span,.pd-chip{font-size:11px;padding:6px 13px;border-radius:999px;border:1px solid #2c2c2c; background:#141714;color:var(--text-p1)} .pd-chip.on{border-color:var(--brand-line);background:var(--brand-dim);color:var(--brand)} /* demo-data caption (illustrative values disclaimer) */ .pd-demo{font-size:10.5px;color:var(--text-ph);letter-spacing:.04em;margin-top:10px;text-align:center} /* ============ STICKY STORYTELLING ============ */ .pd-space{position:relative} .pd-sticky{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column; justify-content:center;overflow:hidden;padding:calc(64px + 3vh) 0 4vh} .pd-rail{display:flex;gap:6px} .pd-rail i,.pd-seg{flex:1;height:3px;border-radius:2px;background:#2c2c2c;transition:background .4s} .pd-rail i.done,.pd-seg.done{background:var(--pa,var(--brand))} .pd-rail i.cur,.pd-seg.cur{background:var(--pa,var(--brand));animation:pdPulse 1.6s ease-in-out infinite} /* story layout: visual + text */ .pd-story{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center; width:min(1200px,94vw);margin:0 auto} .pd-story-visual{position:relative;background:#101210;border:1px solid #262a26;border-radius:24px; padding:22px;min-height:0} .pd-story-text{transition:opacity .35s,transform .35s} .pd-story-text.swap{opacity:0;transform:translateY(12px)} .pd-story-tag{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--pa,var(--brand));border:1px solid color-mix(in srgb,var(--pa,#a2faa3) 35%,transparent); border-radius:999px;padding:5px 12px;background:color-mix(in srgb,var(--pa,#a2faa3) 8%,transparent); margin-bottom:16px} .pd-story-text h3{font-size:clamp(23px,2.5vw,32px);color:#eef4ee;line-height:1.14;margin-bottom:13px} .pd-story-text p{font-size:15px;color:var(--text-p2);line-height:1.7;max-width:52ch;margin:0 0 22px} /* step list (vertical journey) */ .pd-steps{display:flex;flex-direction:column;gap:0;position:relative} .pd-step{display:flex;gap:16px;align-items:flex-start;padding:13px 0;opacity:.34; transition:opacity .5s} .pd-step.on{opacity:1} .pd-step-n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-size:11px;color:var(--text-p2);border:1px solid #2c2c2c;background:#101210;transition:.4s} .pd-step.on .pd-step-n{border-color:var(--pa,var(--brand));color:var(--pa,var(--brand)); background:color-mix(in srgb,var(--pa,#a2faa3) 9%,transparent)} .pd-step h4{font-size:15px;color:#eef4ee;margin-bottom:3px} .pd-step p{font-size:12.5px;color:var(--text-p2);margin:0;line-height:1.5} /* ============ MODULE ARCHITECTURE ============ */ .pd-arch{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:start} .pd-arch-list{display:flex;flex-direction:column;gap:8px} .pd-arch-item{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer; font:inherit;font-size:13.5px;color:var(--text-p1);padding:13px 16px;border-radius:13px; background:#121511;border:1px solid #262a26;transition:border-color .3s,background .3s} .pd-arch-item svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--text-p2);fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s} .pd-arch-item:hover{border-color:#3d453d} .pd-arch-item.on{border-color:color-mix(in srgb,var(--pa,#a2faa3) 55%,#262a26); background:color-mix(in srgb,var(--pa,#a2faa3) 7%,#121511)} .pd-arch-item.on svg{stroke:var(--pa,var(--brand))} .pd-arch-view{position:sticky;top:96px} /* ============ ROLES ============ */ .pd-roles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:30px} .pd-role{font:inherit;font-size:13px;font-weight:600;color:var(--text-p1);cursor:pointer; padding:10px 20px;border-radius:999px;border:1px solid #2c2c2c;background:#121511; transition:border-color .35s,color .35s,background .35s} .pd-role:hover{border-color:#3d453d} .pd-role.is-active{background:var(--brand);border-color:var(--brand);color:#121212} /* ============ INTEGRATIONS ============ */ .pd-int-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .pd-int{position:relative;padding:16px 14px;border-radius:14px;background:#141714; border:1px solid #262a26;text-align:center;transition:border-color .35s,transform .4s var(--ease)} .pd-int:hover{transform:translateY(-4px);border-color:#374037} .pd-int svg{width:20px;height:20px;stroke:var(--pa,var(--brand));fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;margin-bottom:9px} .pd-int h4{font-size:12.5px;color:#eef4ee;margin-bottom:6px} .pd-int em{display:inline-block;font-style:normal;font-size:8.5px;letter-spacing:.1em; text-transform:uppercase;padding:3px 8px;border-radius:999px} .pd-int em.av{background:var(--brand-dim);color:var(--brand);border:1px solid var(--brand-line)} .pd-int em.su{background:#171a17;color:var(--text-p1);border:1px solid #2c2c2c} .pd-int em.cu{background:transparent;color:var(--text-p2);border:1px dashed #3a3a3a} /* ============ IMPLEMENTATION TIMELINE ============ */ .pd-time{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:pdt} .pd-time-step{position:relative;padding:20px;border-radius:16px;background:#141714; border:1px solid #262a26} .pd-time-step::before{counter-increment:pdt;content:'0' counter(pdt);display:block; font-size:11px;letter-spacing:.16em;color:var(--pa,var(--brand));margin-bottom:12px} .pd-time-step h4{font-size:14.5px;color:#eef4ee;margin-bottom:6px} .pd-time-step p{font-size:11.5px;color:var(--text-p2);line-height:1.55;margin:0} /* ============ FAQ ============ */ .pd-faq{display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto} .pd-faq-item{border:1px solid #262a26;border-radius:16px;background:#141714;overflow:hidden; transition:border-color .35s} .pd-faq-item.open{border-color:#374037} .pd-faq-head{width:100%;display:flex;align-items:center;gap:16px;padding:19px 22px;background:none; border:none;color:inherit;font-family:inherit;cursor:pointer;text-align:start} .pd-faq-head h4{flex:1;font-size:15.5px;font-weight:600;color:#eef4ee} .pd-faq-x{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid #3a3a3a; position:relative;transition:transform .45s var(--ease),border-color .35s} .pd-faq-x::before,.pd-faq-x::after{content:'';position:absolute;left:50%;top:50%; background:var(--text-p1);transition:background .3s} .pd-faq-x::before{width:10px;height:1.6px;transform:translate(-50%,-50%)} .pd-faq-x::after{width:1.6px;height:10px;transform:translate(-50%,-50%)} .pd-faq-item.open .pd-faq-x{transform:rotate(135deg);border-color:var(--brand-line)} .pd-faq-item.open .pd-faq-x::before,.pd-faq-item.open .pd-faq-x::after{background:var(--brand)} .pd-faq-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .pd-faq-body p{padding:0 22px 20px;font-size:13.5px;color:var(--text-p2);line-height:1.7;margin:0} /* ============ RELATED PRODUCTS ============ */ .pd-rel-rail{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .pd-rel{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14px; font-weight:600;color:var(--text-p1);padding:14px 24px;border-radius:999px;background:#121511; border:1px solid #2c2c2c;transition:border-color .35s,transform .35s var(--ease),box-shadow .35s} .pd-rel i{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--brand));flex:0 0 auto} .pd-rel:hover{border-color:color-mix(in srgb,var(--pc,var(--brand)) 55%,#2c2c2c); transform:translateY(-3px); box-shadow:0 14px 34px -16px color-mix(in srgb,var(--pc,var(--brand)) 45%,transparent)} .pd-svc-link{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:14.5px; font-weight:600;color:var(--brand);text-decoration:none} .pd-svc-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)} .pd-svc-link:hover svg{transform:translateX(5px)} [dir="rtl"] .pd-svc-link svg{transform:scaleX(-1)} [dir="rtl"] .pd-svc-link:hover svg{transform:scaleX(-1) translateX(5px)} /* ============ FINALE ============ */ .pd-finale{position:relative;text-align:center;padding:76px 30px;border-radius:28px;overflow:hidden; background:linear-gradient(180deg,#161916,#0e100e);border:1px solid #2a2e2a} .pd-finale-glow{position:absolute;inset:-45%;pointer-events:none; background:conic-gradient(from 0deg,transparent 68%,color-mix(in srgb,var(--pa,#a2faa3) 16%,transparent) 82%,transparent 96%); animation:pdSpin 10s linear infinite} .pd-finale>*:not(.pd-finale-glow){position:relative;z-index:1} .pd-finale .eyebrow{margin-bottom:16px} .pd-finale h2{font-size:clamp(28px,3.8vw,46px);line-height:1.1;color:#f2f7f2;max-width:720px;margin:0 auto 16px} .pd-finale p{font-size:16px;color:var(--text-p2);max-width:560px;margin:0 auto 32px;line-height:1.6} .pd-finale .pd-ctas{justify-content:center} /* ============ PROPOSAL PANEL ============ */ .prop-panel{position:fixed;bottom:32px;inset-inline-end:32px;z-index:130; width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 64px);overflow-y:auto; background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg); box-shadow:var(--shadow-dark);padding:32px; opacity:0;pointer-events:none;transform:translateY(24px); transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);scrollbar-width:thin} .prop-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)} .prop-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px} .prop-head h3{font-size:22px;margin-bottom:6px} .prop-head p{font-size:13.5px;color:var(--text-p2);line-height:1.5} .prop-close{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--stroke); background:none;display:grid;place-items:center;cursor:pointer;transition:border-color var(--dur-2)} .prop-close:hover{border-color:var(--brand-line)} .prop-close svg{width:16px;height:16px;stroke:var(--text-p1);stroke-width:2;stroke-linecap:round} .prop-form{display:flex;flex-direction:column;gap:15px} .pf-row-2{display:grid;grid-template-columns:1fr 1fr;gap:15px} .prop-form label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-p1)} .prop-form input,.prop-form select,.prop-form textarea{ font:inherit;font-weight:400;font-size:14.5px;color:var(--text); background:var(--bg-second);border:1px solid var(--stroke);border-radius:var(--r-sm); padding:12px 14px;transition:border-color var(--dur-2),box-shadow var(--dur-2);width:100%} .prop-form input::placeholder,.prop-form textarea::placeholder{color:var(--text-ph)} .prop-form input:focus,.prop-form select:focus,.prop-form textarea:focus{ outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(162,250,163,.15)} .prop-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23989898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-inline-end:40px} [dir="rtl"] .prop-form select{background-position:left 12px center} .prop-form textarea{resize:vertical;min-height:70px} .prop-submit{justify-content:center;margin-top:4px} .pf-success{font-size:14px;color:var(--brand);background:var(--brand-dim);border:1px solid var(--brand-line); border-radius:var(--r-sm);padding:12px 16px;text-align:center;margin:0} .pf-success[hidden]{display:none} /* ============ RESPONSIVE ============ */ @media (max-width:960px){ .pd-hero-grid{grid-template-columns:1fr;gap:40px} .pd-arch{grid-template-columns:1fr} .pd-arch-view{position:static} .pd-int-grid{grid-template-columns:repeat(3,1fr)} .pd-time{grid-template-columns:1fr 1fr} } @media (max-width:860px){ .pd-sec{padding:70px 0} .pd-head{margin-bottom:28px} .pd-head h2{font-size:clamp(26px,7vw,34px)} .pd-head p{font-size:14.5px} .pd-hero{padding:calc(60px + 5vh) 0 70px} .pd-hero h1{font-size:clamp(27px,7.4vw,36px)} .pd-hero .pd-sub{font-size:14.5px} .pd-story{grid-template-columns:1fr;gap:20px;align-content:center} .pd-sticky{position:static;min-height:0;padding:70px 0} .pd-kpis{grid-template-columns:repeat(3,1fr);gap:8px} .pd-finale{padding:48px 20px} .prop-panel{bottom:16px;inset-inline-end:16px;padding:22px} .pf-row-2{grid-template-columns:1fr} } @media (max-width:560px){ .pd-int-grid{grid-template-columns:1fr 1fr} .pd-time{grid-template-columns:1fr} .pd-ctas .btn{width:100%;justify-content:center} } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce){ .rv{opacity:1!important;transform:none!important;transition:none} .pd-live i,.pd-rail i.cur,.pd-seg.cur{animation:none} .pd-story-text{transition:none} .pd-story-text.swap{opacity:1;transform:none} .pd-step{opacity:1;transition:none} .pd-finale-glow{animation:none;display:none} .pd-faq-body{transition:none} .prop-panel{transition:none} }