/* ========================================================= Tatkaal Seva microsite styles Design base: PSD screen is 472px wide (528px canvas minus phone frame). --u = 1 design pixel. Every size below is "design px * var(--u)" so the layout scales 1:1 with the PSD on any phone width. Laravel: move this file to resources/css/site.css (Vite). ========================================================= */ @font-face{font-family:"Seg7";src:url("../fonts/DSEG7Classic-Regular.woff2") format("woff2");font-display:swap} @font-face{font-family:"Rajdhani";font-weight:500;src:url("../fonts/rajdhani-latin-500-normal.woff2") format("woff2");font-display:swap} @font-face{font-family:"Rajdhani";font-weight:600;src:url("../fonts/rajdhani-latin-600-normal.woff2") format("woff2");font-display:swap} @font-face{font-family:"Rajdhani";font-weight:700;src:url("../fonts/rajdhani-latin-700-normal.woff2") format("woff2");font-display:swap} @font-face{font-family:"Inter";font-weight:400;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");font-display:swap} @font-face{font-family:"Inter";font-weight:600;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");font-display:swap} @font-face{font-family:"Inter";font-weight:700;src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");font-display:swap} @font-face{font-family:"PT Mono";font-weight:400;src:url("../fonts/pt-mono-latin-400-normal.woff2") format("woff2");font-display:swap} :root{ --u:calc(min(100vw,480px) / 472); --blue:#2851A3; /* header, cards, buttons */ --blue-deep:#184893; /* reserved band */ --yellow:#FFE400; /* accents on blue */ --sun:#F1DE13; /* intro background */ --ink:#231F20; /* body text */ --road:#486180; --dim:#7C8AAE; /* unlit digits */ } *{box-sizing:border-box} html,body{margin:0} body{background:#1d3f82;font-family:"Rajdhani",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased} img{display:block;max-width:100%;height:auto} button{font:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--blue);outline-offset:2px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* One phone-width column, centered on desktop */ .screen{position:relative;width:calc(472*var(--u));min-height:max(100svh,calc(1059*var(--u)));margin:0 auto;overflow:hidden} .abs{position:absolute} /* ---------- Fit-to-screen pages (intro + done) ---------- These pages must never scroll. --u is picked so the whole design (472 x --h design px) fits BOTH the width and the height of the screen. Extra width is filled edge to edge by the background, road and header. */ /* --app-h = real visible height, set by the small script in . (100svh alone is wrong in some mobile browsers and in-app browsers.) --safe-b = iPhone home bar area, kept free so the button is never under it. */ body.fit{--h:1059;--safe-b:env(safe-area-inset-bottom,0px);--app:var(--app-h,100svh); --u:calc(min(100vw, 480px, (var(--app) - var(--safe-b)) * 472 / var(--h)) / 472);background:var(--sun);overflow-x:clip} body.fit-done{--h:1031;background:#FFE400} .fit .screen{overflow:visible;min-height:var(--app);height:var(--app)} .fit .ground{height:calc(244*var(--u) + var(--safe-b))} .fit .ground::before,.fit .ground::after{bottom:calc(34*var(--u) + var(--safe-b))} .fit .road-btn{bottom:calc(17*var(--u) + var(--safe-b))} .fit .ground{left:calc(50% - 50vw);right:calc(50% - 50vw);background-size:auto calc(212*var(--u)),auto;background-repeat:repeat-x,no-repeat} .fit .topbar{box-shadow:0 0 0 100vmax var(--blue);clip-path:inset(0 -100vmax)} /* ---------- Intro screens (PSD 02 / 03 / 04) ---------- */ .intro{background:var(--sun)} .lockup{left:calc(42*var(--u));top:calc(53*var(--u));width:calc(389*var(--u))} .ground{z-index:0;left:0;right:0;bottom:0;height:calc(244*var(--u));background:url("../img/skyline.png") top center/100% auto no-repeat,var(--road)} .ground::before,.ground::after{content:"";position:absolute;bottom:calc(34*var(--u));width:calc(24*var(--u));height:calc(6*var(--u));background:#fff} .ground::before{left:0}.ground::after{right:0} .road-btn{position:absolute;left:50%;bottom:calc(17*var(--u));transform:translateX(-50%);width:calc(184*var(--u));height:calc(46*var(--u)); border:calc(3*var(--u)) solid rgba(255,255,255,.85);background:transparent;color:#fff;font-weight:700;font-size:calc(23.8*var(--u)); letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:3} .road-btn:disabled{opacity:.5;cursor:not-allowed} .copy{z-index:1;left:0;right:0;text-align:center;font-weight:600;font-size:calc(28.5*var(--u));line-height:calc(30*var(--u))} .copy b{color:var(--blue);font-weight:700} .hello{top:calc(564*var(--u))} .hello .gap{display:block;height:calc(17*var(--u))} .counter{display:inline-block;position:relative;font-family:"Seg7",monospace;font-size:calc(23*var(--u));letter-spacing:-.06em;color:var(--blue); border-bottom:calc(2*var(--u)) solid var(--blue);padding:0 calc(6*var(--u)) calc(2*var(--u));margin:0 calc(4*var(--u))} .counter small{position:absolute;left:0;right:0;top:calc(100% + 6*var(--u));font-family:"Rajdhani";font-size:calc(8.2*var(--u));line-height:1;letter-spacing:.04em;text-transform:uppercase} .fomo{top:calc(756*var(--u));line-height:calc(32.1*var(--u))} /* Step switching on index.html: data-step = hello | form | denied */ .intro [data-show]{transition:opacity .35s ease} .intro:not([data-step="hello"]) [data-show="hello"], .intro:not([data-step="form"]) [data-show="form"], .intro:not([data-step="denied"]) [data-show="denied"]{opacity:0;visibility:hidden;pointer-events:none} /* Form (PSD 03) */ .verify{z-index:2;left:calc(50*var(--u));right:calc(49*var(--u));top:calc(575*var(--u))} .field{display:flex;align-items:flex-end;gap:calc(6*var(--u));margin-bottom:calc(30*var(--u));position:relative} .field label{font-weight:700;font-size:calc(21.8*var(--u));letter-spacing:.06em;text-transform:uppercase;line-height:1} .field input{flex:1;min-width:0;border:0;border-bottom:calc(2*var(--u)) solid var(--ink);background:transparent;font:600 calc(20*var(--u))/1 "Rajdhani"; letter-spacing:.08em;padding:0 0 calc(2*var(--u));color:var(--ink);border-radius:0} .field input::placeholder{font-weight:500;font-size:calc(12.7*var(--u));text-transform:uppercase;color:var(--ink);letter-spacing:0} .field input:focus{outline:none;border-bottom-color:var(--blue)} .field.bad input{border-bottom-color:#C62828} .field .err{position:absolute;left:0;top:100%;margin-top:calc(4*var(--u));font-size:calc(13*var(--u));font-weight:600;color:#B71C1C} .tnc{display:flex;align-items:center;gap:calc(13*var(--u));font-weight:700;font-size:calc(18.5*var(--u));letter-spacing:-.02em;margin-top:calc(-2*var(--u))} .tnc input{appearance:none;width:calc(14*var(--u));height:calc(14*var(--u));border:calc(1.5*var(--u)) solid var(--ink);margin:0;display:grid;place-items:center;background:transparent} .tnc input:checked::after{content:"";width:60%;height:60%;background:var(--blue)} .tnc a{color:var(--ink)} /* Catch game (form step). Layers: drops 1 < form 2 < logo + catcher 3, so items come out from behind the logo and sink behind the basket front. */ .lockup,.catcher,.shrug{pointer-events:none} .lockup{z-index:3} .drops{position:absolute;inset:0;z-index:1;pointer-events:none} .drop{position:absolute;left:0;top:0;will-change:transform} .drop img{display:block;width:100%} .catcher{position:absolute;z-index:3;left:calc(289*var(--u));bottom:calc(64*var(--u));width:calc(130*var(--u));transition:left .55s cubic-bezier(.3,.7,.3,1)} .catcher img{width:100%;transform-origin:50% 100%} .catcher.walk img{animation:walk .14s ease-in-out infinite alternate} .catcher.catch img{animation:dip .28s ease-out} @keyframes walk{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}} @keyframes dip{40%{transform:translateY(calc(6*var(--u))) scaleY(.97)}} /* Not registered (PSD 04) */ .denied{z-index:1;left:calc(64*var(--u));top:calc(531*var(--u));width:calc(342*var(--u));height:calc(376*var(--u));background:var(--blue); border:calc(5*var(--u)) solid #fff;text-align:center;padding:calc(44*var(--u)) calc(14*var(--u)) 0} .denied h2{margin:0;color:var(--yellow);font-weight:700;font-size:calc(29.6*var(--u));line-height:calc(34.3*var(--u));letter-spacing:.02em;text-transform:uppercase} .denied p{margin:calc(20*var(--u)) 0 0;color:#fff;font-weight:600;font-size:calc(16.5*var(--u));line-height:calc(19.8*var(--u));letter-spacing:.02em} .shrug{left:calc(157*var(--u));bottom:calc(88*var(--u));width:calc(157*var(--u));z-index:2} /* ---------- Shop screens (PSD 05 / 06 / 07) ---------- */ .shop{background:#fff;padding-bottom:calc(130*var(--u))} .topbar{position:relative;height:calc(109*var(--u));background:var(--blue)} .topbar .left{position:absolute;left:calc(26*var(--u));top:calc(51*var(--u));width:calc(153*var(--u))} .topbar .badge{position:absolute;left:calc(309*var(--u));top:calc(17*var(--u));width:calc(147*var(--u));z-index:2} .cats{display:flex;justify-content:space-between;margin:calc(43*var(--u)) calc(14*var(--u)) 0;padding-bottom:calc(8*var(--u));border-bottom:1px solid #E3E6EB;overflow-x:auto;scrollbar-width:none} .cats button{flex:0 0 auto;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u));padding:0 calc(4*var(--u)) calc(6*var(--u));position:relative; font-family:Inter,system-ui,sans-serif;font-size:calc(12.6*var(--u));color:#212121} .cats img{width:calc(32*var(--u));height:calc(32*var(--u));border-radius:calc(8*var(--u))} .cats button[aria-selected="true"]{font-weight:700} .cats button[aria-selected="true"] img{background:#CAE6F8} .cats button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:calc(-9*var(--u));height:calc(3*var(--u));border-radius:3px;background:var(--blue)} .tools{display:flex;justify-content:space-between;align-items:center;margin:calc(14*var(--u)) calc(27*var(--u)) calc(21*var(--u)) calc(32*var(--u))} .tools button{border:0;background:none;display:flex;align-items:center;gap:calc(8*var(--u));font-weight:700;font-size:calc(19*var(--u));letter-spacing:.02em;text-transform:uppercase;color:var(--ink);padding:0} .tools svg{width:calc(18*var(--u));height:calc(16*var(--u))} .menu{position:absolute;z-index:20;background:#fff;border:2px solid var(--blue);box-shadow:0 8px 24px rgba(0,0,0,.18);font:600 calc(17*var(--u)) Rajdhani;min-width:calc(200*var(--u))} .menu button{display:block;width:100%;text-align:left;padding:calc(10*var(--u)) calc(14*var(--u));border:0;background:none;text-transform:none;letter-spacing:0} .menu button[aria-checked="true"]{background:#FFF8BF;color:var(--blue)} .grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(12*var(--u));margin:0 calc(26*var(--u)) 0 calc(24*var(--u))} .deal{display:block;border:calc(2*var(--u)) solid var(--blue);text-decoration:none;color:inherit;background:#fff} .deal .pic{height:calc(189*var(--u));display:grid;place-items:center;padding:calc(6*var(--u))} .deal .pic img{max-height:100%;object-fit:contain} .deal.sold .pic{opacity:.45} .label{background:var(--blue);color:#fff;text-align:center;padding:calc(12*var(--u)) calc(12*var(--u)) calc(10*var(--u));height:calc(87*var(--u))} .label .brand{font-weight:700;font-size:calc(13.2*var(--u));line-height:calc(15.8*var(--u));letter-spacing:.1em;text-transform:uppercase} .label .model{font-weight:700;font-size:calc(9.2*var(--u));line-height:calc(11*var(--u));letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .meter{display:flex;align-items:center;justify-content:space-between;margin-top:calc(8*var(--u))} .digits{font-family:"Seg7",monospace;font-size:calc(26*var(--u));line-height:1;color:var(--yellow);letter-spacing:-.12em} .digits .off{color:var(--dim)} .meter .mid{flex:1;margin:0 calc(8*var(--u));font-weight:700;font-size:calc(6.2*var(--u));letter-spacing:.2em;text-transform:uppercase;line-height:1} .meter .mid i{display:block;height:calc(1.5*var(--u));background:#fff;margin:calc(3*var(--u)) 0} .slots-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:calc(472*var(--u));height:calc(225*var(--u));pointer-events:none; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 45%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(46*var(--u));z-index:10} .slots-bar span{pointer-events:auto;width:calc(354*var(--u));height:calc(52*var(--u));background:var(--yellow);border:calc(3*var(--u)) solid var(--blue); display:grid;place-items:center;font:700 calc(22*var(--u)) "PT Mono",monospace;letter-spacing:.02em;color:var(--blue);text-transform:uppercase} .empty{grid-column:1/-1;text-align:center;font-weight:600;font-size:calc(20*var(--u));padding:calc(40*var(--u)) 0} /* Product (PSD 06 / 07) */ .back{position:absolute;left:calc(25*var(--u));top:calc(152*var(--u));width:calc(31*var(--u));height:calc(31*var(--u));border-radius:50%; border:calc(2*var(--u)) solid var(--blue);background:#D7DEEE;display:grid;place-items:center;color:var(--blue);z-index:3} .back svg{width:55%;height:55%} .hero-pic{position:relative;margin:calc(108*var(--u)) auto 0;width:calc(378*var(--u));height:calc(468*var(--u))} .hero-pic img{width:100%;height:100%;object-fit:contain} .band{position:absolute;left:calc(-60*var(--u));right:calc(-60*var(--u));top:calc(203*var(--u));height:calc(114*var(--u));background:var(--blue-deep); transform:rotate(-9.3deg);display:grid;place-items:center;opacity:0} .band img{width:calc(407*var(--u));transform:rotate(9.3deg)} .is-reserved .band{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) forwards} @keyframes stamp{from{opacity:0;transform:rotate(-9.3deg) scale(1.6)}to{opacity:1;transform:rotate(-9.3deg) scale(1)}} @media (prefers-reduced-motion:reduce){.drops{display:none}.catcher{transition:none}.is-reserved .band{animation:none;opacity:1}.intro [data-show]{transition:none}} .hl{margin:calc(74*var(--u)) calc(30*var(--u)) 0;font-family:Inter,system-ui,sans-serif} .hl-head{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;padding:0;font-weight:600;font-size:calc(17*var(--u));color:#212121} .hl-head i{width:calc(30*var(--u));height:calc(26*var(--u));border-radius:calc(6*var(--u));background:#F0F2F5;display:grid;place-items:center;transition:transform .2s} .hl-head[aria-expanded="false"] i{transform:rotate(180deg)} .hl ul{list-style:none;margin:calc(20*var(--u)) 0 0;padding:0} .hl li{display:flex;align-items:center;gap:calc(12*var(--u));font-size:calc(14.5*var(--u));line-height:1.35;color:#333;margin-bottom:calc(14*var(--u))} .hl li span:first-child{flex:0 0 calc(36*var(--u));height:calc(36*var(--u));border-radius:calc(8*var(--u));background:#EEF3FB;display:grid;place-items:center} .hl li svg{width:calc(18*var(--u));height:calc(18*var(--u))} .buybar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:calc(472*var(--u));background:#fff;display:flex;align-items:center;justify-content:space-between; padding:calc(12*var(--u)) calc(26*var(--u)) calc(31*var(--u)) calc(30*var(--u));z-index:10} .buybar strong{font-weight:600;font-size:calc(29.3*var(--u));text-transform:uppercase} .btn-reserve{width:calc(162*var(--u));height:calc(55*var(--u));background:var(--yellow);border:calc(3*var(--u)) solid var(--blue);color:var(--blue); font-weight:700;font-size:calc(30.4*var(--u));letter-spacing:.06em;text-transform:uppercase} .btn-reserve:disabled{opacity:.6;cursor:wait} .is-reserved .buybar{display:none} /* ---------- Done (PSD 01) ---------- */ .done{background:#FFE400} .done .topbar{height:calc(110*var(--u))} .done .topbar .left{top:calc(37*var(--u))} .done .topbar .badge{top:calc(2*var(--u))} .done-copy{left:0;right:0;text-align:center;font-weight:600;color:var(--blue)} .done h1{margin:0;position:absolute;left:0;right:0;top:calc(215*var(--u));font-weight:700;font-size:calc(34.6*var(--u));line-height:calc(30.8*var(--u));color:var(--blue);text-align:center} .done .d1{top:calc(279*var(--u));font-size:calc(26.9*var(--u));line-height:calc(39.9*var(--u));letter-spacing:.02em} .done .cta{display:inline-block;background:var(--blue);color:var(--yellow);font-weight:700;font-size:calc(31.4*var(--u));line-height:calc(48*var(--u)); padding:0 calc(12*var(--u));margin:calc(2*var(--u)) 0;text-decoration:none;letter-spacing:.02em} .done .d2{top:calc(446*var(--u));font-size:calc(24.7*var(--u));line-height:calc(35.4*var(--u));letter-spacing:.02em} .done .d2 b{font-size:calc(31.8*var(--u));letter-spacing:0} .scene{left:0;bottom:0;width:100%} /* Toast for network errors */ .toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;font:600 16px Rajdhani;z-index:50;max-width:90vw} .fit .catcher{bottom:calc(64*var(--u) + var(--safe-b))} .fit .shrug{bottom:calc(88*var(--u) + var(--safe-b))}