/* Theme Name: KKsarkar Theme URI: https://example.com/ Author: Kanchan Kumar Sarkar Author URI: https://example.com/ Description: A dark-first, peacock-inspired block theme for a personal brand offering SEO, local search, video editing, graphic design and social media promotion. Built for speed, accessibility and multilingual use (English, Bangla, Hindi). No page builder required. Version: 1.12.1 Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: kksarkar Tags: blog, portfolio, one-column, block-patterns, full-site-editing, translation-ready, accessibility-ready */ /* ------------------------------------------------------------- Everything below is the design system. Colours, spacing and type all come from the custom properties in :root — change a value there and it updates everywhere on the site. ------------------------------------------------------------- */ :root{ --pk-950:#04131A; --pk-900:#072129; --pk-800:#0A3A43; --pk-700:#0A4A55; --pk-600:#0C6B73; --pk-500:#128C93; --pk-400:#2FB3B3; --pk-300:#7FD9D2; --vi-600:#5A48C0; --vi-500:#6D5BD0; --vi-300:#A79BEA; --em-500:#1E9E6A; --gd-500:#C9A227; --gd-700:#7A5F14; --n-0:#FFFFFF; --n-50:#F4F7F7; --n-100:#E6EDED; --n-600:#55686B; --n-900:#121C1F; --bg:var(--pk-950); --bg-raised:#0A1C24; --bg-sunken:#020B10; --line:#12343C; --line-soft:#0D262D; --text:#EAF2F2; --text-muted:#8FA9AC; --brand:var(--pk-400); --brand-deep:var(--pk-600); --accent:var(--vi-300); --gold:var(--gd-500); --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem; /* The smallest type on the site. It used to run down to .6rem — 9.6px — which is below what anyone should have to read and below what Google counts as legible on a phone. Nothing goes under 12px now; the letter-spacing on these mono labels does the work of making them look small instead. */ --t-micro:.75rem; --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:clamp(1.9rem,4.2vw,2.7rem); --t-3xl:clamp(2.4rem,6vw,3.6rem); --t-4xl:clamp(2.7rem,8vw,5rem); --max:1120px; --r-sm:8px; --r-md:14px; --r-lg:22px; --ease-out:cubic-bezier(.22,1,.36,1); --elev-1:0 12px 26px -16px rgba(0,0,0,.8), 0 3px 8px -4px rgba(0,0,0,.55); --elev-2:0 26px 50px -20px rgba(0,0,0,.9), 0 6px 16px -6px rgba(0,0,0,.6); --trail-blend:screen; --trail-alpha:.16; --lit-blend:screen; --lit-mix:58%; --btn-sh:0 6px 14px -8px rgba(0,0,0,.9), 0 2px 5px -3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07); --btn-sh-hi:0 14px 26px -10px color-mix(in srgb,var(--brand) 60%,transparent), 0 5px 12px -6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.10); --btn-sh-in:0 2px 5px -3px rgba(0,0,0,.85), inset 0 2px 5px -2px rgba(0,0,0,.5); color-scheme:dark; } :root[data-theme="light"]{ --bg:var(--n-50); --bg-raised:var(--n-0); --bg-sunken:var(--n-100); --line:#CBD8D9; --line-soft:#E0E9E9; --text:var(--n-900); --text-muted:var(--n-600); --brand:var(--pk-600); --brand-deep:var(--pk-700); --accent:var(--vi-600); --gold:var(--gd-700); --elev-1:0 12px 26px -16px rgba(10,74,85,.38), 0 3px 8px -5px rgba(10,74,85,.22); --elev-2:0 28px 50px -22px rgba(10,74,85,.48), 0 6px 16px -7px rgba(10,74,85,.3); --trail-blend:multiply; --trail-alpha:.22; --lit-blend:normal; --lit-mix:17%; --btn-sh:0 6px 14px -8px rgba(10,74,85,.5), 0 2px 5px -3px rgba(10,74,85,.3); --btn-sh-hi:0 15px 28px -10px color-mix(in srgb,var(--brand) 55%,transparent), 0 5px 12px -6px rgba(10,74,85,.32); --btn-sh-in:0 2px 5px -3px rgba(10,74,85,.4), inset 0 2px 5px -2px rgba(10,74,85,.22); color-scheme:light; } *{box-sizing:border-box} html,body{overflow-x:clip} /* The page colour lives on , not on , so that the pointer trail can be slipped in between the two: the trail is a fixed layer at z-index -1, which paints above the root's background and below everything in the document. That is the only place it can sit and still be visible without ever covering a word, a button, an image or the menu bar. If kept an opaque background it would hide the trail completely. */ html{ background:var(--bg); transition:background .3s ease; } body{ margin:0; background:transparent; color:var(--text); font-family:"Anek Latin","Segoe UI",system-ui,sans-serif; font-size:var(--t-base); line-height:1.7; -webkit-font-smoothing:antialiased; transition:color .3s ease; } h1,h2,h3,h4{ font-family:"Archivo","Anek Latin",sans-serif; font-variation-settings:"wdth" 112; font-weight:700; line-height:1.06; letter-spacing:-.025em; text-wrap:balance; margin:0; } p{margin:0 0 1em} p:last-child{margin-bottom:0} a{color:var(--brand)} img{max-width:100%} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px} .mono{font-family:"JetBrains Mono",ui-monospace,monospace} .eyebrow{ font-family:"JetBrains Mono",monospace; font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--brand); margin:0 0 14px; } .eyebrow::before{content:"◆ ";color:var(--gold);font-size:.7em;vertical-align:1px} .lede{color:var(--text-muted);max-width:62ch;font-size:var(--t-md)} .btn{ display:inline-flex;align-items:center;gap:9px; font-family:"Anek Latin",sans-serif;font-weight:600;font-size:var(--t-sm); text-decoration:none;border-radius:999px;padding:13px 24px; border:1px solid transparent;cursor:pointer; transition:transform .18s var(--ease-out),background .2s,border-color .2s,color .2s; } .btn-1{background:var(--brand);color:var(--pk-950)} :root[data-theme="light"] .btn-1{color:var(--n-0)} .btn-1:hover{transform:translateY(-2px)} .btn-2{border-color:var(--line);color:var(--text);background:transparent} .btn-2:hover{border-color:var(--brand)} .btn-sm{padding:10px 18px;font-size:var(--t-xs)} /* ---------- floating header ---------- */ .hdr{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 14px); left:0;right:0;z-index:70; pointer-events:none; } .hdr-in{ position:relative; pointer-events:auto; width:min(1300px,calc(100% - 32px)); margin-inline:auto; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:8px 8px 8px 20px; /* Opaque enough that the trail behind it never reads through the menu. This used to be frosted glass (backdrop-filter). A backdrop blur forces the browser to re-read and re-blur whatever is behind the bar on every frame, and the hero canvas behind it changes every frame — so the cost was paid continuously, and it showed as lag when the pointer moved along the menu. Solid it is. */ background:color-mix(in srgb,var(--bg-raised) 99%,transparent); border:1px solid var(--line); border-radius:999px; box-shadow:0 14px 34px -16px rgba(0,0,0,.8), 0 3px 10px -4px rgba(0,0,0,.5); transition:box-shadow .35s ease,padding .3s var(--ease-out),background .3s ease; } :root[data-theme="light"] .hdr-in{ box-shadow:0 16px 34px -18px rgba(10,74,85,.45), 0 3px 10px -5px rgba(10,74,85,.25); } .hdr[data-scrolled="true"] .hdr-in{ box-shadow:0 20px 46px -18px rgba(0,0,0,.9), 0 4px 14px -5px rgba(0,0,0,.55); background:color-mix(in srgb,var(--bg-raised) 99%,transparent); } :root[data-theme="light"] .hdr[data-scrolled="true"] .hdr-in{ box-shadow:0 22px 44px -20px rgba(10,74,85,.5), 0 4px 14px -6px rgba(10,74,85,.3); } @media (max-width:920px){.hdr-in{border-radius:26px;padding:8px 8px 8px 16px}} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text); font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118;font-weight:800; font-size:1.05rem;letter-spacing:-.01em} .feather{width:24px;height:24px;flex:none} .nav{display:flex;align-items:center;gap:8px} .nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0} /* Two steps up from where it was (0.875rem → 1.125rem) and bold. The menu is the one piece of text on the page everybody reads, so it is no longer the smallest. Everything below widens to match: the bar, the gaps and the breakpoints all had to move with it or the eight links would wrap. */ .nav a{ display:block;text-decoration:none;color:var(--text-muted); font-size:var(--t-md);font-weight:700;letter-spacing:-.01em; padding:8px 13px;border-radius:999px;position:relative; background:transparent;border:1px solid transparent; transition:color .2s,transform .22s var(--ease-out),background .22s,border-color .22s,box-shadow .22s; } .nav a:hover{ color:var(--text); transform:translateY(-3px); background:color-mix(in srgb,var(--bg-sunken) 70%,transparent); border-color:var(--line); box-shadow:0 8px 16px -8px rgba(0,0,0,.7); } :root[data-theme="light"] .nav a:hover{box-shadow:0 8px 16px -9px rgba(10,74,85,.45)} /* the header CTA is a pill, not a nav link — .nav a would otherwise strip it */ .nav a.btn-1{background:var(--brand);color:var(--pk-950);border-color:transparent;padding:10px 18px} :root[data-theme="light"] .nav a.btn-1{color:#fff} .nav a.btn-1:hover{background:#45c7c7;color:var(--pk-950);transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(0,0,0,.8)} :root[data-theme="light"] .nav a.btn-1:hover{background:var(--pk-700);color:#fff} .nav li[aria-current] a{ color:var(--text); background:color-mix(in srgb,var(--bg-sunken) 85%,transparent); border-color:var(--line); } .iconbtn{ display:grid;place-items:center;width:38px;height:38px;flex:none; border:1px solid var(--line);border-radius:999px;background:transparent; color:var(--text-muted);cursor:pointer;padding:0; transition:color .2s,border-color .2s,transform .22s var(--ease-out),box-shadow .22s; } .iconbtn:hover{color:var(--text);border-color:var(--brand);transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(0,0,0,.7)} .iconbtn .moon{display:none} :root[data-theme="light"] .iconbtn .sun{display:none} :root[data-theme="light"] .iconbtn .moon{display:block} @media (max-width:920px){.iconbtn{order:2}} .burger{display:none;background:none;border:1px solid var(--line);border-radius:999px; width:38px;height:38px;cursor:pointer;color:var(--text);padding:0;flex:none; transition:border-color .2s,transform .22s var(--ease-out)} .burger:hover{border-color:var(--brand);transform:translateY(-2px)} .burger span{display:block;width:17px;height:1.5px;background:currentColor;margin:3.5px auto;border-radius:2px;transition:transform .2s,opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* Eight bold links at 1.125rem need more bar than the 1120px content column, so the header alone runs wider than the text under it. Below that it gives things up in the order that costs least: first the spacing, then the CTA (which is repeated in the hero and the contact section anyway), then a step of type, and only then the hamburger. Better a visible menu than one the visitor has to discover. */ @media (max-width:1300px){ .nav ul{gap:0} .nav a{padding:8px 10px} .hdr-in{padding-left:14px;gap:12px} } @media (max-width:1150px){ .nav a.btn-1{display:none} } @media (max-width:980px){ .nav a{padding:7px 8px;font-size:var(--t-base)} .brandmark{height:34px} .themebtn{padding:0;width:38px;justify-content:center;gap:0} .themebtn .th-txt{display:none} } @media (max-width:860px){ .burger{display:block;order:3} .nav{ position:absolute;top:calc(100% + 10px);left:0;right:0; padding:14px;border-radius:26px; background:var(--bg-raised); border:1px solid var(--line); box-shadow:0 20px 44px -18px rgba(0,0,0,.85); flex-direction:column;align-items:stretch;gap:6px; opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none; transform-origin:top center; transition:opacity .24s ease,transform .28s var(--ease-out); } :root[data-theme="light"] .nav{box-shadow:0 20px 44px -20px rgba(10,74,85,.5)} .nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto} .nav ul{flex-direction:column;gap:2px} .nav a{padding:12px 14px;font-size:var(--t-md)} .nav a:hover{transform:none} .nav a.btn-1{display:flex;justify-content:center;margin-top:10px;font-size:var(--t-sm)} } /* ---------- right-edge section rail ---------- A visible bar, not a row of loose dots: the pill, the little menu glyph at its head and the hairline under it are what tell a first-time visitor this is navigation rather than decoration. */ .railnav{ position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:62; display:flex;flex-direction:column;align-items:center;gap:2px; padding:12px 8px 14px; background:color-mix(in srgb,var(--bg-raised) 99%,transparent); border:1px solid var(--line); border-radius:999px; box-shadow:var(--elev-2); } .rail-cap{ display:grid;place-items:center;width:24px;height:24px;flex:none; color:var(--text-muted);margin-bottom:2px; background:transparent;border:0;padding:0;cursor:default;border-radius:50%; transition:color .2s ease,background .2s ease; } .rail-cap svg{width:14px;height:14px;display:block;transition:transform .25s var(--ease-out)} .rail-rule{ width:14px;height:1px;background:var(--line);flex:none;margin:4px 0 6px; } .rail-dots{display:flex;flex-direction:column;align-items:center;gap:2px} .railnav a{ display:flex;align-items:center;justify-content:center; width:22px;height:22px;flex:none; text-decoration:none;color:var(--text-muted);position:relative; border-radius:50%; } .railnav .lbl{ position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px); font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);letter-spacing:.12em; text-transform:uppercase;white-space:nowrap; background:var(--bg-raised); border:1px solid var(--line);border-radius:999px;padding:5px 11px; box-shadow:var(--elev-1); opacity:0;pointer-events:none; transition:opacity .2s ease,transform .24s var(--ease-out),color .2s ease; } /* Each section carries its own colour, and the colour is on the dot at rest — not only on hover — so the bar reads as eight distinct destinations. The eight run down the peacock-feather spectrum rather than being random. */ .railnav .dot{ width:9px;height:9px;flex:none;border-radius:50%; background:var(--c); border:1px solid color-mix(in srgb,var(--c) 70%,transparent); opacity:.62; transition:opacity .22s ease,transform .22s var(--ease-out),box-shadow .22s ease; } .railnav a:hover .dot,.railnav a:focus-visible .dot{opacity:1;transform:scale(1.18)} .railnav a[aria-current="true"]{background:color-mix(in srgb,var(--c) 15%,transparent)} .railnav a[aria-current="true"] .dot{ opacity:1;transform:scale(1.28); box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent); } .railnav .lbl{border-color:color-mix(in srgb,var(--c) 45%,var(--line))} .railnav a:hover .lbl,.railnav a:focus-visible .lbl{ opacity:1;transform:translateY(-50%) translateX(0);color:var(--c); } :root[data-theme="light"] .railnav a:hover .lbl{color:color-mix(in srgb,var(--c) 78%,#000)} /* Below 1240px there is no empty margin beside the content, so the rail collapses to just its glyph — a 34px button sitting in the gutter. Tapping it opens the coloured dots; tapping a dot jumps and closes it again. That keeps the menu present on tablets and phones instead of hiding it. */ @media (max-width:1239px){ .railnav{right:6px;padding:6px 5px} /* The names stay. They were hidden here, which meant that on any window narrower than 1240px — most laptops that are not full screen — hovering a dot told you nothing. They sit to the left of the rail, so there is room for them at any width worth showing a rail at. */ .rail-rule,.rail-dots{display:none} .rail-cap{cursor:pointer;width:26px;height:26px} .rail-cap:hover,.rail-cap:focus-visible{color:var(--text);background:var(--bg-sunken)} .railnav[data-open="true"]{padding:8px 5px 10px} .railnav[data-open="true"] .rail-rule{display:block} .railnav[data-open="true"] .rail-dots{display:flex} .railnav[data-open="true"] .rail-cap svg{transform:rotate(90deg)} .railnav[data-open="true"] .rail-cap{color:var(--brand)} .railnav a{width:26px;height:26px} .railnav .dot{width:10px;height:10px} } /* ---------- language dock, bottom right ---------- */ .langdock{ position:fixed;right:18px;z-index:78; bottom:calc(18px + env(safe-area-inset-bottom,0px)); display:flex;gap:2px;padding:5px; background:color-mix(in srgb,var(--bg-raised) 99%,transparent); border:1px solid var(--line);border-radius:999px; box-shadow:var(--elev-2); } .langdock button{ font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);letter-spacing:.06em; background:transparent;border:0;border-radius:999px;padding:8px 13px; color:var(--text-muted);cursor:pointer; transition:background .2s ease,color .2s ease; } .langdock button:hover{color:var(--text)} .langdock button[aria-pressed="true"]{background:var(--brand-deep);color:#fff} .langdock .bn{font-family:"Anek Bangla","Hind Siliguri",sans-serif} .langdock .hi{font-family:"Anek Devanagari","Noto Sans Devanagari",sans-serif} @media (max-width:520px){.langdock{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))} .langdock button{padding:7px 10px;font-size:var(--t-micro)}} /* the note that appears when a demo translation is switched on */ .langnote{ position:fixed;right:18px;z-index:77; bottom:calc(74px + env(safe-area-inset-bottom,0px)); max-width:min(320px,calc(100vw - 36px)); background:var(--bg-raised);border:1px solid var(--line); border-left:2px solid var(--gold);border-radius:var(--r-sm); padding:12px 15px;font-size:var(--t-xs);line-height:1.6;color:var(--text-muted); box-shadow:var(--elev-2); opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .3s ease,transform .3s var(--ease-out); } .langnote.show{opacity:1;transform:none} /* ---------- page tabs, above the footer ---------- */ .pagetabs{border-top:1px solid var(--line-soft);background:var(--bg-sunken)} .pagetabs-in{padding-block:clamp(48px,6vw,80px)} .tabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:32px} @media (min-width:900px){.tabgrid{grid-template-columns:repeat(3,1fr)}} .ptab{ display:flex;flex-direction:column;gap:3px; border:1px solid var(--line);border-radius:var(--r-md); background:var(--bg-raised);padding:16px 18px 18px;text-decoration:none; box-shadow:var(--elev-1); transition:box-shadow .26s var(--ease-out),transform .26s var(--ease-out),border-color .26s ease; } .ptab:hover{box-shadow:var(--elev-2);transform:translateY(-4px);border-color:var(--brand-deep)} .ptab i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:var(--t-micro); letter-spacing:.14em;color:var(--gold)} .ptab b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110; font-size:var(--t-md);font-weight:600;letter-spacing:-.02em;color:var(--text); transition:color .22s ease} .ptab:hover b{color:var(--brand)} .ptab span{font-size:var(--t-xs);color:var(--text-muted);line-height:1.5} @media (prefers-reduced-motion:reduce){.ptab:hover{transform:none}} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)} #iridescence{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9;z-index:1} /* Hero video. The source has a white studio background, so it is inverted and hue-rotated back — that turns the white into black, which `screen` then drops out entirely. What is left is the artwork glowing over the peacock field, which is what "transparent video" actually means on the web. */ .herovid{ position:absolute;inset:0;z-index:2; width:100%;height:100%;object-fit:cover; pointer-events:none; /* The invert / hue-rotate / saturate / blur chain and the radial mask used to run here, on every frame of a moving video. On a Windows laptop with no GPU compositing for filtered video that alone cost more than half the frame budget. The same chain is now baked into the video file itself, so the browser only has to draw pixels. */ mix-blend-mode:screen; opacity:.55; } /* Where the browser can play the alpha version there is nothing to blend: the clip is simply drawn where it is opaque and skipped where it is not, which is both cheaper and truer to the artwork's own colours. */ :root.vid-alpha .herovid{ mix-blend-mode:normal; opacity:.85; } /* The clip is pre-inverted for the dark hero, so screening it over a light background washes out to nothing. Light mode drops it and keeps the colour field on its own. */ :root[data-theme="light"] .herovid{display:none} /* Unless the alpha version is playing, in which case the artwork can simply be turned the right way up again — inverting RGB leaves the alpha channel alone, so the shape stays and only the colours flip back. Measured at the same frame rate as no video at all. */ :root.vid-alpha[data-theme="light"] .herovid{ display:block; mix-blend-mode:normal; opacity:.42; filter:invert(1) hue-rotate(180deg); } @media (max-width:760px){.herovid{opacity:.34}} @media (prefers-reduced-motion:reduce){.herovid{display:none}} /* Two veils: one down the page, one across it, so the headline always sits on a dark field no matter what the video is showing behind it. */ .veil{position:absolute;inset:0;z-index:3;background: linear-gradient(95deg, color-mix(in srgb,var(--bg) 92%,transparent) 0%, color-mix(in srgb,var(--bg) 72%,transparent) 32%, color-mix(in srgb,var(--bg) 22%,transparent) 64%, transparent 100%), linear-gradient(180deg, color-mix(in srgb,var(--bg) 22%,transparent) 0%, color-mix(in srgb,var(--bg) 34%,transparent) 58%, var(--bg) 100%)} /* Logo lockup */ .brandmark{ height:42px;width:auto;flex:none;display:block; filter:drop-shadow(0 2px 7px rgba(0,0,0,.5)); } .foot-brand .brandmark{height:54px} /* The mark is a touch taller than it was, because the menu beside it grew two sizes and a logo that no longer holds its own against the links reads as an afterthought. */ .brandmark{height:48px} .foot-brand .brandmark{height:58px} @media (max-width:980px){.brandmark{height:38px}} /* The mark is an animated WebP, so the