/* ========================================================================== Affiliate 2026 — public site Ported from the webtechlogix Next.js frontend (Tailwind) to plain CSS. ========================================================================== */ :root { /* palette (mirrors the Tailwind tokens used in the original) */ --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #F59E0B; --orange-400: #FB923C; --orange-500: #F97316; --rose-500: #F43F5E; --emerald-400: #34D399; --emerald-500: #10B981; --indigo-400: #818CF8; --indigo-600: #4F46E5; --purple-600: #9333EA; --indigo-800: #3730A3; --ink-900: #0a0a0f; /* page dark */ --ink-800: #0F0F14; /* section dark */ --ink-700: #13131b; /* header + cards */ --ink-600: #1a1a25; /* dropdown */ --fg: #111827; --fg-muted: #6B7280; --line: #E5E7EB; --bg: #FFFFFF; --bg-muted: #F9FAFB; --w-white-05: rgba(255, 255, 255, .05); --w-white-10: rgba(255, 255, 255, .1); } * { box-sizing: border-box; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--fg); background: var(--bg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* overflow-x lives on body only — an explicit overflow on would make it the scroll container, which stops Bootstrap's modal scroll-lock working and shifts the page sideways when a modal opens. */ html { scroll-behavior: smooth; } a { text-decoration: none; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; margin: 0; } img { max-width: 100%; } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .wrap { padding: 0 24px; } } @media (min-width: 1024px) { .wrap { padding: 0 32px; } } /* Ambient glow blobs used on dark pages */ .glow { position: absolute; inset: 0; opacity: .4; pointer-events: none; overflow: hidden; } .glow span { position: absolute; border-radius: 999px; filter: blur(160px); display: block; } .glow .g1 { top: -160px; left: 25%; width: 600px; height: 600px; background: rgba(79, 70, 229, .2); } .glow .g2 { top: 50%; right: 25%; width: 500px; height: 500px; background: rgba(147, 51, 234, .2); } .glow .g3 { bottom: 0; left: 33%; width: 500px; height: 500px; background: rgba(225, 29, 72, .15); } /* ========================================================================== HEADER ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1050; } .topbar { background: linear-gradient(to right, var(--orange-500), var(--amber-500)); color: #fff; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 12px; } .topbar a { color: #fff; font-weight: 500; } .topbar a:hover { text-decoration: underline; } .topbar-date { display: none; } @media (min-width: 640px) { .topbar-date { display: inline; } } .navbar { background: var(--ink-700); transition: box-shadow .2s, background .2s; } .navbar.is-scrolled { background: rgba(19, 19, 27, .95); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; } .brand-logo { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; } @media (min-width: 640px) { .brand-logo { font-size: 36px; } } .brand-logo .b1 { color: var(--amber-400); } .brand-logo .b2 { color: #fff; } .brand-logo img { height: 48px; width: auto; } @media (min-width: 640px) { .brand-logo img { height: 56px; } } @media (min-width: 1024px) { .brand-logo img { height: 64px; } } .nav-main { display: none; flex: 1; align-items: center; justify-content: center; gap: 4px; } @media (min-width: 1024px) { .nav-main { display: flex; } } .nav-link { border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .9); transition: color .15s; display: inline-flex; align-items: center; gap: 4px; } .nav-link:hover, .nav-link.active { color: var(--amber-400); } /* blog dropdown */ .nav-drop { position: relative; } .nav-drop-menu { position: absolute; left: 0; top: 100%; padding-top: 8px; visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; } .nav-drop:hover .nav-drop-menu { visibility: visible; opacity: 1; } .nav-drop:hover .nav-link .chev { transform: rotate(180deg); } .chev { transition: transform .2s; font-size: 13px; } .nav-drop-inner { width: 256px; overflow: hidden; border-radius: 12px; border: 1px solid var(--w-white-10); background: var(--ink-600); box-shadow: 0 24px 48px rgba(0, 0, 0, .5); } .nav-drop-head { border-bottom: 1px solid var(--w-white-10); background: var(--w-white-05); padding: 10px 16px; } .nav-drop-head span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-400); } .nav-drop-inner a { display: block; padding: 10px 16px; font-size: 14px; color: rgba(255, 255, 255, .85); transition: background .15s, color .15s; } .nav-drop-inner a:hover { background: var(--w-white-05); color: var(--amber-400); } .nav-drop-all { border-top: 1px solid var(--w-white-10); font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-400) !important; } .nav-actions { display: flex; align-items: center; gap: 8px; } .btn-subscribe { display: none; align-items: center; gap: 6px; border-radius: 999px; background: var(--amber-500); padding: 8px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-700); } @media (min-width: 640px) { .btn-subscribe { display: inline-flex; } } .btn-subscribe:hover { background: var(--amber-400); color: var(--ink-700); } .icon-btn { display: inline-flex; height: 40px; width: 40px; align-items: center; justify-content: center; border-radius: 8px; border: 0; background: transparent; color: rgba(255, 255, 255, .9); cursor: pointer; transition: background .15s, color .15s; font-size: 18px; } .icon-btn:hover { background: var(--w-white-10); color: var(--amber-400); } .icon-btn.only-mobile { display: inline-flex; } @media (min-width: 1024px) { .icon-btn.only-mobile { display: none; } } .search-panel { border-top: 1px solid var(--w-white-10); background: var(--ink-700); display: none; } .search-panel.open { display: block; } .search-panel form { display: flex; gap: 8px; padding: 16px 0; } .search-panel input { flex: 1; border-radius: 8px; border: 1px solid var(--w-white-10); background: var(--w-white-05); padding: 12px 16px; font-size: 14px; color: #fff; outline: none; } .search-panel input::placeholder { color: rgba(255, 255, 255, .5); } .search-panel input:focus { border-color: var(--amber-400); box-shadow: 0 0 0 1px var(--amber-400); } .search-panel button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: var(--amber-500); padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; } .search-panel button:hover { background: var(--amber-400); } .mobile-menu { border-top: 1px solid var(--w-white-10); background: var(--ink-700); display: none; } .mobile-menu.open { display: block; } @media (min-width: 1024px) { .mobile-menu, .mobile-menu.open { display: none; } } .mobile-menu nav { padding: 16px 0; display: flex; flex-direction: column; gap: 4px; } .mobile-link { display: block; border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .9); } .mobile-link:hover { background: var(--w-white-05); color: var(--amber-400); } .mobile-link.active { background: rgba(245, 158, 11, .1); color: var(--amber-400); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { position: relative; overflow: hidden; background: var(--ink-900); color: #fff; } .site-footer .glow .g1 { top: -160px; left: 25%; } .site-footer .glow .g2 { bottom: -160px; right: 25%; top: auto; } .newsletter-band { position: relative; border-bottom: 1px solid var(--w-white-05); } .newsletter-card { position: relative; overflow: hidden; border-radius: 24px; padding: 32px; background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600), var(--indigo-800)); } @media (min-width: 640px) { .newsletter-card { padding: 48px; } } .newsletter-grid { display: grid; gap: 32px; position: relative; } @media (min-width: 1024px) { .newsletter-grid { grid-template-columns: 1fr 1fr; align-items: center; } } .newsletter-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-300); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } .newsletter-card h3 { margin-top: 16px; font-size: 30px; line-height: 1.2; color: #fff; } @media (min-width: 640px) { .newsletter-card h3 { font-size: 36px; } } .newsletter-card p { margin-top: 12px; max-width: 32rem; font-size: 16px; color: rgba(255, 255, 255, .85); } .newsletter-form { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 640px) { .newsletter-form { flex-direction: row; } } .newsletter-form input { flex: 1; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .95); padding: 14px 20px; font-size: 14px; color: #111827; outline: none; } .newsletter-form button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: #111827; padding: 14px 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; cursor: pointer; } .newsletter-form button:hover { background: #000; } .trust-band { position: relative; border-bottom: 1px solid var(--w-white-05); } .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 32px 0; } @media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } } .trust-item { display: flex; align-items: center; gap: 12px; } .trust-ico { display: grid; place-items: center; height: 44px; width: 44px; flex-shrink: 0; border-radius: 12px; font-size: 19px; } .trust-ico.emerald { background: rgba(16, 185, 129, .1); color: var(--emerald-400); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .2); } .trust-ico.amber { background: rgba(245, 158, 11, .1); color: var(--amber-400); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .2); } .trust-ico.indigo { background: rgba(79, 70, 229, .1); color: var(--indigo-400); box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .2); } .trust-ico.rose { background: rgba(244, 63, 94, .1); color: var(--rose-500); box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .2); } .trust-item b { display: block; font-size: 14px; font-weight: 700; color: #fff; } .trust-item span { font-size: 12px; color: rgba(255, 255, 255, .5); } .footer-main { position: relative; padding: 64px 0; } .footer-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(12, 1fr); } } .fc-about { grid-column: span 4; } .fc-quick { grid-column: span 2; } .fc-cats { grid-column: span 3; } .fc-legal { grid-column: span 3; } @media (max-width: 1023px) { .fc-about, .fc-quick, .fc-cats, .fc-legal { grid-column: auto; } } .footer-logo { font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; display: inline-block; } .footer-logo img { height: 48px; width: auto; } .footer-logo span { background: linear-gradient(to right, var(--amber-400), var(--orange-500)); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer-about { margin-top: 20px; max-width: 28rem; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .65); } .footer-follow { margin-top: 24px; } .footer-follow h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-400); } .social-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } .social-link { display: inline-flex; height: 40px; width: 40px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--w-white-10); background: var(--w-white-05); color: rgba(255, 255, 255, .7); transition: all .15s; } .social-link:hover { background: var(--w-white-10); color: #fff; } .footer-col h3 { position: relative; display: inline-block; padding-bottom: 8px; font-size: 16px; font-weight: 700; letter-spacing: .05em; color: #fff; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 40px; border-radius: 999px; } .footer-col.a-amber h3::after { background: linear-gradient(to right, var(--amber-400), var(--orange-500)); } .footer-col.a-indigo h3::after { background: linear-gradient(to right, var(--indigo-400), var(--purple-600)); } .footer-col.a-emerald h3::after { background: linear-gradient(to right, var(--emerald-400), #14B8A6); } .footer-col ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; } .footer-col a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .7); transition: color .15s, gap .15s; } .footer-col a:hover { color: var(--amber-400); gap: 8px; } .footer-col a .arw { opacity: 0; transition: opacity .15s; font-size: 11px; } .footer-col a:hover .arw { opacity: 1; } .footer-col a .lico { color: var(--emerald-400); font-size: 13px; } .footer-bottom { position: relative; border-top: 1px solid var(--w-white-05); background: rgba(0, 0, 0, .3); } .footer-bottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; font-size: 12px; } @media (min-width: 640px) { .footer-bottom-inner { flex-direction: row; } } .footer-bottom a, .footer-bottom div { color: rgba(255, 255, 255, .6); } .footer-bottom a:hover { color: var(--amber-400); } .footer-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; } /* ========================================================================== SHARED PIECES ========================================================================== */ .section { padding: 64px 0; } @media (min-width: 640px) { .section { padding: 80px 0; } } .sec-white { background: var(--bg); } .sec-muted { background: var(--bg-muted); } .sec-dark { background: var(--ink-800); color: #fff; } .sec-darker { background: var(--ink-900); color: #fff; } .sec-dark h2, .sec-darker h2, .sec-dark h3, .sec-darker h3 { color: #fff; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; } .sec-head h2 { font-size: 28px; margin-bottom: 5px; } .sec-head p { margin: 0; color: var(--fg-muted); font-size: 15px; } .sec-dark .sec-head p, .sec-darker .sec-head p { color: rgba(255, 255, 255, .6); } .eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .section-heading { font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; font-weight: 700; letter-spacing: -.02em; } /* ========================================================================== HOME SECTIONS ========================================================================== */ .home-sec { padding: 64px 0; } @media (min-width: 640px) { .home-sec { padding: 80px 0; } } .home-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; } @media (min-width: 640px) { .home-head { flex-direction: row; align-items: flex-end; gap: 16px; } } .home-head h2 { font-size: 30px; } @media (min-width: 640px) { .home-head h2 { font-size: 36px; } } .home-head p { margin-top: 8px; font-size: 14px; color: #6B7280; } .home-head-c { text-align: center; } .home-head-c h2 { font-size: 30px; } @media (min-width: 640px) { .home-head-c h2 { font-size: 36px; } } .home-head-c p { margin-top: 8px; } .more-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--indigo-600); transition: gap .15s; } .more-link:hover { gap: 8px; color: var(--indigo-600); } .more-link.orange { color: var(--orange-400); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } /* 1 — hero featured */ .hf { padding: 32px 0 48px; } @media (min-width: 1024px) { .hf { padding: 48px 0 48px; } } .hf-grid { display: grid; gap: 24px; } @media (min-width: 1024px) { .hf-grid { grid-template-columns: 7fr 5fr; } } .hf-lead { position: relative; overflow: hidden; border-radius: 16px; display: block; } .hf-lead-img { position: relative; aspect-ratio: 16 / 11; width: 100%; overflow: hidden; background: #F3F4F6; } .hf-lead-img img { height: 100%; width: 100%; object-fit: cover; transition: transform .7s; } .hf-lead:hover .hf-lead-img img { transform: scale(1.03); } .hf-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.3) 45%, transparent); } .hf-lead-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; } @media (min-width: 640px) { .hf-lead-body { padding: 32px; } } .pill-cat { display: inline-flex; align-items: center; border-radius: 999px; background: var(--indigo-600); padding: 4px 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #fff; } .hf-lead-body h1 { margin-top: 16px; font-size: 24px; line-height: 1.2; color: #fff; } @media (min-width: 640px) { .hf-lead-body h1 { font-size: 30px; } } @media (min-width: 1024px) { .hf-lead-body h1 { font-size: 36px; } } .meta-dark { margin-top: 16px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255,255,255,.8); } .meta-dark .dot { height: 4px; width: 4px; border-radius: 999px; background: rgba(255,255,255,.6); } .meta-dark .by { font-weight: 500; text-transform: uppercase; letter-spacing: .05em; } .hf-side { display: flex; flex-direction: column; gap: 16px; } .hf-item { display: flex; gap: 16px; } .hf-item-img { position: relative; height: 96px; width: 128px; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: #F3F4F6; } @media (min-width: 640px) { .hf-item-img { height: 112px; width: 160px; } } .hf-item-img img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; } .hf-item:hover .hf-item-img img { transform: scale(1.05); } .hf-item-body { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; } .hf-item-body h3 { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #111827; } @media (min-width: 640px) { .hf-item-body h3 { font-size: 16px; } } .hf-item:hover .hf-item-body h3 { color: var(--indigo-600); } .meta-light { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; } .meta-light .dot { height: 4px; width: 4px; border-radius: 999px; background: #D1D5DB; } /* 2 — trending coupons */ .trend-sec { position: relative; overflow: hidden; background: var(--ink-900); padding: 80px 0; } @media (min-width: 640px) { .trend-sec { padding: 96px 0; } } .trend-sec .glow { opacity: .5; } .trend-sec .glow .g1 { top: -128px; left: 25%; width: 500px; height: 500px; background: rgba(79,70,229,.2); } .trend-sec .glow .g2 { bottom: -128px; right: 25%; top: auto; width: 500px; height: 500px; background: rgba(147,51,234,.2); } .trend-head h2 { font-size: 36px; font-weight: 700; letter-spacing: -.025em; color: #fff; } @media (min-width: 640px) { .trend-head h2 { font-size: 48px; } } .trend-head p { margin-top: 12px; font-size: 16px; color: #9CA3AF; } .pill-active { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(16,185,129,.3); background: rgba(16,185,129,.1); padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--emerald-400); } .pill-active .dot { height: 8px; width: 8px; border-radius: 999px; background: var(--emerald-400); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; } .browse-all { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--w-white-10); background: var(--w-white-05); padding: 14px 28px; font-size: 14px; font-weight: 600; color: #fff; backdrop-filter: blur(4px); } .browse-all:hover { border-color: rgba(255,255,255,.2); background: var(--w-white-10); color: #fff; } /* 3 — category grid */ .cat-sec { position: relative; overflow: hidden; background: var(--ink-800); padding: 64px 0; } @media (min-width: 640px) { .cat-sec { padding: 80px 0; } } .cat-sec .home-head h2 { color: #fff; } .cat-sec .home-head p { color: rgba(255,255,255,.6); } .cat-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .cat-grid { gap: 20px; } } @media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } } .cat-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--w-white-05); padding: 20px; transition: all .2s; display: block; } @media (min-width: 640px) { .cat-card { padding: 24px; } } .cat-card:hover { border-color: var(--w-white-10); transform: translateY(-2px); } .cat-bg { position: absolute; inset: 0; opacity: .8; } .cat-blob { position: absolute; right: -48px; top: -48px; height: 128px; width: 128px; border-radius: 999px; filter: blur(48px); } .cat-in { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .cat-in h3 { font-size: 16px; font-weight: 700; color: #fff; } @media (min-width: 640px) { .cat-in h3 { font-size: 18px; } } .cat-in p { margin-top: 4px; font-size: 14px; } .cat-ico { display: grid; place-items: center; height: 40px; width: 40px; flex-shrink: 0; border-radius: 8px; font-size: 18px; backdrop-filter: blur(4px); } .p-1 .cat-bg { background: linear-gradient(to bottom right, #3B0764, rgba(88,28,135,.3)); } .p-1 .cat-blob { background: rgba(168,85,247,.2); } .p-1 .cat-ico { background: rgba(168,85,247,.2); } .p-1 p { color: #D8B4FE; } .p-2 .cat-bg { background: linear-gradient(to bottom right, #022C22, rgba(6,78,59,.3)); } .p-2 .cat-blob { background: rgba(16,185,129,.2); } .p-2 .cat-ico { background: rgba(16,185,129,.2); } .p-2 p { color: #6EE7B7; } .p-3 .cat-bg { background: linear-gradient(to bottom right, #4C0519, rgba(136,19,55,.3)); } .p-3 .cat-blob { background: rgba(244,63,94,.2); } .p-3 .cat-ico { background: rgba(244,63,94,.2); } .p-3 p { color: #FDA4AF; } .p-4 .cat-bg { background: linear-gradient(to bottom right, #4A044E, rgba(112,26,117,.3)); } .p-4 .cat-blob { background: rgba(217,70,239,.2); } .p-4 .cat-ico { background: rgba(217,70,239,.2); } .p-4 p { color: #F0ABFC; } .p-5 .cat-bg { background: linear-gradient(to bottom right, #451A03, rgba(120,53,15,.3)); } .p-5 .cat-blob { background: rgba(245,158,11,.2); } .p-5 .cat-ico { background: rgba(245,158,11,.2); } .p-5 p { color: #FCD34D; } .p-6 .cat-bg { background: linear-gradient(to bottom right, #172554, rgba(30,58,138,.3)); } .p-6 .cat-blob { background: rgba(59,130,246,.2); } .p-6 .cat-ico { background: rgba(59,130,246,.2); } .p-6 p { color: #93C5FD; } .p-7 .cat-bg { background: linear-gradient(to bottom right, #500724, rgba(131,24,67,.3)); } .p-7 .cat-blob { background: rgba(236,72,153,.2); } .p-7 .cat-ico { background: rgba(236,72,153,.2); } .p-7 p { color: #F9A8D4; } /* 4 — weekly latest (4-up) */ .wl-grid { margin-top: 40px; display: grid; gap: 32px; } @media (min-width: 1024px) { .wl-grid { grid-template-columns: repeat(4, 1fr); } } .wl-img { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; border-radius: 12px; background: #E5E7EB; } .wl-img img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; } .wl-card:hover .wl-img img { transform: scale(1.05); } .wl-card h3 { margin-top: 16px; font-size: 16px; font-weight: 600; line-height: 1.4; color: #111827; } .wl-card:hover h3 { color: var(--indigo-600); } /* 5 — three column editorial */ .tce-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .tce-grid { grid-template-columns: repeat(3, 1fr); } } .tce-col header { margin-bottom: 24px; } .tce-col header h2 { font-size: 24px; color: #111827; } .tce-col header p { margin-top: 4px; color: #9CA3AF; } .tce-boxed { border-radius: 16px; border: 1px solid #E5E7EB; background: rgba(249,250,251,.5); padding: 24px; } .tce-rows { display: flex; flex-direction: column; gap: 16px; } .tce-row { border-top: 1px solid #E5E7EB; padding-top: 16px; } .tce-boxed .tce-row:first-child { border-top: 0; padding-top: 0; } .tce-row a { display: flex; gap: 12px; } .tce-row .thumb { position: relative; height: 64px; width: 80px; flex-shrink: 0; overflow: hidden; border-radius: 6px; background: #F3F4F6; } .tce-row .thumb.sm { height: 48px; width: 48px; } .tce-row .thumb img { height: 100%; width: 100%; object-fit: cover; } .tce-row h3 { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #111827; } .tce-row:hover h3 { color: var(--indigo-600); } .tce-meta { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; } .tce-meta .sep { color: #D1D5DB; } /* 6 — fashion / lifestyle editorial */ .fe-sec { background: var(--ink-800); padding: 64px 0; } @media (min-width: 640px) { .fe-sec { padding: 80px 0; } } .fe-grid { margin-top: 40px; display: grid; gap: 24px; } @media (min-width: 1024px) { .fe-grid { grid-template-columns: repeat(2, 1fr); } } .fe-feature { position: relative; overflow: hidden; border-radius: 16px; display: block; } .fe-feature-img { position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; background: #1F2937; } .fe-feature-img img { height: 100%; width: 100%; object-fit: cover; transition: transform .7s; } .fe-feature:hover .fe-feature-img img { transform: scale(1.05); } .fe-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.3) 45%, transparent); } .fe-feature-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; } @media (min-width: 640px) { .fe-feature-body { padding: 32px; } } .fe-feature-body h3 { margin-top: 12px; font-size: 24px; line-height: 1.2; color: #fff; } @media (min-width: 640px) { .fe-feature-body h3 { font-size: 30px; } } .fe-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .fe-2x2 { gap: 24px; } } .fe-tile { position: relative; overflow: hidden; border-radius: 12px; display: block; } .fe-tile-img { position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; background: #1F2937; } .fe-tile-img img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; } .fe-tile:hover .fe-tile-img img { transform: scale(1.1); } .fe-tile-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2) 45%, transparent); } .fe-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; color: #fff; } .fe-tile-body h4 { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #fff; } .pill-cat.sm { padding: 2px 10px; font-size: 10px; } /* 7 — featured brands */ .fb-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .fb-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .fb-grid { grid-template-columns: repeat(6, 1fr); } } .fb-card { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid #E5E7EB; background: #fff; padding: 20px; transition: all .2s; } .fb-card:hover { transform: translateY(-2px); border-color: rgba(79,70,229,.3); box-shadow: 0 10px 20px rgba(0,0,0,.08); } .fb-logo { display: flex; height: 64px; width: 100%; align-items: center; justify-content: center; } .fb-logo img { max-height: 48px; width: auto; object-fit: contain; transition: transform .2s; } .fb-card:hover .fb-logo img { transform: scale(1.05); } .fb-logo .txt { font-size: 18px; font-weight: 700; color: #374151; } .fb-name { margin-top: 12px; text-align: center; font-size: 12px; font-weight: 500; color: #111827; } .fb-count { margin-top: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--indigo-600); } /* 8 — editor's choice boxed */ .gc-box { border-radius: 16px; border: 1px solid #E5E7EB; background: #fff; padding: 32px; box-shadow: 0 1px 2px rgba(0,0,0,.05); } @media (min-width: 640px) { .gc-box { padding: 40px; } } .gc-grid { margin-top: 40px; display: grid; gap: 32px; } @media (min-width: 768px) { .gc-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .gc-grid { grid-template-columns: repeat(3, 1fr); } } .gc-img { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; border-radius: 12px; background: #F3F4F6; } .gc-img img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; } .gc-card:hover .gc-img img { transform: scale(1.05); } .gc-card h3 { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.4; color: #111827; } .gc-card:hover h3 { color: var(--indigo-600); } .pill-cat.xs { padding: 4px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } /* 9 — recent articles */ .ra-grid { margin-top: 40px; display: grid; gap: 40px; } @media (min-width: 1024px) { .ra-grid { grid-template-columns: repeat(2, 1fr); } } .ra-lead h3 { margin-top: 16px; font-size: 24px; line-height: 1.2; color: #111827; } @media (min-width: 640px) { .ra-lead h3 { font-size: 30px; } } .ra-lead:hover h3 { color: var(--indigo-600); } .ra-small-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .ra-small-grid { grid-template-columns: repeat(2, 1fr); } } .ra-small h4 { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #111827; } .ra-small:hover h4 { color: var(--indigo-600); } .link-more { color: var(--emerald-500); font-weight: 700; font-size: 14px; } .sec-dark .link-more, .sec-darker .link-more { color: var(--amber-400); } .grid { display: grid; gap: 20px; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4, .grid-6 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 680px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } } .empty { text-align: center; padding: 64px 20px; color: var(--fg-muted); } .empty i { font-size: 44px; opacity: .28; display: block; margin-bottom: 12px; } .sec-dark .empty, .sec-darker .empty { color: rgba(255, 255, 255, .6); } .breadcrumbs { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-bottom: 12px; } .breadcrumbs a { color: var(--amber-400); } .prose { color: #374151; font-size: 16px; line-height: 1.75; overflow-wrap: break-word; } .prose h2 { font-size: 23px; margin: 32px 0 12px; color: var(--fg); } .prose h3 { font-size: 19px; margin: 26px 0 10px; color: var(--fg); } .prose p { margin: 0 0 15px; } .prose ul, .prose ol { margin: 0 0 15px; padding-left: 22px; } .prose li { margin-bottom: 7px; } .prose a { color: var(--indigo-600); font-weight: 600; } .prose img { border-radius: 12px; } .pagination { justify-content: center; margin-top: 38px; } .page-link { color: var(--fg); border-color: var(--line); } .page-item.active .page-link { background: var(--fg); border-color: var(--fg); color: #fff; } /* ========================================================================== COUPON TICKET CARD (shared/CouponCard.tsx) Ticket panel | content | action — stacks on mobile, row from lg. ========================================================================== */ .ticket { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px #E5E7EB, 0 1px 2px rgba(0, 0, 0, .05); transition: box-shadow .2s; } .ticket:hover { box-shadow: inset 0 0 0 1px #D1D5DB, 0 6px 16px rgba(0, 0, 0, .08); } .ticket.is-dark { background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--w-white-05); } .ticket.is-dark:hover { box-shadow: inset 0 0 0 1px var(--w-white-10); } .ticket.is-expired { opacity: .7; } @media (min-width: 1024px) { .ticket { flex-direction: row; align-items: stretch; } } /* left ticket panel */ .tk-stub { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; } @media (min-width: 1024px) { .tk-stub { width: 208px; flex-shrink: 0; } } .tk-stub-in { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; text-align: center; color: #fff; } @media (min-width: 1024px) { .tk-stub-in { padding: 48px 32px; } } .tk-big { display: flex; align-items: baseline; } .tk-big b { font-size: 60px; font-weight: 900; line-height: 1; letter-spacing: -.025em; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .tk-big i { font-size: 30px; font-weight: 900; line-height: 1; font-style: normal; } @media (min-width: 640px) { .tk-big b { font-size: 72px; } .tk-big i { font-size: 36px; } } .tk-label { margin-top: 8px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .25em; opacity: .95; } /* the six rotating ticket gradients */ .g-1 { background: linear-gradient(to bottom right, #FB923C, #F97316 50%, #F43F5E); } .g-2 { background: linear-gradient(to bottom right, #8B5CF6, #A855F7 50%, #4F46E5); } .g-3 { background: linear-gradient(to bottom right, #34D399, #14B8A6 50%, #0891B2); } .g-4 { background: linear-gradient(to bottom right, #FBBF24, #F97316 50%, #EF4444); } .g-5 { background: linear-gradient(to bottom right, #EC4899, #D946EF 50%, #9333EA); } .g-6 { background: linear-gradient(to bottom right, #38BDF8, #3B82F6 50%, #4F46E5); } /* punch-out notch + perforation */ .tk-notch { position: absolute; height: 24px; width: 24px; border-radius: 999px; background: #fff; } .ticket.is-dark .tk-notch { background: var(--ink-700); } .tk-notch.b { bottom: -12px; left: 50%; transform: translateX(-50%); } .tk-notch.r { right: -12px; top: 50%; transform: translateY(-50%); display: none; } @media (min-width: 1024px) { .tk-notch.b { display: none; } .tk-notch.r { display: block; } } .tk-perf { position: absolute; } .tk-perf.h { bottom: 0; left: 24px; right: 24px; height: 1px; background-image: repeating-linear-gradient(to right, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 4px, transparent 4px, transparent 8px); } .tk-perf.v { right: 0; top: 24px; bottom: 24px; width: 1px; display: none; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 4px, transparent 4px, transparent 8px); } @media (min-width: 1024px) { .tk-perf.h { display: none; } .tk-perf.v { display: block; } } /* middle content */ .tk-body { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 12px; padding: 28px 24px; min-width: 0; } @media (min-width: 640px) { .tk-body { padding: 28px 32px; } } .tk-brand { display: flex; align-items: center; gap: 10px; } .tk-brand-logo { display: grid; place-items: center; height: 28px; width: 28px; flex-shrink: 0; overflow: hidden; border-radius: 6px; background: #fff; } .tk-brand-logo img { height: 100%; width: 100%; object-fit: contain; padding: 2px; } .tk-brand-logo span { font-size: 10px; font-weight: 700; color: #374151; } .tk-brand a, .tk-brand > span { font-size: 14px; font-weight: 500; color: #6B7280; } .ticket.is-dark .tk-brand a, .ticket.is-dark .tk-brand > span { color: #9CA3AF; } .tk-brand a:hover { color: var(--amber-400); } .tk-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: #111827; } @media (min-width: 640px) { .tk-title { font-size: 20px; } } .ticket.is-dark .tk-title { color: #fff; } .tk-title a { color: inherit; } .tk-title a:hover { color: var(--indigo-400); } .tk-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; } .tk-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; } .tk-badge.ok { background: rgba(16, 185, 129, .1); color: var(--emerald-500); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .2); } .tk-badge.rate { background: rgba(245, 158, 11, .1); color: var(--amber-500); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .2); } .tk-badge.excl { background: rgba(217, 70, 239, .1); color: #D946EF; box-shadow: inset 0 0 0 1px rgba(217, 70, 239, .2); } .tk-expiry { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9CA3AF; } .ticket.is-dark .tk-expiry { color: #6B7280; } /* right action panel */ .tk-action { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; border-top: 1px solid #F3F4F6; padding: 28px 24px; } @media (min-width: 640px) { .tk-action { padding: 28px 32px; } } @media (min-width: 1024px) { .tk-action { width: 288px; flex-shrink: 0; border-top: 0; border-left: 1px solid #F3F4F6; } } .ticket.is-dark .tk-action { border-color: var(--w-white-05); } .tk-toppick { display: flex; justify-content: flex-end; } .tk-toppick span { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: linear-gradient(to right, var(--amber-400), var(--orange-500)); box-shadow: 0 8px 16px rgba(245, 158, 11, .2); } .tk-code { border-radius: 8px; border: 2px dashed rgba(251, 113, 133, .6); background: rgba(244, 63, 94, .05); padding: 12px 20px; text-align: center; } .tk-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; letter-spacing: .15em; color: var(--rose-500); } .tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; background: var(--emerald-500); padding: 14px 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; cursor: pointer; box-shadow: 0 10px 20px rgba(16, 185, 129, .25); transition: background .2s, box-shadow .2s; } .tk-btn:hover { background: #34D399; color: #fff; box-shadow: 0 12px 24px rgba(16, 185, 129, .4); } .tk-btn:disabled { opacity: .5; cursor: not-allowed; } /* ---------- Tiles ---------- */ .tile { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 14px; text-align: center; display: block; color: var(--fg); transition: box-shadow .18s, transform .18s, border-color .18s; } .tile:hover { box-shadow: 0 10px 24px rgba(17, 24, 39, .08); transform: translateY(-2px); border-color: #D1D5DB; color: var(--fg); } .sec-dark .tile, .sec-darker .tile { background: var(--w-white-05); border-color: var(--w-white-05); color: #fff; } .sec-dark .tile:hover, .sec-darker .tile:hover { border-color: rgba(251, 191, 36, .3); background: rgba(255, 255, 255, .06); } .tile-icon { font-size: 28px; display: block; margin-bottom: 10px; } .tile-name { font-weight: 700; font-size: 14px; } .tile-count { font-size: 12px; color: var(--fg-muted); margin-top: 4px; } .sec-dark .tile-count, .sec-darker .tile-count { color: rgba(255, 255, 255, .55); } .tile img { height: 44px; object-fit: contain; margin-bottom: 12px; } /* ---------- Post cards ---------- */ .post-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .post-card:hover { box-shadow: 0 10px 24px rgba(17, 24, 39, .08); } .post-thumb { height: 168px; width: 100%; object-fit: cover; background: var(--bg-muted); display: block; } .post-body { padding: 18px; display: flex; flex-direction: column; flex: 1; } .post-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--emerald-500); } .post-title { font-size: 16px; font-weight: 700; color: var(--fg); line-height: 1.35; margin: 7px 0 8px; } .post-title a { color: inherit; } .post-title a:hover { color: var(--indigo-600); } .post-meta { font-size: 12px; color: var(--fg-muted); margin-top: auto; } /* featured blog hero */ .blog-hero { display: grid; gap: 24px; } @media (min-width: 1024px) { .blog-hero { grid-template-columns: 7fr 5fr; } } .bh-lead { position: relative; border-radius: 16px; overflow: hidden; display: block; } .bh-lead-img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; background: #F3F4F6; display: block; } .bh-lead-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .3) 45%, transparent); } .bh-lead-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; } @media (min-width: 640px) { .bh-lead-text { padding: 32px; } } .bh-lead-text h2 { color: #fff; font-size: 22px; line-height: 1.25; margin-top: 8px; } @media (min-width: 640px) { .bh-lead-text h2 { font-size: 26px; } } .bh-lead-meta { margin-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, .8); } .bh-side { display: flex; flex-direction: column; gap: 16px; } .bh-item { display: flex; gap: 14px; align-items: flex-start; } .bh-item img, .bh-item .bh-ph { width: 116px; height: 84px; flex-shrink: 0; object-fit: cover; border-radius: 12px; background: var(--bg-muted); } .bh-ph { display: grid; place-items: center; color: var(--fg-muted); } .bh-item h3 { font-size: 14.5px; font-weight: 600; line-height: 1.4; margin-top: 5px; color: var(--fg); } .bh-item:hover h3 { color: var(--indigo-600); } .bh-item .eyebrow { color: var(--emerald-500); } .bh-item-meta { font-size: 11.5px; color: var(--fg-muted); margin-top: 6px; } /* ========================================================================== BRANDS EXPLORER (/brands) ========================================================================== */ .brands-page { position: relative; min-height: 100vh; overflow: hidden; background: var(--ink-900); } .brands-inner { position: relative; padding: 64px 0; } @media (min-width: 640px) { .brands-inner { padding: 80px 0; } } .brands-head { text-align: center; } .brands-head h1 { font-size: 48px; font-weight: 700; letter-spacing: -.025em; color: #fff; } @media (min-width: 640px) { .brands-head h1 { font-size: 60px; } } @media (min-width: 1024px) { .brands-head h1 { font-size: 72px; } } .brands-head p { margin: 20px auto 0; max-width: 42rem; font-size: 16px; color: #9CA3AF; } @media (min-width: 640px) { .brands-head p { font-size: 18px; } } .brands-search { margin: 48px auto 0; max-width: 42rem; position: relative; } .brands-search input { width: 100%; border-radius: 999px; border: 1px solid var(--w-white-10); background: rgba(255, 255, 255, .03); padding: 16px 48px 16px 56px; font-size: 16px; color: #fff; outline: none; backdrop-filter: blur(4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); transition: border-color .15s, box-shadow .15s; } .brands-search input::placeholder { color: rgba(255, 255, 255, .4); } .brands-search input:focus { border-color: rgba(251, 146, 60, .5); box-shadow: 0 0 0 2px rgba(251, 146, 60, .2); } .brands-search .bi-search { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--orange-400); font-size: 18px; pointer-events: none; } .brands-search .clear-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; border-radius: 999px; padding: 4px; color: rgba(255, 255, 255, .4); cursor: pointer; display: none; } .brands-search .clear-btn.show { display: block; } .brands-search .clear-btn:hover { background: var(--w-white-10); color: #fff; } .alpha-row { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } @media (min-width: 640px) { .alpha-row { gap: 10px; } } .alpha-btn { display: inline-flex; height: 40px; width: 40px; align-items: center; justify-content: center; border: 0; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; background: rgba(249, 115, 22, .1); color: var(--orange-400); box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .2); transition: all .18s; } @media (min-width: 640px) { .alpha-btn { height: 44px; width: 44px; font-size: 16px; } } .alpha-btn:hover { background: rgba(249, 115, 22, .2); transform: scale(1.05); } .alpha-btn.active { background: var(--orange-500); color: #fff; box-shadow: 0 10px 20px rgba(249, 115, 22, .5); transform: scale(1.1); } .alpha-btn:disabled { background: rgba(255, 255, 255, .02); color: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px var(--w-white-05); cursor: not-allowed; transform: none; } .alpha-clear { margin-left: 8px; display: none; align-items: center; gap: 4px; border: 0; border-radius: 8px; background: var(--w-white-05); padding: 8px 12px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); cursor: pointer; } .alpha-clear.show { display: inline-flex; } .alpha-clear:hover { background: var(--w-white-10); color: #fff; } .brands-status { margin-top: 24px; text-align: center; font-size: 14px; color: #9CA3AF; display: none; } .brands-status.show { display: block; } .letter-groups { margin-top: 48px; display: flex; flex-direction: column; gap: 48px; } .letter-group.hide { display: none; } .letter-head { display: flex; align-items: center; gap: 16px; } .letter-badge { display: grid; place-items: center; height: 56px; width: 56px; flex-shrink: 0; border-radius: 16px; font-size: 24px; font-weight: 900; color: #fff; background: linear-gradient(to bottom right, var(--orange-400), var(--rose-500)); box-shadow: 0 10px 20px rgba(249, 115, 22, .3); } .letter-count { font-size: 14px; font-weight: 500; color: #9CA3AF; } .brand-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(6, 1fr); } } .brand-card { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: 16px; border: 1px solid var(--w-white-05); background: rgba(255, 255, 255, .03); padding: 20px; text-align: center; backdrop-filter: blur(4px); transition: all .2s; } .brand-card.hide { display: none; } .brand-card:hover { transform: translateY(-4px); border-color: rgba(251, 146, 60, .3); background: rgba(255, 255, 255, .06); box-shadow: 0 20px 32px rgba(249, 115, 22, .1); } .brand-count { position: absolute; right: 12px; top: 12px; display: inline-flex; height: 24px; min-width: 24px; align-items: center; justify-content: center; border-radius: 999px; padding: 0 6px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(to bottom right, var(--orange-400), var(--rose-500)); box-shadow: 0 6px 12px rgba(249, 115, 22, .3); } .brand-logo-box { display: flex; height: 80px; width: 100%; align-items: center; justify-content: center; border-radius: 12px; background: #fff; padding: 12px; } .brand-logo-box img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform .2s; } .brand-card:hover .brand-logo-box img { transform: scale(1.1); } .brand-logo-box .txt { font-size: 18px; font-weight: 900; color: #1F2937; line-height: 1.1; } .brand-card-name { margin-top: 16px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); transition: color .15s; } .brand-card:hover .brand-card-name { color: var(--orange-400); } .brands-none { border-radius: 16px; border: 1px solid var(--w-white-05); background: rgba(255, 255, 255, .02); padding: 48px; text-align: center; display: none; } .brands-none.show { display: block; } .brands-none p { margin: 0; font-size: 16px; color: #9CA3AF; } /* ========================================================================== STORE DETAIL (/stores/{slug}) ========================================================================== */ .store-hero { position: relative; overflow: hidden; background: var(--ink-900); } .store-hero .glow { opacity: .5; } .store-hero .glow .g1 { top: -96px; left: 25%; width: 384px; height: 384px; background: rgba(79, 70, 229, .3); filter: blur(140px); } .store-hero .glow .g2 { bottom: -96px; right: 25%; top: auto; width: 384px; height: 384px; background: rgba(147, 51, 234, .3); filter: blur(140px); } .store-hero-banner { position: absolute; inset: 0; opacity: .3; } .store-hero-banner img { height: 100%; width: 100%; object-fit: cover; filter: blur(40px); } .store-hero-inner { position: relative; padding: 48px 0; } @media (min-width: 1024px) { .store-hero-inner { padding: 64px 0; } } .store-grid { margin-top: 32px; display: grid; gap: 32px; } @media (min-width: 1024px) { .store-grid { grid-template-columns: 3fr 9fr; align-items: center; } } .store-logo { display: flex; height: 128px; width: 128px; align-items: center; justify-content: center; overflow: hidden; border-radius: 16px; background: #fff; padding: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); } @media (min-width: 640px) { .store-logo { height: 160px; width: 160px; } } .store-logo img { max-height: 100%; max-width: 100%; object-fit: contain; } .store-logo span { font-size: 24px; font-weight: 900; color: #1F2937; text-align: center; line-height: 1.15; } .store-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .store-flag { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .store-flag.featured { background: rgba(245, 158, 11, .15); color: var(--amber-400); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); } .store-flag.trending { background: rgba(244, 63, 94, .15); color: #FB7185; box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .3); } .store-title { margin-top: 16px; font-size: 30px; font-weight: 700; letter-spacing: -.025em; color: #fff; overflow-wrap: break-word; } @media (min-width: 640px) { .store-title { font-size: 36px; } } @media (min-width: 1024px) { .store-title { font-size: 48px; } } .store-tagline { margin-top: 12px; font-size: 18px; color: var(--amber-400); } .store-desc { margin-top: 16px; max-width: 48rem; font-size: 16px; color: #D1D5DB; } .store-facts { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14px; color: #9CA3AF; } .store-facts span { display: inline-flex; align-items: center; gap: 8px; } .store-facts b { color: #fff; font-weight: 700; } .store-facts .i-tag { color: var(--emerald-400); } .store-facts .i-up { color: var(--indigo-400); } .store-facts .i-cal { color: #A78BFA; } .store-facts .i-pin { color: #FB7185; } .store-visit { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; background: var(--amber-500); padding: 12px 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-700); box-shadow: 0 10px 20px rgba(245, 158, 11, .3); } .store-visit:hover { background: var(--amber-400); color: var(--ink-700); } .store-sec-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; } @media (min-width: 640px) { .store-sec-head { flex-direction: row; align-items: flex-end; } } .store-sec-head h2 { font-size: 24px; font-weight: 700; color: #111827; } @media (min-width: 640px) { .store-sec-head h2 { font-size: 30px; } } @media (min-width: 1024px) { .store-sec-head h2 { font-size: 36px; } } .store-sec-head p { margin-top: 8px; font-size: 14px; color: #6B7280; } .pill-live { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; border-radius: 999px; background: rgba(16, 185, 129, .1); padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #059669; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .2); } .pill-live .dot { height: 6px; width: 6px; border-radius: 999px; background: var(--emerald-500); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes pulse { 50% { opacity: .4; } } .pill-grey { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; border-radius: 999px; background: #E5E7EB; padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #4B5563; } .ticket-list { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; } .ticket-list.faded { opacity: .7; gap: 16px; } .store-content-grid { display: grid; gap: 32px; } @media (min-width: 1024px) { .store-content-grid { grid-template-columns: 8fr 4fr; gap: 40px; } } .faq-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #E0E7FF; padding: 6px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: #4338CA; } /* content sections: numbered header + icon chip + hairline divider */ .content-sections { display: flex; flex-direction: column; gap: 56px; } .cs-head { margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } @media (min-width: 640px) { .cs-head { gap: 16px; } } .cs-ico { display: grid; place-items: center; height: 40px; width: 40px; flex-shrink: 0; border-radius: 16px; font-size: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } @media (min-width: 640px) { .cs-ico { height: 48px; width: 48px; font-size: 24px; } } .cs-ico.indigo { background: #E0E7FF; color: #4F46E5; } .cs-ico.emerald { background: #D1FAE5; color: #059669; } .cs-ico.amber { background: #FEF3C7; color: #D97706; } .cs-ico.blue { background: #DBEAFE; color: #2563EB; } .cs-ico.rose { background: #FFE4E6; color: #E11D48; } .cs-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; } .cs-eyebrow.indigo { color: #4F46E5; } .cs-eyebrow.emerald { color: #059669; } .cs-eyebrow.amber { color: #D97706; } .cs-eyebrow.blue { color: #2563EB; } .cs-eyebrow.rose { color: #E11D48; } .cs-head h2 { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #111827; overflow-wrap: break-word; } @media (min-width: 640px) { .cs-head h2 { font-size: 24px; } } @media (min-width: 768px) { .cs-head h2 { font-size: 30px; } } .cs-divider { margin-bottom: 24px; height: 1px; width: 80px; background: linear-gradient(to right, #D1D5DB, transparent); } /* sidebar cards */ .sb-stack { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 1024px) { .sb-stack { position: sticky; top: 96px; } } .sb-card { overflow: hidden; border-radius: 16px; border: 1px solid #E5E7EB; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .sb-card > header { border-bottom: 1px solid #F3F4F6; padding: 16px 20px; } .sb-card > header h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #111827; } .sb-card.h-amber > header { background: linear-gradient(to right, #FFFBEB, #FFF7ED); } .sb-card.h-rose > header { background: linear-gradient(to right, #FFF1F2, #FDF2F8); } .sb-card.h-indigo > header { background: linear-gradient(to right, #EEF2FF, #FAF5FF); } .sb-card .i-amber { color: var(--amber-500); } .sb-card .i-rose { color: var(--rose-500); } .sb-list { list-style: none; margin: 0; padding: 0; } .sb-list li + li { border-top: 1px solid #F3F4F6; } .sb-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; transition: background .15s; } .sb-row:hover { background: #F9FAFB; } .sb-logo { display: grid; place-items: center; height: 48px; width: 48px; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E5E7EB; padding: 6px; } .sb-logo img { max-height: 100%; max-width: 100%; object-fit: contain; } .sb-logo span { font-size: 12px; font-weight: 700; color: #374151; } .sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #111827; } .sb-row:hover .sb-name { color: var(--indigo-600); } .sb-sub { margin-top: 2px; font-size: 11px; font-weight: 500; color: #059669; } .sb-tag { margin-top: 2px; font-size: 12px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-arrow { flex-shrink: 0; color: #D1D5DB; font-size: 14px; transition: all .15s; } .sb-row:hover .sb-arrow { color: var(--indigo-600); transform: translateX(2px); } .sb-rank { display: grid; place-items: center; height: 28px; width: 28px; flex-shrink: 0; border-radius: 999px; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(to bottom right, #FB7185, #EC4899); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .sb-row:hover .sb-rank ~ div .sb-name { color: #E11D48; } .sb-all { display: block; border-top: 1px solid #F3F4F6; background: #F9FAFB; padding: 12px 20px; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--indigo-600); } .sb-all:hover { background: #F3F4F6; } .sb-cats { list-style: none; margin: 0; padding: 12px; } .sb-cat { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; padding: 8px 12px; font-size: 14px; transition: background .15s; } .sb-cat:hover { background: #EEF2FF; } .sb-cat span:first-child { font-weight: 500; color: #374151; } .sb-cat:hover span:first-child { color: var(--indigo-600); } .sb-count { border-radius: 999px; background: #F3F4F6; padding: 2px 8px; font-size: 10px; font-weight: 700; color: #4B5563; } .sb-cat:hover .sb-count { background: #E0E7FF; color: var(--indigo-600); } .sb-promo { overflow: hidden; border-radius: 16px; padding: 24px; color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .1); background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600), var(--indigo-800)); } .sb-promo .emo { font-size: 30px; } .sb-promo h3 { margin-top: 12px; font-size: 18px; font-weight: 700; color: #fff; } .sb-promo p { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .85); } .sb-promo a { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #fff; padding: 8px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #4338CA; } .sb-promo a:hover { background: var(--amber-300); color: #4338CA; } /* ========================================================================== PAGE HERO (shared/PageHero.tsx) ========================================================================== */ .page-hero { position: relative; overflow: hidden; background: var(--ink-900); padding: 64px 0; } @media (min-width: 640px) { .page-hero { padding: 80px 0; } } .page-hero .glow { opacity: .4; } .page-hero .glow .g1 { top: -96px; left: 25%; width: 384px; height: 384px; background: rgba(79,70,229,.2); filter: blur(140px); } .page-hero .glow .g2 { bottom: -96px; right: 25%; top: auto; width: 384px; height: 384px; background: rgba(147,51,234,.2); filter: blur(140px); } .page-hero-in { position: relative; } .page-hero h1 { font-size: 36px; font-weight: 700; letter-spacing: -.025em; color: #fff; } @media (min-width: 640px) { .page-hero h1 { font-size: 48px; } } @media (min-width: 1024px) { .page-hero h1 { font-size: 60px; } } .page-hero .sub { margin-top: 16px; max-width: 48rem; font-size: 16px; color: #9CA3AF; } @media (min-width: 640px) { .page-hero .sub { font-size: 18px; } } .page-hero .extras { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; } .hero-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; } .hero-pill.ok { border: 1px solid rgba(16,185,129,.3); background: rgba(16,185,129,.1); color: var(--emerald-400); } .hero-pill.hot { border: 1px solid rgba(244,63,94,.3); background: rgba(244,63,94,.1); color: #FB7185; } .hero-pill .dot { height: 6px; width: 6px; border-radius: 999px; background: var(--emerald-400); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; } /* ========================================================================== CATEGORIES (/categories) ========================================================================== */ .cats-page { position: relative; min-height: 100vh; overflow: hidden; background: var(--ink-900); } .cats-page .glow .g1 { top: -128px; left: 25%; width: 600px; height: 600px; background: rgba(79,70,229,.2); } .cats-page .glow .g2 { top: 50%; right: 25%; width: 500px; height: 500px; background: rgba(147,51,234,.2); } .cats-inner { position: relative; padding: 64px 0; } @media (min-width: 640px) { .cats-inner { padding: 80px 0; } } .cats-head { text-align: center; } .cats-head h1 { font-size: 48px; font-weight: 700; letter-spacing: -.025em; color: #fff; } @media (min-width: 640px) { .cats-head h1 { font-size: 60px; } } @media (min-width: 1024px) { .cats-head h1 { font-size: 72px; } } .cats-head p { margin: 20px auto 0; max-width: 42rem; font-size: 16px; color: #9CA3AF; } @media (min-width: 640px) { .cats-head p { font-size: 18px; } } .cats-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (min-width: 640px) { .cats-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .cats-grid { grid-template-columns: repeat(4, 1fr); } } .cat-tile { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: 16px; border: 1px solid var(--w-white-05); background: rgba(255,255,255,.03); padding: 24px; text-align: center; backdrop-filter: blur(4px); transition: all .2s; } .cat-tile:hover { transform: translateY(-4px); border-color: var(--w-white-10); background: rgba(255,255,255,.06); box-shadow: 0 20px 32px rgba(245,158,11,.1); } .cat-tile-ico { display: grid; place-items: center; height: 64px; width: 64px; border-radius: 16px; font-size: 30px; box-shadow: 0 10px 20px rgba(0,0,0,.2); } .cg-1 { background: linear-gradient(to bottom right, #FB923C, #F43F5E); } .cg-2 { background: linear-gradient(to bottom right, #8B5CF6, #4F46E5); } .cg-3 { background: linear-gradient(to bottom right, #34D399, #0D9488); } .cg-4 { background: linear-gradient(to bottom right, #FBBF24, #EF4444); } .cg-5 { background: linear-gradient(to bottom right, #EC4899, #9333EA); } .cg-6 { background: linear-gradient(to bottom right, #38BDF8, #2563EB); } .cg-7 { background: linear-gradient(to bottom right, #D946EF, #DB2777); } .cg-8 { background: linear-gradient(to bottom right, #2DD4BF, #0891B2); } .cat-tile h3 { margin-top: 16px; font-size: 16px; font-weight: 700; color: #fff; transition: color .15s; } .cat-tile:hover h3 { color: var(--amber-400); } .cat-deals { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(16,185,129,.1); padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--emerald-400); box-shadow: inset 0 0 0 1px rgba(16,185,129,.2); } .cat-browse { margin-top: 8px; font-size: 12px; color: #6B7280; } .cat-star { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(245,158,11,.15); padding: 1px 8px; font-size: 10px; font-weight: 700; color: var(--amber-400); box-shadow: inset 0 0 0 1px rgba(245,158,11,.3); } .list-sec-title { margin-bottom: 24px; display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; color: #111827; } @media (min-width: 640px) { .list-sec-title { font-size: 30px; } } /* ========================================================================== COUPON DETAIL (/coupons/{slug}) ========================================================================== */ .wrap.narrow { max-width: 1024px; } .cd-hero { position: relative; overflow: hidden; background: var(--ink-900); } .cd-hero .glow { opacity: .5; } .cd-hero .glow .g1 { top: -96px; left: 25%; width: 384px; height: 384px; background: rgba(79, 70, 229, .3); filter: blur(140px); } .cd-hero .glow .g2 { bottom: -96px; right: 25%; top: auto; width: 384px; height: 384px; background: rgba(147, 51, 234, .3); filter: blur(140px); } .cd-hero-in { position: relative; padding: 48px 0; } @media (min-width: 1024px) { .cd-hero-in { padding: 64px 0; } } .cd-top { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } @media (min-width: 1024px) { .cd-top { flex-direction: row; align-items: center; } } .cd-logo { display: flex; height: 80px; width: 80px; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: 16px; background: #fff; padding: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); } @media (min-width: 640px) { .cd-logo { height: 96px; width: 96px; } } .cd-logo img { max-height: 100%; max-width: 100%; object-fit: contain; } .cd-logo span { font-size: 22px; font-weight: 900; color: #1F2937; } .cd-info { flex: 1; min-width: 0; } .cd-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cd-flag { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .cd-flag.ok { background: rgba(16, 185, 129, .15); color: var(--emerald-400); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .3); } .cd-flag.excl { background: rgba(217, 70, 239, .15); color: #E879F9; box-shadow: inset 0 0 0 1px rgba(217, 70, 239, .3); } .cd-flag.top { background: linear-gradient(to right, var(--amber-400), var(--orange-500)); color: #fff; box-shadow: 0 10px 20px rgba(245, 158, 11, .3); } .cd-title { margin-top: 16px; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; color: #fff; overflow-wrap: break-word; } @media (min-width: 640px) { .cd-title { font-size: 36px; } } @media (min-width: 1024px) { .cd-title { font-size: 48px; } } .cd-at { margin-top: 12px; display: inline-block; font-size: 16px; font-weight: 600; color: var(--amber-400); } .cd-at:hover { color: var(--amber-400); text-decoration: underline; } .cd-facts { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 14px; color: #9CA3AF; } .cd-facts span { display: inline-flex; align-items: center; gap: 6px; } .cd-facts b { color: #fff; font-weight: 700; } .cd-facts .i-star { color: var(--amber-400); } .cd-facts .i-users { color: var(--indigo-400); } .cd-facts .i-alarm { color: #FB7185; } /* reveal card sits on the grey band, pulled up over the dark hero */ .cd-body { margin-top: -40px; background: var(--bg-muted); padding-bottom: 64px; } @media (min-width: 640px) { .cd-body { padding-bottom: 80px; } } .reveal { position: relative; z-index: 2; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px #E5E7EB, 0 25px 50px -12px rgba(0, 0, 0, .25); } .reveal-grid { display: grid; } @media (min-width: 1024px) { .reveal-grid { grid-template-columns: 4fr 8fr; } } .reveal-stub { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px; background: linear-gradient(to bottom right, var(--orange-400), var(--orange-500) 50%, var(--rose-500)); } @media (min-width: 1024px) { .reveal-stub { padding: 48px; } } .reveal-stub-in { text-align: center; color: #fff; } .reveal-big { display: flex; align-items: baseline; justify-content: center; } .reveal-big b { font-size: 72px; font-weight: 900; line-height: 1; letter-spacing: -.025em; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .reveal-big i { font-size: 36px; font-weight: 900; line-height: 1; font-style: normal; } @media (min-width: 640px) { .reveal-big b { font-size: 96px; } .reveal-big i { font-size: 48px; } } .reveal-label { margin-top: 12px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .25em; opacity: .95; } .reveal-notch { position: absolute; height: 24px; width: 24px; border-radius: 999px; background: #fff; } .reveal-notch.b { bottom: -12px; left: 50%; transform: translateX(-50%); } .reveal-notch.r { right: -12px; top: 50%; transform: translateY(-50%); display: none; } .reveal-perf { position: absolute; right: 0; top: 24px; bottom: 24px; width: 1px; display: none; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 4px, transparent 4px, transparent 8px); } @media (min-width: 1024px) { .reveal-notch.b { display: none; } .reveal-notch.r, .reveal-perf { display: block; } } .reveal-panel { padding: 32px; } @media (min-width: 1024px) { .reveal-panel { padding: 48px; } } .reveal-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; border-radius: 999px; background: #ECFDF5; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #047857; box-shadow: inset 0 0 0 1px #A7F3D0; } .reveal-panel h2 { font-size: 24px; font-weight: 700; line-height: 1.25; color: #111827; } @media (min-width: 640px) { .reveal-panel h2 { font-size: 30px; } } .reveal-min { margin: 10px 0 0; font-size: 14px; color: #6B7280; } .reveal-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } .reveal-btn { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: var(--emerald-500); padding: 18px 32px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; cursor: pointer; box-shadow: 0 20px 30px rgba(16, 185, 129, .3); transition: background .2s, box-shadow .2s; } .reveal-btn:hover { background: var(--emerald-400); color: #fff; box-shadow: 0 22px 34px rgba(16, 185, 129, .5); } .reveal-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .reveal-foot { margin-top: 20px; text-align: center; font-size: 12px; color: #9CA3AF; } .cd-card { margin-top: 32px; border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 24px; } @media (min-width: 640px) { .cd-card { padding: 32px; } } .cd-card + .cd-card { margin-top: 24px; } .cd-card > h2 { font-size: 20px; font-weight: 700; color: #111827; } @media (min-width: 640px) { .cd-card > h2 { font-size: 24px; } } .cd-steps { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .cd-steps li { display: flex; gap: 16px; } .cd-step-n { display: grid; place-items: center; height: 32px; width: 32px; flex-shrink: 0; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(to bottom right, #6366F1, var(--purple-600)); } .cd-steps p { margin: 0; padding-top: 4px; font-size: 14px; color: #374151; } @media (min-width: 640px) { .cd-steps p { font-size: 16px; } } /* ========================================================================== CATEGORY DETAIL (app/categories/[slug]/page.tsx) ========================================================================== */ .cat-hero { position: relative; overflow: hidden; background: var(--ink-900); } .cat-hero .glow { opacity: .5; } .cat-hero .glow .g1 { top: -96px; left: 25%; width: 384px; height: 384px; background: rgba(79, 70, 229, .3); filter: blur(140px); } .cat-hero .glow .g2 { bottom: -96px; right: 25%; top: auto; width: 384px; height: 384px; background: rgba(147, 51, 234, .3); filter: blur(140px); } .cat-hero-in { position: relative; padding: 48px 0; } @media (min-width: 1024px) { .cat-hero-in { padding: 64px 0; } } .cat-hero-mid { margin-top: 32px; text-align: center; } .cat-hero-ico { display: inline-grid; place-items: center; height: 80px; width: 80px; border-radius: 24px; font-size: 44px; background: linear-gradient(to bottom right, var(--amber-400), var(--orange-500)); box-shadow: 0 20px 40px rgba(245, 158, 11, .3); } .cat-hero-mid h1 { margin-top: 24px; font-size: 32px; letter-spacing: -.025em; color: #fff; } @media (min-width: 640px) { .cat-hero-mid h1 { font-size: 44px; } } @media (min-width: 1024px) { .cat-hero-mid h1 { font-size: 56px; } } .cat-hero-mid .sub { margin: 20px auto 0; max-width: 42rem; font-size: 16px; color: #D1D5DB; } @media (min-width: 640px) { .cat-hero-mid .sub { font-size: 18px; } } .cat-stats { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; font-size: 14px; } .cat-stats span { display: inline-flex; align-items: center; gap: 8px; color: #D1D5DB; } .cat-stats b { font-size: 24px; font-weight: 700; color: #fff; } .cat-stats .muted { color: #9CA3AF; } .cat-stats .i-tag { color: var(--emerald-400); } .cat-stats .i-shop { color: var(--amber-400); } /* ========================================================================== ABOUT (app/about/page.tsx) ========================================================================== */ .ab-lead { font-size: 18px; line-height: 1.75; color: #374151; } .ab-lead p { margin: 0 0 20px; } .ab-lead p:last-child { margin-bottom: 0; } .ab-lead strong { color: #111827; } .ab-stats { background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600), var(--indigo-800)); padding: 64px 0; } @media (min-width: 640px) { .ab-stats { padding: 80px 0; } } .ab-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; text-align: center; color: #fff; } @media (min-width: 1024px) { .ab-stats-grid { grid-template-columns: repeat(4, 1fr); } } .ab-stat b { display: block; font-size: 36px; font-weight: 900; letter-spacing: -.025em; line-height: 1; } @media (min-width: 640px) { .ab-stat b { font-size: 44px; } } .ab-stat span { margin-top: 8px; display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .8); } .ab-values { margin-top: 48px; display: grid; gap: 24px; } @media (min-width: 768px) { .ab-values { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ab-values { grid-template-columns: repeat(4, 1fr); } } .ab-value { border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 24px; transition: transform .2s, box-shadow .2s; } .ab-value:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .08); } .ab-value-ico { display: inline-grid; place-items: center; height: 48px; width: 48px; border-radius: 12px; font-size: 22px; } .ab-value-ico.emerald { background: #D1FAE5; color: #059669; } .ab-value-ico.amber { background: #FEF3C7; color: #D97706; } .ab-value-ico.indigo { background: #E0E7FF; color: var(--indigo-600); } .ab-value-ico.rose { background: #FFE4E6; color: #E11D48; } .ab-value h3 { margin-top: 16px; font-size: 18px; color: #111827; } .ab-value p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: #4B5563; } .ab-cta { position: relative; overflow: hidden; background: var(--ink-900); padding: 64px 0; } @media (min-width: 640px) { .ab-cta { padding: 80px 0; } } .ab-cta .glow { opacity: .4; } .ab-cta .glow .g1 { top: -96px; left: 25%; width: 384px; height: 384px; background: rgba(79, 70, 229, .3); filter: blur(140px); } .ab-cta .glow .g2 { bottom: -96px; right: 25%; top: auto; width: 384px; height: 384px; background: rgba(147, 51, 234, .3); filter: blur(140px); } .ab-cta-in { position: relative; margin: 0 auto; max-width: 48rem; text-align: center; } .ab-cta h2 { font-size: 30px; color: #fff; } @media (min-width: 640px) { .ab-cta h2 { font-size: 36px; } } .ab-cta p { margin: 16px 0 0; font-size: 16px; color: #9CA3AF; } .ab-cta-row { margin-top: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } @media (min-width: 640px) { .ab-cta-row { flex-direction: row; } } .btn-amber { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--amber-500); padding: 14px 28px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-700); box-shadow: 0 10px 20px rgba(245, 158, 11, .3); transition: background .15s; } .btn-amber:hover { background: var(--amber-400); color: var(--ink-700); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: var(--w-white-05); padding: 14px 28px; font-size: 14px; font-weight: 600; color: #fff; transition: background .15s; } .btn-ghost:hover { background: var(--w-white-10); color: #fff; } /* ========================================================================== SEARCH (app/search/page.tsx) ========================================================================== */ .sr-form { display: flex; max-width: 36rem; gap: 8px; } .sr-form .field { position: relative; flex: 1; } .sr-form .field i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .5); pointer-events: none; font-size: 14px; } .sr-form input { width: 100%; border: 1px solid var(--w-white-10); border-radius: 8px; background: var(--w-white-05); padding: 12px 16px 12px 42px; font-size: 14px; color: #fff; outline: none; transition: border-color .15s, box-shadow .15s; } .sr-form input::placeholder { color: rgba(255, 255, 255, .5); } .sr-form input:focus { border-color: var(--amber-400); box-shadow: 0 0 0 1px var(--amber-400); } .sr-form button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; background: var(--amber-500); padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; } .sr-form button:hover { background: var(--amber-400); } .sr-groups { display: flex; flex-direction: column; gap: 64px; } .sr-group > h2 { margin-bottom: 24px; font-size: 24px; color: #111827; } .sr-group > h2 .n { color: #9CA3AF; font-weight: 700; } .sr-brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 640px) { .sr-brands { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .sr-brands { grid-template-columns: repeat(6, 1fr); } } .sr-brand { display: flex; flex-direction: column; align-items: center; border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 20px; text-align: center; transition: all .2s; } .sr-brand:hover { transform: translateY(-2px); border-color: #A5B4FC; box-shadow: 0 10px 20px rgba(0, 0, 0, .08); } .sr-brand .logo { display: flex; height: 64px; width: 100%; align-items: center; justify-content: center; } .sr-brand .logo img { max-height: 48px; width: auto; object-fit: contain; } .sr-brand .logo .txt { font-size: 18px; font-weight: 700; color: #374151; } .sr-brand .name { margin-top: 12px; font-size: 14px; font-weight: 600; color: #111827; } .sr-brand .n { margin-top: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--indigo-600); } /* ========================================================================== LEGAL PAGES (shared/LegalPage.tsx) ========================================================================== */ .lg-hero { position: relative; overflow: hidden; background: var(--ink-900); } .lg-hero .glow { opacity: .5; } .lg-hero .glow .g1 { top: -96px; left: 25%; width: 384px; height: 384px; background: rgba(79, 70, 229, .3); filter: blur(140px); } .lg-hero .glow .g2 { bottom: -96px; right: 25%; top: auto; width: 384px; height: 384px; background: rgba(147, 51, 234, .3); filter: blur(140px); } .lg-hero-in { position: relative; padding: 48px 0; } @media (min-width: 1024px) { .lg-hero-in { padding: 64px 0; } } .lg-hero-mid { margin-top: 32px; text-align: center; } .lg-eyebrow { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(245, 158, 11, .15); padding: 6px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-400); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); } .lg-hero-mid h1 { margin-top: 20px; font-size: 36px; letter-spacing: -.025em; color: #fff; } @media (min-width: 640px) { .lg-hero-mid h1 { font-size: 48px; } } @media (min-width: 1024px) { .lg-hero-mid h1 { font-size: 56px; } } .lg-updated { margin: 16px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #9CA3AF; } .lg-updated b { color: #fff; font-weight: 600; } .lg-main { background: var(--bg-muted); padding: 64px 0; } @media (min-width: 640px) { .lg-main { padding: 80px 0; } } .lg-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .lg-grid { grid-template-columns: 8fr 4fr; } } .lg-card { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .05); } .lg-body { padding: 32px 24px; color: #374151; font-size: 16px; line-height: 1.75; overflow-wrap: break-word; } @media (min-width: 640px) { .lg-body { padding: 40px; } } @media (min-width: 1024px) { .lg-body { padding: 48px; } } .lg-body > *:first-child { margin-top: 0; } .lg-body h2 { display: flex; align-items: baseline; gap: 12px; margin: 40px 0 16px; font-size: 22px; letter-spacing: -.02em; color: #111827; font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; } @media (min-width: 640px) { .lg-body h2 { font-size: 24px; } } .lg-body h2::before { content: ''; display: inline-block; flex-shrink: 0; width: 4px; height: 20px; border-radius: 999px; background: linear-gradient(180deg, var(--amber-500), #EF4444); } .lg-body h3 { margin: 32px 0 12px; font-size: 19px; color: #111827; font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; } .lg-body p { margin: 16px 0; } .lg-body a { color: var(--indigo-600); font-weight: 500; } .lg-body a:hover { text-decoration: underline; } .lg-body strong { color: #111827; font-weight: 600; } .lg-body ul { margin: 20px 0; padding: 0; list-style: none; } .lg-body ul li { position: relative; margin: 10px 0; padding-left: 28px; } .lg-body ul li::before { content: ''; position: absolute; left: 0; top: .65em; height: 6px; width: 6px; border-radius: 999px; background: linear-gradient(135deg, #6366F1, #8B5CF6); } .lg-body ol { margin: 20px 0; padding-left: 22px; } .lg-body ol li { margin: 8px 0; } .lg-body blockquote { margin: 28px 0; border-left: 4px solid var(--amber-400); border-radius: 0 8px 8px 0; background: #FFFBEB; padding: 16px 24px; color: #374151; } .lg-body blockquote p { margin: 6px 0; } .lg-body table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 15px; } .lg-body th, .lg-body td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; } .lg-body th { background: var(--bg-muted); font-weight: 700; color: #111827; } .lg-related { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; } .lg-related a { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #fff; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--indigo-600); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .05); transition: all .15s; } .lg-related a:hover { background: #EEF2FF; box-shadow: inset 0 0 0 1px #A5B4FC; color: var(--indigo-600); gap: 8px; } .lg-side { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 1024px) { .lg-side { position: sticky; top: 96px; } } .lg-nav { overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .lg-nav > header { border-bottom: 1px solid #F3F4F6; background: linear-gradient(to right, #EEF2FF, #FAF5FF); padding: 16px 20px; } .lg-nav > header h3 { font-size: 16px; font-weight: 700; color: #111827; } .lg-nav ul { list-style: none; margin: 0; padding: 0; } .lg-nav li + li { border-top: 1px solid #F3F4F6; } .lg-nav a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; transition: background .15s; } .lg-nav a:hover { background: var(--bg-muted); } .lg-nav a.active { background: #EEF2FF; } .lg-nav .txt { flex: 1; font-size: 14px; font-weight: 600; color: #374151; } .lg-nav a:hover .txt, .lg-nav a.active .txt { color: var(--indigo-600); } .lg-nav .arw { flex-shrink: 0; color: #D1D5DB; font-size: 13px; transition: all .15s; } .lg-nav a:hover .arw { color: var(--indigo-600); transform: translateX(2px); } .lg-help { overflow: hidden; border-radius: 16px; padding: 24px; color: #fff; background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600), var(--indigo-800)); box-shadow: 0 10px 20px rgba(0, 0, 0, .12); } .lg-help > i { font-size: 30px; color: var(--amber-300); } .lg-help h3 { margin-top: 12px; font-size: 18px; color: #fff; } .lg-help p { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, .85); } .lg-help a { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #fff; padding: 8px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #4338CA; transition: background .15s; } .lg-help a:hover { background: var(--amber-300); color: #4338CA; } /* ========================================================================== CONTACT (app/contact/page.tsx + contact/ContactForm.tsx) ========================================================================== */ .ct-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .ct-grid { grid-template-columns: 2fr 3fr; } } .ct-info h2 { font-size: 24px; color: #111827; } .ct-info > p { margin: 12px 0 0; font-size: 16px; color: #4B5563; } .ct-items { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; } .ct-item { display: flex; align-items: flex-start; gap: 16px; } .ct-ico { display: grid; place-items: center; height: 44px; width: 44px; flex-shrink: 0; border-radius: 12px; font-size: 19px; } .ct-ico.indigo { background: #E0E7FF; color: var(--indigo-600); } .ct-ico.emerald { background: #D1FAE5; color: #059669; } .ct-ico.amber { background: #FEF3C7; color: #D97706; } .ct-ico.rose { background: #FFE4E6; color: #E11D48; } .ct-item .lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6B7280; } .ct-item .val { margin-top: 2px; font-size: 16px; font-weight: 500; color: #111827; word-break: break-word; } a.ct-item:hover .val { color: var(--indigo-600); } .ct-note { margin-top: 40px; border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 24px; } .ct-note h3 { font-size: 16px; color: #111827; } .ct-note p { margin: 8px 0 0; font-size: 14px; color: #4B5563; } .ct-note ul { margin: 16px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #374151; } .ct-card { border-radius: 24px; border: 1px solid var(--line); background: #fff; padding: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } @media (min-width: 640px) { .ct-card { padding: 40px; } } .ct-card > h2 { font-size: 24px; color: #111827; } .ct-card > p { margin: 8px 0 0; font-size: 14px; color: #6B7280; } .ct-form { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; } .ct-row { display: grid; gap: 20px; } @media (min-width: 640px) { .ct-row { grid-template-columns: repeat(2, 1fr); } } .ct-field { display: block; } .ct-field > span { margin-bottom: 6px; display: inline-block; font-size: 14px; font-weight: 600; color: #111827; } .ct-field .req { margin-left: 2px; color: var(--rose-500); } .ct-field input, .ct-field textarea { width: 100%; border: 1px solid #D1D5DB; border-radius: 8px; background: #fff; padding: 12px 16px; font-size: 14px; color: #111827; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .ct-field textarea { resize: vertical; } .ct-field input::placeholder, .ct-field textarea::placeholder { color: #9CA3AF; } .ct-field input:focus, .ct-field textarea:focus { border-color: #6366F1; box-shadow: 0 0 0 1px #6366F1; } .ct-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; border: 0; border-radius: 8px; padding: 14px 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; cursor: pointer; background: linear-gradient(to right, var(--indigo-600), var(--purple-600)); box-shadow: 0 10px 20px rgba(79, 70, 229, .25); transition: box-shadow .2s; } .ct-submit:hover { color: #fff; box-shadow: 0 12px 26px rgba(79, 70, 229, .4); } @media (max-width: 639px) { .ct-submit { width: 100%; } } /* ========================================================================== COUPON MODAL Opens when a visitor reveals a code; the store tab opens at the same time. ========================================================================== */ /* Bootstrap's modal component does the backdrop, focus trap, Escape and scroll lock; these rules only restyle it. */ .modal-backdrop { --bs-backdrop-bg: var(--ink-900); --bs-backdrop-opacity: .75; backdrop-filter: blur(6px); } .cmodal .modal-dialog { max-width: 420px; } .cmodal .modal-content { position: relative; border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); } .cmodal-accent { display: block; height: 4px; background: linear-gradient(to right, var(--amber-400), var(--orange-500), var(--rose-500)); } .cmodal-x { position: absolute; right: 14px; top: 18px; z-index: 2; display: grid; place-items: center; height: 30px; width: 30px; border: 0; border-radius: 999px; background: transparent; color: #9CA3AF; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; } .cmodal-x:hover { background: #F3F4F6; color: #111827; } /* header — logo, brand, discount chip, title */ .cmodal-head { padding: 28px 28px 20px; text-align: center; } .cmodal-logo { display: grid; place-items: center; height: 60px; width: 60px; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #fff; padding: 8px; box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px rgba(0, 0, 0, .08); } .cmodal-logo img { max-height: 100%; max-width: 100%; object-fit: contain; } .cmodal-logo span { font-size: 22px; font-weight: 900; color: #374151; } .cmodal-brand { margin: 12px 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: #6B7280; } .cmodal-chips { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .cmodal-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .cmodal-chip.disc { background: #FFF7ED; color: #C2410C; box-shadow: inset 0 0 0 1px #FED7AA; } .cmodal-chip.ok { background: #ECFDF5; color: #047857; box-shadow: inset 0 0 0 1px #A7F3D0; font-size: 12px; } .cmodal-title { margin-top: 14px; font-size: 18px; font-weight: 700; line-height: 1.35; color: #111827; } /* perforated divider, keeping the ticket motif without shouting */ .cmodal-rule { position: relative; height: 1px; margin: 0 20px; background-image: repeating-linear-gradient(to right, var(--line) 0, var(--line) 5px, transparent 5px, transparent 10px); } .cmodal-rule .n { position: absolute; top: -10px; height: 20px; width: 20px; border-radius: 999px; background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--line); } .cmodal-rule .n.l { left: -30px; } .cmodal-rule .n.r { right: -30px; } .cmodal-body { padding: 24px 28px 22px; text-align: center; } .cmodal-label { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: #6B7280; } .cmodal-code { display: flex; align-items: stretch; gap: 8px; } .cmodal-code .box { flex: 1; min-width: 0; display: grid; place-items: center; border-radius: 10px; border: 2px dashed #FDA4AF; background: #FFF1F2; padding: 13px 12px; } .cmodal-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 21px; font-weight: 700; letter-spacing: .14em; color: #E11D48; word-break: break-all; line-height: 1.2; } .cmodal-copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; background: #111827; padding: 0 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; cursor: pointer; transition: background .15s; } .cmodal-copy:hover { background: #000; } .cmodal-copy.done { background: var(--emerald-500); } .cmodal-hint { margin: 12px 0 0; font-size: 13px; color: #6B7280; } .cmodal-go { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; background: var(--emerald-500); padding: 14px 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; box-shadow: 0 10px 20px rgba(16, 185, 129, .28); transition: background .2s, box-shadow .2s; } .cmodal-go:hover { background: var(--emerald-400); color: #fff; box-shadow: 0 12px 24px rgba(16, 185, 129, .42); } .cmodal-tab { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: #9CA3AF; } .cmodal-foot { border-top: 1px solid #F3F4F6; background: var(--bg-muted); padding: 14px 28px; display: flex; flex-direction: column; gap: 6px; } .cmodal-foot .item { font-size: 12px; line-height: 1.5; color: #6B7280; text-align: left; } /* ========================================================================== BREADCRUMBS (shared/Breadcrumbs.tsx) ========================================================================== */ .crumbs { font-size: 12px; } @media (min-width: 640px) { .crumbs { font-size: 14px; } } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .crumbs li { display: flex; align-items: center; gap: 6px; } .crumbs a { display: inline-flex; align-items: center; gap: 4px; transition: color .15s; } .crumbs .sep { font-size: 11px; } .crumbs.dark a { color: rgba(255, 255, 255, .6); } .crumbs.dark a:hover { color: var(--amber-400); } .crumbs.dark .sep { color: rgba(255, 255, 255, .3); } .crumbs.dark .now { font-weight: 500; color: #fff; } .crumbs.light a { color: #6B7280; } .crumbs.light a:hover { color: var(--indigo-600); } .crumbs.light .sep { color: #9CA3AF; } .crumbs.light .now { font-weight: 500; color: #111827; } /* ========================================================================== BLOG — shared pieces ========================================================================== */ .serif { font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; } /* cover placeholder — no featured image in the library yet, so build a deliberate tile from the category colour and icon instead of a broken img */ .cover { position: relative; width: 100%; overflow: hidden; background: #F3F4F6; } .cover img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; } .cover-ph { display: grid; place-items: center; height: 100%; width: 100%; background: linear-gradient(135deg, var(--ph-a, #4F46E5), var(--ph-b, #9333EA)); } .cover-ph span { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); } .cover-ph.lg span { font-size: 72px; } .cover-ph.sm span { font-size: 26px; } /* category tabs (blog/BlogCategoryNav.tsx) */ .cat-nav { display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: 1px; margin-bottom: 48px; scrollbar-width: none; } .cat-nav::-webkit-scrollbar { display: none; } .cat-nav a { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; white-space: nowrap; border-bottom: 2px solid transparent; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #4B5563; transition: color .15s, border-color .15s; } .cat-nav a:hover { color: #111827; } .cat-nav a.active { border-bottom-color: var(--indigo-600); color: var(--indigo-600); } /* post card used on /blog and the category archives */ .bc { display: block; } .bc .cover { aspect-ratio: 4 / 3; border-radius: 12px; } .bc:hover .cover img { transform: scale(1.05); } .bc-body { margin-top: 16px; } .pill-soft { display: inline-flex; border-radius: 999px; background: #E0E7FF; padding: 2px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #4338CA; } .bc h3 { margin-top: 12px; font-size: 18px; font-weight: 700; line-height: 1.35; color: #111827; transition: color .15s; } .bc:hover h3 { color: var(--indigo-600); } .bc p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #4B5563; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bc-meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; } .bc-meta .dot { height: 4px; width: 4px; border-radius: 999px; background: #D1D5DB; } .bc-meta span { display: inline-flex; align-items: center; gap: 4px; } .blog-grid { display: grid; gap: 32px; } @media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== BLOG INDEX — featured hero ========================================================================== */ .bf { position: relative; display: block; overflow: hidden; border-radius: 24px; background: #111827; margin-bottom: 64px; } .bf .cover { aspect-ratio: 16 / 9; } @media (min-width: 768px) { .bf .cover { aspect-ratio: 21 / 9; } } .bf:hover .cover img { transform: scale(1.05); } .bf-shade { position: absolute; inset: 0; background: linear-gradient(to top, #000, rgba(0, 0, 0, .4) 45%, transparent); } .bf-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; } @media (min-width: 640px) { .bf-body { padding: 40px; } } .pill-indigo { display: inline-flex; border-radius: 999px; background: var(--indigo-600); padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; } .bf-body h2 { margin-top: 16px; font-size: 24px; line-height: 1.2; color: #fff; } @media (min-width: 640px) { .bf-body h2 { font-size: 30px; } } @media (min-width: 1024px) { .bf-body h2 { font-size: 36px; } } .bf-body p { margin: 12px 0 0; max-width: 42rem; font-size: 14px; color: rgba(255, 255, 255, .8); } @media (min-width: 640px) { .bf-body p { font-size: 16px; } } .bf-meta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .7); } .bf-meta .dot { height: 4px; width: 4px; border-radius: 999px; background: rgba(255, 255, 255, .5); } .bf-meta span { display: inline-flex; align-items: center; gap: 4px; } /* ========================================================================== BLOG POST — hero, article card, author, sidebar ========================================================================== */ .bp-hero { position: relative; overflow: hidden; background: var(--ink-900); } .bp-hero-bg { position: absolute; inset: 0; } .bp-hero-bg .tint { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 10, 15, .6), rgba(10, 10, 15, .8) 50%, var(--ink-900)); } .bp-hero .glow { opacity: .5; } .bp-hero .glow .g1 { top: -96px; left: 25%; width: 384px; height: 384px; background: rgba(79, 70, 229, .2); filter: blur(140px); } .bp-hero .glow .g2 { bottom: -96px; right: 25%; top: auto; width: 384px; height: 384px; background: rgba(147, 51, 234, .2); filter: blur(140px); } .bp-hero-in { position: relative; padding: 48px 0; } @media (min-width: 1024px) { .bp-hero-in { padding: 64px 0; } } .bp-hero-mid { margin: 32px auto 0; max-width: 56rem; text-align: center; } .bp-cat { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; transition: transform .15s; } .bp-cat:hover { transform: scale(1.05); } .bp-hero-mid h1 { margin-top: 24px; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; color: #fff; } @media (min-width: 640px) { .bp-hero-mid h1 { font-size: 40px; } } @media (min-width: 1024px) { .bp-hero-mid h1 { font-size: 52px; } } .bp-hero-mid .lede { margin: 24px auto 0; max-width: 48rem; font-size: 17px; line-height: 1.65; color: #D1D5DB; } @media (min-width: 640px) { .bp-hero-mid .lede { font-size: 20px; } } .bp-hero-meta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; font-size: 13px; color: #9CA3AF; } .bp-hero-meta span { display: inline-flex; align-items: center; gap: 6px; } .bp-hero-meta b { color: #fff; font-weight: 600; } .bp-cover { position: relative; margin-top: -32px; } .bp-cover .inner { overflow: hidden; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35); } .bp-cover .cover { aspect-ratio: 2 / 1; } .bp-main { background: linear-gradient(to bottom, var(--bg-muted), var(--bg)); padding: 64px 0; } @media (min-width: 640px) { .bp-main { padding: 80px 0; } } .bp-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .bp-grid { grid-template-columns: 8fr 4fr; } } .bp-card { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .05); } .bp-share { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F3F4F6; background: rgba(249, 250, 251, .5); padding: 12px 24px; } @media (min-width: 640px) { .bp-share { padding: 12px 40px; } } .bp-share-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6B7280; } .bp-share-links { display: flex; align-items: center; gap: 8px; } .bp-share-links a, .bp-share-links button { display: inline-flex; height: 36px; width: 36px; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #fff; color: #4B5563; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: all .15s; } .bp-share-links .fb:hover { background: #2563EB; color: #fff; } .bp-share-links .tw:hover { background: #0EA5E9; color: #fff; } .bp-share-links .li:hover { background: #1D4ED8; color: #fff; } .bp-share-links .cp:hover { background: #111827; color: #fff; } /* article body */ .bp-body { padding: 32px 24px; } @media (min-width: 640px) { .bp-body { padding: 48px 40px; } } @media (min-width: 1024px) { .bp-body { padding: 48px 56px; } } .bp-body { color: #374151; font-size: 17px; line-height: 1.85; overflow-wrap: break-word; } @media (min-width: 640px) { .bp-body { font-size: 18px; } } .bp-body > *:first-child { margin-top: 0; } .bp-body h2 { position: relative; margin: 48px 0 20px; padding-bottom: 8px; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; color: #111827; font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; } @media (min-width: 640px) { .bp-body h2 { font-size: 30px; } } .bp-body h2::after { content: ''; position: absolute; bottom: 0; left: 0; height: 4px; width: 60px; border-radius: 999px; background: linear-gradient(to right, var(--amber-500), #EF4444); } .bp-body h3 { margin: 40px 0 16px; font-size: 21px; color: #111827; font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; } @media (min-width: 640px) { .bp-body h3 { font-size: 24px; } } .bp-body p { margin: 20px 0; } .bp-body a { color: var(--indigo-600); font-weight: 600; } .bp-body a:hover { text-decoration: underline; } .bp-body strong { color: #111827; font-weight: 700; } .bp-body img { border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, .1); margin: 32px 0; } .bp-body hr { margin: 48px 0; border: 0; border-top: 1px solid var(--line); } /* gradient dot bullets and numbered circles, as on the original */ .bp-body ul { margin: 24px 0; padding: 0; list-style: none; } .bp-body ul li { position: relative; margin: 10px 0; padding-left: 28px; font-size: 16px; line-height: 1.7; } @media (min-width: 640px) { .bp-body ul li { font-size: 17px; } } .bp-body ul li::before { content: ''; position: absolute; left: 0; top: .7em; height: 8px; width: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--orange-500), #E11D48); } .bp-body ol { margin: 24px 0; padding: 0; list-style: none; counter-reset: bp-counter; } .bp-body ol li { position: relative; counter-increment: bp-counter; margin: 12px 0; padding-left: 40px; font-size: 16px; line-height: 1.7; } @media (min-width: 640px) { .bp-body ol li { font-size: 17px; } } .bp-body ol li::before { content: counter(bp-counter); position: absolute; left: 0; top: .1em; display: grid; place-items: center; height: 28px; width: 28px; border-radius: 999px; background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; font-size: 14px; font-weight: 700; } .bp-body blockquote { margin: 32px 0; border-left: 4px solid var(--amber-500); border-radius: 0 12px 12px 0; background: linear-gradient(to right, #FFFBEB, rgba(255, 247, 237, .5)); padding: 16px 24px; font-size: 18px; font-weight: 500; color: #1F2937; } .bp-body blockquote p { margin: 0; } .bp-body table { width: 100%; margin: 32px 0; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .bp-body thead { background: linear-gradient(to right, var(--indigo-600), var(--purple-600)); } .bp-body th { padding: 12px 16px; text-align: left; font-weight: 700; color: #fff; } .bp-body td { padding: 12px 16px; border-bottom: 1px solid #F3F4F6; } .bp-body code { border-radius: 4px; background: #F3F4F6; padding: 2px 6px; font-size: .9em; color: #DB2777; } .bp-tags { border-top: 1px solid #F3F4F6; padding: 24px; } @media (min-width: 640px) { .bp-tags { padding: 24px 40px; } } .bp-tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bp-tags-row > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6B7280; } .bp-tag { border-radius: 999px; background: #F3F4F6; padding: 4px 12px; font-size: 12px; font-weight: 600; color: #374151; transition: all .15s; } .bp-tag:hover { background: #E0E7FF; color: #4338CA; } /* author card */ .bp-author { margin-top: 32px; overflow: hidden; border-radius: 16px; padding: 32px; background: linear-gradient(to bottom right, #EEF2FF, #FAF5FF 50%, #FDF2F8); box-shadow: inset 0 0 0 1px #E0E7FF; } .bp-author-in { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } @media (min-width: 640px) { .bp-author-in { flex-direction: row; } } .bp-avatar { height: 80px; width: 80px; flex-shrink: 0; border-radius: 999px; object-fit: cover; box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 0 0 4px #fff; } .bp-avatar-ph { display: grid; place-items: center; height: 80px; width: 80px; flex-shrink: 0; border-radius: 999px; background: linear-gradient(to bottom right, var(--amber-400), var(--rose-500)); font-size: 26px; font-weight: 900; color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 0 0 4px #fff; } .bp-author .eyebrow { color: var(--indigo-600); letter-spacing: .2em; } .bp-author h3 { margin-top: 4px; font-size: 20px; color: #111827; } .bp-author .role { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--indigo-600); } .bp-author .bio { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: #374151; } /* related */ .bp-related { margin-top: 48px; } .bp-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .bp-related-head .eyebrow { color: #D97706; letter-spacing: .2em; } .bp-related-head h2 { margin-top: 8px; font-size: 26px; color: #111827; font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; } @media (min-width: 640px) { .bp-related-head h2 { font-size: 30px; } } .bp-related-grid { margin-top: 24px; display: grid; gap: 24px; } @media (min-width: 640px) { .bp-related-grid { grid-template-columns: repeat(2, 1fr); } } .rp { display: block; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .05); transition: transform .2s, box-shadow .2s; } .rp:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 20px 30px rgba(0, 0, 0, .12); } .rp .cover { aspect-ratio: 16 / 10; } .rp:hover .cover img { transform: scale(1.05); } .rp-body { padding: 20px; } .rp-body h3 { margin-top: 8px; font-size: 17px; line-height: 1.3; color: #111827; font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; transition: color .15s; } .rp:hover .rp-body h3 { color: var(--indigo-600); } .rp-meta { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7280; } .pill-tint { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } /* ========================================================================== BLOG SIDEBAR (blog/BlogSidebar.tsx) ========================================================================== */ .bs-stack { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 1024px) { .bs-stack { position: sticky; top: 96px; } } .bs-news { position: relative; overflow: hidden; border-radius: 16px; padding: 24px; color: #fff; background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600), var(--indigo-800)); box-shadow: 0 10px 20px rgba(0, 0, 0, .12); } .bs-news .blob { position: absolute; height: 128px; width: 128px; border-radius: 999px; filter: blur(32px); pointer-events: none; } .bs-news .blob.a { right: -32px; top: -32px; background: rgba(252, 211, 77, .2); } .bs-news .blob.b { left: -32px; bottom: -32px; background: rgba(255, 255, 255, .1); } .bs-news .inner { position: relative; } .bs-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(255, 255, 255, .15); padding: 4px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-300); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } .bs-news h3 { margin-top: 12px; font-size: 20px; line-height: 1.25; color: #fff; } .bs-news p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); } .bs-news form { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .bs-news input { width: 100%; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .95); padding: 10px 16px; font-size: 14px; color: #111827; outline: none; } .bs-news input:focus { background: #fff; box-shadow: 0 0 0 2px var(--amber-400); } .bs-news button { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; background: var(--amber-400); padding: 10px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #111827; cursor: pointer; transition: background .15s; } .bs-news button:hover { background: var(--amber-300); } .bs-card { overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .bs-card > header { border-bottom: 1px solid #F3F4F6; padding: 16px 20px; } .bs-card > header h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #111827; } .bs-card.h-rose > header { background: linear-gradient(to right, #FFF1F2, #FDF2F8); } .bs-card.h-rose header i { color: var(--rose-500); } .bs-card.h-indigo > header { background: linear-gradient(to right, #EEF2FF, #FAF5FF); } .bs-card.h-indigo header i { color: #6366F1; } .bs-pop { list-style: none; margin: 0; padding: 0; } .bs-pop li + li { border-top: 1px solid #F3F4F6; } .bs-pop a { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; transition: background .15s; } .bs-pop a:hover { background: var(--bg-muted); } .bs-rank { display: grid; place-items: center; height: 28px; width: 28px; flex-shrink: 0; border-radius: 999px; background: linear-gradient(to bottom right, #FB7185, #EC4899); font-size: 12px; font-weight: 900; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .bs-pop h4 { font-size: 14px; font-weight: 600; line-height: 1.4; color: #111827; transition: color .15s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bs-pop a:hover h4 { color: #E11D48; } .bs-pop .meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: #6B7280; } .bs-pop .meta span { display: inline-flex; align-items: center; gap: 4px; } .bs-cats { list-style: none; margin: 0; padding: 12px; } .bs-cats a { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; padding: 10px 12px; font-size: 14px; transition: background .15s; } .bs-cats a:hover { background: #EEF2FF; } .bs-cats .name { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: #374151; } .bs-cats a:hover .name { color: var(--indigo-600); } .bs-cats .swatch { height: 8px; width: 8px; flex-shrink: 0; border-radius: 999px; } .bs-cats .n { border-radius: 999px; background: #F3F4F6; padding: 2px 8px; font-size: 10px; font-weight: 700; color: #4B5563; } .bs-cats a:hover .n { background: #E0E7FF; color: var(--indigo-600); } .bs-promo { overflow: hidden; border-radius: 16px; padding: 24px; color: #fff; background: linear-gradient(to bottom right, var(--amber-400), var(--orange-500) 50%, var(--rose-500)); box-shadow: 0 10px 20px rgba(0, 0, 0, .12); } .bs-promo > i { font-size: 30px; } .bs-promo h3 { margin-top: 12px; font-size: 18px; line-height: 1.25; color: #fff; } .bs-promo p { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, .95); } .bs-promo a { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #fff; padding: 8px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #C2410C; transition: background .15s; } .bs-promo a:hover { background: #FEF3C7; color: #C2410C; } /* ---------- Chips / misc ---------- */ .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; color: #374151; background: #fff; font-weight: 600; } .chip:hover { border-color: var(--fg); color: var(--fg); } .chip.active { background: var(--fg); color: #fff; border-color: var(--fg); } .side-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 20px; } .side-card h3 { font-size: 15px; margin-bottom: 14px; font-weight: 800; } .alert-note { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: 14px 16px; font-size: 14px; color: #78500A; } .faq-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .faq-q { padding: 15px 18px; font-weight: 700; color: var(--fg); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; } .faq-a { padding: 0 18px 15px; color: #4B5563; font-size: 15px; display: none; } .faq-item.open .faq-a { display: block; }