/* the main site's menu on /book, generated by kh-header.mjs, do not edit by hand */ .kh-scope{display:contents;font-family:var(--font);font-size:17.5px;line-height:1.65;color:var(--ink);letter-spacing:normal;font-feature-settings:normal} @media(max-width:640px){.kh-scope{font-size:16.5px}} @media(min-width:1021px){.kh-scope{font-size:21.5px}} .kh-scope *{margin:0;padding:0;box-sizing:border-box} .kh-scope img{max-width:100%;display:block} .kh-scope a{color:inherit;text-decoration:none} .kh-scope button{font-family:inherit;cursor:pointer} .kh-scope{--paper:#FFFFFF;--paper-2:#F5F5F8;--ink:#1C1C1C;--muted:#55606E;--line:rgba(28,36,49,.12);--accent:#2E6BD3;--accent-deep:#1C4FA8;--accent-text:#2E6BD3;--accent-soft:#DCE9FB;--accent-soft-ink:#1C4FA8;--dark:linear-gradient(158deg,#1E4A96 0%,#133875 52%,#0B2450 100%);--dark-flat:#133875;--dark-2:rgba(255,255,255,.07);--dark-line:rgba(255,255,255,.18);--dark-ink:#FFFFFF;--dark-muted:rgba(226,240,255,.88);--blue-on-dark:#BDD5F9;--blue-lg-on-dark:#8FB3EE;--bar:rgba(255,255,255,.86);--menu:#FFFFFF;--field:#F5F5F8;--field-focus:#FFFFFF;--radius:18px;--shadow:0 20px 50px -22px rgba(39,67,103,.3);--font:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif;--mono:'JetBrains Mono','SF Mono',monospace} [data-theme="dark"] .kh-scope{--paper:#070707;--paper-2:#0D0D0D;--ink:#F8F8F8;--muted:#A5ACB7;--line:rgba(255,255,255,.11);--accent:#2E6BD3;--accent-deep:#1C4FA8;--accent-text:#5E92E8;--accent-soft:rgba(94,146,232,.16);--accent-soft-ink:#A9C7F5;--bar:rgba(7,7,7,.86);--menu:#161616;--field:#161616;--field-focus:#1D1D1D;--shadow:0 22px 50px -20px rgba(0,0,0,.65)} .kh-scope{--card:#FFFFFF;--card-tint:#FFFFFF} [data-theme="dark"] .kh-scope{--paper-2:#0E1522;--line:rgba(255,255,255,.14);--card:#161616;--card-tint:#132039;--menu:#161616;--field:#111111;--field-focus:#1A1A1A} body.hv2 .kh-scope{--paper:#FBFAF6;--paper-2:#F3F0E8;--ink:#16182B;--muted:#4F5263;--line:rgba(19,22,40,.16);--bar:rgba(251,250,246,.94);--menu:#FBFAF6;--field:#FFFFFF;--field-focus:#FFFFFF;--hv-card:#FFFFFF;--hv-line:#16182B;--hv-shadow:#16182B;--hv-yel:#F6D234;--hv-blue:#2E6BD3;--hv-dot:rgba(19,22,40,.10);--hv-hand:'Caveat',cursive} html[data-theme="dark"] body.hv2 .kh-scope{--paper:#070707;--paper-2:#0E1320;--ink:#F8F8F8;--muted:#B4B9C6;--line:rgba(255,255,255,.14);--bar:rgba(7,7,7,.92);--menu:#141414;--field:#141A2A;--field-focus:#18203A;--hv-card:#141A2A;--hv-line:rgba(248,248,248,.82);--hv-shadow:#2E6BD3;--hv-dot:rgba(255,255,255,.07)} /* digitalpratik.com in the Keshav experience template, by Team Digital Pratik at JorrDaar LLC. Same type scale, spacing, radii and motion as the template. Only the colours moved: the client red became the Digital Pratik blue, and every dark band is the navy signature fill (identical in both themes, exactly like the site's filled card). */ .kh-wrap{width:min(1180px,92vw);margin:0 auto} /* ---------- type ---------- */ /* no hanging words anywhere: headings balance their lines, paragraphs avoid a lone last word */ /* A TWO PART HEADLINE (Digital Pratik, 13 October 2026). The accent sentence always starts on a line of its own. "Bring your numbers. I" with the rest below it reads as a mistake, so the second sentence never shares a line with the first. Holds at every width, phone included. */ /* The line under a headline balances its lines too, so it never runs long and then leaves two words alone underneath. */ /* ---------- buttons ---------- */ .kh-btn{ display:inline-flex;align-items:center;gap:10px; padding:15px 30px;border-radius:999px; font-weight:700;font-size:15.5px;letter-spacing:.01em; border:1.5px solid transparent; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease; } .kh-btn svg{width:17px;height:17px;flex:none;transition:transform .18s ease} .kh-btn:hover svg{transform:translateX(4px)} /* the button fill is its own colour, never --accent: on blog and project pages --accent is the lighter link blue in dark, and white words on it are too weak (go live check, 14 October 2026) */ .kh-btn-primary{background:var(--btn-bg,#2E6BD3);color:#fff} .kh-btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(46,107,211,.6)} /* fixed navy ink, never a token: on blog and project pages the token turns pale in dark and the words vanished on the white button (go live check, 14 October 2026) */ /* ---------- header ---------- */ .kh-topbar{ background:var(--dark);color:var(--dark-muted); font-size:13.5px;padding:9px 0; } .kh-topbar .kh-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px} .kh-topbar a{color:var(--dark-ink)} .kh-topbar a:hover{color:var(--blue-on-dark)} .kh-topbar .kh-tb-left{display:flex;gap:22px;align-items:center} .kh-topbar .kh-tb-item{display:flex;gap:7px;align-items:center} .kh-topbar svg{width:14px;height:14px;color:var(--blue-on-dark)} .kh-topbar .kh-mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em} header.kh-site{ position:sticky;top:0;z-index:90; background:var(--bar); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .2s ease; } header.kh-site.scrolled{box-shadow:0 10px 30px -18px rgba(12,14,18,.25)} .kh-navbar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px} /* the wordmark is monochrome text, never a coloured logo */ .kh-brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0} .kh-brand img{width:40px;height:40px;border-radius:50%;object-fit:cover} .kh-wm{font-size:23px;font-weight:400;letter-spacing:-.012em;text-transform:uppercase;color:var(--ink);line-height:1;white-space:nowrap} .kh-wm b{font-weight:800} nav.kh-main{display:flex;align-items:center;gap:4px} nav.kh-main>a,nav.kh-main .kh-navdrop>a{ padding:10px 15px;border-radius:10px; font-weight:600;font-size:15.5px;color:var(--ink); display:inline-flex;align-items:center;gap:6px; transition:color .15s ease,background .15s ease; } nav.kh-main>a:hover,nav.kh-main .kh-navdrop>a:hover{color:var(--accent-text);background:var(--paper-2)} nav.kh-main>a.active,nav.kh-main .kh-navdrop>a.active{color:var(--accent-text)} .kh-navdrop{position:relative} .kh-navdrop svg{width:13px;height:13px;transition:transform .2s ease} .kh-navdrop:hover>a svg{transform:rotate(180deg)} .kh-nav-cta{display:flex;align-items:center;gap:12px} .kh-nav-cta .kh-btn{white-space:nowrap} /* the longer button label must not push the bar off a small laptop screen */ @media(min-width:1021px) and (max-width:1199px){.kh-nav-cta{gap:8px}.kh-nav-cta .kh-btn{padding:11px 14px;font-size:13.5px}.kh-nav-cta .kh-btn svg{display:none}nav.kh-main>a,nav.kh-main .kh-navdrop>a{padding-left:10px;padding-right:10px}} .kh-theme-btn{ width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent; color:var(--ink);display:inline-flex;align-items:center;justify-content:center; transition:border-color .15s ease,background .15s ease; } .kh-theme-btn:hover{border-color:var(--ink);background:var(--paper-2)} .kh-theme-btn svg{width:18px;height:18px} .kh-theme-btn .kh-sun{display:none} [data-theme="dark"] .kh-theme-btn .kh-sun{display:block} [data-theme="dark"] .kh-theme-btn .kh-moon{display:none} .kh-burger{display:none;background:none;border:0;width:44px;height:44px;border-radius:10px} .kh-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;transition:all .25s ease} /* mobile nav */ .kh-m-nav{ display:none;position:fixed;inset:0;z-index:200;background:var(--dark); color:var(--dark-ink);padding:24px;overflow-y:auto; } .kh-m-nav.open{display:block} .kh-m-nav .kh-m-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px} .kh-m-nav .kh-m-top .kh-wm{color:#fff} .kh-m-close{background:none;border:0;color:#fff;font-size:34px;line-height:1} .kh-m-nav a.kh-m-link{ display:block;padding:15px 4px;font-size:21px;font-weight:700; border-bottom:1px solid var(--dark-line); } .kh-m-nav a.kh-m-sub{display:block;padding:11px 4px 11px 20px;font-size:16px;color:var(--dark-muted);border-bottom:1px solid var(--dark-line)} .kh-m-nav a:active{color:var(--blue-on-dark)} .kh-m-nav .kh-btn{margin-top:26px} /* ---------- hero (home slider) ---------- */ @keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}} /* page hero (inner pages) */ /* the page's own name never splits, so the trail cannot end on one lonely word (revamp, 2026-10-11) */ /* ---------- cards & grids ---------- */ /* numbered steps */ /* ---------- home: about split ---------- */ /* ---------- industries ---------- */ /* ---------- regions (where the work happens) ---------- */ /* ---------- plans (the three shapes) ---------- */ /* ---------- client logos ---------- */ /* 15 logos and the "+ 100 more" tile since 14 October 2026 (Reliance off; Kothamas, SattvaRig and Internet Lifestyle Hub on, his word). 8 across on a laptop is two full rows. At 3 across the last tile fills its own row, at 2 across it pairs with the last logo, so no row is ever ragged. */ /* ---------- stats band ---------- */ /* ---------- FAQ ---------- */ /* ---------- gallery / projects ---------- */ /* ---------- CTA band ---------- */ /* ---------- service detail ---------- */ /* ---------- about page extras ---------- */ /* ---------- contact ---------- */ /* ---------- footer: the navy slab, fixed light ink, ignores the theme ---------- */ footer.kh-site{background:var(--dark);color:var(--dark-muted);padding:80px 0 0} /* the floating call button (the template's chat bubble, pointed at the booking page) */ /* reveal on scroll */ /* ---------- responsive ---------- */ @media(max-width:1020px){ nav.kh-main{display:none} .kh-nav-cta .kh-btn{display:none} .kh-burger{display:block} } @media(max-width:640px){ .kh-topbar .kh-tb-left .kh-tb-hide{display:none} .kh-topbar .kh-mono{display:none} .kh-wm{font-size:19px} } /* ========================================================================== EXPERIENTIAL LAYER: the progress bar, card watermarks and the route scrub. imm.js injects the elements; these rules style them. Without JS none of these elements exist and the page is plain. ========================================================================== */ /* the progress bar across the top of the viewport */ /* card depth watermarks */ /* the route scrub: the marker travels the lane through How It Works */ /* ========================================================================== THE NEW HOME PAGE (revamp builder step 43, October 2026). Nine sections. Everything here is home only. It sits ABOVE the dark theme block on purpose, so that block still wins where both speak. ========================================================================== */ /* 1. the problem: text on the left, the first proof on the right, on the navy slab */ /* the promise always gets a line of its own, never split from itself */ /* a screen, framed like a window. Used in sections 1, 3, 4 and 5 */ /* a part that does not exist yet. Says so, and names the step that makes it */ /* 2. logos and three plain facts */ /* 3. the system */ /* 4. the two cases */ /* 5. the demo band */ /* 6. STORM: a row of real cover slides */ /* THE STORM PAGE: sketch cards, the loop and the wall */ /* loops on the wall (15 October 2026): reels stand 9:16, GIFs and article pictures lie wide */ /* 7. the operator */ /* 8. who it is not for */ /* nothing on the home page may be wider than its column, or text runs off a phone */ @media(max-width:640px){ /* a button label stays on one line, so it can never end on one word alone */ } /* THE TIMELINE on the About page (13 October 2026). One line down the side, a dot for each year. The entry that did not work has an open dot and says so. */ /* The JorrParivar entry links out to its own site. Drawn as one block on a chain: three linked squares, the last one filled, and the address in mono. */ /* THE ABOUT PAGE, MOSTLY PICTURES (13 October 2026). His call: 60 to 70 parts picture, 30 to 40 parts words. A split hero with a real photo, a row of photo cards, sketch cards, and rows that swipe on a phone. */ /* THE HOME PAGE IN THE ABOUT PATTERN (13 October 2026). */ /* THE SERVICE PAGES IN THE SAME PATTERN (13 October 2026). The first paragraph shows, the rest opens on a tap, so no words were deleted. */ /* THE SERVICES HUB AND CONTACT IN THE SAME PATTERN (13 October 2026). */ /* WHO IT IS FOR (13 October 2026, his call: the for you box must stand out). The yes box is the navy signature card with white ink, the same in both themes. The no box is quiet. */ /* THE TWO DUBAI SEARCH PAGES IN THE SAME PATTERN (13 October 2026). The one paragraph answer and the price note are the navy signature card, the same in both themes. They are not .card, so the dark surfaces block below does not repaint them. */ /* the long page name in the trail may wrap, and nothing in the words column may push it wider than the phone */ /* The menu gained Newsletter on 13 October 2026. On laptop widths the Home word steps aside so the bar still fits: the logo beside it already goes home. */ @media(min-width:1021px) and (max-width:1519px){nav.kh-main>a[data-nav="home"]{display:none}} /* NOTES FROM DIGITAL PRATIK, the sign up box (13 October 2026). The same form in the footer, in the home page band and on /newsletter. The email box is 16px on purpose: anything smaller makes an iPhone zoom in and stay zoomed. */ /* first name and email side by side (15 October 2026, his word: Kit gets the first name to personalise every email) */ /* THE BIG MENUS (14 October 2026, Digital Pratik's call). Blog and Services open a full width panel under the bar: Blog shows its categories and the newest articles, Services shows the three groups as tabs. The panel hangs from the header, so the drop item is stretched to the full bar height and the pointer never crosses a gap. */ nav.kh-main{align-self:stretch} nav.kh-main .kh-navdrop.kh-mm{position:static;align-self:stretch;display:flex;align-items:center} .kh-navdrop.kh-mm:hover>a svg,.kh-navdrop.kh-mm:focus-within>a svg{transform:rotate(180deg)} .kh-mm-panel{position:absolute;left:0;right:0;top:100%;background:var(--menu);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 34px 60px -30px rgba(0,0,0,.45);padding:34px 0 38px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s} .kh-navdrop.kh-mm:hover .kh-mm-panel,.kh-navdrop.kh-mm:focus-within .kh-mm-panel{opacity:1;visibility:visible;transform:none} .kh-mm-h{display:block;font-size:15px;font-weight:600;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px} .kh-mm-all{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:14.5px;color:var(--accent-text);white-space:nowrap} .kh-mm-all svg{width:15px;height:15px} .kh-mm-blog{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch} .kh-mm-cats{padding-right:44px} .kh-mm-catlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px} .kh-mm-catlist a{padding:8px 0;font-weight:600;font-size:15.5px;color:var(--ink);white-space:nowrap} .kh-mm-catlist a::before{content:"\203A";color:var(--accent-text);font-weight:800;margin-right:9px} .kh-mm-catlist a:hover{color:var(--accent-text)} /* THE DESK (14 October 2026, his ask: unique, in the JorrDaar way, not a copy). The newest article is a paper note taped to the panel, slightly tilted, with its own ink sketch; the older ones are small paper slips. Paper and ink are fixed, the same in both themes, like the sketches. */ .kh-mm-recent{background:var(--paper-2);margin:-34px 0 -38px;padding:30px 30px 34px;position:relative;overflow:hidden} .kh-mm-desk::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px,transparent 1.4px);background-size:16px 16px;opacity:.9;pointer-events:none} .kh-mm-desk>*{position:relative} .kh-mm-desk-h{display:flex;align-items:flex-end;gap:6px;margin:0 0 6px} .kh-mm-desk-h .kh-hand{font-family:'Caveat',cursive;font-size:30px;font-weight:600;line-height:1;color:var(--accent-text);white-space:nowrap;transform:rotate(-2deg)} .kh-navdrop .kh-mm-squig{width:84px;height:44px;color:var(--accent-text);margin:0 0 -22px 4px;stroke-width:2.6} .kh-mm-posts{display:grid;gap:12px} .kh-mm-note,.kh-mm-slip{display:grid;align-items:center;background:#F6F1E7;color:#1C1C1C;border-radius:4px;box-shadow:0 14px 26px -16px rgba(0,0,0,.55),0 1px 0 rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease} .kh-mm-note{grid-template-columns:168px minmax(0,1fr);gap:16px;padding:12px 18px 12px 12px;transform:rotate(-1.4deg);margin:14px 6px 6px 2px;position:relative} .kh-mm-note::before{content:"";position:absolute;top:-11px;left:62%;width:86px;height:22px;margin-left:-43px;background:rgba(46,107,211,.38);transform:rotate(2.5deg);border-radius:2px} .kh-mm-note img{width:168px;height:112px;object-fit:cover;border:1px solid rgba(28,28,28,.12);background:#fff} .kh-mm-slip{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:8px 14px 8px 8px;transform:rotate(.9deg);margin:2px 18px 0 22px} .kh-mm-slip:nth-child(3){transform:rotate(-.7deg);margin-left:10px} .kh-mm-slip img{width:72px;height:48px;object-fit:cover;border:1px solid rgba(28,28,28,.1)} .kh-mm-note:hover,.kh-mm-slip:hover{transform:rotate(0) translateY(-3px);box-shadow:0 22px 34px -18px rgba(0,0,0,.6)} .kh-mm-note i,.kh-mm-slip i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#1C4FA8;margin-bottom:5px;white-space:nowrap} .kh-mm-note b{display:block;font-size:16.5px;line-height:1.28;font-weight:800;color:#1C1C1C;text-wrap:balance} .kh-mm-slip b{display:block;font-size:13.5px;line-height:1.3;font-weight:700;color:#1C1C1C;text-wrap:balance} .kh-mm-note .kh-hand{display:inline-block;margin-top:6px;font-family:'Caveat',cursive;font-size:21px;font-weight:600;color:#1C4FA8;white-space:nowrap} .kh-mm-tabs{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:center;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:26px} .kh-mm-lead{font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);white-space:nowrap} .kh-mm-tab{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;color:var(--ink);font:inherit;font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap} .kh-mm-tab svg{width:28px;height:28px;color:var(--accent-text);flex:none} .kh-mm-tab.on{color:var(--accent-text);border-bottom-color:var(--accent-text)} .kh-mm-pane{display:none;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:44px;align-items:start} .kh-mm-pane.on{display:grid} .kh-mm-intro p{font-size:15.5px;line-height:1.6;color:var(--muted);margin-bottom:18px;text-wrap:pretty} .kh-mm-intro .kh-btn{font-size:14px;padding:12px 18px;white-space:nowrap} .kh-mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 28px} .kh-mm-grid a{display:block;padding:14px 0;border-bottom:1px solid var(--line)} .kh-mm-grid b{display:flex;gap:9px;font-size:15.5px;font-weight:700;color:var(--ink)} .kh-mm-grid b::before{content:"\203A";color:var(--accent-text);font-weight:800;flex:none} .kh-mm-grid span{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin:3px 0 0 17px} .kh-mm-grid a:hover b{color:var(--accent-text)} /* THE SERVICES DESK (14 October 2026, his ask: the same as the Blog desk). Every service is a paper note with its own ink sketch, taped to a dotted desk and tilted a little. */ .kh-mm-sdesk{position:relative;padding:18px 18px 8px;margin:-18px -18px 0;border-radius:14px;background-color:var(--paper-2);background-image:radial-gradient(var(--line) 1px,transparent 1.4px);background-size:16px 16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px;margin:-18px 0 0 -18px} .kh-mm-grid a.kh-mm-snote{position:relative;display:block;padding:10px 10px 14px;border:0;background:#F6F1E7;color:#1C1C1C;border-radius:4px;box-shadow:0 14px 26px -16px rgba(0,0,0,.55),0 1px 0 rgba(0,0,0,.06);transform:rotate(-1.2deg);transition:transform .25s ease,box-shadow .25s ease;margin-top:8px} .kh-mm-grid a.kh-mm-snote:nth-child(2){transform:rotate(1deg)} .kh-mm-grid a.kh-mm-snote:nth-child(3){transform:rotate(-.6deg)} .kh-mm-snote::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(46,107,211,.38);transform:rotate(2deg);border-radius:2px} .kh-mm-grid a.kh-mm-snote:hover{transform:rotate(0) translateY(-3px);box-shadow:0 22px 34px -18px rgba(0,0,0,.6)} .kh-mm-snote img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid rgba(28,28,28,.12);background:#fff;margin-bottom:10px} .kh-mm-grid .kh-mm-snote b{display:block;font-size:15px;font-weight:800;color:#1C1C1C;line-height:1.25;text-wrap:balance} .kh-mm-grid .kh-mm-snote b::before{content:none} .kh-mm-grid .kh-mm-snote span{display:block;margin:4px 0 0;font-size:13px;line-height:1.4;color:#55606E;text-wrap:balance} .kh-mm-grid a.kh-mm-snote:hover b{color:#1C4FA8} .kh-mm-intro .kh-mm-desk-h{margin:0 0 24px} .kh-navdrop .kh-mm-intro .kh-mm-squig{margin-bottom:-8px} .kh-mm-svc-all{margin-top:22px} /* The blue top bar shows on laptop and desktop only (14 October 2026, his word). Below 1021px, where the phone menu takes over, it is hidden so the page starts on the logo and the menu. */ @media(max-width:1020px){.kh-topbar{display:none}} /* SHORTER LINES ON A PHONE (14 October 2026, his word: on a phone every line under a headline is to the point, three lines at most). A long line carries a short twin; the phone shows the twin. */ @media(max-width:640px){ /* the home page top on a phone: tight spacing under the photo band */ /* 15 October 2026, his word: the photo shows instantly on a phone. It comes first, as a band under the menu, fading into the headline below it, with his face in the top third of the band. */ } /* At 8 across the last logo tile is narrow, so "+100 more" stays on one line and steps down a size on small laptops (14 October 2026: it was breaking with the plus sign alone on a line). */ /* THE TWO PAGES AFTER THE FORM (14 October 2026, his word: onto the template). thank-you.html for AED 10 million and up, a-message-from-pratik.html for under. Centred, one column, the video first. */ /* SMART WEBSITES (15 October 2026, his ask). The sites we built play inside a glass panel on the page: screen recordings with every name, logo, phone and address blurred, never a link and never a frame of the real site. One site at a time, arrows, dots, a swipe, a laptop or phone view, and a short line that reads what is on screen. The stage is the navy signature, the same in both themes. */ @keyframes swScan{0%{opacity:1;background-position:0 -120%}100%{opacity:0;background-position:0 220%}} @keyframes swPing{70%{box-shadow:0 0 0 8px rgba(74,222,154,0)}100%{box-shadow:0 0 0 0 rgba(74,222,154,0)}} @keyframes swGlow{50%{opacity:.4}} @keyframes swCaret{50%{opacity:0}} @keyframes swIn{from{opacity:.25;transform:translateX(var(--sw-dir,24px))}to{opacity:1;transform:none}} /* THE TOUR BAR (15 October 2026, his ask): under the screen, a progress bar with a pit stop for each part of the tour, the stop now playing and the one coming up, so a viewer can see there is more to watch. */ @keyframes swNext{50%{box-shadow:0 0 0 6px rgba(255,255,255,.18)}} /* ONE SCREEN ON A PHONE (15 October 2026, his word: "make it such that i dont have to scroll much"). Under 641px the player is one compact screen: the field and its label, the recording at under half the screen height, the stop bar between the two arrows, the reading line and the laptop or phone switch. The tags and the dots are left out there, the field buttons above do that job. */ @media(max-width:640px){ /* the floating Capacity Diagnostic button steps aside while the player is on screen, so it covers nothing */ } /* what makes it smart: real stills from the recordings */ /* the 3 plans, by name and what is in each. Prices are given on the call (his rule, 12 October 2026) */ /* THE PLANS IN THEIR OWN METAL (15 October 2026, his ask): Silver in silver, Gold highlighted in gold as the Recommended one, Platinum in platinum with a Best Value badge. Each metal has a light and a dark shade so its small type stays readable in both themes. */ /* THE HOME BAND: words on one side, a deck of glass cards on the other that deals the sites in turn */ /* the menu desk under Ads to scale now holds four notes */ .kh-mm-grid.kh-mm-sdesk.kh-mm-sdesk4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .kh-mm-sdesk4 a.kh-mm-snote b{font-size:14px} .kh-mm-sdesk4 a.kh-mm-snote span{font-size:12.5px} /* With the bigger desktop type (14 October 2026) the opening line under a page headline balances its lines, so it never ends on a short last line. */ /* ========================================================================== NOTES INVITES, THE NOTES POP-UP AND THE PHONE BUTTON (17 October 2026, his ask: more readers for Notes from Digital Pratik, fewer "book a call" asks). Markup: src/partials/notes-invite.html (the two inserts) and footer.html (pop-up, phone button, script). The script adds .ni-js on ; without it every insert simply shows its message and form. Input boxes stay 16px or an iPhone zooms in. ========================================================================== */ /* 1. SAY HI: his message arrives like a chat, typing dots first */ /* 2. THE CALL: he is ringing the reader. Answer opens his message and the form, the cross leaves a missed call */ /* on the main pages the insert sits in its own short band between two sections */ /* THE NOTES POP-UP: a navy panel that opens only when someone taps for it. A sheet from the bottom on a phone */ /* the blog page's button that opens the pop-up */ /* THE PHONE BUTTON: on a phone the corner button opens the notes, not the booking page */ @property --np-a{syntax:'';inherits:false;initial-value:0deg} @keyframes npSpin{to{--np-a:360deg}} @keyframes npFade{from{opacity:0}} @keyframes npIn{from{opacity:0;transform:translateY(14px) scale(.97)}} @keyframes npUp{from{transform:translateY(100%)}} @keyframes npHalo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:.35}} @keyframes npCaret{50%{opacity:0}} @keyframes niDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}} @keyframes niWave{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}} @keyframes niRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.65);opacity:0}} @keyframes niPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.65)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} @keyframes niBuzz{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}} @keyframes niIn{from{opacity:0;transform:translateY(8px)}} /* TYPE LIFT START (generated by src/type-lift.mjs, do not edit by hand) */ @media(min-width:1021px){ .kh-btn{font-size:19px} /* the parts left out keep the old body size, so nothing in them grows by inheritance */ .kh-topbar,header.kh-site,footer.kh-site,.kh-m-nav{font-size:17.5px} header.kh-site .kh-btn,footer.kh-site .kh-btn,.kh-m-nav .kh-btn{font-size:15.5px} } /* TYPE LIFT END */ /* ========================================================================== DARK THEME SURFACES (DP, 2026-09-16: "everything is black, we need proper sections"). The first dark pass reused the light structure with near-black values, so paper, tint and cards sat within a few shades of each other. Dark now has three distinct surfaces, like the DPAIOS and DBC dark skins: paper #070707 the page tint #0E1522 -> #101A2C a lifted navy field for every .tint section card #161616 / #132039 a panel that reads on paper / on tint plus a stronger hairline and a divider under the heroes. The navy gradient bands (.on-dark) are unchanged and still read as the brand signature. ========================================================================== */ /* the light values first, so the dark block below wins on the same element */ [data-theme="dark"] header.kh-site{border-bottom-color:rgba(255,255,255,.1)} /* The for you box stays navy in dark too. It sits after the dark surfaces block on purpose, because that block repaints every card. */ /* THE "YOU ARE IN" PAGE (17 October 2026, his word: the photo was not seen properly on a phone, and less height). A shorter hero on a laptop; on a tablet or phone the photo is a short band above the words (a closer crop, his face and thumbs up in view) and the words sit tight under it. */ /* a tablet is wide, so the band is taller there or the thumbs up is cut off */ /* HOME HERO SHOWS THE WHOLE PHOTO (19 October 2026, his ask: "the full pic where my nike shoes are also visible", then "keep the full pic but blend it properly"). Above a phone the photo is no longer cropped: it keeps its own shape, head to shoes, and its edges fade into the black like the old cover crop did. Wide screens pin it to the right with the left edge fading; a tablet centres it with both sides fading. A phone keeps its closer square (home-hero-2-m.webp) so his face stays big. Delete this block to go back. */ /* SUBMITTED CARD (19 October 2026, his ask). After a notes sign up the form is replaced by a clear card: submitted, check your email now, and a picture of the real Kit email with its button. In the pop-up the whole panel blurs and the card sits on top with a "back to reading" button. Script: done() in footer.html. */ /* THE MENU NOTES STOP FLICKERING (23 October 2026, his report: "the site keeps flickering when I move my cursor on the menu"). A hovered note straightens and lifts 3px, which slid its edge out from under the cursor: the note lost the hover, dropped back under the cursor, got it again, over and over. Once a note is hovered, an invisible 12px margin now keeps holding the cursor, so the lift can never escape it. Looks the same. Delete this block to go back. */ .kh-mm-slip{position:relative} .kh-mm-note:hover::after,.kh-mm-slip:hover::after,.kh-mm-grid a.kh-mm-snote:hover::after{content:"";position:absolute;inset:-12px} /* digitalpratik.com SITE SKIN (Digital Pratik, 2 Nov 2026: "change all the pages according to our new theme"). Loaded LAST on every page, after the template CSS (assets/ks/style.css, blog.css, notes.css, projects.css), and only fires under body.hv2. It moves the whole site to the new home page look: cream dotted paper, navy ink, the brand blue, yellow buttons with a hard ink shadow, ink-bordered cards, Caveat labels, his photos as taped polaroids and a comic sticker of him on each page top. Delete the link and every page is back as it was. */ /* ---------- header: cream bar, ink rule, yellow door. Logo and menu untouched ---------- */ body.hv2 header.kh-site{background:var(--paper);border-bottom:2px solid var(--hv-line)} body.hv2 header.kh-site .kh-nav-cta .kh-btn-primary{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:3px 3px 0 #16182B} html[data-theme="dark"] body.hv2 header.kh-site .kh-nav-cta .kh-btn-primary{box-shadow:3px 3px 0 #F8F8F8} /* ---------- buttons ---------- */ body.hv2 .kh-btn-primary{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:4px 4px 0 #16182B;font-weight:800} body.hv2 .kh-btn-primary:hover{background:var(--hv-yel);transform:translate(-2px,-2px);box-shadow:6px 6px 0 #16182B} html[data-theme="dark"] body.hv2 .kh-btn-primary{box-shadow:4px 4px 0 #F8F8F8} body.hv2 .kh-btn-primary svg{stroke:#16182B} /* ---------- section labels become handwritten notes ---------- */ /* in a page top the label is a white pill with an ink edge, like the home page */ /* ---------- page tops: cream paper, ink words, his photo as a taped polaroid ---------- */ @media (prefers-reduced-motion:no-preference){@keyframes hvBob{0%,100%{translate:0 0}50%{translate:0 -7px}}} /* ---------- cards get an ink edge and a hard shadow ---------- */ /* the navy signature cards keep their navy and gain the yellow shadow */ /* the contact page's first card is a navy card with white words; the white card rule above hid them (his catch, 3 Nov) */ /* the "A good fit" card (about, contact): navy with white words, same reason */ /* project page tops: the two ticks under the buttons were white for the old dark top */ /* the navy strip above the header: smaller words (his ask, 3 Nov) */ body.hv2 .kh-topbar{font-size:14.5px} body.hv2 .kh-topbar svg{width:13px;height:13px} /* full width navy bands and the closing photo band stay navy (the brand signature) */ /* forms */ /* talks slider arrows */ /* the blog search box was 6px wider than a 360px phone on the live site too; keep it inside the screen */ /* THE DROPDOWNS IN THE NEW THEME (his ask, 3 Nov 2026: the beige taped notes and grey sketches no longer fit). Topics become pill buttons, the newest editions sit on the navy signature card as clean white cards with each article's own photo, the services tabs become a yellow pill and the notes become framed cards. */ body.hv2 .kh-mm-panel{background:var(--paper,#FAF8F3);border-top:2px solid var(--hv-line);border-bottom:2px solid var(--hv-line);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)} html[data-theme="dark"] body.hv2 .kh-mm-panel{background:#0B0D14} body.hv2 .kh-mm-k{margin:0 0 2px} body.hv2 .kh-mm-k .kh-hand,body.hv2 .kh-mm-desk-h .kh-hand{font-family:var(--hv-hand);font-size:26px;font-weight:600;line-height:1;color:var(--hv-blue);white-space:nowrap;transform:rotate(-2deg);display:inline-block} html[data-theme="dark"] body.hv2 .kh-mm-k .kh-hand{color:#8FB4F0} body.hv2 .kh-mm-h.kh-mm-h2{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);padding-bottom:16px;border-bottom:2px solid var(--hv-line);margin-bottom:20px;white-space:nowrap} body.hv2 .kh-mm-catlist{display:flex;flex-wrap:wrap;gap:10px} body.hv2 .kh-mm-catlist a{display:inline-flex;align-items:center;padding:8px 16px;border:2px solid var(--hv-line);border-radius:999px;background:var(--hv-card);font-size:15px;font-weight:700;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,background .15s ease} body.hv2 .kh-mm-catlist a::before{content:none} body.hv2 .kh-mm-catlist a:hover{background:var(--hv-yel);color:#16182B;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--hv-shadow)} body.hv2 .kh-mm-cats>.kh-mm-all{margin-top:24px;padding:11px 20px;border:2px solid #16182B;border-radius:999px;background:var(--hv-yel);color:#16182B;box-shadow:4px 4px 0 #16182B;font-weight:800} body.hv2 .kh-mm-cats>.kh-mm-all:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #16182B} /* the newest editions: the navy signature card, the same in both themes */ body.hv2 .kh-mm-recent.kh-mm-desk{background:linear-gradient(150deg,#1E4A96 0%,#133875 55%,#0B2450 100%);border-left:2px solid #16182B;padding:28px 30px 32px} body.hv2 .kh-mm-desk::before{content:none} body.hv2 .kh-mm-desk-h.kh-mm-new{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 16px} body.hv2 .kh-mm-desk-h.kh-mm-new .kh-hand{color:var(--hv-yel)} body.hv2 .kh-mm-desk-h.kh-mm-new b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;white-space:nowrap} body.hv2 .kh-mm-note,body.hv2 .kh-mm-slip{background:#fff;color:#16182B;border:2px solid #16182B;border-radius:12px;box-shadow:4px 4px 0 rgba(10,18,40,.55);transform:none;margin:0} body.hv2 .kh-mm-note{grid-template-columns:150px minmax(0,1fr);padding:10px 16px 10px 10px} body.hv2 .kh-mm-note::before{content:none} body.hv2 .kh-mm-slip:nth-child(3){transform:none;margin:0} body.hv2 .kh-mm-note img,body.hv2 .kh-mm-slip img{border:0;border-radius:8px;object-fit:cover;object-position:60% 30%} body.hv2 .kh-mm-note img{width:150px;height:100px} body.hv2 .kh-mm-slip img{width:64px;height:48px} body.hv2 .kh-mm-note i,body.hv2 .kh-mm-slip i{display:inline-block;padding:3px 8px;border-radius:999px;background:#EEF3FC;color:#1C4FA8;font-size:10px;margin-bottom:6px} body.hv2 .kh-mm-note .kh-hand{color:#1C4FA8;font-size:20px} body.hv2 .kh-mm-note:hover,body.hv2 .kh-mm-slip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hv-yel)} /* services */ body.hv2 .kh-mm-tabs{border-bottom:2px solid var(--hv-line)} body.hv2 .kh-mm-tab{border:2px solid transparent;border-radius:999px;padding:8px 18px;justify-self:center} body.hv2 .kh-mm-tab.on{background:var(--hv-yel);color:#16182B;border-color:#16182B;box-shadow:3px 3px 0 #16182B} body.hv2 .kh-mm-tab.on svg{color:#16182B} body.hv2 .kh-mm-sdesk{background-color:transparent;background-image:none;padding:6px 6px 8px;margin:0} body.hv2 .kh-mm-grid a.kh-mm-snote,body.hv2 .kh-mm-grid a.kh-mm-snote:nth-child(2),body.hv2 .kh-mm-grid a.kh-mm-snote:nth-child(3){background:#fff;color:#16182B;border:2px solid #16182B;border-radius:12px;box-shadow:4px 4px 0 var(--hv-shadow);transform:none;padding:8px 8px 12px;margin-top:0} body.hv2 .kh-mm-snote::before{content:none} body.hv2 .kh-mm-snote img{border:0;border-radius:8px} body.hv2 .kh-mm-grid .kh-mm-snote b{color:#16182B} body.hv2 .kh-mm-grid .kh-mm-snote span{color:#4A5363} body.hv2 .kh-mm-grid a.kh-mm-snote:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hv-yel)} body.hv2 .kh-mm-grid a.kh-mm-snote:hover b{color:#1C4FA8} /* ---------- sign up boxes on a page top (his catch, 3 Nov 2026: in light the boxes showed nothing). The template made them white letters on a see-through box for its dark photo tops; the tops are paper now ---------- */ /* ---------- article headlines on the smallest phones (found by the 3 Nov 2026 sweep): "Entrepreneurship College" is kept together so no word sits alone, and at the template's 32px floor the pair was 26px wider than a 360px phone, so the page scrolled sideways. A touch smaller on phones up to 380px ---------- */