/* ========================================================================== Clip, compiled stylesheet. Every value traces to DESIGN-TOKENS.md (canon). Authored from the inline styles in Clip Coupons.dc.html. No framework. ========================================================================== */ :root { --accent: #4f46e5; --accent-soft: #eef2ff; --clip-w: 1200px; /* Theming tokens, every surface/text/line color flows through these so the site can render light or dark from one switch. */ --bg: #ffffff; --surface: #ffffff; --raised: #f4f5f7; --ink: #16181d; --ink2: #4b5563; --muted: #6b7280; --faint: #6f747d; --line: #ececf0; /* --good stays for icons/large text; --good-ink is the AA-safe green for small metadata text (e.g. the "N% worked" microcopy). */ --good: #059669; --good-ink: #047857; --good-soft: #ecfdf5; --hdr-bg: rgba(255,255,255,.85); --on-accent: #ffffff; color-scheme: light; } /* Light is the default for everyone. Dark applies only when the visitor opts in via the header toggle (sets data-theme="dark" on ), we intentionally do NOT follow the OS prefers-color-scheme, so a device in dark mode still opens the site in light. */ :root[data-theme="dark"], html[data-theme="dark"] { --accent: #8078f2; --accent-soft: #211f3d; --bg: #0f1013; --surface: #191b22; --raised: #21232c; --ink: #eef0f5; --ink2: #c4c9d3; --muted: #9aa0ad; --faint: #8b909c; --line: #2a2d37; --good: #34d399; --good-ink: #34d399; --good-soft: #12291f; --hdr-bg: rgba(16,17,21,.82); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Manrope', sans-serif; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, p { margin: 0; } ::selection { background: rgba(79,70,229,.18); } input::placeholder { color: var(--muted); } /* The hidden attribute must always win, even over inline display:* on a component. */ [hidden] { display: none !important; } /* ---- Focus visibility (a11y) ---- One keyboard-only focus ring for every interactive control. Mouse clicks stay clean because :focus-visible only matches keyboard focus. The five fields that set outline:none re-add their own :focus-visible ring next to their base rule. */ :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* ---- Motion (verbatim from design) ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes listFade { from { opacity: .25; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } [data-reveal] { animation: fadeUp .6s both; } /* Staggered list reveal, same proven mechanism as [data-reveal] but opacity-only, so the finished fill state never pins a card's transform (keeps :hover lift). */ @keyframes clipListIn { from { opacity: 0; } to { opacity: 1; } } [data-listfx] > * { animation: clipListIn .5s both; } [data-listfx] > *:nth-child(1) { animation-delay: 0s; } [data-listfx] > *:nth-child(2) { animation-delay: .04s; } [data-listfx] > *:nth-child(3) { animation-delay: .08s; } [data-listfx] > *:nth-child(4) { animation-delay: .12s; } [data-listfx] > *:nth-child(5) { animation-delay: .16s; } [data-listfx] > *:nth-child(6) { animation-delay: .20s; } [data-listfx] > *:nth-child(7) { animation-delay: .24s; } [data-listfx] > *:nth-child(8) { animation-delay: .28s; } [data-listfx] > *:nth-child(9) { animation-delay: .32s; } [data-listfx] > *:nth-child(10) { animation-delay: .36s; } [data-listfx] > *:nth-child(11) { animation-delay: .40s; } [data-listfx] > *:nth-child(n+12) { animation-delay: .44s; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-listfx] > *, .clip-search__panel, .clip-menu-panel, .clip-livedrop--inline, .clip-modal-backdrop, .clip-modal { animation: none !important; } } /* ---- Layout ---- */ .clip-container { max-width: var(--clip-w); margin: 0 auto; padding: 0 32px; } .clip-main { max-width: var(--clip-w); margin: 0 auto; padding: 0 32px 90px; } /* ========================================================================== Header ========================================================================== */ .clip-header { position: sticky; top: 0; z-index: 50; background: var(--hdr-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .clip-header__inner { /* Full-width header bar (SimplyCodes-style): content spans edge-to-edge with side padding; the page content below stays centered at --clip-w. */ max-width: none; margin: 0; display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; gap: 24px; } .clip-header__left { display: flex; align-items: center; gap: 32px; } .clip-logo { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.03em; color: var(--ink); } .clip-logo__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; flex-shrink: 0; } .clip-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; color: var(--ink2); } .clip-nav a { transition: color .15s; } .clip-nav a:hover { color: var(--ink); } .clip-header__right { display: flex; align-items: center; gap: 14px; } .clip-search { position: relative; } .clip-search__toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: background .15s; } .clip-search__toggle:hover { background: var(--line); } .clip-search__panel { position: absolute; top: 50px; right: 0; width: 340px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 54px -22px rgba(0,0,0,.34); padding: 10px; animation: dropIn .2s ease; } .clip-search__box { display: flex; align-items: center; gap: 8px; background: var(--raised); border: 1px solid var(--line); border-radius: 11px; padding: 9px 14px; width: 100%; } .clip-search__box input { border: none; background: transparent; outline: none; font-size: 14px; font-weight: 500; color: var(--ink); width: 100%; } .clip-search__box input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .clip-btn-dark { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: #16181d; color: #fff; border: 0; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .15s; } .clip-btn-dark:hover { transform: translateY(-1px); } /* live-search results, sit inside the search panel, below the field */ .clip-livedrop { margin-top: 6px; } .clip-livedrop__row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; } .clip-livedrop__row:hover { background: var(--raised); } .clip-livedrop__empty { padding: 14px 12px; font-size: 13px; color: var(--muted); font-weight: 600; } /* Inline variant for the hero / page search forms: floats a full-width dropdown directly under the field (the form is position:relative). */ .clip-livedrop--inline { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; margin-top: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 54px -22px rgba(0,0,0,.34); padding: 6px; animation: dropIn .2s ease; } /* ---- Skip link (a11y: first focusable; visible only on focus) ---- */ .clip-skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: #16181d; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; transition: top .15s; } .clip-skip-link:focus { top: 12px; } /* ---- Mobile menu (hamburger), hidden on desktop, shown ≤760px ---- */ .clip-menu-toggle { display: none; width: 40px; height: 40px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; transition: background .15s; } .clip-menu-toggle:hover { background: #eceef1; } .clip-menu-panel { border-top: 1px solid var(--line); background: var(--surface); padding: 14px 18px 18px; animation: dropIn .2s ease; } .clip-menu-search { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px; } .clip-menu-search input { border: none; background: transparent; outline: none; font-size: 15px; font-weight: 500; color: var(--ink); width: 100%; } .clip-menu-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .clip-menu-links { display: flex; flex-direction: column; } .clip-menu-links a { padding: 12px 4px; font-size: 16px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); } .clip-menu-links a:hover { color: var(--accent); } .clip-menu-cta { display: inline-flex; justify-content: center; width: 100%; margin-top: 14px; } /* Desktop safety: the panel never renders on wide viewports. */ @media (min-width: 761px) { .clip-menu-panel { display: none !important; } } /* ========================================================================== Shared bits ========================================================================== */ .clip-monogram { display: grid; place-items: center; border-radius: 11px; flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; } .clip-sec { padding: 44px 0 4px; } .clip-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .clip-h2 { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin: 0; } .clip-seeall { font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer; } .clip-seeall:hover { color: var(--ink); } /* pills (filter chips) */ .clip-pills { display: flex; flex-wrap: wrap; gap: 8px; } .clip-pill { padding: 9px 17px; border-radius: 100px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .18s; background: var(--surface); color: var(--ink2); border: 1px solid var(--line); } .clip-pill:hover { border-color: var(--accent); color: var(--accent); } .clip-pill--active { background: var(--accent); color: #fff; border-color: transparent; } .clip-pill--sm { padding: 8px 15px; font-size: 13px; } /* verified/success microcopy */ .clip-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--good-ink); } /* A11y control resets, agent D turns the rating SVGs into