/* ===================================================== Product Data Scrape — MASTER SHARED STYLESHEET Single source of truth for ALL pages Save to: /assets/pds-styles.css Load in of every page: ===================================================== */ /* === DESIGN TOKENS === */ .compare-product-main { :root{ /* Neutrals */ --paper:#f4f6fa;--paper-2:#e9edf4;--ink:#15181f;--ink-soft:#5b6172; --cream:#fff;--line:#d9dfe9; /* Brand */ --accent:#2f6df6;--accent-d:#2156d4;--teal:#0e1a38; /* Semantic */ --red:#e23b52;--amber:#d98a13;--green:#1f9d57;--orange:#ff6a3d;--purple:#a855f7; /* Industry accents */ --c-beauty:#c54c8a;--c-toys:#f5a623;--c-sport:#00874c;--c-auto:#c9302c; --c-baby:#a3c5e8;--c-furn:#8b6f47;--c-pharma:#1f9d57;--c-appliance:#374151; --c-restaurant:#dc2626;--c-b2b:#1e40af;--c-pet:#f59e0b;--c-jewelry:#a855f7; --c-office:#3b82f6;--c-tools:#ea580c;--c-books:#7c3aed;--c-garden:#16a34a; /* Country accents */ --c-uae:#00732f;--c-au:#012169;--c-ca:#d80621;--c-de:#dd0000;--c-sg:#ed2e38; /* Marketplace accents */ --c-amazon:#ff9900;--c-walmart:#0071ce;--c-flipkart:#2874f0;--c-myntra:#ff3f6c; --c-meesho:#f43397;--c-blinkit:#f8cb46;--c-zepto:#7c3aed;--c-swiggy:#fc8019; /* Radius */ --r:14px;--r-sm:9px;--r-lg:18px; } /* === RESET === */ h1,h2,h3,h4,h5,h6{font-family:'Bricolage Grotesque',sans-serif;line-height:1.1;font-weight:700;letter-spacing:-.02em} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font-family:inherit;border:none;background:none;cursor:pointer} /* === LAYOUT === */ .wrap{max-width:1550px;margin:0 auto;padding:0 32px} section{position:relative} .sec{padding:74px 0} .sec-head{max-width:680px;margin-bottom:40px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head h2{font-size:clamp(27px,3.1vw,38px);margin:12px 0} .sec-head p{color:var(--ink-soft);font-size:16px} /* === TYPOGRAPHY === */ .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;text-transform:uppercase;font-size:12px;font-weight:500} .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--accent);margin-bottom:16px;font-family:'IBM Plex Mono';font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.04em} .eyebrow::before{content:"";width:24px;height:1.5px;background:var(--accent)} .eyebrow.center{justify-content:center} .eyebrow.center::after{content:"";width:24px;height:1.5px;background:var(--accent)} /* === BUTTONS === */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 24px;border-radius:999px;cursor:pointer;border:1.5px solid var(--ink);transition:all .15s;background:transparent;color:var(--ink);text-decoration:none;font-family:'IBM Plex Sans';white-space:nowrap} .btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} /* .btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff} */ .btn-light{background:#fff;border-color:#fff;color:var(--ink)} .btn-light:hover{transform:translateY(-2px)} .btn-ghost-light{background:transparent;color:#fff;border-color:#fff} .btn-ghost-light:hover{background:#fff;color:var(--ink)} .btn .arr{transition:transform .15s} .btn:hover .arr{transform:translateX(3px)} /* === HERO === */ .hero{padding:36px 0 60px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero h1{font-size:clamp(33px,4.2vw,50px)} .hero h1 .hl{position:relative;white-space:nowrap} .hero h1 .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:10px;background:var(--accent);opacity:.22;z-index:-1} .hero .sub{font-size:17.5px;color:var(--ink-soft);margin:20px 0 26px;max-width:520px} .hero-ctas{display:flex;gap:13px;flex-wrap:wrap} .trustline{margin-top:18px;font-size:13px;color:var(--ink-soft)} .trustline b{color:var(--ink);font-weight:600} /* === HERO VISUAL CARD === */ .viz-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 50px rgba(21,24,31,.13);overflow:hidden} .viz-bar{background:var(--ink);padding:13px 18px;display:flex;align-items:center;gap:8px} .viz-bar .d{width:10px;height:10px;border-radius:50%;background:#3a3f4d} .viz-bar .t{margin-left:8px;color:#cfd3db;font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.04em} .viz-bar .b{margin-left:auto;background:var(--accent);color:#fff;font-family:'IBM Plex Mono';font-size:9px;padding:3px 8px;border-radius:4px;font-weight:700;letter-spacing:.04em} .viz-body{padding:18px} /* === STRIP === */ .strip{background:var(--paper-2);border-bottom:1px solid var(--line)} .strip-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 0} .strip-card{background:var(--cream);border:1px solid var(--line);border-radius:11px;padding:18px} .strip-card .h{display:flex;align-items:center;gap:9px;margin-bottom:9px} .strip-card .fl{font-size:21px} .strip-card .cn{font-family:'Bricolage Grotesque';font-weight:700;font-size:15.5px} .strip-card .meta{font-size:12px;color:var(--ink-soft);line-height:1.7} .strip-card .meta b{color:var(--ink);font-weight:600} /* === DATA GRID === */ .data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .data-cell{background:var(--cream);padding:26px 24px} .data-cell .di{width:36px;height:36px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque';font-weight:800;font-size:13px;margin-bottom:10px} .data-cell h4{font-size:16px;margin-bottom:3px} .data-cell p{font-size:13.5px;color:var(--ink-soft);line-height:1.6} /* === SIGNALS === */ .signals{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .sig-cell{background:var(--cream);padding:26px 28px;display:flex;gap:16px} .sig-cell .mk{font-family:'Bricolage Grotesque';font-weight:800;font-size:14px;color:#fff;background:var(--accent);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .sig-cell h4{font-size:16.5px;margin-bottom:5px} .sig-cell p{font-size:14px;color:var(--ink-soft)} .sig-cell a{color:var(--accent);font-weight:600} .sig-cell a:hover{text-decoration:underline} /* === USE CASES === */ .uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .uc{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;border-left:3px solid var(--accent)} .uc h4{font-size:16.5px;margin-bottom:6px} .uc p{font-size:13.5px;color:var(--ink-soft)} /* === STEPS === */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .step{padding:28px 24px 0 0;border-top:2px solid var(--ink)} .step:not(:last-child){padding-right:28px} .step .n{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--accent);font-weight:600;margin-bottom:12px} .step h4{font-size:17px;margin-bottom:8px} .step p{font-size:14px;color:var(--ink-soft)} /* === FAQ === */ .faq{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .faq-list{max-width:100%;margin:0 auto} .qa{border-bottom:1px solid var(--line)} .qa:first-child{border-top:1px solid var(--line)} .qa-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 4px;display:flex;justify-content:space-between;gap:18px;align-items:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:17px;color:var(--ink)} .qa-q .pm{font-size:22px;color:var(--accent);transition:transform .2s;flex-shrink:0} .qa.open .pm{transform:rotate(45deg)} .qa-a{max-height:0;overflow:hidden;transition:max-height .28s} .qa-a p{padding:0 4px 22px;color:var(--ink-soft);font-size:15px;max-width:100%} /* === CTA BAND === */ .ctaband{background:var(--accent);color:#fff;text-align:center;padding:64px 0} .ctaband h2{font-size:clamp(28px,3.4vw,42px);color:#fff;max-width:720px;margin:0 auto 14px} .ctaband p{color:#dde9ff;max-width:560px;margin:0 auto 22px;font-size:16px} .ctaband .ctas{display:flex;gap:13px;justify-content:center;flex-wrap:wrap} /* === RESOURCE CARDS (resources page) === */ .res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:50px} .res-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;gap:22px;align-items:flex-start;color:var(--ink)} .res-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(21,24,31,.08);border-color:var(--accent)} .res-card .ic{width:56px;height:56px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque';font-weight:800;font-size:21px;color:#fff} .res-card .ic.blog{background:var(--accent)} .res-card .ic.case{background:var(--green)} .res-card .ic.research{background:var(--purple)} .res-card .ic.white{background:var(--ink)} .res-card .ic.info{background:var(--red)} .res-card .ic.video{background:var(--amber)} .res-card .ic.news{background:#00874c} .res-card .ic.tech{background:#c9302c} .res-card .ct{flex:1;min-width:0} .res-card .lbl{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:6px;display:block} .res-card h3{font-size:21px;margin-bottom:7px;line-height:1.2;color:var(--ink)} .res-card p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:11px} .res-card .arr-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13px;font-weight:600;font-family:'IBM Plex Mono';text-transform:uppercase;letter-spacing:.04em;transition:gap .15s} .res-card:hover .arr-link{gap:10px} /* === REVEAL ANIMATIONS === */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s} .reveal.in{opacity:1;transform:none} /* === RESPONSIVE === */ @media(max-width:1280px){.pds-link{padding:10px 11px;font-size:14px}.pds-items{gap:2px}} @media(max-width:1180px){.pds-link{padding:10px 9px;font-size:13.5px}} @media(max-width:1100px){.pds-items{display:none}.pds-mobile{display:flex}.pds-cta .btn:not(.btn-primary){display:none}} @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:34px}.strip-inner,.data-grid,.uc-grid{grid-template-columns:1fr 1fr}.sig-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr}.res-grid{grid-template-columns:1fr}} @media(max-width:600px){.wrap{padding:0 20px}.strip-inner,.data-grid,.uc-grid,.steps{grid-template-columns:1fr}.sec{padding:52px 0}.pds-logo-text i{display:none}.res-card{flex-direction:column}.foot-grid{grid-template-columns:1fr}} /* === INDUSTRY ACCENT OVERRIDES === */ .hero h1 .hl::after, .data-cell .di, .sig-cell .mk{background:var(--accent)} .uc{border-left-color:var(--c-beauty)} .hero h1 .hl::after, .data-cell .di, .sig-cell .mk{background:var(--accent)} .uc{border-left-color:var(--c-toys)} .hero h1 .hl::after, .data-cell .di, .sig-cell .mk{background:var(--accent)} .uc{border-left-color:var(--c-sport)} .hero h1 .hl::after, .data-cell .di, .sig-cell .mk{background:var(--accent)} .uc{border-left-color:var(--c-auto)} .hero h1 .hl::after, .data-cell .di, .sig-cell .mk{background:var(--accent)} .uc{border-left-color:var(--c-baby)} .hero h1 .hl::after, .data-cell .di, .sig-cell .mk{background:var(--accent)} .uc{border-left-color:var(--c-pet)} /* ===================================================== pds-compare.css Comparison page styles (vs Bright Data, vs Oxylabs, etc.) ===================================================== */ /* Comparison hero card */ .cmp-card .cmp-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.1fr; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; align-items: center; font-family: 'IBM Plex Mono'; font-size: 11.5px; } .cmp-card .cmp-row.hot { background: #f0f7ff; border-color: #b8d4ff; } .cmp-card .cmp-lbl { font-family: 'IBM Plex Sans'; font-weight: 600; color: var(--ink-soft); font-size: 11px; } .cmp-card .cmp-us { font-family: 'IBM Plex Sans'; color: var(--accent); font-weight: 600; } .cmp-card .cmp-them { font-family: 'IBM Plex Sans'; color: var(--ink-soft); font-size: 11px; } .cmp-card .cmp-legend { margin-top: 10px; font-family: 'IBM Plex Mono'; font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; text-align: center; } /* Side-by-side comparison table */ .cmp-table { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 12px 30px rgba(21,24,31,.06); } /* .cmp-table .cmp-thead { display: grid; grid-template-columns: 1.2fr 1.5fr 1.5fr; background: var(--ink); color: #fff; font-family: 'IBM Plex Mono'; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } */ .cmp-table .cmp-thead > div { padding: 14px 18px; } .cmp-table .cmp-th-us { background: var(--accent); } .table-scroll-main { overflow: scroll; white-space: nowrap; } /* .cmp-table .cmp-trow { display: grid; grid-template-columns: 1.2fr 1.5fr 1.5fr; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; } */ .cmp-table .cmp-trow > div { padding: 14px 18px; } .cmp-table .cmp-tcat { font-weight: 600; background: #fafbfc; color: var(--ink); } .cmp-table .cmp-tus { background: #f0f7ff; color: var(--ink); font-weight: 500; } .cmp-table .cmp-tthem { color: var(--ink-soft); } /* Mobile responsive */ @media (max-width: 720px) { .cmp-card .cmp-row { grid-template-columns: 1fr; gap: 4px; } .cmp-table .cmp-thead, .cmp-table .cmp-trow { /* grid-template-columns: 1fr; */ } .cmp-table .cmp-trow > div { padding: 10px 14px; } .cmp-table .cmp-tcat { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; padding-top: 14px; } .cmp-table .cmp-tus::before { content: "Product Data Scrape: "; font-weight: 700; color: var(--accent); } .cmp-table .cmp-tthem::before { content: "Other: "; font-weight: 700; color: var(--ink-soft); } } }