/* ================================================================= 雙11 (Double 11) sale treatment, look 3 「優惠券」 (coupon), the owner's pick (19 Oct). /promo/hmg/ (versions A and B): a red perforated coupon strip above the plans, the 3/6 packs as gold tickets with a red 「雙11減$222 / 減$111」 stamp, a 雙11價 chip in the sticky bar. Brand pages (home, imuglo, tiger-milk-king): a slim red-gold bar on top and the same gold ticket + stamp on the 3/6 price cards. Switch: the SERVER decides. nginx adds data-offer="d11" to while the sale runs (26 Oct 00:00 - 16 Nov 23:59:59 HKT, nginx-d11.conf) or for ?d11=. Every rule below sits under html[data-offer="d11"] (apart from the [hidden] guard that keeps the 雙11 pieces hidden), so without it this file changes nothing on screen. The pages carry both sets of words: .d11-n the normal words: hidden while 雙11 is on .d11-y [hidden] the 雙11 words: shown while 雙11 is on (inline) .d11-* [hidden] the 雙11-only pieces (bar, coupon, 平時 prices, 1樽 note) [data-d11-off] a 3/6 pack card: its gold ticket and 減$ stamp No script swaps any words; js/main.js and hmg2.js only read the attribute (tracked basket value, price_mode tag) and write both words when the plan changes. Colours = the campaign's flyers: crimson #D0101A -> #8E0A12, metallic gold #FFE9A8 -> amber #E8A93C with bronze #A0521A, deep red #7A0A10 for small dark text. ================================================================= */ html[data-offer="d11"] { --d11-red: #D0101A; --d11-red-d: #8E0A12; --d11-gold: #FFE9A8; --d11-amber: #E8A93C; --d11-bronze: #A0521A; --d11-line: #DDB060; /* gold card edges */ /* the heavy face: Chiron Hei HK 900, a text-only subset (link in each page's ; its glyphs download only while something on screen uses them, so only while 雙11 is on). No other rule names this family, so it never stands in for the body text. */ --d11-heavy: 'Chiron Hei HK', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --d11-num: Inter, 'Noto Sans TC', -apple-system, sans-serif; --d11-notch-bg: var(--color-bg-primary); /* what shows through a ticket's notches */ } /* --------------------------------------------------------------- The two sets of words --------------------------------------------------------------- */ /* Guard, the one rule not under the attribute: the 雙11 pieces stay hidden without it, even if another stylesheet gives their element a display (an author rule beats the browser's own [hidden] { display: none }). The rules under the attribute below are more specific. */ .d11-y[hidden], .d11-was[hidden], .d11-from[hidden], .d11-bar[hidden], .d11-coupon[hidden] { display: none; } html[data-offer="d11"] .d11-n { display: none; } html[data-offer="d11"] .d11-y[hidden] { display: inline; } /* The 雙11-only pieces (all [hidden] in the HTML) */ html[data-offer="d11"] .d11-was { display: block; } html[data-offer="d11"] .d11-from { display: inline-block; } html[data-offer="d11"] .d11-bar--brand { display: flex; } html[data-offer="d11"] .d11-coupon { display: grid; } /* Gold headline (brand bar 「雙11優惠」): heavy sans, slanted, a solid gold face over a stepped bronze extrusion (no gradient text; the depth is all text-shadow, in em so it scales) */ html[data-offer="d11"] .d11-gold { display: inline-block; white-space: nowrap; font-family: var(--d11-heavy); font-weight: 900; font-style: normal; color: var(--d11-gold); letter-spacing: 0.01em; transform: skewX(-9deg); text-shadow: 0 -0.012em 0 #FFF8DE, 0 0.02em 0 #F4CB6C, 0 0.04em 0 var(--d11-amber), 0 0.06em 0 #C47A28, 0 0.08em 0 var(--d11-bronze), 0 0.1em 0 #7E3C10, 0 0.16em 0.2em rgba(70, 0, 8, 0.55); } /* --------------------------------------------------------------- Brand pages: the slim red-gold bar on top, a coupon's perforated bottom edge --------------------------------------------------------------- */ html[data-offer="d11"] .d11-bar { position: relative; margin: 0; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 10px; min-height: 38px; padding: 5px 16px 10px; background: radial-gradient(60% 140% at 50% 0%, rgba(255, 120, 90, 0.35), transparent 70%), linear-gradient(90deg, var(--d11-red-d) 0%, var(--d11-red) 28%, var(--d11-red) 72%, var(--d11-red-d) 100%); box-shadow: inset 0 -1px 0 rgba(255, 233, 168, 0.6), inset 0 1px 0 rgba(255, 233, 168, 0.22); color: #FFF1CF; text-align: center; line-height: 1.3; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; -webkit-mask: radial-gradient(circle 4px at 50% 100%, #0000 97%, #000) 0 0 / 12px 100% repeat-x; mask: radial-gradient(circle 4px at 50% 100%, #0000 97%, #000) 0 0 / 12px 100% repeat-x; } html[data-offer="d11"] .d11-bar .d11-gold { font-size: 17px; line-height: 1.2; letter-spacing: 0.04em; } html[data-offer="d11"] .d11-bar__sep { color: var(--d11-gold); opacity: 0.8; } /* ================================================================= /promo/hmg/ (versions A and B) ================================================================= */ /* The two 雙11 packs: big red numerals, 平時 small and struck through above them. 1樽 keeps its ink price; its small line gets 「3樽起享雙11價」. */ html[data-offer="d11"] [data-d11-off] .plan__cost b { color: var(--d11-red); font-size: 1.3rem; } html[data-offer="d11"] .plan .d11-was { font-family: var(--d11-num); font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: rgba(122, 10, 16, 0.6); } /* Bryan 19 Oct: while 雙11 is on, the red stamp (雙11減$222 / $111) carries the saving, so the 慳 line and the dot before it step aside on the two stamped packs (a second "減" line read like an extra discount). Normal mode keeps 慳 as before. */ html[data-offer="d11"] [data-d11-off] .plan__sep, html[data-offer="d11"] [data-d11-off] .plan__save { display: none; } html[data-offer="d11"] .d11-from { margin-left: 8px; padding: 0 7px; border-radius: 999px; background: #FDECEC; color: var(--d11-red); font-family: var(--font-body); font-size: 12.5px; font-weight: 700; line-height: 20px; vertical-align: 1px; white-space: nowrap; } /* version B's compact tiles: the struck line stays small, so the buy button keeps its place on the first screen */ html[data-offer="d11"] .bh__plans [data-d11-off] .plan__cost b { font-size: 1.2rem; line-height: 1.2; } html[data-offer="d11"] .bh__plans .plan .d11-was { font-size: 11.5px; line-height: 1.15; } html[data-offer="d11"] .bh__plans .d11-from { margin-left: 6px; font-size: 12px; } /* The coupon strip: stub | perforation | body. Perforated left and right edges and two notches on the perforation line are cut with one mask (four layers): the edge bites are two half-width layers added together, the notches are intersected on top. */ html[data-offer="d11"] .d11-coupon { --stub: 78px; position: relative; grid-template-columns: var(--stub) 1fr; align-items: center; min-height: 64px; margin: 0 0 22px; border-radius: 8px; color: var(--d11-gold); background: radial-gradient(120% 160% at 0% 0%, #E5231F 0%, #C70F18 50%, #9A0B13 100%); -webkit-mask: radial-gradient(circle 7px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 7px at var(--stub) 100%, #0000 97%, #000), radial-gradient(circle 3.5px at 0 50%, #0000 97%, #000) 0 0 / 51% 11px repeat-y, radial-gradient(circle 3.5px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 11px repeat-y; -webkit-mask-composite: source-in, source-in, source-over, source-over; mask: radial-gradient(circle 7px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 7px at var(--stub) 100%, #0000 97%, #000), radial-gradient(circle 3.5px at 0 50%, #0000 97%, #000) 0 0 / 51% 11px repeat-y, radial-gradient(circle 3.5px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 11px repeat-y; mask-composite: intersect, intersect, add, add; } html[data-offer="d11"] .d11-coupon p { margin: 0; } html[data-offer="d11"] .d11-coupon__stub { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 0 8px 6px; } /* the perforation: dashes drawn as a background, not a border */ html[data-offer="d11"] .d11-coupon__stub::after { content: ''; position: absolute; top: 10px; bottom: 10px; right: -1px; width: 2px; background: repeating-linear-gradient(180deg, rgba(255, 233, 168, 0.75) 0 5px, transparent 5px 9px); } html[data-offer="d11"] .d11-coupon__stub b { font-family: var(--d11-heavy); font-weight: 900; font-size: 24px; line-height: 1.05; transform: skewX(-9deg); text-shadow: 0 1px 0 var(--d11-amber), 0 2px 0 var(--d11-bronze), 0 3px 4px rgba(60, 0, 8, 0.5); } html[data-offer="d11"] .d11-coupon__stub span { font-size: 13px; font-weight: 700; letter-spacing: 0.3em; padding-left: 0.3em; } html[data-offer="d11"] .d11-coupon__body { display: grid; gap: 1px; padding: 9px 14px 10px 16px; } html[data-offer="d11"] .d11-coupon__body b { font-family: var(--d11-heavy); font-weight: 900; font-size: 19px; line-height: 1.25; letter-spacing: 0.06em; color: #FFF6DA; } html[data-offer="d11"] .d11-coupon__body span { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--d11-gold); white-space: nowrap; } @media (max-width: 359px) { html[data-offer="d11"] .d11-coupon { --stub: 66px; } html[data-offer="d11"] .d11-coupon__stub b { font-size: 21px; } html[data-offer="d11"] .d11-coupon__body { padding-inline: 12px 10px; } html[data-offer="d11"] .d11-coupon__body span { font-size: 13px; } } /* The 3/6 packs: gold ticket, dashed inner frame, a notch on each side, a red stamp 「雙11減$222 / 減$111」 straddling the top edge */ html[data-offer="d11"] .picker--card { --d11-notch-bg: var(--card); } html[data-offer="d11"] .plans:not(.bh__plans) { gap: 22px; } /* version B: a stamp needs room only above a 3/6 tile; the strip is a little tighter */ html[data-offer="d11"] .bh__plans [data-d11-off] + [data-d11-off] { margin-top: 4px; } html[data-offer="d11"] .bh__buy .d11-coupon { --stub: 70px; min-height: 50px; margin-bottom: 14px; } html[data-offer="d11"] .bh__buy .d11-coupon__stub { padding-block: 5px; } html[data-offer="d11"] .bh__buy .d11-coupon__stub b { font-size: 20px; } html[data-offer="d11"] .bh__buy .d11-coupon__stub span { font-size: 12px; } html[data-offer="d11"] .bh__buy .d11-coupon__body { padding-block: 6px 7px; } html[data-offer="d11"] .bh__buy .d11-coupon__body b { font-size: 16px; line-height: 1.2; } html[data-offer="d11"] .bh__buy .d11-coupon__body span { font-size: 13px; line-height: 1.35; } html[data-offer="d11"] .bh__plans [data-d11-off].plan::before { top: -12px; font-size: 12.5px; line-height: 18px; } html[data-offer="d11"] [data-d11-off].plan, html[data-offer="d11"] .picker--card [data-d11-off].plan { padding-top: 18px; border-color: var(--d11-line); background: linear-gradient(180deg, #FFF9E6 0%, #FFEDBE 100%); outline: 1px dashed rgba(160, 82, 26, 0.42); outline-offset: -6px; } html[data-offer="d11"] .bh__plans [data-d11-off].plan { padding-top: 13px; } html[data-offer="d11"] [data-d11-off].plan:has(input:focus-visible) { outline: 2px solid var(--d11-red-d); outline-offset: 2px; } html[data-offer="d11"] [data-d11-off].plan::after, html[data-offer="d11"] [data-d11-off].pricing-card::after { content: ''; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 0 50%, var(--d11-notch-bg) 7px, var(--d11-line) 7.5px 8.5px, transparent 9px), radial-gradient(circle at 100% 50%, var(--d11-notch-bg) 7px, var(--d11-line) 7.5px 8.5px, transparent 9px); } html[data-offer="d11"] [data-d11-off].plan::before { content: '雙11減$' attr(data-d11-off); position: absolute; z-index: 2; top: -14px; right: 14px; padding: 0 8px; border: 2px solid var(--d11-red); border-radius: 6px; background: #FFFDF7; color: var(--d11-red); box-shadow: inset 0 0 0 1.5px #FFFDF7, inset 0 0 0 2.5px rgba(208, 16, 26, 0.5); font-family: var(--d11-heavy); font-weight: 900; font-size: 13.5px; line-height: 21px; letter-spacing: 0.03em; white-space: nowrap; transform: rotate(-6deg); pointer-events: none; } html[data-offer="d11"] .plan.is-on[data-d11-off], html[data-offer="d11"] [data-d11-off].plan:has(input:checked) { border-color: var(--d11-red); box-shadow: inset 0 0 0 1px var(--d11-red), 0 8px 18px rgba(208, 16, 26, 0.14); } html[data-offer="d11"] .plan.is-on[data-d11-off] .plan__dot, html[data-offer="d11"] [data-d11-off].plan:has(input:checked) .plan__dot { border-color: var(--d11-red); } html[data-offer="d11"] [data-d11-off] .plan__dot::after { background: var(--d11-red); } html[data-offer="d11"] .plan.is-on[data-d11-off]::after, html[data-offer="d11"] [data-d11-off].plan:has(input:checked)::after { background: radial-gradient(circle at 0 50%, var(--d11-notch-bg) 7px, var(--d11-red) 7.5px 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--d11-notch-bg) 7px, var(--d11-red) 7.5px 9px, transparent 9.5px); } /* Sticky bar: a small red 雙11價 chip after the plan name and the price in red, for the 3/6 packs only (hmg2.js keeps data-n on .sticky__info = the plan picked; 1樽 has no 雙11 price) */ html[data-offer="d11"] .sticky { border-top: 1px dashed rgba(208, 16, 26, 0.45); } html[data-offer="d11"] .sticky__info:not([data-n="1"]) span { color: var(--d11-red); font-weight: 700; } html[data-offer="d11"] .sticky__info:not([data-n="1"]) b::after { content: '雙11價'; display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--d11-red); color: var(--d11-gold); font-size: 11.5px; line-height: 18px; vertical-align: 1px; letter-spacing: 0.04em; } /* tablet and desktop: the pickers sit on a white card */ @media (min-width: 900px) { html[data-offer="d11"] .bh__buy { --d11-notch-bg: var(--card); } } @media (min-width: 1024px) { html[data-offer="d11"] .hero__buy .picker { --d11-notch-bg: var(--card); } } /* ================================================================= Brand pages (home, imuglo, tiger-milk-king): the 3/6 price cards ================================================================= */ html[data-offer="d11"] [data-d11-off] .pricing-card__amount { font-family: var(--d11-heavy); font-weight: 900; color: var(--d11-red); letter-spacing: -0.01em; } html[data-offer="d11"] [data-d11-off] .pricing-card__currency { color: var(--d11-red); font-weight: 700; } html[data-offer="d11"] [data-d11-off] .pricing-card__original-price { color: var(--color-text-muted); } html[data-offer="d11"] [data-d11-off] .pricing-card__original-price s { text-decoration-color: rgba(122, 10, 16, 0.6); } html[data-offer="d11"] [data-d11-off] .pricing-card__savings { display: none; } /* the stamp carries the saving */ /* gold ticket with notches + the 減$ stamp right under the price */ html[data-offer="d11"] [data-d11-off].pricing-card { background: linear-gradient(180deg, #FFF9E6 0%, #FFEDBE 100%); border-top: 0; box-shadow: 0 0 0 1px var(--d11-line), var(--shadow-md); outline: 1px dashed rgba(160, 82, 26, 0.42); outline-offset: -7px; } html[data-offer="d11"] [data-d11-off].pricing-card::before { content: '雙11減$' attr(data-d11-off); order: 1; align-self: center; margin: -2px 0 12px; padding: 0 9px; border: 2px solid var(--d11-red); border-radius: 6px; background: #FFFDF7; color: var(--d11-red); box-shadow: inset 0 0 0 1.5px #FFFDF7, inset 0 0 0 2.5px rgba(208, 16, 26, 0.5); font-family: var(--d11-heavy); font-weight: 900; font-size: 14px; line-height: 22px; letter-spacing: 0.03em; white-space: nowrap; transform: rotate(-5deg); } html[data-offer="d11"] [data-d11-off] .pricing-card__details, html[data-offer="d11"] [data-d11-off] .pricing-card__shipping { order: 1; } html[data-offer="d11"] [data-d11-off] .pricing-card__cta { order: 2; }