/* ================================================================== KALPAVANYA — the rolling home page. Everything below the hero. The hero itself is the Claude Design export in index.html and is not touched by this file. The idea: every mural in the Balbharati set is installed the same way — a recessed panel with one lamp above it. So each section here is a wall, and its lamp switches on as you scroll to it. That's the whole visual device. Nothing else animates. ================================================================== */ :root{ --k-bg: #0D0418; --k-bg-2: #150826; --k-panel: #180A2C; --k-ink: #FFFFFF; --k-ink-70: rgba(255,255,255,.72); --k-ink-50: rgba(255,255,255,.55); --k-ink-35: rgba(255,255,255,.38); --k-accent: #A855F7; --k-accent2: #7C3AED; --k-line: rgba(168,85,247,.22); --k-line-hi: rgba(168,85,247,.5); --k-wash: #FFD9A0; /* the overhead lamp */ --k-rail: 74px; } /* the exported hero sets its own vars on itself, so nothing here leaks into it and nothing there leaks out */ .roll{ background:var(--k-bg); color:var(--k-ink); font-family:'Mukta',system-ui,sans-serif; position:relative; padding-left:var(--k-rail); } @media (max-width:820px){ .roll{padding-left:0;} } .roll *{box-sizing:border-box;} .roll-in{ width:min(1180px,calc(100% - clamp(28px,6vw,84px))); margin-inline:auto; } /* ---------- scroll cue: the only thing telling you there's more ---------- */ .cue{ position:relative; z-index:3; margin-top:-86px; margin-bottom:26px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--k-ink-35); font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; pointer-events:none; } .cue i{ width:1px; height:52px; background:linear-gradient(180deg,rgba(255,217,160,0),var(--k-wash)); animation:cue 2.6s ease-in-out infinite; transform-origin:top; } @keyframes cue{ 0%,100%{transform:scaleY(.35);opacity:.35;} 50% {transform:scaleY(1); opacity:1;} } /* ---------- a wall ---------- */ .wall{ position:relative; padding:clamp(92px,11vw,152px) 0; border-top:1px solid var(--k-line); } .wall:first-of-type{border-top:0;} /* the fixture */ .lamp{ position:absolute; top:0; left:50%; width:36px; height:14px; transform:translateX(-50%); border-radius:0 0 6px 6px; background:linear-gradient(180deg,#241638 0%,#0A0413 70%); box-shadow:0 3px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10); } /* the bulb, which comes on with the section */ .lamp::before{ content:""; position:absolute; left:50%; bottom:-1px; width:21px; height:3px; border-radius:2px; transform:translateX(-50%); background:var(--k-wash); box-shadow:0 0 11px 2px rgba(255,217,160,.65); opacity:0; transition:opacity 1.2s ease; } .wall.lit .lamp::before{opacity:.9;} /* the light it throws */ .lamp::after{ content:""; position:absolute; top:100%; left:50%; width:min(1240px,96vw); height:min(620px,58vw); transform:translateX(-50%); background:radial-gradient(56% 74% at 50% 0%, rgba(255,217,160,.17), rgba(255,217,160,0) 68%); opacity:0; transition:opacity 1.2s ease; pointer-events:none; } .wall.lit .lamp::after{opacity:1;} /* Content lifts into the light. Only hidden when home.js is actually running — it adds .js-reveal to before it observes anything. If the script fails, never loads, or the browser is too old, the page renders as plain visible content instead of a screen of nothing. */ .js-reveal .rise{ opacity:0; transform:translateY(20px); transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0ms); } .js-reveal .wall.lit .rise{opacity:1; transform:none;} /* ---------- type ---------- */ .eyebrow{ font-family:'Archivo',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--k-ink-35); display:flex; align-items:center; gap:13px; margin-bottom:22px; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--k-accent); flex:none; } .wall h2{ font-family:'Cinzel',serif; font-weight:700; font-size:clamp(29px,4.4vw,54px); line-height:1.12; letter-spacing:-.005em; max-width:19ch; } .wall h2 em{font-style:normal; color:var(--k-accent);} .lede{ margin-top:20px; max-width:56ch; font-size:clamp(15.5px,1.25vw,18px); line-height:1.68; color:var(--k-ink-70); } .wall p + p{margin-top:15px;} /* ---------- section 1: the thesis ---------- */ .thesis-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,80px); align-items:end;} @media (max-width:900px){.thesis-grid{grid-template-columns:1fr;}} .thesis-note{ border-left:1px solid var(--k-line); padding-left:clamp(18px,2vw,26px); color:var(--k-ink-50); font-size:14.5px; line-height:1.7; } /* ---------- section 2: selected work ---------- */ .feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.5vw,20px); margin-top:clamp(34px,4vw,52px); } @media (max-width:940px){.feat{grid-template-columns:repeat(2,1fr);}} @media (max-width:600px){.feat{grid-template-columns:1fr;}} .piece{ position:relative; display:block; overflow:hidden; border:1px solid var(--k-line); border-radius:11px; background:rgba(124,58,237,.10); } .piece img{ width:100%; height:100%; aspect-ratio:5/4; object-fit:cover; display:block; filter:brightness(.8) saturate(.9); transform:scale(1.004); transition:filter .55s ease, transform .8s cubic-bezier(.22,.61,.36,1); } /* the same overhead wash the real wall gets, on hover */ .piece .glow{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s ease; mix-blend-mode:screen; background:radial-gradient(62% 44% at 50% -8%, rgba(255,217,160,.42), rgba(255,217,160,0) 66%); } .piece .shade{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(13,4,24,0) 32%,rgba(13,4,24,.55) 58%, rgba(8,2,16,.93) 84%,rgba(8,2,16,.98) 100%); } .piece:hover img,.piece:focus-visible img{filter:brightness(1.04) saturate(1.05); transform:scale(1.04);} .piece:hover .glow,.piece:focus-visible .glow{opacity:1;} .piece:hover{border-color:var(--k-line-hi);} .piece figcaption{position:absolute; left:0; right:0; bottom:0; padding:20px 18px 16px;} .piece h3{ font-family:'Cinzel',serif; font-weight:600; font-size:15.5px; line-height:1.25; margin-bottom:5px; text-shadow:0 1px 12px rgba(8,3,18,.9); } .piece .meta{ font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--k-ink-50); } /* ---------- section 3: the commission ---------- */ .commission{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4.5vw,70px); align-items:center;} @media (max-width:900px){.commission{grid-template-columns:1fr;}} .commission figure{border:1px solid var(--k-line); border-radius:12px; overflow:hidden;} .commission img{width:100%; height:auto; display:block;} .commission figcaption{ padding:12px 15px; font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--k-ink-35); } .facts{display:flex; flex-wrap:wrap; gap:clamp(22px,3.4vw,52px); margin-top:clamp(26px,3vw,38px);} .fact b{ display:block; font-family:'Cinzel',serif; font-weight:700; font-size:clamp(32px,3.6vw,44px); line-height:1; color:var(--k-wash); } .fact span{ display:block; margin-top:9px; max-width:15ch; font-family:'Archivo',sans-serif; font-size:10px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--k-ink-50); } /* ---------- section 4: process ---------- */ /* numbered because it genuinely is a sequence — stage 3 cannot precede stage 2 */ .stages{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--k-line); border:1px solid var(--k-line); border-radius:12px; overflow:hidden; margin-top:clamp(34px,4vw,52px); } @media (max-width:940px){.stages{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.stages{grid-template-columns:1fr;}} .stage{background:var(--k-panel); padding:clamp(22px,2.4vw,30px);} .stage b{ display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:23px; line-height:1; color:var(--k-accent); letter-spacing:-.02em; } .stage h3{font-family:'Cinzel',serif; font-weight:600; font-size:15.5px; margin:13px 0 8px;} .stage p{font-size:14.5px; line-height:1.65; color:var(--k-ink-50);} /* ---------- section 5: talk ---------- */ .talk{display:grid; grid-template-columns:1fr auto; gap:clamp(26px,4vw,60px); align-items:center;} @media (max-width:820px){.talk{grid-template-columns:1fr;}} .ways{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;} .way{ font-family:'Cinzel',serif; font-weight:700; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; padding:15px 30px; border-radius:100px; color:var(--k-ink); border:1px solid var(--k-line-hi); transition:background .25s,transform .25s,color .25s; } .way:hover{transform:translateY(-2px); background:rgba(168,85,247,.14);} .way.solid{ border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--k-accent),var(--k-accent2)); box-shadow:0 15px 36px -14px rgba(168,85,247,.6); } .way.solid:hover{background:linear-gradient(135deg,#B76BF9,#8B4BEF);} /* ---------- links ---------- */ .more{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(26px,3vw,38px); font-family:'Cinzel',serif; font-weight:600; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--k-ink); border-bottom:1px solid var(--k-line-hi); padding-bottom:5px; transition:color .22s,border-color .22s; } .more:hover{color:var(--k-accent); border-color:var(--k-accent);} .more span{transition:transform .22s;} .more:hover span{transform:translateX(4px);} /* ---------- footer ---------- */ .roll-foot{ background:var(--k-bg); border-top:1px solid var(--k-line); padding:clamp(30px,3.4vw,44px) 0; color:var(--k-ink-35); font-size:13px; padding-left:var(--k-rail); } @media (max-width:820px){.roll-foot{padding-left:0;}} .roll-foot .row{display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; justify-content:space-between;} .roll-foot a{color:var(--k-ink-50); transition:color .2s;} .roll-foot a:hover{color:var(--k-accent);} /* ---------- sticky bar: a long page needs a way back ---------- */ .minibar{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); padding:12px clamp(18px,3vw,34px); background:rgba(13,4,24,.86); backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px); border-bottom:1px solid var(--k-line); transform:translateY(-100%); transition:transform .38s cubic-bezier(.22,.61,.36,1); } .minibar.on{transform:none;} .minibar .mark{ font-family:'Cinzel',serif; font-weight:700; font-size:13.5px; letter-spacing:.17em; text-transform:uppercase; margin-right:auto; color:var(--k-ink); } .minibar a{ font-family:'Archivo',sans-serif; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--k-ink-50); transition:color .2s; } .minibar a:hover{color:var(--k-ink);} .minibar .go{ color:#fff; padding:10px 21px; border-radius:100px; background:linear-gradient(135deg,var(--k-accent),var(--k-accent2)); } .minibar .go:hover{color:#fff;} @media (max-width:700px){ .minibar .hide-s{display:none;} } .roll a{text-decoration:none; color:inherit;} .roll :focus-visible,.minibar :focus-visible{ outline:2px solid var(--k-wash); outline-offset:3px; border-radius:4px; } /* ---------- reduced motion: keep the light, drop the movement ---------- */ @media (prefers-reduced-motion:reduce){ .rise{opacity:1; transform:none; transition:none;} .lamp::after{transition:none;} .cue i{animation:none;} .minibar{transition:none;} .piece img,.piece .glow,.way,.more span{transition:none;} }