/* ========================================================================= AANGAN · PAINTED SLABS (rebuild phase 6) ------------------------------------------------------------------------- Positioning for js/36-slabs.js. The slabs are absolutely placed so each one can carry its own size and tilt — a hand-laid hopscotch, not a grid. Scoped to #ckLangdi, so nothing else on the home screen is touched. ========================================================================= */ /* the grass fills the floor; the red wash and the dust belong to the tiles */ #homeOv > .ck-floor .ck-wash{background:transparent} #homeOv > .ck-floor .ck-dust{opacity:.025} #homeOv > .ck-floor .ck-edge{background:radial-gradient(128% 82% at 50% 40%, rgba(0,0,0,0) 58%, rgba(22,28,12,.42) 100%)} /* zero side padding so the slab run is centred by its own maths */ #ckLangdi[data-slabs="1"]{position:relative;margin:6px 0 14px;padding-left:0;padding-right:0} .slabcell{position:absolute;cursor:pointer; filter:drop-shadow(0 5px 7px rgba(24,20,8,.5)); transition:transform .16s cubic-bezier(.2,.8,.25,1), filter .16s ease} .slabcell:active{filter:drop-shadow(0 2px 4px rgba(24,20,8,.55))} .slabcell:focus-visible{outline:3px solid #fdf8ec;outline-offset:3px;border-radius:4px} .slabcell .slabimg{width:100%;height:100%;display:block;pointer-events:none;user-select:none} /* ---- THE HAND ON THE TILES ---------------------------------------------- The tile is the ONE place a handwriting face is used, and it is chosen, not defaulted: the labels are meant to look WRITTEN, the way a name is chalked on a slab (owner 2026-07-29). Gloria Hallelujah covers Latin only. The labels translate, so every other script needs its OWN handwriting face — a Latin handwriting font cannot carry Devanagari, Gujarati or Gurmukhi, and substituting one that can (Kalam) loses the hand the owner picked. So the face is a variable, set per script off . The owner is supplying a handwriting font for Gujarati, Hindi, Punjabi and Marathi; each one drops into its own line below and nothing else has to change. Until then those scripts fall back to Noto, which is legible and plain — deliberately not a wrong hand. */ :root{ --slab-hand:"Gloria Hallelujah",cursive; } html[lang="hi"],html[lang="mr"]{ /* --slab-hand:"", ... ; */ /* until a real hand exists, Baloo 2 at least carries the family's voice rather than the system's (owner 2026-08-12) */ --slab-hand:"Baloo 2","Noto Sans Devanagari",cursive; } html[lang="gu"]{ /* --slab-hand:"", ... ; */ --slab-hand:"Baloo Bhai 2","Noto Sans Gujarati",cursive; } html[lang="pa"]{ /* --slab-hand:"", ... ; */ --slab-hand:"Baloo Paaji 2","Noto Sans Gurmukhi",cursive; } /* the painted name, centred on bare stone */ .slabcell .slablbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--slab-hand); letter-spacing:.3px;color:#fffaf0; white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px rgba(60,28,14,.55)} /* The small painted number in the corner. Matches nothing today: 36-slabs.js stopped painting the numerals on 2026-07-30 — inside the painted border of a half-width slab there was no corner they could take without crowding the heading. Kept with the `n` in ROOMS, for wider slabs. */ .slabcell .slabnum{position:absolute;font-family:var(--slab-hand);color:#fffaf0; opacity:.62;pointer-events:none;text-shadow:0 1px 3px rgba(60,28,14,.5)} /* the throw target 33-chalk-home.js aims at */ .slabcell .hit{position:absolute;inset:0;display:block} /* the landed square, after the marble lands on it */ .slabcell.lit{transform:scale(.97) rotate(0deg)!important; filter:drop-shadow(0 2px 5px rgba(24,20,8,.6)) brightness(1.12)} @media (prefers-reduced-motion:reduce){ .slabcell{transition:none} } /* ---- installed-app safe areas (CRITICAL, owner 2026-07-28) ---- chalk-home.css zeroes the overlay padding and gives .homehead a flat 14px top. Fine in a browser tab; once the app is installed to the home screen there is no browser chrome, so the identity row sat under the status bar. */ #homeOv .homehead{padding-top:calc(14px + env(safe-area-inset-top))} #homeOv .homebody{padding-bottom:calc(18px + env(safe-area-inset-bottom))} /* ---- type: Baloo leads, Mukta carries the detail, the hand only on the tiles ---- */ #homeOv .ck-title,#homeOv .ck-name,#homeOv .ck-sec,#homeOv h2,#homeOv h3, #homeOv .hh-title,#homeOv .stt,#homeOv .gcard b,#homeOv .bigbtn .bt{ font-family:"Baloo Bhai 2",ui-sans-serif,system-ui,sans-serif;font-weight:700} #homeOv,#homeOv .ck-body,#homeOv .sts,#homeOv .gcard,#homeOv .bigbtn .bs,#homeOv p,#homeOv small{ font-family:"Mukta",ui-sans-serif,system-ui,sans-serif} /* ---------------------------------------------------------------- WIND ---- THE GRASS MOVES, not things standing in it (owner 2026-07-31). The dense mat stays a background-image, because it is the ground and the ground does not move — and because a background cannot animate anyway. Over it stands a field of tufts as real elements, each pivoting about its own base with its own period, phase and throw. That per-blade pivot is the whole reason this cannot be done to the mat itself: a merged path has one origin, and skewing the field in bands displaces each blade's base as far as its tip, so the ground shears instead of the grass bending. No will-change. It would promote every tuft to its own compositor layer, and there are a few hundred of them; the browser rasters these small and cheaply on its own. */ #homeOv > .ck-floor .ck-wind{position:absolute;inset:0;pointer-events:none; overflow:hidden;z-index:1;contain:layout paint} #homeOv > .ck-floor .ck-wind .gwind{position:absolute;display:block; transform-origin:50% 100%; animation:gsway var(--d,3.4s) ease-in-out var(--t,0s) infinite} #homeOv > .ck-floor .ck-wind .gwind svg{display:block; transform:translate(-50%,-100%);position:absolute;left:0;top:0} @keyframes gsway{ 0%,100%{transform:rotate(calc(var(--a,3deg) * -1))} 50% {transform:rotate(var(--a,3deg))}} @media (prefers-reduced-motion: reduce){ #homeOv > .ck-floor .ck-wind .gwind{animation:none} }