/* ============================================================ DealsSpy design system All colours/spacing live as CSS variables so a single edit re-themes the whole site. Component classes (ds-*) keep the view templates readable and consistent alongside Tailwind. ============================================================ */ :root { /* Brand — deep indigo-navy (dealsspy.in signature #2B3467). Used for the header/footer chrome, links and structural accents. */ --brand: #2b3467; --brand-strong: #20264c; /* deeper tone for gradients + active/hover */ --brand-tint: #eceef8; /* pale indigo surface (tinted chips, tabs) */ --brand-text: #313b7d; /* readable link/interactive ink on light */ /* Accent — deal orange. The "hot deal / take action" colour that both DesiDime and Slickdeals lean on for their primary buy CTAs. */ --accent: #f26a21; --accent-strong: #d85710; --accent-tint: #fff1e7; --accent-text: #c2410c; /* Coral highlight (dealsspy.in #EB455F) — price pops + "new" flags. */ --coral: #eb455f; --coral-tint: #fdecef; /* Savings (green), heat (burnt-orange), danger (red) — text on tint */ --save-text: #12703a; --save-bg: #dbf5e4; --heat-text: #c2410c; --heat-bg: #ffe8d5; --danger-text: #b42318; --danger-bg: #fde5e3; /* Neutrals — cool grays carrying a faint indigo cast so they sit under the navy chrome instead of fighting it. */ --page-bg: #f2f4fb; --surface: #ffffff; --surface-2: #f7f8fd; /* subtle raised/striped rows */ --border: #e5e8f3; --border-strong: #cdd4e6; --text: #191f38; /* near-navy ink (warmer than pure slate) */ --text-muted: #565f7e; --text-faint: #98a0bc; /* Chrome (header/footer) */ --header-grad: linear-gradient(180deg, #2b3467 0%, #232a57 100%); --footer-bg: #20264c; --on-brand: rgba(255, 255, 255, .92); /* text on navy */ --on-brand-muted: rgba(255, 255, 255, .62); --on-brand-hover: rgba(255, 255, 255, .14); /* hover wash on navy */ /* Shape */ --radius: 14px; --radius-sm: 9px; --radius-pill: 999px; /* Type */ --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } /* ---------- dark theme ---------- The dark palette is defined once in a variable set (--dark-*) and applied in two situations: 1. the OS asks for dark AND the visitor hasn't forced a theme, and 2. the visitor explicitly picked dark via the header toggle. A visitor who forces LIGHT (data-theme="light") always sees the light :root above, even on a dark OS. The toggle stamps data-theme on ; with no stamp we fall back to the OS preference (the original behaviour). */ /* The dark values, kept in one place so both triggers below stay in sync. */ :root { --dark-brand: #6b78d6; --dark-brand-strong: #4a56ad; --dark-brand-tint: #1c2140; --dark-brand-text: #aab4f0; --dark-accent: #f97b3a; --dark-accent-strong: #e2661f; --dark-accent-tint: #37220f; --dark-accent-text: #ffb98f; --dark-coral: #f2607a; --dark-coral-tint: #3a1c24; --dark-save-text: #4ade80; --dark-save-bg: #0c2f1c; --dark-heat-text: #fdba74; --dark-heat-bg: #38230f; --dark-danger-text: #fca5a5; --dark-danger-bg: #3f1616; --dark-page-bg: #0d1020; --dark-surface: #151a30; --dark-surface-2: #1a2038; --dark-border: #262d47; --dark-border-strong: #38416b; --dark-text: #e6e9f5; --dark-text-muted: #a2abca; --dark-text-faint: #6b7396; --dark-header-grad: linear-gradient(180deg, #171c34 0%, #12162a 100%); --dark-footer-bg: #10132a; --dark-on-brand: rgba(255, 255, 255, .92); --dark-on-brand-muted: rgba(255, 255, 255, .55); --dark-on-brand-hover: rgba(255, 255, 255, .12); } /* Promote the dark values onto the live theme variables. This one rule is shared by both dark triggers via the selector list below. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } } html[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):root { --brand: var(--dark-brand); --brand-strong: var(--dark-brand-strong); --brand-tint: var(--dark-brand-tint); --brand-text: var(--dark-brand-text); --accent: var(--dark-accent); --accent-strong: var(--dark-accent-strong); --accent-tint: var(--dark-accent-tint); --accent-text: var(--dark-accent-text); --coral: var(--dark-coral); --coral-tint: var(--dark-coral-tint); --save-text: var(--dark-save-text); --save-bg: var(--dark-save-bg); --heat-text: var(--dark-heat-text); --heat-bg: var(--dark-heat-bg); --danger-text: var(--dark-danger-text); --danger-bg: var(--dark-danger-bg); --page-bg: var(--dark-page-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2); --border: var(--dark-border); --border-strong: var(--dark-border-strong); --text: var(--dark-text); --text-muted: var(--dark-text-muted); --text-faint: var(--dark-text-faint); --header-grad: var(--dark-header-grad); --footer-bg: var(--dark-footer-bg); --on-brand: var(--dark-on-brand); --on-brand-muted: var(--dark-on-brand-muted); --on-brand-hover: var(--dark-on-brand-hover); } } html[data-theme="dark"]:root { --brand: var(--dark-brand); --brand-strong: var(--dark-brand-strong); --brand-tint: var(--dark-brand-tint); --brand-text: var(--dark-brand-text); --accent: var(--dark-accent); --accent-strong: var(--dark-accent-strong); --accent-tint: var(--dark-accent-tint); --accent-text: var(--dark-accent-text); --coral: var(--dark-coral); --coral-tint: var(--dark-coral-tint); --save-text: var(--dark-save-text); --save-bg: var(--dark-save-bg); --heat-text: var(--dark-heat-text); --heat-bg: var(--dark-heat-bg); --danger-text: var(--dark-danger-text); --danger-bg: var(--dark-danger-bg); --page-bg: var(--dark-page-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2); --border: var(--dark-border); --border-strong: var(--dark-border-strong); --text: var(--dark-text); --text-muted: var(--dark-text-muted); --text-faint: var(--dark-text-faint); --header-grad: var(--dark-header-grad); --footer-bg: var(--dark-footer-bg); --on-brand: var(--dark-on-brand); --on-brand-muted: var(--dark-on-brand-muted); --on-brand-hover: var(--dark-on-brand-hover); } /* ---------- base ---------- */ * { box-sizing: border-box; } body { font-family: var(--font); font-weight: 400; font-size: 15px; color: var(--text); background: var(--page-bg); -webkit-font-smoothing: antialiased; } @media (min-width: 768px) { body { font-size: 16px; } } a { color: var(--brand-text); text-decoration: none; } a:hover { text-decoration: underline; } /* Only weights 400 and 500 in use */ .ds-medium { font-weight: 500; } /* ---------- layout helpers ---------- */ .ds-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; } .ds-muted { color: var(--text-muted); } .ds-faint { color: var(--text-faint); } /* ---------- cards ---------- */ .ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .ds-card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); border-color: var(--border-strong); } .ds-card-featured { border: 2px solid var(--brand); } /* ---------- pills / badges ---------- */ .ds-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; } .ds-pill-save { color: var(--save-text); background: var(--save-bg); } .ds-pill-heat { color: var(--heat-text); background: var(--heat-bg); } .ds-pill-danger { color: var(--danger-text); background: var(--danger-bg); } .ds-pill-brand { color: var(--brand-text); background: var(--brand-tint); } .ds-pill-neutral{ color: var(--text-muted); background: var(--page-bg); border: 1px solid var(--border); } /* ---------- store chip ---------- */ .ds-store { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--brand-text); } .ds-store-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 500; } /* ---------- buttons ---------- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; text-decoration: none; } .ds-btn:hover { text-decoration: none; } /* Solid brand navy — the confident default CTA (forms, comments, etc.) */ .ds-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(23, 29, 56, .18); } .ds-btn-primary:hover { background: var(--brand-strong); color: #fff; } /* Solid orange accent — the "get the deal / hot action" money button. */ .ds-btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 2px rgba(194, 65, 12, .25); } .ds-btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } /* Tinted accent — lightweight secondary action (auto-fill, etc.) */ .ds-btn-get { background: var(--accent-tint); color: var(--accent-text); border-color: var(--accent-tint); } .ds-btn-get:hover { background: #ffe4d1; } /* Neutral outline */ .ds-btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .ds-btn-ghost:hover { background: var(--page-bg); border-color: var(--border-strong); } .ds-btn-block { width: 100%; } .ds-btn-lg { padding: 12px 18px; font-size: 15px; } /* ---------- form controls ---------- */ .ds-input, .ds-textarea, .ds-select { width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s ease, box-shadow .15s ease; } .ds-input:focus, .ds-textarea:focus, .ds-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .ds-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; } /* ---------- tabs ---------- */ .ds-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .ds-tab { padding: 7px 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .ds-tab:hover { background: var(--page-bg); text-decoration: none; } .ds-tab-active { color: var(--brand-text); background: var(--brand-tint); } /* ---------- category / store chips ---------- */ .ds-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); white-space: nowrap; cursor: pointer; } .ds-chip:hover { border-color: var(--border-strong); text-decoration: none; } .ds-chip-active { color: var(--brand-text); background: var(--brand-tint); border-color: transparent; } /* ---------- tag chip-picker (no-JS, :has()) ---------- */ /* A .ds-chip-shaped label wrapping a hidden checkbox. The whole label is the hit target; :has() paints the checked state so it needs no JavaScript. */ .ds-tagchip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; } /* Hide the checkbox visually but keep it in the form payload + a11y tree. */ .ds-tagchip input { position: absolute; opacity: 0; width: 0; height: 0; } .ds-tagchip:hover { border-color: var(--border-strong); } .ds-tagchip:has(input:checked), .ds-tagchip.is-selected { color: var(--brand-text); background: var(--brand-tint); border-color: transparent; } /* ---------- searchable tag picker ---------- */ .ds-tagpicker { display: flex; flex-direction: column; gap: 12px; } .ds-tagpicker__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ds-tagpicker__search { position: relative; flex: 1; min-width: 200px; display: flex; align-items: center; } .ds-tagpicker__search i { position: absolute; left: 12px; color: var(--text-faint); font-size: 16px; pointer-events: none; } .ds-tagpicker__input { width: 100%; padding: 9px 12px 9px 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; } .ds-tagpicker__input:focus { outline: none; border-color: var(--brand); } .ds-tagpicker__count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .ds-tagpicker__chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Collapsed: cap the visible height to roughly the first --tagpicker-max chips (~2 rows worth) and fade the cut-off edge; expanding or searching lifts it. */ .ds-tagpicker__chips.is-collapsible:not(.is-expanded):not(.is-searching) { max-height: 92px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); } .ds-tagpicker__empty { font-size: 13px; color: var(--text-muted); margin: 0; } .ds-tagpicker__more { align-self: flex-start; font-size: 13px; font-weight: 500; color: var(--brand-text); background: none; border: none; padding: 2px 0; cursor: pointer; } .ds-tagpicker__more:hover { text-decoration: underline; } /* ---------- deal card ---------- */ .ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .ds-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--page-bg), var(--brand-tint)); display: grid; place-items: center; color: var(--text-faint); overflow: hidden; } .ds-thumb img { width: 100%; height: 100%; object-fit: cover; } /* ---------- deal ribbon ---------- Short moderator-set flag (e.g. "LOOT", "HOT DEAL") pinned to the top-left of a deal thumbnail. Bold accent so it reads as an editorial highlight, above the image but below the out-of-stock overlay. Theme-aware via the accent vars. */ .ds-ribbon { position: absolute; top: 8px; left: 8px; z-index: 2; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); pointer-events: none; } /* Inline variant for the detail-page meta row (sits in normal flow, not a corner). */ .ds-ribbon--inline { position: static; max-width: none; z-index: auto; box-shadow: none; pointer-events: auto; display: inline-flex; align-items: center; } .ds-oos-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; } .ds-price { font-size: 20px; font-weight: 500; color: var(--text); } .ds-price-old { font-size: 14px; color: var(--text-faint); text-decoration: line-through; } /* ---------- coupon reveal ---------- */ .ds-reveal { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--text); cursor: pointer; } .ds-reveal:hover { border-color: var(--brand); background: var(--brand-tint); text-decoration: none; } .ds-code-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; } /* ============================================================ Coupons hub — modern coupon-site polish ============================================================ */ /* ---------- hero strip ---------- */ .ds-cpn-hero { background: var(--header-grad); color: var(--on-brand); border-bottom: 1px solid var(--border); } .ds-cpn-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; flex-wrap: wrap; } .ds-cpn-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-brand-muted); } .ds-cpn-hero__title { font-size: 28px; font-weight: 600; line-height: 1.2; margin: 6px 0 6px; color: #fff; } .ds-cpn-hero__sub { font-size: 14px; color: var(--on-brand-muted); max-width: 46ch; } .ds-cpn-hero__stats { display: flex; gap: 12px; } .ds-cpn-stat { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 14px 18px; border-radius: var(--radius); background: var(--on-brand-hover); border: 1px solid rgba(255, 255, 255, .12); } .ds-cpn-stat__num { font-size: 26px; font-weight: 700; color: #fff; line-height: 1; } .ds-cpn-stat__label { font-size: 12px; color: var(--on-brand-muted); margin-top: 6px; } /* ---------- controls (search + submit) ---------- */ .ds-cpn-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .ds-cpn-search { position: relative; flex: 1; min-width: 220px; display: flex; align-items: center; } .ds-cpn-search i { position: absolute; left: 14px; color: var(--text-faint); font-size: 17px; pointer-events: none; } .ds-cpn-search input { width: 100%; padding: 11px 14px 11px 40px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; } .ds-cpn-search input:focus { outline: none; border-color: var(--brand); } /* ---------- store chip row ---------- */ .ds-cpn-chiprow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; scrollbar-width: none; } .ds-cpn-chiprow::-webkit-scrollbar { display: none; } /* ---------- grid ---------- */ .ds-cpn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } /* ---------- coupon card ---------- */ .ds-cpn-card { height: 100%; } .ds-cpn-card__link { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .ds-cpn-card__link:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: 0 6px 20px rgba(15, 23, 42, .10); transform: translateY(-2px); } .ds-cpn-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* verification badge */ .ds-cpn-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .ds-cpn-badge--ok { color: var(--save-text); background: var(--save-bg); } .ds-cpn-badge--excl { color: var(--brand-text); background: var(--brand-tint); } .ds-cpn-badge--warn { color: var(--heat-text); background: var(--heat-bg); } .ds-cpn-card__body { display: flex; flex-direction: column; gap: 6px; } .ds-cpn-discount { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--accent-text); letter-spacing: -.01em; } .ds-cpn-title { font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* reveal affordance (styled to read like a tear-off code chip) */ .ds-cpn-reveal { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: var(--surface-2); } .ds-cpn-card__link:hover .ds-cpn-reveal { border-color: var(--accent); } .ds-cpn-reveal__code { font-size: 14px; color: var(--text-muted); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-cpn-reveal__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--accent); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; } .ds-cpn-reveal--auto .ds-cpn-reveal__code { color: var(--save-text); font-weight: 600; letter-spacing: 0; } /* trust / meta footer */ .ds-cpn-card__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); } .ds-cpn-meta { display: inline-flex; align-items: center; gap: 4px; } .ds-cpn-meta--ok { color: var(--save-text); font-weight: 600; } .ds-cpn-meta--exp { margin-left: auto; color: var(--text-faint); } @media (max-width: 640px) { .ds-cpn-hero__title { font-size: 22px; } .ds-cpn-hero__stats { width: 100%; } .ds-cpn-stat { flex: 1; } } /* ---------- coupon detail: right-rail panel ---------- */ .ds-cpn-panel { border-color: var(--border-strong); box-shadow: 0 6px 24px rgba(15, 23, 42, .07); } .ds-cpn-panel__discount { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--accent-text); } .ds-cpn-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; } .ds-cpn-code--locked:hover { border-color: var(--accent); background: var(--accent-tint); text-decoration: none; } .ds-cpn-code--live { cursor: default; border-style: solid; border-color: var(--save-text); background: var(--save-bg); } .ds-cpn-code--auto { cursor: default; color: var(--save-text); font-weight: 600; justify-content: flex-start; gap: 6px; } .ds-cpn-code__cta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap; } .ds-cpn-code__copy { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--save-text); background: transparent; border: 1px solid var(--save-text); padding: 4px 11px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; } .ds-cpn-code__copy:hover { background: var(--save-text); color: #fff; } /* ---------- vote control ---------- */ .ds-vote { display: inline-flex; flex-direction: column; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; } .ds-vote button { border: none; background: var(--surface); color: var(--text-muted); padding: 8px 12px; cursor: pointer; font-size: 16px; } .ds-vote button:hover { background: var(--page-bg); color: var(--brand-text); } .ds-vote-score { font-weight: 500; font-size: 14px; color: var(--heat-text); padding: 2px 0; } /* ---------- avatars ---------- */ .ds-avatar { display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-text); font-weight: 500; flex: none; } /* ---------- prose (deal description) ---------- */ .ds-prose { color: var(--text-muted); line-height: 1.65; } .ds-prose p { margin: 0 0 12px; } .ds-prose ul, .ds-prose ol { margin: 0 0 12px; padding-left: 20px; } .ds-prose ul { list-style: disc; } .ds-prose ol { list-style: decimal; } .ds-prose li { margin: 4px 0; } .ds-prose h3 { font-size: 18px; font-weight: 500; color: var(--text); margin: 16px 0 8px; } .ds-prose h4 { font-size: 15px; font-weight: 500; color: var(--text); margin: 14px 0 6px; } .ds-prose blockquote { margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .ds-prose a { color: var(--brand-text); text-decoration: underline; } .ds-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; } .ds-prose pre { background: var(--brand-tint); color: var(--text); padding: 10px 12px; border-radius: 8px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; margin: 0 0 12px; } .ds-prose code { background: var(--brand-tint); color: var(--brand-text); padding: 1px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } /* ---------- segmented control (submit type picker) ---------- */ .ds-segment { display: inline-flex; padding: 4px; gap: 4px; background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .ds-segment button, .ds-segment a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; } .ds-segment a:hover { color: var(--text); text-decoration: none; } .ds-segment button.is-active, .ds-segment a.is-active { background: var(--surface); color: var(--brand-text); box-shadow: 0 1px 2px rgba(15,23,42,.08); } /* ---------- rich text editor (submit description) ---------- */ .ds-rte { position: relative; /* anchors the absolutely-positioned dialog */ border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .ds-rte.is-focused { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .ds-rte__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 6px; background: var(--page-bg); border-bottom: 1px solid var(--border); } .ds-rte__btn { display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 17px; } .ds-rte__btn:hover { background: var(--surface); color: var(--text); } .ds-rte__btn.is-active { background: var(--brand-tint); color: var(--brand-text); } .ds-rte__sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--border); } .ds-rte__area { min-height: 170px; padding: 12px 14px; font-size: 14px; line-height: 1.65; color: var(--text); outline: none; } .ds-rte__area:empty::before { content: attr(data-placeholder); color: var(--text-faint); } .ds-rte__area p { margin: 0 0 10px; } .ds-rte__area h3 { font-size: 18px; font-weight: 600; margin: 12px 0 8px; } .ds-rte__area h4 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; } .ds-rte__area ul, .ds-rte__area ol { margin: 0 0 10px; padding-left: 22px; } .ds-rte__area ul { list-style: disc; } .ds-rte__area ol { list-style: decimal; } .ds-rte__area li { margin: 3px 0; } .ds-rte__area blockquote { margin: 0 0 10px; padding: 6px 14px; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .ds-rte__area a { color: var(--brand-text); text-decoration: underline; } .ds-rte__area img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; } .ds-rte__area pre { background: var(--brand-tint); color: var(--text); padding: 10px 12px; border-radius: 8px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .ds-rte__source { display: none; } /* ---------- rich text editor: fullscreen ---------- */ body.ds-rte-fs-lock { overflow: hidden; } .ds-rte--fullscreen { position: fixed; inset: 0; z-index: 1000; margin: 0; border: none; border-radius: 0; display: flex; flex-direction: column; } .ds-rte--fullscreen .ds-rte__bar { position: sticky; top: 0; z-index: 1; } .ds-rte--fullscreen .ds-rte__area { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 820px; margin: 0 auto; } /* ---------- rich text editor: link/image dialog ---------- */ .ds-rte__dialog { position: absolute; inset: 0; z-index: 20; background: rgba(15, 23, 42, .38); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; } .ds-rte__dialog[hidden] { display: none; } .ds-rte__dialog-box { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 18px 48px rgba(15, 23, 42, .28); padding: 16px 18px; } .ds-rte__dialog-title { font-weight: 500; font-size: 15px; color: var(--text); margin-bottom: 12px; } .ds-rte__dialog-label { display: block; margin-bottom: 10px; } .ds-rte__dialog-label span { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px; } .ds-rte__dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } /* ---------- upload dropzone ---------- */ .ds-dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 32px 20px; text-align: center; color: var(--text-muted); background: var(--page-bg); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .ds-dropzone:hover { border-color: var(--brand); background: var(--brand-tint); } .ds-dropzone i { font-size: 28px; color: var(--text-faint); } /* ---------- header search ---------- */ .ds-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-faint); } .ds-search input { border: none; background: transparent; outline: none; font-size: 14px; color: var(--text); width: 100%; } /* ---------- misc ---------- */ .ds-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 13px; } .ds-divider::before, .ds-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .ds-hairline { border-top: 1px solid var(--border); } /* ============================================================ SITE CHROME — header (navy top bar + nav row) and footer. Deliberately its own section so the "deal-site" chrome reads distinctly from the light content components above. ============================================================ */ /* ---------- header: navy top bar ---------- */ .ds-topbar { background: var(--header-grad); color: var(--on-brand); } .ds-topbar__row { display: flex; align-items: center; gap: 18px; padding: 12px 0; } /* Brand lockup (logo) */ .ds-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.01em; white-space: nowrap; } .ds-brand:hover { text-decoration: none; } .ds-brand__mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent) 0%, var(--coral) 100%); color: #fff; font-size: 17px; box-shadow: 0 2px 8px rgba(242, 106, 33, .35); } .ds-brand__spy { color: #ffb488; } /* Search — white pill that sits on the navy bar */ .ds-topsearch { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; max-width: 560px; padding: 10px 15px; background: #fff; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--text-faint); transition: box-shadow .15s ease; } .ds-topsearch:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); } .ds-topsearch input { border: none; background: transparent; outline: none; font-size: 14px; color: var(--text); width: 100%; } .ds-topsearch i { color: var(--text-faint); font-size: 18px; } /* Icon + text controls living on the navy bar */ .ds-top-ctrl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--on-brand); font-size: 14px; font-weight: 500; background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .ds-top-ctrl:hover { background: var(--on-brand-hover); color: #fff; text-decoration: none; } .ds-top-ctrl--icon { width: 38px; padding: 0; position: relative; font-size: 18px; } /* Theme toggle: show the icon for the mode you'd switch TO, and reveal the right one for the currently-active theme. JS sets data-theme on ; these rules flip which glyph is visible with no extra markup churn. Default (no stamp = follow the OS) shows the "auto" glyph. */ .ds-theme-toggle .ds-theme-ic { display: none; } .ds-theme-toggle .ds-theme-ic--auto { display: inline-flex; } html[data-theme="light"] .ds-theme-toggle .ds-theme-ic { display: none; } html[data-theme="light"] .ds-theme-toggle .ds-theme-ic--light { display: inline-flex; } html[data-theme="dark"] .ds-theme-toggle .ds-theme-ic { display: none; } html[data-theme="dark"] .ds-theme-toggle .ds-theme-ic--dark { display: inline-flex; } .ds-top-ctrl__badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; box-shadow: 0 0 0 2px var(--brand); } /* Country switcher (native
) on the navy bar */ .ds-market { position: relative; } .ds-market > summary { list-style: none; } .ds-market > summary::-webkit-details-marker { display: none; } .ds-market__menu { position: absolute; right: 0; margin-top: 8px; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(23, 29, 56, .22); overflow: hidden; z-index: 50; } .ds-market__item { display: flex; align-items: center; gap: 8px; padding: 10px 13px; font-size: 14px; color: var(--text); } .ds-market__item:hover { background: var(--page-bg); text-decoration: none; } .ds-market__item.is-active { font-weight: 600; color: var(--brand-text); background: var(--brand-tint); } .ds-market__cc { margin-left: auto; text-transform: uppercase; font-size: 11px; color: var(--text-faint); } /* ---------- header: secondary nav row ---------- */ .ds-navbar { background: var(--surface); border-bottom: 1px solid var(--border); } .ds-navbar__row { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; } .ds-navbar__row::-webkit-scrollbar { display: none; } .ds-navlink { display: inline-flex; align-items: center; gap: 6px; padding: 13px 14px; font-size: 14px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .ds-navlink:hover { color: var(--brand-text); text-decoration: none; } .ds-navlink.is-active { color: var(--brand-text); border-bottom-color: var(--accent); } .ds-navlink i { font-size: 16px; } .ds-navlink--hot { color: var(--accent-text); } /* ---------- footer (dark navy) ---------- */ .ds-footer { margin-top: 64px; background: var(--footer-bg); color: var(--on-brand-muted); } .ds-footer a { color: rgba(255, 255, 255, .78); } .ds-footer a:hover { color: #fff; text-decoration: none; } .ds-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0 36px; } @media (max-width: 860px) { .ds-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } .ds-footer__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .ds-footer__grid { grid-template-columns: 1fr; } } .ds-footer__brand-lockup { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; color: #fff; } .ds-footer__blurb { margin-top: 12px; max-width: 30ch; font-size: 14px; line-height: 1.6; color: var(--on-brand-muted); } .ds-footer__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .95); margin-bottom: 14px; } .ds-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .ds-footer__bar { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--on-brand-muted); } .ds-footer__bar .ds-footer__spacer { margin-left: auto; } .ds-footer__social { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .82); font-size: 17px; } .ds-footer__social:hover { background: var(--accent); color: #fff; } /* ============================================================ SUBMIT — two-column deal composer + sticky live preview. Wider than a plain form page; collapses to one column on narrow screens with the preview dropping below the form. ============================================================ */ .ds-submit { max-width: 1080px; } .ds-submit__head { margin-bottom: 20px; } .ds-submit__types { margin-bottom: 18px; } .ds-submit__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; } @media (max-width: 900px) { .ds-submit__grid { grid-template-columns: 1fr; } } .ds-submit__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } /* ---------- titled section card ---------- */ .ds-fieldset { padding: 18px 20px; } .ds-fieldset__head { display: flex; gap: 12px; margin-bottom: 16px; } .ds-fieldset__step { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-text); font-size: 13px; font-weight: 600; } .ds-fieldset__title { font-size: 15px; font-weight: 500; color: var(--text); } .ds-fieldset__hint { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; line-height: 1.5; } .ds-fieldset__body { display: flex; flex-direction: column; gap: 14px; } /* two-up field grid inside a section */ .ds-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .ds-field-grid { grid-template-columns: 1fr; } } /* label row with a counter / live chip aligned right */ .ds-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ds-field-counter { font-size: 12px; color: var(--text-faint); } /* ---------- inline validation ---------- */ .ds-field-error { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; color: var(--danger-text); } .ds-input.is-invalid, .ds-select.is-invalid, .ds-textarea.is-invalid, .ds-dropzone.is-invalid { border-color: var(--danger-text); box-shadow: 0 0 0 3px var(--danger-bg); } /* ---------- deal-link row + "matched store" pill ---------- */ .ds-link-row { display: flex; gap: 8px; } .ds-link-row .ds-input { flex: 1; min-width: 0; } .ds-store-matched { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; color: var(--save-text); background: var(--save-bg); } /* live "% OFF" chip in the pricing section */ .ds-off-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: var(--save-text); background: var(--save-bg); } /* ---------- image dropzone: drag + preview states ---------- */ .ds-dropzone.is-drag { border-color: var(--brand); background: var(--brand-tint); } .ds-dropzone--image { display: block; position: relative; } .ds-dz-preview { display: flex; align-items: center; gap: 14px; text-align: left; } .ds-dz-preview img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); flex: none; } .ds-dz-preview__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .ds-dz-preview__meta .ds-medium { word-break: break-all; } .ds-btn-sm { padding: 5px 10px; font-size: 13px; } /* ---------- sticky live preview ---------- */ .ds-submit__side { position: sticky; top: 90px; } @media (max-width: 900px) { .ds-submit__side { position: static; } } .ds-preview__label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 10px; } .ds-preview__card .ds-thumb { aspect-ratio: 16 / 10; } /* ---------- submit action bar ---------- */ .ds-submit__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }