:root{ /* Referenced by eight hero rules but never defined, so the italic accent word fell back to the body colour on products, platform, services, shop and about. Value taken from the rgba(240,158,199) the same stylesheet pairs it with. */ --rose:#f09ec7;--gold:#d9b45a;--gold-bright:#f0d488;--gold-dim:#8a7038;--ink:#e9e4d4; /* The same silent failure as --rose above, on three more tokens, across 44 references with no fallback on any of them. An invalid var() makes the whole declaration unset, so: the 18 `border:1px solid var(--line)` rules rendered no border at all, `color:var(--muted)` inherited --ink and left secondary text at full strength, and the .kathakar-audiences hairline grid — gap:1px over background:var(--line), children filled with var(--bg) — lost both its dividers and its panel fill, leaving the copy sitting on the starfield. Values taken from the siblings each one pairs with: .exp-visual and .studio-visual border rgba(255,255,255,.09) over the same rgba(255,255,255,.025) card; the global .lede is #b6c0d2, which .about-hero-copy .lede overrides to var(--muted); #050813 is the base background body itself falls back to. */ --line:rgba(255,255,255,.09);--muted:#b6c0d2;--bg:#050813} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{width:100%;min-height:100%;background:var(--realm-bg,#050813);color:var(--ink);font-family:'Lato',sans-serif; -webkit-font-smoothing:antialiased} /* the starfield is a fixed backdrop — the page scrolls normally above it */ #stage{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none} #stage canvas{pointer-events:none} canvas{display:block} /* same vignette + grain as the experience build */ .vignette{position:fixed;inset:0;pointer-events:none;z-index:1; background:radial-gradient(ellipse 100% 80% at 50% 48%,transparent 34%,rgba(3,6,15,.5) 80%,rgba(3,6,15,.94) 100%); mix-blend-mode:multiply} .grain{position:fixed;inset:-50%;pointer-events:none;z-index:2;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 8s steps(6) infinite} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}} /* ---------- boot: logo -> divine light -> the screen parts ---------- */ .boot{position:fixed;inset:0;z-index:90;pointer-events:none} .boot.done{display:none} .leaf{position:absolute;top:0;bottom:0;width:50.2%;overflow:hidden;background:#050813; transition:transform .8s cubic-bezier(.72,0,.16,1)} .leaf.l{left:0} .leaf.r{right:0} /* each leaf carries a full-width copy of the mark, so the logo itself splits */ .leaf-in{position:absolute;top:0;bottom:0;width:199.2%;display:grid;place-items:center} .leaf.l .leaf-in{left:0} .leaf.r .leaf-in{right:0} .boot.open .leaf.l{transform:translateX(-100.5%)} .boot.open .leaf.r{transform:translateX(100.5%)} .boot-logo{width:min(280px,52vw);height:auto;display:block; filter:drop-shadow(0 0 46px rgba(217,180,90,.42)); animation:breathe 1.6s ease-in-out infinite} .boot.ignite .boot-logo{animation:none; filter:drop-shadow(0 0 70px rgba(246,226,163,.95)) brightness(1.45); transition:filter .3s ease,opacity .3s ease .2s} .boot.open .boot-logo{opacity:0} @keyframes breathe{0%,100%{opacity:.42;transform:scale(.955)}50%{opacity:1;transform:scale(1.03)}} /* the divine light down the centre */ .seam{position:absolute;left:50%;top:50%;width:2px;height:0; transform:translate(-50%,-50%);z-index:2;opacity:0; background:linear-gradient(180deg,transparent,#fff4d0 18%,#f0d488 50%,#fff4d0 82%,transparent); box-shadow:0 0 30px 7px rgba(246,226,163,.85),0 0 90px 26px rgba(217,180,90,.45); transition:height .26s cubic-bezier(.16,.9,.3,1),opacity .14s ease} .boot.ignite .seam{height:104%;opacity:1} .boot.open .seam{opacity:0;transition:opacity .4s ease} .flare{position:absolute;left:50%;top:50%;width:74vmax;height:74vmax;z-index:1;opacity:0; transform:translate(-50%,-50%) scale(.25);pointer-events:none; background:radial-gradient(circle,rgba(255,244,208,.95) 0%,rgba(246,226,163,.42) 16%,rgba(217,188,94,.26) 34%,transparent 62%); transition:opacity .26s ease,transform .55s cubic-bezier(.16,.9,.3,1)} .boot.ignite .flare{opacity:.85;transform:translate(-50%,-50%) scale(1)} .boot.open .flare{opacity:0} /* shown only if WebGL is unavailable */ .fallback{position:fixed;inset:0;z-index:80;display:none;place-items:center; background:radial-gradient(ellipse at 50% 45%,#0a1430,#050813 70%)} .fallback img{width:min(300px,56vw);height:auto;filter:drop-shadow(0 0 40px rgba(217,180,90,.35))} .fallback.on{display:grid} /* once the page itself is showing, the fallback is just a background */ body.revealed .fallback.on img{display:none} body.revealed .fallback.on{background: radial-gradient(ellipse 120% 90% at 50% 20%,#0d1730,#050813 70%)} @media(prefers-reduced-motion:reduce){.grain,.boot-logo{animation:none} .boot{display:none}} /* ============================================================ PAGE LAYER — sits above the fixed starfield ============================================================ */ .page,.route{position:relative;z-index:10} .route[hidden]{display:none} .shell{width:min(calc(100% - 48px),1180px);margin:0 auto} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:300;margin:0;letter-spacing:-.01em} h1{font-size:clamp(42px,6.2vw,86px);line-height:1.02;text-shadow:0 2px 26px rgba(5,8,19,.9)} h2{font-size:clamp(28px,3.8vw,50px);line-height:1.08;text-shadow:0 2px 22px rgba(5,8,19,.9)} h3{font-size:clamp(19px,1.9vw,25px);line-height:1.2;font-weight:400} p{margin:0} em{font-style:italic;color:var(--gold)} .kicker{font-family:'Lato',sans-serif;font-weight:700;letter-spacing:.34em;text-transform:uppercase; font-size:10.5px;color:var(--gold);margin-bottom:18px;text-shadow:0 1px 12px rgba(5,8,19,.95); display:flex;align-items:center;justify-content:center;gap:14px} .sec-head .kicker::after{content:"";width:34px;height:1px;background:rgba(217,180,90,.4)} .lede{color:#b6c0d2;font-size:clamp(15px,1.4vw,18px);line-height:1.6;text-shadow:0 1px 14px rgba(5,8,19,.95)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 30px; border-radius:999px;font-family:'Lato',sans-serif;font-size:15.5px;font-weight:700; letter-spacing:.06em;border:1px solid var(--gold);color:var(--gold); transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease} .btn i{font-style:normal;transition:transform .3s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(246,226,163,.34); border-color:var(--gold-bright);color:var(--gold-bright)} .btn:hover i{transform:translateX(4px)} .btn.solid{background:var(--gold);color:#050813;border-color:var(--gold)} .btn.solid:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#050813; box-shadow:0 16px 46px rgba(246,226,163,.42)} .link{font-family:'Lato',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--gold);display:inline-flex;gap:9px;align-items:center} .link:hover{color:var(--gold-bright)} .link i{font-style:normal;transition:transform .3s ease} .link:hover i{transform:translateX(4px)} /* ---------- header ---------- */ .hdr{position:fixed;top:0;left:0;right:0;z-index:60; transition:background .35s ease,border-color .35s ease,padding .35s ease; border-bottom:1px solid transparent} /* the bar is transparent at the top, so a soft gradient keeps the wordmark and nav clear of bright dust particles behind them */ .hdr::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background:linear-gradient(180deg,rgba(5,8,19,.78) 0%,rgba(5,8,19,.62) 55%,rgba(5,8,19,0) 100%); transition:opacity .35s ease} .hdr.stuck::before{opacity:0} .hdr.stuck{background:rgba(5,8,19,.86);backdrop-filter:blur(16px); border-bottom-color:rgba(217,188,94,.26)} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:20px 0; transition:padding .35s ease} .hdr.stuck .hdr-in{padding:12px 0} .brand{display:flex;align-items:center;gap:16px} .brand img{height:50px;width:auto;transition:height .35s ease} .hdr.stuck .brand img{height:38px} /* ---------- brand lockup: the wordmark itself rolls through scripts ---------- */ .brand-type{display:flex;align-items:baseline;gap:9px;line-height:1;min-width:0} /* fixed window, one line tall; the track rolls a line at a time */ .brand-roll{display:block;height:42px;overflow:hidden} .roll-track{display:block;will-change:transform; transition:transform .55s cubic-bezier(.62,0,.2,1)} .roll-track span{display:block;height:42px;line-height:42px;white-space:nowrap; font-family:'Lato','Noto Sans Devanagari','Noto Sans Kannada','Noto Sans Tamil', 'Noto Sans Telugu','Noto Sans Bengali','Noto Sans Malayalam','Noto Sans Gujarati',sans-serif; font-size:19px;font-weight:700;color:var(--ink); transition:font-size .35s ease} /* wide tracking suits the Latin caps; Indic scripts need it tight */ .roll-track span[lang="en"]{letter-spacing:.26em} .roll-track span:not([lang="en"]){letter-spacing:.02em;font-size:19.5px;font-weight:500} .hdr.stuck .roll-track span{font-size:15.5px} .hdr.stuck .roll-track span:not([lang="en"]){font-size:17px} @media(max-width:1000px){ .roll-track span{font-size:15px} .roll-track span:not([lang="en"]){font-size:16.5px} .roll-track span[lang="en"]{letter-spacing:.2em} } @media(max-width:520px){.brand-type{display:none}} .nav{display:flex;align-items:center;gap:26px;font-family:'Lato',sans-serif;font-size:13.5px; letter-spacing:.03em} .nav a{color:#b9c0d0;transition:color .25s ease} .nav a:hover{color:var(--gold)} .nav .btn{min-height:42px;padding:0 20px;font-size:12.5px} .nav-shop{color:var(--gold) !important;font-weight:700;letter-spacing:.08em; text-transform:uppercase;font-size:12px} .nav-shop:hover,.nav-shop[aria-current="page"]{color:var(--gold-bright) !important} .nav-shop[aria-current="page"]{text-decoration:underline;text-underline-offset:6px} .burger{display:none;width:44px;height:44px;background:none;border:1px solid rgba(217,180,90,.3); border-radius:50%;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px} .burger span{display:block;width:16px;height:1px;background:var(--gold);transition:transform .3s ease,opacity .3s ease} .burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)} .drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);z-index:70; background:rgba(5,8,19,.97);backdrop-filter:blur(18px); border-left:1px solid rgba(217,188,94,.30); transform:translateX(100%);transition:transform .45s cubic-bezier(.5,0,.2,1); display:flex;flex-direction:column;padding:96px 30px 40px;gap:4px} .drawer.open{transform:none} .drawer a{font-family:'Cormorant Garamond',serif;font-size:24px;padding:14px 0; border-bottom:1px solid rgba(217,180,90,.1);color:var(--ink)} .drawer a:hover{color:var(--gold)} .drawer .btn{margin-top:22px;justify-content:center} .scrim{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.6); opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease} .scrim.on{opacity:1;visibility:visible} body.locked{overflow:hidden} /* ---------- hero ---------- */ .hero{min-height:100svh;display:flex;align-items:center;position:relative; background:#050813 url("/images/site/2ec16ac5ecf9.jpg") 80% center/cover no-repeat; padding:104px 0 104px} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(to bottom,transparent 60%,rgba(5,8,19,.45) 80%,rgba(5,8,19,.88) 100%), linear-gradient(to right,rgba(4,7,17,.20),rgba(4,7,17,.02) 55%,rgba(4,7,17,.06) 100%), linear-gradient(to bottom,rgba(4,7,17,.34) 0%,rgba(4,7,17,.16) 16%,rgba(4,7,17,.70) 30%,rgba(4,7,17,.78) 47%,rgba(4,7,17,.70) 62%,rgba(4,7,17,.20) 74%,rgba(4,7,17,.30) 85%,rgba(4,7,17,.82) 100%), linear-gradient(rgba(4,7,17,.14),rgba(4,7,17,.14))} .hero .shell{position:relative} /* one centred column */ .hero-grid{display:block} .hero-copy{max-width:900px;margin:0 auto;text-align:center} .hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px; margin-bottom:26px; font-family:'Lato',sans-serif;font-size:12px;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:var(--gold);text-shadow:0 1px 12px rgba(5,8,19,.95)} .hero-eyebrow s{width:5.5px;height:5.5px;border-radius:50%;background:rgba(217,180,90,.5); text-decoration:none;flex:0 0 auto} .hero h1{margin-bottom:26px;font-size:clamp(30px,4.5vw,64px);max-width:24ch;margin-inline:auto} .hero .lede{max-width:660px;margin:0 auto 40px;font-size:clamp(17px,1.65vw,21px);line-height:1.62} .hero-cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center} .proof-line{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 48px; margin:56px auto 0;padding-top:30px;max-width:860px;text-align:center; border-top:1px solid rgba(217,188,94,.30)} .proof-line div{font-family:'Lato',sans-serif;font-size:16.5px;color:#c4ccd9;line-height:1.5; text-shadow:0 1px 12px rgba(5,8,19,.95)} .proof-line b{display:block;font-weight:700;font-size:15.5px;color:var(--gold-bright); letter-spacing:.05em;margin-bottom:6px} .hero @keyframes cueDrop{0%,100%{opacity:.3;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}} /* ---------- hero: the institutions strip along the bottom edge ---------- */ .hero{padding-bottom:clamp(56px,7vh,84px);padding-top:clamp(56px,7vh,84px)} .hero-ticker{position:absolute;left:0;right:0;bottom:0;z-index:2; display:flex;align-items:center;gap:clamp(14px,2.4vw,34px); padding:16px clamp(20px,4vw,54px); border-top:1px solid rgba(217,188,94,.24); background:linear-gradient(0deg,rgba(5,8,19,.72),rgba(5,8,19,.28)); backdrop-filter:blur(6px)} .hero-ticker-label{flex:0 0 auto;font-family:'Lato',sans-serif;font-size:9.5px; font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold); opacity:.85;white-space:nowrap} .hero-ticker .ticker{flex:1;min-width:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent)} .hero-ticker .ttrack{animation-duration:44s} .hero-ticker .ttrack span{font-size:clamp(15px,1.7vw,22px); color:rgba(233,228,212,.42);gap:26px;padding-right:26px} .hero-ticker .ttrack span::after{width:5px;height:5px} .hero-ticker:hover .ttrack span{color:rgba(233,228,212,.78)} /* the scroll cue sits above the strip */ .hero @media(max-width:640px){ .hero-ticker{padding:12px 18px;gap:12px} .hero-ticker-label{display:none} } /* ---------- sections ---------- */ .sec{padding:clamp(74px,10vh,120px) 0;position:relative} .sec + .sec{border-top:1px solid rgba(217,180,90,.09)} .sec{padding:clamp(84px,11vh,132px) 0;position:relative} /* the opening section of an interior page clears the fixed header and carries slightly larger type, standing in for a page header */ .sec.page-lead{padding-top:clamp(150px,20vh,230px)} .sec.page-lead .sec-head{max-width:840px;margin-bottom:70px} .sec.page-lead .sec-head h2{font-size:clamp(36px,5vw,68px)} .sec.page-lead .sec-head .lede{max-width:620px;font-size:clamp(16px,1.5vw,19px)} .sec-head{position:relative;max-width:760px;margin:0 auto 62px;text-align:center} /* the index sits inline with the kicker instead of behind the heading */ .sec-head::before{content:"";position:absolute;inset:-40px -60px;pointer-events:none;z-index:-2; background:radial-gradient(ellipse 70% 100% at 50% 50%,rgba(5,8,19,.82),rgba(5,8,19,.4) 58%,transparent 100%)} .sec-head > *{position:relative} .sec-head .lede{max-width:560px;margin:18px auto 0} /* a small ornament under the heading */ .sec-head h2 + .lede::before{content:"";display:block;width:44px;height:1px;margin:0 auto 20px; background:linear-gradient(90deg,transparent,var(--gold),transparent)} /* ---------- rail: a draggable, snapping row of cards ---------- */ .rail{position:relative} .rail-track{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; padding:6px 2px 8px;margin:-6px -2px -8px; cursor:grab} .rail-track::-webkit-scrollbar{display:none} .rail-track.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} .rail-track > *{flex:0 0 clamp(268px,31.5%,392px);scroll-snap-align:start} .rail-track.two > *{flex:0 0 clamp(280px,48%,560px)} /* the cards stretch to a common height so the row reads level */ .rail-track{align-items:stretch} .rail-ui{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:34px} .rail-btn{width:46px;height:46px;flex:0 0 auto;border-radius:50%;cursor:pointer; background:none;border:1px solid rgba(217,180,90,.34);color:var(--gold); display:grid;place-items:center;font-size:15px;line-height:1; transition:border-color .25s ease,background .25s ease,transform .25s ease,opacity .25s ease} .rail-btn:hover{border-color:var(--gold);background:rgba(217,180,90,.10);transform:translateY(-2px)} .rail-btn[disabled]{opacity:.28;cursor:default;transform:none} .rail-bar{position:relative;width:clamp(90px,18vw,200px);height:1px; background:rgba(217,180,90,.20);border-radius:2px} .rail-bar span{position:absolute;top:-1px;left:0;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); transition:transform .25s ease;transform-origin:left;width:100%} .rail-hint{font-family:'Lato',sans-serif;font-size:10px;letter-spacing:.28em; text-transform:uppercase;color:#b2bccd} @media(max-width:640px){ .rail-track > *,.rail-track.two > *{flex:0 0 84%} .rail-ui{gap:14px} } /* ---------- feature: image one side, copy the other ---------- */ .sec.alt{background:rgba(255,255,255,.018)} .feature{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch; box-shadow:inset 0 1px 0 rgba(246,226,163,.16); border:1px solid rgba(217,188,94,.30);border-radius:18px;overflow:hidden; background:rgba(5,8,19,.68);backdrop-filter:blur(9px); transition:border-color .4s ease,box-shadow .5s ease} .feature:hover{border-color:rgba(217,180,90,.36);box-shadow:0 30px 70px rgba(0,0,0,.45)} .feature > .shot,.feature > .ph{width:100%;height:100%;min-height:clamp(300px,38vw,460px); object-fit:cover;display:block;margin:0;border:0;border-radius:0} .feature > .ph{outline-offset:-18px;border-radius:0} .feature .body{padding:clamp(28px,3.6vw,52px);display:flex;flex-direction:column; justify-content:center;gap:0} .feature .body .tag{margin-bottom:14px} .feature .body h3{font-size:clamp(23px,2.6vw,34px);line-height:1.14;margin-bottom:16px} .feature .body p{color:#b3bdd0;font-size:15.5px;line-height:1.7;margin-bottom:0} .feature .body .chips{margin:22px 0 0} .feature .body .link{margin-top:26px;align-self:flex-start} .feature .body .note{margin-top:20px} /* reversed: copy first, image second */ .feature.rev > .shot,.feature.rev > .ph{order:2} @media(max-width:900px){ .feature{grid-template-columns:1fr} .feature.rev > .shot,.feature.rev > .ph{order:0} .feature > .shot,.feature > .ph{min-height:240px} } /* ============================================================ Four different ways to show a sequence. The same timeline on every page made the pages read as one page repeated. .steps horizontal track -> Products, how the AR layer works .sflow filmstrip rail -> Platform, a session end to end .zig alternating rows -> Services, how a commission runs .arc ascending stack -> About, the journey inwards ============================================================ */ /* ---------- session flow: cards stack as you scroll ---------- The section holds while five cards come up one at a time and settle on top of each other. Driven by scroll position, so the reader controls it. */ .stack{padding-bottom:0} .stack-scroll{position:relative;height:calc(var(--stack-n,5) * 78vh + 30vh)} .stack-vp{position:sticky;top:0;height:100vh;display:grid;place-items:center; overflow:hidden} .stack-inner{position:relative;width:min(1080px,92vw);height:min(660px,78vh)} /* title above, screen across the full width, copy underneath — the two-column version left the screenshots half the size they could be */ .stkcard{position:absolute;inset:0;display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(12px,1.6vw,20px);align-content:stretch; padding:clamp(20px,2.4vw,34px); border:1px solid rgba(217,188,94,.30);border-radius:20px; background:linear-gradient(160deg,rgba(246,226,163,.06),rgba(5,8,19,0) 44%), rgba(5,8,19,.92); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(246,226,163,.18),0 40px 90px rgba(0,0,0,.6); will-change:transform,opacity; transform:translate3d(0,110%,0)} .stk-head{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px)} .stk-n{font-family:'Lato',sans-serif;font-size:11px;font-weight:700; letter-spacing:.26em;color:var(--gold);opacity:.85} .stkcard h3{font-size:clamp(21px,2.6vw,34px);line-height:1.1;margin:0} .stk-d{color:#b6c0d2;font-size:clamp(13.5px,1.4vw,16px);line-height:1.55; margin:0;max-width:78ch} /* product screenshots — fitted whole, never cropped */ .stk-shot{min-height:0;background:#070c1a;border:1px solid rgba(246,226,163,.18); border-radius:12px;padding:clamp(6px,.8vw,12px); display:grid;place-items:center;overflow:hidden} .stk-shot img{max-width:100%;max-height:100%;width:auto;height:auto; display:block;border-radius:7px;object-fit:contain} @media(max-width:820px){ .stack-inner{height:min(560px,76vh)} .stkcard h3{font-size:clamp(21px,4.6vw,28px)} .stkcard p{font-size:14px} } /* without motion the stack becomes a plain list */ @media(prefers-reduced-motion:reduce){ .stack-scroll{height:auto} .stack-vp{position:static;height:auto;display:block} .stack-inner{height:auto;display:grid;gap:18px} .stkcard{position:relative;inset:auto;transform:none !important;opacity:1 !important} } /* ---------- .zig: alternating rows ---------- */ .zig{display:grid;gap:clamp(14px,1.8vw,22px)} .zstep{display:grid;grid-template-columns:auto 1fr;align-items:baseline; gap:clamp(18px,2.6vw,38px); padding:clamp(22px,2.6vw,34px) clamp(24px,3vw,42px); border:1px solid rgba(217,188,94,.26);border-radius:16px; background:rgba(5,8,19,.62);backdrop-filter:blur(8px); width:min(100%,860px); transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .35s ease} .zstep:nth-child(even){margin-left:auto} .zstep:hover{border-color:rgba(217,180,90,.46);transform:translateY(-5px)} .zstep b{font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(34px,4.4vw,58px);line-height:.9;color:rgba(217,180,90,.4); transition:color .35s ease} .zstep:hover b{color:var(--gold-bright)} .zstep h3{font-size:clamp(19px,2vw,25px);margin-bottom:8px} .zstep p{color:#b3bdd0;font-size:14.5px;line-height:1.65;margin:0;max-width:52ch} /* ---------- the journey: five bands, the arc read in light ---------- The two-column version left half of every row empty. Here the still fills the band and the copy sits on it. Each stage is a little taller and a little brighter than the one before, so the arc is visible. */ .jarc{display:grid;gap:clamp(10px,1.4vw,16px)} .jstage{position:relative;overflow:hidden;border-radius:16px; border:1px solid rgba(217,188,94,.18); display:grid;align-items:end; transition:border-color .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)} .jstage:nth-child(1){height:clamp(210px,25vh,270px)} .jstage:nth-child(2){height:clamp(226px,27vh,292px)} .jstage:nth-child(3){height:clamp(242px,29vh,314px)} .jstage:nth-child(4){height:clamp(258px,31vh,336px)} .jstage:nth-child(5){height:clamp(274px,33vh,358px)} .jstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:translateZ(0); transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.3,1)} /* the lamp in this frame sits under the copy, so pan the crop right */ .jstage:nth-child(1) img{opacity:.55;object-position:72% center} .jstage:nth-child(2) img{opacity:.64} .jstage:nth-child(3) img{opacity:.73} /* keep the left-hand side of this frame, anchored to the top. That side carries a lit lamp, so this band needs a deeper wash under the copy. */ .jstage:nth-child(4) img{opacity:.82;object-position:left top} .jstage:nth-child(4)::after{ background:linear-gradient(90deg,rgba(5,4,10,.995) 0%,rgba(5,4,10,.99) 38%, rgba(5,4,10,.93) 48%,rgba(5,4,10,.5) 66%,rgba(5,4,10,.12) 86%,rgba(5,4,10,.03) 100%)} .jstage:nth-child(5) img{opacity:.92} .jstage:hover img{opacity:1;transform:scale(1.03)} .jstage:hover{border-color:rgba(246,226,163,.55);transform:translateX(6px)} /* the copy sits in a wash on the left so it reads over any frame */ .jstage::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(5,4,10,.995) 0%,rgba(5,4,10,.985) 36%, rgba(5,4,10,.88) 47%,rgba(5,4,10,.44) 64%,rgba(5,4,10,.1) 85%,rgba(5,4,10,.03) 100%)} .jstage-b{position:relative;z-index:2;max-width:46ch; padding:clamp(20px,2.4vw,34px)} .jn{display:block;font-family:'Lato',sans-serif;font-size:10.5px;font-weight:700; letter-spacing:.26em;color:var(--gold-bright);opacity:1;margin-bottom:10px} .jstage h3{font-size:clamp(20px,2.3vw,30px);line-height:1.12;margin-bottom:8px} .jstage p{color:#d8dee8;font-size:clamp(13.5px,1.4vw,15.5px);line-height:1.55;margin:0} @media(max-width:820px){ .jstage,.jstage:nth-child(n){height:clamp(230px,34vh,300px)} .jstage::after{background:linear-gradient(0deg,rgba(5,4,10,.95) 0%, rgba(5,4,10,.78) 46%,rgba(5,4,10,.25) 100%)} .jstage-b{max-width:none} } @media(max-width:900px){ .zstep,.zstep:nth-child(even){width:100%;margin-left:0} /* one column, so the screenshots stay large enough to read */ } /* ---------- stmt: three short statements side by side ---------- */ .stmt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)} .stmt > div{padding:26px 26px 28px;border-radius:14px; border:1px solid rgba(217,188,94,.26);background:rgba(5,8,19,.62);backdrop-filter:blur(8px); transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .35s ease} .stmt > div:hover{transform:translateY(-5px);border-color:rgba(217,180,90,.44)} .stmt h3{font-size:clamp(19px,1.9vw,24px);line-height:1.2;margin-bottom:10px} .stmt p{color:#b3bdd0;font-size:14.5px;line-height:1.65;margin:0} .stmt .link{margin-top:12px} @media(max-width:900px){.stmt{grid-template-columns:1fr}} /* A UI screenshot must not be cropped — cover was slicing ~12% off the sides of the Kathakar capture. Fit it whole and give it a frame. */ .feature.ui > .shot{ object-fit:contain;object-position:center; padding:clamp(14px,1.8vw,26px); background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(246,226,163,.06),transparent 70%), #080b16; min-height:0} .feature.ui{align-items:center} .feature.ui > .shot{align-self:stretch} @media(max-width:900px){ .feature.ui > .shot{min-height:0;aspect-ratio:4/3;height:auto} } /* ---------- cards ---------- */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{display:flex;flex-direction:column; background:linear-gradient(160deg,rgba(246,226,163,.055),rgba(5,8,19,0) 42%), rgba(5,8,19,.72);backdrop-filter:blur(9px); box-shadow:inset 0 1px 0 rgba(246,226,163,.16); border:1px solid rgba(217,188,94,.38);border-radius:14px;overflow:hidden; display:flex;flex-direction:column; transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .35s ease,box-shadow .45s ease} .card:hover{transform:translateY(-9px);border-color:rgba(246,226,163,.78); box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(246,226,163,.12)} /* a hairline of light travels the top edge on hover */ .card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2; background:linear-gradient(90deg,transparent,var(--gold-bright),transparent); opacity:0;transition:opacity .45s ease} .card:hover::after{opacity:.9} .card{position:relative} .card img{width:100%;aspect-ratio:8/5;object-fit:cover;opacity:.92; transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .4s ease} .card:hover img{transform:scale(1.05);opacity:1} .card-b{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1} .tag{font-family:'Lato',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);margin-bottom:12px; display:flex;align-items:center;gap:9px} .tag::before{content:"";width:16px;height:1px;background:var(--gold);opacity:.65;flex:0 0 auto} .card h3{margin-bottom:9px} .card p{color:#b3bdd0;font-size:14px;line-height:1.6} .card .link{margin-top:auto;padding-top:20px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .chip{font-family:'Lato',sans-serif;font-size:11.5px;letter-spacing:.05em;color:#b9c0d0; border:1px solid rgba(217,188,94,.36);border-radius:999px;padding:6px 14px; transition:border-color .25s ease,color .25s ease,transform .25s ease} .chip:hover{border-color:var(--gold-bright);color:var(--gold-bright);transform:translateY(-2px); background:rgba(246,226,163,.10);box-shadow:0 0 22px rgba(246,226,163,.16)} .ph{display:grid;place-items:center;text-align:center;min-height:150px;padding:22px; font-family:'Lato',sans-serif;font-size:11.5px;line-height:1.55;color:#b6c0d2; border:1px dashed rgba(217,180,90,.26);border-radius:12px; background:linear-gradient(135deg,rgba(217,180,90,.06),rgba(5,8,19,.68))} .note{font-family:'Lato',sans-serif;font-size:11.5px;color:#b6c0d2;margin-top:18px;text-shadow:0 1px 12px rgba(5,8,19,.95)} .quote{background:rgba(5,8,19,.72);backdrop-filter:blur(9px); border:1px solid rgba(217,188,94,.30);border-radius:14px;padding:28px; display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .35s ease} .quote:hover{transform:translateY(-5px);border-color:rgba(217,180,90,.38)} .quote .mk{font-family:'Cormorant Garamond',serif;font-size:46px;line-height:.5; color:var(--gold);opacity:.55;margin-bottom:18px} .quote p{font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.36;color:var(--ink);flex:1} .quote small{margin-top:auto;padding-top:20px;font-family:'Lato',sans-serif;font-size:11.5px;color:#b2bccd} /* ---------- offerings: an editorial list that opens on hover ---------- */ /* ---------- audiences: two panels that give way to each other ---------- */ .panes{display:flex;gap:20px;align-items:stretch} .pane{flex:1;min-width:0;position:relative;overflow:hidden; box-shadow:inset 0 1px 0 rgba(246,226,163,.14); border:1px solid rgba(217,188,94,.30);border-radius:14px; background:rgba(5,8,19,.72);backdrop-filter:blur(9px); padding:clamp(28px,3.4vw,46px); transition:flex .6s cubic-bezier(.2,.7,.3,1),border-color .4s ease,background .4s ease} .pane::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .panes:hover .pane{flex:.82} .panes .pane:hover{flex:1.36;border-color:rgba(217,180,90,.5)} .pane:hover::after{transform:none} .pane h3{font-size:clamp(21px,2.2vw,30px);margin-bottom:12px} .pane p{color:#b3bdd0;font-size:15px;line-height:1.65} /* ---------- partners: a continuous ticker ---------- */ .ticker{position:relative;overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .ttrack{display:flex;gap:0;width:max-content;animation:tick 34s linear infinite} .ticker:hover .ttrack{animation-play-state:paused} .ttrack span{display:flex;align-items:center;gap:34px;padding-right:34px; font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.3vw,31px); color:rgba(233,228,212,.5);white-space:nowrap;transition:color .3s ease} .ttrack span::after{content:"";width:6px;height:6px;border-radius:50%; background:rgba(217,180,90,.45);flex:0 0 auto} .ticker:hover .ttrack span{color:rgba(233,228,212,.82)} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- scroll progress ---------- */ .sprog{position:fixed;left:0;top:0;height:2px;z-index:70;width:100%; transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); pointer-events:none} /* ---------- headings reveal word by word ---------- */ .wr{display:inline-block;opacity:0;transform:translateY(26px) rotate(2deg); transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .in .wr,.wr.in{opacity:1;transform:none} @media(max-width:840px){ .panes{flex-direction:column} .panes:hover .pane,.panes .pane:hover{flex:1} .on{font-size:26px} } @media(prefers-reduced-motion:reduce){ .ttrack{animation:none} .wr{opacity:1 !important;transform:none !important} .panes:hover .pane,.panes .pane:hover{padding-left:18px;flex:1} } /* ---------- steps: a horizontal track, not five columns ---------- Five equal boxes made every stage look identical and left a dead band underneath. A connected track reads as a sequence. */ /* ---------- how it works: one large stage, five numbered stages ---------- The five-across strip left the renders too small to read. Here one frame holds the screen and the strip below advances it. */ /* The stage filled the screen at full shell width. Capping it by viewport height as well as width keeps the whole step visible at once. */ .how{position:relative;width:min(100%,940px,88vh);margin:0 auto} .hstage{position:relative;aspect-ratio:3/2;border-radius:18px;overflow:hidden; border:1px solid rgba(246,226,163,.24);background:#0b0710; box-shadow:inset 0 1px 0 rgba(246,226,163,.16),0 30px 70px rgba(0,0,0,.45)} .hframe{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.03); transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.3,1)} .hframe.is-on{opacity:1;transform:none} .hframe img{width:100%;height:100%;object-fit:cover;display:block} .hframe figcaption{position:absolute;left:0;right:0;bottom:0; padding:clamp(22px,3.4vw,44px); background:linear-gradient(0deg,rgba(6,3,10,.94),rgba(6,3,10,.72) 46%,transparent); color:var(--ink)} .hframe figcaption small{display:block;font-family:'Lato',sans-serif;font-size:11px; font-weight:700;letter-spacing:.26em;color:var(--gold-bright);margin-bottom:10px} .hframe figcaption h3{font-size:clamp(24px,3vw,40px);line-height:1.1;margin-bottom:10px} .hframe figcaption p{color:#d6dae4;font-size:clamp(14px,1.5vw,17px); line-height:1.6;margin:0;max-width:58ch} .hstrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,1.2vw,16px);margin-top:clamp(14px,1.8vw,22px)} .hthumb{position:relative;display:block;padding:0;border:0;cursor:pointer; background:none;text-align:left;color:inherit;font:inherit; border-radius:12px;overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.3,1)} .hthumb img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block; opacity:.4;filter:saturate(.6); transition:opacity .4s ease,filter .4s ease} .hthumb::after{content:"";position:absolute;inset:0;border-radius:12px; border:1px solid rgba(246,226,163,.18);transition:border-color .4s ease} .hthumb:hover{transform:translateY(-3px)} .hthumb.is-on img{opacity:1;filter:none} .hthumb.is-on::after{border-color:var(--gold-bright)} .hnum{position:absolute;left:10px;top:8px;font-family:'Lato',sans-serif; font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--gold-bright); text-shadow:0 1px 6px rgba(0,0,0,.9)} .hlabel{position:absolute;left:10px;right:10px;bottom:8px; font-family:'Lato',sans-serif;font-size:11.5px;line-height:1.3; color:var(--ink);text-shadow:0 1px 8px rgba(0,0,0,.95); opacity:.75;transition:opacity .35s ease} .hthumb.is-on .hlabel{opacity:1} @media(max-width:900px){ .hstage{aspect-ratio:3/2} .hframe figcaption h3{font-size:clamp(20px,4.4vw,28px)} .hstrip{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} .hlabel{display:none} } @media(prefers-reduced-motion:reduce){ .hframe,.hthumb,.hthumb img{transition:none} } /* ---------- CTA band on interior pages ---------- */ .ctaband{padding:clamp(64px,8vh,96px) 0} .band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px; border:1px solid rgba(217,188,94,.34);border-radius:18px; background:rgba(5,8,19,.7);backdrop-filter:blur(9px); padding:clamp(28px,3.4vw,46px)} .band .kicker{justify-content:flex-start;margin-bottom:12px} .band h2{font-size:clamp(24px,3vw,38px);max-width:16ch} .band-cta{display:flex;flex-wrap:wrap;gap:12px} @media(max-width:720px){.band{flex-direction:column;align-items:flex-start}} /* ---------- journal: real posts as an editorial index ---------- */ /* long-form text needs a surface — on the bare field the dust reads straight through it and small text falls below AA */ .posts{border-top:1px solid rgba(217,188,94,.26); background:rgba(5,8,19,.66);backdrop-filter:blur(8px); border-radius:14px;padding:0 clamp(12px,2vw,24px)} .post{display:grid;grid-template-columns:132px 1fr 108px;align-items:start; gap:clamp(18px,3vw,40px);padding:32px 18px;position:relative;overflow:hidden; border-bottom:1px solid rgba(217,188,94,.26); transition:padding-left .45s cubic-bezier(.2,.7,.3,1)} .post::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,rgba(217,180,90,.10),rgba(217,180,90,.02) 55%,transparent); transform:translateX(-100%);transition:transform .55s cubic-bezier(.2,.7,.3,1)} .post:hover::before{transform:none} .post:hover{padding-left:34px} .post-cat{font-family:'Lato',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:9px} .post-cat::before{content:"";width:16px;height:1px;background:var(--gold);opacity:.65;flex:0 0 auto} .post h3{font-size:clamp(19px,2.1vw,27px);margin-bottom:9px; transition:transform .45s cubic-bezier(.2,.7,.3,1)} .post:hover h3{transform:translateX(4px)} .post p{color:#b3bdd0;font-size:14.5px;line-height:1.62;max-width:64ch} .post-meta{text-align:right;font-family:'Lato',sans-serif;font-size:12px;color:#b6c0d2; line-height:1.7;white-space:nowrap} .post-meta b{display:block;font-weight:400;color:var(--gold);opacity:.75} @media(max-width:840px){ .post{grid-template-columns:1fr;gap:12px;padding:26px 12px} .post-meta{text-align:left} } /* ---------- journal: filter bar ---------- */ .jbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px; margin-bottom:34px} .jfilters{display:flex;flex-wrap:wrap;gap:9px} .jfilter{font-family:'Lato',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#b3bdd0;cursor:pointer; background:none;border:1px solid rgba(217,188,94,.36);border-radius:999px;padding:9px 18px; transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease} .jfilter:hover{color:var(--gold-bright);border-color:var(--gold);transform:translateY(-2px)} .jfilter.is-on{background:var(--gold);border-color:var(--gold);color:#050813} .jcount{font-family:'Lato',sans-serif;font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:#b2bccd} .post[hidden]{display:none} .jempty{font-family:'Lato',sans-serif;font-size:14px;color:#b2bccd;text-align:center;padding:44px 0} @media(max-width:640px){.jbar{flex-direction:column;align-items:flex-start}} /* ---------- article ---------- */ .article{max-width:820px;margin:0 auto; background:rgba(5,8,19,.68);backdrop-filter:blur(9px); border:1px solid rgba(217,188,94,.24);border-radius:18px; padding:clamp(30px,4.4vw,64px)} .art-next{background:none;border:0;padding:0;backdrop-filter:none} .art-head{text-align:center;margin-bottom:clamp(40px,6vh,68px)} .art-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px; font-family:'Lato',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:#b2bccd;margin-bottom:22px} .art-meta .post-cat{margin:0} .art-meta s{width:4px;height:4px;border-radius:50%;background:rgba(217,180,90,.5); text-decoration:none;flex:0 0 auto} .art-head h1{font-size:clamp(32px,4.6vw,58px);line-height:1.06;margin-bottom:20px; text-shadow:0 2px 26px rgba(5,8,19,.9)} .art-dek{color:#c3cbdb;font-size:clamp(16px,1.6vw,20px);line-height:1.6;max-width:620px;margin:0 auto} .art-rule{width:44px;height:1px;margin:30px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent)} .art-body{font-family:'Lato',sans-serif} .art-body p{color:#d3dae6;font-size:17.5px;line-height:1.85;margin:0 0 26px} .art-body h2{font-size:clamp(24px,2.8vw,34px);margin:52px 0 18px; text-shadow:0 2px 22px rgba(5,8,19,.9)} .art-body h2::after{content:"";display:block;width:34px;height:1px;margin-top:16px; background:rgba(217,180,90,.5)} .art-body h3{font-size:clamp(18px,2vw,23px);color:var(--gold);margin:38px 0 12px} .art-body ul{margin:0 0 26px;padding-left:0;list-style:none} .art-body li{color:#d3dae6;font-size:16.5px;line-height:1.7;padding:10px 0 10px 26px;position:relative; border-bottom:1px solid rgba(217,180,90,.10)} .art-body li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:1px; background:var(--gold)} .art-body > *:first-child{margin-top:0} .art-foot{margin-top:clamp(50px,7vh,80px);padding-top:34px; border-top:1px solid rgba(217,188,94,.30); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px} .art-foot .link{font-size:12.5px} .art-next{margin-top:clamp(60px,8vh,96px)} .art-next .kicker{justify-content:flex-start;margin-bottom:22px} /* ---------- shop ---------- */ .shopbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:16px;margin-bottom:34px} .shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .pcard{position:relative;display:flex;flex-direction:column;overflow:hidden; border:1px solid rgba(217,180,90,.20);border-radius:16px; background:rgba(5,8,19,.7);backdrop-filter:blur(9px); transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .35s ease,box-shadow .45s ease} .pcard:hover{transform:translateY(-7px);border-color:rgba(217,180,90,.5); box-shadow:0 30px 68px rgba(0,0,0,.5)} .pcard[data-state="soon"]{opacity:.72} .pcard[data-state="soon"]:hover{opacity:1} .pcard-art{position:relative;aspect-ratio:1/1;display:grid;place-items:center; border-bottom:1px solid rgba(217,188,94,.26);overflow:hidden} .pcard-art .ph{border:0;outline:0;border-radius:0;min-height:100%;width:100%;background:none} .pcard-art img{width:100%;height:100%;object-fit:cover} .pflags{position:absolute;left:14px;top:14px;z-index:2;display:flex;flex-direction:column;gap:7px;align-items:flex-start} .pflag{font-family:'Lato',sans-serif;font-size:9px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;padding:6px 11px;border-radius:999px; background:rgba(5,8,19,.82);border:1px solid rgba(217,180,90,.34);color:var(--gold)} .pflag.hot{background:var(--gold);border-color:var(--gold);color:#050813} .pcard-b{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1} .pcard-b h3{font-size:clamp(20px,2vw,25px);margin-bottom:10px} .pcard-b p{color:#b3bdd0;font-size:14.5px;line-height:1.62} .price{display:flex;align-items:baseline;gap:12px;margin:20px 0 0} .price b{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:30px;color:var(--gold-bright)} .price s{color:#b2bccd;font-size:16px} .pcard .btn{margin-top:20px;justify-content:center;width:100%;min-height:50px;font-size:14px} .pcard .link{margin-top:14px;align-self:center} .pcard-b .soon{margin-top:auto;padding-top:22px;font-family:'Lato',sans-serif;font-size:11.5px; letter-spacing:.2em;text-transform:uppercase;color:#b2bccd;text-align:center} /* language chips */ .langs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .lang{text-align:center;padding:24px 12px;border-radius:14px; border:1px solid rgba(217,188,94,.30);background:rgba(5,8,19,.6); transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .35s ease} .lang:hover{transform:translateY(-4px);border-color:rgba(217,180,90,.5)} .lang b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(20px,2.1vw,27px);color:var(--ink);margin-bottom:9px;line-height:1.2} .lang span{font-family:'Lato',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);opacity:.8} @media(max-width:1000px){ .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .langs{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:640px){ .shop-grid{grid-template-columns:1fr} .langs{grid-template-columns:repeat(2,minmax(0,1fr))} } /* the four ways in use the same panel mechanism as services */ .svcs.router{height:min(680px,76vh)} .svcs.router .svc{text-decoration:none} /* sits in the upper half so it never runs into the copy at the bottom */ .svc-ph{position:absolute;left:0;right:0;top:0;height:58%;z-index:0; display:grid;place-items:center;text-align:center;padding:20px; background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(246,226,163,.07),transparent 70%),#0b0710; font-family:'Lato',sans-serif;font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:#8e97a8;line-height:2; opacity:0;transition:opacity .45s ease} .svc.is-on .svc-ph{opacity:1} .svc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.55;transform:translateZ(0);transition:opacity .45s ease} .svc.is-on video{opacity:1} .svc-go{display:inline-flex;align-items:center;gap:10px;margin-top:20px; padding:13px 26px;border-radius:999px;font-style:normal;text-decoration:none; font-family:'Lato',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:#120c05; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 10px 26px rgba(0,0,0,.45); transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease} .svc:hover .svc-go{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.55)} .svc-go span{font-size:14px} /* ---------- realm tab: pink sparkles gather on hover ---------- */ .nav a{position:relative} .nav a[data-realm]{--realm:var(--gold)} .nav a[data-realm]:hover{color:var(--ink) !important; text-shadow:0 0 22px color-mix(in srgb,var(--realm) 65%,transparent), 0 0 44px color-mix(in srgb,var(--realm) 35%,transparent)} /* a soft bloom, no hard edge */ .nav a[data-realm]::after{content:"";position:absolute;left:50%;top:50%; width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;z-index:-1; background:radial-gradient(circle,color-mix(in srgb,var(--realm) 45%,transparent),transparent 66%); opacity:0;transform:scale(.5); transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .nav a[data-realm]:hover::after{opacity:1;transform:scale(1)} .nav .spark{position:absolute;width:4px;height:4px;border-radius:50%; background:#fff;pointer-events:none;z-index:1;opacity:0; box-shadow:0 0 8px 2px color-mix(in srgb,var(--realm) 80%,transparent)} .nav .spark.go{animation:sparkFly var(--dur,1.5s) ease-out forwards} @keyframes sparkFly{ 0%{opacity:0;transform:translate(0,0) scale(.4)} 18%{opacity:1} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--sc,1.1))} } @media(prefers-reduced-motion:reduce){ .nav .spark{display:none} } /* a realm page carries more shine: brighter accents and lit edges */ body[data-realm-page] .card, body[data-realm-page] .feature, body[data-realm-page] .pane, body[data-realm-page] .stmt > div{ border-color:color-mix(in srgb,var(--realm-accent) 34%,transparent)} body[data-realm-page] .card:hover, body[data-realm-page] .feature:hover, body[data-realm-page] .pane:hover{ border-color:var(--realm-accent); box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb,var(--realm-accent) 28%,transparent), 0 0 40px color-mix(in srgb,var(--realm-accent) 22%,transparent)} body[data-realm-page] .btn:hover{ box-shadow:0 14px 44px color-mix(in srgb,var(--realm-accent) 45%,transparent)} body[data-realm-page] .btn.solid:hover{ box-shadow:0 16px 50px color-mix(in srgb,var(--realm-accent) 55%,transparent)} body[data-realm-page] .chip:hover{ border-color:var(--realm-accent);color:var(--realm-accent); background:color-mix(in srgb,var(--realm-accent) 12%,transparent); box-shadow:0 0 22px color-mix(in srgb,var(--realm-accent) 22%,transparent)} body[data-realm-page] .sec-head h2, body[data-realm-page] .art-head h1{ text-shadow:0 2px 26px rgba(0,0,0,.85), 0 0 46px color-mix(in srgb,var(--realm-accent) 18%,transparent)} body[data-realm-page] .rtag, body[data-realm-page] .rarr{color:var(--realm-accent)} body[data-realm-page] .zstep b, body[data-realm-page] .step small{color:color-mix(in srgb,var(--realm-accent) 70%,transparent)} body[data-realm-page] .zstep:hover b{color:var(--realm-accent)} /* ---------- warp: you move, the page flies past you ---------- Real perspective rather than a flat scale, so the page passes the camera the way scenery passes a car window. */ body.warping{overflow:hidden} body.warping .route,body.warping .hdr,body.warping .ftr{ transform:perspective(760px) translateZ(560px); opacity:0;filter:blur(9px); transition:transform .5s cubic-bezier(.4,0,.9,.25), opacity .38s cubic-bezier(.5,0,1,.4) .02s, filter .45s ease; transform-origin:50% 46%;pointer-events:none} /* the new realm comes up from the distance toward you */ body.arriving .route{animation:arriveIn .72s cubic-bezier(.18,.75,.3,1) both} @keyframes arriveIn{ from{transform:perspective(760px) translateZ(-680px);opacity:0;filter:blur(8px)} 60%{opacity:1} to{transform:perspective(760px) translateZ(0);opacity:1;filter:none} } body.arriving .hdr,body.arriving .ftr{animation:arriveFade .6s ease .12s both} @keyframes arriveFade{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){ body.warping .route,body.warping .hdr,body.warping .ftr{ transform:none;filter:none;transition:opacity .3s ease} body.arriving .route,body.arriving .hdr,body.arriving .ftr{animation:none} } /* ---------- a page can belong to a realm ---------- */ body[data-realm-page]{background:var(--realm-bg)} body[data-realm-page] .hdr.stuck{background:color-mix(in srgb,var(--realm-bg) 86%,transparent)} body[data-realm-page] .vignette{ background:radial-gradient(ellipse 100% 80% at 50% 48%,transparent 34%, color-mix(in srgb,var(--realm-bg) 50%,transparent) 80%, color-mix(in srgb,var(--realm-bg) 94%,transparent) 100%)} body[data-realm-page] .sec.alt{background:var(--realm-alt)} body[data-realm-page] .kicker, body[data-realm-page] .tag, body[data-realm-page] .otag{color:var(--realm-accent)} body[data-realm-page] em{color:var(--realm-accent)} body[data-realm-page] .btn{border-color:var(--realm-accent);color:var(--realm-accent)} body[data-realm-page] .btn.solid{background:var(--realm-accent);color:#150a19;border-color:var(--realm-accent)} body[data-realm-page] .link{color:var(--realm-accent)} body[data-realm-page] .card:hover, body[data-realm-page] .feature:hover{border-color:var(--realm-accent)} body[data-realm-page] .sec-head .kicker::after{background:var(--realm-accent);opacity:.55} video.shot{width:100%;height:100%;object-fit:cover;display:block;background:#0a0a12} /* Book covers are square artwork. The card image slot is 8:5, so cover would crop the top and bottom off the art — fit them whole instead. */ .card img.shot{aspect-ratio:1/1;object-fit:cover;opacity:1; background:none;padding:0} .card:hover img.shot{transform:none} .pane img.shot{object-fit:cover} /* a placeholder should occupy exactly what the photograph will, so cards in a row line up before the real images arrive */ .card > .ph{aspect-ratio:8/5;min-height:0;display:grid;place-items:center} .card-b{display:flex;flex-direction:column;flex:1} .card-b .link{margin-top:auto;padding-top:14px} /* ---------- services: six panels, one open at a time ---------- Six full cards made the section very tall and each image ended up larger than it needed to be. Here all six sit in one row and the one you point at opens. */ .svcs{display:flex;gap:clamp(6px,.8vw,12px);height:min(520px,62vh)} /* Animating flex-grow relayouts six panels every frame, and transitioning a filter on top of that made it stutter. The width is animated once and the image only crossfades — no per-frame filter work. */ .svc{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer; padding:0;border:1px solid rgba(217,188,94,.24);border-radius:16px; background:#0b0710;color:inherit;font:inherit;text-align:left; contain:paint; transition:flex-grow .5s cubic-bezier(.22,.61,.36,1),border-color .3s ease} .svc.is-on{flex-grow:3.4;border-color:rgba(246,226,163,.6)} .svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.34;transform:translateZ(0); transition:opacity .45s ease} .svc.is-on img{opacity:1} /* the dim state is a flat overlay rather than a filter on the image */ .svc::before{content:"";position:absolute;inset:0;z-index:1; background:#0b0710;opacity:.1; transition:opacity .45s ease;pointer-events:none} .svc.is-on::before{opacity:0} .svc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(0deg,rgba(6,3,10,.94),rgba(6,3,10,.5) 40%,rgba(6,3,10,.1))} /* collapsed: the name runs up the panel */ .svc-spine{position:absolute;left:0;right:0;bottom:18px;z-index:2; display:flex;align-items:center;gap:12px; writing-mode:vertical-rl;transform:rotate(180deg); margin:0 auto;height:calc(100% - 36px); font-family:'Lato',sans-serif;font-size:clamp(14px,1.35vw,17px); font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink);white-space:nowrap; opacity:1;transition:opacity .35s ease} .svc-spine i{font-style:normal;font-size:13px;font-weight:700; letter-spacing:.2em;color:var(--gold-bright)} .svc.is-on .svc-spine{opacity:0} /* open: number, name and the line of copy */ .svc-open{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:clamp(20px,2.2vw,30px); opacity:0;transform:translateY(10px); transition:opacity .45s ease .12s,transform .55s cubic-bezier(.2,.7,.3,1) .12s} .svc.is-on .svc-open{opacity:1;transform:none} .svc-n{display:block;font-style:normal;font-family:'Lato',sans-serif; font-size:10.5px;font-weight:700;letter-spacing:.26em;color:var(--gold); margin-bottom:10px} .svc-open b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(22px,2.4vw,32px);line-height:1.12;color:var(--ink);margin-bottom:8px} .svc-open em{display:block;font-style:normal;color:#c9d1de; font-size:clamp(13.5px,1.35vw,15.5px);line-height:1.55;max-width:38ch} @media(max-width:900px){ /* rotated names do not survive narrow panels — stack them instead */ /* .router is named too so this beats .svcs.router's min(680px,76vh) above: a media query adds no specificity, so the plain .svcs selector lost and the stacked column kept a fixed ~641px height while its four cards needed ~1156px. The rest spilled out over the next section. */ .svcs,.svcs.router{flex-direction:column;height:auto;gap:12px} .svc{flex:none;height:clamp(210px,34vh,280px)} .svc.is-on{flex:none} .svc img{opacity:.7} .svc-spine{display:none} .svc-open{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){ .svc,.svc img,.svc-open,.svc-spine{transition:none} } /* a card can hold moving footage in place of a still */ .card video.card-vid{width:100%;aspect-ratio:8/5;object-fit:cover;display:block; background:#0b0710} .panes.three{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:980px){ .panes.three{grid-template-columns:1fr} } /* a section head carrying only a heading needs its own scale, or it reads as an afterthought in a block built for a heading plus a paragraph */ .sec-head.solo{max-width:900px;margin-bottom:clamp(38px,4.6vw,58px)} .sec-head.solo .kicker{justify-content:center;margin-bottom:16px} .sec-head.solo h2{font-size:clamp(44px,6.4vw,86px);line-height:1.02; font-style:italic;color:var(--gold)} .sec-head.solo::before{display:none} .sec-head.solo h2::after{content:"";display:block;width:64px;height:1px; margin:26px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent)} /* ---------- who it reaches: three columns, no boxes ---------- The page already carries a lot of framed cards; this reads as a single statement split three ways instead of three more panels. */ .aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;max-width:1120px;margin:0 auto} .aud-col{padding:4px clamp(22px,3vw,44px); border-left:1px solid rgba(217,188,94,.18)} .aud-col:first-child{border-left:0;padding-left:0} .aud-col:last-child{padding-right:0} .aud-icon{display:block;width:34px;height:34px;margin:0 0 18px;color:var(--gold);opacity:.92} .aud-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round} .aud-tag{display:block;font-family:'Lato',sans-serif; font-size:clamp(15px,1.5vw,19px);font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);opacity:1; margin-bottom:16px} .aud-col h3{font-size:clamp(19px,2vw,25px);line-height:1.16;margin-bottom:10px} .aud-col p{color:#c4ccd9;font-size:clamp(15.5px,1.55vw,19px);line-height:1.6;margin:0} @media(max-width:900px){ .aud{grid-template-columns:1fr;gap:26px} .aud-col{border-left:0;border-top:1px solid rgba(217,188,94,.18); padding:22px 0 0} .aud-col:first-child{border-top:0;padding-top:0} } /* the award line carries the conclave seal */ .award{display:flex;align-items:center;gap:16px;text-align:left} .award .seal{width:64px;height:64px;flex:0 0 64px;border-radius:50%; opacity:.95;filter:saturate(.95)} .svc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(0deg,rgba(6,3,10,.94),rgba(6,3,10,.5) 40%,rgba(6,3,10,.1) 62%, rgba(6,3,10,.62) 88%,rgba(6,3,10,.86))} .svc-cat{position:absolute;left:clamp(20px,2.2vw,30px);top:clamp(18px,2vw,26px); z-index:2;font-family:'Lato',sans-serif;font-size:clamp(14px,1.35vw,18px); font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-bright);text-shadow:0 2px 16px rgba(0,0,0,.85); opacity:0;transform:translateY(-6px); transition:opacity .4s ease .1s,transform .5s cubic-bezier(.2,.7,.3,1) .1s} .svc.is-on .svc-cat{opacity:1;transform:none} /* ---------- latest from Vṛtam: a news strip at the foot of the hero ---------- */ .latest{position:relative;display:grid; grid-template-columns:auto 1fr auto;align-items:center; gap:clamp(16px,2.4vw,34px); width:min(1180px,calc(100% - 48px));margin:clamp(62px,8.5vh,104px) auto 0; padding:clamp(14px,1.6vw,20px) clamp(4px,1vw,14px); border:0;border-top:1px solid rgba(217,188,94,.26); border-bottom:1px solid rgba(217,188,94,.26);border-radius:0; background:rgba(5,4,10,.34); backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25)} .latest-label{font-family:'Lato',sans-serif;font-size:clamp(11px,1.05vw,13px); font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-bright);white-space:nowrap; padding-right:clamp(14px,2vw,26px); border-right:1px solid rgba(217,188,94,.26)} .latest-track{position:relative;min-width:0;min-height:58px} .latest-item{position:absolute;inset:0;display:flex;align-items:center; gap:clamp(12px,1.6vw,20px);text-decoration:none;color:inherit; opacity:0;pointer-events:none;transform:translateY(6px); transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.3,1)} .latest-item.is-on{opacity:1;pointer-events:auto;transform:none} .latest-thumb{flex:0 0 auto;width:clamp(58px,6vw,78px);height:clamp(40px,4.2vw,54px); border-radius:8px;border:1px solid rgba(246,226,163,.22); background:radial-gradient(ellipse 80% 70% at 40% 30%,rgba(246,226,163,.16),transparent 70%),#0b0710} .latest-thumb img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block} .latest-copy{min-width:0} .latest-copy i{display:block;font-style:normal;font-family:'Lato',sans-serif; font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin-bottom:5px} .latest-copy b{display:block;font-weight:400; font-size:clamp(14.5px,1.5vw,18px);line-height:1.35;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .latest-go{margin-left:auto;color:var(--gold-bright);font-size:18px; transition:transform .35s cubic-bezier(.2,.7,.3,1)} .latest-item:hover .latest-go{transform:translateX(5px)} .latest-ui{display:flex;align-items:center;gap:10px} .latest-dots{display:flex;gap:7px;margin-right:6px} .latest-dots b{width:7px;height:7px;border-radius:50%; background:rgba(217,188,94,.34);transition:background .3s ease,transform .3s ease} .latest-dots b.on{background:var(--gold-bright);transform:scale(1.25)} .latest-btn{width:34px;height:34px;border-radius:50%;cursor:pointer; border:1px solid rgba(217,188,94,.34);background:transparent; color:var(--gold-bright);font-size:14px;line-height:1; transition:border-color .3s ease,background .3s ease,transform .3s ease} .latest-btn:hover{border-color:var(--gold-bright);background:rgba(246,226,163,.1); transform:translateY(-1px)} @media(max-width:900px){ .latest{grid-template-columns:1fr auto;gap:12px 16px; width:calc(100% - 34px);padding:14px 16px} .latest-label{grid-column:1 / -1;border-right:0;padding-right:0; padding-bottom:10px;border-bottom:1px solid rgba(217,188,94,.22)} .latest-copy b{white-space:normal} .latest-track{min-height:54px} } /* a small initial disc stands in for a photograph on each quote */ .quote small{display:flex;align-items:center;gap:10px} .quote .dp{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px; border-radius:50%;font-family:'Lato',sans-serif;font-size:17px;font-weight:700; letter-spacing:.02em;color:#120c05; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 4px 12px rgba(0,0,0,.4)} /* ---------- nav dropdown ---------- */ .nav-drop{position:relative;display:inline-flex;align-items:center} .nav-drop > a{display:inline-flex;align-items:center;gap:7px} .caret{font-size:9px;opacity:.7;transition:transform .3s ease,opacity .3s ease} .nav-drop:hover .caret,.nav-drop:focus-within .caret{transform:translateY(2px);opacity:1} .nav-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,6px); min-width:168px;padding:8px;z-index:60; border:1px solid rgba(217,188,94,.28);border-radius:12px; background:rgba(8,6,14,.46); backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25); box-shadow:0 18px 44px rgba(0,0,0,.45); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.3,1),visibility .28s} .nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,10px)} .nav-menu a{display:block;padding:10px 14px;border-radius:8px; font-size:14.5px;white-space:nowrap; transition:background .25s ease,color .25s ease} .nav-menu a:hover{background:rgba(246,226,163,.1);color:var(--gold-bright)} /* a hover bridge, so the pointer can travel from the tab to the menu */ .nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px} /* ---------- our clients: a quiet grid of marks ---------- */ .clients{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch; gap:clamp(12px,1.6vw,22px);max-width:1120px;margin:0 auto} .client{aspect-ratio:3/2;height:auto;min-height:0;overflow:hidden;display:grid;place-items:center;padding:clamp(10px,1.4vw,18px);border:1px solid rgba(217,188,94,.22);border-radius:12px;background:rgba(255,255,255,.93);transition:border-color .35s ease,transform .35s cubic-bezier(.2,.7,.3,1)} .client:hover{border-color:rgba(246,226,163,.6);transform:translateY(-3px)} .client span{font-family:'Lato',sans-serif;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:#8e97a8;text-align:center;padding:0 8px} .client img{max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;min-height:0;object-fit:contain;opacity:1;filter:none;transition:transform .35s cubic-bezier(.2,.7,.3,1)} .client:hover img{transform:scale(1.04)} @media(max-width:900px){ .clients{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:520px){ .clients{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---------- one page hero, used by every tab ---------- The tabs had grown apart: headings between 62 and 94 px, a mix of h1 and h2, some with a lede and some without. These rules set one scale for all of them, whatever wrapper each page happens to use. */ .page-lead h1, .page-lead .stories-hero-copy h1, .page-lead .exp-hero h1, .page-lead .contact-hero h1, .page-hero h1{ font-size:clamp(36px,5vw,68px);line-height:1.04;margin-bottom:18px} .page-lead .lede, .page-lead .stories-hero-copy > p, .page-hero .lede{ font-size:clamp(16px,1.6vw,19.5px);line-height:1.6;color:#b6c0d2; max-width:62ch;margin-bottom:0} /* the small line above the heading */ .page-eyebrow, .exp-brand, .contact-brand{ display:block;font-family:'Lato',sans-serif; font-size:clamp(11.5px,1.1vw,13px);font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--gold);margin-bottom:16px} .page-hero{max-width:820px} .page-hero h1 em{font-style:italic;color:var(--gold)} /* ---------- closing ---------- */ .closing{text-align:center;padding:clamp(90px,14vh,150px) 0} .closing h2{max-width:19ch;margin:0 auto 22px;font-size:clamp(40px,5.8vw,80px);line-height:1.04} .closing .lede{max-width:480px;margin:0 auto 36px} .closing .hero-cta{justify-content:center} /* ---------- footer ---------- */ .ftr{border-top:1px solid rgba(217,188,94,.24);padding:64px 0 46px; background:rgba(5,8,19,.82);backdrop-filter:blur(10px)} .ftr-grid{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:30px} .ftr-brand img{height:64px;width:auto;margin-bottom:16px} .ftr-brand p{color:#b2bccd;font-size:13.5px;line-height:1.65;max-width:280px} .ftr h4{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:16px;color:var(--gold); margin:0 0 14px;letter-spacing:.04em} .ftr a{display:block;font-family:'Lato',sans-serif;font-size:13.5px;color:#b2bccd;margin:9px 0; transition:color .25s ease,transform .25s ease} .ftr a:hover{color:var(--gold);transform:translateX(3px)} .ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; margin-top:46px;padding-top:24px;border-top:1px solid rgba(217,180,90,.1); font-family:'Lato',sans-serif;font-size:11.5px;color:#6d788e} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)} .rv.in{opacity:1;transform:none} .grid.rv > *{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .grid.rv > *.in{opacity:1;transform:none} .grid.rv > *.in:hover{transform:translateY(-9px)} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#050813; padding:12px 20px;font-weight:700} .skip:focus{left:0} /* ---------- responsive ---------- */ @media(max-width:1000px){ .nav{display:none} .burger{display:flex} .g4{grid-template-columns:repeat(2,1fr)} .sec-head{grid-template-columns:1fr;gap:20px;align-items:start} .ftr-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:640px){ .shell{width:calc(100% - 34px)} .g2,.g3,.g4{grid-template-columns:1fr} .hero{padding:104px 0 76px} .hero-grid{grid-template-columns:1fr} .proof-line{grid-template-columns:1fr;gap:14px} .proof-line{gap:16px} .ftr-grid{grid-template-columns:1fr} } /* short laptops: the bigger type would push the hero past one screen */ @media(max-height:840px){ .hero{padding:96px 0 74px} .hero h1{font-size:clamp(28px,4vw,56px);max-width:24ch} .hero .lede{font-size:clamp(16px,1.5vw,19px);margin-bottom:34px} .proof-line{margin-top:44px;padding-top:24px} .btn{min-height:52px} } /* the narrowest phones still need two lines */ @media(max-width:359px){ .hero h1{font-size:25px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv,.grid.rv > *{opacity:1 !important;transform:none !important} } /* ---------- content waits for the boot to finish ---------- 'pre' is added by JS, so if scripting fails the page is simply visible rather than hidden forever. */ body.pre{overflow:hidden} body.pre .hdr,body.pre .page,body.pre .route,body.pre .ftr{opacity:0; /* failsafe: if no script ever removes .pre, reveal anyway */ animation:preFailsafe 0s linear 2.8s forwards} @keyframes preFailsafe{to{opacity:1}} /* and lift the boot screen too, so it can't sit there forever */ body.pre .boot{animation:bootFailsafe 0s linear 2.8s forwards} @keyframes bootFailsafe{to{opacity:0;visibility:hidden}} .hdr,.page,.route,.ftr{transition:opacity .7s ease} /* hero copy rises in once the doors have cleared */ .hero-copy > *{opacity:0;transform:translateY(26px)} body.revealed .hero-copy > *{opacity:1;transform:none; transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)} body.revealed .hero-copy > *:nth-child(1){transition-delay:.05s} body.revealed .hero-copy > *:nth-child(2){transition-delay:.16s} body.revealed .hero-copy > *:nth-child(3){transition-delay:.28s} body.revealed .hero-copy > *:nth-child(4){transition-delay:.40s} body.revealed .hero-copy > *:nth-child(5){transition-delay:.54s} @media(prefers-reduced-motion:reduce){ body.pre{overflow:auto} body.pre .hdr,body.pre .page,body.pre .route,body.pre .ftr{opacity:1} .hero-copy > *{opacity:1;transform:none} } /* Product page refresh */ #main--products .prod-hero{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.12fr .88fr; gap:26px; align-items:center; padding:34px; border:1px solid rgba(255,255,255,.08); border-radius:28px; background: radial-gradient(1200px 500px at 10% -10%, rgba(240,158,199,.18), transparent 42%), radial-gradient(700px 360px at 100% 0%, rgba(214,170,102,.18), transparent 45%), linear-gradient(135deg, rgba(42,25,57,.92), rgba(18,17,36,.96) 60%, rgba(33,24,59,.92)); box-shadow:0 24px 60px rgba(0,0,0,.22); } #main--products .prod-hero:before, #main--products .prod-hero:after{ content:""; position:absolute; inset:auto auto 18px 18px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(215,177,110,.18), transparent 68%); filter:blur(8px); pointer-events:none; } #main--products .prod-hero:after{ inset:18px 24px auto auto; width:220px; height:220px; background:radial-gradient(circle, rgba(240,158,199,.14), transparent 70%); } #main--products .stories-lockup{display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); backdrop-filter:blur(6px)} #main--products .stories-lockup .mark{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(215,177,110,.32), rgba(240,158,199,.22)); border:1px solid rgba(255,255,255,.12); color:var(--ink)} #main--products .stories-lockup .mark svg{width:24px; height:24px; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round} #main--products .stories-lockup .meta{display:flex; flex-direction:column; gap:2px} #main--products .stories-lockup .meta b{font:700 14px/1.1 Inter,system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)} #main--products .stories-lockup .meta span{font:500 13px/1.35 Inter,system-ui,sans-serif; color:var(--muted)} #main--products .prod-hero-copy h1, #main--products .prod-hero-copy h2{margin:0; font-family:Fraunces, ui-serif, Georgia, serif; font-size:clamp(42px,5vw,72px); line-height:.98; letter-spacing:-.03em; max-width:11ch} #main--products .prod-hero-copy h1 em, #main--products .prod-hero-copy h2 em{font-style:italic; color:var(--rose)} #main--products .prod-hero-copy p{margin:16px 0 0; max-width:62ch; color:#d6d0dd; font-size:clamp(18px,2.1vw,22px); line-height:1.55} #main--products .prod-hero-copy .kicker{margin-bottom:14px} #main--products .prod-hero-art{position:relative; min-height:320px; display:flex; justify-content:center; align-items:center} #main--products .hero-books{position:relative; width:min(420px,100%); height:320px} #main--products .hero-book{position:absolute; width:182px; border-radius:22px; overflow:hidden; box-shadow:0 18px 42px rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05)} #main--products .hero-book img{display:block; width:100%; height:auto} #main--products .hero-book.one{left:26px; top:34px; transform:rotate(-8deg)} #main--products .hero-book.two{right:28px; bottom:20px; transform:rotate(8deg)} #main--products .hero-note{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:12px 14px; min-width:170px; border-radius:18px; background:rgba(17,18,29,.88); border:1px solid rgba(255,255,255,.12); box-shadow:0 14px 34px rgba(0,0,0,.24); text-align:center} #main--products .hero-note b{display:block; font:700 12px/1.2 Inter,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:6px} #main--products .hero-note span{display:block; color:var(--muted); font-size:14px; line-height:1.45} /* 18px here was less than the 40px that .sec-head::before bleeds below the heading box, so the decorative vignette washed over the top edge of the book cards. 56px clears the bleed and still sits tighter than the 62px site default. */ #main--products #catalog .sec-head{margin-bottom:56px} #main--products .catalog-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px} #main--products .book-card{display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:22px; align-items:stretch; padding:18px; border-radius:26px; background:rgba(255,255,255,.03); border:1px solid var(--line); box-shadow:0 12px 32px rgba(0,0,0,.08)} #main--products .book-card .book-cover{border-radius:20px; overflow:hidden; background:#13131d} #main--products .book-card .book-cover img{display:block; width:100%; height:100%; object-fit:cover} #main--products .book-card .book-body{display:flex; flex-direction:column; gap:12px; padding:8px 4px 8px 0} #main--products .book-card .book-body h3{margin:0} #main--products .book-card .book-body p{margin:0; color:var(--muted)} #main--products .book-card .book-actions{margin-top:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap} #main--products .book-status{display:inline-flex; width:fit-content; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:rgba(215,177,110,.12); color:var(--gold); border:1px solid rgba(215,177,110,.18); font:700 12px/1 Inter,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase} #main--products .book-status:before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(215,177,110,.12)} @media (max-width: 980px){ #main--products .prod-hero{grid-template-columns:1fr; padding:24px} #main--products .prod-hero-copy h1, #main--products .prod-hero-copy h2{max-width:none} #main--products .prod-hero-art{min-height:280px} #main--products .catalog-grid{grid-template-columns:1fr} } @media (max-width: 680px){ #main--products .book-card{grid-template-columns:1fr} #main--products .book-card .book-cover img{aspect-ratio:4/5; object-fit:cover} #main--products .hero-books{height:280px} #main--products .hero-book{width:150px} #main--products .hero-book.one{left:8px; top:24px} #main--products .hero-book.two{right:8px; bottom:10px} } /* Product page hero refinement */ #main--products .stories-hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:64px; align-items:center; min-height:520px; padding:56px 0 48px; border:0; border-radius:0; background:none; box-shadow:none; position:relative; } #main--products .stories-hero:before, #main--products .stories-hero:after{content:none} #main--products .stories-hero-copy{padding-left:6px} #main--products .stories-wordmark{ display:flex; align-items:baseline; gap:12px; margin:0 0 28px; width:max-content; color:var(--ink); } #main--products .stories-vrtam{ font-family:Fraunces, ui-serif, Georgia, serif; font-size:34px; line-height:1; letter-spacing:-.03em; } #main--products .stories-name{ font:700 13px/1 Inter,system-ui,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); } #main--products .stories-hero-copy h1{ margin:0; max-width:15ch; font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,68px); line-height:.98; letter-spacing:-.035em; } #main--products .stories-hero-copy h1 em{font-style:italic;color:var(--rose)} #main--products .stories-hero-copy>p{ margin:24px 0 0; max-width:560px; color:#d7d1dc; font-size:clamp(18px,2vw,22px); line-height:1.55; } #main--products .stories-books{ display:flex; align-items:flex-end; justify-content:center; gap:22px; min-height:420px; position:relative; padding:30px 8px; } #main--products .stories-books:before{ content:""; position:absolute; left:50%; top:50%; width:460px; height:320px; transform:translate(-50%,-48%); background:radial-gradient(ellipse, rgba(226,177,116,.12) 0%, rgba(224,146,193,.06) 40%, transparent 72%); filter:blur(10px); pointer-events:none; } #main--products .stories-book{ position:relative; z-index:1; width:min(215px,44%); margin:0; border-radius:14px; overflow:hidden; background:#12121b; box-shadow:0 28px 56px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.08); transform:none; } #main--products .stories-book:first-child{transform:translateY(-20px)} #main--products .stories-book:last-child{transform:translateY(20px)} #main--products .stories-book img{display:block;width:100%;height:auto} #main--products .prod-hero, #main--products .prod-hero-art, #main--products .hero-books, #main--products .hero-book, #main--products .hero-note, #main--products .stories-lockup{display:none!important} @media (max-width: 940px){ #main--products .stories-hero{grid-template-columns:1fr;gap:16px;min-height:0;padding:34px 0 28px} #main--products .stories-hero-copy h1{max-width:12ch} #main--products .stories-books{min-height:340px;padding-top:10px} #main--products .stories-book{width:min(190px,42%)} } @media (max-width: 600px){ #main--products .stories-wordmark{margin-bottom:20px} #main--products .stories-vrtam{font-size:30px} #main--products .stories-hero-copy h1{font-size:clamp(30px,7vw,44px)} #main--products .stories-books{min-height:300px;gap:14px} #main--products .stories-book{width:min(158px,44%)} } /* Kathakar platform page refresh */ #main--platform .kathakar-hero{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:72px; align-items:center; min-height:520px; padding:58px 0 42px; } #main--platform .kathakar-wordmark{ margin:0 0 28px; width:max-content; font-family:Fraunces, ui-serif, Georgia, serif; font-size:38px; line-height:1; letter-spacing:-.035em; color:var(--gold); } #main--platform .kathakar-hero-copy h1{ margin:0; max-width:15ch; font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,68px); line-height:.99; letter-spacing:-.038em; } #main--platform .kathakar-hero-copy h1 em{font-style:italic;color:var(--rose)} #main--platform .kathakar-hero-copy>p{ margin:24px 0 0; max-width:590px; color:#d7d1dc; font-size:clamp(18px,2vw,22px); line-height:1.55; } #main--platform .kathakar-hero-visual{position:relative;padding:24px 0} #main--platform .kathakar-hero-visual:before{ content:"";position:absolute;left:50%;top:50%;width:580px;height:390px;transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(226,177,116,.12) 0%,rgba(224,146,193,.07) 42%,transparent 72%);filter:blur(10px);pointer-events:none } #main--platform .kathakar-screen{ position:relative;z-index:1;margin:0;border-radius:20px;overflow:hidden;background:#11111a; box-shadow:0 28px 60px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.09) } #main--platform .kathakar-screen-top{height:46px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)} #main--platform .screen-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)} #main--platform .screen-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#dcd5df} #main--platform .screen-live i,.demo-live i{display:block;width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px rgba(240,158,199,.1)} #main--platform .kathakar-screen img{display:block;width:100%;height:auto} #main--platform .kathakar-audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:10px 0 12px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--line)} #main--platform .kathakar-audience{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:28px;background:var(--bg)} #main--platform .audience-icon{width:38px;height:38px;color:var(--gold)} #main--platform .audience-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round} #main--platform .kathakar-audience .tag{margin:1px 0 10px} #main--platform .kathakar-audience h3{margin:0 0 9px;font-size:22px} #main--platform .kathakar-audience p:last-child{margin:0;color:var(--muted);line-height:1.55} #main--platform .k-demo{display:grid;grid-template-columns:minmax(0,.75fr) minmax(460px,1.25fr);gap:60px;align-items:center;padding:34px 0 14px} #main--platform .k-demo-copy h3{margin:18px 0 10px;font-size:32px} #main--platform .k-demo-copy>p{max-width:48ch;color:var(--muted);font-size:17px;line-height:1.65;margin:0 0 24px} #main--platform .demo-live{display:inline-flex;align-items:center;gap:9px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)} #main--platform .demo-panel{padding:28px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025);box-shadow:0 18px 42px rgba(0,0,0,.12)} #main--platform .demo-panel-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} #main--platform .demo-panel-head b{color:var(--gold)} #main--platform .demo-panel h3{font-size:30px;max-width:18ch;margin:0 0 22px} #main--platform .demo-options{display:grid;gap:10px} #main--platform .demo-options button{position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:20px;width:100%;padding:15px 16px;border-radius:13px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 14px/1.25 Inter,system-ui,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease} #main--platform .demo-options button:before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:rgba(215,177,110,.09);transition:width .4s ease;z-index:0} #main--platform .demo-options button span,#main--platform .demo-options button i{position:relative;z-index:1;font-style:normal} #main--platform .demo-options button i{opacity:0;color:var(--gold);transition:opacity .2s ease} #main--platform .demo-options button:hover{border-color:rgba(215,177,110,.35)} #main--platform .demo-options.is-voted button:before{width:var(--vote)} #main--platform .demo-options.is-voted button i{opacity:1} #main--platform .demo-options button.is-choice{border-color:rgba(215,177,110,.5);background:rgba(215,177,110,.06)} #main--platform .demo-response{margin:16px 0 0;color:var(--muted);font-size:13px} #main--platform .k-pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:16px} #main--platform .price-card{display:flex;flex-direction:column;min-height:430px;padding:30px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025)} #main--platform .price-card.featured{background:linear-gradient(145deg,rgba(215,177,110,.08),rgba(255,255,255,.025) 55%);border-color:rgba(215,177,110,.22)} #main--platform .price-card h3{margin:8px 0 18px;font-size:30px} #main--platform .price-line{display:flex;align-items:baseline;gap:10px;margin-bottom:18px} #main--platform .price-line b{font-family:Fraunces,ui-serif,Georgia,serif;font-size:38px;line-height:1;color:var(--ink)} #main--platform .price-line span{color:var(--muted);font-size:14px} #main--platform .price-card>p:not(.tag){color:var(--muted);line-height:1.6;margin:0 0 18px} #main--platform .price-card ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;color:#d8d2dc} #main--platform .price-card li{position:relative;padding-left:22px} #main--platform .price-card li:before{content:"✓";position:absolute;left:0;color:var(--gold)} #main--platform .price-card .btn{margin-top:auto;width:max-content} @media(max-width:980px){ #main--platform .kathakar-hero{grid-template-columns:1fr;gap:18px;min-height:0;padding:36px 0 24px} #main--platform .kathakar-hero-copy h1{max-width:12ch} #main--platform .kathakar-hero-visual{padding:12px 0 8px} #main--platform .kathakar-audiences{grid-template-columns:1fr} #main--platform .k-demo{grid-template-columns:1fr;gap:28px} #main--platform .k-pricing{grid-template-columns:1fr} } @media(max-width:600px){ #main--platform .kathakar-wordmark{font-size:34px;margin-bottom:22px} #main--platform .kathakar-hero-copy h1{font-size:clamp(30px,7vw,44px)} #main--platform .kathakar-audience{padding:22px} #main--platform .demo-panel{padding:22px} #main--platform .price-card{padding:24px;min-height:0} } /* Homepage app download badges */ .app-download-row{ width:min(1180px,calc(100% - 48px)); margin:18px auto 0; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:14px 18px; border-top:1px solid rgba(217,188,94,.16); } .app-download-copy{ display:flex; align-items:center; gap:10px; color:var(--muted); font-family:'Lato',sans-serif; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; } .app-download-copy:before{ content:""; width:18px; height:1px; background:var(--gold); opacity:.72; } .store-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .store-badge{ display:flex; align-items:center; gap:10px; min-height:46px; padding:8px 14px 8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#08080c; color:#fff; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.16); transition:transform .25s ease,border-color .25s ease,background .25s ease; } .store-badge:hover{ transform:translateY(-2px); border-color:rgba(217,188,94,.55); background:#0d0d12; } .store-badge svg{ width:24px; height:24px; display:block; flex:0 0 auto; } .store-badge .store-text{ display:flex; flex-direction:column; line-height:1; } .store-badge .store-text small{ font-family:'Lato',sans-serif; font-size:9px; font-weight:400; letter-spacing:.02em; text-transform:none; opacity:.78; margin-bottom:4px; } .store-badge .store-text b{ font-family:'Lato',sans-serif; font-size:17px; font-weight:600; letter-spacing:-.01em; text-transform:none; } @media(max-width:720px){ .app-download-row{ width:calc(100% - 34px); align-items:flex-start; flex-direction:column; gap:12px; padding:14px 0 0; } .store-badges{width:100%} .store-badge{flex:1 1 0;min-width:150px;justify-content:flex-start} } /* Kathakar community emphasis */ #main--platform #kathakar-community .sec-head{margin-bottom:26px} #main--platform .community-path{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--line); } #main--platform .community-card{ position:relative; min-height:260px; padding:30px; background:var(--bg); } #main--platform .community-card:after{ content:""; position:absolute; left:30px; bottom:0; width:54px; height:1px; background:var(--gold); opacity:.55; } #main--platform .community-n{ display:block; margin-bottom:42px; color:var(--gold); font:700 11px/1 Inter,system-ui,sans-serif; letter-spacing:.17em; } #main--platform .community-card h3{ margin:0 0 12px; max-width:12ch; font-size:27px; line-height:1.12; } #main--platform .community-card p{ margin:0; max-width:34ch; color:var(--muted); font-size:15px; line-height:1.65; } #main--platform .community-line{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px; padding:18px 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font:600 13px/1.2 Inter,system-ui,sans-serif; letter-spacing:.02em; } #main--platform .community-line i{ color:var(--gold); font-style:normal; } #main--platform .community-line strong{ color:var(--ink); font-weight:700; } @media(max-width:820px){ #main--platform .community-path{grid-template-columns:1fr} #main--platform .community-card{min-height:0} #main--platform .community-n{margin-bottom:22px} #main--platform .community-card h3{max-width:none} #main--platform .community-line{justify-content:flex-start;overflow:auto;white-space:nowrap} } /* Experiences, Contact, Media & Announcements refresh */ #main--experiences .exp-hero, #main--contact .contact-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:44px 0 28px; } #main--experiences .exp-brand, #main--contact .contact-brand{ display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; font:700 13px/1 Inter,system-ui,sans-serif; letter-spacing:.17em; text-transform:uppercase; color:var(--realm-accent,var(--gold)); } #main--experiences .exp-brand:before, #main--contact .contact-brand:before{ content:""; width:34px; height:1px; background:currentColor; opacity:.8; } #main--experiences .exp-hero h1, #main--contact .contact-hero h1{ margin:0; max-width:15ch; font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,68px); line-height:1.04; letter-spacing:-.01em; } #main--contact .contact-hero h1{max-width:14ch} #main--experiences .exp-hero h1 em, #main--contact .contact-hero h1 em{font-style:italic; color:var(--gold)} #main--experiences .exp-hero .lede, #main--contact .contact-hero .lede{ max-width:580px; margin:22px 0 0; font-size:clamp(18px,2vw,22px); line-height:1.55; } #main--experiences .exp-visual{ min-height:380px; position:relative; overflow:hidden; border-radius:28px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025); } #main--experiences .exp-visual img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;filter:saturate(.9) contrast(1.02)} #main--experiences .exp-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(9,5,16,.7));pointer-events:none} #main--experiences .exp-visual-note{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px} #main--experiences .exp-visual-note b{font-family:Fraunces,ui-serif,Georgia,serif;font-size:24px;font-weight:500} #main--experiences .exp-visual-note span{font:600 11px/1.3 Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.15em;color:var(--realm-accent,var(--gold))} #main--experiences .exp-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} #main--experiences .exp-cat{padding:26px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025);min-height:235px;display:flex;flex-direction:column} #main--experiences .exp-cat-icon{width:44px;height:44px;margin-bottom:28px;color:var(--realm-accent,var(--gold))} #main--experiences .exp-cat-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} #main--experiences .exp-cat h3{margin:0 0 10px;font-size:clamp(25px,3vw,36px)} #main--experiences .exp-cat p{margin:0;color:var(--muted);max-width:42ch} #main--experiences .exp-cat .link{margin-top:auto;padding-top:24px} #main--experiences .exp-example{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch} #main--experiences .exp-example .feature{margin:0} #main--contact .contact-hero{grid-template-columns:.92fr 1.08fr;padding-bottom:44px} #main--contact .contact-form-wrap{padding:26px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.025)} #main--contact .contact-form{display:grid;gap:16px} #main--contact .contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} #main--contact .contact-form label{display:grid;gap:8px;font:600 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} #main--contact .contact-form input, #main--contact .contact-form select, #main--contact .contact-form textarea{ width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);color:var(--ink);padding:14px 15px;font:500 15px/1.45 Inter,system-ui,sans-serif;outline:none } #main--contact .contact-form textarea{min-height:130px;resize:vertical} #main--contact .contact-form input:focus, #main--contact .contact-form select:focus, #main--contact .contact-form textarea:focus{border-color:var(--realm-accent,var(--gold))} #main--contact .contact-note{margin:12px 0 0;color:var(--muted);font-size:14px} #main--contact .contact-note a{color:var(--ink)} #main--media .media-hero{padding:44px 0 24px;max-width:900px} #main--media .media-hero .media-brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--realm-accent,var(--gold))} #main--media .media-hero .media-brand:before{content:"";width:34px;height:1px;background:currentColor} #main--media .media-hero h1{margin:0;font-family:'Cormorant Garamond',serif;font-size:clamp(36px,5vw,68px);line-height:.96;letter-spacing:-.04em;max-width:10ch} #main--media .media-hero h1 em{color:var(--realm-accent,var(--gold));font-style:italic} #main--media .media-hero .lede{margin-top:20px;max-width:650px} #main--media .announcement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} #main--media .announcement-card{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025);min-height:235px;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease,background .2s ease} #main--media .announcement-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)} #main--media .announcement-card .post-cat{width:max-content} #main--media .announcement-card h3{margin:2px 0 0;font-size:clamp(24px,2.5vw,34px);line-height:1.08} #main--media .announcement-card p{margin:0;color:var(--muted)} #main--media .announcement-card .link{margin-top:auto} .announcement-route .art-head .post-cat{margin-bottom:4px} .announcement-route .art-body p{font-size:18px;line-height:1.78} @media(max-width:900px){ #main--experiences .exp-hero,#main--contact .contact-hero{grid-template-columns:1fr;gap:28px} #main--experiences .exp-cats,#main--media .announcement-grid{grid-template-columns:1fr} #main--experiences .exp-example{grid-template-columns:1fr} } @media(max-width:620px){ #main--contact .contact-form .row{grid-template-columns:1fr} #main--experiences .exp-visual{min-height:300px} } /* Vṛtam Studio hero refresh */ #main--services .studio-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.92fr); gap:64px; align-items:center; min-height:520px; padding:52px 0 38px; } #main--services .studio-wordmark{ margin:0 0 28px; width:max-content; font-family:Fraunces,ui-serif,Georgia,serif; font-size:38px; line-height:1; letter-spacing:-.035em; color:var(--gold); } #main--services .studio-hero h1{ margin:0; max-width:15ch; font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,68px); line-height:1.04; letter-spacing:-.01em; } #main--services .studio-hero h1 em{font-style:italic;color:var(--rose)} #main--services .studio-hero .lede{ margin:24px 0 0; max-width:610px; color:#d7d1dc; font-size:clamp(18px,2vw,22px); line-height:1.55; } #main--services .studio-visual{ min-height:390px; position:relative; overflow:hidden; margin:0; border-radius:26px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025); box-shadow:0 26px 56px rgba(0,0,0,.22); } #main--services .studio-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) contrast(1.02); } #main--services .studio-visual:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(9,5,16,.76)); pointer-events:none; } #main--services .studio-visual-note{ position:absolute; z-index:2; left:22px; right:22px; bottom:20px; display:flex; justify-content:space-between; align-items:flex-end; gap:18px; } #main--services .studio-visual-note b{ font-family:Fraunces,ui-serif,Georgia,serif; font-size:24px; font-weight:500; } #main--services .studio-visual-note span{ max-width:210px; text-align:right; font:600 11px/1.4 Inter,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.13em; color:var(--gold); } /* Experiences selected-work portfolio */ #main--experiences .exp-project-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } #main--experiences .exp-project{ position:relative; min-height:260px; padding:28px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.025); overflow:hidden; display:flex; flex-direction:column; } #main--experiences .exp-project:before{ content:attr(data-n); position:absolute; right:20px; top:13px; font-family:Fraunces,ui-serif,Georgia,serif; font-size:64px; line-height:1; color:rgba(255,255,255,.045); pointer-events:none; } #main--experiences .exp-project .project-type{ margin:0 0 28px; font:700 11px/1 Inter,system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } #main--experiences .exp-project h3{ margin:0 0 12px; max-width:13ch; font-size:clamp(28px,3.2vw,40px); } #main--experiences .exp-project p:last-child{ margin:auto 0 0; max-width:48ch; color:var(--muted); line-height:1.65; } @media (max-width:940px){ #main--services .studio-hero{grid-template-columns:1fr;gap:28px;min-height:0;padding:34px 0 28px} #main--services .studio-hero h1{max-width:12ch} #main--services .studio-visual{min-height:330px} } @media (max-width:760px){ #main--experiences .exp-project-grid{grid-template-columns:1fr} } @media (max-width:600px){ #main--services .studio-wordmark{font-size:32px;margin-bottom:20px} #main--services .studio-visual-note{display:block} #main--services .studio-visual-note span{display:block;text-align:left;margin-top:7px;max-width:none} } /* Shop page — unified Vṛtam storefront */ #main--shop .shop-hero{ display:grid; grid-template-columns:1.02fr .98fr; gap:42px; align-items:center; min-height:520px; padding:24px 0 10px; } #main--shop .shop-wordmark{ display:inline-flex; align-items:center; width:max-content; margin-bottom:22px; font:700 15px/1 Inter,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } #main--shop .shop-wordmark:after{content:""; width:46px; height:1px; margin-left:14px; background:currentColor; opacity:.55} #main--shop .shop-hero-copy h1{ margin:0; max-width:15ch; font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,68px); line-height:.96; letter-spacing:-.045em; } #main--shop .shop-hero-copy h1 em{font-style:italic; color:var(--rose)} #main--shop .shop-hero-copy .lede{margin-top:24px; max-width:600px; font-size:clamp(18px,2vw,22px); line-height:1.55} #main--shop .shop-hero-visual{position:relative; min-height:420px} #main--shop .shop-stack-card{ position:absolute; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#171523; box-shadow:0 26px 70px rgba(0,0,0,.30); } #main--shop .shop-stack-card img{display:block; width:100%; height:100%; object-fit:cover} #main--shop .shop-stack-label{ position:absolute; left:50%; bottom:16%; z-index:5; transform:translateX(-50%); padding:11px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(15,15,24,.84); backdrop-filter:blur(12px); color:var(--ink); font:700 12px/1 Inter,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; } #main--shop .shop-section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:26px} #main--shop .shop-section-head h2{margin:0; max-width:13ch} #main--shop .shop-section-head .lede{max-width:560px; margin:0} #main--shop .shop-brand{font:700 13px/1 Inter,system-ui,sans-serif; letter-spacing:.17em; text-transform:uppercase; color:var(--gold); margin:0 0 12px} #main--shop .shop-books{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px} #main--shop .shop-book{ display:grid; grid-template-columns:minmax(170px,230px) 1fr; gap:24px; align-items:stretch; padding:18px; border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.025); } #main--shop .shop-book-media{border-radius:20px; overflow:hidden; background:#14131e; min-height:330px} #main--shop .shop-book-media img{width:100%; height:100%; display:block; object-fit:cover} #main--shop .shop-book-copy{display:flex; flex-direction:column; padding:8px 5px 8px 0} #main--shop .shop-book-copy h3{margin:10px 0 10px} #main--shop .shop-book-copy p{margin:0 0 14px; color:var(--muted)} #main--shop .shop-meta{display:flex; flex-wrap:wrap; gap:8px; margin:5px 0 18px} #main--shop .shop-meta span{padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px} #main--shop .shop-status{display:inline-flex; align-items:center; gap:8px; width:max-content; color:var(--gold); font:700 11px/1 Inter,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase} #main--shop .shop-status:before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(215,177,110,.10)} #main--shop .shop-actions{margin-top:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap} #main--shop .shop-plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px} #main--shop .shop-plan{ position:relative; min-height:360px; padding:30px; border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.025); overflow:hidden; } #main--shop .shop-plan:after{content:""; position:absolute; right:-70px; top:-70px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(240,158,199,.11),transparent 70%); pointer-events:none} #main--shop .shop-plan h3{font-size:clamp(30px,3vw,42px); margin:12px 0 10px} #main--shop .shop-plan > p{max-width:50ch; color:var(--muted)} #main--shop .shop-plan ul{list-style:none; padding:0; margin:24px 0 28px; display:grid; gap:10px} #main--shop .shop-plan li{position:relative; padding-left:20px; color:var(--ink)} #main--shop .shop-plan li:before{content:"·"; position:absolute; left:4px; color:var(--gold); font-weight:800} #main--shop .shop-vr-card{ display:grid; grid-template-columns:1.05fr .95fr; min-height:440px; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:rgba(255,255,255,.025); } #main--shop .shop-vr-copy{display:flex; flex-direction:column; justify-content:center; padding:42px} #main--shop .shop-vr-copy h2{margin:10px 0 16px; max-width:11ch} #main--shop .shop-vr-copy .lede{margin:0 0 18px; max-width:54ch} #main--shop .shop-vr-media{min-height:420px; background:#11121a} #main--shop .shop-vr-media img{width:100%; height:100%; display:block; object-fit:cover} #main--shop .quest-mark{display:inline-flex; align-items:center; gap:10px; width:max-content; margin-bottom:4px; color:var(--muted); font:600 13px/1.2 Inter,system-ui,sans-serif} #main--shop .quest-mark i{display:inline-block; width:26px; height:12px; border:2px solid currentColor; border-radius:50% 50% 45% 45% / 70% 70% 30% 30%; transform:rotate(0deg)} @media(max-width:980px){ #main--shop .shop-hero{grid-template-columns:1fr; min-height:auto; gap:12px} #main--shop .shop-hero-copy h1{max-width:none} #main--shop .shop-hero-visual{min-height:360px} #main--shop .shop-books,#main--shop .shop-plans{grid-template-columns:1fr} #main--shop .shop-vr-card{grid-template-columns:1fr} } @media(max-width:680px){ #main--shop .shop-hero-visual{min-height:300px} #main--shop .shop-stack-label{bottom:11%; font-size:10px} #main--shop .shop-book{grid-template-columns:1fr} #main--shop .shop-book-media{min-height:0} #main--shop .shop-book-media img{aspect-ratio:4/5} #main--shop .shop-section-head{display:block} #main--shop .shop-section-head .lede{margin-top:14px} #main--shop .shop-plan{min-height:0; padding:24px} #main--shop .shop-vr-copy{padding:28px 24px} #main--shop .shop-vr-media{min-height:300px} } /* About page hero */ #main--about .about-hero{ display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center; padding:28px 0 18px; } #main--about .about-wordmark{ display:inline-flex;align-items:center;width:fit-content;margin-bottom:18px; font:700 14px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase; color:var(--gold); } #main--about .about-hero-copy h1{ margin:0;max-width:15ch;font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,68px);line-height:.98;letter-spacing:-.035em; } #main--about .about-hero-copy h1 em{font-style:italic;color:var(--rose)} #main--about .about-hero-copy .lede{ margin:20px 0 0;max-width:58ch;font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--muted) } #main--about .about-visual{ position:relative;overflow:hidden;border-radius:26px;min-height:390px; border:1px solid var(--line);background:rgba(255,255,255,.03); } #main--about .about-visual img{display:block;width:100%;height:100%;min-height:390px;object-fit:cover} #main--about .about-visual:after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 54%,rgba(12,12,20,.44));pointer-events:none } #main--about .about-principles{margin-top:34px} @media (max-width:900px){ #main--about .about-hero{grid-template-columns:1fr;gap:26px} #main--about .about-hero-copy h1{max-width:none} #main--about .about-visual,#main--about .about-visual img{min-height:300px} } /* Product How it works heading refinement */ #main--products .how-title-only{display:block;margin-bottom:28px} #main--products .how-title-only h2{font-size:clamp(42px,5vw,68px);line-height:1;letter-spacing:-.03em;margin:0} /* one lede size across every tab hero — the per-page rules use id selectors, so this has to match their weight to win */ #main--products .stories-hero-copy > p, #main--platform .kathakar-hero-copy > p, #main--experiences .exp-hero .lede, #main--services .studio-hero .lede, #main--about .about-hero-copy .lede, #main--shop .shop-hero-copy .lede, #main--contact .contact-hero .lede, #main--media .media-hero .lede, #main--journal .page-hero .lede, #main--investors .page-hero .lede{ font-size:clamp(16px,1.55vw,20px);line-height:1.6} /* ---- region bar: offers a US-redirected visitor the way back ---- */ .region-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none; align-items:center;justify-content:center;gap:18px;flex-wrap:wrap; padding:13px 22px;background:rgba(5,8,19,.93);backdrop-filter:blur(11px); border-top:1px solid rgba(217,188,94,.26); font-family:'Lato',sans-serif;font-size:13.5px;color:#cfd6e2; animation:regionBarIn .5s cubic-bezier(.2,.7,.3,1) both} .region-bar.on{display:flex} @keyframes regionBarIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}} .region-bar-link{color:var(--gold);text-decoration:none;white-space:nowrap; border-bottom:1px solid rgba(217,188,94,.38);padding-bottom:1px;transition:border-color .25s ease} .region-bar-link:hover{border-bottom-color:var(--gold)} .region-bar button{background:none;border:0;color:#7f879a;cursor:pointer; font-size:20px;line-height:1;padding:0 2px;transition:color .25s ease} .region-bar button:hover{color:#cfd6e2} @media(max-width:520px){.region-bar{font-size:12.5px;gap:12px;padding:11px 16px}} /* ---- shop prices ---------------------------------------------------- */ .shop-price{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px} .shop-price-now{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--gold);line-height:1} .shop-price-was{font-family:'Lato',sans-serif;font-size:14px;color:#7f879a;text-decoration:line-through} .shop-price-soon{font-family:'Lato',sans-serif;font-size:13.5px;color:#8c94a3;font-style:italic} .shop-buy[disabled]{opacity:.45;cursor:not-allowed} .shop-buy.added{background:rgba(217,188,94,.18);color:var(--gold)} /* cart pill in the header */ /* The cart lives in the header, NOT inside .nav — mobile sets .nav to display:none, which left a customer with a full cart no way to reach checkout on a phone. It now sits beside the burger in both layouts. */ .nav-cart{position:relative;display:none;align-items:center;gap:7px; font-family:'Lato',sans-serif;font-size:13px;letter-spacing:.06em; text-transform:uppercase;color:var(--gold);text-decoration:none; border:1px solid rgba(217,188,94,.4);border-radius:999px;padding:8px 15px; margin-left:auto;transition:background .25s ease,border-color .25s ease} .nav-cart.on{display:inline-flex} .nav-cart:hover{background:rgba(217,188,94,.1);border-color:var(--gold)} .nav-cart-label{margin-left:2px} /* the drawer's own cart row, shown only when there is something in it */ .drawer-cart{display:none !important} .drawer-cart.on{display:block !important;color:var(--gold) !important} /* ---- checkout ------------------------------------------------------- */ .co-head{max-width:760px;margin:0 0 42px} .co-head h1{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(34px,4.6vw,58px);line-height:1.08;color:#fff;margin:10px 0 0} .co-head h1 em{font-style:italic;color:var(--gold)} .co-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:38px;align-items:start} .co-sub{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:21px; color:var(--gold);margin:0 0 20px;letter-spacing:.02em} .co-form,.co-summary{background:rgba(5,8,19,.68);backdrop-filter:blur(9px); border:1px solid rgba(217,188,94,.22);border-radius:16px;padding:clamp(22px,2.6vw,34px)} .co-summary{position:sticky;top:104px} .co-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .co-field{display:block;margin-bottom:16px} .co-field>span{display:block;font-family:'Lato',sans-serif;font-size:11.5px; font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:rgba(231,218,177,.62);margin-bottom:7px} .co-field>span i{font-style:normal;font-weight:400;text-transform:none; letter-spacing:.02em;color:#6f7789} .co-field input{width:100%;box-sizing:border-box;background:#070c1a; border:1px solid rgba(217,188,94,.24);border-radius:7px;padding:12px 14px; color:#e9edf4;font-family:'Lato',sans-serif;font-size:15px;outline:none; transition:border-color .22s ease,background .22s ease} .co-field input:focus{border-color:var(--gold);background:#091027} .co-field input[readonly]{color:#8c94a3;background:#060a16} .co-error{margin:4px 0 14px;padding:11px 14px;border-radius:7px; background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35); font-family:'Lato',sans-serif;font-size:13.5px;color:#fca5a5} .co-pay{width:100%;justify-content:center;margin-top:6px} .co-pay[disabled]{opacity:.5;cursor:not-allowed} .co-fine{margin:16px 0 0;font-family:'Lato',sans-serif;font-size:12.5px; line-height:1.65;color:#7f879a} .co-fine a{color:rgba(217,188,94,.85);text-decoration:none; border-bottom:1px solid rgba(217,188,94,.3)} .co-item{display:grid;grid-template-columns:1fr auto;gap:10px; padding:13px 0;border-bottom:1px solid rgba(217,188,94,.14)} .co-item-title{font-family:'Lato',sans-serif;font-size:14.5px;color:#e9edf4} .co-item-unit{font-family:'Lato',sans-serif;font-size:12px;color:#7f879a;margin-top:3px} .co-item-amt{font-family:'Lato',sans-serif;font-size:14.5px;color:var(--gold);white-space:nowrap} .co-qty{display:inline-flex;align-items:center;gap:0;margin-top:8px; border:1px solid rgba(217,188,94,.26);border-radius:999px;overflow:hidden} .co-qty button{background:none;border:0;color:var(--gold);cursor:pointer; font-size:15px;line-height:1;padding:5px 11px;transition:background .2s ease} .co-qty button:hover{background:rgba(217,188,94,.14)} .co-qty span{font-family:'Lato',sans-serif;font-size:13px;color:#e9edf4; min-width:22px;text-align:center} .co-remove{background:none;border:0;color:#6f7789;cursor:pointer; font-family:'Lato',sans-serif;font-size:12px;margin-top:8px;margin-left:10px; text-decoration:underline;padding:0} .co-remove:hover{color:#fca5a5} .co-totals{margin-top:18px} .co-line{display:flex;justify-content:space-between;gap:12px; font-family:'Lato',sans-serif;font-size:14px;color:#b2bccd;padding:6px 0} .co-line-total{margin-top:8px;padding-top:13px; border-top:1px solid rgba(217,188,94,.22);font-size:17px;color:#fff} .co-line-total span:last-child{color:var(--gold)} .co-state{max-width:620px;padding:46px 0 10px;text-align:left} .co-state h2{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(26px,3vw,36px);color:#fff;margin:0 0 14px} .co-done-mark{font-size:34px;color:var(--gold);margin-bottom:14px} @media(max-width:920px){ .co-grid{grid-template-columns:1fr} .co-summary{position:static;order:-1} } @media(max-width:560px){ .co-row{grid-template-columns:1fr} } /* The hidden attribute is a UA-level display:none, so any class that sets its own display — .co-grid is display:grid — silently wins and the element stays on screen. This keeps `hidden` meaning hidden. */ [hidden]{display:none !important} /* ---- mobile: cart beside the burger, label dropped for space ---- */ @media(max-width:1000px){ .hdr-in{gap:10px} .nav-cart{margin-left:auto;padding:7px 13px;font-size:12.5px} .nav-cart-label{display:none} } @media(max-width:420px){ .nav-cart{padding:6px 11px} } /* ---- mobile checkout ergonomics ------------------------------------- Three fixes, all measured on a 356px viewport: 1. iOS Safari zooms the whole page whenever a focused input has a font-size below 16px. Every field here was 15px, so the page jumped and zoomed on each tap through the address form. 2. The quantity buttons were 31x25 and Remove was 43x15 — well under the 24x24 WCAG 2.2 minimum, let alone a comfortable thumb target. */ @media(max-width:1000px){ .co-field input{font-size:16px} /* must stay >=16px: stops iOS zoom */ .co-qty button{padding:11px 16px;font-size:17px} .co-qty span{min-width:28px;font-size:15px} .co-remove{padding:11px 4px;font-size:13px;margin-left:14px} .co-item{padding:16px 0} .co-pay{padding:17px} } /* any touch device, regardless of width */ @media(pointer:coarse){ .co-field input{font-size:16px} .co-qty button{min-width:44px;min-height:40px} .co-remove{min-height:40px} } /* ---- mobile contact form -------------------------------------------- The same iOS Safari zoom-on-focus bug the checkout block above fixes: the fields are 15px, set via the `font:` shorthand, so focusing any of them zoomed the page. Overridden by font-size alone so the shorthand's family, weight and line-height survive. Same two scopes as checkout — the width query, then any coarse pointer regardless of width. */ @media(max-width:1000px){ #main--contact .contact-form input, #main--contact .contact-form select, #main--contact .contact-form textarea{font-size:16px} /* must stay >=16px: stops iOS zoom */ } @media(pointer:coarse){ #main--contact .contact-form input, #main--contact .contact-form select, #main--contact .contact-form textarea{font-size:16px} } /* ---- mobile touch targets ------------------------------------------- Hit areas measured in Chrome at 356/390/420px with a coarse pointer, before this block: region-bar dismiss 15.7 x 20 journal prev/next 34 x 34 cart pill 55.8 x 35 journal filters 98 x 33 checkout qty -/+ 44 x 40 checkout Remove 54.2 x 40 all short of a comfortable 44x44. The pills and text buttons simply grow to 44 — they are already rounded, so a taller box keeps the shape. The round 34px carousel buttons and the small dismiss glyph would be distorted by growing, so those keep their drawn size and get the hit area from a centred ::after instead; a pseudo-element still hit-tests to its originating element. One query rather than checkout's pair above: that block repeats a single declaration, this one would repeat ten. (max-width:1000px), (pointer:coarse) is the same scope the checkout fix uses — phone widths plus any touch device, desktop untouched. */ @media(max-width:1000px),(pointer:coarse){ .nav-cart{min-height:44px} .jfilter{min-height:44px} .co-qty button{min-height:44px} .co-remove{min-height:44px} .latest-btn{position:relative} .latest-btn::after{content:"";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:44px;height:44px} /* The dismiss glyph gets a real 44x44 box rather than an ::after: the bar is a tight flex row, and an overlay that size reached over the "Go to the India site" link beside it and out through the bar's own top and bottom edges. The glyph itself is not scaled, so the bar just gets taller. Its link is a primary action here, not an inline link in a sentence, so it is given the same floor. */ .region-bar button{min-width:44px;min-height:44px;padding:0; display:inline-flex;align-items:center;justify-content:center} /* The link keeps its drawn height: it is underlined with a border-bottom, and a taller box drops that rule away from the text. It takes its hit area from an ::after that only grows vertically, so it still clears the dismiss button beside it. */ .region-bar-link{position:relative} .region-bar-link::after{content:"";position:absolute;left:0;right:0; top:50%;transform:translateY(-50%);height:44px} } /* ---- safe-area insets ------------------------------------------------ The viewport meta carries viewport-fit=cover, which deliberately extends the page under the notch and the home indicator — the starfield, vignette and grain are meant to run edge to edge. Nothing here accounted for the other half of that bargain, so the fixed bars anchored to the screen edges sat underneath them: the header behind the notch, the region bar behind the home indicator, taking its dismiss button with it. Only the bars that hold controls are inset. The full-bleed backdrops (#stage, .vignette, .grain, .boot, .fallback, .scrim) stay edge to edge on purpose. env() resolves to its fallback wherever a device has no inset, so every rule here is a no-op on a normal screen and none of this needs a media query. */ .hdr{padding-top:env(safe-area-inset-top,0px)} .sprog{top:env(safe-area-inset-top,0px)} .drawer{padding-top:calc(96px + env(safe-area-inset-top,0px)); padding-right:calc(30px + env(safe-area-inset-right,0px)); padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))} .region-bar{padding-bottom:calc(13px + env(safe-area-inset-bottom,0px)); padding-left:calc(22px + env(safe-area-inset-left,0px)); padding-right:calc(22px + env(safe-area-inset-right,0px))} /* mirrors the 11px/16px the ≤520 block above sets, which would otherwise win over the longhands here on a small screen */ @media(max-width:520px){ .region-bar{padding-bottom:calc(11px + env(safe-area-inset-bottom,0px)); padding-left:calc(16px + env(safe-area-inset-left,0px)); padding-right:calc(16px + env(safe-area-inset-right,0px))} } /* ---- Latest strip: stack the slide above its controls ---------------- At <=900px the strip is grid-template-columns:1fr auto, and .latest-ui (five dots plus two 34px buttons) measures a near-fixed 199px. That leaves the 1fr track 75px at a 390px viewport and 41px at 356 — but .latest-item is position:absolute;inset:0 inside it, and its own children do not fit: .latest-thumb alone has a 58px floor and .latest-go is pushed right by margin-left:auto. The slide content spilled out of the track and landed on the dots and the prev/next buttons — measured 9x22px at 390 and 18x22px at 356, two tappable things on top of each other. One column instead, so the slide gets the full width and the controls sit on their own row beneath it. Desktop keeps the three-column row. */ @media(max-width:900px){ .latest{grid-template-columns:1fr} .latest-ui{justify-content:flex-end} } /* ---- page titles: one size and one top gap on phones ----------------- .page-lead / .page-hero already set a shared title scale — clamp(36px,5vw,68px) — but three routes escaped it on mobile: products and platform each re-shrink to clamp(30px,7vw,44px) in their own max-width:600px blocks, and home's landing hero runs its own clamp(28px,4vw,56px) with a 25px floor under 359px. At 390 that read 30/30/30 against 36 everywhere else. All three now join the shared scale. The gap above the title varied the same way. Every tab page sits on section.sec's 168.8px, then adds its own hero padding on top: 24px on shop, 28 about, 34 services and products, 36 platform, 44 experiences and media, and nothing at all on journal. Those additions are levelled to 32px, so each tab page starts its title at the same 200.8px. section.sec itself is untouched. Home keeps its own 104px: it is section.hero, a full-height landing hero rather than a section.sec tab page, and pushing its title down to 200.8px would redesign the landing rather than make it consistent. */ @media(max-width:1000px){ .hero h1, #main--products .stories-hero-copy h1, #main--platform .kathakar-hero-copy h1{font-size:clamp(36px,5vw,68px)} #main--about .about-hero, #main--experiences .exp-hero, #main--services .studio-hero, #main--products .stories-hero, #main--platform .kathakar-hero, #main--media .media-hero, #main--shop .shop-hero, #main--journal .page-hero{padding-top:32px} } /* ---- tab-page heading: highlighted kicker, accent second line -------- One treatment for all eight tab pages: the kicker takes the route's own accent, the title's first line is white and its trailing — which every one of these headings already has in the markup — takes the accent too. var(--realm-accent,var(--gold)) does the whole job: router.js sets --realm-accent on for the seven realm routes, and shop, which has no realm entry, falls through to the gold it already uses. No new colours, and nothing hardcoded per route. Six of the eight s were rendering --rose or --gold rather than their own accent; that is what changes here. The kicker is highlighted by colour only. Three of these are not eyebrows but 38px Fraunces brand lockups — Vṛtam Stories, Kathakar, Vṛtam Studio — so normalising them onto the 11.5px uppercase eyebrow scale would dismantle the lockups rather than make the pages consistent. Their size and weight are left alone. The narrow per-route max-widths (10ch-15ch, i.e. 172-206px against a 322px shell) are what forced three and four line titles on a phone, so they are released at <=1000px and the titles wrap to the shell. Desktop keeps its measure. platform still needs three lines and journal still fits on one; both are accepted as designed. */ #main--about .about-wordmark, #main--services .studio-wordmark, #main--experiences .exp-brand, #main--products .stories-wordmark, #main--platform .kathakar-wordmark, #main--media .media-hero .media-brand, #main--journal .page-eyebrow, #main--shop .shop-wordmark{color:var(--realm-accent,var(--gold))} #main--about .about-hero-copy h1, #main--services .studio-hero h1, #main--experiences .exp-hero h1, #main--products .stories-hero-copy h1, #main--platform .kathakar-hero-copy h1, #main--media .media-hero h1, #main--journal .page-hero h1, #main--shop .shop-hero-copy h1{color:#fff} #main--about .about-hero-copy h1 em, #main--services .studio-hero h1 em, #main--experiences .exp-hero h1 em, #main--products .stories-hero-copy h1 em, #main--platform .kathakar-hero-copy h1 em, #main--media .media-hero h1 em, #main--journal .page-hero h1 em, #main--shop .shop-hero-copy h1 em{color:var(--realm-accent,var(--gold))} @media(max-width:1000px){ /* experiences is deliberately not in this list: its 15ch already lands on two lines at both widths, and releasing it let the short title ride up onto one line at 390. */ #main--services .studio-hero h1, #main--products .stories-hero-copy h1, #main--platform .kathakar-hero-copy h1, #main--media .media-hero h1{max-width:none} } /* ---- decorative glows: keep them inside the viewport ------------------ Three absolutely positioned ::before glows are drawn wider than the column they sit in — .sec-head by -60px on each side, and the two hero glows at a fixed 460px and 580px. On a desktop column that is invisible spill; against the 322px shell on a 356px phone it pushed the document to 399, 409 and 468, so five routes scrolled sideways: about, experiences and services on .sec-head alone, products and platform on theirs as well. Capped rather than removed, so the glow still reads. Each is position:absolute and pointer-events:none, so nothing reflows either way. .sec-head.solo::before already drops its glow outright — the same idea, applied here by width instead. Mobile only; desktop keeps the original spill. */ @media(max-width:1000px){ .sec-head::before{inset:-40px 0} #main--products .stories-books::before{width:min(460px,100%)} #main--platform .kathakar-hero-visual::before{width:min(580px,100%)} } /* ---- nav drawer: let it scroll ------------------------------------- The drawer is position:fixed with inset:0 0 0 auto, so it is exactly as tall as the viewport — no vh unit involved. It is already a flex column, but it never had an overflow value, so it inherited visible: when the menu is taller than the screen the surplus simply hung off the bottom with no way to reach it. Measured with a 47/34 notch on a 667px-tall screen: content 775px in a 667px box, so the "Contact" CTA sat at 723..775 — past the drawer's own bottom, past the safe area, off the viewport entirely, and elementFromPoint at its centre returned null. Shop and Contact were both unreachable. A 844px screen hid the problem, which is why it only showed up on a phone. The safe-area padding-bottom stays inside the scroll content, so the CTA still clears the home indicator once scrolled to the end. overscroll-behavior keeps the gesture in the drawer; body.locked already stops the page behind it from moving. */ @media(max-width:1000px){ .drawer{overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain} } /* ---- nav drawer: frosted glass and Apple-style motion ---------------- The drawer already asked for backdrop-filter, but at rgba(5,8,19,.97) the panel was all but opaque so the blur never showed, and it had no -webkit- twin, which is the half iOS Safari actually reads. Both are set together here, on the same rule, and the tint drops to .62 so the starfield behind genuinely diffuses through. The opaque .92 tint stays as the base declaration, so a browser with no backdrop-filter gets a readable solid panel rather than a see-through one; the translucent version only applies inside the @supports. Additive only — the scroll fix, the safe-area padding, the open/close class toggle and the desktop nav are all untouched. */ @media(max-width:1000px){ .drawer{ background:rgba(5,8,19,.92); border-left:1px solid var(--line); box-shadow:-26px 0 64px rgba(0,0,0,.55); opacity:0; transition:transform .34s cubic-bezier(.32,.72,0,1), opacity .28s cubic-bezier(.32,.72,0,1); } .drawer.open{opacity:1} /* the page behind recedes rather than just dimming */ .scrim{ background:rgba(3,5,12,.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .drawer a{ border-radius:10px; transition:background-color .18s ease, color .18s ease, transform .18s cubic-bezier(.32,.72,0,1); } } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ @media(max-width:1000px){ .drawer{ background:rgba(5,8,19,.62); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); } } } /* press feedback belongs to touch only; desktop keeps its hover */ @media(max-width:1000px) and (pointer:coarse){ .drawer a:active{ background:rgba(255,255,255,.07); color:var(--gold); transform:scale(.985); } } @media(prefers-reduced-motion:reduce){ .drawer,.drawer a,.scrim{transition:none} .drawer a:active{transform:none} } /* ---- tab-page wordmarks: gold two-part serif lockups ---------------- Every tab wordmark is rendered the way products' Vṛtam Stories is: a big serif word beside a small tracked label, both in --gold. The template is Stories' own two spans, measured on a phone — .stories-vrtam at Fraunces 30px/400, letter-spacing -.03em, and .stories-name at Inter 700 13px, letter-spacing .24em, uppercase. Stories' big word was realm pink; it is gold now too. This replaces the flat 16px treatment that was here before, which read the 16px off the lockup's container rather than the spans that draw it and so flattened all three Fraunces lockups. The six routes that carried a single text node now carry .wm > .wm-v + .wm-n. The .wm wrapper is there for desktop's sake: four of these containers are inline-flex, two of them with a 12px gap and a ::before rule, so two bare spans would have become extra flex items and moved desktop. One wrapper keeps the item count as it was, and display:contents steps it aside here so the two parts become the flex items. Kathakar stays a single big serif word with no label. Journal is addressed by route because investors shares .page-eyebrow. The dash removal on experiences, media and shop carries over — Stories has none. */ @media(max-width:1000px){ #main--services .studio-wordmark, #main--about .about-wordmark, #main--experiences .exp-brand, #main--media .media-hero .media-brand, #main--journal .page-eyebrow, #main--shop .shop-wordmark{ display:flex;align-items:baseline;gap:12px;width:max-content; } .wm{display:contents} /* big serif part, per .stories-vrtam */ #main--products .stories-vrtam, #main--platform .kathakar-wordmark, .wm-v{ font-family:Fraunces,ui-serif,Georgia,serif; font-size:30px;font-weight:400;line-height:1; letter-spacing:-.03em;text-transform:none;color:var(--gold); } /* small label, per .stories-name */ #main--products .stories-name, .wm-n{ font:700 13px/1 Inter,system-ui,sans-serif; letter-spacing:.24em;text-transform:uppercase;color:var(--gold); } #main--experiences .exp-brand::before, #main--media .media-hero .media-brand::before, #main--shop .shop-wordmark::after{content:none} /* media and about are not brand lockups — "Media" and "Vṛtam" are not standalone marks the way Kathakar or Vṛtam Studio are, and the big serif made them read as two unrelated pieces. Both run as one tracked line instead: the container goes back to flowing text so the literal space in the markup does the spacing, and the big part takes the same label spec as the small one. */ #main--media .media-hero .media-brand, #main--about .about-wordmark{display:block;width:auto} #main--media .media-hero .media-brand .wm, #main--about .about-wordmark .wm{display:inline} #main--media .media-hero .media-brand .wm-v, #main--about .about-wordmark .wm-v{ font:700 13px/1 Inter,system-ui,sans-serif; letter-spacing:.24em;text-transform:uppercase; } } /* ---- journal accent: wine rather than the green it shares with media - --realm-accent is set inline on by router.js and the body carries no route name, so it cannot be overridden by a body selector. Setting it on the route element instead works without !important: custom properties inherit, so everything inside #main--journal picks this up while media keeps the #7ee6a6 they were sharing. Mobile only. The starfield tint is unaffected — boot.js reads --realm-accent off the body, which still holds the original value. #c0415f was the starting point but measures 2.19:1 against this hero, which has imagery behind it rather than the flat #03130b the realm map implies — the clear backdrop behind the accent line samples at rgb(42,64,60). #e694a8 is the deepest wine rose that still clears 4.5:1 there, at 4.83:1. (The h1 is 36px, so WCAG's applicable bar is really the 3:1 for large text, which a richer #d96b83 would meet at 3.36:1 — noted in case the deeper tone is wanted.) */ @media(max-width:1000px){ /* the blog takes the green of its REALM entry; the wine override that used to sit here read as pink on the Work with Vrtam band */ #main--journal{--realm-accent:#7ee6a6} } /* ---- shop: breathing room between price and Buy now ------------------ .shop-price carries margin:14px 0 4px and .shop-actions sits right under it with margin-top:auto, which resolves to 0 on a phone because the stacked card has no free space left. That left 4px between the price and the button — measured on both shop cards at 356 and 390. The space is added on the price's bottom margin rather than on .shop-actions, so .shop-actions keeps its margin-top:auto and the actions row stays pinned to the bottom of a card that has room. */ @media(max-width:1000px){ #main--shop .shop-price{margin-bottom:16px} } /* ---- /buy : the stall page ------------------------------------------- Built for someone standing at a stall with a phone in one hand. Three big targets, two fields, one button. Nothing to scroll past and nothing to read. Deliberately not the shop page with bits removed — the shop is for browsing, this is for paying in under thirty seconds. */ #main--buy .shell{max-width:620px} .buy-head{text-align:center;padding:14px 0 26px} .buy-wordmark{margin:0 0 14px} .buy-head h1{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(32px,7vw,46px);line-height:1.08;color:#fff;margin:0 0 10px} .buy-dek{font-family:'Lato',sans-serif;font-size:15px;color:var(--muted);margin:0} .buy-picks{display:grid;gap:12px;margin:0 0 26px} .buy-pick{display:flex;align-items:center;gap:16px;width:100%;text-align:left; background:rgba(255,255,255,.025);border:1px solid var(--line); border-radius:14px;padding:18px 20px;cursor:pointer;color:inherit; font:inherit;transition:border-color .2s ease,background .2s ease,transform .12s ease} .buy-pick:hover{border-color:rgba(217,188,94,.45)} .buy-pick:active{transform:scale(.985)} .buy-pick[aria-pressed="true"]{border-color:var(--gold); background:rgba(217,188,94,.1);box-shadow:inset 0 0 0 1px rgba(217,188,94,.35)} .buy-pick-body{flex:1;min-width:0} /* name, subtitle and the two prices are spans, so they need to be told to stack — left inline they ran together as "PañcatantraAR storybook" and "$50.00$55.00". */ .buy-pick-name{display:block;font-family:'Cormorant Garamond',serif; font-size:23px;color:#fff;line-height:1.15} .buy-pick-sub{display:block;font-family:'Lato',sans-serif;font-size:12.5px; color:var(--muted);margin-top:4px;line-height:1.35} .buy-pick-cost{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px} .buy-pick-price{display:block;font-family:'Cormorant Garamond',serif; font-size:27px;color:var(--gold);white-space:nowrap;line-height:1} .buy-pick-was{display:block;font-family:'Lato',sans-serif;font-size:12px; color:#7f879a;text-decoration:line-through;line-height:1} .buy-pick-mark{flex:none;width:22px;height:22px;border-radius:50%; border:1px solid rgba(217,188,94,.4);display:grid;place-items:center; font-size:12px;color:#050813;background:transparent} .buy-pick[aria-pressed="true"] .buy-pick-mark{background:var(--gold); border-color:var(--gold)} .buy-form{background:rgba(5,8,19,.68);backdrop-filter:blur(9px); border:1px solid var(--line);border-radius:16px;padding:22px} .buy-field{display:block;margin-bottom:14px} .buy-field>span{display:block;font-family:'Lato',sans-serif;font-size:11.5px; font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:rgba(231,218,177,.62);margin-bottom:7px} .buy-field>span i{font-style:normal;font-weight:400;text-transform:none; letter-spacing:.02em;color:#6f7789} .buy-field input{width:100%;box-sizing:border-box;background:#070c1a; border:1px solid rgba(217,188,94,.24);border-radius:9px;padding:14px; color:#e9edf4;font-family:'Lato',sans-serif;font-size:16px;outline:none; transition:border-color .22s ease} .buy-field input:focus{border-color:var(--gold)} .buy-pay{width:100%;justify-content:center;padding:17px;margin-top:4px; font-size:15px} .buy-pay[disabled]{opacity:.45;cursor:not-allowed} .buy-error{margin:2px 0 12px;padding:11px 14px;border-radius:8px; background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35); font-family:'Lato',sans-serif;font-size:13.5px;color:#fca5a5} .buy-fine{margin:14px 0 0;font-family:'Lato',sans-serif;font-size:12px; line-height:1.6;color:#7f879a;text-align:center} .buy-state{text-align:center;padding:34px 0 20px} .buy-tick{width:62px;height:62px;margin:0 auto 18px;border-radius:50%; background:var(--gold);color:#050813;font-size:30px;display:grid; place-items:center} .buy-state h2{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(28px,6vw,38px);color:#fff;margin:0 0 10px} .buy-again{margin-top:22px} @media(max-width:1000px),(pointer:coarse){ .buy-pick{min-height:76px;padding:16px 18px} .buy-pick-mark{width:26px;height:26px} } /* ---- recognition carousel thumbs ------------------------------------ Scoped to the carousel's own modifier classes, so the global .latest-thumb img rule (cover) still applies anywhere else it is used. The Adani slide is a photograph and crops happily. The rest are logos and a poster, so they get contain plus a little padding — the box is 78x54 (1.44:1) and the wide marks run to 4.4:1, so cropping them would cut the wordmark. Two of the transparent logos cannot be seen on the box's rgb(11,7,16): bṛhat is pure black, measured 1.05:1, and Tatva Academy's tagline sits at 2.52:1. Those two get the light chip. Kathakar is gold at 8.84:1 and is left on the dark box; the Aucitya poster and the Vṛtam Stories mark carry their own backgrounds. */ .latest-thumb--photo img{object-fit:cover} .latest-thumb--logo img{object-fit:contain;padding:5px} .latest-thumb--chip{background:#f2eee4;border-color:rgba(246,226,163,.38)} .latest-thumb--chip img{padding:6px} /* ---- /products hero ------------------------------------------------- Dark starfield section (the page background, unchanged) with the text column left and the books cutout right, lit by a CSS halo. The lockup follows the tab-wordmark system defined above: a Fraunces word beside a tracked uppercase Inter label, both --gold, baseline aligned, at that system's 2.3:1 ratio. The serif takes the site's own interior-page heading clamp, clamp(36px,5vw,68px), the same one .sec.page-lead .sec-head h2 uses; the subcopy takes .sec.page-lead .lede's clamp(16px,1.5vw,19px) and --muted. The glow is a CSS layer behind the art rather than part of the asset, so it can be retuned without re-exporting. Its stops reuse the colours the existing cover glow already used — gold-bright, amber, a trace of rose — at low alpha, blurred, so it reads as a halo rather than a spotlight. The buttons are the site's own .btn / .btn.solid. The primary one uses the data-scroll hook from ui.js, the same mechanism index.html:443 already uses, which scrolls smoothly and falls back to 'auto' under prefers-reduced-motion. Everything is scoped to #main--products. */ #main--products .stories-vrtam{color:var(--gold)} #main--products .stories-wordmark{ display:flex; align-items:baseline; width:max-content; max-width:100%; } #main--products .stories-hero-copy>p{color:var(--muted)} /* the art and its halo */ #main--products .stories-art{ position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; } #main--products .stories-art::before{ content:""; position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1 / 1; transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%, rgba(240,212,136,.24) 0%, rgba(226,177,116,.14) 34%, rgba(224,146,193,.05) 58%, transparent 76%); filter:blur(28px); pointer-events:none; z-index:-1; } #main--products .stories-art img{ display:block; width:100%; height:auto; filter:drop-shadow(0 34px 54px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.35)); } /* call to action row */ #main--products .stories-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; } #main--products .stories-cta .btn i{font-size:.88em} /* physical x digital badge */ /* With the left scrim gone the badge sits straight on the lit plinth and foliage, where it measured 1.10:1 and 1.55:1 — unreadable. It gets its own compact plate rather than bringing the panel back, so the scene stays open and only this small block carries a ground. */ #main--products .stories-badge{ display:flex; align-items:flex-start; gap:12px; width:max-content; max-width:100%; padding:12px 18px 12px 12px; border:1px solid rgba(217,180,90,.18); border-radius:16px; background:rgba(6,4,11,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:var(--gold); } #main--products .stories-badge-ico{ flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:11px; border:1px solid rgba(217,180,90,.3); background:rgba(217,180,90,.08); } #main--products .stories-badge-txt{display:block} #main--products .stories-badge-txt b{ display:block; font:700 11.5px/1 Inter,system-ui,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } #main--products .stories-badge-txt small{ display:block; margin-top:7px; font-family:'Lato',sans-serif; font-size:13px; line-height:1.5; color:var(--muted); } /* the hero runs the scene full-bleed instead of the global starfield. #stage is a fixed backdrop at z-index 0, so the section is lifted to z-index 1 and isolated; its ::before paints the scene over #stage and its ::after lays the left scrim on top, both behind the content. The starfield is untouched everywhere else. */ #main--products #products.page-lead{ position:relative; z-index:1; isolation:isolate; overflow:hidden; --px:0; --py:0; } /* the scene is held just short of opaque so the live starfield behind it keeps twinkling through — the two read as one sky rather than a photo pasted over the field. */ #main--products #products.page-lead::before{ content:""; position:absolute; inset:0; background:url("/images/site/30fa21fd0f3c.webp") 72% 46%/cover no-repeat; opacity:.88; z-index:-2; transform:scale(1.04) translate3d(calc(var(--px) * -10px),calc(var(--py) * -7px),0); transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; } /* the books drift the other way by a smaller amount, so the hero has a little depth under the pointer. Both are tiny on purpose. */ #main--products .stories-art{ transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 6px),0); transition:transform .45s cubic-bezier(.2,.7,.3,1); } @media (prefers-reduced-motion:reduce){ #main--products #products.page-lead::before, #main--products .stories-art{transition:none;transform:none} } /* No left scrim on desktop: the scene runs edge to edge and the copy sits straight on it. Measured against the lightest 5% behind each run at 1440 — headline 13.7:1, lockup 8.5:1, subcopy 4.92:1 — so it clears 4.5:1, though the subcopy's margin is thin by design. The mobile rule below still paints a wash, because there the copy sits over the middle of the art rather than beside it. */ #main--products #products.page-lead::after{ content:""; position:absolute; inset:0; background:none; z-index:-1; } @media (min-width:1001px){ /* the section holds the first view and centres the hero within it */ #main--products #products.page-lead{ min-height:100vh; display:grid; align-content:center; padding-top:clamp(130px,15vh,180px); padding-bottom:clamp(90px,11vh,130px); } /* the badge is a sibling of the art so that a phone gets copy -> buttons -> books -> badge in plain document order; on desktop it is placed back under the copy column with explicit grid lines, and the art spans both rows beside them. */ #main--products .stories-hero{ grid-template-columns:minmax(0,45fr) minmax(0,55fr); grid-template-rows:auto auto; gap:clamp(40px,3.6vw,56px); align-items:center; min-height:0; padding:0; } #main--products .stories-hero-copy{grid-column:1;grid-row:1;align-self:end} #main--products .stories-badge{grid-column:1;grid-row:2;align-self:start} #main--products .stories-art{grid-column:2;grid-row:1 / span 2} /* lockup: site scale, system proportions */ #main--products .stories-vrtam{font-size:clamp(36px,4.6vw,62px)} #main--products .stories-name{font-size:clamp(16px,2vw,27px)} #main--products .stories-wordmark{ gap:clamp(12px,1.75vw,24px); margin:0 0 26px; } #main--products .stories-hero-copy h1{ margin:0; font-size:clamp(24px,2.3vw,32px); line-height:1.18; max-width:20ch; } #main--products .stories-hero-copy>p{ margin:20px 0 0; font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:44ch; } #main--products .stories-cta{margin-top:34px} #main--products .stories-badge{margin-top:0} } @media (max-width:1000px){ #main--products .stories-hero{align-items:start} #main--products .stories-vrtam{font-size:clamp(34px,10vw,48px)} #main--products .stories-name{font-size:clamp(15px,4.3vw,21px)} #main--products .stories-wordmark{ gap:clamp(10px,3vw,16px); margin:0 0 22px; } #main--products .stories-hero-copy h1{ font-size:clamp(21px,5.4vw,26px); line-height:1.22; max-width:22ch; } #main--products .stories-hero-copy>p{ margin-top:18px; font-size:clamp(15px,4vw,16px); line-height:1.6; } /* the art sits between the buttons and the badge on a phone, so the stack reads copy -> action -> product -> claim */ #main--products .stories-cta{margin-top:26px} #main--products .stories-art{margin-top:30px} #main--products .stories-badge{margin-top:28px} } /* phones: buttons go full width and stack, so neither wraps awkwardly */ @media (max-width:640px){ #main--products .stories-cta{ display:grid; grid-template-columns:1fr; gap:12px; } #main--products .stories-cta .btn{ width:100%; justify-content:center; padding:0 20px; } } /* Testimonial avatars: two of the five are partner logos rather than an initial. TATTVAM's mark is an orange-red that measures only 2.01:1 on the gold gradient the letter avatars use — below the 3:1 that WCAG 1.4.11 asks of a graphic — so it needs a light ground; on the #f2eee4 chip it reads 3.69:1. The Bṛhat wordmark is effectively pure black and would in fact clear the gold on its own (9.8:1), but it gets the same chip so the two logo avatars match rather than one sitting on gold and one on cream. Chip, diameter and shadow follow the recognition carousel's treatment for dark logos; contain keeps the wide wordmarks from being cropped in a 44px circle. */ #home-voices .quote .dp--logo, #voices .quote .dp--logo{ background:#f2eee4; padding:5px; box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 0 0 1px rgba(18,12,5,.10); } #home-voices .quote .dp--logo img, #voices .quote .dp--logo img{ display:block; width:100%; height:100%; object-fit:contain; } /* "Who we work with": a partner name under each logo. The .client span rule above was already written for this and only needed the markup. The one thing that had to change is the row track: .client is an aspect-ratio:3/2 box, so a caption that wraps to two lines eats into the logo's share and the marks end up different sizes card to card — measured 130px wide for Bṛhat against 49px for Chinmaya. Pinning the caption row at 30px (two lines of 11px/1.3) gives every card the same logo area regardless of how long its name is. */ #clients .client{ grid-template-rows:1fr 30px; row-gap:6px; } #clients .client span{ align-self:start; line-height:1.3; } /* mobile: the stacked copy sits over the middle of the scene, so the scrim becomes a heavy vertical wash rather than a left-to-right one */ @media (max-width:1000px){ #main--products #products.page-lead::before{background-position:64% 38%} #main--products #products.page-lead::after{ background:linear-gradient(180deg, rgba(8,5,14,.72) 0%, rgba(8,5,14,.64) 46%, rgba(8,5,14,.40) 68%, rgba(8,5,14,.18) 100%); } } /* ---- /platform hero ------------------------------------------------- Built on the same system as the products hero: full-bleed scene, left scrim, subject cutout on the right, text column left. Every type size below is the same clamp the products hero uses, so the two heroes measure identically at any width. The one structural difference is that this section also carries the three audience cards below the hero, which the products section does not. The scrim therefore adds a vertical pass that deepens to near solid past the hero, so the cards sit on dark rather than on artwork. */ #main--platform #platform.page-lead{ position:relative; z-index:1; isolation:isolate; overflow:hidden; --px:0; --py:0; } #main--platform #platform.page-lead::before{ content:""; position:absolute; inset:0; background:url("/images/site/75f6f56b3da7.webp") 70% 32%/cover no-repeat; opacity:.88; z-index:-2; transform:scale(1.04) translate3d(calc(var(--px) * -10px),calc(var(--py) * -7px),0); transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; } /* No left scrim on desktop, matching products. The vertical pass that used to darken the lower half is gone too — it existed to put the three audience boxes on dark, and those now live in their own section. */ #main--platform #platform.page-lead::after{ content:""; position:absolute; inset:0; background:none; z-index:-1; } @media (max-width:1000px){ #main--platform #platform.page-lead::after{ background:linear-gradient(180deg, rgba(8,5,14,.72) 0%, rgba(8,5,14,.64) 46%, rgba(8,5,14,.40) 68%, rgba(8,5,14,.18) 100%); } } #main--platform .kathakar-art{ position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 6px),0); transition:transform .45s cubic-bezier(.2,.7,.3,1); } #main--platform .kathakar-art::before{ content:""; position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1 / 1; transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%, rgba(240,212,136,.24) 0%, rgba(226,177,116,.14) 34%, rgba(224,146,193,.05) 58%, transparent 76%); filter:blur(28px); pointer-events:none; z-index:-1; } #main--platform .kathakar-art img{ display:block; width:100%; height:auto; filter:drop-shadow(0 34px 54px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.35)); } /* products' copy column carries a 6px inset; match it so the two heroes share one left edge */ #main--platform .kathakar-hero-copy{padding-left:6px} #main--platform .kathakar-wordmark{color:var(--gold)} #main--platform .kathakar-hero-copy>p{color:var(--muted)} @media (prefers-reduced-motion:reduce){ #main--platform #platform.page-lead::before, #main--platform .kathakar-art{transition:none;transform:none} } @media (min-width:1001px){ /* same two-column split, gap and alignment as the products hero */ #main--platform .kathakar-hero{ grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:clamp(40px,3.6vw,56px); align-items:center; min-height:0; padding:0 0 clamp(60px,7vh,90px); } /* sizes copied from the products hero, clamp for clamp */ #main--platform .kathakar-wordmark{ font-size:clamp(36px,4.6vw,62px); margin:0 0 26px; letter-spacing:-.03em; } #main--platform .kathakar-hero-copy h1{ margin:0; font-size:clamp(24px,2.3vw,32px); line-height:1.18; max-width:20ch; } #main--platform .kathakar-hero-copy>p{ margin:20px 0 0; font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:44ch; } } @media (max-width:1000px){ #main--platform .kathakar-hero{align-items:start;gap:0;padding:0 0 30px} #main--platform .kathakar-wordmark{ font-size:clamp(34px,10vw,48px); margin:0 0 22px; } #main--platform .kathakar-hero-copy h1{ font-size:clamp(21px,5.4vw,26px); line-height:1.22; max-width:22ch; } #main--platform .kathakar-hero-copy>p{ margin-top:18px; font-size:clamp(15px,4vw,16px); line-height:1.6; max-width:none; } #main--platform .kathakar-art{margin-top:30px} } /* ---- /platform hero: hold the first screen --------------------------- The three audience boxes live in the same section as the hero, so with the hero sized to its content they sat at y680 on a 900-tall viewport — inside the first screen. Giving the hero a min-height of the viewport minus the section's own top padding pushes them past the fold without moving them in the document. */ /* the hero's single call to action, matching the products hero's primary button: same .btn.solid, same data-scroll hook from ui.js, which scrolls smoothly and falls back to 'auto' under reduced motion. */ #main--platform .kathakar-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:34px; } @media (max-width:1000px){ #main--platform .kathakar-cta{margin-top:26px} } @media (max-width:640px){ #main--platform .kathakar-cta .btn{ width:100%; justify-content:center; padding:0 20px; } } /* ---- card spacing corrections --------------------------------------- Measured before the change at 1440: the catalog cards' tags-to-button gap was 12px on one card and 47px on the other; the shop cards' price sat 4px above the Buy now button; and the platform's Live -> Recurring -> Community row was 449px of content inside a 356px box on a phone, scrolling horizontally with no affordance, so "Community" simply looked cut off. Spacing only below — no colours, fonts or images are touched. */ /* catalog: ease the step above the tag row and guarantee room beneath it. The buttons stay bottom-aligned across the pair, so a card with fewer tag rows still shows a larger gap — that is the cost of keeping the two buttons on one line, and 20px is now the floor rather than 12. */ #main--products .book-card .chips{margin-top:8px} #main--products .book-card .book-actions{padding-top:8px} /* shop: the price carried margin:14px 0 4px, so only 4px separated it from the button on desktop; a mobile-only rule already raised that to 16px. This makes 16px the rule at every width and evens the step above the price at the same time. */ #main--shop .shop-price{margin:6px 0 16px} /* platform: the pathway row wraps instead of scrolling, so nothing is hidden on a narrow screen. */ @media (max-width:1000px){ #main--platform .community-line{ flex-wrap:wrap; justify-content:center; overflow:visible; white-space:normal; row-gap:10px; } } /* ---- shared hero placement: products + platform ---------------------- The two heroes had drifted: identical left edge, column width and inter-element gaps, but the copy column sat 150px lower on platform because platform centred inside the hero while products centred the whole section. Every placement property is now declared once, for both routes, so they cannot diverge again. Content and colour stay with each route; only position and spacing live here. This pairs with moving the three audience boxes into their own section, so #platform now holds the hero alone, exactly as #products does, and still starts below the fold. */ /* every section carrying a scene needs this: the scene layer is scaled 1.04 for the parallax, so without clipping it widens the page — shop was overflowing by 29px. */ #main--products #products.page-lead, #main--platform #platform.page-lead, #main--experiences #work.page-lead, #main--services #services.page-lead, #main--about #approach.page-lead, #main--shop #shop.page-lead{ position:relative; z-index:1; isolation:isolate; overflow:hidden; } #main--products .stories-hero-copy, #main--platform .kathakar-hero-copy, #main--experiences .exp-hero-copy{padding-left:6px} @media (min-width:1001px){ #main--products #products.page-lead, #main--platform #platform.page-lead, #main--experiences #work.page-lead{ min-height:100vh; display:grid; align-content:center; padding-top:clamp(130px,15vh,180px); padding-bottom:clamp(90px,11vh,130px); } #main--products .stories-hero, #main--platform .kathakar-hero, #main--experiences .exp-hero{ grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:clamp(40px,3.6vw,56px); align-items:center; align-content:normal; min-height:0; padding:0; } #main--products .stories-wordmark, #main--platform .kathakar-wordmark, #main--experiences .exp-brand{margin:0 0 26px} #main--products .stories-hero-copy h1, #main--platform .kathakar-hero-copy h1, #main--experiences .exp-hero-copy h1{margin:0} #main--products .stories-hero-copy>p, #main--platform .kathakar-hero-copy>p, #main--experiences .exp-hero-copy>p{margin:20px 0 0} #main--products .stories-cta, #main--platform .kathakar-cta, #main--experiences .exp-cta{margin-top:34px} } @media (max-width:1000px){ #main--products .stories-hero, #main--platform .kathakar-hero, #main--experiences .exp-hero{ grid-template-columns:1fr; gap:16px; align-items:start; align-content:normal; min-height:0; padding:34px 0 28px; } #main--products .stories-wordmark, #main--platform .kathakar-wordmark, #main--experiences .exp-brand{margin:0 0 22px} #main--products .stories-hero-copy>p, #main--platform .kathakar-hero-copy>p, #main--experiences .exp-hero-copy>p{margin-top:18px} #main--products .stories-cta, #main--platform .kathakar-cta, #main--experiences .exp-cta{margin-top:26px} #main--products .stories-art, #main--platform .kathakar-art, #main--experiences .exp-art{margin-top:30px} } /* the client logo cards are near-white, so the caption's #8e97a8 left it barely legible. Dark ink instead; size, weight and tracking unchanged. */ #clients .client span{color:#1b1f2a} /* ---- decorative pillars framing /products "How it works" ------------- The section's content column is narrower than the shell — .how spans x324..1116 inside a 1440 viewport — so there is roughly 324px of clear gutter on each side to frame into. The pillars sit in that gutter, anchored to the section's own left/right and rising from its floor. The section is already position:relative; isolation:isolate gives it a stacking context so z-index:-1 paints the pillars above the section's background but beneath all of its content. They are inert decoration: empty spans, aria-hidden, pointer-events:none. Hidden below 1001px — at 390 the content runs the full 17..373 of the column, so there is no gutter to frame and anything drawn there would sit under the text rather than beside it. */ #main--products #how{isolation:isolate} #main--products .how-pillar{ position:absolute; top:0; bottom:0; /* .how is a fixed ~792px column, so the usable gutter is (100vw - 792)/2. Deriving the width from that means the pillar can never reach the content at any desktop width. */ width:min(300px,calc((100vw - 812px) / 2)); /* the art is scaled to the section's full height and anchored to the outer edge, so each pillar runs the whole side of the section and is cropped inward by the gutter rather than shrinking to fit it. A mask feathers that inward crop so it reads as the frame continuing out of view rather than a sliced edge. */ background-repeat:no-repeat; background-size:auto 100%; opacity:.85; pointer-events:none; z-index:-1; } #main--products .how-pillar--l{ left:0; background-position:left bottom; background-image:url("/images/site/96b508f48367.webp"); -webkit-mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.35) 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.35) 88%,transparent 100%); } #main--products .how-pillar--r{ right:0; background-position:right bottom; background-image:url("/images/site/7368257f2ec4.webp"); -webkit-mask-image:linear-gradient(270deg,#000 62%,rgba(0,0,0,.35) 88%,transparent 100%); mask-image:linear-gradient(270deg,#000 62%,rgba(0,0,0,.35) 88%,transparent 100%); } /* below 1200px the gutter is too narrow for the pillars to read as framing rather than clutter, and at phone widths .how spans the full column with no gutter at all. */ @media (max-width:1199px){ #main--products .how-pillar{display:none} } /* ---- /experiences hero ---------------------------------------------- Same system as products and platform: full-bleed scene, subject right, text column left. Placement comes from the shared block above, so only the scene, the subject and the type sizes live here. No left scrim, matching the other two. The copy sits straight on the scene and contrast is measured rather than assumed; anything that fails gets its own plate, as the products badge does. The lockup keeps this route's own accent — router.js sets --realm-accent to #cba6f5 for experiences and the shared wordmark rule already picks it up, so the lilac is inherited, not reintroduced. */ #main--experiences #work.page-lead::before{ content:""; position:absolute; inset:0; background:url("/images/site/5d2f750d50c0.webp") 70% 42%/cover no-repeat; opacity:.88; z-index:-2; transform:scale(1.04) translate3d(calc(var(--px) * -10px),calc(var(--py) * -7px),0); transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; } #main--experiences #work.page-lead{--px:0;--py:0} #main--experiences #work.page-lead::after{ content:""; position:absolute; inset:0; background:none; z-index:-1; } /* mobile keeps the vertical wash the other two use, because the copy stacks over the middle of the art rather than beside it */ @media (max-width:1000px){ #main--experiences #work.page-lead::after{ background:linear-gradient(180deg, rgba(8,5,14,.72) 0%, rgba(8,5,14,.64) 46%, rgba(8,5,14,.40) 68%, rgba(8,5,14,.18) 100%); } } #main--experiences .exp-art{ position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 6px),0); transition:transform .45s cubic-bezier(.2,.7,.3,1); } #main--experiences .exp-art::before{ content:""; position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1 / 1; transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%, rgba(240,212,136,.24) 0%, rgba(226,177,116,.14) 34%, rgba(224,146,193,.05) 58%, transparent 76%); filter:blur(28px); pointer-events:none; z-index:-1; } /* The subject takes the same box proportion as the products art, 621x418 at 1440, so the two heroes come out the same height. Both centre in a 100vh section, so matching heights is what puts the two copy columns at the same y on screen — without it experiences sat 21px lower. */ #main--experiences .exp-art .exp-visual{ margin:0; width:100%; aspect-ratio:621 / 418; min-height:0; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 34px 54px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); } #main--experiences .exp-art .exp-visual img{ display:block; width:100%; height:100%; object-fit:cover; } @media (prefers-reduced-motion:reduce){ #main--experiences #work.page-lead::before, #main--experiences .exp-art{transition:none;transform:none} } /* Type sizes copied clamp for clamp from the products hero. The subcopy is selected as p.lede: #main--experiences .exp-hero .lede at :1795 is (1,2,0) and was beating a plain (1,1,1) descendant rule, which left it at 20px/22px instead of 19px/20px. The copy column is align-self:start. Products' copy is bottom-aligned in row 1 of a two-row grid whose second row holds the badge, which lands it flush with the hero's top; starting this one does the same, so the two columns begin at the same y. */ #main--experiences .exp-hero-copy{align-self:start} @media (min-width:1001px){ #main--experiences .exp-brand .wm-v{font-size:clamp(36px,4.6vw,62px)} #main--experiences .exp-brand .wm-n{font-size:clamp(16px,2vw,27px)} #main--experiences .exp-hero-copy h1{ font-size:clamp(24px,2.3vw,32px); line-height:1.18; max-width:20ch; } #main--experiences .exp-hero-copy>p.lede{ margin:20px 0 0; font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:44ch; } } @media (max-width:1000px){ #main--experiences .exp-brand .wm-v{font-size:clamp(34px,10vw,48px)} #main--experiences .exp-brand .wm-n{font-size:clamp(15px,4.3vw,21px)} #main--experiences .exp-hero-copy h1{ font-size:clamp(21px,5.4vw,26px); line-height:1.22; max-width:22ch; } #main--experiences .exp-hero-copy>p.lede{ margin-top:18px; font-size:clamp(15px,4vw,16px); line-height:1.6; max-width:none; } } @media (max-width:640px){ #main--experiences .exp-cta .btn{ width:100%; justify-content:center; padding:0 20px; } } /* ---- the three hero lockups, unified -------------------------------- Products, platform and experiences now carry one lockup treatment: a 34px rule, then the brand word in capitals, then the route word in sentence case at the smaller size. All three in --gold, including experiences, which had been taking its lilac --realm-accent. The rule is the same 34x1px device .exp-brand, .media-brand and .shop-wordmark already use, so it is the site's own dash rather than a new ornament. */ #main--products .stories-wordmark, #main--platform .kathakar-wordmark, #main--experiences .exp-brand{ display:flex; align-items:baseline; width:max-content; max-width:100%; /* One gap for the whole lockup. The earlier rules left a flex gap and a margin on the second word stacking up, 38px on products against 19.5px on experiences. The brand word carries letter-spacing:-.02em, so the visible space runs a touch tighter than the number set. */ gap:clamp(12px,1.1vw,16px); color:var(--gold); } /* experiences wraps both words in .wm, so on desktop the lockup's gap applied around that wrapper and the two words were separated only by the literal space in the markup — 5.5px against products' 31.6px. display:contents makes them flex items of the lockup like products', so one gap governs both routes. */ #main--experiences .exp-brand .wm{display:contents} #main--products .stories-wordmark::before, #main--platform .kathakar-wordmark::before, #main--experiences .exp-brand::before{ content:""; flex:0 0 auto; align-self:center; width:34px; height:1px; background:currentColor; opacity:.8; } /* the brand word: capitals, the larger of the two sizes */ #main--products .stories-vrtam, #main--platform .kathakar-wordmark, #main--experiences .exp-brand .wm-v{ font-family:Fraunces, ui-serif, Georgia, serif; font-weight:400; line-height:1; letter-spacing:-.02em; text-transform:uppercase; color:var(--gold); } /* the route word: sentence case, the smaller size */ #main--products .stories-name, #main--experiences .exp-brand .wm-n{ font-family:Fraunces, ui-serif, Georgia, serif; font-weight:400; line-height:1; letter-spacing:0; text-transform:none; color:var(--gold); } @media (min-width:1001px){ #main--products .stories-vrtam, #main--platform .kathakar-wordmark, #main--experiences .exp-brand .wm-v{font-size:clamp(36px,4.6vw,62px)} /* 27px against 62px read as a caption rather than half a lockup; 36px puts the pair at about 1.7:1 */ #main--products .stories-name, #main--experiences .exp-brand .wm-n{font-size:clamp(20px,2.7vw,36px)} } @media (max-width:1000px){ #main--products .stories-vrtam, #main--platform .kathakar-wordmark, #main--experiences .exp-brand .wm-v{font-size:clamp(34px,10vw,48px)} #main--products .stories-name, #main--experiences .exp-brand .wm-n{font-size:clamp(17px,5.9vw,26px)} #main--products .stories-wordmark::before, #main--platform .kathakar-wordmark::before, #main--experiences .exp-brand::before{width:24px} } /* platform's copy column starts at the hero top, as products' and experiences' do, and its subject takes the same box proportion as the products art so the three heroes match in height. */ #main--platform .kathakar-hero-copy{align-self:start} #main--platform .kathakar-art img{aspect-ratio:621 / 418;object-fit:contain} /* The About tab is a dropdown trigger rather than a destination: the page itself is the menu's first item. Without an href it loses the pointer, so it is restored here, and tabindex on the element keeps the focus-within dropdown reachable by keyboard. */ #hdr .nav .nav-drop-trigger{cursor:pointer} /* .nav .spark gives every tab a white core and tints only its glow with --realm, so About's sparks carried a green halo around a white dot. The core is tinted here too, kept just off full green so it still reads as a spark rather than a flat dot. Scoped to this trigger; the other tabs keep the white core. */ #hdr .nav .nav-drop-trigger .spark{ background:color-mix(in srgb,var(--realm) 72%,#fff); } /* ---- one left-column style for every tab page ----------------------- Products, platform and experiences already share a hero system. This extends the same type to the remaining tabs so the left column reads identically everywhere, ready for a background and a subject per page. Lockups come in two shapes and both are covered: the two-part ones built from .wm-v + .wm-n, and the single-phrase ones (platform, contact, investors) that take the brand size alone. Either way: the site's 34px rule, the brand part in capitals at the large size, the second part in sentence case at the smaller one, all --gold. */ #main--services .studio-wordmark, #main--about .about-wordmark, #main--media .media-hero .media-brand, #main--journal .page-eyebrow, #main--shop .shop-wordmark, #main--contact .contact-brand, #main--investors .page-eyebrow{ display:flex; align-items:baseline; flex-wrap:wrap; width:max-content; max-width:100%; gap:clamp(12px,1.1vw,16px); margin:0 0 26px; color:var(--gold); } #main--services .studio-wordmark::before, #main--about .about-wordmark::before, #main--media .media-hero .media-brand::before, #main--journal .page-eyebrow::before, #main--shop .shop-wordmark::before, #main--contact .contact-brand::before, #main--investors .page-eyebrow::before{ content:""; flex:0 0 auto; align-self:center; width:34px; height:1px; background:currentColor; opacity:.8; } /* the wrapper would otherwise take the gap as a single item */ #main--services .studio-wordmark .wm, #main--about .about-wordmark .wm, #main--media .media-hero .media-brand .wm, #main--journal .page-eyebrow .wm, #main--shop .shop-wordmark .wm, #main--buy .buy-wordmark .wm{display:contents} /* the brand part, and the single-phrase lockups, at the large size */ #main--services .studio-wordmark .wm-v, #main--about .about-wordmark .wm-v, #main--media .media-hero .media-brand .wm-v, #main--journal .page-eyebrow .wm-v, #main--shop .shop-wordmark .wm-v, #main--contact .contact-brand, #main--investors .page-eyebrow{ font-family:Fraunces, ui-serif, Georgia, serif; font-weight:400; line-height:1; letter-spacing:-.02em; text-transform:uppercase; color:var(--gold); } /* the second part, at the smaller size */ #main--services .studio-wordmark .wm-n, #main--about .about-wordmark .wm-n, #main--media .media-hero .media-brand .wm-n, #main--journal .page-eyebrow .wm-n, #main--shop .shop-wordmark .wm-n{ font-family:Fraunces, ui-serif, Georgia, serif; font-weight:400; line-height:1; letter-spacing:0; text-transform:none; color:var(--gold); } @media (min-width:1001px){ #main--services .studio-wordmark .wm-v, #main--about .about-wordmark .wm-v, #main--media .media-hero .media-brand .wm-v, #main--journal .page-eyebrow .wm-v, #main--shop .shop-wordmark .wm-v, #main--contact .contact-brand, #main--investors .page-eyebrow{font-size:clamp(36px,4.6vw,62px)} #main--services .studio-wordmark .wm-n, #main--about .about-wordmark .wm-n, #main--media .media-hero .media-brand .wm-n, #main--journal .page-eyebrow .wm-n, #main--shop .shop-wordmark .wm-n{font-size:clamp(20px,2.7vw,36px)} /* headline and subcopy on the products scale */ #main--services .studio-hero h1, #main--about .about-hero-copy h1, #main--media .media-hero h1, #main--journal .page-hero h1, #main--shop .shop-hero-copy h1, #main--contact .contact-hero h1, #main--investors .page-hero h1{ font-size:clamp(24px,2.3vw,32px); line-height:1.18; max-width:20ch; } #main--services .studio-hero .lede, #main--about .about-hero-copy .lede, #main--media .media-hero .lede, #main--journal .page-hero .lede, #main--shop .shop-hero-copy .lede, #main--contact .contact-hero .lede, #main--investors .page-hero .lede{ margin:20px 0 0; font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:44ch; color:var(--muted); } } @media (max-width:1000px){ #main--services .studio-wordmark, #main--about .about-wordmark, #main--media .media-hero .media-brand, #main--journal .page-eyebrow, #main--shop .shop-wordmark, #main--contact .contact-brand, #main--investors .page-eyebrow{margin:0 0 22px} #main--services .studio-wordmark::before, #main--about .about-wordmark::before, #main--media .media-hero .media-brand::before, #main--journal .page-eyebrow::before, #main--shop .shop-wordmark::before, #main--contact .contact-brand::before, #main--investors .page-eyebrow::before{width:24px} #main--services .studio-wordmark .wm-v, #main--about .about-wordmark .wm-v, #main--media .media-hero .media-brand .wm-v, #main--journal .page-eyebrow .wm-v, #main--shop .shop-wordmark .wm-v, #main--contact .contact-brand, #main--investors .page-eyebrow{font-size:clamp(34px,10vw,48px)} #main--services .studio-wordmark .wm-n, #main--about .about-wordmark .wm-n, #main--media .media-hero .media-brand .wm-n, #main--journal .page-eyebrow .wm-n, #main--shop .shop-wordmark .wm-n{font-size:clamp(17px,5.9vw,26px)} #main--services .studio-hero h1, #main--about .about-hero-copy h1, #main--media .media-hero h1, #main--journal .page-hero h1, #main--shop .shop-hero-copy h1, #main--contact .contact-hero h1, #main--investors .page-hero h1{ font-size:clamp(21px,5.4vw,26px); line-height:1.22; max-width:22ch; } #main--services .studio-hero .lede, #main--about .about-hero-copy .lede, #main--media .media-hero .lede, #main--journal .page-hero .lede, #main--shop .shop-hero-copy .lede, #main--contact .contact-hero .lede, #main--investors .page-hero .lede{ margin-top:18px; font-size:clamp(15px,4vw,16px); line-height:1.6; color:var(--muted); } } /* shop carried its own trailing rule; with the leading dash added above it had one on each side */ #main--shop .shop-wordmark::after{content:none} /* ---- same vertical start for every tab lead section ----------------- The three built heroes centre their content in a 100vh section with a 135px top pad, which lands the lockup at y257 on a 900-tall viewport. The remaining tabs ran natural block flow under a 180px pad, so their lockups started anywhere from y180 to y331. They take the same treatment here. align-content uses safe centring: media and blog carry more than a hero in their lead section and are already taller than the viewport, so plain centring would push their first line off the top. */ @media (min-width:1001px){ #main--products #products.page-lead, #main--platform #platform.page-lead, #main--experiences #work.page-lead, #main--services #services.page-lead, #main--about #approach.page-lead, #main--media #media-announcements.page-lead, #main--journal #journal.page-lead, #main--shop #shop.page-lead, #main--contact #contact.page-lead, #main--investors #investors.page-lead{ min-height:100vh; display:grid; align-content:start; padding-top:clamp(140px,23vh,230px); padding-bottom:clamp(90px,11vh,130px); } } /* These hero containers add their own top padding and a 520px min-height with centred items, which pushed the copy 100-150px below the section offset. Zeroing both and top-aligning puts every tab's lockup at the same y as the three built heroes. */ @media (min-width:1001px){ #main--services .studio-hero, #main--about .about-hero, #main--media .media-hero, #main--journal .page-hero, #main--shop .shop-hero, #main--contact .contact-hero, #main--investors .page-hero{ min-height:0; padding-top:0; align-items:start; align-content:start; } } /* ---- /services hero: full-bleed scene -------------------------------- Same treatment as products, platform and experiences: the scene runs full-bleed behind the section at .88 so the starfield still shows through, with the pointer parallax, and no left scrim. The existing studio illustration becomes the right-hand subject, taking the products art's 621x418 box so the hero matches the others in height. */ #main--services #services.page-lead{--px:0;--py:0} #main--services #services.page-lead::before{ content:""; position:absolute; inset:0; background:url("/images/site/2cd53ab3056b.webp") 62% 46%/cover no-repeat; opacity:.88; z-index:-2; transform:scale(1.04) translate3d(calc(var(--px) * -10px),calc(var(--py) * -7px),0); transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; } #main--services #services.page-lead::after{ content:""; position:absolute; inset:0; background:none; z-index:-1; } /* mobile stacks the copy over the art, so it keeps the vertical wash */ @media (max-width:1000px){ #main--services #services.page-lead::after{ background:linear-gradient(180deg, rgba(8,5,14,.72) 0%, rgba(8,5,14,.64) 46%, rgba(8,5,14,.40) 68%, rgba(8,5,14,.18) 100%); } } #main--services .studio-visual{ position:relative; margin:0; isolation:isolate; transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 6px),0); transition:transform .45s cubic-bezier(.2,.7,.3,1); width:100%; aspect-ratio:621 / 418; min-height:0; border-radius:18px; overflow:hidden; box-shadow:0 34px 54px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); } #main--services .studio-visual img{ display:block; width:100%; height:100%; object-fit:cover; } #main--services .studio-visual::before{ content:""; position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1 / 1; transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%, rgba(240,212,136,.24) 0%, rgba(226,177,116,.14) 34%, rgba(224,146,193,.05) 58%, transparent 76%); filter:blur(28px); pointer-events:none; z-index:-1; } @media (prefers-reduced-motion:reduce){ #main--services #services.page-lead::before, #main--services .studio-visual{transition:none;transform:none} } @media (min-width:1001px){ #main--services .studio-hero{ grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:clamp(40px,3.6vw,56px); } #main--services .studio-hero-copy{padding-left:6px;align-self:start} } /* The hero's secondary button is a ghost: realm-accent border and label on no background. Over the full-bleed scenes that label measured 3.72:1 at worst, under the 4.5:1 it needs. It gets a translucent dark backing rather than a fill, so it stays visibly secondary to the solid primary beside it instead of becoming a second pink block. */ #main--products .stories-cta .btn:not(.solid), #main--platform .kathakar-cta .btn:not(.solid), #main--experiences .exp-cta .btn:not(.solid){ background:rgba(6,4,11,.58); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } #main--products .stories-cta .btn:not(.solid):hover, #main--platform .kathakar-cta .btn:not(.solid):hover, #main--experiences .exp-cta .btn:not(.solid):hover{ background:rgba(6,4,11,.72); } /* About reads as one capitalised name, so its second part takes capitals too rather than the sentence case the other lockups use. */ #main--about .about-wordmark .wm-n{text-transform:uppercase} /* ---- /media announcement card thumbnails ---------------------------- Each card reuses the image its slide already carries in the home "Latest from Vṛtam" strip, with the same reasoning behind the treatment: the Adani slide is a photograph and crops happily, so it covers; the rest are logos and a poster and so contain, since the band is 16:9 and the wide marks would lose their wordmark to a crop. The two that cannot be seen on a dark ground — Bṛhat's black mark and Tatva Academy's tagline — take the same light chip the strip gives them. Swarajya has no artwork yet and simply has no band. */ #main--media .ann-media{ display:block; width:100%; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:rgb(11,7,16); border:1px solid var(--line); } #main--media .ann-media img{ display:block; width:100%; height:100%; } #main--media .ann-media--photo img{object-fit:cover} #main--media .ann-media--logo img{object-fit:contain;padding:18px} #main--media .ann-media--chip{background:#f2eee4;border-color:rgba(246,226,163,.38)} #main--media .ann-media--chip img{padding:20px} /* ---- /about hero: full-bleed scene ---------------------------------- Same treatment as the other heroes. The existing VR-headset visual stays as the right-hand subject, taking the products art's 621x418 box so the hero matches the others in height. */ #main--about #approach.page-lead{--px:0;--py:0} #main--about #approach.page-lead::before{ content:""; position:absolute; inset:0; background:url("/images/site/52f24c6b8d00.webp") 60% 46%/cover no-repeat; opacity:.88; z-index:-2; transform:scale(1.04) translate3d(calc(var(--px) * -10px),calc(var(--py) * -7px),0); transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; } #main--about #approach.page-lead::after{ content:""; position:absolute; inset:0; background:none; z-index:-1; } @media (max-width:1000px){ #main--about #approach.page-lead::after{ background:linear-gradient(180deg, rgba(8,5,14,.72) 0%, rgba(8,5,14,.64) 46%, rgba(8,5,14,.40) 68%, rgba(8,5,14,.18) 100%); } } #main--about .about-visual{ position:relative; margin:0; isolation:isolate; transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 6px),0); transition:transform .45s cubic-bezier(.2,.7,.3,1); width:100%; aspect-ratio:621 / 418; min-height:0; border-radius:18px; overflow:hidden; box-shadow:0 34px 54px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); } #main--about .about-visual img{display:block;width:100%;height:100%;object-fit:cover} #main--about .about-visual::before{ content:""; position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1 / 1; transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%, rgba(240,212,136,.24) 0%, rgba(226,177,116,.14) 34%, rgba(224,146,193,.05) 58%, transparent 76%); filter:blur(28px); pointer-events:none; z-index:-1; } @media (prefers-reduced-motion:reduce){ #main--about #approach.page-lead::before, #main--about .about-visual{transition:none;transform:none} } @media (min-width:1001px){ #main--about .about-hero{ grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:clamp(40px,3.6vw,56px); } #main--about .about-hero-copy{padding-left:6px;align-self:start} } /* the band sat 14px above the kicker — the card's own flex gap — which read tight against its 26px padding now that there is artwork above */ #main--media .ann-media{margin-bottom:10px} /* About's two parts run at one size on this page, so the name reads as a single capitalised lockup rather than a small word beside a large one */ #main--about .about-wordmark .wm-n{font-size:clamp(36px,4.6vw,62px)} @media (max-width:1000px){ #main--about .about-wordmark .wm-n{font-size:clamp(34px,10vw,48px)} } /* ---- announcement detail pages: the same artwork as the card --------- Each bulletin page leads with the image its card and carousel slide already use, on the same photo/logo/chip logic. */ .announcement-route .art-media{ display:block; margin:26px 0 0; width:100%; aspect-ratio:16 / 9; border-radius:18px; overflow:hidden; background:rgb(11,7,16); border:1px solid var(--line); } .announcement-route .art-media img{display:block;width:100%;height:100%} .announcement-route .art-media--photo img{object-fit:cover} .announcement-route .art-media--logo img{object-fit:contain;padding:clamp(20px,3vw,44px)} .announcement-route .art-media--chip{background:#f2eee4;border-color:rgba(246,226,163,.38)} .announcement-route .art-media--chip img{padding:clamp(24px,3.4vw,52px)} /* ---- blend the hero scenes into the starfield ----------------------- Each scene ended on a hard horizontal edge where the section stopped and the global starfield took over. The scene layer now fades out over its lower third, so the two grounds meet gradually and the page reads as one field rather than a panel sitting on another. The fade is on the scene only; the copy, subject and parallax are untouched. */ #main--products #products.page-lead::before, #main--platform #platform.page-lead::before, #main--experiences #work.page-lead::before, #main--services #services.page-lead::before, #main--about #approach.page-lead::before, #main--shop #shop.page-lead::before{ -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.28) 90%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.28) 90%, transparent 100%); } /* ---- /shop hero: full-bleed scene and a composed product group ------- The three cards were absolutely positioned at 3%/2%/11% with rotations of -7, 3 and -2 degrees, which scattered them and pushed the widest one past the column. They now sit in the same 621x418 box the other heroes use, overlapping as one group: the live session behind, the book forward-left, the VR card forward-right. */ #main--shop #shop.page-lead{--px:0;--py:0} #main--shop #shop.page-lead::before{ content:""; position:absolute; inset:0; background:url("/images/site/b95ebebdddcc.webp") 58% 44%/cover no-repeat; opacity:.88; z-index:-2; transform:scale(1.04) translate3d(calc(var(--px) * -10px),calc(var(--py) * -7px),0); transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; } #main--shop #shop.page-lead::after{ content:"";position:absolute;inset:0;background:none;z-index:-1; } @media (max-width:1000px){ #main--shop #shop.page-lead::after{ background:linear-gradient(180deg, rgba(8,5,14,.95) 0%, rgba(8,5,14,.93) 42%, rgba(8,5,14,.86) 62%, rgba(8,5,14,.74) 100%); } } @media (min-width:1001px){ #main--shop .shop-hero{ grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:clamp(40px,3.6vw,56px); } #main--shop .shop-hero-copy{padding-left:6px;align-self:start} } #main--shop .shop-hero-visual{ position:relative; width:100%; aspect-ratio:621 / 418; min-height:0; transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 6px),0); transition:transform .45s cubic-bezier(.2,.7,.3,1); } #main--shop .shop-stack{position:absolute;inset:0;display:block} #main--shop .shop-stack-card{box-shadow:0 30px 64px rgba(0,0,0,.46)} #main--shop .shop-stack-label{bottom:-2%; z-index:5} @media (prefers-reduced-motion:reduce){ #main--shop #shop.page-lead::before, #main--shop .shop-hero-visual{transition:none;transform:none} } /* the shop hero's call to action, on the same footing as the other heroes */ #main--shop .shop-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px} @media (max-width:1000px){ #main--shop .shop-cta{margin-top:26px} } @media (max-width:640px){ #main--shop .shop-cta .btn{width:100%;justify-content:center;padding:0 20px} } /* the second storybook cover, tucked behind the first as a pair */ /* these two headings ran as one long line; held to two */ /* both held to two lines; the longer heading needs the wider measure */ #main--shop #shop-stories h2{max-width:21ch;margin-inline:auto} #main--shop #shop-kathakar h2{max-width:14ch;margin-inline:auto} /* ---- /shop hero: the product group turns on a drum ------------------ Four cards on the faces of a wheel seen edge-on, 90 degrees apart and pushed out by the drum's radius, with the wheel turning a quarter turn at a time. Each card curves away as the next curves in, the way a tyre rotates toward you, rather than sliding flat. The radius is half the frame's height. The frame keeps a fixed 621x418 ratio, so a vw-based clamp tracks that closely enough — it only changes how deep the curve reads. Under prefers-reduced-motion the wheel holds on the first face. */ #main--shop .shop-hero-visual{ overflow:visible; perspective:1500px; perspective-origin:50% 50%; --drum-r:clamp(70px,12.8vw,188px); } #main--shop .shop-stack{ position:absolute; inset:0; transform-style:preserve-3d; animation:shopDrum 18s cubic-bezier(.66,0,.2,1) infinite; } #main--shop .shop-stack-card{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; opacity:1; border:0; box-shadow:none; background:transparent; backface-visibility:hidden; -webkit-backface-visibility:hidden; } #main--shop .shop-stack-card img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 24px 44px rgba(0,0,0,.5)); } #main--shop .shop-stack-card.book {transform:rotateX(0deg) translateZ(var(--drum-r))} #main--shop .shop-stack-card.live {transform:rotateX(-90deg) translateZ(var(--drum-r))} #main--shop .shop-stack-card.vr {transform:rotateX(-180deg) translateZ(var(--drum-r))} #main--shop .shop-stack-card.book2{transform:rotateX(-270deg) translateZ(var(--drum-r))} @keyframes shopDrum{ 0%, 18% {transform:rotateX(0deg)} 25%, 43% {transform:rotateX(90deg)} 50%, 68% {transform:rotateX(180deg)} 75%, 93% {transform:rotateX(270deg)} 100% {transform:rotateX(360deg)} } #main--shop .shop-stack-label{display:none} @media (prefers-reduced-motion:reduce){ #main--shop .shop-stack{animation:none} } /* ---- mobile: the hero captions sit over the art --------------------- On a phone the subject image is the full column width and its caption overlay took most of the lower half. Both captions shrink and sit tighter to the bottom edge so the artwork still reads. */ @media (max-width:640px){ #main--services .studio-visual-note, #main--experiences .exp-visual-note{ padding:10px 12px; gap:2px; } #main--services .studio-visual-note b, #main--experiences .exp-visual-note b{font-size:14px;line-height:1.25} #main--services .studio-visual-note span, #main--experiences .exp-visual-note span{font-size:10px;letter-spacing:.14em} } /* ---- hero CTA rows: give them a box of their own -------------------- .exp-cta and .about-cta were computing display:block with no gap, so the two experiences buttons stacked flush at 0px and About's top margin collapsed into the paragraph above it. Declared here with the same flex/gap the products, platform and shop rows already use, which also stops the margin collapsing. */ #main--experiences .exp-cta, #main--about .about-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; } /* "Explore our journey" sat flush against the lede above it and against the foot of its column below, with both margins computing to 0. Room on either side so the button reads as its own step out of the copy. */ #main--about .about-cta{ margin-top:26px; margin-bottom:14px; } @media (max-width:640px){ /* stacked full-width buttons need a row gap, not just a column one */ #main--experiences .exp-cta, #main--about .about-cta, #main--products .stories-cta, #main--platform .kathakar-cta, #main--shop .shop-cta{ display:grid; grid-template-columns:1fr; gap:12px; } #main--experiences .exp-cta .btn, #main--about .about-cta .btn{ width:100%; justify-content:center; padding:0 20px; } /* and room either side of the row */ #main--experiences .exp-cta, #main--about .about-cta, #main--products .stories-cta, #main--platform .kathakar-cta, #main--shop .shop-cta{ margin-top:28px; margin-bottom:12px; } /* a little more either side on a phone, where it is full width */ #main--about .about-cta{ margin-top:32px; margin-bottom:22px; } } /* ---- about milestones: the image sits flush on the copy ---------- The image and the card body met at 0px, so the photograph ran straight into "IKS Deep Tech Finals" and the rest. A margin below the image opens that up without touching the card's own padding. */ #main--about #media .card img{display:block;margin-bottom:14px} #main--about #media .card .card-b{padding-top:4px} /* the shop hero's button wants the same room either side as the others */ #main--shop .shop-cta{margin-top:34px} @media (max-width:640px){ #main--shop .shop-cta{margin-top:30px;margin-bottom:16px} } /* only "the work" carries the gold in the media band's kicker */ #main--media .ctaband .kicker .kick-hi{color:var(--gold)} /* the milestone card rail was starting 6px above the proof line's bottom, so "On stage" collided with "Bengaluru, India" */ #main--about .proof-line{margin-bottom:40px} @media (max-width:1000px){ #main--about .proof-line{margin-bottom:34px} } /* ---- /platform "A live room can become a community" ------------------ The three cards were painted var(--bg) (#050813) while the body under them is var(--realm-bg) (#040b1e), so they read as the page showing through rather than as boxes — only the 1px grid lines gave them an edge. Solid realm surface instead, so each one is an opaque panel. */ #main--platform .community-card{background:var(--realm-alt,#08142b)} /* ---- "Who we work with": centre a short last row -------------------- Adding Tatva Academy US took the row to seven marks, and a six-column grid leaves the seventh alone at the left edge of a second row — the same orphan appears at three columns and at two. Flex with wrap and justify-content:center keeps the full rows identical to the grid (the basis is the old track width) while any short row centres. */ .clients{ --cl-gap:clamp(12px,1.6vw,22px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--cl-gap); } .clients .client{flex:0 0 calc((100% - 3*var(--cl-gap))/4)} @media(max-width:900px){.clients .client{flex-basis:calc((100% - 2*var(--cl-gap))/3)}} @media(max-width:520px){.clients .client{flex-basis:calc((100% - 1*var(--cl-gap))/2)}} /* ---- testimonials parked --------------------------------------------- Hidden, not removed: the markup, avatars and slider all stay in place. #home-voices is the home page's "What people say"; #voices is the same set of quotes on /about under "What people are saying". Delete these two rules to bring them back. */ #home-voices, #main--about #voices{display:none} /* ---- /experiences: the Bhagavad Gītā title in two lines -------------- The project h3 is capped at max-width:13ch, which fits "Bhagavad Gītā" and then breaks "Immersive" and "Experience" onto their own lines. Widening this one title to hold "Immersive Experience" sets the break after "Gītā" and leaves the other three cards alone. */ #main--experiences .exp-project[data-n="01"] h3{max-width:19ch} /* likewise "Vālmīki Rāmāyaṇa" then "Musical", instead of a word per line */ #main--experiences .exp-project[data-n="04"] h3{max-width:18ch} /* ---- /experiences "What we create": artwork in the category cards ---- A 16:9 band between the icon and the tag, so the card keeps its icon-first rhythm and the art introduces the copy. Only the AR card carries one so far; the rule is written for any of them. */ #main--experiences .exp-cat-media{ display:block; margin:0 0 20px; width:100%; aspect-ratio:16 / 9; border-radius:16px; overflow:hidden; background:rgb(11,7,16); border:1px solid var(--line); } #main--experiences .exp-cat-media video, #main--experiences .exp-cat-media img{ display:block; width:100%; height:100%; object-fit:cover; } /* the icon's 28px lead-out is the gap to the copy; with art below it the band supplies that gap instead */ #main--experiences .exp-cat:has(.exp-cat-media) .exp-cat-icon{margin-bottom:20px} /* ---- /experiences "What we create": gold edges that answer the cursor The cards sat on var(--line), the same near-white hairline every other panel uses. Gold at rest, and on hover the edge lifts to the brighter gold with a soft halo so the card the cursor is over reads first. Hover is gated on a fine pointer, so a tap on a phone does not leave a card stuck in its hover state. */ #main--experiences .exp-cat{ border-color:rgba(217,188,94,.3); transition:border-color .35s ease, box-shadow .35s ease; } @media (hover:hover) and (pointer:fine){ #main--experiences .exp-cat:hover{ border-color:rgba(246,226,163,.72); box-shadow:0 0 0 1px rgba(246,226,163,.18), 0 14px 40px -24px rgba(246,226,163,.45); } } @media (prefers-reduced-motion:reduce){ #main--experiences .exp-cat{transition:none} } /* ---- home hero: Rāma on the left, starfield on the right ----------- The art is a layer of its own rather than the section's background, so it can be masked and sized independently of the section. Cover could not put the figure on the left: he sits at 53.6% of the frame, and at 1440x900 a covering background has only 160px of horizontal play, so background-position could move him between 44% and 55% of the screen and no further. The asset is cropped instead — 570px off its left edge, which carries him to 34% of the file — and the layer is contained rather than covering, so the whole frame fits the hero's height and ends about three quarters of the way across. It is anchored to the hero's top, not centred. On a tall viewport contain leaves the art shorter than the section, and centring split that slack into a band above and below — the one above ended on a hard horizontal edge. Top-anchored, the only edge that shows is the foot, which the asset's own alpha already fades out. What shows beyond it is the fixed starfield behind the page layer: .page/.route are transparent, so the section must paint nothing of its own or it would cover those stars. The mask feathers the art's right edge into them. */ .hero{ background:none; isolation:isolate; } .hero-scene{ position:absolute; inset:0; z-index:-1; } /* The art's right edge is a hard cut, so the mask has to be fully transparent there — exactly there, at every window shape. Masking the full-bleed span could not do that: the ramp's percentages measure the viewport's width, while a contained background's width is set by the viewport's HEIGHT (1.25 x height, from the file's 1350x1080). On a 16:10 laptop the edge lands at 78% of the screen and a ramp ending at 72% cleared it; on 16:9 the same edge lands at 70.3%, where that ramp was still about 5% opaque — a faint vertical seam, and the harder the window's aspect, the more of it showed. So the layer is sized to the art instead of to the section: height:100% with aspect-ratio 1350/1080 gives a box exactly as wide as the contained image, and the ramp's 100% is then the image's own edge. It reaches zero at 92% — inside the art, not on it — so the last strip of forest is already gone before there is anything to cut. */ .hero-scene::before{ content:""; position:absolute; left:0; top:0; height:100%; aspect-ratio:1350 / 1080; max-width:100%; background:url("/images/site/3fccde51960a.webp") left top/contain no-repeat; -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 36%, rgba(0,0,0,.90) 46%, rgba(0,0,0,.64) 58%, rgba(0,0,0,.36) 70%, rgba(0,0,0,.14) 80%, rgba(0,0,0,.04) 87%, transparent 92%); mask-image:linear-gradient(90deg, #000 0%, #000 36%, rgba(0,0,0,.90) 46%, rgba(0,0,0,.64) 58%, rgba(0,0,0,.36) 70%, rgba(0,0,0,.14) 80%, rgba(0,0,0,.04) 87%, transparent 92%); } .hero::before{ background: linear-gradient(to bottom,transparent 60%,rgba(5,8,19,.45) 80%,rgba(5,8,19,.88) 100%), linear-gradient(to bottom, rgba(4,7,17,.30) 0%, rgba(4,7,17,.14) 16%, rgba(4,7,17,.40) 30%, rgba(4,7,17,.44) 47%, rgba(4,7,17,.40) 62%, rgba(4,7,17,.18) 74%, rgba(4,7,17,.26) 85%, rgba(4,7,17,.78) 100%); } /* No hero artwork on a phone. The hero is portrait there, so a covering image throws away two thirds of the frame and crops to canopy; the headline reads better on the bare starfield. The layer is removed rather than hidden so the image is never fetched on a phone. The vertical wash goes with it: it was there to hold contrast over the art, and over the starfield alone it would only mute the stars. Only the foot of it stays, which is what blends the hero into the section below. */ @media (max-width:900px){ .hero-scene{display:none} .hero::before{ background:linear-gradient(to bottom, transparent 62%, rgba(5,8,19,.45) 82%, rgba(5,8,19,.88) 100%); } } /* ---- decorative pillars framing /experiences "How we work" ----------- Same idea as the pair on /products: the shell caps at 1180px, so wide viewports leave a clear gutter either side of "From source text to standing room" to frame into. Each pillar is anchored to the section's own edge and scaled to its full height, cropped inward by the gutter rather than shrunk to fit it, with a mask feathering that inward edge so it reads as the frame continuing out of view. z-index:-1 inside the section's own stacking context paints them over its ground but under every bit of its content. Inert: empty spans, aria-hidden, no pointer events. */ #main--services #process{isolation:isolate} #main--services .proc-pillar{ position:absolute; top:0; bottom:0; /* The shell caps at 1180px, so a true gutter only opens above ~1228px. A floor of 86px keeps the pillars on screen on an ordinary laptop; they overlap the shell's edge there, which is harmless — they paint behind the content and the heading is centred, so what they sit over is empty margin. */ --pw:clamp(118px,calc((100vw - 1040px) / 2),320px); width:var(--pw); /* The section runs well over 1500px, four times the drawn height of the art, so stretching the whole column would smear the capital and the plinth. Three slices instead: the capital and the carved panel under it hold their drawn proportions at the top, the lotus and the plinth hold theirs at the foot, and only the plain fluted middle is stretched to make up the difference — vertical flutes, so it reads as a longer column rather than a distorted one. */ background-repeat:no-repeat,no-repeat,no-repeat; background-size: 100% var(--capH), 100% calc(100% - var(--capH) - var(--baseH)), 100% var(--baseH); opacity:.8; pointer-events:none; z-index:-1; } #main--services .proc-pillar--l{ left:0; --capH:calc(var(--pw) * 0.8796); --baseH:calc(var(--pw) * 0.7222); background-image:url("/images/site/58356e4ab042.webp"),url("/images/site/6f56474c6dd8.webp"),url("/images/site/a58ab89f711b.webp"); background-position:left top,left var(--capH),left bottom; -webkit-mask-image:linear-gradient(90deg,#000 60%,rgba(0,0,0,.35) 86%,transparent 100%); mask-image:linear-gradient(90deg,#000 60%,rgba(0,0,0,.35) 86%,transparent 100%); } #main--services .proc-pillar--r{ right:0; --capH:calc(var(--pw) * 0.9845); --baseH:calc(var(--pw) * 0.8083); background-image:url("/images/site/dad0fe451f93.webp"),url("/images/site/77b191999552.webp"),url("/images/site/c1340eafb31b.webp"); background-position:right top,right var(--capH),right bottom; -webkit-mask-image:linear-gradient(270deg,#000 60%,rgba(0,0,0,.35) 86%,transparent 100%); mask-image:linear-gradient(270deg,#000 60%,rgba(0,0,0,.35) 86%,transparent 100%); } /* Narrower than this the section is a single stacked column with no margin to frame into, and the pillars would land on the copy. */ @media (max-width:959px){ #main--services .proc-pillar{display:none} } /* the lotus rule from the same pack, under the section heading */ #main--services #process .sec-head::after{ content:""; display:block; height:26px; margin:22px auto 0; width:min(420px,62%); background:url("/images/site/b759694ac884.webp") center/contain no-repeat; opacity:.75; } /* ---- /services "How we work": let the starfield through -------------- .sec.alt paints a flat var(--realm-alt). Holding it just short of opaque lets the fixed starfield behind the page layer come through, so the section carries real stars rather than a drawn texture — the same ones the hero shows, and they stay responsive. 18% reads as depth without lifting the ground off the brown. */ body[data-realm-page] #main--services .sec.alt#process{ background:color-mix(in srgb,var(--realm-alt) 82%,transparent); } /* ---- About: the studio paragraphs under the lead --------------------- Sit where the three principle statements were, below the hero row rather than inside its copy column, so they run the full width of the shell, edge to edge with the hero above. Set in the display serif rather than the body sans: at this size they read as a statement rather than body copy, and the lighter weight keeps text this long from turning into a wall. Contrast is carried by a vignette rather than by a panel or by text shadow alone. A panel read as a card, and shadow alone left the words dropping into the lamps and lit water behind them. This is a soft radial wash that is densest behind the measure and already fully transparent before its own edge, so it darkens the artwork locally without drawing a boundary anywhere. It extends past the text on every side for that reason, and is painted under the content by z-index inside the block's own stacking context. */ #main--about .about-intro{ position:relative; isolation:isolate; margin:clamp(30px,4.2vw,56px) 0 0; text-align:left; } #main--about .about-intro::before{ content:""; position:absolute; /* full-bleed: the wash spans the viewport, so it has no left or right edge to show, and it fades out top and bottom well clear of the text. A radial could not do this — its ramp has to finish inside its own box, and whatever is left at the box's corners draws the rectangle you were not meant to see. */ top:clamp(-72px,-6vw,-44px); bottom:clamp(-72px,-6vw,-44px); left:calc(50% - 50vw); right:calc(50% - 50vw); z-index:-1; pointer-events:none; background:linear-gradient(to bottom, transparent 0%, rgba(3,6,14,.52) 16%, rgba(3,6,14,.82) 34%, rgba(3,6,14,.82) 66%, rgba(3,6,14,.52) 84%, transparent 100%); } #main--about .about-intro p{ margin:0; font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(20px,2.05vw,30px); line-height:1.5; letter-spacing:-.005em; color:var(--ink); text-shadow:0 1px 10px rgba(3,6,14,.75); } #main--about .about-intro p + p{ margin-top:.75em; } #main--about .about-intro em{ font-style:italic; } /* The studio's name, the principle it is named for, and the word the whole paragraph lands on. Gold against the near-white body text, with the glow built from two shadows: a tight warm one that thickens the strokes and a wide dim one that reads as light coming off them. The wash behind the paragraph is what makes this legible — a glow on an undarkened scene would just smear. */ #main--about .about-intro .gl{ color:var(--gold-bright); text-shadow: 0 0 10px rgba(240,212,136,.55), 0 0 28px rgba(217,180,90,.34), 0 1px 10px rgba(3,6,14,.75); } @media (max-width:640px){ #main--about .about-intro{margin-top:26px} #main--about .about-intro::before{inset:-28px -22px} #main--about .about-intro p{font-size:clamp(18px,5.2vw,22px); line-height:1.45} }