/* Theme Name: GeneratePress Child Template: generatepress Version: 1.0 */ /* ============================================================ HostLatency homepage styles Add this to your child theme's style.css, OR enqueue it. All classes are prefixed hl- to avoid clashing with GeneratePress. Load the fonts by adding this to the page or theme : ============================================================ */ .hl-page{ --green:#15915F;--green-2:#1D9E75;--amber:#E08A1E;--red:#DA3F3F;--blue:#2E7BD6; --ink:#15171A;--ink-2:#3F454D;--ink-3:#6B727C;--line:#EAECEF;--line-2:#DCDFE4; --bg-soft:#F6F8F9;--bg-green:#E7F4EE;--green-tx:#0B5C3B;--bg-blue:#E9F1FB;--blue-tx:#1A4F87; --bg-amber:#FBEFD9;--amber-tx:#7A4A0E;--bg-coral:#FBEAE6;--coral-tx:#8A3520;--bg-purple:#EEEBFB;--purple-tx:#41359A; --disp:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --shadow:0 1px 2px rgba(20,23,26,0.04),0 4px 16px rgba(20,23,26,0.04); --nav-h:64px; font-family:var(--body);color:var(--ink);line-height:1.6; } .hl-wrap{max-width:1080px;margin:0 auto;padding:0 22px;} .hl-page a{color:inherit;text-decoration:none;} .hl-page h1,.hl-page h2,.hl-page h3{font-family:var(--disp);margin:0;letter-spacing:-0.02em;line-height:1.18;} .hl-page p{margin:0;} .hl-hero{padding:54px 0 26px;} .hl-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--green-tx);background:var(--bg-green);padding:6px 13px;border-radius:100px;margin-bottom:20px;} .hl-dot{width:7px;height:7px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 3px rgba(29,158,117,0.18);} .hl-hero h1{font-size:45px;font-weight:800;max-width:880px;} .hl-sub{font-size:18.5px;line-height:1.55;color:var(--ink-2);margin-top:18px;max-width:700px;} .hl-trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:24px;} .hl-trust span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-3);} .hl-tic{color:var(--green);font-size:9px;} .hl-intro{margin:30px 0 8px;font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:820px;} .hl-intro strong{color:var(--ink);font-weight:600;} .hl-toppick{margin:26px 0;border:1.5px solid rgba(21,145,95,0.35);background:linear-gradient(180deg,#F2FAF6,#FFF);border-radius:18px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;box-shadow:var(--shadow);} .hl-tp-l{display:flex;align-items:center;gap:18px;} .hl-tp-badge{flex-shrink:0;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--green);padding:7px 13px;border-radius:9px;} .hl-tp-name{font-family:var(--disp);font-weight:700;font-size:21px;display:flex;align-items:center;gap:8px;} .hl-tp-why{font-size:15px;color:var(--ink-2);margin-top:4px;} .hl-verified{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--green-tx);background:var(--bg-green);padding:3px 9px;border-radius:7px;} .hl-tp-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;font-weight:600;font-size:15px;padding:13px 24px;border-radius:12px;transition:transform .08s,background .12s;} .hl-tp-cta:hover{background:#127a50;transform:translateY(-1px);color:#fff;} .hl-lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap;} .hl-filters{display:flex;gap:8px;flex-wrap:wrap;} .hl-chip{font-size:13.5px;font-weight:500;padding:8px 15px;border-radius:100px;border:1.5px solid var(--line-2);color:var(--ink-2);background:#fff;cursor:pointer;transition:all .12s;} .hl-chip:hover{border-color:var(--ink-3);} .hl-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);} .hl-lb-note{font-size:13.5px;color:var(--ink-3);margin-bottom:12px;} .hl-tbl{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fff;} .hl-tbl table{width:100%;border-collapse:collapse;} .hl-tbl thead th{position:sticky;top:var(--nav-h);background:#fff;z-index:5;text-align:left;font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3);padding:14px 14px;border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line);} .hl-tbl tbody td{padding:18px 14px;border-bottom:1px solid var(--line);vertical-align:middle;} .hl-tbl tbody tr:last-child td{border-bottom:none;} .hl-tbl tbody tr.top{background:linear-gradient(90deg,rgba(21,145,95,0.05),rgba(21,145,95,0.01));box-shadow:inset 3px 0 0 var(--green);} .hl-tbl tbody tr:hover{background:var(--bg-soft);} .hl-rank{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink-3);} .hl-rank.g{color:var(--green);} .hl-pv{font-family:var(--disp);font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:6px;} .hl-chk{color:var(--green);font-size:13px;} .hl-pmeta{font-size:12.5px;color:var(--ink-3);margin-top:3px;} .hl-tag{display:inline-block;margin-top:7px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;} .hl-tag.green{color:var(--green-tx);background:var(--bg-green);} .hl-tag.blue{color:var(--blue-tx);background:var(--bg-blue);} .hl-tag.amber{color:var(--amber-tx);background:var(--bg-amber);} .hl-tag.coral{color:var(--coral-tx);background:var(--bg-coral);} .hl-tag.purple{color:var(--purple-tx);background:var(--bg-purple);} .hl-plan-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;padding:10px 16px;border-radius:11px;transition:transform .08s,background .12s;white-space:nowrap;} .hl-plan-btn.primary{background:var(--green);color:#fff;} .hl-plan-btn.primary:hover{background:#127a50;color:#fff;} .hl-plan-btn.solid{background:var(--ink);color:#fff;} .hl-plan-btn.solid:hover{background:#000;color:#fff;} .hl-support{font-size:12px;color:var(--ink-3);margin-top:7px;} .hl-price-main{font-weight:600;font-size:14.5px;} .hl-price-3{color:var(--ink-3);} .hl-ren{font-weight:500;} .hl-up{font-family:var(--disp);font-weight:700;font-size:16px;} .hl-up.g{color:var(--green);}.hl-up.a{color:var(--amber);} .hl-inc{font-size:12px;color:var(--ink-3);margin-top:2px;} .hl-inc.bad{color:var(--red);font-weight:500;} .hl-perf{display:flex;align-items:center;gap:10px;min-width:130px;} .hl-perf-num{font-family:var(--disp);font-weight:700;font-size:15px;min-width:46px;} .hl-track{flex:1;height:8px;background:#EDF0F2;border-radius:100px;overflow:hidden;} .hl-fill{height:100%;border-radius:100px;} .hl-fill.g{background:linear-gradient(90deg,#1D9E75,#15915F);} .hl-fill.a{background:linear-gradient(90deg,#F0A93A,#E08A1E);} .hl-fill.r{background:linear-gradient(90deg,#E8645F,#DA3F3F);} .hl-lock{color:var(--ink-3);font-size:16px;} .hl-disc{font-size:13px;color:var(--ink-3);margin-top:14px;line-height:1.6;} .hl-disc a{color:var(--blue);font-weight:500;} .hl-section{padding:40px 0;} .hl-s-head{font-size:26px;font-weight:700;margin-bottom:10px;} .hl-s-lead{font-size:16px;color:var(--ink-2);margin-bottom:24px;max-width:680px;line-height:1.6;} .hl-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .hl-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);} .hl-card h3{font-size:16.5px;font-weight:700;margin-bottom:8px;} .hl-card p{font-size:14.5px;color:var(--ink-2);line-height:1.65;} .hl-card a{color:var(--blue);} .hl-email{display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;flex-wrap:wrap;} .hl-gated{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;background:linear-gradient(135deg,#EAF2FC,#F4F8FD);border:1px solid #D6E5F7;border-radius:16px;flex-wrap:wrap;} .hl-gated h3{font-size:18px;font-weight:700;color:var(--blue-tx);margin-bottom:4px;} .hl-gated p{font-size:14.5px;color:#2C5F95;} .hl-btn-blue{background:var(--blue);color:#fff;font-weight:600;font-size:14.5px;padding:12px 22px;border-radius:12px;border:none;cursor:pointer;white-space:nowrap;font-family:var(--body);} .hl-btn-blue:hover{background:#256bbf;} .hl-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .hl-vcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);} .hl-vic{width:44px;height:44px;border-radius:12px;background:var(--bg-green);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:15px;} .hl-vcard h3{font-size:16.5px;font-weight:700;margin-bottom:7px;} .hl-vcard p{font-size:14.5px;color:var(--ink-2);line-height:1.6;} .hl-faq{border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);} .hl-faq details{border-bottom:1px solid var(--line);} .hl-faq details:last-child{border-bottom:none;} .hl-faq summary{padding:20px 22px;font-family:var(--disp);font-size:16.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;} .hl-faq summary::-webkit-details-marker{display:none;} .hl-faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-3);flex-shrink:0;} .hl-faq details[open] summary::after{content:"\2212";} .hl-a{padding:0 22px 20px;font-size:15px;color:var(--ink-2);line-height:1.65;max-width:780px;} @media (max-width:820px){ .hl-hero h1{font-size:32px;} .hl-sub{font-size:16.5px;} .hl-hero{padding:36px 0 20px;} .hl-toppick{flex-direction:column;align-items:stretch;gap:16px;} .hl-tp-cta{justify-content:center;} .hl-two,.hl-vgrid{grid-template-columns:1fr;} .hl-s-head{font-size:22px;} .hl-tbl thead{display:none;} .hl-tbl table,.hl-tbl tbody,.hl-tbl tr,.hl-tbl td{display:block;width:100%;} .hl-tbl tbody tr{padding:16px;border-bottom:8px solid var(--bg-soft);} .hl-tbl tbody tr.top{box-shadow:inset 4px 0 0 var(--green);} .hl-tbl tbody td{border:none;padding:5px 0;} .hl-tbl td[data-l]{display:flex;justify-content:space-between;align-items:center;gap:14px;} .hl-tbl td[data-l]::before{content:attr(data-l);font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.03em;} .hl-tbl td.cell-plan{display:block;margin-top:6px;} .hl-tbl td.cell-plan .hl-plan-btn{display:flex;justify-content:center;width:100%;font-size:15px;padding:13px;} .hl-tbl td.cell-prov::before{display:none;} .hl-perf{min-width:0;width:60%;} } @media (max-width:420px){.hl-hero h1{font-size:27px;}} @media (prefers-reduced-motion:reduce){.hl-page *{transition:none!important;}}