/* ========================================================================== IRCTC Rail Connect — a redesign. Figma › IRCTC project (4238:5842), 1440 × 14369. The frame around this page (column, grid, rules, navbar, revealed footer, cursor) is the shell's. Everything here is the page's own content at the Figma measurements: each section's margin-top is the gap the design leaves above it, so the whole 14369px rhythm is reproduced without pinning anything to an absolute offset. What is a picture in Figma is a picture here — the app screenshots, the store reviews, the design-system boards, the wireframes and the final screens, all of them raster in the file and raster here, cropped exactly as the design crops them. What Figma draws as type or vector is type and vector here: every heading and paragraph, the persona card, the four takeaway rows, the annotation dots, the two flow arrows, and the pair of chevrons inside the comparison handle. ========================================================================== */ /* The ew-resize pointer the brief asks for. It is pixelarticons' own 32x32 PNG, carried here as a data URI rather than fetched from pixelarticons.com: a cursor whose url() fails silently falls back to the plain arrow with nothing to show for it, and it would fail wherever the page is opened offline, from a file, or behind a content policy that blocks third-party images. Inlined, it is 278 bytes and always there — the same treatment the shell gives its own hand pointer. Hotspot 4 1, exactly as specified. */ :root{ --cursor-ew: url("media/35a9ee64050d.png") 4 1 } /* The 15px rules. Read off Figma's own render of the frame rather than off the line nodes' reported coordinates — the file's line layer is nested, and taking its numbers at face value puts the whole pattern two pixels low. What Figma paints is a rule every 15px from the navbar's lower edge at 62, so every rule sits at y = 62 + 15k, and the shell's phase that produces that is 1: it starts the run at (62 - 1) + phase + 15. */ :root{ --grid-phase:1px } .irc{ padding-bottom:36px } /* the footer sits at 14177; the frame is 14371 tall */ /* ------------------------------------------------------------- shared ----- */ /* wrapped in :where() so it carries almost no weight and never eats a margin set below, or .col's own centring */ :where(.irc) :where(h2,h3,p,b,span,div,ul,li){ margin:0 } :where(.irc) :where(ul){ padding:0; list-style:none } :where(.irc) p{ font-family:var(--font-body); font-weight:400; font-size:16px; line-height:normal; color:#fff; } /* the label band — 960 × 29 on #0d0f0d, the text 29px in */ .irc .band{ height:29px; background:#0d0f0d; display:flex; align-items:center; padding-left:29px; font-family:var(--font-body); font-weight:500; font-size:16px; color:#fff; } /* the page's two heading sizes, both Exposure at 32 */ /* Figma sets these at 32 over 38 — a 2-line heading measures 76 in the file — which is Exposure's own normal and not the fallback's, so it is written out rather than left to the font */ .irc__h{ font-family:var(--font-display); font-weight:400; font-size:32px; line-height:38px; color:#fff; } /* a slot the artwork has not been fetched for */ :where(.irc) :where(.ph){ width:100%; height:var(--h,479px); background:var(--ticker-card); display:grid; place-items:center; font-family:var(--font-body); font-size:16px; color:#fff; text-align:center; } /* :where() keeps both of these at almost no weight, so every rule below that gives a picture its own box — a 370px screen, a 210px wireframe, a cropped window — outranks them instead of being swallowed by width:100% */ :where(.irc) img:where(.ph){ background:none; object-fit:cover; display:block } /* Figma crops a picture by oversizing it inside a window and sliding it. Each window below reproduces that literally — the frame clips, the picture keeps the design's own width, height and offset — rather than guessing at an object-position. */ .irc__win{ position:absolute; overflow:hidden; pointer-events:none } .irc__win img{ position:absolute; display:block; max-width:none; object-fit:fill } /* ---------------------------------------------------------- fitted ------- */ /* Eight of the sections are compositions drawn at the column's own 960: a phone at 222 × 457 is at 222 × 457 or the comparison stops lining up. Below 960 they are reduced as a whole rather than reflowed — board-fit.js moves the children into .nv__board-in and scales it. */ .irc__fit{ position:relative; overflow:hidden } /* .col gives the width */ /* the wrapper board-fit.js makes: the section at its drawn size, scaled to the column, pinned at the top left so the reduction reads as a reduction */ .irc .fit-in{ position:relative; width:960px; height:100%; transform-origin:0 0 } /* the reveal wants a gentler curve than the shell's --ease-out, which puts four fifths of its travel in the first third and hides the wipe */ .irc{ --reveal-ease:cubic-bezier(.38,.06,.2,1) } /* ============================== the hero ================================== */ /* 960 × 524. Two screens stacked concentrically as the design stacks them — the redesign on top, the live app underneath — and a wipe between them. The layer that carries the new screen is the full stage, so the clip is measured in stage coordinates and the divider cuts the phone, not the picture's own box. */ /* Not one of the fitted sections: every part of it is placed from the stage's own centre or as a percentage of its width, so it holds the design's sizes at 960 and keeps the phones at full size on a narrow screen instead of shrinking them to a thumbnail. */ .irc__hero{ position:relative; overflow:hidden; height:524px; background:#141814; --wipe:50% } .irc__shot{ position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:24px; } .irc__shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; max-width:none; } /* the live app: a bare screenshot, so the design gives it the phone's white edge and its shadow */ .irc__shot--old{ width:211px; height:448px; left:calc(50% - .5px); border:3px solid #fff; box-sizing:border-box; box-shadow:77px 195px 59px rgba(0,0,0,0), 49px 125px 54px rgba(0,0,0,.02), 28px 70px 45px rgba(0,0,0,.08), 12px 31px 34px rgba(0,0,0,.14), 3px 8px 18px rgba(0,0,0,.16); } /* the redesign: the render brings its own device, so no edge is added */ .irc__shot--new{ width:222px; height:457px; top:calc(50% + .5px); border-radius:0 } .irc__layer{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--wipe)) 0 0); will-change:clip-path; } .irc__bar{ position:absolute; top:0; height:100%; width:2.5px; left:calc(var(--wipe) + .25px); translate:-50% 0; background:#fb4102; box-shadow:0 4px 4.6px rgba(251,65,2,.37); /* the line takes the pointer now, so the resize cursor can appear over it. A press here still reaches the stage by bubbling, so dragging is unchanged. */ pointer-events:auto; cursor:var(--cursor-ew), auto; } /* the line is two and a half pixels wide, which no one can reliably hover. This is the same line with five pixels of air either side — invisible, and only there to be pointed at. */ .irc__bar::before{ content:""; position:absolute; top:0; bottom:0; left:-5px; right:-5px; cursor:inherit; } .irc__handle{ position:absolute; top:50%; left:var(--wipe); translate:-50% -50%; width:52px; height:52px; padding:0; border-radius:99px; background:rgba(0,0,0,.16); border:2px solid #3c3c3c; -webkit-backdrop-filter:blur(2.1px); backdrop-filter:blur(2.1px); display:flex; align-items:center; justify-content:center; gap:0; touch-action:none; /* the pointer the brief asks for. The handle is a