/*! Alekhyam experience layer · ux-v3.css · 2026-09-24
Loaded site-wide AFTER nav-v15.css (Header Code). Design and interaction only: no content, price, listing or
CTA is hidden, removed or reworded. State classes come from ux-v3.js and live ONLY on :
akx (layer on) · akx-nav (page has the shared navbar) · akx-scrolled · akx-tucked · akx-hold (drawer or
currency menu open, or the drawer closing: header stays at rest geometry) · akx-drawer-open ·
akx-drawer-closing · akx-kbd · akx-rm (reduced motion) · akx-protected (founder-locked page: nothing runs)
v2 = v1 minus its measured regressions (research/implementation_map.md §0, R1–R13):
- no header state on pages without the navbar (menu-OFF ad pages) or on the Course Library (html.ak-nav-on);
- no rule moves the landing offer bar: the organic follower already pins it under whatever is painted;
- no scroll-padding / smooth-scroll (chip landings and the library wheel handler are tuned without them);
- drawer close = a timed class (nav-v15 doctrine), never a visibility transition;
- the 90px transparent navbar SECTION no longer swallows taps below the bar.
Never put transform / filter / backdrop-filter / will-change on .is-topbar, its container, .is-menu or the
section: the drawer is a position:fixed child and would re-anchor; layer promotion blurs it (nav-v15 §2, §8).
Rollback: jobs/ux_layer_inject_2026-09-24.ts --version=3 --remove --go (or --version=2 --from=3) */
/* icon tokens: layer/src/icons.py */
:root{
--akx-i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
--akx-i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='12.5' rx='2.5'/%3E%3Cpath d='M10.5 8.4v4.7l4-2.35z'/%3E%3Cpath d='M8.5 20.5h7'/%3E%3C/svg%3E");
--akx-i-gift:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12.5V20h14v-7.5M12 8.5V20'/%3E%3Cpath d='M12 8.5C10.8 5.2 7 4.9 7 6.9S10.2 8.5 12 8.5zM12 8.5c1.2-3.3 5-3.6 5-1.6S13.8 8.5 12 8.5z'/%3E%3C/svg%3E");
--akx-i-question:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.4a2.7 2.7 0 0 1 5.2.9c0 1.8-2.6 2.4-2.6 2.4M12 16.6h.01'/%3E%3C/svg%3E");
--akx-i-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.9-5.2-2.7-5.2 2.7 1-5.9-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E");
--akx-i-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E");
--akx-i-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01'/%3E%3C/svg%3E");
--akx-i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 14.5 12 9l5.5 5.5'/%3E%3C/svg%3E");
--akx-i-steps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h5v-5h5V9h6'/%3E%3Cpath d='M4 19V5'/%3E%3C/svg%3E");
--akx-i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M15.5 5.3a3 3 0 0 1 0 5.4M17.8 19a5 5 0 0 0-2.4-4.3'/%3E%3C/svg%3E");
--akx-i-drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5s6 6.4 6 10.5a6 6 0 0 1-12 0c0-4.1 6-10.5 6-10.5z'/%3E%3C/svg%3E");
--akx-i-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.2-1 10.3-10.3a2.1 2.1 0 0 0-3-3L5.2 16 4 20z'/%3E%3Cpath d='M13.5 6.5l3 3'/%3E%3C/svg%3E");
--akx-i-smile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
--akx-i-userplus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.4'/%3E%3Cpath d='M4 20a6 6 0 0 1 12 0M18.5 8v6M15.5 11h6'/%3E%3C/svg%3E");
--akx-i-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
--akx-i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
--akx-i-palette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 0 17c1.2 0 1.8-.8 1.8-1.7 0-1.2-1-1.6-1-2.7 0-1 .8-1.6 1.8-1.6h2.1a3.8 3.8 0 0 0 3.8-3.8c0-4-3.8-7.2-8.5-7.2z'/%3E%3Cpath d='M7.6 11.6h.01M9.6 7.6h.01M14.4 7.6h.01'/%3E%3C/svg%3E");
--akx-i-award:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M8.8 13l-1.3 7 4.5-2.4 4.5 2.4-1.3-7'/%3E%3C/svg%3E");
--akx-i-refund:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E");
--akx-i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
--akx-i-playc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.8v6.4l5.2-3.2z'/%3E%3C/svg%3E");
--akx-i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
--akx-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
--akx-i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3.8 7l8.2 6 8.2-6'/%3E%3C/svg%3E");
--akx-i-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10M19.5 4.5 11 13M17 13.5v4a2 2 0 0 1-2 2H6.5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");
--akx-i-chevu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 14.5 12 9l5.5 5.5'/%3E%3C/svg%3E");
--akx-i-chevd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
}
:root{
--akx-ease-out: cubic-bezier(.22,.8,.2,1); /* decelerate: things arriving */
--akx-ease-in: cubic-bezier(.4,0,.8,.3); /* accelerate: things leaving */
--akx-ease-std: cubic-bezier(.3,.7,.3,1);
--akx-base: 240ms;
--akx-slow: 380ms;
--akx-wine: #7A2436;
--akx-hair: rgba(28,22,18,.08);
}
/* ── 1 · Landing sticky mini-logo → the tile alone ─────────────────────────────────────────────────
Founder 24-Sep: "do the tile-only mark on the landing sticky logos". Shows on the menu-OFF landing pages (on
the organic ones the template hides its own brand). The ![]()
keeps its src, srcset, alt and link; its bitmap
is pushed out of its own box and the approved tile (vector, crisp at any density) is painted in its place.
32px = BRAND_ASSETS_CURRENT rule 4 (small logo minimum 32px height).
(1,3,1)+ !important beats every page's `#akrw-hero-v20 .akrw-top-sticky-logo` (1,1,0) !important.
The founder-locked 3-day page (ACTIVE_MANUAL_PAGE_PROTECTIONS.md) is excluded in pure CSS, so there is no
flash before the script runs; browsers without :has() drop the whole rule and keep today's lockup. */
html:not(.akx-protected):not(:has(link[href*="/3-day-watercolour-workshop-online-v3/"])) #akrw-hero-v20 .akrw-top-sticky-cta .akrw-top-sticky-brand > img.akrw-top-sticky-logo{
width:32px !important;
height:32px !important;
max-width:none !important;
max-height:none !important;
object-fit:none !important;
object-position:-9999px -9999px !important;
background:url("https://cdn.alekhyam.in/landing-pages/shared-common-assets/images/brand-assets/alekhyam-c/alekhyam-c-tile-oxblood.svg") left center / contain no-repeat !important;
}
/* ── 2 · Quiet affordances (zero specificity where a page may have its own opinion) ─────────────── */
html.akx-kbd a:focus-visible, html.akx-kbd button:focus-visible, html.akx-kbd summary:focus-visible,
html.akx-kbd [tabindex]:focus-visible, html.akx-kbd input:focus-visible, html.akx-kbd select:focus-visible{
outline:2px solid var(--akx-wine) !important;
outline-offset:3px !important;
}
:where(html.akx) :where(a, button, summary){ -webkit-tap-highlight-color:rgba(122,36,54,.10); }
:where(html.akx) ::selection{ background:rgba(122,36,54,.16); }
/* ── 3 · The header quiets down on scroll (phones and tablets, pages with the shared navbar) ──────────
At rest: nav-v15's solid paper bar, 77px. Once scrolled it gets quieter, never louder:
• the shadow becomes a hairline;
• the bar AND its container compact 77→60px together (the platform's own .shrink is 70px) and the logo and
currency pill settle (transform on the logo CELL and .akcur only — both already transformed);
• on long sales pages that dock their own booking bar (organic course pages), reading downwards hands the top
over to that bar: one sticky bar at a time (Apple/Adobe product pages). 40px of deliberate upward travel, the
top of the page, or any in-page jump brings the header back. Everywhere else the header never leaves; it only
quiets (4 of 6 premium references never hide a global bar: research/references/design_references.md §1a).
The 90px transparent navbar section stays put, so it stops taking taps; only the bar itself does (R3). */
html.akx-nav:not(.ak-nav-on) .is-wrapper > .is-section-navbar{ pointer-events:none !important; }
html.akx-nav:not(.ak-nav-on) .is-wrapper > .is-section-navbar .is-topbar{ pointer-events:auto !important; }
@media (max-width:1024px){
html.akx-nav:not(.ak-nav-on):not(.akx-rm) .is-topbar{
transition:top var(--akx-slow) var(--akx-ease-out), height var(--akx-base) var(--akx-ease-std),
box-shadow var(--akx-base) var(--akx-ease-std) !important;
}
html.akx-nav:not(.ak-nav-on):not(.akx-rm) .is-topbar .is-topbar-container{
transition:height var(--akx-base) var(--akx-ease-std);
}
html.akx-nav:not(.ak-nav-on):not(.akx-rm) .is-topbar .is-topbar-logo{
transition:transform var(--akx-base) var(--akx-ease-std), height var(--akx-base) var(--akx-ease-std) !important;
}
html.akx-nav:not(.ak-nav-on):not(.akx-rm) .is-topbar .akcur{
transition:transform var(--akx-base) var(--akx-ease-std);
}
html.akx-nav:not(.ak-nav-on) .is-topbar .akcur{ transform-origin:100% 50%; }
html.akx-nav.akx-scrolled:not(.ak-nav-on) .is-topbar{
box-shadow:0 1px 0 var(--akx-hair) !important;
}
html.akx-nav.akx-scrolled:not(.ak-nav-on):not(.akx-hold) .is-topbar,
html.akx-nav.akx-scrolled:not(.ak-nav-on):not(.akx-hold) .is-topbar .is-topbar-container{
height:60px !important;
}
html.akx-nav.akx-scrolled:not(.ak-nav-on):not(.akx-hold) .is-topbar .is-topbar-logo{
height:60px !important;
transform:translateX(-50%) scale(.86) !important;
}
html.akx-nav.akx-scrolled:not(.ak-nav-on):not(.akx-hold) .is-topbar .akcur{
transform:translateY(-50%) scale(.84) !important;
}
html.akx-nav.akx-tucked:not(.ak-nav-on):not(.akx-hold) .is-topbar{
top:-66px !important;
}
html.akx-nav.akx-tucked:not(.ak-nav-on):not(.akx-hold):not(.akx-rm) .is-topbar{
transition:top var(--akx-base) var(--akx-ease-in), height var(--akx-base) var(--akx-ease-std),
box-shadow var(--akx-base) var(--akx-ease-std) !important;
}
}
/* ── 4 · The drawer's own motion ──────────────────────────────────────────────────────────────────────
nav-v15 parks the full-width drawer at left:-1000px under the platform's generic `.3s` ease: on a 390px phone
~60% of that tween happens off-screen, so the panel seems to wait, then snap. Parked at -100% the whole slide
is visible; arrival decelerates (380ms), departure accelerates (260ms). Only `left` moves. Not !important, so
the platform's inline `transition:none` still wins on resize, as it intends.
Closing: the platform hides the list the instant the toggle loses .active (nav-v15 v8-8), which slid a blank
sheet across the page. ux-v3.js holds `akx-drawer-closing` on for the close duration: the list stays
visible and the wordmark rides out with its panel, then the class goes and v8-8 takes over again. Timers, not
transitions, decide visibility (SOP 44 §6 trap 3). The ::before below mirrors nav-v15 :104-115 + v15. */
@media (max-width:1024px){
html.akx-nav:not(.akx-rm) .is-topbar .is-menu{
left:-100%;
transition:left 260ms var(--akx-ease-in);
}
html.akx-nav:not(.akx-rm) .is-topbar #is-menu-toggle.active ~ .is-menu{
left:0;
transition:left var(--akx-slow) var(--akx-ease-out);
}
html.akx-drawer-closing .is-topbar #is-menu-toggle:not(.active) ~ .is-menu > ul.is-menu-links{
visibility:visible !important;
}
html.akx-drawer-closing .is-topbar #is-menu-toggle:not(.active) ~ .is-menu::before{
content:"";
position:absolute;
top:14px;
left:50%;
margin-left:-94px;
width:188px;
height:50px;
background:url("https://cdn.edbound.app/public/72bb05dd-094c-49f5-b52d-7e07659be3e0/websitelogo/23092026/dyqly.png") no-repeat 50% 50%;
background-size:188px 50px;
pointer-events:none;
}
}
/* ── 5 · Reduced motion: states still apply, movement does not ─────────────────────────────────────── */
html.akx-rm .is-topbar, html.akx-rm .is-topbar *{ transition-duration:0s !important; }
/* ══ v3 · 2026-09-24 · founder's second overnight message ═══════════════════════════════════════════
"the inr button doesn't look well designed" · "the cross button on this top navbar on mobile needs replacement
or visual enhancement" · "expanded menu disappears upon scrolling on it" · "the jump menu doesnt jump on the
section focused ... the jumper menu also can have icons, and it should land focused on sections, not in mid of
anything leaking above or below them ... make the jumper menu navigation icons and jump focus and animations
highly intutive and designed". Icons: layer/src/icons.py (24px grid, 1.8 stroke, the course-chip language). */
/* ── 6 · The open drawer holds the page still ──────────────────────────────────────────────────────────
The scroller on this site is , not ; the platform only locks body. A swipe on a drawer whose rows
fit the screen therefore scrolled the page behind it, and the Header Code close-on-scroll script then shut the
drawer after 10px: the menu "disappeared upon scrolling on it". With the page held, gestures stay in the menu. */
@media (max-width:1024px){
html.akx-drawer-open, html.akx-drawer-open body{ overflow:hidden !important; overscroll-behavior:none !important; }
html.akx-nav .is-topbar .is-menu{ overscroll-behavior:contain; }
}
/* ── 7 · The drawer's × ───────────────────────────────────────────────────────────────────────────────
Same 44px target and position (nav-v15 §2e), quieter drawing: the shadowed disc becomes a hairline ring inside a
transparent 2px edge, and the two strokes shorten to an 18px mark in ink. The morph takes 240ms on the standard
curve instead of the platform's generic .4s, and the ring settles in once. Nothing here transforms an ancestor of
the fixed drawer (the ::before and the .line spans are leaves). */
@media (max-width:1024px){
html.akx-nav .is-topbar #is-menu-toggle .line{ background:#1C1612 !important; }
html.akx-nav:not(.akx-rm) .is-topbar #is-menu-toggle .line{
transition:transform 240ms cubic-bezier(.4,0,.2,1), opacity 160ms linear !important;
}
html.akx-nav .is-topbar #is-menu-toggle.active .line-1{ transform:translateY(7px) rotate(45deg) scaleX(.72) !important; }
html.akx-nav .is-topbar #is-menu-toggle.active .line-3{ transform:translateY(-7px) rotate(-45deg) scaleX(.72) !important; }
html.akx-nav .is-topbar #is-menu-toggle.active::before{
border:2px solid transparent !important;
background:#FBF7F2 padding-box !important;
box-shadow:inset 0 0 0 1px rgba(28,22,18,.14) !important;
}
html.akx-nav:not(.akx-rm) .is-topbar #is-menu-toggle.active::before{ animation:akx-ring-in 260ms cubic-bezier(.22,.61,.36,1); }
}
@keyframes akx-ring-in{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:none; } }
/* ── 8 · The currency control ─────────────────────────────────────────────────────────────────────────
The runtime styles it as a white 71×52 stadium (12.5px bold, min-height 40 + padding) sitting on the cream bar.
Here it becomes a 34px hairline pill in the bar's own paper, 13px medium, with a finer chevron that turns when
open, a 44px touch target, and a paper menu with 44px rows and a check on the current currency. The runtime's