/* ========================================================================== BaiSed LINE MINI App — design system -------------------------------------------------------------------------- Every value here is LIFTED from the Flutter app, not designed fresh. The requirement is that the web surface reads as the same product. Sources: lib/theme/theme.dart colours, fonts, radii lib/features/homePage/baisedCampaign.dart:4068 the card recipe lib/features/homePage/lockable_campaign_card.dart the lock badge lib/features/brandsSpecific/brand_lucky_draw_page.dart:6380 the entries pill Fonts are the app's own files, already served from public/fonts/. Switzer is declared in public/fonts.css but Anuphan is NOT, so this file declares both rather than editing that shared stylesheet. ========================================================================== */ /* ---- Latin: Switzer ---------------------------------------------------- */ @font-face { font-family:'Switzer'; src:url('../../fonts/Switzer-Regular.otf') format('opentype'); font-weight:400; font-display:swap } @font-face { font-family:'Switzer'; src:url('../../fonts/Switzer-Medium.otf') format('opentype'); font-weight:500; font-display:swap } @font-face { font-family:'Switzer'; src:url('../../fonts/Switzer-Semibold.otf') format('opentype'); font-weight:600; font-display:swap } @font-face { font-family:'Switzer'; src:url('../../fonts/Switzer-Bold.otf') format('opentype'); font-weight:700; font-display:swap } @font-face { font-family:'Switzer'; src:url('../../fonts/Switzer-Extrabold.otf') format('opentype'); font-weight:800; font-display:swap } @font-face { font-family:'Switzer'; src:url('../../fonts/Switzer-Black.otf') format('opentype'); font-weight:900; font-display:swap } /* ---- Thai fallback: Anuphan (theme.dart _thaiFontFallback) ------------- */ @font-face { font-family:'Anuphan'; src:url('../../fonts/Anuphan-Regular.ttf') format('truetype'); font-weight:400; font-display:swap } @font-face { font-family:'Anuphan'; src:url('../../fonts/Anuphan-Medium.ttf') format('truetype'); font-weight:500; font-display:swap } @font-face { font-family:'Anuphan'; src:url('../../fonts/Anuphan-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap } @font-face { font-family:'Anuphan'; src:url('../../fonts/Anuphan-Bold.ttf') format('truetype'); font-weight:700; font-display:swap } /* Anuphan ships no 800/900 face. Mapping them onto Bold keeps the w800/w900 text in the app (entries pill) from synthesising a smeared faux-bold. */ @font-face { font-family:'Anuphan'; src:url('../../fonts/Anuphan-Bold.ttf') format('truetype'); font-weight:800; font-display:swap } @font-face { font-family:'Anuphan'; src:url('../../fonts/Anuphan-Bold.ttf') format('truetype'); font-weight:900; font-display:swap } :root{ /* theme.dart */ --primary:#F6BE3B; /* _baisedYellow */ --ink:#000000; /* _baisedBlack */ --white:#FFFFFF; --bg:#F6F7F9; /* header gradient end stop / scaffold wash */ --brand-red:#F23540; --brand-orange:#FF5400; --brand-yellow:#FEB600; --heat:#FA6A15; /* baisedBrandHeatBlend */ --heat-grad:linear-gradient(135deg,#FB7A35,#F06318); --pastel-grad:linear-gradient(135deg,#FF6B6B,#FFBD71,#EEDC82); --header-grad:linear-gradient(180deg,#FF6B6B 0%,#FFBD71 40%,#EEDC82 70%,#F6F7F9 100%); --muted:rgba(0,0,0,.60); --faint:rgba(0,0,0,.45); --line:rgba(0,0,0,.08); --grey50:#FAFAFA; /* Colors.grey.shade50, card image bg */ /* geometry, from the widgets */ --r-card:16px; /* card radius */ --r-img:18px; /* card image radius */ --r-pill:14px; /* entries pill radius */ --r-btn:8px; /* elevatedButtonTheme */ --r-badge:20px; /* lock badge */ --pad-page:16px; /* page horizontal padding */ --shadow:0 2px 6px rgba(0,0,0,.06); /* Per-draw theme colour. Every draw doc carries `themeColor`; app.js sets this on the card / page. The heat blend is the app's own default. */ --theme:#FA6A15; --sans:'Switzer','Anuphan',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; } img{max-width:100%;display:block} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} /* ---- app shell --------------------------------------------------------- */ /* Inside LINE this is always a phone-width webview, so the shell fills the screen and none of the desktop rules below ever apply. But the same URL opens on a laptop (staging, QA, a shared link), and a 520px white column floating in a near-white page reads as broken rather than as a phone app. On a wide viewport we therefore deepen the page behind it and give the shell a real edge, so it presents as a deliberate device frame. */ .shell{ max-width:520px;margin:0 auto;min-height:100%; background:var(--white); display:flex;flex-direction:column; padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); } @media (min-width:600px){ body{background:#E8EAEE} .shell{ min-height:100vh; box-shadow:0 0 0 1px rgba(26,26,46,.09), 0 18px 50px rgba(26,26,46,.13); } .tabs{box-shadow:0 0 0 1px rgba(26,26,46,.09)} } .shell.no-tabs{padding-bottom:0} .page{flex:1;padding:0 var(--pad-page)} /* No stat bar on this page, so the content owns the inset. */ .shell.no-tabs > .page:first-child{padding-top:calc(18px + env(safe-area-inset-top,0px))} .page.wash{background:var(--bg)} /* ---- section heading --------------------------------------------------- */ .sec{ font-size:13px;font-weight:800;letter-spacing:.02em; color:var(--muted);margin:18px 0 10px; } /* ---- the lucky-draw home card ----------------------------------------- REBUILT to match the app. The first pass used the PROMOTION card recipe (baisedCampaign.dart:4068 — a 120x120 thumbnail beside a text column). A lucky draw uses a completely different card: a section title OUTSIDE the card, then a gradient-edged card whose top is a full-bleed hero image and whose bottom is a white strip carrying the brand row, a four-box countdown, the entry ticket with the count, and the like count. Border edge: heroGradient.outer on the draw doc, e.g. Golden Mountain's #FFDB62 against its #DD1F22 primary. Falls back to the theme colour. */ .ldsec{margin:22px 0 26px} .ldsec:active .ldsec__title{opacity:.7;transition:opacity .09s ease} .ldsec__title{ font-size:21px;font-weight:800;letter-spacing:-.02em; margin:0 2px 12px;line-height:1.25; } .ldcard{ display:block;overflow:hidden; /* SQUIRCLE, not a rounded rect. Every draw card in the app is a figma_squircle SmoothRectangleBorder at cornerRadius 28 with cornerSmoothing 1.0 (baisedCampaign.dart:6770 and :6790). That is a superellipse; CSS's plain border-radius is a circular arc, and at this size the difference is obvious at all four corners. THE NUMBERS ARE FITTED, AND THE CSS UNIT IS NOT WHAT IT LOOKS LIKE. `corner-shape: superellipse(s)` takes s as a LOG2 EXPONENT: the actual superellipse exponent is 2^s. superellipse(1) is a circle, and superellipse(4.3) is exponent 19.7 — a corner so square it looks unrounded. Reading s as the exponent directly is the trap; it silently produces a near-rectangle. Both values below were fitted by measuring the browser's ACTUAL rendered silhouette (hit-testing the painted box row by row) against the real figma_squircle path sampled from the Dart source, not from a formula. FALLBACK FIRST, on purpose. `corner-shape` is recent and a LINE in-app WebView on older Android will not have it. Those browsers get r32, the best plain circular approximation (max error 1.9px) — which is also why .sq-16/.sq-24 further down inflate by ~1.2x. */ border-radius:32px; /* GRADIENT ring, not a flat border. The app draws a `borderGradient` around every draw card; a solid edge was the most obviously wrong thing about the first version. padding-box/border-box gives a real gradient stroke. */ border:3px solid transparent; background: linear-gradient(var(--white),var(--white)) padding-box, linear-gradient(120deg,var(--ring-a,var(--theme)),var(--ring-b,var(--edge,var(--theme)))) border-box; /* The FACE's ambient shadow: black 8%, blur 10, offset (0,2) (baisedCampaign.dart:6805). Dropped entirely on press. */ box-shadow:0 2px 10px rgba(0,0,0,.08); /* 80ms easeOut, the AnimatedContainer's own duration and curve. */ transition:transform .08s ease-out, box-shadow .08s ease-out; } /* The real thing, where the browser can draw it. r64 + superellipse(2.2) (exponent 2^2.2 = 4.6) tracks the true figma_squircle r28 s1.0 outline to a maximum error of 0.61px, measured against the painted pixels. The pair is load-bearing: the radius is more than double the Flutter number because at cornerSmoothing 1.0 Figma's corner runs `(1 + smoothing) * radius` = 56px along each edge, and the high exponent is what keeps that long run flat instead of ballooning into a stadium. Changing one without refitting the other breaks the match. */ @supports (corner-shape: superellipse(2.2)){ .ldcard{ border-radius:64px; corner-shape:superellipse(2.2); } } /* ---- the WINNERS-ANNOUNCED card (baisedCampaign.dart:6516) -------------- A different card from the hero one, not a restyled badge: 8px padding around a 120x120 thumbnail, a 12px gap, and a 120px-tall text column. Its container radius is 24, NOT the active card's 28. Both squircle pairs scale linearly from the fitted r28 values (64 / superellipse 2.2), because a smoothing-1.0 corner and a fixed-exponent superellipse are both linear in their radius: 64 * 24/28 = 55, and the circular fallback 32 * 24/28 = 27. */ .ldcard--ended{border-radius:27px} .ldend{display:flex;align-items:flex-start;gap:12px;padding:8px} .ldend__art{ width:120px;height:120px;flex:none;object-fit:cover; background:var(--grey50); /* Flutter cornerRadius 16, smoothing 1.0 — same linear scaling: 64 * 16/28 = 37, fallback 32 * 16/28 = 18. */ border-radius:18px; } .ldend__col{ flex:1;min-width:0;height:120px; display:flex;flex-direction:column;align-items:flex-start; } /* padding 8/4, radius 8, #FFF3E0 on #FF6D00 — fixed values, not the theme. */ .ldend__tag{ padding:4px 8px;border-radius:8px;background:#FFF3E0; font-size:12px;font-weight:700;color:#FF6D00; } .ldend__title{ margin-top:8px;max-width:100%; font-size:14px;font-weight:600;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .ldend__sub{ max-width:100%;font-size:11px;font-weight:400;color:rgba(0,0,0,.7); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* `const Spacer()` — the count line is pinned to the bottom of the 120px column, not stacked under the subtitle. */ .ldend__n{ margin-top:auto;display:flex;align-items:center;gap:6px; font-size:12px;font-weight:600;color:var(--theme); } .ldend__n svg{width:16px;height:16px;flex:none;fill:currentColor} @supports (corner-shape: superellipse(2.2)){ .ldcard--ended{border-radius:55px;corner-shape:superellipse(2.2)} .ldend__art{border-radius:37px;corner-shape:superellipse(2.2)} } /* PRESS = A BUTTON BEING PUSHED, NOT A CARD BEING SHRUNK. The previous scale(.972) was wrong in kind, not just degree. The app builds the card as a Stack (baisedCampaign.dart:6757): behind the face sits a slab filled with the SAME ring gradient, inset 2px on each side, its top pushed 4px down and its bottom hanging 4px BELOW the face. Only that bottom overhang is visible, and it is the thicker edge that makes the card read as a physical object. On press the SLAB STAYS PUT and the face slides down 4px onto it, losing its ambient shadow. The 3D edge collapses to flat, which is exactly the feel of pressing a key. Nothing scales. The slab needs .ld3d as a host because .ldcard carries overflow:hidden for the hero art and would clip an overhanging pseudo-element of its own. */ .ld3d{position:relative} .ld3d::before{ content:'';position:absolute;z-index:0; top:4px;left:2px;right:2px;bottom:-4px; background:linear-gradient(120deg, var(--ring-a,var(--theme)), var(--ring-b,var(--ring-a,var(--theme)))); border-radius:32px; } .ld3d > .ldcard{position:relative;z-index:1} .ld3d:active > .ldcard{transform:translateY(4px);box-shadow:none} /* Must come AFTER the base rule above: an @supports block placed earlier in the file loses the border-radius to it and leaves a superellipse at the fallback radius, which is a different shape from the face it sits behind. */ @supports (corner-shape: superellipse(2.2)){ .ld3d::before{border-radius:64px;corner-shape:superellipse(2.2)} } /* The winners-announced card has NO depth slab — the app gives it a plain 10px downward nudge instead (baisedCampaign.dart:6528) and a lighter resting shadow (0x0F000000, blur 6, offset 0,2). */ .ldcard--ended{box-shadow:0 2px 6px rgba(0,0,0,.06)} .ldcard--ended:active{transform:translateY(10px);box-shadow:none} @media (prefers-reduced-motion:reduce){ .ldcard{transition:none} } .ldcard__hero{ display:block;width:100%;aspect-ratio:2/1;object-fit:cover; background:var(--grey50); /* NO radius of its own. The only rounding is the card's own clip, so the art never carries a second, mismatched curve inside it. */ border-radius:0; /* Several of these banners ship a TRANSPARENT rounded-corner margin baked into the PNG. Drawn at exact size those corners let the card's fill show through and read as a curve inside a curve. The app pushes them off with a slight zoom (baisedCampaign.dart:1527 and :2797); `--img-scale` carries the doc's own value, defaulting to no zoom. */ transform:scale(var(--img-scale,1)); transform-origin:center; } .ldcard__body{padding:10px 14px 12px} .ldcard__row{display:flex;align-items:center;gap:8px;min-height:52px} .ldcard__logo{ width:38px;height:38px;flex:none;border-radius:50%; object-fit:contain;background:var(--white); } /* WORDMARK mode. The image is the title (BaiSed ships a gift mark + text as one 669x195 lockup), so it gets real width and height rather than being crushed into the circular-logo slot. */ .ldcard__wordmark{ height:34px;width:auto;max-width:62%;flex:none; object-fit:contain;object-position:left center; } .ldcard__brand{ font-size:15.5px;font-weight:700;flex:1 1 auto;min-width:56px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Four separate boxes, number over unit, exactly as the app draws them. */ .cd{display:flex;align-items:center;gap:3px;flex:none} /* 3D BOXES, not flat. `_box` (brand_lucky_draw_page:14636) gives every cell TWO hard shadows — blurRadius 0, offsets (0,3) and (0,4.5) — in progressively darker shades of the box colour, which is what makes the row read as raised tiles rather than printed swatches. Golden Mountain's home card passes boxColor #FFDB62 (baisedCampaign:7117), so the lips are Color.lerp(#FFDB62, black, 0.14 / 0.26) = #DBBC54 and #BDA248 — a plain multiply, computed once here rather than eyeballed. The old #FFD84D with a single 1px black-6% shadow was neither the right yellow nor a lip. Numbers AND units are the draw's accent (numberColor/unitColor both `accent` for GM, :7101 and :7128) — red on yellow, not the dark brown that was here. The separators take the BOX colour so they read as spacing, not punctuation (separatorColor, :7134). */ .cd i{ /* Sized so all four boxes plus the logo still leave room for a Thai brand name on a 375px screen. At min-width 46 the row overflowed and the name truncated to two characters. */ font-style:normal;background:var(--cd-box,#FFDB62); /* compact:true -> radius 8 and padding 4/2. */ border-radius:8px;min-width:36px;padding:4px 2px;text-align:center; display:flex;flex-direction:column;line-height:1.05; box-shadow:0 3px 0 var(--cd-sh1,#DBBC54), 0 4.5px 0 var(--cd-sh2,#BDA248); } .cd i b{font-size:18px;font-weight:900;line-height:1;color:var(--cd-num,var(--theme))} .cd i span{ font-size:10px;font-weight:600;margin-top:1px; color:var(--cd-unit,var(--theme)); } /* `separatorColor ?? labelColor` — the card's ink at 70%, not the box fill. Golden Mountain is the one card that passes its yellow here. */ .cd s{text-decoration:none;font-weight:900;color:var(--cd-sep,var(--cd-box,#FFDB62));font-size:14px} /* The house draw's countdown: cream boxes, numbers filled by the warm pastel gradient rather than a flat brand colour (baisedCampaign.dart:5428). */ /* The house draw passes NO boxColor, so `_box` falls back to the cream #FFF6E5 with its own pair of lips (#E6D5B3 / #D4C2A1) and a black45 unit — the branded yellow and red would be wrong on it. */ .cd--pastel{--cd-box:#FFF6E5;--cd-sh1:#E6D5B3;--cd-sh2:#D4C2A1;--cd-unit:rgba(0,0,0,.45)} .cd--pastel i{background:var(--cd-box)} .cd--pastel i b{ background:linear-gradient(180deg,#FF6B6B,#FFBD71,#EEDC82); -webkit-background-clip:text;background-clip:text;color:transparent; } /* Closed / winners-pending badge, shown instead of the countdown. NOT a bespoke chip. The app deliberately renders this slot with the SAME chrome as ONE countdown cell (baisedCampaign.dart:5822) — same fill, same 8px radius, same two HARD offset shadows, same value-over-unit stack — so the card reads as the same card, just stopped. The green pill this replaces was invented here and matched nothing in the app. Fill defaults to the countdown's cream #FFF6E5 and the ink to the draw's own accent; --cd-box / --cd-ink / --cd-sh1 / --cd-sh2 carry the two per-brand overrides, set in index.html. */ .cd--closed{ /* .cd is a flex row, so without resetting the direction the label and the date sat side by side instead of stacking as the app draws them. */ display:flex;flex-direction:column;gap:0; /* RIGHT-ALIGNED. The live countdown's last cell ends flush with the card's right padding, so this single box has to land where that cell ENDED, not where the first one began (baisedCampaign.dart:5851). Left-aligned it read as floating in the middle of the row. */ margin-left:auto; background:var(--cd-box,#FFF6E5); border-radius:8px; padding:4px 8px;text-align:center; /* blurRadius 0 in Flutter: a hard stacked 3D lip, not a soft shadow. */ box-shadow:0 3px 0 var(--cd-sh1,#E6D5B3), 0 4.5px 0 var(--cd-sh2,#D4C2A1); } .cd--closed b{ display:block;font-size:15px;font-weight:900;line-height:1; color:var(--cd-ink,var(--theme)); } .cd--closed span{ display:block;margin-top:1px;font-size:9px;font-weight:600; color:var(--cd-ink,var(--theme));opacity:.85; } /* NO divider above the entries row. There is no Divider anywhere in _BrandLuckyDrawHomeCard's tree — the brand row and the entry/like row are two children of the same Column with plain spacing between them. The rule here was invented and cut the card in half. Kept the vertical rhythm the padding gave, so removing the line does not close the gap. */ .ldcard__row2{ display:flex;align-items:center;gap:8px;margin-top:20px; } .ldcard__ticket{height:34px;width:auto;flex:none} .ldcard__n{font-size:23px;font-weight:900;color:var(--theme);line-height:1} .ldcard__likes{ /* Count LEFT of the heart with a 4px gap, 16px w500 grey.shade600 (baisedCampaign.dart:7577). It was 17px w600 in --faint with a 6px gap. */ margin-left:auto;display:flex;align-items:center;gap:4px; } .ldcard__likes .n{font-size:16px;font-weight:500;color:#757575} .ldcard__likes .heart{ width:28px;height:28px;flex:none;display:block; /* _kBrandLuckyDrawGradient, centerLeft -> centerRight. */ background:linear-gradient(90deg,#FFAB70,#FF8989); -webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat; mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat; } .sk .ldcard__hero{background:rgba(0,0,0,.06)} /* ---- tag chip (padding 8/4, radius 8, 12px w600) ---------------------- */ .tag{ display:inline-block;align-self:flex-start; padding:4px 8px;border-radius:8px; font-size:12px;font-weight:600; background:color-mix(in srgb,var(--theme) 12%,transparent); color:var(--theme); } /* ---- entries pill, from brand_lucky_draw_page.dart:6380 --------------- */ .entries{ display:flex;align-items:center;gap:4px; background:color-mix(in srgb,var(--theme) 8%,transparent); border-radius:var(--r-pill); padding:12px 14px;margin-bottom:14px; } /* The app draws the draw's own `entryTicketImage` beside the count (EntryCountCard). Optional: absent art simply collapses the slot. */ .entries__ticket{width:56px;height:auto;flex:none;margin-right:2px} .entries__label{flex:1;font-size:13px;font-weight:800;color:var(--theme)} .entries__n{font-size:22px;font-weight:900;line-height:1;color:var(--theme)} .entries__unit{font-size:11px;font-weight:700;color:color-mix(in srgb,var(--theme) 70%,transparent)} /* ---- hero (draw detail header) ---------------------------------------- */ .hero{ border-radius:var(--r-card);overflow:hidden;margin:14px 0; background:var(--theme);color:var(--white); box-shadow:var(--shadow); } .hero__img{width:100%;aspect-ratio:2.2;object-fit:cover;background:var(--grey50)} .hero__body{padding:14px 16px} .hero__brand{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85} .hero__prize{font-size:20px;font-weight:800;line-height:1.25;margin-top:4px} .hero__cd{ display:inline-block;margin-top:10px;padding:4px 10px;border-radius:999px; background:rgba(255,255,255,.22);font-size:12px;font-weight:600; } /* ---- info rows --------------------------------------------------------- */ .row{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)} .row:last-child{border-bottom:none} .row__ic{ width:32px;height:32px;flex:none;border-radius:9px; background:color-mix(in srgb,var(--theme) 10%,transparent); display:flex;align-items:center;justify-content:center;font-size:15px; } .row__m{flex:1;min-width:0} .row__m b{display:block;font-size:14px;font-weight:600} .row__m span{display:block;font-size:12px;color:var(--faint)} .row__amt{font-weight:800;font-size:14px;color:var(--theme);white-space:nowrap} /* ---- buttons (radius 8, primary yellow, black label, w600) ------------ */ .btn{ display:block;width:100%;text-align:center; padding:14px;border-radius:var(--r-btn); background:var(--primary);color:var(--ink); font-size:15px;font-weight:600; margin-top:12px; } .btn:active{filter:brightness(.94)} .btn[disabled]{opacity:.45;pointer-events:none} .btn--ghost{background:var(--white);border:1.5px solid var(--line);color:var(--ink)} .btn--theme{background:var(--theme);color:var(--white)} .btn--line{background:#06C755;color:var(--white)} .btn--dark{background:var(--ink);color:var(--white)} /* ---- bottom tab bar ---------------------------------------------------- */ /* ---- bottom nav, from lib/widgets/navigationBar.dart ------------------- The app's own icon ASSETS, copied to public/assets/icons/nav/, not emoji stand-ins: homeIn/homeOut, accountIn/accountOut, scanIconWhite. The app has five items (home, rewards, scan, trophy, account); this surface has three, because rewards and the leaderboard are not part of it. The scan control is the app's raised FAB: a 70px circle with a 6px white ring and the yellow fill (navigationBar.dart:506-511), overlapping the bar. */ .tabs{ position:fixed;left:0;right:0;bottom:0;z-index:30; max-width:520px;margin:0 auto; background:var(--white); /* THE CURVE. `BorderRadius.only(topLeft: 35, topRight: 35)` (navigationBar.dart:56-59). This is what makes the bar read as a floating sheet the feed scrolls behind, instead of a strip welded to the screen. */ border-radius:35px 35px 0 0; /* The app draws NO top border. It separates with a soft shadow instead (:62-68: black 8%, blur 8, offset 0,0). The 1px line that used to be here cut straight across the new corners and made them look like a mistake. */ box-shadow:0 0 8px rgba(0,0,0,.08); display:flex;align-items:flex-end; padding-bottom:env(safe-area-inset-bottom,0px); height:calc(62px + env(safe-area-inset-bottom,0px)); } .tabs a{ flex:1;text-align:center;padding:9px 0 10px; font-size:10px;font-weight:600;color:var(--faint); display:flex;flex-direction:column;align-items:center;gap:2px; } .tabs a.on{color:var(--primary)} .tabs a img{width:26px;height:26px;object-fit:contain;display:block} .tabs a.fab{ /* NO position:relative. The ring is positioned against `.tabs` itself, which is what the app does: the FAB is a sibling `Positioned(top: -18, left: 0, right: 0, child: Center(...))` inside the bar's own Stack (navigationBar.dart:241-246), not a child of a nav slot. Anchoring it to this instead made it collapse the moment the label came out, because the ring is out of flow and left the anchor with nothing to give it height. The stays as the middle flex slot and the tap target. */ justify-content:flex-end;padding-bottom:10px; } .tabs a.fab .ring{ /* THE OVERLAP. `Positioned(top: -18)` (navigationBar.dart:243): the circle's top edge sits exactly 18px above the bar's, so about a quarter of it breaks out and the rest sinks into the bar. -30px lifted it so far that it read as a separate floating button rather than one set into the bar. */ position:absolute;top:-18px;left:50%;transform:translateX(-50%); width:70px;height:70px;border-radius:50%; border:6px solid var(--white); /* #FEB600, this widget's own `baisedYellow` (navigationBar.dart:492). NOT theme.dart's _baisedYellow (#F6BE3B) that --primary carries: navigationBar declares its own hotter yellow and the FAB is the only thing using it. */ background:#FEB600; display:flex;align-items:center;justify-content:center; /* No shadow. The app's FAB has none (:506-511) — the 6px white ring is what separates it from the bar, and a drop shadow on top of that muddied it. */ } .tabs a.fab .ring img{width:30px;height:30px} /* NOT PORTED, deliberately: `_NavigationBarClipper` (navigationBar.dart:657) carves a 90x22 notch out of the bar's top edge under the FAB. It is dead code. The ClipPath sits INSIDE a Container whose decoration already paints the same white across the full rounded rect (:53-68), so the clip removes white from a region that is white underneath and nothing shows through. Reproducing it here would have needed a multi-layer CSS mask to render a difference the app itself does not render. */ /* ---- app-faithful primitives ------------------------------------------ Two things the first pass got wrong across the whole build. 1. SQUIRCLES. The app uses Flutter's ContinuousRectangleBorder in 36 places. That is a superellipse, not CSS's plain rounded rect, and the difference is visible at the corner of every button and field. `paint()` is not available in a LINE webview, so this approximates it the way iOS designers do on the web: a slightly larger radius than the Flutter value, which reads far closer than matching the number literally. 2. BUTTON COLOUR IS PER CONTEXT. `theme.dart`'s _baisedYellow is the ElevatedButton default, but real screens override it. The auth screen uses #FF6B6B with WHITE text (signUpLogIn.dart:1372), not yellow with black. Do not assume the theme default is what a given screen actually shows. */ /* Flutter radius 16 -> 20px here; radius 24 -> 28px. */ .sq-16{border-radius:20px} .sq-24{border-radius:28px} /* The auth field's gradient border, painted by _SquircleGradientBorderPainter (referralCodeScreen.dart:530) as #F23540 -> #FEB600 left to right, 2px. Reproduced with the padding-box/border-box trick so the stroke is a real gradient rather than a flat approximation. */ .field--auth{ /* radius 16 and a 2px stroke, both straight off _SquircleGradientBorderPainter(radius: 16, strokeWidth: 2) at :1351. It was 20 — the ~1.2x inflation .sq-16/.sq-24 use to fake a squircle with a circular arc. That convention does NOT apply here: this radius is painted directly, so the number is the number. */ border:2px solid transparent; border-radius:16px; background: linear-gradient(var(--white),var(--white)) padding-box, linear-gradient(90deg,#F23540,#FEB600) border-box; padding:14px 16px; width:100%;font:inherit;font-size:16px;margin:0; } .field--auth:focus{outline:none} /* ---- the sign-in hero (signUpLogIn.dart:1673) -------------------------- The screen is a full-bleed vertical gradient with the white gift lockup on it, and the form sits in a white sheet with heavily rounded TOP corners overlapping it. Same four stops and stops[] as the app; the last one is #F6F7F9 so it fades into the page ground rather than ending on a colour. */ .auth{ background:linear-gradient(180deg, #FF6B6B 0%, #FFBD71 40%, #EEDC82 70%, #F6F7F9 100%); min-height:100vh; } .auth__hero{ display:flex;align-items:center;justify-content:center;gap:14px; /* The sheet takes 60% of the screen (:1798), so the lockup centres in the 40% above it. */ height:40vh;min-height:220px; padding-top:env(safe-area-inset-top,0px); } .auth__logo{width:100px;height:100px;object-fit:contain;flex:none} .auth__word{ font-size:44px;font-weight:900;color:var(--white);letter-spacing:-.01em; line-height:1; } /* The app writes `ContinuousRectangleBorder(top: 32 * 2)` (:1806) — and the doubling is the tell. Flutter's ContinuousRectangleBorder UNDER-renders its radius: the corner it draws is far tighter than a circular radius of the same number, so authors routinely pass ~2x to get the curve they want. The author doubled 32 for exactly that reason, which means the INTENDED visual radius is about 32, not 64. My first pass took the 64 at face value and then scaled it AGAIN through the squircle fit (to 96), which is why the corners came out roughly three times too round. It is also the wrong shape family: ContinuousRectangleBorder is not figma_squircle, so the superellipse pairing fitted elsewhere on this surface does not transfer. A plain 32px arc is the honest match. */ .auth__sheet{ background:var(--white); border-radius:32px 32px 0 0; padding:40px 24px calc(40px + env(safe-area-inset-bottom,0px)); min-height:60vh; } /* `signInToBaised`, centred above the form. */ .auth__title{ font-size:24px;font-weight:900;color:var(--ink); text-align:center;margin-bottom:26px;line-height:1.25; } /* signUpLogIn.dart:1367-1377 — #FF6B6B, white label, min height 48, r24. */ /* minimumSize(double.infinity, 48), #FF6B6B on white, radius 24 (:1373-1379). 28 was the same mistaken inflation as the field's; on a 48px-tall button that also tipped it past a true pill. At 24 it is exactly half the height, which is the pill the app draws — no more. */ .btn--auth{ background:#FF6B6B;color:var(--white); border-radius:24px;min-height:48px; font-weight:600; } /* signUpLogIn.dart:1305-1322 — left aligned, 14px w600 grey800 title over a 12px grey600 example line, 8px gap before the field. */ .auth-head{margin:6px 0 8px} .auth-head b{display:block;font-size:14px;font-weight:600;color:#424242} .auth-head span{display:block;font-size:12px;color:#757575;margin-top:2px} .auth-note{font-size:12.5px;color:var(--muted);text-align:center;padding:18px 4px 0} .btn--auth{margin-top:24px} /* ---- OTP step, from signUpLogIn.dart `_stepTwo` (:1398) ---------------- */ .auth-row{display:flex;align-items:center;gap:4px;margin:2px 0 8px} .auth-back{font-size:22px;line-height:1;color:#9E9E9E;padding:4px 8px 4px 0} /* The phone step's title block, with the back arrow beside it rather than above: the arrow and the two-line title read as one row. */ .auth-head--back{display:flex;align-items:flex-start;gap:4px} .auth-head--back .auth-back{margin-top:-2px} .auth-row b{font-size:16px;font-weight:600;color:#616161} .auth-sent{font-size:12.5px;color:var(--muted);margin-bottom:12px} .auth-link{ display:block;width:100%;text-align:center;margin-top:16px; font-size:14px;font-weight:500;color:#2196F3;padding:8px; } .auth-link[disabled]{color:#BDBDBD;pointer-events:none} /* The real input sits invisibly over the boxes so one-time-code autofill has a single field to fill, which is exactly how the app stacks an invisible TextField over its six painted boxes. */ .otpx{position:relative;height:55px} .otpx input{ position:absolute;inset:0;width:100%;height:100%; opacity:0;border:0;background:none;font-size:16px; letter-spacing:2em;z-index:2; } .otpx input:focus{outline:none} .otpx__boxes{display:flex;justify-content:space-evenly;height:100%;pointer-events:none} .otpx__boxes i{ width:45px;height:55px;flex:none; display:flex;align-items:center;justify-content:center; font-style:normal;font-size:20px;font-weight:700; color:#F23540; /* the app's digit colour, not black */ border:2px solid transparent; /* Flutter r16. The squircle overshoot that helps on wide elements over-rounds a 45px box into a pill, so this one takes the literal value. */ border-radius:16px; background: linear-gradient(var(--white),var(--white)) padding-box, linear-gradient(135deg,#F23540,#FEB600) border-box; /* DIAGONAL here */ } /* Active box: solid black border and a black caret (the app swaps the gradient painter for _SquircleSolidBorderPainter). */ .otpx__boxes i.on{ border-radius:16px; background:linear-gradient(var(--white),var(--white)) padding-box, linear-gradient(#000,#000) border-box; } .otpx__boxes i.on:after{content:'';width:2px;height:20px;background:#000;animation:caret 1s step-end infinite} @keyframes caret{50%{opacity:0}} /* ---- forms ------------------------------------------------------------- */ .field{ width:100%;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-btn); font:inherit;font-size:16px;background:var(--white);margin-bottom:10px; } .field:focus{outline:none;border-color:var(--primary)} .otp{display:flex;gap:8px;margin-bottom:12px} .otp input{ flex:1;min-width:0;height:52px;text-align:center; border:1.5px solid var(--line);border-radius:10px; font:inherit;font-size:22px;font-weight:700;background:var(--white); } .otp input:focus{outline:none;border-color:var(--primary)} /* ---- states ------------------------------------------------------------ */ .centre{text-align:center;padding:28px 8px} .centre .em{font-size:44px;line-height:1} .centre b{display:block;font-size:17px;font-weight:700;margin-top:12px} .centre p{font-size:13px;color:var(--muted);margin-top:8px} .spinner{ width:52px;height:52px;border-radius:50%;margin:36px auto 20px; border:4px solid rgba(0,0,0,.07);border-top-color:var(--primary); animation:spin 900ms linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}} /* Page-load splash (index.html, draw.html, /cintage/): the website's logo with a thin sliding bar, over the whole screen, instead of a spinner at the top of an empty white column. It sits inside #main, so the first render's main.replaceChildren() removes it and nothing has to hide it. BaiSed branding only: everyone sees it before the gating check has run. Below the LINE "Join on our website" screen (z-index 1000). */ .splash{ position:fixed;inset:0;z-index:900; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; background:var(--white); } .splash__logo{width:min(190px,52vw);height:auto;animation:splash-in .35s ease-out both} .splash__bar{width:120px;height:3px;border-radius:3px;background:rgba(0,0,0,.07);overflow:hidden} .splash__bar i{ display:block;width:40%;height:100%;border-radius:inherit;background:var(--primary); animation:splash-slide 1.2s ease-in-out infinite; } @keyframes splash-in{from{opacity:0}} @keyframes splash-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}} @media (prefers-reduced-motion:reduce){ .splash__logo{animation:none} .splash__bar i{animation-duration:2.4s} } /* Laptop: the landing page's own background, so the splash hands over without a flash. Same query as WIDE in draw_page.js. */ @media (min-width:900px) and (hover:hover) and (pointer:fine){.splash{background:#F7F7F9}} .steps{font-size:13px;padding:0 4px} .steps div{padding:7px 0;color:var(--faint)} .steps div.done{color:var(--ink);font-weight:600} .steps div.now{color:var(--primary);font-weight:700} .empty{text-align:center;padding:44px 16px;color:var(--faint);font-size:13px} .tips{background:color-mix(in srgb,var(--primary) 14%,transparent);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--muted)} .tips b{display:block;color:var(--ink);margin-bottom:5px;font-size:12px} .tips li{list-style:none;padding-left:13px;position:relative;padding-top:2px} .tips li:before{content:'•';position:absolute;left:2px} /* the "credited draws" list on the scan result — one row per draw, because a single receipt can credit several campaigns at once */ .credited{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px} .credited__r{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line)} .credited__r:last-child{border-bottom:none} .credited__sw{width:5px;height:30px;border-radius:3px;flex:none;background:var(--row-theme,var(--heat))} .credited__m{flex:1;min-width:0} .credited__m b{display:block;font-size:13px;font-weight:600} .credited__m span{font-size:11px;color:var(--faint)} .credited__p{font-weight:900;font-size:15px;color:var(--row-theme,var(--heat))} .receipt{background:rgba(0,0,0,.03);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--muted);margin-top:12px} .receipt div{display:flex;justify-content:space-between;gap:12px;padding:3px 0} .receipt b{color:var(--ink);font-weight:600;text-align:right} .big{text-align:center;padding:18px 0 6px} .big .em{font-size:44px;line-height:1} .big .n{font-size:42px;font-weight:900;line-height:1.1;margin-top:6px;color:var(--primary)} .big .l{font-size:13px;font-weight:600;color:var(--muted)} .lock{ display:inline-flex;align-items:center;gap:5px; background:rgba(0,0,0,.62);color:var(--white); border-radius:var(--r-badge);padding:6px 12px; font-size:12px;font-weight:600; } /* The app's slide-in toast (SlideToastService / _SlideToast). Anchored to the RIGHT EDGE with only the left corners rounded, so it reads as something that slid in from off-screen rather than a floating pill. */ .stoast{ position:fixed;right:0;z-index:300; top:calc(env(safe-area-inset-top,0px) + 60px); /* JS overrides when a .topbar is on screen */ display:flex;align-items:center;gap:12px; max-width:80vw; /* MediaQuery.size.width * 0.8 */ padding:12px 16px; background:#fff; border-radius:12px 0 0 12px; /* left corners only */ box-shadow:0 4px 10px rgba(0,0,0,.15); cursor:pointer; /* Tween(begin: Offset(1,0), end: zero) over 400ms on Curves.easeOutCubic. */ transform:translateX(100%); transition:transform .4s cubic-bezier(.215,.61,.355,1); } .stoast.is-in{transform:translateX(0)} .stoast__ic{flex:none;width:24px;height:24px;color:#FEB600} .stoast__ic.is-error{color:#F44336} .stoast__ic svg{width:24px;height:24px;fill:currentColor;display:block} .stoast__tx{ min-width:0;color:rgba(0,0,0,.87);font-weight:600;font-size:14px;line-height:1.35; /* maxLines: 2 with an ellipsis overflow */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } @media (prefers-reduced-motion: reduce){ .stoast{transition:none;transform:translateX(0)} } .hide{display:none !important} /* Legacy-browser fallback. LINE's in-app WebView on older Android predates color-mix(); without this the tinted surfaces render transparent and the theme-coloured text sits on bare white. */ @supports not (color: color-mix(in srgb, red 50%, transparent)){ .entries{background:rgba(0,0,0,.05)} .tag{background:rgba(0,0,0,.06)} .row__ic{background:rgba(0,0,0,.06)} .tips{background:rgba(246,190,59,.16)} .card__unit,.entries__unit{color:var(--theme);opacity:.7} } /* ═══════════════════════════════════════════════════════════════════════════ THE DRAW DETAIL PAGE Rebuilt from brand_lucky_draw_page.dart. The previous version was a flat tinted panel over a list of rows, which shares almost nothing with the app. Structure now mirrors `_buildDrawContent` (:1806): layered hero, pill tab bar with two swipeable pages, and an always-present sticky bottom bar. ═══════════════════════════════════════════════════════════════════════════ */ .dwrap{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))} /* ---- hero (_buildHero :2202) ------------------------------------------- */ .dhero{ position:relative;overflow:hidden; /* SQUARE top corners on purpose: the hero reaches the top of the screen and the device's own corner is meant to be the only curve there. */ border-radius:0; /* heroGradient center -> outer, top to bottom. */ background:linear-gradient(180deg,var(--hero-a,var(--theme)),var(--hero-b,var(--theme))); min-height:290px; } /* LOCKUP MODE. The artwork already carries the brand logo and the campaign title, so it fills the hero edge to edge at its OWN aspect ratio (set from naturalWidth/Height once loaded) and nothing but the countdown is drawn over it. Overscaled very slightly to hide the transparent edge margin these PNGs ship with, which otherwise lets the gradient peek through at the sides. */ /* THE WHITE LIP COVERS THE BOTTOM 40px OF THE HERO (see .dhero__lip: bottom:-60px, height:100px), which was hiding the bottom of the artwork underneath it. Reserve that strip as padding INSTEAD of letting the art run into it: content-box sizing means aspect-ratio now describes the ART AREA only, and the 40px is added below it. The hero grows by 40px, the art ends exactly where the white begins, and nothing is lost off the bottom of the image. */ .dhero--art{min-height:0;box-sizing:content-box;padding-bottom:40px} /* Anchored to the BOTTOM, not centred: the hero box is intentionally shorter than the artwork so the app-only camera safe area at the top is cropped away (see HERO_SAFE_TOP in draw.html). Centring would eat the strip from both ends and clip the bottom of the composition instead. */ .dhero__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%} /* Stop the art at the lip's top edge. An EXPLICIT height, not `auto` with a `bottom`: for an absolutely positioned REPLACED element (an ) `height:auto` resolves to the image's intrinsic height and the `bottom` offset is simply ignored, so the art kept running its full length under the white. `100%` here is the hero's padding box, and subtracting the lip strip leaves exactly the content box the aspect-ratio sized. */ .dhero--art .dhero__art{height:calc(100% - 40px)} /* ART SHOWN WHOLE (`heroArtAspect`, Cintage; draw_page.js `tuck`, owner 2026-10-06): the app's geometry (_buildHero :2669). The hero is the art's own shape, uncropped; the art fills all of it; the white body's edge rides 15px up over the art's bottom (Positioned bottom -120, height 135, :2728), so the lip's rounded top-right corner shows art, not the hero gradient; and the like capsule sits ON the hero's bottom edge (bottom:0, :2749). The 0.6% zoom hides the art's 2px transparent left edge (scale 1.006, :2465). */ .dhero--tuck{padding-bottom:0} .dhero--tuck .dhero__art{height:100%;transform:scale(1.006)} .dhero--tuck .dhero__lip{bottom:-85px} .dhero--tuck .dhero__like{bottom:0;transform:none} /* Plain backdrop art: ~5% overscale to push the transparent edge margin these PNGs carry off-screen, so no gradient shows as a thin border (:2053). Lockup art is drawn at exact size, or the baked title gets clipped. */ .dhero__art.over{width:105%;height:105%;left:-2.5%;top:-2.5%} /* In lockup mode the countdown anchors to the BOTTOM of the hero, in the clear space under the baked title, rather than sitting on top of the artwork. */ /* Only TRUE lockup art bottom-anchors the countdown into the clear space under the baked title. Plain backdrop art keeps the normal logo/title/countdown column on top of it. */ .dhero--lockup .dhero__body{ position:absolute;left:0;right:0;bottom:0; max-width:100%; /* 54px, the app's own number (:2347). Not a free choice: the title is baked into the artwork and ends around 63% down the hero, so the countdown block has to start below that or the "ปิดรับสิทธิ" label lands on top of the painted "X TEETEE POR". 78px put the block at 57% — inside the title — and the only reason that ever looked acceptable is that the hero was being cropped, which shrank the artwork and moved the title up with it. With the aspect ratio now tracking the art, the app's 54 is what clears it. */ padding:0 24px 66px; } /* The reward/cover image, right aligned and deliberately half tucked BEHIND the white lip below it. */ /* The "stand" backdrop, sitting at the bottom of the hero BEHIND the cover. */ .dhero__stand{ position:absolute;left:0;right:0;bottom:0;width:100%; height:44%;object-fit:cover;object-position:bottom;opacity:.95; } .dhero__cover{ position:absolute;right:-36px;bottom:-46px; height:230px;width:auto;object-fit:contain;pointer-events:none; } /* RESULTS: the prize is the only thing in the hero, so it sits CENTRED on the podium rather than tucked bottom-right beside a title column that no longer exists. The stand is 44% tall from the bottom, so lifting the prize to 24% lands it on the podium's face instead of half under the white lip. */ .dhero--results .dhero__cover{ left:50%;right:auto;bottom:24%; transform:translateX(-50%); height:190px; } /* The white container lip. Only the TOP-RIGHT corner is rounded, at 28px, and it paints OVER the cover image so the image reads as sliding underneath. */ .dhero__lip{ position:absolute;left:0;right:0;bottom:-60px;height:100px; background:var(--white); border-top-right-radius:28px; pointer-events:none; } .dhero__body{ position:relative;z-index:2; padding:calc(18px + env(safe-area-inset-top,0px)) 16px 54px 24px; max-width:66%; } .dhero__logo{height:56px;width:auto;object-fit:contain;margin-bottom:8px} .dhero__brand{ font-size:12px;font-weight:800;letter-spacing:.06em; color:rgba(255,255,255,.9);text-transform:uppercase; } .dhero__title{ font-size:20px;font-weight:800;line-height:1.25;color:var(--white); margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.18); } /* HERO COUNTDOWN. Not a pill: an "Entry closes" label over four yellow boxes, exactly the treatment `_buildHeroCountdownBody` (:3275) gives Golden Mountain. Box #FFDB62, number 18px and unit 10px both in the brand red, and the separators in the box colour so they read as spacing not punctuation. */ /* The app wraps this in SizedBox(width: 260) + Center, with the countdown itself in a further SizedBox(width: 180) whose four cells are Expanded (:3296). So the row is a FIXED 180 wide with four equal cells — not four content-sized boxes — and the label is CENTRED over it, not left-aligned. */ /* transform-origin bottom: the scaleDown shrinks the block UPWARD, away from the like capsule, leaving its bottom edge where the padding put it. */ /* LEFT-ALIGNED, under the baked title — the app's Alignment.bottomLeft (:2350). The title occupies 1.2%-49.4% of the artwork's width (measured off the PNG), so a centred block sat to the right of the text it belongs to. Width is the box row's own 180px rather than the app's 260px wrapper: the app centres 180 inside 260 to get its offset, and starting from the body's 24px padding reaches the same place with one less number to keep in sync. The label still centres over the boxes, which is what the app's inner Center does. transform-origin is bottom-LEFT so the scaleDown shrinks toward the title rather than away from it, keeping the alignment at any scale. */ .dhero__cdwrap{margin-top:14px;width:180px;max-width:100%;text-align:center;transform-origin:0% 100%} .dhero__cdlbl{ /* 11px w600 and WHITE. The Dart calls this out: the label sits on the hero PHOTO, where the near-black used elsewhere was barely legible — which is exactly what it was doing here. The shadow is kept, flipped to dark, so it survives a light patch of artwork. */ font-size:11px;font-weight:600;color:#fff;margin-bottom:8px; text-shadow:0 1px 3px rgba(0,0,0,.45); } .dhero__cd{ display:flex;align-items:center;gap:3px; /* fills the wrap now that the wrap is the box row's width */ width:100%;max-width:100%;margin:0; } /* Expanded cells: the four share the 180px evenly instead of sizing to their own text, which left them narrow and the row short of the app's. */ .dhero__cd i{flex:1 1 0;min-width:0} .dhero__cd i{ /* compact:true -> radius 8 and padding 4/2 (brand_lucky_draw_page:14668), the same cell chrome as the home card. 10px/5px/44px was wider and rounder than the app's, which is why the row read as four big pills. */ font-style:normal;background:var(--dcd-box,#FFDB62);border-radius:8px; padding:4px 2px;text-align:center; display:flex;flex-direction:column;line-height:1.05; } .dhero__cd i b{font-size:18px;font-weight:900;color:var(--cd-num,#DD1F22)} .dhero__cd i span{font-size:10px;font-weight:700;color:var(--dcd-unit,var(--cd-num,#DD1F22));opacity:.85} .dhero__cd s{text-decoration:none;color:var(--dcd-sep,#FFDB62);font-weight:900;font-size:14px} /* DOC COLOURS / FULL-BLEED HERO (Cintage). The --dcd-* properties above are set by draw.html only when the draw carries `countdownBoxColor` / `countdownTextColor` or `heroArtFullBleed`, and their defaults are the literals this skin always had, so Golden Mountain computes exactly as before. This modifier adds the app's real compact geometry (BrandLuckyDrawCountdown `_box` / `_sep`, brand_lucky_draw_page.dart:18110, :18084): two HARD lips at (0,3) and (0,4.5) in Color.lerp(box, black, .14 / .26), number height 1.0, a 1px gap then the unit at w600 in full colour, and a 13px ":" with 2px either side instead of the flex gap. */ .dhero__cd--doc{gap:0} .dhero__cd--doc i{box-shadow:0 3px 0 var(--dcd-sh1,#E6D5B3), 0 4.5px 0 var(--dcd-sh2,#D4C2A1)} .dhero__cd--doc i b{line-height:1} .dhero__cd--doc i span{font-weight:600;opacity:1;margin-top:1px} .dhero__cd--doc s{font-size:13px;padding:0 2px} /* Like capsule, bottom left, straddling the hero and the white body. */ .dhero__like{ /* STRADDLES THE SEAM. The photo ends at the lip's top edge, 40px above the hero's bottom; `bottom:0` therefore parked the whole capsule 40px INSIDE the white body, which is why it read as sitting under the image instead of across it. Sit it ON the seam (bottom:40px) and then push it down by half its own height, so the artwork carries the top half and the white body the bottom half. translateY(50%) rather than a hardcoded offset, so the capsule can change height without re-tuning this. */ position:absolute;left:0;bottom:40px;transform:translateY(50%);z-index:3; display:flex;align-items:center;gap:12px; background:var(--white); padding:9px 16px 9px 18px; border-top-right-radius:999px;border-bottom-right-radius:999px; box-shadow:0 2px 8px rgba(26,26,46,.12); font-size:16px;font-weight:700; } /* 22px Material glyph in Colors.red, and a 12px gap to the count (:768-770); the emoji was 20px with a 9px gap. */ .dhero__like .heart{width:22px;height:22px;flex:none;display:block} .dhero__like .heart svg{width:22px;height:22px;display:block;fill:#F44336} /* Colors.grey.shade700 at 15px — it was near-black at 16px. */ .dhero__like .n{color:#616161;font-size:15px} /* Colors.grey.shade300 (:782), NOT the page's 8% hairline — at rgba(0,0,0,.08) this divider was about a third of the app's contrast and read as missing. */ .dhero__like .sep{width:1px;height:20px;background:#E0E0E0} /* The glyph carries its own ring, so no border and no text styling here — just the app's 22px box in black (:795-799). */ .dhero__like .help{ width:22px;height:22px;flex:none; display:flex;align-items:center;justify-content:center; } .dhero__like .help svg{width:22px;height:22px;display:block;fill:#000} /* Big rule headline that opens the How-to-join tab. */ .drule{font-size:19px;font-weight:800;line-height:1.35;margin:16px 0 6px} .dsec{font-size:17px;font-weight:800;margin:22px 0 4px} .dsub{font-size:13.5px;color:var(--faint);margin-bottom:10px;line-height:1.45} /* ---- participating products (CATEGORIES, each holding SKUs) ----------- Deck geometry from brand_lucky_draw_page.dart:70-78: a 124px box holding a 104px front card, each card behind offset 8px DOWN-RIGHT, no rotation. The cards behind are not decoration: there is one per SKU in the category, which is why a two-SKU category shows a thinner stack than a five-SKU one. Tile colour comes from the doc's `tileColor`, default #EE7D42. */ .prodrow{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none; margin:0 calc(var(--pad-page) * -1);padding:6px var(--pad-page) 12px} .prodrow::-webkit-scrollbar{display:none} .prodrow>li{list-style:none;flex:0 0 auto;width:124px;cursor:pointer} .prodrow .skudeck{position:relative;width:124px;height:124px} .prodrow .skudeck .card{ position:absolute;top:10px;left:10px;width:104px;height:104px; border-radius:16px;overflow:hidden;background:var(--tile,#EE7D42); display:flex;align-items:center;justify-content:center; transition:transform .12s ease; } /* FULL BLEED inside the tile. `_deckCard` puts the image in a Stack(fit: StackFit.expand) with BoxFit.contain, so it fills the whole 104x104 and only letterboxes on its own aspect ratio. The 82% inset here shrank every bottle by ~18% against the app and was the most visible difference in the product row. */ .prodrow .skudeck .card img{width:100%;height:100%;object-fit:contain} /* Behind-cards are darkened so they read as sitting under the front one: black at 0.10 * i (:129), i.e. a 10% then 20% multiply. No rotation — kDeckRot is 0.0, offset only. */ .prodrow .skudeck .card.b1{ transform:translate(calc(var(--off,8) * 1px),calc(var(--off,8) * 1px));filter:brightness(.9)} .prodrow .skudeck .card.b2{ transform:translate(calc(var(--off,8) * 2px),calc(var(--off,8) * 2px));filter:brightness(.8)} /* Per-product deck fields (owner, 2026-10-04, Cintage). `deckBacks:"plain"` cards are flat tints, never darkened. `tileBorder` (--tb, pt) insets the image in .card__in so the tile colour frames it (_framedTileImage). */ .prodrow .skudeck .card.card--plain{filter:none} .skudeck .card__in,.skugrid .tile .card__in{ position:absolute;inset:calc(var(--tb,0) * 1px);border-radius:inherit;overflow:hidden; display:flex;align-items:center;justify-content:center; } .skudeck .card__in img,.skugrid .tile .card__in img{width:100%;height:100%;object-fit:contain} .prodrow>li:active .skudeck .card{transform:translate(0,0) scale(.97)} /* 12px w600 #1A1A1A, two lines max, 18px below the deck, and indented by kDeckBase so it lines up with the FRONT card's left edge rather than the 124 box's (:4144). It was 14px/700, flush left, 10px down and unclamped. */ .prodrow .nm{ font-size:12px;font-weight:600;color:#1A1A1A;line-height:1.3; margin:18px 0 0 10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } /* ---- product TYPES (phoneProducts; _buildParticipatingProducts :5280) --- A title per type, 13.5 w800 #1A1A1A, the "Participating products" label at its right end when every row has a title (9 w400 black45, 12 left), an optional caption 12.5 w500 black45 2 under it. 12 + 14 above the first title (no heading on top), 4 above each later one. */ .dprods--inline{margin-top:26px} .dprods__list{margin-top:10px} .dprods--inline .dprods__list,.dprods__list--cav{margin-top:0} .dpg__head--next{margin-top:4px} .dpg__head--cav{margin-top:8px} .dpg__head--flat{margin-bottom:4px} .dpg{display:flex;align-items:baseline;gap:12px} .dpg__t{flex:1;min-width:0;font-size:13.5px;line-height:1.3;font-weight:800;color:#1A1A1A} .dpg__h{flex:none;font-size:9px;font-weight:400;color:rgba(0,0,0,.45)} .dpg__c{margin-top:2px;font-size:12.5px;font-weight:500;color:rgba(0,0,0,.45)} /* snug: right under a title, no top padding; the deck box's 10px base is the only gap (:5584). flat: single photos, no deck room: 4 above the 104 photo, its name 8 under it, indented by kDeckBase like the deck's front card. */ .prodrow--snug{padding-top:0} .prodrow--flat{padding-top:4px} .prodrow--flat .skudeck{height:104px} .prodrow--flat .skudeck .card{top:0} .prodrow--flat .nm{margin-top:8px} /* "See all N products" / "Show less" (_productsToggle :5505): full width, 42 tall, #F4F2F5 stadium, 13.5 w700 #1A1A1A, a 20px chevron 4 after it that turns over in 280ms; 6 below. */ .dprods__more{ display:flex;align-items:center;justify-content:center;gap:4px; width:100%;height:42px;margin:0 0 6px;border:0;border-radius:999px; background:#F4F2F5;font:inherit;font-size:13.5px;font-weight:700;color:#1A1A1A;cursor:pointer; } .dprods__more:active{filter:brightness(.96)} .dprods__more svg{width:20px;height:20px;fill:currentColor;transition:transform .28s ease} .dprods__more.is-open svg{transform:rotate(180deg)} /* ---- category SKU panel ------------------------------------------------ */ /* A CENTRED DIALOG, not a bottom sheet. The app's container is a Rect centred at (width/2, height*0.45) — deliberately above true centre — width min(vw - 32, 420), height capped at 80vh (:9166). It grows out of the tapped card. Scrim is black 60%, not 50%. */ .skusheet{ position:fixed;inset:0;z-index:190; background:rgba(0,0,0,.6); display:flex;align-items:center;justify-content:center; animation:lbIn .16s ease-out; } .skusheet__body{ position:relative; /* 45% of the viewport, so the panel sits slightly high — matching Rect.fromCenter(center: (w/2, h*0.45)). */ margin-bottom:10vh; width:calc(100vw - 32px);max-width:420px; background:var(--white); /* SmoothRectangleBorder(cornerRadius: 28, cornerSmoothing: 0.6) — NOT the 1.0 the cards use, so it needs its own fit: r42 + superellipse(1.6) tracks it to 0.31px, with r30 the best plain-circular fallback. */ border-radius:30px; padding:20px; max-height:80vh;overflow-y:auto; /* black 28%, blur 30, offset (0,14). */ box-shadow:0 14px 30px rgba(0,0,0,.28); animation:skuPop .28s cubic-bezier(.22,.61,.36,1); transform-origin:var(--ox,50%) var(--oy,50%); } @supports (corner-shape: superellipse(1.6)){ .skusheet__body{border-radius:42px;corner-shape:superellipse(1.6)} } /* easeOutCubic, growing from the tapped card toward its centred spot. */ @keyframes skuPop{ from{transform:scale(.28);opacity:0} to{transform:scale(1);opacity:1} } @media (prefers-reduced-motion:reduce){.skusheet,.skusheet__body{animation:none}} .skusheet__head{text-align:center;margin-bottom:18px;padding:0 26px} /* 20px w900 #1A1A1A, letter-spacing -0.3 (:9265). */ .skusheet__title{ font-size:20px;font-weight:900;color:#1A1A1A;letter-spacing:-.3px; line-height:1.25; } /* 12.5px w500 #8A929B, 3px below the title (:9280). */ .skusheet__sub{font-size:12.5px;font-weight:500;color:#8A929B;margin-top:3px} /* Circular grey ✕ at the container's top-right (:9309). */ .skusheet__x{ position:absolute;top:10px;right:12px; width:30px;height:30px;padding:6px;border-radius:50%; background:#F1F3F5;display:flex;align-items:center;justify-content:center; } .skusheet__x svg{width:18px;height:18px;fill:#5F6B76;display:block} /* Wrapping grid, NOT a horizontal scroller: the app uses a Wrap so you cannot mis-swipe sideways (:10031). */ .skugrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 14px} .skugrid>div{width:104px;cursor:pointer} .skugrid .tile{ position:relative;width:104px;height:104px;border-radius:16px;overflow:hidden; background:var(--tile,#EE7D42); display:flex;align-items:center;justify-content:center; } .skugrid .tile img{width:100%;height:100%;object-fit:contain} /* _buildSkuTile (:9686): 12px w800, centred, 8px gap, two lines. */ .skugrid .nm{ font-size:12px;font-weight:800;color:#1A1A1A;text-align:center; margin-top:8px;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } /* Bottom-bar entry block + the two gradient action buttons. */ .dbar__entries{display:flex;align-items:center;gap:9px;margin-top:3px} .dbar__ticket{height:30px;width:auto;flex:none} .dbar__label .chev{font-size:13px;opacity:.5} /* The app's _ScanSplitButtons (:14981). Each half is an Expanded, so the pair SPLITS the width the entry block leaves instead of being two fixed chips — that is most of why this row read so much smaller than the app's. Gap is kLuckyDrawCtaGap = 8. */ /* Right-aligned once the halves stop stretching, so they stay against the bar's own padding exactly as the app's Expanded pair does. */ .dbar__acts{display:flex;justify-content:flex-end;gap:8px;flex:1;min-width:0;margin-left:14px} .dbar__act{ position:relative;flex:1;min-width:0; /* CAP THE STRETCH. The halves are Expanded, which is right on a phone but the mini's shell is up to 520px on a desktop preview — there they grew to 147px each against the ~75px they measure at 375px, which is what read as "too big". 100px leaves every real phone width fluid (a 430pt Pro Max lands around 103 and is unaffected in practice) and only clamps the desktop frame back to phone proportions. The app never renders wider than a phone, so it has no equivalent and needs none. */ max-width:100px; /* _h 48 + _depth 4. The extra 4 is the depth slab showing below the face. */ height:52px;display:block; } /* The 3D slab: a SECOND gradient, hotter than the face (#FD6900 -> #FF0000, :7437), sitting 4px lower. Same button-push language as the campaign cards. */ .dbar__act-depth{ position:absolute;left:0;right:0;top:4px;height:48px; border-radius:14px; background:linear-gradient(90deg,#FD6900,#FF0000); } .dbar__act-face{ position:absolute;left:0;right:0;top:0;height:48px; border-radius:14px; /* centerLeft -> centerRight, so 90deg. The old 135deg tilted a gradient the app draws flat. */ background:linear-gradient(90deg,#FFAB70,#FF8989); display:flex;align-items:center;justify-content:center; /* white 35%, offset (0,-2), blur 4, spread -1 — an inner top highlight, not a drop shadow. Dropped on press. */ box-shadow:inset 0 2px 4px -1px rgba(255,255,255,.35); transition:transform .09s ease-out, box-shadow .09s ease-out; } .dbar__act:active .dbar__act-face{transform:translateY(4px);box-shadow:none} .dbar__act-face svg{width:22px;height:22px;fill:var(--white);display:block} /* ---- the campaign mini-game button (_TesterOrderIdButton :15422) -------- 54x48 + 4 depth, radius 14, sitting kLuckyDrawCtaGap (8) from the scan halves. FIXED width, not a third equal share: the two scan CTAs are the Expanded pair and this is their fixed-width sibling. */ .dbar__game{ position:relative;flex:0 0 54px;width:54px;height:52px;display:block; } /* The depth slab is the theme darkened 16% in HSL LIGHTNESS. CSS has no lightness operator, so `color-mix` toward black is the closest single-step equivalent; the exact HSL shade would need the colour split in JS. */ .dbar__game-depth{ position:absolute;left:0;right:0;top:4px;height:48px;border-radius:14px; background:color-mix(in srgb, var(--theme) 78%, black); } /* Face is a TINT, not the solid accent — it has to stay visibly secondary next to the vivid scan CTAs. */ .dbar__game-face{ position:absolute;left:0;right:0;top:0;height:48px;border-radius:14px; background:color-mix(in srgb, var(--theme) 8%, white); border:1.5px solid var(--theme); display:flex;align-items:center;justify-content:center; transition:transform .09s ease-out; } .dbar__game:active .dbar__game-face{transform:translateY(4px)} /* A white-on-transparent monochrome mark recoloured with srcIn in Flutter — a CSS mask is the faithful equivalent. `background` alone would show the artwork's own colours instead of the theme. */ .dbar__game-ic{ width:26px;height:26px;display:block;background:var(--theme); -webkit-mask:url('../../assets/luckyDraw/matchIcon.webp') center/contain no-repeat; mask:url('../../assets/luckyDraw/matchIcon.webp') center/contain no-repeat; } @supports not (color: color-mix(in srgb, red 50%, transparent)){ .dbar__game-depth{background:var(--theme)} .dbar__game-face{background:#fff} } /* Circular translucent back button, 32px, white at 50%. */ .dback{ position:absolute;z-index:4; top:calc(16px + env(safe-area-inset-top,0px));left:16px; width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.5); display:flex;align-items:center;justify-content:center; font-size:18px;line-height:1;color:#1a1a2e; } /* ---- pill tab bar (_buildTabBar :3532) --------------------------------- */ .dtabs{ position:relative;height:50px;margin:10px 24px 12px;padding:4px; background:#F1F4EE;border-radius:999px; border:1.5px solid color-mix(in srgb,var(--theme) 30%,transparent); display:flex; } .dtabs__ind{ position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 12px); border-radius:999px;background:var(--accent,var(--theme)); box-shadow:0 2px 4px rgba(0,0,0,.1); transition:transform .22s cubic-bezier(.2,.8,.2,1); /* Promotes this to its own compositor layer, so the slide runs off the main thread instead of competing with the height-clip resize and the two class toggles happening in the same tap (draw.html showTab). Cheap insurance against exactly the kind of frame the read/write reorder there fixed. */ will-change:transform; } /* The indicator is inset 6px on each side, so its width is (50% - 12px) of the track. translateX(100%) therefore moves it by its OWN width and lands 12px short of the second segment. It has to travel a full HALF TRACK, which is its own width plus those 12px. */ .dtabs__ind.r{transform:translateX(calc(100% + 12px))} .dtabs button{ position:relative;z-index:2;flex:1;border-radius:999px; font-size:14px;font-weight:700;color:rgba(0,0,0,.55); transition:color .18s ease; } .dtabs button.on{color:var(--white)} /* ---- swipeable pages ---------------------------------------------------- */ /* overflow-y:hidden is LOAD-BEARING, not tidiness. `overflow-x:auto` alone makes the other axis compute to `auto` too (CSS spec), so the pager became a VERTICAL scroller the moment its JS-pinned height came out shorter than its content — an image landing late is enough. It then swallowed the scroll gesture: the section scrolled inside its own box, the document did not move, and the hero sat frozen at the top of the screen. */ .dpages{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none} .dpages::-webkit-scrollbar{display:none} /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so the store carousel's negative-margin bleed pushed page one to 552px inside a 375px pager. The snap points then never lined up with the tab indicator and swiping did nothing. */ /* align-items:flex-start so a section keeps its OWN height instead of being stretched to the tallest one; the pager's height is then pinned to the active section from JS (syncPagerHeight). Without both, the short prizes tab inherited the long "how to join" page's height and you could scroll a screenful past the end of it. */ .dpages{align-items:flex-start} .dpages>section{flex:0 0 100%;min-width:0;scroll-snap-align:start;padding:0 var(--pad-page)} /* ── the height clip, on a SEPARATE outer element ────────────────────────── CORRECTION: an earlier version of this comment claimed the app "animates nothing" for the height and only slides horizontally. That was wrong — re-read against the actual source, `_buildSwipeablePages` wraps its PageView in `AnimatedContainer(duration: 280ms, curve: easeOutCubic, height: _activePageHeight)` (brand_lucky_draw_page.dart:3631-3633), the SAME duration as `animateToPage(280ms)` for the slide. The app animates height and position together, in lock-step. This file previously set height with no transition at all, which does not avoid jank — it swaps slow-frame-drop jank for a violent instant snap: tapping "Prizes" while on the ~5600px "How to join" page on a phone collapsed the container by thousands of pixels in a single frame, before the horizontal slide had even started moving. That IS the stutter. The fix is not "animate .dpages's own height" — that was the ORIGINAL mistake this comment used to warn against, and the warning about relayout cost is real for that specific element: `.dpages` is the scroll-snap container, and animating a property that changes its own scrollport can make the browser re-evaluate scroll-snap targets on every frame of the transition. Instead, matching the Dart structure exactly, the animated height lives on `.dpager`, a plain `overflow:hidden` block wrapping `.dpages` — `.dpages` itself keeps `height:auto` (so it naturally sizes to its tallest section, same as `align-items:flex-start` already implies) and never has its own height transitioned. Only the ancestor's clip line animates, which is a cheap paint-level resize with no scroll-snap recomputation involved, and nothing sits below `.dpages` in the DOM to reflow underneath it. */ .dpager{overflow:hidden} /* Scoped to a class, not the base rule, and only added for the duration of a deliberate tab tap (draw.html showTab). A passive re-measurement — an image landing late, the FAQ opening, a resize — calls syncPagerHeight() without this class and snaps instantly, exactly as before: correcting a mismeasure is not motion and does not need to look like it. */ .dpager.is-switching{transition:height .28s cubic-bezier(.215,.61,.355,1)} /* ---- horizontal carousels (stores / products) -------------------------- */ .carousel{ display:flex;gap:10px;overflow-x:auto; scroll-snap-type:x proximity;scrollbar-width:none; /* Bleed to the screen edges so the row can scroll past the page gutter, then re-inset the first and last item with padding. Declaring `padding` twice previously reset the top/bottom and broke the inset. */ margin:0 calc(var(--pad-page) * -1); padding:2px var(--pad-page) 6px; } .carousel::-webkit-scrollbar{display:none} .carousel>li{ list-style:none;flex:0 0 auto;scroll-snap-align:start; width:96px;text-align:center; } .carousel .logo{ width:56px;height:56px;margin:0 auto 6px;border-radius:14px; background:var(--white);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;overflow:hidden; } .carousel .logo img{width:100%;height:100%;object-fit:contain} .carousel .nm{font-size:11.5px;font-weight:600;line-height:1.25;color:var(--muted)} /* ---- prize list --------------------------------------------------------- */ .prizehdr{ display:flex;align-items:baseline;gap:8px;margin:18px 0 8px; font-size:14px;font-weight:800;color:var(--theme); } .prizehdr span{margin-left:auto;font-size:12px;font-weight:600;color:var(--faint)} .prizerow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)} .prizerow:last-child{border-bottom:none} .prizerow img{width:46px;height:46px;border-radius:11px;object-fit:cover;background:var(--grey50);flex:none} .prizerow .m{flex:1;min-width:0} .prizerow .m b{display:block;font-size:14px;font-weight:700} .prizerow .m span{font-size:12px;color:var(--faint)} /* ---- sticky bottom bar (_buildStickyBottomBar :7180) ------------------- */ .dbar{ position:fixed;left:0;right:0;bottom:0;z-index:40; max-width:520px;margin:0 auto;background:var(--white); box-shadow:0 -4px 16px rgba(0,0,0,.06); } /* 1px pink -> yellow gradient top border, the same colours as the CTA face. */ .dbar:before{ content:'';display:block;height:1px; background:linear-gradient(90deg,#FFAB70,#FF8989); } .dbar__in{ padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px)); display:flex;align-items:center;gap:12px; } /* Content-sized, NOT an equal half. `flex:1` here split the bar 50/50 with the action row, which squeezed the two scan CTAs to 42px once the game button joined them. In the app the entry block takes its intrinsic width and the CTA row is the Expanded one that absorbs the rest. */ /* A