/* AnyWaste — non-critical stylesheet. Critical above-the-fold CSS is inlined in index.html . */ /* SCREEN MOCKUP */ .screen-wrap{position:relative;} .screen-browser{background:rgba(255,255,255,.04);border:1px solid rgba(43,181,160,.22);border-radius:14px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.45);position:relative;} .screen-browser::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--green));} .screen-chrome{background:rgba(255,255,255,.06);padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.07);} .chrome-dots{display:flex;gap:5px;} .chrome-dot{width:9px;height:9px;border-radius:50%;} .screen-img{width:100%;display:block;border-radius:0 0 12px 12px;} .screen-badge{position:absolute;bottom:-14px;right:20px;background:var(--green);color:#fff;font-family:var(--font-head);font-size:.68rem;font-weight:700;padding:5px 14px;border-radius:16px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 12px rgba(54,176,70,.4);} /* LIVE PLATFORM STRIP */ .live-strip{background:#fff;border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);padding:0;} .live-items{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap;} .live-item{display:flex;align-items:center;gap:9px;padding:18px 28px;border-right:1.5px solid var(--border);} .live-item:last-child{border-right:none;} .live-icon{width:34px;height:34px;background:var(--teal-light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;} .live-item-text strong{display:block;font-family:var(--font-head);font-size:.78rem;font-weight:700;color:var(--navy);} .live-item-text span{font-size:.72rem;color:var(--teal-dark);font-family:var(--font-head);font-weight:600;} /* PROBLEM */ .problem-section{background:var(--off-white);padding:96px 0;} .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:44px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);} .problem-card{background:#fff;padding:36px 28px;transition:all var(--transition);} .problem-card:hover{transform:translateY(-4px);z-index:2;box-shadow:var(--shadow-md);} .problem-icon{width:50px;height:50px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px;} .icon-red{background:rgba(239,68,68,.1);} .icon-orange{background:rgba(189,93,58,.1);} .icon-amber{background:rgba(245,158,11,.1);} .icon-teal{background:rgba(43,181,160,.1);} .icon-navy{background:rgba(26,26,46,.07);} .icon-green{background:rgba(54,176,70,.1);} .problem-card h3{font-size:1rem;margin-bottom:10px;} .problem-card p{font-size:.86rem;line-height:1.6;} /* PLATFORM FEATURES */ .platform-section{background:#fff;padding:96px 0;} .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:56px 0;border-bottom:1px solid var(--border);} .feature-row:last-child{border-bottom:none;} .feature-row.reverse{direction:rtl;} .feature-row.reverse > *{direction:ltr;} .feature-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border);position:relative;} .feature-visual picture,.screen-browser picture{display:block;width:100%;} .feature-visual img,.screen-browser img{width:100%;height:auto;display:block;object-fit:contain;} .feature-visual::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--green));z-index:2;} .feature-content h3{font-size:1.5rem;margin-bottom:14px;} .feature-content p{margin-bottom:20px;font-size:.93rem;} .feature-points{display:flex;flex-direction:column;gap:9px;} .fp{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--text-light);} .fp::before{content:"✓";width:19px;height:19px;background:var(--teal);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0;} .status-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em;} .badge-live{background:rgba(54,176,70,.12);color:#2a8a2e;} .badge-soon{background:rgba(189,93,58,.1);color:var(--orange);} .badge-q3{background:rgba(43,181,160,.12);color:var(--teal-dark);} /* DWTS */ .dwts-section{background:var(--navy);padding:96px 0;position:relative;overflow:hidden;} .dwts-section::after{content:"DWTS";position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-family:var(--font-head);font-weight:900;font-size:18vw;color:rgba(43,181,160,.04);pointer-events:none;user-select:none;} .dwts-section h2{color:#fff;} .dwts-section p{color:rgba(255,255,255,.65);} .timeline{display:flex;align-items:flex-start;gap:0;margin-top:48px;position:relative;} .timeline::before{content:"";position:absolute;top:39px;left:7%;right:7%;height:3px;background:linear-gradient(90deg,var(--teal),var(--orange));z-index:0;} .tl-step{flex:1;text-align:center;position:relative;z-index:1;padding:0 12px;} .tl-marker{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-family:var(--font-head);font-weight:800;font-size:1.05rem;border:4px solid var(--navy);box-shadow:var(--shadow-md);} .m-teal{background:var(--teal);color:#fff;} .m-navy{background:var(--navy-mid);color:#fff;border-color:rgba(43,181,160,.3)!important;} .m-orange{background:var(--orange);color:#fff;} .m-green{background:var(--green);color:#fff;} .tl-step h4{color:#fff;font-size:.92rem;margin-bottom:7px;} .tl-step p{font-size:.8rem;color:rgba(255,255,255,.55);} .checklist{display:flex;flex-direction:column;gap:12px;margin-top:28px;} .cl-item{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(43,181,160,.15);border-radius:var(--radius-sm);padding:14px 18px;} .cl-icon{width:22px;height:22px;background:rgba(43,181,160,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:#fff;flex-shrink:0;margin-top:2px;} .cl-item p{color:rgba(255,255,255,.8);font-size:.88rem;margin:0;} /* INDUSTRIES */ .industries-section{padding:96px 0;background:var(--off-white);} .ind-tabs{display:flex;gap:0;background:#fff;border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:44px;width:fit-content;} .ind-tab{padding:11px 22px;font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--text-light);cursor:pointer;border-radius:8px;transition:all var(--transition);white-space:nowrap;} .ind-tab.active{background:var(--navy);color:#fff;} .ind-panel{display:none;} .ind-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} .pain-list{display:flex;flex-direction:column;gap:14px;margin-bottom:28px;} .pain-item{display:flex;gap:12px;align-items:flex-start;} .pain-icon{width:34px;height:34px;background:rgba(189,93,58,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;} .pain-item strong{display:block;font-family:var(--font-head);font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:2px;} .pain-item p{font-size:.82rem;margin:0;} .sol-box{background:var(--teal-light);border:1px solid rgba(43,181,160,.2);border-radius:var(--radius-md);padding:28px;} .sol-box h4{color:var(--teal-dark);margin-bottom:16px;font-size:.92rem;} .sol-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(43,181,160,.1);font-size:.85rem;color:var(--navy);} .sol-item:last-child{border-bottom:none;} .sol-tick{width:18px;height:18px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.58rem;color:#fff;font-weight:700;flex-shrink:0;} .roi-box{background:var(--navy);border-radius:var(--radius-md);padding:20px 26px;margin-top:20px;display:flex;align-items:center;gap:14px;} .roi-box h4{color:var(--teal);font-size:.87rem;margin-bottom:3px;} .roi-box p{color:rgba(255,255,255,.6);font-size:.8rem;margin:0;} /* STATS BAR */ .stats-bar{background:linear-gradient(135deg,#1d8a93,#2F2F4E);padding:72px 0;} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center;} .stat-num{font-family:var(--font-head);font-size:2.8rem;font-weight:800;color:#fff;line-height:1;margin-bottom:7px;} .stat-label{font-family:var(--font-head);font-size:.75rem;font-weight:600;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em;} /* GLOBAL */ .global-section{background:#fff;padding:96px 0;} .roadmap-items{display:flex;flex-direction:column;gap:14px;margin-top:36px;} .rm-item{display:flex;align-items:center;gap:18px;background:var(--off-white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 22px;} .rm-date{font-family:var(--font-head);font-size:.72rem;font-weight:700;color:var(--teal);width:72px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em;} .rm-item h4{font-size:.9rem;margin-bottom:3px;} .rm-item p{font-size:.8rem;color:var(--text-light);margin:0;} /* PRICING */ .pricing-section{padding:96px 0;background:var(--off-white);} .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:stretch;} .pricing-card{background:#fff;border:2px solid var(--border);border-radius:var(--radius-lg);padding:36px;display:flex;flex-direction:column;transition:all var(--transition);position:relative;} .pricing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .pricing-card.featured{border-color:var(--teal);background:var(--navy);transform:translateY(-10px);box-shadow:var(--shadow-teal);} .pricing-card.featured:hover{transform:translateY(-16px);} .popular{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;font-family:var(--font-head);font-size:.68rem;font-weight:700;padding:4px 18px;border-radius:16px;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;} .p-tier{font-family:var(--font-head);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:7px;} .p-name{font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:var(--navy);margin-bottom:3px;} .featured .p-name{color:#fff;} .p-desc{font-size:.83rem;color:var(--text-light);margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border);} .featured .p-desc{color:rgba(255,255,255,.5);border-bottom-color:rgba(255,255,255,.1);} .p-price{display:flex;align-items:baseline;gap:3px;margin-bottom:6px;} .p-curr{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--navy);} .featured .p-curr{color:#fff;} .p-amount{font-family:var(--font-head);font-size:2.6rem;font-weight:800;line-height:1;color:var(--navy);} .featured .p-amount{color:#fff;} .p-period{font-size:.82rem;color:var(--text-light);} .featured .p-period{color:rgba(255,255,255,.45);} .p-features{list-style:none;margin:24px 0 28px;display:flex;flex-direction:column;gap:11px;flex:1;} .p-features li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--text-light);} .featured .p-features li{color:rgba(255,255,255,.7);} .p-features li::before{content:"✓";width:17px;height:17px;background:rgba(43,181,160,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.58rem;color:var(--teal);font-weight:700;flex-shrink:0;margin-top:2px;} /* ABOUT */ .about-section{padding:96px 0;background:#fff;} .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;} .team-card{background:var(--off-white);border-radius:var(--radius-md);padding:28px 22px;text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition);} .team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);} .team-av{width:72px;height:72px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:#fff;} .team-card h4{font-size:.9rem;margin-bottom:3px;} .team-role{font-family:var(--font-head);font-size:.7rem;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px;} .team-card p{font-size:.78rem;line-height:1.5;} .advisor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px;} .advisor-card{display:flex;gap:20px;border:1px solid var(--border);border-radius:var(--radius-md);padding:28px;transition:all var(--transition);align-items:flex-start;} .advisor-card:hover{border-color:var(--teal);box-shadow:var(--shadow-teal);} .adv-av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-mid));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1rem;font-weight:800;color:var(--teal);flex-shrink:0;} .adv-title{font-family:var(--font-head);font-size:.7rem;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;} .advisor-card p{font-size:.82rem;margin:0;} /* CTA */ .cta-banner{background:var(--orange);padding:72px 0;position:relative;overflow:hidden;} .cta-banner::before{content:"";position:absolute;top:-50%;right:-8%;width:550px;height:550px;background:rgba(255,255,255,.06);border-radius:50%;} .cta-banner h2{color:#fff;} .cta-banner p{color:rgba(255,255,255,.8);} /* CONTACT */ .contact-section{padding:80px 0 96px;background:var(--off-white);} .contact-grid{display:grid;grid-template-columns:1fr 1.55fr;gap:56px;align-items:start;} .contact-detail{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--border);} .contact-detail:last-of-type{border-bottom:none;} .cd-icon{width:40px;height:40px;background:var(--teal-light);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;} .cd-label{font-family:var(--font-head);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);margin-bottom:3px;} .cd-value{font-size:.88rem;color:var(--navy);} .contact-form-wrap{background:#fff;border-radius:var(--radius-lg);padding:44px;box-shadow:var(--shadow-md);overflow:visible;} /* HubSpot embedded form — Contact / Book a Demo */ .aw-hubspot-wrap{position:relative;min-height:880px;height:auto;overflow:visible;} .aw-hubspot-wrap::before{content:"Loading form…";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-head);font-size:.82rem;color:var(--text-light);letter-spacing:.04em;opacity:.7;pointer-events:none;} .aw-hubspot-wrap:has(iframe)::before,.aw-hubspot-wrap:has(form)::before{content:none;} .aw-hubspot-wrap:has(iframe),.aw-hubspot-wrap:has(form){min-height:880px;} .aw-hubspot-wrap .hs-form-frame{width:100%;height:auto;overflow:visible;} .aw-hubspot-wrap iframe{display:block;width:100% !important;max-width:100% !important;height:880px !important;min-height:880px !important;max-height:none !important;overflow:visible !important;border:0 !important;background:transparent !important;} .aw-hubspot-wrap form{font-family:var(--font-body);color:var(--navy);} .aw-hubspot-wrap form label{font-family:var(--font-head);font-size:.72rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:6px;} .aw-hubspot-wrap form input[type=text],.aw-hubspot-wrap form input[type=email],.aw-hubspot-wrap form input[type=tel],.aw-hubspot-wrap form input[type=number],.aw-hubspot-wrap form select,.aw-hubspot-wrap form textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.88rem;color:var(--navy);background:#fff;outline:none;transition:border-color .2s;box-sizing:border-box;} .aw-hubspot-wrap form input:focus,.aw-hubspot-wrap form select:focus,.aw-hubspot-wrap form textarea:focus{border-color:#2BB5A0;} .aw-hubspot-wrap form textarea{min-height:110px;resize:vertical;} .aw-hubspot-wrap form .hs-button,.aw-hubspot-wrap form input[type=submit]{background:var(--teal);color:#fff;border:none;border-radius:var(--radius-sm);padding:14px 28px;font-family:var(--font-head);font-weight:700;font-size:.88rem;cursor:pointer;transition:background .2s;text-align:center;width:auto;display:inline-block;} .aw-hubspot-wrap form .hs-button:hover,.aw-hubspot-wrap form input[type=submit]:hover{background:var(--teal-dark);} .aw-hubspot-wrap form .hs-error-msgs,.aw-hubspot-wrap form .hs-error-msg{color:#b3261e;font-size:.78rem;margin-top:4px;list-style:none;padding-left:0;} .aw-hubspot-wrap form fieldset{max-width:100% !important;} .aw-hubspot-wrap form .hs-richtext,.aw-hubspot-wrap form .hs-richtext p{font-size:.82rem;color:var(--text-light);line-height:1.55;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .fg{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;} .fg label{font-family:var(--font-head);font-size:.75rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;} .fg input,.fg select,.fg textarea{padding:13px 15px;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.9rem;color:var(--navy);background:#fff;transition:border-color var(--transition);outline:none;} .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--teal);} .fg textarea{resize:vertical;min-height:110px;} .form-cb{display:flex;align-items:flex-start;gap:11px;margin-bottom:20px;} .form-cb input[type="checkbox"]{width:17px;height:17px;accent-color:var(--teal);margin-top:2px;flex-shrink:0;cursor:pointer;} .form-cb label{font-size:.85rem;color:var(--text-light);cursor:pointer;line-height:1.5;} /* FOOTER */ footer{background:var(--navy);padding:72px 0 36px;border-top:1px solid rgba(43,181,160,.1);} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px;margin-bottom:56px;} .footer-brand .logo-text{font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:#fff;display:block;margin-bottom:10px;} .footer-brand .logo-text span{color:var(--teal);} .footer-brand p{font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.65;max-width:270px;} .footer-brand img{height:28px;width:auto;margin-bottom:10px;} .fc h5{font-family:var(--font-head);font-size:.68rem;font-weight:800;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;} .fc a{display:block;color:rgba(255,255,255,.52);text-decoration:none;font-size:.83rem;padding:4px 0;cursor:pointer;transition:color var(--transition);} .fc a:hover{color:var(--teal);} .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap;gap:14px;} .footer-legal{font-size:.75rem;color:rgba(255,255,255,.28);} .footer-legal a{color:rgba(255,255,255,.38);text-decoration:none;margin-left:14px;} .footer-legal a:hover{color:var(--teal);} .aw-social-row{display:flex;gap:8px;margin-top:14px;align-items:center;flex-wrap:wrap;} .aw-social-row a{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);transition:color .2s ease,background .2s ease,transform .2s ease;text-decoration:none;} .aw-social-row a:hover{color:#fff;background:rgba(43,181,160,.30);transform:translateY(-1px);} .aw-social-row svg{width:16px;height:16px;display:block;fill:currentColor;} .divider-bar{height:4px;background:linear-gradient(90deg,var(--teal),var(--green),var(--teal));border:none;margin:0;} /* ANIMATE */ .animate-in{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;} .animate-in.visible{opacity:1;transform:none;} /* ═══════════════════════════════════════ RESPONSIVE — TABLET (≤1024px) ═══════════════════════════════════════ */ @media(max-width:1024px){ .grid-4{grid-template-columns:repeat(2,1fr);} .team-grid{grid-template-columns:repeat(2,1fr);} .stats-grid{grid-template-columns:repeat(2,1fr);} .solution-grid{grid-template-columns:repeat(2,1fr);} } /* ═══════════════════════════════════════ RESPONSIVE — MOBILE (≤768px) ═══════════════════════════════════════ */ @media(max-width:768px){ /* Typography */ h1{font-size:1.75rem;line-height:1.2;} h2{font-size:1.35rem;} h3{font-size:1.1rem;} .section{padding:56px 0;} .container{padding:0 18px;} /* Nav — hide desktop, show hamburger */ .nav-links,.nav-cta{display:none!important;} .nav-hamburger{display:flex!important;} #nav .nav-inner{height:60px;} /* Mobile menu — full screen slide-down */ .mobile-menu{ top:60px; padding:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(16px); border-top:2px solid rgba(43,181,160,0.3); box-shadow:0 8px 40px rgba(0,0,0,0.5); max-height:0; overflow:hidden; transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease; opacity:0; display:block!important; } .mobile-menu.open{ max-height:100vh; opacity:1; } .mobile-menu a{ padding:16px 24px; font-size:1rem; font-family:var(--font-head); font-weight:600; color:rgba(26,46,42,0.85); border-bottom:1px solid rgba(43,181,160,0.12); display:flex; align-items:center; gap:10px; transition:background 0.2s,color 0.2s; min-height:52px; } .mobile-menu a:hover, .mobile-menu a:active{ background:rgba(43,181,160,0.08); color:#1d9183; } .mob-cta-row{ display:flex; gap:12px; padding:20px 24px; border-top:1px solid rgba(43,181,160,0.2); background:rgba(43,181,160,0.04); } .mob-cta-row a{ flex:1; text-align:center; padding:13px 16px!important; border-radius:8px!important; font-size:.85rem!important; border-bottom:none!important; min-height:auto!important; justify-content:center!important; } /* Hamburger → X animation */ .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);} .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Hero — stack columns */ .hero{padding-top:80px;min-height:auto;} .hero .grid-2{grid-template-columns:1fr;gap:32px;} .hero-sub{font-size:.95rem;} .hero-actions{flex-direction:column;gap:10px;} .hero-actions .btn{width:100%;justify-content:center;} .hero-trust{flex-wrap:wrap;gap:0;} .trust-item{padding:8px 12px;font-size:.67rem;} /* Animation containers — reduce height on mobile */ .anim-container-responsive{height:260px!important;} [style*="height:360px"]{height:240px!important;} [style*="height:380px"]{height:260px!important;} [style*="height:340px"]{height:220px!important;} [style*="height:480px"]{height:300px!important;} /* Supply chain hero animation — reduce height */ .aw-anim-container, [id="anim-hero"]{height:280px!important;} /* Feature rows — stack */ .grid-2{grid-template-columns:1fr;gap:28px;} .grid-3{grid-template-columns:1fr;} .feature-row{grid-template-columns:1fr;gap:32px;} .feature-row.reverse{direction:ltr;} .feature-row.reverse>*{direction:ltr;} /* Problem / solution grids */ .problem-grid{grid-template-columns:1fr;} .solution-grid{grid-template-columns:1fr;} /* Live strip */ .live-items{flex-direction:column;align-items:stretch;} .live-item{border-right:none;border-bottom:1px solid rgba(43,181,160,.15);padding:14px 20px;} .live-item:last-child{border-bottom:none;} /* Timeline */ .timeline{flex-direction:column;align-items:flex-start;gap:0;} .timeline::before{display:none;} .tl-step{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid rgba(43,181,160,.1);text-align:left;width:100%;} .tl-dot{width:52px;height:52px;min-width:52px;font-size:.75rem;margin:0;} .tl-step h4{margin-bottom:4px;} /* Pricing */ .pricing-grid{grid-template-columns:1fr;gap:16px;} .pricing-card.featured{transform:none;} /* Industries tabs */ .ind-tabs{flex-wrap:wrap;gap:6px;} .ind-tab{flex:1;min-width:calc(50% - 6px);text-align:center;font-size:.72rem;padding:9px 8px;} .ind-panel.active{grid-template-columns:1fr;} /* Stats */ .stats-grid{grid-template-columns:repeat(2,1fr);gap:16px;} .stat-number{font-size:2rem;} /* About team */ .team-grid{grid-template-columns:repeat(2,1fr);} .advisor-grid{grid-template-columns:1fr;} /* Contact */ .contact-grid{grid-template-columns:1fr;} /* Footer */ .footer-grid{grid-template-columns:1fr;gap:28px;} /* Forms */ .form-row{grid-template-columns:1fr;} /* Buttons — full width in CTA sections */ .cta-banner .btn{width:100%;justify-content:center;margin-bottom:8px;} /* Screen wraps — ensure images don't overflow */ .screen-wrap,.feature-visual,.screen-browser{border-radius:10px;} img{max-width:100%;height:auto;} /* Objection grid */ .obj-grid{grid-template-columns:1fr;} /* Supply chain nodes */ .sc-grid{grid-template-columns:repeat(2,1fr);} } /* ═══════════════════════════════════════ RESPONSIVE — SMALL MOBILE (≤480px) ═══════════════════════════════════════ */ @media(max-width:480px){ h1{font-size:1.5rem;} h2{font-size:1.2rem;} .section{padding:44px 0;} .container{padding:0 16px;} .team-grid{grid-template-columns:1fr;} .stats-grid{grid-template-columns:repeat(2,1fr);} .ind-tab{min-width:100%;font-size:.75rem;} .hero-badge{font-size:.62rem;} .trust-item{font-size:.62rem;padding:7px 10px;} .sc-grid{grid-template-columns:1fr;} } /* ── AnyWaste Animation ── */ #aw-anim-canvas { position:absolute;top:0;left:0;width:100%;height:100%;z-index:0; } #aw-anim-ui { position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;overflow:hidden; } /* Outer glow ring to tie animation into the hero background */ .aw-anim-container::after { content: ''; position: absolute; inset: -1px; border-radius: 21px; background: transparent; box-shadow: inset 0 0 40px rgba(43,181,160,0.08), 0 0 60px rgba(43,181,160,0.10); pointer-events: none; z-index: 20; } /* animation global reset removed — scoped to container only */ /* animation body styles removed - scoped below */ /* #aw-inner-ui handled above */ /* Floating document cards */ .aw-anim-container .doc-card { position: absolute; background: rgba(26,46,42,0.82); border: 1px solid rgba(43,181,160,0.35); border-radius: 10px; padding: 12px 16px; backdrop-filter: blur(8px); animation: floatCard linear infinite; white-space: nowrap; } .doc-card-title { font-size: 10px; font-weight: 700; color: rgba(43,181,160,0.9); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; } .doc-card-ref { font-size: 12px; font-weight: 800; color: #fff; margin-bottom: 3px; } .doc-card-detail { font-size: 9px; color: rgba(255,255,255,0.45); font-weight: 600; } .doc-card-badge { display: inline-block; margin-top: 6px; font-size: 8px; font-weight: 700; padding: 2px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .badge-green { background: rgba(54,176,70,0.2); color: #36b046; } .badge-teal { background: rgba(43,181,160,0.2); color: #2BB5A0; } .badge-orange{ background: rgba(189,93,58,0.2); color: #BD5D3A; } @keyframes floatCard { 0% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(-80px) translateX(20px) rotate(2deg); opacity: 0; } } /* Centre logo lockup */ .aw-anim-container #centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; } .aw-mark { width: 80px; height: 80px; background: linear-gradient(135deg, #2BB5A0, #36b046); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; font-weight: 900; color: #fff; box-shadow: 0 0 60px rgba(43,181,160,0.4); animation: pulseLogo 3s ease-in-out infinite; } @keyframes pulseLogo { 0%, 100% { box-shadow: 0 0 40px rgba(43,181,160,0.4); } 50% { box-shadow: 0 0 80px rgba(43,181,160,0.7), 0 0 120px rgba(43,181,160,0.2); } } .aw-wordmark { font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1; } .aw-wordmark span { color: #2BB5A0; } .aw-tagline { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 10px; } /* Node labels */ .aw-anim-container .node-label { position: absolute; text-align: center; pointer-events: none; } .node-label-title { font-size: 11px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; } .node-label-sub { font-size: 9px; font-weight: 600; color: rgba(43,181,160,0.8); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; } /* Pulse rings on nodes */ .aw-anim-container .pulse-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(43,181,160,0.4); animation: expandRing 2.5s ease-out infinite; } @keyframes expandRing { 0% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.8; } 100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; } } /* Stats ticker */ .aw-anim-container #ticker { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; background: rgba(26,46,42,0.88); border: 1px solid rgba(43,181,160,0.28); border-radius: 40px; padding: 14px 40px; backdrop-filter: blur(12px); } .ticker-item { text-align: center; } .ticker-num { font-size: 22px; font-weight: 800; color: #2BB5A0; line-height: 1; font-family: 'Montserrat', sans-serif; } .ticker-lbl { font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; } .ticker-div { width: 1px; background: rgba(255,255,255,0.1); align-self: stretch; } /* Top bar */ .aw-anim-container #topbar { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(26,46,42,0.88); border: 1px solid rgba(43,181,160,0.28); border-radius: 24px; padding: 8px 20px; backdrop-filter: blur(12px); } .live-dot-anim { width: 8px; height: 8px; background: #36b046; border-radius: 50%; animation: blink 1.5s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } } #topbar span { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; } /* ═══════════════════════════════════════════════════════════════ EWC CODE FINDER — Integrated styles (AnyWaste design system) All classes prefixed .ewc- to avoid conflicts ═══════════════════════════════════════════════════════════════ */ /* Page hero */ .ewc-hero { background: var(--navy); padding: 140px 0 72px; position: relative; overflow: hidden; } .ewc-hero::before { content: 'EWC'; position: absolute; right: -2%; top: 50%; transform: translateY(-50%); font-family: var(--font-head); font-weight: 900; font-size: 18vw; color: rgba(43,181,160,.04); pointer-events: none; user-select: none; letter-spacing: -.05em; } /* Search bar */ .ewc-search-wrap { position: relative; margin-bottom: 10px; } .ewc-search-row { display: flex; gap: 10px; align-items: stretch; } .ewc-input-wrap { flex: 1; position: relative; } .ewc-input-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; color: rgba(255,255,255,.4); pointer-events: none; } .ewc-input { width: 100%; height: 56px; padding: 0 18px 0 50px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 16px; color: #fff; outline: none; transition: border-color var(--transition), background var(--transition); } .ewc-input::placeholder { color: rgba(255,255,255,.4); } .ewc-input:focus { border-color: var(--teal); background: rgba(255,255,255,.12); } .ewc-btn-search { height: 56px; padding: 0 28px; background: var(--teal); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .ewc-btn-search:hover { background: var(--teal-dark); transform: translateY(-2px); } .ewc-btn-clear { height: 56px; padding: 0 18px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); font-family: var(--font-head); font-size: .82rem; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .ewc-btn-clear:hover { background: rgba(255,255,255,.15); color: #fff; } .ewc-helper { font-size: .78rem; color: rgba(255,255,255,.4); display: flex; align-items: center; gap: 6px; margin-top: 10px; } /* Autocomplete */ .ewc-suggest-box { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border: 1.5px solid var(--border); overflow: hidden; z-index: 50; display: none; } .ewc-suggest-box.open { display: block; } .ewc-suggest-item { padding: 10px 16px; font-size: .86rem; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); transition: background var(--transition); } .ewc-suggest-item:last-child { border-bottom: none; } .ewc-suggest-item:hover { background: var(--teal-light); } .ewc-suggest-code { font-family: 'Courier New', monospace; font-size: .78rem; font-weight: 700; color: var(--teal-dark); flex-shrink: 0; background: var(--teal-light); padding: 2px 8px; border-radius: 4px; } .ewc-suggest-desc { color: var(--text-light); font-size: .82rem; } /* Filter bar */ .ewc-filter-bar { background: #fff; border-bottom: 1.5px solid var(--border); padding: 12px 0; position: sticky; top: 70px; z-index: 90; box-shadow: var(--shadow-sm); } .ewc-filter-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ewc-filter-label { font-family: var(--font-head); font-size: .72rem; font-weight: 700; color: var(--grey); letter-spacing: .04em; text-transform: uppercase; } .ewc-chip { padding: 5px 16px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; color: var(--grey); font-family: var(--font-head); font-size: .75rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .ewc-chip:hover { border-color: var(--teal); color: var(--teal-dark); } .ewc-chip.active { background: var(--teal); border-color: var(--teal); color: #fff; } .ewc-chip.active-haz { background: #dc2626; border-color: #dc2626; color: #fff; } .ewc-chip.active-mir { background: #d97706; border-color: #d97706; color: #fff; } /* Main content */ .ewc-main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 72px; } /* Smart match panel */ .ewc-smart-panel { background: var(--navy); border: 1.5px solid rgba(43,181,160,.2); border-radius: var(--radius-md); padding: 22px 26px; margin-bottom: 28px; display: none; position: relative; overflow: hidden; } .ewc-smart-panel.visible { display: block; } .ewc-smart-panel::after { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(43,181,160,.12) 0%, transparent 70%); pointer-events: none; } .ewc-smart-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .ewc-smart-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(43,181,160,.15); border: 1px solid rgba(43,181,160,.3); color: var(--teal); font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; } .ewc-smart-title { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: #fff; } .ewc-thinking { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.55); font-size: .86rem; } .ewc-dots { display: inline-flex; gap: 4px; } .ewc-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: ewcDotPulse 1.2s ease-in-out infinite; } .ewc-dots span:nth-child(2) { animation-delay: .2s; } .ewc-dots span:nth-child(3) { animation-delay: .4s; } @keyframes ewcDotPulse { 0%,80%,100%{opacity:.2;transform:scale(.7);}40%{opacity:1;transform:scale(1);} } /* Smart result cards */ .ewc-smart-intro { font-size: .84rem; color: rgba(255,255,255,.65); line-height: 1.55; margin-bottom: 14px; padding: 10px 14px; background: rgba(43,181,160,.08); border-left: 3px solid rgba(43,181,160,.5); border-radius: 0 4px 4px 0; } .ewc-smart-intro strong { color: rgba(255,255,255,.9); } .ewc-smart-cards { display: flex; flex-direction: column; gap: 10px; } .ewc-sc { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: 16px 18px; transition: background var(--transition); } .ewc-sc:hover { background: rgba(255,255,255,.1); } .ewc-sc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .ewc-sc-code { font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: 700; color: var(--teal); letter-spacing: .5px; } .ewc-sc-context { font-family: var(--font-head); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); } .ewc-sc-desc { font-size: .86rem; font-weight: 600; color: #fff; margin-bottom: 6px; line-height: 1.4; } .ewc-sc-when { font-size: .8rem; color: rgba(255,255,255,.6); line-height: 1.55; margin-bottom: 8px; } .ewc-sc-when strong { color: rgba(255,255,255,.85); } .ewc-sc-note { font-size: .75rem; color: #f59e0b; margin-bottom: 8px; line-height: 1.5; } .ewc-sc-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ewc-btn-detail { height: 30px; padding: 0 14px; background: var(--teal); color: #fff; border: none; border-radius: 4px; font-family: var(--font-head); font-size: .72rem; font-weight: 700; cursor: pointer; transition: background var(--transition); } .ewc-btn-detail:hover { background: var(--teal-dark); } .ewc-btn-copy-sm { height: 30px; padding: 0 12px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; font-family: var(--font-head); font-size: .72rem; font-weight: 700; cursor: pointer; transition: background var(--transition); } .ewc-btn-copy-sm:hover { background: rgba(255,255,255,.18); } .ewc-smart-disc { margin-top: 12px; padding: 9px 14px; background: rgba(245,158,11,.1); border-left: 2px solid #f59e0b; border-radius: 0 4px 4px 0; font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.55; } /* ── Dynamic interpretation Smart Match panel ─────────────────────────── */ .ewc-interp { color: rgba(255,255,255,.92); font-family: var(--font-body); } .ewc-interp-banner { padding: 10px 14px; border-radius: 8px; font-family: var(--font-head); font-weight: 700; font-size: .82rem; margin-bottom: 14px; letter-spacing: .02em; } .ewc-interp-banner-haz { background: rgba(189,93,58,.18); color: #ffb591; border: 1px solid rgba(189,93,58,.55); } .ewc-interp-banner-mirror{ background: rgba(255,200,90,.14); color: #ffe1a1; border: 1px solid rgba(255,200,90,.45); } .ewc-interp-banner-non { background: rgba(54,176,70,.16); color: #b6f0bf; border: 1px solid rgba(54,176,70,.45); } .ewc-interp-banner-warn { background: rgba(255,200,90,.18); color: #ffe9b8; border: 1px solid rgba(255,200,90,.45); } .ewc-interp-scenario-name { font-family: var(--font-head); font-weight: 800; font-size: .98rem; color:#fff; margin-bottom: 6px; } .ewc-interp-intro { font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.78); margin-bottom: 10px; } .ewc-interp-triggers { font-size: .8rem; color: rgba(255,255,255,.7); margin-bottom: 12px; } .ewc-trigger-chip { display:inline-block; background: rgba(43,181,160,.18); color: #9be7d8; border:1px solid rgba(43,181,160,.4); border-radius: 12px; padding: 2px 9px; font-size: .72rem; font-family: var(--font-head); font-weight: 700; margin: 0 4px 4px 0; text-transform: lowercase; } .ewc-interp-section-title { font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: #2BB5A0; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; } .ewc-interp-why, .ewc-interp-wrong, .ewc-interp-alts, .ewc-interp-check, .ewc-interp-mirror { background: rgba(255,255,255,.04); border: 1px solid rgba(43,181,160,.18); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .ewc-interp-wrong { border-color: rgba(189,93,58,.45); background: rgba(189,93,58,.08); } .ewc-interp-mirror { border-color: rgba(255,200,90,.4); background: rgba(255,200,90,.06); } .ewc-interp-why p, .ewc-interp-wrong p, .ewc-interp-mirror p { font-size: .87rem; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0; } .ewc-interp-primary { background: linear-gradient(135deg, rgba(43,181,160,.16), rgba(54,176,70,.10)); border: 1px solid rgba(43,181,160,.55); border-radius: 12px; padding: 16px; margin-bottom: 14px; } .ewc-interp-label { font-family: var(--font-head); font-weight: 700; font-size: .72rem; color: #9be7d8; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .ewc-interp-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; } .ewc-interp-code { font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; color: #fff; letter-spacing: -.01em; } .ewc-interp-desc { font-size: .92rem; color: rgba(255,255,255,.85); margin-bottom: 8px; } .ewc-interp-reason { font-size: .85rem; line-height: 1.55; color: rgba(255,255,255,.78); margin-bottom: 10px; } .ewc-interp-reason strong { color: #fff; } .ewc-interp-actions { display: flex; gap: 8px; } .ewc-alt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ewc-alt-item { background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: 10px 12px; } .ewc-alt-head { display:flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ewc-alt-code { font-family: var(--font-head); font-weight: 800; font-size: .98rem; color: #fff; } .ewc-alt-desc { font-size: .82rem; color: rgba(255,255,255,.78); margin-bottom: 4px; } .ewc-alt-when { font-size: .8rem; color: rgba(255,255,255,.68); line-height: 1.5; } .ewc-alt-when strong { color: #9be7d8; } .ewc-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .ewc-check-list li { font-size: .83rem; color: rgba(255,255,255,.8); padding-left: 22px; position: relative; line-height: 1.5; } .ewc-check-list li::before { content: "▸"; color: #2BB5A0; position: absolute; left: 6px; top: 0; font-weight: 700; } .ewc-interp-disc { background: rgba(255,200,90,.08); border: 1px solid rgba(255,200,90,.4); border-radius: 10px; padding: 12px 14px; font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.82); margin-top: 14px; } .ewc-interp-disc strong { color: #ffd66b; } .ewc-no-match { color: rgba(255,255,255,.5); font-size: .86rem; padding: 4px 0; } /* Next step bar */ .ewc-next-bar { display: none; background: var(--teal-light); border: 1.5px solid rgba(43,181,160,.25); border-radius: var(--radius-sm); padding: 14px 20px; margin-bottom: 20px; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .ewc-next-bar.visible { display: flex; } .ewc-next-text { font-size: .88rem; color: var(--navy); } .ewc-next-text strong { font-family: var(--font-head); font-weight: 700; } .ewc-next-btns { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } /* Results meta */ .ewc-results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1.5px solid var(--border); } .ewc-count { font-size: .86rem; color: var(--grey); } .ewc-count strong { color: var(--navy); font-weight: 700; } .ewc-view-btns { display: flex; gap: 4px; } .ewc-view-btn { width: 34px; height: 34px; border: 1.5px solid var(--border); background: #fff; border-radius: 4px; font-size: 14px; color: var(--grey); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .ewc-view-btn.active, .ewc-view-btn:hover { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); } /* Result cards */ .ewc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .ewc-grid.two-col { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); } .ewc-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 20px 24px; cursor: pointer; transition: all var(--transition); border-left-width: 5px; position: relative; } .ewc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--teal); } .ewc-card.c-haz { border-left-color: #dc2626; } .ewc-card.c-non { border-left-color: var(--teal); } .ewc-card.c-mir { border-left-color: #d97706; } .ewc-card.c-unk { border-left-color: var(--border); } .ewc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .ewc-card-codes { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .ewc-card-code { font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: 700; color: var(--navy); background: var(--off-white); padding: 4px 12px; border-radius: var(--radius-sm); letter-spacing: .3px; } /* Hazard badges */ .ewc-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; } .ewc-badge-haz { background: #fee2e2; color: #b91c1c; } .ewc-badge-non { background: rgba(54,176,70,.12); color: #1e6823; } .ewc-badge-mir { background: rgba(217,119,6,.1); color: #92400e; } .ewc-badge-ass { background: rgba(217,119,6,.1); color: #92400e; } .ewc-badge-unk { background: var(--off-white); color: var(--grey); } .ewc-conf { font-family: var(--font-head); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; } .ewc-conf-high { background: rgba(54,176,70,.1); color: #1e6823; } .ewc-conf-medium { background: rgba(217,119,6,.1); color: #92400e; } .ewc-conf-low { background: var(--off-white); color: var(--grey); } .ewc-card-desc { font-size: .92rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; line-height: 1.4; font-family: var(--font-head); } .ewc-card-chapter { font-size: .76rem; color: var(--grey); margin-bottom: 10px; } .ewc-card-chapter code { background: var(--off-white); padding: 1px 6px; border-radius: 3px; font-size: .72rem; margin-right: 4px; } .ewc-card-use { font-size: .8rem; color: var(--text-light); background: var(--off-white); border-left: 3px solid var(--border); padding: 8px 12px; border-radius: 0 4px 4px 0; margin-bottom: 12px; line-height: 1.5; } .ewc-card-use strong { color: var(--teal-dark); } /* Card action rows */ .ewc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .ewc-card-value { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); } .ewc-va-btn { height: 30px; padding: 0 12px; border-radius: 4px; border: none; font-family: var(--font-head); font-size: .7rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; gap: 4px; } .ewc-va-primary { background: var(--orange); color: #fff; } .ewc-va-primary:hover { background: var(--orange-dark); } .ewc-va-save { background: var(--teal-light); color: var(--teal-dark); border: 1.5px solid rgba(43,181,160,.25) !important; } .ewc-va-save:hover { background: #c2e8e0; } .ewc-va-save.saved { background: rgba(54,176,70,.1); color: #1e6823; border-color: rgba(54,176,70,.25) !important; } .ewc-va-email { background: var(--off-white); color: var(--grey); border: 1.5px solid var(--border) !important; } .ewc-va-email:hover { background: var(--border); color: var(--navy); } .ewc-btn-copied { background: var(--teal) !important; color: #fff !important; } /* State boxes */ .ewc-state { text-align: center; padding: 64px 24px; } .ewc-state-icon { font-size: 44px; opacity: .3; margin-bottom: 14px; } .ewc-state h3 { font-family: var(--font-head); font-size: 1.1rem; color: var(--navy); margin-bottom: 8px; } .ewc-state p { font-size: .86rem; color: var(--grey); max-width: 380px; margin: 0 auto; } .ewc-spinner-wrap { text-align: center; padding: 48px; } .ewc-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--teal); border-radius: 50%; animation: ewcSpin .7s linear infinite; margin: 0 auto 14px; } @keyframes ewcSpin { to { transform: rotate(360deg); } } /* Detail modal */ .ewc-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(26,46,42,.65); backdrop-filter: blur(5px); z-index: 1100; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; } .ewc-modal-overlay.open { display: flex; } .ewc-modal { background: #fff; border-radius: var(--radius-lg); max-width: 700px; width: 100%; margin: auto; box-shadow: var(--shadow-lg); overflow: hidden; animation: ewcModalIn .25s ease-out; } @keyframes ewcModalIn { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ewc-modal-head { background: var(--navy); padding: 26px 30px; position: relative; } .ewc-modal-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .ewc-modal-close:hover { background: rgba(255,255,255,.2); } .ewc-modal-code-lbl { font-family: var(--font-head); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; } .ewc-modal-title { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: #fff; line-height: 1.3; margin-bottom: 12px; } .ewc-modal-badges { display: flex; gap: 8px; flex-wrap: wrap; } .ewc-modal-body { padding: 26px 30px; } .ewc-ms { margin-bottom: 24px; } .ewc-ms-label { font-family: var(--font-head); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1.5px solid var(--border); } .ewc-plain-box { background: var(--teal-light); border-left: 4px solid var(--teal); padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .88rem; line-height: 1.6; color: var(--navy); } .ewc-haz-box { display: flex; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .86rem; line-height: 1.55; } .ewc-haz-box.haz { background: #fee2e2; border: 1px solid #fca5a5; } .ewc-haz-box.non { background: rgba(54,176,70,.08); border: 1px solid rgba(54,176,70,.25); } .ewc-haz-box.mir { background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.25); } .ewc-haz-box.unk { background: var(--off-white); border: 1px solid var(--border); } .ewc-haz-icon { font-size: 20px; flex-shrink: 0; } .ewc-haz-reason { font-size: .8rem; color: var(--text-light); margin-top: 4px; } .ewc-mirror-warn { margin-top: 10px; padding: 10px 14px; background: rgba(217,119,6,.08); border-left: 3px solid #d97706; border-radius: 0 4px 4px 0; font-size: .8rem; color: #92400e; } .ewc-source-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; } .ewc-source-tbl th { text-align: left; padding: 8px 12px; background: var(--off-white); color: var(--grey); font-weight: 600; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1.5px solid var(--border); } .ewc-source-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--off-white); vertical-align: top; line-height: 1.5; } .ewc-source-tbl tr:last-child td { border-bottom: none; } .ewc-src-name { font-weight: 600; font-size: .78rem; color: var(--navy); } .ewc-src-link { font-size: .72rem; color: var(--teal); display: block; margin-top: 2px; } .ewc-src-link:hover { text-decoration: underline; } .ewc-src-italic { font-style: italic; color: var(--text-light); } .ewc-src-na { font-size: .76rem; color: var(--grey); } .ewc-src-ok { background: rgba(54,176,70,.1); color: #1e6823; padding: 2px 8px; border-radius: 10px; font-size: .65rem; font-weight: 600; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; } .ewc-src-ver { background: rgba(217,119,6,.1); color: #92400e; padding: 2px 8px; border-radius: 10px; font-size: .65rem; font-weight: 600; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; } .ewc-related-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ewc-rel-chip { font-family: 'Courier New', monospace; font-size: .78rem; font-weight: 700; padding: 5px 12px; background: var(--off-white); color: var(--navy); border: 1.5px solid var(--border); border-radius: 4px; cursor: pointer; transition: all var(--transition); } .ewc-rel-chip:hover { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); } .ewc-mistakes { list-style: none; } .ewc-mistakes li { padding: 8px 0; border-bottom: 1px solid var(--off-white); font-size: .82rem; display: flex; gap: 8px; align-items: flex-start; color: var(--text-light); } .ewc-mistakes li:last-child { border-bottom: none; } .ewc-mistakes li::before { content: '⚠'; color: #d97706; flex-shrink: 0; } .ewc-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ewc-tag { font-size: .7rem; padding: 3px 10px; background: var(--off-white); border-radius: 20px; color: var(--grey); font-family: 'Courier New', monospace; } .ewc-modal-cta { background: var(--off-white); border-top: 1.5px solid var(--border); padding: 20px 30px; } .ewc-disc-check { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--text-light); line-height: 1.5; cursor: pointer; margin-bottom: 16px; } .ewc-disc-check input { margin-top: 2px; accent-color: var(--teal); } .ewc-modal-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; } .ewc-modal-btn-primary { height: 44px; padding: 0 22px; background: var(--teal); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: .86rem; opacity: .4; pointer-events: none; transition: all var(--transition); cursor: pointer; } .ewc-modal-btn-primary.enabled { opacity: 1; pointer-events: all; } .ewc-modal-btn-primary.enabled:hover { background: var(--teal-dark); } .ewc-modal-btn-secondary { height: 44px; padding: 0 18px; background: transparent; color: var(--teal); border: 1.5px solid var(--teal); border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: .86rem; cursor: pointer; transition: all var(--transition); } .ewc-modal-btn-secondary:hover { background: var(--teal-light); } .ewc-modal-disc { margin-top: 12px; padding: 10px 14px; background: rgba(217,119,6,.08); border-left: 3px solid #d97706; border-radius: 0 4px 4px 0; font-size: .76rem; color: #92400e; line-height: 1.55; } /* Registration modal */ .ewc-reg-overlay { display: none; position: fixed; inset: 0; background: rgba(26,46,42,.6); backdrop-filter: blur(4px); z-index: 1200; align-items: center; justify-content: center; padding: 20px; } .ewc-reg-overlay.open { display: flex; } .ewc-reg-modal { background: #fff; border-radius: var(--radius-lg); max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); overflow: hidden; animation: ewcModalIn .22s ease-out; } .ewc-reg-head { background: var(--navy); padding: 22px 26px; position: relative; } .ewc-reg-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.1); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ewc-reg-tag { font-family: var(--font-head); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; } .ewc-reg-head h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: #fff; line-height: 1.3; margin-bottom: 4px; } .ewc-reg-head p { font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.5; } .ewc-code-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(43,181,160,.15); border: 1px solid rgba(43,181,160,.25); border-radius: 20px; padding: 4px 12px; font-family: 'Courier New', monospace; font-size: .82rem; font-weight: 700; color: var(--teal); margin-top: 10px; } .ewc-reg-body { padding: 22px 26px; } .ewc-rfield { margin-bottom: 12px; } .ewc-rfield label { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: .7rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; } .ewc-rfield label span { font-weight: 400; color: var(--grey); } .ewc-rfield input { width: 100%; height: 42px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .9rem; color: var(--text); background: #fff; outline: none; transition: border-color var(--transition); } .ewc-rfield input:focus { border-color: var(--teal); } .ewc-gdpr { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; color: var(--text-light); line-height: 1.5; margin: 14px 0; cursor: pointer; } .ewc-gdpr input { margin-top: 2px; accent-color: var(--teal); flex-shrink: 0; } .ewc-reg-submit { width: 100%; height: 46px; background: var(--teal); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: .9rem; cursor: pointer; transition: background var(--transition); margin-bottom: 10px; } .ewc-reg-submit:hover { background: var(--teal-dark); } .ewc-reg-skip { width: 100%; height: 38px; background: transparent; color: var(--grey); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .86rem; cursor: pointer; transition: all var(--transition); } .ewc-reg-skip:hover { background: var(--off-white); color: var(--navy); } .ewc-reg-note { font-size: .72rem; color: var(--grey); text-align: center; margin-top: 10px; line-height: 1.5; } .ewc-reg-success { padding: 28px; text-align: center; } .ewc-reg-success-icon { font-size: 42px; margin-bottom: 12px; } .ewc-reg-success h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--navy); margin-bottom: 8px; } /* Email quick capture */ .ewc-email-overlay { display: none; position: fixed; inset: 0; background: rgba(26,46,42,.5); backdrop-filter: blur(3px); z-index: 1200; align-items: center; justify-content: center; padding: 20px; } .ewc-email-overlay.open { display: flex; } .ewc-email-modal { background: #fff; border-radius: var(--radius-md); max-width: 400px; width: 100%; box-shadow: var(--shadow-lg); padding: 28px; animation: ewcModalIn .22s ease-out; position: relative; } .ewc-email-close { position: absolute; top: 12px; right: 12px; background: var(--off-white); border: none; color: var(--grey); width: 28px; height: 28px; border-radius: 50%; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ewc-email-modal h4 { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 6px; } .ewc-email-modal p { font-size: .82rem; color: var(--text-light); margin-bottom: 14px; line-height: 1.5; } .ewc-email-code { font-family: 'Courier New', monospace; font-size: .78rem; font-weight: 700; color: var(--teal-dark); background: var(--teal-light); padding: 3px 10px; border-radius: 4px; display: inline-block; margin-bottom: 14px; } .ewc-email-input { width: 100%; height: 42px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; font-family: var(--font-body); outline: none; margin-bottom: 4px; transition: border-color var(--transition); } .ewc-email-input:focus { border-color: var(--teal); } .ewc-email-consent { display: flex; gap: 8px; font-size: .76rem; color: var(--text-light); line-height: 1.5; margin: 12px 0; cursor: pointer; align-items: flex-start; } .ewc-email-consent input { margin-top: 2px; accent-color: var(--teal); flex-shrink: 0; } .ewc-email-send { width: 100%; height: 42px; background: var(--teal); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: .86rem; cursor: pointer; transition: background var(--transition); } .ewc-email-send:hover { background: var(--teal-dark); } .ewc-email-ok { text-align: center; padding: 10px 0; font-weight: 600; font-size: .88rem; color: var(--teal-dark); } /* Saved badge */ .ewc-saved-pill { display: none; align-items: center; gap: 5px; background: var(--teal-light); border: 1.5px solid rgba(43,181,160,.3); color: var(--teal-dark); padding: 5px 14px; border-radius: 20px; font-family: var(--font-head); font-size: .72rem; font-weight: 700; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .ewc-saved-pill.active { display: inline-flex; } .ewc-saved-pill:hover { background: #c2e8e0; } /* Disclaimer bar */ .ewc-disc-bar { background: rgba(217,119,6,.06); border-top: 2px solid rgba(217,119,6,.3); padding: 14px 0; } .ewc-disc-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; gap: 12px; align-items: flex-start; font-size: .8rem; color: #92400e; line-height: 1.55; } /* FAQ */ .ewc-faq-item { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; } .ewc-faq-q { padding: 15px 20px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; user-select: none; transition: color var(--transition); } .ewc-faq-q:hover { color: var(--teal-dark); } .ewc-faq-icon { font-size: 20px; color: var(--grey); transition: transform var(--transition), color var(--transition); flex-shrink: 0; line-height: 1; font-weight: 300; } .ewc-faq-item.open .ewc-faq-icon { transform: rotate(45deg); color: var(--teal); } .ewc-faq-a { display: none; padding: 0 20px 16px; font-size: .86rem; color: var(--text-light); line-height: 1.65; border-top: 1px solid var(--teal-light); padding-top: 12px; } .ewc-faq-item.open .ewc-faq-a { display: block; } /* Exit intent */ .ewc-exit-overlay { display: none; position: fixed; inset: 0; background: rgba(26,46,42,.45); z-index: 1300; align-items: center; justify-content: center; padding: 20px; } .ewc-exit-overlay.open { display: flex; } .ewc-exit-modal { background: #fff; border-radius: var(--radius-md); max-width: 380px; width: 100%; box-shadow: var(--shadow-lg); padding: 28px; text-align: center; position: relative; animation: ewcModalIn .22s ease-out; } .ewc-exit-close { position: absolute; top: 12px; right: 12px; background: var(--off-white); border: none; color: var(--grey); width: 28px; height: 28px; border-radius: 50%; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ewc-exit-modal h4 { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--navy); margin-bottom: 8px; } .ewc-exit-modal p { font-size: .82rem; color: var(--text-light); margin-bottom: 18px; line-height: 1.5; } .ewc-exit-btn { width: 100%; height: 44px; background: var(--teal); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: .88rem; cursor: pointer; transition: background var(--transition); margin-bottom: 10px; } .ewc-exit-btn:hover { background: var(--teal-dark); } .ewc-exit-skip { background: none; border: none; font-size: .82rem; color: var(--grey); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* Responsive */ @media(max-width:768px) { .ewc-search-row { flex-wrap: wrap; } .ewc-btn-search { width: 100%; justify-content: center; height: 48px; } .ewc-filter-bar { position: static; } .ewc-grid.two-col { grid-template-columns: 1fr; } .ewc-modal-overlay { padding: 0; align-items: flex-end; } .ewc-modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; overflow-y: auto; } .ewc-modal-body, .ewc-modal-head, .ewc-modal-cta { padding-left: 20px; padding-right: 20px; } } /* ── Legal document pages (DPA, Privacy, Terms, Cookies) ─────────────── */ .legal-doc { padding: 64px 0 96px; background: var(--off-white); } .legal-wrap { max-width: 880px; margin: 0 auto; } .legal-body { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 44px 56px; font-size: .94rem; line-height: 1.75; color: var(--navy); } .legal-body p { margin: 0 0 14px; } .legal-body p.legal-subnum { padding-left: 56px; position: relative; margin: 0 0 12px; } .legal-body p.legal-subnum .num { position: absolute; left: 0; top: 0; font-family: var(--font-head); font-weight: 700; color: var(--teal-dark); font-size: .88rem; letter-spacing: .02em; min-width: 48px; } .legal-h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--navy); margin: 40px 0 16px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; line-height: 1.3; } .legal-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal-h2 .num { color: var(--teal); font-size: 1.05rem; font-weight: 800; min-width: 40px; } .legal-h2.legal-schedule { color: var(--orange-dark); border-top-color: rgba(189,93,58,.25); padding-top: 24px; margin-top: 56px; } .legal-h2.legal-schedule .num { color: var(--orange); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; min-width: 110px; } .legal-h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--navy); margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; } .legal-h3 .num { color: var(--teal-dark); font-weight: 700; min-width: 40px; font-size: .9rem; } .legal-h4 { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--navy); margin: 22px 0 10px; text-transform: uppercase; letter-spacing: .04em; } .legal-list { margin: 0 0 18px 0; padding: 0; list-style: none; } .legal-list li { position: relative; padding: 6px 0 6px 22px; line-height: 1.7; } .legal-list li::before { content: "▸"; position: absolute; left: 4px; top: 6px; color: var(--teal); font-weight: 700; } .legal-list li .lc { font-family: var(--font-head); font-weight: 700; color: var(--teal-dark); margin-right: 6px; } .legal-callout { background: var(--teal-light); border: 1px solid rgba(43,181,160,.3); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); padding: 18px 22px; margin: 22px 0; } .legal-callout p { margin: 0 0 8px; font-size: .92rem; color: var(--navy); line-height: 1.65; } .legal-callout p:last-child { margin-bottom: 0; } .legal-callout p strong { color: var(--teal-dark); font-family: var(--font-head); letter-spacing: .02em; } .legal-table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); } .legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .legal-table tr:nth-child(even) td { background: var(--off-white); } .legal-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6; } .legal-table tr:last-child td { border-bottom: 0; } .legal-table td:first-child { font-family: var(--font-head); font-weight: 700; color: var(--navy); width: 32%; background: rgba(43,181,160,.05); } .legal-body a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; } .legal-body a:hover { color: var(--navy); } @media (max-width: 800px) { .legal-body { padding: 28px 22px; font-size: .9rem; } .legal-h2 { font-size: 1.15rem; } .legal-body p.legal-subnum { padding-left: 48px; } } .legal-tbc { background: rgba(255,200,90,.18); color: #8a6d2a; font-style: italic; padding: 1px 6px; border-radius: 3px; font-family: var(--font-head); font-size: .82rem; font-weight: 600; } /* ── Cookie consent pop-up ────────────────────────────────────────── */ .aw-cookie-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(10, 22, 20, 0.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .35s ease; } .aw-cookie-overlay.aw-cookie-show { opacity: 1; pointer-events: auto; } .aw-cookie-banner { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140%); width: calc(100% - 40px); max-width: 760px; z-index: 9999; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--teal); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(10,22,20,0.32); font-family: var(--font-body); color: var(--navy); transition: transform .45s cubic-bezier(.16,.84,.44,1), opacity .25s ease; opacity: 0; } .aw-cookie-banner.aw-cookie-show { transform: translateX(-50%) translateY(0); opacity: 1; } .aw-cookie-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 24px; } .aw-cookie-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; align-self: start; padding-top: 4px; } .aw-cookie-text h3 { margin: 0 0 6px; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--navy); } .aw-cookie-text p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--text-light); } .aw-cookie-text a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 600; } .aw-cookie-text a:hover { color: var(--navy); } .aw-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; } .aw-cookie-btn { font-family: var(--font-head); font-weight: 700; font-size: .82rem; padding: 11px 20px; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; } .aw-cookie-decline { background: #fff; color: var(--navy); border-color: var(--border); } .aw-cookie-decline:hover { background: var(--off-white); border-color: var(--navy); } .aw-cookie-accept { background: var(--teal); color: #fff; } .aw-cookie-accept:hover { background: var(--teal-dark); } /* Mobile — stack into a vertical layout */ @media (max-width: 700px) { .aw-cookie-banner { bottom: 12px; width: calc(100% - 16px); } .aw-cookie-inner { grid-template-columns: 1fr; gap: 14px; padding: 18px 18px; } .aw-cookie-icon { display: none; } .aw-cookie-actions { width: 100%; flex-direction: column-reverse; } .aw-cookie-btn { width: 100%; padding: 13px 16px; } } /* ── Homepage proposition banner ──────────────────────────────────── */ .home-banner { background: #ffffff; padding: 94px 0 22px; /* 70 nav + 24 own; 22 below for breathing space */ border-bottom: 3px solid var(--teal); position: relative; } .home-banner-inner { display: flex; align-items: center; gap: 22px; } .home-banner-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--teal-light); border: 2px solid rgba(43,181,160,.30); display: flex; align-items: center; justify-content: center; color: var(--teal-dark); } .home-banner-icon svg { width: 28px; height: 28px; display: block; } .home-banner-text { min-width: 0; } .home-banner-text h2 { margin: 0 0 4px; font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--navy); } .home-banner-text p { margin: 0; font-family: var(--font-body); font-size: .95rem; line-height: 1.55; color: var(--text-light); } /* When the banner is present, the hero becomes a content-led section (no 100vh min-height) so empty space below the animation collapses to a deliberate, modest gap before the next section. */ .home-banner + .hero { min-height: auto; padding-top: 0; padding-bottom: 56px; align-items: flex-start; } .home-banner + .hero .grid-2 { align-items: center; } .home-banner + .hero .hero-content { padding-top: 60px; padding-bottom: 0; } .home-banner + .hero .aw-anim-container { /* Override the inline height:480px so the animation sizes responsively and stays roughly aligned with the text column on each viewport. */ height: clamp(380px, 36vw, 460px) !important; } @media (max-width: 980px) { .home-banner + .hero { padding-bottom: 44px; } .home-banner + .hero .hero-content { padding-top: 48px; } .home-banner + .hero .aw-anim-container { height: 340px !important; } } @media (max-width: 720px) { .home-banner + .hero { padding-bottom: 36px; } .home-banner + .hero .hero-content { padding-top: 38px; } .home-banner + .hero .aw-anim-container { height: 300px !important; } } @media (max-width: 480px) { .home-banner + .hero { padding-bottom: 28px; } .home-banner + .hero .hero-content { padding-top: 32px; } .home-banner + .hero .aw-anim-container { height: 260px !important; } } @media (max-width: 720px) { .home-banner { padding: 82px 0 18px; } .home-banner-inner { gap: 14px; align-items: flex-start; } .home-banner-icon { width: 46px; height: 46px; border-width: 1.5px; margin-top: 2px; } .home-banner-icon svg { width: 22px; height: 22px; } .home-banner-text h2 { font-size: 1.18rem; } .home-banner-text p { font-size: .87rem; line-height: 1.5; } .home-banner + .hero .hero-content { padding-top: 38px; } } @media (max-width: 480px) { .home-banner { padding: 78px 0 16px; } .home-banner-inner { gap: 12px; } .home-banner-text h2 { font-size: 1.05rem; } .home-banner-text p { font-size: .82rem; } .home-banner + .hero .hero-content { padding-top: 32px; } } /* Contact / Book a Demo HubSpot embed responsive sizing */ @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } .contact-form-wrap { padding: 28px 22px; } .aw-hubspot-wrap { min-height: 940px; } .aw-hubspot-wrap:has(iframe), .aw-hubspot-wrap:has(form) { min-height: 940px; } .aw-hubspot-wrap iframe { height: 940px !important; min-height: 940px !important; } } @media (max-width: 600px) { .contact-form-wrap { padding: 24px 18px; } .aw-hubspot-wrap { min-height: 1020px; } .aw-hubspot-wrap:has(iframe), .aw-hubspot-wrap:has(form) { min-height: 1020px; } .aw-hubspot-wrap iframe { height: 1020px !important; min-height: 1020px !important; } } /* ─── INSIGHTS ─────────────────────────────────────────────────────────────── Knowledge centre styles. Built using existing tokens (var(--teal), var(--navy), --shadow-md, --radius-md, etc.) so it inherits the rest of the AnyWaste design system without overriding any base rules. */ /* Desktop dropdown */ .nav-links li.has-dd { position: relative; } .nav-links li.has-dd > a { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .nav-links li.has-dd > a::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--transition); } .nav-links li.has-dd.open > a::after, .nav-links li.has-dd:hover > a::after { transform: rotate(225deg) translateY(2px); } .nav-dd { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 320px; padding: 14px; background: rgba(255,255,255,.985); backdrop-filter: blur(14px); border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 1100; } .nav-links li.has-dd:hover > .nav-dd, .nav-links li.has-dd:focus-within > .nav-dd, .nav-links li.has-dd.open > .nav-dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s; } .nav-dd a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--text); text-decoration: none; transition: background var(--transition), color var(--transition); } .nav-dd a:hover { background: var(--teal-light); color: var(--teal-dark); } .nav-dd a .dd-ico { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--teal-light); color: var(--teal); font-size: .95rem; } .nav-dd .nav-dd-foot { grid-column: 1 / -1; margin-top: 6px; padding: 10px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--text-light); } .nav-dd .nav-dd-foot a { padding: 0; color: var(--teal); font-weight: 700; font-size: .76rem; background: transparent; } /* Mobile insights group inside the off-canvas menu */ .mob-group { border-top: 1px solid rgba(43,181,160,.18); margin-top: 6px; } .mob-group-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-family: var(--font-head); font-weight: 700; color: var(--navy); cursor: pointer; user-select: none; } .mob-group-toggle::after { content: "+"; font-size: 1.2rem; color: var(--teal); font-weight: 600; transition: transform var(--transition); } .mob-group.open .mob-group-toggle::after { content: "−"; } .mob-group-list { display: none; padding: 0 24px 8px; } .mob-group.open .mob-group-list { display: block; } .mob-group-list a { display: block; padding: 9px 0 9px 16px; font-size: .92rem; color: var(--text-light); border-left: 2px solid var(--teal-light); margin-left: 6px; } .mob-group-list a:hover { color: var(--teal-dark); border-left-color: var(--teal); } /* Insights pages */ .ins-hero { position: relative; padding: 120px 0 64px; background: var(--navy); overflow: hidden; } .ins-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(43,181,160,.18), transparent 55%), radial-gradient(circle at 82% 78%, rgba(54,176,70,.10), transparent 55%); pointer-events: none; } .ins-hero .container { position: relative; z-index: 2; } .ins-hero .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(43,181,160,.16); border: 1px solid rgba(43,181,160,.45); border-radius: 999px; color: #b8efe5; font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .ins-hero h1 { color: #fff; margin-top: 14px; max-width: 820px; } .ins-hero p.lede { color: rgba(255,255,255,.78); margin-top: 18px; max-width: 720px; font-size: 1.05rem; line-height: 1.7; } .ins-hero .breadcrumb { font-size: .76rem; color: rgba(255,255,255,.55); font-family: var(--font-head); letter-spacing: .04em; margin-bottom: 8px; } .ins-hero .breadcrumb a { color: var(--teal); text-decoration: none; } .ins-hero .breadcrumb a:hover { color: #b8efe5; } .ins-hero .breadcrumb .sep { margin: 0 8px; opacity: .5; } /* 8-up category grid (collapses to 4-up then 2-up then 1-up) */ .ins-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 1100px) { .ins-cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .ins-cat-grid { grid-template-columns: 1fr; } } .ins-cat { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: var(--text); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .ins-cat:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--shadow-md); } .ins-cat-ico { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--teal-light), #fff); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--teal); } .ins-cat h3 { font-size: 1.05rem; line-height: 1.3; color: var(--navy); margin: 0; } .ins-cat p { font-size: .85rem; color: var(--text-light); margin: 0; } .ins-cat .ins-cat-link { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; } .ins-cat .ins-cat-link::after { content: "→"; transition: transform var(--transition); } .ins-cat:hover .ins-cat-link::after { transform: translateX(3px); } /* Article cards (placeholder set) */ .ins-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 980px) { .ins-art-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .ins-art-grid { grid-template-columns: 1fr; } } .ins-art { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 22px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); transition: transform var(--transition), box-shadow var(--transition); } .ins-art:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .ins-art .ins-art-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: .7rem; color: var(--text-light); letter-spacing: .04em; text-transform: uppercase; } .ins-art .ins-art-cat { color: var(--teal); font-weight: 700; } .ins-art .ins-art-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--off-white); color: var(--text-light); font-weight: 600; font-size: .65rem; border: 1px solid var(--border); } .ins-art h3 { font-size: 1.05rem; line-height: 1.35; color: var(--navy); margin: 0; } .ins-art p { font-size: .88rem; color: var(--text-light); line-height: 1.65; margin: 0; } .ins-art .ins-art-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--text-light); } .ins-art .ins-art-foot .ins-art-soon { color: var(--orange); font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } /* Related categories strip */ .ins-related { margin-top: 12px; } .ins-related h4 { font-size: .85rem; font-family: var(--font-head); font-weight: 700; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; } .ins-related-row { display: flex; flex-wrap: wrap; gap: 10px; } .ins-related-row a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--border); font-family: var(--font-head); font-weight: 600; font-size: .78rem; color: var(--text); text-decoration: none; transition: all var(--transition); } .ins-related-row a:hover { border-color: var(--teal); color: var(--teal-dark); } /* Insights disclaimer block */ .ins-disclaimer { margin-top: 32px; padding: 18px 22px; background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: .8rem; color: var(--text-light); line-height: 1.65; } .ins-disclaimer strong { color: var(--navy); } /* Footer Insights column shares the .fc style — no overrides needed */ /* ─── INSIGHTS · ARTICLE PAGES ────────────────────────────────────────────── Long-read prose layout. Designed to host content imported from the AnyWaste docx briefs. Uses the existing colour, typography and shadow tokens. */ .ins-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; margin-top: 8px; } @media (max-width: 1080px) { .ins-article-wrap { grid-template-columns: 1fr; gap: 32px; } } .ins-article-prose { max-width: 760px; } .ins-article-prose > * + * { margin-top: 18px; } .ins-article-prose h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--navy); margin-top: 48px; margin-bottom: 8px; line-height: 1.25; } .ins-article-prose h2:first-child { margin-top: 0; } .ins-article-prose h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-top: 32px; margin-bottom: 6px; line-height: 1.3; } .ins-article-prose p { font-size: 1.02rem; line-height: 1.78; color: var(--text); } .ins-article-prose p strong { color: var(--navy); } .ins-article-prose a { color: var(--teal-dark); text-decoration: none; border-bottom: 1px solid rgba(43,181,160,.35); } .ins-article-prose a:hover { color: var(--teal); border-bottom-color: var(--teal); } .ins-article-prose ul, .ins-article-prose ol { padding-left: 22px; margin: 14px 0; } .ins-article-prose li { margin: 6px 0; line-height: 1.7; color: var(--text); } .ins-article-prose li p { margin: 0; font-size: 1rem; } .ins-article-prose li + li { margin-top: 8px; } /* Stat callout */ .ins-stat-card { display: block; margin: 28px 0; padding: 22px 24px; background: linear-gradient(135deg, var(--teal-light), #fff); border: 1.5px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .ins-stat-card .ins-stat-fig { font-family: var(--font-head); font-weight: 900; font-size: clamp(2rem, 5vw, 2.6rem); color: var(--teal-dark); line-height: 1; } .ins-stat-card .ins-stat-fig strong { color: var(--teal-dark); font-weight: 900; } .ins-stat-card .ins-stat-line { margin-top: 8px; font-size: .9rem; color: var(--text); font-family: var(--font-body); } .ins-stat-card .ins-stat-line strong { font-weight: 700; color: var(--navy); } .ins-stat-card .ins-stat-line + .ins-stat-line { margin-top: 4px; color: var(--text-light); font-size: .82rem; } /* Pull-quote / aside callout */ .ins-callout { display: block; margin: 28px 0; padding: 22px 26px; background: var(--off-white); border-left: 4px solid var(--orange); border-radius: var(--radius-md); font-style: italic; color: var(--text); } .ins-callout p { font-size: 1rem; line-height: 1.75; margin: 0; } .ins-callout p + p { margin-top: 10px; } .ins-callout strong { color: var(--navy); font-weight: 700; } /* Tables (obligations / comparison) */ .ins-table-wrap { margin: 28px 0; overflow-x: auto; border: 1.5px solid var(--border); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; } .ins-table-wrap table { width: 100%; border-collapse: collapse; font-size: .92rem; } .ins-table-wrap thead { display: none; } /* pandoc emits no thead — first row is the head */ .ins-table-wrap tr:first-child td { font-family: var(--font-head); font-weight: 700; background: var(--teal-light); color: var(--navy); border-bottom: 1.5px solid var(--border); padding: 12px 14px; text-align: left; } .ins-table-wrap td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text); line-height: 1.55; } .ins-table-wrap tr:last-child td { border-bottom: none; } .ins-table-wrap td p { margin: 0; } .ins-table-wrap td strong { color: var(--navy); } .ins-table-wrap a { color: var(--teal-dark); border-bottom: 1px solid rgba(43,181,160,.35); } /* Sources block */ .ins-sources { margin-top: 56px; padding: 28px 30px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); } .ins-sources h2 { margin: 0 0 18px; font-size: 1.1rem !important; color: var(--navy); } .ins-sources-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .ins-sources-list li { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: .88rem; line-height: 1.5; } @media (max-width: 720px) { .ins-sources-list li { grid-template-columns: 1fr; gap: 4px; } } .ins-sources-list li:last-child { border-bottom: none; } .ins-src-label { color: var(--text); } .ins-src-link { font-family: var(--font-head); font-weight: 600; } .ins-src-link a { color: var(--teal-dark); border-bottom: 1px solid rgba(43,181,160,.35); } /* Article hero (extends .ins-hero) */ .ins-art-hero h1 { max-width: 880px; } .ins-art-hero .ins-art-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; font-family: var(--font-head); font-size: .76rem; color: rgba(255,255,255,.7); letter-spacing: .04em; text-transform: uppercase; } .ins-art-hero .ins-art-meta-row .pill { display: inline-flex; align-items: center; padding: 5px 12px; background: rgba(43,181,160,.18); border: 1px solid rgba(43,181,160,.45); border-radius: 999px; color: #b8efe5; font-weight: 700; } /* Sidebar */ .ins-side { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 18px; } @media (max-width: 1080px) { .ins-side { position: static; } } .ins-side-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-sm); } .ins-side-card h4 { font-size: .78rem; font-family: var(--font-head); font-weight: 700; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; } .ins-side-card p { font-size: .85rem; color: var(--text-light); line-height: 1.6; margin: 0 0 12px; } .ins-side-card a { display: block; padding: 6px 0; font-size: .86rem; color: var(--teal-dark); font-family: var(--font-head); font-weight: 600; } .ins-side-card a:hover { color: var(--teal); } .ins-side-card .btn { width: 100%; justify-content: center; margin-top: 4px; } /* End-of-article disclaimer (REGULATORY CONTEXT) */ .ins-article-prose h2 + p:has(+ p:last-child), .ins-article-prose .ins-context-block { font-size: .9rem; color: var(--text-light); } /* ─── INSIGHTS · CHECKLIST ARTICLE EXTRAS ─────────────────────────────────── */ /* Notice / warning callout (⚠ Important Notice etc.) — same shape as .ins-callout but rendered with a teal accent rather than orange so the eye distinguishes "regulatory notice" from "Damian-voice pull-quote". */ .ins-callout.ins-callout-notice { border-left-color: var(--teal); background: var(--teal-light); font-style: normal; } .ins-callout.ins-callout-notice p { color: var(--text); } .ins-callout.ins-callout-notice strong { color: var(--teal-dark); } /* Priority key (ESSENTIAL / IMPORTANT / ADVISORY pill row + caption) */ .ins-priority-key { display: block; margin: 28px 0; padding: 22px 26px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); } .ins-priority-key .pk-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .ins-priority-key .pk-pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .ins-priority-key .pk-essential { background: rgba(189,93,58,.12); color: var(--orange-dark); border: 1px solid rgba(189,93,58,.3); } .ins-priority-key .pk-important { background: rgba(43,181,160,.12); color: var(--teal-dark); border: 1px solid rgba(43,181,160,.3); } .ins-priority-key .pk-advisory { background: rgba(54,176,70,.12); color: #2c8a38; border: 1px solid rgba(54,176,70,.3); } .ins-priority-key .pk-text { font-size: .88rem; color: var(--text-light); margin: 0; line-height: 1.6; } /* Lettered section divider (A. Registration / B. EWC Code / etc.) */ .ins-checklist-section { display: flex; align-items: flex-start; gap: 16px; margin: 48px 0 12px; padding: 0; } .ins-checklist-section .ins-section-letter { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--navy); color: #fff; border-radius: 10px; font-family: var(--font-head); font-weight: 900; font-size: 1.2rem; } .ins-checklist-section .ins-section-body { flex: 1; min-width: 0; } .ins-checklist-section .ins-section-body h2 { margin: 0 0 4px; font-size: 1.3rem; } .ins-checklist-section .ins-section-body p { margin: 0; font-size: .92rem; color: var(--text-light); } /* Pretty-up the checklist action tables — first column is just a tick box, second is a priority pill, third is the action. Reduce visual weight. */ .ins-article-prose .ins-table-wrap td:first-child:has(strong:only-child) { width: 36px; text-align: center; color: var(--text-light); } /* Side-by-side comparison cards (e.g. "WTN vs Consignment Note — at a glance"). */ .ins-compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 28px 0; } @media (max-width: 720px) { .ins-compare-cards { grid-template-columns: 1fr; gap: 14px; } } .ins-compare-card { background: #fff; border: 1.5px solid var(--border); border-top: 4px solid var(--teal); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-sm); } .ins-compare-card .ins-compare-title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); } .ins-compare-card p { margin: 8px 0 0; font-size: .92rem; line-height: 1.6; color: var(--text); } .ins-compare-card p strong { display: inline-block; min-width: 130px; color: var(--text-light); font-weight: 600; font-size: .82rem; letter-spacing: .02em; } .ins-compare-card p em { display: block; margin-top: -2px; margin-bottom: 8px; font-size: .82rem; color: var(--text-light); font-style: italic; } /* Visual differentiator: orange accent for the right-hand card so the eye spots that the two sides describe different documents. */ .ins-compare-card:nth-child(2) { border-top-color: var(--orange); } /* ════════════════════════════════════════════════════════════════ ECOSYSTEM HUB — Why Work With AnyWaste? (homepage + dedicated pages) ──────────────────────────────────────────────────────────────── */ .eco-section{position:relative;padding:104px 0 88px;background:linear-gradient(180deg,#fff 0%,var(--off-white) 60%,#fff 100%);overflow:hidden;} .eco-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(43,181,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,181,160,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%);pointer-events:none;} .eco-head{text-align:center;max-width:780px;margin:0 auto 56px;position:relative;z-index:2;} .eco-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:linear-gradient(135deg,rgba(43,181,160,.12),rgba(54,176,70,.08));border:1px solid rgba(43,181,160,.28);border-radius:999px;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:18px;} .eco-eyebrow .live-dot{background:var(--teal);} .eco-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.02em;margin-bottom:14px;} .eco-head p{font-size:1.05rem;color:var(--text-light);max-width:620px;margin:0 auto;} .eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1320px;margin:0 auto;position:relative;z-index:2;} @media (max-width:1100px){.eco-grid{grid-template-columns:repeat(2,1fr);gap:16px;}} @media (max-width:560px){.eco-grid{grid-template-columns:1fr;gap:14px;}} .eco-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px 22px;text-decoration:none;color:inherit;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);overflow:hidden;cursor:pointer;} .eco-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 0%,rgba(43,181,160,.10),transparent 60%);opacity:0;transition:opacity var(--transition);pointer-events:none;} .eco-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--green));transform:scaleX(.18);transform-origin:left;transition:transform .45s cubic-bezier(.4,0,.2,1);} .eco-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(43,181,160,.18),0 6px 20px rgba(26,46,42,.08);border-color:rgba(43,181,160,.5);} .eco-card:hover::before{opacity:1;} .eco-card:hover::after{transform:scaleX(1);} .eco-card-ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--teal-light),rgba(43,181,160,.15));display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.4rem;border:1px solid rgba(43,181,160,.25);transition:transform var(--transition),background var(--transition);} .eco-card:hover .eco-card-ico{transform:scale(1.06);background:linear-gradient(135deg,var(--teal),var(--teal-dark));} .eco-card:hover .eco-card-ico .eco-emoji{filter:brightness(0) invert(1);} .eco-card-tag{position:absolute;top:18px;right:18px;font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px;} .eco-card-tag.tag-live{background:rgba(54,176,70,.12);color:#2a8a2e;} .eco-card-tag.tag-soon{background:rgba(43,181,160,.12);color:var(--teal-dark);} .eco-card-tag.tag-roadmap{background:rgba(189,93,58,.12);color:var(--orange-dark);} .eco-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--navy);letter-spacing:-.01em;} .eco-card-sum{font-size:.88rem;line-height:1.55;color:var(--text-light);margin-bottom:18px;flex:1;} .eco-card-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.74rem;color:var(--teal);letter-spacing:.04em;text-transform:uppercase;} .eco-card-link::after{content:"→";display:inline-block;transition:transform var(--transition);} .eco-card:hover .eco-card-link::after{transform:translateX(4px);} .eco-card[data-feature="marketplace"]::after{background:linear-gradient(90deg,var(--orange),var(--teal));} .eco-card[data-feature="marketplace"]:hover{border-color:rgba(189,93,58,.4);box-shadow:0 20px 50px rgba(189,93,58,.16),0 6px 20px rgba(26,46,42,.08);} /* ROADMAP RAIL — investor-grade rollout visualisation */ .roadmap-section{position:relative;padding:88px 0 96px;background:linear-gradient(180deg,#fff 0%,var(--teal-light) 50%,#fff 100%);overflow:hidden;} .roadmap-head{text-align:center;max-width:720px;margin:0 auto 48px;} .roadmap-head h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:12px;} .roadmap-head p{font-size:1rem;color:var(--text-light);} .roadmap-rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1240px;margin:0 auto;padding:36px 12px 0;} @media (max-width:1000px){.roadmap-rail{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.roadmap-rail{grid-template-columns:1fr;}} .rm-col{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:22px 18px 18px;} .rm-col-marker{position:absolute;top:-12px;left:18px;display:inline-flex;align-items:center;gap:7px;background:#fff;padding:4px 11px;border:1.5px solid var(--border);border-radius:999px;font-family:var(--font-head);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light);} .rm-col[data-stage="live"]{border-color:rgba(54,176,70,.45);box-shadow:0 6px 18px rgba(54,176,70,.10);} .rm-col[data-stage="live"] .rm-col-marker{color:#2a8a2e;border-color:rgba(54,176,70,.5);} .rm-col[data-stage="next"]{border-color:rgba(43,181,160,.5);box-shadow:0 6px 18px rgba(43,181,160,.10);} .rm-col[data-stage="next"] .rm-col-marker{color:var(--teal-dark);border-color:rgba(43,181,160,.5);} .rm-col[data-stage="soon"]{border-color:rgba(43,181,160,.3);} .rm-col[data-stage="soon"] .rm-col-marker{color:var(--teal-dark);} .rm-col[data-stage="later"]{border-color:rgba(189,93,58,.35);} .rm-col[data-stage="later"] .rm-col-marker{color:var(--orange-dark);border-color:rgba(189,93,58,.4);} .rm-col[data-stage="vision"]{background:linear-gradient(180deg,#fff,#f6fdfb);} .rm-col-date{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--navy);margin:6px 0 12px;letter-spacing:-.01em;} .rm-list{list-style:none;display:flex;flex-direction:column;gap:8px;} .rm-list li{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;color:var(--text);line-height:1.45;} .rm-list li::before{content:"";flex-shrink:0;width:6px;height:6px;margin-top:7px;background:var(--teal);border-radius:50%;} .rm-col[data-stage="live"] .rm-list li::before{background:var(--green);} .rm-col[data-stage="later"] .rm-list li::before{background:var(--orange);} /* ECOSYSTEM PAGE TEMPLATE — hero, modules, FAQ */ .eco-page-hero{position:relative;padding:120px 0 64px;background:linear-gradient(135deg,var(--navy) 0%,#0f211e 100%);color:#fff;overflow:hidden;} .eco-page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(43,181,160,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(43,181,160,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 75% 60% at 50% 50%,#000 25%,transparent 80%);} .eco-page-hero::after{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;background:radial-gradient(circle,rgba(43,181,160,.18),transparent 60%);pointer-events:none;} .eco-page-hero .container{position:relative;z-index:2;} .eco-page-hero .breadcrumb{color:rgba(255,255,255,.55);} .eco-page-hero .breadcrumb a{color:rgba(255,255,255,.75);} .eco-page-hero .breadcrumb a:hover{color:var(--teal);} .eco-page-hero .breadcrumb .sep{color:rgba(255,255,255,.3);} .eco-page-hero h1{color:#fff;font-size:clamp(2rem,4.2vw,3rem);margin-bottom:18px;letter-spacing:-.02em;} .eco-page-hero .lede{color:rgba(255,255,255,.78);font-size:1.1rem;max-width:680px;line-height:1.6;} .eco-page-hero .hero-badge{background:rgba(43,181,160,.18);border:1px solid rgba(43,181,160,.4);color:var(--teal);} .eco-page-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px;max-width:680px;} @media (max-width:560px){.eco-page-stats{grid-template-columns:1fr 1fr;}} .eco-stat{background:rgba(43,181,160,.08);border:1px solid rgba(43,181,160,.25);border-radius:var(--radius-md);padding:14px 16px;} .eco-stat-num{font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--teal);letter-spacing:-.01em;} .eco-stat-lbl{font-size:.74rem;color:rgba(255,255,255,.65);margin-top:2px;} .eco-page .section{padding:72px 0;} .eco-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:900px){.eco-modules{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.eco-modules{grid-template-columns:1fr;}} .eco-mod{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:22px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);} .eco-mod:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(43,181,160,.4);} .eco-mod-ico{width:38px;height:38px;border-radius:10px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:12px;border:1px solid rgba(43,181,160,.25);} .eco-mod h4{font-size:1rem;margin-bottom:8px;color:var(--navy);} .eco-mod p{font-size:.86rem;color:var(--text-light);line-height:1.6;} .eco-faq{display:flex;flex-direction:column;gap:10px;max-width:880px;margin:0 auto;} .eco-faq details{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:0;overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition);} .eco-faq details[open]{border-color:rgba(43,181,160,.45);box-shadow:0 6px 18px rgba(43,181,160,.08);} .eco-faq summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--navy);} .eco-faq summary::-webkit-details-marker{display:none;} .eco-faq summary::after{content:"+";font-family:var(--font-head);font-weight:300;font-size:1.5rem;color:var(--teal);transition:transform var(--transition);flex-shrink:0;} .eco-faq details[open] summary::after{transform:rotate(45deg);} .eco-faq-body{padding:0 22px 20px;color:var(--text-light);line-height:1.7;font-size:.92rem;} .eco-faq-body p+p{margin-top:10px;} .eco-related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} @media (max-width:900px){.eco-related{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.eco-related{grid-template-columns:1fr;}} .eco-rel{display:block;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:18px;text-decoration:none;color:inherit;transition:transform var(--transition),border-color var(--transition);} .eco-rel:hover{transform:translateY(-2px);border-color:rgba(43,181,160,.4);box-shadow:var(--shadow-sm);} .eco-rel-tag{font-family:var(--font-head);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;} .eco-rel h5{font-size:.92rem;color:var(--navy);margin-bottom:6px;} .eco-rel p{font-size:.82rem;color:var(--text-light);} /* MARKETPLACE — orange accent variant */ .eco-marketplace-hero::after{background:radial-gradient(circle,rgba(189,93,58,.20),transparent 60%);} .eco-mkt-banner{background:linear-gradient(135deg,var(--orange),#d96b3f);color:#fff;border-radius:var(--radius-lg);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:0 12px 32px rgba(189,93,58,.25);} .eco-mkt-banner h3{color:#fff;font-size:1.2rem;margin-bottom:6px;} .eco-mkt-banner p{color:rgba(255,255,255,.9);font-size:.9rem;max-width:520px;} .eco-mkt-banner .btn{background:#fff;color:var(--orange);border-color:#fff;} .eco-mkt-banner .btn:hover{background:var(--navy);color:#fff;border-color:var(--navy);} /* WHY-ANYWASTE NAV DROPDOWN — re-uses .nav-dd */ .dd-ico-circ{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--teal-light);font-size:.85rem;margin-right:2px;} /* STICKY MOBILE CTA on ecosystem pages */ .eco-sticky-cta{display:none;} @media (max-width:900px){ .eco-sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1.5px solid var(--border);padding:10px 14px;gap:8px;box-shadow:0 -4px 18px rgba(26,46,42,.08);} .eco-sticky-cta .btn{flex:1;justify-content:center;padding:12px 14px;font-size:.82rem;} .eco-page footer{padding-bottom:80px;} } /* ════════════════════════════════════════════════════════════════ CONNECTED ECOSYSTEM WORKFLOW — Producer → Carrier → Recycler → Export → Reporting (homepage, sits under the eco hub) ──────────────────────────────────────────────────────────────── */ .flow-section{position:relative;padding:80px 0 88px;background:linear-gradient(180deg,var(--off-white) 0%,#fff 100%);overflow:hidden;} .flow-section::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 50% 20%,rgba(43,181,160,.06),transparent 60%);pointer-events:none;} .flow-head{text-align:center;max-width:760px;margin:0 auto 48px;position:relative;z-index:2;} .flow-head h2{font-size:clamp(1.6rem,3.1vw,2.3rem);margin-bottom:12px;} .flow-head p{font-size:1rem;color:var(--text-light);} .flow-stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1240px;margin:0 auto;position:relative;z-index:2;align-items:start;} @media (max-width:1000px){.flow-stage-grid{grid-template-columns:repeat(2,1fr);gap:24px 0;}} @media (max-width:520px){.flow-stage-grid{grid-template-columns:1fr;}} .flow-stage{position:relative;padding:0 12px;text-align:center;display:flex;flex-direction:column;align-items:center;} .flow-node{width:84px;height:84px;border-radius:24px;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.95rem;margin-bottom:14px;box-shadow:0 8px 24px rgba(26,46,42,.06);position:relative;z-index:3;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);} .flow-stage:hover .flow-node{transform:translateY(-4px);box-shadow:0 14px 32px rgba(43,181,160,.18);border-color:rgba(43,181,160,.5);} .flow-node::before{content:"";position:absolute;inset:-6px;border-radius:30px;border:1.5px solid rgba(43,181,160,0);transition:border-color var(--transition);pointer-events:none;} .flow-stage:hover .flow-node::before{border-color:rgba(43,181,160,.35);} .flow-stage h4{font-family:var(--font-head);font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:5px;letter-spacing:-.005em;} .flow-stage p{font-size:.78rem;color:var(--text-light);line-height:1.45;max-width:170px;} /* Connecting line + animated particle between stages */ .flow-stage:not(:last-child)::after{content:"";position:absolute;top:42px;right:-50%;width:100%;height:2px;background:linear-gradient(90deg,rgba(43,181,160,.3) 0%,rgba(43,181,160,.5) 50%,rgba(43,181,160,.3) 100%);z-index:1;} .flow-stage:not(:last-child) .flow-arrow{position:absolute;top:42px;right:-50%;width:100%;height:2px;z-index:2;pointer-events:none;} .flow-stage:not(:last-child) .flow-arrow::before{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;background:var(--teal);border-radius:50%;box-shadow:0 0 14px rgba(43,181,160,.6);animation:flow-pulse 4s linear infinite;} .flow-stage:nth-child(2) .flow-arrow::before{animation-delay:-.8s;} .flow-stage:nth-child(3) .flow-arrow::before{animation-delay:-1.6s;} .flow-stage:nth-child(4) .flow-arrow::before{animation-delay:-2.4s;} @keyframes flow-pulse{ 0% {left:0;opacity:0;transform:scale(.7);} 10% {opacity:1;} 90% {opacity:1;transform:scale(1);} 100% {left:100%;opacity:0;transform:scale(.7);} } @media (max-width:1000px){ .flow-stage:not(:last-child)::after, .flow-stage:not(:last-child) .flow-arrow{display:none;} } .flow-meta-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:48px;flex-wrap:wrap;} .flow-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:#fff;border:1.5px solid var(--border);border-radius:999px;font-family:var(--font-head);font-weight:600;font-size:.78rem;color:var(--text-light);} .flow-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);} .flow-chip-dot.dot-orange{background:var(--orange);} .flow-chip-dot.dot-green{background:var(--green);} /* ════════════════════════════════════════════════════════════════ PLATFORM PREVIEW — three CSS-only mock UIs (dashboard, digital WTN, mobile driver app) to build software-product credibility ──────────────────────────────────────────────────────────────── */ .preview-section{position:relative;padding:96px 0;background:linear-gradient(180deg,#fff 0%,var(--navy) 25%,var(--navy) 75%,#fff 100%);overflow:hidden;} .preview-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(43,181,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,181,160,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 80%);pointer-events:none;} .preview-head{text-align:center;max-width:720px;margin:0 auto 56px;position:relative;z-index:2;} .preview-head .eco-eyebrow{background:rgba(43,181,160,.18);border-color:rgba(43,181,160,.4);color:var(--teal);} .preview-head h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:12px;letter-spacing:-.01em;} .preview-head p{color:rgba(255,255,255,.72);font-size:1.02rem;} .preview-grid{display:grid;grid-template-columns:1.4fr 1fr 0.85fr;gap:22px;max-width:1280px;margin:0 auto;position:relative;z-index:2;align-items:stretch;} @media (max-width:1100px){.preview-grid{grid-template-columns:1fr 1fr;}.preview-mobile{grid-column:span 2;}} @media (max-width:680px){.preview-grid{grid-template-columns:1fr;}.preview-mobile{grid-column:auto;}} .preview-card{background:#fff;border-radius:var(--radius-lg);padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.4),0 8px 22px rgba(43,181,160,.18);position:relative;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.4,0,.2,1);overflow:hidden;} .preview-card:hover{transform:translateY(-4px);} .preview-tag{position:absolute;top:14px;right:14px;font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;background:var(--teal-light);color:var(--teal-dark);border-radius:6px;} /* Dashboard mock */ .preview-dash{display:flex;flex-direction:column;gap:14px;} .preview-dash-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border);} .preview-dash-head .pd-logo{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--teal),var(--green));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-head);font-weight:900;font-size:.7rem;} .preview-dash-head .pd-title{font-family:var(--font-head);font-weight:700;font-size:.84rem;color:var(--navy);} .preview-dash-head .pd-sub{font-size:.7rem;color:var(--text-light);margin-left:auto;} .preview-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .preview-dash-stat{background:var(--off-white);border-radius:8px;padding:10px;border:1px solid var(--border);position:relative;} .preview-dash-stat .pds-num{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--navy);letter-spacing:-.01em;} .preview-dash-stat .pds-lbl{font-size:.65rem;color:var(--text-light);margin-top:2px;text-transform:uppercase;letter-spacing:.04em;} .preview-dash-stat .pds-icon{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,rgba(54,176,70,.18),rgba(43,181,160,.18));display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--green);} .preview-dash-stat .pds-delta{display:block;margin-top:4px;font-family:var(--font-head);font-weight:700;font-size:.6rem;letter-spacing:.04em;color:var(--orange-dark);} .preview-dash-stat .pds-delta::before{content:"↗ ";color:var(--orange);} .preview-dash-chart{position:relative;background:linear-gradient(180deg,rgba(43,181,160,.06) 0%,rgba(43,181,160,0) 100%);border:1px solid var(--border);border-radius:8px;padding:10px 8px;height:120px;} .preview-dash-chart svg{width:100%;height:100%;display:block;} .preview-dash-chart-label{position:absolute;top:8px;left:10px;font-family:var(--font-head);font-weight:700;font-size:.66rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.06em;} .preview-dash-rows{display:flex;flex-direction:column;gap:6px;} .preview-dash-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 9px;background:var(--off-white);border:1px solid var(--border);border-radius:6px;font-size:.72rem;} .pdr-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);} .pdr-dot.green{background:var(--green);} .pdr-dot.orange{background:var(--orange);} .pdr-ref{font-family:var(--font-head);font-weight:700;color:var(--navy);} .pdr-meta{color:var(--text-light);} .pdr-status{font-family:var(--font-head);font-weight:700;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green);} .pdr-status.in-transit{color:var(--teal-dark);} .pdr-status.pending{color:var(--orange-dark);} /* Document mock */ .preview-doc{display:flex;flex-direction:column;} .preview-doc-head{padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px;} .preview-doc-eyebrow{font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);} .preview-doc-h{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--navy);margin:4px 0 2px;} .preview-doc-ref{font-family:'SF Mono','Monaco','Consolas',monospace;font-size:.7rem;color:var(--text-light);} .preview-doc-fields{display:flex;flex-direction:column;gap:9px;flex:1;} .preview-doc-row{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);} .preview-doc-row:last-child{border-bottom:none;} .pdc-lbl{font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);align-self:center;white-space:nowrap;} .pdc-val{font-size:.78rem;color:var(--navy);font-weight:600;text-align:right;} .pdc-val .pdc-code{display:inline-block;font-family:'SF Mono','Monaco','Consolas',monospace;font-size:.72rem;background:var(--teal-light);color:var(--teal-dark);padding:1px 6px;border-radius:4px;font-weight:700;} .preview-doc-foot{margin-top:12px;padding:10px 12px;background:linear-gradient(135deg,rgba(54,176,70,.10),rgba(43,181,160,.10));border:1px solid rgba(54,176,70,.25);border-radius:8px;display:flex;align-items:center;gap:8px;font-size:.75rem;font-family:var(--font-head);font-weight:700;color:#1f6f24;} .preview-doc-foot::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--green);background-image:linear-gradient(135deg,var(--green),#2a8a2e);box-shadow:0 0 0 3px rgba(54,176,70,.18);position:relative;display:flex;align-items:center;justify-content:center;} /* Mobile mock */ .preview-mobile{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(43,181,160,.06),rgba(43,181,160,0));} .preview-phone{width:200px;height:380px;background:#0f211e;border-radius:28px;padding:9px;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(43,181,160,.18) inset;position:relative;} .preview-phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:50px;height:5px;background:#000;border-radius:6px;z-index:3;} .preview-phone-screen{width:100%;height:100%;background:linear-gradient(180deg,#f7fbf9,#fff);border-radius:22px;padding:32px 14px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;} .preview-phone-bar{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;font-family:var(--font-head);font-weight:700;color:var(--navy);} .preview-phone-h{font-family:var(--font-head);font-weight:800;font-size:.82rem;color:var(--navy);letter-spacing:-.01em;} .preview-phone-sub{font-size:.62rem;color:var(--text-light);margin-bottom:2px;} .preview-phone-job{background:#fff;border:1.2px solid var(--border);border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:3px;box-shadow:0 2px 6px rgba(26,46,42,.04);position:relative;} .preview-phone-job.active{border-color:rgba(43,181,160,.5);background:linear-gradient(135deg,#fff,rgba(43,181,160,.05));} .preview-phone-job.active::before{content:"";position:absolute;left:-1.2px;top:8px;bottom:8px;width:3px;background:var(--teal);border-radius:0 3px 3px 0;} .ppj-time{font-family:var(--font-head);font-weight:700;font-size:.6rem;color:var(--teal-dark);} .ppj-cust{font-family:var(--font-head);font-weight:700;font-size:.7rem;color:var(--navy);} .ppj-meta{font-size:.6rem;color:var(--text-light);} .preview-phone-cta{margin-top:auto;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border:none;border-radius:10px;padding:10px;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.04em;text-align:center;} /* ════════════════════════════════════════════════════════════════ SCROLL-REVEAL + STAT COUNTER ANIMATIONS — subtle, premium SaaS ──────────────────────────────────────────────────────────────── */ .aw-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);} .aw-reveal.aw-revealed{opacity:1;transform:translateY(0);} .aw-reveal.aw-r-fade{transform:none;transition:opacity .8s cubic-bezier(.4,0,.2,1);} .aw-reveal.aw-r-fade.aw-revealed{opacity:1;} .aw-reveal.aw-r-scale{transform:translateY(20px) scale(.985);} .aw-reveal.aw-r-scale.aw-revealed{transform:translateY(0) scale(1);} .aw-reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1);} .aw-reveal-stagger.aw-revealed > *{opacity:1;transform:translateY(0);} .aw-reveal-stagger.aw-revealed > *:nth-child(2){transition-delay:.07s;} .aw-reveal-stagger.aw-revealed > *:nth-child(3){transition-delay:.14s;} .aw-reveal-stagger.aw-revealed > *:nth-child(4){transition-delay:.21s;} .aw-reveal-stagger.aw-revealed > *:nth-child(5){transition-delay:.28s;} .aw-reveal-stagger.aw-revealed > *:nth-child(6){transition-delay:.35s;} .aw-reveal-stagger.aw-revealed > *:nth-child(7){transition-delay:.42s;} .aw-reveal-stagger.aw-revealed > *:nth-child(8){transition-delay:.49s;} @media (prefers-reduced-motion:reduce){ .aw-reveal,.aw-reveal-stagger > *{opacity:1;transform:none;transition:none;} } .aw-counter{display:inline-block;font-variant-numeric:tabular-nums;} /* ════════════════════════════════════════════════════════════════════════════ PHASE A · ENTERPRISE SAAS POLISH Sandboxed under aw-saas-*, aw-mock-*, aw-eco-*, aw-cred-*, aw-clarity-*, aw-ins-cat-*. Reuses existing tokens and the existing aw-reveal / aw-counter animation framework so no new JS is required. ══════════════════════════════════════════════════════════════════════════════ */ /* Section wrapper */ .aw-saas-band { padding: 88px 0 72px; background: linear-gradient(180deg, #fff 0%, var(--off-white) 100%); position: relative; } .aw-saas-band.aw-saas-band-dark { background: var(--navy); color: #fff; } .aw-saas-band.aw-saas-band-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 20%, rgba(43,181,160,.12), transparent 55%), radial-gradient(circle at 88% 80%, rgba(54,176,70,.08), transparent 55%); } .aw-saas-band > .container { position: relative; z-index: 2; } .aw-saas-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); } .aw-saas-band-dark .aw-saas-eyebrow { color: #b8efe5; } .aw-saas-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px rgba(43,181,160,.18); } .aw-saas-h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--navy); margin: 12px 0 14px; line-height: 1.18; max-width: 780px; } .aw-saas-band-dark .aw-saas-h2 { color: #fff; } .aw-saas-lede { max-width: 680px; font-size: 1rem; line-height: 1.7; color: var(--text-light); margin: 0; } .aw-saas-band-dark .aw-saas-lede { color: rgba(255,255,255,.74); } /* 3-up clarity strip (What it is / Who it connects / What it solves) */ .aw-clarity-3up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } @media (max-width: 900px) { .aw-clarity-3up { grid-template-columns: 1fr; } } .aw-clarity-card { position: relative; padding: 24px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .aw-clarity-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal); } .aw-clarity-card .aw-clarity-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); } .aw-clarity-card .aw-clarity-eyebrow .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--teal-light); color: var(--teal-dark); font-size: .72rem; } .aw-clarity-card h3 { font-size: 1.05rem; line-height: 1.4; color: var(--navy); margin: 12px 0 6px; } .aw-clarity-card p { font-size: .92rem; line-height: 1.65; color: var(--text-light); margin: 0; } /* Side-by-side mock layout (dashboard + phone) */ .aw-saas-mock-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 32px; align-items: center; margin-top: 40px; } @media (max-width: 980px) { .aw-saas-mock-grid { grid-template-columns: 1fr; gap: 28px; } } /* Mock browser-style window */ .aw-mock-window { position: relative; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; box-shadow: 0 24px 80px rgba(26,46,42,.18), 0 8px 32px rgba(43,181,160,.10); overflow: hidden; } .aw-mock-chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: linear-gradient(180deg, #f7fbfa, #eef6f4); border-bottom: 1px solid var(--border); } .aw-mock-chrome .aw-mock-dot { width: 11px; height: 11px; border-radius: 50%; } .aw-mock-chrome .aw-mock-dot:nth-child(1) { background: #ff5f56; } .aw-mock-chrome .aw-mock-dot:nth-child(2) { background: #ffbd2e; } .aw-mock-chrome .aw-mock-dot:nth-child(3) { background: #27c93f; } .aw-mock-chrome .aw-mock-url { flex: 1; margin-left: 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; font-family: var(--font-body); font-size: .76rem; color: var(--text-light); display: inline-flex; align-items: center; gap: 6px; } .aw-mock-chrome .aw-mock-url::before { content: "🔒"; font-size: .68rem; opacity: .55; } .aw-mock-body { display: grid; grid-template-columns: 180px 1fr; min-height: 380px; } @media (max-width: 720px) { .aw-mock-body { grid-template-columns: 1fr; } .aw-mock-side { display: none; } } /* Screenshot variant — drops the sidebar/grid and shows a real product screenshot inside the window chrome. The image is anchored to the top so the most informative part of the UI is always visible at any aspect ratio. */ .aw-mock-body--screenshot { display: block; padding: 0; background: #f6f8fa; min-height: 380px; } .aw-mock-body--screenshot img { width: 100%; height: 100%; min-height: 380px; max-height: 480px; object-fit: cover; object-position: top center; display: block; } @media (max-width: 720px) { .aw-mock-body--screenshot, .aw-mock-body--screenshot img { min-height: 280px; } } .aw-mock-side { padding: 18px 14px; background: var(--navy); color: rgba(255,255,255,.78); border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; } .aw-mock-side .aw-mock-brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 16px; font-family: var(--font-head); font-weight: 800; color: #fff; font-size: .92rem; letter-spacing: -0.02em; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; } .aw-mock-side .aw-mock-brand-mark { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg,#2BB5A0,#36b046); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: .72rem; } .aw-mock-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; font-family: var(--font-head); font-weight: 600; font-size: .78rem; color: rgba(255,255,255,.62); } .aw-mock-nav-item.active { background: rgba(43,181,160,.16); color: #fff; border-left: 2px solid var(--teal); padding-left: 8px; } .aw-mock-content { padding: 22px 24px; min-width: 0; } .aw-mock-content-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .aw-mock-content-head h4 { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.02rem; margin: 0; } .aw-mock-content-head .aw-mock-tabs { display: inline-flex; gap: 4px; padding: 3px; background: var(--off-white); border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-head); font-size: .72rem; } .aw-mock-content-head .aw-mock-tabs span { padding: 5px 12px; border-radius: 999px; color: var(--text-light); font-weight: 600; } .aw-mock-content-head .aw-mock-tabs span.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(26,46,42,.08); } .aw-mock-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } @media (max-width: 540px) { .aw-mock-stat-row { grid-template-columns: repeat(2, 1fr); } } .aw-mock-stat { padding: 11px 13px; background: var(--off-white); border: 1px solid var(--border); border-radius: 8px; } .aw-mock-stat .aw-mock-stat-label { font-family: var(--font-head); font-weight: 600; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); } .aw-mock-stat .aw-mock-stat-val { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--navy); line-height: 1.1; margin-top: 4px; } .aw-mock-stat .aw-mock-stat-trend { font-family: var(--font-body); font-size: .68rem; font-weight: 600; color: var(--teal-dark); } .aw-mock-stat .aw-mock-stat-trend.down { color: var(--orange); } .aw-mock-spark { height: 50px; width: 100%; display: block; margin-top: 4px; } .aw-mock-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; } .aw-mock-list-head, .aw-mock-list-row { display: grid; grid-template-columns: 1.1fr 1.3fr .9fr 1.1fr .8fr; gap: 10px; padding: 9px 14px; font-family: var(--font-body); font-size: .78rem; align-items: center; } @media (max-width: 540px) { .aw-mock-list-head, .aw-mock-list-row { grid-template-columns: 1.1fr 1.1fr .8fr; } .aw-mock-list-head .col-hide, .aw-mock-list-row .col-hide { display: none; } } .aw-mock-list-head { background: var(--off-white); font-family: var(--font-head); font-weight: 700; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); border-bottom: 1px solid var(--border); } .aw-mock-list-row { border-top: 1px solid rgba(0,0,0,.04); color: var(--text); transition: background .2s ease; } .aw-mock-list-row:hover { background: var(--teal-light); } .aw-mock-list-row .col-id { font-family: 'Consolas','Menlo',monospace; font-size: .76rem; color: var(--navy); } .aw-mock-list-row .col-ewc { font-family: 'Consolas','Menlo',monospace; font-size: .72rem; color: var(--text-light); } /* Status pills */ .aw-mock-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; } .aw-mock-pill .aw-mock-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .aw-mock-pill.live { background: rgba(43,181,160,.14); color: var(--teal-dark); } .aw-mock-pill.live .aw-mock-pill-dot { animation: aw-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(43,181,160,.55); } .aw-mock-pill.in-transit { background: rgba(189,93,58,.14); color: var(--orange-dark); } .aw-mock-pill.completed { background: rgba(54,176,70,.14); color: #2c8a38; } .aw-mock-pill.draft { background: var(--off-white); color: var(--text-light); border: 1px solid var(--border); } @keyframes aw-pulse { 0% { box-shadow: 0 0 0 0 rgba(43,181,160,.6); } 70% { box-shadow: 0 0 0 8px rgba(43,181,160,0); } 100% { box-shadow: 0 0 0 0 rgba(43,181,160,0); } } /* Mobile WTN preview frame */ .aw-mock-phone { width: 240px; max-width: 100%; aspect-ratio: 9 / 19; margin: 0 auto; background: #1A2E2A; border-radius: 32px; padding: 14px 10px; position: relative; box-shadow: 0 28px 60px rgba(26,46,42,.32), 0 8px 24px rgba(26,46,42,.18); border: 1px solid rgba(255,255,255,.06); } .aw-mock-phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 90px; height: 18px; background: #0d1816; border-radius: 999px; } .aw-mock-phone-screen { background: #fff; border-radius: 22px; height: 100%; overflow: hidden; display: flex; flex-direction: column; } .aw-mock-phone-bar { display: flex; justify-content: space-between; align-items: center; padding: 26px 16px 6px; font-family: var(--font-head); font-weight: 700; font-size: .68rem; color: var(--navy); } .aw-mock-phone-bar .aw-mock-phone-icons { display: inline-flex; gap: 4px; opacity: .6; font-size: .62rem; } .aw-mock-phone-content { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; overflow: hidden; } .aw-mock-phone-content h5 { font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: var(--navy); margin: 6px 0 2px; } .aw-mock-phone-content .aw-mock-phone-sub { font-size: .66rem; color: var(--text-light); margin: 0 0 4px; } .aw-mock-phone-field { background: var(--off-white); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; font-size: .66rem; line-height: 1.3; } .aw-mock-phone-field .aw-mock-phone-field-label { font-family: var(--font-head); font-weight: 700; font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); } .aw-mock-phone-field .aw-mock-phone-field-val { color: var(--navy); margin-top: 2px; font-weight: 600; } .aw-mock-phone-cta { margin-top: auto; background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .7rem; text-align: center; padding: 9px 12px; border-radius: 7px; box-shadow: 0 6px 16px rgba(43,181,160,.35); } /* Counter row */ .aw-counter-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; } @media (max-width: 760px) { .aw-counter-row { grid-template-columns: repeat(2, 1fr); } } .aw-counter-item { padding: 4px 0; } .aw-counter-val { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 2.2rem); color: var(--navy); line-height: 1.05; display: inline-flex; align-items: baseline; gap: 2px; } .aw-saas-band-dark .aw-counter-val { color: #fff; } .aw-counter-val .aw-counter-prefix, .aw-counter-val .aw-counter-suffix { font-weight: 800; color: var(--teal); } .aw-saas-band-dark .aw-counter-val .aw-counter-prefix, .aw-saas-band-dark .aw-counter-val .aw-counter-suffix { color: #b8efe5; } .aw-counter-label { font-family: var(--font-head); font-weight: 600; font-size: .78rem; color: var(--text-light); margin-top: 6px; line-height: 1.45; } .aw-saas-band-dark .aw-counter-label { color: rgba(255,255,255,.65); } /* Ecosystem flow */ .aw-eco-flow { position: relative; margin-top: 44px; padding: 8px 0 12px; } .aw-eco-track { position: absolute; left: 4%; right: 4%; top: 36px; height: 2px; background: rgba(255,255,255,.16); border-radius: 2px; pointer-events: none; } .aw-saas-band:not(.aw-saas-band-dark) .aw-eco-track { background: var(--border); } .aw-eco-track::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--teal), transparent); background-size: 30% 100%; background-repeat: no-repeat; animation: aw-eco-slide 3.6s cubic-bezier(.4,0,.2,1) infinite; } @keyframes aw-eco-slide { 0% { background-position: -30% 0; } 100% { background-position: 130% 0; } } .aw-eco-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } @media (max-width: 980px) { .aw-eco-track { left: 50%; top: 4%; bottom: 4%; height: auto; width: 2px; transform: translateX(-1px); } .aw-eco-track::after { background: linear-gradient(180deg, transparent, var(--teal), transparent); background-size: 100% 30%; background-repeat: no-repeat; animation: aw-eco-slide-v 3.6s cubic-bezier(.4,0,.2,1) infinite; } @keyframes aw-eco-slide-v { 0% { background-position: 0 -30%; } 100% { background-position: 0 130%; } } .aw-eco-grid { grid-template-columns: 1fr; gap: 14px; } } .aw-eco-node { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px; text-align: center; } .aw-eco-node .aw-eco-bubble { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--teal-dark); border: 2px solid var(--teal); box-shadow: var(--shadow-sm); font-size: 1.2rem; transition: transform .25s ease, box-shadow .25s ease; } .aw-saas-band-dark .aw-eco-node .aw-eco-bubble { background: var(--navy); color: #b8efe5; border-color: rgba(43,181,160,.55); } .aw-eco-node:hover .aw-eco-bubble { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 24px rgba(43,181,160,.32); } .aw-eco-node-label { font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: var(--navy); line-height: 1.2; } .aw-saas-band-dark .aw-eco-node-label { color: #fff; } .aw-eco-node-sub { font-size: .7rem; color: var(--text-light); line-height: 1.35; max-width: 130px; } .aw-saas-band-dark .aw-eco-node-sub { color: rgba(255,255,255,.55); } /* Operational credentials strip */ .aw-cred-strip { padding: 56px 0; background: var(--off-white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .aw-cred-strip .container { text-align: center; } .aw-cred-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-light); } .aw-cred-eyebrow::before, .aw-cred-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .35; } .aw-cred-strip h3 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--navy); margin: 12px auto 22px; max-width: 760px; line-height: 1.35; } .aw-cred-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; max-width: 1000px; margin: 0 auto; } .aw-cred-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--navy); transition: border-color var(--transition), color var(--transition); } .aw-cred-chip:hover { border-color: var(--teal); color: var(--teal-dark); } .aw-cred-chip .aw-cred-tick { width: 18px; height: 18px; border-radius: 999px; background: var(--teal-light); color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; } .aw-cred-foot { margin-top: 22px; font-size: .85rem; color: var(--text-light); } /* ════════════════════════════════════════════════════════════════════════════ PHASE B · INSIDE-THE-PLATFORM TAB GALLERY Tab band hosting 6 mockup panes (Reporting / Logistics / Weighbridge / Marketplace / Recycler / Driver). Reuses .aw-mock-window chrome from Phase A. ══════════════════════════════════════════════════════════════════════════════ */ .aw-tour-tabs-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 32px 0 28px; } .aw-tour-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--border); font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--text); cursor: pointer; transition: all var(--transition); } .aw-tour-tab:hover { border-color: var(--teal); color: var(--teal-dark); } .aw-tour-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(26,46,42,.18); } .aw-tour-tab .aw-tour-tab-ico { width: 16px; height: 16px; opacity: .8; } .aw-tour-stage { position: relative; } .aw-tour-pane { display: none; } .aw-tour-pane.active { display: grid; } .aw-tour-pane { grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: center; } @media (max-width: 980px) { .aw-tour-pane { grid-template-columns: 1fr; gap: 24px; } } .aw-tour-meta h3 { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 0 0 12px; } .aw-tour-meta p { font-size: .96rem; line-height: 1.7; color: var(--text-light); margin: 0 0 16px; } .aw-tour-meta ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; } .aw-tour-meta li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.5; color: var(--text); } .aw-tour-meta li::before { content: ""; flex-shrink: 0; margin-top: 7px; width: 6px; height: 6px; border-radius: 999px; background: var(--teal); } .aw-tour-meta .aw-tour-meta-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--teal-dark); text-decoration: none; } .aw-tour-meta .aw-tour-meta-cta::after { content: "→"; transition: transform var(--transition); } .aw-tour-meta .aw-tour-meta-cta:hover::after { transform: translateX(3px); } /* Reporting pane primitives */ .aw-mock-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding: 8px 10px; background: var(--off-white); border: 1px solid var(--border); border-radius: 8px; } .aw-mock-toolbar-left { display: inline-flex; align-items: center; gap: 6px; } .aw-mock-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; background: #fff; border: 1px solid var(--border); font-family: var(--font-head); font-weight: 600; font-size: .68rem; color: var(--text); } .aw-mock-chip.ghost { background: transparent; color: var(--text-light); } .aw-mock-chip.solid { background: var(--navy); border-color: var(--navy); color: #fff; } .aw-mock-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: var(--teal); border: 1px solid var(--teal); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .72rem; } .aw-mock-btn.ghost { background: #fff; color: var(--navy); border-color: var(--border); } .aw-mock-chart-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 540px) { .aw-mock-chart-row { grid-template-columns: 1fr; } } .aw-mock-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .aw-mock-card-title { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; } .aw-mock-area-chart, .aw-mock-bar-chart, .aw-mock-donut, .aw-mock-map-svg { width: 100%; height: auto; display: block; } .aw-mock-area-chart { height: 130px; } .aw-mock-bar-chart { height: 110px; } .aw-mock-donut { height: 130px; } .aw-mock-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; font-size: .7rem; color: var(--text-light); } .aw-mock-legend span { display: inline-flex; align-items: center; gap: 5px; } .aw-mock-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; background: var(--teal); } /* Logistics map pane */ .aw-mock-map-stage { position: relative; background: linear-gradient(135deg, #eaf5f3 0%, #d3eae5 100%); border-radius: 8px; padding: 0; min-height: 320px; border: 1px solid var(--border); overflow: hidden; } .aw-mock-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(43,181,160,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(43,181,160,.10) 1px, transparent 1px); background-size: 40px 40px; } .aw-mock-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .aw-mock-map-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; } .aw-mock-map-pin .aw-mock-map-pin-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--teal); border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(43,181,160,.55), var(--shadow-sm); animation: aw-pulse 1.8s ease-in-out infinite; } .aw-mock-map-pin.green .aw-mock-map-pin-dot { background: var(--green); } .aw-mock-map-pin.orange .aw-mock-map-pin-dot { background: var(--orange); } .aw-mock-map-pin.navy .aw-mock-map-pin-dot { background: var(--navy); animation: none; } .aw-mock-map-pin .aw-mock-map-pin-label { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; font-family: var(--font-head); font-weight: 700; font-size: .62rem; color: var(--navy); white-space: nowrap; box-shadow: var(--shadow-sm); } .aw-mock-map-side { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 12px; } .aw-mock-map-side-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(0,0,0,.04); font-size: .76rem; } .aw-mock-map-side-row:first-child { border-top: 0; } .aw-mock-map-side-row .col-customer { font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aw-mock-map-side-row .col-eta { font-family: 'Consolas','Menlo',monospace; font-size: .72rem; color: var(--text-light); } /* Weighbridge pane */ .aw-mock-weigh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 540px) { .aw-mock-weigh-grid { grid-template-columns: 1fr; } } .aw-mock-weigh-display { background: var(--navy); color: #b8efe5; border-radius: 10px; padding: 18px 22px; font-family: 'Consolas','Menlo',monospace; border: 1px solid rgba(43,181,160,.35); box-shadow: inset 0 0 32px rgba(43,181,160,.12); } .aw-mock-weigh-display .aw-mock-weigh-label { font-family: var(--font-head); font-weight: 700; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(184,239,229,.55); margin-bottom: 4px; } .aw-mock-weigh-display .aw-mock-weigh-val { font-size: 2.4rem; font-weight: 700; color: #b8efe5; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 12px rgba(43,181,160,.4); } .aw-mock-weigh-display .aw-mock-weigh-unit { font-size: 1rem; opacity: .7; margin-left: 4px; } .aw-mock-weigh-display + .aw-mock-weigh-display { margin-top: 0; } .aw-mock-weigh-stable { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .68rem; color: var(--green); margin-top: 6px; letter-spacing: .04em; text-transform: uppercase; } .aw-mock-weigh-stable::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 0 rgba(54,176,70,.55); animation: aw-pulse 1.4s ease-in-out infinite; } /* Marketplace pane */ .aw-mock-mkt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; } @media (max-width: 540px) { .aw-mock-mkt-grid { grid-template-columns: 1fr; } } .aw-mock-mkt-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px; transition: all var(--transition); } .aw-mock-mkt-card:hover { border-color: var(--teal); box-shadow: 0 8px 24px rgba(43,181,160,.18); } .aw-mock-mkt-card .aw-mock-mkt-mat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .9rem; } .aw-mock-mkt-card .aw-mock-mkt-ewc { font-family: 'Consolas','Menlo',monospace; font-size: .68rem; color: var(--text-light); margin-top: 2px; } .aw-mock-mkt-card .aw-mock-mkt-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; } .aw-mock-mkt-card .aw-mock-mkt-qty { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--navy); } .aw-mock-mkt-card .aw-mock-mkt-loc { font-size: .7rem; color: var(--text-light); } .aw-mock-mkt-card .aw-mock-mkt-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.04); } .aw-mock-mkt-card .aw-mock-mkt-price { font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--teal-dark); } .aw-mock-mkt-card .aw-mock-mkt-cta { background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .68rem; padding: 5px 11px; border-radius: 999px; } .aw-mock-mkt-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } /* Recycler workflow timeline */ .aw-mock-flow { position: relative; padding: 8px 0 0 22px; } .aw-mock-flow::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 8px; width: 2px; background: linear-gradient(180deg, var(--teal), rgba(43,181,160,.2)); } .aw-mock-flow-step { position: relative; padding: 10px 0; } .aw-mock-flow-step::before { content: ""; position: absolute; top: 14px; left: -18px; width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 2px solid var(--teal); box-shadow: 0 0 0 3px rgba(43,181,160,.12); } .aw-mock-flow-step.done::before { background: var(--teal); } .aw-mock-flow-step.live::before { animation: aw-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(43,181,160,.18); } .aw-mock-flow-step .aw-mock-flow-time { font-family: 'Consolas','Menlo',monospace; font-size: .7rem; color: var(--text-light); } .aw-mock-flow-step .aw-mock-flow-title { font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--navy); margin: 2px 0 4px; } .aw-mock-flow-step .aw-mock-flow-meta { font-size: .76rem; color: var(--text-light); line-height: 1.5; } /* Driver app pane — phone-first UI inside the mock window */ .aw-mock-driver { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 18px 20px; } @media (max-width: 720px) { .aw-mock-driver { grid-template-columns: 1fr; } } .aw-mock-driver-list { background: var(--off-white); border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .aw-mock-driver-list-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: .76rem; } .aw-mock-driver-list-item.current { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(43,181,160,.14); } .aw-mock-driver-list-item .aw-mock-driver-time { font-family: 'Consolas','Menlo',monospace; font-size: .68rem; color: var(--text-light); } .aw-mock-driver-list-item .aw-mock-driver-cust { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .8rem; margin-top: 2px; } .aw-mock-driver-list-item .aw-mock-driver-meta { font-size: .68rem; color: var(--text-light); } .aw-mock-driver-detail h5 { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem; margin: 0 0 4px; } .aw-mock-driver-detail .aw-mock-driver-sub { font-size: .76rem; color: var(--text-light); margin-bottom: 12px; } .aw-mock-driver-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .aw-mock-driver-fields .aw-mock-driver-field { background: var(--off-white); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: .72rem; } .aw-mock-driver-fields .aw-mock-driver-field-label { font-family: var(--font-head); font-weight: 700; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); } .aw-mock-driver-fields .aw-mock-driver-field-val { color: var(--navy); margin-top: 2px; font-weight: 600; } .aw-mock-driver-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .aw-mock-driver-action { flex: 1; min-width: 100px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 8px; font-family: var(--font-head); font-weight: 700; font-size: .74rem; } .aw-mock-driver-action.primary { background: var(--teal); color: #fff; box-shadow: 0 6px 16px rgba(43,181,160,.3); } .aw-mock-driver-action.ghost { background: #fff; color: var(--navy); border: 1px solid var(--border); } .aw-mock-driver-sig { margin-top: 12px; background: #fff; border: 1.5px dashed var(--border); border-radius: 8px; padding: 14px; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: .72rem; color: var(--text-light); } .aw-mock-driver-sig svg { display: block; margin: 4px auto 0; } /* ════════════════════════════════════════════════════════════════════════════ REAL PLATFORM GALLERY · loads PNGs from /images/screenshots/ at runtime. Each slot has a graceful empty state — when the fails to load (file not yet uploaded), JS adds .aw-shot-empty and the placeholder shows. ══════════════════════════════════════════════════════════════════════════════ */ .aw-real-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; } @media (max-width: 980px) { .aw-real-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .aw-real-grid { grid-template-columns: 1fr; } } .aw-shot { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .aw-shot:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 18px 40px rgba(43,181,160,.18), 0 6px 18px rgba(26,46,42,.12); } .aw-shot-frame { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--off-white) 0%, #f0f8f6 100%); display: block; overflow: hidden; } .aw-shot-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s cubic-bezier(.4,0,.2,1); } .aw-shot:hover .aw-shot-frame img { transform: scale(1.02); } /* Empty / pending state is the DEFAULT — the placeholder is visible until JS confirms the image has actually loaded successfully (then .aw-shot-loaded is added and the placeholder is hidden). This way lazy-loaded off-screen slots still render the placeholder until they enter the viewport. */ .aw-shot-pending { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: repeating-linear-gradient(45deg, rgba(43,181,160,.05) 0 8px, transparent 8px 18px), linear-gradient(135deg, var(--off-white) 0%, #f0f8f6 100%); text-align: center; padding: 18px; z-index: 1; } .aw-shot img { opacity: 0; transition: opacity .3s ease; } .aw-shot.aw-shot-loaded .aw-shot-pending { display: none; } .aw-shot.aw-shot-loaded img { opacity: 1; z-index: 2; } .aw-shot-pending-icon { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1.5px dashed var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--teal); font-size: 1.4rem; } .aw-shot-pending-label { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-light); } .aw-shot-pending-file { font-family: 'Consolas','Menlo',monospace; font-size: .72rem; color: var(--teal-dark); background: rgba(43,181,160,.08); padding: 3px 8px; border-radius: 4px; } .aw-shot-meta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; } .aw-shot-meta .aw-shot-cat { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--font-head); font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dark); padding: 3px 9px; border-radius: 999px; background: var(--teal-light); } .aw-shot-meta h4 { font-family: var(--font-head); font-weight: 800; font-size: .98rem; line-height: 1.3; color: var(--navy); margin: 6px 0 4px; } .aw-shot-meta p { font-size: .82rem; line-height: 1.55; color: var(--text-light); margin: 0; } /* When the empty state is showing, swap the section banner subline copy */ .aw-real-section[data-state="empty"] .aw-real-state-empty { display: inline; } .aw-real-section[data-state="loaded"] .aw-real-state-empty { display: none; } .aw-real-state-empty { color: var(--orange-dark); font-weight: 700; } /* Insights category pill nav */ .aw-ins-cat-nav-wrap { display: flex; justify-content: center; padding: 0 16px; margin: -28px 0 36px; position: relative; z-index: 3; } .aw-ins-cat-nav { background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 6px; display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; box-shadow: var(--shadow-sm); } .aw-ins-cat-nav a { padding: 8px 16px; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--text); text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition); } .aw-ins-cat-nav a:hover { background: var(--teal-light); color: var(--teal-dark); } .aw-ins-cat-nav a.active { background: var(--navy); color: #fff; } @media (max-width: 720px) { .aw-ins-cat-nav-wrap { margin-top: 12px; padding: 0; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; } .aw-ins-cat-nav { flex-wrap: nowrap; padding: 5px; } .aw-ins-cat-nav a { padding: 7px 14px; font-size: .76rem; } } /* ════════════════════════════════════════════════════════════════ TRUST & CREDENTIALS STRIP — subtle authority row near top of home ──────────────────────────────────────────────────────────────── */ .trust-strip{padding:36px 0 24px;background:#fff;border-bottom:1px solid var(--border);} .trust-strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;max-width:1240px;margin:0 auto;padding:0 24px;} .trust-strip-eyebrow{font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);width:100%;text-align:center;margin-bottom:6px;} .trust-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#fff;border:1.5px solid var(--border);border-radius:10px;font-family:var(--font-head);font-weight:600;font-size:.78rem;color:var(--navy);transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);} .trust-pill:hover{transform:translateY(-2px);border-color:rgba(43,181,160,.45);box-shadow:0 6px 18px rgba(43,181,160,.10);} .trust-pill-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--teal-light);color:var(--teal-dark);font-size:.85rem;} .trust-pill-ico.ico-orange{background:rgba(189,93,58,.12);color:var(--orange-dark);} .trust-pill-ico.ico-green{background:rgba(54,176,70,.12);color:#2a8a2e;} .trust-pill .tp-strong{font-weight:800;color:var(--navy);} .trust-pill .tp-light{font-weight:500;color:var(--text-light);font-size:.74rem;margin-left:2px;} /* ════════════════════════════════════════════════════════════════ JOURNEY OF A CONSIGNMENT — premium step-by-step workflow story showing what actually happens at each stage of the live product. ──────────────────────────────────────────────────────────────── */ .journey-section{position:relative;padding:96px 0 88px;background:linear-gradient(180deg,#fff 0%,var(--off-white) 100%);overflow:hidden;} .journey-section::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 80% 10%,rgba(43,181,160,.06),transparent 55%),radial-gradient(circle at 20% 90%,rgba(189,93,58,.04),transparent 55%);pointer-events:none;} .journey-head{text-align:center;max-width:760px;margin:0 auto 64px;position:relative;z-index:2;} .journey-head h2{font-size:clamp(1.7rem,3.3vw,2.5rem);margin-bottom:14px;letter-spacing:-.015em;} .journey-head p{font-size:1.04rem;color:var(--text-light);} .journey-rail{position:relative;max-width:1080px;margin:0 auto;padding:0 24px;z-index:2;} .journey-rail::before{content:"";position:absolute;left:86px;top:32px;bottom:32px;width:2px;background:linear-gradient(180deg,rgba(43,181,160,.55),rgba(43,181,160,.15) 60%,rgba(43,181,160,.05));z-index:1;} @media (max-width:680px){.journey-rail::before{left:56px;}} .journey-step{position:relative;display:grid;grid-template-columns:130px 1fr 360px;gap:36px;align-items:center;padding:24px 0;z-index:2;} @media (max-width:980px){.journey-step{grid-template-columns:130px 1fr;gap:24px;} .journey-step .js-visual{grid-column:span 2;margin-left:130px;margin-top:8px;}} @media (max-width:680px){.journey-step{grid-template-columns:88px 1fr;gap:18px;} .journey-step .js-visual{grid-column:span 2;margin-left:0;}} .js-marker{position:relative;display:flex;align-items:flex-start;justify-content:center;} .js-marker-num{position:relative;width:64px;height:64px;border-radius:18px;background:#fff;border:2px solid rgba(43,181,160,.4);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--teal-dark);letter-spacing:-.02em;box-shadow:0 8px 24px rgba(43,181,160,.10);z-index:3;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);} .js-marker-num::before{content:"";position:absolute;inset:-6px;border-radius:24px;border:1.5px solid rgba(43,181,160,.18);} .journey-step:hover .js-marker-num{border-color:var(--teal);box-shadow:0 12px 30px rgba(43,181,160,.22);transform:scale(1.04);} .journey-step.completed .js-marker-num{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-color:var(--teal-dark);} .js-body h3{font-family:var(--font-head);font-size:1.12rem;font-weight:700;color:var(--navy);margin-bottom:6px;letter-spacing:-.01em;} .js-body .js-eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:8px;padding:3px 9px;background:var(--teal-light);border-radius:5px;} .js-body p{font-size:.94rem;color:var(--text-light);line-height:1.6;max-width:480px;} .js-visual{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:0 12px 30px rgba(26,46,42,.06);position:relative;} .js-visual-tag{position:absolute;top:-10px;right:14px;font-family:var(--font-head);font-weight:700;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;background:var(--white);border:1.5px solid var(--border);color:var(--text-light);border-radius:6px;} .js-visual-tag.tag-live{border-color:rgba(54,176,70,.4);color:#2a8a2e;background:rgba(54,176,70,.08);} /* Mini-UI fragments */ .js-form-row{display:flex;flex-direction:column;gap:5px;margin-bottom:9px;} .js-form-row:last-child{margin-bottom:0;} .js-form-lbl{font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);} .js-form-lbl::after{content:" *";color:#d44;} .js-form-input{padding:8px 11px;background:var(--off-white);border:1px solid var(--border);border-radius:6px;font-size:.78rem;color:var(--navy);font-family:var(--font-body);} .js-form-select{padding:8px 11px;background:#fff;border:1px solid var(--border);border-radius:6px;font-size:.78rem;color:var(--navy);display:flex;justify-content:space-between;align-items:center;} .js-form-select::after{content:"⌄";color:var(--text-light);} .js-code-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;background:var(--teal-light);border:1px solid rgba(43,181,160,.3);border-radius:6px;font-family:'SF Mono','Monaco','Consolas',monospace;font-size:.74rem;font-weight:700;color:var(--teal-dark);} .js-status-line{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .js-status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-family:var(--font-head);font-weight:700;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border);color:var(--text-light);} .js-status-pill.active{border-color:rgba(43,181,160,.5);color:var(--teal-dark);background:var(--teal-light);} .js-status-pill.done{border-color:rgba(54,176,70,.45);color:#2a8a2e;background:rgba(54,176,70,.10);} .js-status-pill .ssp-dot{width:6px;height:6px;border-radius:50%;background:currentColor;} .js-doc-stack{display:flex;flex-direction:column;gap:6px;} .js-doc-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-family:var(--font-head);font-weight:700;font-size:.74rem;color:var(--navy);} .js-doc-row .jdr-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:.8rem;} .js-doc-row.haz{background:linear-gradient(90deg,rgba(189,93,58,.08),transparent);border-left:3px solid var(--orange);} .js-doc-row.haz .jdr-ico{background:rgba(189,93,58,.16);color:var(--orange-dark);} .js-doc-row.std{background:linear-gradient(90deg,rgba(54,176,70,.08),transparent);border-left:3px solid var(--green);} .js-doc-row.std .jdr-ico{background:rgba(54,176,70,.16);color:#2a8a2e;} .js-doc-row.dgn{background:linear-gradient(90deg,rgba(43,181,160,.08),transparent);border-left:3px solid var(--teal);} .js-doc-row.dgn .jdr-ico{background:var(--teal-light);color:var(--teal-dark);} .js-doc-row .jdr-tag{margin-left:auto;font-family:var(--font-head);font-weight:700;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:#2a8a2e;} .js-progress{display:flex;flex-direction:column;gap:9px;} .js-progress-row{display:flex;align-items:center;gap:10px;font-size:.78rem;} .js-progress-row .jpr-ico{width:18px;height:18px;border-radius:50%;background:var(--off-white);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .js-progress-row.done .jpr-ico{background:var(--green);border-color:var(--green);color:#fff;} .js-progress-row.done .jpr-ico::after{content:"✓";font-size:.65rem;font-weight:800;} .js-progress-row.active .jpr-ico{background:var(--teal);border-color:var(--teal);position:relative;} .js-progress-row.active .jpr-ico::after{content:"";width:5px;height:5px;border-radius:50%;background:#fff;} .js-progress-row.active .jpr-ico::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--teal);opacity:.5;animation:jpr-pulse 1.6s ease-in-out infinite;} @keyframes jpr-pulse{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.4);opacity:0;}} .js-progress-row .jpr-lbl{font-family:var(--font-head);font-weight:700;color:var(--navy);} .js-progress-row.done .jpr-lbl{color:#2a8a2e;} .js-progress-row.active .jpr-lbl{color:var(--teal-dark);} .js-progress-row.todo .jpr-lbl{color:var(--text-light);font-weight:600;} .js-mini-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;} .js-mini-stat{padding:8px 10px;background:var(--off-white);border:1px solid var(--border);border-radius:6px;text-align:left;} .js-mini-stat .jms-num{font-family:var(--font-head);font-weight:800;font-size:.95rem;color:var(--navy);} .js-mini-stat .jms-lbl{font-size:.6rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-head);font-weight:700;margin-top:2px;} .js-mini-bars{display:flex;align-items:flex-end;gap:5px;height:48px;padding:6px 4px 0;} .js-mini-bar{flex:1;background:linear-gradient(180deg,var(--teal),var(--teal-dark));border-radius:3px 3px 0 0;min-height:4px;} .js-mini-bar.alt{background:linear-gradient(180deg,var(--orange),var(--orange-dark));} .js-mini-bars-legend{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-light);font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:0 4px;margin-top:4px;} /* ════════════════════════════════════════════════════════════════ ROADMAP RAIL — polish: connecting line + stage progression dots ──────────────────────────────────────────────────────────────── */ /* Horizontal timeline rail — sits ABOVE the cards in the rail's top padding zone (padding-top:36px) so it never crosses card content. The decorative ::after dots that previously sat inside each card and overlapped the date text have been removed; the .rm-col-marker pills already serve as the per-stage visual indicators. */ .roadmap-rail::before{content:"";position:absolute;left:24px;right:24px;top:16px;height:2px;background:linear-gradient(90deg,rgba(54,176,70,.55) 0%,rgba(43,181,160,.55) 38%,rgba(43,181,160,.4) 60%,rgba(189,93,58,.4) 80%,rgba(189,93,58,.18) 100%);z-index:0;pointer-events:none;} @media (max-width:1000px){.roadmap-rail::before{display:none;}} .rm-col{position:relative;z-index:1;} .rm-col::after{display:none;} /* ════════════════════════════════════════════════════════════════ PREMIUM POLISH LAYER — final refinements, applied last so they layer cleanly over the existing component styles. No new components, just typography, micro-motion and accessibility tightening to push the site closer to Stripe / Linear / Vercel. ──────────────────────────────────────────────────────────────── */ /* Type rendering: enable kerning + ligatures + tabular numerals where numbers appear in stat tiles. Crisper edges on retina. */ html{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} body{font-feature-settings:"kern" 1,"liga" 1,"calt" 1;} /* Heading rhythm — tighten kerning at scale, balance line-height. Visible on h1/h2 in hero and section headers. Not overridden */ /* anywhere else, so a global refinement is safe. */ h1{letter-spacing:-.022em;line-height:1.08;} h2{letter-spacing:-.018em;line-height:1.18;} h3{letter-spacing:-.012em;line-height:1.28;} h4{letter-spacing:-.008em;} /* Body line-height was 1.75 — slightly heavy on dense pages. Keep 1.7 for prose, 1.55 for compact UI strings. */ .eco-card-sum,.flow-stage p,.eco-mod p,.rm-list li,.js-body p{line-height:1.62;} /* Numeric tiles — tabular numerals so 5 / 6 / 94 align cleanly */ .eco-stat-num,.preview-dash-stat .pds-num,.js-mini-stat .jms-num,.aw-counter,.pds-delta{font-variant-numeric:tabular-nums lining-nums;} /* Premium buttons — inherit existing translateY hover, layer in a smooth transition curve and a calmer shadow tier. */ .btn{transition:background .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);will-change:transform;} .btn:active{transform:translateY(0) scale(.985);transition-duration:.08s;} .btn-primary:hover{box-shadow:0 6px 18px rgba(189,93,58,.22),0 2px 6px rgba(189,93,58,.14);} .btn-teal:hover{box-shadow:0 6px 18px rgba(43,181,160,.22),0 2px 6px rgba(43,181,160,.14);} .btn-outline:hover,.btn-secondary:hover{box-shadow:0 6px 18px rgba(43,181,160,.18);} /* Premium focus rings — accessible + brand-coherent. Replaces the default browser outline with a soft teal halo. */ :where(a,button,.btn,input,textarea,select,details summary):focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--radius-sm);transition:outline-offset .15s ease;} .btn:focus-visible{outline-offset:4px;} /* Inline link hover smoothing — subtle ink wash effect instead of a hard color swap. Targets prose links inside articles. */ .ins-article-prose a:not(.btn),.eco-faq-body a:not(.btn){color:var(--teal-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(43,181,160,.5);transition:text-decoration-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);} .ins-article-prose a:not(.btn):hover,.eco-faq-body a:not(.btn):hover{color:var(--navy);text-decoration-color:var(--teal);} /* Card hover refinements — calmer translate, smoother easing. Applied to existing card classes without redefining structure. */ .ins-art,.eco-card,.eco-mod,.eco-rel,.aw-shot{transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1);will-change:transform;} /* Insights article-prose — premium long-form readability. Tighter measure (~70 chars), better paragraph rhythm, refined heading spacing, friendlier blockquote / aside spacing. */ .ins-article-prose{max-width:720px;font-size:1.02rem;line-height:1.72;color:var(--text);} .ins-article-prose p{color:var(--text);font-size:1rem;line-height:1.72;} .ins-article-prose p strong{color:var(--navy);} .ins-article-prose h2{margin-top:48px;margin-bottom:14px;letter-spacing:-.018em;} .ins-article-prose h2:first-child{margin-top:0;} .ins-article-prose h3{margin-top:32px;margin-bottom:10px;} .ins-article-prose h3 + p{margin-top:0;} .ins-article-prose .ins-callout,.ins-article-prose .ins-stat-card{margin:28px 0;} .ins-article-prose .ins-table-wrap{margin:24px 0;} /* Insights category nav — subtle hover pop, smoother active state. */ .aw-ins-cat-nav{transition:box-shadow .25s cubic-bezier(.4,0,.2,1);} .aw-ins-cat-nav:hover{box-shadow:0 4px 16px rgba(43,181,160,.10),var(--shadow-sm);} .aw-ins-cat-nav a{transition:background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);} .aw-ins-cat-nav a:not(.active):hover{transform:translateY(-1px);} /* Insights related-reading cards — refined hover lift + arrow nudge */ .eco-rel{position:relative;} .eco-rel::after{content:"→";position:absolute;right:18px;bottom:18px;font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--teal);opacity:0;transform:translateX(-4px);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);} .eco-rel:hover::after{opacity:1;transform:translateX(0);} /* Selection — branded selection colour */ ::selection{background:rgba(43,181,160,.22);color:var(--navy);} ::-moz-selection{background:rgba(43,181,160,.22);color:var(--navy);} /* Premium scrollbar (WebKit) — calm rather than chrome default */ @media (pointer:fine){ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(43,181,160,.18);border-radius:8px;border:2px solid transparent;background-clip:content-box;} ::-webkit-scrollbar-thumb:hover{background:rgba(43,181,160,.35);background-clip:content-box;} } /* Image sharpening + lazy frame for screenshot grid */ .aw-shot img{image-rendering:-webkit-optimize-contrast;} /* Subtle eyebrow refinement — every brand eyebrow gets the same tight spec. Already styled but unifies tracking. */ .eco-eyebrow,.aw-saas-eyebrow,.js-eyebrow,.eco-rel-tag,.preview-doc-eyebrow{font-feature-settings:"ss01" 1,"kern" 1;} /* Reduce-motion override — kill all the polish transforms / transitions if the user prefers reduced motion. */ @media (prefers-reduced-motion:reduce){ .btn,.ins-art,.eco-card,.eco-mod,.eco-rel,.aw-shot,.flow-node,.js-marker-num,.aw-ins-cat-nav,.aw-ins-cat-nav a{transition:none !important;} .btn:hover,.btn:active{transform:none !important;} .eco-rel::after{display:none;} } /* Page transitions — when showPage() swaps active routes, the new page fades in subtly. Ties the SPA together more smoothly. */ .page.active{animation:aw-page-in .42s cubic-bezier(.4,0,.2,1);} @keyframes aw-page-in{ from{opacity:0;transform:translateY(6px);} to {opacity:1;transform:translateY(0);} } @media (prefers-reduced-motion:reduce){ .page.active{animation:none;} } /* ════════════════════════════════════════════════════════════════ RICH NAV DROPDOWNS — Stripe / HubSpot style two-line dropdown rows for the new 5-group enterprise navigation. ──────────────────────────────────────────────────────────────── */ .nav-dd-rich{min-width:360px;padding:14px;display:grid;grid-template-columns:1fr;gap:2px;} .nav-dd-rich a{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;text-decoration:none;color:inherit;transition:background .2s cubic-bezier(.4,0,.2,1);} .nav-dd-rich a:hover{background:var(--off-white);} .nav-dd-rich a:hover .dd-r-title{color:var(--teal-dark);} .nav-dd-rich .dd-r-ico{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--teal-light);font-size:1rem;flex-shrink:0;transition:background .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);} .nav-dd-rich a:hover .dd-r-ico{background:linear-gradient(135deg,var(--teal-light),rgba(43,181,160,.22));transform:scale(1.04);} .nav-dd-rich .dd-r-ico.orange{background:rgba(189,93,58,.12);color:var(--orange-dark);} .nav-dd-rich a:hover .dd-r-ico.orange{background:linear-gradient(135deg,rgba(189,93,58,.16),rgba(189,93,58,.26));} .nav-dd-rich .dd-r-ico.green{background:rgba(54,176,70,.12);color:#2a8a2e;} .nav-dd-rich .dd-r-text{display:flex;flex-direction:column;gap:1px;min-width:0;} .nav-dd-rich .dd-r-title{font-family:var(--font-head);font-weight:700;font-size:.86rem;color:var(--navy);letter-spacing:-.005em;line-height:1.25;display:flex;align-items:center;gap:6px;} .nav-dd-rich .dd-r-title .dd-r-tag{font-family:var(--font-head);font-weight:700;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:var(--teal-light);color:var(--teal-dark);} .nav-dd-rich .dd-r-title .dd-r-tag.tag-soon{background:rgba(189,93,58,.12);color:var(--orange-dark);} .nav-dd-rich .dd-r-title .dd-r-tag.tag-live{background:rgba(54,176,70,.14);color:#2a8a2e;} .nav-dd-rich .dd-r-sub{font-family:var(--font-body);font-weight:400;font-size:.74rem;color:var(--text-light);line-height:1.45;letter-spacing:0;text-transform:none;} .nav-dd-rich .nav-dd-foot{grid-column:1;margin-top:6px;padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.74rem;color:var(--text-light);} .nav-dd-rich .nav-dd-foot a{padding:0;background:transparent;color:var(--teal-dark);font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.7rem;display:inline-flex;} .nav-dd-rich .nav-dd-foot a:hover{background:transparent;} /* Nav-CTA button — premium standalone "Book Demo" */ .nav-cta .btn-nav-demo{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:700;padding:9px 18px;font-size:0.8rem;letter-spacing:.02em;transition:background .25s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);} .nav-cta .btn-nav-demo:hover{background:var(--orange-dark);border-color:var(--orange-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(189,93,58,.28);} /* Wider nav links so the 5 groups read evenly */ .nav-links a[aria-haspopup]{display:inline-flex;align-items:center;gap:5px;} .nav-links a[aria-haspopup]::after{content:"⌄";font-size:.85rem;color:currentColor;opacity:.55;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);} .has-dd:hover > a[aria-haspopup]::after{transform:translateY(2px);opacity:.9;} /* ═══════════════════════════════════════════════════════════════ BROKERAGE SECTION — supplemental components (.bk-*) Namespaced to avoid conflicts with existing .eco-* styles. ═══════════════════════════════════════════════════════════════ */ /* Responsive capability table */ .bk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);} .bk-table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:480px;} .bk-table th{background:var(--teal);color:#fff;padding:12px 16px;text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;font-family:var(--font-head);} .bk-table td{padding:13px 16px;vertical-align:top;border-bottom:1px solid var(--border);} .bk-table tr:last-child td{border-bottom:none;} .bk-table td:first-child{font-weight:600;color:var(--navy);background:#f0fbf9;min-width:180px;} .bk-table td:last-child{color:var(--text-light);} .bk-table tr:hover td{background:#f8fffe;} /* Process flow */ .bk-process{display:flex;align-items:flex-start;gap:0;margin:32px 0;overflow-x:auto;padding:4px 0 12px;} .bk-process-step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:90px;} .bk-process-dot{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;position:relative;z-index:1;flex-shrink:0;font-family:var(--font-head);} .bk-process-connector{flex:1;height:2px;background:var(--border);margin-top:22px;min-width:16px;} .bk-process-label{font-size:.72rem;font-weight:700;color:var(--grey);text-align:center;margin-top:10px;max-width:88px;line-height:1.35;text-transform:uppercase;letter-spacing:.05em;} /* Comparison grid */ .bk-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0;} .bk-compare-col{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);} .bk-compare-head{padding:14px 20px;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-head);} .bk-compare-col.without .bk-compare-head{background:#4d7068;color:#fff;} .bk-compare-col.with .bk-compare-head{background:var(--teal);color:#fff;} .bk-compare-item{display:flex;align-items:flex-start;gap:10px;padding:11px 18px;border-bottom:1px solid var(--border);font-size:.84rem;line-height:1.5;} .bk-compare-item:last-child{border-bottom:none;} .bk-compare-col.without .bk-compare-item{color:var(--grey);background:#fafbfa;} .bk-compare-col.with .bk-compare-item{color:var(--navy);background:#f4fcf9;} /* Service hub cards */ .bk-hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;} .bk-hub-card{background:#fff;border:1px solid var(--border);border-left:4px solid var(--teal);border-radius:var(--radius-sm);padding:24px 20px;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;} .bk-hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none;} .bk-hub-card-ico{font-size:1.6rem;margin-bottom:12px;line-height:1;} .bk-hub-card-title{font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:8px;font-family:var(--font-head);line-height:1.3;} .bk-hub-card-text{font-size:.82rem;color:var(--text-light);line-height:1.6;flex:1;} .bk-hub-card-arrow{font-size:.78rem;color:var(--teal);font-weight:600;margin-top:12px;} /* Disclaimer */ .bk-disclaimer{background:#f0f9f7;border:1px solid var(--border);border-left:4px solid var(--teal-dark);border-radius:var(--radius-sm);padding:16px 20px;margin:28px 0;font-size:.83rem;color:var(--text-light);line-height:1.65;} .bk-disclaimer strong{color:var(--navy);} /* Quote */ .bk-quote{border-left:4px solid var(--teal);padding:18px 26px;margin:28px 0;background:var(--teal-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;} .bk-quote p{font-size:1rem;font-style:italic;color:var(--navy);line-height:1.65;} .bk-quote cite{display:block;font-size:.78rem;color:var(--teal-dark);font-weight:700;margin-top:10px;text-transform:uppercase;letter-spacing:.08em;font-style:normal;} @media(max-width:900px){.bk-hub-grid{grid-template-columns:1fr 1fr;}.bk-compare{grid-template-columns:1fr;}} @media(max-width:600px){.bk-hub-grid{grid-template-columns:1fr;}.bk-process{padding-bottom:16px;}.bk-process-step{min-width:78px;}.bk-process-label{font-size:.67rem;}} /* Photo gallery grids — brokerage operational imagery */ .bk-photos-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:32px 0;} .bk-photos-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:32px 0;} .bk-photos-3 figure,.bk-photos-2 figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;} .bk-photos-3 img,.bk-photos-2 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .3s ease;} .bk-photos-3 figure:hover img,.bk-photos-2 figure:hover img{transform:scale(1.03);} .bk-photo-caption{font-size:.75rem;color:var(--grey);text-align:center;margin-top:8px;font-style:italic;line-height:1.4;} /* Portrait override for container/barrel images */ .bk-photo-tall img{aspect-ratio:3/4;} @media(max-width:700px){ .bk-photos-3{grid-template-columns:1fr 1fr;} .bk-photos-2{grid-template-columns:1fr 1fr;} } @media(max-width:420px){ .bk-photos-3,.bk-photos-2{grid-template-columns:1fr;} } /* ═══════════════════════════════════════════════════════════ HOMEPAGE CAROUSELS — eco-cards + journey steps All scoped to .aw-eco-cr / .aw-journey-cr to avoid conflicts ═══════════════════════════════════════════════════════════ */ /* ── Shared arrow / dot styles ──────────────────────────── */ .aw-cr-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:40px;height:40px;border-radius:50%; background:#fff;border:1.5px solid var(--border); color:var(--teal);font-size:1.4rem;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .2s,color .2s,box-shadow .2s; z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.08); } .aw-cr-arrow:hover{background:var(--teal);color:#fff;box-shadow:0 4px 16px rgba(43,181,160,.3);} .aw-cr-arrow:disabled{opacity:.35;cursor:default;pointer-events:none;} .aw-cr-dots{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:24px;} .aw-cr-dot{ width:8px;height:8px;border-radius:50%;background:var(--border); border:none;cursor:pointer;padding:0;transition:all .25s; } .aw-cr-dot.active{background:var(--teal);width:22px;border-radius:4px;} /* ── Eco-card carousel ──────────────────────────────────── */ .aw-eco-cr{position:relative;overflow:hidden;padding:0 0 8px;} .aw-eco-cr-viewport{overflow:hidden;} .aw-eco-cr-track{ display:flex;gap:20px; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; } /* Override the grid when inside carousel */ .aw-eco-cr .eco-grid{ display:flex;gap:20px; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; } .aw-eco-cr .eco-card{ flex:0 0 calc(25% - 15px); min-width:0; } .aw-eco-cr .aw-cr-arrow-prev{left:-18px;} .aw-eco-cr .aw-cr-arrow-next{right:-18px;} /* Keep arrows inside on desktop */ @media(min-width:900px){ .aw-eco-cr{padding:0 0 8px;} .aw-eco-cr .aw-cr-arrow-prev{left:-8px;} .aw-eco-cr .aw-cr-arrow-next{right:-8px;} } @media(max-width:1000px){ .aw-eco-cr .eco-card{flex:0 0 calc(50% - 10px);} } @media(max-width:600px){ .aw-eco-cr .eco-card{flex:0 0 calc(100%);} } /* ── Journey-step carousel ──────────────────────────────── */ .aw-journey-cr{position:relative;} .aw-journey-viewport{overflow:hidden;} .aw-journey-track{ display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; } .aw-journey-track .journey-step{ flex:0 0 100%;min-width:0; opacity:0;transition:opacity .3s .15s; } .aw-journey-track .journey-step.aw-js-active{opacity:1;} /* Journey controls bar */ .aw-journey-controls{ display:flex;align-items:center;justify-content:center; gap:16px;margin-top:28px;flex-wrap:wrap; } .aw-journey-steps-nav{display:flex;gap:6px;} .aw-journey-step-btn{ width:38px;height:38px;border-radius:50%; background:transparent;border:1.5px solid var(--border); color:var(--grey);font-family:var(--font-head);font-weight:700; font-size:.72rem;cursor:pointer;transition:all .2s; display:flex;align-items:center;justify-content:center; } .aw-journey-step-btn:hover{border-color:var(--teal);color:var(--teal);} .aw-journey-step-btn.active{ background:var(--teal);border-color:var(--teal);color:#fff; box-shadow:0 4px 12px rgba(43,181,160,.3); } /* Journey prev/next — inline with step dots */ .aw-journey-controls .aw-cr-arrow{ position:static;transform:none; width:38px;height:38px;font-size:1.2rem; } /* Hide the old journey-rail stacking behaviour */ .aw-journey-cr .journey-rail{ overflow:hidden; } /* ═══════════════════════════════════════════════════════════ PLATFORM SCREENSHOT CAROUSEL (#platform-carousel) 3 visible desktop · 2 tablet · 1 mobile Auto-plays, pauses on hover, slides 1 at a time. ═══════════════════════════════════════════════════════════ */ .aw-sc-wrap{position:relative;} .aw-sc-viewport{overflow:hidden;border-radius:var(--radius-sm);} /* Override the grid to flex-track when inside carousel */ .aw-sc-wrap .aw-real-grid{ display:flex !important; flex-wrap:nowrap; gap:22px; margin-top:0; transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform; } .aw-sc-wrap .aw-shot{ flex:0 0 calc(33.33% - 15px); min-width:0; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-md); overflow:hidden; } /* Arrow buttons */ .aw-sc-btn{ position:absolute; top:calc(50% - 20px); transform:translateY(-50%); width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.95); border:1.5px solid var(--border); color:var(--teal); font-size:1.5rem;line-height:1; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .2s,color .2s,box-shadow .2s,opacity .2s; z-index:10; box-shadow:0 3px 12px rgba(0,0,0,.12); opacity:.85; } .aw-sc-btn:hover{background:var(--teal);color:#fff;opacity:1;box-shadow:0 4px 18px rgba(43,181,160,.35);} .aw-sc-btn:disabled{opacity:.25;cursor:default;pointer-events:none;} .aw-sc-prev{left:-16px;} .aw-sc-next{right:-16px;} /* Dots + progress bar */ .aw-sc-footer{ display:flex;flex-direction:column;align-items:center; gap:10px;margin-top:22px; } .aw-sc-dots{display:flex;gap:7px;align-items:center;} .aw-sc-dot{ width:8px;height:8px;border-radius:50%; background:var(--border);border:none;padding:0;cursor:pointer; transition:all .25s;flex-shrink:0; } .aw-sc-dot.active{background:var(--teal);width:24px;border-radius:4px;} /* Auto-play progress bar */ .aw-sc-progress{ width:120px;height:3px;border-radius:2px; background:var(--border);overflow:hidden; } .aw-sc-progress-fill{ height:100%;width:0%;border-radius:2px; background:var(--teal); transition:width linear; } /* Pause icon hint */ .aw-sc-hint{ font-size:.72rem;color:var(--grey); display:flex;align-items:center;gap:5px; user-select:none; } /* Responsive */ @media(max-width:900px){ .aw-sc-wrap .aw-shot{flex:0 0 calc(50% - 11px);} .aw-sc-prev{left:-10px;} .aw-sc-next{right:-10px;} } @media(max-width:580px){ .aw-sc-wrap .aw-shot{flex:0 0 100%;} .aw-sc-prev{left:0;} .aw-sc-next{right:0;} } /* ── Force aw-reveal content to be visible across the site ───────────── Pages looked blank after navigation because aw-reveal elements stay at opacity:0 until IntersectionObserver fires. This override ensures key sections and navigated pages always show their content. ──────────────────────────────────────────────────────────────────────── */ /* Home page: first visible sections always shown */ #page-home.active .trust-strip .aw-reveal, #page-home.active #aw-at-a-glance .aw-reveal, #page-home.active #aw-at-a-glance .aw-reveal-stagger > *, #page-home.active #aw-eco-flow .aw-reveal, #page-home.active #aw-eco-flow .aw-reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } /* All pages: hero sections always fully visible */ .page.active .eco-page-hero .aw-reveal, .page.active .eco-page-hero .aw-reveal-stagger > *, .page.active section:first-of-type .aw-reveal, .page.active section:first-of-type .aw-reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } /* ═══════════════════════════════════════════════════════════════════════ DWTS READINESS CHECKER — interactive enterprise wizard. Self-contained block scoped on .dwts-checker* classes so it cannot interact with the rest of the design system or the EWC finder. ═══════════════════════════════════════════════════════════════════════ */ .dwts-checker-section { background: var(--off-white); padding: 88px 0 96px; position: relative; } .dwts-checker-section::before { content:""; position: absolute; inset: 0; background-image: radial-gradient(ellipse 60% 50% at 18% 0%, rgba(43,181,160,.08) 0%, transparent 60%), radial-gradient(ellipse 40% 35% at 95% 100%, rgba(189,93,58,.06) 0%, transparent 60%); pointer-events: none; } .dwts-checker-section > .container { position: relative; z-index: 1; } .dwts-checker-header { max-width: 760px; margin: 0 auto 28px; text-align: center; } .dwts-checker-header h2 { margin-top: 12px; } .dwts-checker-lede { margin-top: 14px; color: var(--text-light); font-size: 1.05rem; line-height: 1.7; } .dwts-checker-banner { display: flex; align-items: flex-start; gap: 14px; margin: 26px auto 0; max-width: 740px; padding: 16px 20px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: left; } .dwts-checker-banner-ico { flex-shrink: 0; font-size: 1.4rem; line-height: 1.2; } .dwts-checker-banner p { font-size: .94rem; color: var(--text); margin: 0; line-height: 1.55; } .dwts-checker-banner strong { color: var(--navy); font-family: var(--font-head); font-weight: 700; } .dwts-checker-card { max-width: 880px; margin: 36px auto 0; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; } .dwts-checker-progress { padding: 18px 28px 0; display: flex; flex-direction: column-reverse; gap: 8px; } .dwts-checker-progress-bar { height: 6px; background: var(--teal-light); border-radius: 999px; overflow: hidden; } .dwts-checker-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--green)); border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.2,1); } .dwts-checker-progress-step { font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-light); } .dwts-checker-body { padding: 26px 28px 8px; min-height: 280px; } .dwts-checker-question h3 { font-size: 1.4rem; margin-bottom: 14px; } .dwts-checker-question p.hint { color: var(--text-light); font-size: .94rem; margin-bottom: 22px; line-height: 1.55; } .dwts-checker-options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .dwts-checker-option { display: block; padding: 14px 18px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--text); text-align: left; cursor: pointer; transition: all var(--transition); } .dwts-checker-option:hover { border-color: var(--teal); background: var(--teal-light); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .dwts-checker-option.selected { border-color: var(--teal); background: var(--teal-light); color: var(--teal-dark); } .dwts-checker-option:focus-visible { outline: 3px solid rgba(43,181,160,.4); outline-offset: 2px; } .dwts-checker-footer { padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); background: var(--off-white); gap: 8px; } .dwts-checker-btn { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: all var(--transition); background: transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .dwts-checker-btn-ghost { color: var(--text-light); } .dwts-checker-btn-ghost:hover { color: var(--teal-dark); background: var(--teal-light); } .dwts-checker-btn:disabled { opacity: .35; cursor: not-allowed; } .dwts-checker-btn:disabled:hover { background: transparent; color: var(--text-light); } .dwts-checker-btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); } .dwts-checker-btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); } .dwts-checker-btn-outline { color: var(--teal-dark); border-color: var(--teal); } .dwts-checker-btn-outline:hover { background: var(--teal-light); } /* Result card */ .dwts-checker-result { animation: dwtsCheckerFade .35s ease; } @keyframes dwtsCheckerFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .dwts-checker-verdict { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--teal), var(--green)); color: #fff; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(43,181,160,.18); } .dwts-checker-verdict.verdict-amber { background: linear-gradient(135deg, #d18045, var(--orange)); box-shadow: 0 8px 24px rgba(189,93,58,.18); } .dwts-checker-verdict.verdict-grey { background: linear-gradient(135deg, var(--navy-mid), var(--navy)); box-shadow: 0 8px 24px rgba(26,46,42,.22); } .dwts-checker-verdict-ico { font-size: 1.6rem; line-height: 1; } .dwts-checker-verdict-text { flex: 1; } .dwts-checker-verdict-text small { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; display: block; } .dwts-checker-verdict-text h3 { color: #fff; margin: 4px 0 0; font-size: 1.2rem; line-height: 1.3; } .dwts-checker-summary { color: var(--text); font-size: .98rem; line-height: 1.65; margin-bottom: 18px; } .dwts-checker-result-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 20px; } .dwts-checker-result-card { padding: 14px 16px; border-radius: var(--radius-md); background: var(--off-white); border: 1px solid var(--border); } .dwts-checker-result-card h4 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px; font-weight: 700; } .dwts-checker-result-card p { margin: 0; font-size: .94rem; color: var(--text); font-weight: 600; font-family: var(--font-head); } .dwts-checker-actions { margin-bottom: 18px; } .dwts-checker-actions h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; font-weight: 800; } .dwts-checker-actions ul { list-style: none; padding: 0; margin: 0; } .dwts-checker-actions li { position: relative; padding: 9px 0 9px 30px; font-size: .94rem; color: var(--text); line-height: 1.55; border-bottom: 1px dashed var(--border); } .dwts-checker-actions li:last-child { border-bottom: none; } .dwts-checker-actions li::before { content: "✓"; position: absolute; left: 0; top: 10px; width: 20px; height: 20px; background: var(--teal-light); color: var(--teal-dark); border-radius: 50%; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .dwts-checker-message { font-size: .92rem; color: var(--text); line-height: 1.65; padding: 14px 16px; background: var(--teal-light); border-radius: var(--radius-md); margin-bottom: 18px; } .dwts-checker-message strong { color: var(--navy); font-family: var(--font-head); font-weight: 700; } .dwts-checker-also { margin-bottom: 18px; padding: 14px 16px; background: rgba(43,181,160,.05); border: 1px dashed var(--border); border-radius: var(--radius-md); } .dwts-checker-also h4 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 8px; font-weight: 700; } .dwts-checker-also ul { margin: 0; padding-left: 18px; } .dwts-checker-also li { color: var(--text); font-size: .9rem; margin-bottom: 6px; line-height: 1.5; } .dwts-checker-also strong { color: var(--navy); font-family: var(--font-head); } .dwts-checker-result-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 18px; border-top: 1px solid var(--border); } .dwts-checker-result-cta .dwts-checker-btn { padding: 12px 22px; font-size: .76rem; } .dwts-checker-source { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .76rem; color: var(--teal-dark); text-decoration: none; margin-left: auto; letter-spacing: .04em; text-transform: uppercase; } .dwts-checker-source:hover { color: var(--teal); } .dwts-checker-disclaimer { max-width: 780px; margin: 22px auto 0; text-align: center; font-size: .82rem; color: var(--text-light); line-height: 1.6; } @media (max-width: 720px) { .dwts-checker-section { padding: 56px 0 60px; } .dwts-checker-card { margin: 26px auto 0; } .dwts-checker-progress { padding: 14px 18px 0; } .dwts-checker-body { padding: 18px 18px 6px; min-height: 220px; } .dwts-checker-question h3 { font-size: 1.15rem; } .dwts-checker-footer { padding: 14px 18px; flex-wrap: wrap; } .dwts-checker-result-grid { grid-template-columns: 1fr; } .dwts-checker-verdict { padding: 14px 16px; } .dwts-checker-verdict-text h3 { font-size: 1.05rem; } .dwts-checker-result-cta { flex-direction: column; align-items: stretch; } .dwts-checker-source { margin-left: 0; justify-content: center; } }