/* ============================================================ MyDailyDiscount — stylesheet NOTE ON OVERFLOW + SHADOWS A scroll container (overflow-x: auto) clips its content to the PADDING box. Any child with a box-shadow or a hover lift will get its shadow sliced off at the edges. So every scroller here gets generous padding to give shadows room, plus a matching negative margin to pull the whole box back into alignment. Negative margins only move the box, they never clip — so this is safe. Search "SHADOW ROOM" for each spot. ============================================================ */ :root { /* brand */ --brand: #f4511e; --brand-dark: #d93c0c; --brand-light: #ff8a3d; --brand-tint: #fff3ee; --brand-grad: linear-gradient(135deg, #ff8a3d 0%, #f4441e 100%); /* ink */ --ink: #12151c; --ink-2: #3d4653; --ink-3: #6b7482; --ink-4: #9aa2ae; /* surface */ --surface: #ffffff; --surface-0: rgba(255, 255, 255, 0); /* --surface at zero alpha, for fades */ --surface-alt: #f5f6fa; --surface-dark: #0f1218; --border: #e6e8ee; --border-strong: #d5d9e2; /* semantic */ --green: #12a05c; --green-tint: #e7f7ef; /* shape */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* elevation */ --sh-1: 0 1px 2px rgba(16, 20, 28, .04), 0 2px 8px rgba(16, 20, 28, .05); --sh-2: 0 2px 4px rgba(16, 20, 28, .05), 0 8px 24px rgba(16, 20, 28, .08); --sh-3: 0 8px 16px rgba(16, 20, 28, .08), 0 24px 48px rgba(16, 20, 28, .12); --sh-brand: 0 6px 18px rgba(244, 81, 30, .28); --ease: cubic-bezier(.4, 0, .2, 1); --header-h: 68px; /* translucent chrome — tokenised so dark mode can swap it */ --glass: rgba(255, 255, 255, .86); --glass-strong: rgba(255, 255, 255, .9); --glass-soft: rgba(255, 255, 255, .75); --on-brand: #ffffff; /* text/icons sitting on a brand fill */ --logo-pad: #ffffff; /* plate behind brand logos on dark cards */ --amber: #f5a623; --hero-mid: #fdf8f5; /* middle stop of the hero gradient */ /* Hero aurora — four stops read as depth: air, ribbon body, lit face, highlight. Light mode stays in the pale end of the brand ramp so the dark hero copy keeps its contrast. */ --aurora-1: #fff1e6; --aurora-2: #ffd9bd; --aurora-3: #ffa877; --aurora-4: #ffcf92; /* coverage is uniform, so this reads stronger than the same number would if it were gated by a ribbon mask */ --aurora-opacity: 0.68; /* dark copy on pale silk needs only a whisper of lift */ --hero-scrim: rgba(255, 249, 243, 0.46); --hero-top-shade: rgba(255, 251, 246, 0.6); } /* ============================================================ DARK THEME Only tokens are redefined — no component rule needs to know a theme exists. `data-theme` is set on by the toggle and persisted; the media query covers first paint before JS runs. ============================================================ */ :root[data-theme="dark"] { --ink: #eef1f6; --ink-2: #c2cad7; --ink-3: #949dac; --ink-4: #6f7887; --surface: #161a22; --surface-0: rgba(22, 26, 34, 0); --surface-alt: #0e1117; --surface-dark: #0a0d13; --border: #262c38; --border-strong: #39404f; --brand-tint: #2e1a11; --green-tint: rgba(18, 160, 92, .18); --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .28); --sh-2: 0 2px 4px rgba(0, 0, 0, .32), 0 8px 24px rgba(0, 0, 0, .4); --sh-3: 0 8px 16px rgba(0, 0, 0, .38), 0 24px 48px rgba(0, 0, 0, .5); --glass: rgba(22, 26, 34, .72); --glass-strong: rgba(22, 26, 34, .78); --glass-soft: rgba(255, 255, 255, .06); --hero-mid: #131721; /* dark mode can carry the full contrast ramp — burnt shadow through brand orange to a gold specular along each fold */ /* Dark mode is meant to read dark with the brand glowing through it. The previous ramp put a mid-orange at the middle stop, and since the field spends most of its range there the hero came out bright orange rather than dark. The bottom two stops now carry most of the range and the accent is reserved for the brightest folds only. */ --aurora-1: #0a0706; --aurora-2: #22100a; --aurora-3: #6b2711; --aurora-4: #c9601f; --aurora-opacity: 0.8; /* white copy over lit folds needs a real veil, not a whisper */ --hero-scrim: rgba(5, 3, 2, 0.58); /* the header floats on the artwork — this is what its links sit on */ --hero-top-shade: rgba(8, 6, 5, 0.72); color-scheme: dark; } /* Light is the deliberate default: the site stays light even when the OS asks for dark. Dark applies only when the visitor flips the toggle, which is then remembered in localStorage. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 140px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--surface); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input { font: inherit; } .hidden { display: none !important; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .search-icon { width: 18px; height: 18px; fill: none; stroke: var(--ink-4); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; } /* ---------- buttons ---------- */ .btn-primary { background: var(--brand-grad); color: #fff; padding: 12px 22px; border-radius: var(--r-sm); font-weight: 700; font-size: .93rem; box-shadow: var(--sh-brand); transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease); } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 24px rgba(244,81,30,.34); } .btn-primary:active { transform: translateY(0); } .btn-ghost { color: var(--brand); font-weight: 700; font-size: .88rem; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); transition: all .16s var(--ease); white-space: nowrap; } .btn-ghost:hover { border-color: var(--brand); background: var(--brand-tint); } /* ============================================================ HEADER ============================================================ */ /* Over the hero the bar is fully transparent, so the aurora runs unbroken from the top of the page — an opaque strip up here cut a hard horizontal line straight across the effect. It only takes its glass once the hero has scrolled out from under it, which .scrolled is toggled on (see the scroll handler, which keys off the hero's bottom edge rather than a fixed offset). */ .site-header { position: sticky; top: 0; z-index: 120; background: transparent; border-bottom: 1px solid transparent; transition: background .28s var(--ease), backdrop-filter .28s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } .site-header.scrolled { background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--border); box-shadow: 0 2px 14px rgba(16,20,28,.06); } /* floating over the aurora, the controls need to let it through or they read as chips pasted onto the artwork */ .site-header:not(.scrolled) .header-search, .site-header:not(.scrolled) .currency-trigger, .site-header:not(.scrolled) .theme-toggle, .site-header:not(.scrolled) .nav-toggle { background: var(--glass-soft); border-color: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Three zones: brand, nav, and a utilities cluster pinned right. The previous order put the search between brand and nav, and at every desktop width the six nav links plus a 400px search overran the container — the currency picker and theme toggle were pushed clean off-screen. Nav now sits with the brand and the search shrinks. */ .header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); } .brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .brand-mark { border-radius: 8px; } .brand-word { font-size: 1.16rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; } .brand-word span { color: var(--brand); } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .header-search { flex: 0 1 240px; display: flex; align-items: center; gap: 9px; background: var(--surface-alt); border: 1px solid transparent; border-radius: var(--r-pill); padding: 8px 15px; /* grows only while in use, so it costs the nav nothing at rest */ transition: flex-basis .22s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); } .header-search:focus-within { flex-basis: 320px; } .header-search:focus-within { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(244,81,30,.1); } .header-search input { flex: 1; border: none; outline: none; background: none; font-size: .89rem; color: var(--ink); min-width: 0; } .header-search input::placeholder { color: var(--ink-4); } .main-nav { display: flex; gap: 20px; margin-left: 10px; } .main-nav a { font-size: .875rem; font-weight: 600; color: var(--ink-2); position: relative; padding: 4px 0; white-space: nowrap; transition: color .16s var(--ease); } .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); } .main-nav a:hover { color: var(--brand); } .main-nav a:hover::after { transform: scaleX(1); } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-alt); transition: border-color .16s var(--ease); } .nav-toggle:hover { border-color: var(--brand); } .nav-toggle span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; display: block; transition: transform .2s var(--ease), opacity .2s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ============================================================ HERO ------------------------------------------------------------ overflow:hidden here is deliberate — it clips the decorative blobs only. Nothing with a shadow sits near the hero's edges, so there is nothing to crop. ============================================================ */ .hero { position: relative; /* pulled up under the sticky header and padded back out by the same amount, so the background starts at the very top of the page while the copy still sits below the bar */ margin-top: calc(-1 * var(--header-h)); padding: calc(72px + var(--header-h)) 0 64px; text-align: center; background: linear-gradient(180deg, var(--brand-tint) 0%, var(--hero-mid) 45%, var(--surface) 100%); overflow: hidden; } /* Soft-focus, like the folds are sitting behind a shallow depth of field. The overscan matters: blur() samples beyond the element and finds nothing there, so a canvas at inset:0 would feather to transparent along all four edges and frame the hero in a pale halo. Pushing it 80px past the hero on every side puts that feathered band outside the clip, and .hero's overflow:hidden trims it. */ .hero-aurora { position: absolute; inset: -80px; /* canvas is a replaced element, so width:auto resolves to its intrinsic size and the insets alone will not stretch it — without these it collapses, and since the buffer is sized from the box that collapse feeds back on itself until it hits 1x1 */ width: calc(100% + 160px); height: calc(100% + 160px); display: block; pointer-events: none; /* enough to read as shallow depth of field, not so much that the folds dissolve into fog — past ~24px the weave stops being legible */ filter: blur(18px); } /* Silk earns its look from a wide tonal range, which is exactly what eats text contrast — the sub-heading sat over whichever tone the fold happened to land on. This veils the middle of the hero only, so the copy gets a consistent ground while the folds stay legible around it. It is a real element rather than a pseudo-element because it has to paint between the canvas and .hero-inner: positioned z-index:auto siblings paint in DOM order, and ::before would land behind the canvas while ::after is already carrying the bottom fade. */ .hero-scrim { position: absolute; inset: 0; pointer-events: none; background: /* a shade under the header band: the bar is transparent over the artwork, so its links would otherwise sit on whatever tone the fold happened to be, and nav text is too small to survive that */ linear-gradient(180deg, var(--hero-top-shade) 0%, transparent 24%), radial-gradient(ellipse 64% 54% at 50% 44%, var(--hero-scrim) 0%, transparent 72%); } /* The shader already fades its own alpha out toward the bottom; this sits on top and lands the last of it exactly on --surface, so the hero dissolves into the next section with no visible seam. Painted after the canvas but below .hero-inner (z-index 1), so copy stays fully opaque. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface) 92%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .hero-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); font-size: .8rem; font-weight: 600; padding: 7px 15px; border-radius: var(--r-pill); box-shadow: var(--sh-1); } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(18,160,92,.5); animation: pulse 2s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(18,160,92,0); } 100% { box-shadow: 0 0 0 0 rgba(18,160,92,0); } } .hero h1 { margin-top: 22px; font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; } .hero h1 em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { margin: 16px auto 0; color: var(--ink-3); font-size: 1.03rem; max-width: 540px; } .hero-search { display: flex; align-items: center; gap: 10px; margin: 30px auto 0; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 7px 7px 20px; box-shadow: var(--sh-2); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); } .hero-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(244,81,30,.1), var(--sh-2); } .hero-search .search-icon { width: 20px; height: 20px; } .hero-search input { flex: 1; border: none; outline: none; background: none; font-size: .96rem; padding: 8px 0; min-width: 0; } .hero-search input::placeholder { color: var(--ink-4); } .hero-search button { background: var(--brand-grad); color: #fff; padding: 12px 26px; border-radius: var(--r-pill); font-weight: 700; font-size: .92rem; box-shadow: var(--sh-brand); transition: filter .16s var(--ease), transform .16s var(--ease); flex-shrink: 0; } .hero-search button:hover { filter: brightness(1.06); transform: translateY(-1px); } .quick-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } .quick-tag { font-size: .8rem; font-weight: 600; color: var(--ink-3); background: var(--glass-soft); border: 1px solid var(--border); padding: 6px 13px; border-radius: var(--r-pill); transition: all .16s var(--ease); } .quick-tag:hover { color: var(--brand); border-color: var(--brand); background: var(--surface); } .quick-tag-label { border: none; background: none; color: var(--ink-4); } .stat-strip { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 40px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; align-items: center; } .stat strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat span { font-size: .78rem; color: var(--ink-3); font-weight: 600; } .stat-div { width: 1px; height: 34px; background: var(--border-strong); } /* ============================================================ SPOTLIGHT ------------------------------------------------------------ The glow is clipped by an inner .spotlight-bg layer, so the card itself never needs overflow:hidden and the CTA's shadow is free to render. ============================================================ */ .spotlight { position: relative; margin: -20px 0 8px; z-index: 2; background: var(--surface-dark); color: #fff; border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; box-shadow: var(--sh-3); } .spotlight-bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; /* clips only this decorative layer */ pointer-events: none; } .spotlight-bg::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(244,81,30,.42) 0%, transparent 70%); } .spotlight > *:not(.spotlight-bg) { position: relative; z-index: 1; } .spotlight-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(244,81,30,.18); color: var(--brand-light); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); } .spotlight-bolt-icon { width: 14px; height: 14px; fill: currentColor; } .spotlight-logo { width: 62px; height: 62px; border-radius: var(--r-md); flex-shrink: 0; background: #fff; padding: 5px; } .spotlight-body { flex: 1; min-width: 220px; } .spotlight-body h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-top: 10px; } .spotlight-body p { color: #a8b0bd; font-size: .89rem; margin-top: 4px; } .spotlight .btn-primary { flex-shrink: 0; } /* ============================================================ STICKY FILTER BAR ============================================================ */ /* Sticky only for the length of #coupons — see the note on the element. It sits flush at the section's top edge, so the section drops its own top padding and the bar supplies the gap below itself instead. */ .filter-bar { position: sticky; top: var(--header-h); z-index: 100; background: var(--glass-strong); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 34px; } #coupons { padding-top: 0; } /* SHADOW ROOM — the active chip carries --sh-brand; without this padding the scroll container would slice the glow clean off. */ .chip-row { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 18px 20px 28px; margin: -6px -20px -16px; overflow-anchor: none; } .chip-row::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; font-size: .86rem; font-weight: 700; color: var(--ink-2); background: var(--surface-alt); border: 1px solid var(--border); padding: 8px 17px; border-radius: var(--r-pill); transition: all .16s var(--ease); white-space: nowrap; } .chip:hover { border-color: var(--brand); color: var(--brand); } .chip.active { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); } .chip-count { opacity: .65; font-weight: 600; } /* ============================================================ SECTIONS ============================================================ */ .section { padding: 60px 0; } .section-alt { background: var(--surface-alt); } /* Anchor targets stop under the sticky header instead of behind it. Without this every nav link (Trending, Coupons, Stores, …) scrolled its own heading up beneath the bar. */ section[id], .filter-bar { scroll-margin-top: calc(var(--header-h) + 16px); } /* the coupon grid also has the filter bar pinned above it */ #coupons { scroll-margin-top: calc(var(--header-h) + 8px); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; } .section-head.center { justify-content: center; text-align: center; } .section-title { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 8px; } .section-title-icon { width: 26px; height: 26px; flex-shrink: 0; } .flame-icon { stroke: #f4511e; fill: rgba(244, 81, 30, 0.15); } .section-sub { color: var(--ink-3); font-size: .92rem; margin-top: 5px; } /* ============================================================ SLIDERS ============================================================ */ .slider { position: relative; } /* SHADOW ROOM — cards inside lift on hover (-4px) and carry --sh-3. Padding gives that room inside the scroll box; the negative margin only repositions the box so cards still line up with the container. */ .slider-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* --sh-3 blurs 48px, so the bottom needs real room or the card shadows get sliced off by the scroll container. */ /* the side inset matches .container's 20px padding exactly — pulling wider than that bled past the viewport and gave the whole page a few pixels of horizontal scroll */ padding: 22px 20px 46px; margin: -22px -20px -30px; /* Snap positions are measured from the scrollport's border box, so without this a snapped card parks flush against the track edge and eats the padding above — the gutter only survives at scrollLeft 0. scroll-padding moves the snapport inward to match. */ scroll-padding: 0 20px; /* overflow clips at the padding box, so a card sliding out had its shadow sheared off against a hard vertical line. Fading the last few pixels turns that cut into an edge you cannot see. Horizontal only — the vertical shadow room is left alone. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); /* stops Chrome's scroll anchoring from nudging the track sideways when lazy-loaded logos settle */ overflow-anchor: none; } .slider-track::-webkit-scrollbar { display: none; } .slider-track > * { scroll-snap-align: start; flex: 0 0 296px; } .slider-track-stores > * { flex: 0 0 152px; } .slider-nav { display: flex; gap: 8px; } .slider-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; transition: all .16s var(--ease); } .slider-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .slider-arrow:hover { border-color: var(--brand); background: var(--brand); } .slider-arrow:hover svg { stroke: #fff; } .slider-arrow:disabled { opacity: .35; cursor: not-allowed; } .slider-arrow:disabled:hover { border-color: var(--border-strong); background: var(--surface); } .slider-arrow:disabled:hover svg { stroke: var(--ink-2); } /* ============================================================ COUPON CARDS (ticket style) ============================================================ */ .coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 22px; } /* ---------- the ticket silhouette ---------- Earlier this card was a plain rounded box with two circles painted over its edges, and the box-shadow gave the game away: it traced a full rectangle straight past the "cut-outs", so the notches read as stickers rather than holes. Now the paper is genuinely die-cut. .ticket-face is masked by two radial gradients (mask-composite: intersect keeps only what BOTH masks allow), so those bites are real absences of pixels. The elevation then lives on .ticket-shell, one level up, as a drop-shadow() — a filter that follows the alpha channel it is given, so the shadow curves into each notch instead of cutting across it. The shadow has to sit on a wrapper because filter is applied before mask on the same element: putting both on .ticket-face would mask the shadow away, and putting the filter on .coupon-card itself would shadow every word of the card's text too. */ .coupon-card { --notch-r: 13px; /* notch radius */ --notch-y: 83px; /* tear line, measured up from the card's bottom edge */ position: relative; border-radius: var(--r-md); padding: 20px 20px 0; display: flex; flex-direction: column; transition: transform .2s var(--ease); } /* content rides above the paper. The exclusion matters: this selector outranks any positioning a child sets for itself, so anything that needs to position itself must be listed here. */ .coupon-card > *:not(.ticket-shell) { position: relative; z-index: 1; } /* Blur radius is deliberately kept well under --notch-r. drop-shadow traces the die-cut silhouette, so the paper around a notch casts into the notch: blur it wider than the cut is deep and the shadow closes over the hole, turning a clean bite into a grey smudge. Staying tight keeps the shadow as a rim on the cut rather than a fill. */ .ticket-shell { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(16,20,28,.05)) drop-shadow(0 3px 5px rgba(16,20,28,.07)); transition: filter .2s var(--ease); } .ticket-face { display: block; width: 100%; height: 100%; background: var(--surface); border-radius: var(--r-md); /* an inset ring rather than a border: the mask clips it, so the outline stops cleanly at each cut instead of ringing the hole */ box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .2s var(--ease); -webkit-mask-image: radial-gradient(circle var(--notch-r) at 0 calc(100% - var(--notch-y)), rgba(0,0,0,0) 97%, #000 100%), radial-gradient(circle var(--notch-r) at 100% calc(100% - var(--notch-y)), rgba(0,0,0,0) 97%, #000 100%); mask-image: radial-gradient(circle var(--notch-r) at 0 calc(100% - var(--notch-y)), rgba(0,0,0,0) 97%, #000 100%), radial-gradient(circle var(--notch-r) at 100% calc(100% - var(--notch-y)), rgba(0,0,0,0) 97%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .coupon-card:hover { transform: translateY(-4px); } .coupon-card:hover .ticket-shell { filter: drop-shadow(0 2px 3px rgba(16,20,28,.08)) drop-shadow(0 8px 11px rgba(16,20,28,.13)); } .coupon-card:hover .ticket-face { box-shadow: inset 0 0 0 1px var(--border-strong); } /* logo anchors the left, discount pill the right — both flush with the card's content edges, so the pill reads as deliberately placed */ .card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card-logo { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; flex-shrink: 0; } /* the pill states the headline rate; the line under it states the ceiling, so a "60% OFF" badge can't be read as unlimited */ .discount-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; } .discount-cap { font-size: .645rem; font-weight: 700; color: var(--ink-4); letter-spacing: .01em; white-space: nowrap; } .discount-badge { background: var(--brand-tint); color: var(--brand-dark); font-size: .76rem; font-weight: 800; letter-spacing: .01em; padding: 7px 12px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; } .store-name { display: block; margin-top: 15px; font-size: .7rem; font-weight: 800; color: var(--ink-4); text-transform: uppercase; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coupon-title { font-size: 1.06rem; font-weight: 800; letter-spacing: -.022em; margin-top: 5px; line-height: 1.32; } .coupon-desc { font-size: .855rem; color: var(--ink-3); margin-top: 7px; line-height: 1.5; flex: 1; } /* the meta row is pushed clear of the description, which absorbs the slack so every card in a row tears at the same height */ .card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; color: var(--green); background: var(--green-tint); padding: 4px 9px; border-radius: var(--r-pill); } .verified-badge svg { width: 11px; height: 11px; fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; } .card-expiry { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--ink-4); font-weight: 600; } .card-expiry svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* ---------- perforated tear line ---------- The notches themselves are cut by .ticket-face's mask, so all that is left here is the perforation. The card pads 20px, and each notch reaches --notch-r (13px) in from the card edge. -7px of side margin therefore starts the dashes at exactly 13px — flush with where the two cuts end, so the line spans the gap between them and never draws across a hole. The line's position is what fixes --notch-y at 83px: .card-action is 16 + 46 + 20 = 82px tall from the card's bottom edge, and this 2px border sits directly on top of it, centred at 83px. Keep those three numbers and --notch-y in sync. */ .card-cut { margin: 16px -7px 0; border-top: 2px dashed var(--border-strong); } /* the CTA and the save heart share the stub below the tear */ .card-action { display: flex; align-items: center; gap: 10px; padding: 16px 0 20px; } .btn-get { flex: 1; min-width: 0; height: 46px; /* fixed so the tear line stays at --notch-y */ background: var(--brand-grad); color: #fff; padding: 0 16px; border-radius: var(--r-sm); font-weight: 800; font-size: .92rem; box-shadow: var(--sh-brand); transition: filter .16s var(--ease), transform .16s var(--ease); display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-get:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-get:active { transform: translateY(0); } .btn-get svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .btn-get.is-deal { background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand); box-shadow: none; } .btn-get.is-deal:hover { background: var(--brand-tint); } /* ---------- load more ---------- */ .load-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; } .load-more-meter { width: 168px; height: 4px; background: var(--border); border-radius: var(--r-pill); overflow: hidden; } .load-more-meter span { display: block; height: 100%; /* at 12 of 515 the fill is 2%, which rendered as a stray dot rather than a bar — a floor keeps it legible as progress */ min-width: 10px; background: var(--brand-grad); border-radius: var(--r-pill); transition: width .3s var(--ease); } .load-more-count { font-size: .8rem; color: var(--ink-4); font-weight: 600; } .load-more-btn { background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--ink); font-weight: 800; font-size: .9rem; padding: 12px 30px; border-radius: var(--r-pill); box-shadow: var(--sh-1); transition: all .16s var(--ease); } .load-more-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); transform: translateY(-1px); } .load-more-btn:disabled { cursor: default; transform: none; } .load-more-btn.is-loading { color: transparent; /* keeps the button's width steady */ position: relative; } .load-more-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; border: 2px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- scroll reveal ---------- .reveal is applied by JS, never in the markup: if the script fails the sections must not be left sitting at opacity 0. */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- empty state ---------- */ .empty-state { text-align: center; padding: 56px 20px; } .empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); margin-bottom: 14px; } .empty-icon svg { width: 32px; height: 32px; stroke: currentColor; } .empty-state h3 { font-size: 1.2rem; font-weight: 800; } .empty-state p { color: var(--ink-3); font-size: .92rem; margin: 6px 0 20px; } /* ============================================================ STORE TILES ============================================================ */ .store-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .store-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand); } .store-tile img { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; } .store-tile .tile-name { font-size: .84rem; font-weight: 700; color: var(--ink); } .store-tile .tile-count { font-size: .72rem; color: var(--ink-4); font-weight: 600; } /* ============================================================ CATEGORY GRID ============================================================ */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; } .category-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; transition: all .18s var(--ease); } .category-tile:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--sh-2); } .category-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; color: var(--brand); transition: all .18s var(--ease); } .category-icon svg { width: 24px; height: 24px; stroke: currentColor; } .category-tile:hover .category-icon { background: var(--brand); color: #ffffff; } .category-name { font-weight: 700; font-size: .92rem; } .category-count { font-size: .74rem; color: var(--ink-4); font-weight: 600; } /* ============================================================ HOW IT WORKS ============================================================ */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 30px 24px; text-align: center; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .step:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .step-icon { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; background: var(--brand-grad); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-brand); } .step-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .step-num { font-size: .72rem; font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: .1em; } .step h3 { font-size: 1.08rem; font-weight: 800; margin: 6px 0 7px; letter-spacing: -.02em; } .step p { color: var(--ink-3); font-size: .88rem; } /* ============================================================ NEWSLETTER ------------------------------------------------------------ Same trick as the spotlight — the glow lives on its own clipped layer so the band itself never clips anything. ============================================================ */ .newsletter { position: relative; background: var(--surface-dark); color: #fff; padding: 56px 0; } .newsletter-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .newsletter-bg::before { content: ""; position: absolute; left: -80px; bottom: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(244,81,30,.32) 0%, transparent 70%); } .newsletter-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .newsletter-copy h2 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; } .newsletter-copy p { color: #a8b0bd; font-size: .93rem; margin-top: 7px; max-width: 400px; } .newsletter-form { position: relative; display: flex; gap: 9px; flex-wrap: wrap; } .newsletter-form input { padding: 13px 18px; border-radius: var(--r-sm); border: 1px solid #2a2f3a; background: #1a1f28; color: #fff; min-width: 250px; outline: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .newsletter-form input::placeholder { color: #6b7482; } .newsletter-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(244,81,30,.16); } .newsletter-form button { background: var(--brand-grad); color: #fff; padding: 0 26px; border-radius: var(--r-sm); font-weight: 700; font-size: .93rem; transition: filter .16s var(--ease); } .newsletter-form button:hover { filter: brightness(1.07); } .newsletter-msg { position: absolute; top: 100%; left: 0; margin-top: 9px; font-size: .84rem; font-weight: 600; color: #56d99a; } .newsletter-msg.error { color: #ff8a8a; } /* ============================================================ FOOTER ============================================================ */ /* Five even link columns beside a wider brand block. The old 2.2fr+3 grid had no home for the fifth group, so Legal wrapped onto a row of its own and left a hole beside Company. */ .site-footer { background: #0a0d12; color: #99a1ae; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 45%, transparent 100%) 1; } .footer-inner { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 30px 26px; padding-top: 56px; padding-bottom: 44px; align-items: start; } .footer-brand { max-width: 330px; } .footer-brand .brand-word { color: #fff; } .footer-brand p { margin-top: 14px; font-size: .87rem; line-height: 1.65; } .footer-col h4 { color: #fff; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; } .footer-col a { display: block; font-size: .865rem; padding: 5px 0; transition: color .16s var(--ease), transform .16s var(--ease); } .footer-col a:hover { color: var(--brand-light); transform: translateX(3px); } .social-icons { display: flex; gap: 10px; margin-top: 20px; } .social-icons a { width: 40px; height: 40px; border-radius: 12px; background: #151a22; border: 1px solid #232a35; color: #c2cad7; display: flex; align-items: center; justify-content: center; transition: all .18s var(--ease); } .social-icons a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(244, 81, 30, 0.35); } .social-icons svg { width: 18px; height: 18px; } .social-icons svg.icon-fill { fill: currentColor; stroke: none; } .social-icons svg.icon-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .footer-bottom { border-top: 1px solid #171b23; padding: 20px 0; } .footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 10px 28px; flex-wrap: wrap; font-size: .78rem; line-height: 1.6; color: #6b7482; /* the back-to-top button floats at right: 24px — keep prose clear of it */ padding-right: 64px; } .footer-bottom-inner p:first-child { flex-shrink: 0; } .disclosure { flex: 1 1 380px; min-width: 0; text-align: right; } /* ============================================================ MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(10, 13, 18, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .18s var(--ease); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 34px 30px 28px; max-width: 384px; width: 100%; text-align: center; box-shadow: var(--sh-3); animation: popIn .22s var(--ease); } @keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-close { position: absolute; top: 12px; right: 16px; font-size: 1.6rem; line-height: 1; color: var(--ink-4); transition: color .16s var(--ease); } .modal-close:hover { color: var(--ink); } .modal-logo-wrap { display: flex; justify-content: center; margin-bottom: 14px; } .modal-logo { width: 62px; height: 62px; border-radius: var(--r-md); object-fit: contain; } .modal h3 { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; } .modal-title { color: var(--ink-3); font-size: .9rem; margin-top: 4px; } .code-box { display: flex; align-items: stretch; margin-top: 22px; border: 2px dashed var(--brand); border-radius: var(--r-sm); background: var(--brand-tint); overflow: hidden; /* safe: nothing inside casts a shadow */ } .code-box span { flex: 1; padding: 14px 12px; font-weight: 800; font-size: 1.02rem; letter-spacing: .06em; color: var(--ink); display: flex; align-items: center; justify-content: center; word-break: break-all; } /* auto-applied offers have no code to show — the dashed "cut here" frame and the copy button would both be promising something that isn't there */ .code-box.is-auto { border-style: solid; border-color: var(--border); background: var(--surface-alt); } .code-box.is-auto span { color: var(--ink-3); font-weight: 700; letter-spacing: .01em; font-size: .92rem; } .code-box button { background: var(--brand-grad); color: #fff; padding: 0 22px; font-weight: 800; font-size: .88rem; transition: filter .16s var(--ease); flex-shrink: 0; } .code-box button:hover { filter: brightness(1.07); } .modal-cta { width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-grad); color: #fff; padding: 13px 20px; border-radius: var(--r-sm); font-weight: 800; font-size: .93rem; box-shadow: var(--sh-brand); transition: filter .16s var(--ease), transform .16s var(--ease); } .modal-cta:hover { filter: brightness(1.06); transform: translateY(-1px); } .modal-cta:active { transform: translateY(0); } .modal-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .modal-hint { margin-top: 13px; font-size: .83rem; color: var(--ink-3); } .modal-link { display: inline-block; margin-top: 10px; font-size: .83rem; font-weight: 700; color: var(--brand); } .modal-link:hover { text-decoration: underline; } /* ============================================================ TOAST ============================================================ */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 20px); background: #1c2028; color: #fff; padding: 12px 22px; border-radius: var(--r-pill); font-size: .87rem; font-weight: 600; box-shadow: var(--sh-3); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 400; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .footer-inner { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: 1 / -1; max-width: 520px; } .disclosure { text-align: left; } } /* The full row needs ~1000px: brand 190 + nav 400 + search 240 + currency 84 + toggle 38 + gaps. Below that the nav collapses into the sheet rather than being squeezed. */ @media (max-width: 1000px) { .header-search { display: none; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); flex-direction: column; gap: 0; padding: 6px 20px 14px; border-bottom: 1px solid var(--border); box-shadow: var(--sh-2); display: none; margin-left: 0; } .main-nav.open { display: flex; animation: navSheet .18s var(--ease); } .main-nav a { padding: 14px 2px; border-bottom: 1px solid var(--border); font-size: .95rem; color: var(--ink); } .main-nav a:last-child { border-bottom: none; } .main-nav a::after { display: none; } .nav-toggle { display: flex; } } @keyframes navSheet { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 860px) { .slider-nav { display: none; } /* touch scrolling takes over */ .spotlight { padding: 24px; } .spotlight .btn-primary { width: 100%; } /* SHADOW ROOM, touch edition. The desktop track bleeds 4px past the container so hover shadows have room; on touch there is no hover, so the bleed only made cards run flush into the screen edges. Matching the padding to the container's own 20px puts a real gutter back on the first and last card while the track still spans full width. */ .slider-track { padding: 6px 20px 20px; margin: -6px -20px -20px; scroll-padding: 0 20px; } } /* At 375px the bar has ~335px of usable width; brand + currency + theme + hamburger at full size needs ~380 and used to push the hamburger off the edge. Trimming the brand and dropping the globe glyph fits it. */ @media (max-width: 560px) { .header-inner { gap: 8px; } .header-actions { gap: 6px; } .brand { gap: 7px; } .brand-mark { width: 30px; height: 30px; } .brand-word { font-size: .98rem; } .currency-icon { display: none; } .currency-picker { padding: 0 8px; } } @media (max-width: 620px) { .hero { padding: calc(52px + var(--header-h)) 0 48px; } .hero-search { flex-wrap: wrap; border-radius: var(--r-md); padding: 14px; gap: 12px; } .hero-search input { min-width: 0; flex: 1; } .hero-search button { width: 100%; } .stat-strip { gap: 18px; } .stat-div { display: none; } .stat { min-width: 88px; } /* minmax(0,·) not 1fr: a bare 1fr track takes min-content as its automatic minimum, so one nowrap child stretches the track past the viewport and the whole page scrolls sideways. */ .coupon-grid { grid-template-columns: minmax(0, 1fr); } .slider-track > * { flex: 0 0 270px; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-top: 40px; } /* the disclosure goes full-width here, so it clears the fixed back-to-top button vertically instead of horizontally */ .footer-bottom { padding-bottom: 62px; } .footer-bottom-inner { padding-right: 0; font-size: .74rem; } .newsletter-form { width: 100%; } .newsletter-form input { flex: 1; min-width: 0; } .newsletter-form button { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ ============================================================ EXPANDED SECTIONS Flash deals, editor's picks, leaderboard, bank offers, store directory, why-us, reviews, guides, FAQ, prose, tag cloud, back-to-top. ============================================================ ============================================================ */ /* ---------- accessibility helpers ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--brand); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; font-size: .9rem; } .skip-link:focus { left: 0; } .container-narrow { max-width: 820px; } /* ---------- section title icon variants ---------- */ .bolt-icon { stroke: #f4511e; fill: rgba(244, 81, 30, .15); } .star-icon { stroke: #f4511e; fill: rgba(244, 81, 30, .15); } .card-icon { stroke: #f4511e; } /* ============================================================ FLASH DEALS ============================================================ */ .flash-timer { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 9px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-2); } .flash-timer-label { font-size: .74rem; font-weight: 700; color: #9aa2ae; text-transform: uppercase; letter-spacing: .09em; } .flash-clock { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--brand-light); } .flash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; } .flash-card { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--sh-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .flash-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .flash-card img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; object-fit: contain; } .flash-body { flex: 1; min-width: 0; } .flash-store { font-size: .7rem; font-weight: 800; color: var(--ink-4); text-transform: uppercase; letter-spacing: .09em; } .flash-title { font-size: .98rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flash-discount { display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 800; color: var(--brand-dark); background: var(--brand-tint); padding: 3px 9px; border-radius: var(--r-pill); } .flash-cta { flex-shrink: 0; background: var(--brand-grad); color: #fff; padding: 10px 15px; border-radius: var(--r-sm); font-weight: 800; font-size: .82rem; box-shadow: var(--sh-brand); transition: filter .16s var(--ease), transform .16s var(--ease); } .flash-cta:hover { filter: brightness(1.07); transform: translateY(-1px); } /* ============================================================ EDITOR'S PICKS — large feature cards ============================================================ */ .picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; } .pick-card { position: relative; background: var(--surface-dark); color: #fff; border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh-2); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .pick-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); } /* decorative glow sits on its own clipped layer, so the card's own shadow and the CTA glow are never cropped */ .pick-bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .pick-bg::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(244,81,30,.45) 0%, transparent 70%); } .pick-card > *:not(.pick-bg) { position: relative; z-index: 1; } .pick-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .pick-card img { width: 54px; height: 54px; border-radius: 13px; background: #fff; padding: 4px; } .pick-rank { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-light); background: rgba(244,81,30,.18); padding: 5px 11px; border-radius: var(--r-pill); } .pick-discount { font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(135deg, #ffb37d 0%, #ff6a3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .pick-store { font-size: .74rem; font-weight: 800; color: #7d8697; text-transform: uppercase; letter-spacing: .09em; } .pick-title { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; } .pick-desc { font-size: .88rem; color: #a8b0bd; flex: 1; } .pick-cta { align-self: flex-start; background: var(--brand-grad); color: #fff; padding: 11px 22px; border-radius: var(--r-sm); font-weight: 800; font-size: .88rem; box-shadow: var(--sh-brand); transition: filter .16s var(--ease), transform .16s var(--ease); } .pick-cta:hover { filter: brightness(1.07); transform: translateY(-1px); } /* ============================================================ SLIDE WIDTHS for the newer tracks ============================================================ */ .slider-track-cats > * { flex: 0 0 168px; } .slider-track-bank > * { flex: 0 0 274px; } .slider-track-reviews > * { flex: 0 0 330px; } .slider-track-guides > * { flex: 0 0 300px; } /* ============================================================ LEADERBOARD ============================================================ */ .leaderboard { list-style: none; display: flex; flex-direction: column; gap: 10px; } .lb-row { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--sh-1); transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); } .lb-row:hover { transform: translateX(3px); box-shadow: var(--sh-2); border-color: var(--border-strong); } .lb-rank { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--surface-alt); color: var(--ink-3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; } .lb-row.is-top .lb-rank { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand); } .lb-row img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; object-fit: contain; } .lb-body { flex: 1; min-width: 0; } .lb-store { font-size: .7rem; font-weight: 800; color: var(--ink-4); text-transform: uppercase; letter-spacing: .09em; } .lb-title { font-size: .96rem; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-discount { flex-shrink: 0; font-size: .82rem; font-weight: 800; color: var(--brand-dark); background: var(--brand-tint); padding: 6px 13px; border-radius: var(--r-pill); } .lb-cta { flex-shrink: 0; border: 1.5px solid var(--brand); color: var(--brand); padding: 8px 16px; border-radius: var(--r-sm); font-weight: 800; font-size: .82rem; transition: all .16s var(--ease); } .lb-cta:hover { background: var(--brand); color: #fff; } /* ============================================================ BANK OFFERS (Custom Bank & Credit Card Designs) ============================================================ */ .slider-track-bank > * { flex: 0 0 310px; } .bank-card { position: relative; border-radius: 18px; padding: 22px 20px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; color: #ffffff; overflow: hidden; box-shadow: 0 8px 24px rgba(16, 20, 28, 0.16); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.24s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(255, 255, 255, 0.15); } .bank-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 36px rgba(16, 20, 28, 0.32); } .bank-card-glass { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, transparent 40%, rgba(255, 255, 255, 0.05) 100%); pointer-events: none; } .bank-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 2; } .bank-brand { display: flex; align-items: center; gap: 10px; } .bank-logo-img { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #ffffff; padding: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); flex-shrink: 0; } .bank-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); white-space: nowrap; } .bank-chip-graphics { display: flex; align-items: center; gap: 8px; opacity: 0.95; flex-shrink: 0; } .emv-chip { width: 28px; height: 20px; border-radius: 4px; } .contactless-icon { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.85); } .bank-card-body { position: relative; z-index: 2; margin-top: 14px; } .bank-card-type { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.78); margin-bottom: 4px; } .bank-title { font-size: 1.15rem; font-weight: 800; color: #ffffff; line-height: 1.25; letter-spacing: -0.02em; } .bank-desc { font-size: 0.82rem; color: rgba(255, 255, 255, 0.88); margin-top: 5px; line-height: 1.35; } .bank-card-foot { position: relative; z-index: 2; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; } .bank-cap-pill { font-size: 0.74rem; font-weight: 800; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } /* Digital Wallet Pass Styling */ .bank-card.is-digital-wallet { min-height: 215px; padding: 24px 22px; border-radius: 20px; } .bank-card.is-digital-wallet .bank-card-head { align-items: center; } .bank-card.is-digital-wallet .bank-brand { display: flex; align-items: center; } .bank-card.is-digital-wallet .bank-logo-img { height: 38px !important; width: auto !important; max-width: 130px !important; object-fit: contain !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .digital-tap-icon { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.12); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); } .digital-tap-icon svg { width: 14px; height: 14px; stroke: currentColor; } /* Individual Bank & Wallet Theme Colors & Gradients */ .bank-applepay { background: linear-gradient(140deg, #09090b 0%, #16171b 50%, #282a30 100%) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; /* Was 0 12px 32px rgba(0,0,0,.45) — near-black at almost 3x the alpha of every other card, which on the light section behind it read as a grey smear rather than an edge. Matched to the shared elevation. */ box-shadow: var(--sh-2) !important; } .bank-applepay .bank-card-type { color: #a1a1aa; letter-spacing: 0.1em; } .bank-applepay .bank-title { color: #ffffff; font-size: 1.22rem; font-weight: 800; } .bank-applepay .bank-cap-pill { background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; color: #ffffff !important; font-weight: 800; } .bank-gwallet { background: linear-gradient(140deg, #131417 0%, #1e2025 100%) !important; border: 1px solid rgba(66, 133, 244, 0.35) !important; box-shadow: var(--sh-2) !important; position: relative; overflow: hidden; } .bank-gwallet::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #4285F4 0%, #EA4335 30%, #FBBC04 65%, #34A853 100%) !important; z-index: 5; } .bank-gwallet .bank-card-type { color: #8ab4f8; letter-spacing: 0.1em; } .bank-gwallet .bank-title { color: #ffffff; font-size: 1.22rem; font-weight: 800; } .bank-gwallet .bank-cap-pill { background: rgba(66, 133, 244, 0.22) !important; border: 1px solid rgba(66, 133, 244, 0.5) !important; color: #88c0ff !important; font-weight: 800; } .bank-hdfc { background: linear-gradient(135deg, #0A3B73 0%, #001B3A 100%); } .bank-icici { background: linear-gradient(135deg, #8C1920 0%, #E65C00 100%); } .bank-sbi { background: linear-gradient(135deg, #0A2540 0%, #0088CC 100%); } .bank-axis { background: linear-gradient(135deg, #7A0F3C 0%, #A31652 100%); } .bank-kotak { background: linear-gradient(135deg, #D3122A 0%, #002855 100%); } .bank-apay { background: linear-gradient(135deg, #1A202C 0%, #E67E00 100%); } .bank-paytm { background: linear-gradient(135deg, #001E4A 0%, #0099DD 100%); } .bank-phonepe { background: linear-gradient(135deg, #3A106E 0%, #6B21A8 100%); } .bank-onecard { background: linear-gradient(135deg, #141414 0%, #2E2E32 100%); border: 1px solid rgba(255, 215, 0, 0.35); } .bank-chase { background: linear-gradient(135deg, #0A3A6B 0%, #1170CF 100%); } .bank-amex { background: linear-gradient(135deg, #002663 0%, #006FCF 100%); border: 1px solid rgba(255, 255, 255, 0.28); } .bank-barclays { background: linear-gradient(135deg, #002B49 0%, #005A9C 100%); border-left: 4px solid #00AEEF; } /* ============================================================ STORE DIRECTORY ============================================================ */ .directory { display: flex; flex-direction: column; } .dir-group { display: flex; align-items: flex-start; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--border); } .dir-group:last-child { border-bottom: none; } .dir-letter { width: 34px; flex-shrink: 0; font-size: 1.05rem; font-weight: 800; color: var(--brand); } .dir-links { display: flex; flex-wrap: wrap; gap: 8px 18px; } .dir-links button { font-size: .89rem; color: var(--ink-2); font-weight: 600; transition: color .16s var(--ease); } .dir-links button:hover { color: var(--brand); } .dir-count { color: var(--ink-4); font-weight: 600; font-size: .8rem; } /* ============================================================ WHY US ============================================================ */ .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px 22px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .why-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--border-strong); } .why-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .why-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .why-card h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; } .why-card p { font-size: .875rem; color: var(--ink-3); } /* ============================================================ REVIEWS (Testimonials with Cartoon Avatars) ============================================================ */ .slider-track-reviews > * { flex: 0 0 340px; } .review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .review-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-light); } .stars { display: flex; gap: 3px; } .stars svg { width: 16px; height: 16px; fill: #f5a623; stroke: none; } .stars svg.empty { fill: var(--border-strong); } .review-quote { font-size: .93rem; color: var(--ink-2); line-height: 1.6; flex: 1; font-style: italic; } .review-person { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .review-avatar-img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); border: 2px solid var(--surface); transition: transform .2s var(--ease); } .review-card:hover .review-avatar-img { transform: scale(1.08); } .review-name { font-size: .92rem; font-weight: 800; color: var(--ink); } .review-city { font-size: .78rem; color: var(--ink-3); font-weight: 600; } /* ============================================================ GUIDES ============================================================ */ .guide-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px 22px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--sh-1); text-align: left; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .guide-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand); } .guide-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; } .guide-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .guide-tag { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); } .guide-title { font-size: 1.04rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; } .guide-excerpt { font-size: .86rem; color: var(--ink-3); flex: 1; } .guide-read { font-size: .78rem; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 6px; } .guide-read svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } /* ============================================================ FAQ ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; /* safe: nothing inside casts a shadow */ transition: border-color .16s var(--ease), box-shadow .16s var(--ease); } .faq-item[open] { border-color: var(--brand); box-shadow: var(--sh-1); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; font-size: .96rem; font-weight: 700; cursor: pointer; list-style: none; transition: color .16s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--brand); } .faq-chevron { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); } .faq-item[open] .faq-chevron { transform: rotate(180deg); stroke: var(--brand); } .faq-answer { padding: 0 20px 18px; font-size: .89rem; color: var(--ink-3); line-height: 1.65; } /* ============================================================ PROSE (SEO copy) ============================================================ */ .prose h2 { margin-bottom: 18px; } .prose h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; margin-top: 28px; margin-bottom: 8px; } .prose p { font-size: .95rem; color: var(--ink-2); line-height: 1.75; } .prose p + p { margin-top: 12px; } .prose a { color: var(--brand); font-weight: 700; } .prose a:hover { text-decoration: underline; } .prose strong { font-weight: 800; color: var(--ink); } /* ============================================================ TAG CLOUD ============================================================ */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .tag-link { font-size: .85rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: 9px 16px; border-radius: var(--r-pill); transition: all .16s var(--ease); } .tag-link:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); transform: translateY(-2px); } /* ============================================================ BACK TO TOP ============================================================ */ .back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 150; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-brand); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .22s var(--ease), transform .22s var(--ease), filter .16s var(--ease); } .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { filter: brightness(1.08); } .back-to-top svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ RESPONSIVE — expanded sections ============================================================ */ @media (max-width: 860px) { .flash-timer { align-self: flex-start; } .lb-cta { display: none; } /* the whole row stays tappable */ .dir-group { flex-direction: column; gap: 8px; } } @media (max-width: 620px) { .flash-grid { grid-template-columns: minmax(0, 1fr); } .flash-cta { padding: 9px 12px; font-size: .78rem; } .picks-grid { grid-template-columns: minmax(0, 1fr); } .pick-discount { font-size: 2rem; } .slider-track-reviews > * { flex: 0 0 280px; } .slider-track-guides > * { flex: 0 0 262px; } .slider-track-bank > * { flex: 0 0 250px; } .lb-row { gap: 12px; padding: 12px 14px; } .lb-discount { font-size: .76rem; padding: 5px 10px; } .back-to-top { right: 16px; bottom: 16px; } } /* ============================================================ ============================================================ INTERACTIVE FEATURES Theme toggle, savings calculator, sort bar, saved deals, status badges, votes, sharing, store drawer, confetti. ============================================================ ============================================================ */ /* ---------- currency picker ---------- Custom listbox rather than a