:root { color-scheme: light; --fg: #1a1a1a; --muted: #6b7280; --border: #e5e7eb; --accent: #2563eb; --brand-yellow: #e3ff1e; --brand-black: #0d0d0d; --brand-black-soft: #171717; } /* ── Palette experiment (scoped to , e.g. via a page's bodyClass prop) — swap the brand tokens to preview an alternate colour story without touching the site-wide black/yellow brand. Remove the class to go back to normal. ── */ .palette-experiment { --brand-black: #10182b; --brand-black-soft: #1a2540; --brand-yellow: #ff8552; --accent: #d1451f; } .display-font { font-family: "Anton", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); line-height: 1.6; } a { color: inherit; text-decoration: none; } .inline-link { font-weight: 600; } .inline-link:hover { text-decoration: underline; } .inline-link svg { width: 1rem; height: 1rem; flex-shrink: 0; } .site-header { background: var(--brand-black); border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 0; z-index: 50; } .site-nav { max-width: 1140px; margin: 0 auto; padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 2rem; } .site-nav .brand { display: flex; align-items: center; flex-shrink: 0; } .site-nav .brand img { display: block; height: 32px; width: auto; } /* Two logo variants (white-on-dark / dark-on-light) — theme controls which shows */ .logo-for-light-bg { display: none; } .site-nav ul { list-style: none; display: flex; gap: 0.25rem; margin: 0; padding: 0; flex: 1; } .site-nav ul a { display: inline-block; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); } .site-nav ul a:hover { color: #fff; } /* ── Product dropdown (pure CSS: hover + focus-within, no JS) ── */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; border-radius: 6px; font: inherit; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); background: none; border: none; cursor: pointer; } .nav-dropdown-trigger:hover { color: #fff; } .nav-caret { width: 0.65rem; height: 0.65rem; transform: rotate(90deg); transition: transform 0.15s ease; } .nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(-90deg); } .nav-dropdown-panel { position: absolute; top: 100%; left: 0; margin-top: 0.5rem; min-width: 250px; background: #fff; border-radius: 14px; padding: 0.5rem; box-shadow: 0 24px 48px -16px rgba(10, 10, 10, 0.35); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 60; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav .nav-dropdown-panel .nav-dropdown-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.88rem; font-weight: 500; color: #1a1a1a; } .site-nav .nav-dropdown-panel .nav-dropdown-item:hover { background: #f4f4f3; color: #1a1a1a; } .nav-item-icon { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: #f4f4f3; flex-shrink: 0; } .nav-item-icon svg { width: 1rem; height: 1rem; color: #1a1a1a; } /* Nested flyout: Features → individual feature pages */ .nav-flyout-trigger { position: relative; } .nav-flyout-caret { width: 0.65rem; height: 0.65rem; color: #8b8b8b; flex-shrink: 0; margin-left: auto; } .nav-flyout-panel { position: absolute; top: -0.5rem; left: 100%; margin-left: 0.5rem; min-width: 290px; background: #fff; border-radius: 14px; padding: 0.5rem; box-shadow: 0 24px 48px -16px rgba(10, 10, 10, 0.35); opacity: 0; visibility: hidden; transform: translateX(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 61; } .nav-flyout-trigger:hover .nav-flyout-panel, .nav-flyout-trigger:focus-within .nav-flyout-panel { opacity: 1; visibility: visible; transform: translateX(0); } /* ── Mobile menu (pure CSS checkbox toggle, no JS) ── */ .mobile-menu-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .mobile-menu-button { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.5rem; height: 2.5rem; flex-shrink: 0; cursor: pointer; border-radius: 6px; } .mobile-menu-button span { display: block; width: 20px; height: 2px; background: currentColor; color: rgba(255, 255, 255, 0.85); transition: transform 0.2s ease, opacity 0.2s ease; } .mobile-menu-checkbox:checked ~ nav .mobile-menu-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-checkbox:checked ~ nav .mobile-menu-button span:nth-child(2) { opacity: 0; } .mobile-menu-checkbox:checked ~ nav .mobile-menu-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav-panel { display: none; position: fixed; top: 65px; left: 0; right: 0; bottom: 0; overflow-y: auto; background: var(--brand-black); padding: 1.25rem 1.5rem 2.5rem; z-index: 90; } .mobile-nav-group summary { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0.25rem; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav-group summary::-webkit-details-marker { display: none; } .mobile-nav-group summary::after { content: "+"; font-weight: 400; color: rgba(255, 255, 255, 0.5); } .mobile-nav-group[open] > summary::after { content: "\2212"; } .mobile-nav-link-inline { display: flex; align-items: center; gap: 0.65rem; } .mobile-nav-sublist { display: flex; flex-direction: column; padding: 0.5rem 0 0.75rem; } .mobile-nav-group-nested { border: none; } .mobile-nav-group-nested summary { padding: 0.7rem 0.25rem; font-size: 0.92rem; border-bottom: none; } .mobile-nav-group-nested .mobile-nav-sublist { padding-left: 1rem; } .mobile-nav-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.25rem; font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); } .mobile-nav-link:hover { color: #fff; } .mobile-nav-top-link { padding: 0.9rem 0.25rem; font-size: 1rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; } .mobile-nav-actions .btn { width: 100%; justify-content: center; } .site-nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .site-nav .login-link { padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); border-radius: 6px; } .site-nav .login-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .site-nav .cta { background: var(--brand-yellow); color: var(--brand-black); padding: 0.55rem 1.1rem; border-radius: 6px; font-weight: 700; font-size: 0.9rem; } .content-main { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; min-height: 60vh; } .home-main { min-height: 60vh; } .container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 8px; font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; white-space: nowrap; } .btn svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .btn-primary { background: var(--brand-yellow); color: var(--brand-black); } .btn-outline { border-color: currentColor; color: inherit; } .section { padding: 5rem 0; } .section-alt { background: #f7f7f5; } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 1rem; } .eyebrow svg { width: 0.9rem; height: 0.9rem; vertical-align: -2px; margin-right: 0.3rem; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .section-head h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin: 0 0 0.75rem; } .section-head p { color: var(--muted); font-size: 1.15rem; margin: 0; } /* ── Hero ── */ .hero { background: var(--brand-black); color: #fff; padding: 5rem 0 4rem; overflow-x: hidden; } .hero .container { max-width: 820px; text-align: center; } .hero h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.05; margin: 0 0 1.5rem; color: var(--brand-yellow); } .hero p.lead { font-size: 1.2rem; color: #d4d4d4; max-width: 620px; margin: 0 auto 2rem; } .hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero .btn-outline { border-color: #3a3a3a; color: #fff; } .hero .eyebrow { border: 1px solid color-mix(in srgb, var(--brand-yellow) 35%, transparent); background: color-mix(in srgb, var(--brand-yellow) 8%, transparent); border-radius: 999px; padding: 0.5rem 1.1rem; margin-bottom: 2rem; } .trust-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.9rem; color: #a3a3a3; } .trust-pills.solutions-badges { margin-bottom: 2.5rem; } .trust-pills li { display: inline-flex; align-items: center; gap: 0.4rem; } .trust-pills .tick { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand-yellow); } .trust-pills .youtube-link { display: inline-flex; align-items: center; gap: 0.4rem; color: #a3a3a3; } .trust-pills .youtube-link:hover { color: #fff; } .trust-pills .youtube-link .tick { color: #ff0000; } /* ── Hero: two-column split (text + floating card visual) ── */ .hero .container.hero-split { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; max-width: 1140px; text-align: left; } @media (min-width: 900px) { .hero .container.hero-split { grid-template-columns: 1fr 1fr; } } .hero .hero-split-text p.lead { margin: 0 0 2rem; max-width: none; } .hero .hero-split-text .trust-pills, .hero .hero-split-text .hero-actions { justify-content: flex-start; } .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; } .hero-visual-blur { position: absolute; inset: -10%; background: radial-gradient(45% 55% at 30% 30%, color-mix(in srgb, var(--brand-yellow) 30%, transparent), transparent 70%), radial-gradient(40% 50% at 75% 70%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); filter: blur(40px); border-radius: 32px; } .wtn-card { position: relative; width: 100%; max-width: 340px; background: #fff; border-radius: 20px; padding: 1.5rem; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.25); } .wtn-card-header { display: flex; align-items: flex-start; gap: 0.75rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #eeeeec; } .wtn-card-icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; background: #f4f4f3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wtn-card-icon svg { width: 1.1rem; height: 1.1rem; color: #0a0a0a; } .wtn-card-heading { flex: 1; } .wtn-card-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: #0a0a0a; } .wtn-card-ref { margin: 0.15rem 0 0; font-size: 0.75rem; color: #8b8b8b; } .wtn-status { flex-shrink: 0; background: #e6f9ec; color: #1a7f3c; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.3rem 0.6rem; border-radius: 999px; } .wtn-card-rows { display: grid; gap: 0.6rem; margin-bottom: 1rem; } .wtn-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; } .wtn-row span { color: #8b8b8b; } .wtn-row strong { color: #0a0a0a; font-weight: 600; } .wtn-card-footer { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid #eeeeec; } .wtn-sig { width: 3.5rem; height: 1.5rem; color: #0a0a0a; flex-shrink: 0; } .wtn-sig-name { margin: 0; font-size: 0.78rem; font-weight: 600; color: #0a0a0a; } .wtn-sig-time { margin: 0.1rem 0 0; font-size: 0.72rem; color: #8b8b8b; } .wtn-float-badge { position: absolute; top: 8%; right: 2%; display: flex; align-items: center; gap: 0.4rem; background: #0a0a0a; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.55rem 0.9rem; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(10, 10, 10, 0.4); } .wtn-float-badge svg { width: 0.9rem; height: 0.9rem; color: #d8ff3e; } /* ── Feature mockup cards (used in feature-row visual panels) ── */ .feature-mockup.wtn-card { width: 100%; max-width: 280px; margin: 0 auto; } .feature-mockup-footnote svg { width: 1.1rem; height: 1.1rem; color: var(--brand-black); flex-shrink: 0; } .feature-mockup-footnote p { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--fg); } .gatehouse-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; } .gatehouse-row > span:first-child { color: #8b8b8b; } .gatehouse-status { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: #1a7f3c; } .gatehouse-status i { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #1a7f3c; flex-shrink: 0; } .gatehouse-status-ready { color: #8b8b8b; } .chat-bubbles { display: grid; gap: 0.6rem; } .chat-bubble { margin: 0; font-size: 0.82rem; line-height: 1.5; padding: 0.65rem 0.9rem; border-radius: 14px; max-width: 85%; } .chat-bubble-user { background: #f4f4f3; color: var(--fg); justify-self: end; border-bottom-right-radius: 4px; } .chat-bubble-ai { display: flex; align-items: flex-start; gap: 0.4rem; background: color-mix(in srgb, var(--brand-yellow) 15%, #fff); color: var(--fg); font-weight: 500; border-bottom-left-radius: 4px; } .chat-bubble-ai svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--brand-black); } /* ── Cards ── */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .card { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 1.75rem; position: relative; } .icon-badge { width: 3rem; height: 3rem; border-radius: 12px; background: color-mix(in srgb, var(--brand-yellow) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand-yellow) 20%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .icon-badge svg { width: 1.5rem; height: 1.5rem; color: var(--brand-yellow); } .card-tag { position: absolute; top: 1.5rem; right: 1.5rem; background: var(--brand-yellow); color: var(--brand-black); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.25rem 0.65rem; border-radius: 999px; } .card .tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; } .card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; } .card p { margin: 0; color: var(--muted); font-size: 0.95rem; } .card a.card-link { display: block; } /* ── Steps ── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; counter-reset: step; } .step { position: relative; padding-left: 3rem; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand-black); color: var(--brand-yellow); display: flex; align-items: center; justify-content: center; font-weight: 700; } .step h3 { margin: 0 0 0.4rem; } .step p { margin: 0; color: var(--muted); } /* ── Industries ── */ .industries { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; list-style: none; padding: 0; } .industries li { border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 1.25rem; font-weight: 600; font-size: 0.9rem; } /* ── Testimonials ── */ .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .testimonial { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem; } .testimonial p { font-size: 1.05rem; margin: 0 0 1rem; } .testimonial .who { font-size: 0.85rem; color: var(--muted); } .testimonial .who strong { color: var(--fg); } /* ── Founder quote ── */ .founder-quote { background: var(--brand-black); color: #fff; border-radius: 16px; padding: 3rem; text-align: center; } .founder-quote p { font-size: 1.3rem; line-height: 1.5; max-width: 760px; margin: 0 auto 1.5rem; } .founder-quote .who { color: var(--brand-yellow); font-weight: 700; } /* ── Pricing teaser ── */ .pricing-teaser { text-align: center; max-width: 640px; margin: 0 auto; } .pricing-teaser .price { font-size: 1.4rem; font-weight: 700; margin: 1rem 0 2rem; } .pricing-teaser .price strong { color: var(--accent); } /* ── FAQ (native

) ── */ .faq { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 0.5rem 1.75rem; } .faq details { border-bottom: 1px solid var(--border); padding: 1.1rem 0; } .faq details:last-child { border-bottom: none; } .faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; font-weight: 400; color: var(--muted); } .faq details[open] summary::after { content: "\2212"; } .faq p { color: var(--muted); margin: 0.75rem 0 0; line-height: 1.6; } /* ── Final CTA banner ── */ .cta-banner { background: var(--brand-black); color: #fff; text-align: center; padding: 5rem 0; } .cta-banner h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.75rem); margin: 0 0 1rem; } .cta-banner p { color: #a3a3a3; margin: 0 0 2rem; } .blog-list { display: flex; flex-direction: column; gap: 1.25rem; } .blog-card { display: flex; gap: 1.5rem; border: 1px solid var(--border); background: #fff; border-radius: 16px; padding: 1.25rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .blog-card:hover { border-color: var(--brand-black); box-shadow: 0 16px 40px -28px rgba(10, 10, 10, 0.3); } .blog-card-media { flex-shrink: 0; width: 220px; border-radius: 10px; overflow: hidden; background: #f7f7f5; align-self: stretch; } .blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .blog-card-category { display: inline-block; align-self: flex-start; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-black); background: color-mix(in srgb, var(--brand-yellow) 40%, transparent); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.6rem; } .blog-card-body h2 { font-size: 1.2rem; line-height: 1.35; margin: 0 0 0.5rem; } .blog-card-body p { font-size: 0.9rem; color: var(--muted); line-height: 1.55; margin: 0 0 0.85rem; flex: 1; } .blog-card-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--muted); } .blog-card-meta span { display: inline-flex; align-items: center; gap: 0.35rem; } .blog-card-meta svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; } @media (max-width: 640px) { .blog-card { flex-direction: column; gap: 1rem; } .blog-card-media { width: 100%; height: 160px; } } .article { max-width: 720px; margin: 0 auto; } .article h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 1rem; } .article-meta { color: var(--muted); font-size: 0.88rem; display: flex; align-items: center; gap: 1.25rem; margin: 0 0 2.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border); } .article-meta span { display: inline-flex; align-items: center; gap: 0.4rem; } .article-meta svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .hero-image { width: 100%; border-radius: 14px; margin: 1.5rem 0 2rem; } /* ── Article body — long-form content typography ── */ .article-body { font-size: 1.02rem; line-height: 1.75; color: var(--fg); } .article-body > :first-child { margin-top: 0; } .article-body p { margin: 0 0 1.25rem; } .article-body h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 2.75rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .article-body > h2:first-of-type { padding-top: 0; border-top: none; margin-top: 2rem; } .article-body h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 1.75rem 0 0.75rem; } .article-body strong { color: var(--fg); font-weight: 700; } .article-body a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border); transition: text-decoration-color 0.15s ease; } .article-body a:hover { text-decoration-color: var(--fg); } .article-body ul, .article-body ol { margin: 0 0 1.25rem; padding-left: 1.3rem; } .article-body li { margin-bottom: 0.5rem; line-height: 1.7; } .article-body li > ul, .article-body li > ol { margin-top: 0.5rem; margin-bottom: 0; } .article-body hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } .article-body code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85em; background: #f0f0ec; padding: 0.15rem 0.4rem; border-radius: 4px; } .article-body pre { background: #16171a; color: #d4d4d4; padding: 1rem 1.25rem; border-radius: 14px; overflow-x: auto; margin: 0 0 1.5rem; } .article-body pre code { background: none; padding: 0; color: inherit; font-size: 0.82rem; line-height: 1.6; } .article-body blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 12px; background: #f7f7f5; border-left: 4px solid var(--brand-yellow); } .article-body blockquote p { margin: 0; font-size: 0.94rem; line-height: 1.65; font-style: normal; color: var(--fg); } .article-body blockquote p + p { margin-top: 0.6rem; } .article-body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.75rem 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 0.9rem; } .article-body th { text-align: left; background: #f7f7f5; font-weight: 700; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); } .article-body td { padding: 0.7rem 1rem; border-top: 1px solid var(--border); line-height: 1.55; vertical-align: top; } .article-body tr:first-child td { border-top: none; } .article-body img { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; } @media (max-width: 640px) { .article h1 { font-size: 1.65rem; } .article-body h2 { font-size: 1.3rem; } .article-body table { font-size: 0.82rem; } .article-body th, .article-body td { padding: 0.55rem 0.65rem; } } .site-footer { background: var(--brand-black); border-top: 1px solid #1f1f1f; margin-top: 4rem; padding: 4rem 1.5rem 2.5rem; } .footer-top { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 3rem; } .footer-brand img { display: block; margin-bottom: 1.25rem; } .footer-brand p { color: #8b8b8b; font-size: 0.9rem; line-height: 1.6; max-width: 24rem; margin: 0 0 1.5rem; } .footer-socials { display: flex; gap: 0.75rem; } .footer-socials a { width: 2.1rem; height: 2.1rem; border-radius: 999px; background: #1a1a1a; border: 1px solid #2e2e2e; color: #9a9a9a; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; } .footer-socials a:hover { color: #fff; border-color: #555; } .footer-socials svg { width: 1rem; height: 1rem; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; } .footer-grid h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #f2f2f2; margin: 0 0 1.1rem; } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; } .footer-grid a { color: #8b8b8b; font-size: 0.88rem; } .footer-grid a:hover { color: #fff; } .footer-bottom { max-width: 1140px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid #1f1f1f; display: flex; justify-content: center; align-items: center; gap: 1rem; } .footer-bottom .copyright { color: #6b6b6b; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .footer-bottom .footer-divider { color: #3a3a3a; } .footer-bottom a { color: #8b8b8b; font-size: 0.78rem; font-weight: 600; } .footer-bottom a:hover { color: #fff; } /* ── Solutions page: method group intro (left-aligned, wider) ── */ .section-head.section-head-left { text-align: left; margin: 0 0 2.5rem; max-width: none; } .method-group-title { font-size: 1.5rem; margin: 0 0 0.4rem; } .method-group-desc { color: var(--muted); max-width: 42rem; margin: 0 0 2rem; } .method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .method-panel { position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; background: #fff; } .method-intent { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 700; font-size: 0.98rem; line-height: 1.4; color: var(--fg); margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .method-intent svg { width: 1rem; height: 1rem; color: var(--accent); flex-shrink: 0; margin-top: 0.2rem; } .method-intent.has-badge { padding-right: 11rem; } .method-panel-head { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .method-panel-head.has-badge h3 { padding-right: 8.5rem; } @media (max-width: 640px) { .method-panel .card-tag { position: static; display: inline-block; margin-bottom: 1rem; } .method-intent.has-badge, .method-panel-head.has-badge h3 { padding-right: 0; } } .method-panel-head h3 { margin: 0 0 0.25rem; font-size: 1.15rem; } .method-tagline { color: var(--accent); font-style: italic; font-size: 0.88rem; margin: 0 0 0.5rem; } .method-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0; } .method-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .method-feature-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: #f7f7f5; border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem 0.65rem; font-size: 0.75rem; font-weight: 600; } .method-feature-pill svg { width: 0.9rem; height: 0.9rem; color: var(--accent); flex-shrink: 0; } .method-links { display: flex; flex-wrap: wrap; gap: 1.25rem; } .method-links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent); font-size: 0.8rem; font-weight: 600; } .method-links a svg { width: 0.85rem; height: 0.85rem; } body:not(.theme-capsule) .section-dark .method-panel, body:not(.theme-capsule) .section-dark .method-feature-pill { background: var(--brand-black-soft); border-color: #2a2a2a; } /* ── Stats grid ── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .stat-card { background: var(--brand-black-soft); border: 1px solid #2a2a2a; border-radius: 14px; padding: 1.5rem 1rem; text-align: center; } .stat-value { font-size: 1.6rem; color: var(--brand-yellow); margin-bottom: 0.25rem; } .stat-label { font-size: 0.78rem; color: #a3a3a3; line-height: 1.4; } /* ── Pricing page ── */ .billing-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .billing-toggle { display: inline-flex; background: #f4f4f3; border-radius: 999px; padding: 0.25rem; gap: 0.25rem; margin-top: 2rem; } .billing-toggle label { padding: 0.6rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.15s ease, color 0.15s ease; } .save-badge { font-size: 0.68rem; font-weight: 700; background: color-mix(in srgb, var(--brand-yellow) 30%, transparent); color: var(--brand-black); padding: 0.15rem 0.5rem; border-radius: 999px; } #billing-monthly:checked ~ .hero .billing-toggle label[for="billing-monthly"], #billing-annual:checked ~ .hero .billing-toggle label[for="billing-annual"] { background: #fff; color: var(--fg); box-shadow: 0 1px 4px rgba(10, 10, 10, 0.12); } .price-monthly, .price-annual { display: none; } #billing-monthly:checked ~ .pricing-section .price-monthly { display: block; } #billing-annual:checked ~ .pricing-section .price-annual { display: block; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; align-items: start; } .pricing-plan { position: relative; background: #f4f4f3; border-radius: 20px; padding: 1.75rem; display: flex; flex-direction: column; } .pricing-plan-featured { background: #fff; box-shadow: 0 24px 60px -24px rgba(10, 10, 10, 0.25); border: 2px solid var(--brand-black); } .pricing-plan-ribbon { position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.35rem; background: var(--brand-black); color: var(--brand-yellow); font-size: 0.72rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 999px; } .pricing-plan-ribbon svg { width: 0.8rem; height: 0.8rem; } .pricing-plan-head { display: flex; gap: 0.9rem; margin-bottom: 1.25rem; } .pricing-plan-head h2 { margin: 0; font-size: 1.2rem; } .pricing-plan-tagline { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); } .pricing-plan-price { min-height: 4.5rem; margin-bottom: 1.25rem; } .price-amount { font-size: 1.9rem; font-weight: 800; color: var(--fg); } .price-suffix { font-size: 0.95rem; color: var(--muted); } .price-note { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); } .pricing-plan-seats { display: flex; align-items: center; gap: 0.5rem; background: #fff; border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 1.25rem; font-size: 0.82rem; font-weight: 600; } .pricing-plan-featured .pricing-plan-seats { background: #f4f4f3; } .pricing-plan-seats svg { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; } .pricing-plan-features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.65rem; flex: 1; } .pricing-plan-features li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; line-height: 1.4; } .pricing-plan-features svg { width: 0.95rem; height: 0.95rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.15rem; } .pricing-plan-cta { width: 100%; justify-content: center; } .pricing-note { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 2rem auto 0; max-width: 42rem; } .cta-banner p.pricing-note { margin-left: auto; margin-right: auto; } .included-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .included-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; } .included-item svg { width: 1.1rem; height: 1.1rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.1rem; } .pricing-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .pricing-faq-card { border: 1px dashed var(--border); border-radius: 16px; padding: 1.5rem; text-align: center; } .pricing-faq-q { font-weight: 700; margin: 0 0 0.5rem; } .pricing-faq-a { font-size: 0.85rem; color: var(--muted); margin: 0; } .pricing-trust-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; font-size: 0.82rem; } .pricing-trust-note svg { width: 1rem; height: 1rem; } /* ── Why WasteBolt page ── */ .story-quote { background: #f4f4f3; border-radius: 20px; padding: 2.5rem; margin-bottom: 3.5rem; } .story-quote > svg { width: 2rem; height: 2rem; color: var(--muted); margin-bottom: 1.25rem; } .story-quote-lead { font-size: 1.15rem; font-weight: 600; line-height: 1.6; color: var(--fg); margin: 0 0 1.25rem; } .story-quote p:not(.story-quote-lead) { color: var(--muted); line-height: 1.7; margin: 0 0 1rem; } .story-quote p:last-child { margin-bottom: 0; } .pillar-list { display: flex; flex-direction: column; gap: 3rem; } .pillar-row { display: flex; gap: 1.5rem; } .pillar-icon { flex-shrink: 0; width: 3.25rem; height: 3.25rem; } .pillar-row h3 { margin: 0.35rem 0 0.9rem; font-size: 1.2rem; } .pillar-row p { color: var(--muted); line-height: 1.7; margin: 0 0 1rem; } .pillar-row p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .pillar-row { flex-direction: column; gap: 1rem; } } /* ── FAQ page ── */ .faq-search { position: relative; max-width: 32rem; margin: 2rem auto 0; } .faq-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; color: var(--muted); pointer-events: none; } .faq-search input { width: 100%; padding: 0.9rem 1rem 0.9rem 2.75rem; font-size: 1rem; border: 2px solid var(--border); border-radius: 12px; background: #fff; color: var(--fg); font-family: inherit; } .faq-search input:focus { outline: none; border-color: var(--brand-black); } .faq-quicknav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .faq-quicknav a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; font-weight: 600; } .faq-quicknav a:hover { border-color: var(--brand-black); } .faq-quicknav svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; } .faq-category { margin-bottom: 3rem; scroll-margin-top: 5rem; } .faq-category:last-child { margin-bottom: 0; } .faq-category-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .faq-category-head h2 { margin: 0; font-size: 1.4rem; } .faq-no-results { display: none; text-align: center; color: var(--muted); padding: 2rem 0; } .faq-no-results svg { width: 2rem; height: 2rem; margin-bottom: 0.5rem; } .faq-contact-icon { width: 2.5rem; height: 2.5rem; color: var(--muted); margin-bottom: 1rem; } /* ── Contact page ── */ .contact-card { background: #f4f4f3; border-radius: 24px; padding: 3rem 2.5rem; text-align: center; } .contact-card-icon { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; } .contact-card-icon svg { width: 2rem; height: 2rem; } .contact-card h2 { margin: 0 0 0.75rem; font-size: 1.5rem; } .contact-card p { color: var(--muted); margin: 0 0 1.5rem; } .contact-email-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.35rem; color: var(--fg); word-break: break-all; } .contact-email-link:hover { text-decoration: underline; } .contact-email-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; } .contact-info-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; border-radius: 16px; border: 1px solid var(--border); background: #fff; } .contact-info-card > svg { width: 1.4rem; height: 1.4rem; color: var(--muted); flex-shrink: 0; margin-top: 0.2rem; } .contact-info-label { font-weight: 700; margin: 0 0 0.25rem; } .contact-info-value { font-style: normal; font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.5; } .contact-business-details { margin-top: 2rem; padding: 1.5rem; border-radius: 16px; border: 1px solid var(--border); background: #fff; font-size: 0.85rem; color: var(--muted); } .contact-business-details p { margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .contact-business-details p:last-child { margin-bottom: 0; } .contact-business-details strong { color: var(--fg); } .contact-business-details .inline-link { display: inline-flex; align-items: center; gap: 0.3rem; } .contact-business-details svg { width: 0.8rem; height: 0.8rem; } .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .muted { color: var(--muted); } /* ── Legal pages (Privacy Policy, Terms) ── */ .legal-card { background: #f4f4f3; border-radius: 24px; padding: 2.5rem; color: var(--muted); line-height: 1.7; } .legal-meta { font-weight: 700; color: var(--fg); margin: 0 0 1rem; } .legal-card > p { margin: 0 0 0.5rem; } .legal-card strong { color: var(--fg); } .legal-section { margin-top: 2.25rem; } .legal-section h2 { color: var(--fg); font-size: 1.25rem; margin: 0 0 0.85rem; } .legal-section p { margin: 0 0 0.85rem; } .legal-section p:last-child { margin-bottom: 0; } .legal-section ul { margin: 0.85rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; } .legal-section li { line-height: 1.6; } .legal-section-footnote { padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.9rem; } @media (max-width: 640px) { .legal-card { padding: 1.75rem; } } /* ── About page ── */ .about-origin { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 900px) { .about-origin { grid-template-columns: 1.1fr 1fr; } } .about-origin h2 { font-size: 1.9rem; margin: 0 0 1.25rem; } .about-origin > div > p { color: var(--muted); line-height: 1.7; margin: 0 0 1.1rem; } .about-origin strong { color: var(--fg); } .about-checklist { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.75rem; } .about-checklist li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.92rem; } .about-checklist svg { width: 1.15rem; height: 1.15rem; color: var(--brand-black); flex-shrink: 0; } .about-pullquote { font-weight: 700; font-style: italic; color: var(--fg) !important; font-size: 1.05rem; margin-top: 1.5rem !important; } .about-photo-placeholder { border: 2px dashed var(--border); border-radius: 20px; min-height: 22rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: #fff; } .about-photo-placeholder svg { width: 3rem; height: 3rem; color: var(--border); margin-bottom: 1rem; } .about-photo-title { font-weight: 700; margin: 0; } .about-photo-caption { color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0 0; } .about-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; } .about-detail-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.75rem; } .about-detail-strong { font-weight: 700; margin: 0; } .about-detail-value { font-style: normal; font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin: 0.25rem 0 0; } .about-detail-value svg { width: 1.1rem; height: 1.1rem; color: var(--muted); vertical-align: -2px; margin-right: 0.3rem; } /* ── Features page ── */ .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 32rem; margin: 2rem auto 0; } .hero-stat-value { font-size: 1.6rem; color: var(--fg); text-transform: none; } .hero-stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; } .dwt-banner { background: #f4f4f3; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .dwt-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding: 1.1rem 1.5rem; text-align: center; } .dwt-banner-flag { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; } .dwt-banner-flag svg { width: 1.1rem; height: 1.1rem; color: var(--brand-black); flex-shrink: 0; } .dwt-banner-inner p { margin: 0; color: var(--muted); font-size: 0.88rem; } .dwt-banner-btn { padding: 0.5rem 1rem; font-size: 0.85rem; } .feature-rows { display: grid; gap: 2rem; } .feature-row { display: grid; grid-template-columns: 1fr; background: #f4f4f3; border-radius: 24px; overflow: hidden; } @media (min-width: 900px) { .feature-row { grid-template-columns: 1.2fr 1fr; } .feature-row-reverse { grid-template-columns: 1fr 1.2fr; } .feature-row-reverse .feature-row-content { order: 2; } .feature-row-reverse .feature-row-visual { order: 1; } } .feature-row-highlight { border: 2px solid var(--brand-black); } .feature-row-content { padding: 2.5rem; } .feature-row-badges { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .feature-row-badge.card-tag { position: static; background: var(--brand-yellow); color: var(--brand-black); } .feature-row-deadline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--fg); } .feature-row-deadline svg { width: 0.8rem; height: 0.8rem; } .feature-row-content h3 { margin: 0 0 0.25rem; font-size: 1.5rem; } .feature-row-subtitle { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 1rem; } .feature-row-desc { color: var(--muted); line-height: 1.7; margin: 0 0 1.5rem; } .feature-row-points { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.6rem; } .feature-row-points li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; } .feature-row-points svg { width: 1.1rem; height: 1.1rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.1rem; } .feature-row-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; background: #fff; padding: 2.5rem; min-height: 220px; } .feature-row-icon { width: 5rem; height: 5rem; } .feature-row-icon svg { width: 2.25rem; height: 2.25rem; } .more-features { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .more-features-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 1.25rem; } .more-features-links { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; } .more-features-links a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; color: var(--muted); } .more-features-links a:hover { color: var(--fg); } .more-features-links svg { width: 1rem; height: 1rem; flex-shrink: 0; } .more-features-links a.more-features-highlight { color: var(--brand-black); } .industry-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .industry-tiles { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px) { .industry-tiles { grid-template-columns: repeat(6, 1fr); } } .industry-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.5rem 1rem; border-radius: 14px; background: #f4f4f3; } .industry-tile svg { width: 1.75rem; height: 1.75rem; color: var(--brand-black); } .industry-tile span { font-size: 0.85rem; font-weight: 600; } .driver-perfect-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 2.5rem; text-align: center; } .driver-perfect-card > svg { width: 3.5rem; height: 3.5rem; color: var(--brand-black); margin-bottom: 1rem; } .driver-perfect-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 1.25rem; } .driver-perfect-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; } .driver-perfect-card li { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.95rem; } .driver-perfect-card li svg { width: 1rem; height: 1rem; color: var(--brand-black); flex-shrink: 0; } .compliance-pillar { text-align: left; } .compliance-pillar .about-checklist { margin-top: 1.25rem; } /* ── Dark section (brand-scoped) — makes any section alternate to the dark theme just by adding this class; components inside adapt automatically. ── */ .section-dark { background: var(--brand-black); color: #fff; } .section-dark .eyebrow { color: var(--brand-yellow); } .section-dark .section-head h2 { color: #fff; } .section-dark .section-head p { color: #a3a3a3; } .section-dark a:not(.btn) { color: #fff; } body:not(.theme-capsule) .section-dark .card { background: var(--brand-black-soft); border-color: #2a2a2a; } body:not(.theme-capsule) .section-dark .card h3 { color: #fff; } body:not(.theme-capsule) .section-dark .card p { color: #a3a3a3; } body:not(.theme-capsule) .section-dark .step::before { background: var(--brand-yellow); color: var(--brand-black); } body:not(.theme-capsule) .section-dark .step h3 { color: #fff; } body:not(.theme-capsule) .section-dark .step p { color: #a3a3a3; } body:not(.theme-capsule) .section-dark .industries li { background: var(--brand-black-soft); border-color: #2a2a2a; color: #fff; } body:not(.theme-capsule) .section-dark .testimonial { background: var(--brand-black-soft); border-color: #2a2a2a; } body:not(.theme-capsule) .section-dark .testimonial p { color: #fff; } body:not(.theme-capsule) .section-dark .testimonial .who { color: #a3a3a3; } body:not(.theme-capsule) .section-dark .testimonial .who strong { color: #fff; } body:not(.theme-capsule) .section-dark .founder-quote { background: var(--brand-black-soft); } body:not(.theme-capsule) .section-dark .pricing-teaser .price { color: #fff; } body:not(.theme-capsule) .section-dark .faq { background: var(--brand-black-soft); border-color: #2a2a2a; } body:not(.theme-capsule) .section-dark .faq details { border-color: #2a2a2a; } body:not(.theme-capsule) .section-dark .faq summary { color: #fff; } body:not(.theme-capsule) .section-dark .faq summary::after { color: #a3a3a3; } body:not(.theme-capsule) .section-dark .faq p { color: #a3a3a3; } /* ═══════════════════════════════════════════════════════════ THEME: Aurora — experimental (opt-in via body.theme-aurora) Pair with: ═══════════════════════════════════════════════════════════ */ body.theme-aurora { /* Core story: near-black ink + acid voltage + cool depth */ --brand-black: #07080c; --brand-black-soft: #10131a; --brand-yellow: #d8ff3e; --accent: #7cf5c8; --fg: #0c0d10; --muted: #5c6570; --border: rgba(15, 20, 30, 0.1); /* Extra tokens for the experiment */ --glow: color-mix(in srgb, var(--brand-yellow) 55%, transparent); --glow-teal: color-mix(in srgb, var(--accent) 45%, transparent); --surface: #ffffff; --surface-2: #f4f6f8; --ink-faint: rgba(255, 255, 255, 0.55); --radius-lg: 20px; --radius-md: 14px; --shadow-soft: 0 18px 50px -28px rgba(7, 8, 12, 0.45); --shadow-lift: 0 22px 60px -24px rgba(7, 8, 12, 0.35); background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--brand-yellow) 8%, transparent), transparent 60%), radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), #fafbfc; color: var(--fg); -webkit-font-smoothing: antialiased; } /* Optional: slightly tighter display headlines */ body.theme-aurora .display-font { letter-spacing: -0.02em; } /* ── Header: glass over ink ── */ body.theme-aurora .site-header { background: color-mix(in srgb, var(--brand-black) 88%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(216, 255, 62, 0.04); } body.theme-aurora .site-nav ul a { color: var(--ink-faint); transition: color 0.2s ease, background 0.2s ease; } body.theme-aurora .site-nav ul a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } body.theme-aurora .site-nav .cta { background: var(--brand-yellow); color: var(--brand-black); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-yellow) 40%, transparent), 0 8px 28px -8px var(--glow); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.theme-aurora .site-nav .cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--brand-yellow), 0 12px 36px -8px var(--glow); } /* ── Hero: mesh + voltage ── */ body.theme-aurora .hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% -20%, color-mix(in srgb, var(--brand-yellow) 18%, transparent), transparent 55%), radial-gradient(ellipse 50% 40% at 85% 60%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%), radial-gradient(ellipse 40% 35% at 10% 80%, color-mix(in srgb, #5b8cff 10%, transparent), transparent 45%), var(--brand-black); padding: 6.5rem 0 5.5rem; } body.theme-aurora .hero::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.35; pointer-events: none; mix-blend-mode: overlay; } body.theme-aurora .hero .container { position: relative; z-index: 1; } body.theme-aurora .hero h1 { color: #fff; text-shadow: 0 0 80px color-mix(in srgb, var(--brand-yellow) 25%, transparent); letter-spacing: -0.03em; } /* Accent a key phrase if you wrap it: … */ body.theme-aurora .hero-volt { color: var(--brand-yellow); text-shadow: 0 0 40px var(--glow); } body.theme-aurora .hero p.lead { color: rgba(255, 255, 255, 0.72); font-size: 1.25rem; } body.theme-aurora .hero .eyebrow { border-color: color-mix(in srgb, var(--brand-yellow) 40%, transparent); background: color-mix(in srgb, var(--brand-yellow) 10%, transparent); color: var(--brand-yellow); box-shadow: 0 0 24px -6px var(--glow); } body.theme-aurora .hero .btn-primary { box-shadow: 0 12px 40px -12px var(--glow); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.theme-aurora .hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 48px -10px var(--glow); } body.theme-aurora .hero .btn-outline { border-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.04); transition: border-color 0.2s ease, background 0.2s ease; } body.theme-aurora .hero .btn-outline:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); } body.theme-aurora .trust-pills { color: rgba(255, 255, 255, 0.5); } body.theme-aurora .trust-pills .tick { color: var(--brand-yellow); filter: drop-shadow(0 0 6px var(--glow)); } /* ── Sections ── */ body.theme-aurora .section-alt { background: radial-gradient(600px 300px at 0% 50%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%), var(--surface-2); } body.theme-aurora .eyebrow { color: color-mix(in srgb, var(--accent) 70%, #0d9488); letter-spacing: 0.12em; } body.theme-aurora .section-head h2 { letter-spacing: -0.025em; } /* ── Cards: soft lift + yellow edge on hover ── */ body.theme-aurora .card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body.theme-aurora .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-yellow) 35%, var(--border)); box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in srgb, var(--brand-yellow) 12%, transparent); } body.theme-aurora .icon-badge { background: linear-gradient( 145deg, color-mix(in srgb, var(--brand-yellow) 16%, transparent), color-mix(in srgb, var(--accent) 10%, transparent) ); border-color: color-mix(in srgb, var(--brand-yellow) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } body.theme-aurora .icon-badge svg { color: color-mix(in srgb, var(--brand-black) 70%, #3f6212); } body.theme-aurora .card-tag { background: linear-gradient(135deg, var(--brand-yellow), color-mix(in srgb, var(--accent) 40%, var(--brand-yellow))); color: var(--brand-black); box-shadow: 0 4px 16px -4px var(--glow); } /* ── Steps ── */ body.theme-aurora .step::before { background: linear-gradient(145deg, var(--brand-black), #1a2030); color: var(--brand-yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-yellow) 15%, transparent), 0 8px 20px -8px rgba(0, 0, 0, 0.35); } /* ── Testimonials ── */ body.theme-aurora .testimonial { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } body.theme-aurora .testimonial::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-yellow), var(--accent), transparent); opacity: 0.85; } /* ── Founder quote ── */ body.theme-aurora .founder-quote { position: relative; overflow: hidden; border-radius: 24px; background: radial-gradient(ellipse 70% 80% at 20% 0%, color-mix(in srgb, var(--brand-yellow) 14%, transparent), transparent 50%), radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%), var(--brand-black); box-shadow: var(--shadow-lift); } body.theme-aurora .founder-quote .who { color: var(--brand-yellow); text-shadow: 0 0 24px var(--glow); } /* ── FAQ ── */ body.theme-aurora .faq { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border-color: transparent; } body.theme-aurora .faq summary:hover { color: color-mix(in srgb, var(--accent) 50%, var(--fg)); } /* ── CTA banner ── */ body.theme-aurora .cta-banner { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 80% at 50% 120%, color-mix(in srgb, var(--brand-yellow) 16%, transparent), transparent 55%), radial-gradient(ellipse 40% 50% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%), var(--brand-black); } body.theme-aurora .cta-banner h2 { letter-spacing: -0.02em; } body.theme-aurora .cta-banner .btn-primary { box-shadow: 0 12px 40px -10px var(--glow); } /* ── Footer ── */ body.theme-aurora .site-footer { background: var(--brand-black); border-top: 1px solid rgba(255, 255, 255, 0.06); } body.theme-aurora .footer-socials a:hover { border-color: color-mix(in srgb, var(--brand-yellow) 40%, #555); color: var(--brand-yellow); box-shadow: 0 0 20px -6px var(--glow); } /* ── Dark sections ── */ body.theme-aurora .section-dark { background: radial-gradient(ellipse 50% 40% at 80% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%), var(--brand-black); } body.theme-aurora .section-dark .card, body.theme-aurora .section-dark .method-panel { background: color-mix(in srgb, var(--brand-black-soft) 90%, #1a2233); border-color: rgba(255, 255, 255, 0.07); box-shadow: none; } body.theme-aurora .section-dark .card:hover { border-color: color-mix(in srgb, var(--brand-yellow) 30%, transparent); box-shadow: 0 0 40px -20px var(--glow); } body.theme-aurora .stat-card { background: linear-gradient(160deg, #141820, #0c0f16); border-color: rgba(255, 255, 255, 0.06); } body.theme-aurora .stat-value { color: var(--brand-yellow); text-shadow: 0 0 30px var(--glow); } /* ── Method panels ── */ body.theme-aurora .method-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } body.theme-aurora .method-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } /* ── Buttons global polish ── */ body.theme-aurora .btn { border-radius: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } body.theme-aurora .btn-primary { background: var(--brand-yellow); color: var(--brand-black); } body.theme-aurora a.card-link:hover h3 { color: color-mix(in srgb, var(--accent) 40%, var(--fg)); } /* ── Soft selection colour ── */ body.theme-aurora ::selection { background: color-mix(in srgb, var(--brand-yellow) 55%, transparent); color: var(--brand-black); } /* ═══════════════════════════════════════════════════════════ THEME: Capsule — experimental (opt-in via body.theme-capsule) Inspired by capsulecrm.com: warm off-white, black as the accent (not a backdrop), one colour used sparingly, huge whitespace, flat light-grey cards, no glow/shadow drama. Pair with: ═══════════════════════════════════════════════════════════ */ body.theme-capsule { --brand-black: #0a0a0a; --brand-black-soft: #171717; --brand-yellow: #e3ff1e; --accent: #0a0a0a; --fg: #0a0a0a; --muted: #6b6b6b; --border: #e5e5e3; --bg: #fafaf9; background: var(--bg); color: var(--fg); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Capsule doesn't use a heavy all-caps display font — swap it for Inter at a restrained weight, matching the reference site's condensed-but-not-shouty headlines. */ body.theme-capsule .display-font { font-family: 'Inter', system-ui, sans-serif; text-transform: none; font-weight: 500; letter-spacing: -0.02em; } body.theme-capsule .logo-for-dark-bg { display: none; } body.theme-capsule .logo-for-light-bg { display: block; } body.theme-capsule .footer-brand .logo-for-light-bg { display: inline; } /* ── Header: light, not black ── */ body.theme-capsule .site-header { background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: none; } body.theme-capsule .mobile-menu-button span { color: var(--fg); } body.theme-capsule .mobile-nav-panel { background: var(--bg); } body.theme-capsule .mobile-nav-group summary, body.theme-capsule .mobile-nav-top-link { color: var(--fg); border-bottom-color: var(--border); } body.theme-capsule .mobile-nav-group summary::after { color: var(--muted); } body.theme-capsule .mobile-nav-link { color: var(--muted); } body.theme-capsule .mobile-nav-link:hover { color: var(--fg); } body.theme-capsule .site-nav ul a { color: var(--muted); } body.theme-capsule .site-nav ul a:hover { color: var(--fg); background: var(--border); } body.theme-capsule .nav-dropdown-trigger { color: var(--muted); } body.theme-capsule .nav-dropdown-trigger:hover { color: var(--fg); } body.theme-capsule .login-link { color: var(--muted); } body.theme-capsule .login-link:hover { color: var(--fg); background: var(--border); } body.theme-capsule .site-nav .cta { background: var(--brand-black); color: #fff; border-radius: 999px; box-shadow: none; } body.theme-capsule .site-nav .cta:hover { background: #262626; } /* ── Buttons: pill-shaped, black as the primary colour ── */ body.theme-capsule .btn { border-radius: 999px; } body.theme-capsule .btn-primary { background: var(--brand-black); color: #fff; } body.theme-capsule .btn-primary:hover { background: #262626; } body.theme-capsule .btn-outline { border-color: var(--border); color: var(--fg); background: #fff; } body.theme-capsule .btn-outline:hover { background: var(--border); } /* ── Hero: light, restrained, no glow ── */ body.theme-capsule .hero { background: var(--bg); color: var(--fg); padding: 6rem 0 4rem; } body.theme-capsule .hero h1 { color: var(--fg); font-weight: 500; } body.theme-capsule .hero p.lead { color: var(--muted); } body.theme-capsule .hero .eyebrow { color: var(--brand-black); background: var(--brand-yellow); border: none; border-radius: 999px; font-weight: 700; box-shadow: none; } body.theme-capsule .hero .btn-outline { border-color: var(--border); color: var(--fg); background: #fff; } body.theme-capsule .trust-pills { color: var(--muted); } body.theme-capsule .trust-pills .tick { color: var(--brand-black); } body.theme-capsule .trust-pills .youtube-link { color: var(--muted); } body.theme-capsule .trust-pills .youtube-link:hover { color: var(--fg); } /* ── Sections ── */ body.theme-capsule .section-alt { background: #f4f4f3; } body.theme-capsule .eyebrow { color: var(--muted); } body.theme-capsule .section-head p { color: var(--muted); } /* ── Cards: flat light-grey panels, no border/shadow drama ── */ body.theme-capsule .card, body.theme-capsule .method-panel { background: #f4f4f3; border: none; border-radius: 20px; box-shadow: none; } body.theme-capsule .card .tag { background: rgba(10, 10, 10, 0.06); color: var(--fg); } body.theme-capsule .icon-badge { background: #fff; border: none; } body.theme-capsule .icon-badge svg { color: var(--fg); } body.theme-capsule .card-tag { background: var(--brand-yellow); color: var(--brand-black); box-shadow: none; } body.theme-capsule .method-tagline { color: var(--muted); font-style: normal; } body.theme-capsule .method-feature-pill { background: #fff; border: 1px solid var(--border); } body.theme-capsule .method-links a { color: var(--fg); } body.theme-capsule .method-links a:hover { text-decoration: underline; } /* ── Dark sections neutralised to light — any element that's ALREADY unconditionally dark (.stat-card, .founder-quote) keeps working as a small dark accent floating on the now-light section, Capsule-style. ── */ body.theme-capsule .section-dark { background: var(--bg); color: var(--fg); } body.theme-capsule .section-dark .eyebrow { color: var(--muted); } body.theme-capsule .section-dark .section-head h2 { color: var(--fg); } body.theme-capsule .section-dark .section-head p { color: var(--muted); } body.theme-capsule .section-dark a:not(.btn) { color: var(--fg); } body.theme-capsule .stat-card { background: var(--brand-black); border: none; border-radius: 20px; } body.theme-capsule .stat-label { color: rgba(255, 255, 255, 0.6); } body.theme-capsule .founder-quote { background: var(--brand-black); } /* ── CTA banner: understated close, not a full dark wall ── */ body.theme-capsule .cta-banner { background: #f4f4f3; color: var(--fg); } body.theme-capsule .cta-banner h2 { color: var(--fg); font-weight: 500; } body.theme-capsule .cta-banner p { color: var(--muted); } /* ── Footer: light, not black ── */ body.theme-capsule .site-footer { background: #fff; border-top: 1px solid var(--border); } body.theme-capsule .footer-brand p { color: var(--muted); } body.theme-capsule .footer-grid h3 { color: var(--fg); } body.theme-capsule .footer-grid a { color: var(--muted); } body.theme-capsule .footer-grid a:hover { color: var(--fg); } body.theme-capsule .footer-socials a { background: #f4f4f3; border: 1px solid var(--border); color: var(--muted); } body.theme-capsule .footer-socials a:hover { color: var(--fg); border-color: #ccc; } body.theme-capsule .footer-bottom { border-top-color: var(--border); } body.theme-capsule .footer-bottom .copyright { color: var(--muted); } body.theme-capsule .footer-bottom a { color: var(--muted); } body.theme-capsule .footer-bottom a:hover { color: var(--fg); } /* ── WTN feature page: note-type tab selector ── */ .wtn-type-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .wtn-type-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; } .wtn-type-tab { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.4rem; border-radius: 12px; border: 2px solid var(--border); background: #fff; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .wtn-type-tab svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--muted); } #type-nonhaz:checked ~ .wtn-type-tabs label[for="type-nonhaz"], #type-haz:checked ~ .wtn-type-tabs label[for="type-haz"], #type-season:checked ~ .wtn-type-tabs label[for="type-season"] { border-color: var(--brand-yellow); background: color-mix(in srgb, var(--brand-yellow) 12%, transparent); color: var(--fg); } #type-nonhaz:checked ~ .wtn-type-tabs label[for="type-nonhaz"] svg, #type-haz:checked ~ .wtn-type-tabs label[for="type-haz"] svg, #type-season:checked ~ .wtn-type-tabs label[for="type-season"] svg { color: var(--fg); } .wtn-type-panel { display: none; border: 2px solid var(--border); border-radius: 20px; overflow: hidden; } #type-nonhaz:checked ~ .wtn-type-panels #panel-nonhaz, #type-haz:checked ~ .wtn-type-panels #panel-haz, #type-season:checked ~ .wtn-type-panels #panel-season { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { #type-nonhaz:checked ~ .wtn-type-panels #panel-nonhaz, #type-haz:checked ~ .wtn-type-panels #panel-haz, #type-season:checked ~ .wtn-type-panels #panel-season { grid-template-columns: 1fr 1fr; } } .wtn-type-panel-text { padding: 2.5rem; min-width: 0; } .wtn-type-panel-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 1.25rem; } .card-tag-inline { display: inline-flex; background: var(--brand-yellow); color: var(--brand-black); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.25rem 0.65rem; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .wtn-type-legislation { font-size: 0.8rem; color: var(--muted); } .wtn-type-panel-text h3 { margin: 0 0 0.2rem; font-size: 1.6rem; } .wtn-type-subtitle { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 1.25rem; } .wtn-type-panel-text > p:not(.wtn-type-subtitle) { color: var(--muted); margin: 0 0 2rem; line-height: 1.6; } .wtn-type-panel-features { background: #f9f9f7; padding: 2.5rem; min-width: 0; } .wtn-type-features-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 1.25rem; } .wtn-type-panel-features ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .wtn-type-panel-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; } .wtn-type-panel-features li svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--brand-black); } /* ── WTN feature page: five-part form breakdown ── */ .wtn-parts { display: flex; flex-direction: column; gap: 1.25rem; } .wtn-part { display: grid; grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } @media (min-width: 900px) { .wtn-part { grid-template-columns: auto 1fr 1fr; } } .wtn-part-letter { background: color-mix(in srgb, var(--brand-yellow) 10%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 1.75rem; min-width: 110px; } .wtn-part-letter span { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--fg); } .wtn-part-letter svg { width: 1.4rem; height: 1.4rem; color: var(--fg); } .wtn-part-desc { padding: 1.75rem; border-top: 1px solid var(--border); } .wtn-part-fields { padding: 1.75rem; border-top: 1px solid var(--border); } @media (min-width: 900px) { .wtn-part-desc { border-top: none; border-right: 1px solid var(--border); } .wtn-part-fields { border-top: none; } } .wtn-part-desc h3 { margin: 0 0 0.5rem; font-size: 1.2rem; } .wtn-part-desc p { color: var(--muted); margin: 0; line-height: 1.6; } .wtn-part-fields-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.75rem; } .wtn-part-fields ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .wtn-part-fields li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; } .wtn-part-fields li svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; margin-top: 0.2rem; color: var(--brand-black); } /* ── WTN feature page: related links grid ── */ .wtn-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .wtn-related-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .wtn-related-card:hover { border-color: var(--brand-yellow); box-shadow: 0 8px 24px -12px rgba(10, 10, 10, 0.18); } .wtn-related-tag { display: inline-flex; align-self: flex-start; background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); color: var(--brand-black); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 1rem; } .wtn-related-card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; } .wtn-related-card p { color: var(--muted); margin: 0 0 1.25rem; line-height: 1.6; flex: 1; } .wtn-related-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; color: var(--fg); } .wtn-related-link svg { width: 1rem; height: 1rem; transition: transform 0.15s ease; } .wtn-related-card:hover .wtn-related-link svg { transform: translateX(3px); } /* ── DWT feature page ── */ .hero-badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 1.5rem; } .hero-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); color: var(--fg); font-size: 0.78rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 999px; } .hero-badge svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .hero-badge-alert { background: color-mix(in srgb, #d1451f 12%, transparent); color: #d1451f; } .dwt-stats-band { background: #f4f4f3; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.5rem 0; } .dwt-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; } @media (min-width: 640px) { .dwt-stats { grid-template-columns: repeat(4, 1fr); } } .dwt-stat-value { font-size: 1.6rem; color: var(--fg); margin: 0; } .dwt-stat-label { font-size: 0.82rem; color: var(--muted); margin: 0.25rem 0 0; line-height: 1.4; } .dwt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .dwt-step { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; } .dwt-step-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .dwt-step-num { font-size: 1.5rem; color: var(--brand-black); } .dwt-step-head svg { width: 1.15rem; height: 1.15rem; color: var(--brand-black); } .dwt-step h3 { margin: 0 0 0.5rem; font-size: 1.05rem; } .dwt-step p { color: var(--muted); margin: 0; font-size: 0.9rem; line-height: 1.6; } .dwt-note { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 640px; margin: 2rem auto 0; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; } .dwt-note svg { width: 1.15rem; height: 1.15rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.15rem; } .dwt-note p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; } .dwt-note strong { color: var(--fg); } .dwt-checklist { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .dwt-checklist { grid-template-columns: 1fr 1fr; } } .dwt-checklist-item { display: flex; align-items: center; gap: 0.6rem; background: #fff; border-radius: 10px; padding: 0.85rem 1.1rem; font-size: 0.92rem; font-weight: 600; } .dwt-checklist-item svg { width: 1.05rem; height: 1.05rem; color: var(--brand-black); flex-shrink: 0; } /* ── WasteBolt Linked feature page ── */ .linked-problem { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } .linked-problem > * { min-width: 0; } @media (min-width: 900px) { .linked-problem { grid-template-columns: 1fr 1fr; gap: 3.5rem; } } .linked-problem p { color: var(--muted); line-height: 1.65; margin: 0 0 1rem; } .linked-problem-punch { color: var(--fg) !important; font-weight: 600; } .linked-compare { display: flex; flex-direction: column; gap: 1rem; } .linked-compare-card { border-radius: 16px; padding: 1.5rem; border: 1px solid; } .linked-compare-before { background: color-mix(in srgb, #d1451f 8%, transparent); border-color: color-mix(in srgb, #d1451f 25%, transparent); } .linked-compare-after { background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); border-color: color-mix(in srgb, var(--brand-yellow) 40%, transparent); } .linked-compare-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1rem; } .linked-compare-before .linked-compare-label { color: #d1451f; } .linked-compare-after .linked-compare-label { color: var(--brand-black); } .linked-compare-card ol, .linked-compare-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; } .linked-compare-card li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--fg); line-height: 1.5; } .linked-compare-before li span { width: 1.3rem; height: 1.3rem; border-radius: 999px; background: color-mix(in srgb, #d1451f 18%, transparent); color: #d1451f; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1rem; } .linked-compare-after li svg { width: 1.1rem; height: 1.1rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.1rem; } .linked-mock-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } .linked-mock-layout > * { min-width: 0; } @media (min-width: 900px) { .linked-mock-layout { grid-template-columns: 1fr 1fr; gap: 3.5rem; } } .linked-mock-layout p { color: var(--muted); line-height: 1.65; margin: 0 0 1rem; } .linked-mock-wrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto; } .linked-mock { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.18); } .linked-mock-head { background: var(--brand-yellow); color: var(--brand-black); display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; font-weight: 700; font-size: 0.9rem; } .linked-mock-head svg { width: 1.1rem; height: 1.1rem; } .linked-mock-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .linked-mock-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.6rem; } .linked-mock-summary { background: #f7f7f5; border-radius: 12px; padding: 1rem; } .linked-mock-summary-row { display: flex; align-items: center; gap: 0.75rem; } .linked-mock-icon { width: 2rem; height: 2rem; border-radius: 8px; background: color-mix(in srgb, var(--brand-yellow) 20%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .linked-mock-icon svg { width: 1rem; height: 1rem; color: var(--brand-black); } .linked-mock-summary-title { margin: 0; font-size: 0.9rem; font-weight: 700; } .linked-mock-summary-sub { margin: 0.1rem 0 0; font-size: 0.76rem; color: var(--muted); } .linked-mock-connections { display: flex; flex-direction: column; gap: 0.5rem; } .linked-mock-connection { display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--border); border-radius: 12px; padding: 0.65rem 0.85rem; } .linked-mock-connection.is-selected { border-color: color-mix(in srgb, var(--brand-yellow) 60%, transparent); background: color-mix(in srgb, var(--brand-yellow) 12%, transparent); } .linked-mock-connection svg { width: 1rem; height: 1rem; color: var(--brand-black); flex-shrink: 0; } .linked-mock-avatar { width: 1.9rem; height: 1.9rem; border-radius: 999px; background: #f0f0ee; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); flex-shrink: 0; } .linked-mock-connection.is-selected .linked-mock-avatar { background: var(--brand-black); color: #fff; } .linked-mock-connection-text { flex: 1; min-width: 0; } .linked-mock-connection-text p { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--fg); } .linked-mock-permit { font-family: monospace; font-size: 0.72rem; color: var(--muted) !important; margin-top: 0.1rem !important; } .linked-mock-match { background: color-mix(in srgb, var(--brand-yellow) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-yellow) 35%, transparent); border-radius: 12px; padding: 1rem; } .linked-mock-match-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-black); margin: 0 0 0.6rem; } .linked-mock-match-label svg { width: 0.95rem; height: 0.95rem; } .linked-mock-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.5rem; } .linked-mock-match-grid span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--fg); } .linked-mock-match-grid svg { width: 0.85rem; height: 0.85rem; color: var(--brand-black); flex-shrink: 0; } .linked-mock-confirm { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.3; } .linked-mock-footnote { text-align: center; font-size: 0.76rem; color: var(--muted); margin: 0 !important; } .linked-mock-badge { position: absolute; bottom: -1rem; right: -0.5rem; background: var(--brand-black); color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; border-radius: 12px; font-size: 0.78rem; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(10, 10, 10, 0.4); } .linked-mock-badge svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; } .linked-points { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; } .linked-point { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; font-weight: 600; color: var(--fg); } .linked-point svg { width: 1.15rem; height: 1.15rem; color: var(--brand-black); background: color-mix(in srgb, var(--brand-yellow) 18%, transparent); border-radius: 8px; padding: 0.4rem; box-sizing: content-box; flex-shrink: 0; } .linked-usecase-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .linked-usecase-head .icon-badge { margin-bottom: 0; } .linked-callout { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .linked-callout { grid-template-columns: 1fr 1fr; padding: 3rem; } } .linked-callout > * { min-width: 0; } .linked-callout p { color: var(--muted); line-height: 1.65; margin: 0 0 1.5rem; } .linked-callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .linked-callout-item { background: #f7f7f5; border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; } .linked-callout-item svg { width: 1.4rem; height: 1.4rem; color: var(--brand-black); } .linked-callout-item p { margin: 0 !important; font-size: 0.88rem; font-weight: 700; color: var(--fg) !important; line-height: 1.4 !important; } /* ── Hazardous Waste Consignment Notes feature page ── */ .consignment-compare { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 900px; margin: 0 auto; } @media (min-width: 700px) { .consignment-compare { grid-template-columns: 1fr 1fr; } } .consignment-compare > * { min-width: 0; } .consignment-compare-hazard { border-width: 2px; } .consignment-compare-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; } .consignment-compare-head .icon-badge { margin-bottom: 0; width: 2.25rem; height: 2.25rem; } .consignment-compare-head p { margin: 0; font-weight: 700; font-size: 0.92rem; } .consignment-page-tag { margin-left: auto; background: #d1451f; color: #fff; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; } .consignment-compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .consignment-compare-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; color: var(--fg); line-height: 1.4; } .consignment-compare-list svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; color: var(--brand-black); } .consignment-compare-punch { margin: 1rem 0 0; font-size: 0.82rem; font-weight: 700; color: #d1451f; } .consignment-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 900px) { .consignment-split { grid-template-columns: 1fr 1fr; } } .consignment-split > * { min-width: 0; } .consignment-who-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; } .consignment-who-item { display: flex; align-items: flex-start; gap: 0.75rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; } .consignment-who-item svg { width: 1.05rem; height: 1.05rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.15rem; } .consignment-who-title { margin: 0; font-weight: 700; font-size: 0.9rem; } .consignment-who-desc { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; } .numbered-list { display: flex; flex-direction: column; margin-top: 1.5rem; } .numbered-list-item { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .numbered-list-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .numbered-list-num { width: 2rem; height: 2rem; border-radius: 999px; background: var(--brand-black); color: #fff; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .numbered-list-title { margin: 0; font-weight: 700; font-size: 0.9rem; } .numbered-list-desc { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; } /* Six-part interactive selector (pure-CSS radio hack, matches .wtn-type-* pattern) */ .hwcn-part-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .hwcn-parts { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 900px) { .hwcn-parts { grid-template-columns: 1fr 1fr; } } .hwcn-part-tabs, .hwcn-part-panels { min-width: 0; } .hwcn-part-tabs { display: flex; flex-direction: column; gap: 0.6rem; } .hwcn-part-tab-label { display: block; cursor: pointer; } .hwcn-part-tab { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 2px solid var(--border); border-radius: 12px; background: #fff; transition: border-color 0.15s ease, background 0.15s ease; } .hwcn-part-tab-letter { width: 2.5rem; height: 2.5rem; border-radius: 8px; background: #f4f4f3; color: var(--muted); font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hwcn-part-tab-title { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9rem; } .hwcn-part-tab svg { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; transition: transform 0.15s ease; } #part-A:checked ~ .hwcn-part-tabs label[for="part-A"] .hwcn-part-tab, #part-B:checked ~ .hwcn-part-tabs label[for="part-B"] .hwcn-part-tab, #part-C:checked ~ .hwcn-part-tabs label[for="part-C"] .hwcn-part-tab, #part-E:checked ~ .hwcn-part-tabs label[for="part-E"] .hwcn-part-tab { border-color: var(--brand-yellow); background: color-mix(in srgb, var(--brand-yellow) 12%, transparent); } #part-D:checked ~ .hwcn-part-tabs label[for="part-D"] .hwcn-part-tab { border-color: #d1451f; background: color-mix(in srgb, #d1451f 10%, transparent); } #part-F:checked ~ .hwcn-part-tabs label[for="part-F"] .hwcn-part-tab { border-color: var(--muted); background: #f4f4f3; } #part-A:checked ~ .hwcn-part-tabs label[for="part-A"] svg, #part-B:checked ~ .hwcn-part-tabs label[for="part-B"] svg, #part-C:checked ~ .hwcn-part-tabs label[for="part-C"] svg, #part-D:checked ~ .hwcn-part-tabs label[for="part-D"] svg, #part-E:checked ~ .hwcn-part-tabs label[for="part-E"] svg, #part-F:checked ~ .hwcn-part-tabs label[for="part-F"] svg { transform: rotate(90deg); color: var(--fg); } .hwcn-part-panel { display: none; background: #fff; border: 2px solid var(--border); border-radius: 20px; padding: 1.75rem; } .hwcn-part-panel.is-hazard { border-color: color-mix(in srgb, #d1451f 35%, transparent); background: color-mix(in srgb, #d1451f 6%, #fff); } .hwcn-part-panel.is-neutral { border-color: var(--border); background: #f7f7f5; } #part-A:checked ~ .hwcn-part-panels #panel-A, #part-B:checked ~ .hwcn-part-panels #panel-B, #part-C:checked ~ .hwcn-part-panels #panel-C, #part-D:checked ~ .hwcn-part-panels #panel-D, #part-E:checked ~ .hwcn-part-panels #panel-E, #part-F:checked ~ .hwcn-part-panels #panel-F { display: block; } .hwcn-part-panel-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; } .hwcn-part-panel-letter { width: 3rem; height: 3rem; border-radius: 10px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; } .hwcn-part-panel-title { margin: 0; font-weight: 800; font-size: 1.05rem; } .hwcn-part-panel-subtitle { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--muted); } .hwcn-part-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .hwcn-part-panel li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; font-weight: 500; } .hwcn-part-panel li svg { width: 1.05rem; height: 1.05rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.15rem; } .hwcn-part-note { margin-top: 1.25rem; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; } .hwcn-part-note-title { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #d1451f; } .hwcn-part-note p:not(.hwcn-part-note-title) { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.55; } /* HP code / consignment mock */ .hwcn-mock-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .hwcn-mock-layout { grid-template-columns: 1fr 1fr; gap: 3.5rem; } } .hwcn-mock-layout > * { min-width: 0; } .hwcn-mock-layout p { color: var(--muted); line-height: 1.65; margin: 0 0 1rem; } .hwcn-mock-head { background: #d1451f; color: #fff; } .hwcn-mock-ewc { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-yellow) 40%, transparent); border-radius: 10px; padding: 0.75rem 1rem; } .hwcn-mock-ewc-code { font-family: monospace; font-weight: 700; font-size: 0.88rem; color: var(--brand-black); } .hwcn-mock-ewc-desc { font-size: 0.76rem; color: var(--muted); } .hwcn-mock-ewc svg { width: 1rem; height: 1rem; color: var(--brand-black); margin-left: auto; flex-shrink: 0; } .hwcn-mock-hp-list { display: flex; flex-direction: column; gap: 0.5rem; } .hwcn-mock-hp-row { display: flex; align-items: center; gap: 0.6rem; background: color-mix(in srgb, #d1451f 8%, transparent); border: 1px solid color-mix(in srgb, #d1451f 30%, transparent); border-radius: 10px; padding: 0.6rem 0.75rem; } .hwcn-mock-hp-chip { background: #d1451f; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.3rem 0.5rem; border-radius: 8px; flex-shrink: 0; } .hwcn-mock-hp-label { font-size: 0.85rem; font-weight: 600; color: #d1451f; } .hwcn-mock-hp-row svg { width: 1rem; height: 1rem; color: #d1451f; margin-left: auto; flex-shrink: 0; } .hwcn-mock-pops { display: flex; align-items: center; gap: 0.5rem; background: #f7f7f5; border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.78rem; color: var(--muted); } .hwcn-mock-pops svg { width: 1rem; height: 1rem; color: var(--brand-black); flex-shrink: 0; } .hwcn-mock-ref { display: flex; align-items: center; gap: 0.6rem; background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); border: 1px solid color-mix(in srgb, var(--brand-yellow) 40%, transparent); border-radius: 12px; padding: 0.75rem 1rem; } .hwcn-mock-ref svg { width: 1rem; height: 1rem; color: var(--brand-black); flex-shrink: 0; } .hwcn-mock-ref-label { margin: 0; font-size: 0.7rem; font-weight: 700; color: var(--brand-black); } .hwcn-mock-ref-value { margin: 0; font-family: monospace; font-size: 0.85rem; font-weight: 700; color: var(--fg); } .hwcn-mock-ref-badge { margin-left: auto; background: var(--brand-black); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.25rem 0.55rem; border-radius: 999px; flex-shrink: 0; } /* Nations compliance table */ .compliance-table { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .compliance-table-head { display: none; background: #f4f4f3; padding: 0.9rem 1.25rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .compliance-row { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-top: 1px solid var(--border); } .compliance-row:first-child { border-top: none; } @media (min-width: 700px) { .compliance-table-head, .compliance-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 1.25rem; } } .compliance-table-head > *, .compliance-row > * { min-width: 0; } .compliance-nation { margin: 0; font-weight: 700; font-size: 0.92rem; } .compliance-regulator { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--muted); } .compliance-regulation { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; } .compliance-keep { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; } .compliance-keep svg { width: 0.9rem; height: 0.9rem; color: var(--brand-black); flex-shrink: 0; } /* ── Waste Reporting feature page ── */ .hero-badge-neutral { background: #fff; border: 1px solid var(--border); color: var(--muted); } .report-dashboard { max-width: 880px; margin: 3rem auto 0; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -25px rgba(10, 10, 10, 0.25); text-align: left; } .report-dashboard-head { background: #0f0f0f; padding: 0.7rem 1.25rem; display: flex; align-items: center; gap: 0.4rem; } .report-dashboard-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; } .report-dot-red { background: #f87171; } .report-dot-amber { background: #fbbf24; } .report-dot-green { background: #4ade80; } .report-dashboard-url { color: #8b8b8b; font-size: 0.72rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; margin-left: 0.5rem; } .report-dashboard-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; } .report-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .report-filter-bar-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); } .report-filter-bar-label svg { width: 0.85rem; height: 0.85rem; } .report-preset-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .report-preset-pill { font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 8px; background: #f4f4f3; color: var(--muted); } .report-preset-pill.is-active { background: var(--brand-black); color: #fff; } .report-unit-toggle { margin-left: auto; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); } .report-stat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; } @media (min-width: 500px) { .report-stat-cards { grid-template-columns: repeat(3, 1fr); } } .report-stat-card { background: #f7f7f5; border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem; min-width: 0; } .report-stat-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; } .report-stat-card-head span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .report-stat-card-head svg { width: 0.85rem; height: 0.85rem; color: var(--muted); flex-shrink: 0; } .report-stat-card p { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--fg); line-height: 1.1; } .report-tab-pills { display: flex; gap: 0.3rem; margin-bottom: 0.75rem; } .report-tab-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; padding: 0.35rem 0.7rem; border-radius: 8px; color: var(--muted); } .report-tab-pill.is-active { background: var(--brand-black); color: #fff; } .report-tab-pill svg { width: 0.75rem; height: 0.75rem; } .report-breakdown-list { display: flex; flex-direction: column; gap: 0.5rem; } .report-breakdown-row { display: flex; align-items: center; gap: 0.75rem; } .report-breakdown-name { font-size: 0.78rem; font-weight: 600; color: var(--fg); width: 8rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .report-breakdown-bar { flex: 1; min-width: 0; height: 0.45rem; background: #f0f0ee; border-radius: 999px; overflow: hidden; } .report-breakdown-bar div { height: 100%; background: var(--brand-black); border-radius: 999px; } .report-breakdown-weight { font-size: 0.72rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--muted); width: 5.5rem; text-align: right; flex-shrink: 0; } .report-export-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .report-export-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; padding: 0.4rem 0.75rem; border-radius: 8px; background: #f4f4f3; color: var(--fg); } .report-export-btn svg { width: 0.75rem; height: 0.75rem; } .report-export-btn.is-primary { background: var(--brand-black); color: #fff; } .report-export-btn.is-outline { background: #fff; border: 1px solid var(--border); } .report-stats-band { background: #f4f4f3; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3rem 0; } .report-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden; } @media (min-width: 640px) { .report-stats-grid { grid-template-columns: repeat(4, 1fr); } } .report-stats-item { background: #fff; padding: 2rem 1rem; text-align: center; min-width: 0; } .report-stats-value { font-size: 2.25rem; color: var(--brand-black); margin: 0 0 0.4rem; } .report-stats-label { margin: 0; font-weight: 700; font-size: 0.88rem; color: var(--fg); } .report-stats-sub { margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--muted); } .report-slice-card { display: flex; flex-direction: column; } .report-slice-head { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; } .report-slice-head .icon-badge { margin-bottom: 0; width: 2rem; height: 2rem; flex-shrink: 0; } .report-slice-head h3 { margin: 0; font-size: 0.92rem; } .report-slice-sub { margin: 0.1rem 0 0; font-size: 0.76rem; color: var(--muted); } .report-slice-rows { display: flex; flex-direction: column; gap: 0.65rem; } .report-slice-row-top { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; font-size: 0.78rem; } .report-slice-row-top span:first-child { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .report-slice-row-top span:last-child { font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--muted); flex-shrink: 0; } .report-slice-bar { height: 0.35rem; background: #f0f0ee; border-radius: 999px; overflow: hidden; } .report-slice-bar div { height: 100%; background: var(--brand-yellow); border-radius: 999px; } .report-slice-footer { margin: 0.85rem 0 0; font-size: 0.74rem; color: var(--muted); } .report-filter-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.5rem; } .report-filter-item { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--brand-yellow); border-radius: 10px; padding: 0.85rem 1rem; } .report-filter-item-label { margin: 0; font-weight: 700; font-size: 0.88rem; } .report-filter-item-desc { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.5; } .report-filter-mock { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; box-shadow: 0 20px 50px -25px rgba(10, 10, 10, 0.2); } .report-filter-mock-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .report-filter-mock-head > span:first-child { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.88rem; } .report-filter-mock-head > span:first-child svg { width: 0.9rem; height: 0.9rem; color: var(--muted); } .report-filter-mock-count { background: #f4f4f3; color: var(--muted); font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; margin-left: 0.3rem; } .report-filter-mock-reset { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--muted); } .report-filter-mock-reset svg { width: 0.75rem; height: 0.75rem; } .report-filter-mock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 1rem; } .report-filter-mock-cell { border: 1px solid var(--border); background: #f7f7f5; border-radius: 10px; padding: 0.6rem 0.75rem; min-width: 0; } .report-filter-mock-cell.is-active { border-color: color-mix(in srgb, var(--brand-yellow) 50%, transparent); background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); } .report-filter-mock-cell p:first-child { margin: 0 0 0.15rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .report-filter-mock-cell p:last-child { margin: 0; font-size: 0.78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .report-filter-mock-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; } .report-filter-mock-tags > span:first-child { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .report-filter-mock-tag { background: color-mix(in srgb, var(--brand-yellow) 20%, transparent); color: var(--brand-black); font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; } .report-filter-mock-results { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: #f7f7f5; border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; } .report-filter-mock-results span:first-child { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; } .report-filter-mock-results span:first-child svg { width: 0.9rem; height: 0.9rem; color: var(--muted); } .report-filter-mock-results span:last-child { font-size: 0.76rem; color: var(--muted); } .report-table-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 900px) { .report-table-layout { grid-template-columns: 1fr 1fr; } } .report-table-layout > * { min-width: 0; } .report-col-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } @media (min-width: 500px) { .report-col-grid { grid-template-columns: 1fr 1fr; } } .report-col-item { display: flex; align-items: flex-start; gap: 0.6rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.9rem; min-width: 0; } .report-col-item span { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--brand-yellow); flex-shrink: 0; margin-top: 0.45rem; } .report-col-label { margin: 0; font-weight: 700; font-size: 0.86rem; } .report-col-desc { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--muted); } .report-table-wrap { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .report-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.78rem; } .report-table thead tr { background: #f7f7f5; border-bottom: 1px solid var(--border); } .report-table th { text-align: left; padding: 0.65rem 0.85rem; font-weight: 700; color: var(--muted); white-space: nowrap; } .report-table td { padding: 0.65rem 0.85rem; border-top: 1px solid var(--border); white-space: nowrap; } .report-table tr:first-child td { border-top: none; } .report-table td.muted { color: var(--muted); } .report-table-weight { text-align: right; font-weight: 700; } .report-source-badge { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid; } .report-source-wtn { background: #eef4ff; color: #2563eb; border-color: #cfe0ff; } .report-source-docket { background: #f5eeff; color: #7c3aed; border-color: #e3d4ff; } .report-source-quick-capture { background: #fff7e6; color: #b8860b; border-color: #ffe6ad; } .report-ewc-badge { background: #f4f4f3; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 4px; } .report-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: #f7f7f5; border-top: 1px solid var(--border); padding: 0.6rem 0.85rem; font-size: 0.76rem; color: var(--muted); } .report-table-note { text-align: center; font-size: 0.74rem; color: var(--muted); margin: 0.75rem 0 0; } .report-export-card { display: flex; flex-direction: column; } .report-export-card.is-highlight { border-color: color-mix(in srgb, var(--brand-yellow) 50%, transparent); background: color-mix(in srgb, var(--brand-yellow) 8%, #fff); } .report-export-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .report-export-card-head .icon-badge { margin-bottom: 0; flex-shrink: 0; } .report-export-card-head h3 { margin: 0; font-size: 0.92rem; } .report-export-cols { font-size: 0.68rem; font-weight: 700; color: var(--muted); } .report-export-filename { background: #f7f7f5; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.68rem; color: var(--muted); word-break: break-all; margin: 0 0 1rem; } .report-export-card > p:not(.report-export-filename) { color: var(--muted); font-size: 0.86rem; line-height: 1.55; margin: 0 0 1rem; flex: 1; } .report-export-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .report-export-tags span { font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); background: #f7f7f5; color: var(--muted); } .report-inline-code { background: color-mix(in srgb, var(--brand-yellow) 20%, transparent); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85em; color: var(--brand-black); } .report-dedup-flow { display: flex; flex-direction: column; gap: 0.75rem; } .report-dedup-row { display: flex; align-items: center; gap: 0.75rem; background: #f7f7f5; border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem; min-width: 0; } .report-dedup-icon { width: 2rem; height: 2rem; border-radius: 8px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .report-dedup-icon svg { width: 1rem; height: 1rem; color: var(--brand-black); } .report-dedup-text { flex: 1; min-width: 0; } .report-dedup-text p:first-child { margin: 0; font-size: 0.85rem; font-weight: 600; } .report-dedup-text p.mono { margin: 0.1rem 0 0; font-size: 0.7rem; color: var(--muted); } .report-dedup-badge { background: color-mix(in srgb, var(--brand-yellow) 25%, transparent); color: var(--brand-black); font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; flex-shrink: 0; } /* ── Ask Bolt AI feature page ── */ .askbolt-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .askbolt-queries { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 900px) { .askbolt-queries { grid-template-columns: 1fr 1fr; } } .askbolt-query-list, .askbolt-query-panels { min-width: 0; } .askbolt-query-list { display: flex; flex-direction: column; gap: 0.5rem; } .askbolt-query-label { display: block; cursor: pointer; } .askbolt-query-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; transition: border-color 0.15s ease, background 0.15s ease; } .askbolt-query-icon { width: 2rem; height: 2rem; border-radius: 8px; background: #f4f4f3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .askbolt-query-icon svg { width: 1rem; height: 1rem; color: var(--muted); } .askbolt-query-btn span { font-size: 0.88rem; font-weight: 600; color: var(--fg); } #q-0:checked ~ .askbolt-query-list label[for="q-0"] .askbolt-query-btn, #q-1:checked ~ .askbolt-query-list label[for="q-1"] .askbolt-query-btn, #q-2:checked ~ .askbolt-query-list label[for="q-2"] .askbolt-query-btn, #q-3:checked ~ .askbolt-query-list label[for="q-3"] .askbolt-query-btn, #q-4:checked ~ .askbolt-query-list label[for="q-4"] .askbolt-query-btn, #q-5:checked ~ .askbolt-query-list label[for="q-5"] .askbolt-query-btn { border-color: var(--brand-yellow); background: color-mix(in srgb, var(--brand-yellow) 12%, transparent); } #q-0:checked ~ .askbolt-query-list label[for="q-0"] .askbolt-query-icon, #q-1:checked ~ .askbolt-query-list label[for="q-1"] .askbolt-query-icon, #q-2:checked ~ .askbolt-query-list label[for="q-2"] .askbolt-query-icon, #q-3:checked ~ .askbolt-query-list label[for="q-3"] .askbolt-query-icon, #q-4:checked ~ .askbolt-query-list label[for="q-4"] .askbolt-query-icon, #q-5:checked ~ .askbolt-query-list label[for="q-5"] .askbolt-query-icon { background: var(--brand-black); } #q-0:checked ~ .askbolt-query-list label[for="q-0"] .askbolt-query-icon svg, #q-1:checked ~ .askbolt-query-list label[for="q-1"] .askbolt-query-icon svg, #q-2:checked ~ .askbolt-query-list label[for="q-2"] .askbolt-query-icon svg, #q-3:checked ~ .askbolt-query-list label[for="q-3"] .askbolt-query-icon svg, #q-4:checked ~ .askbolt-query-list label[for="q-4"] .askbolt-query-icon svg, #q-5:checked ~ .askbolt-query-list label[for="q-5"] .askbolt-query-icon svg { color: #fff; } .askbolt-query-panel { display: none; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem; } #q-0:checked ~ .askbolt-query-panels #panel-q-0, #q-1:checked ~ .askbolt-query-panels #panel-q-1, #q-2:checked ~ .askbolt-query-panels #panel-q-2, #q-3:checked ~ .askbolt-query-panels #panel-q-3, #q-4:checked ~ .askbolt-query-panels #panel-q-4, #q-5:checked ~ .askbolt-query-panels #panel-q-5 { display: block; } .askbolt-chat-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.9rem; } .askbolt-chat-head svg { width: 1rem; height: 1rem; color: var(--brand-black); } .askbolt-ai-badge { margin-left: auto; background: color-mix(in srgb, var(--brand-yellow) 25%, transparent); color: var(--brand-black); font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; } .askbolt-chat-bubbles { display: flex; flex-direction: column; gap: 0.75rem; } .askbolt-user-bubble { align-self: flex-end; max-width: 85%; } .askbolt-ai-response { display: flex; align-items: flex-start; gap: 0.6rem; } .askbolt-ai-response-icon { width: 1.8rem; height: 1.8rem; border-radius: 8px; background: color-mix(in srgb, var(--brand-yellow) 20%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1rem; } .askbolt-ai-response-icon svg { width: 0.95rem; height: 0.95rem; color: var(--brand-black); } .askbolt-ai-response-body { flex: 1; min-width: 0; background: #f7f7f5; border-radius: 14px; border-bottom-left-radius: 4px; padding: 0.9rem 1.1rem; } .askbolt-ai-response-body p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--fg); } .askbolt-response-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border); } .askbolt-response-actions span { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--muted); } .askbolt-response-actions svg { width: 0.8rem; height: 0.8rem; } .askbolt-features { position: relative; } .askbolt-feature-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .askbolt-feature-pill-label { display: block; cursor: pointer; } .askbolt-feature-pill { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 0.85rem; font-weight: 700; color: var(--muted); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .askbolt-feature-pill svg { width: 1rem; height: 1rem; } #feat-0:checked ~ .askbolt-feature-pills label[for="feat-0"] .askbolt-feature-pill, #feat-1:checked ~ .askbolt-feature-pills label[for="feat-1"] .askbolt-feature-pill, #feat-2:checked ~ .askbolt-feature-pills label[for="feat-2"] .askbolt-feature-pill, #feat-3:checked ~ .askbolt-feature-pills label[for="feat-3"] .askbolt-feature-pill, #sh-feat-0:checked ~ .askbolt-feature-pills label[for="sh-feat-0"] .askbolt-feature-pill, #sh-feat-1:checked ~ .askbolt-feature-pills label[for="sh-feat-1"] .askbolt-feature-pill, #sh-feat-2:checked ~ .askbolt-feature-pills label[for="sh-feat-2"] .askbolt-feature-pill, #sh-feat-3:checked ~ .askbolt-feature-pills label[for="sh-feat-3"] .askbolt-feature-pill, #sh-feat-4:checked ~ .askbolt-feature-pills label[for="sh-feat-4"] .askbolt-feature-pill { border-color: var(--brand-yellow); background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); color: var(--brand-black); } .askbolt-feature-panel { display: none; border: 2px solid var(--border); border-radius: 24px; background: #f7f7f5; padding: 2rem; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 900px) { .askbolt-feature-panel { grid-template-columns: 1fr 1fr; padding: 2.5rem; } } .askbolt-feature-panel > * { min-width: 0; } #feat-0:checked ~ .askbolt-feature-panels #fpanel-0, #feat-1:checked ~ .askbolt-feature-panels #fpanel-1, #feat-2:checked ~ .askbolt-feature-panels #fpanel-2, #feat-3:checked ~ .askbolt-feature-panels #fpanel-3, #sh-feat-0:checked ~ .askbolt-feature-panels #sh-fpanel-0, #sh-feat-1:checked ~ .askbolt-feature-panels #sh-fpanel-1, #sh-feat-2:checked ~ .askbolt-feature-panels #sh-fpanel-2, #sh-feat-3:checked ~ .askbolt-feature-panels #sh-fpanel-3, #sh-feat-4:checked ~ .askbolt-feature-panels #sh-fpanel-4 { display: grid; } .askbolt-feature-panel-text h3 { margin: 1rem 0 0.75rem; font-size: 1.4rem; } .askbolt-feature-panel-text p { color: var(--muted); line-height: 1.65; margin: 0 0 1.5rem; } .askbolt-feature-points-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 1rem; } .askbolt-feature-panel-points ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .askbolt-feature-panel-points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--fg); } .askbolt-feature-panel-points li svg { width: 1.1rem; height: 1.1rem; color: var(--brand-black); flex-shrink: 0; margin-top: 0.15rem; } /* ── WasteBolt Gatehouse feature page ── */ .gatehouse-flow { background: #fff; border: 2px solid var(--border); border-radius: 20px; padding: 1.75rem; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.15); } .gatehouse-flow-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-black); margin: 0 0 1.25rem; } .gatehouse-flow-step { display: flex; align-items: flex-start; gap: 0.75rem; } .gatehouse-flow-icon-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 2.25rem; } .gatehouse-flow-icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; background: #f4f4f3; display: flex; align-items: center; justify-content: center; } .gatehouse-flow-icon svg { width: 1rem; height: 1rem; color: var(--muted); } .gatehouse-flow-icon.is-auto { background: color-mix(in srgb, var(--brand-yellow) 20%, transparent); } .gatehouse-flow-icon.is-auto svg { color: var(--brand-black); } .gatehouse-flow-line { width: 2px; flex: 1; min-height: 1.1rem; background: var(--border); margin-top: 0.25rem; } .gatehouse-flow-step > div:last-child { flex: 1; min-width: 0; padding: 0.35rem 0 1.1rem; } .gatehouse-flow-step-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .gatehouse-flow-step-head p { margin: 0; font-size: 0.88rem; font-weight: 700; } .is-auto-text .gatehouse-flow-step-head p, .is-auto-text .gatehouse-flow-sub { opacity: 0.75; } .gatehouse-flow-auto-badge { font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-yellow) 25%, transparent); color: var(--brand-black); } .gatehouse-flow-sub { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--muted); } .gatehouse-flow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding-top: 1.25rem; margin-top: 0.5rem; border-top: 1px solid var(--border); } .gatehouse-flow-stats div { text-align: center; min-width: 0; } .gatehouse-flow-stats p { margin: 0; font-weight: 800; font-size: 1rem; color: var(--brand-black); } .gatehouse-flow-stats span { font-size: 0.66rem; color: var(--muted); } .video-embed { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 20px 50px -25px rgba(10, 10, 10, 0.25); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Four-ways-in tab system (pure-CSS radio hack) */ .wayin-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .wayin-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; } .wayin-tab-label { display: block; cursor: pointer; } .wayin-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.1rem; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-size: 0.88rem; font-weight: 700; color: var(--muted); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .wayin-tab svg { width: 1rem; height: 1rem; flex-shrink: 0; } .wayin-tab-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; background: #f4f4f3; color: var(--muted); padding: 0.1rem 0.4rem; border-radius: 999px; } #wayin-manual:checked ~ .wayin-tabs label[for="wayin-manual"] .wayin-tab, #wayin-upload:checked ~ .wayin-tabs label[for="wayin-upload"] .wayin-tab, #wayin-csv:checked ~ .wayin-tabs label[for="wayin-csv"] .wayin-tab, #wayin-gatehouse:checked ~ .wayin-tabs label[for="wayin-gatehouse"] .wayin-tab { border-color: var(--brand-black); background: var(--brand-black); color: #fff; } #wayin-manual:checked ~ .wayin-tabs label[for="wayin-manual"] .wayin-tab-tag, #wayin-upload:checked ~ .wayin-tabs label[for="wayin-upload"] .wayin-tab-tag, #wayin-csv:checked ~ .wayin-tabs label[for="wayin-csv"] .wayin-tab-tag, #wayin-gatehouse:checked ~ .wayin-tabs label[for="wayin-gatehouse"] .wayin-tab-tag { background: var(--brand-yellow); color: var(--brand-black); } .wayin-panel { display: none; } #wayin-manual:checked ~ .wayin-panels #wayin-panel-manual, #wayin-upload:checked ~ .wayin-panels #wayin-panel-upload, #wayin-csv:checked ~ .wayin-panels #wayin-panel-csv, #wayin-gatehouse:checked ~ .wayin-panels #wayin-panel-gatehouse { display: block; } .wayin-panel h3 { margin: 0 0 0.75rem; font-size: 1.5rem; } .wayin-panel-desc { color: var(--muted); line-height: 1.65; margin: 0 0 1.75rem; max-width: 640px; } .wayin-steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 700px) { .wayin-steps { grid-template-columns: repeat(3, 1fr); } } .wayin-step-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; min-width: 0; } .wayin-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: #f4f4f3; font-weight: 800; font-size: 1.1rem; color: var(--brand-black); margin-bottom: 1rem; } .wayin-step-icon { width: 2rem; height: 2rem; border-radius: 8px; background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .wayin-step-icon svg { width: 1rem; height: 1rem; color: var(--brand-black); } .wayin-step-card h4 { margin: 0 0 0.4rem; font-size: 1rem; } .wayin-step-card p { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.55; } .wayin-simple { max-width: 640px; } .wayin-points { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; } .wayin-points li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; } .wayin-points li svg { width: 1.05rem; height: 1.05rem; color: var(--brand-black); flex-shrink: 0; } .wayin-gatehouse-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 900px) { .wayin-gatehouse-grid { grid-template-columns: 1fr 1fr; } } .wayin-gatehouse-grid > * { min-width: 0; } .wayin-sync-features { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 1.25rem 0 1.75rem; } @media (min-width: 500px) { .wayin-sync-features { grid-template-columns: 1fr 1fr; } } .wayin-sync-feature { display: flex; align-items: flex-start; gap: 0.6rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem; min-width: 0; } .wayin-sync-feature-icon { width: 2rem; height: 2rem; border-radius: 8px; background: color-mix(in srgb, var(--brand-yellow) 15%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wayin-sync-feature-icon svg { width: 1rem; height: 1rem; color: var(--brand-black); } .wayin-sync-feature p { margin: 0; font-size: 0.85rem; font-weight: 700; } .wayin-sync-feature-desc { font-size: 0.74rem !important; color: var(--muted); font-weight: 400 !important; margin-top: 0.15rem !important; } .gatehouse-terminal { background: #16171a; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.4); } .gatehouse-terminal-head { background: #232427; padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.3rem; } .gatehouse-terminal-head span { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: #4b4c50; } .gatehouse-terminal-head p { margin: 0 0 0 0.5rem; font-size: 0.7rem; color: #8b8b8b; font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .gatehouse-terminal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; } .gatehouse-terminal-label { margin: 0 0 0.4rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8b8b8b; } .gatehouse-terminal-row { display: flex; align-items: center; gap: 0.5rem; background: #232427; border-radius: 8px; padding: 0.6rem 0.75rem; font-size: 0.78rem; color: #d4d4d4; } .gatehouse-terminal-row svg { width: 0.9rem; height: 0.9rem; color: var(--brand-yellow); flex-shrink: 0; } .gatehouse-terminal-connected { margin-left: auto; font-family: system-ui, sans-serif; font-size: 0.65rem; font-weight: 700; color: var(--brand-yellow); } .gatehouse-terminal-status { background: color-mix(in srgb, var(--brand-yellow) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand-yellow) 25%, transparent); border-radius: 10px; padding: 0.85rem; } .gatehouse-terminal-status p:first-child { margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; color: var(--brand-yellow); } .gatehouse-terminal-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--brand-yellow); flex-shrink: 0; } .gatehouse-terminal-status p.mono { margin: 0; font-size: 0.7rem; color: #9a9a9a; } /* Weighbridge badges row + mappable fields grid */ .wayin-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; } .wayin-badges span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; } .wayin-badges svg { width: 0.85rem; height: 0.85rem; color: var(--brand-black); } .mapping-fields-label { font-size: 0.85rem; font-weight: 700; margin: 0 0 0.75rem; } .mapping-fields-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } @media (min-width: 500px) { .mapping-fields-grid { grid-template-columns: 1fr 1fr; } } .mapping-field { display: flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.85rem; font-weight: 500; min-width: 0; } .mapping-field span { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 40%, transparent); flex-shrink: 0; } .mapping-field span.is-required { background: #d1451f; } .mapping-field em { margin-left: auto; font-style: normal; font-size: 0.65rem; font-weight: 700; color: #d1451f; flex-shrink: 0; } /* Mapper mock */ .mapper-mock { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.18); } .mapper-mock-head { background: #f7f7f5; border-bottom: 1px solid var(--border); padding: 0.9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--muted); } .mapper-mock-badge { background: var(--brand-black); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 6px; } .mapper-mock-rows { display: flex; flex-direction: column; } .mapper-mock-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 1.25rem; border-top: 1px solid var(--border); min-width: 0; } .mapper-mock-row:first-child { border-top: none; } .mapper-mock-row.is-unmapped { opacity: 0.5; } .mapper-mock-col { width: 1.6rem; height: 1.6rem; border-radius: 6px; background: #f4f4f3; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; color: var(--muted); flex-shrink: 0; } .mapper-mock-header { flex: 1; min-width: 0; font-size: 0.76rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mapper-mock-row svg { width: 0.75rem; height: 0.75rem; color: var(--muted); flex-shrink: 0; } .mapper-mock-mapped { font-size: 0.74rem; font-weight: 600; color: var(--fg); flex-shrink: 0; } .mapper-mock-mapped.is-required { color: var(--brand-black); font-weight: 700; } .mapper-mock-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); background: #f7f7f5; } .mapper-mock-foot span:first-child { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; color: var(--brand-black); } .mapper-mock-foot svg { width: 0.8rem; height: 0.8rem; } .mapper-mock-preview { display: flex; align-items: center; gap: 0.35rem; background: var(--brand-black); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.45rem 0.8rem; border-radius: 8px; } /* Import template mock */ .template-mock { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.18); } .template-mock-head { background: #f7f7f5; border-bottom: 1px solid var(--border); padding: 0.9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .template-mock-head span:first-child { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; } .template-mock-head svg { width: 0.9rem; height: 0.9rem; color: var(--brand-black); flex-shrink: 0; } .template-mock-active { background: color-mix(in srgb, var(--brand-yellow) 25%, transparent); color: var(--brand-black); font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; } .template-mock-body { padding: 1.25rem; } .template-mock-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.75rem; } .template-mock-label svg { width: 0.85rem; height: 0.85rem; color: var(--brand-black); } .template-mock-rules { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; } .template-mock-rules div { display: flex; align-items: center; gap: 0.4rem; background: color-mix(in srgb, var(--brand-yellow) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand-yellow) 25%, transparent); border-radius: 8px; padding: 0.5rem 0.65rem; font-size: 0.76rem; font-weight: 600; flex-wrap: wrap; } .template-mock-rules svg { width: 0.8rem; height: 0.8rem; color: var(--brand-black); flex-shrink: 0; } .template-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.25rem; } .template-mock-grid > div { background: #f7f7f5; border: 1px solid var(--border); border-radius: 10px; padding: 0.65rem; min-width: 0; } .template-mock-grid svg { width: 0.85rem; height: 0.85rem; color: var(--muted); } .template-mock-grid p { margin: 0.2rem 0 0.1rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); } .template-mock-grid span { font-size: 0.76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .template-mock-type { display: flex; align-items: center; gap: 0.6rem; background: color-mix(in srgb, var(--brand-yellow) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand-yellow) 25%, transparent); border-radius: 10px; padding: 0.7rem 0.85rem; font-size: 0.78rem; font-weight: 600; } .template-mock-type svg { width: 1rem; height: 1rem; color: var(--brand-black); flex-shrink: 0; } .template-points { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .template-point { display: flex; align-items: flex-start; gap: 1rem; } .template-point .icon-badge { margin-bottom: 0; flex-shrink: 0; } .template-point p { margin: 0 0 0.25rem; font-weight: 700; font-size: 0.92rem; } .template-point span { font-size: 0.85rem; color: var(--muted); line-height: 1.55; } /* Review & approve */ .review-points { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .review-point { display: flex; align-items: center; gap: 1rem; } .review-point .icon-badge { margin-bottom: 0; flex-shrink: 0; width: 2.25rem; height: 2.25rem; } .review-point span { font-size: 0.9rem; font-weight: 500; } .review-mock { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.18); } .review-mock-head { background: #f7f7f5; border-bottom: 1px solid var(--border); padding: 0.9rem 1.25rem; } .review-mock-head p { margin: 0; font-weight: 700; font-size: 0.85rem; } .review-mock-head span { font-size: 0.72rem; color: var(--muted); } .review-mock-rows { display: flex; flex-direction: column; } .review-mock-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1.25rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .review-mock-row:first-child { border-top: none; } .review-mock-check { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .review-mock-check.is-ticked { background: var(--brand-black); border-color: var(--brand-black); } .review-mock-check svg { width: 0.65rem; height: 0.65rem; color: #fff; } .review-mock-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .review-mock-info span:first-child { font-size: 0.76rem; font-weight: 700; } .review-mock-info span.muted { font-size: 0.68rem; } .review-mock-template, .review-mock-nomatch { display: flex; align-items: center; gap: 0.25rem; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; } .review-mock-template { background: color-mix(in srgb, var(--brand-yellow) 20%, transparent); color: var(--brand-black); padding: 0.15rem 0.45rem; border-radius: 6px; } .review-mock-nomatch { color: var(--muted); } .review-mock-template svg, .review-mock-nomatch svg { width: 0.6rem; height: 0.6rem; } .review-mock-status { font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 999px; flex-shrink: 0; background: #f4f4f3; color: var(--muted); } .review-mock-status.is-approved { background: color-mix(in srgb, var(--brand-yellow) 25%, transparent); color: var(--brand-black); } .review-mock-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); background: #f7f7f5; font-size: 0.76rem; color: var(--muted); } .review-mock-import { display: flex; align-items: center; gap: 0.35rem; background: var(--brand-black); color: #fff; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 8px; } .review-mock-import svg { width: 0.85rem; height: 0.85rem; } /* Sync agent download */ .sync-download { background: #fff; border: 2px solid var(--border); border-radius: 24px; padding: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 700px) { .sync-download { grid-template-columns: 1fr 1fr; } } .sync-download > * { min-width: 0; } .sync-download h2 { margin: 1rem 0 0.75rem; } .sync-download > div:first-child > p:not(.sync-download-label):not(.sync-download-note) { color: var(--muted); line-height: 1.65; margin: 0 0 1.5rem; } .sync-download-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.75rem; } .sync-download-steps { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; } .sync-download-steps div { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.88rem; color: var(--muted); } .sync-download-steps span { width: 1.6rem; height: 1.6rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-yellow) 20%, transparent); color: var(--brand-black); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; flex-shrink: 0; } .sync-download-note { font-size: 0.76rem; color: var(--muted); margin: 0.85rem 0 0; } .file-tree { background: var(--brand-black); border-radius: 12px; padding: 1.1rem; font-size: 0.72rem; line-height: 1.8; margin-bottom: 1.5rem; overflow-x: auto; } .file-tree p { margin: 0; color: #9a9a9a; white-space: nowrap; } .file-tree .is-good { color: var(--brand-yellow); } .file-tree .is-bad { color: #f87171; } .file-tree em { font-style: normal; color: #6b6b6b; } .dupe-methods { display: flex; flex-direction: column; gap: 0.6rem; } .dupe-methods > div { display: flex; align-items: flex-start; gap: 0.6rem; background: #f7f7f5; border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem; } .dupe-methods > div.is-recommended { background: color-mix(in srgb, var(--brand-yellow) 10%, transparent); border-color: color-mix(in srgb, var(--brand-yellow) 35%, transparent); } .dupe-methods svg { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; margin-top: 0.15rem; } .dupe-methods .is-recommended svg { color: var(--brand-black); } .dupe-methods p { margin: 0; display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; } .dupe-methods p svg { width: 0.75rem; height: 0.75rem; color: var(--brand-black); margin-top: 0; } .dupe-methods span { font-size: 0.76rem; color: var(--muted); } /* ── Skip Hire feature page ── */ .skiphire-alert { display: flex; flex-direction: column; gap: 1.25rem; background: color-mix(in srgb, #d1451f 8%, transparent); border: 1px solid color-mix(in srgb, #d1451f 25%, transparent); border-radius: 20px; padding: 2rem; } @media (min-width: 640px) { .skiphire-alert { flex-direction: row; align-items: center; } } .skiphire-alert-icon { width: 3.5rem; height: 3.5rem; border-radius: 16px; background: color-mix(in srgb, #d1451f 15%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .skiphire-alert-icon svg { width: 1.75rem; height: 1.75rem; color: #d1451f; } .skiphire-alert h3 { margin: 0 0 0.5rem; font-size: 1.15rem; } .skiphire-alert p { margin: 0 0 1rem; color: var(--muted); line-height: 1.6; font-size: 0.92rem; } .skiphire-alert-link { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.88rem; color: #d1451f; } .skiphire-alert-link svg { width: 1rem; height: 1rem; } /* ── Book a Demo page ── */ .book-demo-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 900px) { .book-demo-layout { grid-template-columns: 1fr 1fr; } } .book-demo-layout > * { min-width: 0; } .book-demo-layout h2 { margin: 0 0 1.5rem; font-size: 1.6rem; } .book-demo-cover-list { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; } .book-demo-cover-item { display: flex; align-items: flex-start; gap: 1rem; } .book-demo-cover-item .icon-badge { margin-bottom: 0; flex-shrink: 0; width: 2.5rem; height: 2.5rem; } .book-demo-cover-item p { margin: 0; font-size: 0.95rem; line-height: 1.55; padding-top: 0.35rem; } .book-demo-info-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; } .book-demo-info-kicker { margin: 0 0 1rem; font-weight: 700; font-size: 0.92rem; color: var(--brand-black); } .book-demo-info-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .book-demo-info-card li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; } .book-demo-info-card li svg { width: 1.05rem; height: 1.05rem; color: var(--brand-black); flex-shrink: 0; } .book-demo-self-serve { font-size: 0.9rem; color: var(--muted); } .book-demo-self-serve .inline-link { white-space: nowrap; } .book-demo-form-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 2rem; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.12); } .book-demo-field { margin-bottom: 1.25rem; } .book-demo-field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.5rem; } .book-demo-field label span { font-weight: 400; color: var(--muted); } .book-demo-field input, .book-demo-field select, .book-demo-field textarea { width: 100%; padding: 0.75rem 0.9rem; font-size: 0.92rem; font-family: inherit; border: 2px solid var(--border); border-radius: 10px; background: #fff; color: var(--fg); } .book-demo-field textarea { resize: vertical; } .book-demo-field input:focus, .book-demo-field select:focus, .book-demo-field textarea:focus { outline: none; border-color: var(--brand-black); } .book-demo-submit { width: 100%; justify-content: center; } .book-demo-submit:disabled { opacity: 0.6; cursor: not-allowed; } .book-demo-note { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 0.85rem 0 0; } .book-demo-error { background: color-mix(in srgb, #d1451f 8%, transparent); border: 1px solid color-mix(in srgb, #d1451f 25%, transparent); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.85rem; color: #d1451f; margin-bottom: 1.25rem; } .book-demo-success { text-align: center; padding: 2rem 0; } .book-demo-success .icon-badge { margin: 0 auto 1.25rem; } .book-demo-success h3 { margin: 0 0 0.5rem; font-size: 1.3rem; } .book-demo-success p { color: var(--muted); margin: 0 0 1.25rem; } /* ── API docs page ── */ .docs-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 900px) { .docs-layout { grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; } } .docs-layout > * { min-width: 0; } .docs-sidebar { display: none; } @media (min-width: 900px) { .docs-sidebar { display: block; position: sticky; top: 6.5rem; } } .docs-sidebar-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.75rem; padding: 0 0.5rem; } .docs-sidebar-link { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; color: var(--muted); text-decoration: none; line-height: 1.4; } .docs-sidebar-link:hover { background: #f7f7f5; color: var(--brand-black); } .docs-mobile-nav { display: block; background: #f7f7f5; border: 1px solid var(--border); border-radius: 14px; padding: 0 1rem; margin-bottom: 2rem; } @media (min-width: 900px) { .docs-mobile-nav { display: none; } } .docs-mobile-nav summary { padding: 0.85rem 0; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .docs-mobile-nav-list { display: flex; flex-direction: column; padding-bottom: 0.85rem; } .docs-mobile-nav-list a { padding: 0.4rem 0; font-size: 0.85rem; color: var(--muted); text-decoration: none; } .docs-section { scroll-margin-top: 6rem; padding: 2.25rem 0; border-bottom: 1px solid var(--border); } .docs-section:first-of-type { padding-top: 0; } .docs-section:last-child { border-bottom: none; } .docs-section h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.4rem; margin: 0 0 1rem; } .docs-section h2 svg { width: 1.15rem; height: 1.15rem; color: var(--brand-yellow); flex-shrink: 0; } .docs-section > p { color: var(--muted); line-height: 1.65; margin: 0 0 1rem; } .docs-section code, .docs-field-desc code, .docs-note p code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.82em; background: #f0f0ec; padding: 0.1rem 0.35rem; border-radius: 4px; } .docs-bruno-card { display: flex; flex-direction: column; gap: 1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--brand-yellow) 40%, transparent); background: color-mix(in srgb, var(--brand-yellow) 8%, transparent); padding: 1.25rem; margin: 1.5rem 0; } @media (min-width: 640px) { .docs-bruno-card { flex-direction: row; align-items: center; } } .docs-bruno-card-title { font-weight: 700; margin: 0 0 0.3rem; } .docs-bruno-card-desc { font-size: 0.85rem; color: var(--muted); margin: 0; } .docs-bruno-card .btn { flex-shrink: 0; white-space: nowrap; } .docs-steps { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.5rem 0 0; } .docs-step { display: flex; gap: 0.75rem; align-items: flex-start; } .docs-step-num { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-yellow) 30%, transparent); color: var(--brand-black); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1rem; } .docs-step p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.6; } .docs-baseurl { background: #f7f7f5; border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.25rem; margin: 2rem 0; } .docs-baseurl-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; } .docs-baseurl code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85rem; color: #047857; word-break: break-all; background: none; padding: 0; } .docs-warning { display: flex; gap: 0.75rem; align-items: flex-start; background: color-mix(in srgb, #f59e0b 10%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); border-radius: 12px; padding: 1rem; margin-top: 1.25rem; } .docs-warning svg { width: 1.1rem; height: 1.1rem; color: #b45309; flex-shrink: 0; margin-top: 0.15rem; } .docs-warning p { margin: 0; font-size: 0.85rem; color: #92400e; line-height: 1.6; } .docs-note { background: #f7f7f5; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-top: 1rem; } .docs-note-title { margin: 0 0 0.3rem; font-weight: 700; font-size: 0.88rem; } .docs-note p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.6; } .docs-header-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1.5rem 0; } @media (min-width: 640px) { .docs-header-grid { grid-template-columns: repeat(3, 1fr); } } .docs-header-grid > * { min-width: 0; } .docs-header-card { background: #f7f7f5; border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem; } .docs-header-name { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; color: var(--brand-black); margin-bottom: 0.35rem; font-weight: 700; background: none; padding: 0; } .docs-header-card p { margin: 0 0 0.5rem; font-size: 0.72rem; color: var(--muted); } .docs-header-value { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; background: none; padding: 0; } .docs-status { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; font-size: 0.78rem; } .docs-status-green { color: #047857; } .docs-status-amber { color: #b45309; } .docs-status-orange { color: #c2410c; } .docs-status-red { color: #d1451f; } .docs-code { background: #16171a; border-radius: 14px; overflow: hidden; margin: 1.25rem 0; } .docs-code-label { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: #232427; } .docs-code-label svg { width: 0.85rem; height: 0.85rem; color: #8b8b8b; flex-shrink: 0; } .docs-code-label span { font-size: 0.7rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: #8b8b8b; text-transform: uppercase; letter-spacing: 0.04em; } .docs-code pre { margin: 0; padding: 1rem 1.25rem; overflow-x: auto; } .docs-code code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; line-height: 1.6; color: #d4d4d4; white-space: pre; background: none; padding: 0; } .docs-code-tabs { background: #16171a; border-radius: 14px; overflow: hidden; margin: 1.25rem 0; } .docs-code-tab-input { position: absolute; opacity: 0; pointer-events: none; } .docs-code-tab-bar { display: flex; gap: 0.25rem; padding: 0.6rem 0.75rem 0; background: #232427; flex-wrap: wrap; } .docs-code-tab-label { cursor: pointer; } .docs-code-tab-inner { display: inline-block; padding: 0.45rem 0.75rem; border-radius: 8px 8px 0 0; font-size: 0.72rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: #8b8b8b; border-bottom: 2px solid transparent; } .docs-code-tab-panels { position: relative; } .docs-code-tab-panel { display: none; margin: 0; padding: 1rem 1.25rem; overflow-x: auto; } .docs-code-tab-panel code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.76rem; line-height: 1.6; color: #d4d4d4; white-space: pre; background: none; padding: 0; } #cwt-curl:checked ~ .docs-code-tab-bar label[for="cwt-curl"] .docs-code-tab-inner, #cwt-hazard:checked ~ .docs-code-tab-bar label[for="cwt-hazard"] .docs-code-tab-inner, #cwt-js:checked ~ .docs-code-tab-bar label[for="cwt-js"] .docs-code-tab-inner { color: #fff; background: #16171a; border-bottom-color: var(--brand-yellow); } #cwt-curl:checked ~ .docs-code-tab-panels #panel-curl, #cwt-hazard:checked ~ .docs-code-tab-panels #panel-hazard, #cwt-js:checked ~ .docs-code-tab-panels #panel-js { display: block; } .docs-endpoint-head { margin-bottom: 1.5rem; } .docs-method-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } .docs-method { padding: 0.3rem 0.65rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; font-family: ui-monospace, 'SF Mono', Menlo, monospace; text-transform: uppercase; } .docs-method-post { background: color-mix(in srgb, #10b981 12%, transparent); color: #047857; border: 1px solid color-mix(in srgb, #10b981 30%, transparent); } .docs-method-get { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #1d4ed8; border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent); } .docs-method-patch { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #b45309; border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); } .docs-endpoint-path { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.82rem; background: #f7f7f5; border: 1px solid var(--border); padding: 0.3rem 0.65rem; border-radius: 6px; } .docs-endpoint-head h3 { margin: 0 0 0.5rem; } .docs-endpoint-head > p { margin: 0; color: var(--muted); line-height: 1.6; } .docs-field-group { margin-bottom: 1.5rem; } .docs-field-group-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.6rem; } .docs-field-group-intro { font-size: 0.8rem; color: var(--muted); margin: -0.3rem 0 0.75rem; line-height: 1.55; } .docs-field-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; padding: 0.65rem 0.85rem; border-radius: 10px; background: #f7f7f5; border: 1px solid var(--border); margin-bottom: 0.5rem; } .docs-field-row:last-child { margin-bottom: 0; } .docs-field-name { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; font-weight: 700; color: var(--brand-black); } .docs-field-type { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; color: var(--muted); } .docs-field-desc { font-size: 0.78rem; color: var(--muted); margin-left: auto; text-align: right; } @media (max-width: 520px) { .docs-field-desc { margin-left: 0; width: 100%; text-align: left; } } .docs-field-group-hazard, .docs-field-group-pops { border-radius: 14px; padding: 1rem; margin-bottom: 1.5rem; } .docs-field-group-hazard { border: 1px solid color-mix(in srgb, #d1451f 20%, transparent); background: color-mix(in srgb, #d1451f 5%, transparent); } .docs-field-group-hazard .docs-field-group-title, .docs-field-group-hazard .docs-field-name { color: #d1451f; } .docs-field-group-hazard .docs-field-row { background: #fff; border-color: color-mix(in srgb, #d1451f 15%, transparent); } .docs-field-group-pops { border: 1px solid color-mix(in srgb, #2563eb 20%, transparent); background: color-mix(in srgb, #2563eb 5%, transparent); } .docs-field-group-pops .docs-field-group-title, .docs-field-group-pops .docs-field-name { color: #2563eb; } .docs-field-group-pops .docs-field-row { background: #fff; border-color: color-mix(in srgb, #2563eb 15%, transparent); } /* ── Code lookup pages (EWC / HP codes / POPs) ── */ .lookup-count { font-size: 0.8rem; font-weight: 700; color: var(--muted); margin: 1.5rem 0 1rem; } .lookup-list { display: flex; flex-direction: column; gap: 0.5rem; } .lookup-row { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 12px; background: #f7f7f5; border: 1px solid var(--border); transition: border-color 0.15s ease; } .lookup-row:hover { border-color: color-mix(in srgb, var(--brand-black) 25%, var(--border)); } .lookup-code { flex-shrink: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; font-size: 0.78rem; padding: 0.35rem 0.65rem; border-radius: 8px; background: #fff; border: 1px solid var(--border); color: var(--brand-black); white-space: nowrap; min-width: 68px; text-align: center; } .lookup-desc { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.55; padding-top: 0.2rem; } .lookup-list-hazard .lookup-code { color: #d1451f; background: color-mix(in srgb, #d1451f 8%, transparent); border-color: color-mix(in srgb, #d1451f 25%, transparent); } .lookup-list-hazard .lookup-row:hover { border-color: color-mix(in srgb, #d1451f 35%, transparent); } .lookup-list-pops .lookup-code { color: #2563eb; background: color-mix(in srgb, #2563eb 8%, transparent); border-color: color-mix(in srgb, #2563eb 25%, transparent); } .lookup-list-pops .lookup-row:hover { border-color: color-mix(in srgb, #2563eb 35%, transparent); } .lookup-no-results { text-align: center; padding: 3rem 1rem; color: var(--muted); } .lookup-no-results svg { width: 2rem; height: 2rem; opacity: 0.3; margin-bottom: 0.75rem; } .inline-code-chip { display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 6px; white-space: nowrap; } .chip-neutral { background: #f0f0ec; color: var(--brand-black); } .chip-red { background: color-mix(in srgb, #d1451f 10%, transparent); color: #d1451f; border: 1px solid color-mix(in srgb, #d1451f 25%, transparent); } .chip-blue { background: color-mix(in srgb, #2563eb 10%, transparent); color: #2563eb; border: 1px solid color-mix(in srgb, #2563eb 25%, transparent); } .chip-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .chip-list li { color: var(--muted); line-height: 1.6; font-size: 0.92rem; } .chip-list .inline-code-chip { margin-right: 0.4rem; vertical-align: 1px; } /* ── Help Center — Ask Bolt widget ── */ .helpbot { max-width: 100%; margin: 2rem 0 0; border-radius: 20px; border: 1px solid var(--border); background: #fff; box-shadow: 0 20px 50px -25px rgba(10, 10, 10, 0.15); overflow: hidden; display: flex; flex-direction: column; text-align: left; } .helpbot-head { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--brand-yellow) 12%, #fff); } .helpbot-avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .helpbot-avatar svg { width: 1.1rem; height: 1.1rem; } .helpbot-title { margin: 0; font-size: 0.88rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; } .helpbot-ai-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.4rem; border-radius: 5px; background: color-mix(in srgb, var(--brand-yellow) 35%, transparent); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; } .helpbot-ai-badge svg { width: 0.6rem; height: 0.6rem; } .helpbot-sub { margin: 0.1rem 0 0; font-size: 0.74rem; color: var(--muted); } .helpbot-messages { max-height: 360px; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; } .helpbot-bubble-content { display: flex; flex-direction: column; min-width: 0; } .chat-bubble a { color: var(--brand-black); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .chat-bubble p { margin: 0 0 0.5rem; } .chat-bubble p:last-child { margin-bottom: 0; } .chat-bubble ul { margin: 0.2rem 0 0.5rem 1.1rem; padding: 0; } .chat-bubble ul:last-child { margin-bottom: 0; } .chat-bubble li { margin-bottom: 0.2rem; } .helpbot-typing { display: flex; gap: 0.25rem; align-items: center; padding: 0.15rem 0; } .helpbot-typing span { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--muted); animation: helpbot-bounce 1.2s infinite ease-in-out; } .helpbot-typing span:nth-child(2) { animation-delay: 0.15s; } .helpbot-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes helpbot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-3px); opacity: 1; } } .helpbot-suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.1rem 0.85rem; } .helpbot-suggestions[hidden] { display: none; } .helpbot-suggestion { font-size: 0.74rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .helpbot-suggestion:hover { border-color: var(--brand-black); color: var(--brand-black); } .helpbot-error { margin: 0 1.1rem 0.6rem; font-size: 0.78rem; color: #d1451f; } .helpbot-error[hidden] { display: none; } .helpbot-form { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-top: 1px solid var(--border); background: #fafaf8; } .helpbot-form input { flex: 1; height: 2.65rem; border-radius: 999px; border: 2px solid var(--border); padding: 0 1rem; font-size: 0.86rem; font-family: inherit; background: #fff; min-width: 0; } .helpbot-form input:focus { outline: none; border-color: var(--brand-black); } .helpbot-form input:disabled { opacity: 0.6; } .helpbot-send { width: 2.65rem; height: 2.65rem; border-radius: 999px; background: var(--brand-black); color: #fff; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: opacity 0.15s ease; } .helpbot-send svg { width: 1rem; height: 1rem; } .helpbot-send:disabled { opacity: 0.5; cursor: default; } /* ── Blog category filter (pure-CSS radio-hack) ── */ .blog-filter-input { position: absolute; opacity: 0; pointer-events: none; } .blog-filter-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } .blog-filter-pill { cursor: pointer; } .blog-filter-pill span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 0.82rem; font-weight: 600; color: var(--muted); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .blog-filter-pill span em { font-style: normal; font-size: 0.72rem; font-weight: 700; opacity: 0.6; } .blog-filter-pill:hover span { border-color: var(--brand-black); color: var(--brand-black); } #filter-all:checked ~ .blog-filter-pills label[for="filter-all"] span, #filter-wtn:checked ~ .blog-filter-pills label[for="filter-wtn"] span, #filter-dwt:checked ~ .blog-filter-pills label[for="filter-dwt"] span, #filter-ewc:checked ~ .blog-filter-pills label[for="filter-ewc"] span, #filter-carrier:checked ~ .blog-filter-pills label[for="filter-carrier"] span, #filter-weighbridge:checked ~ .blog-filter-pills label[for="filter-weighbridge"] span, #filter-product:checked ~ .blog-filter-pills label[for="filter-product"] span { background: var(--brand-black); border-color: var(--brand-black); color: #fff; } #filter-wtn:checked ~ .blog-list .blog-card:not([data-cat="wtn"]), #filter-dwt:checked ~ .blog-list .blog-card:not([data-cat="dwt"]), #filter-ewc:checked ~ .blog-list .blog-card:not([data-cat="ewc"]), #filter-carrier:checked ~ .blog-list .blog-card:not([data-cat="carrier"]), #filter-weighbridge:checked ~ .blog-list .blog-card:not([data-cat="weighbridge"]), #filter-product:checked ~ .blog-list .blog-card:not([data-cat="product"]) { display: none; } /* ── Help article diagrams (inline SVG figures inside .article-body) ────── */ .article-body .help-diagram { margin: 1.75rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; } .article-body .help-diagram-scroll { overflow-x: auto; } .article-body .help-diagram svg { width: 100%; min-width: 560px; height: auto; display: block; } .article-body .help-diagram figcaption { margin-top: 0.85rem; font-size: 0.82rem; color: var(--muted); text-align: center; } @media (max-width: 640px) { .article-body .help-diagram { padding: 0.85rem; } } /* ── Help category landing pages ──────────────────────────────────────── */ .eyebrow-link { color: inherit; text-decoration: none; } .eyebrow-link:hover { text-decoration: underline; } .help-category-hero-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .help-category-hero-head .icon-badge { margin-bottom: 0; flex-shrink: 0; } .help-category-hero-head h1 { margin: 0; } .help-category-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; } .help-category-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } .help-category-pill svg { width: 0.9rem; height: 0.9rem; color: var(--accent); } .help-category-pill:hover { border-color: var(--accent); transform: translateY(-1px); } .help-category-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .help-category-card { display: block; padding: 1.75rem; border-radius: 16px; background: #fff; border: 1px solid var(--border); text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .help-category-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.15); } .help-category-card .icon-badge { margin-bottom: 1rem; } .help-category-card h3 { font-size: 1.15rem; margin: 0 0 0.4rem; } .help-category-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.85rem; } .help-category-card-count { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; } .cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--brand-black, #0a0a0a); color: #fff; padding: 1rem 1.5rem; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25); } .cookie-consent-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cookie-consent-inner p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); flex: 1 1 320px; } .cookie-consent-inner a { color: var(--brand-yellow, #e3ff1e); text-decoration: underline; } .cookie-consent-actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .cookie-consent-actions .btn { padding: 0.6rem 1.25rem; font-size: 0.85rem; } .cookie-consent-actions .btn-outline { border-color: rgba(255, 255, 255, 0.3); color: #fff; } .cookie-consent-actions .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); } @media (max-width: 640px) { .cookie-consent-inner { flex-direction: column; align-items: stretch; text-align: center; } .cookie-consent-inner p { flex-basis: auto; } .cookie-consent-actions { justify-content: center; } } /* ── Footer mobile breakpoint (prevents horizontal overflow: .footer-top's minmax(220px, 320px) first column and .footer-grid's minmax(150px, 1fr) auto-fit columns both have hard minimums that don't fit narrow viewports) ── */ @media (max-width: 640px) { .footer-top { grid-template-columns: 1fr; gap: 2.5rem; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Mobile nav breakpoint (kept last so it wins the cascade over the unconditional .site-nav ul / .site-nav-actions display rules above) ── */ @media (max-width: 960px) { .site-nav ul, .site-nav-actions { display: none; } .mobile-menu-button { display: flex; } .mobile-menu-checkbox:checked ~ .mobile-nav-panel { display: block; } }