/* ============================================================ Khojdo Business Directory — design system Brand: green #86B817 · orange #FE8800 · ink #14141F ============================================================ */ :root{ --primary:#86B817; --primary-dark:#6E9A0F; --primary-soft:#F1F8E2; --secondary:#FE8800; --secondary-soft:#FFF3E3; --dark:#14141F; --body:#5B5B6B; --muted:#8D93A0; --line:#E7E8EC; --bg:#F7F8FA; --white:#fff; --ok:#0E8E4A; --warn:#B7791F; --err:#C0454F; --star:#F5A623; --wa:#25D366; --radius:14px; --shadow-sm:0 1px 2px rgba(20,20,31,.06),0 2px 8px rgba(20,20,31,.05); --shadow-md:0 4px 24px rgba(20,20,31,.09); --shadow-lg:0 18px 48px rgba(20,20,31,.14); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} body{font-family:'Heebo',system-ui,-apple-system,sans-serif;color:var(--body);background:var(--bg); font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden; /* nothing may push the page sideways */ -webkit-tap-highlight-color:rgba(134,184,23,.18); padding-bottom:env(safe-area-inset-bottom)} /* Kill the 300ms tap delay and stop iOS double-tap zoom on controls. */ a,button,.btn,input,select,textarea,label,summary{touch-action:manipulation} /* Every form control is at least 16px. Anything smaller and iOS Safari zooms the whole page the moment you tap it, and never zooms back out. Element selectors, so any later .btn / .btn-sm / .in rule still wins on size. */ input,select,textarea,button,optgroup,option{font-family:inherit;font-size:16px;line-height:1.4} /* Checkboxes and radios are boxes, not text - give them a real tap size. */ input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:0 0 18px;accent-color:var(--primary)} h1,h2,h3,h4,h5,h6{font-family:'Nunito',sans-serif;color:var(--dark);font-weight:800;line-height:1.25} a{color:inherit;text-decoration:none} img,svg{max-width:100%} .wrap{max-width:1200px;margin:0 auto;padding:0 20px} .sp{margin-left:auto} .muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center} .mt{margin-top:18px}.mb{margin-bottom:18px} /* ---------- topbar / header ---------- */ .topbar{background:var(--dark);color:#b9bdc7;font-size:12.5px} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:16px} header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100; padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} .nav{display:flex;align-items:center;gap:26px;height:74px} .nav .logo img{height:44px;display:block} .nav nav{display:flex;gap:22px;font-family:'Nunito';font-weight:700;font-size:15px;color:var(--dark)} .nav nav a{padding:4px 0;border-bottom:2px solid transparent} .nav nav a.act,.nav nav a:hover{color:var(--primary);border-color:var(--primary)} .umenu{position:relative} .umenu>span{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:'Nunito';font-weight:700;color:var(--dark);font-size:14.5px} .umenu .av{width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:grid;place-items:center;font-weight:800} .umenu .dd{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);min-width:196px;padding:6px;display:none;z-index:50} .umenu.open .dd{display:block} .umenu .dd a{display:block;padding:9px 12px;border-radius:8px;font-size:14px} .umenu .dd a:hover{background:var(--bg);color:var(--primary-dark)} .navauth{display:none} .burger{display:none;width:44px;height:44px;font-size:22px;background:none;border:0;cursor:pointer; color:var(--dark);border-radius:10px;margin-left:auto} .burger:active{background:var(--bg)} .navscrim{position:fixed;inset:0;background:rgba(20,20,31,.45);z-index:98;display:none} .navscrim.on{display:block} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Nunito';font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark)} .btn-orange{background:var(--secondary);color:#fff} .btn-orange:hover{filter:brightness(.94)} .btn-dark{background:var(--dark);color:#fff} .btn-wa{background:var(--wa);color:#fff} .btn-ghost{border-color:var(--line);color:var(--dark);background:#fff} .btn-ghost:hover{border-color:var(--primary);color:var(--primary)} .btn-danger{background:#fff;border-color:#f0c4c8;color:var(--err)} .btn-danger:hover{background:#fdf2f3} .btn-sm{padding:8px 14px;font-size:13.5px;border-radius:9px} .btn-xs{padding:5px 10px;font-size:12.5px;border-radius:7px} .btn-block{width:100%} .btn[disabled]{opacity:.5;pointer-events:none} /* ---------- alerts ---------- */ .alert{padding:12px 16px;border-radius:11px;font-size:14px;margin-bottom:14px;border:1px solid} .alert-ok{background:#f1f8e2;border-color:#d6e5ae;color:#4d6b0c} .alert-err{background:#fdf2f3;border-color:#f0c4c8;color:#9c3039} .alert-warn{background:#fff8ec;border-color:#f5ddb4;color:#8a5c11} .alert-info{background:#eef4fb;border-color:#cddff2;color:#2b5b90} /* ---------- hero + search ---------- */ .hero{position:relative;background:linear-gradient(120deg,#1b2410,#2f3d16 45%,#14141F);color:#fff;padding:74px 0 104px;overflow:hidden} .hero:before{content:"";position:absolute;inset:0;background:radial-gradient(900px 340px at 82% 8%,rgba(134,184,23,.34),transparent 62%),radial-gradient(620px 300px at 8% 92%,rgba(254,136,0,.26),transparent 60%)} .hero .wrap{position:relative} .hero.sm{padding:56px 0 64px;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#dff0b9;margin-bottom:16px} .hero h1{color:#fff;font-size:42px;max-width:16ch;letter-spacing:-.02em} .hero.sm h1{max-width:none;margin:0 auto} .hero h1 em{font-style:normal;color:var(--primary)} .hero .sub{color:#c8cdd6;max-width:58ch;margin-top:14px;font-size:16.5px} .hero.sm .sub{margin:14px auto 0} .searchbar{margin-top:32px;background:#fff;border-radius:16px;padding:10px;display:grid;grid-template-columns:1.4fr 1fr auto;gap:8px;box-shadow:var(--shadow-lg)} .searchbar.flat{box-shadow:var(--shadow-sm);border:1px solid var(--line);margin:0 0 20px} .sfield{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:11px} .sfield+.sfield{border-left:1px solid var(--line)} .sfield .ic{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);font-size:15px} .sfield .fl{flex:1;min-width:0} .sfield label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-family:'Nunito'} .sfield input,.sfield select{border:0;outline:0;background:none;font-family:'Heebo';font-size:16px; color:var(--dark);width:100%;-webkit-appearance:none;appearance:none} .searchbar .btn{border-radius:11px;padding:0 30px;font-size:16px} .trending{margin-top:16px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:#a8aeb9} .trending a{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);padding:5px 13px;border-radius:999px;color:#e6e9ee;font-size:13px} .trending a:hover{background:var(--primary);border-color:var(--primary)} .statstrip{position:relative;margin-top:-46px;z-index:5} .statstrip .in{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);display:grid;grid-template-columns:repeat(4,1fr);text-align:center} .statstrip .s{padding:22px 10px} .statstrip .s+.s{border-left:1px solid var(--line)} .statstrip b{display:block;font-family:'Nunito';font-size:26px;color:var(--dark)} .statstrip span{font-size:13px;color:var(--muted)} /* ---------- sections ---------- */ section.pad{padding:60px 0} section.tight{padding-top:0} section.white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px} .kicker{font-family:'Nunito';font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);margin-bottom:8px} .sechead h2{font-size:29px;letter-spacing:-.01em} .link-more{font-family:'Nunito';font-weight:700;color:var(--primary-dark);font-size:14.5px;white-space:nowrap} /* ---------- category tiles ---------- */ .cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 14px;text-align:center;transition:.22s} .cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d6e5ae} .cat .ic{width:52px;height:52px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);font-size:23px} .cat:nth-child(even) .ic{background:var(--secondary-soft)} .cat h4{font-size:14.5px} .cat span{font-size:12.5px;color:var(--muted)} /* ---------- listing cards ---------- */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.22s;display:flex;flex-direction:column} .card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)} .thumb{height:168px;position:relative;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,#e9f1d4,#d7e7b2);overflow:hidden} .thumb img{width:100%;height:100%;object-fit:cover} .thumb.t2{background:linear-gradient(135deg,#ffe9cc,#ffd7a6)} .thumb.t3{background:linear-gradient(135deg,#dbe7f5,#c3d6ee)} .thumb.t4{background:linear-gradient(135deg,#f4dfe8,#ecc6d7)} .thumb.t5{background:linear-gradient(135deg,#dff0ec,#bfe0d8)} .thumb.t6{background:linear-gradient(135deg,#ece3f7,#d8c9ee)} .badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap} .badge{font-family:'Nunito';font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:7px;background:#fff;color:var(--dark);box-shadow:var(--shadow-sm);display:inline-block} .badge.feat{background:var(--secondary);color:#fff} .badge.ver{background:var(--primary);color:#fff} .badge.open{background:var(--ok);color:#fff} .badge.shut{background:var(--muted);color:#fff} .badge.pend{background:#fff8ec;color:var(--warn);border:1px solid #f5ddb4;box-shadow:none} .badge.rej{background:#fdf2f3;color:var(--err);border:1px solid #f0c4c8;box-shadow:none} .badge.appr{background:var(--primary-soft);color:#4d6b0c;border:1px solid #d6e5ae;box-shadow:none} .badge.unclaimed{background:#eef0f4;color:#5b6270;border:1px solid #dfe3ea;box-shadow:none} .badge.plain{background:#fff;color:var(--muted);border:1px solid var(--line);box-shadow:none} .card .bd{padding:16px 16px 0;flex:1} .card h3{font-size:17px} .cat-line{font-size:13px;color:var(--secondary);font-weight:600;margin-top:2px} .rating{display:flex;align-items:center;gap:7px;margin:9px 0;flex-wrap:wrap} .stars{color:var(--star);font-size:13px;letter-spacing:1px} .score{background:var(--primary);color:#fff;font-family:'Nunito';font-weight:800;font-size:12.5px;padding:2px 8px;border-radius:6px} .rating small{color:var(--muted);font-size:12.5px} .meta{font-size:13.5px;color:#7b8190;display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .tag{font-size:11.5px;background:var(--bg);border:1px solid var(--line);color:#6b7180;padding:3px 9px;border-radius:6px} .card .ft{border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:8px} .card .ft .btn{flex:1} .tick{color:var(--primary);font-size:13px} /* ---------- steps / cities / band ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative} .step .n{position:absolute;top:22px;right:24px;font-family:'Nunito';font-weight:900;font-size:44px;color:#f0f2f5;line-height:1} .step .ic{width:52px;height:52px;border-radius:14px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:16px} .step:nth-child(2) .ic{background:var(--secondary)} .step:nth-child(3) .ic{background:var(--dark)} .step h4{font-size:18px;margin-bottom:6px} .cities{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .city{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;font-family:'Nunito';font-weight:700;color:var(--dark);font-size:15px} .city span{font-family:'Heebo';font-weight:400;font-size:12.5px;color:var(--muted)} .city:hover{border-color:var(--primary);color:var(--primary-dark)} .band{background:linear-gradient(115deg,var(--dark),#23233a);border-radius:18px;padding:44px;display:flex;align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden} .band:before{content:"";position:absolute;right:-60px;top:-80px;width:340px;height:340px;background:radial-gradient(circle,rgba(134,184,23,.4),transparent 65%)} .band h2{color:#fff;font-size:27px;position:relative} .band p{color:#b8bdc8;margin-top:8px;max-width:52ch;position:relative} .band .acts{display:flex;gap:12px;position:relative} .band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)} /* ---------- search results ---------- */ .crumb{font-size:13px;color:var(--muted);padding:16px 0} .crumb a:hover{color:var(--primary)} .res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:20px 0} .res-head h1{font-size:26px} .reslayout{display:grid;grid-template-columns:272px 1fr;gap:24px;align-items:start;padding-bottom:60px} .filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);position:sticky;top:94px} .fgroup{padding:18px;border-bottom:1px solid var(--line)} .fgroup:last-child{border-bottom:0} .fgroup h5{font-family:'Nunito';font-weight:800;font-size:14px;color:var(--dark);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center} .fgroup h5 a{font-weight:600;font-size:12.5px;color:var(--secondary)} .chk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;cursor:pointer} .chk input{accent-color:var(--primary);width:18px;height:18px} .chk .ct{margin-left:auto;font-size:12px;color:#aeb3bd} .pills{display:flex;gap:7px;flex-wrap:wrap} .pill{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;background:#fff} .pill.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark);font-weight:600} .rowcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:200px 1fr 200px;overflow:hidden;margin-bottom:16px;transition:.2s} .rowcard:hover{box-shadow:var(--shadow-md)} .rowcard.promo{border-color:#ffd9a8;box-shadow:0 0 0 3px #fff6e9} .rowcard .ph{position:relative;display:grid;place-items:center;font-size:40px;background:linear-gradient(135deg,#e9f1d4,#d7e7b2);overflow:hidden} .rowcard .ph img{width:100%;height:100%;object-fit:cover} .rowcard .info{padding:18px 20px} .rowcard .side{border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:8px; justify-content:center;background:#fcfcfd;height:auto;position:static;overflow:visible} .rowcard h3{font-size:18px} .resp{font-size:12px;color:var(--ok);font-weight:600} .phone{font-family:'Nunito';font-weight:900;font-size:19px;color:var(--dark)} .pagin{display:flex;gap:6px;justify-content:center;margin-top:24px} .pagin a{min-width:38px;height:38px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;font-family:'Nunito';font-weight:700;font-size:14px} .pagin a.on{background:var(--primary);border-color:var(--primary);color:#fff} .empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:44px;text-align:center} .empty .big{font-size:38px;margin-bottom:10px} /* ---------- listing detail ---------- */ .cover{height:270px;position:relative;background:linear-gradient(135deg,#d7e7b2,#b9d382 55%,#e6d0a8);display:grid;place-items:center;font-size:74px;overflow:hidden} .cover img{width:100%;height:100%;object-fit:cover} .dlayout{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;margin-top:-56px;position:relative;padding-bottom:60px} .panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:18px} .panel h3.ph{font-size:18px;margin-bottom:12px} .bizhead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .logo-sq{width:76px;height:76px;flex:0 0 76px;border-radius:16px;background:var(--primary-soft);display:grid;place-items:center;font-size:32px;border:1px solid var(--line);overflow:hidden} .logo-sq img{width:100%;height:100%;object-fit:cover} .bizhead h1{font-size:26px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .kv{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px} .kv div{display:flex;gap:10px;font-size:14px;padding:10px 12px;background:var(--bg);border-radius:10px} .kv b{font-family:'Nunito';color:var(--dark);font-weight:700} .svclist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .svc{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:12px;border:1px solid var(--line);border-radius:10px} .svc .d{color:var(--primary);font-weight:700} .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .gallery a{display:block;border-radius:10px;overflow:hidden;height:110px;background:var(--bg)} .gallery img{width:100%;height:100%;object-fit:cover} .rsum{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:center;background:var(--bg);border-radius:12px;padding:20px;margin-bottom:18px} .rsum .big b{font-family:'Nunito';font-size:46px;color:var(--dark);display:block;line-height:1} .rsum .big{text-align:center} .bar{display:flex;align-items:center;gap:10px;font-size:12.5px;margin:5px 0} .bar .t{width:34px;color:var(--muted)} .bar .tr{flex:1;height:7px;background:#e6e8ec;border-radius:99px;overflow:hidden} .bar .fl{height:100%;background:var(--star)} .review{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line)} .av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--secondary-soft);display:grid;place-items:center;font-family:'Nunito';font-weight:800;color:var(--secondary)} .review h5{font-family:'Nunito';font-size:15px;color:var(--dark)} .review .when{font-size:12.5px;color:#a3a8b3} .owner-reply{margin-top:10px;padding:10px 12px;background:var(--bg);border-radius:9px;font-size:13.5px} .sticky{position:sticky;top:94px} .actcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm)} .actcard h4{font-size:16px;margin-bottom:10px} .fine{font-size:12px;color:#a3a8b3;text-align:center;margin-top:10px} .trust{display:flex;gap:10px;font-size:13px;padding:9px 0;border-top:1px solid var(--line)} .trust:first-of-type{border:0} .trust .i{color:var(--primary)} .hours .r{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px} .hours .r:last-child{border:0} /* ---------- forms ---------- */ .field{margin-bottom:14px} .field label{display:block;font-family:'Nunito';font-weight:700;font-size:13.5px;color:var(--dark);margin-bottom:6px} .field label .req{color:var(--err)} .in,select.in,textarea.in{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 13px; font-family:'Heebo';font-size:16px; /* 16px or iOS Safari zooms on focus */ color:var(--dark);background:#fff;outline:0;transition:.15s;-webkit-appearance:none;appearance:none} select.in{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238D93A0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:34px} .in:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)} textarea.in{resize:vertical;min-height:90px} /* A tighter control for inline table actions. Padding shrinks, the 16px text does not - anything smaller and iOS zooms the page the moment it is tapped. */ .in.in-compact{padding:7px 9px;border-radius:8px} select.in.in-compact{padding-right:28px;background-position:right 9px center} .hint{font-size:12.5px;color:var(--muted);margin-top:5px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;max-width:520px;margin:0 auto} .formcard.wide{max-width:none} .formcard h1{font-size:24px;margin-bottom:4px} .fsec{border-top:1px solid var(--line);margin:22px 0 16px;padding-top:18px} .fsec:first-of-type{border:0;margin-top:0;padding-top:0} .fsec h3{font-size:16px;margin-bottom:12px} .roletabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .roletab{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;font-family:'Nunito';font-weight:700;font-size:14px;color:var(--dark);background:#fff} .roletab small{display:block;font-family:'Heebo';font-weight:400;font-size:12px;color:var(--muted);margin-top:3px} .roletab.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark)} .setstars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;font-size:27px;color:#dcdfe5;margin-bottom:10px} .setstars input{display:none} .setstars label{cursor:pointer;line-height:1} .setstars input:checked ~ label,.setstars label:hover,.setstars label:hover ~ label{color:var(--star)} /* ---------- plans ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start} .plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;position:relative} .plan.best{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)} .plan .rib{position:absolute;top:-13px;left:28px;background:var(--secondary);color:#fff;font-family:'Nunito';font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:7px} .plan h3{font-size:19px} .plan .pr{font-family:'Nunito';font-weight:900;font-size:36px;color:var(--dark);margin:12px 0 2px} .plan .pr span{font-size:14px;font-weight:700;color:var(--muted)} .plan ul{list-style:none;margin:18px 0} .plan li{padding:8px 0;font-size:14px;display:flex;gap:10px;border-bottom:1px dashed var(--line)} .plan li:last-child{border:0} .plan li .y{color:var(--primary);font-weight:800} .plan li .n{color:#c9ced7;font-weight:800} /* ---------- blog ---------- */ .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.22s} .pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)} .pcard .im{height:172px;background:linear-gradient(135deg,#e9f1d4,#d7e7b2);display:grid;place-items:center;font-size:36px;overflow:hidden} .pcard .im img{width:100%;height:100%;object-fit:cover} .pcard .bd{padding:18px;flex:1;display:flex;flex-direction:column} .pcard h3{font-size:18px;margin:8px 0} .pcard .bd p{font-size:14px;flex:1} .pcard .pm{font-size:12.5px;color:var(--muted);margin-top:12px;display:flex;gap:10px} .chipcat{font-family:'Nunito';font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)} .article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;max-width:820px;margin:0 auto} .article h1{font-size:33px;margin-bottom:10px;line-height:1.2} .article .lead{font-size:17px;color:#6b7180;margin:14px 0 22px} .article .body{font-size:16px;line-height:1.8} .article .body p{margin-bottom:16px} .article .body h2{font-size:23px;margin:28px 0 12px} .article .body h3{font-size:19px;margin:22px 0 10px} .article .body ul,.article .body ol{margin:0 0 16px 22px} .article .body li{margin-bottom:7px} .article .body img{border-radius:12px;margin:14px 0} .article .cov{height:320px;border-radius:12px;overflow:hidden;margin-bottom:22px;background:var(--bg)} .article .cov img{width:100%;height:100%;object-fit:cover} /* ---------- panel (admin / provider / user) ---------- */ /* min-width:0 or the grid column grows to the widest table and drags the whole panel - sidebar included - off the right edge of a phone. */ .panel-wrap{display:grid;grid-template-columns:238px 1fr;min-height:100vh;background:var(--bg)} .panel-wrap > *{min-width:0} .main{min-width:0;overflow-x:clip} /* The dashboard sidebar. Every rule here is scoped to .panel-wrap on purpose: a bare .side also matched the right-hand column of a search result card, and height:100vh made every result 900px tall on desktop. */ .panel-wrap .side{background:var(--dark);color:#aeb3bd;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto} .panel-wrap .side .brand{display:block;margin:6px 8px 20px} .panel-wrap .side .brand img{height:38px} .panel-wrap .side .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b7180;padding:14px 12px 6px;font-family:'Nunito';font-weight:800} .panel-wrap .side a.nv{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;font-family:'Nunito';font-weight:600;margin-bottom:2px} .panel-wrap .side a.nv:hover{background:rgba(255,255,255,.07);color:#fff} .panel-wrap .side a.nv.on{background:var(--primary);color:#fff} .panel-wrap .side a.nv .cnt{margin-left:auto;background:var(--secondary);color:#fff;font-size:11px;padding:1px 7px;border-radius:99px} .main{padding:0 0 40px} .topline{background:#fff;border-bottom:1px solid var(--line);padding:16px 26px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20} .topline h1{font-size:20px} .inner{padding:24px 26px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px} .stat b{display:block;font-family:'Nunito';font-size:28px;color:var(--dark);line-height:1.2} .stat span{font-size:13px;color:var(--muted)} .stat.alert-stat{border-color:#f5ddb4;background:#fffaf1} table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} table.tbl th{text-align:left;font-family:'Nunito';font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:12px 14px;background:#fbfbfc;border-bottom:1px solid var(--line)} table.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle} table.tbl tr:last-child td{border-bottom:0} table.tbl tr:hover td{background:#fcfdfa} .tbl .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .tabsrow{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap} .tabsrow a{padding:8px 14px;border-radius:9px;font-family:'Nunito';font-weight:700;font-size:13.5px;background:#fff;border:1px solid var(--line);color:var(--dark)} .tabsrow a.on{background:var(--dark);border-color:var(--dark);color:#fff} .split{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start} /* ---------- footer ---------- */ footer.site{background:var(--dark);color:#9aa0ad;padding:52px 0 0;font-size:14px} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr 1.2fr;gap:28px;padding-bottom:34px} footer.site h5{color:#fff;font-family:'Nunito';font-size:16px;margin-bottom:14px} footer.site a{display:block;padding:5px 0} footer.site a:hover{color:var(--primary)} footer.site .logo img{height:42px;margin-bottom:12px} .fbot{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px} /* ---------- homepage v2: quote CTA, link cloud, Mithila band ---------- */ .herocta{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .herocta .muted{color:#aeb4c0;font-size:13.5px;max-width:44ch} .steps.steps4{grid-template-columns:repeat(4,1fr)} .linkcloud{display:flex;flex-wrap:wrap;gap:9px} .linkcloud a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px; font-size:13.5px;color:var(--dark);transition:.15s} .linkcloud a:hover{border-color:var(--primary);color:var(--primary-dark);background:var(--primary-soft)} .mithila-band{background:linear-gradient(180deg,#FFF9F0,#fff)} .mithgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .mtile{background:#fff;border:1px solid #F0E2CC;border-radius:14px;padding:20px;display:block;transition:.18s} .mtile:hover{border-color:var(--secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)} .mtile span{font-size:30px;display:block;margin-bottom:10px} .mtile b{display:block;font-family:'Nunito';font-size:15.5px;color:var(--dark)} .mtile small{color:var(--muted);font-size:13px} /* ---------- quote / lead flow ---------- */ .qsteps{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap} .qstep{flex:1;min-width:150px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;font-size:13.5px} .qstep b{display:block;font-family:'Nunito';color:var(--dark);font-size:14px} .qstep.on{border-color:var(--primary);background:var(--primary-soft)} .matchlist{display:grid;gap:10px;margin:16px 0} .matchrow{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px} .matchrow .ic{width:44px;height:44px;flex:0 0 44px;border-radius:11px;background:var(--primary-soft);display:grid;place-items:center;font-size:20px} .matchrow b{font-family:'Nunito';color:var(--dark);display:block} .matchrow small{color:var(--muted)} /* ---------- trust / verification ---------- */ .subratings{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:14px 0} .subrating{display:flex;align-items:center;gap:10px;font-size:13.5px} .subrating .lab{flex:1;color:var(--body)} .subrating .bar{flex:0 0 96px;height:7px;border-radius:99px;background:#eceef2;overflow:hidden;display:block;margin:0} .subrating .bar i{display:block;height:100%;background:var(--primary);border-radius:99px} .subrating .v{font-family:'Nunito';font-weight:800;color:var(--dark);width:26px;text-align:right} .vcheck{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px} .vcheck:last-child{border-bottom:0} .vcheck .tick{color:var(--primary);font-weight:800} .vcheck .cross{color:var(--muted);font-weight:800} .vcust{display:inline-block;background:var(--primary-soft);color:#4d6b0c;border:1px solid #d6e5ae; font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;margin-left:6px} /* ---------- marketplace ---------- */ .artgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .artcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block;transition:.18s} .artcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .artcard .im{height:220px;background:var(--primary-soft);display:grid;place-items:center;font-size:46px;overflow:hidden} .artcard .im img{width:100%;height:100%;object-fit:cover} .artcard .bd{padding:14px} .artcard h3{font-size:15.5px;margin-bottom:3px} .artcard .by{font-size:13px;color:var(--muted)} .artcard .pr{font-family:'Nunito';font-weight:900;color:var(--dark);font-size:18px;margin-top:8px} .artcard .sold{background:var(--muted);color:#fff;font-size:11px;padding:3px 8px;border-radius:6px} /* ---------- responsive ---------- */ @media(max-width:1020px){ .cats{grid-template-columns:repeat(3,1fr)} .steps.steps4{grid-template-columns:1fr 1fr} .mithgrid{grid-template-columns:1fr 1fr} .artgrid{grid-template-columns:repeat(3,1fr)} .grid3,.steps,.plans,.bloggrid{grid-template-columns:1fr 1fr} .plans.plans4{grid-template-columns:1fr 1fr} .cities{grid-template-columns:repeat(3,1fr)} .reslayout,.dlayout,.split{grid-template-columns:1fr} .filters{position:static} .rowcard{grid-template-columns:170px 1fr} .rowcard .side{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap} .rowcard .side .btn{flex:1} .burger{display:grid;place-items:center} .nav nav{display:none} .nav > .btn, .nav .umenu, .nav .sp{display:none} /* they live in the drawer on mobile */ .navauth{display:block;margin-top:10px;padding-top:10px;border-top:2px solid var(--line)} .navauth a{display:block;padding:15px 4px;border-bottom:1px solid var(--line); font-family:'Nunito';font-weight:700;font-size:16.5px;color:var(--dark)} .navauth a:last-child{border-bottom:0} .navauth .drawer-cta{color:#fff;background:var(--secondary);border-radius:10px;text-align:center; margin-top:12px;border-bottom:0;padding:14px} .panel-wrap{grid-template-columns:1fr} .panel-wrap .side{position:static;height:auto} .stats{grid-template-columns:1fr 1fr} /* --- slide-in drawer instead of a dropdown that pushes content --- */ .nav nav.open{ display:flex;flex-direction:column;gap:0; position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px);z-index:99; background:#fff;padding:18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:-12px 0 40px rgba(20,20,31,.22); overflow-y:auto;-webkit-overflow-scrolling:touch; animation:drawer .22s ease-out} @keyframes drawer{from{transform:translateX(100%)}to{transform:translateX(0)}} .nav nav.open a{padding:15px 4px;border-bottom:1px solid var(--line);border-top:0;font-size:16.5px} .nav nav.open a:last-child{border-bottom:0} } @media(max-width:720px){ .wrap{padding:0 16px} .steps.steps4{grid-template-columns:1fr} .plans.plans4{grid-template-columns:1fr} .cycletoggle{width:100%} .cycletoggle a{flex:1;justify-content:center} .mithgrid{grid-template-columns:1fr 1fr} .artgrid{grid-template-columns:1fr 1fr} .subratings{grid-template-columns:1fr} .herocta{flex-direction:column;align-items:stretch} .herocta .btn{width:100%} .herocta .muted{text-align:center} section.pad{padding:40px 0} .hero{padding:44px 0 74px} .hero.sm{padding:38px 0 42px} .hero h1{font-size:28px;line-height:1.2} .hero .sub{font-size:15.5px} .sechead{flex-direction:column;align-items:flex-start;gap:8px} .sechead h2{font-size:23px} .searchbar{grid-template-columns:1fr;padding:8px;gap:0;margin-top:24px} .sfield+.sfield{border-left:0;border-top:1px solid var(--line)} .searchbar .btn{padding:14px;margin-top:8px;width:100%} .statstrip{margin-top:-34px} .statstrip .in{grid-template-columns:1fr 1fr} .statstrip .s{padding:16px 8px} .statstrip b{font-size:22px} .statstrip .s:nth-child(3),.statstrip .s:nth-child(4){border-top:1px solid var(--line)} .statstrip .s:nth-child(3){border-left:0} .cats{grid-template-columns:1fr 1fr;gap:10px} .cat{padding:16px 10px} .cat .ic{width:44px;height:44px;font-size:20px;margin-bottom:8px} .cat h4{font-size:13.5px} .grid3,.steps,.plans,.cities,.kv,.svclist,.bloggrid,.row2,.row3,.rsum{grid-template-columns:1fr} .rowcard{grid-template-columns:1fr} .rowcard .ph{height:170px} .gallery{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:1fr 1fr;gap:22px} .topbar{display:none} .band{padding:24px;text-align:center} .band .acts{width:100%;flex-direction:column} .band .acts .btn{width:100%} .article{padding:20px} .article h1{font-size:25px} .stats{grid-template-columns:1fr 1fr} .stat b{font-size:22px} .inner,.topline{padding-left:16px;padding-right:16px} /* every table in the panels scrolls sideways instead of breaking the page */ table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} table.tbl td,table.tbl th{white-space:normal;min-width:88px} /* thumb-friendly hit areas - 44px is the Apple/Google minimum */ .btn{min-height:44px;padding:12px 18px} .btn-sm{min-height:40px} .btn-xs{min-height:38px;padding:8px 12px;font-size:12.5px} .pagin a{min-width:44px;height:44px} .chk{padding:9px 0} .pill{padding:9px 15px} .umenu .dd a{padding:13px 12px} /* stack the card footer buttons so neither is a sliver */ .card .ft{flex-direction:column} .card .ft .btn{width:100%} /* the detail page rail comes after the content, not squeezed beside it */ .dlayout{margin-top:-24px} .cover{height:190px;font-size:54px} .bizhead h1{font-size:22px} .panel{padding:18px} .sticky{position:static} /* leave room for the fixed action bar */ body.has-actionbar{padding-bottom:calc(76px + env(safe-area-inset-bottom))} } /* ---------- mobile action bar: call / whatsapp always in reach ---------- */ .actionbar{display:none} @media(max-width:720px){ .actionbar{ display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:95; background:#fff;border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(20,20,31,.1)} .actionbar .btn{flex:1;min-height:46px} } /* ---------- collapsible filters on small screens ---------- */ .filtertoggle{display:none} @media(max-width:1020px){ .filtertoggle{display:flex;width:100%;margin-bottom:12px} .filters{display:none} .filters.open{display:block} } /* ---------- respect reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important; scroll-behavior:auto !important} } /* starting price on a business profile */ .startprice{margin-top:10px;display:inline-block;background:var(--secondary-soft);border:1px solid #F5D9B4; color:#8a5c11;border-radius:9px;padding:6px 12px;font-size:13.5px} .startprice b{font-family:'Nunito';font-size:16px;color:var(--dark)} /* SEO landing page intro copy */ .seointro{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:20px;font-size:14.5px} .seointro p+p{margin-top:10px} .seointro a{color:var(--primary-dark);font-weight:600} .reslayout.single{grid-template-columns:1fr} /* ---------- booking slot picker ---------- */ .slotdays{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch} .slotday{flex:0 0 auto} .slotday input{position:absolute;opacity:0;width:0;height:0} .slotday span{display:block;min-width:66px;text-align:center;border:1px solid var(--line);border-radius:11px; padding:10px 12px;font-size:13px;color:var(--body);background:#fff;cursor:pointer} .slotday span b{display:block;font-family:'Nunito';font-size:14px;color:var(--dark)} .slotday input:checked+span{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark)} .slottimes{display:flex;flex-wrap:wrap;gap:8px} .slottime input{position:absolute;opacity:0;width:0;height:0} .slottime span{display:block;border:1px solid var(--line);border-radius:9px;padding:10px 14px;font-size:14px; background:#fff;color:var(--dark);cursor:pointer;min-height:44px;display:flex;align-items:center} .slottime input:checked+span{border-color:var(--primary);background:var(--primary);color:#fff} /* ---------- tiny bar chart, no library ---------- */ .spark{display:flex;align-items:flex-end;gap:2px;height:150px;margin:14px 0 10px; border-bottom:1px solid var(--line);padding-bottom:2px} .spark .col{flex:1;min-width:3px;height:100%;display:flex;align-items:flex-end;gap:1px;position:relative} .spark .col span{flex:1;border-radius:2px 2px 0 0;min-height:1px;display:block} .spark .col .v{background:#dfe6ef} .spark .col .c{background:var(--primary)} .sparkkey{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);align-items:center} .sparkkey i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px} .sparkkey i.v{background:#dfe6ef} .sparkkey i.c{background:var(--primary)} /* ---------- pricing: cycle toggle, four plans, FAQ ---------- */ .cycletoggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:24px} .cycletoggle a{padding:9px 20px;border-radius:999px;font-family:'Nunito';font-weight:700;font-size:14px;color:var(--body);min-height:40px;display:flex;align-items:center;gap:7px} .cycletoggle a.on{background:var(--primary);color:#fff} .cycletoggle a em{font-style:normal;font-size:11.5px;font-weight:700;background:var(--secondary-soft);color:#8a5c11;padding:2px 8px;border-radius:99px} .cycletoggle a.on em{background:rgba(255,255,255,.22);color:#fff} .plans.plans4{grid-template-columns:repeat(4,1fr)} .plans.plans4 .plan{padding:24px 20px} .plans.plans4 .plan .pr{font-size:31px} .faq{display:grid;gap:10px;max-width:820px} .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px} .faq summary{font-family:'Nunito';font-weight:700;color:var(--dark);cursor:pointer;font-size:15px;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary:before{content:"+";color:var(--primary);font-weight:900;margin-right:10px} .faq details[open] summary:before{content:"\2212"} .faq p{margin-top:10px;font-size:14.5px} /* ---------- responsive overrides for the blocks defined above ---------- These sit at the end of the file on purpose: the rules they override were added after the main responsive section, so equal-specificity rules only win from here. */ @media(max-width:1020px){ .plans.plans4{grid-template-columns:1fr 1fr} } @media(max-width:720px){ .plans.plans4{grid-template-columns:1fr} .cycletoggle{display:flex;width:100%} .cycletoggle a{flex:1;justify-content:center;padding:9px 10px} .spark{height:110px} } /* A checkbox is tapped through its label, so the label is what needs the height. The box itself still grows a little on touch screens. */ @media(max-width:720px){ label.chk{min-height:44px;align-items:center} label.chk input[type=checkbox],label.chk input[type=radio]{width:22px;height:22px;flex:0 0 22px} } /* ---------- all-categories page ---------- */ .groupjump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .groupjump a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px; font-size:13.5px;color:var(--dark);min-height:38px;display:inline-flex;align-items:center;gap:6px} .groupjump a:hover{border-color:var(--primary);color:var(--primary-dark);background:var(--primary-soft)} .catgroup{margin-bottom:30px;scroll-margin-top:90px} .catgroup-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap} .catgroup-head .gi{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--primary-soft); display:grid;place-items:center;font-size:22px} .catgroup-head h2{font-size:20px} .catgroup-head .link-more{margin-left:auto} .catlinks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .catlinks a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line); border-radius:11px;padding:11px 13px;font-size:14px;color:var(--dark);min-height:48px;transition:.15s} .catlinks a:hover{border-color:var(--primary);background:var(--primary-soft)} .catlinks a.empty{color:var(--muted);background:#fbfbfc} .catlinks .ic{font-size:17px;flex:0 0 auto;line-height:1} .catlinks .nm{flex:1;min-width:0;line-height:1.3} .catlinks .ct{font-size:12px;color:var(--muted);background:var(--bg);border-radius:99px;padding:2px 8px;flex:0 0 auto} @media(max-width:1020px){ .catlinks{grid-template-columns:repeat(2,1fr)} } @media(max-width:720px){ .catlinks{grid-template-columns:1fr} .catgroup-head .link-more{margin-left:0;width:100%} .groupjump{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px} .groupjump a{flex:0 0 auto} } /* ---------- daily needs strip ---------- */ .dailystrip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px} .dailystrip a{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 10px; text-align:center;transition:.16s;min-height:96px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:7px} .dailystrip a:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-2px)} .dailystrip span{font-size:26px;line-height:1} .dailystrip b{font-family:'Nunito';font-weight:700;font-size:12.5px;color:var(--dark);line-height:1.25} @media(max-width:1020px){ .dailystrip{grid-template-columns:repeat(4,1fr)} } @media(max-width:720px){ .dailystrip{grid-template-columns:repeat(3,1fr)} .dailystrip b{font-size:12px} } /* ---------- e-book store ---------- */ .artcard .im.bookim{height:230px;background:linear-gradient(160deg,#F1F8E2,#e7eef6)} .artcard .pr .fmt{font-family:'Heebo';font-weight:600;font-size:11px;color:var(--muted); border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:2px} .bookcover{width:96px;height:128px;flex:0 0 96px;border-radius:10px;overflow:hidden; background:var(--primary-soft);display:grid;place-items:center;font-size:36px;border:1px solid var(--line)} .bookcover img{width:100%;height:100%;object-fit:cover} @media(max-width:720px){ .artcard .im.bookim{height:180px} .bookcover{width:74px;height:98px;flex:0 0 74px;font-size:28px} } /* ---------- visitor counter ---------- Three numbers on the homepage. The cards are the site's dark tone rather than a fourth accent colour, so the counter reads as part of the page and not as an embedded widget from somewhere else. */ .vcount{padding:52px 0 58px;background:var(--bg);border-top:1px solid var(--line)} .vcount.compact{padding:30px 0 34px} .vcount h2{font-family:'Nunito',system-ui,sans-serif;font-weight:900;font-size:30px;color:var(--secondary); text-align:center;margin:0 0 24px;line-height:1.2} .vcount h2 span{margin-right:6px} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:960px;margin:0 auto} .vcard{background:linear-gradient(150deg,var(--dark),#2b2b44);color:#fff;border-radius:16px; padding:26px 18px;text-align:center;box-shadow:var(--shadow-md)} .vcard b{display:block;font-family:'Nunito',system-ui,sans-serif;font-weight:900;font-size:40px;line-height:1.1; letter-spacing:-.5px;font-variant-numeric:tabular-nums} .vcard span{display:block;margin-top:6px;font-size:14px;color:#c9cdd6} .vnote{text-align:center;color:var(--muted);font-size:14.5px;margin:18px 0 0;line-height:1.7} .vnote .small{font-size:13px} @media(max-width:720px){ .vcount{padding:38px 0 42px} .vcount h2{font-size:23px;margin-bottom:18px} .vgrid{grid-template-columns:1fr;gap:12px;max-width:420px} .vcard{padding:18px 16px;display:flex;align-items:center;justify-content:space-between;text-align:left} .vcard b{font-size:30px} .vcard span{margin-top:0} } /* ---------- breadcrumbs ---------- Also emitted as BreadcrumbList structured data, which is what puts the trail under the result in Google instead of a bare URL. */ .crumbs{background:#fff;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)} .crumbs .wrap{padding:11px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:2px} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--primary-dark);text-decoration:underline} .crumbs .sep{color:var(--line);padding:0 2px} .crumbs [aria-current]{color:var(--dark);font-weight:600} /* ---------- "picking up where you left off" ---------- Tinted so it reads as a suggestion made for this one visitor rather than part of the shared page, and so nobody mistakes it for a paid slot. */ .foryou{background:linear-gradient(180deg,var(--primary-soft),transparent)} .foryou .kicker{color:var(--primary-dark)} .foryou .sechead p a{color:var(--primary-dark);text-decoration:underline} /* ---------- "how to list your business" explainer ---------- Video left, the same steps as real text right. The two